/* PALETTE:BEGIN GENERATED by scripts/brand/build_palette.py from design-system/palette.json — do not edit by hand. */
:root {
    --tfa-ink: #10233F;
    --tfa-cobalt: #2147D9;
    --tfa-cobalt-deep: #1938AE;
    --tfa-sky: #9DB4FF;
    --tfa-coral: #FF744B;
    --tfa-gold: #FFD66B;
    --tfa-white: #FFFFFF;
    --tfa-ink-50: #F2F5FA;
    --tfa-ink-100: #E3E9F2;
    --tfa-ink-200: #BFCFE6;
    --tfa-ink-300: #9FB2CE;
    --tfa-ink-400: #7590B4;
    --tfa-ink-500: #52709A;
    --tfa-ink-600: #3D5880;
    --tfa-ink-700: #2E4466;
    --tfa-ink-800: #22334E;
    --tfa-ink-900: #18334F;
    --tfa-surface: #F8FAFD;
    --tfa-tint: #EDF2FF;
    --tfa-line: #D7DFEC;
    --tfa-muted: #455570;
    --tfa-pencil: #50617C;
    --tfa-gold-600: #926010;
    --tfa-gold-700: #755010;
    --tfa-success: #15803D;
    --tfa-success-tint: #EEF8F1;
    --tfa-warning: #B45309;
    --tfa-warning-tint: #FEF3E2;
    --tfa-danger: #B91C1C;
    --tfa-danger-tint: #FDECEC;
    --tfa-diagram-red: #C62828;
    --tfa-diagram-blue: #2147D9;
    --tfa-diagram-light-blue: #9DB4FF;
    --tfa-diagram-teal: #0F766E;
    --tfa-diagram-cyan: #0E7490;
    --tfa-diagram-green: #15803D;
    --tfa-diagram-yellow: #FFD66B;
    --tfa-diagram-amber: #B45309;
    --tfa-diagram-orange: #FF744B;
    --tfa-diagram-purple: #6D28D9;
    --tfa-diagram-plum: #9C2E8A;
    --tfa-diagram-pink: #D6337A;
    --tfa-diagram-brown: #8A5A2B;
    --tfa-diagram-red-mid: #F28B82;
    --tfa-diagram-blue-mid: #8FB3E8;
    --tfa-diagram-green-mid: #86C995;
    --tfa-diagram-teal-mid: #6CC5B8;
    --tfa-diagram-purple-mid: #B39DF0;
    --tfa-diagram-pink-mid: #F29BC1;
    --tfa-diagram-brown-mid: #C8A07A;
    --tfa-diagram-red-tint: #FDECEC;
    --tfa-diagram-blue-tint: #E8EEFF;
    --tfa-diagram-teal-tint: #E6F4F1;
    --tfa-diagram-cyan-tint: #E7F1F4;
    --tfa-diagram-plum-tint: #F5EAF3;
    --tfa-diagram-green-tint: #EEF8F1;
    --tfa-diagram-yellow-tint: #FFF4D1;
    --tfa-diagram-amber-tint: #FEF3E2;
    --tfa-diagram-orange-tint: #FFE2C4;
    --tfa-diagram-purple-tint: #F1EBFD;
    --tfa-diagram-pink-tint: #FBE7F0;
    --tfa-diagram-brown-tint: #F3EADF;
    --tfa-chart-1: #E69F00;
    --tfa-chart-2: #56B4E9;
    --tfa-chart-3: #009E73;
    --tfa-chart-4: #F0E442;
    --tfa-chart-5: #0072B2;
    --tfa-chart-6: #D55E00;
    --tfa-chart-7: #CC79A7;
    --tfa-block-blue-face: #8FB3E8;
    --tfa-block-blue-edge: #7896C2;
    --tfa-block-sky-face: #9DB4FF;
    --tfa-block-sky-edge: #7C91DA;
    --tfa-block-coral-face: #FF744B;
    --tfa-block-coral-edge: #E65D34;
    --tfa-block-gold-face: #FFD66B;
    --tfa-block-gold-edge: #B68F10;
    --tfa-block-leaf-face: #86C995;
    --tfa-block-leaf-edge: #61A371;
    --tfa-block-berry-face: #F29BC1;
    --tfa-block-berry-edge: #CE7BA0;
    --tfa-block-sand-face: #C8A07A;
    --tfa-block-sand-edge: #B18A64;
    --tfa-block-stone-face: #BFCFE6;
    --tfa-block-stone-edge: #7590B4;
    --tfa-line-teal: var(--tfa-diagram-teal);
    --tfa-line-cyan: var(--tfa-diagram-cyan);
    --tfa-line-pink: var(--tfa-diagram-pink);
    --tfa-line-purple: var(--tfa-diagram-purple);
    --tfa-line-plum: var(--tfa-diagram-plum);
    --tfa-line-brown: var(--tfa-diagram-brown);
    --tfa-line-slate: var(--tfa-ink-500);
    --tfa-action: var(--tfa-cobalt);
    --tfa-action-hover: var(--tfa-cobalt-deep);
    --tfa-check-correct: var(--tfa-success);
    --tfa-check-correct-tint: var(--tfa-success-tint);
    --tfa-check-retry: var(--tfa-warning);
    --tfa-check-retry-tint: var(--tfa-warning-tint);
    --tfa-diagnostic: var(--tfa-warning);
    --tfa-diagnostic-tint: var(--tfa-warning-tint);
    --tfa-alert: var(--tfa-danger);
    --tfa-alert-tint: var(--tfa-danger-tint);
}
/* PALETTE:END */

/* TOKENS:BEGIN GENERATED by scripts/brand/build_tokens.py from design-system/tokens.json — do not edit by hand. */
:root {
    /* families: maths face, script face, the family, the system */
    --tfa-family-display: 'TFA Maths', 'TFA Scripts', 'Archivo', 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tfa-family-text: 'TFA Maths', 'TFA Scripts', 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tfa-family-early: 'TFA Maths', 'TFA Scripts', 'Andika', 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* type: size, line, tracking (and weight where the step fixes it) */
    --tfa-type-display-size: 72px;
    --tfa-type-display-line: 80px;
    --tfa-type-display-tracking: -0.02em;
    --tfa-type-display-fluid: clamp(44px, calc(33.0435px + 3.0435vw), 72px);
    --tfa-type-display-fluid-line: 1.1;
    --tfa-type-h1-size: 48px;
    --tfa-type-h1-line: 56px;
    --tfa-type-h1-tracking: -0.02em;
    --tfa-type-h2-size: 36px;
    --tfa-type-h2-line: 44px;
    --tfa-type-h2-tracking: -0.015em;
    --tfa-type-h3-size: 28px;
    --tfa-type-h3-line: 36px;
    --tfa-type-h3-tracking: -0.01em;
    --tfa-type-h4-size: 22px;
    --tfa-type-h4-line: 28px;
    --tfa-type-h4-tracking: -0.005em;
    --tfa-type-body-lg-size: 20px;
    --tfa-type-body-lg-line: 32px;
    --tfa-type-body-lg-tracking: 0;
    --tfa-type-body-size: 17px;
    --tfa-type-body-line: 28px;
    --tfa-type-body-tracking: 0;
    --tfa-type-body-sm-size: 15px;
    --tfa-type-body-sm-line: 24px;
    --tfa-type-body-sm-tracking: 0;
    --tfa-type-label-size: 14px;
    --tfa-type-label-line: 20px;
    --tfa-type-label-tracking: 0;
    --tfa-type-label-weight: 600;
    --tfa-type-caption-size: 13px;
    --tfa-type-caption-line: 20px;
    --tfa-type-caption-tracking: 0;
    --tfa-type-minimum: 12px;
    /* space: the 8-point grid */
    --tfa-space-0-5: 4px;
    --tfa-space-1: 8px;
    --tfa-space-2: 16px;
    --tfa-space-3: 24px;
    --tfa-space-4: 32px;
    --tfa-space-5: 40px;
    --tfa-space-6: 48px;
    --tfa-space-7: 56px;
    --tfa-space-8: 64px;
    --tfa-space-10: 80px;
    --tfa-space-12: 96px;
    --tfa-space-16: 128px;
    /* radius */
    --tfa-radius-xs: 4px;
    --tfa-radius-sm: 8px;
    --tfa-radius-md: 12px;
    --tfa-radius-lg: 16px;
    --tfa-radius-xl: 24px;
    --tfa-radius-pill: 999px;
    /* stroke */
    --tfa-stroke-rule: 1px;
    --tfa-stroke-outline: 2px;
    --tfa-stroke-network: 6px;
    --tfa-stroke-focus: 3px;
    --tfa-stroke-focus-offset: 2px;
    /* elevation: float, overlay, the press depth */
    --tfa-shadow-float: 0 1px 2px rgba(16, 35, 63, 0.08), 0 4px 16px rgba(16, 35, 63, 0.12);
    --tfa-shadow-overlay: 0 2px 6px rgba(16, 35, 63, 0.08), 0 16px 48px rgba(16, 35, 63, 0.2);
    --tfa-press-depth: 4px;
    /* motion */
    --tfa-duration-instant: 0ms;
    --tfa-duration-fast: 100ms;
    --tfa-duration-base: 200ms;
    --tfa-duration-slow: 320ms;
    --tfa-duration-hero: 400ms;
    --tfa-duration-reduced: 120ms;
    --tfa-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --tfa-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --tfa-ease-exit: cubic-bezier(0.3, 0, 1, 1);
    --tfa-spring-stiffness: 420;
    --tfa-spring-damping: 30;
    --tfa-spring-mass: 1;
    /* register dials: focus, the default on this host */
    --tfa-reg-body-size: 17px;
    --tfa-reg-body-line: 28px;
    --tfa-reg-target: 48px;
    --tfa-reg-display-wdth: 112;
    --tfa-reg-display-wght: 700;
    --tfa-reg-display-stretch: 112%;
    --tfa-reg-display-variation: "wdth" 112, "wght" 700;
    --tfa-reg-radius: var(--tfa-radius-md);
    --tfa-reg-max-words: 120;
    --tfa-reg-motion: standard;
    --tfa-reg-duration: var(--tfa-duration-base);
    --tfa-reg-duration-max: var(--tfa-duration-slow);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* play: Kindergarten to Year 2 */
[data-register="play"],
.tfa-register-play {
    --tfa-reg-body-size: 24px;
    --tfa-reg-body-line: 36px;
    --tfa-reg-target: 72px;
    --tfa-reg-display-wdth: 125;
    --tfa-reg-display-wght: 800;
    --tfa-reg-display-stretch: 125%;
    --tfa-reg-display-variation: "wdth" 125, "wght" 800;
    --tfa-reg-radius: var(--tfa-radius-xl);
    --tfa-reg-max-words: 40;
    --tfa-reg-motion: spring;
    --tfa-reg-duration: var(--tfa-duration-slow);
    --tfa-reg-duration-max: var(--tfa-duration-hero);
    --tfa-reg-ease: var(--tfa-ease-enter);
    --tfa-reg-text-features: "ss02";
}
/* build: Years 3 to 6 */
[data-register="build"],
.tfa-register-build {
    --tfa-reg-body-size: 20px;
    --tfa-reg-body-line: 32px;
    --tfa-reg-target: 56px;
    --tfa-reg-display-wdth: 112;
    --tfa-reg-display-wght: 750;
    --tfa-reg-display-stretch: 112%;
    --tfa-reg-display-variation: "wdth" 112, "wght" 750;
    --tfa-reg-radius: var(--tfa-radius-lg);
    --tfa-reg-max-words: 90;
    --tfa-reg-motion: standard;
    --tfa-reg-duration: var(--tfa-duration-base);
    --tfa-reg-duration-max: var(--tfa-duration-slow);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* focus: Years 7 to 10 */
[data-register="focus"],
.tfa-register-focus {
    --tfa-reg-body-size: 17px;
    --tfa-reg-body-line: 28px;
    --tfa-reg-target: 48px;
    --tfa-reg-display-wdth: 112;
    --tfa-reg-display-wght: 700;
    --tfa-reg-display-stretch: 112%;
    --tfa-reg-display-variation: "wdth" 112, "wght" 700;
    --tfa-reg-radius: var(--tfa-radius-md);
    --tfa-reg-max-words: 120;
    --tfa-reg-motion: standard;
    --tfa-reg-duration: var(--tfa-duration-base);
    --tfa-reg-duration-max: var(--tfa-duration-slow);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* pro: Years 11 and 12, adult learners */
[data-register="pro"],
.tfa-register-pro {
    --tfa-reg-body-size: 16px;
    --tfa-reg-body-line: 24px;
    --tfa-reg-target: 44px;
    --tfa-reg-display-wdth: 106;
    --tfa-reg-display-wght: 650;
    --tfa-reg-display-stretch: 106%;
    --tfa-reg-display-variation: "wdth" 106, "wght" 650;
    --tfa-reg-radius: var(--tfa-radius-sm);
    --tfa-reg-max-words: 180;
    --tfa-reg-motion: fast;
    --tfa-reg-duration: var(--tfa-duration-fast);
    --tfa-reg-duration-max: var(--tfa-duration-base);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* operate: Tutors, parents and administrators */
[data-register="operate"],
.tfa-register-operate {
    --tfa-reg-body-size: 15px;
    --tfa-reg-body-line: 24px;
    --tfa-reg-target: 44px;
    --tfa-reg-display-wdth: 106;
    --tfa-reg-display-wght: 650;
    --tfa-reg-display-stretch: 106%;
    --tfa-reg-display-variation: "wdth" 106, "wght" 650;
    --tfa-reg-radius: var(--tfa-radius-sm);
    --tfa-reg-max-words: none;
    --tfa-reg-motion: fast;
    --tfa-reg-duration: var(--tfa-duration-fast);
    --tfa-reg-duration-max: var(--tfa-duration-base);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* site: The public website (www) */
[data-register="site"],
.tfa-register-site {
    --tfa-reg-body-size: 18px;
    --tfa-reg-body-line: 30px;
    --tfa-reg-target: 48px;
    --tfa-reg-display-wdth: 112;
    --tfa-reg-display-wght: 720;
    --tfa-reg-display-stretch: 112%;
    --tfa-reg-display-variation: "wdth" 112, "wght" 720;
    --tfa-reg-radius: var(--tfa-radius-md);
    --tfa-reg-max-words: none;
    --tfa-reg-motion: standard;
    --tfa-reg-duration: var(--tfa-duration-base);
    --tfa-reg-duration-max: var(--tfa-duration-slow);
    --tfa-reg-ease: var(--tfa-ease-standard);
    --tfa-reg-text-features: normal;
}
/* Reduced motion: every register drops to the reduced crossfade. */
@media (prefers-reduced-motion: reduce) {
    :root,
    [data-register],
    [class*="tfa-register-"] {
        --tfa-reg-motion: reduced;
        --tfa-reg-duration: var(--tfa-duration-reduced);
        --tfa-reg-duration-max: var(--tfa-duration-reduced);
    }
}
/* TOKENS:END */

/* SHELL DIALS — the learn shell's per-register values that design-system/tokens.json does not carry
   yet (design overhaul, 5 October 2026, lane L3). Hand-written, not generated: the heading scale per
   register of ops/design-overhaul-2026-10-05/04-design-direction.md §4.4 (line heights on the 4-point
   baseline), the control and card radii of §4.5, the 2 px interactive outline of Play and Build.
   They switch with the same keys as the generated register dials above: the tfa-register-<name>
   class the plugin puts on <body> (output\page_register) and data-register on <html>. The theme's
   chrome reads them too, each var() with this Focus default as its fallback. When lane L1 generates
   a per-register type scale into the TOKENS block, this block goes. */
:root,
[data-register="focus"],
.tfa-register-focus {
    --tfa-shell-h1-size: 44px; --tfa-shell-h1-line: 52px;
    --tfa-shell-h2-size: 32px; --tfa-shell-h2-line: 40px;
    --tfa-shell-h3-size: 28px; --tfa-shell-h3-line: 36px;
    --tfa-shell-h4-size: 22px; --tfa-shell-h4-line: 28px;
    --tfa-shell-small-size: 15px; --tfa-shell-small-line: 24px;
    --tfa-shell-label-size: 14px; --tfa-shell-label-line: 20px;
    --tfa-shell-caption-size: 13px; --tfa-shell-caption-line: 20px;
    --tfa-shell-control-radius: var(--tfa-radius-sm);
    --tfa-shell-card-radius: var(--tfa-radius-md);
    --tfa-shell-card-pad: var(--tfa-space-3);
    --tfa-shell-outline: 1px;
}
[data-register="play"],
.tfa-register-play {
    --tfa-shell-h1-size: 44px; --tfa-shell-h1-line: 52px;
    --tfa-shell-h2-size: 36px; --tfa-shell-h2-line: 44px;
    --tfa-shell-h3-size: 28px; --tfa-shell-h3-line: 36px;
    --tfa-shell-h4-size: 24px; --tfa-shell-h4-line: 32px;
    --tfa-shell-small-size: 20px; --tfa-shell-small-line: 28px;
    --tfa-shell-label-size: 20px; --tfa-shell-label-line: 28px;
    --tfa-shell-caption-size: 16px; --tfa-shell-caption-line: 24px;
    --tfa-shell-control-radius: var(--tfa-radius-lg);
    --tfa-shell-card-radius: var(--tfa-radius-xl);
    --tfa-shell-card-pad: var(--tfa-space-4);
    --tfa-shell-outline: 2px;
}
[data-register="build"],
.tfa-register-build {
    --tfa-shell-h1-size: 40px; --tfa-shell-h1-line: 48px;
    --tfa-shell-h2-size: 32px; --tfa-shell-h2-line: 40px;
    --tfa-shell-h3-size: 26px; --tfa-shell-h3-line: 32px;
    --tfa-shell-h4-size: 22px; --tfa-shell-h4-line: 28px;
    --tfa-shell-small-size: 17px; --tfa-shell-small-line: 28px;
    --tfa-shell-label-size: 16px; --tfa-shell-label-line: 24px;
    --tfa-shell-caption-size: 14px; --tfa-shell-caption-line: 20px;
    --tfa-shell-control-radius: var(--tfa-radius-md);
    --tfa-shell-card-radius: var(--tfa-radius-lg);
    --tfa-shell-card-pad: var(--tfa-space-3);
    --tfa-shell-outline: 2px;
}
[data-register="pro"],
.tfa-register-pro {
    --tfa-shell-h1-size: 38px; --tfa-shell-h1-line: 44px;
    --tfa-shell-h2-size: 30px; --tfa-shell-h2-line: 36px;
    --tfa-shell-h3-size: 24px; --tfa-shell-h3-line: 32px;
    --tfa-shell-h4-size: 20px; --tfa-shell-h4-line: 28px;
    --tfa-shell-small-size: 14px; --tfa-shell-small-line: 20px;
    --tfa-shell-label-size: 14px; --tfa-shell-label-line: 20px;
    --tfa-shell-caption-size: 12px; --tfa-shell-caption-line: 16px;
    --tfa-shell-control-radius: var(--tfa-radius-sm);
    --tfa-shell-card-radius: var(--tfa-radius-md);
    --tfa-shell-card-pad: var(--tfa-space-3);
    --tfa-shell-outline: 1px;
}
[data-register="operate"],
.tfa-register-operate {
    --tfa-shell-h1-size: 30px; --tfa-shell-h1-line: 36px;
    --tfa-shell-h2-size: 22px; --tfa-shell-h2-line: 28px;
    --tfa-shell-h3-size: 20px; --tfa-shell-h3-line: 28px;
    --tfa-shell-h4-size: 17px; --tfa-shell-h4-line: 24px;
    --tfa-shell-small-size: 14px; --tfa-shell-small-line: 20px;
    --tfa-shell-label-size: 13px; --tfa-shell-label-line: 20px;
    --tfa-shell-caption-size: 12px; --tfa-shell-caption-line: 16px;
    --tfa-shell-control-radius: var(--tfa-radius-sm);
    --tfa-shell-card-radius: var(--tfa-radius-sm);
    --tfa-shell-card-pad: var(--tfa-space-3);
    --tfa-shell-outline: 1px;
}
/* SHELL DIALS end */

/* ==========================================================================
   local_tutorforall — learning-tree page + dashboard progress (Sprint 6).

   Ink & Wattle state palette (BRAND.md law: paper ground, ink-900 text,
   gold NEVER carries white text):
     locked      = kraft   var(--tfa-line), ink text
     available   = paper-bright var(--tfa-white) with an ink border
     in progress = gold-400 var(--tfa-gold) with ink-900 text
     mastered    = eucalypt var(--tfa-cobalt) with white text
   Every state also carries a text label + icon — never colour alone.
   Included automatically by Moodle's theme CSS aggregation.
   ========================================================================== */

/* --- Progress bar ------------------------------------------------------- */
.tfa-tree-progress-text {
    color: var(--tfa-ink);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

/* The track and the fill are drawn in the shell block below (the tutor bar and the learner block). */
.tfa-tree-progress-track {
    margin-bottom: var(--tfa-space-2);
}

.tfa-tree-markoff {
    display: inline;
    margin: 0;
}

.tfa-tree-markoff .tfa-btn {
    margin-right: 0.25rem;
}

/* --- Dashboard "My learning" / snapshot ----------------------------------- */
.tfa-learning-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-learning-row:last-child {
    border-bottom: 0;
}

.tfa-learning-row .tfa-tree-progress-track {
    margin: 0.35rem 0 0;
    max-width: 22rem;
}

.tfa-learning-meta {
    color: var(--tfa-muted);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.tfa-recent-win {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-recent-win:last-child {
    border-bottom: 0;
}

.tfa-recent-win .tfa-win-date {
    color: var(--tfa-muted);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* --- Tutor "Your giving" panel + donor badge ------------------------------
   Accessible by law: every badge pairs an icon with a text label — never
   colour alone. Ink & Wattle: gold NEVER carries white text; the Gold tier
   uses eucalypt (white text) for prestige, gold as its accent border. */
.tfa-giving .tfa-giving-hours {
    color: var(--tfa-ink);
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}

.tfa-giving .tfa-giving-pledge,
.tfa-giving .tfa-giving-money {
    margin: 0.15rem 0;
    font-size: 0.9rem;
}

.tfa-donor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-weight: 700;
    border: 1px solid transparent;
    margin-bottom: 0.25rem;
}

.tfa-donor-icon {
    font-size: 0.95em;
    line-height: 1;
}

.tfa-donor-label {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Supporter — bright paper with an ink border (entry tier). */
.tfa-donor-badge.tfa-donor-supporter {
    background-color: var(--tfa-white);
    border-color: var(--tfa-ink);
    color: var(--tfa-ink);
}

/* Bronze — kraft ground, ink text. */
.tfa-donor-badge.tfa-donor-bronze {
    background-color: var(--tfa-line);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-ink);
}

/* Silver — soft paper-grey, ink text. */
.tfa-donor-badge.tfa-donor-silver {
    background-color: var(--tfa-ink-100);
    border-color: var(--tfa-ink-300);
    color: var(--tfa-ink);
}

/* Gold — eucalypt with white text + a gold accent border (gold never
   carries white text, so the plate is eucalypt for the top tier). */
.tfa-donor-badge.tfa-donor-gold {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-gold);
    color: var(--tfa-white);
}

/* ==========================================================================
   Tutor directory (find.php) — Sprint 12. Ink & Wattle: paper ground, ink-900
   text, eucalypt accents, gold NEVER carries white text.
   ========================================================================== */

.tfa-find-page {
    max-width: 72rem;
}

.tfa-find-intro {
    color: var(--tfa-ink);
    max-width: 46rem;
    margin-bottom: 1rem;
}

/* --- Filters ------------------------------------------------------------- */
.tfa-find-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.tfa-find-filters .tfa-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tfa-find-filters .tfa-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tfa-ink);
    margin: 0;
}

.tfa-find-filters input[type="text"],
.tfa-find-filters input[type="search"],
.tfa-find-filters input[type="number"],
.tfa-find-filters select {
    border: 1px solid var(--tfa-ink-200);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    min-width: 9rem;
}

.tfa-find-filters input:focus,
.tfa-find-filters select:focus {
    outline: 2px solid var(--tfa-cobalt);
    outline-offset: 1px;
}

.tfa-find-filters .tfa-field-check {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.tfa-find-filters .tfa-field-check label {
    font-size: 0.9rem;
    font-weight: 500;
}

.tfa-find-filters .tfa-field-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* --- "How we rank" panel ------------------------------------------------- */
.tfa-howwerank {
    border: 1px solid var(--tfa-line);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background-color: var(--tfa-white);
}

.tfa-howwerank summary {
    font-weight: 700;
    color: var(--tfa-ink);
    cursor: pointer;
}

.tfa-howwerank .tfa-weights {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
}

.tfa-howwerank .tfa-weights li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-howwerank .tfa-weights li:last-child {
    border-bottom: 0;
}

.tfa-howwerank .tfa-weights strong {
    color: var(--tfa-ink);
}

/* --- Results count ------------------------------------------------------- */
.tfa-find-count {
    font-weight: 600;
    color: var(--tfa-ink);
    margin: 0.5rem 0 1rem;
}

.tfa-find-empty {
    padding: 1.5rem 0;
}

/* --- Tutor grid + cards -------------------------------------------------- */
.tfa-tutor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.tfa-tutor-card {
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 0.9rem;
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tfa-tutor-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tfa-tutor-photo {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--tfa-line);
}

.tfa-tutor-name {
    margin: 0;
    font-size: 1.1rem;
    color: var(--tfa-ink);
    flex: 1;
}

/* Favourite heart button. Eucalypt when on (never gold with a light glyph). */
.tfa-heart {
    background: transparent;
    border: 1px solid var(--tfa-ink-200);
    border-radius: 999px;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tfa-pencil);
    font-size: 1.15rem;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex: none;
}

.tfa-heart:hover {
    border-color: var(--tfa-cobalt);
}

.tfa-heart:focus-visible {
    outline: 2px solid var(--tfa-cobalt);
    outline-offset: 2px;
}

.tfa-heart.tfa-heart-on {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-heart[aria-busy="true"] {
    opacity: 0.6;
}

/* Rating line. */
.tfa-tutor-rating {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 1.4rem;
}

.tfa-rating-stars {
    color: var(--tfa-gold-600);
    letter-spacing: 0.05em;
}

.tfa-rating-value {
    font-size: 0.85rem;
    color: var(--tfa-muted);
}

.tfa-rating-new {
    display: inline-block;
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-ink);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tfa-ink);
}

.tfa-tutor-subjects {
    margin: 0.15rem 0;
    font-size: 0.9rem;
    color: var(--tfa-ink);
}

/* Signal + mode chips. */
.tfa-tutor-signals,
.tfa-tutor-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tfa-tutor-rate {
    margin: 0.3rem 0 0;
    font-weight: 700;
    color: var(--tfa-ink);
}

.tfa-tutor-bio {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: var(--tfa-ink);
}

/* Grow your tutoring (S19): personal link, card preview, promo manager. */
.tfa-growth-linkrow {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0;
}

.tfa-growth-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--tfa-line);
    border-radius: 4px;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    font-size: 0.92rem;
}

.tfa-growth-cardpreview {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.6rem 0;
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    background-color: var(--tfa-white);
}

.tfa-growth-cardactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0.6rem;
}

.tfa-growth-usage {
    font-weight: 700;
    color: var(--tfa-ink);
}

.tfa-growth-accepting {
    color: var(--tfa-ink);
}

.tfa-growth-promogrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 0.6rem 0;
}

.tfa-growth-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tfa-ink);
    margin-bottom: 0.2rem;
}

.tfa-growth-field input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--tfa-line);
    border-radius: 4px;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
}

.tfa-growth-check {
    margin: 0.35rem 0;
}

/* Learning-block packs (Eala model): online interactive view. */
.tfa-block .tfa-block-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.tfa-block-tagline { color: var(--tfa-ink); font-weight: 700; font-size: 1.05rem; margin: .2rem 0; }
.tfa-block-tagline { display: inline; box-shadow: inset 0 -0.36em 0 var(--tfa-diagram-yellow-tint); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tfa-block-actions { margin: .8rem 0; }
.tfa-block-h3 { color: var(--tfa-cobalt); margin: 1.4rem 0 .5rem; }
.tfa-blockbox { border: 2px solid; border-left-width: 1px; border-radius: 10px; padding: .8rem 1.1rem; margin: .9rem 0; background: var(--tfa-white); }
.tfa-blockbox h4 { margin: 0 0 .35rem; font-size: 1rem; }
.tfa-blockbox-key { border-color: var(--tfa-cobalt); background: var(--tfa-tint); }
.tfa-blockbox-key h4 { color: var(--tfa-cobalt); }
.tfa-blockbox-tip { border-color: var(--tfa-gold-600); background: var(--tfa-warning-tint); }
.tfa-blockbox-tip h4 { color: var(--tfa-gold-600); }
.tfa-blockbox-check { border-color: var(--tfa-ink-200); background: var(--tfa-surface); }
.tfa-blockbox-check h4 { color: var(--tfa-ink); }
.tfa-blockbox-wedo { border-color: var(--tfa-cobalt); background: var(--tfa-tint); }
.tfa-blockbox-wedo h4 { color: var(--tfa-cobalt); }
.tfa-block-stagebadge { display: inline-block; background: var(--tfa-cobalt); color: var(--tfa-white); font-weight: 700; font-size: .72rem; letter-spacing: .08em; border-radius: 6px; padding: .25rem .7rem; margin-bottom: .3rem; }
.tfa-block-crumbs { margin-bottom: .6rem; }
.tfa-block-intro { font-size: 1.02rem; }
.tfa-block-climb td.tfa-num { width: 3rem; text-align: center; }
.tfa-blockitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; margin: .6rem 0 1rem; }
.tfa-blockitems-story, .tfa-blockitems-workbox { grid-template-columns: 1fr; }
.tfa-blockitems-note { font-weight: 700; margin: .8rem 0 .2rem; }
.tfa-bi { border: 1.5px solid var(--tfa-line); border-radius: 9px; padding: .6rem .8rem; background: var(--tfa-white); }
.tfa-bi-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tfa-bi-q { font-weight: 700; font-size: 1.05rem; }
.tfa-bi-badge { background: var(--tfa-surface); color: var(--tfa-gold-700); border-radius: 10px; font-size: .68rem; font-weight: 700; padding: .1rem .55rem; white-space: nowrap; }
.tfa-bi-hint { color: var(--tfa-muted); font-style: italic; font-size: .78rem; margin: .15rem 0 .3rem; }
.tfa-bi-answer { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .35rem; }
.tfa-bi-input { width: 7.5rem; padding: .4rem .55rem; border: 1px solid var(--tfa-line); border-radius: 5px; background: var(--tfa-white); color: var(--tfa-ink); }
.tfa-bi-result { font-weight: 700; font-size: .85rem; }
.tfa-bi-ok { color: var(--tfa-success); }
.tfa-bi-no { color: var(--tfa-gold-600); }
.tfa-bi-shown { color: var(--tfa-gold-700); }
.tfa-blockfig { margin: .9rem 0; text-align: center; }
.tfa-blockfig-caption { color: var(--tfa-muted); font-style: italic; font-size: .82rem; margin-top: .3rem; }
table.tfa-blockfig-pv { margin: 0 auto; border-collapse: collapse; }
.tfa-blockfig-pv th { background: var(--tfa-cobalt); color: var(--tfa-white); padding: .4rem 1.4rem; }
.tfa-blockfig-pv td { border: 1px solid var(--tfa-line); font-size: 1.7rem; font-weight: 700; text-align: center; padding: .45rem 1.4rem; }
.tfa-blockfig-pv-shift td { font-size: .95rem; color: var(--tfa-gold-600); background: var(--tfa-warning-tint); }
table.tfa-blockfig-chunk { margin: .5rem auto; border-collapse: collapse; min-width: 300px; }
.tfa-blockfig-chunk td { border-bottom: 1.5px dashed var(--tfa-line); padding: .4rem .8rem; }
.tfa-blockfig-chunk td.tfa-num { text-align: right; font-weight: 700; }
.tfa-blockfig-chunk-total td { background: var(--tfa-warning-tint); font-weight: 700; color: var(--tfa-gold-600); }
.tfa-block-statebar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; border: 2px solid var(--tfa-gold-700); background: var(--tfa-surface); border-radius: 10px; padding: .6rem .9rem; margin: 1.2rem 0; }
.tfa-block-feelform, .tfa-block-masterform { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.tfa-block-feelprompt { font-weight: 700; color: var(--tfa-gold-700); }
.tfa-block-feel-on { outline: 3px solid var(--tfa-gold-700); }
.tfa-block-masteredchip { background: var(--tfa-tint); color: var(--tfa-cobalt); border-radius: 10px; font-weight: 700; font-size: .8rem; padding: .15rem .6rem; }
.tfa-block-feelchip { border-radius: 10px; font-weight: 700; font-size: .8rem; padding: .15rem .6rem; }
.tfa-block-feelchip-1 { background: var(--tfa-warning-tint); color: var(--tfa-gold-600); }
.tfa-block-feelchip-2 { background: var(--tfa-tint); color: var(--tfa-cobalt); }
.tfa-block-feelchip-3 { background: var(--tfa-tint); color: var(--tfa-cobalt); }
.tfa-block-stagenav { display: flex; justify-content: space-between; margin: 1rem 0; }

/* The admin roster console. */
.tfa-roster-tutors { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.tfa-roster-tutorchip { border: 1px solid var(--tfa-line); border-radius: 8px; background: var(--tfa-white); padding: .45rem .7rem; }
.tfa-roster-rel { margin: .15rem 0; }
.tfa-roster-courselink { margin-left: .3rem; font-size: .85rem; }
.tfa-roster-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tfa-roster-learnlinks { margin-top: .3rem; }

/* ==========================================================================
   v8-hub4 — the learning-tree network map (.tfa-treemap*).
   Server-rendered deterministic SVG (classes/output/treesvg.php) inserted on
   tree.php above the accessible chip list. Chips reuse the EXACT tfa-tree
   state colours above; Ink & Wattle law: gold var(--tfa-gold) never carries white
   text (gold chips and gold edges always pair with ink var(--tfa-ink)); state is
   never colour alone (glyph + word ride inside every chip).
   The page body must never scroll horizontally: the map lives in its own
   overflow-x container with a fixed SVG viewBox.
   ========================================================================== */
.tfa-treemap-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tfa-ink-50);
    border-radius: 10px;
    background-color: var(--tfa-white);
}

.tfa-treemap-scroll:focus-visible {
    outline: 3px solid var(--tfa-ink);
    outline-offset: 2px;
}

.tfa-treemap-svg {
    display: block;
}

.tfa-treemap-actions {
    margin-top: 0.6rem;
}

/* Swimlane band tints — alternating on paper, strand name as the label. */
.tfa-treemap-band-rect {
    fill: var(--tfa-white);
}

.tfa-treemap-band-alt .tfa-treemap-band-rect {
    fill: var(--tfa-ink-50);
}

.tfa-treemap-band-label {
    fill: var(--tfa-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Edges: cubic beziers prereq → skill. Cross-strand edges heavier; edges
   into available nodes gold; into locked nodes muted. */
.tfa-treemap-edge {
    fill: none;
    stroke: var(--tfa-ink-300);
    stroke-width: 1.4;
}

.tfa-treemap-edge-to-locked {
    stroke: var(--tfa-ink-100);
}

.tfa-treemap-edge-to-available {
    stroke: var(--tfa-gold);
    stroke-width: 2;
}

.tfa-treemap-edge-cross {
    stroke-width: 2.4;
}

.tfa-treemap-edge-to-available.tfa-treemap-edge-cross {
    stroke-width: 2.8;
}

/* Node chips: 150×44 rounded rects, glyph + name + state word. Same state
   palette as .tfa-tree-chip (see the Sprint 6 block at the top of this file). */
.tfa-treemap-node {
    cursor: pointer;
    text-decoration: none;
}

.tfa-treemap-name {
    font-size: 11px;
    font-weight: 600;
}

.tfa-treemap-word {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.tfa-treemap-ico {
    font-size: 12px;
}

.tfa-treemap-state-locked .tfa-treemap-chiprect {
    fill: var(--tfa-line);
    stroke: var(--tfa-line);
}

.tfa-treemap-state-locked text {
    fill: var(--tfa-ink);
}

.tfa-treemap-state-available .tfa-treemap-chiprect {
    fill: var(--tfa-white);
    stroke: var(--tfa-ink);
    stroke-width: 1.5;
}

.tfa-treemap-state-available text {
    fill: var(--tfa-ink);
}

.tfa-treemap-state-in_progress .tfa-treemap-chiprect {
    fill: var(--tfa-gold);
    stroke: var(--tfa-gold-600);
}

.tfa-treemap-state-in_progress text {
    fill: var(--tfa-ink); /* Gold never carries white text. */
}

.tfa-treemap-state-mastered .tfa-treemap-chiprect {
    fill: var(--tfa-cobalt);
    stroke: var(--tfa-cobalt);
}

.tfa-treemap-state-mastered text {
    fill: var(--tfa-white);
}

/* Keyboard focus: a thick ink ring on the chip itself. */
.tfa-treemap-node:focus {
    outline: none;
}

.tfa-treemap-node:focus .tfa-treemap-chiprect,
.tfa-treemap-node:focus-visible .tfa-treemap-chiprect {
    stroke: var(--tfa-ink);
    stroke-width: 3;
}

/* Below ~480px the full map stays usable via the horizontal-scroll container
   (fixed viewBox — the drawing never squashes). A later sprint swaps in the
   mini frontier variant with a full-map toggle as progressive enhancement;
   HUB-4 ships CSS note + scroll behaviour only. */
@media (max-width: 480px) {
    .tfa-treemap-scroll {
        border-radius: 8px;
    }
}

/* ===================================================================   v8-lib2 — the resource-library curation console (resources_admin.php).
   Ink & Wattle: warm paper surfaces (var(--tfa-white)), soft sand borders (var(--tfa-line)),
   status colour is never the only signal — every badge carries its word.
   ========================================================================== */
.tfa-resadmin .tfa-res-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin: .6rem 0 1rem;
}
.tfa-res-actionform { display: inline-block; margin: 0 .15rem .2rem 0; }
.tfa-res-badge {
    display: inline-block;
    border-radius: 999px;
    padding: .05rem .6rem;
    font-size: .8rem;
    border: 1px solid transparent;
    white-space: nowrap;
}
.tfa-res-status-active { background: var(--tfa-success-tint); border-color: var(--tfa-line); color: var(--tfa-success); }
.tfa-res-status-review { background: var(--tfa-warning-tint); border-color: var(--tfa-line); color: var(--tfa-gold-700); }
.tfa-res-status-broken { background: var(--tfa-danger-tint); border-color: var(--tfa-line); color: var(--tfa-danger); }
.tfa-res-status-retired { background: var(--tfa-ink-50); border-color: var(--tfa-line); color: var(--tfa-pencil); }
.tfa-res-safe-ok { background: var(--tfa-success-tint); border-color: var(--tfa-line); color: var(--tfa-success); }
.tfa-res-safe-tutor { background: var(--tfa-ink-50); border-color: var(--tfa-line); color: var(--tfa-pencil); }
.tfa-res-key { font-size: .82rem; }
.tfa-res-licence { font-size: .85rem; max-width: 18rem; }
.tfa-res-health { white-space: nowrap; font-size: .85rem; }
.tfa-res-fails { color: var(--tfa-danger); font-weight: 600; }
.tfa-res-actions { display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; }
.tfa-res-reloadreport {
    border: 1px solid var(--tfa-line);
    border-radius: 10px;
    background: var(--tfa-white);
    padding: .7rem 1rem;
    margin: .6rem 0 1rem;
}
.tfa-res-reloadline { margin: .15rem 0; }
.tfa-res-reloaderror { color: var(--tfa-danger); }
.tfa-res-form {
    border: 1px solid var(--tfa-line);
    border-radius: 10px;
    background: var(--tfa-white);
    padding: 1rem 1.2rem;
    margin-top: 1.4rem;
    max-width: 46rem;
}
.tfa-res-form label { display: block; font-weight: 600; margin-top: .7rem; }
.tfa-res-form input[type=text],
.tfa-res-form input[type=url],
.tfa-res-form select,
.tfa-res-form textarea {
    width: 100%;
    max-width: 34rem;
    box-sizing: border-box;
}
.tfa-res-form .tfa-res-hint {
    display: block;
    font-weight: 400;
    font-size: .85rem;
    color: var(--tfa-pencil);
    margin: .1rem 0 .2rem;
}
.tfa-res-checks { display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.tfa-res-checks label {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
    font-weight: 400;
    margin-top: .2rem;
}
.tfa-res-safelabel { display: flex; gap: .4rem; align-items: center; }
.tfa-res-formactions { display: flex; gap: .5rem; margin-top: 1rem; }
/* v8-cat2: learn-block renderer registry — tier chips, stage time strips,
   the locked mastery-check teaser, MCQ practice items, and the ACARA CC BY
   curriculum attribution footer (online surface; the print booklet carries
   its own bp-* styles inside learnblockprint.php). */
.tfa-block-tierchip {
    display: inline-block;
    background: var(--tfa-ink);
    color: var(--tfa-white);
    border-radius: 10px;
    font-weight: 700;
    font-size: .78rem;
    padding: .2rem .7rem;
    margin: .2rem 0 .5rem;
}

.tfa-block-timestrip {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .5rem 0 1rem;
}

.tfa-block-time {
    background: var(--tfa-white);
    border: 1.5px solid var(--tfa-line);
    border-radius: 10px;
    padding: .3rem .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--tfa-ink);
}

.tfa-block-time-min {
    color: var(--tfa-cobalt);
    font-weight: 700;
}

.tfa-block-checkteaser .tfa-block-checkteaser-hint {
    color: var(--tfa-muted);
    font-size: .85rem;
    margin: .3rem 0 0;
}

.tfa-bi-options {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .4rem 0;
}

.tfa-bi-opt-on {
    outline: 3px solid var(--tfa-gold-700);
}

.tfa-block-curriculum {
    border-top: 1.5px solid var(--tfa-line);
    margin-top: 2rem;
    padding-top: .8rem;
    color: var(--tfa-muted);
    font-size: .85rem;
}

.tfa-block-curriculum h4 {
    color: var(--tfa-ink);
    font-size: .9rem;
    margin: 0 0 .3rem;
}

.tfa-block-curriculum ul {
    margin: .2rem 0 .5rem;
    padding-left: 1.1rem;
}

.tfa-block-attrib {
    font-style: italic;
    font-size: .8rem;
}

/* v8-s22: the tutor plug-and-play palette ("Add to this class"). Ink & Wattle:
   ink-900 text on paper cards; gold is reserved for the badge accent border
   and never carries white text. */

.tfa-pal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .6rem 0 1.2rem;
}

.tfa-pal-navlink {
    background: var(--tfa-white);
    border: 1.5px solid var(--tfa-line);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .9rem;
    font-weight: 600;
}

/* --- v8-hub2a: the class hub (class.php) --------------------------------
   Ink & Wattle: paper ground, ink-900 text, gold NEVER carries white text.
   The gold Join button is the ONE gold primary on the page — gold-400
   var(--tfa-gold) with ink var(--tfa-ink) text. Compliance lines (guardian nearby +
   lesson recorded) are quiet but always present per BRIEF-v8 §6.2-3. */

.tfa-hub-kicker {
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .2rem;
}

/* Doubled class beats the theme's later-aggregated .tfa-btn base rule. */
.tfa-btn.tfa-hub-join {
    background-color: var(--tfa-gold);
    border: 1.5px solid var(--tfa-ink);
    border-radius: 8px;
    color: var(--tfa-ink);
    display: inline-block;
    font-weight: 700;
    padding: .55rem 1.4rem;
    text-decoration: none;
}

.tfa-btn.tfa-hub-join:hover,
.tfa-btn.tfa-hub-join:focus {
    background-color: var(--tfa-gold);
    color: var(--tfa-ink);
    text-decoration: none;
}

.tfa-pal-navlink:hover,
.tfa-pal-navlink:focus {
    border-color: var(--tfa-ink);
    color: var(--tfa-ink);
    text-decoration: underline;
}

.tfa-pal-group {
    scroll-margin-top: 4rem;
}

.tfa-pal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .8rem;
    margin-top: .6rem;
}

.tfa-pal-item {
    background: var(--tfa-white);
    border: 1.5px solid var(--tfa-line);
    border-radius: 12px;
    padding: .9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tfa-pal-name {
    font-size: 1rem;
}

/* --- v8-lib34: the tutor resource library (library.php) ------------------- */
.tfa-lib-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.tfa-lib-filters .tfa-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tfa-lib-filters .tfa-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tfa-ink);
    margin: 0;
}

.tfa-pal-badge {
    align-self: flex-start;
    background: var(--tfa-surface);
    border: 1px solid var(--tfa-gold);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tfa-ink);
}

.tfa-pal-blurb {
    color: var(--tfa-muted);
    font-size: .88rem;
    margin: 0;
}

.tfa-pal-existing {
    color: var(--tfa-cobalt);
    font-size: .82rem;
    font-weight: 600;
    margin: 0;
}

.tfa-pal-form {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.tfa-pal-sectionlabel {
    font-size: .82rem;
}

.tfa-lib-filters input[type="search"],
.tfa-lib-filters select {
    border: 1px solid var(--tfa-ink-200);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    min-width: 9rem;
}

.tfa-lib-filters select.tfa-lib-strandhint {
    color: var(--tfa-muted);
    background-color: var(--tfa-surface);
}

.tfa-lib-filters input:focus,
.tfa-lib-filters select:focus {
    outline: 2px solid var(--tfa-cobalt);
    outline-offset: 1px;
}

.tfa-lib-filters .tfa-field-check {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.tfa-lib-filters .tfa-field-check label {
    font-size: 0.9rem;
    font-weight: 500;
}

.tfa-lib-filters .tfa-field-actions {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.tfa-lib-count,
.tfa-lib-empty {
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.tfa-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tfa-lib-card {
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tfa-lib-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.tfa-lib-head h3 {
    font-size: 1.05rem;
    margin: 0;
    color: var(--tfa-ink);
}

.tfa-chip.tfa-lib-type {
    background: var(--tfa-ink-50);
    border: 1px solid var(--tfa-ink-200);
    color: var(--tfa-ink-600);
    white-space: nowrap;
}

.tfa-lib-provider,
.tfa-lib-licence,
.tfa-lib-note {
    font-size: 0.85rem;
    margin: 0;
}

.tfa-lib-actions {
    margin-top: auto;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tfa-lib-preview > summary,
.tfa-lib-add > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    width: fit-content;
}

.tfa-lib-preview > summary::-webkit-details-marker,
.tfa-lib-add > summary::-webkit-details-marker {
    display: none;
}

.tfa-lib-embed {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%;
    height: 0;
    overflow: hidden;
    border: 1px solid var(--tfa-line);
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    background-color: var(--tfa-white);
}

.tfa-lib-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tfa-lib-attrib {
    font-size: 0.8rem;
    margin: 0.35rem 0 0;
}

.tfa-lib-addform {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: 1px solid var(--tfa-line);
    border-radius: 0.5rem;
    background-color: var(--tfa-surface);
}

.tfa-lib-addform label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tfa-ink);
    margin: 0;
}

.tfa-pal-section {
    max-width: 100%;
    border: 1.5px solid var(--tfa-line);
    border-radius: 8px;
    padding: .25rem .4rem;
    font-size: .88rem;
    color: var(--tfa-ink);
    background: var(--tfa-white);
}
.tfa-lib-addform select {
    border: 1px solid var(--tfa-ink-200);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.88rem;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    max-width: 100%;
}

.tfa-lib-addform button {
    align-self: flex-start;
}
/* --- End v8-lib34 ---------------------------------------------------------- */
.tfa-hub-line {
    color: var(--tfa-muted);
    font-size: .85rem;
    margin: .35rem 0 0;
}

.tfa-hub-parentnote {
    font-style: italic;
}

.tfa-hub-block {
    border-top: 1.5px solid var(--tfa-line);
    margin-top: .8rem;
    padding-top: .8rem;
}

.tfa-hub-block:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.tfa-hub-block h4 {
    margin: 0 0 .2rem;
}

.tfa-hub-blockfamily {
    font-size: .85rem;
    font-weight: 400;
}

.tfa-hub-blockprogress {
    color: var(--tfa-ink);
    font-weight: 600;
    margin: .2rem 0 .4rem;
}

.tfa-hub-stagechips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .5rem;
}

/* Stage chips: state always carried by glyph + word, never colour alone.
   Default = kraft (not started); feel = gold family with ink text;
   mastered = eucalypt with white text (gold never carries white text). */
.tfa-hub-chip {
    background-color: var(--tfa-ink-50);
    border: 1px solid var(--tfa-line);
    border-radius: 999px;
    color: var(--tfa-ink);
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-size: .8rem;
    padding: .15rem .6rem;
}

.tfa-hub-chip-feel1,
.tfa-hub-chip-feel2,
.tfa-hub-chip-feel3 {
    background-color: var(--tfa-diagram-yellow-tint);
    border-color: var(--tfa-gold);
}

.tfa-hub-chip-mastered {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-hub-chipword {
    font-weight: 700;
}

.tfa-hub-blockactions,
.tfa-hub-treeactions,
.tfa-hub-kitlinks {
    margin-top: .5rem;
}

/* --- v8-hub2b3: This week + design panel + allocation matrix -------------
   The class hub's second stage: the This-week completion list (glyph + word
   ticks, never colour alone), the tutor Design-this-class panel (kit
   version, upgrade nudge, pulse/worklog tiles) and the HUB-3 allocation
   matrix (packs x students, one-click sesskey forms). Ink & Wattle palette:
   ink var(--tfa-ink), kraft var(--tfa-line), wattle gold var(--tfa-gold), eucalypt var(--tfa-cobalt). */

.tfa-hub-weeksection {
    margin-top: -.35rem;
}

.tfa-hub-weeklist {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
}

.tfa-hub-weekitem {
    border-top: 1.5px solid var(--tfa-line);
    padding: .45rem 0;
}

.tfa-hub-weekitem:first-child {
    border-top: 0;
}

.tfa-hub-weektick {
    border-radius: 999px;
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    margin-left: .4rem;
    padding: .1rem .55rem;
}

.tfa-hub-weektick-done {
    background-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-hub-weektick-notyet {
    background-color: var(--tfa-white);
    border: 1.5px solid var(--tfa-line);
    color: var(--tfa-ink);
}

.tfa-hub-weektotals {
    border-top: 1.5px solid var(--tfa-line);
    margin-top: .8rem;
    padding-top: .6rem;
}

.tfa-hub-weektotal {
    margin: .2rem 0;
}

.tfa-hub-designshell {
    border-top: 1.5px solid var(--tfa-line);
    margin-top: .8rem;
    padding-top: .8rem;
}

.tfa-hub-designshell:first-of-type {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.tfa-hub-designversion {
    font-size: .85rem;
    font-weight: 400;
}

.tfa-hub-nudge {
    background-color: var(--tfa-diagram-yellow-tint);
    border: 1.5px solid var(--tfa-gold);
    border-radius: .5rem;
    margin: .5rem 0;
    padding: .5rem .75rem;
}

.tfa-hub-nudgelink {
    color: var(--tfa-ink);
    font-weight: 700;
}

.tfa-hub-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: .8rem;
}

.tfa-hub-tile {
    background-color: var(--tfa-white);
    border: 1.5px solid var(--tfa-line);
    border-radius: .5rem;
    flex: 1 1 240px;
    padding: .7rem .9rem;
}

.tfa-hub-tile h4 {
    margin: 0 0 .25rem;
}

.tfa-hub-pulselist {
    margin: .35rem 0 0;
    padding-left: 1.1rem;
}

.tfa-hub-designlinks {
    margin-top: .8rem;
}

.tfa-hub-matrixscroll {
    max-width: 100%;
    overflow-x: auto;
}

.tfa-hub-matrixtable {
    border-collapse: collapse;
    margin-top: .6rem;
    width: 100%;
}

.tfa-hub-matrixtable th,
.tfa-hub-matrixtable td {
    border: 1.5px solid var(--tfa-line);
    padding: .5rem .6rem;
    text-align: left;
    vertical-align: top;
}

.tfa-hub-matrixtable thead th {
    background-color: var(--tfa-white);
}

.tfa-hub-matrixfamily {
    display: block;
    font-size: .8rem;
    font-weight: 400;
}

.tfa-hub-cellstatus {
    display: block;
    font-weight: 700;
}

.tfa-hub-cellstatus-none {
    color: var(--tfa-muted);
    font-weight: 400;
}

.tfa-hub-cellstatus-done {
    color: var(--tfa-cobalt);
}

.tfa-hub-cellprogress {
    display: block;
    font-size: .85rem;
}

.tfa-hub-celllinks {
    font-size: .85rem;
    margin: .25rem 0;
}

.tfa-hub-celllink {
    margin-right: .5rem;
}/* --- End v8-hub2b3 ---------------------------------------------------------- */
/* ============================================================== v8-cat56
   The mastery-check runner (learnblockcheck.php) + the confirm bar. Ink &
   Wattle: ink text on paper, eucalypt accents, gold never under white text. */
.tfa-check-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 .8rem; }
.tfa-check-chip {
    display: inline-block; background: var(--tfa-tint); color: var(--tfa-cobalt); border-radius: 10px;
    font-size: .8rem; font-weight: 700; padding: .15rem .6rem;
}
.tfa-check-scoreline { font-size: 1.05rem; }
.tfa-check-item, .tfa-check-result-item {
    border: 1.5px solid var(--tfa-line); border-radius: 10px; padding: .8rem 1rem; margin: .7rem 0;
    background: var(--tfa-white);
}
.tfa-check-qline { font-weight: 600; }
.tfa-check-num { color: var(--tfa-cobalt); font-weight: 700; margin-right: .25rem; }
.tfa-check-options { border: 0; padding: 0; margin: .5rem 0 0; }
.tfa-check-option { margin: .25rem 0; }
.tfa-check-option label { margin-left: .35rem; }
.tfa-check-answer { margin-top: .5rem; }
.tfa-check-anslabel { font-weight: 600; margin-right: .4rem; }
.tfa-check-input {
    border: 1.5px solid var(--tfa-line); border-radius: 8px; padding: .3rem .6rem; max-width: 16rem;
}
.tfa-check-workinghint { color: var(--tfa-muted); font-style: italic; font-size: .85rem; margin: .4rem 0 0; }
.tfa-check-submit { margin: 1rem 0; }
/* A check's result: the chip carries the state in a word on its role's tint (check-correct, check-retry,
   04 §4.1); gold is the mastered moment only, never "try again" (second review of 6 October 2026). The
   result keeps its card's uniform rule; no coloured side edge. */
.tfa-check-result-ok .tfa-check-chip { background: var(--tfa-check-correct-tint); color: var(--tfa-check-correct); }
.tfa-check-result-no .tfa-check-chip { background: var(--tfa-check-retry-tint); color: var(--tfa-check-retry); }
.tfa-check-given { margin: .35rem 0 0; }
.tfa-check-why { color: var(--tfa-check-retry); margin: .35rem 0 0; }
.tfa-check-corenote { margin-top: .6rem; }
.tfa-check-lockedlist li, .tfa-check-revisitlist li { margin: .3rem 0; }
.tfa-check-wronglist li { margin: .2rem 0; }
.tfa-check-actionform { margin: .8rem 0; }
.tfa-check-actionnote { max-width: 46rem; }
.tfa-check-parentnote { font-style: italic; }
.tfa-check-badgeshelf { text-align: center; }
.tfa-check-badgeshelf svg { width: 120px; height: 120px; margin: .4rem auto; display: block; }
.tfa-block-checkteaser-cta { margin-top: .6rem; }
.tfa-block-confirmbar { margin: 1rem 0; }
.tfa-block-confirmform { margin-top: .5rem; }

/* v8-cat8 — spaced review. The warm "Review due" chip (gold-400 with ink text,
   Ink & Wattle law: gold never carries white text) surfaces mastered packs
   whose review has come round again; the matrix note is its quiet twin. */
.tfa-hub-reviewdue {
    margin: .2rem 0 .8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .6rem;
}
.tfa-hub-reviewchip {
    display: inline-block;
    background-color: var(--tfa-gold);
    color: var(--tfa-ink);
    border-radius: 10px;
    font-weight: 700;
    font-size: .78rem;
    padding: .2rem .7rem;
}
.tfa-hub-reviewlead { font-size: .9rem; }
.tfa-hub-reviewlink { font-weight: 600; }
.tfa-hub-cellreview {
    display: block;
    margin-top: .25rem;
    color: var(--tfa-gold-600);
    font-weight: 600;
    font-size: .78rem;
}

/* v8-s27: the class-kit upgrade nudge is now an action (one-click "Add the new
   items", with the palette as the secondary path), and the admin class-kit
   report highlights classes sitting behind the loaded kit version. */
.tfa-hub-nudgetext {
    font-weight: 700;
    margin: 0 0 .5rem;
}
.tfa-hub-nudgeform {
    display: inline-block;
    margin: 0 .6rem .25rem 0;
}
.tfa-shellreport-shell {
    margin-bottom: .8rem;
}
.tfa-shellreport-shell h4 {
    margin: 0 0 .25rem;
}
tr.tfa-shellreport-behind td {
    background-color: var(--tfa-warning-tint);
}

/* ==========================================================================
   v8-design-pass — execution polish within the locked Ink & Wattle system.
   One idea, applied consistently: the exercise-book ledger. Card headings
   carry a short gold tick then a sand rule (the margin line); ONE lead card
   per page carries the gold left rule; repeated row-actions stay quiet so
   each page keeps a single gold moment.
   ========================================================================== */

/* Duplicate page titles: these pages render their own kicker + heading, so
   the theme's course/page H1 above them said the same thing twice. */
#page-local-tutorforall-class .page-header-headings,
#page-local-tutorforall-library .page-header-headings {
    display: none;
}

/* Catalogue tag chips: three tiers instead of one heavy pill for everything.
   Default (year/subject/strand/concept) = kraft with ink; curriculum codes =
   small utility outline chips in the data voice. */
.tfa-catalogue-chips .tfa-block-tierchip {
    background: var(--tfa-ink-50);
    border: 1px solid var(--tfa-line);
    color: var(--tfa-ink);
}

.tfa-catalogue-chips .tfa-chip-code {
    background: transparent;
    border: 1px solid var(--tfa-ink-200);
    color: var(--tfa-muted);
    font-size: 0.72rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.02em;
}

/* The NSW crosswalk line reads as a note, not a pill. */
.tfa-catalogue-chips .tfa-chip-nsw {
    background: transparent;
    border: 0;
    color: var(--tfa-muted);
    font-size: 0.78rem;
    padding-left: 0;
    display: block;
    margin-top: 0.2rem;
}

/* Library: the disabled strand hint was clipped at narrow select widths. */
.tfa-lib-filters select.tfa-lib-strandhint {
    min-width: 12.5rem;
}

/* Library "OK for homework": eucalypt family, not stock success-green. */
.tfa-lib-safe,
.tfa-chip-safe {
    background: var(--tfa-tint) !important;
    border: 1px solid var(--tfa-cobalt) !important;
    color: var(--tfa-cobalt) !important;
}

/* Tree: the AI draft button repeated ~80 times drowned the skill chips.
   Compact icon form for rows that are not the working frontier. */
.tfa-tree-draftpack .tfa-btn {
    border-color: var(--tfa-ink-200);
    color: var(--tfa-muted);
}

.tfa-tree-draftpack.tfa-draft-compact .tfa-btn {
    padding: 0.25rem 0.5rem;
    min-width: 0;
}/* --- The gold ring around the focused map node ---------------------------- */
.tfa-treemap-focusring {
    stroke: var(--tfa-gold-600);
    stroke-width: 3;
}

.tfa-treemap-node-focused .tfa-treemap-chiprect {
    stroke: var(--tfa-gold-600);
}

/* --- The leaf drawer ------------------------------------------------------ */
.tfa-drawer {
    border-left: 1px solid var(--tfa-line);
}

.tfa-drawer-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.tfa-drawer-title {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tfa-drawer-close {
    color: var(--tfa-muted);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.tfa-drawer-close:hover,
.tfa-drawer-close:focus-visible {
    color: var(--tfa-ink);
    text-decoration: underline;
}

.tfa-drawer-pack {
    color: var(--tfa-ink);
    margin: 0.35rem 0 0.6rem;
}

.tfa-drawer-h4 {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.95rem;
}

.tfa-tierstate {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.tfa-tierstate-notstarted {
    background-color: var(--tfa-white);
    border-color: var(--tfa-line);
    color: var(--tfa-muted);
}

.tfa-tierstate-inprogress {
    background-color: var(--tfa-gold);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-ink); /* Gold never carries white text. */
}

.tfa-tierstate-passed {
    background-color: var(--tfa-white);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-gold-600);
}

.tfa-tierstate-confirmed {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-drawer-current {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tfa-muted);
    background-color: var(--tfa-ink-50);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.tfa-drawer-edges {
    margin: 0.45rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tfa-drawer-edgelabel {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--tfa-muted);
}

.tfa-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}
.tfa-suggest-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-suggest-item:last-child {
    border-bottom: 0;
}

.tfa-suggest-link {
    font-weight: 700;
    color: var(--tfa-ink);
    text-decoration: none;
}

.tfa-suggest-link:hover,
.tfa-suggest-link:focus-visible {
    text-decoration: underline;
    color: var(--tfa-ink);
}

.tfa-suggest-tag {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 0.35rem;
}

.tfa-suggest-tag-ready {
    background-color: var(--tfa-white);
    border-color: var(--tfa-ink);
    color: var(--tfa-ink);
}

.tfa-suggest-tag-review {
    background-color: var(--tfa-gold);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-ink); /* Gold never carries white text. */
}

.tfa-suggest-tag-revisit {
    background-color: var(--tfa-tint);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-cobalt);
}

.tfa-suggest-reason {
    margin: 0.2rem 0 0;
    color: var(--tfa-muted);
    font-size: 0.92rem;
}/* --- learnblock.php: sticky map crumb + branch navigation ----------------- */
.tfa-block-mapcrumb {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--tfa-surface);
    border-bottom: 1px solid var(--tfa-line);
    padding: 0.5rem 0;
    margin-bottom: 0.6rem;
}

.tfa-block-mapcrumb-link {
    color: var(--tfa-ink);
    font-weight: 600;
    text-decoration: none;
}

.tfa-block-mapcrumb-link:hover,
.tfa-block-mapcrumb-link:focus-visible {
    text-decoration: underline;
    color: var(--tfa-ink);
}

.tfa-block-branchnav {
    margin-top: 1.2rem;
    border-top: 1px solid var(--tfa-line);
    padding-top: 0.8rem;
}

.tfa-block-branchrow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.35rem 0;
}

.tfa-block-branchlabel {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--tfa-muted);
}

/* Mobile: the map keeps its horizontal-pan container; the drawer and strips
   stack in normal flow. Drawer actions go full-width for thumb reach. */
@media (max-width: 640px) {
    .tfa-drawer-actions .tfa-btn {
        flex: 1 1 auto;
        text-align: center;
    }}
/* v10-lc1 end */

/* v10-lc2 start */
/* ==========================================================================
   Role tab bars + the three dashboards (BRIEF-v10 B2/B3). The tab bar is a
   server-rendered nav of same-page jump links styled as tabs: sticky, one
   gold underline for the active tab, horizontal scroll on small screens.
   ========================================================================== */
/* The continue card: the one gold moment on the student's Today. */
.tfa-continue .tfa-continue-what {
    margin: 0 0 0.6rem;
}

.tfa-continue .tfa-continue-stage {
    display: block;
    margin-top: var(--tfa-space-0-5);
    font-size: var(--tfa-shell-small-size);
    line-height: var(--tfa-shell-small-line);
    color: var(--tfa-muted);
}

/* Chip rows: pending items (tutor Today) and the badges strip. Chips always
   carry words, never colour alone. */

/* Mini maps: the frontier — ready and in-progress chips take a 2 px ink ring; the state rides on the
   chip's glyph and word. Gold is the mastered moment only, and a zero-offset glow is decoration (second
   review of 6 October 2026). */
.tfa-minimap {
    margin: 0.4rem 0 0.6rem;
}

.tfa-treemap-mini .tfa-treemap-state-available .tfa-treemap-chiprect,
.tfa-treemap-mini .tfa-treemap-state-in_progress .tfa-treemap-chiprect {
    stroke: var(--tfa-ink);
    stroke-width: 2;
    filter: none;
}

/* The previous dashboard's frontier list (R3, 6 October 2026; treesvg::render_list): whole names at
   14 px, state words at 13 px, wrapping inside the card at 320 px; the state is a shape and a word. */
.tfa-minilist {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tfa-minilist .tfa-minilist-row > a,
.tfa-root .tfa-minilist .tfa-minilist-row > a {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 4px 10px;
    align-items: start;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--tfa-radius-sm, 8px);
    color: var(--tfa-ink);
    text-decoration: none;
}
.tfa-root .tfa-minilist .tfa-minilist-row > a:hover { background: var(--tfa-ink-50); color: var(--tfa-ink); }
.tfa-minilist-name { text-decoration: underline; text-decoration-color: var(--tfa-ink-300); text-underline-offset: 3px; }
.tfa-root .tfa-minilist .tfa-minilist-row > a:hover .tfa-minilist-name { color: var(--tfa-cobalt-deep); text-decoration-color: currentColor; }
.tfa-minilist-glyph {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 2px solid var(--tfa-ink);
    border-radius: 50%;
    background: var(--tfa-white);
}
.tfa-minilist-row[data-state="in_progress"] .tfa-minilist-glyph {
    background: linear-gradient(90deg, var(--tfa-ink) 50%, var(--tfa-white) 50%);
}
.tfa-minilist-row[data-state="mastered"] .tfa-minilist-glyph { background: var(--tfa-ink); }
.tfa-minilist-row[data-state="locked"] .tfa-minilist-glyph { border-style: dashed; border-color: var(--tfa-ink-400); }
.tfa-minilist-text { display: grid; min-width: 0; }
.tfa-minilist-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    overflow-wrap: anywhere;
}
.tfa-minilist-meta {
    color: var(--tfa-muted);
    font-size: 13px;
    line-height: 18px;
}
.tfa-minilist-more {
    margin: 4px 0 0 40px;
    color: var(--tfa-muted);
    font-size: 13px;
}

/* Tutor Students tab: one row per linked student. */
.tfa-studentrow {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-top: 1px solid var(--tfa-ink-50);
}

.tfa-studentrow:first-of-type {
    border-top: 0;
}

.tfa-studentrow-map {
    flex: 0 0 16rem;
    max-width: 16rem;
}

.tfa-studentrow-map .tfa-treemap-scroll {
    max-height: 9.5rem;
    overflow: auto;
}

.tfa-studentrow-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tfa-studentrow-delta {
    margin: 0.15rem 0 0.45rem;
    font-size: 0.9rem;
    color: var(--tfa-ink);
}

/* Parent This-week rows: name + one sentence. */
.tfa-weekrow {
    padding: 0.45rem 0;
    border-top: 1px solid var(--tfa-ink-50);
}

.tfa-weekrow:first-of-type {
    border-top: 0;
}

.tfa-weekrow strong {
    margin-right: 0.35rem;
}

/* Link-through tiles (Library / Bookings): quiet buttons in a row. */
.tfa-tilerow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Mobile: sections stack; student rows go single-column; the tab bar keeps
   its horizontal scroll (rule above). */
@media (max-width: 640px) {
    .tfa-studentrow {
        flex-direction: column;
    }

    .tfa-studentrow-map {
        flex-basis: auto;
        max-width: 100%;
    }
}
/* v10-lc2 end */

/* v10-lc3 start */
/* ==========================================================================
   v10-lc3 — the tutor tree editor (tree.php ?edit=1) + suggestion decisions.
   Ink & Wattle only: paper var(--tfa-surface)/var(--tfa-white), ink var(--tfa-ink), kraft var(--tfa-line),
   rule var(--tfa-ink-50). One gold primary in edit mode (Add a skill); every control
   is a real button with a text label — never colour alone.
   ========================================================================== */

/* The shaping toggle, switched on. */
.tfa-editbtn-on {
    border-color: var(--tfa-ink);
    font-weight: 700;
}

/* Inline shaping forms: hide / point-at / unlink / restore / accept / not-now. */
.tfa-edit-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.tfa-edit-form label {
    font-weight: 600;
    margin: 0;
}

.tfa-edit-form select {
    max-width: 14rem;
    border: 1px solid var(--tfa-line);
    border-radius: 8px;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    padding: 0.35rem 0.5rem;
}

/* The drawer's shaping row sits under the actions, quietly separated. */
.tfa-drawer-editactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--tfa-line);
}

/* Unlink rides right beside its built-on chip. */
.tfa-unlink {
    margin-left: 0.15rem;
    vertical-align: middle;
}

/* Suggestion decisions: a small row under each reason. */
.tfa-suggest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

/* The hidden-leaf shelf. */
.tfa-hiddenlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-hiddenlist li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--tfa-ink-50);
}

.tfa-hiddenlist li:first-child {
    border-top: 0;
}
.tfa-addskill-field {
    width: 100%;
}

.tfa-addskill-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.tfa-addskill-field select,
.tfa-addskill-field input[type="text"] {
    width: 100%;
    max-width: 26rem;
    border: 1px solid var(--tfa-line);
    border-radius: 8px;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    padding: 0.45rem 0.6rem;
}

.tfa-addskill-field select[multiple] {
    min-height: 7.5rem;
}
/* Mobile: shaping forms wrap; selects take the row. */
@media (max-width: 640px) {
    .tfa-edit-form select {
        max-width: 100%;
    }

    .tfa-drawer-editactions {
        flex-direction: column;
        align-items: stretch;
    }
}
/* v10-lc3 end */
/* v10-lc4 start */
/* ==========================================================================
   v10-lc4 — the Problem Lens (problemlens.php + the lens SVG + the student
   Problems tab). Ink & Wattle only: paper var(--tfa-surface)/var(--tfa-white), ink var(--tfa-ink),
   gold var(--tfa-gold)/var(--tfa-gold-600), eucalypt var(--tfa-cobalt), kraft var(--tfa-line). Every state and
   relation carries its word — colour never rides alone.
   ========================================================================== */

/* --- Intake form ---------------------------------------------------------- */
.tfa-pl-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: flex-start;
}

.tfa-pl-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 34rem;
}

.tfa-pl-field label {
    font-weight: 600;
    color: var(--tfa-ink);
    margin: 0;
}

.tfa-pl-textarea {
    width: 100%;
    border: 1px solid var(--tfa-line);
    border-radius: 0.6rem;
    background-color: var(--tfa-white);
    color: var(--tfa-ink);
    padding: 0.6rem 0.8rem;
}

.tfa-pl-gatednote {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
}

/* --- Problem list + status chips ------------------------------------------ */
.tfa-pl-problems {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-pl-problem {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-pl-problem:last-child {
    border-bottom: 0;
}

.tfa-pl-problemmain {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tfa-pl-excerpt {
    font-weight: 600;
    color: var(--tfa-ink);
}

.tfa-pl-meta {
    font-size: 0.85rem;
}

.tfa-pl-problemactions {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tfa-pl-note {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
}

.tfa-pl-status {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.tfa-pl-status-submitted {
    background-color: var(--tfa-white);
    border-color: var(--tfa-line);
    color: var(--tfa-muted);
}

.tfa-pl-status-drafting,
.tfa-pl-status-inreview {
    background-color: var(--tfa-gold);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-ink); /* Gold never carries white text. */
}

.tfa-pl-status-published {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-pl-status-declined {
    background-color: var(--tfa-ink-50);
    border-color: var(--tfa-line);
    color: var(--tfa-muted);
}

/* --- The lens ------------------------------------------------------------- */
.tfa-pl-problemtext {
    margin: 0.4rem 0 0.8rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--tfa-line);
    border-radius: var(--tfa-shell-control-radius);
    background-color: var(--tfa-surface);
    color: var(--tfa-ink);
}

.tfa-pl-lensscroll {
    overflow-x: auto;
}

.tfa-lens-edge {
    stroke: var(--tfa-line);
    stroke-width: 1.4;
}

.tfa-lens-edge-core {
    stroke: var(--tfa-ink);
    stroke-width: 2.4;
}

.tfa-lens-edge-feeder {
    stroke: var(--tfa-gold-600);
    stroke-width: 1.6;
}

.tfa-lens-edge-stretch {
    stroke: var(--tfa-gold-600);
    stroke-width: 1.4;
    stroke-dasharray: 5 4;
}

.tfa-lens-problemrect {
    fill: var(--tfa-ink);
    stroke: var(--tfa-ink);
}

.tfa-lens-problemlabel {
    fill: var(--tfa-white);
    font-size: 13px;
    font-weight: 700;
}

.tfa-lens-node {
    text-decoration: none;
}

.tfa-lens-chiprect {
    fill: var(--tfa-white);
    stroke: var(--tfa-line);
    stroke-width: 1.4;
}

.tfa-lens-state-held .tfa-lens-chiprect {
    fill: var(--tfa-tint);
    stroke: var(--tfa-cobalt);
    stroke-width: 2;
}

.tfa-lens-state-inprogress .tfa-lens-chiprect {
    fill: var(--tfa-warning-tint);
    stroke: var(--tfa-gold-600);
    stroke-width: 2;
}

.tfa-lens-state-missing .tfa-lens-chiprect {
    fill: var(--tfa-white);
    stroke: var(--tfa-line);
}

.tfa-lens-ico {
    fill: var(--tfa-ink);
    font-size: 13px;
}

.tfa-lens-name {
    fill: var(--tfa-ink);
    font-size: 11.5px;
    font-weight: 700;
}

.tfa-lens-need {
    fill: var(--tfa-gold-600);
    font-size: 10px;
    font-weight: 700;
}

.tfa-lens-word {
    fill: var(--tfa-muted);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* --- Skill-by-skill list + relation tags ---------------------------------- */
.tfa-pl-gaplist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-pl-gapitem {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tfa-pl-gapitem:last-child {
    border-bottom: 0;
}

.tfa-pl-rel-core {
    background-color: var(--tfa-white);
    border-color: var(--tfa-ink);
    color: var(--tfa-ink);
}

.tfa-pl-rel-feeder {
    background-color: var(--tfa-tint);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-cobalt);
}

.tfa-pl-rel-stretch {
    background-color: var(--tfa-white);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-gold-600);
}

.tfa-pl-state {
    display: inline-block;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.tfa-pl-state-held {
    background-color: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
    color: var(--tfa-white);
}

.tfa-pl-state-inprogress {
    background-color: var(--tfa-gold);
    border-color: var(--tfa-gold-600);
    color: var(--tfa-ink); /* Gold never carries white text. */
}

.tfa-pl-state-missing {
    background-color: var(--tfa-white);
    border-color: var(--tfa-line);
    color: var(--tfa-muted);
}

.tfa-pl-routeform {
    margin-top: 0.8rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Review split-view: the problem + node list --------------------------- */
.tfa-ai-problemtext {
    margin: 0.4rem 0 0.8rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--tfa-line);
    border-radius: var(--tfa-shell-control-radius);
    background-color: var(--tfa-surface);
    color: var(--tfa-ink);
}

.tfa-ai-problemnodes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-ai-problemnodes li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--tfa-ink-50);
}

.tfa-ai-problemnodes li:last-child {
    border-bottom: 0;
}

/* Mobile: the lens scrolls inside its container; form fields go full-width. */
@media (max-width: 640px) {
    .tfa-pl-field {
        max-width: 100%;
    }

    .tfa-pl-problemactions {
        flex-direction: row;
    }
}
/* v10-lc4 end */

/* v10-viewas start */
.tfa-dash .tfa-viewas {
    background: var(--tfa-warning-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    line-height: 1.7;
}
.tfa-dash .tfa-viewas-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    margin-right: 0.35rem;
}
.tfa-dash .tfa-viewas-current {
    font-weight: 700;
}
.tfa-dash .tfa-viewas-note {
    margin: -0.5rem 0 1rem;
    font-size: 0.8rem;
    color: var(--tfa-ink);
}
/* v10-viewas end */

/* v10-admin start */
/* A figure that links is one item of the figures line: its own width, no lift (the shell, below). */
.tfa-dash .tfa-admin-tilelink {
    text-decoration: none;
    display: inline-flex;
    flex: 0 0 auto;
}
.tfa-dash .tfa-admin-queues {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.tfa-dash .tfa-admin-queue {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--tfa-line);
    border-radius: 999px;
    background: var(--tfa-white);
    color: var(--tfa-ink);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.tfa-dash .tfa-admin-queue-hot {
    border-color: var(--tfa-gold-600);
    background: var(--tfa-warning-tint);
}
.tfa-dash .tfa-admin-badge {
    background: var(--tfa-gold-600);
    color: var(--tfa-white);
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
    padding: 0.05rem 0.45rem;
    font-size: 0.8rem;
}
.tfa-dash .tfa-admin-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.tfa-dash .tfa-admin-link {
    display: block;
    padding: 0.9rem 1rem;
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    background: var(--tfa-white);
    color: var(--tfa-ink);
    font-weight: 700;
    text-decoration: none;
}
.tfa-dash .tfa-admin-link:hover {
    background: var(--tfa-warning-tint);
}
.tfa-dash .tfa-viewas-loginas {
    font-size: 0.78rem;
    color: var(--tfa-gold-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* v10-admin end */

/* v10-viewas2 start */
.tfa-dash .tfa-viewas-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: center;
}
.tfa-dash .tfa-viewas-q {
    flex: 1 1 14rem;
    border: 1px solid var(--tfa-ink-200);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    font-size: 0.9rem;
    background: var(--tfa-white);
}
.tfa-dash .tfa-viewas-form select {
    border: 1px solid var(--tfa-ink-200);
    border-radius: 6px;
    padding: 0.42rem 0.5rem;
    font-size: 0.9rem;
    background: var(--tfa-white);
}
.tfa-dash .tfa-viewas-go {
    border: 0;
    border-radius: 6px;
    background: var(--tfa-gold-600);
    color: var(--tfa-white);
    font-weight: 700;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.tfa-dash .tfa-viewas-hintline {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--tfa-ink);
}
.tfa-dash .tfa-viewas-results {
    margin-top: 0.75rem;
}
.tfa-dash .tfa-viewas-group {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    margin: 0.6rem 0 0.2rem;
    color: var(--tfa-ink);
}
.tfa-dash .tfa-viewas-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}
.tfa-dash .tfa-viewas-list li {
    font-size: 0.88rem;
}
.tfa-dash .tfa-viewas-meta {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: var(--tfa-muted);
}
/* v10-viewas2 end */

/* ==========================================================================
   v12-gv1 — the human gate on time pledges. The review queue on the donations
   report, the confirmation step, and the honest "with the team" pending state
   on the tutor giving panel. Ink & Wattle: ink text on paper, wattle only as
   a quiet accent, never colour alone for meaning. */
.tfa-pledge-queue {
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.tfa-pledge-queue-empty {
    color: var(--tfa-muted);
    margin: 0.25rem 0 0;
}
.tfa-pledge-queue-table .tfa-pledge-action {
    display: inline-block;
    margin-right: 0.4rem;
}
.tfa-pledge-confirm {
    max-width: 46rem;
}
.tfa-pledge-confirm .tfa-pledge-reason {
    margin: 0.75rem 0 1rem;
}
.tfa-pledge-confirm .tfa-pledge-reason label {
    display: block;
    font-weight: 600;
    color: var(--tfa-ink);
    margin-bottom: 0.3rem;
}
.tfa-pledge-awaiting {
    color: var(--tfa-muted);
    font-size: 0.9rem;
}
.tfa-giving .tfa-giving-pending {
    color: var(--tfa-ink);
    background-color: var(--tfa-ink-50);
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    margin: 0.35rem 0;
    font-size: 0.9rem;
}
/* v12-gv1 end */

/* v12-sc1: scholarship applications + eligibility confirmation */
.tfa-schol-apps .tfa-schol-sub {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--tfa-muted);
}
.tfa-schol-apps .tfa-schol-warn {
    color: var(--tfa-gold-600);
}
.tfa-schol-apps .tfa-schol-elig-ok {
    font-weight: 600;
    color: var(--tfa-success);
}
.tfa-schol-elig {
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1.25rem;
    background: var(--tfa-ink-50);
}
.tfa-schol-elig .tfa-schol-elig-row {
    margin: 0.6rem 0;
}
.tfa-schol-elig .tfa-schol-elig-help {
    font-size: 0.85rem;
    color: var(--tfa-muted);
    max-width: 60ch;
}
/* v12-sc1 end */

/* R3 (6 October 2026): a scholarship place whose period has closed reads as ended, after the current ones. */
.tfa-schol-panel .tfa-schol-row + .tfa-schol-row {
    margin-top: var(--tfa-space-2, 16px);
}
.tfa-schol-panel .tfa-schol-ended strong {
    color: var(--tfa-muted);
}
.tfa-schol-panel .tfa-schol-state {
    display: inline-block;
    margin-right: var(--tfa-space-1, 8px);
    padding: 0 8px;
    border: 1px solid var(--tfa-ink-400);
    border-radius: var(--tfa-radius-pill, 999px);
    color: var(--tfa-muted);
    font-size: 14px;
    font-weight: 650;
    line-height: 22px;
}

/* v2026.10-recipes start ======== The August recipes, flattened ========
   The WP0 recipe classes are still on the tree, lesson and preview markup (tree.php, leaf.php,
   lessonpreview.php, classes/leafcontent.php, classes/output/study_reader_view.php), so the classes
   stay and only their look is set here, on the tokens. Retired with the August shell and the
   17 September override that had already switched most of it off: the noise-grain overlays, the
   ink band gradient, the gold foil gradient, the ruled-paper stripes, the rotated stamp, the
   stacked-sheet ghosts, the elevation shadows and the alias names (--tfa-paper, --tfa-kraft,
   --tfa-euc …, now the palette's own names throughout this file). */
.tfa-root .tfa-grain-band {
    position: relative;
    background: var(--tfa-ink);
}

.tfa-root .tfa-grain-paper,
.tfa-root .tfa-stacked-sheet {
    position: relative;
}

/* Gold is the mastered moment: a flat fill with a gold-700 edge (gold alone is 1.39:1 on white). */
.tfa-root .tfa-foil-gold {
    color: var(--tfa-ink);
    background: var(--tfa-gold);
    box-shadow: inset 0 0 0 2px var(--tfa-gold-700);
}
/* v2026.10-recipes end */

/* v2026.10-shell start ======== The learn shell on design system v2 (design overhaul, lane L3) ========
   One shared frame for every plugin page, on the tokens (--tfa-* names only; the register dials
   --tfa-reg-* and the shell dials --tfa-shell-* switch with the tfa-register-<name> body class).
   It replaces four stacked systems: the August "Ink & Eucalypt" shell (WP0 recipes and the WP6
   moves), the 17 September flattening override that switched most of it off again with raw hex, and
   the 21 September landing layer with its 21 --tfh-* tokens (02-audit-findings TS-P1, TS-O1, TS-O11).
   The duplicated .tfa-dash block of the theme preset is folded in here, so every component class has
   one home: the 52 pages that render inside Boost's chrome without a .tfa-root wrapper get the same
   cards, buttons, tables and chips as the eleven that have one.

   Grammar (04 §0, §4): a light baseline; cobalt only on what can be pressed; borders first, no
   resting shadows, no gradients, no glass; Archivo for headings and numerals at the register's width
   and weight; no eyebrow or kicker labels; a status is a word plus a shape, never colour alone;
   motion is a 100 ms colour change on press and hover, nothing lifts, nothing enters. */

/* --- The page frame ------------------------------------------------------- */
.tfa-dash {
    max-width: 52rem;
    margin: 0 auto var(--tfa-space-6);
    padding: 0 var(--tfa-space-2);
    color: var(--tfa-ink);
}

/* On a console page (body.tfa-console: every plugin page but the reading surfaces, set with the
   register) the frame fills the one column the theme gives every such page, 75rem in Operate and 60rem
   of content for a learner, so the content's edge and the page heading sit on one line and never move
   between bar items (second review of 6 October 2026: 928 px from x = 256 on a dashboard, 752 px from
   x = 344 elsewhere, and a desktop too narrow for the bookings table). The theme's sheet keeps the
   gutter, so the frame adds none. */
body.tfa-console .tfa-dash,
body.tfa-console .tfa-root.tfa-home {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.tfa-root {
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-reg-body-size);
    line-height: var(--tfa-reg-body-line);
    color: var(--tfa-ink);
}

/* The lesson reader keeps its reading size whoever opens it (lane L5 owns its register). */
.tfa-root.tfa-lr,
.tfa-root.tfa-lessonpreview {
    font-size: 18px;
    line-height: 1.65;
}

.tfa-root.tfa-dash {
    background: transparent;
}

/* A framed preview of a learner's register inside an adult's page (04 §2.2 rule 4): the wrapper
   re-scopes the register dials, so it re-declares the text that derives from them as well. */
.tfa-frame {
    font-size: var(--tfa-reg-body-size);
    line-height: var(--tfa-reg-body-line);
    font-feature-settings: var(--tfa-reg-text-features);
}

.tfa-muted {
    color: var(--tfa-muted);
}

.tfa-pid {
    font-size: var(--tfa-shell-caption-size);
    font-weight: 400;
}

/* --- Headings: the masthead title, section heads, card heads --------------- */
.tfa-dash-h {
    margin: var(--tfa-space-5) 0 var(--tfa-space-2);
    padding: 0;
    border: 0;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-h2-size);
    line-height: var(--tfa-shell-h2-line);
    font-weight: var(--tfa-reg-display-wght);
    font-stretch: var(--tfa-reg-display-stretch);
    letter-spacing: -0.015em;
    color: var(--tfa-ink);
}

.tfa-dash > .tfa-dash-h:first-child,
.tfa-masthead + .tfa-dash-h,
.tfa-hero + .tfa-dash-h {
    margin-top: var(--tfa-space-3);
}

/* --- The masthead: the page's title, one meta line, its controls ----------
   No ink band and no eyebrow. The role-and-date line that used to sit above the title as an
   overline is the meta line under it now (panel DD-09: moved, not hidden). */
.tfa-root .tfa-masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--tfa-space-2) var(--tfa-space-3);
    margin: 0 0 var(--tfa-space-3);
    padding: var(--tfa-space-2) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tfa-line);
    color: var(--tfa-ink);
}

.tfa-root .tfa-masthead-id {
    display: flex;
    flex-direction: column;
    gap: var(--tfa-space-0-5);
    min-width: 0;
}

.tfa-root .tfa-masthead-name {
    margin: 0;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-h1-size);
    line-height: var(--tfa-shell-h1-line);
    font-weight: var(--tfa-reg-display-wght);
    font-stretch: var(--tfa-reg-display-stretch);
    letter-spacing: -0.02em;
    color: var(--tfa-ink);
    overflow-wrap: anywhere;
}

/* The term under the name: a meta line after the heading, in the reading order too (no eyebrow). */
.tfa-root .tfa-masthead-overline {
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-small-size);
    line-height: var(--tfa-shell-small-line);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-muted);
}

.tfa-root .tfa-masthead .tfa-muted {
    color: var(--tfa-muted);
}

.tfa-root .tfa-masthead-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfa-space-1);
}

/* A phone steps the page's headings down together, so the title, a section head and a card head never
   land on one size (the title takes h2's size, a section head h3's, a card head h4's). */
@media (max-width: 575.98px) {
    .tfa-root .tfa-masthead-name {
        font-size: var(--tfa-shell-h2-size);
        line-height: var(--tfa-shell-h2-line);
    }

    .tfa-dash-h {
        font-size: var(--tfa-shell-h3-size);
        line-height: var(--tfa-shell-h3-line);
    }

    .tfa-card h3 {
        font-size: var(--tfa-shell-h4-size);
        line-height: var(--tfa-shell-h4-line);
    }
}

/* The child chrome (a Play or Build learner): no way into core messaging from any page, such as
   Preferences' "Message preferences" (04 §7.2). The theme drops the drawer's markup and the plugin
   sends /message/ back to Today; this takes the links themselves off the page. */
body.tfa-role-learner:is(.tfa-register-play, .tfa-register-build) li:has(> a[href*="/message/"]),
body.tfa-role-learner:is(.tfa-register-play, .tfa-register-build) a[href*="/message/"] {
    display: none !important;
}

/* A segmented control in the masthead (the tree's and the preview's view switch): the chosen
   segment is cobalt, because choosing is pressing. */
.tfa-root .tfa-viewswitch {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    background: var(--tfa-white);
    border: var(--tfa-shell-outline) solid var(--tfa-ink-400);
    border-radius: var(--tfa-shell-control-radius);
    overflow: hidden;
}

.tfa-root .tfa-viewswitch-item {
    /* Segments grow to fill their row, so a switch that wraps (a four-way switch at 320 px) still
       fills its box and the chosen segment reaches its edge (review of 6 October 2026). */
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tfa-reg-target);
    padding: 0 var(--tfa-space-2);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    font-weight: 600;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    text-decoration: none;
    white-space: normal;
    transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

/* A phone: two segments a row (Student · Parent / Tutor · Runner), evenly, never one left alone
   on a short second row. */
@media (max-width: 400px) {
    .tfa-root .tfa-viewswitch {
        display: flex;
    }

    .tfa-root .tfa-viewswitch-item {
        flex-basis: 40%;
    }
}

.tfa-root .tfa-viewswitch-item:hover {
    color: var(--tfa-ink);
    background: var(--tfa-tint);
    text-decoration: none;
}

.tfa-root .tfa-viewswitch-item.tfa-viewswitch-on,
.tfa-root .tfa-viewswitch-item.tfa-viewswitch-on:hover,
.tfa-root .tfa-viewswitch-item[aria-current="true"] {
    color: var(--tfa-white);
    background: var(--tfa-cobalt);
}

/* Focus inside the switch is drawn inset, so the container's rounded clip never hides it (WCAG
   2.4.7; review of 6 October 2026): a white band at the segment's edge and a cobalt band inside it
   on a white segment; on the chosen cobalt segment a wider white band with an ink band inside. */
.tfa-root .tfa-viewswitch-item:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px var(--tfa-white), inset 0 0 0 5px var(--tfa-cobalt);
}

.tfa-root .tfa-viewswitch-item.tfa-viewswitch-on:focus-visible,
.tfa-root .tfa-viewswitch-item[aria-current="true"]:focus-visible {
    box-shadow: inset 0 0 0 3px var(--tfa-white), inset 0 0 0 5px var(--tfa-ink);
}

/* --- The tab bar: words on a rule; the current tab sits on a 3 px cobalt line --------
   Server-rendered links (each a real section or URL), sticky under the navbar, scrolling sideways
   on a phone rather than wrapping. */
.tfa-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: var(--tfa-space-0-5);
    margin: 0 0 var(--tfa-space-3);
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: var(--tfa-surface);
    border-bottom: 1px solid var(--tfa-line);
}

/* Under 576 px the tabs wrap onto a second row rather than scroll: iOS hides the thin scrollbar, so a
   Years 3 to 6 child could not tell that "Lessons", cut at the edge, was there at all (second review of
   6 October 2026). */
@media (max-width: 575.98px) {
    .tfa-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.tfa-tabs .tfa-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--tfa-reg-target);
    padding: 0 var(--tfa-space-2);
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

/* The line a tab sits on: 3 px under the word, ink-300 on hover, cobalt for the current tab. */
.tfa-tabs .tfa-tab::after {
    content: "";
    position: absolute;
    left: var(--tfa-space-1);
    right: var(--tfa-space-1);
    bottom: 0;
    height: 3px;
    background: transparent;
    transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

.tfa-tabs .tfa-tab:hover,
.tfa-tabs .tfa-tab:focus {
    color: var(--tfa-ink);
    background: transparent;
    text-decoration: none;
}

.tfa-tabs .tfa-tab:hover::after {
    background: var(--tfa-ink-300);
}

.tfa-tabs .tfa-tab:focus-visible {
    outline: 2px solid transparent;
    box-shadow: inset 0 0 0 2px var(--tfa-white), inset 0 0 0 5px var(--tfa-cobalt);
}

.tfa-tabs .tfa-tab-active,
.tfa-tabs .tfa-tab-active:hover,
.tfa-tabs .tfa-tab[aria-current="page"] {
    color: var(--tfa-ink);
}

.tfa-tabs .tfa-tab-active::after,
.tfa-tabs .tfa-tab-active:hover::after,
.tfa-tabs .tfa-tab[aria-current="page"]::after {
    background: var(--tfa-cobalt);
}

/* Anchored sections land clear of the sticky bar. */
.tfa-tabsec {
    display: block;
    scroll-margin-top: calc(var(--tfa-reg-target) + var(--tfa-space-2));
}

.tfa-tabsec:focus {
    outline: none;
}

/* The section's name once repeated as a chip under the tab bar. dashboard.php no longer emits it
   (panel DD-09); the rule stays only until no older page markup is left. */
.tfa-tabsec-eyebrow {
    display: none;
}

/* --- Cards: white, a line rule, the register's radius; no shadow, no lift -------- */
.tfa-card {
    position: relative;
    margin: 0 0 var(--tfa-space-3);
    padding: var(--tfa-shell-card-pad);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: var(--tfa-shell-card-radius);
    box-shadow: none;
    color: var(--tfa-ink);
}

.tfa-card > :last-child {
    margin-bottom: 0;
}

.tfa-card h3 {
    margin: 0 0 var(--tfa-space-2);
    padding: 0;
    border: 0;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-h3-size);
    line-height: var(--tfa-shell-h3-line);
    font-weight: var(--tfa-reg-display-wght);
    font-stretch: var(--tfa-reg-display-stretch);
    letter-spacing: -0.01em;
    color: var(--tfa-ink);
}

/* A card's sub-head is a sub-head: sentence case at label weight, never an uppercase kicker. */
.tfa-card h4 {
    margin: var(--tfa-space-3) 0 var(--tfa-space-1);
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-h4-size);
    line-height: var(--tfa-shell-h4-line);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-ink);
}

/* The "today" card: the one card a person should act on first. Its edge is ink, not a colour. */
.tfa-card-today {
    border-color: var(--tfa-ink-300);
}

/* Rows inside a card: lessons, children, students, list items, separated by line rules. */
.tfa-lesson {
    padding: var(--tfa-space-1) 0;
}

.tfa-lesson + .tfa-lesson {
    border-top: 1px solid var(--tfa-line);
}

.tfa-lesson-meta {
    color: var(--tfa-ink);
    font-weight: 600;
}

.tfa-child {
    padding: var(--tfa-space-2) 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-child:last-child {
    border-bottom: 0;
}

.tfa-child h4 {
    margin: 0 0 var(--tfa-space-1);
    font-size: var(--tfa-shell-h4-size);
    line-height: var(--tfa-shell-h4-line);
    color: var(--tfa-ink);
}

.tfa-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tfa-list li {
    padding: var(--tfa-space-1) 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-list li:last-child {
    border-bottom: 0;
}

/* --- Figures: one ruled line of text, never a row of number tiles ---------
   "12 students · 4 families · 0 upcoming": the figure in Archivo with tabular numerals, its word
   after it, the figures separated by a dot on one line that wraps (04 §8.1; the craft floor refuses
   the hero-metric tile row). A single figure reads label first ("You keep in October $120.00"). */
.tfa-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--tfa-space-0-5) var(--tfa-space-2);
    margin: 0 0 var(--tfa-space-2);
    padding: 0 0 var(--tfa-space-1);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tfa-line);
    border-radius: 0;
}

.tfa-stat {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: var(--tfa-space-0-5);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.tfa-stats:has(> :nth-child(2)) .tfa-stat {
    flex-direction: row-reverse;
}

/* The dot closes every figure but the last; in the reversed row it sits after the word. */
.tfa-stats:has(> :nth-child(2)) > .tfa-stat:not(:last-child)::before,
.tfa-stats:has(> :nth-child(2)) > :not(:last-child) > .tfa-stat::before {
    content: "\00B7";
    order: -1;
    margin-left: var(--tfa-space-1);
    color: var(--tfa-muted);
}

.tfa-stat .tfa-stat-label {
    display: inline;
    margin: 0;
    font-size: var(--tfa-reg-body-size);
    line-height: var(--tfa-reg-body-line);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-muted);
}

.tfa-stat strong {
    display: inline;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-h4-size);
    line-height: var(--tfa-shell-h4-line);
    font-weight: var(--tfa-reg-display-wght);
    font-stretch: var(--tfa-reg-display-stretch);
    font-variant-numeric: tabular-nums;
    color: var(--tfa-ink);
}

/* --- Buttons: cobalt for the one action, a white control for the rest ------
   At least the register's target; Focus, Pro and Operate flat; Play and Build carry a 2 px outline
   and a 4 px press edge in the button's darker tone that sinks on press (a transform over a static
   edge, composed with the focus ring so focus never removes it; 04 §4.5). */
.tfa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tfa-space-1);
    min-height: var(--tfa-reg-target);
    max-width: 100%;
    margin: 0 var(--tfa-space-1) var(--tfa-space-1) 0;
    padding: 0 var(--tfa-space-3);
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: var(--tfa-shell-outline) solid var(--tfa-ink-400);
    border-radius: var(--tfa-shell-control-radius);
    box-shadow: var(--tfa-shadow-press, 0 0 transparent), var(--tfa-shadow-focus, 0 0 transparent);
    cursor: pointer;
    transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                border-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

.tfa-btn:hover,
.tfa-btn:focus {
    color: var(--tfa-ink);
    background: var(--tfa-surface);
    border-color: var(--tfa-cobalt);
    text-decoration: none;
}

.tfa-btn:active {
    background: var(--tfa-tint);
}

.tfa-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tfa-shadow-focus: 0 0 0 2px var(--tfa-white), 0 0 0 5px var(--tfa-cobalt);
}

.tfa-btn-primary,
.tfa-btn-primary:focus {
    color: var(--tfa-white);
    background: var(--tfa-cobalt);
    border-color: var(--tfa-cobalt);
}

.tfa-btn-primary:hover,
.tfa-btn-primary:active {
    color: var(--tfa-white);
    background: var(--tfa-cobalt-deep);
    border-color: var(--tfa-cobalt-deep);
}

.tfa-btn-ghost,
.tfa-btn-ghost:focus {
    color: var(--tfa-cobalt-deep);
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.tfa-btn-ghost:hover {
    color: var(--tfa-ink);
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Small means narrow, never under the register's target (04 §2.3). */
.tfa-btn-sm {
    padding: 0 var(--tfa-space-2);
}

/* A ghost is a link with a button's target: its text lines up with the text around it. */
.tfa-btn.tfa-btn-ghost {
    padding-left: 0;
    padding-right: 0;
}

.tfa-btn-disabled,
.tfa-btn-disabled:hover,
.tfa-btn[disabled],
.tfa-btn[aria-disabled="true"] {
    color: var(--tfa-pencil);
    background: var(--tfa-surface);
    border-color: var(--tfa-line);
    cursor: default;
    pointer-events: none;
}

/* Play and Build: the outline says "you can touch this"; the edge says "press me". Buttons keep the
   register's gap clear of the press edge: 8 px in Build, 16 px in Play (04 §2.3, panel A11Y-01). */
.tfa-register-play .tfa-btn,
.tfa-register-build .tfa-btn {
    --tfa-shadow-press: 0 var(--tfa-press-depth) 0 var(--tfa-ink);
    margin-right: var(--tfa-space-1);
    margin-bottom: calc(var(--tfa-space-1) + var(--tfa-press-depth));
    border-color: var(--tfa-ink);
}

/* Focus never removes the press edge (04 §4.5; second review of 6 October 2026: the 5 px ring, listed
   first, painted over the edge). The edge is painted first, on top, and the ring wraps the button
   and its edge together: each ring is drawn twice, once round the button and once shifted down by
   the press depth. */
.tfa-register-play .tfa-btn:focus-visible,
.tfa-register-build .tfa-btn:focus-visible {
    --tfa-shadow-focus: 0 0 0 2px var(--tfa-white), 0 var(--tfa-press-depth) 0 2px var(--tfa-white),
        0 0 0 5px var(--tfa-cobalt), 0 var(--tfa-press-depth) 0 5px var(--tfa-cobalt);
}

.tfa-register-play .tfa-btn {
    margin-right: var(--tfa-space-2);
    margin-bottom: calc(var(--tfa-space-2) + var(--tfa-press-depth));
}

.tfa-register-play .tfa-btn-primary,
.tfa-register-build .tfa-btn-primary {
    --tfa-shadow-press: 0 var(--tfa-press-depth) 0 var(--tfa-cobalt-deep);
    border-color: var(--tfa-cobalt-deep);
}

.tfa-register-play .tfa-btn-ghost,
.tfa-register-build .tfa-btn-ghost,
.tfa-register-play .tfa-btn-disabled,
.tfa-register-build .tfa-btn-disabled {
    --tfa-shadow-press: 0 0 transparent;
    margin-bottom: var(--tfa-space-1);
}

.tfa-register-play .tfa-btn-ghost,
.tfa-register-play .tfa-btn-disabled {
    margin-bottom: var(--tfa-space-2);
}

/* A ghost is a link: its underline is the affordance, so it takes no outline in Play or Build. */
.tfa-register-play .tfa-btn-ghost,
.tfa-register-build .tfa-btn-ghost {
    border-color: transparent;
}

.tfa-register-play .tfa-btn:active,
.tfa-register-build .tfa-btn:active {
    --tfa-shadow-press: 0 0 transparent;
    transform: translateY(var(--tfa-press-depth));
}

@media (prefers-reduced-motion: no-preference) {
    .tfa-register-play .tfa-btn,
    .tfa-register-build .tfa-btn {
        transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                    border-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                    color var(--tfa-duration-fast) var(--tfa-ease-standard),
                    transform var(--tfa-duration-fast) var(--tfa-ease-standard);
    }
}

/* --- Links in running text: cobalt, underlined, the offset from the tokens -- */
.tfa-root a {
    color: var(--tfa-cobalt);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.tfa-root a:hover {
    color: var(--tfa-cobalt-deep);
    text-decoration-thickness: 2px;
}

/* Component anchors carry their own recipe: no running-text underline. */
.tfa-root a.tfa-btn:not(.tfa-btn-ghost),
.tfa-root a.tfa-chip,
.tfa-root .tfa-tabs a,
.tfa-root a.tfa-admin-tilelink,
.tfa-root a.tfa-admin-queue,
.tfa-root a.tfa-admin-link,
.tfa-root .tfa-viewswitch a,
.tfa-root svg a {
    text-decoration: none;
}

.tfa-root a.tfa-btn:not(.tfa-btn-primary):not(.tfa-btn-ghost) {
    color: var(--tfa-ink);
}

.tfa-root a.tfa-btn-primary,
.tfa-root a.tfa-btn-primary:hover {
    color: var(--tfa-white);
}

/* --- Fields: the register's target, a 3:1 edge, the focus ring ------------- */
.tfa-root input[type="text"],
.tfa-root input[type="search"],
.tfa-root input[type="email"],
.tfa-root input[type="number"],
.tfa-root input[type="date"],
.tfa-root input[type="time"],
.tfa-root input[type="url"],
.tfa-root select,
.tfa-root textarea {
    max-width: 100%;
    min-height: var(--tfa-reg-target);
    padding: var(--tfa-space-1) var(--tfa-space-2);
    font-family: var(--tfa-family-text);
    font-size: max(16px, var(--tfa-shell-label-size));
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-ink-400);
    border-radius: var(--tfa-shell-control-radius);
}

.tfa-root input[type="text"]:hover,
.tfa-root input[type="search"]:hover,
.tfa-root input[type="email"]:hover,
.tfa-root input[type="number"]:hover,
.tfa-root select:hover,
.tfa-root textarea:hover {
    border-color: var(--tfa-ink-600);
}

.tfa-root input:focus,
.tfa-root select:focus,
.tfa-root textarea:focus {
    border-color: var(--tfa-cobalt);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--tfa-white), 0 0 0 5px var(--tfa-cobalt);
}

/* --- Tables: sentence-case heads at label weight, line rules, no zebra ----- */
.tfa-root table,
.tfa-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tfa-white);
    overflow-wrap: normal;
    word-break: normal;
}

.tfa-root table thead th,
.tfa-root table thead td,
.tfa-table th {
    padding: var(--tfa-space-1) var(--tfa-space-2);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    vertical-align: bottom;
    color: var(--tfa-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tfa-ink-200);
}

.tfa-root table tbody td,
.tfa-root table tbody th,
.tfa-table td {
    padding: var(--tfa-space-1) var(--tfa-space-2);
    color: var(--tfa-ink);
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-root table tbody tr:hover > td,
.tfa-root table tbody tr:hover > th {
    background: var(--tfa-surface);
}

/* A wide table scrolls inside its own box (the shell's table script wraps it), never the page. A box
   that scrolls is a named region and takes the focus ring, so a keyboard reaches what is off to the
   right. */
.tfa-tablewrap {
    max-width: 100%;
    margin: 0 0 var(--tfa-space-2);
    overflow-x: auto;
}

.tfa-tablewrap > table {
    margin-bottom: 0;
}

.tfa-tablewrap:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--tfa-white), 0 0 0 5px var(--tfa-cobalt);
}

/* An unbroken run in a cell (an email address, a reference: tfa-cell-token, set by the script) wraps
   inside its cell when that is what makes the table fit (tfa-wrap-tokens); a table that scrolls anyway
   keeps it whole. Every other word keeps its whole shape. */
.tfa-tablewrap > table.tfa-wrap-tokens td.tfa-cell-token {
    min-width: 10rem;
    overflow-wrap: anywhere;
}

/* From 768 px a table that still does not fit keeps its grid and scrolls in its box (second review of
   6 October 2026: rows must stay comparable on a desktop): the first column stays in place, ruled off
   from the columns that pass under it, and the edge that has more fades out, so nobody takes the last
   visible column for the last one. The fade is a transparency mask, not a painted gradient; it lifts
   while the box has the keyboard, so the focus ring and every column are whole. */
.tfa-tablewrap.tfa-scrolls > table:not(.tfa-stacked) > thead > tr > :first-child,
.tfa-tablewrap.tfa-scrolls > table:not(.tfa-stacked) > tbody > tr > :first-child,
.tfa-tablewrap.tfa-scrolls > table:not(.tfa-stacked) > tfoot > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--tfa-white);
    box-shadow: inset -1px 0 0 var(--tfa-line);
}

.tfa-tablewrap.tfa-scrolls > table:not(.tfa-stacked) > tbody > tr:hover > :first-child {
    background-color: var(--tfa-surface);
}

.tfa-tablewrap.tfa-more-right {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--tfa-space-4)), transparent);
    mask-image: linear-gradient(to right, black calc(100% - var(--tfa-space-4)), transparent);
}

.tfa-tablewrap.tfa-more-right:focus-visible {
    -webkit-mask-image: none;
    mask-image: none;
}

/* A state in a cell stays on one line: "Submitted" never breaks into "Submitte" and "d" (a stacked
   phone row has the width, so there a long state may wrap instead of running off the edge). */
@media (min-width: 576px) {
    #region-main td .tfa-chip,
    #region-main td .tfa-stamp,
    #region-main td .badge {
        white-space: nowrap;
    }
}

/* Under 768 px a table that does not fit its column, and under 576 px every table, becomes ruled rows:
   each cell a line with its column's name before it (data-label, set by the shell's table script with
   the table roles that keep it a table for a screen reader), so no column is ever cut off at the edge
   (review of 6 October 2026). The script decides (tfa-stacked); from 768 px a table never stacks. The
   head row stays in the reading order, visually hidden. */
.tfa-tablewrap > table.tfa-stacked,
.tfa-tablewrap > table.tfa-stacked > tbody,
.tfa-tablewrap > table.tfa-stacked > tfoot,
.tfa-tablewrap > table.tfa-stacked > tbody > tr,
.tfa-tablewrap > table.tfa-stacked > tfoot > tr {
    display: block;
    width: 100%;
}

.tfa-tablewrap > table.tfa-stacked > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr,
.tfa-tablewrap > table.tfa-stacked > tfoot > tr {
    padding: var(--tfa-space-1) 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr > td,
.tfa-tablewrap > table.tfa-stacked > tbody > tr > th,
.tfa-tablewrap > table.tfa-stacked > tfoot > tr > td {
    display: grid;
    grid-template-columns: minmax(6rem, min(38%, 12rem)) minmax(0, 1fr);
    gap: 0 var(--tfa-space-2);
    width: auto;
    padding: var(--tfa-space-0-5) 0;
    text-align: left;
    border: 0;
    overflow-wrap: anywhere;
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr > [data-label]::before,
.tfa-tablewrap > table.tfa-stacked > tfoot > tr > [data-label]::before {
    content: attr(data-label);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    font-weight: 600;
    color: var(--tfa-muted);
    overflow-wrap: normal;
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr > :not([data-label]),
.tfa-tablewrap > table.tfa-stacked > tfoot > tr > :not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
}

/* A state chip or a button keeps its own width in the value column. An empty cell keeps its line and
   says so with a dash, so every record in the list has the same fields (an absent "Level" is
   information too); only Moodle's padding rows (tr.emptyrow) are not drawn. */
.tfa-tablewrap > table.tfa-stacked > tbody > tr > * > * {
    justify-self: start;
    max-width: 100%;
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr > td:empty::after {
    content: "\2014";
    color: var(--tfa-muted);
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr.emptyrow {
    display: none;
}

.tfa-tablewrap > table.tfa-stacked .badge {
    white-space: normal;
    text-align: left;
}

.tfa-tablewrap > table.tfa-stacked > tbody > tr:hover > td,
.tfa-tablewrap > table.tfa-stacked > tbody > tr:hover > th {
    background: transparent;
}

/* --- Status chips: a word and a shape, never colour alone -----------------
   The shape is drawn, not typed: a filled block (done, verified, mastered), a ring (ready,
   pending), a half block (in progress), a dashed ring (later, locked), a small square (foundation).
   Pills are for chips only, never for buttons. */
.tfa-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--tfa-space-1);
    min-height: 28px;
    padding: 0 var(--tfa-space-1);
    font-size: var(--tfa-shell-caption-size);
    line-height: var(--tfa-shell-caption-line);
    font-weight: 600;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-ink-300);
    border-radius: var(--tfa-radius-xs);
    text-decoration: none;
    text-align: left;
}

/* A status chip carries its shape before its word: the learner block of the logo, a 10 by 14 block
   standing on the chip's line, filled for a state that is reached and drawn as an outline for one
   that is waiting. */
.tfa-chip-state::before,
.tfa-chip-verified::before,
.tfa-chip-badge::before,
.tfa-chip-pending::before {
    content: "";
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: var(--tfa-ink-400);
}

.tfa-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfa-space-1);
    margin: var(--tfa-space-1) 0;
}

/* A chip that is a link is an action, and an action is never a pill (04 §4.5): it takes the
   register's target, the control radius and the 3:1 control edge, and keeps its state mark. */
.tfa-root a.tfa-chip,
.tfa-dash a.tfa-chip,
.tfa-chiprow a.tfa-chip {
    min-height: var(--tfa-reg-target);
    padding: 0 var(--tfa-space-2);
    font-size: var(--tfa-shell-label-size);
    line-height: var(--tfa-shell-label-line);
    border-color: var(--tfa-ink-400);
    border-radius: var(--tfa-shell-control-radius);
    transition: border-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                background-color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

.tfa-root a.tfa-chip:hover,
.tfa-dash a.tfa-chip:hover,
.tfa-chiprow a.tfa-chip:hover,
.tfa-chiprow a.tfa-chip:focus {
    border-color: var(--tfa-cobalt);
    background: var(--tfa-surface);
}

.tfa-chip-verified,
.tfa-chip-badge {
    background: var(--tfa-white);
    border-color: var(--tfa-ink-300);
}

.tfa-chip-verified::before,
.tfa-chip-badge::before {
    background: var(--tfa-success);
}

.tfa-chip-pending {
    background: var(--tfa-warning-tint);
    border-color: var(--tfa-warning);
    color: var(--tfa-ink);
}

.tfa-chip-pending::before {
    background: transparent;
    border: 2px solid var(--tfa-warning);
}

/* The skill states of the D11 contract on a stamp or chip (tree, drawer, milestones). */
.tfa-stamp {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: var(--tfa-space-0-5);
    padding: 2px var(--tfa-space-1);
    font-size: var(--tfa-shell-caption-size);
    line-height: var(--tfa-shell-caption-line);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: var(--tfa-radius-xs);
    transform: none;
    outline: 0;
}

.tfa-statestamp::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 2px solid currentColor;
}

.tfa-statestamp-mastered::before {
    background: currentColor;
}

.tfa-statestamp-in_progress::before {
    box-shadow: inset 4px 0 0 currentColor;
}

.tfa-statestamp-locked::before {
    border-style: dashed;
}

.tfa-statestamp-foundation::before {
    width: 6px;
    height: 6px;
    background: currentColor;
}

/* --- Empty states and refusals: one sentence, one way on ------------------- */
.tfa-empty,
.tfa-refusal-card {
    max-width: 40rem;
    padding: var(--tfa-space-4) var(--tfa-shell-card-pad);
    background: var(--tfa-white);
    border: 1px dashed var(--tfa-ink-300);
    border-radius: var(--tfa-shell-card-radius);
}

.tfa-empty > :first-child,
.tfa-refusal-card > :first-child {
    margin-top: 0;
}

/* Inside a card the empty state is the card's own sentence, never a second box (the craft floor:
   nested cards are always wrong). */
.tfa-card .tfa-empty,
.tfa-card .tfa-refusal-card {
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.tfa-refusal-why {
    margin: var(--tfa-space-1) 0 var(--tfa-space-3);
    line-height: 1.6;
}

/* --- The admin's working surfaces: queues, link rows, view-as -------------- */
.tfa-root .tfa-admin {
    font-size: var(--tfa-reg-body-size);
    line-height: var(--tfa-reg-body-line);
}

.tfa-dash .tfa-admin-queues,
.tfa-dash .tfa-admin-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tfa-space-1);
}

.tfa-dash .tfa-admin-queue,
.tfa-dash .tfa-admin-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tfa-space-1);
    min-height: var(--tfa-reg-target);
    padding: 0 var(--tfa-space-2);
    font-weight: 600;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-ink-400);
    border-radius: var(--tfa-shell-control-radius);
    text-decoration: none;
    transition: border-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                background-color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

.tfa-dash .tfa-admin-queue:hover,
.tfa-dash .tfa-admin-link:hover {
    color: var(--tfa-ink);
    background: var(--tfa-surface);
    border-color: var(--tfa-cobalt);
    text-decoration: none;
}

/* A queue with work waiting: its count is a filled block of ink; an empty queue shows no count. */
.tfa-dash .tfa-admin-queue-hot {
    border-color: var(--tfa-ink);
}

.tfa-dash .tfa-admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 6px;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-caption-size);
    line-height: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tfa-white);
    background: var(--tfa-ink);
    border-radius: var(--tfa-radius-xs);
}

.tfa-dash .tfa-admin-tilelink {
    color: inherit;
    text-decoration: none;
}

.tfa-dash .tfa-admin-tilelink:hover .tfa-stat strong {
    color: var(--tfa-cobalt-deep);
    text-decoration: underline;
}

.tfa-dash .tfa-viewas {
    margin: 0 0 var(--tfa-space-3);
    padding: var(--tfa-space-2);
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: var(--tfa-shell-card-radius);
}

.tfa-dash .tfa-viewas-label {
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-ink);
}

.tfa-dash .tfa-viewas-go {
    min-height: var(--tfa-reg-target);
    padding: 0 var(--tfa-space-2);
    font-weight: 600;
    color: var(--tfa-white);
    background: var(--tfa-cobalt);
    border: 1px solid var(--tfa-cobalt);
    border-radius: var(--tfa-shell-control-radius);
}

.tfa-dash .tfa-viewas-go:hover {
    background: var(--tfa-cobalt-deep);
    border-color: var(--tfa-cobalt-deep);
}

.tfa-dash .tfa-viewas-loginas {
    color: var(--tfa-cobalt-deep);
}

.tfa-dash .tfa-viewas-note,
.tfa-dash .tfa-viewas-hintline,
.tfa-dash .tfa-viewas-group,
.tfa-dash .tfa-viewas-meta {
    color: var(--tfa-muted);
}

/* --- Progress: the logo's two pieces. The track is the tutor bar (white, a 3:1 edge, square ends);
   the fill is the learner block in its sky tone, closed by a 2 px ink edge so the amount reads at
   3:1 however pale the block is (04 §1.1, §4.1). Never a control colour, never a pill. */
.tfa-tree-progress-track,
.tfa-root .tfa-tree-progress-track {
    box-sizing: border-box;
    height: 16px;
    padding: 2px;
    background-color: var(--tfa-white);
    border: 1px solid var(--tfa-ink-400);
    border-radius: var(--tfa-radius-xs);
    overflow: hidden;
}

.tfa-tree-progress-fill,
.tfa-root .tfa-tree-progress-fill {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    min-width: 0;
    background-color: var(--tfa-block-sky-face);
    border-radius: 2px;
}

/* The amount's end, drawn as a 2 px ink bar (not a border: the fill is a block, not a card). */
.tfa-tree-progress-fill::after,
.tfa-root .tfa-tree-progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--tfa-ink);
}

.tfa-tree-progress-fill[style*="width:0%"]::after,
.tfa-root .tfa-tree-progress-fill[style*="width:0%"]::after {
    content: none;
}

/* --- Focus: the two-tone ring on everything focusable inside the shell ----- */
.tfa-root :focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--tfa-white), 0 0 0 5px var(--tfa-cobalt);
}

/* A button keeps its Play and Build press edge inside the ring (04 §4.5: one shadow list, the edge
   first so it paints on top). */
.tfa-root .tfa-btn:focus-visible {
    box-shadow: var(--tfa-shadow-press, 0 0 transparent), var(--tfa-shadow-focus);
}

/* On an ink panel the ring turns white round an ink inner ring (04 §4.5, panel A11Y-03). The
   masthead still carries the recipe class tfa-grain-band but is painted white now, so it keeps the
   cobalt ring (review of 6 October 2026: a white ring on a white masthead could not be seen). */
.tfa-root .tfa-grain-band:not(.tfa-masthead) :focus-visible,
.tfa-root [data-surface="ink"] :focus-visible {
    box-shadow: 0 0 0 2px var(--tfa-ink), 0 0 0 5px var(--tfa-white);
}

/* --- Reduced motion: colour changes only; nothing moves -------------------- */
@media (prefers-reduced-motion: reduce) {
    .tfa-root *,
    .tfa-root *::before,
    .tfa-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .tfa-register-play .tfa-btn:active,
    .tfa-register-build .tfa-btn:active {
        transform: none;
    }
}

html[data-motion="reduce"] .tfa-root *,
body.tfa-reduce-motion .tfa-root * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* --- Small screens: the theme's sheet already keeps a 16 px gutter below 768 px, so the frame adds
   none (two gutters left a heading 255 px to wrap in); controls take the row ---------------------- */
@media (max-width: 767.98px) {
    #page.drawers .tfa-dash {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 575.98px) {

    .tfa-card {
        padding: var(--tfa-space-2);
    }

    .tfa-masthead-controls .tfa-btn {
        flex: 1 1 auto;
    }
}

/* --- Forced colours: states keep their shapes; focus is an outline -------- */
@media (forced-colors: active) {
    .tfa-root :focus-visible,
    .tfa-btn:focus-visible {
        outline: 2px solid CanvasText;
    }

    .tfa-chip-state::before,
    .tfa-chip-verified::before,
    .tfa-chip-badge::before,
    .tfa-chip-pending::before,
    .tfa-statestamp::before {
        forced-color-adjust: none;
        background: CanvasText;
        border-color: CanvasText;
    }

    .tfa-tabs .tfa-tab-active::after {
        forced-color-adjust: none;
        background: Highlight;
    }
}
/* v2026.10-shell end */

/* v2026.08-wp7 start ======== The Learning Tree page (DESIGN-SPEC v3, WP7 · PART D) ========
   D1 stage anatomy (SVG wood under DOM leaf chips on a daylight-paper sheet),
   D2 camera, D3 twelve-section grid, D4 leaf-open dock + bottom sheet, D5
   builder (tray, ghosts, anchors, ports), D6 view switch, D7 mastery beats,
   D9 founding/skeleton/error/offline/overflow, D10 focus + SR affordances.
   Every selector scoped under .tfa-root; every colour a --tfa-* prop. New
   props below alias config truth: ink-300 #9FB2CE / ink-100 #E3E9F2 /
   ink-900 var(--tfa-ink) straight from tailwind.config.js (B1 binds them). */

.tfa-root {
    --tfa-ink-900: var(--tfa-ink);   /* body ink; the selected-path tint base */
    --tfa-t7-inkpath: var(--tfa-ink-300);      /* limb path tint: ink at 40 % on white is ink-300 (D1) */
    --tfa-t7-glow-growth: rgba(21, 128, 61, 0.35); /* mastered-hover glow (D1) */
}

/* --- The twelve-section grid (D3) ----------------------------------------- */
.tfa-root .tfa-t7-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

@media (min-width: 1280px) {
    .tfa-root .tfa-t7-main {
        /* S2 spans 8 of 12 cols; S3–S5 stack in the 4-col rail. */
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    }
}

.tfa-root .tfa-t7-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .tfa-root .tfa-t7-duo {
        grid-template-columns: 1fr 1fr;
    }
}

.tfa-root .tfa-t7-rail,
.tfa-root .tfa-t7-railstack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.tfa-root .tfa-t7-railstack.tfa-rail-hidden {
    display: none;
}

/* 360: single column, order S1 S2 S4 S3 S5 (D3). */
@media (max-width: 767px) {
    .tfa-root .tfa-t7-railstack #tfa-s4 { order: -1; }
}

/* --- S2 · the stage: sheet on desk (D1 stack) ------------------------------ */
.tfa-root .tfa-t7-stagecard {
    min-width: 0;
}

.tfa-root .tfa-t7-stagebar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}

.tfa-root .tfa-stage-viewport {
    position: relative;
    height: 560px;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 20px;
    box-shadow: none;
    overflow: auto; /* no-JS: the sheet scrolls; keyboard-scrollable region */
}

.tfa-root.tfa-js .tfa-stage-viewport {
    overflow: hidden; /* the camera takes over (D2) */
    touch-action: none;
    cursor: grab;
}

.tfa-root.tfa-js .tfa-stage-viewport:active {
    cursor: grabbing;
}

/* Builder entry: the sheet edge turns dashed kraft (D5). */
.tfa-root .tfa-stage-viewport.tfa-stage-editing {
    border: 1.5px dashed var(--tfa-ink-400);
}

.tfa-root .tfa-stage-world {
    position: relative;
    transform-origin: 0 0;
}

.tfa-root.tfa-js .tfa-stage-world {
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 767px) {
    .tfa-root .tfa-stage-viewport { max-height: 70vh; height: 62vh; }
}

.tfa-root .tfa-stagehint {
    font-size: 13px;
    line-height: 1.45;
    margin: 8px 0 0;
}

/* --- The wood: SVG carries only limbs (D1) --------------------------------- */
.tfa-root .tfa-stage-svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
}

.tfa-root .tfa-limb {
    fill: none;
    stroke: var(--tfa-ink-400);
    stroke-width: 2;
    stroke-linecap: round;
}

.tfa-root .tfa-limb-sap {
    fill: none;
    stroke: var(--tfa-cobalt);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.tfa-root .tfa-limb-trunk {
    fill: none;
    stroke: var(--tfa-ink-400);
    stroke-width: 6;
    stroke-linecap: round;
}

.tfa-root .tfa-limb-trunk.tfa-limb-islive {
    stroke: var(--tfa-cobalt);
}

.tfa-root .tfa-limb-dot {
    fill: var(--tfa-ink-400);
}

.tfa-root .tfa-limb-dot.tfa-limb-islive {
    fill: var(--tfa-cobalt);
}

.tfa-root .tfa-sprig path {
    stroke: var(--tfa-gold-600);
    stroke-width: 1.5;
    fill: none;
}

.tfa-root .tfa-sprig circle {
    fill: var(--tfa-gold);
}

/* Selected: the limb path leaf→root tints ink-900 at 40% (D1). */
.tfa-root .tfa-limb.tfa-limb-onpath {
    stroke: var(--tfa-t7-inkpath);
    stroke-width: 2.5;
}

/* D5 connect preview + D7/D5 limb draws. */
.tfa-root .tfa-limb-preview {
    fill: none;
    stroke: var(--tfa-ink-400);
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

.tfa-root .tfa-limb-draw {
    stroke-dasharray: 600 600;
    animation: tfa-limbdraw 240ms var(--tfa-ease-standard) both;
}

.tfa-root .tfa-sap-draw {
    stroke-dasharray: 600 600;
    animation: tfa-limbdraw 420ms var(--tfa-ease-standard) both;
}

@keyframes tfa-limbdraw {
    from { stroke-dashoffset: 600; }
    to { stroke-dashoffset: 0; }
}

/* The ONE ambient: canopy sway ±0.6° / 6s alternate (D2). */
.tfa-root .tfa-stage-svg.tfa-sway {
    animation: tfa-sway 6s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
    will-change: transform;
}

.tfa-root .tfa-stage-svg.tfa-sway.tfa-sway-off {
    animation-play-state: paused;
}

@keyframes tfa-sway {
    from { transform: rotate(-0.6deg); }
    to { transform: rotate(0.6deg); }
}

/* --- Leaf chips: DOM buttons carrying all text (D1) ------------------------ */
.tfa-root .tfa-leaf-layer {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.tfa-root .tfa-leaf {
    position: absolute;
    width: 148px;
    min-height: 44px; /* touch */
    padding: 10px 14px 14px;
    border: 0;
    border-radius: 3px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0.01em;
    font-weight: 600;
    cursor: pointer;
    background: var(--tfa-white);
    color: var(--tfa-ink-900);
    transition: transform var(--tfa-duration-fast) var(--tfa-ease-enter),
                box-shadow var(--tfa-duration-fast) var(--tfa-ease-enter);
}

@media (pointer: fine) {
    .tfa-root .tfa-leaf { min-height: 36px; padding: 8px 12px 12px; }
}

.tfa-root .tfa-leaf-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
}

.tfa-root .tfa-leaf-ico {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.35;
}

/* Level ticks: 4px segments inside the bottom edge, 1–4 = Beginner→Extension
   confirmed (D1). */
.tfa-root .tfa-leaf-ticks {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    display: flex;
    gap: 3px;
    height: 4px;
}

.tfa-root .tfa-leaf-ticks i {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
}

.tfa-root .tfa-leaf-ticks .tfa-tick-on { opacity: 0.85; }
.tfa-root .tfa-leaf-ticks .tfa-tick-off { opacity: 0.16; }

/* States — paper (product) variant (D1). */
.tfa-root .tfa-leaf-state-mastered {
    background: var(--tfa-cobalt);
    color: var(--tfa-tint);
    box-shadow: none;
}

.tfa-root .tfa-leaf-state-mastered .tfa-leaf-ico { color: var(--tfa-white); }

.tfa-root .tfa-leaf-state-mastered:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 6px var(--tfa-t7-glow-growth);
}

.tfa-root .tfa-leaf-state-progress {
    background: var(--tfa-gold);
    border: 1px solid var(--tfa-gold-600);
    color: var(--tfa-ink);
    box-shadow: none;
}

.tfa-root .tfa-leaf-state-progress .tfa-leaf-ico { color: var(--tfa-gold-700); }

.tfa-root .tfa-leaf-state-available {
    background: var(--tfa-white);
    border: 1.5px solid var(--tfa-ink-300);
    color: var(--tfa-ink-900);
}

.tfa-root .tfa-leaf-state-available:hover { border-color: var(--tfa-ink-900); }

.tfa-root .tfa-leaf-state-locked {
    background: transparent;
    border: 1px solid var(--tfa-line);
    color: var(--tfa-pencil);
    box-shadow: none;
}

.tfa-root .tfa-leaf-state-locked .tfa-leaf-label,
.tfa-root .tfa-leaf-state-locked .tfa-leaf-ico { opacity: 0.45; }

.tfa-root .tfa-leaf:hover { transform: translateY(-2px); }
.tfa-root .tfa-leaf-state-locked:hover { transform: none; }

.tfa-root .tfa-leaf:active,
.tfa-root .tfa-leaf-pressed {
    transform: scale(0.97);
    transition-duration: 80ms;
}

/* New-this-week: 3px leaf-growth corner tick (D1). */
.tfa-root .tfa-leaf-new::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--tfa-success);
}

/* Selected: the ring stays (D1). */
.tfa-root .tfa-leaf-selected {
    outline: 2px solid var(--tfa-cobalt);
    outline-offset: 2px;
}

/* Builder: orphans get a kraft dashed halo (D5). */
.tfa-root .tfa-leaf-orphan {
    outline: 2px dashed var(--tfa-ink-400);
    outline-offset: 3px;
}

/* Bundles (D9 overflow): a mastered branch folded to one chip. */
.tfa-root .tfa-leaf-bundle {
    background: var(--tfa-cobalt);
    color: var(--tfa-tint);
    box-shadow: none;
}

/* Unfurl (B6 verb): scale 0.86→1, −2°→0, origin at the stem. */
.tfa-root .tfa-leaf-unfurl {
    animation: tfa-unfurl var(--tfa-duration-slow) var(--tfa-ease-enter) both;
    transform-origin: 50% 100%;
}

@keyframes tfa-unfurl {
    from { transform: scale(0.86) rotate(-2deg); opacity: 0.2; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.tfa-root .tfa-leaf-crossfade {
    transition: background-color var(--tfa-duration-base) var(--tfa-ease-standard),
                color var(--tfa-duration-base) var(--tfa-ease-standard),
                border-color var(--tfa-duration-base) var(--tfa-ease-standard);
}

/* Connect-mode target highlight (D5 keyboard parity). */
.tfa-root .tfa-leaf-connecttarget {
    outline: 2px dashed var(--tfa-gold-600);
    outline-offset: 3px;
}

/* Trunk-base stamp: PLANTED {mon yyyy} in gold-700 (D1). */
.tfa-root .tfa-stage-planted {
    position: absolute;
    color: var(--tfa-gold-700);
    pointer-events: none;
    font-size: 11px;
}

/* --- Stamp play (B6 Stamp verb + one glow-gold pulse) ----------------------- */
.tfa-root .tfa-stamp-play {
    animation: tfa-stampin var(--tfa-duration-fast) var(--tfa-ease-enter) both,
               tfa-glowpulse 700ms var(--tfa-ease-standard) 1;
}

@keyframes tfa-stampin {
    from { transform: scale(1.06) rotate(-3deg); opacity: 0; }
    to { transform: scale(1) rotate(-3deg); opacity: 1; }
}

@keyframes tfa-glowpulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 214, 107, 0.35); }
    45% { box-shadow: 0 0 0 12px rgba(255, 214, 107, 0.35); }
    100% { box-shadow: 0 0 0 18px rgba(255, 214, 107, 0); }
}

/* --- Zoom controls (D2: bottom-right, secondary style) ---------------------- */
.tfa-root .tfa-zoomctl {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 4;
}

.tfa-root .tfa-zoombtn {
    width: 36px;
    text-align: center;
    padding: 6px 0;
}

/* --- D9 · founding frame ----------------------------------------------------- */
.tfa-root .tfa-founding {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    max-width: 340px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 3;
    background: var(--tfa-white);
    padding: 12px 16px;
    border-radius: 12px;
}

.tfa-root .tfa-founding-voice {
    font-family: var(--tfa-family-display);
    font-style: italic; /* display-voice — the only italic */
    font-weight: 500;
    font-size: 22px;
    line-height: 1.35;
    color: var(--tfa-ink);
    margin: 0;
}

.tfa-root .tfa-seedling .tfa-seed-stem {
    stroke: var(--tfa-cobalt);
    stroke-width: 2;
    fill: none;
}

.tfa-root .tfa-seedling .tfa-seed-leafa,
.tfa-root .tfa-seedling .tfa-seed-leafb {
    fill: var(--tfa-success);
}

/* --- D9 · loading skeleton (feedback breathing, not ambient) ----------------- */
.tfa-root .tfa-stageskel {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--tfa-white);
    animation: tfa-breathe 1.6s ease-in-out infinite alternate;
}

@keyframes tfa-breathe {
    from { opacity: 0.5; }
    to { opacity: 0.7; }
}

.tfa-root .tfa-skel-limbs {
    position: absolute;
    inset: 10% 20%;
    width: 60%;
    height: 80%;
}

.tfa-root .tfa-skel-limbs path {
    stroke: var(--tfa-line);
    stroke-width: 3;
    fill: none;
    opacity: 0.3;
}

.tfa-root .tfa-skel-chip {
    position: absolute;
    width: 120px;
    height: 40px;
    border-radius: 3px;
    background: var(--tfa-tint);
}

.tfa-root .tfa-panel-skeleton .tfa-skel-line {
    display: block;
    height: 14px;
    border-radius: 3px;
    background: var(--tfa-tint);
    margin: 12px 0;
    animation: tfa-breathe 1.6s ease-in-out infinite alternate;
}

.tfa-root .tfa-panel-skeleton .tfa-skel-short { width: 55%; }

/* --- D9 · error: the frame never disappears --------------------------------- */
.tfa-root .tfa-stageerror {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 7;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-danger);
    border-radius: 6px;
    box-shadow: var(--tfa-shadow-overlay);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 320px;
}

.tfa-root .tfa-stamp-error { color: var(--tfa-danger); }

.tfa-root .tfa-stageerror-line {
    color: var(--tfa-danger);
    font-size: 15px;
    line-height: 1.55;
}

/* --- D9 · offline ------------------------------------------------------------ */
.tfa-root .tfa-offline {
    background: var(--tfa-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    color: var(--tfa-pencil);
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 12px;
    margin: 0 0 8px;
}

.tfa-root.tfa-is-offline .tfa-tray .tfa-tray-item,
.tfa-root.tfa-is-offline .tfa-tray button {
    background: var(--tfa-tint);
    border-color: var(--tfa-tint);
    color: var(--tfa-pencil);
    box-shadow: none;
    pointer-events: none;
}

/* --- S1 · masthead extensions (view switch lives on ink) --------------------- */
.tfa-root .tfa-t7-masthead .tfa-masthead-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- S3 · ledger --------------------------------------------------------------- */
.tfa-root .tfa-ledger-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
}

.tfa-root .tfa-ledger-row + .tfa-ledger-row {
    border-top: 1px solid var(--tfa-line);
}

.tfa-root .tfa-ledger-num {
    font-family: var(--tfa-family-display);
    font-weight: 600;
    font-size: clamp(44px, 38px + 1.2vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tfa-ink);
    min-width: 2ch;
}

.tfa-root .tfa-ledger-mastered .tfa-ledger-num { color: var(--tfa-cobalt-deep); }

.tfa-root .tfa-ledger-label {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tfa-pencil);
}

.tfa-root .tfa-num-tick {
    display: inline-block;
    animation: tfa-numtick var(--tfa-duration-base) var(--tfa-ease-enter);
}

@keyframes tfa-numtick {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.tfa-root .tfa-t7-orphanwarn {
    color: var(--tfa-danger);
    font-size: 13px;
}

/* --- S4 · next leaf: THE gold object on an ink mini-panel --------------------- */
.tfa-root .tfa-t7-next {
    border-radius: 12px;
    padding: 18px 20px 20px;
    color: var(--tfa-surface);
    overflow: hidden;
}

.tfa-root .tfa-t7-next > * { position: relative; z-index: 1; }

.tfa-root .tfa-t7-next-kicker {
    display: block;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tfa-gold);
    margin-bottom: 10px;
}

.tfa-root .tfa-t7-next-card {
    display: block;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 10px;
}

.tfa-root .tfa-t7-next-name {
    font-family: var(--tfa-family-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--tfa-ink);
}

.tfa-root .tfa-t7-next-caption {
    color: var(--tfa-surface);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 8px;
    opacity: 0.9;
}

.tfa-root .tfa-t7-next .tfa-t7-next-show {
    color: var(--tfa-gold);
    text-decoration: underline;
    text-decoration-color: var(--tfa-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
    font-size: 14px;
}

.tfa-root .tfa-t7-sugglist {
    list-style: none;
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(248, 250, 253, 0.18);
}

.tfa-root .tfa-t7-sugglist .tfa-suggest-item {
    padding: 8px 0;
    color: var(--tfa-surface);
}

.tfa-root .tfa-t7-sugglist .tfa-suggest-item + .tfa-suggest-item {
    border-top: 1px solid rgba(248, 250, 253, 0.18);
}

.tfa-root .tfa-t7-sugglist .tfa-suggest-link {
    color: var(--tfa-white);
    text-decoration-color: var(--tfa-gold);
}

.tfa-root .tfa-t7-sugglist .tfa-suggest-reason {
    color: var(--tfa-surface);
    opacity: 0.75;
    font-size: 13px;
    margin: 2px 0 6px;
}

.tfa-root .tfa-t7-next :focus-visible { outline-color: var(--tfa-gold); }

/* --- S5 / D4 · the rung ladder (Beginner → Extension, verbatim) --------------- */
.tfa-root .tfa-rungladder {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-root .tfa-rung {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
}

.tfa-root .tfa-rung + .tfa-rung {
    border-top: 1px solid var(--tfa-line);
}

.tfa-root .tfa-rung-name {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 15px;
    color: var(--tfa-ink);
}

.tfa-root .tfa-tierstate {
    font-size: 12px;
    font-weight: 600;
}

.tfa-root .tfa-tierstate-notstarted { color: var(--tfa-pencil); }
.tfa-root .tfa-tierstate-inprogress { color: var(--tfa-gold-600); }
.tfa-root .tfa-tierstate-passed { color: var(--tfa-gold-700); }
.tfa-root .tfa-tierstate-confirmed { color: var(--tfa-cobalt-deep); }

.tfa-root .tfa-rung-currentstamp {
    color: var(--tfa-gold-700); /* current rung: gold-700 outline stamp (S5) */
    font-size: 10px;
    padding: 2px 6px;
}

.tfa-root .tfa-t7-ladder-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- S6 · this week ------------------------------------------------------------ */
.tfa-root .tfa-t7-weekline {
    font-size: 17px;
    line-height: 1.6;
    color: var(--tfa-ink);
    display: flex;
    align-items: center;
}

.tfa-root .tfa-growthtick {
    display: inline-block;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--tfa-success);
    margin-right: 10px;
}

.tfa-root .tfa-t7-weekquiet { font-style: italic; }

/* --- S7 · milestone stamps ------------------------------------------------------ */
.tfa-root .tfa-t7-stampwall {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    padding: 6px 2px;
}

.tfa-root .tfa-milestone {
    color: var(--tfa-pencil);
    border-style: dashed;
    opacity: 0.8; /* unearned: a dashed pencil outline, still readable */
}

.tfa-root .tfa-milestone.tfa-milestone-earned {
    color: var(--tfa-gold-700);
    opacity: 1;
}

/* --- S9 · tutor notes: the handwriting ------------------------------------------ */
.tfa-root .tfa-t7-note {
    background: var(--tfa-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    padding: 14px 16px;
    margin: 0 0 12px;
}

.tfa-root .tfa-t7-note-voice {
    font-family: var(--tfa-family-display);
    font-style: italic; /* display-voice */
    font-weight: 500;
    font-size: 22px;
    line-height: 1.35;
    color: var(--tfa-ink);
    margin: 0 0 6px;
}

.tfa-root .tfa-t7-note-sig { font-size: 13px; margin: 0; }

/* --- S10 · resources -------------------------------------------------------------- */
.tfa-root .tfa-t7-resourcelist {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.tfa-root .tfa-t7-resource {
    font-size: 15px;
    line-height: 1.55;
    padding: 8px 0;
}

.tfa-root .tfa-t7-resource + .tfa-t7-resource {
    border-top: 1px solid var(--tfa-line);
}

.tfa-root .tfa-t7-reviewdue {
    display: inline-block;
    border: 1px solid var(--tfa-gold-600);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 600;
}

/* --- S11 · share strip -------------------------------------------------------------- */
.tfa-root .tfa-t7-share {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-top: 2px solid var(--tfa-ink);
    padding: 14px 4px;
    margin: 0 0 20px;
}

.tfa-root .tfa-t7-sharecaption { font-size: 13px; }

/* --- S12 · footer ledger -------------------------------------------------------------- */
.tfa-root .tfa-t7-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 2px solid var(--tfa-ink);
    padding: 14px 4px 8px;
    margin-bottom: 12px;
}

.tfa-root .tfa-t7-footerbrand {
    font-weight: 600;
    color: var(--tfa-ink);
}

.tfa-root .tfa-t7-footerkept {
    color: var(--tfa-pencil);
    font-size: 13px;
}

/* --- D4 · leaf panel (dock + sheet share this recipe) --------------------------------- */
.tfa-root .tfa-leafpanel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.tfa-root .tfa-leafpanel .tfa-leafpanel-title {
    font-size: clamp(24px, 20px + 1.1vw, 32px); /* display-md */
    line-height: 1.15;
}

.tfa-root .tfa-leafpanel-close {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
}

.tfa-root .tfa-statestamp {
    font-size: var(--tfa-shell-caption-size);
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 8px;
}

/* A state is its word and its shape (the shell's .tfa-statestamp::before); the colour stays ink,
   because cobalt means "press" and gold is the mastered moment only. */
.tfa-root .tfa-statestamp-mastered,
.tfa-root .tfa-statestamp-progress { color: var(--tfa-ink); }
.tfa-root .tfa-statestamp-available { color: var(--tfa-ink); }
.tfa-root .tfa-statestamp-locked { color: var(--tfa-pencil); }

.tfa-root .tfa-leafpanel-history { font-size: 13px; }

.tfa-root .tfa-leafpanel-confirm {
    border-top: 1px solid var(--tfa-line);
    margin-top: 12px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tfa-root .tfa-note-label {
    display: block;
    font-size: 13px;
    color: var(--tfa-pencil);
    margin-bottom: 4px;
}

.tfa-root .tfa-note-field {
    width: 100%;
    resize: vertical;
}

.tfa-root .tfa-panel-settle {
    animation: tfa-settlein var(--tfa-duration-base) var(--tfa-ease-enter) both;
}

@keyframes tfa-settlein {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile bottom sheet (D4). Scrim and sheet are appended INSIDE .tfa-root
   (position: fixed still spans the viewport), so props resolve and scope
   holds. */
.tfa-root .tfa-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--tfa-ink) 72%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tfa-duration-base) var(--tfa-ease-standard);
    z-index: 1040;
}

.tfa-root .tfa-scrim.tfa-scrim-on {
    opacity: 1;
    pointer-events: auto;
}

.tfa-root .tfa-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 76vh;
    overflow: auto;
    background: var(--tfa-white);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--tfa-shadow-overlay);
    transform: translateY(100%);
    transition: transform var(--tfa-duration-slow) var(--tfa-ease-enter);
    z-index: 1050;
    padding: 6px 16px 24px;
}

.tfa-root .tfa-sheet.tfa-sheet-on { transform: translateY(0); }
.tfa-root .tfa-sheet.tfa-sheet-instant,
.tfa-root .tfa-scrim.tfa-scrim-instant { transition: none; }

.tfa-root .tfa-sheet .tfa-sheet-grab {
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--tfa-line);
    margin: 8px auto 12px;
}

.tfa-root .tfa-sheet .tfa-leafpanel { box-shadow: none; border: 0; margin: 0; }

/* --- D5 · builder ---------------------------------------------------------------------- */
.tfa-root .tfa-tray {
    background: var(--tfa-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 18px;
    margin-top: 16px;
    animation: tfa-settlein var(--tfa-duration-base) var(--tfa-ease-enter) both;
}

.tfa-root .tfa-tray h3 { margin-top: 0; }

.tfa-root .tfa-tray-row { padding: 3px 0; }

.tfa-root .tfa-tray-item {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 3px;
    box-shadow: none;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tfa-ink);
    cursor: grab;
    touch-action: none;
}

.tfa-root .tfa-tray-item:hover {
    border-color: var(--tfa-ink-400);
    transform: translateY(-2px);
    box-shadow: none;
}

.tfa-root .tfa-tray-blank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.tfa-root .tfa-tray-blank label { font-size: 13px; color: var(--tfa-pencil); }
.tfa-root .tfa-tray-blank input { flex: 1 1 120px; }
.tfa-root .tfa-tray-blankitem { width: auto; }

.tfa-root .tfa-tray-hint { font-size: 13px; margin: 4px 0; }

.tfa-root .tfa-tray-nojs,
.tfa-root .tfa-tray-pruned { margin-top: 10px; }

.tfa-root .tfa-tray-pruned .tfa-pruned-name { text-decoration: line-through; color: var(--tfa-pencil); }

.tfa-root .tfa-hiddenlist {
    list-style: none;
    margin: 6px 0;
    padding: 0;
}

.tfa-root .tfa-hiddenlist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.tfa-root .tfa-savestate { font-size: 13px; }
.tfa-root .tfa-savestate-error { color: var(--tfa-danger); }

/* Ghost: elev-3, −2°, 90% (D5). Appended inside .tfa-root. */
.tfa-root .tfa-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 3px;
    box-shadow: var(--tfa-shadow-overlay);
    padding: 10px 14px;
    max-width: 168px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tfa-ink);
    opacity: 0.9;
    pointer-events: none;
    will-change: transform;
}

/* Anchors: 20px dashed ink-300 circles; snap fills ink-100 (D5). */
.tfa-root .tfa-anchors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.tfa-root .tfa-anchor {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px dashed var(--tfa-ink-300);
    border-radius: 50%;
    background: transparent;
}

.tfa-root .tfa-anchor-snap {
    border-style: solid;
    background: var(--tfa-ink-100);
}

/* Connect port: visible on hover/focus in builder (D5). */
.tfa-root .tfa-port {
    position: absolute;
    right: -7px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tfa-white);
    border: 2px solid var(--tfa-ink-400);
    opacity: 0;
    transition: opacity var(--tfa-duration-fast) var(--tfa-ease-standard);
    cursor: crosshair;
}

.tfa-root.tfa-tree7-editing .tfa-leaf:hover .tfa-port,
.tfa-root.tfa-tree7-editing .tfa-leaf:focus .tfa-port { opacity: 1; }

/* Cycle refusal: ochre "would loop" caption, 3s (D5). */
.tfa-root .tfa-looprefusal {
    position: absolute;
    top: -26px;
    left: 0;
    background: var(--tfa-danger-tint);
    border: 1px solid var(--tfa-danger);
    border-radius: 3px;
    color: var(--tfa-danger);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 7px;
    white-space: nowrap;
    z-index: 8;
}

/* Undo toast (canonical hides only — 6s). Appended inside .tfa-root. */
.tfa-root .tfa-undotoast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tfa-ink);
    color: var(--tfa-white);
    border-radius: 6px;
    box-shadow: var(--tfa-shadow-overlay);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2000;
    font-size: 14px;
}

/* Keyboard-add label input floats at the anchor. */
.tfa-root .tfa-anchorlabel {
    position: absolute;
    width: 148px;
    z-index: 6;
}

/* Publish: the PLANTED stamp overlay. */
.tfa-root .tfa-planted-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    pointer-events: none;
}

.tfa-root .tfa-planted-stamp {
    font-size: 20px;
    color: var(--tfa-gold-700);
    background: var(--tfa-white);
    padding: 12px 20px;
}

/* --- Visually hidden (SR list + live regions) ------------------------------------------ */
.tfa-root .tfa-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Reduced motion: the B6 variant for everything above -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tfa-root .tfa-stage-svg.tfa-sway { animation: none; }
    .tfa-root .tfa-leaf:hover,
    .tfa-root .tfa-leaf-state-mastered:hover,
    .tfa-root .tfa-tray-item:hover { transform: none; }
    .tfa-root .tfa-leaf-unfurl,
    .tfa-root .tfa-panel-settle,
    .tfa-root .tfa-tray,
    .tfa-root .tfa-stamp-play,
    .tfa-root .tfa-limb-draw,
    .tfa-root .tfa-sap-draw,
    .tfa-root .tfa-num-tick,
    .tfa-root .tfa-stageskel,
    .tfa-root .tfa-panel-skeleton .tfa-skel-line { animation: none; }
    .tfa-root .tfa-sheet, .tfa-root .tfa-scrim { transition: none; }
    .tfa-root .tfa-stamp-play { box-shadow: none; }
}
/* v2026.08-wp7 end */

/* v2026.08-wp8 start ======== The content reader — inside a leaf (DESIGN-SPEC v3, WP8 · D12) ========
   leaf.php: slim grain-band masthead, reading sheet on the desk (720px
   measure), the progress spine ≥1280 / sticky bar ≤1279, the twelve section
   treatments, the tutor rail, and the D12 states. Every colour consumes a
   WP0 custom prop; the only new props live in this block (--tfa-lr-*). */

.tfa-root {
    --tfa-lr-measure: 720px;   /* D12: the reading measure. */
    --tfa-lr-rail: 280px;      /* D12: the progress-spine rail. */
}

/* --- Frame: masthead ------------------------------------------------------ */
.tfa-root .tfa-lr-masthead {
    align-items: center;
    padding: 14px 24px;
}

.tfa-root .tfa-lr-crumb {
    color: var(--tfa-cobalt);
    font-size: 13px;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    align-self: flex-start;
}

.tfa-root .tfa-lr-crumb:hover {
    color: var(--tfa-cobalt-deep);
    text-decoration-thickness: 2px;
}

/* Slim: the leaf name steps down from the tree page's display-lg; clamps at
   ~20ch with ellipsis so the band never grows (D12 personalisation proof). */
.tfa-root h1.tfa-lr-leafname {
    font-size: clamp(24px, 20px + 1.1vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 2px 0 0;
    border: 0;
    padding: 0;
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The level as a stamp beside the title (names verbatim). */
.tfa-root .tfa-lr-rungstamp {
    color: var(--tfa-ink);
    background: transparent;
}

/* --- Frame: desk, sheet, rail --------------------------------------------- */
.tfa-root .tfa-lr-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 8px 0 24px;
}

.tfa-root .tfa-lr-sheetcol {
    width: 100%;
    max-width: var(--tfa-lr-measure);
    min-width: 0;
}

.tfa-root .tfa-lr-sheet {
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 20px;
    padding: 32px clamp(20px, 5vw, 48px) 40px;
    color: var(--tfa-ink);
}

.tfa-root .tfa-lr-rail {
    display: none;
}

@media (min-width: 1280px) {
    /* The theme's main column is narrower than 720+280 — the reader breaks
       out to the B4 content width so the D12 measure + rail both hold. */
    .tfa-root.tfa-lr {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: min(1160px, 100vw - 48px);
        max-width: none; /* The theme caps .tfa-dash at 52rem — B4 wins here. */
    }

    .tfa-root .tfa-lr-rail {
        display: block;
        width: var(--tfa-lr-rail);
        flex: 0 0 var(--tfa-lr-rail);
        position: sticky;
        top: 16px;
    }

    .tfa-root .tfa-lr-bar { display: none; }
}

/* 360: sheet edge-to-edge inside the 20px page margins; targets ≥44px. */
@media (max-width: 480px) {
    .tfa-root .tfa-lr-sheet {
        border-radius: 12px;
        padding: 20px 16px 28px;
    }

    .tfa-root .tfa-lr .tfa-btn,
    .tfa-root .tfa-lr-reveal,
    .tfa-root .tfa-lr-readycheck,
    .tfa-root .tfa-lr-barselect {
        min-height: 44px;
    }

    .tfa-root .tfa-lr-readyopt label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Skip link + pick-up chip --------------------------------------------- */
.tfa-root .tfa-lr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 30;
    background: var(--tfa-ink);
    color: var(--tfa-white);
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
}

.tfa-root .tfa-lr-skip:focus-visible {
    left: 16px;
    top: 12px;
}

.tfa-root .tfa-lr-pickup {
    display: inline-block;
    margin: 12px 0 0;
    padding: 8px 14px;
    color: var(--tfa-ink);
    text-decoration: none;
}

/* --- The ≤1279 sticky bar --------------------------------------------------- */
.tfa-root .tfa-lr-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    padding: 8px 12px 10px;
    margin: 0 0 12px;
    box-shadow: none;
}

.tfa-root .tfa-lr-barrule {
    height: 2px;
    background: var(--tfa-line);
    border-radius: 1px;
    overflow: hidden;
}

.tfa-root .tfa-lr-barfill {
    height: 100%;
    width: 0;
    background: var(--tfa-ink);
}

.tfa-root .tfa-lr-barrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.tfa-root .tfa-lr-barcount {
    font-size: 13px;
    line-height: 1.45;
    color: var(--tfa-pencil);
    white-space: nowrap;
}

.tfa-root .tfa-lr-barselect {
    max-width: 60%;
}

/* --- The progress spine ------------------------------------------------------ */
.tfa-root .tfa-lr-spinelist {
    list-style: none;
    margin: 0;
    padding: 0 0 0 8px;
    border-left: 1px solid var(--tfa-line);
}

.tfa-root .tfa-lr-spineitem { margin: 0 0 14px; }

.tfa-root .tfa-lr-dot {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tfa-pencil);
    font-size: 13px;
    line-height: 1.45;
}

.tfa-root .tfa-lr-dotmark {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid var(--tfa-pencil);
    background: var(--tfa-white);
    transition: background-color var(--tfa-duration-fast) var(--tfa-ease-standard),
                border-color var(--tfa-duration-fast) var(--tfa-ease-standard);
}

/* The mastery-check dot is gold-400 (D12). */
.tfa-root .tfa-lr-spineitem-check .tfa-lr-dotmark {
    border-color: var(--tfa-gold-600);
    background: var(--tfa-gold);
}

.tfa-root .tfa-lr-dot-done .tfa-lr-dotmark {
    background: var(--tfa-pencil);
}

/* Current dot: filled ink-950. */
.tfa-root .tfa-lr-dot-on {
    color: var(--tfa-ink);
    font-weight: 600;
}

.tfa-root .tfa-lr-dot-on .tfa-lr-dotmark {
    border-color: var(--tfa-ink);
    background: var(--tfa-ink);
}

/* --- Section frames ----------------------------------------------------------- */
.tfa-root .tfa-lr-section {
    margin: 0 0 40px;
}

.tfa-root .tfa-lr-head {
    font-family: var(--tfa-family-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tfa-ink);
    border-bottom: 2px solid var(--tfa-ink);
    padding: 0 0 8px;
    margin: 0 0 16px;
}

/* §4 promotes to display-lg — the core of the page. */
.tfa-root .tfa-lr-head-core {
    font-size: clamp(28px, 22px + 1.8vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.008em;
}

.tfa-root .tfa-lr-subhead {
    font-family: var(--tfa-family-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tfa-ink);
    margin: 20px 0 8px;
}

.tfa-root .tfa-lr-body,
.tfa-root .tfa-lr-exstep,
.tfa-root .tfa-lr-probq,
.tfa-root .tfa-lr-solline {
    font-size: 17px;
    line-height: 1.6;
    color: var(--tfa-ink);
    overflow-wrap: anywhere;
}

.tfa-root .tfa-lr-lead,
.tfa-root .tfa-lr-intention {
    font-size: 19px;
    line-height: 1.6;
    color: var(--tfa-ink);
    overflow-wrap: anywhere;
}

.tfa-root .tfa-lr-s2 { padding-top: 12px; }

.tfa-root .tfa-lr-empty {
    font-size: 13px;
    line-height: 1.45;
}

/* The whole-rung empty state: seedling + pencil voice. */
.tfa-root .tfa-lr-unwritten {
    text-align: center;
    padding: 24px 0 8px;
}

.tfa-root .tfa-lr-unwritten .tfa-seedling { display: inline-block; }

.tfa-root .tfa-lr-unwritten-voice {
    font-family: var(--tfa-family-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.35;
    color: var(--tfa-pencil);
    margin: 8px 0 4px;
}

/* --- §1 manila card + criteria checklist -------------------------------------- */
.tfa-root .tfa-lr-manila {
    background: var(--tfa-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    padding: 16px 20px;
}

.tfa-root .tfa-lr-critlead { margin: 12px 0 6px; }

.tfa-root .tfa-lr-critlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-root .tfa-lr-crit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.55;
}

.tfa-root .tfa-lr-critbox {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border: 2px solid var(--tfa-ink);
    border-radius: 3px;
    background: var(--tfa-white);
    position: relative;
}

.tfa-root .tfa-lr-crit-done .tfa-lr-critbox { background: var(--tfa-ink); }

.tfa-root .tfa-lr-crit-done .tfa-lr-critbox::after {
    content: "✓";
    position: absolute;
    inset: -4px 0 0;
    color: var(--tfa-gold);
    font-size: 12px;
    text-align: center;
}

/* --- §3 sunken well + readiness ------------------------------------------------ */
.tfa-root .tfa-lr-well {
    background: var(--tfa-surface);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 20px;
}

.tfa-root .tfa-lr-recap {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-root .tfa-lr-recaprow {
    font-size: 15px;
    line-height: 1.55;
    padding: 6px 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-root .tfa-lr-recaprow:last-child { border-bottom: 0; }

.tfa-root .tfa-lr-readyitem {
    border: 0;
    border-top: 1px solid var(--tfa-line);
    margin: 10px 0 0;
    padding: 12px 0 0;
}

.tfa-root .tfa-lr-readyq {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--tfa-ink);
    padding: 0;
}

.tfa-root .tfa-lr-readyopt { margin: 4px 0; }

.tfa-root .tfa-lr-readyopt label { margin-left: 8px; }

.tfa-root .tfa-lr-readyinput { max-width: 220px; }

.tfa-root .tfa-lr-readycheck { margin-left: 8px; }

/* Correct = the Stamp verb (gold-700 on paper); wrong = a pencil hint. */
.tfa-root .tfa-lr-readyresult { margin-left: 10px; }

.tfa-root .tfa-lr-ready-ok {
    color: var(--tfa-gold-700);
    font-size: 12px;
}

.tfa-root .tfa-lr-ready-hint {
    display: block;
    color: var(--tfa-pencil);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
}

.tfa-root .tfa-lr-readyanswer,
.tfa-root .tfa-lr-solline { margin: 6px 0; }

/* --- §4 figure + maths cards ---------------------------------------------------- */
.tfa-root .tfa-lr-figure {
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px;
    margin: 20px 0;
}

.tfa-root .tfa-lr-figsvg svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.tfa-root .tfa-lr-figcaption,
.tfa-root .tfa-lr-figalt {
    color: var(--tfa-pencil);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    margin: 8px 0 0;
}

.tfa-root .tfa-lr-maths {
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    padding: 18px 16px;
    margin: 20px 0;
    text-align: center;
}

.tfa-root .tfa-lr-mathsline {
    font-size: 19px;
    line-height: 1.6;
    color: var(--tfa-ink);
    font-variant-numeric: tabular-nums;
}

/* A maths block states one step per line (NOTATION-AUDIT N4): keep the authored line breaks on screen,
   and let a long display line scroll inside its card rather than push the page sideways. Print is left
   as it was; the workbook PDF already keeps the breaks. */
@media screen {
    .tfa-root .tfa-lr-mathsline {
        white-space: pre-line;
    }

    .tfa-root .tfa-lr-maths {
        overflow-x: auto;
    }
}

/* --- §5 worked examples ----------------------------------------------------------- */
.tfa-root .tfa-lr-example {
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 16px;
    background: var(--tfa-white);
}

.tfa-root .tfa-lr-exstamp {
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tfa-gold-700);
    margin: 0 0 8px;
}

.tfa-root .tfa-lr-exproblem {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--tfa-ink);
}

.tfa-root .tfa-lr-exclose { font-weight: 600; }

.tfa-root .tfa-lr-westep[hidden] { display: none; }

/* --- Reveals (Settle open; B6) ------------------------------------------------------ */
.tfa-root .tfa-lr-reveal {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    background-position: 0 calc(100% - 5px);
}

.tfa-root .tfa-lr-reveal:hover { background-size: 100% 2px; }

.tfa-root .tfa-lr-reveal[aria-expanded="true"] { color: var(--tfa-gold-700); }

@keyframes tfa-lr-settle {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.tfa-root .tfa-lr-settle {
    animation: tfa-lr-settle var(--tfa-duration-base) var(--tfa-ease-enter) both;
}

@keyframes tfa-lr-stampplay {
    from { opacity: 0; transform: scale(1.06) rotate(-3deg); }
    to { opacity: 1; transform: scale(1) rotate(-3deg); }
}

.tfa-root .tfa-lr-stampplay {
    animation: tfa-lr-stampplay var(--tfa-duration-fast) var(--tfa-ease-enter) both;
}

.tfa-root .tfa-lr-glow { box-shadow: 0 0 0 6px rgba(255, 214, 107, 0.35); }

/* --- §6 practice set ------------------------------------------------------------------ */
.tfa-root .tfa-lr-problems {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    counter-reset: tfa-lr-problem;
}

.tfa-root .tfa-lr-problem {
    counter-increment: tfa-lr-problem;
    position: relative;
    padding: 14px 0 14px 44px;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-root .tfa-lr-problem:last-child { border-bottom: 0; }

/* Hanging serif numerals — the signature. */
.tfa-root .tfa-lr-problem::before {
    content: counter(tfa-lr-problem);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--tfa-family-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tfa-gold-700);
    font-variant-numeric: tabular-nums;
}

/* --- D8b download card ------------------------------------------------------------------ */
.tfa-root .tfa-lr-download {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 20px;
    margin: 0 0 8px;
}

.tfa-root .tfa-lr-sheetpreview {
    flex: 0 0 56px;
    width: 56px;
    height: 76px;
    background: var(--tfa-white);
    border: 1px solid var(--tfa-line);
    border-radius: 3px;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0 9px, var(--tfa-line) 9px 10px);
}

.tfa-root .tfa-lr-dtext { min-width: 0; }

.tfa-root .tfa-lr-dlead {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 4px;
}

.tfa-root .tfa-lr-dcaption {
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 10px;
}

.tfa-root .tfa-lr-dsoon {
    display: inline-block;
    font-size: 13px;
    margin-left: 10px;
}

/* --- §7 + §9 ink mini-panels (Law 1: the sheet's true-dark objects) ---------------------- */
.tfa-root .tfa-lr-inkpanel {
    border-radius: 12px;
    padding: 20px 24px;
    color: var(--tfa-white);
}

.tfa-root .tfa-lr-inkpanel > * { position: relative; z-index: 1; }

.tfa-root .tfa-lr-inkhead {
    font-family: var(--tfa-family-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tfa-white);
    margin: 0 0 10px;
    border: 0;
    padding: 0;
}

.tfa-root .tfa-lr-inkbody {
    font-size: 15px;
    line-height: 1.55;
    color: var(--tfa-white);
}

.tfa-root .tfa-lr-inkcaption {
    font-size: 13px;
    line-height: 1.45;
    color: var(--tfa-gold);
    margin: 8px 0 0;
}

.tfa-root .tfa-lr-inklink {
    color: var(--tfa-white);
    text-decoration-color: var(--tfa-gold);
}

.tfa-root .tfa-lr-inklink:hover { color: var(--tfa-gold); }

.tfa-root .tfa-lr-warmlinks { margin: 8px 0; }

.tfa-root .tfa-lr-passstamp {
    color: var(--tfa-gold);
    margin: 4px 0 8px;
}

.tfa-root .tfa-lr-checkstart { margin-top: 12px; }

.tfa-root .tfa-lr-checkbody { margin-top: 16px; }

.tfa-root .tfa-lr-mcitem {
    border: 0;
    border-top: 1px solid rgba(248, 250, 253, 0.18);
    margin: 12px 0 0;
    padding: 12px 0 0;
}

.tfa-root .tfa-lr-mcq {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--tfa-white);
    padding: 0;
}

.tfa-root .tfa-lr-mcnum {
    font-family: var(--tfa-family-display);
    color: var(--tfa-gold);
    font-variant-numeric: tabular-nums;
}

.tfa-root .tfa-lr-mcitem label { color: var(--tfa-white); }

.tfa-root .tfa-lr-retryform { margin-top: 12px; }

.tfa-root .tfa-lr-markoff { margin-top: 14px; }

.tfa-root .tfa-lr-markoff .tfa-note-label { color: var(--tfa-gold); }

/* §9 stretch: THE gold object of the page. */
.tfa-root .tfa-lr-stretchstamp {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tfa-ink);
    transform: rotate(-3deg);
    margin: 0 0 12px;
}

.tfa-root .tfa-lr-stretch .tfa-lr-reveal { color: var(--tfa-gold); }

.tfa-root .tfa-lr-stretchsol .tfa-lr-solline { color: var(--tfa-white); }

/* --- §8 watch-out cards -------------------------------------------------------------------- */
.tfa-root .tfa-lr-trapcard { margin: 0 0 12px; }

.tfa-root .tfa-lr-trapstamp {
    color: var(--tfa-gold-700);
    margin: 0 0 10px;
}

.tfa-root .tfa-lr-trap {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 4px;
}

.tfa-root .tfa-lr-fix {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* --- §12 resources ---------------------------------------------------------------------------- */
.tfa-root .tfa-lr-resources {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tfa-root .tfa-lr-resource {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    padding: 8px 0;
    border-bottom: 1px solid var(--tfa-line);
}

.tfa-root .tfa-lr-resource:last-child { border-bottom: 0; }

/* Kraft string icon: a loop of string, pure CSS. */
.tfa-root .tfa-lr-stringico {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--tfa-ink-400);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

/* --- Tutor rail (server-gated; overlay ≤768) -------------------------------------------------- */
.tfa-root .tfa-lr-tutorrail {
    background: var(--tfa-tint);
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 18px;
    margin-top: 20px;
}

.tfa-root .tfa-lr-railhead {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tfa-gold-700);
    margin: 0 0 10px;
    border: 0;
    padding: 0;
}

.tfa-root .tfa-lr-railsub {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tfa-ink);
    margin: 12px 0 4px;
}

.tfa-root .tfa-lr-railnote {
    font-size: 15px;
    line-height: 1.55;
    color: var(--tfa-ink);
    margin: 0 0 8px;
}

.tfa-root .tfa-lr-railtoggle { display: none; }

@media (max-width: 1279px) {
    .tfa-root.tfa-lr-hastutorrail .tfa-lr-railtoggle { display: inline-block; }

    .tfa-root.tfa-lr-hastutorrail .tfa-lr-rail {
        display: none;
    }

    .tfa-root.tfa-lr-hastutorrail.tfa-lr-railopen .tfa-lr-rail {
        display: block;
        position: fixed;
        right: 16px;
        top: 72px;
        bottom: 16px;
        width: min(320px, calc(100vw - 32px));
        overflow: auto;
        z-index: 40;
    }

    .tfa-root.tfa-lr-hastutorrail.tfa-lr-railopen .tfa-lr-spine { display: none; }

    .tfa-root.tfa-lr-hastutorrail.tfa-lr-railopen .tfa-lr-tutorrail {
        margin-top: 0;
        box-shadow: var(--tfa-shadow-overlay);
    }
}

/* --- States: ghost + error (frame persists) ---------------------------------------------------- */
.tfa-root .tfa-lr-ghost { padding: 8px 0; }

.tfa-root .tfa-lr-ghost .tfa-skel-line {
    height: 14px;
    border-radius: 4px;
    background: rgba(248, 250, 253, 0.18);
    margin: 10px 0;
    animation: tfa-lr-breathe 1.6s ease-in-out infinite alternate;
}

@keyframes tfa-lr-breathe {
    from { opacity: 0.5; }
    to { opacity: 0.7; }
}

.tfa-root .tfa-lr-error {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    background: var(--tfa-danger-tint);
    border-radius: 6px;
    padding: 10px 14px;
}

.tfa-root .tfa-lr-errorstamp { color: var(--tfa-danger); }

/* --- Footer ------------------------------------------------------------------------------------- */
.tfa-root .tfa-lr-footer { max-width: var(--tfa-lr-measure); margin: 0 auto; }

/* --- Focus on ink: the §7/§9 panels swap the ring colour (B8) ----------------------------------- */
.tfa-root .tfa-lr-inkpanel :focus-visible { outline-color: var(--tfa-gold); }

/* --- Reduced motion: the B6 variant for everything above ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tfa-root .tfa-lr-settle,
    .tfa-root .tfa-lr-stampplay,
    .tfa-root .tfa-lr-ghost .tfa-skel-line { animation: none; }

    .tfa-root .tfa-lr-barfill { transition: none; }

    .tfa-root .tfa-lr-glow { box-shadow: none; }

    .tfa-root .tfa-lr-rungstamp,
    .tfa-root .tfa-lr-stretchstamp { transform: none; }
}
/* v2026.08-wp8 end */

/* --- The curriculum browse (BRIEF-v14 Sprint 1) ---------------------------
   The window on the skill graph. Built on the existing tfa tokens — no new
   colours — because this page sits beside the catalogue and must read as the
   same product. Build state is carried by BOTH colour and text ("Lesson
   written" / "Not written yet"), never colour alone: the honest zero is the
   point of the page, and it has to survive greyscale and colour blindness. */
.tfa-cur-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.tfa-cur-subject {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--tfa-line);
  border-radius: 999px; background: var(--tfa-white);
  color: var(--tfa-ink-900); text-decoration: none; font-weight: 600;
}
.tfa-cur-subject:hover { border-color: var(--tfa-gold); }
.tfa-cur-subject.is-on {
  background: var(--tfa-ink-900); color: var(--tfa-white);
  border-color: var(--tfa-ink-900);
}
.tfa-cur-count {
  font-size: 12px; font-weight: 600; opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.tfa-cur-count-zero { font-style: italic; }

.tfa-cur-totals { margin: 6px 0 14px; font-weight: 600; }
.tfa-cur-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.tfa-cur-search input[type="search"] {
  min-width: 16rem; padding: 6px 10px;
  border: 1px solid var(--tfa-line); border-radius: 6px;
}
.tfa-cur-clear { margin-left: 4px; }

.tfa-cur-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.tfa-cur-raillabel {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--tfa-pencil); margin-right: 4px;
}
.tfa-cur-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--tfa-line); background: var(--tfa-white);
  color: var(--tfa-ink-900); text-decoration: none; font-variant-numeric: tabular-nums;
}
.tfa-cur-chip:hover { border-color: var(--tfa-gold); }
.tfa-cur-chip.is-on { background: var(--tfa-gold); border-color: var(--tfa-gold-600); font-weight: 700; }
/* An empty year is dimmed but never hidden — it still says how much is there. */
.tfa-cur-chip.is-empty { opacity: 0.55; }

.tfa-cur-strand { margin: 20px 0 0; }
.tfa-cur-strandh { margin: 0 0 8px; font-family: var(--tfa-family-display); }
.tfa-cur-topic {
  border: 1px solid var(--tfa-line); border-radius: 8px;
  background: var(--tfa-white); margin: 0 0 10px; padding: 0;
}
.tfa-cur-topic > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 10px 14px; cursor: pointer; list-style: revert;
}
.tfa-cur-topicname { font-weight: 700; }
.tfa-cur-stage { font-size: 13px; color: var(--tfa-pencil); }
.tfa-cur-built {
  margin-left: auto; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--tfa-gold-700);
}
.tfa-cur-built.is-full { color: var(--tfa-cobalt-deep); }
.tfa-cur-built.is-none { color: var(--tfa-danger); }

.tfa-cur-skills { margin: 0; padding: 0 14px 12px; list-style: none; }
.tfa-cur-skill {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--tfa-line);
}
.tfa-cur-skillname { flex: 1 1 18rem; }
.tfa-cur-badge {
  font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px;
  white-space: nowrap;
}
.tfa-cur-badge.is-built { background: var(--tfa-tint); color: var(--tfa-cobalt-deep); }
.tfa-cur-badge.is-gap { background: var(--tfa-danger-tint); color: var(--tfa-danger); }

.tfa-cur-gridwrap { margin: 26px 0 0; }
.tfa-cur-gridwrap > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
/* Wide table scrolls in its own box so the page body never scrolls sideways. */
.tfa-cur-gridscroll { overflow-x: auto; }
.tfa-cur-grid { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tfa-cur-grid th, .tfa-cur-grid td {
  border: 1px solid var(--tfa-line); padding: 5px 10px; text-align: center;
}
.tfa-cur-grid th { background: var(--tfa-tint); font-size: 13px; }
.tfa-cur-cell.is-full { background: var(--tfa-tint); color: var(--tfa-cobalt-deep); font-weight: 700; }
.tfa-cur-cell.is-part { background: var(--tfa-gold); color: var(--tfa-ink-900); }
.tfa-cur-cell.is-none { background: var(--tfa-danger-tint); color: var(--tfa-danger); }
.tfa-cur-cell.is-empty { color: var(--tfa-pencil); opacity: 0.6; }
/* --- The year-map deploy (BRIEF-v14 Sprint 2) -----------------------------
   One action, so it reads as one block: what the year holds, who it is for,
   what is assumed, go. Placement is a deliberate choice with its consequence
   spelled out beside it — assuming a child knows something nobody checked is
   the failure mode this panel exists to prevent. */
.tfa-cur-deploy {
  border: 1px solid var(--tfa-gold); border-radius: 8px;
  background: var(--tfa-white); margin: 4px 0 16px; padding: 0;
}
.tfa-cur-deploy > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700;
}
.tfa-cur-previewline { margin: 0 14px 10px; }
.tfa-cur-deployform { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.tfa-cur-field { display: flex; flex-direction: column; gap: 4px; }
.tfa-cur-fieldlabel { font-weight: 600; }
.tfa-cur-placement { gap: 8px; }
.tfa-cur-radio { display: flex; align-items: baseline; gap: 8px; }
.tfa-cur-radio label { display: block; }
.tfa-cur-deployform .tfa-btn { align-self: flex-start; }
.tfa-cur-safe { margin: 0; }

/* --- Concept threads (BRIEF-v14 Sprint 3) --------------------------------- */
.tfa-cur-threadrail { margin-top: 4px; }
.tfa-cur-thread { border-top: 2px solid var(--tfa-gold); margin: 18px 0 0; padding-top: 12px; }/* Numbered, because the order IS the teaching order — entry to advanced. */
.tfa-cur-chain { margin: 6px 0 0; padding-left: 26px; }
.tfa-cur-chain > li { padding: 5px 0; border-top: 1px solid var(--tfa-line); }
.tfa-cur-chain .tfa-cur-stage { margin: 0 10px; }

/* --- The focused concept thread on a student's own map (v14-s3b) ----------
   A band, not a filter: the map below is untouched. State shows in text via
   the step's own label and in weight here, never in colour alone. */
.tfa-t7-focus {
  border: 1px solid var(--tfa-gold); border-radius: 8px;
  background: var(--tfa-white); padding: 12px 16px; margin: 0 0 14px;
}
.tfa-t7-focush { margin: 0 0 2px; font-family: var(--tfa-family-display); font-size: 1.05rem; }
.tfa-t7-focusprog { margin: 0 0 8px; font-variant-numeric: tabular-nums; color: var(--tfa-pencil); }
.tfa-t7-focuslist { margin: 0; padding-left: 22px; }
.tfa-root .tfa-t7-focussequence > summary { color: var(--tfa-ink); min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.tfa-root .tfa-t7-focussequence > summary:focus-visible { outline: 3px solid var(--tfa-cobalt); outline-offset: 3px; }
.tfa-t7-focusstep { padding: 3px 0; }
.tfa-t7-focusstep-mastered, .tfa-t7-focusstep-foundation { color: var(--tfa-cobalt-deep); }
.tfa-t7-focusstep-mastered::after { content: " ✓"; }
.tfa-t7-focusstep-locked { color: var(--tfa-pencil); opacity: 0.75; }
.tfa-t7-focusstep-in_progress { font-weight: 700; }
.tfa-t7-sessionpack { margin-bottom: 8px; }

/* BRIEF-v16 Sprint 6 — help where the hand hovers, refusals, first screens. */
.tfa-help { margin: .35rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--tfa-pencil); }
.tfa-chip[title], .tfa-chip[data-tfa-help] { cursor: help; }
.tfa-btn-danger { background: var(--tfa-danger); border-color: var(--tfa-danger); color: var(--tfa-white); }
.tfa-btn-danger:hover, .tfa-btn-danger:focus { background: var(--tfa-ink); border-color: var(--tfa-ink); color: var(--tfa-white); }
.tfa-table { width: 100%; border-collapse: collapse; background: var(--tfa-white); }
.tfa-table th, .tfa-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--tfa-line); text-align: left; vertical-align: top; }
.tfa-refusal-card { max-width: 40rem; }
.tfa-refusal-why { margin: .5rem 0 1rem; line-height: 1.6; }
.tfa-firsttime p { max-width: 40rem; line-height: 1.6; }
.tfa-problemdoor p { max-width: 40rem; }
.tfa-tutor-book { margin-left: auto; }
.tfa-tutor-namelink { color: inherit; text-decoration: underline; text-decoration-color: var(--tfa-gold-600); text-underline-offset: 4px; }
.tfa-back { margin-bottom: .75rem; }
.tfa-cat-for { font-weight: 600; }
.tfa-chip-state { background: var(--tfa-tint); }
.tfa-rung-unwritten { color: var(--tfa-pencil); cursor: help; }
.tfa-cur-levels { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }
.tfa-cur-level { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--tfa-line); }
.tfa-cur-level.is-written { background: var(--tfa-tint); }
.tfa-cur-level.is-unwritten { color: var(--tfa-pencil); border-style: dashed; }
.tfa-cur-badge.is-pack { background: var(--tfa-diagram-yellow-tint); }

/* BRIEF-v16 7.5 — the map on a phone. */
.tfa-t7-phonebar { display: none; align-items: center; gap: .6rem; margin: .4rem 0; }
.tfa-t7-phonehint { font-size: .8rem; color: var(--tfa-pencil); }
@media (max-width: 767px), (pointer: coarse) {
  .tfa-t7-phonebar { display: flex; }
  /* Your next skill (the gold object, #tfa-s4) sits above the stage. */
  .tfa-tree7 { display: flex; flex-direction: column; }
  .tfa-tree7 > #tfa-s4 { order: -1; }
  .tfa-tree7.tfa-t7-listmode .tfa-t7-stagecard { display: none; }
  .tfa-tree7.tfa-t7-listmode #tfa-s3 { display: block; }
}
.tfa-lessonnote { margin: .35rem 0 .6rem; }
.tfa-lessonnote summary { cursor: pointer; font-size: .875rem; font-weight: 600; }
.tfa-lessonnote-form label { display: block; margin-top: .5rem; font-size: .85rem; font-weight: 600; }
.tfa-lessonnote-form textarea { width: 100%; max-width: 40rem; }
.tfa-lessonnote-family { font-weight: 500 !important; }
.tfa-prep { margin: .3rem 0 .6rem; padding: .4rem .6rem; background: var(--tfa-tint); border: 1px solid var(--tfa-line); border-radius: 6px; font-size: .9rem; }
.tfa-prep-label { font-weight: 700; }
/* BRIEF-v16 Sprint 8 — the student's practice problem. */
.tfa-lr-work { margin: .4rem 0 1rem; }
.tfa-lr-anslabel { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.tfa-lr-ansinput { width: 100%; max-width: 22rem; padding: .35rem .5rem; border: 1px solid var(--tfa-line); border-radius: 4px; margin-right: .4rem; }
.tfa-lr-checkresult { display: inline-block; margin-left: .5rem; }
.tfa-lr-ladder { margin: .5rem 0; }
.tfa-lr-hint { padding: .4rem .6rem; margin: .3rem 0; border: 1px solid var(--tfa-line); border-radius: 6px; background: var(--tfa-tint); }
.tfa-lr-hintlabel { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.tfa-lr-solserved { margin-top: .5rem; }
.tfa-lr-missedq { font-weight: 600; margin: .5rem 0 .3rem; }
.tfa-lr-sitting { font-weight: 600; }
.tfa-lr-helpuse { margin-top: 1rem; }
.tfa-lr-railh { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .3rem; }
.tfa-lr-railline { font-size: .875rem; line-height: 1.5; }
.tfa-prep-help { font-size: .8rem; margin: .3rem 0 0; }

/* BRIEF-v16 Sprint 9 — delivery: tablet mode, the runner, print. */
@media (pointer: coarse) {
  /* 44px targets on a tablet; the answer box takes the OS scribble. */
  .tfa-root .tfa-lr-checkbtn, .tfa-root .tfa-lr-helpbtn, .tfa-root .tfa-lr-revealbtn,
  .tfa-root .tfa-lr-readycheck, .tfa-root .tfa-lr-stretchtry, .tfa-root .tfa-lr-stepbtn { min-height: 44px; min-width: 44px; padding: .55rem .9rem; }
  .tfa-root .tfa-lr-ansinput, .tfa-root .tfa-lr-readyinput { min-height: 44px; font-size: 1.05rem; }
  /* The help ladder as a bottom sheet: it stays in reach while the student writes. */
  .tfa-root .tfa-lr-ladder:has(.tfa-lr-hint:not([hidden])) { position: sticky; bottom: 0; background: var(--tfa-white); border-top: 1px solid var(--tfa-line); padding: .5rem; margin: .5rem -.5rem 0; box-shadow: 0 -6px 18px color-mix(in srgb, var(--tfa-ink) 8%, transparent); z-index: 2; }
}
@media (pointer: coarse) and (orientation: landscape) {
  /* Landscape split with the room: the reader keeps to one half. */
  .tfa-root .tfa-lr-sheetcol { max-width: 60vw; }
}
.tfa-runner-head { margin-bottom: .75rem; }
.tfa-runner-time { font-weight: 600; letter-spacing: .02em; }
.tfa-runner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: .75rem; }
.tfa-runner-card h2 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .5rem; }
.tfa-runner-practice { grid-column: 1 / -1; }
.tfa-runner-problem { margin-bottom: 1rem; }
.tfa-runner-solution { border-left: 1px solid var(--tfa-line); padding-left: .6rem; }
.tfa-runner-hints { font-size: .875rem; color: var(--tfa-pencil); margin: .3rem 0 0 1rem; }
.tfa-runner-live { font-size: .875rem; margin-top: .25rem; }
.tfa-runner-live.is-wrong, .tfa-runner-livelist .is-wrong { color: var(--tfa-danger); font-weight: 600; }
.tfa-runner-live.is-correct, .tfa-runner-livelist .is-correct { color: var(--tfa-success); font-weight: 600; }
.tfa-runner-livelist { list-style: none; padding: 0; margin: 0; max-height: 14rem; overflow: auto; }
.tfa-rung-print { font-size: .8rem; margin-left: .4rem; text-decoration: underline; text-underline-offset: 3px; }
@media print {
  .tfa-runner .tfa-runner-head .tfa-btn, .tfa-runner .tfa-runner-livecard { display: none; }
  .tfa-runner-grid { display: block; }
  .tfa-runner-card { break-inside: avoid; border: 0; box-shadow: none; padding: 0 0 .75rem; }
}

/* ── BRIEF-v16 10.3 — SCOPED RENDER ─────────────────────────────────────────
   A focused thread or a deployed year decides what the map LEADS with. Out of
   scope is dimmed, never hidden and never locked: the chip keeps its state, its
   label, its ticks and its click. A tutor planning ahead has to be able to
   reach anything, and a student has to be able to see that the rest is there.
   Hover and keyboard focus bring a chip back to full strength, so nothing is
   unreadable — this is de-emphasis, not a veil. */
.tfa-leaf-outofscope {
    opacity: 0.42;
    filter: saturate(0.55);
    transition: opacity 120ms ease-out, filter 120ms ease-out;
}
.tfa-leaf-outofscope:hover,
.tfa-leaf-outofscope:focus-visible,
.tfa-leaf-outofscope.tfa-leaf-selected {
    opacity: 1;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    .tfa-leaf-outofscope { transition: none; }
}
/* A coarse pointer has no hover to recover with, and 0.42 opacity on a phone in
   daylight is unreadable, so the phone dims far less. */
@media (pointer: coarse) {
    .tfa-leaf-outofscope { opacity: 0.68; filter: none; }
}
.tfa-t7-scopenote {
    font-size: 12px;
    color: var(--tfa-pencil);
}
/* D-C: where the map's year came from (tutor, the learner's plan, registration). */
.tfa-t7-yearsource {
    font-size: 12px;
    margin-left: 8px;
}
/* R3: the foundation band as its own closed, optional group under the stage. */
.tfa-map-foundations {
    margin: 16px 0;
}
.tfa-map-foundations summary {
    cursor: pointer;
    font-weight: 600;
}
.tfa-map-foundations-list {
    margin: 8px 0 0;
    padding-left: 20px;
}
.tfa-cur-threadnone {
    font-size: 13px;
    color: var(--tfa-pencil);
}

/* ── Map setup (owner request 2026-09-03) ───────────────────────────────────
   Setting up a student's map used to mean finding an admin console and filling
   in five fields. It sits on the map now, next to the thing it changes, and it
   says what the map is currently set to rather than leaving the tutor to infer
   it from the colours. */
.tfa-t7-mapsetup {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    background: var(--tfa-tint);
    color: var(--tfa-ink);
}
/* The setup box sits inside the ink "Recommended next" band: its labels must
   not inherit the band's white text, and its fields must not overflow it. */
.tfa-root .tfa-t7-mapsetup .tfa-cur-fieldlabel,
.tfa-root .tfa-t7-mapsetup .tfa-t7-mapsetuph { color: var(--tfa-ink); }
.tfa-root .tfa-t7-mapsetup .tfa-muted { color: var(--tfa-muted); }
.tfa-t7-mapsetup select,
.tfa-t7-mapsetup input { max-width: 100%; min-width: 0; }
.tfa-t7-mapsetform > * { max-width: 100%; min-width: 0; }
.tfa-t7-mapsetrow > * { max-width: 100%; min-width: 0; }
.tfa-t7-mapsetform select { width: 100%; }
.tfa-root .tfa-grain-band .tfa-t7-sessionpack .tfa-muted { color: var(--tfa-white); }
.tfa-t7-mapsetuph { margin: 0 0 4px; font-size: 16px; }
.tfa-t7-mapsetrow {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    align-items: flex-end;
    margin-top: 12px;
}
.tfa-t7-mapsetform {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}
.tfa-t7-mapsetform .tfa-cur-fieldlabel { margin: 0; }
@media (max-width: 600px) {
    .tfa-t7-mapsetrow { flex-direction: column; align-items: stretch; }
    .tfa-t7-mapsetform { justify-content: space-between; }
}

/* ── The three delivery modes, made visible (owner request 2026-09-03) ───────
   Sprint 9 built the tablet mode, the annotatable worksheet, the printed pack
   and the tutor's runner. Nothing linked to any of them, so a tutor opening a
   skill saw one mode and could not know the others existed. */
.tfa-lr-delivery {
    margin: 20px 0 8px;
    padding: 16px 18px;
    border: 1px solid var(--tfa-line);
    border-radius: 6px;
    background: var(--tfa-surface);
}
.tfa-lr-delh { margin: 0 0 4px; font-size: 16px; }
.tfa-lr-delgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.tfa-lr-delmode {
    padding: 12px 14px;
    border: 1px solid var(--tfa-line);
    border-radius: 4px;
    background: var(--tfa-white);
}
.tfa-lr-delmodeh { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.tfa-lr-delmodep { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--tfa-pencil); }
.tfa-lr-delrunner { margin: 14px 0 0; }
@media print {
    /* On paper the strip is the one thing that means nothing: the reader is
       holding the printed mode already. */
    .tfa-lr-delivery { display: none; }
}

/* --- Colour-coded shelves (owner review 2026-09-04) ------------------------
   The curriculum and the library read as one grey list. Eight hues, assigned
   by position, carried as two custom properties so one rule set colours a
   strand heading, its topic cards, its rail chip, a library shelf and its
   cards alike. Colour is never the only channel: every state is also words. */
.tfa-hue-0 { --tfa-hue: var(--tfa-diagram-green); --tfa-hue-tint: var(--tfa-diagram-green-tint); }
.tfa-hue-1 { --tfa-hue: var(--tfa-diagram-blue); --tfa-hue-tint: var(--tfa-diagram-blue-tint); }
.tfa-hue-2 { --tfa-hue: var(--tfa-diagram-amber); --tfa-hue-tint: var(--tfa-diagram-amber-tint); }
.tfa-hue-3 { --tfa-hue: var(--tfa-diagram-red); --tfa-hue-tint: var(--tfa-diagram-red-tint); }
.tfa-hue-4 { --tfa-hue: var(--tfa-diagram-purple); --tfa-hue-tint: var(--tfa-diagram-purple-tint); }
.tfa-hue-5 { --tfa-hue: var(--tfa-diagram-teal); --tfa-hue-tint: var(--tfa-diagram-teal-tint); }
.tfa-hue-6 { --tfa-hue: var(--tfa-diagram-brown); --tfa-hue-tint: var(--tfa-diagram-brown-tint); }
.tfa-hue-7 { --tfa-hue: var(--tfa-diagram-pink); --tfa-hue-tint: var(--tfa-diagram-pink-tint); }

/* Subject tabs: a card per subject with its colour on top. */
.tfa-cur-subjects { gap: 10px; }
.tfa-cur-subject[class*="tfa-hue-"] {
  border-radius: 8px; border-top: 1px solid var(--tfa-hue); padding: 8px 14px;
  background: var(--tfa-hue-tint); color: var(--tfa-ink-900);
}
.tfa-cur-subject[class*="tfa-hue-"].is-on { background: var(--tfa-hue); border-color: var(--tfa-hue); color: var(--tfa-white); }
.tfa-cur-legend { margin: -6px 0 12px; font-size: 13px; }

/* Rail chips carry their strand's colour; the chosen one fills. */
.tfa-cur-chip[class*="tfa-hue-"] { border-color: var(--tfa-hue); color: var(--tfa-hue); background: var(--tfa-white); font-weight: 600; }
.tfa-cur-chip[class*="tfa-hue-"].is-on { background: var(--tfa-hue); color: var(--tfa-white); border-color: var(--tfa-hue); }

/* A strand is a coloured section; each topic under it a card with the strand's rail. */
.tfa-cur-strand[class*="tfa-hue-"] {
  margin: 22px 0 0; padding: 12px 14px 4px; border-radius: 10px;
  border: 1px solid var(--tfa-line);
  background: var(--tfa-white);
}
.tfa-cur-strand[class*="tfa-hue-"] .tfa-cur-strandh { color: var(--tfa-hue); font-size: 1.25rem; margin-bottom: 10px; }
.tfa-cur-topic[class*="tfa-hue-"] > summary { background: var(--tfa-hue-tint); border-radius: 0 8px 0 0; }
.tfa-cur-topic[class*="tfa-hue-"] .tfa-cur-topicname { color: var(--tfa-hue); }
.tfa-cur-topic[class*="tfa-hue-"] .tfa-cur-skill { padding: 8px 0; }
.tfa-cur-topic[class*="tfa-hue-"] .tfa-cur-skillname::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tfa-hue); margin-right: 8px; vertical-align: middle;
}

/* The library: one shelf per subject, the shelf's colour on its heading and its cards. */
.tfa-lib-group { margin: 6px 0 22px; }
.tfa-lib-grouph {
  margin: 0 0 10px; padding: 0 0 6px; font-family: var(--tfa-family-display); font-size: 1.2rem;
  color: var(--tfa-hue, var(--tfa-ink-900)); border-bottom: 3px solid var(--tfa-hue, var(--tfa-line));
}
.tfa-lib-card[class*="tfa-hue-"] { border-top: 5px solid var(--tfa-hue); }
.tfa-lib-card[class*="tfa-hue-"] h3 { color: var(--tfa-hue); }
.tfa-lib-years { font-size: 0.8rem; margin: 0; }

/* --- Several trees per student (owner request 2026-09-04) ------------------
   The subject's year map is one card; every concept the student was pointed
   at is its own card beside it, with the concept's own progress. */
.tfa-concept-card h3 { margin-top: 0; }
.tfa-concept-next { margin: 6px 0 8px; font-weight: 600; }
.tfa-conceptchips { margin: 4px 0; }
.tfa-chip-concept { background: var(--tfa-white); color: var(--tfa-cobalt); border-color: var(--tfa-ink-400); text-decoration: none; margin: 0 4px 4px 0; }
.tfa-t7-focus.is-other { border-color: var(--tfa-line); background: var(--tfa-surface); }
.tfa-t7-focus.is-lead { border-width: 2px; }

/* --- The three doors and the guide (owner review 2026-09-04) --------------- */
.tfa-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 12px 18px; align-items: start; }
.tfa-door .tfa-btn { display: inline-flex; }
.tfa-door-hint { margin: .3rem 0 0; max-width: 34ch; font-size: var(--tfa-shell-small-size); line-height: var(--tfa-shell-small-line); }
.tfa-door-guide { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--tfa-line); }
.tfa-guidelink { font-weight: 600; text-decoration: underline; text-decoration-color: var(--tfa-gold-600); text-underline-offset: 4px; }
.tfa-guide { padding: 0; }
.tfa-guide-h { cursor: pointer; padding: 12px 16px; font-family: var(--tfa-family-display); font-size: 1.15rem; font-weight: 700; }
.tfa-guide-steps { margin: 0; padding: 0 16px 14px 40px; }
.tfa-guide-steps li { padding: 5px 0; line-height: 1.55; max-width: 62ch; }
.tfa-guide-dl { margin: 0; }
.tfa-guide-dl dt { font-weight: 700; margin-top: 8px; }
.tfa-guide-dl dd { margin: 2px 0 0; max-width: 62ch; color: var(--tfa-pencil); }
.tfa-guide-faq { margin: 10px 0 14px; }
/* How learning works (site simplification, 25 September 2026): the method as
   connected steps, one sentence each, joined by a rule like the branches of the
   learning tree. */
.tfa-guide-methodlist { list-style: none; margin: 0; padding: 0; }
.tfa-guide-methodlist li { position: relative; padding: 0 0 12px 22px; line-height: 1.55; max-width: 62ch; }
.tfa-guide-methodlist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px;
    border-radius: 50%; background: var(--tfa-gold-600); }
.tfa-guide-methodlist li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 1.2em; bottom: 0;
    width: 2px; background: var(--tfa-line); }

/* --- The eight answer formats (owner request 2026-09-06) -------------------
   A practice problem used to have exactly one control: a text box. Each format
   below gets a real control that looks like what it is, works from a keyboard,
   and meets the 44px touch target on a tablet. Colour is never the only signal
   — a chosen option also carries a filled mark and a weight change. */
.tfa-lr-opts { list-style: none; margin: .4rem 0 .2rem; padding: 0; display: grid; gap: .4rem; }
.tfa-lr-opt { margin: 0; }
.tfa-lr-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.tfa-lr-optlabel {
  display: block; padding: .6rem .85rem; min-height: 44px;
  border: 1px solid var(--tfa-line); border-radius: 6px;
  background: var(--tfa-white); cursor: pointer; line-height: 1.45;
}
.tfa-lr-optlabel:hover { border-color: var(--tfa-gold); }
.tfa-lr-opt input:checked + .tfa-lr-optlabel {
  border-color: var(--tfa-ink-900); border-width: 2px; padding: calc(.6rem - 1px) calc(.85rem - 1px);
  background: var(--tfa-tint); font-weight: 600;
}
.tfa-lr-opt input:focus-visible + .tfa-lr-optlabel {
  outline: 3px solid var(--tfa-gold-600); outline-offset: 2px;
}

.tfa-lr-orderlist { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .35rem; counter-reset: ord; }
.tfa-lr-orderitem {
  display: flex; align-items: center; gap: .6rem; min-height: 44px;
  padding: .5rem .7rem; border: 1px solid var(--tfa-line);
  border-radius: 6px; background: var(--tfa-white); cursor: grab;
}
.tfa-lr-orderitem::before {
  counter-increment: ord; content: counter(ord);
  font-family: var(--tfa-family-display); font-weight: 700;
  min-width: 1.5rem; text-align: center; color: var(--tfa-gold-600);
}
.tfa-lr-orderitem.tfa-lr-dragging { opacity: .5; }
.tfa-lr-grip { width: 12px; height: 18px; flex: none;
  background-image: radial-gradient(var(--tfa-ink-400) 1px, transparent 1px);
  background-size: 5px 5px; }
.tfa-lr-steptext { flex: 1; }
.tfa-lr-movebtns { display: flex; gap: .2rem; }
.tfa-lr-movebtns button {
  min-width: 34px; min-height: 34px; border: 1px solid var(--tfa-line);
  border-radius: 4px; background: var(--tfa-surface); cursor: pointer;
}

.tfa-lr-matchlist { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .4rem; }
.tfa-lr-matchrow {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .45rem .7rem; border: 1px solid var(--tfa-line); border-radius: 6px;
  background: var(--tfa-white);
}
.tfa-lr-matchleft { flex: 1 1 12rem; }
.tfa-lr-matchsel { min-height: 44px; border: 1px solid var(--tfa-line); border-radius: 4px; padding: 0 .5rem; }

.tfa-lr-gapline { line-height: 2.4; margin: .4rem 0; }
.tfa-lr-gapinput {
  display: inline-block; min-width: 7rem; min-height: 40px; padding: .2rem .5rem;
  border: 0; border-bottom: 2px solid var(--tfa-ink-900);
  background: transparent; font: inherit; text-align: center;
}
.tfa-lr-gapinput:focus { outline: none; background: var(--tfa-gold); }

.tfa-lr-hotspotline { line-height: 2.4; margin: .4rem 0; }
.tfa-lr-token {
  font: inherit; border: 0; background: transparent; cursor: pointer;
  padding: .3rem .18rem; border-bottom: 2px solid transparent; min-height: 40px;
}
.tfa-lr-token:hover { border-bottom-color: var(--tfa-ink-400); }
.tfa-lr-token.is-picked {
  background: var(--tfa-gold); border-bottom-color: var(--tfa-ink-900);
  font-weight: 700; border-radius: 3px;
}
@media (pointer: coarse) {
  .tfa-root .tfa-lr-optlabel, .tfa-root .tfa-lr-orderitem { min-height: 48px; }
  .tfa-root .tfa-lr-movebtns button { min-width: 44px; min-height: 44px; }
}

/* --- The session plan (owner request 2026-09-06) --------------------------
   The pack's timed staging, on a curriculum lesson. A student opens the
   practice set and sees three stages with honest times, not 58 problems. */
.tfa-lr-sessionplan { margin: 0 0 1.2rem; }
.tfa-lr-sessionhead { margin: 0 0 .5rem; font-weight: 600; }
.tfa-lr-sessiontotal { font-weight: 400; color: var(--tfa-pencil); }
.tfa-lr-stagecards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.tfa-lr-stagecard {
  display: grid; gap: .15rem; padding: .7rem .85rem;
  border: 1px solid var(--tfa-line);
  border-radius: 6px; background: var(--tfa-white);
}
.tfa-lr-stagen {
  font-family: var(--tfa-family-display); font-weight: 700;
  color: var(--tfa-gold-600); font-size: .85rem;
}
.tfa-lr-stagecard .tfa-lr-stagename { font-weight: 600; }
.tfa-lr-stagemins { font-variant-numeric: tabular-nums; font-size: .85rem; }
.tfa-lr-stagemode { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tfa-pencil); }
.tfa-lr-mode-with_tutor { color: var(--tfa-cobalt-deep); }
.tfa-lr-stagecount { font-size: .8rem; color: var(--tfa-pencil); font-variant-numeric: tabular-nums; }
.tfa-lr-stagehead {
  list-style: none; margin: 1.4rem 0 .4rem; padding: .4rem 0 .3rem;
  border-bottom: 2px solid var(--tfa-gold);
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
}
.tfa-lr-stagehead .tfa-lr-stagename {
  font-family: var(--tfa-family-display); font-size: 1.1rem; font-weight: 700;
}
.tfa-lr-stagemeta { font-size: .82rem; color: var(--tfa-pencil); }

/* --- Year first (owner request 2026-09-06) -------------------------------- */
.tfa-cur-yearrail { margin-top: 4px; }
.tfa-cur-yearinstage {
  margin: 2px 0 2px; font-weight: 600;
}
.tfa-cur-yearnote { margin: 0 0 14px; font-size: 13px; max-width: 62ch; }

/* Resource browsing on one page (owner request 2026-09-23): subject → year →
   topic → lesson, with no step between them (R11). Its rules read the palette's
   own names, so the page needs no alias block of its own (lane L3, 5 October 2026). */
.tfa-curriculum {
  min-width: 0;
}
.tfa-curriculum .tfa-cur-search input[type="search"] { min-width: 0; max-width: 100%; flex: 1 1 16rem; font-size: 16px; min-height: var(--tfa-reg-target); }
.tfa-curriculum .tfa-cur-search button { min-height: var(--tfa-reg-target); padding: 8px 18px; }
.tfa-curriculum .tfa-cur-chip { min-height: var(--tfa-reg-target); align-items: center; }
.tfa-curriculum .tfa-cur-subject { min-height: 54px; flex-wrap: wrap; }
.tfa-curriculum .tfa-cur-subject:hover { border-color: var(--tfa-hue, var(--tfa-cobalt)); }
/* Year and "All" chips are the website's chip: white with a hairline, and the
   chosen one tint with a cobalt edge (tint marks the selected; gold is a fill
   on dark only). Strand and concept chips keep their strand colours. */
.tfa-curriculum .tfa-cur-chip:not([class*="tfa-hue-"]) { border-color: var(--tfa-line); background: var(--tfa-white); color: var(--tfa-ink); }
.tfa-curriculum .tfa-cur-chip:not([class*="tfa-hue-"]):hover { border-color: var(--tfa-cobalt); background: var(--tfa-tint); }
.tfa-curriculum .tfa-cur-chip.is-on:not([class*="tfa-hue-"]) { border-color: var(--tfa-cobalt); background: var(--tfa-tint); color: var(--tfa-cobalt-deep); font-weight: 700; }
/* A year asked for by address that holds nothing: dashed, and still legible. */
.tfa-curriculum .tfa-cur-chip.is-empty { opacity: 1; border-style: dashed; color: var(--tfa-muted); }
.tfa-curriculum .tfa-cur-legend { margin: 0 0 14px; font-size: 15px; }
.tfa-curriculum .tfa-cur-clear, .tfa-curriculum .tfa-cur-alltopics { display: inline-flex; align-items: center; min-height: var(--tfa-reg-target); text-decoration: underline; text-underline-offset: 3px; }
.tfa-curriculum .tfa-cur-alltopics { margin: 4px 0 8px; font-weight: 600; }
/* Every year at once: a heading per source stage, its topics beneath it. */
.tfa-curriculum .tfa-cur-sourcenote { margin: 18px 0 0; font-size: 14px; max-width: 70ch; }
.tfa-curriculum .tfa-cur-stagegroup { margin: 26px 0 0; }
.tfa-curriculum .tfa-cur-stageh { margin: 0 0 2px; font-family: var(--tfa-family-display); font-size: 1.3rem; color: var(--tfa-ink); }
.tfa-curriculum .tfa-cur-stagecount { margin: 0 0 12px; font-size: 14px; color: var(--tfa-muted); font-variant-numeric: tabular-nums; }
/* The arrow is decoration; the label text carries the meaning. */
.tfa-curriculum .tfa-cur-previewlink::after { content: ' \2192' / ''; }
.tfa-curriculum .tfa-cur-deploy { border: 1px solid var(--tfa-line); }
.tfa-curriculum .tfa-cur-deployform select, .tfa-curriculum .tfa-cur-deployform .tfa-btn { min-height: var(--tfa-reg-target); }
.tfa-curriculum .tfa-cur-radio { align-items: flex-start; min-height: var(--tfa-reg-target); }
.tfa-curriculum .tfa-cur-radio input[type="radio"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; }
.tfa-curriculum .tfa-cur-deploy > summary, .tfa-curriculum .tfa-cur-gridwrap > summary { min-height: var(--tfa-reg-target); padding-top: 10px; padding-bottom: 10px; }
.tfa-cur-conceptbrowse { margin: 22px 0; border: 1px solid var(--tfa-line); border-radius: 8px; padding: 0 14px; }
.tfa-cur-conceptbrowse > summary { min-height: 48px; padding: 12px 0; font-weight: 600; cursor: pointer; }
.tfa-cur-conceptbrowse .tfa-cur-threadrail { padding-bottom: 12px; }
.tfa-curriculum .tfa-cur-topic > summary { min-height: 60px; }
.tfa-curriculum .tfa-cur-topic > summary::after { content: '+'; flex: 0 0 auto; margin-left: auto; font-size: 1.3rem; }
.tfa-curriculum .tfa-cur-topic[open] > summary::after { content: '−'; }
.tfa-curriculum .tfa-cur-topicname { flex: 1 1 14rem; }
.tfa-curriculum .tfa-cur-built { margin-left: 0; }
.tfa-curriculum .tfa-cur-skills { padding: 0 16px 16px; }
.tfa-curriculum .tfa-cur-skill { padding: 14px 0; align-items: center; }
.tfa-curriculum .tfa-cur-lessonlink { display: inline-flex; align-items: center; min-height: var(--tfa-reg-target); color: var(--tfa-ink-900); font-weight: 600; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; }
.tfa-curriculum .tfa-cur-previewlink { display: inline-flex; align-items: center; min-height: var(--tfa-reg-target); white-space: normal; text-decoration: underline; text-underline-offset: 3px; }
.tfa-curriculum .tfa-cur-levels { flex: 1 0 100%; }
.tfa-curriculum .tfa-cur-level { display: inline-flex; align-items: center; min-height: var(--tfa-reg-target); padding: 6px 12px; font-size: .85rem; }
.tfa-curriculum a.tfa-cur-level { color: var(--tfa-ink-900); text-decoration: underline; text-underline-offset: 3px; }
.tfa-curriculum a:focus-visible, .tfa-curriculum summary:focus-visible { outline: 3px solid var(--tfa-ink-900); outline-offset: 3px; }
@media (max-width: 600px) {
  .tfa-curriculum .tfa-cur-subjects { flex-direction: column; }
  .tfa-curriculum .tfa-cur-strand[class*="tfa-hue-"] { padding: 10px 8px 2px; border-left-width: 1px; }
  .tfa-curriculum .tfa-cur-topic > summary { padding: 12px 40px 12px 10px; gap: 6px; position: relative; }
  /* The open/closed mark stays beside the topic name instead of taking a row. */
  .tfa-curriculum .tfa-cur-topic > summary::after { position: absolute; top: 10px; right: 12px; }
  .tfa-curriculum .tfa-cur-stage, .tfa-curriculum .tfa-cur-built { flex-basis: 100%; }
  .tfa-curriculum .tfa-cur-skillname { flex-basis: 100%; overflow-wrap: anywhere; }
  .tfa-curriculum .tfa-cur-skills { padding: 0 10px 10px; }
}
/* Nothing on this page moves on its own; a reader who asks for less motion
   gets none from the theme either. */
@media (prefers-reduced-motion: reduce) {
  .tfa-curriculum *, .tfa-curriculum *::before, .tfa-curriculum *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
}

/* Neutral lesson review uses the same reading sheet without saved actions. */
.tfa-lessonpreview .tfa-preview-readonly { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--tfa-line); border-left: 1px solid var(--tfa-cobalt-deep); border-radius: 6px; background: var(--tfa-tint); line-height: 1.6; }
.tfa-lessonpreview .tfa-preview-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.tfa-lessonpreview .tfa-preview-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--tfa-line); border-radius: 6px; color: var(--tfa-ink-900); }
.tfa-lessonpreview .tfa-preview-disclosure { margin: 12px 0; border: 1px solid var(--tfa-line); border-radius: 6px; padding: 0 14px; }
.tfa-lessonpreview .tfa-preview-disclosure > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.tfa-lessonpreview .tfa-preview-disclosure[open] { padding-bottom: 12px; }
.tfa-lessonpreview .tfa-preview-steps { margin: 12px 0; }
.tfa-lessonpreview .tfa-preview-rail, .tfa-lessonpreview .tfa-preview-rail .tfa-lr-tutorrail { display: block; position: static; width: auto; max-height: none; transform: none; visibility: visible; }
.tfa-lessonpreview :disabled { cursor: default; }
.tfa-lessonpreview .tfa-lr-section { scroll-margin-top: 90px; }
.tfa-lessonpreview a:focus-visible, .tfa-lessonpreview summary:focus-visible { outline: 3px solid var(--tfa-ink-900); outline-offset: 3px; }
@media (max-width: 1279px) {
  .tfa-root.tfa-lessonpreview.tfa-lr-hastutorrail .tfa-lr-rail.tfa-preview-rail { display: block; position: static; }
}
@media print {
  .tfa-lessonpreview .tfa-preview-nav, .tfa-lessonpreview .tfa-preview-readonly { display: none !important; }
  .tfa-lessonpreview .tfa-preview-rail { position: static !important; display: block !important; }
  .tfa-lessonpreview .tfa-preview-disclosure { break-inside: auto; }
}
.tfa-lessonpreview .tfa-preview-levels { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.tfa-lessonpreview .tfa-preview-levels .tfa-cur-level { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; font-size: .9rem; }
.tfa-lessonpreview .tfa-preview-levels a { color: var(--tfa-ink-900); text-decoration: underline; text-underline-offset: 3px; }
.tfa-lessonpreview .tfa-preview-levels [aria-current="page"] { border: 2px solid var(--tfa-ink-900); font-weight: 700; }
@media print {
  .tfa-lessonpreview .tfa-preview-printlink, .tfa-lessonpreview .tfa-preview-levels, .tfa-lessonpreview .tfa-viewswitch { display: none !important; }
}

/* R11 preview shell: the controls and the full lesson title sit on the page. */
.tfa-root.tfa-lessonpreview > a.tfa-lr-crumb {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 100%;
  padding: 10px 0; color: var(--tfa-ink); border: 0;
  white-space: normal; overflow-wrap: anywhere;
  text-decoration: underline; text-underline-offset: 3px;
}
.tfa-root.tfa-lessonpreview > a.tfa-lr-crumb:hover {
  color: var(--tfa-ink); text-decoration-thickness: 2px;
}
.tfa-root.tfa-lessonpreview .tfa-lr-masthead .tfa-masthead-id {
  flex: 1 1 24rem; min-width: 0; max-width: 100%;
}
.tfa-root.tfa-lessonpreview .tfa-lr-masthead .tfa-muted {
  color: var(--tfa-muted); line-height: 1.5; overflow-wrap: anywhere;
}
.tfa-root.tfa-lessonpreview h1.tfa-lr-leafname {
  max-width: none; white-space: normal; overflow: visible;
  text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25;
}
.tfa-root.tfa-lessonpreview .tfa-viewswitch {
  max-width: 100%; flex-wrap: wrap; vertical-align: middle;
  border-color: var(--tfa-line); background: var(--tfa-white);
}
.tfa-root.tfa-lessonpreview .tfa-viewswitch-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; max-width: 100%; box-sizing: border-box;
  color: var(--tfa-ink); background: var(--tfa-white);
  white-space: normal; overflow-wrap: anywhere;
}
.tfa-root.tfa-lessonpreview .tfa-viewswitch-item:hover {
  color: var(--tfa-ink); background: var(--tfa-tint);
}
.tfa-root.tfa-lessonpreview .tfa-viewswitch-item.tfa-viewswitch-on {
  color: var(--tfa-white); background: var(--tfa-cobalt);
}
.tfa-root.tfa-lessonpreview .tfa-preview-nav {
  max-width: 100%; box-sizing: border-box; flex-wrap: wrap;
}
.tfa-root.tfa-lessonpreview .tfa-preview-nav a {
  max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 1279px) {
  .tfa-root.tfa-lessonpreview .tfa-lr-main {
    flex-direction: column; align-items: stretch; gap: 24px;
  }
  .tfa-root.tfa-lessonpreview .tfa-lr-sheetcol,
  .tfa-root.tfa-lessonpreview .tfa-lr-rail.tfa-preview-rail {
    width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; box-sizing: border-box;
  }
}

/* The lesson preview's read-only note sits in the masthead as plain text (it was folded out of
   the 17 September override when that block was retired, lane L3, 5 October 2026). */
.tfa-root.tfa-lessonpreview .tfa-preview-readonly { background: transparent; border: 0; padding: 0; font-size: 16px; line-height: 1.65; }

/* v2026.10-home start ======== The landing after login (dashboard.php) on the shell ========
   The 21 September landing layer (its own --tfh-* tokens, monospace eyebrow chips, a radial-gradient
   hero, an ink focal card with a coral primary, a pill tab rail, staggered entrance motion and hover
   lifts) is retired: the dashboard is a .tfa-root page like the others and takes the shared shell
   above. What stays here is only what the landing has that the others do not: its width, its
   greeting and the order of its sections. Lane L7's dashboard v2 (styles/dashboard-v2.css) replaces
   this page's markup; nothing below needs to survive that. */
.tfa-root.tfa-home {
    max-width: 60rem;
    overflow-wrap: anywhere;
}

/* The landing's column is every console page's column (body.tfa-console, the theme preset). */

/* The greeting is the masthead: the mark, "Good morning, <name>" in Archivo, the role and the date
   as one meta line under it (it was an eyebrow chip above it), the print control at the right. */
.tfa-root.tfa-home .tfa-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tfa-space-2) var(--tfa-space-3);
    margin: 0 0 var(--tfa-space-3);
    padding: var(--tfa-space-2) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tfa-line);
    border-radius: 0;
}

.tfa-root.tfa-home .tfa-hero-id {
    display: flex;
    align-items: center;
    gap: var(--tfa-space-2);
    min-width: 0;
}

.tfa-root.tfa-home .tfa-hero-mark {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

/* From 768 px the navbar carries the logo, so the masthead does not repeat it (L7 removes it). */
@media (min-width: 768px) {
    .tfa-root.tfa-home .tfa-hero-mark {
        display: none;
    }
}

.tfa-root.tfa-home .tfa-hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--tfa-space-0-5);
    min-width: 0;
}

.tfa-root.tfa-home .tfa-hero-greet {
    margin: 0;
    font-family: var(--tfa-family-display);
    font-size: var(--tfa-shell-h1-size);
    line-height: var(--tfa-shell-h1-line);
    font-weight: var(--tfa-reg-display-wght);
    font-stretch: var(--tfa-reg-display-stretch);
    letter-spacing: -0.02em;
    color: var(--tfa-ink);
}

.tfa-root.tfa-home .tfa-hero-name {
    color: inherit;
}

/* The role and date under the greeting: a meta line after the heading, in the reading order too. */
.tfa-root.tfa-home .tfa-hero-meta {
    display: block;
    padding: 0;
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-small-size);
    line-height: var(--tfa-shell-small-line);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-muted);
    background: transparent;
    border: 0;
}

.tfa-root.tfa-home .tfa-hero-controls {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .tfa-root.tfa-home .tfa-hero-greet {
        font-size: var(--tfa-shell-h2-size);
        line-height: var(--tfa-shell-h2-line);
    }

    .tfa-root.tfa-home .tfa-hero-mark {
        width: 40px;
        height: 40px;
    }
}

/* Sections read top to bottom in one column: the page is a sequence, not a grid of equal cards. */
.tfa-root.tfa-home .tfa-tabsec {
    display: flex;
    flex-direction: column;
    gap: var(--tfa-space-3);
    margin: 0 0 var(--tfa-space-5);
}

.tfa-root.tfa-home .tfa-tabsec > * {
    margin: 0;
    min-width: 0;
}

.tfa-root.tfa-home .tfa-lesson {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tfa-space-1) var(--tfa-space-2);
}

.tfa-root.tfa-home .tfa-lesson-meta {
    flex: 1 1 14rem;
}

/* A map card's kind ("Year 4 learning tree", "Concept · Mathematics") is a meta line under the card's
   heading, in the reading order too, never a label above it (craft floor: no eyebrow). */
.tfa-root .tfa-card > h3 + .tfa-map-kind {
    margin-top: calc(-1 * var(--tfa-space-1));
}

.tfa-root .tfa-map-kind {
    margin: 0 0 var(--tfa-space-2);
    font-family: var(--tfa-family-text);
    font-size: var(--tfa-shell-small-size);
    line-height: var(--tfa-shell-small-line);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tfa-muted);
}

.tfa-root.tfa-home .tfa-block-tierchip {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--tfa-space-1);
    font-size: var(--tfa-shell-caption-size);
    line-height: var(--tfa-shell-caption-line);
    font-weight: 700;
    color: var(--tfa-ink);
    background: var(--tfa-white);
    border: 1px solid var(--tfa-ink-300);
    border-radius: var(--tfa-radius-pill);
}

/* The tutor's after-lesson note opens inline, on the same white card. */
.tfa-root.tfa-home .tfa-lessonnote-form,
.tfa-root.tfa-home .tfa-prep {
    margin-top: var(--tfa-space-1);
    padding: var(--tfa-space-2);
    background: var(--tfa-surface);
    border: 1px solid var(--tfa-line);
    border-radius: var(--tfa-shell-control-radius);
}

/* Print: the page as a plain sheet, without its controls. */
@media print {
    .tfa-root.tfa-home .tfa-hero-controls,
    .tfa-root.tfa-home .tfa-tabs,
    .tfa-root.tfa-home .tfa-viewas {
        display: none;
    }
}
/* v2026.10-home end */

/* Sprint 6: one semantic route alongside the tree canvas. The younger view
   makes each step a large station; the data and action remain identical. */
.tfa-root .tfa-path-shell {
    margin: 16px 0 20px;
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    background: var(--tfa-white);
}
.tfa-root .tfa-path-shell > summary {
    min-height: 48px;
    padding: 12px 18px;
    color: var(--tfa-cobalt);
    font-weight: 700;
    cursor: pointer;
}
.tfa-root .tfa-path-shell > summary:focus-visible,
.tfa-root .tfa-path-open:focus-visible,
.tfa-root .tfa-path-lesson:focus-visible {
    outline: 3px solid var(--tfa-cobalt);
    outline-offset: 3px;
}
.tfa-root .tfa-path {
    min-width: 0;
    margin: 16px 0 24px;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid var(--tfa-line);
    border-radius: 18px;
    background: var(--tfa-surface);
    color: var(--tfa-ink);
}
.tfa-root .tfa-path-shell .tfa-path { margin: 0; border: 0; }
.tfa-root .tfa-treeguide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 8px;
}
.tfa-root .tfa-treeguide > span { margin-right: 4px; color: var(--tfa-ink); font-weight: 700; }
/* The path-view choice is a set of buttons at the register's target, with the shell's focus ring. */
.tfa-root .tfa-treeguide button { min-height: var(--tfa-reg-target); }
.tfa-root .tfa-path-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.tfa-root .tfa-path-head > div { min-width: 0; }
.tfa-root .tfa-path-head h2 { margin: 0 0 4px; line-height: 1.2; }
.tfa-root .tfa-path-head p { margin: 0; color: var(--tfa-muted); }
.tfa-root .tfa-path-eyebrow {
    margin-bottom: 5px !important;
    color: var(--tfa-cobalt) !important;
    font-size: .85rem;
    font-weight: 700;
}
.tfa-root .tfa-path-progress {
    flex: none;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--tfa-tint);
    color: var(--tfa-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tfa-root .tfa-path-meter {
    display: block;
    width: min(100%, 26rem);
    min-width: 0;
    height: 18px;
    margin-top: 10px;
    border: 1px solid var(--tfa-cobalt);
    border-radius: 999px;
    background: var(--tfa-white);
    accent-color: var(--tfa-cobalt);
}
.tfa-root .tfa-path-meter::-webkit-progress-bar { border-radius: 999px; background: var(--tfa-white); }
.tfa-root .tfa-path-meter::-webkit-progress-value { border-radius: 999px; background: var(--tfa-cobalt); }
.tfa-root .tfa-path-meter::-moz-progress-bar { border-radius: 999px; background: var(--tfa-cobalt); }
.tfa-root .tfa-path-steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tfa-root .tfa-path-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--tfa-line);
    border-radius: 12px;
    background: var(--tfa-white);
}
.tfa-root .tfa-path-step.tfa-path-next {
    border: 2px solid var(--tfa-cobalt);
    background: var(--tfa-tint);
}
.tfa-root .tfa-path-step.tfa-path-mastered { background: var(--tfa-success-tint); }
.tfa-root .tfa-path-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--tfa-cobalt);
    border-radius: 14px;
    background: var(--tfa-white);
    color: var(--tfa-cobalt);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tfa-root .tfa-path-mastered .tfa-path-number {
    border-color: var(--tfa-success);
    color: var(--tfa-success);
}
.tfa-root .tfa-path-copy { min-width: 0; }
.tfa-root .tfa-path-copy h3 {
    margin: 2px 0 3px;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.tfa-root .tfa-path-copy p { margin: 0; color: var(--tfa-muted); font-size: .9rem; }
.tfa-root .tfa-path-step[id] { scroll-margin-top: 120px; }
.tfa-root .tfa-path-step[id]:target { outline: 3px solid var(--tfa-cobalt); outline-offset: 3px; }
.tfa-root .tfa-path-step[id]:focus-visible { outline: 3px solid var(--tfa-cobalt); outline-offset: 3px; }
.tfa-root .tfa-path-predecessors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
    color: var(--tfa-muted);
    font-size: .9rem;
    line-height: 1.4;
}
.tfa-root .tfa-path-parentlinks { display: inline-flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tfa-root .tfa-path-parentlinks a,
.tfa-root .tfa-path-parentlinks span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--tfa-ink-300);
    border-radius: 10px;
    background: var(--tfa-white);
    color: var(--tfa-ink);
    overflow-wrap: anywhere;
    text-decoration: none;
}
.tfa-root .tfa-path-parentlinks a { border-color: var(--tfa-cobalt); color: var(--tfa-cobalt-deep); font-weight: 700; }
.tfa-root .tfa-path-parentlinks a:hover { background: var(--tfa-tint); text-decoration: underline; text-underline-offset: 3px; }
.tfa-root .tfa-path-parentlinks a:focus-visible { outline: 3px solid var(--tfa-cobalt); outline-offset: 3px; }
.tfa-root .tfa-path-guide { display: inline-flex; margin-top: 7px; color: var(--tfa-cobalt); }
.tfa-root .tfa-path-guide svg { display: block; max-width: 100%; }
.tfa-root .tfa-path-status { color: var(--tfa-cobalt-deep); font-size: .85rem; font-weight: 700; }
.tfa-root .tfa-path-area {
    display: block;
    margin-top: 5px;
    color: var(--tfa-muted);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.tfa-root .tfa-path-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tfa-root .tfa-path-open,
.tfa-root .tfa-path-lesson {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--tfa-cobalt);
    color: var(--tfa-white);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.tfa-root .tfa-path-open:hover { background: var(--tfa-cobalt-deep); color: var(--tfa-white); }
.tfa-root .tfa-path-lesson:hover { background: var(--tfa-cobalt-deep); color: var(--tfa-white); }
.tfa-root .tfa-path-open.tfa-path-skill-secondary {
    border: 1px solid var(--tfa-cobalt);
    background: var(--tfa-white);
    color: var(--tfa-cobalt);
}
.tfa-root .tfa-path-open.tfa-path-skill-secondary:hover {
    background: var(--tfa-tint);
    color: var(--tfa-cobalt-deep);
}
.tfa-root.tfa-tree7-k2 .tfa-path {
    border-width: 2px;
    background: var(--tfa-tint);
}
.tfa-root.tfa-tree7-k2 .tfa-path-steps {
    position: relative;
    gap: 16px;
}
.tfa-root.tfa-tree7-k2 .tfa-path-steps::before {
    content: '';
    position: absolute;
    top: 26px;
    bottom: 26px;
    left: 39px;
    width: 3px;
    background: var(--tfa-sky);
}
.tfa-root.tfa-tree7-k2 .tfa-path-step {
    position: relative;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    min-height: 98px;
    border-radius: 18px;
    box-shadow: none;
}
.tfa-root.tfa-tree7-k2 .tfa-path-number {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 1.45rem;
}
.tfa-root.tfa-tree7-k2 .tfa-path-copy h3 { font-size: clamp(1.1rem, 2.4vw, 1.35rem); }
.tfa-root.tfa-tree7-y34:not(.tfa-tree7-calm) .tfa-path {
    border-width: 2px;
    background: var(--tfa-tint);
}
.tfa-root.tfa-tree7-y34 .tfa-path-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.tfa-root.tfa-tree7-y34 .tfa-path-step {
    grid-template-columns: 52px minmax(0, 1fr);
    align-content: start;
    min-height: 152px;
    border-top: 4px solid var(--tfa-cobalt);
}
.tfa-root.tfa-tree7-y34 .tfa-path-actions { grid-column: 2; justify-self: start; }
.tfa-root.tfa-tree7-y34 .tfa-path-number { width: 48px; height: 48px; }
.tfa-root.tfa-tree7-y56 .tfa-path-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.tfa-root.tfa-tree7-y56 .tfa-path-step {
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: start;
    min-height: 136px;
    border-radius: 10px;
    border-left: 1px solid var(--tfa-cobalt);
}
.tfa-root.tfa-tree7-y56 .tfa-path-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1rem;
}
.tfa-root.tfa-tree7-y56 .tfa-path-actions { grid-column: 2; justify-self: start; }
.tfa-root.tfa-tree7-y56 .tfa-path-guide svg { width: 46px; height: 32px; }
.tfa-root.tfa-tree7-y56.tfa-tree7-calm .tfa-path-steps { grid-template-columns: 1fr; }
.tfa-root.tfa-tree7-y56.tfa-tree7-calm .tfa-path-step { border-left-width: 1px; }
.tfa-root.tfa-tree7-y78:not(.tfa-tree7-calm) .tfa-path {
    background: var(--tfa-ink-50);
}
.tfa-root.tfa-tree7-y78 .tfa-path-step {
    border-left: 1px solid var(--tfa-cobalt);
    border-radius: 10px;
    box-shadow: none;
}
.tfa-root.tfa-tree7-y78 .tfa-path-number {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    font-size: 1rem;
}
.tfa-root.tfa-tree7-y78.tfa-tree7-calm .tfa-path-step { border-left-width: 1px; }
.tfa-root.tfa-tree7-older .tfa-path-step {
    border-radius: 8px;
    box-shadow: none;
}
.tfa-root.tfa-tree7-older .tfa-path-number {
    border-radius: 8px;
    font-size: 1rem;
}
.tfa-root.tfa-tree7-senior .tfa-path-step { min-height: 80px; }
.tfa-root.tfa-tree7-senior .tfa-path-area { font-size: .8rem; }
.tfa-root.tfa-tree7-calm .tfa-path,
.tfa-root.tfa-tree7-calm .tfa-path-step {
    border-radius: 8px;
    box-shadow: none;
    background: var(--tfa-white);
}
.tfa-root.tfa-tree7-calm .tfa-path-steps::before { display: none; }
.tfa-root.tfa-tree7-calm .tfa-path-number { border-radius: 8px; }
@media (max-width: 600px) {
    .tfa-root.tfa-tree7-y34 .tfa-path-steps { grid-template-columns: 1fr; }
    .tfa-root.tfa-tree7-y56 .tfa-path-steps { grid-template-columns: 1fr; }
    .tfa-root .tfa-path-step,
    .tfa-root.tfa-tree7-k2 .tfa-path-step {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
    }
    .tfa-root.tfa-tree7-k2 .tfa-path-step { grid-template-columns: 56px minmax(0, 1fr); }
    .tfa-root.tfa-tree7-k2 .tfa-path-number { width: 56px; height: 56px; }
    .tfa-root .tfa-path-actions { grid-column: 2; justify-self: start; }
    .tfa-root.tfa-tree7-k2 .tfa-path-steps::before { left: 38px; }
    .tfa-root .tfa-path-progress { padding: 7px 10px; }
}
@media (max-width: 440px) {
    .tfa-root .tfa-path-head { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
}
@media print {
    .tfa-root .tfa-treeguide,
    .tfa-root .tfa-path-guide { display: none !important; }
    .tfa-root .tfa-path-step { break-inside: avoid; box-shadow: none !important; }
    .tfa-root .tfa-path-actions { display: none; }
    .tfa-root .tfa-path-meter { display: none; }
    .tfa-root.tfa-tree7-k2 .tfa-path-steps::before { display: none; }
    .tfa-root.tfa-tree7-y56 .tfa-path-steps { grid-template-columns: 1fr; }
}

/* Explicit teaching panels: one visible operation, shared with the numbered print sequence. */
.tfa-root .tfa-lr-operation {
    display: grid;
    gap: var(--tfa-space-1);
    margin-block: var(--tfa-space-2);
    padding: var(--tfa-space-2);
    border: var(--tfa-stroke-rule) solid var(--tfa-line);
    border-radius: var(--tfa-radius-sm);
    background: var(--tfa-white);
    overflow-wrap: anywhere;
}
.tfa-root .tfa-lr-operation .tfa-lr-exstamp { margin: 0; }
.tfa-root .tfa-lr-operation-operation,
.tfa-root .tfa-lr-operation-after {
    padding-block: var(--tfa-space-0-5);
    border-block-end: var(--tfa-stroke-rule) solid var(--tfa-line);
}
.tfa-root .tfa-lr-prerequisite-bridge { margin-block: var(--tfa-space-2); }
@media print {
    .tfa-root .tfa-lr-operation { break-inside: avoid; }
}
/* One canonical lesson in a picture-supported or mature presentation. */
.tfa-explicit { --explicit-body: 1.0625rem; font-size: var(--explicit-body); line-height: 1.65; }
.tfa-explicit .tfa-explicit-phases ol { list-style:none; display:flex; flex-wrap:wrap; gap:.65rem 1.25rem; margin:0; padding:1rem 1rem 1rem 2.25rem; border-block:1px solid var(--tfa-line); }
.tfa-explicit .tfa-explicit-phases a { color:var(--tfa-cobalt); text-decoration:underline; text-underline-offset:.2em; }
.tfa-explicit .tfa-explicit-phases a:focus-visible { outline:3px solid var(--tfa-cobalt); outline-offset:4px; }
.tfa-explicit .tfa-explicit-phase { display:block; padding-block:1.5rem; scroll-margin-top:2rem; }
.tfa-explicit .tfa-explicit-phase > h2 { color:var(--tfa-ink); font-size:1.6rem; margin-block:0 1rem; }
.tfa-explicit .tfa-explicit-phase > .tfa-lr-sectionhead { font-size:1.2rem; }
.tfa-explicit p, .tfa-explicit li, .tfa-explicit dd { max-width:75ch; overflow-wrap:anywhere; }
.tfa-explicit figure { margin:1.25rem 0; max-width:100%; }
.tfa-explicit svg { display:block; width:100%; max-width:48rem; height:auto; overflow:visible; }
.tfa-explicit .tfa-lr-operation, .tfa-explicit .tfa-lr-worked-model { max-width:100%; overflow:visible; }
.tfa-explicit details { border:1px solid var(--tfa-line); border-radius:.5rem; padding:.8rem 1rem; margin-block:.7rem; }
.tfa-explicit summary { color:var(--tfa-cobalt); cursor:pointer; font-weight:600; }
.tfa-explicit .tfa-explicit-practice { padding-left:1.8rem; }
.tfa-explicit .tfa-explicit-practice > li { padding:1.25rem 0; border-bottom:1px solid var(--tfa-line); }
.tfa-explicit .tfa-explicit-completion { border-left:4px solid var(--tfa-cobalt); padding:.6rem 1rem; }
.tfa-explicit .tfa-explicit-studio { border:1px solid var(--tfa-line); border-radius:.5rem; padding:1rem; margin-block:1.5rem; }
.tfa-explicit .tfa-explicit-studio > h3 { margin-block:0 1rem; }
.tfa-explicit .tfa-explicit-studio a { color:var(--tfa-cobalt); text-underline-offset:.2em; }
.tfa-explicit-learner.tfa-explicit-age-k-2 { --explicit-body:1.25rem; line-height:1.7; }
.tfa-explicit-learner.tfa-explicit-age-k-2 svg { max-width:38rem; }
.tfa-explicit-learner.tfa-explicit-age-k-2 .tfa-lr-operation { padding:1.3rem; border-width:2px; }
.tfa-explicit-professional { --explicit-body:1.0625rem; }
.tfa-explicit-professional .tfa-lr-operation { border-radius:.25rem; }
@media (max-width:600px) {
  .tfa-explicit .tfa-explicit-phases ol { display:grid; grid-template-columns:1fr 1fr; }
  .tfa-explicit .tfa-explicit-phase { padding-block:1rem; }
  .tfa-explicit figure { margin-inline:0; }
}
@media print {
  .tfa-explicit .tfa-explicit-phases { display:none; }
  .tfa-explicit .tfa-explicit-phase { display:block !important; break-before:page; }
  .tfa-explicit .tfa-lr-operation, .tfa-explicit figure { break-inside:avoid; }
}
.tfa-explicit-match { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
@media(max-width:600px) { .tfa-explicit-match { grid-template-columns:1fr; } }
.tfa-diagram-control {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--tfa-ink-400);
    border-radius: 6px;
    background: #fff;
    color: var(--tfa-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
}
.tfa-diagram-control:hover { background: var(--tfa-tint); }
.tfa-diagram-control:disabled { color: var(--tfa-pencil); background: var(--tfa-ink-50); cursor: default; }
.tfa-diagram-control:focus-visible,
.tfa-diagram-description summary:focus-visible,
.tfa-diagram-viewport:focus-visible { outline: 3px solid var(--tfa-cobalt); outline-offset: 3px; }
.tfa-diagram-open { margin: 12px 0 0; }
.tfa-diagram-dialog {
    box-sizing: border-box;
    width: min(1100px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 20px;
    border: 1px solid var(--tfa-ink-400);
    border-radius: 8px;
    background: #fff;
    color: var(--tfa-ink);
    font-family: inherit;
    line-height: 1.5;
    overflow: auto;
}
.tfa-diagram-dialog::backdrop { background: rgb(16 35 63 / 65%); }
.tfa-diagram-title { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
.tfa-diagram-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tfa-diagram-size { min-width: 52px; text-align: center; font-size: 16px; color: var(--tfa-ink); }
.tfa-diagram-help, .tfa-diagram-caption { margin: 12px 0; font-size: 16px; overflow-wrap: anywhere; }
.tfa-diagram-viewport {
    margin: 8px 0;
    padding: 8px;
    max-height: 60dvh;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--tfa-line);
    background: #fff;
}
.tfa-diagram-content { width: max-content; min-width: 100%; }
.tfa-diagram-content > svg { display: block; margin: 0 0 16px; flex-shrink: 0; }
.tfa-diagram-description { margin-top: 12px; font-size: 16px; }
.tfa-diagram-description summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
@media (max-width: 480px) {
    .tfa-diagram-dialog { padding: 14px; }
    .tfa-diagram-control { padding-inline: 10px; }
}
@media print {
    .tfa-diagram-open, .tfa-diagram-dialog { display: none !important; }
}
/* The public full lesson uses the same instructional body and brand tokens as Moodle. */
body { margin:0; background:var(--tfa-surface); color:var(--tfa-ink); font-family:var(--tfa-family-text); line-height:1.65; }
a { color:var(--tfa-cobalt-deep,var(--tfa-cobalt)); text-underline-offset:.2em; }
.sample-header, .sample-footer { padding:1.5rem max(1rem,calc((100vw - 65rem)/2)); border-block:1px solid var(--tfa-line); }
.sample-header { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:space-between; }
main.sample-main { max-width:65rem; margin:0 auto; padding:2rem 1rem 4rem; }
.sample-main h1 { font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.18; max-width:26ch; }
.sample-kicker { font-weight:600; color:var(--tfa-cobalt-deep,var(--tfa-cobalt)); }
.sample-print { border-block:1px solid var(--tfa-line); padding:1rem 0; margin-block:1.5rem; }
.sample-print summary { cursor:pointer; font-weight:600; }
.sample-downloads { display:grid; gap:.8rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.sample-main .tfa-lr-sheet { box-shadow:none; padding:0; border:0; }
.sample-main .tfa-lr-section { min-width:0; }
.sample-main .tfa-lr-operation { padding:1rem; border:1px solid var(--tfa-line); margin-block:1rem; }
.sample-main .tfa-lr-sessionplan { display:none; }
.sample-main button { cursor:pointer; font:inherit; }
.sample-main [hidden] { display:none !important; }
@media(max-width:600px) { .sample-downloads { grid-template-columns:1fr; } }
@media print { .sample-header,.sample-print,.sample-footer { display:none; } }