/* =============================================================================
   FinanceBot — app shell styles.

   RE-SKIN HERE: the token block below is the single source of visual identity.
   Change these custom properties (and APP in client/src/config.ts) to rebrand
   the whole app. Light is the default theme; [data-theme="dark"] overrides the
   same tokens.
   ========================================================================== */

:root {
  /* Brand + interactive */
  --sidebar-bg: #002145; /* UBC navy — the persistent brand rail */
  --sidebar-text: #b7c6dc;
  --sidebar-text-strong: #ffffff;
  --sidebar-active: rgba(255, 255, 255, 0.1);
  --accent: #0055b7; /* UBC secondary blue */
  --accent-strong: #003a8c;
  --accent-contrast: #ffffff;

  /* Landing / login screen — from Figma "Wireframe v0.2" frame 0 - Login
     (148:5448). The file defines no Figma Variables, so these hexes are
     sampled straight from the design. */
  --login-brand: #2e66db;
  --login-cta-bg: #1a1a1a;
  --login-cta-fg: #ffffff;
  --login-note: #6b6b73;

  /* Surfaces + text (light) */
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --border: #e2e7f0;
  --border-strong: #cfd7e5;
  --text: #131b2b;
  --muted: #5a6678;

  /* Status */
  --up: #1f9d57;
  --down: #d1495b;
  --warn: #cc8800;

  /* Badge fills — solid so text meets AA contrast on any surface. */
  --demo-bg: #f6e4bf;
  --demo-fg: #6f4500;
  --ok-bg: #cdeeda;
  --ok-fg: #0f6b39;
  --err-bg: #f7d7dc;
  --err-fg: #a01f30;

  /* Type */
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Shape + depth */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(18, 27, 43, 0.05), 0 10px 28px -16px rgba(18, 27, 43, 0.28);
  --sidebar-w: 272px;
  --sidebar-collapsed-w: 76px;
  --topbar-h: 64px;
  --content-max: 1120px;

  /* Instructor shell + primitives (Task 15) — approximated from the Figma
     "Wireframe v0.2" screenshots, not exact design tokens (see
     docs/superpowers/plans/phase-1/Saurav/task-15-wireframe-reference.md). */
  --instr-sidebar-bg: #245f35;
  --instr-sidebar-text: #cfe6d7;
  --instr-dark: #1a1f1a;
  --instr-dark-hover: #2c332c;
  --instr-green-bg: #e3f2e8;
  --instr-green-fg: #1f5c34;
  --instr-amber-bg: #faf1de;
  --instr-amber-fg: #8a5c14;
  --instr-red-bg: #fbe4e1;
  --instr-red-fg: #8f2a1f;
  --instr-blue-bg: #e2ecf7;
  --instr-blue-fg: #2c5182;
  --instr-gray-bg: #eceeec;
  --instr-gray-fg: #5b625b;

  /* Student shell + primitives (Task 1) — same "approximate, not exact"
     treatment as the instructor tokens above, blue per the student wireframe
     screens instead of green. */
  --student-sidebar-bg: #2f4cab;
  --student-sidebar-text: #d6e0fb;
}

:root[data-theme="dark"] {
  --sidebar-bg: #050c17;
  --sidebar-text: #93a4bd;
  --sidebar-text-strong: #eef3fb;
  --sidebar-active: rgba(120, 170, 255, 0.14);
  --accent: #4d9fff;
  --accent-strong: #7db6ff;
  --accent-contrast: #04121f;

  /* Landing / login — the wireframe is light-only; these keep the same intent
     (bright wordmark, one high-contrast solid CTA) on a dark page. */
  --login-brand: #7aa5f5;
  --login-cta-bg: #f2f4f8;
  --login-cta-fg: #14161a;
  --login-note: #9aa3b2;

  --bg: #0a0f1a;
  --surface: #111a2a;
  --surface-2: #0c1524;
  --border: #21304a;
  --border-strong: #2c3e5c;
  --text: #e7edf7;
  --muted: #93a3ba;

  --up: #3fca80;
  --down: #ff6b81;
  --warn: #eab04a;

  --demo-bg: #3a2f16;
  --demo-fg: #f0c368;
  --ok-bg: #123522;
  --ok-fg: #6fe0a0;
  --err-bg: #3a1820;
  --err-fg: #ff9aa8;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.7);

  --instr-sidebar-bg: #1a4e2b;
  --instr-sidebar-text: #a9d1b6;
  --instr-dark: #05070a;
  --instr-dark-hover: #14181f;
  --instr-green-bg: #123522;
  --instr-green-fg: #6fe0a0;
  --instr-amber-bg: #3a2f16;
  --instr-amber-fg: #f0c368;
  --instr-red-bg: #3a1820;
  --instr-red-fg: #ff9aa8;
  --instr-blue-bg: #16283f;
  --instr-blue-fg: #8bb6ec;
  --instr-gray-bg: #202722;
  --instr-gray-fg: #9fada2;

  --student-sidebar-bg: #24398f;
  --student-sidebar-text: #b9c8f5;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.011em;
}

a {
  color: inherit;
}

/* ---- Utilities ----------------------------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
}

.badge--demo {
  background: var(--demo-bg);
  color: var(--demo-fg);
}

.badge--muted {
  background: var(--surface-2);
  color: var(--muted);
}

.badge--up {
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.badge--down {
  background: var(--err-bg);
  color: var(--err-fg);
}

/* ---- Buttons + inputs ---------------------------------------------------- */

/* Component classes frequently set their own display value. Keep the native
 * `hidden` contract authoritative so state-specific controls do not remain
 * visible merely because `.btn`, `.row`, or another component uses display. */
[hidden] {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}

.btn:hover {
  border-color: var(--accent);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

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

.btn--ghost {
  background: transparent;
}

.btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

.btn--danger {
  background: var(--down);
  border-color: var(--down);
  color: #ffffff;
}

.btn--danger:hover {
  filter: brightness(0.92);
}

/* ---- Application modal ---------------------------------------------------- */

.app-dialog {
  width: min(31rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
}

.app-dialog::backdrop {
  background: rgba(4, 10, 20, 0.58);
  backdrop-filter: blur(2px);
}

.app-dialog__surface {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--instr);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.app-dialog--danger .app-dialog__surface {
  border-top-color: var(--down);
}

.app-dialog__title {
  margin: 0 0 0.55rem;
  font-size: 1.15rem;
}

.app-dialog__message {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-line;
}

.app-dialog__field {
  margin-top: 1rem;
}

.app-dialog__textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.course-dates-dialog {
  width: min(39rem, calc(100vw - 2rem));
}

.course-dates-dialog__term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--instr-green-fg) 22%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-size: 0.82rem;
}

.course-dates-dialog__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.course-dates-dialog__note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.course-dates-dialog__note a {
  color: var(--accent);
}

.course-dates-dialog__error {
  min-height: 1.2rem;
  margin: 0.55rem 0 0;
  color: var(--down);
  font-size: 0.78rem;
}

@media (max-width: 520px) {
  .course-dates-dialog__fields {
    grid-template-columns: 1fr;
  }

  .course-dates-dialog__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .course-dates-dialog__actions .btn {
    width: 100%;
  }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.05rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.input {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--muted);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Native date controls can inherit the operating system's dark appearance
 * even while FinanceBot is using its light theme, which turns Chromium's
 * calendar glyph white on a pale input. Pin the control scheme to the app
 * theme and give the picker affordance a comfortably visible hit target. */
input.input[type='date'],
input.input[type='datetime-local'] {
  color-scheme: light;
}

:root[data-theme='dark'] input.input[type='date'],
:root[data-theme='dark'] input.input[type='datetime-local'] {
  color-scheme: dark;
}

input.input[type='date']::-webkit-calendar-picker-indicator,
input.input[type='datetime-local']::-webkit-calendar-picker-indicator {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.3rem;
  border-radius: 6px;
  opacity: 0.78;
  cursor: pointer;
}

input.input[type='date']::-webkit-calendar-picker-indicator:hover,
input.input[type='datetime-local']::-webkit-calendar-picker-indicator:hover {
  background-color: color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 1;
}

.input--area {
  resize: vertical;
  min-height: 5.5rem;
}

.input--file {
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.row .input {
  flex: 1;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stack--sm {
  gap: 0.35rem;
}

.stack--lg {
  gap: 1rem;
}

/* A wrapping horizontal layout for compact forms, filters, badges and action
 * groups. Phase 3 views already use this primitive extensively; keeping its
 * behaviour here prevents each page from inventing a brittle one-off row. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.cluster > .input {
  flex: 1 1 12rem;
  min-width: 0;
}

.checkbox-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  color: var(--text);
  line-height: 1.35;
  cursor: pointer;
}

.checkbox-row input[type='checkbox'] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.08rem 0 0;
  accent-color: var(--accent);
}

.checkbox-row:has(input:disabled) {
  cursor: not-allowed;
}

.checkbox-row input:disabled + span {
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- States -------------------------------------------------------------- */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.75rem 1rem;
  text-align: center;
}

.state__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.state--error .state__text {
  color: var(--down);
}

.spinner {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card + .card {
  margin-top: 1.25rem;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.card__title {
  font-size: 1.05rem;
  font-weight: 650;
}

.card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Cards whose children are laid out directly (rather than through
 * `.card__body`) still need the same safe content inset. */
.card.stack {
  padding: 1.25rem;
}

.stack > .card + .card {
  margin-top: 0;
}

.card.stack > p {
  margin-block: 0;
}

/* ---- Landing (pre-login) ------------------------------------------------- */

.landing {
  position: relative;
  min-height: 100vh;
  background: var(--surface);
}

/* Not part of Figma frame `0 - Login`; see views/landing.ts for why it exists. */
.landing__theme-toggle {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 1;
}

/* The wireframe centers the card horizontally and vertically in the frame;
   `justify-content: center` reproduces that placement at any viewport height. */
.landing__main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(1.5rem, 6vw, 3rem);
}

.landing__main .banner {
  width: min(100%, 440px);
}

.login-card {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px, per the Figma card's gap */
  text-align: center;
}

.login-card__wordmark {
  margin: 0 0 1.125rem; /* the wireframe's 18px spacer frame */
  font-size: clamp(1.75rem, 5vw, 2.125rem); /* 34px at full size */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--login-brand);
}

.login-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.875rem 1.25rem; /* 14px 20px */
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--login-cta-bg);
  color: var(--login-cta-fg);
  font: inherit;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.05s;
}

.login-card__cta:hover {
  opacity: 0.88;
}

.login-card__cta:active {
  transform: translateY(1px);
}

.login-card__note {
  margin: 0;
  font-size: 0.78125rem; /* 12.5px */
  color: var(--login-note);
}

.banner {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.banner--error {
  background: color-mix(in srgb, var(--down) 12%, transparent);
  border-color: color-mix(in srgb, var(--down) 40%, transparent);
  color: var(--text);
}

/* ---- Brand --------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand__name {
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---- App shell ----------------------------------------------------------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 0.85rem;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  overflow-y: auto;
}

.sidebar .brand {
  padding: 0.35rem 0.5rem 1rem;
}

.sidebar .brand__name {
  color: var(--sidebar-text-strong);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

/* An author `display` rule normally wins over the UA `[hidden]` stylesheet
 * rule regardless of selector specificity (cascade origin, not specificity,
 * decides that tie) — so `.nav[hidden]` must be spelled out explicitly to
 * actually hide the static nav while a practice-context panel replaces it
 * (main.ts's `nav.hidden = practiceMode`). */
.nav[hidden] {
  display: none;
}

.nav__group {
  margin: 1.1rem 0.65rem 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sidebar-text) 85%, transparent);
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--sidebar-text);
  font-weight: 550;
  transition: background 0.15s, color 0.15s;
}

.nav__link:hover {
  background: var(--sidebar-active);
  color: var(--sidebar-text-strong);
}

.nav__link--active {
  background: var(--sidebar-active);
  color: var(--sidebar-text-strong);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav__glyph {
  width: 1.1rem;
  text-align: center;
  opacity: 0.85;
}

.nav__text {
  flex: 1;
}

/* The sidebar is navy in both themes, so pin the DEMO badge to a fixed,
   AA-contrast treatment regardless of the active theme. */
.nav__link .badge--demo {
  background: #3a2f16;
  color: #f0c368;
}

.sidebar__foot {
  padding: 0.75rem 0.65rem 0.25rem;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--sidebar-text) 85%, transparent);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 0.5rem;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--topbar-h);
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  overflow: visible;
}

.topbar__title {
  font-size: 1.15rem;
  font-weight: 650;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.topbar__menu {
  display: none;
}

.user {
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outlet {
  position: relative;
  z-index: 0;
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

.backdrop {
  display: none;
}

/* ---- Views --------------------------------------------------------------- */

.view {
  max-width: var(--content-max);
  margin: 0 auto;
  animation: rise 0.22s ease both;
}

/* Structure needs room for its editor and AI review workspace. Other views
   retain the narrower reading width controlled by --content-max. */
.view--structure {
  max-width: none;
}

.view--question-detail {
  max-width: 1180px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.view__intro {
  margin-bottom: 1.5rem;
}

.view__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}

.view__eyebrow-row .eyebrow {
  margin: 0;
}

.view__title {
  font-size: 1.7rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.view__lead {
  margin: 0.5rem 0 0;
  color: var(--muted);
  max-width: 60ch;
}

/* ---- Health card --------------------------------------------------------- */

.status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.status__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent);
}

.status--up .status__dot {
  background: var(--up);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent);
}

.status--down .status__dot {
  background: var(--down);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 22%, transparent);
}

.status__label {
  color: var(--text);
}

.kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kv__key {
  color: var(--muted);
  font-size: 0.85rem;
}

.raw {
  margin-top: 0.4rem;
}

.raw summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
}

.raw__pre {
  margin: 0.6rem 0 0;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-x: auto;
}

/* Suggestion-patch summary (ta/question-detail.ts, instructor/question-detail.ts).
   Wraps rather than scrolling like .raw__pre above, since a long suggested
   stem should not overflow its card horizontally. */
.code-block {
  margin: 0;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Component tiles (overview) ----------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.tile {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.tile__glyph {
  font-size: 1.2rem;
  color: var(--accent);
}

.tile__name {
  margin: 0.5rem 0 0.15rem;
  font-size: 1rem;
  font-weight: 650;
}

.tile__desc {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.tile__path {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---- Notes demo ---------------------------------------------------------- */

.note-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.note__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.note__time {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

/* ---- RAG demo ------------------------------------------------------------ */

.or {
  position: relative;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.or::before,
.or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 1.5rem);
  height: 1px;
  background: var(--border);
}

.or::before {
  left: 0;
}

.or::after {
  right: 0;
}

.row-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.answer:not(:empty) {
  margin-top: 0.5rem;
}

.answer__text {
  margin: 0;
  white-space: pre-wrap;
}

.answer__label {
  margin: 1rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sources {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: source;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.source {
  padding: 0.7rem 0.85rem 0.7rem 2rem;
  position: relative;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.source::before {
  counter-increment: source;
  content: "[" counter(source) "]";
  position: absolute;
  left: 0.65rem;
  top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

.source__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.source__id {
  color: var(--text);
}

.source__score {
  color: var(--muted);
  flex-shrink: 0;
}

.source__text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Members area -------------------------------------------------------- */

.members__welcome {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.members__attrs-label {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.attrs {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.attrs__key {
  color: var(--muted);
  font-size: 0.82rem;
}

.attrs__val {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- Role area ----------------------------------------------------------- */

.role__blurb {
  margin: 0 0 1rem;
  font-size: 1.02rem;
}

.caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.caps__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.caps__mark {
  color: var(--up);
  font-weight: 700;
}

.role__foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(80vw, var(--sidebar-w));
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .app-shell.is-open .sidebar {
    transform: translateX(0);
  }

  .topbar__menu {
    display: inline-flex;
  }

  .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(4, 10, 20, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .app-shell.is-open .backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .user {
    display: none;
  }

  .preview-mode-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* =============================================================================
   EXAMPLE: classes (Academic API demo). Safe to delete with the classes view.
   ========================================================================== */

.classes__heading {
  margin: 1.25rem 0 0.25rem;
  font-size: 1rem;
}

.classes__note {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.class-period__name {
  margin: 0.85rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.class-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.25rem;
  border-bottom: 1px solid var(--border);
}

button.class-row--link {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

button.class-row--link:hover .class-row__title,
button.class-row--link:focus-visible .class-row__title {
  color: var(--accent);
  text-decoration: underline;
}

.class-row__main {
  display: inline-flex;
  gap: 0.75rem;
  align-items: baseline;
}

.class-row__meta {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
}

.class-row__schedule {
  font-size: 0.78rem;
  color: var(--muted);
}

.roster {
  margin-top: 0.5rem;
}

.roster__meta {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.roster__row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr;
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding: 0.45rem 0.25rem;
}

.roster__row--head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}

.roster__student {
  border-bottom: 1px solid var(--border);
}

.roster__student > summary {
  cursor: pointer;
  list-style: none;
}

.roster__student > summary::-webkit-details-marker {
  display: none;
}

.roster__student > summary:hover,
.roster__student[open] > summary {
  background: var(--surface-2);
}

.roster__raw {
  margin: 0 0 0.5rem;
  padding: 0.6rem;
  overflow-x: auto;
  font-size: 0.72rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}


/* ---- Student practice (Task 14: course home, LO list, practice, review book, summary) --- */

.banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
}

.banner--welcome {
  border-color: var(--accent);
}

.banner__text {
  margin: 0;
  font-size: 0.9rem;
}

.banner__link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.banner__dismiss {
  flex-shrink: 0;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.theme-card__title {
  font-size: 1.05rem;
  font-weight: 650;
  text-decoration: none;
}

.theme-card__title:hover {
  color: var(--accent);
}

.theme-card__coverage {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.coverage-bar {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.coverage-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.theme-card__coverage-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.lo-list {
  display: flex;
  flex-direction: column;
}

.lo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
}

.lo-row:last-child {
  border-bottom: none;
}

.lo-row:hover {
  background: var(--surface-2);
}

.lo-row__name {
  font-weight: 600;
}

.lo-row__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.lo-row__count {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---- Practice header (breadcrumb + Session Summary link) -------------- */

.practice-header__row {
  justify-content: space-between;
  align-items: center;
}

/* ---- Practice card --------------------------------------------------- */

.practice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.watermark {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

.practice-card__qlabel {
  margin: 0;
}

.practice-card__stem {
  font-size: 1rem;
  line-height: 1.55;
}

.practice-card__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.option-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.option-btn__key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-weight: 700;
  color: var(--muted);
}

.option-btn__suffix {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.6rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--accent);
}

.option-btn--selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.option-btn--correct {
  border-color: var(--up);
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.option-btn--correct .option-btn__key {
  color: var(--ok-fg);
}

.option-btn--incorrect {
  border-color: var(--down);
  background: var(--err-bg);
  color: var(--err-fg);
}

.option-btn--incorrect .option-btn__key {
  color: var(--err-fg);
}

.option-btn--hidden-choice {
  opacity: 0.55;
}

.option-btn:disabled {
  cursor: default;
}

.practice-card__result {
  margin: 0;
  font-weight: 650;
}

.practice-card__result--correct {
  color: var(--up);
}

.practice-card__result--incorrect {
  color: var(--down);
}

.practice-card__explanations {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.practice-card__explanation {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.practice-card__explanation-key {
  flex: none;
}

/* The body is rendered markdown, so it arrives wrapped in block elements.
   Collapse the outer margins so a one-paragraph explanation still sits on the
   same line as its key, the way the plain-text version did. */
.practice-card__explanation-body {
  min-width: 0;
}

.practice-card__explanation-body > :first-child {
  margin-top: 0;
}

.practice-card__explanation-body > :last-child {
  margin-bottom: 0;
}

.practice-card__retry {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-strong);
}

.practice-card__footer {
  justify-content: space-between;
}

.flag-test-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.82rem;
  line-height: 1.4;
}

.practice-recommendation,
.practice-redirect,
.practice-round-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.practice-recommendation h3,
.practice-redirect h3,
.practice-round-summary h2,
.practice-recommendation p,
.practice-redirect p,
.practice-round-summary p {
  margin: 0;
}

.practice-redirect {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.practice-redirect__materials {
  margin: 0;
  padding-left: 1.25rem;
}

.practice-redirect__materials a {
  color: var(--accent);
  font-weight: 650;
}

.practice-round-summary {
  margin-top: 1rem;
}

.transcript {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 9rem;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding: 0.5rem 0.25rem;
}

.transcript:empty {
  display: none;
}

.transcript__entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  background: var(--surface-2);
}

.transcript__entry--correct {
  border-left: 3px solid var(--up);
}

.transcript__entry--incorrect {
  border-left: 3px solid var(--down);
}

.transcript__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.transcript__qlabel {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--muted);
}

.transcript__stem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.transcript__result {
  margin: 0;
  font-weight: 600;
}

/* ---- Review Book (Figma wireframe screen 11) ----------------------------- */

.review-book__sort {
  width: auto;
  flex-shrink: 0;
}

.review-groups {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-topic__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  margin-bottom: 0.5rem;
}

.review-topic__name {
  margin: 0;
  font-weight: 680;
}

.review-topic__count {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.review-topic__los {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-lo {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.review-lo__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
}

.review-lo__actions {
  flex-shrink: 0;
  margin-left: auto;
}

.review-lo__caret,
.summary-topic__caret {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
}

.review-lo__entries {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.review-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.review-entry:last-child {
  border-bottom: none;
}

.review-entry__stem {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.review-entry__badges {
  display: flex;
  gap: 0.4rem;
}

.review-entry__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.review-entry__heart {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  padding: 0.1rem 0.2rem;
}

.review-entry__heart--active {
  color: var(--err-fg);
}

/* ---- Session Summary (Figma wireframe screen 7) -------------------------- */

.summary-section {
  margin-top: 1.5rem;
}

.summary-topics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-topic {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.summary-topic__header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
}

.summary-topic__text {
  flex: 1;
  min-width: 0;
}

.summary-topic__name {
  margin: 0;
  font-weight: 650;
}

.summary-topic__meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.summary-topic__los {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.summary-lo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.1rem 0.6rem 2.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.summary-lo-row:last-child {
  border-bottom: none;
}

.summary-lo-row__accuracy {
  flex-shrink: 0;
  color: var(--ok-fg);
  font-weight: 650;
}

.summary-missed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.summary-missed__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.summary-missed__stem {
  margin: 0;
  font-size: 0.9rem;
}

.summary-missed__link {
  flex-shrink: 0;
  font-weight: 650;
  color: var(--accent);
}

.summary-actions {
  margin-top: 1.5rem;
}

.summary-defer {
  margin-top: 0.75rem;
}

.summary-defer__link {
  border: none;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* =============================================================================
   Instructor shell + design-system primitives (Task 15, Task A). Follows the
   wireframe *roughly* — green/white language, not exact tokens. See
   docs/superpowers/plans/phase-1/Saurav/task-15-wireframe-reference.md.
   ========================================================================== */

/* ---- Instructor shell ----------------------------------------------------- */

/* Re-colors the shared .sidebar/.nav__* rules (see "App shell" above) by
   overriding the tokens they already read from, rather than duplicating the
   nav layout rules for a second sidebar variant. */
.sidebar--instructor {
  --sidebar-bg: var(--instr-sidebar-bg);
  --sidebar-text: var(--instr-sidebar-text);
  --sidebar-text-strong: #ffffff;
  --sidebar-active: rgba(0, 0, 0, 0.18);
}

.sidebar--instructor .brand {
  padding: 0.35rem 0.5rem 0.5rem;
}

.sidebar--instructor .brand__name {
  color: #ffffff;
  font-size: 1.15rem;
}

.instructor-pill {
  align-self: flex-start;
  margin: 0 0.5rem 1rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nav__link--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar--instructor .nav__link--disabled,
.sidebar--instructor .nav__link--disabled:hover,
.sidebar--instructor .nav__link--disabled:active,
.sidebar--instructor .nav__link--disabled:focus,
.sidebar--instructor .nav__link--disabled:focus-visible {
  opacity: 1;
  color: rgba(255, 255, 255, 0.46);
}

.sidebar--instructor .nav__group,
.sidebar--instructor .sidebar__foot {
  color: #ffffff;
}

.nav__link--disabled:hover,
.nav__link--disabled:active,
.nav__link--disabled:focus,
.nav__link--disabled:focus-visible {
  background: none;
  color: var(--sidebar-text);
  box-shadow: none;
  outline: none;
}

/* ---- Page header (per-view, not the shell topbar) ------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.page-header__title {
  font-size: 1.7rem;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.page-header__subtitle {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .page-header > *,
  .page-header .row {
    min-width: 0;
  }

  .page-header .row {
    flex-wrap: wrap;
  }
}

.btn--instr-primary {
  flex-shrink: 0;
  background: var(--instr-dark);
  border-color: var(--instr-dark);
  color: #ffffff;
}

.btn--instr-primary:hover {
  background: var(--instr-dark-hover);
  border-color: var(--instr-dark-hover);
}

/* ---- Stat tile -------------------------------------------------------------- */

.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.stat-tile {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.stat-tile__value {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-tile__value--good {
  color: var(--instr-green-fg);
}

.stat-tile__value--warn {
  color: var(--instr-amber-fg);
}

.stat-tile__value--bad {
  color: var(--instr-red-fg);
}

.stat-tile__label {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Status badge (question status / agent decision / coverage) ----------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
}

.status-badge--approved,
.status-badge--pass,
.status-badge--at-target {
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.status-badge--pending,
.status-badge--flag,
.status-badge--below-target {
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
}

.status-badge--reject,
.status-badge--empty {
  background: var(--instr-red-bg);
  color: var(--instr-red-fg);
}

.status-badge--reviewed {
  background: var(--instr-blue-bg);
  color: var(--instr-blue-fg);
}

.status-badge--draft,
.status-badge--paused,
.status-badge--archived,
.status-badge--neutral {
  background: var(--instr-gray-bg);
  color: var(--instr-gray-fg);
}

/* ---- Checklist row ---------------------------------------------------------- */

.checklist-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.checklist-row + .checklist-row {
  margin-top: 0.5rem;
}

.checklist-row__mark {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  color: var(--muted);
}

.checklist-row--ok .checklist-row__mark {
  color: var(--instr-green-fg);
}

.checklist-row__label {
  flex: 1;
}

.checklist-row__label--pending {
  font-weight: 650;
}

.checklist-row__action {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.checklist-row__action:hover {
  text-decoration: underline;
}

/* ---- Filter tabs ------------------------------------------------------------ */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.filter-tabs__tab {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.filter-tabs__tab:hover {
  color: var(--text);
}

.filter-tabs__tab--active {
  color: var(--instr-green-fg);
  border-bottom-color: var(--instr-green-fg);
}

/* ---- Upload zone ------------------------------------------------------------- */

.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.upload-zone--over {
  border-color: var(--instr-green-fg);
  background: var(--instr-green-bg);
}

.upload-zone__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.upload-zone__input {
  display: none;
}

/* ---- Course list / course card (My Courses, N1) ---------------------------- */

.course-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.course-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.course-card:hover {
  border-color: var(--instr-sidebar-bg);
  box-shadow: var(--shadow);
}

.course-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
}

.course-card__meta {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Form field (Create Course, N2) ----------------------------------------- */

.form {
  max-width: 32rem;
  gap: 1.1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field__label {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--text);
}

.form-field__help {
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---- Help tips (ⓘ) --------------------------------------------------------
   Explains a setting whose label alone is not self-describing. Shown on hover
   AND keyboard focus, and dismissable with Escape, per WCAG 2.1 AA 1.4.13 —
   see helpTip() in client/src/ui.ts for why hover-only was not an
   option. Colours are token-based so both themes and the Task 2 (#58) contrast
   work carry over: bubble text is --text on --surface, the same pair the a11y
   scans already cleared. */

.form-field__label-row,
.section-title--with-help {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.help-tip {
  position: relative;
  display: inline-flex;
  /* Keeps the bubble clear of adjacent inputs and cards. */
  z-index: 3;
}

/* The open tip must outrank the OTHER tips too, not just the form controls.
   All the triggers share z-index 3, so at equal stacking order the ones later
   in the DOM paint over an open bubble — which showed up as the next field's
   ⓘ punching a hole through the Auto-pause explanation. */
.help-tip:hover,
.help-tip:focus-within,
.help-tip--pinned {
  z-index: 10;
}

.help-tip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: 650 0.7rem var(--ui);
  font-style: italic;
  line-height: 1;
  cursor: help;
}

.help-tip__trigger:hover,
.help-tip--pinned .help-tip__trigger {
  border-color: var(--accent);
  color: var(--accent);
}

.help-tip__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Anchored to the trigger's LEFT edge, not centred on it. Centring pushed half
   the bubble to the left of a trigger that usually sits just inside the content
   area, and `main` / `.outlet` clip at that edge — so the first tip in any form
   row lost a slice of its text. Reported 2026-08-10 against "Saved Setup"
   (clipped 18-31px from 390px to 1440px); "About Auto-pause" in Course Settings
   had the identical bug from #67, which is why this fixes the shared rule
   rather than adding a third per-page override. The right-edge case still needs
   the explicit opt-out below. */
.help-tip__bubble {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  transform: none;
  width: max-content;
  max-width: min(19rem, 70vw);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
}

/* Escape (--dismissed) has to beat hover and focus, and it is gated INTO these
   show rules rather than written as a later override: a plain
   `.help-tip--dismissed .help-tip__bubble` block loses to
   `.help-tip__trigger:focus-visible ~ .help-tip__bubble`, which carries one
   more specificity point, so pressing Escape while the trigger still held
   focus left the bubble on screen. */
.help-tip:not(.help-tip--dismissed):hover .help-tip__bubble,
.help-tip:not(.help-tip--dismissed) .help-tip__trigger:focus-visible ~ .help-tip__bubble,
.help-tip--pinned .help-tip__bubble {
  visibility: visible;
  opacity: 1;
}

/* The last column would push its bubble off-screen to the RIGHT. */
.settings-column:last-child .help-tip__bubble {
  left: auto;
  right: 0;
  transform: none;
}

.form-status {
  min-height: 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Admin operations ----------------------------------------------------- */

.view--admin {
  max-width: 1040px;
}

.admin-toolbar,
.admin-directory-search {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-toolbar {
  flex-wrap: wrap;
}

.admin-toolbar__field,
.admin-directory-search .form-field {
  flex: 1 1 24rem;
  min-width: 0;
}

.admin-toolbar__actions {
  display: flex;
  gap: 0.55rem;
}

.admin-toolbar .form-status {
  flex-basis: 100%;
}

.admin-note {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--instr-amber-fg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
  font-size: 0.87rem;
}

.admin-capability-list,
.admin-user-list {
  gap: 0.85rem;
}

.capability-card {
  gap: 0.85rem;
}

.capability-card__name {
  overflow-wrap: anywhere;
  font-size: 0.96rem;
}

.capability-card__roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.capability-role {
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.capability-role__copy,
.admin-feature > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.capability-role__name {
  font-weight: 650;
  text-transform: capitalize;
}

.capability-role__source {
  color: var(--muted);
  font-size: 0.75rem;
}

.admin-settings-panel {
  gap: 1rem;
}

.admin-settings-panel__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.admin-settings-panel__heading h2 {
  flex-shrink: 0;
  font-size: 1.15rem;
}

.admin-settings-panel__heading p {
  text-align: right;
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

/* Pipeline steps: one bordered card each rather than cells in a flat grid.
   With five steps and up to two parameter controls apiece, a single grid gave
   no boundary between one step's controls and the next's. */
/* Two fixed columns like the sibling `.admin-settings-grid`, not `auto-fit`: the
   column COUNT has to be knowable for the right-edge tip rule below to target
   the right-hand cards. */
.admin-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

/* A help bubble hangs below and outside its card, but `.card` sets
   `overflow: hidden`, which clipped every tip at the card's own border.
   The enclosing panel is also a `.card`, so both have to let it through. */
.admin-settings-panel,
.admin-step {
  overflow: visible;
}

/* The right-hand column would push its bubble off the page. Same remedy as
   `.settings-column:last-child` above; scoped past the breakpoint where this
   grid collapses to one column and every card is therefore a left-hand one. */
@media (min-width: 521px) {
  .admin-step-list > .admin-step:nth-child(even) .help-tip__bubble,
  .view--admin .admin-settings-grid > *:nth-child(even) .help-tip__bubble {
    left: auto;
    right: 0;
  }
}

/* On a phone the shared rule cannot win: the bubble is left-anchored to its
   trigger and up to 70vw wide, so any trigger past ~30% of the width overflows
   to the right — and `.card`'s `overflow: hidden` used to hide that by clipping
   the tip, which is the bug this section removes. `responsive-workflows.spec`
   catches it as a horizontally scrolling outlet, because a bubble extends the
   scroll area even while invisible.

   The fix spans the bubble across its own label row or heading instead, which
   is in-bounds by construction whatever the trigger's x position. Making
   `.help-tip` static is what moves the containing block up to that row; every
   tip on this page sits inside one of the three selectors below, so each bubble
   still lands directly under the thing it explains rather than under the whole
   card. */
@media (max-width: 520px) {
  .view--admin .admin-settings-panel__heading,
  .view--admin .admin-step__header,
  .view--admin .form-field__label-row {
    position: relative;
  }

  .view--admin .help-tip {
    position: static;
  }

  .view--admin .help-tip__bubble {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* Cards in a grid are laid out by the grid, not by flow, so the stacking margin
   `.card + .card` adds would stagger the rows against each other. Same fix and
   same reason as `.stack > .card + .card` above. */
.admin-step-list > .card + .card {
  margin-top: 0;
}

.admin-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.9rem;
  background: var(--surface-2);
}

.admin-step__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.admin-step__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;
}

.admin-step__params {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-step__note {
  margin: 0;
  font-size: 0.85rem;
}

.admin-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-feature {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.admin-feature small {
  margin-top: 0.15rem;
  color: var(--muted);
}

.admin-save-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 0;
}

.admin-user-card {
  gap: 1rem;
}

.admin-user-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.admin-user-card__name {
  overflow-wrap: anywhere;
  font-size: 1.1rem;
}

.admin-user-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.admin-user-meta > div {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.admin-user-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-user-meta dd {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.admin-user-roles h3 {
  font-size: 0.9rem;
}

.admin-user-roles p {
  margin: 0;
}

.admin-course-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.admin-course-role__identity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.admin-course-role__identity .mono {
  overflow-wrap: anywhere;
}

.admin-role-assignment {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) auto;
  align-items: end;
  gap: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.admin-user-card__state-action {
  align-self: flex-start;
}

@media (max-width: 760px) {
  .capability-card__roles,
  .admin-settings-grid,
  .admin-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-role-assignment {
    grid-template-columns: 1fr 1fr;
  }

  .admin-role-assignment .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .admin-toolbar,
  .admin-directory-search,
  .admin-settings-panel__heading,
  .admin-user-card__header,
  .admin-course-role {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-toolbar__field,
  .admin-directory-search .form-field {
    flex-basis: auto;
  }

  .admin-toolbar__actions,
  .admin-toolbar__actions .btn,
  .admin-directory-search .btn,
  .admin-save-bar .btn,
  .admin-user-card__state-action {
    width: 100%;
  }

  .admin-settings-panel__heading p {
    text-align: left;
  }

  .capability-card__roles,
  .admin-settings-grid,
  .admin-step-list,
  .admin-feature-list,
  .admin-user-meta,
  .admin-role-assignment {
    grid-template-columns: 1fr;
  }

  .admin-role-assignment .btn {
    grid-column: auto;
  }
}

/* ---- Admin accounts -------------------------------------------------------- */

.admin-account-create {
  max-width: 40rem;
  margin-bottom: 1.25rem;
}

.admin-account-create__body {
  gap: 1rem;
}

.admin-account-create__body .form-field {
  min-width: 0;
}

.admin-account-create__help {
  max-width: 58ch;
  margin: 0;
  font-size: 0.88rem;
}

.admin-account-create__actions {
  justify-content: flex-start;
}

.admin-account-search {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.admin-account-search .form-field {
  flex: 1;
  min-width: 0;
}

.admin-account-search .btn {
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .admin-account-create {
    max-width: none;
  }

  .admin-account-create__actions .btn,
  .admin-account-search .btn {
    width: 100%;
  }

  .admin-account-search {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ---- Duplicate-term callout (Create Course, N2) ----------------------------- */

.duplicate-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--instr-amber-fg) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--instr-amber-bg);
}

.duplicate-callout__title {
  margin: 0;
  font-weight: 650;
  color: var(--instr-amber-fg);
}

.duplicate-callout__body {
  margin: 0;
  color: var(--instr-amber-fg);
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ---- Section title (Dashboard/Structure/Settings headings, Task C) --------- */

.section-title {
  margin: 1.75rem 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.section-title:first-child {
  margin-top: 0;
}

/* ---- Quick actions (Course Dashboard, I1) ----------------------------------- */

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.quick-action:hover {
  border-color: var(--instr-sidebar-bg);
  box-shadow: var(--shadow);
}

.quick-action--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.quick-action--disabled:hover {
  border-color: var(--border);
  box-shadow: none;
}

.quick-action__title {
  margin: 0;
  font-weight: 650;
}

.quick-action__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Instructor Launch Cockpit (Phase 5 workflow v2) ----------------------- */

.cockpit-readiness {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.cockpit-readiness__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cockpit-readiness__summary .section-title,
.cockpit-readiness__summary p {
  margin: 0;
}

.cockpit-readiness__percent {
  color: var(--instr-green-fg);
  font-size: 1.4rem;
}

.cockpit-readiness__progress {
  width: 100%;
  height: 0.7rem;
  accent-color: var(--instr-green-fg);
}

.workflow-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.workflow-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.workflow-action:hover {
  border-color: var(--instr-sidebar-bg);
  box-shadow: var(--shadow);
}

.workflow-action--blocking {
  border-left-color: var(--instr-red-fg);
}

.workflow-action--high {
  border-left-color: var(--instr-amber-fg);
}

.workflow-action--normal {
  border-left-color: var(--instr-blue-fg);
}

.workflow-action__body,
.workflow-action__aside {
  display: flex;
  flex-direction: column;
}

.workflow-action__body {
  min-width: 0;
  gap: 0.25rem;
}

.workflow-action__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workflow-action__title {
  font-weight: 680;
}

.workflow-action__count {
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.workflow-action__detail {
  color: var(--muted);
  font-size: 0.85rem;
}

.workflow-action__aside {
  flex-shrink: 0;
  align-items: flex-end;
  gap: 0.25rem;
}

.workflow-action__priority,
.workflow-action__open {
  font-size: 0.75rem;
  font-weight: 650;
}

.workflow-action__priority--blocking {
  color: var(--instr-red-fg);
}

.workflow-action__priority--high {
  color: var(--instr-amber-fg);
}

.workflow-action__priority--normal,
.workflow-action__open {
  color: var(--accent);
}

.cockpit-checklist {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.cockpit-checklist summary {
  cursor: pointer;
  font-weight: 650;
}

.cockpit-checklist .checklist {
  margin-top: 0.85rem;
}

@media (max-width: 640px) {
  .workflow-action {
    align-items: flex-start;
  }

  .workflow-action__aside {
    display: none;
  }
}

/* ---- Course Structure unified hierarchy (I2) -------------------------------- */

.structure-layout {
  display: block;
}

.structure-tree {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.structure-tree__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.structure-tree__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 650;
}

.structure-tree__summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.structure-tree__add {
  width: 100%;
  margin-bottom: 0.5rem;
}

.structure-tree__toolbar {
  margin-bottom: 0.5rem;
}

.structure-tree__toolbar .structure-tree__add {
  width: auto;
  flex: 1;
  margin-bottom: 0;
}

.tree-theme + .tree-theme {
  margin-top: 0.35rem;
}

.tree-theme {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.tree-theme__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface);
}

.tree-theme__row:hover {
  background: var(--surface-2);
}

.tree-theme__chevron {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
}

.tree-theme__name {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-weight: 650;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  text-align: left;
}

.tree-theme__count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.tree-lo-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem 0.85rem 2.65rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 56%, var(--surface));
}

.tree-lo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.tree-lo:hover {
  background: var(--surface-2);
}

.tree-lo__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}

.tree-lo__name {
  font-weight: 600;
}

.tree-lo__meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.structure-item__edit {
  flex-shrink: 0;
}

.tree-add-lo {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.tree-add-lo:hover {
  text-decoration: underline;
}

.tree-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
}

.duplicate-warn {
  margin: 0;
  color: var(--instr-amber-fg);
  font-size: 0.8rem;
}

.structure-detail {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.structure-editor-dialog {
  width: min(52rem, calc(100vw - 2rem));
}

.structure-editor-dialog__surface {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}

.structure-editor-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.structure-editor-dialog__header .eyebrow {
  margin: 0;
}

.structure-editor-dialog__close {
  flex-shrink: 0;
  font-size: 1.25rem;
}

@media (max-width: 640px) {
  .structure-tree__heading,
  .tree-lo {
    align-items: flex-start;
    flex-direction: column;
  }

  .structure-tree__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tree-lo-list {
    padding-left: 1rem;
  }

  .tree-theme__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tree-theme__chevron {
    grid-column: 1;
    grid-row: 1;
  }

  .tree-theme__name {
    grid-column: 2;
    grid-row: 1;
  }

  .tree-theme__count {
    grid-column: 3;
    grid-row: 1;
  }

  .tree-theme__row .structure-item__edit {
    grid-column: 2 / -1;
    width: 100%;
  }

  .tree-lo .structure-item__edit {
    width: 100%;
  }
}

.detail-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 680;
}

.detail-subtitle {
  margin: -0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-section-title {
  margin: 0.5rem 0 -0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
}

.materials-placeholder__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Assigned Course Materials (Structure LO detail, I2 <- Task D) --------- */

.assigned-materials {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.assigned-materials__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.assigned-materials__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.assigned-materials__add {
  align-items: center;
}

.assigned-materials__add select {
  flex: 1;
}

/* ---- Course Materials (I3) -------------------------------------------------- */

.material-url-row {
  margin-top: 0.85rem;
}

.material-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.material-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

@media (max-width: 900px) {
  .material-row {
    grid-template-columns: auto 1fr;
  }
}

.material-row__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.material-row__dot--ready {
  background: var(--instr-green-fg);
}

.material-row__dot--processing {
  background: var(--instr-gray-fg);
}

.material-row__dot--failed {
  background: var(--instr-red-fg);
}

.material-row__main {
  min-width: 0;
}

.material-row__name {
  margin: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.material-row__meta,
.material-row__assign,
.material-row__class {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.material-row__error {
  margin: 0.2rem 0 0;
  color: var(--instr-red-fg);
  font-size: 0.78rem;
}

.content-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.row--wrap {
  flex-wrap: wrap;
}

.row--between {
  justify-content: space-between;
}

.unassigned-banner {
  margin-top: 1rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.unassigned-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Course Knowledge Workspace ------------------------------------------- */

.view--knowledge-workspace {
  max-width: none;
}

.knowledge-workspace-shell {
  min-width: 0;
}

.knowledge-workspace__title {
  margin-bottom: 1rem;
}

.knowledge-workspace__title h1,
.knowledge-workspace__title p {
  margin: 0;
}

.knowledge-workspace__title h1 {
  margin-top: 0.15rem;
  font-size: clamp(1.55rem, 2vw, 2.1rem);
  letter-spacing: -0.025em;
}

.knowledge-workspace__title > div > p:last-child {
  margin-top: 0.35rem;
  color: var(--muted);
}

.workspace-eyebrow {
  margin: 0;
  color: var(--instr-green-fg);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.knowledge-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(330px, 1.1fr) minmax(360px, 1.25fr);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.knowledge-workspace__files,
.knowledge-workspace__assistant,
.knowledge-workspace__inspector {
  min-width: 0;
  min-height: 0;
}

.knowledge-workspace__files {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.workspace-panel-heading,
.workspace-assistant__header,
.workspace-preview__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.workspace-panel-heading h2,
.workspace-assistant__header h2,
.workspace-preview__heading h3 {
  margin: 0.15rem 0 0;
  font-size: 1rem;
}

.workspace-count {
  min-width: 1.65rem;
  padding: 0.2rem 0.45rem;
  border-radius: 99px;
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.knowledge-workspace__files .upload-zone {
  gap: 0.4rem;
  padding: 0.8rem;
  border-width: 1px;
  background: var(--surface);
}

.knowledge-workspace__files .upload-zone__hint {
  margin: 0;
  font-size: 0.78rem;
}

.workspace-url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
}

.workspace-search {
  width: 100%;
}

.workspace-file-tabs,
.workspace-inspector__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.workspace-file-tab,
.workspace-inspector__tab {
  flex: 1;
  padding: 0.55rem 0.25rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}

.workspace-file-tab:hover,
.workspace-inspector__tab:hover {
  color: var(--text);
}

.workspace-file-tab--active,
.workspace-inspector__tab--active {
  border-bottom-color: var(--instr-green-fg);
  color: var(--instr-green-fg);
}

.workspace-file-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 10rem;
  max-height: 560px;
  overflow: auto;
}

.workspace-file {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-file:hover {
  background: var(--surface);
}

.workspace-file--selected {
  border-color: color-mix(in srgb, var(--instr-green-fg) 28%, var(--border));
  background: var(--surface);
  box-shadow: 0 3px 14px -12px rgba(15, 60, 30, 0.55);
}

.workspace-file__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--instr-gray-bg);
  color: var(--instr-gray-fg);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 750;
}

.workspace-file__icon--ready { background: var(--instr-green-bg); color: var(--instr-green-fg); }
.workspace-file__icon--processing { background: var(--instr-blue-bg); color: var(--instr-blue-fg); }
.workspace-file__icon--failed { background: var(--instr-red-bg); color: var(--instr-red-fg); }

.workspace-file__body {
  min-width: 0;
}

.workspace-file__name,
.workspace-file__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-file__name { font-size: 0.78rem; font-weight: 650; }
.workspace-file__meta { margin-top: 0.12rem; color: var(--muted); font-size: 0.68rem; }

.workspace-file__review,
.workspace-file__auto {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
}

.workspace-file__review { background: var(--instr-amber-bg); color: var(--instr-amber-fg); }
.workspace-file__auto { background: var(--instr-green-bg); color: var(--instr-green-fg); }

.workspace-empty,
.workspace-muted {
  color: var(--muted);
  font-size: 0.8rem;
}

.knowledge-workspace__assistant {
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  border-right: 1px solid var(--border);
}

.workspace-live {
  color: var(--instr-green-fg);
  font-size: 0.72rem;
  font-weight: 650;
}

.workspace-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 1rem 0;
}

.workspace-action {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-action:hover {
  border-color: var(--instr-green-fg);
  background: var(--instr-green-bg);
}

.workspace-action strong,
.workspace-action span { display: block; }
.workspace-action strong { font-size: 0.72rem; }
.workspace-action span { margin-top: 0.2rem; color: var(--muted); font-size: 0.64rem; line-height: 1.35; }

.workspace-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 150px;
  max-height: 280px;
  overflow: auto;
  padding: 0.4rem;
}

.workspace-message {
  max-width: 92%;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 0.78rem;
  line-height: 1.45;
}

.workspace-message p { margin: 0; }
.workspace-message .btn { margin-top: 0.5rem; }
.workspace-message--user { align-self: flex-end; background: var(--instr-green-bg); }

.workspace-assistant__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.workspace-assistant__input { min-height: 3.5rem; resize: vertical; }

.workspace-activity {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.workspace-activity h3,
.workspace-activity__source { margin: 0; }
.workspace-activity h3 { font-size: 0.85rem; }
.workspace-activity__source { margin-top: 0.25rem; color: var(--muted); font-size: 0.7rem; overflow-wrap: anywhere; }

.workspace-run-status {
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  background: var(--instr-blue-bg);
  color: var(--instr-blue-fg);
  font-size: 0.65rem;
  font-weight: 650;
}

.workspace-run-status--completed { background: var(--instr-green-bg); color: var(--instr-green-fg); }
.workspace-run-status--failed { background: var(--instr-red-bg); color: var(--instr-red-fg); }

.workspace-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.workspace-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  color: var(--muted);
  font-size: 0.58rem;
  text-align: center;
}

.workspace-timeline__item::before {
  position: absolute;
  top: 0.43rem;
  right: 50%;
  z-index: 0;
  width: 100%;
  height: 1px;
  background: var(--border-strong);
  content: '';
}

.workspace-timeline__item:first-child::before { display: none; }

.workspace-timeline__dot {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--border-strong);
  border-radius: 99px;
  background: var(--surface);
  font-size: 0.5rem;
}

.workspace-timeline__item.is-done { color: var(--instr-green-fg); }
.workspace-timeline__item.is-done .workspace-timeline__dot { border-color: var(--instr-green-fg); background: var(--instr-green-fg); color: #fff; }
.workspace-timeline__item.is-active { color: var(--instr-blue-fg); font-weight: 700; }
.workspace-timeline__item.is-active .workspace-timeline__dot { border-color: var(--instr-blue-fg); box-shadow: 0 0 0 3px var(--instr-blue-bg); }
.workspace-timeline__item.is-failed { color: var(--instr-red-fg); }
.workspace-timeline__item.is-failed .workspace-timeline__dot { border-color: var(--instr-red-fg); background: var(--instr-red-bg); }
.workspace-timeline__units { font-family: var(--mono); }

.knowledge-workspace__inspector {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.workspace-inspector__tabs { flex: 0 0 auto; padding: 0 0.6rem; }
.workspace-inspector__content { flex: 1; min-height: 0; overflow: auto; padding: 1rem; }

.workspace-preview__heading p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.72rem; }

.workspace-preview__frame {
  width: 100%;
  height: 465px;
  margin-top: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.workspace-preview__text {
  max-height: 465px;
  margin-top: 0.9rem;
  overflow: auto;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  white-space: pre-wrap;
  font: 0.76rem/1.55 var(--ui);
}

.workspace-preview__actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.workspace-deleted-note { padding: 0.75rem; border-radius: 8px; background: var(--instr-amber-bg); color: var(--instr-amber-fg); font-size: 0.75rem; }

.workspace-chunk,
.workspace-concept,
.workspace-review-card,
.workspace-automation {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}

.workspace-chunk + .workspace-chunk,
.workspace-concept + .workspace-concept { margin-top: 0.65rem; }
.workspace-chunk p,
.workspace-concept p { margin: 0.55rem 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.55; white-space: pre-wrap; }
.workspace-concept blockquote { margin: 0.55rem 0 0; padding-left: 0.6rem; border-left: 2px solid var(--instr-green-fg); color: var(--muted); font-size: 0.7rem; }

.workspace-automation { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.75rem; }
.workspace-automation--auto-applied { border-color: color-mix(in srgb, var(--instr-green-fg) 35%, var(--border)); background: var(--instr-green-bg); color: var(--instr-green-fg); }
.workspace-automation--needs-review { border-color: color-mix(in srgb, var(--instr-amber-fg) 35%, var(--border)); background: var(--instr-amber-bg); color: var(--instr-amber-fg); }
.workspace-review-card { margin-bottom: 0.8rem; background: var(--instr-amber-bg); }
.workspace-review-card p { color: var(--instr-amber-fg); font-size: 0.75rem; }
.workspace-metadata-block { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.workspace-metadata-block h3 { margin: 0 0 0.55rem; font-size: 0.88rem; }

.workspace-assignment {
  max-height: 220px;
  overflow: auto;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.workspace-assignment__topic + .workspace-assignment__topic { margin-top: 0.65rem; }
.workspace-assignment__topic-name { margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 700; }
.workspace-assignment__lo { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.2rem 0; color: var(--muted); font-size: 0.72rem; }

.workspace-graph { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.workspace-graph__toolbar { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.8fr) auto; align-items: center; gap: 0.4rem; padding: 0.65rem; border-bottom: 1px solid var(--border); }
.workspace-zoom { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.68rem; }
.workspace-zoom input { width: 5rem; }
.workspace-graph__note { margin: 0; padding: 0.45rem 0.65rem; background: var(--instr-blue-bg); color: var(--instr-blue-fg); font-size: 0.68rem; }
.workspace-graph__canvas { flex: 1; min-height: 540px; overflow: auto; background-color: var(--surface-2); background-image: radial-gradient(var(--border-strong) 0.8px, transparent 0.8px); background-size: 18px 18px; }
.workspace-graph__svg { display: block; }
.workspace-graph__edge { fill: none; stroke: #aeb9c9; stroke-width: 1.4; }
.workspace-graph__edge--covers,
.workspace-graph__edge--assesses { stroke: var(--instr-green-fg); }
.workspace-graph__node { cursor: grab; }
.workspace-graph__node:active { cursor: grabbing; }
.workspace-graph__node rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(18, 27, 43, 0.08)); }
.workspace-graph__node text { fill: var(--text); font: 650 11px var(--ui); pointer-events: none; }
.workspace-graph__node .workspace-graph__subtitle { fill: var(--muted); font: 9px var(--mono); }
.workspace-graph__node--material rect { fill: var(--instr-blue-bg); stroke: var(--instr-blue-fg); }
.workspace-graph__node--concept rect { fill: var(--instr-green-bg); stroke: var(--instr-green-fg); }
.workspace-graph__node--lo rect { fill: var(--instr-amber-bg); stroke: var(--instr-amber-fg); }
.workspace-graph__node--question rect { fill: #f0e7f7; stroke: #76518d; }
.workspace-graph__node.is-trashed { opacity: 0.55; }

.workspace-feedback:empty { display: none; }
.workspace-feedback__message { margin: 0 0 0.75rem; padding: 0.65rem 0.8rem; border-radius: 8px; background: var(--instr-green-bg); color: var(--instr-green-fg); font-size: 0.78rem; }

@media (max-width: 1100px) {
  .knowledge-workspace { grid-template-columns: minmax(220px, 0.75fr) minmax(360px, 1.25fr); }
  .knowledge-workspace__assistant { border-right: 0; }
  .knowledge-workspace__inspector { grid-column: 1 / -1; min-height: 620px; border-top: 1px solid var(--border); }
}

@media (max-width: 760px) {
  .knowledge-workspace { display: flex; flex-direction: column; }
  .knowledge-workspace__files,
  .knowledge-workspace__assistant { border-right: 0; border-bottom: 1px solid var(--border); }
  .workspace-file-list { max-height: 310px; }
  .workspace-quick-actions { grid-template-columns: 1fr; }
  .workspace-timeline { grid-template-columns: repeat(3, 1fr); gap: 0.75rem 0; }
  .workspace-timeline__item:nth-child(4)::before { display: none; }
  .workspace-graph__toolbar { grid-template-columns: 1fr; }
}

/* ---- Assign Material panel (n3) --------------------------------------------- */

.suggestion-box {
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--instr-blue-fg) 30%, transparent);
  border-radius: var(--radius-sm);
  background: var(--instr-blue-bg);
  margin-bottom: 1.25rem;
}

.suggestion-box__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--instr-blue-fg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.suggestion-box__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.suggestion-box__desc {
  margin: 0 0 0.4rem;
  font-weight: 650;
}

.assign-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.suggestion-panel {
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.suggestion-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 1rem;
  align-items: start;
}

.suggestion-panel__theme {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.suggestion-panel__topic {
  align-items: flex-start;
  padding: 0;
}

.suggestion-panel__lo {
  align-items: flex-start;
  margin-left: 1.5rem;
  padding: 0.35rem 0;
  line-height: 1.45;
}

.suggestion-panel__topic input[type='checkbox'],
.suggestion-panel__lo input[type='checkbox'] {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.suggestion-panel__name {
  flex: 1 1 auto;
  min-width: 0;
}

.suggestion-panel__topic-name {
  font-weight: 650;
}

.suggestion-panel__name:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.suggestion-panel__sources {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}

.suggestion-panel__actions {
  padding-top: 0.25rem;
}

@media (max-width: 600px) {
  .structure-tree__toolbar {
    flex-direction: column;
  }

  .suggestion-panel__lo {
    margin-left: 0.75rem;
  }
}

.assign-checklist__theme-name {
  margin: 0 0 0.35rem;
  font-weight: 650;
}

.assign-checklist__lo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0 0.2rem 1rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ---- Course Settings (I4) ---------------------------------------------------- */

.settings-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: start;
}

.settings-danger-zone {
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--down) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--down) 5%, var(--surface));
}

.settings-danger-zone .btn--danger {
  width: fit-content;
}

.settings-column .input:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.strategy-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.strategy-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 0.2rem 0.65rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.strategy-card input {
  grid-row: 1 / span 2;
  margin-top: 0.2rem;
}

.strategy-card--active {
  background: var(--instr-dark);
  border-color: var(--instr-dark);
  color: #ffffff;
}

.strategy-card__title {
  margin: 0;
  font-weight: 650;
}

.strategy-card__subtitle {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ---- Exam templates (Phase 3 WS-10) --------------------------------------- */

.exam-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* The generic adjacent-card rule adds vertical spacing for stacked cards.
   These cards are grid siblings, so the grid gap is the only spacing needed. */
.exam-template-grid > .card + .card {
  margin-top: 0;
}

.exam-template-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1.1rem;
  padding: 1.25rem;
}

.exam-template-editor > .section-title,
.exam-template-editor > .view__lead {
  margin: 0;
}

.exam-template-editor > .section-title {
  font-size: 1.15rem;
}

.exam-template-editor > .view__lead {
  line-height: 1.5;
}

.exam-template-theme {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.4fr) repeat(3, minmax(3.4rem, 0.55fr));
  gap: 0.65rem;
  align-items: center;
}

.exam-template-theme:not(.exam-template-theme--head) {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.exam-template-theme--head {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.exam-template-theme__select,
.exam-template-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.exam-template-theme__select {
  min-width: 0;
  line-height: 1.4;
}

.exam-template-theme__select input,
.exam-template-checkbox input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--instr-green-fg);
}

.exam-template-theme__number {
  min-width: 0;
  padding-inline: 0.5rem;
  text-align: center;
}

.exam-template-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Create Course's paired Academic Year / Term dropdowns — same two-up grid as
   .exam-template-fields, collapsing to one column on narrow screens. */
.term-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.exam-template-fields .form-field:last-child {
  grid-column: 1 / -1;
}

.exam-template-checkbox {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.4;
}

.exam-template-editor > .btn:last-child {
  width: 100%;
  margin-top: auto;
}

.exam-template-warnings {
  padding: 0.8rem 1rem;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}

.exam-template-warnings__title {
  margin: 0 0 0.35rem;
  font-weight: 650;
}

.exam-template-warnings ul {
  margin: 0;
  padding-left: 1.2rem;
}

@media (max-width: 640px) {
  .exam-template-grid {
    grid-template-columns: 1fr;
  }

  .exam-template-editor {
    padding: 1rem;
  }

  .exam-template-theme {
    grid-template-columns: minmax(7rem, 1fr) repeat(3, minmax(3rem, 0.4fr));
    gap: 0.4rem;
  }

  .exam-template-fields {
    grid-template-columns: 1fr;
  }

  .exam-template-fields .form-field:last-child {
    grid-column: auto;
  }

  .term-fields {
    grid-template-columns: 1fr;
  }
}

.registration-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.registration-code__value {
  font-weight: 650;
  letter-spacing: 0.03em;
}

.roster-textarea {
  min-height: 10rem;
}

.roster-list {
  margin-top: 0.25rem;
}

.roster-list__rows {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 14rem;
  overflow-y: auto;
}

.roster-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.roster-list__extended {
  color: var(--instr-amber-fg);
  font-size: 0.78rem;
}

.roster-list__empty {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- Roster import preview -------------------------------------------------
   The result of parsing an uploaded CSV: which column was read, and which rows
   cannot be used. Colours reuse the instructor amber/red badge tokens that
   Phase 4 Task 2 (#58) already validated at AA on both shells. */

.roster-import {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.25rem 0 0.5rem;
}

.roster-import__summary {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-size: 0.85rem;
}

.roster-import__summary--warn {
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
}

.roster-rejects {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* Carries the CWL-vs-student-number explanation. Reads as prose, not a badge:
   it is the sentence that tells the instructor what to re-export. */
.roster-rejects__explanation {
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.5;
}

.roster-rejects__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 12rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.roster-rejects__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.roster-rejects__line {
  flex: 0 0 4.5rem;
  color: var(--muted);
}

.roster-rejects__value {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  word-break: break-all;
}

.roster-rejects__reason {
  color: var(--instr-red-fg);
}

.roster-rejects__more {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ---- Question Bank browser (I7) --------------------------------------------- */

.bank-summary {
  margin: 0.25rem 0 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.bank-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.bank-filters__search {
  flex: 1 1 220px;
  min-width: 200px;
}

.bank-filters select.input {
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 10rem;
}

/* Page actions (Import / Generate Question) — deliberately not part of
   `.bank-filters`: they act on the bank rather than narrowing it. */
.bank-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* "Select all / N selected" at the left of a bulk-action row (review queue,
   question bank). */
.bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: auto;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.bank-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.bank-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(220px, 2.2fr) 0.7fr 1.1fr 0.7fr 1fr 1.4fr 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.bank-table__rows .bank-row:last-child {
  border-bottom: none;
}

.bank-row--head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.bank-row__stem {
  overflow-wrap: anywhere;
}

.bank-row__stem p {
  margin: 0;
}

.bank-row__type,
.bank-row__topic,
.bank-row__difficulty {
  color: var(--text);
}

.bank-row__actions {
  display: flex;
  gap: 0.4rem;
}

.bank-row__source-changed {
  color: var(--instr-amber-fg);
  font-size: 0.8rem;
  font-weight: 600;
}

.bank-footer {
  margin: 0.75rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.bank-source-banner {
  display: block;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--instr-amber-fg);
  border-radius: var(--radius-sm);
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 640px) {
  .bank-filters__search,
  .bank-filters select.input {
    flex-basis: 100%;
    width: 100%;
  }

  .bank-actions .btn {
    flex: 1 1 auto;
  }

  .bank-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .bank-row--head {
    display: none;
  }

  .bank-table__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .bank-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .bank-table__rows .bank-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .bank-row__stem,
  .bank-row__actions,
  .bank-row__source-changed,
  .bank-row__spacer {
    grid-column: 1 / -1;
  }

  .bank-row__select {
    justify-self: start;
  }

  .bank-row__stem {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .bank-row [data-label]:not(.bank-row__stem) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .bank-row [data-label]::before {
    content: attr(data-label);
    margin-bottom: 0.15rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .bank-row__actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    padding-top: 0.2rem;
  }

  .bank-row__actions::before {
    flex-basis: 100%;
  }

  .bank-row__actions .btn {
    flex: 1 1 auto;
  }
}

/* ---- Question Detail / editor (I6) ------------------------------------------ */

.breadcrumb-back {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.breadcrumb-back:hover {
  color: var(--text);
}

.question-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 0.9fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .question-detail-layout {
    grid-template-columns: 1fr;
  }
}

.question-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.5rem;
}

.question-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.question-meta__label {
  color: var(--muted);
  font-weight: 600;
}

.question-meta-row label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-right: 0.4rem;
}

.question-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.82rem;
}

.lo-chip__remove {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
}

.lo-chip__remove:hover {
  color: var(--down);
}

.lo-chip-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex: 1 1 100%;
  min-width: 0;
  gap: 0.4rem;
}

.lo-chip-add__select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.lo-chip-add .btn {
  white-space: nowrap;
}

.option-editors {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1rem 0;
}

.option-editor {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.option-editor__role-label {
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--instr-gray-bg);
  color: var(--instr-gray-fg);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.option-editor__explanation-label {
  color: var(--muted);
  font-size: 0.75rem;
}

.option-editor__explanation {
  min-height: 3rem;
}

.question-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.question-save-row {
  margin-top: 0.5rem;
}

/* Edited-field highlight (Task 15, Task E): toggled on stem/option/difficulty
 * inputs when their live editor value diverges from the loaded version's
 * baseline value (see question-detail.ts's `isFieldEdited`). Reset on save. */
.edited {
  border-color: var(--warn) !important;
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2)) !important;
}

.agent-report-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1rem;
}

.agent-report-panel__title {
  margin: 0;
  font-size: 1rem;
}

.agent-report-block {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.agent-report-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-weight: 650;
  font-size: 0.85rem;
}

.agent-report-block__body {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-report-empty {
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  .question-meta-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .lo-chip-add {
    grid-template-columns: 1fr;
  }

  .question-actions {
    flex-wrap: wrap;
  }
}

/* ---- Review Queue (I5) ------------------------------------------------------- */

.queue-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.queue-controls select.input {
  width: auto;
}


.queue-message {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.85rem;
}

.queue-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.queue-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(220px, 2.4fr) 1.1fr 0.9fr 1fr 1.4fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.queue-table__rows .queue-row:last-child {
  border-bottom: none;
}

/* TA queue row: 5 columns — no select checkbox (the instructor row's leading
   1.75rem column), otherwise the same Question/Type-LO/Agent/Status/Actions
   layout. */
.queue-row--ta {
  grid-template-columns: minmax(220px, 2.4fr) 1.1fr 0.9fr 1fr 1.4fr;
}

.queue-row--head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.queue-row__stem {
  overflow-wrap: anywhere;
}

.queue-row__stem p {
  margin: 0;
}

.queue-row__flag {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.queue-row__flag--red {
  color: var(--instr-red-fg);
}

/* Sibling of .queue-row__flag above, same micro-layout, muted rather than
   red since a pending suggestion is informational, not an alert. */
.queue-row__suggestions {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.queue-row__type-lo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--text);
}

.queue-row__type-lo span:last-child {
  color: var(--muted);
  font-size: 0.8rem;
}

.queue-row__actions {
  display: flex;
  gap: 0.4rem;
}

@media (max-width: 640px) {
  .queue-controls {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .queue-controls select.input,
  .queue-controls .btn {
    flex: 1 1 10rem;
    width: auto;
  }

  .queue-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .queue-row--head {
    display: none;
  }

  .queue-table__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .queue-row {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .queue-table__rows .queue-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .queue-row > input[type='checkbox'] {
    margin-top: 1.35rem;
  }

  .queue-row__question,
  .queue-row__type-lo,
  .queue-row > .status-badge,
  .queue-row__actions {
    grid-column: 2;
    min-width: 0;
  }

  .queue-row [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .queue-row__question {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .queue-row__actions {
    flex-wrap: wrap;
    padding-top: 0.2rem;
  }

  .queue-row__actions .btn {
    flex: 1 1 auto;
  }
}

/* ---- Flag queue (Task 2, instructor half) ----------------------------------- */

.flag-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.flag-row {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

/* Each body row is wrapped in .flag-group (row + optional remediation panel,
   Task 6) so the "no trailing border" rule below can target whichever
   element is actually LAST in the LAST group -- the row when there's no
   panel, the panel when there is one -- via :last-child on each selector.
   (Fixed post-review, Minor 7: an earlier version targeted BOTH .flag-row and
   .remediation-panel unconditionally inside .flag-group:last-child, which
   also stripped the row's own border-bottom when a panel followed it,
   merging the row and panel with no separator -- the opposite of what the
   comment claimed.) */
.flag-table__rows > .flag-group:last-child > .flag-row:last-child,
.flag-table__rows > .flag-group:last-child > .remediation-panel:last-child {
  border-bottom: none;
}

.flag-row--head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.flag-row__stem {
  overflow-wrap: anywhere;
}

.flag-row__stem p {
  margin: 0;
}

.flag-row__topic,
.flag-row__reason,
.flag-row__stale,
.flag-row__escalation {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.flag-row__escalation strong {
  color: var(--text);
}

.flag-test-badge {
  display: inline-flex;
  margin-bottom: 0.45rem;
}

.flag-editor-banner {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.flag-editor-banner--test {
  border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}

.flag-editor-banner__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.flag-editor-banner p {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.flag-editor-banner__reason {
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.question-notes,
.question-student-reply {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.question-notes__list {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.question-notes > .btn {
  margin-top: 0.55rem;
}

.question-note {
  padding: 0.65rem 0.75rem;
  border-radius: calc(var(--radius) * 0.75);
  background: var(--surface-2);
}

.question-note__meta,
.question-note__text {
  margin: 0;
}

.question-note__meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.question-note__text {
  margin-top: 0.25rem;
  white-space: pre-wrap;
}

.flag-row__stale {
  font-style: italic;
}

.flag-row__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: end;
}

/* TA flag triage's per-group recommendation form (select + note + escalate
   button) needs to stack rather than sit in a single row like the
   instructor queue's plain button cluster above. */
.flag-row__actions--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  justify-self: stretch;
  min-width: 14rem;
}

.flag-row__actions--stack .form-field__label {
  margin-bottom: -0.2rem;
}

.flag-row__correctness {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- TA Question Page (views/ta/question-detail.ts) ------------------------ */

/* Read-only answer options. Plain <li>/<ol> markup renders the browser's
   decimal marker on top of the explicit "A."/"B." key span the view emits
   ("1. A. …"), so the marker is removed here and the key does the numbering
   instead. */
.question-options-readonly {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.question-options-readonly__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.question-options-readonly__key {
  flex-shrink: 0;
  font-weight: 650;
}

.question-options-readonly__item--correct {
  border-color: var(--up);
  background: var(--ok-bg);
  color: var(--ok-fg);
}

/* ---- Remediation checklist panel (§6.2, Task 6) ----------------------------- */

.remediation-panel {
  padding: 0.75rem 1rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.remediation-panel__title {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
}

.remediation-panel__editor-link {
  margin: 0 0 0.6rem;
}

.remediation-panel__editor-link a {
  font-weight: 650;
  text-decoration: underline;
}

.remediation-panel__stats {
  margin: 0 0 0.6rem;
  color: var(--muted);
}

.remediation-panel__checklist {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.remediation-panel__notify-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.remediation-panel__notified {
  color: var(--muted);
  font-style: italic;
}

/* ---- Pre-seeding coverage + Generate (N9 / I12) ----------------------------- */

.preseeding-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: 2rem;
}

.preseeding-row {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) 1fr 0.7fr 0.7fr 1.1fr 1.3fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.preseeding-table__rows .preseeding-row:last-child {
  border-bottom: none;
}

.preseeding-row--head {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 650;
}

.preseeding-row__topic,
.preseeding-row__target {
  color: var(--muted);
}

.preseeding-row__approved--good {
  color: var(--instr-green-fg);
  font-weight: 700;
}

.preseeding-row__approved--warn {
  color: var(--instr-amber-fg);
  font-weight: 700;
}

.preseeding-row__approved--bad {
  color: var(--instr-red-fg);
  font-weight: 700;
}

.preseeding-bulk-status {
  margin: -0.5rem 0 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.preseeding-form__hint {
  margin: 0.2rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.preseeding-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.chip-btn {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.chip-btn:hover {
  border-color: var(--instr-green-fg);
  color: var(--instr-green-fg);
}

.preseeding-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.preseeding-queued-message {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--instr-green-fg) 35%, transparent);
  border-radius: var(--radius-sm);
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-size: 0.88rem;
  margin: 1rem 0;
}

.preseeding-queued-message a {
  color: inherit;
  font-weight: 650;
}

@media (max-width: 640px) {
  .preseeding-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .preseeding-row--head {
    display: none;
  }

  .preseeding-table__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .preseeding-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .preseeding-table__rows .preseeding-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .preseeding-row__lo,
  .preseeding-row__action {
    grid-column: 1 / -1;
  }

  .preseeding-row [data-label] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .preseeding-row [data-label]::before {
    content: attr(data-label);
    margin-bottom: 0.15rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .preseeding-row__lo {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-weight: 650;
  }

  .preseeding-row__action .btn {
    width: 100%;
  }
}

.content-run-history {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.content-run-history .section-title,
.content-run-history .detail-section-title {
  margin-top: 0;
}

.content-run-status {
  display: block;
  margin: 0.55rem 0;
}

.content-run-status--failed {
  border-color: color-mix(in srgb, var(--instr-red-fg) 35%, transparent);
  background: var(--instr-red-bg);
  color: var(--instr-red-fg);
}

.content-run-status--partial {
  border-color: color-mix(in srgb, var(--instr-amber-fg) 35%, transparent);
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
}

/* =============================================================================
   Student shell + design-system primitives (Task 1). Follows the wireframe
   *roughly* — blue/white language, not exact tokens. Mirrors the "Instructor
   shell" section above: re-colors the shared .sidebar/.nav__* rules rather
   than duplicating the nav layout for a third sidebar variant.
   ========================================================================== */

/* ---- Student shell -------------------------------------------------------- */

.sidebar--student {
  --sidebar-bg: var(--student-sidebar-bg);
  --sidebar-text: var(--student-sidebar-text);
  --sidebar-text-strong: #ffffff;
  --sidebar-active: rgba(255, 255, 255, 0.16);
}

.sidebar--student .brand {
  padding: 0.35rem 0.5rem 0.5rem;
}

.sidebar--student .brand__name {
  color: #ffffff;
  font-size: 1.15rem;
}

.student-preview-pill {
  align-self: flex-start;
  margin: 0 0.5rem 1rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.preview-mode-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

/* ---- Practice context panel (sidebar, in-session only) -------------------- */

.practice-context-slot:not(:empty) {
  margin-top: 0.5rem;
}

.practice-context {
  margin: 0 0.5rem;
  padding: 0.9rem 0.95rem;
  border-radius: var(--radius-sm);
  /* Recessed, not raised: a white overlay lifts the panel toward the sidebar
     text and drops this block under WCAG AA (3.86:1). Darkening instead keeps
     the same visual separation while the text clears 4.5:1 with margin. */
  background: rgba(0, 0, 0, 0.14);
}

.practice-context__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.practice-context__lo {
  margin: 0 0 0.6rem;
  font-weight: 650;
  color: #ffffff;
}

.practice-context__status {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.92);
}

.practice-context__counts {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.practice-context__actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.practice-context__actions .btn {
  width: 100%;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.practice-context__actions .btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Copyright / disclaimer footer (every student screen, PRD §4.1) ------- */

.copyright-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.copyright-footer__line {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.copyright-footer__line:last-child {
  margin-bottom: 0;
}

/* ---- Breadcrumb ------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumb__sep {
  opacity: 0.6;
}

/* ---- Progress row (Topic-list / LO-list row) -------------------------------- */

.progress-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.progress-row + .progress-row {
  margin-top: 0.5rem;
}

.progress-row__index {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 650;
  font-size: 0.85rem;
}

.progress-row__text {
  flex: 1;
  min-width: 0;
}

.progress-row__title {
  margin: 0;
  font-weight: 600;
}

.progress-row__meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.progress-row__continue {
  flex-basis: 100%;
  margin: -0.35rem 0 0 2.6rem;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
}

@media (max-width: 520px) {
  .progress-row {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
  }

  .progress-row__text,
  .progress-row > .badge,
  .progress-row__continue {
    grid-column: 2;
  }

  .progress-row > .badge {
    justify-self: start;
  }

  .progress-row > .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .progress-row__continue {
    margin: -0.2rem 0 0;
  }
}

/* ---- Exam Prep (Phase 3 WS-10) ------------------------------------------- */

.exam-home-entry,
.exam-live__header,
.exam-card__head,
.exam-controls,
.exam-breakdown-row__label,
.exam-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.exam-home-entry {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--student-sidebar-bg) 45%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--student-sidebar-bg) 7%, var(--surface));
}

.exam-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.exam-card,
.exam-question,
.exam-score-card,
.exam-review,
.exam-history-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.exam-card,
.exam-question,
.exam-review {
  padding: 1.2rem 1.3rem;
}

.exam-card__title,
.exam-card__meta,
.exam-question__number,
.exam-review h3 {
  margin: 0;
}

.exam-card__meta,
.exam-question__number {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.exam-live__header {
  align-items: flex-start;
}

.exam-timer {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--mono);
  font-weight: 700;
}

.exam-timer--warning {
  border-color: var(--down);
  color: var(--down);
}

.exam-question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.45rem;
  margin: 1rem 0;
}

.exam-question-grid__item {
  min-height: 2.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.exam-question-grid__item.is-answered {
  border-color: var(--student-sidebar-bg);
  background: color-mix(in srgb, var(--student-sidebar-bg) 12%, var(--surface));
}

.exam-question-grid__item.is-current {
  outline: 3px solid color-mix(in srgb, var(--student-sidebar-bg) 28%, transparent);
}

.exam-question__stem {
  margin: 1rem 0;
  font-size: 1.05rem;
}

.exam-options {
  display: grid;
  gap: 0.6rem;
}

.exam-controls {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.exam-score-card {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.4rem;
}

.exam-score-card__score {
  margin: 0;
  color: var(--student-sidebar-bg);
  font-size: 2rem;
  font-weight: 750;
}

.exam-score-card__label,
.exam-review-option__label {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.exam-breakdown-row {
  margin-bottom: 0.8rem;
}

.exam-breakdown-row progress {
  width: 100%;
  height: 0.75rem;
  accent-color: var(--student-sidebar-bg);
}

.exam-breakdown-row__link {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 650;
}

.exam-review-list {
  margin-top: 1.5rem;
}

.exam-review + .exam-review {
  margin-top: 1rem;
}

.exam-review.is-correct {
  border-left: 4px solid var(--up);
}

.exam-review.is-missed {
  border-left: 4px solid var(--down);
}

.exam-review__stem {
  margin: 0.8rem 0;
}

.exam-review-option {
  margin-top: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.exam-review-option.is-selected {
  border-color: var(--student-sidebar-bg);
}

.exam-review-option.is-answer {
  background: color-mix(in srgb, var(--up) 8%, var(--surface));
}

.exam-review-option__text > :first-child,
.exam-review-option__explanation > :first-child {
  margin-top: 0.25rem;
}

.exam-review-option__explanation {
  color: var(--muted);
  font-size: 0.88rem;
}

.exam-history-list {
  display: grid;
  gap: 0.65rem;
}

.exam-history-row {
  padding: 0.9rem 1rem;
  color: inherit;
  text-decoration: none;
}

.exam-history-row:hover {
  border-color: var(--student-sidebar-bg);
}

.exam-history-row__kind {
  font-weight: 700;
}

@media (max-width: 640px) {
  .exam-home-entry,
  .exam-live__header,
  .exam-card__head,
  .exam-history-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- My Courses card grid / join box (Figma screen 1) ----------------------- */

.course-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.join-box {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.join-box__label {
  margin: 0 0 0.6rem;
  font-weight: 650;
  font-size: 0.9rem;
}

/* ---- Notification bell (Task 3, §4.3/§9.1) ---------------------------------- */

.notif-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.notif-bell {
  position: relative;
}

.notif-bell__icon {
  position: relative;
  display: inline-block;
  width: 0.9rem;
  height: 0.82rem;
  margin-top: 0.08rem;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 0.55rem 0.55rem 0.15rem 0.15rem;
}

.notif-bell__icon::before {
  content: '';
  position: absolute;
  left: -0.18rem;
  right: -0.18rem;
  bottom: -0.22rem;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.notif-bell__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.42rem;
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.notif-bell__badge {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--down);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  pointer-events: none;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(22rem, 90vw);
  max-height: 24rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 100;
}

.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  background: var(--surface);
}

.notif-panel__empty {
  padding: 1.25rem 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.notif-panel__list {
  display: flex;
  flex-direction: column;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.notif-item__icon {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--muted);
}

.notif-item__icon--elevated {
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
  border: 1.5px solid var(--down);
  background: transparent;
}

.notif-item__icon--elevated::after {
  content: '!';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--down);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--surface-2);
}

.notif-item--unread {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.notif-item--elevated {
  border-left-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.notif-item--elevated.notif-item--unread {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}

.notif-item--elevated .notif-item__icon {
  color: var(--warn);
}

.notif-item__body {
  min-width: 0;
  flex: 1;
}

.notif-item__text {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--text);
}

.notif-item__time {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Notification landing highlight: a notification click deep-links into the
   flag queue (see client/src/notification-target.ts), and this is what marks
   the row it landed on. Uses outline rather than border so the ring does not
   reflow the grid-based .flag-row layout. */
.flag-group--highlight,
.card--highlight {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
  animation: notif-landing 2.4s ease-out;
}

@keyframes notif-landing {
  0%,
  40% {
    background-color: color-mix(in srgb, var(--accent) 14%, transparent);
  }
  100% {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flag-group--highlight,
  .card--highlight {
    animation: none;
  }
}

/* Variable Definitions table on the parameterization panel (design spec
   2026-08-05). One table for both drawn slots and computed values, so an
   instructor reads every number a student can see in one place. Column order
   matches the header in param-config.ts. */
.vardef__head,
.vardef__row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) minmax(0, 1.7fr)
    minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 1.9fr) minmax(0, 0.7fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0;
}

.vardef__head {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.vardef__row {
  border-bottom: 1px solid var(--border);
}

/* The variable as it appears in the stem. `[NAME]` reads far better than the
   stored `{{NAME}}`; the storage format is unchanged. */
.slot-chip {
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.vardef__var {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.vardef__warn {
  font-size: 0.7rem;
  color: var(--warn);
}

.vardef__na {
  display: flex;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.vardef__type {
  font-size: 0.8rem;
  color: var(--muted);
}

.verification-banner {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
}

.verification-banner--ok {
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.verification-banner--fail {
  background: var(--err-bg);
  color: var(--err-fg);
}

@media (max-width: 900px) {
  .vardef__head {
    display: none;
  }

  .vardef__row {
    grid-template-columns: 1fr;
    padding: 0.6rem 0;
  }
}

/* Worked example on the question detail view: what a STUDENT sees, rendered
   from one server-side sample draw. The editor above it shows the raw
   {{placeholder}} template, which is right for editing and unreadable for
   judging the question. */
.question-sample {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.question-sample__stem {
  margin: 0.5rem 0 0.75rem;
  line-height: 1.55;
}

/* Stem and option text are rendered markdown, so they arrive wrapped in block
   elements. Collapse the outer margins so the panel keeps the tight spacing it
   had when these were plain strings. */
.question-sample__stem > :first-child,
.question-sample__text > :first-child,
.question-sample__explanation > :first-child {
  margin-top: 0;
}

.question-sample__stem > :last-child,
.question-sample__text > :last-child,
.question-sample__explanation > :last-child {
  margin-bottom: 0;
}

.question-sample__text {
  min-width: 0;
}

.question-sample__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Roomier than the 0.4rem this had when options were one line each: rows now
     carry a rendered explanation, so adjacent options need visible separation. */
  gap: 0.75rem;
}

.question-sample__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* The explanation is a full-width child that WRAPS onto its own line — the
     option text and its correct badge stay on the first line. */
  flex-wrap: wrap;
}

/* The rendered rationale, indented past the A/B/C/D key so that column still
   reads as a column. Display math (`$$…$$`) can be wide, so it scrolls inside
   this block rather than widening the page. */
.question-sample__explanation {
  flex-basis: 100%;
  margin-left: 2rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-x: auto;
}

.question-sample__key {
  font-weight: 650;
  min-width: 1.4rem;
  color: var(--muted);
}

.question-sample__option--correct .question-sample__key {
  color: var(--ok-fg);
}

.question-sample__badge {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--ok-bg);
  color: var(--ok-fg);
}

/* Parameterization page layout. These class names were referenced in the
   markup but never had any CSS, so every block sat flush against the next —
   the add-variable buttons, the verification banner and the preview controls
   ran together as one undifferentiated stack. Spacing is applied per block
   rather than as a flex `gap` on the container, because the table header and
   its two row groups (drawn, then computed) must stay tight against each
   other to read as a single table. */
.param-config-layout > .detail-section-title {
  margin: 1.75rem 0 0.5rem;
}

.param-config-layout > .detail-section-title:first-child {
  margin-top: 0;
}

.param-config-layout > .form-field__help {
  margin: 0 0 0.75rem;
}

.param-config__stem {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.8;
}

/* Clear of the table above and the banner below. */
.param-config__add {
  margin-top: 1rem;
}

.param-config__verification:not(:empty),
.param-config__error:not(:empty) {
  margin-top: 1.25rem;
}

.param-config-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.param-preview {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.param-preview__warnings {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--warn);
  font-size: 0.85rem;
}

/* =============================================================================
   Phase 5 — Course-as-Project experience

   Canvas contributes the clear course/project boundary; modern agent tools
   contribute the compact rail, persistent context, and task-first workspace.
   These rules intentionally sit at the end while the remaining legacy views
   migrate onto the shared Project shell.
   ========================================================================== */

.app-shell {
  transition: grid-template-columns 180ms ease;
}

.app-shell--instructor.is-collapsed {
  grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr);
}

.sidebar--instructor {
  padding: 0.9rem 0.75rem;
  overflow-x: hidden;
}

.sidebar__brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.sidebar__brand-row .brand {
  min-width: 0;
  padding: 0.3rem 0.35rem 0.4rem;
  text-decoration: none;
}

.brand__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 780;
}

.sidebar__collapse {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: 700 1.25rem/1 var(--ui);
  cursor: pointer;
}

.sidebar__collapse:hover,
.sidebar__collapse:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.nav__section {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.nav__section[hidden] {
  display: none;
}

.sidebar--instructor .nav {
  gap: 0.2rem;
}

.sidebar--instructor .nav__group {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.sidebar--instructor .nav__link {
  min-height: 2.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
}

.sidebar--instructor .nav__link--active {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(9, 25, 14, 0.3);
  box-shadow: none;
}

.nav__glyph {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 750;
}

.nav__glyph--step {
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--mono);
  font-size: 0.67rem;
}

.course-context {
  margin: 0.15rem 0 0.55rem;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.13);
}

.course-context[hidden] {
  display: none;
}

.course-context__back {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 650;
  text-decoration: none;
}

.course-context__back:hover {
  color: #fff;
}

.course-context__project {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.course-context__mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.course-context__body,
.course-context__name,
.course-context__meta {
  display: block;
  min-width: 0;
}

.course-context__body {
  overflow: hidden;
}

.course-context__name,
.course-context__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-context__name {
  color: #fff;
  font-size: 0.76rem;
}

.course-context__meta {
  margin-top: 0.1rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.61rem;
}

.app-shell--instructor.is-collapsed .sidebar--instructor {
  align-items: stretch;
  padding-inline: 0.55rem;
}

.app-shell--instructor.is-collapsed .sidebar__brand-row {
  flex-direction: column;
}

.app-shell--instructor.is-collapsed .brand__name,
.app-shell--instructor.is-collapsed .instructor-pill,
.app-shell--instructor.is-collapsed .nav__group,
.app-shell--instructor.is-collapsed .nav__text,
.app-shell--instructor.is-collapsed .course-context__back,
.app-shell--instructor.is-collapsed .course-context__body,
.app-shell--instructor.is-collapsed .sidebar__foot {
  display: none;
}

.app-shell--instructor.is-collapsed .sidebar__brand-row .brand {
  padding-inline: 0;
}

.app-shell--instructor.is-collapsed .course-context {
  display: grid;
  place-items: center;
  padding: 0.45rem;
}

.app-shell--instructor.is-collapsed .course-context[hidden] {
  display: none;
}

.app-shell--instructor.is-collapsed .course-context__project {
  justify-content: center;
}

.app-shell--instructor.is-collapsed .nav__link {
  justify-content: center;
  padding-inline: 0.35rem;
}

.app-shell--instructor.is-collapsed .nav__glyph {
  width: 2rem;
  height: 2rem;
}

/* Course project dashboard (Canvas-like entry, FinanceBot-native styling). */

.course-projects__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.course-projects__controls {
  display: flex;
  flex: 1;
  gap: 0.65rem;
  max-width: 42rem;
}

.course-projects__search {
  min-width: 14rem;
}

.course-projects__filter {
  width: auto;
  min-width: 9.5rem;
}

.course-projects__count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.course-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.course-card {
  display: flex;
  min-height: 18rem;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
}

.course-card:hover {
  border-color: color-mix(in srgb, var(--instr-green-fg) 45%, var(--border));
  box-shadow: 0 16px 38px -24px rgba(20, 64, 34, 0.46);
  transform: translateY(-2px);
}

.course-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.course-card__cover {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 8rem;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(145deg, #245f35, #163d24);
}

.course-card--tone-1 .course-card__cover { background: linear-gradient(145deg, #265d68, #173b43); }
.course-card--tone-2 .course-card__cover { background: linear-gradient(145deg, #495b86, #2d365d); }
.course-card--tone-3 .course-card__cover { background: linear-gradient(145deg, #75563e, #4b3526); }
.course-card--tone-4 .course-card__cover { background: linear-gradient(145deg, #685179, #43324f); }
.course-card--tone-5 .course-card__cover { background: linear-gradient(145deg, #4d6265, #2c3e41); }

.course-card__code {
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.course-card__cover .badge {
  z-index: 1;
}

.course-card__monogram {
  position: absolute;
  right: 0.85rem;
  bottom: -0.55rem;
  color: rgba(255, 255, 255, 0.13);
  font-size: 4.8rem;
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 1;
}

.course-card__main {
  flex: 1;
  padding: 1.05rem 1.1rem 0.75rem;
}

.course-card__title {
  font-size: 1rem;
  line-height: 1.35;
}

.course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 1.1rem;
  padding: 0.8rem 0 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.74rem;
}

.course-card__footer strong {
  color: var(--instr-green-fg);
}

.course-projects__empty {
  grid-column: 1 / -1;
}

/* Course project home / Launch Cockpit. */

.view--course-project {
  max-width: 1180px;
}

.project-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--instr-green-fg) 18%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 15%, color-mix(in srgb, var(--instr-green-bg) 70%, transparent) 0, transparent 36%),
    var(--surface);
}

.project-hero__eyebrow,
.project-panel__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--instr-green-fg);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.project-hero__title {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -0.035em;
}

.project-hero__meta {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.project-hero__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}

.project-hero__status {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--instr-gray-bg);
  color: var(--instr-gray-fg);
  font-size: 0.7rem;
  font-weight: 750;
}

.project-hero__status--published { background: var(--instr-green-bg); color: var(--instr-green-fg); }
.project-hero__status--archived { background: var(--instr-gray-bg); color: var(--instr-gray-fg); }

.course-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.course-flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.8rem;
  color: var(--text);
  text-decoration: none;
}

.course-flow__step + .course-flow__step {
  border-left: 1px solid var(--border);
}

.course-flow__step:hover {
  background: var(--surface-2);
}

.course-flow__number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 99px;
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 800;
}

.course-flow__step--not-started .course-flow__number,
.course-flow__step--blocked .course-flow__number {
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--muted);
}

.course-flow__step--blocked .course-flow__body {
  opacity: 0.68;
}

.course-flow__step--in-progress .course-flow__number {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
}

.course-flow__step--needs-attention .course-flow__number {
  background: color-mix(in srgb, var(--down) 13%, var(--surface));
  color: var(--down);
}

.course-flow__step--ready .course-flow__number,
.course-flow__step--complete .course-flow__number {
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-flow__step--complete .course-flow__number {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--instr-green-fg) 28%, transparent);
}

.course-flow__body,
.course-flow__body strong,
.course-flow__body span {
  display: block;
  min-width: 0;
}

.course-flow__body strong,
.course-flow__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-flow__body strong { font-size: 0.75rem; }
.course-flow__body span { margin-top: 0.12rem; color: var(--muted); font-size: 0.64rem; }

.project-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.project-panel,
.project-explore {
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}

.project-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.project-panel__heading .section-title,
.project-panel__snapshot-title {
  margin: 0;
}

.project-panel__count {
  display: grid;
  place-items: center;
  min-width: 1.8rem;
  height: 1.8rem;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.project-panel--status .cockpit-readiness {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.project-panel__snapshot-title {
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
}

.project-panel--status .stat-tile-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.project-panel--status .stat-tile {
  padding: 0.7rem;
}

.project-panel--status .stat-tile__value {
  font-size: 1.35rem;
}

.project-panel--status .stat-tile__label {
  font-size: 0.65rem;
}

.project-panel .cockpit-checklist {
  margin-bottom: 0;
}

.workflow-actions__next-label {
  margin: 0;
  color: var(--instr-green-fg);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.workflow-action--primary {
  min-height: 7rem;
}

.workflow-actions__upcoming {
  margin-top: 0.2rem;
  border-top: 1px solid var(--border);
}

.workflow-actions__upcoming > summary {
  padding: 0.85rem 0.25rem 0.25rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.workflow-actions--secondary {
  margin-top: 0.5rem;
}

.workflow-actions--secondary .workflow-action {
  min-height: 0;
  padding: 0.75rem;
}

.project-explore {
  margin-top: 1rem;
}

/* Knowledge Workspace stays one workspace instead of stretching the page. */

@media (min-width: 1101px) {
  .knowledge-workspace {
    height: clamp(610px, calc(100dvh - 12rem), 820px);
    min-height: 0;
  }

  .workspace-file-list {
    max-height: none;
  }

  .knowledge-workspace__assistant,
  .knowledge-workspace__files,
  .knowledge-workspace__inspector {
    overflow: hidden;
  }

  .workspace-activity {
    max-height: 12.5rem;
    overflow: auto;
  }
}

.workspace-file-list {
  padding-right: 0.15rem;
}

.workspace-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid transparent;
  border-radius: 10px;
}

.workspace-file-row:hover,
.workspace-file-row:focus-within,
.workspace-file-row--selected {
  border-color: color-mix(in srgb, var(--instr-green-fg) 22%, var(--border));
  background: var(--surface);
}

.workspace-file-row .workspace-file {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-file__action {
  margin-right: 0.4rem;
  padding: 0.3rem 0.42rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--instr-red-fg);
  font: 650 0.62rem/1 var(--ui);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.workspace-file-row:hover .workspace-file__action,
.workspace-file-row:focus-within .workspace-file__action {
  opacity: 1;
}

.workspace-file__action:hover,
.workspace-file__action:focus-visible {
  background: var(--instr-red-bg);
}

.workspace-file__action--restore {
  color: var(--instr-green-fg);
}

.workspace-file__action--restore:hover,
.workspace-file__action--restore:focus-visible {
  background: var(--instr-green-bg);
}

@media (max-width: 1100px) {
  .knowledge-workspace {
    grid-template-columns: minmax(220px, 0.75fr) minmax(360px, 1.25fr);
  }

  .knowledge-workspace__assistant {
    border-right: 0;
  }

  .knowledge-workspace__inspector {
    grid-column: 1 / -1;
    min-height: 620px;
    border-top: 1px solid var(--border);
  }

  .course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-flow__step:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .course-flow__step:nth-child(5) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 860px) {
  .app-shell--instructor.is-collapsed {
    grid-template-columns: 1fr;
  }

  .app-shell--instructor.is-collapsed .sidebar--instructor {
    align-items: stretch;
    width: min(86vw, var(--sidebar-w));
    padding: 0.9rem 0.75rem;
  }

  .app-shell--instructor.is-collapsed .sidebar__brand-row {
    flex-direction: row;
  }

  .app-shell--instructor.is-collapsed .brand__name,
  .app-shell--instructor.is-collapsed .nav__group,
  .app-shell--instructor.is-collapsed .nav__text,
  .app-shell--instructor.is-collapsed .course-context__body,
  .app-shell--instructor.is-collapsed .sidebar__foot {
    display: block;
  }

  .app-shell--instructor.is-collapsed .instructor-pill,
  .app-shell--instructor.is-collapsed .course-context__back {
    display: inline-block;
  }

  .app-shell--instructor.is-collapsed .course-context {
    display: block;
    padding: 0.65rem;
  }

  .app-shell--instructor.is-collapsed .course-context[hidden] {
    display: none;
  }

  .app-shell--instructor.is-collapsed .course-context__project,
  .app-shell--instructor.is-collapsed .nav__link {
    justify-content: flex-start;
  }

  .sidebar__collapse {
    display: none;
  }

  .project-cockpit {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .course-projects__toolbar,
  .course-projects__controls,
  .project-hero,
  .project-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .course-projects__search,
  .course-projects__filter {
    width: 100%;
    min-width: 0;
  }

  .course-list {
    grid-template-columns: 1fr;
  }

  .course-card {
    min-height: 16rem;
  }

  .course-flow {
    grid-template-columns: 1fr;
  }

  .course-flow__step + .course-flow__step,
  .course-flow__step:nth-child(4),
  .course-flow__step:nth-child(5) {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .workspace-file__action {
    opacity: 1;
  }
}

/* =============================================================================
   Course-as-Project role shells — Student + Teaching Assistant
   ========================================================================== */

.app-shell--role.is-collapsed {
  grid-template-columns: var(--sidebar-collapsed-w) minmax(0, 1fr);
}

.app-shell--role .sidebar {
  padding: 0.9rem 0.75rem;
  overflow-x: hidden;
}

.app-shell--role .nav {
  gap: 0.2rem;
}

.app-shell--role .nav__group {
  color: rgba(255, 255, 255, 0.82);
}

.app-shell--role .nav__link {
  min-height: 2.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
}

.app-shell--role .nav__link--active {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(8, 16, 34, 0.28);
  box-shadow: none;
}

.app-shell--role.is-collapsed .sidebar {
  align-items: stretch;
  padding-inline: 0.55rem;
}

.app-shell--role.is-collapsed .sidebar__brand-row {
  flex-direction: column;
}

.app-shell--role.is-collapsed .brand__name,
.app-shell--role.is-collapsed .student-preview-pill,
.app-shell--role.is-collapsed .instructor-pill,
.app-shell--role.is-collapsed .nav__group,
.app-shell--role.is-collapsed .nav__text,
.app-shell--role.is-collapsed .course-context__back,
.app-shell--role.is-collapsed .course-context__body,
.app-shell--role.is-collapsed .course-context__picker,
.app-shell--role.is-collapsed .sidebar__foot {
  display: none;
}

.app-shell--role.is-collapsed .sidebar__brand-row .brand {
  padding-inline: 0;
}

.app-shell--role.is-collapsed .course-context {
  display: grid;
  place-items: center;
  padding: 0.45rem;
}

.app-shell--role.is-collapsed .course-context[hidden] {
  display: none;
}

.app-shell--role.is-collapsed .course-context__project,
.app-shell--role.is-collapsed .nav__link {
  justify-content: center;
}

/* Practice replaces the normal icon nav with a rich context card. That card
 * has no meaningful 76px representation, so the desktop icon rail must hide
 * it instead of squeezing sentences and action labels into vertical text. */
.app-shell--role.is-collapsed .practice-context-slot {
  display: none;
}

.app-shell--role.is-collapsed .nav__glyph {
  width: 2rem;
  height: 2rem;
}

.sidebar--student .brand {
  padding: 0.3rem 0.35rem 0.4rem;
}

.sidebar--student .student-preview-pill {
  margin: 0.15rem 0.35rem 0.45rem;
}

.sidebar--ta .course-context__picker {
  margin-top: 0.65rem;
}

.sidebar--ta .ta-course-picker {
  min-height: 2.25rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
  font-size: 0.7rem;
}

/* Student course-project dashboard. */

.student-projects__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.view--student-projects .theme-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.student-course-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.student-course-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--course-color) 38%, var(--border));
  box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--course-color) 70%, transparent);
}

.student-course-card__cover {
  display: flex;
  min-height: 7.5rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.1rem;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.2), transparent 34%),
    var(--course-color);
  color: #fff;
}

.student-course-card__code {
  font-size: 1.25rem;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.student-course-card__project {
  align-self: flex-start;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-course-card__body {
  display: flex;
  min-height: 13.5rem;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.1rem;
}

.student-course-card__body > .btn {
  width: 100%;
  margin-top: auto;
}

.view--student-projects .join-box {
  margin-top: 2rem;
  padding: 1.35rem;
  border-style: solid;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.view--student-projects .join-box .section-title {
  margin-bottom: 0.35rem;
}

/* Student course home: one calm project summary followed by a clear journey. */

.student-course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.3fr);
  gap: 2rem;
  margin-bottom: 1rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--student-sidebar-bg) 24%, var(--border));
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--student-sidebar-bg) 14%, transparent), transparent 34%),
    var(--surface);
  box-shadow: var(--shadow);
}

.student-course-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  letter-spacing: -0.035em;
}

.student-course-hero__meta,
.student-course-hero__lead {
  margin: 0.65rem 0 0;
  color: var(--muted);
}

.student-course-hero__lead {
  max-width: 45rem;
}

.student-course-hero__progress {
  align-self: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--student-sidebar-bg) 5%, var(--surface));
}

.student-course-hero__progress strong,
.student-course-hero__progress span {
  display: block;
}

.student-course-hero__progress strong {
  color: var(--student-sidebar-bg);
  font-size: 1.7rem;
}

.student-course-hero__progress span {
  margin: 0.15rem 0 0.7rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.student-learning-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.student-learning-flow__step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.7rem 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.student-learning-flow__step + .student-learning-flow__step {
  border-left: 1px solid var(--border);
}

.student-learning-flow__step strong {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.student-learning-flow__step.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--student-sidebar-bg) 7%, var(--surface));
}

.student-learning-flow__step.is-active strong {
  background: var(--student-sidebar-bg);
  color: #fff;
}

@media (max-width: 860px) {
  .app-shell--role.is-collapsed {
    grid-template-columns: 1fr;
  }

  .app-shell--role.is-collapsed .sidebar {
    align-items: stretch;
    width: min(86vw, var(--sidebar-w));
    padding: 0.9rem 0.75rem;
  }

  .app-shell--role.is-collapsed .sidebar__brand-row {
    flex-direction: row;
  }

  .app-shell--role.is-collapsed .brand__name,
  .app-shell--role.is-collapsed .nav__group,
  .app-shell--role.is-collapsed .nav__text,
  .app-shell--role.is-collapsed .course-context__body,
  .app-shell--role.is-collapsed .course-context__picker,
  .app-shell--role.is-collapsed .sidebar__foot {
    display: block;
  }

  .app-shell--role.is-collapsed .student-preview-pill,
  .app-shell--role.is-collapsed .instructor-pill,
  .app-shell--role.is-collapsed .course-context__back {
    display: inline-block;
  }

  .app-shell--role.is-collapsed .course-context {
    display: block;
    padding: 0.65rem;
  }

  .app-shell--role.is-collapsed .course-context[hidden] {
    display: none;
  }

  .app-shell--role.is-collapsed .course-context__project,
  .app-shell--role.is-collapsed .nav__link {
    justify-content: flex-start;
  }

  /* On small screens the sidebar is an off-canvas drawer rather than an icon
   * rail. A persisted desktop collapse preference must not hide its content. */
  .app-shell--role.is-collapsed .practice-context-slot:not(:empty) {
    display: block;
  }

  .student-course-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .student-projects__header {
    align-items: stretch;
    flex-direction: column;
  }

  .student-learning-flow {
    grid-template-columns: 1fr;
  }

  .student-learning-flow__step + .student-learning-flow__step {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .view--student-projects .join-box .row {
    align-items: stretch;
    flex-direction: column;
  }

  .view--student-projects .join-box .btn {
    width: 100%;
  }
}

/* ---- Guided course setup --------------------------------------------------- */

.course-setup-guide {
  width: min(70rem, calc(100vw - 2rem));
}

.course-setup-guide__surface {
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 58rem);
  padding: 0;
  overflow: hidden;
}

.course-setup-guide__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem 1rem;
  border-bottom: 1px solid var(--border);
}

.course-setup-guide__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--instr-green-fg);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.course-setup-guide__title {
  margin-bottom: 0.3rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.course-setup-guide__close {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
}

.course-setup-guide__progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.course-setup-guide__stage {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 4.15rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.course-setup-guide__stage + .course-setup-guide__stage {
  border-left: 1px solid var(--border);
}

.course-setup-guide__stage:hover,
.course-setup-guide__stage:focus-visible {
  background: color-mix(in srgb, var(--instr-green-bg) 60%, var(--surface));
  color: var(--text);
}

.course-setup-guide__stage.is-active {
  border-bottom-color: var(--instr-green-fg);
  background: var(--surface);
  color: var(--text);
}

.course-setup-guide__stage-number {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 750;
}

.course-setup-guide__stage--complete .course-setup-guide__stage-number,
.course-setup-guide__stage--ready .course-setup-guide__stage-number {
  border-color: color-mix(in srgb, var(--instr-green-fg) 35%, var(--border));
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-setup-guide__stage--in-progress .course-setup-guide__stage-number {
  border-color: color-mix(in srgb, var(--instr-blue-fg) 35%, var(--border));
  background: var(--instr-blue-bg);
  color: var(--instr-blue-fg);
}

.course-setup-guide__stage--needs-attention .course-setup-guide__stage-number,
.course-setup-guide__stage--blocked .course-setup-guide__stage-number {
  border-color: color-mix(in srgb, var(--instr-amber-fg) 35%, var(--border));
  background: var(--instr-amber-bg);
  color: var(--instr-amber-fg);
}

.course-setup-guide__stage-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.course-setup-guide__stage-copy strong,
.course-setup-guide__stage-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-setup-guide__stage-copy strong {
  font-size: 0.76rem;
}

.course-setup-guide__stage-copy small {
  color: var(--muted);
  font-size: 0.65rem;
}

.course-setup-guide__live {
  min-height: 1px;
  margin: 0;
  padding: 0 1.4rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.76rem;
}

.course-setup-guide__live:not(:empty) {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}

.course-setup-guide__live--success {
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-setup-guide__live--error {
  background: var(--instr-red-bg);
  color: var(--instr-red-fg);
}

.course-setup-guide__body {
  min-height: 0;
  padding: 1.35rem 1.4rem 1.4rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.course-setup-guide__screen-heading {
  margin-bottom: 1rem;
}

.course-setup-guide__screen-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.015em;
}

.course-setup-guide__screen-title:focus {
  outline: none;
}

.course-setup-guide__screen-description {
  max-width: 54rem;
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.course-setup-guide__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.course-setup-guide__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 8.5rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.course-setup-guide__choice:hover,
.course-setup-guide__choice:focus-visible {
  border-color: var(--instr-green-fg);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.course-setup-guide__choice.is-recommended {
  border-color: color-mix(in srgb, var(--instr-green-fg) 42%, var(--border));
  background: color-mix(in srgb, var(--instr-green-bg) 45%, var(--surface));
}

.course-setup-guide__choice > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.course-setup-guide__choice strong {
  line-height: 1.35;
}

.course-setup-guide__choice small {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.45;
}

.course-setup-guide__choice-icon,
.course-setup-guide__ai-icon,
.course-setup-guide__preview-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 750;
}

.course-setup-guide__choice-arrow {
  color: var(--instr-green-fg);
  font-size: 1.25rem;
}

.course-setup-guide__recommended {
  width: fit-content;
  color: var(--instr-green-fg);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.course-setup-guide__alert {
  margin: 0.9rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.course-setup-guide__alert--success {
  border-color: color-mix(in srgb, var(--instr-green-fg) 28%, var(--border));
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-setup-guide__alert--error {
  border-color: color-mix(in srgb, var(--instr-red-fg) 28%, var(--border));
  background: var(--instr-red-bg);
  color: var(--instr-red-fg);
}

.course-setup-guide__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.course-setup-guide__actions-primary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.course-setup-guide__form {
  display: grid;
  gap: 1rem;
}

.course-setup-guide__lo-input {
  min-height: 11rem;
}

.course-setup-guide__hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.4;
}

.course-setup-guide__form-error {
  min-height: 1.15rem;
  margin: 0.4rem 0 0;
  color: var(--instr-red-fg);
  font-size: 0.78rem;
  line-height: 1.45;
}

.course-setup-guide__source-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: 0.85rem;
}

.course-setup-guide__source-inputs .upload-zone {
  min-height: 10rem;
  padding: 1.25rem;
}

.course-setup-guide__url-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.course-setup-guide__url-panel > p {
  margin: 0.3rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.course-setup-guide__url-form {
  display: flex;
  gap: 0.5rem;
}

.course-setup-guide__upload-status {
  min-height: 1.1rem;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.course-setup-guide__source-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.course-setup-guide__source-summary > * {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.7rem;
}

.course-setup-guide__source-summary > strong {
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-setup-guide__source-list,
.course-setup-guide__generation-list,
.course-setup-guide__review-list {
  display: grid;
  gap: 0.55rem;
  max-height: min(38dvh, 24rem);
  margin-top: 0.75rem;
  padding-right: 0.2rem;
  overflow: auto;
}

.course-setup-guide__source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.course-setup-guide__source-format {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.25rem;
  border-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 750;
}

.course-setup-guide__source-copy,
.course-setup-guide__generation-copy,
.course-setup-guide__review-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
}

.course-setup-guide__source-copy strong,
.course-setup-guide__source-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-setup-guide__source-copy small,
.course-setup-guide__generation-copy small {
  color: var(--muted);
  font-size: 0.7rem;
}

.course-setup-guide__status,
.course-setup-guide__run-status {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: capitalize;
}

.course-setup-guide__status--ready {
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
}

.course-setup-guide__status--processing {
  background: var(--instr-blue-bg);
  color: var(--instr-blue-fg);
}

.course-setup-guide__status--failed {
  background: var(--instr-red-bg);
  color: var(--instr-red-fg);
}

.course-setup-guide__empty {
  margin: 0;
  padding: 1.25rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.course-setup-guide__ai-step,
.course-setup-guide__preview-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--instr-green-fg) 30%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--instr-green-bg) 38%, var(--surface));
}

.course-setup-guide__ai-step h4,
.course-setup-guide__preview-card h4,
.course-setup-guide__run-list h4 {
  margin: 0;
  font-size: 0.9rem;
}

.course-setup-guide__ai-step p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.course-setup-guide__hierarchy {
  display: grid;
  gap: 0.7rem;
  max-height: min(38dvh, 24rem);
  margin-top: 0.8rem;
  padding-right: 0.2rem;
  overflow: auto;
}

.course-setup-guide__draft-theme {
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.course-setup-guide__draft-theme.is-disabled {
  opacity: 0.62;
}

.course-setup-guide__draft-title,
.course-setup-guide__draft-lo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.course-setup-guide__draft-title .input {
  font-weight: 700;
}

.course-setup-guide__draft-los {
  display: grid;
  gap: 0.5rem;
  margin: 0.65rem 0 0 1.65rem;
}

.course-setup-guide__draft-lo small {
  min-width: 6.8rem;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: right;
}

.course-setup-guide__generation-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto minmax(10rem, 0.65fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.course-setup-guide__generation-row.is-complete {
  border-color: color-mix(in srgb, var(--instr-green-fg) 25%, var(--border));
  background: color-mix(in srgb, var(--instr-green-bg) 28%, var(--surface));
}

/* The batch planner dialog (Question Workspace): same grid as the setup
   guide's inline version, inside a wide app-dialog. */
/* The dialog ELEMENT is what carries the width (31rem by default) — widening
   only the surface inside it is what produced a horizontal scrollbar. */
.app-dialog--wide {
  width: min(80rem, calc(100vw - 2rem));
}

.app-dialog--wide .app-dialog__surface {
  max-height: 90vh;
  overflow-y: auto;
}

.generation-plan__rows {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.generation-plan__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.generation-plan__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.generation-plan__row.is-excluded {
  opacity: 0.55;
}

.generation-plan__select {
  margin-top: 0.2rem;
}

@media (max-width: 56rem) {
  .generation-plan__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .generation-plan__grid {
    grid-column: 1 / -1;
  }
}

.generation-plan__copy {
  display: grid;
  gap: 0.15rem;
}

.generation-plan__copy small {
  color: var(--muted);
  font-size: 0.72rem;
}

.generation-plan__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem 0.85rem;
}

.generation-plan__tier {
  display: grid;
  gap: 0.3rem;
}

.generation-plan__tier > small {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: capitalize;
}

.generation-plan__kinds {
  display: flex;
  gap: 0.4rem;
}

.generation-plan__kind {
  display: grid;
  gap: 0.15rem;
  font-size: 0.68rem;
  color: var(--muted);
}

.generation-plan__count {
  width: 3.6rem;
  padding: 0.3rem 0.4rem;
  font-family: var(--mono);
  text-align: center;
}

.generation-plan__count:disabled {
  opacity: 0.5;
}

/* The batch planner: a row is the LO's copy plus a tier grid, each tier a
   pair of steppers (calculation / conceptual). */
.course-setup-guide__generation-row:has(.course-setup-guide__plan-grid) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.course-setup-guide__plan-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.5rem 0.85rem;
}

.course-setup-guide__plan-tier {
  display: grid;
  gap: 0.3rem;
}

.course-setup-guide__plan-tier > small {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: capitalize;
}

.course-setup-guide__plan-kinds {
  display: flex;
  gap: 0.4rem;
}

.course-setup-guide__plan-kind {
  display: grid;
  gap: 0.15rem;
  font-size: 0.68rem;
  color: var(--muted);
}

.course-setup-guide__plan-count {
  width: 3.6rem;
  padding: 0.3rem 0.4rem;
  font-family: var(--mono);
  text-align: center;
}

.course-setup-guide__plan-count:disabled {
  opacity: 0.5;
}

.course-setup-guide__coverage {
  font-family: var(--mono);
  font-size: 0.7rem;
}

.course-setup-guide__eligibility {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

.course-setup-guide__eligibility.is-ready {
  color: var(--instr-green-fg);
}

.course-setup-guide__run-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.course-setup-guide__run {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
}

.course-setup-guide__run + .course-setup-guide__run {
  border-top: 1px solid var(--border);
}

.course-setup-guide__run > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

.course-setup-guide__run small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-setup-guide__run-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--instr-blue-fg);
}

.course-setup-guide__run--completed .course-setup-guide__run-dot {
  background: var(--instr-green-fg);
}

.course-setup-guide__run--failed .course-setup-guide__run-dot,
.course-setup-guide__run--partial .course-setup-guide__run-dot {
  background: var(--instr-red-fg);
}

.course-setup-guide__review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.course-setup-guide__review-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.course-setup-guide__review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.course-setup-guide__review-meta span {
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: capitalize;
}

.course-setup-guide__review-options {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
}

.course-setup-guide__review-options li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.72rem;
}

.course-setup-guide__review-options li.is-correct {
  border-color: color-mix(in srgb, var(--instr-green-fg) 34%, var(--border));
  background: color-mix(in srgb, var(--instr-green-bg) 42%, var(--surface));
}

.course-setup-guide__option-key {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--surface);
  font-family: var(--mono);
  font-weight: 750;
}

.course-setup-guide__option-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.4;
}

.course-setup-guide__option-copy small {
  color: var(--muted);
  font-size: 0.66rem;
}

.course-setup-guide__option-role {
  color: var(--muted);
  font-size: 0.63rem;
  font-weight: 700;
  white-space: nowrap;
}

.course-setup-guide__review-options li.is-correct .course-setup-guide__option-role {
  color: var(--instr-green-fg);
}

.course-setup-guide__complete-state {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--instr-green-fg) 38%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--instr-green-bg) 30%, var(--surface));
  text-align: center;
}

.course-setup-guide__complete-state > span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--instr-green-bg);
  color: var(--instr-green-fg);
  font-weight: 800;
}

.course-setup-guide__complete-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.course-setup-guide__preview-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.course-setup-guide__preview-card ul {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .course-setup-guide__stage-detail {
    display: none;
  }

  .course-setup-guide__stage {
    min-height: 3.5rem;
  }

  .course-setup-guide__source-inputs,
  .course-setup-guide__choices {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .course-setup-guide {
    width: calc(100vw - 1rem);
  }

  .course-setup-guide__surface {
    max-height: 96dvh;
  }

  .course-setup-guide__header,
  .course-setup-guide__body {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .course-setup-guide__body {
    padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  }

  .course-setup-guide__progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .course-setup-guide__stage {
    min-height: 4.4rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.2rem;
    text-align: center;
  }

  .course-setup-guide__stage-copy strong {
    overflow: visible;
    font-size: 0.6rem;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
  }

  .course-setup-guide__stage-copy small {
    overflow: visible;
    font-size: 0.52rem;
    line-height: 1.1;
    text-overflow: clip;
    white-space: normal;
  }

  .course-setup-guide__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .course-setup-guide__actions-primary {
    align-items: stretch;
    flex-direction: column;
  }

  .course-setup-guide__actions .btn {
    width: 100%;
  }

  .course-setup-guide__url-form,
  .course-setup-guide__source,
  .course-setup-guide__generation-row,
  .course-setup-guide__review-item,
  .course-setup-guide__ai-step {
    grid-template-columns: 1fr;
  }

  .course-setup-guide__url-form {
    display: grid;
  }

  .course-setup-guide__source-format,
  .course-setup-guide__status,
  .course-setup-guide__source .btn,
  .course-setup-guide__ai-icon {
    justify-self: start;
  }

  .course-setup-guide__eligibility {
    text-align: left;
  }

  .course-setup-guide__draft-title,
  .course-setup-guide__draft-lo {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .course-setup-guide__draft-lo small {
    grid-column: 2;
    text-align: left;
  }
}