/* ══ AulaAI visual refresh (2026-09) ═══════════════════════════════════════
   Loaded after styles.css. Presentation only: every element, id, handler and
   route is the one styles.css and app.js already use; this file changes how
   they look, not what they do. Remove the <link> to return to the previous
   look.

   1. Palette      calmer ink-navy dark theme, paper-toned light theme
   2. Type         a serif for page titles, quieter UI text
   3. Surfaces     fewer borders, no box-in-box
   4. Desktop nav  the top tab bar becomes a left sidebar (>1024px)
   5. Dashboard    one summary strip instead of four boxed tiles
   6. Classes      a real card grid
   7. Details      icons, empty states, login panel                      */

/* ── 1. Palette ─────────────────────────────────────────────────────────── */
:root {
  --surface-0: #0a1322;
  --surface-1: #0f1a2c;
  --surface-2: #142137;
  --surface-3: #08101c;
  --surface-hover: #152339;
  --surface-nav: #0c1627;
  --line: rgba(226, 232, 244, 0.09);
  --line-strong: rgba(226, 232, 244, 0.16);
  --line-subtle: rgba(226, 232, 244, 0.055);
  --fill-subtle: rgba(226, 232, 244, 0.06);
  --fill-hover: rgba(226, 232, 244, 0.045);
  --text-primary: #eef2f8;
  --text-secondary: rgba(226, 232, 244, 0.70);
  --text-muted: rgba(226, 232, 244, 0.46);
  --text-main: #eef2f8;
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --rail-w: 248px;
  --radius-card: 12px;
}
[data-theme="light"] {
  --surface-0: #f6f5f1;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #fbfaf7;
  --surface-hover: #f3f1eb;
  --surface-nav: #fbfaf7;
  --line: #e3e0d7;
  --line-strong: #cfcabd;
  --line-subtle: #eceae3;
  --fill-subtle: rgba(19, 34, 59, 0.06);
  --fill-hover: rgba(19, 34, 59, 0.04);
  --text-primary: #13223b;
  --text-secondary: #46536a;
  --text-muted: #6b768a;
  --text-main: #13223b;
}

/* ── 2. Type ────────────────────────────────────────────────────────────── */
.page-header h1,
.page-header h2,
.hero-value-title,
.login-form-section h2,
.modal-content > h2,
.modal-content h2:first-of-type,
#classroom-selection-screen h1,
#student-portal-screen h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-header h1 { font-size: clamp(26px, 2.2vw, 32px); }
.page-header .subtitle { color: var(--text-secondary); margin-top: 6px; }
/* Management pages explain themselves with their title and form; the
   one-line slogans under them only repeated it. */
#tab-activities .page-header .subtitle,
#tab-quizzes-mgmt .page-header .subtitle,
#tab-assignments-mgmt .page-header .subtitle,
#tab-s-quizzes .page-header .subtitle,
#tab-s-assignments .page-header .subtitle,
#tab-s-practice .page-header .subtitle { display: none; }

/* ── 3. Surfaces ────────────────────────────────────────────────────────── */
.card,
.stat-card,
.listrows,
.study-sidebar,
.msgr {
  border-color: var(--line-subtle);
  border-radius: var(--radius-card);
  box-shadow: none;
}
[data-theme="light"] .card,
[data-theme="light"] .listrows,
[data-theme="light"] .msgr { border-color: var(--line); box-shadow: 0 1px 2px rgba(19, 34, 59, 0.04); }
.card-header {
  border-bottom: none;
  padding-bottom: 4px;
  background: transparent;
}
.card-header h2, .card-header h3, .card-header .card-title { font-size: 15px; font-weight: 600; }
/* Box-in-box: rows inside a card are separated by a rule, not framed. */
.risk-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-subtle);
  border-radius: 0;
  padding-inline: 0;
}
.risk-item:last-child { border-bottom: none; }
.listrow { border-color: var(--line-subtle); }
.btn { border-radius: 8px; }
input, select, textarea, .form-input, .text-input { border-radius: 8px; }

/* ── 4. Desktop navigation: a left sidebar ──────────────────────────────── */
@media (min-width: 1025px) {
  #lecturer-dashboard, #student-dashboard { --topnav-h: 0px; }
  #lecturer-dashboard > .topnav,
  #student-dashboard > .topnav {
    top: 0; left: 0; bottom: 0; right: auto;
    width: var(--rail-w);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 20px 12px 16px;
    border-bottom: none;
    border-right: 1px solid var(--line-subtle);
    background: var(--surface-nav);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
  }
  .topnav > .nav-brand {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    row-gap: 2px;
    margin: 0 8px 14px;
    min-height: 0;
  }
  .topnav > .nav-brand .nav-logo-img { grid-column: 1 / -1; height: 32px; justify-self: start; margin-bottom: 18px; }
  .topnav > .nav-brand .nav-badge { display: none; }
  .topnav > .nav-brand .nav-course-name {
    display: block !important;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: normal;
  }
  .topnav > .nav-brand .nav-course-code { grid-column: 1 / -1; margin: 0; font-size: 12px; }
  /* "View classes" sits under the class it leaves. */
  .topnav > .nav-back-btn,
  .topnav > .btn[onclick*="showStudentPortal"] {
    order: 0;
    align-self: stretch;
    justify-content: flex-start;
    gap: 8px;
    height: 34px !important;
    margin: 0 0 12px !important;
    padding: 0 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
  }
  .topnav > .nav-back-btn .nav-back-label { display: inline !important; }
  .topnav > .nav-back-btn svg { width: 17px; height: 17px; flex: none; }
  /* The rail has room for every name at any width it is shown at (a tablet
     held sideways included); the top bar's rules for shedding labels at
     narrower widths do not apply to it. */
  .topnav .nav-tab .tab-label { display: inline !important; }
  .topnav > .nav-brand .nav-course-code:not(.hidden) { display: block !important; }
  .topnav > .nav-tabs {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    overflow: visible;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line-subtle);
  }
  .topnav .nav-tab {
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
  }
  .topnav .nav-tab:hover { background: var(--fill-hover); color: var(--text-primary); }
  .topnav .nav-tab.active {
    background: var(--fill-subtle);
    color: var(--text-primary);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .topnav .nav-tab .tab-icon svg { width: 17px; height: 17px; }
  .topnav .nav-tab #inbox-badge,
  .topnav .nav-tab #message-badge { position: static !important; margin-left: auto; }
  .topnav > .nav-user {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 0;
    padding: 12px 4px 0;
    border-top: 1px solid var(--line-subtle);
  }
  #lecturer-dashboard > .dashboard-content,
  #student-dashboard > .dashboard-content {
    max-width: none;
    margin: 0;
    padding: 40px 48px 48px calc(var(--rail-w) + 48px);
  }
  #lecturer-dashboard > .dashboard-content > .tab-panel:not(#tab-study-materials):not(#tab-book):not(#tab-inbox),
  #student-dashboard > .dashboard-content > .tab-panel:not(#tab-s-study-tab):not(#tab-s-book):not(#tab-s-messages) {
    max-width: 1440px;
  }
  body:has(#lecturer-dashboard.active) .site-footer,
  body:has(#student-dashboard.active) .site-footer { padding-left: var(--rail-w); }
}

/* ── 5. Dashboard: one summary strip ────────────────────────────────────── */
@media (min-width: 601px) {
  .stats-grid {
    gap: 0;
    background: var(--surface-1);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  [data-theme="light"] .stats-grid { border-color: var(--line); }
  .stats-grid > .stat-card {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .stats-grid > .stat-card + .stat-card { border-left: 1px solid var(--line-subtle); }
  [data-theme="light"] .stats-grid > .stat-card + .stat-card { border-left-color: var(--line); }
}
.stat-value { font-weight: 600; letter-spacing: -0.02em; }

/* ── 6. Class lists: a real card grid ───────────────────────────────────── */
#classroom-list,
#student-classroom-list,
.student-classroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  /* Each card keeps its own height: a class that is still being built (with
     its progress box) no longer stretches the others in its row. */
  align-items: start;
}
.classroom-card { border-radius: var(--radius-card); transition: border-color .15s ease, transform .15s ease; }
.classroom-card:hover { border-color: var(--line-strong); }

/* ── 7. Details ─────────────────────────────────────────────────────────── */
/* One icon weight everywhere. */
.topnav svg, .drawer svg, .btn svg, .nav-tab svg, .sidebar-item svg, .empty-state__mark svg {
  stroke-width: 1.75;
}
/* Empty states: a sentence, not an icon in a box. */
.empty-state__mark {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-muted);
  opacity: 0.8;
}
.empty-state__title { font-weight: 600; }

/* Sign-in: the left panel is a short introduction. */
.login-hero .hero-minimal-showcase { max-width: 460px; }
.hero-value-statement { border-left: none !important; padding-left: 0 !important; }
.hero-value-title { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; margin-bottom: 14px; }
.hero-value-subtitle { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.hero-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; }
.hero-points li {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}
.hero-points__title { font-weight: 600; color: var(--text-primary); font-size: 15px; }
.hero-points__text { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.hero-footer-sub { text-transform: none; letter-spacing: 0; }
.login-hero { background: var(--surface-0); }
[data-theme="light"] .login-hero { background: var(--surface-0); }

/* ══ v2 — restraint (after a look at how Linear, Things and Classroom are
   reviewed): neutral chrome with colour only where it means something,
   one type family, sharper corners, no shadows, no capitals. ══════════════ */

/* Palette: navy is a tint now, not a paint. Surfaces sit a few steps apart
   instead of reading as blue boxes on blue. */
:root {
  --surface-0: #0b1019;
  --surface-1: #0f151f;
  --surface-2: #141b27;
  --surface-3: #0a0e16;
  --surface-hover: #141b26;
  --surface-nav: #0b1019;
  --line: rgba(232, 236, 244, 0.085);
  --line-strong: rgba(232, 236, 244, 0.15);
  --line-subtle: rgba(232, 236, 244, 0.05);
  --fill-subtle: rgba(232, 236, 244, 0.055);
  --fill-hover: rgba(232, 236, 244, 0.04);
  --text-primary: #e9ecf2;
  --text-secondary: rgba(233, 236, 242, 0.68);
  --text-muted: rgba(233, 236, 242, 0.44);
  --text-main: #e9ecf2;
  --radius-card: 10px;
  --r-ctl: 7px;
}
[data-theme="light"] {
  --surface-0: #fafaf8;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --surface-hover: #f4f3ef;
  --surface-nav: #f6f5f1;
  --line: #e6e4de;
  --line-strong: #d4d1c8;
  --line-subtle: #eeece7;
  --text-primary: #18212f;
  --text-secondary: #4a5466;
  --text-muted: #737c8c;
  --text-main: #18212f;
}

/* Type: one family (Source Sans 3 for the interface, Source Serif 4 for page
   titles), one scale. */
body { font-size: 15px; font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; }
.stat-value, .stat-value * { font-feature-settings: "tnum"; }
.page-header h1 { font-size: clamp(26px, 2.1vw, 30px); font-weight: 600; }
.page-header { margin-bottom: 28px; }
.card-header h2, .card-header h3, .card-header .card-title,
.card-title { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.stat-label { font-size: 13px; }
.stat-value { font-size: 30px; font-weight: 600; }
.stat-sub { font-size: 13px; }

/* No capitals, anywhere they were decoration. */
th, thead th, .table th, .data-table th {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
}
.eyebrow, .kicker, .section-label, .question-type, .q-type, .quiz-type-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Corners and depth: small radii, flat surfaces. */
.card, .stat-card, .listrows, .msgr, .study-sidebar, .stats-grid, .classroom-card { border-radius: var(--radius-card) !important; box-shadow: none !important; }
.btn, .btn-sm, .btn-lg { border-radius: var(--r-ctl); box-shadow: none; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .text-input { border-radius: var(--r-ctl); }
.badge, .meta-chip, .topic-type-badge, .cefr-level-badge, .risk-badge, .nav-badge { border-radius: 5px; }
.modal-content { border-radius: 14px; }

/* Buttons: primary is solid and quiet; secondary is a hairline. */
.btn { font-weight: 600; letter-spacing: 0; }
.btn-primary { box-shadow: none !important; background-image: none !important; }
.btn-primary:hover { filter: brightness(1.06); transform: none; }
.btn-outline, .btn-secondary { background: transparent; border: 1px solid var(--line-strong); color: var(--text-primary); }
.btn-outline:hover, .btn-secondary:hover { background: var(--fill-hover); }

/* Fields: a hairline on the surface, not a dark well. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-input, .text-input {
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] select, [data-theme="light"] textarea { background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Sidebar: the page colour with a hairline, like the content next to it. */
@media (min-width: 1025px) {
  #lecturer-dashboard > .topnav, #student-dashboard > .topnav { background: var(--surface-0); border-right-color: var(--line); }
  .topnav .nav-tab.active { box-shadow: none; background: var(--fill-subtle); }
  .topnav .nav-tab.active .tab-icon { color: var(--accent); }
  .topnav > .nav-tabs { border-top-color: var(--line); }
  .topnav > .nav-user { border-top-color: var(--line); }
}

/* The reset-class panel: a quiet row with a red text action, not a pink box. */
.danger-zone {
  background: transparent !important;
  border: 1px solid var(--line) !important;
}

/* Sign-in: one page colour; the introduction sits on a slightly raised
   panel with a hairline, the form on the page itself. */
.login-hero { background: var(--surface-1) !important; border-right: 1px solid var(--line); }
.login-form-section { background: var(--surface-0) !important; }
.login-tabs-wrapper { background: var(--fill-subtle); border-color: transparent; }
.login-tab-btn.active { background: var(--surface-2); border-color: var(--line); box-shadow: none; }
[data-theme="light"] .login-tab-btn.active { background: #fff; }
.login-form-section h2 { font-size: 26px; }

/* Floating theme / language pill: flat. */
.action-pill-container, .floating-actions .lang-switcher { box-shadow: none !important; background: var(--surface-1) !important; border: 1px solid var(--line) !important; }

/* Numbers read as text: student numbers and counts in the interface face
   with even-width digits; the monospace face stays for join codes. */
.student-school-num, .sdetail__num, td.num, .table td, .listrow__meta .meta-chip {
  font-family: var(--font-ui) !important;
  font-feature-settings: "tnum";
  letter-spacing: 0;
}

/* Reader: text on the page, not boxes in boxes. The lesson card keeps one
   hairline; the guide block and its rules become a plain list. */
.study-page-heading { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.pedagogy-guide-block,
.pedagogy-scene-banner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
.pedagogy-rules-list { gap: 10px !important; }
.pedagogy-rule-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}
.pedagogy-guide-badge,
.pedagogy-scene-label {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.study-card { box-shadow: none !important; border-color: var(--line) !important; }

/* ══ v3 — structure by type and space, not boxes; a rail that folds ══════
   References: Stripe Docs and Vercel (sections are headings and space, a box
   only for a real object), Twitch (a sidebar that folds to an icon rail and
   lets the page widen), Linear, GitHub and Raycast (a quick switcher). */

/* Controls that exist only with the desktop sidebar. */
.rail-toggle, .palette-trigger { display: none; }

@media (min-width: 1025px) {
  :root { --rail-open: 248px; --rail-closed: 64px; --rail-w: var(--rail-open); }
  html.rail-collapsed { --rail-w: var(--rail-closed); }
  #lecturer-dashboard > .topnav, #student-dashboard > .topnav { overflow-x: hidden; }
  /* Animated only while the rail is being folded or unfolded, never on load. */
  html.rail-anim #lecturer-dashboard > .topnav, html.rail-anim #student-dashboard > .topnav { transition: width .22s cubic-bezier(.2,.8,.2,1); }
  html.rail-anim #lecturer-dashboard > .dashboard-content, html.rail-anim #student-dashboard > .dashboard-content,
  html.rail-anim .site-footer { transition: padding-left .22s cubic-bezier(.2,.8,.2,1); }

  .rail-toggle {
    display: inline-grid; place-items: center;
    position: absolute; top: 18px; right: 10px;
    width: 32px; height: 32px; border-radius: 7px;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  }
  .rail-toggle:hover { background: var(--fill-hover); color: var(--text-primary); }
  .rail-toggle svg { width: 18px; height: 18px; }

  .palette-trigger {
    display: flex; align-items: center; gap: 10px;
    height: 34px; margin: 0 0 10px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--fill-hover); color: var(--text-muted);
    font: inherit; font-size: 14px; cursor: pointer; text-align: left;
  }
  .palette-trigger:hover { color: var(--text-primary); border-color: var(--line-strong); }
  .palette-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
  .palette-trigger__label { flex: 1; }
  .palette-trigger__kbd { font: inherit; font-size: 12px; color: var(--text-muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; line-height: 18px; }

  /* Folded: icons only, centred; names show as tooltips. */
  html.rail-collapsed .topnav { padding-inline: 12px !important; align-items: center !important; }
  html.rail-collapsed .rail-toggle { position: static; order: -1; margin: 0 0 12px; transform: scaleX(-1); }
  html.rail-collapsed .topnav > .nav-brand { margin: 0 0 12px; display: block; }
  html.rail-collapsed .topnav > .nav-brand .nav-logo-img { width: 34px; height: 30px; object-fit: cover; object-position: right center; margin: 0; }   /* the O with the buddy on it */
  html.rail-collapsed .topnav > .nav-brand .nav-course-name,
  html.rail-collapsed .topnav > .nav-brand .nav-course-code,
  html.rail-collapsed .palette-trigger__label,
  html.rail-collapsed .palette-trigger__kbd,
  html.rail-collapsed .topnav .tab-label,
  html.rail-collapsed .topnav .nav-back-label,
  html.rail-collapsed .topnav > .btn[onclick*="showStudentPortal"] span { display: none !important; }
  html.rail-collapsed .palette-trigger,
  html.rail-collapsed .topnav > .nav-back-btn,
  html.rail-collapsed .topnav > .btn[onclick*="showStudentPortal"] {
    width: 40px; height: 36px !important; padding: 0 !important; justify-content: center; align-self: center;
  }
  html.rail-collapsed .topnav > .nav-tabs { align-items: center; width: 100%; }
  html.rail-collapsed .topnav .nav-tab { width: 40px; padding: 0; justify-content: center; }
  html.rail-collapsed .topnav .nav-tab #inbox-badge,
  html.rail-collapsed .topnav .nav-tab #message-badge { position: absolute !important; top: 3px !important; right: 3px !important; margin: 0; }
  html.rail-collapsed .topnav > .nav-user { flex-direction: column; gap: 8px; padding-inline: 0; width: 100%; }
}

/* Sections, not boxes. Inside a page, a card is a titled section: no fill,
   no frame, separated by space. Boxes stay for real objects (class cards,
   the conversation, the lesson reader, dialogs). */
.dashboard-content .card:not(.classroom-card):not(.msgr):not(.study-card):not(.build-banner-card):not(.danger-zone) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 40px;
}
.dashboard-content .card:not(.classroom-card):not(.msgr):not(.study-card):not(.build-banner-card) > .card-header {
  padding: 0 0 12px !important;
  background: transparent !important;
  border: none !important;
}
.dashboard-content .card:not(.classroom-card):not(.msgr):not(.study-card):not(.build-banner-card) > .card-body {
  padding: 0 !important;
}
.dashboard-content .card-header h2, .dashboard-content .card-header h3, .dashboard-content .card-title {
  font-size: 16px !important; font-weight: 600;
}

/* Lists: rows between hairlines, the full width of the page. */
.dashboard-content .listrows {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.dashboard-content .listrow {
  border-bottom: 1px solid var(--line-subtle) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.dashboard-content .listrow[data-clickable]:hover { background: var(--fill-hover) !important; }
.risk-item { padding-block: 12px; }

/* The stats: four numbers divided by hairlines, no frame around them. */
@media (min-width: 601px) {
  .stats-grid {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin-bottom: 40px;
  }
  .stats-grid > .stat-card { padding: 20px 24px !important; }
  .stats-grid > .stat-card:first-child { padding-left: 0 !important; }
}

/* Empty states: one quiet line of text, left-aligned, no picture. */
.dashboard-content .empty-state {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 4px 0 8px !important;
  min-height: 0 !important;
  background: none !important;
  border: none !important;
}
.dashboard-content .empty-state__mark { display: none !important; }
.dashboard-content .empty-state__title { font-size: 14px; font-weight: 500; color: var(--text-secondary); margin: 0; }
.dashboard-content .empty-state__body { font-size: 14px; color: var(--text-muted); margin: 2px 0 0; max-width: 52ch; }

/* An empty inbox fills its column, so it gets the same centred mark and quiet
   copy as the "select a conversation" pane beside it, not a stray line of text. */
.dashboard-content .msgr__thread-list > .empty-state {
  align-items: center !important;
  justify-content: center;
  text-align: center !important;
  gap: 10px;
  flex: 1;
  padding: 32px 20px !important;
}
.dashboard-content .msgr__thread-list:has(> .empty-state) { height: 100%; box-sizing: border-box; }
.dashboard-content .msgr__thread-list > .empty-state .empty-state__mark {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-muted);
}
.dashboard-content .msgr__thread-list > .empty-state .empty-state__mark svg { width: 22px; height: 22px; }
.dashboard-content .msgr__thread-list > .empty-state .empty-state__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.dashboard-content .msgr__thread-list > .empty-state .empty-state__body { font-size: 13px; max-width: 32ch; }

/* The data-reset row: a hairline section at the foot of the page. */
.danger-zone {
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 20px 0 0 !important;
  margin-top: 16px;
}

/* Quick switcher. */
.palette { position: fixed; inset: 0; z-index: 3000; display: grid; justify-items: center; align-items: start; padding-top: 14vh; }
.palette__scrim { position: absolute; inset: 0; background: rgba(4, 7, 12, 0.5); }
[data-theme="light"] .palette__scrim { background: rgba(20, 24, 32, 0.22); }
.palette__panel {
  position: relative; width: min(560px, calc(100vw - 32px));
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.palette__input {
  width: 100%; height: 52px; padding: 0 18px !important;
  border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  font: inherit; font-size: 16px; color: var(--text-primary);
}
.palette__list { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto; }
.palette__item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--text-secondary); }
.palette__item.is-active { background: var(--fill-subtle); color: var(--text-primary); }
.palette__icon { width: 18px; display: inline-grid; place-items: center; color: var(--text-muted); }
.palette__icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
.palette__label { flex: 1; font-size: 14px; }
.palette__hint { font-size: 12px; color: var(--text-muted); }
.palette__item--hit { height: auto; min-height: 40px; padding-block: 8px; }
.palette__label { min-width: 0; }
.palette__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__group { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); list-style: none; }
.palette__empty { padding: 14px 12px; color: var(--text-muted); font-size: 14px; }
.palette__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 12px; }
.palette__foot kbd { font: inherit; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-right: 3px; }

/* Curriculum: units are rows between hairlines, the number a plain figure. */
#curriculum-tree { border-top: 1px solid var(--line); }
.chapter-block {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line-subtle) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.chapter-header { padding: 14px 4px !important; background: transparent !important; border-radius: 0 !important; }
.chapter-header:hover { background: var(--fill-hover) !important; }
.chapter-num {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  min-width: 28px;
  font-feature-settings: "tnum";
}
.chapter-title { font-size: 15px !important; }
.chapter-topics .topic-item { border-radius: 6px; }

@media (min-width: 1025px) {
  /* Folded rail: no cropped logo (the toggle heads the rail, as on Twitch),
     and the page takes the room the rail gave up. */
  html.rail-collapsed .topnav > .nav-brand { display: none !important; }
  html.rail-collapsed #lecturer-dashboard > .dashboard-content > .tab-panel:not(#tab-study-materials):not(#tab-book):not(#tab-inbox),
  html.rail-collapsed #student-dashboard > .dashboard-content > .tab-panel:not(#tab-s-study-tab):not(#tab-s-book):not(#tab-s-messages) {
    /* The same cap as with the rail open: a cap that changed with the fold
       switched instantly while the rail animated, and the page's right edge
       jumped. Below the cap the page still takes the room the rail gives up. */
    max-width: 1440px;
  }
}
/* Initials markers are round, like every other avatar. */
.listrow__marker { border-radius: 50% !important; }
/* Destructive icons stay quiet until pointed at. */
.chapter-header .btn-ghost, .classroom-card__delete { color: var(--text-muted) !important; opacity: .7; }
.chapter-header:hover .btn-ghost, .classroom-card:hover .classroom-card__delete { opacity: 1; }
.chapter-header .btn-ghost:hover, .classroom-card__delete:hover { color: var(--danger) !important; }
.listrow__bar { height: 3px !important; border-radius: 2px; background: var(--fill-subtle) !important; }
.listrow__bar > i { border-radius: 2px; }
/* Phones: the same four numbers as a 2×2 grid divided by hairlines. */
@media (max-width: 600px) {
  .stats-grid { gap: 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; }
  .stats-grid > .stat-card {
    background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 14px 4px !important;
  }
  .stats-grid > .stat-card:nth-child(odd) { border-right: 1px solid var(--line-subtle) !important; padding-right: 14px !important; }
  .stats-grid > .stat-card:nth-child(even) { padding-left: 14px !important; }
  .stats-grid > .stat-card:nth-child(n+3) { border-top: 1px solid var(--line-subtle) !important; }
}
@media (max-width: 600px) {
  .stats-grid { border-radius: 0 !important; border-left: none !important; border-right: none !important; background: transparent !important; }
}

/* ══ Reader — typeset like the course PDF ══════════════════════════════════
   The PDF reads well because it is a document: one flowing column, a clear
   title, rules set off by a thin left line, vocabulary as a table with the
   examples in view, dialogue as lines with the translation in grey italics.
   The web reader had become a fixed-height box scrolling inside the page,
   with every rule, word and line in a box of its own. Here it is a page
   again. Behaviour (audio, translation toggles, dictionary on click, page
   steps, quick checks) is untouched. */

/* A page that grows with its content; the units list stays in view. */
@media (min-width: 769px) {
  .study-container { height: auto !important; min-height: 0 !important; overflow: visible !important; align-items: flex-start; }
  .study-content-panel, .study-content-area { height: auto !important; overflow: visible !important; }
  .study-sidebar { height: auto !important; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; align-self: flex-start; }
}
.study-card {
  height: auto !important; max-height: none !important; overflow: visible !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important;
}
.study-container { border: none !important; background: transparent !important; }
.study-content-panel { background: transparent !important; }
.study-sidebar { background: transparent !important; border: none !important; border-right: 1px solid var(--line) !important; border-radius: 0 !important; }

/* The column. */
.study-topic-wrapper { max-width: 760px; margin: 0 auto; padding: 8px 48px 56px; }
@media (max-width: 768px) { .study-topic-wrapper { padding: 4px 0 40px; } }
.study-topic-wrapper, .study-topic-wrapper p, .pedagogy-rule-content, .pedagogy-rule-explanation {
  font-size: 17px; line-height: 1.7; color: var(--text-primary);
}

/* Page steps: a quiet line with the page title and position. */
.mtoolbar { background: transparent !important; border: none !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important; }
.mtoolbar__title { font-weight: 500 !important; color: var(--text-secondary) !important; font-size: 14px !important; }
.mtoolbar__progress { height: 2px !important; }
.study-meta { margin-top: 28px !important; font-size: 13px; color: var(--text-muted); }
.study-meta .cefr-level-badge { background: none !important; border: none !important; padding: 0 !important; color: var(--text-muted) !important; font-weight: 500 !important; font-size: 13px !important; }
.study-page-heading { font-size: clamp(28px, 2.6vw, 36px) !important; line-height: 1.2 !important; margin: 6px 0 28px !important; color: var(--text-primary) !important; }

/* Explanations: paragraphs, not bullet cards. */
.pedagogy-guide-badge, .pedagogy-scene-label { display: block !important; margin-bottom: 12px !important; }
.pedagogy-guide-badge svg, .pedagogy-scene-label svg { display: none; }
.pedagogy-rule-bullet { display: none !important; }
.pedagogy-rules-list { display: grid; gap: 14px !important; }
.pedagogy-rule-item { display: block !important; }

/* Grammar rules: a heading, the explanation, and the example set off by a
   thin rule, as in the PDF. */
.pedagogy-rules-container { display: grid; gap: 36px; }
.pedagogy-rule-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.pedagogy-rule-title { font-size: 19px !important; font-weight: 600 !important; margin: 0 0 6px !important; color: var(--text-primary) !important; }
.pedagogy-rule-title::before { display: none !important; }
.pedagogy-rule-example-box {
  background: transparent !important; border: none !important; border-left: 2px solid var(--line-strong) !important;
  border-radius: 0 !important; box-shadow: none !important;
  margin: 14px 0 0 !important; padding: 2px 0 2px 16px !important;
}
.pedagogy-rule-example-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-muted) !important; }
.pedagogy-rule-example-box .foreign-word { font-style: italic; font-size: 18px !important; font-weight: 500 !important; border-bottom: none !important; }

/* Vocabulary: a table — the word and its meaning, then the example and its
   translation — with a hairline between entries. */
.vocab-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 4px 28px;
  align-items: start;
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 14px 0 !important; margin: 0 !important;
}
.vocab-row:first-child { border-top: 1px solid var(--line-strong) !important; }
.vocab-row__main { align-items: flex-start !important; gap: 10px !important; }
.vocab-row__term { font-weight: 600 !important; font-size: 17px !important; border-bottom: none !important; }
.vocab-row__meaning { color: var(--success) !important; font-size: 15px !important; }
[data-theme="light"] .vocab-row__meaning { color: #047857 !important; }
.vocab-row__detail { border: none !important; background: transparent !important; margin: 0 !important; padding: 0 !important; }
.vocab-row__detail > summary { display: none !important; }
.vocab-row__detail .disclose__body { padding: 0 !important; margin: 0 !important; border: none !important; }
.vocab-row__note { font-size: 14px !important; color: var(--text-muted) !important; margin: 0 0 4px !important; }
.vocab-row .example-block { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.vocab-row .example-block__target { font-size: 16px !important; border-bottom: none !important; }
.vocab-row .example-block__trans { color: var(--text-muted) !important; font-size: 15px !important; font-style: italic; }
@media (max-width: 600px) { .vocab-row { grid-template-columns: minmax(0, 1fr); } }

/* Dialogue: lines of a script. */
.pedagogy-scene-banner > div:not(.pedagogy-scene-label):not(.study-dialogue-card) { font-style: italic; color: var(--text-secondary) !important; margin-bottom: 20px; font-size: 16px !important; }
.study-dialogue-card {
  background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 0 18px !important;
}
.dialogue-card-header { margin-bottom: 2px !important; }
.dialogue-speaker-avatar { display: none !important; }
.dialogue-speaker-name { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.dialogue-phrase { font-size: 18px !important; font-style: normal !important; font-weight: 500 !important; border-bottom: none !important; }
.dialogue-translation-box { background: transparent !important; border: none !important; padding: 2px 0 0 !important; color: var(--text-muted) !important; font-style: italic; font-size: 15px !important; }
.dialogue-trans-toggle-btn { background: transparent !important; border: 1px solid var(--line) !important; box-shadow: none !important; }

/* Quick check: plain choices. */
.study-card .btn-outline[style] { justify-content: flex-start; text-align: left; font-weight: 500 !important; border-color: var(--line-strong) !important; }
/* A lesson question's answers are sentences in any script; they wrap inside
   the card instead of running off the screen (buttons default to one line). */
.study-card .btn[data-opt] { white-space: normal; height: auto; max-width: 100%; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
/* The lesson's topic title above the page can be a long sentence; it wraps
   instead of widening the page (which made phones zoom the lesson out). */
.study-meta .meta-chip { white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

/* Page footer. */
.study-footer-nav { background: transparent !important; border: none !important; border-top: 1px solid var(--line) !important; box-shadow: none !important; padding: 20px 0 0 !important; margin-top: 40px !important; }
/* The light theme gives the old card its own shadow; drop that too. */
:root .study-card, [data-theme="light"] .study-card { background: transparent !important; border: none !important; box-shadow: none !important; }
.pedagogy-guide-block, .pedagogy-scene-banner { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
/* The rule heading carried a coloured dot of its own. */
.pedagogy-rule-title > span[style*="border-radius"] { display: none !important; }
.pedagogy-rule-example-top { margin-bottom: 4px !important; }
.pedagogy-rule-example-box .tts-btn { width: 30px !important; height: 30px !important; }
.pedagogy-rule-example-box > * + * { margin-top: 4px !important; }
/* Keep a word's example and its translation together. */
.vocab-row .example-block__row { align-items: center !important; gap: 8px !important; margin: 0 !important; }
.vocab-row .tts-btn, .vocab-row__audio { width: 30px !important; height: 30px !important; min-height: 0 !important; }
.vocab-row .example-block__trans { margin-top: 0 !important; }
.study-meta { padding-inline: 0 !important; }

/* Entering a class fades the screen in without sliding it. A transform on
   the screen, even for the length of the animation, makes the fixed sidebar
   lay itself out against the screen instead of the window: it drew at the
   wrong height, then jumped, and Safari could keep its click targets where
   they had been drawn. */
#lecturer-dashboard.active, #student-dashboard.active { animation: aulaFadeOnly .28s ease; }
@keyframes aulaFadeOnly { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1025px) {
  .rail-toggle { z-index: 2; }
  .rail-toggle, .palette-trigger { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .rail-toggle svg, .palette-trigger svg, .palette-trigger > * { pointer-events: none; }
}

/* On very wide screens the page is centred in the room beside the sidebar,
   so the space is shared on both sides instead of pooling on the right. */
@media (min-width: 1900px) {
  #lecturer-dashboard > .dashboard-content > .tab-panel:not(#tab-study-materials):not(#tab-book):not(#tab-inbox),
  #student-dashboard > .dashboard-content > .tab-panel:not(#tab-s-study-tab):not(#tab-s-book):not(#tab-s-messages) {
    margin-inline: auto;
  }
}

/* PDF language choice: the same dialog as the rest of the site. */
.pdf-picker {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--scrim, rgba(4, 7, 12, 0.55));
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: aulaFadeOnly .16s ease;
}
.pdf-picker__panel {
  width: min(400px, 100%);
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--line); border-radius: var(--radius-card, 12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  padding: 24px 24px 16px;
}
.pdf-picker__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.pdf-picker__lede { font-size: 14px; color: var(--text-secondary); margin: 0 0 18px; }
.pdf-picker__options { display: grid; gap: 8px; }
.pdf-picker__option {
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 12px 14px; text-align: left; cursor: pointer; font: inherit;
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--line); border-radius: var(--r-ctl, 8px);
  transition: border-color .12s ease, background-color .12s ease;
}
.pdf-picker__option:hover, .pdf-picker__option:focus-visible { border-color: var(--accent); background: var(--fill-hover); outline: none; }
.pdf-picker__name { font-size: 15px; font-weight: 600; }
.pdf-picker__note { font-size: 13px; color: var(--text-muted); }
.pdf-picker__foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ══ Reader on large screens ══════════════════════════════════════════════
   The study page was held to the old 1216px container (an earlier rule with
   an id inside :has() outranked the sidebar layout), which left the right
   third of a large monitor empty, and the reading column was a narrow 760px.
   The page now uses the room beside the sidebar, the column widens with the
   screen, and the type grows a step on large monitors. */
@media (min-width: 1025px) {
  #lecturer-dashboard > .dashboard-content:has(#tab-study-materials.active),
  #student-dashboard > .dashboard-content:has(#tab-s-study-tab.active) {
    max-width: none !important;
    margin: 0 !important;
  }
  #tab-study-materials, #tab-s-study-tab { max-width: 1680px; margin-inline: auto; }
  .study-topic-wrapper { max-width: 980px; padding-inline: clamp(24px, 3vw, 56px); }
  /* The units list scrolls on its own; reaching its end must not start
     scrolling the page, and scrolling the page must not drag it along. */
  .study-sidebar, .study-sidebar-toc { overscroll-behavior: contain; }
  /* Tall enough to fill the window below the page title, never taller: a
     units list longer than the window scrolls inside, instead of making the
     page scroll and carrying the list's heading off the top. */
  .study-sidebar { max-height: calc(100vh - 150px) !important; }
}
@media (min-width: 1500px) {
  .study-topic-wrapper, .study-topic-wrapper p, .pedagogy-rule-content, .pedagogy-rule-explanation { font-size: 18px; }
  .study-page-heading { font-size: clamp(34px, 2.4vw, 42px) !important; }
  .vocab-row__term { font-size: 18px !important; }
  .vocab-row__meaning, .vocab-row .example-block__target { font-size: 17px !important; }
  .dialogue-phrase, .pedagogy-rule-example-box .foreign-word { font-size: 19px !important; }
}

/* ══ Reader: one navigation, a solid step bar ═════════════════════════════
   The course outline (the "2/10" menu) is the one way to move between units,
   topics and pages; the inline units list beside the lesson duplicated it
   and fought the page for the scroll wheel, so it is no longer shown. The
   step bar stays pinned while the lesson scrolls, so it is opaque. */
@media (min-width: 1025px) {
  .study-container > .study-sidebar { display: none !important; }
  .study-container > .study-content-panel { width: 100% !important; max-width: none !important; flex: 1 1 auto !important; border-left: none !important; }
}
.mtoolbar {
  background: var(--surface-0) !important;
  padding-top: 8px !important;
  box-shadow: 0 1px 0 var(--line) !important;
  border-bottom: none !important;
}

/* The reader sits close under its page title: the header's 28px, the panel's
   24px and the bar's own padding stacked into a ~100px gap on desktop. */
@media (min-width: 1025px) {
  #tab-study-materials > .page-header,
  #tab-s-study-tab > .page-header { margin-bottom: 12px !important; }
  #tab-study-materials .study-content-panel,
  #tab-s-study-tab .study-content-panel { padding-top: 0 !important; }
}

/* Outline: a topic opens to its pages; a chevron says so. */
.outline__pages[hidden] { display: none !important; }
.outline__topic { display: flex !important; align-items: center; gap: 10px; }
.outline__topic::after {
  content: ''; margin-inline-start: auto; flex-shrink: 0;
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); opacity: .55; transition: transform .15s ease;
}
.outline__topic[aria-expanded="true"]::after { transform: rotate(45deg); }
.outline-sheet__actions:empty { display: none !important; }
/* Phones: a topic reads above its pages, not below them. */
@media (max-width: 768px) {
  .outline__topic { font-size: 14px !important; }
  .outline__page { font-size: 13px !important; min-height: 38px !important; }
  .outline__page .outline__label { font-size: inherit !important; }
}

/* ══ Folding rail, without the jumps ══════════════════════════════════════
   Folding used to re-lay the rail out in its final form on the first frame
   while its width was still animating: icons jumped to the middle of the
   wide rail and slid back, labels and the logo vanished at once and the
   whole column jumped up, and the fold button leapt across. Now every item
   keeps its left edge (the icons sit at the same x in both states), labels
   are clipped by the narrowing rail and fade, the logo block shrinks
   smoothly, the fold button rides the rail's right edge, and the footer
   group, which has to change shape, fades out and back in around the move. */
@media (min-width: 1025px) {
  html.rail-collapsed .topnav { align-items: stretch !important; }
  html.rail-collapsed .topnav .nav-tab,
  html.rail-collapsed .palette-trigger,
  html.rail-collapsed .topnav > .nav-back-btn,
  html.rail-collapsed .topnav > .btn[onclick*="showStudentPortal"] {
    width: 100% !important; height: 34px !important; padding: 0 10px !important;
    justify-content: flex-start !important; align-self: stretch !important;
  }
  html.rail-collapsed .topnav .nav-tab { height: 36px !important; }
  .topnav .nav-tab, .palette-trigger, .topnav > .nav-back-btn, .topnav > .btn[onclick*="showStudentPortal"] { overflow: hidden; white-space: nowrap; }
  html.rail-collapsed .topnav .tab-label,
  html.rail-collapsed .topnav .nav-back-label,
  html.rail-collapsed .palette-trigger__label,
  html.rail-collapsed .palette-trigger__kbd,
  html.rail-collapsed .topnav > .btn[onclick*="showStudentPortal"] span { display: inline !important; opacity: 0; }
  html.rail-collapsed .palette-trigger__label { flex: 0 0 auto; }

  /* The logo block shrinks to the height of the fold button's row. */
  /* A fixed width, so the class name never re-wraps (and grows the block)
     while the rail narrows; the rail simply clips it. */
  .topnav > .nav-brand { max-height: 140px; overflow: hidden; width: calc(var(--rail-open) - 41px) !important; min-width: calc(var(--rail-open) - 41px) !important; align-self: flex-start !important; }
  html.rail-collapsed .topnav > .nav-brand { display: grid !important; max-height: 32px; margin: 0 8px 16px !important; opacity: 0; pointer-events: none; }
  html.rail-collapsed .topnav > .nav-brand .nav-course-name,
  html.rail-collapsed .topnav > .nav-brand .nav-course-code { display: block !important; }
  html.rail-collapsed .topnav > .nav-brand .nav-logo-img { width: auto !important; height: 32px !important; object-fit: contain !important; margin: 0 0 18px !important; }

  /* The fold button stays pinned to the rail's right edge in both states. */
  html.rail-collapsed .rail-toggle { position: absolute !important; top: 18px; right: 16px; margin: 0 !important; order: 0; }

  html.rail-anim .topnav .tab-label, html.rail-anim .topnav .nav-back-label,
  html.rail-anim .palette-trigger__label, html.rail-anim .palette-trigger__kbd,
  html.rail-anim .topnav > .nav-brand { transition: opacity .16s ease, max-height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1); }
  html.rail-anim .rail-toggle { transition: right .22s cubic-bezier(.2,.8,.2,1); }
  html.rail-anim .topnav > .nav-user,
  html.rail-anim .topnav .nav-tab #inbox-badge, html.rail-anim .topnav .nav-tab #message-badge { opacity: 0; transition: none; }
  .topnav > .nav-user, .topnav .nav-tab #inbox-badge, .topnav .nav-tab #message-badge { transition: opacity .18s ease; }
}

/* ══ Message count ════════════════════════════════════════════════════════
   One quiet pill in the brand colour, readable at a glance, aligned with the
   tab's label; on the folded rail it sits on the icon's corner, and on
   phones a dot on the menu button says there is something to read inside. */
.nav-tab .nav-count {
  position: static !important; top: auto !important; right: auto !important;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px !important; margin-left: auto;
  border-radius: 9px !important;
  background: var(--accent) !important; color: var(--accent-contrast) !important;
  font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.nav-tab .nav-count[style*="display: none"] { display: none !important; }
@media (min-width: 1025px) {
  html.rail-collapsed .topnav .nav-tab .nav-count {
    position: absolute !important; top: 2px !important; right: 2px !important; left: auto !important;
    min-width: 16px; height: 16px; padding: 0 4px !important; font-size: 10px !important; margin: 0;
    box-shadow: 0 0 0 2px var(--surface-nav, var(--surface-0));
  }
  html.rail-collapsed .topnav .nav-tab { position: relative; overflow: visible; }
}
.mobile-menu-btn { position: relative; }
html.has-unread-messages .mobile-menu-btn::after {
  content: ''; position: absolute; top: 6px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface-nav, var(--surface-0));
}
.toast--action { cursor: pointer; }

/* The message field grows with its text and scrolls only at its maximum
   height; below that it never shows a scrollbar. */
.msgr__composer textarea { overflow-y: hidden; scrollbar-width: thin; }

/* Loading a class: a thin bar along the top edge, as on large sites. */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 5000;
  pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: var(--accent);
}
.nav-progress.is-active { opacity: 1; transform: scaleX(.8); transition: transform 2.4s cubic-bezier(.08,.6,.2,1), opacity .1s; }
.nav-progress.is-done { transform: scaleX(1); opacity: 0; transition: transform .18s ease, opacity .25s ease .12s; }

/* Quiz and assignment results (lecturer): every student with where they
   stand, live. */
.ares__loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }
.ares__title { margin: 0 36px 6px 0; }
.ares__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--text-muted); margin-bottom: 18px; }
.ares__sum.is-active { color: var(--success); font-weight: 600; }
.ares__sum.is-left { color: var(--warning, #d97706); font-weight: 600; }
.ares__dot { opacity: .5; }
.ares__tabs { display: flex; gap: 4px; padding: 3px; margin-bottom: 16px; background: var(--fill-subtle); border-radius: 10px; }
.ares__tab { flex: 1; border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; padding: 8px; border-radius: 8px; cursor: pointer; }
.ares__tab small { font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.ares__tab:hover { color: var(--text-primary); }
.ares__tab.is-active { background: var(--surface-3); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ares__panel[hidden] { display: none; }
.ares__empty { color: var(--text-muted); text-align: center; padding: 24px; }
.ares__group { margin-bottom: 18px; }
.ares__gh { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0 2px 8px; }
.ares__gh small { font-weight: 600; margin-left: 4px; }
.ares__group.is-active .ares__gh { color: var(--success); }
.ares__group.is-left .ares__gh { color: var(--warning, #d97706); }
.ares__note { font-size: 12.5px; color: var(--text-muted); margin: -4px 2px 8px; }
.ares__row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ares__row + .ares__row { margin-top: 6px; }
.ares__row--more { display: block; padding: 0; }
.ares__row--more > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ares__row--more > summary::-webkit-details-marker { display: none; }
.ares__row--more > summary:hover { background: var(--fill-hover); border-radius: 10px; }
.ares__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ares__meta { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ares__score { margin-left: auto; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.ares__chev { color: var(--text-muted); transition: transform .15s ease; }
.ares__row--more[open] .ares__chev { transform: rotate(180deg); }
.ares__bar { margin-left: auto; flex: 0 0 110px; height: 5px; border-radius: 3px; background: var(--fill-subtle); overflow: hidden; }
.ares__bar i { display: block; height: 100%; background: var(--success); transition: width .6s ease; }
.ares__live { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: ares-pulse 1.6s infinite; }
@keyframes ares-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .ares__live { animation: none; } }
.ares__online { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ares__row.is-left { background: transparent; }
.ares__reopen { margin-left: auto; flex: none; }
.ares__answers { list-style: none; margin: 0; padding: 4px 14px 10px; border-top: 1px solid var(--line); }
.ares__ans { display: flex; gap: 10px; padding: 10px 0; font-size: 13.5px; }
.ares__ans + .ares__ans { border-top: 1px solid var(--line); }
.ares__mark { flex: none; width: 18px; }
.ares__mark svg { width: 16px; height: 16px; }
.ares__ans.is-right .ares__mark { color: var(--success); }
.ares__ans.is-wrong .ares__mark { color: var(--danger); }
.ares__anstext { min-width: 0; flex: 1; }
.ares__prompt { font-weight: 500; margin-bottom: 4px; overflow-wrap: anywhere; }
.ares__given { color: var(--text-secondary); overflow-wrap: anywhere; }
.ares__ans.is-wrong .ares__given strong { color: var(--danger); }
.ares__ans.is-right .ares__given strong { color: var(--success); }
.ares__correct { margin-left: 10px; }
.ares__correct strong { color: var(--success) !important; }
.ares__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ares__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text-secondary); }
.ares__q { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ares__q + .ares__q { margin-top: 10px; }
.ares__qmeta { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.ares__qtext { font-size: 15px; margin-bottom: 10px; overflow-wrap: anywhere; }
.ares__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ares__opt { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; overflow-wrap: anywhere; }
.ares__opt svg { width: 14px; height: 14px; vertical-align: -2px; }
.ares__opt.is-right { border-color: var(--success); color: var(--success); font-weight: 600; }
.ares__opt--inline { display: inline-block; }
.ares__opt.is-wrong { border-color: var(--danger); color: var(--danger); }
.ares__answers--review { margin-top: 14px; padding: 0; border-top: 0; }
.ares__answers--review .ares__opts { margin: 8px 0; }
.ares__explain { margin-top: 6px; }
.ares__why { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 6px; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 560px) {
  .ares__opts { grid-template-columns: 1fr; }
  .ares__row { flex-wrap: wrap; }
  .ares__bar { flex-basis: 100%; margin-left: 19px; }
  .ares__row--more > summary { flex-wrap: wrap; }
  .ares__meta { flex-basis: 100%; order: 3; margin-left: 0; }
}

/* Messages on a phone: the title and "New message" sit on the page like every
   other page's header, above the conversation list, not in a card of their own. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  .tab-panel#tab-inbox .page-header { background: transparent; border-bottom: 0; padding: 4px 0 16px; }
}

/* A home figure still on its way: a quiet bar in the value's place. */
.stat-value .stat-skeleton { display: inline-block; width: 1.1em; height: 0.7em; vertical-align: middle; }

/* Portal: a tapped class dims while it opens, so the tap is visibly taken. */
#student-portal-screen .is-opening { opacity: .55; transition: opacity .15s ease; pointer-events: none; }

/* ── Colour where it means something ─────────────────────────────────────
   The earlier pass made every topic type one grey chip and every figure one
   colour, which left the pages flat. Colour returns only where it carries
   information: the kind of topic, a figure worth noticing, the page you are on. */

/* Topic types: a quiet hue each, so a unit reads at a glance. */
.topic-type-badge[class*="vocabulary"] { --tt: 214; }
.topic-type-badge[class*="grammar"] { --tt: 265; }
.topic-type-badge[class*="communication"] { --tt: 22; }
.topic-type-badge[class*="functional"] { --tt: 330; }
.topic-type-badge[class*="phonetic"], .topic-type-badge[class*="pronunciation"] { --tt: 188; }
.topic-type-badge[class*="reading"] { --tt: 150; }
.topic-type-badge[class*="cultur"] { --tt: 170; }
.topic-type-badge[class*="assessment"], .topic-type-badge[class*="review"] { --tt: 40; }
:root .topic-type-badge.topic-type-badge {
  background: hsla(var(--tt, 220), 55%, 60%, .13);
  color: hsl(var(--tt, 220), 60%, 76%);
  border-color: hsla(var(--tt, 220), 55%, 60%, .28);
}
[data-theme="light"] .topic-type-badge.topic-type-badge {
  background: hsla(var(--tt, 220), 60%, 45%, .09);
  color: hsl(var(--tt, 220), 55%, 36%);
  border-color: hsla(var(--tt, 220), 55%, 45%, .22);
}
/* Types with no hue of their own (mixed, concept, overview) stay neutral. */
.topic-type-badge.topic-type-badge:not([class*="vocabulary"]):not([class*="grammar"]):not([class*="communication"]):not([class*="functional"]):not([class*="phonetic"]):not([class*="pronunciation"]):not([class*="reading"]):not([class*="cultur"]):not([class*="assessment"]):not([class*="review"]) {
  background: var(--fill-subtle); color: var(--text-secondary); border-color: var(--line);
}

/* Student home figures: mastery in the accent with a meter beneath it; a
   strong-topics count above zero in green (weak topics were already red). */
#student-stats .stat-card--mastery { position: relative; }
#student-stats .stat-card--mastery .stat-value { color: var(--accent-light, var(--accent)); }
[data-theme="light"] #student-stats .stat-card--mastery .stat-value { color: var(--accent); }
#student-stats .stat-card--mastery::after {
  content: ""; position: absolute; left: 0; right: 24px; bottom: 10px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--m, 0%), var(--fill-subtle) var(--m, 0%));
}
#student-stats .stat-value.success { color: #4ade80; }
[data-theme="light"] #student-stats .stat-value.success { color: #15803d; }

/* Current unit: its number as a small accent eyebrow; rows answer the pointer. */
#student-current-chapter .unit-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
#student-current-chapter .topic-item { border-radius: 8px; transition: background .15s ease; }
#student-current-chapter .topic-item:hover { background: var(--accent-soft); }

/* Sidebar: the page you are on carries the accent. */
.nav-tabs .nav-tab.active { box-shadow: inset 3px 0 0 var(--accent); }
.nav-tabs .nav-tab.active .tab-icon { color: var(--accent); }
[data-theme="light"] #student-stats .stat-card--mastery::after { background: linear-gradient(90deg, var(--accent) var(--m, 0%), var(--line-subtle) var(--m, 0%)); }
@media (max-width: 768px) { #student-stats .stat-card--mastery::after { bottom: 3px; right: 12px; } }

/* Daily practice allowance: a quiet line over the practice list, and the
   limit screen when it is used up. */
.practice-quota { margin: 0 0 var(--space-4); font-size: 13px; color: var(--text-muted); }
.practice-quota.is-empty { color: var(--warning, #d9a441); }
.practice-limit { padding: 40px 24px; text-align: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
.practice-limit h3 { margin-bottom: 8px; }
.practice-limit p { color: var(--text-muted); margin: 0 auto 24px; max-width: 46ch; }
/* Student card: a fourth figure, today's activities, with its reset. */
.sdetail__stats:has(#sdetail-quota) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .sdetail__stats:has(#sdetail-quota) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#sdetail-quota { display: flex; flex-direction: column; }
#sdetail-quota.is-full .sdetail__stat-value { color: var(--warning); }
.sdetail__quota-reset { margin-top: auto; align-self: stretch; justify-content: center; gap: 6px; border-color: var(--accent-line); color: var(--accent); }
#sdetail-quota .sdetail__stat-value { margin-bottom: var(--space-3); }
.sdetail__quota-reset:disabled { border-color: var(--line); color: var(--text-muted); opacity: .6; cursor: default; }

/* Toasts: the site's own surface, with a small tinted mark for the tone
   instead of a coloured side stripe. */
.toast {
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  font-size: var(--fs-sm);
}
.toast__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft);
}
.toast__mark svg { width: 12px !important; height: 12px !important; display: block !important; }
.toast--success .toast__mark { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.toast--error .toast__mark { color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, transparent); }
.toast__text { min-width: 0; }

/* Touch press feedback (set by tapFeedbackOnTouch in app.js, touch screens
   only). The pressed control shows it at once, with no fade-in: a tint laid
   over whatever its background is; filled buttons darken a touch. */
:root { --press-overlay: rgba(255, 255, 255, 0.045); }
[data-theme="light"] { --press-overlay: rgba(11, 47, 97, 0.045); }
.is-pressing { transition: none !important; }
.press-release { transition-duration: 0.1s !important; transition-delay: 0s !important; }
.is-pressing:not(.btn-primary):not(.btn-danger):not(input):not(select):not(textarea) { box-shadow: inset 0 0 0 999px var(--press-overlay) !important; }
.btn-primary.is-pressing, .btn-danger.is-pressing { filter: brightness(0.94); }

/* Message box: focus is the gold border alone, no halo around it. */
.msgr__composer textarea:focus { box-shadow: none; }

/* Text fields: focus is the gold border alone everywhere, no halo. Checkboxes,
   radios and sliders keep their ring, since they have no border to recolour. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus, textarea:focus,
.input:focus, .select:focus, .textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.text-input:focus, .select-input:focus, .fill-blank-input:focus { box-shadow: none; }

/* Navigation: a thin line at the top while a page is still loading (shown
   only past a short wait, see navProgress in app.js). */
.nav-progress {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  height: 2px; z-index: calc(var(--z-toast) + 1);
  background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  pointer-events: none;
}
.nav-progress.is-active {
  opacity: 1; transform: scaleX(0.82);
  transition: transform 6s cubic-bezier(0.08, 0.7, 0.2, 1), opacity 0.12s ease;
}
.nav-progress.is-done {
  opacity: 0; transform: scaleX(1);
  transition: transform 0.18s ease-out, opacity 0.22s ease 0.16s;
}
@media (prefers-reduced-motion: reduce) { .nav-progress { display: none; } }

/* Textbook upload: analysis progress, its error line, the "read from the
   book" note in the architect, and the page range beside units and topics. */
.pdf-analysis { margin-top: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); }
.pdf-analysis__head { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-3); }
.pdf-analysis__head span:last-child { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pdf-analysis__bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
#pdf-analysis-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width 0.4s ease; }
.pdf-analysis__error { margin: var(--space-4) 0 var(--space-3); font-size: var(--fs-sm); color: var(--danger); }
.pdf-notice { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--accent-soft); color: var(--text-primary); font-size: var(--fs-sm); line-height: 1.5; }
.syllabus-pages { margin-inline-start: var(--space-3); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.topic-item > .syllabus-pages { margin-inline-start: 0; }

/* Curriculum editor (AI Architect and textbook review): theme surfaces instead
   of fixed dark washes, and on a phone the English and Turkish fields stack so
   each title is readable. */
#ai-curriculum-list { background: transparent !important; padding: 0 !important; }
#ai-curriculum-list .syllabus-chapter { background: var(--surface-1) !important; border: 1px solid var(--line) !important; }
#ai-curriculum-list input.text-input { background: var(--surface-0) !important; }
@media (max-width: 560px) {
  #ai-curriculum-list .syllabus-chapter { padding: 12px !important; }
  #ai-curriculum-list .syllabus-chapter > div[style*="grid-template-columns"],
  #ai-curriculum-list .topic-item > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #ai-curriculum-list .topic-item { align-items: flex-start !important; padding-bottom: 8px; border-bottom: 1px solid var(--line-subtle, var(--line)); }
  #ai-curriculum-list .topic-item > div[style*="grid-template-columns"] { min-width: 0; }
}

/* ── Password show/hide ── */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 44px !important; }
.pw-eye { position: absolute; z-index: 101 !important; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; }
.pw-eye:hover { color: var(--text-primary); background: var(--fill-hover); }
.pw-eye svg { width: 18px; height: 18px; }

/* ── Notifications ── */
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif-badge[hidden] { display: none; }
.notif-panel { position: fixed; z-index: 3000; top: 64px; right: 16px; width: min(380px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 96px)); display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-overlay); overflow: hidden; }
.notif-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.notif-item { padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.notif-item:hover { background: var(--fill-hover); }
.notif-item.is-unread .notif-item__text { font-weight: 600; color: var(--text-primary); }
.notif-item.is-unread::before { content: ''; float: right; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.notif-item__text { font-size: 14px; color: var(--text-secondary); overflow-wrap: anywhere; }
.notif-item__meta { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.notif-empty { padding: 24px; text-align: center; color: var(--text-muted); }

/* ── Dashboards ── */
#student-dash-extra { margin-block: 16px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); }
.dash-row:last-child { border-bottom: 0; }
.dash-row[data-clickable] { cursor: pointer; }
.dash-row__main { display: flex; flex-direction: column; min-width: 0; }
.dash-row__main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row__main small { font-size: 12px; color: var(--text-muted); }
.dash-row__side { display: flex; gap: 6px; align-items: center; flex: none; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dash-empty { margin: 0; color: var(--text-muted); font-size: 14px; }
.dash-missed { margin: 10px 0 0; font-size: 13px; color: var(--danger); }
.dash-sub { margin: 14px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.risk-sub { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.risk-item[data-clickable] { cursor: pointer; }
#dash-upcoming-card { grid-column: 1 / -1; }
.meta-chip.tone-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.meta-chip.tone-warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }

/* ── Quiz timer ── */
.quiz-header { display: flex; align-items: center; justify-content: space-between; }
.quiz-timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.quiz-timer.is-low { color: var(--danger); border-color: var(--danger); }
.listrow.is-flash { box-shadow: inset 0 0 0 2px var(--accent); transition: box-shadow .3s; }

/* At-risk rows: name and score on one line, short reason chips under it. */
.risk-row { padding: 12px 0; border-bottom: 1px solid var(--line-subtle); cursor: pointer; }
.risk-row:last-child { border-bottom: 0; }
.risk-row:hover .risk-name { color: var(--accent-light, var(--accent)); }
.risk-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.risk-score { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
.risk-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.risk-flag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--text-secondary); background: var(--fill-subtle); }
.risk-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; opacity: .8; }
.risk-flag--low_mastery, .risk-flag--low_scores { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.risk-flag--missed_deadline, .risk-flag--unfinished { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.risk-flag--inactive { color: var(--text-muted); }
.risk-row .risk-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; }

/* Notifications: delete one or all */
.notif-panel__acts { display: flex; gap: 2px; }
.notif-clear { color: var(--danger); }
.notif-item { position: relative; padding-right: 56px; }
/* The unread dot sits in its own lane between the text and the delete button, never under the text. */
.notif-item.is-unread::before { position: absolute; right: 40px; top: 16px; float: none; margin: 0; }
.notif-del { position: absolute; top: 8px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; opacity: .55; }
.notif-item:hover .notif-del, .notif-del:focus-visible { opacity: 1; }
.notif-del:hover { color: var(--danger); background: var(--fill-hover); }

/* Calendar */
.cal { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cal { grid-template-columns: minmax(0, 1fr); } }
.cal-main { padding: 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-size: 18px; text-transform: capitalize; }
.cal-nav { display: flex; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); padding: 4px 6px; }
.cal-day { min-height: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; text-align: left; border: 1px solid var(--line-subtle); border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; min-width: 0; }
.cal-day:hover { background: var(--fill-hover); }
.cal-day.is-out { opacity: .4; }
.cal-day.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.is-today .cal-num { background: var(--accent); color: var(--accent-contrast, #111); }
.cal-num { align-self: flex-start; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip { display: block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; background: var(--fill-subtle); }
.cal-chip--quiz, .cal-dot--quiz, .cal-item--quiz .cal-item__bar { color: #60a5fa; }
.cal-chip--assignment, .cal-dot--assignment, .cal-item--assignment .cal-item__bar { color: #f59e0b; }
.cal-chip--plan, .cal-dot--plan, .cal-item--plan .cal-item__bar { color: #a78bfa; }
.cal-chip--reminder, .cal-dot--reminder, .cal-item--reminder .cal-item__bar { color: var(--accent); }
.pcal-bell { margin-inline-end: 3px; font-size: 10px; }
/* Portal calendar side form: a personal reminder or a class plan. */
.pcal-kind { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: var(--fill-subtle); }
.pcal-kind button { min-height: 32px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.pcal-kind button:hover { color: var(--text-primary); }
.pcal-kind button.is-on { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line); }
.pcal-kind__hint { margin: 2px 2px 4px; font-size: 12px; color: var(--text-muted); }
.pcal-item.is-reminder .pcal-course { color: var(--accent); }
.cal-chip.is-done { opacity: .55; text-decoration: line-through; }
.cal-chip.is-missed { color: var(--danger); }
.cal-more { font-size: 11px; color: var(--text-muted); padding-left: 4px; }
.cal-dots { display: none; gap: 3px; margin-top: auto; }
.cal-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.cal-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-side { display: flex; flex-direction: column; gap: 16px; }
.cal-side .card-header h3 { text-transform: capitalize; }
.cal-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); }
.cal-item:last-of-type { border-bottom: 0; }
.cal-item[data-clickable] { cursor: pointer; }
.cal-item__bar { width: 4px; align-self: stretch; border-radius: 4px; background: currentColor; flex: none; }
.cal-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-item__main strong { font-size: 14px; }
.cal-item__main small { font-size: 12px; color: var(--text-muted); }
.cal-item__main p { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); white-space: pre-wrap; }
.cal-status { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fill-subtle); color: var(--text-secondary); }
.cal-status.is-done { color: var(--success); }
.cal-status.is-missed { color: var(--danger); }
.cal-status.is-unfinished { color: var(--warning); }
.cal-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-subtle); }
.cal-form__row { display: flex; gap: 8px; align-items: center; }
.cal-form__row .text-input[name="title"] { flex: 1; min-width: 0; }
.cal-form__row input[type="time"] { width: 110px; flex: none; }
.cal-form__row .btn { margin-left: auto; }
.cal-form textarea { resize: none; }
.cal-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.cal-up { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; }
.cal-up__t { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-up small { color: var(--text-muted); font-size: 12px; flex: none; }
@media (max-width: 600px) {
  .cal-day { min-height: 52px; padding: 4px; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; }
}
.notif-panel__acts .btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ── Portal calendar (every class) ── */
/* A page of its own: the portal steps aside and the calendar scrolls with the
   document (an overlay with its own scroller stuttered on iPhone and slid
   under the status bar). */
html.pcal-open body > .screen, html.pcal-open body > .site-footer { display: none !important; }
.pcal { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--surface-0);
  padding: calc(env(safe-area-inset-top, 0px) + 24px) max(16px, calc((100vw - 1320px) / 2)) calc(env(safe-area-inset-bottom, 0px) + 48px); }
.pcal__loading { display: grid; place-items: center; min-height: 60vh; }
.pcal__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pcal__title { margin: 0; font-family: var(--font-display); font-size: 28px; }
.pcal__sub { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.pcal__close { font-size: 26px; line-height: 1; }
.pcal__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.pcal-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line-subtle); border-radius: 12px; background: var(--surface-1, transparent); }
.pcal-stat span { font-size: 12.5px; color: var(--text-muted); }
.pcal-stat strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.pcal__filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pcal-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pcal-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.pcal-chip > i:not(.cal-dot) { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); opacity: .4; }
.pcal-chip.is-on { color: var(--text-primary); border-color: color-mix(in srgb, var(--cc, var(--accent)) 60%, var(--line)); background: color-mix(in srgb, var(--cc, var(--accent)) 12%, transparent); }
.pcal-chip.is-on > i:not(.cal-dot) { opacity: 1; }
.pcal-chip--type.is-on { border-color: var(--line); background: var(--fill-subtle); }
.pcal-views { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pcal-views button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; }
.pcal-views button.is-on { background: var(--fill-subtle); color: var(--text-primary); font-weight: 600; }
.pcal-daychip { border-left-color: var(--cc) !important; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.pcal-daychip .cal-dot { width: 6px; height: 6px; }
.pcal-item .cal-item__bar { color: var(--cc); }
.pcal-course { font-size: 12px; font-weight: 700; color: var(--cc); }
.pcal-list { padding: 8px 16px 16px; }
.pcal-list__group h4 { margin: 16px 0 4px; font-size: 13px; color: var(--text-muted); text-transform: capitalize; }
.pcal-list__group.is-late h4 { color: var(--danger); }
@media (max-width: 760px) { .pcal__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pcal-views { margin-left: 0; } }
.pcal-chip--all { color: var(--text-secondary); border-style: dashed; }
/* The theme / language pill stays usable over the portal calendar. */
html.pcal-open .floating-actions { z-index: 2600 !important; }
.pcal .pcal__footer { position: static; padding: 32px 0 0; padding-left: 0 !important; margin: 0; text-align: center; background: none; border: 0; }

/* All students (lecturer class picker): a compact roster. A student's classes
   show as up to two chips; the rest fold into one "+N" chip that opens the
   whole list in place ("Daralt" folds it back). Rows stay one height and
   nothing scrolls inside the table. */
.enr-list { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.enr-list.is-open { flex-wrap: wrap; }
.enr-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 12px; line-height: 18px; color: var(--text-secondary); background: transparent; white-space: nowrap; }
.enr-chip--extra { display: none; }
.enr-list.is-open .enr-chip--extra { display: inline-block; }
.enr-list.is-open .enr-more { display: none; }
.enr-less { display: none; cursor: pointer; color: var(--text-muted); border-style: dashed; }
.enr-list.is-open .enr-less { display: inline-block; }
.enr-less:hover { color: var(--text-primary); background: var(--surface-hover); }
.enr-less:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.enr-more { cursor: pointer; color: var(--text-primary); border-color: var(--text-muted); }
.enr-more:hover { background: var(--surface-hover); }
.enr-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 601px) {
  #admin-students-panel .data-table { font-size: 13.5px; table-layout: fixed; }
  /* Fixed columns, so opening one student's class list never reflows the others. */
  #admin-students-panel .data-table th:nth-child(1) { width: 16%; }
  #admin-students-panel .data-table th:nth-child(2) { width: 12%; }
  #admin-students-panel .data-table th:nth-child(3) { width: auto; }
  #admin-students-panel .data-table th:nth-child(4) { width: 7%; }
  #admin-students-panel .data-table th:nth-child(5) { width: 8%; }
  #admin-students-panel .data-table th:nth-child(6) { width: 300px; }
  #admin-students-panel .data-table td:nth-child(1), #admin-students-panel .data-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #admin-students-panel .data-table thead th { padding: 8px 12px; }
  #admin-students-panel .data-table td { padding: 8px 12px; height: 46px; }
  #admin-students-panel .data-table td.actions { white-space: nowrap; text-align: right; }
  #admin-students-panel .data-table td.actions { display: table-cell; }
  #admin-students-panel .data-table td.actions > .btn + .btn { margin-left: 4px; }
  #admin-students-panel .data-table td.actions .btn { padding: 4px 10px; font-size: 12.5px; min-height: 0; }
  #admin-students-panel .data-table .badge { font-size: 11.5px; }
}
@media (max-width: 600px) { .enr-list { flex-wrap: wrap; } }
.enr-list.is-open { flex-wrap: wrap; }
/* Class codes copy on click (app.js). */
.nav-course-code, .drawer__course-code, .classroom-card__code, .classroom-code { cursor: pointer; transition: color var(--transition-fast); }
@media (hover: hover) and (pointer: fine) {
  .nav-course-code:hover, .drawer__course-code:hover, .classroom-card__code:hover, .classroom-code:hover { color: var(--accent); }
}
/* Content map: the topic name is a plain link to its material (app.js). */
a.topic-open { color: inherit; text-decoration: none; cursor: pointer; transition: color var(--transition-fast); }
@media (hover: hover) and (pointer: fine) { a.topic-open:hover { color: var(--accent); } }
/* Deadlines in list rows (app.js _dueState). */
.due-text.is-danger { color: var(--danger); font-weight: 600; }
.due-text.is-warning { color: var(--warning); font-weight: 600; }

/* Student home: the topic breakdown opens on request. */
.dash-topics-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -24px 0 24px; padding: 4px 0;
  background: none; border: 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: 13px;
}
.dash-topics-toggle:hover { color: var(--text-primary); }
.dash-topics-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.dash-topics-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── One home per control ────────────────────────────────────────────────
   Inside a class the side menu is the home of every control: sections,
   search, the class list, notifications, language, appearance (which holds
   light/dark) and the account. On a phone or tablet the same menu opens from
   the menu button (app.js mirrors it into the drawer) without language and
   appearance, which stay in the floating pill there; the top bar keeps only
   the menu button and the brand. */
@media (max-width: 1024px) {
  .screen > .topnav .notif-btn,
  .screen > .topnav .nav-lang-btn,
  .screen > .topnav .nav-appearance-btn,
  .screen > .topnav .account-btn { display: none !important; }
  html.has-unread-notifs .mobile-menu-btn::after {
    content: ''; position: absolute; top: 6px; right: 5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface-nav, var(--surface-0));
  }
}

/* Phones and tablets: the floating pill (appearance, language) stays inside a
   class too, and the page ends above it. */
@media (max-width: 1024px) {
  body:has(#lecturer-dashboard.active) .floating-actions,
  body:has(#student-dashboard.active) .floating-actions { display: block; }
  body:has(#lecturer-dashboard.active) .site-footer,
  body:has(#student-dashboard.active) .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  html.msgr-open .floating-actions { display: none !important; }
}

/* The drawer shows the mirrored side menu instead of its own list. */
.drawer__panel:has(> .drawer-rail) { background: var(--surface-0); width: min(288px, 86vw); }
.drawer__panel:has(> .drawer-rail) > :not(.drawer-rail) { display: none !important; }
.drawer-rail {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 12px calc(16px + env(safe-area-inset-bottom, 0px));
  font-size: 15px; color: var(--text-primary); text-align: start;
}
/* The top bar's flex rules must not reach the copy: nothing here grows to
   fill a tall screen; the list starts under the search field and the account
   row sits at the foot. */
.drawer-rail > * { flex: 0 0 auto !important; min-height: 0 !important; height: auto; }
.drawer-rail .nav-brand {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 0 8px 14px; padding: 0; cursor: pointer;
}
.drawer-rail .nav-logo-img { height: 32px !important; width: auto !important; margin: 0 0 18px; }
[data-theme="light"] .drawer-rail .logo-for-dark, :root:not([data-theme="light"]) .drawer-rail .logo-for-light { display: none !important; }
.drawer-rail .nav-badge { display: none !important; }
.drawer-rail .nav-course-name { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 15px; font-weight: 600; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-rail .nav-course-code { display: block !important; padding: 0 !important; margin: 0 !important; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.drawer-rail .nav-course-code.hidden { display: none !important; }
.drawer-rail .nav-back-btn {
  display: flex !important; align-items: center; gap: 8px; width: 100%;
  height: 40px; min-height: 40px !important; margin: 0 0 12px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-size: 13px; font-weight: 600; justify-content: flex-start;
}
.drawer-rail .nav-back-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.drawer-rail .nav-back-label { display: inline !important; }
.drawer-rail .palette-trigger {
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  height: 40px; margin: 0 0 10px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--fill-subtle);
  color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; text-align: start;
}
.drawer-rail .palette-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.drawer-rail .palette-trigger__label { display: inline !important; }
.drawer-rail .palette-trigger__kbd { display: none !important; }
.drawer-rail .nav-tabs {
  display: flex !important; flex-direction: column; gap: 2px; flex: 1 0 auto !important;
  justify-content: flex-start !important; align-content: flex-start !important; align-items: stretch !important;
  margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); overflow: visible;
  position: static; background: none; box-shadow: none; transform: none;
}
.drawer-rail .nav-tab {
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  min-height: 40px !important; height: 40px; padding: 0 10px; margin: 0; flex: 0 0 auto !important;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-size: 14px; font-weight: 500; justify-content: flex-start;
  position: relative;
}
.drawer-rail .nav-tab[style*="display:none"], .drawer-rail .nav-tab[style*="display: none"] { display: none !important; }
.drawer-rail .nav-tab.active { background: var(--fill-subtle); color: var(--text-primary); box-shadow: inset 3px 0 0 var(--accent); }
.drawer-rail .nav-tab .tab-icon { display: inline-flex; width: 17px; height: 17px; }
.drawer-rail .nav-tab .tab-icon svg { width: 17px; height: 17px; stroke-width: 2; }
.drawer-rail .nav-tab.active .tab-icon { color: var(--accent); }
.drawer-rail .nav-tab .tab-label { display: inline !important; }
.drawer-rail .nav-user {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center;
  margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line);
  color: var(--text-secondary);
}
/* Notifications, Refresh, account: one size, one weight, evenly spaced. */
.drawer-rail .nav-user > * {
  display: inline-grid !important; place-items: center; position: relative;
  width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 12px !important;
  background: transparent !important; color: var(--text-secondary) !important;
}
.drawer-rail .nav-user > * > svg { width: 20px !important; height: 20px !important; stroke-width: 1.9; }
.drawer-rail .nav-user .avatar { width: 30px !important; height: 30px !important; font-size: 11px !important; }
.drawer-rail .nav-user .notif-badge { position: absolute; top: 4px; right: 3px; }
.drawer-rail .nav-user > *:active { background: var(--fill-hover) !important; }


/* iOS paints a grey box over anything tapped that has a click handler (the
   brand in the top bar, rows, cards). Controls here show their own pressed
   state, so the system highlight is off everywhere. */
html,
.nav-brand, .nav-brand *, [onclick], [data-clickable], button, a, label, summary {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
.nav-brand { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Student home: with the topic breakdown closed the to-do card stands alone;
   at full width its scores sat a screen away from their titles. It keeps a
   reading width instead. */
#student-dash-extra:not(.grid-2col) > .card { max-width: 640px; }

/* Keep the controls within the current visual viewport, including keyboard
   resize/scroll events. Safe-area clearance comes from CSS, not device guesses. */
html.ios-standalone.ios-keyboard-open .floating-actions { visibility: hidden; }
html.ios-standalone .floating-actions {
  top: max(var(--app-top, 0px), calc(var(--app-top, 0px) + var(--app-h, 100dvh) - var(--pill-height, 50px) - max(12px, env(safe-area-inset-bottom, 0px))));
  bottom: auto;
}

/* A finished class whose lessons are ready but a unit assessment is missing:
   a calm notice with a retry, not the red "rebuild" error. */
.classroom-card__notice {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 35%, transparent);
  background: color-mix(in srgb, var(--warning, #f59e0b) 8%, transparent);
}
.classroom-card__notice p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary, inherit);
}
.classroom-card__notice .btn {
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 45%, transparent);
  border-radius: 8px;
}
.classroom-card__notice--danger {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 35%, transparent);
  background: color-mix(in srgb, var(--danger, #ef4444) 8%, transparent);
}
.classroom-card__notice--danger p { color: var(--danger, #ef4444); }
.classroom-card__notice--danger .btn { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, transparent); }

/* Student roster: header with an action, permanent students, add-to-class list */
.page-header--actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header--actions > .btn { display: inline-flex; align-items: center; gap: 6px; }
.meta-chip--permanent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}
.meta-chip--permanent svg { width: 12px; height: 12px; }
.listrow__actions .btn.is-permanent { color: var(--accent); }
.btn svg[aria-hidden="true"] + span { vertical-align: middle; }
#add-student-list .pick-row { cursor: default; }
#add-student-list .pick-row.is-done { opacity: 0.6; }
#add-student-list .pick-row__action.is-muted { opacity: 1; color: var(--text-secondary); font-weight: 500; }
#add-student-list .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }

/* Course roster, compact: one line of facts per student and four icon
   actions in a fixed-width column, so the row never pushes past the page and
   the columns line up whether or not a student can be removed. Labels stay as
   tooltips and accessible names. */
#student-roster .listrow {
  gap: 14px;
  min-height: 0;
  padding-block: 8px;
}
#student-roster .listrow__marker { width: 30px; height: 30px; }
#student-roster .listrow__title { font-size: 14px; }
#student-roster .listrow__meta { margin-top: 2px; font-size: 12px; }
@media (min-width: 601px) {
  #student-roster .listrow__meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  #student-roster .listrow__meta > * { flex-shrink: 0; }
}
#student-roster .listrow__bar { margin-top: 6px; max-width: 420px; }
#student-roster .listrow__actions {
  display: grid;
  grid-template-columns: repeat(4, 32px);
  gap: 4px;
}
#student-roster .listrow__actions .lbl { display: none; }
#student-roster .listrow__actions .btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  gap: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}
#student-roster .listrow__actions .btn svg { width: 15px !important; height: 15px !important; }
#student-roster .listrow__slot { width: 32px; height: 32px; }
@media (pointer: coarse) {
  #student-roster .listrow__actions { grid-template-columns: repeat(4, 40px); }
  #student-roster .listrow__actions .btn, #student-roster .listrow__slot { width: 40px; height: 40px; }
}
#student-roster .listrow__meta .badge {
  height: 18px;
  min-height: 0;
  padding: 0 7px;
  font-size: 11px;
  line-height: 18px;
}
#student-roster .listrow__meta { line-height: 18px; }
@media (max-width: 600px) {
  /* On a phone the actions sit under the name instead of squeezing it. */
  #student-roster .listrow { grid-template-columns: auto minmax(0, 1fr); row-gap: 6px; }
  #student-roster .listrow__actions { grid-column: 2 / 3; justify-content: start; }
  #student-roster .listrow__slot { display: none; }
}

/* All students (admin): four icon actions in a fixed column, so the table
   fits its card instead of running past the right edge. */
#admin-students-panel td.admin-actions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}
#admin-students-panel td.admin-actions > * + * { margin-left: 4px; }
#admin-students-panel td.admin-actions .btn {
  vertical-align: middle;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}
#admin-students-panel td.admin-actions .btn.is-permanent { color: var(--accent); }
#admin-students-panel .admin-actions__slot { display: inline-block; width: 32px; height: 32px; vertical-align: middle; }
#admin-students-panel td.admin-name { white-space: nowrap; }
#admin-students-panel td.admin-name .meta-chip--permanent { vertical-align: -2px; margin-left: 4px; }
@media (max-width: 600px) {
  #admin-students-panel td.admin-actions { text-align: left; width: auto; }
}

/* Quizzes and assignments: move between questions, change an answer. */
.option-btn.is-selected {
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.assess-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-subtle, var(--border));
}
.assess-nav > .btn { flex-shrink: 0; }
.assess-nav > .btn:disabled { opacity: 0.4; pointer-events: none; }
.assess-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.assess-dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line, var(--border));
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.assess-dot:hover { border-color: var(--accent); color: var(--text-primary); }
.assess-dot.is-done { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.assess-dot.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--text-primary); }
@media (max-width: 600px) {
  .assess-nav { flex-wrap: wrap; }
  .assess-dots { order: -1; width: 100%; }
  .assess-nav > .btn { flex: 1; }
}

/* While a quiz or assignment is open, its list (with its Start / Continue
   buttons) steps aside; it returns on Save and exit or on submitting. */
#tab-s-assignments:has(#assignment-taking-area:not(.hidden)) #student-assignment-list,
#tab-s-quizzes:has(#quiz-taking-area:not(.hidden)) #student-quiz-list { display: none; }

/* A blank question in results: neither right nor wrong. */
.ares__ans.is-blank .ares__mark { color: var(--text-muted); }
.ares__blankmark { display: inline-block; width: 14px; text-align: center; font-weight: 700; }

/* Notifications: the first few, then "Show all". */
.notif-more { flex: 0 0 auto; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.notif-more:hover { background: var(--fill-hover); }

/* All students: search, presence dot, compact rows, "Show more". */
.admin-stu__head { flex-wrap: wrap; gap: 8px 12px; }
.admin-stu__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.admin-stu__search { width: 220px; max-width: 100%; height: 34px; padding: 6px 10px; font-size: 13.5px; }
.admin-stu__select { width: auto; max-width: 180px; height: 34px; padding: 4px 28px 4px 10px; font-size: 13px; }
.admin-stu__tools { flex-wrap: wrap; justify-content: flex-end; }
.admin-stu__row { cursor: pointer; }
.admin-stu__row:hover { background: var(--fill-hover); }
.admin-stu__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.admin-stu__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; }
.admin-stu__dot.is-online { background: var(--success); }
.admin-stu__dot.is-pending { background: var(--warning); }
.admin-stu__none td { padding: 16px 12px; color: var(--text-muted); text-align: center; }
.admin-stu__foot:empty { display: none; }
.admin-stu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 4px 2px; font-size: 13px; color: var(--text-muted); }
.admin-stu__range { font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 2px; }
.pager__btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.pager__btn:hover:not(:disabled) { background: var(--fill-hover); color: var(--text-primary); }
.pager__btn.is-on { border-color: var(--line-strong, var(--line)); color: var(--text-primary); font-weight: 600; }
.pager__btn:disabled { opacity: .35; cursor: default; }
.pager__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pager__gap { padding: 0 4px; }
.admin-stu__size { display: inline-flex; align-items: center; gap: 8px; }
.admin-stu__size .select-input { width: auto; height: 32px; padding: 2px 28px 2px 10px; font-size: 13px; }
@media (max-width: 600px) {
  .admin-stu__foot { justify-content: center; }
  .pager { order: -1; width: 100%; justify-content: center; }
}
@media (min-width: 601px) {
  #admin-students-panel .admin-stu__table th:nth-child(1) { width: 30%; }
  #admin-students-panel .admin-stu__table th:nth-child(2) { width: 15%; }
  #admin-students-panel .admin-stu__table th:nth-child(3) { width: auto; }
  #admin-students-panel .admin-stu__table th:nth-child(4) { width: 10%; }
  #admin-students-panel .admin-stu__table td { height: 40px; padding: 6px 12px; }
}
@media (max-width: 600px) {
  .admin-stu__tools { width: 100%; margin-left: 0; }
  .admin-stu__search { flex: 1 1 100%; width: auto; }
  .admin-stu__select { flex: 1 1 0; min-width: 0; max-width: none; }
  .admin-stu__tools .lbl { display: none; }
  /* One student in two short lines: name and actions, then number and classes. */
  #admin-students-panel .admin-stu__table tr.admin-stu__row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "num enr"; align-items: center; gap: 2px 10px; padding: 8px 12px; margin-bottom: 6px; }
  #admin-students-panel .admin-stu__table td:first-child { grid-area: name; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #admin-students-panel .admin-stu__table td.mono { grid-area: num; font-size: 12.5px; }
  #admin-students-panel .admin-stu__table td.enr-cell { grid-area: enr; min-width: 0; overflow: hidden; }
  #admin-students-panel .admin-stu__table .enr-list:not(.is-open) { flex-wrap: nowrap; }
  #admin-students-panel .admin-stu__table td.mono::before,
  #admin-students-panel .admin-stu__table td.enr-cell::before { content: none; }
  #admin-students-panel .admin-stu__table td.num { display: none; }
}

/* A student's profile from All students: one folding section per class. */
.sdetail__class { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--surface-1); }
.sdetail__class > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.sdetail__class > summary::-webkit-details-marker { display: none; }
.sdetail__class > summary::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform var(--transition-fast, .15s); }
.sdetail__class[open] > summary::before { transform: rotate(45deg); }
.sdetail__class-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdetail__class-sum { display: inline-flex; align-items: baseline; gap: 10px; flex: 0 0 auto; font-size: 13px; }
.sdetail__class-avg { font-weight: 700; }
.sdetail__class-n { color: var(--text-muted); }
.sdetail__class-body { padding: 0 14px 14px; }
.sdetail__class-body .sdetail__stats { margin-top: 0; }
.sdetail__class-body .sdetail__h { margin-top: 16px; font-size: 14px; }
.sdetail__class .stat-skeleton { display: inline-block; width: 48px; height: 14px; }

/* Class cards open on a click anywhere; no separate "Enter class" button. */
.classroom-card.is-openable { cursor: pointer; }
.classroom-card.is-openable:hover { border-color: var(--accent); }
.classroom-card.is-openable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.classroom-card__wait { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 13px; text-align: center; }

/* A search hit opened from the quick switcher, in the site's own accent (so
   it follows the theme and any custom colour scheme): a light tint of the
   accent behind the word and an accent underline, like the active states
   elsewhere on the site. It arrives a little stronger and then settles. */
mark.search-hit {
  color: var(--text-primary); background-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 4px; padding: 0 3px; margin: 0 -1px;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color 1.2s ease, text-decoration-color 1.2s ease;
}
mark.search-hit.is-first { animation: search-hit-in .6s ease-out both; }
mark.search-hit.is-settled { background-color: color-mix(in srgb, var(--accent) 9%, transparent); text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); }
@keyframes search-hit-in { from { background-color: color-mix(in srgb, var(--accent) 34%, transparent); } }
@media (prefers-reduced-motion: reduce) { mark.search-hit.is-first { animation: none; } }

/* Admin: sign-in lockouts. */
.admin-lock { margin-top: 16px; }
.admin-lock__hint { margin: 0 0 12px; }
.admin-lock__empty { margin: 4px 0 12px; color: var(--text-secondary); }
.admin-lock__who { font-weight: 600; }
.admin-lock .data-table td { overflow-wrap: anywhere; min-width: 0; }
.admin-lock__whobox { min-width: 0; }
.admin-lock__act { text-align: right; white-space: nowrap; }
.admin-lock__history { margin-top: 12px; }
.admin-lock__note { margin: 12px 0 0; font-size: 12px; }

/* ── Study time and the week's leader (student home) ───────────────── */
.study-time { margin-bottom: var(--space-6, 24px); }
.study-time__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.study-time__mine { display: flex; gap: 32px; flex-wrap: wrap; }
.study-time__big { font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; }
.study-time__mid { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; }
.study-time__rank { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.study-time__lead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-light, var(--accent)); }
.study-time__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.study-time__row { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: var(--radius, 4px); }
.study-time__row:first-child { background: var(--accent-soft, rgba(197, 160, 89, .16)); font-weight: 600; }
.study-time__row.is-me { outline: 1px solid var(--accent-line, rgba(197, 160, 89, .34)); }
.study-time__row em { font-style: normal; color: var(--text-muted); font-weight: 400; }
.study-time__pos { width: 1.2em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.study-time__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-time__secs { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.study-time__cheer { margin: 8px 0 0; font-weight: 600; color: var(--accent-light, var(--accent)); }
.study-time__empty, .study-time__last { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 768px) {
  .study-time__body { grid-template-columns: 1fr; gap: 18px; }
  .study-time__big { font-size: 26px; }
}

/* ── Settings (settings.js) ────────────────────────────────────────── */
.settings-card { max-width: 520px; width: calc(100vw - 32px); }
.settings-card h2 { margin: 0 0 18px; }
.settings-sec { padding: 16px 0; border-top: 1px solid var(--line, rgba(255,255,255,.1)); }
.settings-sec__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.settings-buddy { display: flex; gap: 16px; align-items: flex-start; }
.settings-buddy__art { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: var(--radius-lg, 6px);
  background: var(--surface-3, rgba(0,0,0,.2)); image-rendering: pixelated; }
.settings-buddy__main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-weight: 600; cursor: pointer; }
.settings-switch.is-disabled { opacity: .55; cursor: default; }
.settings-switch__btn { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong, rgba(255,255,255,.22)); transition: background .15s; }
.settings-switch__btn[aria-checked="true"] { background: var(--accent); }
.settings-switch__btn:disabled { cursor: default; }
.settings-switch__dot { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.settings-switch__btn[aria-checked="true"] .settings-switch__dot { left: 21px; }
.settings-switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.settings-ed { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.settings-ed__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.settings-ed__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-ed__opt { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer; border-radius: var(--radius, 4px);
  border: 1px solid var(--line, rgba(255,255,255,.1)); background: var(--surface-3, rgba(0,0,0,.2)); image-rendering: pixelated; }
.settings-ed__opt.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.settings-ed__swatch { width: 22px; height: 22px; border-radius: 4px; }
.settings-ed__foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.settings-ed__spacer { flex: 1; }
.settings-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
@media (max-width: 480px) {
  .settings-buddy { flex-direction: column; }
  .settings-ed__opt { width: 40px; height: 40px; }
}