/* Sugar Terminal — themeable trading-desk UI.

   Dark is the default: terminals get read in low light for long sessions.
   Light exists because desks are not all the same room — some are next to a
   window, some print, and some sit under fluorescent lighting where a dark
   panel is the harder read.

   BOTH THEMES SHARE ONE SET OF VARIABLE NAMES. Nothing below :root refers to a
   literal colour, so a theme is defined entirely by overriding these — and a
   component added later inherits both themes without being touched. The chart
   is not CSS, so it reads the same variables at runtime (see themeChart). */

:root{
  /* Header = status row + nav row + border. Every fixed overlay hangs off
     this, so it is defined once rather than repeated as a magic number. */
  --header-h:91px;

  --bg:#0d1117;
  --bg-panel:#131920;
  --bg-raised:#1a212b;
  --border:#232c38;
  --border-soft:#1c242e;

  --text:#e6edf3;
  --text-dim:#9aa7b6;
  --text-faint:#8492a3;

  --up:#26a69a;
  --down:#ef5350;
  --accent:#e0a83c;        /* raw sugar amber */
  --accent-dim:#8a6620;
  --blue:#4c8fdb;
  --purple:#9b7fd4;

  /* Chart-only tones. Kept as variables so the canvas can be themed from the
     same source of truth as the DOM. */
  --grid:#171e27;

  /* Lifted variants of the semantic hues, for small text sitting on a tint of
     its own colour — a pill or a chip. The base --up/--down are tuned for
     candles on the ground, where they are large shapes; at 10px on a 16%
     wash of themselves they clear AA and still read soft. */
  /* TEXT variants of the semantic hues. --up/--down/--accent are sized for
     candles and bars; as small type they need lifting on dark and deepening on
     light, or they sit right on the AA floor. */
  --up-text:#3fd6c4;
  --down-text:#ff8a85;
  --accent-text:#f0bf62;
  --up-bright:#3fd6c4;
  --down-bright:#ff8a85;
  --accent-bright:#f0bf62;

  /* SEMANTIC TOKENS. Everything below :root was written with literal rgba
     tints — 180 declarations of them — which is why the first light theme was
     whack-a-mole: each one had to be found and overridden by hand, and the
     ones that were missed rendered dark-on-dark. These name the INTENT so a
     rule says "a soft positive tint" rather than a specific colour, and both
     themes supply their own. */
  --on-accent:#0d1117;        /* text that sits ON the accent fill */
  --bg-float:rgba(19,25,32,.97);  /* tooltips and popovers over the chart */
  --scroll-thumb:#2b3542;
  --scroll-thumb-hover:#3a4757;

  --tint-up:rgba(38,166,154,.10);
  --tint-up-strong:rgba(38,166,154,.16);
  --tint-down:rgba(239,83,80,.09);
  --tint-down-strong:rgba(239,83,80,.16);
  --tint-accent:rgba(224,168,60,.10);
  --tint-accent-strong:rgba(224,168,60,.18);
  --tint-blue:rgba(76,143,219,.16);
  --tint-neutral:rgba(139,152,168,.12);
  --edge-up:rgba(38,166,154,.35);
  --edge-down:rgba(239,83,80,.35);
  --edge-accent:rgba(224,168,60,.35);
  --shadow:rgba(0,0,0,.5);
  --scrim:rgba(0,0,0,.55);

  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* LIGHT THEME
   Not an inversion. A flat white background under candlesticks is glaring, so
   the page sits on a warm off-white and panels go pure white to lift. The
   accent darkens because the amber that reads well on near-black is illegible
   on white, and up/down deepen for the same reason — a trader must be able to
   tell a red bar from a green one at a glance in either theme. */
:root[data-theme="light"]{
  --bg:#f4f5f7;
  --bg-panel:#ffffff;
  --bg-raised:#eceef1;
  --border:#d4d8de;
  --border-soft:#e3e6ea;

  --text:#16202b;
  --text-dim:#4a5665;
  --text-faint:#5f6b7a;

  --up:#0e8a7d;
  --down:#d13b38;
  --accent:#a9761a;
  --accent-dim:#e8d5aa;
  --blue:#2f6fb5;
  --purple:#6f52ad;

  --grid:#e7eaee;
  /* On white the base hues are already dark enough; these deepen rather than
     lift, for the same reason. */
  --up-text:#0a5f56;
  --down-text:#8f221e;
  --accent-text:#7a4c0f;
  --up-bright:#0a5f56;
  --down-bright:#8f221e;
  --accent-bright:#7a4c0f;
  --shadow:rgba(20,30,45,.14);
  --scrim:rgba(30,40,55,.35);

  /* On white, the dark theme's low alphas disappear entirely, so every tint
     is carried at roughly double strength. The float background flips to a
     near-white panel — a dark tooltip on a light chart hid its own values,
     which is the bug that prompted all of this. */
  --on-accent:#ffffff;
  --bg-float:rgba(255,255,255,.98);
  --scroll-thumb:#c3c9d1;
  --scroll-thumb-hover:#a8b0ba;

  --tint-up:rgba(14,138,125,.10);
  --tint-up-strong:rgba(14,138,125,.16);
  --tint-down:rgba(209,59,56,.09);
  --tint-down-strong:rgba(209,59,56,.15);
  --tint-accent:rgba(169,118,26,.10);
  --tint-accent-strong:rgba(169,118,26,.18);
  --tint-blue:rgba(47,111,181,.14);
  --tint-neutral:rgba(90,102,117,.10);
  --edge-up:rgba(14,138,125,.40);
  --edge-down:rgba(209,59,56,.40);
  --edge-accent:rgba(169,118,26,.40);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:13px; overflow:hidden;
}
button{font-family:inherit; cursor:pointer;}

/* ---------------- top bar (two rows) ---------------- */
/* ROW 1 — identity and state: what instrument, what price, how fresh, what
   language. ROW 2 — navigation. They were one 46px row carrying all of it,
   which truncated nav labels and clipped the freshness badge. */
.topbar{
  background:var(--bg-panel); border-bottom:1px solid var(--border);
}
.topbar-row{ display:flex; align-items:center; gap:22px; padding:0 14px; }
.topbar-status{ height:50px; }

.brand{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.mark{
  width:9px; height:9px; border-radius:2px; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.brandname{font-weight:700; letter-spacing:.10em; font-size:12.5px; white-space:nowrap;}
.brandname .thin{font-weight:300; color:var(--text-dim); margin-left:2px;}

/* The quote stacks: price on top, context beneath. Two short lines read
   better in a fixed-height bar than one long line that gets truncated. */
.quote{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  font-family:var(--mono); min-width:0; flex-shrink:1;
}
.q-line1{display:flex; align-items:baseline; gap:10px; white-space:nowrap;}
.q-line2{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; color:var(--text-faint); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.q-sym{font-weight:600; letter-spacing:.04em; font-size:12px;}
.q-last{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums;}
.q-chg{font-size:12.5px; font-variant-numeric:tabular-nums;}
.q-meta{font-size:10.5px; color:var(--text-faint);}
.up{color:var(--up);} .down{color:var(--down);}

.topbar-right{
  margin-left:auto; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.clock{font-family:var(--mono); font-size:11px; color:var(--text-faint); white-space:nowrap;}
.user-chip{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
  color:var(--text); background:var(--bg-panel); border:1px solid var(--border);
  border-radius:12px; padding:3px 10px; white-space:nowrap; max-width:220px;
}
.user-chip #userName{ overflow:hidden; text-overflow:ellipsis; }
.user-chip .user-dot{ color:var(--up); font-size:8px; }
.signout-btn{
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
  background:none; border:1px solid var(--border); border-radius:4px;
  padding:4px 10px; cursor:pointer; white-space:nowrap;
}
.signout-btn:hover{ border-color:var(--down-text); color:var(--down-text); }

/* Feed freshness: distinct from the bar date, and the thing a desk checks
   first when a price looks wrong. Green when current, amber past 24h. */
.q-pull{
  font-family:var(--mono); font-size:10.5px; color:var(--up);
  border:1px solid var(--tint-up-strong); border-radius:3px;
  padding:3px 8px; white-space:nowrap; cursor:help; flex-shrink:0;
}
.q-pull.stale{color:var(--accent); border-color:var(--accent-dim);
  background:var(--tint-accent-strong);}

/* ROW 2 — navigation. Scrolls rather than wraps; a wrapped row would
   overflow the bar, and a clipped nav button is unreachable. */
.topnav{
  display:flex; align-items:center; gap:6px;
  height:40px; padding:0 14px;
  border-top:1px solid var(--border-soft);
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.topnav::-webkit-scrollbar{display:none;}
.topnav > *{flex-shrink:0;}
.nav-sep{width:1px; height:18px; background:var(--border); margin:0 4px;}

.lang-toggle{display:flex; gap:2px; flex-shrink:0;}
.lang{
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text-dim);
  font-size:11px; padding:4px 10px; border-radius:3px; white-space:nowrap;
}
.lang:hover{color:var(--text);}
.lang.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);
  font-weight:600;}

/* Narrow: the clock is the least load-bearing thing here and goes first. */
@media (max-width:1080px){ .topbar .clock{display:none;} }
@media (max-width:820px){ .topbar .brandname{display:none;} }

/* ---------------- layout ---------------- */
/* Two 5px drag handles sit between the three columns. Widths are driven by
   custom properties so JS only ever writes two values, and the chart's own
   ResizeObserver picks the change up automatically. */
.layout{
  --left:216px;
  --right:272px;
  display:grid;
  grid-template-columns:var(--left) 5px minmax(320px, 1fr) 5px var(--right);
  height:calc(100vh - var(--header-h));
}

.resizer{
  background:var(--border); cursor:col-resize; position:relative;
  transition:background .12s;
}
/* Widen the grab target beyond the visible line — a 5px hit area is fiddly,
   but a 5px line is what looks right. */
.resizer::after{
  content:''; position:absolute; top:0; bottom:0; left:-3px; right:-3px;
}
.resizer:hover, .resizer:focus-visible, .resizer.dragging{
  background:var(--accent); outline:none;
}
/* While dragging, stop the pointer selecting text or being captured by the
   chart canvas underneath. */
body.resizing{cursor:col-resize; user-select:none;}
body.resizing iframe, body.resizing canvas{pointer-events:none;}
.watchlist,.sidepanel{
  background:var(--bg-panel); overflow-y:auto;
  display:flex; flex-direction:column;
}
.watchlist{border-right:1px solid var(--border);}
.sidepanel{border-left:1px solid var(--border);}

.panel-head{
  padding:9px 12px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); font-weight:600;
  border-bottom:1px solid var(--border-soft);
  background:var(--bg-panel); position:sticky; top:0; z-index:2;
}
.loading{padding:14px 12px; color:var(--text-faint); font-size:12px;}

/* ---------------- watchlist ---------------- */
.wl-group{
  padding:7px 12px 3px; font-size:10px; letter-spacing:.08em;
  color:var(--text-faint); text-transform:uppercase;
}
.wl-row{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  padding:7px 12px; cursor:pointer; border-left:2px solid transparent;
}
.wl-row:hover{background:var(--bg-raised);}
.wl-row.active{background:var(--bg-raised); border-left-color:var(--accent);}
.wl-name{font-size:12px; font-weight:500;}
.wl-ex{font-size:10px; color:var(--text-faint); grid-column:1;}
.wl-last{
  font-family:var(--mono); font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.wl-chg{
  font-family:var(--mono); font-size:10.5px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ---------------- toolbar ---------------- */
.chartwrap{display:flex; flex-direction:column; min-width:0; background:var(--bg);}
.toolbar{
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  border-bottom:1px solid var(--border); background:var(--bg-panel);
  /* One row that scrolls: wrapping pushed the trailing control onto its own
     line and stole chart height. */
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none;}
.toolbar > *{flex-shrink:0;}
.sep{width:1px; height:18px; background:var(--border); margin:0 3px;}
.spacer{flex:1;}

.tf,.ind,.ghost{
  background:transparent; border:1px solid transparent; color:var(--text-dim);
  padding:4px 9px; border-radius:3px; font-size:11.5px; font-weight:500;
  letter-spacing:.02em;
}
.tf:hover,.ind:hover,.ghost:hover{background:var(--bg-raised); color:var(--text);}
.tf.active{background:var(--accent-dim); color:var(--on-accent); border-color:var(--accent);}
.ind.active{background:var(--bg-raised); color:var(--accent); border-color:var(--border);}
.ghost{border-color:var(--border);}

.draw-group{display:flex; gap:3px;}
.draw{
  width:27px; height:25px; display:grid; place-items:center;
  background:transparent; border:1px solid transparent; border-radius:3px;
}
.draw svg{width:15px; height:15px; fill:var(--text-dim); stroke:var(--text-dim);}
.draw:hover{background:var(--bg-raised);}
.draw:hover svg{fill:var(--text); stroke:var(--text);}
.draw.active{background:var(--bg-raised); border-color:var(--accent);}
.draw.active svg{fill:var(--accent); stroke:var(--accent);}
.draw.danger:hover svg{fill:var(--down); stroke:var(--down);}

/* ---------------- chart ---------------- */
.legend{
  display:flex; gap:16px; flex-wrap:wrap; padding:6px 12px 4px;
  font-family:var(--mono); font-size:11px; color:var(--text-dim);
  min-height:24px; font-variant-numeric:tabular-nums;
}
.legend b{color:var(--text); font-weight:600;}
.legend .ind-val{color:var(--text-dim);}

.chart-host{position:relative; flex:1; min-height:0;}
#chart{position:absolute; inset:0;}
#overlay{
  position:absolute; inset:0; pointer-events:none; z-index:3;
}
#overlay.drawing{pointer-events:auto; cursor:crosshair;}

/* Cursor readouts. Both are pointer-events:none so they never eat a click
   meant for the chart or a drawing tool. */
.tooltip{
  position:absolute; z-index:5; pointer-events:none;
  background:var(--bg-float); border:1px solid var(--border);
  border-radius:3px; padding:8px 10px; min-width:150px;
  font-family:var(--mono); font-size:11px; line-height:1.6;
  box-shadow:0 6px 20px var(--shadow); font-variant-numeric:tabular-nums;
}
.tt-date{color:var(--text-faint); font-size:10px; margin-bottom:5px;
  letter-spacing:.03em;}
.tt-row{display:flex; justify-content:space-between; gap:16px;}
.tt-row span:first-child{color:var(--text-dim);}
.tt-row span:last-child{color:var(--text); font-weight:600;}
.tt-sep{height:1px; background:var(--border); margin:5px 0;}
.tt-chg.up{color:var(--up);} .tt-chg.down{color:var(--down);}
.tt-row span.accent{color:var(--accent);}

/* The price under the pointer, pinned to the right axis. */
.cursor-price{
  position:absolute; right:0; z-index:6; pointer-events:none;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--mono); font-size:11px; font-weight:700;
  padding:2px 6px; border-radius:2px; transform:translateY(-50%);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.subpane{
  height:118px; border-top:1px solid var(--border);
  position:relative; flex-shrink:0;
}
.subpane-label{
  position:absolute; top:4px; left:10px; z-index:2;
  font-family:var(--mono); font-size:10.5px; color:var(--text-faint);
  pointer-events:none;
}
.subchart{position:absolute; inset:0;}

/* ---------------- model panel ---------------- */
.model-status{padding:12px;}
.banner{
  border:1px solid; border-left-width:3px; border-radius:3px;
  padding:10px 11px; font-size:11.5px; line-height:1.5;
}
.banner.warn{
  border-color:var(--down); background:var(--tint-down-strong); color:#f3aaa3;
}
.banner.ok{
  border-color:var(--up); background:var(--tint-up-strong); color:#8fd3cb;
}
.banner b{display:block; margin-bottom:4px; color:var(--text); font-size:12px;}

.cand{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 8px;
  padding:8px 12px; border-bottom:1px solid var(--border-soft);
  font-size:11.5px; align-items:center;
}
.cand-h{font-family:var(--mono); color:var(--text-dim);}
.cand-acc{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.tag{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:2px; font-weight:700;
}
.tag.rejected{background:var(--tint-down-strong); color:var(--down);}
.tag.champion{background:var(--tint-up-strong); color:var(--up);}
.tag.challenger{background:var(--tint-blue); color:var(--blue);}
.cand-ci{grid-column:1/-1; font-family:var(--mono); font-size:10px; color:var(--text-faint);}

.pred-list{font-size:11.5px;}
.pred{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:8px;
  padding:6px 12px; border-bottom:1px solid var(--border-soft);
  font-family:var(--mono); align-items:center;
}
.pred-date{color:var(--text-faint); font-size:10.5px;}
.dot{width:6px; height:6px; border-radius:50%;}
.dot.ok{background:var(--up);} .dot.bad{background:var(--down);}
.dot.pending{background:var(--text-faint);}

/* ---------------- COT ---------------- */
.cot{padding:10px 12px;}
.cot-row{margin-bottom:11px;}
.cot-label{font-size:10.5px; color:var(--text-dim); margin-bottom:4px;
  display:flex; justify-content:space-between;}
.cot-label span:last-child{font-family:var(--mono); color:var(--text);}
.cot-bar{height:5px; background:var(--bg-raised); border-radius:3px;
  position:relative; overflow:hidden;}
.cot-fill{position:absolute; top:0; bottom:0; border-radius:3px;}
.cot-mid{position:absolute; top:-2px; bottom:-2px; left:50%; width:1px;
  background:var(--text-faint);}
.cot-note{font-size:10px; color:var(--text-faint); line-height:1.45; margin-top:8px;}

/* ---------------- Desk Note drawer ---------------- */
.ghost.primary{
  border-color:var(--accent); color:var(--accent); font-weight:600;
}
.ghost.primary:hover{background:var(--accent-dim); color:var(--on-accent);}

/* An author `display` rule beats the UA stylesheet's [hidden]{display:none},
   so any element toggled via the hidden attribute must opt back out
   explicitly — otherwise the drawer sits permanently over the chart. */
[hidden]{display:none !important;}

.drawer-scrim{
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
  background:var(--scrim); z-index:40;
}
.drawer{
  position:fixed; top:var(--header-h); right:0; bottom:0; width:min(560px,94vw); z-index:41;
  background:var(--bg-panel); border-left:1px solid var(--border);
  display:flex; flex-direction:column; box-shadow:-18px 0 44px var(--shadow);
}
.drawer-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:16px 18px; border-bottom:1px solid var(--border);
}
.drawer-title{font-size:16px; font-weight:600; letter-spacing:.01em;}
.drawer-sub{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:3px;}
.drawer-close{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  width:26px; height:26px; border-radius:3px; line-height:1; flex-shrink:0;
}
.drawer-close:hover{color:var(--text); background:var(--bg-raised);}
/* In a flex column the body must be the only thing that flexes; without
   flex-shrink:0 the head and tab bar get squeezed and clipped by the body. */
.drawer-head{flex-shrink:0;}
.drawer-body{flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 18px 40px;}

.drawer-tabs{
  display:flex; gap:2px; padding:0 12px; background:var(--bg-panel);
  border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none;
  flex-shrink:0;
}
.drawer-tabs::-webkit-scrollbar{display:none;}
.dtab{
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text-dim); padding:9px 11px; font-size:11.5px; font-weight:500;
  white-space:nowrap; flex-shrink:0;
}
.dtab:hover{color:var(--text);}
.dtab.active{color:var(--accent); border-bottom-color:var(--accent);}

/* Technical battery */
.rating-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.rating{
  background:var(--card, var(--bg-raised)); border:1px solid var(--border);
  border-radius:3px; padding:12px; text-align:center;
}
.rating-k{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px;}
.rating-v{font-size:14px; font-weight:700; letter-spacing:.02em;}
.rating-c{font-family:var(--mono); font-size:10px; color:var(--text-faint); margin-top:5px;}
.r-buy{color:var(--up);} .r-sell{color:var(--down);} .r-neutral{color:var(--text-dim);}

.sig{
  display:grid; grid-template-columns:1fr auto auto; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--border-soft);
  align-items:center; font-size:11.5px;
}
.sig-name{color:var(--text);}
.sig-val{font-family:var(--mono); font-size:11px; color:var(--text-dim);
  font-variant-numeric:tabular-nums;}
.sig-tag{
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; min-width:52px; text-align:center;
}
.sig-tag.buy{background:var(--tint-up-strong); color:var(--up);}
.sig-tag.sell{background:var(--tint-down-strong); color:var(--down);}
.sig-tag.neutral{background:var(--tint-neutral); color:var(--text-dim);}
.sig-detail{grid-column:1/-1; font-family:var(--mono); font-size:10px;
  color:var(--text-faint); margin-top:-2px;}

/* Narrative paragraphs */
.narr{font-size:12.5px; line-height:1.65; color:var(--text);
  margin-bottom:12px;}
.narr strong{color:var(--accent); font-weight:650;}
.narr.tension{
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:10px 12px; border-radius:0 3px 3px 0;
}

/* ML horizons */
.mlrow{
  display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px;
  padding:10px 0; border-bottom:1px solid var(--border-soft); align-items:center;
}
.ml-h{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent);}
.ml-use{font-size:11.5px; color:var(--text-dim);}
.ml-p{font-family:var(--mono); font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums;}
.ml-meta{grid-column:1/-1; font-family:var(--mono); font-size:10px;
  color:var(--text-faint);}

.llm-box{
  background:var(--card, var(--bg-raised)); border:1px solid var(--card-edge, var(--border));
  border-radius:3px; padding:14px 16px; font-size:12.5px; line-height:1.7;
  white-space:pre-wrap;
}
.llm-box strong{color:var(--accent);}

.verdict{
  border:1px solid; border-left-width:3px; border-radius:3px;
  padding:13px 14px; margin-bottom:16px;
}
.verdict.bull{border-color:var(--up); background:var(--tint-up-strong);}
.verdict.bear{border-color:var(--down); background:var(--tint-down-strong);}
.verdict.flat{border-color:var(--text-faint); background:var(--tint-neutral);}
.verdict-top{display:flex; align-items:baseline; gap:12px; margin-bottom:8px;}
.verdict-bias{font-size:17px; font-weight:700; letter-spacing:.04em;}
.verdict.bull .verdict-bias{color:var(--up);}
.verdict.bear .verdict-bias{color:var(--down);}
.verdict.flat .verdict-bias{color:var(--text);}
.verdict-score{font-family:var(--mono); font-size:11px; color:var(--text-faint);}
.verdict p{margin:0; font-size:12.5px; line-height:1.6; color:var(--text);}

.hedge-box{
  display:flex; align-items:center; gap:14px; padding:12px 14px;
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:3px; margin-bottom:18px;
}
.hedge-num{font-size:30px; font-weight:700; color:var(--accent);
  font-family:var(--mono); line-height:1;}
.hedge-txt{font-size:11.5px; color:var(--text-dim); line-height:1.5;}
.hedge-txt b{display:block; color:var(--text); font-size:12px; margin-bottom:2px;}

.sec-title{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600; margin:20px 0 9px;
  padding-bottom:5px; border-bottom:1px solid var(--border-soft);
}

.fac{display:grid; grid-template-columns:auto 1fr; gap:3px 10px;
  padding:9px 0; border-bottom:1px solid var(--border-soft);}
.fac-lean{
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:2px; height:fit-content; white-space:nowrap;
}
.fac-lean.bullish{background:var(--tint-up-strong); color:var(--up);}
.fac-lean.bearish{background:var(--tint-down-strong); color:var(--down);}
.fac-lean.neutral{background:var(--tint-neutral); color:var(--text-dim);}
.fac-name{font-size:12px; font-weight:600;}
.fac-head{grid-column:2; font-size:12px; color:var(--text); line-height:1.5;}
.fac-det{grid-column:2; font-family:var(--mono); font-size:10.5px;
  color:var(--text-faint); line-height:1.5;}

.act{padding:11px 0; border-bottom:1px solid var(--border-soft);}
.act-top{display:flex; gap:9px; align-items:baseline;}
.act-num{
  font-family:var(--mono); font-size:10px; font-weight:700; color:var(--accent);
  border:1px solid var(--accent-dim); border-radius:2px; padding:1px 5px;
  flex-shrink:0;
}
.act-title{font-size:12.5px; font-weight:600; line-height:1.45;}
.act-line{font-size:11.5px; color:var(--text-dim); line-height:1.55;
  margin-top:5px; padding-left:30px;}
.act-line b{color:var(--text-faint); font-weight:600;}

.lv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.lv{background:var(--bg-raised); border:1px solid var(--border);
  border-radius:3px; padding:8px 10px;}
.lv-k{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint);}
.lv-v{font-family:var(--mono); font-size:14px; font-weight:600; margin-top:3px;}

.inval{font-size:11.5px; color:var(--text-dim); line-height:1.6;
  padding:6px 0 6px 16px; position:relative;}
.inval::before{content:'▸'; position:absolute; left:0; color:var(--accent);}

.caveat{
  margin-top:22px; padding:11px 13px; border:1px dashed var(--border);
  border-radius:3px; font-size:11px; line-height:1.6; color:var(--text-faint);
}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:var(--bg-panel);}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);}

/* Narrow screens: drop the model panel AND its handle, otherwise a dead
   5px track and an orphaned resizer are left behind. */
@media (max-width:1100px){
  .layout{grid-template-columns:var(--left) 5px minmax(280px, 1fr);}
  .sidepanel, #resizeRight{display:none;}
}

/* Guardrail verdict on generated prose */
.guard{
  border:1px solid; border-left-width:3px; border-radius:3px;
  padding:9px 12px; margin-bottom:12px; font-size:11.5px; line-height:1.6;
}
.guard.pass{border-color:var(--up); background:var(--tint-up-strong); color:#8fd3cb;}
.guard.fail{border-color:var(--down); background:var(--tint-down-strong); color:#f3aaa3;}
.guard b{display:block; margin-bottom:5px; color:var(--text);}

/* Provenance line under a generated note */
.prov{
  font-family:var(--mono); font-size:10px; color:var(--text-faint);
  margin-top:8px; line-height:1.7;
}
.cache-tag{
  display:inline-block; padding:1px 6px; border-radius:2px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; font-size:10px;
  background:var(--tint-blue); color:var(--blue); margin-right:4px;
}
.cache-tag.fresh{background:var(--tint-accent-strong); color:var(--accent);}
.link-btn{
  background:transparent; border:none; color:var(--accent);
  text-decoration:underline; font-size:10px; padding:0 0 0 4px;
  font-family:inherit;
}
.link-btn:hover{color:var(--on-accent);}

/* Language toggle — only meaningful on the Combined tab */
.head-right{display:flex; align-items:center; gap:10px;}
.lang-toggle{display:flex; border:1px solid var(--accent); border-radius:3px;
  overflow:hidden;}
.lang{
  background:transparent; border:none; color:var(--text-dim);
  padding:4px 10px; font-size:11px; font-weight:600; letter-spacing:.03em;
}
.lang:hover{background:var(--bg-raised); color:var(--text);}
.lang.active{background:var(--accent-dim); color:var(--on-accent);}
.lang-toggle.disabled{opacity:.35; pointer-events:none;}

/* Thai needs a slightly taller line to stay legible at this size */
.llm-box.th{line-height:1.95; font-size:13px;}
.numcheck{
  margin-top:6px; font-family:var(--mono); font-size:10px;
  color:var(--text-faint);
}
.numcheck.bad{color:var(--down);}

/* ==================================================================
   PIPELINE PARAMETERS — left-panel list + overlay detail modal
   ================================================================== */

.panel-head-x { display:flex; justify-content:space-between; align-items:center; }
.head-count {
  font-size:10px; color:#5a6675; background:#161d26;
  padding:1px 5px; border-radius:8px;
}
/* The parameter list can be long; give it its own scroll so it never pushes
   the CFTC panel off the bottom of the sidebar.

   flex:0 0 auto and min-height are BOTH required. The sidebar is a flex
   column, and a flex item's default min-height:auto still lets it be shrunk
   toward zero when siblings compete for space — which is exactly what
   happened: all 38 rows were present in the DOM with clientHeight 0, so the
   section rendered as a heading with nothing under it and looked like a
   failed fetch rather than a layout bug. */
.param-body {
  flex:0 0 auto; min-height:180px; max-height:34vh; overflow-y:auto;
}

.pm-row {
  display:grid; grid-template-columns:8px 1fr auto;
  gap:6px; align-items:center;
  padding:3px 8px; cursor:pointer; font-size:11px;
  border-left:2px solid transparent;
}
.pm-row:hover { background:#141b24; border-left-color:#4c8fdb; }
.pm-name { color:#c3ccd8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-unit { color:#5a6675; font-size:10px; }
.pm-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.i-bull { background:#26a69a; }
.i-bear { background:#ef5350; }
.i-ctx  { background:#5a6675; }
.wl-empty { padding:10px; color:#5a6675; font-size:11px; }

.pm-scrim {
  position:fixed; inset:0; background:rgba(4,7,11,.72);
  z-index:90; backdrop-filter:blur(2px);   /* above every page (70) */
}
.pm-modal {
  position:fixed; z-index:91;              /* the modal is always topmost */
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(820px, 94vw); max-height:90vh;
  display:flex; flex-direction:column;
  background:var(--on-accent); border:1px solid #232c38; border-radius:8px;
  box-shadow:0 20px 60px var(--shadow);
}
/* display:flex on .pm-modal beats the [hidden] attribute unless this is
   forced — the exact specificity bug that once left the analysis drawer
   permanently visible over a Loading state. */
[hidden] { display:none !important; }

.pm-head {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:12px 14px; border-bottom:1px solid #1b2230;
}
.pm-title { font-size:15px; color:#e6edf3; font-weight:600; }
.pm-sub { font-size:10px; color:#5a6675; margin-top:2px; }
.pm-head-right { display:flex; gap:8px; align-items:center; }
.pm-range { display:flex; gap:2px; }
.pmr {
  background:#141b24; border:1px solid #232c38; color:#8b98a8;
  font-size:10px; padding:3px 7px; border-radius:3px; cursor:pointer;
}
.pmr.active { background:#1e2b3d; color:#e6edf3; border-color:#31465f; }
.pm-close {
  background:none; border:none; color:#5a6675; font-size:15px; cursor:pointer;
}
.pm-close:hover { color:#e6edf3; }

.pm-body { overflow-y:auto; padding:12px 14px 16px; }
.pm-chartwrap { border:1px solid #1b2230; border-radius:4px; overflow:hidden; }
#pmChart { width:100%; height:260px; }

.pm-stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(104px,1fr));
  gap:8px; margin:12px 0;
}
.pm-stat { background:#111823; border:1px solid #1b2230; border-radius:4px; padding:6px 8px; }
.pm-slab { font-size:10px; color:#5a6675; text-transform:uppercase; letter-spacing:.4px; }
.pm-sval { font-size:13px; color:#e6edf3; margin-top:2px; }
.pm-sval.up { color:#26a69a; } .pm-sval.down { color:#ef5350; }
.pm-sval.flat { color:#8b98a8; } .pm-sval.muted { color:#8b98a8; }
.pm-weak { display:block; font-size:10px; color:#c8922e; margin-top:1px; }

.pm-impact {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  background:#111823; border:1px solid #1b2230; border-left:2px solid #31465f;
  border-radius:4px; padding:8px 10px; font-size:11px; color:#c3ccd8;
}
.pm-nuance { flex-basis:100%; color:#8b98a8; font-size:10.5px; line-height:1.5; margin-top:4px; }

.pm-notehead {
  display:flex; align-items:center; gap:8px;
  margin:14px 0 6px; padding-bottom:5px; border-bottom:1px solid #1b2230;
}
#pmNoteTitle { font-size:11px; color:#8b98a8; text-transform:uppercase; letter-spacing:.5px; }
.pm-notemeta { font-size:10px; color:#5a6675; flex:1; }
.pm-regen {
  background:#141b24; border:1px solid #232c38; color:#8b98a8;
  font-size:10px; padding:3px 8px; border-radius:3px; cursor:pointer;
}
.pm-regen:hover { color:#e6edf3; border-color:#31465f; }

.pm-note { font-size:12px; line-height:1.62; color:#c3ccd8; }
.pm-sec { margin-bottom:9px; }
.pm-sech { font-size:10px; color:var(--blue); text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }
/* Body of every generated note (param modal, news read, brief, scenarios).
   Was a hardcoded light grey (#c3ccd8) — fine on the dark terminal, but ~1.4:1
   on the light theme's white ground, i.e. unreadable. `--text-dim` adapts:
   #9aa7b6 on dark, #4a5665 on light (~7:1). `.nw-secb` is here because the news
   read renames pm-sec → nw-sec, so the old rule never reached it. */
.pm-secb, .pm-p, .nw-secb, .nw-p { color:var(--text-dim); }
.pm-err { color:#ef5350; font-size:11px; }
.pm-gr { margin-top:10px; padding:6px 9px; border-radius:4px; font-size:10.5px; }
.pm-gr.ok  { background:#10201b; border:1px solid #1d4034; color:#4db6a0; }
.pm-gr.bad { background:#241416; border:1px solid #4d2126; color:#e8969b; }
.pm-gr ul { margin:4px 0 0 14px; }

.pm-pending {
  color:#c8922e; font-size:11px; line-height:1.6;
  background:#1e1a12; border:1px solid #3d3218; border-radius:4px; padding:8px 10px;
}

/* ==================================================================
   BENCHMARK PAGE — the 70:30 revenue-share surface
   ================================================================== */
.ghost.accent { border-color:var(--accent-dim); color:var(--accent); }
.ghost.accent:hover { background:var(--accent-dim); color:var(--on-accent); }

.bm-page {
  /* Starts BELOW the top bar, not over it. The bar carries the single global
     language toggle, so it has to stay visible and clickable while any page is
     open — otherwise each page needs its own duplicate toggle. */
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
  z-index:70; background:var(--bg);
  display:flex; flex-direction:column;
}
.bm-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 20px; border-bottom:2px solid var(--accent);
  background:var(--bg-panel);
}
.bm-eyebrow {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
}
.bm-title { font-size:19px; font-weight:600; margin-top:3px; }
.bm-top-right { display:flex; align-items:center; gap:14px; }
.bm-src { font-family:var(--mono); font-size:10px; color:var(--text-faint); }
.bm-close { background:none; border:none; color:var(--text-faint); font-size:17px; cursor:pointer; }
.bm-close:hover { color:var(--text); }

.bm-body { overflow-y:auto; padding:18px 20px 40px; }
.bm-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:12px; margin-bottom:18px;
}
.bm-card {
  background:var(--bg-panel); border:1px solid var(--border);
  border-top:2px solid var(--border); padding:12px 14px;
}
.bm-card.hero { border-top-color:var(--accent); }
.bm-card.warn { border-top-color:#c8922e; }
.bm-card h3 {
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-faint); margin:0 0 6px; font-weight:600;
}
.bm-big {
  font-family:var(--mono); font-size:26px; font-variant-numeric:tabular-nums;
  color:var(--text); line-height:1.1;
}
.bm-sub { font-size:11.5px; color:var(--text-dim); margin-top:5px; line-height:1.55; }
.bm-unit { font-size:12px; color:var(--text-faint); margin-left:5px; }

.bm-stance {
  font-family:var(--mono); font-size:15px; letter-spacing:.03em;
  padding:9px 12px; margin:2px 0 8px; border-radius:2px;
}
.bm-stance.more { background:#10201b; color:#4db6a0; border:1px solid #1d4034; }
.bm-stance.less { background:#241416; color:#e8969b; border:1px solid #4d2126; }
.bm-stance.flat { background:var(--bg-raised); color:var(--text-dim); border:1px solid var(--border); }

.bm-sec { margin:22px 0 10px; }
.bm-sec h2 {
  font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text); margin:0 0 4px;
  border-bottom:1px solid var(--border); padding-bottom:6px;
}
.bm-sec p.note { font-size:12px; color:var(--text-dim); margin:8px 0 0; max-width:76ch; line-height:1.6; }

.bm-table { width:100%; border-collapse:collapse; background:var(--bg-panel); font-size:12px; }
.bm-table th {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); text-align:left;
  padding:7px 10px; background:var(--bg-raised); font-weight:500;
}
.bm-table td { padding:6px 10px; border-bottom:1px solid var(--border-soft); color:var(--text-dim); }
.bm-table td.n { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; color:var(--text); }
.bm-table tr.zero td { background:var(--bg-raised); }
.bm-table td.pos { color:var(--up); } .bm-table td.neg { color:var(--down); }
.bm-scroll { overflow-x:auto; border:1px solid var(--border); }

.bm-caveat {
  background:#1e1a12; border:1px solid #3d3218; border-left:2px solid #c8922e;
  padding:10px 13px; font-size:12px; color:#d3b477; line-height:1.6;
  margin:14px 0; max-width:80ch;
}
.bm-method {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  padding:11px 14px; font-size:11.5px; color:var(--text-dim);
  line-height:1.65; max-width:80ch;
}

.bm-stale-banner {
  background:#2a1416; border:1px solid #5c2328; border-left:3px solid var(--down);
  padding:11px 14px; margin:0 0 16px; font-size:12.5px; color:#e8969b;
  line-height:1.6; max-width:88ch;
}
.bm-stale-banner b { display:block; margin-bottom:4px; color:#ff8a85;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.bm-card.stale { border-top-color:var(--down); }
.bm-stale-tag {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em;
  background:#3d1a1d; color:#e8969b; padding:1px 5px; margin-left:6px;
  border-radius:2px; text-transform:uppercase;
}

.bm-est-tag {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em;
  background:var(--accent-dim); color:var(--on-accent); padding:1px 5px; margin-left:6px;
  border-radius:2px; text-transform:uppercase;
}

.bm-prov-tag {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em;
  background:#2d3a4d; color:#8fb4e0; padding:1px 5px; margin-left:6px;
  border-radius:2px; text-transform:uppercase;
}

/* ---------------- backtest page ---------------- */
.ghost.warn { border-color:#5c2328; color:#e8969b; }
.ghost.warn:hover { background:#3d1a1d; color:var(--on-accent); }
.bt-verdict {
  padding:12px 16px; margin-bottom:16px; font-size:13px; line-height:1.6;
  border-radius:3px; max-width:88ch;
}
.bt-verdict.fail { background:#2a1416; border:1px solid #5c2328; border-left:3px solid var(--down); color:#e8969b; }
.bt-verdict.pass { background:#10201b; border:1px solid #1d4034; border-left:3px solid var(--up); color:#4db6a0; }
.bt-verdict b { display:block; font-family:var(--mono); font-size:13px; margin-bottom:5px; }
.bt-row-pass td { background:var(--tint-up-strong); }
.bt-row-fail td { background:var(--tint-down-strong); }
.bt-tag { font-family:var(--mono); font-size:10px; padding:1px 5px; border-radius:2px; }
.bt-tag.pass { background:#1d4034; color:#4db6a0; }
.bt-tag.fail { background:#3d1a1d; color:#e8969b; }
.bt-tag.weak { background:#3a2f14; color:#c8922e; }
.bt-chartwrap { border:1px solid var(--border); border-radius:3px; margin:10px 0 18px; }
#btChart { width:100%; height:220px; }

/* ---------------- news page ---------------- */
.ghost.news { border-color:#31465f; color:#8fb4e0; }
.ghost.news:hover { background:#1e2b3d; color:var(--on-accent); }
.news-dot {
  display:inline-block; min-width:15px; padding:0 4px; margin-left:4px;
  background:var(--blue); color:var(--on-accent); border-radius:7px;
  font-family:var(--mono); font-size:10px; line-height:14px; text-align:center;
}
/* The reading column is capped and the whole layout stops widening on big
   monitors: prose that runs the full width of a 2000px screen is ~160
   characters per line, roughly twice the comfortable maximum, which is why
   it read as a wall. Headlines get more room, the analysis gets less. */
.news-layout {
  display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,680px);
  gap:32px; max-width:1240px; margin:0 auto;   /* centred, not left-hugging */
}
@media (max-width:900px){ .news-layout{ grid-template-columns:1fr; max-width:640px; } }

.nw-item {
  display:block; text-decoration:none; padding:11px 13px; margin-bottom:7px;
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-left:2px solid var(--border); transition:border-color .12s;
}
.nw-item:hover { border-left-color:var(--blue); background:var(--bg-raised); }
.nw-item.hot { border-left-color:var(--accent); }
.nw-title { font-size:14px; color:var(--text); line-height:1.5; }
.nw-meta {
  display:flex; gap:9px; align-items:center; margin-top:6px;
  font-family:var(--mono); font-size:10px; color:var(--text-faint);
}
.nw-score { background:var(--bg-raised); padding:0 5px; border-radius:2px; color:var(--accent); }
.nw-terms { color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Long-form prose: bigger, airier, brighter, and never wider than ~66
   characters. This is the block the desk actually reads. */
.nw-note {
  font-size:14.5px; line-height:1.75; color:var(--text);
  max-width:64ch;
}
.nw-sec { margin-bottom:16px; }
.nw-sech {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin-bottom:5px;
}
.nw-empty { padding:16px; color:var(--text-faint); font-size:12px; }

/* ---------- parameter overlay on the main chart ---------- */
.pm-row { grid-template-columns:8px 1fr auto auto; }
.pm-row.overlaid { background:var(--bg-raised); border-left-color:var(--blue); }
.pm-detail {
  background:none; border:none; color:var(--text-faint); font-size:12px;
  padding:0 2px; line-height:1; opacity:0; transition:opacity .1s;
}
.pm-row:hover .pm-detail { opacity:1; }
.pm-detail:hover { color:var(--text); }

.overlay-legend {
  display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 6px;
}
.ov-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; color:var(--text-dim);
  background:var(--bg-panel); border:1px solid var(--border);
  border-left-width:2px; padding:2px 6px; border-radius:2px;
}
.ov-swatch { width:8px; height:2px; display:inline-block; }
.ov-val { color:var(--text); font-variant-numeric:tabular-nums; }
.ov-x { cursor:pointer; color:var(--text-faint); margin-left:2px; }
.ov-x:hover { color:var(--down); }

/* =================================================================
   UX REVIEW FIXES
   ================================================================= */

/* (--text-faint was lifted here in a patch; folded back into the palette block
   at the top of this file so the tokens stay the single source of truth. A
   token redefined 950 lines below its own definition silently wins, and the
   next person to edit the palette sees no effect.) */

/* P0#1 + P2#12 + P2#13 — the Benchmark and Backtest pages ran prose and
   tables the full width of the monitor (~1870px, ~250 chars/line — the "hard
   to read" complaint). Cap the whole page like the News page already is, and
   cap running prose to a readable measure on top of that. Data tables inherit
   the page cap; if one is genuinely wider it still scrolls inside .bm-scroll. */
/* Cap the WHOLE page and centre it — so every child (tables and prose alike)
   shares one left edge — then narrow the running prose within that column.
   This is how the News page already reads well, and it removes the
   prose-vs-table misalignment rather than creating it. */
.bm-body { max-width:1220px; margin:0 auto; }
.bm-body .note,
.bm-body .bt-verdict,
.bm-body .bm-caveat,
.bm-body .bm-method,
.bm-body .bm-stale-banner {
  max-width:74ch;
}

/* P0#2 — the Signals toggle now shows a pressed state when the panel is off. */
.ghost.toggled-off {
  background:var(--bg-raised); color:var(--text-faint);
  border-color:var(--border); position:relative;
}
.ghost.toggled-off::after {
  content:'○'; margin-left:5px; font-size:10px; opacity:.7;
}

/* P1#3 — the ⤢ detail affordance was opacity:0 until hover and 11px, so the
   two-different-actions-per-row design was undiscoverable. Persistently
   visible now, bigger hit target, brighter on hover. */
.pm-detail { opacity:.4 !important; font-size:13px; padding:0 4px; }
.pm-row:hover .pm-detail { opacity:1 !important; }
.pm-detail:hover { color:var(--accent); }

/* P2#14 — pipeline rows were 3px vertical padding / 19px tall for 49 items.
   The panel scrolls anyway, so a little air costs nothing. */
.pm-row { padding-top:5px; padding-bottom:5px; }

/* P2#11 — FAIL verdicts were grey text on 5%-opacity red: the loudest word in
   the backtest column barely read. Give it weight without alarm-red. */
.bt-tag.fail { background:#3a1c1f; color:#f0a0a4; font-weight:600; }

/* P1#7 — the factor-stack read must not be mistaken for the ML signal that
   the platform deliberately refuses to publish. */
.src-tag {
  font-family:var(--mono); font-size:10px; color:var(--text-faint);
  letter-spacing:.02em; line-height:1.5; margin-bottom:8px;
  padding:5px 8px; background:var(--bg-panel); border-left:2px solid var(--border);
}

/* =============== Hedge Desk =============== */
.ghost.hedge { border-color:var(--accent); color:var(--accent); font-weight:600; }
.ghost.hedge:hover { background:var(--accent-dim); color:var(--on-accent); }

.hd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin-bottom:8px; }
.hd-card { background:var(--bg-panel); border:1px solid var(--border); border-top:2px solid var(--border); padding:13px 15px; }
.hd-card.act { border-top-color:var(--accent); }
.hd-card.risk { border-top-color:var(--down); }
.hd-card.bench { border-top-color:var(--blue); }
.hd-card h3 { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin:0 0 7px; }
.hd-big { font-family:var(--mono); font-size:25px; font-variant-numeric:tabular-nums; color:var(--text); line-height:1.1; }
.hd-big.up { color:var(--up); } .hd-big.down { color:var(--down); }
.hd-unit { font-size:12px; color:var(--text-faint); margin-left:4px; }
.hd-sub { font-size:12px; color:var(--text-dim); margin-top:6px; line-height:1.55; }
.hd-sub b { color:var(--text); }

.hd-sec { margin:22px 0 10px; }
.hd-sec h2 { font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--text); margin:0 0 4px; border-bottom:1px solid var(--border); padding-bottom:6px; }

.hd-book { background:var(--bg-panel); border:1px solid var(--border); border-left:2px solid var(--accent); padding:13px 15px; margin-bottom:6px; }
.hd-book-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end; }
.hd-field label { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:3px; }
.hd-field input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:13px; padding:5px 8px; border-radius:3px; }
.hd-field input:focus { outline:1px solid var(--accent); }
.hd-save { background:var(--accent); color:var(--on-accent); border:none; font-weight:600; font-size:12px; padding:6px 14px; border-radius:3px; }
.hd-book-prompt { font-size:12px; color:#d3b477; line-height:1.6; margin-bottom:10px; }

.hd-watch a { display:block; text-decoration:none; padding:7px 10px; margin-bottom:5px; background:var(--bg-panel); border:1px solid var(--border-soft); border-left:2px solid var(--border); }
.hd-watch a:hover { border-left-color:var(--blue); background:var(--bg-raised); }
.hd-watch .t { font-size:12.5px; color:var(--text); line-height:1.4; }
.hd-watch .m { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); margin-top:3px; }
.hd-act { font-size:12.5px; color:var(--text-dim); line-height:1.6; padding:4px 0; border-bottom:1px solid var(--border-soft); }
.hd-act b { color:var(--text); }
.hd-gap-note { font-size:11px; color:var(--text-faint); margin-top:12px; line-height:1.6; max-width:74ch; }

/* =============== Data Sources config =============== */
.cfg-note { font-size:12px; color:var(--text-dim); max-width:74ch; line-height:1.6; margin-bottom:16px; }
.cfg-note b { color:var(--text); }
.cfg-table { width:100%; border-collapse:collapse; background:var(--bg-panel); max-width:1100px; }
.cfg-table th { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); text-align:left; padding:8px 12px; background:var(--bg-raised); font-weight:500; }
.cfg-table td { padding:9px 12px; border-bottom:1px solid var(--border-soft); font-size:12.5px; color:var(--text-dim); vertical-align:middle; }
.cfg-table .src { color:var(--text); font-weight:500; }
.cfg-table .sub { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); }
.cfg-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; }
.cfg-dot.live { background:var(--up); } .cfg-dot.dark { background:var(--accent); } .cfg-dot.off { background:var(--text-faint); }
.cfg-int { width:110px; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:12px; padding:4px 6px; border-radius:3px; text-align:right; }
.cfg-int:focus { outline:1px solid var(--accent); }
.cfg-toggle { cursor:pointer; font-family:var(--mono); font-size:11px; padding:3px 10px; border-radius:3px; border:1px solid var(--border); background:var(--bg); }
.cfg-toggle.on { background:#10201b; color:#4db6a0; border-color:#1d4034; }
.cfg-toggle.off { background:#241416; color:#e8969b; border-color:#4d2126; }
.cfg-save { background:var(--accent); color:var(--on-accent); border:none; font-weight:600; font-size:11px; padding:4px 12px; border-radius:3px; }
.cfg-n { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }

/* =============== top-bar navigation =============== */
/* Page navigation, moved out of the chart toolbar (where it clipped off the
   right edge). One coherent style — Hedge Desk is the single primary, the rest
   are peers — instead of the five-different-colours "rainbow" the review
   flagged. */
.topnav { display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav-btn {
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  padding:5px 11px; border-radius:4px; font-size:12px; font-weight:500;
  letter-spacing:.01em; white-space:nowrap; position:relative;
}
.nav-btn:hover { background:var(--bg-raised); color:var(--text); border-color:var(--text-faint); }
/* The amber marks WHICH PAGE IS OPEN — nothing else. Hedge Desk used to carry
   a permanent `primary` treatment on top of that, so two buttons read as
   selected at the same time and the highlight appeared stuck on a page that
   was not open. A nav has exactly one active item. */
.nav-btn.primary { font-weight:600; }
.nav-btn.active,
.nav-btn.primary.active {
  background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); font-weight:600;
}
.nav-btn.active:hover,
.nav-btn.primary.active:hover { background:#f0b84a; color:var(--on-accent); }
.nav-btn.icon { padding:5px 9px; font-size:14px; }
/* Signals is a toggle, not a page — pressed state when the panel is hidden. */
.nav-btn.toggled-off { background:var(--bg-raised); color:var(--text-faint); }
.nav-btn.toggled-off::after { content:' ○'; font-size:10px; opacity:.7; }
/* The topbar gap is generous; tighten it just before the clock. */
.topbar-right { margin-left:14px; }

/* ---------------- scenarios page ---------------- */
/* The matrix is wide by nature — every action is a column. It scrolls inside
   its own container so the page body never scrolls sideways. */

.hz-toggle { display:flex; gap:2px; margin-right:12px; }
.hz-btn {
  background:var(--bg-panel); color:var(--text-dim); border:1px solid var(--border);
  padding:5px 11px; font-size:11px; border-radius:3px; letter-spacing:.02em;
}
.hz-btn:hover { color:var(--text); border-color:var(--text-faint); }
.hz-btn.on { background:var(--accent-dim); color:var(--on-accent); border-color:var(--accent); }

.scen-warn {
  background:var(--tint-down-strong); border:1px solid var(--tint-down-strong);
  border-left:3px solid var(--down); color:#f3b6b4;
  padding:11px 14px; border-radius:3px; margin-bottom:12px;
  font-size:12px; line-height:1.6; max-width:88ch;
}

.scen-hero {
  display:flex; justify-content:space-between; align-items:flex-start; gap:28px;
  background:var(--bg-panel); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:3px;
  padding:18px 20px; margin-bottom:14px; flex-wrap:wrap;
}
.scen-eyebrow {
  font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:6px;
}
.scen-pick { font-size:24px; font-weight:700; color:var(--accent); line-height:1.2; }
.scen-sub { font-size:12px; color:var(--text-dim); margin-top:7px; max-width:60ch; line-height:1.6; }
.scen-hero-r { display:flex; gap:22px; flex-wrap:wrap; }
.scen-stat { text-align:right; }
.scen-stat span {
  display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:3px;
}
.scen-stat b { font-family:var(--mono); font-size:16px; font-weight:600; }

.scen-crit { font-size:12px; color:var(--text-dim); line-height:1.65; max-width:74ch; margin:10px 0; }
.scen-crit.caveat { color:var(--text-faint); border-left:2px solid var(--border); padding-left:11px; }

.scen-gap {
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-radius:3px; padding:13px 16px; margin:14px 0; max-width:88ch;
}
.scen-gap b { color:var(--accent); font-size:12px; }
.scen-gap p { font-size:12px; color:var(--text-dim); line-height:1.65; margin:6px 0 0; }

.scen-scroll { overflow-x:auto; }
.scen-tbl { width:100%; border-collapse:collapse; font-size:12px; min-width:820px; }
.scen-tbl th {
  text-align:right; padding:8px 10px; font-size:10px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
  border-bottom:1px solid var(--border); vertical-align:bottom;
  /* The tables are tall enough to scroll the headers away, and an unlabelled
     column of percentages is worse than useless — it invites misreading. */
  position:sticky; top:0; z-index:2; background:var(--bg);
}
.scen-tbl th.s-name, .scen-tbl th.s-freq { text-align:left; }
.scen-tbl td { padding:9px 10px; border-bottom:1px solid var(--border-soft); vertical-align:top; }
.scen-tbl td.n { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.scen-tbl td.n.pos { color:var(--up); }
.scen-tbl td.n.neg { color:var(--down); }
.scen-tbl td.n.best { background:var(--tint-accent-strong); font-weight:650; }
.scen-tbl td.s-name { max-width:22ch; }
.scen-tbl td.s-px { text-align:right; font-family:var(--mono); white-space:nowrap; }
.scen-tbl .s-kind, .scen-tbl .s-move, .scen-tbl .s-usd {
  font-size:10px; color:var(--text-faint); font-weight:400; margin-top:2px;
}
.scen-tbl td.s-freq { font-size:11px; color:var(--text-dim); max-width:24ch; line-height:1.5; }
.scen-tbl tr.tone-up  td.s-name b { color:var(--up); }
.scen-tbl tr.tone-down td.s-name b { color:var(--down); }
.scen-tbl tr.worst td { border-top:1px solid var(--border); background:var(--bg-raised); }

.scen-acts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; }
.scen-act {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:3px; padding:12px 14px;
}
.scen-act.pick { border-color:var(--accent); background:var(--tint-accent-strong); }
.scen-act b { font-size:12px; }
.scen-act p { font-size:11px; color:var(--text-dim); line-height:1.6; margin:6px 0 0; }

.scen-note { max-width:80ch; }
.scen-assume {
  font-size:12px; color:var(--text-dim); line-height:1.7;
  max-width:80ch; padding-left:18px; margin:6px 0 30px;
}
.scen-assume li { margin-bottom:6px; }

/* ---------------- LLM service configuration ---------------- */

.llm-active {
  border-radius:3px; padding:12px 15px; margin:14px 0 18px;
  font-size:12px; line-height:1.6; max-width:88ch;
  background:var(--bg-panel); border:1px solid var(--border);
}
.llm-active.ok { border-left:3px solid var(--up); }
.llm-active.bad { border-left:3px solid var(--down); background:var(--tint-down-strong); }
.llm-active b { color:var(--accent); }
.llm-why { color:var(--text-dim); margin-top:6px; }

.llm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.llm-card {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:3px; padding:14px 16px; display:flex; flex-direction:column;
}
.llm-card.on { border-color:var(--accent); background:var(--tint-accent-strong); }
.llm-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.llm-pick { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.llm-pick input { accent-color:var(--accent); cursor:pointer; }
.llm-badge {
  font-size:10px; letter-spacing:.08em; font-weight:700; color:var(--on-accent);
  background:var(--accent); padding:2px 6px; border-radius:2px;
}
.llm-detail { font-size:11px; color:var(--text-dim); line-height:1.6; margin:8px 0 10px; }

.llm-fields { display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }
.llm-fields label {
  display:flex; flex-direction:column; gap:3px;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
}
.llm-fields input {
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:11px; padding:6px 8px; border-radius:2px;
}
.llm-fields input:focus { outline:none; border-color:var(--accent); }
.llm-fields input:disabled { color:var(--text-faint); background:var(--bg-raised); }

.llm-actions { margin-top:auto; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.llm-test {
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text-dim);
  font-size:11px; padding:5px 11px; border-radius:2px;
}
.llm-test:hover { color:var(--text); border-color:var(--text-faint); }
.llm-result { font-size:10px; line-height:1.5; color:var(--text-faint); flex:1; min-width:0; }
.llm-result.ok { color:var(--up); }
.llm-result.bad { color:var(--down); }

.llm-sec-note {
  margin-top:18px; padding:12px 15px; border-radius:3px; max-width:88ch;
  background:var(--bg-raised); border:1px solid var(--border-soft);
  border-left:3px solid var(--blue);
  font-size:11px; color:var(--text-dim); line-height:1.65;
}
.llm-sec-note b { color:var(--text); }

.llm-override {
  margin-top:18px; padding:13px 16px; border-radius:3px; max-width:88ch;
  background:var(--tint-accent-strong); border:1px solid var(--tint-accent-strong);
  border-left:3px solid var(--accent);
}
.llm-override b { color:var(--accent); font-size:12px; }
.llm-override > p { font-size:11px; color:var(--text-dim); line-height:1.65; margin:6px 0 10px; }
.llm-ovr-tbl { width:100%; border-collapse:collapse; font-size:11px; }
.llm-ovr-tbl td { padding:7px 10px 7px 0; vertical-align:top; border-top:1px solid var(--border-soft); }
.llm-ovr-tbl td:first-child { white-space:nowrap; width:1%; }
.llm-ovr-tbl code {
  font-family:var(--mono); font-size:10.5px; color:var(--accent);
  background:var(--bg); padding:2px 6px; border-radius:2px;
}
.llm-ovr-tbl td b { color:var(--text); font-size:11px; }
.llm-ovr-tbl td div { color:var(--text-dim); line-height:1.6; margin-top:3px; }

.nw-tfail {
  background:var(--tint-down-strong); border:1px solid var(--tint-down-strong);
  border-left:3px solid var(--down); color:#f3b6b4;
  padding:10px 13px; border-radius:3px; margin-bottom:12px;
  font-size:12px; line-height:1.6;
}
.nw-tfail div { color:var(--text-dim); font-size:11px; margin-top:5px; }






/* ---------------- ask-the-data chat ---------------- */
/* NOT a grid child. The layout is a fixed 5-column grid, and adding a sixth
   element broke the template outright — the computed columns collapsed from
   five to three and both right-hand panels vanished. A fixed panel is
   independent of that math and can never disturb the chart's sizing. */
.chatpanel {
  position:fixed; top:var(--header-h); right:0; bottom:0;
  /* z-index 80 puts Ask Mitrix ABOVE the overlay pages (70) so it is reachable
     from every screen — the Daily Brief, Hedge Desk, Scenarios, all of them.
     It was 45, which is why the chat only worked on the bare chart: the moment
     any page opened, that page (70) drew over the panel and the question you
     were asking about the screen in front of you became the one screen you
     could not ask from. Still below the parameter modal (90/91), which must
     stay topmost. */
  width:min(380px, 40vw); z-index:80;
  background:var(--bg-panel); border-left:1px solid var(--border);
  box-shadow:-14px 0 36px var(--shadow);
  display:flex; flex-direction:column; padding:0;
}
/* The base .sidepanel rule sets display:flex, which beats the `hidden`
   attribute — so this has to restore it explicitly or the panel is always up. */
.chatpanel[hidden] { display:none; }
.chatpanel .panel-head-x { display:flex; justify-content:space-between; align-items:center; }
.chat-x {
  background:none; border:none; color:var(--text-faint); font-size:13px;
  padding:0 2px; line-height:1;
}
.chat-x:hover { color:var(--text); }

.chat-log { flex:1; overflow-y:auto; padding:12px; display:flex;
  flex-direction:column; gap:10px; }

.chat-intro p { font-size:11.5px; color:var(--text-dim); line-height:1.65; margin:0 0 8px; }
.chat-intro b { color:var(--text); }
.chat-intro .chat-rules { color:var(--text-faint); font-size:11px;
  border-left:2px solid var(--border); padding-left:9px; }
.chat-suggest { display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.chat-chip {
  text-align:left; background:var(--bg-raised); border:1px solid var(--border-soft);
  color:var(--text-dim); font-size:11px; padding:7px 9px; border-radius:3px;
  line-height:1.45;
}
.chat-chip:hover { border-color:var(--accent-dim); color:var(--text); }

.chat-msg { display:flex; flex-direction:column; gap:3px; max-width:100%; }
.chat-msg.user { align-items:flex-end; }
.chat-msg .chat-body {
  font-size:12px; line-height:1.6; padding:8px 11px; border-radius:4px;
  max-width:92%; word-wrap:break-word;
}
.chat-msg.user .chat-body { background:var(--accent-dim); color:var(--on-accent); }
.chat-msg.bot .chat-body { background:var(--bg-raised); color:var(--text);
  border:1px solid var(--border-soft); }
.chat-msg.err .chat-body { border-color:var(--tint-down-strong); color:#f3b6b4; }
.chat-msg .chat-body strong { color:var(--accent); }
.chat-meta { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); padding:0 2px; }
.chat-meta .ok { color:var(--up); }

.chat-warn {
  background:var(--tint-down-strong); border-left:2px solid var(--down);
  color:#f3b6b4; padding:7px 9px; border-radius:3px; margin-bottom:8px;
  font-size:11px; line-height:1.55;
}
.chat-warn div { color:var(--text-dim); margin-top:4px; font-size:10.5px; }

.chat-dots { display:inline-flex; gap:4px; }
.chat-dots i {
  width:5px; height:5px; border-radius:50%; background:var(--text-faint);
  animation:chatpulse 1.2s infinite;
}
.chat-dots i:nth-child(2){ animation-delay:.2s; }
.chat-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes chatpulse { 0%,60%,100%{opacity:.25;} 30%{opacity:1;} }

.chat-input {
  display:flex; gap:6px; padding:10px; border-top:1px solid var(--border);
  background:var(--bg-panel);
}
.chat-input textarea {
  flex:1; resize:none; background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:var(--font); font-size:12px;
  padding:8px 10px; border-radius:3px; line-height:1.5; max-height:120px;
}
.chat-input textarea:focus { outline:none; border-color:var(--accent); }
#chatSend {
  background:var(--accent); color:var(--on-accent); border:none; border-radius:3px;
  width:32px; font-size:15px; font-weight:700; flex-shrink:0;
}
#chatSend:disabled { background:var(--bg-raised); color:var(--text-faint); }

/* The brand doubles as the home control, so it has to look pressable without
   turning into a loud button in a bar full of them. */
.brand {
  background:none; border:none; padding:4px 6px; margin-left:-6px;
  border-radius:3px; cursor:pointer;
}
.brand:hover { background:var(--bg-raised); }
.brand:hover .mark { box-shadow:0 0 14px var(--accent); }
.brand:focus-visible { outline:1px solid var(--accent); outline-offset:1px; }

/* The month-selection card: a decision that needs no forecast, so it earns
   the same visual weight as the benchmark. */
.hd-card.curve { border-top-color:var(--blue); }
.hd-card.curve .hd-big { font-size:20px; color:var(--blue); }

/* ---------------- trade blotter ---------------- */
.bl-side {
  font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:2px;
  text-transform:uppercase; letter-spacing:.04em;
}
.bl-side.sell { background:var(--tint-up-strong); color:var(--up); }
.bl-side.buy  { background:var(--tint-down-strong); color:var(--down); }
.bl-del {
  background:none; border:none; color:var(--text-faint); font-size:12px;
  padding:0 4px;
}
.bl-del:hover { color:var(--down); }

.bl-form {
  display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap;
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:3px; padding:12px 14px; margin-top:14px; max-width:900px;
}
.bl-form label {
  display:flex; flex-direction:column; gap:3px;
  font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint);
}
.bl-form input, .bl-form select {
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:var(--mono); font-size:11.5px; padding:6px 8px; border-radius:2px;
  min-width:96px;
}
.bl-form input:focus, .bl-form select:focus { outline:none; border-color:var(--accent); }
.bl-form button {
  background:var(--accent); color:var(--on-accent); border:none; border-radius:3px;
  font-size:11.5px; font-weight:600; padding:7px 14px;
}
.bl-msg { font-size:11.5px; color:var(--text-dim); margin-top:7px; max-width:74ch; line-height:1.5; }
.bl-msg.bad { color:var(--down); }

/* ---------------- data lineage ---------------- */
.lin-stats { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px; }
.lin-stat {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-radius:3px; padding:9px 14px; min-width:96px;
}
.lin-stat span {
  display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:3px;
}
.lin-stat b { font-family:var(--mono); font-size:17px; font-weight:600; }
.lin-stat.ok b { color:var(--up); }
.lin-stat.warn b { color:var(--accent); }
.lin-stat.warn { border-color:var(--accent-dim); }

.lin-chain {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-left:3px solid var(--accent); border-radius:3px;
  padding:14px 16px; margin-bottom:12px; max-width:1000px;
}
.lin-chain-h { display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap; }
.lin-chain-h b { font-size:13px; color:var(--accent); }
.lin-used { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); }
.lin-why { font-size:11.5px; color:var(--text-dim); line-height:1.6; margin:6px 0 11px; }

.lin-steps { list-style:none; padding:0; margin:0; }
.lin-steps li {
  position:relative; padding:0 0 11px 20px; border-left:1px solid var(--border);
  margin-left:5px;
}
.lin-steps li:last-child { border-left-color:transparent; padding-bottom:0; }
.lin-steps li::before {
  content:''; position:absolute; left:-4px; top:5px;
  width:7px; height:7px; border-radius:50%; background:var(--text-faint);
}
.lin-steps li.k-source::before { background:var(--blue); }
.lin-steps li.k-transform::before { background:var(--accent); }
.lin-steps li.k-validation::before { background:var(--up); }
.lin-steps li.k-caveat::before { background:var(--down); }
.lin-kind {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
  display:block; margin-bottom:2px;
}
.lin-steps li b { font-size:11.5px; }
.lin-steps li div { font-size:11px; color:var(--text-dim); line-height:1.55; margin-top:2px; }

.lin-weak {
  margin-top:11px; padding:9px 12px; border-radius:3px;
  background:var(--tint-down-strong); border-left:2px solid var(--down);
  font-size:11px; color:var(--text-dim); line-height:1.6;
}
.lin-weak b { color:#f3b6b4; }

.lin-state {
  font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:2px;
  text-transform:uppercase; letter-spacing:.05em;
}
.lin-state.ok { background:var(--tint-up-strong); color:var(--up); }
.lin-state.running { background:var(--tint-accent-strong); color:var(--text-dim); }
.lin-state.stale, .lin-state.empty { background:var(--tint-accent-strong); color:var(--accent); }
.lin-state.no-data, .lin-state.never-ran, .lin-state.failing {
  background:var(--tint-down-strong); color:var(--down);
}
.lin-state.disabled { background:var(--bg-raised); color:var(--text-faint); }

/* Health verdict — the run-outcome roll-up that sits above the stats. Its job
   is to make a broken pipeline impossible to miss on a page that would
   otherwise look fine because the last good data has not gone stale yet. */
.lin-verdict {
  margin:12px 0; padding:11px 14px; border-radius:4px; font-size:13px;
  border:1px solid transparent;
}
.lin-verdict.ok   { background:var(--tint-up-strong); color:var(--up); border-color:var(--up); }
.lin-verdict.warn { background:var(--tint-accent-strong); color:var(--accent); border-color:var(--accent-dim); }
.lin-verdict.bad  { background:var(--tint-down-strong); color:var(--down); border-color:var(--down); }
.lin-problems { list-style:none; margin:8px 0 0; padding:0; }
.lin-problems li {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:5px 0; border-top:1px solid var(--border);
}
.lin-problems li b { color:var(--text); }
.lin-problems .sub { color:var(--text-dim); font-size:11.5px; width:100%; }
.lin-stat.bad b { color:var(--down); }
.lin-stat.bad { border-color:var(--down); }

/* Fields the platform derives rather than accepts — visually distinct so a
   read-only mirror is never mistaken for an editable input. */
.hd-field.derived input {
  background:var(--bg-raised); color:var(--text-dim);
  border-style:dashed; cursor:not-allowed;
}
.hd-field.derived label { color:var(--up); }
.hd-src {
  display:inline-block; margin-left:8px; font-family:var(--mono);
  font-size:10.5px; padding:1px 6px; border-radius:2px; letter-spacing:.03em;
}
.hd-src.ok { background:var(--tint-up-strong); color:var(--up); }
.hd-src.typed { background:var(--tint-accent-strong); color:var(--accent); }
.hd-err { flex-basis:100%; color:var(--down); font-size:11px; margin-top:6px; }

/* Theme switch, sized to match the language toggle beside it. */
.theme-toggle .theme-btn { font-size:13px; padding:3px 9px; line-height:1.2; }

/* Light-theme corrections — only where a colour cannot be expressed as a
   token: a fill whose text must flip, and the brand glow. Everything else is
   handled by the tint variables, so this list stays short by construction. */
:root[data-theme="light"] .chat-msg.user .chat-body { color:#fff; }
:root[data-theme="light"] .mark { box-shadow:0 0 8px var(--accent); }

/* ---------------- daily brief ---------------- */
.brief-page .bm-body { max-width:1240px; }

.bf-strip {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule,var(--border)); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; margin-bottom:16px;
}
.bf-tile {
  background:var(--bg-panel); padding:11px 13px;
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
/* The label names the series — it is scanned constantly, so it takes --text-dim
   rather than the footnote grey. */
.bf-tile span {
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
}
.bf-tile b {
  font-family:var(--mono); font-size:19px; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.bf-tile b i { font-style:normal; font-size:10px; color:var(--text-faint); margin-left:3px; }
.bf-tile em { font-family:var(--mono); font-size:11px; font-style:normal; }
.bf-tile em.pos { color:var(--up-text); } .bf-tile em.neg { color:var(--down-text); }
.bf-tile.off b { color:var(--text-faint); font-size:15px; }
.bf-tile.off small { font-size:10px; color:var(--text-faint); }
/* A notable move is marked structurally, not just coloured — colour alone
   already carries direction and cannot also carry significance. */
.bf-tile.notable { box-shadow:inset 3px 0 0 var(--accent); }
.spark { width:100%; height:26px; display:block; margin-top:3px; }

.bf-verdict {
  border:1px solid var(--border); border-radius:4px;
  padding:13px 16px; margin-bottom:14px; background:var(--bg-panel);
}
.bf-verdict.quiet { border-left:3px solid var(--up); }
.bf-verdict.active { border-left:3px solid var(--accent); }
.bf-verdict b { font-size:13px; }
.bf-verdict.quiet b { color:var(--up-text); }
.bf-verdict.active b { color:var(--accent-text); }
.bf-verdict p { margin:5px 0 0; font-size:12.5px; color:var(--text-dim);
  line-height:1.6; max-width:78ch; }
.bf-moved { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.bf-moved span {
  font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:2px;
  background:var(--tint-accent-strong,rgba(224,168,60,.18));
  color:var(--accent-bright);
}

.bf-narr { margin-bottom:22px; }
.bf-narr-box {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-left:3px solid var(--accent); border-radius:0 4px 4px 0;
  padding:15px 18px; max-width:82ch;
}
.bf-narr-box.muted { border-left-color:var(--border); color:var(--text-dim);
  font-size:12.5px; line-height:1.6; }
.bf-sec + .bf-sec { margin-top:13px; }
.bf-sech {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-text); margin-bottom:4px;
}
.bf-secb { font-size:13px; line-height:1.65; }

.bf-act { margin-top:26px; }
.bf-act-h { display:flex; align-items:baseline; gap:12px; }
.bf-act-n {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-text); white-space:nowrap;
}
.bf-act h2 {
  font-size:14px; font-weight:600; margin:0; letter-spacing:.01em;
  border-bottom:1px solid var(--border); flex:1; padding-bottom:6px;
}
.bf-why { font-size:12px; color:var(--text-dim); line-height:1.6;
  max-width:78ch; margin:8px 0 12px; }
.bf-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:4px; overflow:hidden;
}
.bf-foot { margin-top:26px; max-width:78ch; }

/* ---------------- FX board ---------------- */
.fxb-breadth {
  font-size:12.5px; color:var(--text-dim); margin-bottom:10px;
  padding:8px 12px; background:var(--bg-panel);
  border:1px solid var(--border-soft); border-radius:3px; max-width:60ch;
}
.fxb-breadth b { color:var(--accent-text); }

.fxb-wins { display:flex; gap:2px; margin-bottom:10px; }
.fxb-w {
  background:var(--bg-panel); border:1px solid var(--border);
  color:var(--text-dim); font-size:10.5px; padding:4px 11px; border-radius:3px;
}
.fxb-w:hover { color:var(--text); }
.fxb-w.on { background:var(--accent-text); color:var(--bg-panel);
  border-color:var(--accent-text); font-weight:600; }

.fxb-chart {
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; padding:10px 14px;
}
.fxb-row {
  display:grid; grid-template-columns:76px 1fr 62px; align-items:center;
  gap:10px; padding:2px 0;
}
.fxb-label {
  font-family:var(--mono); font-size:10.5px; color:var(--text-dim);
  white-space:nowrap;
}
/* A derived cross is marked so it is never mistaken for a quoted rate. */
.fxb-label.derived { font-style:italic; }
.fxb-label.derived::after { content:'·'; color:var(--accent); margin-left:3px; }

.fxb-track { position:relative; height:15px; }
.fxb-bar {
  position:absolute; top:2px; height:11px; border-radius:1px;
  min-width:1px;
}
.fxb-bar.pos { background:var(--up); }
.fxb-bar.neg { background:var(--down); }
.fxb-zero {
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--border); 
}
.fxb-val {
  font-family:var(--mono); font-size:10.5px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.fxb-val.pos { color:var(--up-text); } .fxb-val.neg { color:var(--down-text); }

/* Tiles are controls now, so they must look pressable — but they are also a
   dense grid, so the affordance is a hover lift rather than a border on each. */
button.bf-tile {
  border:none; text-align:left; font:inherit; cursor:pointer;
  /* `color:inherit` is NOT optional. A <button> takes the UA's `buttontext`
     (black) unless told otherwise, and `font:inherit` does not carry colour —
     so making these tiles clickable silently turned every value black on a
     dark background. */
  color:inherit;
  width:100%; transition:background .12s;
}
button.bf-tile:hover { background:var(--bg-raised); }
button.bf-tile:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
button.bf-tile::after {
  content:'⤢'; position:absolute; top:8px; right:9px;
  font-size:10px; color:var(--text-faint); opacity:0; transition:opacity .12s;
}
button.bf-tile { position:relative; }
button.bf-tile:hover::after { opacity:1; }

.fxb-row.clickable { cursor:pointer; border-radius:2px; }
.fxb-row.clickable:hover { background:var(--bg-raised); }

/* Board and commentary side by side, the way the source report reads. */
.fxb-split { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
@media (max-width:1000px){ .fxb-split { grid-template-columns:1fr; } }
.fxb-note-box {
  background:var(--bg-panel); border:1px solid var(--border-soft);
  border-left:3px solid var(--blue); border-radius:0 4px 4px 0;
  padding:13px 16px;
}
.fxb-note-box.muted { border-left-color:var(--border); color:var(--text-dim);
  font-size:12.5px; }
.fxb-note-box .bf-sech { color:var(--blue); font-weight:600; }
.fxb-nofc { margin-top:8px; font-size:11px; }

/* ---------------- mill drought board ---------------- */
.mill-board { margin-top:14px; }
.mill-head { display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.mill-head b { font-size:12.5px; color:var(--accent-text); }
.mill-head span { font-family:var(--mono); font-size:10.5px; color:var(--text-dim); }
.mill-tbl { max-width:720px; }
.mill-tbl td { vertical-align:top; }
.mill-risk {
  font-family:var(--mono); font-size:10.5px; padding:2px 8px; border-radius:2px;
  text-transform:uppercase; letter-spacing:.05em;
}
.mill-risk.low    { background:var(--tint-up-strong); color:var(--up-bright); }
.mill-risk.medium { background:var(--tint-accent-strong); color:var(--accent-bright); }
.mill-risk.high   { background:var(--tint-down-strong); color:var(--down-bright); }
/* The driest site is first in the table, so it gets the emphasis rather than
   relying on the reader to scan the percentile column. */
.mill-tbl tbody tr:first-child td:first-child { box-shadow:inset 3px 0 0 var(--accent); }

/* ---------------- Position Book (Phase 1) ---------------- */
.pb-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; padding:16px 20px; }
.pb-card { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px; }
.pb-card.wide { grid-column:span 2; }
.pb-card span { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:5px; }
.pb-card b { font-size:23px; font-weight:700; letter-spacing:-.02em; }
.pb-card em { display:block; font-style:normal; font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.pb-card .pos { color:var(--up-text); } .pb-card .neg { color:var(--down-text); }
.pb-card b.pos { color:var(--up-text); } .pb-card b.neg { color:var(--down-text); }

.pb-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 20px 16px; }
.pb-panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:14px 16px; margin:0 20px 16px; }
.pb-grid .pb-panel { margin:0; }
.pb-panel h3 { font-size:13px; margin:0 0 10px; color:var(--text); font-weight:600; }
.pb-hint { font-family:var(--mono); font-size:10px; color:var(--text-faint); font-weight:400; margin-left:8px; }

.pb-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.pb-tbl th { text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:6px 10px; border-bottom:1px solid var(--border); }
.pb-tbl td { padding:6px 10px; border-bottom:1px solid var(--border-soft,var(--border)); color:var(--text-dim); }
.pb-tbl td.num, .pb-tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }
.pb-tbl .muted { color:var(--text-faint); text-align:center; }
.pb-scroll { overflow-x:auto; }
.pb-ledger td { white-space:nowrap; }
.pb-lrow.rev td { color:var(--accent-text); }
.pb-lrow.voided td { color:var(--text-faint); text-decoration:line-through; }
.pb-lrow .tag { font-family:var(--mono); font-size:9.5px; color:var(--accent-text); border:1px solid var(--border); border-radius:3px; padding:0 4px; }
.pb-rev { background:none; border:1px solid var(--border); color:var(--down-text); font-size:10.5px; border-radius:3px; padding:2px 7px; cursor:pointer; }
.pb-rev:hover { border-color:var(--down-text); }

.pb-form { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.pb-f { display:flex; flex-direction:column; gap:3px; } .pb-f.wide { grid-column:span 2; }
.pb-f label { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.pb-f input, .pb-f select { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:3px; padding:6px 8px; font-size:13px; }
.pb-submit { grid-column:span 2; background:var(--accent); color:var(--on-accent,#0f1419); border:0; border-radius:3px; padding:8px; font-weight:600; font-size:13px; cursor:pointer; margin-top:2px; }
.pb-submit.ghost { background:none; border:1px solid var(--border); color:var(--text-dim); }
.pb-plan { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.pb-err { grid-column:span 2; color:var(--down-text); font-size:12px; min-height:14px; }
/* ---- Contract charts (multi-panel) ---- */
/* The page is a fixed-height flex column; the body must grow into it and scroll,
   or the lower charts get clipped with no way to reach them. */
.ctr-body { flex:1; min-height:0; overflow-y:auto; padding:14px 20px 28px; }
.ctr-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:1080px){ .ctr-grid { grid-template-columns:1fr 1fr; } }
.ctr-cell { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:9px 11px 11px; min-width:0; }
.ctr-hd { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.ctr-hd b { font-size:12.5px; color:var(--text); font-weight:600; white-space:nowrap; }
.ctr-legend { font-family:var(--mono); font-size:10.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctr-price { height:250px; width:100%; }
.ctr-macd { height:78px; width:100%; }
.ctr-rsi { height:66px; width:100%; }
.ctr-pane-lbl { font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; margin:5px 0 1px; }
/* combined joint model (Signal-honesty panel) */
.cm-block{ margin-top:16px; padding:14px 16px; border:1px solid var(--border); border-radius:6px; background:var(--bg-panel); }
.cm-hd{ margin-bottom:10px; } .cm-hd b{ font-size:13px; }
.cm-cells{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:10px; }
.cm-cell{ border-left:2px solid var(--border); padding-left:11px; }
.cm-cell .cm-h{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.cm-cell b{ font-size:20px; font-weight:700; } .cm-cell b.up{ color:var(--up-text); }
.cm-cell em{ display:block; font-style:normal; font-size:11px; color:var(--text-dim); margin:2px 0 4px; }
.cm-tag{ font-family:var(--mono); font-size:10px; padding:1px 7px; border-radius:3px; }
.cm-tag.no{ background:var(--tint-down-strong); color:var(--down-text); }
.cm-tag.sig{ background:var(--tint-up-strong); color:var(--up-text); }
.cm-verdict{ font-size:13px; font-weight:600; padding:8px 0; border-top:1px solid var(--border); }

/* front-page honesty badge */
.sig-badge{
  display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:8px 14px;
  border-radius:6px; font-size:12.5px; cursor:pointer; border:1px solid transparent;
}
.sig-badge.ok{ background:var(--tint-up-strong); color:var(--up-text); border-color:var(--up); }
.sig-badge.warn{ background:var(--tint-accent-strong); color:var(--accent); border-color:var(--accent-dim); }
.sig-badge-go{ margin-left:auto; opacity:.7; font-family:var(--mono); }
.sig-badge:hover{ filter:brightness(1.08); }

/* signal honesty (Backtest page) */
.sc-sec { margin-top:24px; }
.sc-verdict { padding:11px 14px; border-radius:5px; font-size:13px; margin-bottom:12px; border:1px solid transparent; }
.sc-verdict.ok { background:var(--tint-up-strong); color:var(--up-text); border-color:var(--up); }
.sc-verdict.warn { background:var(--tint-accent-strong); color:var(--accent); border-color:var(--accent-dim); }
.sc-tbl td, .sc-tbl th { vertical-align:top; }
.sc-cell { min-width:96px; }
.sc-num { font-family:var(--mono); font-size:13px; font-weight:600; }
.sc-num .sub { font-weight:400; font-size:10.5px; color:var(--text-faint); }
.sc-track { height:4px; background:var(--bg-raised); border-radius:2px; margin-top:4px; overflow:hidden; position:relative; }
.sc-track::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--border); }
.sc-fill { display:block; height:100%; border-radius:2px; }
.sc-fill.flat { background:var(--text-faint); opacity:.5; }
.sc-fill.up { background:var(--up); }
.sc-fill.down { background:var(--down); }
.sc-coin { font-family:var(--mono); font-size:10.5px; color:var(--text-faint); }
.sc-flag { font-family:var(--mono); font-size:10.5px; color:var(--accent); border:1px solid var(--accent-dim); border-radius:3px; padding:1px 6px; }

/* commodity comparison */
.cmp-hd { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cmp-hd .note { margin:0; flex:1 1 340px; }
.cmp-wins { display:inline-flex; gap:4px; }
.cmp-win { background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:4px; padding:4px 10px; font-family:var(--mono); font-size:11px; cursor:pointer; }
.cmp-win.active { border-color:var(--accent); color:var(--accent); background:var(--tint-accent-strong); }
.cmp-picks { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.cmp-grp { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cmp-glbl { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); width:52px; flex:0 0 52px; }
.cmp-pick { display:inline-flex; align-items:center; gap:6px; background:var(--bg-panel); border:1px solid var(--border); color:var(--text-dim); border-radius:14px; padding:3px 10px 3px 7px; font-size:11.5px; cursor:pointer; }
.cmp-pick i { width:9px; height:9px; border-radius:2px; display:inline-block; }
.cmp-pick.on { font-weight:600; }
.cmp-legend { margin-top:12px; max-width:460px; }
.cmp-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px; vertical-align:-1px; }
.cmp-legend .pos { color:var(--up-text); } .cmp-legend .neg { color:var(--down-text); }
.cmp-legend .sub { color:var(--text-faint); font-size:10.5px; }
.cmp-base { stroke:var(--text-faint); stroke-width:1; stroke-dasharray:4 3; opacity:.6; }

/* forward-curve overlay */
.ctr-curve { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px 10px; margin-bottom:16px; }
.ctr-curve-hd h3 { font-size:13px; margin:0 0 8px; color:var(--text); font-weight:600; }
.fc-chart { width:100%; }
.fc-svg { width:100%; height:300px; display:block; }
.fc-grid { stroke:var(--border-soft,var(--border)); stroke-width:1; }
.fc-axl { fill:var(--text-faint); font-family:var(--mono); font-size:10px; }
.fc-controls { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:space-between; margin-top:8px; }
.fc-legend { display:flex; flex-wrap:wrap; gap:6px 10px; }
.fc-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text-dim); border:1px solid var(--border); border-radius:12px; padding:2px 4px 2px 8px; }
.fc-chip i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.fc-x { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; }
.fc-x:hover { color:var(--down-text); }
.fc-add { display:inline-flex; align-items:center; gap:6px; }
.fc-add label { font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.fc-add input { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:3px; padding:4px 6px; font-size:12px; }
.fc-addbtn { background:var(--accent); color:var(--on-accent,#0f1419); border:0; border-radius:3px; width:26px; height:26px; font-size:15px; cursor:pointer; }
.fc-note { font-size:11px; color:var(--text-faint); font-style:italic; margin:8px 0 0; line-height:1.5; }
.ctr-hd { position:relative; }
.ctr-expand { margin-left:auto; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:3px;
  width:22px; height:22px; line-height:1; font-size:13px; cursor:pointer; flex:0 0 auto; }
.ctr-expand:hover { border-color:var(--accent); color:var(--accent); }

/* full-screen contract read */
body.ctr-noscroll { overflow:hidden; }
.ctr-full { position:fixed; inset:0; z-index:120; background:var(--bg); display:flex; flex-direction:column; }
.ctr-full-bar { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--border); }
.ctr-full-bar b { font-size:15px; color:var(--text); }
.ctr-full-sub { font-family:var(--mono); font-size:11px; color:var(--text-faint); }
.ctr-full-lang { margin-left:auto; display:inline-flex; gap:2px; }
.ctr-full-lang .lang { background:none; border:1px solid var(--border); color:var(--text-dim); font-size:11px; padding:4px 9px; border-radius:4px; cursor:pointer; font-family:var(--mono); }
.ctr-full-lang .lang.active { border-color:var(--accent); color:var(--accent); background:var(--tint-accent-strong); }
.ctr-full-x { margin-left:8px; background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:4px; width:30px; height:30px; font-size:15px; cursor:pointer; }
.ctr-full-x:hover { border-color:var(--down-text); color:var(--down-text); }
.ctr-full-body { flex:1; display:grid; grid-template-columns:1fr 340px; gap:0; min-height:0; }
.ctr-full-chart { padding:12px 16px; display:flex; flex-direction:column; min-width:0; min-height:0; }
.ctr-full-chart .ctr-fp { flex:1 1 auto; min-height:220px; }
.ctr-full-chart .ctr-fm { height:120px; }
.ctr-full-chart .ctr-fr { height:100px; }
.ctr-full-note { border-left:1px solid var(--border); padding:16px 18px; overflow-y:auto; background:var(--bg-panel); }
.ctr-verdict { font-size:14px; font-weight:700; padding:6px 0 10px; border-bottom:1px solid var(--border); margin-bottom:10px; }
.ctr-verdict.up { color:var(--up-text); } .ctr-verdict.down { color:var(--down-text); } .ctr-verdict.flat { color:var(--text-dim); }
.ctr-nrow { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft,var(--border)); }
.ctr-nk { flex:0 0 74px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding-top:2px; }
.ctr-nrow > div:last-child { font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.ctr-nfoot { font-size:11px; color:var(--text-faint); font-style:italic; margin-top:12px; line-height:1.5; }
.ctr-nempty { color:var(--text-faint); font-size:12.5px; }
@media (max-width:900px){ .ctr-full-body { grid-template-columns:1fr; grid-template-rows:1fr auto; } .ctr-full-note { border-left:none; border-top:1px solid var(--border); max-height:40vh; } }

/* ---- Optionality section (Position Book) ---- */
.opt-sec { }
.opt-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:14px; }
.opt-card { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:11px 13px; }
.opt-card span { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.07em; color:var(--text-faint); text-transform:uppercase; margin-bottom:5px; }
.opt-card b { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.opt-card em { display:block; font-style:normal; font-size:11px; color:var(--text-dim); margin-top:3px; }
.opt-tbl th.opt-put { color:var(--up-text); text-align:center; border-bottom:1px solid var(--up-text); }
.opt-tbl th.opt-call { color:var(--down-text); text-align:center; border-bottom:1px solid var(--down-text); }
.opt-tbl tr.opt-atm { background:var(--tint-accent-strong); }
.opt-tbl tr.opt-atm td { color:var(--text); }
.opt-tbl td.sub { color:var(--text-faint); }

/* ---- dual VaR (empirical + GARCH conditional) on the Position Book ---- */
.pb-var2 { display:flex; flex-wrap:wrap; gap:18px 26px; align-items:flex-end; margin-top:4px; }
.pb-var2 > div b { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.pb-var2 > div em { display:block; font-style:normal; font-size:11px; color:var(--text-dim); margin-top:2px; }
.pb-regime { padding-left:16px; border-left:1px solid var(--border); }
.pb-regime b { font-family:var(--mono); }
.pb-regime.hot  b { color:var(--down-text); }
.pb-regime.calm b { color:var(--up-text); }

/* ---- Fundamental fair value (Benchmark page) ---- */
.fv-sec { margin-top:22px; padding-top:6px; border-top:1px solid var(--border); }
.fv-tag { font-family:var(--mono); font-size:10px; color:var(--text-faint); font-weight:400; margin-left:8px; text-transform:uppercase; letter-spacing:.06em; }
.fv-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:10px 0 14px; }
.fv-card { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:12px 14px; }
.fv-card span { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:5px; }
.fv-card b { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.fv-card b.fv-v { font-size:15px; }
.fv-card em { display:block; font-style:normal; font-size:11px; color:var(--text-dim); margin-top:3px; }
.fv-card.rich  { border-left:3px solid var(--down); } .fv-card.rich  b.fv-v { color:var(--down-text); }
.fv-card.cheap { border-left:3px solid var(--up); }   .fv-card.cheap b.fv-v { color:var(--up-text); }
.fv-card.inline b.fv-v { color:var(--text-dim); }
.fv-chart { margin:6px 0 14px; }
.fv-svg { width:100%; height:190px; display:block; }
.fv-band { fill:var(--accent); opacity:.12; stroke:none; }
.fv-fair { fill:none; stroke:var(--accent); stroke-width:1.7; }
.fv-adot { fill:var(--text); }
.fv-axl { fill:var(--text-faint); font-family:var(--mono); font-size:9px; }
.fv-lgd { fill:var(--text-dim); font-family:var(--mono); font-size:9.5px; }
.fv-fit { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; margin-bottom:12px; }
.fv-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.fv-tbl th { text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); padding:4px 8px; border-bottom:1px solid var(--border); }
.fv-tbl td { padding:4px 8px; border-bottom:1px solid var(--border-soft,var(--border)); color:var(--text-dim); }
.fv-tbl td.num, .fv-tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }
.fv-sig { color:var(--up-text); font-family:var(--mono); font-size:10.5px; }
.fv-ns { color:var(--text-faint); font-family:var(--mono); font-size:10.5px; }
.fv-stats > div { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--border-soft,var(--border)); font-size:12px; }
.fv-stats span { color:var(--text-faint); } .fv-stats b { font-family:var(--mono); }
.fv-excl { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:10px 14px; margin-bottom:12px; }
.fv-excl b { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-family:var(--mono); }
.fv-excl ul { margin:6px 0 0; padding-left:18px; } .fv-excl li { font-size:12px; color:var(--text-dim); margin:3px 0; }
.fv-excl li b { text-transform:none; letter-spacing:0; color:var(--text); font-family:inherit; font-size:12px; }
.fv-coint { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:11px 14px; margin-bottom:12px; }
.fv-coint-h { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.fv-coint-h b { font-size:12.5px; }
.fv-cbadge { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:2px 7px; border-radius:3px; }
.fv-cbadge.ok { background:var(--tint-up-strong); color:var(--up-text); }
.fv-cbadge.no { background:var(--bg-raised); color:var(--text-faint); }
.fv-coint-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.fv-coint-row span { display:block; font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; margin-bottom:3px; }
.fv-coint-row b { font-size:16px; font-weight:700; font-family:var(--mono); }
.fv-coint-row b.fv-cheap { color:var(--up-text); } .fv-coint-row b.fv-rich { color:var(--down-text); }
.fv-coint-row em { display:block; font-style:normal; font-size:10.5px; color:var(--text-dim); margin-top:2px; }
.fv-cnote { font-size:11px; color:var(--text-faint); font-style:italic; margin:9px 0 0; line-height:1.5; }
.fv-method { font-size:11.5px; color:var(--text-faint); font-style:italic; line-height:1.5; }
.fv-nochart { color:var(--text-faint); font-size:12px; }
@media (max-width:820px){ .fv-fit{grid-template-columns:1fr;} }

/* ---- Phase 2: programme tracking ---- */
.pb-prog h4 { font-size:10.5px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:0 0 6px; font-weight:400; }
.pb-progstat { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:14px; }
.pb-ps { border-left:2px solid var(--border); padding-left:11px; }
.pb-ps span { display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; margin-bottom:4px; }
.pb-ps b { font-size:20px; font-weight:700; letter-spacing:-.02em; }
.pb-ps em { display:block; font-style:normal; font-size:11px; color:var(--text-dim); margin-top:3px; }
.pb-ps .pos, .pb-ps b.pos { color:var(--up-text); } .pb-ps .neg, .pb-ps b.neg { color:var(--down-text); }
.pb-charts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:4px 0 10px; }
.pb-chart { min-width:0; }
.pb-spark { width:100%; height:150px; display:block; }
.pb-line { fill:none; stroke:var(--accent); stroke-width:1.6; }
.pb-line.cov { stroke:var(--up); } .pb-line.mgn { stroke:var(--accent); }
.pb-area { fill:var(--up); opacity:.10; stroke:none; }
.pb-target { stroke:var(--text-dim); stroke-width:1; stroke-dasharray:4 3; opacity:.7; }
.pb-tlabel { fill:var(--text-faint); font-family:var(--mono); font-size:9px; }
.pb-zero { stroke:var(--border); stroke-width:1; }
.pb-dot { fill:var(--accent); } .pb-line.cov ~ .pb-dot, .pb-chart .pb-spark .pb-dot { }
.pb-dot.last { fill:var(--text); stroke:var(--bg-panel); stroke-width:1.5; }
.pb-nocurve, .pb-empty { color:var(--text-faint); font-size:12px; font-style:italic; }
@media (max-width:820px){ .pb-grid{grid-template-columns:1fr;} .pb-card.wide{grid-column:auto;} .pb-charts{grid-template-columns:1fr;} }