/* ============================================================
   The Grammar Index — Corporate Theme
   ============================================================ */

:root {
    --primary: #1B5E9E;
    --primary-dark: #14486F;
    --primary-light: #2980C4;
    --bg: #F5F6FA;
    --bg-card: #FFFFFF;
    --text: #2C3E50;
    --text-muted: #6C7A89;
    --border: #E0E4EB;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --radius: 8px;
    --radius-sm: 4px;
    --radius-pill: 50px;
    --success: #27AE60;
    --danger: #E74C3C;
    --warning: #F39C12;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji";
}

/* Reset & base */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Loading screen ---- */
.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg);
}

.loading-content {
    text-align: center;
}

.loading-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ---- Blazor error UI ---- */
#blazor-error-ui {
    background: var(--danger);
    color: #fff;
    padding: 0.75rem 1.25rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    display: none;
    text-align: center;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: #fff;
    margin-left: 1rem;
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Header ---- */
.app-header {
    background: var(--primary);
    color: #fff;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.app-header2 {
    background: var(--primary);
    color: #fff;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}



.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* FocusOnNavigate (App.razor) moves keyboard focus to the page heading on each
   navigation so screen readers announce it. That programmatic focus otherwise
   draws a visible outline around the heading on launch (it showed around the
   logo while the logo was the first h1). Headings are not keyboard tab-stops, so
   suppressing their focus outline does not affect keyboard users — interactive
   controls keep their focus rings. */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

.header-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.header-subtitle {
    font-size: 0.82rem;
    opacity: 0.8;
    font-weight: 400;
    margin-left: 0.75rem;
}

/* ---- Footer ---- */
.app-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* ---- Main content ---- */
.main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ---- Page title ---- */
.page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0 0.4rem 0;
}

.page-hint {
    color: var(--primary, #1B5E9E);
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 1.5rem 0;
}

/* ---- Search bar ---- */
.search-bar {
    margin-bottom: 1.25rem;
}

.search-bar .dxbl-text-edit {
    border-radius: var(--radius) !important;
}

/* ---- Section chips ---- */
.section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    transition: all 0.2s ease;
    user-select: none;
}

.section-chip:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}

.section-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ---- Custom filter modal ----
   Pupil/teacher picks a subset of topics to focus on. Modal is plain
   HTML/CSS (not a DevExpress popup) so it stays lightweight and matches
   the rest of the home-screen visual language. */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.custom-modal {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    max-width: 760px;
    width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}

.custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.custom-modal-header h3 {
    margin: 0;
    color: var(--primary);
    font-size: 1.1rem;
}

.custom-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 0.3rem;
}

.custom-modal-close:hover {
    color: var(--primary);
}

.custom-modal-body {
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1rem;
    flex: 1;
}

.custom-modal-intro {
    font-size: 0.88rem;
    color: #555;
    margin: 0.5rem 0 1rem;
}

.custom-modal-section-group {
    margin-bottom: 0.75rem;
}

.custom-modal-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--primary);
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.custom-modal-section-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    padding: 0.15rem 0.7rem;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
}

.custom-modal-section-toggle:hover {
    border-color: var(--primary);
}

.custom-modal-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-radius: 4px;
}

.custom-modal-row:hover {
    background: #f5f5fa;
}

.custom-modal-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.custom-modal-row input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.custom-modal-row .title {
    flex: 1;
    font-size: 0.92rem;
}

.custom-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.custom-modal-count {
    margin-right: auto;
    font-size: 0.88rem;
    color: #555;
    font-weight: 600;
}

.custom-modal-btn {
    border-radius: var(--radius-pill);
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
}

.custom-modal-btn:hover {
    border-color: var(--primary);
}

.custom-modal-btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.custom-modal-btn.primary:hover {
    background: var(--primary);
    filter: brightness(1.1);
}

.custom-modal-btn.danger {
    color: #c0392b;
    border-color: #f4caca;
}

/* ---- Card grid ---- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

/* ---- Grammar card ---- */
.grammar-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.grammar-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.grammar-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.grammar-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.grammar-card-definition {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.grammar-card-example {
    background: var(--bg);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    border-left: 3px solid var(--primary-light);
}

.grammar-card-example-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
}

.grammar-card-more {
    margin-top: 0.6rem;
    color: var(--primary, #1B5E9E);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ---- Tag badge ---- */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    flex-shrink: 0;
}

/* ---- Entry detail page ---- */
.entry-detail {
    max-width: 800px;
    margin: 0 auto;
}

.entry-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.entry-detail-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.entry-detail-definition {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    line-height: 1.7;
    font-size: 1rem;
    color: var(--text);
}

.entry-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    transition: color 0.15s;
}

.entry-back-link:hover {
    color: var(--primary-dark);
}

.entry-section-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* ---- Example blocks ---- */
.examples-section {
    margin-top: 1.5rem;
}

.examples-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.example-block {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-light);
}

.example-block.correct {
    border-left-color: var(--success);
}

.example-block.incorrect {
    border-left-color: var(--danger);
}

.example-block-label {
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
}

.example-block.correct .example-block-label {
    color: var(--success);
}

.example-block.incorrect .example-block-label {
    color: var(--danger);
}

.example-block-sentence {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
}

.example-block-sentence .hl {
    background: rgba(27, 94, 158, 0.12);
    padding: 0.1em 0.25em;
    border-radius: 3px;
    font-weight: 600;
    color: var(--primary);
}

.example-block.correct .example-block-sentence .hl {
    background: rgba(39, 174, 96, 0.12);
    color: var(--success);
}

.example-block.incorrect .example-block-sentence .hl {
    background: rgba(231, 76, 60, 0.12);
    color: var(--danger);
    text-decoration: line-through;
}

.example-block-note {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* ---- No results ---- */
.no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.no-results-text {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.no-results-hint {
    font-size: 0.9rem;
}

/* ---- Activation page ---- */
.activation-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
    padding: 1.5rem;
}

.activation-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border);
}

.activation-logo {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.activation-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.activation-input {
    margin-bottom: 1rem;
}

/* The activation key box. The "GI-" prefix sits inside the frame but outside
   the input, so it reads as one field while never being something the customer
   has to type or can delete. */
.key-field {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: text;
}

.key-field:focus-within {
    border-color: var(--primary);
    /* --primary (#1B5E9E) at 25%. Spelled out rather than derived so it needs
       no colour-mix support; keep the two in step if the primary ever moves. */
    box-shadow: 0 0 0 3px rgba(27, 94, 158, 0.25);
}

.key-field-prefix,
.key-field-input {
    /* A monospace face so the three groups line up and every character is a
       fixed width — which is what makes a wrong character findable at a glance
       when someone is checking their key against an email. */
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}

.key-field-prefix {
    color: var(--text-muted);
    user-select: none;
    flex: none;
}

.key-field-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    padding: 0;
    text-transform: uppercase;
}

.key-field-input::placeholder {
    color: var(--text-muted);
    opacity: 0.55;
    letter-spacing: 0.08em;
}

.key-field-input:disabled {
    opacity: 0.6;
}

.key-field-invalid {
    border-color: var(--danger);
    animation: key-field-shake 0.3s ease-in-out;
}

/* A brief nudge when a key is rejected before being sent. Movement is the
   fastest way to say "look here again" without another line of red text — and
   it is suppressed for anyone who has asked for less motion. */
@keyframes key-field-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .key-field-invalid {
        animation: none;
    }
}

.key-field-hint {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-height: 1.1rem;
    text-align: left;
}

.key-field-hint-ready {
    color: var(--success);
}

.activation-message {
    margin-top: 1rem;
    font-size: 0.88rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
}

.activation-message.error {
    background: rgba(231, 76, 60, 0.1);
    color: var(--danger);
}

.activation-message.success {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success);
}

/* ---- Back to top ---- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 50;
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .header-subtitle {
        margin-left: 0;
    }

    .main-content {
        padding: 1rem;
    }

    .entry-detail-title {
        font-size: 1.4rem;
    }

    .activation-card {
        padding: 1.5rem;
    }

    .entry-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .section-chips {
        gap: 0.35rem;
    }

    .section-chip {
        padding: 0.25rem 0.65rem;
        font-size: 0.75rem;
    }
}

/* ===== Grade 3 to 8 (US) edition — same brand styling as Key Stage 2 & 3 ===== */

/* Right / wrong example groupings on the entry detail page */
.examples-section.examples-right {
    margin-top: 2rem;
    padding: 1rem 1.25rem 0.25rem;
    background: rgba(39, 174, 96, 0.05);
    border: 1px solid rgba(39, 174, 96, 0.2);
    border-radius: var(--radius);
}

.examples-section.examples-wrong {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem 0.25rem;
    background: rgba(231, 76, 60, 0.04);
    border: 1px solid rgba(231, 76, 60, 0.18);
    border-radius: var(--radius);
}

.examples-section.examples-right .examples-section-title {
    color: var(--success);
}

.examples-section.examples-wrong .examples-section-title {
    color: var(--danger);
}

.examples-section-icon {
    display: inline-block;
    margin-right: 0.3rem;
    font-size: 1.1em;
}

.examples-section-hint {
    margin: -0.25rem 0 0.75rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Joke box at the bottom of each entry */
.joke-box {
    margin-top: 2rem;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.18), rgba(255, 167, 38, 0.12));
    border: 1px dashed rgba(255, 152, 0, 0.55);
    border-radius: var(--radius);
}

.joke-box-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b07000;
    margin-bottom: 0.4rem;
}

.joke-box-text {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}

.joke-box-text + .joke-box-text {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed rgba(255, 152, 0, 0.35);
}

/* Slightly friendlier page title for kids */
.page-title {
    font-size: 1.85rem;
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.45rem;
    }
}

/* ===== Header nav (Topics / Quiz) ===== */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-title-link {
    text-decoration: none;
    color: inherit;
}
.header-title-link:hover { opacity: 0.85; }

.header-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    /* Six items now (Topics / Todo / How am I doing? / Quiz / Tour / Display).
       On a narrow phone the header stacks and the nav gets the full width, but
       that is still not enough for six — without wrapping, Display would be
       pushed off the right-hand edge. */
    flex-wrap: wrap;
}


/* Bare white text on the blue header — no fill, no border. Every item on the
   bar is styled the same way; nothing is chipped or outlined.

   That is why the hover is opacity and a lift rather than a tint: a tint IS a
   shade, and it would also cost contrast (white on #1B5E9E is 6.7:1, and every
   point of white behind the text pulls that down). Opacity 0.85 is the same
   hover the title link already uses, so the bar behaves consistently.

   The padding stays even though nothing is painted: it is what keeps the six
   targets apart and each one comfortably above the 44px touch minimum for a
   seven-year-old's finger. */
.header-nav-link {
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: none;
    border: none;
    transition: opacity 0.15s, transform 0.15s;
}
.header-nav-link:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* With the border gone there is no edge left to carry keyboard focus, and the
   browser default outline is dark-on-dark here. State it explicitly. */
.header-nav-link:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

/* "How am I doing?". It is the widest of the six by half again, and at full
   width the set wraps to three rows on a 360px phone where five items made
   two — roughly 44px of extra sticky header, kept forever, on the smallest
   screens. Below 480px it takes a shorter label instead.

   display:none rather than the .visually-hidden clip: whichever label is not in
   use must leave the accessibility tree as well, or a screen reader reads the
   pill out twice. */
.header-nav-link-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.header-nav-link-progress .nav-label-tight { display: none; }

@media (max-width: 480px) {
    .header-nav-link-progress .nav-label-full { display: none; }
    .header-nav-link-progress .nav-label-tight { display: inline; }
}

/* Todo. The count sits on the line beside the label rather than as a corner
   dot: a dot says "something is there", and what a pupil needs is "three
   things". It keeps its amber fill — it is a count, not a button. */
.header-nav-link-todo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.header-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--warning);
    /* Dark ink on the amber, not white: white on #F39C12 is 2.2:1 and fails
       WCAG AA outright, and this is a number a seven-year-old has to read. */
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Text for screen readers only. Kept clippable rather than display:none, which
   would take it out of the accessibility tree along with everything else. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===== Quiz call-to-action card on Index =====
   The blue gradient now lives on the wrapper so the left half (Take the
   quiz link) and the right half (rotating tip) share one continuous card.
   The tip's own background is transparent — only its icon and text appear,
   against the card's blue. A vertical divider separates the two halves on
   wide viewports; on narrow viewports the tip stacks below. */
.quiz-cta {
    margin: 1.25rem 0 2rem;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, var(--primary), #2C7EBA);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(27, 94, 158, 0.25);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.quiz-cta:hover {
    box-shadow: 0 6px 18px rgba(27, 94, 158, 0.35);
}

.quiz-cta-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    color: #fff;
    text-decoration: none;
    flex: 1 1 0;
    min-width: 0;
    transition: background-color 0.15s;
}
.quiz-cta-button:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.quiz-cta-icon { font-size: 1.8rem; }

.quiz-cta-text {
    display: flex;
    flex-direction: column;
}
.quiz-cta-text strong {
    font-size: 1.1rem;
    margin-bottom: 0.15rem;
}
.quiz-cta-hint {
    font-size: 0.85rem;
    opacity: 0.92;
}

/* Right-half rotating tip. Background is transparent so the card's blue
   gradient shows through — only the icon + text are visible chrome.
   No divider between the two halves; the spacing speaks for itself. */
.quiz-cta-tip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.4rem;
    flex: 1 1 0;
    min-width: 0;
    color: #fff;
}

.quiz-cta-tip-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.quiz-cta-tip-text {
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
}

/* On narrow viewports, stack the tip below the quiz button so both stay
   readable. */
@media (max-width: 760px) {
    .quiz-cta {
        flex-direction: column;
    }
}

/* ===== "How to use it" tour ===== */
/* Reached from the Tour pill in the header nav — no home-screen card, so the
   existing layout is untouched.

   The whole page is one centred column, and the column is sized by whichever
   runs out first — the width of the page, or the height of the window:

     * a 16:9 frame that is W wide is W * 9/16 tall, so the tallest frame that
       fits in the space left under the header is (available height) * 16/9
       wide. Capping the column at that stops the film running off the bottom
       of a wide, short window, which a width-only cap cannot do.
     * 21rem is the rest of the page — header, heading, standfirst, the note
       and the back link — measured with a little slack.
     * the 320px floor keeps it usable on a very short window (a laptop with
       lots of toolbars); below that, scrolling is the lesser evil.
     * 1280px is the ceiling, so the film never upscales past its own detail.

   The plain vh line is the fallback for browsers without svh; svh then wins
   where it is supported, and matters on phones, where it measures the window
   with the browser's own bars showing rather than at full bleed. */
.tour-shell {
    width: 100%;
    max-width: min(1280px, max(320px, calc((100vh - 21rem) * 16 / 9)));
    max-width: min(1280px, max(320px, calc((100svh - 21rem) * 16 / 9)));
    margin-inline: auto;
}

/* The FRAME owns the 16:9 shape, not the video inside it.
   aspect-ratio on a plain div is resolved from its width and nothing else. On
   a <video> it has to compete with the file's own intrinsic 1920x1080, and
   those intrinsic dimensions only arrive when the metadata loads — which is to
   say, the moment Play is pressed. That is what made the player correct on
   arrival and then jump to full size on play.
   Pinning the video to 100%/100% of a div whose height is derived from its
   width takes the file's dimensions out of the layout altogether, so nothing
   about the media can move the box. overflow:hidden is the backstop. */
.tour-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1rem;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    line-height: 0;      /* no descender gap under the video inside the frame */
}

.tour-video {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, not cover: letterbox rather than crop if the source ever stops
       being exactly 16:9. */
    object-fit: contain;
    background: #000;
}

.tour-note {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.tour-actions { margin-bottom: 2rem; }

.tour-back {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.tour-back:hover { text-decoration: underline; }

/* ===== Quiz page ===== */
.quiz-pool-note {
    background: rgba(27, 94, 158, 0.08);
    border-left: 3px solid var(--primary);
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

/* Spelling test ---------------------------------------------------------- */
.spelling-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.spelling-choice {
    padding: 0.5rem 0.85rem;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.spelling-choice.correct {
    background: rgba(39, 174, 96, 0.15);
    border-color: var(--success);
    color: var(--success);
}

.spelling-choice.dim {
    opacity: 0.4;
}

.spelling-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
}

.spelling-input:focus {
    outline: none;
    border-color: var(--primary);
}

.spelling-input.correct {
    border-color: var(--success);
    background: rgba(39, 174, 96, 0.1);
}

.spelling-input.wrong {
    border-color: var(--danger);
    background: rgba(231, 76, 60, 0.08);
}

.spelling-feedback {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.spelling-feedback.right {
    color: var(--success);
    font-weight: 700;
}

.spelling-missed {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--text);
}

/* "Which spelling is correct?" prompt row + the meaning-hint button */
.spelling-prompt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.7rem 0 0.6rem;
}

/* Spelling "hear the meaning" hint — a speaker that reads the word's meaning
   aloud (replaces the old click-to-open meaning modal). */
.spelling-meaning-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.spelling-meaning-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

/* Freemium preview banner + activation link --------------------------- */
.preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    justify-content: space-between;
    background: rgba(27, 94, 158, 0.1);
    border: 1px solid rgba(27, 94, 158, 0.25);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    margin: 0 0 1.25rem;
}

.preview-banner-text {
    font-size: 0.95rem;
    color: var(--text);
}

.preview-banner-btn {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.activation-back-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.quiz-question {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary-light);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.quiz-question.quiz-q-right { border-left-color: var(--success); }
.quiz-question.quiz-q-wrong { border-left-color: var(--danger); }

.quiz-question-num {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.quiz-question-sentence {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}
.quiz-question-sentence .hl {
    background: rgba(27, 94, 158, 0.12);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.quiz-question-prompt {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.7rem 0 0.6rem;
    color: var(--text);
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.quiz-option-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.quiz-option-row .quiz-option {
    flex: 1 1 auto;
    min-width: 0;
}

.quiz-option {
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    text-align: left;
    color: var(--text);
}
.quiz-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(27, 94, 158, 0.05);
}
.quiz-option.selected {
    background: rgba(27, 94, 158, 0.12);
    border-color: var(--primary);
    color: var(--primary);
}
.quiz-option.correct {
    background: rgba(39, 174, 96, 0.15);
    border-color: var(--success);
    color: var(--success);
}
.quiz-option.wrong {
    background: rgba(231, 76, 60, 0.12);
    border-color: var(--danger);
    color: var(--danger);
    text-decoration: line-through;
}
.quiz-option:disabled { cursor: default; }

.quiz-answer-reveal {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.quiz-submit {
    display: block;
    width: 100%;
    margin-top: 1rem;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s;
}
.quiz-submit:hover:not(:disabled) { background: #1A507F; }
.quiz-submit:disabled {
    background: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
}

.quiz-result {
    margin-top: 1.25rem;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.12), rgba(27, 94, 158, 0.08));
    border: 1px solid rgba(39, 174, 96, 0.25);
    border-radius: var(--radius);
    text-align: center;
}
.quiz-result-score {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--success);
    margin-bottom: 0.35rem;
}
.quiz-result-message {
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 1rem;
}

/* ========================================================================
   Read-aloud (accessibility): speaker buttons + reading-speed control.
   ======================================================================== */

.speak-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    color: var(--primary);
    background: rgba(27, 94, 158, 0.1);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1px solid rgba(27, 94, 158, 0.3);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.speak-btn:hover {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

.speak-btn:active {
    transform: scale(0.92);
}

.speak-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 2px;
}

.speak-btn.is-playing {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.speak-btn-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
}

/* White scheme for dark/coloured backgrounds (e.g. the study-tip banner). */
.speak-btn.is-light {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.55);
}

.speak-btn.is-light:hover {
    background: rgba(255, 255, 255, 0.3);
}

.speak-btn.is-light.is-playing {
    color: var(--primary);
    background: #fff;
    border-color: #fff;
}

/* Study-tip banner: let the text take the slack so the button sits at the end. */
.quiz-cta-tip-text {
    flex: 1 1 auto;
}

.quiz-cta-tip .speak-btn {
    flex: 0 0 auto;
}

/* Reading-speed control */
.read-aloud-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 1rem;
}

.speech-speed {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.speech-speed-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-right: 0.15rem;
}

.speech-speed-btn {
    min-width: 2.6rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--bg-card);
    border: 1px solid rgba(27, 94, 158, 0.3);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.speech-speed-btn:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.speech-speed-btn.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.speech-speed-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 2px;
}

/* Layout tweaks so the speaker buttons sit neatly inside existing rows. */
.entry-detail-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.entry-detail-definition-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.entry-detail-definition-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.example-block-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.quiz-question-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.joke-box-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

/* ========================================================================
   Phase 4 — dyslexia / low-vision display preferences (set on <body> by
   DisplaySettingsService). Every page inherits via the theme variables.
   ======================================================================== */

/* British Dyslexia Association legible sans stack — offline, no font asset. */
body.gi-pref-font {
    --font-family: Verdana, Tahoma, "Trebuchet MS", "Segoe UI", sans-serif;
}

/* Generous letter / word / line spacing (BDA reading guidance). */
body.gi-pref-spacing {
    line-height: 1.9;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
}

/* Background + card tints reduce glare for some readers. */
body.gi-pref-tint-cream { --bg: #FBF3E2; --bg-card: #FFFBF0; }
body.gi-pref-tint-mint  { --bg: #E7F4EC; --bg-card: #F4FBF6; }
body.gi-pref-tint-blue  { --bg: #E8F0F8; --bg-card: #F5F9FE; }

/* ---- Accessibility / display panel (header) ---- */
.a11y-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.a11y-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1000;
}

.a11y-panel {
    position: fixed;
    top: 64px;
    right: 16px;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    padding: 1rem 1.1rem 1.1rem;
    z-index: 1001;
}

.a11y-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--text);
}

.a11y-row {
    margin-bottom: 0.85rem;
}

.a11y-row-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.a11y-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.a11y-opt {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--bg-card);
    border: 1px solid rgba(27, 94, 158, 0.35);
    border-radius: 999px;
    cursor: pointer;
}

.a11y-opt:hover { background: rgba(27, 94, 158, 0.08); }

.a11y-opt.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.a11y-opt:focus-visible {
    outline: 3px solid rgba(27, 94, 158, 0.45);
    outline-offset: 2px;
}

/* Tint swatch chips show the colour they apply. */
.a11y-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.35rem;
}
.a11y-swatch-cream { background: #FBF3E2; }
.a11y-swatch-mint  { background: #E7F4EC; }
.a11y-swatch-blue  { background: #E8F0F8; }

.a11y-row-hint { font-weight: 400; color: var(--text-muted); }

/* ADHD aid — reduce motion: near-zero animation/transition durations. */
body.gi-pref-reduce-motion *,
body.gi-pref-reduce-motion *::before,
body.gi-pref-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ADHD aid — focus mode: hide secondary home-screen chrome. */
body.gi-pref-focus .quiz-cta-tip,
body.gi-pref-focus .app-footer { display: none !important; }

/* ADHD aid — progress card (streak / points / daily goal / badges). */
.progress-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.progress-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.progress-stat { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.progress-stat-label { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.progress-goal-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.progress-goal-bar {
    height: 8px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.progress-goal-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.quick-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.quick-start-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.quick-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--bg-card);
    border: 1px solid rgba(27, 94, 158, 0.3);
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    text-decoration: none;
}
.quick-start-btn:hover { background: rgba(27, 94, 158, 0.08); }

/* ADHD aid — "where was I" resume card. */
.resume-card {
    display: block;
    background: rgba(27, 94, 158, 0.08);
    border: 1px solid rgba(27, 94, 158, 0.25);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-size: 0.92rem;
    text-decoration: none;
}
.resume-card:hover { background: rgba(27, 94, 158, 0.14); }

/* ADHD aid — floating focus timer (session-wide time-boxing). */
.focus-timer {
    position: fixed;
    right: 2rem;
    /* Sit above the back-to-top button (bottom:2rem, 44px tall) so they don't overlap. */
    bottom: 5.5rem;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-hover);
    padding: 0.3rem 0.4rem;
}
.focus-timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
}
.focus-timer-btn.running { color: #fff; background: var(--primary); }
.focus-timer-done { font-size: 0.85rem; font-weight: 600; color: var(--text); padding-left: 0.5rem; }
.focus-timer-dismiss {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; line-height: 1; color: var(--text-muted); padding: 0 0.4rem;
}

.progress-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.progress-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(27, 94, 158, 0.1);
    border: 1px solid rgba(27, 94, 158, 0.25);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

/* ADHD aid — focus-mode "chunking": reveal wrong examples / joke on demand. */
.chunk-toggle {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(27, 94, 158, 0.08);
    border: 1px solid rgba(27, 94, 158, 0.25);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    margin: 0.25rem 0 0.5rem;
}
.chunk-toggle:hover { background: rgba(27, 94, 158, 0.14); }

/* ===== Learning path ===== */
/* Reached from the blue banner on the home screen. The International edition
   has the same screen; the class names are kept in step with it so the two
   stylesheets can be read side by side, with .path-level.upcoming taking the
   place of its .locked (nothing here is ever locked by progress — only by
   licence, which is .path-slug-locked). */

.path-overall {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin: 1rem 0 1.25rem;
    box-shadow: var(--shadow);
}
.path-overall-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.path-overall-pct { font-weight: 700; color: var(--primary); }

.path-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem; }

.path-level {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease;
}
.path-level.started { border-left-color: var(--primary); }
.path-level.complete { border-left-color: var(--success); }
/* Later in the path and not started yet — quietened, never disabled. */
.path-level.upcoming { opacity: 0.72; }

.path-level-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
}

.path-level-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.path-level.started .path-level-num { background: var(--primary); color: #fff; }
.path-level.complete .path-level-num { background: var(--success); color: #fff; }

.path-level-titles { flex: 1 1 auto; min-width: 0; }
.path-level-title { font-weight: 700; font-size: 1.08rem; color: var(--text); }

.path-level-progress-num {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.path-level-blurb {
    margin: 0.25rem 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.path-level-progress-bar {
    height: 6px;
    background: var(--bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 0.9rem;
}
.path-level-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
}
.path-level.complete .path-level-progress-fill { background: var(--success); }

/* Section name, shown only inside a stage that spans more than one section. */
.path-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0.35rem 0 0.4rem;
}

.path-level-slugs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.path-slug {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 0.32rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.path-slug:hover { border-color: var(--primary); text-decoration: none; }
.path-slug.completed {
    background: #E8F5EE;
    border-color: #BFE3CE;
    color: #1B7A46;
}
.path-slug-check { font-size: 0.8rem; line-height: 1; }
.path-slug-title { font-weight: 500; }

/* Freemium: outside the 10 preview topics. Still a link, but it goes to the
   licence screen rather than the topic. */
.path-slug-locked { opacity: 0.55; }
.path-slug-locked:hover { opacity: 0.8; border-color: var(--border); }

@media (max-width: 560px) {
    .path-level { padding: 0.9rem 0.95rem; }
    .path-level-title { font-size: 1rem; }
}

/* ===== Exercises ===== */
/* The learning path's other half: the path says what to read, the exercises
   mark whether it went in. Shares the quiz's question/option/result styling
   (.quiz-question, .quiz-option, .quiz-result) so a pupil who has taken the
   quiz recognises the screen immediately; everything below is the parts the
   quiz has no equivalent of - the schedule, the reading list, the record. */

.exercise-note {
    background: #EEF4FA;
    border-left: 3px solid var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* The reason a wrong example is wrong - the teaching moment of a proofreading
   question, so it is given room rather than tucked into the answer line. */
.exercise-explain {
    margin-top: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #FFF8E8;
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}

/* Definitions are a paragraph, not a specimen sentence - set them as prose. */
.quiz-question-sentence.is-definition {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.6;
}

/* ---- What to work on (results screen and hub) ---- */
.exercise-improve,
.exercise-weak {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin: 1.25rem 0;
    box-shadow: var(--shadow);
}

.exercise-improve-title,
.exercise-weak-title {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.exercise-improve-hint,
.exercise-weak-hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.exercise-improve-list { display: flex; flex-direction: column; gap: 0.4rem; }

.exercise-improve-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.exercise-improve-item:hover {
    border-color: var(--primary);
    background: #EEF4FA;
    text-decoration: none;
}
.exercise-improve-item-title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.exercise-improve-item-score {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.exercise-improve-item-go {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

/* ---- What happens next ---- */
.exercise-next {
    margin: 1.25rem 0 0.5rem;
    padding: 1rem 1.15rem;
    background: #EEF4FA;
    border-radius: var(--radius);
    font-size: 0.95rem;
    line-height: 1.6;
}
.exercise-next p { margin: 0 0 0.85rem; }

/* ---- The five cards ---- */
.exercise-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.25rem 0; }

.exercise-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow);
}
.exercise-card.is-ready { border-left-color: var(--primary); }
.exercise-card.is-locked { opacity: 0.72; }

.exercise-card-head { display: flex; align-items: center; gap: 0.85rem; }

.exercise-card-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.exercise-card.is-ready .exercise-card-num { background: var(--primary); color: #fff; }

.exercise-card-titles { flex: 1 1 auto; min-width: 0; }
.exercise-card-title { font-weight: 700; font-size: 1.08rem; color: var(--text); }
.exercise-card-sub { font-size: 0.85rem; color: var(--text-muted); }

.exercise-card-score { flex: 0 0 auto; text-align: right; }
.exercise-card-score-num {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.exercise-card-score-label { display: block; font-size: 0.78rem; color: var(--text-muted); }

.exercise-card-blurb {
    margin: 0.6rem 0 0.9rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.exercise-card-btn { display: inline-block; margin-top: 0.35rem; text-decoration: none; }
.exercise-card-btn:hover { text-decoration: none; }

.exercise-card-note {
    margin: 0.55rem 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- Trend ---- */
.exercise-trend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.65rem 0 0.25rem;
    color: var(--primary);
}
.exercise-sparkline { flex: 0 0 auto; display: block; }
.exercise-trend-label { font-size: 0.84rem; color: var(--text-muted); }

/* ---- The reading list that unlocks the retest ---- */
.exercise-card-study {
    margin: 0.75rem 0 0.9rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.exercise-card-study-head {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.exercise-card-study-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.exercise-study-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    color: var(--text);
    text-decoration: none;
}
.exercise-study-chip:hover { border-color: var(--primary); text-decoration: none; }
.exercise-study-chip.is-done {
    background: #E8F5EE;
    border-color: #BFE3CE;
    color: #1B7A46;
}

/* ---- Waiting for the retest ---- */
.exercise-card-waiting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.exercise-card-waiting-when {
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
}
/* Never a dead end: a child who wants to practise may always practise. */
.exercise-card-practise { font-size: 0.88rem; color: var(--primary); }

.exercise-report-link { margin: 1.5rem 0 2rem; font-size: 0.95rem; }

/* ---- "Watch how the exercises work" bar (top of /exercises) ----
   Quiet on purpose. It sits above the taster card and the exercise cards, and
   a pupil who already knows how this works needs to get past it in one glance,
   so it reads as a line of type with a play glyph rather than a second hero. */
.exercise-tour-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.25rem;
    padding: 0.7rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.exercise-tour-link:hover {
    background: #EEF4FA;
    border-color: var(--primary);
    border-left-color: var(--primary);
    text-decoration: none;
}
.exercise-tour-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.exercise-tour-link-icon { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }
.exercise-tour-link-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.exercise-tour-link-text strong { font-size: 0.98rem; font-weight: 700; }
.exercise-tour-link-hint { font-size: 0.85rem; color: var(--text-muted); }
.exercise-tour-link-go { color: var(--primary); font-weight: 700; flex: 0 0 auto; }

/* ===== Exercise record ===== */
.report-heading {
    margin: 1.75rem 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.report-note { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--text-muted); }

/* Tables scroll inside their own box so a narrow phone never scrolls the page
   sideways. */
.report-table-wrap {
    overflow-x: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.report-table th, .report-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.report-table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: var(--bg);
}
.report-table tbody tr:last-child th,
.report-table tbody tr:last-child td { border-bottom: none; }
.report-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .is-up { color: var(--success); font-weight: 700; }
.report-table .is-down { color: var(--danger); font-weight: 700; }

.report-export {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem;
    margin: 0.5rem 0 1rem;
}
.report-export-label { font-size: 0.9rem; color: var(--text); }
.report-export-optional { color: var(--text-muted); font-weight: 400; }
.report-export-input {
    display: block;
    margin-top: 0.3rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    min-width: 220px;
}
.report-export-input:focus { outline: 2px solid var(--primary-light); outline-offset: 1px; }

.report-danger { margin: 2rem 0 3rem; }
.report-danger-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
    max-width: 46rem;
}
.report-reset {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.95rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-muted);
    cursor: pointer;
    margin-right: 0.5rem;
}
.report-reset:hover { border-color: var(--text-muted); }
.report-reset.is-confirm { border-color: var(--danger); color: var(--danger); font-weight: 600; }

/* ===== Todo list =====
   Built on .report-table so the two tables in the app stay the same table. Only
   the tick column, the struck-through row and the empty state are new. */
.todo-table .todo-col-tick { width: 1%; text-align: center; }

.todo-tick {
    /* Deliberately larger than a default checkbox: this is tapped by a
       seven-year-old, on a phone, and the row next to it is a link. */
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}
.todo-tick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.todo-col-task { font-weight: 600; }
.todo-col-task a { color: var(--text); text-decoration: none; }
.todo-col-task a:hover { color: var(--primary); text-decoration: underline; }

.todo-col-from,
.todo-col-when { color: var(--text-muted); font-size: 0.85rem; }
.todo-col-when { font-variant-numeric: tabular-nums; }

/* Straight to the topic. Same wording, weight and colour as the results
   screen's "Read it →" — one affordance, learnt once. */
.todo-col-go { width: 1%; text-align: right; }
.todo-go {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.todo-go:hover { text-decoration: underline; }
.todo-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* The scribe. The whole row fades and is struck through, so a ticked job reads
   as finished at a glance rather than needing the checkbox to be inspected. */
.todo-table tbody tr.is-done th,
.todo-table tbody tr.is-done td {
    text-decoration: line-through;
    opacity: 0.55;
}
.todo-table tbody tr.is-done .todo-col-tick { text-decoration: none; }
.todo-table tbody tr.is-done .todo-col-task a,
.todo-table tbody tr.is-done .todo-go { color: var(--text-muted); }

.todo-note { margin-top: 0.75rem; max-width: 46rem; }

.todo-empty {
    margin: 1rem 0 2.5rem;
    padding: 1.15rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 46rem;
}
.todo-empty p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 560px) {
    .exercise-card { padding: 0.9rem 0.95rem; }
    .exercise-card-title { font-size: 1rem; }
    .exercise-improve-item { flex-wrap: wrap; }

    /* On a phone the row keeps only what the job needs: the tick, the topic and
       the way into it. Which exercise set it and when are reference, and the
       four remaining columns would otherwise scroll sideways inside their box. */
    .todo-table .todo-col-from,
    .todo-table .todo-col-when { display: none; }

    /* And the topic name wraps rather than forcing the box to scroll sideways.
       .report-table sets nowrap, which is right for the record's short numeric
       columns and wrong for a title like "Active and Passive Voice" on a
       320px-wide phone. "Read it →" keeps its own nowrap so it never splits. */
    .todo-table .todo-col-task { white-space: normal; }
}

.key-field-hint-problem {
    color: var(--danger);
}