/* studio.debyko.com — only what the site's own tokens.css and site.css do not already carry. The
   header, the footer, .panel, .btn, .label, .fig, .num and .ar-chip come from there unchanged, so a
   change to the design system reaches Studio by refreshing those two copies.

   One rule governs every block below (owner, 2026-09-22): a block of text never ends at half the
   width with empty space beside it. Either it spans the row, or something real — a panel, a table,
   figures — stands next to it. Every grid here is written that way, and falls to one column on a
   phone where a single column is the full width. */

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */

.st-brand { gap: 10px; }
.st-brand__where { font: 600 11px/1 var(--dk-font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dk-text-accent); padding-top: 2px; }
.st-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.st-nav a { padding: 0 12px; height: 56px; display: inline-flex; align-items: center;
  font: 500 13px/1 var(--dk-font-text); color: var(--dk-text-secondary); }
.st-nav a:hover { color: var(--dk-text-primary); }

/* ── headings and prose ─────────────────────────────────────────────────────────────────────── */

.st-h1 { font: 700 clamp(30px, 4.2vw, 46px)/1.06 var(--dk-font-display); letter-spacing: -.02em; margin: 0;
  color: var(--dk-text-primary); }
.st-h2 { font: 700 clamp(20px, 2.4vw, 27px)/1.15 var(--dk-font-display); letter-spacing: -.015em; margin: 0;
  color: var(--dk-text-primary); }
.st-lede { font: 400 16px/1.6 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; }
.st-lede--sub { font-size: 14px; color: var(--dk-text-muted); }
.st-note { font: 400 12px/1.6 var(--dk-font-mono); color: var(--dk-text-faint); margin: 0; }
.st-note code, .st-lede code { font-family: var(--dk-font-mono); font-size: .92em; color: var(--dk-text-primary); }

/* Hero: the words on the left, the registry on the right — the numbers are real, so the row carries
   content edge to edge instead of a column of air. */
.st-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 38px; align-items: start; }
.st-facts__list { margin: 0; padding: 0; display: grid; }
.st-facts__list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 9px 14px; border-bottom: 1px solid var(--dk-border-hairline); }
.st-facts__list > div:last-child { border-bottom: 0; }
.st-facts dt { font: 400 12px/1.4 var(--dk-font-text); color: var(--dk-text-secondary); margin: 0; }
.st-facts dd { margin: 0; text-align: right; font: 500 13px/1.4 var(--dk-font-mono); font-variant-numeric: tabular-nums;
  color: var(--dk-text-primary); overflow-wrap: anywhere; }
.st-facts .panel__foot { display: block; }

/* A section head: title on the left, the note that belongs to it on the right, both on one line. */
.st-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); gap: 26px; align-items: end; }

/* ── the comparison table ───────────────────────────────────────────────────────────────────── */

.st-tabs-head { row-gap: 8px; }
.st-tabs { flex-wrap: wrap; }
.st-tab { background: none; border: 1px solid var(--dk-border-hairline); cursor: pointer; height: 26px; padding: 0 10px;
  font: 600 11px/1 var(--dk-font-mono); letter-spacing: .1em; color: var(--dk-text-muted); }
.st-tab:hover { border-color: var(--dk-border-strong); color: var(--dk-text-primary); }
.st-tab.is-on { border-color: var(--dk-accent); color: var(--dk-text-primary); }

.st-table { border-collapse: collapse; width: 100%; }
.st-table th { padding: 6px 10px; text-align: right; white-space: nowrap; 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); }
.st-table th.l { text-align: left; }
.st-table td { height: 38px; border-bottom: 1px solid var(--dk-border-hairline); padding: 0; }
.st-table tbody tr:last-child td { border-bottom: 0; }
.st-table tbody tr.is-open { background: var(--dk-surface-subtle); }
.st-table tbody tr[data-key] { cursor: pointer; }
.st-table tbody tr[data-key]:hover { background: var(--dk-surface-subtle); }
.st-table td.venue-cell { padding: 4px 10px; font: 600 13px/1.2 var(--dk-font-display); letter-spacing: -.01em;
  white-space: nowrap; text-align: left; }
.st-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); }
.st-table .fig { cursor: inherit; }
.st-table .fig--chip .ar-chip { display: inline-flex; justify-content: flex-end; gap: 6px; border: 1px solid transparent;
  padding: 0 4px; min-width: 15ch; }
.st-table .fig--chip .ar-chip::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: transparent; }
.st-table .fig--chip .ar-chip--live::before { background: currentColor; }

/* The column chooser sits under the table, as the owner asked, and wraps across the panel's width. */
.st-columns { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.st-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: 400 12px/1 var(--dk-font-text); color: var(--dk-text-secondary); }
.st-check input { accent-color: var(--dk-accent); width: 13px; height: 13px; margin: 0; }
.st-columns__note { margin-left: auto; font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }

.st-empty { padding: 16px 14px; font: 400 12px/1.6 var(--dk-font-mono); color: var(--dk-text-faint); }

/* ── over time ──────────────────────────────────────────────────────────────────────────────── */

.st-controls { row-gap: 10px; column-gap: 26px; justify-content: flex-start; }
.st-control { display: inline-flex; align-items: center; gap: 8px; }
.st-control__label { font: 600 10px/1 var(--dk-font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dk-text-faint); }
.gap-4 { gap: 4px; }
.st-pick { background: none; border: 1px solid var(--dk-border-hairline); cursor: pointer; height: 24px; padding: 0 8px;
  font: 500 11px/1 var(--dk-font-mono); color: var(--dk-text-muted); }
.st-pick:hover { border-color: var(--dk-border-strong); color: var(--dk-text-primary); }
.st-pick.is-on { border-color: var(--dk-accent); color: var(--dk-text-primary); }

/* One chart for every venue, or one chart each — the switch the owner asked for. Small multiples
   keep a fixed height so the row of them reads as one picture. */
.st-charts { display: grid; gap: 14px; padding: 14px; }
.st-charts--each { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.st-chart { height: 300px; min-width: 0; }
.st-charts--each .st-chart { height: 230px; }
.st-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 4px; font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-faint); }
.st-chart__venue { font: 600 12px/1.2 var(--dk-font-display); letter-spacing: -.01em; color: var(--dk-text-primary); }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 14px 12px;
  font: 400 11px/1.4 var(--dk-font-mono); color: var(--dk-text-muted); }
.st-legend__swatch { display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor;
  margin-right: 6px; vertical-align: middle; }

/* ── one listing: book and trades ───────────────────────────────────────────────────────────── */

.st-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.st-panels > .st-empty { grid-column: 1 / -1; border: 1px solid var(--dk-border-hairline);
  background: var(--dk-surface-panel); }
.st-mini { border-collapse: collapse; width: 100%; }
.st-mini th { padding: 5px 10px; 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); text-align: right; white-space: nowrap; }
.st-mini th.l { text-align: left; }
.st-mini td { padding: 3px 10px; font: 400 12px/1.5 var(--dk-font-mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; color: var(--dk-text-primary); }
.st-mini td.l { text-align: left; color: var(--dk-text-muted); }
.st-mini tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--dk-surface-subtle) 55%, transparent); }
.st-mini td.bid { color: var(--dk-text-primary); }
.st-mini td.ask { color: var(--dk-text-primary); }
.st-mini td.bar { width: 62px; padding: 3px 8px; }
.st-none { color: var(--dk-text-faint); }
/* The book reads outward from the middle: bid prices on the inside right of their half, ask prices
   on the inside left of theirs, so the spread is the gap in the first row. */
.st-book td.bid { text-align: right; padding-right: 10px; }
.st-book td.ask { text-align: left; padding-left: 10px; }
.st-book__bands { border-top: 1px solid var(--dk-border-strong); }
.st-book__bands td { color: var(--dk-text-muted); }
.st-bar { display: block; height: 4px; background: var(--dk-accent); opacity: .45; }
.st-side-buy { color: var(--dk-text-primary); }
.st-side-sell { color: var(--dk-text-muted); }

/* ── code blocks ────────────────────────────────────────────────────────────────────────────── */

.st-code { margin: 0; padding: 14px; overflow-x: auto; border: 1px solid var(--dk-border-hairline);
  background: var(--dk-surface-panel); font: 400 12px/1.7 var(--dk-font-mono); color: var(--dk-text-primary); }
.st-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; align-items: start; }

/* ── plans ──────────────────────────────────────────────────────────────────────────────────── */

.st-plans { border-collapse: collapse; width: 100%; }
.st-plans th, .st-plans td { padding: 8px 14px; border-bottom: 1px solid var(--dk-border-hairline);
  font: 400 13px/1.4 var(--dk-font-text); text-align: right; white-space: nowrap; }
.st-plans thead th { 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); }
.st-plans th.l, .st-plans td.l { text-align: left; color: var(--dk-text-secondary); }
.st-plans td.n { font-family: var(--dk-font-mono); font-variant-numeric: tabular-nums; color: var(--dk-text-primary); }
.st-plans tfoot td { border-bottom: 0; padding-top: 12px; }

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

@media (max-width: 1100px) {
  .st-panels { grid-template-columns: 1fr; }
}
/* A phone is one column, so the label and its number stack instead of colliding. */
@media (max-width: 560px) {
  .st-facts__list > div { grid-template-columns: 1fr; gap: 2px; }
  .st-facts dd { text-align: left; }
}
@media (max-width: 900px) {
  .st-hero, .st-head, .st-two { grid-template-columns: 1fr; gap: 22px; }
  .st-head { align-items: start; }
  .section { padding: 56px 0; }
  .section--hero { padding: 40px 0 44px; }
  /* The section menu stays on a phone — it is how a long page is navigated — but moves to its own
     row and scrolls sideways instead of squeezing the brand and the sign-in button off the bar. */
  .site-header__bar { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 0; }
  .st-brand { flex: 1; }
  .st-nav { order: 3; width: 100%; overflow-x: auto; gap: 0; border-top: 1px solid var(--dk-border-hairline); }
  .st-nav a { height: 40px; padding: 0 12px 0 0; white-space: nowrap; }
  .st-nav a:first-child { padding-left: 0; }
}