/* ==========================================================================
   Learning Lab — design system

   Built for a Grade 6 reader with ADHD. Every rule below is in service of
   three things: short line length, low visual noise, and one idea on screen
   at a time. See docs/WRITING-FOR-ADHD.md for the reasoning.
   ========================================================================== */

/* ---------- Tokens: light is the base, dark overrides ---------- */
:root {
    /* Warm off-white rather than pure white: less glare over long reading. */
    --ground:      #FBF8F3;
    --surface:     #FFFFFF;
    --surface-2:   #F3EFE8;
    --ink:         #23222A;   /* not pure black — softer edge, less fatigue */
    --ink-soft:    #57545F;
    --ink-faint:   #86828F;
    --line:        #E3DDD3;
    --line-strong: #CFC7B9;

    /* One accent carries every action and all progress. */
    --accent:      #C2761A;
    --accent-ink:  #FFFFFF;
    --accent-soft: #FBEEDC;

    /* Semantic. Note there is no red: see the "correct / not yet" note below. */
    --yes:         #2E7D4F;
    --yes-soft:    #E4F2E9;
    --notyet:      #4A6FA5;
    --notyet-soft: #E7EDF6;

    /* Interest lenses. Desaturated so they mark a section without shouting. */
    --lens-car:    #2F7A8C;
    --lens-box:    #A8446B;
    --lens-body:   #9A6B12;
    --lens-game:   #5B4BB8;

    /* Reading measure. The single most important number in this file. */
    --measure: 53ch;

    /* Driven by the Aa control; multiplies every type size. */
    --scale: 1;

    --r:    14px;
    --r-sm: 9px;

    --font-body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-ui:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* System dark, unless the reader explicitly chose light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:      #16161D;   /* soft charcoal, never #000 — pure black
                                     haloes light text and slows reading */
        --surface:     #1E1E27;
        --surface-2:   #262631;
        --ink:         #E4E2E9;   /* off-white, not #FFF, for the same reason */
        --ink-soft:    #A8A5B2;
        --ink-faint:   #7C7987;
        --line:        #32323E;
        --line-strong: #454554;

        --accent:      #F0B44C;
        --accent-ink:  #1A1A22;
        --accent-soft: #33291A;

        --yes:         #6BD39A;
        --yes-soft:    #17301F;
        --notyet:      #8FB4E8;
        --notyet-soft: #1B2432;

        --lens-car:    #5EC5D6;
        --lens-box:    #F58BB0;
        --lens-body:   #F0C060;
        --lens-game:   #A99BF0;
    }
}

/* Explicit dark choice wins over a light OS. */
:root[data-theme="dark"] {
    --ground:      #16161D;
    --surface:     #1E1E27;
    --surface-2:   #262631;
    --ink:         #E4E2E9;
    --ink-soft:    #A8A5B2;
    --ink-faint:   #7C7987;
    --line:        #32323E;
    --line-strong: #454554;

    --accent:      #F0B44C;
    --accent-ink:  #1A1A22;
    --accent-soft: #33291A;

    --yes:         #6BD39A;
    --yes-soft:    #17301F;
    --notyet:      #8FB4E8;
    --notyet-soft: #1B2432;

    --lens-car:    #5EC5D6;
    --lens-box:    #F58BB0;
    --lens-body:   #F0C060;
    --lens-game:   #A99BF0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--ground);
    color: var(--ink);
    min-height: 100vh;
    overflow-x: hidden;
    font-size: calc(18px * var(--scale));
    line-height: 1.7;
    letter-spacing: 0.01em;
}

/* No ambient motion anywhere. Background animation is a permanent, low-grade
   attention tax for a reader who is already fighting for focus. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Layout ---------- */
.page {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}

/* Anything containing prose is capped at the reading measure. */
.measure { max-width: var(--measure); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
}
.site-header-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: calc(15px * var(--scale));
    color: var(--ink);
    text-decoration: none;
}
.brand-mark {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 15px;
}
.header-spacer { flex: 1; }

/* ---------- Typography ---------- */
h1, h2, h3, .ui { font-family: var(--font-ui); }

h1 {
    font-size: calc(30px * var(--scale));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h2 {
    font-size: calc(23px * var(--scale));
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h3 {
    font-size: calc(17px * var(--scale));
    font-weight: 700;
    line-height: 1.35;
}

p { max-width: var(--measure); }
p + p { margin-top: 0.9em; }

.eyebrow {
    font-family: var(--font-ui);
    font-size: calc(11px * var(--scale));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.lede {
    font-size: calc(19px * var(--scale));
    color: var(--ink-soft);
    max-width: var(--measure);
}
.muted { color: var(--ink-soft); }
.small { font-size: calc(15px * var(--scale)); }

.section-title {
    font-family: var(--font-ui);
    font-size: calc(12px * var(--scale));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 12px;
}

strong { font-weight: 700; color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    min-height: 48px;              /* comfortable touch target */
    border: 1.5px solid var(--line-strong);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: calc(16px * var(--scale));
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn.wide { width: 100%; }
.btn.sm { padding: 8px 14px; min-height: 38px; font-size: calc(14px * var(--scale)); }
.btn.icon { padding: 8px 12px; min-height: 40px; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   THE CARD DECK — the core of the lesson experience.
   One idea on screen. Never a scroll bar that says "you have 3000px to go".
   ========================================================================== */

.deck { margin-top: 18px; }

/* Once the deck starts, the lesson's title block shrinks out of the way so
   the card is the first thing on screen, phone included. */
.lesson-head.compact h1,
.lesson-head.compact .lede,
.lesson-head.compact .eyebrow { display: none; }
.lesson-head.compact { margin-bottom: 4px; }

.deck-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.deck-steps {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
/* One continuous bar, not one sliver per card. At 40+ cards a segmented bar
   stops reading as progress and starts reading as noise. */
.deck-steps > i {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width .25s ease-out;
}
.deck-count {
    font-family: var(--font-ui);
    font-size: calc(13px * var(--scale));
    font-weight: 700;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px 24px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card.enter { animation: cardIn .22s ease-out; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.card-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.card-eyebrow .ico { font-size: 20px; line-height: 1; }
.card h2 { margin-bottom: 12px; }
.card p  { color: var(--ink-soft); }

/* Interest-lens cards carry a colour bar so the reader can feel the shift
   into "this is the car bit" without reading a word. */
.card.lens { border-left: 4px solid var(--lens, var(--accent)); }
.card.lens .card-eyebrow .eyebrow { color: var(--lens, var(--accent)); }
.card[data-lens="cars"]   { --lens: var(--lens-car); }
.card[data-lens="boxing"] { --lens: var(--lens-box); }
.card[data-lens="growth"] { --lens: var(--lens-body); }
.card[data-lens="gaming"] { --lens: var(--lens-game); }

/* Points: at most four, each one line of thought. */
.points { list-style: none; display: grid; gap: 12px; margin-top: 14px; max-width: var(--measure); }
.points li {
    position: relative;
    padding-left: 24px;
    color: var(--ink-soft);
}
.points li::before {
    content: '';
    position: absolute;
    left: 6px; top: 0.62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lens, var(--accent));
}

.card.fact {
    background: var(--accent-soft);
    border-color: transparent;
}
.card.fact .card-eyebrow .eyebrow { color: var(--accent); }

.deck-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.deck-nav .btn { flex: 0 0 auto; }
.deck-nav .btn.primary { flex: 1; }

.deck-hint {
    text-align: center;
    font-size: calc(13px * var(--scale));
    color: var(--ink-faint);
    margin-top: 12px;
}

/* ---------- Checkpoint (mid-lesson retrieval) ---------- */
.card.checkpoint { border: 2px solid var(--accent); }

/* Real people, treated differently from explanation cards. */
.card.story {
    border-left: 4px solid var(--yes);
    background: var(--surface);
}
.card.story .card-eyebrow .eyebrow { color: var(--yes); }
.card.story { --lens: var(--yes); }

/* An offered stopping point, not a failure state — so it looks calm. */
.card.break {
    background: var(--surface-2);
    border-style: dashed;
    min-height: 180px;
    text-align: center;
}
.card.break .card-eyebrow { justify-content: center; }

/* ---------- Terms ---------- */
.terms { display: grid; gap: 10px; margin-top: 6px; }
.term {
    padding: 12px 14px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
}
.term dt {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: calc(15px * var(--scale));
    color: var(--ink);
    margin-bottom: 2px;
}
.term dd { color: var(--ink-soft); font-size: calc(16px * var(--scale)); }

/* ---------- Skeleton ---------- */
.skel {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 6px;
}
.skel-stage {
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 10px;
}
.skel-stage svg { width: 100%; height: auto; display: block; }
.bone {
    fill: var(--bone-fill, #DCD8D0);
    stroke: var(--bone-stroke, #B0AAA0);
    stroke-width: 1;
    cursor: pointer;
    transition: fill .15s;
}
:root[data-theme="dark"] { --bone-fill: #C8C4CE; --bone-stroke: #8A8695; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bone-fill: #C8C4CE; --bone-stroke: #8A8695; }
}
.bone:hover  { fill: var(--accent); }
.bone.active { fill: var(--accent); }
.hitlayer rect { cursor: pointer; }
.bone:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.bone-info { min-height: 150px; }
.bone-info .placeholder { color: var(--ink-faint); font-size: calc(16px * var(--scale)); }
.bone-info h3 { margin-bottom: 10px; }
.bone-fact { display: flex; gap: 9px; color: var(--ink-soft); font-size: calc(16px * var(--scale)); }
.bone-fact + .bone-fact { margin-top: 10px; }
.bone-fact .ico { flex: 0 0 auto; }

@media (max-width: 560px) {
    .skel { grid-template-columns: 1fr; }
    .skel-stage { max-width: 190px; margin: 0 auto; }
}

/* ---------- Quiz ---------- */
.options { display: grid; gap: 10px; margin-top: 4px; max-width: var(--measure); }
.option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 17px;
    min-height: 52px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: 11px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: calc(17px * var(--scale));
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s;
}
.option:hover:not(:disabled) { border-color: var(--accent); }
.option:disabled { cursor: default; }
.option .key {
    flex: 0 0 28px;
    height: 28px;
    display: grid; place-items: center;
    border-radius: 7px;
    background: var(--surface);
    font-family: var(--font-ui);
    font-size: calc(13px * var(--scale));
    font-weight: 800;
    color: var(--ink-faint);
}
.option.yes    { border-color: var(--yes); background: var(--yes-soft); }
.option.yes .key    { background: var(--yes); color: var(--surface); }
.option.notyet { border-color: var(--notyet); background: var(--notyet-soft); }
.option.notyet .key { background: var(--notyet); color: var(--surface); }

.text-input {
    width: 100%;
    max-width: var(--measure);
    padding: 15px 17px;
    background: var(--surface-2);
    border: 1.5px solid var(--line-strong);
    border-radius: 11px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: calc(17px * var(--scale));
}
.text-input:focus { outline: none; border-color: var(--accent); }

.feedback {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: var(--r-sm);
    font-size: calc(16px * var(--scale));
    max-width: var(--measure);
}
.feedback.yes    { background: var(--yes-soft); }
.feedback.notyet { background: var(--notyet-soft); }
.feedback b {
    font-family: var(--font-ui);
    display: block;
    margin-bottom: 6px;
    font-size: calc(16px * var(--scale));
}

.sortable { display: grid; gap: 9px; max-width: var(--measure); }
.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: 11px;
    font-size: calc(16px * var(--scale));
}
.sort-item .grip {
    font-family: var(--font-ui);
    font-weight: 800;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    flex: 0 0 18px;
}
.sort-item .label { flex: 1; }
.sort-item.yes    { border-color: var(--yes); }
.sort-item.notyet { border-color: var(--notyet); }

/* ---------- Results ---------- */
.results { text-align: center; padding: 20px 0; }
.results .score {
    font-family: var(--font-ui);
    font-size: calc(52px * var(--scale));
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.results .score-label { color: var(--ink-soft); margin-top: 8px; }
.results .msg { font-family: var(--font-ui); font-weight: 700; font-size: calc(19px * var(--scale)); margin: 18px 0 6px; }

/* ---------- Catalogue / weeks ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
}
.subject {
    display: block;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--sub, var(--accent));
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s;
}
.subject:hover { border-color: var(--accent); border-left-color: var(--sub, var(--accent)); }
.subject .ico { font-size: 26px; display: block; margin-bottom: 10px; }
.subject h3 { margin-bottom: 4px; }
.subject p { font-size: calc(15px * var(--scale)); color: var(--ink-soft); }

.chip {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: calc(12px * var(--scale));
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink-soft);
    border: none;
}
.chip.ready { background: var(--yes-soft); color: var(--yes); }

.stack { display: grid; gap: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.center { text-align: center; }
.hidden { display: none !important; }

.week {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
}
.week:hover { border-color: var(--accent); }
.week.locked { opacity: .5; pointer-events: none; }
.week-num {
    flex: 0 0 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--surface-2);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: calc(13px * var(--scale));
    color: var(--ink-soft);
}
.week.done .week-num { background: var(--yes); color: var(--surface); }
.week .meta { flex: 1; min-width: 0; }
.week h3 { font-size: calc(16px * var(--scale)); margin-bottom: 2px; }
.week p { font-size: calc(14px * var(--scale)); color: var(--ink-soft); }

.pbar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

.crumb {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: calc(14px * var(--scale));
    font-weight: 700;
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 14px;
}
.crumb:hover { color: var(--accent); }

/* ---------- Reading controls ---------- */
.reading-menu {
    position: absolute;
    right: 20px;
    top: 54px;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 14px;
    width: 230px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.reading-menu .section-title { margin-bottom: 8px; }
.reading-menu .row { margin-bottom: 14px; }
.reading-menu .row:last-child { margin-bottom: 0; }
.seg { display: flex; gap: 4px; width: 100%; }
.seg button {
    flex: 1;
    padding: 9px 4px;
    min-height: 40px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: calc(13px * var(--scale));
    border-radius: 8px;
    cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Teacher key (print-first) ---------- */
.tkey { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; background: var(--surface); }
.tkey + .tkey { margin-top: 10px; }
.tkey-meta {
    font-family: var(--font-ui);
    font-size: calc(11px * var(--scale));
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-faint);
    font-weight: 800;
    margin-bottom: 7px;
}
.tkey-q { font-weight: 700; margin-bottom: 9px; }
.tkey-a { color: var(--yes); font-weight: 700; margin-bottom: 7px; font-family: var(--font-ui); }
.tkey-why { color: var(--ink-soft); font-size: calc(16px * var(--scale)); }

@media print {
    :root { --ground:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --ink-soft:#333; --line:#ccc; --yes:#0a6b35; }
    .site-header, .no-print { display: none !important; }
    .page { padding: 0; max-width: none; }
    .tkey, .card { break-inside: avoid; }
}

/* ==========================================================================
   FIGURES — hand-drawn SVG diagrams. Everything inherits theme tokens, so a
   figure is legible in light and dark without a second drawing.
   ========================================================================== */
.figure { margin-top: 14px; }
.figure svg { width: 100%; height: auto; display: block; overflow: visible; }

.fig-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    fill: var(--ink-faint);
}
.fig-note      { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-soft); }
.fig-note-key  { fill: var(--ink); font-weight: 700; }
.fig-note-soft { fill: var(--notyet); font-weight: 700; }
.fig-note-rigid{ fill: var(--accent); font-weight: 700; }
.fig-big       { font-family: var(--font-ui); font-size: 26px; font-weight: 800; fill: var(--accent); }
.fig-step      { font-family: var(--font-ui); font-size: 11px; font-weight: 700; fill: var(--ink-soft); }

/* Rigid things take the accent; things that deform take the calm blue.
   Same two colours as "got it"/"not yet", used for the same reason: they
   already mean something to the reader. */
.fig-rigid      { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.fig-soft       { fill: none; stroke: var(--notyet); stroke-width: 2.5; stroke-linecap: round; }
.fig-soft-fill  { fill: var(--notyet); opacity: .1; stroke: none; }
.fig-wheel      { fill: none; stroke: var(--ink-faint); stroke-width: 2.5; }
.fig-rule       { stroke: var(--line); stroke-width: 1; }

.fig-tissue { fill: var(--surface-2); stroke: var(--ink-faint); stroke-width: 1.5; }
.fig-stripe { stroke: var(--ink-faint); stroke-width: 1; opacity: .55; }
.fig-disc   { stroke: var(--accent); stroke-width: 3; }
.fig-nuc    { fill: var(--ink-soft); }

.fig-bone       { fill: var(--surface-2); stroke: var(--ink-faint); stroke-width: 1.5; }
.fig-joint      { fill: var(--surface); stroke: var(--ink-faint); stroke-width: 2; }
.fig-bone-outer { fill: var(--surface-2); }
.fig-bone-ring  { fill: none; stroke: var(--ink-faint); stroke-width: 3; }
.fig-strut      { stroke: var(--accent); stroke-linecap: round; transition: stroke-width .25s, opacity .25s; }

.fig-muscle {
    fill: var(--ink-faint);
    opacity: .35;
    transition: fill .25s, opacity .25s;
}
.fig-muscle.pulling { fill: var(--accent); opacity: 1; }
#apForearm { transition: transform .45s cubic-bezier(.3,.7,.3,1); }

.fig-chip   { fill: var(--surface-2); }
.fig-chip-t { font-family: var(--font-ui); font-size: 13px; font-weight: 800; fill: var(--ink); }
.fig-chip-s { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-soft); }

.fig-chain { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.fig-node  { fill: var(--accent); }

.fig-action { margin-top: 14px; }

.fig-control { margin-top: 16px; }
.fig-control-label {
    display: block;
    font-family: var(--font-ui);
    font-size: calc(13px * var(--scale));
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.fig-control input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    height: 30px;
}
.fig-control-ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-ui);
    font-size: calc(12px * var(--scale));
    color: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
    #apForearm, .fig-strut, .fig-muscle { transition: none; }
}

/* ---------- Photographs and video ---------- */
.card-media {
    margin-top: 14px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
}
.card-media img { width: 100%; height: auto; display: block; }
.media-credit {
    font-family: var(--font-ui);
    font-size: calc(12px * var(--scale));
    color: var(--ink-faint);
    margin-top: 7px;
}
.media-credit a { color: var(--ink-soft); }

.video-frame {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface-2);
    margin-top: 14px;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Maths + hand figures ---------- */
.fig-tile {
    fill: var(--accent);
    fill-opacity: .16;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.fig-tile-alt { fill: var(--notyet); fill-opacity: .2; stroke: var(--notyet); }
.fig-gap    { fill: var(--notyet); fill-opacity: .3; stroke: var(--notyet); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fig-vertex { fill: var(--ink); }
.fig-big-no { fill: var(--notyet); }
.fig-note-dim { fill: var(--ink-faint); font-size: 10px; }

.fig-hbone {
    stroke: var(--ink-faint);
    stroke-linecap: round;
    opacity: .55;
    transition: stroke .2s, opacity .2s;
}
.fig-hbone.load { stroke: var(--accent); opacity: 1; }
.fig-hbone.risk { stroke: var(--notyet); opacity: 1; }
.fig-carpal { fill: var(--surface-2); stroke: var(--ink-faint); stroke-width: 1.5; }
.fig-force  { stroke: var(--ink); fill: var(--ink); stroke-width: 2; opacity: .75; }

/* A row of shape buttons under an interactive figure. */
.fig-switch { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 14px; }
.fig-switch button {
    flex: 1 1 auto;
    min-height: 42px;
    padding: 8px 10px;
    border: 1.5px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: calc(13px * var(--scale));
    border-radius: 9px;
    cursor: pointer;
}
.fig-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Skull / brain figure ---------- */
.fig-skullwall { fill: var(--surface-2); stroke: var(--ink-faint); stroke-width: 2.5; stroke-linejoin: round; }
.fig-brain      { fill: var(--accent); fill-opacity: .3; stroke: var(--accent); stroke-width: 2; }
.fig-brain-fold { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .8; }
.fig-jaw        { fill: none; stroke: var(--ink-faint); stroke-width: 6; stroke-linecap: round; }
#brHead, #brBrain, #brFist { transition: transform .26s cubic-bezier(.3,.8,.4,1); }
@media (prefers-reduced-motion: reduce) { #brHead, #brBrain, #brFist { transition: none; } }

/* ---------- Sign-in flow ---------- */
/* Two named steps, so it's always obvious where you are and what's left. */
.signin-steps {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}
.signin-step {
    font-family: var(--font-ui);
    font-size: calc(12px * var(--scale));
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-faint);
}
.signin-step.now  { background: var(--accent); color: var(--accent-ink); }
.signin-step.done { background: var(--yes-soft); color: var(--yes); }

.signin-help {
    max-width: var(--measure);
    margin: 0 auto 22px;
    padding-left: 22px;
    color: var(--ink-soft);
    font-size: calc(16px * var(--scale));
}
.signin-help li + li { margin-top: 6px; }
.signin-help code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: .92em;
}