/* ============================================================
   SMC Terminal — THE design system. Single source of truth.
   Previously there were three competing token sets (index.html
   inline, this file, research/study inline). They are now all
   this file. Do not re-introduce a :root block anywhere else.

   Red / amber / green are reserved for GATE STATE only. Never
   decorative. --accent carries every non-gate emphasis.
   ============================================================ */

:root{
  color-scheme: light;

  /* surfaces */
  --bg:#F4F5F3;
  --bg-sunk:#ECEEEA;
  --card:#FFFFFF;
  --card-2:#FAFAF9;
  --line:#E4E6E1;
  --line-strong:#D2D5CE;

  /* ink */
  --ink:#14161A;
  --ink-dim:#61666C;
  --ink-faint:#989DA3;

  /* gate — reserved */
  --alive:#1E8E56;  --alive-soft:#E4F4EA;  --alive-line:#BEE3CD;
  --dead:#B23B3B;   --dead-soft:#F8EAE9;   --dead-line:#E8C5C2;  --dead-deep:#5B2323;
  --amber:#9A6A12;  --amber-soft:#FAF0DB;  --amber-line:#EAD8AD;
  --closed:#84888C; --closed-soft:#EDEEEB;

  /* accent — everything non-gate */
  --accent:#2C4A85; --accent-soft:#E8EDF6; --accent-line:#C7D3E8;

  /* elevation */
  --sh-1:0 1px 2px rgba(18,20,24,.04);
  --sh-2:0 2px 8px rgba(18,20,24,.06), 0 1px 2px rgba(18,20,24,.04);
  --sh-3:0 12px 32px rgba(18,20,24,.14);

  /* geometry */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --disp:'Space Grotesk','Inter',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* chrome metrics — used by _shell.js */
  --nav-h:74px;
  --page-max:480px;

  --grid-dot:#E1E3DE;
  --scrim:rgba(16,18,22,.34);
}

[data-theme="dark"]{
  color-scheme: dark;

  --bg:#0E1013;
  --bg-sunk:#08090B;
  --card:#171A1F;
  --card-2:#1D2127;
  --line:#262B32;
  --line-strong:#343A43;

  --ink:#E9ECEF;
  --ink-dim:#9AA1A9;
  --ink-faint:#6B7279;

  --alive:#48C07E;  --alive-soft:#12291E;  --alive-line:#1F4733;
  --dead:#E8736B;   --dead-soft:#2C1817;   --dead-line:#4A2725;  --dead-deep:#F0A9A3;
  --amber:#D9A441;  --amber-soft:#2A2114;  --amber-line:#4A3B1E;
  --closed:#7C838B; --closed-soft:#1C2026;

  --accent:#7BA0E8; --accent-soft:#182337; --accent-line:#2C3E5E;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.44), 0 1px 2px rgba(0,0,0,.3);
  --sh-3:0 12px 32px rgba(0,0,0,.6);

  --grid-dot:#181B20;
  --scrim:rgba(0,0,0,.6);
}

/* ============================================================
   RESET
   NOTE: html/body must NOT be height:100%. That was load-bearing
   for the old iframe height-sync and is the reason scroll broke.
   Content defines height now; the document scrolls natively.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* NOTE (27 Aug 2026): overflow-x:hidden was previously set here too.
     Removed — it broke touch-driven Y-scroll on Chrome for Android
     (root scrollingElement + overflow-x:hidden = touch scroll gestures
     silently fail to register while programmatic/click scroll still work).
     overflow-x:hidden on body below is sufficient to prevent the
     horizontal scrollbar; do not re-add it here. */
}

body{
  min-height:100dvh;
  background:
    radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0) 0 0/18px 18px,
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  overflow-x:hidden;
  padding-bottom:calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
  transition:background-color .15s ease,color .15s ease;
}

/* Pages built as a centred column (research / study) keep working,
   but must not fight the document scroll. */
.app{width:100%;max-width:var(--page-max);margin:0 auto;position:relative}

img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}

/* TAP FEEDBACK.
   -webkit-tap-highlight-color is transparent globally (above), which kills
   the browser's default flash. Without an explicit :active state that left
   most taps with NO feedback at all - trade.html alone has 17 onclick
   handlers and none of them acknowledged a press. A native app always
   answers a touch. This is deliberately broad (attribute + role selectors)
   so it covers handlers added per page without each page opting in. */
[onclick],[role="button"],button,a.navitem,.pbtn,.tab,.card[onclick]{
  -webkit-tap-highlight-color:transparent;
  transition:opacity .12s ease,transform .12s ease;
}
[onclick]:active,[role="button"]:active,button:active,
a.navitem:active,.pbtn:active,.tab:active{
  opacity:.55;
}
/* Cards and rows that act as buttons get a press-in instead of a fade, which
   reads better on a large surface. */
.card[onclick]:active,.booklet:active,.tradelog-item[onclick]:active{
  transform:scale(.985);opacity:1;
}
@media (prefers-reduced-motion:reduce){
  [onclick],[role="button"],button,a.navitem,.pbtn,.tab,.card[onclick]{transition:none}
  .card[onclick]:active,.booklet:active{transform:none}
}
a{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   TOPBAR — every page has one already; this styles it uniformly
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 14px 11px;
  max-width:var(--page-max);margin:0 auto;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  /* The 5-button cluster (bell/plus/flash/milestone/theme) plus brand plus an
     envpill overflowed 380px screens, pushing the LAST button - the theme
     toggle - off-screen and forcing a horizontal scroll to reach it.
     min-width:0 lets the shrinkable children actually shrink instead of
     forcing the bar wider than the viewport. */
  min-width:0;
}
.topbar h1{
  font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.015em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto;overflow:hidden}
.brand-mark{
  width:27px;height:27px;border-radius:var(--r-sm);background:var(--ink);flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:11px;color:var(--bg);
}
.brand h1{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.015em}

.envpill{
  display:inline-flex;align-items:center;gap:6px;
  /* shrink before the icon cluster does - the gate state is re-shown on the
     strip directly below, the theme toggle has nowhere else to live */
  flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-dim);
  background:var(--card);border:1px solid var(--line);
  padding:5px 10px 5px 8px;border-radius:var(--r-pill);
}

.dot{width:6px;height:6px;border-radius:50%;background:var(--closed);flex:none}
.dot.alive{background:var(--alive)}
.dot.dead{background:var(--dead)}
.dot.amber{background:var(--amber)}
.dot.live{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.pagehead{padding:20px 16px 4px;max-width:var(--page-max);margin:0 auto}
.eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px;
}
.pagehead h2{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.pagesub{font-size:12px;color:var(--ink-dim);margin-top:8px;max-width:36ch;line-height:1.5}

.ltp-row{display:flex;align-items:baseline;gap:9px;margin-top:9px}
.ltp-val{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ltp-chg{font-family:var(--mono);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.ltp-chg.pos{color:var(--alive)}
.ltp-chg.neg{color:var(--dead)}

/* ============================================================
   CARDS
   ============================================================ */
.cards{padding:14px 14px 8px;display:flex;flex-direction:column;gap:12px;
  max-width:var(--page-max);margin:0 auto}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:13px;gap:10px}
.card-name{font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:-.015em}
.card-sub{font-size:11px;color:var(--ink-faint);margin-top:2px;line-height:1.4}
.card-note{font-size:11px;color:var(--ink-dim);line-height:1.55;margin-top:12px}
.card h3{
  font-size:11px;color:var(--ink-faint);margin-bottom:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-family:var(--mono);
}

/* rows */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .label{font-size:13px;color:var(--ink-dim)}
.row .value{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* ============================================================
   EMPTY / LOADING
   ============================================================ */
.nodata{padding:14px 2px 6px;text-align:center}
.nodata-t{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.nodata-w{font-size:11px;color:var(--ink-faint);line-height:1.5;max-width:34ch;margin:0 auto}

.placeholder{font-size:12px;color:var(--ink-faint);font-style:italic}

/* Two empty-state sizes, both shared. .empty is the inline one used inside
   a card or list; .empty-state is the large full-area one. They were
   previously redefined per page at three different sizes. */
.empty{padding:14px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-faint)}

/* Section divider above a group of cards (was duplicated identically in
   research.html and study_pitboard_full.html). */
.section-lbl{padding:6px 18px 8px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:6px}

/* Card title inside a card (was duplicated identically in
   behaviour_summary.html and trade_summary.html). */
.ct{font-family:var(--disp);font-weight:700;font-size:11px;margin-bottom:6px}
.empty-state{text-align:center;padding:48px 20px;color:var(--ink-faint)}
.empty-state .big{font-size:14px;color:var(--ink-dim);margin-bottom:4px}

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.tag-badge{
  display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:5px;
  background:var(--ink);color:var(--bg);
}

/* ============================================================
   CONTROLS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:9px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  background:var(--accent);color:#fff;border:1px solid transparent;
  transition:filter .15s ease,transform .06s ease;
}
.btn:active{transform:scale(.985)}
.btn:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn--sm{min-height:32px;padding:6px 12px;font-size:12px;border-radius:var(--r-sm)}

.input{
  width:100%;min-height:40px;padding:9px 12px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:14px;transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder{color:var(--ink-faint)}
.input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input--num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ============================================================
   BANNERS
   ============================================================ */
.banner{
  margin:12px 14px 0;padding:11px 13px;border-radius:var(--r-md);
  display:flex;gap:9px;align-items:flex-start;
  background:var(--amber-soft);border:1px solid var(--amber-line);
  font-size:11px;line-height:1.5;color:var(--ink);
  max-width:var(--page-max);
}
.banner a{color:var(--amber);font-weight:600}

/* ============================================================
   ALERT WATCH STATES.
   REVERSED 3 Sep 2026 (was "neutral on purpose, R/A/G belongs to the
   gate only") — Ashish explicitly asked for direction coloring: green
   when price has moved closer to the target since the watch was
   created (wrong_way===false from /api/alerts), red when it's moved
   farther away (wrong_way===true). Falls back to the old neutral grey
   scale only when there's no base_price to compare against (watch has
   no reference point, so no direction can honestly be shown).
   ============================================================ */
.watch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.watch-row:last-child{border-bottom:none}
.watch-name{font-size:14px;font-weight:600}
.watch-price{font-family:var(--mono);font-size:12px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.watch-state{font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 9px;
  border-radius:var(--r-pill);text-transform:uppercase;flex:none}
.watch-state.state--toward{color:var(--alive);background:var(--alive-soft)}
.watch-state.state--away{color:var(--dead);background:var(--dead-soft)}
.watch-dir{font-size:11px;font-weight:700}
.watch-del{color:var(--ink-faint);font-size:17px;padding:4px 8px;flex:none;line-height:1}
.watch-edit{color:var(--ink-dim);font-size:15px;padding:4px 8px;flex:none;line-height:1}
.watch-row--edit{gap:8px}
.watch-save{color:var(--green,#1a7f4a);font-size:19px;padding:4px 8px;flex:none;line-height:1}
.watch-cancel{color:var(--ink-faint);font-size:17px;padding:4px 8px;flex:none;line-height:1}

.feed-row{padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
.feed-row:last-child{border-bottom:none}
.feed-row .feed-time{font-family:var(--mono);color:var(--ink-faint);font-size:11px}

/* ============================================================
   SHELL CHROME — injected by _shell.js on every page.
   Bottom nav, gate strip, kite banner, more sheet, theme toggle.
   Lives here (not in a page) so no page can drift out of sync.
   ============================================================ */

/* Guard: research.html / study_pitboard_full.html set body{display:flex},
   which turned these in-flow sticky bars into flex ITEMS sitting beside the
   page column instead of spanning the top. Pinning width removes the whole
   failure mode regardless of what a page does to body. */
#smcKiteBanner,#smcStrip{flex:none;width:100%}

#smcKiteBanner{
  position:sticky;top:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;background:var(--dead);color:#fff;
  font-size:12px;font-weight:600;
}
#smcKiteBanner.show{display:flex}
#smcKiteBanner button{
  padding:6px 13px;border-radius:var(--r-sm);background:#fff;color:var(--dead);
  font-weight:700;font-size:12px;white-space:nowrap;
}

#smcStrip{
  position:sticky;z-index:35;
  display:flex;align-items:center;gap:11px;
  padding:9px 16px;
  max-width:var(--page-max);margin:0 auto;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
#smcStrip .gate-chip{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
#smcStrip .gate-chip .dot{width:7px;height:7px;border-radius:50%;flex:none}
#smcStrip .gate-meta{
  font-family:var(--mono);font-size:10px;color:var(--ink-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#smcStrip .regime{margin-left:auto;display:flex;align-items:baseline;gap:7px;flex:none}
#smcStrip .regime .val{font-size:12px;font-weight:700;color:var(--ink)}
#smcStrip .regime .updated{font-family:var(--mono);font-size:10px;color:var(--ink-faint)}

.gate--pending     {background:var(--closed-soft);color:var(--closed)}
.gate--pending .dot{background:var(--closed)}
.gate--provisional {background:var(--amber-soft);color:var(--amber)}
.gate--provisional .dot{background:var(--amber)}
.gate--alive       {background:var(--alive-soft);color:var(--alive)}
.gate--alive .dot  {background:var(--alive)}
.gate--dead        {background:var(--dead-soft);color:var(--dead)}
.gate--dead .dot   {background:var(--dead)}
.gate--closed      {background:var(--closed-soft);color:var(--closed)}
.gate--closed .dot {background:var(--closed)}
.gate--stale       {background:var(--closed-soft);color:var(--ink-faint)}
.gate--stale .dot  {background:var(--ink-faint)}

.bottomnav{
  position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;
  display:flex;justify-content:center;
  background:color-mix(in srgb,var(--card) 96%,transparent);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
  max-width:calc(var(--page-max) - 32px);margin:0 auto;
  padding:6px 4px;
}
.bottomnav > .navwrap{
  width:100%;display:flex;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
}
.bottomnav > .navwrap::-webkit-scrollbar{display:none}
.navitem{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-dim);text-decoration:none;padding:4px 12px 2px;
  min-height:44px;min-width:58px;justify-content:center;transition:color .15s ease,background .15s ease;
  scroll-snap-align:center;border-radius:var(--r-md);
}
.navitem svg{width:25px;height:25px}
.navitem span{font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.navitem.active{color:var(--ink);background:var(--accent-soft)}
.navdot{height:3px;margin-top:1px}
.navitem.active .navdot{width:3px;height:3px;border-radius:50%;background:var(--accent)}

/* #smcSheet (kebab "More pages" menu) removed 28 Aug 2026 -- IPO moved
   into the primary scrollable tab strip, Milestone got its own topbar
   button, Alerts (legacy) dropped entirely. Nothing left to put in an
   overflow menu, so the kebab and its sheet went with it. */

/* ============================================================
   FLASH — day timeline panel. Same bottom-sheet mechanics as
   #smcSheet so the two feel like one system, different content.
   ============================================================ */
#smcFlash{
  position:fixed;inset:0;z-index:72;background:var(--scrim);
  display:none;opacity:0;transition:opacity .2s ease;
}
#smcFlash.open{display:block;opacity:1}
#smcFlash .sheet{
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--page-max);
  background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px 10px calc(18px + env(safe-area-inset-bottom));
  max-height:78vh;overflow-y:auto;box-shadow:var(--sh-3);
  transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);
}
#smcFlash.open .sheet{transform:translateY(0)}
#smcFlash .handle{width:36px;height:4px;background:var(--line-strong);
  border-radius:var(--r-pill);margin:8px auto 12px}
#smcFlash .sheet-lbl{font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em}
.flash-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:4px 12px 10px;border-bottom:1px solid var(--line)}
.flash-gate{font-family:var(--mono);font-size:10px;color:var(--ink-dim);
  text-align:right;min-width:0}

.flash-row{display:flex;align-items:baseline;gap:9px;padding:9px 12px;
  border-bottom:1px solid var(--line)}
.flash-row:last-child{border-bottom:0}
.flash-t{font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  flex:none;width:38px}
.flash-k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  flex:none;padding:2px 6px;border-radius:var(--r-sm);
  background:var(--bg-sunk);color:var(--ink-dim)}
.flash--trade .flash-k{background:var(--accent-soft);color:var(--accent)}
.flash--alert .flash-k{background:var(--amber-soft);color:var(--amber)}
/* SHOCK uses accent, not red — red/amber/green are reserved for gate
   state only per this file's own convention above; a shock is market
   context, not a gate state. (Overrides the earlier red draft shown in
   the two-option mockup — unconfirmed choice, defaulting to the
   design-system-compliant option since Flash is now finalized.) */
.flash--shock .flash-k{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);}

/* Market-context event set (ops/flash_events.py) — one shared neutral
   treatment, distinguished by tag text only. Deliberately NOT colored
   per-type: these are informational/self-calibrating, several are still
   unvalidated (see each detector's docstring), and 9 more colors would
   fight the gate-state-only color convention for attention. */
.flash--level .flash-k, .flash--grab .flash-k, .flash--gate .flash-k,
.flash--concord .flash-k, .flash--vix .flash-k, .flash--basis .flash-k,
.flash--oi .flash-k, .flash--absorb .flash-k, .flash--dryup .flash-k,
.flash--engulf .flash-k, .flash--pinbar .flash-k{
  background:var(--card-2);color:var(--ink-dim);border:1px solid var(--line);
}
.flash-x{font-size:12px;color:var(--ink);min-width:0;word-break:break-word}
.flash-empty{padding:22px 12px;text-align:center;font-size:12px;color:var(--ink-faint)}

/* ============================================================
   TOPBAR CLUSTER — bell / plus / flash / milestone / theme.
   Appended by _shell.js as the last child of .topbar on every
   page. .topbar is already flex + space-between above, so the
   cluster needs no per-page CSS to sit right-aligned.
   ============================================================ */
.tb-cluster{display:flex;align-items:center;gap:0;flex:none;flex-wrap:nowrap;margin-left:auto}

.tb-btn{
  position:relative;
  width:30px;height:30px;border-radius:var(--r-pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--ink-dim);
  text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.tb-btn:active{background:var(--accent-soft);color:var(--accent)}
.tb-btn.active{color:var(--accent)}
.tb-btn svg{width:18px;height:18px}

/* Plus is the one affordance that creates something — give it weight. */
#smcPlusBtn{background:var(--accent-soft);color:var(--accent)}
#smcPlusBtn svg{width:19px;height:19px;stroke-width:2.1}

/* Unread pip. A count, never a bare dot — a dot can't be triaged. */
.tb-badge{
  position:absolute;top:3px;right:2px;min-width:15px;height:15px;padding:0 3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--dead);color:#fff;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:1;
  border:1.5px solid var(--bg);
}
.tb-badge[hidden]{display:none}

/* Back-compat: the old standalone toggle class, in case a page still
   ships one of its own. Same box as .tb-btn so nothing jumps. */
#smcSplash{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .35s ease,visibility .35s ease;
}
#smcSplash.hidden{opacity:0;visibility:hidden;pointer-events:none}
#smcSplash .mark{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--ink-faint);text-transform:uppercase}
#smcSplash .gate-big{display:flex;flex-direction:column;align-items:center;gap:10px}
#smcSplash .gate-dot{width:14px;height:14px;border-radius:50%;background:var(--closed)}
#smcSplash .gate-label{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em}
#smcSplash .gate-sub{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}