:root {
  --ink: #16181d;
  --ink-soft: #55606e;
  --line: #d7dce3;
  --stripe: #f4f6f9;
  --match: #ffe9a3;
  --related: #fff6d6;
  --accent: #14508c;
  --card: #eef4fb;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 3rem;
  color: var(--ink);
  background: #fff;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Only the table wrapper scrolls sideways, never the document: no block of the
   page is wider than its column, and `overflow-x: hidden` is deliberately not
   set here — it would make the body a scroll container and unstick the filter
   bar. */

.top, main, .bottom { max-width: 60rem; margin: 0 auto; padding-left: 1rem;
  padding-right: 1rem; }

.top { padding-top: 1.25rem; padding-bottom: 0.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.lede { margin: 0; color: var(--ink-soft); }

/* The list of the four series at the top: chips, so a thumb can hit them. */
.toc { margin: 0.6rem 0 0; }
.toc__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0; padding: 0; }
.toc__list a {
  display: inline-block; padding: 0.3rem 0.6rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--stripe); color: var(--accent); text-decoration: none;
  font-size: 0.9rem;
}
.toc__list a:hover { border-color: var(--accent); }
.toc__list a:focus { outline: 3px solid var(--accent); outline-offset: 1px; }

/* The four sections the tail phrases land on. Each one keeps its distance from
   the charts above it so the address a person jumped to is obviously its own. */
.tail { margin: 2rem 0 0; }
.tail h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.tail p { margin: 0 0 0.6rem; max-width: 42rem; }
.tail__act { margin: 0; }
.tail__button {
  font: inherit; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line); border-radius: 0.4rem;
  background: var(--stripe); color: inherit; cursor: pointer;
}
.tail__button:hover { border-color: var(--accent); color: var(--accent); }
.tail__button:focus { outline: 3px solid var(--accent); outline-offset: 1px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The filter bar is stuck to the top and stays visible while the charts scroll. */
.bar {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(22, 24, 29, 0.08);
}
.bar__inner { max-width: 60rem; margin: 0 auto; padding: 0.6rem 1rem 0.5rem; }

.filter { margin: 0; }
.filter__label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.filter__row { display: flex; gap: 0.5rem; }
.filter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  color: inherit;
}
.filter__input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.filter__clear {
  flex: 0 0 auto; font: inherit; padding: 0 0.8rem;
  border: 1px solid var(--line); border-radius: 0.5rem;
  background: var(--stripe); color: inherit; cursor: pointer;
}
.filter__clear:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.filter__hint { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.filter__hint code, .bottom code {
  background: var(--stripe);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

.status { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.answer {
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}
.answer__title { font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.5rem; }
.answer h3 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.answer .assumption { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.9rem; }

.facts { margin: 0; display: grid; gap: 0.5rem 1.25rem;
  grid-template-columns: 1fr; }
@media (min-width: 30rem) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { border-top: 1px solid var(--line); padding-top: 0.4rem; }
.fact__what { display: block; color: var(--ink-soft); font-size: 0.85rem; }
.fact__drill { font-size: 1.5rem; font-weight: 700; }
.fact__size { font-size: 1.05rem; }
.fact__delta { color: var(--ink-soft); font-size: 0.9rem; }

.note { margin: 0.9rem 0 0; color: var(--ink-soft); font-size: 0.85rem;
  overflow-wrap: anywhere; }
.note a { color: var(--accent); }

.tables h3 { margin: 1.5rem 0 0.5rem; }

/* A wide chart sits in a wrapper that scrolls and can be reached from the
   keyboard, and nothing is clipped (`overflow: hidden` is forbidden here). */
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 0.4rem; }
.scroll:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
caption { caption-side: bottom; text-align: left; padding: 0.5rem;
  color: var(--ink-soft); font-size: 0.85rem; }
th, td { padding: 0.35rem 0.6rem; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); }
/* `top: 0`, not the height of the filter bar: the wrapper with `overflow-x:
   auto` is itself a scroll container, so the head sticks to its top, not to
   the top of the window. Any other value sends the head to the bottom edge. */
thead th { position: sticky; top: 0; background: #fff; text-align: right;
  border-bottom: 2px solid var(--ink-soft); font-size: 0.85rem; z-index: 1; }

/* Stripes: the class is set over the visible rows, not by nth-child, or the
   alternation would be counted over the hidden rows after filtering. */
tbody tr.stripe { background: var(--stripe); }
tbody tr:hover { background: var(--related); }
tbody tr.is-related { background: var(--related); }
tbody tr.is-match { background: var(--match); box-shadow: inset 3px 0 0 var(--accent); }

/* The column people search by — the designation — is stuck to the left edge. */
th[scope="row"], thead th:first-child {
  position: sticky; left: 0; text-align: left; font-weight: 700;
  background: #fff;
}
tbody tr.stripe th[scope="row"] { background: var(--stripe); }
tbody tr.is-related th[scope="row"] { background: var(--related); }
tbody tr.is-match th[scope="row"] { background: var(--match); }
tbody tr:hover th[scope="row"] { background: var(--related); }
thead th:first-child { z-index: 2; }
td.dim { color: var(--ink-soft); }

/* A chart with no match keeps its place; a message stands where the rows were. */
tr.nomatch td { text-align: left; white-space: normal; color: var(--ink-soft);
  padding: 0.75rem 0.6rem; }

/* Wood screws: a hole the references disagree on shows their spread, and a
   short mark under it leads to the list of what each one prints. */
#table-screws td[data-hole] { white-space: normal; min-width: 6.5rem; }
.dispute { display: block; font-size: 0.8em; color: var(--accent); }
/* Drills and threads: the chart keeps its value, and the same short mark under
   it leads to the row's line in the list below the charts. */
.differs { display: block; font-size: 0.8em; color: var(--accent); }
.disputes { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.9rem;
  max-width: 46rem; }
.disputes li { margin: 0 0 0.25rem; }
.disputes a { color: var(--accent); }

.actions { margin: 1.25rem 0 0; }
#print { font: inherit; padding: 0.55rem 1rem; border: 1px solid var(--line);
  border-radius: 0.4rem; background: var(--stripe); cursor: pointer; }
#print:focus { outline: 3px solid var(--accent); outline-offset: 1px; }

.bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 0.85rem; }

/* The record's continuations: what can still be typed after what was typed. */
.conts { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--ink-soft);
  line-height: 2; }
.conts__group { margin-right: 0.25rem; }
.conts__chip {
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--stripe); color: var(--ink); border: 1px solid var(--line);
  border-radius: 0.3rem; padding: 0.1rem 0.45rem; margin: 0 0.2rem 0 0;
  cursor: pointer;
}
.conts__chip:hover { border-color: var(--accent); color: var(--accent); }
.conts__chip:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.conts__more { margin: 0 0.4rem 0 0; }

/* Printing is built into this page; there is no separate printable page.
   What goes on paper is the charts, their captions, their source and the check
   date. Everything the sheet cannot be used with — the filter bar with its
   field, its status line and its continuations, the answer card, and the
   buttons — is off. */
@media print {
  body { padding: 0; font-size: 10pt; }
  .bar, .conts, .actions, .answer, .screen-only, .tail__act { display: none; }
  .scroll { overflow: visible; border: 0; }
  thead th { position: static; }
  th[scope="row"], thead th:first-child { position: static; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  thead { display: table-header-group; }
  .note { color: #000; }
  .note a { color: #000; text-decoration: none; }

  /* On screen a chart wider than the column scrolls sideways inside its
     wrapper; paper has no sideways. The sheet is as wide as it is, so the
     type shrinks until the widest chart fits across it, and the headings
     wrap instead of pushing the last columns off the right edge. The
     numbers keep `nowrap`: a diameter broken across two lines is unreadable. */
  table { font-size: 8pt; table-layout: fixed; width: 100%; }
  th, td { padding: 0.15rem 0.3rem; }
  thead th { white-space: normal; word-break: break-word; }
  #table-unc { font-size: 6.5pt; }
  #table-unc th, #table-unc td { padding: 0.12rem 0.15rem; }
  /* Fixed layout hands every column the same width, and the designation
     column needs more than its share: it carries the thread a person looks
     the row up by, and must not be broken across lines. */
  #table-unc th:first-child, #table-unc td:first-child { width: 8%; }
  #table-unc thead th:first-child { white-space: nowrap; }
  #table-screws { font-size: 7pt; }
  #table-screws th, #table-screws td { padding: 0.12rem 0.15rem; }
  #table-screws td[data-hole] { min-width: 0; }
  .dispute, .differs, .disputes a { color: #000; text-decoration: none; }
}