/* Equyx terminal — Bloomberg-style skin.
 *
 * Amber on black, monospace throughout, dense rows, panel headers as solid
 * amber bars. This file overrides the shared BidTorq tokens for this page only;
 * the BidTorq app keeps its own look.
 */

body.term {
  --bg: #000000;
  --bg-2: #050505;
  --surface: #0b0b0b;
  --surface-2: #121212;
  --surface-3: #191919;
  --border: #262019;
  --border-strong: #3a2f22;

  --amber: #ffa028; --on-accent: #120b00;
  /* the terminal skin is the DEFAULT theme and lives here, not in themes.css -
     it is dark, so it needs the lightened brand ink like the other eight */
  --brand-ink: #708DCF;
  --amber-dim: #c47c1f;
  --amber-faint: #6b4a15;
  --cyan: #43b7e8;
  --text: #e6e2da;
  --text-2: #b3ab9c;
  --muted: #8a8071;
  /* Was #5e564a, which measured 2.63-2.91:1 against the backgrounds this app
     paints — under the 4.5:1 a small label needs to be read at all. Every
     sub-label in the results table used it, so the row's explanatory text was
     the least legible thing on screen. #857c70 clears 4.5 on all three
     while staying visibly quieter than --muted. #857c70 still measured 4.40
     against the row tint at narrow widths, so it went one step further to
     #918879: 5.43 on the lightest surface this app paints, which clears the
     threshold everywhere rather than on most screens. */
  --faint: #918879;

  --good: #2fd47a;
  --bad: #ff4f4f;
  --violet: #b98cff;
  --accent: var(--amber);
  --accent-soft: rgba(255, 160, 40, .13);
  --accent-line: rgba(255, 160, 40, .42);
  --good-soft: rgba(47, 212, 122, .12);

  /* ---- the surfaces the components actually ask for ----
     Added after the de-theming pass: every one of these was being referenced
     with `var(--x)` and no fallback, and none of them existed here, so the
     elements using them painted nothing. They are the literals that used to be
     written inline in the component rules, put where a theme can reach them. */
  --panel: #0d0b08;
  --panel-2: #0b0906;
  --panel-3: #0a0805;
  --chip: #12100c;
  --hover: #16130d;
  --active: #1a1509;
  --track: #1a1509;
  --warn: #f6b73c;
  --warn-soft: rgba(246, 183, 60, .14);
  --violet-soft: rgba(185, 140, 255, .14);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --bad-soft: rgba(255, 79, 79, .13);
  --warn: var(--amber);

  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --topbar: 40px;

  margin: 0; height: 100vh; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  -webkit-font-smoothing: antialiased;
}

body.term input, body.term select, body.term textarea, body.term button { font-family: var(--mono); }
body.term a { color: var(--cyan); }
body.term ::-webkit-scrollbar { width: 9px; height: 9px; }
body.term ::-webkit-scrollbar-thumb { background: var(--border-strong, #33291d); border: 2px solid var(--bg, #000); }
body.term ::-webkit-scrollbar-thumb:hover { background: var(--amber-faint, #4a3a26); }

/* Flex, not a fixed row template.
   This was `grid-template-rows: var(--topbar) 26px 1fr` — a header row, a row
   for the function-key bar, and the body. Removing the function-key bar left
   the body sitting in the 26px row, which collapsed the entire terminal to
   twenty-six pixels: the tabs rendered outside their own parent and nothing
   in the pane could be clicked. A row template that has to match the number of
   children is a rule that breaks every time the markup changes. Flex counts
   for itself.

   height:100% rather than 100vh, because inside the console this already sits
   in a box with a height; 100vh would overflow it by exactly the header. */
.shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.term-grid {
  flex: 1 1 auto;
  display: grid; grid-template-columns: min-content minmax(0, 1fr) 392px;
  position: relative;
  min-height: 0; gap: 1px; background: var(--border);
}
.shell.ai-collapsed .term-grid { grid-template-columns: min-content minmax(0, 1fr) 30px; }
/* Inside the console the analyst is the app-wide sidebar, so the terminal is
   two columns and the charts get the width the third one was taking. */
.shell.no-ai .term-grid { grid-template-columns: min-content minmax(0, 1fr); }

/* --------------------------------------------------------------- boot */

.boot { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg, #000); }
.boot-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--amber); color: var(--on-accent, #000); font-weight: 800; font-size: 22px;
  animation: pulse 1.5s ease-in-out infinite; font-family: var(--mono);
}
.boot-text { color: var(--amber-dim); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.dots::after { content: '...'; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: var(--panel-3, #0a0805); border-bottom: 1px solid var(--border-strong);
}
.brand { display: flex; align-items: center; gap: 8px; }
/* THE MARK IS AN IMAGE NOW, NOT A LETTER IN A BOX. The background, the
   grid centring and the glyph sizing all existed to frame a character; an
   <img> needs none of them and the background would sit behind the mascot's
   own transparency. `object-fit: contain` is what stops it being stretched
   if the box is ever made non-square. */
/* the tile carries its own white background on every skin - overriding it
   here to `none` is what would put a blue mascot back on a dark panel */
.brand-mark, .brand-mark.fin { flex: none; }
/* the terminal skin re-declares the wordmark, so it needs the same
   treatment or the lockup changes identity between skins */
.brand-name {
  font-family: 'Oxanium', var(--sans);
  font-size: 14.5px; font-weight: 700; letter-spacing: .01em;
  text-transform: lowercase; color: var(--brand-ink, var(--brand, #0034AA));
}
.brand-name span { color: var(--faint); font-weight: 400; }

/* command line, Bloomberg style: type a ticker, press enter */
.cmdline { flex: 1; max-width: 560px; position: relative; display: flex; align-items: center; }
.cmdline .caret { color: var(--amber); margin-right: 6px; font-weight: 700; }
.cmdline input {
  flex: 1; height: 26px; background: var(--chip, #12100c); border: 1px solid var(--border-strong);
  color: var(--amber); padding: 0 9px; text-transform: uppercase; letter-spacing: .06em;
  font-size: 12.5px; outline: none;
}
.cmdline input:focus { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,160,40,.25); }
.cmdline input::placeholder { color: var(--faint); text-transform: none; letter-spacing: 0; }
.go-hint { color: var(--faint); font-size: 10.5px; margin-left: 7px; white-space: nowrap; }

.sym-results {
  position: absolute; top: 30px; left: 0; right: 0; z-index: 40;
  background: var(--panel, #0d0b08); border: 1px solid var(--amber-faint); max-height: 62vh; overflow-y: auto;
}
.sym-row { padding: 5px 10px; cursor: pointer; display: flex; gap: 9px; align-items: baseline; font-size: 11.5px; }
.sym-row:hover { background: var(--amber); color: var(--on-accent, #000); }
.sym-row:hover b, .sym-row:hover span, .sym-row:hover em { color: var(--on-accent, #000); }
.sym-row b { min-width: 76px; color: var(--amber); font-weight: 700; }
.sym-row span { color: var(--text-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sym-row em { color: var(--faint); font-style: normal; font-size: 10px; white-space: nowrap; }

.live-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.live-dot span { width: 6px; height: 6px; background: var(--faint); }
.live-dot.on { color: var(--good); }
.live-dot.on span { background: var(--good); animation: blink2 2s steps(2) infinite; }
@keyframes blink2 { 50% { opacity: .25; } }

.rf-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.rf-label input { width: 46px; padding: 3px 5px; text-align: right; background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--amber); }

body.term .btn {
  border-radius: 0; background: var(--chip); border: 1px solid var(--border-strong);
  color: var(--amber-dim); font-size: 11px; padding: 4px 10px; text-transform: uppercase; letter-spacing: .05em;
}
body.term .btn:hover:not(:disabled) { background: var(--amber); color: var(--on-accent, #000); border-color: var(--amber); }
body.term .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--on-accent, #000); font-weight: 700; }
/* THE LINE ABOVE PAINTS THIS BUTTON `var(--amber)` AND THIS ONE THREW IT
   AWAY. A fixed orange hover on a blue, green, pink or cyan theme is the
   button changing identity under the pointer. `--amber-dim` is what every
   theme already defines for exactly this. */
body.term .btn-primary:hover:not(:disabled) { background: var(--amber-dim, var(--amber)); }
body.term .btn-ghost { background: transparent; border-color: transparent; }

/* ------------------------------------------------------- function bar */

.fnbar {
  display: flex; align-items: stretch; background: var(--panel-3, #0a0805);
  border-bottom: 1px solid var(--border-strong); overflow-x: auto;
}
.fnbar button {
  background: none; border: none; border-right: 1px solid var(--border);
  color: var(--text-2); padding: 0 13px; font-size: 11px; cursor: pointer;
  white-space: nowrap; letter-spacing: .05em; font-family: var(--mono);
}
.fnbar button:hover { background: var(--track, #1a1509); color: var(--amber); }
.fnbar button.on { background: var(--amber); color: var(--on-accent, #000); font-weight: 700; }
.fnbar button b { font-weight: 700; margin-right: 5px; color: var(--amber); }
.fnbar button.on b { color: var(--on-accent, #000); }
.fnbar .fn-spacer { flex: 1; border-right: none; }
.fnbar .fn-clock { color: var(--faint); padding: 0 12px; display: flex; align-items: center; font-size: 10.5px; white-space: nowrap; }

/* --------------------------------------------------------------- panel */

.panel-h {
  background: var(--amber); color: var(--on-accent, #000); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.panel-h .sub { font-weight: 400; letter-spacing: .04em; opacity: .78; }

/* -------------------------------------------------------------- watch */

/* THE RAIL OWNS ITS OWN WIDTH, AND THE GRID TRACK FOLLOWS IT.
   The first column was a hardcoded 228px, so collapsing the rail would have
   left a 228px hole. `min-content` resolves to whatever width the aside
   declares, which keeps the two in step with no `:has()` and no class on an
   ancestor - the rail is the only thing that knows whether it is open. */
.watch { background: var(--bg-2); width: var(--rail-w, 228px); transition: width .12s ease; }
.watch-inner { height: 100%; overflow-y: auto; overflow-x: hidden; }
.watch.collapsed { width: 34px; }

/* COLLAPSED MEANS COLLAPSED. NOTHING FLOATS OVER THE CHART.
   This used to peek the whole rail back on hover, as an overlay pinned to the
   left of the body. It covered the quote header, the security name and the
   F1-F6 tab row of whatever was underneath, so brushing past the left edge
   made the terminal look broken - and the reader had not asked for anything.
   A panel that appears over your work because the pointer went near it is a
   panel that interrupts. The strip carries a chevron and its own label; you
   open it when you want it, and it stays shut until then. That is what the pin
   is for: it decides whether the rail keeps its width, not whether a surprise
   overlay is armed. */
.watch.collapsed .watch-inner { width: 34px; overflow: hidden; }
.watch.collapsed .fold, .watch.collapsed .watch-foot { display: none; }
/* The rail now arrives collapsed, so this vertical label is on screen for
   everyone rather than only for people who chose to collapse it - and at 9px
   it was under the 9.5px floor the whole app is held to. Nobody had seen it
   because nothing measured a state nobody started in. */
.watch.collapsed .watch-bar-title {
  writing-mode: vertical-rl; margin: 8px 0 0; flex: none;
  font-size: 10px; letter-spacing: .14em;
}

.watch-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2; background: var(--bg-2);
}
.watch.collapsed .watch-bar {
  flex-direction: column; justify-content: flex-start; align-items: center;
  padding: 5px 0; border-bottom: none;
}
.watch.collapsed .watch-pin { display: none; }
.watch-bar-title {
  flex: 1; font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--faint); white-space: nowrap; overflow: hidden;
}
.watch-btn {
  background: none; border: 1px solid transparent; color: var(--faint);
  cursor: pointer; padding: 1px 5px; line-height: 1.1; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  /* 16x17 measured, under the 22px pointer minimum */
  min-height: 22px; min-width: 22px;
}
.watch-btn:hover { color: var(--amber); border-color: var(--border-strong); }
.watch-pin.on { color: var(--amber); }
.watch-pin.on svg { transform: rotate(-45deg); }
.watch-sec { margin-bottom: 8px; }
.watch-sec h4 { margin: 0; }
.watch-list { display: grid; }
.wrow {
  display: grid; grid-template-columns: 1fr auto 62px; gap: 6px; align-items: baseline;
  padding: 2px 8px; cursor: pointer; font-size: 11.5px; position: relative;
}
.wrow:nth-child(even) { background: var(--hover); }
.wrow:hover { background: var(--track, #1a1509); }
.wrow.on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--amber); }
.wrow .s { color: var(--amber-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow.on .s { color: var(--amber); }
.wrow .p { font-variant-numeric: tabular-nums; color: var(--text); }
.wrow .d { font-variant-numeric: tabular-nums; font-size: 11px; text-align: right; }
.wrow .x { position: absolute; right: 1px; top: 1px; color: var(--faint); font-size: 12px; opacity: 0; padding: 0 3px; }
.wrow:hover .x { opacity: 1; }
.wrow .x:hover { color: var(--bad); }
.wempty { font-size: 11px; color: var(--faint); padding: 3px 8px; }
.up { color: var(--good); } .down { color: var(--bad); } .flat { color: var(--muted); }

.watch-add { display: flex; gap: 3px; margin: 5px 6px 0; }
.watch-add input { padding: 3px 6px; font-size: 11px; background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--amber); }
.watch-foot { font-size: 10px; color: var(--faint); padding: 9px 8px; line-height: 1.5; border-top: 1px solid var(--border); }

/* --------------------------------------------------------------- main */

/* Same reasoning: the chart is a tab now, so the number of children changes
   with the view. Flex adapts; a row template would need editing each time. */
/* A GRID ITEM DEFAULTS TO `min-width: auto`, WHICH MEANS "NEVER NARROWER THAN
   MY CONTENT". On a 390px phone this pane measured 729px, because the chart
   toolbar inside it is a flex row that does not wrap - so the whole PAGE
   scrolled sideways and every tap landed a few pixels off. `min-width: 0` is
   what lets a grid or flex child actually obey its track. */
.term-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); }
.term-main > .quote-head, .term-main > .tabs.top { flex: 0 0 auto; }
.term-main > .term-pane, .term-main > .chart-tab { flex: 1 1 auto; min-height: 0; }
/* THE CARD GOES BELOW THE CHART, AND THE TAB SCROLLS TO IT.
   `overflow: hidden` forced the chart and the rating card to share one screen,
   and flex gave the whole shortfall to the chart: `.cv-wrap` collapsed to 5px
   while the canvas inside it kept `min-height: 320px` and overflowed, so the
   signals card was laid out UNDER the chart - 314px of overlap, measured, in
   every theme, on the first screen of every security. A summary that sits on
   top of the thing it summarises is worse than one you have to scroll to. */
.chart-tab { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.chart-tab .chart-bar { flex: 0 0 auto; }
/* `.chart-wrap` is the empty placeholder the tab renders before geometry
   exists; the chart itself is `.cv-wrap` above. It keeps the rule only so an
   empty tab does not jump. */
.chart-tab .chart-wrap { flex: 0 0 auto; min-height: 0; }

.quote-head { padding: 7px 12px 6px; border-bottom: 1px solid var(--border); background: var(--panel-3); }
.qh-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qh-sym { font-size: 17px; font-weight: 700; color: var(--amber); letter-spacing: .04em; }
.qh-name { color: var(--text-2); font-size: 12px; }
.qh-price { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qh-chg { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qh-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.qh-meta b { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }

/* wraps rather than pushing the pane wider than the screen */
.chart-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 12px; border-bottom: 1px solid var(--border); background: var(--panel-3); min-width: 0; }
/* the checkbox is 13px and the LABEL is the control - clicking the words
   toggles it - so the label is what has to clear the minimum. 44px stays
   for a coarse pointer further down. */
label.chk, .chart-bar label { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; }
.range-sel { display: flex; gap: 1px; }
.range-sel button {
  background: var(--chip, #12100c); border: 1px solid var(--border); color: var(--muted);
  padding: 2px 9px; cursor: pointer; font-size: 10.5px; font-weight: 700; font-family: var(--mono);
  /* 1M / 6M / 1Y measured 36x20 - a fifth of a millimetre short of the
     pointer minimum, on the control most used on the chart */
  min-height: 22px;
}
.range-sel button:hover { color: var(--amber); }
.range-sel button.on { background: var(--amber); color: var(--on-accent, #000); border-color: var(--amber); }
.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); cursor: pointer; white-space: nowrap; text-transform: uppercase; }
.chk input { accent-color: var(--amber); }
.bench-in { width: 88px; padding: 3px 6px; font-size: 11px; background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--amber); }

.chart-wrap { padding: 4px 6px 0; border-bottom: 1px solid var(--border); min-height: 190px; }
/* ---- the candle chart ---- */
/* `flex: 1 1 auto` WITH `min-height: 0` MEANS "SHRINK ME FIRST, TO NOTHING".
   That is right for a pane that owns the screen and wrong for one sharing it
   with a card below: the chart is the subject and keeps its height; the tab
   scrolls. */
.cv-wrap { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 324px; padding: 4px 6px 0; border-bottom: 1px solid var(--border); }
.cv-chart { flex: 1 1 auto; min-height: 320px; height: 46vh; }
/* the chart-type strip: the same shape as every other pill row in the console,
   scrollable rather than wrapping so it never steals height from the chart */
.cv-types { display: flex; gap: 4px; flex-wrap: wrap; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: thin; min-width: 0; }
.cv-types::-webkit-scrollbar { height: 4px; }
.cv-types::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.cv-type { flex: 0 0 auto; padding: 3px 9px; font: inherit; font-size: 11px; line-height: 1.5;
  color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; white-space: nowrap; }
.cv-type:hover { color: var(--text); border-color: var(--muted); }
.cv-type.on { color: var(--bg); background: var(--amber); border-color: var(--amber); }
.cv-type:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.cv-sep { flex: 0 0 auto; width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
/* On a phone thirteen types and four scales do not belong in a scroll strip
   nobody can tell is scrollable — and measured at 390px, the strip's own
   buttons pushed the page to 494px wide. They wrap instead. */
@media (max-width: 700px), (pointer: coarse) {
  .cv-types { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; max-width: 100%; }
  .cv-sep { display: none; }
}
.cv-tip { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; padding: 5px 6px; color: var(--text-2); border-top: 1px solid var(--border); min-height: 22px; font-variant-numeric: tabular-nums; }
.cv-tip b { color: var(--text); }
.cv-tip span i { font-style: normal; color: var(--text); }
/* the chart's footer carries the source links, including the attribution
   TradingView requires - measured 177x14 and 35x19, both under the pointer
   minimum on the busiest screen in the product */
/* `.cv-attr` is where the attribution actually lives - candles.js:761 - and
   my first guess at the selector matched neither it nor the legend's links.
   A selector written from memory instead of from the markup. */
/* THE LIBRARY'S OWN ATTRIBUTION LOGO, 35x19. Lightweight Charts injects it
   with no class and no classed parent, so it can only be reached by its
   href. Growing the box does not hide or shrink the logo - TradingView's
   attribution stays exactly as visible as it was. */
a[href*="tradingview.com/?utm_medium=lwc-link"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 22px; min-width: 22px;
}
.cv-tip a, .cv-legend a, .chart-foot a, .cv-attr a, .cv-src a {
  display: inline-flex; align-items: center; min-height: 22px;
}
.cv-tip .up { color: var(--good); }
.cv-tip .down { color: var(--bad); }
.cv-tip.up b { color: var(--good); }
.cv-tip.down b { color: var(--bad); }
.cv-tip .mini { margin-left: auto; }
.cv-hint { font-style: normal; color: var(--faint); font-size: 10.5px; }
.cv-attr a { color: var(--muted); text-decoration: underline; }
.ask-chart { font-size: 11px; padding: 4px 10px; margin-left: 8px; }
.qh-top .logo { margin-right: 10px; }
.chart-wrap svg { display: block; width: 100%; height: 244px; }
.gridline { stroke: var(--track, #1c1710); stroke-width: 1; }
.axis-label { fill: var(--faint); font-size: 9.5px; font-family: var(--mono); }
.price-line { fill: none; stroke-width: 1.5; }
.price-area { fill: url(#pgrad); }
.sma50 { fill: none; stroke: var(--cyan); stroke-width: 1; stroke-dasharray: 3 2; opacity: .8; }
.sma200 { fill: none; stroke: var(--violet); stroke-width: 1; stroke-dasharray: 5 3; opacity: .8; }
.fan-outer { fill: rgba(255,160,40,.10); }
.fan-inner { fill: rgba(255,160,40,.19); }
.fan-median { fill: none; stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 4 3; }
.fc-split { stroke: var(--amber-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-legend { display: flex; gap: 12px; padding: 0 6px 3px; font-size: 10px; color: var(--muted); flex-wrap: wrap; text-transform: uppercase; }
.chart-legend i { display: inline-block; width: 10px; height: 2px; vertical-align: 3px; margin-right: 4px; }

body.term .tabs { padding: 0; border-bottom: 1px solid var(--border-strong); background: var(--panel-3, #0a0805); }
body.term .tabs button {
  border: none; border-right: 1px solid var(--border); border-bottom: none;
  padding: 5px 15px; font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em;
}
body.term .tabs button:hover { background: var(--track, #1a1509); color: var(--amber); }
body.term .tabs button.on { background: var(--amber); color: var(--on-accent, #000); font-weight: 700; }
.term-pane { overflow-y: auto; padding: 10px 12px 40px; min-height: 0; }

/* ------------------------------------------------------------ metrics */

.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 1px; margin-bottom: 12px; background: var(--border); border: 1px solid var(--border); }
.mcard { background: var(--surface); padding: 6px 9px; }
/* 9.5px NAMES THE NUMBER UNDER IT. Eight of these - "Total return",
   "CAGR", "Sharpe", "Revenue", "Gross margin" - are the labels that say
   what a figure on Risk & Return and Fundamentals actually IS, and they were
   the smallest text in the product. 10px is the floor the audit uses and the
   uppercase tracking is unchanged, so the row reads the same and is legible. */
.mcard .l { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--amber-dim); font-weight: 700; margin-bottom: 3px; }
.mcard .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.mcard .v.up { color: var(--good); } .mcard .v.down { color: var(--bad); }
.mcard .d { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

.fin-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fin-table th, .fin-table td { padding: 3px 8px; border-bottom: 1px solid var(--border); }
/* 10px IS THE FLOOR. A column header is the only thing that says what a
   number means; it was the smallest text on the screen. */
.fin-table th { text-align: right; color: var(--on-accent, #000); background: var(--amber); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.fin-table th:first-child, .fin-table td:first-child { text-align: left; }
.fin-table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.fin-table td:first-child { color: var(--text-2); }
.fin-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.fin-table tr:hover td { background: var(--track, #1a1509); }
/* THE us-gaap CONCEPT BESIDE EACH LINE. The footnote on this tab tells a
   reader it is there so any number traces back to the filing - which makes
   it something to read and check, not decoration, so it clears the 10px
   floor like every other label. */
.tag-tag { font-size: 10px; color: var(--faint); }
.fc-check { max-width: 500px; margin-bottom: 6px; }

body.term .tag {
  border-radius: 0; background: var(--hover, #17130c); border: 1px solid var(--border-strong);
  color: var(--amber-dim); font-size: 10px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .04em;
}
body.term .tag.src { background: var(--amber); color: var(--on-accent, #000); border-color: var(--amber); font-weight: 700; }
body.term .inline-note {
  border-radius: 0; background: var(--panel-2, #0c0a07); border: 1px solid var(--border);
  border-left: 3px solid var(--amber-faint); color: var(--muted); font-size: 11px; line-height: 1.55;
}
body.term .inline-note.warn { border-left-color: var(--amber); color: var(--text-2); }
/* THREE HARDCODED COLOURS IN THE ONE MESSAGE THAT MUST NEVER LOOK BROKEN.
   #180808 is a black slab on the five light themes, and #ff8f8f is pale pink
   text on it. Every theme carries `--bad` and `--bad-soft`; use them. */
body.term .error-note { border-radius: 0; background: var(--bad-soft);
  border: 1px solid var(--bad); color: var(--bad-ink, var(--bad)); font-size: 11.5px; }
body.term .empty { color: var(--muted); font-size: 12px; padding: 26px 10px; }

.news-item { padding: 6px 0; border-bottom: 1px solid var(--border); }
/* a headline is the most-pressed thing in this list and measured 16px
   tall; the padding grows the target without moving the text */
.news-item a { font-size: 12.5px; display: inline-block; padding: 3px 0; }
.news-item .m { font-size: 10px; color: var(--faint); margin-top: 2px; text-transform: uppercase; }

/* ----------------------------------------------------------- AI panel */

.ai-panel { background: var(--bg-2); display: grid; grid-template-rows: auto 1fr; min-height: 0; overflow: hidden; }
.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 2px 8px; background: var(--amber); color: var(--on-accent, #000);
}
.ai-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ai-title .muted { font-weight: 400; letter-spacing: .04em; color: rgba(0,0,0,.66); }
.ai-dot { width: 6px; height: 6px; background: var(--bg, #000); }
body.term .ai-head .btn { background: transparent; border: none; color: var(--on-accent, #000); font-weight: 700; padding: 2px 7px; }
body.term .ai-head .btn:hover { background: rgba(0,0,0,.14); color: var(--on-accent, #000); }
.ai-panel.collapsed .ai-title { display: none; }
.ai-panel.collapsed .ai-head { justify-content: center; padding: 4px 0; }

.ai-body { display: grid; grid-template-rows: auto auto 1fr auto auto; min-height: 0; }
.ai-ctx { padding: 4px 9px; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface); text-transform: uppercase; letter-spacing: .03em; }
.ai-ctx b { color: var(--amber); }
.ai-sheet-link { color: var(--cyan); cursor: pointer; margin-left: 6px; text-transform: none; }
.ai-sheet-link:hover { text-decoration: underline; }
.ai-sheet { margin: 0; padding: 8px 9px; font-size: 10px; line-height: 1.45; color: var(--amber-dim);
  background: var(--bg, #000); border-bottom: 1px solid var(--border); max-height: 200px; overflow: auto; white-space: pre-wrap; }
.ai-log { overflow-y: auto; padding: 9px; min-height: 0; }
.ai-empty { color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.ai-empty p { margin: 0 0 8px; }
.ai-msg { margin-bottom: 11px; font-size: 12px; }
.ai-msg.user { background: #1a1408; border-left: 2px solid var(--amber); padding: 5px 9px; color: var(--amber); font-size: 11.5px; }
.ai-msg.err { color: #ff9a9a; background: #180808; border-left: 2px solid var(--bad); padding: 5px 9px; }
.ai-msg.bot .ai-out { background: transparent; border: none; padding: 0; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.ai-msg .ai-out strong { color: var(--amber); }
.ai-msg .ai-out h4 { font-size: 11px; margin: 11px 0 5px; color: var(--amber); text-transform: uppercase; letter-spacing: .06em; }
.ai-msg .ai-out ul { padding-left: 16px; margin: 0 0 8px; }
.ai-msg .ai-out li { margin-bottom: 3px; }
.ai-msg .ai-out p { margin: 0 0 8px; }
body.term .reasoning { border: 1px dashed var(--border-strong); border-radius: 0; margin-top: 8px; }
body.term .reasoning summary { font-size: 10px; color: var(--faint); padding: 4px 8px; text-transform: uppercase; }
body.term .reasoning .inner { font-size: 10px; color: var(--faint); padding: 0 8px 8px; }

/* Suggestions, not a fixed menu: the list changes with the data on screen, so
   labels vary in length and the row has to wrap rather than clip. Sentence
   case beats the terminal's usual uppercase here - "What do my assumptions
   change?" shouted in caps reads as a heading, not something to click. */
.ai-presets { display: flex; gap: 4px; flex-wrap: wrap; padding: 7px 9px 0; align-items: flex-start; align-content: flex-start; }
.ai-presets button {
  flex: 0 1 auto; max-width: 100%; min-height: 22px; line-height: 1.3; text-align: left;
  background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--amber-dim);
  padding: 4px 9px; font-size: 10.5px; cursor: pointer; font-family: var(--mono);
  letter-spacing: .02em; border-radius: 11px;
}
.ai-presets button:hover:not(:disabled) { background: var(--amber); color: var(--on-accent, #000); border-color: var(--amber); }
.ai-presets button:disabled { opacity: .35; cursor: not-allowed; }

.ai-input { display: flex; gap: 5px; padding: 7px 9px 9px; align-items: flex-end; }
.ai-input .btn { align-self: flex-end; height: 26px; }
.ai-input textarea {
  flex: 1; min-height: 34px; max-height: 120px; font-size: 11.5px; resize: vertical;
  background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--text); border-radius: 0;
}
.ai-input textarea:focus { border-color: var(--amber); box-shadow: none; }

/* -------------------------------------------------------------- user */

.user-wrap { position: relative; }
.user-chip { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px 3px 3px; border: 1px solid var(--border-strong); background: var(--chip, #12100c); }
.user-chip:hover { border-color: var(--amber); }
.user-chip img { width: 20px; height: 20px; }
.avatar-sm { width: 20px; height: 20px; display: grid; place-items: center; background: var(--amber); color: var(--on-accent, #000); font-size: 9.5px; font-weight: 700; }
.user-chip .uname { font-size: 11px; color: var(--amber-dim); text-transform: uppercase; }
.user-pop { position: absolute; top: 32px; right: 0; z-index: 50; width: 296px; background: var(--panel, #0d0b08); border: 1px solid var(--amber-faint); padding: 12px; }
.user-full b { display: block; font-size: 12.5px; color: var(--amber); }
.user-full .muted { font-size: 11px; }
.signin-card h3 { margin: 0 0 4px; font-size: 12px; color: var(--amber); text-transform: uppercase; letter-spacing: .06em; }
.signin-card p { margin: 0 0 11px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.gbtn { min-height: 42px; margin-bottom: 8px; display: flex; justify-content: center; }
.ms-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.signin-foot { margin-top: 10px; font-size: 10px; color: var(--faint); line-height: 1.5; }

/* --------------------------------------------------------- responsive */

@media (max-width: 1350px) {
  .term-grid { grid-template-columns: min-content minmax(0, 1fr) 336px; }
  .watch { --rail-w: 200px; }
  .shell.ai-collapsed .term-grid { grid-template-columns: min-content minmax(0, 1fr) 30px; }
}
@media (max-width: 1080px) {
  /* SPECIFICITY OUTRANKS A MEDIA QUERY.
     This read `.term-grid, .shell.ai-collapsed .term-grid` and did nothing on a
     phone, because `.shell.no-ai .term-grid` (0,2,1) beats a bare `.term-grid`
     (0,1,0) whatever the viewport is. The grid stayed at two columns of
     `630px 0px` inside a 390px screen, so the whole page scrolled sideways and
     every tap landed a few pixels off. Every variant has to be named. */
  .term-grid,
  .shell .term-grid,
  .shell.no-ai .term-grid,
  .shell.ai-collapsed .term-grid { grid-template-columns: minmax(0, 1fr); }
  .watch, .ai-panel { display: none; }
}

/* ---- A THUMB IS NOT A MOUSE POINTER ----
   Keyed off the POINTER, not the width: a 1024px tablet is touched and a
   900px window on a laptop is not, and sizing by width gets both wrong. */
@media (pointer: coarse) {
  /* every button, not a list of the ones I happened to think of - the ones that
     failed the audit were the range buttons, which carry no class at all */
  .console button, .console select, .console a.btn,
  .btn, .btn-sm, .theme-btn, .cv-type, .mini, .lo-chip, .watch-btn, .side-x, .fold-head {
    min-height: 44px; padding-top: 6px; padding-bottom: 6px;
  }
  .ctab-x, .side-x, .watch-btn, .console button { min-width: 36px; }
  select, input[type="text"], input[type="number"], .lo-in, .bench-in, .rf-label input {
    min-height: 44px;
  }
  /* the LABEL is the tap target - clicking it toggles the input - so the
     label is what has to be thumb-sized, not the tick box inside it */
  input[type="checkbox"] { width: 18px; height: 18px; }
  label.chk, .chart-bar label { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; }
  .tabs.top button, .ctab { min-height: 38px; }
}

/* ---- and on a very wide screen, stop the text from becoming a ribbon ---- */
@media (min-width: 2000px) {
  .pane { max-width: 1800px; margin-left: auto; margin-right: auto; }
}

/* ------------------------------------------------- plain-English lead */

.plain-lead { border: 1px solid var(--border); border-left: 3px solid var(--amber); background: var(--panel-2, #0c0a07); padding: 9px 12px; margin-bottom: 12px; }
.pl-head { color: var(--amber); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 4px; }
.pl-body { color: var(--text-2); font-size: 12.5px; line-height: 1.6; }

/* --------------------------------------------------------- range meter */

.rangemeter { margin: 4px 0 14px; }
.rm-track { position: relative; height: 26px; background: var(--panel-3); border: 1px solid var(--border); }
.rm-outer { position: absolute; top: 6px; height: 14px; background: rgba(255,160,40,.14); }
.rm-inner { position: absolute; top: 6px; height: 14px; background: rgba(255,160,40,.34); }
.rm-median { position: absolute; top: 2px; width: 2px; height: 22px; background: var(--amber); }
.rm-spot { position: absolute; top: 0; width: 2px; height: 26px; background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
.rm-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rm-mid { color: var(--text-2); }
.rm-key { display: flex; gap: 13px; font-size: 10px; color: var(--faint); margin-top: 4px; text-transform: uppercase; }
.rm-key i { display: inline-block; width: 10px; height: 8px; vertical-align: 0; margin-right: 4px; }
.k-outer { background: rgba(255,160,40,.2); } .k-inner { background: rgba(255,160,40,.45); }
.k-med { background: var(--amber); width: 2px !important; } .k-spot { background: var(--cyan); width: 2px !important; }

.fc-detail summary { cursor: pointer; font-size: 11px; color: var(--cyan); text-transform: uppercase; letter-spacing: .05em; padding: 5px 0; }

/* ------------------------------------------------------------ screener */

.screen-pick { display: flex; gap: 1px; margin-bottom: 12px; background: var(--border); border: 1px solid var(--border); }
.sc-btn { flex: 1; background: var(--surface); border: none; padding: 8px 11px; cursor: pointer; text-align: left; font-family: var(--mono); }
.sc-btn b { display: block; color: var(--text); font-size: 12px; margin-bottom: 2px; }
.sc-btn span { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
/* THE TERMINAL'S SCREENER TOOK ITS STYLESHEET WITH IT. The `.srow` grid, the
   `.sr-*` cells and the `.sd-*` / `.sp-*` detail were drawn by the component
   deleted from term-screen.js; every one of them was checked against the whole
   assets tree before being removed. One was quietly broken -
   `var(--panel-3, #080705)00` is not a colour - and could not be seen, because
   nothing had rendered it in months. `.scan-bar` is live and stays. */
.scan-bar { height: 3px; background: var(--track, #1a1509); margin-bottom: 12px; }
.scan-bar span { display: block; height: 100%; background: var(--amber); transition: width .25s; }
body.term .bar { height: 5px; background: var(--track, #1a1509); }



/* ---------------------------------------------------- scenario controls */

.scen {
  border: 1px solid var(--border);
  background: var(--panel-2, rgba(255, 255, 255, .02));
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.scen-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scen-head b { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.scen-sub { font-size: 11px; color: var(--muted); }
.scen-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.scen-btn {
  font: inherit; font-size: 11px; padding: 5px 10px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px;
}
.scen-btn:hover { color: var(--text); border-color: var(--accent); }
.scen-btn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #000); font-weight: 600; }
.scen-says { font-size: 11.5px; color: var(--text); opacity: .8; min-height: 15px; }
.scen-says.custom { font-style: italic; color: var(--muted); }
.scen-more {
  margin-top: 10px; font: inherit; font-size: 11px; cursor: pointer;
  background: none; border: none; padding: 0;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}

.scen-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.sl { display: flex; flex-direction: column; gap: 4px; }
.sl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sl-top b { font-size: 11px; font-weight: 600; color: var(--text); }
.sl-val { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
.sl-note { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
/* a 290x16 slider: the thumb is what you grab, and 16px of it is not much */
.sl input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; margin: 0; height: 22px; }
.sl.chk { flex-direction: row; align-items: flex-start; gap: 8px; grid-column: 1 / -1; }
.sl.chk input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.sl.chk b { display: block; font-size: 11px; margin-bottom: 2px; }
.scen-reset {
  grid-column: 1 / -1; justify-self: start;
  font: inherit; font-size: 11px; padding: 5px 12px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px;
}
.scen-reset:hover { color: var(--bad); border-color: var(--bad); }

.scen-flag {
  border-left: 3px solid var(--amber); background: rgba(255, 176, 32, .07);
  padding: 8px 12px; font-size: 11.5px; margin-bottom: 12px; border-radius: 0 3px 3px 0;
}
.scen-delta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  font-size: 11.5px; margin: 10px 0 4px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 3px;
}
.scen-delta b { font-size: 11px; color: var(--muted); font-weight: 600; }
.scen-delta .up { color: var(--good); font-variant-numeric: tabular-nums; }
.scen-delta .down { color: var(--bad); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- outcome shape */

.oshape { margin: 16px 0 4px; }
.os-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.os-key { display: flex; gap: 12px; align-items: center; text-transform: none; letter-spacing: 0; }
.os-key i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; }
.os-key i.k-scen { background: var(--accent); }
.os-key i.k-base { background: var(--muted); }
.os-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.os-bar { fill: var(--accent); opacity: .55; }
.os-bar.down { fill: var(--bad); opacity: .45; }
.os-base { fill: none; stroke: var(--muted); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .85; }
.os-spot { stroke: var(--text); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .7; }
.os-axis {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums;
}
.os-axis .os-mid { color: var(--text); }
.os-note { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* A table the analyst wrote, drawn as a table. It scrolls inside its own box —
   a wide projection must never widen the chat column it sits in. */
.md-tablewrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--border); border-radius: 3px; }
.md-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.md-table th, .md-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; }
.md-table thead th { background: var(--panel, #0d0b08); color: var(--amber, #ffa028); font-weight: 600; position: sticky; top: 0; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.md-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); }

/* the chart's type/scale picklists and its settings panel */
.cv-pick { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.cv-pick select {
  font: inherit; font-size: 11px; padding: 3px 6px; color: var(--text);
  background: var(--panel, #0d0b08); border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.cv-pick select:hover { border-color: var(--amber, #ffa028); }
.cv-optbtn { position: relative; }
.cv-optpanel {
  position: absolute; z-index: 40; margin-top: 4px; right: 6px;
  display: flex; flex-direction: column; gap: 5px; padding: 9px 11px;
  background: var(--panel, #0d0b08); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
}
.cv-opt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text); white-space: nowrap; cursor: pointer; }
.cv-opt input { accent-color: var(--amber, #ffa028); }

/* ---- room to read ----------------------------------------------------
   The answer arrived as a solid block: 1.35 line-height, paragraphs touching,
   a table hard against the text above it and the bullets hard against the
   table. A page of figures needs more air than a page of prose, because the
   eye has to land on a number and not slide off it. */
.ai-msg, .ai-out, .side-log .body { line-height: 1.62; }
.ai-msg p, .ai-out p { margin: 0 0 11px; }
.ai-msg p:last-child, .ai-out p:last-child { margin-bottom: 0; }
.ai-msg ul, .ai-out ul { margin: 9px 0 12px; padding-left: 18px; }
.ai-msg li, .ai-out li { margin: 0 0 6px; }
.ai-msg h4, .ai-out h4 { margin: 15px 0 7px; font-size: 12px; letter-spacing: .02em; }
.ai-msg h4:first-child, .ai-out h4:first-child { margin-top: 0; }
.ai-msg .md-tablewrap, .ai-out .md-tablewrap { margin: 12px 0 13px; }
.ai-msg strong, .ai-out strong { color: var(--text); }
.ai-msg code, .ai-out code { padding: 1px 4px; border-radius: 2px; background: rgba(255,255,255,.06); }
/* the first line is the answer, so let it carry a little weight */
.ai-msg.bot > .body > p:first-child, .ai-out > p:first-child { color: var(--text); }
.side-log .ai-msg { margin-bottom: 14px; }
.md-table th, .md-table td { padding: 5px 10px; }

.scen-adv { grid-column: 1 / -1; justify-self: start; font: inherit; font-size: 11px; padding: 4px 8px;
  color: var(--muted); background: none; border: 1px dashed var(--border); border-radius: 3px; cursor: pointer; }
.scen-adv:hover { color: var(--text); border-color: var(--amber, #ffa028); }


/* ---------------------------------------------- actual, then the forecast */
/* Two bands and two lines. The bands are the same hue at two strengths so the
   eye reads them as one quantity at two confidences rather than as two
   different things. */
.tb-wrap { margin: 0 0 14px; }
.tb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; font-size: 12px; }
.tb-head b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.tb-legend { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.tb-k { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.tb-k-act { background: var(--text); }
.tb-k-med { background: var(--amber, #ffa028); }
.tb-k-50 { background: var(--amber, #ffa028); opacity: .38; height: 9px; }
.tb-k-90 { background: var(--amber, #ffa028); opacity: .15; height: 9px; }
.tb-svg { width: 100%; height: auto; display: block; }
.tb-grid { stroke: var(--border); stroke-width: 1; }
.tb-ylab { fill: var(--muted); font-size: 11px; font-family: inherit; }
.tb-xlab { fill: var(--muted); font-size: 11px; font-family: inherit; }
.tb-xlab.tb-mid { text-anchor: middle; fill: var(--text); }
.tb-xlab.tb-end { text-anchor: end; }
.tb-b90 { fill: var(--amber, #ffa028); opacity: .13; }
.tb-b50 { fill: var(--amber, #ffa028); opacity: .28; }
/* At 1000 user units drawn into roughly 600 CSS pixels a 2-unit stroke lands
   near one physical pixel and a busy line reads as a dotted one. */
.tb-hist { fill: none; stroke: var(--text); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
/* The median sits inside a band of its own hue, so it gets a backing stroke in
   the page colour first - without it the one line the reader came for is the
   hardest thing on the chart to see. */
.tb-medhalo { fill: none; stroke: var(--bg-2, #0d0b08); stroke-width: 6; stroke-linejoin: round; opacity: .85; }
.tb-med { fill: none; stroke: var(--amber, #ffa028); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tb-now { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.tb-dot { fill: var(--text); }
.tb-say { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 8px; max-width: 74ch; }
.tb-say b { color: var(--text); }


/* ------------------------------------------------- forecast: extra panels */
.fc-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

.tr-wrap { margin: 16px 0 14px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.tr-head { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.tr-cell { background: var(--bg-2); padding: 10px 12px; }
.tr-lab { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tr-val { font-size: 22px; margin: 3px 0 1px; }
.tr-val.up { color: var(--good, #2fd47a); }
.tr-val.down { color: var(--bad, #ff4f4f); }
.tr-sub { font-size: 11px; color: var(--faint); }
.tr-say { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 9px; max-width: 76ch; }
.tr-say b { color: var(--text); }

.lo-wrap { margin: 16px 0 14px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.lo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.lo-head b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.lo-in { padding: 4px 8px; font-size: 12px; background: var(--chip, #12100c); border: 1px solid var(--border-strong); color: var(--amber); width: 130px; }
.lo-bad { font-size: 11px; color: var(--bad, #ff4f4f); }
.lo-hint { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 76ch; }
.lo-hint b { color: var(--amber, #ffa028); }
.lo-table { margin-top: 8px; }
.lo-note { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 8px; max-width: 76ch; }
.lo-note b { color: var(--text); }


/* --------------------------------------------- forecast: the one-line answer */
.fc-verdict { border: 1px solid var(--border-strong); border-left: 3px solid var(--amber, #ffa028);
  background: var(--bg-2); padding: 11px 14px; margin-bottom: 12px; }
.fv-line { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.fv-lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fv-big { font-size: 27px; line-height: 1.1; }
.fv-big.up, .fv-move.up { color: var(--good, #2fd47a); }
.fv-big.down, .fv-move.down { color: var(--bad, #ff4f4f); }
.fv-move { font-size: 15px; }
.fv-sep { color: var(--faint); }
.fv-band { font-size: 17px; color: var(--text); }
.fv-say { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 5px; max-width: 76ch; }
.fv-say b { color: var(--text); }

.lo-chip { background: var(--chip, #12100c); border: 1px solid var(--border-strong);
  color: var(--muted); font-size: 11.5px; padding: 3px 9px; cursor: pointer; }
.lo-chip:hover { color: var(--amber, #ffa028); }
.lo-chip.on { background: var(--amber, #ffa028); color: var(--on-accent, #000); border-color: var(--amber, #ffa028); }

.cv-fannote { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 6px; }


/* -------------------------------------------- what the model cannot see */
.ev-wrap { margin: 16px 0 14px; padding: 12px 0 0; border-top: 1px solid var(--border); }
.ev-head { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.ev-warn { margin-bottom: 10px; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ev-cell { background: var(--bg-2); padding: 10px 12px; min-width: 0; }
.ev-lab { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ev-val { font-size: 16px; margin: 3px 0 4px; }
.ev-val.ev-small { font-size: 13px; line-height: 1.35; }
.ev-val.up { color: var(--good, #2fd47a); }
.ev-val.down { color: var(--bad, #ff4f4f); }
.ev-say { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin-bottom: 5px; }
.ev-item { font-size: 11.5px; line-height: 1.45; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.ev-item a { color: var(--text); }
.ev-item a:hover { color: var(--amber, #ffa028); }
.ev-src { display: block; font-size: 10px; color: var(--faint); margin-top: 2px; }
.ev-foot { font-size: 12px; color: var(--muted); line-height: 1.65; margin-top: 9px; max-width: 78ch; }
.ev-foot b { color: var(--text); }


/* ------------------------------------------------------------- ask chip */
/* Available on everything, competing with nothing: it reads as a quiet
   affordance until the pointer arrives, and only then as a button. */
.askchip {
  background: none; border: 1px solid var(--border-strong); color: var(--faint);
  font: inherit; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 7px; margin-left: 8px; cursor: pointer; vertical-align: middle;
  /* MEASURED 36x20. The coarse-pointer rule below already says this needs a
     bigger box; a desktop pointer is not exempt from the same minimum. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 22px;
}
.askchip:hover, .askchip:focus-visible {
  color: var(--on-accent, #000); background: var(--amber, #ffa028);
  border-color: var(--amber, #ffa028); outline: none;
}
.askchip-big { font-size: 11.5px; padding: 3px 10px; }
@media (pointer: coarse) { .askchip { min-height: 30px; padding: 4px 10px; } }

/* -------------------------------------------------- phone: the pane itself
   A KEYBOARD HINT ON A DEVICE WITH NO KEYBOARD IS NOISE THAT BREAKS LAYOUT.
   The F1-F6 labels are positioned against the tab text; at phone width the
   tabs shrink and the hints sat ON TOP of the names - "RISK & RETURNFORECAST
   F3MODEL F4". Nobody presses F3 on a phone. */
@media (max-width: 700px) {
  .tab-key { display: none; }
  .tabs.top { overflow-x: auto; scrollbar-width: none; }
  .tabs.top::-webkit-scrollbar { display: none; }
  .tabs.top button { flex: 0 0 auto; white-space: nowrap; }

  /* the quote header was 330px of one fact per row; the facts are short and
     belong on shared rows */
  .quote-head { padding: 6px 10px 5px; }
  .qh-top { gap: 7px; row-gap: 2px; }
  .qh-top .logo { margin-right: 6px; width: 26px; height: 26px; }
  .qh-name { font-size: 12px; }
  .qh-meta { gap: 9px; row-gap: 2px; font-size: 10px; margin-top: 3px; }

  /* the chart toolbar: one scrolling row rather than four stacked blocks */
  .chart-bar { gap: 7px; padding: 4px 8px; }
  .chart-bar .btn, .chart-bar button { white-space: nowrap; }
}

/* the collapsed analyst is a bar across the WHOLE foot of the screen, not a
   centred stub - `align-items: center` on the collapsed panel was shrinking
   its head to its content and leaving the bar floating */
@media (max-width: 900px) {
  .side.collapsed { align-items: stretch; }
  .side.collapsed .side-head { width: 100%; padding: 8px 12px; }
}

/* Real draws from the same simulation - faint enough to sit behind the bands,
   strong enough that the jaggedness is the thing you notice. */
.tb-path { fill: none; stroke: var(--text); stroke-width: 1; opacity: .30; stroke-linejoin: round; }
.tb-why { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }


/* A logo sits on the same baseline as the ticker it belongs to, in the tight
   rail rows as well as the wide tables. `with-logo` is the only hook, so the
   spacing is stated once rather than per table. */
.wrow .s.with-logo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wrow .s.with-logo .logo { flex: 0 0 auto; }

/* ================= investment rating + signals card ================= */
.ir-badge {
  display: inline-flex; align-items: baseline; gap: 5px; margin-left: 10px;
  padding: 2px 10px; border-radius: 9999px; border: 1px solid var(--border-strong);
  background: var(--chip);
}
.ir-badge b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.ir-badge i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.ir-badge em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }

.ir-card { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 12px 0; }
.ir-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 8px; }
.ir-head h3 { margin: 0; font-size: 13.5px; flex: 1 1 auto; }
.ir-counts { display: flex; gap: 12px; font-size: 12px; }
.ir-counts .up { color: var(--good); }
.ir-counts .down { color: var(--bad); }
/* the bar is the same fact as the counts, drawn — a reader should be able to
   check one against the other at a glance */
.ir-bar { height: 4px; background: var(--bad-soft); margin: 0 14px; border-radius: 2px; overflow: hidden; }
.ir-bar span { display: block; height: 100%; background: var(--good); }

.ir-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ir-sig {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
  grid-template-areas: 'dot name detail ask' '. why why why';
  gap: 2px 9px; align-items: baseline; padding: 8px 14px; border-top: 1px solid var(--border);
}
.ir-dot { grid-area: dot; width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.ir-sig.bull .ir-dot { background: var(--good); }
.ir-sig.bear .ir-dot { background: var(--bad); }
.ir-sig-name { grid-area: name; font-size: 12.5px; color: var(--text); }
.ir-sig-detail { grid-area: detail; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ir-ask {
  grid-area: ask; font-size: 10.5px; padding: 2px 9px; border-radius: 9999px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer;
}
.ir-ask:hover { border-color: var(--accent); color: var(--accent); }
/* the reason is always on screen: a chip whose meaning is in a tooltip is a
   chip most people never understand */
.ir-why { grid-area: why; font-size: 11.5px; line-height: 1.5; color: var(--faint); }
.ir-foot { margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.55; color: var(--muted); }

@media (max-width: 720px) {
  .ir-sig {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    grid-template-areas: 'dot name ask' '. detail detail' '. why why';
  }
  .ir-sig-detail { white-space: normal; }
  .ir-ask { min-height: 32px; padding: 4px 12px; }
  .ir-badge { margin-left: 0; }
}

/* ================= seasonality ================= */
.sea { padding: 4px 0 8px; }
.sea-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sea-head h3 { margin: 0; font-size: 14px; }
.sea-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sea-table th {
  text-align: left; padding: 7px 10px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.sea-table th.num, .sea-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sea-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.sea-table tr:hover td { background: var(--hover); }
.sea-table td.up { color: var(--good); }
.sea-table td.down { color: var(--bad); }
/* a month with too few years is dimmed rather than hidden: removing it would
   make the table look complete when it is not */
.sea-table tr.thin td { opacity: .62; }
.sea-thin {
  margin-left: 6px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: 0 4px;
}
/* the bar is centred on zero so up and down read as directions, not lengths */
.sea-bar { width: 160px; padding: 0 10px; }
.sea-fill { display: block; height: 8px; border-radius: 2px; }
.sea-fill.up { background: var(--good); }
.sea-fill.down { background: var(--bad); }
.sea-foot { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); max-width: 760px; }

@media (max-width: 720px) {
  /* six numeric columns do not fit a phone; the two extremes go, and the
     average, the median and the year count - the ones that carry the caveat -
     stay */
  .sea-table th:nth-child(5), .sea-table td:nth-child(5),
  .sea-table th:nth-child(6), .sea-table td:nth-child(6) { display: none; }
  .sea-bar { width: 84px; padding: 0 6px; }
  .sea-table th, .sea-table td { padding: 8px 6px; }
}

/* ---- ON A PHONE THE SECURITY COMES FIRST ----
   Measured on a 390px screen: the action bar took 53px directly above the
   security's own name and price, so 272px of a 844px window was spent before
   the thing you opened appeared. The risk-free-rate spinner is an advanced
   control nobody adjusts on a train and it is what forces the bar onto two
   lines; the live dot keeps its colour but loses its sentence. Both remain in
   full on a desktop. */
@media (max-width: 760px) {
  .pane-bar { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
  .pane-bar .rf-label { display: none; }
  .pane-bar .live-dot { font-size: 0; gap: 0; }
  .pane-bar .live-dot span { font-size: 0; }
  .pane-bar .pb-sym { font-size: 12px; }
  /* the three actions are the point of this bar, so they stay thumb-sized */
  .pane-bar .btn, .pane-bar .btn-sm { min-height: 40px; padding-left: 10px; padding-right: 10px; }
}