/* ==========================================================
   FACELIFT — editorial design language
   Extends the home-page look (Instrument Serif + warm tan
   palette) to Calendar, per-class Dashboard, Lesson Plans,
   Gradebook, Analytics, Roster, and their modals.
   Scoped to `.fl-mode` on `.main-content` so the Notebook
   page (which stays on `.notebook-mode`) is untouched.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

/* ----- Tokens ----- */
.fl-mode {
    --fl-bg: #faf8f3;
    --fl-card-bg: #ffffff;
    --fl-card-border: #ece7dd;
    --fl-card-border-soft: #f0ece3;
    --fl-card-shadow: 0 1px 2px rgba(40, 30, 10, 0.02);
    --fl-card-shadow-lifted: 0 6px 18px rgba(40, 30, 10, 0.05);

    --fl-ink: #1a1a1a;
    --fl-ink-soft: #4b5563;
    --fl-ink-meta: #6b7280;
    --fl-ink-mute: #9aa0a6;
    --fl-eyebrow: #8a7f6a;

    --fl-accent: #2f6844;
    --fl-accent-dark: #264f35;
    --fl-accent-tint: #e8f2ec;
    --fl-accent-tint-soft: #f0f6f1;

    --fl-warn: #b96a1e;
    --fl-warn-tint: #fbe9d2;
    --fl-danger: #a23838;
    --fl-danger-tint: #f6dede;
    --fl-info: #3b5b8a;
    --fl-info-tint: #e2e9f3;

    --fl-neutral-50: #faf8f3;
    --fl-neutral-100: #f4f1e8;
    --fl-neutral-200: #ece7dd;
    --fl-neutral-300: #d6d0c2;
    --fl-neutral-400: #b9b09c;

    --fl-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --fl-radius: 14px;
    --fl-radius-sm: 10px;
    --fl-radius-pill: 999px;
}

/* ----- Page shell ----- */
.main-content.fl-mode {
    background: var(--fl-bg);
    color: var(--fl-ink);
}

.fl-mode #placeholderContent,
.fl-mode .cal-container {
    color: var(--fl-ink);
}

/* ----- Shared hero (eyebrow + title) ----- */
.fl-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 4px 22px;
}
.fl-hero-main { flex: 1; min-width: 0; }
.fl-hero-aside { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

.fl-eyebrow {
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--fl-eyebrow);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.fl-title {
    font-family: var(--fl-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-title-sub {
    margin-top: 6px;
    font-size: 13px;
    color: var(--fl-ink-meta);
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* ----- Shared card surface ----- */
.fl-card {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
}

/* ----- Shared pills ----- */
.fl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-neutral-100);
    color: var(--fl-ink-soft);
    border: 1px solid transparent;
    white-space: nowrap;
}
.fl-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}
.fl-pill.fl-pill-plain::before { display: none; }
.fl-pill-done    { background: var(--fl-accent-tint); color: var(--fl-accent); }
.fl-pill-today   { background: var(--fl-warn-tint);  color: var(--fl-warn); }
.fl-pill-upcoming{ background: var(--fl-neutral-100); color: var(--fl-ink-meta); }
.fl-pill-draft   { background: var(--fl-neutral-100); color: var(--fl-ink-meta); }
.fl-pill-active  { background: var(--fl-info-tint);   color: var(--fl-info); }
.fl-pill-danger  { background: var(--fl-danger-tint); color: var(--fl-danger); }

/* ==========================================================
   CALENDAR  (app.html?page=calendar)
   ========================================================== */
.fl-mode .cal-container {
    padding: 18px 28px 40px;
    /* Match the centered column width used by Home / Lesson Plans / Roster /
       Dashboard (.th-page → max-width: 1320px). The original 1200px cap left
       the page reading lopsided next to the sidebar; full-width felt
       overcooked. 1320 + auto margins lines this up with every other page. */
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

.fl-mode .cal-toolbar {
    padding: 6px 0 18px;
    border-bottom: 1px solid var(--fl-card-border);
    margin-bottom: 16px;
    gap: 16px;
}
.fl-mode .cal-toolbar-title {
    font-family: var(--fl-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
    /* Drop the base 200px min-width — the date is now first and the nav
       sits right next to it; we want the arrows hugging the title, not
       parked behind a 200px gutter. */
    min-width: 0;
}
.fl-mode .cal-toolbar-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    font-weight: 600;
}
.fl-mode .cal-toolbar-btn:hover {
    background: var(--fl-neutral-100);
    border-color: var(--fl-neutral-400);
    color: var(--fl-accent);
}
.fl-mode .cal-toolbar-btn.active {
    background: var(--fl-accent-tint);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}
.fl-mode .cal-add-event-btn,
.fl-mode .cal-edit-btn {
    background: var(--fl-accent) !important;
    border-color: var(--fl-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.fl-mode .cal-add-event-btn:hover,
.fl-mode .cal-edit-btn:hover {
    background: var(--fl-accent-dark) !important;
    border-color: var(--fl-accent-dark) !important;
}

/* Settings gear in editorial mode — mirrors the toolbar button treatment
   so it reads as a peer of "+ Add Event" rather than a foreign element. */
.fl-mode .cal-settings-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
}
.fl-mode .cal-settings-btn:hover {
    background: var(--fl-neutral-100);
    border-color: var(--fl-neutral-400);
    color: var(--fl-accent);
}

/* Legend */
.fl-mode .cal-legend {
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--fl-card-border-soft);
    margin-bottom: 14px;
}
.fl-mode .cal-legend-item {
    color: var(--fl-ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

/* Week/day grid background */
.fl-mode .cal-week-wrapper,
.fl-mode .cal-month-grid,
.fl-mode .cal-day-wrapper {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    overflow: hidden;
}
.fl-mode .cal-week-header-day,
.fl-mode .cal-week-header-gutter {
    background: var(--fl-neutral-50);
    color: var(--fl-ink-meta);
    font-weight: 600;
    letter-spacing: 0.8px;
    font-size: 10px;
    text-transform: uppercase;
}
.fl-mode .cal-week-header-day .cal-week-date-num {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}
.fl-mode .cal-week-header-day.cal-today-col .cal-week-date-num {
    color: var(--fl-accent);
    background: var(--fl-accent-tint);
}
.fl-mode .cal-week-gutter-label,
.fl-mode .cal-week-hour-line,
.fl-mode .cal-week-half-line {
    color: var(--fl-ink-mute);
    border-color: var(--fl-card-border-soft);
}
.fl-mode .cal-week-col { border-color: var(--fl-card-border-soft); }

/* Event blocks — make them pastel (soft tint + darker readable text),
   matching the sidebar class pills. The inline `background:` is emitted
   by calendar.js as `--cls-c-light` / `--cls-c` via CSS vars (see the
   small change in calendar.js). We leave a fallback in case the vars
   are missing. */
.fl-mode .cal-week-event,
.fl-mode .cal-month-event,
.fl-mode .cal-allday-event {
    background: var(--cls-c-light, rgba(47, 104, 68, 0.12)) !important;
    color: var(--cls-c, var(--fl-accent)) !important;
    border: 1px solid color-mix(in srgb, var(--cls-c, var(--fl-accent)) 25%, transparent) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-weight: 600;
}
.fl-mode .cal-week-event:hover,
.fl-mode .cal-month-event:hover,
.fl-mode .cal-allday-event:hover {
    background: color-mix(in srgb, var(--cls-c-light, rgba(47, 104, 68, 0.12)) 88%, #000) !important;
}
.fl-mode .cal-week-event-title,
.fl-mode .cal-week-event-time {
    color: inherit;
}
.fl-mode .cal-event-lesson-badge {
    background: rgba(255, 255, 255, 0.65);
    color: inherit;
}

/* Lesson link chip + action button for recurring schedule occurrences. In
   facelift the block background is a pastel tint and the text is the full
   class color — so the chip needs a slightly more opaque white to keep the
   code/status readable, and the action button inverts to the strong color. */
.fl-mode .cal-sched-chip {
    background: rgba(255, 255, 255, 0.6);
    color: inherit;
}
.fl-mode .cal-sched-needs-summary .cal-sched-chip {
    background: color-mix(in srgb, #f59e0b 22%, #fff);
    color: #92400e;
}
.fl-mode .cal-sched-finalized .cal-sched-chip {
    background: rgba(255, 255, 255, 0.45);
    color: inherit;
    opacity: 0.85;
}
.fl-mode .cal-sched-action-btn {
    background: var(--cls-c, var(--fl-accent)) !important;
    color: #fff !important;
    border: none;
}
.fl-mode .cal-sched-action-btn:hover {
    filter: brightness(0.95);
}
.fl-mode .cal-sched-link-btn {
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    border: 1px dashed color-mix(in srgb, var(--cls-c, var(--fl-accent)) 45%, transparent);
}
.fl-mode .cal-sched-link-btn:hover {
    background: rgba(255, 255, 255, 0.75);
}
.fl-mode .cal-week-now-line { background: var(--fl-accent); }
.fl-mode .cal-week-now-line::before,
.fl-mode .cal-week-now-line::after { background: var(--fl-accent); }

/* Week badge */
.fl-mode .cal-week-badge {
    border: 1px solid var(--fl-neutral-300);
    background: var(--fl-card-bg);
    color: var(--fl-ink-soft);
    font-weight: 600;
}
.fl-mode .cal-week-a { background: var(--fl-accent-tint); color: var(--fl-accent); border-color: transparent; }
.fl-mode .cal-week-b { background: var(--fl-info-tint);  color: var(--fl-info);   border-color: transparent; }

/* Weekends toggle */
.fl-mode .cal-weekends-toggle { color: var(--fl-ink-soft); font-weight: 500; }

/* ==========================================================
   CLASS PAGES — shared container, title, banner, panels
   ========================================================== */

/* Eat the narrow max-width when we're showing editorial pages.
   Bottom padding (24px) matches the home page's .th-page so the cards
   sit the same distance from the viewport edge as the agenda card. */
.fl-mode #placeholderContent {
    max-width: 1240px;
    padding: 16px 8px 24px;
}
/* Drop .main-content's own 12px bottom padding for class pages — the
   24px on #placeholderContent above already supplies the breathing room. */
.main-content.fl-mode {
    padding-bottom: 0 !important;
}

/* Editorial eyebrow — any title element with data-eyebrow gets an
   uppercase label rendered above it. Used on dashboard/lesson plans/
   gradebook/roster/analytics page titles so the class name stays clean
   while the page kind shows as a small label. */
.fl-mode [data-eyebrow]::before {
    content: attr(data-eyebrow);
    display: block;
    font-family: 'Arial', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.4px;
    color: var(--fl-eyebrow);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Big italic title used on every class page. Reuses the JS-emitted
   `<h1 class="page-title">ClassName</h1>` markup from dashboard,
   analytics, gradebook. We also wrap the existing header with `.fl-hero`
   via JS (class-placeholder-app.js). */
.fl-mode .page-title,
.fl-mode .fl-hero h1,
.fl-mode .fl-hero h2 {
    font-family: var(--fl-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-mode .title-actions-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 4px 20px;
    border-bottom: 1px solid var(--fl-card-border);
    margin-bottom: 20px;
}

/* ----------------------------------------------------------
   DASHBOARD  (class.html?page=dashboard)
   ---------------------------------------------------------- */
.fl-mode .ph-dashboard .title-actions-row { border-bottom: none; padding-bottom: 4px; margin-bottom: 14px; }

.fl-mode .ph-lesson-banner {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    padding: 18px 22px;
    margin-bottom: 18px;
}
.fl-mode .ph-banner-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--fl-eyebrow);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.fl-mode .ph-banner-has-lesson .ph-banner-date { color: var(--fl-accent); }
.fl-mode .ph-banner-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
    margin: 0 0 4px;
}
.fl-mode .ph-banner-meta { color: var(--fl-ink-meta); font-size: 12px; letter-spacing: 0.1px; }

.fl-mode .ph-banner-btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: 1px solid var(--fl-neutral-300);
    background: var(--fl-card-bg);
    color: var(--fl-ink-soft);
    padding: 8px 14px;
    transition: all 0.15s;
}
.fl-mode .ph-banner-btn:hover {
    border-color: var(--fl-accent);
    color: var(--fl-accent);
    background: var(--fl-accent-tint-soft);
}
.fl-mode .ph-banner-btn-primary {
    background: var(--fl-accent);
    border-color: var(--fl-accent);
    color: #fff;
}
.fl-mode .ph-banner-btn-primary:hover {
    background: var(--fl-accent-dark);
    border-color: var(--fl-accent-dark);
    color: #fff;
}
.fl-mode .ph-banner-btn-secondary {
    background: var(--fl-card-bg);
    border-color: var(--fl-neutral-300);
    color: var(--fl-ink-soft);
}
.fl-mode .ph-banner-btn-secondary:hover { border-color: var(--fl-accent); color: var(--fl-accent); }
.fl-mode .ph-banner-btn-finalize { background: var(--fl-accent); border-color: var(--fl-accent); color: #fff; }
.fl-mode .ph-banner-btn-finalize:hover { background: var(--fl-accent-dark); }
.fl-mode .ph-banner-btn-today { background: var(--fl-info); border-color: var(--fl-info); color: #fff; }
.fl-mode .ph-banner-btn-monitor { border-color: var(--fl-neutral-300); }
.fl-mode .ph-banner-nav-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    color: var(--fl-ink-soft);
}
.fl-mode .ph-banner-nav-btn:hover:not(.disabled) {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* Panels */
.fl-mode .ph-panel {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
}

/* Pin class pages to the full viewport height so the bottom of the cards
   meets the bottom of the viewport — same feel as the home page's
   "Today's agenda" panel.
   .main-content is position:fixed top:48 bottom:0 (shared/layout.css), so
   it has a definite height. We chain height:100% from there down through
   #placeholderContent → page wrapper → inner panels. The previous attempt
   used flex:1 1 auto + min-height: calc(100vh - 116px), but body's
   zoom: 0.75 made 100vh computations unreliable and the panels were
   collapsing to content height.
   Notebook uses .notebook-mode (not .fl-mode) and gets its own full-bleed
   counter-zoom rules, so it is intentionally untouched. */
.main-content.fl-mode {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.fl-mode #placeholderContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-self: center !important;
    width: 100%;
    max-width: 1200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Each page's outer wrapper fills #placeholderContent vertically.
   Covers: dashboard, gradebook, analytics, lesson-plans (real + units +
   ghost-CTA), and roster. */
.fl-mode #placeholderContent > .ph-dashboard,
.fl-mode #placeholderContent > .ca-wrap,
.fl-mode #placeholderContent > .gb3-wrap,
.fl-mode #placeholderContent > .gh-wrapper,
.fl-mode #placeholderContent > .lp-real-view,
.fl-mode #placeholderContent > .lp-units-view {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    width: 100% !important;
}
/* Roster lays out as two siblings inside #placeholderContent (header +
   content wrapper); pin the content wrapper. */
.fl-mode #placeholderContent > .roster-content-wrapper {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

/* Dashboard inner chain — pure flex from .ph-dashboard down to .ph-panel. */
.fl-mode .ph-dashboard {
    display: flex !important;
    flex-direction: column !important;
}
.fl-mode .ph-dash-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
}
.fl-mode .ph-dash-columns {
    display: flex !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden;
}
.fl-mode .ph-dash-col {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
.fl-mode .ph-dash-col .ph-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden;
}

/* Toggle bar (Attendance/Insights · Overview/Submissions) */
.fl-mode .ph-toggle-bar {
    border-bottom: 1px solid var(--fl-card-border);
    background: var(--fl-neutral-200);
    border-top-left-radius: var(--fl-radius);
    border-top-right-radius: var(--fl-radius);
}
.fl-mode .ph-toggle-btn {
    color: var(--fl-ink-meta);
    font-weight: 600;
    letter-spacing: 0.3px;
    background: transparent;
    border-bottom: 2px solid transparent;
}
.fl-mode .ph-toggle-btn:hover { color: var(--fl-accent); background: rgba(255,255,255,0.4); }
.fl-mode .ph-toggle-btn.active {
    color: var(--fl-accent);
    border-bottom-color: var(--fl-accent);
    background: var(--fl-card-bg);
}

.fl-mode .ph-att-info-bar {
    background: transparent;
    border-bottom: 1px solid var(--fl-card-border-soft);
}
.fl-mode .ph-att-info-date {
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--fl-eyebrow);
}
.fl-mode .ph-banner-has-lesson .ph-att-info-date,
.fl-mode .ph-att-info-date[style*="#6366f1"] { color: var(--fl-accent) !important; }
.fl-mode .ph-att-info-lesson { color: var(--fl-ink-soft); }

.fl-mode .ph-select-all-btn {
    border: 1px solid var(--fl-neutral-300);
    background: var(--fl-card-bg);
    color: var(--fl-ink-soft);
    font-weight: 600;
}
.fl-mode .ph-select-all-btn:hover { border-color: var(--fl-accent); color: var(--fl-accent); }

/* Attendance rows */
.fl-mode .ph-att-row { border-bottom: 1px solid var(--fl-card-border-soft); }
.fl-mode .ph-att-row:hover { background: var(--fl-neutral-50); }
.fl-mode .ph-att-name, .fl-mode .ph-att-name.student-name-clickable { color: var(--fl-ink); }
.fl-mode .ph-att-name.student-name-clickable:hover { color: var(--fl-accent); }
.fl-mode .ph-att-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    color: var(--fl-ink-soft);
    font-weight: 700;
}
.fl-mode .ph-att-btn:hover { border-color: var(--fl-accent); color: var(--fl-accent); }
.fl-mode .ph-att-present.active, .fl-mode .ph-att-btn.active.ph-att-present {
    background: var(--fl-accent-tint); color: var(--fl-accent); border-color: var(--fl-accent);
}
.fl-mode .ph-att-absent.active, .fl-mode .ph-att-btn.active.ph-att-absent {
    background: var(--fl-danger-tint); color: var(--fl-danger); border-color: var(--fl-danger);
}
.fl-mode .ph-att-late.active, .fl-mode .ph-att-btn.active.ph-att-late {
    background: var(--fl-warn-tint); color: var(--fl-warn); border-color: var(--fl-warn);
}
.fl-mode .ph-att-excused.active, .fl-mode .ph-att-btn.active.ph-att-excused {
    background: var(--fl-info-tint); color: var(--fl-info); border-color: var(--fl-info);
}

/* Empty tab hero */
.fl-mode .ph-empty-tab { background: transparent; }
.fl-mode .ph-empty-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: var(--fl-ink);
    letter-spacing: -0.01em;
}
.fl-mode .ph-empty-desc { color: var(--fl-ink-soft); font-size: 13px; line-height: 1.55; }
.fl-mode .ph-empty-tab .btn-primary {
    background: var(--fl-accent);
    border-radius: 8px;
    font-weight: 600;
}
.fl-mode .ph-empty-tab .btn-primary:hover { background: var(--fl-accent-dark); }

/* Dashboard column resizer */
.fl-mode .ph-col-resizer:hover { background: var(--fl-accent); }

/* ----------------------------------------------------------
   LESSON PLANS  (class.html?page=lesson-plans)
   ---------------------------------------------------------- */
.fl-mode .lp-real-view { padding: 0; }

.fl-mode .lp-real-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 4px 22px;
    border-bottom: 1px solid var(--fl-card-border);
    margin-bottom: 22px;
}
.fl-mode .lp-real-header h2 {
    font-family: var(--fl-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-mode .lp-real-header-actions { display: flex; gap: 8px; }
.fl-mode .lp-edit-curriculum-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
}
.fl-mode .lp-edit-curriculum-btn:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* Unit card */
.fl-mode .lp-real-unit {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}

.fl-mode .lp-real-unit-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: transparent;
    border-bottom: 1px solid var(--fl-card-border);
    cursor: default;
}
.fl-mode .lp-real-unit-header.active { background: transparent; }

/* Big editorial "01 / 02 / 03" unit number — injected via ::before
   on the title span so we don't have to change the JS markup. The
   unit number is re-derived from data-unit-num. */
.fl-mode .lp-real-unit-title {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}
.fl-mode .lp-real-unit-title::before {
    content: attr(data-unit-num);
    display: inline-block;
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fl-accent);
    min-width: 68px;
    flex-shrink: 0;
}
.fl-mode .lp-real-unit-title em { font-style: italic; }

/* If JS hasn't set data-unit-num, hide the numeral placeholder */
.fl-mode .lp-real-unit-title:not([data-unit-num])::before { display: none; }

/* Unit actions (Assessments, Edit Unit Plans, kebab) */
.fl-mode .lp-real-unit-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fl-mode .unit-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.fl-mode .unit-btn:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}
.fl-mode .lp-unit-settings { color: var(--fl-ink-mute); }
.fl-mode .lp-unit-settings:hover { color: var(--fl-accent); }

/* Unit body + table */
.fl-mode .lp-real-unit-content { padding: 0; background: transparent; }
.fl-mode .lp-real-unit-content.open { padding: 0; }

.fl-mode .lp-real-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
}
.fl-mode .lp-real-table thead { background: transparent; }
.fl-mode .lp-real-table thead th {
    padding: 10px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fl-ink-mute);
    border-bottom: 1px solid var(--fl-card-border-soft);
    background: transparent;
}
.fl-mode .lp-real-table thead th.lp-col-select { width: 36px; }
.fl-mode .lp-real-table thead th.lp-col-num { width: 48px; }
.fl-mode .lp-real-table tbody tr.lp-real-lesson-row {
    border-bottom: 1px solid var(--fl-card-border-soft);
    transition: background-color 0.12s;
}
.fl-mode .lp-real-table tbody tr.lp-real-lesson-row:last-child { border-bottom: none; }
.fl-mode .lp-real-table tbody tr.lp-real-lesson-row:hover { background: var(--fl-neutral-50); }
.fl-mode .lp-real-table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: var(--fl-ink-soft);
    border: none;
}
/* Lesson # column — compact "01 / 02 / 03" indicators */
.fl-mode .lp-real-table td.lp-col-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fl-ink-mute);
}
/* Selected-row tint in facelift */
.fl-mode .lp-real-table tr.lp-real-lesson-row.is-selected {
    background: var(--fl-accent-soft, #ecfdf5);
}

.fl-mode .lp-real-lesson-title {
    font-weight: 600;
    color: var(--fl-ink) !important;
    font-size: 14px;
}
.fl-mode .lp-real-lesson-date {
    color: var(--fl-ink-meta);
    font-size: 12px;
    white-space: nowrap;
}
.fl-mode .lp-class-badge {
    background: transparent;
    color: var(--fl-ink-meta);
    font-weight: 500;
    padding: 0;
    margin: 0 6px 0 0;
}

/* Status badges → pills */
.fl-mode .lp-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--fl-radius-pill);
    background: var(--fl-neutral-100);
    color: var(--fl-ink-soft);
    border: none;
    text-transform: none;
}
.fl-mode .lp-status-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.fl-mode .lp-status-badge.completed,
.fl-mode .lp-status-badge.finalized { background: var(--fl-accent-tint); color: var(--fl-accent); }
.fl-mode .lp-status-badge.active    { background: var(--fl-info-tint);   color: var(--fl-info); }
.fl-mode .lp-status-badge.pending   { background: var(--fl-warn-tint);   color: var(--fl-warn); }
.fl-mode .lp-status-badge.archived  { background: var(--fl-neutral-100); color: var(--fl-ink-mute); }
.fl-mode .lp-status-badge.draft     { background: var(--fl-neutral-100); color: var(--fl-ink-meta); }

/* Completed / finalized rows: strikethrough title + softened text */
.fl-mode .lp-real-lesson-row.fl-row-done .lp-real-lesson-title {
    text-decoration: line-through;
    text-decoration-color: rgba(26, 26, 26, 0.35);
    color: var(--fl-ink-mute) !important;
    font-weight: 500;
}
.fl-mode .lp-real-lesson-row.fl-row-done td { color: var(--fl-ink-mute); }

/* Today row: soft green tint */
.fl-mode .lp-real-lesson-row.fl-row-today { background: var(--fl-accent-tint-soft); }
.fl-mode .lp-real-lesson-row.fl-row-today:hover { background: var(--fl-accent-tint); }
.fl-mode .lp-real-lesson-row.fl-row-today .lp-real-lesson-title { color: var(--fl-accent) !important; font-weight: 700; }

/* Adjusted indicator */
.fl-mode .lp-diff-indicator {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    background: var(--fl-neutral-100); color: transparent; font-size: 10px;
    line-height: 16px; text-align: center;
}
.fl-mode .lp-diff-indicator.lp-diff-yes { background: var(--fl-accent-tint); color: var(--fl-accent); }
.fl-mode .lp-diff-indicator.lp-diff-no  { background: var(--fl-danger-tint); color: var(--fl-danger); }
.fl-mode .lp-diff-indicator.lp-diff-empty { background: transparent; border: 1px solid var(--fl-card-border); }

/* Add/View links */
.fl-mode .lp-lesson-link { color: var(--fl-accent); font-weight: 600; }
.fl-mode .lp-lesson-link:hover { color: var(--fl-accent-dark); text-decoration: underline; }
.fl-mode .lp-real-empty { color: var(--fl-ink-mute); padding: 18px 16px; font-style: italic; }
.fl-mode .lp-lesson-kebab { color: var(--fl-ink-mute); }
.fl-mode .lp-lesson-kebab:hover { color: var(--fl-accent); }

/* Bottom "Create New Lesson" / "Create Multi Lessons" bar */
.fl-mode .lp-unit-card-buttons,
.fl-mode .lp-real-unit-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--fl-card-border-soft);
    display: flex;
    gap: 10px;
    justify-content: center;
    background: var(--fl-neutral-50);
}
.fl-mode .lp-unit-add-lesson-btn,
.fl-mode .lp-unit-batch-btn,
.fl-mode .lp-create-lesson-btn,
.fl-mode .lp-create-batch-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}
.fl-mode .lp-unit-add-lesson-btn:hover,
.fl-mode .lp-unit-batch-btn:hover,
.fl-mode .lp-create-lesson-btn:hover,
.fl-mode .lp-create-batch-btn:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* "Add New Unit" / "Add Multi Unit" centered bar */
.fl-mode .lp-add-unit-btn,
.fl-mode .lp-add-multi-unit-btn {
    background: var(--fl-card-bg);
    border: 1px dashed var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 600;
}
.fl-mode .lp-add-unit-btn:hover,
.fl-mode .lp-add-multi-unit-btn:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* ----------------------------------------------------------
   ROSTER  (class.html?page=roster)
   ---------------------------------------------------------- */
.fl-mode .roster-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 4px 22px;
    border-bottom: 1px solid var(--fl-card-border);
    margin-bottom: 22px;
    background: transparent;
}
.fl-mode .roster-title-row h1 {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--fl-ink);
    margin: 0;
}
.fl-mode .roster-title-row p {
    color: var(--fl-ink-meta);
    font-size: 12px;
    letter-spacing: 0.2px;
    margin-top: 6px;
}
.fl-mode .roster-actions { display: flex; gap: 8px; align-items: center; }
.fl-mode .add-student-btn {
    background: var(--fl-card-bg);
    color: var(--fl-ink-soft);
    border: 1px solid var(--fl-neutral-300);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
}
.fl-mode .add-student-btn:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}
/* Keep the primary "Add Students" button green */
.fl-mode .roster-actions > .add-student-btn:last-of-type,
.fl-mode .roster-actions .add-student-btn:not(.exd-open-btn):not(.roster-update-btn) {
    background: var(--fl-accent);
    border-color: var(--fl-accent);
    color: #fff;
}
.fl-mode .roster-actions > .add-student-btn:last-of-type:hover,
.fl-mode .roster-actions .add-student-btn:not(.exd-open-btn):not(.roster-update-btn):hover {
    background: var(--fl-accent-dark);
    border-color: var(--fl-accent-dark);
    color: #fff;
}
.fl-mode .roster-update-btn {
    background: var(--fl-info); border-color: var(--fl-info);
    border-radius: 8px; font-weight: 600;
}
.fl-mode .roster-settings-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    width: 36px; height: 36px;
}
.fl-mode .roster-settings-btn:hover { border-color: var(--fl-accent); color: var(--fl-accent); }

/* Roster page scroll: #placeholderContent is a flex column whose children
   default to flex-shrink: 1, so when the table is taller than the viewport
   they squish instead of overflowing — and overflow-y on #placeholderContent
   never engages. Pin the title row, give the table-wrapper the remaining
   space with overflow-y:auto, so only the table scrolls and the page
   header stays visible. */
.fl-mode .roster-title-row { flex-shrink: 0; }
.fl-mode .roster-content-wrapper {
    background: transparent;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.fl-mode .roster-container {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    /* overflow:auto so the table scrolls inside the rounded card.
       overflow:hidden here clipped tall rosters because the base
       layout sizes .roster-container to fill its flex parent — the
       wrapper's outer overflow-y:auto then had nothing to scroll
       (the container was already full-height and just clipping). */
    overflow: auto;
}
.fl-mode .roster-table { background: transparent; }
.fl-mode .roster-table thead { background: var(--fl-neutral-50); }
.fl-mode .roster-table thead th {
    background: var(--fl-neutral-50);
    color: var(--fl-eyebrow);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fl-card-border);
    padding: 12px 14px;
}
.fl-mode .roster-table tbody tr {
    border-bottom: 1px solid var(--fl-card-border-soft);
}
.fl-mode .roster-table tbody tr:hover { background: var(--fl-neutral-50); }
.fl-mode .roster-table td {
    padding: 12px 14px;
    color: var(--fl-ink);
    font-size: 13px;
}
.fl-mode .roster-table td .student-name-clickable,
.fl-mode .roster-table td.grade-high { color: var(--fl-accent); }
.fl-mode .roster-table td.grade-mid  { color: var(--fl-warn); }
.fl-mode .roster-table td.grade-low  { color: var(--fl-danger); }
.fl-mode .roster-table td .student-name-clickable:hover { color: var(--fl-accent-dark); }

/* ----------------------------------------------------------
   GRADEBOOK  (class.html?page=gradebook)
   Overrides JS-injected .gb3-* inline styles using !important.
   ---------------------------------------------------------- */
.fl-mode .gb3-titlebar {
    padding: 10px 4px 22px;
    border-bottom: 1px solid var(--fl-card-border) !important;
    margin-bottom: 20px !important;
}
.fl-mode .gb3-title {
    font-family: var(--fl-serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 40px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
    color: var(--fl-ink) !important;
}
.fl-mode .gb3-live {
    color: var(--fl-accent) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase;
}
.fl-mode .gb3-wrap {
    border: 1px solid var(--fl-card-border) !important;
    border-radius: var(--fl-radius) !important;
    background: var(--fl-card-bg) !important;
    box-shadow: var(--fl-card-shadow) !important;
}
.fl-mode .gb3 th,
.fl-mode .gb3 td { border-color: var(--fl-card-border-soft) !important; }
.fl-mode .gb3-col-name,
.fl-mode .gb3-col-avg,
.fl-mode thead .gb3-col-name,
.fl-mode thead .gb3-col-avg,
.fl-mode .gb3-class-avg .gb3-col-name,
.fl-mode .gb3-class-avg .gb3-col-avg {
    background: var(--fl-neutral-50) !important;
    border-right-color: var(--fl-card-border) !important;
}
.fl-mode .gb3-lh {
    background: var(--fl-accent-tint-soft) !important;
    color: var(--fl-accent) !important;
    border-bottom-color: var(--fl-card-border-soft) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}
.fl-mode .gb3-lh-first { border-left-color: var(--fl-accent) !important; }
.fl-mode .gb3-sh {
    background: var(--fl-neutral-50) !important;
    color: var(--fl-eyebrow) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
}
.fl-mode .gb3-sh-first { border-left-color: var(--fl-accent-tint) !important; }
.fl-mode .gb3-fin-btn {
    background: var(--fl-accent) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}
.fl-mode .gb3-fin-btn:hover { background: var(--fl-accent-dark) !important; }
.fl-mode .gb3-fin-badge {
    background: var(--fl-accent-tint) !important;
    color: var(--fl-accent) !important;
}
.fl-mode .gb3-lesson-link { color: var(--fl-accent) !important; }
.fl-mode .gb3-lesson-link:hover { color: var(--fl-accent-dark) !important; }
.fl-mode .gb3-name { color: var(--fl-accent) !important; }
.fl-mode .gb3-cell-first { border-left-color: var(--fl-accent-tint) !important; }
.fl-mode .gb3-score.s-high { color: var(--fl-accent) !important; }
.fl-mode .gb3-score.s-mid  { color: var(--fl-warn) !important; }
.fl-mode .gb3-score.s-low  { color: var(--fl-danger) !important; }
.fl-mode .gb3-score.s-none { color: var(--fl-ink-mute) !important; }
.fl-mode .gb3-override { color: var(--fl-ink-meta) !important; }
.fl-mode .gb3-grading  { color: var(--fl-info) !important; }

/* Older .gb-* styles (fallback path) */
.fl-mode .gb-scroll-wrap {
    border: 1px solid var(--fl-card-border);
    background: var(--fl-card-bg);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
}
.fl-mode .gb-corner,
.fl-mode .gb-lesson-header,
.fl-mode .gb-asgn-header { background: var(--fl-neutral-50) !important; color: var(--fl-eyebrow) !important; }

/* ----------------------------------------------------------
   ANALYTICS  (class.html?page=analytics)
   ---------------------------------------------------------- */
.fl-mode .ca-wrap {
    padding: 0;
    /* Stretch to viewport bottom so the columns reach the same place
       the home-page agenda card does. */
    display: flex !important;
    flex-direction: column !important;
    max-width: none !important;
    margin: 0 !important;
}
.fl-mode .ca-wrap .title-actions-row {
    flex-shrink: 0;
    border-bottom: 1px solid var(--fl-card-border);
    padding: 10px 4px 22px;
    margin-bottom: 22px;
}

/* Metric cards */
.fl-mode .ca-cards {
    display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;
}
.fl-mode .ca-card {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    padding: 16px 18px;
    flex: 1 1 180px;
}
.fl-mode .ca-card-label {
    color: var(--fl-eyebrow);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.fl-mode .ca-card-value {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    margin: 4px 0 2px;
    letter-spacing: -0.01em;
}
.fl-mode .ca-card-sub { color: var(--fl-ink-meta); font-size: 12px; }

/* Cards row pinned at top */
.fl-mode .ca-cards { flex-shrink: 0; }

/* Columns fill the remaining space all the way to the viewport bottom.
   Drops the legacy min-height: calc(100vh - 300px) which mis-computed
   under body's zoom: 0.75 and left dead space. */
.fl-mode .ca-columns {
    gap: 18px;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    align-items: stretch !important;
}
.fl-mode .ca-col {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-card-shadow);
    overflow: hidden;
    min-height: 0 !important;
}
.fl-mode .ca-col .ph-panel {
    flex: 1 1 0% !important;
    min-height: 0 !important;
}
.fl-mode .ca-col-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    color: var(--fl-ink);
    padding: 16px 18px 8px;
    border-bottom: 1px solid var(--fl-card-border-soft);
    letter-spacing: -0.01em;
}
.fl-mode .ca-section-title {
    color: var(--fl-eyebrow);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.fl-mode .ca-row {
    border-bottom: 1px solid var(--fl-card-border-soft);
    padding: 10px 0;
}
.fl-mode .ca-row-name { color: var(--fl-ink); font-weight: 600; }
.fl-mode .ca-row-name:hover { color: var(--fl-accent); }
.fl-mode .ca-tag {
    background: var(--fl-neutral-100);
    color: var(--fl-ink-soft);
    border-radius: var(--fl-radius-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
}
.fl-mode .ca-student-select-bar {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border-soft);
    padding: 12px 16px;
}
.fl-mode .ca-select {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    border-radius: 8px;
    color: var(--fl-ink);
    font-weight: 500;
}
.fl-mode .ca-open-profile-btn {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    border-radius: 8px;
    font-weight: 600;
}
.fl-mode .ca-open-profile-btn:hover {
    border-color: var(--fl-accent); color: var(--fl-accent); background: var(--fl-accent-tint-soft);
}
.fl-mode .ca-mini-card {
    background: var(--fl-neutral-50);
    border: 1px solid var(--fl-card-border-soft);
    border-radius: var(--fl-radius-sm);
    padding: 12px 14px;
}
.fl-mode .ca-mini-label {
    color: var(--fl-eyebrow); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.fl-mode .ca-mini-value {
    font-family: var(--fl-serif); font-style: italic; font-size: 22px; margin-top: 2px;
}
.fl-mode .ca-empty-title {
    font-family: var(--fl-serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--fl-ink);
}
.fl-mode .ca-empty-desc { color: var(--fl-ink-soft); font-size: 13px; line-height: 1.55; }

/* ----------------------------------------------------------
   PAGE TABS  (shared across class pages that use .page-tabs)
   ---------------------------------------------------------- */
.fl-mode .page-tab {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-meta);
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.8px;
}
.fl-mode .page-tab:hover {
    background: var(--fl-accent-tint-soft);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}
.fl-mode .page-tab.active {
    background: var(--fl-accent-tint);
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* Generic placeholder header (used on the ghost empty states) */
.fl-mode .placeholder-header h1 {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    color: var(--fl-ink);
    letter-spacing: -0.015em;
}
.fl-mode .placeholder-header p { color: var(--fl-ink-meta); font-size: 13px; }

/* ==========================================================
   MODALS — the overlay chrome is global (shared across pages
   and not gated by .fl-mode on .main-content). We scope with
   body.fl-modals-on so we can opt in cleanly.
   ========================================================== */
body.fl-modals-on {
    --fl-bg: #faf8f3;
    --fl-card-bg: #fff;
    --fl-card-border: #ece7dd;
    --fl-card-border-soft: #f0ece3;
    --fl-card-shadow: 0 1px 2px rgba(40, 30, 10, 0.02);
    --fl-ink: #1a1a1a;
    --fl-ink-soft: #4b5563;
    --fl-ink-meta: #6b7280;
    --fl-ink-mute: #9aa0a6;
    --fl-eyebrow: #8a7f6a;
    --fl-accent: #2f6844;
    --fl-accent-dark: #264f35;
    --fl-accent-tint: #e8f2ec;
    --fl-accent-tint-soft: #f0f6f1;
    --fl-warn: #b96a1e;
    --fl-warn-tint: #fbe9d2;
    --fl-danger: #a23838;
    --fl-danger-tint: #f6dede;
    --fl-info: #3b5b8a;
    --fl-info-tint: #e2e9f3;
    --fl-neutral-50: #faf8f3;
    --fl-neutral-100: #f4f1e8;
    --fl-neutral-200: #ece7dd;
    --fl-neutral-300: #d6d0c2;
    --fl-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
}

/* ---- Shared modal chrome (student profile, lesson detail, unit plan)
   All three use the same `.modal-container` / `.modal-header` / `.modal-tabs`
   primitives from shared/layout.css. Scoped loosely so we don't fight
   too hard with per-modal css. ---- */
body.fl-modals-on .modal-container {
    background: var(--fl-card-bg);
    border: 1px solid var(--fl-card-border);
    box-shadow: 0 12px 40px rgba(40, 30, 10, 0.14);
}
body.fl-modals-on .modal-header {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border);
}
body.fl-modals-on .modal-header h2,
body.fl-modals-on #studentModal .sm-name-clickable,
body.fl-modals-on .lesson-detail-modal .modal-header h2 {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}
body.fl-modals-on .modal-header-subtitle {
    color: var(--fl-ink-meta);
    font-size: 12px;
    letter-spacing: 0.2px;
}
body.fl-modals-on .modal-tabs {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border);
}
body.fl-modals-on .modal-tab {
    color: var(--fl-ink-meta);
    font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 2px solid transparent;
}
body.fl-modals-on .modal-tab:hover { color: var(--fl-accent); }
body.fl-modals-on .modal-tab.active {
    color: var(--fl-accent);
    border-bottom-color: var(--fl-accent);
    background: transparent;
}
body.fl-modals-on .modal-header-actions .ld-save-btn,
body.fl-modals-on .modal-header-actions .up-save-btn {
    background: var(--fl-accent);
    border-color: var(--fl-accent);
}
body.fl-modals-on .modal-header-actions .ld-save-btn:hover,
body.fl-modals-on .modal-header-actions .up-save-btn:hover {
    background: var(--fl-accent-dark);
    border-color: var(--fl-accent-dark);
}

/* Student profile modal extras — the name row uses .sm-nav-header */
body.fl-modals-on #studentModal .sm-nav-header {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border);
}
body.fl-modals-on #studentModal .sm-nav-btn:hover {
    border-color: var(--fl-accent);
    color: var(--fl-accent);
}

/* ---- Class config modal (.ccm-*) ---- */
body.fl-modals-on .ccm-modal { background: var(--fl-card-bg); }
body.fl-modals-on .ccm-header {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border);
}
body.fl-modals-on .ccm-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--fl-ink);
}
body.fl-modals-on .ccm-tabs { background: var(--fl-neutral-50); border-bottom: 1px solid var(--fl-card-border); }
body.fl-modals-on .ccm-tab.active { color: var(--fl-accent); border-bottom-color: var(--fl-accent); }

/* ---- Add / Import students modal (.imp-*) and External data (.exd-*) ---- */
body.fl-modals-on .imp-modal,
body.fl-modals-on .exd-modal { background: var(--fl-card-bg); }
body.fl-modals-on .imp-header,
body.fl-modals-on .exd-header {
    background: var(--fl-neutral-50);
    border-bottom: 1px solid var(--fl-card-border);
}
body.fl-modals-on .imp-header-title,
body.fl-modals-on .exd-header-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--fl-ink);
}
body.fl-modals-on .imp-chooser-title {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    color: var(--fl-ink);
}
body.fl-modals-on .imp-chooser-card:hover,
body.fl-modals-on .exd-chooser-card:hover {
    border-color: var(--fl-accent);
    background: var(--fl-accent-tint-soft);
}
body.fl-modals-on .imp-btn-primary,
body.fl-modals-on .exd-btn-primary {
    background: var(--fl-accent);
    border-color: var(--fl-accent);
}
body.fl-modals-on .imp-btn-primary:hover,
body.fl-modals-on .exd-btn-primary:hover { background: var(--fl-accent-dark); }
body.fl-modals-on .imp-toolbar-btn,
body.fl-modals-on .exd-toolbar-btn {
    border: 1px solid var(--fl-neutral-300);
    color: var(--fl-ink-soft);
    background: var(--fl-card-bg);
}
body.fl-modals-on .imp-toolbar-btn:hover,
body.fl-modals-on .exd-toolbar-btn:hover {
    border-color: var(--fl-accent); color: var(--fl-accent);
}

/* ---- Generic accent unification for modals + pages ---- */
.fl-mode .btn-primary,
body.fl-modals-on .btn-primary {
    background-color: var(--fl-accent) !important;
    border-radius: 8px;
}
.fl-mode .btn-primary:hover,
body.fl-modals-on .btn-primary:hover {
    background-color: var(--fl-accent-dark) !important;
}