/* ═══ FONTS — self-hosted ════════════════════════════════════════════
Source: Google Fonts, official pre-built woff2 subsets (fonts.gstatic.com)
Licence: SIL Open Font License 1.1 — all three families. Licence texts are
vendored beside the files in assets/fonts/.
These are Google's own compiled subsets, redistributed byte-for-byte
unmodified. We deliberately do NOT build our own subsets: Source Sans 3
carries the Reserved Font Name "Source", and under OFL 1.1 a self-made
subset is a modified version, which may not keep the reserved name.
Redistributing the official build unmodified avoids that entirely.
Weights are those proven to render by bookcrater-docs/QA/audit-font-usage.js
(computed styles across 19 routes x 2 widths). Archivo 700 was dropped on
that evidence. Source Sans 3 700, Source Sans 3 400 italic and Space Mono
400 were ADDED — static analysis had missed all three, and the italic and
mono-400 were being faux-rendered by the browser.
unicode-range is preserved from Google, so latin-ext is only fetched if a
page actually contains a character that needs it — zero cost in English.
════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:800 900;font-display:swap;
src:url(../assets/fonts/archivo-var-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800 900;font-display:swap;
src:url(../assets/fonts/archivo-var-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../assets/fonts/source-sans-3-var-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;
src:url(../assets/fonts/source-sans-3-var-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400 700;font-display:swap;
src:url(../assets/fonts/source-sans-3-italic-var-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400 700;font-display:swap;
src:url(../assets/fonts/source-sans-3-italic-var-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(../assets/fonts/space-mono-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(../assets/fonts/space-mono-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(../assets/fonts/space-mono-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(../assets/fonts/space-mono-700-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* ═══════════════════════════════════════════════════════════════════════
BOOKCRATER DESIGN SYSTEM — v1 (Round 1.7, approved)
CANONICAL SOURCE. Do not edit the vendored copies.
Location : bookcrater-docs/brand/design-system/bookcrater.css
Vendored : bookcrater-site/css/bookcrater.css
bookcrater-app/css/bookcrater.css
Verify : node bookcrater-docs/QA/verify-design-system.js
The two application repos are separate deployables with no build step,
so the shared layer is vendored rather than imported. The verification
script fails if a vendored copy drifts from this file, which makes
consistency structural instead of a matter of discipline.
Lineage: original Direction B -> Round 1.6 correction -> Round 1.7
propagation. Warm cream/kraft grounds, deep navy structure, heavy-to-
light border hierarchy, restrained offset depth, physical field
instruments, filed tabs, rationed stamps.
═══════════════════════════════════════════════════════════════════════ */
:root{
/* ── SURFACES ─────────────────────────────────────────────────────── */
--cream:#FCF3DF; /* page ground */
--cream-2:#F6E9CE; /* bands, inset panels, table + card headers */
--paper:#FFFCF4; /* cards, reading surfaces */
--kraft-pale:#F0DCC0; /* brand surfaces, grab-and-go, app chrome */
/* ── INK ──────────────────────────────────────────────────────────── */
--navy:#0B2340; /* structure, headings, primary controls */
--navy-2:#16324F;
--navy-deep:#051932;
--brown:#4A2A0C; /* secondary ink, emphasis */
--brown-mid:#6B4520; /* body secondary */
--ink-3:#655C4D; /* muted metadata — AA on all four surfaces */
--prose:#28323C; /* long-form reading ink */
/* ── BRAND ────────────────────────────────────────────────────────── */
--kraft:#C8813F; /* SURFACE/BORDER/FILL ONLY. 2.85:1 on cream —
never a text colour on a light ground. */
--kraft-lit:#E7B072; /* text + accents ON NAVY ONLY */
--kraft-deep:#9C5F26; /* surface / border only */
--kraft-2:#8A5017; /* the text-safe kraft (worst case 4.85:1) */
/* ── LINES ────────────────────────────────────────────────────────── */
--line:#D9C6A4; /* light containers */
--line-hard:#B99B6D; /* dashed separators, secondary depth */
/* ── SEMANTIC STATE ───────────────────────────────────────────────── */
--go:#3F6114; --go-bg:#E4EED4; --go-line:#9CB877; /* proceed, Tier A, done */
--hold:#7E5309; --hold-bg:#F9EBCC; --hold-line:#D9B978; /* investigate, Tier C */
--stop:#8E2214; --stop-bg:#F7E1DC; --stop-line:#DBA294; /* avoid, Tier D, error */
/* ── TYPE ─────────────────────────────────────────────────────────── */
--disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
--body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'Space Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
--fs-body:17px; --lh-body:1.6; --measure:64ch;
/* ── SPACE ────────────────────────────────────────────────────────── */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px;
--s6:30px; --s7:42px; --s8:56px; --s9:74px;
/* Semantic spacing. The numeric scale stays the source of truth; these name
the RELATIONSHIPS so a fix is a decision about rhythm rather than a
one-off margin. Use these for vertical rhythm between elements. */
--space-tight:var(--s2); /* 8px - inside a tight group */
--space-close:var(--s3); /* 12px - a heading and its own paragraph */
--space-normal:var(--s5); /* 22px - between related blocks */
--space-relaxed:var(--s6); /* 30px - after an image, before new text */
--space-section:var(--s8); /* 56px - between sections */
--space-major:var(--s9); /* 74px - between major movements */
/* ── SHAPE ────────────────────────────────────────────────────────── */
--r:5px; --r-lg:9px; --r-inst:11px;
--bw-light:1px; /* ordinary containers */
--bw-med:2px; /* buttons, controls, cards, important states */
--bw-heavy:2.5px; /* instruments, major physical objects */
--bw-rule:3px; /* section rules, app chrome */
/* ── DEPTH — only on things you act on ────────────────────────────── */
--sh:0 2px 0 var(--line-hard);
--sh-2:0 3px 0 var(--line-hard);
--sh-press:0 3px 0 var(--navy);
--sh-lift:0 5px 0 var(--line-hard),0 12px 26px rgba(74,42,12,.16);
--sh-inst:0 4px 0 var(--kraft-deep),0 14px 32px rgba(74,42,12,.20);
/* ── CONTROL SIZING — 44px is the floor, everywhere ───────────────── */
--tap:44px; --ctrl:52px; --ctrl-lg:60px;
/* ── MOTION ───────────────────────────────────────────────────────── */
--dur:200ms; --ease:cubic-bezier(.25,.8,.35,1);
/* ── FOCUS ────────────────────────────────────────────────────────── */
--focus:3px solid var(--navy); --focus-offset:2px;
}
/* Breakpoints (documented; CSS can't tokenise media queries):
mobile <=430 · tablet <=760 · lap <=1080 · desk >1080 */
@media (prefers-reduced-motion:reduce){
:root{--dur:.01ms}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* ═══ BASE ═══════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--body);
font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
/* paper tooth — the whole product, very low contrast */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
background:repeating-linear-gradient(0deg,rgba(155,120,70,.03) 0 1px,transparent 1px 3px)}
h1,h2,h3,h4,h5{font-family:var(--disp);margin:0;line-height:1.08;letter-spacing:-.02em;
color:var(--navy);font-weight:800}
h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.032em;font-weight:900}
h2{font-size:26px} h3{font-size:20px} h4{font-size:17px}
p{margin:0 0 1em}
a{color:inherit}
/* height:auto is not optional here. Intrinsic width/height attributes on an
![]()
reserve layout space (which is why they are there), but they also act
as a presentational size. With max-width:100% shrinking the width and no
height:auto to release the height, a 1440x900 screenshot renders at 602x900
-- squashed to 42% of its correct ratio. The two must always ship together. */
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
[id]{scroll-margin-top:96px} /* anchors must clear sticky headers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--cream);
padding:14px 20px;z-index:999;font:800 16px var(--disp);border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}
/* Without this, falls back to the browser default monospace and the
product speaks in two different mono voices on the same page. */
code,kbd,samp,pre{font-family:var(--mono);font-size:.94em}
/* ═══ TYPOGRAPHIC UTILITIES ══════════════════════════════════════════ */
.mono{font-family:var(--mono)}
.muted{color:var(--brown-mid)}
.faint{color:var(--ink-3);font-size:14.5px}
.center{text-align:center}
.eyebrow,.lbl{font:700 10.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;
color:var(--kraft-2);display:block;margin-bottom:var(--s2)}
.lbl-cream{color:var(--kraft-lit)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font:700 11px var(--mono);
letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.meta i{width:5px;height:5px;background:var(--line-hard);border-radius:50%;font-style:normal;flex:none}
.mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)}
.rule{height:var(--bw-rule);background:var(--navy);border:0;border-radius:2px;margin:var(--s6) 0}
/* ═══ STAMPS — brand punctuation. State, verdict, milestone, status.
Not decoration: do not stamp ordinary content labels. ══════════ */
.stamp{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:700;
font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;border:var(--bw-med) solid currentColor;
border-radius:3px;padding:4px 9px}
.stamp-kraft{color:var(--kraft-2)} .stamp-navy{color:var(--navy)}
.stamp-go{color:var(--go)} .stamp-hold{color:var(--hold)} .stamp-stop{color:var(--stop)}
.stamp-solid{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.stamp-tilt{transform:rotate(-1.6deg)} /* verdicts + earned milestones ONLY */
/* ═══ CHIPS / TAGS / BADGES ══════════════════════════════════════════ */
.chip,.tag,.badge{display:inline-flex;align-items:center;gap:5px;font:700 11.5px var(--body);
padding:5px 11px;border-radius:3px;border:1.5px solid var(--line-hard);
background:var(--cream-2);color:var(--brown);letter-spacing:.01em}
.chip-go,.badge-go{background:var(--go-bg);color:var(--go);border-color:var(--go)}
.chip-hold,.badge-ask{background:var(--hold-bg);color:var(--hold);border-color:var(--hold)}
.chip-stop,.badge-skip{background:var(--stop-bg);color:var(--stop);border-color:var(--stop)}
.chip-kraft{background:var(--kraft-pale);color:var(--brown);border-color:var(--line-hard)}
.chip-adv,.tag-teaser{background:var(--navy);color:var(--kraft-lit);border-color:var(--navy)}
.tag-public{background:var(--go-bg);color:var(--go);border-color:var(--go)}
.tag-coming-later{background:var(--cream-2);color:var(--ink-3)}
.badge-tier{font-family:var(--mono);font-weight:700}
.status{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
/* ═══ BUTTONS — physical press ═══════════════════════════════════════ */
.btn{font-family:var(--disp);font-weight:800;font-size:16px;border:var(--bw-med) solid var(--navy);
border-radius:var(--r);padding:14px 22px;min-height:var(--ctrl);display:inline-flex;
align-items:center;justify-content:center;gap:9px;cursor:pointer;text-decoration:none;
background:var(--kraft);color:var(--navy);box-shadow:var(--sh-press);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur)}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--navy)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--navy)}
.btn-secondary,.btn-ghost{background:var(--paper);color:var(--navy)}
.btn-dark{background:var(--navy);color:var(--cream);box-shadow:0 3px 0 var(--brown)}
.btn-dark:hover{box-shadow:0 5px 0 var(--brown)} .btn-dark:active{box-shadow:0 0 0 var(--brown)}
.btn-quiet{background:transparent;border-color:var(--line-hard);color:var(--brown-mid);
box-shadow:none;font-size:14px;padding:10px 15px;min-height:var(--tap)}
.btn-quiet:hover{transform:none;box-shadow:none;border-color:var(--navy);color:var(--navy)}
.btn-sm{font-size:14px;padding:10px 15px;min-height:var(--tap)}
.btn-lg{font-size:18.5px;padding:17px 28px;min-height:var(--ctrl-lg)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;
box-shadow:0 1px 0 var(--line-hard);border-color:var(--line-hard)}
.btn[disabled]:hover{transform:none;box-shadow:0 1px 0 var(--line-hard)}
.btn-group{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
/* ═══ SURFACES — border hierarchy ════════════════════════════════════ */
.card{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
padding:var(--s5);box-shadow:var(--sh-2)}
.card-light{background:var(--paper);border:var(--bw-light) solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.card-heavy{background:var(--paper);border:var(--bw-heavy) solid var(--navy);border-radius:var(--r-lg);
padding:var(--s5);box-shadow:var(--sh-lift)}
/* filed tab card — "this belongs to a level" */
.tabcard{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
position:relative;box-shadow:var(--sh-2)}
.tabcard::before{content:attr(data-tab);position:absolute;top:-14px;left:22px;background:var(--navy);
color:var(--cream);font:700 10px var(--mono);letter-spacing:.14em;padding:5px 12px;
border-radius:4px 4px 0 0;text-transform:uppercase}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
/* auto-fit with a real minimum, rather than a fixed column count plus a
breakpoint. A fixed repeat(3,1fr) only stacked below 760px, so at 768 --
an extremely common tablet width -- three cards of prose sat in 180px each.
Stating the narrowest column that is still readable makes the grid correct
at every width instead of only at the ones someone remembered to test. */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.main-narrow{max-width:var(--measure)}
/* ═══ PLATES — numbered steps in a procedure ═════════════════════════ */
.plate{width:44px;height:44px;border-radius:var(--r);background:var(--kraft);
border:var(--bw-heavy) solid var(--navy);display:grid;place-items:center;
font:900 19px var(--disp);color:var(--navy);box-shadow:0 2px 0 var(--navy);flex:none}
.plate-sm{width:34px;height:34px;font-size:15px;border-width:var(--bw-med)}
.plate-done{background:var(--go-bg)} .plate-todo{background:var(--paper)}
.plate-adv{background:var(--navy);color:var(--kraft-lit)}
/* ═══ THE FIELD INSTRUMENT — shared chassis, varying interiors ═══════ */
.inst{background:var(--kraft);border:var(--bw-heavy) solid var(--navy);border-radius:var(--r-inst);
padding:13px;box-shadow:var(--sh-inst);position:relative}
.inst::before{content:'';position:absolute;top:-10px;right:26px;transform:rotate(2.2deg);
width:74px;height:22px;background:rgba(156,95,38,.5);
border-left:1px dashed rgba(74,42,12,.35);border-right:1px dashed rgba(74,42,12,.35);border-radius:1px}
.inst-tab{position:absolute;top:-13px;left:20px;background:var(--navy);color:var(--kraft-lit);
font:700 9.5px var(--mono);letter-spacing:.15em;padding:5px 11px;border-radius:4px 4px 0 0;
text-transform:uppercase;z-index:2}
.inst-in{background:var(--paper);border:var(--bw-med) solid var(--navy);border-radius:6px;
overflow:hidden;position:relative;z-index:1}
.inst-head{padding:14px 17px 12px;border-bottom:var(--bw-med) solid var(--navy);background:var(--cream-2)}
.inst-head h3{font-size:20px;font-weight:900;letter-spacing:-.025em;margin-top:5px}
.inst-body{padding:17px}
.inst-foot{padding:14px 17px;border-top:var(--bw-med) solid var(--navy);background:var(--cream-2)}
.inst-cap{text-align:center;font:700 11.5px var(--mono);color:var(--brown-mid);
margin-top:var(--s4);letter-spacing:.09em}
/* ═══ TACTILE OPTION ROWS (tools, checklists, onboarding) ════════════ */
.option-list{display:flex;flex-direction:column;gap:9px}
.option-card,.country-option,.toggle-row{display:flex;align-items:center;gap:12px;width:100%;
text-align:left;font:600 15.5px var(--body);background:var(--cream);
border:var(--bw-med) solid var(--line-hard);border-radius:var(--r);padding:12px 14px;
min-height:var(--ctrl);color:var(--navy);cursor:pointer;
transition:all var(--dur) var(--ease)}
.option-card:hover,.country-option:hover,.toggle-row:hover{border-color:var(--navy);background:var(--cream-2)}
.option-card[aria-pressed="true"],.country-option[aria-pressed="true"],
.option-card.selected,.toggle-row[aria-pressed="true"]{
background:var(--kraft-pale);border-color:var(--navy);box-shadow:0 2px 0 var(--navy)}
.option-card .box,.toggle-row .box{width:22px;height:22px;border-radius:3px;
border:var(--bw-med) solid var(--navy);flex:none;display:grid;place-items:center;
background:var(--paper);transition:all var(--dur)}
.option-card[aria-pressed="true"] .box,.toggle-row[aria-pressed="true"] .box{background:var(--navy)}
.option-card[aria-pressed="true"] .box::after,.toggle-row[aria-pressed="true"] .box::after{
content:'';width:10px;height:5px;border-left:2.4px solid var(--kraft-lit);
border-bottom:2.4px solid var(--kraft-lit);transform:rotate(-45deg) translate(1px,-1px)}
/* ═══ PROGRESS ═══════════════════════════════════════════════════════ */
.progressbar{height:12px;border-radius:2px;background:var(--cream-2);
border:var(--bw-med) solid var(--navy);overflow:hidden;margin-top:var(--s3)}
.progressbar > div{height:100%;background:var(--kraft);transition:width var(--dur) var(--ease)}
/* chunky segmented progress — tools, instruments */
.tool-progress,.onb-progress,.prog{display:flex;gap:5px;margin-bottom:var(--s3)}
.tool-progress > div,.onb-progress > div,.prog > i{flex:1;height:11px;border-radius:2px;
background:var(--paper);border:var(--bw-med) solid var(--line-hard);transition:all var(--dur)}
.tool-progress > div.done,.onb-progress > div.done,.prog > i.on{background:var(--kraft);border-color:var(--navy)}
/* the shelf — levels as book spines standing on a rule */
.shelf{padding-bottom:10px;border-bottom:4px solid var(--navy);display:flex;align-items:flex-end;
gap:6px;height:92px}
.shelf .sp{flex:1;border:var(--bw-med) solid var(--navy);border-bottom:0;border-radius:3px 3px 0 0;
display:flex;align-items:flex-end;justify-content:center;background:var(--cream-2);
transition:all var(--dur) var(--ease);min-width:0;overflow:hidden}
.shelf .sp em{font:700 9.5px var(--mono);letter-spacing:.05em;font-style:normal;padding-bottom:6px;
color:var(--brown-mid);white-space:nowrap}
.shelf .sp.done{background:var(--go-bg);height:60%} .shelf .sp.done em{color:var(--go)}
.shelf .sp.now{background:var(--kraft);height:100%;box-shadow:0 0 0 1px var(--navy)}
.shelf .sp.now em{color:var(--navy);font-weight:700}
.shelf .sp.todo{height:40%;background:var(--paper)}
/* ═══ VERDICT — the stamped result ═══════════════════════════════════ */
.outcome,.verdict{font-family:var(--disp);font-weight:900;font-size:20px;letter-spacing:.02em;
text-transform:uppercase;border:3px solid currentColor;border-radius:4px;padding:8px 16px;
display:inline-block;transform:rotate(-1.6deg);transition:all var(--dur) var(--ease)}
.v-idle{color:var(--ink-3);border-style:dashed;font-size:14px;font-weight:700;
letter-spacing:.06em;transform:none}
.v-go,.outcome-go{color:var(--go);background:var(--go-bg)}
.v-hold,.outcome-ask{color:var(--hold);background:var(--hold-bg)}
.v-stop,.outcome-skip{color:var(--stop);background:var(--stop-bg)}
.outcome-reason,.why{font-size:14.5px;color:var(--brown-mid);margin-top:var(--s3);line-height:1.5}
/* ═══ PROSE / LESSON BODY ════════════════════════════════════════════ */
.lesson-body,.prose{max-width:var(--measure);font-size:17.5px;line-height:1.7;color:var(--prose)}
.lesson-body h2,.prose h2,.h2-as-h3{font-size:24px;font-weight:800;margin:34px 0 13px;
color:var(--navy);letter-spacing:-.02em}
.lesson-body strong,.prose strong{color:var(--navy);font-weight:700}
.lesson-body ul,.prose ul,.lesson-body ol,.prose ol{padding-left:22px}
.lesson-body li,.prose li{margin-bottom:10px}
/* heading+list group — the Phase 3C scannability fix, restyled */
.lesson-section{border:var(--bw-med) solid var(--line-hard);border-left:6px solid var(--kraft);
border-radius:var(--r);background:var(--paper);padding:18px 20px;margin:20px 0}
.lesson-section > h2:first-child,.lesson-section > .h2-as-h3:first-child{margin-top:0;font-size:19px}
.callout{border:var(--bw-med) solid var(--kraft-deep);background:var(--kraft-pale);
border-radius:var(--r);padding:16px 19px;margin:24px 0;font-size:16px}
.callout-info{border-color:var(--kraft-deep);background:var(--kraft-pale)}
.callout-tip{border-color:var(--go);background:var(--go-bg)}
.callout-warning{border-color:var(--stop);background:var(--stop-bg)}
.example{border:var(--bw-med) dashed var(--line-hard);background:var(--cream-2);
border-radius:var(--r);padding:18px 20px;margin:24px 0}
.example h4,.example .example-title{font-size:17px;font-weight:800;margin:0 0 8px}
.example p{font-size:16px;color:var(--brown-mid);margin:0}
.action-box{background:var(--navy);border-radius:var(--r-lg);padding:18px 22px;margin-top:var(--s6);
display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--cream)}
.action-box h3,.action-box h4{color:var(--cream);font-family:var(--disp);font-size:18px;font-weight:800}
.action-box .eyebrow{color:var(--kraft-lit)}
/* ═══ FORMS ══════════════════════════════════════════════════════════ */
.field{margin-bottom:var(--s4)}
.field label,.field-legend,.label{display:block;font:700 12px var(--mono);letter-spacing:.11em;
text-transform:uppercase;color:var(--kraft-2);margin-bottom:6px}
.field .help,.help,.tool-help{font:400 14.5px var(--body);color:var(--ink-3);
text-transform:none;letter-spacing:0;display:block;margin-top:4px}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
font-family:var(--body);font-weight:600;font-size:16px;padding:12px 14px;min-height:var(--ctrl);
width:100%;border:var(--bw-med) solid var(--navy);border-radius:var(--r);background:var(--paper);
color:var(--navy);transition:all var(--dur)}
input[type=number]{font-family:var(--mono);font-weight:700;text-align:right}
input:hover,select:hover{background:var(--cream-2)}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;box-shadow:0 0 0 3px var(--kraft-lit)}
/* Disabled / prefilled: the value is real but not editable here. */
input:disabled,select:disabled,textarea:disabled{background:var(--cream-2);color:var(--ink-3);
border-color:var(--line-hard);cursor:not-allowed;box-shadow:none}
input[aria-invalid="true"]{border-color:var(--stop);background:var(--stop-bg)}
.error{color:var(--stop);font:700 14.5px var(--body);margin-top:6px;display:flex;gap:7px;align-items:flex-start}
.error::before{content:'!';font-family:var(--mono);font-weight:700;width:19px;height:19px;flex:none;
border:2px solid var(--stop);border-radius:50%;display:grid;place-items:center;font-size:12px}
.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:var(--s5) 0}
/* ═══ TABLES — data first, brand only at the edges ═══════════════════ */
.tbl-wrap{overflow-x:auto;border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);
background:var(--paper);-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
table.tbl th{text-align:left;font:700 10.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;
color:var(--cream);padding:13px 15px;background:var(--navy);white-space:nowrap}
table.tbl td{padding:14px 15px;border-bottom:var(--bw-light) solid var(--line);vertical-align:top;color:var(--prose)}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--cream-2)}
table.tbl td.name{font-weight:700;color:var(--navy);white-space:nowrap}
table.tbl td:last-child{white-space:nowrap}
/* ═══ SYNC STATE ════════════════════════════════════════════════════════
Sits above , inside the page rhythm rather than floating over it:
a sync problem is information, not an alarm, and a toast that disappears
is the wrong shape for something the customer may want to act on later. */
.syncbar{padding:var(--s4) var(--s5) 0;max-width:1180px;margin:0 auto}
.syncbar .state-panel{align-items:center}
.syncbar-actions{margin-top:var(--s3)}
.syncbar-ok{padding:var(--s3) var(--s5);max-width:1180px;margin:var(--s4) auto 0;
border:var(--bw-med) solid var(--go);border-radius:var(--r-lg);background:var(--go-bg);
color:var(--go);font-family:var(--disp);font-weight:700;font-size:15px}
/* The topbar chip. Terse by design — the sentence lives in the banner. */
.topbar-status.sync-offline,.topbar-status.sync-error{color:var(--stop)}
.topbar-status.sync-signed-out{color:var(--stop)}
.topbar-status.sync-synced{color:var(--go)}
.topbar-status.sync-syncing,.topbar-status.sync-local{color:var(--ink-3)}
@media (max-width:720px){
.syncbar{padding:var(--s3) var(--s4) 0}
.syncbar .state-panel{align-items:flex-start;gap:var(--s3);padding:var(--s4)}
/* On a phone the chip would crowd the wordmark; the banner still tells
the whole story, so the chip is the part that gives way. */
.topbar-status{display:none}
}
/* A card's opening line. Carries the visual weight a heading would, without
claiming to be one: these are sentences of instruction, and marking them up
as headings turned every card into a navigation landmark. */
.card-lead{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.2;
letter-spacing:-.015em;color:var(--navy);margin:0 0 var(--s3)}
/* A section heading inside a screen, kept smaller than a page-level h2 so
correct document structure does not force oversized type. */
.sec-head{font-size:20px}
/* ═══ STATE SURFACES — loading / empty / error / offline ═════════════ */
.empty-state{border:var(--bw-med) dashed var(--line-hard);border-radius:var(--r-lg);
background:var(--cream-2);padding:var(--s6);text-align:center;color:var(--brown-mid);font-size:16.5px}
.empty-state strong{display:block;font-family:var(--disp);font-size:19px;font-weight:800;
color:var(--navy);margin-bottom:var(--s2)}
.state-panel{border:var(--bw-med) solid var(--navy);border-radius:var(--r-lg);background:var(--paper);
padding:var(--s5);display:flex;gap:var(--s4);align-items:flex-start;box-shadow:var(--sh-2)}
.state-panel .icon{width:44px;height:44px;border-radius:var(--r);flex:none;display:grid;place-items:center;
border:var(--bw-med) solid var(--navy);background:var(--cream-2)}
.state-panel h3{font-size:18px;margin-bottom:6px}
.state-panel p{font-size:15.5px;color:var(--brown-mid);margin:0}
.state-error{border-color:var(--stop);background:var(--stop-bg)}
.state-error .icon{border-color:var(--stop);background:var(--paper);color:var(--stop)}
.state-offline{border-color:var(--hold);background:var(--hold-bg)}
.state-offline .icon{border-color:var(--hold);background:var(--paper);color:var(--hold)}
/* loading — a filling kraft bar, not a spinner */
.loading{border:var(--bw-med) solid var(--line-hard);border-radius:var(--r);background:var(--cream-2);
height:12px;overflow:hidden;position:relative}
.loading::after{content:'';position:absolute;inset:0;width:40%;background:var(--kraft);
animation:bcload 1.1s var(--ease) infinite}
@keyframes bcload{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.skeleton{background:var(--cream-2);border:var(--bw-light) solid var(--line);border-radius:var(--r);
height:1em;animation:bcpulse 1.4s ease-in-out infinite}
@keyframes bcpulse{0%,100%{opacity:1}50%{opacity:.55}}
/* ═══ LOGO — context-sensitive sizing, never distorted ═══════════════ */
.brand{display:inline-flex;align-items:center;text-decoration:none;gap:12px;
min-height:var(--tap)} /* it is a link home, so it is a touch target */
.brand img{width:auto;display:block;height:auto}
/* object-fit safety: any logo given a fixed box keeps its proportions rather
than being stretched to fill it. The artwork is approved and must not be
distorted by a layout decision. */
img.mk,img.word,img.logo,.logo img{object-fit:contain}
/* Hidden beside the full logo: the lockup already carries the name, and a
second piece of lettering next to it makes the brand read as two things. */
.brand:has(img.logo) .tag{display:none}
.brand .tag{font:700 9px var(--mono);letter-spacing:.16em;color:var(--kraft-2);
text-transform:uppercase;padding-left:12px;border-left:var(--bw-med) solid var(--line-hard)}
/* The approved logo is an illustrated lockup -- lettering above a book stack
and a cardboard box -- not a wordmark. It needs vertical room to read as a
brand rather than a decoration, so these heights are set on the whole
composition and the width follows the artwork ratio (1272x678). */
.brand img.logo{height:78px;width:auto;object-fit:contain}
.brand-lg img.logo{height:78px} /* marketing header */
.brand-app img.logo{height:54px} /* product chrome */
.brand-sm img.logo{height:44px}
.brand-lg img.word{height:44px} /* marketing header */
.brand-app img.word{height:34px} /* product chrome */
.brand-sm img.word{height:28px}
.brand img.mk{height:34px;border-radius:4px}
@media(max-width:760px){
.grid-2,.grid-3{grid-template-columns:1fr}
.brand .tag{display:none}
.brand-lg img.word{height:34px} .brand-app img.word{height:28px}
.brand img.logo,.brand-lg img.logo{height:54px} .brand-app img.logo{height:44px}
.shelf{height:58px} .shelf .sp em{font-size:8px}
body{font-size:16.5px}
h1{font-size:clamp(26px,7vw,34px)}
}
/* ═══ SPACING RHYTHM ═════════════════════════════════════════════════
Three relationships that were being set ad hoc, or not at all. Stated once
here so every surface inherits the same rhythm. */
/* A heading and the paragraph it belongs to were touching at 0px in the
course cards and the final CTA. */
h1 + p, h2 + p, h3 + p, h4 + p,
h1 + ul, h2 + ul, h3 + ul{margin-top:var(--space-close)}
/* Text following an image needs deliberate room, or the page reads as
unfinished exactly where a photograph hands over to words. */
figure img + figcaption,
figure picture + figcaption{margin-top:var(--space-relaxed)}