/* a11y.css (D3): accessibility fixes that need only CSS, plus the few styles of the learner privacy page.
 * Loaded LAST on learner and builder pages (integration: server.mjs head() appends it after every other stylesheet), so these rules
 * win ties without !important except where an inline-free override of a component rule needs it.
 * Every rule names the finding it fixes (A11Y-nn, with the value measured before the fix).
 */

/* ── the privacy page ("How AI is used in this course") ─────────────────────────────────────────── */
.privacy-page .pv-main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.privacy-page h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 18px 0 8px; }
.privacy-page h2 { font-size: 1.3rem; margin: 36px 0 10px; }
.privacy-page h3 { font-size: 1.1rem; margin: 0 0 6px; }
.privacy-page .pv-lede { color: var(--ink); max-width: 64ch; }
.privacy-page .pv-cap { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; margin: 14px 0; }
.privacy-page .pv-where { font-size: .92rem; color: var(--ink); }
.privacy-page .pv-route { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.privacy-page .pv-route dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: 6px 16px; margin: 0; }
.privacy-page .pv-route dt { font-weight: 700; }
.privacy-page .pv-route dd { margin: 0; overflow-wrap: anywhere; }
.privacy-page .pv-tag { display: inline-block; font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; margin-left: 6px; }
.privacy-page .pv-also { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); border-radius: 10px; padding: 8px 12px; }
.privacy-page .pv-note { max-width: 64ch; }
@media (max-width: 520px) { .privacy-page .pv-route dl { grid-template-columns: 1fr; } .privacy-page .pv-route dd { margin-bottom: 6px; } }

/* ── builder: text contrast (WCAG 1.4.3) ─────────────────────────────────────────────────────────── */
/* A11Y-01: the "+ Add block" slots sat at opacity .45 (builder.css:134), so their label measured about 1.9:1. */
.insert-btn { opacity: 1; }
/* A11Y-02: the plus disc's "+" measured 4.4:1 on the accent (builder.css:137, --ink-on-accent). */
.insert-plus { color: color-mix(in oklab, var(--accent) 10%, #120600); }
/* A11Y-03: a block's tools (Preview, Map, Test, arrows) rested at opacity .5 (builder.css:146), about 3.2:1. */
.eblock-tools { opacity: 1; }
/* A11Y-04: the delete cross (builder.css:30) measured 2.1:1 at rest and about 4:1 in full. A deeper red keeps the meaning. */
.icon-danger { color: color-mix(in oklab, #B3261E 88%, var(--ink)); }
html[data-mode="dark"] .icon-danger { color: color-mix(in oklab, #FF8A80 80%, var(--ink)); }
/* A11Y-05: white on the ending badge's green (builder.css:538) measured 3.2:1. */
.sca-badge-end { background: radial-gradient(130% 160% at 28% 12%, #3A8660, #22683F 55%, #184D30); }
/* A11Y-06: the map's "Worth a look" label measured 4.40:1 on the rendered background; a slightly deeper amber reaches 4.5:1. */
.map-finding-level { color: color-mix(in oklab, var(--warn) 82%, var(--ink)); }
.map-finding.is-error .map-finding-level { color: var(--err); }