/* ───────────────────────────────────────────────────────────────
   PARANOID AND READY — the one-pager

   One A4 sheet, black on white, real tick boxes and nothing else. It has
   its own stylesheet because a printed checklist wants a different layout
   from a web page: columns, no notes, no colour to swallow toner.
   ─────────────────────────────────────────────────────────────── */

/* Top margin carries an extra 5mm over the other three sides, clear of a
   hole punch or a clipboard clip along the top edge. */
@page { size: A4 portrait; margin: 17mm 10mm 12mm 10mm; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #6b6b6b;
  color: #000;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  padding: 24px 16px 60px;
}

button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }
ul { list-style: none; }

/* ── Screen-only chrome ─────────────────────────────────────────*/
.bar {
  max-width: 210mm;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bar-back { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #EFEBE4; text-decoration: none; }
.bar-back:hover { color: #E8321E; }

.bar-print {
  margin-left: auto;
  padding: 12px 22px;
  background: #E8321E;
  color: #0C0C0C;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.bar-print:hover { background: #EFEBE4; }

/* ── The sheet ──────────────────────────────────────────────────*/
/* A column so the notes block can take whatever is left of the page and
   nothing else has to know how much that is. */
/* Top padding matches the @page top margin so the on-screen preview shows
   the same clipboard-clip clearance the print output actually has. */
.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 19mm 12mm 14mm;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 5mm;
  border-bottom: 2px solid #000;
}

.sheet-series { font-size: 8px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.sheet-title { font-family: 'Anton', 'Arial Narrow', Impact, sans-serif; font-weight: 400; font-size: 26px; line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; margin-top: 4px; }

/* The one colour on an otherwise black-on-white sheet: the word that says
   what the page is for, at the size someone glances at from across a room. */
.sheet-title-accent { color: #E8321E; }

/* A sheet you fill in wants the date on it, and the date is the whole point
   of a checklist you are meant to run again. Written on, not printed. */
.sheet-date { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 2mm; align-self: flex-end; font-size: 8px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.sheet-date .rule { display: block; width: 34mm; border-bottom: 1px solid #000; }

/* Columns rather than a single run: forty items in one column is three
   pages, and the whole point is that it is one. */
.sheet-cols { flex: 0 0 auto; column-count: 3; column-gap: 8mm; padding-top: 5mm; }

.sheet-sec { break-inside: avoid; margin-bottom: 5mm; }
.sheet-sec h2 { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding-bottom: 2mm; margin-bottom: 2mm; border-bottom: 1px solid #000; }
.sheet-sec li { display: flex; align-items: flex-start; gap: 2mm; padding: 1.1mm 0; font-size: 9px; line-height: 1.35; }

.box { flex: 0 0 auto; width: 3mm; height: 3mm; margin-top: 0.6mm; border: 1px solid #000; }

/* Takes whatever the list left over and nothing more. On a sheet with no
   room to spare it collapses to nothing rather than pushing onto a second
   page, which is why it is a flex child with a zero basis and no minimum.
   One rule sits directly under the heading, matching every other section on
   the sheet, but the block below it stays unruled: a completed sheet needs
   every millimetre it can get, and a line is ink the notes don't get to use
   anywhere else on the page. */
.sheet-notes { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; margin-top: 4mm; }
.sheet-notes h2 { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding-bottom: 2mm; border-bottom: 1px solid #000; }
.sheet-lines { flex: 1 1 0; min-height: 0; }

/* The one line on the page that is not black. It is a warning, and it has
   to survive being read at arm's length on a kitchen wall. Centred rather
   than run to the edge, so it reads as a standalone notice rather than as
   one more left-aligned row of the sheet. No rule above it: the colour
   alone is what marks it as different from the sections above. */
.sheet-warn {
  flex: 0 0 auto;
  margin-top: 4mm;
  color: #E8321E;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
}

/* ── The quick-start sheet ──────────────────────────────────────
   Steps to read and act on, not items to tick, so it earns its own layout
   rather than reusing .sheet-sec's checkbox list. The four sections stack
   full width, one under another, in the order they are read. Each section's
   own steps stack the same way, one number under the next: there is room
   for it on a page this short, and a straight run down the page reads
   faster under stress than two columns the eye has to jump between.

   Sized larger than the checklist sheets on purpose. This page carries a
   fraction of their item count, so the same 9px/1.4mm rhythm would leave a
   third of the page empty above the index. Grown to fill it instead: bigger
   type is also just easier to read fast, which is the entire point of a
   page meant to be read once, under stress. */
.sheet-lede { padding-top: 4mm; font-size: 9.5px; line-height: 1.5; max-width: 150mm; }

.sheet-cols--steps { display: flex; flex-direction: column; gap: 4mm; }
.sheet-cols--steps .sheet-sec { break-inside: avoid; margin-bottom: 0; }
.sheet-cols--steps .sheet-sec h2 { font-size: 10px; padding-bottom: 2mm; margin-bottom: 2mm; }

.steps { max-width: 165mm; }
.steps li { display: flex; align-items: flex-start; gap: 3mm; padding: 1.7mm 0; font-size: 9.5px; line-height: 1.5; }

.step-n {
  flex: 0 0 auto;
  width: 4.6mm;
  height: 4.6mm;
  margin-top: 0.3mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  font-size: 7.5px;
  font-weight: 700;
}

/* A checklist named inside a step: red like the title, in capitals like the
   index cards at the foot, so the four names read as the same device
   wherever they appear on the page. Underlined too, since on screen it is
   also the link. */
.step-ref { color: #E8321E; text-transform: uppercase; text-decoration: underline; text-underline-offset: 1.5px; font-weight: 700; }

/* Pinned to the bottom of the sheet with margin-top: auto rather than a
   fixed gap, so it sits flush with the page's bottom edge and the steps
   above absorb whatever space the page has, not the other way round. The
   one thing on the sheet a reader has to find fastest, and the only place
   on the page a link goes anywhere. */
.sheet-index { margin-top: auto; padding-top: 4mm; border-top: 2px solid #000; }
.sheet-index h2 { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 3mm; }
.sheet-index-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4mm; }

.sheet-index-item { display: flex; flex-direction: column; gap: 1.5mm; padding: 3mm; border: 1px solid #000; text-decoration: none; }
.sheet-index-tag { font-size: 7px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #E8321E; }
.sheet-index-name { font-family: 'Anton', 'Arial Narrow', Impact, sans-serif; font-size: 11px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }

/* ── The ask ────────────────────────────────────────────────────
   Appears after the print dialog closes, once ever per browser. */
.tip {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(12, 12, 12, 0.72);
}

.tip[hidden] { display: none; }

.tip-box { max-width: 440px; padding: clamp(26px, 5vw, 40px); background: #EFEBE4; color: #0C0C0C; }
.tip-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #E8321E; }
.tip-title { font-family: 'Anton', 'Arial Narrow', Impact, sans-serif; font-weight: 400; font-size: clamp(24px, 5vw, 36px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; margin: 10px 0 14px; }
.tip-text { font-size: 12px; line-height: 1.65; color: rgba(12, 12, 12, 0.72); }
.tip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.tip-yes { padding: 14px 24px; background: #E8321E; color: #0C0C0C; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
.tip-yes:hover { background: #0C0C0C; color: #EFEBE4; }
.tip-no { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(12, 12, 12, 0.5); }
.tip-no:hover { color: #0C0C0C; }

@media print {
  body { background: #fff; padding: 0; }
  .bar, .tip { display: none; }
  /* The @page margin becomes the padding, so the sheet is the printable area
     itself. min-height stays at the full page or the notes block, which fills
     what is left, would have nothing to fill. */
  .sheet { width: auto; min-height: 268mm; margin: 0; padding: 0; box-shadow: none; }
  /* Toner, not ink: without this the warning prints grey on most drivers. */
  .sheet-warn,
  .sheet-title-accent,
  .sheet-index-tag,
  .step-ref { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 780px) {
  .sheet { width: 100%; min-height: 0; padding: 20px 16px; }
  .sheet-cols { column-count: 1; }
  /* Nothing is left over once the columns stack, so the ruled block would be
     a heading over a sliver. Given a real height instead. */
  .sheet-notes { flex: 0 0 auto; }
  .sheet-lines { flex: 0 0 auto; height: 45mm; }
  .sheet-index-grid { grid-template-columns: 1fr 1fr; }
}