/* Show Me You Mean It: Gracie Barra Bondi athlete playbooks.
   One stylesheet for every page. Brand: C:\magnx\brand\GB_SCHOOL_BRAND_GUIDE.md (light theme only,
   GB Red as accent, AdihausDIN). Page structure is documented in ../TEMPLATE.md. */

@font-face { font-family: "DIN Cn"; src: url("fonts/AdihausDIN-CnBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DIN"; src: url("fonts/AdihausDIN-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DIN"; src: url("fonts/AdihausDIN-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DIN"; src: url("fonts/AdihausDIN-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DIN"; src: url("fonts/AdihausDIN-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --red: #E2211C;
  --red-deep: #7C1313;
  --red-tint: #FBECEB;
  --cobalt: #0046AD;
  --cobalt-tint: #EDF1F9;
  --ink: #1A1A1A;
  --ink-2: #333333;
  --ink-3: #575756;
  --line: #DADADA;
  --paper: #FCFCFC;
  --paper-2: #F3F3F2;
  --paper-3: #EDEDED;
  --head: "DIN Cn", "Arial Narrow", "Archivo Narrow", Arial, sans-serif;
  --body: "DIN", Arial, Helvetica, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radius: 10px;
  --shadow: 0 2px 8px rgba(26,26,26,.06);
  --shadow-up: 0 8px 30px rgba(26,26,26,.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
@media (min-width: 768px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
p, ul, ol { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li::marker { color: var(--red); }
strong { font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: 1.04; letter-spacing: .01em; margin: 0; }
h1 { font-size: clamp(44px, 11vw, 96px); }
h2 { font-size: clamp(28px, 5.4vw, 42px); }
h3 { font-size: clamp(21px, 3.4vw, 26px); }
h4 { font-size: 19px; letter-spacing: .03em; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
@media (min-width: 768px) { .wrap { padding: 0 var(--s5); } }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); z-index: 10; }
.skip:focus { left: var(--s4); }
.eyebrow { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0 0 var(--s3); }
.muted { color: var(--ink-3); }
.small { font-size: .88em; }

/* ---------- Site header ---------- */
.topbar { height: 6px; background: var(--red); }
.site-head { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 68px; }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 40px; height: 40px; }
.brand-text { font-family: var(--head); text-transform: uppercase; line-height: 1.05; font-size: 15px; letter-spacing: .06em; }
.brand-text b { display: block; color: var(--red); font-weight: 700; }
.head-link { font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--ink); text-decoration: none; padding: var(--s3) 0; min-height: 44px; display: inline-flex; align-items: center; }
.head-link:hover { color: var(--red); }

/* ---------- Page hero (playbooks) ---------- */
.page-hero { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--paper-3) 0%, var(--paper) 100%); }
.page-hero h1 { margin-bottom: var(--s4); }
.page-hero .point { font-size: clamp(19px, 2.6vw, 24px); line-height: 1.4; max-width: 44ch; color: var(--ink-2); margin-bottom: var(--s5); font-weight: 500; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.tag { display: inline-flex; align-items: center; font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); white-space: nowrap; }
.tag-show { border-color: var(--red); color: var(--red); }
.tag-pro { border-color: var(--cobalt); color: var(--cobalt); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: 999px; font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 16px; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.btn-primary { background: var(--red); color: var(--paper); box-shadow: var(--shadow); }
.btn-primary:hover { color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-up); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { color: var(--red); border-color: var(--red); }
.btn svg { width: 18px; height: 18px; }

/* ---------- Playbook body ---------- */
.page-body { padding-top: var(--s6); padding-bottom: var(--s7); }
.toc { margin-bottom: var(--s6); }
.toc h2 { font-size: 15px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: var(--s3); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--head); color: var(--red); font-size: 14px; }
.toc a:hover { border-color: var(--red); color: var(--red); }

@media (min-width: 1080px) {
  .page-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s7); align-items: start; }
  .toc { position: sticky; top: var(--s5); margin: 0; }
  .toc ol { flex-direction: column; gap: 2px; }
  .toc a { background: none; border: 0; border-radius: 6px; min-height: 36px; padding: 4px 10px; font-size: 15px; }
  .toc a:hover { background: var(--paper-2); }
}

.prose { max-width: 760px; min-width: 0; counter-reset: sec; }
.prose > * { max-width: var(--measure); }
.prose > .levels, .prose > .table-wrap, .prose > .stats, .prose > .prompt-grid, .prose > .timeline { max-width: none; }
.sec { counter-increment: sec; padding-top: var(--s7); }
.sec:first-of-type { padding-top: 0; }
.sec > h2 { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.sec > h2::before { content: counter(sec, decimal-leading-zero); font-size: 18px; letter-spacing: .14em; color: var(--red); }
.sec > h2::after { content: ""; width: 60px; height: 4px; background: var(--red); margin-top: var(--s2); }
.sec h3 { margin: var(--s6) 0 var(--s3); }
.sec h4 { margin: var(--s5) 0 var(--s2); }
.lead { font-size: 1.12em; line-height: 1.5; color: var(--ink-2); font-weight: 500; }

/* The 30-second version at the top of every playbook */
.quick { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--red); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); margin-bottom: var(--s6); }
.quick h2 { font-size: 22px; margin-bottom: var(--s3); }
.quick ul { margin: 0; padding-left: 0; list-style: none; }
.quick li { position: relative; padding-left: 22px; margin-bottom: var(--s2); font-weight: 500; }
.quick li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); }
.quick li:last-child { margin-bottom: 0; }

/* Show Me / Pro levels */
.levels { display: grid; gap: var(--s4); margin: var(--s5) 0 var(--s5); }
@media (min-width: 820px) { .levels { grid-template-columns: 1fr 1fr; } }
.level { border-radius: var(--radius); padding: var(--s5); border: 1px solid var(--line); background: var(--paper); }
.level-show { border: 2px solid var(--red); }
.level-pro { background: var(--cobalt-tint); border-color: #B9C9E6; }
.level-tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; margin: 0 0 var(--s2); }
.level-show .level-tag { color: var(--red); }
.level-pro .level-tag { color: var(--cobalt); }
.level h3 { margin: 0 0 var(--s3); }
.level p:last-child, .level ul:last-child { margin-bottom: 0; }
.level .cost { font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--ink-3); margin-bottom: var(--s3); }

/* Do this */
.do { border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--s5); margin: var(--s5) 0; background: var(--paper); }
.do-tag { display: inline-block; font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; background: var(--ink); color: var(--paper); padding: 4px 10px; border-radius: 4px; margin: 0 0 var(--s3); }
.do h3 { margin: 0 0 var(--s3); }
.do > :last-child { margin-bottom: 0; }

/* Checklists: real checkboxes, tick on screen, print as empty boxes */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.checklist li { margin: 0; border-bottom: 1px solid var(--paper-3); }
.checklist li:last-child { border-bottom: 0; }
.checklist label { display: flex; gap: var(--s3); align-items: flex-start; padding: 10px 0; min-height: 44px; cursor: pointer; }
.checklist input { appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; border: 2px solid var(--ink-2); border-radius: 4px; background: var(--paper); cursor: pointer; display: grid; place-content: center; }
.checklist input::before { content: ""; width: 12px; height: 7px; border-left: 3px solid var(--paper); border-bottom: 3px solid var(--paper); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.checklist input:checked { background: var(--red); border-color: var(--red); }
.checklist input:checked::before { opacity: 1; }
.checklist input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); }

/* Ricky's stories */
.story { margin: var(--s5) 0; padding: var(--s5); background: var(--paper-2); border-radius: var(--radius); position: relative; }
.story-tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0 0 var(--s2); }
.story p { font-size: 1.02em; }
.story > :last-child { margin-bottom: 0; }

/* Non-negotiables: the one small dark panel (partial dark, allowed) */
.rule { margin: var(--s5) 0; padding: var(--s5); background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.rule-tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: #FF8A84; margin: 0 0 var(--s2); }
.rule h3 { margin: 0 0 var(--s3); color: var(--paper); }
.rule p, .rule li { color: #EDEDED; line-height: 1.65; }
.rule a { color: #B9C9E6; }
.rule > :last-child { margin-bottom: 0; }

/* Pull quote */
.pull { margin: var(--s6) 0; font-family: var(--head); text-transform: uppercase; font-size: clamp(26px, 5vw, 38px); line-height: 1.08; color: var(--ink); }
.pull em { font-style: normal; color: var(--red); }
.pull cite { display: block; margin-top: var(--s3); font-family: var(--body); text-transform: none; font-style: normal; font-size: 15px; color: var(--ink-3); letter-spacing: 0; }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s5) 0; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.stat .num { font-family: var(--head); font-size: clamp(40px, 8vw, 56px); line-height: 1; color: var(--red); }
.stat .num small { font-size: .45em; letter-spacing: .06em; margin-left: 2px; }
.stat .label { font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--ink-2); margin-top: var(--s2); line-height: 1.2; }

/* Tables (scroll inside their own box on small screens, never the page) */
.table-wrap { overflow-x: auto; margin: var(--s4) 0 var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92em; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--paper-3); }
th { font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; background: var(--paper-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 700; }
.table-wrap caption { caption-side: bottom; text-align: left; padding: 8px 12px; font-size: .85em; color: var(--ink-3); }

/* Timeline (routines) */
.timeline { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 92px 1fr; gap: var(--s3); padding: 10px 0; margin: 0; border-bottom: 1px solid var(--paper-3); }
.timeline .when { font-family: var(--head); text-transform: uppercase; color: var(--red); letter-spacing: .04em; }

/* Disclaimer + professionals */
.disclaimer { margin: var(--s7) 0 0; padding: var(--s5); border-radius: var(--radius); background: var(--cobalt-tint); border: 1px solid #B9C9E6; }
.disclaimer h2 { font-size: 22px; margin-bottom: var(--s3); color: var(--cobalt); }
.disclaimer ul { padding-left: 0; list-style: none; margin: var(--s3) 0 0; }
.disclaimer li { margin-bottom: var(--s3); }
.disclaimer li b { display: block; }
.disclaimer > :last-child { margin-bottom: 0; }

/* Pager */
.pager { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s7); }
.pager .wrap { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .pager .wrap { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5); background: var(--paper); transition: border-color .2s var(--ease), transform .2s var(--ease); min-height: 44px; }
.pager a:hover { border-color: var(--red); transform: translateY(-2px); }
.pager span { display: block; font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--ink-3); }
.pager b { display: block; font-family: var(--head); text-transform: uppercase; font-size: 24px; font-weight: 700; color: var(--ink); }
.pager .next { text-align: right; }
@media (min-width: 640px) { .pager .next { grid-column: 2; } }

/* Footer */
.site-foot { background: var(--paper-3); border-top: 4px solid var(--red); padding: var(--s6) 0; font-size: 15px; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; }
.site-foot img { width: 180px; height: auto; }
.site-foot p { margin: 0; max-width: 60ch; }

/* ---------- Home ---------- */
.home-hero { padding: var(--s7) 0 var(--s7); background: linear-gradient(180deg, var(--paper-3) 0%, var(--paper) 100%); border-bottom: 1px solid var(--line); }
.home-hero h1 { font-size: clamp(54px, 15vw, 150px); line-height: .92; margin-bottom: var(--s5); }
.home-hero h1 span { display: block; color: var(--red); }
.home-hero .intro { max-width: 62ch; }
.home-hero .intro p { font-size: 1.06em; }
.home-hero .intro p:first-child { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.4; font-weight: 500; color: var(--ink); }
.sign { font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.home-sec { padding: var(--s8) 0 0; }
.home-sec > .wrap > h2 { margin-bottom: var(--s3); }
.home-sec > .wrap > h2::after { content: ""; display: block; width: 60px; height: 4px; background: var(--red); margin-top: var(--s3); }
.home-sec .sub { max-width: 62ch; color: var(--ink-2); margin-bottom: var(--s5); }

.deal { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s4); counter-reset: deal; }
@media (min-width: 820px) { .deal { grid-template-columns: repeat(3, 1fr); } }
.deal li { counter-increment: deal; margin: 0; padding: var(--s5) 0 0; border-top: 2px solid var(--ink); }
.deal li::before { content: counter(deal); display: block; font-family: var(--head); font-size: 64px; line-height: .9; color: var(--red); margin-bottom: var(--s3); }
.deal h3 { margin-bottom: var(--s2); }
.deal p { margin: 0; }

.pillars { list-style: none; padding: 0; margin: var(--s5) 0 0; counter-reset: pillar; border-top: 1px solid var(--line); }
.pillar { counter-increment: pillar; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s2) var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--line); margin: 0; }
.pillar::before { content: counter(pillar, decimal-leading-zero); font-family: var(--head); font-size: 44px; line-height: 1; color: var(--red); grid-column: 1; grid-row: 1 / span 3; }
.pillar > * { grid-column: 2; }
@media (min-width: 900px) {
  .pillar { grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; column-gap: var(--s5); }
  .pillar::before { font-size: 72px; grid-row: 1 / span 2; }
  .pillar h3 { grid-row: 1; } .pillar p { grid-row: 2; }
  .pillar .links { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}
.pillar h3 { font-size: clamp(24px, 3.6vw, 34px); }
.pillar p { margin: 0; color: var(--ink-2); }
.links { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; list-style: none; }
.links li { margin: 0; }
.links a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 16px; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.links a::after { content: "\2192"; font-family: var(--body); }
.links a:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

.extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: var(--s5); }
.extras a { display: block; background: var(--paper); padding: var(--s5); text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; transition: background .2s var(--ease); }
.extras a:hover { background: var(--red-tint); color: var(--ink); }
.extras b { display: block; font-family: var(--head); text-transform: uppercase; font-size: 22px; margin-bottom: var(--s1); }
.extras span { color: var(--ink-2); font-size: .95em; }

.home-end { padding: var(--s8) 0; }

/* Motion (transform/opacity only) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print: A4, one playbook per PDF ---------- */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  html, body { background: #fff; font-size: 10.5pt; line-height: 1.5; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip, .site-head .head-link, .toc, .pager, .hero-meta .btn, .no-print { display: none !important; }
  .topbar { height: 3mm; }
  .site-head { border: 0; }
  .site-head .wrap { min-height: 0; padding: 0 0 4mm; }
  .wrap { max-width: none; padding: 0; }
  .page-hero, .home-hero { background: none; padding: 4mm 0 6mm; }
  h1 { font-size: 34pt; }
  .home-hero h1 { font-size: 40pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 13.5pt; }
  .page-body { display: block; padding: 6mm 0 0; }
  .prose, .prose > * { max-width: none; }
  .sec { padding-top: 8mm; }
  h1, h2, h3, h4, .sec > h2, .level-tag, .story-tag, .rule-tag, .do-tag { break-after: avoid; page-break-after: avoid; }
  .quick, .level, .stat, .timeline li, tr, .prompt, .disclaimer li, .checklist li, .pull, .pillar, .deal li { break-inside: avoid; page-break-inside: avoid; }
  .levels { grid-template-columns: 1fr 1fr; }
  .table-wrap { overflow: visible; }
  .prose a[href^="http"]::after, .disclaimer a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--ink-3); word-break: break-all; }
  .site-foot { display: none; }
  .write-lines { break-inside: avoid; }
  .do .write-lines div { height: 1.3em; }
  /* Headings: block layout so Chrome honours keep-with-next; the underline stays attached */
  .sec > h2 { display: block; break-inside: avoid; }
  .sec > h2::before { display: block; margin-bottom: 2mm; }
  .sec > h2::after { display: block; }
  .sec > h2 + *, h3 + *, h4 + *, .do-tag + *, .level-tag + * { break-before: avoid; page-break-before: avoid; }
  .disclaimer { break-inside: avoid; }
  .sec h3 { margin-top: 6mm; }
  /* Long story boxes may break between paragraphs (no half-empty pages); checklists, level cards and .rule stay whole. */
  .rule, .do:has(.checklist), .do:has(.form-row) { break-inside: avoid; page-break-inside: avoid; }
  .story, .do { break-inside: avoid; page-break-inside: avoid; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  /* story boxes and long lists (6+ items) may split; short boxes stay whole */
  .story, .do:has(> ul:not(.checklist) > li:nth-child(6)) { break-inside: auto; page-break-inside: auto; }
  .story p, .do p, .do li { orphans: 3; widows: 3; }
  .do li { break-inside: avoid; }
  .do > .do-tag, .do > h3 { break-after: avoid; }
  .do .form-row { min-height: 7.5mm; padding: 3px 0; }
  .level { padding: 12px 16px; }
  .levels { margin: var(--s4) 0; }
  /* a lead-in line stays with the dark rule box it introduces */
  p:has(+ .rule) { break-after: avoid; break-inside: avoid; }
  .checklist label { padding: 6px 0; min-height: 0; }
  .sec > h2 + p:has(+ .do), .sec > h2 + p:has(+ .story), .sec > h2 + p:has(+ .rule) { break-after: avoid; break-inside: avoid; }
}

/* ---------- Journal page extras ---------- */
.prompt-grid { display: grid; gap: var(--s4); margin: var(--s5) 0; }
@media (min-width: 900px) { .prompt-grid { grid-template-columns: 1fr 1fr; } }
.prompt { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); background: var(--paper); display: flex; flex-direction: column; gap: var(--s3); }
.prompt .theme { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0; }
.prompt .q { font-family: var(--head); text-transform: uppercase; font-size: 22px; line-height: 1.12; margin: 0; }
.prompt .step { margin: 0; padding-top: var(--s3); border-top: 1px dashed var(--line); }
.prompt .step b { font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; color: var(--ink-3); display: block; }
.write-lines { margin: var(--s4) 0; }
.write-lines div { border-bottom: 1px solid var(--line); height: 2.1em; }
.form-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: var(--s3); border-bottom: 1px solid var(--line); padding: 10px 0; }
.form-row b { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* Stacked tables on phones: add class "stack" to .table-wrap and data-label on each td */
@media (max-width: 599px) {
  .stack thead { display: none; }
  .stack table, .stack tbody, .stack tr, .stack td { display: block; width: 100%; }
  .stack tr { padding: 12px 14px; border-bottom: 1px solid var(--paper-3); }
  .stack tr:last-child { border-bottom: 0; }
  .stack td { padding: 2px 0 6px; border: 0; }
  .stack td:first-child { font-family: var(--head); text-transform: uppercase; font-size: 19px; letter-spacing: .02em; padding-bottom: 4px; }
  .stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--ink-3); }
  .stack caption { display: block; width: auto; max-width: none; padding: 10px 14px 12px; }
}
.do .levels { margin: 0; }
.home-hero .hero-meta { margin-top: var(--s5); }
.form-row { min-height: 52px; }

/* ---------- Phase 2 extras: weekly planner, colour key, 8-week tracker ---------- */
.key { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); list-style: none; padding: 0; margin: var(--s3) 0 var(--s4); }
.key li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.key li::before { content: ""; width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(26,26,26,.25); background: var(--sw, #fff); }
.k-school { --sw: #E4E4E2; }
.k-study { --sw: #D6E1F5; }
.k-jj { --sw: #F9D3D1; }
.k-sc { --sw: #FBE3B8; }
.k-rec { --sw: #D5EED9; }
.k-sleep { --sw: #E2DCF0; }
.planner td.k-school, .planner td.k-study, .planner td.k-jj, .planner td.k-sc, .planner td.k-rec, .planner td.k-sleep { background: var(--sw); }
.prose > .sec.wide { max-width: none; }
.planner { table-layout: fixed; min-width: 720px; font-size: .8em; }
.planner th, .planner td { border: 1px solid var(--line); padding: 5px 6px; line-height: 1.3; }
.planner th:first-child, .planner td:first-child { width: 64px; font-family: var(--head); text-transform: uppercase; font-weight: 700; white-space: nowrap; background: var(--paper-2); }
.planner.blank td { height: 34px; }
.planner td { font-weight: 400; }
.planner-title { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; justify-content: space-between; }

.tracker { table-layout: fixed; min-width: 720px; font-size: .78em; }
.tracker th, .tracker td { border: 1px solid var(--line); padding: 3px 4px; text-align: center; vertical-align: middle; }
.tracker th { white-space: normal; line-height: 1.1; font-size: .92em; letter-spacing: .03em; overflow-wrap: normal; hyphens: auto; }
.tracker td:first-child { font-family: var(--head); text-transform: uppercase; background: var(--paper-2); }
.tracker .c-wk { width: 5.5%; } .tracker .c-day { width: 5%; } .tracker .c-habit { width: 6.75%; } .tracker .c-check { width: 22%; }
.tracker td.day { font-family: var(--head); text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.tracker td.box { height: 24px; }
.tracker td.wk { text-align: left; vertical-align: top; font-weight: 400; font-size: .92em; line-height: 1.6; }
.tracker td.wk b { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.tracker tr.wk-start td { border-top: 2px solid var(--ink); }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); align-items: baseline; margin-bottom: var(--s2); }
.sheet-head h3 { margin: 0; }
.sheet-foot { font-size: .85em; color: var(--ink-3); margin-top: var(--s2); }
/* Phase 8: tailorable tracker (editable headers + My plan strip) */
.sheet-tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.sheet-tools .btn { cursor: pointer; font-size: 15px; min-height: 44px; padding: 0 var(--s4); }
.plan-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin: 0 0 var(--s3); font-size: .9em; }
.plan-strip label { display: inline-flex; align-items: baseline; gap: var(--s2); }
.plan-strip b { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.plan-strip .plan-title { color: var(--red); }
.plan-strip input { font: inherit; color: var(--ink); width: 6.5em; max-width: 100%; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0; background: transparent; padding: 2px; }
.plan-strip input.short { width: 3em; }
.plan-strip .wide input { width: 13em; }
.plan-strip input::placeholder { color: #A5A5A4; }
.tracker .hdr { display: block; min-height: 2.3em; padding: 2px; border-radius: 3px; background: var(--paper-2); cursor: text; font-size: .88em; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
.tracker .hdr:empty::before { content: attr(data-ph); color: #8A8A89; font-weight: 400; }

@media print {
  .planner, .tracker { min-width: 0; }
  .planner-sec { break-before: page; page-break-before: always; }
  /* Example week: heading, intro and the whole table stay together on one page */
  #example { break-inside: avoid; page-break-inside: avoid; }
  /* skin: short sections (heading, intro, table or list) move whole */
  #spot, #competing { break-inside: avoid; page-break-inside: avoid; }
  .planner { font-size: 7.5pt; }
  .planner.blank td { height: 9mm; }
  /* Tracker page prints the sheet only, on one A4 page */
  .sheet-page .site-head, .sheet-page .page-hero, .sheet-page .prose > :not(#sheet) { display: none !important; }
  .sheet-page .page-body { padding: 0; }
  .sheet-page #sheet { padding: 0; }
  .sheet-page #sheet > h2 { display: none; }
  .tracker { font-size: 6.6pt; }
  .tracker th, .tracker td { padding: .4mm 1mm; line-height: 1.1; }
  .tracker td.box { height: 3.6mm; }
  .tracker td.wk { font-size: 6.6pt; line-height: 1.5; }
  .tracker tr { break-inside: avoid; }
  .tracker-wrap { border: 0; border-radius: 0; }
  .sheet-head h3 { font-size: 15pt; }
  .sheet-page .sheet-head { padding-top: 2.5mm; }
  /* Inputs print as plain text; blank ones print as a write-on line */
  .plan-strip { font-size: 8pt; gap: 1mm 4mm; margin: 0 0 2mm; }
  .plan-strip input { border-bottom-color: transparent; padding: 0; }
  .plan-strip input:not(:placeholder-shown) { width: auto; min-width: 0; field-sizing: content; }
  .plan-strip input:placeholder-shown { border-bottom: .25mm solid var(--ink); width: 14mm; }
  .plan-strip .wide input:placeholder-shown { width: 34mm; }
  .plan-strip input::placeholder { color: transparent; }
  .tracker .hdr { background: none; min-height: 0; padding: 0; border-radius: 0; font-size: inherit; letter-spacing: inherit; }
  .tracker .hdr:empty { min-height: 7mm; border-bottom: .25mm solid var(--ink); margin: 0 .5mm; }
  .tracker .hdr:empty::before { content: none; }
}

/* ---------- Phase 9 editorial components (sample round: index, sleep, mindset) ----------
   .coach      "From the coach" note: max 1-2 per page, 2-5 lines, signed
   .mistakes   "Common mistakes" list: <ul class="mistakes"><li><b>Mistake.</b> Fix.</li>
   .sec.how    "How to do it" section: each h3 gets an automatic "Step 0N" label
   .toc li ol  nested step links in the TOC (desktop sidebar only)
   .contents   home page contents: .group > .group-head + ol.entries (or ol.pillars) */
.coach { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--s4); margin: var(--s5) 0; padding: var(--s5); background: var(--red-tint); border-radius: var(--radius); }
.coach::before { content: ""; grid-row: 1 / span 3; width: 40px; height: 40px; background: url("gb-shield.svg") center / contain no-repeat; }
.coach > * { grid-column: 2; }
.coach-tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0 0 var(--s2); }
.coach p:not(.coach-tag):not(.coach-sign) { color: var(--ink); margin-bottom: var(--s2); }
.coach-sign { font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--red-deep); margin: 0; }
@media (max-width: 479px) { .coach { grid-template-columns: 1fr; row-gap: var(--s2); } .coach::before { grid-row: auto; width: 32px; height: 32px; } .coach > * { grid-column: 1; } }

.mistakes { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); border-top: 1px solid var(--line); }
.mistakes li { position: relative; margin: 0; padding: var(--s3) 0 var(--s3) 36px; border-bottom: 1px solid var(--line); }
.mistakes li::before { content: "\00D7"; position: absolute; left: 0; top: var(--s3); width: 24px; height: 24px; display: grid; place-content: center; border-radius: 50%; background: var(--red); color: var(--paper); font-family: var(--body); font-weight: 700; font-size: 18px; line-height: 1; }
.mistakes b { font-weight: 700; color: var(--ink); }

.sec.how { counter-reset: step; }
.sec.how > h3 { counter-increment: step; scroll-margin-top: var(--s4); }
.sec.how > h3::before { content: "Step " counter(step, decimal-leading-zero); display: block; font-size: 14px; letter-spacing: .14em; color: var(--red); margin-bottom: var(--s1); }
.sec.how > h2 + h3 { margin-top: var(--s4); }

.toc li ol { display: none; }
@media (min-width: 1080px) {
  .toc li ol { display: flex; margin: 0 0 var(--s2) 30px; }
  .toc li li { counter-increment: none; }
  .toc li li a { min-height: 30px; font-size: 14px; font-weight: 400; color: var(--ink-2); padding: 2px 10px; }
  .toc li li a::before { content: none; }
}

.contents { margin-top: var(--s5); border-bottom: 2px solid var(--ink); }
.group { display: grid; gap: var(--s4); padding: var(--s5) 0 var(--s6); border-top: 2px solid var(--ink); }
@media (min-width: 900px) { .group { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s7); } }
.group-no { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0 0 var(--s1); }
.group-head h3 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: var(--s2); }
.group-head p:last-child { color: var(--ink-2); margin: 0; font-size: .95em; }
.entries { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.entries li { margin: 0; border-bottom: 1px solid var(--line); }
.entries a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); padding: var(--s4) 0; text-decoration: none; color: var(--ink); min-height: 44px; transition: color .2s var(--ease); }
.entries a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--red); font-size: 22px; transition: transform .2s var(--ease); }
.entries a:hover { color: var(--red); }
.entries a:hover::after { transform: translateX(4px); }
.entries b { font-family: var(--head); text-transform: uppercase; font-size: 22px; line-height: 1.1; }
.entries span { color: var(--ink-2); font-size: .95em; }
.group .pillars { margin: 0; }
.group .pillar:first-child { padding-top: var(--s4); }
@media (min-width: 900px) {
  .group .pillar { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s4); }
  .group .pillar::before { font-size: 52px; grid-row: 1 / span 3; }
  .group .pillar h3, .group .pillar p { grid-row: auto; }
  .group .pillar .links { grid-column: 2; grid-row: auto; margin-top: var(--s2); }
}
.home-note { margin-top: var(--s5); }
.home-end .wrap { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media print {
  .coach, .mistakes li, .group-head, .entries li { break-inside: avoid; page-break-inside: avoid; }
  .sec.how > h3::before { display: block; }
}
.group .pillars, .entries { border-top: 0; }
.entries li:first-child a { padding-top: var(--s1); }
.group .pillar:first-child { padding-top: 0; }

/* ---------- Phase 10: all checklists on one page (checklists.html, body.lists-page) ----------
   li > label(input + span) + a.from "-> Page"; .receipt = the Show Me cost total; ticks saved by the page's own script. */
button.btn { cursor: pointer; }
.page-hero .hero-meta + p { margin: var(--s3) 0 0; }
.lists-page .sec > p { color: var(--ink-2); }
.lists-page .checklist li { display: flex; align-items: flex-start; gap: var(--s3); }
.lists-page .checklist label { flex: 1 1 auto; min-width: 0; }
.from { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; text-decoration: none; white-space: nowrap; }
@media (max-width: 479px) {
  .lists-page .checklist li { flex-wrap: wrap; gap: 0; }
  .lists-page .checklist label { flex-basis: 100%; }
  .from { margin: -10px 0 6px 34px; min-height: 32px; }
}
.receipt { max-width: 460px; margin: var(--s5) 0; padding: var(--s5); background: var(--paper-2); border: 1px dashed var(--ink-3); border-radius: var(--radius); }
.receipt-tag { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--red); margin: 0 0 var(--s2); }
.receipt ul { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.receipt li { display: flex; justify-content: space-between; gap: var(--s4); margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.receipt li b { white-space: nowrap; }
.receipt-total { display: flex; justify-content: space-between; gap: var(--s4); padding-top: var(--s2); border-top: 2px solid var(--ink); font-family: var(--head); text-transform: uppercase; font-size: 22px; }
.receipt > :last-child { margin-bottom: 0; }
@media print {
  /* long lists flow page to page (Rule 2i/2j): no outer frame, rows stay whole, tag + intro keep with the first two items */
  .lists-page .do, .lists-page .do:has(.checklist) { border: 0; padding: 0; margin: 4mm 0 2mm; background: none; break-inside: auto; page-break-inside: auto; }
  /* ponytail: intro keeps with its list. Chrome then moves a section whole to a fresh page when the lead-in won't fit (some pages end 20-45% short); without it the heading + intro strand at the page foot. */
  .lists-page .sec > p { break-after: avoid; page-break-after: avoid; margin-bottom: 2mm; }
  .lists-page .checklist li { break-inside: avoid; page-break-inside: avoid; }
  .lists-page .checklist li:first-child { break-after: avoid; page-break-after: avoid; }
  .lists-page .checklist label { padding: 3px 0; }
  .lists-page .checklist input { flex-basis: 4mm; width: 4mm; height: 4mm; margin-top: .6mm; }
  .from { min-height: 0; padding-top: 3px; font-size: 8pt; color: var(--ink-3); }
  .receipt { break-inside: avoid; page-break-inside: avoid; padding: 4mm 5mm; }
  .receipt-total { font-size: 14pt; }
}

/* ---------- Phase 12: "All checklists in one place" link (p.all-checklists, under each playbook checklist) ---------- */
.all-checklists { margin: calc(-1 * var(--s2)) 0 var(--s5); text-align: right; }
.all-checklists a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--red); text-decoration: none; }
.all-checklists a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media print { .all-checklists { display: none; } }

/* ---------- Phase 13: print pagination fixes (print only) ----------
   h3 keeps its "Step 0N" label attached to its title. */
@media print {
  .sec h3 { break-inside: avoid; page-break-inside: avoid; }
  /* a lead-in line stays with the table or worksheet it introduces */
  p:has(+ .table-wrap), h3#weekly + p, h3#worksheet + p { break-after: avoid; page-break-after: avoid; }
}

/* ---------- Phase 13: Printouts and downloads (downloads.html, body.downloads-page) ----------
   Reuses .entries; .dl swaps the arrow for a download arrow and adds a small meta line (pages, size). */
.downloads-page .sec > p { color: var(--ink-2); }
.entries.dl { margin: var(--s4) 0 0; border-top: 1px solid var(--line); }
.entries.dl a::after { content: "\2193"; }
.entries.dl a:hover::after { transform: translateY(3px); }
.entries.dl .meta { font-style: normal; font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.entries.dl b { font-size: 20px; overflow-wrap: anywhere; }
@media print { .downloads-page .entries.dl a::after { display: none; } }

/* === Skin photo guide (skin.html #spot) === */
.spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s4); margin: var(--s5) 0; padding: 0; list-style: none; }
.spot-grid > li { display: flex; }
.spot { display: flex; flex-direction: column; flex: 1; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.spot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.spot .spot-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--s4); background: var(--paper-2); color: var(--ink-3); font-size: .9rem; text-align: center; }
.spot figcaption { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.spot h4 { margin: 0; font-family: var(--head); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.spot p { margin: 0; }
.spot .spot-do { font-weight: 600; color: var(--ink); }
.spot.urgent { border-color: var(--red); }
.spot.urgent .spot-do { color: var(--red-deep); }
.spot .credit { margin-top: auto; font-size: .72rem; color: var(--ink-3); }
.spot .credit a { color: inherit; }
@media print {
  .spot-grid { grid-template-columns: repeat(2, 1fr); gap: 4mm; }
  .spot { box-shadow: none; break-inside: avoid; }
  .spot img, .spot .spot-noimg { aspect-ratio: 16 / 9; }
}

/* ---------- Phase 18: print only. Technical's match-review bullets stay whole (a one-line widow split across pages). ---------- */
@media print { h3#match-review + p + ul > li { break-inside: avoid; page-break-inside: avoid; } }

/* ---------- Phase 20: 30-minute planners (schedule.html #example, #planner) ----------
   Colour key: ten block types (.k-*). Open mat = same red family as a class, but hatched with a
   dashed outline, because it's a different kind of training.
   Example week (.week): one grid per day column with 5-minute tracks (204 = 5:30am to 10:30pm).
   Blocks tile each day top to bottom in order and span their real length via .m{minutes}, so a
   45-minute run is drawn at 45 minutes. Guide lines every 15 min, labels every 30. Every day must
   add up to 17 hours exactly (the generator asserts it). Scrolls inside .wk-scroll on phones.
   Blank planner: table.planner.blank with 30-minute rows, 5:30am to 10:30pm, one A4 page. */
.k-study { --sw: #CFDDF7; }
.k-jj { --sw: #F7C9C6; }
.k-om { --sw: repeating-linear-gradient(135deg, #F9D6D3 0 4px, #FFFFFF 4px 8px); }
.k-sc { --sw: #F9D29E; }
.k-travel { --sw: #C8ECEA; }
.k-meal { --sw: #FFF0B0; }
.k-rec { --sw: #D3EBC4; }
.k-sleep { --sw: #DCD3EE; }
.k-free { --sw: #FFFFFF; }
.key li.k-jj::before { border-color: var(--red); }
.key li.k-om::before { border: 1.5px dashed var(--red); }
.key.key-full { gap: var(--s2) var(--s4); }
.key.key-full li { font-size: 14px; }
.m15 { grid-row: span 3; } .m25 { grid-row: span 5; } .m30 { grid-row: span 6; } .m45 { grid-row: span 9; }
.m50 { grid-row: span 10; } .m60 { grid-row: span 12; } .m75 { grid-row: span 15; } .m90 { grid-row: span 18; }
.m120 { grid-row: span 24; } .m135 { grid-row: span 27; } .m240 { grid-row: span 48; }
.wk-scroll { overflow-x: auto; margin: var(--s3) 0 var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.week { --tr: 5px; display: grid; grid-template-columns: 3.6em repeat(7, minmax(0, 1fr)); min-width: 720px; padding: var(--s2) var(--s2) var(--s3) 0; font-size: 11px; line-height: 1.2; }
.wk-col { min-width: 0; }
.week .wk-head { height: 38px; margin: 0 0 4px; font-family: var(--head); font-size: 16px; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1.1; }
.wk-head small { display: block; margin-top: 2px; font-family: var(--body); font-size: 10.5px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
.week ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(204, var(--tr));
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--tr) * 6)),
              repeating-linear-gradient(to bottom, var(--paper-3) 0 1px, transparent 1px calc(var(--tr) * 3)); }
.week li { margin: 0; }
.wk-col:not(.wk-times) li { margin: 1px 2px 0; padding: 1px 4px; overflow: hidden; border: 1px solid rgba(26,26,26,.14); border-radius: 4px; background: var(--sw); }
.week li b { display: block; font-weight: 700; white-space: nowrap; }
.week li.m15, .week li.m25 { white-space: nowrap; text-overflow: ellipsis; font-size: 10px; padding-top: 0; }
.week li.m15 b, .week li.m25 b { display: none; }
.week li.k-jj { border-color: var(--red); }
.week li.k-om { border: 1.5px dashed var(--red); font-weight: 700; }
.week li.k-free { background: transparent; border-color: transparent; color: var(--ink-3); }
.week li.k-school { color: var(--ink-2); }
.wk-times { position: sticky; left: 0; z-index: 1; background: #fff; }
.wk-times ol { background: none; }
.wk-times li { grid-row: span 6; transform: translateY(-.55em); padding-right: 6px; text-align: right; font-family: var(--head); font-size: 11px; letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
.planner.blank td { height: 28px; }
@media print {
  #example { break-before: page; page-break-before: always; break-inside: auto; page-break-inside: auto; }
  #example > h2 + p { margin-bottom: 2mm; }
  .wk-times { position: static; }
  .week ol { background: none; } /* sub-mm gradient guide lines rasterise as grey bars in PDF */
  .wk-scroll { overflow: visible; border: 0; margin: 1mm 0; break-inside: avoid; page-break-inside: avoid; }
  .week { --tr: .86mm; min-width: 0; padding: 0; grid-template-columns: 9mm repeat(7, minmax(0, 1fr)); font-size: 5.4pt; line-height: 1.15; }
  .week .wk-head { height: 6.5mm; margin: 0 0 .6mm; font-size: 8pt; }
  .wk-head small { font-size: 5.4pt; }
  .wk-col:not(.wk-times) li { margin: .2mm .4mm 0; padding: 0 .6mm; border-radius: .8mm; }
  .week li.m15, .week li.m25 { font-size: 5pt; }
  .wk-times li { font-size: 5.4pt; padding-right: 1.2mm; }
  .key.key-full { margin: 1mm 0 2mm; gap: 1mm 4mm; }
  .key.key-full li { font-size: 7.5pt; }
  .key.key-full li::before { width: 3.4mm; height: 3.4mm; }
  .planner.blank td { height: 5.3mm; padding: 0 1mm; }
  .wk-scroll + p { break-before: avoid; page-break-before: avoid; }
  /* the nine-step build list may split between steps (it fills most of a page on its own) */
  h3#build + p + .do { break-inside: auto; page-break-inside: auto; border: 0; padding: 0; background: none; } /* Rule 2j: no empty framed tail at the cut */
  .planner-sec .key { margin: 1mm 0 2mm; gap: 1mm 4mm; }
  .planner-sec .key li { font-size: 7.5pt; }
  .planner-sec .key li::before { width: 3.4mm; height: 3.4mm; }
}

/* ---------- Phase 22: final pass ----------
   .receipt-pair: two .receipt sums side by side (going-pro #costs), one column on phones.
   Example week, print only: blocks under 30 minutes show their start time inline; the end time (.t-to)
   is hidden because it is the next block's start. On screen they keep the label only (columns are narrow).
   Checklists print: a list's last item keeps with the one before it, so no page holds a single stray item. */
.receipt-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--s4); align-items: start; }
@media print {
  .week li.m15 b, .week li.m25 b { display: inline; margin-right: .3em; }
  .week li.m15 .t-to, .week li.m25 .t-to { display: none; }
  .lists-page .checklist li:last-child { break-before: avoid; page-break-before: avoid; }
}