/* Daily Tape history — /tape/history.
   The archive's own index: the volume index of the Daily Tape record family, not an analytics
   dashboard. It renders only from data/tape-history.json, which is generated from the frozen
   records, so nothing here has a loading state, a live figure or a chart.

   It is composed on the record family's grammar, the same one css/tape-record.css gives the dated
   Almanac and css/tape.css gives the latest record: an accent rule over an uppercase eyebrow, then
   the identity, then a stamped status line; sections separated by hairline rules and titled in
   small tracked uppercase; figures in tabular mono under small tracked labels. There are no
   floating cards, because a card is a thing that could have been arranged differently and the
   order of an archive index could not.

   What stays the History page's own is its job: it indexes, and it is the one surface that answers
   "what is the latest record", "what does the archive cover" and "which dates carry a record" in
   one document.

   Four rules shape the whole file:

   1. No meaning is carried by colour alone. Every status — canonical, bootstrap, declared gap — is
      spelled out in visible text inside the cell or row that carries it. The colour, the border
      style and the hatch are reinforcement, never the signal.
   2. The month calendar is desktop-only, and the register is not its mobile fallback — the register
      is always present and always complete. Below the calendar breakpoint the calendar is removed
      entirely rather than squeezed, because a seven-column grid at 360px is a grid nobody can hit.
   3. Register columns are proportional, never fixed. Fixed track minimums are what made the
      Continuity column fall off the page between 761px and ~840px before this file was rewritten.
   4. tokens.css applies `section { padding: var(--gap) 0 }` site-wide, so every section here resets
      its padding explicitly and carries its rhythm on margin and one hairline rule instead.

   Everything resolves through the shared semantic roles in css/tokens.css, so the route follows the
   site-wide System/Light/Dark selection like every other converged surface. */

:root {
  /* Overlay channel, mirroring css/tape-record.css so both Daily Tape surfaces build hairlines and
     insets the same way. Dark keeps white overlays; light inks them so they read on cream paper. */
  --tape-history-tint: 255, 255, 255;
  --th-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --th-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root:not([data-theme="dark"]):not([data-theme-lock="dark"]),
:root[data-theme="light"] {
  --tape-history-tint: 24, 28, 36;
}

body {
  background: var(--theme-surface-page);
  color: var(--theme-ink-primary);
  font-family: var(--th-sans);
  line-height: 1.55;
  margin: 0;
}

.th-page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 3.4rem 1.5rem 4rem;
  box-sizing: border-box;
}

/* ── Sections ────────────────────────────────────────────────────────────────────────────────── */

/* One rule, one rhythm, for every region of the page. Mirrors `.al-column > section` on the dated
   record and `.tape-shell > section` on the latest one. */
.th-page > section,
.th-page > nav {
  margin: 2.25rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--theme-rule-standard);
}

.th-page > section > h2,
.th-page > nav > h2 {
  margin: 0 0 .55rem;
  font-family: var(--th-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

/* ── Page head ───────────────────────────────────────────────────────────────────────────────── */

.th-pagehead {
  border-top: 2px solid var(--theme-accent);
  padding-top: .8rem;
}

.th-eyebrow {
  font-family: var(--th-sans);
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  margin: 0 0 .35rem;
}

.th-page h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  font-weight: 650;
  margin: 0;
  color: var(--theme-ink-primary);
}

/* The coverage line: the stamped status line of the dated record, carrying the archive's own
   extent instead of a record's status. */
.th-coverage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: .7rem 0 0;
}

.th-stamp {
  font-family: var(--th-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .16rem .48rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* Mirrors `.al-stamp--canonical`: a border and static type, legible at frame zero. */
.th-stamp--archive,
.th-stamp--canonical {
  color: var(--theme-ink-link);
  border: 1px solid var(--theme-accent);
  background: var(--theme-accent-surface);
}

.th-stamp--bootstrap {
  color: var(--theme-status-warning-ink);
  border: 1px dashed var(--theme-status-warning-ink);
  background: var(--theme-status-warning-surface);
}

.th-coverage-line {
  font-size: .82rem;
  color: var(--theme-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.th-lede {
  color: var(--theme-ink-secondary);
  margin: .9rem 0 0;
  max-width: 62ch;
  font-size: .93rem;
}

/* ── Latest record ───────────────────────────────────────────────────────────────────────────── */

/* The page's lead entry, and the only element besides the identity set at display size. It answers
   the archive index's first question — what is the latest available frozen record — before the
   coverage list, the month controls or the calendar are reached. Its section heading is the only
   label it needs; a second kicker over the date would say the same thing twice. */
.th-page > section.th-latest > h2 {
  color: var(--theme-accent-hover);
}

.th-latest-date {
  margin: 0;
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  font-weight: 650;
  letter-spacing: -.024em;
  line-height: 1.06;
}

.th-latest-date a {
  color: var(--theme-ink-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--theme-accent);
}

.th-latest-date a:hover {
  color: var(--theme-ink-link);
}

.th-latest-date a:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

.th-latest-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
  margin: .7rem 0 0;
}

.th-latest-note {
  font-size: .76rem;
  color: var(--theme-ink-secondary);
}

.th-latest-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: .85rem 1.1rem;
  margin: 1.15rem 0 0;
}

.th-latest-figure {
  border-top: 1px solid var(--theme-rule-standard);
  padding-top: .55rem;
  min-width: 0;
}

.th-latest-figure dt {
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.th-latest-figure dd {
  margin: .18rem 0 0;
  font-family: var(--th-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--theme-ink-primary);
  overflow-wrap: anywhere;
}

.th-latest-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 1.2rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--theme-rule-subtle);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 650;
}

.th-latest-nav a {
  color: var(--theme-ink-link);
  text-decoration: none;
}

.th-latest-nav a::after {
  content: ' \2192';
}

.th-latest-nav a:hover {
  text-decoration: underline;
}

.th-latest-nav a:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 3px;
}

/* ── Archive coverage ────────────────────────────────────────────────────────────────────────── */

/* The volume's front matter, set as the dated record's colophon list is: hairline-ruled term and
   value rows in two columns, not a tinted panel of tiles. */
/* `min(…, 100%)` rather than a bare track minimum: an auto-fit track floor is still a floor, and a
   26rem floor is wider than a 360px phone. The column collapses to the available width instead of
   pushing the values off the page. */
.th-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: 0 3rem;
  margin: 0;
}

/* 15rem holds the longest term — "Continuous canonical series begins" — on one line, so the
   hairlines stay level across both columns. */
.th-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
  padding: .45rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
}

.th-facts dt {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  margin: 0;
}

.th-facts dd {
  margin: 0;
  font-size: .86rem;
  color: var(--theme-ink-primary);
  font-variant-numeric: tabular-nums;
}

.th-facts dd a {
  color: var(--theme-ink-link);
}

/* ── Month navigation ────────────────────────────────────────────────────────────────────────── */

/* auto-fill, not auto-fit: three months take three index columns, not a third of the page each.
   The row reads as the head of a volume index and keeps its shape as the archive grows. */
.th-months ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}

.th-month-link {
  display: block;
  padding: .5rem .75rem .55rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  color: var(--theme-ink-link);
  text-decoration: none;
}

.th-month-link-label {
  display: block;
  font-size: .92rem;
  font-weight: 650;
}

.th-month-link-count {
  display: block;
  margin-top: .1rem;
  font-size: .7rem;
  color: var(--theme-ink-muted);
  font-variant-numeric: tabular-nums;
}

.th-month-link:hover {
  background: var(--theme-surface-hover);
}

.th-month-link:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

/* Current month: a solid leading rule AND the word "current" in the accessible name, so the state
   is not read from a fill alone. */
.th-month-link[aria-current="page"] {
  border-top-color: var(--theme-accent);
  box-shadow: inset 3px 0 0 var(--theme-accent);
  padding-left: .65rem;
}

.th-month-link[aria-current="page"] .th-month-link-label {
  color: var(--theme-ink-primary);
}

/* ── Month section ───────────────────────────────────────────────────────────────────────────── */

/* The page's principal body, so its rule is the accent one. Everything else is hairline. */
.th-page > section.th-month {
  margin-top: 2.75rem;
  padding-top: .8rem;
  border-top: 2px solid var(--theme-accent);
}

.th-month-sum {
  margin: .3rem 0 0;
  color: var(--theme-ink-secondary);
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

/* A month that contains declared gaps says so where the month is shown. Ochre-ruled rather than
   ochre-filled: it is a statement about the archive, not a warning. */
.th-month-gap {
  margin: .7rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--theme-status-warning-ink);
  max-width: 66ch;
  font-size: .8rem;
  color: var(--theme-ink-secondary);
}

/* ── Calendar ────────────────────────────────────────────────────────────────────────────────── */

.th-cal {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 0;
  table-layout: fixed;
}

.th-cal caption {
  text-align: left;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  padding-bottom: .5rem;
}

.th-cal th {
  font-family: var(--th-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  font-weight: 500;
  text-align: left;
  padding: 0 0 .35rem .5rem;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.th-cal th abbr {
  text-decoration: none;
  border: 0;
}

.th-cal td {
  padding: 0;
  vertical-align: top;
  border-bottom: 1px solid var(--theme-rule-subtle);
}

/* A day is a ruled entry in a grid, not a tile. The only box is the grid itself. */
.th-cell {
  display: block;
  padding: .4rem .5rem .5rem;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--theme-ink-primary);
}

.th-cell-n {
  display: block;
  font-family: var(--th-mono);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.th-cell-tag {
  display: block;
  margin-top: .2rem;
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
  overflow-wrap: anywhere;
}

.th-cell-v {
  display: block;
  margin-top: .1rem;
  font-family: var(--th-mono);
  font-size: .66rem;
  color: var(--theme-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A canonical day: a solid rule down the leading edge, plus the word "Canonical". */
a.th-cell--canonical {
  border-left: 3px solid var(--theme-accent);
  background: rgba(var(--tape-history-tint), .035);
}

/* A bootstrap day: a dashed leading edge so the difference is legible in greyscale and in print,
   plus the word "Bootstrap". */
a.th-cell--bootstrap {
  border-left: 3px dashed var(--theme-rule-strong);
  background: transparent;
}

a.th-cell:hover {
  background: var(--theme-surface-hover);
}

a.th-cell:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: -2px;
}

/* A declared gap: not a link, because there is nothing to open. Hatched, and it says "Gap". */
.th-cell--gap {
  border-left: 3px dotted var(--theme-status-warning-ink);
  color: var(--theme-ink-muted);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(var(--tape-history-tint), .07) 0 3px,
    transparent 3px 7px
  );
}

.th-cell--gap .th-cell-n {
  font-weight: 500;
}

/* Outside the retained archive: no record was ever due here. Left visually silent, and given no
   status word, because it is not an archive event. It also carries no minimum height, so a week
   that is entirely outside the archive collapses to a single ruled line instead of holding open a
   row of empty tiles. Muted rather than disabled ink: the day number is still real information
   about the calendar, and nothing here is an inactive control that WCAG would exempt from the
   contrast minimum. */
.th-cell--outside {
  color: var(--theme-ink-muted);
  padding-bottom: .4rem;
}

.th-cell--outside .th-cell-n {
  font-weight: 400;
}

/* Selected / latest day. The rule is reinforcement; ".th-cell-state" carries the word. */
.th-cell[aria-current="date"] {
  background: var(--theme-accent-surface);
  box-shadow: inset 0 0 0 1px var(--theme-accent);
}

.th-cell-state {
  display: block;
  margin-top: .12rem;
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--theme-accent-hover);
}

/* ── Legend ──────────────────────────────────────────────────────────────────────────────────── */

.th-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.5rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .74rem;
  color: var(--theme-ink-secondary);
}

/* ── Register ────────────────────────────────────────────────────────────────────────────────── */

.th-register {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

/* Proportional tracks, so the register narrows with the column instead of falling off it. Three
   numeric columns are right-aligned and set in tabular mono, so a figure reads down the column. */
.th-reg {
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, .95fr)
    minmax(0, .85fr)
    minmax(0, .85fr)
    minmax(0, 1fr);
  gap: .2rem .9rem;
  align-items: baseline;
  padding: .5rem .35rem;
  border-bottom: 1px solid var(--theme-rule-subtle);
  font-size: .88rem;
}

.th-reg--head {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  padding-top: 0;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--theme-rule-standard);
}

.th-reg-h-num {
  text-align: right;
}

.th-reg--gap {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(var(--tape-history-tint), .05) 0 3px,
    transparent 3px 7px
  );
  color: var(--theme-ink-secondary);
}

.th-reg--selected {
  background: var(--theme-surface-inset);
  box-shadow: inset 3px 0 0 var(--theme-accent);
}

.th-reg-date {
  font-weight: 650;
  color: var(--theme-ink-link);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.th-reg-date:hover {
  text-decoration: underline;
}

.th-reg-date:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}

.th-reg-date--gap {
  font-weight: 650;
  color: var(--theme-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.th-reg-status {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--theme-ink-secondary);
}

.th-reg-figure {
  font-family: var(--th-mono);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
  color: var(--theme-ink-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

.th-reg--gap .th-reg-figure,
.th-reg--gap .th-reg-note {
  color: var(--theme-ink-secondary);
}

/* The per-row provenance line: the stored M2 reference month, the continuity state and the
   integrity state, on one fine line under the figures. Full width by design rather than three more
   columns, because for a bootstrap record the integrity state is a sentence and not a value, and
   because these three facts have to travel with the row when a row is quoted or printed. */
.th-reg-fine {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.25rem;
  margin-top: .15rem;
  font-size: .76rem;
  color: var(--theme-ink-secondary);
}

.th-reg-meta {
  color: var(--theme-ink-secondary);
}

.th-reg-note {
  color: var(--theme-ink-secondary);
  max-width: 66ch;
}

.th-reg-label,
.th-reg-note-label {
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
  margin-right: .4rem;
}

/* Figure labels: hidden on the desktop register because the header row already names each column,
   shown inline on mobile where there is no header row. Never removed from the DOM, so the
   accessible name of each figure is complete at every width. */
.th-reg-figure .th-reg-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Month pager ─────────────────────────────────────────────────────────────────────────────── */

/* The dated record's `.al-datenav`: a ruled band rather than two floating buttons. */
.th-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--theme-rule-subtle);
  border-bottom: 1px solid var(--theme-rule-subtle);
}

.th-pager a,
.th-pager-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  padding: .65rem .1rem;
  min-width: 0;
  text-decoration: none;
}

.th-pager a {
  color: var(--theme-ink-link);
  transition: transform .16s ease;
}

.th-pager a[rel="next"],
.th-pager-empty--next {
  text-align: right;
  align-items: flex-end;
}

.th-pager a[rel="prev"]:hover { transform: translateX(-2px); }
.th-pager a[rel="next"]:hover { transform: translateX(2px); }

.th-pager a:focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: -2px;
}

.th-pager-dir {
  font-size: .62rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}

.th-pager-month {
  font-size: .9rem;
  font-weight: 650;
}

.th-pager-empty {
  color: var(--theme-ink-muted);
  font-size: .76rem;
}

/* ── Notes on the archive ────────────────────────────────────────────────────────────────────── */

.th-notes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-notes li {
  max-width: 74ch;
  padding: .7rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  color: var(--theme-ink-secondary);
  font-size: .85rem;
}

.th-notes li:first-child {
  border-top: 0;
  padding-top: 0;
}

.th-notes strong {
  color: var(--theme-ink-primary);
  font-weight: 650;
}

/* ── Using a record ──────────────────────────────────────────────────────────────────────────── */

.th-use-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.th-use-list li {
  max-width: 74ch;
  padding: .7rem 0;
  border-top: 1px solid var(--theme-rule-subtle);
  color: var(--theme-ink-secondary);
  font-size: .85rem;
}

.th-use-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.th-use-list a {
  color: var(--theme-ink-link);
}

.th-page code {
  font-family: var(--th-mono);
  font-size: .78rem;
  color: var(--theme-mono-ink);
  background: var(--theme-mono-surface);
  border-radius: 3px;
  padding: .06rem .3rem;
  overflow-wrap: anywhere;
}

.th-provenance {
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--theme-rule-subtle);
  max-width: 74ch;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--theme-ink-muted);
}

/* ── Tablet: the register loses its column rhythm before it loses the calendar ────────────────── */

/* Between the calendar breakpoint and roughly a small laptop the five columns are legible but
   tight, so the fine line and the head shrink rather than the figures. */
@media (max-width: 920px) {
  .th-page {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .th-reg {
    gap: .2rem .65rem;
    font-size: .84rem;
  }

  .th-facts > div {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: .6rem;
  }
}

/* ── Mobile: independently composed ──────────────────────────────────────────────────────────── */

/* The calendar leaves at 760px. Below that the register is the whole navigation, and it is
   recomposed rather than squeezed: date and status on their own line, the three figures side by
   side beneath them under visible labels, then the provenance line. Every record and every
   declared gap in the month is still present and still reachable, and the legend that explains the
   status words stays — it is the only place they are defined. */
@media (max-width: 760px) {
  .th-page {
    padding: 2.4rem 1rem 3rem;
  }

  .th-cal-wrap {
    display: none;
  }

  .th-legend {
    display: grid;
    gap: .25rem;
    margin-top: .9rem;
  }

  .th-reg--head {
    display: none;
  }

  .th-reg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem .75rem;
    padding: .75rem .25rem;
  }

  .th-reg-date,
  .th-reg-date--gap {
    grid-column: 1 / 3;
    font-size: 1rem;
  }

  .th-reg-status {
    grid-column: 3;
    text-align: right;
  }

  /* A gap row carries no figures, so its status is given the whole right-hand side rather than a
     third of it — "Declared archive gap" should not break across two lines on a phone. */
  .th-reg--gap {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .th-reg--gap .th-reg-date--gap {
    grid-column: 1;
  }

  .th-reg--gap .th-reg-status {
    grid-column: 2;
  }

  .th-reg-figure {
    text-align: left;
    font-size: .88rem;
  }

  .th-reg-figure .th-reg-label {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 .1rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    font-family: var(--th-sans);
  }

  .th-reg-fine {
    gap: .1rem .9rem;
    font-size: .74rem;
  }

  .th-months ol {
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  }

  .th-latest-figures {
    grid-template-columns: repeat(auto-fit, minmax(min(7.5rem, 100%), 1fr));
    gap: .7rem .9rem;
  }
}

/* Below this the coverage list stops trying to hold a term column: the term sits above its value
   so a long term like "Continuous canonical series begins" is not squeezed into 40% of a phone. */
@media (max-width: 520px) {
  .th-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem;
    padding: .5rem 0;
  }
}

@media (max-width: 400px) {
  .th-reg {
    gap: .3rem .55rem;
  }

  .th-reg-figure {
    font-size: .82rem;
  }

  .th-reg-figure .th-reg-label {
    font-size: .58rem;
    letter-spacing: .05em;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────────────────────────── */

/* A printed History page is a printed index: the identity, the coverage, the latest record, and
   the register with every status and every declared gap intact. Navigation affordances that cannot
   be used on paper are dropped; nothing that carries a status, a figure, a gap or a permanent
   address is. */
@media print {
  /* The shared chrome: `nav.nav` is the top bar (deliberately not wrapped in a
     <header> — see scripts/lib/site-chrome.mjs), `.nav-overlay` the mobile
     dialog, `footer.site-footer` the quiet footer. None of the three is usable
     on paper. The legend stays: it is what explains the cell tags. */
  nav.nav,
  .nav-overlay,
  footer.site-footer,
  .th-months,
  .th-pager,
  .th-latest-nav {
    display: none !important;
  }

  .th-page {
    max-width: none;
    padding: 0;
  }

  .th-reg,
  .th-cell,
  .th-facts > div,
  .th-latest,
  .th-notes li,
  .th-use-list li {
    break-inside: avoid;
  }

  .th-month {
    break-before: auto;
  }

  /* Statuses must survive the loss of colour: the hatch and the dashed edges are what carry the
     gap and bootstrap distinctions on paper, alongside the words themselves. */
  .th-cell--gap,
  .th-reg--gap {
    background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 7px);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a.th-cell--canonical {
    border-left: 3px solid currentColor;
  }

  a.th-cell--bootstrap {
    border-left: 3px dashed currentColor;
  }

  .th-reg-date,
  .th-reg-date--gap,
  .th-cell,
  .th-latest-date a {
    color: inherit;
  }

  /* The permanent route is the point of the page, so print it beside each date. */
  .th-reg-date::after,
  .th-latest-date a::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    font-size: .78em;
  }

  /* The lead date is set at display size; its route is a reference, not a headline. */
  .th-latest-date a::after {
    font-size: .38em;
    letter-spacing: 0;
  }
}