/* Adanos 2026 redesign: the rules of page:home only. Its pages link site-2026.css first, then this sheet. Filed by scripts/kit/split.py. */
/* ---------- Hero ---------- */

/* The machine: chatter flows through the scorer into the response */
.machine { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
.stream-col { position: relative; display: grid; min-width: 0; }
.stream {
    --label-w: 108px;
    position: relative;
    overflow: hidden;
    border: var(--border);
    border-right: 0;
    border-radius: var(--r-box) 0 0 var(--r-box);
    background: linear-gradient(90deg, var(--paper) 0, color-mix(in srgb, var(--paper) 40%, var(--bg)) 100%);
}
.lanes { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(5, 1fr); }
.lane { position: relative; border-bottom: var(--divider); }
.lane:last-child { border-bottom: 0; }
/* Source label: the app tile with its name on a frosted glass tag pinned under it */
.lane-label {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--label-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lane-label .tile { filter: drop-shadow(var(--shadow-tile)); }
.lane-label span { position: relative; margin-top: calc(-1 * var(--space-2-5)); }
/* a source that is not in the API yet: its lane carries no posts, a tag after the label says so */
.lane-soon { position: absolute; top: 50%; left: calc(var(--label-w) + var(--space-4)); translate: 0 -50%; }

/* Posts travel on their own layer, faded out over the label area */
/* the hero feed flies the post card of the system sheet: feed-post puts it on its lane; the machine marks the ticker
   and the words, shows the lean once scanned, then absorbs the post */
.feed-post { position: absolute; top: 0; left: 0; z-index: 1; white-space: nowrap; will-change: transform; }
.feed-post .tk { font-weight: var(--fw-medium); color: var(--ink); transition: color var(--dur) ease-out; }
.feed-post .w { border-radius: var(--r-xs); padding: 0 var(--space-0-5); margin: 0 calc(-1 * var(--space-0-5)); transition: background-color var(--dur) ease-out, color var(--dur) ease-out; }
.feed-post.scanned { border-color: color-mix(in srgb, var(--gold) 55%, var(--line-2)); }
.feed-post.scanned .tk { color: var(--signal-ink); }
/* text on a bull or bear tint takes the ink shade: the full colour on its own tint stays under 4.5:1 */
.feed-post.scanned .w.pos { background: var(--tint-bull); color: var(--bull-ink); }
.feed-post.scanned .w.neg { background: var(--tint-bear); color: var(--bear-ink); }
.feed-post.absorb { opacity: 0; filter: blur(4px); transition: opacity var(--dur) ease-out, filter var(--dur) ease-out; }
.posts { position: absolute; inset: 0; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent var(--label-w), #000 calc(var(--label-w) + 72px)); mask-image: linear-gradient(90deg, transparent var(--label-w), #000 calc(var(--label-w) + 72px)); }

.beam { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; left: 66%; background: linear-gradient(180deg, transparent, var(--gold) 18%, var(--signal) 50%, var(--gold) 82%, transparent); }
.beam::before { content: ''; position: absolute; top: 0; bottom: 0; left: -22px; width: 46px; background: radial-gradient(closest-side, var(--tint-gold), transparent); }
/* Label above the stream box, centred on the scanner line */
.beam-label { position: absolute; bottom: 100%; left: 66%; translate: -50% 0; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--signal-ink); white-space: nowrap; pointer-events: none; }

.flight { position: absolute; z-index: 20; top: 0; left: 0; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: var(--r-round); pointer-events: none; }
.flight.pos { background: var(--bull); }
.flight.neg { background: var(--bear); }
.flight.neu { background: var(--gold); }

/* Response panel */
.demo { position: relative; z-index: 4; background: var(--paper); border: var(--border); border-radius: 0 var(--r-box) var(--r-box) 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: -18px 0 30px -24px rgb(26 26 26 / 0.25); }

/* Card and JSON share the stage: the card keeps its space (hidden) under the JSON, so switching never resizes the panel */
.demo-stage { position: relative; flex: 1; }
.demo-body { padding: var(--pad) var(--pad) var(--space-1); }
.demo-stage.is-json .demo-body { visibility: hidden; }
.q-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.q-name { font-size: var(--text-md); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-name b { color: var(--ink); margin-right: var(--space-2); }
.q-live { display: inline-flex; align-items: center; gap: var(--space-1-5); flex: none; }
.q-live i { width: var(--dot-sm); height: var(--dot-sm); border-radius: var(--r-round); background: var(--bull); }
.q-score { display: flex; align-items: flex-end; gap: var(--space-6); margin-top: var(--space-3-5); }
.q-big-lbl { margin-top: var(--space-2-5); white-space: nowrap; }
.q-big-lbl span { color: var(--signal-ink); }
.q-spark { flex: 1; height: 70px; min-width: 0; }

.q-split { margin-top: var(--space-6); }
.q-stats { --cols: 2; margin-top: var(--space-5); padding: var(--space-3) 0 var(--space-2-5); border-top: var(--divider); }
/* the +1 of a new mention flies into its box */
.q-stats > div { position: relative; }
.plus { position: absolute; right: var(--space-1); top: var(--space-3); font-size: var(--text-xs); color: var(--signal-ink); pointer-events: none; }
.q-explain { padding: var(--space-3) 0; border-top: var(--divider); font-size: var(--text-sm); color: var(--ink-2); text-wrap: pretty; }
.q-explain b { color: var(--ink); }

/* JSON views (response card and endpoint explorer) */
.demo-json { position: absolute; inset: 0; }
.demo-stage:not(.is-json) .demo-json { display: none; }
.demo .ok { color: var(--bull); white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
    .wg-track { --loop: 28s; }
}

/* ---------- Use cases: four live views on the stage of the case tabs (site-2026.css) ---------- */
/* shared parts of the four views */
.viz-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); color: var(--ink-2); }
/* the logo, not its placeholder before the script swaps it */
.viz-logo.plogo { margin-right: var(--space-1); }

/* 1 · Bullish share per source on one axis; --v (per track) and --lo/--hi (band) animate */
/* the plot grows with the stage, so the rows share the free height */
.sp-plot { --sp-head: 38px; flex: 1; min-height: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.sp-labels { display: grid; grid-template-rows: repeat(5, minmax(44px, 1fr)); padding-top: var(--sp-head); }
.sp-labels > span { display: flex; align-items: center; gap: var(--space-2-5); font-size: var(--text-sm); font-weight: var(--fw-medium); }
/* a source that is not in the API yet: name with a note, a dashed track and no reading */
.sp-soon { display: grid; line-height: var(--lh-title); }
.sp-soon small { white-space: nowrap; }
.sp-field { position: relative; display: grid; grid-template-rows: repeat(5, minmax(44px, 1fr)); padding-top: var(--sp-head); }
.sp-band { position: absolute; top: var(--sp-head); bottom: 0; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); border-inline: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, transparent), color-mix(in srgb, var(--gold) 5%, transparent)); }
.sp-tag { position: absolute; left: 50%; top: calc(4px - var(--sp-head)); translate: -50% 0; }
.sp-mid { position: absolute; left: 50%; top: var(--sp-head); bottom: 0; border-left: var(--dashed); }
.sp-axis { grid-column: 2; }

/* 2 · Buzz against the size of each daily move, revealed by a sweeping playhead */
.lv-wrap { position: relative; margin-top: auto; }
.lv-chart { width: 100%; height: auto; overflow: visible; }
.lv-tag { position: absolute; z-index: 1; translate: -50% -100%; }
.lv-axis { margin-bottom: var(--space-6); }
.lv-bar { fill: var(--line-2); }
.lv-bar.is-hit { fill: var(--graphite); }
.lv-link { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 4; }
.lv-peak { fill: var(--signal); stroke: var(--paper); stroke-width: 2; }
.lv-ring { fill: none; stroke: var(--signal); stroke-width: 1.5; opacity: 0; }
.lv-head { stroke: var(--gold); stroke-width: 2; opacity: 0; }
/* 3 · Agent session (site-2026.css): the note under it on where its examples come from */
.ag-src { margin-top: auto; }
.ag-src a { color: var(--dark-body); border-bottom: 1px solid var(--dark-line-2); transition: border-color var(--dur-fast) ease-out; }
@media (hover: hover) { .ag-src a:hover { border-color: currentColor; } }

/* 4 · A client's watchlist; the Adanos column group opens from 0fr beside the usual columns */
.wl-table { margin: var(--space-5) 0 var(--space-6); border-top: var(--border); }
.wl-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 0fr); align-items: center; border-bottom: var(--divider); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.wl.is-on .wl-row { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 3fr); }
.wl-row > span { min-width: 0; padding: var(--space-3) var(--space-2-5) var(--space-3) 0; white-space: nowrap; }
.wl-head > span, .wl-head .wl-ad > span { padding-block: var(--space-2-5); }
.wl-num { text-align: right; }
/* the Adanos group: one cell holding its own three columns, tinted so it reads as added data */
.wl-row > .wl-ad { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); align-self: stretch; align-items: center; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--gold) 8%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
.wl-ad > span { min-width: 0; padding: var(--space-3); white-space: nowrap; opacity: 0; }
.wl.is-on .wl-ad > span { opacity: 1; }
.wl-head .wl-ad > span:first-child { color: var(--signal-ink); }
.wl-buzz { display: flex; align-items: center; gap: var(--space-2); }
.wl-buzz .meter { flex: 1; }
.wl .meter i { scale: 0 1; }
.wl.is-on .meter i { scale: 1 1; }
.wl-buzz em { font-style: normal; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
    .sp-field { transition: --lo var(--dur-glide) var(--ease-out-expo), --hi var(--dur-glide) var(--ease-out-expo); }
    .lv .lv-clip { transform-box: fill-box; transform-origin: 0 50%; scale: 0 1; }
    .lv .lv-bar { transform-box: fill-box; transform-origin: 50% 100%; scale: 1 0; }
    .lv .lv-peak, .lv .lv-link, .lv .lv-tag { opacity: 0; }
    .lv .lv-tag { translate: -50% calc(-100% + 6px); filter: blur(4px); }
    .lv.is-playing .lv-clip { scale: 1 1; transition: scale 4600ms linear 200ms; }
    .lv.is-playing .lv-bar { scale: 1 1; transition: scale var(--dur-slow) var(--ease-out-expo) var(--t); }
    .lv.is-playing .lv-peak, .lv.is-playing .lv-link { opacity: 1; transition: opacity var(--dur) ease-out var(--t); }
    .lv.is-playing .lv-tag { opacity: 1; translate: -50% -100%; filter: none; transition-property: opacity, translate, filter; transition-duration: var(--dur); transition-timing-function: ease-out; transition-delay: var(--t); }
    .lv.is-playing .lv-head { animation: lv-sweep 4800ms linear 100ms both; }
    .lv.is-playing .lv-ring { transform-box: fill-box; transform-origin: center; animation: lv-ring 1400ms ease-out var(--t) 2; }
    @keyframes lv-sweep { 0% { opacity: 0; translate: 0 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; translate: var(--sweep, 592px) 0; } }
    /* the watchlist rows follow each other 100ms apart (--row is the row index) */
    .wl-row { transition: grid-template-columns var(--dur-slow) var(--ease-out-expo); }
    .wl-ad > span { transition: opacity var(--dur-fast) ease-out; }
    .wl.is-on .wl-ad > span { transition: opacity var(--dur) ease-out calc(250ms + var(--row, 0) * var(--stagger)); }
    .wl.is-on .meter i { transition: scale var(--dur-slow) var(--ease-out-expo) calc(350ms + var(--row, 0) * var(--stagger)); }
}

/* ---------- Coverage band (dark): the ticker universe left, one company's entity graph right ---------- */
.coverage { overflow: hidden; }
.cv-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-14); }
.cv-universe { display: flex; flex-direction: column; min-width: 0; }
.cv-cap { margin-top: var(--space-3-5); font-size: var(--text-lg); color: var(--ink); }
.cv-facts { margin-top: var(--space-3); font-size: var(--text-md); color: var(--ink-2); }
.cv-facts b { color: var(--paper); font-variant-numeric: tabular-nums; }
.cv-ex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--ink-2); }
/* three logo rows drifting in turn, the middle one the other way */
.cv-river { display: grid; gap: var(--space-3); margin-top: auto; padding-top: var(--space-10); }
.cv-row { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .cv-row:nth-child(2) .cv-track { animation-direction: reverse; }
}
/* the graph card: a post comes in, its alias lights up, a pulse runs to the ticker */
.cv-card { display: flex; flex-direction: column; min-width: 0; padding: var(--pad-lg); border-radius: var(--r-box); border: var(--border); background: var(--dark); }
.cv-post { display: flex; align-items: baseline; gap: var(--space-2-5); min-height: 24px; font-size: var(--text-md); color: var(--ink-2); white-space: nowrap; overflow: hidden; transition: opacity var(--dur) ease-out, translate var(--dur) ease-out; }
.cv-post.is-hidden { opacity: 0; translate: 0 6px; }
.cv-src { flex: none; }
.cv-txt { overflow: hidden; text-overflow: ellipsis; }
/* the AI context check under the post: green when the mention counts, red when the context rules it out */
.cv-check { display: flex; align-items: center; gap: var(--space-1-5); min-height: 20px; margin-top: var(--space-1); font-size: var(--text-xs); opacity: 0; transition: opacity var(--dur) ease-out; }
.cv-check.is-on { opacity: 1; }
.cv-check.is-ok { color: var(--bull); }
.cv-check.is-no { color: var(--bear); }
.cv-post.is-no mark { background: var(--dark-line); color: var(--ink-2); text-decoration: line-through; }
/* the stage holds the height the script gives it (twice its smallest reach of 165px) before the script runs, so the
   card does not grow while the page loads */
.cv-stage { position: relative; flex: 1; min-height: 330px; margin-top: var(--space-0-5); }
.cv-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv-edge { stroke: var(--dark-edge); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-slow) var(--ease-out-expo) var(--t), stroke var(--dur) ease-out; }
.cv-card.is-on .cv-edge { stroke-dashoffset: 0; }
.cv-edge.hit { stroke: var(--code-gold); }
.cv-dot { fill: var(--code-gold); }
.cv-center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: var(--space-1-5); text-align: center; }
.cv-center .plogo { transition: scale var(--dur) var(--ease-out-expo); }
.cv-center.hit .plogo { scale: 1.08; }
.cv-center b { font-size: var(--text-xl); line-height: var(--lh-tight); color: var(--ink); }
.cv-sub { font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }
.cv-plus { position: absolute; top: calc(-1 * var(--space-2-5)); left: calc(50% + 24px); padding: 1px var(--space-1-5); border-radius: var(--r-xs); background: var(--gold-gradient); color: var(--fill-ink); font-size: var(--text-xs); font-weight: var(--fw-medium); opacity: 0; translate: 0 6px; transition: opacity var(--dur) ease-out, translate var(--dur) ease-out; }
.cv-center.hit .cv-plus { opacity: 1; translate: 0 0; }
.cv-chip { position: absolute; translate: -50% -50%; font-variant-numeric: tabular-nums; opacity: 0; scale: 0.85; transition: opacity var(--dur) ease-out var(--t), scale var(--dur) var(--ease-out-expo) var(--t), border-color var(--dur) ease-out, color var(--dur) ease-out; }
.cv-card.is-on .cv-chip { opacity: 1; scale: 1; }
.cv-chip.hit { border-color: var(--code-gold); color: var(--code-gold); }
.cv-chip.miss { border-color: var(--bear); color: var(--bear); }
.cv-meta b { color: var(--ink); }
/* the companies are the kit's segmented control, a logo in each button */
.cv-tabs button { display: grid; place-items: center; }
/* the foot keeps the height of its line and of the filled tray (a small control in the 3px inset and 1px edge) before the
   script fills them */
.cv-meta { min-height: 1lh; }
.cv-tabs { min-height: calc(var(--h-control-sm) + 2 * 3px + 2px); }

/* ---------- Mood band (dark): retail crowd and smart money on one fear-greed scale ---------- */
/* both positions are numbers from 0 to 100; registered so the markers, the gap and the ruler glide together */
@property --retail { syntax: '<number>'; inherits: true; initial-value: 50; }
@property --smart { syntax: '<number>'; inherits: true; initial-value: 50; }
.mood { position: relative; overflow: hidden; }
/* ruler behind the scale, one hairline per point (drawn by home-2026.js) */
.ms-ruler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mood-inner { position: relative; }
/* the scale: retail marker above the bar, smart money below, the gap between them lit */
.ms-scale { position: relative; height: 300px; }
.ms-bar, .ms-gap, .ms-zones { position: absolute; top: 130px; height: 40px; }
.ms-bar, .ms-zones { left: 0; right: 0; }
/* fear end in slate, greed end in full gold */
.ms-bar { border-radius: var(--r); background: linear-gradient(90deg, color-mix(in srgb, var(--slate) 50%, transparent), color-mix(in srgb, var(--slate) 20%, transparent) 36%, var(--dark-fill-soft) 50%, color-mix(in srgb, var(--gold) 25%, transparent) 64%, color-mix(in srgb, var(--gold) 70%, transparent) 76%, var(--code-gold) 90%, var(--gold-light)); }
/* zone borders as on the index page: 26, 45, 56, 75 */
.ms-bar i { position: absolute; top: 8px; bottom: 8px; left: calc(var(--at) * 1%); width: 1px; background: var(--dark-edge); }
.ms-gap { left: calc(min(var(--retail), var(--smart)) * 1%); width: calc((max(var(--retail), var(--smart)) - min(var(--retail), var(--smart))) * 1%); background: var(--dark-edge); box-shadow: inset 0 1px var(--line-2), inset 0 -1px var(--line-2); }
.ms-zones span { position: absolute; top: 50%; left: calc(var(--at) * 1%); translate: -50% -50%; font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; }
.ms-zones span:last-child { color: var(--fill-ink); font-weight: var(--fw-medium); }
.ms-mark { position: absolute; z-index: 1; width: 0; height: 180px; display: flex; flex-direction: column; align-items: center; }
.ms-mark.retail { top: 0; left: calc(var(--retail) * 1%); }
.ms-mark.smart { top: 120px; left: calc(var(--smart) * 1%); flex-direction: column-reverse; }
.ms-mark > div { display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.ms-mark::after { content: ''; flex: 1; width: var(--indicator); border-radius: var(--r-pill); }
.ms-mark.retail::after { margin-top: var(--space-2); background: linear-gradient(to bottom, color-mix(in srgb, var(--code-gold) 20%, transparent), var(--code-gold)); }
.ms-mark.smart::after { margin-bottom: var(--space-2); background: linear-gradient(to top, color-mix(in srgb, var(--silver) 20%, transparent), var(--silver)); }
.ms-zone { margin-top: var(--space-0-5); font-size: var(--text-xs); }
.ms-read { display: flex; align-items: baseline; gap: var(--space-3-5); margin-top: var(--space-8); font-size: var(--text-xl); color: var(--ink-2); }
.ms-read b { color: var(--ink); }
.ms-date { font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.ms-foot { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); margin-top: var(--space-7); }
/* week stepper: the use-case tab treatment on dark, a progress line while it plays */
/* the weeks are the kit's tabs; the first label lines up with the content above, and while the band steps through the
   weeks on its own the chosen tab's line fills over one step */
.ms-weeks { margin-inline-start: calc(-1 * var(--tab-x)); font-variant-numeric: tabular-nums; }
.ms-weeks.is-auto button[aria-pressed="true"]::after { transform-origin: 0 50%; animation: ms-progress var(--step) linear both; }
@keyframes ms-progress { from { scale: 0 1; } }

/* ---------- Tools bento: CLI for agents, ticker database, widgets, rankings, insights ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.bt { position: relative; display: flex; flex-direction: column; gap: var(--space-3-5); min-width: 0; padding: var(--pad-lg); overflow: hidden; }
.bt-cli { grid-column: span 7; grid-row: span 2; }
.bt-db, .bt-wg, .bt-rk { grid-column: span 5; }
.bt-in { grid-column: span 7; }
.bt-copy { display: grid; gap: var(--space-2); }
.bt p:not(.bt-kick) { font-size: var(--text-md); color: var(--ink-2); text-wrap: pretty; }

/* CLI: agent chips wired into a live agent session */
.bt-cli { border-color: var(--graphite); background: var(--graphite); }
.bt-cli h3 { font-size: var(--text-2xl); }
.bt-cli .bt-kick { color: var(--ink-2); }
.bt-foot { display: flex; margin-top: auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cli-term { flex: 1; min-height: 270px; border-radius: var(--r); border: var(--border); overflow: hidden; }
.cli-out { flex: 1; padding: var(--space-3-5) var(--space-4); color: var(--dark-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.cli-out .p { color: var(--ink); }
.cli-out .p::before { content: '› '; color: var(--code-gold); }
.cli-out .c::before { content: '$ '; color: var(--muted); }
.cli-out .ok { color: var(--bull); }
.cli-out .j { color: var(--code-gold); }
.cli-out .o { color: var(--ink-2); }
.cli-caret { display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -3px; background: var(--paper); }

/* ticker database: a search that types real queries (name, ISIN, ticker) and lists the matches */
.db-search { border: var(--border); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.db-field { display: flex; align-items: center; gap: var(--space-2); height: var(--h-control); padding: 0 var(--space-3); border-bottom: var(--border); font-size: var(--text-md); color: var(--ink); }
.db-field .lc { color: var(--muted); }
.db-caret { width: 1.5px; height: 18px; margin-left: -6px; background: var(--ink); }
.db-hits { min-height: 104px; }
.db-hits li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2-5); height: var(--tr-row); padding: 0 var(--space-3); font-size: var(--text-sm); }
.db-hits li + li { border-top: var(--divider); }
.db-hits b { font-variant-numeric: tabular-nums; }
.db-hits .nm { display: grid; min-width: 0; line-height: var(--lh-title); }
.db-hits .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes db-hit { from { opacity: 0; translate: 0 6px; } }

/* widgets: a small browser with the ticker tape running */
.wg-browser { border: var(--border); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.wg-bar { background: var(--paper); }
/* the tape holds the height of one item before the script fills it, so the widgets card and the CLI card beside it
   keep their height while the page loads */
.wg-tape { overflow: hidden; min-height: calc(2 * var(--space-2) + var(--text-xs) * var(--lh-body) + 1px); border-bottom: var(--border); background: var(--paper); }
.wg-item { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-2) var(--space-3-5); border-right: var(--divider); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wg-page { display: grid; gap: var(--space-2); padding: var(--space-3-5); }
.wg-page i { height: var(--dot); border-radius: var(--r-pill); background: var(--line); }
.wg-page i:nth-child(2) { width: 78%; }
.wg-page i:nth-child(3) { width: 56%; }
.wg-code { display: block; padding: var(--space-2) var(--space-3-5); border-top: var(--border); background: var(--paper); font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
    .cli-caret, .db-caret { animation: caret 1s steps(1) infinite; }
    .is-paused :is(.cli-caret, .db-caret) { animation-play-state: paused; }
    .db-hits li { animation: db-hit var(--dur) var(--ease-out-expo) var(--t, 0ms) both; }
}
@keyframes caret { 50% { opacity: 0; } }

/* rankings: one source at a time, rows glide to their new rank */
/* the sources are the kit's segmented control; it may wrap on a narrow card */
.rk-src { flex-wrap: wrap; align-self: start; }
.rk-list li { display: grid; grid-template-columns: 16px 24px 58px minmax(0, 1fr) 36px 12px; align-items: center; gap: var(--space-2-5); height: 42px; border-bottom: var(--divider); font-size: var(--text-sm); font-variant-numeric: tabular-nums; background: var(--paper); }
.rk-v { text-align: right; }
.rk-t { font-size: var(--text-xs); text-align: center; }

/* insights: a stack of real articles, the front one slides away in turn */
.bt-in { flex-direction: row; gap: var(--space-8); }
.bt-in .bt-copy { flex: 0 0 36%; display: flex; flex-direction: column; }
.in-stack { position: relative; flex: 1; align-self: center; min-height: 224px; }
.in-card { position: absolute; left: 0; right: 0; top: var(--space-12); display: grid; align-content: start; gap: var(--space-2-5); min-height: 160px; padding: var(--pad); border: var(--border); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-card); transform-origin: 50% 0; transition: translate var(--dur-slow) var(--ease-out-expo), scale var(--dur-slow) var(--ease-out-expo), opacity var(--dur) ease-out; }
/* the front card is the first child; the next two peek out above it, the rest wait hidden */
.in-card:nth-child(1) { z-index: 4; }
.in-card:nth-child(2) { z-index: 3; translate: 0 calc(-1 * var(--space-4)); scale: 0.95; opacity: 0.8; }
.in-card:nth-child(3) { z-index: 2; translate: 0 calc(-1 * var(--space-8)); scale: 0.9; opacity: 0.5; }
.in-card:nth-child(n+4) { z-index: 1; translate: 0 calc(-1 * var(--space-12)); scale: 0.85; opacity: 0; }
.in-card.is-out { translate: calc(-1 * var(--space-12)) 0; opacity: 0; }
.in-card b { text-wrap: balance; transition: color var(--dur-fast) ease-out; }
@media (hover: hover) { .in-card:hover b { color: var(--signal-ink); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .machine { grid-template-columns: 1fr; }
    .stream { height: 330px; border-right: var(--border); border-bottom: 0; border-radius: var(--r-box) var(--r-box) 0 0; }
    .demo { border-radius: 0 0 var(--r-box) var(--r-box); box-shadow: 0 -18px 30px -24px rgb(26 26 26 / 0.25); }
    .cv-grid { grid-template-columns: 1fr; gap: var(--space-10); }
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bt-cli, .bt-rk, .bt-in { grid-column: 1 / -1; grid-row: auto; }
    .bt-db, .bt-wg { grid-column: span 1; }
    /* the stage sizes to its tallest view here, so the plot keeps fixed rows and sits centred instead of stretching */
    .sp-plot { flex: none; margin-block: auto; }
    .sp-labels, .sp-field { grid-template-rows: repeat(5, 52px); }
    .ms-foot { flex-direction: column; align-items: start; }
}
@media (max-width: 768px) {
    /* three example stocks leave room for the card and JSON switch on the same line */
    .demo .seg [data-ticker="AMD"] { display: none; }
    .stream { --label-w: 60px; }
    .lane-label span { display: none; }
    .wl-row { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 0fr); }
    .wl.is-on .wl-row { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 2fr); }
    .wl-vol, .wl-spread { display: none; }
    .wl-row > .wl-ad { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .wl-stock small { display: none; }
    .sp-plot { grid-template-columns: 108px minmax(0, 1fr); column-gap: var(--space-2-5); }
    .sp-labels > span { gap: var(--space-2); font-size: var(--text-xs); }
    /* the longest example post takes its source line and two lines of text */
    .cv-post { flex-direction: column; gap: var(--space-0-5); min-height: 3lh; white-space: normal; }
    .cv-meta { flex-basis: 100%; }
    .bento { grid-template-columns: 1fr; }
    .bt-in { flex-direction: column; }
    .bt-in .bt-copy { flex: none; }
    .in-stack { align-self: stretch; }
    .ms-scale { height: 250px; }
    .ms-bar, .ms-gap, .ms-zones { top: 105px; height: 34px; }
    .ms-mark { height: 145px; }
    .ms-mark.smart { top: 95px; }
    .ms-zones span:not(:first-child):not(:last-child) { display: none; }
    .ms-zones span:first-child { left: var(--space-2-5); translate: 0 -50%; }
    .ms-zones span:last-child { left: auto; right: var(--space-2-5); translate: 0 -50%; }
    .ms-read { flex-direction: column; gap: var(--space-1); font-size: var(--text-lg); }
}

@media (max-width: 400px) {
    .q-big-lbl { white-space: normal; }
    .q-score { flex-wrap: wrap; }
}