/* ============================================================
   PROVISIONS — the KMSL benefits book, food-grade information design
   Signature: Benefit Facts labels · best-by deadline stamps · receipt math
   Screen-first HTML; print (US Letter) is the derivative.

   PAINT: one palette file, imported below. Architecture, content and
   every structural signature are unchanged by the paint. To flip the
   whole book back to the owner-approved PROVISIONS palette, change the
   one import line to palette-frl.css and rebuild.
   Direction of record: print/DIRECTION.md.
   ============================================================ */

@import url("palette-tr.css");

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  src: url("/figtree.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2010-2027, U+2030-205E;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  src: url("/figtree-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--shell);
  color: var(--forest-deep);
  font: 9.5pt/1.5 "Figtree", "Segoe UI", sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-optical-sizing: auto;
}
::selection { background: var(--forest-100); }
/* The provenance mark. It may not be chartreuse (1.39:1) and it may not
   carry a chartreuse ground either — at 0.72em raised that is a ~5px chip
   that prints as dirt, and it would collide with the pay code's meanings.
   So: same hue, one step lighter than the body ink, one weight heavier.
   Its real differentiator was never colour — it is a raised, smaller,
   dagger-shaped glyph, and that survives greyscale and photocopy intact. */
sup.t { color: var(--forest); font-weight: 900; font-size: 0.72em; line-height: 0; vertical-align: baseline; position: relative; top: -0.45em; }
b, strong { font-weight: 700; }

/* ---------- the three-role pay code ----------
   Client-promised, already shipped in the portal (aisle.css). Colour is
   NEVER used alone: every one of these is emitted with its written label
   by book-lib.mjs, so the code survives greyscale printing, photocopying
   and colour blindness. On a printed book that is not optional.

   YOU PAY / YOU DO THIS   chartreuse ground, forest-deep ink   8.45:1
   SHARED                  transparent, forest hairline + ink   8.70:1
   HORMEL PAYS             forest ground, bone ink              8.70:1  */
.pay-you    { background: var(--pay-you-bg); color: var(--pay-you-ink); }
.pay-hormel { background: var(--pay-hormel-bg); color: var(--pay-hormel-ink); }
/* hairline drawn as an inset shadow, not a border: a real border adds 3px to
   every SHARED tag in the book and reflows dense Benefit Facts rows. */
.pay-shared { background: var(--pay-shared-bg); color: var(--pay-shared-ink); box-shadow: inset 0 0 0 1.5px var(--pay-shared-ink); }
/* a money figure marked as the member's own — chip, not text colour.
   Negative margin cancels the padding so the chip cannot widen a value
   that already fits its column and wrap it onto a second line. */
.pay-figure { background: var(--pay-you-bg); color: var(--pay-you-ink); padding: 0 4px; margin: 0 -4px; }

/* ---------- sheet chassis ---------- */
.ribbon { position: absolute; inset: 0 0 auto; z-index: 2; text-align: center; }

.sheet {
  width: 8.5in;
  height: 11in;
  background: var(--bone);
  position: relative;
  margin: 26px auto;
  box-shadow: 0 2px 6px var(--shadow), 0 14px 40px var(--shadow-deep);
  padding: 0.62in 0.6in 0.78in 0.98in;
  overflow: hidden;
}

/* working rail: section code + you-are-here */
.rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.62in;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6in 0 0.52in;
}
.rail .code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 7.2pt;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest-deep);
}
.rail .code em { font-style: normal; color: var(--forest); font-weight: 900; }
.rail .dots { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.rail .dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--forest-100); display: block;
}
.rail .dots i.on { background: var(--forest); }
.rail .pageno { margin-top: 12px; font-size: 8pt; font-weight: 800; color: var(--forest-deep); }

/* ---------- header grammar ---------- */
.ph { display: flex; align-items: baseline; justify-content: space-between; }
.ph .evb {
  font-size: 8pt; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--forest-deep);
}
.ph .evb-r { font-size: 8pt; font-weight: 600; letter-spacing: 0.1em; color: var(--grey-ink); text-transform: uppercase; }
.ph + hr { border: 0; border-top: 1px solid var(--rule); margin: 7px 0 16px; }
h1 {
  font-size: 25pt; line-height: 1.04; font-weight: 800;
  letter-spacing: -0.022em; color: var(--forest);
  margin-bottom: 10px; max-width: 6.1in;
}
h1.h1-sm { font-size: 25pt; }
.standfirst {
  font-size: 10.5pt; line-height: 1.45; font-weight: 350;
  color: var(--grey-ink); max-width: 5.6in; margin-bottom: 18px;
}

/* the action lead — every doing-page opens with it */
.lead { margin: 2px 0 18px; max-width: 5.9in; }
.lead .k {
  display: inline-block; font-size: 7.2pt; font-weight: 900;
  letter-spacing: 0.2em; color: var(--pay-you-ink); background: var(--pay-you-bg);
  padding: 2px 8px 1px; border-radius: 2px; margin-bottom: 5px;
  text-transform: uppercase;
}
.lead p { font-size: 12.5pt; line-height: 1.35; font-weight: 650; color: var(--forest); }

/* ---------- Benefit Facts label (signature) ---------- */
.facts {
  border: 3px solid var(--forest);
  background: var(--white);
  padding: 9px 11px 8px;
  break-inside: avoid;
}
.facts .fh { font-size: 19pt; font-weight: 900; letter-spacing: -0.01em; color: var(--forest); line-height: 1.05; }
.facts .fsub { font-size: 8pt; color: var(--grey-ink); padding: 3px 0 5px; border-bottom: 1px solid var(--rule); }
.facts .bar { height: 7px; background: var(--forest); margin: 5px -1px; }
.facts .bar.thin { height: 3px; }
.facts .fgroup {
  font-size: 7.2pt; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest-deep); padding: 4px 0 1px;
}
.facts .frow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 3px 0 2px; border-top: 1px solid var(--rule);
  font-size: 8pt; line-height: 1.3;
}
.facts .frow > span:first-child { font-weight: 700; color: var(--forest-deep); }
.facts .frow .v {
  text-align: right; font-weight: 800; color: var(--forest);
  font-variant-numeric: tabular-nums; max-width: 1.85in;
}
.facts .frow .v.you { background: var(--pay-you-bg); color: var(--pay-you-ink); padding: 0 4px; margin: 0 -4px; }
.facts .frow .v.big { font-size: 12.5pt; }
.facts .frow .v small { display: block; font-size: 6.4pt; font-weight: 700; color: var(--grey-ink); letter-spacing: 0.06em; text-transform: uppercase; }
html:not([data-audience="employee"]) .facts .frow.unresolved .v { color: var(--caution-ink); }
.facts .fnote { font-size: 7.2pt; line-height: 1.4; color: var(--grey-ink); border-top: 2px solid var(--forest); margin-top: 6px; padding-top: 5px; }

/* ---------- best-by deadline stamp ---------- */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  border: 2.5px solid var(--forest); border-radius: 5px;
  color: var(--pay-you-ink); padding: 5px 12px 4px;
  transform: rotate(-1.4deg); background: var(--pay-you-bg);
  break-inside: avoid;
}
.stamp small { font-size: 6.4pt; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.stamp .d { font-size: 12.5pt; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.stamp--quiet { background: transparent; border-color: var(--forest); color: var(--forest); }

/* ---------- receipt ---------- */
.receipt {
  width: 2.62in; background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px dashed var(--forest-100);
  border-bottom: 2px dashed var(--forest-100);
  box-shadow: 0 6px 18px var(--shadow-deep);
  padding: 0.18in 0.2in 0.15in;
  font-variant-numeric: tabular-nums;
  transform: rotate(0.8deg);
}
.receipt .rh { text-align: center; font-size: 8pt; font-weight: 900; letter-spacing: 0.24em; text-transform: uppercase; color: var(--forest); }
.receipt .rsub { text-align: center; font-size: 6.4pt; color: var(--grey-ink); letter-spacing: 0.04em; text-transform: uppercase; margin: 2px 0 8px; white-space: nowrap; }
.receipt .rrule { border: 0; border-top: 1px dashed var(--forest-100); margin: 6px 0; }
.receipt .rrow { display: flex; justify-content: space-between; font-size: 9pt; padding: 2.5px 0; }
.receipt .rrow .n { font-weight: 800; color: var(--forest); }
.receipt .rtotal { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--forest); margin-top: 6px; padding-top: 6px; }
.receipt .rtotal span { font-size: 8pt; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); }
.receipt .rtotal .n { font-size: 15pt; font-weight: 900; background: var(--pay-you-bg); color: var(--pay-you-ink); padding: 0 4px; margin: 0 -4px; }
.receipt .rnote { font-size: 7.2pt; line-height: 1.4; color: var(--grey-ink); margin-top: 7px; }
.receipt .barcode {
  height: 0.26in; margin: 10px auto 2px; width: 78%;
  background:
    repeating-linear-gradient(90deg,
      var(--forest-deep) 0 1.5px, transparent 1.5px 4px,
      var(--forest-deep) 4px 7px, transparent 7px 9px,
      var(--forest-deep) 9px 10px, transparent 10px 14px);
}
.receipt .bnum { text-align: center; font-size: 6.4pt; letter-spacing: 0.3em; color: var(--grey-ink); }

/* ---------- chips ---------- */
.chip {
  display: inline-block; font-size: 6.4pt; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px 1px; border-radius: 3px; white-space: nowrap;
}
.chip.you { background: var(--pay-you-bg); color: var(--pay-you-ink); }
.chip.hormel { background: var(--pay-hormel-bg); color: var(--pay-hormel-ink); }
/* SHARED: hairline stays an inset shadow. A real 1.5px border adds 3px to every
   both-chip in the book, and chip() runs inside dense rows — that reflows sheets. */
.chip.both { background: var(--pay-shared-bg); color: var(--pay-shared-ink); box-shadow: inset 0 0 0 1.5px var(--pay-shared-ink); }

/* ---------- source-page annotation ----------
   The source handbook's page numbers are not this book's. Where an authored
   string prints one, the source's number stays exactly as printed and this
   book's own page is added beside it, quieter — the reader must be able to see
   which document each number belongs to. check-book.mjs requires the wrapper.
   Not chartreuse: this is navigation, not a YOU PAY / YOU DO. */
.srcpage { white-space: normal; }
/* Two classes deep on purpose: inside a .note, the bare rule loses to
   `.note b`, which is the note's LABEL style — uppercase and caution ink. The
   annotation would then read as a second heading rather than as an aside. */
.srcpage .srcpage-b {
  font-weight: 700; color: var(--forest);
  text-transform: none; letter-spacing: 0; font-size: inherit;
}

/* ---------- the split (menu) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.32in; }
.split h2 {
  font-size: 12.5pt; font-weight: 800; color: var(--forest);
  padding-bottom: 6px; border-bottom: 3px solid var(--forest); margin-bottom: 4px;
}
.split .colnote { font-size: 8pt; color: var(--grey-ink); margin: 6px 0 10px; line-height: 1.45; }
.mrow {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6.5px 0; border-bottom: 1px solid var(--rule);
  font-size: 9pt;
}
.mrow .t { font-weight: 700; color: var(--forest-deep); flex: 0 1 auto; max-width: 52%; }
.mrow .sub { font-size: 8pt; color: var(--grey-ink); display: block; }
.mrow .dots { flex: 1; border-bottom: 2px dotted var(--forest-100); transform: translateY(-3px); min-width: 40px; }
.mrow .pg { font-size: 7.2pt; font-weight: 700; color: var(--grey-ink); white-space: nowrap; }

/* ---------- numbered moves / steps ---------- */
.move { display: flex; gap: 14px; margin-bottom: 14px; break-inside: avoid; }
.move .num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--forest); color: var(--bone); font-size: 12.5pt; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.move .num.you { background: var(--pay-you-bg); color: var(--pay-you-ink); }
.move h3 { font-size: 10.5pt; font-weight: 800; color: var(--forest); margin-bottom: 3px; }
.move p { font-size: 9pt; line-height: 1.5; color: var(--forest-deep); max-width: 5.2in; }
.steps-tight .move { margin-bottom: 8px; gap: 10px; }
.steps-tight .move .num { width: 20px; height: 20px; font-size: 9pt; }
.steps-tight .move h3 { font-size: 9pt; }
.steps-tight .move p { font-size: 8pt; line-height: 1.42; }
.roomy .move { margin-bottom: 18px; }
.roomy .move p { font-size: 9pt; }
.also { font-size: 7.2pt; color: var(--grey-ink); line-height: 1.5; margin-top: 8px; letter-spacing: 0.02em; }

/* ---------- care menu ---------- */
.menu-board { max-width: 6.3in; }
.menu-item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.menu-item .line { display: flex; align-items: baseline; gap: 8px; }
.menu-item .line .t { font-size: 12.5pt; font-weight: 800; color: var(--forest); }
.menu-item .line .dots { flex: 1; border-bottom: 2px dotted var(--forest-100); transform: translateY(-3px); }
.menu-item .line .price { font-size: 12.5pt; font-weight: 900; background: var(--pay-you-bg); color: var(--pay-you-ink); letter-spacing: 0.08em; white-space: nowrap; padding: 0 4px; margin: 0 -4px; }
.menu-item .line .price i { font-style: normal; color: var(--pay-you-ink); opacity: .55; } /* rank marks not yet reached: the chip ink, muted — navy on the action ground read as mud (2.9:1 at full strength, worse at .45) */
.menu-item .line .price.free { background: transparent; color: var(--forest); padding: 0; margin: 0; font-size: 10.5pt; letter-spacing: 0.14em; text-transform: uppercase; }
.menu-item p { font-size: 9pt; color: var(--grey-ink); line-height: 1.45; margin-top: 3px; max-width: 5.4in; }

/* ---------- directory ---------- */
.dir { column-count: 2; column-gap: 0.34in; }
.dcard { break-inside: avoid; padding: 8px 0 9px; border-bottom: 1px solid var(--rule); }
.dcard .t { font-size: 10.5pt; font-weight: 800; color: var(--forest); }
.dcard .c { font-size: 9pt; line-height: 1.5; color: var(--forest-deep); margin-top: 2px; }
.dcard .d { font-size: 7.2pt; line-height: 1.4; color: var(--grey-ink); margin-top: 2px; }

/* ---------- contract page specimens ---------- */
.spec { display: grid; grid-template-columns: 1fr 2.1in; gap: 0.3in; align-items: center; margin-bottom: 21px; }
.spec .demo .ledger-demo {
  border-top: 1px solid var(--rule); padding-top: 5px; width: 2.05in;
  font-size: 6.4pt; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey-ink); font-weight: 600;
}
.spec .why h3 { font-size: 12.5pt; font-weight: 800; color: var(--forest); margin-bottom: 3px; }
.spec .why p { font-size: 9pt; line-height: 1.5; color: var(--forest-deep); }
.spec .demo { display: flex; justify-content: flex-start; }

/* governs banner */
.governs {
  background: var(--forest); color: var(--bone); padding: 16px 20px;
  font-size: 12.5pt; font-weight: 700; line-height: 1.4;
}
.governs em { font-style: normal; color: var(--bone-dim); }

/* ---------- notes & callouts ----------
   No left stripe. The tint and the caution-ink label already carry the state;
   a 3px rule on top of them was decoration, and it repeated on 36 of the 47
   content sheets, which made every page end the same way. The padding that
   the stripe used to occupy stays, so nothing shifts. */
html:not([data-audience="employee"]) .note {
  background: var(--caution-050);
}
.note {
  padding: 8px 12px 8px 15px; font-size: 8pt; line-height: 1.5; color: var(--forest-deep);
}
html:not([data-audience="employee"]) .note b { color: var(--caution-ink); }
.note b { text-transform: uppercase; letter-spacing: 0.08em; font-size: 7.2pt; }

/* CALM CALLOUT — plan notes. Tokens copied from
   frontend/design-system/build/tokens.css: navy-700 and gray-900. */
[data-audience="employee"] .note[data-note-kind="plan"] {
  background: transparent;
  border-top: 1px solid #01356E;
  color: #2B2B30;
  padding: 8px 0;
}
[data-audience="employee"] .note[data-note-kind="plan"] b { color: #01356E; }
[data-audience="employee"] .facts .frow.unresolved .v { color: var(--forest); }
[data-audience="employee"] .ribbon {
  background: var(--forest-deep);
  color: var(--bone);
  font-size: 7.2pt;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  text-align: center;
}

/* ---------- footer: next action + evidence ledger ---------- */
.next {
  position: absolute; right: 0.6in; bottom: 0.62in;
  font-size: 9pt; font-weight: 800; color: var(--forest);
}
.next em { font-style: normal; color: var(--forest-deep); font-weight: 900; }
/* It is an anchor now; it must not pick up the generic link underline. */
a.next { text-decoration: none; display: block; }
a.next:hover em, a.next:focus-visible em { transform: translateX(2px); }
a.next em { transition: transform .12s ease; display: inline-block; }
.ledger {
  position: absolute; left: 0.98in; right: 0.6in; bottom: 0.3in;
  border-top: 1px solid var(--rule); padding-top: 5px;
  /* 8px, not 12: every two-source page needs 665px of a 664px ledger and wraps
     by ONE pixel. Eleven sheets footed in two lines for want of 1px of gutter.
     8px leaves 4x the worst case and is still a real gutter. */
  display: flex; justify-content: space-between; gap: 8px;
  /* 0.07em, not 0.08: the two-source src strings run 95 characters and were
     landing 1px over a 664px ledger, wrapping eleven footers to two lines.
     0.01em back across 95 characters buys ~8px. Imperceptible; the gutter
     above buys another 4. The .ledger-demo specimen above keeps 0.08em on
     purpose — it is a picture OF a ledger, not one. */
  font-size: 6.4pt; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--grey-ink); font-weight: 600;
}
.ledger .src { color: var(--forest-mid); }

/* ---------- section divider ----------
   Hormel's own Purpose / Mission / Values posters, read as a layout: food
   photograph banding the top fifth, forest field beneath it, the section word
   set enormous in chartreuse, one white line of copy, the mark bottom right.
   We inherit those proportions rather than invent a second visual language,
   so the page reads as Hormel's before it reads as ours.

   COLOUR: compliant. DIRECTION.md "Accent law" prescribes the treatment
   directly — "Section-divider bands are section labels: they are forest fields
   with bone text, not chartreuse" — so the section word, the contents-list page
   numbers and the active rail dot are all bone on forest.

   An earlier version of this comment used chartreuse for those three and argued
   the rule was about contrast rather than colour, on the grounds that
   chartreuse on forest measures 6.09:1 while the banned case is chartreuse on
   bone at 1.39:1. That argument was wrong and is recorded so it is not made
   again: the contrast law lives in palette-frl.css and governs legibility; the
   accent law lives in DIRECTION.md and governs MEANING. Chartreuse carries the
   YOU role and a due date. A section label is banned at every ratio.

   PHOTOGRAPHY: compliant. DIRECTION.md allots three section boundaries —
   CARE, PROTECT, EXTRAS — and only those three dividers carry a band. The
   other five open on a plain forest field (.section-divider--plain), which
   keeps the same word, line and contents list and simply starts higher. */
.sheet.section-divider {
  background: var(--forest);
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.band--photo.band--divider { height: 2.75in; margin: 0; flex: 0 0 auto; }
.section-divider .sd-field {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 0.6in 0.8in 0.58in;
}
.section-divider--plain .sd-field { padding-top: 1.45in; }
.section-divider .sd-word {
  font-size: 118pt; line-height: 0.84; font-weight: 900;
  letter-spacing: -0.04em; text-transform: uppercase;
  color: var(--bone);
}
.section-divider .sd-line {
  margin-top: 0.24in; max-width: 5.2in;
  font-size: 19pt; line-height: 1.26; font-weight: 700;
  color: var(--white);
}
/* The section's own table of contents. A divider that only announces a name
   costs a page and returns nothing; this one answers "is what I need in here,
   and on which page" without the reader turning past it. Every question and
   page is read from assembly state — see book.mjs. */
.section-divider .sd-toc {
  margin-top: 0.36in; padding-top: 0.16in; max-width: 5.9in;
  border-top: 1px solid rgba(251, 249, 243, 0.28);
  list-style: none; columns: 1;
}
.section-divider .sd-toc li {
  padding: 7px 0;
  border-bottom: 1px solid rgba(251, 249, 243, 0.12);
}
/* Every contents row and index row is a real link to its sheet. The HTML
   navigates (verified in headless Chrome), and Chrome's PDF export carries
   them through as /Link annotations (verified: 106 of them). Whether a PDF
   viewer actually jumps on click is UNVERIFIED — annotations present is not
   navigation proven. Inert on paper, which costs nothing. */
.section-divider .sd-toc li a {
  display: flex; align-items: baseline; gap: 10px;
  color: inherit; text-decoration: none;
}
.section-divider .sd-toc-q {
  flex: 1 1 auto; font-size: 10.5pt; line-height: 1.34;
  font-weight: 600; color: var(--bone);
}
.section-divider .sd-toc-p {
  flex: 0 0 auto; font-size: 10.5pt; font-weight: 900;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
/* A long section (GOVERNS runs to eight questions) goes two-up rather than
   shrinking the type below the book's 8.3pt reading floor. */
.section-divider .sd-toc.two-up { columns: 2; column-gap: 0.34in; max-width: none; }
/* EXTRAS runs twelve questions, several of them two-liners, and overflowed the
   sheet by 5px at the roomier single-column rhythm. Reclaimed from row padding
   rather than type size — 10.5pt is the scan target and must not shrink. */
.section-divider .sd-toc.two-up li { break-inside: avoid; padding: 5px 0; }
.section-divider .sd-foot {
  margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 0.4in;
}
.section-divider .sd-range {
  font-size: 8pt; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-dim);
}
.section-divider .sd-mark { height: 0.92in; width: auto; opacity: 0.96; }
/* The rail carries forest ink for a bone page; on the forest field it would
   vanish. Same furniture, inverted, so position is still readable. */
.section-divider .rail { border-right-color: rgba(251, 249, 243, 0.16); }
.section-divider .rail .code,
.section-divider .rail .code em,
.section-divider .rail .pageno { color: var(--bone); }
.section-divider .rail .dots i { background: rgba(251, 249, 243, 0.3); }
.section-divider .rail .dots i.on { background: var(--bone); }

/* ---------- cover ---------- */
.sheet.cover {
  background: var(--bone); padding: 0.75in 0.9in 1.05in;
  display: flex; flex-direction: column;
}
.cover .top { display: flex; align-items: center; justify-content: space-between; }
.cover .top img { height: 0.42in; }
.cover .top .yr { font-size: 10.5pt; font-weight: 800; letter-spacing: 0.26em; color: var(--forest-deep); }
.cover .display { margin: 0.34in 0 0.3in; }
.cover .display h1 { font-size: 63pt; line-height: 0.98; letter-spacing: -0.028em; color: var(--forest); max-width: none; }
.cover .display h1 em { font-style: normal; color: var(--forest-deep); }
.cover .display p { font-size: 12.5pt; font-weight: 350; color: var(--grey-ink); margin-top: 11px; max-width: 6in; }
.cover .facts { width: 100%; box-shadow: 0 10px 30px var(--shadow); }
.cover .motto { margin-top: auto; padding-top: 0.22in; font-size: 12.5pt; font-weight: 900; letter-spacing: 0.3em; text-transform: uppercase; color: var(--forest-deep); }
.cover .motto em { font-style: normal; color: var(--forest); }
.cover .qual { margin-top: 8px; font-size: 7.2pt; color: var(--grey-ink); max-width: 4.9in; line-height: 1.5; }

/* ---------- colophon ---------- */
.blockers { margin: 10px 0 0; }
.blockers li {
  list-style: none; font-size: 9pt; padding: 5px 0 5px 22px; position: relative;
  border-bottom: 1px solid var(--rule); color: var(--forest-deep);
}
.blockers li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 10px; border: 2px solid var(--forest); border-radius: 2px;
}
.endmark { display: flex; align-items: center; gap: 10px; }
.endmark i { display: block; width: 34px; height: 7px; background: var(--forest); }
.endmark i + i { width: 7px; background: var(--forest); }

/* colophon bottom band */
.colo-bottom {
  position: absolute; left: 0.98in; right: 0.6in; bottom: 0.72in;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.22in;
}
.colo-bottom .motto { font-size: 15pt; font-weight: 900; letter-spacing: 0.26em; text-transform: uppercase; color: var(--forest-deep); white-space: nowrap; }
.colo-bottom .motto em { font-style: normal; color: var(--forest); }
.colo-bottom .meta { font-size: 6.4pt; line-height: 1.6; color: var(--grey-ink); letter-spacing: 0.08em; text-transform: uppercase; text-align: right; max-width: 3.4in; overflow-wrap: anywhere; }

/* ---------- photography bands ----------
   Photography is structural: it owns its band, edge to edge, nothing over it.
   No headline, no kicker, no page number over any photograph — the client's own
   wordmark lockup on the colophon is the single permitted overlay.

   Five bands in 43 sheets, at boundaries a reader passes THROUGH, never on a
   surface a reader reads FROM: no Benefit Facts panel, receipt, cost table,
   glossary or legal notice ever shares a page with a photograph. GROW and
   GOVERNS-STATES are deliberately excluded — retirement projections beside a
   pepperoni pizza, or a federal Medicaid notice beside one, reads as unserious.

   .sheet sets overflow:hidden, so a band that does not fit CLIPS SILENTLY
   instead of reporting to check-book.mjs. Every band here is paid for with an
   equal reduction in its sheet's content height, and verified by eye. */
.band--photo { background: var(--forest-deep); overflow: hidden; line-height: 0; }
.band--photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* on a working sheet the band bleeds to the paper on three sides and stops at
   the rail edge, so photograph and forest divider read as one masthead */
.band--photo.band--section { height: 1.05in; margin: -0.62in -0.6in 0 -0.36in; }
/* photograph, evidence eyebrow, forest divider — one compact masthead. The
   eyebrow may not be painted over: it carries the page count and the source. */
.band--photo.band--section + .ph { margin-top: 0.11in; }
.band--photo.band--section + .ph + hr { margin: 5px 0 6px; }
/* the cover is not a reading surface — the one tall, full-width band */
.band--photo.band--cover { height: 2.7in; margin: -0.75in -0.9in 0; }
.colo-lockup { flex: 0 0 auto; height: 0.58in; width: auto; display: block; }

/* two-column body helper */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.34in; align-items: start; }
.cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.26in; align-items: start; }

/* ---------- print ---------- */
@page { size: letter; margin: 0; }
@media print {
  body { background: var(--bone); }
  .sheet { margin: 0; box-shadow: none; break-after: page; }
}

/* ==========================================================================
   ARCHETYPES — the cure for 74% of sheets sharing one shape.
   Each archetype moves the page's centre of gravity somewhere different.
   Density is deliberately uneven: a reference work needs dense pages AND
   pages that breathe, and the rhythm between them is what makes 43 sheets
   readable as 43 rather than as one sheet repeated.
   ========================================================================== */

/* The running head is the QUESTION, so it has to be readable, not micro-caps.
   A reader flipping the book scans this line and nothing else. */
.ph .evb.q {
  font-size: 10.5pt;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--forest);
}

/* DIRECTORY — the list is the page. Ruled rows, value hard right, tabular. */
.dir { border-top: var(--rule-hard, 4px solid var(--forest)); margin-top: 10px; }
.dir-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.dir-k { font-size: 10.5pt; font-weight: 700; color: var(--forest); }
.dir-sub { grid-column: 1; font-size: 9pt; line-height: 1.4; color: var(--grey-ink); }
.dir-v {
  grid-row: 1; grid-column: 2;
  font-size: 10.5pt; font-weight: 800; color: var(--forest);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* CLOCK — a date, set like money. The figure is the largest thing in its row. */
.clocks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 12px; }
.clock-rec { border-top: 3px solid var(--forest); padding-top: 8px; }
.clock-cap {
  display: block; font-size: 7.2pt; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-ink);
}
.clock-fig {
  display: block; font-size: 25pt; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.clock-unit { font-size: 10.5pt; font-weight: 700; letter-spacing: 0; }
.clock-p { display: block; margin-top: 4px; font-size: 9pt; line-height: 1.45; color: var(--forest-deep); }

/* INSET FIGURE — see fig() in book-lib.mjs and DIRECTION.md Photography.
   No object-fit, no height, no object-position: the image renders at its own
   proportions. Call sites set max-width inline, sized to the page's measured
   free space so the figure fills what is already empty and displaces nothing. */
.fig { margin: 14px 0 2px; }
.fig img { display: block; width: 100%; height: auto; }

/* TIMELINE — durations in order. A clock isolates one duration; the ruler is
   for pages where durations CHAIN (COBRA, life-event windows, Medicare).
   Due windows take chartreuse (accent law role 2); coverage spans are forest. */
.tl { margin: 14px 0 4px; }
.tl-ruler { display: flex; align-items: stretch; gap: 3px; height: 46px; }
.tl-origin {
  display: flex; align-items: center; gap: 6px; padding-right: 7px;
  font-size: 7.2pt; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--forest-deep);
  max-width: 0.95in; line-height: 1.25;
}
.tl-tick { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); flex: 0 0 auto; }
.tl-seg { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; border-radius: 3px; min-width: 0; }
.tl-seg small { font-size: 6.4pt; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.tl-seg b { font-size: 12.5pt; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* ink on the action colour is the palette's own --pay-you-ink (white on the TR orange, 5.4:1);
   navy on it measured 2.9:1 after the 2026-09-01 palette flip and was called out by the owner 2026-09-08 */
.tl-due { background: var(--pay-you-bg); color: var(--pay-you-ink); }
.tl-due sup.t { color: var(--pay-you-ink); }
.tl-span { background: var(--forest); color: var(--bone); }
.tl-span sup.t { color: var(--bone); }
/* base: a neutral period — a condition or gap, neither due nor plan-provided */
.tl-base { background: var(--forest-050); color: var(--forest); }
.tl-base sup.t { color: var(--forest); }
.tl-arrow {
  align-self: center; width: 0; height: 0; flex: 0 0 auto;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 10px solid var(--forest);
}
.tl-flags { margin-top: 6px; font-size: 7.2pt; color: var(--grey-ink); line-height: 1.5; }

/* BRANCH — the fork. You find your own row and stop reading. */
.branch { border-top: 4px solid var(--forest); margin-top: 10px; }
.branch-arm {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: 4px 20px; padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.branch-if { font-size: 10.5pt; font-weight: 800; color: var(--forest); }
.branch-then { font-size: 10.5pt; line-height: 1.5; color: var(--forest-deep); }
.branch-n { grid-column: 1 / -1; font-size: 8pt; color: var(--grey-ink); }

/* ---- density, varied on purpose ---- */
/* panel: the label carries the page, so the prose around it gets out of the way */
[data-archetype="panel"] .standfirst { font-size: 9pt; max-width: 62ch; }
[data-archetype="panel"] .facts { margin-top: 12px; }
/* divider: air. this page is a breath between dense ones */
[data-archetype="divider"] h1 { font-size: 25pt; line-height: 1.04; }
[data-archetype="divider"] .standfirst { font-size: 10.5pt; max-width: 46ch; }
/* notice: quiet and dense. no DO-THIS theatre on a legal page — it would be
   decoration without information, and it would cry wolf. */
[data-archetype="notice"] .lead { display: none; }
[data-archetype="notice"] p { font-size: 9pt; line-height: 1.45; }
[data-archetype="notice"] h1 { font-size: 19pt; }
/* clock + directory: the record is the point, so the intro shrinks */
[data-archetype="clock"] .standfirst,
[data-archetype="directory"] .standfirst { font-size: 10.5pt; max-width: 58ch; }