/* ===== Agentic Society semantic tokens ===== */
  :root{
    --color-paper:#f8f7f3;
    --color-bg-midnight:#04060e;
    --color-surface:#ffffff;
    --color-black:#000;
    --color-text-muted:rgba(248,247,243,.55);
    --color-accent-blue:#2f6bff;
    --color-accent-blue-glow:rgba(47,107,255,.22);
    --color-accent-pink:#ff7a9c;
    --gradient-pink:linear-gradient(115deg,#ff5d9e,#ff66f4);
    --gradient-chrome:linear-gradient(180deg,#ffffff 0%,#e2e2e2 45%,#9a9a9a 100%);
    --glass-bg-dark:rgba(255,255,255,.05);
    --glass-bg-dark-hover:rgba(255,255,255,.09);
    --glass-border-dark:rgba(255,255,255,.10);
    --glass-border-dark-hover:rgba(255,255,255,.18);
    --font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'Roboto Mono',ui-monospace,monospace;
    --radius-xl:28px;
    --radius-pill:999px;
    --up:#4ade80; --down:#ff5d7e;
    --live:#4ade80; --sample:#ffcf5d; --estimate:#5aa2ff;
    /* #437: RGB triplets that mirror --up / --down / --color-accent-pink / --sample so
       their translucent variants share one source of truth: rgba(var(--up-rgb), A).
       Values are byte-identical to the hex tokens above - a brand color change now
       edits one token instead of ~73 inline rgba() literals. */
    --up-rgb:74,222,128; --down-rgb:255,93,126; --color-accent-pink-rgb:255,122,156; --sample-rgb:255,207,93;
    /* App-shell surface (#294) - the page around the framed stage. Scheme-aware
       (light default; dark overrides below). The stage itself stays brand-midnight
       in both schemes; only the surround adapts, so the card always reads elevated. */
    --shell-bg:#e9ebf1;
    --shell-glow-1:rgba(47,107,255,.12);
    --shell-glow-2:rgba(255,102,244,.07);
    --shell-vignette:rgba(20,26,48,.10);
    --elev-shadow:0 42px 90px -34px rgba(20,26,48,.50),0 14px 34px -14px rgba(20,26,48,.30);
    /* Sticky top-nav glass (#293), painted over the midnight stage when condensed. */
    --nav-bg:rgba(6,9,18,.74);
    --nav-border:rgba(255,255,255,.12);
  }
  /* Dark app-shell surround (#294): follows the OS scheme, overridable via
     :root[data-theme]. Near-black, one shade lighter than the #04060e stage so
     the card still lifts. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --shell-bg:#080b14;
      --shell-glow-1:rgba(47,107,255,.18);
      --shell-glow-2:rgba(255,102,244,.09);
      --shell-vignette:rgba(0,0,0,.55);
      --elev-shadow:0 44px 100px -34px rgba(0,0,0,.82),0 16px 42px -14px rgba(0,0,0,.62);
      --nav-bg:rgba(6,9,18,.82);
    }
  }
  :root[data-theme="dark"]{
    --shell-bg:#080b14;
    --shell-glow-1:rgba(47,107,255,.18);
    --shell-glow-2:rgba(255,102,244,.09);
    --shell-vignette:rgba(0,0,0,.55);
    --elev-shadow:0 44px 100px -34px rgba(0,0,0,.82),0 16px 42px -14px rgba(0,0,0,.62);
    --nav-bg:rgba(6,9,18,.82);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* DASH-02: inline-SVG icon convention (Lucide, 24x24 viewBox). Icons inherit text
     color (currentColor) and render identically across OSes - no emoji-as-icon. Give an
     <svg> the class "ic"; it strokes at 2px, rounded joins, and sizes to its context. */
  .ic{width:1.1em;height:1.1em;flex:none;display:inline-block;vertical-align:-.18em;
      stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tab .ic{width:16px;height:16px;vertical-align:-.22em;margin-right:5px}
  .tabtools .ic,.kiosk-btn .ic{width:15px;height:15px}
  .refresh .ic{width:14px;height:14px}
  .stripe-cta .ic{width:17px;height:17px;color:var(--sample)}
  body{background:var(--shell-bg);font-family:var(--font-sans);color:var(--color-paper);padding:clamp(14px,3vw,44px);min-height:100vh}
  /* #294 app-shell backdrop: a fixed, non-scrolling brand-tinted wash + edge
     vignette so the page reads as a product surface, never a blank document.
     Fixed (not scrolled) so long pages never band. Sits behind the framed card. */
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(1200px 760px at 50% -8%, var(--shell-glow-1), transparent 62%),
      radial-gradient(900px 620px at 88% 4%, var(--shell-glow-2), transparent 58%),
      radial-gradient(150% 130% at 50% 42%, transparent 52%, var(--shell-vignette))}

  .holo-ring{position:relative;border-radius:var(--radius-xl);padding:1.5px;max-width:min(1600px,96vw);margin:0 auto;
    background:conic-gradient(from 210deg,rgba(47,107,255,.55),rgba(138,92,255,.45),rgba(255,102,244,.4),rgba(47,107,255,.55));
    box-shadow:var(--elev-shadow)}
  /* #293: stage is overflow:visible so the sticky top-nav can pin to the window
     (an overflow/clip container would trap it). The ambient glow is clipped by a
     dedicated inset layer instead, so nothing bleeds past the rounded card. */
  .stage{position:relative;background:var(--color-bg-midnight);border-radius:calc(var(--radius-xl) - 1.5px);
    overflow:visible;padding:clamp(13px,2vw,26px) clamp(18px,3vw,40px)}
  .stage-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
  .glow{position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:900px;height:520px;pointer-events:none;
    background:radial-gradient(ellipse at center,var(--color-accent-blue-glow) 0%,rgba(47,107,255,.10) 38%,transparent 72%)}

  header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
  .lockup{display:flex;align-items:center;gap:14px}
  .wordmark{font-weight:800;letter-spacing:-.02em;font-size:19px;color:var(--color-surface);white-space:nowrap}
  .wordmark .as-logo{height:26px;width:auto;display:block;color:var(--color-surface)}
  .divider{width:1px;height:30px;background:var(--glass-border-dark)}
  .lockup .sub .t{font-weight:600;font-size:14px;letter-spacing:-.01em}
  .lockup .sub .r{font-size:11.5px;color:var(--color-text-muted)}
  /* Source legend - the live/sample/estimate key */
  .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--color-text-muted);
    background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:8px 15px}
  .legend .k{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .dotk{width:8px;height:8px;border-radius:50%;display:inline-block}
  .dotk.live{background:var(--live)} .dotk.sample{background:var(--sample)} .dotk.estimate{background:var(--estimate)}

  /* Header right-hand tools: source legend + account menu (#135) */
  .headtools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  /* Account menu - revealed only once /api/auth/me confirms a signed-in user. */
  .acct{position:relative}
  .acct[hidden]{display:none}
  /* #66: owner-only controls are hidden for anyone whose resolved role is not
     owner (the server endpoints are the real gate; this is the UI half). Default
     hidden until /api/auth/me stamps <body data-role>, so it never flashes. */
  .owner-only{display:none}
  body[data-role="owner"] .owner-only{display:flex}
  /* #188: the account dropdown lives inside header (z-index:2); the .tabs controls
     cluster (View the board / Kiosk / Reset layout) is a later sibling at the same
     z-index, so it painted over the open menu. While the menu is open, lift the
     whole header stacking context above the controls cluster (and rev-controls,
     which is sticky at z-index:15). Closed again on menu close, so nothing else
     is affected. Works at desktop, kiosk, and mobile widths. */
  header.menu-open{z-index:60}
  .acct-btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--font-sans);
    color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
    border-radius:var(--radius-pill);padding:6px 12px 6px 6px;transition:.18s}
  .acct-btn:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .acct-avatar{width:28px;height:28px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:12px;color:var(--color-black);background:#FFD400;letter-spacing:.02em}
  .acct-name{font-weight:600;font-size:12.5px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .acct-caret{width:9px;height:9px;flex:none;opacity:.6;transition:transform .18s}
  .acct.open .acct-caret{transform:rotate(180deg)}
  .acct-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;z-index:1000;
    background:#0a0f1c;border:1px solid var(--glass-border-dark);border-radius:14px;padding:8px;
    box-shadow:0 18px 46px rgba(0,0,0,.55)}
  .acct-menu[hidden]{display:none}
  .acct-id{padding:10px 12px 12px;border-bottom:1px solid var(--glass-border-dark);margin-bottom:6px}
  .acct-id .n{font-weight:700;font-size:14px;color:var(--color-surface)}
  .acct-id .e{font-size:12px;color:var(--color-text-muted);margin-top:2px;word-break:break-all}
  .acct-id .ro{font-size:11.5px;color:var(--color-text-muted);margin-top:3px}
  .acct-signout{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
    font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--color-surface);
    background:none;border:none;border-radius:9px;padding:10px 12px;transition:.14s}
  .acct-signout:hover{background:var(--glass-bg-dark-hover)}
  .acct-signout svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

  /* Filters + freshness bar + custom date range */
  .filterbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 8px;position:relative;z-index:2}
  .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .pill{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--color-surface);cursor:pointer;white-space:nowrap;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);
    padding:9px 20px;transition:.18s}
  .pill:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover);transform:translateY(-1px)}
  .pill.active{background:var(--color-paper);color:var(--color-black);border-color:var(--color-paper)}
  /* freshness: last-updated + manual refresh */
  .freshbar{display:flex;align-items:center;gap:12px;white-space:nowrap}
  .freshbar .lu{font-family:var(--font-mono);font-size:11.5px;color:var(--color-text-muted)}
  .freshbar .lu b{color:var(--color-surface);font-weight:600}
  .refresh{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-surface);cursor:pointer;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:8px 15px;transition:.15s}
  .refresh:hover{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink)}
  .refresh .ric{display:inline-block;font-size:14px;line-height:1}
  .refresh.spin .ric{animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* custom-range calendar widget */
  .daterange{display:none;gap:20px;align-items:flex-start;margin:4px 0 22px;position:relative;z-index:2;flex-wrap:wrap;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:18px;padding:18px 20px;backdrop-filter:blur(8px)}
  .daterange.open{display:flex}
  .cal{width:266px}
  .cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .cal-head .mo{font-weight:700;font-size:13.5px;color:var(--color-surface)}
  .cal-nav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;cursor:pointer;color:var(--color-surface);
    background:transparent;border:1px solid var(--glass-border-dark);border-radius:8px;font-size:13px}
  .cal-nav:hover{border-color:var(--color-accent-pink)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-dow{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);text-align:center;padding:2px 0}
  .cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--color-surface);
    cursor:pointer;border-radius:8px;border:1px solid transparent;transition:.1s}
  .cal-day:hover{background:var(--glass-bg-dark-hover)}
  .cal-day.blank{cursor:default}
  .cal-day.inrange{background:rgba(90,162,255,.16)}
  .cal-day.edge{background:var(--color-accent-blue);color:#fff;font-weight:700}
  .cal-day.today{border-color:var(--glass-border-dark-hover)}
  .cal-side{display:flex;flex-direction:column;gap:10px;min-width:150px}
  .cal-side .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}
  .cal-sel #cal-selected{font-family:var(--font-mono);font-size:12.5px;color:var(--color-surface);margin-top:4px}
  .cal-presets{display:flex;flex-wrap:wrap;gap:6px}
  .cal-presets button{font-family:var(--font-sans);font-weight:600;font-size:11px;color:var(--color-surface);cursor:pointer;
    background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:5px 10px}
  .cal-presets button:hover{border-color:var(--color-accent-pink)}
  .daterange .go{font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-black);cursor:pointer;margin-top:auto;
    background:var(--color-paper);border:none;border-radius:12px;padding:10px 16px}
  .daterange .go:hover{filter:brightness(.95)}
  .daterange .go:disabled{opacity:.4;cursor:not-allowed}
  .filters-sp{margin-bottom:8px}

  /* ===== Hero - goal-anchored, editable goal ===== */
  .hero{position:relative;z-index:2}
  /* DASH-04: hero top row - pacing status chip on the left, connection-health chip
     on the right. Wraps gracefully on narrow widths. */
  .hero-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
  .hero-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:5px 11px;border-radius:var(--radius-pill);margin-bottom:2px}
  .hero-top .hero-status{margin-bottom:0}
  .hero-top .connhealth.chip{margin:0 0 0 auto}
  .hero-status.ontrack{color:var(--up);background:rgba(var(--up-rgb),.1);border:1px solid rgba(var(--up-rgb),.25)}
  .hero-status.behind{color:#ffcf5d;background:rgba(var(--sample-rgb),.1);border:1px solid rgba(var(--sample-rgb),.25)}
  .hero-status .pdot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .hero .big{font-size:clamp(19px,2.3vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:4px 0 4px;
    color:var(--color-surface);text-wrap:balance}
  .hero .big .metal{background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;white-space:nowrap}
  .hero .math{font-family:var(--font-mono);font-size:10.5px;color:var(--color-text-muted);margin-bottom:5px;line-height:1.4}
  /* #494: week-over-week row under the pacing math. Answers "what changed since
     last week?" on screen. Three visual states, and only three: a real delta
     (up/down/flat), a real-but-percentless delta (prior week was 0), or an
     explicit "insufficient history" / "unavailable" note. There is deliberately
     NO state that renders a number we did not measure. */
  .hero .wowrow{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);
    margin:0 0 6px;line-height:1.5;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .hero .wowrow .wl{font-weight:600;letter-spacing:.02em;text-transform:uppercase;font-size:9.5px;opacity:.75}
  .hero .wowrow .wv{font-weight:700}
  .hero .wowrow .wv.up{color:var(--up)} .hero .wowrow .wv.down{color:var(--down)}
  .hero .wowrow .wv.flat,.hero .wowrow .wv.none{color:var(--color-text-muted)}
  .hero .wowrow .wn{opacity:.7}
  .hero .wowrow.wow-none .wv{font-weight:600;font-style:italic}
  @media(max-width:768px){ .hero .wowrow{font-size:11.5px} }
  /* DASH-13: "Explain this" - a quiet accent pill under the pacing math. */
  .explain-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;margin:2px 0 6px;
    font-family:var(--font-sans);font-weight:600;font-size:12px;color:var(--color-accent-blue);
    background:var(--color-accent-blue-glow);border:1px solid rgba(47,107,255,.4);
    border-radius:var(--radius-pill);padding:7px 14px;transition:.15s}
  .explain-btn:hover{background:rgba(47,107,255,.3);border-color:var(--color-accent-blue);color:var(--color-surface)}
  .explain-btn:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .explain-btn .ic{width:15px;height:15px}
  @media(max-width:768px){ .explain-btn{min-height:44px;font-size:13px;padding:9px 16px} }
  /* Goal control */
  .goalctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 8px}
  .goalctl .g-cur{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:13px;
    color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:8px 15px;transition:.15s}
  .goalctl .g-cur:hover{border-color:var(--color-accent-pink)}
  .goalctl .g-cur .lab{color:var(--color-text-muted);font-weight:500}
  .goalctl .g-cur .pen{opacity:.7}
  .goaledit{display:none;gap:8px;align-items:center;flex-wrap:wrap}
  .goaledit.open{display:flex}
  .goaledit .glbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}
  .goaledit .gor{font-size:11.5px;color:var(--color-text-muted)}
  .goaledit .ginput{display:inline-flex;align-items:center;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:12px;padding:0 12px}
  .goaledit .ginput:focus-within{border-color:rgba(47,107,255,.45)}
  .goaledit .ginput .gpre{font-family:var(--font-mono);font-size:13px;color:var(--color-text-muted)}
  .goaledit input{font-family:var(--font-mono);font-size:13px;color:var(--color-surface);width:110px;
    background:transparent;border:none;padding:9px 4px;outline:none}
  .goaledit .preset{font-family:var(--font-sans);font-weight:600;font-size:12px;color:var(--color-surface);cursor:pointer;
    background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:7px 13px;transition:.15s}
  .goaledit .preset:hover{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink)}
  .goaledit .save{font-family:var(--font-sans);font-weight:600;font-size:12px;color:var(--color-black);cursor:pointer;background:var(--color-paper);border:none;border-radius:12px;padding:8px 15px}

  .assump{display:flex;gap:10px;flex-wrap:wrap}
  .chip{background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:10px;padding:5px 9px;
    font-size:10.5px;color:var(--color-text-muted)}
  .chip b{color:var(--color-surface);font-weight:600}
  .chip .flag{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;
    background:var(--gradient-pink);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
  .chip .flag.trained{background:linear-gradient(115deg,#4ade80,#2f6bff);-webkit-background-clip:text;background-clip:text}
  /* #352: tap-to-edit assumption chips */
  .chip-btn{cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s,background .15s}
  .chip-btn:hover{border-color:var(--color-accent-pink);background:var(--glass-bg-dark-hover)}
  .chip-btn:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .chip-btn .chip-l{display:inline-flex;align-items:center;gap:5px}
  .chip-pen{opacity:.5;font-size:11px}
  .chip-btn:hover .chip-pen{opacity:1;color:var(--color-accent-pink)}
  .chip.chip-edit{display:inline-flex;align-items:center;gap:7px;padding:5px 8px}
  .chip-edit .lab{color:var(--color-text-muted)}
  .chip-inw{display:inline-flex;align-items:center;gap:1px;background:rgba(0,0,0,.35);
    border:1px solid var(--color-accent-blue);border-radius:7px;padding:2px 7px;
    font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted)}
  .chip-in{width:46px;background:transparent;border:none;outline:none;color:var(--color-surface);
    font-family:var(--font-mono);font-size:12.5px;font-weight:700;text-align:right;-moz-appearance:textfield}
  .chip-in::-webkit-outer-spin-button,.chip-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .chip-save{cursor:pointer;flex:none;width:26px;height:26px;border-radius:7px;font-size:13px;line-height:1;
    color:#0b0b0c;background:linear-gradient(115deg,#4ade80,#2f6bff);border:none}
  .chip-save:hover{filter:brightness(1.08)}
  @media(max-width:768px){ .chip-btn{min-height:38px} .chip-save{width:34px;height:34px} .chip-in{width:54px;font-size:14px} }
  .progress{margin:6px 0 2px}
  .progress .plabel{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);margin-bottom:5px}
  .progress .plabel b{color:var(--color-surface);font-weight:700;font-size:12px}
  .progress .plabel b.covered{color:var(--up)}
  .progress .bar{height:10px;background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);overflow:hidden}
  .progress .fill{height:100%;min-width:3px;background:linear-gradient(90deg,var(--color-accent-blue),#8a5cff);border-radius:var(--radius-pill);transition:width .5s}
  .progress .fill.covered{background:linear-gradient(90deg,#4ade80,#2f6bff)}
  .progress .cap{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;color:var(--color-text-muted);margin-top:8px}

  /* Month pace / run-rate line in the hero */
  .pace{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);margin:2px 0 4px}
  .pace .ptag{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:9.5px;padding:2px 8px;border-radius:var(--radius-pill)}
  .pace .ptag.ahead{color:var(--up);background:rgba(var(--up-rgb),.1);border:1px solid rgba(var(--up-rgb),.28)}
  .pace .ptag.behind{color:#ffcf5d;background:rgba(var(--sample-rgb),.1);border:1px solid rgba(var(--sample-rgb),.28)}
  .pace b{color:var(--color-surface);font-weight:600}
  /* "Your next moves" - the seller's action layer */
  .moves{position:relative;z-index:2;margin:7px 0 0}
  .moves-h{display:flex;align-items:center;gap:10px;margin:0 2px 5px}
  .moves-h .mt{font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--color-surface)}
  .moves-h .ml{flex:1;height:1px;background:var(--glass-border-dark)}
  .moves-h .mtag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}
  .moves-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  @media(max-width:1180px){.moves-grid{grid-template-columns:1fr}}
  .move{display:flex;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;width:100%;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:12px;padding:10px 12px;transition:.15s}
  .move:hover{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink);transform:translateY(-1px)}
  .move .mrank{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--color-black);background:var(--gradient-chrome)}
  .move.prio1 .mrank{background:var(--gradient-pink);color:#fff}
  .move .mbody{min-width:0}
  .move .mhead{font-weight:600;font-size:12.5px;color:var(--color-surface);line-height:1.25}
  .move .msub{font-size:10.5px;color:var(--color-text-muted);line-height:1.35;margin-top:2px}
  .move .mval{color:#ffd400;font-weight:600}

  /* ===== Board tabs (Revenue | Company Vitals) ===== */
  /* #293 persistent sticky top navigation. The bar pins to the window (the stage
     is overflow:visible so nothing traps it), and condenses - blurred glass +
     hairline + shadow - once the page scrolls. Real tab nav (.tabnav, role=tablist)
     is separated from utility controls (.tabtools). */
  .tabs{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:6px 8px;position:sticky;top:0;z-index:30;
    border-radius:16px;transition:padding .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
    border:1px solid transparent}
  .tabs.scrolled{background:var(--nav-bg);border-color:var(--nav-border);padding:6px 8px;
    box-shadow:0 14px 34px -16px rgba(0,0,0,.6);
    backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
  /* #344: in-dash Back button (glass icon-button, matches the overflow menu). */
  .nav-back{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;cursor:pointer;
    color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
    border-radius:var(--radius-pill);transition:.15s;margin-right:2px}
  .nav-back[hidden]{display:none}
  .nav-back:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .nav-back:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .nav-back .ic{width:18px;height:18px}
  .tabnav{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
  .tabtools{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
  /* DASH-05: overflow (...) menu that holds board/kiosk/reset. Mirrors the account
     menu pattern so it reads as one system. */
  .of{position:relative}
  .of-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;cursor:pointer;
    color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
    border-radius:var(--radius-pill);transition:.15s}
  .of-btn:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .of-btn:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .of-btn .ic{width:18px;height:18px}
  .of-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:184px;z-index:1000;
    background:#0a0f1c;border:1px solid var(--glass-border-dark);border-radius:14px;padding:7px;
    box-shadow:0 18px 46px rgba(0,0,0,.55)}
  .of-menu[hidden]{display:none}
  .of-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;text-decoration:none;
    font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--color-surface);
    background:none;border:none;border-radius:9px;padding:10px 11px;transition:.14s;white-space:nowrap}
  .of-item:hover{background:var(--glass-bg-dark-hover)}
  .of-item .ic{width:16px;height:16px;color:var(--color-text-muted)}
  .tab{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--color-text-muted);cursor:pointer;white-space:nowrap;
    background:transparent;border:1px solid transparent;border-radius:var(--radius-pill);padding:9px 18px;min-height:40px;transition:.15s;display:inline-flex;align-items:center;gap:7px}
  .tab:hover{color:var(--color-surface);background:var(--glass-bg-dark)}
  .tab.active,.tab[aria-selected="true"]{color:var(--color-black);background:var(--color-paper);border-color:var(--color-paper)}
  .tab:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  /* DASH-07: dictionary launcher - a ghost icon-button, visually distinct from the
     board tabs (it opens an overlay, it does not switch boards, so it never takes
     the white active pill). A hairline divider sets it apart from the tab group. */
  .tabnav-div{flex:none;width:1px;height:22px;background:var(--glass-border-dark);margin:0 3px}
  .tab-launcher{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;cursor:pointer;white-space:nowrap;
    font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-text-muted);
    background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);
    padding:8px 14px;min-height:40px;transition:.15s}
  .tab-launcher:hover{color:var(--color-surface);background:var(--glass-bg-dark);border-color:var(--glass-border-dark-hover)}
  .tab-launcher:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .tab-launcher .ic{width:16px;height:16px}
  /* Company Vitals board */
  .vitals-note{font-size:10.5px;color:var(--color-text-muted);margin:2px 2px 10px;line-height:1.4}
  .vitals-note b{color:var(--color-surface)}
  /* flippable vitals tile (front = number, back = how it's computed + source) */
  .vtile{background:transparent;border:none;padding:0;perspective:1000px;min-height:132px;cursor:pointer}
  .vtile-in{position:relative;width:100%;height:100%;min-height:132px;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
  .vtile.flipped .vtile-in{transform:rotateY(180deg)}
  .vface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:12px;padding:11px 14px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1);
    display:flex;flex-direction:column;transition:border-color .18s,background .18s;
    overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}/* #363: contain both vitals faces */
  .vface::-webkit-scrollbar{width:6px}
  .vface::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:6px}
  .vtile:hover .vface{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .vface.back{transform:rotateY(180deg)}
  .vtile .t{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .vtile .lbl{font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--color-text-muted);line-height:1.25}
  .vtile .n{font-size:clamp(20px,1.8vw,27px);font-weight:800;letter-spacing:-.02em;margin:4px 0 3px;
    background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .vtile .d{font-size:11.5px;color:var(--color-text-muted);line-height:1.4}
  .vwow{font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.3}
  .vwow.up{color:#34d399}
  .vwow.down{color:#f87171}
  .vwow.flat{color:var(--color-text-muted)}
  .vwow.building{color:var(--color-text-muted);font-weight:600;font-style:italic;opacity:.85}
  .vtile .srcsys{margin-top:auto;padding-top:8px}
  /* DASH-08: source CHIP per vitals tile, driven by kind/source from the metric
     catalog (via /api/metric-dictionary). The dot color encodes provenance kind -
     and honors the never-fabricate-green rule: green ONLY for kind 'live'. */
  .src-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;font-size:10px;font-weight:600;
    letter-spacing:.02em;color:var(--color-text-muted);background:rgba(0,0,0,.28);
    border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:3px 9px;line-height:1.2}
  .src-chip .sc-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--color-text-muted)}
  .src-chip .sc-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .src-chip.k-live .sc-dot{background:var(--live)}
  .src-chip.k-sample .sc-dot{background:var(--sample)}
  .src-chip.k-estimate .sc-dot{background:var(--estimate)}
  .vface.back .bk-h{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-surface);margin-bottom:5px}
  .vface.back .bk-row{font-size:12px;color:rgba(248,247,243,.94);line-height:1.45;margin-bottom:5px}
  .vtile-na .n{background:none;-webkit-text-fill-color:var(--color-text-muted);color:var(--color-text-muted)}
  .vtile-na .vface.front{opacity:.72}

  /* ===== Funnel bands ===== */
  .funnel{position:relative;z-index:2;margin-top:0}
  .group{margin:0 0 7px}
  .group-h{display:flex;align-items:center;gap:10px;margin:0 2px 4px}
  .group-h .gt{font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--color-surface)}
  .group-h .gline{flex:1;height:1px;background:var(--glass-border-dark)}
  .group-h .gtag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}
  /* 4 tiles per band -> one compact row; collapses 4->2->1. Even counts = no gaps. */
  .group-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  @media(max-width:1180px){.group-tiles{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.group-tiles{grid-template-columns:1fr}}

  /* ===== Flippable tile ===== */
  .tile{background:transparent;border:none;padding:0;perspective:1200px;min-height:140px;cursor:pointer}
  .tile-inner{position:relative;width:100%;height:100%;min-height:124px;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
  .tile.flipped .tile-inner{transform:rotateY(180deg)}
  .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:12px;padding:9px 12px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1);
    display:flex;flex-direction:column;transition:border-color .18s,background .18s;
    overflow-y:auto;overflow-x:hidden}/* #363: contain BOTH faces so long copy scrolls inside the tile, never bleeds onto the next tile */
  .tile:hover .face{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .face.back{transform:rotateY(180deg)}
  .tile .t{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
  .tile .lbl{font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--color-text-muted);line-height:1.25;min-width:0;overflow-wrap:anywhere}
  .tile .n{font-size:clamp(18px,1.6vw,25px);font-weight:800;letter-spacing:-.02em;margin:3px 0 2px;
    background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .tile .d{font-size:11.5px;color:var(--color-text-muted);line-height:1.4}
  .tile .asof{font-size:9.5px;color:var(--color-text-muted);opacity:.7;margin-top:3px;line-height:1.3;font-family:var(--font-mono)}
  /* Data source (system of record) in yellow - provenance at a glance */
  .tile .srcsys{font-size:10px;color:#ffd400;opacity:.92;margin-top:3px;line-height:1.3;font-family:var(--font-mono);white-space:normal;overflow-wrap:break-word}
  .tile-na .srcsys{color:#ffd400;opacity:.5}
  .tile-na .n{background:none;-webkit-text-fill-color:var(--color-text-muted);color:var(--color-text-muted)}
  .tile-na .face{opacity:.72}
  /* source badge */
  .srcb{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    padding:2px 6px;border-radius:var(--radius-pill);white-space:nowrap}
  .srcb .d{width:6px;height:6px;border-radius:50%}
  .srcb.live{color:var(--live);background:rgba(var(--up-rgb),.1);border:1px solid rgba(var(--up-rgb),.25)}
  .srcb.live .d{background:var(--live)}
  .srcb.sample{color:var(--sample);background:rgba(var(--sample-rgb),.1);border:1px solid rgba(var(--sample-rgb),.28)}
  .srcb.sample .d{background:var(--sample)}
  .srcb.estimate{color:var(--estimate);background:rgba(90,162,255,.1);border:1px solid rgba(90,162,255,.28)}
  .srcb.estimate .d{background:var(--estimate)}
  /* Flip affordance (#259): tiles flip to a detail/back face, but users couldn't
     tell they were clickable. Make the corner cue clearly visible + brand-tinted,
     with a "flip" label on hover so the interaction is obvious. */
  .fliphint{position:absolute;bottom:6px;right:9px;font-size:12px;color:#ffd400;opacity:.72;pointer-events:none;
    display:inline-flex;align-items:center;gap:3px;transition:opacity .15s}
  .tile:hover .fliphint,.vtile:hover .fliphint{opacity:1}
  .fliphint::after{content:'flip';font-family:var(--font-sans);font-size:8.5px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;max-width:0;overflow:hidden;opacity:0;transition:max-width .18s,opacity .18s}
  .tile:hover .fliphint::after,.vtile:hover .fliphint::after{max-width:40px;opacity:.9}
  /* #292: on touch devices hover never fires, so the flip cue must be persistent -
     show the glyph + its "flip" label up front, in a small brand-tinted chip. */
  @media (hover:none){
    .fliphint{opacity:.95;bottom:7px;right:7px;padding:2px 7px 2px 6px;border-radius:var(--radius-pill);
      background:rgba(255,212,0,.12);border:1px solid rgba(255,212,0,.32)}
    .fliphint::after{max-width:44px;opacity:.95}
  }
  /* #363: thin scrollbar on either face when copy is long (front stays value-focused
     via the clamp below; the back holds the full how-it's-computed detail). */
  .face{scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}
  .face::-webkit-scrollbar{width:6px}
  .face::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:6px}
  /* Front description stays tidy: clamp to 3 lines (the full text lives on the back). */
  .tile .face.front .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .face.back .bk-h{font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-surface);margin-bottom:5px}
  .face.back .bk-row{font-size:12px;color:rgba(248,247,243,.94);line-height:1.45;margin-bottom:5px}
  .face.back .bk-row b{color:var(--color-surface)}
  .wow{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--radius-pill);border:1px solid var(--glass-border-dark)}
  .wow.up{color:var(--up);background:rgba(var(--up-rgb),.08)}
  .wow.down{color:var(--down);background:rgba(var(--down-rgb),.08)}
  .wow.flat{color:var(--color-text-muted)}
  .bk-cta{margin-top:auto;font-family:var(--font-sans);font-weight:600;font-size:9.5px;color:var(--color-surface);
    background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:4px 9px;cursor:pointer;align-self:flex-start}
  .bk-cta:hover{border-color:var(--color-accent-pink)}

  /* ===== Funnel-constraint panel ===== */
  .constraint{background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:13px;padding:10px 13px;margin-top:7px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;z-index:2}
  .constraint .ch{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
  .constraint .ch .ct{font-weight:700;font-size:14px;color:var(--color-surface);min-width:0;overflow-wrap:anywhere}
  .constraint .ch .cs{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);min-width:0;overflow-wrap:anywhere}
  .steps-funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  @media(max-width:760px){.steps-funnel{grid-template-columns:repeat(2,1fr)}}
  .fstep{background:rgba(0,0,0,.3);border:1px solid var(--glass-border-dark);border-radius:10px;padding:7px 10px;position:relative;display:flex;flex-direction:column}
  .fstep.bottleneck{border-color:rgba(var(--color-accent-pink-rgb),.5);box-shadow:0 0 0 1px rgba(var(--color-accent-pink-rgb),.25)}
  .fstep .fk{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);overflow-wrap:anywhere}
  .fstep .fv{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-top:2px;color:var(--color-surface)}
  .fstep .ff{font-size:10.5px;color:var(--color-text-muted);margin-top:2px}
  .fstep .fdrop{font-size:11.5px;color:var(--color-text-muted);margin-top:1px;opacity:.85}
  .fstep .fdrop b{color:var(--color-accent-pink)}
  /* #289/#290: badge takes its own right-aligned row above the title so it can never overlap the label/value at any width */
  .fstep .badge{align-self:flex-end;margin-bottom:2px;max-width:100%;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:var(--color-accent-pink);background:rgba(var(--color-accent-pink-rgb),.12);border:1px solid rgba(var(--color-accent-pink-rgb),.3);border-radius:var(--radius-pill);padding:2px 7px}
  /* #58 inferred marker: a metric derived (not directly measured) from live GHL; self-corrects to measured when GHL records it */
  .fstep .finf{display:inline-block;margin-left:5px;vertical-align:middle;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
    color:#8fd0ff;background:rgba(90,170,255,.12);border:1px solid rgba(90,170,255,.32);border-radius:var(--radius-pill);padding:1px 6px}
  .constraint .insight{margin-top:6px;font-size:10.5px;color:var(--color-surface);background:rgba(var(--color-accent-pink-rgb),.08);border:1px solid var(--glass-border-dark);border-radius:10px;padding:7px 10px}
  .constraint .insight b{color:var(--color-accent-pink)}

  /* ===== Deals to work (#77) - named late-stage opportunities ===== */
  .deals-list{display:flex;flex-direction:column;gap:6px}
  .deal-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.3);border:1px solid var(--glass-border-dark);border-radius:10px;padding:7px 11px}
  .deal-row .dn{font-size:12.5px;font-weight:700;color:var(--color-surface);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .deal-row .ds{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent-pink);border:1px solid rgba(var(--color-accent-pink-rgb),.3);background:rgba(var(--color-accent-pink-rgb),.1);border-radius:var(--radius-pill);padding:2px 8px;white-space:nowrap}
  .deal-row .dv{font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--color-surface);white-space:nowrap}
  .deal-row .dt{font-size:10.5px;color:var(--color-text-muted);white-space:nowrap}
  @media(max-width:520px){.deal-row .dt{display:none}}

  /* ===== What-if scenario ===== */
  .scenario{background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:13px;padding:10px 13px;margin-top:7px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative;z-index:2}
  .scenario .sc-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
  .scenario .sc-title{font-weight:700;font-size:15px;color:var(--color-surface)}
  .scenario .sc-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--color-accent-pink);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:3px 9px}
  .scenario .sc-sub{font-size:10.5px;color:var(--color-text-muted);margin-bottom:5px}
  .sc-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px}
  @media(max-width:640px){.sc-controls{grid-template-columns:1fr}}
  .sc-ctl label{display:flex;justify-content:space-between;font-size:11px;color:var(--color-text-muted);margin-bottom:3px}
  .sc-ctl label b{color:var(--color-surface);font-weight:700}
  .sc-ctl input[type=range]{width:100%;accent-color:var(--color-accent-pink);cursor:pointer}
  .sc-out{margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-border-dark);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  @media(max-width:640px){.sc-out{grid-template-columns:1fr}}
  /* #551 degraded-data guard: a summary cell can never overflow its grid column
     (a long/degraded value wraps in place instead of forcing horizontal overflow
     that could visually collide with the cards). No effect on healthy short values. */
  .sc-out .o{min-width:0}
  .sc-out .o .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);margin-bottom:5px;overflow-wrap:anywhere}
  .sc-out .o .v{font-size:18px;font-weight:800;letter-spacing:-.02em;background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;overflow-wrap:anywhere}
  .sc-out .o .v.pos{background:none;-webkit-text-fill-color:var(--up);color:var(--up)}
  .sc-out .o .v.neg{background:none;-webkit-text-fill-color:var(--down);color:var(--down)}
  .v-delta{display:inline-block;margin-top:4px;font-family:var(--font-mono);font-size:11px;font-weight:600}
  .v-delta.up{color:var(--up)} .v-delta.down{color:var(--down)}
  .sc-insight{margin-top:6px;font-size:11px;color:var(--color-surface);background:rgba(var(--color-accent-pink-rgb),.08);border:1px solid var(--glass-border-dark);border-radius:10px;padding:8px 11px}
  .sc-insight b{color:var(--color-accent-pink)}
  /* #285 What-if is a PROJECTION sandbox: it recomputes a dedicated projection panel and,
     by design, NEVER mutates the live actuals tiles above. These styles make each recompute
     visible and state that separation so it is never ambiguous. */
  .scenario.is-live{box-shadow:0 0 0 1px var(--color-accent-pink),0 0 22px -6px var(--color-accent-pink)}
  .sc-state{margin:6px 0 2px;font-size:10.5px;line-height:1.45;color:var(--color-text-muted);border-left:2px solid var(--glass-border-dark);padding:3px 0 3px 9px}
  .sc-state.on{color:var(--color-surface);border-left-color:var(--color-accent-pink)}
  .sc-state b{color:var(--color-accent-pink)}
  .sc-out .o .v-base{display:block;margin-top:3px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--color-text-muted);-webkit-text-fill-color:var(--color-text-muted)}
  .sc-out.pulse{animation:sc-flash .5s ease-out}
  @keyframes sc-flash{0%{background:rgba(var(--color-accent-pink-rgb),.12)}100%{background:transparent}}
  @media(prefers-reduced-motion:reduce){.sc-out.pulse{animation:none}}
  .sc-reset{font-family:var(--font-sans);font-weight:600;font-size:11.5px;color:var(--color-surface);cursor:pointer;background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:5px 12px}
  .sc-reset:hover{border-color:var(--color-accent-pink)}
  /* #79 Save + name + compare scenarios (same tokens as the engine above; no restyle) */
  .sc-save{margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border-dark);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .sc-save input{flex:1;min-width:150px;font-family:var(--font-sans);font-size:12.5px;color:var(--color-surface);background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:7px 13px}
  .sc-save input:focus{outline:none;border-color:var(--color-accent-pink)}
  .sc-save .sc-savebtn{font-family:var(--font-sans);font-weight:600;font-size:11.5px;color:var(--color-black);cursor:pointer;background:var(--color-paper);border:none;border-radius:var(--radius-pill);padding:7px 15px}
  .sc-saved{margin-top:11px}
  .sc-saved .sv-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);margin-bottom:6px}
  /* DASH-15: saved-scenarios header row + Copy-summary share button. */
  .sc-saved .sv-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sv-copy{display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none;
    font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:0;text-transform:none;
    color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
    border-radius:var(--radius-pill);padding:5px 11px;transition:.14s}
  .sv-copy:hover{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink)}
  .sv-copy .ic{width:13px;height:13px}
  .sc-saved .sv-empty{font-size:11px;color:var(--color-text-muted)}
  .sc-cmp-wrap{overflow-x:auto}
  .sc-cmp{width:100%;border-collapse:collapse;font-size:12px}
  .sc-cmp th,.sc-cmp td{text-align:right;padding:6px 10px;white-space:nowrap;border-bottom:1px solid var(--glass-border-dark)}
  .sc-cmp th:first-child,.sc-cmp td:first-child{text-align:left}
  .sc-cmp thead th{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:600}
  .sc-cmp .row-plan td{color:var(--color-surface);background:rgba(255,255,255,.03)}
  .sc-cmp .sv-name{font-weight:700;color:var(--color-surface)}
  .sc-cmp td .v-delta{margin:0}
  .sc-cmp .sv-act{display:inline-flex;gap:6px}
  .sc-cmp .sv-btn{font-family:var(--font-sans);font-weight:600;font-size:10.5px;cursor:pointer;background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:4px 9px;color:var(--color-surface)}
  .sc-cmp .sv-btn:hover{border-color:var(--color-accent-pink)}
  /* ===== #286 What-if v2: dedicated tab, precise numeric inputs, funnel math ===== */
  .whatif-note{font-size:12px;line-height:1.5;color:var(--color-text-muted);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:12px;padding:11px 14px;margin-bottom:10px}
  .whatif-note b{color:var(--color-surface)}
  .sc-ctl .sc-inrow{display:flex;align-items:center;gap:9px}
  .sc-ctl .sc-inrow input[type=range]{flex:1;min-width:0}
  .sc-num{display:inline-flex;align-items:center;gap:2px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:8px;padding:2px 7px}
  .sc-num:focus-within{border-color:var(--color-accent-pink)}
  .sc-num .sc-num-fix{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted)}
  .sc-num input[type=number]{width:62px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;text-align:right;color:var(--color-surface);background:transparent;border:none;padding:3px 0;-moz-appearance:textfield}
  .sc-num input[type=number]:focus{outline:none}
  /* DASH-10: +/- steppers - hidden on desktop (slider + typed input suffice),
     shown as 44px thumb targets at the mobile breakpoint for one-handed use. */
  .sc-step{display:none}
  @media(max-width:768px){
    .sc-step{display:inline-flex;align-items:center;justify-content:center;flex:none;
      width:44px;height:44px;font-size:22px;line-height:1;cursor:pointer;
      color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
      border-radius:12px;transition:.14s}
    .sc-step:active{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink)}
    .sc-ctl .sc-inrow{gap:7px;flex-wrap:wrap}
    .sc-ctl .sc-inrow input[type=range]{flex:1 1 100%;height:30px}
    /* Bigger thumbs so the slider is grabbable one-handed. */
    .sc-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--color-accent-pink);border:2px solid #fff2;cursor:pointer}
    .sc-ctl input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--color-accent-pink);border:2px solid #fff2;cursor:pointer}
    .sc-num{flex:1;justify-content:center}
    .sc-num input[type=number]{width:100%;text-align:center;font-size:15px}
  }
  .sc-num input[type=number]::-webkit-outer-spin-button,.sc-num input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .sc-src{margin-top:3px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--color-text-muted);text-transform:uppercase}
  .sc-flow{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border-dark)}
  .sc-step{flex:1;min-width:78px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border-dark);border-radius:10px;padding:8px 9px;text-align:center}
  .sc-step .sc-step-v{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--color-surface)}
  .sc-step .sc-step-k{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-top:2px}
  .sc-step .sc-step-n{font-size:9.5px;color:var(--color-text-muted);margin-top:1px}
  .sc-arw{display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--color-accent-pink);padding:0 2px;white-space:nowrap}
  .sc-arw small{font-size:8.5px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}
  @media(max-width:640px){.sc-flow{flex-direction:column}.sc-arw{flex-direction:row;gap:5px;padding:2px 0}}

  /* ===== Layout: main column + right chat rail (resizable + collapsible) ===== */
  .layout{display:grid;grid-template-columns:1fr 8px var(--chat-w,360px);gap:14px;align-items:stretch;position:relative;z-index:2;margin-top:8px;height:calc(100vh - 214px);min-height:440px}
  .layout.collapsed{grid-template-columns:1fr}
  .layout.collapsed .resizer,.layout.collapsed .rail{display:none}
  .main{min-width:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}
  .main::-webkit-scrollbar{width:10px}
  .main::-webkit-scrollbar-track{background:transparent}
  .main::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:8px;border:2px solid transparent;background-clip:content-box}
  .main::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}
  .main .funnel{margin-top:0}
  .resizer{align-self:stretch;cursor:col-resize;border-radius:6px;background:var(--glass-border-dark);transition:background .15s;position:relative}
  .resizer:hover,.resizer.drag{background:var(--color-accent-pink)}
  .resizer::after{content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-text-muted);font-size:13px}
  .rail{min-width:0;height:auto;align-self:start;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}
  .rail::-webkit-scrollbar{width:10px}
  .rail::-webkit-scrollbar-track{background:transparent}
  .rail::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:8px;border:2px solid transparent;background-clip:content-box}
  .rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}
  .rail-launcher{display:none;position:fixed;right:24px;bottom:24px;z-index:20;font-family:var(--font-sans);font-weight:600;font-size:13px;
    color:var(--color-black);background:var(--color-paper);border:none;border-radius:var(--radius-pill);padding:12px 18px;cursor:pointer;
    box-shadow:0 12px 30px rgba(0,0,0,.5)}
  .layout.collapsed ~ .rail-launcher{display:inline-block}
  .rail-hide{margin-left:auto;width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
    color:var(--color-surface);background:transparent;border:1px solid var(--glass-border-dark);border-radius:8px;font-size:14px}
  .rail-hide:hover{border-color:var(--color-accent-pink)}
  #reset-chat + #rail-hide{margin-left:0}   /* keep the reset + hide controls adjacent at the header's right edge */

  /* ===== Chat - fills the right rail, message area scrolls ===== */
  .chat{background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:20px;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;flex-direction:column;
    height:var(--chat-h, calc(100vh - 214px));min-height:360px;max-height:calc(100vh - 120px);overflow:hidden;resize:vertical;position:relative;z-index:2;
    box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12)}
  .chat .head{padding:15px 20px;border-bottom:1px solid var(--glass-border-dark);display:flex;align-items:center;gap:11px}
  .chat .dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent-pink);box-shadow:0 0 0 4px rgba(var(--color-accent-pink-rgb),.14)}
  .chat .who{font-weight:600;font-size:14px;color:var(--color-surface)}
  .chat .role{font-size:11px;color:var(--color-text-muted)}
  /* Stripe-required banner (top of main column) */
  .stripe-cta{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:9px 14px;border-radius:12px;
    background:rgba(var(--sample-rgb),.10);border:1px solid rgba(var(--sample-rgb),.35)}
  .stripe-cta .sc-ico{color:var(--sample);font-size:15px;line-height:1}
  .stripe-cta .sc-txt{flex:1;font-size:11.5px;line-height:1.4;color:rgba(248,247,243,.85)}
  .stripe-cta .sc-txt b{color:#ffd400}
  .stripe-cta .sc-btn{flex:none;font-family:var(--font-sans);font-weight:700;font-size:11.5px;color:#0b0b0c;cursor:pointer;
    background:#ffd400;border:none;border-radius:9px;padding:7px 13px;white-space:nowrap}
  .stripe-cta .sc-btn:hover{filter:brightness(.95)}
  .stripe-cta.hidden{display:none}
  /* DASH-04: single-line, dismissible form under the hero headline - a quiet
     nudge, not a billboard. No fill, hairline top rule, compact type. */
  .stripe-cta.line{margin:2px 0 6px;padding:6px 0;gap:8px;background:none;border:none;
    border-top:1px solid var(--glass-border-dark);border-radius:0;font-size:11px}
  .stripe-cta.line .sc-ico .ic{width:14px;height:14px}
  .stripe-cta.line .sc-txt{font-size:11px;color:var(--color-text-muted)}
  .stripe-cta.line .sc-txt b{color:#ffd400}
  .stripe-cta.line .sc-btn{background:none;color:#ffd400;border:1px solid rgba(255,212,0,.45);
    border-radius:var(--radius-pill);padding:3px 11px;font-size:11px}
  .stripe-cta.line .sc-btn:hover{background:rgba(255,212,0,.12);filter:none}
  .sc-dismiss{flex:none;cursor:pointer;background:none;border:none;color:var(--color-text-muted);
    font-size:17px;line-height:1;padding:2px 6px;border-radius:8px;transition:.15s}
  .sc-dismiss:hover{color:var(--color-surface);background:var(--glass-bg-dark-hover)}
  /* Begin-onboarding button (chat setup) - compact, accent-outlined, not a billboard */
  .onboard-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;cursor:pointer;text-align:left;white-space:nowrap;
    font-family:var(--font-sans);font-weight:600;font-size:12px;color:#ffd400;background:rgba(255,212,0,.10);
    border:1px solid rgba(255,212,0,.45);border-radius:var(--radius-pill);padding:7px 14px;transition:.15s}
  .onboard-btn:hover{background:rgba(255,212,0,.16);border-color:#ffd400}
  .onboard-btn small{font-weight:500;font-size:10px;color:rgba(255,212,0,.65);white-space:normal}
  @media(max-width:1180px){.onboard-btn small{display:none}}
  /* Setup-completeness meter (nudges the one connection that unlocks the most) */
  .setupmeter{display:flex;flex-direction:column;gap:5px;margin:2px 0 4px}
  .setupmeter .sm-top{display:flex;justify-content:space-between;font-size:10.5px;color:var(--color-text-muted)}
  .setupmeter .sm-top b{color:var(--color-surface);font-weight:700}
  .setupmeter .sm-bar{height:6px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);overflow:hidden}
  .setupmeter .sm-fill{height:100%;background:linear-gradient(90deg,#4ade80,#2f6bff);border-radius:var(--radius-pill);transition:width .5s}
  .setupmeter .sm-next{font-size:10.5px;color:#ffd400;cursor:pointer;align-self:flex-start}
  .setupmeter .sm-next:hover{text-decoration:underline}
  /* Connections/setup can shrink + scroll internally when the chat is short (kiosk,
     small viewports) so it never pushes the input (.inp) off the bottom - #138. */
  .setup{padding:12px 16px;border-bottom:1px solid var(--glass-border-dark);display:flex;flex-direction:column;gap:8px;
    min-height:0;flex-shrink:1;overflow-y:auto}
  .setup .cap{font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:var(--color-text-muted)}
  .steps{display:flex;gap:8px;flex-wrap:wrap}
  .step{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-sans);
    background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:12px;padding:9px 11px;
    font-size:11.5px;font-weight:500;color:var(--color-surface);transition:.15s;text-align:left}
  .step:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover)}
  .step .ic{font-size:15px}
  .step.done{border-color:rgba(var(--up-rgb),.4);color:var(--up);cursor:default}
  .step small{display:block;font-size:10.5px;color:var(--color-text-muted);font-weight:400}
  .step.done small{color:rgba(var(--up-rgb),.7)}
  /* #92 Connector health - tiles with a health dot + in-tile settings gear */
  .conns{display:flex;flex-direction:column;gap:6px}
  .conn{position:relative;display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.35);
    border:1px solid var(--glass-border-dark);border-radius:12px;padding:8px 10px;font-size:11.5px;color:var(--color-surface)}
  .conn .hdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--color-text-muted)}
  .conn .hdot.ok{background:var(--up);box-shadow:0 0 0 3px rgba(var(--up-rgb),.16)}
  .conn .hdot.down{background:var(--down);box-shadow:0 0 0 3px rgba(var(--down-rgb),.18)}
  .conn .hdot.pending{background:var(--sample);box-shadow:0 0 0 3px rgba(var(--sample-rgb),.16)}
  .conn .hdot.unknown,.conn .hdot.off{background:var(--color-text-muted)}
  .conn.ok{border-color:rgba(var(--up-rgb),.35)}
  .conn.down{border-color:rgba(var(--down-rgb),.45)}
  .conn-main{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .conn-name{font-weight:600}
  .conn-main small{font-size:10.5px;color:var(--color-text-muted);font-weight:400;white-space:normal;overflow-wrap:break-word}
  .conn.down .conn-main small{color:var(--down)}
  .conn-gear{flex:none;cursor:pointer;background:transparent;border:1px solid var(--glass-border-dark);border-radius:8px;
    width:26px;height:26px;font-size:12px;line-height:1;color:var(--color-surface);transition:.15s}
  .conn-gear:hover{border-color:var(--color-accent-pink)}
  /* #92 State-aware inline action: Connect (grey) / Manage (green) / Reconnect + Troubleshoot (red) */
  .conn-act{flex:none;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:10.5px;white-space:nowrap;
    background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:8px;padding:6px 10px;
    color:var(--color-surface);transition:.15s}
  .conn-act:hover{border-color:var(--glass-border-dark-hover);background:var(--glass-bg-dark-hover)}
  .conn.ok .conn-act{color:var(--up);border-color:rgba(var(--up-rgb),.4)}
  .conn.ok .conn-act:hover{background:rgba(var(--up-rgb),.12)}
  .conn.down .conn-act{color:var(--down);border-color:rgba(var(--down-rgb),.5)}
  .conn.down .conn-act:hover{background:rgba(var(--down-rgb),.14)}
  .conn.pending .conn-act{color:#ffd400;border-color:rgba(255,212,0,.45)}
  .conn.add{border-style:dashed}
  .conn.add .conn-name{color:var(--color-text-muted)}
  .conn-menu{display:none;position:absolute;right:8px;top:38px;z-index:30;flex-direction:column;min-width:168px;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark-hover);border-radius:10px;padding:5px;
    backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .conn-menu.open{display:flex}
  .conn-menu button{text-align:left;cursor:pointer;background:transparent;border:0;border-radius:7px;padding:8px 10px;
    font-family:var(--font-sans);font-size:11.5px;font-weight:500;color:var(--color-surface);transition:.12s}
  .conn-menu button:hover{background:var(--glass-bg-dark-hover)}
  /* #11 details header inside the manage popover: last sync · scope · how it's wired */
  .conn-menu-hd{padding:6px 10px 7px;margin:0 0 4px;border-bottom:1px solid var(--glass-border-dark);
    font-size:10px;line-height:1.5;color:var(--color-text-muted);font-weight:400;white-space:normal;overflow-wrap:anywhere}
  /* #11 Disconnect is a destructive action - flag it */
  .conn-menu button.danger{color:var(--down)}
  .conn-menu button.danger:hover{background:rgba(var(--down-rgb),.14)}
  /* #92 auto-tile-on-connect: a new/reconnected tile slides + flashes in once */
  @keyframes connIn{
    0%{opacity:0;transform:translateY(-6px);box-shadow:0 0 0 0 rgba(var(--up-rgb),0)}
    35%{opacity:1;transform:translateY(0)}
    60%{box-shadow:0 0 0 3px rgba(var(--up-rgb),.28)}
    100%{box-shadow:0 0 0 0 rgba(var(--up-rgb),0)}
  }
  .conn.just-added{animation:connIn .7s ease-out}
  @media (prefers-reduced-motion:reduce){ .conn.just-added{animation:none} }
  .conn .hdot.degraded{background:var(--sample);box-shadow:0 0 0 3px rgba(var(--sample-rgb),.16)}
  .conn.degraded{border-color:rgba(var(--sample-rgb),.4)}
  .conn.degraded .conn-main small{color:var(--sample)}
  .conn.degraded .conn-act{color:#ffd400;border-color:rgba(255,212,0,.45)}

  /* ===== #153 SAP1: home traffic-light cluster + hot-action banner ===== */
  /* Reusable traffic light - a single dot whose colour is driven by real health. */
  .tl{display:inline-flex;flex:none}
  .tl .tl-dot{width:11px;height:11px;border-radius:50%;background:var(--color-text-muted);transition:background .3s,box-shadow .3s}
  .tl.big .tl-dot{width:15px;height:15px}
  .green .tl-dot{background:var(--up);box-shadow:0 0 0 4px rgba(var(--up-rgb),.16)}
  .yellow .tl-dot{background:var(--sample);box-shadow:0 0 0 4px rgba(var(--sample-rgb),.18)}
  .red .tl-dot{background:var(--down);box-shadow:0 0 0 4px rgba(var(--down-rgb),.20)}
  .connhealth{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:8px 14px;border-radius:12px;cursor:pointer;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);transition:.15s}
  .connhealth:hover{border-color:var(--glass-border-dark-hover);background:var(--glass-bg-dark-hover)}
  .connhealth.green{border-color:rgba(var(--up-rgb),.32)}
  .connhealth.yellow{border-color:rgba(var(--sample-rgb),.38)}
  .connhealth.red{border-color:rgba(var(--down-rgb),.45)}
  .connhealth .tl-txt{font-weight:600;font-size:12.5px;color:var(--color-surface);white-space:nowrap}
  .connhealth .ch-meter{flex:1;min-width:0;font-size:11px;color:var(--color-text-muted);display:flex;align-items:center;gap:8px;overflow:hidden}
  .connhealth .ch-meter b{color:var(--color-surface);font-weight:700}
  .connhealth .ch-meter .chm-bar{flex:none;width:74px;height:6px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);overflow:hidden}
  .connhealth .ch-meter .chm-fill{height:100%;background:linear-gradient(90deg,#4ade80,#2f6bff);border-radius:var(--radius-pill);transition:width .5s}
  .connhealth .ch-go{flex:none;font-size:11px;font-weight:600;color:var(--color-accent-pink);white-space:nowrap}
  /* Mobile: the inline setup meter ("Setup 75% · 3/4 sources") gets squished to
     garbage ("S 7") in the narrow flex row. Hide it under 560px - the dot +
     "Connections need attention" + the Connections-> link carry the signal, and
     the full meter lives one tap away on the Connections tab. */
  @media(max-width:560px){.connhealth .ch-meter{display:none}}
  /* DASH-04: compact "chip" form of the connection-health indicator, sitting in
     the hero's top-right corner. Pill-shaped, tighter, no inline setup meter
     (that full read stays one tap away on the Connections tab). */
  .connhealth.chip{margin:0;padding:5px 12px;gap:8px;border-radius:var(--radius-pill);min-height:32px}
  .connhealth.chip .ch-meter{display:none}
  .connhealth.chip .tl .tl-dot{width:9px;height:9px}
  .connhealth.chip .tl-txt{font-size:11.5px}
  .connhealth.chip .ch-go{color:var(--color-text-muted);font-size:13px}
  .connhealth.chip:hover .ch-go{color:var(--color-accent-pink)}
  /* Hot-action banner - mirrors the stripe-cta weight so a down connector reads as urgent. */
  .hotaction{display:flex;align-items:center;gap:11px;margin:0 0 12px;padding:9px 14px;border-radius:12px;
    background:rgba(var(--down-rgb),.10);border:1px solid rgba(var(--down-rgb),.42)}
  .hotaction.warn{background:rgba(var(--sample-rgb),.10);border-color:rgba(var(--sample-rgb),.4)}
  .hotaction .ha-ico{font-size:15px;line-height:1;flex:none}
  .hotaction .ha-txt{flex:1;font-size:11.5px;line-height:1.4;color:rgba(248,247,243,.9)}
  .hotaction .ha-txt b{color:var(--color-surface)}
  .hotaction .ha-btn{flex:none;font-family:var(--font-sans);font-weight:700;font-size:11.5px;color:#0b0b0c;cursor:pointer;
    background:#ff5d7e;border:none;border-radius:9px;padding:7px 13px;white-space:nowrap}
  .hotaction.warn .ha-btn{background:#ffd400}
  .hotaction .ha-btn:hover{filter:brightness(.95)}
  /* ===== #153 Connections/status board ===== */
  /* DASH-06: System health segmented control (Setup | Monitor). */
  .seg{display:inline-flex;gap:3px;background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);
    border-radius:var(--radius-pill);padding:3px;margin:0 0 14px}
  .seg-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;
    font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-text-muted);
    background:transparent;border:none;border-radius:var(--radius-pill);padding:8px 16px;min-height:38px;transition:.15s}
  .seg-btn:hover{color:var(--color-surface)}
  .seg-btn.on{color:var(--color-black);background:var(--color-paper)}
  .seg-btn:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
  .seg-btn .ic{width:15px;height:15px}
  #board-connections .conn-hero{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
    margin:0 0 14px;padding:14px 18px;border-radius:16px;background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark)}
  #board-connections .conn-hero-l{display:flex;align-items:center;gap:13px;min-width:0}
  #board-connections .conn-hero-t{font-weight:700;font-size:16px;color:var(--color-surface)}
  #board-connections .conn-hero-s{font-size:11.5px;color:var(--color-text-muted)}
  #board-connections .conn-hero-r{display:flex;align-items:center;gap:14px}
  #board-connections .conn-hero-r .setupmeter{min-width:180px}
  #board-connections .conns{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
  #board-connections .conn{align-items:flex-start;padding:13px 14px}
  #board-connections .conn .conn-main small{white-space:normal}
  #board-connections .conn-menu{top:auto;bottom:8px;right:44px}
  #board-connections .conn-onboard{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
  #board-connections .conn-onboard-note{font-size:10.5px;color:var(--color-text-muted);flex:1;min-width:220px}
  /* #245 Observability tab */
  #board-observability .conn-hero{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px 18px;margin-bottom:12px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:14px}
  #board-observability .conn-onboard-note{display:block;margin-top:12px;font-size:10.5px;color:var(--color-text-muted)}
  .obs-rows{display:flex;flex-direction:column;gap:6px}
  .obs-row{display:flex;align-items:center;gap:11px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);border-radius:12px;padding:13px 15px}
  .obs-row.overdue{border-color:rgba(var(--down-rgb),.4)}
  .obs-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--color-text-muted)}
  .obs-dot.ok{background:var(--up);box-shadow:0 0 0 4px rgba(var(--up-rgb),.16)}
  .obs-dot.overdue{background:var(--down);box-shadow:0 0 0 4px rgba(var(--down-rgb),.16)}
  .obs-dot.unknown{background:var(--color-text-muted)}
  .obs-dot.warn{background:#f5b544;box-shadow:0 0 0 4px rgba(245,181,68,.16)}
  .obs-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
  .obs-name{font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--color-surface)}
  .obs-main small{font-size:11.5px;color:var(--color-text-muted);white-space:normal;overflow-wrap:anywhere}
  .obs-badge{font-family:var(--font-sans);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap}
  .obs-badge.ok{color:var(--up);background:rgba(var(--up-rgb),.1);border:1px solid rgba(var(--up-rgb),.28)}
  .obs-badge.overdue{color:var(--down);background:rgba(var(--down-rgb),.1);border:1px solid rgba(var(--down-rgb),.28)}
  .obs-badge.unknown{color:var(--color-text-muted);background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark)}
  .obs-badge.warn{color:#f5b544;background:rgba(245,181,68,.1);border:1px solid rgba(245,181,68,.3)}
  .obs-section-h{font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-muted);margin:16px 2px 8px}
  .obs-section-h:first-child{margin-top:2px}
  .obs-empty{font-size:12.5px;color:var(--color-text-muted);padding:14px 4px}
  .obs-asof{font-size:10.5px;color:var(--color-text-muted);margin-top:8px}
  body.kiosk .hotaction,body.kiosk .connhealth .ch-go{display:none !important}
  .msgs{flex:1 1 auto;min-height:44px;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}/* #340: message history yields so wrapped pills always fit */
  .msgs::-webkit-scrollbar{width:10px}
  .msgs::-webkit-scrollbar-track{background:transparent}
  .msgs::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:8px;border:2px solid transparent;background-clip:content-box}
  .msgs::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}
  .msgs{scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}
  .msg{max-width:760px;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
  .msg.user{align-self:flex-end;background:var(--color-paper);color:var(--color-black);font-weight:500;border-bottom-right-radius:5px}
  .msg.bot{align-self:flex-start;background:rgba(0,0,0,.35);border:1px solid var(--glass-border-dark);color:rgba(248,247,243,.92);border-bottom-left-radius:5px}
  .msg.bot b{color:var(--color-surface);font-weight:600}
  /* #403: in-flight "thinking" indicator. The assistant response slot animates the
     instant a fleet call goes out, so it is obvious the agent is working, not stuck
     (real latency now that complex questions route to Opus via the fleet). It is a
     .msg.bot bubble so it inherits the app-shell chat styling exactly. Respects
     prefers-reduced-motion: the dots stop animating, the text still reads. */
  .msg.bot.thinking{display:flex;align-items:center;gap:9px;color:rgba(248,247,243,.7)}
  .msg.bot.thinking .tk-dots{display:inline-flex;gap:4px;flex:0 0 auto}
  .msg.bot.thinking .tk-dots i{width:6px;height:6px;border-radius:50%;background:var(--color-accent-pink);display:inline-block;animation:tk-bounce 1.2s ease-in-out infinite}
  .msg.bot.thinking .tk-dots i:nth-child(2){animation-delay:.18s}
  .msg.bot.thinking .tk-dots i:nth-child(3){animation-delay:.36s}
  .msg.bot.thinking .tk-txt{font-size:12.5px}
  @keyframes tk-bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
  @media(prefers-reduced-motion:reduce){
    .msg.bot.thinking .tk-dots i{animation:none;opacity:.8}
  }
  /* #243: smart buttons - a dynamic top row + two labelled bands (Ask / Act) */
  /* #340: the smart-button region is a shrink-capable, internally-scrollable band
     so resizing the chat/composer never crushes or clips the buttons - when space
     is tight it scrolls instead of squeezing, and the primary Ask row stays reachable. */
  /* #340 (re-fix): the smart-button pills always render in full - flex:0 0 auto so
     they never shrink or scroll away. The composer's drag cap (initInputSplitter
     MAX) reserves this height, so expanding the chat box can no longer eat them.
     The high max-height is a pure last-resort safety for tiny panels. */
  .suggest{padding:0 20px 12px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto;
    overflow-y:auto;max-height:62vh;scrollbar-width:thin;scrollbar-color:var(--glass-border-dark-hover) transparent}
  .suggest::-webkit-scrollbar{width:8px}
  .suggest::-webkit-scrollbar-thumb{background:var(--glass-border-dark-hover);border-radius:8px}
  .sug{font-family:var(--font-sans);font-weight:600;font-size:11px;color:var(--color-surface);cursor:pointer;
    display:inline-flex;align-items:center;gap:5px;/* DASH-02: align inline-SVG glyph with label */
    background:var(--glass-bg-dark-hover);border:1px solid var(--glass-border-dark-hover);border-radius:var(--radius-pill);padding:5px 11px;transition:.15s}
  .sug .ic{width:14px;height:14px}
  .sug:hover{background:rgba(255,255,255,.14);border-color:var(--color-accent-pink);transform:translateY(-1px)}
  .sug-band{display:flex;align-items:flex-start;gap:10px}
  .sug-band-label{flex:none;min-width:26px;padding-top:8px;font-size:9.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--color-text-muted)}
  /* #340 (re-fix v2): pills WRAP so every one is visible - no horizontal cut-off and
     no hidden scrollbar. The composer cap reserves the pills' full height and .msgs
     yields, so expanding the chat can't hide them and Send is never clipped. */
  .sug-band-btns{flex:1;min-width:0;display:flex;gap:7px;flex-wrap:wrap}
  /* Act band reads as "do", subtly warmer than the analytical Ask band */
  .sug-act{background:rgba(var(--color-accent-pink-rgb),.09);border-color:rgba(var(--color-accent-pink-rgb),.30)}
  .sug-act:hover{background:rgba(var(--color-accent-pink-rgb),.16);border-color:var(--color-accent-pink)}
  /* DASH-11: Feedback band sits apart from Ask/Act - a hairline above it and a
     quieter, neutral chip so issue-filing never reads as a data prompt. */
  .sug-band-feedback{margin-top:4px;padding-top:12px;border-top:1px solid var(--glass-border-dark)}
  .sug-band-feedback .sug-act{background:var(--glass-bg-dark);border-color:var(--glass-border-dark);color:var(--color-text-muted)}
  .sug-band-feedback .sug-act:hover{background:var(--glass-bg-dark-hover);border-color:var(--glass-border-dark-hover);color:var(--color-surface)}
  /* Dynamic, snapshot-derived row - visually "live" (accent), sits above the staples */
  .sug-dynrow{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:9px;margin-bottom:1px;border-bottom:1px solid var(--glass-border-dark)}
  .sug-dynrow[hidden]{display:none}
  .sug-dyn{background:rgba(47,107,255,.12);border-color:rgba(47,107,255,.45);color:var(--color-surface)}
  .sug-dyn:hover{background:rgba(47,107,255,.2);border-color:var(--color-accent-pink)}

  /* #241: composer - textarea + Send share ONE bordered frame; Send anchored inside */
  .inp{display:block;padding:14px 20px;border-top:1px solid var(--glass-border-dark)}
  .composer{display:flex;flex-direction:column;background:rgba(0,0,0,.35);
    border:1px solid var(--glass-border-dark);border-radius:14px;transition:border-color .15s;overflow:hidden}
  .composer:focus-within{border-color:rgba(47,107,255,.45)}
  .composer textarea{background:transparent;border:none;color:var(--color-surface);
    padding:12px 15px 4px;font-size:13.5px;font-family:var(--font-sans);line-height:1.45;outline:none;
    resize:none;min-height:46px;max-height:30vh;overflow-y:auto;width:100%}/* #340: composer can't eat the whole panel */
  .composer textarea::placeholder{color:rgba(248,247,243,.35)}
  .composer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 8px 14px}
  .composer-hint{font-size:10.5px;color:var(--color-text-muted);white-space:normal;overflow-wrap:break-word}
  .composer .ball-btn{flex:none;padding:9px 20px;font-size:12.5px}
  @media(max-width:1180px){.composer-hint{display:none}}
  /* Active-flow bar - shows which guided flow you're in + a cancel (onboarding/bug/feature) */
  .flowbar{display:none;align-items:center;gap:9px;padding:9px 20px;border-top:1px solid var(--glass-border-dark);
    background:rgba(var(--color-accent-pink-rgb),.07);font-size:11.5px;color:rgba(248,247,243,.9)}
  .flowbar.open{display:flex}
  .flowbar .fb-dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent-pink);flex:none;
    box-shadow:0 0 0 4px rgba(var(--color-accent-pink-rgb),.14)}
  .flowbar .fb-label b{color:var(--color-surface);font-weight:600}
  .flowbar .fb-cancel{margin-left:auto;flex:none;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:11px;
    color:var(--color-text-muted);background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:4px 11px;transition:.15s}
  .flowbar .fb-cancel:hover{border-color:var(--color-accent-pink);color:var(--color-surface)}

  /* Stack the rail under the main column on narrow screens */
  @media(max-width:1000px){
    .layout{grid-template-columns:1fr;height:auto;min-height:0}
    .main{overflow:visible;padding-right:0}
    .resizer{display:none}
    .chat-corner{display:none}
    .rail{height:auto}
    .chat{height:560px;margin-top:6px}
  }

  .ball-btn{position:relative;border:none;border-radius:10px;overflow:hidden;padding:13px 24px;cursor:pointer;
    background:var(--color-paper);font-family:var(--font-sans);font-weight:600;font-size:13px;
    box-shadow:0 16px 20px rgba(0,0,0,.35),inset 0 5px 3px -3px rgba(255,255,255,.6),inset 0 4px 20px -5px rgba(255,255,255,.4)}
  .ball-btn .grad{position:absolute;inset:0;pointer-events:none}
  .ball-btn .ball{position:absolute;width:50%;height:50%;filter:blur(20px);mix-blend-mode:overlay;border-radius:50%}
  .ball-btn .b1{background:linear-gradient(90deg,#2483ff,#ff66f4);top:-10%;left:-5%;animation:drift1 6s ease-in-out infinite alternate}
  .ball-btn .b2{background:linear-gradient(78deg,#ff66f4,#ff3029 53%,#fe7b02);bottom:-10%;right:-5%;animation:drift2 7s ease-in-out infinite alternate}
  .ball-btn .txt{position:relative;z-index:5;color:var(--color-black)}
  @keyframes drift1{from{transform:translate(0,0)}to{transform:translate(60%,40%)}}
  @keyframes drift2{from{transform:translate(0,0)}to{transform:translate(-60%,-40%)}}
  @media(prefers-reduced-motion:reduce){.ball-btn .ball{animation:none}.tile-inner{transition:none}}

  footer{max-width:1240px;margin:18px auto 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    font-family:var(--font-mono);font-size:11px;color:rgba(4,6,14,.55)}

  @media(max-width:560px){
    body{padding:8px}
    .stage{padding:20px 16px}
    .lockup{flex-direction:column;align-items:flex-start;gap:6px}
    .divider{display:none}
    .wordmark{font-size:17px}
    .wordmark .as-logo{height:22px}
    .legend{font-size:10px;gap:10px;padding:7px 12px}
    .filters{gap:7px;margin:20px 0 8px}
    .pill{padding:8px 15px;font-size:12.5px}
    .hero .big{font-size:29px;line-height:1.14}
    .hero .math{font-size:11.5px}
    .scenario{padding:18px 16px}
    .sc-controls{grid-template-columns:1fr}
    .sc-out{grid-template-columns:1fr 1fr}
    .sc-out .o:last-child,.sc-insight{grid-column:1/-1}
    /* DASH-09: System-health jobs + integrations already render as .obs-row cards
       (name + last-run + status pill); connection cards go single-column here so
       nothing scrolls sideways at 375px. The What-if compare table stays inside
       its own overflow-x:auto wrapper (.sc-cmp-wrap). */
    #board-connections .conns{grid-template-columns:1fr}
    .obs-row{align-items:flex-start}
    .obs-badge{flex:none;align-self:flex-start}
    .chat{height:520px}
    footer{flex-direction:column;gap:4px}
  }

  /* ===== Kiosk / full-screen mode (#113) - wall-display / boardroom TV =====
     Session-only. Toggled by adding `.kiosk` to <body>. Hides the filter/refresh
     and secondary chrome; scales the hero + tiles so the numbers read from across
     a room. The chat rail is KEPT (two-column boardroom layout) with a usable input
     (#138). Tab switching (Revenue | Company Vitals) is preserved. Nothing persisted. */
  .kiosk-btn{font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-surface);cursor:pointer;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;
    background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:8px 15px;transition:.15s}
  .kiosk-btn:hover{background:var(--glass-bg-dark-hover);border-color:var(--color-accent-pink);transform:translateY(-1px)}
  /* Exit affordance - only visible while in kiosk */
  .kiosk-exit{display:none;position:fixed;top:20px;right:22px;z-index:60;align-items:center;gap:8px;
    font-family:var(--font-sans);font-weight:700;font-size:14px;color:var(--color-black);cursor:pointer;
    background:var(--color-paper);border:none;border-radius:var(--radius-pill);padding:11px 18px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
  .kiosk-exit:hover{filter:brightness(.95)}
  .kiosk-exit .ke-esc{font-family:var(--font-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:var(--color-surface);background:var(--color-black);border-radius:6px;padding:2px 7px}
  body.kiosk .kiosk-exit{display:inline-flex}

  /* Give the board the whole viewport */
  body.kiosk{padding:0;overflow:hidden}
  body.kiosk .holo-ring{max-width:none;height:100vh;border-radius:0;padding:0;margin:0}
  body.kiosk .stage{border-radius:0;height:100vh;display:flex;flex-direction:column;padding:clamp(18px,2.4vw,40px) clamp(22px,3vw,56px)}
  /* Hide the chrome that doesn't belong on a wall display */
  body.kiosk .legend,
  body.kiosk .kiosk-btn,
  body.kiosk .nav-back,
  body.kiosk .tabtools,
  body.kiosk #rev-controls,
  body.kiosk .rail-launcher,
  body.kiosk .stripe-cta,
  body.kiosk .scenario,
  body.kiosk footer{display:none !important}
  /* Keep a minimal tab switcher, scaled up */
  body.kiosk .tabs{margin:14px 0 4px}
  body.kiosk .tab{font-size:clamp(15px,1.2vw,20px);padding:10px 24px}
  /* Layout becomes a single, full-height, scrollable column */
  /* Keep the two-column boardroom layout in kiosk so the chat rail stays on-screen.
     The rail + chat fill the grid-row height exactly, so .msgs flexes and the input
     (.inp) stays pinned at the bottom and reachable (was collapsing to a clipped
     single column below the fold - #138). */
  body.kiosk .layout{grid-template-columns:1fr 8px var(--chat-w,380px);height:auto;flex:1;min-height:0;margin-top:6px}
  body.kiosk .main{padding-right:14px}
  body.kiosk .rail{height:100%;align-self:stretch;min-height:0}
  body.kiosk .chat{height:100%;min-height:0;max-height:none;resize:none}

  /* Scale up the numbers so they read across a room */
  body.kiosk .hero .big{font-size:clamp(28px,3.4vw,52px);line-height:1.08}
  body.kiosk .hero .math{font-size:clamp(11px,.9vw,15px)}
  body.kiosk .hero-status{font-size:clamp(11px,.85vw,15px);padding:6px 15px}
  body.kiosk .pace{font-size:clamp(11px,.9vw,15px)}
  body.kiosk .progress .plabel b{font-size:clamp(13px,1vw,18px)}
  body.kiosk .moves-h .mt,body.kiosk .group-h .gt{font-size:clamp(15px,1.3vw,22px)}
  body.kiosk .move .mhead{font-size:clamp(13px,1.05vw,18px)}
  body.kiosk .move .msub{font-size:clamp(11px,.85vw,14px)}
  body.kiosk .tile,body.kiosk .tile-inner{min-height:clamp(150px,15vw,220px)}
  body.kiosk .vtile,body.kiosk .vtile-in{min-height:clamp(140px,14vw,200px)}
  body.kiosk .tile .n,body.kiosk .vtile .n{font-size:clamp(28px,3vw,52px)}
  body.kiosk .tile .lbl,body.kiosk .vtile .lbl{font-size:clamp(11px,.85vw,15px)}
  body.kiosk .tile .d,body.kiosk .vtile .d{font-size:clamp(11px,.8vw,14px)}
  body.kiosk .tile .srcsys,body.kiosk .vtile .srcsys{font-size:clamp(10px,.7vw,12px)}

  /* ===== #107 Mobile funnel-stage carousel + stage-scoped chat sheet =====
     Applies ONLY at/below 768px. The desktop grid above the breakpoint is
     untouched. The carousel and the desktop tile grid are two PRESENTATIONS of
     the SAME shared state; the chat sheet hosts the SAME .rail/.chat node (one
     thread - swiping never fragments the conversation). */
  #mcarousel{display:none}
  .mchat-fab{display:none}
  #sheet-backdrop{display:none}
  .mc-grab{display:none}
  .mchat-scope{display:none}
  #mc-suggest{display:none}

  @media(max-width:768px){
    /* Desktop main-column panels give way to the carousel below the breakpoint. */
    .main .moves,.main #funnel,.main #constraint,.main #funnel-dropoff,
    .main #deals-to-work,.main #scenario{display:none}
    #mcarousel{display:block;position:relative;margin-top:8px}
    .main{overflow:visible;padding-right:0}
    .layout{display:block;height:auto;min-height:0}
    .layout.collapsed{display:block}

    /* #292/#293 mobile tab nav: one swipeable row (never wraps or truncates),
       big tap targets, utility controls dropped (kiosk/reset/board are desktop-ops
       affordances that only crowd a phone). Active tab auto-centres (switchTab). */
    .tabs{gap:0;margin:12px 0 0;padding:5px;top:env(safe-area-inset-top,0px)}
    .tabnav{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:7px;padding:1px 1px 3px}
    .tabnav::-webkit-scrollbar{display:none}
    .tab{flex:0 0 auto;scroll-snap-align:start;min-height:44px;font-size:13.5px;padding:11px 16px}
    .nav-back{width:44px;height:44px}/* #344: 44px touch target */
    .tab-launcher{flex:0 0 auto;scroll-snap-align:start;min-height:44px;font-size:13.5px;padding:11px 14px}
    .tabnav-div{height:26px}
    .tabtools{display:none}
    .tabs.scrolled{padding:5px}

    /* Compact, sticky global toolbar: date range + refresh + last-updated.
       Stacks BELOW the pinned tab nav (--navh, published by the nav controller). */
    #rev-controls{position:sticky;top:calc(var(--navh,52px) + env(safe-area-inset-top,0px));z-index:15;
      background:linear-gradient(180deg,var(--color-bg-midnight) 78%,rgba(4,6,14,0))}
    /* DASH-03: trim the chrome above the pacing answer so it leads on load at
       375px. The header provenance legend is hidden on mobile (every carousel
       card carries its own "ⓘ How" provenance flip, and the metric dictionary
       has the full key), and the date-range chips ride a single horizontal-scroll
       row instead of wrapping to two - together this lifts the hero into the
       first viewport. .tabtools is already display:none here; the connhealth /
       Stripe banners already sit BELOW the hero after DASH-01. */
    .legend{display:none}
    .filterbar{margin:8px 0 4px}
    .filters{gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;padding-bottom:2px}
    .filters::-webkit-scrollbar{display:none}
    .filters .pill{flex:0 0 auto}
    .pill{padding:9px 15px}
    .daterange.open{position:fixed;left:8px;right:8px;top:auto;
      bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:40;
      max-height:82vh;overflow-y:auto;flex-direction:column}

    /* ---- Carousel track: one card + a peek, horizontal scroll-snap ---- */
    .mtrack{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
      padding:2px calc(7% - 6px) 6px;scrollbar-width:none}
    .mtrack::-webkit-scrollbar{display:none}
    .mtrack:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:3px;border-radius:16px}
    .mcard{flex:0 0 86%;scroll-snap-align:center;scroll-snap-stop:always;
      perspective:1400px;min-height:360px}
    .mcard-inner{position:relative;width:100%;height:100%;min-height:360px;
      transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
    .mcard.flipped .mcard-inner{transform:rotateY(180deg)}
    .mface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
      display:flex;flex-direction:column;gap:10px;overflow-y:auto;
      background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:18px;
      padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      box-shadow:0 6px 18px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.1)}
    .mface.back{transform:rotateY(180deg)}
    .mcard-h{display:flex;align-items:center;gap:8px}
    .mcard-h .mc-title{font-weight:700;font-size:17px;color:var(--color-surface)}
    .mcard-h .mc-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);
      flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* #292: the flip affordance was a bare circled-i - not discoverable. Now a
       labelled, brand-tinted button ("ⓘ How") that plainly reads as tappable, with
       a one-time pulse (reduced-motion safe) drawing the eye on first view. */
    .mc-flip{margin-left:auto;flex:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
      cursor:pointer;color:var(--color-surface);background:var(--glass-bg-dark);border:1px solid var(--color-accent-blue);
      border-radius:12px;font-family:var(--font-sans);font-weight:600;font-size:15px;padding:0 13px}
    .mc-flip .mcf-lbl{font-size:11.5px;letter-spacing:.01em}
    .mc-flip.back-btn{border-color:var(--glass-border-dark)}
    .mc-flip:hover,.mc-flip:focus-visible{border-color:var(--color-accent-pink);background:var(--glass-bg-dark-hover);outline:none}
    .mc-flip.pulse{animation:mcf-pulse 1.5s ease-in-out 3}
    @keyframes mcf-pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,107,255,0)}50%{box-shadow:0 0 0 5px rgba(47,107,255,.30)}}
    .mc-headline .mc-hl-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:600}
    .mc-headline .mc-hl-n{font-size:clamp(30px,10vw,44px);font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;line-height:1;
      background:var(--gradient-chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .mc-na .mc-hl-n{background:none;-webkit-text-fill-color:var(--color-text-muted);color:var(--color-text-muted)}
    .mc-headline .mc-hl-sub{font-size:11px;color:var(--color-text-muted);margin-top:2px;line-height:1.35}
    .mc-headline .mc-srcsys{margin-top:3px}
    .mc-rows{display:flex;flex-direction:column;gap:6px}
    .mc-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--glass-border-dark);border-radius:10px;padding:9px 11px}
    .mc-row .mc-rk{flex:1;min-width:0;font-size:11.5px;color:var(--color-text-muted);line-height:1.25}
    .mc-row .mc-rv{font-size:14px;font-weight:700;color:var(--color-surface);white-space:nowrap;display:flex;align-items:center;gap:6px}
    .mc-row.na .mc-rv{color:var(--color-text-muted)}
    .mc-srcsys{font-size:10px;color:#ffd400;opacity:.85;font-family:var(--font-mono);line-height:1.3;white-space:normal;overflow-wrap:break-word}
    .mc-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
    .mc-ask{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
      font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--color-black);
      background:var(--color-paper);border:none;border-radius:12px;padding:11px 16px}
    .mc-ask:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
    /* per-stage goal control (lives on the card that has a goal) */
    .mc-goal{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;align-self:flex-start;
      font-family:var(--font-sans);font-weight:600;font-size:12.5px;color:var(--color-surface);
      background:var(--glass-bg-dark);border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:8px 14px}
    .mc-goal .lab{color:var(--color-text-muted);font-weight:500}
    .mc-goal-edit{display:none;flex-direction:column;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--glass-border-dark);border-radius:12px;padding:11px}
    .mc-goal-edit.open{display:flex}
    .mc-goal-edit input{font-family:var(--font-mono);font-size:16px;color:var(--color-surface);background:rgba(0,0,0,.4);
      border:1px solid var(--glass-border-dark);border-radius:10px;padding:11px 12px;outline:none;width:100%}
    .mc-goal-edit input:focus{border-color:rgba(47,107,255,.5)}
    .mc-goal-presets{display:flex;flex-wrap:wrap;gap:6px}
    .mc-goal-presets button,.mc-goal-edit .mc-goal-save{min-height:40px;font-family:var(--font-sans);font-weight:600;font-size:12.5px;cursor:pointer;border-radius:10px;padding:8px 13px}
    .mc-goal-presets button{color:var(--color-surface);background:transparent;border:1px solid var(--glass-border-dark)}
    .mc-goal-edit .mc-goal-save{color:var(--color-black);background:var(--color-paper);border:none}
    /* per-card fail-soft states: loading skeleton / empty / error / connector-down */
    .mc-state{border-radius:12px;padding:12px 13px;font-size:12px;line-height:1.4}
    .mc-state.error{background:rgba(var(--down-rgb),.1);border:1px solid rgba(var(--down-rgb),.35);color:#ffd0d8}
    .mc-state.empty{background:rgba(0,0,0,.25);color:var(--color-text-muted)}
    .mc-state.conndown{background:rgba(var(--down-rgb),.1);border:1px solid rgba(var(--down-rgb),.4);color:#ffd0d8}
    .mc-state .mc-act{min-height:40px;margin-top:9px;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:12px;
      color:var(--color-surface);background:transparent;border:1px solid var(--glass-border-dark);border-radius:10px;padding:8px 13px}
    .mc-state.conndown .mc-act{color:var(--color-black);background:var(--color-paper);border:none}
    .mc-skel{height:46px;border-radius:10px;
      background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13),rgba(255,255,255,.05));
      background-size:200% 100%;animation:mc-shimmer 1.2s linear infinite}
    @keyframes mc-shimmer{to{background-position:-200% 0}}

    /* ---- Pagination: segmented funnel indicator (dots + labels) ---- */
    .mdots{display:flex;justify-content:center;gap:8px;margin:12px 0 2px;flex-wrap:wrap}
    .mdot{min-height:44px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;/* DASH-12: >=44px touch target */
      font-family:var(--font-sans);font-weight:600;font-size:11px;color:var(--color-text-muted);
      background:transparent;border:1px solid var(--glass-border-dark);border-radius:var(--radius-pill);padding:6px 13px;transition:.15s}
    .mdot .mdot-d{width:7px;height:7px;border-radius:50%;background:var(--color-text-muted)}
    .mdot[aria-selected="true"]{color:var(--color-black);background:var(--color-paper);border-color:var(--color-paper)}
    .mdot[aria-selected="true"] .mdot-d{background:var(--color-accent-blue)}
    .mdot:focus-visible{outline:2px solid var(--color-accent-pink);outline-offset:2px}
    /* DASH-12: bring the remaining small controls up to a >=44px touch target on
       touch viewports (the tab/launcher/what-if steppers/mdots are handled above). */
    .rail-hide{width:44px;height:44px}
    .sc-reset,.sv-copy,.flowbar .fb-cancel{min-height:44px;padding-top:0;padding-bottom:0}
    .sc-cmp .sv-btn{min-height:40px;padding:8px 12px}
    .acct-btn{min-height:44px}

    /* Offline banner (shown when the browser reports offline) */
    .mc-offline{display:none;align-items:center;gap:8px;margin:6px 0 0;padding:9px 13px;border-radius:10px;
      background:rgba(var(--sample-rgb),.1);border:1px solid rgba(var(--sample-rgb),.35);font-size:11.5px;color:#ffe6a8;line-height:1.35}
    body.offline .mc-offline{display:flex}

    /* ---- Chat as an expandable bottom sheet (hosts the SAME .rail/.chat) ---- */
    .resizer{display:none}
    .rail{position:fixed;left:0;right:0;bottom:0;z-index:46;height:min(84vh,660px);
      padding:0;margin:0;border-radius:20px 20px 0 0;overflow:hidden;
      transform:translateY(102%);transition:transform .32s cubic-bezier(.4,.1,.2,1);
      box-shadow:0 -18px 50px rgba(0,0,0,.6)}
    .rail.sheet-open{transform:translateY(0)}
    .chat{height:100%;min-height:0;margin-top:0;border-radius:20px 20px 0 0}
    .chat .head{padding-top:6px}
    .msgs{padding-bottom:14px}
    .inp{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
    .mc-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--glass-border-dark-hover);margin:9px auto 4px}
    .mchat-scope{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;
      color:var(--color-accent-pink);background:rgba(var(--color-accent-pink-rgb),.1);border:1px solid rgba(var(--color-accent-pink-rgb),.3);
      border-radius:var(--radius-pill);padding:3px 9px;margin-top:4px}
    .suggest{display:none}
    #mc-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 12px}
    #mc-suggest .sug{min-height:40px}
    .rail-hide{min-width:44px;min-height:44px;font-size:18px}
    #sheet-backdrop{display:block;position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.5);
      opacity:0;visibility:hidden;transition:opacity .3s}
    #sheet-backdrop.show{opacity:1;visibility:visible}
    .mchat-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:44;
      right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:48px;
      font-family:var(--font-sans);font-weight:700;font-size:14px;color:var(--color-black);cursor:pointer;
      background:var(--color-paper);border:none;border-radius:var(--radius-pill);padding:12px 20px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
    body.sheet-active .mchat-fab{display:none}
    .rail-launcher{display:none !important}
  }
  /* Reduced motion: no 3D flip, no smooth paging, no shimmer, no sheet slide. */
  @media(max-width:768px) and (prefers-reduced-motion:reduce){
    .mtrack{scroll-behavior:auto}
    .mcard-inner,.rail{transition:none}
    .mc-skel{animation:none}
    .mc-flip.pulse{animation:none}
  }

  /* ===== #152 Resizable panels - every major panel drags in WIDTH + HEIGHT =====
     A .rzw wrapper carries the size and the drag handles; the real panel renders
     inside it untouched, so a re-render that replaces the panel's innerHTML never
     wipes the handles. Sizes persist per-panel to localStorage; "Reset layout"
     clears them. Works in kiosk (handles are just absolutely-positioned children).
     Disabled at/below 768px, where the mobile carousel owns the layout. Fail-soft:
     with no JS the panels render full-width, exactly as before. */
  .rzw{position:relative;max-width:100%}
  .rzw.rz-h-set{overflow:hidden}
  .rz-hl{position:absolute;z-index:6;opacity:0;background:var(--color-accent-pink);transition:opacity .15s;touch-action:none}
  .rzw:hover .rz-hl{opacity:.26}
  .rz-hl:hover,.rz-hl.drag{opacity:.85}
  .rz-hl.e{top:6px;bottom:6px;right:0;width:6px;border-radius:6px;cursor:col-resize}
  .rz-hl.s{left:6px;right:6px;bottom:0;height:6px;border-radius:6px;cursor:row-resize}
  .rz-hl.c{right:0;bottom:0;width:16px;height:16px;border-radius:0 0 10px 0;cursor:nwse-resize;opacity:0}
  .rzw:hover .rz-hl.c{opacity:.5}
  .rz-hl.c:hover,.rz-hl.c.drag{opacity:.95}
  body.rz-dragging,body.rz-dragging *{user-select:none !important}


  /* #144 chat input splitter - a draggable bar above the input; sizes the box */
  .inp-splitter{flex:none;height:10px;margin:2px 20px 0;cursor:row-resize;position:relative;touch-action:none}
  .inp-splitter::before{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    height:3px;border-radius:3px;background:var(--glass-border-dark);transition:background .15s}
  .inp-splitter:hover::before,.inp-splitter.drag::before{background:var(--color-accent-pink)}

  /* #144 attach: a 📎 button + a strip of thumbnail chips above the input. */
  .attach-btn{flex:none;align-self:flex-end;width:38px;height:38px;border-radius:10px;border:1px solid var(--glass-border-dark);
    background:transparent;color:var(--color-text-secondary);font-size:16px;cursor:pointer;transition:background .15s,border-color .15s}
  .attach-btn:hover{background:var(--glass-border-dark);border-color:var(--color-accent-pink)}
  .attach-strip{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px;margin-bottom:6px}
  .attach-strip:empty{display:none}
  .attach-chip{position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden;border:1px solid var(--glass-border-dark);flex:none}
  .attach-chip img{width:100%;height:100%;object-fit:cover;display:block}
  .attach-chip .x{position:absolute;top:1px;right:1px;width:16px;height:16px;line-height:15px;text-align:center;border-radius:50%;
    background:rgba(0,0,0,.7);color:#fff;font-size:11px;cursor:pointer;border:none}
  body.rz-dragging .attach-btn{pointer-events:none}

  /* #241: chat corner grip - bottom-LEFT (the rail is right-anchored, so "wider"
     means growing leftward). Drags width + height together; clamps live in JS. */
  .chat-corner{position:absolute;left:0;bottom:0;width:18px;height:18px;z-index:7;cursor:nesw-resize;
    opacity:0;transition:opacity .15s;touch-action:none;
    background:linear-gradient(45deg,var(--color-accent-pink) 0 42%,transparent 42%);
    border-bottom-left-radius:20px}
  .chat:hover .chat-corner{opacity:.5}
  .chat-corner:hover,.chat-corner.drag{opacity:.95}

  @media(max-width:768px){
    .rzw{width:auto !important;height:auto !important;overflow:visible !important}
    .rz-hl{display:none !important}
    .inp-splitter{display:none}
  }

  /* ===== #577/#578 semantic tokens (ADDITIVE ONLY) =====
     New surfaces (the cross-page nav and the AI Correspondent brief) must
     reference semantic tokens, never a raw hex / px font-size / font-family. The
     values this repo already had as literals scattered through the rules above
     get a name here so the new components can name them instead of repeating
     them. Nothing above is redefined: every token in this block is a NEW name, so
     no existing rule changes. Where a value already had a token, the token is
     reused rather than duplicated.

     TYPE SCALE - the sizes the existing dashboard already uses as literals.
     Geist for headings + body, Roboto Mono as the DETAIL face (eyebrows, labels). */
  :root{
    --text-eyebrow:10.5px;   /* mono, uppercase, tracked - eyebrows + nav labels */
    --text-label:11px;       /* mono chips and rail meta */
    --text-meta:11.5px;      /* muted supporting text */
    --text-body:13px;        /* body copy, matches .tab / .of-item */
    --text-lede:13.5px;      /* summary prose */
    --text-h3:16.5px;        /* item headline */
    --text-h2:12.5px;        /* rail / section heading */
    --text-h1:clamp(22px,2.4vw,32px);  /* page title */
    --tracking-eyebrow:.14em;
    --tracking-label:.1em;
    --tracking-tight:-.02em;
    --weight-body:600;
    --weight-heading:700;
    /* Text on the midnight stage between --color-surface (full white) and
       --color-text-muted: readable prose that is not shouting. */
    --color-text-soft:rgba(248,247,243,.78);
    /* A sunken panel on the stage (the header legend already used this value). */
    --surface-sunken:rgba(0,0,0,.35);
    --surface-sunken-soft:rgba(0,0,0,.30);
    /* Hairline inside a panel, one step lighter than --glass-border-dark. */
    --hairline-soft:rgba(255,255,255,.06);
    /* Card radius for the new reading surfaces (one step down from --radius-xl,
       which stays the outer stage frame). */
    --radius-card:18px;
    --radius-thumb:13px;
    --radius-chip:6px;
    /* Motion + focus, so every new surface behaves the same way. */
    --motion-fast:.15s;
    --focus-ring:2px solid var(--color-accent-pink);
    --focus-offset:2px;
    /* CATEGORY PALETTE (#577). RGB triplets in the --up-rgb style so translucent
       variants share one source: rgba(var(--cat-x-rgb),A). Every value is drawn
       from the brand accents already in this file (accent-blue, accent-pink,
       sample, up, estimate, and the violet from the .holo-ring conic gradient) -
       no new brand colors are invented. */
    --cat-default-rgb:47,107,255;      /* --color-accent-blue */
    --cat-models-rgb:138,92,255;       /* holo-ring violet */
    --cat-agents-rgb:47,107,255;       /* --color-accent-blue */
    --cat-cost-rgb:255,207,93;         /* --sample */
    --cat-business-rgb:74,222,128;     /* --up */
    --cat-engineering-rgb:90,162,255;  /* --estimate */
    --cat-policy-rgb:255,122,156;      /* --color-accent-pink */
    --cat-research-rgb:255,102,244;    /* --gradient-pink terminal stop */
    --cat-tooling-rgb:226,226,226;     /* --gradient-chrome mid stop */
  }