/* ==========================================================================
   Classwise LMS — enterprise design system
   --------------------------------------------------------------------------
   A single neutral canvas, white surfaces, 1px borders, one restrained blue
   accent. Dense but breathable, business-grade, built for long working days.

   Written for a bilingual EN/AR product: every directional rule uses CSS
   logical properties (inline-start / inline-end), so the whole interface
   mirrors correctly under dir="rtl" with no separate stylesheet.

   Order of business:
     01  tokens
     02  reset + base
     03  typography + text utilities
     04  application shell (sidebar, top bar, drawer)
     05  layout primitives
     06  surfaces
     07  buttons
     08  forms
     09  status: pills, chips, tags
     10  data: tables, listings, meters, stats
     11  navigation: tabs, segmented, in-page nav
     12  overlays: modals, search, side panel, toast
     13  learning: courses, modules, items, reading
     14  assessment: quizzes, attempts, results
     15  marking + feedback
     16  care, discussion, reporting, governance
     17  dashboard instruments (the HUD kit)
     18  skills board
     19  sign-in
     20  motion, responsive, print
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */
:root {
  /* canvas + surfaces */
  --canvas: #F5F6F8;
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --subtle: #F9FAFB;
  --subtle-2: #F3F4F6;

  /* lines */
  --line: #E3E6EA;
  --line-strong: #D3D8DF;
  --hairline: #E3E6EA;          /* legacy alias, still referenced in templates */

  /* text */
  --ink: #1F2937;
  --ink-strong: #111827;
  --muted: #6B7280;
  --faint: #9CA3AF;

  /* the single accent */
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
  --accent-tint: #EFF6FF;
  --accent-tint-2: #DBEAFE;
  --accent-ink: #1E40AF;
  --ring: rgba(37, 99, 235, 0.35);
  --primary: #2563EB;           /* legacy alias */
  --gold: #2563EB;              /* legacy alias — deliberately NOT gold */

  /* semantic */
  --success: #059669;  --success-bg: #ECFDF5;  --success-ink: #065F46;
  --warn:    #B45309;  --warn-bg:    #FFFBEB;  --warn-ink:    #92400E;
  --danger:  #DC2626;  --danger-bg:  #FEF2F2;  --danger-ink:  #991B1B;
  --info:    #0369A1;  --info-bg:    #F0F9FF;  --info-ink:    #075985;

  /* legacy dark-theme aliases, remapped onto the light system so any
     template that still asks for them stays readable and neutral */
  --dk: #FFFFFF;
  --dk-raised: #F9FAFB;
  --dk-ink: #1F2937;
  --dk-muted: #6B7280;
  --dk-line: #E3E6EA;

  /* type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --disp: var(--sans);          /* legacy alias: no display serif anywhere */
  --ar: var(--sans);
  --ar-ui: var(--sans);
  --mono: ui-monospace, SFMono-Regular, "IBM Plex Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 30px;

  /* radii */
  --r-xs: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* elevation — deliberately almost nothing */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-2: 0 2px 6px rgba(16, 24, 40, 0.07);
  --sh-pop: 0 10px 30px rgba(16, 24, 40, 0.13);

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* shell metrics */
  --aside-w: 240px;
  --topbar-h: 56px;

  /* meter track */
  --track: #EEF0F3;

  /* subject palette — distinguishable, never neon, dark enough to carry text */
  --hue-amber: #B45309;
  --hue-rose: #BE123C;
  --hue-teal: #0F766E;
  --hue-violet: #6D28D9;
  --hue-green: #15803D;
  --hue-blue: #1D4ED8;
  --hue-slate: #475569;

  --skill-hi: #059669;
  --skill-mid: #B45309;
  --skill-low: #DC2626;
}

/* ------------------------------------------------------------ 02 reset/base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
/* a body class left over from the old two-theme build: both resolve light */
body.day, body.night { background: var(--canvas); color: var(--ink); }

img, svg, canvas, video { max-width: 100%; }
svg { vertical-align: middle; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

hr, .rule {
  border: 0;
  border-block-start: 1px solid var(--line);
  margin-block: var(--s4);
}

ul, ol { list-style: none; }
.prose ul, .prose ol, .objectives ul, .prose-sheet ul, .prose-sheet ol { list-style: revert; padding-inline-start: 1.25rem; }

::selection { background: var(--accent-tint-2); color: var(--ink-strong); }

/* ------------------------------------------------------- 03 typography/text */
h1, h2, h3, h4, h5, .disp {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
h1 { font-size: var(--fs-h1); line-height: 1.22; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }
.hero-title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.015em; }

p { font-size: inherit; }

.kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tagline { font-size: var(--fs-md); color: var(--muted); }

.small { font-size: var(--fs-sm); }
.tiny, .qtiny { font-size: var(--fs-xs); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono, .gref { font-family: var(--mono); font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.native { font-family: var(--ar); }
.right, .num.right { text-align: end; }
.nowrap { white-space: nowrap; }

.under, .hint, .note, .lt {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hint, .qtiny { display: block; margin-block-start: var(--s1); }
.under { margin-block-start: var(--s1); }

.prose { max-width: 68ch; }
.prose p + p, .prose > * + * { margin-block-start: 0.7em; }

strong, b { font-weight: 600; color: var(--ink-strong); }
em { font-style: normal; color: var(--muted); }

/* key / value pairs used all over the product */
.k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.v { font-size: var(--fs-md); color: var(--ink-strong); font-weight: 600; }

/* a copyable reference code (module ref, grid ref, ledger ref) */
.gref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--subtle);
  color: var(--muted);
  cursor: copy;
  letter-spacing: 0.02em;
}
.gref:hover { border-color: var(--accent); color: var(--accent); }

/* AI-authored text. Marked, not decorated: a dashed accent underline that
   opens the audit-ledger entry behind the sentence. */
.gild {
  color: var(--accent-ink);
  border-block-end: 1px dashed rgba(37, 99, 235, 0.45);
  cursor: pointer;
}
.gild:hover { background: var(--accent-tint); border-block-end-color: var(--accent); }
.gild-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

/* --------------------------------------------------------------- 04 shell */
.app { display: flex; align-items: stretch; min-height: 100vh; }

/* ..................................................... sidebar */
.aside {
  flex: 0 0 var(--aside-w);
  width: var(--aside-w);
  position: sticky;
  inset-block-start: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 35;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  flex: none;
  padding-inline: var(--s4);
  border-block-end: 1px solid var(--line);
  color: var(--ink-strong);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; background: var(--subtle); }
.wordmark-mark {
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--r);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
}
.wordmark-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wordmark-t b { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wordmark-mark.wm-school { font-size: 11px; letter-spacing: 0; }
.wordmark-t span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navgroups { flex: 1 1 auto; padding: var(--s3) var(--s2) var(--s4); }
.navlabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  padding: var(--s3) var(--s3) var(--s2);
}
.navgroups > .navlabel:first-child { padding-block-start: var(--s1); }

.nav-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px var(--s3);
  margin-block-end: 1px;
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-row svg { flex: none; width: 16px; height: 16px; color: var(--faint); }
.nav-row span { overflow: hidden; text-overflow: ellipsis; }
.nav-row:hover { background: var(--subtle-2); color: var(--ink-strong); text-decoration: none; }
.nav-row:hover svg { color: var(--muted); }
.nav-row.on {
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-weight: 600;
}
.nav-row.on svg { color: var(--accent); }
.nav-row.on::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 5px;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.nav-row .count {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--subtle-2);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

.asidefoot {
  flex: none;
  padding: var(--s3) var(--s4);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--faint);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ..................................................... main column */
.appmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-bare .appmain { flex: 1 1 100%; }

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-inline: var(--s4);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.topbar-title { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: var(--s2); }
.pagetitle {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagetitle:empty::before { content: attr(data-fallback); color: var(--faint); }
.topbar-end { display: flex; align-items: center; gap: var(--s2); flex: none; }

/* icon-only top bar control */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding-inline: 7px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.iconbtn:hover { background: var(--subtle-2); color: var(--ink-strong); text-decoration: none; }
.iconbtn svg { width: 16px; height: 16px; }

.navtoggle { display: none; }

/* search affordance in the top bar */
.searchbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding-inline: var(--s2) 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--subtle);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  min-width: 200px;
}
.searchbtn:hover { border-color: var(--line-strong); background: #fff; color: var(--ink); }
.searchbtn svg { width: 15px; height: 15px; flex: none; }
.searchbtn .cmd-k {
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0 4px;
  background: #fff;
}

/* language switch */
.langswitch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.langswitch form { display: contents; }
.langswitch button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  height: 30px;
  min-width: 34px;
  cursor: pointer;
}
.langswitch button + button, .langswitch form + form button { border-inline-start: 1px solid var(--line); }
.langswitch button:hover { background: var(--subtle-2); color: var(--ink-strong); }
.langswitch button.active { background: var(--accent); color: #fff; }

/* notifications */
.notifbell { position: relative; }
.badge-count {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* campus switcher */
.campusswitch { display: inline-flex; align-items: center; gap: 6px; }
.campusswitch .dotmark {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); flex: none;
}
.campusswitch select {
  height: 32px;
  max-width: 190px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  padding-inline: var(--s2) var(--s5);
}
.campusswitch button { display: none; }   /* the select submits on change */

/* user menu */
.usermenu { position: relative; }
.usermenu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 32px;
  padding-inline: 6px var(--s2);
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary svg { width: 13px; height: 13px; color: var(--faint); flex: none; }
.usermenu-pop svg { width: 15px; height: 15px; color: var(--faint); flex: none; }
.usermenu-pop .out svg { color: currentColor; }
.usermenu > summary:hover { background: var(--subtle-2); }
.usermenu[open] > summary { background: var(--subtle-2); border-color: var(--line); }
.userchip { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink); }
.userchip .dot, .usermenu .dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-tint-2);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex: none;
  text-transform: uppercase;
}
.usermenu .who { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-pop {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  padding: var(--s2);
  z-index: 60;
}
.usermenu-id { padding: var(--s2) var(--s3) var(--s3); border-block-end: 1px solid var(--line); margin-block-end: var(--s2); }
.usermenu-id b { display: block; font-size: var(--fs-md); }
.usermenu-id span { font-size: var(--fs-xs); color: var(--muted); text-transform: capitalize; }
.usermenu-pop a, .usermenu-pop button {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 7px var(--s3);
  border: 0;
  border-radius: var(--r);
  background: transparent;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.usermenu-pop a:hover, .usermenu-pop button:hover { background: var(--subtle-2); text-decoration: none; }
.usermenu-pop form { display: block; }
.usermenu-pop .out { color: var(--danger); }
.usermenu-pop .out:hover { background: var(--danger-bg); }

/* main content region */
main { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------- 05 layout */
.wrap { max-width: 1320px; margin: 0 auto; padding: var(--s5) var(--s6) var(--s6); }
.wrap.tight { max-width: 900px; }
.wrap.narrow, .narrow { max-width: 680px; }

.pagehead {
  display: flex;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
  flex-wrap: wrap;
  margin-block-end: var(--s5);
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--line);
}
.pagehead h1 { font-size: var(--fs-h2); }
.pagehead h1 + .kicker, .pagehead .gref { margin-block-end: 3px; }
.pagehead > .kicker { flex-basis: 100%; margin-block-end: -6px; order: -1; }
.pagehead .grow { flex: 1 1 auto; }
.pagehead p.small { flex-basis: 100%; color: var(--muted); margin-block-start: -2px; }

.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack.tight { gap: var(--s2); }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.inline { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

.cols { display: grid; gap: var(--s4); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-31 { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
.cols-13 { grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }

/* the dashboard's twelve-column grid */
.dash { display: grid; gap: var(--s4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dash > * { grid-column: span 12; }
@media (min-width: 900px) {
  .dash .c3 { grid-column: span 3; }
  .dash .c4 { grid-column: span 4; }
  .dash .c5 { grid-column: span 5; }
  .dash .c6 { grid-column: span 6; }
  .dash .c7 { grid-column: span 7; }
  .dash .c8 { grid-column: span 8; }
  .dash .c9 { grid-column: span 9; }
}
.dash .c12 { grid-column: span 12; }

/* ----------------------------------------------------------- 06 surfaces */
.sheet, .plaque, .panel, .tile, .notice, .memo, .scorecard, .qcard,
.policycard, .coursecard, .latecard, .tk-card, .cmd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.sheet { padding: var(--s4) var(--s5); }
.sheet + .sheet, .plaque + .plaque, .sheet + .plaque, .plaque + .sheet { margin-block-start: var(--s4); }
.sheet.compact { padding: var(--s3) var(--s4); }
.sheet.quiet, .plaque.quiet { background: var(--subtle); box-shadow: none; }

.plaque { padding: var(--s3) var(--s4); }

.sheet-title, .plaque-title, .panel-head, .cs-head, .module-head,
.simmatch-head, .qres-head, .pillar-head, .post-head, .cmd-cardhead, .tk-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.sheet-title, .plaque-title {
  margin-block-end: var(--s3);
  padding-block-end: var(--s3);
  border-block-end: 1px solid var(--line);
}
.sheet-title h2, .sheet-title h3, .plaque-title h3, .plaque-title h2 { font-size: var(--fs-lg); flex: 1 1 auto; }
.sheet-title .grow, .plaque-title .grow { flex: 1 1 auto; }
.plaque-title { margin-block-end: var(--s2); padding-block-end: var(--s2); }

.panel { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.panel > h2, .panel > .panel-head h2, .panel > .panel-head h3 {
  font-size: var(--fs-md);
  font-weight: 600;
}
.panel-head { justify-content: space-between; gap: var(--s2); }
.panel-head .note, .panel .note { font-size: var(--fs-xs); color: var(--muted); }
.panel .rule { margin-block: var(--s2); }
.panel.calm { background: var(--subtle); box-shadow: none; }
.panel.headline { border-inline-start: 3px solid var(--accent); }

/* a panel's headline number */
.figure {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.figure.sm { font-size: var(--fs-h3); }
.figure.big { font-size: 34px; }

/* callouts */
.notice {
  padding: var(--s3) var(--s4);
  border-inline-start: 3px solid var(--line-strong);
  font-size: var(--fs-sm);
  box-shadow: none;
}
.notice.ok, .notice.good { background: var(--success-bg); border-color: #C3EBD9; border-inline-start-color: var(--success); color: var(--success-ink); }
.notice.warn { background: var(--warn-bg); border-color: #F3E3BE; border-inline-start-color: var(--warn); color: var(--warn-ink); }
.notice.danger, .notice.bad { background: var(--danger-bg); border-color: #F6CFCF; border-inline-start-color: var(--danger); color: var(--danger-ink); }
.notice.info { background: var(--info-bg); border-color: #CFE6F5; border-inline-start-color: var(--info); color: var(--info-ink); }
.notice strong { color: inherit; }

.errbox, .errorbox, .flagbox, .dangerzone {
  background: var(--danger-bg);
  border: 1px solid #F6CFCF;
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  color: var(--danger-ink);
}
.dangerzone { border-inline-start: 3px solid var(--danger); }
.dangerzone .kicker { color: var(--danger); }
.confirmbox, .optbox, .answerbox, .studentanswer, .feedbackbox, .memo,
.reading .prose-sheet, .prose-sheet, .simpassage, .latebody, .replybox textarea {
  background: var(--surface);
}

.banner, .offline-banner {
  background: var(--warn-bg);
  border-block-end: 1px solid #F3E3BE;
  color: var(--warn-ink);
  font-size: var(--fs-sm);
  padding: var(--s2) var(--s4);
  text-align: center;
}

/* ------------------------------------------------------------ 07 buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding-inline: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--subtle-2); border-color: var(--line-strong); color: var(--ink-strong); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.btn svg { width: 15px; height: 15px; }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); font-weight: 500; }
.btn.ghost:hover { background: var(--subtle-2); color: var(--ink-strong); }

.btn.danger { background: var(--surface); border-color: #F0B9B9; color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }
.btn.danger.primary { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.primary:hover { background: #B91C1C; border-color: #B91C1C; }

.btn.small { height: 28px; padding-inline: var(--s2); font-size: var(--fs-xs); }
.btn.big { height: 40px; padding-inline: var(--s4); font-size: var(--fs-md); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--line-strong); }

/* button rows */
.toolbar, .toolrow, .savebar, .approvebar, .submitbar, .rowactions,
.studio-actions, .cs-actions, .modactions, .filterbar, .inlineform, .checkrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.savebar, .approvebar, .submitbar {
  margin-block-start: var(--s4);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
}
.savebar, .approvebar { justify-content: flex-end; }
.approvebar { gap: var(--s3); }
.toolbar { margin-block-end: var(--s3); }
.filterbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s3);
  margin-block-end: var(--s4);
  align-items: flex-end;
}
.filterbar .field { margin: 0; min-width: 160px; }
.inlineform { display: inline-flex; gap: 6px; }
.rowactions { justify-content: flex-end; gap: 6px; }

/* -------------------------------------------------------------- 08 forms */
label { display: block; }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="search"], input[type="url"],
input:not([type]), textarea, select {
  width: 100%;
  min-height: 34px;
  padding: 6px var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.4;
}
select {
  appearance: none;
  padding-inline-end: var(--s5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
[dir="rtl"] select { background-position: left 10px center; }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--faint); }

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--ring);
  outline-offset: 0;
  border-color: var(--accent);
}
input:disabled, textarea:disabled, select:disabled,
input[readonly], textarea[readonly] {
  background: var(--subtle-2);
  color: var(--muted);
  cursor: not-allowed;
}
input[readonly]:focus, textarea[readonly]:focus { outline-color: var(--line-strong); border-color: var(--line-strong); }

.field { display: block; margin-block-end: var(--s3); }
.field > .kicker, .field > label, .field > .lab {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-block-end: 5px;
  display: block;
}
.field > .hint { margin-block-start: 5px; color: var(--faint); }

.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
.formgrid .span2, .span2 { grid-column: 1 / -1; }
.fieldrow { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.fieldrow > * { flex: 1 1 180px; min-width: 0; }
.fieldrow > .btn, .fieldrow > button { flex: 0 0 auto; }

.check, .checkrow label {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
}
.check input[type="checkbox"], .check input[type="radio"] {
  width: 15px; height: 15px; min-height: 0;
  accent-color: var(--accent);
  flex: none;
  margin: 0;
}
.check + .check { margin-inline-start: var(--s4); }

/* segmented control (small mode pickers) */
.segmented {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.segmented .seg {
  padding: 6px var(--s3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-inline-end: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.segmented .seg:last-child { border-inline-end: 0; }
.segmented .seg input { position: absolute; opacity: 0; pointer-events: none; }
.segmented .seg.on, .segmented .seg:has(input:checked) { background: var(--accent-tint); color: var(--accent-ink); }
.segmented .seg:hover { background: var(--subtle-2); }

/* authoring widgets */
.editor, .optbox, .answerbox {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3);
  background: var(--subtle);
}
.editor textarea { background: var(--surface); }
.optline { display: flex; align-items: center; gap: var(--s2); margin-block-end: 6px; }
.optline input[type="text"] { flex: 1 1 auto; }
.filerow, .checkrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.filerow:last-child, .checkrow:last-child { border-block-end: 0; }

.chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.choice:hover, .choice:focus-visible { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; }
.choice strong { font-size: var(--fs-sm); }

.addactivity > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  padding: 6px 0;
}
.addactivity > summary::-webkit-details-marker { display: none; }
.addactivity[open] > summary { margin-block-end: var(--s2); }

/* --------------------------------------------------- 09 pills/chips/tags */
.pill, .chip, .kindtag, .badge, .agenttag, .itype, .flag, .gradechip,
.catch-chip, .eclipse-chip, .sub-let {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.pill {
  padding: 2px 9px;
  background: var(--subtle-2);
  color: var(--muted);
}
.pill.ok, .pill.good { background: var(--success-bg); color: var(--success-ink); }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill.danger, .pill.bad { background: var(--danger-bg); color: var(--danger-ink); }
.pill.info { background: var(--info-bg); color: var(--info-ink); }
.pill.accent { background: var(--accent-tint); color: var(--accent-ink); }

.chip {
  padding: 2px 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}
.chip:empty { display: none; }
/* the legacy "gold" chip, restyled as a neutral accent chip */
.chip.gold { background: var(--accent-tint); border-color: var(--accent-tint-2); color: var(--accent-ink); }
.chip.ok { background: var(--success-bg); border-color: #C3EBD9; color: var(--success-ink); }
.chip.warn { background: var(--warn-bg); border-color: #F3E3BE; color: var(--warn-ink); }
.chip.danger { background: var(--danger-bg); border-color: #F6CFCF; color: var(--danger-ink); }
.chip .swatch { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* bare .gold, wherever it is used on its own, is now simply accent text */
.gold { color: var(--accent-ink); }

.badge {
  padding: 3px var(--s2);
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.badge .glyph { font-size: var(--fs-sm); }
.badgerow { display: flex; gap: 6px; flex-wrap: wrap; }

.kindtag, .itype {
  padding: 1px 7px;
  background: var(--subtle-2);
  color: var(--muted);
  font-size: 11px;
  border-radius: var(--r-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.itype-quiz { background: #EDE9FE; color: #5B21B6; }
.itype-assignment { background: var(--accent-tint); color: var(--accent-ink); }
.itype-discussion { background: #FCE7F3; color: #9D174D; }
.itype-video { background: #FEF3C7; color: var(--warn-ink); }
.itype-page, .itype-resource { background: var(--subtle-2); color: var(--muted); }

.flag { padding: 1px 8px; background: var(--subtle-2); color: var(--muted); }
.flag.late, .flag.bad { background: var(--danger-bg); color: var(--danger-ink); }
.flag.soon, .flag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.flag.ok { background: var(--success-bg); color: var(--success-ink); }

.gradechip {
  padding: 2px var(--s2);
  border-radius: var(--r-xs);
  background: var(--subtle-2);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.gradechip.big { font-size: var(--fs-lg); padding: 4px 10px; }

.agentstrip { display: flex; gap: 6px; flex-wrap: wrap; }
.agenttag { padding: 2px 9px; background: var(--success-bg); color: var(--success-ink); font-size: 11px; }
.agenttag.off { background: var(--subtle-2); color: var(--faint); }

.lowrate { color: var(--danger); font-weight: 600; }
.legend { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* subject dot + subject hues */
.subject-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hue-slate);
  flex: none;
}
.hue-amber { background: var(--hue-amber); }
.hue-rose { background: var(--hue-rose); }
.hue-teal { background: var(--hue-teal); }
.hue-violet { background: var(--hue-violet); }
.hue-green { background: var(--hue-green); }
.hue-blue { background: var(--hue-blue); }
.hue-border-amber { border-inline-start: 3px solid var(--hue-amber); }
.hue-border-rose { border-inline-start: 3px solid var(--hue-rose); }
.hue-border-teal { border-inline-start: 3px solid var(--hue-teal); }
.hue-border-violet { border-inline-start: 3px solid var(--hue-violet); }
.hue-border-green { border-inline-start: 3px solid var(--hue-green); }
.hue-border-blue { border-inline-start: 3px solid var(--hue-blue); }

/* --------------------------------------------------------------- 10 data */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); }
thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--subtle);
  text-align: start;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: var(--s2) var(--s3);
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}
th { text-align: start; font-weight: 600; }
td {
  padding: 9px var(--s3);
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink);
}
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover > td { background: var(--subtle); }
td.num, th.num, td .num.right, .num.cell, td.right, th.right { text-align: end; font-variant-numeric: tabular-nums; }
td.rowactions { text-align: end; white-space: nowrap; }
td.rowactions .inlineform { justify-content: flex-end; }
caption { caption-side: bottom; font-size: var(--fs-xs); color: var(--muted); padding-block-start: var(--s2); text-align: start; }

.tablewrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: auto;
  box-shadow: var(--sh-1);
  max-height: 70vh;
}
.tablewrap table { font-size: var(--fs-sm); }
.tablewrap.scroll { max-height: 60vh; }

.registertable td, .histtable td, .prevtable td, .rubrictable td,
.pillartable td, .demo-accounts td { font-size: var(--fs-sm); }
.ledger { font-family: var(--mono); font-size: var(--fs-xs); }
.ledger td { padding: 6px var(--s2); white-space: nowrap; }
.ledger .purpose { white-space: normal; min-width: 220px; font-family: var(--sans); }

/* a grade grid: sticky first and last column */
.gradegrid th, .gradegrid td { white-space: nowrap; }
.gradegrid .sticky {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
}
.gradegrid thead .sticky { z-index: 4; background: var(--subtle); }
.gradegrid .sticky-end {
  position: sticky;
  inset-inline-end: 0;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  z-index: 3;
}
.cellscore {
  display: inline-block;
  min-width: 42px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--subtle-2);
  color: var(--ink);
}
.cellscore.good { background: var(--success-bg); color: var(--success-ink); }
.cellscore.mid { background: var(--warn-bg); color: var(--warn-ink); }
.cellscore.low, .cellscore.bad { background: var(--danger-bg); color: var(--danger-ink); }
.cellscore.pending { background: var(--accent-tint); color: var(--accent-ink); }
.cellscore.none { background: transparent; color: var(--faint); }
a.cellscore:hover { outline: 2px solid var(--ring); text-decoration: none; }

/* heat grid */
.heat td { padding: 0; border: 1px solid var(--line); }
.heat .cell { display: block; width: 100%; height: 24px; }
.heat thead th { background: var(--subtle); }

/* listings — the product's default row list */
.listing { display: block; }
.listing li, .carerow, .reportrow, .familyrow, .cluster, .gbrow,
.run-row, .tk-row, .namelist li, .hud-queue li, .minicourse, .pathlist li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px 0;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.listing li:last-child, .carerow:last-child, .reportrow:last-child,
.familyrow:last-child, .cluster:last-child, .namelist li:last-child,
.hud-queue li:last-child, .minicourse:last-child, .pathlist li:last-child { border-block-end: 0; }
.listing li:hover { background: var(--subtle); }
.listing li .grow { flex: 1 1 auto; min-width: 0; }
.listing .when, .hud-queue .when, .run-when {
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.listing li a { color: var(--ink); font-weight: 500; }
.listing li a:hover { color: var(--accent); }

.ticklist li {
  position: relative;
  padding-inline-start: 22px;
  padding-block: 3px;
  font-size: var(--fs-sm);
}
.ticklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 9px;
  width: 8px; height: 4px;
  border-inline-start: 1.6px solid var(--success);
  border-block-end: 1.6px solid var(--success);
  transform: rotate(-45deg);
}
.tickspace { padding-inline-start: 22px; }

/* meters + rails */
.meter, .track, .rail .track, .ga-bar, .rt-bar, .weightbar,
.sub-bar, .lift-bar, .stack3 .track, .slope .track, .hz-decay-track, .ga-fill {
  border-radius: var(--r-pill);
}
.meter {
  height: 6px;
  background: var(--track);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.meter.ok > i, .meter > i.ok { background: var(--success); }
.meter.warn > i, .meter > i.warn { background: var(--warn); }
.meter.danger > i, .meter > i.danger, .meter > i.low { background: var(--danger); }
.meter.tall { height: 8px; }

.rail { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.rail .lab { flex: 0 0 auto; min-width: 7em; color: var(--ink); }
.rail.thin .lab { min-width: 5em; font-size: var(--fs-xs); color: var(--muted); }
.rail .track { flex: 1 1 auto; height: 6px; background: var(--track); overflow: hidden; }
.rail .track.empty { background: repeating-linear-gradient(90deg, var(--track) 0 6px, transparent 6px 10px); }
.rail .fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.rail .fill.low { background: var(--danger); }
.rail .fill.mid { background: var(--warn); }
.rail .fill.good { background: var(--success); }
.rail .n { flex: 0 0 auto; min-width: 3.2em; text-align: end; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rail .n .under { display: inline; margin: 0; }

.weightbar { display: flex; height: 8px; background: var(--track); overflow: hidden; }
.wseg { height: 100%; }
.wseg.q { background: var(--accent); }
.wseg.p { background: #93B4F5; }
.weightsum { font-size: var(--fs-xs); color: var(--muted); }

/* stats */
.statrow, .tilerow, .statrow.two { display: flex; gap: var(--s5); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat .v, .stat .num {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.stat .k { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.stat.inline { flex-direction: row; align-items: baseline; gap: 6px; }
.stat.inline .num { font-size: var(--fs-lg); }

.tile { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.tile .n {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tile .l { font-size: var(--fs-xs); color: var(--muted); }
.tilerow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s4); font-size: var(--fs-sm); }
.kv dt, .kv .k { color: var(--muted); }
.kv dd, .kv .v { color: var(--ink); font-weight: 500; }

.dotgrid { display: flex; gap: 3px; flex-wrap: wrap; }
.dotgrid span { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.dotgrid span.hollow { background: var(--track); }

.propstrip { display: flex; gap: 2px; }
.propstrip span { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--success); }
.propstrip span.miss { background: var(--track); }

.stack3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.stack3 .lab { min-width: 7em; color: var(--muted); font-size: var(--fs-xs); }
.stack3 .track { flex: 1 1 auto; display: flex; height: 8px; background: var(--track); overflow: hidden; }
.stack3 .seg.done { background: var(--success); }
.stack3 .seg.none { background: var(--track); }
.stack3 .n { min-width: 3em; text-align: end; font-size: var(--fs-xs); color: var(--muted); }

.slope { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.slope .lab { min-width: 7em; color: var(--ink); }
.slope .track { position: relative; flex: 1 1 auto; height: 6px; background: var(--track); }
.slope .dot { position: absolute; inset-block-start: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); }
.slope .dot.a { background: var(--faint); }
.slope .dot.b { background: var(--accent); }
.slope .n { min-width: 3.4em; text-align: end; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.slope .n.up { color: var(--success); }
.slope .n.down { color: var(--danger); }

.reteach { display: flex; align-items: center; gap: var(--s2); }
.reteach .rt-bar { flex: 1 1 auto; height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.reteach .rt-bar span { display: block; height: 100%; background: var(--warn); }
.reteach .pctnum { font-size: var(--fs-xs); color: var(--muted); min-width: 3em; text-align: end; }

.namelist li { padding-block: 6px; }
.gbrow { justify-content: space-between; }
.w-name { flex: 1 1 auto; }
.w-num, .w-mid { font-variant-numeric: tabular-nums; text-align: end; }

/* register grid */
.register { display: flex; gap: 3px; flex-wrap: wrap; }
.register .day { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--faint); }
.register .mark {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: var(--success-bg);
  border: 1px solid #C3EBD9;
}
.register .mark.late { background: var(--warn-bg); border-color: #F3E3BE; }
.register .mark.absent { background: var(--danger-bg); border-color: #F6CFCF; }
.register .dl { font-size: 10px; color: var(--faint); }

/* ---------------------------------------------------- 11 navigation (tabs) */
.tabs, .coursenav, .gbnav, .itemnav, .adminnav, .skl-tabs, .studio-pick {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}
.tabs, .coursenav, .gbnav {
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s4);
  gap: var(--s5);
}
.tabs a, .coursenav a, .gbnav a, .skl-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--s2) 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  cursor: pointer;
  background: none;
  border-inline: 0;
  border-block-start: 0;
}
.tabs a:hover, .coursenav a:hover, .gbnav a:hover, .skl-tab:hover {
  color: var(--ink-strong);
  text-decoration: none;
  border-block-end-color: var(--line-strong);
}
.tabs a.active, .coursenav a.active, .gbnav a.active, .skl-tab.active {
  color: var(--accent-ink);
  font-weight: 600;
  border-block-end-color: var(--accent);
}
.coursenav .legend { margin-inline-start: auto; }

.adminnav {
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s1);
  margin-block-end: var(--s4);
  overflow-x: auto;
}
.adminnav a {
  padding: 6px var(--s3);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.adminnav a:hover { background: var(--subtle-2); color: var(--ink-strong); text-decoration: none; }
.adminnav a.active { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }

.itemnav { justify-content: space-between; margin-block-start: var(--s5); padding-block-start: var(--s4); border-block-start: 1px solid var(--line); }

/* ----------------------------------------------------------- 12 overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh var(--s4) var(--s4);
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: blur(2px);
}
.overlay.open { display: flex; }
.modal {
  width: min(680px, 100%);
  max-height: 84vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-pop);
  padding: var(--s4) var(--s5) var(--s5);
}
.modal.dark { background: var(--surface); color: var(--ink); }
.modal h3 { font-size: var(--fs-h3); }
.modal .sheet-title { margin-block-end: var(--s3); }

/* command search */
.overlay.search { padding-block-start: 12vh; }
.search .modal { padding: 0; overflow: visible; width: min(560px, 100%); }
.search input {
  width: 100%;
  height: 46px;
  min-height: 46px;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding-inline: var(--s4);
  font-size: var(--fs-lg);
  background: transparent;
}
.search input:focus { outline: 0; }
.search .results { max-height: 46vh; overflow: auto; padding: var(--s1); }
.search .res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.search .res:hover, .search .res.sel { background: var(--accent-tint); color: var(--accent-ink); }
.search .res .k {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--subtle-2);
  border-radius: var(--r-xs);
  padding: 1px 6px;
}

/* ledger detail list */
.ledger-line { display: grid; grid-template-columns: max-content 1fr; gap: 8px var(--s4); font-size: var(--fs-sm); }
.ledger-line dt { color: var(--muted); }
.ledger-line dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ledger-line .hash { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }

/* side panel */
.sidepanel {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(520px, 94vw);
  background: var(--surface);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--sh-pop);
  z-index: 95;
  padding: var(--s4) var(--s5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s ease;
}
[dir="rtl"] .sidepanel { transform: translateX(-100%); }
.sidepanel.open { transform: none; }
.sidepanel .close { position: absolute; inset-block-start: var(--s3); inset-inline-end: var(--s3); }

/* toast */
.toast {
  position: fixed;
  inset-block-end: var(--s5);
  inset-inline-start: 50%;
  transform: translate(-50%, 12px);
  z-index: 120;
  max-width: min(520px, 92vw);
  padding: 10px var(--s4);
  border-radius: var(--r);
  background: var(--ink-strong);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.aimark { border-inline-start: 3px solid #93B4F5; }

/* assessment lockout notice (was an eclipse) */
.eclipse {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--warn-bg);
  border: 1px solid #F3E3BE;
  border-radius: var(--r);
  color: var(--warn-ink);
  font-size: var(--fs-sm);
}
.eclipse .disc { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); flex: none; }
.eclipse-chip { padding: 2px 9px; background: var(--warn-bg); color: var(--warn-ink); }

/* ------------------------------------------------------- 13 learning UI */
.coursegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.coursecard { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.coursecard:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.coursecard h3 { font-size: var(--fs-lg); }
.cc-top { display: flex; align-items: center; gap: var(--s2); }
.cc-desc { font-size: var(--fs-sm); color: var(--muted); flex: 1 1 auto; }
.cc-foot { display: flex; align-items: center; gap: var(--s3); padding-block-start: var(--s3); border-block-start: 1px solid var(--line); }

.coursestrip .cs-head, .cs-head { justify-content: space-between; margin-block-end: var(--s3); }
.coursestrip .cs-head h3, .cs-head h3 { font-size: var(--fs-lg); }

.module { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-block-end: var(--s3); overflow: hidden; }
.module-head {
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  background: var(--subtle);
  border-block-end: 1px solid var(--line);
}
.module-head h3 { font-size: var(--fs-md); }
.module-prog { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); min-width: 140px; }
.module-prog .meter { flex: 1 1 auto; }
.module .rowactions { padding-inline-end: var(--s3); }

.itemlist { display: block; }
.itemlist li { border-block-end: 1px solid var(--line); }
.itemlist li:last-child { border-block-end: 0; }
.itemlist li a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s4);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.itemlist li a:hover { background: var(--subtle); text-decoration: none; color: var(--accent-ink); }
.itemlist li.is-done a { color: var(--muted); }
.itemlist li.unpublished, .hidden-item, .unpublished { background: repeating-linear-gradient(135deg, var(--subtle) 0 8px, #fff 8px 16px); }
.itemlist .tick { color: var(--success); font-size: var(--fs-sm); flex: none; }
.itemlist.compact li a { padding-block: 7px; }
.itemlist li .rowactions { padding-inline-end: var(--s3); }
.itemlist li .rowactions .btn { height: 26px; font-size: 11px; }

.itemhead { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s3); }

.objectives summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); padding-block: var(--s2); }
.objectives ul { margin-block-start: var(--s2); }

.announce {
  padding-block: var(--s3);
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.announce:last-child { border-block-end: 0; }

.prose-sheet { max-width: 72ch; font-size: var(--fs-lg); line-height: 1.7; }
.prose-sheet p { margin-block-end: 0.85em; }
.prose-sheet .block-h { font-size: var(--fs-h3); font-weight: 600; margin-block: 1.2em 0.5em; color: var(--ink-strong); }
/* lesson Markdown (lessonmd.py) */
.prose-sheet .block-h4 { font-size: var(--fs-lg); font-weight: 600; margin-block: 1em 0.4em; color: var(--ink-strong); }
.prose-sheet strong { font-weight: 650; color: var(--ink-strong); }
.prose-sheet code { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.88em;
  background: var(--subtle, #F3F4F6); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.3em; }
.prose-sheet pre.lesson-code { background: var(--subtle, #F3F4F6); border: 1px solid var(--line); border-radius: var(--r);
  padding: 0.75em 0.95em; overflow-x: auto; margin: 0 0 0.9em; direction: ltr; text-align: left; }
.prose-sheet pre.lesson-code code { background: none; border: 0; padding: 0; font-size: 0.82em; line-height: 1.55; white-space: pre; }
.prose-sheet .lesson-quote { margin: 0 0 0.9em; padding: 0.5em 0 0.5em 1em; border-inline-start: 3px solid var(--accent);
  color: var(--ink); font-style: italic; }
.prose-sheet ol.lesson-steps { margin: 0 0 0.9em; }
.prose-sheet ol.lesson-steps li { margin: 0.25em 0; }
.prose-sheet .lesson-table { overflow-x: auto; margin: 0 0 1em; }
.prose-sheet .lesson-table table { border-collapse: collapse; font-size: 0.92em; min-width: 50%; }
.prose-sheet .lesson-table th, .prose-sheet .lesson-table td { border: 1px solid var(--line); padding: 0.4em 0.7em; text-align: start; vertical-align: top; }
.prose-sheet .lesson-table th { background: var(--subtle, #F3F4F6); font-weight: 600; }
.prose-sheet hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.reading .prose-sheet { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }

.videoframe, .resourceframe {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--subtle-2);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.videoframe .play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: var(--fs-lg);
}
.filekind {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  background: var(--subtle-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.filekind.big { width: 44px; height: 44px; font-size: var(--fs-xs); }

.relevel-sheet, .promptsheet, .pathsheet {
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
}

.pathlist li { align-items: flex-start; }
.pathnum {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: grid;
  place-items: center;
}
.pathlist.big li { padding-block: var(--s3); }
.whyline { font-size: var(--fs-xs); color: var(--muted); }

.minicourses { display: block; }
.minicourse { justify-content: space-between; }
.minicourse:hover { background: var(--subtle); }

/* --------------------------------------------------------- 14 assessment */
.exambar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.exambar-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s3); }
.timer {
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
  background: var(--subtle-2);
  border-radius: var(--r);
  padding: 3px 10px;
}
.timer.warn { background: var(--warn-bg); color: var(--warn-ink); }
body.exam { background: var(--canvas); }

.qcard { padding: var(--s4) var(--s5); margin-block-end: var(--s4); }
.qnum {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--subtle-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  flex: none;
}
.qnum.ok { background: var(--success-bg); color: var(--success-ink); }
.qnum.bad { background: var(--danger-bg); color: var(--danger-ink); }
.qprompt { font-size: var(--fs-lg); line-height: 1.5; margin-block: var(--s2) var(--s3); }
.qopts { display: flex; flex-direction: column; gap: var(--s2); }
.qopt {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 10px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-md);
  cursor: pointer;
  background: var(--surface);
}
.qopt:hover { border-color: var(--accent); background: var(--accent-tint); }
.qopt.sel { border-color: var(--accent); background: var(--accent-tint); font-weight: 500; }
.qopt input { width: auto; min-height: 0; margin-block-start: 3px; accent-color: var(--accent); flex: none; }
.qshort textarea { min-height: 120px; }
.submitbar { justify-content: space-between; }

.scorecard { padding: var(--s5); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.scoredial {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--track) 0);
  flex: none;
}
.scoredial::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--surface);
}
.scoredial .num { position: relative; z-index: 1; font-size: var(--fs-h2); font-weight: 600; }
.scoredial .num small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

.qresult { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-block-end: var(--s3); overflow: hidden; }
.qresult.right { border-inline-start: 3px solid var(--success); }
.qresult.wrong { border-inline-start: 3px solid var(--danger); }
.qres-head { padding: var(--s3) var(--s4); background: var(--subtle); border-block-end: 1px solid var(--line); }
.qres-body { padding: var(--s3) var(--s4); font-size: var(--fs-sm); }
.answers { display: grid; gap: var(--s2); }
.ok-text { color: var(--success-ink); }
.bad-text { color: var(--danger-ink); }
.explain, .misc {
  background: var(--subtle);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
}
.misc { background: var(--warn-bg); color: var(--warn-ink); }
.qbar { display: flex; height: 8px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.qbar .seg.scripts { background: var(--accent); }
.qbar .seg.answers { background: var(--success); }

/* ------------------------------------------------- 15 marking + feedback */
.mark-row, .rubric-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s2);
  border-block-end: 1px solid var(--line);
}
.mark-row:last-child, .rubric-row:last-child { border-block-end: 0; }
.rubric-row .name, .mark-t { flex: 1 1 auto; font-size: var(--fs-sm); }
.rubric-row .bar { flex: 2 1 120px; }
.rubric-row .sc, .mark-score {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  min-width: 3.4em;
  text-align: end;
  color: var(--muted);
}
.mark-main { font-size: var(--fs-h2); font-weight: 600; font-variant-numeric: tabular-nums; }
.mark-of { font-size: var(--fs-sm); color: var(--muted); }

.simhead { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.simpct {
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r);
  background: var(--subtle-2);
  color: var(--ink);
}
.simpct.ok { background: var(--success-bg); color: var(--success-ink); }
.simpct.warn { background: var(--warn-bg); color: var(--warn-ink); }
.simpct.danger { background: var(--danger-bg); color: var(--danger-ink); }
.simmatch { border: 1px solid var(--line); border-radius: var(--r); margin-block-end: var(--s2); overflow: hidden; }
.simmatch-head { padding: var(--s2) var(--s3); background: var(--subtle); border-block-end: 1px solid var(--line); font-size: var(--fs-xs); }
.simpassage { padding: var(--s3); font-size: var(--fs-sm); line-height: 1.6; }
.simpassage mark, mark { background: var(--warn-bg); color: var(--warn-ink); border-radius: 2px; padding: 0 2px; }

.feedbackbox, .qdraft, .studentanswer, .memo {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.studentanswer { background: var(--subtle); white-space: pre-wrap; }
.qdraft { margin-block-end: var(--s3); }
.draft { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); margin-block-end: var(--s3); background: var(--surface); }
.draft .q textarea { font-size: var(--fs-md); }
.draft .expl { margin-block-start: var(--s2); }

.memo { background: var(--surface); box-shadow: var(--sh-1); padding: var(--s5); }
.memo h3 { margin-block-end: var(--s3); font-size: var(--fs-h3); }
.memo .fn { font-size: 10px; vertical-align: super; color: var(--accent); cursor: help; }
.memo .signature {
  margin-block-start: var(--s5);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.memo .signame { font-weight: 600; color: var(--ink-strong); }
.footnotes {
  margin-block-start: var(--s4);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* ---------------------------------------- 16 care, discussion, governance */
.carerow { justify-content: space-between; }
.carerow .who { font-weight: 600; }

.thread, .thread-list { display: flex; flex-direction: column; gap: var(--s3); }
.post {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s3) var(--s4);
}
.post.reply { margin-inline-start: var(--s6); background: var(--subtle); }
.post.flagged, .flagged { border-color: #F0B9B9; background: var(--danger-bg); }
.post-head { gap: var(--s2); margin-block-end: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-tint-2);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: grid;
  place-items: center;
  flex: none;
}
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.replybox summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.replybox textarea { margin-block-start: var(--s2); }

/* chat bubbles: tutor, course answers, teach-back */
.bubble {
  max-width: 46rem;
  padding: 10px var(--s3);
  border-radius: var(--r-lg);
  font-size: var(--fs-md);
  line-height: 1.55;
  border: 1px solid var(--line);
  background: var(--surface);
}
.bubble.user {
  align-self: flex-end;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-end-end-radius: 3px;
}
.bubble.user .meta, .bubble.user .small, .bubble.user .muted { color: rgba(255, 255, 255, 0.82); }
.bubble.coach { background: var(--surface); border-color: var(--line); border-end-start-radius: 3px; }
.bubble.coach.blocked { border-color: #F0B9B9; background: var(--danger-bg); }
.bubble .meta { display: flex; gap: 6px; margin-block-start: var(--s2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.coach-head { display: flex; align-items: center; gap: var(--s3); margin-block-end: var(--s4); }
.coach-skill {
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--subtle-2);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}

.reportrow, .familyrow { justify-content: space-between; }
.cluster { align-items: flex-start; flex-direction: column; gap: var(--s2); }

.pillar { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4); margin-block-end: var(--s3); }
.pillar-head { justify-content: space-between; margin-block-end: var(--s3); }
.pillar-head h3 { font-size: var(--fs-md); }
.pillar-num {
  width: 24px; height: 24px;
  border-radius: var(--r-xs);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  display: grid;
  place-items: center;
  flex: none;
}

.policygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.policycard { padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.policycard.off { background: var(--subtle); color: var(--muted); }

.run-row { justify-content: space-between; }
.run-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex: none; }
.run-main { flex: 1 1 auto; }
.run-sub, .run-t { font-size: var(--fs-xs); color: var(--muted); }

.sg-top, .cs-head, .catch { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sg-count { font-variant-numeric: tabular-nums; font-weight: 600; }
.sg-said, .sg-reason { font-size: var(--fs-sm); color: var(--ink); }
.sg-done { color: var(--success-ink); }
.catch-chip { padding: 2px 9px; background: var(--warn-bg); color: var(--warn-ink); }
.catch-n { font-weight: 600; font-variant-numeric: tabular-nums; }

.pupil-link { cursor: pointer; text-decoration: underline dotted var(--line-strong); text-underline-offset: 2px; color: var(--accent-ink); }
.pupil-link:hover { text-decoration-color: var(--accent); }

.campusline { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.campusline button {
  height: 28px;
  padding-inline: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.campusline button:hover { border-color: var(--accent); color: var(--accent); }

/* ----------------------------------------------- 17 dashboard instruments */
/* Plain, readable instruments: a donut, a bar set, a sparkline, a queue and
   a strip of figures. No decoration, no orbiting bodies, no glow. */
.hud-dial { position: relative; display: grid; place-items: center; }
/* the 135° start puts the open quarter of a three-quarter gauge at the
   bottom, so the empty part reads as "not yet" rather than as a gap */
.hud-dial svg { width: 100%; height: auto; max-width: 180px; transform: rotate(135deg); }
.hud-dial-track { fill: none; stroke: var(--track); stroke-width: 8; stroke-linecap: round; }
.hud-dial-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1);
}
.hud-dial.good .hud-dial-arc { stroke: var(--success); }
.hud-dial.warn .hud-dial-arc { stroke: var(--warn); }
.hud-dial.bad .hud-dial-arc { stroke: var(--danger); }
.hud-dial .readout {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hud-dial .readout .n { font-size: var(--fs-h2); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.hud-dial .readout .l { font-size: var(--fs-xs); color: var(--muted); }
.hud-ticks line { stroke: var(--line); stroke-width: 1; }

.hud-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.hud-bars .bar {
  flex: 1 1 0;
  min-width: 6px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
}
.hud-bars .bar.hot { background: var(--danger); }
.hud-bars .bar.cool { background: #93B4F5; }
.hud-barlabels { display: flex; gap: 4px; margin-block-start: 5px; }
.hud-barlabels span { flex: 1 1 0; text-align: center; font-size: 10px; color: var(--muted); }

.hud-spark svg { width: 100%; height: 44px; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark-fill { fill: var(--accent-tint); stroke: none; }
.spark-last { fill: var(--accent); }

.hud-queue { display: block; }
.hud-queue li { justify-content: space-between; }
.hud-queue .who { font-weight: 600; color: var(--ink-strong); }
.hud-queue .what { color: var(--muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hud-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: var(--s3); }
.hud-strip .cell { display: flex; flex-direction: column; gap: 1px; }
.hud-strip .cell .n { font-size: var(--fs-h3); font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.hud-strip .cell .l { font-size: 11px; color: var(--muted); }

.hud-next { display: flex; flex-direction: column; gap: 2px; }
.hud-next .t { font-size: var(--fs-sm); font-weight: 600; }
.hud-next .u { font-size: var(--fs-xs); color: var(--muted); }

/* a panel that needs attention: a red inline-start edge, never a colour wash */
.hud-grave, .panel.headline.hud-grave { border-inline-start: 3px solid var(--danger); }
.hud-grave .figure { color: var(--danger-ink); }
.under.grave { color: var(--danger-ink); }

.panel.headline .headfig { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.panel.headline .headfig .figure { font-size: 34px; }
.panel.headline .headfig .l { font-size: var(--fs-sm); color: var(--muted); }
.panel.headline .headsplit { display: flex; gap: var(--s5); flex-wrap: wrap; }

.latecard { padding: var(--s3) var(--s4); }
.latecard.calm { background: var(--subtle); box-shadow: none; }
.latebody { display: flex; align-items: center; gap: var(--s3); }
.latebody .lateage { display: flex; flex-direction: column; }
.latebody .lateage .figure { font-size: var(--fs-h3); }

.chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.resit { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.resit .c { font-weight: 600; }
.resit .u { color: var(--muted); font-size: var(--fs-xs); }

.fuse { display: flex; flex-direction: column; gap: 4px; }
.fuse .fuseline { display: flex; height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.fuse .fuseline span { display: block; height: 100%; background: var(--accent); }

.backrow { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.backrow .hud-dial svg { max-width: 80px; }
.backrow .hud-dial .readout .n { font-size: var(--fs-lg); }

/* the care scatter that used to be a sweeping radar: now a still plot */
.hud-sweep, .paper-sweep { display: grid; place-items: center; }
.hud-sweep svg { width: 100%; max-width: 260px; height: auto; }
.sweep-grid circle, .sweep-grid line { fill: none; stroke: var(--line); stroke-width: 1; }
.sweep-hand { display: none; }
.sweep-pupil { stroke: var(--surface); stroke-width: 1.5; }
.sweep-pupil.care { fill: var(--danger); }
.sweep-pupil.watch { fill: var(--warn); }
.sweep-pupil.steady { fill: var(--success); }

/* ------------------------------------------------------ 18 skills board */
.skillwrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.skillwrap canvas { display: block; width: 100%; background: var(--surface); }
.skl-legend { display: flex; gap: var(--s2); flex-wrap: wrap; padding: var(--s3); font-size: var(--fs-xs); color: var(--muted); }
.skl-hintbar, .skl-framelabel { font-size: var(--fs-xs); color: var(--muted); padding: var(--s2) var(--s3); }
.skl-tip {
  position: absolute;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-pop);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.skl-tip .t-name { font-weight: 600; }
.skl-tip .t-code { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.skl-insights::before, .skl-insights::after { content: none; }

.skl-board { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.board-head { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4); border-block-end: 1px solid var(--line); background: var(--subtle); }
.board-head strong { font-size: var(--fs-md); }
.skrow { border-block-end: 1px solid var(--line); }
.skrow:last-child { border-block-end: 0; }
.skrow-main { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); cursor: pointer; }
.skrow-main:hover { background: var(--subtle); }
.skrow.open .skrow-main { background: var(--accent-tint); }
.skdot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--hue-slate)); flex: none; }
.skname { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px var(--s2); }
.skunit { flex-basis: 100%; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.skbar { flex: 0 1 120px; height: 6px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
.skbar i { display: block; height: 100%; border-radius: var(--r-pill); }
.skpct { flex: 0 0 3.2em; text-align: end; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.skflag, .skstate { font-size: 11px; font-weight: 600; }
.skprac, .prac-q, .prac-opts, .prac-verdict { padding: var(--s3) var(--s4); border-block-start: 1px solid var(--line); background: var(--subtle); }
.prac-opts { display: grid; gap: var(--s2); border-block-start: 0; }
.prac-verdict { border-block-start: 0; font-size: var(--fs-sm); }
.skcta { display: flex; gap: var(--s2); }

/* --------------------------------------------------------- 19 sign-in */
.door {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s4);
  background: var(--canvas);
}
#doorcanvas { display: none; }
.door .hero-title { font-size: var(--fs-h1); text-align: center; }
.door .hero-title .native { display: block; font-size: var(--fs-h3); color: var(--muted); font-weight: 500; }
.door .tagline { text-align: center; color: var(--muted); margin-block-end: var(--s5); }
.door .kicker { text-align: center; }

.signin {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s5);
}
.signin label.kicker {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-block-end: 5px;
}
.signin input[type=text], .signin input[type=password] { margin-block-end: var(--s3); }
.signin .btn { width: 100%; }

.persona-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.persona {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.persona:hover { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; }
.persona .p-role { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.persona .p-name { font-weight: 600; color: var(--ink-strong); }
.persona .p-name-ar { font-size: var(--fs-xs); color: var(--muted); }

.demo-accounts { margin-block-start: var(--s4); font-size: var(--fs-sm); }
.demo-accounts summary { cursor: pointer; color: var(--muted); font-size: var(--fs-xs); }
.demo-accounts table { margin-block-start: var(--s2); }
.demo-accounts th, .demo-accounts td { padding: 5px var(--s2); font-size: var(--fs-xs); }

/* ------------------------------------------ 20 motion, responsive, print */
.fadeup, .reveal { animation: fadeup .34s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes fadeup {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ink-word { display: inline-block; animation: inkin .3s ease both; }
@keyframes inkin { from { opacity: 0; } to { opacity: 1; } }
.pulse-gold { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fadeup, .reveal { animation: none; opacity: 1; transform: none; }
}

/* ....................................................... 1200 and under */
@media (max-width: 1200px) {
  .wrap { padding: var(--s5) var(--s4) var(--s5); }
  .cols-31, .cols-13 { grid-template-columns: minmax(0, 1fr); }
}

/* ................................................ the sidebar becomes a
   top drawer: the shell stacks, the aside is pulled out of flow and slides
   down from under the top bar when the toggle is pressed. */
@media (max-width: 900px) {
  .app { display: block; }
  .navtoggle { display: inline-flex; }
  .aside {
    position: fixed;
    inset-block-start: var(--topbar-h);
    inset-inline: 0;
    width: auto;
    height: auto;
    max-height: calc(100vh - var(--topbar-h));
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
    box-shadow: var(--sh-pop);
    transform: translateY(-101%);
    transition: transform .2s ease;
    pointer-events: none;
    z-index: 38;
  }
  .aside.open { transform: none; pointer-events: auto; }
  .aside .wordmark { display: none; }
  .navgroups { padding-block: var(--s2) var(--s4); }
  .searchbtn { min-width: 0; }
  .searchbtn span, .searchbtn .cmd-k { display: none; }
  .campusswitch select { max-width: 130px; }
  .usermenu .who { display: none; }
  .two, .three, .four, .formgrid, .cols-2, .cols-11 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: var(--s4) var(--s4) var(--s5); }
  h1, .pagehead h1 { font-size: var(--fs-h3); }
  .hero-title { font-size: var(--fs-h2); }
  .sheet { padding: var(--s4); }
  .statrow { gap: var(--s4); }
  .topbar { gap: var(--s2); padding-inline: var(--s3); }
  .pagetitle { display: none; }
  .sidepanel { width: 100vw; }
  .modal { padding: var(--s4); }
  .post.reply { margin-inline-start: var(--s4); }
  .scorecard { gap: var(--s4); }
  .langswitch button { min-width: 30px; }
}

@media print {
  .aside, .topbar, .toast, .overlay, .sidepanel, .noprint,
  .savebar, .approvebar, .rowactions, .filterbar { display: none !important; }
  body { background: #fff; }
  .app { display: block; }
  .sheet, .panel, .plaque, .tile, .memo { box-shadow: none; break-inside: avoid; }
  .wrap { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------ *
 * Markdown answers (Study Coach, Course Answers)
 * The model replies in Markdown; app.js renders it. These rules give it
 * document structure inside a chat bubble without shouting.
 * ------------------------------------------------------------------ */
.md { font-size: 14px; line-height: 1.62; color: var(--ink); }
.md > *:first-child { margin-block-start: 0; }
.md > *:last-child  { margin-block-end: 0; }
.md p { margin: 0 0 10px; }
.md h3, .md h4, .md h5, .md h6 {
  margin: 16px 0 6px; font-weight: 600; line-height: 1.35; color: var(--ink-strong, #111827); }
.md h3 { font-size: 16px; }
.md h4 { font-size: 14.5px; }
.md h5, .md h6 { font-size: 13.5px; color: var(--muted); }
.md ul, .md ol { margin: 0 0 10px; padding-inline-start: 1.35rem; }
.md li { margin: 3px 0; }
.md li > p { margin: 0; }
.md strong { font-weight: 650; color: var(--ink-strong, #111827); }
.md em { font-style: italic; }
.md a { color: var(--accent, #2563EB); text-decoration: underline; text-underline-offset: 2px; }
.md hr { border: 0; border-top: 1px solid var(--line, #E3E6EA); margin: 14px 0; }
.md blockquote {
  margin: 10px 0; padding: 6px 12px; color: var(--muted);
  border-inline-start: 3px solid var(--line, #E3E6EA); background: var(--subtle, #F9FAFB);
  border-radius: 0 6px 6px 0; }
.md code {
  font-family: var(--mono); font-size: 12.5px; padding: 1px 5px;
  background: var(--subtle, #F9FAFB); border: 1px solid var(--line, #E3E6EA); border-radius: 4px; }
.md pre {
  margin: 0 0 10px; padding: 10px 12px; overflow-x: auto;
  background: #F8FAFC; border: 1px solid var(--line, #E3E6EA); border-radius: 6px; }
.md pre code { padding: 0; border: 0; background: none; font-size: 12.5px; line-height: 1.55; }
/* Maths: not a typesetter — a legible, clearly-marked formula. */
.md .md-math {
  font-family: var(--mono); font-size: 13px; font-style: normal;
  padding: 1px 5px; border-radius: 4px;
  background: var(--accent-tint, #EFF6FF); color: var(--accent-ink, #1E40AF); }
.md .md-math-b {
  display: block; margin: 10px auto; padding: 8px 12px; width: fit-content;
  font-size: 14.5px; text-align: center; }
.md-in { animation: md-rise .26s ease-out both; }
@keyframes md-rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .md-in { animation: none; } }