/* ──────────────────────────────────────────────────────────
   VANTIS — App kit · "forest terminal"
   Dark counterpart to the marketing site. The palette + visual
   vocabulary are lifted from the production product mocks
   (components/mocks.tsx + .vt-mock* in globals.css) and extended
   into a full application shell. Reconstruction, not the real app.
   ────────────────────────────────────────────────────────── */

:root {
  --bg:    #0d1612;
  --bg-2:  #11211a;
  --bg-3:  #163026;
  --bd:    #1f3a2c;
  --bd-2:  #2a4a38;
  --moss:  #4a6e54;
  --sage:  #8a9d80;
  --text:  #d8dac4;
  --mute:  #7a8d80;
  --faint: #5a6f62;
  --forest:#cfd9c4;
  --gold:  #d4a85a;
  --gold-soft: rgba(212,168,90,.12);
  --good:  #8ec196;
  --bad:   #c98a72;
  --serif: 'Newsreader','Iowan Old Style',Georgia,serif; /* @kind font */
  --sans:  'Inter Tight',-apple-system,system-ui,sans-serif; /* @kind font */
  --mono:  'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace; /* @kind font */
  --ease:  cubic-bezier(0.32,0.08,0.24,1); /* @kind other */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 0.875rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11";
}
::selection { background: rgba(212,168,90,.25); color: #fff; }

.tiny { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.good { color: var(--good); }
.gold { color: var(--gold); }

/* ── SHELL ── */
/* height: 100dvh tracks the *visual* viewport on mobile (shrinks when the iOS/Chrome
   bottom toolbar is shown), so the internal scroll region (.vt-content) and the fixed
   bottom nav stay above the browser chrome. 100vh kept first as the fallback for old engines. */
.vt-app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── SIDEBAR ── */
.vt-side { background: var(--bg-2); border-right: 1px solid var(--bd); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; }
.vt-side-brand { display: flex; align-items: center; gap: .55em; color: var(--text); padding: 4px 8px 16px; }
.vt-side-brand .wm { font-family: var(--serif); font-size: 1.375rem; letter-spacing: -.01em; }
.vt-side-nav { display: flex; flex-direction: column; gap: 2px; }
.vt-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 4px;
  font-size: 0.8438rem; color: var(--mute); cursor: pointer; border: 1px solid transparent;
  transition: background var(--ease) .18s, color var(--ease) .18s; text-align: left; background: none; font-family: var(--sans);
}
.vt-nav-item:hover { background: var(--bg-3); color: var(--text); }
.vt-nav-item.is-active { background: var(--bg-3); color: var(--text); border-color: var(--bd-2); }
.vt-nav-item.is-active .vt-nav-glyph { color: var(--gold); }
.vt-nav-glyph { font-family: var(--mono); font-size: 0.75rem; width: 16px; text-align: center; color: var(--faint); }
.vt-side-sep { height: 1px; background: var(--bd); margin: 12px 8px; border: 0; }
.vt-side-spacer { flex: 1; }
.vt-side-rules { padding: 12px 10px; background: var(--bg-3); border: 1px solid var(--bd); border-radius: 4px; }
.vt-side-rules .tiny { margin-bottom: 8px; display: block; }
.vt-side-rule-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); padding: 3.5px 0; white-space: nowrap; }
.vt-side-rule-row span:last-child { color: var(--gold); }
.vt-side-acct { display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; margin-top: 8px; }
.vt-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--bd-2); display: grid; place-items: center; font-family: var(--mono); font-size: 0.6875rem; color: var(--gold); }
.vt-acct-name { font-size: 0.7813rem; color: var(--text); white-space: nowrap; line-height: 1.3; }
.vt-acct-tier { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); line-height: 1.3; }

/* ── MAIN ── */
.vt-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; container-type: inline-size; container-name: vtmain; }
.vt-topbar { display: flex; align-items: stretch; border-bottom: 1px solid var(--bd); background: var(--bg-2); }
.vt-top-cell { padding: 12px 18px; border-right: 1px solid var(--bd); min-width: 0; flex: 0 0 auto; }
.vt-top-cell:last-child { border-right: 0; margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.vt-top-l { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 5px; white-space: nowrap; }
.vt-top-v { font-size: 0.9375rem; color: var(--text); font-weight: 500; white-space: nowrap; }
.vt-top-v .dn { font-family: var(--mono); color: var(--good); font-size: 0.75rem; margin-left: 5px; font-weight: 400; }
.vt-pill { display: inline-block; padding: .15rem .5rem; font-family: var(--mono); font-size: 0.6875rem; border-radius: 2px; background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(212,168,90,.3); }
.vt-pill-good { background: rgba(58,122,82,.18); color: var(--good); border-color: rgba(142,193,150,.3); }
.vt-search { background: var(--bg); border: 1px solid var(--bd-2); border-radius: 3px; padding: 7px 11px; color: var(--text); font-family: var(--mono); font-size: 0.75rem; width: 180px; outline: none; }
.vt-search:focus { border-color: var(--forest); }
.vt-search::placeholder { color: var(--faint); }

/* ──────────────────────────────────────────────────────────
   LIVE MARKET WIDGET (topbar) + MARKET CONDITIONS page
   Always-on, connected-to-market feel: session timeline, options
   window, live pulse, eye-catching alert when exceptional.
   ────────────────────────────────────────────────────────── */
.vt-mkt-widget { display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); padding: 0; color: var(--text); overflow: hidden; }
.vt-mkt-live { width: 6px; height: 6px; border-radius: 50%; background: var(--good); position: relative; flex: none; }
.vt-mkt-live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--good); opacity: .6; animation: vt-ping 2s var(--ease) infinite; }
@keyframes vt-ping { 0% { transform: scale(.6); opacity: .7; } 70%,100% { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vt-mkt-live::after { animation: none; } }

/* ── MARKET PULSE — navbar instrument ──────────────────────────────
   A live, glanceable trading-terminal indicator (not a dashboard). Two
   instruments: a SESSION timeline with a live now-marker, and a 5-step
   ENVIRONMENT intensity ladder. Visual-first; states are observational
   (Calm→Exceptional), never advice. Tone drives one accent color (--mp-c);
   notable tones raise emphasis + reveal an event flag. */
.vt-mp { --mp-c: var(--good);
  display: flex; align-items: center; gap: 16px; flex: none; min-width: 0; height: 100%; padding: 0 18px; overflow: hidden;
  background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; text-align: left;
  font-family: var(--sans); color: var(--text); transition: background .25s var(--ease), border-color .25s var(--ease); }
.vt-mp:hover { background: var(--bg-3); }
.vt-mp:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* live connection pulse */
.vt-mp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--mp-c); position: relative; flex: none; }
.vt-mp-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--mp-c); opacity: .5; animation: vt-ping 2.4s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .vt-mp-live::after { animation: none; } }

/* ── SESSION instrument — a fixed-size element of the anchor. A stable minimum
   keeps the timeline a consistent, readable length across every screen width;
   it never stretches, so OPEN always sits right beside its countdown. ── */
.vt-mp-sess { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 118px; }
.vt-mp-sess-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; white-space: nowrap; overflow: hidden; }
.vt-mp-sess-state { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 600; flex: none; }
.vt-mp-sess-count { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-mp[data-sess="closed"] .vt-mp-sess-state { color: var(--mute); }
.vt-mp-track { position: relative; height: 7px; border-radius: 4px; overflow: hidden; display: flex; background: var(--bg); box-shadow: inset 0 0 0 1px var(--bd); }
.vt-mp-track .seg { height: 100%; }
.vt-mp-track .seg[data-s="pre"] { background: rgba(138,160,192,.28); }
.vt-mp-track .seg[data-s="reg"] { background: rgba(142,193,150,.32); }
.vt-mp-track .seg[data-s="aft"] { background: rgba(212,168,90,.26); }
.vt-mp-track .elapsed { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.09)); border-right: 1px solid rgba(255,255,255,.12); }
.vt-mp-track .opt { position: absolute; top: 0; bottom: 0; border: 1px solid rgba(142,193,150,.55); border-radius: 3px; pointer-events: none; }
.vt-mp-track .now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--gold); box-shadow: 0 0 6px var(--gold); border-radius: 2px; }
/* holiday / early-close session treatments */
.vt-mp[data-day="holiday"] .vt-mp-track { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, var(--bg-3) 4px, var(--bg-3) 8px); }
.vt-mp[data-day="holiday"] .vt-mp-track .seg, .vt-mp[data-day="holiday"] .vt-mp-track .opt { opacity: .22; }
.vt-mp[data-day="earlyclose"] .vt-mp-track .now { background: var(--bad); box-shadow: 0 0 6px var(--bad); }

/* divider */
.vt-mp-div { width: 1px; align-self: stretch; margin: 13px 0; background: var(--bd); flex: none; }

/* ── ENVIRONMENT instrument ── */
.vt-mp-env { display: flex; align-items: center; gap: 10px; flex: none; }
.vt-mp-ladder { display: flex; align-items: flex-end; gap: 2.5px; height: 19px; }
.vt-mp-ladder i { width: 4px; border-radius: 1.5px; background: var(--bd-2); transition: box-shadow .3s var(--ease); }
.vt-mp-ladder i:nth-child(1) { height: 36%; }
.vt-mp-ladder i:nth-child(2) { height: 52%; }
.vt-mp-ladder i:nth-child(3) { height: 68%; }
.vt-mp-ladder i:nth-child(4) { height: 84%; }
.vt-mp-ladder i:nth-child(5) { height: 100%; }
.vt-mp-ladder i.on { background: var(--mp-c); }
.vt-mp-env-meta { display: flex; flex-direction: column; gap: 3px; }
.vt-mp-env-state { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-c); font-weight: 600; white-space: nowrap; }
.vt-mp-env-vix { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; }

/* ── EVENT flag (conditional) ── */
.vt-mp-event { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.625rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none; border: 1px solid var(--bd-2); color: var(--mute); }
.vt-mp-event b { color: var(--text); font-weight: 600; letter-spacing: .04em; }
.vt-mp-event .d { color: var(--mute); margin-left: 1px; }
.vt-mp-event .ic { font-size: 0.5rem; }
.vt-mp-event.today { border-color: rgba(212,168,90,.45); color: var(--gold); background: rgba(212,168,90,.08); }
.vt-mp-event.today b, .vt-mp-event.today .d { color: var(--gold); }
.vt-mp-event.alert { border-color: rgba(201,138,114,.5); color: var(--bad); background: rgba(201,138,114,.1); }
.vt-mp-event.alert b, .vt-mp-event.alert .d { color: var(--bad); }
.vt-mp-event.alert .ic { animation: vt-flag 1.2s ease-in-out infinite; }
@keyframes vt-flag { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .vt-mp-event.alert .ic { animation: none; } }

/* CTA */
.vt-mp-cta { font-family: var(--sans); font-size: 1.0625rem; line-height: 1; color: var(--mute); flex: none; transition: color .2s var(--ease), transform .2s var(--ease); }
.vt-mp:hover .vt-mp-cta { color: var(--mp-c); transform: translateX(2px); }

/* demo toggle (kit only) */
.vt-mp-demo { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: none; border: 1px solid var(--bd-2); border-radius: 999px; padding: 3px 9px; cursor: pointer; white-space: nowrap; flex: none; }
.vt-mp-demo:hover { color: var(--text); border-color: var(--mute); }

/* tone accents — calm/normal subdued; active+ raise emphasis */
.vt-mp[data-tone="calm"]        { --mp-c: #8fc2a0; }
.vt-mp[data-tone="normal"]      { --mp-c: var(--good); }
.vt-mp[data-tone="active"]      { --mp-c: var(--gold); }
.vt-mp[data-tone="elevated"]    { --mp-c: var(--gold); border-left-color: rgba(212,168,90,.5); background: linear-gradient(90deg, rgba(212,168,90,.08), transparent 55%); }
.vt-mp[data-tone="exceptional"] { --mp-c: var(--bad); border-left-color: var(--bad); background: linear-gradient(90deg, rgba(201,138,114,.12), transparent 55%); }
.vt-mp[data-tone="elevated"] .vt-mp-live::after,
.vt-mp[data-tone="exceptional"] .vt-mp-live::after { animation-duration: 1.2s; }
.vt-mp[data-tone="exceptional"] .vt-mp-ladder i.on { box-shadow: 0 0 5px var(--mp-c); }

/* anchor, not a cascade — the widget is fixed (flex: none) and holds ONE
   composition across every desktop and tablet width, so resizing the window
   never reshuffles it. Only when the bar is compressed to genuinely mobile
   widths does it shed, in strict priority order — kit demo + chevron + VIX,
   then event detail — always degrading to a clean cluster rather than a cut
   edge. Last things standing: the session timeline + environment ladder &
   state. (The search field flexes on its own via flex: 0 1 150px.) */
@container vtmain (max-width: 560px) { .vt-mp-demo, .vt-mp-cta, .vt-mp-env-vix { display: none; } }
@container vtmain (max-width: 440px) { .vt-mp-event .d { display: none; } .vt-mp { gap: 11px; padding: 0 12px; } }
/* fallback for browsers without container queries (keyed to viewport ≈ main+232) */
@supports not (container-type: inline-size) {
  @media (max-width: 792px) { .vt-mp-demo, .vt-mp-cta, .vt-mp-env-vix { display: none; } }
  @media (max-width: 672px) { .vt-mp-event .d { display: none; } .vt-mp { gap: 11px; padding: 0 12px; } }
}

/* Top bar on compact / mobile widths (realized F8 follow-up) — the Market Pulse
   is flex:none (it won't shrink), so it and the ticker search can't share a
   phone-width row. Below the pulse's own shed point the bar STACKS: the pulse
   keeps the top row and the search wraps to a full-width row beneath it (rather
   than being crushed). The pulse still sheds its event flag, and on the narrowest
   phones its session countdown, so its row's core — session timeline +
   environment ladder & state — never clips. */
@container vtmain (max-width: 560px) {
  .vt-topbar { flex-wrap: wrap; }
  .vt-mp { height: auto; padding-top: 11px; padding-bottom: 11px; }
  .vt-topbar > form.vt-top-cell { flex: 1 0 100%; margin-left: 0; border-top: 1px solid var(--bd); }
  .vt-topbar > form.vt-top-cell .vt-search { flex: 1 1 auto; width: auto; }
}
@container vtmain (max-width: 480px) { .vt-mp-event { display: none; } }
@container vtmain (max-width: 360px) { .vt-mp-sess-count { display: none; } }
@supports not (container-type: inline-size) {
  @media (max-width: 792px) {
    .vt-topbar { flex-wrap: wrap; }
    .vt-mp { height: auto; padding-top: 11px; padding-bottom: 11px; }
    .vt-topbar > form.vt-top-cell { flex: 1 0 100%; margin-left: 0; border-top: 1px solid var(--bd); }
    .vt-topbar > form.vt-top-cell .vt-search { flex: 1 1 auto; width: auto; }
  }
  @media (max-width: 712px) { .vt-mp-event { display: none; } }
  @media (max-width: 592px) { .vt-mp-sess-count { display: none; } }
}

/* ── MARKET CONDITIONS PAGE ── */
.vt-mc { max-width: 1100px; }
.vt-mc-verdict { background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--bd); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; }
.vt-mc-regime-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vt-mc-verdict-h { font-family: var(--serif); font-size: 1.625rem; letter-spacing: -.012em; color: var(--text); margin: 12px 0 8px; line-height: 1.15; }
.vt-mc-verdict-h em { font-style: italic; color: var(--gold); }
.vt-mc-verdict-p { font-size: 0.875rem; color: var(--mute); line-height: 1.6; max-width: 72ch; }

/* full-day session schedule */
.vt-mc-sched { margin: 8px 0 4px; }
.vt-mc-sched-bar { position: relative; height: 38px; border-radius: 6px; overflow: hidden; display: flex; background: var(--bg); border: 1px solid var(--bd); }
.vt-mc-sched-seg { height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text); border-right: 1px solid var(--bd); position: relative; }
.vt-mc-sched-seg:last-child { border-right: 0; }
.vt-mc-sched-seg[data-s="pre"] { background: rgba(138,160,192,.18); color: var(--admin, #8aa0c0); }
.vt-mc-sched-seg[data-s="reg"] { background: rgba(142,193,150,.16); color: var(--good); }
.vt-mc-sched-seg[data-s="aft"] { background: rgba(212,168,90,.14); color: var(--gold); }
.vt-mc-sched-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--gold); box-shadow: 0 0 6px var(--gold); z-index: 2; }
.vt-mc-sched-now::after { content: "NOW"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.5rem; color: var(--gold); }
.vt-mc-sched-ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.5625rem; color: var(--faint); margin-top: 6px; }
.vt-mc-sched-opt { position: absolute; top: 2px; bottom: 2px; border: 1.5px dashed rgba(142,193,150,.6); border-radius: 4px; pointer-events: none; z-index: 1; }
.vt-mc-cal-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.vt-mc-cal-chip { font-family: var(--mono); font-size: 0.6875rem; padding: 5px 10px; border-radius: 4px; border: 1px solid var(--bd-2); color: var(--text); display: inline-flex; gap: 7px; align-items: center; }
.vt-mc-cal-chip .d { color: var(--gold); }
.vt-mc-cal-chip[data-hol="1"] { border-color: rgba(201,138,114,.4); color: var(--bad); }

/* factor grid */
.vt-mc-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.vt-mc-factor { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 15px 16px; }
.vt-mc-factor-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vt-mc-factor-t { font-size: 0.875rem; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; }
.vt-mc-factor-v { font-family: var(--mono); font-size: 0.9375rem; }
.vt-mc-factor-d { font-size: 0.75rem; color: var(--mute); line-height: 1.5; margin-top: 7px; }
.vt-mc-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 9px; }
.vt-mc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vt-mc-status.fav { color: var(--good); } .vt-mc-status.neu { color: var(--mute); } .vt-mc-status.cau { color: var(--gold); } .vt-mc-status.adv { color: var(--bad); }
.vt-mc-meter { height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin-top: 10px; }
.vt-mc-meter > div { height: 100%; border-radius: 3px; }

.vt-content { padding: 26px 30px; overflow-y: auto; flex: 1; }
.vt-page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.vt-page-title { font-family: var(--serif); font-size: 1.75rem; letter-spacing: -.014em; color: var(--text); }
.vt-page-sub { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* ── PANELS / CARDS ── */
.vt-grid { display: grid; gap: 16px; }
.vt-grid-3 { grid-template-columns: repeat(3,1fr); }
.vt-grid-2a { grid-template-columns: 1.5fr 1fr; }
.vt-panel { background: var(--bg-2); border: 1px solid var(--bd); border-radius: 6px; padding: 18px; }
.vt-panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.vt-panel-title { font-size: 0.8125rem; color: var(--text); font-weight: 500; }
.vt-stat-big { font-family: var(--serif); font-size: 2.125rem; line-height: 1; letter-spacing: -.01em; margin-top: 6px; }
.vt-stat-row { display: flex; gap: 26px; }
.vt-stat .vt-stat-num { font-family: var(--serif); font-size: 1.375rem; line-height: 1; margin-top: 5px; color: var(--text); }
.vt-bar { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 14px; }
.vt-bar-fill { height: 100%; background: linear-gradient(90deg, var(--forest), var(--gold)); }

/* scoring list */
.vt-list { display: flex; flex-direction: column; gap: 2px; }
.vt-list-row { display: grid; grid-template-columns: 56px 1fr 44px 34px; gap: 12px; align-items: center; padding: 7px 6px; border-radius: 3px; cursor: pointer; transition: background var(--ease) .15s; }
.vt-list-row:hover { background: var(--bg-3); }
.vt-list-tk { font-family: var(--mono); font-size: 0.8125rem; color: var(--text); }
.vt-minibar { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.vt-minibar > div { height: 100%; background: var(--forest); }
.vt-list-sc { font-family: var(--mono); font-size: 0.75rem; color: var(--gold); text-align: right; }
.vt-list-g { font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); text-align: right; }

/* tables */
.vt-table { width: 100%; }
.vt-thead, .vt-trow { display: grid; align-items: center; }
.vt-thead { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 0 0 10px; border-bottom: 1px solid var(--bd); }
.vt-trow { padding: 11px 0; border-bottom: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); font-size: 0.8125rem; cursor: pointer; transition: background var(--ease) .15s; }
.vt-trow:hover { background: var(--bg-3); }
.vt-trow.is-fail { color: var(--mute); }
.vt-trow.is-fail .vt-cell-tk { color: var(--mute); }
.vt-cell-tk { font-family: var(--mono); color: var(--text); }
.vt-cell-m { font-family: var(--mono); }
.vt-gates-dot { display: inline-flex; gap: 3px; }
.vt-gates-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: inline-block; }
.vt-gates-dot i.off { background: var(--bd-2); }

/* screener progress */
.vt-scan-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.vt-scan-track { flex: 1; height: 4px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.vt-scan-track > div { height: 100%; background: var(--gold); transition: width 1s linear; }
.vt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.vt-chip { font-family: var(--mono); font-size: 0.6875rem; padding: 5px 10px; border-radius: 3px; border: 1px solid var(--bd-2); color: var(--mute); cursor: pointer; background: none; transition: all var(--ease) .15s; }
.vt-chip:hover { color: var(--text); border-color: var(--forest); }
.vt-chip.is-on { background: var(--gold-soft); color: var(--gold); border-color: rgba(212,168,90,.4); }

/* analyzer */
.vt-az-head { display: grid; grid-template-columns: auto auto auto 1fr; gap: 30px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--bd); margin-bottom: 20px; }
.vt-az-big { font-family: var(--serif); font-size: 2.5rem; line-height: 1; letter-spacing: -.01em; margin-top: 6px; }
.vt-signals { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; }
.vt-sig { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vt-sig-bar { height: 90px; width: 14px; border-radius: 2px; background: var(--bg-3); display: flex; align-items: flex-end; overflow: hidden; }
.vt-sig-bar > div { width: 100%; background: linear-gradient(180deg, var(--gold), var(--forest)); border-radius: 2px; }
.vt-struct-row { display: grid; grid-template-columns: 1.6fr .8fr .8fr auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--bd); border-radius: 4px; margin-bottom: 8px; transition: border-color var(--ease) .15s; cursor: pointer; }
.vt-struct-row:hover { border-color: var(--bd-2); background: var(--bg-3); }
.vt-struct-row.is-top { border-color: rgba(212,168,90,.35); }
.vt-struct-name { font-family: var(--serif); font-size: 1rem; color: var(--text); }
.vt-ai { background: var(--bg-3); border: 1px solid var(--bd); border-left: 2px solid var(--gold); border-radius: 4px; padding: 16px 18px; margin-top: 18px; }
.vt-ai .tiny { margin-bottom: 8px; display: block; }
.vt-ai p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text); max-width: 70ch; }

.vt-btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-size: 0.7813rem; font-weight: 500; padding: .5rem 1rem; border-radius: 3px; border: 1px solid var(--bd-2); background: none; color: var(--text); cursor: pointer; transition: all var(--ease) .18s; white-space: nowrap; }
.vt-btn:hover { background: var(--bg-3); border-color: var(--forest); }
.vt-btn-gold { background: var(--gold); color: #1a1208; border-color: var(--gold); }
.vt-btn-gold:hover { background: #e0b76a; border-color: #e0b76a; }

.vt-note { font-size: 0.6875rem; color: var(--faint); line-height: 1.5; margin-top: 18px; max-width: 80ch; font-family: var(--mono); }
.vt-note a { color: var(--mute); }

/* ──────────────────────────────────────────────────────────
   SEMANTIC TOKENS — score / signal / regime (teardown 06)
   Analyzer + screener MUST share these thresholds.
   ────────────────────────────────────────────────────────── */
:root {
  --score-green:  #8ec196;  /* v ≥ 0.60 */
  --score-light:  #b8c8a0;  /* ≥ 0.45 */
  --score-amber:  #d4a85a;  /* ≥ 0.35 */
  --score-red:    #c98a72;  /* else */
  --sig-strong:   #8ec196;  /* ≥ 0.65 */
  --sig-mod:      #cfd9c4;  /* ≥ 0.40 */
  --sig-weak:     #5a6f62;  /* else */
  --pl-pos:       #8ec196;
  --pl-neg:       #c98a72;
}

/* ──────────────────────────────────────────────────────────
   DISCLOSURE COMPONENTS (§1–§13)  — governance layer.
   Patterns + placement only. Verbatim TEXT is injected from the
   governance system (see legal-bindings.md). In this kit the copy
   is marked [illustrative] — never treat it as canonical.
   ────────────────────────────────────────────────────────── */

/* §9 — Persistent disclaimer band (top of /analyze, /scan; non-dismissible) */
.vt-disc-band {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin-bottom: 18px;
  background: var(--bg-2); border: 1px solid var(--bd);
  border-left: 2px solid var(--gold); border-radius: 4px;
}
.vt-disc-band .tiny { color: var(--gold); }
.vt-disc-band span.txt { font-size: 0.7188rem; color: var(--mute); line-height: 1.4; }

/* §3 — Score-card disclaimer chip */
.vt-disc-chip {
  display: inline-block; font-family: var(--mono); font-size: 0.5938rem;
  letter-spacing: .06em; color: var(--faint);
  border: 1px solid var(--bd); border-radius: 2px; padding: 2px 7px;
}

/* §6 — Data-freshness badge (5 states; NO vendor name) */
.vt-fresh {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .08em;
  /* §6 freshness states render in their verbatim casing (LIVE / Recent /
     Last close / Stale / 15-min delayed) — NOT blanket-uppercased. The DOM
     text is the canonical §6 string; only LIVE is all-caps by design. */
  padding: 2px 7px; border-radius: 2px;
  border: 1px solid var(--bd-2); color: var(--mute); white-space: nowrap;
}
.vt-fresh::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vt-fresh[data-state="live"]    { color: var(--good);  border-color: rgba(142,193,150,.35); }
.vt-fresh[data-state="recent"]  { color: var(--gold);  border-color: rgba(212,168,90,.35); }
.vt-fresh[data-state="close"]   { color: var(--mute); }
.vt-fresh[data-state="delayed"] { color: var(--mute); }
.vt-fresh[data-state="stale"]   { color: var(--bad);  border-color: rgba(201,138,114,.35); }

/* §5 — Kelly sizing caveat (proximate to any sizing output) */
.vt-kelly-caveat {
  font-size: 0.6875rem; line-height: 1.5; color: var(--faint);
  font-family: var(--mono); margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--bd);
}

/* §4 — AI-Generated label (wraps every AI thesis; mutually exclusive with §12) */
.vt-ai-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.vt-ai-label::before { content: "✦"; }

/* §12 — AI temporarily-unavailable banner (replaces §4 when AI rejected) */
.vt-ai-unavail {
  background: var(--bg-3); border: 1px solid var(--bd);
  border-left: 2px solid var(--mute); border-radius: 4px;
  padding: 12px 14px; font-size: 0.7813rem; color: var(--mute); line-height: 1.55;
}

/* §1 — Master Disclaimer footer (every authed page) */
.vt-disc-footer {
  border-top: 1px solid var(--bd); background: var(--bg-2);
  font-family: var(--mono); font-size: 0.625rem;
  line-height: 1.55; color: var(--faint);
}
.vt-disc-footer a { color: var(--mute); text-decoration: underline; }
.vt-disc-footer .prov { color: var(--bd-2); font-style: normal; }
/* compact collapsible variant — keeps the message, reclaims vertical space */
.vt-disc-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 7px 30px; }
.vt-disc-details > summary::-webkit-details-marker { display: none; }
.vt-disc-lead { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.vt-disc-links { display: flex; gap: 8px; flex: none; }
.vt-disc-more { flex: none; color: var(--gold); }
.vt-disc-details[open] .vt-disc-more::after { content: " ▴"; }
.vt-disc-details:not([open]) .vt-disc-more::after { content: " ▾"; }
.vt-disc-full { padding: 0 30px 10px; max-width: 120ch; color: var(--faint); }
@media (max-width: 860px) {
  .vt-disc-details > summary { padding: 7px 16px; }
  .vt-disc-links { display: none; }
  .vt-disc-full { padding: 0 16px 70px; }
}

/* Locked / upsell breadcrumb (free-tier gating — Phase 1 foundation, stub here) */
.vt-lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold); cursor: pointer;
}
.vt-lock::before { content: "🔒"; filter: grayscale(1) opacity(.7); font-size: 0.5625rem; }

/* ──────────────────────────────────────────────────────────
   PHASE 1 — FOUNDATIONS PRIMITIVES
   ────────────────────────────────────────────────────────── */

/* Tabs */
.vt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); }
.vt-tab { font-family: var(--sans); font-size: 0.8125rem; color: var(--mute); background: none; border: 0; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease) .18s, border-color var(--ease) .18s; }
.vt-tab:hover { color: var(--text); }
.vt-tab.is-active { color: var(--text); border-bottom-color: var(--gold); }

/* Form kit */
.vt-field { display: flex; flex-direction: column; gap: 6px; }
.vt-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.vt-input, .vt-number {
  background: var(--bg); border: 1px solid var(--bd-2); border-radius: 3px;
  padding: 8px 11px; color: var(--text); font-family: var(--mono); font-size: 0.8125rem; outline: none;
  transition: border-color var(--ease) .15s;
}
.vt-input:focus, .vt-number:focus { border-color: var(--forest); }
.vt-number[data-modified="1"] { border-color: var(--gold); }
.vt-help { font-size: 0.6563rem; color: var(--faint); }
.vt-validation { font-size: 0.6875rem; color: var(--bad); }

/* Toggle / switch */
.vt-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; background: none; border: 0; padding: 0; font-family: var(--sans); }
.vt-switch-track { width: 38px; height: 22px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--bd-2); position: relative; transition: background var(--ease) .18s, border-color var(--ease) .18s; flex: none; }
.vt-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--mute); transition: transform var(--ease) .2s, background var(--ease) .2s; }
.vt-switch.is-on .vt-switch-track { background: rgba(212,168,90,.25); border-color: var(--gold); }
.vt-switch.is-on .vt-switch-track::after { transform: translateX(16px); background: var(--gold); }
.vt-switch-label { font-size: 0.8125rem; color: var(--text); }

/* Radio / check */
.vt-radio-row, .vt-check-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; font-size: 0.8125rem; color: var(--text); }
.vt-dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--bd-2); flex: none; display: grid; place-items: center; }
.vt-radio-row.is-on .vt-dot { border-color: var(--gold); }
.vt-radio-row.is-on .vt-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.vt-box { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--bd-2); flex: none; display: grid; place-items: center; font-size: 0.625rem; color: var(--gold); }
.vt-check-row.is-on .vt-box { border-color: var(--gold); }

/* Modal */
.vt-modal-overlay { position: fixed; inset: 0; background: rgba(5,11,8,.66); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 100; padding: 24px; }
.vt-modal { background: var(--bg-2); border: 1px solid var(--bd-2); border-radius: 8px; max-width: 460px; width: 100%; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); overflow: hidden; }
.vt-modal.vt-modal--wide { max-width: 760px; max-height: 88vh; overflow-y: auto; }
.vt-modal-head { padding: 20px 22px 0; }
.vt-modal-eyebrow { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vt-modal-title { font-family: var(--serif); font-size: 1.375rem; letter-spacing: -.01em; color: var(--text); margin-top: 8px; }
.vt-modal-body { padding: 14px 22px 0; font-size: 0.8438rem; line-height: 1.6; color: var(--mute); }
.vt-modal-refs { margin: 14px 0 0; padding: 12px 14px; background: var(--bg-3); border: 1px solid var(--bd); border-radius: 4px; font-size: 0.7188rem; color: var(--mute); }
.vt-modal-refs a { color: var(--gold); text-decoration: underline; }
.vt-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 22px 22px; }

/* Banners (generic + variants) */
.vt-banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 4px; font-size: 0.7813rem; line-height: 1.5; border: 1px solid var(--bd); background: var(--bg-2); }
.vt-banner .tiny { flex: none; }
.vt-banner[data-tone="warn"] { border-left: 2px solid var(--gold); }
.vt-banner[data-tone="warn"] .tiny { color: var(--gold); }
.vt-banner[data-tone="mute"] { border-left: 2px solid var(--mute); color: var(--mute); }
.vt-banner[data-tone="draft"] { border-left: 2px solid var(--score-amber); }
.vt-banner[data-tone="draft"] .tiny { color: var(--score-amber); }

/* Empty state */
.vt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }
.vt-empty-glyph { font-family: var(--mono); font-size: 1.625rem; color: var(--bd-2); margin-bottom: 12px; }
.vt-empty-title { font-family: var(--serif); font-size: 1.1875rem; color: var(--text); margin-bottom: 8px; }
.vt-empty-body { font-size: 0.8125rem; color: var(--mute); max-width: 42ch; line-height: 1.6; margin-bottom: 16px; }

/* Locked feature — free-tier teaser */
.vt-teaser { position: relative; border: 1px dashed var(--bd-2); border-radius: 6px; padding: 18px; background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); }
.vt-teaser-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.vt-teaser-title { font-size: 0.8438rem; color: var(--text); }
.vt-teaser-sub { font-size: 0.7188rem; color: var(--mute); margin-top: 3px; }
.vt-breadcrumb { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.75rem; font-weight: 500; color: var(--gold); cursor: pointer; white-space: nowrap; }
.vt-breadcrumb:hover { color: var(--gold-soft); }

/* Account scope control */
.vt-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-scope-btn { font-family: var(--sans); font-size: 0.7813rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bd-2); background: none; color: var(--mute); cursor: pointer; transition: all var(--ease) .15s; white-space: nowrap; }
.vt-scope-btn:hover { color: var(--text); border-color: var(--forest); }
.vt-scope-btn.is-active { background: var(--bg-3); color: var(--text); border-color: var(--gold); }
.vt-scope-btn .b { color: var(--faint); font-family: var(--mono); font-size: 0.625rem; margin-left: 6px; }
.vt-scope-btn.is-active .b { color: var(--gold); }

/* Metric stat + benchmark */
.vt-metric { display: flex; flex-direction: column; gap: 4px; }
.vt-metric-val { font-family: var(--serif); font-size: 1.875rem; line-height: 1; letter-spacing: -.01em; color: var(--text); }
.vt-metric-val.pos { color: var(--pl-pos); }
.vt-metric-val.neg { color: var(--pl-neg); }
.vt-bench { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-family: var(--mono); font-size: 0.6563rem; color: var(--mute); }
.vt-bench span b { color: var(--text); font-weight: 500; }
.vt-bench .beat { color: var(--pl-pos); }
.vt-bench .miss { color: var(--pl-neg); }

/* Ticker rollup (ticker summary → per-account breakdown) */
.vt-rollup { border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.vt-rollup-head { display: grid; grid-template-columns: 90px 1fr 120px 110px 28px; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; transition: background var(--ease) .15s; }
.vt-rollup-roi { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.vt-rollup-uroi { font-size: 0.625rem; }
.vt-rollup-head:hover { background: var(--bg-3); }
.vt-rollup-tk { font-family: var(--mono); font-size: 0.9375rem; color: var(--text); }
.vt-rollup-meta { font-size: 0.7188rem; color: var(--mute); }
.vt-rollup-chev { font-family: var(--mono); color: var(--mute); transition: transform var(--ease) .2s; text-align: center; }
.vt-rollup.is-open .vt-rollup-chev { transform: rotate(90deg); }
.vt-rollup-detail { overflow: hidden; max-height: 0; transition: max-height var(--ease) .3s; }
.vt-rollup.is-open .vt-rollup-detail { max-height: 640px; }
.vt-rollup-detail-inner { overflow: hidden; }
.vt-acct-row { display: grid; grid-template-columns: 1fr 120px 110px 28px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--bd); font-size: 0.7813rem; background: var(--bg); }
.vt-acct-where { display: flex; flex-direction: column; gap: 2px; }
.vt-acct-brk { color: var(--text); }
.vt-acct-name { font-family: var(--mono); font-size: 0.6563rem; color: var(--faint); }
.vt-acct-size { font-family: var(--mono); color: var(--mute); text-align: right; }

/* ── InfoTip (novice-approachable explanations) ── */
.vt-info { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.vt-info-trigger { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--bd-2); color: var(--mute); font-size: 0.5625rem; font-family: var(--serif); font-style: italic; cursor: help; background: none; padding: 0; margin-left: 5px; transition: color var(--ease) .15s, border-color var(--ease) .15s; }
.vt-info-trigger:hover, .vt-info-trigger:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; }
.vt-info-pop { position: absolute; bottom: calc(100% + 8px); left: 0; width: 230px; max-width: min(230px, calc(100vw - 32px)); background: var(--bg-3); border: 1px solid var(--bd-2); border-radius: 6px; padding: 10px 12px; font-family: var(--sans); font-size: 0.7188rem; line-height: 1.5; color: var(--text); box-shadow: 0 14px 34px -14px rgba(0,0,0,.7); opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .15s, transform .15s; z-index: 60; text-transform: none; letter-spacing: normal; font-weight: 400; white-space: normal; }
.vt-info-pop[data-align="end"] { left: auto; right: 0; }
.vt-info:hover .vt-info-pop, .vt-info:focus-within .vt-info-pop { opacity: 1; visibility: visible; transform: translateY(0); }
/* fixed variant — escapes overflow/clip containers; fully scrollable so all text shows */
.vt-info-pop.is-fixed { position: fixed; left: auto; right: auto; top: auto; bottom: auto; opacity: 1; visibility: visible; transform: none; transition: none; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vt-info-pop b { color: var(--gold); display: block; margin-bottom: 4px; font-weight: 500; }

/* ── Suitability hero (Home first-thing read) ── */
.vt-suit-panel { background: linear-gradient(180deg, var(--bg-2), var(--bg-3)); border: 1px solid var(--bd); border-radius: 8px; padding: 22px 24px; }
.vt-suit-regime { display: inline-flex; align-items: center; gap: 9px; }
.vt-suit-pill { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; padding: 3px 9px; border-radius: 3px; }
.vt-suit-verdict { font-family: var(--serif); font-size: 1.6875rem; letter-spacing: -.012em; color: var(--text); margin: 12px 0 8px; line-height: 1.15; }
.vt-suit-verdict em { font-style: italic; color: var(--gold); }
.vt-suit-line { font-size: 0.8438rem; color: var(--mute); line-height: 1.6; max-width: 64ch; }
.vt-suit-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-top: 1px solid var(--bd); }
.vt-suit-cell { padding: 12px 14px 0; border-right: 1px solid var(--bd); }
.vt-suit-cell:last-child { border-right: 0; padding-right: 0; }
.vt-suit-cell .tiny { margin-bottom: 5px; display: block; }
.vt-suit-cell .v { font-size: 0.875rem; color: var(--text); }

/* ── Actions queue ── */
.vt-aq { display: flex; flex-direction: column; gap: 18px; }
.vt-aq-tier-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.vt-aq-tier[data-tier="attention"] .vt-aq-tier-label { color: var(--bad); }
.vt-aq-tier[data-tier="today"] .vt-aq-tier-label { color: var(--gold); }
.vt-aq-tier[data-tier="planned"] .vt-aq-tier-label { color: var(--mute); }
.vt-aq-tier-count { color: var(--faint); }
.vt-aq-list { display: flex; flex-direction: column; gap: 8px; }
.vt-aq-row { display: grid; grid-template-columns: 58px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--bd); border-radius: 5px; background: var(--bg-2); transition: border-color var(--ease) .15s; cursor: pointer; }
.vt-aq-row:hover { border-color: var(--bd-2); }
.vt-aq-tier[data-tier="attention"] .vt-aq-row { border-left: 2px solid var(--bad); }
.vt-aq-tier[data-tier="today"] .vt-aq-row { border-left: 2px solid var(--gold); }
.vt-aq-tk { font-family: var(--mono); font-size: 0.875rem; color: var(--text); }
.vt-aq-desc { font-size: 0.7813rem; color: var(--mute); line-height: 1.4; }
.vt-aq-where { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); margin-top: 2px; }
.vt-aq-roi { font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); text-align: right; white-space: nowrap; }
.vt-aq-chip { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .08em; padding: 4px 9px; border-radius: 3px; border: 1px solid var(--bd-2); color: var(--mute); white-space: nowrap; }
.vt-aq-chip[data-kind="CLOSE"] { color: var(--gold); border-color: rgba(212,168,90,.35); }
.vt-aq-chip[data-kind="ROLL"] { color: var(--good); border-color: rgba(142,193,150,.3); }
.vt-aq-chip[data-kind="WATCH"] { color: var(--mute); }
.vt-aq-chip[data-kind="CC"], .vt-aq-chip[data-kind="CSP"] { color: var(--forest); border-color: var(--bd-2); }

/* ── Home layout (responsive) ── */
.vt-home { display: grid; gap: 18px; grid-template-columns: 1fr; }
.vt-home-main, .vt-home-rail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vt-home-sec-t { font-family: var(--serif); font-size: 1.1875rem; letter-spacing: -.01em; color: var(--text); display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto; }
.vt-home-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vt-home-sec-link { font-family: var(--sans); font-size: 0.75rem; color: var(--gold); cursor: pointer; white-space: nowrap; }
@media (min-width: 1040px) {
  .vt-home { grid-template-columns: 1.7fr 1fr; align-items: start; }
}

/* ── Responsive shell: collapse sidebar + dense top strip on mobile ── */
@media (max-width: 860px) {
  .vt-app { grid-template-columns: 1fr; }
  .vt-side { display: none; }
  .vt-content { padding: 18px 16px; }
  .vt-top-cell:nth-child(3), .vt-top-cell:nth-child(4) { display: none; }
  .vt-top-cell:last-child .vt-search { width: 120px; }
  .vt-suit-strip { grid-template-columns: 1fr; }
  .vt-suit-cell { border-right: 0; border-bottom: 1px solid var(--bd); padding: 10px 0; }
  .vt-grid-3, .vt-grid-2a { grid-template-columns: 1fr; }
  .vt-rollup-head { grid-template-columns: 70px 1fr 64px 24px; }
  .vt-rollup-head .vt-rollup-meta { display: none; }
  .vt-aq-row { grid-template-columns: 50px 1fr auto; }
  .vt-aq-row .vt-aq-roi { display: none; }
}

/* ── Mobile bottom tab nav (sidebar is hidden ≤860px; this is how nav is reached) ── */
.vt-mobnav { display: none; }
@media (max-width: 860px) {
  .vt-mobnav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: color-mix(in oklab, var(--bg-2) 92%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--bd); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .vt-mobnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 0 8px; min-height: 48px; background: none; border: 0; color: var(--mute); font-family: var(--sans); font-size: 0.625rem; letter-spacing: .02em; cursor: pointer; }
  .vt-mobnav-item.is-active { color: var(--gold); }
  .vt-mobnav-glyph { font-family: var(--mono); font-size: 0.9375rem; line-height: 1; }
  /* Clear the fixed bottom nav, whose height grows by env(safe-area-inset-bottom)
     (line 611) on home-indicator iPhones once viewport-fit=cover is set. */
  .vt-main { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .vt-disc-footer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Market-conditions calendar (multiple upcoming events, each explained) ── */
.vt-cal { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd); }
.vt-cal-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-right: 2px; }
.vt-cal-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.6875rem; padding: 5px 9px; border-radius: 3px; border: 1px solid var(--bd-2); color: var(--text); white-space: nowrap; }
.vt-cal-chip .d { color: var(--gold); }
.vt-cal-chip .vt-info-trigger { margin-left: 1px; }
.vt-suit-cell .v.sub { font-size: 0.6875rem; color: var(--mute); margin-top: 4px; display: block; }

/* ── Compact Iron Rules strip — shown on mobile where the sidebar panel is hidden ── */
.vt-ironrules-strip { display: none; }
@media (max-width: 860px) {
  .vt-ironrules-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 16px; padding: 11px 14px; background: var(--bg-3); border: 1px solid var(--bd); border-radius: 6px; }
  .vt-ironrules-strip .lbl { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); width: 100%; margin-bottom: 3px; }
  .vt-ironrules-strip .ir { font-family: var(--mono); font-size: 0.6875rem; color: var(--text); padding: 3px 8px; border: 1px solid var(--bd-2); border-radius: 3px; }
}

/* ── Topbar: keep right-side controls from overflowing ── */
.vt-top-cell:last-child { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
.vt-top-cell:last-child .vt-search { flex: 0 1 150px; min-width: 0; }

/* ──────────────────────────────────────────────────────────
   PHASE 3a — PORTFOLIO
   ────────────────────────────────────────────────────────── */
.vt-pf-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.vt-pf-summary > div { background: var(--bg-2); padding: 16px 18px; }
@media (max-width: 860px) { .vt-pf-summary { grid-template-columns: repeat(2, 1fr); } }
.vt-pf-tile { display: flex; flex-direction: column; gap: 4px; }
.vt-pf-subrows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bd); }
.vt-pf-subrows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; line-height: 1.35; font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); }
.vt-pf-subrows > div > span:first-child { min-width: 0; }
.vt-pf-subrows > div > span .sub { display: block; color: var(--faint); font-size: 0.625rem; }
.vt-pf-subrows b { color: var(--text); font-weight: 500; white-space: nowrap; }
.vt-pf-subrows b.pos { color: var(--pl-pos); }
.vt-pf-subrows b.neg { color: var(--pl-neg); }

.vt-pf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vt-pf-toolbar-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* segmented control (open/closed/all) */
.vt-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--bd); border-radius: 6px; padding: 3px; }
.vt-seg button { font-family: var(--sans); font-size: 0.8125rem; padding: 5px 13px; border: 0; background: none; color: var(--mute); border-radius: 4px; cursor: pointer; transition: color var(--ease) .15s, background var(--ease) .15s; }
.vt-seg button.is-active { background: var(--bg-3); color: var(--text); }

/* wheel-cycle position card */
.vt-pos { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.vt-pos + .vt-pos { margin-top: 10px; }
.vt-pos-head { display: grid; grid-template-columns: 150px 1fr 130px 120px 26px; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; transition: background var(--ease) .15s; }
.vt-pos-head:hover { background: var(--bg-3); }
.vt-pos-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.vt-pos-id { display: flex; flex-direction: column; gap: 3px; }
.vt-pos-tk { font-family: var(--mono); font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.vt-pos-stage { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; width: fit-content; white-space: nowrap; }
.vt-pos-stage[data-stage="csp"] { color: var(--gold); background: rgba(212,168,90,.12); }
.vt-pos-stage[data-stage="assigned"] { color: var(--bad); background: rgba(201,138,114,.12); }
.vt-pos-stage[data-stage="cc"] { color: var(--good); background: rgba(142,193,150,.14); }
.vt-pos-legs { font-size: 0.8125rem; color: var(--mute); line-height: 1.45; }
.vt-pos-legs b { color: var(--text); font-weight: 500; }
.vt-pos-metric { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.vt-pos-metric .l { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.vt-pos-metric .v { font-family: var(--mono); font-size: 0.875rem; }
.vt-pos-metric .sub { font-family: var(--mono); font-size: 0.625rem; margin-top: 1px; }
.vt-pos-chev { font-family: var(--mono); color: var(--mute); text-align: center; transition: transform var(--ease) .2s; }
.vt-pos.is-open .vt-pos-chev { transform: rotate(90deg); }
.vt-pos-detail { border-top: 1px solid var(--bd); background: var(--bg); padding: 4px 0; }

/* per-account leg rows inside a position */
.vt-leg { display: grid; grid-template-columns: 1fr 130px 120px; gap: 14px; align-items: center; padding: 11px 16px; }
.vt-leg + .vt-leg { border-top: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); }
.vt-leg-where { display: flex; flex-direction: column; gap: 2px; }
.vt-leg-brk { font-size: 0.8125rem; color: var(--text); }
.vt-leg-acct { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }
.vt-leg-struct { font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); margin-top: 2px; }
.vt-leg-m { font-family: var(--mono); font-size: 0.8125rem; text-align: right; }
.vt-leg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--bd); background: var(--bg-2); flex-wrap: wrap; }
.vt-leg-foot .vt-glossary { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }

@media (max-width: 860px) {
  .vt-pos-head { grid-template-columns: 1fr auto 22px; gap: 10px; }
  .vt-pos-head .vt-pos-legs, .vt-pos-head .vt-pos-metric.secondary { display: none; }
  .vt-leg { grid-template-columns: 1fr auto; }
  .vt-leg .vt-leg-m.secondary { display: none; }
}

/* ── Portfolio top-level view tabs (Positions / Actions) ── */
.vt-pf-tabs { margin-bottom: 18px; }

/* ── Roll-chain timeline (wheel-cycle history inside a position) ── */
.vt-chain { padding: 4px 16px 14px; }
.vt-chain-label { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 10px 0 10px; display: flex; align-items: center; gap: 7px; }
.vt-chain-list { position: relative; padding-left: 22px; }
.vt-chain-list::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 1px; background: var(--bd-2); }
.vt-chain-evt { position: relative; padding: 7px 0; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; }
.vt-chain-evt::before { content: ""; position: absolute; left: -19px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--bd-2); }
.vt-chain-evt[data-evt="open"]::before { border-color: var(--gold); }
.vt-chain-evt[data-evt="roll"]::before { border-color: var(--moss); background: var(--moss); }
.vt-chain-evt[data-evt="assigned"]::before { border-color: var(--bad); background: var(--bad); }
.vt-chain-evt[data-evt="cc"]::before { border-color: var(--good); background: var(--good); }
.vt-chain-evt[data-evt="now"]::before { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,90,.18); }
.vt-chain-main { font-size: 0.8125rem; color: var(--text); }
.vt-chain-main .when { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); margin-left: 8px; }
.vt-chain-amt { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }

/* ── Actions queue: detail view (extends the compact home queue) ── */
.vt-aqd-row { display: grid; grid-template-columns: 56px 1fr 132px auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg-2); cursor: pointer; transition: border-color var(--ease) .15s, background var(--ease) .15s; }
.vt-aqd-row + .vt-aqd-row { margin-top: 8px; }
.vt-aqd-row:hover { border-color: var(--bd-2); background: var(--bg-3); }
.vt-aqd-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.vt-aq-tier[data-tier="attention"] .vt-aqd-row { border-left: 2px solid var(--bad); }
.vt-aq-tier[data-tier="today"] .vt-aqd-row { border-left: 2px solid var(--gold); }
.vt-aqd-rule { display: flex; flex-direction: column; gap: 2px; }
.vt-aqd-rule .r { font-size: 0.8125rem; color: var(--text); line-height: 1.4; }
.vt-aqd-rule .sub { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }
.vt-aqd-roi { text-align: right; }
.vt-aqd-roi .l { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.vt-aqd-roi .v { font-family: var(--mono); font-size: 0.8125rem; }
.vt-aqd-actions { display: flex; gap: 6px; align-items: center; }
.vt-aq-chip[data-kind="RECON"] { color: var(--score-amber); border-color: rgba(212,168,90,.35); }
.vt-aq-chip[data-kind="CC"], .vt-aq-chip[data-kind="CSP"] { color: var(--good); border-color: rgba(142,193,150,.3); }

/* read-only action detail popout */
.vt-aqd-detail { border: 1px solid var(--bd-2); border-top: 0; border-radius: 0 0 6px 6px; background: var(--bg); padding: 14px 16px; margin-top: -8px; }
.vt-aqd-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
.vt-aqd-fact .l { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.vt-aqd-fact .v { font-size: 0.8125rem; color: var(--text); }

@media (max-width: 860px) {
  .vt-aqd-row { grid-template-columns: 48px 1fr auto; }
  .vt-aqd-row .vt-aqd-roi { display: none; }
  .vt-aqd-detail-grid { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────────────────
   PHASE 3c — Upload flow · broker link · covered-call · journal
   ────────────────────────────────────────────────────────── */

/* Upload step rail */
.vt-up-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.vt-up-step { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.vt-up-step .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bd-2); display: grid; place-items: center; font-size: 0.625rem; }
.vt-up-step.is-active { color: var(--gold); }
.vt-up-step.is-active .n { border-color: var(--gold); color: var(--gold); }
.vt-up-step.is-done { color: var(--good); }
.vt-up-step.is-done .n { border-color: var(--good); color: var(--good); }
.vt-up-step-sep { flex: 1; height: 1px; background: var(--bd); max-width: 36px; }

/* Two-path chooser (upload CSV / link broker) */
.vt-up-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .vt-up-paths { grid-template-columns: 1fr; } }
.vt-up-path { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.vt-up-path h4 { font-family: var(--serif); font-size: 1.125rem; color: var(--text); margin: 0; font-weight: 400; }
.vt-up-path p { font-size: 0.8125rem; color: var(--mute); line-height: 1.55; margin: 0; flex: 1; }

/* Dropzone */
.vt-drop { border: 1.5px dashed var(--bd-2); border-radius: 8px; background: var(--bg); padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color var(--ease) .15s, background var(--ease) .15s; }
.vt-drop:hover, .vt-drop.is-over { border-color: var(--gold); background: var(--bg-3); }
.vt-drop-glyph { font-family: var(--mono); font-size: 1.5rem; color: var(--mute); margin-bottom: 10px; }
.vt-drop-main { font-size: 0.875rem; color: var(--text); margin-bottom: 4px; }
.vt-drop-sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); }

/* Scalable broker combobox (searchable; >10 brokers; default Auto) */
.vt-combo { position: relative; max-width: 320px; }
.vt-combo-input { width: 100%; background: var(--bg); border: 1px solid var(--bd-2); border-radius: 6px; padding: 9px 32px 9px 12px; color: var(--text); font-family: var(--sans); font-size: 0.8125rem; outline: none; cursor: pointer; }
.vt-combo-input:focus { border-color: var(--forest); }
.vt-combo-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 0.6875rem; pointer-events: none; }
.vt-combo-pop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--bg-2); border: 1px solid var(--bd-2); border-radius: 6px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7); max-height: 240px; overflow-y: auto; padding: 4px; }
.vt-combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8125rem; color: var(--text); }
.vt-combo-opt:hover, .vt-combo-opt.is-active { background: var(--bg-3); }
.vt-combo-opt .tagrec { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.vt-combo-opt .sub { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }
.vt-combo-empty { padding: 10px; font-size: 0.75rem; color: var(--faint); text-align: center; }

/* Broker helper links (shown when a specific broker is chosen) */
.vt-broker-help { border: 1px solid var(--bd); border-left: 2px solid var(--gold); border-radius: 6px; background: var(--bg-3); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vt-broker-help .h { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.vt-broker-help-links { display: flex; gap: 8px; flex-wrap: wrap; }
.vt-broker-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.75rem; color: var(--text); border: 1px solid var(--bd-2); border-radius: 5px; padding: 6px 10px; text-decoration: none; transition: border-color var(--ease) .15s; }
.vt-broker-link:hover { border-color: var(--forest); }
.vt-broker-help .lock { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); }

/* Upload result — success */
.vt-up-result { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 22px 24px; }
.vt-up-result-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.vt-up-result-h .g { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 1rem; flex: none; }
.vt-up-result-h .g.ok { background: rgba(142,193,150,.16); color: var(--good); border: 1px solid rgba(142,193,150,.35); }
.vt-up-result-h .g.warn { background: rgba(212,168,90,.14); color: var(--gold); border: 1px solid rgba(212,168,90,.35); }
.vt-up-result-h .t { font-family: var(--serif); font-size: 1.25rem; color: var(--text); }
.vt-up-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.vt-up-stats > div { background: var(--bg); padding: 12px 14px; }
.vt-up-stats .l { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.vt-up-stats .v { font-family: var(--mono); font-size: 1.125rem; color: var(--text); }
@media (max-width: 720px) { .vt-up-stats { grid-template-columns: 1fr 1fr; } }

/* Upload file rows (bulk) */
.vt-up-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vt-up-file { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg); font-size: 0.8125rem; }
.vt-up-file .fn { font-family: var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-up-file .gly { font-family: var(--mono); }
.vt-up-file[data-st="ok"] .gly { color: var(--good); }
.vt-up-file[data-st="problem"] { border-left: 2px solid var(--score-amber); }
.vt-up-file[data-st="problem"] .gly { color: var(--score-amber); }
.vt-up-file .meta { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; }
.vt-up-file .fix { font-family: var(--sans); font-size: 0.75rem; color: var(--gold); cursor: pointer; background: none; border: 0; padding: 0; white-space: nowrap; }

/* Attention (interrupt) panel */
.vt-up-attn-reason { font-size: 0.8125rem; color: var(--mute); line-height: 1.5; margin: 2px 0 0; }
.vt-up-file-wrap { display: flex; flex-direction: column; }
.vt-up-resolve { border: 1px solid var(--bd-2); border-top: 0; border-radius: 0 0 6px 6px; background: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; margin-top: -1px; }

/* Ambiguous-detection ranked candidate chips (reason='ambiguous') */
.vt-up-cands { display: flex; flex-direction: column; gap: 6px; }
.vt-up-cand { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--bd-2); border-radius: 6px; background: var(--bg-2); cursor: pointer; font-family: var(--sans); }
.vt-up-cand:hover { border-color: var(--forest); }
.vt-up-cand.is-sel { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 9%, var(--bg-2)); }
.vt-up-cand .nm { font-size: 0.8125rem; color: var(--text); white-space: nowrap; }
.vt-up-cand .cf { display: flex; align-items: center; gap: 9px; flex: 1; justify-content: flex-end; }
.vt-up-cand .bar { width: 84px; height: 5px; border-radius: 3px; background: var(--bd); overflow: hidden; }
.vt-up-cand .bar .fill { display: block; height: 100%; border-radius: 3px; background: var(--forest); }
.vt-up-cand.is-sel .bar .fill { background: var(--gold); }
.vt-up-cand .pct { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; min-width: 64px; text-align: right; }
.vt-up-cap-note { font-size: 0.75rem; color: var(--mute); line-height: 1.5; }

/* Capture-flow content-kind toggles */
.vt-up-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.vt-up-kind { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8125rem; color: var(--text); background: var(--bg-2); border: 1px solid var(--bd-2); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.vt-up-kind:hover { border-color: var(--forest); }
.vt-up-kind.is-on { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 9%, var(--bg-2)); }
.vt-up-kind .bx { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--bd-2); font-family: var(--mono); font-size: 0.625rem; color: #1a1208; }
.vt-up-kind.is-on .bx { background: var(--gold); border-color: var(--gold); }

/* Success-state quality nudge (format_quality_hint='limited') — calm forest, not a problem */
.vt-up-nudge { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--bd); border-left: 2px solid var(--forest); border-radius: 6px; background: var(--bg-3); padding: 11px 14px; margin-bottom: 14px; }
.vt-up-nudge .ic { color: var(--forest); font-family: var(--mono); font-size: 0.875rem; line-height: 1.5; flex: none; }
.vt-up-nudge .tx { font-size: 0.8125rem; color: var(--mute); line-height: 1.55; }
.vt-up-nudge .tx b { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 0.78rem; }
.vt-up-nudge-a { color: var(--gold); white-space: nowrap; text-decoration: none; }
.vt-up-nudge-a:hover { text-decoration: underline; }

/* Attention-panel user guidance + operator note */
.vt-up-guide { font-size: 0.8125rem; color: var(--mute); line-height: 1.55; margin: 0; }
.vt-up-oper-note { font-size: 0.75rem; color: var(--faint); line-height: 1.5; margin: 12px 0 0; }

/* Preview confirmation table */
.vt-prev { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.vt-prev-head, .vt-prev-row { display: grid; grid-template-columns: 70px 1fr 80px 90px 90px; gap: 12px; align-items: center; padding: 9px 14px; font-size: 0.8125rem; }
.vt-prev-head { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: var(--bg-3); border-bottom: 1px solid var(--bd); }
.vt-prev-row { border-bottom: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); }
.vt-prev-row:last-child { border-bottom: 0; }
.vt-prev-row .mono { font-family: var(--mono); }
.vt-prev-flag { font-family: var(--mono); font-size: 0.625rem; padding: 2px 6px; border-radius: 2px; }
.vt-prev-flag[data-f="ok"] { color: var(--good); }
.vt-prev-flag[data-f="dupe"] { color: var(--score-amber); border: 1px solid rgba(212,168,90,.3); }
.vt-prev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-2); border-top: 1px solid var(--bd); flex-wrap: wrap; }

/* Covered-call scoring panel */
.vt-cc-strikes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .vt-cc-strikes { grid-template-columns: 1fr; } }
.vt-cc-strike { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.vt-cc-strike-h { display: flex; align-items: baseline; justify-content: space-between; }
.vt-cc-delta { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.vt-cc-strike-px { font-family: var(--serif); font-size: 1.5rem; color: var(--text); line-height: 1; }
.vt-cc-dims { display: flex; flex-direction: column; gap: 7px; }
.vt-cc-dim { display: grid; grid-template-columns: 64px 1fr 30px; gap: 9px; align-items: center; }
.vt-cc-dim .dl { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.vt-cc-dim-bar { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.vt-cc-dim-bar > div { height: 100%; border-radius: 3px; }
.vt-cc-dim .dv { font-family: var(--mono); font-size: 0.6875rem; color: var(--text); text-align: right; }
.vt-cc-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--bd); }
.vt-cc-foot .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); }
.vt-cc-foot .row b { color: var(--text); font-weight: 500; }

/* Journal */
.vt-journal { display: flex; flex-direction: column; gap: 10px; }
.vt-jrn-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.vt-jrn-filter-l { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: 2px; }
.vt-jrn-compose { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.vt-jrn-compose textarea { flex: 1; min-width: 240px; resize: vertical; min-height: 44px; background: var(--bg); border: 1px solid var(--bd-2); border-radius: 6px; padding: 10px 12px; color: var(--text); font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; outline: none; }
.vt-jrn-compose textarea:focus { border-color: var(--forest); }
.vt-jrn-compose-side { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.vt-jrn-select { background: var(--bg); border: 1px solid var(--bd-2); border-radius: 6px; padding: 8px 10px; color: var(--text); font-family: var(--mono); font-size: 0.75rem; outline: none; }
.vt-jrn-select:focus { border-color: var(--forest); }
.vt-jrn-entry { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 14px 16px; }
.vt-jrn-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; flex-wrap: wrap; }
.vt-jrn-tk { font-family: var(--mono); font-size: 0.75rem; color: var(--gold); }
.vt-jrn-scope { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .04em; color: var(--mute); border: 1px solid var(--bd-2); border-radius: 3px; padding: 2px 7px; cursor: pointer; transition: border-color var(--ease) .15s, color var(--ease) .15s; background: none; }
.vt-jrn-scope:hover { color: var(--text); border-color: var(--forest); }
.vt-jrn-scope[data-level="trade"] { color: var(--gold); border-color: rgba(212,168,90,.3); }
.vt-jrn-scope .lv { color: var(--faint); }
.vt-jrn-when { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); margin-left: auto; }
.vt-jrn-body { font-size: 0.8125rem; color: var(--text); line-height: 1.55; }
.vt-jrn-rollup { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); padding: 2px 0 6px; }

/* position-detail → journal link */
.vt-pos-notes { font-family: var(--sans); font-size: 0.75rem; color: var(--gold); cursor: pointer; background: none; border: 0; padding: 0; }

/* ──────────────────────────────────────────────────────────
   PHASE 1.x — THEMING & ACCESSIBILITY
   One token-layer system: theme (dark default / light) ×
   contrast (normal / high) × text-size. Toggled by data-attrs
   on <html> — so the <head> display-pref bootstrap can apply them
   before first paint (document.body does not exist yet in <head>).
   The dark tokens in :root above are the default.
   ────────────────────────────────────────────────────────── */

/* Text scaling — all type is now rem, so adjusting the ROOT font-size scales every
   label, number, and paragraph uniformly AND respects the user's browser font-size
   preference (a real a11y win, not a zoom hack). Set on <html>. */
html[data-textsize="large"]  { font-size: 112.5%; } /* ~18px base */
html[data-textsize="xlarge"] { font-size: 125%; }   /* ~20px base */

/* Keyboard focus ring (cheap a11y foundation — visible focus for keyboard users) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* Respect reduced-motion preference (cheap a11y foundation) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Light theme — draws from the marketing paper/forest palette */
html[data-theme="light"] {
  --bg: #f4efe6; --bg-2: #faf6ed; --bg-3: #ece5d6; --bd: #e0d7c4; --bd-2: #cdbfa3;
  --text: #0e1f17; --mute: #4a6354; --faint: #7a8d80;
  --forest: #1a3a2a; --gold: #9a6f2e; --good: #2f6a45; --bad: #8a3a2e;
  --score-green: #2f6a45; --score-light: #5a7a4a; --score-amber: #9a6f2e; --score-red: #8a3a2e;
  --sig-strong: #2f6a45; --sig-mod: #6a8a5a; --sig-weak: #9aa896;
  --pl-pos: #2f6a45; --pl-neg: #8a3a2e;
  --gold-soft: rgba(154,111,46,.12);
  --shadow-mock: 0 24px 50px -28px rgba(14,31,23,.25);
}
html[data-theme="light"] ::selection { background: rgba(154,111,46,.28); color: #0e1f17; }

/* High contrast — over dark (default) */
html[data-contrast="high"] {
  --text: #f5f7ef; --mute: #b8c2b2; --faint: #93a394;
  --bd: #3c5c48; --bd-2: #527a5d; --gold: #ecc070; --good: #abd7b1;
}
/* High contrast — over light */
html[data-theme="light"][data-contrast="high"] {
  --text: #06110b; --mute: #2c4135; --faint: #45604f;
  --bd: #b3a07c; --bd-2: #8f7c58; --gold: #7a561d; --good: #1f4d31; --bad: #7a2f24;
}

/* ──────────────────────────────────────────────────────────
   PHASE 4 — Quote page + Options chain
   ────────────────────────────────────────────────────────── */
.vt-q-head { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--bd); margin-bottom: 18px; }
.vt-q-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vt-q-tk { font-family: var(--serif); font-size: 2rem; letter-spacing: -.01em; color: var(--text); line-height: 1; }
.vt-q-name { font-size: 0.875rem; color: var(--mute); white-space: nowrap; }
.vt-q-chg { font-family: var(--mono); font-size: 0.9375rem; white-space: nowrap; }
.vt-q-side .vt-pill, .vt-q-side .vt-pill-good { white-space: nowrap; }
.vt-learning { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--score-amber); border: 1px solid rgba(212,168,90,.3); border-radius: 3px; padding: 2px 7px; }
@media (max-width: 600px) { .vt-q-name { white-space: normal; } }
.vt-q-px-row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.vt-q-px { font-family: var(--mono); font-size: 1.75rem; color: var(--text); line-height: 1; }
.vt-q-chg { font-family: var(--mono); font-size: 0.9375rem; }
.vt-q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.vt-q-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vt-q-score { display: flex; align-items: baseline; gap: 8px; }
.vt-q-score .v { font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--good); }

.vt-q-tabs { margin-bottom: 18px; }
.vt-q-body { min-height: 200px; }

/* chart */
.vt-chart { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 16px; }
.vt-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.vt-chart-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--bd); border-radius: 6px; padding: 3px; }
.vt-chart-toggle button { font-family: var(--sans); font-size: 0.75rem; padding: 4px 11px; border: 0; background: none; color: var(--mute); border-radius: 4px; cursor: pointer; }
.vt-chart-toggle button.is-active { background: var(--bg-3); color: var(--text); }
.vt-chart-range { display: inline-flex; gap: 4px; }
.vt-chart-range button { font-family: var(--mono); font-size: 0.6875rem; padding: 4px 8px; border: 1px solid transparent; background: none; color: var(--mute); border-radius: 4px; cursor: pointer; }
.vt-chart-range button.is-active { color: var(--gold); border-color: var(--bd-2); }
.vt-chart-svg { width: 100%; display: block; }

/* stat grid */
.vt-q-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd); border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; margin-top: 16px; }
.vt-q-stats > div { background: var(--bg-2); padding: 13px 15px; }
.vt-q-stats .l { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; display: flex; align-items: center; }
.vt-q-stats .v { font-family: var(--mono); font-size: 0.9375rem; color: var(--text); }
@media (max-width: 720px) { .vt-q-stats { grid-template-columns: 1fr 1fr; } }

/* fundamentals gate rows */
.vt-gate-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--bd); font-size: 0.8125rem; }
.vt-gate-row:last-child { border-bottom: 0; }
.vt-gate-dot { width: 9px; height: 9px; border-radius: 50%; }
.vt-gate-dot[data-p="1"] { background: var(--good); }
.vt-gate-dot[data-p="0"] { background: var(--bad); }
.vt-gate-val { font-family: var(--mono); color: var(--text); }
.vt-gate-thr { font-family: var(--mono); font-size: 0.6875rem; color: var(--faint); }

/* Per-signal breakdown (ledger #13) + data-quality badges (ledger #15) */
.vt-sig-row { display: grid; grid-template-columns: 132px 1fr 32px 84px; gap: 12px; align-items: center; padding: 7px 0; }
.vt-sig-k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .06em; color: var(--text); display: inline-flex; align-items: baseline; gap: 6px; }
.vt-sig-w { font-size: 0.5938rem; color: var(--faint); }
.vt-sigbk-bar { height: 6px; width: 100%; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.vt-sigbk-bar > div { height: 100%; border-radius: 3px; }
.vt-sig-v { font-family: var(--mono); font-size: 0.75rem; text-align: right; }
.vt-sig-dq { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .04em; color: var(--score-amber); border: 1px solid rgba(212,168,90,.4); border-radius: 3px; padding: 1px 5px; justify-self: end; white-space: nowrap; }
.vt-sig-dq-spacer { display: block; }
.vt-sigdq { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .04em; color: var(--score-amber); display: inline-flex; align-items: center; gap: 5px; }

/* Deterministic SIGNAL SUMMARY — always-on, no-AI block (DR-0003). Forest accent, NOT gold/AI. */
.vt-sigsum { background: var(--bg-2); border: 1px solid var(--bd); border-left: 2px solid var(--forest); border-radius: 4px; padding: 14px 16px; }
.vt-sigsum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vt-sigsum-t { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.vt-sigsum-tag { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--bd-2); border-radius: 3px; padding: 2px 6px; }
.vt-sigsum p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--text); max-width: 70ch; }

/* State D — AI not generated yet (also the deterministic/mock fallback; never AI-labeled) */
.vt-ai-idle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--bg-3); border: 1px dashed var(--bd-2); border-radius: 4px; padding: 14px 16px; }
.vt-ai-idle .tx { font-size: 0.8125rem; line-height: 1.55; }

/* technical / sentiment bars */
.vt-tbar-row { display: grid; grid-template-columns: 90px 1fr 56px; gap: 12px; align-items: center; padding: 9px 0; }
.vt-tbar-row .tl { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.vt-tbar { height: 6px; background: var(--bg-3); border-radius: 3px; position: relative; overflow: hidden; }
.vt-tbar > div { height: 100%; border-radius: 3px; }
.vt-tbar-row .tv { font-family: var(--mono); font-size: 0.75rem; color: var(--text); text-align: right; }

/* ── Options chain ── */
.vt-oc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vt-expiry { display: flex; gap: 6px; flex-wrap: wrap; }
.vt-expiry button { font-family: var(--mono); font-size: 0.6875rem; padding: 5px 10px; border: 1px solid var(--bd-2); background: none; color: var(--mute); border-radius: 5px; cursor: pointer; }
.vt-expiry button.is-active { background: var(--bg-3); color: var(--gold); border-color: rgba(212,168,90,.4); }
.vt-stream { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--bd-2); color: var(--mute); }
.vt-stream::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vt-stream[data-s="live"] { color: var(--good); border-color: rgba(142,193,150,.35); }
.vt-stream[data-s="live"]::before { animation: vtpulse 1.8s var(--ease) infinite; }
.vt-stream[data-s="snapshot"] { color: var(--gold); }
.vt-stream[data-s="offline"] { color: var(--mute); }
@media (prefers-reduced-motion: reduce) { .vt-stream[data-s="live"]::before { animation: none; } }
@keyframes vtpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.vt-chain { border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.vt-chain-grid { width: 100%; }
.vt-chain-sec-h { display: grid; grid-template-columns: 1fr 76px 1fr; background: var(--bg-3); border-bottom: 1px solid var(--bd); }
.vt-chain-sec-h > div { padding: 8px 0; text-align: center; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.vt-chain-sec-h .calls { color: var(--good); }
.vt-chain-sec-h .puts { color: var(--bad); }
.vt-chain-colh, .vt-chain-row { display: grid; grid-template-columns: repeat(3, 1fr) 76px repeat(3, 1fr); align-items: center; }
.vt-chain-colh { background: color-mix(in oklab, var(--bg-3) 60%, transparent); border-bottom: 1px solid var(--bd); }
.vt-chain-colh > span { padding: 6px 8px; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: right; }
.vt-chain-colh > span.strike-h { text-align: center; }
.vt-chain-row { border-bottom: 1px solid color-mix(in oklab, var(--bd) 50%, transparent); font-family: var(--mono); font-size: 0.75rem; }
.vt-chain-row:last-child { border-bottom: 0; }
.vt-chain-row > span { padding: 8px; text-align: right; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-chain-row .strike { text-align: center; font-size: 0.8125rem; color: var(--text); background: var(--bg-3); border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); }
.vt-chain-row.atm .strike { color: var(--gold); font-weight: 500; }
.vt-chain-row .itm { background: rgba(142,193,150,.05); }
.vt-chain-row .itm-p { background: rgba(201,138,114,.05); }
.vt-chain-row .muted { color: var(--mute); }
.vt-qbadge { font-family: var(--mono); font-size: 0.5rem; letter-spacing: .06em; text-transform: uppercase; padding: 1px 4px; border-radius: 2px; border: 1px solid var(--bd-2); color: var(--mute); margin-left: 4px; }
.vt-qbadge[data-q="stale"] { color: var(--score-amber); border-color: rgba(212,168,90,.3); }
.vt-qbadge[data-q="wide"] { color: var(--bad); border-color: rgba(201,138,114,.3); }
.vt-qbadge[data-q="noquote"] { color: var(--faint); }
.vt-qbadge[data-q="indicative"] { color: var(--mute); }
.vt-qbadge[data-q="close"] { color: var(--mute); }
@media (max-width: 860px) {
  .vt-chain-colh, .vt-chain-row { grid-template-columns: repeat(2, 1fr) 64px repeat(2, 1fr); }
  .vt-chain-colh > span.hide-sm, .vt-chain-row > span.hide-sm { display: none; }
}

/* clickable ticker symbol → quote */
.vt-tk-link { cursor: pointer; transition: color var(--ease) .15s; }
.vt-tk-link:hover, .vt-tk-link:focus-visible { color: var(--gold); outline: none; }

/* TA chart legend + key-levels */
.vt-ta-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.vt-ta-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); }
.vt-ta-legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }

/* Level rail — to-scale price continuum with current price relative to milestones */
.vt-rail-wrap { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); padding: 16px 18px; margin-top: 16px; }
.vt-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.vt-rail-head .t { font-size: 0.8125rem; color: var(--text); font-weight: 500; }
.vt-rail-head .sub { font-family: var(--mono); font-size: 0.6875rem; color: var(--mute); }
.vt-rail-head .sub b { color: var(--good); font-weight: 500; }
.vt-rail-head .sub b.res { color: var(--bad); }
.vt-rail { position: relative; height: 320px; margin-left: 104px; margin-right: 8px; }
.vt-rail-axis { position: absolute; left: 40px; top: 6px; bottom: 6px; width: 2px; background: var(--bd-2); border-radius: 2px; }
.vt-rail-range { position: absolute; left: 39px; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--bad), var(--gold) 50%, var(--good)); opacity: .5; }
.vt-rail-leader { position: absolute; left: 41px; overflow: visible; pointer-events: none; }
.vt-rail-dot { position: absolute; left: 37px; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); z-index: 2; }
.vt-rail-lv { position: absolute; left: 82px; right: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; }
.vt-rail-name { white-space: nowrap; font-family: var(--mono); font-size: 0.625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.vt-rail-val { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--text); }
.vt-rail-lv.current .vt-rail-name { color: var(--gold); font-weight: 500; }
.vt-rail-lv.current .vt-rail-val { color: var(--gold); font-size: 0.9375rem; }
.vt-rail-dot.cur { width: 12px; height: 12px; box-shadow: 0 0 0 4px rgba(212,168,90,.18); }
/* intraday range — slim bracket on the axis, no list rows */
.vt-rail-day { position: absolute; left: 30px; width: 7px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); border-radius: 3px 0 0 3px; opacity: .85; }
.vt-rail-day-cap { position: absolute; right: calc(100% + 4px); white-space: nowrap; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .03em; color: var(--gold); display: flex; align-items: center; gap: 3px; }
.vt-rail-day-cap i { font-style: normal; color: var(--bg); background: var(--gold); border-radius: 2px; padding: 0 2px; font-size: 0.5rem; line-height: 1.4; }
.vt-rail-day-cap.hi { top: -6px; }
.vt-rail-day-cap.lo { bottom: -6px; }
@media (max-width: 600px) { .vt-rail { margin-left: 96px; } }

/* News table (Sentiment) */
.vt-news { display: flex; flex-direction: column; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; margin-top: 16px; }
.vt-news-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--bd); text-decoration: none; transition: background var(--ease) .15s; }
.vt-news-row:last-child { border-bottom: 0; }
.vt-news-row:hover { background: var(--bg-3); }
.vt-news-hl { font-size: 0.8125rem; color: var(--text); line-height: 1.4; }
.vt-news-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.625rem; color: var(--mute); white-space: nowrap; }
.vt-news-src { color: var(--gold); }
.vt-news-tone { width: 7px; height: 7px; border-radius: 50%; flex: none; }
@media (max-width: 600px) { .vt-news-row { grid-template-columns: 1fr; } .vt-news-meta { margin-top: 4px; } }

/* Fundamentals — section subhead */
.vt-fund-sub { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 18px 0 10px; }

/* Analysts section */
.vt-an-consensus { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.vt-an-verdict { display: flex; flex-direction: column; gap: 8px; }
.vt-an-verdict-row { display: flex; align-items: baseline; gap: 14px; }
.vt-an-rating { font-family: var(--serif); font-size: 1.625rem; letter-spacing: -.01em; color: var(--good); line-height: 1; white-space: nowrap; }
.vt-an-score { font-size: 1.25rem; color: var(--text); }
.vt-an-score small { font-size: 0.75rem; color: var(--mute); margin-left: 1px; }
.vt-an-dist { display: flex; flex-direction: column; gap: 7px; }
.vt-an-bar-row { display: grid; grid-template-columns: 92px 1fr 28px; gap: 12px; align-items: center; }
.vt-an-bar-row .al { font-size: 0.8125rem; color: var(--mute); white-space: nowrap; }
.vt-an-bar { height: 10px; background: var(--bg-3); border-radius: 5px; overflow: hidden; min-width: 0; }
.vt-an-bar > div { height: 100%; border-radius: 5px; min-width: 3px; }
.vt-an-bar-row .an { font-size: 0.8125rem; color: var(--text); text-align: right; }
@media (max-width: 520px) { .vt-an-bar-row { grid-template-columns: 80px 1fr 24px; } }

/* Valuation */
.vt-val-spectrum { padding: 26px 8px 22px; }
.vt-val-track { position: relative; height: 3px; background: var(--bd-2); border-radius: 2px; }
.vt-val-band { position: absolute; top: 0; height: 3px; background: linear-gradient(90deg, var(--bad), var(--gold) 50%, var(--good)); opacity: .55; border-radius: 2px; }
.vt-val-end { position: absolute; top: calc(100% + 7px); transform: translateX(-50%); font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .04em; color: var(--faint); white-space: nowrap; }
.vt-val-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--moss); border: 1.5px solid var(--bg-2); z-index: 1; }
.vt-val-tick .lbl { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.vt-val-tick.edited { background: var(--gold); width: 11px; height: 11px; box-shadow: 0 0 0 3px rgba(212,168,90,.2); z-index: 2; }
.vt-val-cur { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--text); transform: translateX(-50%); z-index: 3; }
.vt-val-cur .cap { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
/* Model rows — collapsible, with editable assumptions */
.vt-val-models { display: flex; flex-direction: column; margin-top: 8px; }
.vt-val-grp { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 14px 0 4px; }
.vt-val-grp:first-child { margin-top: 0; }
.vt-val-row { border-bottom: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); }
.vt-val-row:last-child { border-bottom: 0; }
.vt-val-row.edited { background: color-mix(in oklab, var(--gold-soft) 35%, transparent); border-radius: 5px; }
.vt-val-rowhead { display: grid; grid-template-columns: 18px 1fr auto 56px; gap: 12px; align-items: center; width: 100%; padding: 11px 8px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); transition: background var(--ease) .15s; border-radius: 5px; }
.vt-val-rowhead:hover { background: var(--bg-3); }
.vt-val-chev { font-family: var(--mono); color: var(--mute); transition: transform var(--ease) .2s; text-align: center; }
.vt-val-row.open .vt-val-chev { transform: rotate(90deg); }
.vt-val-mname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-val-mname b { font-size: 0.8125rem; color: var(--text); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.vt-val-mname span { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-val-editdot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.vt-val-mv { font-family: var(--mono); font-size: 0.9375rem; color: var(--text); text-align: right; }
.vt-val-disc { font-family: var(--mono); font-size: 0.75rem; text-align: right; white-space: nowrap; }
.vt-val-disc[data-tone="pos"] { color: var(--pl-pos); }
.vt-val-disc[data-tone="neg"] { color: var(--pl-neg); }
/* edit panel */
.vt-val-edit { padding: 4px 8px 16px; }
.vt-val-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.vt-val-edit .vt-field { gap: 5px; }
.vt-val-def { font-family: var(--mono); font-size: 0.5625rem; color: var(--faint); }
.vt-val-sync { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 0.5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212,168,90,.35); border-radius: 999px; padding: 0 5px; vertical-align: middle; }
.vt-val-edit .vt-field.is-shared .vt-number { border-color: rgba(212,168,90,.3); }

/* Data-availability flags — a FACTUAL per-share input the provider could not
   supply shows a generic placeholder; it must read UNMISTAKABLY as an estimate,
   never as the security's reported figure (intrinsic-value honesty, §3). */
.vt-val-databanner { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 11px 13px; border: 1px solid var(--score-amber); border-left-width: 3px; background: rgba(212,168,90,.10); border-radius: 6px; }
.vt-val-databanner-icon { color: var(--score-amber); font-size: 0.95rem; line-height: 1.4; flex: none; }
.vt-val-databanner-body { font-size: 0.78rem; line-height: 1.55; color: var(--text); }
.vt-val-databanner-body b { color: var(--text); }
/* Per-figure "estimate · data unavailable" badge — on the model row + each input field. */
.vt-val-estbadge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-family: var(--mono); font-size: 0.5rem; letter-spacing: .06em; text-transform: uppercase; color: var(--score-amber); border: 1px solid var(--score-amber); border-radius: 999px; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }
.vt-val-estbadge.in-field { margin-left: 6px; }
/* Spectrum tick + model row whose fair value rests on an estimated input. */
.vt-val-tick.has-gap { background: var(--score-amber); border-style: dashed; }
.vt-val-row.has-gap .vt-val-mv { color: var(--score-amber); }
.vt-val-edit .vt-field.is-estimate .vt-number { border-color: var(--score-amber); border-style: dashed; }
.vt-val-edit .vt-field.is-estimate .vt-val-def { color: var(--score-amber); }

/* ──────────────────────────────────────────────────────────
   PHASE 5 — SETTINGS · WELCOME · REFERENCE · AUTH
   ────────────────────────────────────────────────────────── */
.vt-set { max-width: 880px; }
.vt-set-sec { border: 1px solid var(--bd); border-radius: 8px; background: var(--bg-2); margin-bottom: 16px; overflow: hidden; }
.vt-set-sec-h { padding: 16px 18px 14px; border-bottom: 1px solid var(--bd); }
.vt-set-sec-t { font-family: var(--serif); font-size: 1.125rem; letter-spacing: -.01em; color: var(--text); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.vt-set-sec-sub { font-size: 0.8125rem; color: var(--mute); margin-top: 4px; line-height: 1.5; }
.vt-set-body { padding: 16px 18px; }
/* collapsible section header (Privacy) */
.vt-set-sec-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--sans); }
.vt-set-sec-toggle:hover { background: var(--bg-3); }
.vt-set-sec-chev { font-family: var(--mono); color: var(--mute); transition: transform var(--ease) .2s; flex: none; }
.vt-set-sec.is-open .vt-set-sec-chev { transform: rotate(90deg); }
.vt-set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); }
.vt-set-row:last-child { border-bottom: 0; }
.vt-set-row-l { min-width: 0; }
.vt-set-row-t { font-size: 0.875rem; color: var(--text); display: flex; align-items: center; gap: 6px; }
.vt-set-row-d { font-size: 0.75rem; color: var(--mute); margin-top: 3px; line-height: 1.5; }
.vt-set-row-c { flex: none; display: flex; align-items: center; gap: 10px; }

/* read-only entry rules */
.vt-set-readonly { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.vt-set-ro-row { display: contents; }
.vt-set-ro-row .k { font-size: 0.8125rem; color: var(--mute); padding: 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--bd) 45%, transparent); }
.vt-set-ro-row .v { font-family: var(--mono); font-size: 0.8125rem; color: var(--text); text-align: right; padding: 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--bd) 45%, transparent); }
.vt-set-lock-tag { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--bd-2); border-radius: 999px; padding: 1px 7px; }

/* editable exit rules */
.vt-set-exit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.vt-set-exit .vt-field { gap: 5px; }
.vt-set-ack { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--score-amber); background: rgba(212,168,90,.08); border-radius: 6px; }
.vt-set-ack.is-clean { border-color: var(--bd); background: var(--bg-3); }
.vt-set-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.vt-set-savebar .msg { font-size: 0.75rem; color: var(--mute); }

/* privacy request */
.vt-priv-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vt-priv-type { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border: 1px solid var(--bd-2); border-radius: 6px; cursor: pointer; transition: border-color var(--ease) .15s, background var(--ease) .15s; background: none; text-align: left; width: 100%; }
.vt-priv-type:hover { border-color: var(--forest); }
.vt-priv-type.is-sel { border-color: var(--gold); background: var(--gold-soft); }
.vt-priv-type .vt-box { margin-top: 1px; }
.vt-priv-type-t { font-size: 0.8125rem; color: var(--text); }
.vt-priv-type-d { font-size: 0.6875rem; color: var(--mute); margin-top: 3px; line-height: 1.45; }
.vt-priv-hist { margin-top: 16px; }
.vt-priv-hist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid color-mix(in oklab, var(--bd) 55%, transparent); font-size: 0.75rem; }
.vt-priv-hist-row .ty { color: var(--text); font-family: var(--mono); }
.vt-priv-hist-row .dt { color: var(--faint); font-family: var(--mono); }
.vt-priv-status { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bd-2); }
.vt-priv-status[data-s="done"] { color: var(--good); border-color: rgba(142,193,150,.3); }
.vt-priv-status[data-s="progress"] { color: var(--gold); border-color: rgba(212,168,90,.3); }

/* Welcome clickwrap */
.vt-welcome { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background:
  radial-gradient(1200px 600px at 50% -10%, var(--bg-3), var(--bg)); }
.vt-welcome-card { width: 100%; max-width: 540px; background: var(--bg-2); border: 1px solid var(--bd-2); border-radius: 12px; padding: 32px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); }
.vt-welcome-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.vt-welcome-brand .wm { font-family: var(--serif); font-size: 1.375rem; color: var(--text); }
.vt-welcome-h { font-family: var(--serif); font-size: 1.625rem; letter-spacing: -.01em; color: var(--text); line-height: 1.15; }
.vt-welcome-sub { font-size: 0.875rem; color: var(--mute); line-height: 1.6; margin: 10px 0 22px; }
.vt-welcome-docs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.vt-welcome-doc { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--bd); border-radius: 7px; cursor: pointer; background: var(--bg); transition: border-color var(--ease) .15s; }
.vt-welcome-doc:hover { border-color: var(--bd-2); }
.vt-welcome-doc.is-on { border-color: var(--gold); }
.vt-welcome-doc.is-updated { border-left: 2px solid var(--gold); }
.vt-welcome-doc .vt-box { margin-top: 1px; }
.vt-welcome-doc-t { font-size: 0.875rem; color: var(--text); line-height: 1.4; }
.vt-welcome-updated-tag { display: inline-block; vertical-align: middle; }
.vt-welcome-doc-d { font-size: 0.6875rem; color: var(--mute); margin-top: 2px; }
.vt-welcome-doc-link { font-family: var(--mono); font-size: 0.625rem; color: var(--gold); margin-left: auto; white-space: nowrap; }
.vt-welcome-updated-tag { font-family: var(--mono); font-size: 0.5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212,168,90,.35); border-radius: 999px; padding: 0 5px; }
.vt-welcome-fine { font-family: var(--mono); font-size: 0.625rem; line-height: 1.5; color: var(--faint); margin-top: 14px; }

/* Reference (educational) */
.vt-ref { max-width: 820px; }
.vt-ref-head { margin-bottom: 6px; }
.vt-ref-eyebrow { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.vt-ref-title { font-family: var(--serif); font-size: 2rem; letter-spacing: -.015em; color: var(--text); margin-top: 8px; line-height: 1.1; }
.vt-ref-lede { font-size: 1rem; color: var(--mute); line-height: 1.6; margin: 12px 0 26px; max-width: 64ch; }
.vt-ref-sec-t { font-family: var(--serif); font-size: 1.25rem; color: var(--text); margin: 26px 0 12px; }
.vt-ref-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vt-ref-sig { border: 1px solid var(--bd); border-radius: 7px; padding: 14px; background: var(--bg-2); }
.vt-ref-sig-k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.vt-ref-sig-t { font-size: 0.875rem; color: var(--text); margin: 6px 0 5px; font-weight: 500; }
.vt-ref-sig-d { font-size: 0.75rem; color: var(--mute); line-height: 1.5; }
.vt-ref-gates { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--bd); border-radius: 7px; overflow: hidden; }
.vt-ref-gate { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-2); }
.vt-ref-gate .n { font-family: var(--mono); font-size: 0.75rem; color: var(--gold); }
.vt-ref-gate .t { font-size: 0.8125rem; color: var(--text); }
.vt-ref-gate .th { font-family: var(--mono); font-size: 0.75rem; color: var(--mute); }
.vt-ref-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--bd); flex-wrap: wrap; }

/* Auth error */
.vt-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: radial-gradient(1000px 500px at 50% -10%, var(--bg-3), var(--bg)); }
.vt-auth-card { width: 100%; max-width: 420px; text-align: center; background: var(--bg-2); border: 1px solid var(--bd-2); border-radius: 12px; padding: 34px 30px; }
.vt-auth-glyph { font-family: var(--mono); font-size: 1.75rem; color: var(--score-amber); margin-bottom: 14px; }
.vt-auth-h { font-family: var(--serif); font-size: 1.5rem; color: var(--text); letter-spacing: -.01em; }
.vt-auth-d { font-size: 0.875rem; color: var(--mute); line-height: 1.6; margin: 10px 0 22px; }
.vt-auth-actions { display: flex; flex-direction: column; gap: 10px; }
.vt-auth-meta { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); margin-top: 18px; }

/* kit-preview screen jump (settings footer) */
.vt-set-preview { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.vt-set-preview .tiny { width: 100%; margin-bottom: 4px; }

/* read-only agreements modal */
.vt-agree-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.vt-agree-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 6px; background: var(--bg-3); }
.vt-agree-check { color: var(--good); font-size: 0.875rem; text-align: center; }
.vt-agree-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-agree-meta .t { font-size: 0.8125rem; color: var(--text); }
.vt-agree-meta .v { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); }
.vt-agree-read { font-family: var(--mono); font-size: 0.6875rem; color: var(--gold); white-space: nowrap; }
.vt-agree-note { font-size: 0.6875rem; color: var(--faint); line-height: 1.5; margin: 14px 0 0; }
.vt-agree-note a { color: var(--mute); text-decoration: underline; }

/* ──────────────────────────────────────────────────────────
   PHASE 6 — ADMIN / OPERATOR CONSOLE
   Distinct operator skin over shared elements: same dark base +
   panels/tables/buttons, but a cool SLATE accent (vs. warm gold)
   and a hazard band so it can never be mistaken for the user app.
   ────────────────────────────────────────────────────────── */
.vt-admin {
  --admin: #8aa0c0;            /* slate operator accent */
  --admin-2: #6f86a8;
  --admin-soft: rgba(138,160,192,.12);
  --admin-bg: #0c1116;        /* cooler, bluer ground than forest */
  --admin-bg-2: #121a22;
  --admin-bd: #25303d;
  min-height: 100vh; background: var(--admin-bg); color: var(--text);
  display: grid; grid-template-columns: 220px 1fr;
}
.vt-admin ::selection { background: rgba(138,160,192,.3); }

/* hazard band — unmistakable operator signal */
.vt-admin-hazard { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 7px 18px;
  background: repeating-linear-gradient(45deg, #1a222c, #1a222c 12px, #161d26 12px, #161d26 24px);
  border-bottom: 1px solid var(--admin-bd); }
.vt-admin-hazard .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--admin); box-shadow: 0 0 0 3px var(--admin-soft); flex: none; }
.vt-admin-hazard .t { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--admin); }
.vt-admin-hazard .env { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); margin-left: auto; }

/* operator sidebar */
.vt-admin-side { background: var(--admin-bg-2); border-right: 1px solid var(--admin-bd); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.vt-admin-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; }
.vt-admin-brand .wm { font-family: var(--serif); font-size: 1.25rem; color: var(--text); }
.vt-admin-brand .op { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--admin); border: 1px solid var(--admin-2); border-radius: 999px; padding: 1px 6px; }
.vt-admin-nav { display: flex; flex-direction: column; gap: 2px; }
.vt-admin-navitem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; font-size: 0.8125rem; color: var(--mute); background: none; border: 1px solid transparent; cursor: pointer; text-align: left; font-family: var(--sans); }
.vt-admin-navitem:hover { background: #18222d; color: var(--text); }
.vt-admin-navitem.is-active { background: #18222d; color: var(--text); border-color: var(--admin-bd); }
.vt-admin-navitem.is-active .g { color: var(--admin); }
.vt-admin-navitem .g { font-family: var(--mono); font-size: 0.75rem; width: 14px; text-align: center; color: var(--faint); }
.vt-admin-side-foot { margin-top: auto; padding: 10px 8px 2px; border-top: 1px solid var(--admin-bd); }
.vt-admin-side-foot .op-name { font-size: 0.75rem; color: var(--text); }
.vt-admin-side-foot .op-role { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--admin); }
.vt-admin-exit { margin-top: 8px; font-family: var(--sans); font-size: 0.75rem; color: var(--mute); background: none; border: 1px solid var(--admin-bd); border-radius: 5px; padding: 6px 10px; cursor: pointer; width: 100%; }
.vt-admin-exit:hover { color: var(--text); border-color: var(--admin-2); }

.vt-admin-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.vt-admin-content { padding: 24px 28px; overflow-y: auto; flex: 1; }
.vt-admin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.vt-admin-title { font-family: var(--serif); font-size: 1.625rem; letter-spacing: -.01em; color: var(--text); }
.vt-admin-sub { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }

/* operator panels reuse .vt-panel but with slate border tint */
.vt-admin .vt-panel { background: var(--admin-bg-2); border-color: var(--admin-bd); }
.vt-admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.vt-admin-tile { background: var(--admin-bg-2); border: 1px solid var(--admin-bd); border-radius: 8px; padding: 15px 16px; }
.vt-admin-tile .l { font-family: var(--mono); font-size: 0.5938rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 6px; }
.vt-admin-tile .v { font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--text); margin-top: 8px; }
.vt-admin-tile .d { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); margin-top: 8px; }
.vt-admin-tile .v small { font-size: 0.875rem; color: var(--mute); }
.vt-admin-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.6875rem; }
.vt-admin-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vt-admin-dot.ok { color: var(--good); } .vt-admin-dot.warn { color: var(--gold); } .vt-admin-dot.down { color: var(--bad); } .vt-admin-dot.idle { color: var(--mute); }

/* audited mutation cards */
.vt-admin-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.vt-admin-op { border: 1px solid var(--admin-bd); border-radius: 8px; background: var(--admin-bg-2); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.vt-admin-op-h { display: flex; align-items: center; gap: 8px; }
.vt-admin-op-t { font-size: 0.875rem; color: var(--text); font-weight: 500; }
.vt-admin-op-tag { font-family: var(--mono); font-size: 0.5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--admin); border: 1px solid var(--admin-2); border-radius: 999px; padding: 1px 6px; margin-left: auto; }
.vt-admin-op-d { font-size: 0.75rem; color: var(--mute); line-height: 1.5; flex: 1; }
.vt-admin-btn { font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; padding: 7px 13px; border-radius: 5px; border: 1px solid var(--admin-2); background: var(--admin-soft); color: var(--admin); cursor: pointer; align-self: flex-start; transition: background var(--ease) .15s; }
.vt-admin-btn:hover { background: rgba(138,160,192,.2); }
.vt-admin-btn.danger { color: var(--bad); border-color: rgba(201,138,114,.4); background: rgba(201,138,114,.1); }
.vt-admin-btn.danger:hover { background: rgba(201,138,114,.18); }

/* audit log */
.vt-admin-log { display: flex; flex-direction: column; }
.vt-admin-log-row { display: grid; grid-template-columns: 130px 1fr 90px; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid color-mix(in oklab, var(--admin-bd) 60%, transparent); font-size: 0.75rem; }
.vt-admin-log-row:last-child { border-bottom: 0; }
.vt-admin-log-row .ts { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }
.vt-admin-log-row .ac { color: var(--text); }
.vt-admin-log-row .ac b { color: var(--admin); font-weight: 500; }
.vt-admin-log-row .by { font-family: var(--mono); font-size: 0.625rem; color: var(--mute); text-align: right; }
.vt-admin-sec-t { font-family: var(--serif); font-size: 1.125rem; color: var(--text); margin: 24px 0 12px; }

/* confirm modal uses slate accent */
.vt-admin-modal .vt-modal-eyebrow { color: var(--admin); }
.vt-admin-modal .vt-modal-title { color: var(--text); }
.vt-admin-confirm-btn { font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; padding: 8px 16px; border-radius: 5px; border: 1px solid var(--admin-2); background: var(--admin); color: #10151b; cursor: pointer; }
@media (max-width: 860px) { .vt-admin { grid-template-columns: 1fr; } .vt-admin-side { display: none; } }
.vt-val-editfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bd); flex-wrap: wrap; }
.vt-val-editval { font-size: 0.8125rem; color: var(--mute); display: inline-flex; align-items: baseline; gap: 8px; }
.vt-val-editval b { font-size: 1.125rem; color: var(--gold); }
.vt-val-hint { font-size: 0.75rem; color: var(--mute); line-height: 1.5; margin: 14px 0 2px; }
.vt-val-resetall { font-family: var(--sans); font-size: 0.6875rem; color: var(--gold); background: none; border: 1px solid rgba(212,168,90,.35); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.vt-val-resetall:hover { background: var(--gold-soft); }

/* Valuation — instrument context toggle */
.vt-val-ctx { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.vt-val-ctx-note { font-family: var(--mono); font-size: 0.625rem; color: var(--faint); }
/* Not-applicable models group */
.vt-val-na { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bd); }
.vt-val-na-h { font-family: var(--mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.vt-val-na-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: baseline; padding: 5px 0; }
.vt-val-na-row .nm { font-size: 0.8125rem; color: var(--mute); text-decoration: line-through; text-decoration-color: var(--bd-2); }
.vt-val-na-row .rs { font-size: 0.75rem; color: var(--faint); line-height: 1.4; }
.vt-val-calc-warn { font-size: 0.75rem; line-height: 1.5; color: var(--score-amber); background: rgba(212,168,90,.1); border: 1px solid rgba(212,168,90,.25); border-radius: 5px; padding: 9px 11px; }
@media (max-width: 520px) { .vt-val-na-row { grid-template-columns: 1fr; gap: 2px; } }