@page { size: A4; margin: 14mm; }
/* the insight palette. Every group, card, badge, chip, header band and rule inherits its
   three variables from the insight class the element already carries (item 7). */
.almost-there       { --tint:#e7f7ed; --ink:#1c5e37; --edge:#bfe3cd; }
.gone-quiet         { --tint:#f2eaff; --ink:#5b3d99; --edge:#ddcdf5; }
.lost-momentum      { --tint:#e0f1f3; --ink:#00707d; --edge:#b6dce1; }
.never-started      { --tint:#fff0df; --ink:#944600; --edge:#f7d5b0; }
.stuck-at-the-start { --tint:#eaf1ff; --ink:#2b5490; --edge:#c6d9f5; }
.other              { --tint:#eef0f1; --ink:#4a5654; --edge:#d3dad8; }
* { box-sizing: border-box; }
/* 🔴 EVERY MARGIN IN THIS SHEET IS EXPLICIT. The browser's default `p { margin: 1em 0 }`
   silently added 14.4px inside the group block and made a declared 12/12 render as 26/14.
   ⛔ Never remove this reset: it is what makes the spacing rhythm mean what it says. */
p { margin: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body {
  margin: 0; background: #f2f5f4; color: #182321;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 10.5pt; line-height: 1.45;
}
.sheet { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm; background: #fff; }
@media screen { .sheet { margin: 18px auto; box-shadow: 0 2px 18px rgba(6,79,71,.13); } }
@media print { body { background: #fff; }
  .sheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; } }

/* ── masthead: brand + logo + as-of ABOVE a much bigger title (items 1, 2, 3) ───── */
.brand-line { height: 8px; border-radius: 8px; background: #064f47; margin: 13px 0 0; }
.lockup { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; }
.logo { flex: none; height: 46px; width: auto; max-width: 190px; display: block; }
.logo-slot { flex: none; height: 46px; min-width: 46px; padding: 0 10px; border-radius: 9px;
             border: 1.5px dashed #b7c8c4; color: #7d918d; background: #f4f8f7;
             display: grid; place-items: center; font-size: 7.4pt; font-weight: 700;
             letter-spacing: .07em; text-transform: uppercase; text-align: center;
             line-height: 1.25; }
.brand { color: #064f47; font-weight: 800; font-size: 15pt; letter-spacing: -.01em; }
.asof-stamp { margin-left: auto; color: #687572; font-size: 9.5pt; font-weight: 600;
              white-space: nowrap; }
h1 { color: #064f47; font-size: 40pt; font-weight: 800; line-height: 1.02;
     margin: 16px 0 10px; letter-spacing: -.025em; }
.asof { color: #687572; margin: 0; max-width: 64ch; }

/* ── the spread (D50 — above the cards, never collapsed) ──────────────── */
.spread { margin: 22px 0 30px; padding: 17px 19px; border: 1px solid #dce5e2;
          border-radius: 14px; background: #f7faf9; break-inside: avoid; }
.spread .lead { margin: 0; font-size: 14pt; font-weight: 700; color: #0b3b35;
                line-height: 1.3; letter-spacing: -.01em; }
.spread .lead .n { color: #064f47; font-weight: 800; }
.spread-bar { display: flex; gap: 7px; margin-top: 15px; flex-wrap: wrap; }
.chip { flex: 1 1 0; min-width: 96px; padding: 9px 11px; border-radius: 11px;
        background: var(--tint); border: 1px solid var(--edge); }
.chip .c { display: block; font-size: 21pt; font-weight: 800; line-height: 1;
           color: var(--ink); letter-spacing: -.02em; }
.chip .k { display: block; margin-top: 4px; font-size: 8.6pt; font-weight: 700;
           color: var(--ink); }
.chip .of { display: block; margin-top: 3px; font-size: 7.8pt; font-weight: 600;
            color: var(--ink); opacity: .78; }
.spread-total { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid #dce5e2;
                font-size: 10pt; font-weight: 600; color: #38635a; }
.spread-total b { color: #064f47; font-weight: 800; }

/* ── group ────────────────────────────────────────────────────────────── */
.group { margin: 0 0 30px; break-inside: auto; }
.group-head { display: flex; align-items: baseline; gap: 12px; }
.group-head h2 { margin: 0; font-size: 23pt; font-weight: 800; color: var(--ink);
                 letter-spacing: -.02em; line-height: 1.1; }
.group-count { margin-left: auto; font-size: 9pt; font-weight: 700; color: var(--ink);
               text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
               opacity: .85; }
.explainer { color: #2c3a37; font-size: 10.8pt; line-height: 1.5; }
.ph { display: block; color: #7a6a4a; background: #fdf6e6; border: 1px dashed #d8c396;
      border-radius: 9px; padding: 10px 13px; }
.ph::before { content: "PLACEHOLDER — ALEX WRITES THIS"; display: block; font-size: 7.2pt;
      font-weight: 800; letter-spacing: .11em; color: #a98c4d; margin-bottom: 5px; }

/* 🔒 item 8 — CHOSEN 24 Aug (Alex): header band + left rule. The full-section-tint variant
   is deleted; one implementation only. Its CSS is recorded in the decisions log if wanted. */
.group-head { background: var(--tint); border: 1px solid var(--edge); border-bottom: 0;
              border-radius: 12px 12px 0 0; padding: 11px 15px; }
.group-inner { border-left: 4px solid var(--ink); padding: 12px 0 12px 14px; }
.explainer { margin: 0 0 12px; }   /* equal to the padding above it */

/* ── card ─────────────────────────────────────────────────────────────── */
/* 🔒 A WORDLESS terminator, 16px — 10px was too slight to close the group. ⛔ Still a
   terminator, not a band: five bars at 16px across ~11 A4 pages is a thin ink cost.
   🔒 THE JOIN: the gap above the bar comes from `.group-inner`'s padding-bottom, which is on
   the element carrying the RAIL — so the rail extends through the gap and meets the bar with
   nothing between them. ⛔ The zeroed last-card margin is NOT what makes them join any more;
   it only stops the card margin ADDING to that padding and doubling the gap. Removing it
   would give 24px, not detach the bar. */
.group-close { height: 16px; background: var(--ink); border-radius: 0 0 6px 6px; }
.group-inner > .card:last-child { margin-bottom: 0; }
.card { border: 1px solid #dce5e2; border-radius: 13px; padding: 15px 17px;
        margin-bottom: 12px; break-inside: avoid; background: #fff; }
.card-head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 10px; }
.num { flex: none; min-width: 21px; color: var(--ink); font-size: 12.5pt; font-weight: 800;
       font-variant-numeric: tabular-nums; opacity: .6; }
.who { margin: 0; font-size: 15pt; color: #182321; font-weight: 800; letter-spacing: -.015em; }
.who .noname { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
               font-size: 12.5pt; font-weight: 600; color: #4a5654; }
.whole-email { display: inline-block; margin-left: 8px; color: #8a9694; font-size: 9pt;
               font-weight: 500; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.no-first-name { display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 7px;
                 background: #eef0f1; color: #6b7a78; font-size: 7.6pt; font-weight: 700;
                 letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.badge { margin-left: auto; flex: none; border-radius: 13px; padding: 4px 12px;
         font-size: 8.4pt; font-weight: 800; background: var(--tint); color: var(--ink);
         border: 1px solid var(--edge); white-space: nowrap; }
.noticed { margin: 0 0 13px; font-size: 12pt; line-height: 1.42; color: #182321; }

/* item 5 — "Why this matters" is a header now, not an inline label */
.blk { margin-bottom: 12px; }
.blk > h4 { margin: 0 0 4px; font-size: 11pt; font-weight: 800; color: var(--ink);
            letter-spacing: -.005em; }
.blk > p { margin: 0; color: #2c3a37; }
.blk.matters > p { color: #3a4845; }

/* ── the draft message: THE PRODUCT. the visual anchor of the card ────── */
.draft { margin-top: 13px; border: 1.5px solid #ffc09a; border-radius: 11px;
         background: #fffaf6; overflow: hidden; }
.draft-head { display: flex; align-items: center; gap: 7px; padding: 8px 14px;
              background: #fff0e3; border-bottom: 1px solid #ffddc6; }
.draft-head .lbl { font-size: 8.2pt; font-weight: 800; letter-spacing: .1em;
                   text-transform: uppercase; color: #b8420a; }
.draft-head .hint { margin-left: auto; font-size: 8pt; color: #a8724d; font-weight: 700; }
.draft-body { padding: 12px 14px; }
.subject { margin: 0 0 9px; }   /* item 6 — the dotted rule is gone */
.subject span { font-size: 7.6pt; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; color: #a08872; margin-right: 8px; }
.subject strong { color: #182321; font-size: 11.5pt; font-weight: 800; }
.draft-text { margin: 0; padding: 11px 13px; border: 1px solid #eadfd8; border-radius: 8px;
              background: #fff; color: #182321; font-size: 11pt; line-height: 1.5;
              white-space: pre-wrap; }

/* ── the restated card: addressed to the creator, and unmistakably so ──── */
.card.for-you { border: 1.5px solid #064f47; background: #f4f9f7;
                box-shadow: inset 4px 0 0 #064f47; padding-left: 19px; }
.for-you-flag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 11px;
                padding: 5px 12px; border-radius: 8px; background: #064f47; color: #fff;
                font-size: 8.2pt; font-weight: 800; letter-spacing: .08em;
                text-transform: uppercase; }
.for-you .badge { background: #dce9e5; color: #064f47; border-color: #b9d3cb; }
.for-you .action { margin-top: 12px; padding: 13px 15px; border: 1px solid #b9d3cb;
                   border-radius: 10px; background: #fff; }
.for-you .action h4 { margin: 0 0 5px; font-size: 11pt; font-weight: 800; color: #16554b; }
.for-you .action p { margin: 0; font-size: 12pt; color: #113c35; }
.no-draft { margin: 10px 0 0; font-size: 9.2pt; color: #4d6b64; font-style: italic; }

/* ── what we looked at ─────────────────────────────────────────────────── */
.looked { margin-top: 34px; border: 1.5px solid #064f47; border-radius: 14px;
          overflow: hidden; break-inside: avoid; }
.looked-head { padding: 14px 18px; background: #064f47; color: #fff; }
.looked-head h2 { margin: 0; font-size: 18pt; font-weight: 800; letter-spacing: -.015em; }
.looked-head p { margin: 4px 0 0; font-size: 9pt; color: #a9cdc5; }
.looked-body { padding: 17px 18px; background: #fbfdfc; }
.looked-summary { margin: 0 0 16px; font-size: 12pt; color: #113c35; }
.block { margin-top: 16px; padding-top: 15px; border-top: 1px solid #dce5e2; }
.block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.block > h3 { margin: 0 0 9px; font-size: 8.4pt; font-weight: 800; letter-spacing: .09em;
              text-transform: uppercase; color: #38635a; }
.cascade { margin: 0; padding: 0; list-style: none; counter-reset: casc; }
.cascade li { position: relative; padding: 6px 0 6px 27px; color: #24312e;
              border-bottom: 1px dotted #dce5e2; }
.cascade li:last-child { border-bottom: 0; }
.cascade li::before { counter-increment: casc; content: counter(casc);
                      position: absolute; left: 0; top: 6px; width: 18px; height: 18px;
                      border-radius: 50%; background: #e8f0ed; color: #38635a;
                      font-size: 7.6pt; font-weight: 800; display: grid; place-items: center; }
.plain-line { margin: 0; color: #24312e; }
.decl { margin: 0; padding: 0; list-style: none; }
.decl li { padding: 10px 13px; border-radius: 9px; background: #f1f6f4; color: #24312e;
           margin-bottom: 7px; border-left: 3px solid #8fb3aa; }
.decl li:last-child { margin-bottom: 0; }
.decl li.warn { background: #fff6ec; border-left-color: #e07b1f; color: #6b3d09; }
.withheld { margin: 0; padding: 0; list-style: none; }
.withheld li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted #dce5e2;
               color: #24312e; }
.withheld li:last-child { border-bottom: 0; }
.withheld .tick { flex: none; color: #38635a; font-weight: 800; }
.empty-note { margin: 0; padding: 15px 17px; border: 1px dashed #c3d4cf; border-radius: 11px;
              background: #f7faf9; color: #4a6660; }

/* ── item 11: the call to action, AFTER the honesty section ────────────── */
.cta { margin-top: 20px; padding: 20px 22px; border-radius: 14px; background: #064f47;
       color: #fff; break-inside: avoid; }
.cta h2 { margin: 0 0 7px; font-size: 17pt; font-weight: 800; letter-spacing: -.015em;
          color: #fff; }
.cta p { margin: 0; color: #cde5df; font-size: 11pt; line-height: 1.5; }
.cta .ph { color: #ffeacc; background: rgba(255,255,255,.08);
           border-color: rgba(255,255,255,.34); padding: 12px 15px; }
.cta .ph::before { color: #f0c48a; }
.cta .ph h2 { margin: 0 0 6px; }
.cta .ph p { margin: 0; color: #ffeacc; }
.foot { margin-top: 20px; padding-top: 13px; border-top: 1px solid #dce5e2;
        color: #8a9694; font-size: 8.4pt; }

/* ══ V2 — APPENDED after V1's sheet. ⛔ V1's CSS constant is read, never edited. ══ */
.noticed-blk h4, .matters h4, .blk h4, .action h4 { margin: 0 0 4px; }

/* 🔻 ITEM 5, ALEX 26 Aug. `p.noticed` drops from 12pt to the 10.5pt the other card
   paragraphs inherit, and takes their colour with it.
   ⚠️ RECORDED: this FLATTENS a deliberate size hierarchy. The evidence line was the
   loudest thing on the card by design. Alex asked for it, so it is done. */
.card .noticed { margin: 0; font-size: 10.5pt; color: #2c3a37; }

/* 🔻 STAGE-FOUR ITEM 1, ALEX 26 Aug — V1's `max-width: 64ch` is REMOVED so both as-of
   paragraphs run to the same right edge as the `.spread` box below them.
   ⚠️ RECORDED: at 182mm of content width and 10.5pt this is roughly 89-98 characters per
   line, well outside the 45-75 comfortable measure. Alex has chosen ALIGNMENT over MEASURE
   with the number in front of him. */
.asof { max-width: none; }
.asof + .asof { margin-top: 9px; }

/* 🔒 STAGE-FOUR ITEM 2, ALEX 26 Aug — the rail now STARTS AT THE HEADER'S BOTTOM EDGE and
   runs down past the explainer and cards. Stage Three ran it the full height including the
   header; Alex has seen that and wants it below.
   ⛔ THE LOCKED JOIN (`web/report_html.py:309-313`): the gap above `.group-close` must come
   from the padding-bottom of THE ELEMENT CARRYING THE RAIL. `.group-body` carries BOTH
   `border-left` and `padding-bottom` in this one rule, there is exactly ONE per group, and
   nothing is emitted between it and `.group-close`. ⛔ Never split those two properties.
   🔴 THE TOP JOIN, FIXED 28 Aug (Alex). THE LINE THAT USED TO SIT HERE SAID
   "`padding-top: 0` so the rail touches the header's bottom edge with NO gap" — AND IT WAS
   EXACTLY BACKWARDS. `padding-top: 0` is what OPENED the gap. With no padding-top and no
   border-top on this element, `.group-body .explainer`'s 12px TOP MARGIN COLLAPSED OUT
   through `.keep-together` (which sets only `break-inside`, so it blocks nothing) and
   through `.group-body` itself, becoming `.group-body`'s own margin-top. The rail started
   12px BELOW the header's bottom edge — measured at 12.00px in every group, at every
   width, in both fixtures, 27 of 27.
   🔑 THE FIX: the 12px moves from the explainer's MARGIN into this element's PADDING-TOP.
   Padding does not collapse, so the rail now starts at the header's bottom edge and the
   visible header-to-explainer spacing is unchanged at 12px. ⛔ Three rules carry this
   shorthand — here and both `@media screen` blocks. Fix one and the gap survives at the
   other widths. */
.group > .group-body { border-left: 4px solid var(--ink); padding: 12px 0 12px 14px; }
.group .group-inner, .group .group-rail { border-left: 0; padding: 0; }  /* not emitted now */

/* 🔴 STAGE THREE'S HEADER CONCESSIONS ARE REVERTED. To clear a rail running beside it, the
   header had been given `margin-left: -14px`, `border-left: 0` and `border-radius: 0 12px 0 0`.
   With the rail below it instead, the header would otherwise render with NO LEFT EDGE and ONE
   SQUARED CORNER. Its left border and full radius are restated here explicitly rather than
   left to win on cascade order. `break-after: avoid` keeps it with the explainer and first
   card now that it is no longer wrapped inside `.keep-together`. */
.group > .group-head { margin-left: 0; border-left: 1px solid var(--edge);
                       border-radius: 12px 12px 0 0;
                       break-after: avoid; page-break-after: avoid; }
/* 🔴 TOP MARGIN SURRENDERED 28 Aug — it was the margin that escaped and pushed the rail
   down. The 12px now lives in `.group > .group-body`'s padding-top. ⛔ Never restore a top
   margin here: it would collapse out again and reopen the gap. */
.group-body .explainer { margin: 0 0 12px 0; }      /* at the 14px indent = card edge */
.group-body .last-card { margin-bottom: 0; }        /* keeps the gap 12px, not 24px */

/* 🔒 ITEM 6 — the draft message is ONE box. V1 bordered every paragraph, so a four-paragraph
   message rendered as four separate white cards. ⛔ Paragraph breaks and `pre-wrap` stay. */
.draft-body .draft-message { padding: 11px 13px; border: 1px solid #eadfd8; border-radius: 8px;
                             background: #fff; color: #182321; font-size: 11pt;
                             line-height: 1.5; }
.draft-body .draft-para { margin: 0; white-space: pre-wrap; }
.draft-body .draft-para + .draft-para { margin-top: 10px; }

/* 🔒 ITEM 8 — the student's address in the hint slot. 9pt, not V1's 8pt: this is an address
   the creator ACTS on, not a hint they skim. `nowrap` keeps it on one line. */
.draft-head .hint-mail { margin-left: auto; font-size: 9pt; font-weight: 700; color: #b8420a;
                         text-decoration: none; border-bottom: 1px solid #e8a077;
                         white-space: nowrap; }

.keep-together { break-inside: avoid; page-break-inside: avoid; }
.empty-block { margin: 18px 0; }
.empty-block .empty-more { margin-top: 8px; font-size: 10pt; color: #4a5654; }
.empty-block .empty-honesty { margin-top: 12px; font-weight: 600; }
.card.for-you .for-you-flag { display: block; }
.foot-prod { font-style: normal; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   §17 THE NEXT-STEPS SECTION — light panel, one saturated element. 29 Aug (visual pass).
   🔴 WHY IT WENT LIGHT. On V1's dark `#064f47` panel every element was already high-contrast
      against it, so an amber button was just one more bright thing on a bright field — it
      could not act as the report's CLOSING SIGNAL. On an off-white panel the button is the
      ONLY saturated element on the page's last screen, and it reads as the one thing to do.
   ⛔ NO NEW COLOURS. `#F39C12` is the only value introduced; everything else is already in
      the report — `#f7faf9` and `#dce5e2` from `.spread`, `#fff`/`#dce5e2`/13px from `.card`,
      `#2c3a37` from `.blk > p`.
   ⛔ `.cta`, `.cta h2` and `.cta p` are V1's; CSS_V2 is appended AFTER V1's sheet, so an
      equal-specificity rule here wins. V1's constant is READ, never edited.
   ⛔ NOTHING here is inside an @media print block.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* 1. THE PANEL. V1 sets `background: #064f47; color: #fff`. Same off-white and border as
      `.spread`, the report's other full-width section panel, so this is a treatment the
      reader has already seen rather than a new one. Padding, radius and `break-inside` are
      V1's and are left alone. */
.cta { background: #f7faf9; color: #2c3a37; border: 1px solid #dce5e2; }

/* 2. THE SECTION HEADING. V1's `.cta h2` is `color: #fff`, invisible on off-white.
      🔑 #2c3a37, the body ink, NOT #064f47. The deep green is the report's heading colour,
      but a saturated heading would compete with the button — and the button being the only
      saturated element is the entire point of the change. ⛔ Not pure black either: there is
      no true black anywhere in this report and one would read as foreign. */
.cta h2 { color: #2c3a37; }

/* 3. THE SUB-HEADINGS. V1 styles `.cta h2` but has no h3 rule anywhere, so unstyled these
      take the UA default — 1.17em with large margins. 12pt sits under the 17pt h2 and above
      the 11pt body. */
.cta .step h3 { margin: 0 0 6px; font-size: 12pt; font-weight: 800;
                letter-spacing: -.01em; color: #2c3a37; }

/* 4. BODY TEXT. V1's `.cta p` is `#cde5df` — a pale tint for a dark panel, unreadable on
      off-white — and it out-specifies `.cta`, so it has to be overridden here. */
.cta .step p { margin: 0; color: #2c3a37; font-size: 11pt; line-height: 1.5; }
.cta .step p.book { margin-top: 12px; }

/* 5. SIBLING SPACING. There is no rule anywhere for two peer blocks in one section; with
      none they touch. */
.cta .step + .step { margin-top: 16px; }

/* 6. THE VARIANT — 🔻 THE DASHED BORDER IS GONE. Dashed conventionally signals placeholder,
      provisional or drop-zone, which is precisely the wrong signal on a booking invitation —
      and in this report `.ph` really is the dashed placeholder treatment, so it was actively
      ambiguous. ⛔ Block 1 is now UNBORDERED and sits directly on the panel; block 2 takes
      `.card`'s exact treatment — `#fff`, `1px solid #dce5e2`, `13px` — so it reads as a card,
      a shape the report already uses everywhere. The BUTTON does the differentiating. */
.cta .step-invite { padding: 15px 17px; border: 1px solid #dce5e2; border-radius: 13px;
                    background: #fff; }

/* 7. THE BUTTON — the only saturated element in the section, and the report's only outbound
      link. There is no bare `a` rule in either stylesheet, so unstyled it is UA blue and
      underlined.
      🔻 29 Aug — DEEPER ORANGE, WHITE LABEL, NO BORDER. Alex asked for a white label and no
      border. ⛔ Neither was shippable on #F39C12: white on it measures 2.19:1 (fails AA's 4.5
      AND the 3:1 large-bold allowance), and the fill against the #f7faf9 panel measures
      2.09:1 — under the 3:1 a UI component's boundary needs, which is what the border was
      there to fix. ✅ #B45309 delivers BOTH asks at once: white label 5.02:1, button against
      the panel 4.78:1. Both clear 4.5, so the border is no longer doing any work and is gone.
      🔑 `min-height: 44px` stays in the BASE rule, not only at the 860 breakpoint where
         `.hint-mail` sets it: one rule instead of two, and never under 44px at any width. */
.cta .book-link { display: inline-flex; align-items: center; min-height: 44px;
                  padding: 0 16px; border-radius: 8px; background: #B45309;
                  color: #fff; font-size: 11pt; font-weight: 800;
                  text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════
   SCREEN SUPPORT — STAGE SIX. ⛔ PURELY ADDITIVE.
   🔒 EVERY PRINT RULE IS UNTOUCHED: `@page`, `print-color-adjust`, the `@media print`
      block, and every `break-inside` / `break-after` / `keep-together` rule still stand
      exactly as they were. Alex may still want a PDF for the first free report.
   ⛔ Nothing below is inside `@media print`, so none of it can reach paper.

   🔑 THE BREAKPOINT, DERIVED NOT GUESSED. `.sheet` is `width: 210mm` = 794px, and V1's
      `@media screen` adds `margin: 18px auto` — so the sheet needs 794 + 36 = 830px before
      it stops overflowing. 860px is the first round number clear of that.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 860px) {
  /* the sheet stops being a sheet of paper and becomes the viewport */
  body { background: #fff; }
  .sheet { width: auto; max-width: 100%; min-height: 0; margin: 0; padding: 20px 18px;
           box-shadow: none; }

  /* masthead: the lockup is a flex row with a `margin-left:auto` nowrap date stamp.
     At 390px the logo + brand + stamp cannot share a line. */
  .lockup { flex-wrap: wrap; }
  .asof-stamp { margin-left: 0; }
  h1 { font-size: 30pt; margin: 14px 0 10px; }

  /* 🔒 THE RAIL, AND THE LOCKED JOIN. `border-left` and `padding-bottom` are RESTATED
     TOGETHER here — `web/report_html.py:309-313` requires the gap above `.group-close` to
     come from the padding of the element carrying the rail. ⛔ Never narrow the padding in
     a rule that omits the border. The inset drops 18px → 14px.
     🔴 AND `padding-top: 12px` — RULE 2 OF 3 for the top join (28 Aug). A shorthand
     resets padding-top to 0, so fixing only the base rule would have left the gap open at
     every width this block covers. ⛔ All three rules or none. */
  .group > .group-body { border-left: 4px solid var(--ink); padding: 12px 0 12px 10px; }

  .card { padding: 13px 13px; }
  /* a long name and its insight badge cannot share a line at phone width */
  .card-head { flex-wrap: wrap; }

  /* the draft head is a flex row whose right-hand item is a nowrap email address */
  .draft-head { flex-wrap: wrap; }
  .draft-head .hint-mail { margin-left: 0; white-space: normal; overflow-wrap: anywhere;
                           display: inline-flex; align-items: center; min-height: 44px; }
  .draft-body { padding: 11px 12px; }
  .draft-body .draft-message { padding: 10px 11px; }

  /* chips: `flex: 1 1 0` + `min-width: 96px` squeezes five onto one row */
  .chip { flex: 1 1 44%; min-width: 0; }
  .spread { padding: 14px 14px; }

  .looked { padding: 14px 14px; }
  .cta { padding: 14px 14px; }
}

@media screen and (max-width: 560px) {

  /* 🔑 the button is the widest single word-run in the section; below 560 it is allowed to
     wrap and to fill the block rather than overflow it. */
  .cta .book-link { display: flex; justify-content: center; text-align: center;
                    padding: 8px 14px; }
  .sheet { padding: 16px 12px; }
  h1 { font-size: 26pt; }
  /* 🔴 RULE 3 OF 3 for the top join (28 Aug) — same shorthand, same trap. */
  .group > .group-body { border-left: 4px solid var(--ink); padding: 12px 0 12px 8px; }
  .chip { flex: 1 1 100%; }
}