:root {
  color-scheme: light;
  --ink: #17212f;
  --text: var(--ink);
  --muted: #586673; /* darkened from #5f6f7d: clears AA (4.5) on soft-tint bgs */
  --line: #d7dee7;
  --line-soft: #e8edf2;
  --line-strong: #b8c4d0;
  --canvas: #edf2f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #fbfcfe;
  --surface-raised: rgba(255, 255, 255, 0.94);
  --nav: #0d1724;
  --nav-soft: #1b2c44;
  --nav-muted: #aab6c2;
  --nav-text: #c7d1dc;
  --nav-line: rgba(255, 255, 255, 0.12);
  --nav-panel: rgba(255, 255, 255, 0.04);
  --teal: #2e6476;
  --teal-soft: #e4f1f4;
  --accent: #2e6476;
  --accent-soft: #e4f1f4;
  --accent-contrast: var(--surface);
  --accent-strong: #17394a;
  --highlight: #f3c44e;
  --blue: #2159db; /* slightly deeper: clears AA on --blue-soft (.pill.info etc.) */
  --blue-soft: #e7efff;
  --blue-line: #bfdbfe;
  --gold: #c08a16;
  --gold-soft: #fff3cf;
  --coral: #b83227; /* deepened from #d65f4b: --danger text was only 3.22 on --danger-soft */
  --coral-soft: #ffe9e4;
  --grape: #6d5bd0;
  --grape-soft: #ece9ff;
  --rose: #be123c;
  --rose-soft: #ffe6eb;
  --rose-line: #ffc7d2;
  --amber: #b45309;
  --amber-soft: #fff0d8;
  --amber-line: #fed7aa;
  --green: #15803d;
  --green-soft: #e4f7e9;
  --green-line: #bbf7d0;
  --success: var(--accent);
  --success-soft: var(--accent-soft);
  --success-line: color-mix(in srgb, var(--success) 28%, transparent);
  --warning: var(--gold);
  --warning-soft: var(--gold-soft);
  --warning-line: color-mix(in srgb, var(--warning) 30%, transparent);
  --danger: var(--coral);
  --danger-soft: var(--coral-soft);
  --danger-line: color-mix(in srgb, var(--danger) 28%, transparent);
  --info: var(--blue);
  --info-soft: var(--blue-soft);
  --info-line: color-mix(in srgb, var(--info) 26%, transparent);
  --content-grid-line: color-mix(in srgb, var(--accent) 7%, transparent);
  --content-grid-line-soft: color-mix(in srgb, var(--accent) 5%, transparent);
  --button-shadow: color-mix(in srgb, var(--accent) 20%, transparent);
  --page-overlay: color-mix(in srgb, var(--highlight) 10%, transparent);
  --shadow: 0 18px 42px rgba(23, 33, 47, 0.08);
  --shadow-soft: 0 10px 24px rgba(23, 33, 47, 0.055);
  --shadow-focus: 0 0 0 3px rgba(243, 201, 105, 0.34);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-micro: 0.68rem;
  --font-size-caption: 0.7rem;
  --font-size-label: 0.72rem;
  --font-size-mini: 0.74rem;
  --font-size-chip: 0.76rem;
  --font-size-small: 0.82rem;
  --font-size-compact: 0.88rem;
  --font-size-body: 0.94rem;
  --font-size-body-lg: 1rem;
  --font-size-card-title: 1rem;
  --font-size-section-title: 1.12rem;
  --font-size-subtitle: 1.2rem;
  --font-size-brand: 1.25rem;
  --font-size-score: 1.4rem;
  --font-size-page-title: 2rem;
  --font-size-metric: 1.72rem;
  --font-size-collapsed-title: var(--font-size-card-title);
  --font-size-collapsed-meta: var(--font-size-small);
  --font-weight-medium: 700;
  --font-weight-strong: 800;
  --font-weight-label: 900;
  --control-height-xs: 28px;
  --control-height-pill: 24px;
  --control-height-row: 30px;
  --control-height-sm: 34px;
  --control-height-md: 38px;
  --control-height-lg: 44px;
  --control-icon-size: 32px;
  --control-padding-x: 14px;
  --control-padding-x-sm: 10px;
  --control-gap: 8px;
  --line-tight: 1.2;
  --line-snug: 1.3;
  --line-normal: 1.35;
  --line-study: 1.38;
  --line-readable: 1.4;
  --line-relaxed: 1.45;
  --tracking-label: 0.08em;
  --tracking-subtle: 0.04em;
  font-family: var(--font-sans);
}

body[data-theme="scholar"] {
  --ink: #172033;
  --muted: #627187;
  --line: #d5deee;
  --line-soft: #e8eef8;
  --canvas: #eef4fb;
  --surface-2: #f4f8fd;
  --surface-3: #fbfdff;
  --nav: #14213d;
  --nav-soft: #22365e;
  --nav-muted: #afbbd1;
  --nav-text: #d2daea;
  --accent: #2563eb;
  --accent-soft: #e7efff;
  --accent-contrast: var(--surface);
  --accent-strong: #1d4ed8;
  --highlight: #f0c35c;
  --blue: #2563eb;
  --blue-soft: #e7efff;
  --grape: #6d5bd0;
  --grape-soft: #ece9ff;
}

body[data-theme="lowStress"] {
  --ink: #1d2a28;
  --muted: #627672;
  --line: #d4e2dc;
  --line-soft: #e8f0ec;
  --canvas: #eef6f1;
  --surface-2: #f5faf6;
  --surface-3: #fbfdfb;
  --nav: #15251f;
  --nav-soft: #243a32;
  --nav-muted: #adc0ba;
  --nav-text: #d0ded9;
  --accent: #2f7d59;
  --accent-soft: #e4f4ea;
  --accent-contrast: var(--surface);
  --accent-strong: #225c41;
  --highlight: #e7c767;
  --blue: #2d6cdf;
  --blue-soft: #e8f0ff;
  --amber-soft: #fff5de;
}

body[data-theme="vismeClean"] {
  --ink: #16312f;
  --text: var(--ink);
  --muted: #5c716f;
  --line: #d3e2dd;
  --line-soft: #e6f0ed;
  --line-strong: #acc7bf;
  --canvas: #edf6f2;
  --surface-2: #f5faf7;
  --surface-3: #fbfdfb;
  --nav: #102422;
  --nav-soft: #1b3a36;
  --nav-muted: #aec7c2;
  --nav-text: #d2e4df;
  --accent: #2d7f73;
  --accent-soft: #e1f4ef;
  --accent-contrast: var(--surface);
  --accent-strong: #19554d;
  --highlight: #6fc8b6;
  --blue: #2f80c9;
  --blue-soft: #e6f2ff;
  --gold: #b88722;
  --gold-soft: #fff3d4;
}

body[data-theme="vismeFuture"] {
  --ink: #182330;
  --text: var(--ink);
  --muted: #64717f;
  --line: #d3dce5;
  --line-soft: #e8edf3;
  --line-strong: #adbac7;
  --canvas: #eef2f6;
  --surface-2: #f5f7fa;
  --surface-3: #fbfcfe;
  --nav: #111a26;
  --nav-soft: #203246;
  --nav-muted: #afbac8;
  --nav-text: #d5dde8;
  --accent: #246b92;
  --accent-soft: #e3f0f7;
  --accent-contrast: var(--surface);
  --accent-strong: #17445f;
  --highlight: #f2a66c;
  --blue: #246b92;
  --blue-soft: #e3f0f7;
  --gold: #d39a62;
  --gold-soft: #fff0e2;
}

body[data-theme="vismeCorporate"] {
  --ink: #17302d;
  --text: var(--ink);
  --muted: #63736f;
  --line: #d5e0dc;
  --line-soft: #e8efec;
  --line-strong: #b4c5bf;
  --canvas: #eef4f1;
  --surface-2: #f6f9f7;
  --surface-3: #fbfdfc;
  --nav: #0f2924;
  --nav-soft: #1d4039;
  --nav-muted: #afc0ba;
  --nav-text: #d2dedb;
  --accent: #2f6f73;
  --accent-soft: #e3f1f2;
  --accent-contrast: var(--surface);
  --accent-strong: #214e51;
  --highlight: #a68b5b;
  --blue: #4d8490;
  --blue-soft: #e5f1f3;
  --gold: #a68b5b;
  --gold-soft: #f5eddd;
}

body[data-theme="vismeWarm"] {
  --ink: #2d2823;
  --text: var(--ink);
  --muted: #766d64;
  --line: #e0d7ca;
  --line-soft: #eee7dc;
  --line-strong: #c8b8a3;
  --canvas: #f3eee6;
  --surface-2: #faf6ee;
  --surface-3: #fffdf8;
  --nav: #221f1d;
  --nav-soft: #3a332e;
  --nav-muted: #c4b9ad;
  --nav-text: #e3d8ca;
  --accent: #9f4e43;
  --accent-soft: #fae8e3;
  --accent-contrast: var(--surface);
  --accent-strong: #6d332d;
  --highlight: #d7b56d;
  --blue: #516f87;
  --blue-soft: #e7eef3;
  --gold: #b58a43;
  --gold-soft: #fbefd5;
  --rose: #a7403d;
  --rose-soft: #f8e3e1;
}

body[data-theme="contrast"] {
  --ink: #111827;
  --text: #111827;
  --muted: #4b5563;
  --line: #c8d0da;
  --line-soft: #dfe5ec;
  --canvas: var(--line-soft);
  --surface-2: #f3f6f9;
  --surface-3: var(--surface);
  --nav: #050814;
  --nav-soft: #172033;
  --nav-muted: #c7d2fe;
  --nav-text: #e5e7eb;
  --accent: #005fcc;
  --accent-soft: #dbeafe;
  --accent-contrast: var(--surface);
  --accent-strong: #003f8f;
  --highlight: #f6c945;
  --blue: #005fcc;
  --blue-soft: #dbeafe;
  --rose: #a40025;
  --amber: #8a4b00;
  --green: #006b3a;
}* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, var(--content-grid-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--content-grid-line-soft) 1px, transparent 1px),
    var(--canvas);
  background-size: 36px 36px, 36px 36px, auto;
  color: var(--ink);
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
}

.skip-link {
  background: var(--surface);
  border: 2px solid var(--highlight);
  border-radius: 8px;
  color: var(--ink);
  font-weight: var(--font-weight-label);
  left: 16px;
  padding: 10px 12px;
  position: fixed;
  top: -80px;
  z-index: 20;
}

.skip-link:focus {
  top: 16px;
}

button,
input,
select,
textarea {
  font: inherit;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

button {
  cursor: pointer;
}

/* Kept at element specificity (beats component `outline:none` on :focus)
   but styled to MATCH the unified Phase 7 ring below, so focus looks
   identical on buttons/inputs and links/tabindex (was 3px gold here vs
   2px accent there — inconsistent). */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background:
    linear-gradient(180deg, var(--page-overlay), transparent 24%),
    var(--nav);
  /* Sidebar is ALWAYS dark (var(--nav) is not flipped in dark mode), so
     its text must use the --nav-* tokens that stay light in every theme.
     Previously --surface-2, which flips dark and made sidebar text
     (incl. the "AcePath" wordmark) invisible in dark mode. */
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 18px;
  border-right: 1px solid var(--nav-line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.brand-mark {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--accent-strong);
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-brand);
  box-shadow: inset 0 0 0 1px var(--warning-line);
}

.brand strong,
.brand span {
  display: block;
}

/* Product wordmark — explicitly bright so it pops on the dark sidebar in
   every theme (it previously inherited the sidebar color and went dark). */
.brand strong {
  color: color-mix(in srgb, var(--nav-text) 35%, #ffffff);
}

.brand span,
.sidebar-panel p {
  color: var(--nav-muted);
  font-size: var(--font-size-small);
}

.brand .brand-tagline {
  color: color-mix(in srgb, var(--nav-text) 60%, transparent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 1px 0 3px;
}

.brand .runtime-badge {
  align-items: center;
  background: color-mix(in srgb, var(--nav-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-text) 18%, transparent);
  border-radius: 999px;
  color: var(--nav-text);
  display: inline-flex;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  margin-top: 7px;
  padding: 5px 8px;
  width: fit-content;
}

.brand .runtime-badge.prod {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  border-color: color-mix(in srgb, var(--success) 38%, transparent);
}

.brand .runtime-badge.test {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
}

.nav-list {
  display: grid;
  gap: 6px;
}

/* Hamburger is desktop-hidden; the responsive block below reveals it and
   collapses the nav into a disclosure. */
.nav-toggle {
  display: none;
}

.nav-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-text);
  text-align: left;
  padding: 12px 13px;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

/* Hover is a lighter, secondary state — it must NOT look like the active
   page (previously hover and .active shared one rule, so a hovered item
   was indistinguishable from the current view). */
.nav-item:hover {
  background: color-mix(in srgb, var(--nav-soft) 55%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, var(--nav-text) 55%, #ffffff);
}

.nav-item.active {
  background: var(--nav-soft);
  border-color: var(--warning-line);
  color: #ffffff;
  font-weight: var(--font-weight-strong);
  transform: translateX(2px);
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: var(--highlight);
}

.sidebar-panel {
  margin-top: auto;
  border: 1px solid var(--nav-line);
  border-radius: 8px;
  padding: 16px;
  background: var(--nav-panel);
}

.sidebar-panel strong {
  display: block;
  margin: 8px 0;
}

.workspace {
  min-width: 0;
  padding: 28px;
  /* Reserve clearance for the fixed stopwatch FAB (bottom-right, ~56px
     tall + 20px offset) + color-scheme toggle (bottom-left) so the
     workspace footer can scroll fully clear of them instead of being
     overlapped. */
  padding-bottom: 104px;
}

.toast {
  position: fixed;
  right: 24px;
  top: 18px;
  z-index: 10;
  max-width: min(420px, calc(100vw - 32px));
  border-radius: 8px;
  background: var(--nav);
  color: var(--surface);
  padding: 12px 14px;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--nav) 28%, transparent);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  font-weight: var(--font-weight-strong);
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 2px 0 8px;
}

.topbar h1 {
  margin: 3px 0 0;
  font-size: var(--font-size-page-title);
  line-height: var(--line-tight);
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search {
  width: min(360px, 38vw);
  height: var(--control-height-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.search span {
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.search input {
  border: 0;
  outline: 0;
  min-width: 0;
}

.icon-button,
.primary-button,
.text-button,
.danger-button,
.filter-chip,
.role-chip,
.file-button {
  align-items: center;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  gap: var(--control-gap);
  justify-content: center;
  line-height: var(--line-tight);
  min-height: var(--control-height-md);
  padding: 0 var(--control-padding-x);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.icon-button {
  width: var(--control-height-lg);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}

.primary-button {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 18px var(--button-shadow);
}

.text-button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

.danger-button {
  background: var(--danger-soft);
  color: var(--danger);
}

button:disabled,
.primary-button:disabled,
.text-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
}

.primary-button:disabled {
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--muted);
}

.text-button:disabled,
.danger-button:disabled {
  opacity: 0.58;
}

/* Tactile press feedback — every actionable button dips slightly when
   held. Excludes disabled. Subtle, fast, removed under reduced-motion. */
.primary-button:not(:disabled):active,
.text-button:not(:disabled):active,
.danger-button:not(:disabled):active,
.file-button:not(:disabled):active {
  transform: translateY(1px);
}

.panel :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple]), textarea),
.dialog-card :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple]), textarea) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  min-width: 0;
  width: 100%;
}

.panel :where(input, select, textarea)[aria-invalid="true"],
.dialog-card :where(input, select, textarea)[aria-invalid="true"] {
  background: var(--danger-soft);
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent);
}

.panel :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])),
.dialog-card :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])) {
  height: var(--control-height-md);
  min-height: var(--control-height-md);
  padding: 0 11px;
}

.panel textarea,
.dialog-card textarea {
  min-height: 110px;
  padding: 10px 11px;
  resize: vertical;
}

.panel select:not([multiple]),
.dialog-card select:not([multiple]) {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 32px;
}

.panel :where(.stack-form, .entry-form, .quick-capture, .study-workbench, .roadmap-settings-form, .integration-config-form, .award-setup-form, .award-goal-form, .award-log-form, .award-expedition-form) {
  align-items: start;
}

.panel :where(.stack-form, .entry-form, .quick-capture, .study-workbench, .roadmap-settings-form, .integration-config-form, .award-setup-form, .award-goal-form, .award-log-form, .award-expedition-form) label,
.compact-field {
  color: var(--muted);
  display: grid;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  gap: 5px;
  letter-spacing: var(--tracking-subtle);
  line-height: var(--line-tight);
  min-width: 0;
  text-transform: uppercase;
}

.role-switcher,
.schedule-toolbar,
.segmented-control {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-toolbar,
.segmented-control {
  align-items: center;
}

.role-chip {
  min-height: var(--control-height-sm);
  padding: 0 var(--control-padding-x-sm);
  background: var(--nav-panel);
  color: var(--nav-text);
}

.role-chip.active {
  background: var(--highlight);
  color: var(--accent-strong);
}

.filter-chip {
  min-height: var(--control-height-md);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.filter-chip.active {
  background: var(--section-accent, var(--accent));
  color: var(--accent-contrast);
  border-color: var(--section-accent, var(--accent));
  box-shadow: 0 8px 16px var(--button-shadow);
}

.view {
  display: none;
  --section-accent: var(--accent);
}

.view.active {
  display: grid;
  gap: 20px;
  animation: view-enter 170ms ease-out;
}

/* Brief fade + rise when a view becomes active, so nav switches feel
   intentional instead of snapping. Re-triggers on every view change
   (display toggles none -> grid). Disabled under reduced-motion. */
@keyframes view-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accessibility: honor the OS "reduce motion" setting. The app previously
   had no reduced-motion handling at all — this neutralizes the view-enter
   animation, button-press dip, nav transitions, and the existing
   decorative animations (stopwatch pulse, confetti, CTA shimmer). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Uniform brand accent across every view. Per-view tint overrides
 * (--info/blue for Profile+Calendar, --gold for Four-Year, --grape for
 * Agents, --muted for Settings) used to make the app feel like a different
 * product on each page. The default `.view { --section-accent: var(--accent); }`
 * above now applies everywhere; section-accent variations should be encoded
 * by element state (warning/danger/success) instead of by view. */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric,
.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.metric::before,
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--section-accent, var(--accent));
  opacity: 0.92;
}

.metric {
  padding: 18px;
  min-height: 132px;
}

.metric span,
.eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-label);
  letter-spacing: var(--tracking-label);
  margin: 0;
}

.metric strong {
  display: block;
  font-size: var(--font-size-metric);
  line-height: var(--line-tight);
  margin: 8px 0 5px;
}

.metric small {
  color: var(--muted);
}

.panel {
  padding: 20px;
  min-width: 0;
}

.view .panel {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

.view .section-heading {
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.view .section-heading h2 {
  font-size: var(--font-size-section-title);
}

.view :where(.section-hint, .muted-copy) {
  max-width: 760px;
}

#dashboardView .metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

#dashboardView .metric {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
  min-height: 112px;
  padding: 15px;
}

#dashboardView .metric strong {
  color: var(--accent);
  font-size: var(--font-size-metric);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}

.section-actions button,
.settings-actions button,
.settings-actions .file-button {
  white-space: nowrap;
}

/* Award hero carries ~15 utility actions next to one primary CTA. Calm the
   wall: keep the primary button prominent and render the secondary actions
   as a compact, quiet toolbar so they read as tools, not a button storm.
   Scoped to .award-hero so other panels' action rows are untouched, and
   every action stays in the DOM + visible (e2e clicks them by id). */
.award-hero .section-heading { align-items: flex-start; }
.award-hero .section-actions { gap: 6px; row-gap: 6px; }
.award-hero .section-actions .primary-button { align-self: flex-start; }
.award-hero .section-actions .text-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--font-size-mini);
  font-weight: var(--font-weight-label);
  background: var(--surface-2);
  border-color: var(--line-soft);
  color: var(--muted);
}
.award-hero .section-actions .text-button:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface);
}

h2 {
  margin: 4px 0 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-tight);
}

.section-hint {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: var(--line-relaxed);
  max-width: 760px;
}

.dashboard-layout,
.two-column,
.parent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 20px;
}

.alert-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-today-panel {
  margin-top: 14px;
}

.dashboard-tools-drawer,
.helper-drawer,
.profile-tools-drawer,
.profile-advanced-drawer,
.profile-diagnostics-drawer {
  margin-top: 20px;
}

.dashboard-tools-drawer summary,
.helper-drawer summary,
.profile-tools-drawer summary,
.profile-advanced-drawer summary,
.profile-diagnostics-drawer summary {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-label);
  justify-content: space-between;
  letter-spacing: var(--tracking-label);
  padding: 12px 14px;
  text-transform: uppercase;
}

.dashboard-tools-drawer:not([open]) summary,
.helper-drawer:not([open]) summary,
.profile-tools-drawer:not([open]) summary,
.profile-advanced-drawer:not([open]) summary,
.profile-diagnostics-drawer:not([open]) summary {
  background:
    linear-gradient(90deg, var(--highlight) 0 3px, transparent 3px),
    var(--surface-raised);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
  color: var(--text);
}

.dashboard-tools-drawer[open] summary,
.helper-drawer[open] summary,
.profile-tools-drawer[open] summary,
.profile-advanced-drawer[open] summary,
.profile-diagnostics-drawer[open] summary {
  background:
    linear-gradient(90deg, var(--accent) 0 3px, transparent 3px),
    color-mix(in srgb, var(--accent) 6%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--text);
}

.profile-diagnostics-drawer {
  margin-top: 10px;
}

.profile-diagnostics-drawer summary {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 8px 0;
}

.dashboard-tools-drawer[open] summary,
.helper-drawer[open] summary,
.profile-tools-drawer[open] summary,
.profile-advanced-drawer[open] summary,
.profile-diagnostics-drawer[open] summary {
  margin-bottom: 12px;
}

.dashboard-tools-drawer summary::after,
.helper-drawer summary::after,
.profile-tools-drawer summary::after,
.profile-advanced-drawer summary::after,
.profile-diagnostics-drawer summary::after {
  align-items: center;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--highlight) 55%, var(--line));
  border-radius: 8px;
  color: var(--text); /* theme-flipping; was --nav (invisible on dark) */
  content: "Expand";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  justify-content: center;
  letter-spacing: 0;
  min-height: var(--control-height-md);
  padding: 0 var(--control-padding-x);
  text-transform: none;
}

.dashboard-tools-drawer[open] summary::after,
.helper-drawer[open] summary::after,
.profile-tools-drawer[open] summary::after,
.profile-advanced-drawer[open] summary::after,
.profile-diagnostics-drawer[open] summary::after {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  content: "Collapse";
}

.dashboard-tools-drawer .panel,
.profile-tools-drawer .panel,
.profile-advanced-drawer .panel,
.profile-diagnostics-drawer .panel {
  margin-bottom: 14px;
}

.helper-drawer .settings-actions,
.profile-tools-drawer .settings-actions {
  margin-top: 10px;
}

.page-collapsible-panel {
  overflow: hidden;
}

.page-collapsible-panel,
.gpa-collapse-section,
.four-year-add-drawer,
.four-year-tools-drawer,
.four-year-checks-drawer,
.dashboard-tools-drawer,
.helper-drawer,
.profile-tools-drawer,
.profile-advanced-drawer,
.profile-diagnostics-drawer,
.award-starter-drawer,
.student-tools-drawer {
  border-radius: 8px;
}

.page-collapsible-panel:has(> .page-panel-body.hidden) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 14%, transparent), transparent 72%),
    var(--surface-raised);
  border-color: var(--line-strong);
}

.page-collapsible-panel:has(> .page-panel-body.hidden)::before {
  background: var(--highlight);
}

.page-collapsible-panel:has(> .page-panel-body.hidden) > .section-heading {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 18%, transparent), transparent 70%),
    transparent;
  margin: -18px -18px 0;
  padding: 18px;
}

/* Expanded panel state: subtle teal wash matching the Collapse button */
.page-collapsible-panel:not(:has(> .page-panel-body.hidden)) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    var(--surface-raised);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.page-collapsible-panel:not(:has(> .page-panel-body.hidden))::before {
  background: var(--accent);
}

.page-collapsible-panel:has(> .page-panel-body.hidden) .page-panel-toggle {
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--highlight) 55%, var(--line));
}

.page-collapsible-panel > .section-heading {
  margin-bottom: 0;
}

.page-collapsible-panel > .page-panel-body {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.page-panel-toggle {
  min-width: 82px;
}

.page-panel-toggle,
.gpa-collapse-header .text-button,
.four-year-add-drawer summary::after,
.four-year-tools-drawer summary::after,
.four-year-checks-drawer summary::after,
.dashboard-tools-drawer summary::after,
.helper-drawer summary::after,
.profile-tools-drawer summary::after,
.profile-advanced-drawer summary::after,
.profile-diagnostics-drawer summary::after {
  min-height: var(--control-height-md);
  min-width: 82px;
}

.page-collapsible-panel:has(> .page-panel-body.hidden) > .section-heading h2,
.gpa-collapse-section:has([data-gpa-section-body].hidden) .gpa-collapse-header strong,
.year-card:has(.year-course-list.hidden) h3,
.four-year-add-drawer:not([open]) summary,
.four-year-tools-drawer:not([open]) summary,
.four-year-checks-drawer:not([open]) summary,
.student-tools-drawer:not([open]) summary span {
  font-size: var(--font-size-collapsed-title);
  font-weight: var(--font-weight-label);
  line-height: var(--line-tight);
  letter-spacing: 0;
  text-transform: none;
}

.page-collapsible-panel:has(> .page-panel-body.hidden) > .section-heading :where(.section-hint, p),
.gpa-collapse-section:has([data-gpa-section-body].hidden) .gpa-collapse-header span,
.year-card:has(.year-course-list.hidden) p,
.student-tools-drawer:not([open]) summary small {
  font-size: var(--font-size-collapsed-meta);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  letter-spacing: 0;
  text-transform: none;
}

.page-collapsible-panel:has(> .page-panel-body.hidden) .page-panel-toggle,
.gpa-collapse-section:has([data-gpa-section-body].hidden) .text-button,
.year-card:has(.year-course-list.hidden) .year-actions .text-button {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
}

.page-collapsible-panel:not(:has(> .page-panel-body.hidden)) .page-panel-toggle,
.gpa-collapse-section:not(:has([data-gpa-section-body].hidden)) .text-button,
.year-card:not(:has(.year-course-list.hidden)) .year-actions .text-button {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

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

.setup-checklist {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.setup-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: space-between;
}

.setup-item.done {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.setup-item strong,
.setup-item span {
  display: block;
}

.setup-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--font-size-small);
}

.empty-state {
  background: var(--info-soft);
  border-color: var(--info-line);
}

.alert {
  border-radius: 8px;
  padding: 13px 14px;
  font-weight: var(--font-weight-strong);
  border: 1px solid var(--line);
}

.alert.risk {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-line);
}

.alert.watch {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning-line);
}

.alert.info {
  background: var(--info-soft);
  color: var(--info);
  border-color: var(--info-line);
}

.alert.ready {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success-line);
}

.wide-left {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.gpa-full-width {
  display: grid;
  gap: 18px;
}

.priority-list,
.recommendation-list,
.course-list,
.schedule-list,
.assignment-list,
.insight-stack,
.concept-list,
.parent-summary,
.pathway,
.block-list {
  display: grid;
  gap: 12px;
}

.schedule-list {
  gap: 8px;
}

.item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-3);
}

.highlighted-item {
  border-color: var(--highlight);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.focus-step-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: var(--font-size-compact);
  line-height: var(--line-relaxed);
}

.focus-log-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
}

.focus-log-header,
.focus-log-item {
  display: grid;
  gap: 3px;
}

.focus-log-header span,
.focus-log-item span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.focus-log-header strong,
.focus-log-item strong {
  font-size: var(--font-size-body);
}

.focus-momentum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.focus-momentum-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 10px;
}

.focus-momentum-card span,
.focus-momentum-card strong,
.focus-momentum-card p {
  display: block;
}

.focus-momentum-card span {
  color: var(--muted);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.focus-momentum-card strong {
  margin-top: 4px;
  font-size: var(--font-size-card-title);
}

.focus-momentum-card p {
  color: var(--muted);
  font-size: var(--font-size-chip);
  line-height: var(--line-snug);
  margin: 2px 0 0;
}

.focus-log-item {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.focus-log-item p,
.muted-copy {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.item h3,
.item p {
  margin: 0;
}

.item h3 {
  font-size: var(--font-size-card-title);
}

.item p {
  color: var(--muted);
  margin-top: 4px;
  line-height: var(--line-relaxed);
}

.mini-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mini-meta span {
  display: inline-flex;
  min-height: var(--control-height-xs);
  align-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 10px;
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
}

.school-period-row {
  align-items: center;
  display: grid;
  grid-template-columns: 136px minmax(190px, 1fr) minmax(220px, auto) auto;
  gap: 10px;
  min-height: 62px;
  padding: 9px 12px;
}

.school-period-row h3,
.school-period-row p {
  margin: 0;
}

.school-period-row p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-snug);
  margin-top: 2px;
}

.school-time-chip {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  min-height: var(--control-height-lg);
  padding: 6px 8px;
}

.school-time-chip span {
  color: var(--muted);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.school-time-chip strong {
  color: var(--text);
  font-size: var(--font-size-small);
}

.school-course-main {
  min-width: 0;
}

.school-course-main h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-row-meta {
  justify-content: flex-end;
  margin-top: 0;
}

.school-row-meta span {
  min-height: var(--control-height-pill);
  padding-inline: 8px;
}

.school-row-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.school-row-actions .danger-button {
  min-height: var(--control-height-row);
  padding-inline: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-xs);
  border-radius: 999px;
  padding: 0 10px;
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-label);
  white-space: nowrap;
}

.pill.high,
.pill.risk {
  background: var(--danger-soft);
  color: var(--danger);
}

.pill.medium,
.pill.watch {
  background: var(--warning-soft);
  color: var(--warning);
}

.pill.low,
.pill.ready {
  background: var(--success-soft);
  color: var(--success);
}

.pill.info {
  background: var(--info-soft);
  color: var(--info);
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  margin-top: 12px;
}

.progress span {
  display: block;
  height: 100%;
  width: var(--value);
  background: var(--accent);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.day {
  min-height: 136px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
}

.day strong {
  display: block;
  margin-bottom: 8px;
}

.day-task {
  border-left: 3px solid var(--accent);
  padding-left: 8px;
  font-size: var(--font-size-compact);
  color: var(--muted);
  margin-top: 8px;
}

.day-task.exam {
  border-left-color: var(--info);
  color: var(--info);
}

.day-task.planned-block {
  border-left-color: var(--success);
  color: var(--success);
  background: var(--success-soft);
  padding-top: 4px;
  padding-bottom: 4px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.calendar-load-grid,
.calendar-day-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.calendar-day-action-grid {
  margin-top: -4px;
}

.calendar-load-card,
.calendar-day-action-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 7px;
}

.calendar-load-card.ready,
.calendar-day-action-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.calendar-load-card.watch,
.calendar-day-action-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.calendar-load-card.risk,
.calendar-day-action-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.calendar-load-card span,
.calendar-load-card strong,
.calendar-load-card p,
.calendar-day-action-card span,
.calendar-day-action-card strong,
.calendar-day-action-card p {
  display: block;
}

.calendar-load-card span,
.calendar-day-action-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.calendar-load-card strong,
.calendar-day-action-card strong {
  font-size: var(--font-size-section-title);
}

.calendar-load-card p,
.calendar-day-action-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.calendar-day-action {
  margin-top: 8px;
}

.fisd-calendar-panel {
  padding: 16px;
}

.fisd-calendar-panel h2 {
  font-size: var(--font-size-card-title);
}

.fisd-calendar-panel .section-hint {
  font-size: var(--font-size-compact);
  max-width: 660px;
}

.fisd-calendar-summary {
  margin: 0 0 8px;
}

.fisd-calendar-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--font-size-compact);
  color: var(--muted);
  line-height: 1.4;
}
.fisd-calendar-meta strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}
.fisd-calendar-meta a {
  color: var(--accent);
}

.fisd-calendar-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.fisd-calendar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 8px;
}

.fisd-calendar-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 8px;
  align-items: baseline;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--font-size-compact);
  line-height: 1.35;
  border-left: 3px solid transparent;
}
.fisd-calendar-row strong {
  font-weight: 600;
  color: var(--text);
}
.fisd-calendar-row em {
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fisd-calendar-row.firstLast {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.fisd-calendar-row.noSchool {
  border-left-color: var(--warning-line);
  background: var(--warning-soft);
}
.fisd-calendar-row.reporting {
  border-left-color: var(--info-line);
  background: var(--info-soft);
}

@media (max-width: 640px) {
  .fisd-calendar-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .fisd-calendar-row em {
    grid-column: 2 / 3;
    white-space: normal;
  }
}

.fisd-calendar-event strong,
.fisd-calendar-event span {
  display: block;
}

.fisd-calendar-event span {
  margin-top: 3px;
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-compact);
}

.fisd-calendar-event p {
  margin: 0;
  color: var(--muted);
  line-height: var(--line-snug);
  font-size: var(--font-size-chip);
}

.fisd-calendar-event a {
  color: var(--accent-strong);
  font-weight: var(--font-weight-label);
}

.calendar-day {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
}

.calendar-day.overloaded {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.calendar-day strong {
  display: block;
  margin-bottom: 8px;
}

.calendar-day-badge {
  display: inline-block;
  border-radius: 999px;
  background: var(--surface);
  color: var(--danger);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-label);
  margin-bottom: 8px;
  padding: 4px 7px;
  text-transform: uppercase;
}

.calendar-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calendar-task-row span {
  min-width: 0;
}

.calendar-task-row .text-button {
  min-height: var(--control-height-xs);
  padding: 5px 8px;
}

.calendar-day p,
.day p {
  color: var(--muted);
  font-size: var(--font-size-compact);
}

.school-day-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow-x: visible;
}

.school-day-card {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 10px 12px;
}

.school-day-row {
  align-items: center;
  display: grid;
  grid-template-columns: 58px minmax(180px, 1fr) minmax(180px, 0.9fr);
  gap: 10px;
}

.school-day-time {
  color: var(--section-accent, var(--accent));
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-label);
}

.school-day-card strong,
.school-day-card span {
  display: block;
}

.school-day-card span {
  color: var(--muted);
  margin-top: 2px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.school-day-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-relaxed);
  margin: 0;
}

.school-work-stack {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 0;
}

.school-work-stack .day-task {
  margin: 0;
  max-width: 100%;
}

.school-work-stack p {
  text-align: right;
}

.entry-form {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(140px, 1fr) 150px 92px 92px auto;
  gap: 8px;
  margin-bottom: 16px;
}

.quick-capture {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(150px, 1fr) 150px minmax(150px, 1fr) auto;
  gap: 8px;
}

.four-year-add-drawer .quick-capture {
  grid-template-columns: minmax(280px, 1.68fr) minmax(118px, 0.58fr) minmax(132px, 0.66fr) minmax(124px, 0.6fr) minmax(124px, 0.6fr);
  align-items: stretch;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 7%, transparent), transparent 72%),
    var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  gap: 10px;
  padding: 10px;
}

.four-year-add-drawer .quick-capture .compact-field {
  align-self: stretch;
  min-width: 0;
}

.four-year-add-drawer .quick-capture input,
.four-year-add-drawer .quick-capture select,
.four-year-add-drawer .quick-capture button {
  width: 100%;
}

.four-year-add-drawer .add-course-action {
  justify-items: end;
}

.four-year-add-drawer .add-course-action .primary-button {
  box-shadow: none;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-label);
  min-height: var(--control-height-lg);
  min-width: var(--control-height-lg);
  padding: 0;
  white-space: nowrap;
  width: var(--control-height-lg);
}

.compact-field {
  color: var(--muted);
  display: grid;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  gap: 5px;
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.stack-form {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.stack-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-normal);
}

.stack-form input,
.stack-form select,
.stack-form textarea {
  min-height: var(--control-height-lg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
}

.stack-form select[multiple] {
  min-height: 132px;
  padding: 8px 10px;
}

.stack-form textarea {
  min-height: 150px;
  padding: 11px;
  resize: vertical;
  line-height: var(--line-relaxed);
}

.award-setup-form,
.award-goal-form,
.award-log-form,
.award-expedition-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.award-setup-form {
  grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1.2fr) minmax(170px, 0.8fr) auto;
}

.award-goal-form {
  align-items: start;
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(280px, 1.45fr)
    minmax(210px, 1fr)
    minmax(220px, 1fr)
    84px;
}

/* Hour-log form. Use a responsive 12-col grid where each label has a
   minimum content width, so on PDF/narrow screens fields don't get
   crammed (was: 4-col Activity ended up wrapping placeholder text into
   tall cells that overlapped sibling cells in printed PDFs). */
.award-log-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.award-expedition-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.award-goal-form label:nth-child(1),
.award-goal-form label:nth-child(2),
.award-goal-form label:nth-child(3),
.award-goal-form label:nth-child(4) {
  grid-column: auto;
}

/* Row 1: small inputs (date, area, goal, hours, service-type) — 12 cols total. */
.award-log-form label:nth-child(1) { grid-column: span 2; }  /* Date */
.award-log-form label:nth-child(2) { grid-column: span 3; }  /* Area */
.award-log-form label:nth-child(3) { grid-column: span 3; }  /* Goal */
.award-log-form label:nth-child(6) { grid-column: span 2; }  /* Hours */
.award-log-form label:nth-child(7) { grid-column: span 2; }  /* Service type */

/* Row 2: wide text inputs (activity, organization) + checkline — 12 cols. */
.award-log-form label:nth-child(4) { grid-column: span 4; }  /* Activity */
.award-log-form label:nth-child(5) { grid-column: span 6; }  /* Organization */
.award-log-form label:nth-child(8) { grid-column: span 2; }  /* Meets guidelines */

.award-log-form .compact-form-action {
  grid-column: span 2;
  width: 100%;
}

/* Below the small-laptop breakpoint, collapse the 12-col grid into a
   single column so the form stacks rather than crushing the activity
   field to nothing. */
@media (max-width: 900px) {
  .award-log-form {
    grid-template-columns: 1fr;
  }
  .award-log-form > * { grid-column: 1 / -1 !important; }
}

/* Expedition form fields. The form expanded to capture workbook prompts
   (goal, preparation, itinerary, trip flags, challenges, day-by-day log)
   so we use class-based column spans instead of brittle :nth-child rules. */
.award-expedition-form > label,
.award-expedition-form > fieldset {
  grid-column: span 3;
}
.award-expedition-form > label[class*="award-expedition-wide"],
.award-expedition-form > fieldset[class*="award-expedition-wide"] {
  grid-column: 1 / -1;
}
.award-expedition-form > label:has(input[name="location"]) { grid-column: span 6; }
.award-expedition-form > label:has(input[name="startDate"]) { grid-column: span 3; }
.award-expedition-form > label:has(input[name="endDate"]) { grid-column: span 3; }
.award-expedition-form > label:has(input[name="days"]),
.award-expedition-form > label:has(input[name="nights"]),
.award-expedition-form > label:has(input[name="travelDays"]) { grid-column: span 2; }
.award-expedition-form > label.checkline:has(input[name="collegeVisits"]) { grid-column: span 6; }
.award-expedition-form > label:has(input[name="validator"]),
.award-expedition-form > label:has(input[name="validatorContact"]) { grid-column: span 6; }
.award-expedition-form > label:has(select[name="itineraryType"]) { grid-column: span 6; }
.award-expedition-form .award-expedition-flags {
  display: grid;
  gap: 4px 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.award-expedition-form .award-expedition-flags legend {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
  padding: 0 4px;
}
.award-expedition-form .award-expedition-flags label {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.award-expedition-form textarea {
  min-height: 64px;
  resize: vertical;
}

/* Per-day Expedition log — rendered below the form when a trip is being
   edited. Each row is a labeled mini-card. */
.award-expedition-day-log {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.award-expedition-day-help {
  margin: 0;
  font-size: var(--font-size-compact);
}
.award-expedition-day-row {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.award-expedition-day-row .award-expedition-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.award-expedition-day-row .award-expedition-day-head span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}
.award-expedition-day-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}
.award-expedition-day-row textarea,
.award-expedition-day-row input {
  width: 100%;
  min-width: 0;
  font-size: var(--font-size-body);
  text-transform: none;
  color: var(--text);
}

.award-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.award-modal.hidden { display: none; }
.award-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.award-modal-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}
.award-modal-card-wide { width: min(920px, 94vw); }

/* Workbook submission readiness panel. Lives between the summary cards
   and the legacy readiness grid; shows a single progress bar + a flat
   checklist where each row has a "fix this" button. */
.award-submission-readiness {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.award-readiness-header {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.award-readiness-header strong { display: block; font-size: 14px; }
.award-readiness-header .muted { font-size: var(--font-size-label); }
.award-readiness-bar {
  position: relative;
  height: 22px;
  background: var(--background);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.award-readiness-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #4a7bf7), color-mix(in srgb, var(--accent, #4a7bf7) 70%, white));
  transition: width 0.3s;
}
.award-readiness-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.award-readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.award-readiness-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--background);
}
.award-readiness-row.is-done { background: color-mix(in srgb, var(--accent, #4a7bf7) 8%, var(--background)); }
.award-readiness-row.is-pending { background: color-mix(in srgb, orange 8%, var(--background)); }
.award-readiness-mark { font-size: 16px; text-align: center; }
.award-readiness-row.is-done .award-readiness-mark { color: green; }
.award-readiness-row.is-pending .award-readiness-mark { color: #b06000; }
.award-readiness-body { display: grid; gap: 2px; min-width: 0; }
.award-readiness-body strong { font-size: var(--font-size-body); text-transform: none; letter-spacing: 0; }
.award-readiness-body .muted { font-size: var(--font-size-label); }
@media (max-width: 720px) {
  .award-readiness-header { grid-template-columns: 1fr; }
}

/* Workbook preview body — rendered markdown. */
.award-workbook-preview-body { font-size: 14px; line-height: 1.55; }
.award-workbook-preview-body h2 { font-size: 22px; margin-top: 12px; }
.award-workbook-preview-body h3 { font-size: 18px; margin-top: 18px; }
.award-workbook-preview-body h4 { font-size: 16px; margin-top: 14px; }
.award-workbook-preview-body h5 { font-size: 14px; margin-top: 12px; color: var(--muted); }
.award-workbook-preview-body table { border-collapse: collapse; margin: 8px 0 16px; font-size: 13px; }
.award-workbook-preview-body th,
.award-workbook-preview-body td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.award-workbook-preview-body th { background: var(--background); }
.award-workbook-preview-body blockquote {
  border-left: 3px solid var(--accent, #4a7bf7);
  padding: 4px 12px;
  margin: 8px 0;
  color: var(--muted);
}
.award-workbook-preview-body hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.award-workbook-preview-body code { background: var(--background); padding: 1px 4px; border-radius: 3px; }

/* Validator letter section inside the outreach modal. */
.award-validator-section { display: grid; gap: 6px; margin-bottom: 18px; }
.award-validator-section h4 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.award-validator-section textarea {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  width: 100%;
  min-height: 200px;
  resize: vertical;
  text-transform: none;
  color: var(--text);
}
.award-validator-letter {
  background: white;
  color: #222;
  padding: 18px 22px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.45;
  max-height: 360px;
  overflow-y: auto;
}
.award-validator-letter h2 { font-size: 16px; margin: 0 0 4px; }

/* Pre-trip expedition checklist (top of edit-mode day log). */
.award-expedition-checklist {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--background));
}
.award-expedition-checklist-head {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 720px) {
  .award-expedition-checklist-head { grid-template-columns: 1fr; }
}

/* Smart "this week" suggestions card. */
.award-this-week {
  background: color-mix(in srgb, var(--accent, #4a7bf7) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #4a7bf7) 25%, var(--line));
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.award-this-week > strong { display: block; font-size: 14px; margin-bottom: 6px; }
.award-this-week ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.award-this-week li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface);
}
.award-this-week-icon { font-size: 18px; text-align: center; }
.award-this-week li strong { display: block; font-size: 13px; text-transform: none; letter-spacing: 0; }
.award-this-week li .muted { font-size: 11px; }

/* Photo journal voice-note row. */
.photo-journal-record {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Stopwatch floating button — fixed bottom-right, big tap target, turns
   red-ish while a session is in progress so it's obvious from across
   the room that the timer is running. */
.stopwatch-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 900;
}
.stopwatch-fab button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-height: 56px;
}
.stopwatch-fab .stopwatch-fab-emoji { font-size: 22px; }
.stopwatch-fab button.stopwatch-running {
  background: #c0392b;
  color: white;
  animation: stopwatchPulse 2s infinite ease-in-out;
}
@keyframes stopwatchPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(192, 57, 43, 0.5); }
  50% { box-shadow: 0 8px 32px rgba(192, 57, 43, 0.85); }
}
@media (max-width: 720px) {
  .stopwatch-fab { bottom: 14px; right: 14px; }
  .stopwatch-fab button { padding: 12px 16px; font-size: 13px; }
}

/* Photo journal modal — preview area + capture-style label. */
.photo-journal-capture {
  display: block;
  margin: 8px 0 12px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-body);
}
.photo-journal-capture .photo-journal-capture-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  font-size: 16px;
  background: var(--surface);
}
.photo-journal-preview img {
  max-width: 100%;
  max-height: 220px;
  display: block;
  margin: 8px 0;
  border-radius: 4px;
}

/* Goal templates modal layout. */
.award-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 8px 0 20px;
}
.award-template-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 6px;
  background: var(--surface);
}
.award-template-card strong { font-size: 14px; text-transform: none; letter-spacing: 0; }
.award-template-card .muted { font-size: 12px; }
.award-template-card button { margin-top: 6px; }

/* Year-in-review layout. */
.yir-hero h2 { font-size: 22px; margin: 0 0 4px; }
.yir-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.yir-stat {
  background: var(--background);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.yir-stat strong { display: block; font-size: 22px; }
.yir-stat .muted { font-size: 11px; }
.yir-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.yir-area-card {
  background: var(--background);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.yir-area-card strong { display: block; font-size: 16px; }
.yir-orgs li, .yir-milestones li { margin: 4px 0; }
@media (max-width: 720px) {
  .yir-stat-grid, .yir-area-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Milestone confetti — 36 colored dots that fall and fade. The root
   stays out of pointer-events so it never blocks underlying clicks. */
.award-confetti-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1050;
}
.award-confetti-piece {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 14px;
  opacity: 0.95;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-12px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Archived goal card — dim and strip color cues. */
.award-record-card--archived {
  opacity: 0.7;
  filter: grayscale(0.4);
}
.award-record-card--archived strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Settings panel content. */
.award-settings-panel {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.award-settings-panel > summary { cursor: pointer; font-weight: 600; }
.award-settings { display: grid; gap: 16px; margin-top: 10px; }
.award-settings-section { display: grid; gap: 6px; }
.award-settings-section h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.award-settings-section label { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); display: grid; gap: 4px; }
.award-settings-section label.checkline { display: flex; align-items: center; gap: 8px; }
.award-settings-section input[type="number"] { max-width: 100px; }

/* CSV import modal body. */
.award-csv-import-controls { display: flex; gap: 8px; margin: 8px 0; }
#awardCsvImportTextarea {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  min-height: 180px;
}
.award-csv-import-preview { margin-top: 12px; }
.award-csv-import-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.award-csv-import-table th, .award-csv-import-table td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.award-csv-import-table th { background: var(--background); }
.award-csv-import-errors { list-style: disc; padding-left: 20px; color: #7a5400; font-size: 12px; }
.award-csv-import-error-detail { margin-top: 8px; }
.award-csv-import-error-detail summary { cursor: pointer; color: #7a5400; font-size: 12px; }

/* Evidence orphan cleanup modal list. */
.award-orphans-actions { margin: 4px 0 10px; }
.award-orphans-list { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow-y: auto; }
.award-orphans-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.award-orphans-list li label { display: flex; align-items: flex-start; gap: 8px; }
.award-orphans-list li code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: var(--background);
  padding: 1px 4px;
  border-radius: 3px;
  word-break: break-all;
  display: block;
}
.award-orphans-list li .muted { display: block; font-size: 11px; margin-top: 2px; }

/* Progress charts panel (SVG, no library). */
.award-charts { display: grid; gap: 16px; margin: 12px 0; }
.award-charts:empty { display: none; }
.award-chart-block {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.award-chart-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.award-chart-head strong { font-size: 14px; }
.award-chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; font-size: var(--font-size-label); color: var(--muted); }
.award-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.award-chart-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; }
.award-chart-block svg { width: 100%; height: auto; max-height: 240px; }

/* Audit log disclosure. */
.award-audit-log-panel {
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.award-audit-log-panel > summary { cursor: pointer; font-weight: 600; }
.award-audit-log { margin-top: 10px; max-height: 360px; overflow-y: auto; }
.award-audit-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.award-audit-log-table th, .award-audit-log-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.award-audit-log-table th { background: var(--background); position: sticky; top: 0; }
.award-audit-type {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--background);
}
.award-audit-type--goal { background: color-mix(in srgb, #4a7bf7 18%, var(--background)); }
.award-audit-type--log { background: color-mix(in srgb, #27ae60 18%, var(--background)); }
.award-audit-type--expedition { background: color-mix(in srgb, #9b59b6 18%, var(--background)); }
.award-audit-type--planned-activity { background: color-mix(in srgb, #f39c12 18%, var(--background)); }

/* Validator suggestion list. */
.award-validator-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.award-validator-suggestion-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--background);
}
.award-validator-suggestion-list li strong { display: block; font-size: 13px; text-transform: none; letter-spacing: 0; }
.award-validator-suggestion-list li .muted { font-size: 11px; }

/* Backup buttons: the file input is hidden — its label looks like the
   other text buttons in the header. */
.awardBackupRestoreLabel { cursor: pointer; }

/* Activity heatmap (52-week trailing window) under the readiness panel. */
.award-heatmap {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  gap: 8px;
}
.award-heatmap:empty { display: none; }
.award-heatmap-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.award-heatmap-head strong { font-size: 14px; }
.award-heatmap-legend { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--font-size-label); }
.award-heatmap-month-row {
  display: grid;
  grid-template-columns: repeat(53, 12px);
  gap: 2px;
  font-size: 10px;
  color: var(--muted);
}
.award-heatmap-month { white-space: nowrap; }
.award-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(53, 12px);
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  gap: 2px;
}
.award-heatmap-col { display: contents; }
.award-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent, #4a7bf7) 6%, var(--background));
  cursor: pointer;
}
.award-heatmap-cell.empty { background: transparent; pointer-events: none; }
.award-heatmap-cell.future { opacity: 0.35; cursor: default; }
.award-heatmap-cell.legend { cursor: default; }
.award-heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--accent, #4a7bf7) 25%, var(--background)); }
.award-heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--accent, #4a7bf7) 50%, var(--background)); }
.award-heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--accent, #4a7bf7) 75%, var(--background)); }
.award-heatmap-cell[data-level="4"] { background: var(--accent, #4a7bf7); }
@media (max-width: 720px) {
  .award-heatmap-grid, .award-heatmap-month-row { overflow-x: auto; }
}

/* Streak badge + stale banner in the readiness header. */
.award-readiness-streak {
  display: block;
  font-size: var(--font-size-label);
  margin-top: 4px;
}
.award-readiness-stale-banner {
  background: #fff3d6;
  color: #7a5400;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 0 12px;
  font-size: 13px;
}
.award-validator-nudge {
  background: #fff3d6;
  color: #7a5400;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.award-validator-nudge button { color: inherit; text-decoration: underline; }

/* Undo toast — anchored bottom-center, above the existing #appToast. */
.undo-toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: #1f2937;
  color: white;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  z-index: 1100;
  font-size: 14px;
}
.undo-toast.hidden { display: none; }
.undo-toast button { color: #ffd166; }

/* Shortcuts overlay table. */
.app-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.app-shortcuts-table th,
.app-shortcuts-table td { padding: 6px 12px; border-bottom: 1px solid var(--line); text-align: left; }
/* Quick-add modal layout. */
.quick-add-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .quick-add-row { grid-template-columns: 1fr; }
}

/* Wellness slider strip inside the journal modal. */
.wellness-strip {
  background: var(--background);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.wellness-strip-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.wellness-strip-head strong { font-size: 13px; }
.wellness-sliders { display: grid; gap: 6px; }
.wellness-slider { display: grid; grid-template-columns: 70px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; }
.wellness-slider input[type="range"] { width: 100%; }

/* Daily plan list. */
.daily-plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.daily-plan-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--background);
  font-size: 13px;
}
.daily-plan-class { background: color-mix(in srgb, #9b59b6 12%, var(--background)); }
.daily-plan-activity { background: color-mix(in srgb, #27ae60 12%, var(--background)); }
.daily-plan-study { background: color-mix(in srgb, var(--accent, #4a7bf7) 12%, var(--background)); }

/* Snapshot table. */
.snapshot-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.snapshot-table th, .snapshot-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.snapshot-table th { background: var(--background); }

/* AI Q&A. */
#aiQaInput { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 6px; }
.ai-qa-answer { margin-top: 12px; min-height: 60px; }
.ai-qa-answer p { padding: 8px 12px; background: var(--background); border-radius: 6px; font-size: 14px; }

/* Parent digest. */
.parent-digest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.parent-digest-card {
  background: var(--background);
  padding: 12px;
  border-radius: 8px;
  display: grid;
  gap: 4px;
}
.parent-digest-card strong { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.parent-digest-big { font-size: 24px; font-weight: 700; margin: 4px 0; }
.parent-digest-section { margin: 12px 0; }
.parent-digest-section h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; }
.parent-digest-section ul { padding-left: 20px; margin: 4px 0; }

/* AP study plan list. */
.ap-plan-list { list-style: none; padding: 0; }
.ap-plan-week { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
.ap-plan-week strong { display: block; margin-bottom: 6px; }
.ap-plan-week ul { padding-left: 20px; margin: 0; }

/* Hover info tooltips on dashboard metric tiles. */
.metric[data-info] { position: relative; cursor: help; }
.metric .info-dot { color: var(--muted); font-size: 11px; margin-left: 4px; }
.metric[data-info]:hover::after,
.metric[data-info]:focus-visible::after {
  content: attr(data-info);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  padding: 8px 10px;
  background: #1f2937;
  color: white;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: normal;
  white-space: normal;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Daily journal tile. */
.daily-journal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.daily-journal:empty { display: none; }
.daily-journal-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.daily-journal-head strong { font-size: 14px; }
.daily-journal-head button { margin-left: auto; }
.daily-journal-strip { display: flex; gap: 4px; }
.journal-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--background);
  border: 1px solid var(--line);
}
.journal-dot.is-filled { background: var(--accent, #4a7bf7); }
.daily-journal-preview {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--background);
  border-radius: 6px;
  font-size: 13px;
}

/* Today's hour-by-hour timeline. */
.today-timeline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.today-timeline:empty { display: none; }
.today-timeline-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.today-timeline-head strong { font-size: 14px; }
.today-timeline-bands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.today-timeline-band { font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.today-timeline-band-task { background: color-mix(in srgb, var(--accent, #4a7bf7) 16%, var(--surface)); }
.today-timeline-band-exam { background: color-mix(in srgb, #e74c3c 16%, var(--surface)); }
.today-timeline-grid {
  position: relative;
  height: 340px;
  background: var(--background);
  border-radius: 6px;
  overflow: hidden;
}
.today-timeline-row {
  position: absolute;
  left: 50px;
  right: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.today-timeline-hour {
  position: absolute;
  left: -46px;
  top: -7px;
  font-size: 10px;
  color: var(--muted);
}
.today-timeline-block {
  position: absolute;
  left: 56px;
  right: 12px;
  background: color-mix(in srgb, var(--accent, #4a7bf7) 25%, var(--surface));
  border-left: 3px solid var(--accent, #4a7bf7);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  overflow: hidden;
}
.today-timeline-class { background: color-mix(in srgb, #9b59b6 20%, var(--surface)); border-left-color: #9b59b6; }
.today-timeline-activity { background: color-mix(in srgb, #27ae60 20%, var(--surface)); border-left-color: #27ae60; }
.today-timeline-outside { background: color-mix(in srgb, #f39c12 20%, var(--surface)); border-left-color: #f39c12; }
.today-timeline-now {
  position: absolute;
  left: 50px;
  right: 0;
  height: 2px;
  background: #e74c3c;
  z-index: 2;
}

/* Class schedule table on Profile. */
.class-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.class-schedule-table th, .class-schedule-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.class-schedule-table th { background: var(--background); text-align: left; }
.class-schedule-day { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; font-size: 12px; }

/* Empty state — shown instead of bare table headers when no periods exist.
   Reuses the base .empty-state card (info-tinted border + padding). */
.class-schedule-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.class-schedule-empty strong { font-size: var(--font-size-body); color: var(--text); }
.class-schedule-empty p { margin: 0; color: var(--muted); font-size: var(--font-size-small); }
.class-schedule-empty .text-button { margin-top: 2px; }

/* College planning page. */
#collegeView .college-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.college-stat {
  background: var(--background);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}
.college-stat strong { display: block; font-size: 22px; }
.college-stat .muted { font-size: 11px; }
.college-upcoming { grid-column: 1 / -1; padding: 12px; background: var(--background); border-radius: 8px; font-size: 13px; }
.college-upcoming strong { display: block; margin-bottom: 6px; }
.college-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.college-table th, .college-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.college-table th { background: var(--background); text-align: left; }

/* Roadmap Gantt timeline. */
#roadmapGantt:empty { display: none; }
#roadmapGantt svg { width: 100%; height: auto; max-height: 280px; }
.roadmap-gantt-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.roadmap-gantt-head strong { font-size: 14px; }

/* Health overlay stat list. */
.health-stat-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; font-size: 13px; }
.health-stat-list li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.health-stat-list code { font-size: 11px; word-break: break-all; }

/* Dashboard "Now playing" card. */
.now-playing {
  background: color-mix(in srgb, var(--accent, #4a7bf7) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #4a7bf7) 25%, var(--line));
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.now-playing:empty { display: none; }
.now-playing-empty { padding: 8px 4px; }
.now-playing-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.now-playing-head strong { font-size: 15px; }
.now-playing-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: nowplay; }
.now-playing-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface);
}
.now-playing-icon { font-size: 20px; text-align: center; }
.now-playing-list li strong { display: block; font-size: 13px; }
.now-playing-list li .muted { font-size: 11px; }

/* SRS queue. */
.srs-queue {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.srs-queue:empty { display: none; }
.srs-queue-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.srs-queue-head strong { font-size: 14px; }
.srs-queue-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.srs-queue-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--background);
}
.srs-queue-list li strong { display: block; font-size: 13px; }
.srs-queue-list li .muted { font-size: 11px; }

/* GPA trajectory chart. */
.gpa-trajectory:empty { display: none; }
.gpa-trajectory svg { width: 100%; height: auto; max-height: 240px; }
.gpa-trajectory-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 4px; flex-wrap: wrap; }
.gpa-trajectory-head strong { font-size: 14px; }

/* GPA what-if calculator. */
.gpa-whatif:empty { display: none; }
.gpa-whatif-head { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 6px; flex-wrap: wrap; }
.gpa-whatif-head strong { font-size: 14px; }
.gpa-whatif-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gpa-whatif-table th, .gpa-whatif-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.gpa-whatif-table th { background: var(--background); }
.gpa-whatif-table tr.is-infeasible { background: color-mix(in srgb, orange 10%, transparent); }

/* Calendar week view. */
.calendar-week-view { padding: 8px 0; }
.calendar-week-view.hidden { display: none; }
.cal-week-grid { display: grid; gap: 0; }
.cal-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-week-row-head .cal-week-col-head { padding: 6px 8px; background: var(--background); border-radius: 6px; text-align: center; }
.cal-week-col-head.is-today { background: color-mix(in srgb, var(--accent, #4a7bf7) 14%, var(--background)); }
.cal-week-col-head strong { display: block; font-size: 13px; }
.cal-week-col-head span { font-size: 11px; color: var(--muted); }
.cal-week-col-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  min-height: 200px;
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.cal-week-item { padding: 4px 6px; border-radius: 4px; background: var(--background); line-height: 1.3; }
.cal-week-item.task { border-left: 3px solid var(--accent, #4a7bf7); }
.cal-week-item.exam { border-left: 3px solid #e74c3c; }
.cal-week-item.activity { border-left: 3px solid #27ae60; }
.cal-week-empty { text-align: center; }
.cal-week-evidence { font-size: 11px; text-align: right; }
@media (max-width: 720px) {
  .cal-week-row { grid-template-columns: 1fr; }
}

/* AP countdown strip. */
.ap-countdown-strip:empty { display: none; }
.ap-countdown-strip { margin-bottom: 12px; }
.ap-countdown-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ap-countdown-head strong { font-size: 14px; }
.ap-countdown-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-countdown-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
}
.ap-countdown-when {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted, #6b7a8d);
  white-space: nowrap;
}
.ap-countdown-name { flex: 1 1 160px; font-weight: 600; }
.ap-countdown-mastery { flex: 0 0 auto; color: var(--muted, #6b7a8d); font-size: 12px; }
.ap-countdown-edit { display: inline-flex; flex-direction: column; gap: 2px; }
.ap-countdown-edit-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #6b7a8d);
}
.ap-countdown-date {
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
}
.ap-countdown-plan { flex: 0 0 auto; white-space: nowrap; }
.ap-countdown-urgent { border-left-color: #e74c3c; }
.ap-countdown-urgent .ap-countdown-when { background: #f7d6d6; color: #7a1d1d; }
.ap-countdown-soon { border-left-color: #f39c12; }
.ap-countdown-soon .ap-countdown-when { background: #fff3d6; color: #7a5400; }
.ap-countdown-future { border-left-color: #3a7afe; }
.ap-countdown-future .ap-countdown-when { background: #e3edff; color: #1f4ea8; }
.ap-countdown-done { opacity: 0.7; }

/* Test analytics timeline. */
.analytics-timeline:empty { display: none; }
.analytics-timeline svg { width: 100%; height: auto; max-height: 240px; }
.analytics-timeline-head { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 4px; flex-wrap: wrap; }
.analytics-timeline-head strong { font-size: 14px; }

.render-error {
  padding: 10px 14px;
  background: color-mix(in srgb, orange 14%, var(--surface));
  border: 1px solid color-mix(in srgb, orange 30%, var(--line));
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.command-palette-card {
  width: min(720px, 92vw);
  max-height: 70vh;
  padding: 0;
}
.command-palette-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  font-size: 16px;
  background: var(--surface);
  color: var(--text);
}
.command-palette-input:focus { outline: none; }
.command-palette-results {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: 50vh;
  overflow-y: auto;
}
.command-palette-results li {
  padding: 8px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.command-palette-results li strong { font-size: 13px; }
.command-palette-results li .muted { font-size: 11px; }
.command-palette-results li.is-selected,
.command-palette-results li:hover {
  background: color-mix(in srgb, var(--accent, #4a7bf7) 12%, var(--surface));
}
.command-palette-hint { padding: 0 16px; }

.help-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.help-tab {
  background: none;
  border: 0;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
}
.help-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.help-panel details {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 6px;
}
.help-panel details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.help-panel details ol, .help-panel details p { font-size: 13px; line-height: 1.5; }

.app-shortcuts-table kbd {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
}

/* Validator status pill shown inline on the goal card. */
.award-validator-status {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
}
.award-validator-status--pending { background: #eee; color: #555; }
.award-validator-status--requested { background: #fff3d6; color: #7a5400; }
.award-validator-status--confirmed { background: #d6f5e0; color: #1d5a30; }
.award-validator-status--declined { background: #f7d6d6; color: #7a1d1d; }

.award-validator-status-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.award-validator-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
.award-validator-status-pill input { margin: 0; }
.award-validator-status-pill:has(input:checked) {
  background: color-mix(in srgb, var(--accent, #4a7bf7) 14%, var(--surface));
  border-color: var(--accent, #4a7bf7);
}
.award-validator-note-label {
  display: block;
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-label);
  color: var(--muted);
}
.award-validator-note-label input {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-transform: none;
  color: var(--text);
  font-size: var(--font-size-body);
}

/* Per-goal forecast line under workbook status. */
.award-goal-forecast {
  font-size: var(--font-size-label);
  margin-top: 4px;
  color: var(--muted);
}
.award-goal-forecast--ontrack { color: #1d5a30; }
.award-goal-forecast--ahead { color: #1d5a30; }
.award-goal-forecast--behind { color: #7a1d1d; }
.award-goal-forecast--complete { color: #1d5a30; font-weight: 600; }

/* Hour-log duplicate/over-12-hr warning chips. */
.award-log-warn-chip {
  font-style: normal;
  background: #fff3d6;
  color: #7a5400;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 4px;
}

/* Calendar evidence chip on activity-calendar day cards. */
.calendar-day-evidence-chip {
  display: inline-block;
  font-size: 11px;
  background: color-mix(in srgb, var(--accent, #4a7bf7) 14%, transparent);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.award-modal-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.award-modal-card header h3 { margin: 0; font-size: 18px; }
.award-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: grid;
  gap: 12px;
}
.award-modal-body h4 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.award-modal-body label { display: grid; gap: 4px; font-size: var(--font-size-label); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-subtle); }
.award-modal-body input[type="text"],
.award-modal-body input[type="email"],
.award-modal-body textarea {
  font-size: var(--font-size-body);
  text-transform: none;
  color: var(--text);
}
.award-modal-body .award-workbook-helper-goal {
  font-size: var(--font-size-body);
  text-transform: none;
  color: var(--text);
}
.award-modal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}
.award-modal-hint {
  font-size: var(--font-size-label);
  flex: 1;
  text-align: center;
}
@media (max-width: 640px) {
  .award-modal-hint { display: none; }
}
.award-lightbox-card {
  position: relative;
  width: min(1100px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  grid-template-rows: 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  border-radius: 12px;
  padding: 32px 16px 16px;
}
.award-lightbox-toolbar {
  position: absolute;
  top: 8px;
  right: 12px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.award-lightbox-download {
  text-decoration: none;
}
.award-lightbox-close {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}
.award-lightbox-nav {
  font-size: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}
.award-lightbox-stage {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 75vh;
  overflow: hidden;
}
.award-lightbox-stage img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
.award-lightbox-doc { padding: 40px; font-size: 18px; }
.award-lightbox-caption {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--font-size-label);
  color: var(--muted);
}

.award-log-evidence-chip {
  font-style: normal;
  background: color-mix(in srgb, var(--accent, #4a7bf7) 14%, transparent);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
}
.award-log-evidence {
  margin-top: 6px;
}
.award-log-evidence > summary {
  cursor: pointer;
  font-size: var(--font-size-label);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-subtle);
}
.award-schedule-hint {
  margin-top: 4px;
  font-size: var(--font-size-label);
  color: var(--accent, #4a7bf7);
}

.award-activity-bulk {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 8px;
}
.award-activity-bulk button {
  background: var(--accent-soft, var(--surface));
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: var(--font-weight-label);
}

/* Evidence section — trip-level (above day rows) and per-day (inside each
   .award-expedition-day-row). Same component, two scopes. */
.award-evidence-section {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--background));
  transition: background 0.15s, border-color 0.15s;
}
.award-evidence-section.is-drop-target {
  border-color: var(--accent, #4a7bf7);
  border-style: solid;
  background: color-mix(in srgb, var(--accent, #4a7bf7) 12%, var(--surface));
}
.award-evidence-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.award-evidence-section-head strong {
  font-size: var(--font-size-body);
  text-transform: none;
  letter-spacing: 0;
}
.award-evidence-section-head .muted {
  font-size: var(--font-size-label);
}
.award-evidence-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.award-evidence-empty {
  font-style: italic;
  padding: 8px 0;
}
.award-evidence-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  align-items: start;
}
.award-evidence-thumb {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--background);
}
.award-evidence-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.award-evidence-icon {
  display: flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border-radius: 6px;
  background: var(--background);
  text-decoration: none;
}
.award-evidence-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.award-evidence-body strong {
  font-size: var(--font-size-body);
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.award-evidence-body .muted {
  font-size: var(--font-size-label);
}
.award-evidence-body p {
  margin: 2px 0 0;
  font-size: var(--font-size-label);
  color: var(--text);
}
.award-evidence-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.award-evidence-form {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.award-evidence-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.award-evidence-form-actions {
  display: flex;
  justify-content: flex-end;
}
.award-evidence-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}
.award-evidence-form input[type="text"],
.award-evidence-form input[type="url"],
.award-evidence-form input[type="date"],
.award-evidence-form select {
  width: 100%;
  min-width: 0;
  text-transform: none;
  font-size: var(--font-size-body);
  color: var(--text);
}
.award-evidence-form input[type="file"] {
  font-size: var(--font-size-body);
  text-transform: none;
}
.award-evidence-form .award-evidence-url,
.award-evidence-form .award-evidence-notes {
  grid-column: span 2;
}

.award-setup-form label,
.award-goal-form label,
.award-log-form label,
.award-expedition-form label {
  align-self: start;
  color: var(--muted);
  display: grid;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  gap: 5px;
  letter-spacing: var(--tracking-subtle);
  min-width: 0;
  text-transform: uppercase;
}

.award-setup-form input,
.award-setup-form select,
.award-goal-form input,
.award-goal-form select,
.award-log-form input,
.award-log-form select,
.award-expedition-form input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  height: var(--control-height-md);
  line-height: var(--line-normal);
  min-height: var(--control-height-md);
  padding: 0 11px;
  width: 100%;
}

.award-setup-form select,
.award-goal-form select,
.award-log-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.award-setup-form .primary-button,
.award-goal-form .primary-button,
.award-log-form .primary-button,
.award-expedition-form .primary-button {
  align-self: end;
  min-height: var(--control-height-md);
  white-space: nowrap;
}

.award-goal-form .text-button.compact-form-action,
.award-log-form .text-button.compact-form-action,
.award-expedition-form .text-button.compact-form-action {
  align-self: end;
  min-height: var(--control-height-md);
  width: 100%;
}

.award-goal-form .primary-button,
.award-log-form .primary-button,
.award-expedition-form .primary-button {
  grid-column: span 2;
}

.award-goal-form .primary-button {
  grid-column: auto;
  min-width: 84px;
  padding-inline: 12px;
  width: 84px;
}

.compact-form-action {
  letter-spacing: 0;
}

.award-log-form .checkline {
  align-items: center;
  align-self: end;
  display: flex;
  gap: 8px;
  letter-spacing: 0;
  min-height: var(--control-height-md);
  text-transform: none;
}

.award-log-form .checkline input {
  flex: 0 0 auto;
  min-height: auto;
  width: auto;
}

.award-log-form .checkline span {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0;
  line-height: var(--line-tight);
}

.award-summary-grid,
.award-readiness-grid,
.award-audit-grid,
.award-action-grid,
.award-pace-grid,
.award-requirement-strip,
.award-month-grid,
.award-goal-slots,
.award-starter-grid,
.award-goal-coverage-grid,
.award-goal-grid,
.award-log-grid,
.award-expedition-grid {
  display: grid;
  gap: 10px;
}

.award-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.award-readiness-grid,
.award-audit-grid,
.award-action-grid,
.award-pace-grid,
.award-month-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 12px;
}

.award-requirement-strip {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 12px;
}

.award-goal-slots {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.award-starter-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.award-goal-coverage-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 12px;
}

.award-goal-grid,
.award-log-grid,
.award-expedition-grid {
  margin-top: 14px;
}

.award-status-card,
.award-progress-card,
.award-guide-card,
.award-readiness-card,
.award-audit-card,
.award-action-card,
.award-pace-card,
.award-month-card,
.award-slot-card,
.award-starter-card,
.award-goal-coverage-card,
.award-record-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.award-status-card,
.award-progress-card,
.award-guide-card,
.award-readiness-card,
.award-audit-card,
.award-action-card,
.award-pace-card,
.award-month-card,
.award-slot-card {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.award-status-card span,
.award-progress-card span,
.award-guide-card span,
.award-readiness-card span,
.award-audit-card span,
.award-action-card span,
.award-pace-card span,
.award-month-card span,
.award-slot-card span,
.award-starter-card span,
.award-goal-coverage-card span,
.award-record-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.award-status-card strong,
.award-progress-card strong,
.award-guide-card strong,
.award-readiness-card strong,
.award-audit-card strong,
.award-action-card strong,
.award-pace-card strong,
.award-month-card strong,
.award-slot-card strong {
  font-size: var(--font-size-card-title);
}

.award-status-card p,
.award-progress-card p,
.award-guide-card p,
.award-readiness-card p,
.award-audit-card p,
.award-action-card p,
.award-pace-card p,
.award-month-card p,
.award-slot-card p,
.award-goal-coverage-card p,
.award-record-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.award-status-card.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.award-slot-card.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.award-readiness-card.ready,
.award-audit-card.ready,
.award-action-card.ready,
.award-pace-card.ready,
.award-goal-coverage-card.ready,
.award-month-card.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.award-readiness-card.watch,
.award-audit-card.watch,
.award-action-card.watch,
.award-pace-card.watch,
.award-goal-coverage-card.watch {
  background: var(--warning-soft);
  border-color: var(--warning-line);
}

.award-audit-card.risk,
.award-action-card.risk,
.award-pace-card.risk,
.award-goal-coverage-card.risk {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.award-action-card {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}

.award-action-card .text-button {
  align-self: center;
  min-width: 112px;
}

.award-goal-coverage-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.award-guide-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--highlight) 10%, transparent), transparent 65%),
    var(--surface-raised);
}

.award-starter-drawer {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  padding: 9px 11px;
}

.award-print-drawer {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  padding: 9px 11px;
}

.award-print-drawer summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
}

.award-print-drawer summary::-webkit-details-marker {
  display: none;
}

.award-print-drawer summary span {
  font-weight: var(--font-weight-label);
}

.award-print-drawer summary small {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.award-print-summary {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  gap: 8px;
  line-height: var(--line-readable);
  margin-top: 10px;
  padding-top: 10px;
}

.award-print-summary :where(h3, h4, p, ul) {
  margin: 0;
}

.award-print-summary h3,
.award-print-summary h4 {
  color: var(--ink);
}

.award-starter-drawer summary {
  align-items: center;
  color: var(--text);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
}

.award-starter-drawer summary::after {
  align-items: center;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--highlight) 55%, var(--line));
  border-radius: 8px;
  color: var(--text); /* theme-flipping; was --nav (invisible on dark) */
  content: "Expand";
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  justify-content: center;
  min-height: var(--control-height-md);
  min-width: 82px;
  padding: 0 var(--control-padding-x);
}

.award-starter-drawer[open] summary::after {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  content: "Collapse";
}

.award-starter-drawer summary::-webkit-details-marker {
  display: none;
}

.award-starter-drawer summary span {
  font-weight: var(--font-weight-label);
}

.award-starter-drawer summary small {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.award-starter-drawer[open] summary {
  margin-bottom: 10px;
}

.award-starter-card {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.award-starter-card strong {
  display: block;
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin-top: 2px;
}

.award-starter-card.muted {
  opacity: 0.55;
}

.award-status-card.risk,
.award-record-card.risk {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

@media (max-width: 1280px) {.award-setup-form,
.award-goal-form,
.award-log-form,
.award-expedition-form,
.study-workbench,
.roadmap-settings-form,
.integration-config-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.award-goal-form > *,
.award-log-form > *,
.award-expedition-form > *,
.study-workbench > *,
.roadmap-settings-form > *,
.integration-config-form > * {
    grid-column: auto !important;
  }

.award-setup-form .primary-button,
.award-goal-form .primary-button,
.award-log-form .primary-button,
.award-expedition-form .primary-button,
.award-goal-form .text-button.compact-form-action,
.award-log-form .text-button.compact-form-action,
.award-expedition-form .text-button.compact-form-action,
.study-workbench .primary-button,
.roadmap-settings-form .primary-button,
.integration-config-form .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

.award-log-form .checkline {
    min-height: var(--control-height-md);
  }

}

.award-record-card {
  align-items: center;
  display: grid;
  gap: 12px;
  /* The actions column must be BOUNDED, not `auto`. With `auto` the grid
     sizes it to max-content (all action buttons on one unwrapped line),
     which starved the text column to ~0 width and made long goal titles
     wrap one character per line. A clamped max lets flex-wrap engage so
     the buttons stack within their column and the title keeps real width. */
  grid-template-columns: minmax(180px, 1fr) minmax(0, 260px);
  padding: 12px 14px;
}

@media (max-width: 720px) {
  .award-record-card {
    grid-template-columns: 1fr;
  }
}

.award-record-card strong {
  display: block;
  font-size: var(--font-size-body-lg);
  overflow-wrap: anywhere;
  margin: 3px 0;
}

.award-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 18px;
}

.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.launch-readiness-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.product-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.launch-readiness-card,
.product-quality-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.launch-readiness-card.ready,
.product-quality-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.launch-readiness-card.watch,
.product-quality-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.launch-readiness-card.risk,
.product-quality-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.launch-readiness-card span,
.launch-readiness-card strong,
.launch-readiness-card p,
.product-quality-card span,
.product-quality-card strong,
.product-quality-card p {
  display: block;
}

.launch-readiness-card span,
.product-quality-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.launch-readiness-card p,
.product-quality-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.import-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.import-history-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.import-history-card,
.backup-version-card,
.backup-preview-card,
.gpa-trust-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 7px;
  padding: 12px;
}

.import-history-card span,
.backup-version-card span,
.backup-preview-card span,
.gpa-trust-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.import-history-card p,
.backup-version-card p,
.backup-preview-card p,
.gpa-trust-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.sync-handoff-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  padding: 14px;
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.sync-handoff-card span,
.sync-handoff-card strong,
.sync-handoff-card p {
  display: block;
}

.sync-handoff-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sync-handoff-card strong {
  font-size: var(--font-size-card-title);
}

.sync-handoff-card p {
  color: var(--muted);
  font-size: var(--font-size-compact);
  line-height: var(--line-readable);
  margin: 0;
}

.sync-handoff-status {
  justify-self: start;
  border: 1px solid var(--success-line);
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--font-size-mini);
  font-weight: var(--font-weight-label);
  padding: 5px 9px;
  text-transform: uppercase;
}

.sync-handoff-status.review {
  border-color: var(--warning-line);
  background: var(--warning-soft);
  color: var(--warning);
}

.sync-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sync-due-repair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}

.sync-due-repair span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sync-review-list {
  display: grid;
  gap: 7px;
}

.sync-repaired-list {
  display: grid;
  gap: 7px;
}

.sync-review-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px;
}

.sync-repaired-item {
  border: 1px solid var(--success-line);
  border-radius: 8px;
  background: var(--success-soft);
  padding: 9px;
}

.sync-review-item span,
.sync-review-item p,
.sync-repaired-item span,
.sync-repaired-item p {
  display: block;
}

.sync-review-item span {
  color: var(--warning);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sync-repaired-item span {
  color: var(--success);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.sync-review-item p,
.sync-repaired-item p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 3px 0 0;
}

.four-year-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

.academic-year-summary {
  margin-top: 10px;
}

.four-year-context-note {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 11px;
}

.four-year-context-note > div {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
}

.four-year-context-note span {
  background: var(--info-soft);
  border: 1px solid var(--info-line);
  border-radius: 999px;
  color: var(--info);
  flex: 0 0 auto;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  padding: 4px 8px;
}

.four-year-context-note strong {
  font-size: var(--font-size-compact);
}

.four-year-context-note p {
  color: var(--muted);
  font-size: var(--font-size-small);
  margin: 0 0 0 auto;
}

.four-year-add-drawer,
.four-year-tools-drawer,
.four-year-checks-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  margin-top: 10px;
  padding: 9px 11px;
  position: relative;
  overflow: hidden;
}

.four-year-add-drawer::before,
.four-year-tools-drawer::before,
.four-year-checks-drawer::before,
.student-tools-drawer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--highlight);
  opacity: 0.9;
}
/* Open state: top strip switches to the same teal as the Collapse button */
.four-year-add-drawer[open]::before,
.four-year-tools-drawer[open]::before,
.four-year-checks-drawer[open]::before {
  background: var(--accent);
}

.four-year-add-drawer summary,
.four-year-tools-drawer summary,
.four-year-checks-drawer summary {
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-label);
  list-style: none;
  position: relative;
}

.four-year-add-drawer summary::-webkit-details-marker,
.four-year-tools-drawer summary::-webkit-details-marker,
.four-year-checks-drawer summary::-webkit-details-marker {
  display: none;
}

.four-year-add-drawer:not([open]),
.four-year-tools-drawer:not([open]),
.four-year-checks-drawer:not([open]) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 18%, transparent), transparent 70%),
    var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}
.four-year-add-drawer[open],
.four-year-tools-drawer[open],
.four-year-checks-drawer[open] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface-raised);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-soft);
}

.four-year-add-drawer:not([open]) summary,
.four-year-tools-drawer:not([open]) summary,
.four-year-checks-drawer:not([open]) summary {
  color: var(--text); /* theme-flipping; was --nav (invisible on dark) */
}

.four-year-add-drawer[open] summary,
.four-year-tools-drawer[open] summary,
.four-year-checks-drawer[open] summary {
  margin-bottom: 10px;
}

.four-year-add-drawer summary,
.four-year-tools-drawer summary,
.four-year-checks-drawer summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.four-year-add-drawer summary::after,
.four-year-tools-drawer summary::after,
.four-year-checks-drawer summary::after {
  content: none;
  display: none;
}

.drawer-state {
  align-items: center;
  background: var(--gold-soft);
  border: 1px solid color-mix(in srgb, var(--highlight) 55%, var(--line));
  border-radius: 8px;
  color: var(--text); /* theme-flipping; was --nav (invisible on dark) */
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-strong);
  justify-content: center;
  min-height: var(--control-height-md);
  min-width: 82px;
  padding: 0 var(--control-padding-x);
}

.drawer-state .when-open {
  display: none;
}

.four-year-add-drawer[open] .drawer-state,
.four-year-tools-drawer[open] .drawer-state,
.four-year-checks-drawer[open] .drawer-state {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.four-year-add-drawer[open] .drawer-state .when-open,
.four-year-tools-drawer[open] .drawer-state .when-open,
.four-year-checks-drawer[open] .drawer-state .when-open {
  display: inline;
}

.four-year-add-drawer[open] .drawer-state .when-closed,
.four-year-tools-drawer[open] .drawer-state .when-closed,
.four-year-checks-drawer[open] .drawer-state .when-closed {
  display: none;
}

.four-year-toolbar {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-top: 10px;
  padding: 9px 11px;
}

.filter-state-pill {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  padding: 5px 8px;
  white-space: nowrap;
}

.student-tools-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  margin-top: 12px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}

.student-tools-drawer:not([open]) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 18%, transparent), transparent 70%),
    var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.student-tools-drawer[open] {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface-raised);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-soft);
}

.student-tools-drawer summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
}

.student-tools-drawer summary::-webkit-details-marker {
  display: none;
}

.student-tools-drawer summary span {
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-label);
}

.student-tools-drawer summary small {
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-snug);
  text-align: right;
}

.student-tools-drawer[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.four-year-toolbar .segmented-control {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.four-year-toolbar > span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.plan-course-preview {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-course-preview strong,
.plan-course-preview span {
  display: block;
}

.plan-course-preview > div > span {
  color: var(--muted);
  font-size: var(--font-size-compact);
  margin-top: 4px;
}

.plan-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.plan-impact-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.plan-impact-card span,
.plan-impact-card strong,
.plan-impact-card p {
  display: block;
}

.plan-impact-card span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
}

.plan-impact-card strong {
  margin-top: 6px;
  font-size: var(--font-size-subtitle);
}

.plan-impact-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.plan-health-grid,
.plan-sync-grid,
.credit-progress-grid,
.plan-warning-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.plan-health-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plan-health-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 12px 0;
}

.plan-health-pill {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.plan-health-pill.watch {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
}

.plan-health-pill span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.plan-health-pill strong {
  color: var(--text);
  font-size: var(--font-size-section-title);
}

.plan-health-pill small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-sync-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.credit-progress-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.plan-warning-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.plan-health-card,
.plan-sync-card,
.credit-progress-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
}

.plan-health-card span,
.plan-health-card strong,
.plan-health-card p,
.plan-sync-card span,
.plan-sync-card strong,
.plan-sync-card p,
.credit-progress-card span,
.credit-progress-card strong,
.credit-progress-card p {
  display: block;
}

.plan-health-card span,
.plan-sync-card span,
.credit-progress-card span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
}

.plan-health-card strong,
.plan-sync-card strong,
.credit-progress-card strong {
  margin-top: 8px;
  font-size: var(--font-size-score);
}

.plan-health-card p,
.plan-sync-card p,
.credit-progress-card p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: var(--line-normal);
}

.plan-sync-card,
.credit-progress-card {
  display: grid;
  align-content: start;
  gap: 8px;
}

.plan-sync-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.plan-sync-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.plan-sync-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.credit-progress-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.credit-progress-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.credit-progress-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.pre9-credit-list {
  margin-top: 14px;
}

.pre9-credit-list:empty {
  display: none;
}

.pre9-card {
  background: var(--surface-3);
  border-color: var(--info-line);
}

.year-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 14px;
  display: grid;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

.year-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--highlight);
  opacity: 0.92;
}

.year-card.current-year {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Collapsed year card: gold tint matches the gold Expand button */
.year-card:has(.year-course-list.hidden) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 18%, transparent), transparent 72%),
    var(--surface-raised);
  border-color: var(--line-strong);
}

/* Expanded year card: teal tint + teal top strip match the teal Collapse button */
.year-card:not(:has(.year-course-list.hidden)) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    var(--surface-raised);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.year-card:not(:has(.year-course-list.hidden))::before {
  background: var(--accent);
}

.year-card:has(.year-course-list.hidden) > .item-row {
  margin: -14px -14px;
  padding: 16px 14px 14px;
}

.year-card:has(.year-course-list.hidden) .year-actions .text-button {
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--highlight) 55%, var(--line));
}

.year-card h3,
.year-card p {
  margin: 0;
}

.year-card p {
  color: var(--muted);
  margin-top: 4px;
}

.year-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.year-course-list {
  display: grid;
  gap: 9px;
}

.year-course {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) minmax(210px, auto) 32px;
  grid-template-areas:
    "course meta remove"
    "status status status";
  align-items: start;
  gap: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.year-course.compact-plan-course {
  grid-template-columns: minmax(180px, 1fr) auto;
  grid-template-areas:
    "course meta"
    "editor editor";
  align-items: center;
}

.year-course.compact-plan-course.editable {
  grid-template-columns: minmax(180px, 1fr) auto auto;
  grid-template-areas:
    "course meta status"
    "editor editor editor";
}

.year-course strong {
  display: block;
  font-size: var(--font-size-card-title);
  line-height: var(--line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.year-course > div:first-child,
.year-course-main {
  grid-area: course;
  min-width: 0;
}

.year-course-main small {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.year-course .year-course-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.year-course-meta b {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  padding: 4px 7px;
  flex: 0 0 auto;
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.year-course-actions {
  grid-area: status;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 1px;
  min-width: 0;
}

.compact-plan-course .year-course-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.row-edit-button {
  min-height: var(--control-height-xs);
  padding: 4px 8px;
}

.year-course-editor {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-area: editor;
  margin-top: 2px;
  padding-top: 10px;
}

.plan-status-select,
.plan-status-static {
  align-items: center;
  min-height: var(--control-height-sm);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
  padding: 5px 8px;
  width: auto;
}

.plan-status-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plan-status-select[data-status="Completed"],
.plan-status-static[data-status="Completed"],
.plan-status-static:not([data-status]) {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.plan-status-select[data-status="Current"],
.plan-status-static[data-status="Current"] {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--accent);
}

.plan-status-select[data-status="Planned"],
.plan-status-static[data-status="Planned"] {
  border-color: var(--warning-line);
  background: var(--warning-soft);
  color: var(--warning);
}

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

.year-course .plan-status-detail {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-tight);
  padding: 4px 7px;
  margin-left: auto;
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.danger-icon {
  color: var(--danger);
  font-size: var(--font-size-section-title);
  font-weight: var(--font-weight-label);
  grid-area: remove;
  min-height: var(--control-icon-size);
  width: var(--control-icon-size);
  justify-self: end;
}

.maintenance-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.maintenance-card h3,
.maintenance-card p {
  margin: 0;
}

.maintenance-card p {
  color: var(--muted);
  line-height: var(--line-relaxed);
}

.import-health-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.import-health-card span,
.import-health-card strong,
.import-health-card p {
  display: block;
}

.import-health-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.import-health-card strong {
  margin-top: 6px;
  font-size: var(--font-size-card-title);
}

.import-health-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 4px 0 0;
}

.import-health-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.import-health-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.import-health-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.import-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.import-command-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.import-command-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.import-command-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.import-command-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.import-command-card span,
.import-command-card strong,
.import-command-card p {
  display: block;
}

.import-command-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.import-command-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.import-next-step {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px;
}

.import-next-step span,
.import-next-step strong,
.import-next-step p {
  display: block;
}

.import-next-step span,
.import-row-preview span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.import-next-step strong {
  margin-top: 4px;
}

.import-next-step p,
.import-row-preview p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 4px 0 0;
}

.import-next-step.ready,
.import-row-preview.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.import-next-step.watch,
.import-row-preview.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.import-next-step.risk,
.import-row-preview.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.import-row-preview-list {
  display: grid;
  gap: 7px;
}

.import-preview-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 10px 0;
  max-width: 100%;
  overflow: auto;
}

.import-preview-table {
  border-collapse: collapse;
  font-size: var(--font-size-small);
  min-width: 720px;
  width: 100%;
}

.import-preview-table th,
.import-preview-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  text-align: left;
  vertical-align: middle;
}

.import-preview-table th {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.import-status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  padding: 5px 8px;
  white-space: nowrap;
}

.import-status-pill.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
  color: var(--success);
}

.import-status-pill.watch {
  background: var(--warning-soft);
  border-color: var(--warning-line);
  color: var(--warning);
}

.import-status-pill.risk {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.import-row-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
}

.import-example {
  border-radius: 8px;
  background: var(--info-soft);
  color: var(--info);
  padding: 12px;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-relaxed);
}

.entry-form input,
.entry-form select,
.quick-capture input,
.quick-capture select,
.dialog-card input,
.dialog-card select {
  min-height: var(--control-height-lg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  min-width: 0;
}

.four-year-add-drawer select {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
}

.dialog-check {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  font-size: var(--font-size-compact);
  font-weight: var(--font-weight-strong);
  gap: 8px;
  min-height: var(--control-height-lg);
  padding: 8px 10px;
}

.dialog-check input {
  min-height: 0;
}

.formula {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 16px;
  font-weight: var(--font-weight-label);
  margin: 12px 0;
}

.gpa-reference {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
}

.gpa-collapse-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  margin-top: 12px;
  overflow: hidden;
  position: relative;
}

.gpa-collapse-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--highlight);
  opacity: 0.92;
  z-index: 1;
}

.gpa-collapse-section:has([data-gpa-section-body].hidden) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--highlight) 18%, transparent), transparent 72%),
    var(--surface-raised);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.gpa-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.gpa-collapse-section:has([data-gpa-section-body].hidden) .gpa-collapse-header {
  background: transparent;
  border-bottom-color: transparent;
  padding-top: 13px;
}

.gpa-collapse-section:has([data-gpa-section-body].hidden) .text-button {
  background: var(--gold-soft);
  border-color: color-mix(in srgb, var(--highlight) 55%, var(--line));
}

.gpa-collapse-header strong,
.gpa-collapse-header span {
  display: block;
}

.gpa-collapse-header strong {
  font-size: var(--font-size-body);
}

.gpa-collapse-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.gpa-records-toolbar {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: var(--font-size-small);
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
}

.gpa-records-toolbar span {
  flex: 1 1 280px;
  line-height: var(--line-normal);
}

.gpa-collapse-header span {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-size-chip);
  line-height: var(--line-snug);
}

.gpa-collapse-section [data-gpa-section-body] {
  padding: 12px;
}

.gpa-collapse-section .gpa-summary-grid,
.gpa-collapse-section .transcript-audit-grid,
.gpa-collapse-section .gpa-opportunity-list,
.gpa-collapse-section .gpa-reference {
  margin-bottom: 0;
}

.gpa-collapse-section .gpa-reference {
  margin-top: 0;
}

.gpa-status-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
}

.gpa-status-banner.ready {
  border-color: var(--success-line);
  border-left-color: var(--success);
  background: var(--success-soft);
}

.gpa-status-banner.watch {
  border-color: var(--warning-line);
  border-left-color: var(--warning);
  background: var(--warning-soft);
}

.gpa-status-banner.risk {
  border-color: var(--danger-line);
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.gpa-status-banner span,
.gpa-status-banner strong,
.gpa-status-banner p,
.gpa-status-banner small,
.gpa-status-meter b {
  display: block;
}

.gpa-status-banner span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-status-banner strong {
  margin-top: 4px;
  font-size: var(--font-size-section-title);
}

.gpa-status-banner p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: var(--line-normal);
}

.gpa-status-meter {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 5px;
  padding: 10px;
}

.gpa-status-meter b {
  color: var(--accent);
  font-size: var(--font-size-section-title);
}

.gpa-status-meter small {
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
}

.gpa-assumption-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.gpa-assumption-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.gpa-assumption-detail span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
  padding: 5px 8px;
}

.gpa-assumption-detail b {
  color: var(--text);
  font-weight: var(--font-weight-label);
}

.gpa-summary-grid,
.gpa-grade-card-grid,
.gpa-next-grid,
.transcript-audit-grid,
.gpa-opportunity-list,
.gpa-advice-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.gpa-summary-grid,
.gpa-grade-card-grid,
.gpa-next-grid,
.transcript-audit-grid,
.gpa-advice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gpa-trust-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.gpa-formula-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 6px;
  line-height: var(--line-readable);
  padding: 12px;
}

.gpa-formula-box strong {
  color: var(--ink);
}

.gpa-formula-box p {
  margin: 0;
}

.gpa-formula-box code {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent-strong);
  padding: 1px 5px;
}

.gpa-summary-card,
.gpa-grade-card,
.gpa-next-card,
.transcript-audit-card,
.gpa-opportunity-card,
.gpa-advice-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.gpa-summary-card span,
.gpa-summary-card strong,
.gpa-summary-card p,
.gpa-grade-card span,
.gpa-grade-card strong,
.gpa-grade-card p,
.gpa-grade-card small,
.gpa-next-card span,
.gpa-next-card strong,
.gpa-next-card p,
.transcript-audit-card span,
.transcript-audit-card strong,
.transcript-audit-card p,
.gpa-advice-card span,
.gpa-advice-card strong,
.gpa-advice-card p,
.gpa-opportunity-card strong,
.gpa-opportunity-card span,
.gpa-opportunity-card p {
  display: block;
}

.gpa-summary-card span,
.gpa-grade-card span,
.gpa-next-card span,
.transcript-audit-card span,
.gpa-advice-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-summary-card strong,
.gpa-grade-card strong,
.gpa-next-card strong,
.transcript-audit-card strong,
.gpa-advice-card strong {
  margin-top: 6px;
  font-size: var(--font-size-section-title);
}

.gpa-summary-card p,
.gpa-grade-card p,
.gpa-next-card p,
.transcript-audit-card p,
.gpa-advice-card p,
.gpa-opportunity-card p,
.gpa-opportunity-card span {
  color: var(--muted);
  line-height: var(--line-normal);
}

.gpa-summary-card p,
.gpa-grade-card p,
.gpa-next-card p,
.transcript-audit-card p,
.gpa-advice-card p,
.gpa-opportunity-card p {
  margin: 4px 0 0;
  font-size: var(--font-size-small);
}

.gpa-grade-grid {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.gpa-grade-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gpa-grade-heading strong,
.gpa-grade-heading span {
  display: block;
}

.gpa-grade-heading strong {
  font-size: var(--font-size-body);
}

.gpa-grade-heading span,
.gpa-grade-card small {
  color: var(--muted);
  font-size: var(--font-size-chip);
  line-height: var(--line-snug);
}

.gpa-grade-card small {
  margin-top: 4px;
}

.gpa-grade-card.muted {
  background: var(--surface-2);
  box-shadow: none;
}

.gpa-grade-card.muted strong {
  color: var(--muted);
}

.gpa-grade-semesters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.gpa-grade-semesters b {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  display: block;
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-label);
  padding: 5px 7px;
  text-align: center;
}

.gpa-next-card,
.gpa-advice-card {
  display: grid;
  align-content: start;
  gap: 6px;
}

.gpa-advice-card.compact {
  gap: 5px;
}

.gpa-next-card.ready,
.gpa-advice-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.gpa-next-card.watch,
.gpa-advice-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.gpa-next-card.risk,
.gpa-advice-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.gpa-next-card .text-button,
.gpa-advice-card .text-button {
  justify-self: start;
  margin-top: 2px;
}

.gpa-goal-plan-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.gpa-goal-plan-heading {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.gpa-goal-plan-heading.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.gpa-goal-plan-heading.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.gpa-goal-plan-heading.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.gpa-goal-plan-heading span,
.gpa-goal-plan-heading strong,
.gpa-goal-plan-heading p,
.gpa-goal-plan-heading small,
.gpa-goal-plan-card span,
.gpa-goal-plan-card strong,
.gpa-goal-plan-card p,
.gpa-goal-plan-card small {
  display: block;
}

.gpa-goal-plan-heading span,
.gpa-goal-plan-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-goal-plan-heading strong {
  margin-top: 5px;
  font-size: var(--font-size-section-title);
}

.gpa-goal-plan-heading p,
.gpa-goal-plan-heading small,
.gpa-goal-plan-card p,
.gpa-goal-plan-card small {
  color: var(--muted);
  line-height: var(--line-normal);
}

.gpa-goal-plan-heading p,
.gpa-goal-plan-heading small,
.gpa-goal-plan-card p {
  margin: 5px 0 0;
  font-size: var(--font-size-small);
}

.gpa-goal-plan-heading small {
  max-width: 760px;
}

.gpa-goal-plan-note {
  max-width: 900px;
}

.gpa-goal-plan-callout,
.gpa-risk-factor {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  margin-top: 10px;
  max-width: 760px;
  padding: 10px;
}

.gpa-goal-plan-callout.very-high,
.gpa-goal-plan-callout.high,
.gpa-risk-factor.very-high,
.gpa-risk-factor.high {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.gpa-goal-plan-callout.moderate,
.gpa-risk-factor.moderate {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.gpa-goal-plan-callout.low,
.gpa-goal-plan-callout.very-low,
.gpa-risk-factor.low,
.gpa-risk-factor.very-low {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.gpa-goal-plan-callout strong,
.gpa-risk-factor strong {
  font-size: var(--font-size-card-title);
}

.gpa-goal-plan-callout span {
  color: var(--muted);
  display: block;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.gpa-goal-plan-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.gpa-target-detail-drawer {
  margin-top: 10px;
}

.gpa-goal-plan-pool span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
  padding: 5px 8px;
  text-transform: none;
  letter-spacing: 0;
}

.gpa-effort-level-section {
  margin-top: 12px;
}

.gpa-effort-level-section > span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-effort-level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.gpa-effort-level-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.gpa-effort-level-card.very-high,
.gpa-effort-level-card.high {
  border-color: var(--danger-line);
}

.gpa-effort-level-card.moderate {
  border-color: var(--warning-line);
}

.gpa-effort-level-card.low {
  border-color: var(--success-line);
}

.gpa-effort-level-card span,
.gpa-effort-level-card strong,
.gpa-effort-level-card p {
  display: block;
}

.gpa-effort-level-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-effort-level-card strong {
  margin-top: 4px;
  font-size: var(--font-size-card-title);
}

.gpa-effort-level-card p {
  color: var(--muted);
  font-size: var(--font-size-chip);
  line-height: var(--line-normal);
  margin: 5px 0 0;
}

.gpa-goal-plan-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.gpa-goal-plan-action {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.gpa-goal-plan-action span,
.gpa-goal-plan-action strong,
.gpa-goal-plan-action p,
.gpa-goal-plan-action small {
  display: block;
}

.gpa-goal-plan-action span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-goal-plan-action strong {
  margin-top: 4px;
  font-size: var(--font-size-body);
}

.gpa-goal-plan-action p,
.gpa-goal-plan-action small {
  color: var(--muted);
  font-size: var(--font-size-chip);
  line-height: var(--line-normal);
  margin: 5px 0 0;
}

.gpa-goal-plan-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gpa-target-course-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 10px;
}

.gpa-target-course-drawer .gpa-goal-plan-card-grid {
  margin-top: 10px;
}

.gpa-goal-plan-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  padding: 12px;
}

.gpa-goal-plan-card strong {
  margin-top: 6px;
  font-size: var(--font-size-card-title);
}

.gpa-goal-plan-card small {
  margin-top: 5px;
  font-size: var(--font-size-chip);
}

.gpa-advice-detail {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.gpa-advice-detail b {
  display: block;
  color: var(--text);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-label);
}

.gpa-advice-detail p {
  margin-top: 3px;
}

.gpa-advice-detail ol {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-readable);
}

.gpa-advice-detail li + li {
  margin-top: 3px;
}

.gpa-semester-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.gpa-semester-chip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
  padding: 5px 8px;
}

.gpa-semester-chip.muted {
  color: var(--muted);
}

.gpa-course-detail-panel {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 2px;
}

.gpa-record-item {
  padding: 12px;
}

.gpa-record-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: flex-end;
}

.gpa-record-meta {
  gap: 6px;
}

.gpa-course-editor-controls {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.gpa-scenario-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.gpa-scenario-form {
  margin-top: 0;
}

.gpa-combined-advice {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.gpa-subsection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gpa-subsection-heading strong,
.gpa-subsection-heading span {
  display: block;
}

.gpa-subsection-heading strong {
  font-size: var(--font-size-body);
}

.gpa-subsection-heading span {
  color: var(--muted);
  font-size: var(--font-size-chip);
  font-weight: var(--font-weight-strong);
  margin-top: 2px;
}

.gpa-scenario-result {
  border: 1px solid var(--success-line);
  border-radius: 8px;
  background: var(--success-soft);
  margin-top: 10px;
  padding: 12px;
}

/* The overlay is appended to <body>, outside the themed app shell, so
   theme custom props may be unset — every color here carries an
   explicit dark-surface fallback so text is never invisible. */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 620px at 50% -10%, #1c3050 0%, rgba(28, 48, 80, 0) 60%),
    radial-gradient(900px 500px at 50% 110%, #142133 0%, rgba(20, 33, 51, 0) 55%),
    #0a121d;
}

.auth-gate-card {
  width: min(404px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: linear-gradient(180deg, #18293c 0%, #131e2d 100%);
  color: #e8eef6;
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(143, 192, 255, 0.05) inset;
}

.auth-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.auth-gate-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: block;
  box-shadow: 0 8px 22px -8px rgba(143, 192, 255, 0.5);
}

.auth-gate-wordmark {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #f3f7fb;
}

.auth-gate-wordmark-ai {
  color: #8fc0ff;
}

.auth-gate-card h2 {
  margin: 6px 0 0;
  text-align: center;
  font-size: 1.3rem;
  color: #f6f9fc;
}

.auth-gate-card .muted {
  margin: 0 auto;
  max-width: 30ch;
  text-align: center;
  line-height: 1.5;
  color: #9fb0c3;
}

.auth-gate-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-size-compact);
  color: #e8eef6;
}

.auth-gate-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b6c4d6;
}

.auth-gate-optional {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7d8fa6;
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.auth-gate-card input {
  min-height: 46px;
  border: 1px solid #2e3f57;
  border-radius: 10px;
  padding: 0 14px;
  background: #0d1826;
  color: #f3f7fb;
  font-size: 15px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.auth-gate-card input::placeholder {
  color: #5f7388;
}

.auth-gate-card input:focus {
  outline: none;
  border-color: #5da0f0;
  box-shadow: 0 0 0 3px rgba(93, 160, 240, 0.28);
}

.auth-gate-submit {
  margin-top: 4px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #06121f;
  background: linear-gradient(180deg, #9fcaff 0%, #6aa6f3 100%);
  cursor: pointer;
  transition:
    transform 0.06s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  box-shadow: 0 10px 24px -10px rgba(106, 166, 243, 0.7);
}

.auth-gate-submit:hover {
  filter: brightness(1.05);
}

.auth-gate-submit:active {
  transform: translateY(1px);
}

.auth-gate-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(143, 192, 255, 0.45);
}

.auth-gate-submit:disabled {
  filter: grayscale(0.4) brightness(0.85);
  cursor: progress;
}

.auth-gate-foot {
  margin: 2px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #7d8fa6;
}

.auth-gate-msg {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--font-size-compact);
  font-weight: 600;
  color: #8fc0ff;
}

.auth-gate-tabs {
  display: flex;
  gap: 4px;
  background: #0d1826;
  border: 1px solid #2e3f57;
  border-radius: 10px;
  padding: 4px;
}

.auth-gate-tab {
  flex: 1;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #b6c4d6;
  background: transparent;
  cursor: pointer;
}

.auth-gate-tab.is-active {
  background: linear-gradient(180deg, #9fcaff 0%, #6aa6f3 100%);
  color: #06121f;
}

.auth-gate-card select {
  min-height: 46px;
  border: 1px solid #2e3f57;
  border-radius: 10px;
  padding: 0 12px;
  background: #0d1826;
  color: #f3f7fb;
  font-size: 15px;
}

.auth-gate-hint {
  margin: 0;
  font-size: 12px;
  color: #7d8fa6;
}

.approvals-card {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.approvals-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.approvals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approvals-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.approvals-row > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
}

.approvals-row .muted {
  font-size: 12px;
}

.approvals-role {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  padding: 0 6px;
}

.account-access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.account-access-card span {
  display: block;
  font-size: var(--font-size-chip);
  opacity: 0.75;
}

.account-access-card strong {
  font-variant-numeric: tabular-nums;
}

.account-access-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gpa-scenario-planner {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
}

.gpa-scenario-planner-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.gpa-scenario-planner-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 1fr);
  gap: 12px;
}

.gpa-scenario-planner-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-compact);
}

.gpa-scenario-planner-controls output {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gpa-scenario-planner-output {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.gpa-scenario-planner-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gpa-scenario-planner-stat strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.gpa-scenario-planner-goal {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
}

.gpa-scenario-planner-goal.is-ok {
  background: var(--success-soft);
  border: 1px solid var(--success-line);
}

.gpa-scenario-planner-goal.is-watch {
  background: var(--warn-soft, rgba(255, 196, 0, 0.12));
  border: 1px solid var(--warn-line, rgba(255, 196, 0, 0.4));
}

@media (max-width: 640px) {
  .gpa-scenario-planner-controls,
  .gpa-scenario-planner-output {
    grid-template-columns: 1fr;
  }
}

.gpa-scenario-result span,
.gpa-scenario-result strong,
.gpa-scenario-result p {
  display: block;
}

.gpa-scenario-result span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.gpa-scenario-result strong {
  margin-top: 4px;
  font-size: var(--font-size-card-title);
}

.gpa-scenario-result p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.transcript-audit-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.transcript-audit-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.transcript-audit-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.gpa-opportunity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.gpa-opportunity-card span {
  margin-top: 4px;
  font-weight: var(--font-weight-strong);
}

.gpa-reference h3 {
  margin: 0 0 12px;
  font-size: var(--font-size-card-title);
}

.reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reference-grid div {
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px;
}

.reference-grid strong,
.reference-grid span {
  display: block;
}

.reference-grid span {
  color: var(--muted);
  margin-top: 4px;
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.course-controls,
.assignment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.assignment-plan-note {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-normal);
  margin-top: 10px;
  padding: 8px 10px;
}

.stepper {
  display: inline-grid;
  grid-template-columns: var(--control-height-sm) 54px var(--control-height-sm);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.stepper button {
  align-items: center;
  border: 0;
  background: var(--surface-2);
  display: inline-flex;
  height: var(--control-height-sm);
  justify-content: center;
  line-height: var(--line-tight);
  padding: 0;
}

.stepper span {
  text-align: center;
  font-weight: var(--font-weight-label);
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.daily-brief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.today-readiness-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.today-readiness-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.today-readiness-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.today-readiness-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.today-readiness-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.today-readiness-card span,
.today-readiness-card strong,
.today-readiness-card p {
  display: block;
}

.today-readiness-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.today-readiness-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.smart-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.smart-action {
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 9px;
  align-content: space-between;
}

.smart-action span,
.smart-action strong,
.smart-action p {
  display: block;
}

.smart-action span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.smart-action strong {
  font-size: var(--font-size-card-title);
}

.smart-action p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.app-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.app-overview-card {
  border-left: 4px solid var(--line);
}

.app-overview-card.ready {
  border-left-color: var(--success);
}

.app-overview-card.watch {
  border-left-color: var(--warning);
}

.app-overview-card.risk {
  border-left-color: var(--danger);
}

.app-overview-card span,
.app-overview-card strong,
.app-overview-card p {
  display: block;
}

.app-overview-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.app-overview-card strong {
  font-size: var(--font-size-card-title);
}

.app-overview-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.brief-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
}

.brief-card span,
.brief-card strong,
.brief-card p {
  display: block;
}

.brief-card span {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-caption);
  letter-spacing: var(--tracking-label);
}

.brief-card strong {
  margin-top: 8px;
}

.brief-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: var(--line-relaxed);
}

.lazy-panel {
  border-color: var(--info-line);
}

.lazy-command {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: center;
}

.readiness-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
}

.readiness-item strong,
.readiness-item span {
  display: block;
}

.readiness-item span {
  margin-top: 4px;
  color: var(--muted);
  font-weight: var(--font-weight-label);
}

.study-workbench,
.roadmap-settings-form,
.integration-config-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.pdf-grader-workbench {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) minmax(220px, 1fr);
  margin-top: 14px;
}

.pdf-grader-workbench label {
  align-content: start;
  display: grid;
  gap: 6px;
  grid-template-rows: 1rem auto;
  min-width: 0;
}

.pdf-grader-workbench label > span {
  align-items: center;
  display: flex;
  min-height: 1rem;
}

.pdf-grader-workbench textarea {
  min-height: 86px;
}

.pdf-grader-workbench .compact-form-action {
  align-self: end;
  min-height: var(--control-height-md);
}

.pdf-extract-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.pdf-extract-panel textarea {
  min-height: 170px;
  resize: vertical;
}

.pdf-warning-list {
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.pdf-warning-list p,
.pdf-study-recommendations p {
  margin: 0;
}

.pdf-study-recommendations {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 14px;
}

.pdf-question-grid {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.pdf-question-review {
  align-items: start;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.45fr);
  padding: 12px 14px;
}

.pdf-question-review.correct {
  border-color: var(--success-line);
}

.pdf-question-review.wrong,
.pdf-question-review.skipped {
  border-color: var(--warning-line);
}

.pdf-question-review span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.pdf-question-review strong {
  color: var(--ink);
  display: block;
  margin-top: 2px;
  text-transform: capitalize;
}

.pdf-answer-review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 10px 12px;
}

.pdf-answer-review p + p {
  margin-top: 6px;
}

.study-workbench {
  align-items: start;
  grid-template-columns: minmax(170px, 230px) minmax(260px, 460px) minmax(320px, 1fr) minmax(120px, 150px) minmax(150px, 190px);
}

.roadmap-settings-form,
.integration-config-form {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
}

.study-workbench textarea {
  min-height: 66px;
}

.study-workbench label {
  align-content: start;
  grid-template-rows: 1rem auto;
  min-width: 0;
}

.study-workbench label > span {
  align-items: center;
  display: flex;
  min-height: 1rem;
}

.study-workbench .primary-button,
.roadmap-settings-form .primary-button,
.integration-config-form .primary-button {
  align-self: end;
  min-height: var(--control-height-md);
  padding-inline: 12px;
  white-space: nowrap;
}

.study-workbench .compact-form-action {
  align-self: start;
  margin-top: calc(1rem + 5px);
  width: 100%;
}

.study-workbench .study-source-file {
  align-self: start;
  justify-content: center;
  margin-top: calc(1rem + 5px);
  min-height: var(--control-height-md);
  width: 100%;
}

@media (max-width: 1280px) {
  .study-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdf-grader-workbench {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-workbench label:nth-child(3) {
    grid-column: 1 / -1;
  }

  .study-workbench .compact-form-action {
    margin-top: 0;
  }

  .study-workbench .study-source-file {
    margin-top: 0;
  }
}

.canvas-study-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.canvas-study-header,
.canvas-study-card {
  align-items: center;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 14px;
}

.canvas-study-header {
  background: var(--info-soft);
  border-color: var(--info-line);
}

.canvas-study-card.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.canvas-study-card.watch {
  background: var(--warning-soft);
  border-color: var(--warning-line);
}

.canvas-study-card.selected {
  box-shadow: inset 4px 0 0 var(--accent);
}

.canvas-study-header span,
.canvas-study-card span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.canvas-study-header strong,
.canvas-study-card strong {
  color: var(--ink);
  display: block;
  font-size: var(--font-size-body-lg);
  margin-top: 2px;
}

.canvas-study-card p {
  color: var(--muted);
  margin-top: 4px;
}

.canvas-study-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.canvas-study-actions > span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  padding: 7px 10px;
  white-space: nowrap;
}

.canvas-study-actions > .selected-pill {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.canvas-study-header .text-button,
.canvas-study-actions .text-button {
  min-width: 116px;
}

@media (max-width: 760px) {
  .pdf-grader-workbench,
  .pdf-question-review {
    grid-template-columns: 1fr;
  }

  .canvas-study-header,
  .canvas-study-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .canvas-study-actions {
    justify-content: flex-start;
  }
}

.ai-test-dashboard,
.ai-test-runner,
.ai-test-results,
.ai-results-dashboard {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
}

.ai-test-dashboard,
.ai-test-results,
.ai-results-dashboard {
  background: var(--surface-3);
}

.ai-test-dashboard-grid,
.ai-results-grid,
.test-topic-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.test-stat-card,
.test-topic-card,
.test-review-card,
.test-score-hero,
.adaptive-review-card,
.attempt-history-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.test-topic-card > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-stat-card span,
.test-topic-card span,
.test-review-card span,
.adaptive-review-card span,
.attempt-history-card span,
.ai-test-runner-header span,
.test-question-head span,
.test-score-hero span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.test-stat-card strong,
.test-topic-card strong,
.adaptive-review-card strong,
.attempt-history-card strong {
  display: block;
  font-size: var(--font-size-section-title);
  margin: 4px 0;
}

.ai-test-setup-row {
  align-items: end;
  display: grid;
  gap: 10px;
  /* Fixed 8-column grid with 140px min per column summed to ~1040px+ and
   * overflowed the workspace, pushing the row under the right rail (so the
   * Start/Create buttons and the RANDOMIZE checkbox were visually blocked
   * by the rail). auto-fit wraps fields onto multiple lines whenever the
   * container is too narrow to hold them all. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.ai-test-setup-row label {
  color: var(--muted);
  display: grid;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  gap: 5px;
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.ai-test-setup-row .inline-check {
  align-items: center;
  align-self: center;
  display: flex;
  min-height: var(--control-height-md);
}

.ai-test-board,
.ai-test-section {
  display: grid;
  gap: 10px;
}

.ai-test-card-grid {
  display: grid;
  gap: 6px;
  /* Stack rows vertically. Each row (.ai-test-row) is already a horizontal
   * one-liner with its own internal columns (version · type · meta · scores
   * · Start). A 2-column outer grid was clipping the right column's Start
   * button against the workspace edge — students saw rows with no action. */
  grid-template-columns: minmax(0, 1fr);
}

.ai-test-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ai-test-card.selected {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}

.ai-test-card > div:first-child span,
.ai-test-card-meta span {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
}

.ai-test-card > div:first-child strong {
  display: block;
  margin-top: 3px;
}

.ai-test-card-meta,
.ai-test-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-test-card-meta span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
}

.test-ready-note,
.test-save-note,
.test-rubric-note,
.rubric-score {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
}

.ai-test-runner {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}

.ai-test-runner-header,
.test-score-hero {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.test-timer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 112px;
  padding: 10px 12px;
  text-align: center;
}

.test-timer strong,
.test-score-hero strong {
  display: block;
  font-size: var(--font-size-score);
}

.test-timer.risk {
  border-color: var(--danger-line);
  color: var(--danger);
}

.ai-test-question-area,
.test-review-grid {
  display: grid;
  gap: 12px;
}

.question-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-palette-button {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 10px;
}

.question-palette-button.answered {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.question-palette-button.marked {
  background: var(--warning-soft);
  border-color: var(--warning-line);
}

.question-palette-button.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ai-test-question-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.test-question-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.test-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.test-chip-row span {
  background: var(--blue-soft);
  border-radius: 999px;
  color: var(--blue);
  padding: 5px 8px;
}

.test-choice-list {
  display: grid;
  gap: 8px;
}

.test-choice-list.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matching-answer-grid,
.ordering-answer-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matching-answer-grid label,
.ordering-answer-grid label {
  display: grid;
  gap: 5px;
}

.test-choice {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  gap: 8px;
  min-height: var(--control-height-md);
  padding: 8px 10px;
}

.test-answer-input,
.test-answer-box {
  width: 100%;
}

.test-answer-box {
  min-height: 120px;
}

.ai-test-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.test-save-note {
  margin-right: auto;
}

.mark-review-button {
  justify-self: start;
}

.mark-review-button.active {
  background: var(--warning-soft);
  border-color: var(--warning-line);
}

.test-review-card {
  display: grid;
  gap: 8px;
}

.score-trend {
  align-items: end;
  display: flex;
  gap: 5px;
  min-height: 46px;
}

.score-trend-bar {
  align-items: end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  height: 42px;
  overflow: hidden;
  width: 14px;
}

.score-trend-bar i {
  background: var(--accent);
  display: block;
  height: var(--score);
  width: 100%;
}

.adaptive-review-card,
.attempt-history-card {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.adaptive-review-card {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}

.adaptive-review-steps,
.attempt-history-list {
  display: grid;
  gap: 10px;
}

.adaptive-review-steps {
  min-width: min(420px, 100%);
}

.adaptive-review-steps div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.pagination-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.pagination-row span {
  color: var(--muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-label);
}

@media (max-width: 980px) {
  .ai-test-dashboard-grid,
  .ai-results-grid,
  .test-topic-grid,
  .ai-test-card-grid,
  .matching-answer-grid,
  .ordering-answer-grid,
  .ai-test-setup-row {
    grid-template-columns: 1fr;
  }

  .adaptive-review-card,
  .attempt-history-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
}

.study-output-grid,
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.study-pack-output {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  min-width: 0;
}

.study-card {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

.study-card.ready {
  background: var(--success-soft);
  border-color: var(--success-line);
}

.study-card.watch,
.study-card.info {
  background: var(--info-soft);
  border-color: var(--info-line);
}

.study-card.risk {
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.study-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.study-section-title {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 14px;
}

.study-section-title.compact {
  margin-top: 12px;
}

.study-section-title span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.study-section-title strong {
  color: var(--ink);
  display: block;
  font-size: var(--font-size-body-lg);
  margin-top: 2px;
}

.study-section-title small {
  color: var(--muted);
  font-weight: var(--font-weight-label);
  text-align: right;
}

.study-pack-summary {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 12px;
  padding: 14px;
}

.study-pack-summary span,
.study-subsection-title {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.study-pack-summary p {
  color: var(--ink);
  font-weight: var(--font-weight-label);
  margin-top: 4px;
}

.study-subsection-title {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.study-plan-grid,
.study-guide-grid,
.study-test-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.study-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.study-guide-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.study-test-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.study-plan-step,
.study-guide-section {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 14px;
}

.study-plan-step span {
  color: var(--muted);
  display: block;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-subtle);
  text-transform: uppercase;
}

.study-plan-step strong {
  color: var(--accent);
  display: block;
  font-size: var(--font-size-body-lg);
  margin-top: 4px;
}

.study-plan-step p {
  color: var(--muted);
  margin-top: 6px;
}

.study-guide-section h3 {
  color: var(--ink);
  font-size: var(--font-size-body-lg);
  margin-bottom: 8px;
}

.study-guide-section ul,
.study-choices {
  color: var(--muted);
  display: grid;
  gap: 6px;
  margin-left: 18px;
}

.study-choices {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .study-plan-grid,
  .study-guide-grid,
  .study-test-grid {
    grid-template-columns: 1fr;
  }

  .study-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

.agent-grid,
.integration-grid,
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.agent-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 20px;
}

.study-now-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.study-now-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.study-now-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.study-now-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.study-now-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.study-now-card span,
.study-now-card strong,
.study-now-card p {
  display: block;
}

.study-now-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.study-now-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.student-next-grid,
.student-schedule-grid,
.weekly-review-grid,
.qa-check-grid,
.meeting-check-grid,
.graduation-summary-grid,
.next-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.compact-metric,
.schedule-snapshot-card,
.qa-check-card,
.meeting-check-card,
.graduation-card,
.next-step-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.compact-metric span,
.compact-metric strong,
.compact-metric p,
.schedule-snapshot-card span,
.schedule-snapshot-card strong,
.schedule-snapshot-card p,
.qa-check-card span,
.qa-check-card strong,
.qa-check-card p,
.meeting-check-card span,
.meeting-check-card strong,
.meeting-check-card p,
.graduation-card span,
.graduation-card strong,
.graduation-card p,
.next-step-card span,
.next-step-card strong,
.next-step-card p {
  display: block;
}

.compact-metric span,
.schedule-snapshot-card > span,
.qa-check-card span,
.meeting-check-card span,
.graduation-card span,
.next-step-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.compact-metric strong,
.schedule-snapshot-card strong,
.qa-check-card strong,
.meeting-check-card strong,
.graduation-card strong,
.next-step-card strong {
  margin-top: 6px;
  font-size: var(--font-size-card-title);
}

.compact-metric p,
.schedule-snapshot-card p,
.qa-check-card p,
.meeting-check-card p,
.graduation-card p,
.next-step-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 4px 0 0;
}

.qa-check-card.ready,
.meeting-check-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.qa-check-card.watch,
.meeting-check-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.schedule-snapshot-card button {
  margin-top: 10px;
}

.next-step-card button {
  margin-top: 10px;
}

.unit-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px;
}

.unit-card strong,
.unit-card p {
  display: block;
}

.agent-card,
.integration-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.integration-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.integration-readiness-card,
.integration-meta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
}

.integration-readiness-card {
  display: grid;
  gap: 8px;
}

.integration-readiness-card span,
.integration-readiness-card strong,
.integration-readiness-card p,
.integration-meta span {
  display: block;
}

.integration-readiness-card span,
.integration-meta span:first-child {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.integration-readiness-card strong {
  font-size: var(--font-size-section-title);
}

.integration-readiness-card p,
.integration-meta span:last-child {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.integration-meta {
  display: grid;
  gap: 5px;
  box-shadow: none;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.agent-card.active-agent {
  border-color: var(--highlight);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
}

.agent-command-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.agent-command-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.agent-command-card.active {
  border-color: var(--highlight);
  background: var(--accent-soft);
}

.agent-command-card span,
.agent-command-card strong,
.agent-command-card p {
  display: block;
}

.agent-command-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.agent-command-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.agent-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-console,
.agent-chat {
  display: grid;
  gap: 12px;
}

.agent-message {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 14px;
}

.agent-message span,
.agent-message strong,
.agent-message p {
  display: block;
}

.agent-message span {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: var(--font-weight-label);
  font-size: var(--font-size-caption);
  letter-spacing: var(--tracking-label);
}

.agent-message strong {
  margin-top: 6px;
}

.agent-message p {
  color: var(--muted);
  line-height: var(--line-relaxed);
  margin: 6px 0 0;
}

.data-intake-panel {
  margin-top: 16px;
}

.onboarding-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.onboarding-action-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 7px;
}

.onboarding-action-card.ready {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.onboarding-action-card.watch {
  border-color: var(--warning-line);
  background: var(--warning-soft);
}

.onboarding-action-card.risk {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.onboarding-action-card span,
.onboarding-action-card strong,
.onboarding-action-card p {
  display: block;
}

.onboarding-action-card span {
  color: var(--muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.onboarding-action-card p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.onboarding-action-card button {
  justify-self: start;
}

.compact-heading {
  align-items: center;
  margin-bottom: 12px;
}

.data-intake-grid {
  display: grid;
  gap: 10px;
}

.data-intake-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.data-intake-card.done {
  background: var(--success-soft);
}

.data-intake-card strong,
.data-intake-card span,
.data-intake-card p {
  display: block;
}

.data-intake-card span {
  color: var(--muted);
  margin-top: 3px;
}

.data-intake-card p {
  color: var(--muted);
  line-height: var(--line-readable);
  margin: 5px 0 0;
}

.agent-card h2,
.integration-card h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
}

.agent-card p,
.integration-card p {
  color: var(--muted);
  line-height: var(--line-relaxed);
  margin: 0;
}

.agent-output {
  margin-top: auto;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 12px;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-relaxed);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.environment-notice {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 4px 14px;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  margin: 12px 0;
  padding: 12px 14px;
}

.environment-notice strong {
  color: var(--text);
  font-size: var(--font-size-body);
}

.environment-notice span,
.environment-notice small {
  color: var(--muted);
  min-width: 0;
}

.environment-notice small {
  grid-column: 1 / -1;
}

.environment-notice.prod {
  border-left-color: var(--success);
}

.environment-notice.test {
  border-left-color: var(--warning);
}

.data-safety-status {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 12px 0;
}

.data-safety-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.data-safety-card.ready {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
}

.data-safety-card.watch {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 30%, var(--line));
}

.data-safety-card span,
.data-safety-card strong {
  display: block;
}

.data-safety-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-tight);
  text-transform: uppercase;
}

.backup-version-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 12px 0;
}

.backup-preview-panel,
.restore-preview-panel {
  margin: 12px 0;
}

.restore-preview-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 12px;
  padding: 14px;
}

.restore-preview-card.ready {
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
  background: var(--success-soft);
}

.restore-preview-card.watch {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  background: var(--warning-soft);
}

.restore-preview-header,
.restore-preview-compare,
.restore-preview-actions {
  display: grid;
  gap: 8px;
}

.restore-preview-header span,
.restore-preview-compare span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-tight);
  text-transform: uppercase;
}

.restore-preview-header strong,
.restore-preview-compare strong {
  color: var(--text);
  font-size: var(--font-size-body-lg);
}

.restore-preview-header small,
.restore-preview-compare p {
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-normal);
  margin: 0;
}

.restore-preview-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restore-preview-compare > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  padding: 12px;
}

.restore-preview-warnings {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: var(--line-normal);
}

.restore-preview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.data-safety-card strong {
  color: var(--text);
  font-size: var(--font-size-body);
  line-height: var(--line-normal);
  margin-top: 6px;
}

.workspace-footer {
  align-items: stretch;
  color: var(--muted);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 16px;
  padding-bottom: 18px;
}

.workspace-footer-item {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
}

.workspace-footer-item b {
  color: var(--muted);
  font-size: var(--font-size-small);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.workspace-footer-item strong {
  color: var(--text);
  font-size: var(--font-size-body);
}

.workspace-footer-item small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-log-list {
  display: grid;
  gap: 10px;
}

.maintenance-log-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.maintenance-log-item span,
.maintenance-log-item strong {
  display: block;
}

.maintenance-log-item span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.maintenance-log-item strong {
  margin-top: 5px;
  line-height: var(--line-normal);
}

.handoff-report {
  white-space: pre-wrap;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--ink);
  padding: 16px;
  line-height: var(--line-relaxed);
  font: 0.9rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  max-height: 420px;
}

.compact-actions {
  margin: 8px 0 12px;
}

.toolbar-spacer {
  flex: 1 1 16px;
}

.file-button {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  color: var(--ink);
  position: relative;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}/* Cross-page normalization: keep every screen on the same control,
card,
and collapse rhythm. */
.panel :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])),
.dialog-card :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])),
.entry-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])),
.quick-capture :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select:not([multiple])) {
  height: var(--control-height-md);
  min-height: var(--control-height-md);
}

.panel :where(textarea),
.dialog-card :where(textarea) {
  min-height: 110px;
}

.panel :where(select:not([multiple])),
.dialog-card :where(select:not([multiple])),
.entry-form :where(select:not([multiple])),
.quick-capture :where(select:not([multiple])) {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  padding-right: 32px;
}

.section-heading,
.gpa-collapse-header,
.four-year-add-drawer summary,
.four-year-tools-drawer summary,
.four-year-checks-drawer summary,
.dashboard-tools-drawer summary,
.helper-drawer summary,
.profile-tools-drawer summary,
.profile-advanced-drawer summary,
.profile-diagnostics-drawer summary,
.award-starter-drawer summary,
.student-tools-drawer summary {
  min-width: 0;
}

.section-heading > div,
.gpa-collapse-header > div,
.four-year-add-drawer summary > span,
.four-year-tools-drawer summary > span,
.four-year-checks-drawer summary > span,
.award-starter-drawer summary > span,
.student-tools-drawer summary > span {
  min-width: 0;
}

.section-actions,
.settings-actions,
.gpa-collapse-actions,
.school-row-actions,
.year-actions,
.gpa-record-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.section-actions :where(button, .file-button),
.settings-actions :where(button, .file-button),
.gpa-collapse-actions :where(button, .file-button),
.school-row-actions :where(button, .file-button),
.year-actions :where(button, .file-button),
.gpa-record-actions :where(button, .file-button) {
  min-height: var(--control-height-md);
}

:where(.item, .maintenance-card, .brief-card, .next-step-card, .award-record-card, .award-status-card, .award-progress-card, .award-guide-card, .award-readiness-card, .award-audit-card, .award-action-card, .award-pace-card, .award-month-card, .award-slot-card, .award-starter-card, .award-goal-coverage-card, .product-quality-card, .gpa-summary-card, .gpa-grade-card, .gpa-next-card, .gpa-advice-card, .gpa-opportunity-card, .school-day-card, .day-task, .agent-command-card, .agent-card, .import-health-card, .qa-check-card, .launch-card) {
  min-width: 0;
}

:where(.item, .maintenance-card, .brief-card, .next-step-card, .award-record-card, .product-quality-card, .gpa-summary-card, .gpa-grade-card, .gpa-next-card, .gpa-advice-card, .school-day-card, .day-task) :where(strong, h3, p, span) {
  overflow-wrap: anywhere;
}

.empty-state {
  border: 1px solid var(--info-line);
  border-radius: 8px;
  color: var(--info);
  line-height: var(--line-normal);
  padding: 12px 14px;
}
/* Generic stacked layout so every shared .empty-state (title + desc)
   renders consistently app-wide — matches the Class-schedule/College
   empties without needing a per-component class. */
.empty-state > strong { display: block; font-size: var(--font-size-body); color: var(--text); margin: 0; }
.empty-state > p { margin: 4px 0 0; color: var(--muted); font-size: var(--font-size-small); }

dialog {
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--nav) 28%, transparent);
}

dialog::backdrop {
  background: color-mix(in srgb, var(--nav) 44%, transparent);
}

.dialog-card {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  display: grid;
  gap: 12px;
}

.dialog-card h2 {
  margin-bottom: 6px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.ai-provider-banner {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-soft), var(--surface));
  padding: 14px 16px;
  margin: 14px 0;
}

.ai-provider-banner span,
.local-ai-command-grid span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ai-provider-banner strong {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-card-title);
  line-height: var(--line-snug);
  margin-top: 3px;
}

.ai-provider-banner p {
  color: var(--muted);
  line-height: var(--line-readable);
  margin: 6px 0 0;
}

.compact-heading {
  margin-bottom: 14px;
}

.local-ai-setup {
  margin-top: 12px;
}

.local-ai-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.local-ai-command-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-3);
  padding: 12px;
  min-width: 0;
}

.local-ai-command-grid code {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-small);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .ap-summary-grid,
  .ap-subject-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ap-tutor-controls,
  .ap-session-card,
  .ap-output-grid,
  .ap-rubric-grid,
  .local-ai-command-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ap-tutor-controls .compact-form-action {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .ai-provider-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .ap-summary-grid,
  .ap-subject-grid,
  .ap-practice-status,
  .ap-tutor-actions,
  .ap-tutor-controls,
  .ap-session-card,
  .ap-output-grid,
  .ap-rubric-grid,
  .local-ai-command-grid {
    grid-template-columns: 1fr;
  }

  .ap-tutor-controls .compact-form-action {
    grid-column: auto;
  }

  .ap-practice-panel {
    grid-row: auto;
  }
}

.hidden {
  display: none !important;
}

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

.sidebar {
    align-self: start;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 14px;
    gap: 10px;
  }

.brand {
    min-height: var(--control-height-md);
  }

.brand-mark {
    height: var(--control-height-md);
    width: var(--control-height-md);
  }

.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border, rgba(255,255,255,0.16));
    border-radius: 8px;
    background: transparent;
    color: var(--nav-text);
    font-size: var(--font-size-body);
    cursor: pointer;
  }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
  }

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-list {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
  }

.sidebar.nav-open .nav-list {
    display: flex;
  }

.sidebar.nav-open .nav-toggle {
    margin-bottom: 4px;
  }

.nav-item {
    min-height: 44px;
    padding: 11px 14px;
    font-size: var(--font-size-body);
    text-align: left;
  }

.sidebar-panel {
    display: none;
  }

.workspace {
    padding: 20px;
    padding-bottom: 96px;
  }

.section-heading {
    align-items: flex-start;
  }

.section-actions,
.settings-actions,
.schedule-toolbar {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

.metric-grid,
.dashboard-layout,
.two-column,
.parent-grid,
.alert-strip,
.setup-checklist,
.app-overview-grid,
.daily-brief,
.lazy-command,
.ap-catalog-grid,
.agent-command-layout,
.agent-grid,
.integration-grid,
.integration-readiness-grid,
.study-output-grid,
.roadmap-grid,
.study-workbench,
.roadmap-settings-form,
.integration-config-form,
.milestone-grid,
.onboarding-action-grid,
.school-day-grid,
.import-layout,
.import-health-grid,
.import-history-grid,
.maintenance-grid,
.product-quality-grid,
.calendar-load-grid,
.calendar-day-action-grid,
.plan-health-grid,
.plan-impact-grid,
.ap-readiness-summary,
.ap-sprint-grid,
.ap-score-outlook-grid,
.ap-portfolio-grid,
.ap-meeting-prep-grid,
.ap-weekly-loop-grid,
.ap-calendar-pressure-grid,
.ap-exam-plan-grid,
.ap-exam-checklist-grid,
.student-next-grid,
.student-schedule-grid,
.weekly-review-grid,
.qa-check-grid,
.meeting-check-grid,
.graduation-summary-grid,
.ap-load-grid,
.next-step-grid,
.gpa-status-banner,
.gpa-trust-grid,
.gpa-summary-grid,
.gpa-next-grid,
.gpa-effort-level-grid,
.gpa-goal-plan-actions,
.gpa-goal-plan-card-grid,
.transcript-audit-grid,
.plan-warning-list,
.fisd-calendar-summary,
.fisd-calendar-list,
.today-readiness-grid,
.award-summary-grid,
.award-readiness-grid,
.award-audit-grid,
.award-action-grid,
.award-pace-grid,
.award-requirement-strip,
.award-month-grid,
.award-goal-slots,
.award-starter-grid,
.award-goal-coverage-grid,
.award-setup-form,
.award-goal-form,
.award-log-form,
.award-expedition-form,
.study-workbench,
.roadmap-settings-form,
.integration-config-form,
.data-safety-status,
.backup-version-grid,
.restore-preview-compare,
.four-year-grid {
    grid-template-columns: 1fr;
  }

.school-period-row {
    grid-template-columns: 124px minmax(180px, 1fr) auto;
  }

.school-row-actions {
    grid-column: 3;
  }

.school-row-meta {
    grid-column: 2 / 3;
    justify-content: flex-start;
  }

.smart-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.entry-form,
.quick-capture {
    grid-template-columns: 1fr 1fr;
  }

.four-year-add-drawer .quick-capture {
    grid-template-columns: 1fr 1fr;
  }

.entry-form > .primary-button,
.quick-capture > .primary-button,
.quick-capture .add-course-action {
    grid-column: span 2;
  }

.award-goal-form > *,
.award-log-form > *,
.award-expedition-form > *,
.study-workbench > *,
.roadmap-settings-form > *,
.integration-config-form > * {
    grid-column: auto !important;
  }

}

@media (max-width: 640px) {.topbar,
.section-heading,
.item-row,
.four-year-toolbar,
.plan-course-preview,
.data-intake-card,
.gpa-opportunity-card {
    align-items: stretch;
    flex-direction: column;
  }

.data-intake-card,
.gpa-opportunity-card {
    grid-template-columns: 1fr;
  }

.topbar-actions {
    width: 100%;
  }

.search {
    width: 100%;
  }

.metric-grid,
.entry-form,
.quick-capture,
.readiness-grid,
.reference-grid,
.focus-momentum-grid,
.onboarding-action-grid,
.calendar-load-grid,
.calendar-day-action-grid,
.import-history-grid,
.ap-readiness-summary,
.ap-sprint-grid,
.ap-score-outlook-grid,
.ap-portfolio-grid,
.ap-meeting-prep-grid,
.ap-weekly-loop-grid,
.ap-calendar-pressure-grid,
.ap-exam-plan-grid,
.ap-exam-checklist-grid,
.student-next-grid,
.student-schedule-grid,
.weekly-review-grid,
.today-readiness-grid,
.award-summary-grid,
.award-readiness-grid,
.award-audit-grid,
.award-action-grid,
.award-pace-grid,
.award-requirement-strip,
.award-month-grid,
.award-goal-slots,
.award-starter-grid,
.award-goal-coverage-grid,
.award-setup-form,
.award-goal-form,
.award-log-form,
.award-expedition-form,
.study-output-grid,
.roadmap-grid,
.study-workbench,
.roadmap-settings-form,
.integration-config-form,
.gpa-trust-grid,
.data-safety-status,
.backup-version-grid,
.restore-preview-compare,
.workspace-footer,
.plan-health-strip,
.product-quality-grid,
.qa-check-grid,
.meeting-check-grid,
.graduation-summary-grid,
.ap-load-grid,
.next-step-grid {
    grid-template-columns: 1fr;
  }

.entry-form > .primary-button,
.quick-capture > .primary-button,
.quick-capture .add-course-action {
    grid-column: auto;
  }

.award-goal-form > *,
.award-log-form > *,
.award-expedition-form > *,
.study-workbench > *,
.roadmap-settings-form > *,
.integration-config-form > * {
    grid-column: auto !important;
  }

.award-action-card {
    grid-template-columns: 1fr;
  }

.award-action-card .text-button {
    width: 100%;
  }

.school-period-row,
.school-day-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

.school-row-actions,
.school-row-meta {
    grid-column: auto;
    justify-content: flex-start;
  }

.school-work-stack,
.school-work-stack p {
    justify-items: start;
    text-align: left;
  }

.four-year-add-drawer .quick-capture {
    grid-template-columns: 1fr;
  }

.workspace {
    padding: 16px;
    padding-bottom: 88px;
  }

.nav-item {
    font-size: var(--font-size-compact);
    padding: 9px 10px;
  }

.four-year-toolbar .segmented-control {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

.four-year-toolbar .filter-chip {
    font-size: var(--font-size-chip);
    padding-inline: 8px;
    white-space: normal;
  }

.section-actions button,
.settings-actions button,
.settings-actions .file-button,
.schedule-toolbar .filter-chip {
    flex: 1 1 min(190px, 100%);
  }

.smart-action-grid {
    grid-template-columns: 1fr;
  }

.smart-action {
    min-height: 0;
  }

.year-course {
    padding: 12px;
  }

}

@media (max-width: 480px) {.nav-list,
.four-year-toolbar .segmented-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.year-course {
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-areas:
      "course remove"
      "meta meta"
      "status status";
  }

.year-course.compact-plan-course {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "course"
      "meta"
      "status"
      "editor";
  }

.compact-plan-course .year-course-actions,
.year-course-editor {
    justify-content: flex-start;
  }

}

/* ============================================================
   Study view redesign — sticky hero + two-column layout
   ============================================================ */

#studyView.view.active {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  align-content: start;
}

.study-hero {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  /* minmax(0,1fr) lets the controls column shrink below its content's
     intrinsic width (long <select> option text) instead of forcing
     page-level horizontal scroll on phone/tablet. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding: 14px 18px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  backdrop-filter: saturate(140%) blur(6px);
}

/* When the hero is wrapped inside a unified page panel (Four-Year overview),
   shed its own card chrome so it reads as a plain in-panel control row like
   the panel-first views (Calendar/Award) — no double border, no sticky-in-
   panel breakage, no blur. Inner grid/controls layout is preserved. */
.view-overview-panel .study-hero,
.view-overview-panel .study-hero[data-fsm-state] {
  position: static;
  z-index: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.view-overview-panel .ap-countdown-strip { margin-top: 0; }

.study-hero[data-fsm-state="empty"] { border-color: rgba(245, 158, 11, 0.35); background: linear-gradient(180deg, rgba(254, 243, 199, 0.45), rgba(255,255,255,0)); }
.study-hero[data-fsm-state="attempting"] { border-color: rgba(99, 102, 241, 0.5); }

.study-hero-controls {
  display: grid;
  /* minmax(0,…) so tracks can shrink; selects below get min-width:0 +
     width:100% so a long option name can't blow out the layout. */
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.study-hero-controls > label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.study-hero-controls > label > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.study-hero-controls > label > select {
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.study-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 200px;
}

.bank-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--muted, #475569);
  border: 1px solid transparent;
  white-space: nowrap;
}

.bank-badge[data-state="missing"]  { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.35); }
.bank-badge[data-state="ready"]    { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.35); }
.bank-badge[data-state="stale"]    { background: rgba(249, 115, 22, 0.12); color: #c2410c; border-color: rgba(249, 115, 22, 0.35); }
.bank-badge[data-state="error"]    { background: rgba(239, 68, 68, 0.12);  color: #b91c1c; border-color: rgba(239, 68, 68, 0.35); }
.bank-badge[data-state="building"] { background: rgba(99, 102, 241, 0.12); color: #4338ca; border-color: rgba(99, 102, 241, 0.35); }

.study-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 200px;
}

.study-hero-actions .primary-button {
  font-size: 14px;
  padding: 10px 16px;
  white-space: nowrap;
}

.study-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.06));
  border-radius: 12px;
}

.study-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #475569);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
}

.study-status-chip strong {
  color: var(--text, #0f172a);
  font-weight: 700;
}

.study-status-chip[data-level="warn"] { border-color: rgba(245, 158, 11, 0.4); }
.study-status-chip[data-level="risk"] { border-color: rgba(239, 68, 68, 0.4); }
.study-status-chip[data-level="good"] { border-color: rgba(16, 185, 129, 0.4); }

.study-layout {
  display: grid;
  /* Workspace must keep at least ~480px so test-library rows (28px version +
   * type label + meta + scores + Start) don't overflow into the rail. The
   * @media breakpoint below collapses the layout to one column on anything
   * narrower than ~1180px so the rail never squeezes the workspace. */
  grid-template-columns: minmax(480px, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.study-workspace {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.study-workspace .study-pack-output {
  background: var(--surface-raised, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 8px;
  padding: 0;
  min-height: 60px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.study-workspace .study-pack-output::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--section-accent, var(--accent));
  opacity: 0.92;
  z-index: 1;
}

.study-workspace .study-pack-output:empty {
  display: none;
}

.study-history {
  background: var(--surface-raised, #ffffff);
  border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
  border-radius: 8px;
  padding: 14px 14px 18px;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  box-shadow: var(--shadow-soft);
}

.study-history::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--section-accent, var(--accent));
  opacity: 0.92;
  z-index: 1;
}

.study-history h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  margin: 0;
}

.study-history-section {
  display: grid;
  gap: 8px;
}

.study-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.06));
  background: var(--surface-soft, #f8fafc);
  min-height: 36px;
}

.study-history-row .score {
  font-weight: 700;
  color: var(--text, #0f172a);
  font-size: 12px;
}

.study-history-row .meta {
  color: var(--muted, #64748b);
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.study-history-row .meta strong {
  color: var(--text, #0f172a);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.study-history-row .meta-when {
  color: var(--muted, #94a3b8);
  font-size: 11px;
  flex-shrink: 0;
}

.study-history-row .text-button {
  padding: 4px 10px;
  font-size: 12px;
}

.study-history-row[data-tone="weak"] {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.study-history-row[data-tone="good"] {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
}

.study-history-empty {
  color: var(--muted, #64748b);
  font-size: 13px;
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--border-color, rgba(15, 23, 42, 0.1));
  border-radius: 10px;
}

.study-advanced {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 4px 14px;
}

.study-advanced > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 4px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted, #475569);
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-advanced > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 0.15s ease;
}

.study-advanced[open] > summary::before {
  transform: rotate(90deg);
}

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

@media (max-width: 1180px) {
  /* Below ~1180px viewport, the side-by-side workspace + rail layout would
   * squeeze the workspace below ~480px and clip the test-library rows'
   * Start button. Stack instead. */
  .study-layout {
    grid-template-columns: 1fr;
  }
  .study-history {
    position: relative;
    top: 0;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .study-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    position: relative;
  }
  .study-hero-controls {
    grid-template-columns: 1fr;
  }
  .study-hero-meta,
  .study-hero-actions {
    align-items: stretch;
    width: 100%;
  }
  .study-hero-actions .primary-button {
    width: 100%;
  }
}

/* ============================================================
   Read / Test / Review mode banners + focus tuning
   ============================================================ */

.study-mode-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 14px;
  margin: 0 0 8px;
  border-radius: 10px;
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
  background: var(--surface-soft, #f8fafc);
  font-size: 13px;
}

.study-mode-banner strong {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 12px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--text, #0f172a);
}

.study-mode-banner span {
  color: var(--muted, #475569);
  line-height: 1.45;
}

.study-mode-banner[data-mode="read"]   { background: rgba(99, 102, 241, 0.06);  border-color: rgba(99, 102, 241, 0.3); }
.study-mode-banner[data-mode="read"]   strong { background: rgba(99, 102, 241, 0.15); color: #3730a3; }
.study-mode-banner[data-mode="test"]   { background: rgba(245, 158, 11, 0.08);  border-color: rgba(245, 158, 11, 0.35); }
.study-mode-banner[data-mode="test"]   strong { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.study-mode-banner[data-mode="review"] { background: rgba(16, 185, 129, 0.07);  border-color: rgba(16, 185, 129, 0.3); }
.study-mode-banner[data-mode="review"] strong { background: rgba(16, 185, 129, 0.15); color: #047857; }

/* Focus-mode: when a test is in progress, dim peripheral UI so the runner gets attention */
.study-workspace[data-mode="test"] ~ .study-history,
.study-workspace[data-mode="test"] ~ .study-status-strip {
  opacity: 0.55;
  filter: grayscale(0.4);
  transition: opacity 0.2s ease;
}

/* Pull the right-rail's "Recent attempts" forward in review mode */
.study-workspace[data-mode="review"] ~ .study-history .study-history-section:first-child {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), transparent);
  border-radius: 10px;
  padding: 6px 8px;
}

/* Read-mode: emphasize the study guide content, soften the test selector below */
.study-workspace[data-mode="read"] .study-pack-output:nth-child(1) .panel,
.study-workspace[data-mode="read"] .study-section-title {
  font-size: 14.5px;
  line-height: 1.55;
}

.study-workspace[data-mode="read"] .ai-test-card,
.study-workspace[data-mode="read"] .ai-tests-card {
  background: var(--surface-soft, #f8fafc);
}

.study-read-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 22px 24px;
  border-radius: 14px;
  /* Tinted gradient layered over a fully opaque white base. --surface-raised
   * is 0.94 alpha, which lets sticky-scrolled content bleed through and look
   * like overlap, so we use solid #ffffff here. */
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(99, 102, 241, 0.04)),
    var(--surface, #ffffff);
  border: 1px solid rgba(99, 102, 241, 0.4);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.10);
}

.study-read-cta[data-has-bank="1"] {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04)),
    var(--surface, #ffffff);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.10);
}

.study-read-cta-copy strong {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--text, #0f172a);
  font-weight: 700;
}

.study-read-cta-copy span {
  font-size: 13.5px;
  color: var(--muted, #475569);
  line-height: 1.5;
}

.study-read-cta-button {
  padding: 14px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px;
  white-space: nowrap;
}

.study-read-cta[data-has-bank="0"] .study-read-cta-button {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: white;
  border: none;
}

.study-read-cta[data-has-bank="1"] .study-read-cta-button {
  background: linear-gradient(135deg, #10b981, #047857);
  color: white;
  border: none;
}

@media (max-width: 760px) {
  .study-read-cta {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .study-read-cta-button {
    width: 100%;
  }
}

.study-review-extras,
.study-guide-extras,
.ai-test-setup-extras {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.study-review-extras > summary,
.study-guide-extras > summary,
.ai-test-setup-extras > summary,
.ai-test-empty-lanes > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2563eb);
  padding: 8px 14px;
  border: 1px solid var(--line); /* was undefined --border-color → light literal in dark */
  border-radius: 8px;
  background: var(--surface, #fff);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.study-review-extras > summary:hover,
.study-guide-extras > summary:hover,
.ai-test-setup-extras > summary:hover,
.ai-test-empty-lanes > summary:hover {
  background: var(--accent-soft, #eef2ff);
  border-color: var(--accent, #2563eb);
}

.ai-test-empty-lanes {
  margin-top: 10px;
}

.ai-test-empty-lanes > summary {
  color: var(--muted, #475569);
  font-weight: 500;
}

/* "Customize this test" needs to be findable without expanding panels — it's
 * the second-most-common student action after "Start a practice test". The
 * `.prominent` variant lives at the read-mode level (sibling of the BIG CTA)
 * and uses a larger, bolder summary so it doesn't look like a footnote. */
.ai-test-setup-extras.prominent {
  margin: 8px 0 0;
  border-top: none;
  padding-top: 0;
}

.ai-test-setup-extras.prominent > summary {
  font-size: 15px;
  padding: 12px 18px;
  font-weight: 700;
  border: 2px solid var(--accent, #2563eb);
  background: var(--accent-soft, #eef2ff);
  color: var(--accent, #1d4ed8);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

.ai-test-setup-extras.prominent > summary:hover {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

.ai-test-setup-extras.prominent[open] > summary {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}

.ai-test-empty-lanes-body {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}

.ai-test-dashboard-empty {
  padding: 16px 18px;
  border-radius: 12px;
  /* Was var(--surface-soft,#f8fafc)/var(--border-color,...) — those tokens
     don't exist, so it always used the LIGHT literal fallback (light bg in
     dark mode). Use real theme tokens. */
  background: var(--surface-2);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  margin-bottom: 12px;
}

.study-review-extras > summary::before,
.study-guide-extras > summary::before,
.ai-test-setup-extras > summary::before,
.ai-test-empty-lanes > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 11px;
}

.study-review-extras[open] > summary::before,
.study-guide-extras[open] > summary::before,
.ai-test-setup-extras[open] > summary::before,
.ai-test-empty-lanes[open] > summary::before {
  transform: rotate(90deg);
}

.study-review-extras > summary::-webkit-details-marker,
.study-guide-extras > summary::-webkit-details-marker,
.ai-test-setup-extras > summary::-webkit-details-marker,
.ai-test-empty-lanes > summary::-webkit-details-marker { display: none; }

/* Compact one-line test-library rows. The hero already establishes the
 * assignment context, so each row only repeats what differs: version, type,
 * size, latest score, best score, action. */
.ai-test-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color, rgba(15, 23, 42, 0.06));
  background: var(--surface, #fff);
  font-size: 13px;
  margin-bottom: 6px;
}

.ai-test-row.selected {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -2px;
}

.ai-test-row-version {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft, #eef2ff);
  color: var(--accent, #2563eb);
  font-weight: 700;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
}

.ai-test-row-type {
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-test-row-meta,
.ai-test-row-score,
.ai-test-row-best {
  font-size: 12px;
  color: var(--muted, #475569);
  white-space: nowrap;
}

.compact-row-button {
  padding: 4px 10px;
  font-size: 12px;
  min-width: 60px;
}

/* Make wrong-answer review cards more scannable in review mode */
.study-workspace[data-mode="review"] .test-review-card {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.study-workspace[data-mode="review"] .test-review-card[class*="risk"] {
  border-left: 4px solid #dc2626;
  background: rgba(239, 68, 68, 0.04);
}

.study-workspace[data-mode="review"] .test-review-card[class*="watch"] {
  border-left: 4px solid #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}

.study-workspace[data-mode="review"] .test-review-card[class*="ready"] {
  border-left: 4px solid #16a34a;
  background: rgba(34, 197, 94, 0.05);
}

.study-workspace[data-mode="review"] .test-review-card p {
  margin: 4px 0;
  line-height: 1.5;
}

.study-workspace[data-mode="review"] .test-review-card p b {
  color: var(--text, #0f172a);
  font-weight: 700;
  margin-right: 4px;
}

.study-workspace[data-mode="review"] .test-score-hero {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  margin-bottom: 16px;
}

/* Hide the admin metric footer on the Study view — it's noise for a student.
   The footer still renders on Dashboard / Settings / etc. */
body:has(#studyView.view.active) #workspaceFooter {
  display: none;
}

/* ============================================================
   Read-mode CTA: above-the-fold mount + mobile sticky bar
   ============================================================ */

.study-read-cta-mount {
  margin: 0;
  /* The CTA scrolls inline with the rest of the workspace. Earlier we pinned
   * it sticky so students didn't have to scroll back up, but that caused the
   * CTA to visually overlap cards behind it. On mobile the media query below
   * switches this to position:fixed at the viewport bottom instead. */
}

.study-read-cta-mount[hidden] {
  display: none;
}

.study-read-cta[data-state="building"] {
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.02)),
    var(--surface, #ffffff);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}

.study-read-cta[data-state="building"] strong::before {
  content: "⏳ ";
  margin-right: 4px;
}

.study-read-cta-progress {
  margin-top: 10px;
  width: 100%;
  height: 4px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.study-read-cta-progress > span {
  display: block;
  position: absolute;
  inset: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  animation: study-read-cta-progress-slide 1.8s linear infinite;
}

@keyframes study-read-cta-progress-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}

.study-read-cta-button:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Mobile sticky: pin the CTA to the bottom of the viewport on small screens
   so it follows the student while they scroll the guide. We use fixed
   positioning because the workspace itself isn't a scroll container — sticky
   would fall back to relative and disappear when the student scrolls past. */
@media (max-width: 760px) {
  body:has(#studyView.view.active) .study-read-cta-mount {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    margin: 0;
    pointer-events: none;
  }
  body:has(#studyView.view.active) .study-read-cta-mount > .study-read-cta {
    pointer-events: auto;
    margin: 0;
    padding: 14px 16px;
    gap: 10px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-radius: 14px;
  }
  body:has(#studyView.view.active) .study-read-cta-mount > .study-read-cta .study-read-cta-copy strong {
    font-size: 15px;
  }
  body:has(#studyView.view.active) .study-read-cta-mount > .study-read-cta .study-read-cta-copy span {
    font-size: 12.5px;
    line-height: 1.4;
  }
  body:has(#studyView.view.active) .study-read-cta-button {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
  body:has(#studyView.view.active) .study-workspace {
    padding-bottom: 130px; /* room so the sticky CTA never overlaps content */
  }
  body:has(#studyView.view.active) .study-read-cta-mount[hidden] {
    display: none;
  }
}

/* Award activity planner — form + list + day-card chip */
.award-planner-form {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 10px;
  align-items: end;
}
.award-planner-form .compact-field {
  min-width: 0;
}
.award-planner-form .compact-field > select,
.award-planner-form .compact-field > input {
  width: 100%;
  min-width: 0;
}
.award-planner-list,
.award-planned-activities {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.award-planned-activities:empty {
  display: none;
}
.award-activity-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 4px 2px;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--font-weight-label);
  color: var(--muted);
}
.award-activity-section-title strong {
  color: var(--text);
  font-weight: 700;
  font-size: var(--font-size-body);
}
.award-activity-section-title + .award-activity-row {
  margin-top: 4px;
}
.award-activity-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
}
.award-activity-row.ready {
  border-left: 4px solid var(--accent);
}
.award-activity-row.watch {
  border-left: 4px solid var(--highlight);
}
.day-task.award-activity {
  display: grid;
  gap: 4px;
}
.day-task.award-activity[data-tone="confirmed"] {
  border-left: 3px solid var(--accent);
  padding-left: 6px;
}
.day-task.award-activity[data-tone="ready"] {
  border-left: 3px solid var(--highlight);
  padding-left: 6px;
}
.day-task.award-activity small {
  color: var(--muted);
}
.award-activity-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.award-log-source-chip {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-left: 4px;
}

/* Four-Year Plan hero — override study-hero-controls grid (which expects two
   select-style children) so the segmented Course view filter lays out as a
   single horizontal row instead of being squeezed into the first 200px column. */
#fourYearHero .study-hero-controls {
  display: block;
}
#fourYearHero .four-year-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
}
#fourYearHero .four-year-toolbar > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
#fourYearHero .four-year-toolbar .segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Test Analytics view */
#analyticsView .analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
#analyticsView .analytics-panel {
  margin-top: 14px;
}
#analyticsView .test-stat-card.ready {
  border-left: 4px solid #16a34a;
}
#analyticsView .test-stat-card.risk {
  border-left: 4px solid #dc2626;
}
#analyticsView .analytics-trend-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 12px 4px 0;
  overflow-x: auto;
}
#analyticsView .analytics-trend-bar {
  position: relative;
  flex: 1 1 28px;
  min-width: 28px;
  max-width: 56px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-size: 11px;
  color: var(--muted);
}
#analyticsView .analytics-trend-bar-fill {
  display: block;
  width: 80%;
  background: var(--accent, #2563eb);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}
#analyticsView .analytics-trend-bar[data-tone="ready"] .analytics-trend-bar-fill {
  background: #16a34a;
}
#analyticsView .analytics-trend-bar[data-tone="watch"] .analytics-trend-bar-fill {
  background: #f59e0b;
}
#analyticsView .analytics-trend-bar[data-tone="risk"] .analytics-trend-bar-fill {
  background: #dc2626;
}
#analyticsView .analytics-trend-bar-value {
  position: absolute;
  top: -16px;
  font-weight: 600;
  color: var(--text, #0f172a);
}
#analyticsView .analytics-trend-bar-label {
  margin-top: 4px;
}
#analyticsView .analytics-weak-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
#analyticsView .analytics-weak-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 10px 12px;
}
#analyticsView .analytics-weak-card span {
  color: var(--muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  letter-spacing: var(--tracking-label);
  display: block;
}
#analyticsView .analytics-weak-card strong {
  font-size: 18px;
  display: block;
  margin-top: 2px;
}
#analyticsView .analytics-attempts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
#analyticsView .analytics-attempts-table th,
#analyticsView .analytics-attempts-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}
#analyticsView .analytics-attempts-table thead {
  background: var(--surface-muted, rgba(0, 0, 0, 0.02));
}

/* ===== Accessibility pass (Phase 7) =====
 * Visible focus rings on every interactive element using :focus-visible
 * (so mouse users don't see rings, keyboard users always do). Color uses
 * the accent palette so it adapts to dark mode automatically. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip-to-content link — visible only when focused. Already styled in the
 * base CSS but we tighten it here so it stands out under the modal layer. */
.skip-link:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 6px;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Floating color-scheme toggle — bottom-right, stacked just above the
   stopwatch FAB. Previously bottom-left, where it overlapped the sidebar's
   last nav item ("Settings"). Single button cycles light/dark/auto. */
.color-scheme-toggle {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 900;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.color-scheme-toggle:hover {
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
@media (max-width: 720px) {
  .color-scheme-toggle { bottom: 80px; right: 16px; width: 38px; height: 38px; font-size: 17px; }
}

/* ===== Dark mode (Phase 7) =====
 * Composable with the existing data-theme attribute: use body[data-color-scheme="dark"]
 * to override the light defaults from :root. The accent palette stays
 * roughly the same (preserves brand recognition) but everything else flips:
 * page surfaces darken, text lightens, dividers soften.
 */
body[data-color-scheme="dark"] {
  color-scheme: dark;
  --ink: #e8edf2;
  --text: var(--ink);
  --muted: #94a3b8;
  --line: #2c3848;
  --line-soft: #1f2935;
  --line-strong: #475569;
  --canvas: #0b121d;
  --surface: #131c2a;
  --surface-2: #1a2535;
  --surface-3: #21304a;
  --surface-raised: rgba(19, 28, 42, 0.96);
  --background: var(--canvas);
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
  /* Was color-mix(... 130%, white) — the >100% arg clamps, so it was a
     no-op (== --accent) and never actually lightened. Fixed to a real
     light teal so accent-as-text is legible on dark surfaces. */
  --accent-strong: color-mix(in srgb, var(--accent) 42%, #ffffff);
  /* Semantic FOREGROUND colors must lighten in dark mode too: components
     do `background: var(--*-soft); color: var(--*)`. We darkened the soft
     backgrounds; without lightening these the pair is dark-on-dark.
     These alias base hues (non-circular). Their soft/line derivatives
     stay dark (low-% mix into --surface). */
  --success: color-mix(in srgb, var(--accent) 46%, #ffffff);
  --warning: color-mix(in srgb, var(--gold) 60%, #ffffff);
  --danger:  color-mix(in srgb, var(--coral) 58%, #ffffff);
  --info:    color-mix(in srgb, var(--blue) 52%, #ffffff);
  /* Soft tint backgrounds must darken too — they were NOT flipped, so
     light dark-mode text rendered near-invisible (contrast ~1.0) on
     metric cards, chips, alerts, and empty-states across every view.
     Semantic aliases (--success/warning/danger/info-soft) reference
     these bases and inherit the dark tint automatically. */
  --teal-soft: color-mix(in srgb, var(--teal) 24%, var(--surface));
  --gold-soft: color-mix(in srgb, var(--gold) 26%, var(--surface));
  --blue-soft: color-mix(in srgb, var(--blue) 24%, var(--surface));
  --blue-line: color-mix(in srgb, var(--blue) 45%, var(--surface));
  --coral-soft: color-mix(in srgb, var(--coral) 24%, var(--surface));
  --grape-soft: color-mix(in srgb, var(--grape) 24%, var(--surface));
  --rose-soft: color-mix(in srgb, var(--rose) 24%, var(--surface));
  --rose-line: color-mix(in srgb, var(--rose) 45%, var(--surface));
  --amber-soft: color-mix(in srgb, var(--amber) 28%, var(--surface));
  --amber-line: color-mix(in srgb, var(--amber) 45%, var(--surface));
  --green-soft: color-mix(in srgb, var(--green) 26%, var(--surface));
  --green-line: color-mix(in srgb, var(--green) 45%, var(--surface));
  /* The 7 body[data-theme] palettes (earlier in source) redefine the
     SEMANTIC soft tokens as light literals, and components consume the
     semantic tokens directly — so the base-hue overrides above aren't
     enough. This dark block is later with equal specificity, so these
     win the cascade for every theme. This is the actual systemic fix. */
  /* Derive from BASE hues (mid-tone), not the now-lightened semantic
     fg tokens — otherwise these backgrounds turn light again. Low % keeps
     them firmly dark so the lightened fg has strong contrast. */
  --success-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --warning-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
  --danger-soft:  color-mix(in srgb, var(--coral) 18%, var(--surface));
  --info-soft:    color-mix(in srgb, var(--blue) 18%, var(--surface));
  --content-grid-line: color-mix(in srgb, white 6%, transparent);
  --content-grid-line-soft: color-mix(in srgb, white 3%, transparent);
  --page-overlay: color-mix(in srgb, var(--highlight) 7%, transparent);
}
/* Auto mode: follow OS preference. Tagged with data-color-scheme="auto" so
 * the toggle UI can show three states (light / dark / auto). */
@media (prefers-color-scheme: dark) {
  body[data-color-scheme="auto"] {
    color-scheme: dark;
    --ink: #e8edf2;
    --text: var(--ink);
    --muted: #94a3b8;
    --line: #2c3848;
    --line-soft: #1f2935;
    --line-strong: #475569;
    --canvas: #0b121d;
    --surface: #131c2a;
    --surface-2: #1a2535;
    --surface-3: #21304a;
    --surface-raised: rgba(19, 28, 42, 0.96);
    --background: var(--canvas);
    /* Parity with body[data-color-scheme="dark"] — this block previously
       omitted the accent + soft-tint overrides, so OS-dark + auto mode
       was even more broken than explicit dark. */
    --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
    --accent-strong: color-mix(in srgb, var(--accent) 42%, #ffffff);
    --success: color-mix(in srgb, var(--accent) 46%, #ffffff);
    --warning: color-mix(in srgb, var(--gold) 60%, #ffffff);
    --danger:  color-mix(in srgb, var(--coral) 58%, #ffffff);
    --info:    color-mix(in srgb, var(--blue) 52%, #ffffff);
    --teal-soft: color-mix(in srgb, var(--teal) 24%, var(--surface));
    --gold-soft: color-mix(in srgb, var(--gold) 26%, var(--surface));
    --blue-soft: color-mix(in srgb, var(--blue) 24%, var(--surface));
    --blue-line: color-mix(in srgb, var(--blue) 45%, var(--surface));
    --coral-soft: color-mix(in srgb, var(--coral) 24%, var(--surface));
    --grape-soft: color-mix(in srgb, var(--grape) 24%, var(--surface));
    --rose-soft: color-mix(in srgb, var(--rose) 24%, var(--surface));
    --rose-line: color-mix(in srgb, var(--rose) 45%, var(--surface));
    --amber-soft: color-mix(in srgb, var(--amber) 28%, var(--surface));
    --amber-line: color-mix(in srgb, var(--amber) 45%, var(--surface));
    --green-soft: color-mix(in srgb, var(--green) 26%, var(--surface));
    --green-line: color-mix(in srgb, var(--green) 45%, var(--surface));
    --success-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
    --warning-soft: color-mix(in srgb, var(--gold) 18%, var(--surface));
    --danger-soft:  color-mix(in srgb, var(--coral) 18%, var(--surface));
    --info-soft:    color-mix(in srgb, var(--blue) 18%, var(--surface));
    --content-grid-line: color-mix(in srgb, white 6%, transparent);
    --content-grid-line-soft: color-mix(in srgb, white 3%, transparent);
    --page-overlay: color-mix(in srgb, var(--highlight) 7%, transparent);
  }
}

/* Accent used directly as TEXT (not via a semantic token) is too dim on
   dark surfaces. Remap these specific text usages to the lightened
   --accent-strong in dark mode only — light mode is untouched, and
   --accent stays unchanged so buttons/bars/theme palettes are unaffected. */
body[data-color-scheme="dark"] :is(
  #dashboardView .metric strong,
  .fisd-calendar-meta a,
  .plan-status-select[data-status="Current"],
  .plan-status-static[data-status="Current"],
  .gpa-status-meter b,
  .study-plan-step strong,
  .study-review-extras > summary,
  .study-guide-extras > summary,
  .ai-test-setup-extras > summary,
  .ai-test-empty-lanes > summary
) {
  color: var(--accent-strong);
}
/* "Read mode" badge uses hardcoded indigo literals — lift it for dark. */
body[data-color-scheme="dark"] .study-mode-banner[data-mode="read"] strong {
  background: rgba(129, 140, 248, 0.22);
  color: #c7d2fe;
}
@media (prefers-color-scheme: dark) {
  body[data-color-scheme="auto"] :is(
    #dashboardView .metric strong,
    .fisd-calendar-meta a,
    .plan-status-select[data-status="Current"],
    .plan-status-static[data-status="Current"],
    .gpa-status-meter b,
    .study-plan-step strong,
    .study-review-extras > summary,
    .study-guide-extras > summary,
    .ai-test-setup-extras > summary,
    .ai-test-empty-lanes > summary
  ) {
    color: var(--accent-strong);
  }
  body[data-color-scheme="auto"] .study-mode-banner[data-mode="read"] strong {
    background: rgba(129, 140, 248, 0.22);
    color: #c7d2fe;
  }
}

/* ===== Mobile responsiveness pass (Phase 6) =====
 * Brings the Award workspace + new modal/disclosure UIs up to phone
 * standards: 44px tap targets, full-screen modals on small viewports,
 * single-column layout for goal/log/evidence cards, scrollable heatmap +
 * chart panels. Tuned for iPhone 14 (390px) up to iPad mini portrait. */
@media (max-width: 720px) {
  /* Award action row: shrink button padding + wrap. */
  #awardView .section-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  #awardView .section-actions > * {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    text-align: center;
  }
  /* Award summary tiles → 1 column. */
  .award-summary-grid, .award-readiness-grid, .award-audit-grid,
  .award-action-grid, .award-pace-grid, .award-month-grid,
  .award-goal-coverage-grid {
    grid-template-columns: 1fr !important;
  }
  /* Goal/log/expedition record cards. */
  .award-record-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .award-record-card .award-record-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .award-record-card .award-record-actions > * {
    flex: 1 1 auto;
    min-height: 44px;
  }
  /* Readiness panel header stack. */
  .award-readiness-header {
    grid-template-columns: 1fr;
  }
  /* All modals become full-screen on phone. */
  .award-modal-card,
  .award-modal-card-wide {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .award-modal-card header h3 { font-size: 16px; }
  .award-modal-body { padding: 12px; }
  /* Charts: keep readable. */
  .award-charts svg { min-width: 480px; }
  .award-chart-block { overflow-x: auto; }
  /* Evidence: tighter grid + stacked card layout. */
  .award-evidence-grid {
    grid-template-columns: 1fr;
  }
  .award-evidence-item {
    grid-template-columns: 60px 1fr;
  }
  .award-evidence-thumb, .award-evidence-icon {
    width: 60px;
    height: 60px;
  }
  .award-evidence-form-row {
    grid-template-columns: 1fr;
  }
  .award-evidence-form .award-evidence-url,
  .award-evidence-form .award-evidence-notes {
    grid-column: 1;
  }
  /* Heatmap + audit log scroll horizontally. */
  .award-heatmap-grid, .award-heatmap-month-row {
    overflow-x: auto;
  }
  .award-audit-log-table {
    font-size: 11px;
  }
  /* Validator letter modal table-like layout — collapse signature into
     its own block on narrow screens. */
  .award-validator-letter { font-size: 12px; padding: 12px; max-height: 50vh; }
  /* CSV import preview table scrollable. */
  #awardCsvImportPreview { overflow-x: auto; }
  /* Validator status pills wrap. */
  .award-validator-status-controls {
    gap: 4px;
  }
  .award-validator-status-pill {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    justify-content: center;
    padding: 6px 8px;
  }
  /* Lightbox: full-bleed image. */
  .award-lightbox-stage {
    max-height: 60vh;
  }
  .award-lightbox-nav {
    font-size: 28px;
  }
  /* Top right export-row gets a horizontal scroll fallback if the buttons
     refuse to wrap on a particular content. */
  #awardView header.section-heading {
    gap: 8px;
  }
}

/* Even tighter for sub-400 phones. */
@media (max-width: 400px) {
  #awardView .section-actions > * {
    flex: 1 1 100%;
  }
}



/* ============================================================
   Cross-view summary-tile harmonization
   The same concept (label + value + sub-text KPI tile) was 8 bespoke
   components with divergent neutral surfaces (--surface / --surface-2 /
   --surface-3 / --surface-raised), borders, and radii — a "similar not
   identical" inconsistency that made pages feel different even after the
   container unification. This single late-source-order rule normalizes
   the NEUTRAL card surface only. State variants (.ready/.watch/.risk,
   etc.) and #id-scoped rules have higher specificity and still win, so
   semantic coloring is preserved. .parent-digest-card is intentionally
   excluded (it uses --background for within-panel contrast).
   ============================================================ */
.metric,
.calendar-load-card,
.plan-health-pill,
.test-stat-card,
.gpa-status-meter,
.award-status-card,
.analytics-summary-grid > * {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}