:root {
    color-scheme: light;
    --bg: #f5f8fc;
    --bg-warm: #fff8ed;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-strong: #ffffff;
    --surface-play: linear-gradient(180deg, #fffef8 0%, #fff6e9 100%);
    --surface-soft: #eef6ff;
    --text: #14213d;
    --muted: #5c677d;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #e8f0ff;
    --accent: #f59e0b;
    --accent-dark: #b45309;
    --accent-soft: #fff2d8;
    --success: #15803d;
    --success-soft: #e7f8ef;
    --danger: #b91c1c;
    --danger-soft: #ffe8e6;
    --special: #7c3aed;
    --special-soft: #f0e9ff;
    --grammar-verb: #166534;
    --grammar-verb-soft: #e8f7ed;
    --grammar-tense: #1d4ed8;
    --grammar-tense-soft: #e8f0ff;
    --grammar-mode: #0f766e;
    --grammar-mode-soft: #ddf7f3;
    --grammar-subject: #b45309;
    --grammar-subject-soft: #fff2d8;
    --grammar-person: #6d28d9;
    --grammar-person-soft: #f0e9ff;
    --grammar-stem: #0f766e;
    --grammar-stem-soft: #dcfce7;
    --grammar-ending: #9f1239;
    --grammar-ending-soft: #ffe4ec;
    --line: #d9e2ec;
    --line-strong: #c6d3e1;
    --focus: #f59e0b;
    --shadow: 0 24px 60px rgba(20, 33, 61, 0.1);
    --shadow-soft: 0 14px 32px rgba(20, 33, 61, 0.08);
    --radius-lg: 1.25rem;
    --radius-md: 0.9rem;
    --radius-sm: 0.65rem;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(232, 240, 255, 0.92) 0%, rgba(255, 248, 237, 0.72) 44%, rgba(245, 248, 252, 0.98) 100%),
        var(--bg);
    font-family: "Avenir Next", Nunito, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    margin-block: 0 0.55rem;
    letter-spacing: 0;
}

h1 {
    font-size: clamp(2rem, 7vw, 3.75rem);
    line-height: 1;
}

h2 {
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.15;
}

h3 {
    font-size: 1.12rem;
    line-height: 1.2;
}

p {
    margin-block: 0 0.75rem;
}

.skip-link {
    position: absolute;
    z-index: 10;
    left: 1rem;
    top: 1rem;
    transform: translateY(-150%);
    background: var(--surface-strong);
    border: 2px solid var(--focus);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-shell {
    width: min(72rem, calc(100% - 2rem));
    margin-inline: auto;
}

.site-header {
    position: sticky;
    z-index: 5;
    top: 0;
    border-bottom: 1px solid rgba(217, 226, 236, 0.7);
    background: rgba(245, 248, 252, 0.82);
    backdrop-filter: blur(14px);
}

.site-header .site-shell {
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 0.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
}

.brand-mark {
    display: block;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
}

.brand-name {
    /* MathBrain's wordmark: heavy, tightly tracked, deep navy. */
    font-size: 1.32rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.94rem;
}

.site-nav-primary {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    align-items: center;
}

/* The account links inside the nav exist for the phone panel only. */
.site-nav-more { display: none; }

.site-nav a {
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.4rem 0.72rem;
    text-decoration: none;
    color: var(--muted);
    font-weight: 800;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.site-nav a:hover {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    transform: translateY(-1px);
}

.site-main {
    padding-block: clamp(1.25rem, 3vw, 2.5rem) 4rem;
}

.hero {
    min-height: calc(100vh - 7rem);
    display: grid;
    align-content: center;
    padding-block: 3rem;
}

.hero h1 {
    max-width: 12ch;
}

.hero p {
    max-width: 43rem;
    color: var(--muted);
    font-size: 1.13rem;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--primary-dark);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}

.panel,
.metric-card,
.dashboard-child,
.practice-card,
.feedback-panel {
    background: var(--surface);
    border: 1px solid rgba(198, 211, 225, 0.9);
    box-shadow: var(--shadow-soft);
}

.panel {
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 1.35rem);
}

.story-banner {
    border-color: rgba(124, 58, 237, 0.14);
    background: linear-gradient(180deg, rgba(240, 233, 255, 0.92), rgba(255, 255, 255, 0.97));
}

.story-banner h3 {
    margin-bottom: 0.25rem;
}

.story-hook {
    color: var(--muted);
    font-style: italic;
}

.stack {
    display: grid;
    gap: 1rem;
}

.grid {
    display: grid;
    gap: 1rem;
}

.metric-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    padding: 1rem;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.metric-value {
    display: block;
    margin-top: 0.3rem;
    color: var(--text);
    font-size: 1.85rem;
    line-height: 1.1;
    font-weight: 900;
}

.metric-label {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.metric-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.metric-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.55rem;
}

.metric-list dt {
    color: var(--muted);
    font-weight: 700;
}

.metric-list dd {
    margin: 0;
    font-weight: 900;
}

.section-heading {
    display: flex;
    gap: 1rem;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.dashboard-child-list {
    display: grid;
    gap: 1rem;
}

.dashboard-child {
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 3vw, 1.25rem);
    display: grid;
    gap: 0.9rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 251, 255, 0.95));
}

/* The card of the child the header points at. */
.dashboard-child-active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-soft); }

.dashboard-child-doors { gap: 0.6rem; }
.dashboard-child-doors .button { min-width: 7.5rem; justify-content: center; }

/* Four figures per child: two by two on a phone, one row on a desktop. */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.dashboard-stats div {
    border: 1px solid rgba(217, 226, 236, 0.95);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
    padding: 0.72rem;
}

.dashboard-stats dt {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 750;
}

.dashboard-stats dd {
    margin: 0.1rem 0 0;
    font-size: 1.22rem;
    font-weight: 900;
}

.tag-list,
.item-list {
    list-style: none;
    padding: 0;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.tag-list li {
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: var(--primary-soft);
    padding: 0.28rem 0.62rem;
    color: var(--primary-dark);
    font-size: 0.9rem;
    font-weight: 800;
}

.item-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.item-list li {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid rgba(217, 226, 236, 0.72);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.62);
    padding: 0.72rem 0.85rem;
}

.compact-list li {
    justify-content: start;
}

.button.compact,
button.compact {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
}

@media (min-width: 48rem) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid.two-columns {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }

    .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.button,
button,
input[type="submit"] {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6 0%, var(--primary) 100%);
    color: white;
    padding: 0.62rem 1rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.24);
}

.button.secondary,
.button.button-secondary,
button.secondary,
button.button-secondary {
    border-color: #cfe0ff;
    background: var(--surface-strong);
    color: var(--primary-dark);
    box-shadow: 0 10px 20px rgba(20, 33, 61, 0.07);
}

.button.danger,
button.danger {
    border-color: var(--danger);
    background: linear-gradient(180deg, #dc2626 0%, var(--danger) 100%);
    color: white;
}

form {
    display: grid;
    gap: 1rem;
}

label {
    display: block;
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    padding: 0.58rem 0.75rem;
    font: inherit;
}

textarea {
    min-height: 6rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: auto;
    accent-color: var(--primary);
}

.helptext,
.muted {
    color: var(--muted);
    font-size: 0.95rem;
}

.errorlist {
    color: var(--danger);
    margin: 0.25rem 0;
}

.messages {
    padding-block: 0 1rem;
}

.message {
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    padding: 0.8rem 1rem;
    box-shadow: 0 10px 22px rgba(20, 33, 61, 0.06);
}

.message.success,
.message-success {
    border-left-color: var(--success);
    background: var(--success-soft);
}

.message.warning,
.message-warning {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.message.error,
.message-error {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 42rem;
}

caption {
    text-align: left;
    font-weight: 900;
    margin-bottom: 0.75rem;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 0.75rem;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: 0.9rem;
}

pre {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #101827;
    color: #f8fafc;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.definition-grid {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

.definition-grid div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.6rem;
}

.definition-grid dt {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 750;
}

.definition-grid dd {
    margin: 0.15rem 0 0;
    font-weight: 700;
}

.checkbox-grid ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.55rem;
    max-height: 22rem;
    margin: 0;
    overflow: auto;
    padding: 0;
    list-style: none;
}

.checkbox-grid li {
    margin: 0;
}

.checkbox-grid label {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    min-height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.68);
    padding: 0.5rem 0.65rem;
    font-weight: 800;
}

.checkbox-grid-compact label {
    min-height: 2.4rem;
    font-size: 0.94rem;
}

.stack-small {
    display: grid;
    gap: 0.6rem;
}

.stack-small + .stack-small {
    margin-top: 1rem;
}

.compact-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* --- Skill focus page --- */

.focus-summary {
    border-left: 0.35rem solid var(--primary);
}

.focus-summary-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.focus-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.focus-chip {
    display: inline-block;
    border: 1px solid #cfe0ff;
    border-radius: 999px;
    background: var(--primary-soft);
    padding: 0.25rem 0.65rem;
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 800;
}

.focus-chip-default {
    border-color: var(--line);
    background: var(--surface);
    color: var(--muted);
}

.focus-chip-verb {
    border-color: rgba(22, 101, 52, 0.25);
    background: var(--grammar-verb-soft);
    color: var(--grammar-verb);
}

.focus-chip-tense {
    border-color: rgba(29, 78, 216, 0.25);
    background: var(--grammar-tense-soft);
    color: var(--grammar-tense);
}

.fieldset-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text);
    padding: 0;
    margin: 0;
}

.skill-domain-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.skill-domain-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.verb-group-heading {
    font-size: 0.9rem;
    color: var(--grammar-verb);
}

.verb-select-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.actions form {
    display: inline-flex;
}

.practice-screen {
    width: min(980px, calc(100% - 28px));
    padding-block: 0 3rem;
    gap: 22px;
}

.practice-screen > h1 + p {
    color: var(--muted);
    font-weight: 750;
}

.practice-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-play);
    padding: clamp(1.4rem, 4vw, 2.25rem) clamp(1rem, 4vw, 1.75rem);
    box-shadow: var(--shadow);
    text-align: center;
}

.practice-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.45rem;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--special));
}

.practice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 850;
}

.practice-meta span {
    border: 1px solid rgba(245, 158, 11, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.3rem 0.62rem;
}

.instruction,
.prompt {
    margin: 0;
}

.instruction {
    color: var(--muted);
    font-weight: 750;
}

.exercise-passage {
    border: 1px solid rgba(60, 130, 246, 0.22);
    border-left: 0.35rem solid var(--primary);
    border-radius: var(--radius-md);
    background: #fffdf7;
    padding: 1rem;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: left;
}

.exercise-passage p {
    margin: 0;
}

.exercise-passage .source-label {
    margin-bottom: 0.35rem;
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.prompt {
    border: 1px solid rgba(198, 211, 225, 0.7);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.95rem 1rem;
    font-size: clamp(1.2rem, 4vw, 1.65rem);
    font-weight: 900;
    text-align: center;
}

.conjugation-blank {
    margin: 0;
    border: 1px solid rgba(198, 211, 225, 0.9);
    border-left: 0.45rem solid var(--grammar-subject);
    border-radius: var(--radius-md);
    background: #ffffff;
    color: var(--text);
    padding: clamp(1rem, 4vw, 1.35rem);
    font-size: clamp(1.35rem, 4vw, 2rem);
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.grammar-clues,
.grammar-review {
    border: 1px solid rgba(198, 211, 225, 0.9);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
    padding: 1rem;
    text-align: left;
}

.grammar-clues h3,
.grammar-review h4 {
    margin: 0 0 0.75rem;
    color: var(--text);
    font-size: 1rem;
}

.grammar-clue-grid {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.grammar-clue {
    display: grid;
    grid-template-columns: minmax(6.25rem, 0.42fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    border: 1px solid var(--line);
    border-left: 0.42rem solid var(--muted);
    border-radius: var(--radius-sm);
    background: #ffffff;
    padding: 0.62rem 0.75rem;
}

.grammar-clue dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.grammar-clue dd {
    margin: 0;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 900;
}

.grammar-clue-verb,
.grammar-clue-base_verb {
    border-left-color: var(--grammar-verb);
    background: var(--grammar-verb-soft);
}

.grammar-clue-tense,
.grammar-clue-verb_form {
    border-left-color: var(--grammar-tense);
    background: var(--grammar-tense-soft);
}

.grammar-clue-mode {
    border-left-color: var(--grammar-mode);
    background: var(--grammar-mode-soft);
}

.grammar-clue-subject {
    border-left-color: var(--grammar-subject);
    background: var(--grammar-subject-soft);
}

.grammar-clue-person,
.grammar-clue-number,
.grammar-clue-form,
.grammar-clue-pattern {
    border-left-color: var(--grammar-person);
    background: var(--grammar-person-soft);
}

.grammar-clue-stem {
    border-left-color: var(--grammar-stem);
    background: var(--grammar-stem-soft);
}

.grammar-clue-ending,
.grammar-clue-agreement_marker {
    border-left-color: var(--grammar-ending);
    background: var(--grammar-ending-soft);
}

.grammar-clue-answer {
    border-left-color: var(--success);
    background: var(--success-soft);
}

.answer-form {
    display: grid;
    gap: 1rem;
}

.answer-panel {
    width: min(100%, 680px);
    margin-inline: auto;
    border: 1px solid rgba(198, 211, 225, 0.88);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.74);
    padding: clamp(1rem, 3vw, 1.25rem);
    box-shadow: var(--shadow-soft);
    text-align: left;
}

.answer-panel input[type="text"],
.answer-panel textarea {
    min-height: 4rem;
    border-radius: var(--radius-md);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 850;
    text-align: center;
}

.answer-panel .button[type="submit"],
.answer-panel button[type="submit"],
.answer-panel input[type="submit"] {
    width: 100%;
    min-height: 3.85rem;
    border-radius: var(--radius-md);
    font-size: 1.08rem;
}

.conjugation-table-fields {
    display: grid;
    gap: 0.7rem;
}

.conjugation-table-row {
    display: grid;
    grid-template-columns: minmax(5rem, 0.34fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.75rem;
}

.conjugation-table-subject {
    color: var(--grammar-subject);
    font-size: 1.05rem;
    font-weight: 900;
}

.conjugation-table-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.conjugation-table-entry input[type="text"] {
    min-height: 3.25rem;
    font-size: 1.25rem;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    border: 0;
    margin: 0;
    padding: 0;
}

.choice-grid legend {
    grid-column: 1 / -1;
    margin-bottom: 0.6rem;
    color: var(--muted);
    font-weight: 900;
}

.choice-tile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.85rem;
    box-shadow: 0 8px 18px rgba(20, 33, 61, 0.05);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.choice-tile:hover,
.choice-tile:focus-within {
    border-color: #9bbcff;
    background: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.choice-tile span {
    font-size: 1.06rem;
    font-weight: 850;
}

.token-bank,
.ordered-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    min-height: 3rem;
    align-items: center;
}

.ordered-answer {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.55);
    padding: 0.75rem;
}

.token-button,
.ordered-chip {
    min-height: 2.75rem;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    font-weight: 900;
}

.token-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ordered-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfe0ff;
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.audio-player {
    border: 1px solid #cfe0ff;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff, #eef6ff);
    padding: 1rem;
    text-align: left;
}

.audio-player figure {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.audio-player audio {
    width: 100%;
}

.audio-player figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.92rem;
}

.pronunciation-recorder {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
}

.feedback-panel {
    border-left: 0.45rem solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    display: grid;
    gap: 0.5rem;
}

.feedback-panel h2,
.feedback-panel p {
    margin: 0;
}

.feedback-review {
    display: grid;
    gap: 0.65rem;
    border: 1px solid rgba(180, 35, 24, 0.18);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.9rem;
}

.feedback-review h3,
.feedback-review p {
    margin: 0;
}

.feedback-review h3 {
    font-size: 1rem;
}

.feedback-review .exercise-passage.compact {
    padding: 0.8rem;
}

.review-question {
    font-weight: 850;
}

/* ------------------------------------------------ Going over a session
   One row per question, in the order asked. The left edge says at a glance
   how the answer went; the words below say what to talk about. */
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.review-row {
    border: 1px solid var(--line);
    border-left: 5px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    padding: 0.8rem 1rem;
    display: grid;
    gap: 0.5rem;
}
.review-row.review-right { border-left-color: var(--success); }
.review-row.review-wrong { border-left-color: var(--danger); }
.review-row-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.review-number {
    flex: none;
    width: 2rem; height: 2rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900;
    background: var(--primary-soft); color: var(--primary-dark);
}
.review-instruction { margin: 0; font-weight: 700; }
.review-row .review-question { margin: 0.2rem 0 0; }
.review-skills { margin: 0.2rem 0 0; font-size: 0.85rem; }
.review-answers p { margin: 0.15rem 0; }
.review-reading { margin: 0; padding-left: 1.2rem; }

.feedback-value-wrong {
    color: var(--danger);
    font-weight: 900;
}

.feedback-value-correct {
    color: var(--success);
    font-weight: 900;
}

.field-review-table {
    display: grid;
    gap: 0.35rem;
    width: 100%;
}

.field-review-header,
.field-review-row {
    display: grid;
    grid-template-columns: minmax(5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: stretch;
}

.field-review-header {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.field-review-row span {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.55rem 0.65rem;
    font-weight: 850;
}

.field-review-row .field-review-subject {
    color: var(--ink);
}

.field-review-row .field-review-user {
    color: var(--success);
}

.field-review-row.field-review-incorrect .field-review-user,
.field-review-row.field-review-missing .field-review-user {
    border-color: rgba(180, 35, 24, 0.35);
    background: rgba(180, 35, 24, 0.08);
    color: var(--danger);
}

.field-review-row .field-review-correct {
    border-color: rgba(22, 101, 52, 0.3);
    background: rgba(22, 101, 52, 0.08);
    color: var(--success);
}

.reading-activity,
.reading-question-panel,
.reading-results {
    display: grid;
    gap: 1rem;
    width: min(100%, 760px);
    margin-inline: auto;
    text-align: left;
}

.reading-activity-header h3,
.reading-question-panel h3,
.reading-results h3 {
    margin: 0;
}

.reading-activity-header {
    display: grid;
    gap: 0.25rem;
    text-align: center;
}

.reading-activity-header h3 {
    color: var(--text);
    font-size: clamp(1.45rem, 4vw, 2.15rem);
    font-weight: 950;
    line-height: 1.15;
}

.reading-passage-card {
    position: relative;
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-left: 0.45rem solid var(--primary);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.98)),
        #ffffff;
    padding: clamp(1.15rem, 3vw, 1.8rem);
    box-shadow: 0 16px 34px rgba(20, 33, 61, 0.08);
    color: #19233d;
    font-size: clamp(1.05rem, 2.4vw, 1.18rem);
    line-height: 1.78;
}

.reading-passage-card p {
    margin: 0;
}

.reading-passage-card p + p {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(217, 226, 236, 0.8);
}

.reading-question-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    align-items: end;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.7rem;
}

.reading-question-heading .eyebrow {
    margin: 0;
}

.reading-question-card {
    position: relative;
    border: 1px solid rgba(198, 211, 225, 0.95);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    padding: clamp(1rem, 3vw, 1.25rem);
    margin: 0;
    box-shadow: 0 10px 24px rgba(20, 33, 61, 0.06);
}

.reading-question-card + .reading-question-card,
.reading-result-item + .reading-result-item {
    margin-top: 0.9rem;
}

.reading-question-card legend {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    width: 100%;
    color: var(--text);
    font-size: clamp(1rem, 2.5vw, 1.12rem);
    font-weight: 900;
    line-height: 1.35;
    padding: 0 0.35rem;
}

.reading-question-card legend span {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 2rem;
    align-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #fef3c7, var(--accent-soft));
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: var(--primary-dark);
    padding: 0.15rem 0.65rem;
    font-size: 0.88rem;
}

.reading-choice-grid {
    margin-top: 1rem;
}

.reading-choice-grid .choice-tile {
    min-height: 4rem;
    border-color: rgba(198, 211, 225, 0.95);
    background: #fbfdff;
}

.reading-choice-grid .choice-tile:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.14);
}

.reading-choice-grid .choice-tile input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--primary);
}

.reading-result-list {
    padding-left: 1.25rem;
}

.reading-result-item {
    border: 1px solid var(--line);
    border-left: 0.35rem solid var(--line-strong);
    border-radius: var(--radius-md);
    background: #ffffff;
    padding: 0.9rem;
}

.reading-result-correct {
    border-left-color: var(--success);
}

.reading-result-incorrect {
    border-left-color: var(--danger);
}

.reading-evidence {
    border-left: 0.25rem solid var(--focus);
    background: var(--accent-soft);
    padding: 0.65rem 0.8rem;
}

.feedback-correct {
    border-left-color: var(--success);
    background: var(--success-soft);
}

.feedback-incorrect,
.feedback-invalid {
    border-left-color: var(--danger);
    background: var(--danger-soft);
}

.feedback-partially_correct,
.feedback-needs_review,
.feedback-unscorable {
    border-left-color: var(--focus);
    background: var(--accent-soft);
}

@media (max-width: 42rem) {
    .site-shell {
        width: min(100% - 1rem, 72rem);
    }

    .site-header .site-shell {
        align-items: flex-start;
    }

    .site-nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.2rem;
    }

    .site-nav a {
        flex: 0 0 auto;
    }

    .metric-grid,

    .button,
    button,
    input[type="submit"] {
        width: 100%;
    }

    .token-bank .token-button,
    .ordered-answer .ordered-chip {
        width: auto;
    }

    .actions {
        align-items: stretch;
    }

    .actions > *,
    .actions form {
        width: 100%;
    }

    .grammar-clue {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .conjugation-table-row {
        grid-template-columns: 1fr;
    }

    .choice-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-contrast: more) {
    .grammar-clue,
    .grammar-clues,
    .grammar-review {
        background: #ffffff;
        border-color: var(--text);
    }
}

/* ---------------------------------------------------------------------------
   Shared component layer, aligned with MathBrain.

   MathBrain and LingoBrain are separate projects but the same family of
   products, and a parent moves between them. The tokens were already shared;
   these are the components that were not: the top bar, cards, chips, pagers
   and the child-facing play shell. Where the two products disagreed on a
   value (button radius, control height) LingoBrain now follows MathBrain.
   --------------------------------------------------------------------------- */

/* Buttons: MathBrain uses a 16px radius and a 48px target, not a pill. */
.button,
button,
input[type="submit"] {
    min-height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.2);
}

.button.compact,
button.compact {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.9rem;
}

.button.danger,
button.danger {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    box-shadow: 0 10px 18px rgba(220, 38, 38, 0.2);
}

/* A submit button should hug its label rather than span the form. */
form > button,
form > input[type="submit"] {
    width: auto;
}

/* Top bar ------------------------------------------------------------------ */

.site-header .site-shell.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    min-height: 4.75rem;
    padding-block: 0.75rem;
}

.site-nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    /* Not centred: a centred row that overflows its box pushes its first
       item out of reach on the left, which is how "Overview" lost its
       first letter under the logo on a laptop screen. */
    justify-content: flex-start;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
    white-space: nowrap;
}

/* Without this the parent had no way to tell which page they were on. */
.site-nav a.is-current {
    color: var(--primary-dark);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--primary-soft);
}

.topbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.active-child-form { margin: 0; }

.active-child-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 2px 10px 2px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
}

.active-child-chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    flex: 0 0 auto;
}

.active-child-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap;
}

.active-child-select {
    min-height: 30px;
    max-width: 11rem;
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-weight: 800;
    font-size: 0.9rem;
}

/* Account menu ------------------------------------------------------------- */

.account-menu { position: relative; }

.account-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
}

.account-menu-trigger::-webkit-details-marker { display: none; }

.account-menu[open] .account-menu-trigger {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--primary-soft);
}

.account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    display: grid;
    gap: 2px;
    min-width: 14rem;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.account-menu-panel a {
    padding: 9px 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.94rem;
    text-decoration: none;
}

.account-menu-panel a:hover { background: var(--primary-soft); }

/* Landing page ------------------------------------------------------------- */

.hero-lead {
    max-width: 52ch;
    font-size: 1.06rem;
    color: var(--muted);
}

.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 0.4rem 0.9rem;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.feature-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.feature-card {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.66);
}

.feature-card strong { display: block; margin-bottom: 4px; }

.steps-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps-list strong { display: block; margin-bottom: 2px; }

.narrow-page { max-width: 42rem; }

/* Lists, filters and pagers ------------------------------------------------ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.filter-field { display: grid; gap: 2px; }

.filter-bar label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--muted);
}

.filter-bar input,
.filter-bar select { min-width: 12rem; width: auto; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pager-status { color: var(--muted); font-size: 0.9rem; }

.pager [aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Footer ------------------------------------------------------------------- */

.site-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 1.4rem 2rem;
}

.footer-brand p { max-width: 34ch; margin: 4px 0 0; font-size: 0.9rem; }

.footer-language-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-language-form label { font-size: 0.85rem; color: var(--muted); }

.footer-language-form select { min-height: 38px; width: auto; }

/* Child-facing play shell -------------------------------------------------- */

/* During a session the footer goes; the header stays, as it does in
   MathBrain. Hiding it left a parent with no way back to the rest of the
   app except the small "Leave practice" link. */
.play-shell .site-footer { display: none; }

/* Row above the scoreboard: the way out and the way to stop. */
.play-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-block: 0.9rem 0;
}

.play-bar form { margin: 0; }

.play-exit {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--muted);
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Scoreboard, matching MathBrain's solo header. */
.play-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid rgba(198, 211, 225, 0.9);
    box-shadow: var(--shadow-soft);
}

.play-header-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.play-header-main h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
}

.score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    min-height: 72px;
    padding: 12px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #fff0cc 100%);
    border: 1px solid #f0d48d;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.score-pill strong {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
}

.solo-progress-track {
    width: min(340px, 100%);
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
    margin-top: 4px;
}

.solo-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e 0%, #2563eb 100%);
    transition: width 220ms ease;
}

@media (max-width: 40rem) {
    .play-header {
        align-items: stretch;
        flex-direction: column;
    }

    .score-pill { min-height: 60px; }
}

/* The brand, the nav, the child picker and the account menu do not fit on one
   row below a wide desktop, and squeezing them clipped the first nav item. */
@media (max-width: 64rem) {
    .site-header .site-shell.topbar { flex-wrap: wrap; }
    .site-nav {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        padding-bottom: 2px;
    }
}

@media (max-width: 36rem) {
    .account-menu-label { display: none; }
    .active-child-select { max-width: 7.5rem; }
}

/* The landing hero filled a whole viewport and centred its text, which pushed
   the first line of copy far below the fold. */
.hero {
    min-height: 0;
    align-content: start;
    padding-block: clamp(1.5rem, 5vw, 3rem) 1.5rem;
}

.hero h1 {
    max-width: 18ch;
    font-size: clamp(2rem, 5.5vw, 3.1rem);
}

/* Destructive and rarely used profile actions, folded away from the routine
   ones they used to sit beside. */
.danger-zone summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--muted);
}

.danger-zone[open] summary { margin-bottom: 0.75rem; }

/* A long heading used to push its action button onto its own line. */
.section-heading > :first-child { flex: 1 1 18rem; min-width: 0; }
.section-heading > :last-child { flex: 0 0 auto; }

/* Form fields ------------------------------------------------------------- */

.field { margin-bottom: 0.9rem; }

.field > label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 800;
    font-size: 0.92rem;
}

.field .helptext {
    margin: 0.3rem 0 0;
    font-size: 0.86rem;
}

.field .errorlist {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
}

/* An auth form on the bare page background read as unfinished; it now sits in
   a card like every other block of content. */
.auth-card {
    width: min(30rem, 100%);
    margin-inline: auto;
}

.auth-card form > button { width: 100%; }

.auth-alt {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.92rem;
}

/* The signed-out header puts real buttons inside the nav, where the generic
   `.site-nav a` rules fought the `.button` rules and mangled the labels. */
.site-nav a.button {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
}

.site-nav a.button.secondary {
    color: var(--primary-dark);
}

.site-nav a.button:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%);
    transform: translateY(-1px);
}

.site-nav a.button.secondary:hover {
    background: var(--primary-soft);
}

/* Practice focus page ------------------------------------------------------ */

.focus-page { padding-bottom: 6rem; }

/* The save button used to be the last thing after a hundred checkboxes. */
.focus-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0.85rem clamp(0.75rem, 3vw, 1.35rem);
    margin-inline: calc(clamp(0.75rem, 3vw, 1.35rem) * -1);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 24px rgba(20, 33, 61, 0.07);
}

.verb-picker {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.6);
}

.verb-picker > summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--primary-dark);
}

.verb-picker[open] > summary { margin-bottom: 0.75rem; }

.audio-help {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.audio-help > summary { cursor: pointer; font-weight: 800; }

.audio-help label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.audio-help select { width: auto; min-height: 38px; }

/* Recent sessions list: date, outcome and status on one line. */
.session-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.session-list li > a { font-weight: 800; }
.session-list li > .muted { flex: 1 1 auto; font-size: 0.9rem; }


/* Collapsible navigation ---------------------------------------------------- */

/* The button only exists on narrow screens; the script that drives it hides
   nothing until then. */
.nav-toggle {
    display: none;
    flex: 0 0 auto;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
    font-weight: 800;
    font-size: 0.9rem;
    box-shadow: none;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

.nav-toggle[aria-expanded="true"] {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--primary-soft);
    color: var(--primary-dark);
}

@media (max-width: 48rem) {
    .site-header .site-shell.topbar {
        position: relative;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .nav-toggle { display: inline-flex; }

    /* Below this width the six entries cannot share a row with the brand, the
       child picker and the account menu, so they become a panel. */
    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        z-index: 20;
        flex-basis: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface-strong);
        box-shadow: var(--shadow);
        overflow: visible;
    }

    .site-nav.is-open { display: flex; }

    .site-nav-primary {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    /* Support and the account links close the panel, under a rule. */
    .site-nav-more {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid var(--line);
    }

    .site-nav a {
        justify-content: flex-start;
        min-height: 2.75rem;
        border-radius: 10px;
    }

    .site-nav-support { color: #7a4a00; }

    .nav-toggle-label { display: none; }
    .brand-mark { width: 2.35rem; height: 2.35rem; }
    .brand-name { font-size: 1.05rem; }
    .brand { gap: 0.5rem; }

    /* Brand, child, menu: three things on the row. Support and Account moved
       into the panel — with them the row overflowed and the child picker was
       cut off at the right edge of a phone. */
    .topbar-meta .support-button,
    .topbar-meta .account-menu { display: none; }
    .topbar-meta { order: 2; margin-left: auto; min-width: 0; }
    .nav-toggle { order: 3; }
    .site-header .button { width: auto; }
    .active-child-label { display: none; }
    .active-child-select { max-width: 7.5rem; }
}

@media (max-width: 30rem) {
    .active-child-select { max-width: 6rem; }
}

@media (max-width: 26rem) {
    /* Last resort on the narrowest phones: the name stays, the mark shrinks. */
    .brand-mark { width: 2rem; height: 2rem; }
    .brand-name { font-size: 0.95rem; }
    .nav-toggle { padding: 0 10px; }
    .active-child-chip { padding-inline: 8px; }
}

/* Child progression --------------------------------------------------------- */

.level-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border: 1px solid rgba(198, 211, 225, 0.9);
    box-shadow: var(--shadow-soft);
}

.level-card-main { display: grid; gap: 8px; min-width: 0; }
.level-card-main h2 { margin: 0; }

/* One bar per day of the window; quiet days keep their slot so the rhythm of
   practice is visible, not just the busy days. */
.activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-chart li {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
}

.activity-bar {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #2563eb 0%, #22c55e 100%);
}

.activity-chart li:has(.activity-bar[style*="height: 0%"]) .activity-bar {
    background: rgba(148, 163, 184, 0.28);
}

.activity-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    margin: 0;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Badge colour encodes the kind of achievement, not the badge itself:
   accuracy (green), habit (blue), mastery (purple), discovery (amber).
   Each tile sets the pair once and everything inside reads from it. */
.badge-tile-accuracy { --badge: var(--success); --badge-soft: var(--success-soft); }
.badge-tile-habit { --badge: var(--primary); --badge-soft: var(--primary-soft); }
.badge-tile-mastery { --badge: var(--special); --badge-soft: var(--special-soft); }
.badge-tile-discovery { --badge: var(--accent-dark); --badge-soft: var(--accent-soft); }

.badge-tile {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--badge, var(--line-strong));
    border-radius: var(--radius-md);
    background: var(--badge-soft, rgba(255, 255, 255, 0.8));
}

.badge-tile strong { color: var(--badge, var(--text)); }
.badge-tile .status-chip { justify-self: start; margin-top: 4px; }
.badge-tile .muted { font-size: 0.86rem; }

/* The date it was won carries the family colour, so an earned badge is
   unmistakable at a glance rather than only on reading the chip. */
.badge-chip-earned {
    background: var(--surface-strong);
    border-color: var(--badge, var(--line-strong));
    color: var(--badge, var(--text));
    font-weight: 600;
}

/* A locked badge stays readable — it is the next goal, not a disabled
   control. It keeps the family colour only as a marker on the edge, so the
   grouping still reads without competing with what the child has won. */
.badge-tile-locked {
    background: transparent;
    border-style: dashed;
    border-left-style: solid;
    /* Plain fallback first: without it, a browser that cannot compute the
       mix would keep the full-strength colour and a locked badge would read
       as won. */
    border-left-color: var(--line-strong);
    border-left-color: color-mix(in srgb, var(--badge, var(--line-strong)) 35%, transparent);
}

.badge-tile-locked strong { color: var(--muted); }

.skill-progress-list li {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(4rem, 10rem) auto auto;
    align-items: center;
    gap: 0.75rem;
}

.skill-progress-track {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.skill-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e 0%, #2563eb 100%);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .level-card { flex-direction: column; align-items: stretch; }
    .skill-progress-list li { grid-template-columns: 1fr auto; }
    .skill-progress-track { grid-column: 1 / -1; }
}

/* Shared session scoreboard ------------------------------------------------- */

.player-scores {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.player-score {
    display: grid;
    gap: 2px;
    min-width: 5.5rem;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.player-score-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
}

.player-score strong { font-size: 1.4rem; line-height: 1; }

/* Whose turn it is has to be obvious from across a table. */
.player-score-turn {
    border-color: #f0d48d;
    background: linear-gradient(135deg, #ffffff 0%, #fff0cc 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.player-score-turn .player-score-name { color: var(--accent-dark); }

/* ---------------------------------------------------------------------------
   The child page: one bar for the six things a parent reads about one child.
   The tabs scroll sideways rather than wrapping, so the row keeps its shape on
   a phone instead of becoming a two-line block that pushes the page down.
   --------------------------------------------------------------------------- */
.child-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.child-tabs::-webkit-scrollbar { display: none; }

.child-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

.child-tab:hover { color: var(--primary-dark); }

.child-tab.is-current {
    color: var(--primary-dark);
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--primary-soft);
}

.child-page-header .chip-row { margin-top: 8px; }

.enrollment-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.enrollment-picker select {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

/* A finding is an observation, not a verdict: the colour marks the kind of
   thing being said and nothing is painted red. */
.finding { border-left: 3px solid var(--line); padding-left: 12px; }
.finding-support { border-left-color: #f59e0b; }
.finding-notice { border-left-color: #2563eb; }
.finding-positive { border-left-color: #10b981; }

.trend-delta { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Support, contact and consents.
   --------------------------------------------------------------------------- */

/* The one warm colour in the chrome, so "support" reads as an invitation
   rather than as another navigation item. */
.support-button {
    background: linear-gradient(135deg, #ffdd8f 0%, #f59e0b 100%);
    color: #4a2b00;
    border-color: rgba(180, 110, 0, 0.35);
}

.support-button:hover { color: #3a2100; }

/* The honeypot: off-screen rather than display:none, because a bot that skips
   hidden fields would step over a display:none input — and the point is for it
   to fill this one in. Screen readers are kept away by aria-hidden. */
.antispam-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form textarea { width: 100%; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.footer-links a { font-weight: 700; }
.footer-support-link { color: #b45309; }

.consent-card-granted { border-left: 3px solid #10b981; }
.consent-meta { font-size: 0.9rem; }
.consent-decision { margin: 0; }

/* Google sign-in and the way out of a forgotten password. */
.auth-forgot { margin: 10px 0 0; font-size: 0.95rem; }

.auth-provider { margin-top: 6px; }

/* A rule with the word "or" sitting in it, so the two ways in read as
   alternatives rather than as a form followed by a stray button. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth-google { width: 100%; justify-content: center; }

/* The share panel in the footer. */
.share-panel { margin-top: 14px; }
.share-panel-lead { margin: 0 0 8px; font-weight: 700; }

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-feedback {
    margin: 8px 0 0;
    color: #047857;
    font-weight: 700;
}

/* A notion and the button that activates it sit on one line, so the list reads
   as names rather than as a column of buttons. */
.notion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Celebrations
   A reward a child sees and hears. The confetti is decoration and is hidden
   from screen readers; the words are not, and carry role="status" so they are
   read out. Everything that moves stops moving under prefers-reduced-motion.
   --------------------------------------------------------------------------- */

.celebration-host {
    position: fixed;
    inset-inline: 0;
    top: 0.75rem;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    pointer-events: none;
}

.celebration {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: #10344a;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
    animation: celebration-in 260ms ease-out both;
}

.celebration-leaving {
    animation: celebration-out 380ms ease-in both;
}

.celebration-points {
    background: #f6c445;
    color: #10344a;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.celebration-trophy {
    font-size: 1.6rem;
    animation: celebration-trophy 900ms ease-out 2;
}

.celebration-confetti {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.celebration-confetti i {
    position: absolute;
    top: -12px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    animation: celebration-fall 2.2s linear forwards;
}

@keyframes celebration-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes celebration-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

@keyframes celebration-trophy {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-9deg) scale(1.12); }
    75%      { transform: rotate(9deg) scale(1.12); }
}

@keyframes celebration-fall {
    to { transform: translateY(102vh) rotate(540deg); opacity: 0.2; }
}

/* A child who needs stillness gets the words and the sound, not the motion. */
@media (prefers-reduced-motion: reduce) {
    .celebration,
    .celebration-leaving,
    .celebration-trophy { animation: none; }
    .celebration-confetti { display: none; }
}

.celebration-mute {
    background: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.3rem 0.55rem;
}

/* The question-count chooser sits above the start button. */
.question-count {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- BrainCoins
   The page a parent reads to decide about money, so the numbers lead and the
   controls follow. Icons carry the meaning of each figure at a glance; they
   are decorative to a screen reader, which reads the label instead. */

.bc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.bc-icon {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    color: var(--accent);
    vertical-align: -0.28em;
}

.bc-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.bc-title .bc-icon { width: 1.25em; height: 1.25em; }

/* The one number the parent came for. */
.bc-hero {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface-strong) 78%);
    border: 1px solid var(--line);
}
.bc-hero-coin { width: 3.2rem; height: 3.2rem; color: var(--accent); flex: none; }
.bc-hero-figure { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bc-hero-number {
    font-size: clamp(2rem, 6vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.bc-hero-unit { font-size: 0.92rem; color: var(--muted); }
.bc-hero-worth {
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    font-size: 1.15rem;
}
.bc-hero-worth small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--muted); }

/* Secondary figures: small, equal, scannable. */
.bc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.7rem;
    margin: 0;
}
.bc-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
}
.bc-tile dt { font-size: 0.78rem; color: var(--muted); line-height: 1.25; }
.bc-tile dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 1.1rem; }
.bc-tile dd span { font-weight: 500; font-size: 0.8rem; color: var(--muted); }

/* Weekly ceiling: a bar says "how much is left" faster than "18 of 75". */
.bc-meter { display: flex; flex-direction: column; gap: 0.35rem; }
.bc-meter-track {
    height: 0.55rem;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.bc-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0%, #fbbf24 100%);
    transition: width 0.4s ease;
}
.bc-meter-full .bc-meter-fill { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.bc-meter-label { font-size: 0.82rem; color: var(--muted); }

.bc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--line);
    color: var(--muted);
}
.bc-status-on { background: var(--success-soft); color: #047857; }
.bc-status-paused { background: var(--accent-soft); color: #92400e; }

/* The PIN panel. Deliberately quiet when unlocked: it is a state, not a task. */
.bc-lock {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}
.bc-lock-text { flex: 1 1 14rem; font-size: 0.88rem; color: var(--muted); }
.bc-lock-text strong { color: var(--text); }
.bc-lock-closed { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.bc-lock-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.bc-lock-form input[type="password"] {
    width: 7rem;
    letter-spacing: 0.3em;
    text-align: center;
}

/* A row of history entries reads better with the amount pinned left. */
.bc-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.bc-amount {
    font-weight: 700;
    color: var(--accent);
    min-width: 2.6rem;
}

@media (prefers-color-scheme: dark) {
    .bc-tile, .bc-hero { background: var(--surface); }
    .bc-status-on { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
    .bc-status-paused { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
}

/* ------------------------------------------------- BrainCoins, in a session
   A child mid-question should see one figure, not a paragraph. The detail —
   what was earned and why, where the week stands — waits behind a hover or a
   keyboard focus, which is also where a screen reader finds it through
   aria-describedby.

   The pill carries `.score-pill` too, so its size comes from that one rule and
   the two boxes beside each other cannot drift apart. Only the colour, the
   coin, the week hairline and the tooltip are added here. */

.play-header-figures {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Same box, to the pixel. "BrainCoins" is a longer word than "Score", so
   leaving each to its own min-width made one five pixels wider than the other
   — visible, because they sit side by side. */
.play-header-figures > * {
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
    max-width: 136px;
}

.coin-pill {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-soft) 100%);
    border-color: #f0d48d;
    cursor: default;
}
.coin-pill:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.coin-pill strong {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.coin-pill-icon { width: 1.5rem; height: 1.5rem; color: var(--accent); flex: none; }

/* The week, as a hairline rather than a sentence. */
.coin-pill-week {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 9px;
    height: 3px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}
.coin-pill-week span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.coin-pill-tip {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-strong);
    box-shadow: 0 14px 32px rgba(20, 33, 61, 0.14);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--muted);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.coin-pill:hover .coin-pill-tip,
.coin-pill:focus .coin-pill-tip,
.coin-pill:focus-within .coin-pill-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.coin-pill-tip p { margin: 0 0 0.35rem; }
.coin-pill-tip p:last-child { margin-bottom: 0; }
.coin-pill-tip-lead { color: var(--text); font-weight: 600; }
.coin-pill-tip ul { margin: 0 0 0.35rem; padding-left: 1.1rem; }

/* A tap opens it: the pill is focusable, so touch reaches the same detail
   without the layout ever changing size. The earlier version let the tooltip
   fall into the flow where there was no hover, which turned the pill into a
   block several times the height of the score beside it. */

/* ------------------------------------------------ What to play next
   Shown when a game has run its length. One row per offer: what it is on the
   left, the button that starts it on the right, so a parent reads three
   choices rather than three paragraphs. */

.next-steps-title { margin: 1.1rem 0 0.5rem; }
.next-play { padding-top: 0.25rem; }
.next-play .next-steps-title { margin-top: 0; }

.next-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.next-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-strong);
}

/* The first offer is the one the child's own answers pointed at. */
.next-step:first-child { border-color: var(--accent); background: var(--accent-soft); }

.next-step-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 14rem; }
.next-step-text strong { line-height: 1.3; }
.next-step form { margin: 0; flex: none; }