/* ---------------------------------------------------------------------------
   The two typefaces, shipped with the app rather than fetched from Google.

   A first run on a phone with no connection is ordinary for this audience, and
   a missing typeface does not make the app look plain - it makes it look
   broken. 181 KB buys that, once.

   Both families are variable fonts: Google's stylesheet hands back the same URL
   whatever weight is asked for, because one file per subset carries the whole
   weight axis. So each block declares a range rather than a single weight -
   seven fixed declarations of the same file would throw the axis away and say
   in two hundred lines what six say here. The unicode-range lines are Google's
   own, so a device downloads only the subsets it needs to draw what is on
   screen.
   --------------------------------------------------------------------------- */

/* baloo-bhaijaan-2-arabic */
@font-face {
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/baloo-bhaijaan-2-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* baloo-bhaijaan-2-latin-ext */
@font-face {
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/baloo-bhaijaan-2-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* baloo-bhaijaan-2-latin */
@font-face {
    font-family: 'Baloo Bhaijaan 2';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('../fonts/baloo-bhaijaan-2-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cairo-arabic */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* cairo-latin-ext */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/cairo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* cairo-latin */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ── ground and surfaces ── */
    --bg-color: #F7EEDF;
    --surface: #FFFDF8;
    --surface-sink: #F1E8DA; /* an inert fill: a locked node, a spent slot */
    --track: #EDE1CE; /* the unfilled half of any progress bar, and the path rail */
    --hairline: #F5EDE0;

    /* ── ink ── */
    --deep-purple: #2A1226;
    --primary-purple: #2A1226;
    --deep-purple-dark: #1B0C18;
    --text-body: #6a605a;
    --text-muted: #8C7F76;
    --text-grey: #A79C93;
    --grey-locked: #EDE1CE;

    /* ── crimson: the primary action, and "you are here" ── */
    --burgundy: #9B2547;
    --accent-burgundy: #9B2547;
    --burgundy-dark: #7A1E38;
    --burgundy-tint: #F6E7EC;
    --burgundy-soft: #F1C6D2;

    /* ── terracotta: the second voice - streaks, warnings, kickers ── */
    --terracotta: #C67139;
    --terracotta-tint: #FCEBD6;
    --terracotta-border: #EFD3AE;
    --terracotta-ink: #8A5A28;

    /* ── sage: finished, correct, safe ── */
    --sage: #7A8A5E;
    --sage-dark: #5F6D48;
    --sage-tint: #F3F6EC;
    --sage-fill: #E3EBD6;
    --sage-ink: #6E7D54;

    /* ── lilac: the pupil themselves - avatar, points, their own row ── */
    --light-purple: #EADDF0;
    --lilac-border: #DCC8E6;
    --lilac-ridge: #D9C7E2;
    --lilac-ink: #3A1436;

    /* ── the signature ridge, and the one real lift ── */
    --ridge: #EFE3D0;
    --ridge-sm: 0 5px 0 var(--ridge);
    --ridge-md: 0 6px 0 var(--ridge);
    --ridge-lg: 0 8px 0 var(--ridge);
    --lift: 0 8px 24px rgba(42, 18, 38, 0.12);
    --lift-soft: 0 5px 14px rgba(42, 18, 38, 0.10);
    --button-shadow: 0 6px 0 var(--burgundy-dark);
    --button-active-shadow: 0 2px 0 var(--burgundy-dark);

    /* ── shape ── */
    --radius-card: 24px;
    --radius-card-lg: 30px;
    --radius-pill: 999px;

    /* ── type ──
       Baloo Bhaijaan 2 is the display voice: headings, numerals, buttons, any
       word meant to be read as loud. Cairo carries everything a child reads as a
       sentence. Baloo falls back to Cairo rather than to a system face, because a
       system Arabic fallback is a different width and reflows the whole screen. */
    --font-display: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ar);
    background-color: var(--bg-color);
    color: var(--deep-purple);
}

.ar-text {
    font-family: var(--font-ar);
}

.en-text {
    font-family: var(--font-en);
}


/* ---------------------------------------------------------------------------
   Shared pieces of the pupil's language.

   Blazor isolates a component's stylesheet to that component, so anything two
   screens draw the same way has to live here or be written twice and drift. Each
   name is prefixed `hp-` because these are not scoped to anything.
   --------------------------------------------------------------------------- */

/* The mascot is a character, not a logo: he breathes wherever he appears. */
@keyframes hoopoeFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes starPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

@keyframes hoopoeCheer {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    25% { transform: translateY(-10px) rotate(4deg); }
    50% { transform: translateY(0) rotate(-3deg); }
    75% { transform: translateY(-6px) rotate(5deg); }
}

@keyframes flyAcross {
    0% { transform: translateX(0) translateY(0) rotate(0); }
    50% { transform: translateX(6px) translateY(-6px) rotate(-6deg); }
    100% { transform: translateX(0) translateY(0) rotate(0); }
}

/* Only ever on the one node the pupil is meant to tap next. */
@keyframes ringGlow {
    0%, 100% { box-shadow: 0 10px 0 var(--burgundy-dark), 0 14px 26px rgba(155, 37, 71, 0.35); }
    50% { box-shadow: 0 10px 0 var(--burgundy-dark), 0 18px 34px rgba(155, 37, 71, 0.50); }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hoopoe,
    .hp-star,
    .hp-glow,
    .hm-bar-bird {
        animation: none !important;
    }
}

.hp-hoopoe {
    display: block;
    height: auto;
    animation: hoopoeFloat 3.4s ease-in-out infinite;
}

/* Halfway mascot on the lesson progress track - shared so Lesson and Practice stay in step. */
.hm-bar-host {
    position: relative;
}

.hm-bar-bird {
    position: absolute;
    top: -2.5rem;
    width: 52px;
    height: auto;
    inset-inline-start: calc(50% - 26px);
    animation: flyAcross 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

.hp-star {
    animation: starPop 2.4s ease-in-out infinite;
}

.hp-card {
    background-color: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--ridge-md);
    box-sizing: border-box;
}

.hp-card-lg {
    border-radius: var(--radius-card-lg);
    box-shadow: var(--ridge-lg);
}

/* A dark panel: the one place a child is told something about the whole screen. */
.hp-panel-dark {
    background-color: var(--deep-purple);
    color: var(--bg-color);
    border-radius: var(--radius-card-lg);
    box-shadow: 0 9px 0 var(--deep-purple-dark);
    box-sizing: border-box;
}

/* Buttons press down onto their own ridge - the ridge shrinks, the button moves
   into it. Losing the ridge on :active instead makes the button look broken. */
.hp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}

.hp-btn:active:not(:disabled) {
    transform: translateY(4px);
}

.hp-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.hp-btn-primary {
    background-color: var(--burgundy);
    color: #fff;
    box-shadow: 0 6px 0 var(--burgundy-dark);
}

.hp-btn-primary:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--burgundy-dark);
}

.hp-btn-dark {
    background-color: var(--deep-purple);
    color: var(--bg-color);
    box-shadow: 0 6px 0 var(--deep-purple-dark);
}

.hp-btn-dark:active:not(:disabled) {
    box-shadow: 0 2px 0 var(--deep-purple-dark);
}

/* The light button on a dark or coloured panel. */
.hp-btn-soft {
    background-color: var(--surface);
    color: var(--burgundy);
    box-shadow: 0 5px 0 #E6D2C0;
}

.hp-btn-soft:active:not(:disabled) {
    box-shadow: 0 1px 0 #E6D2C0;
}

.hp-btn-quiet {
    background-color: transparent;
    color: var(--deep-purple);
    border: 2px solid var(--track);
    box-shadow: none;
    font-size: 1rem;
    padding: 0.8rem 1.1rem;
}

.hp-btn-quiet:active:not(:disabled) {
    background-color: var(--track);
    transform: none;
}

/* A small round control - the ✕ that leaves a lesson, a back arrow. */
.hp-btn-round {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--surface);
    box-shadow: 0 4px 0 var(--ridge);
    color: var(--deep-purple);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
}

.hp-btn-round:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--ridge);
}

.hp-btn-round:disabled {
    opacity: 0.6;
    cursor: default;
}

.hp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.65rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.hp-pill-crimson {
    background-color: var(--burgundy-tint);
    color: var(--burgundy);
}

.hp-pill-sage {
    background-color: var(--sage-fill);
    color: var(--sage-dark);
}

.hp-pill-sand {
    background-color: var(--terracotta-tint);
    color: var(--terracotta);
}

.hp-pill-quiet {
    background-color: var(--track);
    color: var(--text-muted);
}

/* Marks a question as the ministry's own rather than the model's. It sits beside the "سؤال ٣ من ١٢"
   kicker and has to stay quieter than it: the tag is useful, but the question is what the child is
   there to read. Smaller and lighter than the other pills for that reason. */
.hp-source-tag {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* The points chip in the header, and the same chip on the profile. */
.hp-chip-points {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--light-purple);
    border: 2px solid var(--lilac-border);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.7rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--lilac-ink);
}

.hp-track {
    height: 12px;
    background-color: var(--track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.hp-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--burgundy);
}

.hp-fill-sage {
    background-color: var(--sage);
}

.hp-fill-sand {
    background-color: var(--terracotta);
}

/* What the hoopoe says. The tail corner is square; which corner depends on which
   side of the bird the bubble sits, so the caller picks the modifier. */
.hp-bubble {
    background-color: var(--surface);
    border: 2px solid var(--ridge);
    border-radius: 20px;
    padding: 0.7rem 0.9rem;
    box-shadow: var(--lift-soft);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--deep-purple);
    line-height: 1.6;
}

.hp-bubble-start {
    border-end-start-radius: 4px;
}

.hp-bubble-end {
    border-end-end-radius: 4px;
}

.hp-section-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-body);
    margin: 0;
}

.hp-h1 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--deep-purple);
    margin: 0;
    line-height: 1.4;
}


/* ---------------------------------------------------------------------------
   Auth screens - the shell shared by Login and Register.

   These rules lived in Login.razor.css. Blazor isolates a component's stylesheet
   to that component, so Register - which reuses the same markup and class names -
   rendered with no styling at all: the form fell out of its column and ran off the
   side of the screen. They are shared markup, so they belong in a shared sheet.

   Every rule is scoped under .login-container, the root element of both pages, so
   that names as generic as .title and .content cannot reach any other page now
   that they are no longer isolated.
   --------------------------------------------------------------------------- */

.login-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    position: relative;
    box-sizing: border-box;
}

.login-container .top-banner {
    width: 100%;
    position: relative;
    height: 140px;
    margin-bottom: 60px;
}

.login-container .wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--surface);
    border-bottom-left-radius: 50% 34px;
    border-bottom-right-radius: 50% 34px;
    overflow: hidden;
}

.login-container .floating-icon {
    position: absolute;
    opacity: 0.35;
    font-size: 1.5rem;
}

.login-container .brain { top: 20px; left: 15%; transform: rotate(-15deg); }
.login-container .star { top: 40px; right: 20%; transform: rotate(15deg); }
.login-container .rocket { top: 70px; left: 30%; transform: rotate(25deg); }

.login-container .mascot-wrapper {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background-color: var(--light-purple);
    border-radius: 50%;
    padding: 10px;
    border: 4px solid var(--surface);
    box-shadow: 0 6px 0 var(--lilac-ridge);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 2;
}

.login-container .small-mascot {
    width: 72px;
    height: auto;
    object-fit: contain;
}

.login-container .content {
    flex: 1;
    padding: 0 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.login-container .text-center {
    text-align: center;
    margin-bottom: 2rem;
}

.login-container .title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--deep-purple);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.login-container .subtitle {
    font-size: 0.95rem;
    color: var(--text-body);
    margin: 0;
    line-height: 1.7;
}

.login-container .form-container {
    width: 100%;
    margin-bottom: 2rem;
}

.login-container .input-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.login-container .input-group label {
    font-family: var(--font-display);
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--deep-purple);
    font-size: 0.9rem;
}

.login-container .input-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.login-container .input-wrapper input {
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    border: 2px solid var(--track);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--deep-purple);
    background-color: var(--surface);
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
}

.login-container .input-wrapper input:focus {
    border-color: var(--burgundy);
}

.login-container .input-wrapper input::placeholder {
    color: var(--text-grey);
    font-weight: 600;
}

.login-container .input-icon {
    position: absolute;
    right: 1rem;
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Show/hide on the password: a parent typing on a phone keyboard cannot see a typo in a row of
   stars, and a wrong password is indistinguishable from a wrong account at the login screen. */
.login-container .show-password {
    position: absolute;
    left: 0.55rem;
    min-height: 36px;
    padding: 0 0.8rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--track);
    color: var(--deep-purple);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
}

.login-container .input-wrapper:has(.show-password) input {
    padding-left: 5rem;
}

/* The login screen's own copies of the register screen's scoped hint and error styles. */
.login-container .password-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.4rem 0 0;
    text-align: right;
    line-height: 1.6;
}

.login-container .error-text {
    color: var(--burgundy);
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-align: right;
    line-height: 1.6;
}

.login-container .footer-link {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: auto;
}

.login-container .footer-link a {
    color: var(--text-body);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
}

.login-container .footer-link .highlight {
    font-family: var(--font-display);
    color: var(--burgundy);
    font-weight: 800;
}

.login-container .primary-button {
    background-color: var(--burgundy);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    width: 100%;
    padding: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--burgundy-dark);
    transition: transform 0.08s, box-shadow 0.08s;
    font-family: var(--font-display);
    font-size: 1.25rem;
    position: relative;
}

.login-container .primary-button:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--burgundy-dark);
}

.login-container .primary-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.login-container .btn-text {
    font-weight: 800;
}

.login-container .btn-icon {
    background: white;
    color: var(--burgundy);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transform: scaleX(-1);
}


/* ---------------------------------------------------------------------------
   The app frame.

   This is a phone app that also runs in a desktop window. Left unconstrained, a
   row like "آخر نشاط" and its value sit at opposite ends of sixteen hundred
   pixels, and the eye stops connecting them: the label and the number stop
   reading as one fact. Capping the frame and centring it fixes that on every
   screen at once, and costs nothing on a real phone, where the viewport is
   narrower than the cap and the rule never fires.

   .app-shell is the root of both MainLayout and BareLayout. Their own
   stylesheets are component-isolated, so a rule written in either would reach
   only that one layout; this sheet is not isolated and reaches both.

   Only box metrics are set here. Layout, height and colour stay in the isolated
   sheets, whose selectors carry an extra attribute and would win anyway.
   --------------------------------------------------------------------------- */

.app-shell {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* ── Privacy and deleting an account ──
   Shared rather than scoped: the panel appears on the pupil's profile and the parent's list, and a
   destructive button that looks different on the two screens reads as two different buttons. */
.account-privacy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin: 1.5rem 0 2.5rem;
}

.privacy-link {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lilac-ink);
    text-decoration: underline;
}

.delete-account-button {
    background: none;
    border: none;
    padding: 0.6rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #9b1c1c;
    text-decoration: underline;
    cursor: pointer;
}

.delete-confirm {
    border: 2px solid #e6c4c4;
    border-radius: var(--radius-card);
    background: #fdf6f6;
    padding: 1rem;
}

.delete-warning {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #9b1c1c;
    line-height: 1.7;
}

.delete-label {
    display: block;
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-body);
}

.delete-input {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--track);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 1rem;
    background: var(--surface);
    box-sizing: border-box;
}

.delete-errors {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.delete-errors li {
    font-size: 0.9rem;
    font-weight: 700;
    color: #9b1c1c;
    line-height: 1.6;
}

.delete-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.delete-confirm-button,
.delete-cancel-button {
    flex: 1;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

.delete-confirm-button {
    background: #9b1c1c;
    color: #fff;
}

.delete-confirm-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.delete-cancel-button {
    background: var(--track);
    color: var(--text-body);
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.9rem 0 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.7;
}

.consent-box {
    margin-top: 0.35rem;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}