/* Base text + links. MudBlazor components carry the theme's typography themselves, but every RAW element
   (bespoke er-* components, auth pages, kid surfaces) inherits from body — which the old template left on
   Helvetica with Bootstrap-blue links, quietly off-brand on every non-Mud surface. Palette vars come from
   MudThemeProvider; the literal fallbacks cover anything rendered before it mounts. */
html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link {
    color: var(--mud-palette-primary, #1E3A8A);
}

.btn-primary {
    color: #fff;
    background-color: var(--mud-palette-primary, #1E3A8A);
    border-color: var(--mud-palette-primary, #1E3A8A);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mud-palette-secondary, #0EA5E9);
}

/* Brand micro-signals: selection colour and a slim, quiet scrollbar. */
::selection { background: rgba(14, 165, 233, 0.28); }
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.45) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.55); }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- ElevenReady bespoke auth pages ---- */
.er-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #1E3A8A 0%, #0EA5E9 100%);
}

.er-auth-card {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 16px;
    padding: 2.25rem 2rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
}

.er-auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

/* Brand logo image (logo-transparent.png, downscaled): auth card + app bar. */
.er-auth-logo-img {
    display: block;
    margin-inline: auto;
    width: 120px;
    height: auto;
}

.er-appbar-logo {
    display: block;
    width: 132px;
    height: auto;
    /* The PNG art has generous internal padding (roughly a third of its height), so the image must be
       LARGER than the 64px bar for the wordmark itself to read at a sensible size — the negative block
       margins let the transparent padding overhang without growing the bar. */
    margin-block: -12px;
}

.er-auth-tagline {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #64748B;
}

.er-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.er-field > label {
    font-size: 1rem; /* 16px — WCAG-readable on mobile */
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

/* Helper / hint text under a field or checkbox. */
.er-helper-text {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748B;
}

/* Caps Lock warning under a password field. */
.er-caps-warning {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #B45309;
}

.er-caps-warning[hidden] {
    display: none;
}

/* WCAG 2.5.5: comfortable touch targets for auth actions. */
.er-auth-card .mud-button-root {
    min-height: 44px;
}

/* P10: differentiate the two footer links. */
.er-auth-card .er-link-primary {
    color: #1E3A8A;
    font-weight: 600;
}

.er-auth-card .er-link-secondary {
    color: #64748B;
    font-size: 0.875rem;
}

.er-field > input {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.er-field > input:focus {
    outline: none;
    border-color: #0EA5E9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

/* Checkbox fields (Remember me, registration consents): the checkbox + label sit on ONE row; helper
   text / validation messages stack BELOW, indented to align under the label text — never beside it. */
.er-field-check {
    flex-direction: column;
    gap: 0.3rem;
}

.er-field-check > label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    color: #334155;
    line-height: 1.45;
    cursor: pointer;
}

.er-field-check input[type=checkbox] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    accent-color: #1E3A8A;
}

.er-field-check .er-helper-text,
.er-field-check .validation-message {
    margin: 0 0 0 1.7rem; /* clear of the checkbox, aligned under the label text */
}

/* ---- Password field with show/hide toggle ---- */
.er-password {
    position: relative;
    display: flex;
    align-items: stretch;
}

.er-password__input {
    width: 100%;
    padding: 0.65rem 2.85rem 0.65rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.er-password__input:focus {
    outline: none;
    border-color: #0EA5E9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}

.er-password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #94A3B8;
    border-radius: 0 8px 8px 0;
    transition: color 0.15s ease;
}

.er-password__toggle:hover,
.er-password__toggle:focus-visible {
    color: #0EA5E9;
}

.er-password__toggle:focus-visible {
    outline: 2px solid #0EA5E9;
    outline-offset: -2px;
}

.er-password__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.er-password__icon--hide {
    display: none;
}

.er-password__toggle.is-revealed .er-password__icon--show {
    display: none;
}

.er-password__toggle.is-revealed .er-password__icon--hide {
    display: block;
}

/* ---- Password strength meter ---- */
.er-strength {
    margin: -0.4rem 0 1rem;
    --er-strength-color: #CBD5E1;
}

.er-strength.is-weak { --er-strength-color: #EF4444; }
.er-strength.is-fair { --er-strength-color: #F59E0B; }
.er-strength.is-good { --er-strength-color: #0EA5E9; }
.er-strength.is-strong { --er-strength-color: #10B981; }

.er-strength__bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.er-strength__bars > span {
    height: 5px;
    border-radius: 999px;
    background: #E2E8F0;
    transition: background-color 0.25s ease, transform 0.25s ease;
    transform-origin: left center;
}

.er-strength__bars > span.is-on {
    background: var(--er-strength-color);
}

.er-strength__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
    transition: color 0.2s ease;
}

.er-strength.is-weak .er-strength__label,
.er-strength.is-fair .er-strength__label,
.er-strength.is-good .er-strength__label,
.er-strength.is-strong .er-strength__label {
    color: var(--er-strength-color);
}

.er-strength__reqs {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
}

.er-strength__reqs > li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.er-strength__tick {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid #CBD5E1;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.er-strength__reqs > li.is-met {
    color: #10B981;
}

.er-strength__reqs > li.is-met .er-strength__tick {
    background: #10B981;
    border-color: #10B981;
}

.er-strength__reqs > li.is-met .er-strength__tick::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
    .er-strength__bars > span,
    .er-strength__label,
    .er-strength__tick,
    .er-strength__reqs > li {
        transition: none;
    }
}

/* ---- Blazor unhandled-error banner ---- */
/* The interactive ErrorBoundary in MainLayout is the normal error handler now, so the global banner stays
   hidden (it would only ever appear for a circuit-level failure before the boundary can render). */
#blazor-error-ui {
    display: none !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: #FEF3C7;
    color: #0F172A;
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---- Kid home (Child Mode) ---- */
.er-kid-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: 24px;
    background: linear-gradient(135deg, #0EA5E9 0%, #1E3A8A 100%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.28);
}

.er-kid-back.mud-icon-button {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

/* Sound on/off toggle — 44px+ touch target everywhere; styled like the other hero buttons on the kid home. */
.er-sound-toggle.mud-icon-button { min-width: 44px; min-height: 44px; }
.er-kid-hero__sound .er-sound-toggle.mud-icon-button {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.er-kid-hero__mascot {
    flex: 0 0 auto;
    filter: drop-shadow(0 4px 8px rgba(11, 37, 102, 0.25));
}

.er-kid-hero__text {
    flex: 1 1 auto;
    min-width: 0;
}

.er-kid-hello {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin: 0;
    line-height: 1.1;
}

.er-kid-bubble {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 500;
}

.er-kid-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.er-kid-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #0F172A;
}

.er-kid-pill small {
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
}

.er-kid-pill__emoji {
    font-size: 1.4rem;
    line-height: 1;
}

.er-kid-pill--coins { background: #FEF3C7; }
.er-kid-pill--points { background: #FDE68A; }
.er-kid-pill--streak { background: #FFE4E6; }
.er-kid-pill--badges { background: #DBEAFE; }

/* A reward pill that's also a tappable shortcut (coins → spend, badges → view).
   Looks like the other pills but gains a chevron + hover/focus affordance. */
.er-kid-pill--link {
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.er-kid-pill--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.er-kid-pill--link:focus-visible {
    outline: none;
    border-color: var(--mud-palette-primary, #1E3A8A);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.25);
}

.er-kid-pill__go {
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: #475569;
    margin-left: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
    .er-kid-pill--link {
        transition: none;
    }

    .er-kid-pill--link:hover {
        transform: none;
    }
}

.er-kid-section {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #1E3A8A;
    margin: 0 0 1rem;
}

.er-kid-card {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.er-kid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

/* Round illustrated icon tile at the top of each action card. */
.er-kid-card--tile { padding-top: 1.5rem; }

.er-kid-tile {
    width: 96px;
    height: 96px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.er-kid-tile svg {
    width: 58px;
    height: 58px;
}

.er-kid-tile--practice { background: radial-gradient(circle at 50% 38%, #E0F2FE, #BAE6FD); }
.er-kid-tile--mock { background: radial-gradient(circle at 50% 38%, #FEF3C7, #FDE68A); }
.er-kid-tile--diag { background: radial-gradient(circle at 50% 38%, #E0E7FF, #C7D2FE); }
.er-kid-tile--reading { background: radial-gradient(circle at 50% 38%, #CFFAFE, #A5F3FC); }
.er-kid-tile--writing { background: radial-gradient(circle at 50% 38%, #FEF3C7, #FDE68A); }

.er-kid-card__title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #1E3A8A;
    text-align: center;
}

.er-kid-card__desc {
    margin: 0.25rem 0 1rem;
    text-align: center;
    color: #64748B;
    font-size: 0.85rem;
    line-height: 1.4;
}

.er-kid-card__body {
    padding: 0.5rem 1.25rem 1.25rem;
}

/* Tappable subject tiles + skill chips (kid-friendly — no dropdowns). */
.er-pick-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #64748B;
    text-align: center;
    margin-bottom: 0.5rem;
}

.er-subject-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.er-subject-tile {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: 88px;
    justify-content: center;
    padding: 0.6rem 0.4rem;
    border-radius: 16px;
    background: #F1F5F9;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.15;
    color: #334155;
    text-align: center;
    transition: transform 0.1s ease, border-color 0.1s ease, background 0.1s ease;
}

.er-subject-tile:hover { transform: translateY(-2px); background: #E2E8F0; }
.er-subject-tile:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }
.er-subject-tile__emoji { font-size: 1.9rem; line-height: 1; }

.er-subject-tile.is-selected {
    border-color: #0EA5E9;
    background: #E0F2FE;
    color: #0B2566;
}

/* "Tap to go" variant (timed mock) gets a warm tint on hover. */
.er-subject-tile--go:hover { background: #FEF3C7; }

.er-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.er-skill-chip {
    all: unset;
    cursor: pointer;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: #1E3A8A;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.er-skill-chip:hover { transform: translateY(-2px); background: #0EA5E9; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); }
.er-skill-chip:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .er-subject-tile, .er-skill-chip { transition: none; }
    .er-subject-tile:hover, .er-skill-chip:hover { transform: none; }
}

/* ---- Learning plan bars (Child Mode home) ---- */
/* ===== Kid "Today" panel: daily goal ring + to-do missions (Atom-style daily loop, our palette) ===== */
/* ---- Today's Mission hero: the primary next-best-action CTA on the kid dashboard ---- */
/* Today's Mission hero on the kid dashboard. Distinct class from the full-screen "Learning Land"
   mission-welcome page (.er-mission, further down) — they previously collided and the welcome page's
   opacity:0 entrance state hid this hero on the dashboard. */
.er-todaymission {
    margin: 1.25rem 0 0.75rem;
    padding: 1.4rem 1.5rem;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, #1D4ED8 0%, #0EA5E9 100%);
    box-shadow: 0 10px 28px rgba(29, 78, 216, 0.28);
}
.er-todaymission__kicker { font-weight: 700; letter-spacing: 0.03em; opacity: 0.92; font-size: 0.95rem; }
.er-todaymission__title { margin: 0.35rem 0 0.15rem; font-size: 1.6rem; line-height: 1.2; }
.er-todaymission__sub { margin: 0 0 0.75rem; opacity: 0.95; font-size: 1.05rem; }
.er-todaymission__steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.er-todaymission__step {
    background: rgba(255, 255, 255, 0.18); border-radius: 999px;
    padding: 0.25rem 0.7rem; font-size: 0.9rem; font-weight: 600;
}
.er-todaymission__step.is-done { background: rgba(255, 255, 255, 0.32); }
.er-todaymission__meta { font-size: 0.9rem; opacity: 0.9; margin-bottom: 0.85rem; }
.er-todaymission .er-todaymission__cta {
    background: #fff; color: #1D4ED8; font-weight: 800; border-radius: 999px;
    padding: 0.6rem 1.6rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---- Fix My Mistakes card ---- */
.er-fixcard {
    display: flex; align-items: center; gap: 0.9rem;
    margin: 0 0 0.75rem; padding: 0.9rem 1.1rem; border-radius: 18px;
    background: #FFF7ED; border: 2px solid #FED7AA; text-decoration: none; color: inherit;
}
.er-fixcard:hover { background: #FFEDD5; }
.er-fixcard__emoji { font-size: 1.7rem; }
.er-fixcard__text { display: flex; flex-direction: column; }
.er-fixcard__title { font-weight: 800; color: #9A3412; }
.er-fixcard__sub { font-size: 0.9rem; color: #B45309; }
.er-fixcard__cta { margin-left: auto; font-weight: 800; color: #C2410C; }

@media (prefers-reduced-motion: reduce) { .er-mission { transition: none; } }

/* ---- Weekly learning plan (Mon–Sun rhythm strip) ---- */
.er-weekplan { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 8px; overflow-x: auto; margin-bottom: 1.25rem; }
.er-weekplan__day {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 0.6rem 0.4rem; border-radius: 14px; border: 1.5px solid var(--mud-palette-lines-default, #E2E8F0);
    background: #fff; color: inherit; text-decoration: none; min-height: 92px;
}
.er-weekplan__day.is-today { border-color: #1D4ED8; box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.18); }
.er-weekplan__day--rest { background: #F8FAFC; opacity: 0.85; }
.er-weekplan__dow { font-weight: 800; font-size: 0.8rem; color: #64748B; }
.er-weekplan__emoji { font-size: 1.4rem; }
.er-weekplan__title { font-size: 0.78rem; line-height: 1.15; }
a.er-weekplan__day:hover { border-color: #0EA5E9; background: #F0F9FF; }
@media (max-width: 640px) { .er-weekplan { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 120px; } }

/* ---- Today's mission hero: the ONE "do this now" card (next-best-action + daily goal ring) ---- */
.er-missionhero {
    display: flex; align-items: center; gap: 1.25rem;
    margin: 0 0 1rem; padding: 1.15rem 1.35rem; border-radius: 22px;
    background: linear-gradient(135deg, #EFF6FF 0%, #FDF6E3 100%);
    border: 2px solid rgba(14, 165, 233, 0.22);
    box-shadow: 0 8px 22px rgba(30, 58, 138, 0.07);
}
.er-missionhero__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.er-missionhero__eyebrow { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0284C7; }
.er-missionhero__title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #1E293B; line-height: 1.2; }
.er-missionhero__sub { margin: 0; font-size: 0.95rem; color: #475569; }
.er-missionhero__cta {
    align-self: flex-start; margin-top: 0.55rem; padding: 0.6rem 1.5rem; border-radius: 999px;
    background: linear-gradient(90deg, #0EA5E9, #1D4ED8); color: #fff; font-weight: 800; text-decoration: none;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.er-missionhero__cta:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(29, 78, 216, 0.34); }
.er-missionhero__cta:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (max-width: 520px) { .er-missionhero { flex-direction: column-reverse; text-align: center; } .er-missionhero__text { align-items: center; } .er-missionhero__cta { align-self: center; } }
@media (prefers-reduced-motion: reduce) { .er-missionhero__cta { transition: none; } }

/* ---- Weekly goal bar (computed on the fly) ---- */
.er-weekgoal {
    margin: 0 0 0.75rem; padding: 0.9rem 1.1rem; border-radius: 18px;
    background: var(--mud-palette-background-grey, #F1F5F9);
}
/* Slim variant: lives INSIDE the week-plan section as a one-line footer, not its own block. */
.er-weekgoal--slim { margin: 0.9rem 0 0; padding: 0.65rem 0.9rem; background: rgba(241, 245, 249, 0.7); }
.er-weekgoal--slim .er-weekgoal__bar { height: 10px; }
.er-weekgoal--slim .er-weekgoal__head { font-size: 0.9rem; margin-bottom: 0.3rem; }
.er-weekgoal__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; margin-bottom: 0.4rem; }
.er-weekgoal__count { font-size: 0.9rem; color: #475569; font-weight: 600; }
.er-weekgoal__bar { height: 14px; border-radius: 999px; background: #E2E8F0; overflow: hidden; }
.er-weekgoal__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0EA5E9, #1D4ED8); transition: width 0.4s ease; }
.er-weekgoal__fill.is-done { background: linear-gradient(90deg, #22C55E, #16A34A); }
.er-weekgoal__meta { font-size: 0.85rem; color: #64748B; margin-top: 0.35rem; }
@media (prefers-reduced-motion: reduce) { .er-weekgoal__fill { transition: none; } }

/* Daily goal ring — rendered inside the mission hero (the old standalone .er-today section was merged in). */
.er-today__goal { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.er-ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.er-ring__track { fill: none; stroke: rgba(30, 58, 138, 0.12); stroke-width: 8; }
.er-ring__fill {
    fill: none;
    stroke: #0EA5E9;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.er-today__goal.is-done .er-ring__fill { stroke: #16A34A; }
.er-today__goal-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.er-today__goal-num { font-weight: 800; font-size: 1.5rem; color: #1E293B; }
.er-today__goal-num small { font-size: 0.8rem; color: var(--mud-palette-text-secondary); font-weight: 700; }
.er-today__goal-cap { margin-top: 0.2rem; font-size: 0.7rem; font-weight: 700; color: #0EA5E9; }
.er-today__goal.is-done .er-today__goal-cap { color: #16A34A; }
@media (prefers-reduced-motion: reduce) {
    .er-ring__fill { transition: none; }
}

/* ===== Daily delight: Robbie's joke / fun fact (tap-to-reveal <details>) ===== */
.er-joke {
    margin: 0.75rem 0 0.25rem;
    max-width: 760px;
    border-radius: 16px;
    background: linear-gradient(135deg, #FEF9C3 0%, #FEF3C7 100%);
    border: 2px solid rgba(234, 179, 8, 0.3);
    overflow: hidden;
}
.er-joke__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 700;
    color: #854D0E;
    list-style: none;
}
.er-joke__head::-webkit-details-marker { display: none; }
.er-joke__head:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.er-joke__bot { flex: 0 0 auto; font-size: 1.4rem; line-height: 1; }
.er-joke__label { flex: 1 1 auto; }
.er-joke__hint {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #B45309;
    background: rgba(234, 179, 8, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.er-joke[open] .er-joke__hint { display: none; }
.er-joke__answer { margin: 0; padding: 0 1rem 0.95rem 3rem; font-weight: 700; color: #1E293B; }

/* ===== Daily-goal celebration overlay ===== */
.er-celebrate {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
}
.er-celebrate__card {
    position: relative;
    z-index: 2;
    max-width: 420px;
    width: 100%;
    text-align: center;
    background: #fff;
    border-radius: 24px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
    animation: er-pop-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.er-celebrate__buddy { display: inline-block; animation: er-bob 1.6s ease-in-out infinite; }
.er-celebrate__title { margin: 0.5rem 0 0.3rem; font-size: 1.5rem; font-weight: 800; color: #0F172A; }
.er-celebrate__sub { margin: 0 0 1.1rem; color: var(--mud-palette-text-secondary); }
.er-celebrate__badges { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.1rem; }
.er-celebrate__badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.er-celebrate__badge-icon { flex: 0 0 auto; font-size: 1.7rem; line-height: 1; }
.er-celebrate__badge-text { font-size: 0.9rem; color: #1E293B; }
.er-celebrate__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.er-confetti {
    position: absolute;
    top: -12px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.9;
    animation: er-fall 2.6s linear infinite;
}
.er-confetti--0 { left: 8%; background: #0EA5E9; animation-delay: 0s; }
.er-confetti--1 { left: 22%; background: #EAB308; animation-delay: 0.3s; }
.er-confetti--2 { left: 38%; background: #EC4899; animation-delay: 0.6s; }
.er-confetti--3 { left: 55%; background: #10B981; animation-delay: 0.15s; }
.er-confetti--4 { left: 72%; background: #F59E0B; animation-delay: 0.45s; }
.er-confetti--5 { left: 88%; background: #6366F1; animation-delay: 0.75s; }

@keyframes er-pop-in {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes er-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes er-fall {
    0% { transform: translateY(0) rotate(0); opacity: 0.95; }
    100% { transform: translateY(105vh) rotate(540deg); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
    .er-celebrate__card { animation: none; }
    .er-celebrate__buddy { animation: none; }
    .er-confetti { display: none; }
}

.er-plan {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 760px;
}

.er-plan-row {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    min-height: 60px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.er-plan-row:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13); }
.er-plan-row:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

.er-plan-row__label {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    color: #fff;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}

.er-plan-row__emoji { font-size: 1.3rem; }

.er-plan-row__progress {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem 0 1rem;
}

.er-plan-row__bar {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: hidden;
}

.er-plan-row__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.er-plan-row__count {
    font-weight: 700;
    font-size: 0.85rem;
    color: #334155;
    white-space: nowrap;
}

.er-plan-row__arrow {
    display: flex;
    align-items: center;
    padding-right: 1rem;
    color: #94A3B8;
    font-size: 1.3rem;
}

.er-plan-row--english .er-plan-row__label { background: #EC4899; }
.er-plan-row--english .er-plan-row__bar-fill { background: #EC4899; }
.er-plan-row--maths .er-plan-row__label { background: #3B82F6; }
.er-plan-row--maths .er-plan-row__bar-fill { background: #3B82F6; }
.er-plan-row--vr .er-plan-row__label { background: #10B981; }
.er-plan-row--vr .er-plan-row__bar-fill { background: #10B981; }
.er-plan-row--nvr .er-plan-row__label { background: #F59E0B; }
.er-plan-row--nvr .er-plan-row__bar-fill { background: #F59E0B; }
.er-plan-row--default .er-plan-row__label { background: #0EA5E9; }
.er-plan-row--default .er-plan-row__bar-fill { background: #0EA5E9; }

@media (prefers-reduced-motion: reduce) {
    .er-plan-row { transition: none; }
    .er-plan-row:hover { transform: none; }
    .er-plan-row__bar-fill { transition: none; }
}

/* ---- Subject journey map (Child Mode) ---- */
.er-journey-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.er-journey-head__emoji {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: radial-gradient(circle at 50% 38%, #E0F2FE, #BAE6FD);
}

.er-journey-head__title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #1E3A8A;
    margin: 0;
    line-height: 1.1;
}

.er-journey-head__sub {
    color: #64748B;
    font-weight: 600;
}

/* Subject-themed "island" background wrapping the journey head + path (matches the home plan colours). */
.er-journey-theme {
    max-width: 640px;
    border-radius: 24px;
    padding: 0.5rem 0.6rem 1.1rem;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.10), transparent 230px);
}
.er-journey-theme--maths { background: linear-gradient(180deg, rgba(59, 130, 246, 0.14), transparent 240px); }
.er-journey-theme--english { background: linear-gradient(180deg, rgba(236, 72, 153, 0.13), transparent 240px); }
.er-journey-theme--vr { background: linear-gradient(180deg, rgba(16, 185, 129, 0.13), transparent 240px); }
.er-journey-theme--nvr { background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), transparent 240px); }
.er-journey-theme--maths .er-journey-head { background: radial-gradient(circle at 50% 38%, #DBEAFE, #BFDBFE); }
.er-journey-theme--english .er-journey-head { background: radial-gradient(circle at 50% 38%, #FCE7F3, #FBCFE8); }
.er-journey-theme--vr .er-journey-head { background: radial-gradient(circle at 50% 38%, #D1FAE5, #A7F3D0); }
.er-journey-theme--nvr .er-journey-head { background: radial-gradient(circle at 50% 38%, #FEF3C7, #FDE68A); }
.er-journey-theme--maths .er-journey__topic { color: #2563EB; }
.er-journey-theme--english .er-journey__topic { color: #DB2777; }
.er-journey-theme--vr .er-journey__topic { color: #059669; }
.er-journey-theme--nvr .er-journey__topic { color: #B45309; }

.er-journey {
    max-width: 600px;
}

.er-journey__topic {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: #0EA5E9;
    margin: 1.25rem 0 0.6rem;
}

.er-journey-node {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    margin-bottom: 0.6rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.er-journey-node:hover { transform: translateX(4px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13); }
.er-journey-node:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

.er-journey-node__dot {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    background: #94A3B8;
}

.er-journey-node__title { display: block; font-weight: 700; color: #0F172A; }
.er-journey-node__sub { display: block; font-size: 0.8rem; color: #64748B; }

.er-journey-node--done .er-journey-node__dot { background: #10B981; }
.er-journey-node--current { outline: 2px solid #0EA5E9; }
.er-journey-node--current .er-journey-node__dot { background: #0EA5E9; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.25); }
/* "Coming soon" — no questions to practise yet: muted so it doesn't read as the next step. */
.er-journey-node--soon { opacity: 0.72; }
.er-journey-node--soon .er-journey-node__dot { background: #94A3B8; font-size: 1rem; }
.er-journey-node--locked { opacity: 0.6; cursor: not-allowed; }
.er-journey-node--locked .er-journey-node__dot { background: #94A3B8; font-size: 1rem; }

/* Foundation / Standard / Advanced chips on each journey node */
.er-journey-node__tiers { display: inline-flex; gap: 4px; margin-left: auto; align-self: center; }
.er-tier {
    width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center;
    font-size: 0.72rem; font-weight: 800; border: 1.5px solid #CBD5E1; color: #94A3B8; background: #fff;
}
.er-tier--open { border-color: #0EA5E9; color: #0369A1; }
.er-tier--done { border-color: #16A34A; background: #16A34A; color: #fff; }
.er-tier--locked { opacity: 0.55; }

/* "Islands" path polish: link the nodes with a connector + make the current step pulse + reward done nodes. */
.er-journey-node { position: relative; }
.er-journey-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 38px;
    top: calc(100% - 0.2rem);
    transform: translateX(-50%);
    width: 4px;
    height: 0.8rem;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.4);
    z-index: 0;
}
.er-journey-node--done:not(:last-child)::after { background: rgba(16, 185, 129, 0.5); }
.er-journey-node__dot { position: relative; z-index: 1; }
.er-journey-node--done .er-journey-node__dot {
    background: linear-gradient(135deg, #34D399, #10B981);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}
.er-journey-node--current .er-journey-node__dot { animation: er-dot-pulse 1.8s ease-in-out infinite; }
@keyframes er-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.25); }
    50% { box-shadow: 0 0 0 9px rgba(14, 165, 233, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .er-journey-node--current .er-journey-node__dot { animation: none; }
    .er-journey-node { transition: none; }
    .er-journey-node:hover { transform: none; }
}

.er-kid-start.mud-button-root {
    min-height: 52px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
}

@media (max-width: 600px) {
    .er-kid-hero { flex-direction: column; text-align: center; }
}

/* ---- Kid "learn before you practise" lesson card ---- */
.er-lesson {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.er-lesson__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.er-lesson__mascot {
    font-size: 2.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.er-lesson__eyebrow {
    font-weight: 700;
    color: #0EA5E9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.er-lesson__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.2;
}

.er-lesson__intro {
    font-size: 1.05rem;
    color: #334155;
    margin: 0 0 1rem;
}

.er-lesson__key {
    background: #EFF6FF;
    border-left: 4px solid #0EA5E9;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 1.02rem;
    color: #1E293B;
    margin-bottom: 1rem;
}

.er-lesson__label {
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.35rem;
}

.er-lesson__examples ul {
    margin: 0;
    padding-left: 1.2rem;
}

.er-lesson__examples li {
    margin-bottom: 0.4rem;
    color: #334155;
}

.er-lesson__tip {
    margin-top: 1rem;
    background: #FEF3C7;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-weight: 600;
    color: #92400E;
}

/* ---- Guided lesson stepper (kid "learn before you practise" flow) ---- */
.er-step-counter {
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748B;
}

.er-step-dots {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.er-step-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: #CBD5E1;
    transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.er-step-dot.is-done { background: #34D399; }

.er-step-dot.is-active {
    background: #0EA5E9;
    width: 1.6rem;
}

.er-lesson-step {
    text-align: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    animation: er-step-enter 0.28s ease;
}

.er-lesson-step .er-lesson__title { font-size: 1.6rem; }

.er-lesson-step__graphic {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    margin-bottom: 0.4rem;
    background: #EFF6FF;
}

/* Big, uncropped lesson picture — fills the card so kids can see the detail. */
.er-lesson-step__image {
    display: block;
    width: 100%;
    /* Big enough to actually see (440px read as a thumbnail); tap-to-zoom still covers fine detail. */
    max-width: 680px;
    height: auto;
    object-fit: contain;
    border-radius: 24px;
    margin-bottom: 0.6rem;
    background: #EFF6FF;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease;
}

/* Tap / double-click the picture to zoom it big. */
.er-lesson-step__imgbtn {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 24px;
    cursor: zoom-in;
}
.er-lesson-step__imgbtn:hover .er-lesson-step__image {
    transform: scale(1.015);
}
.er-lesson-step__imgbtn:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}
.er-lesson-step__zoomhint {
    position: absolute;
    bottom: 1rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    background: rgba(13, 27, 62, 0.74);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    pointer-events: none;
}

/* Full-screen zoom overlay for the picture. */
.er-zoom {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(13, 27, 62, 0.82);
    cursor: zoom-out;
    animation: er-relearn-fade 0.18s ease-out;
}
.er-zoom__img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.er-zoom__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #0D1B3E;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
}
.er-zoom__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .er-zoom { animation: none; }
    .er-lesson-step__image { transition: none; }
}

.er-lesson-step__video {
    width: 100%;
    max-width: 46rem; /* ~736px — a proper video, not a thumbnail */
    border-radius: 18px;
    margin-bottom: 0.6rem;
    background: #000;
}

.er-lesson-step__graphic--keyidea { background: #FEF9C3; }
.er-lesson-step__graphic--video { background: #E0E7FF; }

.er-narration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.er-narration__label {
    font-weight: 700;
    color: #0EA5E9;
    font-size: 0.9rem;
}

.er-narration__player {
    height: 40px;
    max-width: 100%;
}

.er-narration__transcript {
    max-width: 30rem;
    font-size: 0.95rem;
    color: #334155;
}

.er-narration__transcript summary {
    cursor: pointer;
    font-weight: 700;
    color: #0EA5E9;
}

.er-narration__transcript p {
    margin: 0.4rem 0 0;
    line-height: 1.5;
}
.er-lesson-step__graphic--example { background: #DCFCE7; }
.er-lesson-step__graphic--tip { background: #FEF3C7; }
.er-lesson-step__graphic--ready { background: #E0E7FF; }

.er-lesson-step__body {
    font-size: 1.2rem;
    color: #334155;
    /* Wider than before but still a readable measure (~65ch) — media grows more than text does. */
    max-width: 38rem;
    margin: 0.2rem 0 0;
    line-height: 1.55;
}

.er-lesson-step__body--key {
    font-weight: 700;
    color: #1E293B;
}

.er-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.er-step-nav__next { min-width: 9.5rem; }

/* Buddy companion in the practice runner header + celebrating on results. */
.er-run__buddy { display: flex; align-items: center; gap: 0.6rem; }
.er-buddy-cheer { display: inline-flex; animation: er-buddy-cheer 0.9s ease-in-out 2; }
@keyframes er-buddy-cheer { 0%,100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-8px) rotate(-6deg); } 60% { transform: translateY(-4px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .er-buddy-cheer { animation: none; } }

/* Composed dressed-buddy badge (dashboard etc.). */
.er-buddyav { position: relative; display: inline-block; }
.er-buddyav__base { position: relative; z-index: 2; display: block; }
.er-buddyav__layer { position: absolute; z-index: 3; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(13,27,62,.25)); }

/* Admin build-a-buddy item art manager. */
.er-aiitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.er-aiitem__art { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.35rem; }
.er-aiitem__art img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.er-aiitem__emoji { font-size: 3rem; line-height: 1; }

/* ===== Build-a-Buddy dress-up shop ===== */
.er-buddy-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 230px;
    border-radius: 24px;
    background: linear-gradient(160deg, #E0F2FE 0%, #EDE9FE 100%);
    overflow: hidden;
    box-shadow: inset 0 -8px 22px rgba(13, 27, 62, 0.06);
}
.er-buddy-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12rem;
    opacity: 0.28;
    filter: saturate(1.1);
    pointer-events: none;
}
.er-buddy-figure { position: relative; width: 132px; height: 132px; animation: er-buddy-float 3.2s ease-in-out infinite; }
@keyframes er-buddy-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.er-buddy-base { position: relative; z-index: 2; }
.er-buddy-layer { position: absolute; line-height: 1; z-index: 3; filter: drop-shadow(0 3px 4px rgba(13,27,62,.25)); }
.er-buddy-layer--hat { top: -34px; left: 50%; transform: translateX(-50%); font-size: 3rem; }
.er-buddy-layer--face { top: 38px; left: 50%; transform: translateX(-50%); font-size: 2.2rem; }
.er-buddy-layer--outfit { bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 2.6rem; }
.er-buddy-layer--held { bottom: -4px; right: -30px; font-size: 2.6rem; z-index: 4; }

.er-buddy-coins { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 0.4rem; }

.er-buddy-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.6rem;
    -webkit-overflow-scrolling: touch;
}
.er-buddy-tab {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 4.2rem;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.er-buddy-tab__emoji { font-size: 1.4rem; line-height: 1; }
.er-buddy-tab__label { font-size: 0.72rem; font-weight: 700; color: #334155; }
.er-buddy-tab:hover { border-color: var(--mud-palette-primary); }
.er-buddy-tab:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-buddy-tab.is-active { border-color: var(--mud-palette-primary); background: rgba(37, 99, 235, 0.1); }

.er-buddy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: 0.7rem;
    margin-top: 0.5rem;
}
.er-buddy-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.5rem 0.7rem;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.er-buddy-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(13, 27, 62, 0.1); }
.er-buddy-item.is-equipped { border-color: #16A34A; background: #ECFDF5; }
.er-buddy-item__badge {
    position: absolute;
    top: -0.55rem;
    background: #16A34A;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
}
.er-buddy-item__art { font-size: 2.6rem; line-height: 1; height: 3rem; display: flex; align-items: center; }
.er-buddy-item__art img { width: 3rem; height: 3rem; object-fit: contain; border-radius: 8px; }
.er-buddy-item__name { font-size: 0.8rem; font-weight: 600; color: #1E293B; line-height: 1.2; max-width: 100%; overflow-wrap: break-word; }
.er-buddy-item__btn {
    margin-top: 0.1rem;
    padding: 0.32rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.15s ease;
}
.er-buddy-item__btn:active:not(:disabled) { transform: scale(0.96); }
.er-buddy-item__btn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-buddy-item__btn.is-on { background: #16A34A; }
.er-buddy-item__btn:disabled { opacity: 0.55; cursor: default; }
.er-buddy-item__btn--buy { background: #F4B740; color: #4A2E00; }
.er-buddy-item__btn--buy.is-locked { background: #E2E8F0; color: #94A3B8; }
.er-buddy-item--off { border-style: dashed; cursor: pointer; justify-content: center; }
.er-buddy-item--off:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .er-buddy-tab, .er-buddy-item__btn, .er-buddy-item { transition: none; }
    .er-buddy-figure { animation: none; }
    .er-buddy-item:hover { transform: none; }
}

/* ===== Rich-text editor (admin) + rendered rich content ===== */
.er-rte { margin-bottom: 0.5rem; }
.er-rte__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.35rem;
}
.er-rte__editor {
    background: var(--mud-palette-surface);
    border-radius: 0 0 8px 8px;
}
.er-rte__editor .ql-editor {
    min-height: 8rem;
    font-size: 1rem;
}
/* Quill's snow toolbar — round the top corners to match. */
.er-rte .ql-toolbar.ql-snow { border-radius: 8px 8px 0 0; }
.er-rte__hint {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 0.3rem;
}
.er-rte__view {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--mud-palette-surface); /* match the live editor surface, not a grey slab */
    min-height: 8rem; /* same height as the editor so the page doesn't jump between modes */
    font-size: 1rem;
}
.er-rte__lock {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: middle;
}

/* Rendered rich content (question stem / explanation, admin + kid). Keeps authored images tidy and tags safe-looking. */
.er-richtext :is(p, ul, ol) { margin: 0 0 0.5rem; }
.er-richtext :is(p, ul, ol):last-child { margin-bottom: 0; }
.er-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0.4rem 0;
}
.er-richtext a { color: var(--mud-palette-primary); }
/* Tables in rich content: tidy, readable, and horizontally scrollable on small screens (mobile-friendly). */
.er-richtext table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5rem 0;
    font-size: 0.95em;
    display: block;
    overflow-x: auto;
}
.er-richtext :is(th, td) {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.er-richtext th { background: var(--mud-palette-background-grey); font-weight: 600; }

/* ===== Explanation view (shared by practice reveal + results review) — child-friendly, well-spaced ===== */
.er-explanation { display: flex; flex-direction: column; gap: 0.75rem; }
.er-explanation__image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    align-self: center;
}
/* Highlighted final answer */
.er-explanation__answer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    align-self: flex-start;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
}
.er-explanation__answer-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #047857;
}
.er-explanation__answer-value { font-weight: 700; color: #065F46; }
/* Body: short paragraphs, comfortable line height, generous step spacing */
.er-explanation__body { line-height: 1.6; }
.er-explanation__body :is(p, ul, ol) { margin: 0 0 0.6rem; }
.er-explanation__body ol, .er-explanation__body ul { padding-left: 1.4rem; }
.er-explanation__body li { margin-bottom: 0.3rem; }
/* Tip / Watch-out boxes — colour is a secondary cue (each carries its own title text). */
.er-explanation__note {
    display: flex;
    gap: 0.6rem;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    line-height: 1.55;
}
.er-explanation__note-icon { font-size: 1.2rem; line-height: 1.4; flex: 0 0 auto; }
.er-explanation__note-title { display: block; font-weight: 700; margin-bottom: 0.1rem; }
.er-explanation__note--tip { background: #EFF8FF; border: 1px solid #BAE0FD; color: #0B4A6F; }
.er-explanation__note--tip .er-explanation__note-title { color: #0369A1; }
.er-explanation__note--watch { background: #FFFBEB; border: 1px solid #FDE68A; color: #854D0E; }
.er-explanation__note--watch .er-explanation__note-title { color: #B45309; }
.er-explanation__note :is(p):last-child { margin-bottom: 0; }
/* The wrapper card used on the results-review screen (the reveal uses the existing .er-explain shell). */
.er-explanation-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

/* Reading-comprehension passage shown above its questions (collapsible so the child can fold it away). */
.er-passage {
    background: #FFFDF5;
    border: 1px solid #FDE68A;
    border-radius: 14px;
    padding: 0.5rem 1rem 1rem;
    margin-bottom: 1rem;
}
.er-passage__summary {
    cursor: pointer;
    font-weight: 700;
    color: #92400E;
    padding: 0.4rem 0;
    list-style: none;
}
.er-passage__summary::-webkit-details-marker { display: none; }
/* Exam-paper presentation: a serif face + roomy leading like a real 11+ paper, with numbered paragraphs in
   the margin so line/paragraph-reference questions ("In paragraph 2…") line up. */
.er-passage__body {
    line-height: 1.85;
    max-height: 46vh;
    overflow-y: auto;
    counter-reset: er-para;
    font-family: Georgia, 'Times New Roman', 'Lora', serif;
    font-size: 1.02rem;
    color: #1F2937;
    background: #FFFDF7;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
}
.er-passage__body :is(p, ul, ol) { margin: 0 0 0.85rem; }
.er-passage__body > p { counter-increment: er-para; position: relative; padding-left: 2rem; }
.er-passage__body > p::before {
    content: counter(er-para);
    position: absolute;
    left: 0;
    top: 0.2rem;
    min-width: 1.3rem;
    text-align: right;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    color: #94A3B8;
}
/* The decorative illustration block and the source attribution line aren't "paragraphs" — don't number them. */
.er-passage__body > .er-passage__illustration { padding-left: 0; }
.er-passage__body > .er-passage__illustration::before { content: none; }

/* ===== Kid practice runner: question card, answer choices, confidence, reveal ===== */
.er-run {
    max-width: 760px; /* roomier question card on laptops (was a 640px strip); options stay easy to scan */
    margin-inline: auto;
}
.er-run__progress {
    height: 8px;
    border-radius: 999px;
}
.er-q-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 6px 22px rgba(13, 27, 62, 0.06);
}
.er-q-card__skill {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin-bottom: 0.35rem;
}
.er-q-card__stem {
    font-size: 1.4rem;
    line-height: 1.35;
    font-weight: 700;
    color: #1E293B;
    margin: 0 0 1.25rem;
}

/* Answer choices = full-width tappable cards with a letter badge + inline state icon. */
.er-answers {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* NVR (image) options: a responsive grid of figure tiles rather than a stacked list. */
.er-answers--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}
.er-answers--grid .er-answer { flex-direction: column; align-items: center; text-align: center; }
.er-answer__img { display: block; width: 104px; height: 104px; }
/* A question's own figure (NVR stem strip / illustration).
   Capped against the VIEWPORT, not just the column width: a tall square diagram
   used to render ~700px high and push the answer options below the fold, so a
   child had to scroll to see what they were choosing between (and could answer
   without ever seeing all four). Scaling the figure down keeps stem + figure +
   options + Submit on one screen — with NO scrollbar inside the image. */
.er-q-card__image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    /* Space-aware rather than a fixed guess. Everything that must share the screen with
       the figure — app bar + progress, stem, four answer rows, confidence chips and
       Submit — measured at ~620px, so the figure gets whatever is left of the viewport,
       clamped so it never exceeds 320px on a tall monitor nor collapses below 140px on a
       short one. dvh so mobile browser chrome counts. Change the 620px if that chrome
       changes height. */
    max-height: clamp(140px, calc(100dvh - 620px), 320px);
    object-fit: contain;
    margin: 0.25rem auto 1rem;
}
.er-review__image {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(34vh, 320px);
    object-fit: contain;
    margin-inline: auto;
}

/* Short viewports (laptops, landscape phones) are where this bites hardest —
   buy the answers more room by trimming the figure and the surrounding chrome. */
/* Shorter viewports: the figure alone can't buy enough room, so compact the fixed rows
   too — this reclaims ~75px, the difference between Submit being on screen or just below
   it. Breakpoints are set from measurement: a full-size question needs ~1010px, so the
   squeeze has to start at 1000px, not at the usual "small screen" 800px. */
@media (max-height: 1000px) {
    .er-q-card { padding: 1.15rem; }
    .er-q-card__stem { font-size: 1.2rem; margin-bottom: 0.85rem; }
    .er-q-card__image { margin-bottom: 0.7rem; }
    .er-answers { gap: 0.45rem; }
    .er-answer { padding: 0.6rem 0.9rem; font-size: 1.02rem; }
    .er-confidence { margin-top: 0.9rem; }
}
@media (max-height: 760px) {
    .er-q-card__stem { font-size: 1.1rem; margin-bottom: 0.6rem; }
    .er-answer { padding: 0.5rem 0.85rem; font-size: 0.98rem; }
    .er-answers { gap: 0.35rem; }
    .er-confidence { margin-top: 0.7rem; }
}
.er-review-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.er-review-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 2px solid transparent; border-radius: 10px; }
.er-review-opt img { width: 76px; height: 76px; }
.er-review-opt.is-correct { border-color: var(--mud-palette-success); background: rgba(76,175,80,.08); }
.er-review-opt.is-wrong { border-color: var(--mud-palette-error); background: rgba(244,67,54,.06); }
.er-answer {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: #1E293B;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.er-answer[disabled] {
    cursor: default;
    opacity: 1;
}
.er-answer:not([disabled]):hover {
    border-color: var(--mud-palette-primary);
    background: rgba(37, 99, 235, 0.04);
}
.er-answer:not([disabled]):active {
    transform: scale(0.99);
}
.er-answer:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.er-answer__letter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #EEF2F7;
    color: #475569;
    font-weight: 800;
    font-size: 0.95rem;
}
.er-answer__text { flex: 1 1 auto; }
.er-answer__icon {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
}
.er-answer__icon--ok { color: #16A34A; }
.er-answer__icon--no { color: #DC2626; }

.er-answer.is-selected {
    border-color: var(--mud-palette-primary);
    background: rgba(37, 99, 235, 0.08);
}
.er-answer.is-selected .er-answer__letter {
    background: var(--mud-palette-primary);
    color: #fff;
}
.er-answer.is-correct {
    border-color: #16A34A;
    background: #ECFDF5;
}
.er-answer.is-correct .er-answer__letter {
    background: #16A34A;
    color: #fff;
}
.er-answer.is-wrong {
    border-color: #DC2626;
    background: #FEF2F2;
}
.er-answer.is-wrong .er-answer__letter {
    background: #DC2626;
    color: #fff;
}
.er-answer.is-dimmed { opacity: 0.5; }

/* "How sure are you?" — friendly pill segmented control instead of stacked radios. */
.er-confidence { margin-top: 1.4rem; }
.er-confidence__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
}
.er-confidence__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.er-conf {
    padding: 0.5rem 0.95rem;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: #334155;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.er-conf:hover { border-color: var(--mud-palette-primary); }
.er-conf:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.er-conf.is-active {
    border-color: var(--mud-palette-primary);
    background: rgba(37, 99, 235, 0.1);
    color: var(--mud-palette-primary);
}

/* Reveal: result banner + explanation + re-learn invite. */
.er-result {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.4rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    font-size: 1.12rem;
    font-weight: 700;
}
.er-result__emoji { font-size: 1.5rem; line-height: 1; }
/* In-session hot streak — "🔥 3 in a row!" chip on consecutive corrects. */
.er-result__streak {
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #B45309;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}
.er-result.is-correct { background: #ECFDF5; color: #166534; }
.er-result.is-wrong { background: #FFF1F2; color: #9F1239; }

.er-explain {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: #F1F5F9;
    color: #334155;
    font-size: 1.02rem;
    line-height: 1.5;
}
.er-explain__icon {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    color: #F59E0B;
    margin-top: 0.1rem;
}

/* "Learn this again" — a warm, secondary (not loud) full-width invite to re-teach on a miss. */
.er-relearn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 2px solid #F4B740;
    border-radius: 14px;
    background: #FFF7E6;
    color: #92400E;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.er-relearn-btn:hover:not([disabled]) { background: #FDEFC8; }
.er-relearn-btn:active:not([disabled]) { transform: scale(0.99); }
.er-relearn-btn:focus-visible {
    outline: 3px solid #F4B740;
    outline-offset: 2px;
}
.er-relearn-btn[disabled] { opacity: 0.6; cursor: default; }
.er-relearn-btn__icon { width: 1.4rem; height: 1.4rem; }

/* Action row under the card. */
.er-q-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.er-q-next { min-width: 11rem; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
    .er-answer, .er-relearn-btn { transition: none; }
}

/* ===== Kid "My results" history list ===== */
.er-history {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.er-history__row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.er-history__row:not([disabled]):hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 18px rgba(13, 27, 62, 0.08);
}
.er-history__row:not([disabled]):active { transform: scale(0.99); }
.er-history__row:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-history__row[disabled] { cursor: default; opacity: 0.7; }
.er-history__icon { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
.er-history__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.er-history__title { font-weight: 700; color: #1E293B; }
.er-history__date { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-history__score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}
.er-history__fraction { font-weight: 800; font-size: 1.05rem; }
.er-history__pct { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.er-history__score.is-great .er-history__fraction { color: #16A34A; }
.er-history__score.is-ok .er-history__fraction { color: #B45309; }
/* Low scores stay calm and neutral for a child — never alarming red — with an encouraging nudge instead. */
.er-history__score.is-low .er-history__fraction { color: #475569; }
.er-history__cheer { font-size: 0.78rem; font-weight: 700; color: #0EA5E9; }
.er-history__chev { flex: 0 0 auto; color: var(--mud-palette-text-secondary); }
.er-history__inprogress { flex: 0 0 auto; font-size: 0.82rem; color: var(--mud-palette-text-secondary); font-style: italic; }
.er-history-empty { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0; }
@media (prefers-reduced-motion: reduce) { .er-history__row { transition: none; } }

/* Time-bucketed history groups (Today / Yesterday / …) — collapsible, kid-friendly. */
.er-histgrp { display: flex; flex-direction: column; gap: 0.6rem; }
.er-histgrp__group {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}
.er-histgrp__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--mud-palette-surface);
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.er-histgrp__head:hover { background: rgba(37, 99, 235, 0.04); }
.er-histgrp__head.is-open { background: rgba(37, 99, 235, 0.06); }
.er-histgrp__head:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.er-histgrp__emoji { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; }
.er-histgrp__text { flex: 1 1 auto; display: flex; flex-direction: column; }
.er-histgrp__label { font-weight: 800; color: #1E293B; }
.er-histgrp__summary { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-histgrp__chev {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 1.1rem;
    transition: transform 0.18s ease;
}
.er-histgrp__chev.is-open { transform: rotate(90deg); }
.er-histgrp__body {
    padding: 0 0.6rem 0.6rem;
    gap: 0.45rem;
}
/* Dashboard footer: the door to the full Track history when the list is trimmed to the last two weeks. */
.er-histgrp__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    color: var(--mud-palette-primary);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.er-histgrp__more:hover { background: rgba(37, 99, 235, 0.05); border-color: var(--mud-palette-primary); }
.er-histgrp__more:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
/* Inside a group, soften the individual play rows so the group is the primary frame. */
.er-histgrp__body .er-history__row { border-color: var(--mud-palette-lines-default); border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .er-histgrp__head, .er-histgrp__chev { transition: none; } }

/* Practice completion / results: friendly, never-punitive summary + the coins/points just earned. */
.er-kid-result { text-align: center; border-radius: 20px; }
.er-kid-result__score {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1E293B; /* calm ink — never red, even for a low score */
    margin: 0.1rem 0;
}
.er-kid-result__cheer { margin-top: 0.4rem; font-weight: 700; color: #0EA5E9; }

.er-reward {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
    animation: er-reward-pop 0.45s ease both;
}
.er-reward__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-weight: 800;
    color: #1E293B;
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    box-shadow: 0 2px 6px rgba(234, 179, 8, 0.25);
}
.er-reward__icon { font-size: 1.15rem; line-height: 1; }

.er-reward-badges { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
.er-reward-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.2);
}
.er-reward-badge__icon { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; }
.er-reward-badge__text { font-size: 0.9rem; color: #1E293B; }

.er-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@keyframes er-reward-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .er-reward { animation: none; }
}

/* Re-learn mini-lesson overlay: a focused, kid-friendly sheet over the question. */
.er-relearn {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(13, 27, 62, 0.62);
    backdrop-filter: blur(4px);
    animation: er-relearn-fade 0.18s ease-out;
}
.er-relearn__sheet {
    width: 100%;
    /* Wide enough for the lesson VIDEO to reach its natural 46rem size — at the old
       30rem the player was squeezed to ~330px and the mini-lesson felt like a
       cramped tooltip rather than the main event. */
    max-width: min(56rem, 94vw);
    /* Cap the sheet, not the page: the child scrolls the lesson inside the card while
       the backdrop stays put, so Back/Next never drift off the bottom of the screen. */
    max-height: calc(100dvh - 2.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--mud-palette-surface);
    border-radius: 26px;
    box-shadow: 0 24px 64px rgba(13, 27, 62, 0.42);
}
/* Give the mini-lesson the same generous media sizing as the full Learn page. */
.er-relearn__sheet .er-lesson-step__video,
.er-relearn__sheet .er-lesson-step__image { width: 100%; }

@media (max-width: 600px) {
    .er-relearn { padding: 0.6rem; }
    .er-relearn__sheet { padding: 1.1rem 1rem 1.35rem; border-radius: 20px; max-height: calc(100dvh - 1.2rem); }
}
@keyframes er-relearn-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .er-relearn { animation: none; }
    @keyframes er-relearn-fade { from { opacity: 1; } to { opacity: 1; } }
}

@keyframes er-step-enter {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .er-lesson-step { animation: none; }
    .er-step-dot { transition: none; }
}

/* ---- Lesson library (browse all approved lessons) ---- */
.er-kid-hero--compact { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.er-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.er-lesson-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.er-lesson-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.16);
    border-color: #7DD3FC;
}

.er-lesson-tile:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

.er-lesson-tile__topic {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0EA5E9;
}

.er-lesson-tile__title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #1E293B;
    line-height: 1.25;
}

.er-lesson-tile__key {
    font-size: 0.9rem;
    color: #475569;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.er-lesson-tile__cta {
    margin-top: 0.35rem;
    font-weight: 700;
    color: #0EA5E9;
}

@media (prefers-reduced-motion: reduce) {
    .er-lesson-tile { transition: none; }
    .er-lesson-tile:hover { transform: none; }
}

/* ---- Child Mode bottom tab bar ---- */
.er-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08);
}

.er-tabbar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 58px;
    padding: 0.3rem 0.25rem;
    border-radius: 14px;
    text-decoration: none;
    color: #64748B;
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.er-tabbar__item:hover { background: #F1F5F9; }

.er-tabbar__item.active {
    color: #0B2566;
    background: #E0F2FE;
}

.er-tabbar__item.active .er-tabbar__icon { transform: translateY(-2px) scale(1.12); }

.er-tabbar__icon {
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.12s ease;
}

.er-tabbar__item:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 2px; }

/* Keep page content clear of the fixed bar. */
.er-has-tabbar { padding-bottom: 96px; }

@media (prefers-reduced-motion: reduce) {
    .er-tabbar__item, .er-tabbar__icon { transition: none; }
    .er-tabbar__item.active .er-tabbar__icon { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .er-kid-card { transition: none; }
    .er-kid-card:hover { transform: none; }
}

/* ---- Cookie consent banner ---- */
.er-cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1400;
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #0F172A;
    color: #F8FAFC;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.4);
    font-size: 0.9rem;
    line-height: 1.5;
}

.er-cookie-banner[hidden] {
    display: none;
}

.er-cookie-banner__text {
    flex: 1 1 20rem;
}

.er-cookie-banner__text a {
    color: #7DD3FC;
    text-decoration: underline;
}

.er-cookie-banner__actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.er-cookie-btn {
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.er-cookie-btn--primary {
    background: #0EA5E9;
    color: #0F172A;
}

.er-cookie-btn--ghost {
    background: transparent;
    color: #F8FAFC;
    border-color: #475569;
}

.er-cookie-btn:focus-visible {
    outline: 3px solid #7DD3FC;
    outline-offset: 2px;
}
/* ---- Kid avatar (tappable mascot → avatar shop) ---- */
.er-kid-avatar-link {
    position: relative;
    display: inline-flex;
    text-decoration: none;
    border-radius: 50%;
}

.er-kid-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(11, 37, 102, 0.3);
}

/* ---- "Learning Land" mission welcome ---- */
/* Full-page quest scene: breaks out of MudContainer (MaxWidth.Large + my-6) to bleed edge-to-edge and
   fill the viewport below the app bar — the child steps INTO the world instead of opening a window. */
.er-mission-page {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    margin-top: -24px;   /* cancel the layout container's my-6 so the gradient meets the app bar */
    margin-bottom: -24px;
    min-height: calc(100dvh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #2563EB 0%, #7C3AED 100%);
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
    overflow: hidden;
}
/* The 100vw breakout can exceed the viewport by the scrollbar's width — clip it at the layout level. */
.mud-main-content { overflow-x: clip; }

.er-mission {
    text-align: center;
    color: #fff;
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease;
}

.er-mission--in {
    opacity: 1;
    transform: translateY(0);
}

.er-mission__badge {
    font-size: 3.25rem;
    line-height: 1;
    /* A few welcoming bounces, then settle — an endless animation kept the page from ever reaching a stable
       paint (janky transitions / screenshot stalls, J7). The keyframe rests at translateY(0), so it ends in place. */
    animation: er-mission-bounce 1.8s ease-in-out 4;
}

@keyframes er-mission-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.er-mission__eyebrow {
    margin: .5rem 0 0;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
    opacity: .9;
}

.er-mission__title {
    margin: .15rem 0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    line-height: 1.1;
}

.er-mission__body {
    margin: 0 0 .75rem;
    max-width: 32ch;
    font-size: 1.05rem;
    opacity: .95;
}

.er-mission__go {
    font-size: 1.15rem;
    padding: .6rem 1.6rem;
}

/* The buddy's speech bubble: a white card with a tail pointing up at the avatar. */
.er-mission__bubble {
    position: relative;
    margin-top: .9rem;
    max-width: 34ch;
    background: #fff;
    color: #1E293B;
    border-radius: 16px;
    padding: .55rem .95rem;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 6px 16px rgba(11, 37, 102, 0.25);
}
.er-mission__bubble::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
}

/* Quest-scroll facts: translucent pills under the story. */
.er-mission__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: .1rem 0 .35rem;
}
.er-mission__chip {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Floating scenery: stars and clouds drifting across the whole scene, behind the content. */
.er-mission__float {
    position: absolute;
    font-size: 1.8rem;
    opacity: .7;
    pointer-events: none;
    animation: er-mission-float 6s ease-in-out infinite;
}
.er-mission__float--1 { top: 12%; left: 10%; animation-delay: 0s; }
.er-mission__float--2 { top: 22%; right: 12%; font-size: 1.3rem; animation-delay: 1.6s; }
.er-mission__float--3 { bottom: 16%; left: 14%; font-size: 2.4rem; opacity: .4; animation-delay: 3.1s; }
.er-mission__float--4 { top: 40%; left: 4%; font-size: 2rem; opacity: .35; animation-delay: 2.2s; }
.er-mission__float--5 { bottom: 24%; right: 8%; font-size: 1.4rem; animation-delay: 4.4s; }
@media (max-width: 700px) { .er-mission__float--4, .er-mission__float--5 { display: none; } }

/* "Maybe later" sits on the gradient now — keep it readable and obviously tappable. */
.er-mission__later { color: rgba(255, 255, 255, 0.85) !important; }
.er-mission__later:hover { color: #fff !important; }

@keyframes er-mission-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    .er-mission { transition: none; opacity: 1; transform: none; }
    .er-mission__badge { animation: none; }
    .er-mission__float { animation: none; }
}

/* ---- Admin Skill Lessons: native-button accordion + readable popover + dark-mode contrast ---- */

/* (#1) Subject dropdown: force an opaque surface + elevation + stacking so options aren't see-through. */
.er-select-popover.mud-popover,
.er-select-popover .mud-list {
    background-color: var(--mud-palette-surface) !important;
}
.er-select-popover.mud-popover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    z-index: 1400;
}

/* Answer-option editor row: radio · text · remove, each in its own column with a clear gap so the
   left option's remove button never crowds the next option's radio. One option per row. */
.er-option-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}
.er-option-row__radio {
    margin: 0;
    flex: 0 0 auto;
}
.er-option-row__text {
    min-width: 0;
    flex: 1;
}
/* Option picture (NVR figures etc.) — shown so a reviewer sees what the child sees. */
.er-option-row__img {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    object-fit: contain;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: #fff;
    padding: 4px;
}
/* Whole-question picture (e.g. the composed NVR puzzle strip/matrix) under the stem. */
.er-qe-stem-img img {
    max-width: 100%;
    max-height: 340px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: #fff;
    padding: 8px;
}

/* Custom disclosure accordion (real <button> toggles for accessibility + state we control). */
.er-acc__item {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    margin-bottom: .5rem;
    background-color: var(--mud-palette-surface);
    overflow: hidden;
}
.er-acc__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: .75rem;
}
.er-acc__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    background: none;
    border: 0;
    font: inherit;
    color: var(--mud-palette-text-primary);
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
}
.er-acc__toggle:hover {
    background-color: var(--mud-palette-action-default-hover);
}
.er-acc__toggle:focus-visible {
    outline: 3px solid #7DD3FC;
    outline-offset: -3px;
}
/* (#7) Chevron uses the primary text colour so it meets AA contrast in light AND dark themes. */
.er-acc__chevron {
    display: inline-block;
    color: var(--mud-palette-text-primary);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .15s ease;
}
.er-acc__chevron.is-open {
    transform: rotate(90deg);
}
.er-acc__title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.er-acc__chips {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
}
.er-acc__panel {
    padding: .25rem 1rem 1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Status-coloured accordion headers — scan a long list of lessons at a glance. A coloured left rail +
   faint header tint; the text status chip stays, so colour is a SECONDARY cue (never the sole channel — WCAG/ICO). */
.er-acc__item--approved { border-left: 4px solid var(--mud-palette-success); }
.er-acc__item--approved > .er-acc__header { background: color-mix(in srgb, var(--mud-palette-success) 9%, transparent); }
.er-acc__item--review   { border-left: 4px solid var(--mud-palette-warning); }
.er-acc__item--review   > .er-acc__header { background: color-mix(in srgb, var(--mud-palette-warning) 11%, transparent); }
.er-acc__item--draft    { border-left: 4px solid var(--mud-palette-info); }
.er-acc__item--draft    > .er-acc__header { background: color-mix(in srgb, var(--mud-palette-info) 9%, transparent); }
.er-acc__item--empty    { border-left: 4px solid var(--mud-palette-lines-default); }

/* Step accordions colour-coded by media type so a multi-step lesson is easy to read top to bottom. */
.er-acc__item--step-text  { border-left: 3px solid var(--mud-palette-info); }
.er-acc__item--step-image { border-left: 3px solid var(--mud-palette-secondary); }
.er-acc__item--step-video { border-left: 3px solid var(--mud-palette-tertiary, var(--mud-palette-primary)); }
.er-acc--steps .er-acc__item {
    border-radius: 8px;
}
.er-acc--steps .er-acc__item:hover {
    border-color: var(--mud-palette-primary);
}

/* Step row: a numbered badge + left-aligned summary, so collapsed rows read like a clean list. */
.er-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}
.er-step__text {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Drag handle + drag-and-drop reorder feedback (arrows remain as the non-drag/keyboard fallback). */
.er-step__grip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .15rem;
    color: var(--mud-palette-text-secondary);
    cursor: grab;
    touch-action: none;
}
.er-step__grip:active {
    cursor: grabbing;
}
.er-acc--steps .er-acc__item.is-dragging {
    opacity: .45;
}
.er-acc--steps .er-acc__item.is-drag-over {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 3px 0 -1px var(--mud-palette-primary);
}
@media (prefers-reduced-motion: reduce) {
    .er-acc--steps .er-acc__item {
        transition: none;
    }
}

/* "Generate with AI" panel inside an expanded step — a tinted, labelled box so the AI actions are
   obvious and clearly distinct from the text fields above them. */
.er-aitools {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: .75rem .85rem;
    background-color: var(--mud-palette-action-default-hover);
}
.er-aitools__label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {
    .er-acc__chevron { transition: none; }
}

/* (#7) Floating field labels can fall below 4.5:1 in dark mode — use the primary text colour for the
   shrunk/floating label so the "Lesson title" etc. labels stay legible. */
.er-lessons-admin .mud-input-label.mud-input-label-inputcontrol {
    color: var(--mud-palette-text-primary);
}

/* ===== Family dashboard (parent) — modern 2026 polish ===== */
.er-dash-head { margin-bottom: 1.75rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.er-dash-head__title { font-weight: 700; letter-spacing: -0.02em; }
.er-dash-head__sub { color: var(--mud-palette-text-secondary); margin-top: 0.15rem; }
.er-dash-head__add { flex-shrink: 0; }
.er-dash-loading { display: flex; justify-content: center; padding: 3rem 0; }

/* Empty / welcome state — soft brand-tinted card with a gradient badge + reassurance chips. */
.er-empty {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-radius: 24px;
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
    background:
        radial-gradient(1100px 380px at 50% -150px, color-mix(in srgb, var(--mud-palette-secondary) 20%, transparent), transparent 70%),
        linear-gradient(180deg, var(--mud-palette-surface), color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -26px rgba(30, 58, 138, 0.4);
}
.er-empty__art {
    width: 84px; height: 84px; margin: 0 auto 1.25rem;
    display: grid; place-items: center;
    border-radius: 22px; color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
    box-shadow: 0 14px 26px -12px rgba(14, 165, 233, 0.65);
}
.er-empty__art .mud-icon-root { font-size: 2.4rem; }
.er-empty__title {
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary); margin: 0 0 0.5rem;
}
.er-empty__sub { color: var(--mud-palette-text-secondary); max-width: 52ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.er-empty__cta { border-radius: 999px !important; padding-inline: 1.6rem !important; box-shadow: 0 12px 24px -12px rgba(30, 58, 138, 0.7) !important; }
.er-empty__feats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; padding: 0; margin: 1.85rem 0 0; }
.er-empty__feats li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; font-weight: 600; color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border-radius: 999px; padding: 0.4rem 0.85rem;
}
.er-empty__feats .mud-icon-root { font-size: 1.05rem; color: var(--mud-palette-secondary); }

/* ---- Pill button primitive -------------------------------------------------
   One geometry for every call-to-action: same radius, same height, never wraps.
   Mixing MudBlazor's default 4px-radius buttons with bespoke pills is what made
   these rows look dated, so the shape lives in ONE class used everywhere. */
.er-btn-pill.mud-button-root {
    border-radius: 999px;
    min-height: 42px;
    padding-inline: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    white-space: nowrap;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.er-btn-pill.mud-button-filled-primary {
    box-shadow: 0 6px 16px -8px rgba(30, 58, 138, 0.62);
}
.er-btn-pill.mud-button-filled-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(30, 58, 138, 0.7);
}
.er-btn-pill:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* Child cards */
.er-kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; }
.er-kid-card {
    display: flex; flex-direction: column;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 22px; padding: 1.35rem 1.35rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px -24px rgba(30, 58, 138, 0.42);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.er-kid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 26px 48px -26px rgba(30, 58, 138, 0.5);
    border-color: color-mix(in srgb, var(--mud-palette-secondary) 40%, transparent);
}
.er-kid-card__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.15rem; }
.er-kid-card__avatar {
    width: 50px; height: 50px; flex: 0 0 50px;
    display: grid; place-items: center; border-radius: 16px;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.25rem; color: #fff;
    background: linear-gradient(140deg, #1E3A8A, #0EA5E9);
    /* Soft ring lifts the tile off the card instead of sitting flat on it. */
    box-shadow: 0 0 0 3px color-mix(in srgb, #0EA5E9 14%, transparent), 0 6px 14px -8px rgba(30, 58, 138, 0.75);
}
.er-kid-card__name { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); }
.er-kid-card__meta { font-size: 0.8rem; color: var(--mud-palette-text-secondary); margin: 0.1rem 0 0; }

/* Stat tiles: number first (tabular figures keep columns aligned), label as quiet
   micro-caps, colour carried by the icon chip + a hairline rather than a heavy block. */
.er-kid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; margin-bottom: 1.15rem; }
.er-kid-stat {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.7rem; border-radius: 14px;
    background: var(--er-stat-bg);
    border: 1px solid color-mix(in srgb, var(--er-stat-ico) 14%, transparent);
}
.er-kid-stat__ico { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: var(--er-stat-ico-bg); color: var(--er-stat-ico); }
.er-kid-stat__ico .mud-icon-root { font-size: 1.05rem; }
.er-kid-stat__txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.er-kid-stat__val {
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.15rem;
    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
    color: var(--mud-palette-text-primary);
}
.er-kid-stat__lbl {
    font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}
.er-kid-stat--gold    { --er-stat-bg: color-mix(in srgb, #EAB308 10%, transparent); --er-stat-ico: #B45309; --er-stat-ico-bg: color-mix(in srgb, #EAB308 22%, transparent); }
.er-kid-stat--streak  { --er-stat-bg: color-mix(in srgb, #EF4444 9%, transparent);  --er-stat-ico: #DC2626; --er-stat-ico-bg: color-mix(in srgb, #EF4444 20%, transparent); }
.er-kid-stat--badge   { --er-stat-bg: color-mix(in srgb, #1E3A8A 8%, transparent);  --er-stat-ico: #1E3A8A; --er-stat-ico-bg: color-mix(in srgb, #1E3A8A 16%, transparent); }
.er-kid-stat--session { --er-stat-bg: color-mix(in srgb, #10B981 10%, transparent); --er-stat-ico: #047857; --er-stat-ico-bg: color-mix(in srgb, #10B981 20%, transparent); }

/* Action row: primary + tonal secondary on one line, cheer pushed to the right. */
.er-kid-card__actions {
    display: flex; align-items: center; gap: 0.5rem; margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}
/* Tonal secondary — a filled-but-quiet button reads far more current than an
   outlined one sitting next to a solid pill. */
.er-kid-card__actions .er-kid-practice.mud-button-root {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    box-shadow: none;
}
.er-kid-card__actions .er-kid-practice.mud-button-root:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 17%, transparent);
    transform: translateY(-1px);
}
.er-kid-cheer.mud-icon-button {
    width: 42px; height: 42px;
    color: var(--mud-palette-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent);
    transition: background-color 0.16s ease, transform 0.16s ease;
}
.er-kid-cheer.mud-icon-button:hover { background-color: color-mix(in srgb, var(--mud-palette-secondary) 22%, transparent); transform: translateY(-1px); }
.er-kid-cheer.mud-icon-button:focus-visible { outline: 3px solid var(--mud-palette-secondary); outline-offset: 2px; }
/* Sent: settle into a warm confirmed state rather than a greyed-out dead control. */
.er-kid-cheer--sent.mud-icon-button.mud-button-root:disabled {
    color: #DC2626;
    background-color: color-mix(in srgb, #EF4444 13%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .er-kid-card, .er-btn-pill.mud-button-root, .er-kid-cheer.mud-icon-button { transition: none; }
    .er-kid-card:hover,
    .er-btn-pill.mud-button-filled-primary:hover,
    .er-kid-card__actions .er-kid-practice.mud-button-root:hover,
    .er-kid-cheer.mud-icon-button:hover { transform: none; }
}

/* Dark mode: lift the badge/session icon colours so they stay legible on the dark tint. */
.mud-theme-dark .er-kid-stat--badge   { --er-stat-ico: #93C5FD; }
.mud-theme-dark .er-kid-stat--session { --er-stat-ico: #6EE7B7; }
.mud-theme-dark .er-kid-stat--gold    { --er-stat-ico: #FCD34D; }
.mud-theme-dark .er-kid-stat--streak  { --er-stat-ico: #FCA5A5; }

.er-mb-lg { margin-bottom: 1.5rem; }
.er-kid-stats--row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ===== Child overview hub (/child/{id}) ===== */
.er-hub-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.er-hub-head__avatar {
    width: 58px; height: 58px; flex: 0 0 58px;
    display: grid; place-items: center; border-radius: 18px;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
}
.er-hub-head__name { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; color: var(--mud-palette-text-primary); }
.er-hub-head__meta { font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin: 0; }

.er-starthere {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    border-radius: 20px; padding: 1.25rem 1.4rem; margin-bottom: 1.6rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-secondary) 12%, var(--mud-palette-surface)));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}
.er-starthere__ico {
    display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 14px; color: #fff; background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
    box-shadow: 0 10px 20px -10px rgba(14, 165, 233, 0.6);
}
.er-starthere__ico .mud-icon-root { font-size: 1.5rem; }
.er-starthere__body { flex: 1; min-width: 200px; }
.er-starthere__title { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; margin: 0 0 0.15rem; color: var(--mud-palette-text-primary); }
.er-starthere__sub { font-size: 0.85rem; color: var(--mud-palette-text-secondary); margin: 0; line-height: 1.5; }
.er-starthere__cta { border-radius: 999px !important; padding-inline: 1.4rem !important; box-shadow: 0 12px 24px -12px rgba(30, 58, 138, 0.7) !important; }

.er-hub-section { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 1.9rem 0 0.85rem; color: var(--mud-palette-text-primary); }

.er-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.er-tile {
    display: flex; gap: 0.85rem; align-items: flex-start; text-align: left; width: 100%;
    font: inherit; cursor: pointer;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 16px; padding: 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.er-tile:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -24px rgba(30, 58, 138, 0.48); border-color: color-mix(in srgb, var(--mud-palette-secondary) 38%, transparent); }
.er-tile:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-tile__ico {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}
.er-tile__ico .mud-icon-root { font-size: 1.35rem; }
.er-tile__txt { display: block; }
.er-tile__title { display: block; font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.98rem; margin: 0 0 0.15rem; color: var(--mud-palette-text-primary); }
.er-tile__desc { display: block; font-size: 0.82rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }

/* ===== Profile picker (/play) ===== */
.er-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.er-pick-form { display: block; }
.er-pick-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%;
    font: inherit; cursor: pointer; text-align: center;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 20px; padding: 1.6rem 1rem 1.2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -24px rgba(30, 58, 138, 0.42);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.er-pick-card:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(30, 58, 138, 0.5); border-color: color-mix(in srgb, var(--mud-palette-secondary) 40%, transparent); }
.er-pick-card:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-pick-card__avatar {
    width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; margin-bottom: 0.3rem;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.6rem; color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
}
.er-pick-card__name { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--mud-palette-text-primary); }
.er-pick-card__meta { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.er-pick-card__go { display: inline-flex; align-items: center; gap: 0.15rem; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 600; color: var(--mud-palette-primary); }
.er-pick-card__go .mud-icon-root { font-size: 1.05rem; }

.er-pick-add {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    font: inherit; cursor: pointer; min-height: 100%;
    background: transparent; color: var(--mud-palette-text-secondary);
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    border-radius: 20px; padding: 1.6rem 1rem;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.er-pick-add:hover { border-color: var(--mud-palette-secondary); color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent); }
.er-pick-add:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-pick-add__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); color: var(--mud-palette-primary); }
.er-pick-add__ico .mud-icon-root { font-size: 1.5rem; }
.er-pick-add__label { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
    .er-tile, .er-pick-card, .er-pick-add { transition: none; }
    .er-tile:hover, .er-pick-card:hover { transform: none; }
}

/* ===== Admin guided roadmap (e.g. "Make a lesson video" on /admin/lessons) =====
   Deliberately NO card chrome (border/background) — it sits inline inside the lesson editor accordion
   like the Narration section; a boxed look reads as a separate panel outside the lesson. */
.er-journey { width: 100%; }
.er-journey__title { font-weight: 600; font-size: .875rem; margin: 0 0 .25rem; display: flex; align-items: center; gap: .4rem; color: var(--mud-palette-text-primary); }
.er-journey__step { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; }
.er-journey__step:not(:last-of-type) { border-bottom: 1px solid var(--mud-palette-lines-default); }
.er-journey__num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: .85rem; color: #fff; background: var(--mud-palette-text-disabled); }
.er-journey__step.is-now .er-journey__num { background: var(--mud-palette-primary); }
.er-journey__step.is-done .er-journey__num { background: var(--mud-palette-success); }
.er-journey__step.is-locked { opacity: .5; }
.er-journey__body { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.er-journey__body .mud-text-secondary { font-size: .82rem; }
.er-journey__step > .mud-button-root, .er-journey__step > .mud-chip { flex: 0 0 auto; }
.er-journey__video { width: 100%; max-width: 420px; border-radius: 10px; margin-top: .4rem; background: #000; }

/* Friendly per-scene editor for the animation script (the raw JSON hides behind "View technical script"). */
.er-anim-plan { border: 1px dashed var(--mud-palette-lines-default); border-radius: 12px; padding: 10px 14px; }
.er-anim-plan__title { font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin: 0 0 .4rem; }
.er-anim-plan__scene { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; }
.er-anim-plan__scene:not(:last-of-type) { border-bottom: 1px dashed var(--mud-palette-lines-default); }
.er-anim-plan__no { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: .6rem;
    font-size: .75rem; font-weight: 700; color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.er-anim-plan__fields { flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.er-anim-plan__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.er-anim-plan__type { flex: 0 0 170px; }
.er-anim-plan__num { flex: 0 0 92px; }
.er-anim-plan__shapes { flex: 1 1 240px; }
.er-anim-plan__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0; }

/* ===== Anonymous marketing shell (the app's public landing page — logo + Sign in/CTA top nav,
   no authenticated sidebar). ===== */
.er-market-shell { min-height: 100vh; display: flex; flex-direction: column; }
.er-market-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.55rem 1.25rem; background: #fff; border-bottom: 1px solid #E2E8F0;
    position: sticky; top: 0; z-index: 10;
}
.er-market-nav__brand img { display: block; }
.er-market-nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.er-market-main { flex: 1; width: 100%; max-width: 1120px; margin-inline: auto; padding: 1.5rem 1.25rem 3rem; }
@media (max-width: 599px) { .er-market-nav__cta { display: none; } } /* phones keep just Sign in */

/* Landing hero: copy left, Robbie right (hidden on small screens). */
.er-app-hero { display: flex; align-items: center; gap: 2rem; }
.er-app-hero__text { flex: 1; min-width: 0; }
.er-app-hero__robot { flex: 0 0 auto; filter: drop-shadow(0 10px 24px rgba(2, 23, 64, 0.35)); }

/* ===== Kid results review cards (post-session): playful, unmistakable right/wrong styling ===== */
.er-review-card { border-radius: 16px !important; border-left: 5px solid transparent; }
.er-review-card.is-correct { border-left-color: #10B981; }
.er-review-card.is-wrong { border-left-color: #FB7185; }

.er-review-num {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 0.85rem; color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.er-review-state { font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: 999px; white-space: nowrap; }
.er-review-state.is-correct { color: #065F46; background: #D1FAE5; }
.er-review-state.is-wrong { color: #9A3412; background: #FFEDD5; } /* warm amber, never harsh red */

.er-review-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.25rem 0 0.5rem; }
.er-review-row {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem;
    border: 1.5px solid #E2E8F0; border-radius: 12px; background: #fff; color: #334155; font-size: 0.95rem;
}
.er-review-row.is-correct { border-color: #10B981; background: #ECFDF5; color: #065F46; font-weight: 600; }
.er-review-row.is-wrong { border-color: #FB7185; background: #FFF1F2; color: #9F1239; }
.er-review-row__icon {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 800; color: #fff;
}
.er-review-row.is-correct .er-review-row__icon { background: #10B981; }
.er-review-row.is-wrong .er-review-row__icon { background: #FB7185; }
.er-review-row__text { flex: 1; min-width: 0; overflow-wrap: break-word; }
.er-review-row__tag {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem; border-radius: 999px;
}
.er-review-row.is-correct .er-review-row__tag { color: #065F46; background: rgba(16, 185, 129, 0.16); }
.er-review-row.is-wrong .er-review-row__tag { color: #9F1239; background: rgba(244, 63, 94, 0.12); }

/* ===== Kid "My track" page: big stat tiles, per-skill cheer bars, recent plays ===== */
.er-track-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 1rem 0 1.25rem; }
.er-track-stat {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.9rem 0.5rem;
    background: #fff; border: 1.5px solid #E2E8F0; border-radius: 16px;
}
.er-track-stat__num { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.5rem; color: #1E3A8A; }
.er-track-stat__cap { font-size: 0.8rem; color: #64748B; }

.er-track-skills { display: flex; flex-direction: column; gap: 0.6rem; }
.er-track-skill {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem;
    background: #fff; border: 1.5px solid #E2E8F0; border-radius: 16px;
}
.er-track-skill__emoji { font-size: 1.6rem; flex: 0 0 auto; }
.er-track-skill__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.er-track-skill__name { font-weight: 600; color: #1E293B; }
.er-track-skill__note { font-size: 0.82rem; color: #64748B; }
.er-track-skill__go { flex: 0 0 auto; }
.er-track-bar { height: 10px; border-radius: 999px; background: #EEF2F7; overflow: hidden; }
.er-track-bar__fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.er-track-bar__fill.is-great { background: linear-gradient(90deg, #10B981, #34D399); }
.er-track-bar__fill.is-ok { background: linear-gradient(90deg, #0EA5E9, #38BDF8); }
.er-track-bar__fill.is-warm { background: linear-gradient(90deg, #F59E0B, #FBBF24); }

.er-track-sessions { display: flex; flex-direction: column; gap: 0.5rem; }
.er-track-session {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem;
    background: #fff; border: 1.5px solid #E2E8F0; border-radius: 14px;
}
.er-track-session__score {
    flex: 0 0 auto; min-width: 52px; text-align: center; font-weight: 700; font-size: 0.95rem;
    padding: 0.3rem 0.5rem; border-radius: 10px; background: #EEF2F7; color: #334155;
}
.er-track-session__score.is-great { background: #D1FAE5; color: #065F46; }
.er-track-session__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.er-track-session__title { font-weight: 600; color: #1E293B; font-size: 0.95rem; }
.er-track-session__when { font-size: 0.78rem; color: #94A3B8; }
.er-track-session__cheer { flex: 0 0 auto; font-size: 0.85rem; color: #475569; }

@media (prefers-reduced-motion: reduce) { .er-track-bar__fill { transition: none; } }

/* Track page subject filter chips (kid-sized touch targets). */
.er-track-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.25rem; }
.er-track-chip {
    min-height: 40px; padding: 0.35rem 1rem; border-radius: 999px; cursor: pointer;
    border: 1.5px solid #CBD5E1; background: #fff; color: #334155; font-weight: 600; font-size: 0.9rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.er-track-chip:hover { border-color: #0EA5E9; }
.er-track-chip.is-active { background: #1E3A8A; border-color: #1E3A8A; color: #fff; }
.er-track-chip:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .er-track-chip { transition: none; } }

/* Parent performance table: 4-segment at-a-glance dots (numbers live in the adjacent columns). */
.er-perf-dots { display: inline-flex; gap: 4px; }
.er-perf-dot { width: 18px; height: 8px; border-radius: 999px; background: #E2E8F0; }
.er-perf-dot.is-great { background: #10B981; }
.er-perf-dot.is-ok { background: #0EA5E9; }
.er-perf-dot.is-warm { background: #F59E0B; }

/* Kid track: the difficulty-ladder level badge next to each skill name. */
.er-track-tier {
    display: inline-block; margin-left: 0.4rem; padding: 0.08rem 0.5rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
}
.er-track-tier--foundation { background: #EEF2F7; color: #475569; }
.er-track-tier--standard { background: #E0F2FE; color: #075985; }
.er-track-tier--challenge { background: #E0E7FF; color: #3730A3; }
.er-track-tier--expert { background: #D1FAE5; color: #065F46; }

/* Track page: one-line "smart score" explainer under the recent-plays heading. */
.er-track-hint { font-size: 0.82rem; color: #64748B; margin: -0.25rem 0 0.6rem; }

/* Kid home nav shortcuts: a single group pushed right of the reward pills on wide screens; wraps below
   them as one tidy row on narrow screens (never one stranded button). */
.er-kid-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
@media (max-width: 899px) { .er-kid-nav { margin-left: 0; width: 100%; } }

/* ---- Benchmark: school-standards comparison (parent page) ---- */
.er-bench-school { padding: 12px 0; }
.er-bench-school + .er-bench-school { border-top: 1px solid var(--mud-palette-lines-default, #e3e8ef); }
.er-bench-school__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.er-bench-school__name { flex: 0 1 auto; }
.er-bench-school__std { margin-left: auto; font-size: 0.8rem; color: var(--mud-palette-text-secondary, #5b6b7b); white-space: nowrap; }
.er-bench-track {
    position: relative; height: 10px; border-radius: 999px;
    background: var(--mud-palette-background-gray, #eef2f7);
    margin: 4px 6px 10px 6px;
}
.er-bench-track__fill {
    position: absolute; inset: 0 auto 0 0; border-radius: 999px;
    background: linear-gradient(90deg, rgba(30, 64, 124, 0.12), rgba(30, 64, 124, 0.28));
}
.er-bench-track__std {
    position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px;
    background: var(--mud-palette-primary, #1e407c); transform: translateX(-50%);
}
.er-bench-track__child {
    position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
    background: var(--mud-palette-secondary, #f5b941); border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(16, 35, 61, 0.35);
    transform: translate(-50%, -50%);
}
.er-bench-school__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- Parent welcome wizard (/welcome): Robbie-led setup flow ---- */
.er-wiz { max-width: 680px; margin: 0 auto; }
.er-wiz__coach { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.er-wiz__coach img { flex: none; }
.er-wiz__bubble {
    background: #EBF4FF; border-radius: 16px 16px 16px 4px; padding: 12px 16px;
    margin: 0; font-size: 1rem; color: #1E3A5F;
}
.er-wiz__steps {
    display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px;
    font-size: 0.8rem; color: #64748B;
}
.er-wiz__steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-top: 3px solid #E2E8F0; }
.er-wiz__steps li.is-active { border-top-color: #1E407C; color: #1E407C; font-weight: 600; }
.er-wiz__steps li.is-done { border-top-color: #34D399; color: #047857; }
.er-wiz__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: #E2E8F0; font-size: 0.7rem; font-weight: 700;
}
.er-wiz__steps li.is-active .er-wiz__dot { background: #1E407C; color: #fff; }
.er-wiz__steps li.is-done .er-wiz__dot { background: #34D399; color: #fff; }
.er-wiz__card {
    background: #fff; border-radius: 20px; padding: 28px;
    box-shadow: 0 6px 24px rgba(16, 35, 61, 0.08);
}
.er-wiz__title { margin: 0 0 16px; font-size: 1.45rem; color: #10233D; }
.er-wiz__sub { color: #5B6B7B; margin: 0 0 16px; }
.er-wiz__label { font-weight: 600; margin: 0 0 8px; color: #10233D; }
.er-wiz__hint { font-size: 0.85rem; color: #64748B; margin: 6px 0 0; }
.er-wiz__smart {
    background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px;
    padding: 10px 14px; font-size: 0.92rem; color: #713F12; margin: 0 0 14px;
}
.er-wiz__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.er-wiz__chip {
    border: 1.5px solid #CBD5E1; background: #fff; border-radius: 999px;
    padding: 9px 16px; font-size: 0.95rem; cursor: pointer; color: #334155;
    transition: border-color .15s, background .15s, transform .1s;
}
.er-wiz__chip:hover { border-color: #1E407C; transform: translateY(-1px); }
.er-wiz__chip:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
.er-wiz__chip.is-on { background: #1E407C; border-color: #1E407C; color: #fff; font-weight: 600; }
.er-wiz__picked { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.er-wiz__schools { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.er-wiz__school {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    border: 1.5px solid #E2E8F0; background: #fff; border-radius: 12px;
    padding: 11px 14px; cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.er-wiz__school:hover { border-color: #1E407C; }
.er-wiz__school:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 1px; }
.er-wiz__school.is-on { border-color: #1E407C; background: #EBF4FF; }
.er-wiz__school-name { font-weight: 600; color: #10233D; }
.er-wiz__school-loc { font-size: 0.83rem; color: #64748B; white-space: nowrap; }
.er-wiz__setup { list-style: none; padding: 0; margin: 0 0 18px; }
.er-wiz__setup li { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: #64748B; }
.er-wiz__setup li.is-done { color: #047857; }
.er-wiz__setup li span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: #E2E8F0; font-weight: 700; font-size: 0.8rem;
}
.er-wiz__setup li.is-done span { background: #34D399; color: #fff; }
.er-wiz__format {
    background: #EBF4FF; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
    font-size: 0.95rem; color: #1E3A5F;
}
.er-wiz__cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.er-wiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
@media (max-width: 600px) {
    .er-wiz__card { padding: 20px 16px; }
    .er-wiz__steps li { font-size: 0; gap: 0; justify-content: center; } /* dots only on narrow screens */
    .er-wiz__steps li .er-wiz__dot { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .er-wiz__chip, .er-wiz__school { transition: none; }
    .er-wiz__chip:hover { transform: none; }
}

/* ---- Kid homework missions ---- */
.er-hw-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-top: 1px solid #EEF2F7;
}
.er-hw-item__tick {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 26px; height: 26px; border-radius: 50%; background: #E2E8F0; font-weight: 700;
}
.er-hw-item.is-done .er-hw-item__tick { background: #34D399; color: #fff; }
.er-hw-item__name { flex: 1; font-weight: 600; color: #10233D; }
.er-hw-item.is-done .er-hw-item__name { color: #64748B; text-decoration: line-through; text-decoration-thickness: 1px; }
.er-hw-item__name em { font-style: normal; font-weight: 400; color: #64748B; font-size: 0.85rem; }

/* Per-question time shown in the answer review */
.er-review-time { font-size: 0.8rem; color: #64748B; white-space: nowrap; margin-right: 8px; }

/* ---- Pre-login gateway ("/" on the app host): slim welcome, auth CTAs, marketing-site pointer ---- */
.er-gate {
    max-width: 560px; margin: 8vh auto 0; text-align: center;
    background: #fff; border-radius: 20px; padding: 40px 32px;
    box-shadow: 0 6px 24px rgba(16, 35, 61, 0.08);
}
.er-gate__robot { margin-bottom: 8px; }
.er-gate__title { margin: 0 0 10px; font-size: 1.9rem; color: #10233D; }
.er-gate__sub { color: #5B6B7B; font-size: 1.05rem; margin: 0 auto 24px; max-width: 42ch; }
.er-gate__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.er-gate__note { color: #047857; font-weight: 600; font-size: 0.9rem; margin: 12px 0 20px; }
.er-gate__more { color: #64748B; font-size: 0.9rem; margin: 0; }
.er-gate__more a { color: #1E407C; font-weight: 600; }
@media (max-width: 600px) { .er-gate { margin-top: 4vh; padding: 28px 18px; } }

/* ---- Register: account-type choice (Parent vs Tutor/centre) ---- */
.er-acct-type { border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; }
.er-acct-type legend { font-size: 0.85rem; font-weight: 600; color: #475569; padding: 0 6px; }
.er-acct-type__opt { display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px; cursor: pointer; }
.er-acct-type__opt input { margin-top: 3px; }

/* ---- Kid dashboard: "This week's plan" (exam-countdown mix of new + revision) ---- */
.er-week { background: #fff; border: 2px solid #BAE6FD; border-radius: 20px; padding: 16px 18px; margin: 14px 0; }
.er-week__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.er-week__title { margin: 0; font-size: 1.3rem; }
.er-week__count { background: linear-gradient(90deg, #1E3A8A, #0EA5E9); color: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.er-week__phase { margin: .25rem 0 .8rem; color: var(--mud-palette-text-secondary); font-size: .92rem; }
/* "Getting ready for [School]" banner — ties the shorter (target-school-aligned) subject list to the goal. */
.er-targetbanner { display: flex; align-items: center; gap: 10px; margin: 0 0 .9rem; padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, #EEF2FF, #E0F2FE); border: 1px solid rgba(59, 130, 246, .28); }
.er-targetbanner__ico { font-size: 1.35rem; flex: 0 0 auto; }
.er-targetbanner__text { font-size: .95rem; font-weight: 600; color: #1E3A8A; line-height: 1.3; }
.er-week__items { display: flex; flex-direction: column; gap: 10px; }
.er-week-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: #F8FAFC; border-radius: 16px; padding: 10px 14px; border-left: 6px solid #94A3B8; transition: transform .12s ease, box-shadow .12s ease; }
.er-week-item:hover, .er-week-item:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(2, 32, 71, .10); }
.er-week-item--new { border-left-color: #0EA5E9; }
.er-week-item--revise { border-left-color: #F59E0B; }
.er-week-item--assess { border-left-color: #8B5CF6; }
.er-week-item--timed { border-left-color: #EF4444; }
.er-week-item.is-done { opacity: .62; }
.er-week-item__emoji { font-size: 1.6rem; flex-shrink: 0; }
.er-week-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.er-week-item__top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.er-week-item__tag { font-size: .68rem; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 1px 7px; background: #E0F2FE; color: #075985; }
.er-week-item--revise .er-week-item__tag { background: #FEF3C7; color: #92400E; }
.er-week-item--assess .er-week-item__tag { background: #EDE9FE; color: #5B21B6; }
.er-week-item--timed .er-week-item__tag { background: #FEE2E2; color: #991B1B; }
.er-week-item__subject { font-size: .72rem; color: var(--mud-palette-text-secondary); font-weight: 600; }
.er-week-item__title { font-weight: 700; }
.er-week-item__sub { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.er-week-item__go { margin-left: auto; font-weight: 800; font-size: 1.15rem; color: #0EA5E9; flex-shrink: 0; }
.er-week-item.is-done .er-week-item__go { color: #16A34A; }
@media (prefers-reduced-motion: reduce) {
    .er-week-item { transition: none; }
    .er-week-item:hover, .er-week-item:focus-visible { transform: none; }
}

/* ---- Kid dashboard: merged subject cards (Atom-style) — progress + this week's items per subject ---- */
/* One subject per row: the full-width bar reads better and an open accordion never jolts a neighbour column. */
.er-subweek-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* Each subject is a <details> accordion: a big colourful summary bar kids tap to reveal the week's skills. */
.er-subweek { border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; background: #fff; display: flex; flex-direction: column; align-self: start; }
.er-subweek__head { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; padding: 12px 14px; color: #fff; font: inherit; font-weight: 800; text-align: left; list-style: none; user-select: none; }
.er-subweek__head::-webkit-details-marker { display: none; }
.er-subweek__head::marker { content: ""; }
.er-subweek--maths .er-subweek__head { background: #3B82F6; }
.er-subweek--english .er-subweek__head { background: #EC4899; }
.er-subweek--vr .er-subweek__head { background: #10B981; }
.er-subweek--nvr .er-subweek__head { background: #F59E0B; }
.er-subweek--default .er-subweek__head { background: #64748B; }
.er-subweek__head:hover, .er-subweek__head:focus-visible { filter: brightness(1.06); }
.er-subweek__name { display: flex; align-items: center; gap: 6px; font-size: 1rem; }
.er-subweek__progress { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.er-subweek__bar { width: 84px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: hidden; display: inline-block; }
.er-subweek__bar-fill { display: block; height: 100%; border-radius: 999px; background: #fff; }
.er-subweek__count { font-size: .8rem; font-weight: 700; }
.er-subweek__chev { font-weight: 900; font-size: 1.05rem; transition: transform 0.2s ease; }
.er-subweek[open] > .er-subweek__head .er-subweek__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .er-subweek__chev { transition: none; } }
.er-subweek__items { display: flex; flex-direction: column; padding: 8px; gap: 6px; }
.er-subweek-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: #F8FAFC; border-radius: 10px; padding: 8px 10px; text-decoration: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.er-subweek-item:hover, .er-subweek-item:focus-visible { background: #F1F5F9; }
.er-subweek-item.is-done { opacity: .6; }
.er-subweek-item__tag { font-size: .64rem; font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }
.er-subweek-item__tag--new { background: #E0F2FE; color: #075985; }
.er-subweek-item__tag--revise { background: #FEF3C7; color: #92400E; }
.er-subweek-item__tag--assess { background: #EDE9FE; color: #5B21B6; }
.er-subweek-item__tag--timed { background: #FEE2E2; color: #991B1B; }
.er-subweek-item__title { font-weight: 600; font-size: .88rem; min-width: 0; }
.er-subweek-item__go { margin-left: auto; font-weight: 800; color: #0EA5E9; flex-shrink: 0; }
.er-subweek-item.is-done .er-subweek-item__go { color: #16A34A; }
.er-subweek-item--empty .er-subweek-item__title { color: var(--mud-palette-text-secondary); font-weight: 500; }
.er-subweek-item--more { width: 100%; }
.er-subweek-item--more .er-subweek-item__title { color: var(--mud-palette-text-secondary); font-weight: 700; }
.er-subweek-specials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.er-subweek-special { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .85rem; }
.er-subweek-special:hover { background: #F1F5F9; }

/* ============================================================================
   Brand chrome layer (2026-08-14) — the global surfaces every page shares.
   Everything above styles individual features; nothing styled the CHROME, so
   the app bar, drawer, dialogs and tables rendered as stock MudBlazor — the
   single biggest "component library, not a product" signal. All colours run
   through the palette vars so dark mode adapts for free.
   ============================================================================ */

/* ---- App bar: depth instead of a flat block ---- */
.mud-appbar.mud-elevation-1 {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-appbar-background) 94%, #fff),
        var(--mud-palette-appbar-background) 45%,
        color-mix(in srgb, var(--mud-palette-appbar-background) 88%, #000));
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.09), 0 2px 12px -6px rgba(13, 27, 62, 0.55);
}

/* ---- Drawer: flat panel with a hairline, not a floating shadow slab ---- */
.mud-drawer {
    box-shadow: none;
    border-right: 1px solid var(--mud-palette-lines-default);
}
/* The mobile overlay variant keeps a shadow — it floats above a scrim by design. */
.mud-drawer--temporary { box-shadow: 0 12px 40px rgba(13, 27, 62, 0.3); }

/* ---- Drawer nav: soft pill links with a real active state ---- */
.mud-drawer .mud-navmenu { padding: 0.75rem 0.6rem; }
.mud-drawer .mud-navmenu .mud-nav-item { margin: 1px 0; }
.mud-drawer .mud-navmenu .mud-nav-link {
    border-radius: 10px;
    min-height: 40px;
    font-weight: 500;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.mud-drawer .mud-navmenu .mud-nav-link:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}
.mud-drawer .mud-navmenu .mud-nav-link.active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-icon-root { color: var(--mud-palette-primary); }
.mud-drawer .mud-navmenu .mud-nav-link:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: -3px;
}
/* Group headers read as quiet section labels, not more links. */
.mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    min-height: 36px;
}
.mud-drawer .mud-navmenu .mud-nav-group > .mud-nav-link .mud-icon-root { font-size: 1.1rem; }

/* ---- Dialogs & snackbars: softer geometry than the 10px control radius ---- */
.mud-dialog { border-radius: 18px; }
.mud-dialog .mud-dialog-title { font-weight: 600; letter-spacing: -0.01em; }
.mud-snackbar { border-radius: 12px; }

/* ---- Primary buttons: one shadow language app-wide (matches .er-btn-pill) ---- */
.mud-button-filled-primary {
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
    transition: box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.mud-button-filled-primary:hover {
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
}
.mud-button-root:focus-visible {
    outline: 3px solid var(--mud-palette-secondary);
    outline-offset: 2px;
}

/* ---- Tables (admin surfaces): quiet uppercase headers, calmer row lines ---- */
.mud-table-head .mud-table-cell {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

/* ---- Page backdrop: a barely-there tint so surfaces sit ON something ---- */
.mud-main-content {
    min-height: 100vh;
    background:
        radial-gradient(1000px 460px at 88% -12%,
            color-mix(in srgb, var(--mud-palette-secondary) 5%, transparent), transparent 62%),
        var(--mud-palette-background);
}

/* ---- App footer: recede until hovered ---- */
.mud-main-content footer { opacity: 0.75; transition: opacity 0.15s ease; }
.mud-main-content footer:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .mud-drawer .mud-navmenu .mud-nav-link,
    .mud-button-filled-primary,
    .mud-main-content footer { transition: none; }
}