/* ════════════════════════════════════════════════════════════════════════════
   CB Speeches tab (Tech context). Standalone, namespaced `cbs-*`; it draws with the
   app's theme tokens (every palette, light/dark, for free), the shared radius scale
   and the shared SURFACE language in surface.css.

   The page is a stack of discrete CARDS on the tinted ground — the header, the
   currency filter, then one card per currency holding that bank's speeches — rather
   than one hairline-divided sheet. Card geometry (surface, hairline, radius, shadow)
   comes from `.card` / `.card--pad`, added to those wrappers in js/cb-speeches.js and
   mirrored in its skeleton builder; a speech row is a `.card` INSIDE a card, so it
   steps down a rung on its own. What survives here is only what is specific to THIS
   page: the row layout, the date/meta columns and the semantic marks.
   ════════════════════════════════════════════════════════════════════════════ */

/* The old `#view-cb-speeches { padding: 0 }` reset is deliberately gone: `.view` in
   surface.css supplies the column flow, the gap BETWEEN cards and the top padding,
   and an id-specificity `padding: 0` silently cancelled all three. */

/* The skeleton is painted inside reveal.js's own `.g10-sk` wrapper, which is a plain
   block — so without this the placeholder cards would touch while the real ones sit a
   gap apart, and the swap would shift the page. Scoped to this view; the wrapper is
   shared, the rhythm is the page's. */

.cbs-empty {
  padding: 40px 24px; color: var(--text-muted); font-size: 14px; text-align: center;
  /* Every state this view can land in is a card on the ground, the empty and loading
     ones included — a lone sentence floating on the tint reads as a broken page. */
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.cbs-faint { color: var(--text-faint); }

/* ── controls — the page header card (`.card .card--pad` in the renderer) ───── */
.cbs-controls {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
/* Headlines are the serif, and only headlines. Scoped to the header, because
   `.cbs-title` is ALSO the class on every speech title further down — the two
   collided before, and the speech rule (later in the file) silently won both. */
.cbs-controls .cbs-title {
  font: 600 20px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--text);
  flex: 0 1 auto;
}
/* The gloss beside the headline is plain language, so it drops out of the serif into
   the UI face — the .sec-head / .sec-note pairing, inline. */
.cbs-controls .cbs-faint { font: 400 12px/1.5 var(--font-sans); color: var(--text-muted); }

/* ── currency filter chips (`.card .card--pad` in the renderer) ─────────────── */
.cbs-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.cbs-chip {
  font: 500 10.5px/1.4 var(--font-sans); letter-spacing: .06em;
  padding: 4px 10px; cursor: pointer; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: transparent;
  color: var(--text-2);
  transition: background-color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.cbs-chip:hover { border-color: var(--accent-edge); background: var(--surface-sunken); }
/* The selected chip is FILLED, the shared `--on` treatment: at this size an accent
   outline alone is easy to miss in a row of eleven. */
.cbs-chip--on {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 600;
}

/* ── list + per-currency card ──────────────────────────────────────────────── */
/* The currency cards are separate objects on the ground, so the column that holds
   them supplies the gap and nothing else — it is not itself a card. */
.cbs-list { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }
.cbs-ccy-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.cbs-code {
  font: 600 13px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--text);
}
/* The bank is the card's headline, so it is the serif. */
.cbs-bank { font: 500 15px/1.25 var(--font-display); letter-spacing: -.015em; color: var(--text-2); }
/* Counts and a corpus date: mono and tabular, like every other figure. */
.cbs-ccy-sub {
  font: 400 10.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-faint); margin-left: auto;
}
.cbs-empty-ccy { font-size: 12px; color: var(--text-faint); padding: 4px 2px; }

/* ── speech rows ───────────────────────────────────────────────────────────── */
.cbs-rows { display: flex; flex-direction: column; gap: 6px; }
/* `.cbs-sp` carries `.card` in the renderer and sits inside the currency card, so
   surface.css steps it down a rung for free (--r-md, the sunken tier, no shadow).
   It clips, because the open head draws a full-bleed rule across the rounded top. */
.cbs-sp { overflow: hidden; }
.cbs-sp-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; width: 100%;
  cursor: pointer; text-align: left; padding: 9px 12px; background: transparent;
  border: 0; color: var(--text-2);
  transition: color var(--dur-micro) var(--ease-out);
}
.cbs-sp-head:hover { color: var(--text); }
.cbs-open { border-bottom: 1px solid var(--line); }
.cbs-caret { font-size: 10px; color: var(--text-faint); width: 10px; }
.cbs-date {
  font: 400 10.5px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-faint); white-space: nowrap; min-width: 96px;
}
.cbs-title { font-size: 13px; font-weight: 500; color: var(--text); flex: 1 1 240px; min-width: 0; }
.cbs-active {
  font: 500 8.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-sm); color: var(--bull-text);
  border: 1px solid var(--bull-edge); white-space: nowrap;
}
.cbs-meta { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.cbs-by { font-size: 11px; color: var(--text-faint); }
.cbs-topics { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cbs-topic {
  font: 500 8.5px/1.6 var(--font-sans); letter-spacing: .06em;
  color: var(--text-faint); border: 1px solid var(--line);
  padding: 0 6px; border-radius: var(--r-sm);
}
.cbs-chars {
  font: 400 10px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.cbs-ext { font: 500 10px/1.4 var(--font-sans); letter-spacing: .06em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.cbs-ext:hover { text-decoration: underline; }

/* ── expanded body ─────────────────────────────────────────────────────────── */
.cbs-body { padding: 12px 14px; }
.cbs-text {
  margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-sans); font-size: 12px; line-height: 1.5;
  color: var(--text-2);
}

@media (max-width: 640px) {
  .cbs-ccy-sub { margin-left: 0; flex-basis: 100%; }
  .cbs-meta { margin-left: 0; flex-basis: 100%; }
  .cbs-date { min-width: 0; }
}