/* Shared visual language from the public SPM Math landing page. Load last. */
:root {
  color-scheme: dark;
  --spm-bg: #081518;
  --spm-panel: #102225;
  --spm-raised: #1b302f;
  --spm-line: #c8bc9438;
  --spm-text: #f1ead8;
  --spm-muted: #a8b2ac;
  --spm-accent: #e4d8ba;
  --spm-success: #9dceb3;
  --spm-success-bg: #193b32;
  --spm-warning: #e6c58a;
  --spm-warning-bg: #3a3021;
  --spm-danger: #efb5a4;
  --spm-danger-bg: #432b2a;
  --bg: var(--spm-bg);
  --canvas: var(--spm-bg);
  --panel: var(--spm-panel);
  --surface: var(--spm-panel);
  --surface2: var(--spm-raised);
  --text: var(--spm-text);
  --ink: var(--spm-text);
  --muted: var(--spm-muted);
  --line: var(--spm-line);
  --accent: var(--spm-accent);
  --accent-soft: var(--spm-raised);
  --blue: var(--spm-accent);
  --green: var(--spm-success);
  --red: var(--spm-danger);
  --good: var(--spm-success);
  --warn: var(--spm-warning);
  --danger: var(--spm-danger);
}
html { background: var(--spm-bg); }
body { background: var(--spm-bg); color: var(--spm-text); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
::selection { background: #d3c295; color: #081518; }
:focus-visible { outline: 2px solid var(--spm-accent); outline-offset: 4px; }
input, select, textarea { accent-color: #d3c295; }
input::placeholder, textarea::placeholder { color: #8e9e97; opacity: 1; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { max-width: 100%; }

/* One brand mark and the same ivory primary action across every workspace. */
.brand, .teacher-brand b { font-family: Georgia, serif; font-weight: 400; }
.brand span, .auth-card .brand span { color: var(--spm-accent); }
.brand-mark {
  background: transparent; color: var(--spm-text); border: 1px solid var(--spm-accent);
  border-radius: 50%; box-shadow: inset 0 0 0 3px var(--spm-bg), inset 0 0 0 4px #d9cda568;
  font-family: Georgia, serif; font-weight: 400;
}
.primary-button, .auth-card .primary-button, .student-form .primary-button,
.primary, a.primary {
  background: var(--spm-accent) !important; border: 1px solid var(--spm-accent);
  color: #132023 !important; border-radius: 5px; box-shadow: none; font-weight: 650;
}
.primary-button:hover, .auth-card .primary-button:hover, .student-form .primary-button:hover,
.primary:hover { background: #f6ecd5 !important; }
.quiet-button, .small-button, .profile-chip, .student-nav a, .teacher-nav a { border-radius: 5px; }
.teacher-nav a.active, .student-nav a.active {
  background: var(--spm-raised); color: var(--spm-accent); box-shadow: inset 2px 0 var(--spm-accent);
}
.teacher-nav a.active > span { color: var(--spm-accent); }
.teacher-sidebar, .topbar, .reader-header { background: #0b1b1e; }
.teacher-topbar { border-bottom: 1px solid var(--spm-line); }
.teacher-topbar h1 { font-size: clamp(30px, 3vw, 40px); letter-spacing: -.8px; }
.teacher-brand b { font-size: 20px; }
.eyebrow { color: #b9b8a3; letter-spacing: .14em; }
.teacher-main, .student-main, .student-content, .student-grid > *,
.student-item > *, .student-panel, .student-card { min-width: 0; }
.panel, .metric-card, .student-card, .student-panel, .question-card,
.student-item, .student-book, .progress-stat, .notification, .admin-book { border-radius: 7px; box-shadow: none; }
.metric-card { background: linear-gradient(145deg, #122528, #0c1b1e); }
.metric-card strong, .progress-stat strong { font-family: Georgia, serif; font-weight: 400; }
.student-item, .notification, .progress-stat { background: var(--spm-panel); }
.student-main .primary-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px; font: inherit; font-weight: 650;
  cursor: pointer; text-decoration: none;
}
.student-card h2, .student-panel h2 { font-size: 23px; line-height: 1.25; }
.student-main h1 { letter-spacing: -.025em; }
.student-main h3, .student-item h3, .notification h3 { color: var(--spm-text); }
.student-main :is(p, h1, h2, h3, a, label) { overflow-wrap: anywhere; }
.student-form label { color: var(--spm-text); }
.student-form input, .student-form textarea { background: #0b1a1d; color: var(--spm-text); }
.question-map button { background: #0b1a1d; color: var(--spm-text); border-radius: 4px; }
.question-map button.current { color: var(--spm-accent); }
.question-map button.answered { background: var(--spm-success-bg); border-color: #648d75; }
.math-visual { background: #0b1a1d; border: 1px solid var(--spm-line); border-radius: 6px; }
.math-visual math-field { max-width: 100%; overflow-x: auto; }
.result-line { background: var(--spm-raised); }

/* Login uses the same quiet chalk-board identity as the landing. */
.auth-page { background: radial-gradient(ellipse at 50% 30%, #29473a50, transparent 68%), var(--spm-bg); min-height: 100dvh; }
.auth-card {
  padding: 38px; background: var(--spm-panel); border: 1px solid #d1c39655; border-radius: 8px;
  box-shadow: 0 0 0 6px var(--spm-bg), 0 0 0 7px #d1c39620, 0 24px 70px #0003;
}
.auth-card .brand { font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.auth-card h1 { font-size: 35px; letter-spacing: -1px; }
.auth-card label { color: #d6dccf; }
.auth-card input { background: #0b1a1d; border-color: #b7bea140; color: var(--spm-text); border-radius: 5px; }
.auth-card input:focus, .student-form input:focus { outline: 2px solid #d1c39677; border-color: var(--spm-accent); }
.auth-note, .auth-card .muted { color: var(--spm-muted); }
.auth-home { display: inline-block; margin-top: 20px; color: #ded0ac; font-size: 12px; text-underline-offset: 4px; }

/* Keep source PDF and answer photographs unfiltered. Theme only controls. */
.reader-title strong { color: var(--spm-text); }
.reader-toolbar, .reader-sidebar { background: var(--spm-panel); }
.reader-body button { border-radius: 5px; }

@media (max-width: 720px) {
  .auth-card { padding: 28px 22px; }
  .auth-card h1 { font-size: 30px; }
  .student-topbar { display: flex; }
  .student-nav { flex-wrap: nowrap; min-width: 0; max-width: 100%; }
  .student-nav a { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; }
  .student-topbar .brand { margin-bottom: 0; }
  .student-main .student-grid, .student-main .book-grid { grid-template-columns: minmax(0, 1fr); }
  .student-main :is(input, select, textarea, math-field) { min-width: 0; max-width: 100%; }
  .student-main .student-search { min-width: 0; width: 100%; }
  .topic-row { grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) auto; gap: 8px; }
  .chart-row { grid-template-columns: minmax(0, 1fr) minmax(60px, 1fr) 44px; }
  .student-main button, .student-main a.button, .auth-card button { min-height: 44px; }
  .teacher-topbar h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.status-pill:not(.paused):not(.archived){background:#e8dfc9;color:#304a40}.class-grid .group-card{position:relative}.class-grid .class-name::after{content:"";position:absolute;inset:0}.class-grid .table-actions{position:relative;z-index:1}.bank-panel textarea{min-height:180px;resize:vertical}.bank-levels{grid-template-columns:repeat(2,minmax(0,1fr))}

[hidden]{display:none!important}.class-grid .group-card-head{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:12px}

/* Consistent, accessible actions across the existing screens. */
.spm-icon{width:20px;height:20px;display:inline-block;flex:none;vertical-align:middle;pointer-events:none}
.icon-button,.bank-card-top .bank-actions button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:7px!important;border:1px solid var(--spm-line);border-radius:7px;background:transparent;color:var(--spm-muted);cursor:pointer}
.icon-button:hover,.bank-card-top .bank-actions button:hover{color:var(--spm-accent);background:var(--spm-raised)}
.icon-button:disabled{opacity:.45;cursor:wait}
.card-actions{display:flex;gap:6px;position:absolute;right:18px;top:18px}
.admin-book{position:relative}.admin-book h2{padding-right:174px}.admin-book .actions .button{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
#new-book{display:inline-flex;align-items:center;gap:8px}
.bank-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.bank-card-top h2{margin-top:0;overflow-wrap:anywhere}.bank-card-top .bank-actions{margin:0;display:flex;flex-shrink:0;gap:6px}
@media(max-width:600px){.admin-book{padding-top:66px!important}.admin-book h2{padding-right:0}.card-actions{top:16px;right:16px}}
@media(max-width:420px){.bank-levels{grid-template-columns:1fr}}

/* Text wraps normally; each mathematical fragment retains its own layout. */
.mixed-math-content { line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.mixed-math-content math-field[read-only] { display: inline-block; width: auto; min-height: 0; vertical-align: middle; max-width: 100%; overflow-x: auto; pointer-events: auto; }

.ML__keyboard .math-keyboard-close {
  pointer-events: auto;
  flex: 0 0 auto;
  align-self: center;
  margin: 2px 8px 2px auto;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #899b94;
  border-radius: 6px;
  background: #203332;
  color: #edf0e6;
  font: 600 13px/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width: 600px) {
  .ML__keyboard .MLK__toolbar { flex-wrap: wrap; }
  .ML__keyboard .math-keyboard-close { margin: 4px 8px 4px auto; }
}