/* ==========================================================================================
Blue Seas document kit - bs-doc.css (v1, 27 Sep 2026)
The one look for every document Blue Seas produces: the website v4 and email-kit look carried
to web pages and A4 print. Host Grotesk headings, IBM Plex Sans body, Caveat for hand notes.
Colours are the canonical --bs-* tokens (blueseas-design-system/src/styles/tokens).
Fonts: link bs-fonts-embedded.css (offline + print-to-PDF) or the Google Fonts import.
Rules baked in (Templates/Automated Email/README.md and the MASTER formatting playbook):
- the container is the only max-width; text runs full width
- a heading is never shrunk to fit; no em or en dashes in copy
- every box-like group is kept whole across a printed page
========================================================================================== */
:root{
--bs-blue:#4473ef; --bs-blue-deep:#006cf3; --bs-blue-sky:#00acfe;
--bs-green:#4cea89; --bs-green-deep:#1f9455; --bs-green-ink:#157a4d; --bs-green-soft:#E2FBE9;
--bs-ink:#1a1a1c; --bs-ink-soft:#4A4A52; --bs-ink-faint:#8A8A92;
--bs-paper:#FAFAF7; --bs-paper-card:#FFFFFF; --bs-paper-deep:#F2F2EC;
--bs-rule:#E2E2D8; --bs-rule-soft:#F0EFE8; --bs-blue-soft:#E8EEFE; --bs-blue-faint:#F4F7FF;
--bs-amber:#FF8A3D; --bs-amber-deep:#C2410C; --bs-amber-soft:#FFF1E6;
--bs-red:#E5484D; --bs-red-deep:#C62A2F; --bs-red-soft:#FFECEC;
--bs-font-display:'Host Grotesk','BS Hyphen Display','Segoe UI',Arial,sans-serif;
--bs-font-body:'IBM Plex Sans','BS Hyphen Body','Segoe UI',Arial,sans-serif;
--bs-font-hand:'Caveat','Segoe Script',cursive;
--shadow:6px 6px 0 var(--bs-ink);
--radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--bs-font-body);font-size:16.5px;line-height:1.62;color:var(--bs-ink);background:var(--bs-paper);hyphens:none;-webkit-hyphens:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
img{display:block;max-width:100%;height:auto}
a{color:var(--bs-blue-deep)}
p,li,h1,h2,h3,h4,.dek,.lead,[class*="-sub"],[class*="-lead"]{max-width:none}
/* Headings fill the first line before wrapping (Bart, 27 Sep 2026). Never balance-wrap a heading: it splits it
into two short lines. "pretty" keeps the first line full and only stops a single orphan word on the last line.
If a heading still runs to two lines, shorten the words. Compound words carry U+2011. */
h1,h2,h3,h4{font-family:var(--bs-font-display);color:var(--bs-ink);text-wrap:pretty}
p,li{text-wrap:pretty}
b,strong{font-weight:600}
/* ---------- layout ---------- */
.page{width:100%;max-width:1100px;margin:0 auto;padding:0 40px 64px}
.strip{background:var(--bs-ink);color:#fff;font-size:13px;line-height:18px;padding:12px 40px}
.strip b{color:var(--bs-green);font-weight:600}
.strip .sep{opacity:.55;margin:0 8px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0 0}
.masthead .logowrap img{height:30px;width:auto}
.masthead .meta{font-size:13px;line-height:18px;color:var(--bs-ink-soft);text-align:right}
.section{padding-top:48px}
.section:first-child{padding-top:0}
/* ---------- type ---------- */
.eyebrow{font-family:var(--bs-font-hand);font-weight:700;font-size:28px;line-height:1.05;color:var(--bs-blue-deep)}
h1{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1.04;letter-spacing:-1.4px;margin-top:10px}
/* the website's hand-drawn green swipe under the payoff words (full stop goes INSIDE the span) */
.mark{position:relative;white-space:nowrap;z-index:0}
.mark svg{position:absolute;left:-3%;bottom:-.04em;width:106%;height:.42em;z-index:-1;fill:var(--bs-green)}
.tagline{font-size:12.5px;font-weight:600;color:#3a4151;margin-top:4px}
.dek{margin-top:18px;font-size:19px;line-height:1.55;color:var(--bs-ink-soft)}
h2{font-size:clamp(1.75rem,3.2vw,2.3rem);font-weight:800;line-height:1.08;letter-spacing:-.6px;margin-bottom:14px}
h3{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.3px;margin-bottom:6px}
h4{font-size:15px;font-weight:700;letter-spacing:.2px;margin-bottom:4px}
.intro{color:var(--bs-ink-soft);margin:-4px 0 18px}
p+p{margin-top:12px}
.small{font-size:13.5px;line-height:1.5;color:var(--bs-ink-soft)}
.label{font-family:var(--bs-font-display);font-weight:700;font-size:12.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--bs-ink-soft)}
/* ---------- number tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:22px}
.tile{background:var(--bs-paper-card);border:2px solid var(--bs-ink);border-radius:14px;padding:16px 18px 14px}
.tile .num{font-family:var(--bs-font-display);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.8px;color:var(--bs-blue-deep)}
.tile .num.green{color:var(--bs-green-ink)} .tile .num.amber{color:var(--bs-amber-deep)} .tile .num.red{color:var(--bs-red-deep)} .tile .num.ink{color:var(--bs-ink)}
.tile .cap{margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--bs-ink-soft)}
/* ---------- the blue "Your move" band ---------- */
.band{background:var(--bs-blue-deep);color:#fff;border-radius:var(--radius);padding:26px 30px 14px;margin-top:26px}
.band h2,.band h3{color:#fff;margin-bottom:12px}
.band ol{list-style:none;counter-reset:m}
.band li{counter-increment:m;position:relative;padding:0 0 16px 44px}
.band li::before{content:counter(m);position:absolute;left:0;top:-3px;font-family:var(--bs-font-display);font-weight:800;font-size:28px;color:var(--bs-green)}
.band li b{display:block;font-size:17.5px;line-height:1.4;font-weight:600;color:#fff}
.band li span{display:block;font-size:15px;line-height:1.5;color:#E8EEFE;margin-top:2px}
.band p{color:#E8EEFE}
/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:var(--bs-paper-card);border:2px solid var(--bs-ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.card.flat{box-shadow:none}
.card h3{margin-top:10px}
.card .pill+h3{margin-top:12px}
.card p{font-size:15.5px;line-height:1.58}
.card .why{margin-top:10px}
.card .why b{font-weight:700}
.pill{display:inline-block;font-family:var(--bs-font-display);font-weight:700;font-size:12.5px;line-height:1;letter-spacing:.8px;text-transform:uppercase;padding:6px 10px;border-radius:8px;background:var(--bs-blue-soft);color:var(--bs-blue-deep)}
.pill.green{background:var(--bs-green-soft);color:var(--bs-green-ink)} .pill.amber{background:var(--bs-amber-soft);color:var(--bs-amber-deep)}
.pill.red{background:var(--bs-red-soft);color:var(--bs-red-deep)} .pill.grey{background:var(--bs-paper-deep);color:var(--bs-ink-soft)}
/* ---------- ruled rows (name, line, status) ---------- */
.rows{list-style:none;border-top:1px solid var(--bs-rule)}
.rows li{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:14px 0;border-bottom:1px solid var(--bs-rule)}
.rows .name{font-family:var(--bs-font-display);font-weight:700;font-size:17px;color:var(--bs-ink)}
.rows .line{display:block;font-size:15px;line-height:1.5;color:var(--bs-ink-soft)}
.rows .status{font-family:var(--bs-font-display);font-weight:700;font-size:14px;white-space:nowrap;color:var(--bs-ink-soft)}
.rows .status.green{color:var(--bs-green-ink)} .rows .status.amber{color:var(--bs-amber-deep)} .rows .status.red{color:var(--bs-red-deep)} .rows .status.blue{color:var(--bs-blue-deep)}
/* ---------- tables ---------- */
table.bs{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.45}
table.bs th{font-family:var(--bs-font-display);font-weight:700;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;text-align:left;color:var(--bs-ink);padding:10px 12px 10px 0;border-bottom:2px solid var(--bs-ink)}
table.bs td{padding:11px 12px 11px 0;border-bottom:1px solid var(--bs-rule);vertical-align:top;overflow-wrap:anywhere}
table.bs td.num,table.bs th.num{text-align:right;font-variant-numeric:tabular-nums}
table.bs tr.total td{border-top:2px solid var(--bs-ink);border-bottom:0;font-weight:700}
/* ---------- notes, steps, checklists ---------- */
.note{background:var(--bs-paper-deep);border-radius:14px;padding:16px 20px;font-size:15px;line-height:1.55;color:var(--bs-ink-soft)}
.note b{color:var(--bs-ink)}
.note.blue{background:var(--bs-blue-faint)} .note.green{background:var(--bs-green-soft)} .note.amber{background:var(--bs-amber-soft)}
.quote{font-family:var(--bs-font-hand);font-weight:700;font-size:26px;line-height:1.15;color:var(--bs-blue-deep)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.steps li{counter-increment:s;border:2px solid var(--bs-ink);border-radius:14px;padding:16px 18px;background:var(--bs-paper-card)}
.steps li::before{content:counter(s);display:block;font-family:var(--bs-font-display);font-weight:800;font-size:26px;color:var(--bs-blue-deep);margin-bottom:4px}
.steps li b{display:block;font-family:var(--bs-font-display);font-size:17px;margin-bottom:2px}
.steps li span{font-size:14.5px;line-height:1.5;color:var(--bs-ink-soft)}
.check{list-style:none}
.check li{position:relative;padding:8px 0 8px 34px;border-bottom:1px solid var(--bs-rule)}
.check li::before{content:"";position:absolute;left:0;top:10px;width:18px;height:18px;border:2px solid var(--bs-ink);border-radius:5px;background:#fff}
.check li.done::before{background:var(--bs-green);border-color:var(--bs-green-deep)}
.check li .who{float:right;font-size:13.5px;color:var(--bs-ink-soft)}
/* ---------- scores out of 10 (Bart, 27 Sep 2026): 9-10 solid green and bold, 7-8 light green, 5-6 blue,
3-4 orange, 1-2 red. Add the class by value (s-top, s-good, s-mid, s-low, s-bad) or let bs-doc.js do it from data-score. */
.score{display:inline-flex;align-items:center;justify-content:center;min-width:2.2em;padding:.18em .5em;border-radius:8px;font-family:var(--bs-font-display);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.s-top{background:var(--bs-green-deep);color:#fff;font-weight:800}
.s-good{background:var(--bs-green-soft);color:var(--bs-green-ink)}
.s-mid{background:var(--bs-blue-soft);color:var(--bs-blue-deep)}
.s-low{background:var(--bs-amber-soft);color:var(--bs-amber-deep)}
.s-bad{background:var(--bs-red-soft);color:var(--bs-red-deep)}
/* ---------- credential pills, with the email signature's icons (Bart, 27 Sep 2026). Wording is locked, in this order:
Queensland Government AI mentor / Winner, 2025 Sunshine Coast Business Awards / Finalist, 2026 Sunshine Coast Business Awards
(added 1 Oct 2026) / Top 10 finalist, Australian AI Awards 2025 & 2026 */
.creds-row{display:flex;flex-wrap:wrap;gap:8px}
.cred{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--bs-rule);background:var(--bs-paper-card);border-radius:999px;padding:5px 13px 5px 9px;font-size:13.5px;font-weight:600;color:var(--bs-ink);white-space:nowrap}
.cred .em{font-size:15px;line-height:1;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.cred.proof{border-color:var(--bs-green);background:var(--bs-green-soft)}
/* ---------- the sign-off block (Bart, 28 Sep 2026). Prepared for, prepared by, version, then
"Built by" and the four credential pills (2 by 2), then the sample note when there is one.
A document with a cover carries it at the foot of the cover. A short document with no cover (5 pages
or fewer) carries it at the end of the last page, flush with the footer. Light on purpose: no heavy rules.
Prepared for
...
Prepared by
...
Version
...
Built by
four .cred pills
... is fictional, and every figure is made up.
*/
.signoff{margin-top:40px;padding-top:14px;border-top:1px solid var(--bs-rule-soft)}
.prep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 22px;margin:0}
.prep>div{min-width:0}
.prep dt{font-family:var(--bs-font-display);font-weight:600;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--bs-ink-soft)}
.prep dd{margin:1px 0 0;font-size:14px;line-height:1.45;color:var(--bs-ink-soft)}
.built{margin-top:14px}
.built .by{display:block;font-family:var(--bs-font-display);font-weight:600;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--bs-ink-soft);margin-bottom:7px}
/* four pills sit 2 by 2 (1 Oct 2026): each column is as wide as its longest pill, so every pill stays on one line
on an A4 sheet; on a narrow screen the columns shrink and the pills wrap */
.built .creds-row{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 14px}
.built .cred{white-space:normal;border-radius:12px;line-height:1.3;padding:6px 12px 6px 9px}
.sample-note{margin-top:12px;font-size:13px;line-height:1.5;color:var(--bs-ink-soft)}
.sheet>.signoff{margin-top:auto;padding-top:2.2mm}
.sheet>.signoff+.sheet-foot{margin-top:0}
.sheet .signoff{padding-bottom:2mm}
.sheet .prep dt,.sheet .built .by{font-size:9.4pt}
.sheet .prep dd{font-size:9.4pt;line-height:1.4}
.sheet .built{margin-top:1.4mm}
.sheet .built .by{margin-bottom:4px}
.sheet .built .creds-row{gap:5px 12px}
.sheet .built .cred{padding:2px 10px 2px 7px}
.sheet .sample-note{font-size:9.4pt;margin-top:1.4mm}
/* ---------- a cover page (reports over 5 pages): logos, title, who it is for, then the sign-off at the foot.
The report itself starts on the next page, after a contents page of its own. */
.sheet.cover .cover-title{margin-top:34mm}
.sheet.cover .cover-title h1{font-size:34pt;line-height:1.05}
.sheet.cover .cover-for{margin-top:8mm;font-family:var(--bs-font-display);font-weight:700;font-size:15pt;color:var(--bs-ink)}
.sheet.cover .cover-for span{display:block;font-family:var(--bs-font-body);font-weight:400;font-size:11pt;color:var(--bs-ink-soft);margin-top:1mm}
/* the document control page: version history on its own page, at the back of a long report */
table.bs.light th{border-bottom:1px solid var(--bs-rule);color:var(--bs-ink-soft);font-weight:600}
table.bs.light td{border-bottom:1px solid var(--bs-rule-soft)}
/* ---------- links people click (Bart, 28 Sep 2026): every one carries the click icon, so it reads as a link.
Open the full-page roadmap is a button; add "inline" inside a sentence.
bs-doc.js adds the icon. Group several in
. */
a.go{display:inline-flex;align-items:center;gap:8px;font-family:var(--bs-font-display);font-weight:700;font-size:15px;line-height:1.25;color:var(--bs-ink);text-decoration:none;background:var(--bs-paper-card);border:2px solid var(--bs-ink);border-radius:999px;box-shadow:3px 3px 0 var(--bs-ink);padding:6px 16px 6px 8px;transition:transform .15s ease,box-shadow .15s ease}
a.go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--bs-ink)}
a.go::after{content:"\2192";color:var(--bs-blue-deep);font-weight:800}
a.go .ico{width:24px;height:24px}
a.go.inline{display:inline;background:none;border:0;box-shadow:none;padding:0;font-family:inherit;font-weight:600;color:var(--bs-blue-deep);text-decoration:underline;text-decoration-color:var(--bs-green);text-decoration-thickness:2px;text-underline-offset:3px}
a.go.inline .ico{width:1.25em;height:1.25em;vertical-align:-.28em;margin-right:.25em}
a.go.inline::after{content:none}
.golinks{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:10px}
.sheet a.go{font-size:10pt;padding:3px 12px 3px 5px;box-shadow:2px 2px 0 var(--bs-ink);border-width:1.5px}
.sheet a.go .ico{width:18px;height:18px}
.sheet .golinks{gap:7px 9px;margin-top:6px}
.sheet a.go.inline{font-size:inherit;padding:0;border:0;box-shadow:none}
.sheet a.go.inline .ico{width:1.2em;height:1.2em}
/* ---------- a return figure (Bart, 28 Sep 2026): "3.9x to 4.8x" then ROI, so nobody reads it as a minus */
.roi{display:inline-block;margin-left:.28em;padding:.2em .45em;border-radius:6px;background:var(--bs-green-soft);color:var(--bs-green-ink);font-family:var(--bs-font-display);font-weight:800;font-size:13px;letter-spacing:.8px;line-height:1.1;vertical-align:middle}
.sheet .roi{font-size:9.4pt}
/* ---------- signpost icons (the For Dummies idea, Blue Seas colours). Symbols live in bs-doc.js and are injected
on load: . One per section eyebrow or callout, never decoration. */
.ico{width:1.35em;height:1.35em;vertical-align:-.28em;flex:0 0 auto}
.eyebrow .ico{width:.95em;height:.95em;margin-right:.18em;vertical-align:-.14em}
.signpost{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:12px 16px;background:var(--bs-blue-faint)}
.signpost .ico{width:28px;height:28px;margin-top:2px}
.signpost b{font-family:var(--bs-font-display)}
.signpost.tip{background:var(--bs-green-soft)} .signpost.watch{background:var(--bs-amber-soft)}
/* ---------- the reader toolbar (reports): Page view and Print. Hidden in print. */
.bs-tools{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;gap:6px;background:var(--bs-ink);border-radius:999px;padding:5px}
.bs-tools button{font:600 13px var(--bs-font-body);color:#fff;background:transparent;border:0;border-radius:999px;padding:8px 14px;cursor:pointer}
.bs-tools button[aria-pressed="true"],.bs-tools button:hover{background:#fff;color:var(--bs-ink)}
/* ---------- motion, web view only (Bart, 28 Sep 2026: the proposal's chat cards, carried to every client
document except decks). bs-doc.js adds these classes, so a page with no script shows everything at once.
Off for reduced motion, in Page view and in print.
- bs-reveal: a block rises in as it scrolls into view
- bs-anim + bs-kid: a group's items (tiles, cards, steps, pills, rows) arrive one after another
- bs-draw: the green swipe under a heading draws itself in
- numbers in tiles and big figures count up to their value */
.bs-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.bs-reveal.in{opacity:1;transform:none}
.bs-anim .bs-kid{opacity:0;transform:translateY(12px) scale(.98);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.bs-anim.in .bs-kid{opacity:1;transform:none}
.bs-draw .mark svg{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.6,.1,.2,1) .2s}
.bs-draw.in .mark svg{clip-path:inset(0 0 0 0)}
.bs-anim.in .score.bs-kid{animation:bs-pop .4s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes bs-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.bs-reveal,.bs-anim .bs-kid{opacity:1;transform:none;transition:none;animation:none}.bs-draw .mark svg{clip-path:none;transition:none}}
body.pageview .bs-reveal,body.pageview .bs-anim .bs-kid{opacity:1;transform:none;transition:none;animation:none}
body.pageview .bs-draw .mark svg{clip-path:none;transition:none}
/* ---------- footer ---------- */
.page-foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--bs-rule);font-size:13px;line-height:1.6;color:var(--bs-ink-soft)}
/* ---------- Reports: one HTML file, two views (Bart, 27 Sep 2026: one format everywhere).
On screen a report reads as a web page, like a proposal. "Page view" (body.pageview, via the toolbar)
shows the exact A4 pages. Print always produces the A4 pages. ---------- */
@media screen{
body.sheets:not(.pageview){background:var(--bs-paper)}
body.sheets:not(.pageview) .sheet{width:min(1000px,calc(100% - 32px));height:auto;overflow:visible;margin:0 auto;box-shadow:none;background:transparent;padding:34px 0 26px;border-bottom:1px solid var(--bs-rule)}
body.sheets:not(.pageview) .sheet:last-of-type{border-bottom:0;padding-bottom:90px}
body.sheets:not(.pageview) .sheet + .sheet .sheet-head{display:none}
body.sheets:not(.pageview) .sheet:not(:last-of-type) > .sheet-foot{display:none}
body.sheets:not(.pageview) .sheet > .sheet-foot{margin-top:28px}
}
/* ---------- A4 print sheets (use .sheet for page-by-page documents) ----------
A sheet is exactly one A4 page on screen and in print, with its own point-based type scale so
the screen preview IS the print. Overflow is hidden, so probe scrollHeight > clientHeight after
every build (the MASTER playbook section G fit rule). Levers: shorten copy, tighten spacing. */
body.sheets.pageview{background:#E9E9E2}
.sheet{width:210mm;height:297mm;overflow:hidden;margin:10mm auto;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.10);padding:14mm 15mm 10mm;display:flex;flex-direction:column;font-size:10.2pt;line-height:1.5}
.sheet>*{flex-shrink:0}
.sheet .eyebrow{font-size:19pt}
.sheet h1{font-size:31pt;letter-spacing:-1.1px;margin-top:4px}
.sheet h2{font-size:19pt;letter-spacing:-.5px;margin-bottom:8px}
.sheet h3{font-size:12.5pt;margin-bottom:3px}
.sheet .dek{font-size:12pt;margin-top:10px}
.sheet .intro{font-size:10.2pt;margin:0 0 12px}
.sheet .section{padding-top:18px}
.sheet .tiles{gap:10px;margin-top:14px}
.sheet .tile{padding:11px 13px 10px;border-radius:12px}
.sheet .tile .num{font-size:22pt}
.sheet .tile .cap{font-size:9.4pt}
.sheet .cards{gap:12px}
.sheet .card{padding:13px 15px;border-radius:14px;box-shadow:4px 4px 0 var(--bs-ink)}
.sheet .card p{font-size:9.8pt;line-height:1.5}
.sheet .band{padding:16px 20px 6px;margin-top:14px;border-radius:14px}
.sheet .band li{padding:0 0 10px 34px}
.sheet .band li::before{font-size:20pt;top:-2px}
.sheet .band li b{font-size:11.5pt}
.sheet .band li span{font-size:9.8pt}
.sheet table.bs{font-size:9.4pt}
.sheet table.bs th{font-size:9.4pt;padding:6px 8px 6px 0}
.sheet table.bs td{padding:6px 8px 6px 0}
.sheet .note{font-size:9.4pt;padding:10px 14px;border-radius:12px}
.sheet .rows li{padding:7px 0}
.sheet .rows .name{font-size:11pt}
.sheet .rows .line,.sheet .rows .status{font-size:9.4pt}
.sheet .pill{font-size:9.4pt;padding:4px 7px}
.sheet .small{font-size:9.4pt}
.sheet .label{font-size:9.4pt}
.sheet .cred{font-size:9.4pt;padding:3px 10px 3px 7px}
.sheet .cred .em{font-size:10.5pt}
.sheet .score{font-size:10pt}
.sheet>.sheet-foot{margin-top:auto;padding-top:4mm;display:flex;justify-content:space-between;font-size:9.4pt;color:var(--bs-ink-soft);border-top:1px solid var(--bs-rule)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:6mm;margin-bottom:8mm;border-bottom:1px solid var(--bs-rule)}
.sheet-head .logowrap img{height:26px;width:auto}
.sheet-head .meta{font-size:9.5pt;line-height:1.4;color:var(--bs-ink-soft);text-align:right}
.card,.tile,.band,.steps li,.note,table.bs tr,.rows li,.check li{break-inside:avoid;page-break-inside:avoid}
/* keep with what follows (1 Oct 2026): an eyebrow or label stays with its heading, a heading with at least
the first lines of its text. print-qa.py fails a page that ends on one. */
h1,h2,h3,h4,.eyebrow,.label{break-after:avoid;page-break-after:avoid}
@media (max-width:640px){
.page{padding:0 16px 48px}
.strip{padding:12px 16px}
.masthead{flex-direction:column;align-items:flex-start}
.masthead .meta{text-align:left}
h1{letter-spacing:-.8px}
.band{padding:22px 20px 10px}
.rows li{flex-direction:column;gap:4px}
}
/* A4 sheets on a phone: the page stops being A4 and flows as one column. Each document lists its own
multi-column grids in a matching rule (class "stack" also works on any grid). */
@media screen and (max-width:820px){
body.sheets{background:#fff}
.sheet{width:auto;height:auto;overflow:visible;margin:0;box-shadow:none;padding:22px 16px 18px;border-bottom:10px solid var(--bs-paper-deep)}
.sheet .tiles,.sheet .cards,.sheet .stack{grid-template-columns:1fr !important}
.sheet-head{flex-direction:column;gap:8px}
.sheet-head .meta{text-align:left}
.sheet>.sheet-foot{margin-top:18px;flex-direction:column;gap:4px}
.sheet .mark{white-space:normal}
.creds-row .cred{white-space:normal}
.prep,.built .creds-row{grid-template-columns:1fr}
}
@media print{
/* Paper margins stay 0 (1 Oct 2026): an A4 .sheet fills exactly one page, and the browser has no room to
print its own date, title and web address. A flowing document (.page) gets its breathing space from its
own padding instead: box-decoration-break:clone repeats the 15mm top and bottom on EVERY printed page
(Chrome and Edge 130+, Firefox; Safari pads the first and last page only). A design that sets its own @page margins
sets .page{padding:0} with them, as the proposal does. The strip's words clear the top edge of page 1. */
@page{size:A4;margin:0}
body{background:#fff;font-size:10.5pt;line-height:1.5}
body.sheets{background:#fff}
.sheet{margin:0;box-shadow:none;page-break-after:always;break-after:page}
.sheet:last-child{page-break-after:auto;break-after:auto}
.page{max-width:none;padding:15mm 16mm;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.strip{padding-top:10mm}
.page h1{font-size:30pt;letter-spacing:-1px} .page h2{font-size:19pt} .page h3{font-size:13.5pt}
.page .dek{font-size:12.5pt} .page .tile .num{font-size:22pt}
.page .card{box-shadow:4px 4px 0 var(--bs-ink)}
a{color:var(--bs-ink);text-decoration:none}
.bs-tools{display:none !important}
.bs-reveal,.bs-kid{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
.mark svg{clip-path:none !important}
a.go{box-shadow:none;transform:none}
.pb{break-before:page;page-break-before:always}
}