:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: #f2f5f7;
  color: #17212b;

  /* Material Design 3 semantic role tokens, seeded from the deep green/teal brand. */
  --md-surface: #ffffff;
  --md-surface-container: #f6f8f7;
  --md-surface-container-high: #eef2f0;
  --md-primary: #0b6b59;
  --md-primary-container: #d8e9e3;
  --md-on-primary: #ffffff;
  --md-on-primary-container: #0a332b;
  --md-outline: #cad4dc;
  --md-outline-variant: #e2e8ec;
  --md-text: #17212b;
  --md-on-surface-variant: #42515f;
  --md-text-muted: #687784;
  --md-danger: #b3261e;
  /* Shape scale: small controls ~8px, ordinary containers ~12px, the one
     featured "Do next" surface ~16px. */
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

main {
  width: min(42rem, calc(100% - 3rem));
}

.eyebrow {
  color: #0b6b59;
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: .35rem 0;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.lede {
  max-width: 31rem;
  margin: 1.5rem 0 3rem;
  color: #42515f;
  font-size: 1.2rem;
  line-height: 1.55;
}

.status {
  border-top: 1px solid #cad4dc;
  padding-top: 1rem;
  color: #687784;
  font-size: .9rem;
}

/* Persistent app header + account menu */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  background: #0b6b59;
  color: #fff;
  box-sizing: border-box;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
  font-weight: 750;
  letter-spacing: -.01em;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .35rem;
  background: #fff;
  color: #0b6b59;
  font-size: .75rem;
  font-weight: 800;
}

.account-menu {
  position: relative;
}

.account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .4rem;
  list-style: none;
  cursor: pointer;
  border-radius: .35rem;
}

.account-menu summary::-webkit-details-marker {
  display: none;
}

.account-name {
  font-weight: 700;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-role {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}

.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .35rem);
  min-width: 14rem;
  max-width: calc(100vw - 1rem);
  background: #fff;
  color: #17212b;
  border: 1px solid #cad4dc;
  border-radius: .4rem;
  box-shadow: 0 .5rem 1.25rem rgba(23, 33, 43, .12);
  padding: .4rem;
}

.account-identity {
  margin: .3rem .5rem .6rem;
  font-size: .85rem;
  color: #42515f;
}

.menu-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .6rem;
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: .3rem;
  color: #17212b;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-item:hover {
  background: #eef2f5;
}

.menu-logout {
  color: #b3261e;
  font-weight: 700;
}

@media (max-width: 480px) {
  .account-name {
    max-width: 7rem;
  }
}

/* Shared app shell: overrides the legacy body grid and per-page body rules
   so the header is a full-width bar at the top and <main> sits below it. */
body.app-shell {
  margin: 0;
  min-height: 100vh;
  display: block;
  padding: 0;
}

body.app-shell .app-header {
  position: sticky;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}

body.app-shell > main {
  width: min(52rem, calc(100% - 2rem));
  margin: 2rem auto 3rem;
}

/* Isolate the account-menu form/button from page-local form/button rules. */
.account-menu form {
  margin: 0;
  display: block;
  gap: 0;
}

.account-menu .menu-item {
  margin: 0;
  padding: 0 .6rem;
  width: 100%;
}

.account-menu .menu-logout {
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #b3261e;
  font-weight: 700;
}

/* Constrained header inner container: the same width/gutter rule as
   main.dashboard so the brand/account edge lines up with the dashboard edge. */
.app-header-inner {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
}

/* Student dashboard: scan-first two-column layout. */
body.app-shell > main.dashboard {
  width: min(80rem, calc(100% - 2rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.5rem;
  align-items: start;
}

.dashboard-title {
  margin: 0 0 .5rem;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.tabs {
  display: flex;
  gap: .5rem;
  margin: .25rem 0 1.25rem;
  border-bottom: 1px solid #cad4dc;
  padding-bottom: .5rem;
}

.tab {
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: .4rem;
  color: #42515f;
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.tab:hover {
  background: #eef2f5;
}

.tab[aria-current="page"] {
  background: #0b6b59;
  color: #fff;
}

.tab-count {
  color: inherit;
  opacity: .8;
  font-weight: 600;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid #cad4dc;
  border-radius: .5rem;
  background: #fff;
}

.card-icon {
  flex: 0 0 auto;
  color: #42515f;
  display: inline-flex;
}

.card-body {
  min-width: 0;
  flex: 1 1 auto;
}

.card-title {
  display: block;
  font-weight: 700;
  color: #17212b;
  text-decoration: none;
  line-height: 1.3;
}

.card-title:hover {
  text-decoration: underline;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: #687784;
  font-size: .85rem;
  margin-top: .15rem;
}

.status-pill {
  flex: 0 0 auto;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-past_due { background: #fdecea; color: #b3261e; }
.status-due_today, .status-due_this_week { background: #fff4e0; color: #9a5b00; }
.status-due_next_week, .status-upcoming { background: #e7f1fb; color: #1c4e8a; }
.status-no_due { background: #eef2f5; color: #687784; }
.status-submitted, .status-reviewing { background: #e1ebf0; color: #2f5f75; }
.status-feedback { background: #e6f4ea; color: #1c6b3c; }

.card-action {
  flex: 0 0 auto;
  font-weight: 700;
  color: #0b6b59;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.dashboard-rail {
  border: 1px solid #cad4dc;
  border-radius: .5rem;
  background: #fff;
  padding: 1rem;
}

.rail-title {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
}

.glance {
  margin: 0;
}

.glance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid #eef2f5;
}

.glance-row dt { color: #42515f; font-weight: 650; }
.glance-row dd { margin: 0; font-weight: 800; min-width: 2ch; text-align: right; }
.rail-empty { color: #687784; }

@media (max-width: 900px) {
  body.app-shell > main.dashboard {
    grid-template-columns: 1fr;
  }
  /* Flatten the feed section so its children join the dashboard grid, then
     order them: My work heading → Current/Completed tabs → At a glance →
     cards (or the empty state, which fills the same feed slot). */
  .dashboard-main {
    display: contents;
  }
  .dashboard-title { order: 1; }
  .tabs { order: 2; }
  .dashboard-rail { order: 3; }
  .card-list { order: 4; }
  /* The empty-state paragraph occupies the card-list feed slot so it never
     appears above the page title or tabs. */
  .dashboard-main > .muted { order: 4; }
  /* Teacher preview keeps its banner above the title/copy/cards. */
  .dashboard-main > .banner { order: 0; }
}

/* Student command center — a dedicated Material 3-inspired application shell. */
:root {
  --orion-blue: #96b9cf;
  --orion-orange: #c76733;
  --cmd-bg: #ffffff;
  --cmd-surface: #ffffff;
  --cmd-surface-2: #f3f5f6;
  --cmd-surface-3: #e8ecee;
  --cmd-bento-body: #f3f5f6;
  --cmd-bento-body-hover: #e8ecee;
  --cmd-primary: #2f5f75;
  --cmd-on-primary: #ffffff;
  --cmd-primary-container: #dceaf1;
  --cmd-on-primary-container: #173947;
  --cmd-secondary-container: #e2e7e9;
  --cmd-tertiary-container: #f4e1d6;
  --cmd-focus-container: #25343b;
  --cmd-on-focus: #ffffff;
  --cmd-focus-accent: #b9d3df;
  --cmd-on-surface: #17191b;
  --cmd-on-variant: #4a5358;
  --cmd-outline: #6c767b;
  --cmd-outline-soft: #d5dbde;
  --cmd-error: #b3261e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --orion-blue: #a9c9d9;
  --orion-orange: #e08a5b;
  --cmd-bg: #0f1214;
  --cmd-surface: #171b1d;
  --cmd-surface-2: #202528;
  --cmd-surface-3: #2a3034;
  --cmd-bento-body: #171b1d;
  --cmd-bento-body-hover: #202528;
  --cmd-primary: #b7d3e0;
  --cmd-on-primary: #163744;
  --cmd-primary-container: #294957;
  --cmd-on-primary-container: #d9edf5;
  --cmd-secondary-container: #363d41;
  --cmd-tertiary-container: #533728;
  --cmd-focus-container: #2b414b;
  --cmd-on-focus: #f7f9fa;
  --cmd-focus-accent: #ffb082;
  --cmd-on-surface: #f3f5f6;
  --cmd-on-variant: #c3cbd0;
  --cmd-outline: #8c969b;
  --cmd-outline-soft: #343b3f;
  --cmd-error: #ffb4ab;
}

body.student-command {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  background: var(--cmd-bg);
  color: var(--cmd-on-surface);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.student-command *, .student-command *::before, .student-command *::after { box-sizing: border-box; }
.student-command a { color: inherit; }
.student-command button, .student-command input, .student-command textarea, .student-command select { font: inherit; }

.command-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 18px;
  background: var(--cmd-surface-2);
  border-right: 1px solid var(--cmd-outline-soft);
}

.command-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 10px;
  color: var(--cmd-on-surface);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -.02em;
}

.command-brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--cmd-primary);
  color: var(--cmd-on-primary);
  font-size: .9rem;
  font-weight: 850;
}

.command-destinations { display: grid; gap: 5px; margin-top: 34px; }
.command-destination {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 28px;
  color: var(--cmd-on-variant);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 650;
}
.command-destination:hover { background: var(--cmd-surface-3); }
.command-destination[aria-current="page"] { background: var(--cmd-secondary-container); color: var(--cmd-on-surface); font-weight: 790; }
.command-destination:focus-visible, .student-command a:focus-visible, .student-command button:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; }

.command-nav-bottom { display: grid; gap: 10px; margin-top: auto; }
.points-panel { display: grid; gap: 2px; padding: 16px; border-radius: 24px; background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }
.points-panel strong { font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.points-panel > span:not(.mini-progress) { font-size: .74rem; font-weight: 650; }
.points-label { text-transform: uppercase; letter-spacing: .08em; opacity: .76; }
.mini-progress { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--cmd-on-primary-container) 18%, transparent); }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--cmd-on-primary-container); }
.theme-toggle { min-height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--cmd-on-variant); cursor: pointer; font-weight: 650; }
.theme-toggle:hover { background: var(--cmd-surface-3); }

.command-main { min-width: 0; }
.command-topbar { height: 80px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 clamp(20px, 4vw, 64px); }
.mobile-wordmark { display: none; font-weight: 800; }
.preview-chip { margin-right: auto; padding: 8px 14px; border-radius: 18px; background: var(--cmd-tertiary-container); font-size: .8rem; font-weight: 750; }
.profile-menu { position: relative; }
.profile-menu summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 5px 9px 5px 5px; border-radius: 28px; list-style: none; cursor: pointer; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:hover { background: var(--cmd-surface-2); }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: #201a1b; font-size: .82rem; font-weight: 850; }
.avatar-coral { background: #e7a17d; }.avatar-violet { background: #96b9cf; }.avatar-teal { background: #a8c9c3; }.avatar-blue { background: #b9d2df; }.avatar-gold { background: #e4b58f; }
.profile-summary-copy { display: grid; min-width: 0; }
.profile-summary-copy strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.profile-summary-copy span, .profile-panel-head span { color: var(--cmd-on-variant); font-size: .72rem; }
.profile-caret { color: var(--cmd-on-variant); }
.profile-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 270px; padding: 10px; border: 1px solid var(--cmd-outline-soft); border-radius: 22px; background: var(--cmd-surface); box-shadow: 0 8px 24px rgba(29,27,32,.14); }
.profile-panel-head { display: flex; align-items: center; gap: 12px; padding: 9px 10px 14px; border-bottom: 1px solid var(--cmd-outline-soft); margin-bottom: 6px; }
.profile-panel-head > div { display: grid; }
.avatar-lg { width: 52px; height: 52px; }
.profile-panel a, .profile-panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--cmd-on-surface); text-decoration: none; cursor: pointer; }
.profile-panel a:hover, .profile-panel button:hover { background: var(--cmd-surface-2); }
.profile-panel form { margin: 0; }

.command-content { width: min(1420px, calc(100% - clamp(40px, 8vw, 128px))); margin: 4px auto 80px; }
.command-home, .work-page, .calendar-page, .class-page, .profile-page { width: 100%; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; min-height: 132px; margin-bottom: 28px; }
.command-date { margin: 0 0 8px; color: var(--cmd-primary); font-size: .82rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.welcome-row h1, .page-intro h1, .profile-hero h1 { margin: 0; color: var(--cmd-on-surface); font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: .97; letter-spacing: -.055em; }
.welcome-note, .page-intro > p:last-child, .profile-hero > div > p:last-child { margin: 12px 0 0; color: var(--cmd-on-variant); font-size: 1rem; }
.section-kicker { margin: 0 0 4px; color: var(--cmd-primary); font-size: .7rem; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.panel-heading h2, .command-card h2, .class-page-grid h2, .profile-grid h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.quiet-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--cmd-primary) !important; font-size: .84rem; font-weight: 760; text-decoration: none; }
.quiet-link:hover { text-decoration: underline; }

.week-panel { padding: 22px 24px 18px; border-radius: 28px; background: var(--cmd-surface-2); }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.week-day { min-width: 0; min-height: 118px; padding: 11px; border-radius: 18px; background: var(--cmd-surface); }
.week-day.is-today { background: var(--cmd-primary); color: var(--cmd-on-primary); }
.week-day-name { display: block; color: var(--cmd-on-variant); font-size: .68rem; font-weight: 760; text-transform: uppercase; }
.week-day.is-today .week-day-name { color: inherit; opacity: .8; }
.week-day > strong { display: block; margin: 3px 0 9px; font-size: 1.25rem; }
.week-items { display: grid; gap: 4px; }
.week-items a, .week-clear, .week-extra { overflow: hidden; color: inherit; font-size: .66rem; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.week-clear { color: var(--cmd-on-variant); opacity: .68; }
.week-day.is-today .week-clear { color: inherit; }

.command-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-top: 16px; }
.command-card { min-width: 0; padding: 24px; border-radius: 28px; background: var(--cmd-surface-2); }
.next-work { grid-row: span 2; background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }
.next-work .section-kicker, .next-work .quiet-link { color: inherit !important; opacity: .74; }
.next-list { list-style: none; margin: 16px 0 0; padding: 0; }
.next-list li + li { border-top: 1px solid color-mix(in srgb, var(--cmd-on-primary-container) 18%, transparent); }
.next-list a { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 92px; color: inherit; text-decoration: none; }
.next-number { font-size: .76rem; font-weight: 800; opacity: .58; }
.next-copy { display: grid; min-width: 0; gap: 5px; }
.next-copy strong { overflow: hidden; font-size: 1.06rem; text-overflow: ellipsis; white-space: nowrap; }
.next-copy span { font-size: .75rem; opacity: .74; }
.next-status, .work-state { padding: 7px 10px; border-radius: 14px; background: color-mix(in srgb, var(--cmd-on-primary-container) 10%, transparent); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.calm-empty { display: grid; gap: 5px; padding: 36px 0; }.calm-empty strong { font-size: 1.3rem; }.calm-empty span { opacity: .74; }
.completion-card { background: var(--cmd-tertiary-container); }
.completion-card > p:not(.section-kicker) { margin: 8px 0 18px; color: var(--cmd-on-variant); font-size: .82rem; }
.completion-track { height: 10px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--cmd-on-surface) 14%, transparent); }
.completion-track i { display: block; height: 100%; border-radius: inherit; background: var(--cmd-primary); }
.completion-level { display: flex; justify-content: space-between; margin-top: 10px; color: var(--cmd-on-variant); font-size: .74rem; }
.announcement-card { background: var(--cmd-surface-3); }
.announcement-course { margin: 7px 0 0; color: var(--cmd-primary); font-size: .72rem; font-weight: 760; }
.announcement-body { margin: 13px 0 0; color: var(--cmd-on-variant); line-height: 1.55; white-space: pre-line; }
.links-card, .classes-card { background: var(--cmd-surface); border: 1px solid var(--cmd-outline-soft); }
.resource-list, .class-command-list { list-style: none; margin: 14px 0 0; padding: 0; }
.resource-list li + li, .class-command-list li + li { border-top: 1px solid var(--cmd-outline-soft); }
.resource-list a, .class-command-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; color: var(--cmd-on-surface); text-decoration: none; }
.resource-list a > span, .class-command-list strong { font-weight: 720; }
.resource-list small, .class-command-list small { display: block; margin-top: 2px; color: var(--cmd-on-variant); font-size: .68rem; }
.class-command-list a > span:first-child { display: grid; }
.card-empty { color: var(--cmd-on-variant); font-size: .86rem; line-height: 1.5; }

.page-intro { padding: 42px 0 28px; }
.work-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.work-tabs a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 22px; color: var(--cmd-on-variant); text-decoration: none; font-weight: 700; }
.work-tabs a[aria-current="page"] { background: var(--cmd-secondary-container); color: var(--cmd-on-surface); }
.work-tabs span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--cmd-surface); font-size: .7rem; }
.work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.work-feed { min-height: 300px; }
.work-list { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.work-list a { position: relative; display: grid; gap: 5px; min-height: 108px; padding: 18px 145px 18px 20px; border-radius: 20px; background: var(--cmd-surface-2); color: var(--cmd-on-surface); text-decoration: none; }
.work-list a:hover { background: var(--cmd-surface-3); }
.work-course { color: var(--cmd-primary); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.work-meta { color: var(--cmd-on-variant); font-size: .76rem; }
.work-state { position: absolute; top: 50%; right: 18px; translate: 0 -50%; background: var(--cmd-secondary-container); }
.work-summary { padding: 22px; border-radius: 24px; background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }
.work-summary .section-kicker, .work-summary .quiet-link { color: inherit !important; }
.work-summary dl { margin: 12px 0; }.work-summary dl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--cmd-on-primary-container) 16%, transparent); }.work-summary dt { font-size: .82rem; }.work-summary dd { margin: 0; font-size: 1rem; font-weight: 820; }
.large-empty { padding: 60px 28px; border-radius: 28px; background: var(--cmd-surface-2); }.large-empty h2 { margin: 0; }.large-empty p { color: var(--cmd-on-variant); }

.month-panel { padding: 22px; border-radius: 28px; background: var(--cmd-surface-2); }
.month-heading { display: flex; align-items: center; justify-content: center; gap: 18px; }.month-heading h2 { min-width: 190px; margin: 0; text-align: center; }
.month-button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--cmd-on-surface); text-decoration: none; }.month-button:hover { background: var(--cmd-surface-3); }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.month-weekdays { margin-top: 20px; }.month-weekdays span { padding: 8px; color: var(--cmd-on-variant); font-size: .68rem; font-weight: 780; text-align: center; text-transform: uppercase; }
.month-grid { overflow: hidden; border: 1px solid var(--cmd-outline-soft); border-radius: 20px; background: var(--cmd-outline-soft); gap: 1px; }
.month-day { min-width: 0; min-height: 120px; padding: 9px; background: var(--cmd-surface); }.month-day.outside { opacity: .42; }.month-day.today { background: var(--cmd-primary-container); }.month-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .78rem; font-weight: 760; }.today .month-number { background: var(--cmd-primary); color: var(--cmd-on-primary); }
.month-items { display: grid; gap: 4px; margin-top: 5px; }.month-item { overflow: hidden; padding: 5px 6px; border-radius: 7px; background: var(--cmd-secondary-container); color: var(--cmd-on-surface); font-size: .65rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.no-date-panel { margin-top: 16px; padding: 22px; border-radius: 24px; background: var(--cmd-surface-2); }.no-date-panel h2 { margin-top: 0; }.no-date-panel ul { margin: 0; padding-left: 20px; }.no-date-panel li span { margin-left: 8px; color: var(--cmd-on-variant); font-size: .75rem; }

.back-link { display: inline-flex; margin-top: 28px; color: var(--cmd-primary) !important; font-weight: 750; text-decoration: none; }
.class-page-grid, .profile-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap: 16px; }
.class-info-body, .class-links, .profile-progress, .profile-account { padding: 26px; border-radius: 28px; background: var(--cmd-surface-2); }.class-links, .profile-account { background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }.preserve-lines { margin-top: 16px; color: var(--cmd-on-variant); line-height: 1.7; white-space: pre-wrap; }
.profile-hero { display: flex; align-items: center; gap: 24px; padding: 50px 0 32px; }.profile-avatar { width: 104px; height: 104px; font-size: 1.55rem; }.profile-progress > p:last-child { color: var(--cmd-on-variant); }

.student-command .student-primary { max-width: 900px; padding-top: 35px; }
.student-command .student-pagehead h1 { font-size: clamp(2.4rem,5vw,4.2rem); color: var(--cmd-on-surface); }
.student-command .student-pagehead .lede { color: var(--cmd-on-variant); }
.student-command .submission-form, .student-command .fb { padding: 24px; border-radius: 24px; background: var(--cmd-surface-2); }
.student-command .btn-primary { border-radius: 24px; background: var(--cmd-primary); color: var(--cmd-on-primary); }
.student-command .text-link { color: var(--cmd-primary); }

.teacher-editor .teacher-content-main { width: min(920px, calc(100% - 32px)); }
.save-notice { padding: 14px 18px; border-radius: 14px; background: #d8e9e3; color: #0a332b; font-weight: 700; }
.course-switcher { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }.course-switcher label { font-weight: 720; }.course-switcher select { min-height: 44px; padding: 0 12px; border: 1px solid #cad4dc; border-radius: 10px; background: #fff; }
.home-content-form { display: grid; gap: 16px; }.home-content-form section { display: grid; gap: 8px; padding: 24px; border: 1px solid #e2e8ec; border-radius: 18px; background: #fff; }.home-content-form section h2 { margin: 0 0 6px; }.home-content-form label { font-size: .82rem; font-weight: 720; }.home-content-form input, .home-content-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #cad4dc; border-radius: 10px; box-sizing: border-box; resize: vertical; }.teacher-link-rows { display: grid; gap: 8px; }.teacher-link-row { display: grid; grid-template-columns: minmax(150px,.4fr) minmax(240px,1fr); gap: 8px; }.teacher-form-actions { display: flex; align-items: center; gap: 18px; }

@media (max-width: 850px) {
  body.student-command { display: block; padding-bottom: 76px; }
  .command-nav { position: fixed; inset: auto 0 0; width: 100%; height: 72px; display: block; padding: 7px 12px max(7px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--cmd-outline-soft); }
  .command-brand, .command-nav-bottom { display: none; }
  .command-destinations { grid-template-columns: repeat(4,1fr); gap: 6px; margin: 0; }
  .command-destination { justify-content: center; min-height: 54px; padding: 0 8px; border-radius: 20px; font-size: .78rem; }
  .command-topbar { height: 68px; padding: 0 18px; }
  .mobile-wordmark { display: block; margin-right: auto; }
  .profile-summary-copy, .profile-caret { display: none; }
  .profile-menu summary { padding: 0; }
  .command-content { width: min(100% - 28px, 720px); margin-bottom: 34px; }
  .welcome-row { min-height: 112px; margin-bottom: 18px; }
  .week-panel { padding: 18px; overflow: hidden; }
  .week-strip { grid-template-columns: repeat(7, 74px); overflow-x: auto; padding-bottom: 7px; }
  .command-grid, .work-layout, .class-page-grid, .profile-grid { grid-template-columns: 1fr; }
  .next-work { grid-row: auto; }
  .links-card { order: 4; }.classes-card { order: 5; }
  .page-intro { padding-top: 26px; }
  .work-summary { order: -1; }.work-summary dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.work-summary dl div { display: grid; gap: 3px; border: 0; text-align: center; }
  .month-panel { padding: 13px; overflow-x: auto; }.month-weekdays, .month-grid { min-width: 700px; }
  .profile-hero { padding-top: 28px; }.profile-avatar { width: 82px; height: 82px; }
}

@media (max-width: 520px) {
  .command-content { width: calc(100% - 22px); }
  .welcome-row h1, .page-intro h1, .profile-hero h1 { font-size: 2.65rem; }
  .welcome-note { font-size: .9rem; }
  .command-card, .week-panel { border-radius: 22px; padding: 19px; }
  .next-list a { grid-template-columns: 30px minmax(0,1fr); min-height: 94px; }.next-status { grid-column: 2; justify-self: start; margin-top: -4px; }
  .work-list a { padding-right: 18px; padding-bottom: 52px; }.work-state { top: auto; right: auto; bottom: 14px; left: 18px; translate: none; }
  .profile-hero { align-items: flex-start; gap: 15px; }.profile-avatar { width: 64px; height: 64px; font-size: 1rem; }
  .profile-panel { position: fixed; top: 62px; right: 10px; left: 10px; min-width: 0; }
  .teacher-link-row { grid-template-columns: 1fr; }
}

/* Navigation iteration: one conventional top menu on every viewport. */
body.student-command {
  display: block;
  padding: 0;
}

.command-nav {
  position: sticky;
  inset: 0 0 auto;
  width: 100%;
  height: 76px;
  z-index: 20;
  display: block;
  padding: 0;
  background: var(--cmd-surface-2);
  border: 0;
  border-bottom: 1px solid var(--cmd-outline-soft);
}

.command-nav-inner {
  width: min(1420px, calc(100% - clamp(40px, 8vw, 128px)));
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
}

.command-brand { flex: 0 0 auto; padding: 0; }

.command-destinations {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.command-destination {
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
}

.command-nav-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 auto;
}

.points-panel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 20px;
  white-space: nowrap;
}

.points-panel .points-label,
.points-panel .mini-progress { display: none; }
.points-panel strong { font-size: 1rem; line-height: 1; letter-spacing: -.02em; }
.points-panel > span:not(.points-label):not(.mini-progress) { font-size: .7rem; }
.theme-toggle { min-width: 86px; padding: 0 12px; }
.preview-chip { margin: 0; white-space: nowrap; }
.command-main { width: 100%; }
.command-content { margin-top: 4px; }
.mobile-wordmark, .command-topbar { display: none; }

@media (max-width: 1000px) {
  .profile-summary-copy, .profile-caret { display: none; }
  .profile-menu summary { padding: 0; }
  .preview-chip { display: none; }
}

@media (max-width: 700px) {
  body.student-command { padding: 0; }
  .command-nav {
    position: sticky;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 0;
  }
  .command-nav-inner {
    width: min(100% - 28px, 720px);
    height: auto;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px 10px;
    padding: 8px 0 0;
  }
  .command-brand { display: flex; grid-column: 1; }
  .command-brand-mark { width: 32px; height: 32px; }
  .command-nav-bottom { display: flex; grid-column: 2; justify-self: end; }
  .profile-menu { grid-column: 3; }
  .command-destinations {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 4px;
    padding: 5px 0;
    border-top: 1px solid var(--cmd-outline-soft);
  }
  .command-destination { min-height: 42px; padding: 0 7px; font-size: .78rem; }
  .points-panel { padding: 8px 10px; }
  .points-panel > span:not(.points-label):not(.mini-progress) { display: none; }
  .theme-toggle { min-width: 78px; padding: 0 8px; font-size: .76rem; }
  .command-content { width: min(100% - 28px, 720px); margin: 4px auto 34px; }
}

@media (max-width: 430px) {
  .command-brand > span:last-child { display: none; }
  .theme-toggle { min-width: 70px; }
}

/* Supplied theme-control reference: circular moon in light, sun in dark. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--cmd-outline);
  border-radius: 50%;
  background: transparent;
  color: var(--cmd-on-variant);
}

.theme-icon {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }

/* Bento anatomy: an expressive title region above a quiet content region. */
.command-card {
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

.bento-heading {
  position: relative;
  z-index: 2;
  min-height: 102px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 28px;
  background: var(--cmd-surface-3);
}

.bento-heading.panel-heading {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.bento-body {
  position: relative;
  z-index: 1;
  margin-top: -24px;
  padding: 42px 24px 22px;
  border: 0;
  border-radius: 0 0 28px 28px;
  background: var(--cmd-bento-body);
  color: var(--cmd-on-surface);
  transition: background-color 160ms ease;
}

.bento-body:hover,
.bento-body:focus-within { background: var(--cmd-bento-body-hover); }

/* Desktop home bento: dominant work area with three compact supporting cards. */
.welcome-row {
  min-height: 176px;
  padding-top: 36px;
}

.command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(260px, .78fr);
  grid-template-areas:
    "next next points"
    "announcement classes links";
  align-items: start;
}

.next-work { grid-area: next; }
.points-tracker-card { grid-area: points; }
.announcement-card { grid-area: announcement; }
.classes-card { grid-area: classes; }
.links-card { grid-area: links; }

.next-work { color: var(--cmd-on-surface); }
.next-work .bento-heading {
  background: var(--cmd-focus-container);
  color: var(--cmd-on-focus);
}
.next-work .bento-heading .section-kicker,
.next-work .bento-heading .quiet-link { color: var(--cmd-focus-accent) !important; opacity: 1; }
.next-work .bento-body { color: var(--cmd-on-surface); }
.next-list { margin-top: 0; }
.next-list li + li { border-color: var(--cmd-outline-soft); }
.next-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--cmd-on-surface); }
.next-copy { flex: 1 1 auto; }
.next-copy span { color: var(--cmd-on-variant); opacity: 1; }
.next-status { flex: 0 0 auto; margin: 0; background: var(--cmd-secondary-container); }

.points-tracker-card .bento-heading { background: var(--cmd-tertiary-container); }
.points-tracker-heading { min-height: 148px; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
.points-tracker-heading h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.055em; }
.points-emoji { flex: 0 0 auto; font-size: 3.8rem; line-height: .9; }
.welcome-wave, .points-emoji { display: inline-block; }
.welcome-wave { transform-origin: 72% 72%; }
.welcome-wave:hover { animation: welcome-wave-motion 850ms ease-in-out infinite; }
.points-emoji:hover { animation: smiley-spin 2.4s linear infinite; }

@keyframes welcome-wave-motion {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(18deg); }
  50% { transform: rotate(-12deg); }
  75% { transform: rotate(14deg); }
}

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

.points-tracker-card .bento-body > p { margin: 12px 0 0; color: var(--cmd-on-variant); font-size: .82rem; }
.points-level { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.points-level span { color: var(--cmd-on-variant); font-size: .78rem; }
.announcement-card .bento-heading { background: var(--cmd-secondary-container); }
.links-card .bento-heading { background: var(--cmd-surface-3); }
.classes-card .bento-heading { background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }
.classes-card .bento-heading .section-kicker { color: inherit; opacity: .72; }
.class-info-card-link { display: block; border-radius: 28px; color: inherit; text-decoration: none; }
.class-info-card-link:hover .bento-body,
.class-info-card-link:focus-visible .bento-body { background: var(--cmd-bento-body-hover); }
.class-info-card-link:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 3px; }
.class-info-summary { margin: 0; color: var(--cmd-on-variant); line-height: 1.5; }
.class-info-cta { display: inline-block; margin-top: 15px; color: var(--cmd-primary); font-weight: 760; }
.resource-list, .class-command-list { margin-top: 0; }
.announcement-body { margin-top: 0; }

:root[data-theme="dark"] .status-past_due { background: #5a2925; color: #ffb4ab; }
:root[data-theme="dark"] .status-due_today,
:root[data-theme="dark"] .status-due_this_week { background: #533d22; color: #ffd49a; }
:root[data-theme="dark"] .status-due_next_week,
:root[data-theme="dark"] .status-upcoming { background: #243d4a; color: #c7e3f0; }
:root[data-theme="dark"] .status-no_due { background: #30363a; color: #d4dadd; }
:root[data-theme="dark"] .status-submitted,
:root[data-theme="dark"] .status-reviewing { background: #2b414b; color: #d5ebf4; }
:root[data-theme="dark"] .status-feedback { background: #224133; color: #b9e7cb; }

@media (max-width: 520px) {
  .bento-heading { min-height: 88px; padding: 18px 19px; border-radius: 22px; }
  .bento-body { margin-top: -20px; padding: 35px 19px 19px; border-radius: 0 0 22px 22px; }
  .next-list a { align-items: flex-start; flex-direction: column; gap: 8px; }
  .points-tracker-heading { min-height: 128px; }
  .points-tracker-heading h2 { font-size: 2.45rem; }
  .points-emoji { font-size: 3.25rem; }
}

@media (max-width: 850px) {
  .welcome-row { min-height: 148px; padding-top: 28px; }
  .command-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "next"
      "announcement"
      "classes"
      "points"
      "links";
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-body { transition: none; }
  .welcome-wave:hover, .points-emoji:hover { animation: none; }
}

@media (max-width: 480px) {
  .card {
    flex-wrap: wrap;
  }
  .card-action {
    width: 100%;
  }
}

/* =====================================================================
   Material 3-inspired student shell + home.
   A quiet, minimal shell: flat surfaces, tonal containers, restrained
   outlines, and a single dominant "Do next" surface. Ordinary containers
   never carry box-shadow; only genuinely floating overlays may.
   ===================================================================== */

/* Quiet persistent top bar is provided by _app_header. The label-only rail
   and content live inside a two-column layout on desktop.

   The selector is `body.app-shell > main.student-layout` (specificity 0-1-2,
   equal to the legacy `body.app-shell > main` rule) and appears later in the
   stylesheet, so the student canvas's 80rem width is never overridden by the
   legacy 52rem `main` rule that precedes it. */
body.app-shell > main.student-layout {
  width: min(80rem, calc(100% - 2rem));
  margin: 1.5rem auto 3rem;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* Flat rail: no surrounding card, no shadow, no border. */
.student-nav {
  position: sticky;
  top: calc(56px + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.student-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .9rem;
  border-radius: var(--md-shape-small);
  color: var(--md-on-surface-variant);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.student-nav-link:hover {
  background: var(--md-surface-container);
}

.student-nav-link:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Selected destination uses a soft tonal pill, never a shadow. */
.student-nav-link[aria-current="page"] {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* The content column carries the page's primary/supporting panes. */
.student-shell {
  min-width: 0;
}

/* Home: primary pane then a smaller supporting pane. */
.student-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.5rem;
  align-items: start;
}

.student-primary {
  min-width: 0;
}

.student-pagehead {
  margin-bottom: 1.25rem;
}

.student-context {
  color: var(--md-on-surface-variant);
  margin: .35rem 0 0;
}

.section-label {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-text-muted);
}

.student-next {
  margin-bottom: 1.75rem;
}

/* The one featured "Do next" surface: tonal primary container, 16px radius. */
.feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-large);
  background: var(--md-primary-container);
}

.feature-card-title {
  margin: 0;
  font-size: 1.15rem;
}

.feature-card-title a {
  color: var(--md-on-primary-container);
  text-decoration: none;
}

.feature-card-title a:hover {
  text-decoration: underline;
}

.feature-card .card-meta {
  margin-top: .3rem;
  color: var(--md-on-surface-variant);
}

.student-coming {
  margin-bottom: 1.25rem;
}

.view-all {
  margin: .25rem 0 0;
}

/* Filled primary button for the one dominant action. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.1rem;
  border-radius: var(--md-shape-small);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.btn-primary:hover {
  background: #0a5a4a;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.text-link {
  color: var(--md-primary);
  font-weight: 700;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.text-link:hover {
  text-decoration: underline;
}

.text-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* Supporting pane: At a glance + class context. Tonal, flat, no shadow. */
.student-supporting {
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-medium);
  background: var(--md-surface-container);
  padding: 1rem;
}

/* Class context list inside the supporting pane. */
.class-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.class-item {
  padding: .5rem 0;
  border-bottom: 1px solid var(--md-outline-variant);
}

.class-item:last-child {
  border-bottom: 0;
}

.class-name {
  font-weight: 700;
  color: var(--md-text);
}

.class-section {
  color: var(--md-text-muted);
  font-size: .85rem;
}

/* Caught-up calm state. */
.student-caughtup {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-medium);
  background: var(--md-surface-container);
  padding: 1.25rem;
}

/* Assignment detail shell surfaces. */
.submission-form {
  display: grid;
  gap: .9rem;
  margin-top: 1rem;
}

.submission-form textarea,
.submission-form .drop {
  padding: .7rem .8rem;
  font: inherit;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-small);
  box-shadow: none;
  box-sizing: border-box;
  width: 100%;
}

.submission-form textarea {
  min-height: 6rem;
}

.submission-form label {
  font-size: .85rem;
  font-weight: 650;
  color: var(--md-on-surface-variant);
}

.banner {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 700;
  font-size: .85rem;
  padding: .55rem .9rem;
  border-radius: var(--md-shape-small);
  margin-bottom: 1.25rem;
}

.error {
  color: var(--md-danger);
}

.released {
  color: var(--md-primary);
  font-weight: 700;
}

/* Below ~900px: collapse the rail to a compact horizontal row, stack the home
   panes, and keep page identity + Do next ahead of supporting content. */
@media (max-width: 900px) {
  .student-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .student-nav {
    position: static;
    flex-direction: row;
    gap: .5rem;
    overflow-x: auto;
  }

  .student-home {
    grid-template-columns: 1fr;
  }

  .student-primary {
    display: contents;
  }

  .student-pagehead,
  .student-next {
    display: grid;
    gap: .25rem;
  }

  .student-supporting {
    order: 10;
  }
}

/* =====================================================================
   Ask Mr. Gourley student page (uses the command-shell --cmd-* tokens so
   the dark/light contrast hooks apply uniformly).
   ===================================================================== */
.ask-page { padding: 34px 4px 20px; }
.ask-hero { max-width: 760px; }
.ask-hero h1 { margin: 6px 0 8px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.02em; }
.ask-lede { color: var(--cmd-on-variant); font-size: 1rem; line-height: 1.5; max-width: 680px; margin: 0 0 22px; }
.section-kicker { color: var(--cmd-primary); }

.ask-panel { max-width: 760px; }
.ask-form { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--cmd-outline-soft); border-radius: 18px; background: var(--cmd-surface-2); }
.ask-form label { font-weight: 720; color: var(--cmd-on-surface); }
.ask-form textarea {
  width: 100%; min-height: 96px; padding: 12px 14px; box-sizing: border-box;
  border: 1px solid var(--cmd-outline-soft); border-radius: 12px;
  background: var(--cmd-bg); color: var(--cmd-on-surface); resize: vertical;
}
.ask-form textarea:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 1px; }
.ask-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ask-limit { color: var(--cmd-on-variant); font-size: .8rem; }
.ask-submit {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 24px;
  font: inherit; font-weight: 800; color: var(--cmd-on-primary); background: var(--cmd-primary); cursor: pointer;
}
.ask-submit:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; }

.ask-answer { max-width: 760px; margin-top: 22px; padding: 18px; border: 1px solid var(--cmd-outline-soft); border-radius: 18px; background: var(--cmd-surface-2); }
.ask-answer-text { font-size: 1.06rem; line-height: 1.55; color: var(--cmd-on-surface); white-space: pre-wrap; }
.ask-fixed { color: var(--cmd-on-surface); }
.ask-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cmd-outline-soft); }
.ask-sources-label { color: var(--cmd-on-variant); font-size: .82rem; font-weight: 700; }
.ask-source-titles { margin: 6px 0 0; padding-left: 18px; }
.ask-source-titles li { color: var(--cmd-on-variant); font-size: .9rem; }
.ask-report { margin-top: 14px; }
.ask-report-btn {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--cmd-outline-soft); border-radius: 20px;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--cmd-on-variant);
  background: transparent; cursor: pointer;
}
.ask-report-btn:hover { background: var(--cmd-surface-3); }
.ask-report-btn:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; }
.ask-reported, .ask-reported-standalone { color: var(--cmd-primary); font-weight: 700; margin-top: 12px; }
.ask-reported-standalone { margin-top: 0; }

/* =====================================================================
   Ask Mr. Gourley teacher chat. The conversation is primary; management
   controls stay quiet and collapsed below it.
   ===================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.teacher-assistant-page {
  background: var(--cmd-bg);
  color: var(--cmd-on-surface);
}

body.app-shell > main.teacher-assistant-main {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto 5rem;
}

.teacher-chat {
  width: min(54rem, 100%);
  min-height: calc(100vh - 56px);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 58px) 0 24px;
  box-sizing: border-box;
}

.teacher-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px 24px;
}

.assistant-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.assistant-mark,
.assistant-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cmd-focus-container);
  color: var(--cmd-on-focus);
  font-weight: 850;
}

.assistant-overline {
  margin: 0 0 2px;
  color: var(--cmd-on-variant);
  font-size: .72rem;
  font-weight: 780;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.teacher-chat-header h1 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.assistant-private-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cmd-surface-2);
  color: var(--cmd-on-variant);
  font-size: .78rem;
  font-weight: 720;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orion-orange);
}

.teacher-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: clamp(320px, 48vh, 560px);
  padding: 28px clamp(4px, 2vw, 16px) 38px;
}

.assistant-welcome {
  display: grid;
  justify-items: center;
  align-content: center;
  flex: 1;
  min-height: 300px;
  text-align: center;
}

.assistant-welcome-spark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--cmd-primary-container);
  color: var(--cmd-on-primary-container);
  font-size: 1.55rem;
}

.assistant-welcome h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  letter-spacing: -.025em;
}

.assistant-welcome > p {
  max-width: 34rem;
  margin: 10px 0 22px;
  color: var(--cmd-on-variant);
  line-height: 1.55;
}

.assistant-suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.assistant-suggestions button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cmd-outline-soft);
  border-radius: 20px;
  background: var(--cmd-surface);
  color: var(--cmd-on-surface);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.assistant-suggestions button:hover {
  background: var(--cmd-surface-2);
  transform: translateY(-1px);
}

.assistant-message {
  display: flex;
  width: 100%;
}

.assistant-message-user {
  justify-content: flex-end;
}

.assistant-user-bubble {
  max-width: min(38rem, 82%);
  padding: 13px 17px;
  border-radius: 22px 22px 5px 22px;
  background: var(--cmd-primary-container);
  color: var(--cmd-on-primary-container);
  line-height: 1.5;
  white-space: pre-wrap;
}

.assistant-message-gourley {
  align-items: flex-start;
  gap: 13px;
}

.assistant-message-gourley .assistant-avatar {
  width: 34px;
  height: 34px;
  font-size: .78rem;
}

.assistant-response {
  min-width: 0;
  max-width: 44rem;
  padding-top: 4px;
}

.assistant-response-copy {
  color: var(--cmd-on-surface);
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-wrap;
}

.assistant-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.assistant-citation {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cmd-surface-2);
  color: var(--cmd-on-variant);
  font-size: .75rem;
  font-weight: 680;
}

.assistant-composer {
  position: sticky;
  bottom: 14px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--cmd-outline-soft);
  border-radius: 28px;
  background: var(--cmd-surface-2);
  box-shadow: 0 10px 28px rgba(23, 25, 27, .10);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.assistant-composer:focus-within {
  border-color: var(--cmd-outline);
  outline: 3px solid var(--cmd-primary);
  outline-offset: 2px;
  box-shadow: 0 12px 34px rgba(23, 25, 27, .14);
}

.assistant-composer textarea {
  flex: 1;
  min-height: 28px;
  max-height: 144px;
  padding: 8px 0 6px;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--cmd-on-surface);
  font: inherit;
  font-size: .96rem;
  line-height: 1.45;
}

.assistant-composer textarea::placeholder {
  color: var(--cmd-on-variant);
}

.assistant-composer textarea:focus-visible { outline: none; }

.assistant-send {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--cmd-primary);
  color: var(--cmd-on-primary);
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
}

.assistant-send:hover { transform: translateY(-1px); }
.assistant-send:disabled { cursor: wait; opacity: .6; transform: none; }
.assistant-send svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.assistant-disclaimer {
  margin: 10px 10px 0;
  color: var(--cmd-on-variant);
  font-size: .72rem;
  text-align: center;
}

.assistant-thinking-row[hidden] { display: none; }
.assistant-thinking-copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: var(--cmd-on-variant);
  font-size: .86rem;
}

.assistant-avatar-thinking {
  animation: assistant-breathe 1.8s ease-in-out infinite;
}

.thinking-dots {
  display: inline-flex;
  gap: 4px;
}

.thinking-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cmd-primary);
  animation: assistant-dot 1.1s ease-in-out infinite;
}

.thinking-dots i:nth-child(2) { animation-delay: 130ms; }
.thinking-dots i:nth-child(3) { animation-delay: 260ms; }

@keyframes assistant-dot {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}

@keyframes assistant-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cmd-primary) 0%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--cmd-primary) 14%, transparent); }
}

.assistant-error {
  margin: 0 4px 12px;
  color: var(--cmd-error);
  font-weight: 720;
}

.assistant-admin {
  width: min(64rem, 100%);
  margin: 28px auto 0;
  border-top: 1px solid var(--cmd-outline-soft);
  padding-top: 28px;
}

.assistant-health-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--cmd-surface-2);
}

.assistant-health-row > div { display: grid; gap: 2px; }
.assistant-health-label { color: var(--cmd-on-variant); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.assistant-health-row > p { margin: 0; color: var(--cmd-on-variant); font-size: .82rem; line-height: 1.45; }

.assistant-admin-panel {
  border-bottom: 1px solid var(--cmd-outline-soft);
}

.assistant-admin-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 66px;
  padding: 0 6px;
  list-style: none;
  cursor: pointer;
  font-weight: 760;
}

.assistant-admin-panel > summary::-webkit-details-marker { display: none; }
.assistant-admin-panel > summary::after { content: "+"; color: var(--cmd-on-variant); font-size: 1.25rem; font-weight: 450; }
.assistant-admin-panel[open] > summary::after { content: "−"; }
.assistant-summary-meta { margin-left: auto; color: var(--cmd-on-variant); font-size: .78rem; font-weight: 620; }
.assistant-admin-content { padding: 8px 6px 28px; }

.assistant-admin-heading,
.assistant-access-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.assistant-admin-heading h2,
.assistant-access-control h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.assistant-admin-heading p,
.assistant-access-control p { margin: 4px 0 0; color: var(--cmd-on-variant); font-size: .84rem; }

.assistant-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 20px;
  background: var(--cmd-primary);
  color: var(--cmd-on-primary);
  font: inherit;
  font-size: .82rem;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
}

.assistant-action-danger { background: var(--cmd-error); color: #fff; }
.assistant-warning { margin: 18px 0; padding: 13px 15px; border-radius: 14px; background: var(--cmd-tertiary-container); color: var(--cmd-on-surface); font-size: .8rem; line-height: 1.45; }
.assistant-saved { color: var(--cmd-primary); font-weight: 720; }

.assistant-source-list,
.assistant-review-list { display: grid; gap: 1px; background: var(--cmd-outline-soft); }

.assistant-source-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 15px 14px;
  background: var(--cmd-bg);
}

.assistant-source-row > div:first-child { display: grid; gap: 3px; }
.assistant-source-row > div:first-child span { color: var(--cmd-on-variant); font-size: .76rem; }
.assistant-source-state { padding: 5px 9px; border-radius: 999px; background: var(--cmd-surface-2); color: var(--cmd-on-variant); font-size: .7rem; font-weight: 720; }
.assistant-source-state.is-published { background: var(--cmd-primary-container); color: var(--cmd-on-primary-container); }
.assistant-source-actions { display: flex; align-items: center; gap: 4px; }
.assistant-source-actions form { margin: 0; }
.assistant-source-actions a,
.assistant-source-actions button { padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--cmd-primary); font: inherit; font-size: .76rem; font-weight: 720; text-decoration: none; cursor: pointer; }
.assistant-source-actions a:hover,
.assistant-source-actions button:hover { background: var(--cmd-surface-2); }
.assistant-empty-admin { margin: 18px 0 0; color: var(--cmd-on-variant); }

.assistant-review-list { margin-top: 20px; }
.assistant-review-list article { display: grid; gap: 5px; padding: 15px; background: var(--cmd-bg); }
.assistant-review-list article span { color: var(--cmd-on-variant); font-size: .74rem; }
.assistant-review-list article p { margin: 0; line-height: 1.45; }

.teacher-assistant-page button:focus-visible,
.teacher-assistant-page a:focus-visible,
.teacher-assistant-page summary:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 3px; }

@media (max-width: 700px) {
  .teacher-chat { padding-top: 24px; }
  .teacher-chat-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .assistant-private-status { align-self: flex-start; }
  .teacher-chat-thread { min-height: 360px; padding-inline: 0; }
  .assistant-user-bubble { max-width: 88%; }
  .assistant-suggestions { display: grid; width: 100%; }
  .assistant-suggestions button { width: 100%; }
  .assistant-health-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .assistant-health-row > p { grid-column: 1 / -1; }
  .assistant-source-row { grid-template-columns: 1fr auto; gap: 10px; }
  .assistant-source-actions { grid-column: 1 / -1; }
  .assistant-admin-heading,
  .assistant-access-control { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-avatar-thinking,
  .thinking-dots i { animation: none; }
  .assistant-suggestions button,
  .assistant-send { transition: none; }
}

/* =====================================================================
   Mr. Gourley Help Center (student). Searchable, category-filtered,
   expandable answer cards using the command-shell --cmd-* tokens so the
   dark/light contrast hooks apply uniformly. No AI/chat language.
   ===================================================================== */
.help-page { padding: 34px 4px 28px; }
.help-hero { max-width: 860px; margin-bottom: 30px; }
.help-hero h1 { margin: 6px 0 8px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -.025em; }
.help-lede { color: var(--cmd-on-variant); font-size: 1rem; line-height: 1.55; max-width: 640px; margin: 0 0 22px; }

.help-controls { display: grid; gap: 14px; }
.help-search { display: block; max-width: 560px; }
.help-search input {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  box-sizing: border-box;
  border: 1px solid var(--cmd-outline-soft);
  border-radius: 14px;
  background: var(--cmd-surface-2);
  color: var(--cmd-on-surface);
  font: inherit;
  font-size: .96rem;
}
.help-search input::placeholder { color: var(--cmd-on-variant); }
.help-search input:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; }

.help-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.help-filter {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--cmd-outline-soft);
  border-radius: 19px;
  background: var(--cmd-surface);
  color: var(--cmd-on-variant);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.help-filter:hover { background: var(--cmd-surface-2); }
.help-filter.is-active {
  background: var(--cmd-primary);
  color: var(--cmd-on-primary);
  border-color: transparent;
}
.help-filter:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; }

.help-section { max-width: 860px; margin-bottom: 34px; }
.help-section-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--cmd-on-surface);
}
.help-cards { display: grid; gap: 10px; }

.help-card {
  border: 1px solid var(--cmd-outline-soft);
  border-radius: 16px;
  background: var(--cmd-surface-2);
}
.help-card > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 18px;
  list-style: none;
  cursor: pointer;
  font-weight: 760;
  color: var(--cmd-on-surface);
  line-height: 1.35;
}
.help-card > summary::-webkit-details-marker { display: none; }
.help-card > summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--cmd-on-variant);
  font-size: 1.2rem;
  font-weight: 450;
}
.help-card[open] > summary::after { content: "−"; }
.help-card > summary:focus-visible { outline: 3px solid var(--cmd-primary); outline-offset: 2px; border-radius: 16px; }
.help-card > summary:hover { background: var(--cmd-surface-3); border-radius: 16px; }
.help-answer {
  padding: 2px 18px 16px;
  color: var(--cmd-on-surface);
  line-height: 1.6;
  font-size: .95rem;
}
.help-card[hidden] { display: none; }
.help-section[hidden] { display: none; }

.help-empty {
  max-width: 860px;
  padding: 26px 22px;
  border: 1px dashed var(--cmd-outline);
  border-radius: 16px;
  color: var(--cmd-on-surface);
}
.help-empty h2 { margin: 0 0 6px; font-size: 1.15rem; }
.help-empty p { margin: 0; color: var(--cmd-on-variant); line-height: 1.5; }
.help-empty[hidden] { display: none; }

.help-footnote { margin-top: 34px; color: var(--cmd-on-variant); font-size: .84rem; line-height: 1.5; }