/* 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 ----
   Split screen from 960px: navy brand panel | calm light surface with the form card. Phones: a short navy band
   with the logo, and the card rising over it like an app sheet. */
.er-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(360px, 44%) 1fr;
    background: #F4F7FC;
}

.er-auth-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 2.25rem clamp(2rem, 4vw, 3.5rem);
    color: #E2E8F0;
    overflow: hidden;
    background:
        radial-gradient(520px 380px at 88% 8%, rgba(56, 189, 248, 0.22), transparent 70%),
        radial-gradient(460px 340px at 6% 96%, rgba(251, 191, 36, 0.16), transparent 70%),
        linear-gradient(160deg, #1E3A8A 0%, #0B1E54 100%);
}

/* a faint dot grid gives the navy some texture without decoration */
.er-auth-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
    pointer-events: none;
}

.er-auth-panel > * { position: relative; }

.er-auth-panel__logo { display: inline-flex; align-self: flex-start; border-radius: 8px; }
.er-auth-panel__logo img { display: block; height: 36px; width: auto; }
.er-auth-panel__logo:focus-visible { outline: 3px solid #FBBF24; outline-offset: 4px; }
.er-auth-panel__tag { display: none; }

.er-auth-panel__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 30rem;
    padding: 2rem 0;
}

.er-auth-panel__robbie { margin-bottom: 1.1rem; }

.er-auth-panel__title {
    margin: 0 0 1.4rem;
    font-family: Poppins, Inter, system-ui, sans-serif;
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

.er-auth-panel__lead { margin: -0.6rem 0 0; font-size: 1.05rem; line-height: 1.55; color: #CBD5E1; }

.er-auth-panel__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.er-auth-panel__points li { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: #CBD5E1; }
.er-auth-panel__points strong { display: block; color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: 0.1rem; }

.er-auth-panel__ico {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FBBF24;
}

.er-auth-panel__ico .mud-icon-root { font-size: 22px; }

.er-auth-panel__trust { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: #94A3B8; }
.er-auth-panel__trust .mud-icon-root { color: #7DD3FC; }

.er-auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    min-width: 0;
}

.er-auth-card {
    width: 100%;
    max-width: 27rem;
    background: #fff;
    border-radius: 20px;
    padding: 2.25rem 2.1rem 2rem;
    border: 1px solid #E5EAF3;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -18px rgba(15, 23, 42, 0.18);
    position: relative;
}

/* brand hairline along the card's top edge, matching the parent-page heroes */
.er-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #1E3A8A, #2563EB 55%, #FBBF24);
}

.er-auth-head { margin-bottom: 1.4rem; }
.er-auth-title { margin: 0 0 0.35rem; font-family: Poppins, Inter, system-ui, sans-serif; font-size: 1.65rem; font-weight: 700; line-height: 1.2; color: #0B1E54; letter-spacing: -0.01em; }
.er-auth-sub { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #64748B; }
/* every account page's MudText h1 (register, forgot / reset password, kid sign-in) reads like the sign-in heading */
.er-auth-card h1.mud-typography-h5 { font-family: Poppins, Inter, system-ui, sans-serif; font-size: 1.65rem; font-weight: 700; line-height: 1.2; color: #0B1E54; letter-spacing: -0.01em; }
@media (max-width: 480px) { .er-auth-card h1.mud-typography-h5 { font-size: 1.45rem; } }
/* short laptop screens: the sticky panel keeps its words and drops Robbie rather than clipping */
@media (min-width: 960px) and (max-height: 680px) { .er-auth-panel__robbie { display: none; } .er-auth-panel__points { gap: 0.8rem; } }

/* Brand lockups (vector, built by MarketSite/Assets/build_logo.py): app bar, app landing nav. */
.er-appbar-logo {
    display: block;
    width: auto;
    height: 31px;
}

/* Social sign-in: a white button with the provider's own mark (Google's branding asks for the four-colour G). */
.er-social-btn {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid #CBD5E1;
    border-radius: 999px;
    background: #fff;
    color: #0F172A;
    font: 600 0.98rem/1.2 Inter, system-ui, sans-serif;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.er-social-btn:hover { border-color: #94A3B8; background: #F8FAFC; box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.25); }
.er-social-btn:active { transform: translateY(1px); }
.er-social-btn:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.er-social-btn__logo { width: 20px; height: 20px; flex: none; }

.er-auth-or { display: flex; align-items: center; gap: 0.8rem; margin: 1.25rem 0; font-size: 0.8rem; color: #64748B; }
.er-auth-or::before, .er-auth-or::after { content: ""; flex: 1; height: 1px; background: #E2E8F0; }

/* Label row with a right-aligned action (sign-in: "Forgot password?"). */
.er-field__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.35rem; }
.er-field__labelrow > label { font-size: 1rem; font-weight: 600; color: #334155; }
.er-field__action { font-size: 0.875rem; font-weight: 600; color: #1D4ED8; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; border-radius: 4px; }
.er-field__action:hover { text-decoration: underline; }
.er-field__action:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

.er-auth-remember { margin-bottom: 1.25rem; }
.er-auth-remember .er-helper-text { font-size: 0.78rem; }

.er-auth-kid { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.85rem; color: #64748B; text-align: center; }
.er-auth-kid .mud-icon-root { color: #94A3B8; }
.er-auth-kid a { color: #1D4ED8; font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
.er-auth-alert.mud-alert { border-radius: 12px; font-weight: 500; }

@media (max-width: 959.98px) {
    .er-auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .er-auth-panel { position: static; height: auto; padding: 1.25rem 1.25rem 3.1rem; align-items: center; text-align: center; }
    .er-auth-panel__logo { align-self: center; }
    .er-auth-panel__logo img { height: 32px; }
    .er-auth-panel__tag { display: block; margin-top: 0.45rem; font-size: 0.85rem; color: #CBD5E1; }
    .er-auth-panel__body, .er-auth-panel__trust { display: none; }
    .er-auth-main { align-items: flex-start; padding: 0 1rem 2rem; margin-top: -1.9rem; }
}

.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: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* 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: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.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; display: inline-flex; align-items: center; min-height: 48px; 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-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; }

/* Lesson nav: a plain row UNDER the lesson (never sticky). A sticky bar slid over the picture mid-scroll and
   looked broken (founder screenshot, 2026-10-18). Phones/tablets on the Learn page get edge buttons instead. */
.er-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.er-step-skip { text-align: center; margin-top: 0.75rem; }

/* ---- Stepper frame ---- */
/* Outside the Learn page (admin preview, the in-practice re-learn sheet) the parts are laid out by the host. */
.er-stepper { display: contents; }
.er-stepper--page { display: block; }

/* One compact top row: home + buddy | progress dots | step counter. */
.er-stepper__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.er-stepper__top .er-step-dots { margin: 0; }
.er-stepper__top .er-step-counter { justify-self: end; white-space: nowrap; }
.er-stepper__header { justify-self: start; min-width: 0; }

.er-lesson-step__media { display: flex; justify-content: center; width: 100%; }
.er-lesson-step__words {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

/* "Read it to me": a big, friendly pill right by the words it reads (48px tall — an easy tap for 8 to 11s). */
.er-stepper__listen,
.er-readme-row { display: flex; justify-content: center; }
.er-stepper__listen { margin-bottom: 0.9rem; flex-direction: column; align-items: center; gap: 0.4rem; }

/* Whole-lesson track's text version ("Read along"). */
.er-narration__transcript { max-width: 34rem; font-size: 0.98rem; color: #334155; text-align: left; }
.er-narration__transcript summary {
    cursor: pointer;
    min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: #0369A1;
}
.er-narration__transcript p { margin: 0.4rem 0 0; line-height: 1.55; }
.er-readme-row { margin: 0.2rem 0 0.4rem; }

.er-readme {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0 1.15rem;
    border: 2px solid #BAE6FD;
    border-radius: 999px;
    background: #F0F9FF;
    color: #0369A1;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.er-readme:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 165, 233, 0.18); }
.er-readme:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 3px; }
.er-readme.is-playing { background: #0284C7; border-color: #0284C7; color: #FFFFFF; }
.er-readme__icon { font-size: 1.15rem; line-height: 1; }

/* Little "speaking" bars while it plays (decorative; the label already says "Stop reading"). */
.er-readme__bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.er-readme__bars i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: currentColor;
    transform-origin: bottom;
    animation: er-readme-bar 0.9s ease-in-out infinite;
}
.er-readme__bars i:nth-child(2) { animation-delay: 0.15s; }
.er-readme__bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes er-readme-bar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

.er-step-start { min-width: 14rem; }

/* Big screens: picture and words side by side, so a picture screen fits without scrolling and the buttons sit
   right under it. */
@media (min-width: 1024px) {
    .er-stepper--page .er-lesson-step--media-text {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: center;
        gap: 2rem;
        text-align: left;
    }
    .er-stepper--page .er-lesson-step--media-text .er-lesson-step__words { align-items: flex-start; }
    .er-stepper--page .er-lesson-step--media-text .er-readme-row { justify-content: flex-start; }
    /* Sized from the space actually left (kid header, top row, buttons, tab bar = ~370px), so Back / Next stay on
       screen even on a short laptop; never smaller than a usable 240px. */
    .er-stepper--page .er-lesson-step--media-text .er-lesson-step__image { max-height: max(240px, min(calc(100svh - 370px), 600px)); }
}

@media (min-width: 900px) {
    .er-stepper--page .er-lesson-step__video { max-height: max(220px, calc(100svh - 380px)); }
}

/* Phones and tablets: round page-turn buttons on the left and right edges (like turning a page), so the picture
   and the words are never covered and the buttons are always in reach. The lesson gets side padding to match. */
@media (max-width: 899.98px) {
    /* The Learn page already sits inside two gutter containers (2 x 16px a side); this tops the clearance up so the
       words start just past the 52px buttons. */
    .er-stepper--page .er-lesson-step,
    .er-stepper--page .er-stepper__listen { padding-inline: 1.75rem; }
    .er-stepper--page .er-step-nav { margin: 0; }
    .er-stepper--page .er-step-nav__back,
    .er-stepper--page .er-step-nav__next {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 52px;
        height: 52px;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
    }
    .er-stepper--page .er-step-nav__back {
        left: max(6px, env(safe-area-inset-left, 0px));
        background: #FFFFFF !important;
        border: 2px solid #CBD5E1;
        color: #1E3A8A !important;
    }
    .er-stepper--page .er-step-nav__next { right: max(6px, env(safe-area-inset-right, 0px)); }
    .er-stepper--page .er-step-nav__back.mud-button-disabled { visibility: hidden; }
    .er-stepper--page .er-step-nav .mud-button-icon-start,
    .er-stepper--page .er-step-nav .mud-button-icon-end { margin: 0; }
    .er-stepper--page .er-step-nav .mud-button-icon-start > svg,
    .er-stepper--page .er-step-nav .mud-button-icon-end > svg { font-size: 1.6rem; }
    /* The words go visually; the aria-label ("Next screen" / "Previous screen") keeps the name. */
    .er-stepper--page .er-step-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .er-stepper__top { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 400px) {
    .er-stepper--page .er-lesson-step,
    .er-stepper--page .er-stepper__listen { padding-inline: 1.5rem; }
    .er-stepper--page .er-step-nav__back,
    .er-stepper--page .er-step-nav__next { width: 46px; height: 46px; }
    .er-readme { font-size: 0.95rem; padding: 0 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .er-readme { transition: none; }
    .er-readme:hover { transform: none; }
    .er-readme__bars i { animation: none; transform: scaleY(0.7); }
}

/* 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;
    min-height: 44px; /* a child's thumb target (was 30px) */
    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; }

/* The help ladder after a miss (2026-10-30): Robbie offers another go or help; nothing is shown until the child asks. */
.er-nudge {
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 2px solid #BAE6FD;
    border-radius: 20px;
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 85%);
    animation: er-step-enter 0.28s ease;
}
.er-nudge { scroll-margin-bottom: 170px; }
.er-nudge__row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
.er-nudge__row > :first-child { flex: none; }
.er-nudge__bubble {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: #0F172A;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.45;
}
.er-nudge__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.er-nudge__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    min-height: 52px;
    padding: 0 1.2rem;
    border: 2px solid #1E3A8A;
    border-radius: 14px;
    background: #FFFFFF;
    color: #1E3A8A;
    font: inherit; font-size: 1.08rem; font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.er-nudge__btn.is-primary {
    border-color: #F59E0B;
    background: #F59E0B;
    color: #1F1300;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.32);
}
.er-nudge__btn:hover:not([disabled]) { transform: translateY(-1px); }
.er-nudge__btn:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 3px; }
.er-nudge__btn[disabled] { opacity: 0.6; cursor: default; }
.er-nudge__btn--solo { margin-top: 0.75rem; }
.er-help { scroll-margin-top: 84px; scroll-margin-bottom: 170px; }
.er-help__none { margin: 0.75rem 0 0; font-weight: 600; color: #334155; }
@media (max-width: 520px) {
    .er-nudge { padding: 0.8rem; }
    .er-nudge__actions { flex-direction: column; }
    .er-nudge__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .er-nudge { animation: none; } }

.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: 1350; /* above the kid tab bar (1300), below MudBlazor dialogs/snackbars */
    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 {
    box-sizing: border-box; /* the max-height below includes the padding */
    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, #FFFFFF); /* never see-through, even before the theme loads */
    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,
.er-relearn__sheet > .er-stepper > .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 (kid, 2026-10-30 redesign): subject tabs, topic groups, picture cards ---- */
.er-kid-hero--compact { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.er-libk--maths { --subj: #2563EB; --subj-soft: #DBEAFE; --subj-2: #60A5FA; }
.er-libk--english { --subj: #DB2777; --subj-soft: #FCE7F3; --subj-2: #F472B6; }
.er-libk--vr { --subj: #059669; --subj-soft: #D1FAE5; --subj-2: #34D399; }
.er-libk--nvr { --subj: #D97706; --subj-soft: #FEF3C7; --subj-2: #FBBF24; }
.er-libk--wider { --subj: #0284C7; --subj-soft: #E0F2FE; --subj-2: #38BDF8; }
.er-libk--default { --subj: #475569; --subj-soft: #F1F5F9; --subj-2: #94A3B8; }

.er-libk__tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem 0 0.4rem; }
.er-libk__tab {
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 52px;
    padding: 0 1.05rem;
    border: 2px solid #E2E8F0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1E293B;
    font: inherit; font-size: 1.02rem; font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.er-libk__tab:hover { border-color: var(--subj-2); transform: translateY(-1px); }
.er-libk__tab:focus-visible { outline: 3px solid var(--subj); outline-offset: 2px; }
.er-libk__tab.is-on { border-color: var(--subj); background: var(--subj); color: #FFFFFF; box-shadow: 0 6px 14px color-mix(in srgb, var(--subj) 30%, transparent); }
.er-libk__tab-emoji { font-size: 1.3rem; line-height: 1; }
.er-libk__tab-count { min-width: 1.6rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--subj-soft); color: var(--subj); font-size: 0.82rem; text-align: center; }
.er-libk__tab.is-on .er-libk__tab-count { background: rgba(255, 255, 255, 0.25); color: #FFFFFF; }

.er-libk__summary { margin: 0.6rem 0 0; color: #475569; font-size: 1rem; }
.er-libk__summary strong { color: #1E3A8A; }

.er-libk__topic {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1.6rem 0 0.75rem;
    font-family: Poppins, 'Segoe UI', sans-serif;
    font-size: 1.2rem; font-weight: 700;
    color: #1E3A8A;
}
.er-libk__topic span { font-size: 1.4rem; }

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

.er-libk__card {
    display: flex; flex-direction: column;
    align-items: stretch; /* buttons centre their content by default: the cover must fill the card */
    padding: 0;
    overflow: hidden;
    text-align: left;
    border: 2px solid #E2E8F0;
    border-radius: 20px;
    background: #FFFFFF;
    font: inherit;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.er-libk__card:hover { transform: translateY(-4px); border-color: var(--subj-2); box-shadow: 0 14px 28px color-mix(in srgb, var(--subj) 18%, transparent); }
.er-libk__card:focus-visible { outline: 3px solid var(--subj); outline-offset: 3px; }

.er-libk__cover {
    position: relative;
    display: block;
    width: 100%; /* a drawn cover holds only an emoji: without this it shrinks to fit it inside the button */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--subj-soft);
}
.er-libk__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.er-libk__card:hover .er-libk__cover img { transform: scale(1.04); }
.er-libk__cover.is-drawn {
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.35) 0 18%, transparent 19%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.22) 0 24%, transparent 25%),
        linear-gradient(135deg, var(--subj-2) 0%, var(--subj) 100%);
}
.er-libk__cover-emoji { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.25)); transition: transform 0.2s ease; }
.er-libk__card:hover .er-libk__cover-emoji { transform: scale(1.1) rotate(-4deg); }

.er-libk__badge {
    position: absolute; top: 0.6rem; right: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1E3A8A;
    font-size: 0.8rem; font-weight: 800;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.er-libk__badge.is-practised { background: #DCFCE7; color: #166534; }
.er-libk__badge.is-star { background: #FEF3C7; color: #92400E; }

.er-libk__media { position: absolute; left: 0.6rem; bottom: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.er-libk__media span {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.68);
    color: #FFFFFF;
    font-size: 0.76rem; font-weight: 700;
}

.er-libk__body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; width: 100%; box-sizing: border-box; padding: 0.85rem 1rem 1rem; }
.er-libk__title { font-family: Poppins, 'Segoe UI', sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #0F172A; }
.er-libk__summary-line {
    font-size: 0.95rem; line-height: 1.45; color: #475569;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.er-libk__cta { margin-top: auto; padding-top: 0.35rem; font-weight: 800; color: var(--subj); }

@media (max-width: 520px) {
    .er-libk__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: none; }
    .er-libk__tab { flex: none; }
    .er-libk__grid { grid-template-columns: 1fr; gap: 0.7rem; }
    /* Phones: a compact row (picture tile left, words right) so a topic fits on one screen. */
    .er-libk__card { flex-direction: row; border-radius: 18px; }
    .er-libk__cover { width: 108px; flex: none; aspect-ratio: auto; min-height: 108px; }
    .er-libk__cover-emoji { font-size: 2.6rem; }
    .er-libk__media { display: none; }
    .er-libk__badge { top: auto; right: auto; left: 0.4rem; bottom: 0.4rem; font-size: 0.72rem; padding: 0.15rem 0.45rem; }
    .er-libk__body { padding: 0.7rem 0.85rem; min-width: 0; }
    .er-libk__title { font-size: 1.02rem; }
    .er-libk__summary-line { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .er-libk__card, .er-libk__tab, .er-libk__cover img, .er-libk__cover-emoji { transition: none; }
    .er-libk__card:hover, .er-libk__tab:hover, .er-libk__card:hover .er-libk__cover img, .er-libk__card:hover .er-libk__cover-emoji { 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; }


/* 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) ---- */
/* Room under the last row of content so the floating Ask Ellie button never sits over a table pager or button. */
body:has(.er-ellie) .mud-main-content { padding-bottom: 5.5rem; }
.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), inside the sign-in split screen (2026-10-30) ---- */
.er-auth-gate__note { margin: 0.65rem 0 0; text-align: center; font-size: 0.85rem; font-weight: 600; color: #047857; }
.er-auth-gate__more { margin: 0.9rem 0 0; text-align: center; font-size: 0.85rem; line-height: 1.5; color: #64748B; }
.er-auth-gate__more a { color: #1D4ED8; font-weight: 600; }

/* ---- 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%; min-height: 44px; 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; }
}


/* 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-phero { 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-phero__main { padding: 1.6rem 1.75rem 1.5rem; }
.er-phero__eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FDE68A; }
.er-phero__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-phero__sub { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.er-phero__sub .er-phero__link { color: #FDE68A; font-weight: 600; }
.er-phero__facts { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.er-phero__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-phero__actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.er-phero__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-phero__fine { font-size: .8rem; color: rgba(255, 255, 255, .75); margin: .6rem 0 0; }
.er-phero__form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.er-phero__form .er-phero__name { flex: 1 1 200px; min-width: 180px; }
.er-phero__form .mud-input-outlined .mud-input-outlined-border, .er-phero__form .mud-input-label { border-color: rgba(255, 255, 255, .6) !important; color: #fff !important; }
.er-phero__form .mud-input { color: #fff; }
.er-phero__form .er-year-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.er-phero__form .er-wiz__chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.er-phero__form .er-wiz__chip.is-on { background: #FDE68A; color: #1E3A8A; border-color: #FDE68A; }
.er-phero__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-phero__steps { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.er-phero__steps span { font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .22rem .6rem; border-radius: 999px; background: #EEF2F9; color: #64748B; }
.er-phero__steps span.is-done { background: #DCFCE7; color: #166534; }
.er-phero__steps span.is-now { background: #1E3A8A; color: #fff; }
.er-phero__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-phero__next-sub { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; color: var(--mud-palette-text-secondary); }
.er-phero__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-phero { grid-template-columns: 1fr; border-radius: 16px; }
    .er-phero__main { padding: 1.2rem 1.1rem 1.1rem; }
    .er-phero__title { font-size: 1.3rem; }
    .er-phero__actions .er-phero__cta.mud-button-root { width: 100%; }
    .er-phero__form .er-phero__cta.mud-button-root { width: 100%; }
    .er-phero__next { padding: 1.1rem 1.1rem 1.2rem; }
    .er-phero__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-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-main { padding: 0 0.5rem 1.5rem; }
    .er-auth-card { padding: 1.6rem 1.15rem; border-radius: 22px; }
    .er-auth-card::before { left: 1.4rem; right: 1.4rem; }
    .er-auth-title { font-size: 1.45rem; }
    .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; } }

/* ---- "Robbie helps you fix it": the mistake tutor (2026-10-18) ---- */
.er-tutor {
    margin-top: 0.75rem;
    padding: 1.1rem 1.15rem 0.9rem;
    border: 2px solid #BAE6FD;
    border-radius: 20px;
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 70%);
    box-shadow: 0 8px 22px rgba(14, 165, 233, 0.12);
    animation: er-step-enter 0.28s ease;
}
.er-tutor__top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.er-tutor__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: #E0F2FE; font-size: 1.2rem;
}
.er-tutor__by { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #0369A1; }
.er-tutor__headline {
    margin: 0.2rem 0 0.6rem;
    font-family: Poppins, 'Segoe UI', sans-serif;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 700;
    color: #0F172A;
}
.er-tutor .er-readme { margin-bottom: 0.4rem; }
.er-tutor__explain { font-size: 1.1rem; line-height: 1.55; color: #334155; }
.er-tutor__explain .er-lesson-line { margin: 0.25rem 0; }

.er-tutor__walk {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    margin-top: 0.85rem;
    border: 0;
    border-radius: 14px;
    background: #F59E0B;
    color: #1F1300;
    font: inherit; font-size: 1.1rem; font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.32);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.er-tutor__walk:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(245, 158, 11, 0.38); }
.er-tutor__walk:focus-visible, .er-tutor__chip:focus-visible, .er-tutor__thumb:focus-visible,
.er-tutor-check__option:focus-visible, .er-tutor-sheet__close:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 3px; }

.er-tutor__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.85rem; }
.er-tutor__ask-label { font-weight: 800; color: #0369A1; font-size: 0.95rem; }
.er-tutor__chip {
    min-height: 44px;
    padding: 0 0.95rem;
    border: 2px solid #CBD5E1;
    border-radius: 999px;
    background: #FFFFFF;
    color: #1E3A8A;
    font: inherit; font-size: 0.95rem; font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.er-tutor__chip:hover { border-color: #0EA5E9; }
.er-tutor__chip.is-open { background: #1E3A8A; border-color: #1E3A8A; color: #FFFFFF; }
.er-tutor__answer {
    margin-top: 0.6rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid #0EA5E9;
    border-radius: 12px;
    background: #FFFFFF;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #1E293B;
    animation: er-step-enter 0.2s ease;
}
.er-tutor__answer p { margin: 0; }

.er-tutor__vote { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.75rem; color: #64748B; font-size: 0.9rem; }
.er-tutor__thumb {
    width: 44px; height: 44px;
    border: 1px solid #E2E8F0; border-radius: 50%;
    background: #FFFFFF; font-size: 1.2rem; cursor: pointer;
}
.er-tutor__thumb:hover { background: #F1F5F9; }

/* "Robbie is on the way" (2026-10-30): the wait for brand-new help, made to feel like Robbie working. */
.er-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.er-robbie-wait {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem 0.9rem;
    border: 2px dashed #7DD3FC;
    border-radius: 20px;
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 85%);
    animation: er-step-enter 0.28s ease;
}
.er-robbie-wait__bubble {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.7rem 0.95rem;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.16);
    font-size: 1.08rem; font-weight: 700; color: #0F172A;
}
.er-robbie-wait__line { position: relative; animation: er-step-enter 0.3s ease; }
.er-robbie-wait__dots { display: inline-flex; gap: 4px; }
.er-robbie-wait__dots i { width: 8px; height: 8px; border-radius: 50%; background: #0EA5E9; animation: er-robbie-dot 1.1s ease-in-out infinite; }
.er-robbie-wait__dots i:nth-child(2) { animation-delay: 0.15s; background: #F59E0B; }
.er-robbie-wait__dots i:nth-child(3) { animation-delay: 0.3s; background: #22C55E; }
/* The road Robbie walks along: the striped bar at the bottom, Robbie on top of it. */
.er-robbie-wait__track { position: relative; height: 70px; margin-top: 0.6rem; }
.er-robbie-wait__walker {
    position: absolute; left: 0; bottom: 6px; width: 52px;
    animation: er-robbie-walk 5.2s ease-in-out infinite;
}
.er-robbie-wait__hop { display: inline-flex; animation: er-robbie-hop 0.65s ease-in-out infinite; }
.er-robbie-wait__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 999px; background: #E0F2FE; overflow: hidden; }
.er-robbie-wait__bar span {
    display: block; height: 100%; width: 100%;
    background: repeating-linear-gradient(45deg, #0EA5E9 0 10px, #38BDF8 10px 20px);
    background-size: 28px 28px;
    animation: er-robbie-road 0.9s linear infinite;
}
.er-robbie-wait__meanwhile { margin: 0.7rem 0 0; font-size: 0.95rem; font-weight: 600; color: #475569; }
@keyframes er-robbie-dot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-6px); opacity: 1; } }
/* There and back: walk right facing right, turn, walk left facing left, turn. */
@keyframes er-robbie-walk {
    0% { left: 0; transform: scaleX(1); }
    48% { left: calc(100% - 52px); transform: scaleX(1); }
    50% { left: calc(100% - 52px); transform: scaleX(-1); }
    98% { left: 0; transform: scaleX(-1); }
    100% { left: 0; transform: scaleX(1); }
}
@keyframes er-robbie-hop { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes er-robbie-road { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) {
    .er-robbie-wait, .er-robbie-wait__line, .er-robbie-wait__dots i, .er-robbie-wait__walker, .er-robbie-wait__hop, .er-robbie-wait__bar span { animation: none; }
    .er-robbie-wait__walker { left: calc(50% - 26px); }
}

.er-tutor__thinking {
    margin: 0.6rem 0 0;
    font-weight: 700;
    color: #0369A1;
    animation: er-tutor-pulse 1.4s ease-in-out infinite;
}
@keyframes er-tutor-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.er-tutor__working { margin-top: 0.6rem; }
.er-tutor__working > summary {
    cursor: pointer;
    min-height: 44px;
    display: flex; align-items: center;
    font-weight: 700;
    color: #475569;
}

/* Step-by-step sheet (reuses the re-learn overlay frame). The frame is a fixed-height column: the header (with ✕) and
   Robbie's voice bar stay at the top, Back / Next / Check stay at the bottom, and ONLY the middle (the step, the twin
   question and its working, the finish screen) scrolls, so nothing is ever cut off on a short phone or laptop screen. */
.er-tutor-sheet { max-width: 40rem; }
.er-tutor-sheet > .er-tutor-sheet__top,
.er-tutor-sheet > .er-voicebar,
.er-tutor-sheet > .er-step-dots,
.er-tutor-sheet > .er-step-nav { flex: none; }
.er-tutor-sheet > .er-tutor-step,
.er-tutor-sheet > .er-tutor-twin,
.er-tutor-sheet > .er-tutor-done {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -0.5rem; padding-right: 0.5rem; /* room for the scrollbar beside the text */
}
.er-tutor-sheet > .er-step-nav { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #E2E8F0; }
.er-tutor-sheet__top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.er-tutor-sheet__title { flex: 1; font-family: Poppins, 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.15rem; color: #0F172A; }
.er-tutor-sheet__close {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #F1F5F9; color: #0F172A; font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.er-tutor-step { animation: er-step-enter 0.25s ease; }
.er-tutor-step__count { margin: 0.4rem 0 0.3rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0369A1; }
.er-tutor-step__say { font-size: 1.25rem; line-height: 1.55; color: #0F172A; }
.er-tutor-step__say .er-lesson-line { margin: 0.25rem 0; }

.er-tutor-check {
    margin-top: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: #F5F3FF;
    border: 2px solid #DDD6FE;
}
.er-tutor-check__prompt { margin: 0 0 0.6rem; font-weight: 800; font-size: 1.1rem; color: #4C1D95; }
.er-tutor-check__options { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.er-tutor-check__option {
    flex: 1 1 8rem;
    min-height: 54px;
    padding: 0.5rem 0.9rem;
    border: 2px solid #C4B5FD;
    border-radius: 14px;
    background: #FFFFFF;
    color: #1E1B4B;
    font: inherit; font-size: 1.1rem; font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.er-tutor-check__option:hover:not(:disabled) { transform: translateY(-1px); border-color: #7C3AED; }
.er-tutor-check__option.is-right { background: #DCFCE7; border-color: #16A34A; color: #14532D; }
.er-tutor-check__option.is-wrong { background: #FFF1F2; border-color: #FDA4AF; color: #9F1239; animation: er-tutor-shake 0.32s ease; }
.er-tutor-check__option:disabled { cursor: default; }
@keyframes er-tutor-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.er-tutor-check__feedback { margin: 0.6rem 0 0; font-weight: 700; font-size: 1.02rem; }
.er-tutor-check__feedback.is-right { color: #15803D; }
.er-tutor-check__feedback.is-nudge { color: #6D28D9; }

.er-tutor-twin__stem { font-size: 1.2rem; line-height: 1.5; color: #0F172A; margin: 0.3rem 0 0.7rem; }
.er-tutor-twin__img { display: block; max-width: 100%; max-height: 40svh; margin: 0 auto 0.7rem; border-radius: 14px; }
.er-tutor-twin__options { display: grid; gap: 0.55rem; }
.er-tutor-twin__optimg { max-height: 64px; border-radius: 8px; }
.er-tutor-sheet .er-result { margin-top: 0.8rem; }

.er-tutor-done { text-align: center; padding: 0.5rem 0 0.25rem; }
.er-tutor-done__big { font-size: 3rem; margin: 0; }
.er-tutor-done .er-tutor__vote { justify-content: center; }

@media (max-width: 600px) {
    .er-tutor { padding: 0.95rem 0.9rem 0.8rem; border-radius: 18px; }
    .er-tutor__headline { font-size: 1.15rem; }
    .er-tutor-step__say { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
    .er-tutor, .er-tutor__answer, .er-tutor-step { animation: none; }
    .er-tutor__thinking { animation: none; }
    .er-tutor-check__option.is-wrong { animation: none; }
    .er-tutor__walk, .er-tutor-check__option { transition: none; }
}

/* ---- "Robbie talks me through it": the voice-guided walk-through (2026-10-28) ---- */
.er-tutor__walk.is-quiet {
    background: #FFFFFF; color: #92400E;
    border: 2px solid #FCD34D; box-shadow: none;
    min-height: 48px; font-size: 1rem;
}

.er-voicebar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: -0.2rem 0 0.8rem; padding: 0.5rem 0.6rem;
    border-radius: 14px; background: #F0F9FF; border: 1px solid #BAE6FD;
}
.er-voicebar__status {
    flex: 1 1 10rem; display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 2rem; font-weight: 700; color: #075985;
}
.er-voicebar__status .er-readme__bars { margin: 0; }
.er-voicebar__btn {
    min-height: 44px; padding: 0 0.9rem;
    border: 2px solid #7DD3FC; border-radius: 999px;
    background: #FFFFFF; color: #075985;
    font: inherit; font-weight: 800; cursor: pointer;
}
.er-voicebar__btn.is-primary { background: #0EA5E9; border-color: #0EA5E9; color: #FFFFFF; }
.er-voicebar__btn:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 3px; }

/* The line Robbie is reading lights up (follow-along). Colour AND a left bar, never colour alone. */
.er-tutor-step__say .is-speaking {
    background: #FEF9C3;
    box-shadow: -4px 0 0 #F59E0B;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .er-tutor-step__say .is-speaking { transition: none; }
}

/* ---- "While you wait" card on kid loading screens (2026-10-18) ---- */
.er-wait {
    max-width: 30rem;
    margin: -0.75rem auto 2rem;
    padding: 0 1rem;
    text-align: center;
}
.er-wait__card {
    padding: 1.25rem 1.25rem 1.1rem;
    border: 2px solid #FDE68A;
    border-radius: 22px;
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 75%);
    box-shadow: 0 10px 26px rgba(245, 158, 11, 0.14);
    animation: er-step-enter 0.28s ease;
}
.er-wait__chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    background: #FEF3C7; color: #92400E;
}
.er-wait__chip--riddle { background: #EDE9FE; color: #5B21B6; }
.er-wait__chip--word { background: #E0F2FE; color: #075985; }
.er-wait__chip--fact { background: #DCFCE7; color: #166534; }
.er-wait__text { margin: 0.8rem 0 0.2rem; font-size: 1.2rem; line-height: 1.5; font-weight: 700; color: #0F172A; }
.er-wait__word {
    margin: 0.7rem 0 0.1rem;
    font-family: Poppins, 'Segoe UI', sans-serif;
    font-size: 1.8rem; font-weight: 700; color: #1E3A8A;
}
.er-wait__extra { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.55; color: #334155; }
.er-wait__reveal {
    margin: 0.75rem 0 0;
    font-size: 1.15rem; font-weight: 800; color: #B45309;
    animation: er-step-enter 0.22s ease;
}
.er-wait__tell, .er-wait__next {
    min-height: 48px;
    padding: 0 1.2rem;
    border-radius: 999px;
    font: inherit; font-size: 1rem; font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.er-wait__tell { margin-top: 0.8rem; border: 0; background: #F59E0B; color: #1F1300; box-shadow: 0 6px 14px rgba(245, 158, 11, 0.3); }
.er-wait__next { margin-top: 0.9rem; border: 2px solid #CBD5E1; background: #FFFFFF; color: #1E3A8A; }
.er-wait__tell:hover, .er-wait__next:hover { transform: translateY(-1px); }
.er-wait__tell:focus-visible, .er-wait__next:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .er-wait__card, .er-wait__reveal { animation: none; }
    .er-wait__tell, .er-wait__next { transition: none; }
}

/* ---- Robbie, the animated helper (RobbieBot, 2026-10-28) ---- */
.robbie { display: inline-block; width: var(--robbie-size, 72px); height: calc(var(--robbie-size, 72px) * 150 / 160); flex: none; line-height: 0; }
.robbie svg { width: 100%; height: 100%; overflow: visible; }
.robbie svg * { transform-box: fill-box; }
.robbie__all { transform-origin: 50% 100%; }
.robbie__mouth, .robbie__tongue, .robbie__waves, .robbie__stars { opacity: 0; }
.robbie__mouth { transform-origin: center; }
.robbie__eyes { transform-origin: center; animation: robbie-blink 4.5s infinite; }
.robbie__antenna { transform-origin: center; }
.robbie__arm-right, .robbie__arm-left { transform-origin: 50% 12%; }

/* idle: a gentle float + blink */
.robbie--idle .robbie__all { animation: robbie-float 3.2s ease-in-out infinite; }
.robbie--wave .robbie__arm-right { animation: robbie-wave 2.4s ease-in-out infinite; }

/* talking: mouth opens and closes, sound waves pulse, antenna glows */
.robbie--talking .robbie__smile { opacity: 0; }
.robbie--talking .robbie__mouth, .robbie--talking .robbie__tongue { opacity: 1; }
.robbie--talking .robbie__mouth { animation: robbie-talk 0.32s ease-in-out infinite alternate; }
.robbie--talking .robbie__waves { opacity: 1; }
.robbie--talking .robbie__wave1 { animation: robbie-waves 1s ease-in-out infinite; }
.robbie--talking .robbie__wave2 { animation: robbie-waves 1s ease-in-out 0.25s infinite; }
.robbie--talking .robbie__antenna { animation: robbie-glow 0.8s ease-in-out infinite alternate; }

/* listening: head tilts, ears glow, eyes look at the answers */
.robbie--listening .robbie__head { transform-origin: 50% 100%; transform: rotate(-7deg); }
.robbie--listening .robbie__ear { fill: #FDE68A; animation: robbie-ears 1.2s ease-in-out infinite alternate; }
.robbie--listening .robbie__pupil { transform: translate(-2px, 3px); }

/* cheering: a happy hop with both arms up */
.robbie--cheering .robbie__all { animation: robbie-hop 0.6s ease-out 3; }
.robbie--cheering .robbie__arm-right { transform: rotate(-105deg); }
.robbie--cheering .robbie__arm-left { transform: rotate(105deg); }
.robbie--cheering .robbie__stars { opacity: 1; }
.robbie--cheering .robbie__star1, .robbie--cheering .robbie__star2 { transform-origin: center; animation: robbie-star 0.9s ease-out both; }
.robbie--cheering .robbie__star2 { animation-delay: 0.15s; }
.robbie--cheering .robbie__smile { d: path("M56 74 Q70 90 84 74"); }

@keyframes robbie-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes robbie-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes robbie-wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-112deg); } 30% { transform: rotate(-78deg); } }
@keyframes robbie-star { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes robbie-talk { from { transform: scaleY(0.35); } to { transform: scaleY(1.15); } }
@keyframes robbie-waves { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes robbie-glow { from { filter: none; } to { filter: drop-shadow(0 0 5px #FBBF24); } }
@keyframes robbie-ears { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes robbie-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
    .robbie *, .robbie__all, .robbie__eyes { animation: none !important; }
    .robbie--talking .robbie__mouth { transform: scaleY(0.9); }
    .robbie--wave .robbie__arm-right { transform: rotate(-100deg); }
}

/* "Robbie can talk!" invitation on the mistake card: Robbie + his speech bubble, then a full-width button */
.er-robbie-cta {
    position: relative;
    display: flex; flex-direction: column; gap: 0.75rem;
    margin-top: 0.9rem; padding: 0.85rem 0.9rem 0.95rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0B2566 0%, #1E3A8A 55%, #0369A1 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(11, 37, 102, 0.28);
    overflow: hidden;
}
.er-robbie-cta::after { /* soft sparkle field */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 88% 12%, rgba(253, 230, 138, 0.26) 0 16%, transparent 17%),
                radial-gradient(circle at 8% 92%, rgba(125, 211, 252, 0.18) 0 14%, transparent 15%);
}
.er-robbie-cta > * { position: relative; z-index: 1; }
.er-robbie-cta__row { display: flex; align-items: flex-end; gap: 0.7rem; }
.er-robbie-cta__speech { flex: 1; min-width: 0; padding-bottom: 0.35rem; }
.er-robbie-cta__pill {
    display: inline-block; margin-bottom: 0.4rem; padding: 0.15rem 0.6rem;
    border-radius: 999px; background: #FBBF24; color: #1F1300;
    font-size: 0.76rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase;
}
.er-robbie-cta__bubble {
    position: relative;
    margin: 0; padding: 0.65rem 0.85rem;
    border-radius: 16px 16px 16px 4px;
    background: #FFFFFF; color: #0F172A;
    font-size: 1.05rem; line-height: 1.4; font-weight: 600;
}
.er-robbie-cta__bubble::before { /* the tail points at Robbie */
    content: ""; position: absolute; left: -9px; bottom: 0;
    border-style: solid; border-width: 0 0 12px 12px;
    border-color: transparent transparent #FFFFFF transparent;
}
.er-robbie-cta__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-height: 56px; padding: 0 1rem;
    border: 0; border-radius: 16px;
    background: #FBBF24; color: #1F1300;
    font: inherit; font-size: 1.15rem; font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 0 #B45309, 0 10px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.er-robbie-cta__btn:hover { transform: translateY(-1px); }
.er-robbie-cta__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #B45309, 0 4px 10px rgba(0, 0, 0, 0.25); }
.er-robbie-cta__btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.er-robbie-cta.is-locked { background: linear-gradient(135deg, #334155 0%, #1E3A8A 100%); }
.er-robbie-cta.is-locked .er-robbie-cta__pill { background: rgba(255, 255, 255, 0.16); color: #FDE68A; }
.er-robbie-cta.is-locked .er-robbie-cta__bubble { font-weight: 500; }

.er-tutor__top .robbie { margin: -0.4rem 0 -0.2rem -0.2rem; }
.er-tutor-sheet__top .robbie { margin: -0.5rem 0 -0.25rem; }

@media (max-width: 420px) {
    .er-robbie-cta { padding: 0.8rem 0.75rem 0.9rem; }
    .er-robbie-cta__row { gap: 0.5rem; }
    .er-robbie-cta .robbie { --robbie-size: 74px !important; }
    .er-robbie-cta__bubble { font-size: 1rem; }
    .er-robbie-cta__btn { font-size: 1.04rem; gap: 0.4rem; padding: 0 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .er-robbie-cta__btn { transition: none; }
}

/* ---- Child overview (/child/{id}) redesign, 2026-10-28 ----
   Three hero answers (readiness, this week, best next step), then strengths + focus, then the tools as a compact
   grouped list. Theme variables carry light/dark; accents are the Academic Trust navy / sky / gold. */

.er-ov-card {
    min-width: 0;
    padding: 1.15rem 1.2rem 1.1rem;
    border-radius: 18px;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}
.er-ov-card__label {
    margin: 0 0 0.7rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.er-ov-card__title {
    margin: 0 0 0.9rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.08rem; font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.er-ov-muted { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--mud-palette-text-secondary); display: flex; align-items: center; gap: 0.25rem; }
.er-ov-note { margin: 0.8rem 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.er-ov-empty { margin: 0.2rem 0 0.6rem; font-size: 0.92rem; line-height: 1.5; color: var(--mud-palette-text-secondary); }
.er-ov-link {
    display: inline-flex; align-items: center; gap: 0.1rem; min-height: 44px; margin-top: 0.35rem;
    font-size: 0.88rem; font-weight: 600; color: var(--mud-palette-primary, #1E3A8A); text-decoration: none;
}
.er-ov-link:hover { text-decoration: underline; }
.er-ov-link:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; border-radius: 6px; }

.er-ov-delta { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0.25rem 0 0; font-size: 0.82rem; font-weight: 700; }
.er-ov-delta.is-up { color: #047857; }
.er-ov-delta.is-down { color: #B91C1C; }
.mud-theme-dark .er-ov-delta.is-up { color: #6EE7B7; }
.mud-theme-dark .er-ov-delta.is-down { color: #FCA5A5; }

/* Hero row */
.er-ov-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.er-ov-ready { display: flex; align-items: center; gap: 1rem; }
.er-ov-ready__band { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--mud-palette-text-primary); }

.er-ov-big {
    margin: 0 0 0.6rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 2rem; line-height: 1; font-weight: 700;
    color: var(--mud-palette-text-primary);
}
.er-ov-big span { font-size: 0.95rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.er-ov-progress {
    --bar: #059669;
    height: 10px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--bar) 14%, transparent);
}
.er-ov-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--bar); transition: width 0.6s ease; }
.er-ov-progress--thin { height: 6px; margin: 0.3rem 0 0.15rem; }
.er-ov-progress--ontrack { --bar: #059669; }
.er-ov-progress--practice { --bar: #F59E0B; }
.er-ov-progress--covering { --bar: #0EA5E9; }
.er-ov-progress--notstarted { --bar: #94A3B8; }
.er-ov-facts {
    display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.75rem 0 0; padding: 0; list-style: none;
    font-size: 0.88rem; color: var(--mud-palette-text-secondary);
}
.er-ov-facts strong { color: var(--mud-palette-text-primary); }
.er-ov-facts .er-ov-delta { margin: 0 0 0 0.2rem; }
.er-ov-weeks { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 0.9rem; }
.er-ov-weeks > span {
    flex: 1; min-height: 3px; border-radius: 4px 4px 2px 2px;
    background: color-mix(in srgb, #1E3A8A 22%, transparent);
}
.er-ov-weeks > span.is-now { background: #1E3A8A; }
.mud-theme-dark .er-ov-weeks > span { background: color-mix(in srgb, #93C5FD 30%, transparent); }
.mud-theme-dark .er-ov-weeks > span.is-now { background: #93C5FD; }

.er-ov-card--next {
    display: flex; flex-direction: column;
    background: linear-gradient(160deg, #0B2566 0%, #1E3A8A 60%, #1D4ED8 100%);
    border-color: transparent; color: #FFFFFF;
    box-shadow: 0 14px 30px rgba(30, 58, 138, 0.28);
}
.er-ov-card--next .er-ov-card__label { color: #BFDBFE; }
.er-ov-card--next .er-ov-muted { color: #BFDBFE; margin-top: auto; padding-top: 0.6rem; }
.er-ov-next__title { margin: 0 0 0.4rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.2rem; line-height: 1.3; font-weight: 700; }
.er-ov-next__why { margin: 0; font-size: 0.92rem; line-height: 1.5; color: #DBEAFE; }
.er-ov-card--next .er-ov-next__cta.mud-button-root {
    margin-top: 0.8rem; min-height: 48px; border-radius: 14px;
    background: #FBBF24; color: #1F1300; font-weight: 800; text-transform: none; box-shadow: 0 4px 0 #B45309;
}
.er-ov-card--next .er-ov-next__cta.mud-button-root:hover { background: #FCD34D; }

/* Strengths + focus */
.er-ov-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.er-ov-subjects, .er-ov-focus { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.95rem; }
.er-ov-subjects__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.er-ov-subjects__name { font-weight: 600; color: var(--mud-palette-text-primary); }
.er-ov-subjects .is-untested { opacity: 0.7; }
.er-ov-chip { padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.er-ov-chip--ontrack { background: #D1FAE5; color: #065F46; }
.er-ov-chip--practice { background: #FEF3C7; color: #92400E; }
.er-ov-chip--covering { background: #E0F2FE; color: #075985; }
.er-ov-chip--notstarted { background: #F1F5F9; color: #475569; }
.er-ov-focus > li { display: flex; align-items: center; gap: 0.75rem; }
.er-ov-focus__txt { flex: 1; min-width: 0; }
.er-ov-focus__name { font-weight: 600; color: var(--mud-palette-text-primary); }

/* What's changed (per-skill before vs since) */
.er-chg { margin-bottom: 1rem; }
.er-chg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.er-chg__period { max-width: 12rem; }
.er-chg__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 0.25rem 0 0.5rem; }
.er-chg__sub { margin: 0 0 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-chg__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.er-chg__name { font-weight: 600; color: var(--mud-palette-text-primary); }
.er-chg__meta { display: block; font-size: 0.84rem; color: var(--mud-palette-text-secondary); }
.er-chg__all { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.er-chg__subject { margin: 0.9rem 0 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-chg__row {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto; gap: 0.25rem 0.9rem; align-items: center;
    padding: 0.55rem 0; border-top: 1px solid var(--mud-palette-lines-default, #E2E8F0); font-size: 0.86rem;
}
.er-chg__then, .er-chg__now { color: var(--mud-palette-text-secondary); }
@media (max-width: 720px) {
    .er-chg__lists { grid-template-columns: minmax(0, 1fr); }
    .er-chg__row { grid-template-columns: minmax(0, 1fr) auto; }
    .er-chg__then, .er-chg__now { grid-column: 1 / -1; }
    .er-chg__row .er-ov-chip { grid-row: 1; grid-column: 2; }
}

/* Outside test results (typed-in score sheets) */
.er-xr-hub { margin-bottom: 1rem; }
.er-xr-list { margin-bottom: 1.5rem; }
.er-xr-child { margin: 1rem 0 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-xr-card {
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0.9rem;
    background: var(--mud-palette-surface, #FFFFFF);
}
.er-xr-hub .er-xr-card { border: none; padding: 0; margin-bottom: 0.6rem; }
.er-xr-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.er-xr-card__title { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-xr-card__meta { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--mud-palette-text-secondary); }
.er-xr-card__note { margin: 0.8rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.er-xr-secs { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.85rem; }
.er-xr-sec.is-overall { padding-top: 0.75rem; border-top: 1px solid var(--mud-palette-lines-default, #E2E8F0); }
.er-xr-sec__top { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.er-xr-sec__name { font-weight: 600; color: var(--mud-palette-text-primary); }
.er-xr-sec__score { font-size: 0.88rem; color: var(--mud-palette-text-secondary); }
.er-xr-sec__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-xr-bar { position: relative; height: 8px; border-radius: 999px; background: #E2E8F0; }
.er-xr-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #10B981; transition: width 0.4s ease; }
.er-xr-bar--priority .er-xr-bar__fill { background: #F59E0B; }
.er-xr-bar__median { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #1E3A8A; border-radius: 1px; }
.er-xr-delta.is-up { color: #047857; font-weight: 600; }
.er-xr-delta.is-down { color: #B45309; font-weight: 600; }
.er-xr-form { max-width: 980px; }
.er-xr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.25rem 1rem; }
.er-xr-sub { margin: 1.4rem 0 0.2rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-xr-rows { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.er-xr-row {
    display: grid; grid-template-columns: minmax(8rem, 1.6fr) repeat(3, minmax(4.5rem, 1fr)) minmax(7.5rem, 1.2fr) minmax(5.5rem, 1fr) auto;
    gap: 0 0.75rem; align-items: center; padding: 0.35rem 0.6rem; border-radius: 12px; background: var(--mud-palette-background-gray, #F8FAFC);
}
.er-xr-row__pos { display: flex; align-items: center; gap: 0.25rem; }
.er-xr-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; min-width: 6.5rem; }
.er-xr-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; }
.er-xr-errors { margin: 0; padding-left: 1.1rem; }
.er-xr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) { .er-xr-bar__fill { transition: none; } }
@media (max-width: 900px) {
    .er-xr-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.6rem 0.75rem; }
    .er-xr-row__label, .er-xr-row__end { grid-column: 1 / -1; }
    .er-xr-row__end { justify-content: space-between; }
}
.mud-theme-dark .er-xr-bar { background: rgba(148, 163, 184, 0.25); }
.mud-theme-dark .er-xr-bar__median { background: #BFDBFE; }
.mud-theme-dark .er-xr-delta.is-up { color: #6EE7B7; }
.mud-theme-dark .er-xr-delta.is-down { color: #FCD34D; }

/* Exam-practice reading: calm soft timer (never red, never locks) */
.er-softtime { display: flex; flex-direction: column; gap: 0.3rem; margin: -0.5rem 0 1rem; }
.er-softtime__track { position: relative; height: 10px; border-radius: 999px; background: #E0F2FE; margin-right: 1.4rem; }
.er-softtime__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #38BDF8; transition: width 1s linear; }
.er-softtime__robbie { position: absolute; right: -1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.15rem; }
.er-softtime__msg { font-size: 0.92rem; color: var(--mud-palette-text-secondary); }
.er-softtime.is-over .er-softtime__fill { background: #A78BFA; }
.er-read-actions { min-width: 9.5rem; }
.er-rp { margin: 0.6rem 0 0; padding: 0; list-style: none; }
.er-rp__row {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 0.2rem 0.9rem; align-items: center;
    padding: 0.55rem 0; border-top: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}
@media (max-width: 720px) { .er-rp__row { grid-template-columns: minmax(0, 1fr); } }
.er-mw { margin-bottom: 1rem; }
.er-dict__how { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.6; color: var(--mud-palette-text-secondary); }
.er-dict__words { margin: 0; padding-left: 1.6rem; display: grid; gap: 0.75rem; }
.er-dict__words > li { padding-left: 0.25rem; }
.er-dict__word { display: block; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-dict__sentence { display: block; color: var(--mud-palette-text-secondary); font-style: italic; }
@media print {
    .er-dict { border: none; box-shadow: none; }
    .er-dict__word { font-size: 14pt; }
}
.er-mw__list { margin: 0.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.1rem; }
.er-mw__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.5rem 0; border-top: 1px solid var(--mud-palette-lines-default, #E2E8F0); }
@media (prefers-reduced-motion: reduce) { .er-softtime__fill { transition: none; } }
.mud-theme-dark .er-softtime__track { background: rgba(56, 189, 248, 0.18); }

/* Tools */
.er-ov-tools { margin: 0.5rem 0 1.25rem; }
.er-ov-tools__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.er-ov-tools__heading {
    margin: 0 0 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.er-ov-tools__group { min-width: 0; }
.er-ov-tools__group ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
.er-ov-tool {
    --acc: #0EA5E9;
    display: flex; align-items: center; gap: 0.7rem; width: 100%; min-width: 0; min-height: 56px;
    padding: 0.55rem 0.7rem; border-radius: 14px; text-align: left; cursor: pointer;
    background: var(--mud-palette-surface, #FFFFFF); color: inherit; font: inherit;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.er-ov-tool--violet { --acc: #7C3AED; }
.er-ov-tool--emerald { --acc: #059669; }
.er-ov-tool:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07); }
.er-ov-tool:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.er-ov-tool__ico {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc);
}
.er-ov-tool__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.er-ov-tool__name { font-weight: 600; font-size: 0.93rem; color: var(--mud-palette-text-primary); }
.er-ov-tool__desc { font-size: 0.8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-ov-tool__go { color: var(--mud-palette-text-secondary); flex: none; }
.mud-theme-dark .er-ov-tool--sky { --acc: #60CDF7; }
.mud-theme-dark .er-ov-tool--violet { --acc: #B49BF5; }
.mud-theme-dark .er-ov-tool--emerald { --acc: #5EC8A0; }

@media (max-width: 1100px) {
    .er-ov-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .er-ov-card--next { grid-column: 1 / -1; }
    .er-ov-tools__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .er-ov-hero, .er-ov-pair, .er-ov-tools__groups { grid-template-columns: minmax(0, 1fr); }
    .er-ov-card--next { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .er-ov-progress > span, .er-ov-tool { transition: none; }
    .er-ov-tool:hover { transform: none; }
}

/* ---- Shared parent-side bits (2026-10-28): week-on-week change + sparkline ---- */
.er-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.15rem; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.er-delta .mud-icon-root { font-size: 1rem; }
.er-delta.is-up { color: #047857; }
.er-delta.is-down { color: #B91C1C; }
.er-delta.is-flat { color: var(--mud-palette-text-secondary); font-weight: 600; }
.er-delta__vs { margin-left: 0.25rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.mud-theme-dark .er-delta.is-up { color: #6EE7B7; }
.mud-theme-dark .er-delta.is-down { color: #FCA5A5; }
.er-spark { display: block; overflow: visible; }
.er-spark__line { fill: none; stroke: #2563EB; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.er-spark__area { fill: color-mix(in srgb, #2563EB 12%, transparent); stroke: none; }
.er-spark__dot { fill: #2563EB; stroke: var(--mud-palette-surface, #FFFFFF); stroke-width: 2; }
.mud-theme-dark .er-spark__line { stroke: #93C5FD; }
.mud-theme-dark .er-spark__dot { fill: #93C5FD; }
.mud-theme-dark .er-spark__area { fill: color-mix(in srgb, #93C5FD 14%, transparent); }

/* ---- Weekly report (/reports/{id}) redesign, 2026-10-28 ---- */
/* ---- Account settings pages (2026-10-30): plain header, settings left, "how this works" panel right ---- */
.er-settings { max-width: 1040px; margin: 0 auto; }
.er-settings__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.er-settings__grid.is-single { grid-template-columns: minmax(0, 1fr); }
.er-settings__main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.er-settings-card { padding: 1.4rem 1.5rem 1.3rem; }
.er-settings-card__title { margin: 0 0 0.75rem; font-family: Poppins, 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 600; color: #0F172A; }
.er-settings-card__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.er-settings-card__hint { margin: 0.45rem 0 0; font-size: 0.85rem; color: #64748B; }
.er-settings-card__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #E2E8F0; }
.er-settings-fixed {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E3A8A;
}
.er-settings-empty { display: flex; gap: 1rem; align-items: flex-start; }
.er-settings-empty__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: #EEF2FF; color: #1E3A8A; }
.er-settings-fixed__value { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: #0F172A; }
.er-settings-fixed .er-ov-chip { background: #EEF2FF; color: #3730A3; }

.er-settings__aside { position: sticky; top: 1rem; }
.er-settings-note {
    padding: 1.2rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #F0F5FF 0%, #FFFFFF 100%);
    border: 1px solid #DBE4FF;
}
.er-settings-note__title { margin: 0 0 0.85rem; font-family: Poppins, 'Segoe UI', sans-serif; font-size: 0.98rem; font-weight: 600; color: #1E3A8A; }
.er-settings-note__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.er-settings-note__list li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; color: #475569; }
.er-settings-note__list strong { display: block; color: #0F172A; font-weight: 600; }
.er-settings-note__list a { color: #1D4ED8; font-weight: 600; }
.er-goals-why { height: 100%; }
.er-settings-note__ico {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: #FFFFFF; color: #1E3A8A;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
@media (max-width: 900px) {
    .er-settings__grid { grid-template-columns: minmax(0, 1fr); }
    .er-settings__aside { position: static; }
}
@media (max-width: 560px) {

    .er-settings-card { padding: 1.1rem 1rem; }
    .er-settings-card__row { grid-template-columns: minmax(0, 1fr); }
    .er-settings-card__actions .mud-button-root { width: 100%; }
}

.er-wr-head { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.er-wr-head > .mud-icon-button { margin: 0.1rem 0 0 -0.5rem; }
.er-wr-head__id { flex: 1 1 18rem; min-width: 0; }
.er-wr-head__title {
    margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.75rem; line-height: 1.2; font-weight: 700;
    color: var(--mud-palette-text-primary); letter-spacing: -0.01em;
}
.er-wr-head__sub { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--mud-palette-text-secondary); }
.er-wr-head__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.er-wr-weeks {
    display: inline-flex; align-items: center; gap: 0.15rem; margin: 0 0 1rem;
    padding: 0.2rem; border-radius: 999px;
    background: var(--mud-palette-surface, #FFFFFF); border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}
.er-wr-weeks__label {
    display: inline-flex; align-items: center; gap: 0.2rem; min-height: 40px; padding: 0 0.8rem;
    border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--mud-palette-text-primary);
}
.er-wr-weeks__label:hover { background: color-mix(in srgb, #1E3A8A 7%, transparent); }
.er-wr-weeks__label:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
.er-wr-printdate { display: none; }
/* Phones: small header/card action buttons still need a thumb-sized target (WCAG 2.5.8; ~30px before). */
@media (max-width: 640px) {
    .er-wr-head__actions .mud-button-root,
    .mud-main-content .mud-button-root[class*="-size-small"] { min-height: 40px; }
}
/* Child Mode (its bottom tab bar is the marker): children's taps get 44px at every width (Start, Try again, Pick…). */
body:has(.er-tabbar) .mud-main-content .mud-button-root[class*="-size-small"] { min-height: 44px; }
/* Readiness school/standard picker: a long school name must shrink to the screen, not run off it (was 399px at 375px). */
.er-rd-picker > .mud-select { flex: 1 1 280px; min-width: 0; max-width: 100%; }
.er-wr-stale { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; padding: 0.7rem 0.95rem; border-radius: 12px; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: 0.9rem; line-height: 1.5; }
.er-wr-stale .mud-icon-root { flex: none; margin-top: 0.1rem; }

.er-wr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.er-wr-stat {
    min-width: 0; display: flex; flex-direction: column; gap: 0.25rem;
    padding: 1rem 1.1rem; border-radius: 18px;
    background: var(--mud-palette-surface, #FFFFFF); border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}
.er-wr-stat__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-wr-stat__value { font-family: Poppins, "Segoe UI", sans-serif; font-size: 2rem; line-height: 1.1; font-weight: 700; color: var(--mud-palette-text-primary); }
.er-wr-stat__value small { font-size: 0.95rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.er-wr-stat__hint { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-wr-stat .er-spark { margin-top: auto; padding-top: 0.4rem; }
.er-wr-badge { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 700; color: #B45309; }
.mud-theme-dark .er-wr-badge { color: #FCD34D; }

.er-wr-band {
    --band: #F59E0B;
    display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding: 0.85rem 1.1rem; border-radius: 16px;
    background: color-mix(in srgb, var(--band) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--band) 30%, transparent);
}
.er-wr-band--ontrack { --band: #0EA5E9; --band-chip: #0369A1; }
.er-wr-band--strong { --band: #2563EB; --band-chip: #1D4ED8; }
.er-wr-band--ready { --band: #059669; --band-chip: #047857; }
.er-wr-band__chip {
    padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap;
    background: var(--band-chip, var(--band)); color: #FFFFFF; font-weight: 800; font-size: 0.85rem;
}
.er-wr-band--developing .er-wr-band__chip { color: #1F1300; } /* amber fill: dark text keeps AA */
.er-wr-band__text { flex: 1 1 18rem; margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--mud-palette-text-primary); }
.er-wr-band__text a { margin-left: 0.25rem; font-weight: 600; color: var(--mud-palette-primary, #1E3A8A); }

.er-wr-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.er-wr-main, .er-wr-side { display: grid; gap: 1rem; min-width: 0; }

.er-wr-note__head { display: flex; align-items: center; gap: 0.55rem; }
.er-wr-note__head .er-ov-card__title { margin: 0; }
.er-wr-note__ico {
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, #7C3AED 14%, transparent); color: #7C3AED;
}
.er-wr-note__text {
    margin: 0.85rem 0 0.4rem; padding: 0.2rem 0 0.2rem 1rem;
    border-left: 4px solid color-mix(in srgb, #7C3AED 45%, transparent);
    font-size: 1.02rem; line-height: 1.65; color: var(--mud-palette-text-primary);
}

.er-wr-recs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.er-wr-rec {
    --rec: #F59E0B; --rec-text: #B45309;
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 0.9rem; border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}
.er-wr-rec--misconception { --rec: #DC2626; --rec-text: #B91C1C; }
.er-wr-rec--fragile { --rec: #0EA5E9; --rec-text: #0369A1; }
.er-wr-rec--habit { --rec: #059669; --rec-text: #047857; }
.er-wr-rec__ico {
    width: 36px; height: 36px; flex: none; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--rec) 14%, transparent); color: var(--rec);
}
.er-wr-rec__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.er-wr-rec__kind { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rec-text, var(--rec)); }
.er-wr-rec__title { font-weight: 700; color: var(--mud-palette-text-primary); }
.er-wr-rec__detail { font-size: 0.88rem; line-height: 1.45; color: var(--mud-palette-text-secondary); }
.mud-theme-dark .er-wr-rec { --rec-text: #FCD34D; }
.mud-theme-dark .er-wr-rec--misconception { --rec: #F87171; --rec-text: #FCA5A5; }
.mud-theme-dark .er-wr-rec--fragile { --rec-text: #7DD3FC; }
.mud-theme-dark .er-wr-rec--habit { --rec-text: #6EE7B7; }

.er-wr-conf__intro { margin-top: -0.5rem; margin-bottom: 0.8rem; }
.er-wr-conf { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 0.45rem; align-items: stretch; }
.er-wr-conf__axis { align-self: end; text-align: center; font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-secondary); }
.er-wr-conf__axis--row { align-self: center; text-align: right; padding-right: 0.2rem; }
.er-wr-conf__cell {
    --c: #059669;
    display: flex; flex-direction: column; gap: 0.05rem; padding: 0.7rem 0.75rem; border-radius: 14px;
    background: color-mix(in srgb, var(--c) 11%, transparent); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.er-wr-conf__cell--misconception { --c: #DC2626; }
.er-wr-conf__cell--fragile { --c: #F59E0B; }
.er-wr-conf__cell--gap { --c: #64748B; }
.er-wr-conf__count { font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--mud-palette-text-primary); }
.er-wr-conf__pct { font-size: 0.78rem; font-weight: 700; color: var(--mud-palette-text-secondary); }
.er-wr-conf__label { font-size: 0.82rem; line-height: 1.3; color: var(--mud-palette-text-primary); }

.er-wr-empty { text-align: center; padding: 2.2rem 1.2rem; }
.er-wr-empty__ico { font-size: 2.6rem !important; color: #2563EB; margin-bottom: 0.4rem; }

@media (max-width: 1100px) {
    .er-wr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .er-wr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .er-wr-head__title { font-size: 1.45rem; }
    .er-wr-stats { gap: 0.6rem; }
    .er-wr-stat { padding: 0.8rem 0.85rem; }
    .er-wr-stat__value { font-size: 1.6rem; }
    .er-wr-rec { flex-wrap: wrap; }
    .er-wr-rec .mud-button-root { margin-left: calc(36px + 0.8rem); }
}

/* Printing the report: a clean page, no chrome. */
@media print {
    .er-wr-printdate { display: block; margin: 0 0 0.8rem; font-weight: 700; }
    .er-wr-stat, .er-ov-card, .er-wr-band { box-shadow: none !important; break-inside: avoid; }
    .er-wr-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---- Parent nav (2026-10-28 redesign): section labels, children as avatar rows, their pages nested while open ---- */
.mud-drawer .mud-navmenu .mud-nav-link { min-height: 42px; }
.er-nav-label {
    margin: 1rem 0.75rem 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mud-palette-text-secondary); opacity: 0.85;
}
.er-nav-child { margin: 2px 0; border-radius: 12px; }
.er-nav-child.is-open { background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent); padding-bottom: 0.3rem; }
.er-nav-child__row {
    display: flex; align-items: center; gap: 0.7rem; min-height: 46px; padding: 0.35rem 0.6rem;
    border-radius: 12px; color: var(--mud-palette-text-primary); text-decoration: none; font-weight: 600;
    transition: background-color 0.14s ease;
}
.er-nav-child__row:hover { background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
.er-nav-child__row:focus-visible { outline: 3px solid var(--mud-palette-secondary); outline-offset: -3px; }
.er-nav-child.is-open .er-nav-child__row { color: var(--mud-palette-primary); }
.er-nav-child__avatar {
    --av: #1E3A8A;
    width: 30px; height: 30px; flex: none; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--av); color: #FFFFFF; font-family: Poppins, "Segoe UI", sans-serif; font-size: 0.85rem; font-weight: 700;
}
.er-nav-child__avatar--sky { --av: #0284C7; }
.er-nav-child__avatar--violet { --av: #7C3AED; }
.er-nav-child__avatar--emerald { --av: #047857; }
.er-nav-child__avatar--amber { --av: #B45309; }
.er-nav-child__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.er-nav-child__pages { margin-left: 1.15rem; padding-left: 0.6rem; border-left: 2px solid color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
.er-nav-child__pages .mud-nav-link { min-height: 36px; font-size: 0.9rem; }
.er-nav-child__pages .mud-nav-link .mud-icon-root { font-size: 1.05rem; }
/* "Account" reads as a normal item that opens, not a shouting section header. */
.mud-drawer .mud-navmenu .er-nav-plaingroup > .mud-nav-link {
    font-size: inherit; font-weight: 500; text-transform: none; letter-spacing: normal;
    color: var(--mud-palette-text-primary); min-height: 42px;
}
.mud-drawer .mud-navmenu .er-nav-plaingroup > .mud-nav-link .mud-icon-root { font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
    .er-nav-child__row { transition: none; }
}

/* Top bar on phones: the account menu shows its icon only (a full email squeezed the logo). */
.er-account-btn__name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
@media (max-width: 600px) {
    .er-account-btn__name { display: none; }
    .er-account-btn .mud-button-icon-start { margin: 0; }
}

/* ---- App-wide card look (2026-10-28): every MudCard / raised MudPaper in the main area matches the redesigned
   parent cards — rounded, hairline border, soft depth — instead of MudBlazor's default hard elevation. ---- */
.mud-main-content .mud-card,
.mud-main-content .mud-paper.mud-elevation-1,
.mud-main-content .mud-paper.mud-elevation-2 {
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
}
.mud-main-content .mud-card .mud-card-content > .mud-typography-h6:first-child {
    font-family: Poppins, "Segoe UI", sans-serif; font-weight: 600; font-size: 1.08rem;
}

/* ---- Weakness recovery (/recovery/{id}) ---- */
.er-rc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.er-rc { display: flex; flex-direction: column; gap: 0.6rem; }
.er-rc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.er-rc__name { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.12rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-rc__sev--high { background: #FEE2E2; color: #991B1B; }
.er-rc__sev--mid { background: #FEF3C7; color: #92400E; }
.er-rc__sev--low { background: #F1F5F9; color: #475569; }
.er-rc__trend { display: flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.9rem; color: var(--mud-palette-text-secondary); }
.er-rc__trend--up strong, .er-rc__trend--up .mud-icon-root { color: #047857; }
.er-rc__trend--down strong, .er-rc__trend--down .mud-icon-root { color: #B91C1C; }
.er-rc__trend--flat strong, .er-rc__trend--flat .mud-icon-root { color: #B45309; }
.mud-theme-dark .er-rc__trend--up strong, .mud-theme-dark .er-rc__trend--up .mud-icon-root { color: #6EE7B7; }
.mud-theme-dark .er-rc__trend--down strong, .mud-theme-dark .er-rc__trend--down .mud-icon-root { color: #FCA5A5; }
.mud-theme-dark .er-rc__trend--flat strong, .mud-theme-dark .er-rc__trend--flat .mud-icon-root { color: #FCD34D; }
.er-rc__bars { display: grid; gap: 0.55rem; margin: 0.2rem 0 0.3rem; }
.er-rc__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; align-items: center; }
.er-rc__lbl { grid-column: 1 / -1; font-size: 0.8rem; color: var(--mud-palette-text-secondary); }
.er-rc__pct { font-weight: 700; font-size: 0.9rem; color: var(--mud-palette-text-primary); min-width: 2.6rem; text-align: right; }
.er-rc__none { font-size: 0.88rem; color: var(--mud-palette-text-secondary); }
.er-rc__go.mud-button-root { margin-top: auto; min-height: 44px; border-radius: 12px; text-transform: none; font-weight: 700; }
.er-rc-done { color: #059669 !important; }
.er-rc-wins__intro { margin-top: -0.5rem; }
.er-rc-wins__list { margin: 0.6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.er-rc-wins__list li {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.8rem; border-radius: 999px;
    background: #ECFDF5; color: #065F46; font-size: 0.9rem;
}
.er-rc-wins__list li span { color: #047857; font-size: 0.8rem; }
.mud-theme-dark .er-rc-wins__list li { background: color-mix(in srgb, #10B981 18%, transparent); color: #A7F3D0; }
.mud-theme-dark .er-rc-wins__list li span { color: #6EE7B7; }

/* ---- Learning timeline (/timeline/{id}): the latest-week facts as a stat grid ---- */
.er-tl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0.6rem 0 0.4rem; }
.er-tl-facts > div { padding: 0.65rem 0.75rem; border-radius: 12px; background: color-mix(in srgb, #1E3A8A 5%, transparent); }
.er-tl-facts dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-tl-facts dd { margin: 0.15rem 0 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.er-tl-facts dd small { font-size: 0.8rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.mud-theme-dark .er-tl-facts > div { background: color-mix(in srgb, #93C5FD 8%, transparent); }

@media (max-width: 760px) {
    .er-rc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Family dashboard child card (2026-10-28 redesign): readiness ring, this week vs last, 8-week rhythm, next step ---- */

.er-fam__next {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 44px; margin-bottom: 0.8rem;
    padding: 0.45rem 0.7rem; border-radius: 12px; cursor: pointer; text-align: left; font: inherit;
    border: 1px solid color-mix(in srgb, #F59E0B 40%, transparent);
    background: color-mix(in srgb, #FBBF24 12%, transparent); color: var(--mud-palette-text-primary);
    transition: background-color 0.15s ease;
}
.er-fam__next:hover { background: color-mix(in srgb, #FBBF24 22%, transparent); }
.er-fam__next:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
.er-fam__next-ico {
    width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: #FBBF24; color: #1F1300;
}
.er-fam__next-txt { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.35; }
.er-feat__ico .mud-icon-root { color: var(--feat-accent); font-size: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
    .er-fam__next { transition: none; }
}

/* ---- Charts on parent pages (2026-10-28): themed by class so they read in light AND dark mode ---- */
.er-chart-grid { stroke: var(--mud-palette-lines-default, #E2E8F0); stroke-width: 1; }
.er-chart-axis { font-size: 12px; fill: var(--mud-palette-text-secondary, #64748B); }
.er-chart-bar { fill: color-mix(in srgb, #2563EB 35%, transparent); }
.er-chart-bar.is-now { fill: #1E3A8A; }
.er-chart-bar--green { fill: color-mix(in srgb, #059669 35%, transparent); }
.er-chart-bar--green.is-now { fill: #047857; }
.er-chart-val { font-size: 11px; font-weight: 700; fill: #1E3A8A; }
.er-chart-val--green { fill: #047857; }
.mud-theme-dark .er-chart-bar.is-now { fill: #93C5FD; }
.mud-theme-dark .er-chart-bar--green.is-now { fill: #6EE7B7; }
.mud-theme-dark .er-chart-val { fill: #BFDBFE; }
.mud-theme-dark .er-chart-val--green { fill: #A7F3D0; }

/* =====================================================================================================
   Premium parent visual language (2026-10-28): light trusted heroes, glowing score rings, smooth area charts,
   colour-banded cards, gentle entrance motion. Shared by the dashboard, readiness, plan, match and goals.
   ===================================================================================================== */

/* ---- Entrance: cards rise in, a beat apart (off for reduced motion) ---- */
@keyframes er-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.er-rise { animation: er-rise 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.er-rise:nth-child(2) { animation-delay: 0.06s; }
.er-rise:nth-child(3) { animation-delay: 0.12s; }
.er-rise:nth-child(4) { animation-delay: 0.18s; }
.er-rise:nth-child(5) { animation-delay: 0.24s; }

/* ---- PageHero: a calm, light "trusted coach" surface — whisper of brand tint, fine dot texture, a brand hairline on
   top, deep-navy type. Colour is saved for the data (rings, chips). Reviewed 2026-10-28: the saturated navy slab read
   as marketing and fought the numbers. ---- */
.er-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
    margin: 0 0 1.4rem; padding: 1.6rem 1.8rem; border-radius: 24px;
    color: var(--mud-palette-text-primary);
    background: linear-gradient(135deg, #FFFFFF 0%, #F7F9FF 55%, #EEF3FF 100%);
    border: 1px solid #E2E9F6;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -18px rgba(30, 58, 138, 0.25);
    animation: er-rise 0.45s cubic-bezier(.2, .7, .2, 1) both;
}
.er-hero::before { /* brand hairline */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #1E3A8A, #2563EB 45%, #0EA5E9 75%, #FBBF24);
}
.er-hero__glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(14, 165, 233, 0.10), transparent 70%),
        radial-gradient(360px 200px at 0% 100%, rgba(251, 191, 36, 0.08), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(30, 58, 138, 0.09) 1px, transparent 1.4px) 0 0 / 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.er-hero__main { flex: 1 1 22rem; min-width: 0; }
.er-hero__back {
    display: flex; width: max-content; align-items: center; gap: 0.25rem; min-height: 32px; margin-bottom: 0.35rem;
    color: var(--mud-palette-text-secondary); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.er-hero__back:hover { color: var(--mud-palette-primary, #1E3A8A); }
.er-hero__back:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; border-radius: 6px; }
.er-hero__eyebrow { margin: 0 0 0.3rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2563EB; }
.er-hero__title {
    margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.18;
    font-weight: 700; letter-spacing: -0.02em; color: #0B1E54;
}
.er-hero__sub { margin: 0.45rem 0 0; font-size: 1rem; line-height: 1.55; color: #475569; max-width: 46rem; }
.er-hero__stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.er-hero__stat {
    display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 12px;
    background: #FFFFFF; border: 1px solid #E2E9F6; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 0.86rem; color: #475569;
}
.er-hero__stat strong { font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.1rem; color: #0B1E54; }
.er-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.er-hero__actions .mud-button-root { border-radius: 999px; text-transform: none; font-weight: 700; }
.er-hero__actions .mud-button-outlined { color: #1E3A8A; border-color: #C7D4EE; background: #FFFFFF; }
.er-hero__actions .mud-button-outlined:hover { border-color: #1E3A8A; background: #F5F8FF; }
.er-hero__aside { flex: none; display: flex; align-items: center; justify-content: center; }
.mud-theme-dark .er-hero { background: linear-gradient(135deg, #111A2E 0%, #13203D 100%); border-color: #22314F; box-shadow: none; }
.mud-theme-dark .er-hero__title, .mud-theme-dark .er-hero__stat strong { color: #F1F5F9; }
.mud-theme-dark .er-hero__sub, .mud-theme-dark .er-hero__stat { color: #CBD5E1; }
.mud-theme-dark .er-hero__eyebrow { color: #93C5FD; }
.mud-theme-dark .er-hero__stat { background: rgba(255, 255, 255, 0.04); border-color: #22314F; }
.mud-theme-dark .er-hero__actions .mud-button-outlined { color: #BFDBFE; background: transparent; border-color: #334155; }

/* ---- ScoreRing ---- */
.er-sring { position: relative; width: var(--ring-size); height: var(--ring-size); flex: none; }
.er-sring svg { width: 100%; height: 100%; overflow: visible; }
.er-sring__track { fill: none; stroke: color-mix(in srgb, #1E3A8A 9%, transparent); stroke-width: 9; }
.er-sring__fill { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .7, .2, 1); filter: drop-shadow(0 3px 6px var(--ring-glow)); }
.er-sring--gold { --ring-glow: rgba(245, 158, 11, 0.45); }
.er-sring--gold .er-sring__g1 { stop-color: #FCD34D; } .er-sring--gold .er-sring__g2 { stop-color: #F59E0B; }
.er-sring--sky { --ring-glow: rgba(14, 165, 233, 0.45); }
.er-sring--sky .er-sring__g1 { stop-color: #7DD3FC; } .er-sring--sky .er-sring__g2 { stop-color: #0284C7; }
.er-sring--blue { --ring-glow: rgba(37, 99, 235, 0.45); }
.er-sring--blue .er-sring__g1 { stop-color: #93C5FD; } .er-sring--blue .er-sring__g2 { stop-color: #1D4ED8; }
.er-sring--green { --ring-glow: rgba(16, 185, 129, 0.45); }
.er-sring--green .er-sring__g1 { stop-color: #6EE7B7; } .er-sring--green .er-sring__g2 { stop-color: #059669; }
.er-sring--violet { --ring-glow: rgba(124, 58, 237, 0.45); }
.er-sring--violet .er-sring__g1 { stop-color: #C4B5FD; } .er-sring--violet .er-sring__g2 { stop-color: #7C3AED; }
.er-sring__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.er-sring__num { font-family: Poppins, "Segoe UI", sans-serif; font-weight: 700; font-size: calc(var(--ring-size) * 0.3); color: var(--mud-palette-text-primary); letter-spacing: -0.02em; }
.er-sring__cap { margin-top: 0.15rem; font-size: max(0.68rem, calc(var(--ring-size) * 0.09)); font-weight: 600; color: var(--mud-palette-text-secondary); }
.er-sring--dark .er-sring__track { stroke: rgba(255, 255, 255, 0.16); }
.er-sring--dark .er-sring__num { color: #FFFFFF; }
.er-sring--dark .er-sring__cap { color: #BFDBFE; }
.mud-theme-dark .er-sring__track { stroke: rgba(255, 255, 255, 0.1); }

/* ---- AreaChart ---- */
.er-area { display: block; width: 100%; height: auto; overflow: visible; }
.er-area__g1 { stop-color: #3B82F6; stop-opacity: 0.32; }
.er-area__g2 { stop-color: #3B82F6; stop-opacity: 0; }
.er-area__line { fill: none; stroke: #2563EB; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.er-area__dot { fill: var(--mud-palette-surface, #FFFFFF); stroke: #2563EB; stroke-width: 2.5; }
.er-area__dot.is-now { fill: #2563EB; stroke: var(--mud-palette-surface, #FFFFFF); stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.5)); }
.er-area__val { font-size: 12px; font-weight: 700; fill: #1E3A8A; }
.er-area__grid { stroke: var(--mud-palette-lines-default, #E2E8F0); stroke-width: 1; stroke-dasharray: 2 4; }
.er-area__axis { font-size: 11px; fill: var(--mud-palette-text-secondary, #64748B); }
.er-area__target { stroke: #7C3AED; stroke-width: 2; stroke-dasharray: 6 5; }
.er-area__target-lbl { font-size: 11px; font-weight: 700; fill: #6D28D9; }
.er-area--green .er-area__g1, .er-area--green .er-area__g2 { stop-color: #10B981; }
.er-area--green .er-area__line, .er-area--green .er-area__dot { stroke: #059669; }
.er-area--green .er-area__dot.is-now { fill: #059669; stroke: var(--mud-palette-surface, #FFFFFF); }
.er-area--green .er-area__val { fill: #047857; }
.er-area--violet .er-area__g1, .er-area--violet .er-area__g2 { stop-color: #8B5CF6; }
.er-area--violet .er-area__line, .er-area--violet .er-area__dot { stroke: #7C3AED; }
.er-area--violet .er-area__dot.is-now { fill: #7C3AED; stroke: var(--mud-palette-surface, #FFFFFF); }
.er-area--compact .er-area__line { stroke-width: 4; }
.mud-theme-dark .er-area__line, .mud-theme-dark .er-area__dot { stroke: #93C5FD; }
.mud-theme-dark .er-area__dot.is-now { fill: #93C5FD; }
.mud-theme-dark .er-area__val { fill: #BFDBFE; }
.mud-theme-dark .er-area__g1 { stop-color: #93C5FD; }
.mud-theme-dark .er-area__target-lbl { fill: #C4B5FD; }
.mud-theme-dark .er-area--green .er-area__line, .mud-theme-dark .er-area--green .er-area__dot { stroke: #6EE7B7; }
.mud-theme-dark .er-area--green .er-area__dot.is-now { fill: #6EE7B7; }
.mud-theme-dark .er-area--green .er-area__val { fill: #A7F3D0; }
.mud-theme-dark .er-area--green .er-area__g1 { stop-color: #6EE7B7; }
.mud-theme-dark .er-area--violet .er-area__line, .mud-theme-dark .er-area--violet .er-area__dot { stroke: #C4B5FD; }
.mud-theme-dark .er-area--violet .er-area__dot.is-now { fill: #C4B5FD; }
.mud-theme-dark .er-area--violet .er-area__g1 { stop-color: #C4B5FD; }
/* The chart scales down with its box: on a phone a 1000-unit-wide chart shrinks ~3x, so 11px labels became ~4px. */
@media (max-width: 600px) {
    .er-area:not(.er-area--compact) .er-area__axis,
    .er-area:not(.er-area--compact) .er-area__target-lbl { font-size: 26px; }
    .er-area:not(.er-area--compact) .er-area__val { font-size: 28px; }
}

/* ---- Family dashboard cards, premium edition ---- */
.er-fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.er-fam-card {
    --tint1: #1E3A8A; --tint2: #2563EB;
    display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
    background: var(--mud-palette-surface, #FFFFFF); border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 18px 40px -18px rgba(15, 23, 42, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.er-fam-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 26px 50px -18px rgba(15, 23, 42, 0.3); }
.er-fam-card--sky { --tint1: #0369A1; --tint2: #0EA5E9; }
.er-fam-card--violet { --tint1: #5B21B6; --tint2: #8B5CF6; }
.er-fam-card--emerald { --tint1: #065F46; --tint2: #10B981; }
.er-fam-card--amber { --tint1: #92400E; --tint2: #F59E0B; }
.er-fam-card__band {
    position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tint2) 10%, #FFFFFF), color-mix(in srgb, var(--tint2) 4%, #FFFFFF));
    border-bottom: 1px solid color-mix(in srgb, var(--tint2) 16%, transparent);
}
.er-fam-card__band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--tint1), var(--tint2)); }
.er-fam-card__avatar {
    width: 50px; height: 50px; flex: none; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--tint1), var(--tint2)); color: #FFFFFF;
    box-shadow: 0 6px 14px -6px var(--tint1);
    font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.35rem; font-weight: 700;
}
.er-fam-card__who { flex: 1; min-width: 0; }
.er-fam-card__name { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--mud-palette-text-primary); }
.er-fam-card__meta { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.er-fam-card__ring { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.er-fam-card__band-lbl { font-size: 0.72rem; font-weight: 700; color: var(--mud-palette-text-secondary); }
.mud-theme-dark .er-fam-card__band { background: color-mix(in srgb, var(--tint2) 10%, transparent); }
.er-fam-card__body { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.1rem 1.3rem 1.2rem; flex: 1; }
.er-fam-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.er-fam-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem; border-radius: 14px; background: var(--s-bg); }
.er-fam-stat .mud-icon-root { color: var(--s-fg); font-size: 1.15rem; margin-bottom: 0.15rem; }
.er-fam-stat__num { font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.4rem; line-height: 1.1; font-weight: 700; color: var(--mud-palette-text-primary); }
.er-fam-stat__lbl { font-size: 0.74rem; line-height: 1.25; color: var(--mud-palette-text-secondary); }
.er-fam-stat--q { --s-bg: #EFF6FF; --s-fg: #2563EB; }
.er-fam-stat--a { --s-bg: #ECFDF5; --s-fg: #059669; }
.er-fam-stat--s { --s-bg: #FFF7ED; --s-fg: #EA580C; }
.mud-theme-dark .er-fam-stat--q { --s-bg: color-mix(in srgb, #3B82F6 14%, transparent); --s-fg: #93C5FD; }
.mud-theme-dark .er-fam-stat--a { --s-bg: color-mix(in srgb, #10B981 14%, transparent); --s-fg: #6EE7B7; }
.mud-theme-dark .er-fam-stat--s { --s-bg: color-mix(in srgb, #F97316 14%, transparent); --s-fg: #FDBA74; }
.er-fam-stat .er-delta { font-size: 0.72rem; }
.er-fam-stat .er-delta__vs { display: none; }
.er-fam-card__trend-lbl { margin: 0 0 0.2rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-fam-card__actions { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; }
.er-fam-card__actions .mud-button-root { border-radius: 999px; text-transform: none; font-weight: 700; }

/* ---- Readiness hero visuals ---- */
.er-rd-hero__band { display: inline-flex; margin-top: 0.8rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: #FBBF24; color: #1F1300; font-weight: 800; font-size: 0.85rem; }
.er-rd-hero__band--ontrack { background: #7DD3FC; color: #0C4A6E; }
.er-rd-hero__band--strong { background: #BFDBFE; color: #1E3A8A; }
.er-rd-hero__band--ready { background: #6EE7B7; color: #064E3B; }
.er-rd-hero__aside { display: flex; align-items: center; gap: 1.2rem; }
.er-rd-hero__minis { display: grid; gap: 0.7rem; }
.er-rd-mini { display: flex; align-items: center; gap: 0.6rem; color: var(--mud-palette-text-secondary); font-size: 0.8rem; line-height: 1.3; max-width: 11rem; }
.er-rd-mini strong { display: block; color: var(--mud-palette-text-primary); font-size: 0.86rem; }
.er-rd-explain { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px; margin-bottom: 1rem;
    background: color-mix(in srgb, #2563EB 6%, transparent); border: 1px solid color-mix(in srgb, #2563EB 18%, transparent); }
.er-rd-explain .mud-icon-root { color: #2563EB; flex: none; margin-top: 0.1rem; }
.er-rd-explain p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--mud-palette-text-primary); }

@media (max-width: 720px) {
    .er-hero { padding: 1.3rem 1.2rem; border-radius: 22px; }
    .er-hero__stats { gap: 0.4rem; }
    .er-hero__stat { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
    .er-hero__stat strong { font-size: 1rem; }
    .er-hero__aside { width: 100%; justify-content: flex-start; }
    .er-rd-hero__aside { flex-wrap: wrap; }
    .er-fam-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .er-rise, .er-hero { animation: none; }
    .er-sring__fill { transition: none; }
    .er-fam-card { transition: none; }
    .er-fam-card:hover { transform: none; }
}

/* ---- Study plan rows (/plan/{id}) ---- */
.er-pplan-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.er-pplan-intro { margin-top: -0.4rem; }
.er-pplan-list { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.er-pplan-row {
    --k: #2563EB;
    display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0.85rem; border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0); background: var(--mud-palette-surface, #FFFFFF);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.er-pplan-row:hover { border-color: color-mix(in srgb, var(--k) 45%, transparent); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); }
.er-pplan-row__ico {
    width: 38px; height: 38px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k);
}
.er-pplan-row__ico--learnnewskill { --k: #2563EB; }
.er-pplan-row__ico--reviseskill { --k: #D97706; }
.er-pplan-row__ico--miniassessment { --k: #7C3AED; }
.er-pplan-row__ico--fullmock { --k: #DC2626; }
.er-pplan-row__ico--timedchallenge { --k: #0891B2; }
.er-pplan-row:has(.er-pplan-row__ico--reviseskill) { --k: #D97706; }
.er-pplan-row:has(.er-pplan-row__ico--miniassessment) { --k: #7C3AED; }
.er-pplan-row:has(.er-pplan-row__ico--fullmock) { --k: #DC2626; }
.er-pplan-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.er-pplan-row__kind { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-pplan-row__title { font-weight: 600; color: var(--mud-palette-text-primary); }
.er-pplan-row.is-done { background: color-mix(in srgb, #10B981 6%, transparent); }
.er-pplan-row.is-done .er-pplan-row__ico { background: #10B981; color: #FFFFFF; }
.er-pplan-row.is-done .er-pplan-row__title { color: var(--mud-palette-text-secondary); }

/* ---- School match cards (/match/{id}) ---- */
.er-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.er-match { display: flex; flex-direction: column; gap: 0.6rem; }
.er-match.is-ineligible { opacity: 0.72; }
.er-match__top { display: flex; align-items: center; gap: 0.9rem; }
.er-match__who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.er-match__name { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-match__chip--green { background: #D1FAE5; color: #065F46; }
.er-match__chip--sky { background: #E0F2FE; color: #075985; }
.er-match__chip--gold { background: #FEF3C7; color: #92400E; }
.er-match__chip--violet { background: #EDE9FE; color: #5B21B6; }
.er-match__blocked { width: 72px; height: 72px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #F1F5F9; color: #64748B; }
.er-match__why { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--mud-palette-text-primary); }
.er-match__note { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0; padding: 0.55rem 0.7rem; border-radius: 12px; font-size: 0.86rem; color: #075985; background: #F0F9FF; }
.mud-theme-dark .er-match__note { color: #BAE6FD; background: color-mix(in srgb, #0EA5E9 12%, transparent); }
@media (max-width: 860px) { .er-match-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .er-pplan-row { transition: none; } }

/* ---- Dark-mode chips: tinted, not pastel slabs on a dark card ---- */
.mud-theme-dark .er-ov-chip--ontrack, .mud-theme-dark .er-match__chip--green { background: rgba(16, 185, 129, 0.18); color: #A7F3D0; }
.mud-theme-dark .er-ov-chip--practice, .mud-theme-dark .er-rc__sev--mid, .mud-theme-dark .er-match__chip--gold { background: rgba(245, 158, 11, 0.18); color: #FDE68A; }
.mud-theme-dark .er-ov-chip--covering, .mud-theme-dark .er-match__chip--sky { background: rgba(14, 165, 233, 0.18); color: #BAE6FD; }
.mud-theme-dark .er-ov-chip--notstarted, .mud-theme-dark .er-rc__sev--low, .mud-theme-dark .er-match__blocked { background: rgba(148, 163, 184, 0.16); color: #CBD5E1; }
.mud-theme-dark .er-rc__sev--high { background: rgba(239, 68, 68, 0.18); color: #FECACA; }
.mud-theme-dark .er-match__chip--violet { background: rgba(139, 92, 246, 0.2); color: #DDD6FE; }
.er-hero__actions:empty { display: none; }

.er-rd-calculated { margin: -0.4rem 0 1rem; font-size: 0.82rem; text-align: right; }

/* ---- StatTile: one headline-figure tile for the tutor pages (Today, roster, class report) ---- */
.er-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.er-stat {
    --er-stat-tone: #1E3A8A;
    --er-stat-tint: #EEF2FF;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.9rem 1rem 0.95rem;
    border-radius: 16px;
    border: 1px solid #E5EAF3;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: #475569;
    font: inherit;
    text-align: left;
    text-decoration: none;
    overflow: hidden;
}
.er-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: transparent; }
.er-stat--good { --er-stat-tone: #047857; --er-stat-tint: #DCFCE7; }
.er-stat--warn { --er-stat-tone: #B45309; --er-stat-tint: #FEF3C7; }
.er-stat--alert { --er-stat-tone: #B91C1C; --er-stat-tint: #FEE2E2; }
.er-stat--warn::before, .er-stat--alert::before { background: var(--er-stat-tone); }
.er-stat__ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--er-stat-tint); color: var(--er-stat-tone); margin-bottom: 0.45rem; }
.er-stat__value { font-family: Poppins, Inter, system-ui, sans-serif; font-size: 1.65rem; font-weight: 700; line-height: 1.1; color: #0B1E54; }
.er-stat--good .er-stat__value, .er-stat--warn .er-stat__value, .er-stat--alert .er-stat__value { color: var(--er-stat-tone); }
.er-stat__label { font-size: 0.86rem; font-weight: 600; color: #334155; }
.er-stat__hint { font-size: 0.76rem; line-height: 1.35; color: #64748B; }
.er-stat--action { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.er-stat--action:hover { border-color: #CBD5E1; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.25); transform: translateY(-1px); }
.er-stat--action:focus-visible { outline: 3px solid #93C5FD; outline-offset: 2px; }
.er-stat--selected { border-color: #2563EB; box-shadow: inset 0 0 0 1px #2563EB; background: #F5F8FF; }
@media (prefers-reduced-motion: reduce) { .er-stat--action, .er-stat--action:hover { transition: none; transform: none; } }
@media (max-width: 600px) {
    .er-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .er-stat { padding: 0.75rem 0.8rem; }
    .er-stat__ico { width: 28px; height: 28px; margin-bottom: 0.3rem; }
    .er-stat__value { font-size: 1.4rem; }
}
.mud-theme-dark .er-stat { background: #111C33; border-color: #22314F; color: #CBD5E1; box-shadow: none; }
.mud-theme-dark .er-stat__value { color: #F1F5F9; }
.mud-theme-dark .er-stat__label { color: #E2E8F0; }
.mud-theme-dark .er-stat__hint { color: #94A3B8; }
.mud-theme-dark .er-stat--neutral { --er-stat-tone: #93C5FD; --er-stat-tint: rgba(147, 197, 253, 0.14); }
.mud-theme-dark .er-stat--good { --er-stat-tone: #6EE7B7; --er-stat-tint: rgba(16, 185, 129, 0.18); }
.mud-theme-dark .er-stat--warn { --er-stat-tone: #FCD34D; --er-stat-tint: rgba(234, 179, 8, 0.18); }
.mud-theme-dark .er-stat--alert { --er-stat-tone: #FCA5A5; --er-stat-tint: rgba(239, 68, 68, 0.18); }
.mud-theme-dark .er-stat--selected { background: rgba(37, 99, 235, 0.12); }

/* A button that reads as an inline link (table cells: "Add email"). Keyboard-reachable, unlike an href-less <a>. */
.er-linkbtn { appearance: none; background: none; border: 0; padding: 0.15rem 0; min-height: 24px; font: inherit; font-weight: 600; color: var(--mud-palette-primary); cursor: pointer; text-align: left; white-space: nowrap; border-radius: 4px; }
.er-linkbtn:hover { text-decoration: underline; }
.er-linkbtn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ---- Kid badges (/play/{child}/badges): won medals first, locked ones fully readable ---- */
.er-badge-meter { height: 12px; border-radius: 999px; background: #E0F2FE; overflow: hidden; margin: -0.4rem 0 1.25rem; }
.er-badge-meter__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FBBF24, #F59E0B); transition: width 0.6s ease; }
.er-badges { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.85rem; }
.er-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 1.1rem 0.9rem 1rem; border-radius: 20px; background: #fff; border: 2px solid #FDE68A; box-shadow: 0 10px 24px -16px rgba(180, 83, 9, 0.45); }
.er-badge__medal { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; margin-bottom: 0.35rem; color: #fff; background: radial-gradient(circle at 35% 30%, #FDE68A, #F59E0B 70%); box-shadow: 0 0 0 5px #FEF3C7; }
.er-badge__medal .mud-icon-root { font-size: 30px; }
.er-badge__name { font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; font-size: 1.02rem; color: #0B1E54; }
.er-badge__desc { font-size: 0.86rem; line-height: 1.4; color: #475569; }
.er-badge__tag { margin-top: auto; padding-top: 0.45rem; font-size: 0.78rem; font-weight: 600; color: #475569; }
.er-badge__tag--won { color: #047857; }
.er-badge--locked { background: #F8FAFC; border: 2px dashed #CBD5E1; box-shadow: none; }
.er-badge--locked .er-badge__medal { background: #E2E8F0; color: #64748B; box-shadow: 0 0 0 5px #F1F5F9; }
.er-badge--locked .er-badge__name { color: #334155; }
@media (max-width: 480px) { .er-badges { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .er-badge { padding: 0.9rem 0.6rem; } }
@media (prefers-reduced-motion: reduce) { .er-badge-meter__fill { transition: none; } }
.mud-theme-dark .er-badge { background: #111C33; border-color: rgba(251, 191, 36, 0.4); }
.mud-theme-dark .er-badge__name { color: #F1F5F9; }
.mud-theme-dark .er-badge__desc, .mud-theme-dark .er-badge__tag { color: #CBD5E1; }
.mud-theme-dark .er-badge__tag--won { color: #6EE7B7; }
.mud-theme-dark .er-badge--locked { background: #0F172A; border-color: #334155; }
.mud-theme-dark .er-badge--locked .er-badge__medal { background: #1E293B; color: #94A3B8; box-shadow: 0 0 0 5px #172033; }
.mud-theme-dark .er-badge--locked .er-badge__name { color: #E2E8F0; }
.mud-theme-dark .er-badge-meter { background: rgba(14, 165, 233, 0.18); }

/* Kid empty state: Robbie, one warm line, one way forward. */
.er-kid-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 2rem 1.25rem; border-radius: 24px; background: #fff; border: 2px solid #E0F2FE; }
.er-kid-empty__title { margin: 0.5rem 0 0; font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; font-size: 1.25rem; color: #1E3A8A; }
.er-kid-empty__sub { margin: 0 0 0.75rem; color: #475569; }
.er-kid-empty__btn.mud-button-root { border-radius: 999px; min-height: 48px; padding-inline: 1.6rem; font-weight: 700; }
.mud-theme-dark .er-kid-empty { background: #111C33; border-color: #22314F; }
.mud-theme-dark .er-kid-empty__title { color: #93C5FD; }
.mud-theme-dark .er-kid-empty__sub { color: #CBD5E1; }

/* Admin pages (2026-10-29): the one <h1> in the brand title style, so the back office reads as the same product. */
.er-admin-title {
    margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.75rem; line-height: 1.2; font-weight: 700;
    letter-spacing: -0.01em; color: #0B1E54; overflow-wrap: anywhere;
}
.mud-theme-dark .er-admin-title { color: var(--mud-palette-text-primary); }
@media (max-width: 600px) { .er-admin-title { font-size: 1.4rem; } }
/* The review queue's tiles carry a sentence of hint each, so they need wider columns than a row of numbers. */
.er-stats--queue { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Reported questions (/admin/question-reports): the explanation children saw, the AI verdict's evidence, and the
   validated fix waiting to be applied — all on the card, so triage never needs a second page. */
.er-qr-expl { border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 6px 12px; max-width: 78ch; }
.er-qr-expl > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--mud-palette-text-secondary); min-height: 28px; display: flex; align-items: center; }
.er-qr-expl > summary:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: 6px; }
.er-qr-expl__body { font-size: .9rem; padding: 6px 0 4px; overflow-wrap: anywhere; }
.er-qr-finding { font-size: .85rem; margin-top: 4px; overflow-wrap: anywhere; }
.er-qr-proposal { border-left: 3px solid var(--mud-palette-success); padding: 8px 12px; border-radius: 0 10px 10px 0; background: rgba(46, 125, 50, .05); max-width: 78ch; }

/* Question editor: "Check this question" results (validator checks + optional blind AI solve). */
.er-qe-check__line { font-size: .85rem; line-height: 1.4; padding: 2px 0; color: var(--mud-palette-success-darken); overflow-wrap: anywhere; }
.er-qe-check__line--bad { color: var(--mud-palette-error); }

/* ===== Parent "Activity" page (/child/{id}/activity, 2026-11-09) =====
   A six-week practice calendar (shade = how many questions that UK day; the number is printed too, so shade is
   never the only signal), quick-range chips, then the chosen day's answers Overall or By skill. */
.er-act-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) {
    .er-act-layout { grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); }
    .er-act-side { position: sticky; top: 80px; }
}
.er-act-main { min-width: 0; }
.er-act-cal__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.er-act-cal__top .er-ov-card__label { margin-bottom: 0.15rem; }
.er-act-cal__range { margin: 0; font-family: Poppins, "Segoe UI", sans-serif; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-act-cal__nav { display: flex; gap: 0.1rem; }

.er-act-presets { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.8rem 0 1rem; }
.er-act-chip {
    min-height: 40px; padding: 0 0.95rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0); background: var(--mud-palette-surface, #fff);
    font: 600 0.88rem Inter, "Segoe UI", sans-serif; color: var(--mud-palette-text-primary);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.er-act-chip:hover { border-color: #1E3A8A; transform: translateY(-1px); }
.er-act-chip.is-active { background: #1E3A8A; border-color: #1E3A8A; color: #fff; }
.er-act-chip:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }

.er-act-grid { display: grid; gap: 6px; }
.er-act-grid__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.er-act-grid__wd { text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--mud-palette-text-secondary); }
.er-act-day {
    --day-bg: #F1F5F9; --day-fg: #64748B;
    position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    min-height: 56px; padding: 0.35rem 0.45rem; border-radius: 12px; cursor: pointer;
    border: 2px solid transparent; background: var(--day-bg); color: var(--day-fg);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.er-act-day:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); }
.er-act-day:disabled { cursor: default; opacity: 0.35; }
.er-act-day:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
.er-act-day__num { font-size: 0.78rem; font-weight: 600; opacity: 0.85; }
.er-act-day__q { align-self: flex-end; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.02rem; font-weight: 700; line-height: 1; }
.er-act-day--l0 { --day-bg: #F1F5F9; --day-fg: #94A3B8; }
.er-act-day--l1 { --day-bg: #DBEAFE; --day-fg: #1E3A8A; }
.er-act-day--l2 { --day-bg: #93C5FD; --day-fg: #0B1E54; }
.er-act-day--l3 { --day-bg: #3B82F6; --day-fg: #FFFFFF; }
.er-act-day--l4 { --day-bg: #1E3A8A; --day-fg: #FFFFFF; }
.er-act-day.is-today { border-color: #F59E0B; }
.er-act-day.is-selected { border-color: #0B1E54; box-shadow: 0 0 0 2px #FBBF24; }
.mud-theme-dark .er-act-day--l0 { --day-bg: rgba(148, 163, 184, 0.12); --day-fg: #94A3B8; }
.mud-theme-dark .er-act-day--l1 { --day-bg: rgba(147, 197, 253, 0.22); --day-fg: #DBEAFE; }
.mud-theme-dark .er-act-day--l2 { --day-bg: rgba(147, 197, 253, 0.42); --day-fg: #FFFFFF; }
.mud-theme-dark .er-act-day.is-selected { border-color: #FBBF24; }

.er-act-legend { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; margin-top: 0.7rem; font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
.er-act-legend__sw { width: 14px; height: 14px; border-radius: 4px; background: var(--day-bg); }

.er-act-heading { margin: 0 0 0.8rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--mud-palette-text-primary); }

.er-act-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.9rem; }
.er-act-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: color-mix(in srgb, #1E3A8A 8%, transparent); }
.er-act-seg button {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 1rem; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer; font: 600 0.9rem Inter, "Segoe UI", sans-serif; color: var(--mud-palette-text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}
.er-act-seg button.is-active { background: var(--mud-palette-surface, #fff); color: #1E3A8A; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15); }
.mud-theme-dark .er-act-seg button.is-active { color: #93C5FD; }
.er-act-seg button:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
.er-act-note { margin: 0 0 0.6rem; }

.er-act-dayhead {
    display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
    margin: 1.1rem 0 0.5rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 0.98rem; font-weight: 600; color: var(--mud-palette-text-primary);
}
.er-act-dayhead span { font: 500 0.82rem Inter, "Segoe UI", sans-serif; color: var(--mud-palette-text-secondary); }

.er-act-item { border: 1px solid var(--mud-palette-lines-default, #E2E8F0); border-radius: 14px; margin-bottom: 0.55rem; overflow: hidden; transition: box-shadow 0.15s ease; }
.er-act-item.is-open { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07); }
.er-act-item__head {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 60px; padding: 0.65rem 0.85rem;
    border: 0; background: transparent; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.er-act-item__head:hover { background: color-mix(in srgb, #1E3A8A 4%, transparent); }
.er-act-item__head:focus-visible { outline: 3px solid #0EA5E9; outline-offset: -3px; }
.er-act-item__ico { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; }
.er-act-item__ico--sky { background: #E0F2FE; color: #0369A1; }
.er-act-item__ico--gold { background: #FEF3C7; color: #B45309; }
.er-act-item__ico--violet { background: #EDE9FE; color: #6D28D9; }
.er-act-item__ico--emerald { background: #D1FAE5; color: #047857; }
.er-act-item__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.1rem; }
.er-act-item__title { font-weight: 600; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-act-item__sub { font-size: 0.84rem; color: var(--mud-palette-text-secondary); }
.er-act-item__chev { flex: none; color: var(--mud-palette-text-secondary); transition: transform 0.2s ease; }
.er-act-item.is-open .er-act-item__chev { transform: rotate(180deg); }
.er-act-item__body { padding: 0.2rem 0.85rem 0.85rem; border-top: 1px solid var(--mud-palette-lines-default, #E2E8F0); }
.er-act-item__body .er-skillq { margin-top: 0.75rem; }

.er-act-score { flex: none; min-width: 3.2rem; padding: 0.3rem 0.6rem; border-radius: 999px; text-align: center; font-weight: 700; font-size: 0.88rem; }
.er-act-score--good { background: #D1FAE5; color: #065F46; }
.er-act-score--mid { background: #FEF3C7; color: #92400E; }
.er-act-score--low { background: #FEE2E2; color: #991B1B; }
.er-ov-progress--low { --bar: #DC2626; }

@media (max-width: 600px) {
    .er-act-grid, .er-act-grid__row { gap: 4px; }
    .er-act-day { min-height: 46px; padding: 0.25rem 0.3rem; border-radius: 9px; }
    .er-act-day__q { font-size: 0.9rem; }
    .er-act-item__ico { display: none; }
    .er-act-main .er-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .er-act-day, .er-act-chip, .er-act-item__chev { transition: none; }
    .er-act-day:hover:not(:disabled), .er-act-chip:hover { transform: none; }
}

/* ===== Uploaded paper: the tutor's marks + questions grouped by test (2026-11-09) =====
   Tiles per test with the total the TUTOR wrote; a "worth asking the tutor" list (two independent checks disagree
   with the mark); every question grouped test → section, wrong answers beside the right one. Marks are words +
   symbols, never colour alone. */
.er-pm__tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.65rem; }
.er-pm__test {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.9rem; border-radius: 14px;
    background: color-mix(in srgb, #1E3A8A 5%, transparent); border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}
.er-pm__title { font-size: 0.84rem; font-weight: 600; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.er-pm__score { font-family: Poppins, "Segoe UI", sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.15; color: var(--mud-palette-text-primary); }
.er-pm__score span { font-size: 1rem; font-weight: 500; color: var(--mud-palette-text-secondary); }
.er-pm__score--none { color: var(--mud-palette-text-secondary); }
.er-pm__note { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }

.er-pm__query { margin-top: 1.1rem; padding: 0.9rem 1rem; border-radius: 14px; background: #FFFBEB; border: 1px solid #FCD34D; }
.mud-theme-dark .er-pm__query { background: rgba(234, 179, 8, 0.10); border-color: rgba(252, 211, 77, 0.45); }
.er-pm__qtitle { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.2rem; font-family: Poppins, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 600; color: var(--mud-palette-text-primary); }
.er-pm__item { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed rgba(180, 83, 9, 0.35); }
.er-pm__where { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: #B45309; }
.mud-theme-dark .er-pm__where { color: #FCD34D; }
.er-pm__q { margin: 0.15rem 0 0.4rem; font-weight: 500; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-pm__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
.er-pm__facts div { display: flex; flex-direction: column; }
.er-pm__facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.er-pm__facts dd { margin: 0; font-weight: 600; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-pm__why { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }
.er-pm__ok { display: flex; align-items: center; gap: 0.35rem; }

.er-pq__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.6rem; }
.er-pq__count { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.er-pq__test { border: 1px solid var(--mud-palette-lines-default, #E2E8F0); border-radius: 14px; margin-bottom: 0.7rem; overflow: hidden; }
.er-pq__thead {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 52px; padding: 0.6rem 0.9rem;
    cursor: pointer; list-style: none; background: color-mix(in srgb, #1E3A8A 5%, transparent);
}
.er-pq__thead::-webkit-details-marker { display: none; }
.er-pq__thead::after { content: "▾"; margin-left: 0.3rem; color: var(--mud-palette-text-secondary); transition: transform 0.2s ease; }
.er-pq__test:not([open]) .er-pq__thead::after { transform: rotate(-90deg); }
.er-pq__thead:focus-visible { outline: 3px solid #0EA5E9; outline-offset: -3px; }
.er-pq__ttitle { flex: 1; font-family: Poppins, "Segoe UI", sans-serif; font-weight: 600; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-pq__tscore { font-size: 0.85rem; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.er-pq__section { margin: 0.8rem 0.9rem 0.3rem; font-size: 0.84rem; font-weight: 700; color: var(--mud-palette-text-secondary); overflow-wrap: anywhere; }
.er-pq__none { margin: 0.8rem 0.9rem; }
.er-pq__list { list-style: none; margin: 0; padding: 0 0.5rem 0.4rem; }
.er-pq__row { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--mud-palette-lines-default, #E2E8F0); }
.er-pq__row:last-child { border-bottom: 0; }
.er-pq__mark {
    flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    font-weight: 800; font-size: 0.95rem;
}
.er-pq__row--right .er-pq__mark { background: #D1FAE5; color: #065F46; }
.er-pq__row--wrong .er-pq__mark { background: #FEE2E2; color: #991B1B; }
.er-pq__row--query .er-pq__mark { background: #FEF3C7; color: #92400E; }
.er-pq__row--unmarked .er-pq__mark { background: #F1F5F9; color: #475569; }
.er-pq__row--query { background: color-mix(in srgb, #F59E0B 7%, transparent); border-radius: 10px; }
.er-pq__main { flex: 1; min-width: 0; }
.er-pq__qline { display: flex; gap: 0.45rem; }
.er-pq__num { flex: none; font-weight: 700; color: var(--mud-palette-text-primary); }
.er-pq__text { color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-pq__answers { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin-top: 0.25rem; font-size: 0.88rem; color: var(--mud-palette-text-primary); overflow-wrap: anywhere; }
.er-pq__lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-right: 0.2rem; }
.er-pq__tutor { color: var(--mud-palette-text-secondary); }
.er-pq__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.er-pq__chips:empty { display: none; }
.er-pq__chip--query { background: #FEF3C7 !important; color: #92400E !important; }
.er-pq__chip--unclear { background: #E0F2FE !important; color: #075985 !important; }
.er-pq__edit { flex: none; }
@media (prefers-reduced-motion: reduce) { .er-pq__thead::after { transition: none; } }