/*
 * EduSense — Expressive theme (typeui.sh/expressive)
 * Loaded after feedback-pulse-app-theme.css. Remaps its --pulse-* tokens and
 * restyles the same surface. Live Quizzes, Oral and Peer Assessment keep their
 * own systems (data-ui-surface), exactly as before.
 * Rules: Plex Mono for headings, Plex Sans for body, 14px base,
 * bold outline + offset shadow on cards and buttons only.
 */

:root {
  --pulse-maroon: #5c001e;       /* primary — UTM maroon, 14:1 on white */
  --pulse-maroon-2: #74233e;     /* primary hover */
  --pulse-maroon-soft: #f4e7eb;
  --pulse-gold: #2563eb;         /* secondary — accents, focus */
  --pulse-gold-soft: #dbeafe;
  --pulse-ink: #111827;
  --pulse-muted: #4b5563;
  --pulse-line: #d1d5db;
  --pulse-paper: #f9f6f5;
  --pulse-green: #166534;
  --pulse-green-soft: #dcfce7;
  --pulse-blue: #1d4ed8;
  --pulse-blue-soft: #dbeafe;
  --pulse-red: #b91c1c;
  --pulse-red-soft: #fee2e2;
  --pulse-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pulse-serif: "IBM Plex Mono", ui-monospace, monospace;   /* headings */
  --pulse-mono: "IBM Plex Mono", ui-monospace, monospace;

  --x-pop: 4px 4px 0 var(--pulse-ink);
  --x-pop-lg: 6px 6px 0 var(--pulse-ink);
  --x-btn: 3px 3px 0 var(--pulse-ink);
}

body[data-ui-surface="feedback-pulse"] {
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 8px;
  --ring: rgba(37,99,235, 0.35);
  font-size: 14px;
}

body[data-ui-surface="feedback-pulse"] :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--pulse-gold);
  outline-offset: 2px;
}

/* ---------- Typography: mono headings, sans everything else ---------- */
body[data-ui-surface] :is(h1, h2, h3, h4),
body[data-ui-surface] .breadcrumbs,
body[data-ui-surface] .brand-name,
body[data-ui-surface] .subject-name,
body[data-ui-surface] .edu-hero-stat strong,
body[data-ui-surface] .cloud-stat strong,
body[data-ui-surface] .mastery-stat strong {
  font-family: var(--pulse-serif);
  letter-spacing: -0.02em;
}

body[data-ui-surface] .sidebar { font-family: var(--pulse-sans); }

/* ---------- Sidebar (no outlines — tint + bar) ---------- */
body[data-ui-surface] .sidebar { border-right: 1px solid #e5e7eb; }
body[data-ui-surface] .sidebar-brand { border-bottom-color: var(--pulse-line); }
body[data-ui-surface] .brand-icon {
  border-radius: 8px;
  background: var(--pulse-maroon);
  box-shadow: 3px 3px 0 var(--pulse-gold);
}
body[data-ui-surface] .brand-name { color: var(--pulse-ink); font-weight: 700; font-size: 1.1rem; }
body[data-ui-surface] .menu-item,
body[data-ui-surface] .sidebar-sub-item { color: var(--pulse-muted); font-size: 0.875rem; border-radius: 8px; }
body[data-ui-surface] .menu-icon { color: var(--pulse-muted); }
body[data-ui-surface] .menu-item:hover,
body[data-ui-surface] .sidebar-sub-item:hover { background: var(--pulse-maroon-soft); color: var(--pulse-ink); }
body[data-ui-surface] .menu-item.active,
body[data-ui-surface] .sidebar-sub-item.active { background: var(--pulse-maroon-soft); color: #5c001e; font-weight: 700; }
body[data-ui-surface] .menu-item.active .menu-icon,
body[data-ui-surface] .sidebar-sub-item.active::before,
body[data-ui-surface] .sidebar-sub-item .sub-pct { color: var(--pulse-maroon); }
body[data-ui-surface] .menu-item.active::before { width: 4px; height: 24px; background: var(--pulse-maroon); }
body[data-ui-surface] .sidebar-section-title { color: var(--pulse-muted); font-size: .75rem; font-weight: 700; }
body[data-ui-surface] .sidebar-support { border-color: #bfdbfe; border-radius: 8px; background: var(--pulse-gold-soft); }
body[data-ui-surface] .sidebar-support-mark { color: var(--pulse-maroon); border-radius: 4px; }
body[data-ui-surface] .sidebar-support strong { color: var(--pulse-ink); }
body[data-ui-surface] .sidebar-support span:last-child { color: var(--pulse-muted); }
body[data-ui-surface] .sidebar-collapse-btn { border-radius: 4px; }
body[data-ui-surface] .sidebar-collapse-btn:hover,
body[data-ui-surface] .sidebar-logout-mobile:hover { background: var(--pulse-maroon-soft); color: #5c001e; }

body[data-ui-surface] .student-sense-group.open { border-color: var(--pulse-line); border-radius: 8px; background: #fff; box-shadow: none; }
body[data-ui-surface] .student-sense-items::before { background: var(--pulse-line); }
body[data-ui-surface] .student-sense-group.open .student-sense-toggle,
body[data-ui-surface] .student-sense-group.open .student-sense-chevron { color: #5c001e; }
body[data-ui-surface] .student-sense-toggle.active { background: var(--pulse-maroon-soft); }
body[data-ui-surface] .student-sense-item { color: var(--pulse-muted); font-size: 0.875rem; border-radius: 4px; }
body[data-ui-surface] .student-sense-item:hover { background: var(--pulse-maroon-soft); color: var(--pulse-ink); }
body[data-ui-surface] .student-sense-item.active { background: var(--pulse-maroon-soft); color: #5c001e; font-weight: 700; box-shadow: inset 4px 0 0 var(--pulse-maroon); }
body[data-ui-surface] .student-sense-item.active .material-symbols-rounded { color: var(--pulse-maroon); }

/* ---------- Sidebar layout: grouped accordion that fits the viewport ---------- */
body[data-ui-surface] .sidebar { display: flex; flex-direction: column; }
body[data-ui-surface] .sidebar:not(.collapsed) { width: 248px; }
/* One line per link keeps every row the same height, so the fit is predictable. */
body[data-ui-surface] :is(.menu-item, .student-sense-item, .nav-group-toggle) { white-space: nowrap; }
body[data-ui-surface] :is(.menu-item, .student-sense-item, .nav-group-toggle) :is(.menu-text, span:not(.material-symbols-rounded)) { overflow: hidden; text-overflow: ellipsis; }
body[data-ui-surface] .sidebar-menu {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}
body[data-ui-surface] :is(.menu-item, .nav-group-toggle, .student-sense-toggle) { min-height: 38px; padding: 8px 12px; }
body[data-ui-surface] .nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pulse-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
body[data-ui-surface] .nav-group-toggle .menu-text { flex: 1; }
body[data-ui-surface] .nav-group-toggle:hover { background: var(--pulse-maroon-soft); color: var(--pulse-ink); }
body[data-ui-surface] .nav-group-chevron { font-size: 18px; transition: transform .2s ease; }
body[data-ui-surface] .nav-group.open .nav-group-chevron { transform: rotate(180deg); }
/* The group holding the current page stays marked even when closed. */
body[data-ui-surface] .nav-group:has(.menu-item.active) > .nav-group-toggle,
body[data-ui-surface] .nav-group:has(.menu-item.active) > .nav-group-toggle .menu-icon { color: var(--pulse-maroon); }
body[data-ui-surface] .nav-group-items {
  display: none;
  margin: 2px 0 6px 20px;
  padding-left: 6px;
  border-left: 2px solid var(--pulse-line);
}
body[data-ui-surface] .nav-group.open .nav-group-items { display: grid; gap: 2px; }
body[data-ui-surface] .nav-group-items .menu-item { min-height: 34px; padding: 6px 10px; gap: 10px; }
body[data-ui-surface] .nav-group-items .menu-icon { font-size: 18px; }
/* Groups with nothing visible for this role disappear. */
body[data-ui-surface] .nav-group:not(:has(.menu-item:not(.hidden))) { display: none; }
/* Learners and guests have only a few links: show them flat, no group headers. */
body[data-ui-surface] .sidebar-menu:not(:has(#menuCreateSim:not(.hidden))) .nav-group-toggle { display: none; }
body[data-ui-surface] .sidebar-menu:not(:has(#menuCreateSim:not(.hidden))) .nav-group-items { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
body[data-ui-surface] .sidebar-menu:not(:has(#menuCreateSim:not(.hidden))) .nav-group-items .menu-item { min-height: 38px; padding: 8px 12px; }
body[data-ui-surface] .sidebar-menu:not(:has(#menuCreateSim:not(.hidden))) .nav-group-items .menu-icon { font-size: 20px; }

/* Student Sense reads as one more group: same indent, rule and item size. */
body[data-ui-surface] .student-sense-group,
body[data-ui-surface] .student-sense-group.open { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-ui-surface] .student-sense-items::before { content: none; }
body[data-ui-surface] .student-sense-group.open .student-sense-items {
  max-height: 240px;
  margin: 2px 0 6px 20px;
  padding-left: 6px;
  border-left: 2px solid var(--pulse-line);
}
body[data-ui-surface] .student-sense-item { min-height: 34px; padding: 6px 10px; white-space: nowrap; }
body[data-ui-surface] .student-sense-item .material-symbols-rounded { font-size: 18px; }
body[data-ui-surface] .student-sense-toggle.active { color: var(--pulse-maroon); }
body[data-ui-surface] .sidebar.collapsed .student-sense-group.open .student-sense-items { margin: 0; padding: 0; border: 0; }

/* The subject list was never populated; the filler support card goes too. */
body[data-ui-surface] .sidebar-section-title:has(+ #sidebarSubjectsList),
body[data-ui-surface] #sidebarSubjectsList,
body[data-ui-surface] .sidebar-support { display: none; }

/* Admin + settings sit at the bottom as a compact strip. */
body[data-ui-surface] #menuSuperAdmin,
body[data-ui-surface] #menuSuperAdmin.hidden ~ #sidebarSettingsSection { margin-top: auto; }
body[data-ui-surface] #sidebarSettingsSection { padding-top: 8px; border-top: 1px solid var(--pulse-line); }
body[data-ui-surface] #menuSuperAdmin:not(.hidden) ~ #sidebarSettingsSection { margin-top: 4px; }
body[data-ui-surface] #sidebarSettingsSection .sidebar-section-title { margin: 0 0 6px 12px; }
body[data-ui-surface] .sidebar-settings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; }
body[data-ui-surface] .sidebar-settings-list .menu-item {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 6px 4px;
  font-size: 0.75rem;
  text-align: center;
}
body[data-ui-surface] .sidebar-logout-mobile { margin: 0 12px 12px; min-height: 38px; }

/* Collapsed rail: one icon per group; clicking a group icon expands the sidebar with that group open. */
body[data-ui-surface] .sidebar.collapsed .nav-group-items { display: none; }
body[data-ui-surface] .sidebar.collapsed :is(.nav-group-toggle .menu-text, .nav-group-chevron) { display: none; }
body[data-ui-surface] .sidebar.collapsed .nav-group-toggle { justify-content: center; padding: 8px; }
body[data-ui-surface] .sidebar.collapsed .sidebar-menu:not(:has(#menuCreateSim:not(.hidden))) .nav-group-items { display: grid; }
body[data-ui-surface] .sidebar.collapsed .sidebar-settings-list { grid-template-columns: 1fr; }
body[data-ui-surface] .sidebar.collapsed .sidebar-settings-list .menu-item { min-height: 36px; }
body[data-ui-surface] .sidebar.collapsed #sidebarSettingsSection .sidebar-section-title { display: none; }

/* Short screens: tighten rhythm so the menu still fits. */
@media (max-height: 760px) {
  body[data-ui-surface] .sidebar-brand { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  body[data-ui-surface] :is(.menu-item, .nav-group-toggle, .student-sense-toggle) { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
  body[data-ui-surface] .nav-group-items .menu-item { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
  body[data-ui-surface] .sidebar-settings-list .menu-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-ui-surface] .nav-group-chevron { transition: none; }
}

/* Same page background on every surface (Live Quizzes, Oral, Peer included). */
body[data-ui-surface], body[data-ui-surface] .main-container { background: var(--pulse-paper); }

/* ---------- Header ---------- */
body[data-ui-surface] .header-panel { border-bottom: 1px solid #e5e7eb; }
body[data-ui-surface] .header-search input { border-radius: 8px; }
body[data-ui-surface] .header-search .search-icon { color: var(--pulse-muted); }

/* ---------- Hero: pink card ---------- */
body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) {
  margin: 24px 0;
  padding: 32px;
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 12px, transparent 12px 24px) right -60px bottom -60px / 260px 260px no-repeat,
    var(--pulse-maroon);
  color: #fff;
  box-shadow: var(--x-pop-lg);
}
body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) :is(h1, p) { color: #fff; }
body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) h1 { font-size: clamp(2rem, 3.3vw, 2.5rem); line-height: 1.1; }
body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) p { font-size: 1rem; }
body[data-ui-surface="feedback-pulse"] :is(.edu-kicker, .cloud-view-kicker, .quiz-view-kicker) {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff;
  color: #5c001e;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
body[data-ui-surface="feedback-pulse"] :is(.edu-kicker, .cloud-view-kicker, .quiz-view-kicker)::before { content: none; }
body[data-ui-surface="feedback-pulse"] .edu-hero-stat {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  background: #fff;
  color: var(--pulse-ink);
}
body[data-ui-surface="feedback-pulse"] .edu-hero-stat strong { color: var(--pulse-ink); font-size: 2rem; }
body[data-ui-surface="feedback-pulse"] .edu-hero-stat span { color: var(--pulse-muted); font-size: 0.875rem; }
body[data-ui-surface="feedback-pulse"] :is(.cloud-view-sync, .cloud-sync-chip, .quiz-ai-status, .sim-ai-status) {
  border: 2px solid var(--pulse-ink);
  border-radius: 4px;
  background: #fff;
  color: var(--pulse-ink);
}

/* ---------- Cards: bold outline + offset shadow ---------- */
body[data-ui-surface="feedback-pulse"] :is(
  .add-subject-form, .subject-card, .single-subject-view, .topic-card-large,
  .cloud-panel, .cloud-stat, .mastery-stat, .understanding-card, .quiz-panel,
  .quiz-bank-import, .quiz-editor-section, .bank-editor-section, .bank-library,
  .bank-card, .bank-library-card, .sim-review-analysis-card, .sim-review-card,
  .study-pack-card, .metric-card
) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-pop);
}

/* Subject list: heading bar + cards read as one outlined panel. */
body[data-ui-surface="feedback-pulse"] .section-eyebrow {
  border: 2px solid var(--pulse-ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
body[data-ui-surface="feedback-pulse"] .section-eyebrow h2 { font-size: 1.25rem; }
body[data-ui-surface="feedback-pulse"] .subjects-grid { gap: 16px; }
body[data-ui-surface="feedback-pulse"] .subject-card {
  overflow: hidden;
  border-left: 2px solid var(--pulse-ink);
  border-top: 8px solid var(--pulse-maroon);
  transition: transform .15s ease, box-shadow .15s ease;
}
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 2) { border-left-color: var(--pulse-ink); border-top-color: var(--pulse-gold); }
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 3) { border-left-color: var(--pulse-ink); border-top-color: var(--pulse-ink); }
body[data-ui-surface="feedback-pulse"] .subject-card:hover {
  border-color: var(--pulse-ink);
  border-top-color: var(--pulse-maroon);
  transform: translate(-2px, -2px);
  box-shadow: var(--x-pop-lg);
}
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 2):hover { border-top-color: var(--pulse-gold); }
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 3):hover { border-top-color: var(--pulse-ink); }
body[data-ui-surface="feedback-pulse"] .subject-name { font-size: 1.125rem; font-weight: 700; }
body[data-ui-surface="feedback-pulse"] .subject-owner { color: var(--pulse-muted); font-size: 0.875rem; }
body[data-ui-surface="feedback-pulse"] .subject-code { border-radius: 4px; color: #5c001e; }
body[data-ui-surface="feedback-pulse"] :is(.subject-meta-chip, .subject-status-chip) { border-radius: 4px; font-size: 0.8rem; }
body[data-ui-surface="feedback-pulse"] .subject-meta-chip { background: #fff; }
body[data-ui-surface="feedback-pulse"] .progress-track { height: 10px; border: 2px solid var(--pulse-ink); border-radius: 4px; background: #fff; }
body[data-ui-surface="feedback-pulse"] .progress-label { font-size: 0.875rem; }
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 2) .progress-fill { background: var(--pulse-gold); }
body[data-ui-surface="feedback-pulse"] .subject-card:nth-child(3n + 3) .progress-fill { background: var(--pulse-ink); }
body[data-ui-surface="feedback-pulse"] .cloud-stat,
body[data-ui-surface="feedback-pulse"] .mastery-stat { border-top: 8px solid var(--pulse-gold); }
body[data-ui-surface="feedback-pulse"] :is(.topic-num, .topic-badge-num, .quiz-step-number, .sim-step-number) { border-radius: 4px; color: #5c001e; }
body[data-ui-surface="feedback-pulse"] :is(.bank-tag, .quiz-tag, .topic-tag, .meta-tag) { border-radius: 4px; color: #5c001e; }

/* ---------- Buttons: outline + offset shadow, press on click ---------- */
body[data-ui-surface] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn,
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn, .subject-expand-btn,
  .subject-actions .subject-action-btn, .mastery-why-btn
) {
  min-height: 44px;
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-btn);
  font-weight: 600;
  transition: transform .1s ease, box-shadow .1s ease;
}
body[data-ui-surface="feedback-pulse"] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn
) { background: var(--pulse-maroon); color: #fff; }
body[data-ui-surface] :is(
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn, .subject-expand-btn,
  .subject-actions .subject-action-btn, .mastery-why-btn
) { background: #fff; color: var(--pulse-ink); }

body[data-ui-surface] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn,
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn, .subject-expand-btn,
  .subject-actions .subject-action-btn, .mastery-why-btn
):hover:not(:disabled) {
  border-color: var(--pulse-ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pulse-ink);
}
body[data-ui-surface="feedback-pulse"] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn
):hover:not(:disabled) { background: var(--pulse-maroon-2); color: #fff; }
body[data-ui-surface] :is(
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn, .subject-expand-btn,
  .subject-actions .subject-action-btn, .mastery-why-btn
):hover:not(:disabled) { background: var(--pulse-maroon-soft); color: var(--pulse-ink); }

body[data-ui-surface] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn,
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn, .subject-expand-btn,
  .subject-actions .subject-action-btn, .mastery-why-btn
):active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--pulse-ink);
}
body[data-ui-surface] :is(
  .btn-primary, .cloud-primary-action, .cloud-primary-btn, .quiz-primary-btn,
  .bank-primary-btn, .active-primary-btn, .sim-primary-btn,
  .btn-secondary, .btn-outline, .cloud-secondary-btn, .quiz-secondary-btn,
  .bank-secondary-btn, .active-secondary-btn, .sim-secondary-btn,
  .toolbar-actions button, .toolbar-btn
):disabled {
  border-color: #9ca3af;
  background: #f3f4f6;
  color: #6b7280;
  box-shadow: none;
}

/* ---------- Forms & tables: plain, no heavy outline ---------- */
body[data-ui-surface="feedback-pulse"] :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .quiz-input, .quiz-select, .quiz-textarea, .cloud-input, .bank-search-input
) {
  min-height: 44px;
  border: 1px solid #9ca3af;
  border-radius: 8px;
  font-size: 0.875rem;
}
body[data-ui-surface="feedback-pulse"] :where(input, select, textarea):focus {
  border-color: var(--pulse-gold);
  box-shadow: 0 0 0 3px rgba(37,99,235, 0.25);
}
body[data-ui-surface="feedback-pulse"] :where(.cloud-table-wrap, .super-admin-table-wrap, .mastery-table-wrap) { border-radius: 8px; }
body[data-ui-surface="feedback-pulse"] th { background: #f9fafb; font-size: 0.75rem; }
body[data-ui-surface="feedback-pulse"] :where(
  .quiz-choice, .bank-type-choice, .bank-kind-option span, .quiz-delivery-option,
  .quiz-delivery-choice, .source-option, .quiz-source-option, .active-source-option
) { border-radius: 8px; }

/* ---------- Callouts: blue info tint ---------- */
body[data-ui-surface="feedback-pulse"] :is(
  .taxonomy-guidance, .active-strategy-note, .active-strategy-help,
  .sim-source-state, .sim-quality-callout, .focus-note
) {
  border-left: 8px solid var(--pulse-gold);
  border-radius: 8px;
  background: var(--pulse-gold-soft);
  color: #1e3a8a;
}
body[data-ui-surface="feedback-pulse"] :is(.bank-hero-stats, .question-bank-stats) { border-color: #bfdbfe; border-radius: 8px; }
body[data-ui-surface="feedback-pulse"] :is(.bank-hero-stat, .question-bank-stat),
body[data-ui-surface="feedback-pulse"] .question-bank-stat span { border-color: #bfdbfe; color: #1e3a8a; }

/* ---------- Student Sense (Learning Monitoring, Gradebook, Intervention Plans) ---------- */
body[data-ui-surface="feedback-pulse"] :is(
  .student-sense-hero, .learner-monitor-hero, .intervention-hero,
  .student-sense-panel, .student-sense-workspaces, .student-sense-agent-switcher,
  .student-sense-metric, .student-sense-workspace-card,
  .agent-review-card, .cohort-pattern-card, .misconception-card, .evidence-gap-card,
  .gradebook-summary-card, .gradebook-panel, .learner-grid-panel,
  .learner-card, .learner-risk-card, .learner-spider-card, .learner-detail-panel,
  .intervention-student-group, .intervention-plan-card
) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-pop);
}
body[data-ui-surface="feedback-pulse"] :is(.student-sense-hero, .learner-monitor-hero, .intervention-hero) {
  border-top: 8px solid var(--pulse-maroon);
  background: #fff;
}
/* Risk colour stays readable as a top strip on learner cards. */
body[data-ui-surface="feedback-pulse"] .learner-card { border-top: 6px solid var(--learner-accent); }
body[data-ui-surface="feedback-pulse"] :is(.learner-card, .student-sense-workspace-card) { transition: transform .15s ease, box-shadow .15s ease; }
body[data-ui-surface="feedback-pulse"] :is(.learner-card, .student-sense-workspace-card):hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--x-pop-lg);
}
/* Nested cards inside an outlined parent drop their shadow to avoid stacking. */
body[data-ui-surface="feedback-pulse"] .intervention-student-body .intervention-plan-card { box-shadow: none; }
body[data-ui-surface="feedback-pulse"] :is(.student-sense-metric strong, .gradebook-summary-card strong, .learner-risk-card b) { font-family: var(--pulse-serif); }

body[data-ui-surface="feedback-pulse"] :is(
  .agent-review-scan, .cohort-pattern-run, .evidence-gap-run, .misconception-run,
  .gradebook-button, .intervention-button, .intervention-expand-toggle, .intervention-refresh,
  .learner-ai-action, .student-sense-panel-head button, .student-sense-hero-actions button,
  .agent-review-actions button, .evidence-gap-actions button, .misconception-review-actions button
) {
  min-height: 40px;
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-btn);
  font-weight: 600;
  transition: transform .1s ease, box-shadow .1s ease;
}
body[data-ui-surface="feedback-pulse"] :is(
  .agent-review-scan, .cohort-pattern-run, .evidence-gap-run, .misconception-run,
  .gradebook-button, .intervention-button, .intervention-expand-toggle, .intervention-refresh,
  .learner-ai-action, .student-sense-panel-head button, .student-sense-hero-actions button,
  .agent-review-actions button, .evidence-gap-actions button, .misconception-review-actions button
):hover:not(:disabled) {
  border-color: var(--pulse-ink);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pulse-ink);
}
body[data-ui-surface="feedback-pulse"] :is(
  .agent-review-scan, .cohort-pattern-run, .evidence-gap-run, .misconception-run,
  .gradebook-button, .intervention-button, .intervention-expand-toggle, .intervention-refresh,
  .learner-ai-action, .student-sense-panel-head button, .student-sense-hero-actions button,
  .agent-review-actions button, .evidence-gap-actions button, .misconception-review-actions button
):active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--pulse-ink);
}
body[data-ui-surface="feedback-pulse"] :is(
  .agent-review-scan, .cohort-pattern-run, .evidence-gap-run, .misconception-run,
  .gradebook-button, .intervention-button, .intervention-expand-toggle, .intervention-refresh,
  .learner-ai-action, .student-sense-panel-head button, .student-sense-hero-actions button,
  .agent-review-actions button, .evidence-gap-actions button, .misconception-review-actions button
):disabled { border-color: #9ca3af; box-shadow: none; }

/* ---------- CLO attainment + Weekly teaching planner ---------- */
#cloAttainmentView, #weeklyLearningView { color: var(--pulse-ink); }
body[data-ui-surface] :is(.ca-hero, .wl-header) {
  border: 2px solid var(--pulse-ink);
  border-top: 8px solid var(--pulse-maroon);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--x-pop);
}
body[data-ui-surface] :is(.ca-hero small, .ca-kicker, .wl-header small) { color: var(--pulse-maroon); }
body[data-ui-surface] :is(.ca-hero p, .ca-heading p, .ca-card p, .ca-muted, .ca-method p, .ca-table caption,
  .wl-header p, .wl-muted, .wl-plan-top, .wl-section-heading span, .wl-empty) { color: var(--pulse-muted); }
body[data-ui-surface] :is(.ca-panel, .ca-card, .wl-next, .wl-plan, .wl-editor, .wl-sequence) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-pop);
}
body[data-ui-surface] :is(.ca-outcomes fieldset, .ca-mapping, .ca-blueprint, .wl-step) { border-color: var(--pulse-line); border-radius: 8px; background: #fafafa; }
body[data-ui-surface] :is(.ca-empty, .wl-empty) { border-color: #9ca3af; border-radius: 8px; background: #fff; }
body[data-ui-surface] .ca-table-scroll { border-color: var(--pulse-line); border-radius: 8px; }
body[data-ui-surface] .ca-table th { background: #f9fafb; color: var(--pulse-muted); }
body[data-ui-surface] .ca-table td { border-top-color: #e5e7eb; }
body[data-ui-surface] :is(.ca-table summary, .ca-method summary) { color: var(--pulse-maroon); }
body[data-ui-surface] .ca-value { color: var(--pulse-maroon); font-family: var(--pulse-serif); }
body[data-ui-surface] .ca-bar { height: 10px; border: 2px solid var(--pulse-ink); border-radius: 4px; background: #fff; }
body[data-ui-surface] .ca-bar span { background: var(--pulse-maroon); }
body[data-ui-surface] .ca-status { border-radius: 4px; }
body[data-ui-surface] .ca-status.met { background: #dcfce7; color: #166534; }
body[data-ui-surface] .ca-status.below { background: #fee2e2; color: #991b1b; }
body[data-ui-surface] .ca-status.insufficient { background: #fef3c7; color: #92400e; }
body[data-ui-surface] .ca-alert { background: #fef3c7; color: #92400e; }
body[data-ui-surface] :is(.ca-notice, .wl-notice) { background: var(--pulse-gold-soft); color: #1e3a8a; }
body[data-ui-surface] .wl-error { background: #fee2e2; color: #991b1b; }
body[data-ui-surface] .wl-tag { border-radius: 4px; background: var(--pulse-maroon-soft); color: var(--pulse-maroon); }
body[data-ui-surface] .wl-sequence progress { accent-color: var(--pulse-maroon); }
body[data-ui-surface] .wl-sequence li { border-bottom-color: #e5e7eb; }
:is(#cloAttainmentView, #weeklyLearningView) :is(input, select, textarea) { border-color: #9ca3af; color: var(--pulse-ink); }
:is(#cloAttainmentView, #weeklyLearningView) :focus-visible { outline: 3px solid var(--pulse-gold); }
body[data-ui-surface] :is(.ca-button, .wl-button) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  background: #fff;
  color: var(--pulse-ink);
  box-shadow: var(--x-btn);
  transition: transform .1s ease, box-shadow .1s ease;
}
body[data-ui-surface] :is(.ca-button.ca-primary, .wl-button.wl-primary) { border-color: var(--pulse-ink); background: var(--pulse-maroon); color: #fff; }
body[data-ui-surface] :is(.ca-button, .wl-button):hover:not(:disabled) { border-color: var(--pulse-ink); background: var(--pulse-maroon-soft); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pulse-ink); }
body[data-ui-surface] :is(.ca-button.ca-primary, .wl-button.wl-primary):hover:not(:disabled) { background: var(--pulse-maroon-2); }
body[data-ui-surface] :is(.ca-button, .wl-button):active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pulse-ink); }
body[data-ui-surface] :is(.ca-button, .wl-button):disabled { box-shadow: none; }

/* ---------- Live Quizzes ---------- */
body .live-quiz-view {
  --lq-maroon: #5c001e;
  --lq-maroon-2: #74233e;
  --lq-maroon-soft: #f4e7eb;
  --lq-gold: #2563eb;
  --lq-gold-soft: #dbeafe;
  --lq-ink: #111827;
  --lq-muted: #4b5563;
  --lq-line: #d1d5db;
  --lq-paper: #f9f6f5;
  --lq-charcoal: #1f2937;
  --lq-green: #166534;
  --lq-green-soft: #dcfce7;
  --lq-red: #b91c1c;
  --lq-red-soft: #fee2e2;
  border: 2px solid var(--pulse-ink);
  border-top: 8px solid var(--pulse-maroon);
  border-radius: 8px;
  box-shadow: var(--x-pop);
  font-family: var(--pulse-sans);
}
body .live-quiz-view :is(.live-session-rail-head span) { background: var(--lq-gold); color: #fff; }
body .live-quiz-view .live-session-card { border-radius: 8px; }
body .live-quiz-view .live-session-card.active { border-left-color: #60a5fa; }
body .live-quiz-view .live-session-card small { color: #93c5fd; }
body .live-quiz-view :is(.live-learner-card, .live-detail-card, .live-guide-card, .live-report-panel) {
  border-width: 2px;
  border-color: var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-btn);
}
body .live-quiz-view .live-learner-card { border-left-width: 6px; }
body .live-quiz-view .live-learner-card:not(.finished):not(.time_up) { border-left-color: var(--lq-red); }
body .live-quiz-view :is(.live-learner-card.finished, .live-learner-card.time_up) { border-left-color: #16a34a; }
body .live-quiz-view .live-learner-card.selected { outline: 3px solid var(--lq-gold); outline-offset: 2px; }
body :is(.live-stop-dialog, .live-guide-dialog) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-pop-lg);
  font-family: var(--pulse-sans);
}
body .live-quiz-view .live-monitor-toolbar :is(input, select) { border-radius: 8px; border-color: #9ca3af; }
body :is(.live-quiz-view .btn-danger, .live-stop-dialog-actions button, .live-guide-foot button) {
  min-height: 42px;
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-btn);
  transition: transform .1s ease, box-shadow .1s ease;
}
body :is(.live-quiz-view .btn-danger, .live-stop-dialog-actions button, .live-guide-foot button):hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pulse-ink); }
body :is(.live-quiz-view .btn-danger, .live-stop-dialog-actions button, .live-guide-foot button):active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pulse-ink); }
body .live-guide-foot button { background: var(--pulse-maroon); }
body .live-quiz-view .live-quiz-status-ribbon span { color: var(--lq-green); }

/* ---------- Touch: small inline links get a 32px tap height ---------- */
body[data-ui-surface] :is(.footer-panel a, .bank-workflow a) { display: inline-flex; align-items: center; min-height: 32px; }
/* Live Quizzes floating filter labels: readable size, with room above the value. */
body .live-quiz-view .live-monitor-filter-group label > span { top: 5px; font-size: .75rem; }
body .live-quiz-view .live-monitor-toolbar :is(input, select) { min-height: 50px; padding-top: 20px; }

/* ---------- Login ---------- */
#loginScreen { font-family: var(--pulse-sans); }
#loginScreen :is(.btn-primary, .btn-guest, .login-create-account) {
  border: 2px solid var(--pulse-ink);
  border-radius: 8px;
  box-shadow: var(--x-btn);
}
#loginScreen .btn-primary:hover { border-color: var(--pulse-ink); box-shadow: 4px 4px 0 var(--pulse-ink); transform: translate(-1px, -1px); }
#loginScreen :is(.login-input-wrap, .registration-panel) { border-radius: 8px; }
#loginScreen .login-input-wrap:focus-within { box-shadow: 0 0 0 3px rgba(37,99,235, 0.3); }

@media (prefers-reduced-motion: reduce) {
  body[data-ui-surface="feedback-pulse"] *,
  #loginScreen * { transition: none !important; }
}

@media (max-width: 900px) {
  body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) { margin: 16px 0; padding: 24px 20px; }
}
@media (max-width: 600px) {
  /* Section heading and its subtitle stack instead of squeezing side by side. */
  body[data-ui-surface="feedback-pulse"] .section-eyebrow { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 12px 16px; }
}
@media (max-width: 480px) {
  body[data-ui-surface="feedback-pulse"] :is(.edu-hero, .cloud-view-hero, .quiz-view-hero) { margin: 12px 0; }
}

/* ---------- Dashboard: modern card layout (shadcn/ui dashboard-01 pattern) ----------
 * Soft 1px border + subtle shadow instead of the hard outline, 12px radius,
 * sans headings for legibility, calmer hero. Scoped to the dashboard only. */
body[data-ui-surface="feedback-pulse"] .edu-hero {
  gap: 24px;
  padding: 32px 36px;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.14) 0, transparent 55%),
    linear-gradient(135deg, #5c001e 0%, #7a1236 100%);
  box-shadow: 0 1px 2px rgba(17,24,39,.06), 0 8px 24px -8px rgba(92,0,30,.35);
}
body[data-ui-surface="feedback-pulse"] .edu-hero h1 {
  font-family: var(--pulse-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
body[data-ui-surface="feedback-pulse"] .edu-hero p { color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.6; max-width: 60ch; }
body[data-ui-surface="feedback-pulse"] .edu-hero .edu-kicker {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
body[data-ui-surface="feedback-pulse"] .edu-hero .edu-hero-stat {
  min-width: 140px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  box-shadow: none;
  color: #fff;
}
body[data-ui-surface="feedback-pulse"] .edu-hero .edu-hero-stat strong {
  font-family: var(--pulse-sans);
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
body[data-ui-surface="feedback-pulse"] .edu-hero .edu-hero-stat span { color: rgba(255,255,255,.8); font-size: 0.8125rem; }

/* Section heading: plain title row, not a boxed tab. */
body[data-ui-surface="feedback-pulse"] .section-eyebrow {
  margin: 8px 0 12px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body[data-ui-surface="feedback-pulse"] .section-eyebrow h2 { font-family: var(--pulse-sans); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
body[data-ui-surface="feedback-pulse"] .section-eyebrow span { color: var(--pulse-muted); font-size: 0.875rem; }

/* Subject cards */
body[data-ui-surface="feedback-pulse"] .subjects-grid { gap: 12px; }
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card,
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card:hover {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card { box-shadow: 0 1px 2px rgba(17,24,39,.05); }
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card:hover {
  border-color: #d1b3bd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(17,24,39,.08), 0 2px 4px -2px rgba(17,24,39,.05);
}
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card.is-open { border-color: #d1b3bd; }
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-name { font-family: var(--pulse-sans); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-code {
  border: 0;
  border-radius: 8px;
  background: var(--pulse-maroon-soft);
  color: #5c001e;
  font-weight: 600;
}
body[data-ui-surface="feedback-pulse"] .subjects-grid :is(.subject-meta-chip, .subject-status-chip) {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8125rem;
}
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-meta-chip { background: #f9fafb; color: var(--pulse-muted); }
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-meta-chip strong { color: var(--pulse-ink); }
body[data-ui-surface="feedback-pulse"] .subjects-grid .progress-track { height: 6px; border: 0; border-radius: 999px; background: #f1e4e8; }
body[data-ui-surface="feedback-pulse"] .subjects-grid .progress-fill,
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card:nth-child(n) .progress-fill { border-radius: 999px; background: var(--pulse-maroon); }
body[data-ui-surface="feedback-pulse"] .subjects-grid .progress-label { color: var(--pulse-muted); font-size: 0.8125rem; }

/* Card buttons: soft outline, no offset shadow. */
body[data-ui-surface="feedback-pulse"] .subjects-grid :is(.subject-expand-btn, .subject-actions .subject-action-btn) {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.05);
  color: var(--pulse-ink);
  transform: none;
}
body[data-ui-surface="feedback-pulse"] .subjects-grid :is(.subject-expand-btn, .subject-actions .subject-action-btn):hover {
  border-color: #d1b3bd;
  background: var(--pulse-maroon-soft);
  box-shadow: 0 1px 2px rgba(17,24,39,.05);
  transform: none;
}
body[data-ui-surface="feedback-pulse"] .subjects-grid .subject-card.is-open .subject-expand-btn { background: #5c001e; border-color: #5c001e; color: #fff; }

@media (max-width: 600px) {
  body[data-ui-surface="feedback-pulse"] .edu-hero { padding: 24px 20px; border-radius: 12px; }
  body[data-ui-surface="feedback-pulse"] .section-eyebrow { padding: 0 4px; }
}