/* ============================================================================
   ALTAHA SCREENER — PREMIUM LAYER  v2
   ----------------------------------------------------------------------------
   Replaces v1 entirely. Two things went wrong in v1 and both are fixed here:

   1. Reveals used a persistent `opacity:0` switched back on by a scroll
      observer. Elements inside `display:none` tab views never intersect, so
      they never turned back on. Ideas, Portfolio and Filings rendered blank.
      v2 uses keyframe animations instead: if the trigger never fires, the
      element is simply visible. It fails open, not closed.

   2. The nav used `margin-inline: calc(50% - 50vw)` to go full-bleed, which
      breaks alignment and causes horizontal scroll at some widths. v2 keeps
      the nav inside the normal column.

   DIRECTION — "Instrument"
   The old skin was cream paper, serif and gold: a magazine. This is a
   measuring instrument, so the material is glass and graphite, and the
   decoration is drawn from the subject itself — candles, grid, hairlines,
   tick marks. No stock photography: a chart is more honest to what this is,
   and generated SVG stays sharp at every density.
============================================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --paper:   #FCFCFD;
  --paper-2: #F1F3F6;
  --ink:     #0A0B0E;
  --ink-2:   #3A404B;
  --mute:    #6C7280;
  --rule:    #E1E4E9;
  --rule-2:  #ECEEF1;

  --gold:    #A8862F;
  --gold-lt: #C4A661;
  --gold-dp: #7E6220;

  --pass: #0B7A55;
  --part: #A2751A;
  --fail: #C0392F;

  --surface:    #FFFFFF;
  --surface-2:  #F7F8FA;
  --glass:      rgba(252,252,253,.78);
  --glass-line: rgba(10,11,14,.08);
  --hairline:   rgba(10,11,14,.10);
  --grid:       rgba(10,11,14,.045);

  --up:   #0B7A55;
  --down: #C0392F;

  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  --sh-1: 0 .5px 1px rgba(10,11,14,.05), 0 1px 2px rgba(10,11,14,.04);
  --sh-2: 0 1px 2px rgba(10,11,14,.05), 0 4px 12px rgba(10,11,14,.06),
          0 12px 32px rgba(10,11,14,.05);
  --sh-3: 0 2px 4px rgba(10,11,14,.06), 0 12px 28px rgba(10,11,14,.10),
          0 32px 64px rgba(10,11,14,.10);
  --ring: 0 0 0 3.5px rgba(196,166,97,.30);

  --r-card:  14px;
  --r-panel: 20px;
  --r-pill:  999px;

  --ease:      cubic-bezier(.32,.72,0,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms; --t: 300ms; --t-slow: 640ms;

  --maxw: 1100px;
  --gut: clamp(18px, 4vw, 34px);
}

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

  --paper:   #0A0B0E;
  --paper-2: #15171C;
  --ink:     #F3F4F7;
  --ink-2:   #B4BAC4;
  --mute:    #79808E;
  --rule:    #23262E;
  --rule-2:  #1B1E24;

  --gold:    #D9BE7E;
  --gold-lt: #C4A661;
  --gold-dp: #EBD6A2;

  --pass: #34C48D;
  --part: #D8AE4B;
  --fail: #F0736A;

  --surface:    #121419;
  --surface-2:  #181B21;
  --glass:      rgba(10,11,14,.76);
  --glass-line: rgba(255,255,255,.09);
  --hairline:   rgba(255,255,255,.10);
  --grid:       rgba(255,255,255,.05);

  --up:   #34C48D;
  --down: #F0736A;

  --sh-1: 0 .5px 1px rgba(0,0,0,.5);
  --sh-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 2px 6px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.55);
  --ring: 0 0 0 3.5px rgba(217,190,126,.32);
}

/* Hardcoded #fff in the original sheet, rerouted. Explicit, not wildcard. */
html[data-theme="dark"] .searchrow,
html[data-theme="dark"] .idea,
html[data-theme="dark"] .rcard,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .act,
html[data-theme="dark"] .dtool,
html[data-theme="dark"] .exp,
html[data-theme="dark"] .tf,
html[data-theme="dark"] .mode,
html[data-theme="dark"] .vg,
html[data-theme="dark"] .vcard,
html[data-theme="dark"] .pin,
html[data-theme="dark"] .ptaxcol,
html[data-theme="dark"] .pfbtn,
html[data-theme="dark"] .pfrow input,
html[data-theme="dark"] .sh-inst,
html[data-theme="dark"] .audit,
html[data-theme="dark"] .fctop,
html[data-theme="dark"] .fcsym,
html[data-theme="dark"] .fitem,
html[data-theme="dark"] .trackbtn,
html[data-theme="dark"] .tk,
html[data-theme="dark"] .statcell,
html[data-theme="dark"] .octable-wrap,
html[data-theme="dark"] .wabtn,
html[data-theme="dark"] .moreMenu,
html[data-theme="dark"] .livebadge {
  background: var(--surface);
  color: var(--ink-2);
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface); color: var(--ink); border-color: var(--rule);
}
html[data-theme="dark"] .act.solid,
html[data-theme="dark"] #genbtn,
html[data-theme="dark"] #genbtn2 {
  background: var(--gold-lt); color: #0A0B0E; border-color: var(--gold-lt);
}
/* Chart containers are left alone — the canvas library paints its own
   background and forcing one here produced a visible seam in v1. */

/* ── 2. BASE ───────────────────────────────────────────────────────────── */

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.011em;
  overflow-x: hidden;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.wrap { max-width: var(--maxw); padding-inline: var(--gut); }

/* Tabular figures everywhere a number lives. Without this, price columns
   visibly jitter as digits change — small, but it reads as unfinished. */
.num, .val, .sfitval, .pvnum, .tkln, .pcell, .rq, .ptv, .pts, .mono,
.lvlpx, .anums, .statcell, .tk .l, .tk .c, td, th, input[type="number"],
.hero-tile-val, .hero-tile-chg {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

::selection { background: rgba(196,166,97,.28); color: var(--ink); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* ── 3. TICKER BAR ─────────────────────────────────────────────────────── */

.tickerbar {
  background: #07080A;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tickerbar .tk { background: transparent !important; border: 0; }
.tickerbar .tk .n { color: rgba(255,255,255,.66); letter-spacing: .1em; }
.tickerbar .tk .l { color: rgba(255,255,255,.94); font-weight: 500; }
.tickerbar .tk .c.up { color: #34C48D; }
.tickerbar .tk .c.dn { color: #F0736A; }
.tickerbar .mktime, .tickerbar .mkstatus { color: rgba(255,255,255,.74); }
.tickerbar .mkstatus i { box-shadow: 0 0 0 4px rgba(52,196,141,.16); }

/* ── 4. HERO ───────────────────────────────────────────────────────────────
   The signature. A live-drawn candlestick field sits behind the wordmark:
   the product's own subject used as its ornament. Generated as SVG by
   premium.js so it stays sharp on every display and costs no network. */

header.wrap {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(54px, 9vw, 108px) clamp(30px, 4vw, 52px);
}

/* Chart grid — the graph-paper an instrument is read against */
header.wrap::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right,  var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(78% 72% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(78% 72% at 50% 42%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Warm field behind the wordmark so the type sits on light, not on grid */
header.wrap::after {
  content: "";
  position: absolute; inset: -10% -25% 30% -25%; z-index: -2;
  background: radial-gradient(52% 74% at 50% 30%,
              rgba(196,166,97,.15) 0%, rgba(196,166,97,0) 72%);
  pointer-events: none;
}

/* The candle field, injected by premium.js */
.hero-candles {
  position: absolute; inset: auto 0 0 0; height: 190px; z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 78%, transparent);
  opacity: .5;
}
html[data-theme="dark"] .hero-candles { opacity: .42; }
.hero-candles svg { width: 100%; height: 100%; display: block; }
.hero-candles .wick { stroke-width: 1; }
.hero-candles .cndl { transform-origin: center; }

@keyframes candleGrow {
  from { opacity: 0; transform: scaleY(.05); }
  to   { opacity: 1; transform: scaleY(1); }
}
.hero-candles g { animation: candleGrow 900ms var(--ease-soft) both; transform-origin: 50% 50%; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--mute);
}

.brand {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(48px, 9.6vw, 108px);
  line-height: .93;
  letter-spacing: -.046em;
  margin: 18px 0 0;
}
.brand i {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  letter-spacing: -.02em;
  background: linear-gradient(148deg, var(--gold-dp) 0%, var(--gold-lt) 44%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tag { font-size: 14px; color: var(--mute); margin-top: 14px; letter-spacing: .005em; }

.metal {
  height: 1px; border: 0; max-width: 300px; margin: 30px auto;
  background: linear-gradient(90deg, transparent, var(--rule) 16%,
              var(--gold-lt) 50%, var(--rule) 84%, transparent);
}

.pitch {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.56; color: var(--ink-2);
  max-width: 600px; margin-inline: auto; letter-spacing: -.013em;
}
.pitch b { color: var(--ink); font-weight: 600; }

.badges { margin-top: 26px; display: flex; flex-wrap: wrap;
          justify-content: center; gap: 8px; }
.badge {
  background: var(--surface); border: .5px solid var(--hairline);
  border-radius: var(--r-pill); box-shadow: var(--sh-1);
  font-size: 12px; color: var(--ink-2); padding: 7px 15px; letter-spacing: -.004em;
}

.brandsw { margin-top: 20px; }
.bsw { font-size: 13px; letter-spacing: -.005em; }

/* ── 5. INDEX TILES ────────────────────────────────────────────────────────
   Live NIFTY / SENSEX / BANKNIFTY, mirrored from the ticker data already on
   the page. Three glass instruments under the hero: the first thing a market
   person looks for, and currently only present as 11px text in a black bar. */

.hero-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  max-width: 660px; margin: 34px auto 0;
}
.hero-tile {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: .5px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  padding: 14px 16px 15px;
  text-align: left;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.hero-tile:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.hero-tile-name {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--mute);
}
.hero-tile-val {
  font-size: 22px; font-weight: 600; letter-spacing: -.03em;
  margin-top: 7px; color: var(--ink);
}
.hero-tile-chg {
  font-family: var(--mono); font-size: 11.5px; margin-top: 3px; font-weight: 500;
}
.hero-tile-chg.up { color: var(--up); }
.hero-tile-chg.dn { color: var(--down); }
/* Sparkline strip along the tile's bottom edge */
.hero-tile-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
                   opacity: .3; pointer-events: none; }
.hero-tile-spark svg { width: 100%; height: 100%; display: block; }

/* ── 6. COMMAND BAR ──────────────────────────────────────────────────────
   Sticky, but kept inside the normal column. The v1 full-bleed trick caused
   the misalignment and the horizontal scroll. */

.tabnav {
  position: sticky; top: 0; z-index: 60;
  padding: 11px 0 12px;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  transition: box-shadow var(--t) var(--ease);
}
/* The hairline spans the viewport without moving the bar itself */
.tabnav::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 100vw; transform: translateX(-50%); height: 1px;
  background: var(--glass-line); opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.tabnav.is-stuck::after { opacity: 1; }

/* ── 7. SEGMENTED CONTROLS ─────────────────────────────────────────────── */

.seg {
  background: var(--paper-2);
  border: .5px solid var(--hairline);
  padding: 3px;
  box-shadow: inset 0 1px 2px rgba(10,11,14,.03);
}
html[data-theme="dark"] .seg { box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }

.seg > button, .seg > .moreWrap > button {
  font-family: var(--sans); font-weight: 500; font-size: 13.5px;
  letter-spacing: -.005em; padding: 8px 18px;
}
.seg.mono > button { font-family: var(--mono); font-size: 10.5px; padding: 7px 13px; }

.seg-puck {
  top: 3px; bottom: 3px;
  background: var(--surface);
  box-shadow: 0 .5px 1px rgba(10,11,14,.07), 0 3px 8px rgba(10,11,14,.10);
  transition: transform 420ms var(--ease), width 420ms var(--ease),
              opacity var(--t-fast) linear;
}
.seg-puck::after { border-color: transparent; }
html[data-theme="dark"] .seg-puck { background: #292D36; box-shadow: 0 2px 8px rgba(0,0,0,.55); }

.seg.has-puck > button.active,
.seg.has-puck > .moreWrap > button.active { color: var(--ink); font-weight: 600; }
.seg > button.active, .seg > .moreWrap > button.active {
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-1);
}

/* ── 8. SEARCH ─────────────────────────────────────────────────────────── */

.searchrow {
  background: var(--surface);
  border: .5px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  padding: 6px 6px 6px 22px;
  max-width: 620px; margin-inline: auto;
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.searchrow:focus-within { box-shadow: var(--sh-3), var(--ring); transform: translateY(-1px); }
.searchrow input {
  font-family: var(--sans); font-size: 16px; letter-spacing: -.012em;
  background: transparent; border: 0; color: var(--ink);
}
.searchrow input::placeholder { color: var(--mute); }
.searchrow button, #go, #rgo {
  border-radius: var(--r-pill); border: 0;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 550; font-size: 14px;
  letter-spacing: -.008em; padding: 11px 26px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.searchrow button:hover, #go:hover, #rgo:hover { opacity: .86; transform: translateY(-1px); }
.searchrow button:active { transform: translateY(0) scale(.985); }

.kbdhint {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--mute);
  border: .5px solid var(--hairline); border-radius: 6px;
  padding: 3px 7px; margin-right: 9px; background: var(--paper-2);
}
@media (max-width: 700px) { .kbdhint { display: none; } }

.hint b {
  cursor: pointer; color: var(--ink-2); font-weight: 500;
  border-bottom: 1px solid var(--rule);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hint b:hover { color: var(--gold-dp); border-color: var(--gold-lt); }

/* ── 9. PANELS ─────────────────────────────────────────────────────────── */

#pricewrap, #volwrap, #shwrap, #lvlwrap, #setupwrap, #plainwrap, #planwrap,
.rcard, .idea, .vcard, .statbox, .alertcard, .ptaxcol {
  border-radius: var(--r-card);
  border: .5px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.idea:hover, .rcard:hover, .alertcard:hover {
  box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--rule);
}

.vhead h4, .lh h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.023em; }
.lh h3 { font-size: clamp(21px, 2.6vw, 27px); }

/* Section headers get a candle glyph — the subject as structural device,
   not decoration bolted on. */
.lh { display: flex; align-items: center; gap: 12px; }
.lh::before {
  content: ""; flex: 0 0 auto; width: 3px; height: 21px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-lt), var(--gold-dp));
}

.sk, .sk2, .lbl, .modelbl, .dlbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute);
}

/* ── 10. THE GAUGE — signature ─────────────────────────────────────────── */

.verdict {
  border-radius: var(--r-panel);
  border: .5px solid var(--hairline);
  background: radial-gradient(120% 140% at 12% 0%, var(--surface-2) 0%, var(--surface) 55%);
  box-shadow: var(--sh-2);
  padding: clamp(22px, 4vw, 40px);
  position: relative; overflow: hidden;
}
.verdict::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme="dark"] .verdict::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

.seal { filter: drop-shadow(0 8px 22px rgba(10,11,14,.07)); }
.seal svg circle#arc {
  stroke-linecap: round;
  transition: stroke-dashoffset 1200ms var(--ease-soft) !important;
}
.seal .val {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 7vw, 62px); line-height: 1;
}
.seal .of {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mute);
}

.vstamp {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-dp);
}
.vsummary { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55;
            letter-spacing: -.014em; color: var(--ink); }
.vbasis { font-family: var(--mono); font-size: 11px; color: var(--mute); }

.confchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
  border: .5px solid var(--hairline); background: var(--paper-2);
  color: var(--ink-2); margin-left: 8px;
}
.confchip i { width: 5px; height: 5px; border-radius: 50%; background: var(--pass); }
.confchip.thin i { background: var(--fail); }

/* ── 11. BUTTONS ───────────────────────────────────────────────────────── */

.act, .livebtn, .trackbtn, .pfbtn, .wabtn, .auditbtn, .showfull {
  border-radius: var(--r-pill);
  border: .5px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.act:hover, .livebtn:hover, .trackbtn:hover, .pfbtn:hover,
.auditbtn:hover, .showfull:hover {
  transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--ink);
}
.act:active, .livebtn:active { transform: translateY(0) scale(.985); }
.auditbtn, .showfull {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 13px 24px;
}

/* ── 12. LEDGER / TABLES ───────────────────────────────────────────────── */

.audit { border-radius: 10px; border: .5px solid var(--hairline); background: var(--surface); }
.audit:hover { border-color: var(--rule); }
.octable-wrap { border-radius: var(--r-card); border: .5px solid var(--hairline); }
.octable th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}

/* ── 13. MOTION — fails open ───────────────────────────────────────────────
   Everything here is a keyframe animation, never a persistent opacity:0.
   If a trigger never fires, the element is simply visible. This is the v1 bug
   that blanked the hidden tabs, and it is the reason for the rule. */

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); }
                    to   { opacity: 1; transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(20px); filter: blur(7px); }
                    to   { opacity: 1; transform: none; filter: blur(0); } }

.hero-in > * { animation: heroIn 850ms var(--ease-soft) both; }
.hero-in > *:nth-child(1) { animation-delay:  40ms; }
.hero-in > *:nth-child(2) { animation-delay: 110ms; }
.hero-in > *:nth-child(3) { animation-delay: 180ms; }
.hero-in > *:nth-child(4) { animation-delay: 240ms; }
.hero-in > *:nth-child(5) { animation-delay: 300ms; }
.hero-in > *:nth-child(6) { animation-delay: 355ms; }
.hero-in > *:nth-child(7) { animation-delay: 410ms; }
.hero-in > *:nth-child(8) { animation-delay: 460ms; }

.rv { animation: riseIn var(--t-slow) var(--ease-soft) both; }
.rise { animation-duration: var(--t-slow); animation-delay: calc(var(--i,0) * 42ms); }

/* ── 14. THEME TOGGLE ──────────────────────────────────────────────────── */

/* Segmented Light / Dark, in the ticker strip at the top of the page.
   It sits on a permanently dark bar in both themes, so its colours are fixed
   whites rather than tokens that invert — the same mistake that turned the
   strip itself white in dark mode. */
.themeseg {
  position: relative; display: inline-flex; align-items: center;
  margin-left: auto; flex-shrink: 0; padding: 2px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.05);
}
.themeseg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 4px 10px; color: rgba(255,255,255,.5);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1;
  transition: color var(--t-fast) var(--ease);
}
.themeseg button svg { display: block; }
.themeseg button:hover { color: rgba(255,255,255,.82); }
.themeseg button.on { color: #17140E; }
.themeseg button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(217,188,106,.6); }

/* One puck that slides, rather than two backgrounds that flick. */
.themepuck {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px);
  border-radius: 999px; background: #E8E2D4; z-index: 0;
  transition: transform var(--t) var(--ease-soft);
}
.themeseg[data-t="dark"] .themepuck { transform: translateX(100%); }

@media (max-width: 560px) {
  .themeseg button span { display: none; }      /* icons only on a narrow strip */
  .themeseg button { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .themepuck { transition: none; } }

/* Kept so any older markup still renders something usable. */
.themebtn {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass); border: .5px solid var(--glass-line);
  box-shadow: var(--sh-2); color: var(--ink-2); font-size: 15px;
}

/* ── 15. MOBILE TAB BAR ────────────────────────────────────────────────── */

.mobnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  background: var(--glass); border-top: .5px solid var(--glass-line);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.mobnav-inner { display: flex; gap: 2px; }
.mobnav button {
  flex: 1 1 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border-radius: 10px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  color: var(--mute);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mobnav button svg { width: 19px; height: 19px; stroke-width: 1.6; }
.mobnav button.on { color: var(--ink); background: var(--paper-2); }

/* Injected by premium.js for the mobile More sheet; Filings keeps its own
   button in the desktop bar, so this duplicate stays hidden there. Declared
   before the media query, or the two would tie on specificity and source
   order would hide it on phones too. */
.moreMenu .mobonly { display: none; }

@media (max-width: 780px) {
  .mobnav { display: block; }
  body { padding-bottom: 64px; }
  .tabnav { display: none; }
  .brand { font-size: clamp(40px, 13vw, 64px); }
  .searchrow { padding-left: 16px; }
  .verdict { padding: 22px 18px; }
  .hero-candles { height: 140px; }
  /* The Screener's inline drawing strip stays hidden on touch — its targets
     are 24px. The Charts tab has its own 40px rail and is the place to draw
     on a phone. */
  .drawbar .seg.mono, .drawbar #dclear, .drawbar .dlbl { display: none; }

  /* ── The More menu, on a phone ───────────────────────────────────────────
     placeMore() positions this menu from the rect of #tab-more, which lives
     inside .tabnav — hidden at this width, so the rect is all zeros and the
     menu lands in the top-left corner. Rather than reach into that function,
     the menu becomes a bottom sheet here and the inline coordinates are
     overridden outright. It sits above the tab bar because it is opened from
     it. */
  .moreMenu {
    left: 10px !important; right: 10px !important;
    top: auto !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    width: auto; min-width: 0; z-index: 90;
    transform-origin: bottom center;
    border-radius: 14px; padding: 8px;
    box-shadow: var(--sh-3, 0 20px 48px rgba(0,0,0,.28));
  }
  .moreMenu:not(.open) { transform: translateY(8px) scale(.98); }
  .moreMenu button { padding: 15px 16px; font-size: 12px; letter-spacing: .12em; }
  .moreMenu .mobonly { display: block; }
  .moreMenu .sep { margin: 6px 0; }
}

/* ── 16. SCROLLBAR ─────────────────────────────────────────────────────── */

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule); border-radius: 99px;
  border: 3px solid var(--paper); background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--mute); background-clip: padding-box; }

/* ── 17. ACCESSIBILITY ─────────────────────────────────────────────────── */

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

@media print {
  .tabnav, .mobnav, .themebtn, .tickerbar, .hero-candles { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — THE DIAL AND THE SCORE CARD
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 18. THE DIAL ────────────────────────────────────────────────────────
   The seal was a progress ring: a loading indicator wearing a suit. This is
   the one screen element people will remember, so it becomes what the product
   actually is — a measuring instrument. A 250° dial with a machined tick ring,
   a track banded by verdict, and a needle that overshoots and settles the way
   a real movement does.

   The needle springs; the value arc does not. The needle is mechanism, so it
   has momentum. The arc is data, and data that overshot 100 before settling
   would be a small lie told for the sake of a flourish. */

.seal svg { overflow: visible; }
.seal .gauge-track  { stroke: var(--rule);   stroke-width: 5.5; fill: none; stroke-linecap: round; }
.seal .gauge-value  { stroke-width: 5.5; fill: none; stroke-linecap: round;
                      filter: drop-shadow(0 0 6px currentColor); }
.seal .tick         { stroke: var(--rule);   stroke-width: 1; }
.seal .tick.major   { stroke: var(--mute);   stroke-width: 1.4; }
.seal .tick.lit     { stroke: currentColor;  stroke-opacity: .85; }
.seal .needle       { fill: var(--ink); }
.seal .hub          { fill: var(--ink); }
.seal .hub-ring     { fill: none; stroke: var(--gold-lt); stroke-width: .75; }

/* The number sits low in a dial, under the needle hub, not dead centre */
.seal .val {
  font-family: var(--sans) !important;
  font-weight: 600; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  font-size: 54px !important;
  position: relative; top: 26px !important;
  transition: color var(--t) var(--ease);
}
.seal .of { bottom: 20px !important; letter-spacing: .22em; }

.seal .val.b-strong { color: var(--pass); }
.seal .val.b-good   { color: var(--gold-dp); }
.seal .val.b-mixed  { color: var(--part); }
.seal .val.b-weak   { color: var(--fail); }

/* ── 19. SCORE CARD ──────────────────────────────────────────────────────
   A 1080×1350 PNG of the current verdict, rendered on canvas and downloaded.
   For the Instagram grid — the analysis is the content, so the screenshot
   should not have to be a screenshot. */

.cardbtn { margin-top: 16px; }
.cardbtn svg { width: 13px; height: 13px; stroke-width: 1.8; }

@media (max-width: 780px) {
  .seal .val { font-size: 46px !important; top: 22px !important; }
}

/* ── More menu, dark mode ──────────────────────────────────────────────────
   The menu was declared with a literal background:#fff in index.html and was
   missing from the rerouting list above, while its buttons use color:var(--ink)
   — near-white in dark mode. White text on a white panel: the labels rendered,
   they simply could not be seen, which read from outside as "Tracker, Results,
   Options and Vocabulary have no labels". Both halves are pinned here. */
html[data-theme="dark"] .moreMenu {
  background: var(--surface-2);
  border-color: var(--rule);
}
html[data-theme="dark"] .moreMenu button { color: var(--ink-2); }
html[data-theme="dark"] .moreMenu button:hover {
  background: var(--surface);
  color: var(--gold-dp);
}
html[data-theme="dark"] .moreMenu .sep { background: var(--rule); }