/* The trust pages. 14 Nov 2026 (docs/design/DECISIONS.md; report 04, section 2.9).

   templates/trust/: /accuracy, /error-rate, /receipts and /methodology, on the
   reading layout. The pages are built from the shared parts (the page head, the
   counter, the label, the mark's shapes, the fold, the scrolling table). This file
   holds what they add: the tally (one mark for each case), a column of figures in
   a table, a note under a table, and the list of cases. Colours, sizes and widths
   come from tokens.css. A thing is set apart by a rule or by space, never a tint. */

/* The head's counters on these pages are a few words wide ("18 of 105"), so on the
   narrowest phones they stand one under the other instead of two abreast. */
.page-reading .page-head__facts {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* The tally. Each row of marks is twenty wide, so a row can be counted at a glance;
   the number and the words that say what a mark is stand beside it. The three
   kinds take the marks' own colours and keep their own shapes. */
.tally-shapes {
  position: absolute;
}

.tallies {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-5);
}

.tally {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
}

.tally__marks {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.tally--holds .tally__marks {
  color: var(--holds);
}

.tally--missed .tally__marks {
  color: var(--stands);
}

.tally--unchecked .tally__marks {
  color: var(--apparatus);
}

.tally__words {
  max-width: 34ch;
  font: var(--type-small);
}

.tally__n {
  display: block;
  font: var(--type-verdict);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A column of figures: set to the right, digits of one width. */
.trust-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trust-table th[scope="row"] {
  font-weight: 400;
}

/* A day or a month is one word. */
.trust-table th.apparatus,
.trust-table td.apparatus {
  white-space: nowrap;
}

.trust-table {
  min-width: 34rem;
  margin-block: var(--space-4);
}

/* The lanes: seven columns, wider than any phone, inside the scrolling box. */
.trust-table--lanes {
  min-width: 60rem;
}

.trust-table--short {
  min-width: 0;
  max-width: 30rem;
}

/* What has been measured: five columns of words, wider than a phone, inside the
   scrolling box. */
.trust-table--measured {
  min-width: 56rem;
}

.trust-table--measured th[scope="row"] {
  width: 24%;
}

/* A table of questions and answers wraps on a phone instead of scrolling: its
   answers are sentences. */
.trust-table--wrap {
  min-width: 0;
}

.trust-table--wrap th[scope="row"] {
  width: 38%;
}

/* A fingerprint breaks anywhere, so it never widens a phone. */
.trust-hash {
  overflow-wrap: anywhere;
}

/* The passes, in order: a numbered row that wraps. */
.passes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-4);
  font-weight: 600;
}

/* The rubric is a document rendered from Markdown: its tables scroll inside their
   own box, so the page never moves sideways. */
.rubric table {
  display: block;
  overflow-x: auto;
}

.rubric h2 {
  margin-top: var(--space-7);
}

.rubric code {
  overflow-wrap: anywhere;
}

/* The three totals, each with the sentence that says what it counts. */
.totals > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--gutter);
  max-width: var(--measure);
  padding-block: var(--space-3);
  border-top: var(--rule-hair);
}

.totals dt {
  font-weight: 700;
}

.totals__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.totals dd + dd {
  grid-column: 1 / -1;
  color: var(--ink-2);
}

/* What a table's figures are and are not: under the table, quieter. */
.trust-note {
  margin-top: var(--space-4);
  font: var(--type-small);
  color: var(--ink-2);
}

/* The cases: a criticism judged wrong beside the paper's own words. Each is a fold
   named by its paper. One column on a phone, the paper's cell second, as on the
   plate; side by side on a desk. The list runs the page's whole width, and so does
   the table of lanes, which has seven columns. */
.layout-reading > .wrap > .trust-wide-section {
  max-width: none;
}

.trust-wide-section > * {
  max-width: var(--reading);
}

.trust-wide-section > .trust-wide {
  max-width: none;
}

.trust-wide-section > .cases {
  margin-top: var(--space-5);
  border-bottom: var(--rule-hair);
}

/* A heading inside a section that stands outside the running text. */
.page-reading .section > h3 {
  margin-block: var(--space-6) var(--space-3);
}

.page-reading .section > h2 + h3 {
  margin-top: 0;
}

.case > .fold > summary {
  align-items: start;
  padding-block: var(--space-3);
}

.case__name {
  display: grid;
  gap: var(--space-1);
  font-weight: 400;
}

.case__title {
  max-width: var(--measure);
  color: var(--ink);
  font: var(--type-body-paper);
}

.case__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5) var(--gutter);
}

.case__pair > div > * + * {
  margin-top: var(--space-3);
}

.case__pair p + .label {
  margin-top: var(--space-5);
}

.case__quote {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: var(--rule-inset);
  overflow-wrap: anywhere;
}

.case__why {
  font: var(--type-small);
}

@media (min-width: 720px) {
  .tally {
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: var(--gutter);
    align-items: start;
  }
}

@media (min-width: 960px) {
  /* Beside the headline the counters are one column again, as in every page head. */
  .page-reading .page-head__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .case__pair {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}