/* Ubuntu, self-hosted - the SAME four faces the product ships in
   website-v2/dashboard/assets/fonts.

   The console declared --sans: "Ubuntu", system-ui, ... and never loaded the
   font, so every page silently fell back to Segoe UI on Windows. Ubuntu has a
   noticeably larger x-height and wider glyphs, so identical CSS (13px nav,
   10px section labels) rendered visibly smaller here than in the product. The
   numbers were never wrong - the typeface was missing.

   Upright faces only; nothing in the console is italic. Weights 600/650/800 in
   this file synthesise from the nearest available face, which is what the
   product does too. */
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/Ubuntu-Light.ttf") format("truetype"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/Ubuntu-Regular.ttf") format("truetype"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/Ubuntu-Medium.ttf") format("truetype"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/Ubuntu-Bold.ttf") format("truetype"); }

/* Onboarding Ops console - RippleCore design language, v2.
   Tokens mirror website-v2 dataripple-new.css (Ubuntu / Ubuntu Mono, red
   #CC0C1F, navy #1B2433 family, surface #eef2f6); chrome descends from the
   #1455 "Control Room" prototype; tone system from the payout leaderboard.
   Desktop-first 1440x900, full dark mode, reduced-motion respected.

   Type scale (product register): 20 / 16 / 13.5 / 13 / 11.5 / 10.5.
   Mono is for NUMBERS and code only. Motion: 180ms ease-out-quart. */
:root{
  --paper:#eef2f6; --card:#ffffff; --card-2:#f6f8fb; --card-3:#eef2f7;
  --ink:#141a21; --ink-2:#47535f; --ink-3:#68737f;
  --line:#dde4eb; --line-2:#eaeef3;
  --navy:#1b2433; --navy-2:#243044; --navy-deep:#0b1220;
  --brand:#cc0c1f; --brand-2:#a50a18; --orange:#e65328; --bluebrand:#5189ad;
  --green:#1a8a4d; --green-bg:#e4f5ec; --amber:#b06f14; --amber-bg:#faedda;
  --red:#c62828; --red-bg:#fbe6e6; --blue:#2a63bb; --blue-bg:#e2ecfb;
  --purple:#6b4c9a; --purple-bg:#ece5f6;
  --ahead:#1a8a4d; --watch:#b06f14; --behind:#cc0c1f;
  --shadow:0 1px 2px rgba(20,26,33,.05),0 6px 20px rgba(20,26,33,.06);
  --shadow-lift:0 3px 8px rgba(20,26,33,.09),0 12px 32px rgba(20,26,33,.11);
  --mono:"Ubuntu Mono","Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --sans:"Ubuntu",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --z-sticky:30; --z-backdrop:60; --z-drawer:61; --z-tip:70;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0e131a; --card:#161d27; --card-2:#111823; --card-3:#1b2530;
  --ink:#e8edf2; --ink-2:#b2bdc9; --ink-3:#7f8a97;
  --line:#28323e; --line-2:#1f2833; --navy:#0b0f15; --navy-2:#161d27;
  --green:#4cc487; --green-bg:#12301f; --amber:#e0a54a; --amber-bg:#2f2410;
  --red:#e5766a; --red-bg:#2c1917; --blue:#7ba2e8; --blue-bg:#16233c;
  --purple:#a98fd0; --purple-bg:#241d33;
  --ahead:#4cc487; --watch:#e0a54a; --behind:#e5766a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.32);
  --shadow-lift:0 3px 8px rgba(0,0,0,.5),0 14px 36px rgba(0,0,0,.45);
}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;text-wrap:balance}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.ic{width:15px;height:15px;flex:none;vertical-align:-2.5px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ================= chrome - faithful RippleCore shell =================
   Recreated from website-v2 app.css (.rc-app grid, .rc-side #1B2433,
   .rc-topbar, .rc-home-aibar). Chrome stays dark in BOTH themes (real
   --shell-glass behaviour); only the content area flips light/dark.
   The blue OPS badge on the logo marks it as the internal onboarding view. */
:root{--ops:#4a90e2;--shell:#1b2433;--shell-rule:rgba(255,255,255,.08);
  --shell-fg:rgba(255,255,255,.64);--shell-dim:rgba(255,255,255,.4);
  --shell-hover:rgba(255,255,255,.08);--shell-active:rgba(255,255,255,.13)}
.rc-app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
.rc-side{background:var(--shell);display:flex;flex-direction:column;overflow-y:auto;border-right:1px solid var(--shell-rule)}
.rc-brand{display:flex;align-items:center;gap:9px;padding:16px 18px 13px;border-bottom:1px solid var(--shell-rule);flex:none}
.rc-brand img{height:28px;width:auto;object-fit:contain;object-position:left center}
.rc-brand .ops{font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--ops);border-radius:5px;padding:2px 7px}
/* Which local database am I in? Sits directly under the wordmark so it is in
   eyeline on every screen. Localhost only (rc.js datasetBar). */
.rc-dataset{display:flex;align-items:center;gap:8px;padding:9px 18px;border-bottom:1px solid var(--shell-rule);flex:none;
  text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.06em;transition:background .15s var(--ease)}
.rc-dataset .dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.rc-dataset .lbl{flex:1;min-width:0}
.rc-dataset .swap{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--shell-dim);opacity:0;transition:opacity .15s var(--ease)}
.rc-dataset:hover{background:var(--shell-hover)}
.rc-dataset:hover .swap{opacity:1}
.rc-dataset.pending{color:var(--shell-dim);opacity:.5}
.rc-dataset.demo{color:var(--shell-dim)}
/* Unknown is LOUD on purpose - an unlabelled worker must never read as demo. */
.rc-dataset.unknown{color:#ffc857;background:rgba(255,200,87,.14);cursor:default}
.rc-dataset.inframark{color:#ff6b78;background:rgba(204,12,31,.16)}
.rc-dataset.inframark:hover{background:rgba(204,12,31,.26)}
.rc-nav{padding:10px 10px 20px;flex:1}
.rc-nav-section{margin-top:15px}
.rc-nav-section:first-child{margin-top:4px}
.rc-nav-label{display:flex;align-items:center;gap:6px;width:100%;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--shell-dim);padding:5px 12px 7px 3px;background:none;border:0;cursor:pointer;text-align:left;border-radius:6px;transition:color .15s var(--ease)}
.rc-nav-label:hover{color:var(--shell-fg)}
.rc-nav-label-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-nav-label .sec-chev{margin-left:auto;width:12px;height:12px;opacity:.55;transition:transform .18s var(--ease)}
.rc-nav-section.collapsed .sec-chev{transform:rotate(-90deg)}
.rc-nav-section.collapsed .rc-nav-items{display:none}
/* Section drag handle: reserves its width always (so nothing jumps on hover) and
   fades in when the header is hovered. The Favorites header carries a same-width
   .is-anchor spacer instead - it is a fixed top zone and never reorders. */
.rc-nav-sec-grip{flex:none;width:15px;height:15px;display:flex;align-items:center;justify-content:center;color:var(--shell-dim);cursor:grab;opacity:0;transition:opacity .15s var(--ease)}
.rc-nav-sec-grip:active{cursor:grabbing}
.rc-nav-sec-grip.is-anchor{cursor:default}
.rc-nav-sec-grip .grip{width:10px;height:10px;display:block}
.rc-nav-label:hover .rc-nav-sec-grip:not(.is-anchor){opacity:.5}
.rc-nav-sec-grip:hover{opacity:.9}
.rc-nav-section.sec-dragging{opacity:.4}
/* One nav row = the link (still the whole-row click target) + its own pin
   button. The highlight and the drag live on the ROW, so hover and `on` span the
   full width now that the star is a real control beside the link rather than an
   svg inside it. user-select:none keeps a drag from selecting the label text. */
.rc-nav-row{display:flex;align-items:center;border-radius:8px;user-select:none;transition:background .15s var(--ease)}
.rc-nav-row:hover{background:var(--shell-hover)}
.rc-nav-row.on{background:var(--shell-active)}
.rc-nav-row:hover .rc-nav-btn,.rc-nav-row.on .rc-nav-btn{color:#fff}
.rc-nav-row.on .rc-nav-btn .ic{opacity:1}
.rc-nav-row.dragging{opacity:.4}
/* Item drag handle: same reveal-on-hover as the pin, reserves its width so the
   row never jumps. Grabbing the grip (not the link) is what starts a reorder. */
.rc-nav-grip{flex:none;width:15px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--shell-dim);cursor:grab;opacity:0;transition:opacity .15s var(--ease)}
.rc-nav-grip:active{cursor:grabbing}
.rc-nav-grip .grip{width:11px;height:11px;display:block}
.rc-nav-row:hover .rc-nav-grip{opacity:.4}
.rc-nav-grip:hover{opacity:.9}
.rc-nav-btn{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:9px 4px 9px 3px;background:transparent;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:13px;color:var(--shell-fg);text-align:left;text-decoration:none;transition:color .15s var(--ease)}
.rc-nav-btn .ic{width:17px;height:17px;flex:none;opacity:.85;color:currentColor}
.rc-nav-btn .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The pin is invisible until you hover the row, focus it, or the item IS
   pinned - eleven gold stars is not a resting state. Opacity rather than
   visibility so it stays focusable and announced. */
.rc-nav-pin{flex:none;width:26px;height:30px;margin-right:4px;padding:0;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:6px;cursor:pointer;color:var(--shell-dim);opacity:0;transition:opacity .15s var(--ease),color .15s var(--ease)}
.rc-nav-pin .star{width:12px;height:12px;display:block}
.rc-nav-row:hover .rc-nav-pin{opacity:.5}
.rc-nav-pin:hover,.rc-nav-pin:focus-visible{opacity:1;color:#e0b23c}
.rc-nav-row.pinned .rc-nav-pin{opacity:1;color:#e0b23c}
.rc-main{display:flex;flex-direction:column;min-width:0;height:100vh;background:var(--paper)}
.rc-topbar{display:flex;align-items:center;gap:16px;padding:11px 22px;background:var(--shell);border-bottom:1px solid var(--shell-rule);flex:none;z-index:var(--z-sticky)}
.rc-tb-crumb{font-size:12.5px;color:var(--shell-fg);white-space:nowrap}
.rc-tb-crumb b{color:#fff;font-weight:600}
/* local-only "back to the product" toggle (paired with the Inframark Ops nav item in the 6161 shell) */
.rc-back6161{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--shell-fg);text-decoration:none;padding:6px 12px 6px 9px;border-radius:8px;border:1px solid var(--shell-rule);white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.rc-back6161:hover{background:rgba(255,255,255,.08);color:#fff;border-color:transparent}
.rc-back6161 .ic{width:15px;height:15px}
/* White bar in the navy topbar, matching the product's Ask Ripple. Hardcoded
   white + dark ink (not var tokens) because the topbar chrome is navy in BOTH
   themes, so the bar must stay white in dark mode too. */
.rc-aibar{width:min(560px,42vw);height:38px;margin:0 auto;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.55);
  border-radius:10px;padding:0 12px;background:#fff;color:#141a21;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:background .18s var(--ease)}
.rc-aibar:hover{background:#f4f7fa}
.rc-aibar img{height:20px;width:auto}
.rc-aibar .ph{flex:1;text-align:left;color:#141a21}
.rc-aibar .aichev{width:16px;height:16px;flex:none;color:#68737f}
.rc-tb-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.rc-iconbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;color:rgba(255,255,255,.6);cursor:pointer;position:relative;transition:background .15s var(--ease),color .15s var(--ease)}
.rc-iconbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.rc-iconbtn .ic{width:18px;height:18px}
.rc-user{height:34px;display:inline-flex;align-items:center;gap:8px;padding:3px 11px 3px 3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;cursor:pointer;color:#fff}
.rc-user .av{width:27px;height:27px;border-radius:50%;background:var(--ops);display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px}
.rc-user .un{font-size:12px;font-weight:600}
.rc-user .ic{width:13px;height:13px;color:rgba(255,255,255,.6)}
#content{flex:1;overflow-y:auto;padding:20px 24px 48px;min-width:0}
.rc-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);background:var(--navy);color:#eef2f6;font-size:12.5px;font-weight:600;
  padding:10px 18px;border-radius:999px;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;z-index:var(--z-tip);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.rc-toast.show{opacity:1;transform:translate(-50%,0)}
.rc-toast{display:flex;align-items:center;gap:12px}.rc-toast-act{border:0;background:transparent;color:#fff;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0;pointer-events:auto}

.pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pg-head h1{font-size:20px;font-weight:700}
.pg-head .s{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.pg-head .ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ================= controls ================= */
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:13px;font-weight:600;height:34px;
  padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;
  text-decoration:none;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.b:hover{border-color:var(--ink-3);color:var(--ink)}
.b.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.b.pri:hover{background:var(--brand-2);border-color:var(--brand-2)}
.b.ghost{border-color:transparent;background:transparent}
.b.ghost:hover{background:var(--card-3);border-color:transparent}
.b.sm{height:28px;padding:0 11px;font-size:12px;border-radius:7px}
.b:disabled{opacity:.5;cursor:default}
.slicer{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.slicer button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border:0;border-radius:6px;color:var(--ink-3);background:transparent;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.slicer button:hover{color:var(--ink)}
.slicer button.on{background:var(--brand);color:#fff}
.switch{display:flex;gap:8px;flex-wrap:wrap}
.switch button{border:1px solid var(--line);background:var(--card);color:var(--ink-2);height:34px;padding:0 15px;border-radius:9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;transition:all .18s var(--ease)}
.switch button:hover{border-color:var(--ink-3);color:var(--ink)}
.switch button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ================= stat strip (replaces kpi cards) ================= */
.statstrip{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.stat{position:relative;padding:14px 18px 13px;min-width:0;text-align:left;border:0;background:none;font:inherit;color:inherit}
.stat + .stat{border-left:1px solid var(--line-2)}
.stat .l{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.stat .l .sdot{width:7px;height:7px;border-radius:50%;flex:none}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:23px;font-weight:700;margin-top:5px;letter-spacing:-.01em;line-height:1.15}
.stat .v small{font-size:13px;color:var(--ink-3);font-weight:600}
.stat .d{font-size:11px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat.good .v{color:var(--green)} .stat.warn .v{color:var(--amber)} .stat.hot .v{color:var(--red)}
.stat.click{cursor:pointer;transition:background .18s var(--ease)}
.stat.click:hover{background:var(--card-2)}
.stat.click::after{content:"";position:absolute;top:13px;right:12px;width:6px;height:6px;border-top:1.5px solid var(--ink-3);
  border-right:1.5px solid var(--ink-3);transform:rotate(45deg);opacity:0;transition:opacity .18s var(--ease)}
.stat.click:hover::after{opacity:1}
/* active preset filter (Vendors stat strip): tinted, brand top-accent, filled dot */
/* wave forecast rows (Efficiency > Forecast) - projected vs target */
.fcpace{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);background:var(--card-2);border-radius:10px;padding:10px 13px;margin-bottom:14px}
.fcpace .ic{width:16px;height:16px;flex:none;color:var(--brand)}
.fcpace b{color:var(--ink)}
.wfrow{display:grid;grid-template-columns:190px 1fr 130px;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line-2)}
.wfrow:last-child{border-bottom:0}
.wftrack{position:relative;height:26px;background:var(--card-3);border-radius:7px;overflow:hidden;display:flex;align-items:center}
.wftrack>i{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
.wftrack>i.done,.wftrack>i.go{background:var(--green)}
.wftrack>i.risk{background:var(--amber)}
.wftrack>i.no{background:var(--red)}
.wftrack>b{position:relative;z-index:1;font-family:var(--mono);font-size:11.5px;color:var(--ink);padding-left:9px}
/* conversion funnel rows (Efficiency > Funnel) - cumulative reached bars */
.fnrow{display:grid;grid-template-columns:170px 1fr 120px;gap:12px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line-2)}
.fnrow:last-child{border-bottom:0}
.fnlab{font-size:12.5px;font-weight:650}
.fnbar{position:relative;height:26px;background:var(--card-3);border-radius:7px;overflow:hidden;display:flex;align-items:center}
.fnbar>i{position:absolute;left:0;top:0;bottom:0;background:var(--navy-2);border-radius:7px}
.fnbar>b{position:relative;z-index:1;font-family:var(--mono);font-size:12px;color:#fff;padding-left:9px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.fnrow.leak .fnbar>i{background:var(--brand)}
.fndrop{font-size:12px;text-align:right;font-family:var(--mono)}
.stat.on{background:var(--card-2);box-shadow:inset 0 2px 0 var(--brand)}
.stat.on .l{color:var(--brand)}
.stat.click.on::after{opacity:1;top:14px;width:7px;height:7px;border:0;border-radius:50%;background:var(--brand);transform:none}

/* ================= cards / layout ================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.card .ch{padding:14px 18px 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card .ch h2{font-size:13.5px;font-weight:700}
.card .ch .hint{font-size:11.5px;color:var(--ink-3)}
.card .cb{padding:12px 18px 16px}
.split{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.stack{display:grid;gap:16px;align-content:start}

/* ================= tables ================= */
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t th.r,table.t td.r{text-align:right}
table.t td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .15s var(--ease)}
table.t tbody tr:hover td{background:var(--card-2)}
table.t tbody tr.rowlink{cursor:pointer}
/* sortable, centered column headers (click to sort asc/desc) */
table.t th.so,table.t th.soff{text-align:center;white-space:nowrap}
table.t th.so{cursor:pointer;user-select:none;transition:color .15s var(--ease)}
table.t th.so:hover{color:var(--ink)}
table.t th.so .sar{display:inline-block;margin-left:4px;font-size:9px;opacity:.35}
table.t th.so.act{color:var(--brand)}
table.t th.so.act .sar{opacity:1}
td.money,th.money{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.neg{color:var(--red);font-weight:700}
.pos{color:var(--green);font-weight:700}

/* ================= chips / tones / avatars ================= */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:650;white-space:nowrap;vertical-align:1px}
.chip.green{background:var(--green-bg);color:var(--green)}
.chip.amber{background:var(--amber-bg);color:var(--amber)}
.chip.red{background:var(--red-bg);color:var(--red)}
.chip.blue{background:var(--blue-bg);color:var(--blue)}
.chip.gray{background:var(--card-3);color:var(--ink-2)}
.tone{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:11px;font-weight:700}
.tone::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tone.ahead{background:var(--green-bg);color:var(--ahead)}
.tone.watch{background:var(--amber-bg);color:var(--watch)}
.tone.behind{background:var(--red-bg);color:var(--behind)}
.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px;flex:none}
.avatar.sm{width:22px;height:22px;font-size:9.5px}
.rep{display:flex;align-items:center;gap:10px;min-width:0}
.rep .nm{font-weight:650;font-size:13px}
.rep .rl{font-size:11px;color:var(--ink-3);margin-top:1px}

/* ================= attainment / capacity bars ================= */
.att{position:relative;min-width:150px}
.att .bar{height:8px;border-radius:999px;background:var(--card-3);overflow:hidden}
.att .bar i{display:block;height:100%;border-radius:999px;transition:width .4s var(--ease)}
.att .pace{position:absolute;top:-3px;height:14px;width:2px;background:var(--ink-2);border-radius:1px}
.att .lab{font-size:10.5px;color:var(--ink-3);margin-top:4px}

/* ================= funnel rows ================= */
.frow{display:grid;grid-template-columns:130px 1fr 74px;gap:12px;align-items:center;padding:5px 0}
.frow .fn{font-size:12.5px;color:var(--ink-2);font-weight:600}
.frow .fb{height:20px;border-radius:6px;background:var(--card-3);overflow:hidden}
.frow .fb i{display:block;height:100%;background:var(--navy-2);border-radius:6px;min-width:2px;transition:width .4s var(--ease)}
.frow.hot .fb i{background:linear-gradient(90deg,var(--orange),var(--brand))}
.frow.win .fb i{background:linear-gradient(90deg,#27ae60,var(--green))}
.frow .fc{font-size:12.5px;text-align:right;white-space:nowrap}
.frow .fc b{font-family:var(--mono);font-size:13.5px}
.frow .fc span{color:var(--ink-3);font-size:11px}
.frow.zero .fb i{display:none}
.frow.zero .fn,.frow.zero .fc{opacity:.45}

/* ================= right-rail panels ================= */
.rp{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.rp h5{font-size:12px;font-weight:700;color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:7px}
.rp h5 .ic{color:var(--ink-3)}
.rp h5 .count{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-2);background:var(--card-3);border-radius:999px;padding:1px 8px}
.rp .sr{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.rp .sr:last-child{border:0}
.rp .sr .sv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}

/* ================= tasks ================= */
.tg h3{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);margin:20px 0 9px}
.tg h3 .ic{color:var(--ink-3)}
.tg h3 .count{font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--card-3);border-radius:999px;padding:1px 8px;font-weight:700}
.task{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 16px;margin-bottom:8px;box-shadow:var(--shadow);transition:box-shadow .18s var(--ease)}
.task:hover{box-shadow:var(--shadow-lift)}
.task .tico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.task .tico .ic{width:16px;height:16px}
.task .tico.confirm{background:var(--red-bg);color:var(--red)}
.task .tico.stall{background:var(--amber-bg);color:var(--amber)}
.task .tico.checkin{background:var(--green-bg);color:var(--green)}
.task .tico.resched{background:var(--blue-bg);color:var(--blue)}
.task .tw{flex:0 0 62px;text-align:center}
.task .tw b{display:block;font-size:14px;font-family:var(--mono)}
.task .tw span{font-size:10.5px;color:var(--ink-3)}
.task .tm{flex:1;min-width:0}
.task .tm b{font-size:13.5px}
.task .tm .ts{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.task .tm .tel{font-family:var(--mono);font-size:12px;color:var(--blue);text-decoration:none}
.task .ta{display:flex;gap:7px}

/* ================= stage ladder ================= */
.ladder{display:flex;margin:8px 0 4px}
.ladder .step{flex:1;text-align:center;position:relative;padding-top:19px}
.ladder .step::before{content:'';position:absolute;top:7px;left:0;right:0;height:3px;background:var(--line)}
.ladder .step:first-child::before{left:50%}
.ladder .step:last-child::before{right:50%}
.ladder .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--card);border:3px solid var(--line);z-index:1}
.ladder .step.done .dot{background:var(--green);border-color:var(--green)}
.ladder .step.done::before{background:var(--green)}
.ladder .step.now .dot{background:var(--card);border-color:var(--brand);box-shadow:0 0 0 4px var(--red-bg)}
.ladder .step.now .sn{color:var(--brand);font-weight:700}
.ladder .sn{font-size:10.5px;color:var(--ink-3);font-weight:600;line-height:1.3;padding:0 2px}

/* ================= timeline ================= */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.tl li:last-child{border:0}
.tl .tic{flex:0 0 28px;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--card-3);color:var(--ink-2)}
.tl .tic .ic{width:14px;height:14px}
.tl .tic.sys{background:var(--blue-bg);color:var(--blue)}
.tl .tic.warn{background:var(--amber-bg);color:var(--amber)}
.tl .tic.bad{background:var(--red-bg);color:var(--red)}
.tl .tic.ok{background:var(--green-bg);color:var(--green)}
.tl .tt{font-size:13px;font-weight:600;line-height:1.4}
.tl .tm2{font-size:11px;color:var(--ink-3);margin-top:2px}
.tl .tm2 .num{font-size:11px}

/* ================= centered modal (product .pb-modal pattern) ================= */
.rc-modal{position:fixed;inset:0;z-index:var(--z-backdrop);display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(11,18,32,.5);opacity:0;transition:opacity .18s var(--ease)}
@media (prefers-color-scheme:dark){.rc-modal{background:rgba(4,7,12,.62)}}
.rc-modal.show{opacity:1}
.rc-modal-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;width:min(560px,94vw);max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.4);
  transform:translateY(12px) scale(.98);transition:transform .2s var(--ease)}
.rc-modal.show .rc-modal-panel{transform:none}
.rc-modal .dh{padding:16px 20px 13px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.rc-modal .dh h3{font-size:16px;font-weight:700}
.rc-modal .dh .ds{font-size:12px;color:var(--ink-3);margin-top:3px}
.rc-modal .dh .x{margin-left:auto;border:0;background:var(--card-2);border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--ink-2);flex:none;display:flex;align-items:center;justify-content:center;transition:background .18s var(--ease)}
.rc-modal .dh .x:hover{background:var(--card-3);color:var(--ink)}
.rc-modal .dh .x .ic{width:15px;height:15px}
.rc-modal .db{padding:8px 20px 20px;overflow-y:auto;flex:1}
.rc-modal .dr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px;text-decoration:none;color:var(--ink)}
.rc-modal .dr:last-child{border-bottom:0}
.rc-modal .dr:hover .drn{color:var(--brand)}
.rc-modal .dr .drn{font-weight:650;min-width:0;transition:color .15s var(--ease)}
.rc-modal .dr .drs{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.rc-modal .dr .drv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.rc-modal .dact{display:flex;gap:8px;margin-top:16px}
/* A .dr rendered as a button (in-place drill instead of a page navigation). */
.rc-modal button.dr{width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;text-align:left;cursor:pointer}
.ic.flip{transform:scaleX(-1)}
.ic.up{transform:rotate(180deg)}
/* Drill targets ([data-vendor]/[data-specialist]) are <button> for keyboard +
   a11y, but must keep the visual of the row/chip they replaced. */
button[data-vendor],button[data-specialist]{font:inherit;color:inherit;background:none;border:0;text-align:left;cursor:pointer}
/* Components that paint themselves keep their own fill - the reset above only
   strips the UA button chrome. */
button.tchip{background:var(--card);border:1px solid var(--line)}
button.tvtchip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
button.tvdc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
button.hrow{width:100%;border-bottom:1px solid var(--line-2)}
button.hrow:last-child{border-bottom:0}
button.caprow,button.ti,button.tvcap{width:100%}
button[data-vendor]:hover,button[data-specialist]:hover{filter:brightness(1.06)}
button.hrow:hover,button.caprow:hover{background:var(--card-2)}
button[data-vendor]:focus-visible,button[data-specialist]:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* a drill target sitting inside a clickable row (e.g. specialist name in the
   over-model table) - reads as text, drills on its own */
.cellbtn{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.cellbtn:hover{color:var(--brand);text-decoration:underline}
.cellbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* time-log audit: flagged rows + the switcher badge */
.flagdot{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;font-family:var(--mono);vertical-align:middle}
table.t tbody tr.flagrow td{background:var(--red-bg)}
table.t tbody tr.flagrow:hover td{background:var(--red-bg);filter:brightness(.98)}
.tlbanner{display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--amber-bg);border:1px solid var(--amber);color:var(--amber);text-decoration:none;font-size:13px;line-height:1.35;transition:filter .12s}
.tlbanner:hover{filter:brightness(.97)}
.tlbanner .ic{flex:0 0 auto;width:18px;height:18px}
.tlbanner b{color:var(--ink)}
.tlbanner .tlgo{margin-left:auto;flex:0 0 auto;font-weight:800;white-space:nowrap}
/* Shared vendor pop-out: log ad-hoc time + delete a mistaken entry. Home for
   these classes; studio.html has an inline mirror scoped to its own page. */
.vtimelog{margin-top:10px}
.vtl-lab{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin:0 0 7px}
.vtl-kind{width:100%;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);margin-bottom:11px}
.vtl-kind:focus{outline:none;border-color:var(--brand)}
.quickmins{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.qm{font:inherit;font-size:13px;font-weight:700;font-family:var(--mono);min-width:48px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);cursor:pointer;transition:all .13s var(--ease)}
.qm:hover{border-color:var(--brand);color:var(--brand)}
.qm:active{transform:scale(.96)}
.qm.on{background:var(--brand);border-color:var(--brand);color:#fff}
.qmother input{width:76px;font:inherit;font-size:13px;font-family:var(--mono);padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink)}
.qmother input:focus{outline:none;border-color:var(--brand)}
.recentt{margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px}
.rth{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.rtrow{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.rtk{flex:1;color:var(--ink-2)}
.rtm{font-family:var(--mono);font-weight:700;color:var(--ink)}
.rtdel{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink-3);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.rtdel:hover{border-color:var(--red);color:var(--red)}
.rtdel .ic{width:12px;height:12px}

/* ---- shared vendor detail pop-out (Vendors, Overview, War Room, TV, Efficiency).
   One rendering everywhere - see RC.vendorModal in rc.js. ---- */
.rc-modal-panel.vwide{width:min(960px,95vw)}
.vdetail-na{display:flex;align-items:center;gap:11px;border-radius:11px;padding:12px 15px;margin:2px 0 6px;font-size:13.5px}
.vdetail-na .ic{width:20px;height:20px;flex:none}
.vdetail-na .nal{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;opacity:.75}
.vdetail-na.tone-red{background:var(--red-bg);color:var(--red)}
.vdetail-na.tone-amber{background:var(--amber-bg);color:var(--amber)}
.vdetail-na.tone-blue{background:var(--blue-bg);color:var(--blue)}
/* vendor health readout in the shared pop-out (hidden for exempt vendors) */
.vhealth{margin:4px 0 6px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--card-2)}
.vh-top{display:flex;align-items:center;gap:10px}
.vh-score{font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:-.01em}
.vh-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.vh-bar{flex:1;height:7px;border-radius:999px;background:var(--card-3);overflow:hidden}
.vh-bar i{display:block;height:100%;border-radius:999px}
.vh-factors{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.vh-f{font-size:11px;color:var(--ink-2);background:var(--card-3);border-radius:6px;padding:2px 8px}
.vh-f b{font-family:var(--mono);color:var(--red)}
.vdetail-na.tone-green{background:var(--green-bg);color:var(--green)}
.vdetail-na.tone-gray{background:var(--card-3);color:var(--ink-2)}
.vdetail-na b{font-size:14px}
.vattrs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin:16px 0 4px}
.vattr{background:var(--card);padding:11px 14px}
.vattr .ak{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:650}
.vattr .av{font-size:13.5px;font-weight:600;margin-top:3px}
.vdetail-jh{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin:18px 0 4px}
.vdetail-jh .ic{width:14px;height:14px;color:var(--ink-3)}
.rc-modal .empty{padding:34px 20px}

/* ================= shared navy hero (Task Queue + Overview - the two pages
   open identically: avatar + greeting + summary, ring, right CTA cluster) ================= */
.md-hero{background:linear-gradient(135deg,var(--navy) 0%,#2a3850 100%);border-radius:14px;color:#dce3ec;padding:18px 24px;margin-bottom:16px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;min-height:146px;box-sizing:border-box}
.md-hero h1{color:#fff;font-size:19px}
.md-hero .hs{font-size:12.5px;color:#b9c4d2;margin-top:4px;max-width:76ch}
.md-hero .hs b{color:#fff}
.md-hero .ring{margin-left:auto;display:flex;align-items:center;gap:14px}
.md-hero .ring svg{display:block}
.md-hero .ring .rn{font-family:var(--mono);font-size:13px;font-weight:800;color:#fff}
.md-hero .ring .rl{font-size:10.5px;color:#8d9aac}
.md-hero .hcta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding-left:20px;border-left:1px solid rgba(255,255,255,.14);margin-left:8px}
.md-hero .hcta .hint2{font-size:10.5px;color:#8d9aac;text-align:right;max-width:190px}
.statuschip{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em}
.statuschip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.statuschip.ahead{background:rgba(76,196,135,.15);color:#5fd598}
.statuschip.on_track{background:rgba(123,162,232,.15);color:#9db9ef}
.statuschip.behind{background:rgba(229,118,106,.18);color:#f09489}
.statuschip.not_started{background:rgba(255,255,255,.1);color:#aeb9c6}

.prog{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px 14px;box-shadow:var(--shadow);margin-bottom:16px;transition:box-shadow .18s var(--ease)}
.prog.click{cursor:pointer}
.prog.click:hover{box-shadow:var(--shadow-lift)}
.prog .pt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.prog .pt .big{font-family:var(--mono);font-size:26px;font-weight:800}
.prog .pt .big small{font-size:13.5px;color:var(--ink-3);font-weight:600;font-family:var(--sans)}
.prog .pt .side{font-size:12.5px;color:var(--ink-2)}
.prog .track{position:relative;height:18px;border-radius:999px;background:var(--card-3);margin-top:26px}
.prog .track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#27ae60,var(--green));min-width:6px;transition:width .5s var(--ease)}
.prog .track .exp{position:absolute;top:-6px;bottom:-6px;width:2.5px;background:var(--ink);border-radius:2px}
.prog .track .exp .flag{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;
  font-size:10px;font-weight:700;color:var(--ink-2);background:var(--card-3);border-radius:5px;padding:1px 7px;white-space:nowrap}
.prog .track .tick{position:absolute;top:100%;width:1px;height:5px;background:var(--line);margin-top:1px}
.prog .pl{position:relative;height:16px;margin-top:8px;font-size:10.5px;color:var(--ink-3)}
.prog .pl span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.prog .pl span:first-child{transform:none}
.prog .pl span:last-child{transform:translateX(-100%)}

/* ================= agenda coverage (Studio checklist + Floor readout) =================
   The specialist ticks these live in the Studio; the lead reads coverage on the
   Floor. Shared so both surfaces render identical rows. */
.agenda{display:flex;flex-direction:column;gap:2px}
.agrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--ink-2);
  background:none;border:0;padding:8px 4px;cursor:pointer;border-radius:8px;transition:background .12s var(--ease)}
.agrow:hover{background:var(--card-2)}
.agrow .agbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s var(--ease)}
.agrow .agbox .ic{width:12px;height:12px;color:#fff;opacity:0}
.agrow.done{color:var(--ink);font-weight:600}
.agrow.done .agbox{background:var(--green);border-color:var(--green)}
.agrow.done .agbox .ic{opacity:1}
.agrow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.agrow{flex:1;min-width:0}
.agline{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* #10 Session Runbook - per-item coaching, collapsed until a specialist asks */
.agcoach{flex:none;font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-3);background:var(--card-3);border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;transition:.13s var(--ease)}
.agcoach:hover{border-color:var(--brand);color:var(--brand)}
.agcoach.on{background:var(--brand);border-color:var(--brand);color:#fff}
.runbook{flex-basis:100%;margin:2px 0 8px 28px;padding:10px 12px;background:var(--card-2);border-radius:9px;border-left:2px solid var(--line)}
.rbrow{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.rbrow .rbl{flex:none;width:64px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.rbrow .rbt{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.rb-say .rbl{color:var(--blue)} .rb-watch .rbl{color:var(--amber)} .rb-path .rbl{color:var(--green)}
.agtag{margin-left:8px;font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--blue);background:var(--blue-bg);border-radius:4px;padding:1px 6px}
.agrm{width:26px;height:26px;flex:none;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.agrm:hover{border-color:var(--red);color:var(--red)}
.agrm .ic{width:12px;height:12px}
.agadd-row{display:flex;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.agadd-row input{flex:1;font:inherit;font-size:12.5px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.agadd-row input:focus{outline:none;border-color:var(--brand)}

/* the Floor's read-only coverage: labelled chips that wrap when there's room */
.agcov{display:flex;flex-direction:column;gap:5px;min-width:0;margin-top:2px}
.agcov .agn{font-size:11px;color:var(--ink-3);white-space:nowrap}
.agcov .agn b{color:var(--ink-2);font-family:var(--mono)}
.agcov .agitems{display:flex;flex-wrap:wrap;gap:5px}
.agchip{display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1.3;padding:2px 8px;border-radius:999px;
  background:var(--card-3);color:var(--ink-3);border:1px solid var(--line-2)}
.agchip .ic{width:11px;height:11px}
.agchip.on{background:var(--green-bg);color:var(--green);border-color:transparent;font-weight:600}
.agchip.one{border-style:dashed;border-color:var(--blue)}
.agchip.one.on{border-style:solid}

/* ================= overview: THE FLOOR (live sessions, concept C3) ================= */
.fhead{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.fhead h2{font-size:15px}
.fhead .sub{font-size:12px;color:var(--ink-3);margin-top:3px;max-width:76ch;line-height:1.55}
.fkpis{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.fk .n{font-family:var(--mono);font-size:24px;font-weight:800;line-height:1}
.fk .n.red{color:var(--red)}
.fk .k{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

.fstrips{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.fstrip{display:grid;grid-template-columns:86px 132px 200px 1fr 132px;gap:14px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-left-width:4px;border-radius:12px;padding:12px 16px;box-shadow:var(--shadow)}
@media (max-width:1250px){.fstrip{grid-template-columns:86px 132px 1fr;row-gap:10px}}
.fstate{font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:5px;padding:3px 7px;text-align:center}
/* the strip's action row spans every column */
.factions{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2)}
.factions .b{height:30px}
.factions .b .soon{margin-left:7px}

/* "PHASE 2" pill - the honest gate on a control that is deliberately not wired
   yet. Shared: Settings uses it on the calendar connects, the Floor on whisper/
   join/coach. A gated control must SAY why, never silently no-op. */
.soon{font-size:9px;font-weight:800;letter-spacing:.05em;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber);border-radius:5px;padding:1px 6px}

/* note textarea (vendor log-note, floor follow-up) */
.vnote{width:100%;min-height:64px;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);resize:vertical}
.vnote:focus{outline:none;border-color:var(--brand)}
.fstate.on{background:var(--red);color:#fff}
.fstate.un{background:var(--card-3);color:var(--ink-2);border:1px solid var(--line)}
.fstrip.flag{border-left-color:var(--red);background:var(--red-bg)}
.fstrip.watch{border-left-color:var(--amber)}
.fstrip.good{border-left-color:var(--green)}
.fstrip .fwho,.fstrip .fvend{display:flex;align-items:center;gap:9px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0;min-width:0}
.fstrip .fwho:disabled{cursor:default;opacity:.75}
.fstrip .fwho b,.fstrip .fvend b{font-size:13px;display:block;line-height:1.25}
.fstrip .fwho span span,.fstrip .fvend span{font-size:10.5px;color:var(--ink-3);display:block}
.fstrip .fvend{flex-direction:column;align-items:flex-start;gap:1px}
.fstrip .fvend:hover b,.fstrip .fwho:hover b{color:var(--brand)}
.fstrip .fwhy{display:flex;flex-direction:column;gap:3px;min-width:0}
.fstrip .fr{font-size:12px;color:var(--ink-2);line-height:1.45}
.fstrip .fr b{color:var(--ink)}
.fstrip .fr.sev2{color:var(--red)}.fstrip .fr.sev2 b{color:var(--red)}
.fstrip .fr.sev1{color:var(--amber)}.fstrip .fr.sev1 b{color:var(--amber)}
.fstrip .ftime{text-align:right}
.fstrip .ftime .t{font-family:var(--mono);font-size:17px;font-weight:800}
.fstrip .ftime .t.over{color:var(--red)}
.fstrip .ftime .k{font-size:10px;color:var(--ink-3)}
.fstrip .fbar{height:5px;border-radius:99px;background:var(--card-3);overflow:hidden;margin-top:6px}
.fstrip .fbar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width 1s linear}

.fempty{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:40px 30px;text-align:center;margin-bottom:16px}
.fempty .big{width:52px;height:52px;border-radius:50%;background:var(--green-bg);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 13px}
.fempty .big .ic{width:26px;height:26px}
.fempty h2{font-size:16px}
.fempty p{font-size:12.5px;color:var(--ink-3);margin-top:6px}

.ftrack{position:relative;height:52px;margin-top:4px}
.fline{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
.fblk{position:absolute;top:3px;height:14px;border-radius:4px;background:var(--blue-bg);border:1px solid var(--blue)}
.fblk.done{background:var(--green-bg);border-color:var(--green)}
.fblk.ns{background:var(--card-3);border-color:var(--line);opacity:.7}
.fblk.unres{background:var(--amber-bg);border-color:var(--amber);border-style:dashed}
.fblk.live{background:var(--red);border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.fnow{position:absolute;top:-1px;height:22px;width:2px;background:var(--red)}
.fnow span{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:8px;font-weight:800;padding:1px 6px;border-radius:4px}
.flab{position:absolute;top:26px;font-size:10px;color:var(--ink-3);font-family:var(--mono)}

/* ================= overview: needs-you + advisor ================= */
.nugroup{margin-bottom:4px}
.nugroup .nh{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--ink-2);margin:14px 0 4px}
.nugroup .nh:first-child{margin-top:2px}
.nugroup .nh .ic{width:13px;height:13px}
.nugroup .nh.danger .ic{color:var(--red)}
.nugroup .nh.warning .ic{color:var(--amber)}
.nurow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line-2);text-decoration:none;color:var(--ink);border-radius:6px;transition:background .15s var(--ease)}
.nurow:hover{background:var(--card-2)}
.nurow:last-child{border-bottom:0}
.nurow .nun{min-width:0;flex:1}
.nurow .nun .t1{font-size:13px;font-weight:650;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nurow .nun .t2{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.nurow .badge{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700;white-space:nowrap}
.nurow .badge.danger{color:var(--red)}
.nurow .badge.warning{color:var(--amber)}
.nurow .go{opacity:0;transition:opacity .15s var(--ease);color:var(--ink-3)}
.nurow:hover .go{opacity:1}
.owner{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-2);background:var(--card-3);border-radius:999px;padding:1px 8px 1px 2px;font-weight:600}
.owner .avatar{width:16px;height:16px;font-size:8px}

.advpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.advpanel .ah{background:var(--navy);color:#fff;padding:11px 16px;display:flex;align-items:center;gap:9px}
.advpanel .ah .ic{color:#9fb0c4}
.advpanel .ah h5{font-size:12.5px;font-weight:700;margin:0}
.advpanel .ah .prov{margin-left:auto;font-size:10.5px;color:#8d9aac;font-weight:500}
.advpanel .ab{padding:6px 16px 14px}
.advrow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.advrow:last-child{border-bottom:0}
.advrow .rank{flex:0 0 22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;font-weight:800;margin-top:1px}
.advrow.act .rank{background:var(--red-bg);color:var(--red)}
.advrow.watch .rank{background:var(--amber-bg);color:var(--amber)}
.advrow.good .rank{background:var(--green-bg);color:var(--green)}
.advrow .at{font-size:13px;font-weight:700;line-height:1.35}
.advrow .ad{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.5;max-width:52ch}
.advrow .aa{margin-top:7px}

/* ================= month chart ================= */
.mstats{display:flex;gap:0;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:14px;background:var(--card-2)}
.mstat{flex:1;padding:10px 14px;min-width:0}
.mstat + .mstat{border-left:1px solid var(--line-2)}
.mstat .l{font-size:11px;font-weight:600;color:var(--ink-3)}
.mstat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;font-weight:700;margin-top:2px}
.mstat .v small{font-size:11px;color:var(--ink-3)}
.chartbox{position:relative}
.chartbox svg{display:block;width:100%;height:auto}
.chartbox .axis{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}
.chartbox .keyline{font-size:10.5px;font-weight:700;fill:var(--ink)}
.chartbox .keyline.mut{fill:var(--ink-3);font-weight:600}
.charttip{position:absolute;pointer-events:none;background:var(--navy);color:#dce3ec;font-size:11px;font-family:var(--mono);
  padding:7px 11px;border-radius:8px;opacity:0;transform:translate(-50%,-118%);white-space:pre;line-height:1.55;z-index:var(--z-tip);transition:opacity .12s}
.legendrow{display:flex;gap:18px;align-items:center;font-size:11.5px;color:var(--ink-2);margin-top:10px;flex-wrap:wrap}
.legendrow .li{display:inline-flex;align-items:center;gap:7px}
.legendrow .swatch{width:16px;height:0;border-top:2.5px solid var(--ink);border-radius:2px}
.legendrow .swatch.dash{border-top-style:dashed;border-top-color:var(--ink-3)}
.legendrow .swatch.dot{border-top-style:dotted;border-top-color:var(--green);border-top-width:3px}

/* ================= calendar ================= */
.cal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr) 96px;background:var(--card-2);border-bottom:1px solid var(--line)}
.cal-head span{padding:9px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.cal-head span.wk{text-align:right;border-left:1px solid var(--line-2)}
.cal-row{display:grid;grid-template-columns:repeat(7,1fr) 96px;border-bottom:1px solid var(--line-2)}
.cal-row:last-child{border-bottom:0}
.day{min-height:116px;padding:7px 8px;border-right:1px solid var(--line-2);position:relative;transition:background .15s var(--ease)}
.day:nth-child(7){border-right:0}
.day.dim .dn,.day.dim .sess{opacity:.4}
.day.wknd{background:var(--card-2)}
.day.holiday{background:var(--amber-bg)}
.day.dead{background:repeating-linear-gradient(-45deg,var(--card-2),var(--card-2) 6px,var(--card-3) 6px,var(--card-3) 12px)}
.day .dn{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink-2)}
.day.today .dn{background:var(--brand);color:#fff;border-radius:6px;padding:1px 6px;margin-left:-4px}
.day .hol{font-size:9.5px;color:var(--amber);font-weight:700;display:block;margin-top:1px}
.day .sessions{margin-top:5px;display:grid;gap:3px}
.sess{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.35;padding:3px 7px;border-radius:6px;background:var(--card-3);cursor:pointer;text-decoration:none;color:var(--ink);min-width:0;border:0;font-family:var(--sans);text-align:left;width:100%;transition:background .15s var(--ease)}
.sess:hover{background:var(--blue-bg)}
.sess .sic{width:12px;height:12px;flex:none;border-radius:4px;display:flex;align-items:center;justify-content:center}
.sess .sic .ic{width:9px;height:9px}
.sess .st{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ink-2);flex:none}
.sess .sn2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.sess.held{opacity:.55}
.sess.no_show{background:var(--red-bg)}
.sess.no_show .sn2{color:var(--red);text-decoration:line-through}
.sess.part .sic{background:var(--amber-bg);color:var(--amber)}
.more{font-size:10px;color:var(--blue);font-weight:700;cursor:pointer;border:0;background:none;font-family:var(--sans);padding:1px 7px;text-align:left}
.more:hover{text-decoration:underline}
.wktot{padding:7px 11px;border-left:1px solid var(--line-2);text-align:right;background:var(--card-2)}
.wktot .n{font-family:var(--mono);font-size:16px;font-weight:700;display:block}
.wktot .c{font-size:10px;color:var(--ink-3)}
.wktot .bar2{height:5px;border-radius:99px;background:var(--card-3);overflow:hidden;margin-top:5px}
.wktot .bar2 i{display:block;height:100%;border-radius:99px;transition:width .4s var(--ease)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:12px;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mnav{display:inline-flex;align-items:center;gap:5px}
.mnav .cur{font-size:14.5px;font-weight:700;min-width:150px;text-align:center}
/* month|week view toggle (segmented, matches .slicer) */
.viewseg{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.viewseg button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border:0;border-radius:6px;color:var(--ink-3);background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .18s var(--ease),color .18s var(--ease)}
.viewseg button .ic{width:14px;height:14px}
.viewseg button:hover{color:var(--ink)}
.viewseg button.on{background:var(--brand);color:#fff}
/* week time-grid */
.wcal{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.wcal-head{display:grid;grid-template-columns:54px repeat(7,1fr);background:var(--card-2);border-bottom:1px solid var(--line)}
.wch{padding:7px 4px 8px;text-align:center;border-left:1px solid var(--line-2)}
.wch.gut{border-left:0}
.wch .wcd{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.wch .wcn{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink-2);margin-top:2px;line-height:1.1;display:inline-block;min-width:27px;padding:2px 0;border-radius:8px}
.wch.today .wcn{background:var(--brand);color:#fff}
.wch.today .wcd{color:var(--brand)}
.wch.wknd{background:var(--card-3)}
.wcal-body{display:grid;grid-template-columns:54px repeat(7,1fr);max-height:648px;overflow-y:auto}
.wc-gutter{position:relative}
.wc-hl{height:54px;border-bottom:1px solid var(--line-2)}
.wc-hl span{position:relative;top:-8px;left:7px;font-size:10px;font-family:var(--mono);color:var(--ink-3)}
.wc-col{position:relative;border-left:1px solid var(--line-2);background-image:linear-gradient(var(--line-2) 1px,transparent 1px);background-size:100% 54px}
.wc-col.wknd{background-color:var(--card-2)}
.wc-col.today{background-color:var(--red-bg)}
/* week events mirror the month .sess chip: light surface, colored icon = specialist */
.wc-ev{position:absolute;border-radius:6px;padding:3px 6px;font-size:11px;overflow:hidden;cursor:pointer;border:0;text-align:left;color:var(--ink);background:var(--card-3);font-family:var(--sans);line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:1px;transition:background .15s var(--ease)}
.wc-ev:hover{background:var(--blue-bg);z-index:3}
.wc-ev .we-h{display:flex;align-items:center;gap:5px}
.wc-ev .sic{width:12px;height:12px;flex:none;border-radius:4px;display:flex;align-items:center;justify-content:center}
.wc-ev .sic .ic{width:9px;height:9px}
.wc-ev .we-t{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--ink-2)}
.wc-ev .we-n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-ev.held{opacity:.55}
.wc-ev.no_show{background:var(--red-bg)}
.wc-ev.no_show .we-n{color:var(--red);text-decoration:line-through}
.wc-ev.part .sic{background:var(--amber-bg);color:var(--amber)}
/* short sessions (< ~30 min of grid height): one line, nothing half-clipped */
.wc-ev.mini{flex-direction:row;align-items:center;gap:5px;padding:0 6px}
.wc-ev.mini .we-h{flex:none}
.wc-ev.mini .we-n{min-width:0;font-size:10.5px}
.wc-now{position:absolute;left:0;right:0;height:2px;background:var(--red);z-index:4;pointer-events:none}
.wc-now::before{content:"";position:absolute;left:-1px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--red)}

/* ================= misc ================= */
.empty{padding:30px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.empty b{color:var(--ink-2);display:block;margin-bottom:3px;font-size:13.5px}
.err{background:var(--red-bg);color:var(--red);border:1px solid var(--red);border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:14px}
.skel{position:relative;overflow:hidden;background:var(--card-3);border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:shimmer 1.3s infinite}
@media (prefers-color-scheme:dark){.skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}}
@keyframes shimmer{100%{transform:translateX(100%)}}
.mono{font-family:var(--mono);font-size:12px}
a.plain{color:var(--blue);text-decoration:none;font-weight:600}
a.plain:hover{text-decoration:underline}

/* ================= overview: Command Deck month (option B) ================= */
/* start, not stretch: the v1 chart is compact, so stretching its card to the
   rail's height is what re-creates the "why is this so empty" feeling. */
.deck{display:grid;grid-template-columns:1fr 230px;gap:16px;align-items:start}
.deckchart{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 20px}
.deckchart h2{font-size:14px}
.deckchart .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.deckrail{display:flex;flex-direction:column;gap:12px}
.drail{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:13px 16px;flex:1;text-align:left;font:inherit;color:inherit}
.drail .l{font-size:11px;font-weight:600;color:var(--ink-3)}
.drail .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:24px;font-weight:800;margin-top:3px}
.drail .v .up{color:var(--green);font-size:13px}
.drail .v .dn{color:var(--red);font-size:13px}
.drail .d{font-size:11px;color:var(--ink-3);margin-top:2px}
.drail.hero{background:var(--navy);border-color:var(--navy)}
.drail.hero .l{color:#8d9aac}
.drail.hero .v{color:#fff}
.drail.hero .d{color:#b9c4d2}

/* ================= overview: Today = tiles + one-thing + run of show ====== */
.tilerow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.btile{border-radius:13px;padding:15px 17px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);cursor:pointer;text-align:left;font:inherit;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.btile:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.btile .n{font-family:var(--mono);font-size:38px;font-weight:800;line-height:1}
.btile .k{font-size:12px;font-weight:700;margin-top:6px}
.btile .s{font-size:11px;color:var(--ink-3);margin-top:2px}
.btile.red{background:var(--red-bg);border-color:rgba(198,40,40,.25)}.btile.red .n,.btile.red .k{color:var(--red)}
.btile.amber{background:var(--amber-bg);border-color:rgba(176,111,20,.28)}.btile.amber .n,.btile.amber .k{color:var(--amber)}
.btile.green{background:var(--green-bg);border-color:rgba(26,138,77,.25)}.btile.green .n,.btile.green .k{color:var(--green)}
.spotcard{background:var(--navy);border-radius:13px;color:#dce3ec;padding:18px 22px;box-shadow:var(--shadow);margin-bottom:16px}
.spotcard .k{font-size:10.5px;font-weight:800;letter-spacing:.07em;color:#f09489}
.spotcard h2{color:#fff;font-size:17px;margin-top:6px;line-height:1.35;max-width:72ch}
.spotcard p{font-size:12.5px;color:#b9c4d2;margin:8px 0 0;line-height:1.6;max-width:78ch}
.spotcard p b{color:#fff}
.spotcard .acts{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.spotcard .acts .b{background:#fff;color:var(--navy);border-color:#fff}
.spotcard .acts .b.ghost{background:transparent;color:#dce3ec;border-color:rgba(255,255,255,.3)}
.dayplan{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.dayplan .dph{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dayplan .dph h2{font-size:14px}
.dayplan .dph span{font-size:11.5px;color:var(--ink-3)}
.slot{display:flex;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.slot:last-child{border:0}
.slot .t{flex:0 0 52px;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink-2);padding-top:2px}
.slot .rail2{flex:0 0 10px;display:flex;flex-direction:column;align-items:center;padding-top:5px}
.slot .rail2 i{width:10px;height:10px;border-radius:50%;border:2.5px solid var(--line)}
.slot.done .rail2 i{background:var(--green);border-color:var(--green)}
.slot.hot .rail2 i{border-color:var(--red);background:var(--red-bg)}
.slot.adv .rail2 i{border-color:var(--amber);background:var(--amber-bg)}
.slot .bx{flex:1;min-width:0}
.slot .bx b{font-size:13.5px}
.slot .bx .why2{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.5;max-width:70ch}
.slot.done .bx > b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.slot .side2{display:flex;gap:7px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
.slot.adv{background:var(--amber-bg)}
.slot.adv .advtag{font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--amber)}

/* ================= TV board (option D, full screen) ================= */
body.tv{background:var(--navy-deep);color:#dce3ec;min-height:100vh}
.tvwrap{max-width:1560px;margin:0 auto;padding:34px 44px}
.tvhead{display:flex;align-items:baseline;gap:16px}
.tvhead .brand2{font-size:19px;font-weight:800;color:#fff}
.tvhead .brand2 b{color:var(--brand)}
.tvhead .tvt{font-size:14px;color:#8d9aac}
.tvhead .clock{margin-left:auto;font-family:var(--mono);font-size:15px;color:#c3cedb}
.tvchip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;font-size:13px;font-weight:800}
.tvchip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.tvchip.ahead{background:rgba(95,213,152,.14);color:#5fd598}
.tvchip.on_track{background:rgba(157,185,239,.14);color:#9db9ef}
.tvchip.behind{background:rgba(240,148,137,.15);color:#f09489}
.tvchip.not_started{background:rgba(255,255,255,.1);color:#aeb9c6}
.tvrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;text-align:center;margin-top:30px}
.tvn .l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d9aac;font-weight:700}
.tvn .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:64px;font-weight:800;line-height:1.1;margin-top:6px;color:#fff}
.tvn .v.red{color:#f09489}
.tvn .v.grn{color:#5fd598}
.tvn .d{font-size:12.5px;color:#8d9aac;margin-top:4px}
.tvmeter{position:relative;height:30px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:34px}
.tvmeter .mfill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#27ae60,#57bb84);min-width:8px}
.tvmeter .mproj{position:absolute;top:7px;bottom:7px;border-radius:0 999px 999px 0;background:repeating-linear-gradient(-55deg,rgba(95,213,152,.25),rgba(95,213,152,.25) 6px,transparent 6px,transparent 12px)}
.tvmeter .mpace{position:absolute;top:-8px;bottom:-8px;width:3px;background:#fff;border-radius:2px}
.tvmeter .mpace span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:#c3cedb;white-space:nowrap}
.tvmeter .mnum{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:800;font-size:14px;color:#0b1220}
.tvscale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:#8d9aac;margin-top:9px}
.wkdots{display:flex;gap:30px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.wkdot{text-align:center}
.wkdot .c{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:14px;margin:0 auto}
.wkdot .c.hit{background:rgba(95,213,152,.16);color:#5fd598;border:2px solid #5fd598}
.wkdot .c.miss{background:rgba(240,148,137,.14);color:#f09489;border:2px solid #f09489}
.wkdot .c.now{background:rgba(255,255,255,.1);color:#fff;border:2px dashed #c3cedb}
.wkdot .c.fut{background:rgba(255,255,255,.05);color:#8d9aac;border:2px solid rgba(255,255,255,.15)}
.wkdot .k{font-size:11px;color:#8d9aac;margin-top:7px}
.tvfoot{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.tvpanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 20px}
.tvpanel h5{font-size:12.5px;font-weight:700;color:#c3cedb;margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase}
.tvpanel .ti{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.tvpanel .ti:last-child{border:0}
.tvpanel .ti b{color:#fff;font-weight:650}
.tvpanel .ti .sub3{color:#8d9aac;font-size:12px}
.tvpanel .ti .hrs2{font-family:var(--mono);font-weight:800;color:#f09489;white-space:nowrap}

/* ================= War Room (HUD hero) components ================= */
.slimboard{background:var(--navy-deep);border-radius:13px;padding:14px 22px;color:#dce3ec;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:16px}
.slimboard .sn .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8d9aac;font-weight:700}
.slimboard .sn .v{font-family:var(--mono);font-size:24px;font-weight:800;color:#fff;line-height:1.1}
.slimboard .sn .v.red{color:#f09489}.slimboard .sn .v.grn{color:#5fd598}
.slimboard .sn .v small{font-size:13px;color:#8d9aac;font-weight:600}
.slimboard .mtrack{flex:1;min-width:180px;position:relative;height:13px;border-radius:99px;background:rgba(255,255,255,.09)}
.slimboard .mtrack .f{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#27ae60,#57bb84);min-width:5px}
.slimboard .mtrack .pc{position:absolute;top:-4px;bottom:-4px;width:2.5px;background:#fff;border-radius:2px}
.ghostb{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,rgba(74,144,226,.1),rgba(15,164,178,.06));
  border:1px solid rgba(74,144,226,.28);border-radius:12px;padding:11px 16px;margin-bottom:16px;font-size:12.5px;color:var(--ink-2)}
.ghostb b{color:var(--ink)}
.ghostb .gi{width:32px;height:32px;border-radius:9px;background:var(--navy);color:#5fd598;display:grid;place-items:center;flex:none;position:relative}
.ghostb .gi::after{content:"";width:8px;height:8px;border-radius:50%;background:#5fd598;box-shadow:0 0 0 0 rgba(95,213,152,.5);animation:gpz 1.8s infinite}
.ghostb .soon{margin-left:auto;font-size:9px;font-weight:800;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber);border-radius:5px;padding:2px 7px;white-space:nowrap}
@keyframes gpz{70%{box-shadow:0 0 0 7px rgba(95,213,152,0)}100%{box-shadow:0 0 0 0 rgba(95,213,152,0)}}
/* Meeting Studio "Your day" timeline */
.day-panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.day-ph{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.day-ph .dpt{font-size:13px;font-weight:700}
.day-ph .dps{font-size:11px;color:var(--ink-3);margin-left:auto}
.day-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
.day-track2{position:relative;height:150px}
.day-ruler{position:relative;height:20px;margin:0 0 18px}
.day-ruler .rline{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:2px;background:var(--line)}
.day-ruler .rseg{position:absolute;top:3px;height:8px;border-radius:5px;opacity:.9}
.s-live{background:var(--red)}.s-done{background:var(--green)}.s-up{background:var(--bluebrand)}
.day-ruler .rlab{position:absolute;top:11px;font-size:8.5px;color:var(--ink-3)}
.day-ruler .rnow{position:absolute;top:-3px;height:17px;width:2px;background:var(--red);border-radius:2px}
.day-ruler .rnow .nf{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:7.5px;font-weight:800;letter-spacing:.04em;padding:1px 6px;border-radius:4px;white-space:nowrap}
.dcard{position:absolute;top:40px;width:194px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.16s var(--ease);text-decoration:none;color:inherit;display:block}
.dcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--ink-3);z-index:3}
.dcard.now{border-color:rgba(198,40,40,.45);box-shadow:0 0 0 1px rgba(198,40,40,.2)}
.dcard-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dcard-top .av4{width:22px;height:22px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:700;display:grid;place-items:center;flex:none}
.dcard-top .dtime{font-size:11px;font-weight:700;color:var(--ink-2)}
.dcard-top .nflag{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:800;color:var(--red);letter-spacing:.05em}
.dcard-top .nflag .nd{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
.dcard-top .schip{margin-left:auto;font-size:8px;font-weight:800;letter-spacing:.04em;border-radius:4px;padding:1px 6px}
.schip.done{background:var(--green-bg);color:var(--green)}.schip.up{background:var(--blue-bg);color:var(--blue)}.schip.ns{background:var(--red-bg);color:var(--red)}
@keyframes blink{50%{opacity:.35}}
.dcard-title{font-size:12.5px;font-weight:700;line-height:1.3;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-sub{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* crew ticker */
.ticker{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px}
.tchip{flex:none;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 13px;box-shadow:var(--shadow);min-width:200px}
.tchip.live{border-color:rgba(198,40,40,.4)}
.tchip .st3{min-width:0}.tchip b{font-size:12.5px}
.tchip .td{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.livechip{display:inline-flex;align-items:center;gap:5px;background:var(--red-bg);color:var(--red);font-size:9.5px;font-weight:800;border-radius:999px;padding:1px 7px;vertical-align:1px}
.livechip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
/* HUD tiles */
.hud{display:grid;gap:14px;margin-bottom:14px}
.hud.g4{grid-template-columns:repeat(4,1fr)}
.hud .span2{grid-column:span 2}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:13px 15px}
.hcard.click{cursor:pointer;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.hcard.click:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.slimboard.click{cursor:pointer;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.slimboard.click:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.hcard h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 10px;display:flex;align-items:center;gap:7px}
.hcard h4 .ct{margin-left:auto;font-family:var(--mono);color:var(--ink-2);background:var(--card-3);border-radius:999px;padding:1px 8px;font-size:10.5px}
.hrow{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:5px 0;border-bottom:1px solid var(--line-2)}
.hrow:last-child{border:0}
.hrow .av3{width:18px;height:18px;border-radius:50%;color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hrow b{font-weight:650}.hrow .r{margin-left:auto;font-family:var(--mono);font-weight:700}
.hrow .r.red{color:var(--red)}
.hrow .live2{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite;flex:none}
.caprow{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:4px 0}
.caprow .cbar{flex:1;height:7px;border-radius:99px;background:var(--card-3);overflow:hidden}
.caprow .cbar i{display:block;height:100%;border-radius:99px}
.mfrow{display:grid;grid-template-columns:80px 1fr 30px;gap:7px;align-items:center;padding:2px 0;font-size:11px}
.mfrow .mfn{color:var(--ink-2);font-weight:600}
.mfrow .mfb{height:13px;border-radius:4px;background:var(--card-3);overflow:hidden}
.mfrow .mfb i{display:block;height:100%;background:var(--navy-2);border-radius:4px}
.mfrow.hot .mfb i{background:var(--brand)}.mfrow.win .mfb i{background:var(--green)}
.mfrow .mfc{font-family:var(--mono);font-weight:700;text-align:right;font-size:11px}

/* ---- .scoreband: the option-D board embedded in light pages ---- */
.scoreband{background:var(--navy-deep);border-radius:13px;padding:18px 24px 20px;margin-bottom:16px;color:#dce3ec;box-shadow:var(--shadow)}
.scoreband .sb-head{display:flex;align-items:center;gap:10px}
.scoreband .sb-head h2{font-size:13px;font-weight:700;color:#c3cedb;letter-spacing:.04em;text-transform:uppercase;margin:0}
.scoreband .sb-head .sb-note{font-size:11px;color:#8d9aac}
.scoreband .sb-head .sb-toggle{margin-left:auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#dce3ec;
  height:26px;padding:0 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:11px;font-weight:700;transition:background .18s var(--ease)}
.scoreband .sb-head .sb-toggle:hover{background:rgba(255,255,255,.14)}
.scoreband.collapsed .sb-body{display:none}
.scoreband.collapsed{padding-bottom:16px}
.scoreband .sb-body{margin-top:4px}
.scoreband .tvrow{margin-top:14px;gap:16px}
.scoreband .tvn .v{font-size:42px}
.scoreband .tvn .v .unit{font-size:18px;color:#8d9aac}
.scoreband .tvn .l{font-size:11px}
.scoreband .tvn .d{font-size:11.5px}
.scoreband .tvmeter{height:24px;margin-top:26px}
.scoreband .tvmeter .mnum{font-size:12.5px}
.scoreband .tvscale{margin-top:7px}
.scoreband .wkdots{gap:22px;margin-top:20px}
.scoreband .wkdot .c{width:46px;height:46px;font-size:12.5px}
.tvn .v .unit{font-size:24px;color:#8d9aac}