/* =========================================================================
   Blyth vs. Zen — additions on top of the shared ReadZen design system
   (site.css). New components: the Blyth confrontation, the attested-band
   block, the knew-better row, the family chips + families table, the
   fairness rows, the book-by-book tally, and the Japanization side-view
   table. One accent (cinnabar), calm ink for the apparatus layer.
   ========================================================================= */

/* Blyth quote reuses the serif type ramp. */
.blyth-quote { font-family: var(--font-suzuki); font-size: 1.2rem; line-height: 1.5; margin: 0; quotes: none; }

/* Book label on case cards: a quiet chip, so every card names its source
   work without shouting. Sits in the card-meta row beside the severity chip. */
.card-work { font-size: 0.7rem; line-height: 1.4; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 999px; padding: 0.12rem 0.55rem; background: var(--paper); white-space: nowrap; }
.card-meta { flex-wrap: wrap; }

/* Severity + family chips */
.chip.sev-major { border-color: var(--cinnabar-soft); color: var(--cinnabar); }
.chip.sev-mild { border-color: var(--rule-strong); color: var(--ink-faint); }
.chip-family { text-decoration: none; border-color: var(--calm-ink); color: var(--calm-ink); }
a.chip-family:hover { background: var(--calm-ink); color: var(--paper); }
.card-family { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.scoreline-slash { color: var(--ink-faint); }

/* Attested-band block */
.band { margin: 0.4rem 0 1.2rem; }
.band-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 0 0 0.5rem; }
.band-src { text-transform: none; letter-spacing: 0; color: var(--ink-faint); font-style: italic; }
.band-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.band-item { font-family: var(--font-suzuki); font-size: 1.05rem; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.2rem 0.8rem; background: var(--card); }
.band-item::before { content: "\201C"; }
.band-item::after { content: "\201D"; }
.dict-explanation, .dict-kwic { max-width: var(--measure); margin: 1rem 0; }
.dict-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 0 0 0.3rem; }
.dict-explanation blockquote { margin: 0; padding-left: 1rem; border-left: 2px solid var(--rule-strong); color: var(--ink-soft); font-style: italic; }
.dict-kwic .kwic-cn { font-family: var(--font-cjk); font-size: 1.25rem; margin: 0; padding-left: 1rem; border-left: 2px solid var(--cinnabar-soft); }

/* Extra Blyth construal quotes on a case */
.construals { max-width: var(--measure); margin: 1.2rem 0; }
.construal-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 0 0 0.4rem; }
.construal-quote { font-family: var(--font-suzuki); font-size: 1.05rem; margin: 0.4rem 0; padding-left: 1rem; border-left: 3px solid var(--cinnabar-soft); color: var(--ink); }
.construal-page { color: var(--ink-faint); font-size: 0.8rem; }

/* The knew-better row: the signature element */
.knew-better { max-width: var(--measure); margin: 0.5rem 0 1rem; padding: 1.2rem 1.4rem; background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--calm-ink); border-radius: 0 10px 10px 0; }
.kb-flag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--calm-ink); font-weight: 700; margin: 0 0 0.6rem; }
.kb-quote { font-family: var(--font-suzuki); font-size: 1.15rem; line-height: 1.5; margin: 0 0 0.5rem; quotes: none; }
.kb-cite { font-family: var(--font-suzuki); font-style: italic; color: var(--ink-faint); font-size: 0.82rem; margin: 0 0 0.6rem; }
.kb-note p { color: var(--ink-soft); margin: 0.4rem 0 0; }
.knew-better-corr { border-left-color: var(--rule-strong); }

/* Families page */
.families-head { max-width: 52rem; margin-inline: auto; }
.families-head h1 { font-family: var(--font-suzuki); font-size: clamp(2rem, 5vw, 2.8rem); }
.families-lede { color: var(--ink-soft); font-size: 1.05rem; }
.family { max-width: 60rem; margin: 2.6rem auto; }
.family-title { font-family: var(--font-suzuki); font-size: 1.5rem; margin-bottom: 0.2rem; }
.family-key { color: var(--cinnabar); }
.family-sub { color: var(--ink-faint); font-style: italic; margin: 0 0 0.6rem; }
.family-def { color: var(--ink-soft); max-width: var(--measure); }
.family-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-top: 0.8rem; }
.family-table th, .family-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.family-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.fm-cn { font-family: var(--font-cjk); font-size: 1.35rem; }
.fm-caseno { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.fm-band { color: var(--ink-soft); font-size: 0.88rem; }
.fm-page { color: var(--ink-faint); font-size: 0.8rem; }

/* Fairness rows (generated from the ledger) */
.faithful-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.faithful-cn { font-family: var(--font-cjk); font-size: 1.5rem; }
.faithful-arrow { color: var(--ink-faint); margin: 0 0.2ch; }
.faithful-blyth { font-family: var(--font-suzuki); color: var(--calm-ink); }
.faithful-caseno { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); white-space: nowrap; }
.faithful-band { color: var(--ink-soft); font-size: 0.9rem; margin: 0.2rem 0; }
.faithful-context { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--calm-ink); border: 1px solid var(--calm-ink); border-radius: 999px; padding: 0.05rem 0.5rem; margin: 0.2rem 0; }
.faithful { border-bottom: 1px solid var(--rule); padding-bottom: 1.4rem; }

/* Appendix knew-better line */
.drift-kb { color: var(--ink-soft); font-size: 0.9rem; margin: 0.4rem 0; }
.drift-kb-label { text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.08em; color: var(--calm-ink); }
.drift-kb-quote { font-family: var(--font-suzuki); color: var(--ink); }
.drift-kb-page { color: var(--ink-faint); font-size: 0.8rem; }

/* Method computed denominator */
.denom-computed { font-family: var(--font-suzuki); font-size: 1.2rem; color: var(--ink); border-left: 3px solid var(--cinnabar); padding-left: 1rem; }

/* Method: the computed book-by-book tally. Same table register as
   .family-table / .consensus; numbers right-aligned in tabular figures,
   the all-books total row separated by a strong rule. */
.tally-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-top: 0.4rem; }
.tally-table th, .tally-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tally-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 600; }
.tally-table td:nth-child(n + 2), .tally-table th:nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally-table tfoot th, .tally-table tfoot td { border-top: 2px solid var(--rule-strong); border-bottom: 0; font-weight: 600; }
.tally-table tfoot th { text-align: left; }

/* Japanization table */
.jz-head { max-width: 52rem; margin-inline: auto; }
.jz-head h1 { font-family: var(--font-suzuki); font-size: clamp(2rem, 5vw, 2.8rem); }
.jz-lede { color: var(--ink-soft); font-size: 1.05rem; }
.jz-stat { color: var(--ink-faint); font-size: 0.92rem; }
.jz-stat strong { color: var(--ink); }
.jz-table-wrap { max-width: 60rem; margin: 1.5rem auto; }
.jz-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.jz-table th, .jz-table td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); }
.jz-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); background: var(--paper); }
.jz-table th[data-sortable] { cursor: pointer; }
.jz-table th[data-sortable]:hover { color: var(--cinnabar); }
.jz-table th[aria-sort] { color: var(--cinnabar); }
.jz-cn { font-family: var(--font-cjk); font-size: 1.2rem; }
.jz-num { text-align: right; font-variant-numeric: tabular-nums; }
.jz-jp { font-weight: 600; }

@media (max-width: 760px) {
  .faithful-head-row { flex-direction: column; gap: 0.2rem; }
}