/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   Consent Steps — auth/consent_pending.php
   Three-step progress indicator showing where the student is
   in the DPDP parental consent flow.
   ============================================================ */

.consent-steps {
    display: flex;
    flex-direction: column;
    gap: 0; /* Steps sit flush, connected by border */
    margin: 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip rounded corners on child borders */
    background: var(--surface);
}

/* Each individual step row */
.consent-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    opacity: 0.45; /* Future steps are greyed out */
    transition: opacity 0.2s ease;
}

.consent-step:last-child {
    border-bottom: none; /* No border under the last step */
}

/* Done step — fully visible, green number circle */
.consent-step--done {
    opacity: 1;
}

.consent-step--done .consent-step__number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    font-size: 1rem; /* Slightly larger for the checkmark ✓ */
}

/* Active (current) step — fully visible, blue accent number circle */
.consent-step--active {
    opacity: 1;
    background: var(--accent-soft);
}

.consent-step--active .consent-step__number {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* The circular number badge on the left of each step */
.consent-step__number {
    flex-shrink: 0; /* Never squish the number circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* Align with first line of text */
}

/* The text content beside the number */
.consent-step__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-step__content strong {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}

/* Subtitle / helper text below the step title */
.consent-step__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
    .consent-step {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ============================================================
   Student Dashboard — student/dashboard.php
   ============================================================ */

/* Page wrapper — sits below the fixed navbar */
.dashboard-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* Top row: welcome text on left, window badge on right */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Answer window badge */
.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid;
}

.window-badge--open {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.window-badge--closed {
    background: var(--surface-inset);
    border-color: var(--border);
    color: var(--text-secondary);
}

.window-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.window-badge--open .window-badge__dot {
    background: var(--success);
}
.window-badge--closed .window-badge__dot {
    background: var(--border-strong);
}

/* Stats row — 4 cards in a grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card__num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Ask a Question CTA banner */
.ask-cta {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ask-cta__text {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Two-column layout */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Question cards */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.question-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.question-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

/* Topic badge */
.topic-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge--open {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}
.status-badge--answered {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
.status-badge--closed {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-cols {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ask-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   Consent Steps — auth/consent_pending.php
   Three-step progress indicator showing where the student is
   in the DPDP parental consent flow.
   ============================================================ */

.consent-steps {
    display: flex;
    flex-direction: column;
    gap: 0; /* Steps sit flush, connected by border */
    margin: 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip rounded corners on child borders */
    background: var(--surface);
}

/* Each individual step row */
.consent-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    opacity: 0.45; /* Future steps are greyed out */
    transition: opacity 0.2s ease;
}

.consent-step:last-child {
    border-bottom: none; /* No border under the last step */
}

/* Done step — fully visible, green number circle */
.consent-step--done {
    opacity: 1;
}

.consent-step--done .consent-step__number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    font-size: 1rem; /* Slightly larger for the checkmark ✓ */
}

/* Active (current) step — fully visible, blue accent number circle */
.consent-step--active {
    opacity: 1;
    background: var(--accent-soft);
}

.consent-step--active .consent-step__number {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* The circular number badge on the left of each step */
.consent-step__number {
    flex-shrink: 0; /* Never squish the number circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* Align with first line of text */
}

/* The text content beside the number */
.consent-step__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-step__content strong {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}

/* Subtitle / helper text below the step title */
.consent-step__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
    .consent-step {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ============================================================
   Student Dashboard — student/dashboard.php
   ============================================================ */

/* Page wrapper — sits below the fixed navbar */
.dashboard-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* Top row: welcome text on left, window badge on right */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Answer window badge */
.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid;
}

.window-badge--open {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.window-badge--closed {
    background: var(--surface-inset);
    border-color: var(--border);
    color: var(--text-secondary);
}

.window-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.window-badge--open .window-badge__dot {
    background: var(--success);
}
.window-badge--closed .window-badge__dot {
    background: var(--border-strong);
}

/* Stats row — 4 cards in a grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card__num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Ask a Question CTA banner */
.ask-cta {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ask-cta__text {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Two-column layout */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Question cards */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.question-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.question-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

/* Topic badge */
.topic-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge--open {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}
.status-badge--answered {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
.status-badge--closed {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-cols {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ask-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Ask a Question — questions/ask.php
   ============================================================ */

/* Page wrapper — margin-top clears the fixed navbar */
.ask-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* The single centred card holding the whole form */
.ask-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.ask-card h1 {
    font-size: 1.7rem;
    margin-bottom: 6px;
}

/* The intro line directly under the h1 */
.ask-card > .text-muted {
    margin-bottom: 28px;
}

/* ── Textareas ────────────────────────────────────────────────
   The base .form-group input styling does not cover <textarea>,
   so it is defined here to match inputs exactly.
   ─────────────────────────────────────────────────────────── */
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;

    /* Let the student drag it taller if they have a lot to say,
       but never sideways (which would break the card layout). */
    resize: vertical;

    /* Without this the padding would be ADDED to the 100% width,
       pushing the textarea wider than its container. */
    box-sizing: border-box;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    /* A soft halo instead of the browser's default hard outline —
       still clearly visible for keyboard users. */
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Code snippet textarea ────────────────────────────────────
   !important is needed here to override the .form-group textarea
   rules above, which have equal specificity but come first.
   ─────────────────────────────────────────────────────────── */
.code-field {
    font-family: var(--font-mono) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;

    /* A subtly different background signals "this is a code area"
       without needing a label. */
    background: var(--surface-inset) !important;

    /* Render a tab character as 4 spaces wide so pasted Python
       indentation looks the way the student wrote it. */
    tab-size: 4;
}

/* ── Custom file upload ───────────────────────────────────────
   The real <input type="file"> is visually hidden and the <label>
   is styled as a drop zone. Clicking the label triggers the input
   natively — no JavaScript required for it to work.
   ─────────────────────────────────────────────────────────── */
.file-upload {
    position: relative;
}

/*
   Hide the real input WITHOUT using display:none or visibility:hidden.
   Those would remove it from the accessibility tree, meaning screen
   readers and keyboard tabbing could no longer reach it. Shrinking it
   to 1px with opacity 0 keeps it focusable and announced.
*/
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.file-upload__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;

    /* Dashed border is the conventional visual language for
       "you can drop something here". */
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);

    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.file-upload__label:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Give the hidden input's focus state a visible target on the label,
   so keyboard users can see where they are. */
.file-upload input[type="file"]:focus-visible + .file-upload__label {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.file-upload__icon {
    font-size: 1.5rem;
}

.file-upload__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.file-upload__hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Success screen ──────────────────────────────────────────── */
.ask-success {
    text-align: center;
    padding: 8px 0;
}

.ask-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.ask-success h1 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.ask-success .text-muted {
    margin-bottom: 24px;
}

.ask-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ── Study suggestions card ("While you wait") ───────────────── */
.study-card {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;

    /* Override the centred alignment inherited from .ask-success —
       a list of links reads better left-aligned. */
    text-align: left;

    margin: 20px 0;
}

.study-card__heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 12px;
}

.study-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.study-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.study-item a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.study-item__arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Field-level error state ─────────────────────────────────── */

/* Applied to the wrapping .form-group when that field has an error,
   turning its input/select/textarea border red. */
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--error);
}

/* The small red message printed directly under the offending field. */
.form-hint--error {
    color: var(--error);
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ask-card {
        padding: 24px 18px;
    }

    /* Stack the three success buttons full-width instead of letting
       them wrap awkwardly on a narrow phone screen. */
    .ask-success__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ask-success__actions .btn-primary,
    .ask-success__actions .btn-ghost {
        text-align: center;
    }
}

/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   Consent Steps — auth/consent_pending.php
   Three-step progress indicator showing where the student is
   in the DPDP parental consent flow.
   ============================================================ */

.consent-steps {
    display: flex;
    flex-direction: column;
    gap: 0; /* Steps sit flush, connected by border */
    margin: 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip rounded corners on child borders */
    background: var(--surface);
}

/* Each individual step row */
.consent-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    opacity: 0.45; /* Future steps are greyed out */
    transition: opacity 0.2s ease;
}

.consent-step:last-child {
    border-bottom: none; /* No border under the last step */
}

/* Done step — fully visible, green number circle */
.consent-step--done {
    opacity: 1;
}

.consent-step--done .consent-step__number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    font-size: 1rem; /* Slightly larger for the checkmark ✓ */
}

/* Active (current) step — fully visible, blue accent number circle */
.consent-step--active {
    opacity: 1;
    background: var(--accent-soft);
}

.consent-step--active .consent-step__number {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* The circular number badge on the left of each step */
.consent-step__number {
    flex-shrink: 0; /* Never squish the number circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* Align with first line of text */
}

/* The text content beside the number */
.consent-step__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-step__content strong {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}

/* Subtitle / helper text below the step title */
.consent-step__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
    .consent-step {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ============================================================
   Student Dashboard — student/dashboard.php
   ============================================================ */

/* Page wrapper — sits below the fixed navbar */
.dashboard-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* Top row: welcome text on left, window badge on right */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Answer window badge */
.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid;
}

.window-badge--open {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.window-badge--closed {
    background: var(--surface-inset);
    border-color: var(--border);
    color: var(--text-secondary);
}

.window-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.window-badge--open .window-badge__dot {
    background: var(--success);
}
.window-badge--closed .window-badge__dot {
    background: var(--border-strong);
}

/* Stats row — 4 cards in a grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card__num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Ask a Question CTA banner */
.ask-cta {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ask-cta__text {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Two-column layout */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Question cards */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.question-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.question-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

/* Topic badge */
.topic-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge--open {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}
.status-badge--answered {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
.status-badge--closed {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-cols {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ask-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Ask a Question — questions/ask.php
   ============================================================ */

/* Page wrapper — margin-top clears the fixed navbar */
.ask-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* The single centred card holding the whole form */
.ask-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.ask-card h1 {
    font-size: 1.7rem;
    margin-bottom: 6px;
}

/* The intro line directly under the h1 */
.ask-card > .text-muted {
    margin-bottom: 28px;
}

/* ── Textareas ────────────────────────────────────────────────
   The base .form-group input styling does not cover <textarea>,
   so it is defined here to match inputs exactly.
   ─────────────────────────────────────────────────────────── */
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;

    /* Let the student drag it taller if they have a lot to say,
       but never sideways (which would break the card layout). */
    resize: vertical;

    /* Without this the padding would be ADDED to the 100% width,
       pushing the textarea wider than its container. */
    box-sizing: border-box;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    /* A soft halo instead of the browser's default hard outline —
       still clearly visible for keyboard users. */
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Code snippet textarea ────────────────────────────────────
   !important is needed here to override the .form-group textarea
   rules above, which have equal specificity but come first.
   ─────────────────────────────────────────────────────────── */
.code-field {
    font-family: var(--font-mono) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;

    /* A subtly different background signals "this is a code area"
       without needing a label. */
    background: var(--surface-inset) !important;

    /* Render a tab character as 4 spaces wide so pasted Python
       indentation looks the way the student wrote it. */
    tab-size: 4;
}

/* ── Custom file upload ───────────────────────────────────────
   The real <input type="file"> is visually hidden and the <label>
   is styled as a drop zone. Clicking the label triggers the input
   natively — no JavaScript required for it to work.
   ─────────────────────────────────────────────────────────── */
.file-upload {
    position: relative;
}

/*
   Hide the real input WITHOUT using display:none or visibility:hidden.
   Those would remove it from the accessibility tree, meaning screen
   readers and keyboard tabbing could no longer reach it. Shrinking it
   to 1px with opacity 0 keeps it focusable and announced.
*/
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.file-upload__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;

    /* Dashed border is the conventional visual language for
       "you can drop something here". */
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);

    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.file-upload__label:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Give the hidden input's focus state a visible target on the label,
   so keyboard users can see where they are. */
.file-upload input[type="file"]:focus-visible + .file-upload__label {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.file-upload__icon {
    font-size: 1.5rem;
}

.file-upload__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.file-upload__hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Success screen ──────────────────────────────────────────── */
.ask-success {
    text-align: center;
    padding: 8px 0;
}

.ask-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.ask-success h1 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.ask-success .text-muted {
    margin-bottom: 24px;
}

.ask-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ── Study suggestions card ("While you wait") ───────────────── */
.study-card {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;

    /* Override the centred alignment inherited from .ask-success —
       a list of links reads better left-aligned. */
    text-align: left;

    margin: 20px 0;
}

.study-card__heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 12px;
}

.study-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.study-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.study-item a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.study-item__arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Field-level error state ─────────────────────────────────── */

/* Applied to the wrapping .form-group when that field has an error,
   turning its input/select/textarea border red. */
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--error);
}

/* The small red message printed directly under the offending field. */
.form-hint--error {
    color: var(--error);
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ask-card {
        padding: 24px 18px;
    }

    /* Stack the three success buttons full-width instead of letting
       them wrap awkwardly on a narrow phone screen. */
    .ask-success__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ask-success__actions .btn-primary,
    .ask-success__actions .btn-ghost {
        text-align: center;
    }
}

/* ============================================================
   Question Detail — questions/view.php
   ============================================================ */

/* Page wrapper. margin-top clears the fixed navbar.
   max-width on the container keeps line length readable — long
   paragraphs of explanation are hard to read edge-to-edge. */
.view-wrap {
    padding: 32px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

.view-wrap .container {
    max-width: 860px;
}

/* Breadcrumb link back to the dashboard */
.view-back {
    display: inline-block;
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease;
}

.view-back:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── The question card ───────────────────────────────────────── */
.q-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
}

.q-detail__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* "edited 2h ago" marker — deliberately quiet. It must be findable
   for transparency but should not compete with the title. */
.q-detail__edited {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.q-detail__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 12px;
}

/* Author + timestamp line */
.q-detail__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

/* The question body text.
   1.7 line-height (looser than the 1.55 used elsewhere) because this
   is the longest continuous prose on the site — extra leading makes a
   wall of text noticeably easier to read. */
.q-detail__body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 18px;

    /* A very long unbroken string (a URL, a stack trace) would otherwise
       stretch the card and break the layout. This forces it to wrap. */
    overflow-wrap: break-word;
}

/* ── Code blocks ─────────────────────────────────────────────────
   Shared shape for the question's snippet and each answer's example.
   ─────────────────────────────────────────────────────────────── */
.q-detail__code,
.answer-card__code {
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent); /* Accent spine marks it as code */
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;

    /* Long lines scroll horizontally rather than wrapping.
       Wrapping code would change its meaning — a wrapped Python line
       looks like a different indentation level. Scrolling preserves truth. */
    overflow-x: auto;

    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    tab-size: 4;
}

/* <pre> sets its own margin by default; strip it so our padding controls spacing. */
.q-detail__code code,
.answer-card__code code {
    font-family: inherit;
    background: none;
    padding: 0;
}

/* ── Attached screenshots ────────────────────────────────────────
   auto-fill + minmax means the grid decides its own column count
   based on available width — one image sits at 180px, several flow
   into a row, and it reflows on mobile with no media query needed.
   ─────────────────────────────────────────────────────────────── */
.q-detail__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.q-detail__images img {
    width: 100%;
    height: 140px;

    /* cover crops to fill the box without distorting the image.
       Clicking opens the full-size original in a new tab. */
    object-fit: cover;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.q-detail__images a:hover img {
    border-color: var(--accent);
}

/* ── Question footer ─────────────────────────────────────────── */
.q-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Clap counter — read-only in Phase 6.
   Phase 8 turns this into a <button>; the styling already anticipates
   that, so only the tag changes then. */
.clap-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Teacher claps get the amber treatment — visually distinct from
   student claps because they carry more weight in the product. */
.clap-count--teacher {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}

/* ── Clap toggle buttons (Phase 8) ───────────────────────────────
   Interactive version of .clap-count. Same tokens, real button. */
.clap-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
        transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.clap-btn:hover {
    border-color: var(--blue, #3b82f6);
    color: var(--blue, #3b82f6);
}
.clap-btn:active {
    transform: scale(0.96);
}
.clap-btn--on {
    background: var(--blue, #3b82f6);
    border-color: var(--blue, #3b82f6);
    color: #ffffff;
}
.clap-btn--on:hover {
    background: var(--blue-dark, #2563eb);
    border-color: var(--blue-dark, #2563eb);
    color: #ffffff;
}
.clap-btn--teacher:hover {
    border-color: var(--warning, #f59e0b);
    color: var(--warning, #f59e0b);
}
.clap-btn--teacher.clap-btn--on {
    background: var(--warning, #f59e0b);
    border-color: var(--warning, #f59e0b);
    color: #ffffff;
}
.clap-btn--teacher.clap-btn--on:hover {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}
.clap-btn--pop .clap-btn__icon {
    animation: clap-pop 0.3s ease;
}
@keyframes clap-pop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
.clap-btn--error {
    animation: clap-shake 0.3s ease;
    border-color: var(--danger, #ef4444);
    color: var(--danger, #ef4444);
}
@keyframes clap-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    75% {
        transform: translateX(3px);
    }
}

/* ── Answers section ─────────────────────────────────────────── */
.answers-section {
    margin-top: 32px;
}

.answer-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.answer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

/* The best answer is visually pinned: green tint plus a thick green
   left spine. A reader scanning the page should spot it instantly
   without reading a single word. */
.answer-card--best {
    border-color: var(--success-border);
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}

.answer-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.answer-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.answer-card__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 14px;
    overflow-wrap: break-word;
}

.answer-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid;
}

/* Marked as solving the problem by the person who asked. */
.badge--best {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

/* A teacher clapped it — the highest recognition on the platform. */
.badge--teacher {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

/* Posted by the CodingClap team under the Unanswered Guarantee. */
.badge--team {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--info-border);
}

/* Small inline "Teacher" tag beside an answerer's name so readers can
   weigh the answer's authority without hunting for a badge. */
.role-tag {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Answer form ─────────────────────────────────────────────── */
.answer-form-section {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* Shown instead of the form when the answer window is closed, or when
   the viewer has already answered. Dashed border signals "inactive /
   informational" rather than an error. */
.window-closed-note {
    margin-top: 32px;
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    text-align: center;
    color: var(--text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .q-detail {
        padding: 20px 18px;
    }

    .q-detail__title {
        font-size: 1.25rem;
    }

    .answer-card {
        padding: 16px 18px;
    }

    /* Stack the meta rows on narrow screens — author and timestamp
       side by side becomes cramped and starts wrapping badly. */
    .q-detail__meta,
    .answer-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Two columns of screenshots max on a phone. */
    .q-detail__images {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .q-detail__images img {
        height: 110px;
    }
}

/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   Consent Steps — auth/consent_pending.php
   Three-step progress indicator showing where the student is
   in the DPDP parental consent flow.
   ============================================================ */

.consent-steps {
    display: flex;
    flex-direction: column;
    gap: 0; /* Steps sit flush, connected by border */
    margin: 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip rounded corners on child borders */
    background: var(--surface);
}

/* Each individual step row */
.consent-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    opacity: 0.45; /* Future steps are greyed out */
    transition: opacity 0.2s ease;
}

.consent-step:last-child {
    border-bottom: none; /* No border under the last step */
}

/* Done step — fully visible, green number circle */
.consent-step--done {
    opacity: 1;
}

.consent-step--done .consent-step__number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    font-size: 1rem; /* Slightly larger for the checkmark ✓ */
}

/* Active (current) step — fully visible, blue accent number circle */
.consent-step--active {
    opacity: 1;
    background: var(--accent-soft);
}

.consent-step--active .consent-step__number {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* The circular number badge on the left of each step */
.consent-step__number {
    flex-shrink: 0; /* Never squish the number circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* Align with first line of text */
}

/* The text content beside the number */
.consent-step__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-step__content strong {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}

/* Subtitle / helper text below the step title */
.consent-step__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
    .consent-step {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ============================================================
   Student Dashboard — student/dashboard.php
   ============================================================ */

/* Page wrapper — sits below the fixed navbar */
.dashboard-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* Top row: welcome text on left, window badge on right */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Answer window badge */
.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid;
}

.window-badge--open {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.window-badge--closed {
    background: var(--surface-inset);
    border-color: var(--border);
    color: var(--text-secondary);
}

.window-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.window-badge--open .window-badge__dot {
    background: var(--success);
}
.window-badge--closed .window-badge__dot {
    background: var(--border-strong);
}

/* Stats row — 4 cards in a grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card__num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Ask a Question CTA banner */
.ask-cta {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ask-cta__text {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Two-column layout */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Question cards */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.question-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.question-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

/* Topic badge */
.topic-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge--open {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}
.status-badge--answered {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
.status-badge--closed {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-cols {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ask-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Ask a Question — questions/ask.php
   ============================================================ */

/* Page wrapper — margin-top clears the fixed navbar */
.ask-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* The single centred card holding the whole form */
.ask-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.ask-card h1 {
    font-size: 1.7rem;
    margin-bottom: 6px;
}

/* The intro line directly under the h1 */
.ask-card > .text-muted {
    margin-bottom: 28px;
}

/* ── Textareas ────────────────────────────────────────────────
   The base .form-group input styling does not cover <textarea>,
   so it is defined here to match inputs exactly.
   ─────────────────────────────────────────────────────────── */
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;

    /* Let the student drag it taller if they have a lot to say,
       but never sideways (which would break the card layout). */
    resize: vertical;

    /* Without this the padding would be ADDED to the 100% width,
       pushing the textarea wider than its container. */
    box-sizing: border-box;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    /* A soft halo instead of the browser's default hard outline —
       still clearly visible for keyboard users. */
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Code snippet textarea ────────────────────────────────────
   !important is needed here to override the .form-group textarea
   rules above, which have equal specificity but come first.
   ─────────────────────────────────────────────────────────── */
.code-field {
    font-family: var(--font-mono) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;

    /* A subtly different background signals "this is a code area"
       without needing a label. */
    background: var(--surface-inset) !important;

    /* Render a tab character as 4 spaces wide so pasted Python
       indentation looks the way the student wrote it. */
    tab-size: 4;
}

/* ── Custom file upload ───────────────────────────────────────
   The real <input type="file"> is visually hidden and the <label>
   is styled as a drop zone. Clicking the label triggers the input
   natively — no JavaScript required for it to work.
   ─────────────────────────────────────────────────────────── */
.file-upload {
    position: relative;
}

/*
   Hide the real input WITHOUT using display:none or visibility:hidden.
   Those would remove it from the accessibility tree, meaning screen
   readers and keyboard tabbing could no longer reach it. Shrinking it
   to 1px with opacity 0 keeps it focusable and announced.
*/
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.file-upload__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;

    /* Dashed border is the conventional visual language for
       "you can drop something here". */
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);

    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.file-upload__label:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Give the hidden input's focus state a visible target on the label,
   so keyboard users can see where they are. */
.file-upload input[type="file"]:focus-visible + .file-upload__label {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.file-upload__icon {
    font-size: 1.5rem;
}

.file-upload__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.file-upload__hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Success screen ──────────────────────────────────────────── */
.ask-success {
    text-align: center;
    padding: 8px 0;
}

.ask-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.ask-success h1 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.ask-success .text-muted {
    margin-bottom: 24px;
}

.ask-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ── Study suggestions card ("While you wait") ───────────────── */
.study-card {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;

    /* Override the centred alignment inherited from .ask-success —
       a list of links reads better left-aligned. */
    text-align: left;

    margin: 20px 0;
}

.study-card__heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 12px;
}

.study-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.study-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.study-item a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.study-item__arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Field-level error state ─────────────────────────────────── */

/* Applied to the wrapping .form-group when that field has an error,
   turning its input/select/textarea border red. */
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--error);
}

/* The small red message printed directly under the offending field. */
.form-hint--error {
    color: var(--error);
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ask-card {
        padding: 24px 18px;
    }

    /* Stack the three success buttons full-width instead of letting
       them wrap awkwardly on a narrow phone screen. */
    .ask-success__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ask-success__actions .btn-primary,
    .ask-success__actions .btn-ghost {
        text-align: center;
    }
}

/* ============================================================
   Question Detail — questions/view.php
   ============================================================ */

/* Page wrapper. margin-top clears the fixed navbar.
   max-width on the container keeps line length readable — long
   paragraphs of explanation are hard to read edge-to-edge. */
.view-wrap {
    padding: 32px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

.view-wrap .container {
    max-width: 860px;
}

/* Breadcrumb link back to the dashboard */
.view-back {
    display: inline-block;
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease;
}

.view-back:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── The question card ───────────────────────────────────────── */
.q-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
}

.q-detail__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* "edited 2h ago" marker — deliberately quiet. It must be findable
   for transparency but should not compete with the title. */
.q-detail__edited {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.q-detail__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 12px;
}

/* Author + timestamp line */
.q-detail__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

/* The question body text.
   1.7 line-height (looser than the 1.55 used elsewhere) because this
   is the longest continuous prose on the site — extra leading makes a
   wall of text noticeably easier to read. */
.q-detail__body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 18px;

    /* A very long unbroken string (a URL, a stack trace) would otherwise
       stretch the card and break the layout. This forces it to wrap. */
    overflow-wrap: break-word;
}

/* ── Code blocks ─────────────────────────────────────────────────
   Shared shape for the question's snippet and each answer's example.
   ─────────────────────────────────────────────────────────────── */
.q-detail__code,
.answer-card__code {
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent); /* Accent spine marks it as code */
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;

    /* Long lines scroll horizontally rather than wrapping.
       Wrapping code would change its meaning — a wrapped Python line
       looks like a different indentation level. Scrolling preserves truth. */
    overflow-x: auto;

    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    tab-size: 4;
}

/* <pre> sets its own margin by default; strip it so our padding controls spacing. */
.q-detail__code code,
.answer-card__code code {
    font-family: inherit;
    background: none;
    padding: 0;
}

/* ── Attached screenshots ────────────────────────────────────────
   auto-fill + minmax means the grid decides its own column count
   based on available width — one image sits at 180px, several flow
   into a row, and it reflows on mobile with no media query needed.
   ─────────────────────────────────────────────────────────────── */
.q-detail__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.q-detail__images img {
    width: 100%;
    height: 140px;

    /* cover crops to fill the box without distorting the image.
       Clicking opens the full-size original in a new tab. */
    object-fit: cover;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.q-detail__images a:hover img {
    border-color: var(--accent);
}

/* ── Question footer ─────────────────────────────────────────── */
.q-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Clap counter — read-only in Phase 6.
   Phase 8 turns this into a <button>; the styling already anticipates
   that, so only the tag changes then. */
.clap-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Teacher claps get the amber treatment — visually distinct from
   student claps because they carry more weight in the product. */
.clap-count--teacher {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}

/* ── Answers section ─────────────────────────────────────────── */
.answers-section {
    margin-top: 32px;
}

.answer-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.answer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

/* The best answer is visually pinned: green tint plus a thick green
   left spine. A reader scanning the page should spot it instantly
   without reading a single word. */
.answer-card--best {
    border-color: var(--success-border);
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}

.answer-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.answer-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.answer-card__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 14px;
    overflow-wrap: break-word;
}

.answer-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid;
}

/* Marked as solving the problem by the person who asked. */
.badge--best {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

/* A teacher clapped it — the highest recognition on the platform. */
.badge--teacher {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

/* Posted by the CodingClap team under the Unanswered Guarantee. */
.badge--team {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--info-border);
}

/* Small inline "Teacher" tag beside an answerer's name so readers can
   weigh the answer's authority without hunting for a badge. */
.role-tag {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Answer form ─────────────────────────────────────────────── */
.answer-form-section {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* Shown instead of the form when the answer window is closed, or when
   the viewer has already answered. Dashed border signals "inactive /
   informational" rather than an error. */
.window-closed-note {
    margin-top: 32px;
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    text-align: center;
    color: var(--text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .q-detail {
        padding: 20px 18px;
    }

    .q-detail__title {
        font-size: 1.25rem;
    }

    .answer-card {
        padding: 16px 18px;
    }

    /* Stack the meta rows on narrow screens — author and timestamp
       side by side becomes cramped and starts wrapping badly. */
    .q-detail__meta,
    .answer-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Two columns of screenshots max on a phone. */
    .q-detail__images {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .q-detail__images img {
        height: 110px;
    }
}

/* ============================================================
   Big Search Bar — student/dashboard.php
   ============================================================ */

/*
   Sits directly under the welcome header. Always on screen, always one
   keystroke away. Search is a reflex, not a destination — the box has to
   be where the student is already looking the moment they get stuck.
*/
.big-search {
    margin-bottom: 28px;
}

/*
   The box itself. A single bordered pill containing the icon, the input,
   an optional clear button, and the submit button.

   The border lives on THIS wrapper, not on the input, so the whole
   assembly reads as one control (YouTube/Google style) rather than as
   an input with a button awkwardly stuck next to it.
*/
.big-search__box {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 999px; /* Fully rounded pill */
    padding: 4px 4px 4px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
   :focus-within styles the WRAPPER when any child inside it has focus.
   That is what lets the whole pill light up when the student clicks into
   the input — the focus ring belongs on the visual control, not on the
   bare input hidden inside it.
*/
.big-search__box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.big-search__icon {
    font-size: 1.05rem;
    color: var(--text-muted);
    flex-shrink: 0; /* Never let the icon squash */
    margin-right: 10px;
}

/*
   The input is deliberately stripped bare — no border, no background, no
   focus outline of its own. All of that is handled by the wrapper above,
   so the input just provides the typing surface.
*/
.big-search__input {
    flex: 1; /* Take every pixel the buttons don't */
    border: none;
    background: transparent;
    outline: none;
    padding: 13px 0;
    font-family: inherit;
    font-size: 1.02rem;
    color: var(--text);

    /* Without this an input refuses to shrink below its default size and
       overflows the pill on a narrow screen. */
    min-width: 0;
}

.big-search__input::placeholder {
    color: var(--text-muted);
}

/*
   The × clear button. A plain link back to the bare dashboard URL — no
   JavaScript needed to reset the search.
   Only rendered while a search is active.
*/
.big-search__clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.big-search__clear:hover {
    background: var(--surface-inset);
    color: var(--text);
    text-decoration: none;
}

.big-search__btn {
    flex-shrink: 0;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.big-search__btn:hover {
    background: var(--accent-hover);
}

.big-search__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The quiet line under the box explaining WHY search is worth trying —
   "answered questions are open 24/7" is the thing students won't guess. */
.big-search__hint {
    margin-top: 8px;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Search results ──────────────────────────────────────────── */

/* "3 answered questions found for ..." */
.search-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/*
   The truncated question body under each result title, so relevance can
   be judged without opening every result.
*/
.question-card__preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;

    /* A long unbroken string (a URL, a stack trace) would otherwise stretch
       the card and break the layout. */
    overflow-wrap: break-word;
}

/* ── The locked notice ────────────────────────────────────────
   "N similar questions asked but not yet answered."

   Amber, not red — this is NOT an error. It is useful information:
   a duplicate exists, come back at 7 to read it.

   Shows a COUNT and nothing else. No title, no link. Showing the title
   would let a student read a fresh question at 5 PM and spend two hours
   preparing the winning answer — exactly what the visibility gate exists
   to prevent.
   ─────────────────────────────────────────────────────────── */
.locked-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.locked-notice__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.locked-notice__body strong {
    color: var(--warning);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ── "opens at 7 PM" badge ────────────────────────────────────
   Shown on the student's OWN unanswered question in their feed.

   This is reassurance, not a warning. Their question posted fine — it is
   simply waiting for the window before anyone else can see it. Without
   this badge they would assume it failed and post it again.
   ─────────────────────────────────────────────────────────── */
.pending-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--warning);
    white-space: nowrap; /* Never break "opens at 7 PM" mid-phrase */
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .big-search__box {
        padding: 4px 4px 4px 14px;
    }

    .big-search__input {
        font-size: 0.95rem;
        padding: 11px 0;
    }

    /* Shrink the button so the input keeps usable typing width on a phone. */
    .big-search__btn {
        padding: 10px 16px;
        font-size: 0.88rem;
    }

    .big-search__hint {
        padding-left: 14px;
    }

    .locked-notice {
        padding: 14px 16px;
        gap: 10px;
    }
}

/* ============================================================
   CodingClap — style.css
   Neutral, calm, professional theme.

   Designed to be comfortable for all students, including
   neurodivergent users:
     - Soft off-white background, never stark #fff
     - Dark slate text, never pure #000 (lower glare/contrast strain)
     - One muted accent colour, no neon or high-saturation fills
     - Generous spacing and clear grouping
     - Always-visible, obvious focus rings for keyboard users
     - Readable sans-serif, comfortable 1.55 line-height
     - Minimal, short transitions; no autoplay motion

   Self-contained: defines its own tokens, so it does not depend
   on variables.css. Use this as your only stylesheet (you can
   leave variables.css / responsive.css empty or remove their links).
   ============================================================ */

/* === DESIGN TOKENS === */

:root {
    /* Surfaces & background */
    --bg: #f3f5f7; /* soft cool off-white page background */
    --surface: #ffffff; /* cards, navbar */
    --surface-inset: #f0f2f5; /* subtle inset fills */

    /* Borders */
    --border: #dde2e8;
    --border-strong: #c7ced7;

    /* Text (no pure black) */
    --text: #2b3542; /* primary */
    --text-secondary: #5c6673; /* labels, body secondary */
    --text-muted: #8b95a1; /* hints, footnotes */

    /* Accent — calm muted steel blue, not neon */
    --accent: #3f6cb0;
    --accent-hover: #335a96;
    --accent-soft: #eef3fa; /* light tint background */
    --focus-ring: rgba(63, 108, 176, 0.3);

    /* Semantic (muted, never alarming) */
    --success: #2f7d57;
    --success-bg: #ecf6f0;
    --success-border: #bfe3cd;
    --error: #b4453b;
    --error-bg: #fbeeec;
    --error-border: #efc9c4;
    --warning: #9a6b1e;
    --warning-bg: #fbf3e4;
    --warning-border: #ecd9b0;
    --info: #355f9e;
    --info-bg: #eef3fa;
    --info-border: #cdddf0;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Shadow — soft, low-contrast */
    --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.05);
    --shadow-md: 0 4px 16px rgba(33, 43, 54, 0.07);

    /* Type */
    --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
        monospace;
}

/* === RESET === */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === LAYOUT === */

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* === TYPOGRAPHY === */

h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* === NAVBAR === */

.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 999;
    padding: 0.85rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .logo,
.nav-logo {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--text);
    text-decoration: none;
}

.nav-cta {
    background: var(--accent);
    color: #fff !important;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

.nav-cta:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

/* === BUTTONS === */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: orange;
    color: #fff;
    border: none;
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
}

.btn-primary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text);
    text-decoration: none;
}

/* === AUTH PAGES === */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

.auth-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.85rem;
    margin-bottom: 8px;
}

.auth-card > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.auth-link {
    text-align: center;
    margin-top: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-link a {
    color: var(--accent);
    font-weight: 600;
}

/* === ROLE SELECTOR TABS === */

.role-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 6px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.role-tab:hover {
    color: var(--text);
}

.role-tab--active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.role-tab:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auth-form--hidden {
    display: none;
}

/* === FORMS === */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-group select option {
    background: var(--surface);
    color: var(--text);
}

/* Two-column rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Hints & optional marker */
.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.form-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

/* Section divider (e.g. "Parent / Guardian Details") */
.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

.auth-card button.btn-primary {
    width: 100%;
    margin-top: 8px;
}

/* === FLASH / BANNER MESSAGES === */

.flash {
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-bottom: 20px;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success);
}

.flash--error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error);
}

.flash--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
}

.flash--info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info);
}

/* === ERROR BOX === */

.error-box {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.error-box p {
    color: var(--error);
    font-size: 0.9rem;
    text-align: left;
    margin-bottom: 4px;
}

.error-box p:last-child {
    margin-bottom: 0;
}

/* === FOOTER === */

.footer {
    padding: 2.5rem 0;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.footer p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* === UTILITIES === */

.text-center {
    text-align: center;
}
.text-muted {
    color: var(--text-muted);
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}

/* === RESPONSIVE === */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-page {
        padding: 96px 14px 56px;
    }
    .container {
        padding: 0 1.25rem;
    }
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   AUTH ADDITIONS — append to style.css
   Role tabs, two-column rows, dividers, hints, flash messages,
   and a layout fix so the auth card is centered and clears the navbar.
   ============================================================ */

/* --- Layout fix ---------------------------------------------------------- */
/* The form is taller than the viewport, so align to the top (below the fixed
   navbar) rather than vertically centering, which would clip the heading. */

.auth-page {
    min-height: 100vh;
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: flex-start; /* start below navbar, scroll naturally */
    padding: 120px 20px 80px; /* top padding clears the fixed nav */
}

/* --- Role selector tabs -------------------------------------------------- */

.role-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
}

.role-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.role-tab:hover {
    color: black;
}

.role-tab--active {
    background: var(--blue);
    color: #fff;
}

/* --- Form visibility toggle ---------------------------------------------- */

.auth-form--hidden {
    display: none;
}

/* --- Two-column rows ----------------------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Field hints & optional marker --------------------------------------- */

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.form-optional {
    color: var(--gray-500);
    font-weight: 400;
    font-size: 0.8rem;
}

/* --- Section divider (e.g. "Parent / Guardian Details") ------------------ */

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}

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

.form-section-note {
    text-align: left !important;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 18px !important;
}

/* --- Flash / banner messages --------------------------------------------- */

.flash {
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}

.flash--success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.flash--error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.flash--warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #facc15;
}

.flash--info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Stack the two-column rows on small screens -------------------------- */

@media (max-width: 540px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .auth-card {
        padding: 32px 22px;
    }
    .auth-page {
        padding: 100px 14px 60px;
    }
}

/* ============================================================
   Consent Steps — auth/consent_pending.php
   Three-step progress indicator showing where the student is
   in the DPDP parental consent flow.
   ============================================================ */

.consent-steps {
    display: flex;
    flex-direction: column;
    gap: 0; /* Steps sit flush, connected by border */
    margin: 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip rounded corners on child borders */
    background: var(--surface);
}

/* Each individual step row */
.consent-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    opacity: 0.45; /* Future steps are greyed out */
    transition: opacity 0.2s ease;
}

.consent-step:last-child {
    border-bottom: none; /* No border under the last step */
}

/* Done step — fully visible, green number circle */
.consent-step--done {
    opacity: 1;
}

.consent-step--done .consent-step__number {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
    font-size: 1rem; /* Slightly larger for the checkmark ✓ */
}

/* Active (current) step — fully visible, blue accent number circle */
.consent-step--active {
    opacity: 1;
    background: var(--accent-soft);
}

.consent-step--active .consent-step__number {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* The circular number badge on the left of each step */
.consent-step__number {
    flex-shrink: 0; /* Never squish the number circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px; /* Align with first line of text */
}

/* The text content beside the number */
.consent-step__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consent-step__content strong {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
}

/* Subtitle / helper text below the step title */
.consent-step__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Responsive — tighten padding on small screens */
@media (max-width: 480px) {
    .consent-step {
        padding: 14px 16px;
        gap: 12px;
    }
}

/* ============================================================
   Student Dashboard — student/dashboard.php
   ============================================================ */

/* Page wrapper — sits below the fixed navbar */
.dashboard-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* Top row: welcome text on left, window badge on right */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.dashboard-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 4px;
}

/* Answer window badge */
.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid;
}

.window-badge--open {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.window-badge--closed {
    background: var(--surface-inset);
    border-color: var(--border);
    color: var(--text-secondary);
}

.window-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.window-badge--open .window-badge__dot {
    background: var(--success);
}
.window-badge--closed .window-badge__dot {
    background: var(--border-strong);
}

/* Stats row — 4 cards in a grid */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card__num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.stat-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Ask a Question CTA banner */
.ask-cta {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.ask-cta__text {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

/* Two-column layout */
.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* Question cards */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.question-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.question-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.question-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.question-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.question-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 4px;
}

/* Topic badge */
.topic-badge {
    display: inline-block;
    padding: 2px 10px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
}

/* Status badge */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge--open {
    background: var(--warning-bg);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}
.status-badge--answered {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}
.status-badge--closed {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-cols {
        grid-template-columns: 1fr;
    }
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ask-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Ask a Question — questions/ask.php
   ============================================================ */

/* Page wrapper — margin-top clears the fixed navbar */
.ask-wrap {
    padding: 40px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

/* The single centred card holding the whole form */
.ask-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
}

.ask-card h1 {
    font-size: 1.7rem;
    margin-bottom: 6px;
}

/* The intro line directly under the h1 */
.ask-card > .text-muted {
    margin-bottom: 28px;
}

/* ── Textareas ────────────────────────────────────────────────
   The base .form-group input styling does not cover <textarea>,
   so it is defined here to match inputs exactly.
   ─────────────────────────────────────────────────────────── */
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;

    /* Let the student drag it taller if they have a lot to say,
       but never sideways (which would break the card layout). */
    resize: vertical;

    /* Without this the padding would be ADDED to the 100% width,
       pushing the textarea wider than its container. */
    box-sizing: border-box;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    /* A soft halo instead of the browser's default hard outline —
       still clearly visible for keyboard users. */
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ── Code snippet textarea ────────────────────────────────────
   !important is needed here to override the .form-group textarea
   rules above, which have equal specificity but come first.
   ─────────────────────────────────────────────────────────── */
.code-field {
    font-family: var(--font-mono) !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;

    /* A subtly different background signals "this is a code area"
       without needing a label. */
    background: var(--surface-inset) !important;

    /* Render a tab character as 4 spaces wide so pasted Python
       indentation looks the way the student wrote it. */
    tab-size: 4;
}

/* ── Custom file upload ───────────────────────────────────────
   The real <input type="file"> is visually hidden and the <label>
   is styled as a drop zone. Clicking the label triggers the input
   natively — no JavaScript required for it to work.
   ─────────────────────────────────────────────────────────── */
.file-upload {
    position: relative;
}

/*
   Hide the real input WITHOUT using display:none or visibility:hidden.
   Those would remove it from the accessibility tree, meaning screen
   readers and keyboard tabbing could no longer reach it. Shrinking it
   to 1px with opacity 0 keeps it focusable and announced.
*/
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.file-upload__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;

    /* Dashed border is the conventional visual language for
       "you can drop something here". */
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);

    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.file-upload__label:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Give the hidden input's focus state a visible target on the label,
   so keyboard users can see where they are. */
.file-upload input[type="file"]:focus-visible + .file-upload__label {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.file-upload__icon {
    font-size: 1.5rem;
}

.file-upload__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.file-upload__hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Success screen ──────────────────────────────────────────── */
.ask-success {
    text-align: center;
    padding: 8px 0;
}

.ask-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.ask-success h1 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.ask-success .text-muted {
    margin-bottom: 24px;
}

.ask-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* ── Study suggestions card ("While you wait") ───────────────── */
.study-card {
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-md);
    padding: 20px 24px;

    /* Override the centred alignment inherited from .ask-success —
       a list of links reads better left-aligned. */
    text-align: left;

    margin: 20px 0;
}

.study-card__heading {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 12px;
}

.study-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.study-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.study-item a:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.study-item__arrow {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── Field-level error state ─────────────────────────────────── */

/* Applied to the wrapping .form-group when that field has an error,
   turning its input/select/textarea border red. */
.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--error);
}

/* The small red message printed directly under the offending field. */
.form-hint--error {
    color: var(--error);
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 540px) {
    .ask-card {
        padding: 24px 18px;
    }

    /* Stack the three success buttons full-width instead of letting
       them wrap awkwardly on a narrow phone screen. */
    .ask-success__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ask-success__actions .btn-primary,
    .ask-success__actions .btn-ghost {
        text-align: center;
    }
}

/* ============================================================
   Question Detail — questions/view.php
   ============================================================ */

/* Page wrapper. margin-top clears the fixed navbar.
   max-width on the container keeps line length readable — long
   paragraphs of explanation are hard to read edge-to-edge. */
.view-wrap {
    padding: 32px 0 80px;
    min-height: calc(100vh - 60px);
    margin-top: 60px;
}

.view-wrap .container {
    max-width: 860px;
}

/* Breadcrumb link back to the dashboard */
.view-back {
    display: inline-block;
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.15s ease;
}

.view-back:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ── The question card ───────────────────────────────────────── */
.q-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    box-shadow: var(--shadow-sm);
}

.q-detail__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* "edited 2h ago" marker — deliberately quiet. It must be findable
   for transparency but should not compete with the title. */
.q-detail__edited {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.q-detail__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    margin-bottom: 12px;
}

/* Author + timestamp line */
.q-detail__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}

/* The question body text.
   1.7 line-height (looser than the 1.55 used elsewhere) because this
   is the longest continuous prose on the site — extra leading makes a
   wall of text noticeably easier to read. */
.q-detail__body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 18px;

    /* A very long unbroken string (a URL, a stack trace) would otherwise
       stretch the card and break the layout. This forces it to wrap. */
    overflow-wrap: break-word;
}

/* ── Code blocks ─────────────────────────────────────────────────
   Shared shape for the question's snippet and each answer's example.
   ─────────────────────────────────────────────────────────────── */
.q-detail__code,
.answer-card__code {
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent); /* Accent spine marks it as code */
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 18px;

    /* Long lines scroll horizontally rather than wrapping.
       Wrapping code would change its meaning — a wrapped Python line
       looks like a different indentation level. Scrolling preserves truth. */
    overflow-x: auto;

    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    tab-size: 4;
}

/* <pre> sets its own margin by default; strip it so our padding controls spacing. */
.q-detail__code code,
.answer-card__code code {
    font-family: inherit;
    background: none;
    padding: 0;
}

/* ── Attached screenshots ────────────────────────────────────────
   auto-fill + minmax means the grid decides its own column count
   based on available width — one image sits at 180px, several flow
   into a row, and it reflows on mobile with no media query needed.
   ─────────────────────────────────────────────────────────────── */
.q-detail__images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.q-detail__images img {
    width: 100%;
    height: 140px;

    /* cover crops to fill the box without distorting the image.
       Clicking opens the full-size original in a new tab. */
    object-fit: cover;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}

.q-detail__images a:hover img {
    border-color: var(--accent);
}

/* ── Question footer ─────────────────────────────────────────── */
.q-detail__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Clap counter — read-only in Phase 6.
   Phase 8 turns this into a <button>; the styling already anticipates
   that, so only the tag changes then. */
.clap-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Teacher claps get the amber treatment — visually distinct from
   student claps because they carry more weight in the product. */
.clap-count--teacher {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning);
}

/* ── Answers section ─────────────────────────────────────────── */
.answers-section {
    margin-top: 32px;
}

.answer-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

.answer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

/* The best answer is visually pinned: green tint plus a thick green
   left spine. A reader scanning the page should spot it instantly
   without reading a single word. */
.answer-card--best {
    border-color: var(--success-border);
    background: var(--success-bg);
    border-left: 4px solid var(--success);
}

.answer-card__badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.answer-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}

.answer-card__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 14px;
    overflow-wrap: break-word;
}

.answer-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid;
}

/* Marked as solving the problem by the person who asked. */
.badge--best {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

/* A teacher clapped it — the highest recognition on the platform. */
.badge--teacher {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

/* Posted by the CodingClap team under the Unanswered Guarantee. */
.badge--team {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--info-border);
}

/* Small inline "Teacher" tag beside an answerer's name so readers can
   weigh the answer's authority without hunting for a badge. */
.role-tag {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Answer form ─────────────────────────────────────────────── */
.answer-form-section {
    margin-top: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
}

/* Shown instead of the form when the answer window is closed, or when
   the viewer has already answered. Dashed border signals "inactive /
   informational" rather than an error. */
.window-closed-note {
    margin-top: 32px;
    background: var(--surface-inset);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    text-align: center;
    color: var(--text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .q-detail {
        padding: 20px 18px;
    }

    .q-detail__title {
        font-size: 1.25rem;
    }

    .answer-card {
        padding: 16px 18px;
    }

    /* Stack the meta rows on narrow screens — author and timestamp
       side by side becomes cramped and starts wrapping badly. */
    .q-detail__meta,
    .answer-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Two columns of screenshots max on a phone. */
    .q-detail__images {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .q-detail__images img {
        height: 110px;
    }
}

/* ============================================================
   Big Search Bar — student/dashboard.php
   ============================================================ */

/*
   Sits directly under the welcome header. Always on screen, always one
   keystroke away. Search is a reflex, not a destination — the box has to
   be where the student is already looking the moment they get stuck.
*/
.big-search {
    margin-bottom: 28px;
}

/*
   The box itself. A single bordered pill containing the icon, the input,
   an optional clear button, and the submit button.

   The border lives on THIS wrapper, not on the input, so the whole
   assembly reads as one control (YouTube/Google style) rather than as
   an input with a button awkwardly stuck next to it.
*/
.big-search__box {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 999px; /* Fully rounded pill */
    padding: 4px 4px 4px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
   :focus-within styles the WRAPPER when any child inside it has focus.
   That is what lets the whole pill light up when the student clicks into
   the input — the focus ring belongs on the visual control, not on the
   bare input hidden inside it.
*/
.big-search__box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.big-search__icon {
    font-size: 1.05rem;
    color: var(--text-muted);
    flex-shrink: 0; /* Never let the icon squash */
    margin-right: 10px;
}

/*
   The input is deliberately stripped bare — no border, no background, no
   focus outline of its own. All of that is handled by the wrapper above,
   so the input just provides the typing surface.
*/
.big-search__input {
    flex: 1; /* Take every pixel the buttons don't */
    border: none;
    background: transparent;
    outline: none;
    padding: 13px 0;
    font-family: inherit;
    font-size: 1.02rem;
    color: var(--text);

    /* Without this an input refuses to shrink below its default size and
       overflows the pill on a narrow screen. */
    min-width: 0;
}

.big-search__input::placeholder {
    color: var(--text-muted);
}

/*
   The × clear button. A plain link back to the bare dashboard URL — no
   JavaScript needed to reset the search.
   Only rendered while a search is active.
*/
.big-search__clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.big-search__clear:hover {
    background: var(--surface-inset);
    color: var(--text);
    text-decoration: none;
}

.big-search__btn {
    flex-shrink: 0;
    padding: 12px 26px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.big-search__btn:hover {
    background: var(--accent-hover);
}

.big-search__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* The quiet line under the box explaining WHY search is worth trying —
   "answered questions are open 24/7" is the thing students won't guess. */
.big-search__hint {
    margin-top: 8px;
    padding-left: 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ── Search results ──────────────────────────────────────────── */

/* "3 answered questions found for ..." */
.search-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/*
   The truncated question body under each result title, so relevance can
   be judged without opening every result.
*/
.question-card__preview {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;

    /* A long unbroken string (a URL, a stack trace) would otherwise stretch
       the card and break the layout. */
    overflow-wrap: break-word;
}

/* ── The locked notice ────────────────────────────────────────
   "N similar questions asked but not yet answered."

   Amber, not red — this is NOT an error. It is useful information:
   a duplicate exists, come back at 7 to read it.

   Shows a COUNT and nothing else. No title, no link. Showing the title
   would let a student read a fresh question at 5 PM and spend two hours
   preparing the winning answer — exactly what the visibility gate exists
   to prevent.
   ─────────────────────────────────────────────────────────── */
.locked-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.locked-notice__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.locked-notice__body strong {
    color: var(--warning);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ── "opens at 7 PM" badge ────────────────────────────────────
   Shown on the student's OWN unanswered question in their feed.

   This is reassurance, not a warning. Their question posted fine — it is
   simply waiting for the window before anyone else can see it. Without
   this badge they would assume it failed and post it again.
   ─────────────────────────────────────────────────────────── */
.pending-badge {
    display: inline-block;
    padding: 2px 9px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--warning);
    white-space: nowrap; /* Never break "opens at 7 PM" mid-phrase */
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .big-search__box {
        padding: 4px 4px 4px 14px;
    }

    .big-search__input {
        font-size: 0.95rem;
        padding: 11px 0;
    }

    /* Shrink the button so the input keeps usable typing width on a phone. */
    .big-search__btn {
        padding: 10px 16px;
        font-size: 0.88rem;
    }

    .big-search__hint {
        padding-left: 14px;
    }

    .locked-notice {
        padding: 14px 16px;
        gap: 10px;
    }
}

/* ============================================================
   Teacher timing modal — questions/view.php
   Shown when a teacher focuses the answer field on a question
   whose "students first" window has not yet closed.
   ============================================================ */
.tg-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tg-modal[hidden] {
    display: none;
}

.tg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(33, 43, 54, 0.45);
}

.tg-modal__box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.tg-modal__icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 12px;
}

.tg-modal__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.tg-modal__text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

.tg-modal__when {
    font-size: 0.95rem;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
}

.tg-modal__box .btn-primary {
    width: 100%;
}