/* ============================================
   My Teacher Planbook — shared styles
   Light, professional theme in the brand palette (electric blue →
   violet → magenta, cyan highlights). Used by index.html (app shell),
   login.html, register.html, verify-email.html.
   ============================================ */

:root {
    --topbar-height: 64px;
    --sidebar-width: 264px;

    /* Brand palette — pulled from the logo (glowing book/laptop/calendar). */
    --brand-blue:      #2563EB;
    --brand-blue-deep: #1D4ED8;
    --brand-indigo:    #4F46E5;
    --brand-violet:    #7C3AED;
    --brand-cyan:      #06B6D4;
    --brand-magenta:   #D946EF;
    --brand-gradient:  linear-gradient(90deg, #2563EB 0%, #7C3AED 55%, #D946EF 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.12), rgba(217,70,239,0.12));

    /* Surfaces — light canvas */
    --bg:            #F5F7FB;
    --bg-card:       #FFFFFF;
    --bg-input:      #FFFFFF;
    --bg-secondary:  #EEF2F9;
    --surface-2:     #F8FAFC;
    --surface-overlay: rgba(15, 23, 42, 0.45);
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-glass-border: rgba(15, 23, 42, 0.08);

    --text:       #0F172A;
    --text-muted: #475569;
    --text-dim:   #94A3B8;

    --border:        rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.16);

    --danger:   #DC2626;  --danger-bg:  rgba(220, 38, 38, 0.10);
    --success:  #16A34A;  --success-bg: rgba(22, 163, 74, 0.10);
    --warning:  #D97706;  --warning-bg: rgba(217, 119, 6, 0.10);
    --info:     #2563EB;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 12px 36px rgba(15, 23, 42, 0.16);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 9999px;

    --font-display: 'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --motion-fast: 130ms;
    --motion:      220ms;
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --focus-ring:  0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* Optional dark overlay — light is the default; users opt in via the
   topbar toggle. Same token names flip so components react automatically. */
[data-theme="dark"] {
    --bg:            #0B1020;
    --bg-card:       #131C31;
    --bg-input:      #131C31;
    --bg-secondary:  #0F1730;
    --surface-2:     #18233D;
    --surface-glass: rgba(19, 28, 49, 0.72);
    --surface-glass-border: rgba(255, 255, 255, 0.06);
    --surface-overlay: rgba(0, 0, 0, 0.62);

    --text:       #F8FAFC;
    --text-muted: #94A3B8;
    --text-dim:   #64748B;

    --border:        rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
input, select, textarea { font-size: 16px; } /* iOS focus-zoom guard */

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

h1, h2, h3, .display { font-family: var(--font-display); }

a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }

.bg-glow {
    background:
        radial-gradient(circle at 12% 8%,  rgba(37, 99, 235, 0.10), transparent 42%),
        radial-gradient(circle at 88% 4%,  rgba(217, 70, 239, 0.08), transparent 40%),
        radial-gradient(circle at 70% 92%, rgba(124, 58, 237, 0.08), transparent 46%),
        var(--bg);
}

/* ===================== App shell ===================== */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 18px 0;
    border-bottom: 1px solid var(--surface-glass-border);
    background: var(--surface-glass);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 70; flex-shrink: 0;
}
.topbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--brand-gradient); opacity: 0.55; pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 40px; width: auto; display: block; }
.actions { display: flex; align-items: center; gap: 10px; }

/* Animated hamburger — three bars that morph into an X when the nav is open. */
.hamburger {
    --hb-w: 22px; --hb-h: 2.2px; --hb-gap: 5px;
    position: relative; width: 40px; height: 40px; flex-shrink: 0;
    background: transparent; border: 1px solid var(--border-strong);
    border-radius: 10px; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.hamburger:hover { background: var(--bg-secondary); border-color: var(--text-muted); }
.hamburger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hamburger .hb-box { position: relative; width: var(--hb-w); height: calc(var(--hb-h) + 2 * var(--hb-gap)); }
.hamburger .hb-line {
    position: absolute; left: 0; width: 100%; height: var(--hb-h);
    background: var(--text); border-radius: 2px;
    transition: transform var(--motion) var(--ease-out), opacity var(--motion-fast) var(--ease), background var(--motion) var(--ease);
}
.hamburger .hb-line:nth-child(1) { top: 0; }
.hamburger .hb-line:nth-child(2) { top: calc(var(--hb-gap) + var(--hb-h) / 2); transform: translateY(-50%); }
.hamburger .hb-line:nth-child(3) { bottom: 0; }
body.nav-open .hamburger .hb-line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); background: var(--brand-violet); }
body.nav-open .hamburger .hb-line:nth-child(2) { opacity: 0; }
body.nav-open .hamburger .hb-line:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); background: var(--brand-violet); }

/* Icon button (theme toggle, bell, etc.) */
.icon-btn {
    background: transparent; color: var(--text); border: 1px solid var(--border-strong);
    border-radius: 10px; width: 40px; height: 40px; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.icon-btn:hover { background: var(--bg-secondary); border-color: var(--text-muted); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: block; }

/* ===================== Buttons ===================== */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
    font-family: var(--font-body); font-weight: 700; font-size: 14px;
    border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer;
    border: 1px solid transparent; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; transition: transform var(--motion-fast) var(--ease),
    box-shadow var(--motion) var(--ease), background var(--motion) var(--ease), opacity var(--motion) var(--ease);
    text-decoration: none; line-height: 1.2;
}
.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(124, 58, 237, 0.30); text-decoration: none; }
.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-secondary); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg-secondary); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===================== Shell body + sidebar ===================== */
.shell-body { flex: 1; display: flex; position: relative; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: fixed; top: var(--topbar-height); bottom: 0; left: 0; z-index: 60;
    transform: translateX(0);
    transition: transform var(--motion) var(--ease-out);
    overflow-y: auto;
}
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 10px; gap: 8px;
}
.sidebar-logo { height: 34px; width: auto; }
.sidebar-close { display: none; background: transparent; border: 0; color: var(--text-dim);
    font-size: 20px; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; }
.sidebar-close:hover { background: var(--bg-secondary); color: var(--text); }

.sidebar-user {
    display: flex; align-items: center; gap: 10px; margin: 4px 12px 10px;
    padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.sidebar-user-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 15px;
}
.sidebar-user-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-user-name { color: var(--text); font-weight: 700; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-plan { color: var(--text-dim); font-size: 11.5px; }

.sidebar-nav { flex: 1; padding: 4px 12px 12px; }
.sidebar-section-label {
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim); font-weight: 700; padding: 14px 10px 6px;
}
.nav-btn {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: transparent; border: 0; border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 2px; cursor: pointer;
    color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
    text-align: left; transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.nav-btn:hover { background: var(--bg-secondary); color: var(--text); }
.nav-btn.active { background: var(--brand-gradient-soft); color: var(--brand-blue-deep); }
.nav-btn.active .nav-icon { filter: none; }
.nav-icon { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--border); }
.sidebar-footer .nav-btn { color: var(--text-dim); }

/* Backdrop (mobile drawer) */
.sidebar-backdrop {
    position: fixed; inset: var(--topbar-height) 0 0 0; z-index: 55;
    background: var(--surface-overlay); opacity: 0; pointer-events: none;
    transition: opacity var(--motion) var(--ease);
    backdrop-filter: blur(2px);
}

/* Main panel — offset by the docked sidebar on desktop */
.main-panel {
    flex: 1; min-width: 0;
    margin-left: var(--sidebar-width);
    padding: 26px clamp(16px, 4vw, 40px) 60px;
    transition: margin-left var(--motion) var(--ease-out);
}

/* Desktop: sidebar docked by default; collapsible.
   Mobile: sidebar off-canvas, opened by the hamburger. */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
    .main-panel { margin-left: 0; }
    body.nav-open .sidebar { transform: translateX(0); }
    body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
}
/* Desktop collapsed state (user toggled the hamburger closed) */
@media (min-width: 901px) {
    body.nav-collapsed .sidebar { transform: translateX(-100%); }
    body.nav-collapsed .main-panel { margin-left: 0; }
}

/* ── Unit actions: inline at the top, docked to the bottom on scroll ──────
   The bar itself carries the row layout (it used to be inline styles) — it has
   to live in CSS now because the docked state restyles the same element. */
.uacts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Docked. left follows the sidebar so the bar never slides under it, and the
   buttons centre so they clear the floating AI card in the bottom-right. */
.uacts.is-docked {
    position: fixed; left: var(--sidebar-width); right: 0; bottom: 0; z-index: 90;
    justify-content: center;
    padding: 10px clamp(16px, 4vw, 40px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.10);
    animation: uactsUp var(--motion) var(--ease-out);
}
/* Slides UP from below the fold — the movement says where the bar came from. */
@keyframes uactsUp { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
/* Off-canvas sidebar (mobile) and the desktop collapsed state both free the
   full width — the same two rules .main-panel already follows. */
@media (max-width: 900px) { .uacts.is-docked { left: 0; } }
@media (min-width: 901px) { body.nav-collapsed .uacts.is-docked { left: 0; } }
/* A bar that flies in is exactly what this setting is about. */
@media (prefers-reduced-motion: reduce) { .uacts.is-docked { animation: none; } }
/* Re-docked by a re-render (the calendar redraws on every drop): the bar never
   left, so it must not fly in again. */
.uacts.is-docked.is-redocked { animation: none; }
/* The calendar's bar also holds the school-year picker, which is taller than a
   small button. */
.uacts.cal-acts { align-items: center; }
/* Scroll room so the docked bar never sits on the last lesson card. Set while
   docked only, so an undocked page keeps its own spacing. */
body.mtp-uacts-docked .main-panel { padding-bottom: 104px; }
/* ...and the floating AI card (and its minimised bubble) rides ABOVE the bar
   instead of covering its buttons. The height comes from the dock itself, since
   the bar wraps to two rows on a phone. */
body.mtp-uacts-docked .ai-float,
body.mtp-uacts-docked .ai-float-min { bottom: calc(18px + var(--mtp-uacts-h, 56px)); }

/* ===================== Views / cards ===================== */
.view-panel { animation: fadeIn var(--motion) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-title { font-size: 1.9rem; margin: 0 0 4px; letter-spacing: -0.02em; }
.page-sub { color: var(--text-muted); margin: 0; font-size: 0.95rem; }
/* Rich (WYSIWYG) subscription description rendered on plan cards. */
.plan-desc p { margin: 0 0 6px; }
.plan-desc ul, .plan-desc ol { margin: 4px 0 8px; padding-left: 20px; }
.plan-desc li { margin: 2px 0; }
.plan-desc [data-savings], .plan-desc strong { color: inherit; }

.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
}
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.stat-tile { display: flex; flex-direction: column; gap: 6px; }
.stat-tile .stat-value { font-size: 2rem; font-weight: 800; font-family: var(--font-display);
    background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-tile .stat-label { color: var(--text-muted); font-size: 0.9rem; font-weight: 600; }
/* Two-bucket AI credit breakdown (plan vs purchased) */
.credit-split { margin-top: 10px; display: flex; flex-direction: column; }
.credit-split .cs-row { display: flex; align-items: baseline; gap: 8px; font-size: 0.82rem; padding: 7px 0; border-top: 1px solid var(--border); }
.credit-split .cs-row span { color: var(--text-muted); flex: 1; }
.credit-split .cs-row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.credit-split .cs-row em { color: var(--text-dim); font-style: normal; font-size: 0.72rem; }

.class-chip { display: inline-flex; align-items: center; gap: 8px; }
.class-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: var(--radius-pill); }
.badge-ai { background: var(--brand-gradient-soft); color: var(--brand-violet); }
.badge-manual { background: var(--bg-secondary); color: var(--text-muted); }
.badge-dirty { background: var(--warning-bg); color: var(--warning); }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state .emoji { font-size: 44px; display: block; margin-bottom: 12px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); }
.empty-state p { margin: 0 auto 18px; max-width: 420px; }

/* ===================== Forms ===================== */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; color: var(--text); }
.input, .select, .textarea {
    width: 100%; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 11px 14px; font-family: var(--font-body); transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.textarea { min-height: 96px; resize: vertical; }

/* Toggle switch (for the lesson-element on/off list) */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--border-strong);
    border-radius: var(--radius-pill); transition: background var(--motion) var(--ease); }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform var(--motion) var(--ease); box-shadow: var(--shadow-sm); }
.switch input:checked + .slider { background: var(--brand-blue); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ===================== Modal ===================== */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: var(--surface-overlay);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(3px); animation: fadeIn var(--motion-fast) var(--ease-out); }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
/* Wider dialog for settings that need columns of controls (⚙ Sections has a row of
   per-section toggles plus the Student Summary panel). Two class selectors outrank
   the bare `.modal` above, so `max-width` here wins without !important — the base
   520px cap is what squashed the split modal in #3313, so it is worth being exact
   about which rule is meant to win. */
.modal.modal--wide { max-width: min(860px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.modal-head h2 { margin: 0; font-size: 1.3rem; }
.modal-body { padding: 18px 22px; }
.modal-foot { padding: 0 22px 20px; display: flex; gap: 10px; justify-content: flex-end; }
/* Phones (smaller than a tablet): every modal goes full-screen. !important
   overrides the per-modal inline max-width/height some modals set. */
@media (max-width: 767px) {
    .modal-backdrop { padding: 0 !important; }
    .modal {
        width: 100% !important; max-width: none !important;
        height: 100% !important; max-height: none !important;
        border-radius: 0 !important; border: 0 !important;
    }
    .modal-head { padding-top: calc(20px + env(safe-area-inset-top)) !important; }
    .modal-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
}

/* ===================== Toast ===================== */
#toastHost { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text); color: #fff; padding: 11px 18px; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); animation: toastIn var(--motion) var(--ease-out); }
.toast.toast-error { background: var(--danger); }
.toast.toast-success { background: var(--success); }
/* Offline banner + install prompt */
#mtpOfflineBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; text-align: center;
    background: var(--warning-bg, rgba(217,119,6,0.14)); color: var(--warning, #B45309);
    border-top: 1px solid var(--warning, #D97706); padding: 8px 16px; font-size: 0.85rem; font-weight: 600; }
.mtp-install-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 300; margin: 0 auto; max-width: 540px;
    display: flex; align-items: center; gap: 10px; background: var(--bg-card, #fff); border: 1px solid var(--border-strong);
    border-radius: 12px; box-shadow: var(--shadow-lg, 0 12px 36px rgba(0,0,0,0.18)); padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 0.9rem; }
.mtp-install-bar .mib-icon { font-size: 1.3rem; flex-shrink: 0; }
.mtp-install-bar .mib-text { flex: 1; min-width: 0; }
.mtp-install-bar .mib-go { flex-shrink: 0; white-space: nowrap; text-decoration: none; }
.mtp-install-bar .mib-x { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 1rem; padding: 2px 6px; flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===================== Spinner / misc ===================== */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(37,99,235,0.25);
    border-top-color: var(--brand-blue); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* A button that is doing the thing it says: the glyph turns while the click is in
   flight. Scoped to the glyph via the button itself, so no extra markup. */
.btn-sm.is-spin { animation: spin 0.9s linear infinite; }

.center-card { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.center-card .card { max-width: 420px; text-align: center; }
.center-card .emoji { font-size: 40px; display: block; margin-bottom: 10px; }

.hidden, [hidden] { display: none !important; }

/* ===================== Auth pages (login/register/verify) ===================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 34px 30px; }
.auth-logo { display: block; height: 52px; margin: 0 auto 18px; }
.auth-card h1 { text-align: center; font-size: 1.5rem; margin: 0 0 6px; }
.auth-card .auth-sub { text-align: center; color: var(--text-muted); margin: 0 0 22px; font-size: 0.95rem; }
.sso-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    padding: 11px; font-weight: 600; font-size: 14.5px; color: var(--text); cursor: pointer; font-family: var(--font-body);
    transition: background var(--motion-fast) var(--ease); }
.sso-btn:hover { background: var(--bg-secondary); }
.sso-btn img, .sso-btn svg { width: 18px; height: 18px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; margin: 6px 0 16px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-note { text-align: center; color: var(--text-muted); font-size: 13.5px; margin-top: 18px; }
/* Admin custom login/registration message (App Auth Controls). */
.auth-custom { color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.auth-custom :first-child { margin-top: 0; }
.auth-custom :last-child { margin-bottom: 0; }
.auth-custom a { color: var(--brand-blue); font-weight: 600; }
.auth-msg { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; font-weight: 600; }
.auth-msg-error { background: var(--danger-bg); color: var(--danger); }
.auth-msg-success { background: var(--success-bg); color: var(--success); }

/* ===================== Calendar (Phase 3) ===================== */
.cal-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
/* Month/week nav (Today · ‹ · label · ›) — left-aligned, sitting just after the
   Month/Week/Today switch; on tablet and below it drops to its own full-width
   row (still left-aligned) so it's never cut off. */
.cal-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
.cal-month-label { font-family:var(--font-display); font-weight:700; font-size:1.15rem; text-align:left; }
@media (max-width:1024px){
  .cal-nav { width:100%; justify-content:flex-start; }
}
.cal-layout { display:grid; grid-template-columns: 1fr 250px; gap:16px; align-items:start; }
@media (max-width: 860px){ .cal-layout { grid-template-columns:1fr; } }

/* min-width:0 lets this grid item shrink to the column width so its own
   overflow-x scrolls — without it the wide grid grows the page and the last
   day gets cut off on mobile. -webkit-overflow-scrolling for momentum on iOS. */
.cal-wrap { overflow-x:auto; min-width:0; -webkit-overflow-scrolling:touch; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(96px,1fr)); border:1px solid var(--border);
    border-radius:var(--radius-md); overflow:hidden; background:var(--bg-card); min-width:680px; }
.cal-dow { text-align:center; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--text-dim); padding:8px 4px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.cal-cell { min-height:108px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:6px; display:flex; flex-direction:column; gap:4px; transition:background var(--motion-fast) var(--ease); }
.cal-cell:nth-child(7n) { border-right:0; }
.cal-cell.other-month { background:var(--surface-2); }
.cal-cell.weekend { background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cal-cell.today .cal-daynum { background:var(--brand-gradient); color:#fff; }
.cal-cell.drop-hover { background:var(--brand-gradient-soft); outline:2px dashed var(--brand-blue); outline-offset:-2px; }
.cal-daynum { align-self:flex-start; font-size:0.78rem; font-weight:700; color:var(--text-muted);
    width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-cell.other-month .cal-daynum { color:var(--text-dim); }

.cal-chip { display:flex; align-items:center; gap:5px; font-size:0.74rem; font-weight:600; color:#fff;
    padding:3px 6px; border-radius:6px; cursor:grab; line-height:1.25; box-shadow:var(--shadow-sm);
    overflow:hidden; }
.cal-chip:active { cursor:grabbing; }
.cal-chip .cc-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-chip .cc-x { opacity:0.8; font-weight:700; cursor:pointer; padding:0 1px; }
.cal-chip .cc-x:hover { opacity:1; }
.cal-chip.dragging { opacity:0.45; }

/* Shared sortable-list drag feedback (unit-page lessons, section template). */
.dnd-dragging { opacity:0.4; }
.dnd-placeholder { height:0; margin:3px 0; border-top:3px solid var(--brand-blue); border-radius:3px;
    box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-blue) 20%, transparent); pointer-events:none; }
.dnd-over { outline:2px dashed color-mix(in srgb, var(--brand-blue) 55%, transparent); outline-offset:-3px; border-radius:8px; }

/* Day-cell header: day number on the left, quick-add "+" on the right. */
.cal-cell-head { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.cal-quickadd { opacity:0; flex:none; width:20px; height:20px; border:none; border-radius:50%;
    background:var(--surface-2); color:var(--text-muted); font-size:16px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:opacity var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.cal-cell:hover .cal-quickadd, .cal-quickadd:focus-visible { opacity:1; }
.cal-quickadd:hover { background:var(--brand-gradient); color:#fff; }
@media (hover: none) { .cal-quickadd { opacity:.55; } } /* touch: no hover, keep it visible */

/* Right-click context menu (calendar lesson chips). */
.mtp-ctxmenu { position:fixed; z-index:1200; min-width:184px; padding:5px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); }
.mtp-ctxmenu button { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    background:none; border:none; padding:8px 10px; border-radius:6px; font-size:0.85rem; color:var(--text); cursor:pointer; }
.mtp-ctxmenu button:hover { background:var(--surface-2); }
.mtp-ctxmenu .ctx-danger { color:var(--danger, #DC2626); }
.mtp-ctxmenu .ctx-sep { height:1px; margin:4px 2px; background:var(--border); }

.cal-side .card { position:sticky; top:calc(var(--topbar-height) + 12px); }
.cal-unsched-list { display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
.cal-unsched-item { display:flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid var(--border);
    border-radius:var(--radius-sm); background:var(--surface-2); cursor:grab; font-size:0.82rem; }
.cal-unsched-item:active { cursor:grabbing; }
.cal-unsched-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.cal-side.drop-hover .card { outline:2px dashed var(--brand-blue); outline-offset:2px; }

/* ---- Calendar: week view + mode switch + today agenda ---- */
.cal-modeswitch { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; }
.cal-modeswitch button { background:var(--bg-card); color:var(--text-muted); border:0; padding:6px 14px; cursor:pointer;
    font-family:var(--font-body); font-weight:600; font-size:13px; border-right:1px solid var(--border); }
.cal-modeswitch button:last-child { border-right:0; }
.cal-modeswitch button.active { background:var(--brand-gradient); color:#fff; }
.cal-grid.cal-week { grid-template-columns:repeat(7,minmax(120px,1fr)); min-width:820px; }
.cal-grid.cal-week .cal-cell { min-height:280px; }
.cal-week-dow { text-align:center; padding:8px 4px; background:var(--surface-2); border-bottom:1px solid var(--border);
    font-size:0.72rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; }
.cal-week-dow.today { color:#fff; background:var(--brand-blue); }

.today-agenda { display:flex; flex-direction:column; gap:14px; }
.today-agenda-date { font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:2px; }
.today-agenda.dash-hide-date .today-agenda-date { display:none; } /* header already shows the date off-today */
.today-class { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-card); }
.today-class-head { display:flex; align-items:center; gap:9px; padding:10px 14px; background:var(--surface-2);
    font-weight:700; border-bottom:1px solid var(--border); }
.today-class-swatch { width:12px; height:12px; border-radius:4px; flex-shrink:0; }
.tl-pubcal { margin-left:auto; font-size:0.76rem; font-weight:600; color:var(--brand,#2563eb); text-decoration:none;
    white-space:nowrap; padding:2px 9px; border:1px solid var(--border); border-radius:999px; }
.tl-pubcal:hover { background:var(--surface); border-color:var(--brand,#2563eb); }
.today-lesson { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--motion-fast) var(--ease); }
.today-lesson:hover { background:var(--bg-secondary); }
.today-lesson:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:6px; }
.tl-wrap:last-child .today-lesson { border-bottom:0; }
.tl-wrap:last-child .tl-flow { border-bottom:0; }
/* Collapsible Lesson Flow under a dashboard row. Closed by default — the row is
   for scanning the day; the flow is opt-in detail. */
.tl-chev { flex:none; background:none; border:0; padding:6px 4px 6px 10px; margin-left:4px; cursor:pointer;
  color:var(--text-dim); font-size:0.8rem; line-height:1; border-radius:6px; border-left:1px solid var(--border);
  transition:transform var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.tl-chev:hover { color:var(--brand-blue); background:var(--bg-secondary); }
.tl-chev:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.tl-chev.on { transform:rotate(90deg); color:var(--brand-blue); }
.tl-flow { padding:2px 14px 12px 40px; border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.tl-flow ol { margin:0; padding-left:18px; }
.tl-flow li { font-size:0.82rem; line-height:1.5; color:var(--text-muted); }
.tl-flow li strong { color:var(--text); }
.tl-flow-empty { margin:0; font-size:0.8rem; color:var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .tl-chev { transition:none; } }
.today-lesson .tl-body { flex:1; min-width:0; }
.today-lesson .tl-title { font-weight:600; }
/* Unit short-title tag, to the LEFT of a lesson title on the dashboard and the
   calendar. Muted and non-wrapping so it reads as a label rather than part of the
   lesson name, and never steals a line from the title on a narrow chip. */
.today-lesson .tl-unit, .cal-chip .cc-unit {
  display:inline-block; margin-right:6px; padding:1px 6px; border-radius:999px;
  font-size:0.72em; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  vertical-align:baseline; }
.today-lesson .tl-unit { background:var(--bg-secondary); color:var(--text-dim); }
/* On a coloured calendar chip the tag sits ON the class colour, so it needs a
   translucent light backing rather than the page's grey. */
.cal-chip .cc-unit { background:rgba(255,255,255,.26); color:#fff; margin-right:4px; padding:0 5px; }
.today-lesson .tl-open { color:var(--text-dim); font-size:1.3rem; line-height:1; flex-shrink:0; }
.today-lesson:hover .tl-open { color:var(--brand-blue); }
.today-empty { color:var(--text-muted); padding:6px 2px; }
.dash-today { margin-bottom:22px; }
.dash-comingup { font-size:.76rem; font-weight:700; color:var(--brand-blue); background:var(--brand-gradient-soft); padding:2px 10px; border-radius:999px; white-space:nowrap; }
.dash-today .today-agenda { overflow-x:hidden; } /* clip the slide-in so nothing peeks */
/* Day-stepper slide: prev enters from the left, next enters from the right. */
@keyframes dashSlideFromLeft  { from { transform:translateX(-26px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes dashSlideFromRight { from { transform:translateX(26px);  opacity:0; } to { transform:none; opacity:1; } }
.today-agenda.dash-slide-prev { animation:dashSlideFromLeft  .22s ease; }
.today-agenda.dash-slide-next { animation:dashSlideFromRight .22s ease; }
@media (prefers-reduced-motion: reduce) {
  .today-agenda.dash-slide-prev, .today-agenda.dash-slide-next { animation:none; }
}

/* ---- Lesson editor: mini rich-text (WYSIWYG) per section ---- */
.rt { border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; margin-top:8px; background:var(--bg-input); }
.rt-toolbar { display:flex; gap:2px; padding:4px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.rt-toolbar button { background:transparent; border:0; border-radius:5px; min-width:30px; height:28px; padding:0 7px;
    cursor:pointer; color:var(--text-muted); font-size:13.5px; font-family:var(--font-body); }
.rt-toolbar button:hover { background:var(--bg-secondary); color:var(--text); }
.rt-editor { min-height:76px; max-height:280px; overflow-y:auto; padding:9px 12px; outline:none;
    font-size:15px; line-height:1.5; color:var(--text); }
.rt-editor:empty::before { content:attr(data-placeholder); color:var(--text-dim); pointer-events:none; }
.rt-editor ul, .rt-editor ol { margin:6px 0 6px 22px; }
.rt-editor p { margin:0 0 6px; }
.rt-editor:focus-within { }
.section-row { padding:12px 0; border-bottom:1px solid var(--border); }
.section-row:last-child { border-bottom:0; }

/* ---- AI Planner layout ---- */
@media (max-width: 820px) { .ai-layout { grid-template-columns: 1fr !important; } }

/* ---- Calendar: no-school days + locked lessons ---- */
.cal-cell.no-school { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 7px, var(--bg-secondary) 7px, var(--bg-secondary) 14px); }
.cal-noschool-label { font-size:0.7rem; font-weight:700; color:var(--text-muted); margin-top:4px; line-height:1.2; }
/* Lock is now just an INDICATOR shown only when locked (lock/unlock via
   right-click menu) — not a per-chip toggle. */
.cal-chip .cc-lock { opacity:.9; font-size:11px; cursor:default; }
.cal-chip.locked { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), var(--shadow-sm); cursor:default; }

/* ---- No-school day list (year editor) ---- */
.nsd-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin-bottom:6px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:9px 12px; cursor:pointer; font-family:var(--font-body); transition:background var(--motion-fast) var(--ease); }
.nsd-row:hover { background:var(--bg-secondary); }
.nsd-row .nsd-name { flex:1; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nsd-row .nsd-dates { color:var(--text-muted); font-size:0.82rem; white-space:nowrap; }

/* ---- Calendar: special days (school + a note) ---- */
.cal-cell.special-day { box-shadow: inset 3px 0 0 var(--warning); }
.cal-special-label { display:block; font-size:0.68rem; font-weight:700; color:var(--warning);
    background:var(--warning-bg); border-radius:4px; padding:1px 5px; margin:2px 0 3px; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Unit overview: rich AI-authored unit plan (HTML) ---- */
.unit-overview { color: var(--text); font-size: 0.9rem; line-height: 1.55; }
.unit-overview h4 { margin: 14px 0 4px; font-size: 0.86rem; font-weight: 700;
    color: var(--text); letter-spacing: 0.01em; }
.unit-overview h4:first-child { margin-top: 0; }
.unit-overview p { margin: 0 0 8px; }
.unit-overview ul, .unit-overview ol { margin: 0 0 10px; padding-left: 20px; }
.unit-overview li { margin: 2px 0; }

/* ---- Calendar: class color key + unscheduled class chips ---- */
.cal-legend { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:0 0 12px; padding:8px 12px;
    border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.cal-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text); }
.cal-legend-swatch { width:12px; height:12px; border-radius:4px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); }
.cal-uchips { display:flex; flex-wrap:wrap; gap:6px; }
.cal-uchip { display:inline-flex; align-items:center; gap:5px; font-size:0.76rem; padding:4px 9px; cursor:pointer;
    border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); }
.cal-uchip:hover { border-color:var(--brand-blue); }
.cal-uchip.active { background:var(--brand-blue); color:#fff; border-color:var(--brand-blue); }
.cal-uchip.active .cal-legend-swatch { box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); }

/* ---- Global "AI is working…" floating card (shown on every page) ---- */
.ai-float { position: fixed; right: 18px; bottom: 18px; z-index: 1200; width: 300px; max-width: calc(100vw - 36px);
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.18); }
.ai-float-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.86rem; color: var(--text); margin-bottom: 8px; }
.ai-float-row { margin-top: 8px; }
.ai-float-note { font-size: 0.76rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-float-bar { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.ai-float-bar > div { height: 100%; background: var(--brand-blue); transition: width .3s; }
.ai-float-btn { margin-top: 10px; width: 100%; background: none; border: 0; color: var(--brand-blue); font-weight: 600;
    font-size: 0.8rem; cursor: pointer; padding: 4px; }

/* Global AI card — minimize control + minimized bubble */
.ai-float .ai-float-head { justify-content: space-between; }
.ai-float-min-btn { margin-left: auto; background: none; border: 0; color: var(--text-dim); cursor: pointer;
    font-size: 1.3rem; line-height: 1; width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.ai-float-min-btn:hover { background: var(--surface-2); color: var(--text); }
.ai-float-min { position: fixed; right: 18px; bottom: 18px; z-index: 1200; width: 48px; height: 48px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(15,23,42,0.18); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ai-float-min:hover { border-color: var(--brand-blue); }
.ai-float-count { position: absolute; top: -4px; right: -4px; background: var(--brand-blue); color: #fff;
    font-size: 0.66rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---- Lesson rows: drag-to-reorder ---- */
.lesson-row.dragging { opacity: 0.5; }
.lesson-row.drop-hover { background: var(--surface-2); box-shadow: inset 0 2px 0 var(--brand-blue); }
/* Today's (or the next upcoming) scheduled lesson in a unit's list. */
.lesson-row--now { background: var(--brand-gradient-soft, rgba(37, 99, 235, 0.08)); box-shadow: inset 3px 0 0 var(--brand-blue, #2563EB); }
.lesson-now-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--brand-blue, #2563EB); color: #fff; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

/* ---- Print-friendly lesson view (modal + print) ---- */
.lesson-print { color: var(--text); line-height: 1.5; }
.lesson-print h1 { font-size: 1.5rem; margin: 0 0 4px; }
.lesson-print .lp-meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 10px; }
.lesson-print .lp-std { font-size: 0.9rem; margin: 0 0 14px; }
.lesson-print .lp-sec { margin: 0 0 16px; }
.lesson-print .lp-sec h2 { font-size: 1rem; margin: 0 0 8px; padding: 6px 10px; background: var(--bg-secondary);
  border-left: 3px solid var(--brand-blue, #2563EB); border-radius: 4px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lesson-print .lp-sec p, .lesson-print .lp-sec ul, .lesson-print .lp-sec ol { margin: 0 0 8px; }
.lesson-print .lp-sec ul, .lesson-print .lp-sec ol { padding-left: 20px; }
.lesson-print .lp-empty { color: var(--text-dim); }
/* Student-version view: audience toggle + tag. */
.lp-student-tag { font-size: 0.7rem; font-weight: 700; vertical-align: middle; padding: 2px 8px; border-radius: 999px;
    background: var(--brand-gradient-soft); color: var(--brand-violet, var(--brand-blue-deep)); }
.lp-aud-btn { border: 0; background: transparent; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.lp-aud-btn + .lp-aud-btn { border-left: 1px solid var(--border); }
.lp-aud-btn.active { background: var(--brand-blue); color: #fff; }
.section-row .t-student-chk { color: var(--text-muted); }
.section-row .t-student-chk:hover { color: var(--text); }

#mtpPrintRoot { display: none; }
@media print {
  body > *:not(#mtpPrintRoot) { display: none !important; }
  #mtpPrintRoot { display: block !important; padding: 0; color: #000; }
  #mtpPrintRoot .lesson-print { color: #000; }
  #mtpPrintRoot .lesson-print .lp-meta { color: #444; }
  #mtpPrintRoot .lesson-print .lp-sec h2 { border-color: #999; }
  /* margin:0 on the page removes the browser's auto header/footer (URL, date,
     page numbers). Our own logo header + URL footer are a table thead/tfoot
     that REPEAT on every printed page; their padding provides the page margins. */
  @page { margin: 0; }
  .mtp-print-doc { width: 100%; border-collapse: collapse; }
  .mtp-print-doc thead { display: table-header-group; }
  .mtp-print-doc tfoot { display: table-footer-group; }
  .mtp-print-doc thead td, .mtp-print-doc tfoot td { padding: 0; border: 0; }
  .mtp-print-doc > tbody > tr > td { padding: 4px 1.2cm 0; }
  .mtp-runhead { padding: 1cm 1.2cm 6px; }
  .mtp-runhead-logo { height: 30px; width: auto; display: block; }
  .mtp-runfoot { padding: 6px 1.2cm 1cm; margin-top: 6px; border-top: 1px solid #ccc; text-align: center; color: #666; font-size: 0.72rem; }
  /* Print-only calendar/list layouts */
  .mtp-print-head { margin: 0 0 12px; break-after: avoid; page-break-after: avoid; break-inside: avoid; }
  .mtp-print-head h1 { margin: 0; font-size: 1.35rem; color: #000; }
  .mtp-print-sub { color: #555; font-size: 0.82rem; margin-top: 2px; }
  /* Months flow and pack onto the page; each month stays whole (never split
     across a page), but small months share a page instead of each forcing a
     new one. */
  .mtp-print-month { margin: 0 0 14px; break-inside: avoid; page-break-inside: avoid; }
  .mtp-print-mlabel { font-size: 1rem; margin: 0 0 6px; color: #000; }
  .mtp-pcal { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .mtp-pcal th, .mtp-pcal td { border: 1px solid #b0b0b0; vertical-align: top; padding: 3px 4px; overflow: visible; word-break: break-word; }
  .mtp-pcal th { background: #eee; font-size: 0.66rem; text-transform: uppercase; letter-spacing: .02em; }
  .mtp-pcal td { height: 92px; }
  .mtp-pcal.mtp-pcal-week td { height: 480px; }
  .mtp-pcal-other { background: #f7f7f7; color: #aaa; }
  .mtp-pcal-dn { font-weight: 700; font-size: 0.7rem; color: #333; margin-bottom: 2px; }
  .mtp-pcal-lsn { margin: 2px 0; font-size: 0.64rem; line-height: 1.24; text-align: left; break-inside: avoid; page-break-inside: avoid; }
  .mtp-pcal-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
  .mtp-pcal-chip { display: block; color: #fff; font-weight: 700; font-size: 0.6rem; line-height: 1.3;
    padding: 1px 5px; border-radius: 4px; margin-bottom: 2px; text-align: left; overflow-wrap: anywhere;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-pcal-title { font-weight: 700; text-align: left; }
  .mtp-pcal-lsn .pc-l { margin: 1px 0; text-align: left; }
  .mtp-pcal-lsn .pc-flow-step { display: block; margin-left: 6px; }
  .mtp-print-lsn { break-inside: avoid; page-break-inside: avoid; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }

  /* ---- Blank sheets (the More tab): calendars and ruled sheets to write on ---- */
  /* "Fit on one page": the size comes from --fit-pt, which the builder computes
     from the content. Everything inside is sized in em so one variable moves the
     whole sheet, and the per-lesson chrome (margins, rules) tightens with it —
     at 7pt a 16px gap between lessons is most of the saving thrown away. */
  .mtp-print-doc.mtp-print-fit { font-size: var(--fit-pt, 9pt); line-height: 1.32; }
  /* .lesson-print sets line-height: 1.5 on itself, and INHERITANCE never beats a
     rule — without this the type shrinks while the leading does not, and the sheet
     barely gets shorter. Same story for the h1's 1.5rem: rem ignores --fit-pt, so
     every size inside the fit sheet is expressed in em. */
  .mtp-print-fit .lesson-print { line-height: 1.32; }
  .mtp-print-fit .mtp-print-lsn { margin: 0 0 0.5em; padding-bottom: 0.3em; }
  .mtp-print-fit .lesson-print h1 { font-size: 1.1em; margin: 0 0 0.15em; }
  .mtp-print-fit .lp-meta, .mtp-print-fit .lp-std { font-size: 0.85em; margin: 0 0 0.15em; }
  .mtp-print-fit .lp-sec, .mtp-print-fit .lp-flow { margin: 0.25em 0 0; }
  .mtp-print-fit .lp-sec h2, .mtp-print-fit .lp-flow h2 { font-size: 0.82em; margin: 0 0 0.1em; padding: 0; }
  .mtp-print-fit .lp-sec-body p, .mtp-print-fit .lp-sec-body ul, .mtp-print-fit .lp-sec p, .mtp-print-fit .lp-sec ul { margin: 0; }
  .mtp-print-fit .lp-sec-body ul, .mtp-print-fit .lp-sec ul { padding-left: 1.05em; }
  .mtp-print-fit .mtp-day-group { margin: 0 0 0.6em; }
  /* Two columns when shrinking alone cannot reach one page. break-inside on the
     lesson keeps a lesson whole rather than splitting its bullets across the
     gutter — which is also why the builder budgets 1.9 columns, not 2. */
  .mtp-print-fit-2col .mtp-print-list { column-count: 2; column-gap: 1.2em; }
  .mtp-print-fit-2col .mtp-print-lsn { break-inside: avoid; page-break-inside: avoid; }
  /* ---- A unit printed by WEEK: one card per calendar week ------------------
     The ask: week number and dates in the header, lessons inside, the day-date
     leading each lesson, days easy to tell apart, four weeks to a page. The page
     rule is the load-bearing one — break-after on every 4th card is what makes it
     four, and break-inside keeps a week whole so it never straddles the fold. */
  .mtp-wk-card { break-inside: avoid; page-break-inside: avoid; margin: 0 0 10px;
      border: 1pt solid #c7ced8; border-radius: 6px; overflow: hidden; }
  /* How many weeks land on a sheet is decided by the builder (mtpWeekPlan) and
     carried as a class, because it depends on how heavy the weeks are. */
  .mtp-wk-per-4 .mtp-wk-card:nth-of-type(4n) { break-after: page; page-break-after: always; }
  .mtp-wk-per-3 .mtp-wk-card:nth-of-type(3n) { break-after: page; page-break-after: always; }
  .mtp-wk-per-2 .mtp-wk-card:nth-of-type(2n) { break-after: page; page-break-after: always; }
  .mtp-wk-per-1 .mtp-wk-card { break-after: page; page-break-after: always; }
  .mtp-wk-list .mtp-wk-card:last-child { break-after: auto; page-break-after: auto; }
  .mtp-wk-head { display: flex; align-items: baseline; gap: 10px; margin: 0;
      padding: 4px 9px; background: #eef2f7; border-bottom: 1pt solid #c7ced8;
      font-size: 10pt; color: #000; }
  .mtp-wk-head .mtp-wk-n { font-weight: 800; letter-spacing: .01em; }
  .mtp-wk-head .mtp-wk-dates { font-weight: 600; color: #334155; }
  .mtp-wk-head .mtp-wk-count { margin-left: auto; font-size: 8pt; color: #64748b; font-weight: 600; }
  .mtp-wk-body { padding: 0; }
  /* Zebra, plus a rule down the left edge: a teacher scanning the card needs to
     see where one DAY ends and the next begins, which a gap alone does not give. */
  .mtp-wk-lsn { margin: 0; padding: 5px 9px 6px; border: 0; border-left: 3pt solid #cbd5e1;
      border-bottom: 1pt solid #e5e9f0; break-inside: avoid; page-break-inside: avoid; }
  .mtp-wk-body .mtp-wk-lsn:nth-child(odd) { background: #f6f8fb; }
  .mtp-wk-body .mtp-wk-lsn:last-child { border-bottom: 0; }
  .mtp-wk-lsn h1 { font-size: 10.5pt; margin: 0 0 2px; display: flex; flex-wrap: wrap;
      align-items: baseline; gap: 7px; }
  .mtp-wk-day { font-size: 8pt; font-weight: 800; text-transform: uppercase;
      letter-spacing: .03em; color: #1d4ed8; white-space: nowrap; }
  .mtp-wk-day--off { color: #94a3b8; }
  /* A multi-day lesson: its day tag, and the short "continued" row its later days
     print instead of repeating the whole plan. */
  .mtp-wk-span { font-size: 7.5pt; font-weight: 700; color: #475569; white-space: nowrap;
      border: 0.75pt solid #cbd5e1; border-radius: 999px; padding: 0 5px; }
  .mtp-wk-contd { font-size: 7.5pt; font-style: italic; color: #64748b; }
  .mtp-wk-cont { border-left-color: #e2e8f0; }
  .mtp-wk-cont h1 { font-weight: 600; }
  .mtp-pcal-day { margin-left: 4px; font-size: 6.5pt; font-weight: 700; color: #475569; white-space: nowrap; }
  .mtp-pcal-cont .mtp-pcal-title { font-weight: 500; }
  .mtp-wk-lsn .lp-sec, .mtp-wk-lsn .lp-flow { margin: 2px 0 0; }
  .mtp-wk-lsn .lp-sec h2, .mtp-wk-lsn .lp-flow h2 { font-size: 8pt; margin: 0 0 1px; padding: 0; background: none; }
  .mtp-wk-lsn .lp-sec-body p, .mtp-wk-lsn .lp-sec-body ul { margin: 0; }
  .mtp-wk-lsn .lp-sec-body ul { padding-left: 1.1em; }
  .mtp-print-blank { font-size: 10.5pt; }
  .mtp-print-blank .mtp-print-head { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1pt solid #222; }
  .mtp-print-blank .mtp-print-head h1 { font-size: 15pt; }
  .mtp-blank-page { break-after: page; page-break-after: always; }
  .mtp-blank-page:last-child { break-after: auto; page-break-after: auto; }
  .mtp-blank-mtitle { font-size: 12pt; margin: 0 0 6px; }
  .mtp-blankcal { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .mtp-blankcal th { border: 0.75pt solid #999; background: #f2f2f2; font-size: 8pt; text-transform: uppercase;
    letter-spacing: .06em; padding: 3px 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-blankcal td { border: 0.75pt solid #999; vertical-align: top; height: 92px; padding: 3px 4px; position: relative; }
  /* A month on its own page should USE the page. */
  .mtp-blank-page .mtpblankcal td, .mtp-blank-page .mtp-blankcal td { height: 1.15in; }
  .mtp-blank-dn { font-size: 9pt; font-weight: 700; color: #333; }
  .mtp-blank-other { background: #fafafa; }
  .mtp-blank-other .mtp-blank-dn { color: #bbb; font-weight: 400; }
  /* The ask: light, italic, at the BOTTOM of the date cell. */
  .mtp-blank-note { position: absolute; left: 4px; right: 4px; bottom: 3px;
    font-size: 7.5pt; font-style: italic; color: #999; line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* A week is five tall columns to write in. */
  .mtp-blankcal-week td { height: 7.6in; }
  .mtp-blankcal-week .mtp-blank-dn { font-size: 10pt; border-bottom: 0.5pt solid #ccc; padding-bottom: 3px; margin-bottom: 3px; }
  /* Twelve months on one sheet. */
  .mtp-blank-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
  .mtp-blank-mini { break-inside: avoid; page-break-inside: avoid; }
  .mtp-blank-mini h3 { font-size: 9pt; margin: 0 0 2px; text-align: center; }
  .mtp-blank-mini .mtp-blankcal td { height: 15px; padding: 0 2px; }
  .mtp-blank-mini .mtp-blankcal th { font-size: 6pt; padding: 1px 2px; }
  .mtp-blank-mini .mtp-blank-dn { font-size: 6.5pt; font-weight: 400; }
  .mtp-blank-mini .mtp-blank-note { display: none; }   /* no room, and the date carries it */
  .mtp-blank-mini .mtp-blank-hol .mtp-blank-dn { font-weight: 700; text-decoration: underline; }
  /* Ruled sheets: student information, communication log. */
  .mtp-blanksheet { width: 100%; border-collapse: collapse; }
  .mtp-blanksheet th { border: 0.75pt solid #999; background: #f2f2f2; font-size: 9pt; text-align: left;
    padding: 5px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mtp-blanksheet td { border: 0.75pt solid #999; height: 30px; padding: 4px 6px; }

  /* ---- A SINGLE DAY: compact type, the CLASS as the only header ----
     Scoped to .mtp-print-day so month/week/unit printouts are untouched. pt (not
     rem) because print is a physical medium. The scale is deliberate and must stay
     in this order: date 14 > CLASS 12.5 > lesson title 11 > body 10.5 > labels 8.5. */
  .mtp-print-day { font-size: 10.5pt; line-height: 1.4; }
  .mtp-print-day .mtp-print-head { margin: 0 0 13px; padding-bottom: 6px; border-bottom: 1pt solid #222; }
  .mtp-print-day .mtp-print-head h1 { font-size: 14pt; letter-spacing: -0.01em; }
  .mtp-print-day .mtp-print-sub { font-size: 8pt; color: #666; margin-top: 2px;
    text-transform: uppercase; letter-spacing: .08em; }
  /* The class name, stated once per group instead of on every lesson. */
  .mtp-print-day .mtp-day-group { break-inside: auto; margin: 0 0 15px; }
  .mtp-print-day .mtp-day-class { font-size: 12.5pt; font-weight: 700; color: #000;
    margin: 0 0 8px; padding: 0 0 4px; border-bottom: 0.75pt solid #bbb;
    break-after: avoid; page-break-after: avoid; }
  .mtp-print-day .mtp-day-classsub { display: block; font-size: 8pt; font-weight: 400;
    color: #666; text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }
  .mtp-print-day .mtp-print-lsn { border-bottom: 0; margin: 0 0 11px; padding: 0 0 2px; }
  .mtp-print-day .mtp-day-group .mtp-print-lsn + .mtp-print-lsn { border-top: 0.5pt dotted #ccc; padding-top: 9px; }
  /* ---- SEVERAL classes, several days: DAY > CLASS > lesson ----
     Shares the single-day scale above (the doc carries both classes) and adds one
     step on top of it. The day must out-rank the class at a glance: bigger, heavier
     and ruled above AND below — rules, not a tinted band, because browsers drop
     background colours from a printout by default. */
  .mtp-print-byday .mtp-dayblock { margin: 0 0 22px; }
  .mtp-print-byday .mtp-dayhead { font-size: 15pt; font-weight: 800; color: #000; letter-spacing: -0.01em;
    margin: 0 0 12px; padding: 5px 0 4px; border-top: 2.5pt solid #000; border-bottom: 0.75pt solid #000;
    break-after: avoid; page-break-after: avoid; }
  /* The CLASS is the header; a lesson title sits UNDER it and must read smaller. */
  .mtp-print-day .lesson-print h1 { font-size: 11pt; font-weight: 600; margin: 0 0 2px; }
  .mtp-print-day .lesson-print .lp-meta { font-size: 8.5pt; color: #666; font-style: italic; margin-bottom: 6px; }
  /* A lesson title must never be the last thing on a page with its content overleaf.
     `break-inside: avoid` on the lesson cannot help once the lesson is taller than a
     page — the browser then breaks wherever it likes, which is right under the
     heading. These push the break BEFORE the title instead. */
  .mtp-print-day .lesson-print h1,
  .mtp-print-day .lesson-print .lp-meta,
  .mtp-print-day .lesson-print .lp-std { break-after: avoid; page-break-after: avoid; }
  .mtp-print-day .lesson-print .lp-sec h2 + * { break-before: avoid; page-break-before: avoid; }
  .mtp-print-day .lesson-print p,
  .mtp-print-day .lesson-print li { orphans: 2; widows: 2; }
  .mtp-print-day .lesson-print .lp-std { font-size: 9.5pt; margin: 0 0 7px; }
  .mtp-print-day .lesson-print .lp-sec { margin: 0 0 8px; break-inside: avoid; page-break-inside: avoid; }
  /* A filled grey bar per section is heavy at this size — a rule reads better. */
  .mtp-print-day .lesson-print .lp-sec h2 { font-size: 8.5pt; font-weight: 700; color: #333;
    background: none; border: 0; border-bottom: 0.5pt solid #ddd; border-radius: 0;
    padding: 0 0 3px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .07em;
    break-after: avoid; page-break-after: avoid; }
  .mtp-print-day .lesson-print .lp-sec p, .mtp-print-day .lesson-print .lp-sec ul,
  .mtp-print-day .lesson-print .lp-sec ol { margin: 0 0 7px; }
  .mtp-print-day .lesson-print .lp-sec li { margin: 0 0 3px; }
  .mtp-print-day .lesson-print th, .mtp-print-day .lesson-print td { font-size: 9.5pt; }
  .mtp-print-day .mtp-runfoot { font-size: 8pt; }
}
/* #mtpPrintRoot only exists for printing — never show it on screen. */
#mtpPrintRoot { display: none; }

/* ---- Print options dialog: tabs ---- */
.pc-tabs { display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--border); }
.pc-tab { font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text-dim); background: none;
    border: 0; border-bottom: 2px solid transparent; padding: 7px 12px; margin-bottom: -1px; cursor: pointer; border-radius: 6px 6px 0 0; }
.pc-tab:hover { color: var(--text); background: var(--surface-2); }
.pc-tab.is-on { color: var(--brand-blue); border-bottom-color: var(--brand-blue); background: none; }

/* ---- Print options dialog ---- */
.print-field { margin: 0 0 16px; }
.print-legend { font-weight: 700; font-size: 0.82rem; margin: 0 0 7px; }
.print-checks { display: flex; flex-direction: column; gap: 7px; }
.print-checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.pc-scope { align-items: flex-start; }
.mtp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* ---- Public-calendar share modal ---- */
.pc-check { display:flex; align-items:center; gap:8px; font-size:0.85rem; font-weight:400; }
.pc-toggle input, .pc-check input { width:16px; height:16px; }

/* ---- Calendar legend as multi-select show/hide toggles ---- */
.cal-legend-toggle { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color:var(--text);
    background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 11px; cursor:pointer; }
.cal-legend-toggle:hover { border-color:var(--brand-blue); }
.cal-legend-toggle.off { opacity:0.45; text-decoration:line-through; background:var(--surface-2); }
.cal-legend-toggle.off .cal-legend-swatch { filter:grayscale(1); }

/* ---- Single-select class chips (Units page) ---- */
.class-chips { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.class-chip-btn { display:inline-flex; align-items:center; gap:7px; font-size:0.85rem; color:var(--text);
    background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:6px 13px; cursor:pointer; white-space:nowrap; }
.class-chip-btn:hover { border-color:var(--chip, var(--brand-blue)); }
.class-chip-btn.active { border-color:var(--chip, var(--brand-blue)); box-shadow:inset 0 0 0 1px var(--chip, var(--brand-blue)); font-weight:700; background:var(--surface-2); }

/* On narrow screens, let chip rows scroll horizontally instead of wrapping. */
@media (max-width:640px){
  .class-chips, .cal-legend { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .class-chip-btn, .cal-legend-toggle { flex:0 0 auto; }
}

/* ---- Lesson buckets (Lessons / New AI Lessons / Inactive) ---- */
.lesson-card-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:14px 16px 10px; }
.lesson-card-head h3 { margin:0; font-size:1.05rem; }
.lesson-card-head .page-sub { font-size:0.76rem; }
.lesson-list { min-height:16px; }
.lesson-list.bucket-hover { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--brand-blue); border-radius:8px; }
.lesson-empty { text-align:center; }

/* ---- AI Suggest Updates chat ---- */
.chat-scroll { overflow-y:auto; flex:1; min-height:240px; max-height:52vh; background:var(--surface-2);
    display:flex; flex-direction:column; gap:8px; padding:14px; }
.chat-bubble { max-width:85%; padding:9px 12px; border-radius:14px; font-size:0.88rem; line-height:1.4; white-space:pre-wrap; word-wrap:break-word; }
.chat-bubble.ai { align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-bubble.me { align-self:flex-end; background:var(--brand-blue); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.thinking { color:var(--text-dim); letter-spacing:2px; }

/* ---- ✨ Unit AI workspace: chat left, lessons right ----
   Sized by CLASS, never inline: an inline width on a .modal is what clipped the
   split panes in #3317, and the phone rule above (.modal full-screen, !important)
   has to be able to win below 768px. */
.modal.ws-modal { max-width: min(1240px, 96vw); height: min(880px, 92vh); max-height: 92vh;
    display: flex; flex-direction: column; overflow: hidden; }
.ws-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ws-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); }
.ws-chat { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.ws-src { font-size: 0.78rem; color: var(--text-dim); padding: 8px 16px; border-bottom: 1px solid var(--border); }
.chat-scroll.ws-scroll { max-height: none; min-height: 0; }
.ws-compose { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.ws-asking { font-size: 0.8rem; color: var(--text-dim); overflow-wrap: anywhere; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-chip { font: inherit; font-size: 0.78rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: inherit; cursor: pointer; text-align: left; }
.ws-chip:hover { border-color: var(--brand-blue); }
.ws-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.ws-inputrow textarea { flex: 1; min-width: 0; resize: vertical; min-height: 44px; max-height: 160px; }
.ws-lessons { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface-2); }
.ws-lessons-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.ws-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 14px; }
.ws-group { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 12px 4px 6px; }
.ws-lesson { display: flex; width: 100%; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 10px; margin: 0 0 6px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: inherit; font: inherit; cursor: pointer; }
.ws-lesson:hover { border-color: var(--brand-blue); }
.ws-lesson.is-sel { border-color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 14%, var(--bg-card));
    box-shadow: inset 3px 0 0 var(--brand-blue); }
.ws-lab { flex: 0 0 auto; min-width: 26px; font-weight: 700; font-size: 0.78rem; color: var(--text-dim); line-height: 1.35; }
.ws-lesson.is-sel .ws-lab { color: var(--brand-blue); }
.ws-title { flex: 1; min-width: 0; font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
.ws-action { align-self: stretch; border: 1px solid var(--brand-blue); border-radius: 12px; background: var(--bg-card); padding: 10px 12px; }
.ws-action-title { font-weight: 700; font-size: 0.88rem; overflow-wrap: anywhere; }
.ws-action-body { font-size: 0.8rem; margin: 6px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ws-action-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-note { align-self: stretch; font-size: 0.8rem; color: var(--text-dim); background: var(--surface-2);
    border-radius: 8px; padding: 8px 10px; }
.ws-offer { align-self: flex-start; }
/* Update confirm panel. (Showing/hiding uses the `hidden` attribute, which the global
   `[hidden]{display:none !important}` rule makes win over .ws-action-foot's display:flex.) */
.ws-cf { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ws-cf-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 10px 0 4px; }
.ws-cf-h:first-child { margin-top: 0; }
.ws-cf-row { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: 0.84rem; line-height: 1.35; margin: 3px 0; cursor: pointer; overflow-wrap: anywhere; }
.ws-cf-row input { margin-top: 3px; flex: 0 0 auto; }
.ws-cf-row .page-sub { font-size: 0.78rem; }
.ws-cf-all { padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px dotted var(--border); }   /* .page-sub is sized for page headers — too big inline */
.ws-cf-sum { font-size: 0.82rem; margin: 10px 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.ws-cf-sum.is-warn { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); color: var(--text); }
/* Tablet portrait and down: lessons stack ABOVE the chat. */
@media (max-width: 900px) {
    .ws-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 32%) minmax(0, 1fr); }
    .ws-lessons { order: -1; border-bottom: 1px solid var(--border); }
    .ws-chat { border-right: 0; }
}

/* ---- Collapsible unit overview ---- */
.unit-overview-card > summary { list-style:none; }
.unit-overview-card > summary::-webkit-details-marker { display:none; }
.unit-overview-card > summary::before { content:'▸'; display:inline-block; margin-right:8px; color:var(--text-dim); transition:transform .15s; }
.unit-overview-card[open] > summary::before { transform:rotate(90deg); }

/* ---- Boot loader (shown immediately, removed once auth resolves) ---- */
#bootLoader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 22px; background: var(--bg);
    transition: opacity .35s ease; }
#bootLoader.hide { opacity: 0; pointer-events: none; }
#bootLoader .boot-logo { height: 46px; width: auto; animation: boot-pulse 1.5s ease-in-out infinite; }
#bootLoader .boot-spinner { width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid var(--border); border-top-color: var(--brand-blue); border-right-color: var(--brand-violet);
    animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---- Chat "typing" indicator (three bouncing dots) ---- */
.chat-bubble.thinking { padding: 10px 14px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim);
    display: inline-block; animation: typing-bounce 1.2s infinite ease-in-out both; }
.typing-dots i:nth-child(1) { animation-delay: -0.32s; }
.typing-dots i:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* Lesson rows (unit page): on tablet/phone, collapse the action icons into a
   single ⋯ menu so they never crowd the title; the title + sub-info keep the
   full width. Desktop keeps the inline buttons and hides the ⋯ button. */
.lesson-menu-btn { display: none; }
.lesson-menu-pop {
  position: fixed; z-index: 200; min-width: 210px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.lesson-menu-pop button {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: var(--text); padding: 11px 12px; border-radius: 8px; min-height: 44px;
}
.lesson-menu-pop button:hover { background: var(--surface-2); }
.lesson-menu-pop button.danger { color: var(--danger); }
@media (max-width: 1024px) {
  .lesson-row > .lesson-drag { display: none; }
  .lesson-row > button:not(.lesson-menu-btn) { display: none; }
  .lesson-menu-btn { display: inline-flex; }
}

/* ---- AI usage modal ---- */
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.usage-table th { text-align: left; color: var(--text-dim); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .02em; padding: 4px 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); }
.usage-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }

/* Graphic-organizer tables inside a lesson's content (lesson view + print). */
.lesson-print table, .lp-sec table { border-collapse: collapse; margin: 8px 0; width: auto; max-width: 100%; }
.lesson-print th, .lesson-print td, .lp-sec th, .lp-sec td { border: 1px solid var(--border-strong); padding: 6px 10px; text-align: left; vertical-align: top; font-size: 0.9rem; }
.lesson-print th, .lp-sec th { background: var(--surface-2); font-weight: 700; }
@media print {
  #mtpPrintRoot .lesson-print table td, #mtpPrintRoot .lesson-print table th { border-color: #999; }
  #mtpPrintRoot .lesson-print th { background: #f0f0f0; }
}
/* Copy/Print toolbar shown above each graphic-organizer table in the lesson view. */
.go-tools { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.go-tools-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-right: auto; }
/* Print a single organizer, sized to the page WITH margins (the global
   @page margin is 0, so inset the content itself or the printer's non-printable
   border clips it). */
@media print {
  #mtpPrintRoot .mtp-go-print { padding: 0.5in; box-sizing: border-box; }
  #mtpPrintRoot .mtp-go-print h1 { font-size: 20px; margin: 0 0 14px; color: #000; }
  #mtpPrintRoot .mtp-go-print table { width: 100%; table-layout: fixed; border-collapse: collapse; }
  #mtpPrintRoot .mtp-go-print th, #mtpPrintRoot .mtp-go-print td { border: 1px solid #999; padding: 14px 16px; font-size: 15px; vertical-align: top; text-align: left; word-wrap: break-word; overflow-wrap: anywhere; }
  #mtpPrintRoot .mtp-go-print th { background: #f0f0f0; font-weight: 700; }
}

/* ============ Display board — canvas of movable boxes (KEEP IN SYNC with display/index.html) ============ */
.display-stage { position:relative; width:100%; max-width:960px; margin:0 auto; aspect-ratio:16/9;
  border-radius:var(--radius-md); background:var(--brand-gradient); color:#fff; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.18); container-type:size; }
.display-stage.dsp-bgimg { background-size:cover; background-position:center; }
.display-stage.dsp-editing { outline:2px dashed rgba(255,255,255,.28); outline-offset:-2px; }
.dsp-emptyhint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8%; opacity:.75; font-style:italic; font-size:2.4cqw; }
/* a box (positioned in % of the stage; fonts in container units so app + screen match) */
.dbox { position:absolute; box-sizing:border-box; display:flex; flex-direction:column; color:#fff; min-height:0; }
.dbox-body { flex:1; min-height:0; overflow:auto; line-height:1.2; }
.dbox-text { white-space:pre-wrap; word-break:break-word; }
.dbox-text ul, .dbox-text ol { margin:.2em 0; padding-left:1.4em; }
.dbox-text li { margin:0; }
.dbox-text p { margin:0 0 .3em; }
/* mini rich-text toolbar for display boxes */
.dsp-fmt-bar { position:fixed; z-index:200; display:flex; gap:2px; padding:3px; background:var(--bg-card,#fff); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow-md,0 6px 20px rgba(0,0,0,.15)); }
.dsp-fmt-bar button { min-width:28px; height:26px; padding:0 7px; border:none; background:none; cursor:pointer; border-radius:5px; font-size:13px; line-height:1; color:var(--text); white-space:nowrap; }
.dsp-fmt-bar button:hover { background:var(--bg-secondary,rgba(0,0,0,.06)); }
.dsp-fmt-sep { width:1px; align-self:stretch; background:var(--border); margin:2px 3px; }
.dsp-fmt-bar .dsp-fmt-color { min-width:18px; width:18px; height:18px; padding:0; border:1px solid var(--border-strong); border-radius:4px; }
.dsp-fmt-bar .dsp-fmt-color:hover { outline:2px solid var(--brand,#2563EB); outline-offset:1px; }
.dbox-heading .dbox-body { font-family:var(--font-display); font-weight:800; font-size:calc(7cqw * var(--fs,1)); line-height:1.05; }
.dbox-message .dbox-body { font-size:calc(3.4cqw * var(--fs,1)); }
.dbox-content .dbox-body { font-size:calc(3.2cqw * var(--fs,1)); }
.dbox-className .dbox-body { font-weight:700; font-size:calc(3.2cqw * var(--fs,1)); opacity:.92; }
.dbox-date .dbox-body { font-weight:600; font-size:calc(3cqw * var(--fs,1)); opacity:.9; }
.dbox-lessonTitle .dbox-body { font-family:var(--font-display); font-weight:800; font-size:calc(4.2cqw * var(--fs,1)); line-height:1.1; }
.dsp-secbtn.active { background:var(--brand,#2563EB); color:#fff; border-color:var(--brand,#2563EB); }
.dbox-section .dbox-label { font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:2cqw; opacity:.85; margin-bottom:.4cqw; display:flex; align-items:center; gap:.6cqw; }
.dbox-section .dbox-body { font-size:calc(2.7cqw * var(--fs,1)); }
.dbox-clock .dbox-body { font-weight:700; font-size:calc(5cqw * var(--fs,1)); text-align:right; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.dbox-timer .dbox-body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8cqw; }
.dbox-timer .dsp-timer-time { font-family:var(--font-display); font-weight:800; font-size:calc(13cqw * var(--fs,1)); line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.dsp-badge { font-size:.62em; font-weight:700; background:rgba(255,255,255,.22); border-radius:5px; padding:1px 5px; letter-spacing:.02em; }
/* editing chrome — app only */
.dbox-edit { border:1px solid rgba(255,255,255,.35); border-radius:8px; background:rgba(15,23,42,.16); }
.dbox-edit .dbox-head { display:flex; align-items:center; gap:6px; padding:2px 4px; font-size:11px;
  background:rgba(15,23,42,.38); border-radius:7px 7px 0 0; }
.dbox-edit .dbox-drag { cursor:move; user-select:none; touch-action:none; font-size:13px; opacity:.85; }
.dbox-edit .dbox-title { flex:1; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dbox-edit .dbox-body { padding:4px 8px; outline:none; }
.dbox-edit .dbox-body[contenteditable]:focus { background:rgba(0,0,0,.16); border-radius:0 0 7px 7px; }
.dbox-edit .dbox-rz { position:absolute; right:-5px; bottom:-5px; width:15px; height:15px; border-radius:3px;
  background:#fff; border:1px solid var(--border); cursor:nwse-resize; touch-action:none; }
.dbox-mini { background:none; border:none; color:#fff; cursor:pointer; font-size:12px; line-height:1; padding:0 3px; opacity:.8; }
.dbox-mini:hover { opacity:1; }
/* per-box (card) background color */
.dbox--bg { border-radius:10px; }
.dbox-edit.dbox--bg .dbox-body { padding:8px 12px; }
.dsp-bg-menu { display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; min-width:0; max-width:210px; padding:8px; }
.dsp-bg-menu .dsp-bg-swatch { width:24px; height:24px; padding:0; border:1px solid var(--border-strong); border-radius:6px; cursor:pointer; }
.dsp-bg-menu .dsp-bg-swatch:hover { outline:2px solid var(--brand,#2563EB); outline-offset:1px; }
.dsp-bg-menu .dsp-bg-none { display:flex; align-items:center; justify-content:center; background:var(--bg-card,#fff); color:var(--text-dim); font-size:12px; }
.dsp-timer-ctrls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; font-size:12px; }
.dsp-timer-ctrls input { width:44px; text-align:center; padding:2px 4px; }
.dsp-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.dsp-tb-sep { width:1px; height:20px; background:var(--border); }
.dsp-addbtn.active { background:var(--brand,#2563EB); color:#fff; border-color:var(--brand,#2563EB); }
/* countdown-expiry animation (shared with the projected page) */
@keyframes dsp-flash { 0%,100%{ opacity:0; } 50%{ opacity:1; } }
.display-stage.dsp-expired::after { content:''; position:absolute; inset:0; background:rgba(239,68,68,.5);
  animation:dsp-flash 1s steps(1) infinite; pointer-events:none; z-index:5; }
@keyframes dsp-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
.dbox-timer.dsp-expired .dsp-timer-time { animation:dsp-pulse .6s ease-in-out infinite; color:#fecaca; }

/* ===================== Personal library + lesson attachments ===================== */
.lib-usage { margin-bottom:12px; }
.lib-usage-bar { height:8px; border-radius:6px; background:var(--surface-2,rgba(0,0,0,.08)); overflow:hidden; }
.lib-usage-bar span { display:block; height:100%; background:var(--brand,#2563EB); border-radius:6px; transition:width .2s; }
.lib-usage-txt { font-size:.78rem; color:var(--text-dim); margin-top:4px; }
.lib-admin { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:8px 12px; border:1px dashed var(--border-strong); border-radius:8px; }
.lib-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.lib-toolbar .lib-search { flex:1; }
.lib-status:not(:empty) { font-size:.82rem; color:var(--text-dim); margin-bottom:8px; }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.lib-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; background:var(--surface,#fff); }
.lib-thumb { aspect-ratio:4/3; background-size:cover; background-position:center; background-color:var(--surface-2,rgba(0,0,0,.05)); }
.lib-thumb-file { display:flex; align-items:center; justify-content:center; font-size:2.6rem; }
.lib-name { font-size:.82rem; font-weight:600; padding:6px 8px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lib-meta { font-size:.72rem; color:var(--text-dim); padding:0 8px 6px; }
.lib-actions { display:flex; gap:6px; align-items:center; padding:0 8px 8px; margin-top:auto; }
.lib-actions > :first-child { flex:1; text-align:center; }
/* per-section attach row in the lesson editor */
.sec-attach { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.att-chip { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; background:var(--surface-2,rgba(0,0,0,.06)); border:1px solid var(--border); border-radius:999px; padding:3px 6px 3px 10px; }
.att-chip button { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:.9rem; line-height:1; padding:0 2px; }
.att-chip button:hover { color:var(--danger); }
/* attachments shown under a section title on the lesson */
.lp-attach { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 4px; }
.lp-att-img img { max-height:120px; max-width:200px; border-radius:8px; border:1px solid var(--border); display:block; }
.lp-att-file { display:inline-flex; align-items:center; gap:6px; font-size:.9rem; text-decoration:none; background:var(--surface-2,rgba(0,0,0,.06)); border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:inherit; }
.lp-att-file:hover { border-color:var(--brand,#2563EB); }
.lp-attach-add { margin-top:6px; opacity:.85; }
.lp-att-rm { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:.8rem; line-height:1; padding:0 4px; margin-left:-4px; align-self:flex-start; }
.lp-att-rm:hover { color:var(--danger); }
/* 🌐 / 🔒 per attachment — publish THIS file on the class's public calendar.
   Sits beside the ✕ and styled like it, so the two read as one control strip. */
.lp-att-pub-btn { background:none; border:none; cursor:pointer; font-size:.8rem; line-height:1;
  padding:0 4px; align-self:flex-start; opacity:.75; }
.lp-att-pub-btn:hover { opacity:1; }
.lp-att-pub-btn[aria-pressed="true"] { opacity:1; }
/* A file already on the public calendar is marked in the read-only view too, so the
   state is visible without entering edit mode. */
.lp-att-pubtag { font-size:.72em; opacity:.8; }
.lp-att-file.lp-att-pub { border-color: var(--brand-blue, #2563EB); }

/* ── Feature batch 2026-08-24: review flag, multi-day, archives, viewer tools, footer ── */
.badge-review { background: rgba(220,38,38,0.12); color: var(--danger, #DC2626); border: 1px solid rgba(220,38,38,0.28); }
.icon-btn.nr-on { background: rgba(220,38,38,0.14); border-radius: 8px; }
.icon-btn.nr-reviewed { background: rgba(22,163,74,0.16); border-radius: 8px; }

/* Multi-day calendar chips */
.cal-chip .cc-day { font-size: 0.68rem; font-weight: 800; opacity: 0.9; margin-left: 3px; padding: 0 4px; border-radius: 6px; background: rgba(255,255,255,0.28); }
.cal-chip.cc-cont { opacity: 0.82; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 6px, transparent 6px 12px); }
.cal-chip.cc-private { outline: 1px dashed rgba(255,255,255,0.7); outline-offset: -2px; }

/* Lesson viewer: per-section show/hide + inline edit tools */
.lp-sec-tools { float: right; display: inline-flex; gap: 4px; margin-left: 8px; }
.lp-sec-tools button { opacity: 0.55; }
.lp-sec:hover .lp-sec-tools button { opacity: 1; }
.lp-sec--hidden { opacity: 0.5; }
.lp-sec--hidden .lp-sec-body { filter: grayscale(0.4); }

/* Unit archives */
.unit-archive summary { list-style: revert; }
.arch-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.arch-chiplabel { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); min-width: 58px; }

/* Global app footer (branding / copyright) */
.app-footer { margin-top: auto; padding: 18px 16px; text-align: center; font-size: 0.78rem; color: var(--text-dim); border-top: 1px solid var(--border); }
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* Aggregated attachments block at the top of a lesson plan */
.lp-attach-top { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
.lp-attach-top h2 { margin: 0 0 8px; font-size: 0.95rem; }
.lp-attach-top .lp-attach { margin: 0; }

/* Reviewed badge (green) — companion to .badge-review (needs review, red) */
.badge-reviewed { background: rgba(16,185,129,0.12); color: var(--success, #059669); border: 1px solid rgba(16,185,129,0.28); }

/* Global "working…" indicator — non-blocking transparent overlay + spinner */
.mtp-busy { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: progress; background: rgba(15, 23, 42, 0.30);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  opacity: 0; transition: opacity .15s ease; }
.mtp-busy.on { opacity: 1; }
.mtp-busy.quiet { background: transparent; pointer-events: none; cursor: default;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  align-items: flex-end; justify-content: flex-end;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px) + var(--mtp-sync-offset, 0px)) 0; }
.mtp-busy.quiet .mtp-busy-box { font-size: 0.8rem; padding: 8px 14px; opacity: 0.96; }

/* Background-sync failures. They persist until dismissed: the teacher was not
   made to wait for these writes, so they may be looking anywhere when one
   fails — and a failure means the local change was REVERTED. */
#mtpSyncHost { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 100001; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(380px, 92vw); }
.mtp-sync-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px;
  background: var(--danger); color: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: 0.84rem; font-weight: 600; line-height: 1.35; }
.mtp-sync-alert .mtp-sync-text { flex: 1; min-width: 0; }
.mtp-sync-count { flex: none; background: rgba(255,255,255,0.25); border-radius: 999px; padding: 1px 7px; font-size: 0.74rem; }
.mtp-sync-x { flex: none; background: none; border: 0; color: #fff; cursor: pointer; font-size: 0.8rem;
  line-height: 1; padding: 2px 4px; border-radius: 5px; opacity: 0.85; }
.mtp-sync-x:hover { opacity: 1; background: rgba(255,255,255,0.18); }
.mtp-sync-x:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 600px) { #mtpSyncHost { right: 12px; left: 12px; max-width: none; } }
.mtp-busy-box { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px;
  background: var(--bg-card, #fff); color: var(--text, #0F172A); font-size: 0.88rem; font-weight: 700;
  border: 1px solid var(--border); box-shadow: 0 10px 34px rgba(15,23,42,0.22); }
.mtp-busy-spin { width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2.5px solid var(--border-strong, rgba(15,23,42,0.16)); border-top-color: var(--brand-blue, #2563EB);
  animation: mtp-busy-rot .7s linear infinite; }
@keyframes mtp-busy-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mtp-busy-spin { animation-duration: 1.4s; } }

/* Side-by-side lesson comparison. Each pane is a FULL, editable lesson viewer
   instance, so both keep their own header, tools and controls. */
.lp-split-modal { width: min(1700px, 97vw); max-width: min(1700px, 97vw); max-height: 94vh;
  display: flex; flex-direction: column; padding: 0; }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; min-height: 0; flex: 1; }
.lp-split-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.lp-split-b { border-left: 1px solid var(--border); }
/* Growing into a split, and shrinking back out of one, are animated so the
   window changes size in place instead of snapping between two modals.
   `lp-split-single` is the shell at NORMAL lesson-modal size (matching the
   inline max-width:960px/width:96vw a lone lesson gets). It is used twice: as
   the starting frame when opening, and as the resting state after one pane is
   closed. Width only -- transitioning the grid columns too makes the surviving
   pane animate a second time, which reads as a stutter. */
.lp-split-modal { transition: width .28s ease, max-width .28s ease; }
.lp-split-modal.lp-split-single { width: min(960px, 96vw); max-width: min(960px, 96vw); }
.lp-split-modal.lp-split-single .lp-split { grid-template-columns: minmax(0, 1fr); }
.lp-split-modal.lp-split-single .lp-split-b { border-left: 0; }
/* The bare `hidden` attribute loses to .lp-split-pane's own display:flex. */
.lp-split-pane[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lp-split-modal { transition: none; } }
/* A pane hosts a viewer with no backdrop of its own: it fills the pane and
   drops the free-floating modal chrome. */
.lp-pane-root { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* `width` and `max-height` MUST carry !important: the element also gets an inline
   style, and an inline declaration beats any normal stylesheet rule. Without it the
   inline `width:96vw` won and sized the modal to the VIEWPORT -- ~2x its own pane --
   so both panes were clipped on the right at every width. `max-width:none` alone
   made that worse by lifting the 960px cap. app.js no longer emits viewport units
   in pane mode; this is the belt-and-braces so it cannot come back. */
.lp-pane-root .modal { max-width: none !important; width: auto !important;
  max-height: none !important;
  box-shadow: none; border-radius: 0; flex: 1; min-height: 0; }

/* Actions that operate on the LESSON sit under the title; ◀ ▶ ✕ (which are
   about the window) stay on the title row. In a half-width pane the old single
   row squeezed the title down to an ellipsis. */
.lp-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 22px 0; }
.lp-pane-root .lp-toolbar { padding: 8px 16px 0; }

/* Nothing inside a lesson may force its pane wider than the window: a pane is
   overflow:hidden, so an over-wide table would be CLIPPED, not scrolled. */
.lesson-print img { max-width: 100%; height: auto; }
.lesson-print pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.lesson-print .lp-sec { overflow-wrap: anywhere; }
.lesson-print table { max-width: 100%; }
/* The pane's scroller takes any horizontal overflow. Without this the pane's
   own overflow:hidden CLIPS whatever is too wide — silently, with no scrollbar
   to hint at it. Per-section scrolling below is the nicer case; this is the
   backstop for everything else (flow lists, bare tables, wide images). */
.lp-pane-root .modal-body { overflow-x: auto; }
.lp-split-pane .lp-sec, .lp-split-pane .lp-attach-top { overflow-x: auto; }
.lp-pane-root .modal-head { padding: 14px 16px 0; }
.lp-pane-root .modal-head h2 { font-size: 1.05rem; }
.lp-pane-root .modal-body { padding: 12px 16px; }

/* ◫ is offered on iPads and larger only — two lesson plans cannot be compared
   in a phone-width column, and the picker would be a dead end there. */
.lp-split-btn { display: none; }
@media (min-width: 768px) { .lp-split-btn { display: inline-flex; } }
/* Inside a split, ◫ only means something when one half is FREE: while both
   lessons are up there is nowhere to put a third. It comes back when the shell
   collapses to a single lesson, so closing one lesson is not a dead end.
   The show rule stays inside the 768px query -- at phone width ◫ must remain
   hidden even when collapsed, or the picker becomes the dead end above. */
.lp-split-pane .lp-split-btn { display: none; }
@media (min-width: 768px) {
  .lp-split-modal.lp-split-single .lp-split-btn { display: inline-flex; }
}
/* ---- ⧉ Section breakaway ----
   A section opened for editing in the OTHER half of the side-by-side window.
   Offered on iPads and larger only, for the same reason as ◫: at phone width
   the two halves stack, and the lesson you wanted to read scrolls off screen. */
.lp-break-btn { display: none; }
@media (min-width: 768px) { .lp-break-btn { display: inline-flex; } }
/* In the lesson, a section that is open beside it. */
.lp-sec--away > h2 { box-shadow: inset 3px 0 0 var(--brand-blue, #2563EB); }
.lp-sec--away > h2::after { content: '⧉ open beside'; margin-left: 8px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: .02em; color: var(--brand-blue, #2563EB); white-space: nowrap; }
.lp-sec--away .lp-sec-body { opacity: 0.6; }
/* The panel fills its pane; only the card list scrolls, so the header and the
   "unsaved" prompt stay in view however many cards are open. */
.lp-bk-root { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--bg-card); }
.lp-bk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 4px; }
.lp-bk-head h2 { margin: 0; font-size: 1.05rem; }
.lp-bk-count { font-weight: 500; color: var(--text-dim); }
.lp-bk-hint { padding: 0 16px 8px; font-size: 0.78rem; color: var(--text-dim); }
.lp-bk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px;
  display: flex; flex-direction: column; gap: 12px; }
.lp-bk-card { flex: none; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary);
  padding: 10px 12px 12px; }
.lp-bk-card.is-dirty { border-color: var(--warning, #D97706); }
.lp-bk-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.lp-bk-title { flex: 1 1 0; min-width: 0; }
.lp-bk-title strong { display: block; overflow-wrap: anywhere; }
.lp-bk-sub { display: block; font-size: 0.74rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Roomier than the inline editor: this is where the writing happens. The list
   scrolls, so a long section is capped rather than pushing the others away. */
.lp-bk-card .rt-editor { min-height: 150px; max-height: 46vh; }
.lp-bk-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lp-bk-status { font-size: 0.76rem; color: var(--text-dim); }
.lp-bk-card.is-dirty .lp-bk-status { color: var(--warning, #B45309); font-weight: 600; }
/* "You have unsaved changes" — on one card, or on the panel when closing all. */
.lp-bk-ask { margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 0.84rem;
  background: var(--warning-bg, rgba(217,119,6,0.14)); border: 1px solid var(--warning, #D97706); }
.lp-bk-root > .lp-bk-ask { margin: 0 16px 8px; }
/* The class sets display, which would otherwise beat the bare `hidden` attribute. */
.lp-bk-ask[hidden] { display: none; }
.lp-bk-ask-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
/* A ring, not the lesson's background flash: that one animates through
   `transparent`, which blanks a card that has a background of its own. */
.lp-bk-flash { animation: lp-bk-flash 1.3s ease; }
@keyframes lp-bk-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } 25% { box-shadow: 0 0 0 3px rgba(37,99,235,0.45); } }
@media (prefers-reduced-motion: reduce) { .lp-bk-flash { animation: none; } }
/* If a split is already open and the window narrows, stack rather than crush. */
@media (max-width: 767px) {
  .lp-split { grid-template-columns: 1fr; }
  .lp-split-b { border-left: 0; border-top: 1px solid var(--border); }
}

/* Lesson Flow (at-a-glance walkthrough at the top of a lesson) */
.lp-flow { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
.lp-flow h2 { margin: 0 0 8px; font-size: 0.95rem; }
.lp-flow ol { margin: 0; padding-left: 20px; }
.lp-flow li { margin: 3px 0; line-height: 1.45; }
.lp-flow-step[data-flow-key] { cursor: pointer; color: var(--brand-blue, #2563EB); }
.lp-flow-step[data-flow-key]:hover { text-decoration: underline; }
.lp-flow-step[data-flow-key]:focus-visible { outline: 2px solid var(--brand-blue, #2563EB); outline-offset: 2px; border-radius: 4px; }
.lp-sec-flash { animation: lp-sec-flash 1.3s ease; }
@keyframes lp-sec-flash { 0%, 100% { background: transparent; } 25% { background: rgba(37,99,235,0.12); } }

/* Floating "back to top" button inside long lesson viewer/editor modals */
.mtp-scrolltop { position: absolute; right: 16px; bottom: 74px; z-index: 5; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--text);
  font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(15,23,42,0.22);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.mtp-scrolltop.on { opacity: 0.95; transform: translateY(0); pointer-events: auto; }
.mtp-scrolltop:hover { opacity: 1; }

/* Multi-day tag in the Today agenda */
.tl-day { display: inline-block; font-size: 0.66rem; font-weight: 800; color: var(--brand-blue, #2563EB);
  background: rgba(37,99,235,0.12); border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }

/* Minimizable Unscheduled calendar panel */
.cal-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-side-toggle { flex: none; width: 30px; height: 30px; font-size: 0.9rem; line-height: 1; }
/* Minimized (slid-off) state: the Unscheduled panel is hidden and the calendar
   goes full-width; a fixed tab on the right edge reopens it. */
.cal-layout.side-collapsed { grid-template-columns: 1fr; }
.cal-layout.side-collapsed .cal-side { display: none; }
.cal-reopen { display: none; }
.cal-layout.side-collapsed .cal-reopen { display: inline-flex; align-items: center; position: fixed; right: 0; top: 42%;
  z-index: 30; padding: 9px 12px; border: none; border-radius: 10px 0 0 10px; cursor: pointer;
  background: var(--brand-blue, #2563EB); color: #fff; font-weight: 700; font-size: 0.8rem;
  box-shadow: -4px 4px 18px rgba(15,23,42,0.25); }
.cal-reopen:hover { filter: brightness(1.06); }

/* ===== Tasks ===== */
.dash-top { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; margin-bottom: 22px; }
@media (max-width: 900px) { .dash-top { grid-template-columns: 1fr; } }
.dash-tasks .card, .dash-today .card { height: 100%; }

.task-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.task-tab { background: none; border: none; padding: 8px 12px; font-weight: 700; font-size: 0.86rem; color: var(--text-dim);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.task-tab.active { color: var(--text); border-bottom-color: var(--brand-blue, #2563EB); }
.task-tab-n { font-size: 0.72rem; background: var(--bg-secondary); border-radius: 999px; padding: 0 6px; margin-left: 2px; }

.task-list { display: flex; flex-direction: column; }
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--border-strong, rgba(15,23,42,0.2));
  background: var(--bg-input, #fff); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; }
.task-check.on { background: var(--success, #10B981); border-color: var(--success, #10B981); }
.task-main { flex: 1; min-width: 0; cursor: pointer; }
.task-title { font-weight: 600; line-height: 1.35; }
.task-meta { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.task-overdue { color: var(--danger, #DC2626); font-weight: 700; }
.task-ai { color: var(--brand-violet, #7C3AED); font-weight: 700; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text-dim); }
.task-row.done { opacity: 0.75; }
.task-list--mini .task-row { padding: 7px 2px; }

/* Floating Tasks button — above modals, a little below the top-right corner */
#mtpTaskFloat { position: fixed; top: calc(var(--topbar-height) + 26px); right: 14px; z-index: 250;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer;
  background: var(--brand-blue, #2563EB); color: #fff; font-size: 1.15rem; line-height: 1;
  box-shadow: 0 8px 24px rgba(15,23,42,0.28); display: inline-flex; align-items: center; justify-content: center; }
#mtpTaskFloat:hover { filter: brightness(1.06); }
.mtp-taskfloat-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--text-dim, #94A3B8); color: #fff; font-size: 0.66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.mtp-taskfloat-badge.due { background: var(--danger, #DC2626); }

/* Add-to-task button on Lesson Flow steps */
.lp-flow-task { border: none; background: none; cursor: pointer; color: var(--brand-blue, #2563EB);
  font-size: 0.8rem; margin-left: 6px; opacity: 0.6; padding: 0 3px; }
.lp-flow-step:hover .lp-flow-task, .lp-asg-item:hover .lp-flow-task { opacity: 1; }

/* Skip toggle (☑/☐) on flow steps + assignments; dimmed/struck when skipped */
.lp-toggle { border: none; background: none; cursor: pointer; font-size: 0.95rem; padding: 0 5px 0 0;
  line-height: 1; color: var(--brand-blue, #2563EB); vertical-align: baseline; }
.lp-toggle:hover { opacity: 0.75; }
.lp-off { opacity: 0.5; }
.lp-off .lp-asg-title, .lp-off > strong, .lp-off { text-decoration: line-through; }
.lp-off .lp-toggle, .lp-off .lp-asg-link, .lp-off .lp-flow-task { text-decoration: none; }

/* Assignment Flow — student work, grouped In class / Homework */
.lp-asg { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); }
.lp-asg h2 { margin: 0 0 8px; font-size: 0.95rem; }
.lp-asg-group { margin: 6px 0 0; }
.lp-asg-group h3 { margin: 6px 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary, #64748B); }
.lp-asg-group ul { margin: 0; padding-left: 4px; list-style: none; }
.lp-asg-item { display: flex; align-items: center; gap: 2px; margin: 3px 0; line-height: 1.4; }
.lp-asg-title { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lp-asg-link { border: none; background: none; cursor: pointer; color: var(--brand-blue, #2563EB);
  font-size: 0.85rem; margin-left: 4px; padding: 0 3px; opacity: 0.7; }
.lp-asg-link:hover { opacity: 1; }

/* Flow/Assignment editing: refresh, drag handle, per-item notes, allow both
   flow steps and assignment items to carry a stacked note block. */
.lp-flow li, .lp-asg-item { flex-wrap: wrap; }
.lp-flow-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lp-refresh { border: none; background: none; cursor: pointer; font-size: 0.9rem; margin-left: 8px; padding: 0 3px;
  opacity: 0.7; vertical-align: middle; }
.lp-refresh:hover { opacity: 1; }
.lp-drag { cursor: grab; color: var(--text-dim, #94A3B8); font-size: 0.9rem; padding: 0 4px 0 0; flex: 0 0 auto;
  user-select: none; }
.lp-drag:active { cursor: grabbing; }
.lp-note-btn { border: none; background: none; cursor: pointer; font-size: 0.8rem; margin-left: 6px; padding: 0 3px;
  opacity: 0.55; flex: 0 0 auto; }
.lp-flow-step:hover .lp-note-btn, .lp-asg-item:hover .lp-note-btn { opacity: 1; }
.lp-note { flex: 1 0 100%; margin: 2px 0 2px 22px; padding: 4px 8px; font-size: 0.8rem; line-height: 1.4;
  color: var(--text-secondary, #475569); background: var(--bg-secondary); border-left: 3px solid var(--brand-amber, #E2A03F);
  border-radius: 0 6px 6px 0; white-space: pre-wrap; }
.lp-note::before { content: "📝 "; }
.lp-note { cursor: pointer; }
.lp-note:hover { filter: brightness(0.98); }
.lp-asg-empty { list-style: none; color: var(--text-dim, #94A3B8); font-size: 0.78rem; font-style: italic; padding: 4px 0; }
/* Inline note editor (Save / Delete / Cancel) */
.lp-note-edit { flex: 1 0 100%; margin: 4px 0 4px 22px; }
.lp-note-edit .textarea { width: 100%; box-sizing: border-box; font-size: 0.85rem; }
.lp-note-edit-btns { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.lp-note-del { color: var(--brand-red, #DC2626); }
/* "?" help pip next to a section header */
.lp-help { border: 1px solid var(--border); background: none; color: var(--text-secondary, #64748B); border-radius: 50%;
  width: 18px; height: 18px; min-width: 18px; font-size: 0.7rem; font-weight: 700; cursor: pointer; margin-left: 7px;
  line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lp-help:hover { background: var(--bg-secondary); color: var(--text, #0F172A); }
/* Disabled prev/next nav buttons */
.modal-head .icon-btn:disabled { opacity: 0.3; cursor: default; }
.dnd-dragging { opacity: 0.5; }

/* Student Summary section in the lesson viewer */
.lp-ss { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--brand-blue, #2563EB) 6%, var(--bg-secondary)); }
.lp-ss h2 { margin: 0 0 8px; font-size: 0.95rem; display: flex; align-items: center; flex-wrap: wrap; }
.lp-ss-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lp-ss-edited { font-size: 0.7rem; color: var(--brand-amber, #B45309); font-weight: 600; margin-right: 4px; }
/* Student Summary tabs: the full blurb and its ⚡ extra-terse twin. Same shape as
   the print dialog's .pc-tab, scoped here so the panel keeps its own rhythm. */
.lp-ss-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; border-bottom: 1px solid var(--border); }
.lp-ss-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    padding: 5px 10px; margin-bottom: -1px; font-size: 0.8rem; font-weight: 600;
    color: var(--text-muted); cursor: pointer; border-radius: 6px 6px 0 0; }
.lp-ss-tab:hover { color: var(--text); background: var(--surface-2); }
.lp-ss-tab.is-on { color: var(--brand-blue, #2563EB); border-bottom-color: var(--brand-blue, #2563EB); }
.ss-terse-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ss-terse-actions .page-sub { margin: 0; }
.lp-ss-body { font-size: 0.9rem; line-height: 1.5; }
.lp-ss-body p { margin: 0.3em 0; } .lp-ss-body ul, .lp-ss-body ol { margin: 0.3em 0 0.3em 1.1em; padding: 0; }
.lp-ss-auto { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; font-size: 0.78rem;
  color: var(--text-secondary, #64748B); cursor: pointer; }

/* In-place prev/next lesson navigation — slide the new lesson body in from the
   side we're heading toward (next = from right, previous = from left). */
@keyframes lp-slide-in-next { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lp-slide-in-prev { from { transform: translateX(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
[data-lp-body].lp-slide-next { animation: lp-slide-in-next 0.22s ease-out; }
[data-lp-body].lp-slide-prev { animation: lp-slide-in-prev 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  [data-lp-body].lp-slide-next, [data-lp-body].lp-slide-prev { animation: none; }
}

/* Task links, groups, linked-lesson chip, reminder */
.task-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--brand-blue, #2563EB);
  font: inherit; font-size: inherit; text-align: left; }
.task-link:hover { text-decoration: underline; }
.task-rem { color: var(--brand-violet, #7C3AED); }
.task-group { border-bottom: 1px solid var(--border); padding: 6px 0 4px; }
.task-group:last-child { border-bottom: none; }
.task-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 0.86rem; margin-bottom: 2px; }
.task-group-due { font-size: 0.74rem; color: var(--text-dim); font-weight: 600; }
.task-group-items { padding-left: 14px; border-left: 2px solid var(--border); margin-left: 4px; }
.task-group-items .task-row { border-bottom: none; padding: 5px 2px; }
.task-linked { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-secondary); font-size: 0.9rem; }
.task-linked span { flex: 1; }

/* ---- "Push a unit" planner — the unit's lessons beside the class calendar ---- */
.pu-modal { max-width: 1180px; max-height: 92vh; height: min(880px, 92vh);
    display: flex; flex-direction: column; overflow: hidden; }
.pu-unitbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 22px 12px; border-bottom: 1px solid var(--border); }
.pu-unitbar .select { flex: 1 1 240px; min-width: 180px; max-width: 460px; }
.pu-unitlabel { font-weight: 700; font-size: 0.86rem; flex: none; }
.pu-counts { font-size: 0.76rem; }
.pu-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.pu-left { display: flex; flex-direction: column; min-height: 0; gap: 8px;
    padding: 12px 14px; border-right: 1px solid var(--border); }
.pu-right { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 12px 16px; }
.pu-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pu-pane-head h3 { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; }
.pu-pane-head .cal-month-label { font-size: 0.95rem; }
.pu-pane-head .cal-nav .btn-sm { padding: 3px 10px; }
.pu-selrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pu-selrow .btn-sm { padding: 3px 9px; font-size: 0.74rem; }
.pu-selcount { font-size: 0.74rem; margin-left: auto; }
.pu-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
    gap: 6px; padding: 3px; border-radius: var(--radius); }
.pu-list.drop-hover { outline: 2px dashed var(--brand-blue); outline-offset: -1px; background: var(--surface-2); }
.pu-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; cursor: grab;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.pu-item:active { cursor: grabbing; }
.pu-item.dragging { opacity: 0.45; }
.pu-item.locked { cursor: default; opacity: 0.72; }
/* The lesson the planner was opened ON, from a unit row's 📅 button. Marked in
   BOTH panes so "where is this scheduled?" is answerable at a glance. It is
   persistent state, not a flash: the planner redraws after every drag, and a
   one-shot animation would be gone the first time the teacher moved anything. */
.pu-item.pu-focus { outline: 2px solid var(--brand-blue); outline-offset: -2px;
    background: color-mix(in srgb, var(--brand-blue) 12%, var(--bg-card)); }
.pu-check { flex: none; width: 16px; height: 16px; accent-color: var(--brand-blue); }
.pu-num { flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff;
    font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pu-item-main { flex: 1; min-width: 0; }
.pu-item-title { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-item-meta { font-size: 0.72rem; color: var(--text-dim); }
.pu-item-meta.on { color: var(--text-muted); font-weight: 600; }
.pu-off { flex: none; width: 24px; height: 24px; font-size: 0.72rem; }
.pu-dropnote { font-size: 0.72rem; margin: 0; text-align: center; }
.pu-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    font-size: 0.72rem; color: var(--text-dim); }
.pu-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    margin-right: 4px; vertical-align: -1px; }
.pu-calwrap { flex: 1; min-height: 0; overflow: auto; }
.pu-cal .cal-cell { min-height: 82px; padding: 4px; gap: 3px; }
.pu-cal .cal-cell[data-date] { cursor: pointer; }
.pu-cal .cal-chip { font-size: 0.68rem; padding: 2px 5px; opacity: 0.5; }
.pu-cal .cal-chip.mine { opacity: 1; box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85), var(--shadow-sm); }
.pu-cal .cal-chip.pu-focus { opacity: 1; outline: 2px solid var(--text); outline-offset: 2px;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.85), 0 0 0 4px color-mix(in srgb, var(--brand-blue) 30%, transparent); }
.pu-cal .cal-cell.pu-startday { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.pu-startflag { font-size: 0.62rem; font-weight: 800; color: var(--brand-blue); }
.pu-foot { justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 22px; border-top: 1px solid var(--border); }
.pu-startbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 0.84rem; font-weight: 600; }
.pu-startbox .input { width: auto; padding: 6px 9px; }
.pu-footbtns { display: flex; gap: 8px; align-items: center; }
/* Tablet / phone: stack the two panes and let the whole body scroll. */
@media (max-width: 900px) {
    .pu-modal { height: min(880px, 92vh); }
    .pu-body { grid-template-columns: 1fr; overflow-y: auto; }
    .pu-left { border-right: 0; border-bottom: 1px solid var(--border); }
    .pu-list { max-height: 38vh; }
    .pu-calwrap { overflow-x: auto; }
    .pu-foot { padding: 12px 16px; }
}

/* ---- Bump / move-lessons dialog ---- */
.bump-opt { display: flex; gap: 9px; align-items: flex-start; font-weight: 400;
    margin-bottom: 7px; line-height: 1.4; cursor: pointer; }
.bump-opt input { flex: none; margin-top: 3px; accent-color: var(--brand-blue); }
.bump-preview { margin-top: 4px; padding: 10px 12px; border-radius: var(--radius);
    background: var(--surface-2); border: 1px solid var(--border); }
.bump-preview p { margin: 0 0 4px; }
.bump-preview p:last-child { margin-bottom: 0; }
.bump-line { font-size: 0.88rem; }
.bump-warn { font-size: 0.8rem; font-weight: 600; color: var(--warning); }

/* ---- Published board snapshot, shown at the foot of the lesson plan ---- */
.lp-snap { border-top: 2px solid var(--border); }
.lp-snap-meta { font-size: 0.8rem; margin: 0 0 8px; }
.lp-snap-live { color: var(--ok, #16a34a); font-weight: 700; }
.lp-snap-off { color: var(--text-muted); font-weight: 600; }
.lp-snap-img { display: block; max-width: min(560px, 100%); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.lp-snap-img img { display: block; width: 100%; height: auto; }
.lp-snap-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media print { .lp-snap { display: none; } }

/* Extra-terse student summary: one "Label: topic" line per section. Each line is
   its own <p>, so the normal paragraph spacing turns the block into a sparse
   column — tighten it so it reads as the at-a-glance list it is. Print-only: the
   block is built for #mtpPrintRoot and never appears on screen. */
@media print {
  #mtpPrintRoot .lp-sec.mtp-terse-sec .lp-sec-body p { margin: 0; }
  #mtpPrintRoot .lp-sec.mtp-terse-sec .lp-sec-body ul { margin: 0 0 4px; padding-left: 1.1em; }
  #mtpPrintRoot .lp-sec.mtp-terse-sec .lp-sec-body li { margin: 0; }
  #mtpPrintRoot .lp-sec.mtp-terse-sec .lp-sec-body ul:last-child { margin-bottom: 0; }
}

/* ── ⬆ Upload documents onto a lesson ─────────────────────────────────────
   One row per chosen file: name, size, and the section it will live in. The
   section select is required, so it is given the same weight as the name. */
.mtp-up-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mtp-up-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(140px, 180px) auto;
    gap: 8px; align-items: center;
    padding: 8px; border: 1px solid var(--border); border-radius: 8px;
}
.mtp-up-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mtp-up-size { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.mtp-up-row .mtp-up-sec { min-width: 0; }
/* On a phone the four columns cannot fit; name over its controls reads better
   than four squeezed columns. */
@media (max-width: 560px) {
    .mtp-up-row { grid-template-columns: minmax(0, 1fr) auto; }
    .mtp-up-name { grid-column: 1 / -1; }
    .mtp-up-row .mtp-up-sec { grid-column: 1; }
}
/* The unit a library file is filed under, on its card. */
.lib-unit { white-space: nowrap; }
.lib-card .lib-unit-set { margin: 6px 0 0; font-size: 0.78rem; padding: 4px 6px; width: 100%; }
.lib-toolbar .lib-unit-filter { width: auto; min-width: 130px; }

/* ── Unit lessons: "By date" view ─────────────────────────────────────
   A date spine for the unit's lessons. A drop goes through the calendar's
   own dropLessonOnDay, so everything here is presentation only. */
.unit-view-chips { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.unit-view-chips .btn-sm { border-radius: 0; border: 0; }
.unit-view-chips .btn-sm.is-on { background: var(--brand-gradient-soft, var(--surface-2)); color: var(--brand-blue, #2563EB); font-weight: 700; }
.unit-date-row.is-free { background: var(--surface-2); }
.unit-date-row.is-today { box-shadow: inset 3px 0 0 var(--brand-blue, #2563EB); }
/* Matches .cal-cell.drop-hover so a drop target reads the same in both places. */
.unit-date-row.drop-hover { background: var(--brand-gradient-soft, var(--surface-2)); outline: 2px dashed var(--brand-blue, #2563EB); outline-offset: -2px; }
.unit-date-row.is-dragging, .unit-date-chip.is-dragging { opacity: 0.45; }
.unit-date-row .unit-date-move { margin-left: auto; flex: none; }
.unit-date-chip.drop-hover { outline: 2px dashed var(--brand-blue, #2563EB); }
@media (max-width: 1024px) {
  /* Touch drag does not work — same reason .lesson-row hides its handle. The
     "Move…" button (and 📅 on an unscheduled lesson) is the path on a phone or
     iPad, so the handle only ever advertises something that cannot be done. */
  .unit-date-row > .lesson-drag, .unit-date-chip > .lesson-drag { display: none; }
}