/* ==========================================================================
   KALMAT Screener — style.css
   The ONE stylesheet. Dark-first "market terminal" aesthetic.
   Deep slate/navy surfaces · emerald up · coral down · gold sparingly.
   Tokens per ARCHITECTURE.md §8; component inventory per §5.3 / spec sec-06.
   Sections:
     01 Tokens            10 Gating & locks      19 Admin
     02 Base & type       11 Live screens        20 Overlays, toasts, tour
     03 Shell             12 Search/typeahead    21 Splash & boot
     04 Panels & stats    13 Home                22 Seasonal (iday)
     05 Tables            14 Health/quad/maps    23 Responsive
     06 Badges & chips    15 Chart chrome        24 Reduced motion
     07 Buttons/controls  16 Watchlist           25 Print
     08 Popovers/tips     17 Feed & journal
     09 Drawer            18 Learn & articles
   ========================================================================== */

/* ==========================================================================
   01 TOKENS — :root holds DARK (default even before JS); light re-declares.
   JS stamps [data-theme]; the only OS media query is the no-JS fallback.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* surfaces */
  --bg:            #0b1017;
  --bg2:           #0e141d;
  --surface:       #111826;
  --surface-2:     #17202e;
  --surface2:      #17202e;
  --panel:         #17202e;
  --border:        #1f2a3a;
  --line:          #1f2a3a;
  --border-2:      #2b3a4e;
  --shadow:        0 8px 28px rgba(0,0,0,.45);

  /* text */
  --ink:           #e7edf5;
  --muted:         #93a3b8;
  --faint:         #8a9aae; /* audit: was #5c6c80 — 3.0:1 on surfaces; now ≥4.7:1 even on accent-soft */

  /* brand emerald */
  --accent:        #17b877;
  --accent-ink:    #5fe3a7;
  --on-accent:     #06251a; /* ink on accent fills (light theme: #fff) */
  --accent-soft:   #10331f;
  --accent-wash:   rgba(23,184,119,.10);

  /* semantics */
  --green:         #22c98a;
  --green-bg:      #0e2b1f;
  --red:           #f4645c;
  --red-bg:        #33191a;
  --neg:           #f4645c;
  --neg-soft:      #33191a;
  --gold:          #e5b84e;
  --gold-bg:       #33290f;
  --gold-ink:      #f0cd7d;
  --wash-green:    #0e2b1f;
  --wash-red:      #33191a;
  --wash-amber:    #33290f;

  /* blue selection family */
  --pick:          #5b9bf8;
  --pick-bg:       #16243c;
  --pick-ink:      #8fbcfb;

  /* charts */
  --ch-ink:        #dbe4ee;
  --ch-mute:       #8595a9;
  --ch-grid:       #182231;
  --ch-grid-2:     #131c29;
  --ch-axis:       #2c3a4d;
  --ch-paper:      #0e1520;
  --ch-up:         #2fd695;
  --ch-down:       #ff6f65;
  --ch-up-soft:    rgba(47,214,149,.18);
  --ch-down-soft:  rgba(255,111,101,.18);
  --ch-wick:       #4c5e74;
  --ch-vol:        #243244;
  --ch-pivot:      #e5b84e;
  --ch-base:       #3b76c9;
  --ch-base-fill:  rgba(59,118,201,.12);
  --ch-hist:       #415063;
  --ch-dma50:      #58a6e8;
  --ch-dma200:     #e0a83c;
  --ch-tip-bg:     #e9eef4;
  --ch-tip-ink:    #101724;

  /* treemap ramp */
  --map-zero:      #2a3646;
  --map-up:        #17b877;
  --map-down:      #e0554d;

  /* seasonal */
  --iday-saffron:  #FF9933;
  --iday-white:    #ffffff;
  --iday-green:    #17b877;
  --iday-navy:     #8fa8ff;
  --iday-edge:     rgba(255,255,255,.25);

  /* metrics */
  --radius:        12px;
  --maxw:          1400px;
  --qrow:          640px;
  --qctl:          36px;
  --mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:            #f7f9fb;
  --bg2:           #eff3f7;
  --surface:       #ffffff;
  --surface-2:     #eef2f6;
  --surface2:      #eef2f6;
  --panel:         #eef2f6;
  --border:        #dde4ec;
  --line:          #dde4ec;
  --border-2:      #c8d3de;
  --shadow:        0 6px 22px rgba(20,32,45,.10);
  --ink:           #141e29;
  --muted:         #586a7d;
  --faint:         #5b6c82; /* audit: was #93a3b8 — 2.6:1 on white; now ≥4.7:1 on surface-2 */
  --accent:        #0b7a52; /* audit: was #0d9463 — 3.9:1 as text on white and under #fff ink; now ≥4.7:1 both ways */
  --accent-ink:    #0a6b48;
  --accent-soft:   #dcf5e9;
  --accent-wash:   rgba(11,122,82,.08);
  --on-accent:     #ffffff;
  --green:         #0b7a4e; /* audit: was #0f9d64 — 3.5:1 on white / 3.1:1 on wash; now ≥4.7:1 */
  --green-bg:      #e0f5ea;
  --red:           #c23a2a; /* audit: was #d2402f — 4.0:1 on red wash; now ≥4.6:1 */
  --red-bg:        #fdeae7;
  --neg:           #c23a2a;
  --neg-soft:      #fdeae7;
  --gold:          #83600e; /* audit: was #a97b12 — 3.8:1 on white; now ≥5.1:1 */
  --gold-bg:       #faf0d6;
  --gold-ink:      #7c5a0b;
  --wash-green:    #e0f5ea;
  --wash-red:      #fdeae7;
  --wash-amber:    #faf0d6;
  --pick:          #2563eb;
  --pick-bg:       #e7effd;
  --pick-ink:      #1d4ed8;
  --ch-ink:        #22303e;
  --ch-mute:       #64748b; /* audit: was #6b7a8b — 4.4:1 on white; now ≥4.7:1 */
  --ch-grid:       #e7ecf1;
  --ch-grid-2:     #f2f5f8;
  --ch-axis:       #cfd8e0;
  --ch-paper:      #ffffff;
  --ch-up:         #0f9d64;
  --ch-down:       #d2402f;
  --ch-up-soft:    rgba(15,157,100,.14);
  --ch-down-soft:  rgba(210,64,47,.12);
  --ch-wick:       #8b9aab;
  --ch-vol:        #dfe6ec;
  --ch-pivot:      #a97b12;
  --ch-base:       #2f66b5;
  --ch-base-fill:  rgba(47,102,181,.08);
  --ch-hist:       #334155;
  --ch-dma50:      #2f7fc1;
  --ch-dma200:     #b8811a;
  --ch-tip-bg:     #1d2735;
  --ch-tip-ink:    #f2f6fa;
  --map-zero:      #c7d1db;
  --map-up:        #0d9463;
  --map-down:      #c74436;
  --iday-saffron:  #FF9933;
  --iday-white:    #ffffff;
  --iday-green:    #0d9463;
  --iday-navy:     #000080;
  --iday-edge:     rgba(0,0,0,.12);
}

/* No-JS fallback only: honour a light OS before core.js stamps data-theme. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme: light;
    --bg:            #f7f9fb;
    --bg2:           #eff3f7;
    --surface:       #ffffff;
    --surface-2:     #eef2f6;
    --surface2:      #eef2f6;
    --panel:         #eef2f6;
    --border:        #dde4ec;
    --line:          #dde4ec;
    --border-2:      #c8d3de;
    --shadow:        0 6px 22px rgba(20,32,45,.10);
    --ink:           #141e29;
    --muted:         #586a7d;
    --faint:         #5b6c82;
    --accent:        #0b7a52;
    --accent-ink:    #0a6b48;
    --accent-soft:   #dcf5e9;
    --accent-wash:   rgba(11,122,82,.08);
    --on-accent:     #ffffff;
    --green:         #0b7a4e;
    --green-bg:      #e0f5ea;
    --red:           #c23a2a;
    --red-bg:        #fdeae7;
    --neg:           #c23a2a;
    --neg-soft:      #fdeae7;
    --gold:          #83600e;
    --gold-bg:       #faf0d6;
    --gold-ink:      #7c5a0b;
    --wash-green:    #e0f5ea;
    --wash-red:      #fdeae7;
    --wash-amber:    #faf0d6;
    --pick:          #2563eb;
    --pick-bg:       #e7effd;
    --pick-ink:      #1d4ed8;
    --ch-ink:        #22303e;
    --ch-mute:       #64748b;
    --ch-grid:       #e7ecf1;
    --ch-grid-2:     #f2f5f8;
    --ch-axis:       #cfd8e0;
    --ch-paper:      #ffffff;
    --ch-up:         #0f9d64;
    --ch-down:       #d2402f;
    --ch-up-soft:    rgba(15,157,100,.14);
    --ch-down-soft:  rgba(210,64,47,.12);
    --ch-wick:       #8b9aab;
    --ch-vol:        #dfe6ec;
    --ch-pivot:      #a97b12;
    --ch-base:       #2f66b5;
    --ch-base-fill:  rgba(47,102,181,.08);
    --ch-hist:       #334155;
    --ch-dma50:      #2f7fc1;
    --ch-dma200:     #b8811a;
    --ch-tip-bg:     #1d2735;
    --ch-tip-ink:    #f2f6fa;
    --map-zero:      #c7d1db;
    --map-up:        #0d9463;
    --map-down:      #c74436;
    --iday-navy:     #000080;
    --iday-edge:     rgba(0,0,0,.12);
  }
}

/* ==========================================================================
   02 BASE & TYPOGRAPHY
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* display face (§6.2) — wordmark, splash word, article headings, guide titles.
   Loaded with display=swap; the system stack stands in until it arrives. */
:root{
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4{
  margin: 0 0 10px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
}
h1{ font-size: 30px; font-weight: 750; }
h2{ font-size: 21px; font-weight: 650; }
h3{ font-size: 16px; }
h4{ font-size: 14px; }

p{ margin: 0 0 12px; }

a{
  color: var(--accent);
  text-decoration: none;
}
a:hover{ color: var(--accent-ink); }

small{ font-size: 12px; color: var(--muted); }
hr{ border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

code, kbd, pre{ font-family: var(--mono); }
code{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .88em;
}
pre{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12.5px;
}

img, svg{ max-width: 100%; }
:root[data-theme="dark"] img.photo{ filter: brightness(.92); }

button{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
input, select, textarea{
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 8px 10px;
}
input::placeholder, textarea::placeholder{ color: var(--faint); }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input[type="checkbox"], input[type="radio"]{ accent-color: var(--pick); }
input[type="range"]{ accent-color: var(--accent); padding: 0; border: 0; background: none; box-shadow: none; }

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

::selection{ background: var(--accent-soft); color: var(--ink); }

/* shared text utilities */
.num{ font-variant-numeric: tabular-nums; }
.pos{ color: var(--green); }
.neg{ color: var(--red); }
.eyebrow{
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.muted{ color: var(--muted); }

/* scrollbars (subtle, terminal-flavoured) */
*{ scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar{ width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb{ background: var(--border-2); border-radius: 8px; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ==========================================================================
   03 SHELL — wrap, header, tabs, account, search modal, footer, views
   ========================================================================== */

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
main.wrap{
  padding-top: 30px;
  padding-bottom: 80px;
  min-height: 60vh;
}

/* ---- header ------------------------------------------------------------ */
header.nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
header.nav .wrap{
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
}

#brand{
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 0;
}
#brand img, #brand svg{ width: 30px; height: 30px; display: block; }
#brand .brand-word{
  font-family: var(--display);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
  white-space: nowrap;
}
#brand .brand-word b{ color: var(--accent); font-weight: 750; }
#brand .brand-tag{
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: -2px;
}

/* desktop header search pill */
#hsearch-d{
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  min-width: 480px;
  padding: 0 16px;
  margin: 0 auto;
  border: 1px solid var(--border-2);
  border-radius: 22px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
#hsearch-d .sicon{ font-size: 15px; color: var(--faint); transition: color .15s; }
#hsearch-d:hover{ border-color: var(--red); }
#hsearch-d:hover .sicon{ color: var(--red); }
#hsearch-d kbd{
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  background: var(--surface-2);
}
body.on-home #hsearch-d{ display: none; }

/* ---- tabs -------------------------------------------------------------- */
.tabs{
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar{ display: none; }

.tab{
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tab .ticon{ font-size: 17px; line-height: 1; }
.tab:hover{ color: var(--ink); background: var(--surface-2); }
.tab.active{
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-weight: 600;
}
:root[data-theme="light"] .tab.active{ color: var(--gold-ink); }

.navdiv{
  width: 1px;
  height: 22px;
  background: var(--border-2);
  margin: 0 5px;
  flex: 0 0 auto;
}
.navdiv ~ .tab{ opacity: .82; }

/* pulsing "something new" dot on a tab */
.navdot{
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.navdot::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: lpulse 1.9s ease-out infinite;
}
@keyframes lpulse{
  0%{ transform: scale(1); opacity: .7; }
  70%{ transform: scale(2.6); opacity: 0; }
  100%{ transform: scale(2.6); opacity: 0; }
}

/* tab-like search button (#hsearch) — becomes the FAB in the mobile bar */
.searchtab{
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.searchtab:hover{ color: var(--ink); background: var(--surface-2); }
.searchtab .ticon{ color: var(--accent); }
.sp-extra{ font-size: 11px; color: var(--faint); }
/* audit: inside filled/selected controls the faint sub-label sat on the accent
   fill — take the control's own ink there. */
.btn .sp-extra, .segbtn.on .sp-extra, .segs button.on .sp-extra{ color: inherit; }

/* ---- account chip & dropdown ------------------------------------------ */
#acct{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 12px;
  cursor: pointer;
}
#acct:hover{ background: var(--surface-2); }
#acct .avatar{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
}
#acct .aname{
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
}

.acctdot{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}

.newsn{
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red);
  color: #33191a; /* audit: #fff sat at 3.1:1 on the dark theme's salmon red */
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme="light"] .newsn{ color: #fff; }

.acctdrop{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
  padding: 6px;
  display: none;
}
.acctdrop.open{ display: block; }
.acctdrop a, .acctdrop button{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
}
.acctdrop a:hover, .acctdrop button:hover{ background: var(--surface-2); color: var(--ink); }
.acctdrop .sep{ height: 1px; background: var(--border); margin: 5px 4px; }
.acctdrop .dmail{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* theme row + pill switch */
#themeb{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
}
#themeb:hover{ background: var(--surface-2); }
.thmsw{
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: var(--border-2);
  transition: background .18s;
  flex: 0 0 auto;
}
.thmsw::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .18s;
}
.thmsw.on{ background: var(--accent); }
.thmsw.on::after{ transform: translateX(13px); }

/* ---- search modal ------------------------------------------------------ */
.searchmodal{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(11,18,30,.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 78px 16px 24px;
  display: none;
}
.searchmodal.open{ display: block; }
.searchpanel{
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.gsbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.gsbar input{
  flex: 1;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 4px 0;
  font-size: 16px;
}
.gsbar input:focus{ box-shadow: none; }
.gsbar .sicon{ color: var(--accent); font-size: 17px; }
.gsbar .gx{ color: var(--faint); font-size: 18px; padding: 4px; }

/* ---- footer ------------------------------------------------------------ */
footer{
  border-top: 1px solid var(--border);
  padding: 26px 0 34px;
  color: var(--muted);
  font-size: 12.5px;
  background: var(--bg2);
}
.foot-links{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
}
.foot-links a{ color: var(--muted); }
.foot-links a:hover{ color: var(--accent); }
.foot-prod{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 12px;
  color: var(--faint);
}
.foot-copy{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--faint);
}
#gen{ color: var(--faint); font-variant-numeric: tabular-nums; }
#footdisc{
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.55;
}
#seolede{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- views ------------------------------------------------------------- */
.view{ display: none; }
.view.active{
  display: block;
  animation: kmViewIn .2s ease-out;
}
@keyframes kmViewIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}
#view-live{ position: relative; }

/* in-page boot loader */
.bootload{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 64px 20px;
  color: var(--muted);
}
.bootload .track{
  width: 180px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.bootload .track::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: var(--accent);
  animation: bootslide 1.15s ease-in-out infinite;
}
@keyframes bootslide{
  from{ transform: translateX(-110%); }
  to{ transform: translateX(360%); }
}
.bootload b{ font-size: 14px; color: var(--ink); }
.bootload .sub{ font-size: 12.5px; color: var(--faint); }

/* ==========================================================================
   04 PANELS & STATS
   ========================================================================== */

.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.panel > h3{ font-size: 15px; margin-bottom: 4px; }
.panel .note{ font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.panel-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.panel-head .stamp{
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* gradient feature panels */
.hero, .pghero, .liveperf{
  position: relative;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-wash), transparent 55%),
    linear-gradient(160deg, var(--surface) 0%, var(--bg2) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 20px;
  overflow: hidden;
}
.pghero{ padding: 20px 22px; }
.liveperf{ padding: 18px 22px; }

/* from → to big number */
.bignum{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.bignum .from{
  font-size: 20px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bignum .to{
  font-size: 40px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum .mult{
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
}

/* stat tile grids */
.cards{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.cards .card, .stile{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 15px;
}
.cards .k, .stile .k{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 6px;
}
.cards .v, .stile .v{
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.cards .s, .stile .s{ font-size: 12px; color: var(--faint); margin-top: 3px; }

.admincards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.admincards .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 14px;
}

/* key / value strip */
.strip{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 14px 0;
  font-size: 13px;
}
.strip .k{ color: var(--muted); margin-right: 6px; }
.strip .v{ font-weight: 650; font-variant-numeric: tabular-nums; }

.trstats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.trstats > div{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-width: 0;
  overflow-wrap: break-word;
}

/* universe health tiles */
.uhealth{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.hcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.hcard .big{
  font-size: 46px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hcard .lbl{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-top: 6px;
}

/* ==========================================================================
   05 TABLES
   ========================================================================== */

table{
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
th{
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: right;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
th:first-child{ text-align: left; }
td{
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
td:first-child{ text-align: left; }
tbody tr{ cursor: pointer; }
tbody tr:hover{ background: var(--surface-2); }

.tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0;
}

/* sticky table headers inside scrolling panels */
.tablewrap thead th, .membertbl thead th, .indp thead th{
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.sym{
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.sym small, .sym .isin{
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--faint);
  letter-spacing: .02em;
}

/* sortable headers */
th.sortable{ cursor: pointer; user-select: none; }
th.sortable:hover{ color: var(--ink); }
th.sortable::after{
  content: "";
  display: inline-block;
  margin-left: 5px;
  opacity: 0;
  font-size: 9px;
}
th.sortable.s-asc::after{ content: "\25B2"; opacity: 1; color: var(--accent); }
th.sortable.s-desc::after{ content: "\25BC"; opacity: 1; color: var(--accent); }

/* stat-list table variant */
.stlist td{ padding: 7px 10px; font-size: 13px; }
.stlist td:first-child{ color: var(--muted); }
.stlist tr{ cursor: default; }
.stlist tr:hover{ background: none; }

/* industry pulse table */
.indp{ min-width: 640px; }
.indp td svg{ display: block; }
.indp .indname{ font-weight: 650; }
.indptip{
  display: none;
  position: absolute;
  z-index: 80;
  background: var(--ch-tip-bg);
  color: var(--ch-tip-ink);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  max-width: 260px;
}
/* bubble anchors: tile eyebrow hosts <button.qinfo>i</button><span.indptip> */
.hcard .eyebrow{ position: relative; }
.qinfo:hover + .indptip,
.qinfo:focus + .indptip,
.qinfo.open + .indptip{ display: block; }

/* cohort heat table */
.cohorttbl td{
  text-align: center;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid var(--bg);
}
.cohorttbl tr{ cursor: default; }
.cohorttbl tr:hover{ background: none; }

/* table find/filter box */
.findw{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.findi{
  width: 132px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  transition: width .18s;
}
.findi:focus{ width: 168px; }
.findw .fcount{ font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.fmiss{ display: none !important; }

/* ==========================================================================
   06 BADGES & CHIPS
   ========================================================================== */

.tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.tag.stop, .tag.stop8{ background: var(--wash-red); color: var(--red); }
.tag.ma50, .tag.ma30wk, .tag.trail50{ background: var(--wash-green); color: var(--green); }
.tag.rotate, .tag.breakeven, .tag.skip{ background: var(--surface-2); color: var(--muted); }
.tag.wait{ background: var(--gold-bg); color: var(--gold-ink); }

/* verdict chips */
.qverd, .verdict{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.qverd.v-break, .verdict.v-break{ background: var(--wash-green); color: var(--green); }
.qverd.v-watch, .verdict.v-watch{ background: var(--gold-bg); color: var(--gold-ink); }
.qverd.v-run,   .verdict.v-run{   background: var(--pick-bg); color: var(--pick-ink); }
.qverd.v-exit,  .verdict.v-exit{  background: var(--wash-red); color: var(--red); }
.qverd.v-lead,  .verdict.v-lead{  background: var(--surface-2); color: var(--ink); }
.qverd.v-out,   .verdict.v-out{   background: var(--surface-2); color: var(--faint); }

/* RS-quadrant color coding */
.q-lead{ color: var(--accent); }
.q-impr{ color: var(--ch-dma50); }
.q-weak{ color: var(--ch-dma200); }
.q-lag{  color: var(--red); }
.qcard.q-lead{ border-left: 3px solid var(--accent); }
.qcard.q-impr{ border-left: 3px solid var(--ch-dma50); }
.qcard.q-weak{ border-left: 3px solid var(--ch-dma200); }
.qcard.q-lag{  border-left: 3px solid var(--red); }

/* stage dots */
.dotk{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: middle;
  flex: 0 0 auto;
}
.dotk.k-watch{ background: var(--faint); }
.dotk.k-trig{  background: var(--gold); }
.dotk.k-hold{  background: var(--green); }
.dotk.k-exit{  background: var(--border-2); }
.dotk.k-neg{   background: var(--red); }
.dotk.k-off{   background: transparent; box-shadow: inset 0 0 0 2px var(--faint); }
.dotk.k-squat{ background: #b8860b; }

/* counters */
.badge-n{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}
.qcnt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qcnt.g{ background: var(--wash-green); color: var(--green); }
.qcnt.b{ background: var(--pick-bg); color: var(--pick-ink); }
.qcnt.a{ background: var(--gold-bg); color: var(--gold-ink); }
.qcnt.r{ background: var(--wash-red); color: var(--red); }
.sccnt{
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hfnew{
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--accent);
  text-transform: uppercase;
  vertical-align: super;
}
.nwpin, .nwnew{
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.nwpin{ background: var(--surface-2); color: var(--muted); }
.nwnew{ background: var(--accent-soft); color: var(--accent-ink); }
.peerrank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* live status labels */
.livedot{ font-size: 12px; font-weight: 600; }
.livedot.up, .livedot.dr{ color: var(--green); font-weight: 700; }
.livedot.warn{ color: var(--gold); }
.livedot.dw{ color: var(--muted); }
:root[data-theme="light"] .livedot.warn{ color: #b07800; }

/* ==========================================================================
   07 BUTTONS & CONTROLS
   ========================================================================== */

/* quiet "Sign in" companion to the signed-out Sign-up CTA */
.acctlink{
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  padding: 8px 10px;
  margin-right: 4px;
  cursor: pointer;
}
.acctlink:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 9px 16px;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
/* audit: the old `:root[data-theme="light"] .btn{color:#fff}` overrides out-specified
   ghost-styled combos (.gbtn, .cc-fsb …) and painted their text white on white —
   the per-theme ink now travels through --on-accent instead. */
.btn:hover{ background: var(--accent-ink); color: var(--on-accent); }
.btn:active{ transform: translateY(1px); }
.btn:disabled{
  /* audit: was opacity:.5 over the accent fill — pale green on green. Disabled =
     muted fill + darker readable ink, not a translucent ghost of the enabled state. */
  background: var(--accent-soft);
  color: var(--accent-ink);
  cursor: not-allowed;
}
.btn.ghost{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--ink);
}
.btn.ghost:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.btn.ghost:disabled{ background: none; border-color: var(--border); color: var(--faint); }
.btn.sm{ padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
/* audit: accent-coloured badges inside filled buttons (hero "new" pip, panel-head
   "Change ›" eyebrows) vanished on the accent fill — take the button's own ink. */
.btn .eyebrow, .btn .hfnew{ color: inherit; }

/* playground apply + stale results */
.pgapply{ position: relative; }
.pgapply.stale{ animation: pgpulse 1.4s ease-out infinite; }
@keyframes pgpulse{
  0%{ box-shadow: 0 0 0 0 var(--accent-wash), 0 0 0 0 rgba(23,184,119,.45); }
  70%{ box-shadow: 0 0 0 4px transparent, 0 0 0 10px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.pgspin{
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kmSpin .8s linear infinite;
}
@keyframes kmSpin{ to{ transform: rotate(360deg); } }
#pgresults.stale{
  opacity: .38;
  filter: grayscale(1);
  pointer-events: none;
}

/* segmented controls — shared "muted outline, green fill when on" recipe */
.segs, .sectoggle, .seg2, .adm-gran, .ynav, .sctab, .segtog{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.segs button, .sectoggle .segbtn, .adm-gran button, .ynav button, .sctab button, .segtog button{
  border: 1px solid var(--border-2);
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 11px;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}
.segs button:hover, .sectoggle .segbtn:hover, .adm-gran button:hover,
.ynav button:hover, .sctab button:hover, .segtog button:hover{
  color: var(--ink);
  border-color: var(--accent);
}
.segs button.on, .sectoggle .segbtn.on, .adm-gran button.on,
.ynav button.on, .sctab button.on, .segtog button.on{
  background: var(--accent);
  border-color: var(--accent);
  color: #06251a;
}
:root[data-theme="light"] .segs button.on,
:root[data-theme="light"] .sectoggle .segbtn.on,
:root[data-theme="light"] .adm-gran button.on,
:root[data-theme="light"] .ynav button.on,
:root[data-theme="light"] .sctab button.on,
:root[data-theme="light"] .segtog button.on{ color: #fff; }

/* inset variant */
.seg2{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg2 button{
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  padding: 5px 11px;
}
.seg2 button.on{
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* sticky legend row */
.legrow{
  position: sticky;
  top: 66px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  background: var(--bg);
}
.legbtn{
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
}
.legbtn:hover{ color: var(--ink); border-color: var(--accent); }
.legbtn.on{ background: var(--accent); border-color: var(--accent); color: #06251a; }
:root[data-theme="light"] .legbtn.on{ color: #fff; }

/* pill filter rows */
.mktp, .brkchip, .lrn-pill, .fbkind{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none; /* audit: emitted as `btn mktp` etc. — .btn's accent fill leaked under the muted pill ink */
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 13px;
  transition: background .13s, color .13s, border-color .13s;
  white-space: nowrap;
}
.mktp:hover, .brkchip:hover, .lrn-pill:hover, .fbkind:hover{ color: var(--ink); border-color: var(--accent); }
.mktp.on, .brkchip.on, .lrn-pill.on, .fbkind.on{
  background: var(--accent);
  border-color: var(--accent);
  color: #06251a;
}
:root[data-theme="light"] .mktp.on,
:root[data-theme="light"] .brkchip.on,
:root[data-theme="light"] .lrn-pill.on,
:root[data-theme="light"] .fbkind.on{ color: #fff; }

/* ---- sliders ----------------------------------------------------------- */
.scsl{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-2);
}
.scsl::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}
.scsl::-moz-range-thumb{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}

/* dual-thumb: static track + fill + two overlaid transparent ranges */
.scdual{
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
.scdual .track{
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--border-2);
}
.scdual .fill{
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.scdual input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: none;
  pointer-events: none;
}
.scdual input[type="range"]::-webkit-slider-runnable-track{ background: none; }
.scdual input[type="range"]::-moz-range-track{ background: none; }
.scdual input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  pointer-events: auto;
  cursor: pointer;
  margin-top: 0;
}
.scdual input[type="range"]::-moz-range-thumb{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* label / slider / value row */
.scrow2{
  display: grid;
  grid-template-columns: 168px 1fr 88px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
}
.scrow2 .lbl{ color: var(--muted); }
.scrow2 .val{
  text-align: right;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 6px;
  padding: 3px 6px;
}
.scrow2 .val:hover{ background: var(--surface-2); }
.scrow2.activev .val, .scrow2 .val.on{ color: var(--accent); font-weight: 700; }

/* numeric value editor popover */
.scvpop{
  position: absolute;
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.scvpop input{ width: 90px; height: 32px; font-size: 13px; }

/* ==========================================================================
   08 POPOVERS & INFO TOOLTIPS
   ========================================================================== */

/* circled-i info tips */
.scinfo, .qinfo, .minfo, .sqi{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  color: var(--faint);
  font-size: 10px;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
  vertical-align: middle;
}
.scinfo:hover, .qinfo:hover, .minfo:hover, .sqi:hover{
  border-color: var(--muted);
  color: var(--muted);
}
.scinfo .tip, .qinfo .tip, .minfo .tip, .sqi .tip{
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-18px);
  width: 210px;
  max-width: 236px;
  min-width: 170px;
  background: #1c2431;
  color: #dfe6ef;
  border: 1px solid #2b3a4e;
  font-size: 12px;
  font-style: normal;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  border-radius: 9px;
  padding: 9px 11px;
  z-index: 90;
  box-shadow: var(--shadow);
  text-align: left;
  pointer-events: none;
}
.scinfo:hover .tip, .qinfo:hover .tip, .minfo:hover .tip, .sqi:hover .tip,
.scinfo:focus .tip, .qinfo:focus .tip, .minfo:focus .tip, .sqi:focus .tip,
.scinfo:focus-within .tip, .qinfo:focus-within .tip, .minfo:focus-within .tip, .sqi:focus-within .tip,
.scinfo.open .tip, .qinfo.open .tip, .minfo.open .tip, .sqi.open .tip{
  display: block;
}
.scinfo .tip b, .qinfo .tip b, .minfo .tip b, .sqi .tip b{ color: var(--gold-ink); }
.scinfo.flip .tip, .qinfo.flip .tip, .minfo.flip .tip, .sqi.flip .tip{
  left: auto;
  right: 50%;
  transform: translateX(18px);
}

/* shared dropdown/popover chrome (KM.popover host + menus) */
.navDropMenu, .filtmenu, .pfaddpop, .indpop, .mspop, .mktmenu, .swpop{
  position: absolute;
  z-index: 70;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  min-width: 180px;
}
.navDropMenu{ z-index: 90; }
.navDropMenu .mi, .filtmenu .mi, .mktmenu .mi{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.navDropMenu .mi:hover, .filtmenu .mi:hover, .mktmenu .mi:hover{ background: var(--surface-2); }
.navDropMenu .mi.on, .filtmenu .mi.on, .mktmenu .mi.on{
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 650;
}
.navDropMenu .sep, .filtmenu .sep, .mktmenu .sep{ height: 1px; background: var(--border); margin: 5px 4px; }
/* live-bar screen-picker menu (#lv-screenmenu): bare <button data-sel> rows +
   <b.eyebrow> group headers — must read as a vertical menu, not inline text */
.navDropMenu > button[data-sel],
.filtmenu > button,
.filtmenu .fmrow > button[data-fm]{
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.navDropMenu > button[data-sel] + button[data-sel],
.filtmenu > button + button{ margin-top: 2px; }
.navDropMenu > button[data-sel]:hover,
.filtmenu > button:hover,
.filtmenu .fmrow > button[data-fm]:hover{ background: var(--surface-2); }
.navDropMenu > button[data-sel].on,
.filtmenu > button.on{
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 650;
}
.filtmenu .fmrow{ display: flex; align-items: center; gap: 4px; }
.filtmenu .fmrow > button[data-fm]{ flex: 1; min-width: 0; }
.navDropMenu > b.eyebrow{
  display: block;
  margin: 8px 10px 4px;
  font-weight: 700;
}
.navDropMenu > b.eyebrow:first-child{ margin-top: 2px; }
#lv-screenmenu{ position: absolute; top: calc(100% + 6px); right: 0; min-width: 250px; }
.livectl{ position: relative; }

/* nav dropdown rows (menuRow(): .ndr = icon | text column | chevron) */
.ndr{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.ndr + .ndr{ margin-top: 2px; }
.ndr:hover{ background: var(--surface-2); }
.ndr:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.ndr.on{ background: var(--accent-wash); }
.ndr.on .ndr-tx b{ color: var(--accent-ink); }
.ndr-ic{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
}
.ndr-tx{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ndr-tx b{ font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.ndr-tx span{ font-size: 12px; color: var(--faint); line-height: 1.3; }
.ndr-ch{ color: var(--faint); font-size: 14px; padding-left: 4px; }
.navDropMenu .hd, .filtmenu .hd, .indpop .hd, .mktmenu .hd{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  padding: 6px 10px 4px;
}

.pfaddpop{ width: 292px; }
.indpop{ width: 300px; }
.indpop .scroller{
  max-height: 300px;
  overflow-y: auto;
  margin-top: 6px;
}
.indpop input{ width: 100%; height: 32px; font-size: 13px; }
.mspop{ min-width: 320px; max-width: 92vw; }
.msmbtn{
  border: 1px solid var(--border-2);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 9px;
}
.msmbtn.on{ background: var(--pick-bg); border-color: var(--pick); color: var(--pick-ink); }
.mktmenu{
  position: fixed;
  z-index: 210;
  min-width: 270px;
  max-width: 340px;
}
.swpop{ width: 320px; z-index: 1300; }

/* download / share / star */
.dlbtn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none; /* audit: emitted as `btn dlbtn` — .btn's accent fill leaked under the muted ink */
  border: 1px solid var(--border-2);
  border-radius: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
}
.dlbtn:hover{ color: var(--ink); border-color: var(--accent); }
.dlbtn.dllock{
  /* audit: locked = quiet surface + dimmed-but-readable ink, not faint-on-accent */
  background: var(--surface-2);
  border-style: dashed;
  color: var(--faint);
}
.sharebtn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none; /* audit: emitted as `btn sharebtn` — accent fill leak */
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 5px 12px;
}
.sharebtn:hover{ color: var(--accent); border-color: var(--accent); }
.wstar{
  font-size: 17px;
  color: var(--faint);
  padding: 4px;
  border-radius: 7px;
  line-height: 1;
  transition: color .13s, transform .13s;
}
.wstar:hover{ color: var(--gold); transform: scale(1.12); }
.wstar.on{ color: var(--gold); }
.wstar:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   09 DRAWER
   ========================================================================== */

.scrim{
  position: fixed;
  inset: 0;
  background: rgba(15,20,25,.34);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
.scrim.show{ opacity: 1; pointer-events: auto; }

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 61;
  transform: translateX(102%);
  transition: transform .22s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer.show, .drawer.open{ transform: translateX(0); }
.drawer.scrn{ width: min(900px, 96vw); }

.dh{
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dh .dx{
  margin-left: auto;
  font-size: 20px;
  color: var(--faint);
  padding: 3px 7px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.dh .dx:hover{ color: var(--ink); background: var(--surface-2); }
.dh-slim{ padding: 9px 16px; align-items: center; }
.dh .backrow{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.dh-stock{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.dh-stock .dname{
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.dshare{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 4px 11px;
}
.dshare:hover{ color: var(--accent); border-color: var(--accent); }

.dbody{ padding: 20px; }
.dstats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.dstats > div{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.dstats .k{ font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dstats .v{ font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; }

.why{
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: 13.5px;
  margin: 14px 0;
}
.legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0;
}
.legend i{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: baseline;
}

/* drawer underline tabs */
.dtabs{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--border);
  margin: 6px 0 14px;
}
.dtab{
  padding: 10px 4px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dtab:hover{ color: var(--ink); }
.dtab.on{ color: var(--accent); border-bottom-color: var(--accent); }
.dtab-pane{ display: none; }
.dtab-pane.on{ display: block; }

/* news-reading mode inside drawer */
.drawer.nwmode{ display: flex; flex-direction: column; overflow: hidden; }
.drawer.nwmode .dbody{ flex: 1; min-height: 0; padding: 0; }
.nwgrid{
  display: grid;
  grid-template-columns: 210px 1fr;
  height: 100%;
  min-height: 0;
}
.nwgrid nav{
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 8px;
}
.nwgrid nav a{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.nwgrid nav a:hover{ background: var(--surface-2); color: var(--ink); }
.nwgrid nav a.on{ background: var(--accent-wash); color: var(--accent-ink); font-weight: 650; }
.nwread{
  overflow-y: auto;
  padding: 20px 24px;
  max-width: 660px;
}

/* lock layout inside drawer */
.lockdrw{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 56px 26px;
  color: var(--muted);
}

/* ==========================================================================
   10 GATING & LOCKS
   ========================================================================== */

/* full-surface gate: blurred content + centered lock overlay */
.gate{ position: relative; }
.gate > .gated-content{
  filter: blur(7px);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.gate .lock{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 88%, transparent), transparent 78%);
}
.gate .lock .licon{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #06251a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
:root[data-theme="light"] .gate .lock .licon{ color: #fff; }
.gate .lock h3{ margin: 2px 0 0; font-size: 17px; }
.gate .lock .sub{ font-size: 13px; color: var(--muted); max-width: 330px; }

.gate-inline{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--muted);
}

/* login modal */
.gatemodal, #gatemodal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9,14,22,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.gatebox{
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 26px 26px 24px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
.gatebox #gx{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 20px;
  color: var(--faint);
  padding: 4px 8px;
  border-radius: 8px;
}
.gatebox #gx:hover{ color: var(--ink); background: var(--surface-2); }

.loginbox{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}
.loginbox .licon{
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.loginbox h3{ margin: 0; font-size: 19px; }
.loginbox .sub{ font-size: 13.5px; color: var(--muted); margin-top: -6px; }

.gbtn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 14px;
}
.gbtn:hover{ border-color: var(--accent); background: var(--accent-wash); }

.ordiv{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ordiv::before, .ordiv::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.form{ display: flex; gap: 8px; }
.form.col{ flex-direction: column; }
.form input{ width: 100%; height: 42px; font-size: 16px; }
.loginmsg{
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}
.loginmsg.ok{ color: var(--green); }
.loginmsg.err, #lerr{ color: var(--red); font-size: 13px; }
#lmsg a{ font-weight: 650; word-break: break-all; }

/* partial locks */
.taglock{
  position: relative;
  filter: blur(4px);
  user-select: none;
}
.taglock::after{
  content: "\1F512";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  filter: blur(0);
}
.namelock{
  filter: blur(4.5px);
  user-select: none;
  pointer-events: none;
}
.setup.locked .setuplock-veil, .runrow.locked, tr.locked{ position: relative; }
.setup.locked .schart, .setup.locked .sname,
.runrow.locked .sym, tr.locked .sym{
  filter: blur(4.5px);
  user-select: none;
}
.setup.locked, .runrow.locked, tr.locked{ cursor: pointer; }
.stblur{ filter: blur(4.5px); user-select: none; }

.lockmore{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 14px;
  margin: 10px 0;
}
.lockmore:hover{ border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

.gatetease{
  font-size: 12.5px;
  color: var(--muted);
  background: var(--gold-bg);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--gold-ink);
}
.hnewlead.locked{ filter: blur(4.5px); user-select: none; }
.wcall.gated{ opacity: .55; pointer-events: none; filter: blur(2px); }
.xrlock{ position: relative; }
.xrlock::after{
  content: "\1F512";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 13px;
}
.pflock{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 46px 20px;
  color: var(--muted);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
}

/* ==========================================================================
   11 LIVE SCREENS — setups, run lists, stage flow, movers, heat, funnel
   ========================================================================== */

.setups{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0;
}
.setup{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 15px;
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.setup:hover{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.setup .noterow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}
.setup .fullchart{
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.setup .fullchart:hover{ color: var(--accent); }
.renote{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 4px 9px;
}
.renote.fail{ background: var(--wash-red); color: var(--red); }
.renote.watch{ background: var(--gold-bg); color: var(--gold); }

.setup .headrow{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.setup .identrow{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  min-width: 0;
}
.setup .crumb{ display: none; }
.setup .schart{ min-height: 150px; }

/* setup criteria checklist */
.crit{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
.crit li{ display: flex; align-items: baseline; gap: 7px; }
.crit li::before{
  content: "\2713";
  color: var(--accent);
  font-weight: 700;
  flex: 0 0 auto;
}
.crit li.off{ color: var(--faint); }
.crit li.off::before{ content: "\00B7"; color: var(--faint); }

/* setup skeleton */
.csk{
  height: 170px;
  border-radius: 10px;
  background: linear-gradient(100deg, var(--surface-2) 40%, var(--border) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: kmShimmer 1.4s linear infinite;
}
@keyframes kmShimmer{
  from{ background-position: 130% 0; }
  to{ background-position: -70% 0; }
}

/* compact run list */
.runlist{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 12px 0;
  background: var(--surface);
}
.runrow{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13.5px;
}
.runrow:last-child{ border-bottom: 0; }
.runrow:hover{ background: var(--surface-2); }
.runrow .num{ margin-left: auto; }

/* collapsed lists — children 5+ hidden until expanded */
.runlist.collapsed .runrow:nth-child(n+5){ display: none; }
.setups.collapsed .setup:nth-child(n+5){ display: none; }
.showmore{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.showmore:hover{ background: var(--accent-wash); }

/* stage flow strip */
.flow{
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 14px 0;
}
.fstage{
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: border-color .13s, background .13s;
  white-space: nowrap;
}
.fstage:hover{ border-color: var(--accent); }
.fstage.on{
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.fstage b{ display: block; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fstage.on b{ color: var(--accent-ink); }

/* lifecycle flow — numbered circles */
.lifeflow{
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 16px 0;
  counter-reset: lifestep;
}
.lifeflow .step{
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--muted);
  counter-increment: lifestep;
}
.lifeflow .step::before{
  content: counter(lifestep);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.lifeflow .step::after{
  content: "";
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--border-2);
}
.lifeflow .step:last-child::after{ display: none; }
.lifeflow .step.on{ color: var(--accent-ink); }
.lifeflow .step.on::before{
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

/* lifecycle strip boxes */
.lifestrip{
  display: flex;
  gap: 8px;
  margin: 12px 0;
  overflow-x: auto;
}
.lifebox{
  flex: 1;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.lifebox.on{
  background: var(--accent-wash);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  color: var(--accent-ink);
}
.lifebox b{ display: block; color: var(--ink); font-size: 15px; }
.lifebox.on b{ color: var(--accent-ink); }

/* universe funnel */
.ufunnel{
  display: grid;
  gap: 6px;
  margin: 14px 0;
}
.ufunnel .ufrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.ufunnel .ufbar{
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-ink));
  min-width: 3px;
}

/* live filter banner + updated stamp */
.livefilt{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  margin: 10px 0;
}
.liveupd{
  position: absolute;
  top: 4px;
  right: 0;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* movers */
.mvgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.mvcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mvcard:hover{ border-color: var(--accent); }
/* seed CTA at the card foot: full-width, wraps, never spills past the card */
.mvcard .btn[data-seed]{
  display: block;
  width: 100%;
  margin-top: auto;
  /* transparent border = guaranteed 12px gap even when the auto margin is 0 */
  border-top: 12px solid transparent;
  background-clip: padding-box;
  padding: 9px 12px;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.35;
  font-size: 12.5px;
}
.mvcard .chartwrap{ min-width: 0; }

/* ---- Breakouts-ledger card (redesigned body; .mvcard supplies the shell) ---- */
.bkcard .bkhead{
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.bkcard .bkid{
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
}
.bkcard .bknm{ font-weight: 700; }
.bkcard .bkpx{
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bkcard .bkpx b{ font-weight: 700; }
.bksub{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 7px;
  font-size: 12px;
  min-width: 0;
}
.bksub .bksec{ flex: 1; min-width: 0; color: var(--muted); }
.bksub .bksec .mlink{ font-size: 12px; }
.rschip{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rschip.rs-hot{
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.rschip.rs-warm{
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.rschip.rs-cool{
  background: var(--surface-2);
  color: var(--muted);
}
/* two-column metric table: label column left, value column right */
.bktable{ margin: 9px 0 10px; }
.bktable .bkrow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 2.5px 0;
}
.bktable .bklbl{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--faint);
  min-width: 0;
}
.bktable .bklt{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bktable .bkval{
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* footer: screen-tag chips left, quiet text-link CTA right */
.bkcard .bkfoot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  padding-top: 10px;
}
.bkcard .bktags{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.tag.bknone{
  background: none;
  border: 1px dashed var(--border);
  color: var(--muted);
}
.bkcta{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}
.bkcta:hover, .bkcta:focus-visible{ color: var(--accent-ink); text-decoration: underline; }
/* the richer card body earns a wider column than the generic movers grid */
#view-brk .mvgrid{ grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }

/* monthly PnL heat strip */
.heat{
  display: grid;
  grid-template-columns: 48px repeat(12, 1fr);
  gap: 3px;
  min-width: 540px;
  font-size: 11.5px;
}
.heatwrap{ overflow-x: auto; }
.heat .ylab{
  color: var(--muted);
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.heat .cell{
  border-radius: 4px;
  padding: 5px 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--muted);
}
.heat .cell.up{ background: var(--wash-green); color: var(--green); }
.heat .cell.dn{ background: var(--wash-red); color: var(--red); }
.heat .cell.hot{ background: var(--accent); color: var(--on-accent); font-weight: 700; }

/* funnel bars (#funnel .frow) animate in */
#funnel .frow{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 7px 0;
  font-size: 13px;
}
#funnel .frow .fbar{
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  width: 0;
  transition: width .6s ease-out;
  min-width: 2px;
}
#funnel .frow .flab{ width: 170px; color: var(--muted); flex: 0 0 auto; }
#funnel .frow .fn{ font-variant-numeric: tabular-nums; font-weight: 650; }

/* ==========================================================================
   12 SEARCH & TYPEAHEAD
   ========================================================================== */

.searchwrap{ position: relative; }
.qinput{
  width: 100%;
  height: var(--qctl);
  padding: 6px 12px 6px 36px;
  border-radius: 10px;
  font-size: 14px;
  background-image: none;
}
.searchwrap .sicon{
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 15px;
  pointer-events: none;
}
.searchwrap:focus-within .sicon{ color: var(--accent); }

.qdrop{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 80;
  padding: 5px;
}
.searchmodal .qdrop{
  position: static;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  max-height: 60vh;
}
.qdrop .hit{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
}
.qdrop .hit:hover, .qdrop .hit.sel{ background: var(--surface-2); }
.qdrop .hit .hsym{ font-weight: 700; }
.qdrop .hit .hname{
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.qnone{
  padding: 16px 14px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}
.qhd{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  padding: 8px 11px 4px;
}
.searchwrap.big .qinput{
  height: 46px;
  font-size: 17px;
  border-radius: 13px;
  padding-left: 42px;
}
.searchwrap.big{ max-width: 760px; }

/* watchlist add typeahead */
.pfadd{ position: relative; }
.pfdrop{
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 75;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.pfhit{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.pfhit:hover{ background: var(--surface-2); }

/* inline find box */
.qfindbox{
  height: 36px;
  border-radius: 9px;
  font-size: 13.5px;
}

/* home search */
.hmsearch{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 0 0 5px var(--accent-wash), var(--shadow);
  padding: 4px 8px 4px 16px;
  max-width: 640px;
  cursor: text;
}
.hmsearch input{
  flex: 1;
  border: 0;
  background: none;
  box-shadow: none;
  height: 44px;
  font-size: 16px;
  min-width: 0;
}
.hmsearch input:focus{ box-shadow: none; }
.hmsearch .sicon{ color: var(--accent); font-size: 17px; }
.hmtry{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  font-size: 12.5px;
  color: var(--faint);
}
.hmtryb{
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 11px;
}
.hmtryb:hover{ color: var(--accent); border-color: var(--accent); }
.hmhit{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.hmhit:hover{ background: var(--surface-2); }
#hmq{ width: 100%; }
#hmdrop{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 340px;
  overflow-y: auto;
  padding: 5px;
}

/* ==========================================================================
   13 HOME
   ========================================================================== */

/* signed-out band: full-bleed gradient */
.hmband{
  margin: -30px calc(50% - 50vw) 26px;
  padding: 54px 20px 44px;
  background:
    radial-gradient(90% 120% at 85% 0%, var(--accent-wash), transparent 55%),
    radial-gradient(70% 100% at 10% 100%, rgba(229,184,78,.06), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border-bottom: 1px solid var(--border);
}
.hmtop{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 56px;
  align-items: center;
}
.hmtop h1{ font-size: 34px; }
.hmtop .lede, .hmtop .hmsub{ font-size: 15.5px; color: var(--muted); }
/* the lede ships both copies; desktop reads the long one, ≤560 the short one */
.hmsub .hm-short{ display: none; }

/* rotating slides */
.hmslides{ position: relative; min-height: 300px; }
.hmcard{
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  opacity: 0;
  transition: opacity .45s;
  pointer-events: none;
}
.hmcard.on, .hmcard.active{ opacity: 1; pointer-events: auto; }
.hmcard .hchart{ min-height: 196px; }
.hmdots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.hmdot{
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--border-2);
  transition: width .25s, background .25s;
  padding: 0;
}
.hmdot.on{ width: 16px; background: var(--accent); }

/* stat facts band (count-up targets) */
.hmfacts{
  display: grid;
  grid-auto-flow: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 30px;
}
.hmfacts > div{
  background: var(--surface);
  padding: 14px 16px;
  text-align: center;
}
.hmfacts .fv{
  font-size: 27px;
  font-weight: 750;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.hmfacts .fk{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-top: 3px;
}
.hmfacts .fv, .hmfacts .fk{ display: block; }
.hmfacts .fs{
  display: block;
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 2px;
}

/* signed-in hero row */
.herorow{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  margin-bottom: 18px;
}
/* Hero lifecycle tile: flat DOM (i.dotk, b count, span label, span.faint desc,
   span.mlink) — stacked column, dot top-left + count top-right on one row. */
.hstage{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  text-align: left;
  padding: 14px 14px 12px;
  min-height: 0;
}
.hstage .dotk{ position: absolute; top: 20px; left: 14px; }
.hstage > b{
  display: block;
  text-align: right;
  font-size: 22px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 10px;
}
.hstage > span{
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
}
.hstage > span.faint{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--faint);
  margin-top: 5px;
  /* uniform tiles: long stage blurbs clamp — the full text lives on the
     stage panel itself once tapped */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hstage > span.mlink{
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  margin-top: auto; /* pin to the tile foot so all four align */
  padding-top: 10px;
}
.hstandout{
  background: linear-gradient(150deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px;
  animation: heroin .5s ease-out;
}
@keyframes heroin{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}
.hstandout .gain{
  font-size: 24px;
  font-weight: 750;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* what-changed feed box */
.hchanged{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hcleg{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 8px;
}
.hchanged .hclist{
  max-height: 184px;
  overflow-y: auto;
  font-size: 13px;
}
.hchanged .hclist .row{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.hchanged .hclist .row:hover{ background: var(--surface-2); }

/* mobile tap-bar + bottom sheet replacement */
.hchbar{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 13.5px;
  font-weight: 600;
}
.hcsheet{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 205;
  max-height: min(560px, 82vh);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: hcsup .24s ease-out;
}
@keyframes hcsup{
  from{ transform: translateY(24px); opacity: 0; }
  to{ transform: none; opacity: 1; }
}
.hcsheet-wrap{
  position: fixed;
  inset: 0;
  z-index: 204;
  background: rgba(9,14,22,.45);
}
.hcsheet-wrap .hcsheet{ display: block; padding-top: 0; }
.hcsheet .dh-slim h2{ font-size: 16px; margin: 0; }
.hcsheet .dh-slim{ margin: 0 -16px 8px; }
.hcsheet .hcleg{ margin: 10px 0 4px; }
.hcsheet .hclist{ max-height: 58vh; overflow-y: auto; font-size: 13px; }
.hcsheet .hclist .fdcat{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
  font-size: 12.5px;
}
.hcsheet .hclist .row{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 7px 2px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.hcsheet .hclist .row:hover{ background: var(--surface-2); }
.hcsheet .hclist .row .feedpx{ margin-left: auto; flex: 0 0 auto; }
@media (min-width: 621px){
  /* centred via auto margins (the hcsup keyframes own transform) */
  .hcsheet-wrap .hcsheet{
    width: min(600px, 94vw);
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* home footer strip + backtest teaser */
.hfoot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}
.hfoot .short{ display: none; }
.hbtbtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-2);
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
}
.hbtbtn:hover{ border-color: var(--accent); color: var(--accent); }
.btp-wrap{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9,14,22,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.btp-wrap .btpcard{
  width: min(430px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
}
.btp-wrap .btpnum{
  font-size: 52px;
  font-weight: 750;
  color: var(--accent);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* stat tile row (home) */
.hmrow{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

/* ==========================================================================
   14 HEALTH, QUADRANT & MAPS
   ========================================================================== */

/* market health layout */
.healthrow{
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-areas: "gauge breadth";
  gap: 16px;
  margin: 14px 0;
}
.healthrow .hgauge{ grid-area: gauge; }
.healthrow .hbreadth{ grid-area: breadth; }
.hvtog{ display: none; }

/* RS quadrant map */
.qmap{
  position: relative;
  background: var(--ch-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qcorner{
  position: absolute;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 9px;
  pointer-events: none;
  opacity: .85;
}
.qcorner.g{ top: 0; right: 0; color: var(--accent); }
.qcorner.b{ bottom: 0; right: 0; color: var(--ch-dma50); }
.qcorner.a{ top: 0; left: 0; color: var(--ch-dma200); }
.qcorner.r{ bottom: 0; left: 0; color: var(--red); }
.qlegend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* quadrant tooltip with CSS-triangle arrow */
.qtip{
  position: absolute;
  z-index: 80;
  background: var(--ch-tip-bg);
  color: var(--ch-tip-ink);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  max-width: 240px;
}
.qtip::after{
  content: "";
  position: absolute;
  top: 100%;
  left: var(--qtax, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ch-tip-bg);
}
.qtip.below::after{
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ch-tip-bg);
}

/* industry treemap */
.tmapvp{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ch-paper);
  touch-action: none;
}
.tmapvp.grabbing{ cursor: grabbing; }
.tmap{
  position: relative;
  aspect-ratio: 1000 / 620;
  width: 100%;
  transform-origin: 0 0;
}
.tmb{
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--bg);
  background: var(--map-zero);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.25;
  padding: 4px 6px;
  cursor: pointer;
  transition: filter .12s;
}
.tmb:hover{ filter: brightness(1.12); z-index: 2; }
.tmb.deep{ color: #fff; }
.tmb b{ display: block; font-size: 11.5px; letter-spacing: -.01em; }
.tmfb{
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  background: rgba(0,0,0,.28);
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
}
.tmz{
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tmz button{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmz button:hover{ border-color: var(--accent); color: var(--accent); }
.mapkey{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
}
.mkc{
  width: 26px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

/* sector browsing */
.sectorgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.sectorgrid .seccard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 13px;
}
.sectorgrid .seccard:hover{ border-color: var(--accent); }
.secbar{
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 7px;
}
.secfill{
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.sectwo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 12px 0;
}
.secchartgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.secchartgrid .sccard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
}
.st-watch{ background: var(--gold-bg); color: var(--gold-ink); }
.st-pos{   background: var(--wash-green); color: var(--green); }
.st-run{   background: var(--pick-bg); color: var(--pick-ink); }
.st-muted{ background: var(--surface-2); color: var(--muted); }
.st-watch, .st-pos, .st-run, .st-muted{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
}
.secall{
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  padding: 9px;
}

/* top performers (Market › Top performers) */
.perftbl{ width: 100%; border-collapse: collapse; }
.perftbl th{
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.perftbl th.num, .perftbl td.num{ text-align: right; font-variant-numeric: tabular-nums; }
.perftbl td{
  padding: 8px 10px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
tr.perfrow{ cursor: pointer; border-left: 3px solid transparent; }
tr.perfrow:hover{ background: var(--surface-2); }
tr.perfrow .perfrank{ color: var(--faint); font-weight: 750; }
/* medal tint for the top 3 — subtle gold / silver / bronze left border */
tr.perf-m1{ border-left-color: var(--gold); }
tr.perf-m2{ border-left-color: var(--muted); }
tr.perf-m3{ border-left-color: var(--ch-dma200); }
.perftbl .perfmult{ font-weight: 750; color: var(--accent-ink); }
:root[data-theme="light"] .perftbl .perfmult{ color: var(--accent); }
.srow .perfrank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.yearchips{ padding: 4px 0 10px; }

/* market posture */
.mposture{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.02em;
  margin: 8px 0 12px;
}
.mpill{
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: 5px 14px;
}
.mpill.on{ background: var(--accent); color: #06251a; }
:root[data-theme="light"] .mpill.on{ color: #fff; }
.mpill.off{ background: var(--red); color: #33191a; }
:root[data-theme="light"] .mpill.off{ color: #fff; }
.mreads{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.mreads3{ grid-template-columns: repeat(3, 1fr); }
.mreads6{ grid-template-columns: repeat(6, 1fr); }
.mreads > div{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--muted);
}
.splitbar{
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin: 8px 0;
  background: var(--surface-2);
}
.splitbar .g{ background: var(--green); }
.splitbar .r{ background: var(--red); }
.splitbar .n{ background: var(--border-2); }
.mlink{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}
.mlink a{ font-weight: 650; }

/* ==========================================================================
   15 CHART CHROME
   ========================================================================== */

svg.chart{
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
svg.chart text, .axis{
  font-size: 11px;
  fill: var(--ch-mute);
  font-family: inherit;
}
.chartwrap{ position: relative; }

.chartip{
  position: absolute;
  z-index: 20;
  background: var(--ch-tip-bg);
  color: var(--ch-tip-ink);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
  pointer-events: none;
  white-space: nowrap;
}
.chartip .m50{ color: #8fbcff; }
.chartip .m200{ color: #ffc488; }
:root[data-theme="light"] .chartip .m50{ color: #a8ccff; }
:root[data-theme="light"] .chartip .m200{ color: #ffd7a8; }

/* MA toggles */
.chartctl{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.matog{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 7px;
}
.matog:hover{ background: var(--surface-2); color: var(--ink); }
.matog.off{ opacity: .5; }
.madot{
  width: 13px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.matip{ font-size: 11px; color: var(--faint); }

/* paper equity chart — legend row (charts.equity) */
.eqleg{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin: 2px 0 6px;
}
.eqleg .eqit{ display: inline-flex; align-items: center; gap: 6px; }
.eqleg .eqsw{ width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.eqleg .eqsw-band{ opacity: .35; }
.eqleg .eqsw-dash{
  width: 12px;
  height: 0;
  border-radius: 0;
  background: none;
  border-top: 1px dashed var(--border-2);
}

/* anatomy annotation layout */
.anno{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  align-items: start;
  margin: 14px 0;
}
.anno .points{ font-size: 13.5px; }
[data-c]{ transition: opacity .25s; }
.chartwrap.focus [data-c]{ opacity: .12; }
.chartwrap.focus [data-c].sel{ opacity: 1; }
.anno .arow{
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid transparent;
}
.anno .arow:hover{ background: var(--surface-2); }
.anno .arow.sel{ background: var(--accent-wash); border-color: var(--accent); }

/* marching-ants breakout outline */
.bkants{
  stroke-dasharray: 6 5;
  animation: kmAnts 1.1s linear infinite;
}
@keyframes kmAnts{
  to{ stroke-dashoffset: -22; }
}
.bkblock{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color .13s, background .13s;
}
.bkblock:hover{ border-color: var(--accent); }
.bkblock.on{
  border-color: var(--accent);
  background: linear-gradient(0deg, rgba(23,184,119,.06), rgba(23,184,119,.10));
}
.bkfacts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 12.5px;
  margin-top: 9px;
}
.bkfacts > div{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dotted var(--border-2);
  padding: 3px 0;
}
.bkfacts[hidden]{ display: none; }
.bkaddm{
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  padding: 7px 0;
}
.bkchip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  color: var(--muted);
  padding: 3px 9px;
}

/* compact chart controls */
.cc-tfb{
  border: 1px solid var(--border-2);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--muted);
  padding: 4px 9px;
}
.cc-tfb.on{ background: var(--accent); border-color: var(--accent); color: #06251a; }
:root[data-theme="light"] .cc-tfb.on{ color: #fff; }
.cc-scroll{
  overflow-x: auto;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.cc-scroll.grabbing{ cursor: grabbing; user-select: none; }
.cc-fsov{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  padding: 14px;
  overflow: auto;
}

/* full-screen chart overlay */
.fsov{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9,14,22,.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.fsin{
  width: min(1220px, 100%);
  height: 96vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fsin.fsfull{
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border: 0;
}
.fsov:has(.fsfull){ padding: 0; }
.fsbody{
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0;
}
.fsbody .fschart{
  flex: 1;
  min-width: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.fsread{
  width: 400px;
  flex: 0 0 auto;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 18px;
}
.fsrail{
  display: none;
  width: 34px;
  border-left: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.fsrail:hover{ color: var(--accent); background: var(--surface-2); }
.fsin.fs-noread .fsread{ display: none; }
.fsin.fs-noread .fsrail{ display: flex; }
.fsx{
  font-size: 20px;
  color: var(--faint);
  padding: 4px 9px;
  border-radius: 8px;
}
.fsx:hover{ color: var(--ink); background: var(--surface-2); }
.fsb{
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.fsb:hover{ color: var(--ink); border-color: var(--accent); }
.fsb.on{ background: var(--accent); border-color: var(--accent); color: #06251a; }
:root[data-theme="light"] .fsb.on{ color: #fff; }

/* X-ray */
.xrun{
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
:root[data-theme="light"] .xrun{ color: #fff; }
.xrun:disabled{ opacity: .55; }
.xrcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  opacity: 0;
  transform: translateY(8px);
  cursor: pointer;
}
.xrcard.on{
  animation: xrin .45s ease-out forwards;
}
@keyframes xrin{
  to{ opacity: 1; transform: none; }
}
.xrt{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--surface-2);
  color: var(--muted);
}
.xrt.live{ background: rgba(23,184,150,.16); color: #35d0b0; }
.xrt.bo{ background: var(--pick-bg); color: var(--pick-ink); }
:root[data-theme="light"] .xrt.live{ background: #d7f3ec; color: #0c7f68; }
.bt-spin{
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kmSpin .8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* embed container */
#tvchart{
  height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ch-paper);
}

/* ==========================================================================
   16 WATCHLIST
   ========================================================================== */

.pfhead{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pftitle{
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 3px 8px;
  min-width: 0;
  max-width: 100%;
  box-shadow: none;
}
.pftitle:hover{ border-color: var(--border-2); }
.pftitle:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.pftitlebtn{
  color: var(--faint);
  font-size: 15px;
  padding: 5px 8px;
  border-radius: 8px;
}
.pftitlebtn:hover{ color: var(--ink); background: var(--surface-2); }
#pfeditname, #pfdelname{ font-weight: 650; }
#pfeditbtn{ font-size: 13px; }

.pfsum{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 14px 0;
}
.pfsum .bigcell{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.pfsum .tiles{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.pfmaprow{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  margin: 14px 0;
}
.pfcats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.pfrows{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.pfrowmain{
  display: grid;
  grid-template-columns: 1fr 72px 106px 96px 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13.5px;
}
.pfrowmain:hover{ background: var(--surface-2); }
/* audit: was `opacity:.55` — dimming the whole row left "not rated" text and the
   accent ✕ button under 4.5:1. Dim with explicit muted colours instead. */
.pfrow-na{ color: var(--faint); }
.pfrow-na .btn{ background: var(--surface-2); color: var(--muted); }
.pfrowmain .pfdel{
  display: none;
  color: var(--red);
  font-size: 15px;
}
#pfout.editing .pfdel{ display: inline-flex; }
#pfout.editing .pfclear{ display: inline-flex; }
#pfout .pfclear{ display: none; }

/* three-pane layout: changed + watchlist + map */
.pf3{
  display: grid;
  grid-template-columns: 1fr 46px 46px;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0;
  min-height: 380px;
}
.pf3 > section{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}
.pf3rail{
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  height: 100%;
  width: 100%;
  transition: color .13s, background .13s;
}
.pf3rail:hover{ color: var(--accent); background: var(--surface-2); }
.pf3.show-watch{ grid-template-columns: 1fr 300px 46px; }
.pf3.show-map{ grid-template-columns: 1fr 46px 1.15fr; }
.pf3.show-watch.show-map{ grid-template-columns: 1fr 300px 1.15fr; }
.pf3 .pane-body{ padding: 13px 15px; overflow-y: auto; height: 100%; }
.pf3 section:not(.openpane) .pane-body{ display: none; }
.pf3tabs{ display: none; }

/* scorecards */
.pfsc{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.pfsc .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  transition: transform .15s, box-shadow .15s;
}
.pfsc .card:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.pfsc .v{ font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.pfscbar{
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  margin-top: 8px;
  overflow: visible;
}
.pfscbar i{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
.pfscbar u{
  position: absolute;
  top: -3px;
  width: 2px;
  height: 10px;
  background: var(--ink);
  text-decoration: none;
}

/* updates cards */
.pfupd{
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.pfupdcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  cursor: pointer;
}
.pfupdcard.neg{ border-left-color: var(--red); }
.pfupdcard:hover{ background: var(--surface-2); }
.pfupdlist.tall{
  max-height: 620px;
  overflow-y: auto;
}
.pfck{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
}
.pfalertline{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.pfalert{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--wash-red);
  color: var(--red);
}
.pfimp{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin: 12px 0;
  font-size: 13px;
}
.impsec{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 10px;
}

/* ==========================================================================
   17 FEED & JOURNAL
   ========================================================================== */

.fdcanvas{
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
}
.fdsec{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 12px;
}
.fdsec .cap{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.fdpost{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  cursor: pointer;
}
.fdpost:last-child{ border-bottom: 0; }
.fdpost:hover{ background: var(--surface-2); }
.fdpost .pstat{
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.fdpost.new{ animation: fdflash 1.6s ease-out; }
@keyframes fdflash{
  0%{ background: var(--accent-soft); }
  100%{ background: transparent; }
}
.fdthread{
  border-left: 2px solid var(--border-2);
  margin-left: 8px;
  padding-left: 16px;
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.fdstory a, .fdchart a{ color: var(--accent); font-weight: 650; }
.fdstory, .fdchart{ font-size: 12.5px; }

.wcbox{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 13px 15px;
  margin: 12px 0;
}
.wcbox .wcfoot{
  text-align: center;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
  padding-top: 9px;
  border-top: 1px solid var(--border);
  margin-top: 9px;
  cursor: pointer;
}
.wcgo{ cursor: pointer; }
.wcgo:hover{ border-color: var(--accent); }
.wcline{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.wcline:last-child{ border-bottom: 0; }
/* what-changed rows inside the hero box: name | event | day-% chip */
.wcbox .wcline{
  display: grid;
  grid-template-columns: minmax(76px, 32%) 1fr auto;
  align-items: center;
  gap: 4px 10px;
  cursor: pointer;
}
.wcbox .wcnm{
  min-width: 0;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wcbox .wcev{ min-width: 0; color: var(--muted); }
.wcchip{
  justify-self: end;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
}
.wcchip.pos{ background: var(--accent-wash); color: var(--accent-ink); }
.wcchip.neg{ background: var(--neg-soft); color: var(--neg); }

/* ==========================================================================
   18 LEARN & ARTICLES
   ========================================================================== */

.articles details{
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
  padding: 0 16px;
}
.articles summary{
  list-style: none;
  cursor: pointer;
  padding: 13px 0;
  font-size: 14.5px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.articles summary::-webkit-details-marker{ display: none; }
.articles summary::after{
  content: "+";
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
}
.articles details[open] summary::after{ content: "\2212"; }
.articles details[open]{ padding-bottom: 12px; }

.guidegrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin: 14px 0;
  counter-reset: guiden;
}
.guidecard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  counter-increment: guiden;
  font-family: var(--display);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.guidecard:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.guidecard::before{
  content: counter(guiden);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 750;
  margin-bottom: 10px;
}
.guidebtns{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.artgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.artcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.artcard:hover{ transform: translateY(-1px); border-color: var(--accent); }
.hubcards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.learn-screens{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  align-items: start;
  margin: 14px 0;
}
.lrn-step{
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.lrn-step .n{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  flex: 0 0 auto;
}
.lrn-step:hover{ border-color: var(--accent); color: var(--ink); }
.lrn-step.on{
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--ink);
}
.lrn-step.on .n{ background: var(--accent); color: #06251a; }
:root[data-theme="light"] .lrn-step.on .n{ color: #fff; }

.coursecta{
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* article shell (Family B pages share these class names) */
.ahead{
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.alogo{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 750;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.anav{ display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.anav .asearch{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
}
.anav .asearch:hover{ border-color: var(--muted); color: var(--ink); }
.anav .alearn{ position: relative; }
.anav .alearn summary{
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  white-space: nowrap;
}
.anav .alearn summary::-webkit-details-marker{ display: none; }
.anav .alearn-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
}
.anav .alearn-menu a{ padding: 3px 4px; border-radius: 6px; }
.anav .alearn-menu a:hover{ background: var(--surface-2); }
.article{
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 20px 60px;
}
.aprose{
  font-size: 17px;
  line-height: 1.72;
}
.aprose h1{ font-size: 32px; }
.aprose h2{ font-size: 23px; margin-top: 30px; }
.aprose h1, .aprose h2{ font-family: var(--display); }
.aprose blockquote{
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.aprose code{ font-size: .82em; }
.acta{
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 26px 0;
}
.afoot{
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 20px 42px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
}
.apage .article, .apage .ahead, .apage .afoot{ max-width: 760px; }
.pagenav{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0;
}
.stkseo{
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.artnav{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.artnav a{
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
}
.artnav a:hover{ color: var(--accent); border-color: var(--accent); }

/* advisory notes */
.eduwarn, .disclaimer{
  background: var(--gold-bg);
  color: var(--gold-ink);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 14px 0;
}
.humanote{
  border-left: 3px solid var(--gold);
  background: var(--surface-2);
  border-radius: 0 10px 10px 0;
  padding: 11px 14px;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0;
}
.srow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.leadrow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  cursor: pointer;
}
.leadrow:hover{ background: var(--surface-2); }

/* ==========================================================================
   19 ADMIN
   ========================================================================== */

.adm-head{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.adm-live{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
  padding: 5px 13px;
}
.adm-live::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: admpulse 1.6s ease-out infinite;
}
.adm-live.quiet::before{ background: var(--faint); animation: none; }
@keyframes admpulse{
  0%{ box-shadow: 0 0 0 0 var(--accent-wash); }
  70%{ box-shadow: 0 0 0 7px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
.adm-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  visibility: hidden;
}
.adm-badge.on{ visibility: visible; background: var(--red); color: #33191a; }
:root[data-theme="light"] .adm-badge.on{ color: #fff; }

/* bar charts */
.achart{
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 8px 0;
}
.achart .bar{
  flex: 1;
  min-width: 3px;
  max-width: 32px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  cursor: pointer;
  transition: filter .12s;
}
.achart .bar:hover{ filter: brightness(1.2); }
.achart .bar.dim{ background: var(--border-2); }
.attip{
  position: absolute;
  z-index: 80;
  background: var(--ch-tip-bg);
  color: var(--ch-tip-ink);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  white-space: nowrap;
}

.trendgrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 14px 0;
}
.admingrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0;
}

/* funnel */
.afunnel{
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.afunnel .fbox{
  flex: 1;
  min-width: 130px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.afunnel .fbox::after{
  content: "\2192";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  z-index: 1;
}
.afunnel .fbox:last-child::after{ display: none; }
.afunnel .fbox b{ display: block; font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ainsight{
  background: var(--surface-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0;
}
.adm-dl{
  background: none; /* audit: emitted as `btn adm-dl` — accent text on accent fill */
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent);
}
.adm-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}
.adm-jump a{
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 11px;
}
.adm-jump a:hover{ color: var(--accent); border-color: var(--accent); }

/* ratio bars */
.mkbar{
  display: flex;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 10px 0;
}
.mkbar > div{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 650;
  color: #fff;
  min-width: 34px;
}
#madetbl .notecell{ max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membertbl{
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* journeys */
.jseg{ display: inline-flex; gap: 4px; margin: 10px 0; }
.jlist{ display: grid; gap: 8px; margin: 12px 0; }
.jsess{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.jhead{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13px;
}
.jhead:hover{ background: var(--surface-2); }
.jhead .chev{ margin-left: auto; transition: transform .18s; color: var(--faint); }
.jsess.open .jhead .chev{ transform: rotate(180deg); }
.jtimeline{
  display: none;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
}
.jsess.open .jtimeline{ display: block; }
.jstep{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  font-size: 12.5px;
}
.jstep .jt{
  width: 42px;
  flex: 0 0 auto;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.jstep.view{ color: var(--ink); font-weight: 600; }
.jstep.view .jicon{ color: var(--accent); }
.jstep.click{ color: var(--muted); }
.jstep.click .jicon{ color: var(--gold); }
.jchip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 11.5px;
  padding: 2px 8px;
  color: var(--muted);
}
.cchip{
  display: inline-flex;
  align-items: center;
  background: var(--pick-bg);
  color: var(--pick-ink);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 650;
  padding: 2px 8px;
}

/* presence dots */
.seen{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: middle;
}
.seen.on{
  background: var(--accent);
  animation: pulseDot 1.7s ease-out infinite;
}
.seen.warm{ background: var(--gold); }
.seen.off{ background: var(--faint); }
/* audit: admin emits text chips as `tag seen` — the 8px presence-dot geometry and
   faint dot fill are wrong for a chip carrying text; restyle as a soft accent chip. */
.tag.seen{
  width: auto;
  height: auto;
  background: var(--accent-soft);
  color: var(--accent-ink);
}
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 var(--accent-wash); }
  70%{ box-shadow: 0 0 0 6px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

/* publishing */
.pcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 10px;
}
.ptag{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: 3px 9px;
}
.ptag.published{ background: var(--wash-green); color: var(--green); }
.ptag.draft{ background: var(--gold-bg); color: var(--gold-ink); }
.ptag.archived{ background: var(--surface-2); color: var(--faint); }
.pbtn{
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
}
.pbtn:hover{ color: var(--ink); border-color: var(--accent); }

/* tweet queue */
.twqcard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.twqcard.done{ opacity: .62; }
.twqcard pre{
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
}
.twqcard img{ max-width: 420px; border-radius: 10px; border: 1px solid var(--border); }
.twtag{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 750;
  border-radius: 999px;
  padding: 3px 9px;
  text-transform: uppercase;
}
.twtag.new{ background: var(--wash-green); color: var(--green); }
.twtag.upd{ background: var(--pick-bg); color: var(--pick-ink); }

/* ==========================================================================
   20 OVERLAYS, TOASTS & TOUR
   ========================================================================== */

.toast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 300;
  background: #1c2431;
  color: #eef3f9;
  border: 1px solid #2b3a4e;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13.5px;
  box-shadow: var(--shadow);
  max-width: min(92vw, 480px);
  text-align: center;
}
:root[data-theme="light"] .toast{
  background: #1d2735;
  border-color: #1d2735;
}

/* product tour */
.tourwrap{
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}
.tourhole{
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(16,20,26,.55);
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
  transition: all .35s ease;
  pointer-events: none;
}
.tourcard{
  position: absolute;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  pointer-events: auto;
  font-size: 13.5px;
}
.tourcard .steps{ font-size: 11.5px; color: var(--faint); margin-bottom: 6px; }
.tourcard .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.tourcard .skip{ color: var(--faint); font-size: 12.5px; }
.tourcard .skip:hover{ color: var(--muted); }
.tourlift{ position: relative; z-index: 420; }

/* welcome modal */
.tourwelc{
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9,14,22,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tourwelc .card{
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
  animation: twin .3s cubic-bezier(.2,1.4,.5,1);
}
@keyframes twin{
  from{ transform: scale(.92); opacity: 0; }
  to{ transform: none; opacity: 1; }
}

/* breadth full-screen overlay */
.bfs{
  position: fixed;
  inset: 0;
  z-index: 240;
  background: var(--bg);
  overflow: auto;
  padding: 18px;
}
#bfs-open{ font-size: 12.5px; }

/* feedback form */
.fbform textarea{ width: 100%; min-height: 130px; resize: vertical; }
.fbform .bad{ border-color: var(--red); box-shadow: 0 0 0 3px rgba(244,100,92,.15); }

/* nudges */
.pnudge{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 15px;
  font-size: 13px;
}
.newhere{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 13px;
}
.fchip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 11px;
}
.fchip.on{ background: var(--accent); border-color: var(--accent); color: #06251a; }
:root[data-theme="light"] .fchip.on{ color: #fff; }

/* validation shake */
#ufmsg.flash, #ufname.flash{
  animation: ufshake .3s;
}
@keyframes ufshake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  75%{ transform: translateX(3px); }
}
#ufmsg{ font-size: 12.5px; color: var(--red); min-height: 16px; }
#ufsave:disabled{ opacity: .5; }

/* ==========================================================================
   21 SPLASH & BOOT
   ========================================================================== */

#splash{ display: none; }
html.splashing #splash{
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#splash .sp-logo{
  width: clamp(88px, 11vmin, 120px);
  height: clamp(88px, 11vmin, 120px);
}
#splash .sp-logo .mk-pop{
  transform-origin: 50% 50%;
  animation: kmIntroMark .6s cubic-bezier(.3,1.4,.5,1) both;
}
#splash .sp-logo .mk-line{
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: kmIntroLine .75s ease-out .3s forwards;
}
#splash .sp-logo .mk-dot{
  opacity: 0;
  transform-origin: 50% 50%;
  animation: kmIntroPop .35s cubic-bezier(.3,1.6,.5,1) 1.02s forwards;
}
#splash .sp-word{
  font-family: var(--display);
  font-size: clamp(23px, 3.4vmin, 30px);
  font-weight: 750;
  letter-spacing: -.02em;
  opacity: 0;
  animation: kmIntroRise .55s ease-out .5s forwards;
}
#splash .sp-word b{ color: var(--accent); }
#splash .sp-tag{
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  animation: kmIntroRise .55s ease-out .8s forwards;
}
@keyframes kmIntroMark{
  from{ transform: scale(.55); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
@keyframes kmIntroLine{
  to{ stroke-dashoffset: 0; }
}
@keyframes kmIntroPop{
  0%{ opacity: 0; transform: scale(0); }
  60%{ opacity: 1; transform: scale(1.35); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes kmIntroRise{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}
/* landing: JS applies translate+scale inline over .55s cubic-bezier(.45,.05,.2,1) */
#splash.landing{
  background: transparent;
  pointer-events: none;
}
#splash.landing .sp-word, #splash.landing .sp-tag{ opacity: 0; animation: none; }
#splash.landing .sp-logo{
  transition: transform .55s cubic-bezier(.45,.05,.2,1);
  will-change: transform;
}

/* boot curtain */
#bootwait{ display: none; }
html.booting:not(.splashing) #bootwait{
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--bg);
  align-items: center;
  justify-content: center;
}
#bootwait img, #bootwait svg{
  width: 46px;
  height: 46px;
  animation: kmBreathe 1.4s ease-in-out infinite alternate;
}
@keyframes kmBreathe{
  from{ opacity: .4; transform: scale(.96); }
  to{ opacity: .95; transform: scale(1); }
}
#bootwait.fading{
  opacity: 0;
  transition: opacity .3s;
}

/* ==========================================================================
   22 SEASONAL SKIN — Independence Day (.iday)
   ========================================================================== */

html.iday #brand .brand-word, html.iday #splash .sp-word{ position: relative; }
html.iday #brand .brand-word::after,
html.iday #splash .sp-word::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 9px;
  border-radius: 3px;
  border: 1px solid var(--iday-edge);
  background: linear-gradient(180deg,
    var(--iday-saffron) 0 43%,
    var(--iday-white) 43% 57%,
    var(--iday-green) 57% 100%);
  clip-path: inset(0 100% 0 0);
  animation: idayDraw .85s ease-out .3s forwards;
}
html.iday #splash .sp-word::after{
  bottom: -18px;
  height: 11px;
  animation: idayDraw .9s ease-out 1.05s forwards;
}
@keyframes idayDraw{
  to{ clip-path: inset(0 0 0 0); }
}
html.iday #brand .brand-word::before,
html.iday #splash .sp-word::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 8.4px;
  height: 8.4px;
  margin-left: -4.2px;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23000080' stroke-width='1.3'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='1.6' fill='%23000080'/><path d='M12 2v20M2 12h20M4.9 4.9l14.2 14.2M19.1 4.9L4.9 19.1M12 2a10 10 0 010 20M6.8 3.4l10.4 17.2M17.2 3.4L6.8 20.6M3.4 6.8l17.2 10.4M20.6 6.8L3.4 17.2M2.5 9.4l19 5.2M21.5 9.4l-19 5.2M9.4 2.5l5.2 19M14.6 2.5l-5.2 19'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: idayTurn 6s linear infinite;
}
html.iday #splash .sp-word::before{
  bottom: -18px;
  width: 10.4px;
  height: 10.4px;
  margin-left: -5.2px;
}
@keyframes idayTurn{
  to{ transform: rotate(360deg); }
}

/* ==========================================================================
   26 DIRECTLY-STYLED IDS — safety aliases for the DOM contract (§5.1/§6.9).
   #drawer/#scrim/#searchmodal normally also carry the matching class; these
   guarantee behaviour either way. Breakouts-bar internals get their homes.
   ========================================================================== */

#scrim{
  position: fixed;
  inset: 0;
  background: rgba(15,20,25,.34);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
}
#scrim.show{ opacity: 1; pointer-events: auto; }

#drawer{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 94vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 61;
  transform: translateX(102%);
  transition: transform .22s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#drawer.show, #drawer.open{ transform: translateX(0); }
#drawer.scrn{ width: min(900px, 96vw); }
@media (max-width: 560px){
  #drawer, #drawer.scrn, .drawer, .drawer.scrn{ width: 100vw; border-left: 0; }
}

#searchmodal{
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(11,18,30,.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 78px 16px 24px;
  display: none;
}
#searchmodal.open{ display: block; }
@media (max-width: 560px){
  #searchmodal{ padding-top: 62px; }
}

/* breakouts toolbar internals */
#brk-bartog{
  /* long day/summary label: shrink and wrap inside the panel head
     instead of pushing the count badge off-screen at narrow widths;
     inline-block (not the .btn flex) so the copy wraps like prose */
  display: inline-block;
  min-width: 0;
  white-space: normal;
  text-align: left;
}
#brk-bartog .eyebrow{ display: inline; margin-left: 6px; }
.panel-head .badge-n{ flex: 0 0 auto; }
#brk-findslot{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#brksort{
  height: 32px;
  padding: 4px 28px 4px 10px;
  border-radius: 8px;
  font-size: 13px;
}
#brkscr{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
#scr-brkcnt{
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* gate-modal inner form ids (core.js builds #gatemodal) */
#lform{ display: flex; flex-direction: column; gap: 8px; }
#lname, #lemail{ width: 100%; height: 42px; font-size: 16px; }
#lsend{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--accent);
  color: #06251a;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 11px 16px;
}
:root[data-theme="light"] #lsend{ color: #fff; }
#lsend:hover{ background: var(--accent-ink); }
#lsend:disabled{ opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   23 RESPONSIVE — px hard-coded (custom props are not valid in @media)
   Tiers: 980 · 900 · 860 · 820 · 780 · 760 · 720 · 700 · 640 · 620 · 560 ·
          520 · 400, plus min-width 621 / 720 / 761 / 900 desktop-only.
   ========================================================================== */

@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .admincards{ grid-template-columns: repeat(2, 1fr); }
  .mreads6{ grid-template-columns: repeat(3, 1fr); }
  .anno{ grid-template-columns: 1fr; }
}

@media (min-width: 900px){
  /* desktop treemap: fixed height instead of portrait ratio */
  .tmap{
    aspect-ratio: auto;
    height: min(560px, calc(100vh - 330px));
  }
}

@media (max-width: 900px){
  /* fullscreen chart readout stacks under the chart */
  .fsbody{ flex-direction: column; }
  .fsread{
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--border);
    max-height: 38vh;
  }
  .fsrail{
    width: auto;
    height: 34px;
    writing-mode: horizontal-tb;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  /* signed-out simplification */
  body.nologin .screenbar,
  body.nologin .scr-pickrow,
  body.nologin .indpick,
  body.nologin .hchbar,
  body.nologin .findw,
  body.nologin .measurebtns{ display: none !important; }
  body.nologin .brkbar{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* signed-in: collapse the breakouts bar behind a "more" toggle */
  body:not(.nologin) .brkbar > *:nth-child(n+4){ display: none; }
  body:not(.nologin) .brkbar.baropen > *{ display: inline-flex; }
  body:not(.nologin) .brkmore{ display: inline-flex; }

  .dstats{ grid-template-columns: repeat(2, 1fr); }
  .pfmaprow{ grid-template-columns: 1fr; }
}
@media (min-width: 901px){
  .brkmore{ display: none; }
}

@media (max-width: 860px){
  .sectwo{ grid-template-columns: 1fr; }
  .learn-screens{ grid-template-columns: 1fr; }
  .trstats{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px){
  /* home band stacks */
  .hmtop{ grid-template-columns: 1fr; gap: 30px; }
  .hmtop h1{ font-size: 29px; }
  .hmfacts{ display: none; }
  .herorow{ grid-template-columns: 1fr; }

  /* admin collapse */
  .admingrid{ grid-template-columns: 1fr; }
  .trendgrid{ grid-template-columns: 1fr; }
  .membertbl{ max-height: 440px; }
}
/* tall-phone companion: restore the home facts band when there is room */
@media (max-width: 820px) and (min-height: 640px){
  .hmfacts{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 780px){
  h1{ font-size: 25px; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .mreads3{ grid-template-columns: 1fr; }
  .aprose{ font-size: 16.5px; }
}

@media (max-width: 760px){
  .healthrow{
    grid-template-columns: 1fr;
    grid-template-areas: "gauge" "breadth";
  }
  .healthrow .hbreadth{ display: none; }
  .healthrow.show-breadth .hbreadth{ display: block; }
  .hvtog{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
  }
  .hero, .pghero{ padding: 18px; }
  .pfsum{ grid-template-columns: 1fr; }
  .pftitle{ font-size: 22px; }

  /* pf3: rails vanish, tabs drive panes */
  .pf3,
  .pf3.show-watch,
  .pf3.show-map,
  .pf3.show-watch.show-map{ grid-template-columns: 1fr; }
  .pf3rail{ display: none; }
  .pf3 > section{ display: none; }
  .pf3tabs{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .pf3tabs button{
    padding: 10px 4px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }
  .pf3tabs button.on{ color: var(--accent); border-bottom-color: var(--accent); }
  .pf3.show-changed .pane-changed{ display: block; }
  .pf3.show-watch .pane-watch{ display: block; }
  .pf3.show-map .pane-map{ display: block; }
  .pf3.show-today .pane-today{ display: block; }
  .pf3 > section .pane-body{ display: block; }
}
@media (min-width: 761px){
  .pf3 .pane-today{ display: none; }
}

@media (max-width: 720px){
  .nwgrid{ grid-template-columns: 1fr; }
  .nwgrid nav{ display: none; }
  .hchanged{ display: none; }
  .hchbar{ display: flex; }
  .coursecta{ flex-direction: column; align-items: flex-start; }
}
@media (min-width: 721px){
  .hcsheet{ display: none; }
}

@media (max-width: 700px){
  .findi{ width: 108px; }
  .findi:focus{ width: 132px; }
  .findw .fcount{ display: none; }
  .scrow2{ grid-template-columns: 120px 1fr 72px; }
}

@media (max-width: 640px){
  .dlbtn .lbl{ display: none; }
  .hubcards{ grid-template-columns: 1fr; }
  .pftitle{ font-size: 22px; }
  .afunnel{ flex-direction: column; }
  .afunnel .fbox::after{
    content: "\2193";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -14px;
    transform: translateX(-50%);
  }
}

@media (max-width: 620px){
  .setups{ grid-template-columns: 1fr; }
  .dh{ flex-wrap: wrap; }
  .dh .dx{ position: absolute; top: 10px; right: 12px; margin: 0; }
  .fsbody{ flex-direction: column; }
  .bfs-trigger, #bfs-open{ display: none; }
  .pfhead{ flex-direction: row; flex-wrap: wrap; }
  .pfhead .pftitle{ order: 1; width: 100%; }
  .pfhead::after{ content: ""; width: 100%; order: 2; }
  .hfoot{ flex-direction: column-reverse; align-items: flex-start; }
  .hfoot .long{ display: none; }
  .hfoot .short{ display: block; }
  /* glyph-only compact controls */
  .segtog button{
    font-size: 0;
    padding: 6px 10px;
  }
  .segtog button::first-letter{ font-size: 12.5px; }
}

@media (max-width: 560px){
  body{ font-size: 14.5px; }
  h1{ font-size: 23px; }
  .wrap{ padding-left: 14px; padding-right: 14px; }
  main.wrap{ padding-top: 13px; padding-bottom: 90px; }

  /* header compaction */
  header.nav .wrap{ height: 54px; gap: 10px; }
  header.nav{
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg);
  }
  #brand .brand-tag{ display: none; }
  #hsearch-d{ display: none; }
  #acct .aname{ display: none; }

  /* tabs become a fixed bottom bar */
  .tabs, #tabs{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    margin: 0;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-top: 1px solid var(--border);
    padding: 7px 8px calc(11px + env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: 0;
    overflow: visible;
  }
  .tab, .searchtab{
    flex-direction: column;
    gap: 3px;
    padding: 4px 8px;
    font-size: 10.5px;
    border-radius: 10px;
  }
  .tab .ticon{ font-size: 23px; }
  .tab.active{ background: none; color: var(--accent); }
  .navdiv{ display: none; }
  .sp-extra{ display: none; }
  .navdot{ top: 0; right: 2px; }

  /* search tab becomes a raised FAB */
  #hsearch{
    margin-top: -8px;
  }
  #hsearch .ticon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: #06251a;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(23,184,119,.45);
  }
  :root[data-theme="light"] #hsearch .ticon{ color: #fff; }

  /* tables → stacked cards */
  .tablewrap table, .tablewrap thead, .tablewrap tbody,
  .tablewrap tr, .tablewrap th, .tablewrap td{ display: block; }
  .tablewrap thead{ display: none; }
  .tablewrap tr{
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 9px;
    padding: 6px 12px;
  }
  .tablewrap td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0;
    padding: 4px 0;
    text-align: right;
  }
  .tablewrap td[data-l]::before{
    content: attr(data-l);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    text-align: left;
  }
  .tablewrap td:first-child{
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 3px;
    text-align: left;
    justify-content: flex-start;
  }
  .tablewrap td .chev, .tablewrap .rowchev{ display: none; }
  .indp{ min-width: 0; }

  /* overlays & drawer */
  .drawer{ width: 100vw; border-left: 0; }
  .drawer.scrn{ width: 100vw; }
  .searchmodal{ padding-top: 62px; }
  .toast{ bottom: 80px; }
  .dtabs{
    grid-auto-columns: max-content;
    overflow-x: auto;
    justify-content: start;
  }
  .dtab{ padding: 10px 12px; }
  .matip{ display: none; }
  .axis, svg.chart text{ font-size: 14px; }

  /* misc component compaction */
  .bignum .from{ display: none; }
  .bignum .to{ font-size: 31px; }
  .flow{ overflow-x: auto; padding-bottom: 4px; }
  .fstage{ min-width: 104px; }
  .lifeflow{ flex-direction: column; gap: 14px; }
  .lifeflow .step{ text-align: left; display: flex; align-items: center; gap: 12px; }
  .lifeflow .step::before{ margin: 0; }
  .lifeflow .step::after{ display: none; }
  .legrow{ top: 54px; }
  .sectorgrid{ grid-template-columns: 1fr; }
  .sectorgrid.collapsed .seccard:nth-child(n+6){ display: none; }
  .hmslides{ min-height: 250px; }
  .hmcard .hchart{ min-height: 150px; }
  .tmap{ aspect-ratio: 1000 / 1560; }
  .hcard .big{ font-size: 40px; }
  .btp-wrap .btpnum{ font-size: 44px; }
  .form input, .qinput, .findi, .pftitle{ font-size: 16px; }
  /* 16px input text needs more room or the placeholder clips mid-word */
  .findi{ width: 156px; }
  .findi:focus{ width: 180px; }
  .hmtry .hmtryb:nth-child(n+4){ display: none; }
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .dstats{ grid-template-columns: repeat(2, 1fr); }
  .scrow2{ grid-template-columns: 1fr; gap: 4px; }
  .scrow2 .val{ text-align: left; }
  .artnav{ flex-direction: row; }
  .artnav a{ flex: 1; text-align: center; }
  .hmsub .hm-long{ display: none; }
  .hmsub .hm-short{ display: inline; }
}

@media (max-width: 520px){
  .sectorgrid{ grid-template-columns: 1fr; }
  .pfcats{ grid-template-columns: 1fr; }
  .pfrowmain{ grid-template-columns: 1fr 64px 90px 12px; }
  .pfrowmain .pfcol-extra{ display: none; }
  .guidegrid, .artgrid{ grid-template-columns: 1fr; }
}

@media (max-width: 400px){
  .tab{ padding: 4px 5px; }
  .cards, .dstats{ grid-template-columns: 1fr 1fr; }
  .hmtop h1{ font-size: 25px; }
  .mvgrid{ grid-template-columns: 1fr; }
}

/* desktop-only layouts */
@media (min-width: 621px){
  .hcsheet{ display: none; }
}
@media (min-width: 760px){
  .setup .crumb{
    display: inline;
    color: var(--faint);
    font-size: 11.5px;
  }
}

/* ==========================================================================
   24 REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  /* stop pulses & pings */
  .navdot::after,
  .adm-live::before,
  .seen.on,
  .pgapply.stale{ animation: none; }

  /* marching ants freeze */
  .bkants{ animation: none; }

  /* splash & boot become static */
  #splash .sp-logo .mk-pop,
  #splash .sp-logo .mk-dot,
  #splash .sp-word,
  #splash .sp-tag{ animation: none; opacity: 1; transform: none; }
  #splash .sp-logo .mk-line{ animation: none; stroke-dashoffset: 0; }
  #splash.landing .sp-logo{ transition: none; }
  #bootwait img, #bootwait svg{ animation: none; opacity: .9; }
  .bootload .track::after{ animation: none; opacity: .5; left: 30%; }

  /* slides, sheets, tour, entries */
  .hmcard{ transition: none; }
  .hcsheet{ animation: none; }
  .tourhole{ transition: none; }
  .tourwelc .card{ animation: none; }
  .hstandout{ animation: none; }
  .xrcard.on{ animation: none; opacity: 1; transform: none; }
  .fdpost.new{ animation: none; }
  .csk{ animation: none; }
  #ufmsg.flash, #ufname.flash{ animation: none; }
  .view.active{ animation: none; }
  html.iday #brand .brand-word::after,
  html.iday #splash .sp-word::after{ animation: none; clip-path: inset(0 0 0 0); }
  html.iday #brand .brand-word::before,
  html.iday #splash .sp-word::before{ animation: none; }

  /* keep affordance but slow the working spinners */
  .pgspin, .bt-spin{ animation-duration: 1.6s; }

  .drawer, .scrim, .thmsw, .thmsw::after,
  .tab, .btn, .setup, .guidecard, .pfsc .card{ transition: none; }
}

/* ==========================================================================
   25 PRINT
   ========================================================================== */

@media print{
  :root{
    --bg: #ffffff;
    --bg2: #ffffff;
    --surface: #ffffff;
    --surface-2: #f4f6f8;
    --surface2: #f4f6f8;
    --panel: #f4f6f8;
    --border: #cfd6dd;
    --line: #cfd6dd;
    --border-2: #b9c2cc;
    --ink: #10181f;
    --muted: #4d5c6b;
    --faint: #7d8b99;
    --shadow: none;
  }
  body{ background: #fff; color: #10181f; }
  header.nav, .tabs, #tabs, footer .foot-links,
  .scrim, .drawer, .searchmodal, .gatemodal, #gatemodal,
  .toast, .tourwrap, .tourwelc, .bfs, .hcsheet, .hcsheet-wrap,
  #splash, #bootwait, .btn, .showmore, .lockmore,
  .tmz, .hvtog, .legrow, .adm-live{ display: none !important; }
  .view{ display: block !important; }
  .view:not(.active){ display: none !important; }
  main.wrap{ padding: 0; }
  .panel, .setup, .cards .card, .stile, .hcard,
  .guidecard, .artcard, .pcard, .twqcard{
    box-shadow: none;
    border: 1px solid #cfd6dd;
    break-inside: avoid;
  }
  .tablewrap{ overflow: visible; }
  a{ color: #10181f; text-decoration: underline; }
  .gate > .gated-content, .stblur, .namelock, .taglock,
  .hnewlead.locked{ filter: none; }
}

/* ==========================================================================
   27 INTEGRATION PATCH — shared hooks emitted by views (integrator)
   ========================================================================== */

/* tertiary text utility (used by index.html legal pages + several views) */
.faint{ color: var(--faint); }

/* tooltip anchors: views emit <span class="mtip"> inside .qmk / info markers */
.qmk{ position: relative; cursor: help; }
.mtip{
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  max-width: 236px;
  min-width: 170px;
  background: #1c2431;
  color: #dfe6ef;
  border: 1px solid #2b3a4e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  border-radius: 9px;
  padding: 9px 11px;
  z-index: 90;
  box-shadow: var(--shadow);
  text-align: left;
  pointer-events: none;
}
.qmk:hover .mtip, .qmk:focus .mtip, .qmk:focus-within .mtip, .qmk.open .mtip,
.scinfo:hover .mtip, .scinfo:focus .mtip, .scinfo.open .mtip,
.qinfo:hover .mtip, .qinfo:focus .mtip, .qinfo.open .mtip,
.minfo:hover .mtip, .minfo:focus .mtip, .minfo.open .mtip,
.sqi:hover .mtip, .sqi:focus .mtip, .sqi.open .mtip{
  display: block;
}
.mtip b{ color: var(--gold-ink); }
.qmk.flip .mtip{ left: auto; right: 0; transform: none; }

/* compact select control used by leaders/market/breakouts filter rows */
.ldsel{
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 22px 4px 8px;
  font-size: 12.5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ldsel:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* misc small hooks */
.nmlocked{ cursor: pointer; }
.lockwrap{ margin-top: 10px; }
.spark svg, .stk-chart svg{ display: block; max-width: 100%; }


/* ===== 28. orphan-class sweep ===== */
/* ==========================================================================
   28 ORPHAN-CLASS SWEEP — rulesets for classes emitted by JS but previously
   unstyled. Merged from five area passes (backtest/method/editor, core/
   admin/portfolio/charts, drawer, live/home, market/brk). Tokens only.

   INTENTIONALLY BARE (JS hooks / SVG nodes styled inline or via parents; no
   rules on purpose): btmain anatomy scdmin scdmax · ccx ccx-v ccx-h ccx-pt
   ccx-dt ln-cross ln-cv ln-cd ln-m1 ln-m2 mslab dial hbar hbar2 abarr htip
   cc-wrap qmap-wrap qmap-svg qhid qcorner-t hs-ic btntbl twdone · rep
   rep-bare rep-sym (scope flags).
   ========================================================================== */

/* ==========================================================================
   28.1 BACKTEST LAB · METHOD · SCREEN EDITOR
   ========================================================================== */

/* ==========================================================================
   1 · BACKTEST LAB — real fixes (classes the runtime styleBlock does NOT set)
   ========================================================================== */

/* hero from → to big number: alias of .bignum .from/.to/.mult (style.css §04) */
.bignum .bn-from{
  font-size: 20px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bignum .bn-to{
  font-size: 40px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum .bn-mult{
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  font-style: normal;
}
.bignum .bn-mult.neg{
  background: var(--neg-soft);
  color: var(--neg);
}
@media (max-width: 560px){
  .bignum .bn-from{ display: none; }
  .bignum .bn-to{ font-size: 31px; }
}

/* promo-modal fine print + inline "show all years" log link */
.gatebox .gfine{
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 12px;
}
#view-backtest .yr-all{
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* promo-modal buttons (base look comes from inline styles; give them rhythm) */
.gatebox .btp-go{ margin-top: 4px; }
.gatebox .btp-not{ font-size: 12.5px; color: var(--muted); padding: 6px 8px; }
.gatebox .btp-not:hover{ color: var(--ink); }
.gatebox .btp-x:hover{ color: var(--ink); }

/* ==========================================================================
   2 · BACKTEST LAB — static replicas of the view's runtime scoped styleBlock
   (identical values; keeps the surface styled even without the JS block)
   ========================================================================== */

#view-backtest .btgrid{ display: grid; grid-template-columns: minmax(380px, 460px) 1fr; gap: 22px; align-items: start; margin-top: 18px; }
@media (max-width: 1040px){ #view-backtest .btgrid{ grid-template-columns: 1fr; } }
#view-backtest .btsub{ color: var(--muted); max-width: 640px; }
#view-backtest .btrow{ margin: 14px 0; }
#view-backtest .btrow > label{ display: flex; align-items: center; gap: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
#view-backtest .btseg{ display: flex; flex-wrap: wrap; gap: 6px; }
#view-backtest .btseg button{ border: 1px solid var(--border-2); background: transparent; color: var(--muted); border-radius: 9px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13.5px; }
#view-backtest .btseg button.on{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
#view-backtest .btspinrow{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 70px 0; color: var(--muted); }
#view-backtest .btkpis{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 640px){ #view-backtest .btkpis{ grid-template-columns: 1fr 1fr; } }
#view-backtest .btkpi{ border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
#view-backtest .btkpi b{ display: block; font-size: 20px; }
#view-backtest .btkpi span{ font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
#view-backtest .btstats{ display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
#view-backtest .btstats > div b{ font-size: 16px; }
#view-backtest .btstats > div > span{ display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
#view-backtest .btsummary{ color: var(--muted); font-size: 13.5px; }
#view-backtest .ybwrap{ position: relative; display: flex; gap: 6px; align-items: stretch; height: 180px; margin: 16px 0 6px; }
#view-backtest .ybar{ position: relative; flex: 1; border: none; background: transparent; cursor: pointer; padding: 0; font: inherit; border-radius: 6px; }
#view-backtest .ybar:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
#view-backtest .ybar[aria-pressed="true"]{ outline: 2px solid var(--accent); outline-offset: 2px; }
#view-backtest .ybar i{ position: absolute; left: 14%; right: 14%; border-radius: 3px; }
#view-backtest .ybar .ylab{ position: absolute; left: 0; right: 0; font-size: 11px; color: var(--muted); }
#view-backtest .ybar .yyr{ position: absolute; left: 0; right: 0; bottom: -20px; font-size: 11.5px; color: var(--muted); }
#view-backtest .ybzero{ position: absolute; left: 0; right: 0; height: 1px; background: var(--border-2); }
#view-backtest .btyears{ padding-bottom: 26px; }
#view-backtest .btlogwrap .tablewrap{ max-height: 520px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
#view-backtest .btlock{ border: 1px dashed var(--border-2); border-radius: 12px; padding: 26px; text-align: center; }
#view-backtest .btcards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 760px){ #view-backtest .btcards{ grid-template-columns: 1fr; } }
#view-backtest .btspecbar{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-wash); }
#view-backtest .btspecchip{ font-weight: 650; color: var(--accent-ink); }
#view-backtest .btspecbar .faint,
#view-backtest .btspecnote{ font-size: 12.5px; color: var(--muted); }
#view-backtest .btspecx{ margin-left: auto; border: 1px solid var(--border-2); background: transparent; color: var(--muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12.5px; white-space: nowrap; }
#view-backtest .btcmp{ margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
#view-backtest .btcmp h3{ margin: 0 0 8px; font-size: 14px; }
#view-backtest .btcmpgrid{ display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(5, minmax(72px, 1fr)); gap: 5px 12px; font-size: 13px; min-width: 560px; }
#view-backtest .btcmpgrid .bch{ font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
#view-backtest .btcmpverdict{ margin: 8px 0 0; font-size: 13px; color: var(--muted); }
#view-backtest .bteq{ margin-top: 18px; }
#view-backtest .bteq svg{ width: 100%; height: auto; display: block; }
#view-backtest .btheat{ overflow-x: auto; margin-top: 10px; }
/* mobile tab panes (visibility driven by [data-btt] on the section) */
@media (max-width: 900px){
  #view-backtest[data-btt="set"] .btpane-res,
  #view-backtest[data-btt="set"] .btpane-log{ display: none; }
  #view-backtest[data-btt="res"] .btpane-set,
  #view-backtest[data-btt="res"] .btpane-log{ display: none; }
  #view-backtest[data-btt="log"] .btpane-set,
  #view-backtest[data-btt="log"] .btpane-res{ display: none; }
}

/* ==========================================================================
   3 · METHOD WALKTHROUGH — static replicas of view-method's runtime styleBlock
   ========================================================================== */

#view-method .lrnpills{ display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; }
#view-method .anno-item{ display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--border); background: transparent; color: inherit; border-radius: 10px; padding: 9px 11px; margin: 0 0 7px; font: inherit; font-size: 13.5px; cursor: pointer; }
#view-method .anno-item.active{ border-color: var(--accent); background: var(--accent-wash); }
#view-method .anno-item b{ flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
#view-method .lrnsteps{ margin-top: 18px; }
#view-method #funnel .fbarw{ position: relative; min-height: 30px; }
/* audit: the funnel count rode on the bar as bare #fff — over a narrow bar the
   label spills onto the page and turns white-on-white in light theme. Give it a
   translucent scrim pill so it reads on bar and paper alike, both themes. */
#view-method #funnel .fval{ position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 13px; color: #fff; background: rgba(10,16,23,.55); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
:root[data-theme="light"] #view-method #funnel .fval{ color: var(--ink); background: rgba(255,255,255,.78); }
#view-method #funnel .fnote{ grid-column: 2; font-size: 12px; color: var(--muted); }
@media (max-width: 640px){ #view-method #funnel .fnote{ grid-column: 1; } }
#view-method .lnarrow{ margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
#view-method .lnarrow ol{ margin: 8px 0 12px; padding-left: 20px; }
#view-method .lnarrow li{ margin: 5px 0; font-size: 13.5px; }
#view-method .mthsub{ color: var(--muted); max-width: 660px; }

/* ==========================================================================
   4 · SCREEN EDITOR DRAWER (screens-editor.js) — genuinely unstyled surface
   ========================================================================== */

/* ---- drawer head/foot rhythm ---- */
.drawer .drawer-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0 2px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.drawer .drawer-foot .faint{ font-size: 12.5px; color: var(--muted); margin-left: auto; }

/* the screen builder's foot sits between the bands and the preview tabs */
.drawer .scrfoot{ margin-bottom: 14px; }

/* ---- builder header block: picker · new-screen · match count ---- */
.drawer .scrhead{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 14px;
}
.drawer .scrhead .faint{
  flex-basis: 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.drawer .scrhead #scr-sub{ font-weight: 650; color: var(--ink); }

/* ---- category bands ---- */
.drawer .panel.scband{ padding: 12px 14px; margin-bottom: 10px; }
.drawer .scband .panel-head{ margin-bottom: 0; }
/* quiet, full-width toggle header (overrides the loud green .btn look) */
.drawer .scband .scbandtog{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  padding: 4px 2px;
  text-align: left;
}
.drawer .scband .scbandtog:hover{ background: var(--surface-2); color: var(--ink); }
.drawer .scband .scbandtog b{ font-weight: 650; }
.drawer .scband .scbandtog .eyebrow{ margin-left: auto; color: var(--faint); font-size: 11px; }
.drawer .scbandbody{ padding-top: 8px; }
.drawer .scbandbody[hidden]{ display: none; }

/* ---- slider rows: label · dual-range · value ---- */
/* the JS wraps the two ranges in <span class="scsl scdual"> — .scsl's single-
   input look (24px grey pill) must not paint on the wrapper; draw a 4px track
   and let .scfill show the selected band */
.drawer .scsl.scdual{ background: none; }
.drawer .scsl.scdual::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: var(--border-2);
}
.drawer .scfill{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  z-index: 1;
}
.drawer .scsl.scdual input[type="range"]{ z-index: 2; }

/* row label (holds the info tip / gear / remove buttons) */
.drawer .sclab{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
}
.drawer .scrow2.on .sclab{ color: var(--ink); font-weight: 650; }

/* click-to-type value button (alias of .scrow2 .val) */
.drawer .scv{
  text-align: right;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 13px;
  color: var(--ink);
}
.drawer .scv:hover{ background: var(--surface-2); }
.drawer .scrow2.on .scv{ color: var(--accent); font-weight: 700; }

/* exact-value inputs inside the .scvpop popover */
.drawer .sce{ width: 90px; height: 32px; font-size: 13px; }

/* ---- preview tiles: RS + stage chips and readable tile layout ---- */
#scr-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 760px){ #scr-tiles{ grid-template-columns: 1fr; } }
#scr-tiles .stile{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
}
#scr-tiles .stile .sym{ font-weight: 700; flex: 0 0 auto; }
#scr-tiles .stile > span:not(.scrs):not(.scstg):not(.num){
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12.5px;
}
#scr-tiles .stile > .num:last-child{ flex: 0 0 auto; font-weight: 650; }
.scrs{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.scstg{
  flex: 0 0 auto;
  font-size: 11px;
  white-space: nowrap;
}

/* ==========================================================================
   5 · ADD-FILTERS DRAWER — catalog + saved-filter columns
   ========================================================================== */

/* the drawer body carries .findw (inline-flex find widget) which collapses
   the two-column layout — restore block flow inside the drawer only */
.drawer .dbody.findw{ display: block; }

.drawer .ufcols{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px){ .drawer .ufcols{ grid-template-columns: 1fr; } }
.drawer .ufcol{ min-width: 0; }
.drawer .ufcol .eyebrow{ margin-bottom: 8px; }
.drawer .ufcol .findi{ width: 100%; margin-bottom: 10px; }
.drawer .ufcol .findi:focus{ width: 100%; }

/* one measure family per band */
.drawer .metband{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.drawer .metband > .eyebrow{ display: block; margin-bottom: 6px; }

/* catalog rows: label | chip-ladder (or Add button) */
.drawer .ufrow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.drawer .metband .ufrow:first-of-type{ border-top: 0; }
.drawer .ufrow .sclab{ flex: 0 0 auto; max-width: 46%; }
.drawer .ufchips{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
  justify-content: flex-end;
}
.drawer .ufrow > .btn{ margin-left: auto; padding: 5px 12px; font-size: 12.5px; }

/* saved-filter cards */
.drawer .ufmine{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.drawer .ufmine > b{ font-size: 13.5px; font-weight: 650; }
.drawer .ufmine > .faint{
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.drawer .ufacts{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.drawer .ufacts .btn{ padding: 5px 10px; font-size: 12px; }

/* ==========================================================================
   6 · FILTER CREATOR — operand pickers, blend terms, save foot
   ========================================================================== */

.drawer .ufpick{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.drawer .ufscope{ border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); }

/* a blend term: weight × measure × remove */
.drawer .ufterm{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 0;
}
.drawer .ufterm .btn{ padding: 5px 10px; font-size: 12.5px; }
.drawer .ufw{
  width: 70px;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* live preview list: name left, value right */
#ufpreview{ margin: 10px 0 4px; }
#ufpreview .frow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  border-top: 1px solid var(--border);
}
#ufpreview .frow:first-of-type{ border-top: 0; }
#ufpreview .frow > span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
#ufpreview .frow > .num{ font-weight: 650; font-variant-numeric: tabular-nums; }

/* creator name field: label above input, both breathing */
.drawer .dbody > label.sclab{
  display: block;
  margin: 14px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ==========================================================================
   28.2 CORE · ADMIN · PORTFOLIO · CHARTS
   ========================================================================== */

/* ==========================================================================
   1. CORE — account chip + dropdown (§2.17)
   ========================================================================== */
#acctbtn{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.acctav{
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.acctav .acctdot{ top: -2px; right: -2px; }
.acctch{
  color: var(--faint);
  font-size: 10px;
  flex: 0 0 auto;
}
.acctid{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 5px;
  min-width: 0;
}
.acctid b{
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
}
.acctid span{
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .acctrow itself inherits row layout from the existing
   ".acctdrop a, .acctdrop button" rule — only the badge needs anchoring */
.acctrow{ position: relative; }
.acctrow .newsn{ margin-left: auto; }
.acctout{
  margin: 5px 0 0;
  padding-top: 5px;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   2. CORE — global search overlay (gsbar icon + result hits)
   ========================================================================== */
.gs-ic{
  color: var(--accent);
  font-size: 17px;
  flex: 0 0 auto;
}
.gsbar #gsx{
  color: var(--faint);
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.gsbar #gsx:hover{ color: var(--ink); background: var(--surface-2); }
.qhit{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
}
.qhit:hover, .qhit.sel{ background: var(--surface-2); }
.qhit b{
  font-weight: 650;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qcode{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--border-2);
  border-radius: 5px;
  padding: 1px 6px;
  flex: 0 0 auto;
}
.qsym{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex: 0 0 auto;
}

/* ==========================================================================
   3. CORE — gate popup / profile modal fine print
   ========================================================================== */
.gicon{
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.gfine{
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
  margin: 2px 0 0;
}

/* ==========================================================================
   4. CORE — drawer close button (news / feedback / install headers)
   ========================================================================== */
.dclose{
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--faint);
  padding: 3px 8px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.dclose:hover{ color: var(--ink); background: var(--surface-2); }

/* ==========================================================================
   5. CORE — Updates / guides reader (nw*)
   ========================================================================== */
.drawer.nwmode .nwgrid{ flex: 1; min-height: 0; }
.nwnav{
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 10px;
  min-width: 0;
}
.nwnavrow{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  border-radius: 8px;
  margin-bottom: 2px;
}
.nwnavrow.on{ background: var(--accent-wash); }
.nwtitle{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 8px 4px 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
}
.nwtitle b{
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
}
.nwtitle span{ font-size: 11px; color: var(--faint); }
.nwnavrow:not(.on) .nwtitle:hover b{ color: var(--accent-ink); }
.nwnavrow.on .nwtitle b{ color: var(--accent-ink); }
.nwfold{
  color: var(--faint);
  font-size: 12px;
  padding: 9px 9px 7px;
  border-radius: 6px;
  align-self: start;
}
.nwfold:hover{ color: var(--ink); background: var(--surface-2); }
.nwsubs{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 0 8px 8px 16px;
}
/* de-emphasise the section jump links (they carry .btn) */
.nwsubs .btn.nwsub,
:root[data-theme="light"] .nwsubs .btn.nwsub,
:root[data-theme="dark"] .nwsubs .btn.nwsub,
.nwsubs .nwsub{
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  justify-content: flex-start;
  text-align: left;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: normal;
}
.nwsubs .btn.nwsub:hover,
:root[data-theme="light"] .nwsubs .btn.nwsub:hover,
:root[data-theme="dark"] .nwsubs .btn.nwsub:hover{ background: var(--surface-2); color: var(--accent-ink); }
.nwtour{
  align-self: flex-start;
  margin: 10px 16px 0;
  flex: 0 0 auto;
}
.nwentry{
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.nwentry:last-child{ border-bottom: 0; margin-bottom: 0; }
.nwentry h3{ font-size: 18px; margin: 0 0 6px; }
.nwdate{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  margin: 0 0 10px;
}
.nwsec{ margin: 14px 0 0; }
.nwsec h4{ font-size: 14px; margin: 0 0 6px; }
.nwlinks{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.nwlinks .btn{ font-size: 12.5px; padding: 7px 13px; }

/* ==========================================================================
   6. CORE — feedback drawer kind picker
   ========================================================================== */
.fbkinds{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.fbkinds + textarea{
  width: 100%;
  min-height: 130px;
  resize: vertical;
}
.fbkinds ~ .loginmsg{ margin: 8px 0 0; }
.fbkinds ~ .btn{ margin-top: 12px; }

/* ==========================================================================
   7. ADMIN — tabs, trend charts, bar lists, tweet queue
   ========================================================================== */
.adm-tabs{ margin: 4px 0 14px; }
/* fix: light theme paints seg2 active label #fff on a white pill
   (":root[data-theme=light] .segs button.on" outranks ".seg2 button.on").
   Hits the admin tabs and the watchlist view switcher. */
:root[data-theme="light"] .seg2 button.on{ color: var(--ink); }
:root:not([data-theme="dark"]):not([data-theme="light"]) .seg2 button.on{ color: var(--ink); }

/* .atc rides on .achart, whose flex/120px box is meant for div-bar charts;
   the trend SVG sizes itself */
.atc.achart{
  display: block;
  height: auto;
  padding: 0;
}

/* label | bar | count rows (barList) */
.achartwrap{
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.abar{
  display: grid;
  grid-template-columns: minmax(110px, 200px) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  transition: opacity .12s;
}
.abar > span{
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abar > i{
  display: block;
  height: 9px;
  min-width: 2px;
  border-radius: 4px;
  background: var(--accent);
  opacity: .85;
}
.abar > b{
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
  text-align: right;
}

.twcap{
  font-size: 13.5px;
  line-height: 1.55;
  margin: 10px 0;
  white-space: pre-wrap;
}
.twcopy, .twth{
  padding: 7px 12px;
  font-size: 12.5px;
}

/* ==========================================================================
   8. PORTFOLIO — header (title, add-stock popover, import row)
   ========================================================================== */
.pftitlewrap{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.pftitlewrap .num{ font-size: 12.5px; color: var(--muted); }
.pfaddwrap{
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}
/* the add bar is a click-to-open popover, not an always-on block */
.pfaddwrap .pfadd{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: min(320px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}
.pfaddwrap .pfadd.open{ display: block; }
.pfdrop:empty{ display: none; }
.pfimprow{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.pfimprow .btn,
:root[data-theme="light"] .pfimprow .btn,
:root[data-theme="dark"] .pfimprow .btn{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
}
.pfimprow .btn:hover,
:root[data-theme="light"] .pfimprow .btn:hover,
:root[data-theme="dark"] .pfimprow .btn:hover{ background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   9. PORTFOLIO — scorecard tiles
   (corrective: .pfsum/.pfsc legacy rules assume a different markup — the
    tiles ARE .pfsc now; used only by view-portfolio.js, safe to retune)
   ========================================================================== */
.pfsum{
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.pfsum .pfsc{
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.pfsum .pfsc:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.pfsum .pfsc .bignum{
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pfsum .pfsc > .num{ font-size: 12px; color: var(--muted); }
.pfsum .pfsc > .num.pos{ color: var(--green); }
.pfsum .pfsc > .num.neg{ color: var(--red); }
/* Paper tab: provisional "Today so far" line under the stat tiles */
#view-portfolio .pptoday{ margin: 6px 2px 14px; font-size: 12.5px; }
#view-portfolio .pptoday .pos{ color: var(--green); }
#view-portfolio .pptoday .neg{ color: var(--red); }
.pfsum .pfsc .num .btn{
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  padding: 0 2px;
  border-radius: 4px;
}
.pfsum .pfsc .num .btn:hover{ background: none; color: var(--accent-ink); text-decoration: underline; }

/* ==========================================================================
   10. PORTFOLIO — tabbed panes (pf-watch / pf-today / pf-map / feed)
   JS emits one selected pane via .pf3.show-*; the old 3-rail grid put whole
   panels inside vertical-writing rails. Tabs drive panes at every width.
   ========================================================================== */
@media (min-width: 761px){
  .pf3tabs{ display: inline-flex; margin: 14px 0 4px; }
  /* the always-visible scorecard above the tabs already IS "Today" */
  .pf3tabs [data-exp="today"]{ display: none; }
}
.pf3,
.pf3.show-watch,
.pf3.show-map,
.pf3.show-watch.show-map{
  display: block;
  min-height: 0;
}
.pf3 > .pf3rail{
  display: none;
  writing-mode: horizontal-tb;
  height: auto;
  width: auto;
  cursor: auto;
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
}
.pf3 > .pfupd{ display: none; margin: 0; }
.pf3.show-watch > .pf-watch{ display: block; }
.pf3.show-today > .pf-today{ display: block; }
.pf3.show-map > .pf-map{ display: block; }
.pf3.show-changed > .pfupd{ display: block; }
/* pane content keeps its own rhythm */
.pf-watch .pfrows{ margin: 4px 0 12px; }
.pf-map #pfquad{ min-width: 0; }

/* ==========================================================================
   11. PORTFOLIO — rows, chart cards, sector line
   ========================================================================== */
.pfname{
  font-weight: 650;
  color: var(--ink);
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.pfname:hover{ color: var(--accent); }
.pfrowmain .pfname{ justify-self: start; max-width: 100%; }
.pfcard{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pfcard .panel-head{ margin-bottom: 0; }
.pfchart{ min-height: 130px; }
.pfsec{
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.pfsec:hover{ color: var(--accent); }

/* ==========================================================================
   12. PORTFOLIO — risk view (⚖): stops table inputs + size calculator
   ========================================================================== */
.pfriskwrap{
  display: grid;
  gap: 0;               /* .panel children carry their own margin-bottom */
  margin: 14px 0;
}
.pfriskin{
  text-align: right;
  font-variant-numeric: tabular-nums;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.pfcalcin{
  text-align: right;
  font-variant-numeric: tabular-nums;
  height: 34px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink);
}

/* ==========================================================================
   13. CHARTS — readout line, empty state, cursor affordances
   ========================================================================== */
.cc-read{
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ch-mute);
  font-variant-numeric: tabular-nums;
  margin: 2px 0 6px;
}
.cc-read b{ color: var(--ch-ink); font-weight: 650; }
.chart-empty{
  text-align: center;
  font-size: 12.5px;
  color: var(--ch-mute);
}
svg.cchart, svg.hchart-svg{ cursor: crosshair; }
.qdot{ cursor: pointer; }
.qdot:hover{ stroke: var(--ink); stroke-width: 1.5; }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .abar{ grid-template-columns: minmax(90px, 140px) 1fr auto; }
}
@media (max-width: 760px){
  .pfsum{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pfaddwrap{ margin-left: 0; }
  .pfaddwrap .pfadd{ right: auto; left: 0; }
}
@media (max-width: 560px){
  .qsym{ display: none; }
  .acctid span{ max-width: 180px; }
  .abar{ grid-template-columns: 1fr auto; }
  .abar > i{ grid-column: 1 / -1; grid-row: 2; }
  .pfsum{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   28.3 STOCK DRAWER · X-RAY · FEED · FULL-SCREEN CHART
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Drawer chrome — slim bars, titles, header actions
   -------------------------------------------------------------------------- */
.dh-title{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
  font-size: 14px;
}
.dh-title h2{
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.dh-title .num{ font-weight: 650; }

/* slim-bar buttons (‹ Back, ×, X-ray this stock…) become quiet chrome, not
   primary CTAs; the light-theme .btn color rule is re-overridden below */
.dh-slim .btn{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
}
.dh-slim .btn:hover{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--accent);
}
.dh-slim #dx, .dh-slim .btn.fsx{
  border-color: transparent;
  font-size: 18px;
  line-height: 1;
  padding: 3px 9px;
  color: var(--faint);
  margin-left: auto;
}
.dh-slim #dx:hover, .dh-slim .btn.fsx:hover{
  color: var(--ink);
  background: var(--surface-2);
  border-color: transparent;
}

/* stock drawer header: identity column + action row */
.dh-id{
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
h2.rep-nm{
  margin: 0;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.01em;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
}
.symcode{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.symcode[data-switch]{ cursor: pointer; border-style: dashed; }
.symcode[data-switch]:hover, .symcode[data-switch]:focus-visible{
  color: var(--accent);
  border-color: var(--accent);
}
[data-switch].xr-switch, strong[data-switch]{
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
}
[data-switch].xr-switch:hover, strong[data-switch]:hover{
  text-decoration-color: var(--accent);
}

.dh-acts{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  flex: 0 1 auto;
}
.dh-acts .btn{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
}
.dh-acts .btn:hover{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
.dh-acts .wstar{ font-size: 17px; }

/* X-ray button label swaps by width: long label on wide screens only */
.xr-short{ display: none; }

/* --------------------------------------------------------------------------
   2. Stock read-out: price strip, chart mount, "as of" tag
   -------------------------------------------------------------------------- */
.dbody.rep .dstats{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 12px 0 10px;
}
.dbody.rep .dstats .bignum{
  display: inline;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.dbody.rep .dstats .muted{ font-size: 12.5px; }

.rep-chart{ margin: 12px 0 10px; min-height: 120px; }
.rep-chart svg{ display: block; max-width: 100%; }

.asoftag{ background: var(--surface-2); color: var(--faint); }
.asoftag.stale{ background: var(--gold-bg); color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   3. Chart controls (range row, interval/MA selects, RS toggle, base filter)
   -------------------------------------------------------------------------- */
.chartctl{ row-gap: 6px; }
.cc-ivsel, .cc-masel{
  height: 26px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 7px;
}
.cc-masel{ height: 24px; font-size: 11.5px; }
.cc-fsb{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  margin-left: auto;
}
.cc-fsb:hover{
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
.cc-mat, .cc-rst{
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.matip{ display: inline-flex; align-items: center; gap: 5px; }
.rstog{ margin-left: 4px; }
.rstog.off{ opacity: .55; }

.bfrow{ margin: 4px 0 2px; }
.bfrow select{
  max-width: 100%;
  height: 28px;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 8px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. Fact rows (base cards, stock sheet, X-ray cards, pickers)
   -------------------------------------------------------------------------- */
.dbody .frow, .fsread .frow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--border-2);
}
.frow-l{
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
}
.frow-v{
  flex: 0 0 auto;
  text-align: right;
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* pinned measures keep a quiet remove × on the right */
.frow.bk-pin{ gap: 8px; }
.bk-pin .frow-v{ margin-left: auto; }
.bk-pin .btn{
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 13px;
  font-weight: 600;
  padding: 0 3px;
  border-radius: 6px;
  line-height: 1;
}
.bk-pin .btn:hover{ color: var(--neg); background: var(--neg-soft); }

/* --------------------------------------------------------------------------
   5. Base cards (.bkcard) and their footer
   -------------------------------------------------------------------------- */
.bkcard{ margin: 0 0 12px; }
.bkcard.on{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.bkhead{ font-size: 13.5px; margin-bottom: 2px; }
.bkhead strong{ font-weight: 750; }
.bksub{ font-size: 12px; line-height: 1.5; margin: 0 0 8px; }
.bktags{ color: var(--accent-ink); font-weight: 650; }
.bktags .muted{ color: var(--muted); font-weight: 400; }
.bk-more{ margin-top: 2px; }
.bk-more[hidden]{ display: none; }

/* in-card buttons become quiet accent links, not filled CTAs */
.bkcard .btn[data-bkall], .xrb .btn[data-xall], .bkseed{
  display: block;
  width: fit-content;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 0 0;
  text-align: left;
  border-radius: 0;
}
.bkcard .btn[data-bkall]:hover, .xrb .btn[data-xall]:hover, .bkseed:hover{
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bkfoot{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 2px 0 12px;
}
.bkfoot .btn{
  background: none;
  border: 1px solid var(--border-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}
.bkfoot .btn:hover{
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--accent);
}
.bkfoot .btn.bkaddm{ border-style: dashed; color: var(--accent); }
.bkfoot #bmcount, .bkfoot #smcount{
  font-size: 12.5px;
  color: var(--muted);
  margin-right: auto;
}
/* picker footers keep one primary action */
#bmdone, #smdone{
  background: var(--accent);
  border-color: var(--accent);
  color: #06251a;
}
#bmdone:hover, #smdone:hover{ background: var(--accent-ink); color: #06251a; }

/* --------------------------------------------------------------------------
   6. Measure pickers (base + stock): bands and check rows
   -------------------------------------------------------------------------- */
.pkband{ margin: 0 0 16px; }
.pkband .eyebrow{
  font-size: 11px;
  letter-spacing: .1em;
  margin: 0 0 4px;
}
.dbody .frow.pickrow{
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 0;
  border-radius: 8px;
  cursor: pointer;
}
.dbody .frow.pickrow:hover{ background: var(--surface-2); }
.pickrow input[type="checkbox"]{
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.pickrow .tag{ margin-left: auto; }
.pickrow.pk-dis{ opacity: .55; cursor: not-allowed; }
.pickrow.pk-dis:hover{ background: none; }
#bmlist, #smlist{ margin: 12px 0 4px; }
#bmq.qinput, #smq.qinput, .swpop .qinput{ padding-left: 12px; margin-top: 10px; }
.swpop .qinput{ margin-top: 0; }

/* --------------------------------------------------------------------------
   7. Peers tab and drawer stock lists (sector / leaders / tags)
   -------------------------------------------------------------------------- */
.peer-scope{ margin: 2px 0 10px; flex-wrap: wrap; }
.dbody .stlist, .fsread .stlist{
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.dbody .stlist .stile, .fsread .stlist .stile{
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.dbody .stlist .stile:hover, .fsread .stlist .stile:hover{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.peer-nm{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stile .num{
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}
.stile .muted{ flex: 0 0 auto; font-size: 11.5px; }
.peertile.peerme{
  border-color: var(--accent);
  background: var(--accent-wash);
  cursor: default;
}
.peerlist{ margin-top: 10px; }
.peer-gap{
  text-align: center;
  font-size: 13px;
  letter-spacing: .2em;
  padding: 0 2px;
}
/* "See all of …" footer under the list */
[data-pane="peers"] > .btn, [data-pane="peers"] [data-peerall]{
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  padding: 4px 0;
}
[data-pane="peers"] [data-peerall]:hover{
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   8. Sector drawer: subgroup chips, sector line, industry links
   -------------------------------------------------------------------------- */
.secsubs{ flex-wrap: wrap; margin: 0 0 12px; }
.secchart{ margin: 2px 0 14px; }
.secchart .muted{ font-size: 12px; }
.secline-ch{ margin-top: 6px; }
.secline-ch svg{ display: block; max-width: 100%; }
.secline{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.secgo{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
  white-space: normal;
  text-align: left;
}
.secgo:hover, .secgo:focus-visible{
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* --------------------------------------------------------------------------
   9. Stock switcher popup
   -------------------------------------------------------------------------- */
.swlist{
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
}
.swhit{
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.swhit:hover, .swhit:focus-visible{ background: var(--surface-2); }
.swhit strong{
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swhit .muted{
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.swlist > .muted{ padding: 8px 10px; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   10. Full-screen chart overlay: main pane, mount, meta column
   -------------------------------------------------------------------------- */
.fsmain{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 12px;
}
.fsmain > .muted{ font-size: 12px; margin: 0 0 4px; }
.fsmount{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fsmount .chartwrap{ flex: 1 1 auto; min-height: 0; }
.fsmeta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  margin: 10px 0 12px;
}

/* --------------------------------------------------------------------------
   11. X-ray overlay
   -------------------------------------------------------------------------- */
/* the overlay container carries class "xrun", which collides with the
   .xrun run-button recipe in style.css (accent fill, dark text) — neutralise
   it on the container so the surface reads as a normal panel again */
.fsin.xrun{
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  border-radius: 0;
  padding: 0;
  display: flex;
  gap: 0;
}
/* style.css declares :root[data-theme="light"] .xrun{ color:#fff } at higher
   specificity — re-assert readable ink on the container in light theme too */
:root[data-theme="light"] .fsin.xrun{ background: var(--surface); color: var(--ink); }
.fsin.xrun .chartctl{
  padding: 9px 16px;
  margin: 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
#xcust{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
}
#xcust[hidden]{ display: none; }

.fsread.xrpanel{ width: 440px; padding: 14px 16px; }
/* results cards are painted without the .on animation class — show them */
.xrpanel .xrcard{
  opacity: 1;
  transform: none;
  animation: none;
  cursor: default;
  margin-bottom: 12px;
}
.xrpanel .xrcard > p{ font-size: 12.5px; }
.xrpanel .bt-spin{ display: block; margin: 14px auto 8px; }
/* the .xrt pill recipe doesn't fit the results header line — normalise */
.xrpanel .xrt{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  background: none;
  color: var(--ink);
  padding: 0;
  border-radius: 0;
  margin: 0 0 10px;
}
.xrpanel .xrt strong{ font-weight: 750; }
.xrpanel .xrt select{
  margin-left: auto;
  height: 26px;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 7px;
  color: var(--muted);
}
.xrb{ margin: 0 0 10px; }
.xrb .bkhead{ font-weight: 650; font-size: 13px; }
.xrb.on{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.xrpanel #xaddm{
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 650;
  padding: 6px 0 0;
}
.xrpanel #xaddm:hover{
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. "What changed" feed drawer
   -------------------------------------------------------------------------- */
/* the feed reuses .nwgrid (a 210px-nav grid) with no nav — flow it instead */
#fdbody.nwgrid{
  display: block;
  overflow-y: auto;
  padding: 14px 18px;
}
#fdbody .fdsec h3{
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
}
.fdcat{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 2px;
}
.fdcat strong{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
#fdbody .fdpost{
  display: block;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.55;
  cursor: default;
}
#fdbody .fdpost:hover{ background: none; }
.fdnm{
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.fdnm strong{ font-weight: 700; }
.fdnm:hover strong, .fdnm:focus-visible strong{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fdtxt{ color: var(--ink); }
.feedpx{ font-variant-numeric: tabular-nums; margin-left: 2px; }
.btn.fdth{
  display: inline-flex;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  padding: 0 0 0 4px;
  border-radius: 0;
}
.btn.fdth:hover{
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fdthread{ margin-top: 8px; padding-bottom: 4px; }
.fdthread[hidden]{ display: none; }
.fdbeat{ font-size: 12.5px; color: var(--muted); }
.fdbeat .pos, .fdbeat .neg{ font-weight: 650; }
.fdthread .btn[data-fchart]{
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  padding: 0;
  justify-content: flex-start;
  width: fit-content;
  border-radius: 0;
}
.fdthread .btn[data-fchart]:hover{
  background: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fdseen{
  margin: 4px 0 14px;
  padding: 7px 12px;
  text-align: center;
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   13. Trade-plan output + learn drawer
   -------------------------------------------------------------------------- */
.tpout{ margin-top: 14px; }

.dbody.lrn h2{ margin: 0 0 10px; font-size: 19px; letter-spacing: -.01em; }
.dbody.lrn p{ font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; }
.dbody.lrn .learn-screens{ margin: 14px 0; }

/* --------------------------------------------------------------------------
   14. Light-theme companions — the :root[data-theme="light"] .btn color
   rules outrank the quiet-button overrides above, so re-assert them
   -------------------------------------------------------------------------- */
:root[data-theme="light"] .dh-slim .btn,
:root[data-theme="light"] .dh-acts .btn,
:root[data-theme="light"] .bkfoot .btn{ color: var(--muted); }
:root[data-theme="light"] .dh-slim #dx,
:root[data-theme="light"] .dh-slim .btn.fsx{ color: var(--faint); }
:root[data-theme="light"] .dh-slim .btn:hover,
:root[data-theme="light"] .dh-slim #dx:hover,
:root[data-theme="light"] .dh-slim .btn.fsx:hover,
:root[data-theme="light"] .bkfoot .btn:hover{ color: var(--ink); }
:root[data-theme="light"] .dh-acts .btn:hover{ color: var(--accent); }
:root[data-theme="light"] .bkcard .btn[data-bkall],
:root[data-theme="light"] .xrb .btn[data-xall],
:root[data-theme="light"] .bkseed,
:root[data-theme="light"] .bkcard .btn[data-bkall]:hover,
:root[data-theme="light"] .xrb .btn[data-xall]:hover,
:root[data-theme="light"] .bkseed:hover,
:root[data-theme="light"] .bkfoot .btn.bkaddm,
:root[data-theme="light"] .btn.fdth,
:root[data-theme="light"] .btn.fdth:hover,
:root[data-theme="light"] .fdthread .btn[data-fchart],
:root[data-theme="light"] .fdthread .btn[data-fchart]:hover,
:root[data-theme="light"] .xrpanel #xaddm,
:root[data-theme="light"] .xrpanel #xaddm:hover,
:root[data-theme="light"] [data-pane="peers"] [data-peerall],
:root[data-theme="light"] [data-pane="peers"] [data-peerall]:hover{ color: var(--accent); }
:root[data-theme="light"] .bk-pin .btn{ color: var(--faint); }
:root[data-theme="light"] .bk-pin .btn:hover{ color: var(--neg); }
:root[data-theme="light"] #bmdone,
:root[data-theme="light"] #smdone,
:root[data-theme="light"] #bmdone:hover,
:root[data-theme="light"] #smdone:hover{ color: #fff; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .fsread.xrpanel{ width: auto; }
  .fsmeta{ margin-top: 4px; }
}
@media (max-width: 820px){
  .fsmain{ padding: 8px 10px; }
}
@media (max-width: 760px){
  .xr-long{ display: none; }
  .xr-short{ display: inline; }
}
@media (max-width: 560px){
  .dh-acts{
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .dbody.rep .dstats .bignum{ font-size: 21px; }
  .swpop{ width: min(320px, 92vw); }
  .xrpanel .xrt select{ margin-left: 0; }
  .fsin.xrun .chartctl{ padding: 8px 10px; }
}

/* ==========================================================================
   28.4 LIVE SCREENS · HOME — control bar, hero split, stage panels, setup
   card internals (JS emits card- and mt- names; aliases of the §11 recipes)
   ========================================================================== */

/* header bar: picker cluster right of the "Live now" stamp */
.livectl{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.mswrap, .indwrap, .hfx{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* industry / subgroup popover internals */
.indp-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.indp-head b{ font-size: 13px; }
.indp-head .btn{ padding: 4px 10px; font-size: 12px; }
.indp-list{
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 0 4px;
}
.indp-grp{ margin: 0 0 8px; }
.indp-grp > .eyebrow{ display: block; margin: 6px 0 2px; }
.indp-row{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}
.indp-row:hover{ background: var(--surface-2); }
.indp-row input[type="checkbox"]{
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.indp-foot{
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

/* per-stage sort select (compact, matches .ldsel) */
.livesort{
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 22px 4px 8px;
  font-size: 12.5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-left: 4px;
}
.livesort:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }

/* stage panel chrome */
.stagectl{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
.stagectl .btn{ padding: 5px 11px; font-size: 12.5px; }
.stagectl > label.faint{ display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.stagebody{ margin-top: 10px; }
.stg-empty{ padding: 16px 2px; font-size: 13px; }
.lifepanel{ scroll-margin-top: 76px; }

/* hero: content left · what-changed right */
#view-live .hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px 24px;
  align-items: start;
}
.heroleft{ min-width: 0; }
.heroleft h1{ margin: 4px 0 8px; }
.heroright{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.herofoot{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 10px 0 0;
  font-size: 13px;
}
.hchslot, .hbtslot{ display: block; }
.hchslot:empty, .hbtslot:empty{ display: none; }
.lifearrow{
  align-self: center;
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 14px;
}
@media (max-width: 900px){
  #view-live .hero{ grid-template-columns: 1fr; }
  .lifearrow{ display: none; }
}

/* screen picker note + filters menu rows */
.fmiss-find{ margin: 6px 0 0; }
.fmrow{ display: flex; align-items: stretch; }
.fmrow > button:first-child{ flex: 1 1 auto; min-width: 0; }
.fmrow > .btn[data-fmdel]{
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 14px;
  padding: 0 10px;
  border-radius: 8px;
}
.fmrow > .btn[data-fmdel]:hover{ color: var(--neg); background: var(--neg-soft); }

/* combine-screens popover rows */
.msops{ display: flex; gap: 6px; margin: 8px 0 2px; }
.msrow{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.msrow select{
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  font-size: 13px;
  border-radius: 8px;
}
.msrow .btn{ flex: 0 0 auto; padding: 4px 9px; font-size: 13px; }
.msmatch{ margin: 8px 0 0; font-size: 12.5px; }

/* setup card internals — aliases of .noterow/.headrow/.identrow (§11) */
.setup .cardnote{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
}
.setup .cardhead{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cname{
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setup .cardid{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  min-width: 0;
}
.scrbadges{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 8px;
}
.setup .cardmain{ min-width: 0; }
.setup-chart{ min-height: 150px; margin-bottom: 8px; }
.setup .cardleg{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--faint);
}
.setup .cardfoot{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.setup .cardfoot .tag{ margin-left: auto; }
.pricechip{
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.sqleg{
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* metric grid under the setup chart */
.mtgrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}
.mtcell{ min-width: 0; }
.mtlbl{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.mtval{
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* measures picker rows (drawer) */
.metrow{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.metrow:hover{ background: var(--surface-2); }
.metrow.off{ opacity: .55; cursor: not-allowed; }
.metrow.off:hover{ background: none; }
.metrow input[type="checkbox"]{
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

/* backtest log name span */
.bcn{ font-weight: 600; }

/* home: runner cards */
.hmchead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14.5px;
  margin-bottom: 2px;
}
.hmchead b{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hmchead .num{ flex: 0 0 auto; }
.hmc-ch{ min-height: 196px; }
.hmcfoot{ margin: 8px 0 0; font-size: 12px; }
.hs-ic{ color: var(--accent); font-size: 17px; flex: 0 0 auto; }

/* ==========================================================================
   28.5 MARKET · BREAKOUTS — rotation quadrant bar, industry pane, RS chart
   ========================================================================== */

.qbar{
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
}
.qbar .ldsel{ max-width: 240px; }
.qkind{ flex: 0 0 auto; }
.indplv{ margin-left: auto; flex: 0 0 auto; }
tr.indpr{ cursor: pointer; }
tr.indpr:hover td{ background: var(--surface-2); }
.indpth{ white-space: nowrap; }
.indp-rs{ cursor: crosshair; }
.rs-cross, .rs-dot{ pointer-events: none; }
.rs-tip{ max-width: 260px; }
.lginfo{ flex: 0 0 auto; }

/* verification fix: the view-backtest runtime styleBlock rule
   "#view-backtest .btstats>div span{display:flex}" also matches the nested
   .mtip tooltip spans and overrides their display:none — every stats-row tip
   painted open at rest. Outrank it both ways (hide at rest, show on intent). */
#view-backtest .btstats .mtip{ display: none; }
#view-backtest .btstats .minfo:hover .mtip,
#view-backtest .btstats .minfo:focus .mtip,
#view-backtest .btstats .minfo.open .mtip{ display: block; }

/* verification fix (390px): .btgrid items inherit min-content from the
   540px-min-width heat strip — the whole results pane overflowed the phone
   viewport. Let the panes shrink; .btheat/.btcmp scroll internally. */
#view-backtest .btgrid > *{ min-width: 0; }

/* verification fix (390px): the mobile header parks the account chip left of
   centre, so the right-anchored 210px dropdown ran 22px off-screen left.
   Anchor it to the chip's left edge on phones and cap it to the viewport. */
@media (max-width: 560px){
  .acctdrop{ left: 0; right: auto; width: min(240px, calc(100vw - 24px)); }
}

/* ==========================================================================
   29. DARK-THEME TYPOGRAPHY / ALIGNMENT AUDIT FIXES
   ========================================================================== */

/* audit fix: .liveupd is absolutely positioned to #view-live's top-right,
   which lands it under the Cards/List toggle at wide widths and flush against
   the viewport edge at 390px. Park it statically under the LIVE NOW eyebrow
   inside the banner instead (markup already places it there). */
.livefilt .liveupd{
  position: static;
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

/* audit fix: .hero{overflow:hidden} clipped the absolutely-positioned
   #hero-filtmenu at its bottom edge (only the first row visible at wide
   widths). The lifecycle strip scrolls inside its own .lifestrip
   {overflow-x:auto}, so the live hero does not need to clip. */
#view-live .hero{ overflow: visible; }

/* audit fix: the watchlist Strength-map legend reuses .qcorner spans, which
   are position:absolute for the map's corner captions — with no offsets all
   four stacked on one spot below the map. Lay them out in the .qlegend flex
   row instead. */
.qlegend .qcorner{ position: static; padding: 0; }

/* audit: the watchlist quadrant (#pfquad) paints .qcorner captions with inline
   mid-tone colours dimmed to opacity .85 — under 4.5:1 in both themes. The
   colours arrive inline (per-quadrant), so lift them with a theme-appropriate
   brightness shift instead of one flat override that would erase the coding. */
#pfquad .qcorner{ opacity: 1; filter: brightness(1.5); }
:root[data-theme="light"] #pfquad .qcorner{ filter: brightness(.62); }

/* audit fix (/guides, /notes hubs): .artcard anchors had no inner typography —
   <b> title, <span> excerpt and <small> date ran together as one link-coloured
   line. Stack them and use the text tokens. */
.artcard{ color: var(--ink); }
.artcard b{ display: block; margin-bottom: 6px; line-height: 1.4; }
.artcard span{
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.artcard small{
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font-size: 12px;
}

/* audit fix (article shell): the signed-in account dropdown is injected with
   inline display:flex, which outranks the UA's [hidden]{display:none} — the
   menu painted permanently open over the page header. Re-assert hidden. */
#bacct-menu[hidden]{ display: none !important; }

/* audit fix (#about "Where to start"): .guidecard numbers its cards with a
   CSS counter circle (::before); these cards also hard-code <b>1</b>…<b>4</b>,
   which painted a second digit run into the label ("1How it works"). */
.hubcards .guidecard > b{ display: none; }

/* audit fix (market "By industry" stacked cards ≤560px): indpDelta() emits its
   1 wk / 1 mo / 3 mo cells without data-l, so the stacked-card layout showed
   bare "▼ 1.0" rows with no caption. Label those cells positionally (the
   column order is fixed: group, RS, 1 wk, 1 mo, 3 mo). */
@media (max-width: 560px){
  .indp .tablewrap td:nth-child(n+3):not([data-l])::before{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    text-align: left;
  }
  .indp .tablewrap td:nth-child(3):not([data-l])::before{ content: "1 wk"; }
  .indp .tablewrap td:nth-child(4):not([data-l])::before{ content: "1 mo"; }
  .indp .tablewrap td:nth-child(5):not([data-l])::before{ content: "3 mo"; }
}

/* audit fix (breakouts Change bar, 390px): the expanded toolbar's .segs rows
   are inline-flex and never wrap, so Industries/Subgroups/Filters/Measures
   pushed the page to ~494px wide (whole view scrolled sideways). Let the
   ledger's control rows wrap; at desktop widths nothing changes. */
#view-brk .segs{ flex-wrap: wrap; }

/* audit fix (watchlist pane tabs ≤760px): the underline-tab restyle of
   .pf3tabs never cleared the .segs pill, so the active tab kept the
   background:var(--accent) pill under its color:var(--accent) label —
   invisible text in dark ("Today" showed as an empty green block). Make the
   underline look complete, and keep the label accent-coloured in light too
   (the pill's :root[data-theme=light] #fff would vanish on a clear bg). */
@media (max-width: 760px){
  .pf3tabs button,
  .pf3tabs button.on{
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
  }
  .pf3tabs button.on,
  :root[data-theme="light"] .pf3tabs button.on{
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
}