/* The AI card on Home and the scenario workbench.
 *
 * These surfaces used to carry a palette of their own: forty hexes shadowing
 * the site's own tokens, because the design they came from was drawn before
 * `design.css` existed. It is why they never quite matched the rest of the
 * page — #FFFFFF beside #FAFCFE, #DCE4F0 beside the ink-based rule, a teal
 * two steps darker than the accent — and why the dark theme needed a second
 * copy of all forty.
 *
 * Every name is kept, because a few hundred rules ask for them by name. What
 * changed is what they answer: the palette, which already flips itself. The
 * one set that stays its own is the beta warning — amber is not in this
 * palette and a warning is the one thing that should not look like the page.
 */

.ai-cards, .aix-hero, .aix-bench, .aix-dialog, .aif-panel {
  --aix-sans: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --aix-mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, monospace;
  --aix-ink: var(--ink); --aix-body: var(--t2); --aix-muted: var(--faint); --aix-quiet: var(--t2);
  --aix-teal: var(--accent); --aix-teal-hover: var(--accentPress); --aix-teal-ink: var(--accent);
  --aix-deep: var(--sunk); --aix-up: var(--up); --aix-down: var(--down); --aix-down-soft: var(--down);
  --aix-surface: var(--surface); --aix-soft: var(--surface); --aix-line: var(--rule);
  --aix-hair: var(--rule2); --aix-hair2: var(--rule2);
  --aix-grid: var(--rule2); --aix-split: var(--thread); --aix-past: var(--faint);
  --aix-range: var(--accTint); --aix-track: var(--sunk);
  --aix-track-system: var(--accTint); --aix-track-quiet: var(--sunk); --aix-row-hover: var(--sunk);
  --aix-hero-bg: var(--surface); --aix-hero-line: var(--rule); --aix-hero-foot: var(--rule);
  --aix-step-line: var(--rule); --aix-seg-bg: var(--sunk); --aix-seg-line: var(--rule);
  --aix-beta-bg: #FFF4E2; --aix-beta-line: #E0B268; --aix-beta-ink: #7A4F12; --aix-beta-dot: #B8791B; --aix-beta-hover: #FDEBCE;
  --aix-invert: var(--ink); --aix-invert-ink: var(--surface);
  --aix-pipe-bg: var(--surface); --aix-quiet-bg: var(--sunk); --aix-quiet-line: var(--rule);
  --aix-rule: var(--rule); --aix-record-bg: var(--sunk); --aix-record-line: var(--rule);
  --aix-shadow: none;
  color: var(--aix-ink); font-family: var(--aix-sans);
}
[data-theme="dark"] .aix-hero, [data-theme="dark"] .aix-bench, [data-theme="dark"] .aix-dialog, [data-theme="dark"] .ai-cards,
[data-theme="dark"] .aif-panel {
  /* Only the warning, which is the one set that is not the palette's. */
  --aix-beta-bg: #3A2C14; --aix-beta-line: #8A6424; --aix-beta-ink: #F2C98A; --aix-beta-dot: #E0A94A; --aix-beta-hover: #4A3918;
}
#app .ai-cards button, #app .aix-bench button, #app .aix-dialog button { font-family: var(--aix-sans); }
.ai-cards :is(button, summary, a):focus-visible, .aix-bench :is(button, summary, a, input, select):focus-visible,
.aix-dialog button:focus-visible { outline: 3px solid var(--aix-teal-ink); outline-offset: 2px; }

.aix-eyebrow { font-family: var(--aix-mono); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.aix-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--aix-muted); text-wrap: pretty; }
.aix-warn { color: var(--aix-down); }
:is(.ai-cards, .aix-bench) :is(.up) { color: var(--aix-teal-ink); }
:is(.ai-cards, .aix-bench) :is(.down) { color: var(--aix-down); }
:is(.ai-cards, .aix-bench) :is(.quiet) { color: var(--aix-muted); }

/* ── the beta pill ──────────────────────────────────────────────────────── */

#app .aix-beta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--aix-beta-bg); border: 1px solid var(--aix-beta-line); color: var(--aix-beta-ink);
  font-family: var(--aix-mono) !important; font-size: 11px; letter-spacing: .11em;
  padding: 5px 10px; border-radius:var(--radius-island); white-space: nowrap;
}
#app .aix-beta:hover { background: var(--aix-beta-hover); }
.aix-beta i { width: 5px; height: 5px; border-radius: 50%; background: var(--aix-beta-dot); animation: aix-pulse 2s infinite; }
.aix-beta.is-static { cursor: default; }
.aix-beta.is-static i { animation: none; }
@keyframes aix-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes aix-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Home: the card at the top ──────────────────────────────────────────── */

/* One card — what the system is and the two ways in, beside the system's own
   record — and the three steps underneath it. */
.ai-cards { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aix-hero {
  background: var(--aix-hero-bg); border: 1px solid var(--aix-hero-line); border-radius:var(--radius-island);
  padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 22px;
  align-items: center; box-shadow: var(--aix-shadow); min-width: 0;
}
.aix-hero-intro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aix-hero { --aix-h1: 34px; }
#app .aix-hero h1 {
  margin: 0; font-family: var(--aix-sans) !important; font-size: var(--aix-h1) !important; line-height: 1.05 !important;
  font-weight: 700; letter-spacing: -.025em; text-wrap: pretty; color: var(--aix-ink);
}
.aix-hero-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--aix-body); text-wrap: pretty; }
.aix-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#app .aix-cta {
  border: 0; cursor: pointer; background: var(--aix-teal); color: var(--onAccent); font-size: 14px; font-weight: 600;
  padding: 13px 20px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; white-space: nowrap; min-height: 48px;
}
#app .aix-cta:hover { background: var(--aix-teal-hover); }
.aix-cta span { font-family: var(--aix-mono); }
#app .aix-cta-quiet {
  cursor: pointer; background: var(--aix-quiet-bg); border: 1px solid var(--aix-quiet-line); color: var(--aix-teal-ink);
  font-size: 14px; font-weight: 600; padding: 13px 20px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; white-space: nowrap; min-height: 48px;
}
#app .aix-cta-quiet:hover { border-color: var(--aix-teal-ink); }

.aix-seg {
  display: flex; background: var(--aix-seg-bg); border: 1px solid var(--aix-seg-line);
  border-radius:var(--radius-island); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto;
}
#app .aix-seg button {
  border: 0; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 15px; border-radius:var(--radius-island);
  background: transparent; color: var(--aix-muted); white-space: nowrap; min-height: 36px;
}
#app .aix-seg button.on { background: var(--aix-invert); color: var(--aix-invert-ink); }
.aix-seg.is-small { background: var(--aix-track); border-color: var(--aix-line); }
#app .aix-seg.is-small button { font-size: 12px; padding: 7px 13px; min-height: 32px; }

/* The record, on Home. It used to be an inverted teal panel with its own
 * white-on-dark chart palette — the one lifted object on a page of flat
 * cards, which read as the thing being sold. It is now the third of three
 * facts and looks like the other two: a bordered box on the surface.
 *
 * Its chart follows suit. The two lines were #5CC4B4 and #7FA9A5, hexes that
 * only worked on that dark ground and resolved to nothing in the dark theme;
 * they are the palette's ink and its faint now, solid and dashed, which is
 * also exactly what the note underneath says they are. */
.aix-system {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: inherit;
}
.aix-system .aix-eyebrow { color: var(--faint); }
.aix-system-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aix-system-value {
  font-family: var(--aix-mono); font-size: 26px; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--ink); text-align: start;
}
.aix-system-versus {
  margin: 0; max-width: 24ch; font-size: 12px; line-height: 1.4; color: var(--t2); text-wrap: pretty;
}
.aix-system-chart { height: 58px; display: flex; }
.aix-hero-chart { display: block; width: 100%; height: 58px; overflow: visible; }
.aix-hero-chart .aix-zero { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.aix-hero-area { fill: var(--accent); opacity: .10; }
.aix-hero-market { fill: none; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.aix-hero-system { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.aix-system-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.aix-system-legend span { display: inline-flex; align-items: center; gap: 6px; }
.aix-system-legend i { display: block; width: 14px; height: 2px; }
.aix-key-system { background: var(--ink); }
.aix-key-market { background: repeating-linear-gradient(90deg, var(--faint) 0 4px, transparent 4px 7px); }
/* The record filling in: a row per night's five, a square per session held.
   The line stands after the last session in the record; left of it, closed. */
/* Wide enough for "14 سبتمبر", the longer of the two languages' dates. */
.aix-fill { --label-w: 66px; display: flex; flex-direction: column; gap: 6px; }
.aix-fill-rows { position: relative; display: flex; flex-direction: column; gap: 5px; padding-top: 15px; }
/* Over the line, and never past either end: shifted by as much of its own
   width as the line is across the plot. */
.aix-fill-now {
  position: absolute; top: 0; left: calc(var(--label-w) + (100% - var(--label-w)) * var(--now) / var(--cols));
  transform: translateX(calc(var(--now) / var(--cols) * -100%));
  font-family: var(--aix-mono); font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--faint); white-space: nowrap;
}
.aix-fill-row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; }
.aix-fill-label { font-family: var(--aix-mono); font-size: 11px; line-height: 1; color: var(--faint); white-space: nowrap; }
.aix-fill-track { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; }
.aix-fill-track i { display: block; height: 11px; border-radius: 3px; border: 1.5px solid var(--accent); box-sizing: border-box; }
.aix-fill-track i.is-closed { background: var(--accent); }
.aix-fill-row:not(.is-read) .aix-fill-track i { border-style: dashed; border-color: var(--accMid); }
.aix-fill-rows::after {
  content: ''; position: absolute; top: 12px; bottom: -4px; width: 0; border-left: 1.5px solid var(--thread);
  left: calc(var(--label-w) + (100% - var(--label-w)) * var(--now) / var(--cols));
}
.aix-fill-axis { display: flex; justify-content: flex-end; font-size: 11px; line-height: 1.3; color: var(--faint); text-align: end; }

.aix-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aix-pipeline li {
  background: var(--aix-pipe-bg); border: 1px solid var(--aix-line); border-radius:var(--radius-control);
  padding: 13px 15px; display: flex; gap: 10px; align-items: flex-start; min-width: 0;
}
.aix-pipeline b {
  flex: 0 0 20px; height: 20px; border-radius: 6px; background: var(--aix-teal); color: var(--onAccent);
  font-family: var(--aix-mono); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center;
}
.aix-pipeline div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aix-pipeline strong { font-size: 14px; font-weight: 600; line-height: 1.25; text-wrap: pretty; }
.aix-pipeline span { font-size: 12px; line-height: 1.4; color: var(--aix-muted); text-wrap: pretty; }

/* ── every model against the market (the workbench's past runs) ─────────── */

.aix-models header { align-items: flex-end; }
/* `.aix-card header > div` stacks a card's title and sub; the chips beside them stay a row. */
.aix-card header > div.aix-seg { flex-direction: row; gap: 2px; }
.aix-legend-axis { font-family: var(--aix-mono); font-size: 11px; letter-spacing: .07em; color: var(--aix-muted); }
.aix-model-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 22px; }
#app .aix-model-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 74px;
  align-items: center; column-gap: 12px; row-gap: 5px; padding: 7px 2px; border-radius: 9px;
  border-bottom: 1px solid var(--aix-hair2); color: var(--aix-ink);
}
#app .aix-model-row:hover { background: var(--aix-row-hover); }
#app .aix-model-row.is-selected { background: var(--aix-track-system); }
.aix-model-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aix-model-name strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aix-model-name small {
  font-family: var(--aix-mono); font-size: 11px; letter-spacing: .06em; color: var(--aix-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aix-model-value { text-align: end; font-family: var(--aix-mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.aix-track {
  grid-column: 1 / -1; position: relative; display: block; height: 16px; border-radius: 6px; background: var(--aix-track);
}
.aix-model-row.is-system .aix-track { background: var(--aix-track-system); }
.aix-track .aix-centre { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--aix-split); }
.aix-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; }
.aix-bar.up { background: var(--aix-up); } .aix-bar.system { background: var(--aix-teal); } .aix-bar.down { background: var(--aix-down); }
.aix-track-pending { background: var(--aix-track-quiet); }
.aix-models-foot {
  margin: 0; font-family: var(--aix-mono); font-size: 11px; letter-spacing: .07em; color: var(--aix-muted);
  border-top: 1px solid var(--aix-hair); padding-top: 10px;
}

/* HOME'S PHONE ORDER LIVES IN ONE FILE, AND IT IS NOT THIS ONE.
 *
 * `#app .journal-home > .ai-cards { order: 5 }` stood here, an id selector
 * beating the list in chart-viewer.css so that the two files disagreed and
 * the winner was decided by specificity rather than by anybody's decision.
 * That is the exact fault chart-viewer.css's own comment was written to
 * prevent — and on 20 September 2026, when the list moved the lab to 6 to
 * make room for the running-session band, this kept it at 5 and put the lab
 * level with the evidence shelf.
 *
 * One list, in chart-viewer.css, at one specificity. A block that wants a
 * different position on a phone changes it there. */

/* ── the workbench ──────────────────────────────────────────────────────── */

.aix-bench { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.aix-bench-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.aix-bench-title { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#app .aix-back {
  all: unset; cursor: pointer; align-self: flex-start; font-family: var(--aix-mono) !important;
  font-size: 11px; letter-spacing: .1em; color: var(--aix-teal-ink); min-height: 32px; display: inline-flex; align-items: center;
}
#app .aix-back:hover { color: var(--aix-ink); }
.aix-bench-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aix-bench { --aix-bench-h1: 27px; }
#app .aix-bench h1 { margin: 0; font-family: var(--aix-sans) !important; font-size: var(--aix-bench-h1) !important; line-height: 1.15 !important; font-weight: 700; letter-spacing: -.02em; color: var(--aix-ink); }
.aix-bench-name .aix-beta { align-self: center; padding: 4px 9px; letter-spacing: .09em; }
.aix-bench-title > p { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.45; color: var(--aix-muted); }
.aix-bench-clock {
  margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 14px; text-align: end; align-items: baseline;
}
.aix-bench-clock dt { font-family: var(--aix-mono); font-size: 11px; letter-spacing: .1em; color: var(--aix-muted); }
.aix-bench-clock dd { margin: 0; font-family: var(--aix-mono); font-size: 17px; font-weight: 600; white-space: nowrap; }
.aix-bench-clock small { grid-column: 1 / -1; font-size: 12px; color: var(--aix-muted); }

.aix-bench-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.aix-controls {
  background: var(--aix-surface); border: 1px solid var(--aix-line); border-radius:var(--radius-control); padding: 18px;
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.aix-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* A step in the control column. The comp numbers them 1, 2, 3 in a filled
   square and sets the label as a heading — three things to do in order,
   rather than three mono captions a reader skims past. */
.aix-step { margin: 0; display: flex; align-items: center; gap: 9px; }
.aix-step b {
  font-family: var(--aix-mono); font-size: 12px; font-weight: 600; letter-spacing: 0;
  background: var(--ink); color: var(--surface); border-radius: 6px; padding: 3px 8px;
}
.aix-step > span { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.aix-bench-dateline {
  margin: 0 0 6px; font-family: var(--aix-mono); font-size: 12px; color: var(--faint);
}
.aix-chips { display: flex; flex-wrap: wrap; gap: 7px; }
#app .aix-chip {
  cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 13px; border-radius:var(--radius-island); min-height: 36px;
  background: var(--aix-surface); color: var(--aix-ink); border: 1px solid var(--aix-line);
}
#app .aix-chip:hover { border-color: var(--aix-teal-ink); }
#app .aix-chip.on { background: var(--aix-teal); color: var(--onAccent); border-color: var(--aix-teal); }
.aix-layers { gap: 0; }
.aix-layers .aix-step { margin-bottom: 4px; }
#app .aix-toggle {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--aix-hair2); min-height: 48px;
}
.aix-toggle span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aix-toggle strong { font-size: 14px; font-weight: 500; color: var(--aix-ink); }
.aix-toggle small { font-size: 12px; color: var(--aix-muted); }
.aix-switch { flex: 0 0 36px; height: 21px; border-radius:var(--radius-island); background: var(--aix-line); position: relative; transition: background .18s; }
.aix-switch b {
  position: absolute; top: 3px; inset-inline-start: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 3px rgba(22, 36, 47, .3); transition: inset-inline-start .18s;
}
.aix-toggle[aria-checked="true"] .aix-switch { background: var(--aix-teal); }
.aix-toggle[aria-checked="true"] .aix-switch b { inset-inline-start: 18px; }
#app .aix-toggle:disabled { cursor: not-allowed; opacity: .5; }
.aix-model-about { margin-top: 2px; }

.aix-results { display: flex; flex-direction: column; gap: 14px; position: relative; min-width: 0; min-height: 320px; }
.aix-from { padding: 10px 14px; border-radius: 12px; background: var(--aix-track-system); color: var(--aix-body); }

/* The two rules the results sit under: what has not been scored, and what has. */
.aix-divider { display: flex; align-items: center; gap: 12px; margin-top: 2px; scroll-margin-top: 84px; }
#aix-past { margin-top: 38px; padding-top: 24px; border-top: 2px solid var(--aix-rule); }
.aix-divider-label { font-family: var(--aix-mono); font-size: 11px; letter-spacing: .12em; color: var(--aix-teal-ink); white-space: nowrap; }
.aix-divider > i { height: 1px; flex: 1; min-width: 24px; background: var(--aix-rule); }
.aix-divider-note { font-size: 12px; color: var(--aix-muted); white-space: nowrap; }

.aix-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.aix-tile {
  background: var(--aix-surface); border: 1px solid var(--aix-line); border-radius:var(--radius-control); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.aix-tile .aix-eyebrow { font-size: 11px; color: var(--aix-muted); }
.aix-tile-value { font-family: var(--aix-mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; text-align: start; }
.aix-tile p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--aix-muted); text-wrap: pretty; }

.aix-card.aix-record-card { background: var(--aix-record-bg); border-color: var(--aix-record-line); }
.aix-record-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.aix-record-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aix-record-stat .aix-eyebrow { font-size: 11px; color: var(--aix-muted); }
.aix-record-stat strong { font-family: var(--aix-mono); font-size: 21px; font-weight: 600; letter-spacing: -.02em; text-align: start; }
.aix-record-stat small { font-size: 12px; line-height: 1.35; color: var(--aix-muted); text-wrap: pretty; }
.aix-record-foot {
  margin: 0; font-size: 12px; line-height: 1.4; color: var(--aix-muted); border-top: 1px solid var(--aix-rule);
  padding-top: 10px; text-wrap: pretty;
}

/* ── the ranking: which view is on screen, and the table ─────────────────── */

.aix-view { display: flex; flex-direction: column; gap: 8px; }
.aix-view-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#app .aix-view-switch button {
  cursor: pointer; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 7px 16px 7px 7px;
  border-radius:var(--radius-island); border: 1px solid var(--aix-line); background: var(--aix-surface); color: var(--aix-ink);
  font-size: 14px; font-weight: 600;
}
#app .aix-view-switch button b {
  flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--aix-mono); font-size: 11px; font-weight: 600; background: var(--aix-track); color: var(--aix-muted);
}
#app .aix-view-switch button:hover:not(:disabled) { border-color: var(--aix-teal-ink); }
#app .aix-view-switch button:focus-visible { outline: 2px solid var(--aix-teal-ink); outline-offset: 2px; }
#app .aix-view-switch button.on { background: var(--aix-teal); border-color: var(--aix-teal); color: var(--onAccent); }
/* A 22% white wash over the accent lifts the ground barely at all, so white
   on it measured 3.87:1 at 11px. The count sits on an opaque ground now and
   takes the accent as its ink — the same swap the session tag needed. */
#app .aix-view-switch button.on b { background: var(--onAccent); color: var(--accent); }
#app .aix-view-switch button:disabled { cursor: not-allowed; opacity: .5; }
.aix-view-switch > i { font-style: normal; font-family: var(--aix-mono); color: var(--aix-muted); }
.aix-window-note {
  margin: 12px 0 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--aix-teal);
  font-size: 12px; line-height: 1.65; color: var(--aix-body);
}
/* A forecaster whose numbers are mostly a return to each company's average. */
.aix-pull-note {
  padding: 10px 14px; border: 1px solid var(--aix-beta-line); border-radius: 12px;
  background: var(--aix-beta-bg); color: var(--aix-beta-ink); font-size: 12px; line-height: 1.55;
}
.aix-pull-compare { margin-top: 10px; }

/* 7a's five columns: rank, company, the forecast-window drawing, what the
   model expects, and how many other models agree. The drawing was on a second
   line spanning the whole row — with two caption lines under it, which is how
   one company came to take 185px and the card 2,214. Inline, the rows are
   scannable and two of them fit in a glance. */
.aix-ranking-card { --rank-cols: 34px minmax(0, 1.45fr) minmax(150px, 2fr) minmax(84px, .8fr) minmax(0, 1.1fr); }
.aix-ranking-card header { align-items: flex-end; }
.aix-rank-head {
  display: grid; grid-template-columns: var(--rank-cols); column-gap: 12px; padding: 0 6px 6px;
  border-bottom: 1px solid var(--aix-line); font-family: var(--aix-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aix-muted);
}
.aix-rank-head span:first-child { text-align: center; }
.aix-rank-head span:nth-child(n+3) { text-align: end; }
.aix-rank-list { display: flex; flex-direction: column; }
.aix-price-detail { grid-column: 3; grid-row: 1; display: grid; gap: 1px; min-width: 0; align-self: center; }
.aix-price-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.aix-price-grid > span { display: grid; gap: 4px; }
.aix-price-grid.is-short { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
.aix-price-grid small, .aix-price-caption { color: var(--aix-muted); font-size: 11px; line-height: 1.5; }
.aix-price-grid b { font-size: 14px; font-variant-numeric: tabular-nums; }
.aix-risk-note { grid-column: 2 / -1; font-size: 12px; line-height: 1.5; color: var(--aix-ink); }
@media (max-width: 600px) {
  .aix-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .aix-price-grid.is-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aix-price-detail, .aix-risk-note { grid-column: 1 / -1; }
}
#app .aix-rank-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: var(--rank-cols);
  align-items: center; column-gap: 12px; row-gap: 3px; padding: 10px 6px; border-bottom: 1px solid var(--aix-hair2);
  color: var(--aix-ink);
}
/* Each cell named, because the drawing is the third child in the markup and
   the fifth column in the layout; left to auto-placement it would land in
   whichever slot the row before it had spare. */
#app .aix-rank-row > .aix-rank-n { grid-column: 1; grid-row: 1; }
#app .aix-rank-row > .aix-company-name { grid-column: 2; grid-row: 1; }
#app .aix-rank-row > strong { grid-column: 4; grid-row: 1; }
#app .aix-rank-row > .aix-rank-agree,
#app .aix-rank-row > .aix-rank-was { grid-column: 5; grid-row: 1; }
#app .aix-rank-row > .aix-risk-note { grid-column: 2 / -1; grid-row: 2; }
#app .aix-rank-row:hover { background: var(--aix-row-hover); }
#app .aix-rank-row.is-top { background: var(--aix-track-system); }
.aix-rank-n { font-family: var(--aix-mono); font-size: 14px; font-weight: 600; color: var(--aix-muted); text-align: center; }
.aix-rank-row.is-top .aix-rank-n { color: var(--aix-teal-ink); }
.aix-rank-row > strong { font-family: var(--aix-mono); font-size: 14px; font-weight: 600; text-align: end; white-space: nowrap; }
.aix-rank-agree { font-size: 12px; color: var(--aix-muted); text-align: end; white-space: nowrap; }
/* Above the line by its forecast, but not in the five scored: it did not trade. */
.aix-rank-passed { display: block; font-style: normal; font-size: 11px; line-height: 1.3; color: var(--aix-muted); }
#app .aix-rank-row.is-passed { background: transparent; }
/* Wraps rather than spilling: right-aligned, an overflow runs LEFT, over the
   score, and no scrollWidth ever reports it. The rank and its shift stay one
   piece; "Forecast: …" takes the next line when the column is narrow. */
.aix-rank-was {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 8px; min-width: 0;
  font-family: var(--aix-mono); font-size: 12px; color: var(--aix-muted);
}
.aix-rank-was > * { white-space: nowrap; }
.aix-rank-was em { font-style: normal; font-size: 12px; font-weight: 600; }
.aix-rank-was small { font-size: 12px; }
.aix-rank-cut {
  margin: 0; padding: 7px 6px; font-size: 12px; line-height: 1.4; color: var(--aix-teal-ink);
  border-bottom: 1px dashed var(--aix-teal-ink);
}
.aix-said { display: flex; flex-direction: column; gap: 6px; }
.aix-said .aix-eyebrow { font-size: 11px; color: var(--aix-muted); }
#app .aix-reason {
  margin: 16px 0 20px; padding: 16px; border: 1px solid var(--aix-rule); border-radius:var(--radius-control);
  background: var(--aix-record-bg);
}
#app .aix-reason .aix-quote { margin: 10px 0; font-size: 14px; line-height: 1.65; }
.aix-reason small { display: block; font-size: 11px; line-height: 1.6; color: var(--aix-body); }
.aix-layers-lead { margin: 0 0 6px !important; }
.aix-fine { margin: 0; font-size: 12px; color: var(--aix-muted); }

.aix-key-five { background: var(--aix-teal-ink); border-radius: 50% !important; }
.aix-key-market-dot { background: transparent; border: 2px solid var(--aix-past); border-radius: 50% !important; box-sizing: border-box; }

.aix-nights-chart { position: relative; padding-bottom: 20px; }
.aix-nights-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.aix-nights-zero { stroke: var(--aix-split); stroke-width: 1.2; }
.aix-nights-gap { stroke-width: 3; stroke-linecap: round; }
.aix-nights-market { fill: var(--aix-surface); stroke: var(--aix-past); stroke-width: 2; }
.aix-nights-five { stroke: var(--aix-surface); stroke-width: 2; }
.is-ahead .aix-nights-gap { stroke: var(--aix-up); } .is-ahead .aix-nights-five { fill: var(--aix-teal-ink); }
.is-behind .aix-nights-gap { stroke: var(--aix-down-soft); } .is-behind .aix-nights-five { fill: var(--aix-down); }
.aix-nights-tick {
  position: absolute; left: 0; transform: translateY(-50%); font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted);
}
.aix-nights-dates { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.aix-nights-dates span {
  position: absolute; transform: translateX(-50%); font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted); white-space: nowrap;
}

.aix-nights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aix-night { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--aix-hair); }
.aix-night-when { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.aix-night-when > b { font-family: var(--aix-mono); font-size: 14px; font-weight: 600; }
.aix-status {
  font-family: var(--aix-mono); font-size: 11px; letter-spacing: .08em; padding: 2px 7px; border-radius:var(--radius-island);
  border: 1px solid var(--aix-line); color: var(--aix-muted); white-space: nowrap;
}
.aix-status.is-ahead { color: var(--aix-teal-ink); border-color: var(--aix-teal-ink); }
.aix-status.is-behind { color: var(--aix-down); border-color: var(--aix-down); }
.aix-status.is-waiting { background: var(--aix-beta-bg); border-color: var(--aix-beta-line); color: var(--aix-beta-ink); }
.aix-status.is-rebuilt { border-style: dashed; cursor: help; }
.aix-night-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.aix-night-sum { margin: 0; font-size: 14px; line-height: 1.45; color: var(--aix-body); }
.aix-night-sum b { font-family: var(--aix-mono); font-weight: 600; }
.aix-night.is-withheld .aix-night-sum { color: var(--aix-muted); }
.aix-night-picks { display: flex; flex-wrap: wrap; gap: 6px; }
#app .aix-pick-chip {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 9px; border-radius: 8px; background: var(--aix-track); border: 1px solid var(--aix-hair); min-height: 30px;
  font-family: var(--aix-mono); font-size: 12px; color: var(--aix-ink);
}
#app .aix-pick-chip:hover { border-color: var(--aix-teal-ink); }
#app .aix-pick-chip.is-said { background: transparent; border: 1px dashed var(--aix-beta-line); }
.aix-pick-chip b { font-weight: 600; }

.aix-search-label { display: flex; flex-direction: column; gap: 5px; min-width: min(220px, 100%); }
.aix-search-label .aix-eyebrow { font-size: 11px; color: var(--aix-muted); }
.aix-search {
  font: inherit; font-size: 17px; box-sizing: border-box; width: 100%; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--aix-line); border-radius: 12px; background: var(--aix-surface); color: var(--aix-ink);
}
.sc-skeleton.is-short { height: 72px; }

.aix-card {
  background: var(--aix-surface); border: 1px solid var(--aix-line); border-radius:var(--radius-control); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.aix-card header { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.aix-card header > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#app .aix-card h3 { margin: 0; font-family: var(--aix-sans) !important; font-size: 17px; line-height: 1.3; font-weight: 600; text-wrap: pretty; color: var(--aix-ink); }
#app .aix-pair .aix-card h3 { font-size: 17px; }
.aix-card header p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--aix-muted); text-wrap: pretty; max-width: 72ch; }
.aix-empty { margin: 0; font-size: 14px; color: var(--aix-muted); }
.aix-empty-card p { margin: 0; font-size: 14px; color: var(--aix-muted); }
.aix-legend { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted); }
.aix-legend span { display: inline-flex; align-items: center; gap: 5px; }
.aix-legend i { display: block; width: 11px; height: 11px; border-radius: 3px; }
.aix-key-band50 { background: var(--aix-teal-ink); opacity: .22; }
.aix-key-band80 { background: var(--aix-teal-ink); opacity: .1; }
.aix-key-past { width: 13px !important; height: 2px !important; border-radius: 0 !important; background: var(--aix-past); }

.aix-fan { position: relative; }
.aix-fan svg { display: block; width: 100%; height: auto; }
.aix-grid { stroke: var(--aix-grid); stroke-width: 1; }
.aix-split { stroke: var(--aix-split); stroke-width: 1; stroke-dasharray: 3 4; }
.aix-band80 { fill: var(--aix-teal-ink); opacity: .10; }
.aix-band50 { fill: var(--aix-teal-ink); opacity: .2; }
.aix-past { fill: none; stroke: var(--aix-past); stroke-width: 2.2; stroke-linejoin: round; }
.aix-median { fill: none; stroke: var(--aix-teal-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.aix-median-dot { fill: var(--aix-teal-ink); }
.aix-median-end { fill: var(--aix-surface); stroke: var(--aix-teal-ink); stroke-width: 3; }
.aix-fan-tick {
  position: absolute; left: 0; transform: translateY(-100%); font-family: var(--aix-mono); font-size: 11px;
  color: var(--aix-muted); background: var(--aix-surface); padding-right: 4px;
}
.aix-fan-today, .aix-fan-horizon {
  position: absolute; bottom: 2px; transform: translateX(-50%); font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted);
}
.aix-fan-end {
  position: absolute; right: 0; transform: translateY(-150%); font-family: var(--aix-mono); font-size: 14px;
  font-weight: 600; color: var(--aix-teal-ink); background: var(--aix-surface); padding: 0 2px;
}

.aix-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.aix-hist { position: relative; }
.aix-hist svg { display: block; width: 100%; height: auto; }
.aix-bin-up { fill: var(--aix-up); } .aix-bin-down { fill: var(--aix-down-soft); } .aix-bin-quiet { fill: var(--aix-line); }
.aix-hist-zero { stroke: var(--aix-ink); stroke-width: 1; stroke-dasharray: 3 3; }
.aix-hist-marker { stroke: var(--aix-teal-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.aix-hist-axis {
  position: relative; display: flex; justify-content: space-between; height: 18px; padding-top: 4px;
  font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted);
}
.aix-hist-mid { position: absolute; top: 4px; transform: translateX(-50%); }

.aix-agree { display: flex; flex-direction: column; gap: 7px; }
.aix-agree-row { display: grid; grid-template-columns: minmax(52px, 34%) minmax(80px, 1fr) 62px; align-items: center; gap: 9px; }
.aix-agree-row > span:first-child { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aix-agree-row.is-selected > span:first-child { font-weight: 700; }
.aix-agree-row .aix-track { height: 7px; border-radius:var(--radius-control); grid-column: auto; }
.aix-agree-row .aix-bar { top: 0; bottom: 0; border-radius:var(--radius-control); }
.aix-agree-row b { text-align: end; font-family: var(--aix-mono); font-size: 12px; font-weight: 500; }

.aix-company-name { display: flex; flex-direction: column; min-width: 0; }
.aix-company-name b { font-family: var(--aix-mono); font-size: 14px; font-weight: 600; }
.aix-company-name small { font-size: 12px; color: var(--aix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .aix-more {
  cursor: pointer; align-self: flex-start; background: transparent; border: 1px dashed var(--aix-line); color: var(--aix-teal-ink);
  font-size: 14px; padding: 8px 14px; border-radius:var(--radius-island); min-height: 40px;
}
#app .aix-quiet {
  cursor: pointer; background: transparent; border: 1px solid var(--aix-line); color: var(--aix-ink);
  font-size: 14px; padding: 10px 16px; border-radius: 12px; min-height: 44px;
}

.aix-reorder-body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: center; }
/* Beside another card there is no room for the facts beside the chart. */
.aix-pair .aix-reorder-body { grid-template-columns: minmax(0, 1fr); }
.aix-reorder svg { display: block; width: 100%; height: auto; max-width: 300px; }
.aix-reorder-frame { fill: none; stroke: var(--aix-line); }
.aix-diagonal { stroke: var(--aix-split); stroke-dasharray: 4 4; }
.aix-dot-still { fill: var(--aix-past); opacity: .65; }
.aix-dot-moved { fill: var(--aix-teal-ink); opacity: .8; }
.aix-reorder-facts { margin: 0; display: grid; grid-template-columns: auto auto; gap: 8px 16px; align-content: center; }
.aix-reorder-facts dt { font-size: 12px; color: var(--aix-muted); }
.aix-reorder-facts dd { margin: 0; font-family: var(--aix-mono); font-size: 17px; font-weight: 600; text-align: end; }
.aix-quote {
  margin: 0; padding: 12px 14px; border-inline-start: 3px solid var(--aix-teal-ink); background: var(--aix-track-system);
  border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.55; color: var(--aix-body);
}
.aix-facts { margin: 0; padding-inline-start: 18px; font-size: 12px; line-height: 1.55; color: var(--aix-muted); }

.aix-proof { border-top: 1px solid var(--aix-line); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aix-proof summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14px; }
.aix-proof p { margin: 6px 0; font-size: 12px; color: var(--aix-muted); }
.sc-root { display: block; overflow-wrap: anywhere; font-size: 11px; max-width: 100%; color: var(--aix-muted); }
.sc-loading { display: flex; flex-direction: column; gap: 12px; }
.sc-skeleton { height: 170px; background: var(--aix-track); border: 1px solid var(--aix-line); border-radius:var(--radius-control); animation: aix-breathe 1.4s ease-in-out infinite alternate; }
@keyframes aix-breathe { to { opacity: .45; } }

/* ── the warning ────────────────────────────────────────────────────────── */

dialog.aix-dialog {
  border: 0; background: transparent; padding: 0; width: min(540px, calc(100% - 32px));
  max-height: 88vh; color: var(--aix-ink); overflow: auto;
}
dialog.aix-dialog::backdrop { background: rgba(22, 36, 47, .5); }
.aix-dialog-card {
  box-sizing: border-box; background: var(--aix-surface); border-radius:var(--radius-control); padding: 26px; display: flex;
  flex-direction: column; gap: 14px; box-shadow: 0 30px 70px -30px rgba(22, 36, 47, .6); animation: aix-rise .22s ease;
}
#app .aix-dialog-card h2 { margin: 0; font-family: var(--aix-sans) !important; font-size: 21px !important; line-height: 1.25 !important; font-weight: 700; letter-spacing: -.02em; }
.aix-dialog-card > p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--aix-body); }
.aix-dialog-card .sc-gate-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; }
.aix-dialog-card .sc-gate-list li { font-size: 14px; line-height: 1.55; color: var(--aix-body); }
.aix-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#app .aix-dialog-actions .aix-cta { background: var(--aix-invert); color: var(--aix-invert-ink); font-size: 14px; padding: 13px 18px; flex: 1 1 auto; }
#app .aix-dialog-actions .aix-cta:hover { background: var(--aix-teal); color: var(--onAccent); }

/* ── narrower screens ───────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .aix-hero { --aix-h1: 30px; }
  .aix-bench-grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .aix-reorder-body { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .aix-hero, .aix-bench-grid { grid-template-columns: minmax(0, 1fr); }
  .aix-bench-clock { text-align: start; }
}
@media (max-width: 600px) {
  .aix-hero { padding: 18px; border-radius:var(--radius-control); gap: 16px; }
  .aix-hero { --aix-h1: 25px; }
  .aix-hero-lead { font-size: 14px; }
  .aix-pipeline { grid-template-columns: minmax(0, 1fr); }
  .aix-seg { width: 100%; }
  #app .aix-seg button { flex: 1 1 0; padding: 8px 10px; }
  .aix-system-value { font-size: 32px; }
  #app .aix-cta, #app .aix-cta-quiet { flex: 1 1 100%; }
  .aix-model-list { grid-template-columns: minmax(0, 1fr); }
  .aix-bench { --aix-bench-h1: 23px; }
  .aix-bench-title > p { font-size: 14px; }
  .aix-pair, .aix-tiles { grid-template-columns: minmax(0, 1fr); }
  .aix-card { padding: 16px; }
        .aix-fan-tick { font-size: 11px; }
  .aix-night { grid-template-columns: minmax(0, 1fr); }
  .aix-night-when { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .aix-divider { flex-wrap: wrap; row-gap: 4px; }
  .aix-divider-note { flex-basis: 100%; white-space: normal; }
  .aix-record-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* Three numbers stacked as cards push the ranking a screen down; a label
     beside its figure keeps all three to a few lines. */
  .aix-tiles { gap: 6px; }
  .aix-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px; }
  .aix-tile .aix-eyebrow, .aix-tile p { grid-column: 1; }
  .aix-tile-value { grid-column: 2; grid-row: 1 / span 2; font-size: 21px; }
  .aix-ranking-card { --rank-cols: 30px minmax(0, 1fr) auto; }
  .aix-rank-head span:nth-child(4) { display: none; }
  .aix-rank-row > .aix-rank-agree, .aix-rank-row > .aix-rank-was { grid-column: 2 / -1; justify-content: flex-start; text-align: start; }
  #app .aix-view-switch button { flex: 1 1 100%; }
  .aix-view-switch > i { display: none; }
  #app .aix-reason { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .aix-beta i, .sc-skeleton { animation: none; }
  .aix-dialog-card { animation: none; }
  .aix-switch, .aix-switch b { transition: none; }
}

/* ── EVALUATION STATUS ──────────────────────────────────
 *
 * Where a model's record stands, said above its numbers instead of in a
 * caption under them. A reader who meets the forecast first has already read
 * it as though it were scored.
 *
 * It is deliberately not coloured like a result. An amber or green strip
 * here would read as a verdict on the model, and the whole point of the row
 * is that there is no verdict yet.
 */
#app .aix-status-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: var(--radius-island);
  background: var(--surface); padding: 14px 18px; margin-bottom: 16px;
}
#app .aix-status-pill {
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; letter-spacing: .09em;
  color: var(--iris); background: var(--irisTint);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
#app .aix-status-row.is-scored .aix-status-pill { color: var(--accent); background: var(--accTint); }
#app .aix-status-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
#app .aix-status-n {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  direction: ltr; unicode-bidi: isolate;
}
@media (max-width: 860px) {
  #app .aix-status-row { padding: 12px 14px; gap: 10px; }
  #app .aix-status-text { font-size: 14px; }
}

#app .aix-preview-pill {
  flex: none; cursor: pointer; border: 0;
  font-family: var(--aix-mono); font-size: 11px; letter-spacing: .09em;
  color: var(--iris); background: var(--irisTint);
  border-radius: 999px; padding: 3px 8px; min-height: 24px;
}
#app .aix-preview-pill:hover { color: var(--ink); }
/* A figure in its own direction, so an Arabic sentence cannot carry a price's
   digits — or a minus sign — out of order. */
#app .aix-n {
  font-family: var(--aix-mono); direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
#app .aix-reorder-rows { display: flex; flex-direction: column; gap: 9px; }
#app .aix-reorder-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
#app .aix-reorder-name {
  flex: 1; min-width: 0; font-family: var(--aix-sans); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .aix-reorder-row .aix-n { color: var(--faint); }
#app .aix-reorder-arrow { color: var(--faint); }
#app .aix-reorder-row .aix-reorder-up { font-weight: 600; color: var(--up); }
#app .aix-reorder-row .aix-reorder-down { font-weight: 600; color: var(--down); }
/* The saved path. The divider is the session the two sides were split on:
   left of it the exchange printed the price, right of it a model said it and
   has not been allowed to revise it since. */
#app .aix-saved-chart { display: block; width: 100%; height: 64px; }
#app .aix-saved-floor { stroke: var(--rule); stroke-width: 1; }
#app .aix-saved-split { stroke: var(--thread); stroke-width: 1; stroke-dasharray: 3 3; }
#app .aix-saved-past { fill: none; stroke: var(--ink); stroke-width: 2.2; }
#app .aix-saved-ahead { fill: none; stroke: var(--iris); stroke-width: 2.2; stroke-dasharray: 5 4; }
#app .aix-saved-end { fill: var(--iris); }

/* ── THREE PRICES AND A DRAWING, ON A RANKING ROW ────────────────────────
 * The owner, 22 Sep 2026: "I don't get current price and price before
 * prediction starts." The row's bar carried four unnamed figures and not the
 * start at all. Now it names three — the start, now, the forecast's end — in
 * a column of labels and figures, and draws them beside it at the size of a
 * row: the sessions before in grey, the start, the path dashed, now in iris.
 * The same marks, in the same colours, as the forecast on a company's page. */
#app .aix-price-detail.has-spark {
  grid-template-columns: max-content minmax(96px, 168px); column-gap: 14px; align-items: center; justify-content: end;
}
#app .aix-price-detail > .aix-price-caption { grid-column: 1 / -1; }
.aix-price-trio {
  display: grid; grid-template-columns: max-content max-content; column-gap: 10px; row-gap: 1px; align-items: baseline;
}
.aix-price-trio > span { display: contents; }
.aix-price-trio small {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--aix-muted); white-space: nowrap;
}
.aix-price-trio small i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.aix-price-trio .is-start small i { background: var(--ink); }
.aix-price-trio .is-now small i { background: var(--iris); }
.aix-price-trio .is-end small i { background: var(--surface); box-shadow: inset 0 0 0 1.6px var(--accent); }
.aix-price-trio b { font-family: var(--aix-mono); font-size: 14px; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.aix-price-trio .is-end b { color: var(--accent); }
#app .aix-spark { display: block; width: 100%; max-width: 168px; height: auto; justify-self: end; }
#app .aix-spark-future { fill: var(--sunk); }
#app .aix-spark-past { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-linejoin: round; }
#app .aix-spark-path { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-dasharray: 3 2.2; stroke-linejoin: round; }
#app .aix-spark-since { fill: none; stroke: var(--iris); stroke-width: 1.5; }
#app .aix-spark-start { fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; }
#app .aix-spark-end { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
#app .aix-spark-now { fill: var(--iris); stroke: var(--surface); stroke-width: 1.2; }
/* The models' agreement, drawn beside the count. */
#app .aix-agree-ticks { display: inline-flex; gap: 2px; margin-inline-end: 6px; vertical-align: -2px; }
#app .aix-agree-ticks i { display: block; width: 8px; height: 15px; border-radius: 2px; background: var(--rule); }
#app .aix-agree-ticks i.is-on { background: var(--accent); }

/* The pending-evaluation headline is a sentence, not a figure.
 * `.aix-system-value` is sized for a number like "+2.4pts"; the same size on
 * a sentence would shout it across the card. This keeps the position and the
 * weight — it is still the headline — at a size a sentence can hold. */
.aix-system-value.is-words {
  font-family: inherit; font-size: 17px; line-height: 1.35;
  letter-spacing: -.01em; text-wrap: balance;
}
@media (max-width: 600px) { .aix-system-value.is-words { font-size: 17px; } }

/* §10: the setup panel sits under the results, not before them.
 * `.aix-controls` was the grid's first column; the results now take the full
 * width and the panel follows as a shut disclosure. It keeps a column at desk
 * width only because its chips read better in one. */
/* 7a Layout: Desktop 2-column with 330px sidebar and 1fr results */
.aix-bench-grid {
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}
.aix-controls {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.aix-results {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 900px) {
  .aix-bench-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .aix-controls {
    grid-column: 1;
    grid-row: 2;
  }
  .aix-results {
    grid-column: 1;
    grid-row: 1;
  }
}

details.aix-controls { padding: 0; border: 0; background: transparent; }
details.aix-controls > .aix-setup-summary {
  display: none;
}
@media (max-width: 900px) {
  details.aix-controls > .aix-setup-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; cursor: pointer; list-style: none;
    min-height: 44px; padding: 10px 14px;
    border-radius: var(--radius-control); background: var(--sunk);
    border: 1px solid var(--edgeIn);
  }
}
.aix-setup-what { font-size: 14px; font-weight: 600; }
.aix-setup-now {
  font-family: var(--aix-mono); font-size: 12px; color: var(--t2);
  text-align: end;
}

/* Step cards from 7a */
.aix-step-card {
  border: 1px solid var(--edgeIn);
  border-radius: 20px;
  padding: 18px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.aix-step-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.aix-step-badge {
  font-family: var(--aix-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--surface);
  background: var(--ink);
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1;
}
.aix-step-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.aix-model-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aix-model-subhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.aix-subhead-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.aix-subhead-count {
  font-family: var(--aix-mono);
  font-size: 11px;
  color: var(--faint);
}
.aix-subhead-note {
  font-size: 12px;
  color: var(--faint);
  line-height: 1.5;
  margin: 0;
}
.aix-step-divider {
  height: 1px;
  background: var(--rule);
}
.aix-step-note {
  font-size: 12px;
  color: var(--t2);
  line-height: 1.55;
  margin: 0;
}
.aix-toggle-group {
  display: flex;
  flex-direction: column;
}
.aix-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: transparent;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: inherit;
  width: 100%;
}
.aix-toggle:first-child { border-top: 0; }
.aix-toggle > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aix-toggle strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.aix-toggle small {
  font-family: var(--aix-mono);
  font-size: 11px;
  color: var(--faint);
}
.aix-switch {
  flex: 0 0 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(27,25,23,.06);
  border: 1px solid rgba(27,25,23,.10);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: all .2s ease;
  justify-content: flex-end;
}
.aix-switch.is-on, .aix-toggle[aria-checked="true"] .aix-switch {
  background: var(--accent);
  border-color: var(--accent);
  justify-content: flex-start;
}
.aix-switch b {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  display: block;
}

/* ── Workbench: Session selector & Grouped models ────────────────────── */

#app .aix-session-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding: 10px 14px; background: var(--sunk); border: 1px solid var(--rule); border-radius: 12px;
}

#app .aix-session-label {
  font-family: var(--aix-mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); font-weight: 600;
}

#app .aix-session-chips {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-x: auto;
}

#app .aix-session-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--rule); background: var(--surface);
  color: var(--t2); font-size: 12px; cursor: pointer; transition: all .15s ease;
}

#app .aix-session-chip:hover { border-color: var(--accent); color: var(--ink); }

#app .aix-session-chip.on {
  background: var(--accent); border-color: var(--accent); color: var(--onAccent); font-weight: 600;
}

#app .aix-session-date { font-family: var(--aix-mono); }

#app .aix-session-tag {
  font-size: 11px; padding: 1px 5px; border-radius: 4px; font-family: var(--aix-sans);
}

#app .aix-session-chip:not(.on) .aix-session-tag.waiting {
  background: var(--accTint); color: var(--accent);
}

#app .aix-session-chip:not(.on) .aix-session-tag.scored {
  background: rgba(63, 111, 79, .12); color: var(--up);
}

/* White on a 25% white wash over the accent measures 3.65:1 at 11px — the
   wash lifts the ground almost as much as it lifts nothing at all. An opaque
   ground and the palette's own on-accent ink instead. */
#app .aix-session-chip.on .aix-session-tag {
  background: var(--onAccent); color: var(--accent);
}

#app .aix-models-grouped {
  display: flex; flex-direction: column; gap: 14px;
}

#app .aix-model-subgroup {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  border-radius: 12px; background: var(--sunk); border: 1px solid var(--rule);
}

#app .aix-model-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

#app .aix-subhead-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
}

#app .aix-subhead-count {
  font-family: var(--aix-mono); font-size: 11px; background: var(--rule); color: var(--t2);
  padding: 1px 7px; border-radius: 999px; font-weight: 600;
}

#app .aix-subhead-note {
  font-size: 12px; color: var(--faint); line-height: 1.4; margin: 0;
}

/* ── Workbench: Turn 7 Visuals (Top 5 vs Market & Re-rank Card) ─────── */

#app .aix-compare-card, #app .aix-rerank-card {
  margin-top: 14px;
}

#app .aix-rerank-card {
  display: flex; flex-direction: column; gap: 14px;
}

#app .aix-rerank-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

#app .aix-rerank-badge {
  font-family: var(--aix-mono); font-size: 11px; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px; background: var(--accTint); color: var(--accent);
}

#app .aix-rerank-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center;
}

#app .aix-rerank-col {
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}

#app .aix-rerank-col.is-gemini {
  border-color: var(--accent); background: var(--surface);
}

#app .aix-rerank-col-head {
  font-size: 12px; font-weight: 700; color: var(--t2); border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}

#app .aix-rerank-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0;
}

#app .aix-rerank-pos {
  font-family: var(--aix-mono); font-size: 11px; color: var(--faint); width: 18px;
}

#app .aix-rerank-ticker {
  font-family: var(--aix-mono); font-weight: 600; color: var(--ink); flex: 1;
}

#app .aix-rerank-val {
  font-family: var(--aix-mono); font-size: 12px; color: var(--t2);
}

#app .aix-rerank-move {
  font-family: var(--aix-mono); font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
}

#app .aix-rerank-move.is-up { background: rgba(63, 111, 79, .15); color: var(--up); }
#app .aix-rerank-move.is-down { background: rgba(168, 55, 42, .15); color: var(--down); }
#app .aix-rerank-move.is-flat { background: var(--rule); color: var(--faint); }

#app .aix-rerank-arrow {
  font-size: 17px; color: var(--faint); display: flex; align-items: center; justify-content: center;
}

@media (max-width: 640px) {
  #app .aix-rerank-cols { grid-template-columns: 1fr; }
  #app .aix-rerank-arrow { transform: rotate(90deg); margin: 4px 0; }
}


/* ── THE SCOREBOARD ─────────────────────────────────────────────────────────
 * Every model against the market, one row each, one shared scale. The point
 * of the drawing is that the rows can be compared without reading a number,
 * so the track is the widest thing in the row and the figures sit quietly
 * beside it. */
#app .sb { margin: 0 0 22px; }
#app .sb-head h2 { margin: 0; font: 600 17px/1.4 var(--font-heading); letter-spacing: -.01em; }
#app .sb-lede { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--t2); max-width: 74ch; }
#app .sb-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 10px;
  font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
  font-size: 11px; color: var(--t2);
}
#app .sb-legend span { display: inline-flex; align-items: center; gap: 7px; }
#app .sb-legend i { position: static; }
#app .sb-rows { display: flex; flex-direction: column; gap: 2px; }
#app .sb-row {
  display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(0, 3fr) auto auto;
  align-items: center; gap: 12px; width: 100%; padding: 9px 10px;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  text-align: start; color: inherit; font: inherit;
}
#app .sb-row:hover, #app .sb-row:focus-visible { background: var(--sunk); }
#app .sb-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#app .sb-name {
  font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app .sb-track { position: relative; height: 22px; min-width: 0; }
/* The rule a reader measures everything against: no change. */
#app .sb-zero { position: absolute; top: 3px; bottom: 3px; width: 1px; background: var(--rule); }
#app .sb-link { position: absolute; top: 50%; height: 2px; transform: translateY(-50%); opacity: .5; }
#app .sb-link.is-up { background: var(--up); }
#app .sb-link.is-down { background: var(--down); }
#app .sb-own, #app .sb-market {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%); box-sizing: border-box;
}
#app .sb-own.is-up { background: var(--up); border: 1px solid var(--up); }
#app .sb-own.is-down { background: var(--down); border: 1px solid var(--down); }
/* Hollow, because it is the thing being compared against rather than a result. */
#app .sb-market { background: var(--surface); border: 2px solid var(--t2); }
#app .sb-zero-key { display: inline-block; width: 1px; height: 12px; background: var(--rule); }
#app .sb-figure, #app .sb-versus {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap;
}
#app .sb-versus { color: var(--faint); }
#app .sb-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--t2); max-width: 78ch; }
@media (max-width: 720px) {
  /* The name and the figures stack above the track: at 375px a four-column
     row gives the track about 70px, which is not a comparison. */
  #app .sb-row { grid-template-columns: 1fr auto auto; grid-template-areas: 'name fig vs' 'track track track'; row-gap: 6px; }
  #app .sb-name { grid-area: name; } #app .sb-figure { grid-area: fig; }
  #app .sb-versus { grid-area: vs; } #app .sb-track { grid-area: track; }
}

/* ── The bars' legend, once above the table ──────────────────────────────
 *
 * 7a's line. It replaced two caption lines repeated under every row; see the
 * note in `priceStrip` for what that cost. The two coloured words are the two
 * marks on the drawing, coloured to match them, so a reader maps the sentence
 * onto the picture without a key.
 * ──────────────────────────────────────────────────────────────────────── */
#app .aix-price-legend {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 6px 4px; border-top: 1px solid var(--aix-hair2);
}
#app .aix-price-legend-line {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--aix-ink);
  max-width: 76ch; text-wrap: pretty;
}
#app .aix-price-legend-line .is-now { color: var(--iris); font-weight: 600; }
#app .aix-price-legend-line .is-start { color: var(--ink); font-weight: 600; }
#app .aix-price-legend-meta {
  margin: 0; font-family: var(--aix-mono); font-size: 12px; color: var(--aix-muted);
}
/* A row in dollars. Eleven of the exchange's listings are, and in a column of
   pounds 0.117 reads as eleven piastres and is eleven cents. */
#app .aix-price-caption.is-currency {
  font-family: var(--aix-mono); font-size: 11px; color: var(--down);
}

@media (max-width: 860px) {
  /* Under the company rather than beside it: three columns of numbers and a
     drawing do not fit a tablet, and the drawing is the one that must stay
     legible. */
  #app .aix-ranking-card { --rank-cols: 30px minmax(0, 1fr) minmax(84px, auto) minmax(0, auto); }
  #app .aix-rank-row > .aix-rank-n { grid-column: 1; }
  #app .aix-rank-row > .aix-company-name { grid-column: 2; }
  #app .aix-rank-row > strong { grid-column: 3; }
  #app .aix-rank-row > .aix-rank-agree,
  #app .aix-rank-row > .aix-rank-was { grid-column: 4; }
  #app .aix-rank-row > .aix-price-detail { grid-column: 2 / -1; grid-row: 2; }
  #app .aix-rank-row > .aix-risk-note { grid-row: 3; }
}

/* ── The workbench's two panels ──────────────────────────────────────────
 *
 * 7a's results column is three cards and a footer link. This page had eleven
 * blocks in one scroll. These hold what the comp puts behind that link —
 * every company the model scored, and the dated record night by night and
 * model by model — shut by default and opened by `scFocus` so the ways in
 * from Home still land on the thing they promised.
 * ──────────────────────────────────────────────────────────────────────── */
#app .aix-panel {
  border: 1px solid var(--aix-hair); border-radius: 16px; background: var(--surface);
}
#app .aix-panel > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 14px 16px; min-height: 44px; cursor: pointer; list-style: none;
  border-radius: 16px;
}
#app .aix-panel > summary::-webkit-details-marker { display: none; }
#app .aix-panel > summary::before {
  content: '+'; font-family: var(--aix-mono); font-size: 14px; color: var(--accent);
  inline-size: 14px; flex: 0 0 14px;
}
#app .aix-panel[open] > summary::before { content: '\2212'; }
#app .aix-panel[open] > summary { border-bottom: 1px solid var(--aix-hair2); border-radius: 16px 16px 0 0; }
#app .aix-panel > summary:hover { background: var(--aix-row-hover); }
#app .aix-panel > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#app .aix-panel-what { font-size: 14px; font-weight: 600; color: var(--aix-ink); }
#app .aix-panel-now { font-family: var(--aix-mono); font-size: 12px; color: var(--aix-muted); }
/* The cards inside keep their own frames; the panel is the wrapper, so it
   does not draw a second border around each one. */
#app .aix-panel > :not(summary) { border: 0; border-radius: 0; }
#app .aix-panel > .aix-card + .aix-card { border-top: 1px solid var(--aix-hair2); }
/* The end of the window, under its bar. The bar marks the path's lowest,
   highest and average close and not where it finishes, which is a different
   number and the one the percentage in the next column is struck from. */
#app .aix-price-caption.is-end {
  font-family: var(--aix-mono); font-size: 11px; color: var(--aix-muted);
  display: block; margin-top: -2px;
}
#app .aix-price-caption.is-end b { color: var(--aix-ink); font-weight: 600; }

/* ── THE AI FORECAST ON A COMPANY'S PAGE (ai-forecast.js) ─────────────────
 * A button in the price chart's header, a warning every time it is pressed,
 * then a panel under the chart: three named prices, the drawing, the
 * confidence score beside it and each model's figure. The marks keep one
 * meaning each across the site: ink is the start, iris is now, accent dashed
 * is a forecast, grey is what already happened.
 * ──────────────────────────────────────────────────────────────────────── */
#app .co-chart-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#app .aif-open {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accTint); color: var(--accent); font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
#app .aif-open svg { width: 17px; height: 17px; flex: none; }
#app .aif-open:hover, #app .aif-open.is-open { background: var(--accent); color: var(--onAccent); }
#app .aif-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#app .aif-open.is-off {
  cursor: default; border: 1px dashed var(--rule); background: transparent; color: var(--faint); font-weight: 500;
}
#app .aif-open.is-off:hover { background: transparent; color: var(--faint); }

#app .aif-panel {
  box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding: 22px 24px 18px;
  border-radius: var(--radius-island); background: var(--surface); border: 1px solid var(--edgeIn); box-shadow: var(--sh);
  color: var(--ink); font-family: var(--aix-sans); min-width: 0;
}
#app .aif-panel :is(button, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#app .aif-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#app .aif-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#app .aif-head h3 {
  margin: 0; font-family: var(--aix-sans) !important; font-size: 21px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em; text-wrap: balance;
}
#app .aif-head p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--t2); max-width: 72ch; text-wrap: pretty; }
#app .aif-close {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none; min-height: 36px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid var(--rule); font-size: 14px; color: var(--ink);
}
#app .aif-close:hover { border-color: var(--accent); }

#app .aif-horizon {
  display: inline-flex; align-self: flex-start; gap: 3px; padding: 4px; max-width: 100%;
  border-radius: var(--radius-control); background: var(--sunk);
}
#app .aif-horizon button {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 16px; border-radius: 10px; font-size: 14px; color: var(--t2); white-space: nowrap;
}
#app .aif-horizon button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shPill); font-weight: 600; }

#app .aif-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0; font-family: var(--aix-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
#app .aif-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#app .aif-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border-radius: var(--radius-control); background: var(--sunk);
}
#app .aif-tile strong { font-family: var(--aix-mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
#app .aif-tile small { font-size: 12px; line-height: 1.45; color: var(--t2); }
#app .aif-tile .aif-key { width: 8px; height: 8px; border-radius: 50%; }
#app .aif-tile.is-start .aif-key { background: var(--ink); }
#app .aif-tile.is-now .aif-key { background: var(--iris); }
#app .aif-tile.is-forecast .aif-key { background: var(--accent); }
#app .aif-tile.is-forecast strong { color: var(--accent); }
#app .aif-panel .is-up { color: var(--up); }
#app .aif-panel .is-down { color: var(--down); }
#app .aif-panel .is-flat { color: var(--faint); }
#app .aif-currency { margin: -8px 0 0; font-family: var(--aix-mono); font-size: 11px; color: var(--down); }

#app .aif-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
#app .aif-drawing { min-width: 0; }
#app .aif-plot { position: relative; margin: 0; padding: 20px 0 22px; }
/* Sessions run left to right in both languages. The `dir` attribute does not
   reach SVG text: on the Arabic page `text-anchor` follows the inherited
   direction, so "start" meant the right edge and every figure in the margin
   was drawn back over the dots it labels. */
#app .aif-chart, #app .aix-spark { direction: ltr; }
#app .aif-chart { display: block; width: 100%; height: auto; overflow: visible; }
#app .aif-regions, #app .aif-axis {
  position: absolute; left: 0; right: 0; height: 16px; font-family: var(--aix-mono); font-size: 11px; color: var(--faint);
}
#app .aif-regions { top: 0; }
#app .aif-axis { bottom: 0; }
#app .aif-region {
  position: absolute; top: 0; box-sizing: border-box; padding: 0 4px; text-align: center; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The forecast's own label starts where the forecast starts and may run past
   it: at five sessions the region is a third of the drawing, and clipped it
   read "FORECAST · 5 S…". Nothing is drawn above the region to collide with. */
#app .aif-region.is-future { color: var(--accent); font-weight: 600; text-align: start; overflow: visible; text-overflow: clip; }
#app .aif-axis span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
#app .aif-axis .is-first { transform: none; }
#app .aif-axis .is-end { transform: translateX(-100%); }
#app .aif-axis .is-start { color: var(--ink); font-weight: 600; }

#app .aif-future { fill: var(--sunk); }
#app .aif-grid { stroke: var(--rule2); stroke-width: 1; }
#app .aif-tick { fill: var(--faint); font-family: var(--aix-mono); font-size: 11px; }
#app .aif-band { fill: var(--accent); fill-opacity: .13; stroke: none; }
#app .aif-model { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 3; stroke-linejoin: round; }
#app .aif-model.is-focus { stroke: var(--ink); stroke-opacity: 1; stroke-width: 2.2; stroke-dasharray: 5 3; }
#app .aif-middle { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 7 4; stroke-linecap: round; stroke-linejoin: round; }
#app .aif-past { fill: none; stroke: var(--t2); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
#app .aif-since { fill: none; stroke: var(--iris); stroke-width: 1.9; }
#app .aif-divider { stroke: var(--thread); stroke-width: 1; stroke-dasharray: 2 3; }
#app .aif-end { fill: var(--surface); stroke: var(--accent); stroke-width: 1.4; }
#app .aif-end.is-focus { fill: var(--ink); stroke: var(--surface); stroke-width: 1.6; }
#app .aif-end.is-middle { fill: var(--accent); stroke: var(--surface); stroke-width: 1.8; }
#app .aif-start { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
#app .aif-now { fill: var(--iris); stroke: var(--surface); stroke-width: 2; }
#app .aif-label {
  font-family: var(--aix-mono); font-size: 11px; font-weight: 600;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
#app .aif-label.is-start { fill: var(--ink); }
#app .aif-label.is-now { fill: var(--iris); }
#app .aif-gutter { fill: var(--faint); font-family: var(--aix-mono); font-size: 11px; }
#app .aif-gutter.is-middle { fill: var(--accent); font-size: 11px; font-weight: 700; }
#app .aif-gutter.is-now { fill: var(--iris); font-weight: 600; }

#app .aif-legend {
  list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; line-height: 1.4; color: var(--t2);
}
#app .aif-legend li { display: inline-flex; align-items: center; gap: 7px; }
#app .aif-key { display: inline-block; flex: none; }
#app .aif-legend .is-past { width: 18px; border-top: 2px solid var(--t2); }
#app .aif-legend .is-start { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
#app .aif-legend .is-now { width: 9px; height: 9px; border-radius: 50%; background: var(--iris); }
#app .aif-legend .is-middle { width: 20px; border-top: 2.6px dashed var(--accent); }
#app .aif-legend .is-model { width: 20px; border-top: 1.4px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
#app .aif-legend .is-band { width: 16px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); }

#app .aif-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#app .aif-confidence {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-control);
  border: 1px solid var(--rule); background: var(--surface);
}
#app .aif-confidence-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#app .aif-level {
  padding: 3px 10px; border-radius: 999px; font-family: var(--aix-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; background: var(--sunk); color: var(--t2);
}
#app .aif-confidence.is-medium .aif-level { background: var(--irisTint); color: var(--iris); }
#app .aif-confidence.is-high .aif-level { background: var(--accTint); color: var(--accent); }
#app .aif-score { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; }
[dir="rtl"] #app .aif-score { justify-content: flex-end; }
#app .aif-score strong { font-family: var(--aix-mono); font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
#app .aif-score > span { font-family: var(--aix-mono); font-size: 14px; color: var(--faint); }
#app .aif-meter {
  position: relative; display: block; height: 8px; border-radius: 999px; background: var(--sunk); overflow: hidden;
}
#app .aif-meter-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: var(--faint); }
#app .aif-confidence.is-medium .aif-meter-fill { background: var(--iris); }
#app .aif-confidence.is-high .aif-meter-fill { background: var(--accent); }
#app .aif-meter-mark { position: absolute; inset-block: 0; width: 2px; background: var(--surface); }
#app .aif-confidence-plain { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
#app .aif-together { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--t2); text-wrap: pretty; }
#app .aif-parts {
  list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--rule2);
}
#app .aif-parts li { display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--t2); }
#app .aif-parts b { font-size: 14px; font-weight: 600; color: var(--ink); }
#app .aif-ticks { display: inline-flex; gap: 4px; }
#app .aif-ticks i { width: 16px; height: 6px; border-radius: 3px; background: var(--rule); }
#app .aif-ticks i.is-on { background: var(--accent); }
#app .aif-size { position: relative; display: block; height: 6px; max-width: 124px; border-radius: 3px; background: var(--rule); overflow: hidden; }
#app .aif-size i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: var(--accent); }
#app .aif-how summary {
  cursor: pointer; display: flex; align-items: center; min-height: 32px; font-size: 12px; color: var(--accent);
}
#app .aif-how p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: var(--t2); text-wrap: pretty; }
#app .aif-how .aif-working {
  padding: 8px 10px; border-radius: 8px; background: var(--sunk); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#app .aif-record {
  all: unset; cursor: pointer; display: inline-block; margin-top: 10px; font-size: 12px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Every model, the full width of the panel under the drawing and the score,
   in the lab's order: two or three to a row on a desktop, one on a phone. */
#app .aif-models-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
#app .aif-models-note { margin: 0; font-size: 12px; color: var(--faint); }
#app .aif-models ul {
  list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
#app .aif-model-row {
  all: unset; box-sizing: border-box; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 64px;
  gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--rule2); border-radius: 10px;
  font-size: 14px; color: var(--ink);
}
#app button.aif-model-row { cursor: pointer; }
#app button.aif-model-row:hover { border-color: var(--rule); background: var(--sunk); }
#app .aif-model-row.is-focus { border-color: var(--ink); background: var(--sunk); }
#app .aif-model-name { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-width: 0; }
#app .aif-model-name small { flex-basis: 100%; padding-inline-start: 28px; font-size: 11px; line-height: 1.4; color: var(--faint); }
#app .aif-model-row b { font-family: var(--aix-mono); font-weight: 600; }
#app .aif-chg { font-family: var(--aix-mono); font-size: 12px; text-align: end; }
#app .aif-swatch { display: inline-block; width: 20px; border-top: 1.4px dashed var(--accent); opacity: .6; flex: none; }
#app .aif-model-row.is-focus .aif-swatch { border-top: 2.4px dashed var(--ink); opacity: 1; }

#app .aif-foot {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--rule2); font-size: 12px; line-height: 1.55; color: var(--faint);
}
#app .aif-empty { margin: 0; font-size: 14px; line-height: 1.55; color: var(--t2); }
.aif-warning .aif-warning-every { font-size: 12px; color: var(--aix-muted); }

@media (max-width: 960px) {
  #app .aif-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #app .aif-panel { padding: 16px 14px; gap: 14px; }
  #app .aif-head { flex-wrap: wrap; }
  #app .aif-head h3 { font-size: 17px; }
  #app .aif-horizon { display: flex; width: 100%; }
  #app .aif-horizon button { flex: 1 1 0; padding: 8px 6px; }
  #app .aif-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #app .aif-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px; }
  #app .aif-tile .aif-eyebrow, #app .aif-tile small { grid-column: 1; }
  #app .aif-tile strong { grid-column: 2; grid-row: 1 / span 2; font-size: 21px; }
  /* The drawing scales down with the phone; its figures must not. These are
     in the drawing's own units, about 0.68 of a pixel each at this width. */
  #app .aif-tick { font-size: 14px; }
  #app .aif-label { font-size: 14px; }
  #app .aif-gutter { font-size: 14px; }
  #app .aif-gutter.is-middle { font-size: 14px; }
  #app .aif-regions, #app .aif-axis { font-size: 11px; }
  /* The forecast region is a few dozen pixels wide here, and its end label
     ran into the start's date. The caption over the drawing already says how
     many sessions ahead it runs. */
  #app .aif-axis .is-end { display: none; }
}

/* What it forecast before, drawn against what the price did (the owner, 22
   Sep 2026). Quiet on purpose: the background today's forecast is read
   against, not the subject. The gap between a forecast and the price it was
   about is the one part with a colour — over the price and under it are
   different facts. */
#app .aif-was { fill: none; stroke: var(--faint); stroke-opacity: .55; stroke-width: 1.1; stroke-dasharray: 2.5 2.5; }
#app .aif-was-end { fill: var(--surface); stroke: var(--faint); stroke-opacity: .8; stroke-width: 1.1; }
/* One colour, not one for over and one for under: red beside a forecast that
   came in high reads as a bad forecast rather than a high one, and the
   direction is already there to be seen. */
#app .aif-gap { stroke: var(--iris); stroke-width: 1.6; stroke-opacity: .45; }
#app .aif-legend .is-gap { width: 3px; height: 12px; border-radius: 2px; background: var(--iris); opacity: .55; }
#app .aif-legend .is-was { width: 20px; border-top: 1.4px dashed var(--faint); }
#app .aif-was-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; }
#app .aif-was-row p { margin: 0; flex: 1 1 260px; font-size: 12px; line-height: 1.5; color: var(--t2); text-wrap: pretty; }
#app .aif-was-toggle {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule);
  font-size: 12px; color: var(--t2); white-space: nowrap;
}
#app .aif-was-toggle:hover { border-color: var(--accent); }
#app .aif-was-toggle.is-on { border-color: var(--ink); color: var(--ink); }

/* ── the glossary sheet ──────────────────────────────────────────────────
 *
 * It borrows the `aix-dialog` shell every other modal on the site uses, so
 * the backdrop, the card and the way it closes are the ones a reader has
 * already met. What it adds is a scrolling body: 36 terms do not fit a
 * phone, and a sheet that grows past the viewport is a sheet with no close
 * button in reach. */
.gl-card { max-width: 620px; width: min(620px, calc(100vw - 24px)); display: flex; flex-direction: column;
  max-height: min(84dvh, 760px); padding-bottom: 0; }
.gl-head { display: flex; align-items: flex-start; gap: 12px; }
.gl-head h2 { margin: 0; flex: 1; }
.gl-close { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--edgeIn);
  background: var(--sunk); color: var(--t2); font-size: 21px; line-height: 1; cursor: pointer; }
.gl-close:hover { color: var(--ink); border-color: var(--accent); }
.gl-lead { margin: 8px 0 12px; color: var(--t2); font-size: 14px; line-height: 1.65; }
.gl-search { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--radius-control);
  border: 1px solid var(--edgeIn); background: var(--sunk); color: var(--ink); font-size: 14px;
  font-family: inherit; }
.gl-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gl-body { overflow-y: auto; margin: 14px -4px 0; padding: 0 4px 4px; flex: 1; min-height: 0; }
.gl-entry { padding: 14px 0; border-top: 1px solid var(--rule2); }
.gl-entry:first-child { border-top: 0; padding-top: 4px; }
.gl-entry h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; display: flex; align-items: baseline;
  gap: 9px; flex-wrap: wrap; }
.gl-other { font-family: var(--aix-mono, 'IBM Plex Mono', monospace); font-size: 12px; color: var(--faint);
  font-weight: 400; }
.gl-entry p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--t2); }
.gl-see { margin-top: 9px !important; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--faint); }
.gl-see-link { border: 1px solid var(--edgeIn); background: var(--sunk); color: var(--accent);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-family: inherit; cursor: pointer;
  min-height: 30px; }
.gl-see-link:hover { border-color: var(--accent); }
/* The term a reader asked for, lifted above the rest of the list. */
.gl-first { background: var(--accTint); border: 1px solid var(--accMid); border-radius: var(--radius-control);
  padding: 4px 14px 10px; margin-bottom: 10px; }
.gl-first .gl-entry { border-top: 0; }
.gl-empty { color: var(--faint); font-size: 14px; padding: 18px 0; }
.gl-foot { margin: 0; padding: 12px 0 14px; border-top: 1px solid var(--rule2); font-size: 12px;
  color: var(--faint); line-height: 1.6; }

/* A word in the copy that can be asked about. The mark is a superscript
   question mark rather than an icon: it costs no width in a line of text and
   it reads in both languages. */
.gl-chip { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px dotted var(--accent); }
.gl-chip i { font-style: normal; font-size: .72em; vertical-align: super; color: var(--accent);
  margin-inline-start: 1px; }
.gl-chip:hover { color: var(--accent); }

/* The header control that opens it, shaped like the settings button beside it. */
.journal-glossary { flex: none; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--edgeIn); background: var(--sunk); color: var(--t2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.journal-glossary svg { width: 19px; height: 19px; }
.journal-glossary:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 600px) {
  .gl-card { max-height: 92dvh; }
  .gl-entry h3 { font-size: 14px; }
}

/* ── the daily brief ─────────────────────────────────────────────────────
 *
 * Sentences, not tiles. The watchlist below it is already a table of
 * numbers; this is the part a reader can take in standing up, so it is set
 * at reading size with the lines far enough apart to scan, and the mark at
 * the start of each is a shape rather than a colour — a filing and a fall
 * have to be told apart on a phone in daylight. */
.br-card { border-radius: var(--radius-island); background: var(--surface);
  border: 1px solid var(--edgeIn); padding: 16px 20px 14px; }
.br-title { margin: 4px 0 12px; font-family: var(--font-heading); font-size: 21px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3; }
.br-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.br-line { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0;
  border-top: 1px solid var(--rule2); }
.br-line:first-child { border-top: 0; }
.br-mark { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--faint); }
.br-line.is-up .br-mark { color: var(--up); }
.br-line.is-down .br-mark { color: var(--down); }
.br-line.is-filing .br-mark { color: var(--accent); }
.br-line.is-insider .br-mark { color: var(--iris); }
.br-line.is-volume .br-mark { color: var(--warn); }
.br-text { font-size: 14px; line-height: 1.65; color: var(--ink); text-align: start; }
.br-text.is-link { border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--ink); border-bottom: 1px solid transparent; }
.br-text.is-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.br-foot { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--rule2);
  font-size: 12px; line-height: 1.6; color: var(--faint); }

@media (max-width: 600px) {
  .br-card { padding: 14px 15px 12px; }
  .br-title { font-size: 17px; }
  .br-text { font-size: 14px; }
}

/* The line under the navigation that says what the open destination answers.
   Set at reading size, not label size: it is a sentence, and it is the first
   sentence on the screen. */
.journal-ask { margin: 2px 2px 4px; font-size: 14px; line-height: 1.6; color: var(--t2);
  max-width: 68ch; text-wrap: pretty; }
@media (max-width: 600px) { .journal-ask { font-size: 14px; margin-inline: 4px; } }

/* The words this screen leans on, named before the reader meets them. */
.journal-terms { margin: 0 2px 10px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--faint); }
.journal-terms > span:first-child { font-size: 12px; }
@media (max-width: 600px) { .journal-terms { margin-inline: 4px; } }