/* 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. */

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 ─────────────────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 26px; }
.wrap--wide { max-width: 1440px; }
.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: text runs to the edge of its column, so no block ends short of its neighbour. */

/* ── 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); }

.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; }

.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)}
.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; }
.tbl td { padding: 0 10px; border-bottom: 1px solid var(--dk-border-hairline); }
.tbl td:first-child { padding-left: 14px; }
.tbl td:last-child { padding-right: 14px; }
.tbl .td-venue { height: 34px; 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; }

/* 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. */
.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; }
/* 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 ─────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 30; background: #F7F7F8; border-bottom: 1px solid var(--dk-border-hairline); }
.site-header__bar { height: 56px; display: flex; align-items: center; gap: 26px; }
.site-header__logo { display: flex; align-items: center; opacity: 1; }
.site-header__logo img { height: 32px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav__item { position: relative; }
.nav__trigger { background: none; border: 0; margin: 0; height: 56px; padding: 0 12px; cursor: pointer; font: 500 13px/1 var(--dk-font-text); color: var(--dk-text-secondary); }
.nav__trigger:hover { color: #05070C; }
.nav__menu { position: absolute; top: 56px; left: 0; min-width: 236px; 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); padding: 8px 0; display: flex; flex-direction: column; }
.nav__menu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 16px; font: 400 13px/1.3 var(--dk-font-text); color: var(--dk-text-primary); opacity: 1; }
.nav__menu a:hover { background: #F2F2F4; opacity: 1; }
.nav-tag { font: 500 9px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-text-faint); }
.site-header__actions { display: flex; gap: 8px; align-items: center; flex: none; }
.nav__trigger { white-space: nowrap; }
.menu-btn { display: none; background: none; border: 1px solid var(--dk-border-hairline); height: 32px; padding: 0 12px; cursor: pointer; font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-primary); align-items: center; }
.mobile-nav { border-top: 1px solid var(--dk-border-hairline); background: var(--dk-surface-panel); padding: 14px 26px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.mobile-nav__group { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav__title { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding: 6px 0; }
.mobile-nav__group a { font: 400 14px/1.4 var(--dk-font-text); color: var(--dk-text-primary); padding: 4px 0; }
.mobile-nav__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* ── 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); }
.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__cta { margin-top: auto; padding-top: 14px; }
@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); } }

/* ── 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; }

/* Footer credit: the author, then the company that operates the site under licence, its mark at the cap height of the line. */
.credit { margin: 0; font: 400 12px/1.7 var(--dk-font-text); color: var(--dk-text-muted); }
.credit__brand { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; color: var(--dk-text-primary); white-space: nowrap; opacity: 1; }
a.credit__brand:hover { opacity: .65; }
.credit__brand i { font-style: normal; color: var(--dk-text-accent); }
.credit__mark { display: inline-block; align-self: center; }
.credit--legal a { color: var(--dk-text-primary); }
.credit__mark--blynai { width: 14px; height: 14px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--dk-border-strong); padding: 48px 0 32px; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr)); gap: 32px; }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__title { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dk-text-faint); padding-bottom: 6px; }
.site-footer__col a { font: 400 13px/1.4 var(--dk-font-text); color: var(--dk-text-primary); display: flex; gap: 8px; align-items: baseline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; border-top: 1px solid var(--dk-border-hairline); padding-top: 18px; font: 400 11px/1.5 var(--dk-font-mono); color: var(--dk-text-faint); }

/* ── 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: #E6E6E9; 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; }

.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 header needs about 1,100px for the logo, seven menus and two buttons; below that the menus fold
   into Menu while the buttons stay. */
@media (max-width: 1160px) {
  .nav { display: none !important; }
  .menu-btn { display: inline-flex; }
}

@media (max-width: 960px) {
  .nav, .hide-narrow { display: none !important; }
  .menu-btn { display: inline-flex; }
  .split, .workstation, .agent-console, .site-footer__cols, .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; }
}