/* 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;
}

/* Kid explore tile. NOT .er-kid-card — the parent dashboard's child card uses that name and is
   defined later in this file, so sharing it gave these tiles the parent card's padding and border
   on top of their own. */
.er-kid-tilecard {
    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-tilecard: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-tilecard--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-tilecard__title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #1E3A8A;
    text-align: center;
}

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

.er-kid-tilecard__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; }
/* Strand themes for the filtered Wider Curriculum maps */
.er-journey-theme--science { background: linear-gradient(180deg, rgba(14, 165, 233, 0.14), transparent 240px); }
.er-journey-theme--history { background: linear-gradient(180deg, rgba(139, 92, 246, 0.13), transparent 240px); }
.er-journey-theme--geography { background: linear-gradient(180deg, rgba(20, 184, 166, 0.13), transparent 240px); }
.er-journey-theme--science .er-journey-head { background: radial-gradient(circle at 50% 38%, #E0F2FE, #BAE6FD); }
.er-journey-theme--history .er-journey-head { background: radial-gradient(circle at 50% 38%, #EDE9FE, #DDD6FE); }
.er-journey-theme--geography .er-journey-head { background: radial-gradient(circle at 50% 38%, #CCFBF1, #99F6E4); }
.er-journey-theme--science .er-journey__topic { color: #0284C7; }
.er-journey-theme--history .er-journey__topic { color: #7C3AED; }
.er-journey-theme--geography .er-journey__topic { color: #0D9488; }
.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;
    /* Big enough to actually see (440px read as a thumbnail); tap-to-zoom still covers fine detail — but never
       taller than the screen can show WITH the Next button: a square/portrait illustration at 680px wide was
       ~700px tall and pushed the step nav below the fold on a laptop (founder screenshot, 2026-09-09). Width
       follows from the height cap, so the picture fits the device's aspect instead of dictating it. */
    width: auto;
    max-width: min(100%, 680px);
    height: auto;
    max-height: 620px;
    max-height: min(56svh, 620px);
    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 */
    /* Lesson videos are rendered 16:9; pin the box to that ratio and letterbox any odd-sized upload so the
       player never overflows its card or stretches the picture. */
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 70vh;
    max-height: min(58svh, 70vh); /* leave room for the caption + Next button on short screens */
    object-fit: contain;
    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-lesson-step__graphic--text { background: #E0F2FE; }

/* Kid-readable lesson body (LessonBodyFormatter): short lines, lit-up key words, ticked steps, boxed examples. */
.er-lesson-step__body .er-lesson-line {
    margin: 0 0 0.6rem;
}

.er-lesson-step__body .er-lesson-line:last-child {
    margin-bottom: 0;
}

.er-lesson-mark {
    background: #FDE68A;
    color: #1E293B;
    font-weight: 800;
    padding: 0 0.3em;
    border-radius: 0.45em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.er-lesson-list {
    list-style: none;
    padding: 0;
    margin: 0.35rem auto 0.7rem;
    text-align: left;
    display: table; /* shrink-wrap so the ticked list sits centred under centred text */
}

.er-lesson-list li {
    position: relative;
    padding-left: 1.8em;
    margin: 0.35rem 0;
}

.er-lesson-list li::before {
    content: "\2714";
    position: absolute;
    left: 0.15em;
    top: 0;
    color: #10B981;
    font-weight: 800;
}

.er-lesson-callout {
    text-align: left;
    border: 2px solid;
    border-radius: 16px;
    padding: 0.7rem 1rem;
    margin: 0.7rem auto;
    max-width: 38rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

.er-lesson-callout__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.er-lesson-callout--example { background: #EFF6FF; border-color: #7DD3FC; }
.er-lesson-callout--example .er-lesson-callout__label { color: #0284C7; }
.er-lesson-callout--try { background: #ECFDF5; border-color: #6EE7B7; }
.er-lesson-callout--try .er-lesson-callout__label { color: #047857; }
.er-lesson-callout--tip { background: #FFFBEB; border-color: #FCD34D; }
.er-lesson-callout--tip .er-lesson-callout__label { color: #B45309; }
.er-lesson-callout--question { background: #F5F3FF; border-color: #C4B5FD; }
.er-lesson-callout--question .er-lesson-callout__label { color: #6D28D9; }
.er-lesson-callout--answer { background: #ECFDF5; border-color: #6EE7B7; }
.er-lesson-callout--answer .er-lesson-callout__label { color: #047857; }
.er-lesson-callout--watch { background: #FFF1F2; border-color: #FDA4AF; }
.er-lesson-callout--watch .er-lesson-callout__label { color: #BE123C; }

.er-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    /* Always reachable: the nav sticks to the bottom of the viewport while a tall step scrolls, so a child never
       has to hunt below a big picture for Next. Sits just above the Child Mode tab bar when there is one. */
    position: sticky;
    bottom: 0.5rem;
    z-index: 2;
    padding: 0.5rem 0.25rem;
    background: linear-gradient(to top, #FFFFFF 78%, rgba(255, 255, 255, 0));
    border-radius: 12px;
}

.er-has-tabbar .er-step-nav { bottom: calc(96px + 0.5rem); }

/* Short / landscape screens (phones sideways, small laptops): shrink media further so the whole step fits. */
@media (max-height: 720px) {
    .er-lesson-step__image { max-height: 46svh; }
    .er-lesson-step__video { max-height: 50svh; }
}

.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)); }
/* Hat rests ON the head (was -34px, which floated it well above the buddy). */
.er-buddy-layer--hat { top: -14px; 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;
    line-height: 1.65;
}
/* Article typography inside the editor — mirrors the marketing site's .er-legal styling so the admin
   previews roughly what parents will see. Quill's reset otherwise collapses every margin (the "wall of
   text" complaint). Scoped to the editor + read-only view, never the app at large. */
.er-rte__editor .ql-editor p,
.er-rte__editor .ql-editor ul,
.er-rte__editor .ql-editor ol { margin: 0 0 0.9rem; }
.er-rte__editor .ql-editor h3 { font-size: 1.3rem; font-weight: 700; margin: 1.6rem 0 0.5rem; }
.er-rte__editor .ql-editor h4 { font-size: 1.05rem; font-weight: 700; margin: 1.1rem 0 0.4rem; }
.er-rte__editor .ql-editor li { margin-bottom: 0.35rem; }
.er-rte__editor .ql-editor blockquote {
    margin: 1rem 0;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--mud-palette-info);
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}
.er-rte__editor .ql-editor table { border-collapse: collapse; margin: 0 0 1rem; }
.er-rte__editor .ql-editor :is(th, td) {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 10px;
    text-align: left;
}
.er-rte__editor .ql-editor th { background: var(--mud-palette-background-grey); font-weight: 600; }
/* 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; }

/* Passage BESIDE the question. Stacked, a child scrolled up to read and back down to answer on every
   question sharing one passage — the single worst scrolling problem in the runner. */
.er-run__cols { display: block; }
.er-run--split { max-width: 1180px; }
@media (min-width: 900px) {
    .er-run--split .er-run__cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.1rem;
        align-items: start;
    }
    /* The passage stays put while the child works through the questions on it. */
    .er-run--split .er-passage { position: sticky; top: 0.75rem; margin-bottom: 0; }
}

/* ---- "Page from a book" treatment for the passage ---- */
.er-passage--book {
    background: transparent;
    border: 0;
    padding: 0;
}
.er-passage--book .er-passage__summary { padding-left: 0.2rem; }
/* The page itself: warm stock, a darker gutter down the left as if bound, and a stack of page edges on the
   right. Drawn with gradients rather than an image so it stays crisp and costs nothing to load. */
.er-passage__page {
    position: relative;
    border-radius: 6px 10px 10px 6px;
    background:
        linear-gradient(90deg, rgba(180, 150, 100, 0.16) 0, rgba(180, 150, 100, 0.04) 14px, transparent 30px),
        linear-gradient(270deg, rgba(120, 90, 50, 0.10) 0, transparent 10px),
        #FDFAF1;
    box-shadow:
        0 1px 2px rgba(80, 60, 30, 0.12),
        0 14px 28px -18px rgba(80, 60, 30, 0.45),
        /* the page edges stacked beneath */
        2px 2px 0 -1px #F6F1E4,
        4px 4px 0 -2px #EFE8D6;
    padding: 0.9rem 1.1rem 1rem 1.5rem;
}
.er-passage--book .er-passage__body {
    background: transparent;
    padding: 0;
    max-height: none;         /* the column scrolls, not a box inside it */
    border-radius: 0;
}
@media (min-width: 900px) {
    /* Keep the page within the viewport so it never pushes the answers off-screen. */
    .er-run--split .er-passage__body { max-height: calc(100dvh - 260px); overflow-y: auto; }
}
@media (prefers-reduced-motion: no-preference) {
    .er-passage__page { transition: box-shadow 0.2s ease; }
}

/* ---- Short answers (numbers, single words) as chips, not full-width rows ---- */
.er-answers.er-answers--compact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.er-answers.er-answers--compact .er-answer {
    flex: 0 1 auto;
    width: auto;            /* .er-answer is width:100% for the stacked list */
    min-width: 5.5rem;
    justify-content: center;
    padding: 0.55rem 0.9rem;
}
.er-answers.er-answers--compact .er-answer__text { flex: 0 0 auto; }

/* ===== 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 250px 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), 250px);
    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); }
/* Type-to-complete (CEM Select style) — the answer box with ghost completion; the option list stays for the reveal. */
.er-typed { margin: 0.5rem 0 1rem; }
.er-typed__label { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.er-typed__field { position: relative; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.er-typed__input { flex: 1 1 260px; min-height: 56px; font: inherit; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.6rem 1rem; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); background: transparent; color: var(--mud-palette-text-primary); position: relative; z-index: 1; }
.er-typed__input:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-typed__ghost { position: absolute; left: 0; top: 0; height: 56px; display: flex; align-items: center; padding: 0.6rem 1rem; font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--mud-palette-text-primary) 35%, transparent); pointer-events: none; white-space: nowrap; z-index: 0; }
.er-typed__accept { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 0.6rem 1rem; border-radius: 999px; background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); min-height: 48px; }
.er-typed__hint { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--mud-palette-text-secondary); }
.er-answers--hidden { display: none !important; }

.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. */
/* Height of the fixed kid tab bar (Home / Lessons / Shop), so anything pinned above it clears it. */
:root { --er-tabbar-h: calc(58px + 0.7rem + env(safe-area-inset-bottom, 0px)); }

/* The action row STICKS just above the tab bar. Previously it sat at the end of a tall question card, so
   on a laptop a child had to scroll past the options to reach Submit on every single question — and the
   confidence chips sat in that same off-screen strip, which is why they were so often skipped. Sticky
   (not fixed) keeps it in normal flow, so it never overlaps the results view or a short page. */
.er-q-actions {
    position: sticky;
    bottom: var(--er-tabbar-h);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 0.7rem 0 calc(0.7rem + 0.25rem);
    background: linear-gradient(to top,
        var(--mud-palette-background, #F7F8FC) 72%,
        color-mix(in srgb, var(--mud-palette-background, #F7F8FC) 0%, transparent));
}
.er-q-next { min-width: 11rem; border-radius: 12px; }
/* Quit is the quiet escape hatch: pinned to the far left, pushing everything else to the right — at every
   width. When the row is too narrow for all three, it wraps with Quit alone on the first line and the
   Learn-again + primary buttons on the next; the auto margin keeps Quit hard-left either way. */
.er-q-actions { flex-wrap: wrap; }
.er-q-quit { margin-right: auto; }
/* The re-teach button in the action row: same gold treatment as before but sized to sit inline next to
   Next rather than spanning the card. */
.er-relearn-btn--inline { width: auto; margin-top: 0; padding: 0.6rem 1rem; font-size: 0.98rem; border-radius: 12px; }

/* A timed mock hides the confidence chips (see PracticeRunner), which frees roughly 70px — hand it to the
   figure rather than leaving a gap, so exam questions fit on one screen more often than practice ones. */
.er-run--exam .er-q-card__image { max-height: clamp(140px, calc(100dvh - 550px), 270px); }

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

/* ===== "Something wrong with this question?" report flag (kid practice) =====
   Quiet by design: a muted ghost link that never competes with the learning; the open panel uses big
   tappable choices (44px+ targets), warm copy, and a clear picked state that isn't colour-only. */
.er-report { margin-top: 1rem; }

.er-report__flag {
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    color: #94A3B8;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 8px;
}

.er-report__flag:hover, .er-report__flag:focus-visible { color: #475569; background: #F1F5F9; }

.er-report__panel {
    margin-top: 0.4rem;
    padding: 1rem;
    border: 2px solid #BAE6FD;
    border-radius: 14px;
    background: #F0F9FF;
}

.er-report__title { margin: 0 0 0.6rem; font-weight: 600; color: #0F172A; font-size: 1rem; }

.er-report__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.er-report__choice {
    padding: 0.65rem 0.9rem;
    min-height: 44px;
    border: 2px solid #CBD5E1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0F172A;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.er-report__choice.is-picked {
    border-color: #0EA5E9;
    background: #E0F2FE;
    font-weight: 600;
}

.er-report__choice.is-picked::after { content: " ✓"; }

.er-report__details {
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 2px solid #CBD5E1;
    border-radius: 10px;
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.er-report__error { margin: 0.5rem 0 0; color: #B45309; font-size: 0.9rem; }

.er-report__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.7rem; }

.er-report__cancel {
    background: none;
    border: none;
    padding: 0.6rem 0.9rem;
    color: #64748B;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 10px;
}

.er-report__send {
    padding: 0.6rem 1.2rem;
    min-height: 44px;
    border: none;
    border-radius: 999px;
    background: #1E3A8A;
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.er-report__send:disabled { opacity: 0.45; cursor: default; }

.er-report__thanks {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: #ECFDF5;
    border: 2px solid #A7F3D0;
    color: #065F46;
    font-size: 0.95rem;
}

.er-report__thanks-emoji { font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) {
    .er-report__choice { 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%; }

/* Lay the sheet out as a fixed column so a tall lesson never hides text behind the buttons: the step
   counter + progress dots stay pinned at the top, the lesson CARD is the only thing that scrolls, and
   Back/Next stay pinned at the bottom. Before this, on a short laptop screen the lower lines were clipped
   and the nav crowded over the tip. */
.er-relearn__sheet { display: flex; flex-direction: column; overflow: hidden; }
.er-relearn__sheet > .er-lesson-step {
    flex: 1 1 auto;
    min-height: 0;          /* let it shrink below its 260px floor so the inner scroll engages */
    overflow-y: auto;
    justify-content: flex-start; /* tall content starts at the top and scrolls, never centre-clipped */
}

@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) {
    /* Renamed with the block itself — pointing this at the old .er-kid-card left kid tiles animating. */
    .er-kid-tilecard { transition: none; }
    .er-kid-tilecard: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; }

/* ---- Past papers: upload drop zone, review, outcome, paper-vs-practice chart, scores over time ---- */
.er-drop { position: relative; border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, transparent); border-radius: 16px; padding: 1.4rem 1rem; text-align: center; background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent); transition: border-color .15s ease, background .15s ease; }
.er-drop.is-dragging { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.er-drop__icon { font-size: 2.2rem; color: var(--mud-palette-primary); }
.er-drop__title { font-weight: 600; margin-top: .3rem; }
.er-drop__hint { font-size: .84rem; color: var(--mud-palette-text-secondary); margin-top: .25rem; }
.er-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; }
.er-drop__list { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); border-radius: 12px; margin-top: .5rem; }
.er-drop__name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; }
.er-drop__size { font-size: .8rem; white-space: nowrap; }
.er-review { border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent); border-left: 5px solid var(--mud-palette-warning); border-radius: 14px; }
.er-outcome { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.er-outcome__score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; border: 6px solid var(--mud-palette-primary); }
.er-outcome__score--strong { border-color: #16A34A; } .er-outcome__score--ok { border-color: #F59E0B; } .er-outcome__score--low { border-color: #DC2626; } .er-outcome__score--none { border-color: #CBD5E1; }
.er-outcome__num { font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.er-outcome__lbl { font-size: .72rem; color: var(--mud-palette-text-secondary); margin-top: .2rem; }
.er-outcome__facts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .92rem; color: var(--mud-palette-text-secondary); }
.er-callout { display: flex; gap: .55rem; align-items: flex-start; border-radius: 12px; padding: .7rem .9rem; font-size: .9rem; line-height: 1.5; }
.er-callout--focus { background: #FFFBEB; border: 1px solid #FCD34D; color: #78350F; }
.er-callout--plan { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A; }
.er-strengths { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.er-strength-chip { display: inline-flex; align-items: center; gap: .3rem; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; border-radius: 999px; padding: .25rem .7rem; font-size: .84rem; } /* renamed 2026-09-27: it was overriding the password meter's .er-strength */
.er-cmp__legend { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--mud-palette-text-secondary); margin-bottom: .6rem; }
.er-cmp__key { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.er-cmp__key--paper { background: #1E3A8A; } .er-cmp__key--app { background: #7DD3FC; }
.er-cmp__key--app ~ .er-cmp__key { margin-left: .6rem; }
.er-cmp { display: flex; flex-direction: column; gap: .9rem; }
.er-cmp__row { border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); padding-top: .7rem; }
.er-cmp__head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.er-cmp__skill { font-weight: 600; font-size: .95rem; }
.er-cmp__verdict { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem; background: #F1F5F9; color: #334155; }
.er-cmp__verdict--knowledgegap { background: #FEE2E2; color: #991B1B; }
.er-cmp__verdict--lostfocus { background: #FEF3C7; color: #92400E; }
.er-cmp__verdict--improving { background: #DBEAFE; color: #1E40AF; }
.er-cmp__verdict--secure { background: #DCFCE7; color: #166534; }
.er-cmp__verdict--untested { background: #EDE9FE; color: #5B21B6; }
.er-cmp__bars { display: flex; flex-direction: column; gap: .3rem; }
.er-cmp__bar { position: relative; height: 22px; background: #F1F5F9; border-radius: 6px; overflow: hidden; }
.er-cmp__fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.er-cmp__fill--paper { background: #1E3A8A; } .er-cmp__fill--app { background: #7DD3FC; }
.er-cmp__val { position: relative; z-index: 1; font-size: .74rem; font-weight: 600; line-height: 22px; padding-left: .5rem; color: #0F172A; mix-blend-mode: normal; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.er-cmp__actions { margin-top: .2rem; }
.er-qtable .mud-table-cell { font-size: .86rem; }
.er-scores__chart { display: flex; align-items: flex-end; gap: .6rem; height: 150px; padding: .5rem 0 0; overflow-x: auto; }
.er-scores__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 46px; text-decoration: none; color: inherit; }
.er-scores__bar { position: relative; width: 34px; border-radius: 8px 8px 3px 3px; display: flex; align-items: flex-start; justify-content: center; }
.er-scores__bar--strong { background: #16A34A; } .er-scores__bar--ok { background: #F59E0B; } .er-scores__bar--low { background: #DC2626; }
.er-scores__pct { font-size: .68rem; font-weight: 700; color: #0F172A; transform: translateY(-1.1rem); }
.er-scores__lbl { font-size: .7rem; color: var(--mud-palette-text-secondary); margin-top: .3rem; white-space: nowrap; }
@media (max-width: 600px) { .er-outcome__score { width: 96px; height: 96px; } .er-drop__name { max-width: 40vw; } }

/* ---- Parent lessons library (/lessons) ------------------------------------------------------------- */
.er-lib__head { margin-bottom: 1.1rem; }
.er-lib__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.er-lib__stat { font-size: 0.84rem; color: var(--mud-palette-text-secondary); background: var(--mud-palette-surface); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-radius: 999px; padding: 0.3rem 0.75rem; }
.er-lib__stat strong { color: var(--mud-palette-text-primary); font-weight: 700; }
.er-lib__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 0.5rem; }
.er-lib__search { flex: 1 1 320px; max-width: 480px; }
.er-lib__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.er-lib__tab {
    --subj: var(--mud-palette-primary);
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); border-radius: 999px; padding: 0.38rem 0.8rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.er-lib__tab span { font-size: 0.74rem; font-weight: 600; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--subj) 10%, transparent); border-radius: 999px; padding: 0.05rem 0.45rem; }
.er-lib__tab:hover { border-color: color-mix(in srgb, var(--subj) 50%, transparent); }
.er-lib__tab.is-on { background: color-mix(in srgb, var(--subj) 12%, transparent); border-color: color-mix(in srgb, var(--subj) 55%, transparent); color: color-mix(in srgb, var(--subj) 75%, var(--mud-palette-text-primary)); }
.er-lib__tab:focus-visible { outline: 2px solid var(--subj); outline-offset: 2px; }
.er-lib__tab--maths, .er-lib__subject--maths { --subj: #3B82F6; }
.er-lib__tab--english, .er-lib__subject--english { --subj: #EC4899; }
.er-lib__tab--vr, .er-lib__subject--vr { --subj: #10B981; }
.er-lib__tab--nvr, .er-lib__subject--nvr { --subj: #F59E0B; }
.er-lib__tab--wider, .er-lib__subject--wider { --subj: #0EA5E9; }
.er-lib__tab--default, .er-lib__subject--default { --subj: #64748B; }
.er-lib__subject { --subj: var(--mud-palette-primary); margin-top: 1.75rem; }
.er-lib__subject-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.er-lib__subject-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--subj); box-shadow: 0 0 0 4px color-mix(in srgb, var(--subj) 18%, transparent); }
.er-lib__subject-head h2 { margin: 0; font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.2rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-lib__subject-count { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-lib__topic { margin: 1rem 0 0.55rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--subj) 70%, var(--mud-palette-text-secondary)); }
.er-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.9rem; }
.er-lesson-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-left: 4px solid var(--subj);
    border-radius: 16px; padding: 1rem 1.05rem 0.7rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -24px rgba(30, 58, 138, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.er-lesson-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 40px -26px rgba(30, 58, 138, 0.5); }
.er-lesson-card__body { flex: 1 1 auto; }
.er-lesson-card__skill { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 0.2rem; }
.er-lesson-card__title { margin: 0 0 0.45rem; font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--mud-palette-text-primary); }
.er-lesson-card__excerpt { font-size: 0.88rem; line-height: 1.5; color: var(--mud-palette-text-secondary); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.er-lesson-card__excerpt .er-lesson-line { margin: 0 0 0.25rem; }
.er-lesson-card__excerpt .er-lesson-list { margin: 0.2rem 0; }
.er-lesson-card__excerpt .er-lesson-callout { margin: 0.35rem 0 0; font-size: 0.84rem; }
.er-lesson-card__excerpt .er-lesson-mark { background: color-mix(in srgb, var(--subj) 14%, transparent); color: var(--mud-palette-text-primary); font-weight: 600; padding: 0 0.15em; border-radius: 4px; } /* calmer than the kid-area yellow */
.er-lesson-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.er-lesson-card__chip { font-size: 0.74rem; font-weight: 600; color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--subj) 9%, transparent); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.er-lesson-card__preview { margin-right: -6px; }
.er-lib-dialog__title { display: flex; flex-direction: column; gap: 0.1rem; }
.er-lib-dialog__eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-lib-dialog__stage { background: var(--mud-palette-background-grey); border-radius: 16px; padding: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .er-lesson-card, .er-lesson-card:hover { transform: none; transition: none; } }

/* ---- Dashboard feature showcase (under the child cards) ------------------------------------------- */
.er-dash-feats { margin-top: 2.25rem; }
.er-dash-feats__head { margin-bottom: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.er-dash-feats__titles { min-width: 0; }
/* Child switcher: a pill group, one per child, so the tiles are unmistakably about ONE child. */
.er-dash-feats__who { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem; border-radius: 999px; background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.er-dash-feats__who-label { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 0 0.35rem 0 0.6rem; }
.er-who { display: inline-flex; align-items: center; gap: 0.45rem; border: 0; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--mud-palette-text-primary); background: transparent; border-radius: 999px; padding: 0.3rem 0.8rem 0.3rem 0.35rem; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.er-who:hover { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.er-who:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-who--on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); box-shadow: 0 6px 14px -8px rgba(30, 58, 138, 0.6); }
.er-who__avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); color: var(--mud-palette-primary); }
.er-who--on .er-who__avatar { background: rgba(255, 255, 255, 0.22); color: #fff; }
@media (max-width: 600px) { .er-dash-feats__head { align-items: stretch; } .er-dash-feats__who { align-self: flex-start; } }
.er-dash-feats__head h2 { font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.2rem; color: var(--mud-palette-text-primary); }
.er-dash-feats__head p { margin: 0; font-size: 0.9rem; color: var(--mud-palette-text-secondary); }
.er-dash-feats__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.er-feat {
    --feat-accent: var(--mud-palette-primary);
    display: flex; align-items: flex-start; gap: 0.9rem; text-align: left; text-decoration: none; cursor: pointer;
    background: var(--mud-palette-surface); color: inherit; font: inherit;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 18px; padding: 1.05rem 1.1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -24px rgba(30, 58, 138, 0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.er-feat:hover, .er-feat:focus-visible {
    transform: translateY(-2px); text-decoration: none;
    border-color: color-mix(in srgb, var(--feat-accent) 45%, transparent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 40px -26px rgba(30, 58, 138, 0.5);
}
.er-feat:focus-visible { outline: 2px solid var(--feat-accent); outline-offset: 2px; }
.er-feat__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; background: color-mix(in srgb, var(--feat-accent) 12%, transparent); }
.er-feat__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.er-feat__title { font-weight: 700; font-size: 0.98rem; color: var(--mud-palette-text-primary); }
.er-feat__text { font-size: 0.86rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.er-feat__cta { margin-top: 0.25rem; font-size: 0.84rem; font-weight: 700; color: var(--feat-accent); }
.er-feat--ellie { --feat-accent: #0EA5E9; }
.er-feat--mistakes { --feat-accent: #DB2777; }
.er-feat--papers { --feat-accent: #7C3AED; }
.er-feat--plan { --feat-accent: #16A34A; }
.er-feat--readiness { --feat-accent: #F59E0B; }
.er-feat--report { --feat-accent: #1E3A8A; }
@media (prefers-reduced-motion: reduce) { .er-feat, .er-feat:hover { transform: none; transition: none; } }
.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); }
/* Loading placeholder tiles — identical footprint to a real KPI tile so the row holds its height and the
   page never jumps when the numbers arrive. Neutral grey; a soft shimmer signals "loading". */
.er-kid-stat--skeleton { --er-stat-bg: color-mix(in srgb, #64748B 6%, transparent); --er-stat-ico: #94A3B8; --er-stat-ico-bg: color-mix(in srgb, #64748B 14%, transparent); }
.er-skel { position: relative; overflow: hidden; background: color-mix(in srgb, #64748B 16%, transparent); border-radius: 6px; }
.er-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 45%, transparent), transparent); animation: er-skel-shimmer 1.3s infinite; }
.er-kid-stat__ico.er-skel { border-radius: 10px; }
.er-skel--val { width: 42px; height: 1.05rem; margin-bottom: 5px; }
.er-skel--lbl { width: 68px; height: 0.6rem; }
@keyframes er-skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .er-skel::after { animation: none; } }

/* 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);
}
/* The "not started yet" card: the starting-point pill is the one action and may take the row. */
.er-kid-card__actions .er-kid-start.mud-button-root { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
/* 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(132px, 1fr)); gap: 0.75rem; }
/* Full width, so the KPI strip lines up with the glance cards and tile grid beneath it rather than
   stopping two-thirds of the way across. */
.er-hub-stats { width: 100%; }

/* ===== 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; }

/* Section heading + its tile count. The accent comes from the group wrapper below. */
.er-hub-group { margin-top: 2.1rem; }
.er-hub-group:first-of-type { margin-top: 1.6rem; }
.er-hub-group--sky     { --er-tile-accent: #0EA5E9; }
.er-hub-group--violet  { --er-tile-accent: #7C3AED; }
.er-hub-group--emerald { --er-tile-accent: #059669; }

.er-hub-section {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem;
    margin: 0 0 0.9rem; color: var(--mud-palette-text-primary);
}
/* A short accent rule ties the heading to its tiles without shouting. */
.er-hub-section::before {
    content: ""; width: 4px; height: 1.1em; border-radius: 999px;
    background: var(--er-tile-accent); flex: 0 0 4px;
}
.er-hub-section__count {
    font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 0.72rem; font-weight: 600;
    line-height: 1; padding: 0.3rem 0.5rem; border-radius: 999px;
    color: var(--er-tile-accent);
    background: color-mix(in srgb, var(--er-tile-accent) 12%, transparent);
}

/* grid-auto-rows: 1fr keeps EVERY row the same height, not just the tiles within one row — a three-line
   description used to make its row visibly taller than the rest of the section. */
/* Flex, not grid: a section of 5 in a 3-across layout would leave a hole in the last row, so the
   remaining tiles grow to fill it and the block stays justified at any count or width. min-height
   keeps a one-line tile the same height as a two-line one. */
.er-tile-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.er-tile-grid > .er-tile { flex: 1 1 248px; min-height: 78px; }
.er-tile {
    display: flex; gap: 0.85rem; align-items: center; 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: 1rem 0.9rem 1rem 1.05rem;
    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, background-color 0.16s ease;
}
.er-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--er-tile-accent) 60%, transparent);
    border-color: color-mix(in srgb, var(--er-tile-accent) 40%, transparent);
    background: color-mix(in srgb, var(--er-tile-accent) 4%, var(--mud-palette-surface));
}
.er-tile:focus-visible { outline: 3px solid var(--er-tile-accent); outline-offset: 2px; }
.er-tile__ico {
    display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    color: var(--er-tile-accent);
    background: color-mix(in srgb, var(--er-tile-accent) 11%, transparent);
}
.er-tile__ico .mud-icon-root { font-size: 1.3rem; color: inherit; }
.er-tile__txt { display: block; flex: 1; min-width: 0; }
.er-tile__title { display: block; font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 600; font-size: 0.96rem; margin: 0 0 0.12rem; color: var(--mud-palette-text-primary); }
.er-tile__desc { display: block; font-size: 0.8rem; color: var(--mud-palette-text-secondary); line-height: 1.4; }
/* The chevron is the affordance that says "this whole card is a link"; it slides on hover. */
.er-tile__go {
    display: grid; place-items: center; flex: 0 0 auto; color: var(--mud-palette-text-secondary);
    opacity: 0.45; transition: opacity 0.16s ease, transform 0.16s ease;
}
.er-tile__go .mud-icon-root { font-size: 1.15rem; color: inherit; }
.er-tile:hover .er-tile__go { opacity: 1; color: var(--er-tile-accent); transform: translateX(2px); }

@media (max-width: 599px) {
    /* One per row on a phone — a stretched pair would squeeze the title onto three lines. */
    .er-tile-grid > .er-tile { flex-basis: 100%; }
}

/* Dark mode: lift the accents so they hold contrast on the dark surface. */
.mud-theme-dark .er-hub-group--sky     { --er-tile-accent: #60CDF7; }
.mud-theme-dark .er-hub-group--violet  { --er-tile-accent: #B49BF5; }
.mud-theme-dark .er-hub-group--emerald { --er-tile-accent: #5EC8A0; }

/* ===== Readiness × performance merge: each subject carries its score bar + drill-down ===== */
.er-readiness-hero { max-width: 620px; }

/* Whole-child factors (Accuracy, Speed) — no drill-down, so a compact strip, not accordions. */
.er-factorstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface); }
.er-factorstrip__head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; margin-bottom: 0.3rem; }
.er-factorstrip__head > span:first-child { font-weight: 600; }

/* Subject accordion header now holds the readiness bar (moved out of the separate card). */
.er-subjrow { width: 100%; padding-right: 0.5rem; }
.er-subjrow__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.er-subjrow__score { font-size: 0.85rem; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.er-subjrow__muted { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-subjrow__bar { margin: 0.5rem 0 0.35rem; }
.er-subjrow__sub { font-size: 0.74rem; }

/* ===== Per-skill question review (parent drill-down from a topic) ===== */
.er-skillq {
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
    padding: 0.9rem 1rem; margin-bottom: 0.9rem; background: var(--mud-palette-surface);
    border-left: 4px solid var(--mud-palette-lines-default);
}
.er-skillq.is-correct { border-left-color: #059669; }
.er-skillq.is-wrong { border-left-color: #D97706; }  /* amber, not red — this is review, not punishment */
.er-skillq__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.er-skillq__mark { font-weight: 700; font-size: 0.95rem; }
.er-skillq.is-correct .er-skillq__mark { color: #059669; }
.er-skillq.is-wrong .er-skillq__mark { color: #B45309; }
.er-skillq__meta { font-size: 0.74rem; color: var(--mud-palette-text-secondary); }
.er-skillq__stem { font-weight: 600; margin-bottom: 0.6rem; line-height: 1.45; }
.er-skillq__img { display: block; max-width: 100%; max-height: 200px; object-fit: contain; margin: 0 0 0.6rem; }
.er-skillq__passage, .er-skillq__why { margin-bottom: 0.6rem; font-size: 0.85rem; }
.er-skillq__passage summary, .er-skillq__why summary { cursor: pointer; color: var(--mud-palette-primary); font-weight: 600; }
.er-skillq__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.er-skillq__opt {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.45rem 0.65rem; border-radius: 10px; font-size: 0.87rem;
    border: 1px solid var(--mud-palette-lines-default);
}
.er-skillq__opt.is-correct { border-color: #059669; background: color-mix(in srgb, #059669 7%, transparent); }
.er-skillq__opt.is-picked { border-color: #D97706; background: color-mix(in srgb, #D97706 8%, transparent); }
.er-skillq__opt img { max-height: 64px; display: block; }
.er-skillq__opt-text { flex: 1 1 auto; min-width: 0; }
.er-skillq__tag { font-size: 0.66rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.er-skillq__tag.is-correct { color: #047857; background: color-mix(in srgb, #059669 14%, transparent); }
.er-skillq__tag.is-picked { color: #B45309; background: color-mix(in srgb, #D97706 16%, transparent); }

/* ===== Child overview "at a glance" band (/child/{id}) ===== */
/* Three cards answering the parent's three questions. Equal height, one row on desktop, stacked on a phone. */
.er-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.er-glance__card {
    display: flex; flex-direction: column; gap: 0.55rem;
    background: var(--mud-palette-surface);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    border-radius: 18px; padding: 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px -26px rgba(30, 58, 138, 0.4);
}
.er-glance__title {
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin: 0;
}
.er-glance__figure { display: flex; align-items: baseline; gap: 0.4rem; }
.er-glance__big { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--mud-palette-text-primary); }
.er-glance__unit { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.er-glance__delta { margin-left: auto; font-size: 0.8rem; font-weight: 700; }

/* The band word IS the headline. Scanned in a glance, where a number has to be interpreted first. */
.er-glance__band {
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.5rem;
    line-height: 1.15; letter-spacing: -0.01em;
}
.er-glance__band--ready { color: #047857; }
.er-glance__band--strong { color: #059669; }
.er-glance__band--ontrack { color: #0369A1; }
.er-glance__band--developing { color: #B45309; }  /* amber, never red — this is a starting point, not a fail */

/* Per-subject status chip. Four states, because a coverage-aware score can distinguish "not met yet"
   from "genuinely weak" — a distinction a two-state On track / Practice needed chip cannot make. */
.er-glance__status {
    justify-self: end; white-space: nowrap;
    font-size: 0.68rem; font-weight: 700; line-height: 1;
    padding: 0.3rem 0.5rem; border-radius: 999px;
}
.er-glance__status--ontrack { color: #047857; background: color-mix(in srgb, #059669 13%, transparent); }
.er-glance__status--practice { color: #B45309; background: color-mix(in srgb, #D97706 15%, transparent); }
.er-glance__status--covering { color: #0369A1; background: color-mix(in srgb, #0EA5E9 15%, transparent); }
.er-glance__status--notstarted { color: var(--mud-palette-text-secondary); background: color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent); }

/* "3/20" — the target is the quiet half. */
.er-kid-stat__of { font-size: 0.7em; font-weight: 600; opacity: 0.6; }

.mud-theme-dark .er-glance__band--ready,
.mud-theme-dark .er-glance__band--strong { color: #5EC8A0; }
.mud-theme-dark .er-glance__band--ontrack { color: #60CDF7; }
.mud-theme-dark .er-glance__band--developing { color: #FCD34D; }
.er-glance__delta.is-up { color: #059669; }
.er-glance__delta.is-down { color: #B45309; }   /* amber, not red: a dip is information, not a failure */
.er-glance__sub { font-size: 0.82rem; color: var(--mud-palette-text-secondary); margin: 0; line-height: 1.45; }
.er-glance__hint { font-size: 0.75rem; color: var(--mud-palette-text-secondary); margin: 0; line-height: 1.45; }
.er-glance__spark { width: 100%; height: 56px; margin-top: auto; }

/* Monthly level: one column per month, so a parent sees the shape of a term rather than a single number.
   An unscored month is drawn as a hollow stub — absence of a reading, not a score of zero. */
.er-glance__months { display: flex; align-items: flex-end; gap: 0.3rem; height: 78px; margin-top: auto; }
.er-glance__month { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.25rem; }
.er-glance__month-bar { width: 100%; display: flex; align-items: flex-end; height: 100%; background: var(--mud-palette-background-gray, #EEF2F7); border-radius: 6px; overflow: hidden; }
.er-glance__month-fill { display: block; width: 100%; border-radius: 6px; background: linear-gradient(180deg, #0EA5E9, #1E3A8A); }
.er-glance__month.is-blank .er-glance__month-bar { background: transparent; border: 1px dashed color-mix(in srgb, var(--mud-palette-text-secondary) 30%, transparent); }
.er-glance__month-label { font-size: 0.62rem; color: var(--mud-palette-text-secondary); line-height: 1; }
.er-glance__month-value { font-size: 0.62rem; font-weight: 700; color: var(--mud-palette-text-primary); line-height: 1; font-variant-numeric: tabular-nums; }

/* Subject strengths: name, bar, score on one row each. */
.er-glance__subjects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.er-glance__subject { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(40px, 1.4fr) auto; align-items: center; gap: 0.55rem; }
.er-glance__subject-name { font-size: 0.78rem; color: var(--mud-palette-text-primary); }
.er-glance__subject.is-untested { opacity: 0.55; }
.er-glance__tag { display: block; font-size: 0.65rem; color: var(--mud-palette-text-secondary); }
.er-glance__bar { display: block; height: 8px; border-radius: 999px; background: var(--mud-palette-background-gray, #EEF2F7); overflow: hidden; }
.er-glance__bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1E3A8A, #0EA5E9); }
.er-glance__subject-score { font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }

/* Practice consistency: one column per week, empty weeks drawn as a stub so gaps are visible. */
.er-glance__weeks { display: flex; align-items: flex-end; gap: 0.35rem; height: 64px; margin-top: auto; }
.er-glance__week { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; background: var(--mud-palette-background-gray, #EEF2F7); border-radius: 6px; overflow: hidden; }
.er-glance__week-fill { display: block; width: 100%; border-radius: 6px; background: #93C5FD; }
.er-glance__week.is-latest .er-glance__week-fill { background: linear-gradient(180deg, #0EA5E9, #1E3A8A); }
.er-glance__week.is-empty .er-glance__week-fill { background: color-mix(in srgb, var(--mud-palette-text-secondary) 22%, transparent); }

.mud-theme-dark .er-glance__bar,
.mud-theme-dark .er-glance__week { background: color-mix(in srgb, #fff 8%, transparent); }

/* ===== Exam simulator: a school's entrance process as an ordered sequence ===== */
.er-exam-section { --er-tile-accent: #1E3A8A; margin-top: 1.8rem; }
.er-exam-section:first-of-type { margin-top: 0; }
.er-exam-stage__num {
    display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.8rem;
    color: #fff; background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
}

/* ===== Form sections + empty states (shared: /homework and any page with a long form) ===== */
/* A long flat column of inputs reads as a wall; these group it into "who / what / when" bands. */
.er-formsec + .er-formsec { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.er-formsec__head {
    display: flex; align-items: baseline; gap: 0.55rem; margin: 0 0 0.9rem;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary);
}
.er-formsec__step {
    display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 999px;
    font-size: 0.68rem; letter-spacing: 0; color: #fff; background: var(--mud-palette-primary);
}

/* The primary action of a form card: full width, pill, clearly the thing to press. */
.er-form-cta.mud-button-root {
    width: 100%; border-radius: 999px !important; padding-block: 0.7rem !important;
    box-shadow: 0 12px 24px -12px rgba(30, 58, 138, 0.7) !important;
}

/* A designed empty state - an icon, a heading and what happens next - instead of a bare alert
   sitting in an otherwise empty column. */
.er-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2.4rem 1.6rem; border-radius: 20px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)),
        var(--mud-palette-surface));
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}
.er-empty__ico {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; margin-bottom: 1rem;
    color: #fff; background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
    box-shadow: 0 14px 26px -14px rgba(14, 165, 233, 0.7);
}
.er-empty__ico .mud-icon-root { font-size: 1.7rem; }
.er-empty__title { font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0 0 0.35rem; color: var(--mud-palette-text-primary); }
.er-empty__sub { font-size: 0.87rem; color: var(--mud-palette-text-secondary); margin: 0 0 1.5rem; max-width: 44ch; line-height: 1.55; }

/* Numbered "what happens next" steps - turns dead space into onboarding. */
.er-empty__steps { display: grid; gap: 0.85rem; width: 100%; max-width: 420px; text-align: left; }
.er-empty__step { display: flex; align-items: flex-start; gap: 0.75rem; }
.er-empty__num {
    display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px;
    font-family: 'Poppins', 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.78rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}
.er-empty__steptxt { font-size: 0.85rem; color: var(--mud-palette-text-secondary); line-height: 1.5; padding-top: 0.15rem; }
.er-empty__steptxt strong { color: var(--mud-palette-text-primary); font-weight: 600; }

/* ===== 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, .er-tile__go { transition: none; }
    .er-tile:hover, .er-pick-card:hover { transform: none; }
    .er-tile:hover .er-tile__go { 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); }
/* wrap: the render step carries a voice picker + three buttons — without wrapping they crushed the
   description column to one word per line. The text keeps a readable width; controls drop below. */
.er-journey__step { display: flex; flex-wrap: wrap; 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 1 280px; min-width: 260px; 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) ---- */
/* ---- Target-school goal cards (/goals): one card per school, plain-English first ----
   Reworked from a three-marker "benchmark bar + legend" (too much for a non-technical parent to decode)
   to a card read top-to-bottom: status verdict → countdown → one goal bar → context in words. */
.er-goalrow { padding: 16px 0; }
.er-goalrow + .er-goalrow { border-top: 1px solid var(--mud-palette-lines-default, #e3e8ef); }
.er-goalrow__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.er-goalrow__name { font-weight: 700; font-size: 1.05rem; }
.er-goalrow__primary { font-size: .72rem; font-weight: 800; color: #B45309; background: #FEF3C7; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.er-goalrow__actions { margin-left: auto; display: inline-flex; align-items: center; gap: .1rem; }
.er-goalrow__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
/* The verdict pill — the first thing the eye lands on; colour is paired with an emoji + word, never colour alone. */
.er-goalpill { font-weight: 800; font-size: .85rem; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.er-goalpill--good { background: #DCFCE7; color: #166534; }
.er-goalpill--ontrack { background: #DBEAFE; color: #1E40AF; }
.er-goalpill--behind { background: #FEF3C7; color: #92400E; }
.er-goalpill--none { background: #F1F5F9; color: #475569; }
.er-goalrow__when { font-size: .85rem; color: var(--mud-palette-text-secondary, #5b6b7b); }
.er-goalrow__say { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; }
/* One bar: how full = how ready (0–100); the pin = the goal you're aiming for. */
.er-goalbar { position: relative; height: 16px; border-radius: 999px; background: #EEF2F7; margin: 26px 2px 8px; }
.er-goalbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; min-width: 6px; background: linear-gradient(90deg, #1E3A8A, #0EA5E9); }
.er-goalbar__fill.is-met { background: linear-gradient(90deg, #15803D, #22C55E); }
.er-goalbar__flag { position: absolute; top: -9px; bottom: -9px; width: 2px; background: #0F172A; transform: translateX(-50%); }
.er-goalbar__flag::before { content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #0F172A; }
.er-goalbar__scale { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .84rem; color: #334155; }
.er-goalbar__scale strong { font-weight: 800; }
.er-goalrow__context { margin: 10px 0 0; font-size: .78rem; color: var(--mud-palette-text-secondary, #5b6b7b); line-height: 1.55; }
/* "Not started" state. An empty track with a threshold line on it looks like a broken bar, so the
   no-score case gets words and the one action that fixes it instead of a 0%-wide fill. */
.er-goal-empty {
    display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap;
    margin: 0.3rem 6px 0.2rem;
    padding: 0.7rem 0.9rem; border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.er-goal-empty__text { font-size: 0.8rem; color: var(--mud-palette-text-secondary); line-height: 1.45; }

/* ---- Past-papers (/assessments) first-visit explainer: why the page exists + how it works ---- */
.er-papers-empty {
    max-width: 640px; margin: 8px auto 0; text-align: center;
    padding: 32px 24px; border-radius: 20px;
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface, #fff));
    border: 1px solid var(--mud-palette-lines-default, #e3e8ef);
}
.er-papers-empty__art { margin-bottom: 8px; }
.er-papers-empty__title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; color: var(--mud-palette-text-primary); }
.er-papers-empty__lead { margin: 0 auto 22px; max-width: 520px; font-size: 0.98rem; line-height: 1.55; color: var(--mud-palette-text-secondary, #5b6b7b); }
/* The three steps: numbered, left-aligned rows inside the centred card so they read as a sequence. */
.er-papers-steps { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 480px; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.er-papers-step { display: flex; align-items: flex-start; gap: 14px; }
.er-papers-step__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.er-papers-step__ico--1 { background: #1E3A8A; }
.er-papers-step__ico--2 { background: #0EA5E9; }
.er-papers-step__ico--3 { background: #F59E0B; }
.er-papers-step__body { display: flex; flex-direction: column; gap: 2px; }
.er-papers-step__body strong { font-weight: 700; font-size: 0.98rem; }
.er-papers-step__body span { font-size: 0.86rem; color: var(--mud-palette-text-secondary, #5b6b7b); line-height: 1.45; }
.er-papers-empty__cta { border-radius: 12px; }
.er-papers-empty__privacy { margin: 16px 0 0; font-size: 0.8rem; color: var(--mud-palette-text-secondary, #5b6b7b); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }

/* ---- "Ask Ellie" — floating parent AI coach (bottom-right launcher + chat panel) ---- */
.er-ellie { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 1400; }
.er-ellie__fab {
    display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
    padding: 12px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 0.95rem;
    color: #fff; background: linear-gradient(120deg, #1E3A8A, #0EA5E9);
    box-shadow: 0 10px 26px rgba(13, 27, 62, 0.32); transition: transform .12s ease, box-shadow .12s ease;
}
.er-ellie__fab:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(13, 27, 62, 0.4); }
.er-ellie__fab:focus-visible { outline: 3px solid #7DD3FC; outline-offset: 2px; }
.er-ellie__fab.is-open { padding: 12px 14px; }
.er-ellie__fab-ico { font-size: 1.2rem; line-height: 1; }
/* The panel sits above the launcher. Capped to the viewport so it never runs off a laptop screen. */
.er-ellie__panel {
    position: absolute; right: 0; bottom: 64px; width: min(380px, calc(100vw - 32px));
    height: min(560px, calc(100dvh - 120px)); display: flex; flex-direction: column; overflow: hidden;
    background: var(--mud-palette-surface, #fff); border: 1px solid var(--mud-palette-lines-default, #e3e8ef);
    border-radius: 20px; box-shadow: 0 24px 64px rgba(13, 27, 62, 0.34); animation: er-ellie-in .16s ease-out;
}
/* "Make bigger" — a large, centred, page-like panel for a longer conversation or reading a full report. */
.er-ellie__panel.is-large {
    position: fixed; top: 20px; bottom: 20px; left: 50%; right: auto; transform: translateX(-50%);
    width: min(920px, calc(100vw - 32px)); height: auto; z-index: 1401;
}
@media (max-width: 560px) { .er-ellie__panel.is-large { left: 12px; right: 12px; transform: none; width: auto; } }
@keyframes er-ellie-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .er-ellie__panel { animation: none; } .er-ellie__fab { transition: none; } }
.er-ellie__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(120deg, #1E3A8A, #0EA5E9); }
.er-ellie__avatar { font-size: 1.5rem; line-height: 1; }
.er-ellie__title { display: flex; flex-direction: column; line-height: 1.15; }
.er-ellie__title strong { font-size: 1rem; }
.er-ellie__title span { font-size: 0.72rem; opacity: 0.85; }
.er-ellie__icon { border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; line-height: 1; }
.er-ellie__icon:first-of-type { margin-left: auto; }
.er-ellie__icon + .er-ellie__icon { margin-left: 6px; }
.er-ellie__icon:hover { background: rgba(255, 255, 255, .28); }
.er-ellie__toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--mud-palette-lines-default, #e3e8ef); font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-ellie__toolbar select { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default, #e3e8ef); background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary); font: inherit; }
.er-ellie__report { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; color: #1E40AF; text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.er-ellie__report:hover { background: color-mix(in srgb, #1E40AF 8%, transparent); text-decoration: underline; }
.er-ellie__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.er-ellie__intro p { margin: 0 0 12px; font-size: 0.9rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.er-ellie__chips { display: flex; flex-direction: column; gap: 8px; }
.er-ellie__chip { text-align: left; border: 1px solid color-mix(in srgb, #0EA5E9 32%, transparent); background: color-mix(in srgb, #0EA5E9 7%, transparent); color: #0B4A6F; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.er-ellie__chip:hover { background: color-mix(in srgb, #0EA5E9 14%, transparent); }
.er-ellie__msg { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; }
.er-ellie__msg--me { flex-direction: row-reverse; }
.er-ellie__msg-av { font-size: 1.1rem; line-height: 1; flex: none; }
.er-ellie__bubble { padding: 9px 12px; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; max-width: 82%; overflow-wrap: anywhere; }
/* Rendered markdown inside a bubble: tight paragraph + list spacing so a multi-point answer reads cleanly. */
.er-ellie__bubble p { margin: 0 0 6px; }
.er-ellie__rate { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.er-ellie__rate-btn { border: 1px solid #E2E8F0; background: #fff; color: #334155; border-radius: 999px; padding: 2px 9px; font-size: 0.78rem; line-height: 1.5; cursor: pointer; }
.er-ellie__rate-btn:hover { border-color: #93C5FD; background: #EFF6FF; }
.er-ellie__rate-btn.is-on { background: #DBEAFE; border-color: #93C5FD; }
.er-ellie__rate-btn:focus-visible { outline: 2px solid #1E40AF; outline-offset: 2px; }
.er-ellie__rate-note { font-size: 0.75rem; color: #64748B; }
.er-ellie__rate-comment { display: flex; gap: 6px; margin-top: 6px; }
.er-ellie__rate-comment input { flex: 1; min-width: 0; border: 1px solid #E2E8F0; border-radius: 8px; padding: 4px 8px; font-size: 0.8rem; font-family: inherit; }
.er-ellie__bubble p:last-child { margin-bottom: 0; }
.er-ellie__bubble ul { margin: 4px 0 6px; padding-left: 18px; }
.er-ellie__bubble li { margin: 2px 0; }
.er-ellie__bubble strong { font-weight: 700; }
.er-ellie__bubble ol { margin: 4px 0 6px; padding-left: 20px; }
.er-ellie__bubble em { font-style: italic; }
.er-ellie__tablewrap { margin: 6px 0 8px; overflow-x: auto; border-radius: 10px; border: 1px solid color-mix(in srgb, #64748B 22%, transparent); background: var(--mud-palette-surface, #fff); }
.er-ellie__table { border-collapse: collapse; width: 100%; font-size: 0.84rem; min-width: 220px; }
.er-ellie__table th, .er-ellie__table td { padding: 6px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, #64748B 16%, transparent); }
.er-ellie__table th { font-weight: 700; font-size: 0.74rem; letter-spacing: .03em; text-transform: uppercase; color: #1E3A8A; background: color-mix(in srgb, #1E3A8A 7%, transparent); }
.er-ellie__table tr:last-child td { border-bottom: 0; }
.er-ellie__table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-ellie__table tbody tr:nth-child(even) td { background: color-mix(in srgb, #64748B 5%, transparent); }
.er-ellie__callout { margin: 6px 0 8px; padding: 8px 12px; border-left: 4px solid #F59E0B; border-radius: 0 10px 10px 0; background: color-mix(in srgb, #F59E0B 12%, transparent); font-weight: 500; }
.er-ellie__panel.is-large .er-ellie__bubble { max-width: 92%; }
.er-ellie__panel.is-large .er-ellie__table { font-size: 0.9rem; }
@media (prefers-color-scheme: dark) { .er-ellie__table th { color: #93C5FD; } }
.er-ellie__msg--ellie .er-ellie__bubble { background: color-mix(in srgb, #64748B 9%, transparent); color: var(--mud-palette-text-primary); border-bottom-left-radius: 4px; }
.er-ellie__msg--me .er-ellie__bubble { background: linear-gradient(120deg, #1E3A8A, #2563EB); color: #fff; border-bottom-right-radius: 4px; }
.er-ellie__typing { display: inline-flex; gap: 4px; }
.er-ellie__typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: er-ellie-blink 1.1s infinite; }
.er-ellie__typing span:nth-child(2) { animation-delay: .18s; }
.er-ellie__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes er-ellie-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: .9; } }
.er-ellie__input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--mud-palette-lines-default, #e3e8ef); }
.er-ellie__input input { flex: 1; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default, #e3e8ef); background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary); font: inherit; font-size: 0.9rem; }
.er-ellie__input input:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 0; }
.er-ellie__input button { flex: none; width: 40px; border: 0; border-radius: 12px; background: #1E3A8A; color: #fff; font-size: 1rem; cursor: pointer; }
.er-ellie__input button:disabled { opacity: .5; cursor: default; }
.er-ellie__note { margin: 0; padding: 0 14px 12px; font-size: 0.68rem; color: var(--mud-palette-text-secondary); line-height: 1.4; }

/* ---- 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; }
/* The header IS the progress bar now: a light tint of the subject colour is the empty track and a
   stronger tint fills from the left to the child's mastery %, so a glance reads "how far am I" — not a
   solid block that looks 100% done. Text stays dark navy so it's high-contrast over the whole width
   (the fill is a pastel, never a saturated block), and a % label spells the number out. */
.er-subweek__head { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; padding: 12px 14px; color: #1E293B; font: inherit; font-weight: 800; text-align: left; list-style: none; user-select: none; overflow: hidden; background: color-mix(in srgb, var(--subj, #64748B) 12%, #fff); }
.er-subweek__head::-webkit-details-marker { display: none; }
.er-subweek__head::marker { content: ""; }
/* The fill — width driven by --pct (set inline per subject), colour by --subj (set per modifier). */
.er-subweek__head::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--subj, #64748B) 42%, #fff); transition: width .5s ease; z-index: 0; }
.er-subweek__head > * { position: relative; z-index: 1; }
.er-subweek--maths .er-subweek__head { --subj: #3B82F6; }
.er-subweek--english .er-subweek__head { --subj: #EC4899; }
.er-subweek--vr .er-subweek__head { --subj: #10B981; }
.er-subweek--nvr .er-subweek__head { --subj: #F59E0B; }
.er-subweek--default .er-subweek__head { --subj: #64748B; }
/* Wider Curriculum strands (FSCE breadth) shown as their own kid-facing tiles */
.er-subweek--science .er-subweek__head { --subj: #0EA5E9; }
.er-subweek--history .er-subweek__head { --subj: #8B5CF6; }
.er-subweek--geography .er-subweek__head { --subj: #14B8A6; }
.er-subweek__head:hover, .er-subweek__head:focus-visible { filter: brightness(.97); }
.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__count { font-size: .85rem; font-weight: 800; background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 1px 9px; }
.er-subweek__chev { font-weight: 900; font-size: 1.05rem; transition: transform 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .er-subweek__head::before { transition: none; } }
.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; }
}

/* Roster attention tiles (/students, class report): quiet cards that act as filters.
   NOT .er-tile — that is the child-hub link tile, and sharing the name made this block (defined later)
   silently override the hub tile's radius, border, hover and focus ring. */
.er-stat-tile { border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.er-stat-tile:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.er-stat-tile:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-stat-tile--active { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); }
@media (prefers-reduced-motion: reduce) {
    .er-stat-tile { transition: none; }
    .er-stat-tile:hover { transform: none; }
}

/* Understanding grid cells (class report). */
.er-grid-cell { display:inline-block; min-width:40px; padding:2px 8px; border-radius:8px; font-weight:600; color:#0F172A; }

/* Print: reports and the roster come out clean — no chrome, no buttons. */
@media print {
  .mud-appbar, .mud-drawer, .mud-main-content > .mud-toolbar, .er-no-print, .mud-snackbar, .mud-dialog-container, footer { display: none !important; }
  .mud-main-content { padding: 0 !important; margin: 0 !important; }
  .er-print-title { display: block !important; }
  .mud-card, .mud-paper { box-shadow: none !important; border: 1px solid #CBD5E1 !important; break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
  body { background: #fff !important; }
}

/* /papers — the paper a parent came for from the marketing site, front and centre. */
.er-paper-landing { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); border-left: 5px solid var(--mud-palette-primary); border-radius: 16px; background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface)); }
.er-paper-landing .er-year-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; padding-bottom: 0.35rem; }

/* /admin/users — the sign-up funnel for the accounts on screen. */
/* /admin/users — account rows that wrap instead of a ten-column table that scrolls sideways. */
.er-acct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.er-acct-toolbar__filters { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.er-acct-toolbar__sort { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.er-stage { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-size: 0.82rem; font-weight: 600; border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; display: inline-flex; gap: 0.4rem; align-items: center; transition: background 0.15s ease, color 0.15s ease; }
.er-stage span { font-weight: 700; color: var(--mud-palette-primary); }
.er-stage:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); }
.er-stage:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.er-stage--on { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary); }
.er-stage--on span { color: inherit; }
.er-acct-list { display: flex; flex-direction: column; gap: 0.6rem; }
.er-acct { border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border-radius: 14px; background: var(--mud-palette-surface); padding: 0.85rem 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.er-acct--platform { opacity: 0.8; }
.er-acct--org { border-style: dashed; background: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface)); }
.er-stage--action { border-style: dashed; color: var(--mud-palette-primary); }
.er-acct__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.er-acct__who { min-width: 0; flex: 1 1 auto; }
.er-acct__name { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-weight: 700; font-size: 1rem; }
.er-acct__email { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--mud-palette-text-secondary); word-break: break-all; }
.er-acct__meta { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--mud-palette-text-secondary); margin-top: 0.15rem; }
.er-acct__meta em { font-style: normal; opacity: 0.8; }
.er-acct__manage { flex: 0 0 auto; }
.er-acct__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem 1rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); }
.er-fact { min-width: 0; }
.er-fact--wide { grid-column: span 2; }
.er-fact__l { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 0.15rem; }
.er-fact__v { display: block; font-size: 0.9rem; }
.er-fact__clip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-acct__panel { margin-top: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--mud-palette-background-grey); }
.er-acct-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
@media (max-width: 600px) { .er-fact--wide { grid-column: span 1; } }

.er-funnel { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; }
.er-funnel__tile { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.8rem 1rem; border-radius: 14px; background: 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); }
.er-funnel__n { font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.45rem; font-weight: 700; color: var(--mud-palette-primary); line-height: 1.1; }
.er-funnel__l { font-size: 0.86rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-funnel__s { font-size: 0.76rem; color: var(--mud-palette-text-secondary); }


/* ---- /papers hero (the first page a marketing-site sign-up sees) — desktop two-column, phone stacked ---- */
.er-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin: 0 0 1.25rem; border-radius: 20px; overflow: hidden;
           background: linear-gradient(135deg, #1E3A8A 0%, #24439A 55%, #0EA5E9 140%); color: #fff; box-shadow: 0 18px 44px rgba(30, 58, 138, .22); }
.er-hero__main { padding: 1.6rem 1.75rem 1.5rem; }
.er-hero__eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FDE68A; }
.er-hero__title { margin: .35rem 0 .4rem; font-family: Poppins, var(--mud-typography-h5-family); font-size: 1.55rem; line-height: 1.25; font-weight: 700; color: #fff; }
.er-hero__sub { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.er-hero__sub .er-hero__link { color: #FDE68A; font-weight: 600; }
.er-hero__facts { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.er-hero__facts li { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .28rem .7rem; font-size: .8rem; font-weight: 600; }
.er-hero__actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.er-hero__cta.mud-button-root { min-height: 48px; padding: 0 1.4rem; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.er-hero__fine { font-size: .8rem; color: rgba(255, 255, 255, .75); margin: .6rem 0 0; }
.er-hero__form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.er-hero__form .er-hero__name { flex: 1 1 200px; min-width: 180px; }
.er-hero__form .mud-input-outlined .mud-input-outlined-border, .er-hero__form .mud-input-label { border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; }
.er-hero__form .mud-input { color: #fff; }
.er-hero__form .er-year-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.er-hero__form .er-wiz__chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.er-hero__form .er-wiz__chip.is-on { background: #FDE68A; color: #1E3A8A; border-color: #FDE68A; }
.er-hero__next { background: rgba(255, 255, 255, .96); color: var(--mud-palette-text-primary); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.er-hero__steps { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.er-hero__steps span { font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .22rem .6rem; border-radius: 999px; background: #EEF2F9; color: #64748B; }
.er-hero__steps span.is-done { background: #DCFCE7; color: #166534; }
.er-hero__steps span.is-now { background: #1E3A8A; color: #fff; }
.er-hero__next-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-family: Poppins, var(--mud-typography-h6-family); font-size: 1.1rem; font-weight: 700; color: #1E3A8A; }
.er-hero__next-sub { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.er-hero__next-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.er-how { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.er-how li { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); border-radius: 999px; padding: .3rem .7rem; }
.er-set-row { align-items: center; }
@media (max-width: 760px) {
    .er-hero { grid-template-columns: 1fr; border-radius: 16px; }
    .er-hero__main { padding: 1.2rem 1.1rem 1.1rem; }
    .er-hero__title { font-size: 1.3rem; }
    .er-hero__actions .er-hero__cta.mud-button-root { width: 100%; }
    .er-hero__form .er-hero__cta.mud-button-root { width: 100%; }
    .er-hero__next { padding: 1.1rem 1.1rem 1.2rem; }
    .er-hero__next-actions .er-btn-pill.mud-button-root { width: 100%; }
    .er-papers-intro--landing { display: none; } /* the hero says it — keep the phone screen for the paper */
    .er-how { display: none; }
    .er-set-row { width: 100%; }
    .er-set-row .er-set-btn.mud-button-root { flex: 1 1 auto; }
}

/* ---- /Account/Register — phone-first refinements ---- */
.er-trust { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.er-trust li { font-size: .78rem; font-weight: 600; color: #166534; background: #DCFCE7; border-radius: 999px; padding: .22rem .6rem; }
.er-trust li::before { content: "✓ "; }
.er-auth-card .er-google-btn.mud-button-root { min-height: 48px; border-width: 2px; font-weight: 600; }
.er-acct-type { border: 0; padding: 0; margin: 0 0 1rem; }
.er-acct-type legend { padding: 0; margin-bottom: .45rem; font-size: 1rem; font-weight: 600; color: #334155; }
.er-acct-type > div { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } /* InputRadioGroup's wrapper */
.er-acct-type__opt { position: relative; }
.er-acct-type__opt { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 2px solid #E2E8F0; border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.er-acct-type__opt:has(input:checked) { border-color: #1E3A8A; background: #F0F5FF; }
.er-acct-type__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.er-acct-type__opt:has(input:focus-visible) { outline: 3px solid #93C5FD; outline-offset: 2px; }
.er-acct-type__ico { display: inline-flex; width: 38px; height: 38px; border-radius: 12px; background: #EEF2F9; color: #1E3A8A; align-items: center; justify-content: center; flex: none; }
.er-acct-type__opt:has(input:checked) .er-acct-type__ico { background: #1E3A8A; color: #fff; }
/* No :has() (older browsers): the card still works — the checked state just isn't tinted. */
.er-acct-type__txt { display: flex; flex-direction: column; line-height: 1.25; }
.er-acct-type__txt strong { font-size: .95rem; color: #0F172A; }
.er-acct-type__txt small { font-size: .78rem; color: #64748B; }
.er-auth-card .er-reg-submit.mud-button-root { min-height: 50px; border-radius: 999px; font-weight: 700; font-size: 1rem; }
@media (max-width: 480px) {
    .er-auth-shell { padding: 0; align-items: stretch; }
    .er-auth-card { border-radius: 0; padding: 1.4rem 1.1rem 2rem; box-shadow: none; min-height: 100vh; min-height: 100dvh; }
    .er-auth-brand { margin-bottom: 1rem; }
    .er-auth-logo-img { width: 104px; }
    .er-acct-type > div { grid-template-columns: 1fr; gap: .45rem; }
    .er-acct-type__opt { padding: .6rem .7rem; }
    .er-field > label { font-size: .95rem; }
    .er-field > input, .er-password__input { min-height: 48px; font-size: 16px; } /* 16px stops iOS zooming into the field */
}


/* ---- Sign-in / forgot-password: shared with the register page's new language ---- */
.er-auth-card .er-auth-submit.mud-button-root { min-height: 50px; border-radius: 999px; font-weight: 700; font-size: 1rem; }
/* "New here?" — quiet and centred: a question, one outlined pill, one line of reassurance (no second card). */
.er-auth-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #E2E8F0; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.er-auth-foot__q { font-weight: 600; color: #0F172A; }
.er-auth-foot__note { font-size: .8rem; color: #64748B; }
.er-trust--tight { margin: 0; }
.er-auth-card .er-auth-foot__btn.mud-button-root { border-radius: 999px; font-weight: 700; min-height: 48px; border-width: 2px; }
.er-auth-icon { width: 56px; height: 56px; border-radius: 18px; background: #F0F5FF; color: #1E3A8A; display: flex; align-items: center; justify-content: center; margin: 0 0 .9rem; }
.er-auth-icon .mud-icon-root { font-size: 30px; }
.er-auth-icon--ok { background: #DCFCE7; color: #166534; }
.er-auth-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; }
.er-auth-steps li { display: flex; align-items: center; gap: .6rem; color: #334155; font-size: .95rem; }
.er-auth-steps li b { width: 26px; height: 26px; border-radius: 50%; background: #1E3A8A; color: #fff; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }



/* A gentle "this one next" pulse for the just-enabled download button; still when motion is reduced. */
.er-pulse.mud-button-root { animation: er-pulse 1.6s ease-in-out 3; }
@keyframes er-pulse { 0%, 100% { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); } 50% { box-shadow: 0 0 0 10px rgba(253, 230, 138, .35), 0 10px 24px rgba(0, 0, 0, .18); } }
@media (prefers-reduced-motion: reduce) { .er-pulse.mud-button-root { animation: none; } }