/* Soka: the sources, the day's pattern dossier and the thread draft.
 *
 * M16 S-R2 — the page is on the skin now, and this sheet keeps only the shapes that are genuinely its own.
 * A pattern's dossier and the hilo's seven numbered cards are page-specific; every other shape the page
 * renders (`card`, `grid`, `chip`, `pill`, `tag`, `kv`, `empty`, `evidence-row`) is the skin's vocabulary
 * and is styled once in `portal.css`. The `·` separators are gone from this page's copy and the state
 * capsules became pills (dot + word) — see `docs/18-sources.md` §5.
 *
 * Colours are the token aliases only (`var(--text-faint)`, `var(--radius)`, …): a literal colour here fails
 * `ThemeTests.Literal_colours_live_only_in_the_token_file_and_only_as_bb_steps`, which exempts exactly the
 * token file. A rule that needs a new colour adds a `--bb-*` step to `burbuja-tokens.css` and aliases it —
 * and this lane never touches that file.
 */

/* The handle is one token, so it must not wrap mid-word; the display name above it carries the width. */
.soka-sources .grid td:first-child {
  white-space: nowrap;
  vertical-align: top;
}

/* One pattern's dossier: the claim and its confidence tag on one line, the four figures the KERNEL served
   under it (the MVP's evidenceRow), and the record's own status beside the id. A pattern is not a sequence,
   so it carries no number — the numbered sequence in this console is the hilo's, one page over. */
.soka-patterns { display: block; }
.soka-pattern { padding: 12px 0; border-bottom: .5px solid var(--line-1); }
.soka-pattern:last-child { border-bottom: 0; padding-bottom: 0; }
.soka-pattern-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.soka-pattern-head h3 { margin: 0; }
.soka-pattern .evidence-row { margin: 6px 0 0; }
.soka-pattern-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 8px 0 0; }

/* The hilo's seven numbered paragraph cards. The number gets its own gutter so the paragraph keeps one text
   column, and the card itself is the skin's (hairline, one radius, no shadow) — this file adds the grid. */
.soka-hilo-part .card-body { display: grid; grid-template-columns: 32px 1fr; gap: 0 12px; }
.soka-hilo-number { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.soka-hilo-text h3 { margin: 0 0 2px; }
.soka-hilo-text p { margin: 0; }

/* A pattern's numeric evidence still lines up by its digits when the counts share a row; the header and
   footer of the dossier keep the skin's own type. */
.soka-evidence { row-gap: 2px; }
.soka-evidence > span { font-variant-numeric: tabular-nums; }