/* Adanos 2026 redesign: the rules of type:stock only. Its pages link site-2026.css first, then this sheet. Filed by scripts/kit/split.py. */
/* ---------- Stock dashboard (stock-2026.html) ----------
   Last in the sheet on purpose: these rules were the page's own <style>, read after every shared rule, so they
   still win each tie. None of them matches an element on another 2026 page. */

.d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-5); }
.d-id { --name: var(--text-4xl); --chip: var(--text-2xl); display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; }
/* the logo stands as tall as the name and the line of facts under it */
.d-logo { --s: calc(var(--name) + var(--space-1) + var(--text-md) * var(--lh-title)); flex: none; display: grid; }
/* h2: the evaluation of the movers page names its stock under the page's h1 */
.d-id :is(h1, h2) { font-size: var(--name); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
/* the name with the ticker after its last word as a dark chip as tall as the name, as on a quote screen */
.d-title { font-size: var(--name); line-height: var(--lh-tight); }
.d-title > :is(h1, h2) { display: inline; }
/* a word joiner after the name keeps its last word with the chip, so the chip never starts a line on its own */
.d-title > :is(h1, h2)::after { content: "\2060"; content: "\2060" / ""; }
.d-chip { display: inline-flex; align-items: center; vertical-align: top; height: var(--name); margin-left: var(--space-3); padding: 0 var(--space-3); border-radius: var(--r-xs); background: var(--ink); font-size: var(--chip); font-weight: var(--fw-medium); line-height: var(--lh-tight); color: var(--paper); }
.d-chip:empty { display: none; }
/* exchange, industry and the date of the data close under the name, muted, with the site's middle dot between them.
   Every fact opens with its dot. The line starts one dot's width left of the column and clips that strip, so a fact
   that wraps to the start of a line shows no dot */
.d-meta { --sep: var(--space-5); margin-top: var(--space-1); margin-left: calc(-1 * var(--sep)); clip-path: inset(0 0 0 var(--sep)); display: flex; flex-wrap: wrap; gap: var(--space-1) 0; font-size: var(--text-md); line-height: var(--lh-title); color: var(--muted); }
.d-meta > span::before { content: "\00B7"; content: "\00B7" / ""; display: inline-block; width: var(--sep); text-align: center; }
/* the actions sit level with the name */
.d-actions { display: flex; gap: var(--space-2-5); align-items: center; margin-top: calc((var(--text-4xl) - var(--h-control)) / 2); }
/* the stock page's summary under the name, and the /explain line on why it is discussed */
.d-lead { flex-basis: 100%; max-width: var(--measure); }
.d-lead p { font-size: var(--text-lg); color: var(--ink-2); text-wrap: pretty; }
.d-why { margin-top: var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--gold); }
.d-why cite { display: block; margin-top: var(--space-1); font-style: normal; }

/* the week in four instruments: the signal dial, buzz across the window, the sources on the bullish scale and the mix
   of mentions */
.vitals { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); margin-top: var(--space-8); }
.vt { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-6) var(--pad); }
.vt + .vt { border-left: var(--divider); }
/* a big figure with its qualifier beside it: the four instruments and the last close */
.vt-num, .px-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2-5); font-size: var(--text-sm); color: var(--muted); }
.vt-sub { margin-top: auto; }
/* a figure inside meta text stands out in ink */
.d-lead strong, :is(.vt-sub, .mix-l, .px-mark) b { color: var(--ink); }
/* the dial from 0 to 100: three zones, the model's own lit; ticks every 10 points; the needle swings in from 0 */
.gauge, .gauge:has(.g-mark) + .gauge-foot { --dial-w: min(100%, 240px); width: var(--dial-w); margin-inline: auto; }
.gauge { position: relative; }
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the stock signal's thresholds as numbers just outside the arc, centred on its two gaps (marks in stock-charts.ts) */
.g-mark { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; line-height: var(--lh-tight); }
/* the Fear and Greed dial: the live gauge's five zones apart, each named just outside its arc and turned along it
   (bandDial), the reading under it */
.gauge--named { --dial-w: min(100%, 216px); margin-top: var(--space-5); }
.g-name { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); line-height: var(--lh-tight); white-space: nowrap; }
.g-name.is-on { color: var(--ink); font-weight: var(--fw-medium); }
.gauge--named + .gauge-foot { grid-template-columns: auto; justify-content: center; margin-top: var(--space-2); }
.g-zone.xfear.is-on { stroke: var(--bear); }
.g-zone.fear.is-on { stroke: color-mix(in srgb, var(--bear) 60%, var(--paper)); }
.g-zone.neutral.is-on { stroke: var(--muted); }
.g-zone.greed.is-on { stroke: color-mix(in srgb, var(--bull) 60%, var(--paper)); }
.g-zone.xgreed.is-on { stroke: var(--bull); }
.g-zone { fill: none; stroke: var(--line); stroke-width: 14; stroke-dasharray: 1 1; }
.g-zone.is-on { stroke: url(#g-lit); }
/* the lit zone runs light to deep towards its end of the dial: red for Sell, gold for Hold, green for Buy */
.g-lit stop { stop-color: var(--gold); }
.g-lit stop:last-child { stop-color: var(--signal); }
.g-lit.sell stop { stop-color: var(--bear); }
.g-lit.sell stop:last-child { stop-color: color-mix(in srgb, var(--bear) 55%, var(--paper)); }
.g-lit.buy stop { stop-color: color-mix(in srgb, var(--bull) 55%, var(--paper)); }
.g-lit.buy stop:last-child { stop-color: var(--bull); }
.g-tick { stroke: var(--line-2); stroke-width: 1.5; }
.g-needle { transform-box: view-box; transform-origin: 110px 108px; transform: rotate(calc(var(--a) * 1deg)); }
.g-needle line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.g-needle circle { fill: var(--ink); }
.gauge-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); margin-top: calc(-1 * var(--space-1)); }
.gauge-foot > span:last-child { text-align: right; }
/* under the stock signal's dial the foot is as wide as the dial and starts where the arc starts, 5% in, so 0 and
   100 stand under the two ends of the arc */
.gauge:has(.g-mark) + .gauge-foot { padding-inline: calc(var(--dial-w) / 20); }
.gauge-read { display: flex; align-items: center; gap: var(--space-2-5); }
/* buzz: the window as a line over a dashed midpoint, the latest day as a dot that keeps pulsing */
.vt-spark { position: relative; flex: 1; min-height: 72px; }
.vt-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spk-mid { stroke: var(--line-2); stroke-dasharray: 3 4; }
.spk-line { fill: none; }
.spk-dot { position: absolute; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: var(--r-round); background: var(--signal); }
/* bullish: the sources on the 0 to 100 scale, tiles on stems in lanes; the dashed line is the crowd's average, the
   bracket under the scale spans the spread */
.lean-track { --base: 22px; position: relative; flex: 1; min-height: calc(var(--base) + 34px + (var(--lanes, 1) - 1) * 26px); }
.lt-scale { position: absolute; left: 0; right: 0; bottom: calc(var(--base) - var(--bar) / 2); height: var(--bar); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bear), var(--line-2) 50%, var(--bull)); opacity: 0.6; }
.lt-src { --v: var(--to); position: absolute; z-index: 1; bottom: calc(var(--base) - 4px); left: calc(var(--v) * 1%); translate: -50% 0; display: flex; flex-direction: column-reverse; align-items: center; }
.lt-src i { width: 10px; height: 10px; border-radius: var(--r-round); border: 2px solid var(--paper); background: var(--ink); }
.lt-src::before { content: ""; order: 1; width: 1px; height: calc(4px + var(--lane) * 26px); background: var(--line-2); }
.lt-tile { order: 2; }
.lt-avg { position: absolute; top: 0; bottom: calc(var(--base) - 6px); left: calc(var(--x) * 1%); }
.lt-span { --lo: var(--lo-to); --hi: var(--hi-to); position: absolute; bottom: calc(var(--base) - 12px); left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); height: 6px; border: 1px solid var(--line-2); border-top: 0; }
.lt-ends { position: absolute; left: 0; right: 0; bottom: -4px; margin-top: 0; line-height: var(--lh-tight); }
/* mentions: the share of each source as one bar in its brand colour, then the counts with each source's 3-day trend */
.mix-bar i { transform-origin: 0 50%; }
.mix-bar .reddit { background: var(--src-reddit); }
.mix-bar .x { background: var(--ink); }
.mix-bar .news { background: var(--src-news); }
.mix-l { display: grid; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--ink-2); }
.mix-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto var(--icon-sm); align-items: center; gap: var(--space-2); }
.mix-l b { font-variant-numeric: tabular-nums; }
.mix-l li.is-trades { padding-top: var(--space-1-5); border-top: var(--divider); }
.mix-l li.is-soon > span:not(.tag) { color: var(--muted); }
.mix-l li.is-soon .tile { opacity: 0.5; }
.mix-l li.is-soon .tag { grid-column: 3 / -1; justify-self: end; }
@media (prefers-reduced-motion: no-preference) {
    .g-zone { transition: stroke-dashoffset 700ms ease-out calc(var(--i) * 140ms); }
    .vitals.is-pre .g-zone { stroke-dashoffset: 1; }
    .g-needle { transition: transform 1600ms var(--ease-out-expo) 350ms; }
    /* each name lands as its zone finishes drawing (700ms from --i * 140ms) */
    .g-name { transition-property: opacity, filter; transition-duration: 300ms; transition-timing-function: ease-out; transition-delay: calc(var(--i) * 140ms + 400ms); }
    .vitals.is-pre .g-name { opacity: 0; filter: blur(4px); }
    .vitals.is-pre .g-needle { transform: rotate(-90deg); }
    /* the lines draw in by a wipe of their svg: a dash in pathLength units ends short once the svg stretches */
    .vt-spark svg { clip-path: inset(0 0 0 0); transition: clip-path 1400ms var(--ease-out-expo) 200ms; }
    .vitals.is-pre .vt-spark svg { clip-path: inset(0 100% 0 0); }
    .spk-area, .spk-dot { transition: opacity var(--dur-slow) ease-out 1100ms; }
    .vitals.is-pre :is(.spk-area, .spk-dot) { opacity: 0; }
    /* the home page's ring (lv-ring), paused while off screen */
    .spk-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--signal); animation: lv-ring 2.4s ease-out infinite; }
    .is-off :is(.spk-dot, .sm-node.is-current)::after { animation-play-state: paused; }
    .lt-src { transition: --v var(--dur-glide) var(--ease-out-expo) calc(300ms + var(--i) * 90ms); }
    .vitals.is-pre .lt-src { --v: 50; }
    .lt-span { transition: --lo var(--dur-glide) var(--ease-out-expo) 700ms, --hi var(--dur-glide) var(--ease-out-expo) 700ms; }
    .vitals.is-pre .lt-span { --lo: var(--avg); --hi: var(--avg); }
    .lt-avg { transition: opacity var(--dur) ease-out 200ms; }
    .vitals.is-pre .lt-avg { opacity: 0; }
    .mix-bar i { transition: scale 800ms var(--ease-out-expo) calc(400ms + var(--i) * 120ms); }
    .vitals.is-pre .mix-bar i { scale: 0 1; }
}

/* a panel's head, and the same head over a grid of boxes */
.panel-h { padding: var(--space-5) var(--pad) 0; }
.d-h { margin-bottom: var(--space-4); }
.panel-b { padding: var(--space-4) var(--pad) var(--pad); }
.map-side h3, .more-cols h3 { margin-bottom: var(--space-2); }
/* running text inside the panels */
:is(.d-intro, .d-chart-text, .src-empty, .d-why) { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; }
.d-intro { margin-bottom: var(--space-6); }

.row-2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.row-2:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.d-section { margin-top: var(--space-7); }
/* beside the facts the chart panel grows with them, and the plot takes the extra height */
.d-chart { --ch-h: 340px; display: flex; flex-direction: column; flex: 1; }
.d-plot { position: relative; flex: 1; min-height: var(--ch-h); }
.d-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.ch-price { stroke: var(--graphite-2); stroke-width: 1.75; stroke-linejoin: round; }
/* a 0 to 100 chart labels its quarters in a gutter left of the plot, the dates under it (the Fear and Greed page) */
.fgi-chart { padding-left: var(--space-7); }
/* the last sessions under the numbers: day, both scores, the gap and its signal in columns */
.fgi-days { margin-top: var(--space-5); }
.fgi-days > * { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 3.25rem) 5.5rem; align-items: center; gap: var(--space-2); }
.fgi-days > * > :nth-child(n + 2):nth-child(-n + 4) { text-align: right; font-variant-numeric: tabular-nums; }
.fgi-days > * > :last-child { justify-self: end; }
.fgi-y span { position: absolute; right: calc(100% + var(--space-2)); top: calc(var(--y) * 1%); translate: 0 -50%; font-variant-numeric: tabular-nums; }
/* "Smart money vs dumb money, explained" (FearGreedExplained.astro): each view of the case tabs moves while it shows
   (is-on, set by the tour); the chart of "How to read the chart" draws in three acts (is-a0 to is-a3); with reduced
   motion every view stands at its end */
.fgx { gap: var(--space-4); }
.fgx p { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; }
.fgx-idx li { display: grid; grid-template-columns: minmax(0, 1fr) 232px; align-items: center; gap: var(--space-6); padding-block: var(--space-3-5); }
.fgx-idx li + li { border-top: var(--divider); }
.fgx-idx b { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--ink); }
.fgx .fgx-by { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); }
.fgx-by i { flex: none; width: var(--space-3); height: var(--indicator); background: var(--signal); translate: 0 -3px; }
.fgx-by.is-smart i { background: var(--graphite-2); }
/* Don Hays: the trading day, its first half hour and its last hour lit as the clock runs through them */
.fgx-day { position: relative; height: 28px; margin-bottom: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--bg); }
:is(.fgx-open, .fgx-close) { position: absolute; top: 0; bottom: 0; }
.fgx-open { left: 0; width: 7.7%; border-radius: var(--r-xs) 0 0 var(--r-xs); background: var(--signal); }
.fgx-close { right: 0; width: 15.4%; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--graphite-2); }
.fgx-day > i { position: absolute; top: -4px; bottom: -4px; left: 100%; width: 2px; background: var(--ink); }
:is(.fgx-day, .fgx-pos) > .axis { position: absolute; top: 100%; left: 0; right: 0; }
/* SentimenTrader: small speculators long, commercial hedgers short, both leaning in turn */
.fgx-pos { position: relative; display: grid; gap: var(--space-1-5); margin-bottom: var(--space-6); }
.fgx-pos::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--line-2); }
:is(.fgx-spec, .fgx-hedge) { position: relative; height: 10px; }
:is(.fgx-spec, .fgx-hedge) i { position: absolute; top: 0; bottom: 0; width: 38%; }
.fgx-spec i { left: 50%; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--signal); }
.fgx-hedge i { right: 50%; border-radius: var(--r-xs) 0 0 var(--r-xs); background: var(--graphite-2); }
/* this index: the posts of Reddit and X against the CNN index */
.fgx-feeds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-2-5); }
.fgx-crowd { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 2px solid var(--signal); border-radius: var(--r); }
.fgx-cnn { border-color: var(--graphite-2); }
/* what this version does differently: the price line most versions read, then two real posts scored */
.fgx-diff { gap: var(--space-5); }
.fgx-way { display: grid; gap: var(--space-2-5); }
.fgx-price { position: relative; height: 56px; }
.fgx-price svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fgx-guess { position: absolute; right: 0; top: -4px; padding: 1px var(--space-2); border: var(--dashed); border-radius: var(--r); background: var(--paper); }
.fgx-posts { display: grid; gap: var(--space-2); }
.fgx-posts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); border: var(--border); border-radius: var(--r-box); }
.fgx-posts li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.fgx-posts q { font-size: var(--text-sm); color: var(--ink); }
/* how to read the chart: the example draws act by act, each act's tag over its stretch, its sentence lit below */
.fgx-plot { position: relative; margin-left: var(--space-7); }
.fgx-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.fgx-draw { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.fgx-read.is-a0 .fgx-draw { clip-path: inset(0 100% 0 0); }
.fgx-read.is-a1 .fgx-draw { clip-path: inset(0 62% 0 0); }
.fgx-read.is-a2 .fgx-draw { clip-path: inset(0 25% 0 0); }
.fgx-act { position: absolute; }
.fgx-act--1 { left: 12%; top: 22%; }
.fgx-act--2 { left: 50%; top: 0; }
.fgx-act--3 { right: 0; top: 84%; }
.fgx-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.fgx-cap { display: grid; align-content: start; gap: var(--space-1); font-size: var(--text-sm); color: var(--ink-2); }
.fgx-cap b { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); color: var(--ink); }
.fgx-cap b i { width: 10px; height: 10px; border-radius: var(--r-xs); background: var(--line-2); }
.fgx-cap b i.be { background: var(--bear); }
.fgx-cap b i.bu { background: var(--bull); }
.fgx-read.is-play .fgx-act { opacity: 0; }
.fgx-read.is-play:is(.is-a1, .is-a2, .is-a3) .fgx-act--1, .fgx-read.is-play:is(.is-a2, .is-a3) .fgx-act--2, .fgx-read.is-play.is-a3 .fgx-act--3 { opacity: 1; }
/* a tag shows once its act has drawn, and goes at once when the chart starts over */
.fgx-read.is-play .fgx-cap { opacity: 0.7; } /* dimmed, the caption still reads at 4.5:1 or more */
.fgx-read.is-play.is-a1 .fgx-cap--1, .fgx-read.is-play.is-a2 .fgx-cap--2, .fgx-read.is-play.is-a3 .fgx-cap--3 { opacity: 1; }
/* limits: each with its sign */
.fgx-limits li { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: var(--space-6); padding-block: var(--space-5); font-size: var(--text-md); color: var(--ink-2); }
.fgx-limits li + li { border-top: var(--divider); }
.fgx-sign { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-3); height: 52px; }
.fgx-sign--history i { position: absolute; top: 50%; }
.fgx-had { left: 0; width: 28%; height: 3px; translate: 0 -50%; background: var(--ink); }
.fgx-need { left: 28%; right: 0; border-top: 3px dashed var(--line-2); translate: 0 -50%; }
.fgx-now { left: 28%; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: var(--r-round); background: var(--signal); }
.fgx-bubble { position: relative; padding: 2px var(--space-2); border: 2px solid var(--graphite-2); border-radius: var(--r); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--ink); }
.fgx-bubble::after { content: ""; position: absolute; left: var(--space-2); top: 100%; border: 5px solid transparent; border-top-color: var(--graphite-2); }
.fgx-coin { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--gold); border-radius: var(--r-round); background: var(--tint-gold); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--gold-ink); }
.fgx-sign--mood b { color: var(--muted); font-weight: var(--fw-regular); }
.fgx-sign--mood b { font-size: var(--text-xl); }
/* the dates and the question under a sign */
.fgx-sign > .type-meta { position: absolute; top: calc(50% + var(--space-2-5)); white-space: nowrap; }
.fgx-sign--history .fgx-from { left: 0; }
.fgx-sign--history .fgx-to { left: 28%; top: auto; bottom: calc(50% + var(--space-2)); translate: -50% 0; }
.fgx-sign--ahead .fgx-to { left: 50%; translate: -50% 0; top: calc(100% - var(--space-1)); }
.fgx-sign--ahead .fgx-q { right: 0; top: 0; color: var(--muted); }
.fgx-sign--stand .chip { outline: var(--dashed); outline-offset: var(--space-1); }
.fgx-sign--ahead svg { width: 136px; height: 40px; overflow: visible; }
.fgx-today { stroke: var(--line-2); stroke-dasharray: 2 3; }
.fgx-fog { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 4; opacity: 0.7; }
@media (prefers-reduced-motion: no-preference) {
    .fgx.is-on .fgx-day > i { animation: fgx-clock 4s linear infinite; }
    .fgx.is-on .fgx-open { animation: fgx-open 4s linear infinite; }
    .fgx.is-on .fgx-close { animation: fgx-close 4s linear infinite; }
    .fgx.is-on .fgx-spec i { animation: fgx-lean 3.2s ease-in-out infinite; }
    .fgx.is-on .fgx-hedge i { animation: fgx-lean 3.2s ease-in-out infinite -1.6s; }
    .fgx.is-on .fgx-crowd { animation: fgx-glow 2.4s ease-in-out infinite; }
    .fgx.is-on .fgx-price svg { animation: fgx-wipe 1.6s ease-out both; }
    .fgx.is-on .fgx-guess { animation: fgx-in 0.4s ease-out 1.4s both; }
    .fgx.is-on .fgx-posts li { animation: fgx-in 0.5s ease-out both; animation-delay: calc(1.8s + var(--i) * 0.9s); }
    .fgx.is-on .fgx-posts .tag { animation: fgx-pop 0.3s ease-out both; animation-delay: calc(2.5s + var(--i) * 0.9s); }
    .fgx-draw { transition: clip-path 3.2s linear; }
    .fgx-read.is-a0 .fgx-draw { transition: none; }
    :is(.fgx-act, .fgx-cap) { transition: opacity var(--dur) ease-out; }
    .fgx-read.is-play:is(.is-a1, .is-a2, .is-a3) .fgx-act--1, .fgx-read.is-play:is(.is-a2, .is-a3) .fgx-act--2, .fgx-read.is-play.is-a3 .fgx-act--3 { transition-delay: 2.4s; }
    .fgx-read.is-a0 .fgx-act { transition: none; }
    .fgx.is-on .fgx-now { animation: fgx-beat 1.6s ease-in-out infinite; }
    .fgx.is-on .fgx-fog { animation: fgx-drift 1.2s linear infinite; }
}
@keyframes fgx-clock { from { left: 0; } to { left: 100%; } }
@keyframes fgx-open { 0%, 8% { opacity: 1; } 14%, 100% { opacity: 0.35; } }
@keyframes fgx-close { 0%, 82% { opacity: 0.35; } 86%, 100% { opacity: 1; } }
@keyframes fgx-lean { 0%, 100% { width: 26%; } 50% { width: 44%; } }
@keyframes fgx-glow { 50% { border-color: var(--line); } }
@keyframes fgx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fgx-in { from { opacity: 0; translate: 0 8px; } }
@keyframes fgx-pop { from { opacity: 0; scale: 0.8; } }
@keyframes fgx-beat { 0%, 100% { scale: 1; } 50% { scale: 1.5; } }
@keyframes fgx-drift { to { stroke-dashoffset: -6; } }
/* "How the two crowds are built" on the Fear and Greed page's dark band (CrowdBuild.astro): the method with today's
   numbers. Retail sources run along a pipe into their bullish share, the readings drop into the score; the CNN gauges
   light in turn; both scores stand on the 0 to 100 scale and the gap on its own scale, the band in its middle */
.cb { display: grid; gap: var(--space-5); }
.cb-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cb-side, .cb-gap { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--pad-lg); }
.cb-text { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; }
/* the flows take the room the other side's gauges need, so both scores stand level */
.cb-flow { flex: 1; display: grid; align-content: center; gap: var(--space-4); }
.cb-row { display: grid; grid-template-columns: 6.5rem minmax(var(--space-8), 1fr) minmax(0, 8rem) auto; align-items: center; gap: var(--space-3); }
.cb-src { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink); }
.cb-pipe { position: relative; height: 1px; background: var(--line-2); }
:is(.cb-pipe, .cb-merge) i { position: absolute; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: var(--r-round); background: var(--signal); opacity: 0; }
.cb-pipe i { top: 50%; left: 0; }
.cb-read { display: grid; gap: var(--space-1-5); font-size: var(--text-sm); color: var(--ink-2); }
.cb-read b { color: var(--ink); }
.cb-merge { position: relative; align-self: center; width: 1px; height: var(--space-8); background: var(--line-2); }
.cb-merge i { left: 50%; top: 0; }
.cb-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); padding: var(--space-4); border: var(--border); border-radius: var(--r-box); }
.cb-score .type-meta { flex-basis: 100%; text-align: center; }
.cb-gauges { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--space-2); }
.cb-chip { transition: none; }
.cb-scale, .cb-band { position: relative; height: var(--space-16); }
.cb-scale + .axis, .cb-band + .axis { margin-top: calc(-1 * var(--space-3)); }
.cb-band + .axis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cb-band + .axis span:nth-child(2) { text-align: center; }
.cb-band + .axis span:last-child { text-align: right; }
.cb-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bear), var(--line-2) 50%, var(--bull)); opacity: 0.7; }
.cb-span { position: absolute; top: 50%; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); height: 14px; translate: 0 -50%; border-radius: var(--r-pill); background: color-mix(in srgb, var(--signal) 30%, transparent); }
:is(.cb-mark, .cb-gapmark) { position: absolute; top: 50%; left: calc(var(--x) * 1%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--r-round); background: var(--signal); }
:is(.cb-mark, .cb-gapmark) b { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--ink); }
.cb-mark--retail b { top: calc(100% + var(--space-1-5)); }
:is(.cb-mark--smart, .cb-gapmark) b { bottom: calc(100% + var(--space-1-5)); }
.cb-mark--smart { background: var(--ink); }
.cb-zone { position: absolute; top: 50%; height: var(--bar); translate: 0 -50%; }
.cb-zone--crowd { left: 0; width: calc((50 - var(--band)) * 1%); border-radius: var(--r-pill) 0 0 var(--r-pill); background: var(--tint-bear); }
.cb-zone--even { left: calc((50 - var(--band)) * 1%); width: calc(var(--band) * 2%); background: var(--line-2); }
.cb-zone--smart { right: 0; width: calc((50 - var(--band)) * 1%); border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--tint-bull); }
.cb-gapmark { --x: var(--g); background: var(--ink); }
.cb-reads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-5); border-top: var(--divider); }
.cb-reads p { display: grid; gap: var(--space-1-5); font-size: var(--text-md); color: var(--ink-2); }
.cb-reads p:last-child { text-align: right; }
.cb-reads b { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    .cb-pipe i { animation: cb-run 2.4s linear infinite; animation-delay: calc(var(--i) * 0.6s); }
    .cb-pipe i + i { animation-delay: calc(var(--i) * 0.6s + 1.2s); }
    .cb-merge i { animation: cb-drop 2.4s ease-in infinite 0.8s; }
    .cb-chip { animation: cb-lit 7s ease-out infinite; animation-delay: calc(var(--i) * 1s); }
    :is(.cb-mark, .cb-gapmark) { transition: left var(--dur-glide) var(--ease-out-expo) 300ms; }
    .cb-span { transition: left var(--dur-glide) var(--ease-out-expo) 300ms, width var(--dur-glide) var(--ease-out-expo) 300ms; }
    .cb.is-pre :is(.cb-mark, .cb-gapmark) { left: 50%; }
    .cb.is-pre .cb-span { left: 50%; width: 0; }
    .cb.is-off :is(.cb-pipe i, .cb-merge i, .cb-chip) { animation-play-state: paused; }
}
@keyframes cb-run { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes cb-drop { 0% { top: 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes cb-lit { 0%, 10% { border-color: var(--gold); color: var(--ink); } 18%, 100% { border-color: var(--line-2); color: var(--ink-2); } }
.ch-xhair { stroke: var(--ink); }
.vbar { fill: var(--line-2); }
.sbar.bu { fill: var(--bull); }
.sbar.nt { fill: var(--line-2); }
.sbar.be { fill: var(--bear); }
.readout { top: 0; font-variant-numeric: tabular-nums; }
.readout .d { color: var(--muted); }
.readout div { display: flex; justify-content: space-between; gap: var(--space-4); }
.readout .b { color: var(--signal-ink); font-weight: var(--fw-medium); }
.d-chart-text:empty { display: none; }
.d-chart-text { margin-top: var(--space-3-5); }
/* no Alpha Vantage prices: the live page's TradingView chart in their place, its final height in the HTML before
   the script fills it */
.d-tv { height: 420px; }
/* no price data for this ticker: the panel keeps only its note */
.is-empty :is(.px-head, .d-chart) { display: none; }
.is-empty .d-chart-text { margin-top: 0; }

/* the last close large over the chart; the price line's high, low and last close marked */
.px-head { margin-bottom: var(--space-4); }
.px-marks { position: absolute; inset: 0; pointer-events: none; }
.px-mark { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: var(--r-round); border: 2px solid var(--graphite-2); background: var(--paper); }
.px-mark.last { background: var(--graphite-2); }
.px-mark span { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-mark.hi span { bottom: calc(100% + var(--space-1-5)); }
.px-mark.lo span { top: calc(100% + var(--space-1-5)); }
.px-mark.is-l span { left: 0; translate: -4.5px 0; }
.px-mark.is-r span { left: auto; right: 0; translate: 4.5px 0; }


/* Wall Street vs the crowd: the analysts on the left, everyone's bullish share on the right */
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-10); }
.svc h3 { margin-bottom: var(--space-4); }
.rate-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--ink-2); }
/* the ratings as a split bar; its legend dots in the same tones */
.rate-bar { margin-top: var(--space-4); }
.tgt.is-down .tgt-l { flex-direction: row-reverse; }
/* the target runway: the window's range in grey, the way from the last close to the average target in green (red
   when the target sits below), drawn out from the close once the panel is on screen */
.tgt { margin-top: var(--space-8); }
.tgt-up { font-size: var(--text-md); color: var(--ink-2); }
.tgt-up b { font-size: var(--text-xl); margin-right: var(--space-1); }
.tgt-track { position: relative; height: 12px; margin-top: var(--space-3); }
.tgt-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.tgt-range, .tgt-gap { position: absolute; top: 50%; height: var(--bar); margin-top: calc(var(--bar) / -2); border-radius: var(--r-pill); }
.tgt-range { left: calc(var(--r0) * 1%); width: calc((var(--r1) - var(--r0)) * 1%); background: var(--line-2); }
.tgt-gap { left: calc(min(var(--c), var(--t)) * 1%); width: calc((max(var(--c), var(--t)) - min(var(--c), var(--t))) * 1%); background: var(--bull); transform-origin: 0 50%; }
.tgt.is-down .tgt-gap { background: var(--bear); transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) {
    .is-pre .tgt-gap { scale: 0 1; }
    .is-pre :is(.tgt-dot, .who-gap) { opacity: 0; }
    .tgt-gap { transition: scale var(--dur-glide) var(--ease-out-expo) 300ms; }
    .tgt-dot, .who-gap { transition: opacity var(--dur) ease-out 900ms; }
}

/* the spread rows and their scale share one grid; the crowd's average runs through all rows as a dashed line, and
   Wall Street's row spans its distance to it */
.dots, .spread-scale { --lw: 120px; --vw: 48px; --g: var(--space-3-5); }
.dot-row, .spread-scale { display: grid; grid-template-columns: var(--lw) 1fr var(--vw); gap: var(--g); }
.dots { position: relative; display: grid; gap: var(--space-1); padding-top: var(--space-6); }
.dot-row { align-items: center; height: 40px; font-size: var(--text-sm); }
.dot-row .who { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }
.who-ws { flex: none; width: var(--logo-xs); height: var(--logo-xs); border-radius: var(--r-xs); background: var(--ink); }
.dots .sp-track { align-self: stretch; background: linear-gradient(var(--line-2), var(--line-2)) center / 1px 16px no-repeat; }
.dot-row .val { text-align: right; font-variant-numeric: tabular-nums; }
.who-gap { position: absolute; top: 50%; height: var(--bar); margin-top: calc(var(--bar) / -2); left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); background: var(--ink); }
.who-gap span { position: absolute; bottom: var(--space-1-5); left: 50%; translate: -50% 0; font-size: var(--text-xs); font-style: normal; font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; }
.crowd-line { position: absolute; top: var(--space-5); bottom: 0; z-index: 0; left: calc(var(--lw) + var(--g) + (100% - var(--lw) - var(--vw) - 2 * var(--g)) * var(--x) / 100); }
/* an average as a dashed line: the crowd's here and on the bullish scale above, the plotted stocks' on the industry map */
:is(.crowd-line, .lt-avg, .smap-avg) { border-left: 1px dashed var(--signal); }
.crowd-line b { position: absolute; bottom: 100%; left: 0; translate: -50% 0; font-size: var(--text-xs); color: var(--signal-ink); white-space: nowrap; }

/* the signal breakdown: one column per score part, side by side; a list on phones */
.brk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-10); }
.brk-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--space-2) var(--space-3); }
.brk-row + .brk-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--space-5)); border-left: var(--divider); }
.brk-row > b { font-size: var(--text-sm); }
.brk-row p { grid-column: 1 / -1; line-height: var(--lh-body); text-wrap: pretty; }
.brk-val { text-align: right; font-size: var(--text-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.brk-bar { grid-column: 1 / -1; }
.brk-note { margin-top: var(--space-5); padding-top: var(--space-3); border-top: var(--divider); line-height: var(--lh-body); }
.brk-note + .brk-note { margin-top: 0; }

/* each source's week: trend, three figures, the bullish, neutral and bearish split, the loudest post */
.src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.src-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--pad); }
.src { display: flex; align-items: center; gap: var(--space-2-5); font-weight: var(--fw-medium); }

.src-post { margin-top: auto; }
/* the loudest item: every box the same height, the meta on one line and the text at three lines (the shared clamp) */
/* a source without data this week: the box stays dashed with its tile greyed. It says so in the middle of the room a
   full card beside it leaves, its tile large over the sentence and the link to where that source is busy */
.src-card.is-empty { background: transparent; border-style: dashed; }
.src-card.is-empty .tile { filter: grayscale(1); opacity: 0.45; }
.src-card.is-empty .src { color: var(--ink-2); }
.src-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding-block: var(--space-6); text-align: center; }
.src-none .src-empty { text-wrap: balance; }

/* the industry map: bullish share across, buzz up; logos sized by mentions, the stock ringed in the signal colour */
.map-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: var(--space-10); }
/* a node's logo grows with the stock's mentions from --node to --node-max (stock-map.ts) */
.smap { --plot-h: 440px; --node: var(--logo-md); --node-max: var(--logo-xl); --node-current: var(--logo-2xl); position: relative; padding-left: var(--space-6); }
.smap-plot { position: relative; height: var(--plot-h); border-left: var(--border); border-bottom: var(--border); }
/* the average bullish share of the plotted stocks, dashed as the crowd line of the street panel, its label at the
   top on the side with more room */
.smap-avg { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); pointer-events: none; }
.smap-avg b { position: absolute; top: 0; left: 0; translate: var(--tx) 0; padding: 0 var(--space-1-5); font-size: var(--text-xs); color: var(--signal-ink); white-space: nowrap; }
/* the y axis reads bottom to top: quiet, buzz, loud */
.smap-y { position: absolute; left: 0; top: 0; height: var(--plot-h); display: flex; justify-content: space-between; writing-mode: vertical-rl; rotate: 180deg; }
.smap-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.smap-links line { stroke: var(--signal); stroke-width: 1.5; opacity: 0.6; }
.smap-nodes { position: absolute; inset: 0; }
.sm-node { position: absolute; left: 0; top: 0; z-index: 1; display: grid; justify-items: center; width: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); translate: var(--x) var(--y); border-radius: var(--r-logo); -webkit-tap-highlight-color: transparent; }
.sm-node .plogo { box-shadow: var(--shadow-xs); transition: scale var(--dur-fast) ease-out; }
.sm-node.is-current { z-index: 3; }
.sm-node.is-current .plogo { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--signal); }
.sm-node.is-near { z-index: 2; }
.sm-node.is-near .plogo { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--signal); }
.sm-node.is-hot { z-index: 4; }
.sm-node.is-hot .plogo { scale: 1.15; }
.sm-t { position: absolute; top: calc(100% + var(--space-1)); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; pointer-events: none; }
.is-current .sm-t { top: calc(100% + var(--space-2)); }
.is-current.lab-up .sm-t { top: auto; bottom: calc(100% + var(--space-2)); }
.smap-tip { display: grid; gap: var(--space-1); }
.smap-tip b { font-size: var(--text-sm); }
@media (prefers-reduced-motion: no-preference) {
    /* on screen the industry flies out from the stock to its readings, the closest first; then the lines draw */
    .sm-node { transition: translate 1100ms var(--ease-out-expo) calc(var(--i, 0) * 40ms), opacity 500ms ease-out calc(var(--i, 0) * 40ms); }
    .smap-plot.is-pre .sm-node:not(.is-current) { translate: var(--cx) var(--cy); opacity: 0; }
    .smap-links line { transition: stroke-dashoffset 900ms ease-out 900ms; }
    .smap-plot.is-pre .smap-links line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
    .smap-plot:not(.is-pre) .smap-links line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
    .sm-node.is-current::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-logo); border: 2px solid var(--signal); animation: sm-ring 2.6s ease-out infinite; pointer-events: none; }
    @keyframes sm-ring { from { scale: 1; opacity: 0.6; } to { scale: 1.9; opacity: 0; } }
}
/* the lists beside the map: a row is a link to that stock's dashboard */
.map-side > div + div { margin-top: var(--space-6); }
.near li a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2-5) 0; border-top: var(--divider); }
.near li:first-child a { border-top: 0; }
.near .nv { display: grid; line-height: var(--lh-title); }
.near b { transition: color var(--dur-fast) ease-out; }
.near .nv small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near .nv { text-align: right; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.near li.is-hot b { color: var(--signal-ink); }
@media (hover: hover) { .near li a:hover b { color: var(--signal-ink); } }

/* the stock among its alphabetical neighbours, as on the stock page: each a link, the stock itself raised; on screen
   the neighbours slide out from it */
.abc { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2-5); }
.abc > li > * { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); height: 100%; padding: var(--space-3-5) var(--space-3); --s: var(--logo-md); }
.abc b { margin-top: var(--space-1-5); font-size: var(--text-md); transition: color var(--dur-fast) ease-out; }
.abc small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abc .abc-sig { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-1-5); white-space: nowrap; margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.abc .is-current > * { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal), var(--shadow-card); translate: 0 calc(-1 * var(--space-1-5)); }
@media (hover: hover) { .abc a:hover b { color: var(--signal-ink); } }
@media (prefers-reduced-motion: no-preference) {
    .abc > li { transition: translate 700ms var(--ease-out-expo) calc(var(--k) * 70ms), opacity 500ms ease-out calc(var(--k) * 70ms); }
    .abc.is-pre > li:not(.is-current) { translate: calc(var(--dx) * 28px) 0; opacity: 0; }
}
/* more stocks: the rest of the industry, the most discussed, bullish and bearish side by side (the rows of the map's
   lists) */
.more-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6) var(--space-8); padding: var(--pad); }
.more-cols h3 small { display: block; letter-spacing: 0; }

/* a section of its own after the dashboard (the CLI and the widgets), spaced like the sections of the other pages */
.d-section--apart { margin-top: var(--section-y); }

.d-state { padding: var(--space-16) 0; text-align: center; color: var(--ink-2); }
.d-state h1 { font-size: var(--text-3xl); color: var(--ink); }
.d-state p { margin-top: var(--space-2-5); }

/* ---------- Market movers (market-movers-today.astro) ----------
   The live hero's form and its block of logos, the stock dashboard's evaluation of any ticker under the hero and the
   movers board, one group at a time. */

/* the form: the ticker field with its button beside it, no wider than the lead */
.mv-ask { width: min(100%, 520px); }
.mv-ask-row { display: flex; gap: var(--space-3); }
.mv-ask-row > :first-child { flex: 1; min-width: 0; }

/* the block of logos: the tickers loudest on Reddit right now, three by three. Each tile asks for its evaluation; its
   ticker is its name for a screen reader only (vh). One tile after the other takes a gold ring, as a scan across the
   board. The track holds the nine twice for the row that runs on phones; wider screens show the first nine. */
.mv-tiles { display: grid; place-items: center; height: 100%; }
.mv-tiles-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 88%; }
.mv-tile { --s: 100%; position: relative; transition: translate var(--dur) var(--ease-out-expo), box-shadow var(--dur) ease-out; }
.mv-tile:nth-child(n + 10) { display: none; }
@media (hover: hover) {
    .mv-tile:hover { translate: 0 -3px; box-shadow: var(--shadow-pop); }
}
@media (prefers-reduced-motion: no-preference) {
    .mv-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--gold); opacity: 0; pointer-events: none; animation: mv-scan 13.5s ease-in-out calc(var(--i) * 1.5s) infinite; }
    @keyframes mv-scan { 0%, 12%, 100% { opacity: 0; } 4%, 8% { opacity: 1; } }
}

/* the evaluation under the hero: the stock page's head, its four instruments and a card per source, three across */
.mv-result { margin-top: var(--space-16); scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + var(--space-5)); }
.mv-src { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-5); }
.mv-src .d-why { margin-top: 0; }
.mv-quiet { color: var(--muted); }
.mv-note { margin-top: var(--space-4); }

@media (max-width: 1024px) {
    .mv-src { grid-template-columns: minmax(0, 1fr); }
    .mv-result { margin-top: var(--space-12); }
}
@media (max-width: 768px) {
    /* the logos run as one row under the form, the live page's ticker */
    .mv-tiles { display: block; overflow: clip; margin-right: calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
    .mv-tiles-track { display: flex; gap: 0; width: max-content; padding-block: var(--space-2); }
    .mv-tile { width: 64px; margin-right: var(--space-3); }
    .mv-tile:nth-child(n + 10) { display: grid; }
    .mv-result { margin-top: var(--space-10); }
    /* the mover's group and rank take a line of their own, as the date of the stock page's data */
    .mv-pos { flex-basis: 100%; }
    /* the board (mv-board): the day's move with its arrow needs more room than a buzz score, up to "+182.82%" */
    .mv-board { --tr-cols: 20px minmax(0, 1fr) 88px 60px 56px; }
    /* the groups' switch fills the width, as the switches of every board head on phones */
    .mv-board .box-head > .seg { display: flex; width: 100%; }
    .mv-board .box-head > .seg > button { flex: 1; }
}
@media (max-width: 480px) {
    /* the rank gives way as on every rank board (site-2026.css). The first tab keeps the start of its name (mv-long
       holds the rest), so the switch fits the board */
    .mv-board { --tr-cols: minmax(0, 1fr) 88px 58px 56px; }
    .mv-long { display: none; }
}
@media (max-width: 360px) {
    .mv-board { --tr-cols: minmax(0, 1fr) 88px 58px 48px; }
}
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .mv-tiles-track { animation: marquee 32s linear infinite; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* the facts take two columns once the row stacks */
    .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
    .facts > div:nth-child(2) { border-top: 0; }
}
@media (max-width: 1024px) {
    .row-2, .svc, .map-row { grid-template-columns: minmax(0, 1fr); }
    /* the neighbours scroll sideways, the stock in the middle */
    .abc { grid-auto-columns: 136px; padding-top: var(--space-1-5); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
    .abc > li { scroll-snap-align: center; }
    .svc { gap: var(--space-10); }
    .map-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
    .map-side > div + div { margin-top: 0; }
    /* the instruments in two rows of two */
    .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vt:nth-child(3) { border-left: 0; }
    .vt:nth-child(n+3) { border-top: var(--divider); }
}
@media (max-width: 768px) {
    .d-id { --name: var(--text-3xl); --chip: var(--text-xl); }
    .cb-sides, .cb-reads { grid-template-columns: minmax(0, 1fr); }
    .fgx-idx li, .fgx-caps { grid-template-columns: minmax(0, 1fr); }
    .fgx-idx li { gap: var(--space-3); }
    .cb-reads p:last-child { text-align: left; }
    .cb-row { grid-template-columns: max-content minmax(var(--space-4), 1fr) minmax(0, 6rem); }
    .cb-src { white-space: nowrap; }
    /* the dates under a chart: first, middle and last only, so they keep apart */
    .fgi-chart .axis--ticks span:is(:nth-child(2), :nth-child(4)) { display: none; }
    .cb-row .tag { grid-column: 3; justify-self: start; }
    .d-asof { flex-basis: 100%; }
    .d-lead p { font-size: var(--text-base); }
    .d-actions { width: 100%; }
    .d-actions .btn { flex: 1; justify-content: center; }
    .vitals { grid-template-columns: minmax(0, 1fr); }
    .vt + .vt { border-left: 0; border-top: var(--divider); }
    .more-cols .near li:nth-child(n+6) { display: none; }
    .d-chart { --ch-h: 260px; }
    .d-tv { height: 360px; }
    .brk { grid-auto-flow: row; }
    .brk-row + .brk-row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--divider); }
    .brk-row + .brk-row::before { content: none; }
    .dots, .spread-scale { --lw: 96px; --vw: 40px; --g: var(--space-2-5); }
    .src-grid, .map-side { grid-template-columns: minmax(0, 1fr); }
    .smap { --plot-h: 360px; padding-left: var(--space-5); }
}
@media (max-width: 480px) {
    .smap { --node: var(--logo-sm); --node-max: var(--logo-lg); --node-current: var(--logo-xl); }
}

/* ---------- Market movers: how the explanation is built (MoversHow.astro) ----------
   The pictures of the three why cards of /market-movers-today, each a step of the explain endpoint. They move only
   without reduced motion and pause while off screen (is-off, set by the component). Standing still, each shows a
   frame that still tells its step. */
@property --mvh-p { syntax: '<number>'; inherits: true; initial-value: 0; }
.mvh { position: absolute; inset: var(--space-4) var(--space-6); }
.mvh.is-off, .mvh.is-off * { animation-play-state: paused; }

/* 1. Mentions first: each source sends its mentions along a lane. At the sentiment step a hollow mention takes its
   tone (bullish, bearish or neutral) and runs on to the ticker, whose split sums them up. */
.mvh-flow { container-type: size; }
.mvh-lanes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mvh-lanes polyline { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-linejoin: round; }
.mvh-gate { position: absolute; top: calc(-1 * var(--space-1)); bottom: 0; left: 50%; display: flex; flex-direction: column; align-items: center; translate: -50% 0; }
.mvh-gate::after { content: ""; flex: 1; width: 2px; margin-top: var(--space-1); border-radius: var(--r-pill); background: var(--gold); }
.mvh-src { position: absolute; z-index: 1; left: 8%; top: calc(var(--y) * 1%); display: grid; translate: -50% -50%; }
.mvh-m { position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border: 1.5px solid var(--slate); border-radius: var(--r-round); background: var(--paper); translate: calc(var(--sx) * 1cqw) calc(var(--sy) * 1cqh); }
.mvh-m.is-scored { border-color: var(--c); background: var(--c); }
.mvh-tk { position: absolute; z-index: 2; left: 84%; top: 54%; translate: -50% -50%; }
.mvh-tally { position: absolute; top: calc(100% + var(--space-1-5)); left: 0; right: 0; }

/* 2. Summarised per source: in turn, each source folds its pile of mentions into the gold point and writes one
   sentence of two lines, which stays until its next turn. */
.mvh-sum { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.mvh-row { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--space-3) minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.mvh-pile { position: relative; align-self: stretch; container-type: size; }
.mvh-mk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1px); height: 4px; margin-top: -2px; border-radius: var(--r-pill); background: var(--c); opacity: 0.6; }
.mvh-cx { justify-self: center; width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--r-round); background: var(--gold); }
.mvh-sen { display: grid; gap: var(--space-1-5); }
.mvh-sen i { height: 4px; border-radius: var(--r-pill); background: var(--ink-2); transform-origin: 0 50%; }
.mvh-sen i + i { width: 62%; }

/* 3. Refreshed every hour: a trading day from the open to the close. At each hour the playhead lights a tick and the
   board above rebuilds, two rows trading places. The explanation's track renews only once six hours have passed: the
   morning's line turns grey and a new one starts. */
.mvh-day { display: grid; align-content: center; gap: var(--space-2-5); }
.mvh-board { display: grid; grid-template-columns: var(--space-3) minmax(0, 1fr); gap: var(--space-2-5); }
.mvh-ranks { display: grid; grid-template-rows: repeat(3, var(--logo-xs)); row-gap: var(--space-1); align-items: center; font-variant-numeric: tabular-nums; }
.mvh-rows { position: relative; height: calc(3 * var(--logo-xs) + 2 * var(--space-1)); }
.mvh-rk { --w: calc((88 - var(--mvh-p) * 26) * 1%); position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--space-2-5); height: var(--logo-xs); translate: 0 calc(var(--mvh-p) * (var(--logo-xs) + var(--space-1))); }
.mvh-rk--b { --mvh-p: 1; }
.mvh-rk--c { --mvh-p: 2; }
.mvh-bar { flex: 1; }
.mvh-clock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(2, var(--space-3-5)); align-items: center; gap: var(--space-1-5) var(--space-3); }
/* both tracks on the rows of their labels, so the playhead runs through them as one line */
.mvh-tracks { position: relative; grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; }
.mvh-hours, .mvh-six { position: relative; }
.mvh-hours::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.mvh-hours i { position: absolute; top: 50%; left: calc(var(--k) / 6.5 * 100%); width: var(--dot-sm); height: var(--dot-sm); margin: calc(var(--dot-sm) / -2) 0 0 calc(var(--dot-sm) / -2); border-radius: var(--r-round); background: var(--ink-2); }
.mvh-six i { position: absolute; top: 50%; height: var(--bar); margin-top: calc(var(--bar) / -2); border-radius: var(--r-pill); }
.mvh-old { left: 0; width: calc(6 / 6.5 * 100%); background: var(--line-2); transform-origin: 0 50%; }
.mvh-new { left: calc(6 / 6.5 * 100% + var(--space-0-5)); right: 0; background: var(--gold); transform-origin: 0 50%; }
.mvh-play { position: absolute; top: calc(-1 * var(--space-1)); bottom: calc(-1 * var(--space-1)); left: 0; width: 2px; margin-left: -1px; border-radius: var(--r-pill); background: var(--signal); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .mvh-m { animation: mvh-mention 6s linear var(--t) infinite; }
    .mvh-mk { animation: mvh-fold 9s var(--ease-in-out) calc(var(--rd) + var(--md)) infinite; }
    .mvh-cx { animation: mvh-glow 9s ease-out var(--rd) infinite; }
    .mvh-sen i { animation: mvh-say 9s var(--ease-out-expo) var(--rd) infinite; }
    .mvh-sen i + i { animation-delay: calc(var(--rd) + 0.2s); }
    .mvh-rk--a { animation: mvh-rank-a 14s var(--ease-in-out) infinite; }
    .mvh-rk--b { animation: mvh-rank-b 14s var(--ease-in-out) infinite; }
    .mvh-rk--c { animation: mvh-rank-c 14s var(--ease-in-out) infinite; }
    .mvh-play { animation: mvh-play 14s linear infinite; }
    .mvh-hours i { animation: mvh-tick 14s ease-out calc(var(--k) * 2s) infinite; }
    .mvh-old { animation: mvh-old 14s linear infinite; }
    .mvh-new { animation: mvh-new 14s linear infinite; }
}
@keyframes mvh-mention {
    0% { translate: 8cqw calc(var(--y) * 1cqh); scale: 0.4; opacity: 0; border-color: var(--slate); background: var(--paper); }
    8% { scale: 1; opacity: 1; }
    48% { translate: 50cqw calc(var(--y) * 1cqh); scale: 1; border-color: var(--slate); background: var(--paper); }
    53% { scale: 1.6; border-color: var(--c); background: var(--c); }
    62% { scale: 1; }
    90% { translate: 84cqw 54cqh; scale: 1; opacity: 1; }
    100% { translate: 84cqw 54cqh; scale: 0.6; opacity: 0; border-color: var(--c); background: var(--c); }
}
@keyframes mvh-fold {
    0%, 6% { translate: 0 0; scale: 1; opacity: 0.6; }
    22%, 94% { translate: calc((100 - var(--x)) * 1cqw) calc((50 - var(--y)) * 1cqh); scale: 0.2 1; opacity: 0; }
    95% { translate: 0 0; scale: 1; opacity: 0; }
    100% { translate: 0 0; scale: 1; opacity: 0.6; }
}
@keyframes mvh-glow { 0%, 8% { scale: 1; } 18% { scale: 2; } 30%, 100% { scale: 1; } }
@keyframes mvh-say { 0%, 18% { scale: 0 1; opacity: 1; } 32%, 90% { scale: 1 1; opacity: 1; } 95% { scale: 1 1; opacity: 0; } 96%, 100% { scale: 0 1; opacity: 1; } }
@keyframes mvh-play { 0% { left: 0; opacity: 1; } 92.86% { left: 100%; opacity: 1; } 97% { left: 100%; opacity: 0; } 100% { left: 0; opacity: 0; } }
@keyframes mvh-tick { 0% { scale: 1; background: var(--ink-2); } 3% { scale: 2.2; background: var(--gold); } 12%, 100% { scale: 1; background: var(--ink-2); } }
@keyframes mvh-old { 0% { scale: 0 1; background: var(--gold); opacity: 1; } 85.71% { scale: 1 1; background: var(--gold); } 88% { scale: 1 1; background: var(--line-2); opacity: 1; } 97% { scale: 1 1; background: var(--line-2); opacity: 1; } 100% { scale: 1 1; background: var(--line-2); opacity: 0; } }
@keyframes mvh-new { 0%, 85.71% { scale: 0 1; opacity: 1; } 92.86% { scale: 1 1; opacity: 1; } 97% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@keyframes mvh-rank-a { 0% { --mvh-p: 0; } 28.57% { --mvh-p: 0; } 31.57% { --mvh-p: 1; } 42.86% { --mvh-p: 1; } 45.86% { --mvh-p: 2; } 71.43% { --mvh-p: 2; } 74.43% { --mvh-p: 1; } 85.71% { --mvh-p: 1; } 88.71% { --mvh-p: 0; } 100% { --mvh-p: 0; } }
@keyframes mvh-rank-b { 0% { --mvh-p: 1; } 14.29% { --mvh-p: 1; } 17.29% { --mvh-p: 2; } 42.86% { --mvh-p: 2; } 45.86% { --mvh-p: 1; } 57.14% { --mvh-p: 1; } 60.14% { --mvh-p: 0; } 85.71% { --mvh-p: 0; } 88.71% { --mvh-p: 1; } 100% { --mvh-p: 1; } }
@keyframes mvh-rank-c { 0% { --mvh-p: 2; } 14.29% { --mvh-p: 2; } 17.29% { --mvh-p: 1; } 28.57% { --mvh-p: 1; } 31.57% { --mvh-p: 0; } 57.14% { --mvh-p: 0; } 60.14% { --mvh-p: 1; } 71.43% { --mvh-p: 1; } 74.43% { --mvh-p: 2; } 100% { --mvh-p: 2; } }