/* debyko.com — page styles on top of css/tokens.css.
   Values follow the design export one to one; class names say what an element is. */

/* DEBYKO colour system — generated from colour-tokens.js. One rule per token. */
:root {
  /* Neutrals — Everything that is not an action, the seal, a status or a data series is drawn in these. */
  --dk-ink: #05070C; /* Text and figures. May: Headings, body, every numeral, venue codes, axis labels, zero lines. Not: Never swapped for a hue to add emphasis — emphasis is weight. */
  --dk-ink-muted: #5F6064; /* Secondary text. May: Lead and descriptions, section labels and eyebrows, units, ages, meta. Not: Not the figure that answers the question; not links. */
  --dk-line: #E4E5E8; /* Hairlines. May: Table rules, grid lines, card and panel edges. Not: Not on anything whose border carries meaning — chips, inputs, buttons. */
  --dk-line-strong: #C9CACF; /* Control borders. May: Secondary-button and input borders, table-head underline. Not: Not text, not chart fills. */
  --dk-paper: #FFFFFF; /* Ground. May: Page, cards, tables, charts. Not: Never tinted — a coloured section is not a ground. */
  --dk-raised: #F6F6F7; /* One step up. May: Table head, code blocks, hovered row, inset panels. Not: One step only — raised on raised is not allowed. */
  /* Action — Magenta as in the site CSS. If it is magenta, it can be clicked, typed into or is focused. */
  --dk-action: #DE1A8C; /* Action fill. May: Primary-button fill, active-tab underline, selected toggle. Not: Not labels, eyebrows, chips, bars, lines, icons that do not act. */
  --dk-action-hover: #B8129F; /* Action, hovered or pressed. May: Hover and pressed state of an action fill. Not: Never at rest. */
  --dk-action-ink: #B8129F; /* Action text. May: Links, text buttons, the active tab’s label. Not: Not headings, section labels, LIVE, figures or status. */
  --dk-action-on: #FFFFFF; /* Text on action. May: The label inside a primary button. Not: Nowhere outside an action fill. */
  --dk-focus: #DE1A8C; /* Keyboard focus. May: 2 px outline, 1 px offset, on whatever has keyboard focus. Not: Never on hover, never decorative. */
  /* Seal — Seal slate from the OG card. Only the daily Merkle root on Base and what proves a row against it. */
  --dk-seal: #4A5060; /* The daily seal. May: Seal ring, proof badges, “sealed daily on Base”, anchors page, Merkle path and verification UI. Not: Nothing that is not about the seal; never as muted text. */
  --dk-seal-tint: #EDF0F6; /* Seal ground. May: Behind a proof badge, and a row shown as verified. Not: Not a general panel or highlight. */
  /* Status — Status chips and status columns only. Each state also has a shape: filled dot, ring, dashed edge, dash, hatch — and its label. */
  --dk-status-present: #047554; /* present. May: present chip: label, border, filled dot. Not: Not LIVE labels in copy, not positive values, not buttons or bars. */
  --dk-status-present-tint: #E5F9EF; /* present chip ground. May: Inside a present chip. Not: Not row or cell highlights. */
  --dk-status-stale: #965802; /* stale. May: stale chip: label, border, ring; the age printed in a stale cell. Not: Not general warnings, not negative values. */
  --dk-status-stale-tint: #FFF2DD; /* stale chip ground. May: Inside a stale chip. Not: Not row or cell highlights. */
  --dk-status-absent: #5F6064; /* missing · not_published · off. May: Label and border of those three chips; told apart by dashed edge, dash and hatch. Not: Nothing outside a status chip or column. Same value as ink-muted. */
  --dk-status-hatch: #B9BBC1; /* Nothing stored. May: off chip fill; intervals with no stored data in charts. Not: Never a zero, never a value’s fill. */
  /* Signed — Green and red stay out of data: green is present’s, red reads as loss. Blue / vermilion is the colour-blind-safe pair; the sign and the side of zero say it too. */
  --dk-signed-pos: #125FB3; /* Positive value. May: Positive funding and change: numerals and bars in a signed chart. Not: Not in a venue-keyed chart, not status, not actions. */
  --dk-signed-neg: #B13C11; /* Negative value. May: Negative funding and change: numerals and bars in a signed chart. Not: Not in a venue-keyed chart, not status, not actions. */
  /* Venues — Venue-keyed charts, their legends and the swatch beside a venue code. Never text, never chips, never in a chart that also uses signed or status colour. */
  --dk-venue-binance-usdm: #BE7C05; /* tier A */
  --dk-venue-bybit-perp: #B94834; /* tier A */
  --dk-venue-okx-perp: #2855AD; /* tier A */
  --dk-venue-hyperliquid: #048E7A; /* tier A */
  --dk-venue-bitget-perp: #0994BA; /* tier A */
  --dk-venue-gate-perp: #308328; /* tier A */
  --dk-venue-kraken-futures: #7854B6; /* tier A */
  --dk-venue-deribit: #7F7C03; /* tier A */
  --dk-venue-mexc-perp: #9F7562; /* tier B */
  --dk-venue-coinbase: #5F85A1; /* tier B */
  --dk-venue-dydx: #737EA5; /* tier B */
  --dk-venue-aster: #947C57; /* tier B */
  --dk-venue-weex: #878258; /* tier B */
  --dk-venue-gmx-v2: #538C8B; /* tier B */
  --dk-venue-avantis: #608C74; /* tier B */
  --dk-venue-synthetix: #87789F; /* tier B */
  --dk-venue-nado: #768761; /* tier B */
  --dk-venue-reserved: #548A97; /* tier B */
  --dk-venue-other: #8A8D94; /* tier other */
}
[data-theme="dark"] {
  /* Neutrals — Everything that is not an action, the seal, a status or a data series is drawn in these. */
  --dk-ink: #EDEFF3; /* Text and figures. May: Headings, body, every numeral, venue codes, axis labels, zero lines. Not: Never swapped for a hue to add emphasis — emphasis is weight. */
  --dk-ink-muted: #A8ABB0; /* Secondary text. May: Lead and descriptions, section labels and eyebrows, units, ages, meta. Not: Not the figure that answers the question; not links. */
  --dk-line: #262A33; /* Hairlines. May: Table rules, grid lines, card and panel edges. Not: Not on anything whose border carries meaning — chips, inputs, buttons. */
  --dk-line-strong: #3A3F4A; /* Control borders. May: Secondary-button and input borders, table-head underline. Not: Not text, not chart fills. */
  --dk-paper: #0E1116; /* Ground. May: Page, cards, tables, charts. Not: Never tinted — a coloured section is not a ground. */
  --dk-raised: #161A22; /* One step up. May: Table head, code blocks, hovered row, inset panels. Not: One step only — raised on raised is not allowed. */
  /* Action — Magenta as in the site CSS. If it is magenta, it can be clicked, typed into or is focused. */
  --dk-action: #DE1A8C; /* Action fill. May: Primary-button fill, active-tab underline, selected toggle. Not: Not labels, eyebrows, chips, bars, lines, icons that do not act. */
  --dk-action-hover: #EE2F72; /* Action, hovered or pressed. May: Hover and pressed state of an action fill. Not: Never at rest. */
  --dk-action-ink: #EE2F72; /* Action text. May: Links, text buttons, the active tab’s label. Not: Not headings, section labels, LIVE, figures or status. */
  --dk-action-on: #FFFFFF; /* Text on action. May: The label inside a primary button. Not: Nowhere outside an action fill. */
  --dk-focus: #EE2F72; /* Keyboard focus. May: 2 px outline, 1 px offset, on whatever has keyboard focus. Not: Never on hover, never decorative. */
  /* Seal — Seal slate from the OG card. Only the daily Merkle root on Base and what proves a row against it. */
  --dk-seal: #AAB5C8; /* The daily seal. May: Seal ring, proof badges, “sealed daily on Base”, anchors page, Merkle path and verification UI. Not: Nothing that is not about the seal; never as muted text. */
  --dk-seal-tint: #1D222A; /* Seal ground. May: Behind a proof badge, and a row shown as verified. Not: Not a general panel or highlight. */
  /* Status — Status chips and status columns only. Each state also has a shape: filled dot, ring, dashed edge, dash, hatch — and its label. */
  --dk-status-present: #5ED8A9; /* present. May: present chip: label, border, filled dot. Not: Not LIVE labels in copy, not positive values, not buttons or bars. */
  --dk-status-present-tint: #0E2A1F; /* present chip ground. May: Inside a present chip. Not: Not row or cell highlights. */
  --dk-status-stale: #F9BA5F; /* stale. May: stale chip: label, border, ring; the age printed in a stale cell. Not: Not general warnings, not negative values. */
  --dk-status-stale-tint: #33230A; /* stale chip ground. May: Inside a stale chip. Not: Not row or cell highlights. */
  --dk-status-absent: #A8ABB0; /* missing · not_published · off. May: Label and border of those three chips; told apart by dashed edge, dash and hatch. Not: Nothing outside a status chip or column. Same value as ink-muted. */
  --dk-status-hatch: #464B57; /* Nothing stored. May: off chip fill; intervals with no stored data in charts. Not: Never a zero, never a value’s fill. */
  /* Signed — Green and red stay out of data: green is present’s, red reads as loss. Blue / vermilion is the colour-blind-safe pair; the sign and the side of zero say it too. */
  --dk-signed-pos: #70B3F7; /* Positive value. May: Positive funding and change: numerals and bars in a signed chart. Not: Not in a venue-keyed chart, not status, not actions. */
  --dk-signed-neg: #F19266; /* Negative value. May: Negative funding and change: numerals and bars in a signed chart. Not: Not in a venue-keyed chart, not status, not actions. */
  /* Venues — Venue-keyed charts, their legends and the swatch beside a venue code. Never text, never chips, never in a chart that also uses signed or status colour. */
  --dk-venue-binance-usdm: #F1AF57;
  --dk-venue-bybit-perp: #F18A76;
  --dk-venue-okx-perp: #719DEF;
  --dk-venue-hyperliquid: #43D9BE;
  --dk-venue-bitget-perp: #49CFFC;
  --dk-venue-gate-perp: #7FC678;
  --dk-venue-kraken-futures: #B89BF5;
  --dk-venue-deribit: #C6C458;
  --dk-venue-mexc-perp: #B98D7A;
  --dk-venue-coinbase: #779EBA;
  --dk-venue-dydx: #8B97BE;
  --dk-venue-aster: #AD946E;
  --dk-venue-weex: #9F9A6F;
  --dk-venue-gmx-v2: #6BA4A4;
  --dk-venue-avantis: #78A48C;
  --dk-venue-synthetix: #9F90B8;
  --dk-venue-nado: #8EA078;
  --dk-venue-reserved: #6CA2B0;
  --dk-venue-other: #6B6F78;
}

html, body { margin: 0; background: var(--dk-surface-page); }
/* Components set display: flex/grid, which would beat the UA rule for [hidden]. */
[hidden] { display: none !important; }
a { color: var(--dk-text-accent); text-decoration: none; }
a:hover { opacity: .65; }
main { font-family: var(--dk-font-text); color: var(--dk-text-primary); }
button { font: inherit; }
svg { display: block; }
.icon { display: inline-block; flex: none; }
.spin { animation: dk-spin 1.4s linear infinite; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
/* One page width (task 312): the header's own container (chrome.css .dk-page), so the content's left edge is the logo's and its right
   edge the header's last item, on every page. A wide table scrolls inside its panel, never the page. */
.wrap { width: 100%; max-width: var(--dk-container); margin: 0 auto; padding-inline: var(--dk-page-pad); box-sizing: border-box; }
.section { border-top: 1px solid var(--dk-border-hairline); padding: 88px 0; }
.section--hero { border-top: 0; padding: 72px 0 64px; }
.section--panel { background: var(--dk-surface-panel); }
/* DQL is the product's core: the one full-width dark band on the page, like the OG card. */
.section--core { background: var(--dk-surface-page); color: var(--dk-text-primary); border-top: 0; }
.section--core + .section { border-top: 0; }
.h2--core { font-size: 40px; line-height: 1.08; }
@media (max-width: 720px) { .h2--core { font-size: 30px; } }
.core-lead { color: var(--dk-text-secondary); }
.pipe { display: flex; flex-direction: column; align-items: center; width: 100%; }
.pipe-node { width: 100%; border: 1px solid var(--dk-border-strong); background: var(--dk-surface-panel); padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.pipe-node--bot { border-style: dashed; }
.pipe-node--dql { border-color: var(--dk-accent); box-shadow: 0 0 0 1px var(--dk-accent) inset; }
.pipe-label { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dk-text-muted); }
.pipe-label--accent { color: var(--dk-text-accent); }
.pipe-ask { margin: 0; font: 500 17px/1.45 var(--dk-font-display); color: var(--dk-text-primary); }
.pipe-code { margin: 0; font: 400 14px/1.6 var(--dk-font-mono); color: var(--dk-text-primary); white-space: pre; overflow-x: auto; }
.pipe-code--box { font-size: 12px; border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 14px; }
.pipe-arrow { width: 1px; height: 34px; background: var(--dk-border-strong); position: relative; }
.pipe-arrow::after { content: ""; position: absolute; left: -4px; bottom: -1px; border: 4px solid transparent; border-top: 6px solid var(--dk-border-strong); border-bottom: 0; }
.pipe-venues { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pipe-venues span { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .08em; padding: 8px 10px; border: 1px solid var(--dk-border-strong); color: var(--dk-text-primary); }
.pipe-venues .pipe-venues__more { border-style: dashed; color: var(--dk-text-muted); }
.pipe-match-head { display: flex; align-items: baseline; gap: 14px; }
.pipe-match-inst { font: 700 20px/1 var(--dk-font-display); color: var(--dk-text-primary); }
.pipe-match-count { margin-left: auto; font: 400 13px/1 var(--dk-font-mono); color: var(--dk-text-muted); }
.pipe-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 150px; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--dk-border-hairline); font: 400 14px/1.2 var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.pipe-row__venue { font: 600 14px/1.2 var(--dk-font-display); color: var(--dk-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipe-row__venue small { font: 400 11px/1 var(--dk-font-mono); color: var(--dk-text-muted); }
.pipe-row__num, .pipe-row__age { text-align: right; }
.pipe-row__age { color: var(--dk-text-muted); }
.pipe-row__mark { text-align: right; color: var(--dk-text-accent); font-weight: 600; }
.pipe-row--stale .pipe-row__num { text-decoration: line-through; color: var(--dk-text-muted); }
.pipe-row--stale .pipe-row__mark { font-size: 10px; letter-spacing: .12em; color: var(--dk-text-primary); }
.pipe-note { margin: 0; font: 400 12px/1.5 var(--dk-font-text); color: var(--dk-text-muted); }
.pipe-raw summary { cursor: pointer; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-muted); }
.pipe-raw .pipe-code { font-size: 11px; margin-top: 10px; }
.pipe-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pipe-outs > div { border: 1px solid var(--dk-border-strong); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font: 500 14px/1.3 var(--dk-font-display); color: var(--dk-text-primary); }
.core-claim { margin: 0; text-align: center; font: 700 26px/1.25 var(--dk-font-display); letter-spacing: -.02em; color: var(--dk-text-primary); }
.core-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--dk-border-strong); }
.core-cards > div { padding: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.core-card__t { font: 600 11px/1.3 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-accent); }
.core-card__b { font: 400 14px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); }
.core-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 500 16px/1.4 var(--dk-font-display); color: var(--dk-text-primary); }
.arb { border: 1px solid var(--dk-border-strong); background: var(--dk-surface-panel); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.arb__inst { font: 700 20px/1 var(--dk-font-display); color: var(--dk-text-primary); }
.arb__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.arb__pair > div { display: flex; flex-direction: column; gap: 6px; }
.arb__pair > div:last-child { text-align: right; }
.arb__px { font: 400 24px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; color: var(--dk-text-primary); }
.arb__gap { position: relative; height: 22px; border: 1px solid var(--dk-accent); border-top: 0; display: flex; justify-content: center; }
.arb__gap span { position: absolute; bottom: -9px; background: var(--dk-surface-panel); padding: 0 8px; font: 600 14px/1 var(--dk-font-mono); color: var(--dk-text-accent); }
.arb__checks { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 400 12px/1.4 var(--dk-font-mono); color: var(--dk-text-secondary); }
.arb__out { display: flex; gap: 12px; align-items: baseline; border-top: 1px solid var(--dk-border-hairline); padding-top: 12px; font: 500 14px/1 var(--dk-font-display); color: var(--dk-text-primary); }
.core-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--dk-border-hairline); border: 1px solid var(--dk-border-hairline); }
.core-caps span { background: var(--dk-surface-page); padding: 14px 16px; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-primary); }
.core-price { margin: 0; font: 400 12px/1.5 var(--dk-font-mono); color: var(--dk-text-secondary); }
.core-price a { color: inherit; }
.core-screen .pipe-node--match { gap: 8px; }
.rates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--dk-border-strong); }
.rates > div { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.rates__v { font: 400 26px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.rates__k { font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-secondary); }
.pricing-row .offer__price { white-space: normal; }
.core-foot { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 900px) {
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .core-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .core-cards, .pipe-outs { grid-template-columns: minmax(0, 1fr); }
  .pipe-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pipe-row__age { grid-column: 1; text-align: left; }
  .pipe-row__mark { grid-column: 2; }
  .pipe-code { font-size: 12px; }
  .core-claim { font-size: 21px; }
  .arb__px { font-size: 18px; }
}

.stack { display: flex; flex-direction: column; min-width: 0; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.gap-18 { gap: 18px; } .gap-22 { gap: 22px; } .gap-26 { gap: 26px; } .gap-32 { gap: 32px; } .gap-48 { gap: 48px; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.row--baseline { align-items: baseline; }
.spacer { flex: 1; }

.split { display: grid; gap: 48px; }
.split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--6-6, .split--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.split--end { align-items: end; }
.split--start { align-items: start; }
.split--center { align-items: center; }

/* No measure classes and no text cap: a box sets the width and text fills it. */

/* ── Type ───────────────────────────────────────────────────────────────── */
.label { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); }
.label--accent { color: var(--dk-text-accent); }
.eyebrow { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dk-text-accent); }
.h1 { font: 700 44px/1.08 var(--dk-font-display); letter-spacing: -.025em; color: var(--dk-text-primary); margin: 0; text-wrap: pretty; }
.h2 { font: 700 30px/1.15 var(--dk-font-display); letter-spacing: -.02em; color: var(--dk-text-primary); margin: 0; text-wrap: pretty; }
.h2--small { font: 600 22px/1.25 var(--dk-font-display); letter-spacing: -.02em; }
.lead { font: 400 17px/1.6 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; text-wrap: pretty; }
.prose { font: 400 15px/1.65 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; text-wrap: pretty; }
.prose--sm { font: 400 14px/1.6 var(--dk-font-text); }
.product-name { font: 600 13px/1 var(--dk-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--dk-text-accent); }
.statement { font: 600 17px/1.4 var(--dk-font-display); letter-spacing: -.015em; color: var(--dk-text-primary); margin: 0; padding: 14px 0; border-top: 1px solid var(--dk-border-strong); border-bottom: 1px solid var(--dk-border-strong); }
.meta { font: 400 11px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); }
.meta-xs { font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.mono { font-family: var(--dk-font-mono); }
.num { font-family: var(--dk-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--dk-text-muted); }
.faint { color: var(--dk-text-faint); }
.accent { color: var(--dk-text-accent); }

/* Ruled lists: one fact per rule. */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-border-hairline); display: flex; flex-direction: column; }
.ruled--grid { display: grid; gap: 0 22px; }
.ruled--min-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ruled--min-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ruled--min-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ruled > li { padding: 9px 0; border-bottom: 1px solid var(--dk-border-hairline); font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); }
/* A list of statements (task 312): numbered rules instead of browser bullets. The number sits in a 40px column with a 14px gap,
   placed absolutely rather than as a grid track: an item mixes text and inline elements, and in a grid each would be its own cell. */
.ruled-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-border-strong); counter-reset: r; }
.ruled-list > li { position: relative; padding: 18px 0 18px 54px; border-bottom: 1px solid var(--dk-border-hairline); counter-increment: r; font: 400 15px/1.65 var(--dk-font-text); color: var(--dk-text-secondary); }
.ruled-list > li::before { position: absolute; left: 0; top: 21px; width: 40px; content: counter(r, decimal-leading-zero); font: 600 11px/1.9 var(--dk-font-mono); letter-spacing: .18em; color: var(--dk-text-accent); }

.price-line { display: flex; gap: 22px; align-items: baseline; }
.price-line__value { font: 400 15px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.price-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: baseline; }

/* ── Buttons (DS Button) ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--dk-control-h); padding: 0 14px; border-radius: 0;
  font: 600 var(--dk-text-xs)/1 var(--dk-font-mono); letter-spacing: var(--dk-track-label); text-transform: uppercase;
  cursor: pointer; transition: var(--dk-transition-control);
  background: var(--dk-surface-panel); color: var(--dk-text-primary); border: 1px solid var(--dk-border-hairline);
}
.btn > span { padding-top: 1px; }
.btn { white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--dk-surface-subtle); border-color: var(--dk-border-strong); }
.btn--primary { background: var(--dk-accent); color: var(--dk-accent-fg); border-color: transparent; }
.btn--primary:hover:not(:disabled) { background: var(--dk-accent-strong); border-color: transparent; }
.btn--ghost { background: transparent; color: var(--dk-text-secondary); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--dk-surface-subtle); border-color: transparent; }
.btn--sm { height: var(--dk-control-h-sm); padding: 0 10px; font-size: var(--dk-text-2xs); }
.btn--lg { height: var(--dk-control-h-lg); padding: 0 22px; font-size: var(--dk-text-sm); }
.btn--full { display: flex; width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
a.btn, a.btn:hover { opacity: 1; }

/* Links are not buttons (task 312): a row of places to go is a grid of ruled links with an arrow; .btn is for actions only. auto-fit, so
   one or two links fill their column instead of ending in an empty track. */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 26px; border-top: 1px solid var(--dk-border-strong); }
.link-grid > a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--dk-border-hairline); font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.link-grid > a::after { content: "\2192"; font: 400 13px/1 var(--dk-font-mono); color: var(--dk-text-accent); }
.link-grid > a:hover { opacity: .65; }
.link-grid > a[href^="http"]:not([href*="debyko.com"])::after { content: "\2197"; }
/* Long link names (every venue's page, 16 of them): four columns at the page width instead of five. */
.link-grid--wide { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.text-btn { background: none; border: 0; padding: 0 8px; cursor: pointer; font: 600 12px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-accent); }
.text-btn:hover { opacity: .65; }
.text-btn--sm { padding: 0; font-size: 11px; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #05070C; }

/* ── Chips ──────────────────────────────────────────────────────────────── */
/* DS StatusChip */
.status-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 2px;
  border: 1px solid var(--dk-border-strong); background: transparent; color: var(--dk-text-muted);
  font: 600 var(--dk-text-2xs)/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.status-chip > span { padding-top: 1px; }
.status-chip--sm { height: 17px; padding: 0 5px; font-size: 9px; }
.status-chip--accent { border-color: var(--dk-accent); background: var(--dk-accent-tint); color: var(--dk-text-accent); }

/* Source tag: where the figures on a panel came from */
.source-tag { font: 600 9px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; border: 1px solid currentColor; padding: 4px 6px; white-space: nowrap; }
.source-tag--live { color: var(--dk-text-primary); }
.source-tag--saved { color: var(--dk-text-muted); border-style: dashed; }
.source-tag--none { color: var(--dk-text-faint); border-style: dotted; }
/* A count that needs attention (failures, stale instruments, a failed request): weight, not hue. */
.is-alert { color: var(--dk-text-primary); font-weight: 600; }

.tag-box { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #05070C; border: 1px solid #05070C; padding: 4px 6px; }
.dataset-chip { font: 500 9px/1 var(--dk-font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 5px; border-radius: 2px; border: 1px solid var(--dk-border-hairline); color: var(--dk-text-faint); background: transparent; }
.dataset-chip--on { color: var(--dk-text-primary); border-color: var(--dk-border-strong); background: var(--dk-surface-subtle); }
.dataset-chip--more { color: var(--dk-text-muted); border-color: transparent; }
/* ── Status layer: rank and state, told by form (designer spec "Arena Status Layer", 2026-09-17) ──
   Green and red are gone from the tables: fill, border weight, border style and a line through the
   word carry the difference, so every state survives greyscale and colour-vision deficiency.
   --dk-rank-best / --dk-rank-worst have no consumer any more; the tokens stay defined. */
.ar-chip{display:inline-flex;align-items:center;gap:6px;height:14px;padding:0 4px;margin:0;
  border:1px solid transparent;border-radius:2px;background:transparent;
  font:600 9px/1 var(--dk-font-mono);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;color:var(--dk-text-muted);vertical-align:middle}
button.ar-chip{cursor:help}
.ar-chip__dot{flex:none;width:4px;height:4px;border-radius:50%;background:currentColor}
.ar-chip__lbl{opacity:.6;letter-spacing:.1em}
.ar-chip__val{font-weight:400;letter-spacing:.04em;text-transform:none}
/* LIVE: no border, a 4px dot (drawn here, so no markup has to remember it) — the quietest mark. */
.ar-chip--live{padding-left:0;border-color:transparent;color:var(--dk-text-muted)}
.ar-chip--live::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:currentColor}
.ar-chip--delayed{border-color:var(--dk-border-strong);color:var(--dk-text-primary);
  background:linear-gradient(90deg,var(--dk-border-hairline) 0 50%,transparent 50%)}
.ar-chip--stale{border-color:var(--dk-surface-invert);background:var(--dk-surface-invert);
  color:var(--dk-text-invert);text-decoration:line-through;text-decoration-thickness:1px}
.ar-chip--unsupported{border-color:var(--dk-border-hairline);color:var(--dk-text-muted);
  background-image:repeating-linear-gradient(45deg,var(--dk-hatch) 0 1px,transparent 1px 5px)}
.ar-chip--notcollected{border-style:dotted;border-color:var(--dk-border-strong);
  color:var(--dk-text-faint)}
/* MISSING is not in the spec's eight: this snapshot carried no value. Solid hairline, faint label —
   between NOT COLLECTED's dotted line and WORST's muted outline. */
.ar-chip--missing{border-color:var(--dk-border-hairline);color:var(--dk-text-faint)}
/* INCONSISTENT (the hero, 2026-10-01): a crossed book, bid not below ask. A grey outline and the word — no fill and no
   line through it, which are STALE's; a value that is present and cannot be ranked, not one that is old. */
.ar-chip--inconsistent{border-color:var(--dk-border-strong);color:var(--dk-text-muted)}
/* HALTED (2026-10-08): the venue says the listing is not tradeable; its figures are the venue's last. A dashed outline and the word —
   no fill and no line through it, which are STALE's: the value is not old by our clock, the market behind it is shut. */
.ar-chip--halted{border-style:dashed;border-color:var(--dk-text-primary);color:var(--dk-text-primary)}
.ar-chip--migrated{border-style:dashed;border-color:var(--dk-border-strong);color:var(--dk-text-muted)}
.ar-chip--best{border-color:var(--dk-accent);background:var(--dk-accent);color:#FFF}
.ar-chip--worst{border-color:var(--dk-text-muted);color:var(--dk-text-muted)}
.ar-chip--tie{border-color:var(--dk-accent);background:var(--dk-accent);color:#FFF}
.ar-chip__x{margin-left:3px;font-size:9px;letter-spacing:.04em;opacity:.72;font-weight:400}
.ar-chip[data-tip]{cursor:help}
/* The reserved slot. FIXED width, never min-width: a floor lets BEST ×2 grow the slot on tie rows
   only, and those rows' digits then leave the column. 58px is the widest chip the table renders;
   overflow stays visible so a wider one shows rather than silently shifting the column. */
.ar-rank-slot{display:inline-flex;width:58px;min-width:58px;max-width:58px;flex:none;
  justify-content:flex-start;margin-left:8px;overflow:visible;vertical-align:middle}
/* Sortable head: the indicator sits in a reserved slot, so the tracking never shifts */
.ar-sort{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ar-sort__ind{flex:none;width:9px;text-align:center;font-size:9px;line-height:1;opacity:0;
  transition:opacity var(--dk-dur-fast) var(--dk-ease-standard)}
.ar-sort:hover .ar-sort__ind,.ar-sort:focus-visible .ar-sort__ind{opacity:.4}
.ar-sort[aria-sort="ascending"] .ar-sort__ind,.ar-sort[aria-sort="descending"] .ar-sort__ind{
  opacity:1;color:var(--dk-text-accent)}
.ar-sort[aria-sort="ascending"],.ar-sort[aria-sort="descending"]{color:var(--dk-text-primary)}
/* Column control */
.ar-cols{position:relative;display:inline-flex}
.ar-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:236px;
  background:var(--dk-surface-panel);border:1px solid var(--dk-border-hairline);
  box-shadow:var(--dk-shadow-popover,0 8px 24px rgba(5,7,12,.12))}
.ar-pop__row{display:flex;align-items:center;gap:10px;padding:7px 12px;
  font:400 12px/1 var(--dk-font-mono);letter-spacing:.06em;color:var(--dk-text-primary);
  border-bottom:1px solid var(--dk-border-hairline)}
button.ar-pop__row{width:100%;margin:0;background:none;border-width:0 0 1px;text-align:left;cursor:pointer}
button.ar-pop__row:hover{background:var(--dk-surface-subtle)}
.ar-pop__row[aria-disabled="true"]{color:var(--dk-text-muted);cursor:default}
.ar-pop__box{flex:none;width:12px;height:12px;border:1px solid var(--dk-border-strong);
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#FFF}
.ar-pop__box--on{background:var(--dk-accent);border-color:var(--dk-accent)}
.ar-pop__row[aria-disabled="true"] .ar-pop__box--on{background:var(--dk-text-faint);border-color:var(--dk-text-faint)}
.ar-pop__note{margin-left:auto;font-size:10px;color:var(--dk-text-faint)}
.ar-pop__foot{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;
  font:600 10px/1 var(--dk-font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dk-text-muted)}
.ar-pop__foot button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--dk-text-accent);cursor:pointer}
.ar-tip{position:fixed;z-index:50;width:236px;padding:9px 11px;pointer-events:none;
  background:var(--dk-surface-invert);color:var(--dk-text-invert);
  font:400 11px/1.5 var(--dk-font-mono);letter-spacing:.03em;text-transform:none;
  white-space:normal;text-align:left;
  box-shadow:var(--dk-shadow-popover,0 8px 24px rgba(5,7,12,.12))}
.btn--active{border-color:var(--dk-accent)}
.lm-table-head{flex-wrap:wrap;gap:10px}
.venue__id{display:flex;align-items:center;gap:9px}
.venue__mark{flex:none;display:block;width:18px;height:18px;filter:grayscale(1);opacity:.78}
/* Several marks are near-black; on the dark theme every mark becomes a flat light silhouette. */
[data-theme="dark"] .venue__mark{filter:grayscale(1) brightness(0) invert(1);opacity:.45}
/* In-row sparkline (spec section 4): 72 × 20 beside bid/ask, one 1px neutral stroke (never the
   accent), no axis, label or fill; gaps break the line; no history is an empty cell. */
.spark-cell{padding:0 8px;width:72px;vertical-align:middle}
.ar-spark{display:block}
.ar-spark path{fill:none;stroke:#33383F;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
[data-theme="dark"] .ar-spark path{stroke:var(--dk-text-muted)}
/* Arena history chart (Lightweight Charts) and its crosshair tooltip */
.lm-lw{position:relative;height:150px}
.lm-tip{position:fixed;z-index:50;min-width:190px;max-width:300px;padding:8px 10px;pointer-events:none;
  background:var(--dk-surface-invert);color:var(--dk-text-invert);
  font:400 11px/1.45 var(--dk-font-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:var(--dk-shadow-popover,0 8px 24px rgba(5,7,12,.12))}
.lm-tip__t{margin-bottom:5px;opacity:.72}
.lm-tip__grid{display:grid;grid-template-columns:auto auto;gap:1px 14px}
.lm-tip__v{text-align:right}

/* ── Arena table geometry (designer handoff "Arena Handoff", iteration 4, 2026-09-17) ──────────
   Scoped to .lm-table--arena: the homepage keeps the stacked pairs and its auto layout until its
   own pass. Fixed layout plus a <colgroup> rebuilt from the visible groups is what holds the
   columns still across a response; .lm-table carries NO min-width, because under table-layout:fixed
   a pinned floor is distributed over whatever <col>s exist and re-inflates the table the moment a
   group is hidden. */
.lm-table--arena{table-layout:fixed;width:100%;min-width:0}
.lm-table--arena col.c-venue{width:198px}
.lm-table--arena col.c-quote{width:296px}
.lm-table--arena col.c-spark{width:88px}
.lm-table--arena col.c-spread{width:139px}
.lm-table--arena col.c-ref{width:178px}
.lm-table--arena col.c-fund{width:112px}
.lm-table--arena col.c-oi{width:178px}
.lm-table--arena col.c-depth{width:177px}
.lm-table--arena col.c-time{width:110px}
.lm-table--arena col.c-age{width:188px}
/* Two head tiers, each one line of a data row's height; heads wrap inside their column, never spill. */
.lm-table--arena thead th{padding:5px 8px;white-space:normal;vertical-align:bottom}
.lm-table--arena td,.lm-table--arena tbody th{padding:5px 8px}
.lm-table--arena tr.quote-row th{padding:4px 8px}
.lm-table--arena td.venue{padding:5px 8px;height:auto}
/* Paired columns — two equal tracks shared by the cells AND their head, so bid and ask sit on one
   axis whatever decimals a venue publishes. The grid must sit on .pair__grid, never on the th:
   display:grid replaces the table-cell box and the head stops stretching to the row. */
.lm-table--arena .fig-pair{display:grid;grid-template-columns:1fr 1fr;align-items:baseline;gap:0}
.lm-table--arena .fig-pair>.fig{justify-content:flex-end;min-width:0;padding-right:12px}
.lm-table--arena .fig-pair>.fig+.fig{padding-left:12px;padding-right:0;
  border-left:1px solid var(--dk-border-hairline)}
.lm-table--arena .fig-pair .fig__unit{display:none}
.lm-table--arena thead th.pair{display:table-cell;vertical-align:bottom}
.lm-table--arena thead th.pair .pair__grid{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0}
.lm-table--arena thead th.pair .pair__grid>span{display:block;text-align:right;padding-right:12px;min-width:0}
.lm-table--arena thead th.pair .pair__grid>span+span{padding-left:12px;padding-right:0}
/* Ages — three equal tracks. minmax(0,1fr), not 1fr: 1fr is minmax(auto,1fr) and floors each track
   at its own chip, so the three drift row by row and overflow. */
.lm-table--arena .fig-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:0}
.lm-table--arena .fig-chips .ar-chip{padding:0 3px;justify-content:flex-end}
/* Identity cell — name and state on line one, the venue's own symbol on line two. */
/* The handoff aligns the mark to flex-start; against a two-line cell that reads as pinned to the
   top edge, so it is centred on the name-plus-symbol block instead. */
.lm-table td.venue .venue__id{display:flex;align-items:center;gap:7px}
.lm-table td.venue .venue__id>span{display:grid;gap:1px;min-width:0}
/* Centre, not baseline: LIVE has no border and DELAYED and STALE do, and a bordered inline-flex box
   carries a different baseline — under align-items:baseline the venue name jumped up and down as a
   row changed state. */
.lm-table td.venue .venue__id>span>:first-child{display:flex;align-items:center;gap:7px;min-height:16px}
.lm-table--arena td.venue small{display:block;margin:0;font:400 9px/1.3 var(--dk-font-mono);
  letter-spacing:.1em;color:var(--dk-text-muted);white-space:nowrap}
.lm-table td.venue .row-status{margin:0}
.venue__mark--letter{flex:none;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--dk-border-hairline);
  font:600 9px/1 var(--dk-font-mono);color:var(--dk-text-faint);letter-spacing:0}
/* Scroll hint at the clipped edge: the panel ground fading in from its own colour at zero alpha,
   never a shadow — a transparent stop of another hue leaves a grey cast on premultiplying engines. */
.scroll-x{position:relative}
.scroll-x__hint{position:absolute;top:0;right:0;bottom:0;width:24px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--dk-surface-panel) 100%);
  opacity:0;transition:opacity 90ms cubic-bezier(.2,0,.38,1)}
.scroll-x[data-clipped="true"] .scroll-x__hint{opacity:1}

/* ── Form controls (DS Input / Select / SegmentedControl) ───────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: var(--dk-type-label); letter-spacing: var(--dk-track-label); text-transform: uppercase; color: var(--dk-text-faint); }
.field__box { position: relative; display: flex; align-items: center; gap: 8px; height: var(--dk-control-h); padding: 0 10px; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-radius: 0; transition: var(--dk-transition-control); }
.field__box:focus-within { border-color: var(--dk-border-strong); box-shadow: inset 0 -2px 0 0 var(--dk-accent); }
.field__box--lg { height: var(--dk-control-h-lg); }
.field__box--disabled { background: var(--dk-surface-subtle); }
.field__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dk-text-primary); font: 400 var(--dk-text-sm)/1.2 var(--dk-font-text); }
.field__box input.is-mono { font: var(--dk-type-num); font-variant-numeric: tabular-nums; text-align: right; }
.field__unit { font: var(--dk-type-meta); color: var(--dk-text-faint); }
.field__box--select { padding: 0; }
.field__box select { appearance: none; width: 100%; height: 100%; padding: 0 30px 0 10px; border: 0; outline: 0; background: transparent; color: var(--dk-text-primary); font: 400 var(--dk-text-sm)/1 var(--dk-font-mono); cursor: pointer; }
.field__box--select .icon { position: absolute; right: 9px; color: var(--dk-text-faint); pointer-events: none; }
.field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 8px 10px; font: 400 13px/1.5 var(--dk-font-mono); color: var(--dk-text-primary); resize: vertical; border-radius: 0; }

.segmented { display: inline-flex; gap: 4px; }
.segmented button { white-space: nowrap; height: 26px; padding: 0 8px; border: 1px solid var(--dk-border-hairline); background: transparent; color: var(--dk-text-muted); border-radius: 2px; font: 400 var(--dk-text-xs)/1 var(--dk-font-mono); cursor: pointer; transition: var(--dk-transition-control); }
.segmented button[aria-pressed="true"] { border-color: var(--dk-accent); background: var(--dk-accent-tint); color: var(--dk-text-accent); }
.segmented button:disabled { opacity: .4; cursor: not-allowed; }

/* ── State block (DS StateBlock) ────────────────────────────────────────── */
.state-block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 26px; border: 1px dashed var(--dk-border-hairline); background: var(--dk-surface-inset); }
.state-block .icon { color: var(--dk-text-faint); }
.state-block__title { font: 600 var(--dk-text-md)/1.3 var(--dk-font-display); color: var(--dk-text-secondary); }
.state-block__body { font: var(--dk-type-prose); color: var(--dk-text-faint); }
.state-block--compact { gap: 6px; padding: 18px 14px; }
.state-block--compact .state-block__title { font-size: var(--dk-text-sm); }
.state-block--tall { min-height: 280px; }

/* ── Panels and tables ──────────────────────────────────────────────────── */
.panel { border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); min-width: 0; }
.panel--strong { border-color: var(--dk-border-strong); background: var(--dk-surface-page); }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.panel__head--roomy { padding: 10px 14px; }
.panel__note { padding: 8px 14px; font: 400 10px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); border-top: 1px solid var(--dk-border-hairline); }
.panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--dk-border-hairline); font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }
.scroll-x { overflow-x: auto; }

.tbl { border-collapse: collapse; width: 100%; }
.tbl th { padding: 6px 10px; text-align: left; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); border-bottom: 1px solid var(--dk-border-strong); white-space: nowrap; }
.tbl--head-bg th { background: var(--dk-surface-head); padding: 6px 8px; }
.tbl--roomy th { padding: 7px 10px; }
.tbl th:first-child { padding-left: 14px; }
.tbl th:last-child { padding-right: 14px; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl th.w15 { min-width: 15ch; } .tbl th.w17 { min-width: 17ch; }
/* The row owns its height (task 312): every cell, not only a venue cell, so a table without .td-venue does not collapse to its text. */
.tbl td { padding: 0 10px; height: 34px; border-bottom: 1px solid var(--dk-border-hairline); vertical-align: middle; }
.tbl--dense td { height: 26px; }
.tbl--roomy td { height: 40px; }
.tbl td.l, .tbl th.l { text-align: left; }
.tbl td:first-child { padding-left: 14px; }
.tbl td:last-child { padding-right: 14px; }
.tbl .td-venue { font: 600 13px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.tbl .td-sym { font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; }
.tbl .td-num { text-align: right; font: 400 13px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .td-mono { font: 400 12px/1 var(--dk-font-mono); white-space: nowrap; }
/* Long free text (an error message) wraps inside its cell rather than widening the table. */
.tbl .wrap-cell { white-space: normal; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; min-width: 16ch; }
.status-note { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--dk-text-muted); }
.tbl .td-cell { padding: 0; text-align: right; }
.tbl .th-accent { color: var(--dk-text-accent); border-bottom: 2px solid var(--dk-accent); }
.min-460 { min-width: 460px; } .min-640 { min-width: 640px; } .min-900 { min-width: 900px; }
/* A sort button in a head cell reads as the head's own label, not as a browser button. */
.tbl th button { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.tbl th button:focus-visible { outline: 1px solid var(--dk-accent); outline-offset: 2px; }
.tbl th[aria-sort="ascending"], .tbl th[aria-sort="descending"] { color: var(--dk-text-primary); }
.tbl th[aria-sort="ascending"] button::after { content: " \2191"; } .tbl th[aria-sort="descending"] button::after { content: " \2193"; }
/* A figure with its base amount under it (the open interest hub). */
.tbl .td-num small { display: block; margin-top: 3px; font: 400 10px/1.3 var(--dk-font-mono); color: var(--dk-text-muted); }
/* Wide tables (the hubs, 18 columns): they scroll inside their panel, the first column stays put with a hairline on its right, nothing
   wraps and no font shrinks. Separate borders, because a collapsed border belongs to the table and would not move with a sticky cell. */
.tbl--pinned { border-collapse: separate; border-spacing: 0; }
.tbl--pinned th, .tbl--pinned td { white-space: nowrap; }
.tbl--pinned th.r { min-width: 9ch; }
.tbl--pinned th:first-child, .tbl--pinned td:first-child { position: sticky; left: 0; z-index: 1; background: var(--dk-surface-panel); border-right: 1px solid var(--dk-border-hairline); }
.scroll-x--tall > .tbl > thead th { position: sticky; top: 0; z-index: 2; background: var(--dk-surface-panel); }
.scroll-x--tall > .tbl--pinned > thead th:first-child { z-index: 3; }

/* Figure buttons: every live figure opens its provenance */
.fig { background: none; border: 0; margin: 0; display: block; width: 100%; padding: 6px; cursor: help; text-align: right; font: 400 12px/1.3 var(--dk-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--dk-text-primary); }
.fig__unit { color: var(--dk-text-faint); font-size: 10px; margin-left: 4px; }
/* A figure splits into integer and fraction so a column's decimal points line up: the integer box is
   right-aligned, the fraction box left-aligned, both as wide as the widest the column has shown. */
/* The market tabs above the hero table. */
.lm-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--dk-border-hairline); }
.lm-tabs__quotes { margin-left: auto; }
.lm-tabs button { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .12em; }
.num { display: inline-flex; align-items: baseline; }
.num__i { font-style: normal; text-align: right; }
.num__f { font-style: normal; text-align: left; }
.ar-chip__word { display: inline-block; text-align: left; }
/* The hero's age cell holds one shape whatever the status is: LIVE draws a dot and no box, DELAYED
   and STALE draw a bordered one, and the difference in padding and border moved the whole cell on
   every poll. One box, one width, the value and the word right where they were. */
.slice-table .fig--chip .ar-chip { display: inline-flex; justify-content: flex-end; gap: 6px;
  border: 1px solid transparent; padding: 0 4px; min-width: 15ch; }
.slice-table .fig--chip .ar-chip--live { padding-left: 4px; }
/* Every chip keeps the dot's slot, painted only for LIVE: without it the dot pushed the age and the
   status word sideways the moment a row went from LIVE to DELAYED. */
.slice-table .fig--chip .ar-chip::before { content: ""; flex: none; width: 4px; height: 4px;
  border-radius: 50%; background: transparent; margin-right: 0; }
.slice-table .fig--chip .ar-chip--live::before { background: currentColor; }
/* The rule above clears every chip's border to keep one box; INCONSISTENT has no fill to tell it by, so it takes its outline back. */
.slice-table .fig--chip .ar-chip--inconsistent { border-color: var(--dk-border-strong); }
/* HALTED takes its dashed outline back the same way (the venue does not trade the listing; the figures are its last). */
.slice-table .fig--chip .ar-chip--halted { border-style: dashed; border-color: var(--dk-text-primary); }
/* A listing the registry lists and the platform does not collect: a grey caption where the age chip would stand — no fill, no line
   through it, which MISSING (collected, and nothing came) has. A chip's height, so the row does not change height. */
.slice-table .lm-note { display: inline-flex; align-items: center; height: 14px; padding: 0 4px; white-space: nowrap;
  font: 400 10px/1 var(--dk-font-mono); letter-spacing: .04em; color: var(--dk-text-muted); }
/* Fixed unit widths in characters of the unit's own font, left-aligned, so numbers share a right edge. */
.fig__unit.u3, .arena-table .unit.u3 { display: inline-block; width: 3ch; text-align: left; }
.fig__unit.u5, .arena-table .unit.u5 { display: inline-block; width: 5ch; text-align: left; }
.fig__unit.u7, .arena-table .unit.u7 { display: inline-block; width: 7ch; text-align: left; }
.fig__unit.u9, .arena-table .unit.u9 { display: inline-block; width: 9ch; text-align: left; }
.fig.is-empty { color: var(--dk-text-faint); }
.fig.is-stale { color: var(--dk-fresh-stale); }
.fig--chip { display: flex; justify-content: flex-end; }
.fig--stack { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 5px 6px; font-size: 11px; }
.fig-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 6px; }
.fig-chips button { margin: 0; cursor: help; }
.fig-chips .ar-chip { font-size: 9px; }

/* ── Header ─────────────────────────────────────────────────────────────── */

/* ── Principles ─────────────────────────────────────────────────────────── */
.numbered { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dk-border-strong); }
.numbered li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--dk-border-hairline); align-items: baseline; }
.numbered__n { font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.numbered__t { font: 600 17px/1.35 var(--dk-font-display); letter-spacing: -.015em; color: var(--dk-text-primary); text-wrap: pretty; }

.notes-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; font: 400 12px/1.5 var(--dk-font-mono); color: var(--dk-text-muted); }
.notes-3 > div { border-top: 1px solid var(--dk-border-strong); padding-top: 8px; }

/* ── Studio Pro workstation ─────────────────────────────────────────────── */
.workstation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); }
.workstation > .cell { min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--dk-border-hairline); }
.workstation > .cell--left { border-right: 1px solid var(--dk-border-hairline); }
.cell__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.hours { display: flex; flex-direction: column; gap: 5px; }
.hours__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; }
.hours__venue { font: 600 11px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.hours__strip { display: block; width: 100%; height: 20px; overflow: visible; }
.hours__axis { display: flex; justify-content: space-between; font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; font: 400 10px/1.5 var(--dk-font-mono); color: var(--dk-text-muted); }
.legend-row > span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; display: inline-block; }
.swatch--observed { background: rgba(5,7,12,.9); }
.swatch--not-observed { border: 1px solid var(--dk-border-strong); }
.swatch--not-collected { border: 1px solid var(--dk-border-hairline); }
.swatch--mark { width: 5px; height: 5px; background: var(--dk-accent); }
.candles { position: relative; }
.candles svg { width: 100%; height: 150px; }
.candles .grid { stroke: #E6E6E9; vector-effect: non-scaling-stroke; }
.candles .wick { stroke: #33383F; vector-effect: non-scaling-stroke; }
.candles .rise, .candles .fall { stroke: #05070C; vector-effect: non-scaling-stroke; }
.candles .rise { fill: #FFFFFF; } .candles .fall { fill: #05070C; }
.chart-flag { position: absolute; top: 6px; font: 600 9px/1.4 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-primary); background: var(--dk-surface-panel); padding: 2px 5px; border: 1px solid var(--dk-border-strong); }
.snippet { margin: 0; padding: 14px; font: 400 11px/1.6 var(--dk-font-mono); color: var(--dk-text-primary); overflow-x: auto; background: var(--dk-surface-inset); flex: 1; }

/* ── Dark concept panels (Studio Trader, Agent) ─────────────────────────── */
.dark-panel { border: 1px solid #1E2430; background: #0E1116; color: #EDEFF3; position: relative; min-width: 0; }
.dark-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #1E2430; background: #161A22; }
.dark-label { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: #9BA6B8; }
.dark-label--sm { font-size: 10px; letter-spacing: .14em; color: #6D7583; }
.dark-tag { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #EDEFF3; border: 1px solid #EDEFF3; padding: 4px 6px; }
.dark-tag--sm { font-size: 9px; padding: 3px 5px; }
.dark-meta { font: 400 10px/1 var(--dk-font-mono); color: #9BA6B8; }
.dark-note { font: 400 11px/1.5 var(--dk-font-mono); color: #6D7583; }
.trader { padding: 26px; display: flex; flex-direction: column; gap: 26px; }
.trader__big { font: 400 40px/1 var(--dk-font-mono); font-variant-numeric: tabular-nums; color: #6D7583; letter-spacing: -.01em; }
.trader__big small { font-size: 18px; }
.trader__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trader__quote { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #1E2430; padding-top: 10px; }
.trader__quote .value { font: 400 22px/1 var(--dk-font-mono); color: #6D7583; }

.agent-console { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); border: 1px solid #1E2430; background: #0E1116; color: #EDEFF3; }
.agent-console__side { border-right: 1px solid #1E2430; border-bottom: 1px solid #1E2430; display: flex; flex-direction: column; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; padding: 14px; font: 400 12px/1.4 var(--dk-font-mono); border-bottom: 1px solid #1E2430; }
.kv__k { color: #6D7583; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding-top: 2px; }
.params { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; font: 400 12px/1.4 var(--dk-font-mono); }
.params__k { color: #C6CCD8; }
.journal { overflow-x: auto; padding: 8px 0; }
.journal__line { display: grid; grid-template-columns: 150px 92px 84px minmax(0, 1fr); gap: 14px; padding: 5px 14px; font: 400 12px/1.5 var(--dk-font-mono); white-space: nowrap; }
.journal__line--warn { background: rgba(238,47,114,.08); }
.journal__t { color: #9BA6B8; } .journal__id { color: #6D7583; }
.journal__k { color: #9BA6B8; font-weight: 600; letter-spacing: .1em; font-size: 10px; padding-top: 2px; }
.journal__k--decide { color: #EDEFF3; } .journal__k--warn { color: #EE2F72; }
.journal__m { color: #EDEFF3; white-space: normal; }
[data-theme="dark"] .status-chip--accent { color: #EE2F72; }

/* ── Execution evidence, offers, services, pricing ──────────────────────── */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 22px; padding: 14px; border-bottom: 1px solid var(--dk-border-hairline); }
.fact { display: flex; flex-direction: column; gap: 6px; }
.fact__k { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.fact__v { font: 400 13px/1.3 var(--dk-font-mono); overflow-wrap: anywhere; }
.method-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; padding: 14px; border-top: 1px solid var(--dk-border-hairline); font: 400 12px/1.55 var(--dk-font-mono); color: var(--dk-text-muted); }
.method-notes b { color: var(--dk-text-primary); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.age-col { background: var(--dk-accent-tint); }

.offer-list { display: flex; flex-direction: column; }
.offer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) 230px 150px; gap: 22px; padding: 16px 0; border-bottom: 1px solid var(--dk-border-hairline); align-items: center; }
.offer--head { padding: 0 0 10px; border-bottom-color: var(--dk-border-strong); font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.offer--top { border-bottom: 0; border-top: 1px solid var(--dk-border-hairline); }
.offer__name { font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; }
.offer__desc { font: 400 13px/1.5 var(--dk-font-text); color: var(--dk-text-secondary); }
.offer__price { font: 400 13px/1.3 var(--dk-font-mono); white-space: nowrap; text-align: right; }
.offer__price--sm { font-size: 12px; line-height: 1.4; }
.pricing-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) 220px; gap: 22px; padding: 14px 0; border-top: 1px solid var(--dk-border-hairline); align-items: center; }
.pricing-row__status { font: 600 10px/1.4 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-muted); }
.rule-end { border-top: 1px solid var(--dk-border-hairline); }

.plan-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--dk-border-hairline); border: 1px solid var(--dk-border-hairline); }
.plan-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px; background: var(--dk-surface-page); }
.plan-card__name { font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.plan-card__price { font: 400 22px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.plan-card__desc { margin: 0; font: 400 13px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); }
.plan-card__facts { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--dk-border-hairline); }
.plan-card__facts li { padding: 8px 0; border-bottom: 1px solid var(--dk-border-hairline); font: 400 12px/1.4 var(--dk-font-mono); color: var(--dk-text-secondary); }
.plan-card__cta { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1080px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-cards > .plan-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 620px) { .plan-cards { grid-template-columns: minmax(0, 1fr); } }
.plan-detail { border-top: 1px solid var(--dk-border-strong); padding-top: 14px; }
.plan-detail summary { cursor: pointer; font: 600 14px/1.4 var(--dk-font-display); color: var(--dk-text-primary); }
.plan-detail[open] summary { margin-bottom: 18px; }
.plan-detail > p, .plan-detail > .stack { margin: 12px 0 0; }
.plan-detail .scroll-x { max-width: 100%; }

/* ── Compare plans ──────────────────────────────────────────────────────── */
.plans { border-collapse: collapse; width: 100%; min-width: 720px; }
.plans th, .plans td { padding: 12px 14px; border-bottom: 1px solid var(--dk-border-hairline); text-align: center; vertical-align: middle; }
.plans thead th { vertical-align: bottom; border-bottom: 1px solid var(--dk-border-strong); background: var(--dk-surface-head); }
.plans thead th:first-child, .plans tbody th { text-align: left; }
.plans__name { display: block; font: 600 15px/1.3 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.plans__price { display: block; margin-top: 6px; font: 400 15px/1 var(--dk-font-mono); color: var(--dk-text-primary); }
.plans__for { display: block; margin-top: 6px; font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }
.plans tbody th { font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); }
.plans td { width: 22%; }
.plans--5 { min-width: 860px; }
.plans--5 td { width: 19%; }
.plans__v { display: block; font: 400 13px/1.4 var(--dk-font-mono); color: var(--dk-text-primary); }
.plans__sub { display: block; margin-top: 4px; font: 400 11px/1.3 var(--dk-font-mono); color: var(--dk-text-faint); }
.plans .plan-yes { margin: 0 auto; color: var(--dk-text-accent); }
.plans .plan-no { font: 400 13px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.plans tfoot td, .plans tfoot th { border-bottom: 0; }

/* ── Methodology ────────────────────────────────────────────────────────── */
.clock-card { border: 1px solid var(--dk-border-hairline); background: var(--dk-surface-page); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.clocks { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; }
.clock { border: 1px solid var(--dk-border-strong); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clock--dashed { border-style: dashed; }
.clock--age { border-color: var(--dk-accent); background: var(--dk-accent-tint); }
.clock__k { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.clock__v { font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-muted); }
.clocks__arrow { font: 400 14px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; border-top: 1px solid var(--dk-border-strong); }
.method-grid > div { padding: 18px 0; border-bottom: 1px solid var(--dk-border-hairline); display: flex; flex-direction: column; gap: 8px; }
.method-grid__n { font: 400 11px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.method-grid__t { font: 600 15px/1.35 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.method-grid__b { font: 400 13px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); text-wrap: pretty; }

.closing { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--dk-border-strong); padding-top: 22px; }

/* The header and the footer are Debyko.Web.Chrome's (css/chrome.css): nothing of theirs is styled here. */

/* ── Live market: slice, full comparison, arena ─────────────────────────── */
.lm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; padding: 14px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.lm-controls label.field { min-width: 180px; }
.lm-controls .field__box select { width: auto; flex: 1 1 auto; min-width: 0; }
.lm-source { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.lm-banner { padding: 10px 14px; border-bottom: 1px solid var(--dk-border-hairline); font: 400 13px/1.5 var(--dk-font-text); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.lm-chart-area { display: grid; grid-template-columns: minmax(0, 1fr) 232px; border-bottom: 1px solid var(--dk-border-hairline); }
.lm-chart { padding: 14px 14px 10px; min-width: 0; }
.lm-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.lm-chart__plot { position: relative; }
.lm-chart__plot svg { width: 100%; height: 240px; }
.lm-chart__plot .grid { stroke: var(--dk-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-compact .lm-chart__plot svg, .lm-compact .lm-chart__ylabels { height: 120px; }
/* The legend sits beside the half-height chart and scrolls inside the row the chart sets. */
.lm-compact .lm-legend { height: 0; min-height: 100%; overflow-y: auto; box-sizing: border-box; }
.lm-chart__plot path { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lm-chart__ylabels { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; justify-content: space-between; height: 240px; pointer-events: none; }
.lm-chart__ylabels span { font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); background: var(--dk-surface-panel); padding: 1px 3px; align-self: flex-end; }
.lm-chart__x { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10px/1 var(--dk-font-mono); color: var(--dk-text-faint); }
.lm-legend { border-left: 1px solid var(--dk-border-hairline); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.lm-legend__item { background: none; border: 0; margin: 0; padding: 5px 0; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.lm-legend__item:hover { background: #F2F2F4; }
.lm-legend__item:disabled { opacity: .55; cursor: default; }
.lm-legend__box { width: 12px; height: 12px; border: 1px solid var(--dk-border-strong); display: inline-flex; flex: none; }
.lm-legend__item[aria-pressed="true"] .lm-legend__box { background: var(--dk-text-primary); }
.lm-legend__venue { font: 600 12px/1 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); flex: 1; }
.unsup-tag { font: 600 9px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-muted); border: 1px solid var(--dk-border-strong); padding: 3px 5px; border-radius: 2px; }

.lm-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.lm-table th { background: var(--dk-surface-head); padding: 6px; text-align: right; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); border-bottom: 1px solid var(--dk-border-strong); white-space: nowrap; }
.lm-table th.l { text-align: left; }
.lm-table .group { padding: 6px 10px; text-align: left; letter-spacing: .18em; color: var(--dk-text-accent); background: var(--dk-surface-subtle); border-bottom: 1px solid var(--dk-border-hairline); border-left: 1px solid var(--dk-border-hairline); }
.lm-table tr.quote-row th { padding: 0; text-align: left; background: var(--dk-surface-subtle); border-top: 1px solid var(--dk-border-strong); border-bottom: 1px solid var(--dk-border-hairline); }
.lm-table tr.quote-row th span { position: sticky; left: 0; display: inline-block; padding: 5px 10px; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-accent); }
.lm-table .group--age { color: #FFFFFF; background: var(--dk-accent); }
.lm-table .sticky { position: sticky; left: 0; z-index: 2; border-right: 1px solid var(--dk-border-hairline); }
.lm-table td { padding: 0; border-bottom: 1px solid var(--dk-border-hairline); text-align: right; }
.lm-table td.venue { position: sticky; left: 0; z-index: 1; background: var(--dk-surface-panel); padding: 0 10px; height: 34px; line-height: 1.2 !important; border-right: 1px solid var(--dk-border-hairline); font: 600 12px/1 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; text-align: left; }
.lm-table td.venue small { display: block; margin-top: 3px; font: 400 10px/1.3 var(--dk-font-mono); letter-spacing: 0; color: var(--dk-text-muted); }
.fig-pair { display: flex; flex-direction: column; }
.lm-table td.venue .row-status { display: inline-flex; margin-top: 5px; cursor: help; }
.fig-pair .fig { padding: 2px 6px; }
.lm-table td.sym { padding: 0 8px; font: 400 11px/1.3 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; text-align: left; }
.lm-table td.sym small { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-text-faint); margin-top: 2px; }
.lm-observation { padding: 14px; border-top: 1px solid var(--dk-border-hairline); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lm-observation__text { font: 400 14px/1.5 var(--dk-font-text); color: var(--dk-text-primary); }
.lm-log { border-top: 1px solid var(--dk-border-hairline); }
.lm-log summary { padding: 8px 14px; cursor: pointer; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); list-style: none; }
.lm-log__grid { padding: 0 14px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 3px 18px; font: 400 10px/1.5 var(--dk-font-mono); }
.lm-log__grid .path { color: var(--dk-text-muted); overflow-wrap: anywhere; }

/* Hero best / worst: the figure's colour only — no chip, no fill, no weight.
   Green on paper #FFF 5.0:1, on night #06080D 8.4:1; worst is the accent text colour (5.8:1 on paper). */
:root { --dk-best-fg: #17804A; --dk-worst-fg: var(--dk-text-accent); }
[data-theme="dark"] { --dk-best-fg: #2FBF71; }
.slice-table .fig.is-best { color: var(--dk-best-fg); }
.slice-table .fig.is-worst { color: var(--dk-worst-fg); }
/* The unit takes the mark's colour too: in the stacked bid / ask cell the word is what tells the
   reader which of the two figures is the marked one. */
.slice-table .fig.is-best .fig__unit, .slice-table .fig.is-worst .fig__unit { color: inherit; opacity: .8; }

/* Hero quote groups: one ruled band per quote currency, the same head ground as the column heads. */
.slice-table tr.lm-group td { padding: 7px 10px; background: var(--dk-surface-head); border-top: 1px solid var(--dk-border-strong); text-align: left; }
.slice-table tr.lm-group .label { font-size: 10px; }

.slice-table td.venue-cell { padding: 4px 10px; height: 34px; font: 600 13px/1.2 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; text-align: left; }
.slice-table td.venue-cell small { display: block; margin-top: 3px; font: 400 10px/1.3 var(--dk-font-mono); letter-spacing: 0; color: var(--dk-text-muted); }
.slice-table td.sym-cell { padding: 0 10px; font: 400 12px/1 var(--dk-font-mono); color: var(--dk-text-muted); white-space: nowrap; text-align: left; }

.arena-table td { height: 40px; }
/* Arena sits in the 7/12 column: tighter cell padding so its six columns fit without scrolling. */
.arena-table th, .arena-table td { padding-left: 6px !important; padding-right: 6px !important; }
.arena-table th:first-child, .arena-table td:first-child { padding-left: 12px !important; }
.arena-table th:last-child, .arena-table td:last-child { padding-right: 12px !important; }
.arena-table .venue-cell { font: 600 13px/1.2 var(--dk-font-display); letter-spacing: -.01em; white-space: nowrap; }
.arena-table .venue-cell small { display: block; font: 400 10px/1.3 var(--dk-font-mono); color: var(--dk-text-faint); margin-top: 2px; }
.arena-table .td-num { font-size: 13px; line-height: 1.3; }
.arena-table .unit { color: var(--dk-text-faint); font-size: 11px; margin-left: 3px; }
.arena-table .age { font: 400 12px/1.3 var(--dk-font-mono); white-space: nowrap; color: var(--dk-text-secondary); text-align: right; }
.spark-note { font: 400 9px/1 var(--dk-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-text-faint); }
.sparkline path { fill: none; stroke: var(--dk-chart-ink-soft); stroke-width: 1; stroke-linejoin: round; }

/* Provenance popover (desktop) and bottom sheet (narrow screens) */
.prov-scrim { position: fixed; inset: 0; background: transparent; border: 0; margin: 0; padding: 0; z-index: 40; cursor: default; }
.prov { position: fixed; width: 380px; z-index: 41; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-hairline); border-top: 2px solid var(--dk-accent); box-shadow: 0 8px 24px rgba(5,7,12,.12); }
.prov--sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 70vh; overflow: auto; border: 0; border-top: 2px solid var(--dk-accent); }
.prov__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--dk-border-hairline); background: var(--dk-surface-head); }
.prov__title { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-accent); }
.prov__close { background: none; border: 0; padding: 0; cursor: pointer; font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-muted); }
.prov__lines { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; font: 400 12px/1.45 var(--dk-font-mono); }
.prov__k { font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); padding-top: 3px; white-space: nowrap; }
.prov__v { color: var(--dk-text-primary); overflow-wrap: anywhere; }

/* ── Dialogs (DS Dialog) ────────────────────────────────────────────────── */
.dialog-scrim { position: fixed; inset: 0; z-index: 60; background: var(--dk-scrim); display: flex; align-items: flex-start; justify-content: center; padding: 64px 22px; }
.dialog { width: 520px; max-width: 100%; background: var(--dk-surface-panel); border: 1px solid var(--dk-border-strong); border-top: 2px solid var(--dk-accent); box-shadow: var(--dk-shadow-modal); display: flex; flex-direction: column; }
.dialog--narrow { width: 460px; }
.dialog__head { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--dk-border-hairline); }
.dialog__title { font: var(--dk-type-heading); color: var(--dk-text-primary); min-width: 0; }
.dialog__meta { font: var(--dk-type-meta); color: var(--dk-text-faint); }
.dialog__close { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: var(--dk-text-muted); cursor: pointer; }
.dialog__close:hover { background: var(--dk-surface-subtle); }
.dialog__body { padding: 18px; font: var(--dk-type-prose); color: var(--dk-text-secondary); display: flex; flex-direction: column; gap: 14px; }
.dialog__body p { margin: 0; font: 400 14px/1.55 var(--dk-font-text); color: var(--dk-text-secondary); }
.dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-subtle); }
/* Contact forms: the honeypot no person sees, and the inline reason a request was refused. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 0; padding: 8px 10px; border: 1px solid var(--dk-border-strong); border-left: 2px solid var(--dk-accent); font: 400 13px/1.5 var(--dk-font-text); color: var(--dk-text-primary); }
.form-error a { color: var(--dk-text-accent); }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */
/* The public landing: a short introduction, live observations, then route choices. */
.home-intro { padding: 42px 0 30px; }
.home-intro__inner { display: grid; gap: 26px; }
.home-intro__copy { display: grid; gap: 16px; }
.home-intro__copy .meta { margin: 0; }
.home-intro__proof { min-width: 0; }
.home-intro__proof .panel { margin: 0; }
.home-proof-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 10px; font: 500 12px/1.4 var(--dk-font-text); }
.home-routes { padding: 36px 0; }
.home-routes__head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 18px; }
.home-routes__head .h2 { font-size: 24px; }
.home-routes__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--dk-border-strong); border-bottom: 1px solid var(--dk-border-strong); }
.home-route { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 18px; }
.home-route:first-child { padding-left: 0; }
.home-route + .home-route { border-left: 1px solid var(--dk-border-hairline); }
.home-route h3 { margin: 0; font: 600 18px/1.2 var(--dk-font-display); color: var(--dk-text-primary); }
.home-route h3 small { font: 500 10px/1 var(--dk-font-mono); color: var(--dk-text-muted); }
.home-route p { margin: 0; flex: 1; font: 400 13px/1.5 var(--dk-font-text); color: var(--dk-text-secondary); }
.home-route a, .home-route .text-btn { font: 600 12px/1.4 var(--dk-font-text); padding: 0; }
.home-routes__secondary { margin: 14px 0 0; font: 400 12px/1.6 var(--dk-font-text); color: var(--dk-text-secondary); }
.home-routes__secondary code { font: 500 11px/1.4 var(--dk-font-mono); color: var(--dk-text-primary); }
.home-routes__secondary .text-btn { font-size: inherit; padding: 0; }
@media (max-width: 960px) {
  .hide-narrow { display: none !important; }
  .split, .workstation, .agent-console, .lm-chart-area { grid-template-columns: minmax(0, 1fr) !important; }
  .workstation > .cell--left, .agent-console__side { border-right: 0; }
  .lm-legend { border-left: 0; border-top: 1px solid var(--dk-border-hairline); }
  .lm-compact .lm-legend { height: auto; min-height: 0; max-height: 240px; }
  .h1 { font-size: 32px; }
  .section { padding: 56px 0; }
  .offer, .pricing-row { grid-template-columns: minmax(0, 1fr) auto; }
  .offer > .btn, .pricing-row > .btn { grid-column: 1 / -1; }
  .home-routes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-route:nth-child(3) { border-left: 0; padding-left: 0; }
  .home-route:nth-child(n+3) { border-top: 1px solid var(--dk-border-hairline); }
}
/* A full comparison (/compare/tardis and the pages that share its file): the row name stays put while the two columns scroll. */
.compare-glance th:first-child, .compare-glance td:first-child { position: sticky; left: 0; z-index: 1; background: var(--dk-surface-page); }
.compare-faq details { border-top: 1px solid var(--dk-border-hairline); padding: 12px 0; }
.compare-faq summary { cursor: pointer; font: 600 16px/1.3 var(--dk-font-display); color: var(--dk-text-primary); }
.compare-faq details p { margin: 8px 0 0; }

@media (max-width: 640px) {
  .home-intro { padding: 28px 0 24px; }
  .home-intro__inner { gap: 22px; }
  .home-routes { padding: 28px 0; }
  .home-routes__head { display: block; }
  .home-routes__head .h2 { margin-top: 8px; font-size: 22px; }
  .home-routes__list { grid-template-columns: minmax(0, 1fr); }
  .home-route, .home-route:first-child, .home-route:nth-child(3) { padding: 14px 0; border-left: 0; }
  .home-route + .home-route { border-top: 1px solid var(--dk-border-hairline); border-left: 0; }
  .home-intro .slice-table { min-width: 0; width: 100%; display: block; }
  .home-intro .slice-table thead { display: none; }
  .home-intro .slice-table tbody { display: block; }
  .home-intro .slice-table tr { display: grid; grid-template-columns: minmax(0, 1fr) max-content; border-bottom: 1px solid var(--dk-border-hairline); }
  .home-intro .slice-table th:nth-child(2), .home-intro .slice-table td:nth-child(2),
  .home-intro .slice-table th:nth-child(3), .home-intro .slice-table td:nth-child(3),
  .home-intro .slice-table th:nth-child(5), .home-intro .slice-table td:nth-child(5) { display: none; }
  .home-intro .slice-table td { padding: 4px 6px; border: 0; min-width: 0; }
  .home-intro .slice-table .venue-cell { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .home-intro .slice-table td:nth-child(4) { grid-column: 2; grid-row: 1; display: flex; gap: 5px; align-items: baseline; justify-content: flex-end; }
  .home-intro .slice-table td:nth-child(4)::before { content: "Mark"; font: 500 8px/1 var(--dk-font-mono); color: var(--dk-text-muted); text-transform: uppercase; }
  .home-intro .slice-table td:last-child { grid-column: 2; grid-row: 2; }
  .home-intro .slice-table td:nth-child(6), .home-intro .slice-table td:nth-child(7) { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .home-intro .slice-table td:nth-child(6)::before, .home-intro .slice-table td:nth-child(7)::before { font: 500 8px/1 var(--dk-font-mono); color: var(--dk-text-muted); text-transform: uppercase; }
  .home-intro .slice-table td:nth-child(6)::before { content: "Open interest"; }
  .home-intro .slice-table td:nth-child(7)::before { content: "Turnover · 24 h"; }
  .home-intro .slice-table .fig--chip .ar-chip { min-width: 0; }
  .home-intro .slice-table .fig { width: auto; padding: 0; }
  .home-intro .slice-table .venue-cell { font-size: 11px; }
  .home-intro .slice-table .venue-cell small { font-size: 8px; }
  .home-intro .slice-table .fig { font-size: 10px; }
}