/* Abecedarian Distance: only what is particular to this page. The toolbar,
   tables, result bars, cards and buttons are in base.css. What is here is the
   strip of twenty-six squares and the sizes around it. */

/* The word field is the whole interface, so it is the one control allowed to
   be large. Mono, because the letters are read as a sequence rather than as a
   word. */
.group.grow {
  flex: 1 1 18rem;
  min-width: 0;
}
.field.word {
  width: 100%;
  font-family: var(--pp-font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

/* base.css gives tables an edge and a ground and no padding, so a table can
   run to the border. Everything here is prose or figures inside the box, so
   each gets a body. */
.sheet-body {
  padding: 1rem 1.15rem;
}

/* The headline figure, at the display face. Words rather than a bare numeral:
   "3 swaps" is the answer, "3" needs a caption. */
.count-big {
  margin: 0;
  font-family: var(--pp-font-display);
  font-weight: var(--pp-weight-head);
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  letter-spacing: var(--pp-track-head);
  line-height: 1.1;
  text-wrap: balance;
}
/* Zero is a good answer and no distance is no answer; neither is a failure, so
   neither takes the plate .hint owns. Zero is ordinary ink; the refusal steps
   back to faint. */
.count-big.is-none {
  color: var(--pp-faint);
}
.verdict-say {
  margin: 0.6rem 0 0;
  max-width: 62ch;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--pp-muted);
  text-wrap: pretty;
}
/* The word quoted back with the two repeated letters in ink and everything
   between them faint, so the eye skips the gap. Set in mono, because the word
   is being read as a sequence. */
.verdict-say .quote {
  font-family: var(--pp-font-mono);
  letter-spacing: 0.08em;
  color: var(--pp-faint);
  white-space: nowrap;
}
.verdict-say .quote b {
  color: var(--pp-ink);
}

/* Four short facts under the verdict. Two columns of term and value on a wide
   screen, stacked below, matching the key on the index. */
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.9rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
.facts dt {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
.facts dd {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
  overflow-wrap: anywhere;
}

/* The strip: twenty-six squares in position order, wrapping rather than
   scrolling. An alphabet in two rows of thirteen is still readable; one that
   runs off the screen is not. auto-fit rather than a fixed thirteen, so the
   break lands where the column ends. */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.05rem, 1fr));
  gap: 0.3rem;
}
.cell {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.3rem 0.1rem 0.25rem;
  border: var(--pp-rule-line) solid transparent;
  border-radius: var(--pp-radius-sm);
  font-family: var(--pp-font-mono);
  line-height: 1;
}
/* The letter that normally has this square, struck through, above the one that
   has it now. Only printed where the two differ; elsewhere the line is a
   non-breaking space, which holds every square the same height without
   printing anything. A square that says nothing is a square nothing happened
   to, and that is most of them. */
/* The strike belongs to the moved squares alone. On an unchanged square this
   line holds a space, purely to keep every square the same height — and a
   strike drawn through a space is a dash, which is how twenty-two squares that
   nothing happened to came to look annotated. */
.cell-was {
  font-size: var(--pp-size-label);
  color: var(--pp-faint);
}
.cell.is-moved .cell-was {
  text-decoration: line-through;
  text-decoration-thickness: var(--pp-rule-hairline);
}
.cell-now {
  font-size: 1rem;
  color: var(--pp-muted);
}
.cell-at {
  font-size: 0.6rem;
  color: var(--pp-faint);
  opacity: 0.65;
}
/* Two marks, and they stack: a square can hold a letter that moved, a letter
   the word uses, or both. Moved is the fainter claim and takes ink weight
   alone; a letter of the word takes the structural edge, because those
   twenty-six squares exist to be read for the six or seven that matter. */
.cell.is-moved .cell-now {
  color: var(--pp-ink);
}
.cell.is-word {
  border-color: var(--pp-edge);
  border-width: var(--pp-rule-structure);
  padding: calc(0.3rem - 1px) 0 calc(0.25rem - 1px);
}
.cell.is-word .cell-now {
  color: var(--pp-ink);
  font-weight: 700;
}

/* ── The swaps ─────────────────────────────────────────────────────────────
   A numbered list, because they are applied in order, and the number is the
   step rather than a bullet. */
.swaps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  counter-reset: swap;
}
.swap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.swap::before {
  counter-increment: swap;
  content: counter(swap);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  color: var(--pp-faint);
}
.swap-pair {
  padding: 0.2rem 0.45rem;
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* The no-swaps line is not step zero of a sequence, it is the absence of the
   sequence, so it takes neither the counter nor the box — it is a different
   class rather than a .swap with the parts turned off. */
.swap-none {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

/* ── The word, re-read ─────────────────────────────────────────────────────
   Each letter over the place it now occupies. The numbers only ever go up,
   and that is the proof, so they are set as figures under the letters rather
   than described in a sentence. */
.reread {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.glyph {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  min-width: 1.8rem;
  padding: 0.3rem 0.25rem;
  border-bottom: var(--pp-rule-line) solid var(--pp-line);
  font-family: var(--pp-font-mono);
  line-height: 1;
}
.glyph-l {
  font-size: 1rem;
  color: var(--pp-ink);
}
.glyph-n {
  font-size: 0.68rem;
  color: var(--pp-faint);
}

/* ── Which letters carry it ────────────────────────────────────────────────
   The same figure-under-letter form as the re-read above, and deliberately:
   both print the word out with a number under each letter, and a reader who
   has learned to read one has learned to read the other. There the number is
   where the letter sits; here it is what the word would cost without it.

   A letter carrying nothing is set faint and keeps the hairline rule — it is
   the absence of a claim rather than a claim of zero, and most letters of most
   words are one. A letter that is carrying takes the ink, the weight and the
   structural rule under it, so the answer can be read off the row at a glance
   without reading a single number. */
.carry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.carry-cell {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  min-width: 1.8rem;
  padding: 0.3rem 0.25rem;
  border-bottom: var(--pp-rule-line) solid var(--pp-line);
  font-family: var(--pp-font-mono);
  line-height: 1;
}
.carry-cell.is-load {
  border-bottom-width: var(--pp-rule-structure);
  border-bottom-color: var(--pp-edge);
  padding-bottom: calc(0.3rem - 1px);
}
.carry-l {
  font-size: 1rem;
  color: var(--pp-faint);
}
.carry-cell.is-load .carry-l {
  color: var(--pp-ink);
  font-weight: 700;
}
.carry-n {
  font-size: 0.68rem;
  color: var(--pp-faint);
}
.carry-cell.is-load .carry-n {
  color: var(--pp-muted);
}
/* Not yet measured. A long word's audit arrives letter by letter, and a cell
   that has not had its turn prints a middle dot rather than a nought: nought
   is an answer this cell does not have yet. */
.carry-cell.is-wait .carry-n {
  opacity: 0.5;
}

/* ── The word inside the word ──────────────────────────────────────────────
   Set in mono, unlike the record words at the foot of the page, and the
   difference is deliberate: those are words a dictionary holds and are read as
   words, these are strings the search made and are usually not words at all.
   Mono is this page's voice for the machine talking.

   Pressable, and marked as pressable the same way the record words are — an
   underline rather than a box, because a box around each of eleven of them
   would build a wall. */
.cores {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.5rem;
}
.core-word {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--pp-font-mono);
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
  text-decoration: underline;
  text-decoration-color: var(--pp-line);
  text-decoration-thickness: var(--pp-rule-hairline);
  text-underline-offset: 0.22em;
}
.core-word:hover {
  text-decoration-color: var(--pp-edge);
}
.core-word:active {
  transform: var(--w-press);
}
/* The count of the ones not printed, and the measuring line before any of them
   are. Both are the page talking about the list rather than an item in it. */
.core-more,
.core-wait {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

/* Noticed while measuring the row above, and not caused by it: the meta over
   the seed panel is "of 26! = 403,291,461,126,605,635,584,000,000", and a
   thirty-five character run with no space in it has no break opportunity, so
   below about 380px it pushed the whole page sideways by its overhang. The
   same answer the seed itself already takes — break inside the number rather
   than scroll the document — and it only ever applies when it has to. */
.result-bar .meta {
  overflow-wrap: anywhere;
}

/* The seed. Evidence rather than reading: twenty-seven digits nobody takes in
   at a glance, wrapping anywhere rather than forcing the sheet sideways. */
.seed {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
  overflow-wrap: anywhere;
}

/* ── Two columns where two columns fit ─────────────────────────────────── */
.two {
  display: grid;
  gap: var(--pp-space-4);
}
@media (min-width: 780px) {
  .two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

section[data-when],
#result > div,
#result > section {
  margin-bottom: var(--pp-space-4);
}
#result > div:last-child {
  margin-bottom: 0;
}

/* ── The switches ─────────────────────────────────────────────────────────
   They used to be the legend, back when four inks named four languages. Two
   things happened: the survey went to thirteen dictionaries, which four inks
   cannot name, and then both figures became stacks read off one ordinal ramp,
   which names distances and not languages.

   So there is no identity colour left on this page, and the switches carry
   none. A coloured square here would be a vocabulary pointing at nothing. A
   language is named — on its switch, on its row, in the records and in the
   table — and a name is the one label that never runs out.

   The cap went with the inks. There were four of them, so four could be shown;
   a stack is a row, rows are cheap, and any number can be on at once. */

/* The switch row: the four dictionaries on the left, the table on the right.
   One row, above the sheet, because it scopes what is in the sheet. */
.corpus-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
}
.picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Same cut as a preset in base.css — this is a row of small controls acting as
   one — with the ink added, since the switch is the legend too. */
.pick {
  height: var(--pp-target-compact);
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  background: transparent;
  font-family: var(--pp-font-mono);
  font-size: 0.76rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
.pick:hover {
  border-color: var(--pp-edge);
  color: var(--pp-ink);
}
.pick:active {
  transform: var(--w-press);
}
.pick.is-on {
  color: var(--pp-ink);
  border-color: var(--pp-edge);
}
/* An unstruck record row steps back to the muted ink, so the four the
   switches are on read first without the other nine going away. */
.peak:not(.is-lit) .peak-lang,
.peak:not(.is-lit) .peak-word,
.met:not(.is-lit) .peak-lang,
.met:not(.is-lit) .peak-word,
.met:not(.is-lit) .met-word {
  color: var(--pp-muted);
}

/* ── The figure ──────────────────────────────────────────────────────────── */
.chart-wrap {
  position: relative;
}
.chart {
  display: block;
  max-width: 100%;
  touch-action: pan-y;
}
.chart:focus-visible {
  outline: var(--pp-rule-structure) solid var(--pp-edge);
  outline-offset: 2px;
}

/* Solid hairlines one step off the sheet. A dashed grid reads as a threshold
   or a projection; this one is only a ruler, and the baseline is the one line
   the columns actually stand on, so it takes the heavier rule. */
.ax-grid {
  stroke: var(--pp-hair);
  stroke-width: var(--pp-rule-hairline);
}
.ax-base {
  stroke: var(--pp-line);
  stroke-width: var(--pp-rule-line);
}
.ax-tick,
.ax-title {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  fill: var(--pp-faint);
}
.ax-tick-x { text-anchor: middle; }
/* The tick for the distance the field just answered, in ink, so the figure and
   the number above it are reading the same word. */
.ax-tick-x.is-at { fill: var(--pp-ink); }
/* And the hairline down its band. */
.ax-mark {
  stroke: var(--pp-edge);
  stroke-width: var(--pp-rule-hairline);
}
.ax-title { text-anchor: middle; }

/* The reader's word, annotated onto both figures. It used to be a hairline
   down a distance axis; there is no distance axis left, so it outlines the
   band the word falls in, on every row, and the word is written once above the
   first. An outline rather than a fill, because the fill is carrying a value
   and must not move because somebody typed. */
.seg-at {
  fill: none;
  stroke: var(--pp-edge);
  stroke-width: var(--pp-rule-line);
}
.ax-mark-label {
  text-anchor: middle;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  fill: var(--pp-ink);
}

/* The hit target is the whole band, floor to ceiling. A 3px column is a
   pinpoint; a distance is something a reader can actually aim at. */
.band {
  fill: transparent;
}
.band.is-on {
  fill: var(--w-wash-0);
}

/* The readout. Pinned to the band it describes and pulled inside the sheet at
   the edges; the number leads and the dictionary follows, because the reader
   arrived holding the dictionary and wants the figure. */
.chart-tip {
  position: absolute;
  top: 0;
  z-index: 5;
  min-width: 11rem;
  padding: 0.4rem 0.6rem;
  background: var(--pp-surface);
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
  box-shadow: 0 2px 8px var(--pp-shadow);
  pointer-events: none;
}
.tip-head {
  margin: 0 0 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--pp-rule-hairline) solid var(--pp-hair);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
.tip-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.7rem;
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
}
.tip-rows dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--pp-muted);
}
/* A swatch rather than a stroke: it is showing a step of a ramp, and a 2px
   line of a pale ochre against paper reads as nothing at all. */
.tip-key {
  width: 12px;
  height: 9px;
  flex: none;
  background: var(--abc-ink);
}
.tip-rows dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.45rem;
  white-space: nowrap;
}
.tip-rows b {
  font-weight: 700;
  color: var(--pp-ink);
}
.tip-n {
  color: var(--pp-faint);
}
/* The range across every dictionary, which is what the grey lines are worth as
   a number. Separated by a rule because it is not a fourteenth series: it is
   the extent of the ones this readout has not named. */
.tip-all {
  margin-top: 0.15rem;
  padding-top: 0.25rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
  color: var(--pp-faint);
}

/* ── The four inks ─────────────────────────────────────────────────────────
   The first figure's colour, and a different job from the ramp below it.

   There a bar is a dictionary and a segment is a distance, so colour says how
   many swaps and takes one hue in steps. Here a bar is a distance and a
   segment is a DICTIONARY, so colour says which language — an identity, where
   nothing follows from the order and a ramp would be inventing a sequence that
   is not there. Two vocabularies, and each is right about its own segments.

   These four were searched for rather than picked, under five constraints at
   once: inside the lightness band for the mode, chromatic enough not to read
   as grey, at least 3:1 against the sheet, and every one of the six pairs at
   least ΔE 8 apart under both protanopia and deuteranopia and at least 15
   apart under ordinary vision. All six pairs, not just neighbours, because any
   two of them can end up adjacent in a stack. The set clears all of it: worst
   pair 12.0 under simulated colour blindness and 21.7 under ordinary vision in
   light, 8.9 and 18.2 in dark. Then searched again for the quietest set that
   still clears it, because the first set that passed was neon.

   Dark is its own selection rather than the same hex on a dark ground: the
   band is narrower there, so every one of the four moved.

   An ink is a SLOT, not a language — four inks cannot name thirteen. A
   language holds a slot while it is drawn and gives it up when it is not, so
   the classes are numbered rather than named. */
:root {
  --abc-ink-0: #298805;
  --abc-ink-1: #1299de;
  --abc-ink-2: #5f4589;
  --abc-ink-3: #cd5a97;
}
[data-mode='dark'] {
  --abc-ink-0: #298c01;
  --abc-ink-1: #4494c8;
  --abc-ink-2: #814ec6;
  --abc-ink-3: #d8559b;
}
.ink-0 { --abc-ink: var(--abc-ink-0); }
.ink-1 { --abc-ink: var(--abc-ink-1); }
.ink-2 { --abc-ink: var(--abc-ink-2); }
.ink-3 { --abc-ink: var(--abc-ink-3); }
.ghost { --abc-ink: var(--pp-line); }

/* Filled when the dictionary is in the figure above, an outline of its own ink
   when it is not — the same relationship the index's custody pips use, and it
   means the switch says its own state without leaning on the border weight. */
.pick-ink {
  width: 9px;
  height: 9px;
  flex: none;
  border: var(--pp-rule-hairline) solid var(--abc-ink);
  background: transparent;
}
.pick.is-on .pick-ink {
  background: var(--abc-ink);
}

/* ── The ordinal ramp ──────────────────────────────────────────────────────
   Both figures' colour, and it is the only colour vocabulary left on the page.

   It names distances, where 3 comes after 2 and the order IS the meaning — so
   it is one hue in monotone lightness steps, and it was checked as a ramp
   rather than as a palette: lightness strictly monotone, every adjacent gap at
   least 0.06, the end nearest the sheet still clearing 2:1 against it, and one
   hue throughout (measured spread: 4° light, 1° dark). Eight steps is what
   those gates allow while the pale end stays off the paper — eleven would need
   a lightness range that runs out of both ends of the page — which is why the
   ramp stops at "7 or more".

   Ochre, at hue 70. That mattered more when four identity inks sat at 140,
   240, 300 and 350 and a shared hue would have meant a language in one figure
   and a distance in the next; those inks are gone now, but the hue is the one
   that was validated and there is no reason to move it.

   Dark mode re-anchors rather than inverting: the step nearest the surface is
   still the one nearest zero, so the ramp always reads as "more ink, more
   swaps" whichever way the paper goes.

   "None" is not on the ramp and never should be. It is not a distance, and
   giving it a step would file it in a sequence it does not belong to, so it
   takes a neutral — the only colour in either figure that is not the hue. */
:root {
  --abc-step-0: #d0a97d;
  --abc-step-1: #bc966a;
  --abc-step-2: #a88257;
  --abc-step-3: #947045;
  --abc-step-4: #815e33;
  --abc-step-5: #6e4c20;
  --abc-step-6: #5c3b0c;
  --abc-step-7: #4a2a00;
  --abc-none: color-mix(in srgb, var(--pp-ink) 15%, var(--pp-surface));
}
[data-mode='dark'] {
  --abc-step-0: #725430;
  --abc-step-1: #856642;
  --abc-step-2: #987854;
  --abc-step-3: #ac8b66;
  --abc-step-4: #c09f79;
  --abc-step-5: #d4b28c;
  --abc-step-6: #e9c69f;
  --abc-step-7: #fedbb3;
  --abc-none: color-mix(in srgb, var(--pp-ink) 22%, var(--pp-surface));
}
.step-0 { --abc-ink: var(--abc-step-0); }
.step-1 { --abc-ink: var(--abc-step-1); }
.step-2 { --abc-ink: var(--abc-step-2); }
.step-3 { --abc-ink: var(--abc-step-3); }
.step-4 { --abc-ink: var(--abc-step-4); }
.step-5 { --abc-ink: var(--abc-step-5); }
.step-6 { --abc-ink: var(--abc-step-6); }
.step-7 { --abc-ink: var(--abc-step-7); }
.seg-none { --abc-ink: var(--abc-none); }

.seg {
  fill: var(--abc-ink);
}
.stack-name {
  text-anchor: end;
  font-family: var(--pp-font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--w-track-mono);
  fill: var(--pp-muted);
}
.stack-share {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  fill: var(--pp-faint);
}

/* The key. One continuous strip with its ends named, because eight steps of
   one hue are a scale and eight separate swatches would invite the reader to
   look each one up instead of reading the direction. The neutral stands off
   past a gap: it is not on the scale, and the gap is what says so. */
.ramp-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
.ramp-scale,
.ramp-off {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ramp-strip {
  display: flex;
}
.ramp-strip i,
.ramp-off i {
  width: 20px;
  height: 9px;
  background: var(--abc-ink);
}
.ramp-end {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

/* ── Where words meet ──────────────────────────────────────────────────────
   The same row form as the records below it, one dictionary to a line, and
   deliberately so: both are per-dictionary findings and a reader who has
   learned to scan one column has learned the other.

   Three tracks rather than that list's three-of-a-different-shape: the name,
   then the root family with its words printed out, then the core with only its
   count. The asymmetry is the point — a root family is nine words and can be
   shown whole, and naming four of the hundred and eighty-five words that come
   down to "oe" would be four arbitrary words dressed as a finding. */
.mets {
  display: grid;
  gap: 0.55rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.met {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  align-items: baseline;
}
.met + .met {
  padding-top: 0.55rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
@media (min-width: 620px) {
  .met {
    grid-template-columns: 8.5rem minmax(0, 1fr) 8.5rem;
  }
}
/* The key of a family — a root or a core — is a string the machine made, so it
   takes the mono face, and the count rides with it rather than in a track of
   its own: they are one fact and splitting them would leave two columns that
   only mean anything side by side. */
.met-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.45rem;
}
.met-word {
  font-family: var(--pp-font-mono);
  font-size: 0.86rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}
.met-n {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
/* Which of the two families this is. The label face, faint, because it names
   the field rather than being one — the same job the terms in the fact list up
   in the results do, and set to match them. */
.met-tag {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
  opacity: 0.75;
}
/* The core column is a number about a family too big to print, so it is set
   the way the record column is: right where a wide sheet lines them up, and
   back in the flow where the row has stacked. */
@media (min-width: 620px) {
  .met-core {
    justify-content: flex-end;
  }
}

/* ── The far end, named ────────────────────────────────────────────────────
   One row per dictionary: the ink and the name, the record, then the words
   that hold it. Three tracks on a wide sheet so the records line up and can be
   compared down the column; stacked below, where they cannot.

   Not a table. Four rows of three fields is a list of four things, and giving
   it a header row and rules would make the page look like it had two tables
   when the second one is a caption for a figure. */
.peaks {
  display: grid;
  gap: 0.55rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.peak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  align-items: baseline;
}
.peak + .peak {
  padding-top: 0.55rem;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
@media (min-width: 620px) {
  .peak {
    grid-template-columns: 8.5rem 5.5rem minmax(0, 1fr);
  }
}
.peak-who {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.peak-lang {
  font-family: var(--pp-font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}
/* The record wears the label face, because it is the machine's answer and the
   same figure the axis above is ruled in. */
.peak-d {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
.peak-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.45rem;
}
/* A word, and a control. Set in the body face rather than mono, because it is
   a word being read as a word — everywhere else on this page mono means the
   machine is talking. The underline is what says it can be pressed; a box
   around each of seventeen of them would build a wall. */
.peak-word {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--pp-font-body);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--pp-ink);
  text-decoration: underline;
  text-decoration-color: var(--pp-line);
  text-decoration-thickness: var(--pp-rule-hairline);
  text-underline-offset: 0.22em;
}
.peak-word:hover {
  text-decoration-color: var(--pp-edge);
}
.peak-word:active {
  transform: var(--w-press);
}
.peak-more {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

/* ── The numbers ───────────────────────────────────────────────────────────
   The figures' twin. One number to a cell, right-aligned on tabular figures so
   a column of counts can be read down as well as across.

   What went wrong before: base.css gives every sheet table a fixed layout, and
   these cells carried a count and a percentage with a gap held open by
   white-space: pre. Fixed tracks plus text that cannot wrap does not clip and
   does not scroll — it simply overflows into the next column and prints on top
   of it. The percentages are gone (they belong to a figure, which has an axis
   to put them on), the layout is the table's own, and nothing in a cell can
   collide with its neighbour. */
.corpus-table {
  margin-top: var(--pp-space-3);
}
.corpus-table table {
  table-layout: auto;
}
.corpus-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The dictionary's name, which is the row's handle. Ink rather than faint,
   because at thirteen rows it is what a reader is scanning for. */
.corpus-table .num-key {
  color: var(--pp-ink);
  white-space: nowrap;
  width: 1%;
}
/* The three totals the figures divide by, fenced off from the eleven counts by
   a rule down the side rather than by a colour: they are the same kind of
   number, read for a different reason. */
.corpus-table td.num-sum,
.corpus-table th.num-wide {
  color: var(--pp-muted);
}
.corpus-table td.num-sum:first-of-type,
.corpus-table th.num-wide:first-of-type {
  border-left: var(--pp-rule-line) solid var(--pp-line);
}
.table-note {
  padding: 0 0.8rem 0.7rem;
}

/* The second figure's own band, which is a heading rather than the top of the
   section, so it takes the space a sheet keeps above it. */
.corpus-second {
  margin-top: var(--pp-space-5);
}

.corpus {
  margin-top: var(--pp-space-5);
}