/**
* HAM — own-track template styles (lesson renderer + checkpoint, V11 task #4).
*
* Lives outside app/static/vendor/ deliberately: this file is HAM-authored,
* not part of the inherited/SHA-256-pinned Donkey Factory design layer (see
* repo CLAUDE.md "D2 — Extract the design layer" + VENDOR-MANIFEST.json).
* Every rule below consumes design-system tokens (var(--*) from
* vendor/css/styles.css) — no hardcoded color literals, per CLAUDE.md
* "Do NOT hand-pick additional colors. ONE color only, the OKLCH engine
* derives the rest."
*/
/* ── Token aliases (HAM-owned) ───────────────────────────────────────────── */
/* --bg2 is consumed by the vendored `.wt-confirm-pending` rule (a
destructive-action two-step confirm state -- danger outline + a
danger-tinted background, applied by `wtConfirm()` in app.js) at
styles.css:1141 and :1157, but no canonical v7 token by that name has ever
been declared in the vendored file: `grep -c -- "--bg2:"
app/static/vendor/css/styles.css` returns 0 -- in no theme block, with no
fallback on either `var()` call. The comment directly above that rule
(styles.css:1062-1066) claims both it and the empty-state vignette rules
were "rewritten to the canonical v7 token names" -- true for the vignette,
false for this one property. That comment is left exactly as it is: it
lives inside the SHA-256-pinned vendor file (repo CLAUDE.md D2/D8), and
fixing it is a deliberate re-vendor event, not a side effect of this file.
Currently DORMANT: no HAM template or JS references `.wt-confirm-pending`
or `wtConfirm()` (verified -- `grep -rn "wt-confirm-pending|wtConfirm"`
across app/templates and app/static/js turns up zero HAM hits), so this
alias changes nothing visible today. It must resolve correctly BEFORE that
rule is ever wired up, though, or the confirm-pending background will
silently fall back to no tint at all (the exact fail-open class of bug
this repo has been burned by before -- see CLAUDE.md "a check is not
trusted until it has been watched to fail").
Alias target: --bg, not a --surface-* tier. Two independent lines of
evidence:
1. Naming pattern -- the legacy v6->v7 shim (removed from HAM's vendored
copy, still present upstream -- see point 2) mapped --pg ("page"
background) -> --bg, and --s1/--s2/--s3 (surface tiers) ->
--surface-mute/--surface/--surface-mute. --bg2 belongs to the "--bg"
family by name, not the "--sN" family -- it reads as a second
page-background variant, not a third surface tier.
2. Direct upstream precedent, not just inference -- the CURRENT (not
yet re-vendored) ~/donkeys/factory-core/templates/frontend/css/
styles.css hit this exact same dangling `var(--bg2)` reference in
this exact same `.wt-confirm-pending` rule during its own "task #13"
mobile-polish backport, and resolved it as `--bg2: var(--bg);` (see
that file's "25. Legacy token aliases" section, which explicitly
calls out --bg2 as a "pre-existing dangling ref"). That is upstream's
own answer to the identical question this file is answering.
Rejected: --surface / --surface-raised (no naming-pattern support, and the
`color-mix(danger 14%, ...)` treatment reads as tinting the base canvas,
not an elevated card); a hardcoded color literal (forbidden outright --
CLAUDE.md "Do NOT hand-pick colors. ONE color only, the OKLCH engine
derives the rest").
One :root declaration covers all 4 shipped variants (light, dark,
hc-light, hc-dark): custom properties resolve `var()` at used-value time
against whatever --bg's own final cascaded value is under the currently
active .dark/.hc classes on (styles.css's :root/.dark/.hc.dark/
.hc:not(.dark) blocks, further overridden per-brand by theme-engine.js's
injected OKLCH palette) -- no separate per-theme override of --bg2 itself
is needed. */
:root {
--bg2: var(--bg);
}
/* ── Skip link (keyboard a11y) ──────────────────────────────────────────── */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 0.75rem 1.25rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-weight: 600;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
.ham-shell {
padding-block: 1.5rem 3rem;
padding-inline: 1rem; /* viewport gutter — cards never touch the screen edge */
}
/* The vendored .wt-card primitive ships without padding (upstream pages pad
their own content). Give every card inside the HAM shell breathing room. */
.ham-shell .wt-card {
padding: clamp(1.25rem, 4vw, 2rem);
}
/* ── Lesson blocks ───────────────────────────────────────────────────────── */
.lesson-block__label {
margin: 0;
}
.lesson-block__text {
margin: 0;
/* 16px minimum body text -- repo a11y floor (CLAUDE.md "Accessibility
floor: 16px body min"). 1rem resolves to 16px at the default root
size, and to 18px automatically under .hc (styles.css scales the root
font-size to 112.5% in high-contrast mode). */
font-size: 1rem;
line-height: 1.65;
}
.lesson-block--analogy {
padding: 1.25rem 1.5rem;
}
.lesson-block__cites {
margin: 0;
}
.lesson-block--checkpoint {
padding-top: 0.5rem;
}
/* ── Checkpoint ──────────────────────────────────────────────────────────── */
.checkpoint-question {
padding: 1.25rem 1.5rem;
}
.checkpoint-question--correct {
border-color: var(--success);
}
.checkpoint-question--incorrect {
border-color: var(--danger);
}
/* Legend/fieldset border-intersection fix (reported bug: question stems
"weirdly intersect the container lines" on the checkpoint page).
Browsers give