/* web.css, bundled by build-web.mjs: ../_system/pb.css, then book.css, then the web layer (web.css). */
/* Fabrico playbook system (29.09.2026). One 16:9 page = one .page (1280 x 720 CSS px).
   Visual world = the Fabrico rebrand (fabrico-rebrand/tokens.css): IBM Plex, green scale, ink greys,
   dark "instrument screen" panels, loss colours. No emoji, no clip-art, no gradients-for-decoration. */
:root {
  --green-500: #31b058; --green-400: #3cbf64; --green-300: #6bd98d; --green-200: #a5ebbe; --mint-100: #d5fde7;
  --green-600: #269048; --green-700: #1b6e37; --green-900: #0e3a1d;
  --bg: #ffffff; --band: #f3f6f4; --panel-2: #f1f4f2; --line: #e3e8e5; --line-strong: #c6d0cb; --rule: #16241d;
  --text-0: #0d1411; --text-1: #2c3833; --text-2: #4d5c55; --text-3: #5c6b64;
  --accent: var(--green-500); --accent-ink: var(--green-700); --accent-wash: #eefaf2; --on-accent: #06210f;
  --screen-bg: #0a140f; --screen-cell: #0d1813; --screen-line: #1e352a; --screen-rule: #2c4b3a;
  --screen-text: #f2f7f3; --screen-text-2: #9db0a6; --screen-text-3: #74877d; --screen-accent: #3cbf64;
  --loss-down: #c2372c; --loss-speed: #c07d12; --loss-quality: #3f7fae; --loss-plan: #9aa8a1; --bar-base: #dde5e1;
  --a: #1f9d4d; --p: #16807d; --q: #6f8f18;
  --f-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;
  --pad-x: 64px; --pad-top: 52px; --pad-bottom: 74px;
}

@page { size: 1280px 720px; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #d9dfdc; }
body { font-family: var(--f-sans); color: var(--text-1); -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 18px; line-height: 1.5; }
@media screen { .page { margin: 24px auto; box-shadow: 0 2px 12px rgba(0,0,0,.12); } }
@media print { html, body { background: #fff; } .page { margin: 0; } }

.page { position: relative; width: 1280px; height: 720px; overflow: hidden; background: var(--bg); break-after: page; page-break-after: always; padding: var(--pad-top) var(--pad-x) var(--pad-bottom); display: flex; flex-direction: column; }
.page:last-child { break-after: auto; page-break-after: auto; }

/* chrome: top label row + footer */
.top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 26px; }
.top .sec b { color: var(--accent-ink); font-weight: 600; }
.foot { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--text-3); border-top: 1px solid var(--line); padding-top: 9px; }
.foot a { color: var(--accent-ink); text-decoration: none; }
.foot .logo { height: 15px; }

/* type */
h1, h2, h3 { font-family: var(--f-cond); color: var(--text-0); font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 64px; line-height: 1.02; }
h2 { font-size: 46px; line-height: 1.05; max-width: 900px; }
h3 { font-size: 23px; line-height: 1.2; }
.lede { font-size: 21px; line-height: 1.45; color: var(--text-2); max-width: 820px; margin-top: 14px; }
.small { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.mono { font-family: var(--f-mono); }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.label.g { color: var(--accent-ink); }
.hl { color: var(--accent-ink); }
.note { font-family: var(--f-mono); font-size: 12px; color: var(--text-3); letter-spacing: .02em; }
.body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.grow { flex: 1; min-height: 0; }

/* layout helpers */
.row { display: flex; gap: 24px; }
.col { display: flex; flex-direction: column; gap: 14px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.mt1 { margin-top: 10px; } .mt2 { margin-top: 20px; } .mt3 { margin-top: 30px; } .mt4 { margin-top: 44px; }

/* cards and panels */
.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.card.band { background: var(--band); border-color: transparent; }
.card.wash { background: var(--accent-wash); border-color: #d6efdf; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.card .k { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; display: block; }
.rule-top { border-top: 3px solid var(--rule); padding-top: 14px; }
.rule-g { border-top: 3px solid var(--accent); padding-top: 14px; }

/* big numbers */
.kpi { font-family: var(--f-cond); font-weight: 600; font-size: 60px; line-height: 1; color: var(--text-0); }
.kpi.g { color: var(--accent-ink); }
.kpi small { font-size: 26px; font-weight: 500; color: var(--text-3); margin-left: 4px; }

/* checklist */
.check { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.check li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 17px; line-height: 1.4; color: var(--text-1); }
.check li::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--text-1); border-radius: 3px; margin-top: 3px; }
.check.done li::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2306210f' stroke-width='2.2'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--accent); }
.check li b { color: var(--text-0); font-weight: 600; }

/* numbered steps (only for real sequences) */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 2px solid var(--rule); }
.step .n { font-family: var(--f-mono); font-size: 14px; color: var(--accent-ink); font-weight: 600; padding-top: 3px; }
.step h3 { font-size: 21px; margin-bottom: 2px; }
.step p { font-size: 16px; color: var(--text-2); line-height: 1.4; }

/* worksheet table (fill-in) */
table.ws { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.ws th { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); font-weight: 500; text-align: left; padding: 0 12px 8px; border-bottom: 2px solid var(--rule); }
table.ws td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-1); }
table.ws td.fill { border-bottom: 1px solid var(--line-strong); background: repeating-linear-gradient(90deg, transparent 0 6px, transparent 6px 12px); min-width: 120px; }
table.ws td.num { font-family: var(--f-mono); text-align: right; color: var(--text-0); }
table.ws.compact td { padding: 7px 12px; }
table.ws tr.total td { border-top: 2px solid var(--rule); border-bottom: none; font-weight: 600; color: var(--text-0); }
table.ws td b { color: var(--text-0); }

/* formula blocks */
.formula { font-family: var(--f-mono); font-size: 19px; color: var(--text-0); background: var(--band); border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 0 6px 6px 0; }
.formula .op { color: var(--text-3); padding: 0 6px; }
.example-tag { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #fff4e0; color: #7a4d06; border: 1px solid #f0d49a; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }

/* tags */
.tag { display: inline-block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; background: var(--band); color: var(--text-2); }
.tag.down { background: #f9e3e1; color: #8e241c; } .tag.speed { background: #fbeed8; color: #7d500a; } .tag.qual { background: #e1ecf5; color: #2b5b80; } .tag.plan { background: #eaeeec; color: #4d5c55; }

/* dark instrument pages */
.page.dark { background: var(--screen-bg); color: var(--screen-text); }
.page.dark::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--screen-line) 1px, transparent 1px), linear-gradient(90deg, var(--screen-line) 1px, transparent 1px); background-size: 40px 40px; opacity: .45; pointer-events: none; }
.page.dark > * { position: relative; }
.page.dark h1, .page.dark h2, .page.dark h3 { color: var(--screen-text); }
.page.dark .lede, .page.dark .small, .page.dark p { color: var(--screen-text-2); }
.page.dark .top, .page.dark .label, .page.dark .note { color: var(--screen-text-3); }
.page.dark .top .sec b, .page.dark .label.g, .page.dark .hl { color: var(--screen-accent); }
.page.dark .foot { border-top-color: var(--screen-line); color: var(--screen-text-3); }
.page.dark .foot a { color: var(--screen-accent); }
.page.dark .card { background: var(--screen-cell); border-color: var(--screen-line); }
.page.dark .card p { color: var(--screen-text-2); }
.page.dark .kpi { color: var(--screen-text); }
.page.dark .kpi.g { color: var(--screen-accent); }

/* cover */
.page > img, .cover .brand { align-self: flex-start; width: auto; }
.cover .brand { height: 34px; }
.cover .kind { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--screen-accent); }
.cover h1 { font-size: 72px; max-width: 700px; margin-top: 16px; }
.cover .lede { font-size: 22px; max-width: 600px; }
.cover .who { font-family: var(--f-mono); font-size: 13px; color: var(--screen-text-3); letter-spacing: .04em; }
.cover .visual { position: absolute; right: 56px; top: 110px; width: 470px; height: 470px; }

/* CTA */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-sans); font-weight: 600; font-size: 19px; text-decoration: none; padding: 15px 26px; border-radius: 10px; }
.btn.primary { background: var(--green-400); color: var(--on-accent); }
.btn.secondary { border: 1.5px solid var(--screen-rule); color: var(--screen-text); }
.page:not(.dark) .btn.secondary { border-color: var(--line-strong); color: var(--text-0); }
.btn svg { width: 16px; height: 16px; }
.qr { width: 132px; height: 132px; background: #fff; padding: 8px; border-radius: 6px; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.qr-cap { font-family: var(--f-mono); font-size: 11.5px; color: var(--screen-text-3); margin-top: 8px; letter-spacing: .04em; }
.cta-strip { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--screen-bg); color: var(--screen-text); border-radius: 8px; padding: 16px 22px; }
.cta-strip p { color: var(--screen-text-2); font-size: 16px; }
.cta-strip .btn { font-size: 16px; padding: 11px 18px; }

/* bars and charts */
.bar { height: 14px; background: var(--bar-base); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
svg text { font-family: var(--f-mono); }

/* photo panel */
.photo { border-radius: 6px; overflow: hidden; background: var(--band); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Why Lines Stop, Fabrico field guide (15.10.2026; built on the Fabrico field guide book system).
   playbook system (../_system/pb.css: IBM Plex, green scale, ink greys, loss colours).
   One page = one .page, 816 x 1056 CSS px (US Letter at 96 dpi). */
:root {
  --pad-x: 60px; --pad-top: 54px; --pad-bottom: 70px;
  --book-w: 816px; --book-h: 1056px;
}
@page { size: 816px 1056px; margin: 0; }
body { font-size: 16.5px; line-height: 1.5; }
.page { width: var(--book-w); height: var(--book-h); padding: var(--pad-top) var(--pad-x) var(--pad-bottom); }
.foot { bottom: 26px; font-size: 11px; }
.top { margin-bottom: 18px; font-size: 11px; }

/* type scale for a narrower page */
h1 { font-size: 58px; line-height: 1.0; }
h2 { font-size: 34px; line-height: 1.08; max-width: 100%; letter-spacing: -.01em; }
h3 { font-size: 20px; line-height: 1.22; }
.lede { font-size: 18.5px; line-height: 1.42; max-width: 100%; margin-top: 12px; }
p.body-text { font-size: 16.5px; line-height: 1.5; color: var(--text-1); }
p.body-text + p.body-text { margin-top: 10px; }
.small { font-size: 14.5px; }
.card p { font-size: 15px; }
.card h3 { font-size: 18px; }
.cover h1 { font-size: 72px; max-width: 100%; margin-top: 14px; }
.cover .lede { font-size: 20px; max-width: 100%; }
.kpi { font-size: 52px; }

/* story block: the opening scene of a chapter */
.story { border-left: 4px solid var(--accent); padding: 4px 0 4px 20px; margin: 18px 0 6px; }
.story p { font-size: 17px; line-height: 1.5; color: var(--text-1); font-style: italic; }
.story .punch { font-style: normal; font-weight: 600; color: var(--text-0); margin-top: 10px; font-size: 17px; }

/* figure frames (screenshots) */
.fig { margin: 18px 0 0; }
.fig .frame { background: #e9eeeb; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px; }
.fig .frame.dark { background: #0b100e; border-color: #1e352a; }
.fig img { display: block; width: 100%; height: auto; border-radius: 4px; }
.fig .cap { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .03em; color: var(--text-3); }
.fig .cap b { color: var(--accent-ink); font-weight: 600; }
.fig.tall img { max-height: 560px; object-fit: cover; object-position: top; }
.fig.crop img { max-height: 420px; object-fit: cover; object-position: top; }
.fig.crop-300 img { max-height: 300px; object-fit: cover; object-position: top; }
.fig.crop-360 img { max-height: 360px; object-fit: cover; object-position: top; }
.fig.crop-340 img { max-height: 340px; object-fit: cover; object-position: top; }
.fig.crop-240 img { max-height: 240px; object-fit: cover; object-position: top; }
.fig.pad-s .frame { padding: 5px; }

/* "In Fabrico" box: the same play shown inside the product */
.infab { margin-top: 18px; border: 1.5px solid #cfe9d8; background: var(--accent-wash); border-radius: 8px; padding: 16px 18px 14px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; }
.infab.stack { grid-template-columns: 1fr; }
.infab .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.infab .k img { height: 14px; }
.infab h3 { font-size: 18px; margin-bottom: 6px; }
.infab p { font-size: 14.5px; line-height: 1.42; color: var(--text-1); }
.infab ul.check { gap: 6px; margin-top: 6px; }
.infab ul.check li { font-size: 14.5px; line-height: 1.35; }
.infab ul.check li::before { width: 15px; height: 15px; margin-top: 3px; }
.infab .cap .infab-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.infab .fig { margin: 0; }
.infab .fig .frame { padding: 5px; }
.infab .fig .cap { margin-top: 5px; font-size: 10.5px; }
.infab .fig img { max-height: 380px; object-fit: cover; object-position: top; }
.infab .fig.contain img { object-fit: contain; object-position: left top; max-height: 340px; }
.infab.stack .fig img { max-height: 236px; }
.infab.stack .fig.short img { max-height: 150px; object-fit: contain; object-position: left; }

/* play header: ID, severity and maturity tags */
.playhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.playhead .tag { font-size: 11px; }
.tag.crit { background: #f9e3e1; color: #8e241c; }
.tag.warn { background: #fbeed8; color: #7d500a; }
.tag.info { background: #e1ecf5; color: #2b5b80; }
.tag.lvl { background: var(--rule); color: #fff; }
.trigger { display: flex; gap: 12px; align-items: baseline; background: var(--band); border-radius: 6px; padding: 10px 14px; margin-top: 10px; }
.trigger .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--loss-down); white-space: nowrap; }
.trigger p { font-size: 15.5px; color: var(--text-0); font-weight: 500; }

/* benchmark gauge: action threshold, target, world class on one bar */
.gauge { margin-top: 14px; }
.gauge .lbl { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.gauge .bar { position: relative; height: 26px; border-radius: 4px; background: linear-gradient(90deg, #f3d6d2 0 33.3%, #fbeed8 33.3% 66.6%, #d5fde7 66.6%); border: 1px solid var(--line); }
.gauge .bar span { position: absolute; top: 0; height: 100%; display: flex; align-items: center; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; color: var(--text-0); padding: 0 10px; }
.gauge .bar span:nth-child(1) { left: 0; width: 33.3%; }
.gauge .bar span:nth-child(2) { left: 33.3%; width: 33.3%; }
.gauge .bar span:nth-child(3) { left: 66.6%; width: 33.4%; }
.gauge .src { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* roadmap table (90 days) */
table.road { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 10px; }
table.road td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-1); line-height: 1.38; }
table.road td.w { font-family: var(--f-mono); font-size: 12px; color: var(--accent-ink); white-space: nowrap; width: 92px; font-weight: 600; padding-top: 10px; }
table.road tr:first-child td { border-top: 2px solid var(--rule); }
table.road td b { color: var(--text-0); }

/* two-column text with a side panel */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cols.w { grid-template-columns: 1.3fr 1fr; }
.side { background: var(--band); border-radius: 8px; padding: 16px 18px; }
.side .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 8px; display: block; }
.side p { font-size: 14.5px; line-height: 1.4; color: var(--text-1); }
.side ul.check li { font-size: 14.5px; }
.side.red .k { color: var(--loss-down); }

/* good / failure split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.split .col-good, .split .col-bad { border-top: 3px solid var(--accent); padding-top: 10px; }
.split .col-bad { border-top-color: var(--loss-down); }
.split .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; display: block; color: var(--accent-ink); }
.split .col-bad .k { color: var(--loss-down); }
.split ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.split li { font-size: 14.5px; line-height: 1.38; color: var(--text-1); padding-left: 16px; position: relative; }
.split li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.split .col-bad li::before { background: var(--loss-down); }
.split li b { color: var(--text-0); }

/* cadence strip */
.cadence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.cadence .c { background: var(--band); border-radius: 6px; padding: 12px 14px; }
.cadence .c .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: 4px; }
.cadence .c p { font-size: 14px; line-height: 1.38; color: var(--text-1); }

/* reading list */
.reading { margin-top: 12px; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.reading .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 4px; }

/* check-in table */
table.checkin { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 14px; }
table.checkin th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; text-align: left; padding: 0 10px 8px 0; border-bottom: 2px solid var(--rule); }
table.checkin th.r { text-align: center; }
table.checkin td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--text-1); line-height: 1.38; }
table.checkin td.r { text-align: center; }
table.checkin td.r .box { display: inline-block; width: 42px; height: 30px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: #fff; }
table.checkin tr.total td { border-top: 2px solid var(--rule); border-bottom: none; font-weight: 600; color: var(--text-0); padding-top: 12px; }

/* score bands */
.bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.band { border-radius: 8px; padding: 14px 16px; background: var(--band); border-top: 4px solid var(--text-3); }
.band.r { border-top-color: var(--loss-down); } .band.y { border-top-color: var(--loss-speed); } .band.g { border-top-color: var(--accent); }
.band .n { font-family: var(--f-cond); font-weight: 600; font-size: 28px; color: var(--text-0); line-height: 1; }
.band h3 { font-size: 17px; margin: 6px 0 6px; }
.band p { font-size: 14px; line-height: 1.4; color: var(--text-1); }

/* maturity ladder */
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; margin-top: 18px; }
.ladder .rung { background: var(--band); border-radius: 6px 6px 0 0; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 4px solid var(--rule); }
.ladder .rung .n { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--accent-ink); }
.ladder .rung h3 { font-size: 16px; margin: 4px 0 6px; }
.ladder .rung p { font-size: 12.5px; line-height: 1.35; color: var(--text-2); }
.ladder .rung.on { background: var(--accent-wash); border-bottom-color: var(--accent); }

/* part divider page */
.page.part { justify-content: center; }
.part .n { font-family: var(--f-mono); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--screen-accent); }
.part h1 { font-size: 64px; margin-top: 16px; max-width: 640px; }
.part .lede { font-size: 20px; margin-top: 18px; max-width: 600px; }
.part .toc { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.part .toc div { display: flex; gap: 14px; align-items: baseline; font-size: 16px; color: var(--screen-text-2); }
.part .toc div b { font-family: var(--f-mono); font-size: 12.5px; color: var(--screen-accent); font-weight: 600; min-width: 34px; }

/* contents page */
.contents { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin-top: 6px; align-items: start; }
.contents > div.colc { display: flex; flex-direction: column; }
.contents .sec { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 14px 0 4px; }
.contents .row-c { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--text-1); padding: 3px 0; line-height: 1.35; }
.contents .row-c .dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.contents .row-c .pg { font-family: var(--f-mono); font-size: 13px; color: var(--text-3); min-width: 28px; text-align: right; }

/* CTA page tweaks for portrait */
.cta-strip { padding: 14px 18px; gap: 16px; }
.cta-strip p { font-size: 14.5px; }
.cta-strip .btn { font-size: 15px; padding: 10px 16px; white-space: nowrap; }
.btn { font-size: 17px; padding: 13px 22px; }
.qr { width: 150px; height: 150px; }

/* value stack */
.stack { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.stack .it { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.stack .it:first-child { border-top: 2px solid var(--rule); }
.stack .it .n { font-family: var(--f-mono); font-size: 12px; color: var(--accent-ink); font-weight: 600; padding-top: 3px; }
.stack .it h3 { font-size: 17px; margin-bottom: 2px; }
.stack .it p { font-size: 14.5px; color: var(--text-2); line-height: 1.38; }

/* author */
.author { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; margin-top: 16px; }
.author img.face { width: 220px; height: 220px; object-fit: cover; border-radius: 8px; }
.author p { font-size: 15.5px; line-height: 1.5; color: var(--text-1); }
.author p + p { margin-top: 10px; }
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.links .card { padding: 12px 14px; }
.links .card .k { margin-bottom: 4px; }
.links .card p { font-size: 13.5px; }

/* mono key-value row */
.kv { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--text-3); letter-spacing: .03em; }
.kv b { color: var(--text-0); font-weight: 600; }

/* big pull quote */
.pull { font-family: var(--f-cond); font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--text-0); border-top: 3px solid var(--rule); padding-top: 14px; margin-top: 20px; }
.page.dark .pull { color: var(--screen-text); border-top-color: var(--screen-rule); }

/* two-image row */
.figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.figrow .fig { margin: 0; }

/* overflow guard helper for QA: pages that overflow show a red edge in screen mode */
@media screen { .page.overflow { outline: 3px solid #c2372c; } }

/* compact variants used where a page carries two lists */
.steps.compact .step { padding: 9px 0; grid-template-columns: 110px 1fr; gap: 12px; }
.steps.compact .step h3 { font-size: 17px; }
.steps.compact .step p { font-size: 14px; }
.steps.compact .step .n { font-size: 12.5px; }
.tight table.ws td { padding: 4px 8px; font-size: 13.5px; }
.tight .card { padding: 11px 14px; }
.tight .card .k { margin-bottom: 4px; }
table.road.tight td { padding: 6px 8px 6px 0; font-size: 14px; }
.fig.crop-200 img { max-height: 200px; object-fit: cover; object-position: top; }
.fig.crop-220 img { max-height: 220px; object-fit: cover; object-position: top; }

.formulas .formula { padding: 10px 14px; font-size: 14.5px !important; }
.formulas .formula .label { font-size: 11px; }

.infab.img190 .fig img { max-height: 190px; }

.infab.img300 .fig img { max-height: 300px; }
.page > svg, .page figure, .page .infab, .page table, .page .gauge { flex-shrink: 0; }
.moves .check { gap: 6px; margin-top: 6px; }
.moves .check li { font-size: 14.5px; line-height: 1.3; }
.moves .check li::before { width: 15px; height: 15px; margin-top: 2px; }
.moves .reading { margin-top: 0; font-size: 13px; }
.fig.crop-140 img { max-height: 140px; object-fit: cover; object-position: top; }
.fig.crop-120 img { max-height: 120px; object-fit: cover; object-position: top; }
.fig.crop-110 img { max-height: 110px; object-fit: cover; object-position: top; }
table.ws.bench td { padding: 12px 12px; }
table.ws.bench th { padding-bottom: 10px; }
.story p { font-size: 16.5px; }
table.road.tight td { padding: 5px 8px 5px 0; font-size: 13.5px; }
.playwhy { font-size: 15px !important; }
.trigger { padding: 8px 14px; margin-top: 8px; }
.infab { padding: 14px 18px 12px; }
.fig .cap { margin-top: 6px; }

.contents .row-c { padding: 5px 0; }
.moves { grid-template-columns: 1.35fr 1fr !important; }
.tight table.ws td.num { white-space: nowrap; }
table.ws.bench th:nth-child(3), table.ws.bench th:nth-child(4), table.ws.bench th:nth-child(5) { text-align: right; }
.fig.crop-180 img { max-height: 180px; object-fit: cover; object-position: top; }
.fig.contain-320 img { max-height: 320px; object-fit: contain; object-position: left top; }
.links .card h3 { font-size: 14px !important; white-space: nowrap; }
.steps.wide .step { grid-template-columns: 118px 1fr; }
.page.dark .qr { width: 180px; height: 180px; }
.formulas8 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.formulas8 .formula { padding: 8px 12px; font-size: 13.5px; }
.formulas8 .formula .label { font-size: 10.5px; }

.infab.img260 .fig img { max-height: 260px; }
.fig.contain-260 img { max-height: 260px; object-fit: contain; object-position: left top; }
.fig.crop-150 img { max-height: 150px; object-fit: cover; object-position: top; }
.steps.compact .step { padding: 7px 0; }
.tight .card p.small { margin-bottom: 4px !important; font-size: 13.5px; }
.formulas8 .formula { padding: 6px 10px; font-size: 13px; }
.infab.img160 .fig img { max-height: 160px; }
.infab.img240 .fig img { max-height: 240px; }
.refs-cols { font-size: 13px !important; line-height: 1.42 !important; }
.fig.crop-130 img { max-height: 130px; object-fit: cover; object-position: top; }
.cadence .c { padding: 11px 14px; }

/* page 26: definitions as stacked fractions */
.fxgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.fx { background: var(--band); border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0; padding: 9px 16px 11px; display: flex; flex-direction: column; justify-content: space-between; }
.fx-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.fx-h .label { font-size: 11px; }
.fx-u { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fx-row { display: flex; align-items: center; gap: 10px; }
.fx-eq, .fx-x { font-family: var(--f-mono); font-size: 16px; color: var(--text-3); white-space: nowrap; }
.frac { flex: 1; display: flex; flex-direction: column; align-items: stretch; text-align: center; font-family: var(--f-cond); font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--text-0); }
.frac .num { padding: 0 6px 5px; border-bottom: 2px solid var(--text-0); }
.frac .den { padding: 5px 6px 0; }
.fx-note { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }

.fishhead { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.fishhead .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* page 54: generated device render with real Fabrico screens composited in */
.devhero { margin-top: 12px; }
.devstage { display: flex; justify-content: center; align-items: center; height: 276px; border-radius: 10px; background: #050e08; overflow: hidden; }
.devstage img { display: block; height: 100%; width: auto; border-radius: 0; }
.checks2 ul.check { display: block; column-count: 2; column-gap: 30px; }
.checks2 ul.check li { break-inside: avoid; margin-bottom: 7px; font-size: 14.5px; line-height: 1.36; }

/* page 19: original repair-history screen beside a short reading guide */
.histrow { display: grid; grid-template-columns: 176px 1fr; gap: 24px; align-items: start; margin-top: 18px; }
.histrow .fig { margin: 0; }
.histrow .hist-fig img { max-height: 246px; object-fit: contain; object-position: top center; background: #fff; }
.histrow .hist-fig .cap { flex-direction: column; gap: 2px; font-size: 10.5px; }
.histnote .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.histnote .stack { margin-top: 6px; }
.histnote .stack .it h3 { font-size: 16px; }
.histnote .stack .it p { font-size: 14px; line-height: 1.4; }

/* ---- Why Lines Stop additions (15.10.2026) ---- */
.chap { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 12px; }
table.t th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 0 10px 6px 0; border-bottom: 2px solid var(--rule); }
table.t td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-1); line-height: 1.35; }
table.t td.n, table.t th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.sum td { border-top: 2px solid var(--rule); border-bottom: none; font-weight: 600; color: var(--text-0); }
table.t td b { color: var(--text-0); }
table.t.tight td { padding: 5px 8px 5px 0; }
.srcl { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); margin-top: 8px; line-height: 1.4; }
.ws { margin-top: 16px; border: 1.5px dashed #b9c6bf; border-radius: 8px; padding: 14px 16px; background: #fff; }
.ws .wsk { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.ws h3 { font-size: 18px; margin: 4px 0 6px; }
.ws table.t td { height: 26px; }
.bul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.bul li { font-size: 16px; line-height: 1.45; color: var(--text-1); padding-left: 18px; position: relative; }
.bul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.bul li b { color: var(--text-0); }
.num { display: grid; grid-template-columns: 34px 1fr; gap: 6px 10px; margin-top: 12px; }
.num .i { font-family: var(--f-mono); font-size: 13px; color: var(--accent-ink); padding-top: 2px; }
.num p { font-size: 16px; line-height: 1.45; color: var(--text-1); }
.num p b { color: var(--text-0); }
.big { font-family: var(--f-cond); font-weight: 600; font-size: 46px; line-height: 1; color: var(--text-0); }
.machines { margin-top: auto; }
.mgap { flex: 0 0 14px; }
.page h2 + p.body-text, .page h2 + .bul, .page h2 + table.t, .page .lede + p.body-text { margin-top: 12px; }
.infab-link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.machines .fig img { max-height: 250px; object-fit: cover; object-position: top; }
.machines p { font-size: 14.5px; }
.machines.mini .fig img { max-height: 215px; }
.machines.donut .fig img { object-position: center; max-height: 195px; }
.page h3 + p.body-text, .page h3 + .bul, .page h3 + table.t { margin-top: 6px; }
.page table.t + p.body-text, .page table.t + .bul { margin-top: 12px; }
.page .fig + p.body-text, .page .fig + .card, .page .fig + .bul { margin-top: 14px; }
/* larger reading size for the 8th-grade voice (15.10) */
p.body-text { font-size: 17.5px; line-height: 1.55; }
.bul li, .num p { font-size: 17px; line-height: 1.5; }
table.t { font-size: 15px; }
table.t td { padding-top: 8px; padding-bottom: 8px; }
.lede { font-size: 19.5px; }
/* per-page fit (fit.js sets --k on each .page) */
.page { --k: 1; }
p.body-text { font-size: calc(17px * var(--k)); line-height: 1.55; }
.bul li, .num p { font-size: calc(16.5px * var(--k)); }
table.t { font-size: calc(14.5px * var(--k)); }
table.t td { padding-top: calc(7px * var(--k)); padding-bottom: calc(7px * var(--k)); }
.lede { font-size: calc(18.5px * var(--k)); }
.page h3 { font-size: calc(20px * var(--k)); }
.side p, .card p, .split li, .infab p { font-size: calc(14.5px * var(--k)); }
.mt2 { margin-top: calc(20px * var(--k)); }
.contents .row-c { padding: 3px 0; }
.page .num + p.body-text, .page .bul + p.body-text, .page .num + .card, .page .bul + .card { margin-top: 14px; }
.ws table.t td { height: calc(30px * var(--k) * var(--k)); }
.page .srcl + p.body-text, .page .srcl + .bul, .page .srcl + .num, .page .srcl + table.t { margin-top: 12px; }
table.t td.n + td.n, table.t th.n + th.n { padding-left: 18px; }

/* Web edition layer for "Why Lines Stop" (15.10.2026, from the field guide web layer of 07.10.2026).
   build-web.mjs bundles ../_system/pb.css, then book.css, then this file into web-out/read/web.css.
   This layer removes the paper geometry (816 x 1056 pages, absolute positions, crops sized for a page budget)
   and turns the 51 pages into one phone-first scroll with a 760 px reading column.
   Rules here win by coming last; !important only where the book itself uses inline styles or !important. */

:root { --col: 760px; --gut: 16px; --bar-h: 56px; --fade: #ffffff; --shade: rgba(13, 20, 17, .2); }

html { background: #ffffff; scroll-padding-top: calc(var(--bar-h) + 10px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #ffffff; color: var(--text-1); font-size: 17px; line-height: 1.55; }
html.drawer-open { overflow: hidden; }

/* ---------- sections: full-width bands, content in the reading column ---------- */
.page {
  width: auto; height: auto; overflow: visible; margin: 0; box-shadow: none;
  padding: 44px max(var(--gut), calc((100% - var(--col)) / 2)) 52px;
  break-after: auto; page-break-after: auto;
}
.page:not(.dark) + .page:not(.dark) { border-top: 1px solid var(--line); }
.page.dark { padding-top: 60px; padding-bottom: 64px; --fade: var(--screen-bg); --shade: rgba(242, 247, 243, .22); }
.page.web-gloss { padding-bottom: 96px; }
main > section:focus { outline: none; }
/* paper used margin-top:auto to push blocks to the foot of a fixed page; on the web that is a plain gap */
.page > div[style*="margin-top:auto"] { margin-top: 36px !important; }
.cta-strip { margin-top: 28px; }

/* running head: two labels that wrap instead of squeezing */
.top { flex-wrap: wrap; gap: 2px 16px; font-size: 12px; margin-bottom: 14px; }

/* ---------- type ---------- */
h1 { font-size: clamp(44px, 12.4vw, 64px); }
.cover h1 { font-size: clamp(48px, 13.5vw, 72px); }
h2 { font-size: clamp(27px, 7vw, 34px); line-height: 1.12; }
h3 { font-size: 20px; line-height: 1.25; }
.lede { font-size: 18.5px; line-height: 1.45; }
p.body-text, .story p, .story .punch { font-size: 17px; line-height: 1.55; }
.page p.playwhy { font-size: 17px !important; }
.pull { font-size: clamp(24px, 6.4vw, 30px); }

/* running text never under 16 px */
.small, .card p, .infab p, .infab ul.check li, .split li, .cadence .c p, .reading, .moves .reading,
.side p, .side ul.check li, .band p, .stack .it p, .histnote .stack .it p, .ladder .rung p,
.step p, .steps.compact .step p, table.road td, table.road.tight td, table.ws, table.ws td, .tight table.ws td,
table.checkin, table.checkin td, .contents .row-c, .cta-strip p, .trigger p, .fx-note, .moves .check li,
.check li, .note, .tight .card p.small, .frac { font-size: 16px; }
.page .checks2 ul.check li { font-size: 16px; }
.cover .who { font-size: 14px; }
.page .refs-cols { font-size: 16px !important; line-height: 1.55 !important; }
.page .formula, .page .formulas .formula, .page .formulas8 .formula { font-size: 16px !important; line-height: 1.45; }
.note { letter-spacing: 0; line-height: 1.5; }
.split li::before { top: 10px; }
.steps.compact .step h3, .stack .it h3, .histnote .stack .it h3 { font-size: 18px; }
.step .n, .steps.compact .step .n { font-size: 13px; }

/* labels and captions: small mono, but readable on a phone */
.label, .card .k, .side .k, .split .k, .cadence .c .k, .reading .k, .infab .k, .trigger .k, .histnote .k, .fishhead .k, .fx-h .label { font-size: 12.5px; }
table.ws th, table.checkin th { font-size: 12.5px; }
.contents .sec { font-size: 12.5px; }
.contents .row-c .pg { font-size: 14px; }
.kv { font-size: 14px; }
.tag, .playhead .tag, .example-tag, .fx-u, .ladder .rung .n { font-size: 12px; }
.fig .cap, .infab .fig .cap, .histrow .hist-fig .cap { font-size: 13.5px; line-height: 1.45; flex-wrap: wrap; gap: 4px 14px; }
.gauge .src { font-size: 13.5px; line-height: 1.45; }
.gauge .lbl { font-size: 12px; flex-wrap: wrap; gap: 2px 12px; }
.gauge .bar { height: 30px; }
.gauge .bar span { font-size: 14px; padding: 0 8px; }

/* ---------- images: never upscaled, never cropped, never wider than the column ---------- */
.page img { max-width: 100%; min-width: 0; } /* a flex item image must not take its huge intrinsic width as its minimum */
.page .fig .frame { width: fit-content; max-width: 100%; }
.page .fig img { width: auto; height: auto; max-width: 100%; max-height: none !important; object-fit: fill !important; }
.page .infab .fig img { max-height: 520px !important; }
.page .devstage { height: auto; display: block; }
.page .devstage img { width: 100%; height: auto; }
.infab .cap .infab-link { display: inline-block; padding: 11px 0; margin: -11px 0; }

/* ---------- charts and tables: scale to the column, or scroll sideways inside their own box ---------- */
.chart { position: relative; flex-shrink: 0; }
.chart > svg { display: block; }
.chart-scroll, .table-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-scroll { max-width: 100%; flex-shrink: 0; }
.chart-scroll.is-scroll, .table-scroll.is-scroll {
  background:
    linear-gradient(to right, var(--fade) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--fade) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right center / 12px 100% no-repeat scroll;
}
table.ws td.fill { min-width: 96px; }

/* ---------- links made for the web ---------- */
a.pref { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page.dark a.pref { color: var(--screen-accent); }
a.row-c { color: inherit; text-decoration: none; min-height: 40px; align-items: center; }
a.row-c:hover > span:first-child { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.contents .row-c .dots { transform: none; align-self: center; }
.btn { min-height: 48px; }
.cta-strip .btn { min-height: 44px; }

/* acronyms: dotted underline, tap for the meaning */
abbr.ac { text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-skip-ink: none; cursor: pointer; border-radius: 3px; }
abbr.ac:hover, abbr.ac.on { background: var(--accent-wash); }
.page.dark abbr.ac:hover, .page.dark abbr.ac.on, .cta-strip abbr.ac:hover, .cta-strip abbr.ac.on { background: rgba(60, 191, 100, .2); }

a:focus-visible, button:focus-visible, abbr.ac:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; border-radius: 3px; }

/* ---------- part dividers, cover and the last page ---------- */
.page.part { justify-content: flex-start; }
.page.part > img.brand { position: static !important; height: 24px !important; margin-bottom: 36px; }
.part .part-title { font-size: clamp(38px, 10vw, 60px); line-height: 1.02; margin-top: 14px; max-width: 640px; }
.part .lede { font-size: 19px; }
.part .toc { gap: 2px; margin-top: 28px; }
.part .toc a { display: flex; gap: 14px; align-items: center; min-height: 40px; font-size: 17px; line-height: 1.3; color: var(--screen-text-2); text-decoration: none; }
.part .toc a b { font-family: var(--f-mono); font-size: 13px; color: var(--screen-accent); font-weight: 600; min-width: 44px; }
.part .toc a:hover span { color: var(--screen-text); text-decoration: underline; text-underline-offset: 3px; }
.cover .brand { height: 30px; }
.page h2[style*="font-size:52px"] { font-size: clamp(32px, 8.6vw, 52px) !important; }

/* ---------- top bar and reading progress ---------- */
.wtop { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid var(--line); }
.wtop-in { box-sizing: content-box; max-width: var(--col); margin: 0 auto; padding: 0 var(--gut); height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wtop-logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.wtop-logo img { display: block; height: 22px; width: auto; }
.wtop-r { display: flex; align-items: center; gap: 6px; }
.wtop-btn { font: 600 15px/1 var(--f-sans); color: var(--text-0); background: #ffffff; border: 1.5px solid var(--line-strong); border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.wtop-btn:hover { border-color: var(--text-2); }
.wtop-demo { font: 600 15px/1 var(--f-sans); color: var(--accent-ink); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 4px; white-space: nowrap; }
.wtop-demo:hover { text-decoration: underline; text-underline-offset: 3px; }
.wprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.wprog i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- contents drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden], .ac-pop[hidden] { display: none !important; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(10, 20, 15, .5); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #ffffff; overflow-y: auto; overscroll-behavior: contain; box-shadow: -8px 0 32px rgba(0, 0, 0, .18); }
.drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--bar-h); padding: 0 12px 0 20px; background: #ffffff; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 22px; }
.drawer-close { font: 600 15px/1 var(--f-sans); min-height: 40px; min-width: 64px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: #ffffff; color: var(--text-0); cursor: pointer; }
.toc-list, .toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list { padding: 6px 0 40px; }
.toc-list > li { padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.toc-part { display: flex; align-items: center; min-height: 44px; padding: 0 20px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.toc-list ol a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 4px 20px; font-size: 16px; line-height: 1.3; color: var(--text-1); text-decoration: none; }
.toc-list a:hover { background: var(--band); }
.toc-list a[aria-current] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); color: var(--text-0); }
.toc-pg { font-family: var(--f-mono); font-size: 13px; color: var(--text-3); }

/* ---------- acronym popover ---------- */
.ac-pop { position: absolute; z-index: 60; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 10px 14px 11px; border-radius: 8px; background: var(--screen-bg); color: var(--screen-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); font-family: var(--f-sans); font-size: 16px; line-height: 1.4; }
.ac-pop b { display: block; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; color: var(--screen-accent); margin-bottom: 2px; }
.ac-pop small { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--screen-text-2); }
.ac-pop::before { content: ""; position: absolute; left: var(--ax, 50%); top: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--screen-bg); transform: rotate(45deg); }
.ac-pop.above::before { top: auto; bottom: -6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- full-size screenshot viewer ---------- */
a.zoom { display: block; cursor: zoom-in; border-radius: 4px; }
.zoomer[hidden] { display: none !important; }
.zoomer { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: rgba(5, 10, 8, .94); }
.zoomer-head { display: flex; justify-content: flex-end; padding: 8px 12px; flex: none; }
.zoomer-close { font: 600 15px/1 var(--f-sans); min-height: 40px; min-width: 64px; padding: 0 14px; border: 1.5px solid var(--screen-rule); border-radius: 8px; background: var(--screen-bg); color: var(--screen-text); cursor: pointer; }
.zoomer-scroll { flex: 1; display: flex; overflow: auto; overscroll-behavior: contain; padding: 0 12px 16px; }
.zoomer-scroll img { flex: none; margin: auto; max-width: none; width: auto; height: auto; border-radius: 4px; background: #ffffff; }
@media (min-width: 1000px) { .zoomer-scroll img { max-width: 100%; max-height: calc(100vh - 88px); } }

/* ---------- glossary ---------- */
.web-gloss .gloss { margin-top: 22px; border-top: 2px solid var(--rule); }
.web-gloss .g-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.web-gloss dt { font-family: var(--f-mono); font-weight: 600; font-size: 15px; color: var(--accent-ink); padding-top: 1px; }
.web-gloss dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-1); }
.web-gloss .g-def { display: block; margin-top: 2px; color: var(--text-2); }
.web-gloss .g-pg { display: table; margin-top: 4px; font-size: 16px; }

/* ---------- the ladder: a staircase only where five columns have room ---------- */
@media (max-width: 999.98px) {
  .ladder { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ladder .rung { min-height: 0 !important; border-radius: 6px; border-bottom: 0; border-left: 4px solid var(--rule); padding: 12px 16px; }
  .ladder .rung.on { border-left-color: var(--accent); }
}
@media (min-width: 1000px) {
  .ladder { margin-left: calc((var(--col) - 960px) / 2); margin-right: calc((var(--col) - 960px) / 2); gap: 10px; }
  .ladder .rung p { font-size: 16px; }
}

/* ---------- phone: one column below 720 px ---------- */
@media (max-width: 719.98px) {
  .page { padding-top: 32px; padding-bottom: 40px; }
  .page.dark { padding-top: 40px; padding-bottom: 48px; }
  .g2, .g3, .g4, .g5, .cols, .cols.w, .split, .cadence, .bands, .fxgrid, .formulas8, .links, .figrow, .contents, .infab, .histrow, .author { grid-template-columns: minmax(0, 1fr); }
  .page .moves { grid-template-columns: minmax(0, 1fr) !important; }
  .checks2 ul.check { column-count: 1; }
  .col > .card[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  .steps .step, .steps.compact .step, .steps.wide .step { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .row { flex-wrap: wrap; }
  .row > div[style*="flex:1"] { flex: 1 1 240px !important; }
  .cta-strip { flex-direction: column; align-items: stretch; }
  .cta-strip .btn { justify-content: center; }
  .page > .chart-scroll { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
  .histrow .hist-fig img { max-height: none; }
  .web-gloss .g-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
}

/* ---------- Why Lines Stop additions ---------- */
.mgap { display: none; }                         /* the paper spacer above a Fabrico box; on the web the margin below does it */
.page .machines { margin-top: 28px; }
.page .machines .fig img { max-height: 420px !important; }
.page .machines.mini .fig img { max-height: 320px !important; }
.page .ws { margin-top: 18px; }
.ws table.t td { height: 40px; }
.num p, .bul li { font-size: 16.5px; }
@media (min-width: 720px) { .wv-narrow { display: none; } }
@media (max-width: 719.98px) {
  .wv-wide { display: none; }
  .cover .chart { display: none; }               /* the cover chart returns in chapter 4; on a phone it would only scroll */
  .page.dark .steps > .row { flex-direction: column; align-items: flex-start; gap: 2px !important; margin-top: 12px !important; }
  .page.dark .steps > .row .note { min-width: 0 !important; }
  .num { grid-template-columns: 30px minmax(0, 1fr); }
  .page h2[style*="font-size:50px"] { font-size: clamp(32px, 8.6vw, 50px) !important; }
}