/* =====================================================================
   RUNWAY v32 — "Studio"
   ---------------------------------------------------------------------
   A light, airy production-readiness workspace: a soft rail on the left,
   a quiet canvas, white cards with hairline borders, and charts that use
   pale tints with one saturated accent per figure.

   Day is the primary theme; night is the same design under low light.
   Every colour below is a token, so no component carries a fixed value.
   Loaded after runway-base.css. No ids, hooks or app logic are touched.
   ===================================================================== */

/* ---------- DAY (default) ----------
   The canvas is white and cards are separated by a hairline border rather
   than by a grey backdrop, so the page reads as one clean sheet. Only the
   rail carries a whisper of tint to set it apart from the working area. */
:root,[data-theme="day"]{
  color-scheme:light;
  --rw-canvas:#ffffff; --rw-side:#f9fafe; --rw-side-line:#ebedf5;
  --rw-s1:#ffffff; --rw-s2:#f7f8fc; --rw-s3:#eff1f7; --rw-sunk:#fafbfe;
  --rw-hover:#f7f8fc; --rw-head:#fafbfe; --rw-row:#f2f4f9; --rw-track:#edeff6;
  --rw-line:#e8eaf0; --rw-line-2:#dcdfe8; --rw-line-3:#c2c7d5;
  --rw-text:#101430; --rw-text-2:#3f4664; --rw-muted:#646b80; --rw-faint:#656c82;
  --rw-pop:#161a33; --rw-pop-text:#f2f4fb; --rw-scrim:rgba(16,20,48,.42);
  --rw-shadow-sm:0 1px 2px rgba(19,24,58,.05);
  --rw-shadow:0 18px 44px -20px rgba(19,24,58,.28),0 2px 8px rgba(19,24,58,.05);
  --rw-shadow-pop:0 24px 60px -18px rgba(19,24,58,.3),0 0 0 1px rgba(19,24,58,.05);

  --rw-primary:#5b52e0; --rw-primary-hi:#6d64ea; --rw-primary-ink:#ffffff;
  --rw-primary-bg:#edecfd; --rw-primary-line:#c9c5f6; --rw-primary-text:#4a41c9;

  --rw-ok:#10b987;   --rw-ok-bg:#e6f8f1;  --rw-ok-text:#067050;  --rw-ok-soft:#c8eee0;
  --rw-warn:#e08a0d; --rw-warn-bg:#fdf3e2; --rw-warn-text:#8f5600; --rw-warn-soft:#f6e0b8;
  --rw-bad:#e8556d;  --rw-bad-bg:#fdedf0;  --rw-bad-text:#b42a44;  --rw-bad-soft:#f7ccd5;
  --rw-info:#5b52e0; --rw-info-bg:#edecfd; --rw-info-text:#4a41c9;
  --rw-coral:#e0593a; --rw-coral-text:#c74a2a;

  --t-red-bg:#fdedf0;    --t-red-bg2:#f9d9df;    --t-red-line:#f0bcc6;    --t-red-text:#b42a44;
  --t-orange-bg:#fff0e9; --t-orange-bg2:#ffdccd; --t-orange-line:#f5c0a9; --t-orange-text:#a64a28;
  --t-amber-bg:#fdf3e2;  --t-amber-bg2:#f9e4bd;  --t-amber-line:#eed398;  --t-amber-text:#8f5600;
  --t-green-bg:#e6f8f1;  --t-green-bg2:#cceee1;  --t-green-line:#a3ddc8;  --t-green-text:#07805c;
  --t-teal-bg:#e2f6f6;   --t-teal-bg2:#c4ebeb;   --t-teal-line:#96dada;   --t-teal-text:#0a6f76;
  --t-blue-bg:#eaf0fe;   --t-blue-bg2:#d5e2fc;   --t-blue-line:#b2c8f5;   --t-blue-text:#2a4fb8;
  --t-violet-bg:#edecfd;  --t-violet-bg2:#ddd9fb; --t-violet-line:#c4bef6; --t-violet-text:#4a41c9;
  --t-pink-bg:#fdeaf5;   --t-pink-bg2:#f9d3ea;   --t-pink-line:#efaed6;   --t-pink-text:#a3246e;
}

/* ---------- NIGHT ---------- */
[data-theme="night"]{
  color-scheme:dark;
  --rw-canvas:#101320; --rw-side:#151827; --rw-side-line:#222739;
  --rw-s1:#1a1e2e; --rw-s2:#212639; --rw-s3:#29304673; --rw-s3:#293046; --rw-sunk:#161a28;
  --rw-hover:#212639; --rw-head:#1e2334; --rw-row:#262c40; --rw-track:#2a3149;
  --rw-line:#262c40; --rw-line-2:#333b54; --rw-line-3:#48527033; --rw-line-3:#485270;
  --rw-text:#eef0f8; --rw-text-2:#c3c9dd; --rw-muted:#949cb8; --rw-faint:#868fb0;
  --rw-pop:#0a0d18; --rw-pop-text:#eef0f8; --rw-scrim:rgba(6,8,16,.7);
  --rw-shadow-sm:none;
  --rw-shadow:0 20px 48px -24px rgba(0,0,0,.7);
  --rw-shadow-pop:0 26px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05);

  --rw-primary:#7d75f5; --rw-primary-hi:#8f88f8; --rw-primary-ink:#0d0a2e;
  --rw-primary-bg:rgba(125,117,245,.16); --rw-primary-line:rgba(125,117,245,.45); --rw-primary-text:#a9a3fb;

  --rw-ok:#2fd6a8;   --rw-ok-bg:rgba(47,214,168,.14);  --rw-ok-text:#69e6c2;  --rw-ok-soft:rgba(47,214,168,.3);
  --rw-warn:#f5b443; --rw-warn-bg:rgba(245,180,67,.15); --rw-warn-text:#ffcd76; --rw-warn-soft:rgba(245,180,67,.32);
  --rw-bad:#ff6b85;  --rw-bad-bg:rgba(255,107,133,.15); --rw-bad-text:#ff9aac;  --rw-bad-soft:rgba(255,107,133,.32);
  --rw-info:#7d75f5; --rw-info-bg:rgba(125,117,245,.16); --rw-info-text:#a9a3fb;
  --rw-coral:#ff8a6a; --rw-coral-text:#ff9a7d;

  --t-red-bg:rgba(255,107,133,.09);    --t-red-bg2:rgba(255,107,133,.18);    --t-red-line:rgba(255,107,133,.42);    --t-red-text:#ff9aac;
  --t-orange-bg:rgba(255,138,106,.09); --t-orange-bg2:rgba(255,138,106,.18); --t-orange-line:rgba(255,138,106,.42); --t-orange-text:#ffab90;
  --t-amber-bg:rgba(245,180,67,.14);   --t-amber-bg2:rgba(245,180,67,.24);   --t-amber-line:rgba(245,180,67,.42);   --t-amber-text:#ffcd76;
  --t-green-bg:rgba(47,214,168,.13);   --t-green-bg2:rgba(47,214,168,.22);   --t-green-line:rgba(47,214,168,.4);    --t-green-text:#69e6c2;
  --t-teal-bg:rgba(45,212,212,.13);    --t-teal-bg2:rgba(45,212,212,.22);    --t-teal-line:rgba(45,212,212,.4);     --t-teal-text:#6ce4e4;
  --t-blue-bg:rgba(122,162,255,.14);   --t-blue-bg2:rgba(122,162,255,.24);   --t-blue-line:rgba(122,162,255,.42);   --t-blue-text:#a9c6ff;
  --t-violet-bg:rgba(125,117,245,.16); --t-violet-bg2:rgba(125,117,245,.26); --t-violet-line:rgba(125,117,245,.45); --t-violet-text:#a9a3fb;
  --t-pink-bg:rgba(244,124,190,.15);   --t-pink-bg2:rgba(244,124,190,.25);   --t-pink-line:rgba(244,124,190,.42);   --t-pink-text:#f9a8d4;
}

/* ---------- tokens the legacy base + app-rendered markup read ---------- */
:root{
  --rw-ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --rw-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
:root,[data-theme]{
  --nav:var(--rw-side); --nav-hi:var(--rw-s2); --nav-hi-2:var(--rw-s3);
  --brand:var(--rw-primary); --brand-ink:var(--rw-primary-text); --brand-soft:var(--rw-primary-bg); --brand-2:var(--rw-primary-hi);
  --canvas:var(--rw-canvas); --surface:var(--rw-s1);
  --ink:var(--rw-text); --text:var(--rw-text); --muted:var(--rw-muted); --faint:var(--rw-faint);
  --line:var(--rw-line); --line-soft:var(--rw-row);
  --red:var(--rw-bad); --red-bg:var(--rw-bad-bg); --red-line:var(--t-red-line);
  --amber:var(--rw-warn); --amber-bg:var(--rw-warn-bg);
  --ok:var(--rw-ok); --ok-bg:var(--rw-ok-bg);
  --blue:var(--rw-info); --blue-bg:var(--rw-info-bg); --mint:var(--rw-ok-bg);
  --radius-s:8px; --radius-m:12px; --radius-l:18px;
  --shadow-1:var(--rw-shadow-sm); --shadow-2:var(--rw-shadow-pop); --shadow-nav:none;
  --fs-2xs:12px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:14px; --fs-md:15px;
  --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px;
  --fw-reg:400; --fw-med:500; --fw-sb:600; --fw-bold:700;
}
.rw-theme-switching *,.rw-theme-switching *::before,.rw-theme-switching *::after{
  transition:background-color .28s,border-color .28s,color .28s,fill .28s,stroke .28s!important}

/* =====================================================================
   FOUNDATION
   ===================================================================== */
html{background:var(--rw-canvas)}
body{margin:0;background:var(--rw-canvas)!important;color:var(--rw-text);
  font:400 14px/1.5 var(--rw-ui);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:var(--rw-ui);color:var(--rw-text);letter-spacing:-.02em;font-weight:700}
.mono,.partno,.partno-field,.support-ticket,.flag-id{font-family:var(--rw-mono)!important}
::selection{background:var(--rw-primary-bg);color:var(--rw-primary-text)}
:focus-visible{outline:2px solid var(--rw-primary)!important;outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--rw-line-2);border:3px solid transparent;background-clip:padding-box;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--rw-line-3);background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-color:var(--rw-line-2) transparent}
.rw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.up{display:none!important}

/* =====================================================================
   SHELL
   ===================================================================== */
.app.rw-app{display:grid;grid-template-columns:264px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden}

/* ---- left rail ---- */
.side.rw-side{
  display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;padding:0;overflow:visible;
  background:var(--rw-side)!important;border-right:1px solid var(--rw-side-line);box-shadow:none
}
.rw-brand{display:flex;align-items:center;gap:11px;padding:22px 22px 18px;text-decoration:none;color:var(--rw-text);flex:0 0 auto}
.rw-brand-mark{width:34px;height:34px;border-radius:11px;background:var(--rw-primary);display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:8px 0 9px;box-shadow:0 6px 16px -6px var(--rw-primary)}
.rw-brand-mark i{width:3.5px;border-radius:2px;background:#fff;display:block}
.rw-brand-mark i:nth-child(1){height:8px;opacity:.65}
.rw-brand-mark i:nth-child(2){height:13px}
.rw-brand-mark i:nth-child(3){height:17px;opacity:.85}
.rw-brand-word{font:800 17px/1 var(--rw-ui);letter-spacing:-.03em;display:flex;flex-direction:column;gap:4px}
.rw-brand-word small{font:500 10.5px/1 var(--rw-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--rw-faint)}

.rw-side-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 14px 8px;scrollbar-width:thin}
.rw-side-label{margin:14px 0 8px;padding:0 10px;font:600 12px/1 var(--rw-ui);color:var(--rw-primary-text);letter-spacing:0}
.rw-side-foot .rw-side-label{color:var(--rw-muted)}

.nav.rw-nav{display:flex!important;flex-direction:column;gap:2px;padding:0!important;background:none!important}
.rw-nav>button,.rw-nav .nav-group button{
  display:flex!important;align-items:center;gap:12px;width:100%;min-height:42px;padding:0 10px!important;
  border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;cursor:pointer;
  font:500 14px/1 var(--rw-ui)!important;color:var(--rw-text-2)!important;text-align:left;position:relative;
  transition:background .15s,color .15s
}
.rw-nav .nav-ico{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;color:var(--rw-faint);transition:color .15s}
.rw-nav .nav-ico svg{width:20px;height:20px}
.rw-nav-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-nav>button:hover,.rw-nav .nav-group button:hover{background:var(--rw-s3)!important;color:var(--rw-text)!important}
.rw-nav>button:hover .nav-ico,.rw-nav .nav-group button:hover .nav-ico{color:var(--rw-text-2)}
.rw-nav>button.on,.rw-nav .nav-group button.on{
  background:var(--rw-primary-bg)!important;color:var(--rw-primary-text)!important;font-weight:600!important
}
.rw-nav>button.on .nav-ico,.rw-nav .nav-group button.on .nav-ico{color:var(--rw-primary)}
.rw-nav em,#navRisk{
  margin-left:auto;font:600 11.5px/1 var(--rw-mono)!important;font-style:normal;min-width:22px;height:20px;
  padding:0 6px!important;display:inline-grid;place-items:center;border-radius:6px!important;border:0!important;
  background:var(--rw-bad-bg)!important;color:var(--rw-bad-text)!important
}
.rw-nav-road{margin-top:2px}

.nav-group{border:0!important;background:none!important;border-radius:0!important;margin:10px 0 0!important;overflow:visible!important}
.nav-group summary{
  display:flex!important;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;
  padding:6px 10px!important;margin:0 0 2px!important;border-radius:8px;background:none!important;
  font:600 11.5px/1 var(--rw-ui)!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:var(--rw-faint)!important;
  transition:color .15s
}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:hover{color:var(--rw-text-2)!important}
.nav-group summary .rw-chev{width:15px;height:15px;transition:transform .2s;opacity:.8}
.nav-group:not([open]) summary .rw-chev{transform:rotate(-90deg)}
.nav-group summary i{display:none!important}

/* rail footer: live attention list + account chip */
.rw-side-foot{flex:0 0 auto;min-width:0;padding:10px 14px 16px;position:relative;z-index:5;background:var(--rw-side);border-top:1px solid var(--rw-side-line);margin:0!important;display:block!important}
.rw-road{display:grid;gap:2px;margin-bottom:12px}
.rw-road{min-width:0}
.rw-road-row,.rw-road-empty{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer;
  min-width:0;max-width:100%;overflow:hidden;font:500 13px/1.3 var(--rw-ui);color:var(--rw-text-2);transition:background .15s}
.rw-road-row:hover{background:var(--rw-s3)}
.rw-road-empty{cursor:default;color:var(--rw-muted)}
.rw-road-row span,.rw-road-empty span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-road i{width:11px;height:11px;flex:0 0 11px;border-radius:50%;border:2px solid currentColor;background:transparent}
.rw-road i.critical{color:var(--rw-bad)}
.rw-road i.watch{color:var(--rw-warn)}
.rw-road i.ok{color:var(--rw-ok)}

.rw-side-foot .account-wrap{position:relative;display:block}
.account-btn{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:13px;cursor:pointer;
  background:var(--rw-s1);border:1px solid var(--rw-line);box-shadow:var(--rw-shadow-sm);color:var(--rw-text);
  transition:border-color .15s,box-shadow .15s
}
.account-btn:hover{border-color:var(--rw-line-2);box-shadow:var(--rw-shadow)}
.account-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:var(--rw-primary);color:#fff;font:700 13px/1 var(--rw-ui)}
.account-txt{text-align:left;line-height:1.25;min-width:0;flex:1 1 auto}
.account-txt b{display:block;font:700 13px/1.25 var(--rw-ui);color:var(--rw-primary-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-txt small{display:block;font:400 11.5px/1.25 var(--rw-ui);color:var(--rw-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-btn::after{content:"";width:8px;height:8px;flex:0 0 8px;margin-right:6px;border-right:2px solid var(--rw-faint);border-bottom:2px solid var(--rw-faint);transform:rotate(45deg) translateY(-2px)}
.rw-side-foot .side-tools{display:block;margin:0 0 10px}
.ghost-btn{
  display:flex!important;align-items:center;gap:9px;width:100%;min-height:38px;padding:0 10px!important;cursor:pointer;
  border:1px dashed var(--rw-line-2)!important;border-radius:10px!important;background:transparent!important;
  font:500 13px/1 var(--rw-ui)!important;color:var(--rw-muted)!important;transition:border-color .15s,color .15s
}
.ghost-btn svg{width:16px;height:16px}
.ghost-btn:hover{border-color:var(--rw-primary-line)!important;color:var(--rw-primary-text)!important}
.health{display:none!important}

/* ---- main ---- */
.main{min-width:0;height:100%;overflow:hidden!important;background:var(--rw-canvas)}
.main-in{height:100%;max-width:none;margin:0;padding:0 26px 20px!important;width:100%;display:flex;flex-direction:column;min-height:0}

.top.rw-top{
  flex:0 0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  height:auto;min-height:0;padding:20px 0 16px;margin:0;border:0;border-bottom:1px solid var(--rw-line);
  background:transparent;backdrop-filter:none;border-radius:0
}
.rw-top-left{min-width:0;display:flex;flex-direction:column;gap:8px}
.rw-top h1,#title{margin:0;font:700 26px/1.15 var(--rw-ui)!important;letter-spacing:-.03em;color:var(--rw-text)}
.rw-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0!important}
.rw-site{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--rw-ui);color:var(--rw-muted);min-width:0}
.rw-crumb .company-name{display:inline!important;margin:0!important;font:500 13px/1 var(--rw-ui)!important;color:var(--rw-muted)!important;
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-dot{width:7px;height:7px;border-radius:50%;background:var(--rw-ok);box-shadow:0 0 0 3px var(--rw-ok-bg);flex:0 0 auto}
.rw-sep{width:1px;height:14px;background:var(--rw-line-2)}
.rw-product{position:relative;display:inline-flex;align-items:center;min-width:0}
.rw-product select{
  -webkit-appearance:none;appearance:none;height:32px;padding:0 30px 0 11px;max-width:260px;width:auto!important;margin:0!important;
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:9px;color:var(--rw-text);
  font:600 13px/1 var(--rw-ui);cursor:pointer;transition:border-color .15s;text-overflow:ellipsis
}
.rw-product select:hover:not(:disabled){border-color:var(--rw-line-2)}
.rw-product select:disabled{opacity:1;cursor:default;color:var(--rw-muted)}
.rw-product .rw-chev{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;color:var(--rw-faint)}
.rw-product select option{background:var(--rw-s1);color:var(--rw-text)}
.workspace-create{
  display:none;align-items:center;gap:5px;height:32px;padding:0 11px;width:auto!important;margin:0!important;cursor:pointer;
  border:1px dashed var(--rw-line-2);border-radius:9px;background:transparent;color:var(--rw-muted);
  font:500 12.5px/1 var(--rw-ui);white-space:nowrap;transition:border-color .15s,color .15s
}
.workspace-create[style*="block"]{display:inline-flex!important}
.workspace-create svg{width:13px;height:13px}
.workspace-create:hover{border-color:var(--rw-primary-line);color:var(--rw-primary-text)}

.rw-top-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.rw-top #reset{display:none!important}
.save-state{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 6px;font:500 12.5px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
.save-state i{width:7px;height:7px;border-radius:50%;background:var(--rw-ok);box-shadow:0 0 0 3px var(--rw-ok-bg)}
.save-state.saving i{background:var(--rw-warn);box-shadow:0 0 0 3px var(--rw-warn-bg);animation:rwBlink .9s ease-in-out infinite}
@keyframes rwBlink{50%{opacity:.3}}

/* header icon cluster — rounded squares, like the reference */
.rw-ico-row{display:flex;align-items:center;gap:8px}
.rw-ico,.rw-top .btn.icon-only{
  width:38px;height:38px;min-height:38px;padding:0!important;display:grid!important;place-items:center;position:relative;cursor:pointer;
  border-radius:11px!important;background:var(--rw-s1)!important;border:1px solid var(--rw-line)!important;
  color:var(--rw-muted)!important;box-shadow:var(--rw-shadow-sm)!important;transition:color .15s,border-color .15s,transform .08s
}
.rw-ico svg{width:19px;height:19px}
.rw-ico:hover{color:var(--rw-primary-text)!important;border-color:var(--rw-primary-line)!important}
.rw-ico:active{transform:translateY(1px)}
.rw-ico summary{list-style:none;display:grid;place-items:center;width:100%;height:100%}
.rw-ico summary::-webkit-details-marker{display:none}
.sync-btn.spinning svg{animation:rwSpin .5s linear}
@keyframes rwSpin{to{transform:rotate(360deg)}}
.rw-theme-btn svg{grid-area:1/1;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.rw-theme-btn .rw-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme="night"] .rw-theme-btn .rw-sun{opacity:0;transform:rotate(60deg) scale(.6)}
[data-theme="night"] .rw-theme-btn .rw-moon{opacity:1;transform:none}
.rw-theme-btn:hover .rw-sun{transform:rotate(40deg)}
.bell-wrap,.account-wrap{position:relative}
.bell-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--rw-bad);color:#fff;font:600 10.5px/18px var(--rw-mono);font-style:normal;text-align:center;border:2px solid var(--rw-canvas)}
.bell-badge.zero{display:none}

/* banner chips under the title row */
.rw-flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.rw-flags:empty{display:none}
.rw-flags .demo-banner,.rw-flags .no-product-banner{
  position:relative;display:flex;align-items:center;gap:12px;margin:0!important;min-height:40px;padding:6px 6px 6px 14px!important;
  border-radius:12px;background:var(--rw-primary-bg)!important;border:1px solid var(--rw-primary-line)!important;box-shadow:none!important
}
.rw-flags .demo-banner::before,.rw-flags .no-product-banner::before{display:none}
.rw-flags .demo-banner>div,.rw-flags .no-product-banner>div{display:flex!important;align-items:baseline;gap:8px;min-width:0}
.rw-flags b{font:700 13px/1 var(--rw-ui)!important;color:var(--rw-primary-text)!important;white-space:nowrap}
.rw-flags span{font:400 12.5px/1.3 var(--rw-ui)!important;color:var(--rw-text-2)!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.rw-flags .btn{height:30px!important;min-height:30px!important;padding:0 11px!important;font-size:12.5px!important}

/* =====================================================================
   CONTROLS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-height:38px;padding:0 15px;cursor:pointer;
  border-radius:11px;border:1px solid var(--rw-line);background:var(--rw-s1);color:var(--rw-text);
  font:600 13.5px/1 var(--rw-ui)!important;white-space:nowrap;box-shadow:var(--rw-shadow-sm);
  transition:background .15s,border-color .15s,color .15s,transform .08s
}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--rw-s2);border-color:var(--rw-line-2)}
.btn:active{transform:translateY(1px)}
.btn.small,.register-tabs button{height:33px!important;min-height:33px!important;padding:0 12px!important;font-size:12.5px!important;border-radius:9px!important}
.btn.icon-only{width:38px;padding:0!important}
.btn.small.icon-only{width:33px}
.btn.primary{background:var(--rw-primary)!important;border-color:var(--rw-primary)!important;color:var(--rw-primary-ink)!important;
  box-shadow:0 8px 20px -10px var(--rw-primary)}
.btn.primary:hover{background:var(--rw-primary-hi)!important;border-color:var(--rw-primary-hi)!important}
.btn.danger{color:var(--rw-bad-text)}
.btn.danger:hover{background:var(--rw-bad-bg);border-color:var(--t-red-line)}
.btn:disabled,.btn[data-access-locked]{opacity:.5;cursor:not-allowed}
.runway-return{background:var(--rw-primary-bg)!important;border-color:var(--rw-primary-line)!important;color:var(--rw-primary-text)!important}
.rowbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--rw-line);background:var(--rw-s1);color:var(--rw-muted);
  display:grid;place-items:center;cursor:pointer;transition:all .15s}
.rowbtn svg{width:14px;height:14px}
.rowbtn:hover{background:var(--rw-s2);color:var(--rw-text);border-color:var(--rw-line-2)}
.rowbtn.del:hover{background:var(--rw-bad-bg);color:var(--rw-bad-text);border-color:var(--t-red-line)}

.field,.form input,.form select,.search input,.filter-select,.sheet-card .field,.qty-cell,.date-cell,textarea{
  height:38px;border:1px solid var(--rw-line);border-radius:10px;background:var(--rw-s1);color:var(--rw-text);
  font:400 14px/1.3 var(--rw-ui)!important;transition:border-color .15s,box-shadow .15s}
.field{padding:0 11px;line-height:36px}
textarea.field,.shift-notes,textarea{height:auto;line-height:1.5;padding:10px 11px}
.field:hover:not(:disabled):not(:focus),.search input:hover:not(:focus),.filter-select:hover{border-color:var(--rw-line-2)}
input:not(:disabled):focus,select:not(:disabled):focus,textarea:not(:disabled):focus,.field:focus{
  outline:none!important;border-color:var(--rw-primary)!important;box-shadow:0 0 0 3px var(--rw-primary-bg)!important;background:var(--rw-s1)!important}
.field:disabled,input:disabled,select:disabled{opacity:.6}
select option{background:var(--rw-s1);color:var(--rw-text)}
.filter-select{padding:0 32px 0 12px;font-weight:500!important}
.search svg{left:12px;width:16px;height:16px;color:var(--rw-faint);pointer-events:none}
.search input{width:250px;padding:0 12px 0 36px;border-radius:10px}
input::placeholder,textarea::placeholder{color:var(--rw-faint);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--rw-primary);width:16px;height:16px}
.date-cell{background:transparent;border-color:transparent}
.date-cell:hover{border-color:var(--rw-line)}
.qty-cell{width:88px;padding:0 9px}

/* status pill */
.status{
  display:inline-flex!important;align-items:center;gap:6px;height:25px;min-height:25px;padding:0 10px 0 9px;border:0!important;
  border-radius:8px!important;font:600 12px/1 var(--rw-ui)!important;letter-spacing:0;white-space:nowrap}
.status:is(.critical,.watch,.ok)::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.critical{background:var(--rw-bad-bg)!important;color:var(--rw-bad-text)!important}
.status.watch{background:var(--rw-warn-bg)!important;color:var(--rw-warn-text)!important}
.status.ok{background:var(--rw-ok-bg)!important;color:var(--rw-ok-text)!important}
.status.neutral{background:var(--rw-s3)!important;color:var(--rw-text-2)!important}
.role-pill{font:600 12px/1 var(--rw-ui);padding:5px 10px;border-radius:8px!important}

/* panels */
.panel,.drawer{background:var(--rw-s1)!important;border:1px solid var(--rw-line)!important;border-radius:18px;
  padding:20px 22px;box-shadow:var(--rw-shadow-sm)!important;color:var(--rw-text)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.panel-head h2,.panel h2,.main h2{font:700 17px/1.25 var(--rw-ui)!important;margin:0;color:var(--rw-text);letter-spacing:-.02em}
.panel-head .sub,.panel .sub,.sub{font:400 13px/1.45 var(--rw-ui)!important;color:var(--rw-muted);margin-top:4px}
.main h3{font:600 15px/1.3 var(--rw-ui);color:var(--rw-text)}
.note,.inventory-safety-control,.access-notice,.live{
  background:var(--rw-primary-bg)!important;border:1px solid var(--rw-primary-line)!important;color:var(--rw-primary-text)!important;
  border-radius:12px!important;font-size:13px!important;padding:11px 14px!important}
.access-notice{background:var(--rw-warn-bg)!important;border-color:var(--t-amber-line)!important;color:var(--rw-warn-text)!important}
.inventory-safety-control b,.live b,.note b{color:var(--rw-text)!important}
.inventory-safety-control span,.live span{color:var(--rw-text-2)!important}
.live{position:static!important;height:auto!important;margin:0 0 12px!important;flex:0 0 auto}
.product-switch{display:none!important}

/* =====================================================================
   VIEW REGION — one screen, only data areas scroll
   ===================================================================== */
.view{display:none}
.view.on{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;height:auto!important;overflow:auto;
  padding-top:18px;animation:rwView .22s ease both}
@keyframes rwView{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.view.on>.section-title{flex:0 0 auto}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px!important}
.section-title .sub{font:400 13.5px/1.5 var(--rw-ui)!important;max-width:78ch;color:var(--rw-muted);margin:0}
.section-title h2{font-size:20px!important}
.section-title .eyebrow{display:none}
.section-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

#bom.view.on,#inventory.view.on,#supply.view.on,#documents.view.on,#team.view.on,#attention.view.on{overflow:hidden}
#bom.view.on>.table-panel,#inventory.view.on>.table-panel,#supply.view.on>.table-panel,
#documents.view.on>.table-panel,#team.view.on>.table-panel{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto!important}
#team.view.on>.note,#team.view.on>.team-seat-summary{flex:0 0 auto;margin-bottom:12px}
#attention .attention-layout{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:16px;align-items:stretch}
#attention .attention-layout>.table-panel{min-height:0;overflow:auto!important;max-height:none!important}
#attention .attention-layout>.drawer{position:static!important;min-height:0;overflow:auto;max-height:none!important;top:auto}
#stations.view.on,#roadblocks.view.on,#processsetup.view.on,#shift.view.on,#account.view.on,#billing.view.on,#support.view.on{overflow:hidden}
#stations.view.on>:last-child,#roadblocks.view.on>:last-child,#processsetup.view.on>:last-child,#shift.view.on>:last-child,
#account.view.on>:last-child,#billing.view.on>:last-child,#support.view.on>:last-child{
  flex:1 1 auto;min-height:0;overflow:auto;height:auto!important;max-height:none!important;padding-right:2px}
.plan-view.on{display:grid!important;height:auto!important;flex:1 1 auto;min-height:0;overflow:hidden!important;
  grid-template-rows:auto auto minmax(170px,1fr) minmax(160px,1fr)!important;gap:14px}
.plan-view .plan-table-panel{max-height:none!important;min-height:0;overflow:auto!important}
.plan-view .plan-chart-panel{min-height:0}
.plan-basis{padding:16px 20px!important;margin:0!important}
.gantt-view.on{display:grid!important;height:auto!important;flex:1 1 auto;min-height:0;grid-template-rows:auto minmax(0,1fr)!important}
.main.plan-mode,.main.gantt-mode,.main.dashboard-mode{overflow:hidden!important}

/* =====================================================================
   OVERVIEW
   ===================================================================== */
#dashboard.view.on{overflow:hidden}
.rw-dash{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);gap:16px}
.rw-readout{grid-column:1/-1;grid-row:1}
.rw-gauge{grid-column:1/span 3;grid-row:2}
.rw-outlook{grid-column:4/span 5;grid-row:2}
.rw-risks{grid-column:9/-1;grid-row:2}
.rw-targets{grid-column:1/span 8;grid-row:3}
.rw-cells{grid-column:9/-1;grid-row:3}
.rw-dash>.panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.rw-dash>.panel>.panel-head{flex:0 0 auto}

/* KPI strip — one card, hairline dividers, colour by state */
.rw-readout .metric-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0;
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:18px;overflow:hidden;box-shadow:var(--rw-shadow-sm)}
.rw-readout .metric{
  position:relative;background:transparent;border:0;border-radius:0;box-shadow:none;padding:16px 20px 18px;min-height:0;
  display:flex;flex-direction:column;gap:10px}
.rw-readout .metric+.metric::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--rw-line)}
.rw-readout .metric small{display:flex;align-items:center;gap:8px;font:500 12.5px/1.2 var(--rw-ui);color:var(--rw-muted)}
.rw-readout .metric small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rw-primary);flex:0 0 auto}
.rw-readout .metric.warn small::before{background:var(--rw-coral)}
.rw-readout .metric.good small::before{background:var(--rw-ok)}
.rw-readout .metric strong{
  display:block;font:700 clamp(20px,1.55vw,27px)/1 var(--rw-ui);letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  color:var(--rw-primary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-readout .metric.warn strong{color:var(--rw-coral-text)}
.rw-readout .metric.good strong{color:var(--rw-ok-text)}

/* outlook chart */
.rw-outlook .chart{flex:1 1 auto;min-height:0;height:auto!important;overflow:hidden;padding-top:4px}
.rw-legend{display:flex;align-items:center;gap:14px;margin-left:auto;padding-top:3px;font:500 12.5px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
.rw-legend span{display:inline-flex;align-items:center;gap:7px}
.rw-key{width:11px;height:11px;border-radius:4px;display:inline-block}
.rw-key.covered{background:var(--rw-ok-soft);box-shadow:inset 0 0 0 1.5px var(--rw-ok)}
.rw-key.short{background:var(--rw-bad-soft);box-shadow:inset 0 0 0 1.5px var(--rw-bad)}
.rw-key.plan{height:0;border-top:2px dashed var(--rw-faint);border-radius:0}
.chart svg text{font-family:var(--rw-ui);font-size:11.5px;fill:var(--rw-muted)!important;font-variant-numeric:tabular-nums}
.chart svg line{stroke:var(--rw-row)}
.chart svg path[stroke="var(--faint)"]{stroke:var(--rw-faint);stroke-width:1.6;opacity:.9}
.chart svg path[stroke="var(--brand)"]{stroke:var(--rw-ok);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.chart svg path[fill="var(--red-bg)"]{fill:var(--rw-bad-soft);opacity:.55}
.chart svg path[fill="var(--ok-bg)"]{fill:var(--rw-ok-soft);opacity:.5}
.chart-point{fill:var(--rw-ok);stroke:var(--rw-s1)!important;stroke-width:2.5;cursor:crosshair;transition:r .15s}
.chart-point:hover{r:7px}
.chart-empty{height:100%;display:grid;place-items:center;font-size:14px;color:var(--rw-muted)}
.chart-tooltip{
  position:fixed;z-index:90;pointer-events:none;display:none;max-width:260px;padding:10px 13px;border-radius:12px;
  background:var(--rw-s1)!important;color:var(--rw-text)!important;border:1px solid var(--rw-line);
  font:600 13px/1.45 var(--rw-ui)!important;box-shadow:var(--rw-shadow-pop)}
.chart-download{position:relative}
.chart-download summary{list-style:none}
.chart-download summary::-webkit-details-marker{display:none}
.chart-download-menu{position:absolute;right:0;top:calc(100% + 8px);display:none;min-width:178px;padding:6px;z-index:40;
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:13px;box-shadow:var(--rw-shadow-pop)}
.chart-download[open] .chart-download-menu{display:block;animation:rwPop .14s ease}
@keyframes rwPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.chart-download-menu button{display:block;width:100%;text-align:left;padding:10px;border:0;border-radius:9px;background:transparent;
  color:var(--rw-text);font:500 13.5px/1 var(--rw-ui);cursor:pointer}
.chart-download-menu button:hover{background:var(--rw-s2)}

/* readiness dial */
.rw-gauge .panel-head{margin-bottom:8px}
.rw-gauge-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;overflow:hidden;justify-content:center;padding-bottom:2px}
.rw-dial{position:relative;width:100%;max-width:152px;flex:0 0 auto;margin-bottom:0}
.rw-dial svg{display:block;width:100%;height:auto;overflow:visible}
.rw-dial-track{stroke:var(--rw-track)}
.rw-dial-fill{stroke:var(--rw-bad);stroke-dasharray:0 251.3;visibility:hidden;transition:stroke-dasharray .75s cubic-bezier(.2,.8,.2,1),stroke .3s}
.rw-gauge[data-state="watch"] .rw-dial-fill{stroke:var(--rw-warn)}
.rw-gauge[data-state="ok"] .rw-dial-fill{stroke:var(--rw-ok)}
.rw-dial-fill[data-on="1"]{visibility:visible}
.rw-dial-mid{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center}
.rw-dial-mid b{font:700 26px/1 var(--rw-ui);letter-spacing:-.04em;color:var(--rw-text);font-variant-numeric:tabular-nums}
.rw-dial-verdict{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 11px;border-radius:8px;
  font:600 12px/1 var(--rw-ui);background:var(--rw-bad-bg);color:var(--rw-bad-text)}
.rw-gauge[data-state="watch"] .rw-dial-verdict{background:var(--rw-warn-bg);color:var(--rw-warn-text)}
.rw-gauge[data-state="ok"] .rw-dial-verdict{background:var(--rw-ok-bg);color:var(--rw-ok-text)}
.rw-dial-note{margin:0;max-width:32ch;flex:0 1 auto;min-height:0;font:400 12.5px/1.45 var(--rw-ui);color:var(--rw-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rw-dial-cta{background:var(--rw-primary)!important;border-color:var(--rw-primary)!important;color:var(--rw-primary-ink)!important;
  height:36px!important;min-height:36px!important;box-shadow:0 8px 20px -10px var(--rw-primary)}
.rw-dial-cta:hover{background:var(--rw-primary-hi)!important;border-color:var(--rw-primary-hi)!important}
.rw-dial-cta svg{width:15px;height:15px}


/* blocking materials */
.rw-risks .quick-risk{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:8px;margin:0 -4px;padding:0 4px;max-height:none!important}
.risk-card{
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:12px 14px!important;border-radius:13px!important;background:var(--rw-s1)!important;border:1px solid var(--rw-line)!important;
  transition:border-color .15s,box-shadow .15s,transform .15s;color:var(--rw-text)}
.risk-card b{display:block;font:700 13.5px/1.3 var(--rw-ui)!important;color:var(--rw-text)!important;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.risk-card small{display:block;margin-top:4px;font:400 11px/1.3 var(--rw-mono)!important;color:var(--rw-muted)!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.risk-card .status{height:23px;min-height:23px;padding:0 8px;font-size:11.5px!important;flex:0 0 auto}
.risk-card[data-part]{cursor:pointer}
.risk-card[data-part]:hover{border-color:var(--rw-line-2)!important;box-shadow:var(--rw-shadow);transform:translateY(-1px)}

/* build targets */
.rw-targets .table-panel{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto;border:1px solid var(--rw-line)!important;
  border-radius:13px!important;background:var(--rw-sunk)!important;box-shadow:none!important}
.rw-targets table{min-width:0!important;table-layout:fixed}
.rw-targets th:nth-child(1){width:18%}.rw-targets th:nth-child(2){width:14%}.rw-targets th:nth-child(3){width:15%}
.rw-targets th:nth-child(4){width:15%}.rw-targets th:nth-child(5){width:20%}.rw-targets th:nth-child(6){width:18%}
.rw-targets td{height:42px!important}
.dashboard-card #dashAddTarget{background:var(--rw-s1)!important;border-color:var(--rw-line)!important;color:var(--rw-text)!important}
.dashboard-card #dashAddTarget:hover{background:var(--rw-s2)!important;border-color:var(--rw-line-2)!important}
.mini-bar{height:7px;max-width:180px;border-radius:4px;background:var(--rw-track);overflow:hidden}
.mini-bar i{display:block;height:100%;border-radius:4px;background:var(--rw-ok)}
tr.row-watch .mini-bar i{background:var(--rw-warn)}
tr.row-critical .mini-bar i{background:var(--rw-bad)}

/* work cells */
.rw-cells .cell-glance{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid!important;
  grid-template-columns:1fr;align-content:start;gap:6px;max-height:none!important}
.cell-chip{padding:11px 13px!important;border-radius:12px!important;background:var(--rw-sunk)!important;border:1px solid transparent!important;
  cursor:pointer;transition:background .15s,border-color .15s;color:var(--rw-text)}
.cell-chip:hover{background:var(--rw-s2)!important;border-color:var(--rw-line)!important}
.cell-chip .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.cell-chip b{font:600 13px/1.3 var(--rw-ui);color:var(--rw-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell-chip .n{font-size:11.5px;color:var(--rw-muted);white-space:nowrap}
.cell-chip .status{height:22px;min-height:22px;font-family:var(--rw-mono)!important;font-size:11.5px!important;padding:0 8px}
.station-bar{height:7px;border-radius:4px;background:var(--rw-track);display:flex;overflow:hidden;margin:0}
.station-bar .seg{height:100%;border-right:2px solid var(--rw-sunk)}
.station-bar .seg:last-child{border-right:0}
.station-bar .seg.critical{background:var(--rw-bad)}
.station-bar .seg.watch{background:var(--rw-warn)}
.station-bar .seg.ok{background:var(--rw-ok)}

/* =====================================================================
   TABLES
   ===================================================================== */
.table-panel,.plan-table-panel{background:var(--rw-s1)!important;border:1px solid var(--rw-line)!important;border-radius:16px!important;
  box-shadow:var(--rw-shadow-sm)!important}
table{font-variant-numeric:tabular-nums;color:var(--rw-text)}
th,.table-panel th,.step-table th{
  background:var(--rw-head)!important;color:var(--rw-muted)!important;font:600 12px/1.2 var(--rw-ui)!important;letter-spacing:0!important;
  text-transform:none!important;padding:12px 14px!important;border-bottom:1px solid var(--rw-line)!important;white-space:nowrap}
td,.table-panel td,.step-table td{font-size:13.5px!important;padding:7px 14px!important;height:48px;
  border-bottom:1px solid var(--rw-row)!important;color:var(--rw-text)}
.table-panel table,.step-table,.progress-table-wrap table{font-size:13.5px!important}
tbody tr{transition:background .12s}
tbody tr:hover,tbody tr:hover td{background:var(--rw-hover)}
tr.row-critical td{background:var(--t-red-bg)}
tr.row-watch td{background:var(--t-orange-bg)}
tr.row-ok td{background:transparent}
tr.row-critical:hover td{background:var(--t-red-bg2)}
tr.row-watch:hover td{background:var(--t-orange-bg2)}
tr.row-critical td:first-child{box-shadow:inset 3px 0 0 var(--rw-bad)}
tr.row-watch td:first-child{box-shadow:inset 3px 0 0 var(--rw-warn)}
tr.row-ok td:first-child{box-shadow:inset 3px 0 0 var(--rw-ok)}
.bom-table tbody tr,.bom-table tbody tr td{background:transparent!important}
.bom-table tbody tr:hover td{background:var(--rw-hover)!important}
.bom-table{min-width:1320px!important}
.bom-table th,.bom-table td,#inventory td,#inventory th,#supply td,#supply th,#team td,#team th{padding-left:9px!important;padding-right:9px!important}
td .field{height:34px;padding:0 9px;font-size:13px!important;border-radius:8px}
td select.field{padding-right:24px;min-width:76px}
.partno,.partno-field{font-size:12px!important;font-weight:500;color:var(--rw-primary-text)!important}
.item b,.name-field{font-size:13.5px!important;font-weight:500;color:var(--rw-text)}
.name-field,.partno-field{background:transparent;border-color:transparent}
.name-field:hover,.partno-field:hover{border-color:var(--rw-line)}
.item small,.table-sub,.auto-lot,.cell-hint{font-size:11.5px!important;color:var(--rw-muted)!important}
.node{width:28px;height:28px;border-radius:9px;background:var(--rw-primary-bg)}
.node svg{width:15px;height:15px;color:var(--rw-primary-text)}
.node.raw{background:var(--rw-s3)}.node.raw svg{color:var(--rw-text-2)}
.node.comp{background:var(--rw-warn-bg)}.node.comp svg{color:var(--rw-warn-text)}
.twist{color:var(--rw-primary-text)}
.empty-row td,.empty-cell,.empty-state{font-size:14px;color:var(--rw-muted)}
.table-add{font:600 13.5px/1 var(--rw-ui);color:var(--rw-primary-text)!important;background:var(--rw-sunk)!important}
.table-add button{border-radius:9px;border:1px solid var(--rw-line);background:var(--rw-s1);color:var(--rw-primary-text)}
.table-add:hover button{background:var(--rw-primary);color:#fff;border-color:var(--rw-primary)}
.add-row{background:var(--rw-sunk)}

/* =====================================================================
   OTHER VIEWS
   ===================================================================== */
.drawer h2{font-size:20px!important}
.drawer-empty{color:var(--rw-muted);font-size:14px}
.drawer-empty svg{color:var(--rw-faint)}
.drawer-stat{background:var(--rw-sunk)!important;border:1px solid var(--rw-line);border-radius:12px;padding:12px}
.drawer-stat small{font-size:12px;color:var(--rw-muted)}
.drawer-stat b{font:700 20px/1.1 var(--rw-ui);color:var(--rw-text)}
.mini-chart{border-bottom-color:var(--rw-line)}
.mini-col i{background:var(--rw-primary)!important;border-radius:6px 6px 0 0}
.mini-col:nth-child(2) i{background:var(--rw-warn)!important}
.mini-col:nth-child(3) i{background:var(--rw-ok)!important}
.mini-col span{font:600 12px/1 var(--rw-mono);color:var(--rw-text)}
.mini-col small{font-size:11px;color:var(--rw-muted)}
.impact-num{color:var(--rw-bad-text);font-weight:700}

.metric-ribbon,.oee-ribbon,.cell-summary,.balance,.team-seat-summary,.billing-meta{
  gap:1px!important;background:var(--rw-line)!important;border:1px solid var(--rw-line)!important;border-radius:14px;overflow:hidden}
.metric-ribbon{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important}
.metric-ribbon>div,.oee-ribbon>div,.cell-summary>div,.balance>div,.team-seat-stat,.billing-meta div{
  background:var(--rw-s1)!important;border:0!important;border-radius:0!important;padding:14px 16px!important;color:var(--rw-text)}
.metric-ribbon small,.oee-ribbon small,.cell-summary small,.balance small,.team-seat-stat small,.billing-meta small,
.account-facts small,.support-context small,.takt-callout small,.takt-inline small,.cell-picker label,.basis-grid label{
  text-transform:none!important;letter-spacing:0!important;font:500 12.5px/1.3 var(--rw-ui)!important;color:var(--rw-muted)!important}
.metric-ribbon b,.oee-ribbon b,.cell-summary b,.balance b,.team-seat-stat b,.billing-meta b{
  font:700 22px/1.15 var(--rw-ui)!important;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--rw-text)!important;letter-spacing:-.03em}
.oee-main{background:var(--rw-primary-bg)!important}
.oee-main b{color:var(--rw-primary-text)!important;font-size:27px!important}
.metric-ribbon em,.oee-ribbon em{font-size:11.5px;color:var(--rw-muted)}
.metric-ribbon .metric-input{font:600 18px/1 var(--rw-mono)!important;height:34px;width:86px}
.takt-callout,.takt-inline{background:var(--rw-primary-bg)!important;border-color:var(--rw-primary-line)!important;border-radius:12px}
.takt-callout b,.takt-inline b{font:700 20px/1.1 var(--rw-ui);color:var(--rw-primary-text)!important}

.workspace-tabs{gap:4px;border-bottom:1px solid var(--rw-line);margin:4px 0 16px}
.workspace-tabs button{font:600 13.5px/1 var(--rw-ui);padding:11px 14px;color:var(--rw-muted);border-bottom:2px solid transparent;background:none}
.workspace-tabs button:hover{color:var(--rw-text)}
.workspace-tabs button.on{color:var(--rw-primary-text);border-color:var(--rw-primary)}
.register-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--rw-s3);border:0;border-radius:11px}
.register-tabs button{border:0!important;background:transparent!important;border-radius:8px;color:var(--rw-muted)!important;height:29px!important;min-height:29px!important}
.register-tabs button.on{background:var(--rw-s1)!important;color:var(--rw-text)!important;box-shadow:var(--rw-shadow-sm)}

.register-row,.register-row-compact,.system-row,.downtime-row,.weekly-output-row{font-size:13px!important;padding-top:11px;padding-bottom:11px;color:var(--rw-text)}
.register-row-compact{grid-template-columns:100px minmax(160px,1.6fr) minmax(140px,1fr) minmax(150px,1fr) 34px 96px}
.register-row strong,.system-row strong{font-size:13.5px!important;color:var(--rw-text)}
.register-row small,.system-row small,.weekly-output-row small{font-size:12px!important;color:var(--rw-muted)!important}
.register-list,.downtime-rows{border-color:var(--rw-line)!important;border-radius:14px}
.flow-row{font-size:13px}
.flow-row.head,.op-gantt .gh,.heat-row.heat-head,.gantt-grid-head{
  text-transform:none!important;letter-spacing:0!important;font:600 12px/1.2 var(--rw-ui)!important;
  background:var(--rw-head)!important;color:var(--rw-muted)!important}
.gantt-grid-head>span:nth-child(-n+6){background:var(--rw-head)!important}
.gantt-grid-row>.gcell:nth-child(-n+6){background:var(--rw-s1)}
.flow-progress,.progress,.alloc-bar{height:7px!important;background:var(--rw-track)!important;border-radius:4px}
.progress i,.flow-progress i{background:var(--rw-ok)!important;border-radius:4px}
.cell-card,.road-card{border-left-width:3px!important;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.cell-card{border-left-color:var(--rw-ok)!important}
.cell-card.watch{border-left-color:var(--rw-warn)!important;background:var(--rw-s1)!important}
.cell-card.critical{border-left-color:var(--rw-bad)!important;background:var(--rw-s1)!important}
.cell-card:hover{transform:translateY(-2px);box-shadow:var(--rw-shadow)!important}
.cell-card h3,.road-card h3{font-size:15.5px}
.cell-card .owner,.road-card p{font-size:12.5px;color:var(--rw-muted)}
.cell-health-row{grid-template-columns:minmax(0,1fr) 96px 52px auto;padding:11px 12px;border-radius:11px;border-color:var(--rw-row)}
.cell-health-row:hover{background:var(--rw-s2)!important;border-color:var(--rw-line-2)!important}
.cell-health-row strong{font-size:13px;color:var(--rw-text)}
.cell-health-row small,.unit-flow-row small{font-size:11.5px;color:var(--rw-muted)}
.overview-kpis span{font-size:12px;padding:7px 10px;border-radius:9px;background:var(--rw-sunk)!important;color:var(--rw-muted)}
.overview-kpis b{font-size:14.5px;color:var(--rw-text)}
.heat-cell{font:600 11.5px/1 var(--rw-mono);border-radius:6px;padding:8px 2px}
.heat-cell.empty{background:var(--rw-sunk)!important;color:var(--rw-faint)!important}
.heat-cell.h1,.heat-legend .h1{background:var(--t-red-bg2)!important;color:var(--t-red-text)!important}
.heat-cell.h2,.heat-legend .h2{background:var(--t-orange-bg2)!important;color:var(--t-orange-text)!important}
.heat-cell.h3,.heat-legend .h3{background:var(--t-amber-bg2)!important;color:var(--t-amber-text)!important}
.heat-cell.h4,.heat-legend .h4{background:var(--t-green-bg)!important;color:var(--t-green-text)!important}
.heat-cell.h5,.heat-legend .h5{background:var(--t-green-bg2)!important;color:var(--t-green-text)!important}
.heat-row>div:first-child{font-size:12.5px;color:var(--rw-text)}
.heat-legend,.chart-legend,.multi-legend,.legend,.gantt-legend{font-size:12px!important;color:var(--rw-muted)!important}
svg text[fill="#6d7680"]{fill:var(--rw-muted)}
svg [fill="#27466d"]{fill:var(--rw-text)}
svg line[stroke="#e3e7eb"],svg line[stroke="#e2e6ea"]{stroke:var(--rw-row)}
svg [fill="#e5ecf2"]{fill:var(--rw-track)}
.trend-panel svg text,.overview-card svg text{fill:var(--rw-muted)}
.workcell-card,.process-card{background:var(--rw-s1)!important;border-radius:14px;border-color:var(--rw-line)!important;color:var(--rw-text);
  transition:transform .15s,box-shadow .15s}
.workcell-card:hover,.process-card:hover{transform:translateY(-2px);box-shadow:var(--rw-shadow)!important}
.workcell-card{flex-basis:230px;padding:14px}
.workcell-card h3{font-size:14.5px;margin-top:10px}
.workcell-card p,.process-card p{font-size:12px;color:var(--rw-muted)}
.workcell-card .cell-number,.process-number{font:700 12px/1 var(--rw-mono);border-radius:8px}
.process-card h4{font:600 13.5px/1.3 var(--rw-ui);color:var(--rw-text)}
.deck-arrow{border-radius:10px;background:var(--rw-s1);border-color:var(--rw-line);color:var(--rw-primary-text)}
.operator-card{background:var(--rw-s1)!important;border-radius:14px;padding:14px;color:var(--rw-text)}
.operator-card strong{font-size:14.5px}
.operator-card .assignment{font-size:12.5px;border-radius:9px;background:var(--rw-ok-bg);color:var(--rw-ok-text)}
.shift-callout,.standard-note{font-size:12.5px;border-radius:13px;background:var(--rw-sunk)!important;border-color:var(--rw-line)!important;color:var(--rw-text-2)}
.shift-callout b{font-size:14.5px;color:var(--rw-text)}
.crew-suggest{font-size:11.5px;border-radius:8px;background:var(--rw-primary-bg);color:var(--rw-primary-text);border-color:var(--rw-primary-line)}
.shift-tag,.dt-reason{font-size:11.5px;border-radius:7px;padding:4px 9px}
.gantt-task{font:600 11px/1 var(--rw-ui);border-radius:6px}
.gantt-now{background:var(--rw-primary)!important}
.time-track{background-image:linear-gradient(to right,var(--rw-row) 1px,transparent 1px)!important}
.flag-card h4{font-size:14px;color:var(--rw-text)}
.flag-card p,.flag-card .flag-meta{font-size:12px;color:var(--rw-muted)}
.seat-plan{background:var(--rw-s1)!important;border-color:var(--rw-line)!important;color:var(--rw-text);border-radius:13px}
.seat-plan.on{border-color:var(--rw-primary)!important;box-shadow:0 0 0 3px var(--rw-primary-bg)!important}
/* The plan picked for checkout, as opposed to the one in force. This needs
   !important only because .seat-plan above claims border-color and
   background with it, which is what made the choice invisible. */
.seat-plan.preview:not(.on){border-color:var(--rw-primary)!important;border-style:dashed!important;background:var(--rw-primary-bg)!important;box-shadow:0 0 0 2px var(--rw-primary-bg)!important}
.seat-plan:hover:not(.on):not(.preview){border-color:var(--rw-line-2,var(--rw-primary))!important}
.seat-plan b{font-size:14px}.seat-plan span{font-size:12px;color:var(--rw-muted)}
.usage-row small{font-size:12.5px;color:var(--rw-text-2)}
.usage-row .bar{background:var(--rw-track);border-radius:4px}
.usage-row .bar i{background:var(--rw-primary);border-radius:4px}
.billing-plan .billing-price strong{font:700 40px/1 var(--rw-ui);color:var(--rw-text);letter-spacing:-.04em}
.doc-link,.document-type{font-size:13.5px!important}
.doc-link{color:var(--rw-primary-text)}

.gantt-panel{padding:0!important;overflow:hidden!important}
.gantt-legend{font-size:12.5px;padding:12px 16px;background:var(--rw-s1)!important;border-bottom-color:var(--rw-line)}
.gantt-grid-row{font-size:12.5px;border-bottom-color:var(--rw-row);color:var(--rw-text)}
.gantt-grid-row:hover{background:var(--rw-hover)}
.gcell.task b{font-size:12.5px;color:var(--rw-text)}
.gcell.task small{font-size:11px;color:var(--rw-muted)}
.gantt-category{font:600 12px/1 var(--rw-ui);letter-spacing:0;background:var(--rw-sunk)!important;color:var(--rw-text-2)!important;border-bottom-color:var(--rw-line)}
.timeline-head span{font:500 10px/1 var(--rw-mono);border-right-color:var(--rw-row);color:var(--rw-muted)}
.timeline-head span.weekend{background:var(--rw-sunk)}
.timeline-head small{font:600 11px/1 var(--rw-ui);color:var(--rw-text)}
.timeline-row{background:repeating-linear-gradient(to right,transparent 0,transparent 25px,var(--rw-row) 25px,var(--rw-row) 26px)!important}
.schedule-bar{font:600 11px/1 var(--rw-ui);border-radius:5px;background:var(--rw-ok);color:#fff}
.schedule-bar.watch{background:var(--rw-warn);color:#fff}
.schedule-bar.critical{background:var(--rw-bad);color:#fff}
.gantt-legend .ready{background:var(--rw-ok)}
.receipt-marker,.receipt-marker:after{background:var(--rw-primary)}
.receipt-chip{font-size:12px;border-radius:9px;background:var(--rw-primary-bg);border-color:var(--rw-primary-line);color:var(--rw-primary-text)}
.gantt-top-scroll{background:var(--rw-sunk);border-bottom-color:var(--rw-line)}

/* =====================================================================
   OVERLAYS
   ===================================================================== */
.bell-panel,.account-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:326px;padding:8px;z-index:70;display:none;
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:16px;box-shadow:var(--rw-shadow-pop)}
.bell-panel.on,.account-panel.on{display:block;animation:rwPop .16s cubic-bezier(.2,.8,.2,1)}
.rw-side-foot .account-panel{top:auto;bottom:calc(100% + 10px);right:auto;left:0;width:286px;max-height:min(470px,70vh);overflow-y:auto}
.bell-head{font:700 14px/1 var(--rw-ui);color:var(--rw-text);padding:10px 10px 12px;text-transform:none;letter-spacing:0}
.bell-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border-radius:11px;color:var(--rw-text)}
.bell-row:hover{background:var(--rw-s2)}
.bell-row b{font:600 13px/1.3 var(--rw-ui);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rw-text)}
.bell-row small{font-size:12px;color:var(--rw-muted);display:block}
.bell-row>span:first-child{min-width:0;flex:1}
.bell-empty{font-size:13px;color:var(--rw-muted);text-align:center;padding:22px 8px}
.bell-panel>.btn{width:100%;justify-content:center;margin-top:6px}
.account-panel-head{padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--rw-line)}
.account-panel-head b{display:block;font:700 14.5px/1.3 var(--rw-ui);color:var(--rw-text)}
.account-panel-head small{font-size:12px;color:var(--rw-muted)}
.account-panel button,.account-panel .account-menu-link{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px!important;border:0;border-radius:10px;background:transparent;
  font:500 13.5px/1 var(--rw-ui)!important;color:var(--rw-text)!important;text-decoration:none;text-align:left;cursor:pointer}
.account-panel button:hover,.account-panel .account-menu-link:hover{background:var(--rw-s2)!important}
.account-panel svg{width:17px;height:17px;color:var(--rw-muted);flex:0 0 auto}
.account-panel .account-switch,.account-panel .account-signout{border-top:1px solid var(--rw-line);border-radius:0 0 10px 10px;margin-top:4px;padding-top:12px!important}
.account-panel .account-signout{color:var(--rw-bad-text)!important}
.menu-external{margin-left:auto;color:var(--rw-muted)}

.modalback,.form-sheet{background:var(--rw-scrim)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:100!important}
.modal,.sheet-card{background:var(--rw-s1)!important;border:1px solid var(--rw-line);border-radius:22px;padding:28px;
  box-shadow:var(--rw-shadow-pop)!important;color:var(--rw-text)}
.modalback.on .modal,.form-sheet.on .sheet-card{animation:rwModal .2s cubic-bezier(.2,.8,.2,1)}
@keyframes rwModal{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal h2,.sheet-card h2{font:700 22px/1.2 var(--rw-ui)!important;margin:0 0 8px;color:var(--rw-text);letter-spacing:-.03em}
.modal p,.modal .desc,.sheet-card p{font-size:14px;line-height:1.55;color:var(--rw-text-2)!important}
.modal .desc{margin:0 0 20px}
.form{gap:16px}
.form label,.sheet-card label,.account-form label,.support-form-grid label,.modal label{
  font:500 12.5px/1.3 var(--rw-ui)!important;color:var(--rw-text-2)!important}
.form input,.form select{margin-top:6px;padding:0 11px}
.modal-actions,.sheet-actions{gap:10px;margin-top:24px}
.modal-error{background:var(--rw-bad-bg)!important;border-color:var(--t-red-line)!important;color:var(--rw-bad-text)!important;font-size:13px;border-radius:12px}
.warn-list{background:var(--rw-warn-bg)!important;border-color:var(--t-amber-line)!important;color:var(--rw-warn-text)!important;font-size:13px;border-radius:12px}
.onb-grid{gap:12px}
.onb-card{background:var(--rw-sunk)!important;border:1px solid var(--rw-line)!important;border-radius:16px;padding:20px;cursor:pointer;
  color:var(--rw-text)!important;transition:border-color .15s,transform .15s,box-shadow .15s}
.onb-card:hover{border-color:var(--rw-primary-line)!important;transform:translateY(-2px);box-shadow:var(--rw-shadow)}
.onb-card svg{width:26px;height:26px;color:var(--rw-primary)}
.onb-card b{font:700 15px/1.3 var(--rw-ui);color:var(--rw-text)}
.onb-card span{font-size:13px;line-height:1.5;color:var(--rw-muted)!important}
.help-body h3{font:700 16px/1.3 var(--rw-ui)!important;margin-top:24px;color:var(--rw-text)}
.help-body p,.help-body dd,.help-body li{font-size:14px;line-height:1.65;color:var(--rw-text-2)!important}
.help-body dt,.help-body b,.help-body strong{color:var(--rw-text)!important}
.workspace-setup-note,.sheet-status{font-size:13px;background:var(--rw-sunk)!important;border-color:var(--rw-line)!important;
  color:var(--rw-text-2)!important;border-radius:12px}
.toast{position:fixed;right:24px;bottom:24px;z-index:120;display:none;align-items:center;gap:11px;max-width:400px;
  padding:14px 18px 14px 16px;background:var(--rw-pop)!important;color:var(--rw-pop-text)!important;border:0;
  border-radius:14px;font:500 13.5px/1.4 var(--rw-ui);box-shadow:var(--rw-shadow-pop)}
.toast.on{display:flex;animation:rwToast .22s cubic-bezier(.2,.8,.2,1)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rw-ok);flex:0 0 auto}
@keyframes rwToast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#runwayBootError{background:var(--rw-bad-bg)!important;color:var(--rw-bad-text)!important;border-color:var(--t-red-line)!important}

.account-facts>div,.support-context div{background:var(--rw-sunk)!important;border-color:var(--rw-line)!important;border-radius:12px;color:var(--rw-text)}
.account-facts b,.support-context b{font-size:14.5px;color:var(--rw-text)}
.account-inline-note,.account-muted,.support-guide-card p,.support-file-note,.support-checklist span{font-size:13px!important;color:var(--rw-text-2)!important}
.support-guide-card,.support-form-panel,.support-success-panel{background:var(--rw-s1)!important;border-color:var(--rw-line)!important;
  border-radius:16px;box-shadow:var(--rw-shadow-sm)!important;color:var(--rw-text)}
.support-guide-card h3,.support-form-head h3{font:700 16px/1.3 var(--rw-ui)!important;color:var(--rw-text)}
.support-form-head p{font-size:13.5px;color:var(--rw-text-2)}
.support-checklist i{background:var(--rw-primary);color:#fff;width:22px;height:22px;flex-basis:22px;font:700 12px/1 var(--rw-mono)}
.support-success-icon{background:var(--rw-ok-bg);color:var(--rw-ok-text)}
.support-ticket{background:var(--rw-sunk)!important;border-color:var(--rw-line)!important;color:var(--rw-primary-text)}

/* start-up check */
html:not(.rw-ready) .rw-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--rw-primary),transparent);background-size:40% 100%;background-repeat:no-repeat;
  animation:rwScan 1.1s linear infinite}
.rw-top{position:relative}
@keyframes rwScan{from{background-position:-40% 0}to{background-position:140% 0}}
#rwBootWatch{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:200;width:min(560px,calc(100vw - 32px));padding:18px 20px;
  background:var(--rw-s1);color:var(--rw-text);border:1px solid var(--rw-line);border-left:4px solid var(--rw-warn);
  border-radius:16px;box-shadow:var(--rw-shadow-pop);font:400 14px/1.5 var(--rw-ui)}
#rwBootWatch b{display:block;font:700 17px/1.3 var(--rw-ui);margin-bottom:4px}
#rwBootWatch p{margin:0 0 8px;color:var(--rw-text-2)}
#rwBootWatch ul{margin:0 0 12px;padding-left:18px;color:var(--rw-text-2)}
#rwBootWatch code{font:500 12.5px/1 var(--rw-mono);color:var(--rw-bad-text)}
#rwBootWatch button{height:36px;padding:0 14px;border-radius:10px;border:0;background:var(--rw-primary);color:#fff;
  font:600 13.5px/1 var(--rw-ui);cursor:pointer}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1500px){
  .app.rw-app{grid-template-columns:240px minmax(0,1fr)}
  .rw-gauge{grid-column:1/span 4;grid-row:2}
  .rw-outlook{grid-column:5/-1;grid-row:2}
  .rw-risks{grid-column:1/span 5;grid-row:3}
  .rw-targets{grid-column:6/-1;grid-row:3}
  .rw-cells{grid-column:1/-1;grid-row:4}
  .rw-dash{grid-template-rows:auto minmax(300px,1fr) minmax(280px,1fr) minmax(150px,auto)}
  .rw-cells .cell-glance{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important}
  #dashboard.view.on{overflow:auto}
}
@media(max-width:1280px){
  .app.rw-app{grid-template-columns:216px minmax(0,1fr)}
  .main-in{padding:0 18px 16px!important}
  .rw-crumb .company-name{max-width:130px}
  .save-state span{display:none}
  .rw-risks{grid-column:1/-1;grid-row:2}
  .rw-outlook{grid-column:1/-1;grid-row:3}
  .rw-gauge{grid-column:1/span 5;grid-row:4}
  .rw-targets{grid-column:6/-1;grid-row:4}
  .rw-cells{grid-column:1/-1;grid-row:5}
  .rw-dash{grid-template-rows:auto minmax(240px,auto) minmax(300px,auto) minmax(300px,auto) minmax(220px,auto)}
  #attention .attention-layout{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:1024px){
  .app.rw-app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .side.rw-side{flex-direction:row;align-items:center;gap:12px;height:auto;padding:10px 14px;border-right:0;border-bottom:1px solid var(--rw-side-line)}
  .rw-brand{padding:0}
  .rw-side-scroll{overflow-x:auto;overflow-y:hidden;padding:0}
  .nav.rw-nav{flex-direction:row;gap:4px}
  .rw-nav>button,.rw-nav .nav-group button{min-width:max-content}
  .rw-side-label,.nav-group,.rw-side-foot .rw-side-label,.rw-road,.side-tools{display:none!important}
  .rw-side-foot{border-top:0;padding:0;margin-left:auto!important}
  .rw-side-foot .account-panel{bottom:auto;top:calc(100% + 10px);left:auto;right:0}
  #attention .attention-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
}
@media(max-height:820px){
  #dashboard.view.on{overflow:auto}
  .rw-dash{grid-template-rows:auto minmax(300px,1fr) minmax(280px,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   CONTRAST FIXES — elements the app fills with its own colours
   ===================================================================== */
/* timeline bars carry white labels, so the fill has to be dark enough for them */
.schedule-bar{background:#0f9d76;color:#fff}
.schedule-bar.watch{background:#9a5f03;color:#fff}
.schedule-bar.critical{background:#c22b45;color:#fff}
[data-theme="night"] .schedule-bar{background:#12855f}
[data-theme="night"] .schedule-bar.watch{background:#8a5503}
[data-theme="night"] .schedule-bar.critical{background:#b3253c}
/* cell / process chips are tinted from inline colours the app assigns per cell;
   darken them so the white numbering on top stays readable */
/* the app assigns each cell/process its own identifying colour; keep the hue but
   deepen the fill so the white numbering on top stays legible */
.workcell-card .cell-number{background-color:color-mix(in srgb,var(--cell-color) 66%,#000)!important;color:#fff!important}
.process-number{background-color:color-mix(in srgb,var(--process-color) 66%,#000)!important;color:#fff!important}
.gantt-task{background-image:linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.36))!important;color:#fff!important}

/* =====================================================================
   v33 — CHANGES FROM REVIEW
   ===================================================================== */

/* --- 1 · white canvas ------------------------------------------------
   With the backdrop white, a card can no longer rely on the page behind it
   for separation, so every surface states its own edge. */
.panel,.dashboard-card,.table-panel,.plan-table-panel,.chart-card{
  border:1px solid var(--rw-line)!important}
[data-theme="night"] .panel,[data-theme="night"] .dashboard-card,
[data-theme="night"] .table-panel,[data-theme="night"] .plan-table-panel{
  border-color:var(--rw-line)!important}

/* --- 3 · coverage carries its own number -----------------------------
   The status word repeated what the row colour already says, so coverage
   took its place and now shows the figure the row was missing. */
.cover-cell{display:flex;align-items:center;gap:10px;min-width:0}
.cover-cell .mini-bar{flex:1 1 auto;min-width:54px}
.cover-cell b{flex:0 0 auto;font:600 12.5px/1 var(--rw-ui);color:var(--rw-text-2);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.mini-bar.ok>i{background:var(--rw-ok)!important}
.mini-bar.watch>i{background:var(--rw-warn)!important}
.mini-bar.critical>i{background:var(--rw-bad)!important}
.row-critical .cover-cell b{color:var(--rw-bad-text)}
.row-watch .cover-cell b{color:var(--rw-warn-text)}

/* --- 3 · add-row reads as an action, not a table row ------------------ */
tr.add-row>td{padding:0!important;background:transparent!important}
.rw-add-inline{display:block;width:100%;padding:11px 14px;border:0;background:transparent;
  color:var(--rw-primary-text);font:600 13px/1 var(--rw-ui);text-align:center;cursor:pointer;
  border-top:1px solid var(--rw-line);transition:background .15s}
.rw-add-inline:hover{background:var(--rw-primary-bg)}

/* --- 10 · timeline drops its status column ---------------------------
   Five sticky columns instead of six; the width the status column held
   goes back to the task name, which was the column being truncated. */
.gantt-grid-head,.gantt-grid-row{grid-template-columns:42px 268px 96px 92px 92px var(--timeline-width)!important}
.gantt-grid-head>span:nth-child(-n+6),.gantt-grid-row>.gcell:nth-child(-n+6){position:static;background:transparent}
.gantt-grid-head>span:nth-child(-n+5),.gantt-grid-row>.gcell:nth-child(-n+5){position:sticky;background:var(--rw-s1);z-index:3}
.gantt-grid-head>span:nth-child(-n+5){background:var(--rw-s2);z-index:8}
.gantt-grid-head>span:nth-child(1),.gantt-grid-row>.gcell:nth-child(1){left:0}
.gantt-grid-head>span:nth-child(2),.gantt-grid-row>.gcell:nth-child(2){left:42px}
.gantt-grid-head>span:nth-child(3),.gantt-grid-row>.gcell:nth-child(3){left:310px}
.gantt-grid-head>span:nth-child(4),.gantt-grid-row>.gcell:nth-child(4){left:406px}
.gantt-grid-head>span:nth-child(5),.gantt-grid-row>.gcell:nth-child(5){left:498px;box-shadow:5px 0 7px -6px rgba(16,20,48,.28)}
.gantt-grid-head>span:nth-child(6),.gantt-grid-row>.gcell:nth-child(6){box-shadow:none}
[data-theme="night"] .gantt-grid-head>span:nth-child(5),
[data-theme="night"] .gantt-grid-row>.gcell:nth-child(5){box-shadow:5px 0 7px -6px rgba(0,0,0,.6)}

/* the row's state now reads from a left edge, the way the other tables do */
.gantt-grid-row>.gcell:nth-child(1){border-left:3px solid transparent}
.gantt-grid-row.row-critical>.gcell:nth-child(1){border-left-color:var(--rw-bad)}
.gantt-grid-row.row-watch>.gcell:nth-child(1){border-left-color:var(--rw-warn)}
.gantt-grid-row.row-supply>.gcell:nth-child(1){border-left-color:var(--rw-primary)}
.gantt-grid-row.row-critical{background:var(--rw-bad-bg)}
.gantt-grid-row.row-critical>.gcell:nth-child(-n+5){background:var(--rw-bad-bg)}
.gantt-grid-row.row-watch>.gcell:nth-child(-n+5){background:var(--rw-warn-bg)}

/* --- 4 · needs-attention moved into the bell ------------------------- */
.bell-head-2{margin-top:6px;border-top:1px solid var(--rw-line);padding-top:12px!important}
.bell-panel .rw-road{display:grid;gap:2px;margin-bottom:4px}

/* --- 3 · blocking materials: the shortage, not the word -------------- */
.risk-card{border-left:3px solid transparent!important}
.risk-card.risk-critical{border-left-color:var(--rw-bad)!important}
.risk-card.risk-watch{border-left-color:var(--rw-warn)!important}
.risk-card.risk-ok{border-left-color:var(--rw-ok)!important}
.risk-gap{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font:700 14px/1 var(--rw-mono);color:var(--rw-bad-text);font-variant-numeric:tabular-nums}
.risk-gap small{font:500 10.5px/1 var(--rw-ui);letter-spacing:.02em;color:var(--rw-muted)}
.risk-card.risk-watch .risk-gap{color:var(--rw-warn-text)}

/* --- 8, 9 · the description line under every heading -----------------
   It cost a row of vertical space on every screen and repeated what the
   help panel says. The wording is collected into "What each screen shows"
   in the ? panel; here the line itself goes, and the space with it. */
.sub{display:none!important}
/* ...but a dialog's subtitle is not a heading description. It is the only
   sentence explaining what the sheet is about to do - what "Resolve flag"
   wants from you, or how many columns an upload matched - and it was being
   swept up by the rule above along with the screen headings. */
#sheetSub.sub{display:block!important;margin:6px 0 0;
  font:400 13px/1.5 var(--rw-ui)!important;color:var(--rw-muted);max-width:62ch}
.panel-head{align-items:center!important}

/* With the eyebrow and duplicate heading already hidden by the shell, most of
   these rows now hold nothing at all yet still reserve their height. A row
   collapses unless it carries a real control. */
.section-title{display:none}
.section-title:has(button,a,select,input,.btn){display:flex}

/* --- 14, 15 · the BOM table fits its panel, and the add row is a footer
   The action column used to be pushed off the right edge because the cells
   grew past their declared widths. Fixed layout honours the header widths,
   and the row that adds an item now sits on a solid footer instead of
   floating see-through over the last row. */
.bom-table{table-layout:fixed;width:100%}
.bom-table th,.bom-table td{overflow:hidden}
.bom-table td .field,.bom-table td select,.bom-table td input{max-width:100%;min-width:0}
.bom-table .item{min-width:0}
.bom-table .name-field{width:100%;min-width:0}

/* The row sits at the end of the table on a solid footer, so it reads as an
   action rather than as a row the pointer happens to be over. It is not
   sticky: floating it over the body puts it on top of the last row's inputs,
   which then cannot be clicked. */
tr.add-row{position:static!important;background:transparent!important}
tr.add-row>td{background:var(--rw-s1)!important;border-top:1px solid var(--rw-line)!important}
.rw-add-inline{border-top:0}

/* Process setup is the exception - the review asked for its add button to
   stay on screen while the step table scrolls. The wrapper carries bottom
   padding so the button never covers the last step. */
#processsetup tr.add-row{position:sticky!important;bottom:0;z-index:4}
#processsetup tr.add-row>td{box-shadow:0 -6px 12px -10px rgba(16,20,48,.35)}
[data-theme="night"] #processsetup tr.add-row>td{box-shadow:0 -6px 12px -10px rgba(0,0,0,.6)}
#processsetup .step-table-wrap{padding-bottom:50px}
/* the old minimum was sized for the parent column, which is gone */
.bom-table{min-width:1100px!important}

/* --- 17, 18, 19 · one On hand cell instead of three unit columns -----
   Quantity and the unit it is counted in sit together on one line. The
   conversion only appears when that unit differs from the one the BOM
   consumes, and it reads as a sentence - "1 reel = 100 m" - instead of a
   bare number with its units printed over the input beside it. */
.onhand-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.onhand-top{display:flex;gap:6px;min-width:0}
.onhand-top .field{min-width:0}
.onhand-top input{flex:1 1 auto}
.onhand-unit{flex:0 0 78px;width:78px}
.onhand-conv{display:flex;align-items:center;gap:5px;min-width:0;
  font:500 11px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
.onhand-conv input{flex:1 1 auto;min-width:0;height:28px!important;padding:0 7px!important;
  font-size:11.5px!important;text-align:right}
.onhand-conv span{flex:0 0 auto}
tr:has(.onhand-conv) td{height:auto!important;max-height:none!important}

/* --- 11 · the week calendar -----------------------------------------
   A week is a row, not an entry in a list of the four weeks that happen
   to hold records. Any month is reachable, and a week that holds records
   carries a dot so history is visible rather than guessed at. */
.wc-wrap{position:relative;display:inline-flex}
.wc-toggle{display:inline-flex!important;align-items:center;gap:9px;height:38px;padding:0 12px!important;
  width:auto!important;cursor:pointer;font:500 13px/1 var(--rw-ui)!important;color:var(--rw-text)!important}
.wc-toggle-k{color:var(--rw-muted);font-weight:500}
.wc-toggle b{font-weight:650}
.wc-toggle svg{width:15px;height:15px;color:var(--rw-muted);flex:0 0 15px}
.wc-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.wc-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:none;
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:14px;
  box-shadow:var(--rw-shadow-pop);padding:12px}
.wc-pop.on{display:block}
.wc{width:266px}
.wc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.wc-head b{font:650 13.5px/1 var(--rw-ui);color:var(--rw-text)}
.wc-nav{width:28px;height:28px;border-radius:8px;border:1px solid var(--rw-line);background:var(--rw-s1);
  color:var(--rw-text-2);cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center}
.wc-nav:hover{background:var(--rw-s2);color:var(--rw-text)}
.wc-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.wc-dow span{text-align:center;font:600 10px/1 var(--rw-ui);color:var(--rw-muted);letter-spacing:.04em}
.wc-grid{display:grid;gap:3px}
.wc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;width:100%;padding:3px 15px 3px 3px;
  border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;position:relative}
.wc-week:hover{background:var(--rw-s2);border-color:var(--rw-line)}
.wc-week.on{background:var(--rw-primary-bg);border-color:var(--rw-primary-line)}
.wc-day{display:grid;place-items:center;height:26px;border-radius:6px;
  font:500 12px/1 var(--rw-ui);color:var(--rw-text-2);font-variant-numeric:tabular-nums}
.wc-day.out{color:var(--rw-line-3)}
.wc-day.today{font-weight:750;color:var(--rw-primary-text);box-shadow:inset 0 0 0 1.5px var(--rw-primary-line)}
.wc-week.on .wc-day{color:var(--rw-primary-text);font-weight:600}
.wc-week.on .wc-day.out{color:var(--rw-primary-line)}
.wc-week.has::after{content:"";position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--rw-ok)}
.wc{width:282px}
.wc-foot{margin:10px 0 0;font:500 11px/1.4 var(--rw-ui);color:var(--rw-muted)}
/* on the right-hand card the calendar opens leftward so it stays on screen */
.wc-pop-right{left:auto;right:0}

/* --- 22 · what you are recording against ---------------------------
   Date and shift used to sit among People and Target units, where they
   read as two more fields to fill rather than the choice everything below
   is filed under. They get their own bar, above the work, in the accent
   so it is the first thing read on the screen. */
.shift-context{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 14px;padding:11px 15px;border-radius:13px;
  background:var(--rw-primary-bg);border:1px solid var(--rw-primary-line)}
.shift-context-k{font:700 11.5px/1 var(--rw-ui);letter-spacing:.07em;text-transform:uppercase;
  color:var(--rw-primary-text)}
.shift-context-f{display:flex;align-items:center;gap:8px;margin:0!important}
.shift-context-f>span{font:600 12.5px/1 var(--rw-ui);color:var(--rw-primary-text)}
.shift-context-f .field{height:36px!important;background:var(--rw-s1)!important;
  border-color:var(--rw-primary-line)!important;font-weight:600!important;min-width:132px}
.shift-context-f select.field{min-width:104px}

/* --- 24 · the work-cell heading had nothing around it ----------------
   It sat on the same line as People, Target units and the buttons with no
   separation, so the cell you are looking at read as another label in the
   row. It gets its own line and the figures sit under it. */
.supervisor-head{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px 18px!important;
  margin-bottom:16px!important}
.supervisor-head>div:first-child{flex:1 1 220px;min-width:0}
.supervisor-head h2{margin:0 0 2px!important;font:750 18px/1.25 var(--rw-ui)!important;
  letter-spacing:-.02em;color:var(--rw-text)!important}
.supervisor-head .ops-toolbar{flex:0 1 auto;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.supervisor-head .ops-toolbar label{display:flex;align-items:center;gap:7px;margin:0!important;
  font:500 12.5px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
.supervisor-head .ops-toolbar .field{height:36px!important;min-width:76px}

/* --- 23 · the table ran off the white card --------------------------
   The scroll container stretched the card to the height of the viewport
   while its content was taller, and because the card does not clip, the
   rows below that point were painted straight onto the page background -
   the table visibly leaving its deck. The card now sizes to its content
   and the container scrolls, so the white always reaches the last row. */
#shift.view.on .workspace-grid,#stations.view.on>:last-child,
#processsetup.view.on>:last-child,#roadblocks.view.on>:last-child{align-content:start}
#shift.view.on .workspace-grid>.panel,#shift.view.on>:last-child>.panel,
#stations.view.on>:last-child>.panel,#processsetup.view.on>:last-child>.panel,
#roadblocks.view.on>:last-child>.panel{
  height:auto!important;min-height:0;align-self:start}

/* --- 24 · the work-cell heading had no room around it ---------------
   With its description line gone the heading sat hard against the cell
   deck above and the owner row below. It gets space on both sides. */
#processsetup .panel-head{margin:18px 0 14px!important}
#processsetup .panel-head h2{margin:0!important;font:750 18px/1.25 var(--rw-ui)!important;
  letter-spacing:-.02em}
#processsetup .ops-toolbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:16px}
#processsetup .ops-toolbar label{display:flex;align-items:center;gap:7px;margin:0!important;
  font:500 12.5px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
/* the product a record is filed against, stated where it is entered (2, 22) */
.shift-context-p{font:700 13.5px/1 var(--rw-ui);color:var(--rw-text);padding-right:4px}

/* the timeline's sub-line on a tinted row needs its own ink at night */
[data-theme="night"] .gantt-grid-row.row-critical .gcell.task small{color:#ffb3c0}
[data-theme="night"] .gantt-grid-row.row-watch .gcell.task small{color:#ffd79a}

/* =====================================================================
   v34 — SECOND REVIEW
   ===================================================================== */

/* --- 5 · the edge carries the state, not the whole row ---------------
   A tinted row turns a table into a block of colour and makes the text on
   it harder to read. Every table now says the same thing the same way: a
   coloured left edge, and a white row. */
.row-critical,.row-watch,.row-ok,
tr.row-critical>td,tr.row-watch>td,tr.row-ok>td,
.gantt-grid-row.row-critical,.gantt-grid-row.row-watch{background:transparent!important}
/* The timeline's first five columns are sticky over a scrolling chart, so
   they must stay opaque. Dropping the row tint made them see-through and the
   schedule bars slid underneath the task names. They keep the surface colour
   and only the edge carries the state. */
.gantt-grid-row>.gcell:nth-child(-n+5){background:var(--rw-s1)!important}
.gantt-grid-row:hover>.gcell:nth-child(-n+5){background:var(--rw-hover)!important}
.gantt-grid-head>span:nth-child(-n+5){background:var(--rw-head)!important}
tr.row-critical>td:first-child,tr.row-watch>td:first-child,tr.row-ok>td:first-child{
  box-shadow:inset 3px 0 0 0 transparent}
tr.row-critical>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-bad)}
tr.row-watch>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-warn)}
tr.row-ok>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-ok)}
tr.row-critical:hover>td,tr.row-watch:hover>td,tr.row-ok:hover>td{background:var(--rw-hover)!important}

/* --- 4 · how a part arrives, as a tag on its node ------------------- */
.src-tag{flex:0 0 auto;display:inline-grid;place-items:center;min-width:34px;height:17px;padding:0 5px;
  border-radius:5px;font:700 9px/1 var(--rw-ui);letter-spacing:.05em;margin-left:-2px}
.src-buy{background:var(--rw-primary-bg);color:var(--rw-primary-text)}
.src-inhouse{background:var(--rw-ok-bg);color:var(--rw-ok-text)}
.src-finished{background:var(--rw-warn-bg);color:var(--rw-warn-text)}
.src-purchased{background:var(--rw-primary-bg);color:var(--rw-primary-text)}

/* a part used in more than one place says how many, and opens the list */
.uses-chip{flex:0 0 auto;height:21px;padding:0 7px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rw-line-2);background:var(--rw-s2);color:var(--rw-text-2);
  font:700 10.5px/1 var(--rw-mono)}
.uses-chip:hover{border-color:var(--rw-primary);color:var(--rw-primary-text);background:var(--rw-primary-bg)}

/* --- 17-20 · one line per part in the register ---------------------- */
.qty-unit{display:flex;align-items:center;gap:8px;min-width:0}
.qty-unit input{flex:1 1 auto;min-width:0}
.qty-unit em{flex:0 0 auto;font:500 11.5px/1 var(--rw-ui);font-style:normal;color:var(--rw-muted);
  white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.qty-unit em b{font:700 10.5px/1 var(--rw-mono);color:var(--rw-primary-text);margin-left:3px}

/* the read-only panel the "used in" chip opens */
.uses-table{margin:0 0 4px;max-height:280px;overflow:auto}
.uses-table table{min-width:0!important;width:100%}
.uses-table th,.uses-table td{padding:9px 12px!important;font-size:12.5px!important}

/* --- 3 · the two dates lead time makes answerable ------------------- */
.lead-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.lead-cell b{font:650 12.5px/1.2 var(--rw-ui);color:var(--rw-text)}
.lead-cell small{font:500 11px/1.2 var(--rw-ui);color:var(--rw-muted)}
.lead-cell.late b{color:var(--rw-bad-text)}
.lead-cell.late small{color:var(--rw-bad-text);opacity:.85}
.muted-cell{color:var(--rw-muted);font:500 12px/1 var(--rw-ui)}

/* the shortage rank: a number, with the state in its colour */
.rank{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  font:700 12.5px/1 var(--rw-mono);font-variant-numeric:tabular-nums}
.rank.critical{background:var(--rw-bad-bg);color:var(--rw-bad-text)}
.rank.watch{background:var(--rw-warn-bg);color:var(--rw-warn-text)}
.rank.ok{background:var(--rw-ok-bg);color:var(--rw-ok-text)}
/* the shortage table fits its column; the drawer keeps the rest */
#attention .attention-table table{min-width:0!important;table-layout:fixed;width:100%}
#attention .attention-table th,#attention .attention-table td{overflow:hidden}
#attention .risk-title b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#attention .risk-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--rw-muted);font:500 11.5px/1.3 var(--rw-ui)}

/* --- 8 · build plan in two columns ---------------------------------
   The plan you set on the left, what it produces on the right. */
.plan-view.on{display:grid!important;grid-template-columns:352px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;gap:16px!important;align-items:stretch}
.plan-left{min-width:0;min-height:0;display:flex;flex-direction:column}
.plan-right{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(190px,44%) minmax(0,1fr);gap:16px}
.plan-left>.plan-basis{flex:1 1 auto;min-height:0;overflow:auto}
.plan-view .basis-grid{grid-template-columns:1fr!important;gap:12px!important}
.plan-view .basis-grid label{display:flex!important;flex-direction:column;gap:6px;
  font:500 12.5px/1 var(--rw-ui);color:var(--rw-muted)}
.takt-block{display:flex;flex-direction:column;gap:3px;margin:0 0 16px;padding:13px 15px;
  border-radius:13px;background:var(--rw-primary-bg);border:1px solid var(--rw-primary-line)}
.takt-block small{font:600 11px/1 var(--rw-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--rw-primary-text)}
.takt-block b{font:750 21px/1.1 var(--rw-ui);letter-spacing:-.02em;color:var(--rw-text)}
.takt-block span{font:500 11.5px/1.4 var(--rw-ui);color:var(--rw-muted)}
.plan-add-inline{width:100%;margin-top:16px;justify-content:center}
.plan-view .plan-table-panel{min-height:0;overflow:auto!important;max-height:none!important}
.plan-view .plan-chart-panel{min-height:0;display:flex;flex-direction:column}
.plan-view .plan-chart-panel .chart{flex:1 1 auto;min-height:0}
/* the lone Add target row above everything is gone; the deck holds it now */
#plan>.section-title{display:none!important}

/* the month stepper beside the Outlook heading */
.month-nav{display:flex;align-items:center;gap:9px;margin-left:auto}
.month-nav b{font:650 13px/1 var(--rw-ui);color:var(--rw-text);min-width:112px;text-align:center}
.month-nav small{font:500 11.5px/1 var(--rw-ui);color:var(--rw-muted)}
.month-nav .wc-nav:disabled{opacity:.4;cursor:default}

/* --- 1 · the theme change fades instead of flashing -----------------
   Every surface, border, text and mark moves together over one short
   transition, so the switch reads as the lights changing rather than the
   page being repainted. */
/* --- 10 · the theme change fades -----------------------------------
   Driving this from a class that is added and removed around the switch
   never worked: the class came off before the transition finished, so the
   last of it snapped. The surfaces that carry theme colour simply carry
   the transition all the time, which means the switch animates on its own
   with no timing to get wrong. Only colour is animated, so nothing moves.  */
html,body,.app,.side,.rw-side,.main,.main-in,.top,.rw-top,
.panel,.dashboard-card,.table-panel,.plan-table-panel,.step-table-wrap,
.rw-tfoot,.drawer,.bell-panel,.account-panel,.modal,.form-sheet,
td,th,tr,input,select,textarea,button,.field,.btn,.status,.metric,
.rank,.src-tag,.uses-chip,.document-type,.takt-block,.shift-context,
.wc-pop,.wc-week,.wc-day,.gcell,.risk-card,.mini-bar,.mini-bar>i{
  transition:background-color .3s ease,border-color .3s ease,color .3s ease,
    fill .3s ease,stroke .3s ease,box-shadow .3s ease}
/* a hover must still feel instant, so it keeps its own shorter timing */
.btn:hover,.rowbtn:hover,.rw-add-inline:hover,.nav button:hover,tr:hover>td{
  transition-duration:.12s}

/* --- account menu matches the rail it opens from -------------------- */
.side .account-panel,.rw-side .account-panel{
  left:14px!important;right:14px!important;width:auto!important;
  max-width:calc(100% - 28px)!important;box-sizing:border-box}
.side .account-panel button,.rw-side .account-panel button{
  width:100%;box-sizing:border-box;text-align:left}

/* --- 7 · a document's type reads from its edge ----------------------
   One colour per type, on the edge and on the tag, so the register can be
   scanned the same way every other table is. */
.doc-row>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-line-3)}
.doc-standard-work>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-primary)}
.doc-safety-procedure>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-bad)}
.doc-quality-check>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-ok)}
.doc-lift-plan>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-warn)}
.doc-drawing>td:first-child{box-shadow:inset 3px 0 0 0 var(--t-teal-text)}
.document-type{border:0!important;background:var(--rw-s2)!important;color:var(--rw-text-2)!important;
  font:600 11px/1 var(--rw-ui)!important;padding:5px 9px!important;border-radius:999px!important;
  white-space:nowrap}
.dt-standard-work{background:var(--rw-primary-bg)!important;color:var(--rw-primary-text)!important}
.dt-safety-procedure{background:var(--rw-bad-bg)!important;color:var(--rw-bad-text)!important}
.dt-quality-check{background:var(--rw-ok-bg)!important;color:var(--rw-ok-text)!important}
.dt-lift-plan{background:var(--rw-warn-bg)!important;color:var(--rw-warn-text)!important}
.dt-drawing{background:var(--t-teal-bg)!important;color:var(--t-teal-text)!important}

/* the moved crew suggestion, now an action rather than part of a tile */
.crew-suggest{display:inline-flex!important;align-items:center;gap:7px;height:38px!important;
  padding:0 13px!important;border:1px solid var(--rw-warn-soft)!important;
  background:var(--rw-warn-bg)!important;color:var(--rw-warn-text)!important;
  border-radius:11px!important;font:600 12.5px/1 var(--rw-ui)!important;cursor:pointer;white-space:nowrap}
.crew-suggest b{font-weight:700}
.crew-suggest svg{width:15px;height:15px;flex:0 0 15px}
.crew-suggest:hover{border-color:var(--rw-warn)!important}
.crew-ok{display:none}

/* --- 6 · one add row, everywhere, always in view -------------------
   Every table ends the same way: a full-width button on a solid footer
   that stays put while the rows scroll behind it. */
tr.add-row,tr#stepAddRow,tr#bomAddRow,tr#inventoryAddRow,tr#targetAddRow{
  position:sticky!important;bottom:0;z-index:5}
tr.add-row>td{background:var(--rw-s1)!important;border-top:1px solid var(--rw-line)!important;
  box-shadow:0 -7px 14px -11px rgba(16,20,48,.4)}
[data-theme="night"] tr.add-row>td{box-shadow:0 -7px 14px -11px rgba(0,0,0,.65)}
.rw-add-inline{display:block;width:100%;padding:12px 14px;border:0;background:transparent;
  color:var(--rw-primary-text);font:600 13px/1 var(--rw-ui);text-align:center;cursor:pointer;
  transition:background .15s}
.rw-add-inline:hover{background:var(--rw-primary-bg)}
.rw-add-inline:disabled{color:var(--rw-muted);cursor:default;background:transparent}
/* room beneath the last row so the footer never covers it */
.table-panel,.plan-table-panel,.step-table-wrap,.attention-table{scroll-padding-bottom:52px}
.table-panel>table,.plan-table-panel>table,.step-table-wrap>table{margin-bottom:0}
/* The footer floats over the rows while scrolling, so the container keeps a
   row's worth of space beneath the table; scrolled to the end, the last row
   always clears it. */
#bom.view.on>.table-panel,#inventory.view.on>.table-panel,#supply.view.on>.table-panel,
.plan-view .plan-table-panel,#processsetup .step-table-wrap{padding-bottom:50px}

/* --- 6 · the add row as a real footer -------------------------------
   The row inside the table is where the app's handler lives, so it stays
   but is not shown; the footer beside the panel is what you see and click.
   Always in view, and never over a row. */
.table-panel.has-tfoot tr.add-row,.plan-table-panel.has-tfoot tr.add-row,
.step-table-wrap.has-tfoot tr.add-row{display:none}
.table-panel.has-tfoot,.plan-table-panel.has-tfoot,.step-table-wrap.has-tfoot{
  border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;
  border-bottom:0!important;
  /* a row's worth of clearance, so the last row never sits half-clipped on
     the scroll boundary where it cannot be clicked */
  padding-bottom:14px!important}
.rw-tfoot{flex:0 0 auto;background:var(--rw-s1);border:1px solid var(--rw-line);border-top:0;
  border-radius:0 0 16px 16px;overflow:hidden}
.rw-tfoot .rw-add-inline{border:0}
/* the step table and its footer share the space the card has, rather than
   the footer being pushed past the bottom of the screen */
#processsetup .step-table-wrap{max-height:none!important;overflow:auto}
#processsetup .step-table-wrap.has-tfoot{padding-bottom:0!important}

/* Process setup lays out as a column that fits the screen: the deck, the
   figures, then the step table taking what is left with its footer at the
   bottom of the card rather than below the fold. */
#processsetup.view.on>:last-child{display:flex;flex-direction:column;min-height:0;overflow:auto}
#processsetup.view.on>:last-child>.panel{display:flex!important;flex-direction:column;
  min-height:0;height:auto!important;align-self:stretch!important}
#processsetup .step-table-wrap{flex:1 1 auto;min-height:120px}
#processsetup .rw-tfoot{flex:0 0 auto}

/* --- consistency pass ----------------------------------------------
   One type scale and one row rhythm for every table, so moving between
   screens does not feel like moving between products. */
.table-panel table,.plan-table-panel table,.step-table,.progress-table-wrap table,
.attention-table table,.bom-table{font-size:13px!important}
.table-panel th,.plan-table-panel th,.step-table th,.attention-table th,.bom-table th{
  height:44px!important;padding:0 14px!important;font:600 11.5px/1 var(--rw-ui)!important;
  letter-spacing:.02em!important;text-transform:none!important;color:var(--rw-muted)!important;
  background:var(--rw-head)!important;border-bottom:1px solid var(--rw-line)!important;
  white-space:nowrap;vertical-align:middle}
.table-panel td,.plan-table-panel td,.step-table td,.attention-table td,.bom-table td{
  height:52px!important;padding:0 14px!important;vertical-align:middle;
  border-bottom:1px solid var(--rw-row)!important}
.table-panel tr:last-child td,.plan-table-panel tr:last-child td{border-bottom:0!important}
.table-panel .field,.plan-table-panel .field,.step-table .field,.bom-table .field{
  height:36px!important;font-size:13px!important}
.partno,.partno-field{font:600 12px/1 var(--rw-mono)!important;letter-spacing:0!important;
  color:var(--rw-primary-text)!important}
/* numbers line up column to column */
.impact-num,.avail-cell b,.cover-cell b,.risk-gap,.metric strong{
  font-variant-numeric:tabular-nums}
/* nothing spills out of a cell */
.table-panel td>*,.attention-table td>*{max-width:100%;min-width:0}
/* At shorter viewports the process card still has to fit inside the screen,
   so the card clips and the step table takes the scroll. */
#processsetup.view.on>:last-child>.panel{overflow:hidden}
#processsetup .step-table-wrap{overflow:auto!important}

/* =====================================================================
   v35 — THIRD REVIEW
   ===================================================================== */

/* --- 2 · a card inside a card was tinted, not white ------------------
   The table inside the Build targets and Work cells decks kept the sunken
   surface it uses when it is the page's own panel. Nested in a white card
   it just read as a grey block. */
.dashboard-card .table-panel,.dashboard-card .plan-table-panel,
.dashboard-card .cell-glance,.dashboard-card .quick-risk{
  background:var(--rw-s1)!important;border:0!important;box-shadow:none!important}
.dashboard-card .table-panel th{background:var(--rw-s1)!important}

/* --- 3, 4 · the title row is one row --------------------------------
   The heading sat above the workspace and product controls, so the header
   was two rows deep and pushed the icons down into a band of their own.
   They share a line now, with the heading and its controls separated by a
   rule rather than by a line break. */
.rw-top{min-height:0!important;padding-top:14px!important;padding-bottom:14px!important}
.rw-top-left{display:flex!important;flex-direction:row!important;align-items:center;gap:0 16px!important;flex-wrap:wrap;min-width:0}
.rw-top-left>h1{margin:0!important;font-size:23px!important;line-height:1.15!important;
  white-space:nowrap;flex:0 0 auto}
.rw-crumb{margin:0!important;padding-left:16px!important;
  border-left:1px solid var(--rw-line);min-width:0;flex:1 1 auto}
.rw-top-right{align-items:center!important}
@media (max-width:1150px){
  .rw-crumb{border-left:0;padding-left:0!important;flex-basis:100%}
}
/* the left block takes the width the actions do not, so the heading and its
   controls have room to share one line */
.rw-top-left{flex:1 1 auto!important;min-width:0}
.rw-top-right{flex:0 0 auto!important}

/* --- 8, 9 · Process setup holds its shape as you change cell ---------
   The Add work cell button sat alone on a row with the whole width beside
   it empty, and the figures deck was allowed to reflow and slide under the
   step table when a different cell was chosen. The action moves up beside
   the cell picker, and the figures row keeps one fixed height and one
   fixed set of columns whichever cell is selected. */
/* The Add work cell action floated over the right end of the picker row,
   which left the picker padded out and the button sitting on top of the
   row's own status. It is a sibling in the row now: the picker takes the
   width it needs and the action sits beside it, on the same line. */
#processsetup>.section-title{display:none!important}
#processsetup>.panel:first-of-type{
  display:flex!important;align-items:center;gap:14px!important;flex-wrap:wrap;
  padding:12px 16px!important;min-height:0!important}
#processsetup>.panel:first-of-type>label,
#processsetup>.panel:first-of-type>.ops-toolbar{flex:1 1 320px;min-width:0;margin:0!important}
#processsetup>.panel:first-of-type select{width:100%;min-width:0}
#processsetup .cell-picker-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#processsetup .cell-picker-row>*:first-child{flex:1 1 320px;min-width:0}
#processsetup .metric-ribbon,#processsetup .process-metrics{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;min-height:92px;align-items:stretch}
#processsetup .metric-ribbon>div{
  min-width:0;padding:13px 16px!important;border-right:1px solid var(--rw-line);
  display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden}
#processsetup .metric-ribbon>div:last-child{border-right:0}
#processsetup .metric-ribbon small{
  font:500 11.5px/1.2 var(--rw-ui)!important;color:var(--rw-muted)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#processsetup .metric-ribbon b{
  font:750 19px/1.15 var(--rw-ui)!important;letter-spacing:-.02em;color:var(--rw-text)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#processsetup .metric-ribbon em{
  font:500 11px/1.25 var(--rw-ui)!important;font-style:normal;color:var(--rw-muted)!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the note between the figures and the table keeps its own space */
#processsetup .panel>.note,#processsetup .cycle-note{margin:14px 0!important;flex:0 0 auto}

/* --- readiness dimensions -------------------------------------------
   The dial gave one number with nothing behind it. The five things that
   decide whether a build can run sit under it, each with the weight it
   carries, so the score can be argued with rather than taken on trust. */
.rw-dims{display:grid;gap:7px;width:100%;margin:14px 0 2px}
.rw-dim{display:grid;grid-template-columns:104px minmax(0,1fr) 40px;align-items:center;gap:10px}
.rw-dim em{font:500 11.5px/1 var(--rw-ui);font-style:normal;color:var(--rw-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-dim-bar{display:block;height:6px;border-radius:99px;background:var(--rw-track);overflow:hidden}
.rw-dim-bar b{display:block;height:100%;border-radius:99px;background:var(--rw-ok)}
.rw-dim-bar b.watch{background:var(--rw-warn)}
.rw-dim-bar b.critical{background:var(--rw-bad)}
.rw-dim strong{font:650 11.5px/1 var(--rw-mono);color:var(--rw-text-2);
  font-variant-numeric:tabular-nums;text-align:right}
.rw-dial-verdict[data-state="ok"]{background:var(--rw-ok-bg);color:var(--rw-ok-text)}
.rw-dial-verdict[data-state="watch"]{background:var(--rw-warn-bg);color:var(--rw-warn-text)}
.rw-dial-verdict[data-state="critical"]{background:var(--rw-bad-bg);color:var(--rw-bad-text)}
.rw-gauge-body{overflow:visible!important;justify-content:flex-start!important;gap:0!important;
  padding-bottom:4px!important}
.rw-dial-note{margin:12px 0 14px!important;font:500 12px/1.45 var(--rw-ui)!important;
  color:var(--rw-muted)!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-align:center}
.rw-dial{margin-bottom:6px!important}
.rw-dial-cta{margin-top:auto!important;width:100%;justify-content:center}
.rw-gauge{overflow:auto}

/* =====================================================================
   v36 — FOURTH REVIEW
   ===================================================================== */

/* --- BOM · the numbers that fill the space -------------------------
   Item / structure no longer takes every spare pixel; it is capped and
   the width goes to figures. A number cell is a value with its unit
   beside it, never wrapping into the column next door. */
.bom-table th:nth-child(2){max-width:380px}
.bom-table td:nth-child(2){max-width:380px}
.num-cell{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;
  font-variant-numeric:tabular-nums;overflow:hidden}
.num-cell b{font:650 13px/1 var(--rw-mono);color:var(--rw-text)}
.num-cell b.critical{color:var(--rw-bad-text)}
.num-cell b.watch{color:var(--rw-warn-text)}
.num-cell small{font:500 10.5px/1 var(--rw-ui);color:var(--rw-muted);
  overflow:hidden;text-overflow:ellipsis}
.num-cell .dash{color:var(--rw-line-3)}
.ok-tick{color:var(--rw-ok);font:700 14px/1 var(--rw-ui)}

/* --- roadblocks · one control for both registers -------------------- */
.road-shared-tabs{flex:0 0 auto}
.road-count{font:600 12px/1 var(--rw-ui);color:var(--rw-muted);
  padding:7px 11px;border-radius:999px;background:var(--rw-s2);white-space:nowrap}

/* --- plain language · a column explains itself ----------------------
   The heading keeps its own width and alignment; the marker is a 13px
   disc that only gains contrast on approach, so a row of them does not
   read as a row of errors. The panel is positioned by the header cell,
   escapes the table's own overflow by sitting in a fixed layer, and is
   raised above the sticky header. It opens on hover and on keyboard
   focus, and the same sentence is in the markup for a screen reader.
   ------------------------------------------------------------------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The header cell clips its own overflow, which swallowed the panel whole -
   it sits entirely below the cell's box. Only the cells that carry help are
   opened up, and their labels are checked to still fit their column. */
/* No position here. Setting position:relative to anchor the tooltip quietly
   overrode the sticky header these cells already had, so every column with a
   help note scrolled away with the rows while the few without one stayed put.
   position:sticky is itself a containing block, so the panel still anchors
   correctly and the header stays where it belongs. */
th.th-help{overflow:visible!important}
/* the heading is the control, so it costs the column no extra width */
th.th-help>.hx{display:inline;margin:0;padding:0;border:0;background:none;
  -webkit-appearance:none;appearance:none;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  text-align:inherit;cursor:help;
  text-decoration:underline dotted;text-underline-offset:3px;
  text-decoration-color:var(--rw-line-3);
  transition:color .14s ease,text-decoration-color .14s ease}
th.th-help:hover>.hx,th.th-help:focus-within>.hx{
  color:var(--rw-primary);text-decoration-color:var(--rw-primary)}

/* the panel itself */
th.th-help::after{
  content:attr(data-help);position:absolute;z-index:70;
  top:calc(100% + 7px);left:14px;width:max-content;max-width:268px;
  padding:9px 12px;border-radius:9px;
  font:500 12px/1.45 var(--rw-ui);letter-spacing:0;text-transform:none;
  white-space:normal;text-align:left;
  color:var(--rw-text);background:var(--rw-s1);
  border:1px solid var(--rw-line-2);box-shadow:var(--rw-shadow-pop);
  opacity:0;visibility:hidden;transform:translateY(-3px);pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
th.th-help:hover::after,th.th-help:focus-within::after{
  opacity:1;visibility:visible;transform:translateY(0)}
/* the last columns of a wide table would push the panel off the right edge */
th.th-help:nth-last-child(-n+3)::after{left:auto;right:6px}
th.th-help>.hx:focus-visible{outline:2px solid var(--rw-primary);outline-offset:3px;border-radius:3px}

/* --- first run · a screen that starts you off ------------------------
   These replace four dead ends. The block is centred and narrow so it
   reads as guidance rather than as a broken table, and it keeps the
   panel's own surface so an empty screen still looks finished.
   -------------------------------------------------------------------- */
.first-run{display:flex;flex-direction:column;align-items:center;gap:9px;
  max-width:520px;margin:0 auto;padding:34px 20px 36px;text-align:center}
.first-run b{font:650 15px/1.35 var(--rw-ui);color:var(--rw-text)}
.first-run p{margin:0;font:400 13px/1.6 var(--rw-ui);color:var(--rw-muted)}
.first-run-do{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:6px}
.first-run-do .btn{height:36px}
tr.empty-row>td:has(.first-run){padding:0!important;height:auto!important}
.empty-state:has(.first-run){padding:0!important;background:transparent;border:0}

/* --- undo · the toast you can act on --------------------------------- */
.toast.has-undo{gap:14px}
.toast .toast-msg{flex:1 1 auto;min-width:0}
.toast .toast-undo{flex:0 0 auto;height:28px;padding:0 12px;border-radius:7px;
  font:650 12px/1 var(--rw-ui);cursor:pointer;
  color:var(--rw-primary-ink);background:var(--rw-primary);
  border:1px solid var(--rw-primary);
  transition:background .14s ease}
.toast .toast-undo:hover{background:var(--rw-primary-hi)}
.toast .toast-undo:focus-visible{outline:2px solid var(--rw-primary);outline-offset:2px}

/* --- work cell · the add action sits with the status pill ------------ */
#processsetup .cell-picker{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
#processsetup .cell-picker>select,#processsetup .cell-picker>.field{flex:1 1 300px;min-width:0}
#processsetup .cell-picker>.status{flex:0 0 auto}
#processsetup .cell-picker .rw-cell-add{flex:0 0 auto;margin-left:0;height:36px;white-space:nowrap}
/* the original lives on to own the add flow, but the picker shows the one
   people click, so this one stays out of the layout */
.rw-cell-add-src{display:none!important}

/* --- BOM · a structure table, one line per row -----------------------
   Role, Parent and Unit are read-only labels, so they sit on the text
   baseline like Inventory's rather than in input boxes. Nothing in the
   row is allowed to wrap - that is what turned a 52px row into 132px.
   -------------------------------------------------------------------- */
.bom-table td,#bom .table-panel td{white-space:nowrap}
.bom-table td .item,#bom .item{flex-wrap:nowrap}

.role-cell{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font:600 11.5px/1 var(--rw-ui);letter-spacing:.01em;
  padding:5px 9px;border-radius:6px;white-space:nowrap;
  color:var(--rw-text-2);background:var(--rw-s3)}
/* --rw-primary is the button fill, meant to sit under white text; on the
   pale primary tint it only reaches 3.66 at night. --rw-primary-text is the
   token made for exactly this pairing. */
.role-cell.role-product{color:var(--rw-primary-text);background:var(--rw-primary-bg)}
.role-cell.role-assembly{color:var(--rw-info-text);background:var(--rw-info-bg)}

.parent-cell{font:500 12.5px/1 var(--rw-mono);color:var(--rw-text-2);
  overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}
.unit-cell{font:600 12px/1 var(--rw-ui);color:var(--rw-muted)}
.bom-table .dash,#bom .dash{color:var(--rw-faint)}

/* --- availability · whose number this is ---------------------------- */
.avail-src{font:700 9px/1 var(--rw-ui);font-style:normal;letter-spacing:.04em;
  padding:3px 5px;margin-left:7px;border-radius:4px;
  color:var(--rw-info-text);background:var(--rw-info-bg);vertical-align:1px}

/* --- form sheet · a field that explains itself ---------------------- */
#sheetFields label .fl{display:block}
#sheetFields label .fh{display:block;margin:3px 0 5px;
  font:400 11.5px/1.45 var(--rw-ui);font-style:normal;color:var(--rw-muted)}
#sheetFields .field:disabled{opacity:.55;cursor:not-allowed}
/* hints vary in length, so the controls are pushed to the bottom of each
   cell - otherwise two fields side by side sit at different heights */
#sheetFields label{display:flex;flex-direction:column}
#sheetFields label>.field,#sheetFields label>select,#sheetFields label>textarea{margin-top:auto}
/* the sentence under the pack-size field */
#sheetFields .pack-say{display:block;margin-top:6px;
  font:500 11.5px/1.4 var(--rw-ui);font-style:normal;color:var(--rw-primary-text)}

/* =====================================================================
   v40 · spacing, weight and fit
   ===================================================================== */

/* --- 1 · the sidebar stops trimming its own words -------------------
   Labels carry text-overflow:ellipsis as a last resort, and at 1280px
   "Incoming supply" had only a few pixels to spare - enough in the
   fallback font this is built against, not enough in the real one. The
   chrome gives back about fourteen pixels so the words fit outright.
   -------------------------------------------------------------------- */
.rw-nav>button,.rw-nav .nav-group button{gap:9px!important;padding:0 8px!important}
.rw-nav .nav-ico{width:20px;height:20px;flex:0 0 20px}
.rw-nav .nav-ico svg{width:18px;height:18px}
.rw-nav em,#navRisk{min-width:20px;padding:0 5px!important;margin-left:8px}

/* --- 2 · one weight for a part name, wherever it appears -------------
   Products & BOM writes the name into an input at 13px regular; Inventory
   and Incoming supply drew the same name as bold 13.5px, so the two
   screens looked like different products. The BOM's weight wins.
   -------------------------------------------------------------------- */
#inventoryRows td b,#supplyRows td b,
#inventoryRows td>b:first-child,#supplyRows td>b:first-child{
  font:400 13px/1.35 var(--rw-ui)!important;color:var(--rw-text)!important}

/* --- 5 · decks: one gap, and no deck landing on another --------------
   The roadblocks grid gave each panel a 388px row but the lists inside
   were pinned to max-height:360px, so each panel stood 463px tall and
   overlapped the one below it by 65px. The lists now take whatever the
   row gives them and scroll inside it - which is what lets the page
   itself stay still.
   -------------------------------------------------------------------- */
:root{--rw-deck-gap:16px}

#roadblocks .road-grid{
  grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
  gap:var(--rw-deck-gap)!important;align-content:stretch}
/* flex-basis:0 is what makes this work: the list stops claiming its whole
   content height, so the panel no longer outgrows its row and plain grid
   stretch sizes it to the track. */
#roadblocks .road-register,#roadblocks .system-list{
  min-height:0!important;overflow:hidden!important;align-self:stretch!important}
#roadblocks .register-list,#roadblocks .system-scroll{
  flex:1 1 0!important;min-height:0!important;
  max-height:none!important;overflow-y:auto!important}

/* the same gap on every deck grid, so the rhythm is one rhythm */
.rw-dash,#stations .cell-overview,#stations .overview-stack,
#processsetup .workspace-grid,#shift .workspace-grid,
#attention .attention-layout{gap:var(--rw-deck-gap)!important}

/* =====================================================================
   v41 · alignment, descenders, and decks that hold their size
   ===================================================================== */

/* --- descenders ------------------------------------------------------
   The nav label was a 14px font in a 14px line box with overflow:hidden,
   so the tails of g, p and y were cut off - "Shortages", "Incoming
   supply", "Process setup". The line box now has room for them.
   -------------------------------------------------------------------- */
.rw-nav-t{line-height:1.5!important;padding-block:1px}
.rw-side-label,.nav-group summary span{line-height:1.5}

/* --- cell health · one column line down the list ---------------------
   Every row is its own grid and the last track was `auto`, so the status
   column was as wide as that row's own words: "At risk" and "On track"
   pulled the bar and the head-count left and right by a few pixels each
   row. Fixed tracks make the columns line up down the whole list, whatever
   each row happens to say.
   -------------------------------------------------------------------- */
.cell-health-row{grid-template-columns:minmax(0,1fr) 124px 64px 104px!important;
  align-items:center;gap:12px!important}
.cell-health-row>*:nth-child(2){justify-self:stretch}
.cell-health-row>*:nth-child(3){justify-self:end;text-align:right;white-space:nowrap}
.cell-health-row>.status{justify-self:end;width:100%;text-align:center;white-space:nowrap}
.cell-health-row small{white-space:nowrap}

/* --- process setup · a deck absorbs its own growth -------------------
   The workspace was display:block, so the step table simply got taller and
   everything around it moved; the table's own limit was tied to the
   viewport rather than to the deck it sits in. Adding a step now length-
   ens a list that scrolls inside its deck, and nothing else on the screen
   shifts.
   -------------------------------------------------------------------- */
#processsetup .workspace-grid{
  display:grid!important;grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:var(--rw-deck-gap)!important;height:100%;min-height:0}
#processsetup .workspace-grid>.panel{min-height:0;align-self:stretch!important;
  display:flex;flex-direction:column;overflow:hidden}
#processsetup .step-table-wrap{
  flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow:auto}

/* =====================================================================
   v43 · the readiness card, the build plan, and the timeline header
   ===================================================================== */

/* --- readiness · the sentence and the button stop fighting -----------
   The card is a fixed height in the dashboard grid, and its body was
   centred, so on a shorter screen the summary line and the button were
   pushed into the same 21 pixels. The body now stacks from the top, the
   line is held to two, and the button keeps the floor to itself.
   -------------------------------------------------------------------- */
.rw-gauge{overflow:hidden}
.rw-gauge-body{justify-content:flex-start!important;gap:9px}
.rw-dims{flex:0 1 auto;min-height:0;width:100%}
.rw-dial-note{margin:0!important;flex:0 1 auto;min-height:0;text-align:center;
  line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rw-gauge .rw-dial-cta{flex:0 0 auto;margin-top:auto!important}

/* --- build plan · the screen is used ---------------------------------
   The left column stretched to the full height of the view with its
   controls ending two thirds of the way down, so a third of the panel was
   an empty bordered box while the targets table below the chart had to
   scroll. The takt figure moves to a strip across the top - it is a
   result, not an input - the controls take only the height they need, and
   everything the strip releases goes to the table.
   -------------------------------------------------------------------- */
/* The takt figure is rendered inside the basis panel by the engine, so it
   cannot be promoted to a strip from here. What can go is the dead space:
   the controls panel takes the height it needs instead of being stretched
   to the full view with a third of it empty, and the height that frees
   goes to the targets table, which is the part with rows to show. */
.plan-left{align-self:start!important}
.plan-left>.plan-basis{flex:0 0 auto!important;overflow:visible!important}
.plan-view .takt-block{flex-direction:row;align-items:baseline;gap:12px;
  flex-wrap:wrap;margin:0 0 14px!important}
.plan-view .takt-block b{font-size:19px;line-height:1.1}
/* the chart keeps a workable height; every remaining pixel is the table's */
.plan-right{grid-template-rows:minmax(170px,30%) minmax(0,1fr)!important}

/* --- month stepper · a control that looks like one -------------------- */
#planMonthNav{display:flex;align-items:center;gap:8px}
#planMonthNav button{width:32px!important;height:32px!important;border-radius:9px!important;
  display:grid;place-items:center;font-size:17px;line-height:1;
  color:var(--rw-text)!important;background:var(--rw-s2)!important;
  border:1px solid var(--rw-line-2)!important;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
#planMonthNav button:hover:not(:disabled){background:var(--rw-primary-bg)!important;
  border-color:var(--rw-primary-line)!important;color:var(--rw-primary-text)!important}
#planMonthNav button:disabled{opacity:.4;cursor:not-allowed}
#planMonthNav button:focus-visible{outline:2px solid var(--rw-primary);outline-offset:2px}

/* --- timeline header · the download sits with the search -------------- */
#gantt .section-title{display:flex;align-items:center;gap:10px}
#gantt .section-title>div:first-child{flex:1 1 auto;min-width:0}
#gantt .section-title [data-dl-timeline]{flex:0 0 auto;margin-left:auto}
#gantt .section-title .search{flex:0 0 auto}

/* --- supply comparison · bars scale, figures share a line -------------
   The bars carry the comparison, so they keep their heights. The figure was
   pinned to the top of its own bar, which put three numbers meant to be read
   together at three different heights; they now sit on one line above the
   chart.
   -------------------------------------------------------------------- */
.mini-col>span{top:0!important;bottom:auto!important;
  font:700 12px/1 var(--rw-ui)!important;color:var(--rw-text)!important;
  font-variant-numeric:tabular-nums}
.mini-col>i{min-height:2px}

/* --- printing the timeline on A3 -------------------------------------
   The browser's own print path is used rather than a second renderer, so
   what lands on the page is the chart that is on screen, in its own
   colours. Everything that is not the chart is left off, the horizontal
   scroller is unrolled, and a plan wider than the sheet is scaled down to
   fit rather than cut off at the edge.
   -------------------------------------------------------------------- */
@media print{
  :root[data-printing="timeline"]{--rw-print-scale:1}

  /* The chart is lifted into #rwPrintHolder directly under <body> for the
     print, so nothing it used to sit inside can clip it. Everything else is
     hidden outright rather than named one by one - naming them is how the
     help panel printed its own page the first time. */
  :root[data-printing="timeline"] body>*{display:none!important}
  /* The app already prints the help panel - that is what the printer icon
     used to do - and its rule is written with an id, so it outranked the
     line above and printed itself instead of the chart. While the timeline
     is the thing being printed, it is turned off by name. */
  :root[data-printing="timeline"] #helpModal,
  :root[data-printing="timeline"] #helpModal *,
  :root[data-printing="timeline"] .modalback,
  :root[data-printing="timeline"] .form-sheet{
    display:none!important;visibility:hidden!important}
  /* Only visibility is forced back on here. Forcing display too - with
     `display:revert` - reset every grid and flex row inside the chart to
     block and the columns collapsed into a single narrow strip. The holder
     is a direct child of body, so nothing inside it was hidden anyway. */
  :root[data-printing="timeline"] #rwPrintHolder,
  :root[data-printing="timeline"] #rwPrintHolder *{visibility:visible!important}
  :root[data-printing="timeline"] body>#rwPrintHolder{display:block!important}

  :root[data-printing="timeline"],
  :root[data-printing="timeline"] body{
    height:auto!important;min-height:0!important;max-height:none!important;
    overflow:visible!important;background:#fff!important;
    margin:0!important;padding:0!important;display:block!important}

  #rwPrintHolder{display:block;width:max-content;max-width:100%;margin:0 auto}
  #rwPrintHolder #gantt{
    display:block!important;position:static!important;
    width:max-content!important;max-width:none!important;
    height:auto!important;max-height:none!important;overflow:visible!important;
    padding:0!important;margin:0!important;background:#fff!important}
  /* its toolbar has no place on paper */
  #rwPrintHolder .search,
  #rwPrintHolder .search *,
  #rwPrintHolder [data-dl-timeline],
  #rwPrintHolder [data-dl-timeline] *,
  #rwPrintHolder [data-print-timeline],
  #rwPrintHolder [data-print-timeline] *{
    display:none!important;visibility:hidden!important}
  /* the two strips are unrolled: on paper there is nothing to scroll */
  #rwPrintHolder .gantt-top-scroll,
  #rwPrintHolder .gantt-main-scroll,
  #rwPrintHolder #ganttBody{
    overflow:visible!important;max-height:none!important;height:auto!important;
    width:max-content!important;max-width:none!important}
  /* zoom, not transform: a transform leaves the layout box at full width and
     the browser shrinks the page to the sheet a second time */
  #rwPrintHolder #ganttBody{zoom:var(--rw-print-scale)}
  #rwPrintHolder .gantt-grid-row>.gcell:nth-child(-n+5){position:static!important}
  :root[data-printing="timeline"] *{
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}
@page{size:landscape;margin:8mm}

/* --- timeline · a section's own column names ------------------------- */
/* It must read as a header, so it borrows the main head's type and fill and
   drops the 48px body-row height. .gcell.task is display:block, which pushed
   "Part / purchase order" 16px above the labels beside it - every cell in
   this row is flex-centred so the whole line sits on one baseline. */
.gantt-grid-row.row-subhead{min-height:0!important;cursor:default;
  border-bottom:1px solid var(--rw-line)!important}
.gantt-grid-row.row-subhead:hover{background:transparent!important}
.gantt-grid-row.row-subhead>.gcell,
.gantt-grid-row.row-subhead>.gcell.task{
  display:flex!important;align-items:center!important;
  font:600 12px/1.2 var(--rw-ui)!important;letter-spacing:0!important;
  text-transform:none!important;
  color:var(--rw-muted)!important;background:var(--rw-head)!important;
  padding-top:8px!important;padding-bottom:8px!important;
  border-bottom:0!important}
.gantt-grid-row.row-subhead:hover>.gcell{background:var(--rw-head)!important}

/* --- help panel · a reference, not a column of sentences -------------- */
.help-list{display:grid;gap:0;margin-top:10px;
  border:1px solid var(--rw-line);border-radius:12px;overflow:hidden}
.help-row{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);
  gap:16px;padding:10px 14px;border-bottom:1px solid var(--rw-row);align-items:baseline}
.help-row:last-child{border-bottom:0}
.help-row:nth-child(odd){background:var(--rw-s2)}
.help-row>b{font:600 12.5px/1.4 var(--rw-ui);color:var(--rw-text)}
.help-row>span{font:400 12.5px/1.55 var(--rw-ui);color:var(--rw-text-2)}
.help-row>span:only-child{grid-column:1/-1}

/* --- the demo notice sits out of the way ------------------------------ */
.demo-banner{margin-left:auto!important;width:max-content;max-width:100%}

/* --- outlook · one month, or the whole plan --------------------------- */
#planMonthNav .month-all{height:32px;padding:0 12px;border-radius:9px;
  font:600 12px/1 var(--rw-ui);white-space:nowrap}
#planMonthNav .month-all.on{background:var(--rw-primary)!important;
  border-color:var(--rw-primary)!important;color:var(--rw-primary-ink)!important}
#planMonthNav small{font:500 11.5px/1 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}

/* --- attention · the pill names the constraint ------------------------ */
/* "Needs attention" told a supervisor nothing they could act on. The pill
   now carries the reason, and is a button because the rest of the detail
   is one click away instead of a hunt through the constraints deck. */
button.status{cursor:default;border:0;font-family:var(--rw-ui)}
button.status.cell-attn{cursor:pointer;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent);
  transition:box-shadow .15s,transform .15s}
button.status.cell-attn:hover{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 52%,transparent)}
button.status.cell-attn:active{transform:translateY(1px)}
button.status.cell-attn:focus-visible{outline:2px solid var(--rw-primary);outline-offset:2px}
/* A tinted chip here mixes the pill's own ink into its own background and
   drops the count to 4.25:1. The count keeps the pill's colour and is set
   off by a rule instead. */
.attn-n{margin-left:5px;padding-left:7px;font:700 11.5px/1 var(--rw-ui);
  border-left:1px solid color-mix(in srgb,currentColor 38%,transparent)}

.attn-pop{position:fixed;z-index:120;width:min(380px,calc(100vw - 20px));
  background:var(--rw-s1);border:1px solid var(--rw-line);border-radius:14px;
  box-shadow:0 18px 44px -14px rgba(16,20,48,.34);overflow:hidden}
[data-theme="night"] .attn-pop{box-shadow:0 18px 44px -12px rgba(0,0,0,.66)}
.attn-pop-head{padding:10px 14px;background:var(--rw-head);
  border-bottom:1px solid var(--rw-line);
  font:600 12px/1.3 var(--rw-ui);color:var(--rw-muted)}
.attn-item{padding:10px 14px 10px 17px;border-bottom:1px solid var(--rw-row);
  background:var(--rw-s1);border-left:3px solid var(--rw-warn)}
.attn-item.sev-critical{border-left-color:var(--rw-bad)}
.attn-item>b{display:block;font:600 13px/1.4 var(--rw-ui);color:var(--rw-text)}
.attn-item>small{display:block;margin-top:2px;font:400 12px/1.5 var(--rw-ui);color:var(--rw-muted)}
.attn-pop-foot{padding:10px 14px;background:var(--rw-s2)}
.attn-pop-foot .btn{width:100%;justify-content:center}

/* --- step tables · a number you read, an order you move --------------- */
.step-table th.col-no{width:78px}
.step-table td.step-no{white-space:nowrap;font-variant-numeric:tabular-nums}
.step-table td.step-no .step-pos{display:inline-block;min-width:18px;
  font:700 13px/1 var(--rw-ui);color:var(--rw-text-2)}
.step-move{display:inline-flex;flex-direction:column;gap:1px;
  margin-left:7px;vertical-align:middle}
.step-move .rowbtn{width:20px;height:15px;min-height:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rw-line);background:var(--rw-s2);
  border-radius:5px;font-size:8px;line-height:1;color:var(--rw-muted);cursor:pointer}
.step-move .rowbtn:hover:not(:disabled){background:var(--rw-hover);color:var(--rw-text)}
.step-move .rowbtn:disabled{opacity:.3;cursor:default}

/* --- shift steps · the row says where the work has got to ------------- */
/* Reading seven dropdowns to find out how much of the shift is done is not
   reading. The state goes on the row - but in this product's language,
   which is a coloured left edge on a white row, not a tinted row. Complete
   recedes, waiting is held back, in progress carries the accent. */
.step-table tr.step-row>td:first-child{
  box-shadow:inset 3px 0 0 0 var(--rw-line);padding-left:11px}
.step-table tr.step-row.state-done>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-ok)}
.step-table tr.step-row.state-active>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-primary)}
.step-table tr.step-row.state-hold>td:first-child{box-shadow:inset 3px 0 0 0 var(--rw-warn)}
.step-table tr.step-row.state-done>td,
.step-table tr.step-row.state-done .step-pos,
.step-table tr.step-row.state-done b{color:var(--rw-muted)!important;font-weight:500}
.step-table tr.step-row.state-hold>td{color:var(--rw-muted)}
.step-table tr.step-row.state-active b{color:var(--rw-text)!important;font-weight:700}
/* Over standard is an exception, not a stage, so it is said on the figure
   that is over rather than by taking the row's edge away from its state. */
.step-table tr.step-row.row-watch [data-actual]{
  border-color:var(--rw-warn)!important;color:var(--rw-warn-text)!important;font-weight:700}

/* --- readiness · a dimension with nothing behind it ------------------- */
.rw-dim-unset{opacity:.55}
.rw-dim-unset .rw-dim-bar{background:var(--rw-track)!important}
.rw-dim-unset strong{color:var(--rw-muted)!important;font-weight:600}
.rw-gauge[data-state="unset"] .rw-dial-verdict,
.rw-dial-verdict[data-state="unset"]{
  background:var(--rw-s3)!important;color:var(--rw-text-2)!important}
/* The dashboard row is a fixed fraction of the screen, and the empty state
   puts a "create your first product" banner above it, so the card can be
   ~30px shorter than usual. The dimensions gave way to the action button
   and Documentation disappeared behind it. The list takes the squeeze now:
   it shrinks and scrolls, and the button keeps its place. */
/* Squeezing the list into 58px was worse than the overlap. The card itself
   takes the scroll instead: with slack the button stays pinned to the
   bottom by its auto margin, and when the row is short the auto margin
   collapses, the button follows the list, and you scroll to it. */
.rw-gauge-body{overflow-y:auto!important;overscroll-behavior:contain}
.rw-dial,.rw-dial-verdict,.rw-dims,.rw-dial-cta{flex:0 0 auto}

/* --- supply · a part's further deliveries ----------------------------- */
/* The second and later orders for a part hang off the first rather than
   repeating its identity, so the eye still reads one part per block. */
.supply-next>td:first-child{border-left-color:transparent!important}
.supply-next>td{border-top:0!important}
.supply-cont{font:500 12px/1.4 var(--rw-ui);color:var(--rw-muted);padding-left:14px;position:relative}
.supply-cont::before{content:"";position:absolute;left:2px;top:-9px;width:8px;height:16px;
  border-left:1px solid var(--rw-line);border-bottom:1px solid var(--rw-line);
  border-bottom-left-radius:4px}
.supply-count{display:block;font:500 11.5px/1.4 var(--rw-ui);color:var(--rw-muted);margin-top:2px}

/* --- inventory · the safety-stock policy ------------------------------ */
.safety-toggle{gap:7px}
.safety-toggle svg{width:15px;height:15px;flex:0 0 15px}
.safety-toggle[aria-pressed="true"]{
  border-color:var(--rw-ok-line,var(--rw-line))!important;
  background:var(--rw-ok-bg)!important;color:var(--rw-ok-text)!important}
.safety-toggle.is-off{background:var(--rw-warn-bg)!important;color:var(--rw-warn-text)!important;
  border-color:var(--rw-warn-soft)!important}
.safety-toggle.is-off .safety-tick{display:none}
.overview-kpis .kpi-where{display:block;font:500 11px/1.3 var(--rw-ui);
  font-style:normal;color:var(--rw-muted);margin-top:1px}

/* --- activity · what changed, in the panel people already open -------- */
.activity-row{align-items:flex-start}
.activity-row .act-when{font:500 11.5px/1.5 var(--rw-ui);color:var(--rw-muted);white-space:nowrap}
.act-was{color:var(--rw-muted);text-decoration:line-through}
.act-now{color:var(--rw-text);font-weight:650}
#activityList{max-height:196px;overflow-y:auto;overscroll-behavior:contain}

/* --- documents · the policy that decides part of the score ----------- */
.doc-policy{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:12px;background:var(--rw-s2);
  border:1px solid var(--rw-line);border-radius:14px}
.doc-policy-head b{display:block;font:600 13px/1.4 var(--rw-ui);color:var(--rw-text)}
.doc-policy-head small{display:block;font:400 12px/1.4 var(--rw-ui);color:var(--rw-muted)}
.doc-policy-chips{display:flex;gap:7px;flex-wrap:wrap}
.doc-chip{height:28px;padding:0 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--rw-line);background:var(--rw-s1);
  font:500 12px/1 var(--rw-ui);color:var(--rw-muted);transition:background .15s,color .15s}
.doc-chip:hover:not(:disabled){border-color:var(--rw-primary)}
.doc-chip.on{background:var(--rw-primary);border-color:var(--rw-primary);
  color:var(--rw-primary-ink);font-weight:650}
.doc-chip:disabled{opacity:.55;cursor:default}
.doc-missing{color:var(--rw-warn-text);font-weight:650}

/* --- work in progress · what is waiting behind a cell ---------------- */
.wip-pill{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:6px;
  background:var(--rw-warn-bg);color:var(--rw-warn-text);
  font:650 11px/1.6 var(--rw-ui);vertical-align:1px;white-space:nowrap}
.basis-hint{font:500 11.5px/1 var(--rw-ui);font-style:normal;color:var(--rw-muted)}

/* --- v69.12 -------------------------------------------------------
   .account-page-grid sets align-items:start but never align-content, so
   the height left over in the view was shared out between the two auto
   rows and Password & security sat 138px below Runway access. */
.account-page-grid{align-content:start}

/* --- v69.12 · per-product routing --------------------------------------
   The route is a sequence, so it is drawn as one: numbered cells with
   arrows between them, and the word Unassigned when there is none. */
.route-picker{grid-column:1/-1;margin:4px 0 2px;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--rw-s1)}
.route-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.route-head small{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.route-clear{border:0;background:none;color:var(--muted);font:600 11px inherit;cursor:pointer;padding:2px 4px;border-radius:6px}
.route-clear:hover{color:var(--ink);background:var(--rw-s2)}
.route-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.route-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 5px;border:1px solid var(--line);
  border-radius:999px;background:var(--rw-s2);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.route-chip i{width:17px;height:17px;flex:0 0 17px;border-radius:50%;display:grid;place-items:center;
  background:var(--rw-primary,#5b52e0);color:#fff;font:800 9.5px/1 inherit;font-style:normal}
.route-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.route-chip button:hover{color:#8f2c23}
.route-arrow{color:var(--muted);font-size:12px}
.route-unassigned{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  border:1px dashed var(--line);color:var(--muted);font-size:11.5px;font-weight:650}
.route-add{margin-top:10px;max-width:340px}
.route-empty{color:var(--muted);font-size:11.5px;line-height:1.55}
@media(max-width:820px){.route-add{max-width:none}}

/* --- v69.18 · a newly added row announces itself ---------------------- */
@keyframes rowJustAdded{from{background:var(--rw-primary-bg,#edecfd)}to{background:transparent}}
.row-just-added{animation:rowJustAdded 1.6s ease-out 1}
.row-just-added td:first-child{box-shadow:inset 3px 0 0 var(--rw-primary,#5b52e0)}

/* --- v69.34 · the build plan's own column scrolls -----------------------
   Measured at 1500x940: .plan-left is 937px of content inside a 794px view
   with overflow-y:hidden, and nothing in the view scrolled - so #planAddInline
   ("Add target") sat at y=1026, on screen by its own reckoning and 86px below
   the bottom of the window. At 720px tall, three controls were lost. The page
   is deliberately not scrollable, so the column has to be.

   minmax(0,1fr) on the row is what lets a grid item be shorter than its
   content; without it the item stretches and overflow:auto never engages. */
#plan{grid-template-rows:minmax(0,1fr)}
/* align-self:start is what defeated the first attempt: the column refused to
   stretch to its row, took its content height of 953px instead, and overflowed
   a 776px row - so overflow-y:auto had nothing to scroll. Stretching it to the
   row is what gives the scrollbar something to work with. Short content still
   sits at the top, so nothing looks different until there is too much of it. */
#plan>.plan-left{align-self:stretch;max-height:100%}
#plan .plan-left{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
#plan .plan-left::-webkit-scrollbar{width:9px}
#plan .plan-left::-webkit-scrollbar-thumb{background:#d6dfdb;border-radius:9px}
#plan .plan-left::-webkit-scrollbar-thumb:hover{background:#c2cfca}

/* The resolution note on a closed flag. Saved since the resolve sheet existed,
   shown for the first time in v69.34. */
.register-row-compact .rc-note{grid-column:1/-1;margin-top:4px;padding:7px 9px;border-radius:8px;
  background:#f3f7f5;border:1px solid #e2eae6;color:#41554d;font-size:11.5px;line-height:1.55}

/* --- Build plan: fixed summary and independently scrolling targets ----
   The right column has FOUR direct children when targets are present:
   Outlook chart, Built to date, scrollable targets table, Add target footer.
   Earlier grid definitions allocated only two rows, leaving the table as
   an implicitly sized row which grew beyond the dashboard viewport. */
#plan .plan-right{
  min-height:0;
  overflow:hidden;
  grid-template-rows:minmax(170px,30%) auto minmax(0,1fr) auto!important;
  row-gap:0;
}
#plan .plan-right > #builtStrip{
  min-height:0;
  padding:12px 0;
}
#plan .plan-right > #builtStrip .built-strip{margin:0}
#plan .plan-right > .plan-table-panel{
  min-width:0;
  min-height:0;
  height:100%;
  overflow-y:auto!important;
  overflow-x:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#plan .plan-right > .plan-table-panel thead th{position:sticky;top:0;z-index:4}
#plan .plan-right > .rw-tfoot{min-height:0;margin:0}

/* Demo uses the same Build Plan table but has no Built-to-date summary.
   Reserve a chart row, a bounded scrolling table and the optional add-target footer. */
body.runway-demo-page #plan .plan-right{
  grid-template-rows:minmax(170px,30%) minmax(0,1fr) auto!important;
}

/* v71.10.5 clarity pass: metric values first; no duplicate explanatory lines. */
#plan .takt-block{align-items:center;gap:12px;min-height:0}
#plan .takt-block small,#plan .takt-block b{margin:0}
#plan .built-strip{align-items:center;gap:clamp(20px,3vw,48px)}
#plan .built-field{min-width:128px}
#plan .built-field .field{max-width:135px}
#plan .built-read{min-width:0;justify-content:center;gap:6px}
#plan .built-read span{font:500 12px/1.2 var(--rw-ui);color:var(--rw-muted)}
#plan .built-read b{font:750 21px/1.15 var(--rw-ui);font-variant-numeric:tabular-nums;color:var(--rw-text)}
#plan .built-limited b{color:var(--rw-warn-text)}
@media(max-width:650px){#plan .built-strip{gap:18px}}


/* v71.10.5 · Work-cell overview metadata wrap / non-overlapping columns
   The earlier global .cell-health-row small { white-space:nowrap } let
   long owner + document + missing notes paint over the progress track.
   Only the *metadata* can wrap; percentage and headcount stay in their own
   grid tracks. Applies to live Runway and Demo (same stylesheet). */
.cell-health-row > div:first-child {
  min-width:0;
  max-width:100%;
}
.cell-health-row > div:first-child > strong {
  display:block;
  white-space:normal;
  overflow-wrap:break-word;
  line-height:1.35;
}
.cell-health-row > div:first-child > small {
  display:block;
  min-width:0;
  max-width:100%;
  margin-top:4px;
  line-height:1.45;
  white-space:normal!important;
  overflow-wrap:break-word;
}
.cell-health-row > div:first-child .doc-missing {
  display:inline-block;
  white-space:nowrap;
}
.cell-health-row > div:nth-child(2) {
  min-width:0;
}
.cell-health-row > div:nth-child(2) > small {
  display:block;
  text-align:center;
  line-height:1.4;
  margin-top:5px;
  white-space:nowrap!important;
}

/* When the health deck itself becomes narrow, use two readable columns
   rather than squeezing all four tracks until labels overlap. */
.cell-health-list{container-type:inline-size}
@container (max-width:480px){
  .cell-health-row{grid-template-columns:minmax(0,1fr) 108px!important;
    column-gap:10px!important;row-gap:9px!important}
  .cell-health-row>div:first-child{grid-column:1;grid-row:1 / 3}
  .cell-health-row>div:nth-child(2){grid-column:2;grid-row:1}
  .cell-health-row>div:nth-child(3){grid-column:1;grid-row:3;justify-self:start;text-align:left}
  .cell-health-row>.status{grid-column:2;grid-row:3;justify-self:stretch;width:100%}
}