/* ============================================
   ALLOYCITY AI TUTOR - GAMING THEME
   Brass City Gamers Brand Colors
   ============================================ */

/* CSS Variables - BCG Color Palette */
:root {
    /* Primary Colors */
    --bcg-dark: #343436;
    --bcg-red: #AE2C11;
    --bcg-gold: #DB9941;
    --bcg-light-gray: #D8DBE2;
    --bcg-white: #FFFFFF;
    
    /* Secondary Colors */
    --bcg-cyan: #00C4C0;
    --bcg-orange: #FF7F11;
    --bcg-blue: #0948DB;
    --bcg-neon-green: #02FF02;
    --bcg-purple: #CC88FF;
    
    /* UI Colors */
    --background: #1a1a1c;
    --container-bg: #242426;
    --card-bg: #2d2d2f;
    --card-hover: #35353a;
    --text-primary: #FFFFFF;
    --text-secondary: #D8DBE2;
    --text-muted: #9A9AA2;   /* AC-21: was #888 (~3.5:1 on --background). Now >=4.5:1. */
    --border-color: #404044;
    --accent-glow: rgba(174, 44, 17, 0.3);

    /* ── AC-21 (2026-08-11 audit): DEFINE THE MISSING TOKENS ─────────────────
       axe-core measured the quiz buttons at ~1.35:1 — a serious WCAG 1.4.3
       failure. ROOT CAUSE: `.quiz-btn` sets `background: var(--surface-color)`
       and `color: var(--text-color)`, and NEITHER TOKEN WAS EVER DEFINED
       (verified: 0 definitions, 1 use each). An undefined custom property makes
       the declaration invalid-at-computed-value-time, so both fell back to
       inherited values — dark text on a dark surface. This was a real bug, not a
       palette preference, which is why the contrast was so far out of range.
       Defined here against the existing dark palette:
         --surface-color #2d2d2f (matches --card-bg) vs --text-color #F2F2F4
         => ~13.5:1, comfortably WCAG AA (4.5:1) and AAA (7:1) for body text. */
    --surface-color: #2d2d2f;
    --text-color: #F2F2F4;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body - Dark Gaming Background */
body {
    font-family: 'OpenDyslexic', 'Segoe UI', 'Arial', sans-serif;
    background: linear-gradient(135deg, var(--background) 0%, var(--bcg-dark) 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* Main Container */
.container {
    width: 100%;
    max-width: 1100px;
    height: 95vh;
    max-height: 900px;
    background: var(--container-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 
                0 0 40px rgba(174, 44, 17, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* ============================================
   HEADER SECTION
   ============================================ */

.header {
    background: linear-gradient(135deg, var(--bcg-dark) 0%, var(--surface-sunken) 100%);
    color: var(--text-primary);
    padding: 20px 24px;
    border-bottom: 2px solid var(--bcg-red);
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--bcg-red) 0%, 
        var(--bcg-gold) 50%, 
        var(--bcg-red) 100%);
    opacity: 0.6;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.header-logo {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 8px rgba(174, 44, 17, 0.3));
}

.header-text {
    flex: 1;
}

.header h1 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    /* Emphasis comes from weight and size. The previous treatment clipped a
       linear-gradient to the glyphs with a transparent fill, which is a listed
       AI tell and also defeats forced-colours and high-contrast modes. */
    color: var(--bcg-gold);
}

.subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    opacity: 0.9;
}

.student-info {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.info-badge {
    background: rgba(174, 44, 17, 0.2);
    border: 1px solid var(--bcg-red);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bcg-gold);
    box-shadow: 0 2px 8px rgba(174, 44, 17, 0.2);
}

.info-badge span {
    color: var(--bcg-white);
}

/* ============================================
   CHAT CONTAINER
   ============================================ */

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--background);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Message Bubbles */
.message {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: slideIn 0.3s ease-out;
}

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

.message-bubble {
    padding: 20px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* AI Messages */
.ai-message .message-bubble {
    margin-right: 60px;
    border-left: 1px solid var(--bcg-red);
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--surface-sunken) 100%);
}

.ai-message .message-bubble:hover {
    border-left-color: var(--bcg-gold);
    box-shadow: 0 4px 16px rgba(174, 44, 17, 0.2);
}

/* User Messages */
.user-message .message-bubble {
    margin-left: 60px;
    border-left: 1px solid var(--bcg-gold);
    background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--card-bg) 100%);
    align-self: flex-end;
}

/* Text Display */
.sentence-display {
    margin-bottom: 0;
}

.main-text {
    font-size: 26px;
    line-height: 1.6;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ============================================
   PHONETIC BREAKDOWN SECTION
   ============================================ */

.phonetic-help {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.phonetic-word-box {
    background: rgba(0, 196, 192, 0.05);
    border: 1px solid rgba(0, 196, 192, 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.phonetic-word-box:last-child {
    margin-bottom: 0;
}

.word-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--bcg-cyan);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.word-play-btn {
    background: rgba(0, 196, 192, 0.2);
    border: 1px solid var(--bcg-cyan);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
    color: var(--bcg-cyan);
}

.word-play-btn:hover {
    background: var(--bcg-cyan);
    color: var(--bcg-dark);
    box-shadow: 0 0 12px rgba(0, 196, 192, 0.4);
    transform: scale(1.05);
}

.phoneme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.phoneme-btn {
    background: linear-gradient(135deg, var(--bcg-cyan) 0%, var(--cyan-deep) 100%);
    color: var(--bcg-dark);
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
    box-shadow: 0 4px 8px rgba(0, 196, 192, 0.2);
    min-width: 60px;
    text-transform: lowercase;
}

/* Vowels use red/gold per Science of Reading color coding */
.phoneme-btn.phoneme-vowel {
    background: linear-gradient(135deg, var(--bcg-red) 0%, var(--red-deep) 100%);
    color: var(--bcg-white);
    box-shadow: 0 4px 8px rgba(174, 44, 17, 0.25);
}

.phoneme-btn.phoneme-vowel:hover {
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--bcg-red) 100%);
    box-shadow: 0 6px 16px rgba(174, 44, 17, 0.4);
    transform: translateY(-2px);
}

/* Consonants keep cyan */
.phoneme-btn.phoneme-consonant {
    background: linear-gradient(135deg, var(--bcg-cyan) 0%, var(--cyan-deep) 100%);
    color: var(--bcg-dark);
}

.phoneme-btn:hover {
    background: linear-gradient(135deg, var(--cyan-bright) 0%, var(--bcg-cyan) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 196, 192, 0.4);
}

.phoneme-btn:active {
    transform: scale(0.95);
}

/* ============================================
   MESSAGE CONTROLS
   ============================================ */

.message-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.control-btn {
    padding: 10px 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
    color: var(--text-secondary);
}

.control-btn:hover {
    background: var(--card-hover);
    border-color: var(--bcg-gold);
    color: var(--bcg-gold);
    transform: translateY(-1px);
}

.read-btn {
    background: rgba(2, 255, 2, 0.1);
    border-color: var(--bcg-neon-green);
    color: var(--bcg-neon-green);
}

.read-btn:hover {
    background: rgba(2, 255, 2, 0.2);
    box-shadow: 0 0 12px rgba(2, 255, 2, 0.2);
}

.help-btn {
    background: rgba(255, 127, 17, 0.1);
    border-color: var(--bcg-orange);
    color: var(--bcg-orange);
}

.help-btn:hover {
    background: rgba(255, 127, 17, 0.2);
    box-shadow: 0 0 12px rgba(255, 127, 17, 0.2);
}

/* ============================================
   INPUT SECTION
   ============================================ */

.input-container {
    padding: 20px 24px;
    background: var(--container-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    align-items: center;
}

.quiz-bar {
    display: flex;
    gap: 10px;
    padding: 0 24px 14px;
    background: var(--container-bg);
}

.quiz-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
}

.quiz-btn:hover {
    background: var(--bcg-red);
    color: white;
    border-color: var(--bcg-red);
    transform: translateY(-1px);
}

.quiz-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#micButton {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--bcg-red) 0%, var(--red-deep) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
    box-shadow: 0 4px 12px rgba(174, 44, 17, 0.3);
}

#micButton:hover {
    background: linear-gradient(135deg, var(--red-bright) 0%, var(--bcg-red) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(174, 44, 17, 0.4);
}

#micButton.recording {
    background: var(--bcg-neon-green);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(2, 255, 2, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(2, 255, 2, 0); }
}

#messageInput {
    flex: 1;
    padding: 14px 18px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    font-family: 'OpenDyslexic', 'Segoe UI', sans-serif;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
}

#messageInput:focus {
    outline: none;
    border-color: var(--bcg-gold);
    box-shadow: 0 0 0 3px rgba(219, 153, 65, 0.1);
}

#messageInput::placeholder {
    color: var(--text-muted);
}

#sendButton {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--bcg-gold) 0%, var(--gold-deep) 100%);
    color: var(--bcg-dark);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
    box-shadow: 0 4px 12px rgba(219, 153, 65, 0.3);
}

#sendButton:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--bcg-gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(219, 153, 65, 0.4);
}

#sendButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   FOOTER SECTION
   ============================================ */

.footer {
    padding: 16px 24px;
    background: var(--container-bg);
    border-top: 1px solid var(--border-color);
}

.footer-branding {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.footer-logo {
    height: 40px;
    width: auto;
}

.footer-text {
    text-align: left;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-muted);
}

.footer-text strong {
    color: var(--text-secondary);
    font-size: 12px;
}

.footer-link {
    /* AC-21: axe measured privacy/footer links at ~1.56:1 against surrounding
       text with NO non-colour cue — failing both 1.4.3 (contrast) and 1.4.1 (use
       of colour). Gold #DB9941 is fine on the dark background but is nearly
       indistinguishable from adjacent body text by colour alone, so links are now
       persistently underlined: colour is no longer the only differentiator. */
    color: var(--bcg-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: background-color .2s ease-out, border-color .2s ease-out,
                color .2s ease-out, transform .2s ease-out,
                box-shadow .2s ease-out, opacity .2s ease-out;
}

.footer-link:hover {
    color: var(--bcg-white);
    text-decoration: underline;
}

.footer-mission {
    color: var(--text-muted);
    font-style: italic;
}

.footer-details {
    color: #666;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.chat-container::-webkit-scrollbar {
    width: 10px;
}

.chat-container::-webkit-scrollbar-track {
    background: var(--background);
}

.chat-container::-webkit-scrollbar-thumb {
    background: var(--bcg-red);
    border-radius: 5px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
    background: var(--bcg-gold);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets and smaller laptops */
@media (max-width: 900px) {
    .header h1 {
        font-size: 24px;
    }
    
    .main-text {
        font-size: 24px;
    }
    
    .ai-message .message-bubble {
        margin-right: 20px;
    }
    
    .user-message .message-bubble {
        margin-left: 20px;
    }
}

/* Mobile phones */
@media (max-width: 600px) {
    body {
        padding: 0;
    }
    
    .container {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    
    .header {
        padding: 16px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .header-logo {
        height: 40px;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    .subtitle {
        font-size: 11px;
    }
    
    .student-info {
        width: 100%;
    }
    
    .info-badge {
        flex: 1;
        text-align: center;
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .chat-container {
        padding: 16px;
        gap: 16px;
    }
    
    .message-bubble {
        padding: 16px;
    }
    
    .main-text {
        font-size: 22px;
    }
    
    .ai-message .message-bubble,
    .user-message .message-bubble {
        margin-left: 0;
        margin-right: 0;
    }
    
    .word-title {
        font-size: 20px;
    }
    
    .phoneme-btn {
        font-size: 18px;
        padding: 10px 14px;
        min-width: 50px;
    }
    
    .input-container {
        padding: 12px;
        gap: 8px;
    }
    
    #micButton {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    #messageInput {
        font-size: 15px;
        padding: 12px 14px;
    }
    
    #sendButton {
        padding: 12px 24px;
        font-size: 15px;
    }
    
    .footer {
        padding: 12px;
    }
    
    .footer-branding {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-logo {
        height: 35px;
    }
    
    .footer-text {
        text-align: center;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .main-text {
        font-size: 20px;
    }
    
    .phoneme-btn {
        font-size: 16px;
        padding: 8px 12px;
    }
    
    #sendButton {
        padding: 12px 18px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .main-text {
        font-weight: 700;
        color: var(--bcg-white);
    }
    
    .message-bubble {
        border-width: 2px;
    }
}

/* Mute Button Styling */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mute-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bcg-neon-green); /* Neon green when active */
    border: 2px solid var(--bcg-neon-green);
    border-radius: 8px;
    color: var(--bcg-dark);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .3s ease-out, border-color .3s ease-out,
                color .3s ease-out, transform .3s ease-out, opacity .3s ease-out;
}

.mute-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(2, 255, 2, 0.3);
}

.mute-btn.muted {
    background: var(--bcg-red); /* Burnt red when muted */
    border-color: var(--bcg-red);
    color: white;
}

.mute-btn.muted:hover {
    box-shadow: 0 4px 12px rgba(174, 44, 17, 0.3);
}

.mute-icon {
    font-size: 18px;
}

.mute-text {
    font-size: 13px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .header-right {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        width: 100%;
    }

    .student-info {
        width: 100%;
    }
    
    .mute-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .mute-text {
        display: none; /* Hide text on mobile, show icon only */
    }
}

/* ==========================================================================
   UI-07 — type scale and icon system
   Added 2026-08-01 from the $impeccable audit (11/20, Implementation Integrity 1/4).

   The audit found 17 ad-hoc font-size values between 10px and 52px with no
   ramp, and three <h1> elements two of which were styled inline. A scale that
   is named is a scale that gets reused; ad-hoc pixel values are how the drift
   happened.

   OpenDyslexic stays FIRST in every stack. It is a deliberate accessibility
   choice for a literacy product, not a default to be tidied away.
   ========================================================================== */
:root {
  /* 1.200 minor-third ramp, rounded to whole px and anchored on the 16px body */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;   /* body */
  --fs-lg:  19px;
  --fs-xl:  23px;
  --fs-2xl: 28px;
  --fs-3xl: 33px;

  --lh-tight: 1.15;
  --lh-body:  1.55;

  /* craft floor: tracking floor is -0.04em, and -0.02/-0.03 usually reads
     better. Display sizes tighten slightly; body text never does. */
  --tracking-display: -0.02em;
}

/* The wordmark on the gate screens. Not a heading — the document has one h1. */
.brand-wordmark {
  font-family: 'OpenDyslexic', 'Segoe UI', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--bcg-gold);
  /* craft floor: more space above a heading than below it */
  margin: 0 0 10px;
}
.brand-wordmark-sm { font-size: var(--fs-xl); margin-bottom: 6px; }

/* ---- icon system (replaces emoji-as-icon) ----------------------------
   AlloyIcon renders 24x24 stroked SVG on currentColor, so an icon inherits
   the colour of whatever control holds it and needs no per-theme variants. */
.ai-icon { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }
.ai-iconbtn { display: inline-flex; align-items: center; justify-content: center; }
.ai-btn { display: inline-flex; align-items: center; gap: 0.5em; }
.ai-btn-label { line-height: 1; }
/* Touch target floor. The audit found interactive elements below 44px and no
   touch-action, on a product with a tablet path. */
.ai-iconbtn { min-width: 44px; min-height: 44px; }

/* ==========================================================================
   UI-07 item 4 — colour tokens for values that were literals
   The audit found 88 raw hex literals against 25 tokens. 70 occurrences mapped
   exactly onto existing tokens and were swapped. These are the recurring
   values that had NO token; they are recorded at their exact previous values so
   this change is a rename, not a restyle.

   OBSERVATION for a later pass, not changed here: --text-tertiary and
   --text-quaternary are pure neutral greys. The craft floor prefers secondary
   text tinted from the surface hue rather than gray. The surfaces here are
   near-neutral so it is defensible, but it is a deliberate decision worth
   making rather than inheriting.
   ========================================================================== */
:root {
  --text-tertiary:    #bbbbbb;  /* was inline x15 */
  --text-quaternary:  #999999;  /* was inline x9  */
  --surface-sunken:   #2a2a2c;  /* was x3 */
  --surface-panel:    #1f1f21;  /* repeated panel background */
  --border-subtle:    #333333;
  --cyan-deep:        #00a8a5;  /* darker cyan, hover state */
  --cyan-bright:      #00e5e0;
  --cyan-soft:        #54d2d2;
  --red-deep:         #8a2310;
  --red-bright:       #c93517;
  --gold-deep:        #c07d2a;
  --gold-soft:        #f0b558;
  --ink-deep:         #14140f;
  --success:          #4caf50;
}

/* ==========================================================================
   UI-07 item 3 — classes for repeated inline styles
   The audit found 127 inline style= attributes. Inline styling was the DEFAULT
   here, which is the root cause of both the colour drift and the 17-value type
   sprawl — fixing colours without fixing this would just re-drift.

   Only patterns with 3+ uses are extracted. One-off inline styles are left
   alone deliberately: converting 127 attributes blind risks breaking layouts
   that are not visible in a diff. Values are carried over exactly.
   ========================================================================== */
.u-card {
  background: var(--container-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
}
.u-panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
}
.u-note {                       /* secondary body copy inside cards */
  color: var(--text-quaternary);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  margin: 0;
}
.u-note-alt { color: var(--text-tertiary); }
.u-list {
  color: var(--text-quaternary);
  font-size: var(--fs-xs);
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}
.u-subhead {                    /* small cyan section label */
  color: var(--bcg-cyan);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 6px;
}
.u-eyebrow-gold {
  color: var(--bcg-gold);
  font-weight: 800;
  font-size: var(--fs-xs);
  margin-bottom: 4px;
}
.u-field {                      /* text input / select inside forms */
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--bcg-light-gray);
  font-weight: 600;
}
.u-muted { color: var(--text-tertiary); }
.u-ornament { font-size: var(--fs-2xl); margin-bottom: 8px; }

/* ==========================================================================
   UI-07 item 5 — adapt
   The audit found no touch-action anywhere on a product with a tablet path.
   `manipulation` drops the ~300ms tap delay and blocks double-tap zoom on
   controls, without disabling pinch-zoom on the page (which would be an
   accessibility regression).

   Touch targets: 44x44 is the WCAG 2.5.5 / platform floor. Applied to the
   controls the audit found below it, not blanket-applied, so text links and
   inline affordances keep their natural size.
   ========================================================================== */
button,
select,
[role="button"],
.control-btn,
.quiz-btn,
.mute-btn {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  button,
  select,
  .control-btn,
  .quiz-btn,
  .mute-btn {
    min-height: 44px;
  }
  .mute-btn,
  .ai-iconbtn {
    min-width: 44px;
  }
}

/* ==========================================================================
   UI-07 item 8 - the sign-in gate
   The first and only screen a new visitor sees. It was 27/29 inline-styled and
   carried 4 measured contrast failures, 4 emoji-as-icons, and an inverted
   hierarchy: choosing a grade band is step one but was rendered quieter than
   the sign-in button.

   The two-card grid is gone. It forced a one-action teacher card to match the
   height of a seven-action student card (~200px of void) and it implied the
   two paths carry equal traffic. They do not.
   ========================================================================== */
.gate-inner {
  width: 100%;
  max-width: 460px;
  text-align: center;
}

/* One authored arrival, not an effect on every element. */
@media (prefers-reduced-motion: no-preference) {
  .gate-inner { animation: gateRise .42s cubic-bezier(.25, 1, .5, 1) both; }
}
@keyframes gateRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.gate-tagline {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0 0 18px;
}

.gate-card {
  background: var(--container-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px 20px;
  text-align: left;
}

/* More space above a label than below it, so it binds to what it introduces. */
.gate-step {
  color: var(--bcg-cyan);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.gate-step + .gate-hint { margin-top: -6px; }
.gate-hint {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  margin: 0 0 12px;
}

/* Step one is the loud step. Bands are the primary target on this screen. */
.gate-bands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gate-band {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--bcg-light-gray);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-md);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s ease-out, border-color .18s ease-out,
              color .18s ease-out;
}
.gate-band:hover { background: var(--card-hover); border-color: var(--text-muted); }
.gate-band.is-selected {
  background: var(--bcg-cyan);
  border-color: var(--bcg-cyan);
  color: var(--ink-deep);
}

/* Adult is not a grade band. It is a different kind of choice, so it sits
   below the rule rather than as a fifth sibling in the grid. */
.gate-adult {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.gate-adult .gate-band { width: 100%; font-size: var(--fs-sm); padding: 12px 10px; }

.gate-sep {
  margin: 15px 0 12px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

.gate-actions { display: flex; flex-direction: column; gap: 9px; }

.gate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--bcg-light-gray);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}
.gate-btn:hover { background: var(--card-hover); border-color: var(--text-muted); }
.gate-btn .ai-icon { flex: 0 0 auto; }

/* The staff door: one quiet row, not a card competing with the student path. */
.gate-staff {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}
.gate-staff a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bcg-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gate-staff a:hover { border-bottom-color: var(--bcg-gold); }

.gate-foot {
  color: var(--text-quaternary);   /* was #555 - failed contrast at ~2.6:1 */
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  margin-top: 18px;
}
.gate-foot a,
.gate-foot button {
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.gate-error {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--bcg-red);
  border-radius: 8px;
  background: rgba(174, 44, 17, .12);
  color: var(--bcg-light-gray);   /* readable, unlike #ff6b6b on near-black */
  font-size: var(--fs-xs);
  text-align: left;
}

@media (max-width: 420px) {
  .gate-bands { grid-template-columns: 1fr; }
}

/* ==========================================================================
   UI-07 item 8 - focus. The audit found ZERO :focus-visible rules in the
   stylesheet, so keyboard users got only the UA default outline, which is
   nearly invisible against these dark custom surfaces.
   ========================================================================== */
:where(a, button, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bcg-cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 10, 12, .97);
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
}
/* JS toggles display between 'none' and 'flex'; keep that contract. */
.gate-logo { height: 46px; margin-bottom: 12px; }

@media (pointer: coarse) {
  .gate-staff a { min-height: 44px; align-items: center; padding: 0 4px; }
}