/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #b0b8c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8a949e; }
* { scrollbar-width: thin; scrollbar-color: #b0b8c1 transparent; }

/*
    Palette  (from TashSixtyOne)
    -------
    #023E8A  deep navy    — topbar, primary actions
    #0077B6  ocean blue   — interactive, active states
    #90E0EF  sky          — accent highlights, focus rings
    #CAF0F8  ice          — subtle tints, alternating rows
*/
:root {
    --navy:       #023E8A;
    --ocean:      #023E8A;
    --sky:        #90E0EF;
    --ice:        #CAF0F8;

    --navy-dark:  #012d66;
    --ocean-dark: #012d66;

    --color-bg:      #f2f7fb;
    --color-surface: #ffffff;
    --color-border:  #d6e8f2;
    --color-text:    #091e36;
    --color-muted:   #4a637a;

    --success:    #16a34a;
    --success-bg: #f0fdf4;
    --warning:    #d97706;
    --danger:     #dc2626;

    /* Subject colors */
    --subj-math:     #3b82f6;
    --subj-math-bg:  #eff6ff;
    --subj-read:     #10b981;
    --subj-read-bg:  #ecfdf5;
    --subj-sci:      #8b5cf6;
    --subj-sci-bg:   #f5f3ff;
    --subj-ss:       #0891b2;
    --subj-ss-bg:    #ecfeff;
    --subj-la:       #7c3aed;
    --subj-la-bg:    #f5f3ff;

    /* Long-name aliases so code using getSubjectClass() (which returns
       "reading", "science", "social-studies", "language-arts") can build
       var(--subj-<class>) references that resolve. */
    --subj-reading:        var(--subj-read);
    --subj-reading-bg:     var(--subj-read-bg);
    --subj-science:        var(--subj-sci);
    --subj-science-bg:     var(--subj-sci-bg);
    --subj-social-studies: var(--subj-ss);
    --subj-social-studies-bg: var(--subj-ss-bg);
    --subj-language-arts:  var(--subj-la);
    --subj-language-arts-bg: var(--subj-la-bg);

    --radius:    5px;
    --radius-lg: 8px;

    --shadow-sm: 0 1px 3px rgba(2,62,138,.07);
    --shadow-md: 0 3px 12px rgba(2,62,138,.11), 0 1px 4px rgba(0,0,0,.05);
    --shadow-lg: 0 8px 28px rgba(2,62,138,.16), 0 3px 10px rgba(0,0,0,.07);

    --topbar-h: 72px;
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* ── Top Bar ──────────────────────────────────────────────── */
.topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    /* White bar with a clearly defined bottom edge against the tan hero —
       a more visible hairline border plus a stronger drop shadow so the
       transition reads as a deliberate seam rather than fading away. */
    background: #fff;
    display: flex; align-items: center;
    z-index: 200;
    border-bottom: 1px solid rgba(15,23,42,.18);
    box-shadow: 0 8px 20px -8px rgba(15,23,42,.25);
}

.topbar-brand {
    display: flex; align-items: center; gap: 14px;
    color: var(--color-text); white-space: nowrap;
    padding: 0 24px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.brand-icon {
    /* ppa-simple.png is taller than wide (603×754) — at full topbar height
       it reads oversized. Sized at ~65% of the bar gives a proportionate
       mark next to the stacked wordmark without dominating. */
    height: calc(var(--topbar-h) - 10px);
    width: auto;
    flex-shrink: 0; display: block; object-fit: contain;
}
/* Stacked wordmark lockup: small tracked-out descriptor on top, big bold
   "Academy" beneath. The flex column tightens line-height so the two lines
   read as a single mark, not two paragraphs. Top line picks up the shield's
   navy so the lockup reads as one cohesive institutional mark rather than
   "small gray descriptor + dark wordmark". */
.brand-name {
    display: flex; flex-direction: column;
    line-height: 1; gap: 2px;
}
.brand-name-top {
    font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: #334155;
    padding-left: 5px;
}
.brand-name-bottom {
    font-size: 32px; font-weight: 800;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.topbar-nav {
    /* Center the nav links within the available space between the
       brand (left) and the user actions (right). The nav still
       grows to fill the gap, but the links cluster in the middle
       so the bar reads as a balanced three-section layout. */
    display: flex; gap: 2px; flex: 1; padding: 0 16px;
    justify-content: center;
}

.nav-link {
    color: var(--color-text); text-decoration: none;
    padding: 8px 14px; border-radius: var(--radius);
    font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.nav-link:hover { background: rgba(15,23,42,.05); }
.nav-link.active { border-bottom-color: #ff9500; }

.btn-enroll {
    background: #ff9500; color: #fff;
    padding: 5px 16px; border-radius: var(--radius);
    font-size: 12px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.btn-enroll:hover { background: #e88500; }

.btn-demo {
    background: #4ade80; color: #fff;
    padding: 5px 16px; border-radius: var(--radius);
    font-size: 12px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}

.btn-demo:hover { background: #22c55e; }

.topbar-actions-right {
    display: flex; gap: 8px; padding: 0 24px;
    align-items: center; margin-left: auto;
    color: var(--color-muted); font-size: 12px;
    white-space: nowrap;
}

.topbar-actions-right span { display: flex; align-items: center; gap: 5px; }

/* ── Notification bell (topbar, parent-only) ───────────────
   Mirrors web-app convention: icon-only button with a small
   round red badge punched out of the topbar via a colored ring. */
#nav-bell-wrap { position: relative; margin-right: 10px; }
#nav-bell {
    background: none; border: 0; cursor: pointer;
    color: var(--color-text); padding: 7px; display: flex; align-items: center;
    border-radius: 8px; transition: background .15s ease;
    position: relative;
}
#nav-bell:hover  { background: rgba(15,23,42,.05); }
#nav-bell:focus  { outline: none; background: rgba(15,23,42,.08); }
#nav-bell svg    { display: block; }

#nav-bell-badge {
    position: absolute;
    top: 2px; right: 2px;
    background: #ef4444; color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 1;
    padding: 3px 5px;
    min-width: 16px; border-radius: 999px;
    text-align: center; letter-spacing: -.2px;
    /* Ring matches the topbar bg so the badge looks punched out
       rather than fighting the bell underneath it. */
    box-shadow: 0 0 0 2px var(--ocean);
}

/* Panel content sits on white, so reset the topbar-inherited
   text color back to normal body color. */
#nav-bell-panel { color: #0f172a; }

/* Live-meeting indicator dot on My Classes cards. */
@keyframes pulseLive {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Main Content ────────────────────────────────────────── */
.main-content {
    margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    padding: 28px;
    display: flex; flex-direction: column; align-items: center;
    background-color: #ffffff;
}

.container {
    width: 100%; max-width: 920px;
}

/* Database Inspector breaks out of the 920px container — it's an
   admin power tool with a 3-pane layout (tables list + SQL editor +
   results grid) that benefits from horizontal space. Negative margin
   anchored to the viewport keeps it centered. Gated above 1100px so
   narrow screens fall back to the normal container width. */
@media (min-width: 1100px) {
    #admin-db-inspector-panel {
        width: 95vw;
        max-width: 95vw;
        margin-left: calc(50% - 47.5vw);
        margin-right: calc(50% - 47.5vw);
        box-sizing: border-box;
    }
}

/* CodeMirror SQL editor inside the Database Inspector — themed to
   look like SQL Server Management Studio. Keywords blue, strings
   red, comments green, numbers + identifiers black. The .cm-sql
   scoping keeps these rules from leaking into any other editor we
   might add later. */
#admin-db-inspector-panel .CodeMirror {
    height: 140px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    background: #ffffff;
}
#admin-db-inspector-panel .CodeMirror-gutters {
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
}
#admin-db-inspector-panel .CodeMirror-linenumber {
    color: #94a3b8;
    font-size: 11px;
}
#admin-db-inspector-panel .cm-s-default .cm-keyword     { color: #0000ff; font-weight: 600; }  /* SELECT, FROM, WHERE — SSMS blue */
#admin-db-inspector-panel .cm-s-default .cm-builtin     { color: #ff00ff; }                    /* GETDATE, COUNT — magenta */
#admin-db-inspector-panel .cm-s-default .cm-atom        { color: #0000ff; font-weight: 600; }  /* NULL, TRUE, FALSE */
#admin-db-inspector-panel .cm-s-default .cm-string      { color: #a31515; }                    /* 'literals' — SSMS red */
#admin-db-inspector-panel .cm-s-default .cm-string-2    { color: #a31515; }
#admin-db-inspector-panel .cm-s-default .cm-number      { color: #098658; }                    /* numeric literals — green */
#admin-db-inspector-panel .cm-s-default .cm-comment     { color: #008000; font-style: italic; }
#admin-db-inspector-panel .cm-s-default .cm-variable    { color: #0f172a; }
#admin-db-inspector-panel .cm-s-default .cm-variable-2  { color: #0f172a; }                    /* @vars */
#admin-db-inspector-panel .cm-s-default .cm-operator    { color: #0f172a; }
#admin-db-inspector-panel .cm-s-default .cm-punctuation { color: #64748b; }

.screen { }
.hidden { display: none !important; }

#screen-curriculum,
#screen-curriculum-preview,
#screen-curriculum-calendar {
    background: url('../images/motherAndChild.jpg') center top / cover no-repeat;
    min-height: 100vh;
}

#screen-dashboard {
    padding: 0;
    background: #f8fafc;
}

#screen-dashboard.main-content { padding: 0; }

/* ── Landing Page ─────────────────────────────────────────── */
.hero-section {
    position: relative;
    /* Photo is the base layer; .hero-overlay paints a semi-transparent tan
       wash on top so the image still reads through. */
    background: url('../images/motherAndChild.jpg') center center / cover no-repeat;
    min-height: 520px;
    /* Padding-top pushes the title down from the topbar — the hero content is
       tall enough to fill the section, so this adds 25px above the title
       directly (not halved by flex centering, which only kicks in for content
       shorter than the section). */
    padding-top: 35px;
    display: flex; align-items: center; justify-content: center;
}

.hero-overlay {
    position: absolute; inset: 0;
    /* Lighter tan wash — photo shows through more prominently. */
    background: rgba(241, 236, 224, 0.55);
}

.hero-content {
    position: relative; z-index: 1;
    text-align: center; padding: 60px 24px 50px;
    max-width: 720px;
}

.hero-title {
    font-size: 42px; font-weight: 800; color: #fff;
    margin-bottom: 12px; line-height: 1.15;
    letter-spacing: -.01em;
    /* Layered shadow: a tight dark halo + a wide soft glow + a deeper drop.
       Three layers stacked is what gives white text real punch on a low-
       contrast background — single shadows always look anemic by comparison. */
    text-shadow:
        0 0 1px rgba(0,0,0,.75),
        0 0 12px rgba(0,0,0,.55),
        0 4px 22px rgba(0,0,0,.5);
}

/* Sky-blue accent under part of the title — cool color against the warm
   hero palette, adding visual energy without picking a foreign hue (--sky
   is one of PPA's logo colors). Using a pseudo-element bar instead of
   text-decoration so it isn't affected by the title's text-shadow stack. */
.hero-title-accent {
    position: relative;
    display: inline-block;
}
.hero-title-accent::after {
    content: '';
    position: absolute;
    left: 2%; right: 2%;
    bottom: -2px;
    height: 5px;
    background: #90E0EF;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(144,224,239,.55);
}

.hero-subtitle {
    font-size: 17px; color: #000;
    line-height: 1.6; margin-bottom: 28px;
    /* Padding (not margin) so adjacent-margin collapse with the title
       doesn't eat the offset. Pushes the paragraph 5px below the title. */
    padding-top: 5px;
    /* Medium weight (500 vs 400) carries most of the pop. A light-gray
       shadow (vs the white we tried earlier) gives a soft depth halo
       below each letter — neutral against varied backgrounds so it
       reads as intentional dimensionality rather than a stray glow. */
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(150,150,150,.45);
}

/* Bold emphasis in a soft near-black (#323232) — slightly warmer/lighter
   than pure #000 against the tan-tinted photo. */
.hero-subtitle strong {
    color: #323232;
    font-weight: 800;
}

/* Teacher / Tutor CTAs as cool text links: plain prefix, navy bold action
   phrase with a subtle underline + arrow that animates on hover. Reads as
   modern marketing links rather than buttons. */
.hero-teacher-cta {
    display: flex;
    gap: 36px;
    justify-content: center;
    flex-wrap: wrap;
    /* Bumped from 29 → 45 so the row sits roughly centered between the
       pricing card above and the hero-section's bottom edge. */
    margin-top: 45px;
}
.hero-teacher-link {
    background: none; border: 0; padding: 0;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.hero-teacher-link strong {
    color: #023E8A;
    font-weight: 700;
    margin-left: 6px;
    /* Subtle navy underline at rest; intensifies on hover. */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(2,62,138,.4);
    transition: text-decoration-color .15s;
}
.hero-teacher-link:hover strong {
    text-decoration-color: #023E8A;
}

.hero-ctas {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Trust microtext directly under the CTA buttons — addresses common
   pre-click concerns (setup time, payment, commitment) at the exact moment
   of decision. Light weight so it doesn't compete with the buttons. */
.hero-trust-line {
    font-size: 12px;
    font-weight: 500;
    color: rgba(9,30,54,.7);
    margin: 0 0 22px;
    letter-spacing: .01em;
}

.btn-hero-primary {
    background: #ff9500; color: #fff;
    padding: 14px 28px; border-radius: 8px;
    font-size: 16px; font-weight: 700;
    border: 1.5px solid #fff;
    cursor: pointer; text-decoration: none;
    transition: background .15s, transform .15s;
    box-shadow: 0 4px 14px rgba(255,149,0,.4);
}

.btn-hero-primary:hover { background: #e88500; }

.btn-hero-secondary {
    background: #023E8A; color: #fff;
    padding: 14px 28px; border-radius: 8px;
    font-size: 16px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    border: 1.5px solid #fff;
    transition: background .15s, border-color .15s;
}

.btn-hero-secondary:hover { background: #012d66; }

.btn-hero-outline {
    display: inline-block;
    background: transparent; color: #0056B3;
    padding: 10px 28px; border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    border: 2px solid #0056B3;
    transition: background .15s, color .15s;
}

.btn-hero-outline:hover { background: #0056B3; color: #fff; }

/* Hero Pricing Callout */
.hero-pricing-card {
    margin-top: 28px; margin-bottom: 16px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(15,23,42,.22);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
    padding: 18px 28px;
    text-align: center;
    max-width: 520px;
    margin-left: auto; margin-right: auto;
}
.hero-pricing-headline {
    font-size: 17px; color: #000;
    font-weight: 400; margin-bottom: 10px;
}
.hero-pricing-headline strong { font-weight: 800; color: #000; font-size: 19px; }
.hero-pricing-compare {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.hero-pricing-strikethrough {
    text-decoration: line-through; color: rgba(0,0,0,.5);
    font-size: 15px; font-weight: 500;
}
.hero-pricing-arrow { color: rgba(0,0,0,.55); font-size: 18px; }
.hero-pricing-amount {
    font-size: 20px; font-weight: 800; color: #000;
    letter-spacing: .01em;
}
/* Reassurance line directly below the strikethrough price — heads off the
   "what's the catch?" reaction at the moment the user reads "$0/forever". */
.hero-pricing-included {
    font-size: 12px;
    color: rgba(9,30,54,.65);
    margin: 6px 0 12px;
}

.hero-pricing-perks {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.hero-pricing-perk {
    font-size: 12px; font-weight: 500; color: #000;
}
.hero-pricing-perk-dot { color: rgba(0,0,0,.4); font-size: 14px; }
.hero-pricing-trial {
    background: #0061FE;
    border: 0;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 16px; font-weight: 700; color: #fff;
    transition: background .15s;
}
.hero-pricing-trial:hover { background: #0052D5; }
.hero-pricing-trial strong { color: #fff; font-weight: 800; }

.hero-badges {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

.hero-badge {
    background: #fff;
    border: 1px solid rgba(15,23,42,.28);
    color: #000;
    padding: 7px 18px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer; text-decoration: none;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.hero-badge:hover { background: #f8fafc; box-shadow: 0 2px 6px rgba(15,23,42,.1); }

/* Landing Sections */
.landing-section {
    padding: 60px 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.section-title {
    font-size: 28px; font-weight: 800; color: var(--navy);
    text-align: center; margin-bottom: 8px;
}

.section-subtitle {
    font-size: 15px; color: var(--color-muted);
    text-align: center; max-width: 600px;
    margin: 0 auto 32px; line-height: 1.5;
}

/* Benefits */
.benefits-section { background: #f8fafc; }
.mission-section {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    margin-top: 30px;
}

.benefits-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.benefit-card {
    background: #fff; border-radius: 12px;
    padding: 28px 22px; text-align: center;
    border: 1.5px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: transform .2s, box-shadow .2s;
}

.benefit-card:hover { box-shadow: 0 8px 24px rgba(0,86,179,.1); }

.benefit-icon {
    display: flex; justify-content: center;
    margin-bottom: 14px;
}
.benefit-icon svg { display: block; }

/* Subject card inline icons — sit next to the heading text. The negative
   vertical-align nudges them down to align with text x-height instead of
   the baseline, which looks better optically. */
.subject-icon {
    vertical-align: -4px;
    margin-right: 8px;
    flex-shrink: 0;
}

.benefit-card h3 {
    font-size: 16px; font-weight: 700; color: #0056B3;
    margin-bottom: 8px; text-transform: none; letter-spacing: 0;
}

.benefit-card p { font-size: 13px; color: var(--color-muted); line-height: 1.5; }

/* How It Works */
.how-section { background: #fff; }

.steps-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.step-card { text-align: center; padding: 20px; }

.step-number {
    width: 52px; height: 52px; border-radius: 50%;
    background: #0056B3; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800;
    margin: 0 auto 14px;
    box-shadow: 0 4px 12px rgba(0,86,179,.25);
}

.step-card h3 {
    font-size: 16px; font-weight: 700; color: var(--color-text);
    margin-bottom: 6px; text-transform: none; letter-spacing: 0;
}

.step-card p { font-size: 13px; color: var(--color-muted); line-height: 1.5; }

/* Subjects Showcase */
.subjects-section { background: #fff; }

.subjects-showcase {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.subject-showcase-card {
    background: #f8fafc; border-radius: 12px;
    padding: 22px; border-left: 4px solid #0056B3;
    transition: transform .2s;
}

.subject-showcase-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }

.subject-showcase-card h3 {
    font-size: 16px; font-weight: 700; color: #0056B3;
    margin-bottom: 8px; text-transform: none; letter-spacing: 0;
}

.subject-showcase-card p {
    font-size: 13px; color: var(--color-muted); line-height: 1.55;
}

/* Curriculum Preview */
.curriculum-section { background: #f8fafc; }

.landing-grades {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.landing-grade-card {
    background: #fff; border: 1.5px solid var(--color-border);
    border-radius: 10px; padding: 14px 10px;
    text-align: center; cursor: pointer;
    transition: all .15s;
}

.landing-grade-card:hover {
    border-color: #0056B3;
    box-shadow: 0 4px 12px rgba(0,86,179,.12);
}

.landing-grade-card h4 {
    font-size: 13px; font-weight: 700; color: #0056B3; margin: 0;
}

/* Social Proof */
.proof-section { background: #fff; }

.proof-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 36px;
}

.proof-stat {
    text-align: center; padding: 20px;
    background: #f0f4ff; border-radius: 12px;
}

.proof-number {
    font-size: 36px; font-weight: 800; color: #0056B3;
}

.proof-label {
    font-size: 12px; font-weight: 600; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .04em;
}

.testimonials {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.testimonial {
    background: #f8fafc; border-radius: 12px;
    padding: 24px; border-left: 4px solid #0056B3;
}

.testimonial-text {
    font-size: 14px; color: var(--color-text);
    line-height: 1.6; font-style: italic; margin-bottom: 10px;
}

.testimonial-author {
    font-size: 12px; font-weight: 600; color: #0056B3;
}

/* FAQ */
.faq-section { background: #f8fafc; }

.faq-list { max-width: 740px; margin: 0 auto; }

.faq-item {
    background: #fff; border: 1.5px solid var(--color-border);
    border-radius: 10px; margin-bottom: 10px;
    overflow: hidden; transition: box-shadow .2s;
}

.faq-item[open] { box-shadow: 0 2px 10px rgba(0,86,179,.08); }

.faq-question {
    padding: 16px 20px;
    font-size: 15px; font-weight: 600; color: var(--color-text);
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content: "+"; font-size: 20px; font-weight: 700; color: #0056B3;
    flex-shrink: 0; margin-left: 12px;
    transition: transform .2s;
}

.faq-item[open] .faq-question::after {
    content: "−";
}

.faq-question:hover { color: #0056B3; }

.faq-answer {
    padding: 0 20px 16px;
    font-size: 14px; color: var(--color-muted); line-height: 1.65;
}

.faq-answer strong { color: var(--color-text); }

/* Pricing Section */
.pricing-section { background: #fff; }

.pricing-card-wrapper { display: flex; justify-content: center; }

.pricing-card {
    background: var(--color-surface); border: 2px solid #0056B3;
    border-radius: 20px; padding: 0 32px 32px;
    max-width: 400px; width: 100%;
    box-shadow: 0 8px 32px rgba(0,86,179,.15);
    position: relative; overflow: hidden;
}

.pricing-free-banner {
    background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
    color: #fff; text-align: center;
    padding: 10px; margin: 0 -32px 20px;
    font-size: 20px; font-weight: 800;
    letter-spacing: .04em;
}

.pricing-amount {
    text-align: center; margin-bottom: 4px;
}

.pricing-dollar { font-size: 28px; font-weight: 700; color: var(--color-text); vertical-align: top; }
.pricing-number { font-size: 64px; font-weight: 800; color: #0056B3; line-height: 1; }
.pricing-period { font-size: 18px; color: var(--color-muted); }

.pricing-per {
    text-align: center; font-size: 13px; color: var(--color-muted);
    margin-bottom: 20px;
}

.pricing-features {
    list-style: none; padding: 0; margin: 0 0 20px;
}

.pricing-features li {
    padding: 6px 0; font-size: 13px; color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.pricing-features li:last-child { border-bottom: none; }

/* Laws Section */
.laws-section { background: #fff; }

.laws-highlights {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.laws-card {
    background: #f0f7ff; border-radius: 12px;
    padding: 22px; border: 1.5px solid #bfdbfe;
}

.laws-card h3 {
    font-size: 15px; font-weight: 700; color: #0056B3;
    margin-bottom: 8px; text-transform: none; letter-spacing: 0;
}

.laws-card p { font-size: 13px; color: var(--color-muted); line-height: 1.55; }

/* Final CTA */
.cta-section {
    background: linear-gradient(135deg, #023E8A 0%, #0056B3 50%, #0077B6 100%);
    max-width: 100%; padding: 60px 24px;
    text-align: center;
}

.cta-section .section-title { color: #fff; }

/* Footer */
.landing-footer {
    background: var(--navy-dark); color: rgba(255,255,255,.5);
    text-align: center; padding: 20px;
    font-size: 12px;
}

@media (max-width: 600px) {
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 14px; }
    /* Padding-top clears the 72px fixed topbar PLUS a small breathing-room
       margin. Earlier value (20px) put the title visually behind the bar
       on mobile. Use a calc so it follows --topbar-h automatically. */
    .hero-section { min-height: 420px; padding-top: calc(var(--topbar-h) + 12px); }
    .section-title { font-size: 22px; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }

    /* Hero content padding — 60/24/50 desktop is too wide on phones. The
       top padding is intentionally small here because hero-section padding
       above already clears the topbar. */
    .hero-content { padding: 12px 16px 32px; }

    /* CTA buttons stack on narrow screens instead of trying to fit
       side-by-side (which produces ugly truncation or wrap). */
    .hero-ctas { flex-direction: column; gap: 8px; }
    .btn-hero-primary, .btn-hero-secondary { width: 100%; padding: 12px 20px; font-size: 15px; }

    /* Trust line shrinks slightly; the three pieces will wrap to 2 lines
       at narrow widths which reads fine. */
    .hero-trust-line { font-size: 11px; margin-bottom: 18px; }

    /* Badges: smaller padding + size so the 4 pills don't dominate the
       narrow viewport. They wrap onto 2 rows naturally via flex-wrap. */
    .hero-badge { padding: 5px 12px; font-size: 11px; }

    /* Pricing card: lighten the desktop padding so it doesn't dominate
       the phone screen. */
    .hero-pricing-card { padding: 18px 16px; margin-top: 18px; }
    .hero-pricing-amount { font-size: 18px; }

    /* Teacher/tutor links stack vertically on narrow screens. */
    .hero-teacher-cta { gap: 14px; margin-top: 28px; flex-direction: column; }

    /* Title accent underline — scale the bar with the smaller title. */
    .hero-title-accent::after { height: 3px; bottom: -1px; }

    /* On narrow screens, hide the stacked wordmark text and keep only the
       shield icon in the topbar. The right-side actions (user name,
       Sign In/Out, notification bell) need the horizontal room — on phones
       the wordmark would otherwise push Sign Out off-screen. */
    .brand-name { display: none; }
    .topbar-brand { padding: 0 14px; gap: 0; }
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

/* Admin sub-panels (opened from the Admin Dashboard tiles) stay at least 90vh tall
   so the layout doesn't jump around as you move between panels with different content. */
#admin-calendar-panel,
#admin-lesson-tools-panel,
#admin-state-reqs-panel,
#admin-data-ops-panel,
#admin-activity-panel,
#admin-support-panel {
    min-height: 90vh;
}

.welcome-card {
    max-width: 600px;
    margin: 0 auto;
    /* Reserve space for the fixed topbar when scrollIntoView() targets
       this card — without this, the card's top (Back button included)
       slips behind the navy topbar after each wizard step transition. */
    scroll-margin-top: calc(var(--topbar-h) + 16px);
}

.card h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--color-text);
}

.card h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--navy);
}

.card p {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.5;
}

.card hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 20px 0;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 12px;
    flex: 1;
}

.form-group label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--color-text);
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(144,224,239,.35);
}

.form-row {
    display: flex;
    gap: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px; border-radius: var(--radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
    white-space: nowrap; letter-spacing: .01em;
}

.btn-primary {
    background: var(--navy); color: #fff; border-color: var(--navy);
}
/* Form-context: when a primary button sits in a form-group as the form's
   submit/CTA, default it to full width with a top gap. Overridden anywhere
   the button is used alongside other actions. */
.form-group > .btn-primary,
form > .btn-primary {
    width: 100%;
    margin-top: 12px;
}

.btn-primary:hover:not(:disabled) {
    background: var(--navy-dark); border-color: var(--navy-dark);
    box-shadow: 0 3px 10px rgba(0,119,182,.35);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    background: var(--color-bg); color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: #e2e8f0; border-color: #94a3b8;
}

.btn-small {
    padding: 4px 10px; font-size: 11px; font-weight: 500;
    margin-bottom: 12px;
}

/* ── Back button (system-wide) ─────────────────────────────────────
   Targets back buttons across the SPA via the data-back attribute or
   ID conventions (btn-back-*, *-back-*, *-back). Also picks up the
   .admin-panel-back class used by admin sub-panels so they look the
   same as the Billing/main back buttons even though their click is
   wired separately (returns to admin dashboard, not history-back).
   Look: pill shape, navy gradient, soft shadow, arrow that slides
   left on hover. Auto-applies — no HTML changes needed. */
.btn[data-back],
.btn[id^="btn-back"],
.btn[id*="-back-"],
.btn[id$="-back"],
.btn.admin-panel-back,
#btn-start-assignment,
#btn-watch-lesson,
button.back,
a.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #0077B6 0%, #023E8A 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 16px 7px 13px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(2, 62, 138, 0.25);
    transition: background .2s, box-shadow .2s, transform .12s;
    white-space: nowrap;
}
.btn[data-back]:hover:not(:disabled),
.btn[id^="btn-back"]:hover:not(:disabled),
.btn[id*="-back-"]:hover:not(:disabled),
.btn[id$="-back"]:hover:not(:disabled),
.btn.admin-panel-back:hover:not(:disabled),
#btn-start-assignment:hover:not(:disabled),
#btn-watch-lesson:hover:not(:disabled),
button.back:hover,
a.back:hover {
    background: linear-gradient(135deg, #0096D6 0%, #024FAA 100%);
    box-shadow: 0 4px 14px rgba(2, 62, 138, 0.35);
    transform: translateY(-1px);
    color: #fff;
}
.btn[data-back]:active,
.btn[id^="btn-back"]:active,
.btn[id*="-back-"]:active,
.btn[id$="-back"]:active,
.btn.admin-panel-back:active,
#btn-start-assignment:active,
#btn-watch-lesson:active,
button.back:active,
a.back:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(2, 62, 138, 0.3);
}
/* btn-small overrides padding/font we want for back buttons; restore
   them but keep btn-small's bottom margin so layouts don't shift. */
.btn.btn-small[data-back],
.btn.btn-small[id^="btn-back"],
.btn.btn-small[id*="-back-"],
.btn.btn-small[id$="-back"],
.btn.btn-small.admin-panel-back,
.btn.btn-small#btn-start-assignment,
.btn.btn-small#btn-watch-lesson {
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px 7px 13px;
}

/* ── Subject Grid ────────────────────────────────────────── */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.subject-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 18px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    border: 1.5px solid var(--color-border);
}

.subject-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--ocean);
}

.subject-card h3 {
    margin-bottom: 6px;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Small line-icon at the start of an admin dashboard card's title.
   Stroke-based Lucide-style icons in brand ocean blue, vertically
   centered with the title via the flex layout above. */
.subject-card-icon {
    width: 22px;
    height: 22px;
    color: var(--ocean);
    flex-shrink: 0;
}

.subject-card .progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

.subject-card .progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: 3px;
    transition: width .4s ease;
}

.subject-card .stats {
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
}

/* ── Assignments ─────────────────────────────────────────── */
.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    transition: border-color .15s;
    background: var(--color-surface);
}

.assignment-item:hover {
    border-color: #94a3b8;
}

.assignment-item.completed {
    border-color: var(--success);
    background: var(--success-bg);
}

.assignment-info h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--color-text);
}

.assignment-info p {
    font-size: 11px;
    color: var(--color-muted);
}

.assignment-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.assignment-actions input[type="number"] {
    width: 52px;
    padding: 4px 6px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 12px;
    color: var(--color-text);
    outline: none;
    transition: border-color .15s;
}

.assignment-actions input[type="number"]:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(144,224,239,.35);
}

.btn-complete {
    padding: 4px 10px;
    border-radius: var(--radius);
    border: 1.5px solid transparent;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.btn-complete:active { transform: scale(0.97); }

.btn-complete.mark {
    background: var(--navy); color: #fff; border-color: var(--navy);
}

.btn-complete.mark:hover {
    background: var(--navy-dark);
    box-shadow: 0 2px 6px rgba(0,119,182,.3);
}

.btn-complete.undo {
    background: rgba(255,255,255,.12); color: var(--color-muted);
    border-color: var(--color-border);
}

.btn-complete.undo:hover {
    background: #fff0f0; border-color: #fca5a5; color: #b91c1c;
}

.score-display {
    font-weight: 700;
    color: var(--success);
    font-size: 12px;
}

/* ── Login Error ──────────────────────────────────────────── */
.login-error {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: var(--radius);
    color: #b91c1c;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    margin-top: 8px;
}

/* ── Offline / Sync Status ────────────────────────────────── */
.offline-indicator {
    position: fixed; top: var(--topbar-h); left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 18px;
    border-radius: 0 0 10px 10px;
    font-size: 12px; font-weight: 600;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
    transition: all .3s ease;
}

.offline-indicator.offline {
    background: #fef2f2; color: #b91c1c;
    border: 1.5px solid #fca5a5; border-top: none;
}

.offline-indicator.syncing {
    background: #fffbeb; color: #92400e;
    border: 1.5px solid #fbbf24; border-top: none;
}

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

.offline-indicator.offline .status-dot {
    background: #ef4444;
    animation: pulse-dot 1.5s infinite;
}

.offline-indicator.syncing .status-dot { background: #f59e0b; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.sync-badge {
    background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    min-width: 16px; text-align: center;
}

.sync-toast {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    background: #023E8A; color: #fff;
    padding: 10px 24px; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: opacity .3s ease, transform .3s ease;
}

.sync-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none; }

/* ── Floating Help Button ─────────────────────────────────── */
.help-float-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 200;
    width: 48px; height: 48px; border-radius: 50%;
    background: #0056B3; color: #fff; border: none;
    font-size: 22px; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,86,179,.35);
    transition: all .2s;
}
.help-float-btn:hover { background: #023E8A; box-shadow: 0 6px 20px rgba(0,86,179,.5); }

/* Help quick-menu (popover above the floating button) */
.help-menu {
    position: fixed; bottom: 80px; right: 20px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
    padding: 6px; z-index: 999; min-width: 220px;
    display: flex; flex-direction: column; gap: 2px;
}
.help-menu-item {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: none; border-radius: 8px;
    padding: 10px 12px; cursor: pointer; text-align: left;
    font-size: 13px; color: #0f172a; transition: background .1s;
    font-family: inherit;
}
.help-menu-item:hover { background: #eff6ff; }
.help-menu-item small { color: #64748b; font-size: 11px; font-weight: 400; }
.help-menu-icon { font-size: 18px; flex-shrink: 0; }

/* Help Articles */
.help-article {
    padding: 12px 16px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg); margin-bottom: 8px;
    cursor: pointer; transition: all .15s;
}
.help-article:hover { border-color: #0056B3; background: #f8faff; }
.help-article.expanded { border-color: #0056B3; }
.help-article-title { font-size: 14px; font-weight: 600; color: var(--color-text); display: flex; justify-content: space-between; align-items: center; }
.help-article-cat { font-size: 10px; color: #0056B3; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.help-article-body { font-size: 13px; color: var(--color-muted); line-height: 1.6; margin-top: 8px; display: none; }
.help-article.expanded .help-article-body { display: block; }
.help-article-feedback { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--color-muted); }
.help-fb-btn { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 11px; transition: all .15s; }
.help-fb-btn:hover { border-color: #0056B3; color: #0056B3; }
.help-cat-btn { padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-muted); transition: all .15s; }
.help-cat-btn:hover, .help-cat-btn.active { background: #0056B3; color: #fff; border-color: #0056B3; }

/* Ticket list */
.ticket-item { padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.ticket-status { padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; }
.ticket-status.open { background: #fef3c7; color: #92400e; }
.ticket-status.inprogress { background: #dbeafe; color: #1e40af; }
.ticket-status.resolved { background: #d1fae5; color: #065f46; }

/* Forum */
.forum-item { padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 6px; cursor: pointer; transition: all .15s; }
.forum-item:hover { border-color: #0056B3; }
.forum-item-title { font-size: 13px; font-weight: 600; color: var(--color-text); }
.forum-item-meta { font-size: 10px; color: var(--color-muted); margin-top: 2px; }
.forum-reply { padding: 10px 14px; margin: 6px 0 6px 20px; background: var(--color-bg); border-radius: var(--radius-lg); font-size: 12px; border-left: 3px solid #0056B3; }

/* Contextual Help Tooltip — small inline info icon next to a label.
   Hover (or keyboard focus) reveals a short tooltip; click opens a
   ppaAlert with the full explanation. Use the JS helper window.showQuestionHelp(key)
   or pass a custom onclick. The SVG icon and keyboard accessibility
   make it screen-reader friendly. */
.help-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-muted); cursor: pointer; margin-left: 4px; transition: all .15s; position: relative; vertical-align: middle; flex-shrink: 0; padding: 0; }
.help-tip:hover, .help-tip:focus-visible { background: #0056B3; color: #fff; border-color: #0056B3; outline: none; }
.help-tip svg { width: 10px; height: 10px; pointer-events: none; display: block; }
.help-tip-text { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #023E8A; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 400; width: 220px; text-align: left; z-index: 100; margin-bottom: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.2); line-height: 1.4; white-space: normal; pointer-events: none; text-transform: none; letter-spacing: 0; }
.help-tip-text::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #023E8A; }
.help-tip:hover .help-tip-text, .help-tip:focus-visible .help-tip-text { display: block; }

/* Onboarding Tour */
.tour-overlay { position: fixed; inset: 0; z-index: 400; }
.tour-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.tour-tooltip { position: absolute; background: #fff; border-radius: 14px; padding: 20px 24px; max-width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,.25); z-index: 401; }
.tour-tooltip h3 { font-size: 16px; color: #0056B3; margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.tour-tooltip p { font-size: 13px; color: var(--color-muted); line-height: 1.5; }
.tour-step-label { font-size: 10px; font-weight: 700; color: #fff; background: #0056B3; padding: 2px 10px; border-radius: 10px; display: inline-block; margin-bottom: 8px; }

/* ── Approach Tip ─────────────────────────────────────────── */

/* Approach selector card style */
.approach-option {
    padding: 10px 14px; border: 2px solid var(--color-border);
    border-radius: var(--radius-lg); margin-bottom: 6px; cursor: pointer;
    transition: all .15s;
}
.approach-option:hover { border-color: #0056B3; }
.approach-option.selected { border-color: #0056B3; background: #eff6ff; }
.approach-option h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--color-text); }
.approach-option p { font-size: 11px; color: var(--color-muted); line-height: 1.4; }

/* ── Parent Search Results ────────────────────────────────── */
.parent-search-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-bottom: 1px solid var(--color-border);
    cursor: pointer; transition: background .1s; font-size: 12px;
}

.parent-search-item:last-child { border-bottom: none; }
.parent-search-item:hover { background: #eff6ff; }
.parent-search-item.selected { background: #dbeafe; }

.parent-search-name { font-weight: 600; color: var(--color-text); }
.parent-search-detail { color: var(--color-muted); font-size: 11px; }

/* ── State Law Box ────────────────────────────────────────── */
.state-law-box {
    background: #f0f7ff; border: 1.5px solid #bfdbfe;
    border-radius: var(--radius-lg); padding: 16px 18px;
    margin-top: 12px; margin-bottom: 12px;
}

.state-law-header {
    font-size: 14px; font-weight: 700; color: #0056B3;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}

.state-law-flag { font-size: 18px; }

.state-law-list {
    list-style: none; padding: 0; margin: 0 0 12px;
    font-size: 12px; color: var(--color-text); line-height: 1.7;
}

.state-law-list li {
    padding: 2px 0; border-bottom: 1px solid rgba(0,86,179,.08);
}

.state-law-list li:last-child { border-bottom: none; }

.state-law-link {
    display: inline-block; font-size: 12px; font-weight: 600;
    color: #0056B3; text-decoration: none;
    padding: 6px 14px; border: 1.5px solid #0056B3;
    border-radius: var(--radius); transition: all .15s;
}

.state-law-link:hover {
    background: #0056B3; color: #fff;
}

/* ── Login Split Layout ───────────────────────────────────── */
#screen-parent-login.main-content,
#screen-student-login.main-content {
    padding: 0; margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    display: flex;
}

.login-split {
    display: flex; width: 100%;
    min-height: calc(100vh - var(--topbar-h));
}

.login-image {
    flex: 1; min-width: 0;
    background-size: cover; background-position: center;
    position: relative;
    display: flex; align-items: flex-end;
}

.login-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,56,120,.85) 0%, rgba(0,56,120,.4) 40%, transparent 70%);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 40px 32px;
    color: #fff;
}

.login-image-overlay h2 {
    font-size: 28px; font-weight: 800; color: #fff;
    margin-bottom: 8px; text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.login-image-overlay p {
    font-size: 15px; color: rgba(255,255,255,.88);
    line-height: 1.5; max-width: 380px;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.login-form-side {
    width: 440px; flex-shrink: 0;
    padding: 32px 40px;
    display: flex; flex-direction: column;
    justify-content: center;
    background: #fff;
    overflow-y: auto;
}

.login-brand {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 24px;
}

.login-brand-text {
    font-size: 18px; font-weight: 300; color: var(--color-text);
    letter-spacing: .02em;
}

.login-brand-text strong { font-weight: 700; }

.login-title {
    font-size: 24px; font-weight: 800; color: var(--color-text);
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 13px; color: var(--color-muted);
    line-height: 1.5; margin-bottom: 24px;
}

.login-footer-text {
    text-align: center; font-size: 12px;
    color: var(--color-muted); margin-top: 20px;
}

.login-link {
    color: #0056B3; font-weight: 600;
    cursor: pointer; text-decoration: none;
}

.login-link:hover { text-decoration: underline; }

/* ── Trial Wizard Steps ───────────────────────────────────── */
.trial-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; margin-bottom: 20px; flex-wrap: wrap; row-gap: 6px;
    overflow: hidden;
}

.trial-step {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--color-muted);
    padding: 4px 10px; border-radius: 20px;
    background: var(--color-bg); border: 1.5px solid var(--color-border);
    transition: all .2s; white-space: nowrap;
}

.trial-step span {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--color-border); color: var(--color-muted);
}

.trial-step.active {
    color: #0056B3; border-color: #0056B3; background: #eff6ff;
}

.trial-step.active span { background: #0056B3; color: #fff; }

.trial-step.done { color: var(--success); border-color: var(--success); background: #f0fdf4; }
.trial-step.done span { background: var(--success); color: #fff; }

.trial-step-line {
    width: 16px; height: 2px; background: var(--color-border);
    margin: 0 2px; flex-shrink: 0;
}

.trial-compliance-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    overflow: hidden; margin-bottom: 12px;
}
.trial-compliance-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: #f8fafc;
    border-bottom: 1px solid #e2e8f0; font-size: 13px;
}
.trial-compliance-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; flex-shrink: 0;
}
.trial-compliance-body {
    padding: 14px 16px; font-size: 13px; line-height: 1.6; color: #334155;
}
.trial-compliance-body p { margin: 0 0 6px; }

/* ── Trial Badge ──────────────────────────────────────────── */
.demo-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    border: 1.5px solid #60a5fa; border-radius: 10px;
    font-size: 12px; color: #1e40af;
}
/* Inline-demo treatment — sits in the top-right of the welcome card so the
   demo notice no longer needs its own banner row below the header. */
.demo-banner-inline {
    position: absolute;
    top: 18px;
    right: 22px;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    color: rgba(255,255,255,.92);
    font-size: 11px; font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width: 380px;
}
.demo-banner-inline .demo-badge-pill {
    background: #fff; color: #1e40af;
    padding: 2px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 700; white-space: nowrap;
    line-height: 1.4;
}
.demo-banner-inline .demo-banner-msg {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: rgba(255,255,255,.88);
}
.dash-header { position: relative; }
@media (max-width: 720px) {
    .demo-banner-inline { display: none; }
    .demo-banner-inline:not(.hidden) {
        position: static;
        display: inline-flex;
        margin-top: 10px;
        max-width: 100%;
        background: rgba(255,255,255,.14);
    }
    .demo-banner-inline .demo-banner-msg { white-space: normal; }
}
.demo-badge-pill {
    background: #3b82f6; color: #fff;
    padding: 2px 10px; border-radius: 10px;
    font-size: 10px; font-weight: 700; white-space: nowrap;
}
.demo-signup-btn {
    background: #0056B3; color: #fff;
    padding: 4px 14px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    border: none; cursor: pointer; white-space: nowrap;
    transition: background .15s;
}
.demo-signup-btn:hover { background: #003d80; }

.trial-banner {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 1.5px solid #fbbf24; border-radius: 10px;
    font-size: 12px; color: #92400e;
}

.trial-badge-pill {
    background: #f59e0b; color: #fff;
    padding: 2px 10px; border-radius: 10px;
    font-size: 10px; font-weight: 700;
}

.trial-upgrade-btn {
    background: #0056B3; color: #fff;
    padding: 4px 14px; border-radius: 8px;
    font-size: 11px; font-weight: 700;
    border: none; cursor: pointer;
    transition: background .15s;
}

/* Student-name suffix on the Today's Schedule heading — matches the
   walkthrough title's "— Lily" treatment so the focused student is named
   consistently across the dashboard and modal. */
.dash-today-name-suffix {
    color: #475569; font-weight: 700;
}

/* Walk Through button — primary "launch into functionality" CTA on the
   dashboard. Vibrant sky-to-brand-blue gradient + glowing shadow reads as
   high-contrast and inviting to click without being noisy. Avoids green so
   it doesn't collide with the "done" step-square indicator. */
.dash-today-dayplan {
    display: inline-flex; align-items: center; gap: 6px;
    background: #3b82f6;
    color: #fff;
    padding: 3px 12px; border-radius: 10px;
    font-size: 11px; font-weight: 700; line-height: 1.4;
    border: 0; cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.dash-today-dayplan:hover {
    background: #2563eb;
}
.dash-today-dayplan svg { stroke: currentColor; flex-shrink: 0; }

/* Print actions group on the right side of the Today's Schedule header. */
.dash-today-print-actions {
    display: inline-flex; align-items: center; gap: 14px;
    margin-left: auto;
}
.dash-today-print-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 400;       /* explicitly not bold */
    font-family: inherit;
    padding: 4px 6px;
    cursor: pointer;
    transition: color .12s;
    letter-spacing: 0.1px;
}
.dash-today-print-btn:hover { color: #0f172a; }
.dash-today-print-btn svg { flex-shrink: 0; stroke: currentColor; }

.day-plan-card {
    max-width: 640px; width: 92%;
    padding: 24px 26px 20px;
    max-height: 86vh; overflow-y: auto;
}
.day-plan-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid #e2e8f0;
}
.day-plan-close {
    background: none; border: none;
    font-size: 28px; line-height: 1; color: #94a3b8;
    cursor: pointer; padding: 0 4px;
}
.day-plan-close:hover { color: #475569; }

.day-plan-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-bottom: 18px;
}
.day-plan-stat {
    text-align: center;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px 6px;
}
.day-plan-stat-num {
    display: block; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1;
}
.day-plan-stat-lbl {
    display: block; font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}
.day-plan-empty {
    grid-column: 1 / -1;
    text-align: center; padding: 16px; color: #64748b; font-size: 14px;
}

.day-plan-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 18px;
}
.day-plan-action {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
    text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.day-plan-action:hover:not([disabled]) {
    border-color: #0056B3; background: #f0f7ff;
}
.day-plan-action[disabled] { opacity: 0.55; cursor: not-allowed; }
.day-plan-action svg { color: #0056B3; flex-shrink: 0; }
.day-plan-action-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.day-plan-action-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.day-plan-soon {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 8px;
    font-size: 9px; background: #cbd5e1; color: #475569;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Walk Through Today — stepper modal */
/* Student mode: when the user lands on an unlocked assignment, hide the
   parent header (title, date, print buttons, close) and the parent step-nav
   row so the student stays focused on the questions. The "Stop assignment"
   button at the top-left of the body is the student's exit ramp back to the
   previous step where the parent can resume. */
#walkthrough-modal.student-mode .walkthrough-header,
#walkthrough-modal.student-mode .walkthrough-squares {
    display: none;
}

/* Dedicated close button for student-mode — pinned top-right of the card so
   the student still has a way out when the parent header (with its own X)
   is hidden. Hidden by default; only revealed when student-mode is active. */
.walkthrough-close-student {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 2;
    display: none;
}
#walkthrough-modal.student-mode .walkthrough-close-student {
    display: inline-flex;
}

.walkthrough-card {
    max-width: 760px; width: 92%;
    padding: 0;
    height: min(86vh, 760px);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
}
.walkthrough-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 22px 26px 10px;
    flex-shrink: 0;
}
.walkthrough-header-title { min-width: 0; }
.walkthrough-student-suffix {
    color: #0056B3; font-weight: 700;
}
.walkthrough-header-actions {
    display: flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.walkthrough-header-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none;
    padding: 6px 10px; border-radius: 6px;
    font-size: 13px; font-weight: 600; color: #0f172a;
    cursor: pointer; transition: background .15s, color .15s;
}
.walkthrough-header-action svg { color: #0056B3; flex-shrink: 0; }
.walkthrough-header-action:hover { background: #f0f7ff; color: #0056B3; }
.walkthrough-h { font-size: 16px; font-weight: 700; margin: 0; color: #0f172a; }
.walkthrough-substep { font-size: 12px; color: #64748b; margin: 2px 0 0; }

/* Step navigation squares — replace the old linear progress bar. Each square
   is a clickable button that jumps to that step. State (current, done) is
   color-coded; hover gives a subtle indication of clickability. */
.walkthrough-squares {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    padding: 0 26px 14px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.walkthrough-nav-btn {
    height: 26px; padding: 0 12px;
    background: #fff; color: #475569;
    border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.walkthrough-nav-btn:hover:not(:disabled) {
    border-color: #0056B3; color: #0056B3; background: #f0f7ff;
}
.walkthrough-nav-btn:disabled {
    color: #cbd5e1; cursor: not-allowed; opacity: .55;
}
.walkthrough-square {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #475569;
    border: 1.5px solid #cbd5e1; border-radius: 6px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    padding: 0;
}
.walkthrough-square:hover { border-color: #0056B3; color: #0056B3; }

/* Subject pills — one per subject (replaces the per-step squares). Pastel
   mint when the subject's assignment is submitted, brand-blue ring when
   current, outlined slate otherwise. Uses the subject name as the label. */
.walkthrough-subject-pill {
    height: 30px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #475569;
    border: 1.5px solid #cbd5e1; border-radius: 6px;
    font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    line-height: 1; white-space: nowrap;
}
.walkthrough-subject-pill:hover { border-color: #0056B3; color: #0056B3; }
.walkthrough-subject-pill.current {
    border-color: #0056B3; color: #0056B3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.18);
}
.walkthrough-subject-pill.done {
    background: #d1fae5; border-color: #6ee7b7; color: #047857;
}
.walkthrough-subject-pill.done:hover {
    background: #a7f3d0; border-color: #34d399; color: #047857;
}
.walkthrough-subject-pill.current.done {
    border-color: #34d399; color: #047857;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28);
}
.walkthrough-square.done {
    background: #d1fae5; border-color: #6ee7b7; color: #047857;
}
.walkthrough-square.done:hover { background: #a7f3d0; border-color: #34d399; }
.walkthrough-square.current {
    border-color: #0056B3; color: #0056B3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.18);
}
.walkthrough-square.current.done {
    border-color: #34d399; color: #047857;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28);
}

.walkthrough-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 22px 26px 15px;
}
/* Lesson steps have no centered subject label above the title (the subject
   sits in the bottom-footer toggle), so the body's 22px top padding leaves
   a lopsided gap. Tighten it and zero out the title's top margin so the
   title sits midway between the squares-row divider and the tabs card. */
.walkthrough-body.lesson-step {
    padding-top: 12px;
}
.walkthrough-body.lesson-step h3.walkthrough-title {
    margin-top: 0;
}
/* When the inline guided lesson card is present, make it fill the body so
   its Back/Next footer sits 15px above the modal bottom (matching the body's
   padding-bottom) instead of floating wherever short content ends. */
.walkthrough-body:has(.walkthrough-guided) {
    display: flex; flex-direction: column;
    overflow: hidden;
}
.walkthrough-body:has(.walkthrough-guided) .walkthrough-item,
.walkthrough-body:has(.walkthrough-guided) .walkthrough-content {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
}
.walkthrough-item { text-align: center; padding: 0; }
/* Top row inside the body: subject label centered, action(s) pinned right.
   Replaces the old bottom actions footer. */
.walkthrough-item-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}
.walkthrough-item-top .walkthrough-subj {
    grid-column: 2;
    margin-bottom: 0;
}
.walkthrough-inline-actions-left {
    grid-column: 1;
    display: flex; align-items: center; justify-content: flex-start;
    gap: 6px;
}
.walkthrough-inline-actions {
    grid-column: 3;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px;
}
/* Lessons: subject mini-label stacked above the Lesson-complete toggle on
   the right (the centered subject label is hidden for lessons). */
.walkthrough-lesson-actions {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 4px;
}
.walkthrough-subj-mini {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #64748b;
}
.walkthrough-mini-btn {
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.walkthrough-mini-secondary {
    background: #fff; color: #0056B3;
    border: 1px solid #cbd5e1;
}
.walkthrough-mini-secondary:hover { background: #0056B3; color: #fff; border-color: #0056B3; }
.walkthrough-mini-btn:disabled {
    background: #fff; color: #cbd5e1; border-color: #e2e8f0;
    cursor: not-allowed;
}
.walkthrough-mini-btn:disabled:hover {
    background: #fff; color: #cbd5e1; border-color: #e2e8f0;
}
.walkthrough-mini-primary {
    background: #0056B3; color: #fff;
    border: 1px solid #0056B3;
}
.walkthrough-mini-primary:hover { background: #003d80; border-color: #003d80; }
.walkthrough-subj {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
}
/* h3.walkthrough-title (specificity 0,1,1) — needed to override the global
   .card h3 rule which forces uppercase + brand blue + 14px. We want the
   walkthrough's lesson/assignment title to read as a friendly Title Case
   heading in dark slate, not all-caps clinical. */
h3.walkthrough-title {
    font-size: 18px; font-weight: 700; color: #0f172a;
    margin: 8px 0 0; line-height: 1.3;
    text-transform: none; letter-spacing: 0;
}

/* iOS-style switch — gray track + white thumb when off, brand-blue track
   with thumb shifted right when on. */
.walkthrough-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: none; padding: 0;
    font-size: 12px; font-weight: 600; line-height: 1; color: #0f172a;
    cursor: pointer;
}
.walkthrough-toggle-track {
    position: relative;
    width: 28px; height: 16px;
    background: #cbd5e1; border-radius: 999px;
    transition: background .2s ease;
    flex-shrink: 0;
}
.walkthrough-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
    transition: left .2s ease;
}
.walkthrough-toggle:hover .walkthrough-toggle-track { background: #94a3b8; }
.walkthrough-toggle.on .walkthrough-toggle-track { background: #0056B3; }
.walkthrough-toggle.on:hover .walkthrough-toggle-track { background: #003d80; }
.walkthrough-toggle.on .walkthrough-toggle-thumb { left: 14px; }
.walkthrough-toggle-subj {
    font-size: 12px; font-weight: 600;
    color: #0f172a;
    line-height: 1;
}

/* Bottom footer of the walkthrough card. Used for the lesson's centered
   Lesson-complete toggle, an assignment's Stop/Submit buttons, or a locked
   assignment's "Assignment complete" indicator. Empty/hidden otherwise. */
.walkthrough-footer {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    border-top: 1px solid #e2e8f0;
}
.walkthrough-footer:empty { display: none; }
/* Two-button assignment layout — Stop on the left, Submit on the right. */
.walkthrough-footer.walkthrough-footer-split {
    justify-content: space-between;
}

/* Inline content (lesson plan or worksheet preview) shown by default below
   the title in the walkthrough modal. */
.walkthrough-content {
    margin-top: 12px; text-align: left;
}
.walkthrough-content:empty { display: none; }

/* Inline guided lesson — paginated tips & practice questions, mirroring the
   standalone Guided Lesson modal but rendered inside the walkthrough. Fills
   the available body height so the footer pins near the modal bottom. */
.walkthrough-guided {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
/* When the card hosts a single question (rather than the lesson), let it
   size to its content instead of stretching to fill the modal body. */
.walkthrough-guided:has(.walkthrough-q-body) {
    flex: 0 0 auto;
}
.walkthrough-guided-substep {
    padding: 11px 18px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px; font-weight: 600; color: #475569;
    letter-spacing: 0.4px;
}

/* Lesson tip-tabs row at the top of the guided card. Each tab is a tip;
   active tab gets a white pill with a border so it reads as the current
   selection. Replaces the old back/next/progress footer. */
.walkthrough-guided-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%);
    border-bottom: 1px solid #dbe8f5;
    flex-shrink: 0;
}
.walkthrough-guided-tab {
    padding: 5px 14px;
    background: transparent; border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #64748b;
    cursor: pointer; transition: all .15s;
}
.walkthrough-guided-tab:hover { color: #0056B3; }
.walkthrough-guided-tab.active {
    background: #fff;
    border-color: #cbd5e1;
    color: #0056B3;
}
.walkthrough-guided-body {
    padding: 18px 20px;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
/* Animated-lesson iframe — fills the body and removes the body's own
   padding so the iframe edge meets the card border. */
.walkthrough-guided-body.watch-mode {
    padding: 0;
    overflow: hidden;
}
.lesson-deck-iframe {
    width: 100%; height: 100%;
    min-height: 380px;
    border: none;
    display: block;
}
.walkthrough-guided-body .guided-tip-title {
    font-size: 16px; font-weight: 700; color: #0f172a;
    margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0; line-height: 1.4;
}
.walkthrough-guided-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.walkthrough-lesson-section { margin: 0 0 14px; }
.walkthrough-lesson-label {
    font-size: 11px; font-weight: 700; color: #0f172a;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-left: 3px solid #0056B3; padding-left: 9px;
    margin-bottom: 6px;
}
.walkthrough-lesson-body {
    font-size: 13.5px; line-height: 1.65; color: #334155;
}

/* Question-nav row inside an unlocked assignment — Back, numbered pills,
   Next. Compact pills with subtle hover; current pill gets a soft halo;
   answered pills go green so the student sees their progress at a glance. */
.walkthrough-q-nav {
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.walkthrough-q-square {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #64748b;
    border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all .15s;
    padding: 0;
}
.walkthrough-q-square:hover { border-color: #94a3b8; color: #0f172a; }
.walkthrough-q-square.answered {
    background: #ecfdf5; border-color: #86efac; color: #166534;
}
.walkthrough-q-square.answered:hover { background: #d1fae5; border-color: #34d399; }
.walkthrough-q-square.current {
    background: #0056B3; border-color: #0056B3; color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}
.walkthrough-q-square.current.answered {
    background: #16a34a; border-color: #16a34a; color: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

/* Single-question card body — sized to its content so empty modal space
   sits below the card rather than stretching it into a giant white box.
   Question text is large and dark; the input is generous and inviting. */
.walkthrough-guided-body.walkthrough-q-body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding: 28px 28px 24px;
    gap: 18px;
}
.walkthrough-q-body .walkthrough-q-text {
    font-size: 18px; font-weight: 500; color: #0f172a;
    line-height: 1.5;
    margin: 0;
}

/* Locked-assignment all-stacked review — same .walkthrough-q-* styles below
   keep working. */
.walkthrough-worksheet-form {
    display: flex; flex-direction: column; gap: 12px;
}
.walkthrough-q {
    padding: 12px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.walkthrough-q-num {
    font-size: 11px; font-weight: 700; color: #0056B3;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.walkthrough-q-text {
    font-size: 14px; line-height: 1.5; color: #0f172a;
    margin-bottom: 10px;
}
.walkthrough-q-opts {
    display: flex; flex-direction: column; gap: 8px;
}
.walkthrough-q-opt {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #fff;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 15px; color: #1f2937;
    cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
}
.walkthrough-q-opt:hover { border-color: #0056B3; background: #f0f7ff; transform: translateY(-1px); }
.walkthrough-q-opt input[type="radio"] { margin: 0; flex-shrink: 0; width: 16px; height: 16px; }
.walkthrough-q-opt input[type="radio"]:disabled + span { color: #64748b; }
.walkthrough-q-input {
    width: 100%; box-sizing: border-box;
    padding: 14px 16px; background: #fff;
    border: 1.5px solid #cbd5e1; border-radius: 8px;
    font-size: 16px; color: #0f172a;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.walkthrough-q-input::placeholder { color: #94a3b8; }
.walkthrough-q-input:focus { outline: none; border-color: #0056B3; box-shadow: 0 0 0 3px rgba(0, 86, 179, .12); }
.walkthrough-q-input:disabled { background: #f1f5f9; color: #64748b; }
.walkthrough-q-feedback {
    margin-top: 8px; padding: 6px 10px;
    font-size: 12.5px; font-weight: 600;
    border-radius: 6px;
}
.walkthrough-q-feedback.correct { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.walkthrough-q-feedback.incorrect { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* Two side-by-side feedback chips for an incorrect answer: red "Incorrect"
   on the left, green "Correct: <answer>" on the right. */
.walkthrough-q-feedback-row {
    display: flex; gap: 8px;
    margin-top: 8px;
}
.walkthrough-q-feedback-row .walkthrough-q-feedback {
    flex: 1; margin-top: 0;
}

/* Score banner shown at top of the inline worksheet when the assignment has
   already been submitted. */
.walkthrough-results-banner {
    padding: 12px 16px; margin-bottom: 14px;
    border-radius: 8px;
    font-size: 14px; font-weight: 700; text-align: center;
}
.walkthrough-results-banner.pass { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.walkthrough-results-banner.fail { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Manual-grade entry — slides in below questions when the parent clicks
   "Enter score manually". */
.walkthrough-manual-form {
    margin-top: 16px; padding: 14px 16px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
}
.walkthrough-manual-form.hidden { display: none; }
.walkthrough-manual-form label {
    display: block; font-size: 11px; font-weight: 700; color: #475569;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.walkthrough-manual-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.walkthrough-manual-row input[type="number"] {
    width: 90px; padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 14px; color: #0f172a;
}

/* Footer action buttons used inside the walkthrough actions row for
   assignments — primary (Submit) + secondary (Enter score manually). */
.walkthrough-primary-btn {
    background: #0056B3; color: #fff;
    border: 1.5px solid #0056B3; border-radius: 8px;
    padding: 8px 18px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.walkthrough-primary-btn:hover { background: #003d80; border-color: #003d80; }
.walkthrough-secondary-btn {
    background: #fff; color: #0056B3;
    border: 1.5px solid #cbd5e1; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.walkthrough-secondary-btn:hover { background: #0056B3; color: #fff; border-color: #0056B3; }
.walkthrough-locked-msg {
    font-size: 12px; font-weight: 600; color: #166534;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.walkthrough-complete-screen {
    text-align: center; padding: 18px 0;
}
.walkthrough-complete-screen h3 {
    font-size: 22px; font-weight: 700; color: #0f172a;
    margin: 14px 0 4px;
}
.walkthrough-complete-screen p {
    font-size: 13px; color: #64748b; margin: 4px 0;
}
.walkthrough-complete-msg { color: #475569 !important; font-size: 14px !important; margin-top: 10px !important; }

/* Reassurance callout — used in the trial wizard's state-requirements step
   and other places where a "don't worry, we've got you" message belongs. */
.reassurance-callout {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #86efac;
    border-left: 4px solid #16a34a;
    border-radius: 10px;
}
.reassurance-icon {
    flex-shrink: 0; color: #16a34a; margin-top: 1px;
}
.reassurance-text {
    font-size: 14px; line-height: 1.55; color: #14532d;
}
.reassurance-text strong { color: #14532d; font-weight: 700; }

/* Benefit-card detail modal */
.benefit-modal-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #eff6ff; color: #0056B3;
    font-size: 30px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.benefit-modal-body {
    text-align: left; max-width: 540px; margin: 0 auto;
    color: #334155; font-size: 14px; line-height: 1.6;
}
.benefit-modal-title {
    font-size: 20px; font-weight: 700; color: #0f172a;
    margin: 4px 0 14px; text-align: center; letter-spacing: -0.01em;
}
.benefit-modal-intro {
    font-size: 14px; line-height: 1.65; color: #475569;
    margin: 0 0 20px; padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.benefit-modal-heading {
    font-size: 13px; font-weight: 700;
    color: #0f172a; text-transform: none; letter-spacing: 0;
    margin: 18px 0 8px; padding-left: 11px;
    border-left: 3px solid #0056B3;
}
.benefit-modal-heading:first-of-type { margin-top: 0; }
.benefit-modal-list {
    margin: 0 0 4px; padding-left: 22px;
    font-size: 13.5px; line-height: 1.75; color: #334155;
}
.benefit-modal-list li { margin-bottom: 4px; padding-left: 2px; }
.benefit-modal-list li::marker { color: #94a3b8; }
.benefit-modal-text {
    font-size: 13.5px; line-height: 1.65; color: #475569;
    margin: 0 0 4px;
}

/* Pricing screen */
.pricing-toggle-btn {
    padding: 10px 24px; border: 1.5px solid #e2e8f0; background: #fff;
    font-size: 14px; font-weight: 600; color: #475569; cursor: pointer;
    transition: all .15s;
}
.pricing-toggle-btn:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.pricing-toggle-btn:last-child { border-radius: 0 8px 8px 0; }
.pricing-toggle-btn.active { background: #023E8A; color: #fff; border-color: #023E8A; }
.pricing-save-badge {
    display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; background: #16a34a; color: #fff; font-weight: 700;
}
.pricing-card {
    border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 28px 24px;
    text-align: center; max-width: 420px; margin: 0 auto;
}
.pricing-card-price { font-size: 48px; font-weight: 800; color: #0f172a; line-height: 1; }
.pricing-card-cents { font-size: 18px; color: #64748b; font-weight: 600; }
.pricing-card-billed { color: #64748b; font-size: 13px; margin-top: 6px; margin-bottom: 18px; }
.pricing-card-features {
    list-style: none; padding: 0; margin: 0 0 22px 0; text-align: left;
    font-size: 14px; line-height: 2; color: #334155;
}
.pricing-card-features li { padding-left: 4px; }

/* Subscription paywall (trial expired) — reuses .trial-banner with stronger color */
.trial-banner.paywall {
    background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
    border-color: #f87171; color: #991b1b;
}
.trial-banner.paywall .trial-badge-pill { background: #dc2626; }

.trial-upgrade-btn:hover { background: #023E8A; }

.remember-device {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--color-muted);
    cursor: pointer; margin-top: 8px; margin-bottom: 4px;
}

.remember-device input[type="checkbox"] {
    accent-color: #0056B3; width: 14px; height: 14px;
}

@media (max-width: 800px) {
    .login-split { flex-direction: column; }
    .login-image { min-height: 200px; flex: none; }
    .login-form-side { width: 100%; padding: 24px; }
    .login-image-overlay h2 { font-size: 22px; }
}

/* ── Password Toggle ─────────────────────────────────────── */
.pw-input-wrap {
    position: relative;
}
.pw-input-wrap input {
    padding-right: 38px;
    width: 100%;
}
.pw-eye-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    padding: 4px; display: flex; align-items: center; justify-content: center;
    color: var(--color-muted);
    transition: color .15s;
}
.pw-eye-btn:hover { color: var(--navy); }

/* ── Worksheet Questions ─────────────────────────────────── */
.question-block {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--color-bg);
}

.question-block.correct { border-color: var(--success); background: #f0fdf4; }
.question-block.incorrect { border-color: #ef4444; background: #fef2f2; }
.question-block.locked input { cursor: not-allowed; opacity: 0.7; }
.question-block.locked label { cursor: not-allowed; }

.question-number {
    font-size: 11px; font-weight: 700; color: var(--navy);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}

.question-text { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--color-text); }

.question-options { display: flex; flex-direction: column; gap: 6px; }

.question-options label {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius);
    cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s;
}

.question-options label:hover { border-color: var(--navy); background: #f0f4ff; }

.question-options input[type="radio"] { accent-color: var(--navy); }

.question-options input[type="text"] {
    padding: 6px 10px; border: 1.5px solid var(--color-border); border-radius: var(--radius);
    font-size: 13px; width: 200px; outline: none; transition: border-color .15s;
}

.question-options input[type="text"]:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(144,224,239,.35); }

.question-feedback {
    margin-top: 8px; font-size: 12px; font-weight: 600;
}

.question-feedback.correct { color: var(--success); }
.question-feedback.incorrect { color: #ef4444; }

/* ── Results Banner ──────────────────────────────────────── */
.results-banner {
    padding: 16px; border-radius: var(--radius-lg);
    text-align: center; font-weight: 600;
}

.results-banner.pass { background: #f0fdf4; border: 2px solid var(--success); color: #166534; }
.results-banner.fail { background: #fef2f2; border: 2px solid #ef4444; color: #991b1b; }

/* ── Report Output ───────────────────────────────────────── */
.report-section { margin-bottom: 20px; }

.report-section h3 {
    font-size: 14px; color: var(--navy); border-bottom: 2px solid var(--navy);
    padding-bottom: 4px; margin-bottom: 10px;
}

.report-table {
    width: 100%; border-collapse: collapse; font-size: 12px;
}

.report-table th {
    background: var(--navy); color: #fff; text-align: left;
    padding: 6px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}

.report-table td {
    padding: 5px 10px; border-bottom: 1px solid var(--color-border);
}

.report-table tr:nth-child(even) td { background: #f8fafc; }
.report-table-wrap { overflow-x: auto; }

.admin-action-btn {
    display: inline-block; padding: 2px 8px; margin: 1px;
    font-size: 10px; font-weight: 600; border-radius: 4px;
    border: 1px solid #d1d5db; background: #f9fafb; color: #374151;
    cursor: pointer; line-height: 1.6;
}
.admin-action-btn:hover { background: #e5e7eb; }
.admin-action-impersonate { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.admin-action-impersonate:hover { background: #bfdbfe; }
.admin-action-delete { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.admin-action-delete:hover { background: #fecaca; }

.report-summary {
    display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px;
}

.report-summary-item {
    background: var(--color-bg); border-radius: var(--radius-lg);
    padding: 8px 18px; text-align: center; flex: 1; min-width: 120px;
    border: 1.5px solid var(--color-border);
    line-height: 1.2;
}

.report-summary-item .value { font-size: 20px; font-weight: 700; color: var(--navy); }
.report-summary-item .label { font-size: 10px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }

/* ── Print Styles ────────────────────────────────────────── */
.print-student-info {
    font-size: 13px; margin-bottom: 16px; line-height: 1.8;
}

.print-question {
    margin-bottom: 14px; page-break-inside: avoid;
}

.print-question .q-num { font-weight: 700; font-size: 12px; color: var(--navy); }
.print-question .q-text { font-size: 13px; margin: 4px 0 6px; }

.print-option {
    display: flex; align-items: center; gap: 6px; font-size: 13px; margin-left: 16px; margin-bottom: 3px;
}

.print-option .bubble {
    width: 14px; height: 14px; border: 1.5px solid #666; border-radius: 50%; flex-shrink: 0;
}

.print-fill-line {
    border-bottom: 1.5px solid #666; width: 150px; display: inline-block; margin-left: 8px; height: 18px;
}

/* ── Children Cards ──────────────────────────────────────── */
.children-cards {
    display: flex; gap: 10px; flex-wrap: wrap;
}

.child-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    min-width: 180px;
}

.child-card:hover {
    border-color: var(--ocean);
    box-shadow: var(--shadow-sm);
}

.child-card.selected {
    border-color: var(--navy);
    background: #eef4ff;
    box-shadow: 0 0 0 3px rgba(2,62,138,.12);
}

.child-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    flex-shrink: 0;
}

.child-card.selected .child-avatar { background: #0077B6; }

.child-info { line-height: 1.3; }
.child-info .child-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
.child-info .child-grade { font-size: 10px; color: var(--color-muted); }

/* ── Modern Dashboard Layout ──────────────────────────────── */
#screen-dashboard { padding: 0; margin-top: 0; }
#logged-in-dashboard { padding-top: var(--topbar-h); }

.dash-modern { max-width: 1200px; margin: 0 auto; padding: 12px 16px; min-height: calc(100vh - var(--topbar-h)); }

/* Welcome Header */
/* Welcome banner — greeting is the hero; the action row is the supporting
   cast. Stacked layout (greeting on top, actions below) gives the human-
   facing message its own line and the action buttons breathing room
   instead of competing visually. */
.dash-header {
    display: flex; flex-direction: column; gap: 18px;
    padding: 26px 28px; background: linear-gradient(135deg, #0056B3 0%, #0077B6 100%);
    border-radius: 14px; color: #fff; margin-bottom: 12px;
    box-shadow: 0 4px 16px rgba(0,86,179,.2);
}
.dash-greeting {
    font-size: 28px; font-weight: 600; color: #fff; margin: 0;
    letter-spacing: -0.4px; line-height: 1.2;
    font-family: Georgia, "Times New Roman", serif;
}
.dash-location { font-size: 11px; color: rgba(255,255,255,.7); margin: 0; }
.dash-header-left { flex: 1 1 auto; min-width: 150px; }
.dash-header-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-stat-pill { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 20px; padding: 4px 14px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.92); white-space: nowrap; }
.dash-header-actions {
    display: flex; gap: 6px;
    flex-wrap: wrap;
}
/* Action buttons — quieter than before so they read as supporting actions,
   not as the headline. Lower-contrast surface, lighter weight, gentle
   white text. The amber demo back button overrides this with its own
   warmer treatment. */
.dash-action-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,.92);
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.dash-action-btn:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.32);
    color: #fff;
}
/* Visual separator between essential actions (Profile, Add Child,
   Compliance, State Laws) and the secondary tools (Day Rhythm, Time
   Capsule, Mastery, Local Radar, SAT Prep). Tools after the divider get
   an even quieter ghost treatment so the eye reads the essentials first. */
.dash-action-divider {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,.32);
    margin: 0 14px;
    align-self: center;
}
.dash-action-divider ~ .dash-action-btn {
    background: transparent;
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.78);
    font-weight: 500;
}
.dash-action-divider ~ .dash-action-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.24);
    color: #fff;
}
/* Demo "Back to Home" — uses the same orange hero CTA palette
   (#ff9500 bg, white text, hover #e88500) so the exit ramp from
   the demo matches the orange "Sign Up Free" button on the landing
   page that brought them in. */
.demo-back-btn {
    background: #ff9500;
    border: 1px solid #ff9500;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.1px;
    transition: background .15s, border-color .15s;
}
.demo-back-btn:hover {
    background: #e88500;
    border-color: #e88500;
    color: #fff;
}
.alert-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 13px; height: 13px;
    background: #fff; color: #e57373;
    border-radius: 7px; font-size: 9px; font-weight: 700;
    display: grid; place-items: center;
    padding: 0 3px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* Child Tabs */
.dash-child-bar { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
body.role-student .dash-child-bar,
body.role-student #add-child-form { display: none !important; }
body.role-student .dash-header-actions .dash-action-btn { display: none !important; }
/* Students don't get tickets or the parent community forum. */
body.role-student .help-menu-item[data-target="tickets"],
body.role-student .help-menu-item[data-target="forum"],
body.role-student #btn-open-ticket,
body.role-student #btn-open-forum { display: none !important; }
.dash-child-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
    flex: 1;
    transition: max-height .3s ease, opacity .2s ease, flex-basis .3s ease;
    max-height: 800px;
    /* Small inset top padding so the selected card's 1px lift + drop shadow
       stays inside the container's bounds and isn't clipped. */
    padding-top: 4px;
    margin-top: -4px;
}
.dash-child-tabs.collapsed { overflow: hidden; }
.dash-child-tabs.collapsed { max-height: 0; opacity: 0; pointer-events: none; padding: 0; flex: 0 0 0; }
/* Mini (single-row) child list — visible only when the grid is collapsed */
.dash-child-mini {
    display: none;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    align-items: center;
    padding: 8px 4px;
    font-size: 13px;
}
.dash-child-tabs.collapsed + .dash-child-mini { display: flex; }
.dash-child-mini-item {
    color: #94a3b8;
    cursor: pointer;
    font-weight: 500;
    transition: color .15s ease;
}
.dash-child-mini-item:hover { color: #0056B3; }
.dash-child-mini-item.selected {
    color: #0f172a;
    font-weight: 700;
    cursor: default;
}
.dash-child-toggle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: 50%; font-size: 10px; color: var(--color-muted);
    cursor: pointer; transition: all .25s ease; flex-shrink: 0;
    margin-top: 10px; margin-right: 1px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dash-child-toggle:hover { background: #0056B3; color: #fff; border-color: #0056B3; box-shadow: 0 2px 8px rgba(0,86,179,.2); }
.dash-child-toggle svg { transition: transform .25s ease; }
.dash-child-toggle.collapsed svg { transform: rotate(-90deg); }
.dash-child-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
    transition: border-color .15s ease, background .15s ease;
}
.dash-child-tab:hover { border-color: #94a3b8; background: #f8fafc; }
/* Selected kid: clearly the active card. Solid blue left bar (3px), a
   subtle elevation so it lifts above siblings, and a softer blue fill. */
.dash-child-tab.selected {
    border-color: #0056B3;
    background: #eff6ff;
    box-shadow: inset 4px 0 0 #0056B3, 0 2px 8px rgba(0, 86, 179, .15);
    transform: translateY(-1px);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dash-child-tab.selected .dash-child-name { color: #0056B3; }
.dash-child-avatar {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: #0056B3; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.dash-child-tab.selected .dash-child-avatar { background: #023E8A; }
.dash-child-info { line-height: 1.25; min-width: 0; overflow: hidden; }
.dash-child-name {
    font-size: 12px; font-weight: 600; color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-child-grade { font-size: 10px; color: var(--color-muted); }
/* Action icons only appear when the kid card is hovered or selected,
   keeping the grid clean at rest. Selected card always shows them so the
   active student's actions stay accessible. */
.dash-child-actions {
    display: flex; gap: 2px; margin-left: auto; flex-shrink: 0;
    opacity: 0;
    transition: opacity .12s ease;
}
.dash-child-tab:hover .dash-child-actions,
.dash-child-tab:focus-within .dash-child-actions,
.dash-child-tab.selected .dash-child-actions {
    opacity: 1;
}

.dash-child-action-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
    background: transparent; border: none;
    color: #94a3b8; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.dash-child-action-btn svg { width: 17px; height: 17px; display: block; }
.dash-child-action-btn:hover { background: #e2e8f0; color: #334155; }
.dash-child-edit:hover { color: #3b82f6; background: #eff6ff; }
.dash-child-eval:hover { color: #f59e0b; background: #fffbeb; }
.dash-child-login:hover { color: #6366f1; background: #eef2ff; }

.dash-add-child {
    margin-bottom: 12px;
    animation: slideDown .2s ease-out;
}
.dash-add-child .card {
    border: 2px solid #3b82f6;
    box-shadow: 0 4px 16px rgba(59,130,246,.15);
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Today's Focus */
.dash-today { background: var(--color-surface); border-radius: 14px; border: 1px solid var(--color-border); padding: 14px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.dash-today.collapsed { padding-bottom: 10px; }
.dash-today-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.dash-today-left { justify-self: start; display: inline-flex; align-items: center; gap: 15px; }
.dash-today-header .dash-today-date { justify-self: center; white-space: nowrap; }
.dash-today-header .dash-today-toggle { justify-self: end; }
.dash-today.collapsed .dash-today-header { margin-bottom: 0; }
.dash-today.collapsed .dash-today-timeline { display: none; }
#dash-today-header-row { cursor: pointer; user-select: none; }
.dash-today-toggle {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: 50%; font-size: 10px; color: var(--color-muted);
    cursor: pointer; transition: all .25s ease; flex-shrink: 0;
    padding: 0; margin-right: -17px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dash-today-toggle:hover { background: #0056B3; color: #fff; border-color: #0056B3; box-shadow: 0 2px 8px rgba(0,86,179,.2); }
.dash-today-toggle svg { transition: transform .25s ease; }
.dash-today.collapsed .dash-today-toggle svg { transform: rotate(-90deg); }
.dash-today-header h3 {
    font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0;
    text-transform: none; letter-spacing: 0;
    /* Reserve enough room for the heading + longest student name so the Walk
       Through button sits at the same x-position regardless of which child is
       selected. Covers "Today's Schedule – Isabella" and full date labels. */
    min-width: 280px;
    white-space: nowrap;
}
.dash-today-date { font-size: 11px; color: var(--color-muted); }
.dash-today-timeline { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 4px; }
.dash-today-empty { text-align: center; padding: 24px 16px; background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%); border-radius: 10px; border: 1px solid #d1fae5; min-width: 100%; }
.dash-today-item {
    display: flex; flex-direction: column;
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    /* flex: 1 1 0 shares the row width evenly across all cards. min-width
       lets up to 5 cards fit on one line on most desktops; below that the
       row wraps, and on phones each card takes a full row (override below). */
    flex: 1 1 0;
    min-width: 180px;
    cursor: default; transition: box-shadow .15s, border-color .15s;
    position: relative;
    overflow: hidden;
}
@media (max-width: 640px) {
    .dash-today-item { flex: 1 1 100%; min-width: 0; }
}
.dash-today-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }

/* Subject-colored left accent — only when the user has selected this card. */
.dash-today-item.selected.math           { border-left: 3px solid var(--subj-math); }
.dash-today-item.selected.reading        { border-left: 3px solid var(--subj-read); }
.dash-today-item.selected.science        { border-left: 3px solid var(--subj-sci); }
.dash-today-item.selected.social-studies { border-left: 3px solid var(--subj-ss); }
.dash-today-item.selected.language-arts  { border-left: 3px solid var(--subj-la); }

.dash-today-item.completed { background: #f8fafc; }
.dash-today-item.completed .today-title { color: var(--color-muted); }
.dash-today-item.completed .today-subj { opacity: 0.75; }
.dash-today-item.completed .today-time { opacity: 0.7; }

/* Combined header: subject — time — assignment title.
   Two font sizes only: the subject is the bold, larger anchor; everything
   else (time, title, action buttons) shares one quieter size. */
.dash-today-head {
    display: flex; align-items: baseline;
    gap: 6px;
    padding: 9px 12px 3px;
    line-height: 1.3;
    min-width: 0;
}
.today-subj {
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.today-subj.math           { color: var(--subj-math); }
.today-subj.reading        { color: var(--subj-read); }
.today-subj.science        { color: var(--subj-sci); }
.today-subj.social-studies { color: var(--subj-ss); }
.today-subj.language-arts  { color: var(--subj-la); }
.today-sep {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
    flex-shrink: 0;
    opacity: 0.55;
}
.today-time {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.today-title {
    color: var(--color-text);
    font-size: 11px;
    font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.dash-today-check {
    font-size: 13px;
    color: var(--success);
    flex-shrink: 0;
    margin-left: 4px;
}

/* Footer — both buttons live in a single centered inline group so the
   "Lesson | Assignment" pair feels visually centered as a unit, regardless
   of the relative widths of the two labels. */
.dash-today-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}
.dash-today-action {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 3px 6px 8px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 400;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s;
}
.dash-today-action svg { flex-shrink: 0; stroke: currentColor; }
.dash-today-action:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Calendar Card */
.dash-calendar { background: var(--color-surface); border-radius: 14px; border: 1px solid var(--color-border); padding: 12px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.dash-cal-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
.dash-cal-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }
.dash-cal-nav { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 10px; font-size: 14px; cursor: pointer; transition: all .15s; color: var(--color-text); }
.dash-cal-nav:hover { background: #0056B3; color: #fff; border-color: #0056B3; }
.dash-cal-info { text-align: center; font-size: 11px; color: var(--color-muted); margin-bottom: 6px; }

/* Week view icon legend — sits bottom-right under the grid */
.cal-week-legend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: #64748b;
    padding: 6px 2px 0;
}
.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cal-legend-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #475569;
}
.cal-legend-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.cal-today-badge {
    display: inline-block; background: #0077B6; color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 10px;
    border-radius: 10px; vertical-align: middle; margin-left: 6px;
}

/* Calendar View Toggle */
.cal-view-toggle {
    display: flex; border: 1.5px solid var(--color-border);
    border-radius: 8px; overflow: hidden; margin-left: 12px;
}

.cal-view-btn {
    padding: 4px 12px; border: none; background: var(--color-surface);
    font-size: 11px; font-weight: 600; color: var(--color-muted);
    cursor: pointer; transition: all .15s;
    border-right: 1px solid var(--color-border);
}

.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover { background: var(--color-bg); color: var(--color-text); }
.cal-view-btn.active { background: #0056B3; color: #fff; }

/* Week View */
.calendar-grid.week-view {
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-grid.week-view .calendar-day {
    min-height: 200px;
}

.calendar-grid.week-view .calendar-slot-subject { font-size: 9px; }
.calendar-grid.week-view .calendar-slot-lesson { font-size: 9px; }
.calendar-grid.week-view .calendar-slot-assignment { font-size: 9px; }

/* Day View */
.calendar-grid.day-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.day-view-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--navy);
    background: #fff; border: 1px solid var(--color-border);
    border-radius: 8px; user-select: none;
}
.day-view-toggle:hover { background: #f1f5f9; }
.day-view-toggle-arrow { font-size: 10px; color: var(--color-muted); }
.day-view-toggle-count { font-size: 11px; font-weight: 500; color: var(--color-muted); margin-left: auto; }
.day-view-slots-container { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

/* Single-row slot card: time | subject – title | actions. */
.day-view-slot {
    display: flex; gap: 16px; align-items: center;
    padding: 10px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: box-shadow .15s, border-color .15s;
}
.day-view-slot:hover { border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.day-view-slot.completed { background: #f8fafc; }

/* Fixed-width time block so every subject name starts at the same x-axis,
   regardless of whether the time text is "9:00 AM" or "11:00 AM". */
.day-view-time {
    flex-shrink: 0;
    width: 140px;
    display: inline-flex; align-items: baseline; gap: 6px;
}
.day-view-time-start {
    font-size: 13px; font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
.day-view-time-end {
    font-size: 10px; font-weight: 400;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

.day-view-head {
    display: flex; align-items: baseline; gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}
.day-view-subj {
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.1px;
}
.day-view-subj.subj-math           { color: var(--subj-math); }
.day-view-subj.subj-reading        { color: var(--subj-read); }
.day-view-subj.subj-science        { color: var(--subj-sci); }
.day-view-subj.subj-social-studies { color: var(--subj-ss); }
.day-view-subj.subj-language-arts  { color: var(--subj-la); }
.day-view-sep {
    color: var(--color-muted);
    font-size: 12px;
    opacity: 0.5;
    flex-shrink: 0;
}
.day-view-title {
    font-size: 12px;
    color: var(--color-text);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-view-score {
    font-size: 12px; font-weight: 700;
    flex-shrink: 0;
}

.day-view-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.day-view-action {
    display: inline-flex; align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.day-view-action svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; }
.day-view-action:hover { background: #f1f5f9; color: #0f172a; }

/* Day View Empty State */
.day-view-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 24px;
    background: #f8fafc;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    min-height: 280px;
    text-align: center;
}

.day-view-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .55; color: var(--color-muted); }
.day-view-empty-icon svg { width: 56px; height: 56px; display: block; margin: 0 auto; }
.day-view-empty-reason { font-size: 18px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.day-view-empty-msg { font-size: 13px; color: var(--color-muted); }

/* Subject coloring intentionally removed from month-view slots — only
   holidays/observances carry color in that view. */

/* Micro-animations */
* { transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.card, .dash-today, .dash-calendar, .dash-header { transition: box-shadow .2s, transform .2s; }

@media (max-width: 768px) {
    .dash-header { flex-direction: column; align-items: flex-start; }
    .dash-header-stats { width: 100%; }
    .dash-today-timeline { flex-wrap: wrap; }
}

/* Hamburger in topbar (hidden on desktop) */
.topbar-hamburger {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    padding: 0 12px;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
    transition: background .15s;
    flex-shrink: 0;
}

.topbar-hamburger:hover { background: rgba(255,255,255,.1); }

.sidebar-greeting {
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--color-border);
    background: #0056B3;
    color: #fff;
}

.sidebar-greeting h2 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 2px;
}

.sidebar-greeting p {
    font-size: 10px;
    color: rgba(255,255,255,.7);
}

.sidebar-section {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-section:last-child { border-bottom: none; }

.sidebar-section h3 {
    font-size: 11px;
    margin-bottom: 0;
}

/* Vertical child cards for sidebar */
.children-cards-vertical {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.children-cards-vertical .child-card {
    min-width: unset;
    padding: 7px 10px;
    border-width: 1.5px;
}

.children-cards-vertical .child-avatar {
    width: 28px; height: 28px;
    font-size: 11px;
}

.children-cards-vertical .child-name { font-size: 12px; }
.children-cards-vertical .child-grade { font-size: 9px; }

.sidebar-law-btn {
    display: block; text-align: center;
    padding: 8px 10px; border-radius: var(--radius);
    background: #f0f7ff; border: 1.5px solid #bfdbfe;
    color: #0056B3; font-size: 11px; font-weight: 600;
    text-decoration: none; transition: all .15s;
}

.sidebar-law-btn:hover { background: #0056B3; color: #fff; border-color: #0056B3; }

.btn-eval {
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 2px 8px;
    font-size: 9px; font-weight: 600; color: var(--color-muted);
    cursor: pointer; transition: all .15s; text-align: center;
}

.btn-eval:hover {
    background: #eff6ff; border-color: #3b82f6; color: #3b82f6;
}

@media (max-width: 900px) {
    .topbar-brand { width: auto; }

    .topbar-hamburger.visible { display: flex !important; }

    .dashboard-sidebar {
        box-shadow: var(--shadow-lg);
        transform: translateX(0);
        transition: transform .25s ease;
    }

    .dashboard-sidebar.collapsed {
        transform: translateX(-100%);
        width: 220px;
    }

    .dashboard-main {
        margin-left: 0 !important;
    }
}

/* ── Subject Tabs ─────────────────────────────────────────── */
.subject-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0; margin-bottom: 12px;
}

.subject-tab {
    padding: 8px 16px;
    font-size: 12px; font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    border: 1.5px solid transparent;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    transition: all .15s;
    margin-bottom: -2px;
}

.subject-tab:hover { color: var(--color-text); background: var(--color-bg); }

.subject-tab.active {
    color: #0056B3;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-bottom: 2px solid var(--color-surface);
}

/* ── Examples Bar ─────────────────────────────────────────── */
.examples-bar {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 8px;
}

.example-box {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
    background: var(--color-bg);
    color: var(--color-muted);
    position: relative;
}

.example-box:hover {
    border-color: #0056B3; color: #0056B3; background: #f0f4ff;
}

.example-box.active {
    border-color: #0056B3; background: #0056B3; color: #fff;
}

.example-box .diff-dot {
    position: absolute; top: 3px; right: 3px;
    width: 6px; height: 6px; border-radius: 50%;
}

.diff-dot.easy { background: #22c55e; }
.diff-dot.medium { background: #f59e0b; }
.diff-dot.hard { background: #ef4444; }

/* ── Difficulty Indicator ─────────────────────────────────── */
.difficulty-indicator {
    display: flex; align-items: center; gap: 16px;
    font-size: 10px; color: var(--color-muted); margin-bottom: 8px;
}

.diff-legend {
    display: flex; align-items: center; gap: 4px;
}

.diff-legend .dot {
    width: 8px; height: 8px; border-radius: 50%;
}

.diff-legend .dot.easy { background: #22c55e; }
.diff-legend .dot.medium { background: #f59e0b; }
.diff-legend .dot.hard { background: #ef4444; }

/* ── Example Preview ──────────────────────────────────────── */
.example-preview {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: var(--color-bg);
}

.example-preview h3 { font-size: 15px; color: #0056B3; margin-bottom: 4px; }
.example-preview .example-desc { font-size: 12px; color: var(--color-muted); margin-bottom: 14px; }

.example-preview .example-question {
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 8px;
}

.example-preview .example-question .q-label {
    font-size: 10px; font-weight: 700; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}

.example-preview .example-question .q-text {
    font-size: 13px; font-weight: 600; color: var(--color-text);
}

.example-preview .example-options {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
}

.example-preview .example-option {
    padding: 4px 10px; font-size: 11px;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
}

/* ── Badge Detail Page ────────────────────────────────────── */
.badge-detail-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    overflow: hidden;
}
.badge-detail-header {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 28px; border-left: 5px solid #3b82f6;
    background: #f8fafc;
}
.badge-detail-header h2 { margin: 0; font-size: 22px; color: #1e293b; }
.badge-detail-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    font-size: 22px; color: #fff; flex-shrink: 0;
}
.badge-detail-section {
    padding: 20px 28px;
    border-bottom: 1px solid #f1f5f9;
}
.badge-detail-section:last-child { border-bottom: none; }
.badge-detail-section h3 {
    font-size: 15px; font-weight: 700; color: #0f172a;
    margin: 0 0 8px 0;
}
.badge-detail-section p {
    font-size: 14px; line-height: 1.7; color: #475569; margin: 0;
}
.badge-detail-section ul {
    margin: 0; padding-left: 0; list-style: none;
}
.badge-detail-section li {
    font-size: 13px; line-height: 1.8; color: #475569;
    padding-left: 20px; position: relative;
}
.badge-detail-section li::before {
    content: "✓"; position: absolute; left: 0;
    color: #10b981; font-weight: 700;
}

/* ── Approach picker: contextual extra link ────────────────
   Shown under the Education Approach description when a value
   that has supplemental reading is selected (currently only
   Faith-Based -> American Founding Fathers). Sized to read as
   a quiet "learn more" link, not a primary action. */
.approach-extra-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #006ba3;
  text-decoration: none;
}
.approach-extra-link:hover { text-decoration: underline; }

/* ── Founding Fathers info modal ───────────────────────────
   Reading-focused, slightly off-white card with serif accents
   and a quiet gold rule under the heading — feels civics-y
   without leaning hard into a single visual cliche. */
.founding-fathers-card {
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.founding-fathers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #fbfaf6;
}
.founding-fathers-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #b07410;
  font-weight: 700;
  margin-bottom: 4px;
}
.founding-fathers-title {
  margin: 0 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}
.founding-fathers-subtitle {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}
.founding-fathers-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.65;
  color: #1f2937;
}
.founding-fathers-body p { margin: 0 0 14px; }
.founding-fathers-body h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  color: #5b3a06;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e6cf9d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ff-principles {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ff-principles dt {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
}
.ff-principles dd {
  margin: 2px 0 0;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}
.ff-closing {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #e6cf9d;
  font-style: italic;
  color: #475569;
  font-size: 13px;
}

/* ── Faith Lens callout ─────────────────────────────────────
   Scripture-perspective annotation that appears under lesson
   content for Faith-Based families on topics that intersect
   with religious teaching (evolution, big bang, comparative
   religions, etc.). Kept editorially distinct from the lesson:
   warm parchment / gold treatment, scripture-icon header, clearly
   labeled "From a Faith-Based perspective." */
.faith-lens-callout {
  margin: 22px 0 8px;
  background: #fffaf0;
  border: 1px solid #f3e2c1;
  border-left: 4px solid #d4a437;
  border-radius: 10px;
  padding: 16px 20px 18px;
  box-shadow: 0 1px 3px rgba(122, 78, 5, 0.05);
}
.faith-lens-callout + .faith-lens-callout { margin-top: 12px; }
.faith-lens-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.faith-lens-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: #b07410;
}
.faith-lens-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b07410;
  font-weight: 700;
}
.faith-lens-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #5b3a06;
  line-height: 1.3;
}
.faith-lens-body {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #3f2802;
}
.faith-lens-refs {
  font-size: 12px;
  color: #8a5d12;
  font-style: italic;
  margin: 8px 0 0;
}
.faith-lens-prompt {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed #e6cf9d;
  font-size: 13px;
  color: #5b3a06;
  font-weight: 600;
}
.faith-lens-prompt::before {
  content: "Discuss together: ";
  color: #b07410;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ── Lesson View ──────────────────────────────────────────── */
/* Compact lesson layout */
.lesson-compact { max-width: 100%; }

.lesson-topbar {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.lesson-topbar-left { flex: 1; min-width: 200px; }
.lesson-topbar-right { flex-shrink: 0; }
.lesson-title { font-size: 17px; color: #0056B3; margin: 0; }
.lesson-meta { font-size: 11px; color: var(--color-muted); }
.lesson-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lesson-obj { margin-bottom: 8px; }
.lesson-label {
    font-size: 10px; font-weight: 700; color: #0056B3;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.lesson-text { font-size: 12px; line-height: 1.5; color: var(--color-text); }

/* High-school lesson rendering — full lesson content with sections */
.lesson-hs-content { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.lesson-hs-section {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 14px 18px;
}
.lesson-hs-text { font-size: 13px; line-height: 1.7; color: var(--color-text); }
.lesson-hs-monospace {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px; line-height: 1.65;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 12px 14px; white-space: normal;
}

/* High school worked example cards */
.hs-example-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px;
}
.hs-example-header {
    font-size: 11px; font-weight: 700; color: #0056B3;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.hs-example-problem {
    font-size: 13px; line-height: 1.6; color: var(--color-text); margin-bottom: 8px;
}
.hs-example-steps {
    font-size: 12px; line-height: 1.6; color: var(--color-text); margin-bottom: 10px;
}
.hs-example-answer-wrap { margin-top: 8px; }
.hs-example-reveal-btn {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1.5px dashed #93c5fd; border-radius: 6px;
    padding: 6px 14px; font-size: 11px; font-weight: 600;
    color: #3b82f6; cursor: pointer; transition: all .15s;
}
.hs-example-reveal-btn::before { content: "🔍 "; }
.hs-example-reveal-btn:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-color: #3b82f6;
}
.hs-example-answer {
    font-size: 13px; line-height: 1.6; color: #16a34a; font-weight: 600;
    background: #f0fdf4; border: 1px solid #86efac; border-radius: 6px;
    padding: 8px 12px; margin-bottom: 6px;
}
.hs-example-why {
    font-size: 12px; line-height: 1.6; color: #475569;
    background: #f8fafc; border-left: 3px solid #cbd5e1;
    padding: 6px 10px; font-style: italic;
}

/* Text excerpt cards */
.hs-excerpt-card {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px;
}
.hs-excerpt-source {
    font-size: 11px; font-weight: 700; color: #92400e;
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px;
}
.hs-excerpt-context {
    font-size: 11px; color: #78716c; margin-bottom: 8px; font-style: italic;
}
.hs-excerpt-text {
    font-size: 13px; line-height: 1.8; color: #1c1917;
    border-left: 3px solid #d97706; margin: 0; padding: 8px 14px;
    background: #fffef5; border-radius: 0 6px 6px 0;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Suggested texts list */
.hs-suggested-texts {
    list-style: none; padding: 0; margin: 0;
}
.hs-suggested-texts li {
    font-size: 12px; line-height: 1.6; color: var(--color-text);
    padding: 6px 0; border-bottom: 1px solid #f1f5f9;
}
.hs-suggested-texts li:last-child { border-bottom: none; }
.hs-suggested-texts li::before {
    content: "\1F4D6 "; font-size: 13px;
}

/* Vocabulary term tooltips */
.vocab-term {
    color: #0056B3; border-bottom: 1px dotted #93c5fd;
    cursor: pointer; position: relative; transition: color .15s;
}
.vocab-term:hover { color: #1d4ed8; border-bottom-color: #3b82f6; }
.vocab-tooltip {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%); background: #1e293b; color: #f8fafc;
    font-size: 12px; line-height: 1.5; padding: 8px 12px;
    border-radius: 6px; white-space: normal; width: max-content;
    max-width: 280px; z-index: 900; box-shadow: 0 4px 12px rgba(0,0,0,.2);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal; pointer-events: auto;
}
.vocab-tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 6px solid transparent;
    border-top-color: #1e293b;
}

/* Previous lesson links */
.lesson-prev-links {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    padding: 5px 12px; margin-bottom: 10px; font-size: 11px; color: #64748b;
}
.lesson-prev-label { font-weight: 600; color: #475569; }
.lesson-prev-link { color: #3b82f6; text-decoration: none; font-weight: 500; }
.lesson-prev-link:hover { text-decoration: underline; }

/* Two-column grid */
.lesson-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 768px) {
    .lesson-grid { grid-template-columns: 1fr; }
}

/* Collapsible panels */
.lesson-panel {
    border: 1px solid #e2e8f0; border-radius: 8px;
    margin-bottom: 8px; overflow: hidden;
}
.lesson-panel-title {
    font-size: 11px; font-weight: 700; color: #0056B3;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 8px 12px; cursor: pointer;
    background: #f8fafc; border-bottom: 1px solid #e2e8f0;
    list-style: none; display: flex; align-items: center; gap: 6px;
}
.lesson-panel-title::before { content: "▸"; font-size: 18px; transition: transform .15s; }
.lesson-panel[open] > .lesson-panel-title::before { transform: rotate(90deg); }
.lesson-panel-title::-webkit-details-marker { display: none; }

.lesson-answer-reveal {
    padding: 6px 10px; border-radius: 8px; cursor: pointer;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1.5px dashed #93c5fd; text-align: center;
    transition: all .3s ease; display: flex; align-items: center; justify-content: center;
}
.lesson-answer-reveal:hover { border-color: #3b82f6; background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); }
.lesson-answer-prompt {
    font-size: 10px; font-weight: 600; color: #3b82f6; letter-spacing: .03em; white-space: nowrap;
}
.lesson-answer-prompt::before { content: "🔍 "; }
.lesson-answer-hidden { display: none; }
.lesson-answer-reveal.revealed {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1.5px solid #86efac; cursor: default;
}
.lesson-answer-reveal.revealed .lesson-answer-prompt { display: none; }
.lesson-answer-reveal.revealed .lesson-answer-hidden { display: block; }

.lesson-panel-body {
    font-size: 12px; line-height: 1.6; color: var(--color-text);
    padding: 8px 12px; white-space: pre-line;
}
.lesson-wrapup {
    border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 4px;
    font-style: italic; color: #64748b;
}

/* Teaching guide panel */
.lesson-panel-guide { border-color: #86efac; }
.lesson-panel-guide .lesson-panel-title { background: #f0fdf4; color: #166534; border-bottom-color: #86efac; }
.lesson-panel-guide .lesson-panel-title::before { color: #10b981; }
.lesson-samples {
    background: #fff; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: 8px 12px; font-size: 12px; line-height: 1.6;
    white-space: pre-line; margin-bottom: 6px;
}
.lesson-hints {
    background: #fff; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: 8px 12px; font-size: 12px; line-height: 1.6;
    font-style: italic; color: #374151; white-space: pre-line;
}

/* Concept card for grades 7+ */
/* SAT Prep */
.sat-passage-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 12px 16px; transition: all .15s;
}
.sat-passage-card:hover { border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,.1); }

.concept-card {
    border: 1px solid #e2e8f0; border-radius: 10px;
    overflow: hidden; margin: 12px 0;
}
.concept-card-header {
    padding: 12px 16px; background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.concept-card-subject {
    font-size: 10px; font-weight: 700; color: #3b82f6;
    text-transform: uppercase; letter-spacing: .04em;
}
.concept-card-title {
    font-size: 17px; font-weight: 800; color: #0f172a; margin: 2px 0 0;
}
.concept-card-body { padding: 14px 16px; }
.concept-card-section { margin-bottom: 12px; }
.concept-card-section:last-child { margin-bottom: 0; }
.concept-card-label {
    font-size: 10px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.concept-card-text { font-size: 13px; line-height: 1.6; color: #334155; }
.concept-card-examples { display: flex; flex-direction: column; gap: 8px; }
.concept-card-example {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 10px 14px;
}
.concept-ex-problem {
    font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px;
}
.concept-ex-solution {
    font-size: 13px; color: #3b82f6; font-weight: 600;
    font-family: 'Courier New', monospace; white-space: pre-wrap;
}
.concept-ex-note {
    font-size: 11px; color: #64748b; margin-top: 4px; font-style: italic;
}

.lesson-practice-examples {
    margin: 12px 0; padding: 12px;
    background: linear-gradient(135deg, #f0f9ff 0%, #eff6ff 100%);
    border: 1px solid #bfdbfe; border-radius: 10px;
}
.lesson-teaching-tips {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 10px 14px; margin: 0 0 10px;
}
.lesson-practice-heading {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}
.teaching-tip-link {
    color: var(--color-text); text-decoration: none;
    border-bottom: 1px dashed #94a3b8; cursor: pointer;
    transition: color .15s, border-color .15s;
}
.teaching-tip-link:hover { color: #0056B3; border-bottom-color: #0056B3; }

.lesson-practice-link {
    display: inline-block; margin-top: 4px;
    font-size: 12px; font-weight: 600; color: #3b82f6;
    text-decoration: none; cursor: pointer;
}
.lesson-practice-link:hover { text-decoration: underline; }
.lesson-review-item {
    display: block; padding: 10px 14px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    text-decoration: none; transition: all .15s;
}
.lesson-review-item:hover { background: #eff6ff; border-color: #3b82f6; }

/* Materials tags */
.lesson-materials { display: flex; flex-wrap: wrap; gap: 4px; }
.lesson-material-tag {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 10px; padding: 2px 8px;
    font-size: 10px; color: var(--color-muted);
}

/* Month-view row: one entry per subject per day.
   Format: "Math – Lesson | Assign". Neutral text — color reserved for
   holidays/observances and the small status mark. */
.cal-slot-row {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 4px;
    margin: 1px 0;
    font-size: 10px;
    line-height: 1.3;
    color: var(--color-text);
    border-radius: 3px;
    transition: background .12s;
}
.cal-slot-row:hover { background: #f8fafc; }
.cal-slot-subject {
    font-weight: 600;
    flex-shrink: 0;
}
.cal-slot-sep {
    color: var(--color-muted);
    opacity: 0.55;
    flex-shrink: 0;
}
.cal-slot-link {
    color: #475569;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}
.cal-slot-link:hover { color: #0f172a; text-decoration: underline; }
.cal-slot-mark {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
}
.cal-slot-mark.passed  { color: #15803d; }
.cal-slot-mark.failed  { color: #dc2626; }
.cal-slot-mark.overdue { color: #ca8a04; }

/* Legacy lesson/assignment row styles kept minimal (used by other contexts
   such as the day-view list builder). Subject coloring removed for the
   month view — only holidays/observances carry color now. */
.calendar-slot-lesson {
    font-size: 8px; margin-top: 1px; padding: 1px 3px;
    background: var(--color-surface); border-radius: 3px;
    border: 1px solid var(--color-border);
    cursor: pointer !important;
    transition: border-color .15s, background .15s;
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600;
    color: var(--color-text);
}
.calendar-slot-lesson:hover { border-color: #cbd5e1; background: #f8fafc; }
.calendar-slot-lesson svg,
.calendar-slot-assignment svg {
    width: 10px; height: 10px;
    vertical-align: -1px;
    display: inline-block;
    margin-right: 2px;
}

.cal-status-group { margin-top: 2px; }
.cal-status-toggle {
    display: flex; align-items: center; gap: 4px;
    padding: 2px 4px; cursor: pointer; user-select: none;
    border-left: 2px solid transparent; border-radius: 2px;
    font-size: 11px;
}
.cal-status-toggle:hover { background: #f1f5f9; }
.cal-status-arrow { font-size: 10px; color: var(--color-muted); }
.cal-status-label { font-weight: 700; }
.cal-status-content { padding-left: 2px; }

.calendar-observance {
    font-size: 11px; font-weight: 600;
    color: #7c3aed;
    border-radius: 3px;
    padding: 2px 4px; margin: 1px 0;
    cursor: pointer; text-align: center;
}
.calendar-observance:hover { background: #ede9fe; }

.calendar-deadline {
    font-size: 8px; font-weight: 700;
    color: #b45309; background: #fef3c7;
    border: 1px solid #fbbf24; border-radius: 3px;
    padding: 2px 4px; margin: 1px 0;
    cursor: help; text-align: center;
}

.calendar-slot-assignment.weekly-quiz {
}

.calendar-slot-assignment.weekly-quiz .calendar-slot-subject { color: #7c3aed; }

.calendar-slot-assignment.mid-exam {
    background: #fefce8; border-color: #facc15;
    font-weight: 700;
}

.calendar-slot-assignment.mid-exam .calendar-slot-subject { color: #a16207; }

.calendar-slot-assignment.end-exam {
    background: #fef2f2; border-color: #f87171;
    font-weight: 700;
}

.calendar-slot-assignment.end-exam .calendar-slot-subject { color: #b91c1c; }

.calendar-slot-assignment.enrichment {
    background: #fdf4ff; border-color: #e879f9;
}

.calendar-slot-assignment.enrichment .calendar-slot-subject { color: #a21caf; }

/* ── Question Stats ───────────────────────────────────────── */
.stats-bar {
    height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; width: 100%;
}

.stats-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }

.stats-bar-fill.high { background: #22c55e; }
.stats-bar-fill.mid { background: #f59e0b; }
.stats-bar-fill.low { background: #ef4444; }

.stats-difficulty-badge {
    font-size: 9px; font-weight: 700; padding: 1px 8px; border-radius: 10px;
}

.stats-difficulty-badge.easy { background: #f0fdf4; color: #16a34a; }
.stats-difficulty-badge.medium { background: #fffbeb; color: #d97706; }
.stats-difficulty-badge.hard { background: #fef2f2; color: #ef4444; }

.stats-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--color-border); font-size: 12px;
    cursor: pointer; transition: background .1s;
}

.stats-row:hover { background: #f8fafc; }

.stats-row .q-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.stats-row .q-subject { width: 90px; flex-shrink: 0; color: var(--color-muted); font-size: 10px; }
.stats-row .q-bar { width: 100px; flex-shrink: 0; }
.stats-row .q-pct { width: 45px; flex-shrink: 0; text-align: right; font-weight: 600; }
.stats-row .q-attempts { width: 55px; flex-shrink: 0; text-align: right; color: var(--color-muted); }
.stats-row .q-diff { width: 60px; flex-shrink: 0; text-align: center; }

.stats-header {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 2px solid var(--color-border); font-size: 10px;
    font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em;
}

.wrong-answer-row {
    display: flex; justify-content: space-between; padding: 4px 8px;
    font-size: 12px; border-bottom: 1px solid var(--color-border);
}

.wrong-answer-row:last-child { border-bottom: none; }

/* ── Evaluation Results ───────────────────────────────────── */
.eval-overall {
    text-align: center; padding: 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.eval-overall.beginner { background: #eff6ff; border: 2px solid #3b82f6; }
.eval-overall.intermediate { background: #fffbeb; border: 2px solid #f59e0b; }
.eval-overall.advanced { background: #f0fdf4; border: 2px solid #16a34a; }

.eval-overall .eval-level {
    font-size: 28px; font-weight: 800; margin-bottom: 4px;
}

.eval-overall.beginner .eval-level { color: #3b82f6; }
.eval-overall.intermediate .eval-level { color: #f59e0b; }
.eval-overall.advanced .eval-level { color: #16a34a; }

.eval-subject-result {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}

.eval-subject-name { font-weight: 600; font-size: 13px; color: var(--color-text); }
.eval-subject-score { font-size: 12px; color: var(--color-muted); }

.eval-subject-level {
    font-size: 11px; font-weight: 700;
    padding: 2px 10px; border-radius: 12px;
}

.eval-subject-level.beginner { background: #eff6ff; color: #3b82f6; }
.eval-subject-level.intermediate { background: #fffbeb; color: #d97706; }
.eval-subject-level.advanced { background: #f0fdf4; color: #16a34a; }

.eval-section-header {
    font-size: 13px; font-weight: 700; color: #0056B3;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 10px 0 6px; margin-top: 12px;
    border-bottom: 2px solid #0056B3;
}

/* ── Modal Overlay ────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,20,50,.5);
    backdrop-filter: blur(3px);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}

.global-alert-card {
    max-width: 400px; width: 100%; padding: 28px 24px;
    border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.15);
    animation: alertPop .2s ease-out;
}
@keyframes alertPop {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Guided Lesson button (in lesson tips header) ────────── */
.btn-guided-lesson {
    background: linear-gradient(135deg, #0056B3, #004494);
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 86, 179, .25);
    white-space: nowrap;
    transition: background .15s ease;
}
.btn-guided-lesson:hover {
    background: linear-gradient(135deg, #004494, #003875);
}

/* ── Guided Lesson Modal ─────────────────────────────────── */
.guided-modal {
    display: flex;
    flex-direction: column;
    height: min(82vh, 720px);
}
.guided-header {
    position: relative;
    padding: 18px 28px 14px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%);
    border-bottom: 1px solid #dbe8f5;
    border-radius: 16px 16px 0 0;
}
.guided-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.guided-step-label {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.guided-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.guided-close-x:hover { background: rgba(0,0,0,.06); color: #0f172a; }
.guided-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}
.guided-action {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #0056B3;
    margin-bottom: 8px;
}
.guided-tip-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.4;
}
.guided-tip-detail {
    font-size: 14px;
    line-height: 1.75;
    color: #334155;
    white-space: pre-line;
}
.guided-tip-detail .tips-label {
    display: inline-block;
    color: #0f172a;
    font-weight: 700;
    margin-top: 6px;
}
.guided-question {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.5;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.guided-options {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.guided-option {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
}
.guided-answer-wrap {
    margin-top: 18px;
    text-align: center;
}
.guided-answer-toggle {
    background: #fff;
    color: #0056B3;
    border: 1.5px solid #cbd5e1;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guided-answer-toggle:hover {
    background: #0056B3;
    color: #fff;
    border-color: #0056B3;
}
.guided-answer {
    margin-top: 12px;
    padding: 12px 18px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 14px;
    color: #166534;
    text-align: left;
}
.guided-answer.hidden { display: none; }
.guided-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.guided-progress {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.guided-nav-btn {
    background: #fff;
    color: #0056B3;
    border: 1.5px solid #cbd5e1;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-width: 110px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guided-nav-btn:hover:not(:disabled) {
    background: #0056B3;
    color: #fff;
    border-color: #0056B3;
}
.guided-nav-btn:disabled {
    color: #cbd5e1;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
.guided-start-btn {
    background: linear-gradient(135deg, #0056B3, #004494);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 86, 179, .3);
    min-width: 160px;
    transition: background .15s ease;
}
.guided-start-btn:hover {
    background: linear-gradient(135deg, #004494, #003875);
}

/* ── Teaching Tips Modal (tabbed) ─────────────────────────── */
.tips-modal {
    display: flex;
    flex-direction: column;
    height: min(82vh, 720px);
}
.tips-modal-header {
    padding: 20px 28px 16px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f1ff 100%);
    border-bottom: 1px solid #dbe8f5;
    border-radius: 16px 16px 0 0;
}
.tips-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.tips-modal-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.tips-tab-bar {
    display: flex;
    gap: 4px;
    padding: 8px 16px 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.tips-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tips-tab:hover {
    color: #0056B3;
    background: #eef5ff;
}
.tips-tab.active {
    color: #0056B3;
    background: #fff;
    border-bottom-color: #0056B3;
    font-weight: 600;
}
.tips-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    flex-shrink: 0;
}
.tips-tab.active .tips-tab-num {
    background: #0056B3;
    color: #fff;
}
.tips-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.tips-modal-body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}
.tips-tab-panel.hidden { display: none; }
.tips-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.4;
}
.tips-panel-detail {
    font-size: 14px;
    line-height: 1.75;
    color: #334155;
    white-space: pre-line;
}
.tips-panel-detail .tips-label {
    display: inline-block;
    color: #0f172a;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: -0.005em;
}

/* ── Teaching Tips Modal: Footer ──────────────────────────── */
.tips-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.tips-nav-btn {
    background: #fff;
    color: #0056B3;
    border: 1.5px solid #cbd5e1;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-width: 110px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tips-nav-btn:hover:not(:disabled) {
    background: #0056B3;
    color: #fff;
    border-color: #0056B3;
}
.tips-nav-btn:disabled {
    color: #cbd5e1;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
.tips-close-btn {
    background: linear-gradient(135deg, #0056B3, #004494);
    color: #fff;
    border: none;
    padding: 9px 28px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 86, 179, .3);
    min-width: 110px;
    transition: background .15s ease;
}
.tips-close-btn:hover {
    background: linear-gradient(135deg, #004494, #003875);
}

/* ── Spinner ──────────────────────────────────────────────── */
.spinner-overlay {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px; gap: 16px;
}

.spinner {
    width: 40px; height: 40px;
    border: 4px solid #0056B3;
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.spinner-overlay p {
    font-size: 14px; font-weight: 600; color: var(--navy);
}

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

/* ── Calendar ─────────────────────────────────────────────── */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 12px;
}

/* Month view's week-grouped variant overrides the 7-col grid: parent stacks
   header + per-week rows vertically, each week is its own 7-col subgrid. */
.calendar-grid.month-grouped {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calendar-grid.month-grouped .calendar-header-row,
.calendar-grid.month-grouped .cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

/* Collapsed weeks: hide the entire day body. Only the day-number row stays
   visible — that row already carries the day number, the toggle button on
   Sunday, weekend labels, and any inline holiday/observance pills. */
.calendar-grid.month-grouped .cal-week.collapsed {
    cursor: pointer;
}
.calendar-grid.month-grouped .cal-week.collapsed .calendar-day {
    min-height: 0;
}
.calendar-grid.month-grouped .cal-week.collapsed .calendar-day-body {
    display: none;
}
.calendar-grid.month-grouped .cal-week.collapsed:hover .calendar-day {
    background: #f8fafc;
}

/* Gmail-style toggle: just the chevron icon, no button chrome. Down when
   collapsed, up when expanded. Subtle gray, darkens slightly on hover. */
.cal-week-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transform: rotate(180deg); /* expanded → chevron points up */
    transition: transform .2s, color .15s;
    flex-shrink: 0;
}
.cal-week-toggle:hover { color: #202124; }
.cal-week.collapsed .cal-week-toggle {
    transform: rotate(0); /* collapsed → chevron points down */
}

#calendar-card { padding: 10px 12px; }

.calendar-grid { gap: 3px; margin-top: 6px; }

/* ===== Subject-row Week View ===== */
.calendar-subject-week {
    display: grid;
    grid-template-columns: 110px repeat(7, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 6px;
}
.csw-row { display: contents; }
.csw-cell {
    background: #fff;
    padding: 6px 8px;
    font-size: 12px;
    min-height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.csw-header .csw-cell {
    background: #0056B3;
    color: #fff;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    padding: 4px 2px;
    text-align: center;
    font-weight: 700;
    min-height: 36px;
}
.csw-header .csw-day-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; }
.csw-header .csw-day-num { font-size: 14px; }
.csw-header .today { background: #023E8A; box-shadow: inset 0 -3px 0 #fcd34d; }
.csw-header .weekend { background: #475569; }
.csw-corner {
    background: #f8fafc !important;
    color: #64748b !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    justify-content: center !important;
}
.csw-subject-label {
    background: #f8fafc;
    font-weight: 600;
    color: #0f172a;
    justify-content: flex-start;
    text-align: left;
    border-right: 2px solid #e2e8f0;
    font-size: 12px;
}
/* Subject-colored left bar removed — keep the cell clean. */
.csw-activity-cell.today { background: #fffbeb; }
.csw-activity-cell.weekend { background: #f1f5f9; }
/* Frame today's column with a subtle vertical accent */
.csw-row:not(.csw-header) .csw-activity-cell.today,
.csw-row:not(.csw-header) .csw-event-cell.today {
    box-shadow: inset 1px 0 0 #0056B3, inset -1px 0 0 #0056B3;
}
.csw-event-cell { flex-direction: column; align-items: stretch; gap: 2px; }
.csw-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.csw-pill.holiday { background: #dbeafe; color: #1e40af; }
.csw-pill.observance { background: #f3e8ff; color: #6b21a8; cursor: pointer; }
.csw-pill.deadline { background: #fef3c7; color: #92400e; cursor: pointer; }
.csw-pill.no-content {
    background: #f1f5f9; color: #64748b;
    font-style: italic; font-weight: 500;
}
/* Activity cell — Lesson | Assignment text-with-icon layout. */
.csw-activity-pair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.csw-activity-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: transparent;
    color: #475569;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.csw-activity-link svg {
    width: 13px; height: 13px;
    flex-shrink: 0; stroke: currentColor;
}
.csw-activity-link:hover { background: #f1f5f9; color: #0f172a; }
.csw-activity-sep {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1;
    user-select: none;
}
/* Status mark after the assignment label — small colored glyph. */
.csw-mark {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    margin-left: 1px;
}
.csw-mark.passed  { color: #16a34a; }
.csw-mark.failed  { color: #ef4444; }
.csw-mark.overdue { color: #eab308; }
/* Status indicator color lives ONLY on .csw-mark — the text label and icon
   on .csw-activity-link stay neutral so the cell reads cleanly. */

/* Day-specific topic line under the Lesson|Assignment row. Lets sibling
   cells across the week read differently (Intro / Practice / Review)
   instead of looking like duplicates. Truncates with ellipsis so long
   topics don't blow out the cell width. */
.csw-activity-topic {
    display: block;
    font-size: 10px;
    color: #64748b;
    line-height: 1.25;
    margin-top: 2px;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.csw-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #f1f5f9;
    color: #64748b;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    font-family: inherit;
}
.csw-icon svg {
    width: 19px;
    height: 19px;
    display: block;
}
.csw-icon:hover { filter: brightness(0.95); }
/* Pastel subject backgrounds with subject-colored icons — keeps the day-view
   style DNA but dials saturation way down since the week view displays many
   chips at once. */
.csw-icon.subj-math          { background: var(--subj-math-bg);  color: var(--subj-math); }
.csw-icon.subj-reading       { background: var(--subj-read-bg);  color: var(--subj-read); }
.csw-icon.subj-science       { background: var(--subj-sci-bg);   color: var(--subj-sci); }
.csw-icon.subj-social-studies { background: var(--subj-ss-bg);   color: var(--subj-ss); }
.csw-icon.subj-language-arts  { background: var(--subj-la-bg);   color: var(--subj-la); }
/* Status indicator — a small colored glyph at top-center. Uses distinct
   SHAPES (not just colors) so states are instantly recognizable and
   accessible to colorblind viewers. */
.csw-icon.passed::after,
.csw-icon.failed::after,
.csw-icon.overdue::after {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.csw-icon.passed::after  { content: "\2713"; color: #16a34a; } /* ✓ */
.csw-icon.failed::after  { content: "\2717"; color: #dc2626; } /* ✗ */
.csw-icon.overdue::after { content: "!";     color: #d97706; }
.csw-empty {
    grid-column: 1 / -1;
    padding: 30px;
    text-align: center;
    color: #64748b;
    font-style: italic;
    background: #fff;
}


.calendar-header-cell {
    background: #0056B3;
    color: #fff;
    padding: 4px 3px;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: var(--radius) var(--radius) 0 0;
}

.calendar-day {
    background: var(--color-bg);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    overflow: hidden;
    min-height: 80px;
    font-size: 10px;
}

.calendar-day.empty {
    background: transparent;
    border: 1px dashed var(--color-border);
    opacity: .3; min-height: 80px;
    min-height: 110px;
}

/* Spillover cells (last few days of prev month + first few of next month)
   render exactly like primary cells — no muting, no special treatment. */

.calendar-day.weekend {
    background: #f8f8f8;
    border-color: #e8e8e8;
    min-height: 110px;
}

.calendar-day.today {
}

.calendar-day-num {
    padding: 2px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

/* Today indicator: a 3px green left bar runs the full height of the cell so
   the current day jumps out at a month-glance scan. */
.calendar-day.today {
    border-left: 3px solid #10b981;
}
.calendar-day.today .calendar-day-num {
    color: #0f172a;
    background: #f0fdf4;
}

.calendar-day.weekend .calendar-day-num {
    color: var(--color-muted);
    font-weight: 500;
}

.calendar-weekend-label {
    font-size: 8px; font-weight: 500;
    color: #000;
    text-transform: uppercase; letter-spacing: .03em;
}

.calendar-day-num .day-label {
    font-size: 9px;
    font-weight: 500;
    opacity: .6;
    text-transform: uppercase;
}

.calendar-day-body {
    padding: 1px 2px 2px;
}

.calendar-slot {
    padding: 1px 2px;
    margin-bottom: 1px;
}

.calendar-slot-subject {
    font-size: 8px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-slot-time {
    font-size: 8px;
    color: var(--color-muted);
}

.calendar-slot-assignment {
    font-size: 8px;
    margin-top: 1px;
    padding: 1px 3px;
    background: var(--color-surface);
    border-radius: 3px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color .15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.calendar-slot-assignment:hover { border-color: var(--navy); }

.calendar-slot-assignment.passed {
}

.calendar-slot-assignment.overdue {
}

.calendar-slot-assignment.failed {
}

.day-view .calendar-slot-assignment.overdue { border-left: 3px solid #eab308; }
.day-view .calendar-slot-assignment.failed { border-left: 3px solid #ef4444; }
.day-view .calendar-slot-assignment.passed { border-left: 3px solid #16a34a; }

.calendar-slot-assignment .check { color: var(--success); font-weight: 700; }
.calendar-slot-assignment .score-badge { font-size: 8px; font-weight: 600; color: var(--navy); }

.calendar-holiday {
    font-size: 9px;
    font-weight: 600;
    color: #166534;
    background: #f0fdf4;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 2px 0;
    text-align: center;
}

/* Inline holiday + observance pills — sit next to the day number on the
   same line, share whatever room is left, truncate with ellipsis when
   names run long. */
.calendar-day-num .calendar-holiday-inline,
.calendar-day-num .calendar-observance-inline {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 4px;
    padding: 1px 6px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
}
.calendar-day-num .calendar-observance-inline {
    color: #5b21b6;
    background: #f5f3ff;
    cursor: pointer;
}
.calendar-day-num .calendar-observance-inline:hover {
    background: #ede9fe;
}

/* ── Admin Schedule Editor ───────────────────────────────── */
.schedule-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.schedule-row:last-child { border-bottom: none; }

.schedule-subject {
    font-weight: 600; font-size: 13px; color: var(--navy);
    min-width: 120px;
}

.schedule-time-input {
    padding: 5px 8px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius); font-size: 12px;
    width: 90px; outline: none; transition: border-color .15s;
}

.schedule-time-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(144,224,239,.35); }

@media (max-width: 800px) {
    .calendar-grid { grid-template-columns: repeat(7, 1fr); }
    .calendar-day { min-height: 60px; font-size: 9px; }
    .calendar-slot-subject, .calendar-slot-assignment { font-size: 8px; }
}

@media print {
    .topbar, .no-print { display: none !important; }
    .main-content { margin-top: 0; padding: 0; }
    .card { box-shadow: none; border: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .form-row { flex-direction: column; gap: 0; }
    .main-content { padding: 16px; }
    .card { padding: 18px; }
    .topbar-info { display: none; }
    .topbar-nav { padding: 0 8px; }
}