/* NeuroCraft theme — warm minimalist canvas, sparse saturated accents, owl. */

:root {
    /* Crisp canvas — clean white, dark ink */
    --nc-canvas:        #ffffff;
    --nc-canvas-2:      #f9fafb;
    --nc-ink:           #111827;
    --nc-ink-soft:      #6b7280;
    --nc-edge:          #e5e7eb;

    /* Per-subject hues — used boldly: avatar fills, button fills, accent rules */
    --nc-subject-maths:     #2563eb;
    --nc-subject-english:   #7c3aed;
    --nc-subject-geography: #059669;
    --nc-subject-history:   #d97706;
    --nc-subject-afrikaans: #0891b2;
    --nc-subject-nst:       #dc2626;
    --nc-subject-life-skills:#ec4899;

    /* Saturated accent pops — owl bowtie, status pills, "Reveal" button */
    --nc-pop-coral:    #f43f5e;
    --nc-pop-gold:     #f59e0b;
    --nc-pop-magenta:  #d946ef;
    --nc-pop-emerald:  #10b981;
}

body {
    background: var(--nc-canvas);
    color: var(--nc-ink);
}

/* Lexend if loaded; otherwise system sans with rounded weights. */
@supports (font-variation-settings: normal) {
    body { font-family: 'Lexend', system-ui, -apple-system, sans-serif; letter-spacing: -0.005em; }
}

/* Subject-hue binding — each subject host root inherits its hue into --nc-hue */
.nc-subject-maths     { --nc-hue: var(--nc-subject-maths);     --nc-hue-soft: #dbeafe; }
.nc-subject-english   { --nc-hue: var(--nc-subject-english);   --nc-hue-soft: #ede9fe; }
.nc-subject-geography { --nc-hue: var(--nc-subject-geography); --nc-hue-soft: #d1fae5; }
.nc-subject-history   { --nc-hue: var(--nc-subject-history);   --nc-hue-soft: #fef3c7; }
.nc-subject-afrikaans { --nc-hue: var(--nc-subject-afrikaans); --nc-hue-soft: #cffafe; }
.nc-subject-nst        { --nc-hue: var(--nc-subject-nst);        --nc-hue-soft: #fee2e2; }
.nc-subject-life-skills{ --nc-hue: var(--nc-subject-life-skills); --nc-hue-soft: #fce7f3; }

/* Section underline + quiz-title accent — uses the saturated magenta pop */
.nc-section, .nc-quiz-title {
    position: relative;
}
.nc-section::after, .nc-quiz-title::after {
    content: ''; display: block; width: 2.5rem; height: 3px;
    background: var(--nc-pop-magenta); border-radius: 2px;
    margin-top: 5px;
}

/* Card grid — compact, avatar + title on one row, tags hidden, colour rotation */
.nc-card {
    border: 1px solid var(--nc-edge) !important;
    background: #ffffff !important;
    transition: all .15s ease;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 0 0.95rem !important;
    padding: 0.55rem 0.75rem !important;
    align-content: start !important;
    min-height: 0 !important;
}
.nc-card:hover {
    border-color: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
/* Avatar — smaller, solid colour pulled from --nc-card-accent (set by nth-child rotation) */
.nc-card-icon {
    background: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    width: 2rem !important; height: 2rem !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 0.95rem !important;
    grid-row: 1 / 2 !important; grid-column: 1 / 2 !important;
    align-self: center !important;
}
.nc-card-title {
    color: var(--nc-ink) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    grid-row: 1 / 2 !important; grid-column: 2 / 3 !important;
    align-self: center !important;
    line-height: 1.2 !important;
}
.nc-card-desc {
    grid-row: 2 / 3 !important; grid-column: 1 / 4 !important;
    color: var(--nc-ink-soft) !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
}
.nc-card-num {
    grid-row: 1 / 2 !important; grid-column: 3 / 4 !important;
    align-self: center !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: var(--nc-card-accent, var(--nc-subject-maths)) !important;
    background: rgba(0,0,0,0.04) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-variant-numeric: tabular-nums;
}
.nc-card-tags { display: none !important; }

/* Rotate avatar colour through six hues so the grid doesn't look mono-blue */
.nc-card:nth-child(6n+1) { --nc-card-accent: var(--nc-subject-maths); }
.nc-card:nth-child(6n+2) { --nc-card-accent: var(--nc-pop-emerald); }
.nc-card:nth-child(6n+3) { --nc-card-accent: var(--nc-subject-history); }
.nc-card:nth-child(6n+4) { --nc-card-accent: var(--nc-pop-magenta); }
.nc-card:nth-child(6n+5) { --nc-card-accent: var(--nc-pop-coral); }
.nc-card:nth-child(6n+6) { --nc-card-accent: var(--nc-subject-english); }

/* Nav bar — left "Back to {subject}", centre prev/next-unit + prev/next-lesson + crumb */
.nc-unit-bar {
    display: flex !important;
    align-items: center !important;
    gap: var(--ui-space-4) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--nc-edge) !important;
    padding: var(--ui-space-2) var(--ui-space-4) !important;
}
.nc-unit-bar-left   { flex: 0 0 auto; }
.nc-unit-bar-centre { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.nc-unit-bar-centre .nc-nav-unit:first-of-type { margin-right: 4rem; }
.nc-unit-bar-centre .nc-nav-unit:last-of-type  { margin-left:  4rem; }
.nc-unit-back {
    background: var(--nc-hue, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    border: 0 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
}
.nc-unit-back:hover { filter: brightness(1.1); }
.nc-unit-crumb {
    font-weight: 600 !important;
    color: var(--nc-ink) !important;
    padding: 0 0.75rem !important;
    font-size: 0.9rem !important;
    white-space: nowrap;
}
.nc-nav-btn {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--nc-edge);
    background: #ffffff;
    color: var(--nc-ink-soft);
    border-radius: 6px;
    cursor: pointer;
    transition: all .12s ease;
    padding: 0;
}
.nc-nav-btn:hover:not(:disabled) {
    background: var(--nc-hue, var(--nc-subject-maths));
    color: #ffffff;
    border-color: var(--nc-hue, var(--nc-subject-maths));
}
.nc-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nc-nav-unit   { color: var(--nc-hue, var(--nc-subject-maths)); border-color: var(--nc-hue, var(--nc-subject-maths)); }
.nc-nav-lesson { color: var(--nc-ink); }

/* ── Accordion open/close animation — body is a single-row grid containing
   one wrapper (.nc-panel-inner). Animating grid-template-rows 1fr↔0fr
   transitions ACTUAL content height — no overshoot, no end-bounce.
   The wrapper keeps the visual padding. */
.nc-unit-host .ui-accordion-body,
.nc-unit-host .ui-accordion-content {
    display: grid !important;
    grid-template-rows: 1fr;
    overflow: hidden;
    padding: 0 !important;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    opacity: 1;
}
.nc-unit-host .nc-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.nc-unit-host .ui-accordion-item:not(.ui-active) > .ui-accordion-body,
.nc-unit-host .ui-accordion-entry:not(.ui-active) > .ui-accordion-content {
    grid-template-rows: 0fr !important;
    opacity: 0;
}
.nc-unit-host .ui-accordion-head::after {
    transition: transform 0.25s ease;
}

/* Numbered chip strip for LanguageRenderer item navigation */
.nc-item-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.5rem 0;
}
.nc-item-chip {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nc-edge);
    background: #ffffff;
    color: var(--nc-ink-soft);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .12s ease;
    font-variant-numeric: tabular-nums;
}
.nc-item-chip:hover {
    border-color: var(--nc-hue, var(--nc-subject-maths));
    color: var(--nc-hue, var(--nc-subject-maths));
}
.nc-item-chip-active {
    background: var(--nc-hue, var(--nc-subject-maths)) !important;
    color: #ffffff !important;
    border-color: var(--nc-hue, var(--nc-subject-maths)) !important;
}

/* nc-num highlight uses the subject hue instead of fixed blue */
.nc-num { color: var(--nc-hue, var(--nc-subject-maths)) !important; }

/* Examples row — compact horizontal pills with small visual + text */
.nc-examples {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    justify-content: center;
}
.nc-example {
    flex-direction: row !important;
    width: auto !important;
    max-width: 220px !important;
    padding: 0.35rem 0.75rem !important;
    gap: 0.5rem !important;
    border: 1px solid var(--nc-edge);
    border-radius: 999px !important;
    background: #ffffff !important;
    align-items: center !important;
}
.nc-example:hover {
    border-color: var(--nc-hue, var(--nc-subject-maths)) !important;
    background: #ffffff !important;
}
.nc-example-vis {
    width: 2rem !important;
    height: 2rem;
    flex: 0 0 auto;
}
.nc-example-vis .nc-circle-svg { width: 2rem !important; height: 2rem !important; }
.nc-example-desc {
    text-align: left !important;
    font-size: 0.78rem !important;
    color: var(--nc-ink) !important;
    line-height: 1.25 !important;
}

/* (Quiz button hover styling moved to consolidated rules below.) */

/* Reveal card — solid subject-coloured left bar on plain white */
.nc-quiz-reveal {
    background: #ffffff !important;
    border: 1px solid var(--nc-edge) !important;
    border-left: 4px solid var(--nc-hue, var(--nc-pop-coral)) !important;
}
.nc-quiz-reveal-ans strong { color: var(--nc-hue, var(--nc-pop-coral)) !important; }

/* Unit interior — pure white, clean */
.nc-unit-host, .nc-stage-layout { background: #ffffff; }
.nc-visual-host { background: #ffffff; }
.nc-examples { border-bottom-color: var(--nc-edge); background: #ffffff; }
.nc-statement { background: #ffffff; }
.nc-quiz { background: #ffffff; border-top-color: var(--nc-edge); }

/* Cards landing — white canvas, cards size to their own content (no row stretch) */
.nc-cards-wrap { background: #ffffff; padding: var(--ui-space-4) var(--ui-space-3); }
.nc-cards-grid { align-items: start !important; }
.nc-cards-title { color: var(--nc-ink); }

/* Statement: solid subject left rule, bold strong in subject hue, em as coral pop */
.nc-statement { border-left: 4px solid var(--nc-hue, var(--nc-subject-maths)); padding-left: var(--ui-space-4); margin-left: var(--ui-space-3); }
.nc-statement strong { color: var(--nc-hue, var(--nc-subject-maths)); font-weight: 700; }
.nc-statement em { color: var(--nc-pop-coral); font-style: normal; font-weight: 600; }

/* Owl avatar — sits inside a solid coloured circle (subject hue or coral by default) */
.nc-owl {
    width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    background: var(--nc-hue, var(--nc-pop-coral));
    border-radius: 50%;
    padding: 3px;
    box-sizing: border-box;
}
.nc-owl svg { width: 100%; height: 100%; display: block; }
.nc-owl-eye { fill: #111827; }
.nc-owl-eye-shine { fill: #ffffff; }
.nc-owl-body { fill: #ffffff; }
.nc-owl-belly { fill: rgba(255,255,255,0.55); }
.nc-owl-beak { fill: var(--nc-pop-gold); }
.nc-owl-tie  { fill: var(--nc-pop-coral); }
.nc-owl-ear  { fill: rgba(0,0,0,0.18); }

/* (Try-button styling moved to consolidated .nc-quiz-btn rules below.) */

/* Reveal card — warm cream with magenta-accent edge instead of green flood */


.nc-panel        { display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-3); }
.nc-section      { font-size: var(--ui-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-gray-200); margin-top: var(--ui-space-1); }
.nc-section:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.nc-row          { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-row-head     { display: flex; justify-content: space-between; align-items: baseline; }
.nc-row-label    { font-size: var(--ui-text-sm); color: var(--ui-gray-700); }
.nc-row-value    { font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-gray-900); }
.nc-row-control  { display: flex; }
.nc-range        { flex: 1; }
.nc-row-control input[type="color"] { width: 100%; height: 2rem; border: 1px solid var(--ui-gray-300); border-radius: var(--ui-radius-md); padding: 2px; }

.nc-stage-layout { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.nc-visual-host  { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.nc-visual-host > * { flex: 1 1 auto; min-height: 0; }

/* Statement — concept prose */
.nc-statement    { flex: 0 0 auto; padding: var(--ui-space-3) var(--ui-space-4); font-size: 0.95rem; line-height: 1.55; color: var(--ui-gray-800); max-width: 72ch; margin: 0 auto; }
.nc-statement p  { margin: 0 0 var(--ui-space-2) 0; }
.nc-statement p:last-child { margin-bottom: 0; }
.nc-num          { color: var(--ui-blue-700, #1d4ed8); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Examples — row of small worked examples, click to apply */
.nc-examples     { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--ui-space-3); justify-content: center; padding: 0 var(--ui-space-4) var(--ui-space-3); border-bottom: 1px solid var(--ui-gray-200); }
.nc-example      { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); width: 150px; padding: var(--ui-space-2); border-radius: var(--ui-radius-md, 6px); cursor: pointer; transition: var(--ui-transition-fast, all .15s ease); }
.nc-example:hover { background: var(--ui-blue-50, #eff6ff); }
.nc-example-vis  { width: 110px; }
.nc-example-vis .nc-circle-host { padding: 0; gap: var(--ui-space-1); height: auto; }
.nc-example-vis .nc-circle-svg  { width: 110px; height: 110px; aspect-ratio: 1; }
.nc-example-vis .nc-circle-caption { display: none; }
.nc-example-desc { font-size: 0.8rem; color: var(--ui-gray-700); text-align: center; line-height: 1.35; }

.nc-quiz         { flex: 0 0 auto; padding: var(--ui-space-3) var(--ui-space-4); max-width: 72ch; margin: 0 auto; width: 100%; box-sizing: border-box; border-top: 1px solid var(--ui-gray-200); }
.nc-quiz-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ui-space-2); }
.nc-quiz-title   { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); }
.nc-quiz-shuffle { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-md, 6px); border: 1px solid var(--ui-gray-300); background: var(--ui-gray-50, #f9fafb); color: var(--ui-gray-600); cursor: pointer; font-size: 0.85rem; }
.nc-quiz-shuffle:hover { background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); border-color: var(--ui-blue-300, #93c5fd); }
/* Subjects nav dropdown — sits inside the Subjects tab's button as a
 * native <select>. No body picker row. The select is styled to read as
 * part of the tab button while keeping native OS-level dropdown behaviour.
 * Click stopPropagation lives in JS so opening the select does not double-
 * fire the tab button's click. */
.nc-subjects-tab-wrap   { display: inline-flex; align-items: center; gap: 0.4rem; }
.nc-subjects-dropdown   { font: inherit; color: inherit; background: transparent; border: 0; padding: 0.15rem 1.4rem 0.15rem 0.2rem; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='currentColor'/></svg>"); background-repeat: no-repeat; background-position: right 0.2rem center; }
.nc-subjects-dropdown:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); border-radius: 4px; }
/* Options pick up the OS native rendering once opened — give them a
 * sensible background since the trigger is transparent on a coloured nav. */
.nc-subjects-dropdown option { color: var(--nc-ink, #1f2937); background: #ffffff; }

/* Worked examples — step-by-step solved problems between visual + quiz.
 * Each card carries a numbered question line, an ordered step list, then
 * the final answer. Subject hue accents the left border so the section
 * reads as "the teacher walked me through this" rather than "another quiz". */
.nc-worked-host        { display: flex; flex-direction: column; gap: var(--ui-space-3); margin: var(--ui-space-4) 0; }
.nc-worked-head        { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nc-ink-soft); display: inline-flex; align-items: center; gap: 0.5rem; }
.nc-worked-head::after { content: ''; flex: 1; height: 2px; background: var(--nc-hue, var(--nc-pop-gold)); border-radius: 1px; opacity: 0.5; margin-left: 0.5rem; }
.nc-worked-card        { background: #ffffff; border: 1px solid var(--nc-edge, var(--ui-gray-200)); border-left: 4px solid var(--nc-hue, var(--nc-pop-coral)); border-radius: var(--ui-radius-md, 6px); padding: var(--ui-space-3) var(--ui-space-4); line-height: 1.55; }
.nc-worked-q           { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 600; color: var(--nc-ink); margin-bottom: var(--ui-space-2); }
.nc-worked-q-num       { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--nc-hue, var(--nc-pop-coral)); color: #fff; font-size: 0.85rem; font-weight: 700; }
.nc-worked-q-text      { flex: 1 1 auto; padding-top: 0.15rem; }
.nc-worked-steps       { list-style: decimal; padding-left: 2.4rem; margin: 0 0 var(--ui-space-2) 0; color: var(--ui-gray-800); }
.nc-worked-steps li    { padding: 0.15rem 0; }
.nc-worked-steps li::marker { color: var(--nc-hue, var(--nc-pop-coral)); font-weight: 700; }
.nc-worked-ans         { margin-left: 2.4rem; padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-bg-muted, #f3f4f6); border-radius: var(--ui-radius-sm, 4px); color: var(--nc-ink); }
.nc-worked-ans strong  { color: var(--nc-hue, var(--nc-pop-coral)); }

.nc-quiz-row     { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2) 0; border-top: 1px solid var(--ui-gray-200); font-size: 0.9rem; }
.nc-quiz-row:first-of-type { border-top: 0; }
.nc-quiz-q       { flex: 1 1 auto; color: var(--ui-gray-800); line-height: 1.45; }

/* Quiz actions — labelled buttons. "Try it" is the primary CTA; "Show me
 * how" is secondary. Both carry visible text so a new user does not need
 * to guess what each icon means. */
.nc-quiz-btn         { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding: 0 0.75rem; border-radius: var(--ui-radius-md, 6px); border: 0; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: var(--ui-transition-fast, all .15s ease); white-space: nowrap; }
.nc-quiz-btn-label   { display: inline-block; }
.nc-quiz-btn-try     { background: var(--nc-hue, var(--nc-pop-coral)); color: #fff !important; padding-left: 0.45rem; }
.nc-quiz-btn-try .nc-owl { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.nc-quiz-btn-try:hover   { filter: brightness(1.1); transform: translateY(-1px); }
.nc-quiz-btn-show        { background: var(--ui-bg-muted, #f3f4f6); color: var(--nc-ink, var(--ui-gray-700)) !important; border: 1px solid var(--ui-border, var(--ui-gray-300)); }
.nc-quiz-btn-show:hover  { background: var(--ui-gray-100); color: var(--nc-ink) !important; }
.nc-quiz-btn-show .fa    { color: var(--nc-pop-gold, #f59e0b); }

.nc-quiz-reveal       { margin: 0 0 var(--ui-space-2) 2.5rem; padding: var(--ui-space-2) var(--ui-space-3); background: var(--nc-canvas-2); border-left: 3px solid var(--nc-pop-gold); border-radius: var(--ui-radius-md, 6px); font-size: 0.9rem; color: var(--nc-ink); line-height: 1.45; }
.nc-quiz-reveal-ans   { font-weight: 600; color: var(--nc-ink); }
.nc-quiz-reveal-ans strong { color: var(--nc-pop-coral); }
.nc-quiz-reveal-sol   { margin-top: var(--ui-space-1); color: var(--nc-ink-soft); }

.nc-quiz-modal   { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-3); min-width: 22rem; }
.nc-quiz-modal-q { font-size: 1rem; line-height: 1.5; color: var(--ui-gray-800); }
.nc-quiz-modal-input input { width: 100%; }
.nc-quiz-modal-buttons { display: flex; justify-content: flex-end; }
.nc-quiz-modal-feedback { font-size: 0.95rem; min-height: 1.5em; display: flex; align-items: center; gap: 0.4rem; }
.nc-quiz-modal-feedback.nc-match-ok { color: var(--ui-green-600, #16a34a); font-weight: 600; }
.nc-quiz-modal-feedback.nc-match-no { color: var(--ui-red-600,   #dc2626); font-weight: 600; }

/* ── V2 quiz modal ──────────────────────────────────────────────────────── */
.nc-quiz-modal-v2 { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); min-width: 28rem; max-width: 36rem; }
.nc-quiz-modal-v2 .nc-quiz-modal-q { font-size: 1.1rem; line-height: 1.5; color: var(--ui-gray-900); font-weight: 500; padding-bottom: var(--ui-space-2); border-bottom: 1px solid var(--ui-gray-200); }
.nc-quiz-modal-v2 .nc-quiz-modal-buttons { justify-content: space-between; gap: var(--ui-space-2); padding-top: var(--ui-space-2); border-top: 1px solid var(--ui-gray-200); }
.nc-quiz-tally   { font-size: 0.85rem; font-weight: 700; color: var(--ui-green-700, #15803d); background: var(--ui-green-50, #f0fdf4); padding: 2px 8px; border-radius: 10px; margin-right: auto; margin-left: var(--ui-space-2); }

/* Multiple-choice — big tap buttons */
.nc-quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.nc-quiz-choice  { padding: var(--ui-space-3) var(--ui-space-4); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-lg, 10px); font-size: 1.05rem; font-weight: 600; color: var(--ui-gray-900); cursor: pointer; transition: var(--ui-transition-fast, all .15s ease); }
.nc-quiz-choice:hover { background: var(--ui-blue-50, #eff6ff); border-color: var(--ui-blue-500, #3b82f6); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(59,130,246,0.18); }
.nc-quiz-choice:active { transform: translateY(0); }
.nc-quiz-yesno   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.nc-quiz-yes     { color: var(--ui-green-700, #15803d); border-color: var(--ui-green-300, #86efac); background: var(--ui-green-50, #f0fdf4); }
.nc-quiz-no      { color: var(--ui-red-700,   #b91c1c); border-color: var(--ui-red-300,   #fca5a5); background: var(--ui-red-50,   #fef2f2); }

/* Number stepper */
.nc-quiz-stepper { display: flex; align-items: center; gap: var(--ui-space-3); justify-content: center; padding: var(--ui-space-3) 0; }
.nc-quiz-step-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--ui-blue-300, #93c5fd); background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: var(--ui-transition-fast, all .15s ease); }
.nc-quiz-step-btn:hover { background: var(--ui-blue-100, #dbeafe); transform: scale(1.05); }
.nc-quiz-step-display { font-size: 2.25rem; font-weight: 800; color: var(--ui-gray-900); min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
/* The display is a real INPUT now (type the answer; +/- and arrow keys step). */
.nc-quiz-step-input { border: none; background: transparent; width: 5.5ch; padding: 0;
    outline: none; border-bottom: 3px solid var(--ui-border, #e2e8f0); border-radius: 0; }
.nc-quiz-step-input:focus { border-bottom-color: var(--ui-primary, #2563eb); }

/* Fraction builder — two steppers separated by a horizontal bar */
.nc-quiz-fraction { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-4); padding: var(--ui-space-3) 0; }
.nc-quiz-fraction-col { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-1); }
.nc-quiz-fraction-cap { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-gray-500); }
.nc-quiz-fraction-bar { width: 4rem; height: 3px; background: var(--ui-gray-700); border-radius: 2px; }
.nc-quiz-fraction .nc-quiz-stepper { padding: 0; }

/* Unit picker */
.nc-quiz-unitpicker { display: flex; align-items: center; gap: var(--ui-space-3); justify-content: center; }
.nc-quiz-unit-select { padding: var(--ui-space-2); font-size: 1rem; border: 2px solid var(--ui-gray-300); border-radius: var(--ui-radius-md, 6px); background: white; }

/* Typed answer */
.nc-quiz-typed input { width: 100%; padding: var(--ui-space-3); font-size: 1.1rem; }

/* Hint cards */
.nc-quiz-hint-area { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-hint { display: flex; align-items: flex-start; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-amber-50, #fffbeb); border-left: 3px solid var(--ui-amber-400, #fbbf24); border-radius: var(--ui-radius-md, 6px); font-size: 0.95rem; line-height: 1.45; color: var(--ui-gray-800); }
.nc-quiz-hint i { color: var(--ui-amber-600, #d97706); margin-top: 2px; }

/* Solution card */
.nc-quiz-solution-area { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-solution { padding: var(--ui-space-3); border-radius: var(--ui-radius-lg, 10px); border: 2px solid; }
.nc-quiz-correct  { background: var(--ui-green-50, #f0fdf4); border-color: var(--ui-green-400, #4ade80); }
.nc-quiz-given    { background: var(--ui-blue-50,  #eff6ff); border-color: var(--ui-blue-400,  #60a5fa); }
.nc-quiz-solution-head { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.nc-quiz-correct .nc-quiz-solution-head { color: var(--ui-green-800, #166534); }
.nc-quiz-given   .nc-quiz-solution-head { color: var(--ui-blue-800,  #1e40af); }
.nc-quiz-solution-answer { font-size: 1rem; color: var(--ui-gray-800); margin-bottom: var(--ui-space-2); }
/* Misconception-named feedback (MetaQ whyWrong) — the SPECIFIC error, called out. */
.nc-quiz-solution-why { display: flex; align-items: baseline; gap: var(--ui-space-2); padding: var(--ui-space-2);
    margin-bottom: var(--ui-space-2); border-radius: var(--ui-radius-md, 6px);
    background: var(--ui-amber-100, #fef3c7); color: var(--ui-amber-900, #78350f); font-size: var(--ui-text-sm); }
.nc-quiz-solution-why i { color: var(--ui-amber-600, #d97706); }
.nc-quiz-solution-body { font-size: 0.95rem; line-height: 1.55; color: var(--ui-gray-700); }

/* Number line input — position IS the answer */
.nc-quiz-numline { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-quiz-numline-val { font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-primary); min-height: 1.4em; }
.nc-quiz-numline-svg { width: 100%; touch-action: none; cursor: crosshair; }
.nc-numline-axis { stroke: var(--ui-fg); stroke-width: 3; stroke-linecap: round; }
.nc-numline-tick { stroke: var(--ui-fg-muted); stroke-width: 2; }
.nc-numline-lbl  { font-size: 13px; fill: var(--ui-fg-muted); }
.nc-numline-marker-stem { stroke: var(--ui-primary); stroke-width: 3; }
.nc-numline-marker-head { fill: var(--ui-primary); stroke: #fff; stroke-width: 2.5; }

/* Multi-step word-problem scaffold — understand → work → answer */
.nc-quiz-multistep { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-mstep { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-md);
    border: 1.5px solid var(--ui-border); transition: opacity .2s, border-color .2s; }
.nc-quiz-mstep-locked { opacity: 0.45; pointer-events: none; }
.nc-quiz-mstep-now { border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-100, #dbeafe); }
.nc-quiz-mstep-done { border-color: var(--ui-success, #16a34a); background: var(--ui-green-50, #f0fdf4); }
.nc-quiz-mstep-q { font-size: var(--ui-text-sm); margin-bottom: var(--ui-space-1); }
.nc-quiz-mstep-num { display: inline-flex; width: 1.5em; height: 1.5em; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--ui-primary); color: #fff; font-size: var(--ui-text-2xs); font-weight: 800; margin-right: 6px; }
.nc-quiz-mstep-line { display: flex; align-items: center; gap: var(--ui-space-2); }
.nc-quiz-mstep-mark { font-weight: 800; font-size: var(--ui-text-sm); }
.nc-quiz-mstep-ok { color: var(--ui-green-800, #166534); }
.nc-quiz-mstep-bad { color: var(--ui-amber-900, #92400e); }

/* ⚡ Speed run — the timed meta wrapper: rate ladder + window timer */
.nc-speedrun { display: flex; flex-direction: column; gap: var(--ui-space-3); min-width: 340px; }
.nc-speed-ladder { display: flex; justify-content: space-between; gap: var(--ui-space-1); }
.nc-speed-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--ui-space-2) 2px; border-radius: var(--ui-radius-md); opacity: 0.38;
    transition: opacity .25s, transform .25s, background .25s; }
.nc-speed-stage.nc-speed-now { opacity: 1; transform: scale(1.12);
    background: var(--ui-primary-50, #eff6ff); box-shadow: var(--ui-shadow-sm); }
.nc-speed-ic { font-size: 1.6rem; line-height: 1; }
.nc-speed-lb { font-size: var(--ui-text-2xs); color: var(--ui-fg-muted); text-align: center; }
.nc-speed-hud { font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-fg); }
.nc-speed-hud-row { display: flex; align-items: center; gap: var(--ui-space-2); }
/* Streak chip (2026-08-03): the multiplier a right answer rides on. It BUILDS and
   resets; it is never a deduction, so it goes warm rather than red. */
.nc-speed-streak { font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-fg-muted); transition: color 160ms ease, transform 160ms ease; }
.nc-speed-streak.nc-hot { color: var(--ui-warn, #f59e0b); transform: scale(1.06); }
/* Bonus window label (2026-08-03): states the upside on offer, and when the window
   closes it says the next answer still scores — nothing is ever taken away. */
.nc-speed-bonus {
    font-size: var(--ui-text-2xs); font-weight: 600; letter-spacing: 0.04em;
    color: var(--ui-fg-muted); min-height: 1.2em; max-width: 420px;
}
.nc-speed-bonus.nc-open { color: var(--ui-success, #16a34a); }
/* Points arriving (2026-08-03): only ever a gain now. */
.nc-speed-loss { color: var(--ui-success, #16a34a); font-weight: 700; font-size: var(--ui-text-sm); opacity: 0; }
.nc-speed-loss.nc-lucky { color: var(--ui-warn, #f59e0b); font-size: var(--ui-text-base); }
.nc-speed-loss.nc-live { animation: nc-speed-loss 900ms ease-out; }
@keyframes nc-speed-loss {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-12px); }
}
/* Time's-up teaching callout (2026-08-02): the calculation + the needed number, unmissable. */
.nb-speed-rig .nc-speed-fb { display: none; }
.nb-speed-rig .nc-speed-fb.nc-live {
    display: block; max-width: 420px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-danger, #dc2626); border-radius: var(--ui-radius-lg, 8px);
    background: var(--ui-danger-100, #fef2f2); color: var(--ui-fg); font-weight: 600;
}
.nb-speed-rig .nc-speed-fb.nc-live strong { font-size: 1.3em; color: var(--ui-danger, #dc2626); }
.nc-speed-fb-go { display: block; margin-top: var(--ui-space-1); font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-danger, #dc2626); }
.nc-speed-timer { height: 12px; border-radius: 999px; background: var(--ui-bg-sunken, #f1f5f9); overflow: hidden; }
.nc-speed-timer-fill { height: 100%; width: 100%; border-radius: 999px; background-color: var(--ui-success, #16a34a); }
/* Time made visible (2026-07-25): while a question is live the fill DRAINS in
   width (inline transition) and its colour walks green → amber → red across
   the same window, with a soft pulse over the final stretch. --nc-window is
   set per question by the runner. */
/* 2026-08-03 — the bar is a BONUS WINDOW closing, not a deadline approaching. The
   red end-state and the pulsing alarm are gone: it cools green → amber and simply
   runs out, because a forgone bonus must not read as a punishment arriving. */
.nc-speed-timer-fill.nc-live {
    animation: nc-speed-hue var(--nc-window, 30s) linear forwards;
}
@keyframes nc-speed-hue {
    0%, 55%   { background-color: var(--ui-success, #16a34a); }
    100%      { background-color: var(--ui-warn, #f59e0b); }
}
.nc-speed-fb { min-height: 2.2em; font-size: 1.05rem; }
/* Step runs (2026-07-25): the parent question stays as ONE muted context line;
   a clean chain celebrates inline. */
.nc-speed-context { font-size: var(--ui-text-sm); color: var(--ui-fg-muted); padding: 2px 0 6px;
    border-left: 3px solid var(--ui-border, #e2e8f0); padding-left: 10px; }
.nc-speed-chain { color: var(--ui-warn, #b45309); font-weight: 800; }
.nc-speed-ok  { color: var(--ui-green-800, #166534); font-weight: 700; }
.nc-speed-bad { color: var(--ui-amber-900, #92400e); }
.nc-speed-done { font-size: 1.05rem; line-height: 1.7; }
.nc-speed-best { color: var(--ui-green-800, #166534); font-weight: 800; margin-top: 4px; }
.nc-speed-check { margin-top: var(--ui-space-2); }

/* Locked input — visually muted after answer revealed */
.nc-quiz-modal-input.nc-quiz-locked { opacity: 0.55; pointer-events: none; }

/* Shake animation for wrong attempts */
@keyframes nc-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
.nc-shake { animation: nc-shake 0.32s ease-in-out; }

/* I'm-stuck button — softer than primary */
.nc-quiz-stuck { background: var(--ui-gray-100, #f3f4f6); color: var(--ui-gray-700); border: 1px solid var(--ui-gray-300); }
.nc-quiz-stuck:hover { background: var(--ui-amber-100, #fef3c7); color: var(--ui-amber-800, #92400e); border-color: var(--ui-amber-400, #fbbf24); }

.nc-stage-layout > .nc-circle-host { flex: 1 1 auto; height: auto; }
.nc-circle-host  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-circle-svg   { width: min(80%, 460px); height: auto; aspect-ratio: 1; }
.nc-circle-caption { font-size: 1.75rem; font-weight: 700; color: var(--ui-gray-800); letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.5rem; }
.nc-match          { font-size: 2rem; font-weight: 800; }
.nc-match-ok       { color: var(--ui-green-600, #16a34a); }
.nc-match-no       { color: var(--ui-red-600,   #dc2626); }

/* ── Clock face (uiClockFace) ──────────────────────────────────────────────
 * Self-contained interactive visual: SVG clock + digital readout + lap
 * counter + slider/button control row. Sized to live in the stage area
 * but stays usable on small surfaces. */
.nc-stage-layout > .nc-clock-host { flex: 1 1 auto; height: auto; }
.nc-clock-host        { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ui-space-3); width: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-clock-svg         { width: min(70%, 320px); height: auto; aspect-ratio: 1; }
.nc-clock-readout     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2.25rem; font-weight: 700; color: var(--ui-blue-700, #1d4ed8); letter-spacing: 0.04em; }
.nc-clock-lap         { font-size: 0.9rem; color: var(--ui-gray-700, #374151); text-align: center; }
.nc-clock-lap strong  { color: var(--ui-gray-900, #111827); }
.nc-clock-controls    { display: flex; flex-direction: column; gap: 0.6rem; width: min(100%, 360px); padding: 0.75rem 1rem; background: var(--ui-gray-50, #f9fafb); border: 1px solid var(--ui-gray-200, #e5e7eb); border-radius: 8px; }
.nc-clock-ctrl-row    { display: flex; align-items: center; gap: 0.75rem; }
.nc-clock-ctrl-row label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--ui-gray-800, #1f2937); min-width: 7rem; }
.nc-clock-ctrl-row label span { font-family: ui-monospace, monospace; color: var(--ui-blue-700, #1d4ed8); min-width: 1.6rem; text-align: right; }
.nc-clock-ctrl-row input[type="range"] { flex: 1 1 auto; accent-color: var(--ui-blue-600, #2563eb); }
.nc-clock-ctrl-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nc-clock-btn         { background: #ffffff; border: 1px solid var(--ui-gray-300, #d1d5db); padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; color: var(--ui-gray-800, #1f2937); cursor: pointer; }
.nc-clock-btn:hover   { background: var(--ui-blue-50, #eff6ff); border-color: var(--ui-blue-300, #93c5fd); color: var(--ui-blue-700, #1d4ed8); }
.nc-clock-btn-reset   { margin-left: auto; }
.nc-clock-caption     { font-size: 1rem; color: var(--ui-gray-700, #374151); text-align: center; }
.nc-clock-content     { width: min(100%, 560px); margin-top: var(--ui-space-3); }

/* ── Card landing page (SubjectTabRenderer) ────────────────────────────── */
.nc-cards-wrap   { padding: var(--ui-space-4); max-width: 1100px; margin: 0 auto; }
.nc-cards-title  { font-size: 1.25rem; font-weight: 700; color: var(--ui-gray-700); margin-bottom: var(--ui-space-4); text-align: center; }
.nc-cards-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-space-3); }
.nc-card         { background: white; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); padding: var(--ui-space-4); cursor: pointer; display: flex; flex-direction: column; gap: var(--ui-space-2); transition: var(--ui-transition-fast, all .15s ease); min-height: 180px; }
.nc-card:hover   { border-color: var(--ui-blue-400, #60a5fa); box-shadow: 0 4px 12px rgba(59,130,246,0.15); transform: translateY(-2px); }
.nc-card-icon    { font-size: 2rem; color: var(--ui-blue-600, #2563eb); }
.nc-card-title   { font-size: 1.05rem; font-weight: 700; color: var(--ui-gray-900); }
.nc-card-desc    { font-size: 0.85rem; color: var(--ui-gray-600); line-height: 1.4; flex: 1 1 auto; }
.nc-card-tags    { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
.nc-card-tag     { font-size: 0.7rem; font-weight: 600; color: var(--ui-blue-700, #1d4ed8); background: var(--ui-blue-50, #eff6ff); padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; }

.nc-unit-bar     { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2) var(--ui-space-4); background: var(--ui-gray-50, #f9fafb); border-bottom: 1px solid var(--ui-gray-200); }
.nc-unit-back    { display: inline-flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-3); border: 1px solid var(--ui-gray-300); background: white; border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.85rem; color: var(--ui-gray-700); }
.nc-unit-back:hover { background: var(--ui-blue-50, #eff6ff); color: var(--ui-blue-700, #1d4ed8); border-color: var(--ui-blue-300, #93c5fd); }
.nc-unit-crumb   { font-size: 0.85rem; color: var(--ui-gray-600); font-weight: 500; }
.nc-unit-host    { /* container the embedded reader renders the chapter into */ }
/* Two-column lesson body: chapter-selector sidebar + chapter content. */
.nc-unit-body    { display: flex; align-items: flex-start; gap: 0; }
.nc-unit-toc     { flex: 0 0 240px; max-width: 240px; align-self: stretch; overflow: auto;
                   border-right: 1px solid var(--ui-gray-200); padding: var(--ui-space-3) var(--ui-space-2);
                   background: var(--ui-gray-50, #f9fafb); }
.nc-unit-body .nc-unit-host { flex: 1 1 auto; min-width: 0; }
/* The mounted TOC reuses the reader's wbk-toc-* children; the active chapter
   picks up the NeuroCraft subject hue. */
.nc-unit-toc .wbk-toc-chapter        { display: block; padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--ui-radius-sm, 4px); color: var(--ui-gray-700); text-decoration: none; font-size: 0.85rem; }
.nc-unit-toc .wbk-toc-chapter:hover  { background: var(--ui-gray-100, #f3f4f6); }
.nc-unit-toc .wbk-toc-chapter-active { background: color-mix(in srgb, var(--nc-hue, #2563eb) 14%, white); color: var(--nc-hue, #2563eb); font-weight: 600; }
.nc-unit-toc .wbk-toc-num            { display: inline-block; min-width: 1.4em; color: var(--ui-gray-400); }
.nc-unit-toc .wbk-toc-bookhead       { margin-bottom: var(--ui-space-2); }
.nc-unit-toc .wbk-toc-title          { font-weight: 700; font-size: 0.8rem; color: var(--ui-gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 720px) { .nc-unit-body { flex-direction: column; } .nc-unit-toc { flex-basis: auto; max-width: none; border-right: none; border-bottom: 1px solid var(--ui-gray-200); } }
.nc-error        { padding: var(--ui-space-4); color: var(--ui-red-700, #b91c1c); }

/* ── Language lesson visuals (uiTextPanel) ────────────────────────────── */
.nc-stage-layout > .nc-textpanel-host { flex: 1 1 auto; height: auto; }
.nc-textpanel-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-textpanel-content { width: 100%; max-width: 640px; }

/* Vocab card — front (Afrikaans) + back (English) */
.afr-vocab-card  { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-4); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-lg, 10px); }
.afr-source      { font-size: 2rem; font-weight: 700; color: var(--ui-blue-800, #1e40af); }
.afr-target      { font-size: 1.5rem; font-weight: 600; color: var(--ui-green-700, #15803d); }
.afr-hidden      { color: var(--ui-gray-400); font-size: 0.95rem; font-style: italic; font-weight: 400; }
.afr-example     { font-size: 0.95rem; color: var(--ui-gray-700); font-style: italic; margin-top: var(--ui-space-2); text-align: center; line-height: 1.5; }
.afr-note        { font-size: 0.85rem; color: var(--ui-gray-600); margin-top: var(--ui-space-1); text-align: center; }

/* Grammar card — Q + optional options + answer */
.afr-grammar-card { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); background: white; border: 2px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); }
.afr-question    { font-size: 1.2rem; font-weight: 600; color: var(--ui-gray-900); line-height: 1.45; }
.afr-options     { display: flex; flex-direction: column; gap: var(--ui-space-1); list-style: none; padding: 0; margin: 0; }
.afr-options li  { padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-gray-50, #f9fafb); border-radius: var(--ui-radius-md, 6px); font-size: 1rem; }
.afr-options li.afr-correct { background: var(--ui-green-50, #f0fdf4); border: 2px solid var(--ui-green-400, #4ade80); color: var(--ui-green-900, #14532d); font-weight: 600; }
.afr-options-inline { font-size: 0.95rem; color: var(--ui-gray-700); display: inline-block; margin-top: 4px; }
.afr-answer      { font-size: 1.1rem; color: var(--ui-green-700, #15803d); }
.afr-answer.afr-hidden { color: var(--ui-gray-400); font-style: italic; }

/* Poem card — title + body + question + answer */
.afr-poem-card   { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); background: white; border: 2px solid var(--ui-gray-200); border-radius: var(--ui-radius-lg, 10px); }
.afr-poem-title  { font-size: 1.3rem; font-weight: 700; color: var(--ui-blue-800, #1e40af); text-align: center; margin: 0; }
.afr-poem-body   { font-size: 1rem; line-height: 1.7; color: var(--ui-gray-800); white-space: pre-wrap; font-style: italic; padding: var(--ui-space-3); background: var(--ui-gray-50, #f9fafb); border-radius: var(--ui-radius-md, 6px); }
.afr-poem-q      { font-size: 1.05rem; color: var(--ui-gray-900); line-height: 1.45; }
.afr-poem-a      { font-size: 1rem; color: var(--ui-green-700, #15803d); line-height: 1.45; padding-top: var(--ui-space-2); border-top: 1px dashed var(--ui-gray-300); }
.afr-poem-a.afr-hidden { color: var(--ui-gray-400); font-style: italic; }
.afr-empty       { text-align: center; color: var(--ui-gray-500); font-style: italic; }

/* ── Maths visuals ─────────────────────────────────────────────────────── */
.nc-stage-layout > .nc-place-host    { flex: 1 1 auto; height: auto; }
.nc-stage-layout > .nc-numline-host  { flex: 1 1 auto; height: auto; }

.nc-place-host   { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-4); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-place-grid   { display: flex; align-items: flex-end; gap: var(--ui-space-1); }
.nc-place-col    { display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: var(--ui-space-1); border-radius: var(--ui-radius-md, 6px); }
.nc-place-col-hi { background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-400, #60a5fa); }
.nc-place-label  { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ui-gray-500); text-transform: none; margin-bottom: var(--ui-space-1); }
.nc-place-col-hi .nc-place-label { color: var(--ui-blue-700, #1d4ed8); }
.nc-place-digit  { font-size: 3rem; font-weight: 800; color: var(--ui-gray-900); font-variant-numeric: tabular-nums; line-height: 1; padding: var(--ui-space-2) var(--ui-space-1); border-bottom: 2px solid var(--ui-gray-300); min-width: 50px; text-align: center; }
.nc-place-col-hi .nc-place-digit { color: var(--ui-blue-800, #1e40af); border-bottom-color: var(--ui-blue-500, #3b82f6); }
.nc-place-point  { font-size: 3rem; font-weight: 800; color: var(--ui-gray-700); align-self: flex-end; padding: 0 var(--ui-space-1); }

.nc-numline-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-numline-svg  { width: min(100%, 760px); height: auto; }

/* uiPercentGrid — 10×10 cells, N filled for N% */
.nc-stage-layout > .nc-percent-host { flex: 1 1 auto; height: auto; }
.nc-percent-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-percent-readout { font-size: 2.25rem; font-weight: 800; color: var(--ui-blue-700, #1d4ed8); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.nc-percent-grid    { display: grid; grid-template-columns: repeat(10, 24px); grid-template-rows: repeat(10, 24px); gap: 2px; padding: 4px; background: var(--ui-gray-200, #e5e7eb); border-radius: var(--ui-radius-md, 6px); }
.nc-percent-cell    { width: 24px; height: 24px; background: white; border-radius: 2px; }
.nc-percent-cell-on { background: var(--ui-blue-500, #3b82f6); }
.nc-percent-label   { font-size: 0.95rem; color: var(--ui-gray-700); font-weight: 500; }

/* uiRatioBar — proportional coloured segments */
.nc-stage-layout > .nc-ratio-host { flex: 1 1 auto; height: auto; }
.nc-ratio-host    { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-ratio-labels  { display: flex; width: min(80%, 640px); gap: 4px; }
.nc-ratio-label   { font-size: 0.9rem; font-weight: 600; color: var(--ui-gray-700); text-align: center; }
.nc-ratio-bar     { display: flex; width: min(80%, 640px); height: 56px; border-radius: var(--ui-radius-md, 6px); overflow: hidden; gap: 4px; }
.nc-ratio-seg     { display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: 800; min-width: 32px; font-variant-numeric: tabular-nums; }
.nc-ratio-seg-0   { background: var(--ui-blue-500, #3b82f6); }
.nc-ratio-seg-1   { background: var(--ui-red-500,  #ef4444); }
.nc-ratio-seg-2   { background: var(--ui-green-600,#16a34a); }
.nc-ratio-seg-3   { background: var(--ui-amber-500,#f59e0b); }
.nc-ratio-readout { font-size: 1.75rem; font-weight: 800; color: var(--ui-gray-800); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* uiDoubleNumberLine — two parallel axes for rate lessons */
.nc-stage-layout > .nc-dbline-host { flex: 1 1 auto; height: auto; }
.nc-dbline-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-dbline-svg  { width: min(100%, 820px); height: auto; }

/* uiShape2D — SVG 2D shapes (triangles, quads, polygons, circles) */
.nc-stage-layout > .nc-shape-host { flex: 1 1 auto; height: auto; }
.nc-shape-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-shape-svg  { width: min(100%, 520px); height: auto; }

/* uiShape3D — oblique-projection 3D shapes + nets */
.nc-stage-layout > .nc-shape3d-host { flex: 1 1 auto; height: auto; }
.nc-shape3d-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-shape3d-svg  { width: min(100%, 560px); height: auto; }

/* uiBarChart — vertical bar chart with axes + value labels */
.nc-stage-layout > .nc-barchart-host { flex: 1 1 auto; height: auto; }
.nc-barchart-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-barchart-svg  { width: min(100%, 700px); height: auto; }

/* NST science visuals — uiParticleBox · uiBeaker · uiFoodWeb */
.nc-stage-layout > .nc-particle-host,
.nc-stage-layout > .nc-beaker-host,
.nc-stage-layout > .nc-foodweb-host { flex: 1 1 auto; height: auto; }
.nc-particle-host, .nc-beaker-host, .nc-foodweb-host { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-space-3); width: 100%; height: 100%; padding: var(--ui-space-4); min-height: 0; }
.nc-particle-svg { width: min(100%, 560px); height: auto; }
.nc-beaker-svg   { width: min(100%, 460px); height: auto; }
.nc-foodweb-svg  { width: min(100%, 680px); height: auto; }

/* ── V2 quiz: multipleSelect ──────────────────────────────────────────── */
.nc-quiz-choice.nc-quiz-choice-selected { background: var(--ui-blue-100, #dbeafe); border-color: var(--ui-blue-600, #2563eb); color: var(--ui-blue-900, #1e3a8a); }

/* ── V2 quiz: slider ───────────────────────────────────────────────────── */
.nc-quiz-slider-wrap    { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3) 0; }
.nc-quiz-slider-display { font-size: 2.25rem; font-weight: 800; color: var(--ui-blue-700, #1d4ed8); font-variant-numeric: tabular-nums; }
.nc-quiz-slider-input   { width: 100%; max-width: 28rem; }
.nc-quiz-slider-bounds  { display: flex; justify-content: space-between; width: 100%; max-width: 28rem; font-size: 0.85rem; color: var(--ui-gray-600); }

/* ── V2 quiz: ordering ─────────────────────────────────────────────────── */
.nc-quiz-ordering    { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-order-row   { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); }
.nc-quiz-order-num   { font-weight: 800; color: var(--ui-blue-700, #1d4ed8); min-width: 1.5rem; }
.nc-quiz-order-label { flex: 1 1 auto; color: var(--ui-gray-900); font-size: 1rem; }
.nc-quiz-order-btn   { width: 2.25rem; height: 2.25rem; border-radius: var(--ui-radius-md, 6px); border: 1px solid var(--ui-gray-300); background: white; color: var(--ui-gray-700); cursor: pointer; }
.nc-quiz-order-btn:hover { background: var(--ui-blue-100, #dbeafe); }

/* ── V2 quiz: matching ─────────────────────────────────────────────────── */
.nc-quiz-matching        { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-matching-label  { font-size: 0.85rem; color: var(--ui-gray-600); text-align: center; }
.nc-quiz-matching-cols   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.nc-quiz-matching-col    { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-quiz-match-item      { padding: var(--ui-space-2) var(--ui-space-3); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.95rem; text-align: left; }
.nc-quiz-match-item:hover{ background: var(--ui-blue-50, #eff6ff); }
.nc-quiz-match-picked    { background: var(--ui-amber-100, #fef3c7); border-color: var(--ui-amber-500, #f59e0b); }
.nc-quiz-matching-paired { display: flex; flex-direction: column; gap: 4px; margin-top: var(--ui-space-2); border-top: 1px dashed var(--ui-gray-300); padding-top: var(--ui-space-2); }
.nc-quiz-match-pair      { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-3); background: var(--ui-green-50, #f0fdf4); border: 1px solid var(--ui-green-300, #86efac); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.9rem; color: var(--ui-green-900, #14532d); }

/* ── V2 quiz: categorise ───────────────────────────────────────────────── */
.nc-quiz-categorise        { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nc-quiz-cat-label         { font-size: 0.85rem; color: var(--ui-gray-600); text-align: center; }
.nc-quiz-cat-unsorted      { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); padding: var(--ui-space-2); background: var(--ui-gray-50, #f9fafb); border: 1px dashed var(--ui-gray-300); border-radius: var(--ui-radius-md, 6px); min-height: 3rem; }
.nc-quiz-cat-item          { padding: var(--ui-space-1) var(--ui-space-3); background: white; border: 2px solid var(--ui-blue-200, #bfdbfe); border-radius: var(--ui-radius-md, 6px); cursor: pointer; font-size: 0.9rem; }
.nc-quiz-cat-picked        { background: var(--ui-amber-100, #fef3c7); border-color: var(--ui-amber-500, #f59e0b); }
.nc-quiz-cat-buckets       { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--ui-space-2); }
.nc-quiz-cat-bucket        { display: flex; flex-direction: column; gap: 4px; padding: var(--ui-space-2); background: var(--ui-blue-50, #eff6ff); border: 2px solid var(--ui-blue-300, #93c5fd); border-radius: var(--ui-radius-md, 6px); min-height: 5rem; cursor: pointer; }
.nc-quiz-cat-bucket-head   { font-weight: 700; font-size: 0.9rem; color: var(--ui-blue-800, #1e40af); padding-bottom: 4px; border-bottom: 1px solid var(--ui-blue-200, #bfdbfe); }
.nc-quiz-cat-tag           { padding: 2px var(--ui-space-2); background: white; border: 1px solid var(--ui-gray-300); border-radius: var(--ui-radius-sm, 4px); font-size: 0.85rem; cursor: pointer; }

/* ── V2 quiz: fillBlank ───────────────────────────────────────────────── */
.nc-quiz-fillblank        { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); font-size: 1.05rem; line-height: 1.8; }
.nc-quiz-fillblank-text   { color: var(--ui-gray-900); }
.nc-quiz-fillblank-select { padding: var(--ui-space-1) var(--ui-space-2); font-size: 1rem; border: 2px solid var(--ui-blue-300, #93c5fd); border-radius: var(--ui-radius-md, 6px); background: white; cursor: pointer; }

/* ── v3 Classroom mastery heatmap (topic × student) ──────────────────── */
.nc-heatmap            { border-collapse: collapse; margin-top: var(--ui-space-2); }
.nc-heatmap th, .nc-heatmap td { border: 1px solid var(--ui-gray-200, #e5e7eb); padding: 6px 8px; text-align: center; font-size: var(--ui-text-xs, 0.75rem); }
.nc-heatmap-rowhead    { background: var(--ui-gray-50, #f9fafb); font-weight: 600; text-align: left; white-space: nowrap; }
.nc-heatmap-topic      { background: var(--ui-gray-50, #f9fafb); font-weight: 600; }
.nc-heatmap-cell       { color: #fff; font-weight: 700; min-width: 2.6rem; }
.nc-heatmap-empty      { background: var(--ui-gray-50, #f9fafb); color: var(--ui-gray-300, #d1d5db); }

/* ── v3 lesson surface — rich, control-stage feel (uiLesson) ─────────── */
.nc-lesson          { background: #fff; border: 1px solid var(--ui-gray-200, #e5e7eb); border-radius: var(--ui-radius-lg, 10px); overflow: hidden; max-width: 820px; width: 100%; margin: 0 auto; }
.nc-lesson .nc-statement, .nc-lesson .nc-trythese-head, .nc-lesson .nc-question-card { max-width: 680px; margin-left: auto; margin-right: auto; width: 100%; }
.nc-lesson-head     { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); background: var(--nc-hue-soft, #eff6ff); border-bottom: 3px solid var(--nc-hue, var(--nc-subject-maths)); }
.nc-lesson-title    { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--ui-gray-900, #111827); }
.nc-lesson-chip     { font-size: 0.78rem; font-weight: 700; color: var(--nc-hue, var(--nc-subject-maths)); background: #fff; border: 1px solid var(--nc-hue, var(--nc-subject-maths)); border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap; }
.nc-lesson-body     { display: flex; flex-direction: column; gap: var(--ui-space-3); padding: var(--ui-space-4); }
.nc-examples-stage  { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); }
.nc-stage-vis       { display: flex; align-items: center; justify-content: center; min-height: 240px; width: 100%; padding: var(--ui-space-3); background: var(--nc-hue-soft, #f1f5f9); border-radius: var(--ui-radius-lg, 10px); }
.nc-stage-vis svg, .nc-stage-vis canvas { max-width: 300px; max-height: 250px; height: auto; }
.nc-stage-vis .nc-circle-svg     { width: 220px !important; height: 220px !important; }
.nc-stage-vis .nc-circle-host    { padding: 0; height: auto; gap: var(--ui-space-1); }
.nc-stage-vis .nc-circle-caption { display: none; }
.nc-examples-stage .nc-example-desc { font-size: 0.9rem; color: var(--ui-gray-700, #374151); text-align: center; max-width: 60ch; }
.nc-trythese-head   { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 800; color: var(--nc-hue, var(--nc-subject-maths)); margin-top: var(--ui-space-2); padding-bottom: var(--ui-space-1); border-bottom: 2px solid var(--nc-hue, var(--nc-subject-maths)); }
.nc-trythese-owl    { font-size: 1.3rem; }
.nc-question-card   { border: 1px solid var(--ui-gray-200, #e5e7eb); border-radius: var(--ui-radius-lg, 10px); padding: var(--ui-space-3); background: var(--ui-gray-50, #f9fafb); }
.nc-question-card .nc-q-prompt { font-weight: 600; color: var(--ui-gray-900, #111827); }
.nc-question-card .ui-btn-primary { background: var(--nc-hue, var(--nc-pop-coral)); border-color: var(--nc-hue, var(--nc-pop-coral)); }
.nc-q-feedback.nc-q-correct { color: var(--nc-pop-emerald, #10b981); font-weight: 700; }
.nc-q-feedback.nc-q-wrong   { color: var(--nc-pop-coral, #f43f5e); font-weight: 700; }
.nc-lesson-foot     { padding: 0 var(--ui-space-4) var(--ui-space-4); }
.nc-lesson-complete { font-size: 0.95rem; height: 2.4rem; padding: 0 1.1rem; }
.nc-lesson-summary  { margin: 0 var(--ui-space-4) var(--ui-space-4); padding: var(--ui-space-3); border-radius: var(--ui-radius-lg, 10px); background: var(--nc-hue-soft, #ecfdf5); font-size: 1.05rem; }
.nc-subject-life    { --nc-hue: var(--nc-subject-life); --nc-hue-soft: #fce7f3; }

/* ── v3 Learn browser — centred, colourful unit cards, lesson pills ───── */
.nc-learn           { max-width: 1080px; width: 100%; margin: 0 auto; padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-3); }
.nc-learn-intro     { margin: 0; color: var(--ui-gray-600, #4b5563); font-size: 0.9rem; }
.nc-subject-row     { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.nc-subject-tab     { border: 1px solid var(--ui-gray-300, #d1d5db); background: #fff; color: var(--ui-gray-700, #374151); border-radius: 999px; padding: 0.35rem 0.95rem; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.nc-subject-tab:hover     { border-color: var(--nc-hue, var(--nc-subject-maths)); color: var(--nc-hue, var(--nc-subject-maths)); }
.nc-subject-tab.is-active { background: var(--nc-hue, var(--nc-subject-maths)); border-color: var(--nc-hue, var(--nc-subject-maths)); color: #fff; }
.nc-unit-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--ui-space-3); }
.nc-card            { cursor: pointer; }
.nc-card.is-active  { border-color: var(--nc-hue, var(--nc-subject-maths)) !important; box-shadow: 0 0 0 2px var(--nc-hue, var(--nc-subject-maths)); }
.nc-lesson-strip    { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin: var(--ui-space-3) auto 0; max-width: 820px; width: 100%; }
.nc-lesson-pill     { border: 1px solid var(--ui-gray-300, #d1d5db); background: #fff; color: var(--ui-gray-700, #374151); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.nc-lesson-pill:hover     { border-color: var(--nc-hue, var(--nc-subject-maths)); }
.nc-lesson-pill.is-active { background: var(--nc-hue, var(--nc-subject-maths)); border-color: var(--nc-hue, var(--nc-subject-maths)); color: #fff; }

/* ── v3 service tabs — centred, warmly headed (consistent chrome) ─────── */
.nc-tabwrap         { max-width: 1080px; width: 100%; margin: 0 auto; padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-3); }
.nc-tabhead         { display: flex; align-items: center; gap: var(--ui-space-3); padding-bottom: var(--ui-space-2); border-bottom: 2px solid var(--nc-hue-soft, #e5e7eb); }
.nc-tabhead-icon    { font-size: 1.45rem; width: 2.7rem; height: 2.7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--nc-hue-soft, #eff6ff); border-radius: 50%; flex: 0 0 auto; }
.nc-tabhead-title   { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--ui-gray-900, #111827); }
.nc-tabhead-desc    { margin: 0; font-size: 0.88rem; color: var(--ui-gray-600, #4b5563); }
.nc-accent-blue     { --nc-hue: var(--nc-subject-maths);     --nc-hue-soft: #dbeafe; }
.nc-accent-coral    { --nc-hue: var(--nc-pop-coral);         --nc-hue-soft: #ffe4e6; }
.nc-accent-purple   { --nc-hue: var(--nc-subject-english);   --nc-hue-soft: #ede9fe; }
.nc-accent-green    { --nc-hue: var(--nc-subject-geography); --nc-hue-soft: #d1fae5; }
.nc-accent-gold     { --nc-hue: var(--nc-pop-gold);          --nc-hue-soft: #fef3c7; }

/* ── v3 question hints ("Show me how") ───────────────────────────────── */
.nc-q-actions       { display: flex; gap: var(--ui-space-2); align-items: center; flex-wrap: wrap; }
.nc-q-hints         { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.nc-q-hints:not(:empty) { margin-top: var(--ui-space-2); }
.nc-q-hint          { background: #fff7ed; border-left: 3px solid var(--nc-pop-gold, #f59e0b); padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-md, 6px); font-size: 0.85rem; color: var(--ui-gray-800, #1f2937); }
.nc-q-hint::before  { content: '💡 '; }

/* ── v3 Home dashboard ───────────────────────────────────────────────── */
.nc-home            { max-width: 1080px; width: 100%; margin: 0 auto; padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-4); }
.nc-home-hero       { background: linear-gradient(135deg, var(--nc-subject-maths, #2563eb) 0%, #1e3a8a 100%); color: #fff; border-radius: var(--ui-radius-lg, 12px); padding: 2rem var(--ui-space-4); }
.nc-home-title      { margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 800; }
.nc-home-sub        { margin: 0; opacity: .92; font-size: 0.98rem; }
.nc-home-stats      { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.nc-stat-chip       { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--ui-gray-200, #e5e7eb); border-radius: 999px; padding: 0.45rem 0.95rem; }
.nc-stat-ico        { font-size: 1.1rem; }
.nc-stat-val        { font-weight: 800; font-size: 1.05rem; color: var(--ui-gray-900, #111827); }
.nc-stat-lbl        { font-size: 0.82rem; color: var(--ui-gray-600, #4b5563); }
.nc-home-h2         { margin: var(--ui-space-2) 0 0; font-size: 1.1rem; font-weight: 800; color: var(--ui-gray-900, #111827); }
.nc-home-subjects   { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--ui-space-3); }
.nc-subject-tile    { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: var(--ui-space-3) var(--ui-space-4); border: 1px solid var(--ui-gray-200, #e5e7eb); border-left: 4px solid var(--nc-hue, var(--nc-subject-maths)); border-radius: var(--ui-radius-lg, 10px); background: #fff; cursor: pointer; transition: all .15s ease; text-align: left; }
.nc-subject-tile:hover { border-color: var(--nc-hue, var(--nc-subject-maths)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.nc-subject-tile-label { font-weight: 700; font-size: 1rem; color: var(--ui-gray-900, #111827); }
.nc-subject-tile-meta  { font-size: 0.8rem; color: var(--nc-hue, var(--nc-subject-maths)); font-weight: 600; }

/* ── v3 badge celebration toast ──────────────────────────────────────── */
.nc-celebrate       { position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 0.8rem; background: #fff; border: 2px solid var(--nc-pop-gold, #f59e0b); border-radius: 999px; padding: 0.7rem 1.4rem; box-shadow: 0 12px 32px rgba(0,0,0,0.18); animation: ncCelebrateIn .45s cubic-bezier(.2,1.4,.4,1); }
.nc-celebrate-out   { animation: ncCelebrateOut .4s ease forwards; }
.nc-celebrate-ico   { font-size: 1.8rem; animation: ncCelebratePop .6s ease; }
.nc-celebrate-text  { display: flex; flex-direction: column; line-height: 1.15; }
.nc-celebrate-text strong { font-size: 0.95rem; color: var(--ui-gray-900, #111827); }
.nc-celebrate-text span   { font-size: 0.8rem; color: var(--nc-pop-gold, #d97706); font-weight: 700; }
@keyframes ncCelebrateIn  { from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.9); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes ncCelebrateOut { to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.95); } }
@keyframes ncCelebratePop { 0% { transform: scale(.5); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ─── Embedded reader as the NeuroCraft lesson surface ──────────────────────
   One renderer path (Publon-Integration §9): every unit renders through the
   Publon.Press reader, themed here to keep the NeuroCraft feel — the subject
   hue becomes the reader accent, headings and chapter rules pick up the hue,
   and quiz blocks get the friendlier rounded NeuroCraft card treatment. The
   board's character is carried by this theme, not by separate code. Scoped to
   .nc-unit-host so the standalone reader and ScholarCloud are untouched. */
.nc-unit-host .wbk-frame-embedded {
    --wbk-accent:    var(--nc-hue, #2563eb);
    --wbk-accent-bg: var(--nc-hue-soft, #dbeafe);
}
.nc-unit-host .wbk-chapter-title  { color: var(--nc-hue, #2563eb); }
.nc-unit-host .wbk-chapter-title,
.nc-unit-host .wbk-section-title  { border-bottom-color: var(--nc-hue, #2563eb); }
.nc-unit-host .wbk-section-title  { color: var(--nc-hue, #2563eb); }
.nc-unit-host .wbk-qm {
    border-radius: 14px;
    border-left: 4px solid var(--nc-hue, #2563eb);
    background: var(--nc-hue-soft, #f5f8ff);
}
.nc-unit-host .wbk-qm-tag   { color: var(--nc-hue, #2563eb); font-weight: 700; }
.nc-unit-host .wbk-qm-submit {
    background: var(--nc-hue, #2563eb);
    border-radius: 999px;
}

/* ─── About → public documentation surfaces (/documentSystem) ───────────────
   The four public sections (About · Training · Research · Contact) and the
   Design & build ledger render into a uiTabs subnav. Screenshots are real
   captures embedded by <img> (refreshed from Tests/howto.js); how-tos are
   numbered step lists; references are a compact ordered list. Tokens only. */
.nc-doc { max-width: 46rem; padding-inline: var(--ui-space-2); }
.nc-doc-lede { font-size: var(--ui-text-base); color: var(--ui-gray-700); line-height: 1.6; }
.nc-doc-shot {
    margin: var(--ui-space-3) 0;
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    background: var(--ui-gray-50);
}
.nc-doc-shot img { display: block; width: 100%; height: auto; }
.nc-doc-shot figcaption {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    border-top: 1px solid var(--ui-gray-200);
}
.nc-doc-grid { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.nc-doc-grid .nc-doc-shot { flex: 1 1 22rem; margin: 0; }
.nc-howto {
    border: 1px solid var(--ui-gray-200);
    border-left: 3px solid var(--nc-hue, var(--ui-accent));
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-3) var(--ui-space-4);
    margin: var(--ui-space-3) 0;
    background: var(--ui-surface, #fff);
}
.nc-howto h4 { margin: 0 0 var(--ui-space-1); font-size: var(--ui-text-base); }
.nc-howto .nc-howto-goal { font-size: var(--ui-text-sm); color: var(--ui-gray-600); margin: 0 0 var(--ui-space-2); }
.nc-howto ol { margin: 0 0 var(--ui-space-2); padding-left: 1.2rem; font-size: var(--ui-text-sm); }
.nc-howto ol li { margin: 0.15rem 0; }
.nc-howto .nc-howto-result { font-size: var(--ui-text-sm); color: var(--ui-gray-700); }
.nc-doc-refs { font-size: var(--ui-text-sm); line-height: 1.5; }
.nc-doc-refs li { margin: 0.3rem 0; }
.nc-doc-stamp { font-size: var(--ui-text-xs); color: var(--ui-gray-400); margin-top: var(--ui-space-4); }

/* ─── My Journey — control-stage (design/ layout 1) ─────────────────────────
   Dense "my subjects" selector left, the selected subject's weekly schedule
   (the central element) right, tracking as text-metrics in the status bar.
   Panes-not-cards; the Add / Compose / study-rate forms open on demand. */
.nc-jrnl-row {
    display: flex; align-items: center; gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: 1px solid var(--ui-gray-100);
    border-left: 2px solid transparent;
    cursor: pointer;
}
.nc-jrnl-row:hover { background: var(--ui-gray-50); }
.nc-jrnl-row.ui-active { background: var(--ui-primary-100); border-left-color: var(--nc-hue, var(--ui-primary)); }
.nc-jrnl-av {
    width: 1.7rem; height: 1.7rem; flex: 0 0 auto;
    border-radius: var(--ui-radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--nc-hue-soft, var(--ui-gray-100)); color: var(--nc-hue, var(--ui-gray-500));
    font-size: 0.8rem;
}
.nc-jrnl-tt { flex: 1 1 auto; min-width: 0; }
.nc-jrnl-title { font-size: var(--ui-text-sm); font-weight: var(--ui-font-semibold); color: var(--ui-gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-jrnl-sub { font-size: var(--ui-text-xs); color: var(--ui-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-jrnl-sched { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--ui-space-3) var(--ui-space-4); }
/* status-bar metric — text-first, not a chip box (design §5) */
.nc-jrnl-metric { font-size: var(--ui-text-xs); color: var(--ui-gray-500); white-space: nowrap; }
.nc-jrnl-metric strong { color: var(--ui-gray-800); font-weight: var(--ui-font-semibold); }
.nc-jrnl-metric + .nc-jrnl-metric { border-left: 1px solid var(--ui-gray-200); padding-left: var(--ui-space-3); }
/* pace toggle — a quiet 2-way switch in the detail header */
.nc-pace { display: inline-flex; border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius); overflow: hidden; }
.nc-pace button { border: 0; background: transparent; font-size: var(--ui-text-xs); padding: 2px var(--ui-space-2); cursor: pointer; color: var(--ui-gray-600); }
.nc-pace button.ui-active { background: var(--nc-hue, var(--ui-primary)); color: #fff; }

/* My Journey reading pane → a 2-column record surface (design §2b): the weekly
   pathway beside a reference rail of compact facets, so a short plan still reads
   as a record dashboard rather than a lonely list above a void. */
.nc-jrnl-record { display: flex; gap: var(--ui-space-4); align-items: flex-start; flex-wrap: wrap; }
.nc-jrnl-path { flex: 2 1 22rem; min-width: 0; }
.nc-jrnl-rail { flex: 1 1 14rem; min-width: 13rem; display: flex; flex-direction: column; gap: var(--ui-space-3); }
.nc-stat { display: flex; justify-content: space-between; gap: var(--ui-space-2); font-size: var(--ui-text-sm); padding: 2px 0; align-items: center; }
.nc-stat > span:first-child { color: var(--ui-gray-500); }
.nc-stat strong { color: var(--ui-gray-800); font-weight: var(--ui-font-semibold); text-align: right; }

/* Plan-driven multistream Home moved to the shared base (class.ui.css .sc-home-*
   + learning.views renderStudentHome). NeuroCraft supplies only the subject
   accent via .nc-subject-* (--nc-hue) and the reader launch. */

/* ── NeuroBuilder digit grids (ui.interactions.js) */
.nb-board { display: flex; justify-content: center; padding: var(--ui-space-3) 0; }
.nb-grid { display: inline-flex; flex-direction: column; gap: 4px; }
.nb-row { display: flex; gap: 4px; align-items: flex-end; justify-content: flex-end; }
.nb-row-rule { border-top: 3px solid var(--ui-fg, #111); padding-top: 6px; margin-top: 2px; }
.nb-cell { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
    font-family: ui-monospace, monospace; font-size: 1.3rem; }
.nb-cell-static { color: var(--ui-fg); }
.nb-cell-op { width: 1.4rem; color: var(--ui-fg-muted); }
.nb-cell-head { font-size: var(--ui-text-xs); color: var(--ui-fg-muted); height: 1.4rem; font-family: inherit; }
.nb-cell-in { border: 1.5px solid var(--ui-gray-300, #cbd5e1); border-radius: var(--ui-radius-md);
    text-align: center; background: var(--ui-bg, #fff); padding: 0; }
.nb-cell-in:focus { outline: none; border-color: var(--ui-primary); box-shadow: 0 0 0 2px var(--ui-primary-100, #dbeafe); }
.nb-cell-small { width: 1.7rem; height: 1.7rem; font-size: 0.95rem; align-self: center; }
.nb-frac-row { display: flex; align-items: center; justify-content: center; gap: var(--ui-space-3); }
.nb-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.nb-frac-num { border-bottom: 2.5px solid var(--ui-fg, #111); padding: 0 8px 3px; }
.nb-frac-num, .nb-frac-den { font-family: ui-monospace, monospace; font-size: 1.3rem; display: flex; justify-content: center; }
.nb-frac-sign { font-size: 1.4rem; color: var(--ui-fg-muted); }
.nb-bar { display: inline-flex; gap: 4px; align-items: flex-end; border-top: 3px solid var(--ui-fg, #111);
    border-left: 3px solid var(--ui-fg, #111); border-top-left-radius: 8px; padding: 6px 0 0 8px; }
.nb-row .nb-cell-op { width: auto; min-width: 1.4rem; padding: 0 3px; }
.nb-frac-lines { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-3); }
.nb-frac-lines .nb-frac-row { justify-content: flex-start; }
.nb-step-label { font-size: var(--ui-text-xs); color: var(--ui-fg-muted); margin-left: var(--ui-space-3); }
.nb-pair { display: inline-flex; gap: 3px; }
/* mixed number: the whole sits beside the stacked fraction, on its middle */
.nb-mixed { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.nb-mixed-whole { font-family: ui-monospace, monospace; font-size: 1.5rem; font-weight: var(--ui-font-semibold); }
.nb-speed-rig { display: flex; flex-direction: column; gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); }
.nb-speed-rig .nc-speed-ladder, .nb-speed-rig .nc-speed-timer { max-width: 420px; }
.nb-progress { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; align-items: center; }
.nb-progress .ui-pill { cursor: pointer; border: 0; }
.nb-progress .ui-pill.ui-pill-info { background: var(--ui-primary, #2563eb); }
.nb-decimal { font-family: ui-monospace, monospace; font-size: 1.5rem; font-weight: 700; }
.nb-frac-row[hidden] { display: none; }   /* the flex rule would otherwise beat [hidden] */
/* Hunt mode (2026-08-03) — the working is done and one line is spoilt. Lines are the
   answer, so they must look pressable; the reveal marks the line that broke. */
/* Ghost lanes (2026-08-06) — you against a replay of your own last run. Two thin
   tracks, no clock, no opponent but yourself; the accent shifts when you are ahead. */
.nc-ghost { display: flex; flex-direction: column; gap: 3px; max-width: 420px; }
.nc-ghost-lane { display: flex; align-items: center; gap: var(--ui-space-2); font-size: var(--ui-text-2xs); }
.nc-ghost-name { min-width: 6.5rem; color: var(--ui-fg-muted); }
.nc-ghost-track {
    position: relative; flex: 1; height: 4px; border-radius: 999px;
    background: var(--ui-bg-sunken, #f1f5f9);
}
.nc-ghost-dot { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 999px; transform: translateX(-50%); transition: left 260ms ease; }
.nc-ghost-you  { background: var(--ui-primary, #2563eb); }
.nc-ghost-them { background: var(--ui-fg-muted, #94a3b8); }
.nc-ghost.nc-ahead .nc-ghost-you { background: var(--ui-success, #16a34a); }
.nc-ghost-pts { min-width: 3rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.nc-ghost-verdict { font-weight: 600; }
.nc-ghost-verdict.nc-ahead { color: var(--ui-success, #16a34a); }

/* Estimation bands (2026-08-06). The sum is the dominant element and the three
   bands read left-to-right as a number line, so the ascending order is doing
   teaching work rather than decoration. Big targets: this is a seconds-long task
   and nothing about it should reward careful aiming. */
.nb-estimate { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-4); }
.nb-estimate-sum {
    font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.nb-estimate-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-3); }
.nb-estimate-band {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 7rem; padding: var(--ui-space-3) var(--ui-space-4);
    border: 2px solid var(--ui-border, #cbd5e1); border-radius: var(--ui-radius-lg, 8px);
    background: var(--ui-bg-surface, #fff); cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.nb-estimate-band:hover { border-color: var(--ui-primary, #2563eb); transform: translateY(-2px); }
.nb-estimate-band:focus-visible { outline: 2px solid var(--ui-primary, #2563eb); outline-offset: 2px; }
.nb-estimate-cap { font-size: var(--ui-text-2xs); color: var(--ui-fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.nb-estimate-num { font-size: var(--ui-text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.nb-estimate-band.nb-estimate-picked { border-color: var(--ui-primary, #2563eb); }
.nb-estimate-band.nb-estimate-hit { border-color: var(--ui-success, #16a34a); background: var(--ui-success-100, #f0fdf4); }
.nb-estimate-band.nb-estimate-miss { border-color: var(--ui-success, #16a34a); border-style: dashed; }

/* The companion (2026-08-05). Quiet, italic, one line — a presence beside the
   working rather than a narrator over it. Fades in so it reads as someone
   speaking rather than as a label that was always there. */
.nc-voice {
    min-height: 1.3em; max-width: 420px;
    font-size: var(--ui-text-sm); font-style: italic;
    color: var(--ui-fg-muted); opacity: 0;
}
.nc-voice.nc-live { animation: nc-voice-in 320ms ease-out forwards; }
@keyframes nc-voice-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* A find at the end of a run. Rare enough to be worth a moment of its own. */
.nc-find {
    display: flex; align-items: center; gap: var(--ui-space-3);
    padding: var(--ui-space-3); border: 1px solid var(--ui-warn, #f59e0b);
    border-radius: var(--ui-radius-lg, 8px); background: var(--ui-warn-100, #fffbeb);
}
.nc-find-icon { font-size: 2rem; line-height: 1; }
.nc-find-label { font-weight: 700; }
.nc-find-rarity { color: var(--ui-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* The shelf — every find, with the ones still missing shown as empty slots so
   the collection reads as completable rather than endless. */
.nc-shelf { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.nc-shelf-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 4.5rem; padding: var(--ui-space-2);
    border: 1px solid var(--ui-border, #cbd5e1); border-radius: var(--ui-radius-lg, 8px);
    background: var(--ui-bg-surface, #fff);
}
.nc-shelf-item.nc-locked { opacity: 0.45; border-style: dashed; }
.nc-shelf-ic { font-size: 1.6rem; line-height: 1; }
.nc-shelf-lb { font-size: var(--ui-text-2xs); color: var(--ui-fg-muted); text-align: center; }

/* Library search sits in the filter strip beside the subject chips. */
.nc-lib-search { max-width: 15rem; margin-left: auto; }

.nb-hunt-val { font-weight: 600; font-size: var(--ui-text-lg); }
.nb-hunt-line {
    cursor: pointer; border-radius: var(--ui-radius-lg, 8px);
    padding: var(--ui-space-1) var(--ui-space-2); border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease;
}
.nb-hunt-line:hover, .nb-hunt-line:focus-visible { background: var(--ui-bg-sunken, #f1f5f9); border-color: var(--ui-border, #cbd5e1); }
.nb-hunt-line:focus-visible { outline: 2px solid var(--ui-primary, #2563eb); outline-offset: 2px; }
.nb-hunt-line.nb-hunt-picked { border-color: var(--ui-primary, #2563eb); background: var(--ui-primary-50, #eff6ff); }
.nb-hunt-line.nb-hunt-bad { border-color: var(--ui-danger, #dc2626); background: var(--ui-danger-100, #fef2f2); }

/* ── story sums — the word-problem reader, sized and coloured for a CHILD:
      the story is the central element, the numbers are chunky tap targets,
      and every question reads at arm's length ── */
.nb-story-box { display: flex; flex-direction: column; gap: var(--ui-space-5); }
.nb-story { font-size: var(--ui-text-xl); line-height: 2.4; margin: 0; color: var(--ui-fg);
    background: var(--ui-primary-50); border-radius: var(--ui-radius-xl); padding: var(--ui-space-5) var(--ui-space-6); }
.nb-tap { cursor: pointer; display: inline-flex; align-items: baseline; gap: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-3); margin: 0 2px; border-radius: var(--ui-radius-lg);
    background: var(--ui-bg); border: 2px dashed var(--ui-primary-300); font-weight: var(--ui-font-semibold);
    box-shadow: var(--ui-shadow-sm); transition: transform var(--ui-transition-fast); }
.nb-tap:hover { transform: translateY(-2px); border-color: var(--ui-primary); }
.nb-tap.ui-step-ok  { border-style: solid; }
.nb-role { font-size: var(--ui-text-xs); font-style: normal; font-weight: 400; color: var(--ui-fg-muted); white-space: nowrap; }
.nb-mcq, .nb-story-step { display: flex; flex-direction: column; gap: var(--ui-space-2);
    background: var(--ui-bg); border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-xl);
    padding: var(--ui-space-4) var(--ui-space-5); }
.nb-mcq[hidden], .nb-story-step[hidden] { display: none; }

/* ── NeuroBuilder data cards: pictograph + the ordered-line stats run ── */
.nb-picto { display: flex; flex-direction: column; gap: var(--ui-space-2);
    background: var(--ui-bg); border: 1px solid var(--ui-gray-200); border-radius: var(--ui-radius-xl);
    padding: var(--ui-space-4) var(--ui-space-5); }
.nb-picto-key { font-size: var(--ui-text-lg); font-weight: var(--ui-font-semibold); color: var(--ui-fg);
    background: var(--ui-primary-50); border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-2) var(--ui-space-4); align-self: flex-start; }
.nb-picto-row { display: flex; align-items: center; gap: var(--ui-space-4); }
.nb-picto-name { min-width: 6.5rem; font-weight: var(--ui-font-semibold); color: var(--ui-fg); }
.nb-picto-dots { font-size: var(--ui-text-xl); letter-spacing: 0.35rem; color: var(--ui-primary); }
.nb-pair-run { display: inline-flex; flex-wrap: wrap; gap: var(--ui-space-2); }

/* ── NeuroBuilder geometry cards: the shape stage + before/after mini grids ── */
.nb-shape-glyph { font-size: 4.5rem; line-height: 1; align-self: flex-start;
    background: var(--ui-primary-50); border-radius: var(--ui-radius-xl);
    padding: var(--ui-space-4) var(--ui-space-6); color: var(--ui-primary); }
.nb-mini-pair { display: flex; align-items: center; gap: var(--ui-space-4); }
.nb-mini-grid { display: grid; grid-template-columns: repeat(5, 1.6rem); gap: 2px;
    background: var(--ui-bg); border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg); padding: var(--ui-space-2); }
.nb-mini-cell { width: 1.6rem; height: 1.6rem; background: var(--ui-gray-100);
    border-radius: var(--ui-radius-sm); }
.nb-mini-cell.nb-on { background: var(--ui-primary); }
.nb-story-box .nb-step-label { font-size: var(--ui-text-lg); font-weight: var(--ui-font-semibold);
    color: var(--ui-fg); margin: 0; }
.nb-story-box .ui-chipset { gap: var(--ui-space-3); }
.nb-story-box .ui-chip { font-size: var(--ui-text-base); padding: var(--ui-space-2) var(--ui-space-4);
    border: 2px solid var(--ui-gray-200); box-shadow: var(--ui-shadow-sm); }
.nb-story-box .ui-chip:hover { transform: translateY(-2px); }
.nb-story-box .ui-chip.ui-active { border-color: var(--ui-primary); }
.ui-chipset[data-param] { border: 2px solid transparent; border-radius: var(--ui-radius-lg); }
.nb-help { display: flex; flex-direction: column; gap: var(--ui-space-2); align-items: flex-start; }
.nb-help-list { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.nb-help-line { margin: 0; font-size: var(--ui-text-base); color: var(--ui-fg-muted);
    background: var(--ui-warn-50); border-radius: var(--ui-radius-lg); padding: var(--ui-space-2) var(--ui-space-4); }

/* ── NeuroBuilder angles: the explorer (drawing · readout · chips · slider) and the card stage (2026-09-16) ── */
.nb-angle-explorer { display: flex; flex-wrap: wrap; gap: var(--ui-space-5); align-items: flex-start; }
.nb-angle-fig, .nb-angle-stage { flex: 0 0 auto; align-self: flex-start; background: var(--ui-primary-50);
    border-radius: var(--ui-radius-xl); padding: var(--ui-space-2); }
.nb-angle-fig .ui-chart, .nb-angle-stage .ui-chart, .nb-angle-fig .ui-chart-frame, .nb-angle-stage .ui-chart-frame { border: 0; background: transparent; box-shadow: none; padding: 0; }   /* the tinted box IS the frame */
.nb-angle-side { display: flex; flex-direction: column; gap: var(--ui-space-3); flex: 1 1 16rem; min-width: 0; }
.nb-angle-read { font-size: var(--ui-text-xl); font-weight: var(--ui-font-semibold); color: var(--ui-fg); }
.nb-angle-read small { display: block; font-size: var(--ui-text-base); font-weight: var(--ui-weight-body); color: var(--ui-fg-muted); }
.nb-angle-chips { gap: var(--ui-space-2); }
.nb-angle-chips .ui-chip { font-size: var(--ui-text-base); padding: var(--ui-space-2) var(--ui-space-3); border: 2px solid var(--ui-gray-200); }
.nb-angle-chips .ui-chip.ui-active { border-color: var(--ui-primary); }
.nb-angle-slider { width: 100%; accent-color: var(--ui-primary); }
.nb-angle-btns { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; }
.nb-angle-note { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-fg-muted); }

/* ── NeuroBuilder place-value columns: the board, its slots, the tiles and the tray (2026-09-16) ── */
.nb-colboard { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; overflow-x: auto; padding-bottom: var(--ui-space-1); }
.nb-col-row { display: flex; gap: 4px; align-items: flex-end; }
.nb-col-heads { align-items: flex-end; margin-bottom: var(--ui-space-1); }
.nb-colboard .nb-cell, .nb-col-head { width: 3rem; }   /* wide enough for the column words; the tiles keep their own size */
.nb-col-head { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; min-height: 2.4rem; }
.nb-col-label { font-size: var(--ui-text-2xs); font-weight: var(--ui-font-semibold); color: var(--ui-fg-muted); text-align: center; line-height: 1.05; hyphens: manual; overflow-wrap: anywhere; }
.nb-col-value { font-size: var(--ui-text-2xs); color: var(--ui-fg-muted); font-family: ui-monospace, monospace; }
.nb-col-point { width: 0.9rem; display: inline-flex; align-items: flex-end; justify-content: center; font-family: ui-monospace, monospace; font-size: 1.6rem; font-weight: var(--ui-font-semibold); color: var(--ui-fg); height: 2.5rem; }
.nb-col-point-head { height: 1rem; }
.nb-col-slot { border: 2px dashed var(--ui-gray-300); border-radius: var(--ui-radius-md); background: var(--ui-bg); cursor: pointer; }
.nb-col-slot.nb-col-filled { border-style: solid; }
.nb-col-slot.nb-col-over { border-color: var(--ui-primary); background: var(--ui-primary-50); }
.nb-col-slot.ui-step-given { cursor: default; }
.nb-tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); margin: var(--ui-space-1) 0 var(--ui-space-2);
    background: var(--ui-bg-muted); border-radius: var(--ui-radius-lg); }
.nb-tray-label { width: 100%; font-size: var(--ui-text-xs); color: var(--ui-fg-muted); }
.nb-tray-done { font-size: var(--ui-text-xs); color: var(--ui-success-500); }
.nb-tile { width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 1.3rem;
    border: 2px solid var(--ui-primary); border-radius: var(--ui-radius-md); background: var(--ui-bg); color: var(--ui-fg); cursor: grab; box-shadow: var(--ui-shadow-sm); padding: 0; }
.nb-tile:hover { transform: translateY(-2px); }
.nb-tile.nb-tile-picked { background: var(--ui-primary); color: var(--ui-on-primary); }
.nb-tile.nb-tile-zero { border-style: dashed; color: var(--ui-fg-muted); }
.nb-tile.nb-tile-placed { border: 0; box-shadow: none; cursor: pointer; width: auto; height: auto; }

/* ── lesson practice bar — adaptive MetaQ launcher inside the subject reader ── */
.nc-lesson-practice-bar { display: flex; align-items: center; gap: var(--ui-space-2, 8px); flex-wrap: wrap;
    padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px); border-bottom: 1px solid var(--ui-gray-200);
    background: var(--ui-gray-50, #f8fafc); flex: 0 0 auto; }
.nc-lesson-practice-label { font-size: var(--ui-text-sm); color: var(--ui-fg-muted); }
.nc-lesson-reader-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nc-lesson-reader-host > * { flex: 1 1 auto; min-height: 0; }

/* The LESSON is the surface (2026-07-26): a full-bleed reading canvas, not a
   narrow overlay that whispers "least important". */
.nc-lesson-full { --ui-modal-max-w: min(1180px, 96vw); }
.nc-lesson-full .ui-modal { width: min(1180px, 96vw); height: 94vh; max-height: 94vh; }
.nc-lesson-full .nc-lesson-reader-host { font-size: 1.05rem; }