:root {
  /* Batesburg-Leesville Panthers: purple and gold, taken from the school
     logo. Purple carries every action, gold marks what is finished or
     highlighted. Gold never carries small text - it fails contrast on white -
     so it lives in fills, rules and marks. */
  --panther-purple: #4a1f4a;
  --panther-purple-dark: #351338;
  --panther-gold: #c9b26b;
  --panther-gold-deep: #6b5715;

  --bg: #f6f4f7;
  --panel: #ffffff;
  --soft: #faf8fb;
  --text: #241f26;
  --muted: #6b6270;
  --line: #e2dae4;
  --primary: var(--panther-purple);
  --primary-dark: var(--panther-purple-dark);
  --danger: #b8454e;
  --warning: var(--panther-gold-deep);
  --accent-blue: #2f5f9f;
  --accent-gold: var(--panther-gold-deep);
  --accent-rose: #b85d75;
  --shadow: 0 16px 34px rgba(36, 31, 38, 0.10);

  /* One status/color language, used everywhere a state badge appears. */
  --status-locked: var(--muted);
  --status-locked-bg: #efecf0;
  --status-earned: var(--primary);
  --status-earned-bg: #f3eef4;
  --status-pending: var(--panther-gold-deep);
  --status-pending-bg: #faf5e4;
  --status-missing: var(--danger);
  --status-missing-bg: #fdf1f2;
  --status-excused: var(--accent-blue);
  --status-excused-bg: #f1f5fb;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

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

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 9px 12px;
  border: 2px solid var(--primary-dark);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}

#main-content:focus {
  outline: none;
}

.topbar {
  /* Tight to the edge and always there. Brady, 2026-09-08: "same with our main
     nav bar, fixed at the top, tight to the edge. We have screen real estate,
     let's use it." The classroom runs 24" monitors. */
  position: sticky;
  top: 0;
  z-index: 45;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding-left: 18px;
  padding-right: 18px;
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
}

.brand span {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.brand strong {
  font-size: 1.05rem;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.section-pill {
  max-width: 260px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-switcher { margin: 0; }
.section-switcher label { margin: 0; }
.section-switcher select { max-width: 230px; min-height: 36px; padding: 6px 30px 6px 9px; border-color: var(--line); background-color: var(--panel); font-size: .82rem; font-weight: 800; }

.enrollment-shell { min-height: min(680px, calc(100vh - 180px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 470px); align-items: center; gap: clamp(32px, 8vw, 110px); }
.enrollment-copy h1 { max-width: 10ch; margin-bottom: 12px; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .94; }
.enrollment-copy p { color: var(--muted); font-size: 1.05rem; }
.enrollment-copy small { color: var(--muted); }
.enrollment-card { margin: 0; padding: clamp(22px, 4vw, 34px); }
.enrollment-card h2 { margin-bottom: 6px; }
.enrollment-card input[name="class_code"] { text-transform: uppercase; font-size: 1.55rem; font-weight: 900; letter-spacing: .16em; text-align: center; }
.section-code-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.section-code-form label { margin: 0; }
.section-code-form input { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 900; letter-spacing: .12em; }

.nav-menu {
  position: relative;
}

.nav-menu > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 800;
  list-style: none;
}

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

.nav-menu > nav {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  right: 0;
  min-width: 220px;
  /* Block, not grid, so the list can flow into columns. */
  display: block;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  /* The list is longer for a teacher than for a student, and longer again in
     Panther Productions. Brady: "my menu is too long to fit on the screen now
     and I can't scroll either. So I have to zoom out to see the whole thing."
     Two answers, in order: it flows into columns when the window is wide
     enough, and it scrolls when even that is not enough. The bar is sticky, so
     100vh minus the bar and a margin is what is left to fill. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  column-gap: 14px;
}
/* Each entry is its own line. They were grid items before the container had to
   become a block to flow into columns, and inline links wrapped mid-label. */
.nav-menu > nav > a,
.nav-menu > nav > span,
.nav-menu > nav > form,
.nav-menu > nav > button { display: block; width: 100%; }
/* A group heading never ends a column, and no item is split down the middle. */
.nav-menu > nav > * { break-inside: avoid; }
.nav-menu > nav .nav-group-label { break-after: avoid; }
@media (min-width: 980px) {
  .nav-menu > nav { columns: 2; min-width: 430px; }
}
@media (min-width: 1500px) {
  .nav-menu > nav { columns: 3; min-width: 640px; }
}
/* A quiet scrollbar, so a long menu does not look broken. */
.nav-menu > nav::-webkit-scrollbar { width: 10px; }
.nav-menu > nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 3px solid var(--panel); }
.nav-menu > nav::-webkit-scrollbar-track { background: transparent; }

.nav-menu > nav a,
.nav-user {
  padding: 9px 10px;
  border-radius: 5px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-menu > nav .nav-group-label {
  margin: 10px 10px 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.nav-menu > nav .nav-group-label:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

.nav-menu > nav a:hover {
  background: var(--soft);
}

.nav-menu > nav a.active,
.nav-menu > nav a[aria-current="page"] {
  background: var(--soft);
  color: var(--primary-dark);
}

@keyframes queue-alert-pulse {
  50% {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(143, 46, 42, 0.34);
  }
}

.read-aloud-controls {
  position: fixed;
  z-index: 55;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 6px;
}

.read-aloud-controls button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.read-aloud-controls button:hover,
.read-aloud-controls button:focus-visible {
  background: var(--soft);
}

.read-aloud-controls button.is-reading {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Appears right at the text a student highlights, so "read just this part"
   is discoverable instead of hidden behind a corner-button label change. */
.read-aloud-selection {
  position: fixed;
  z-index: 70;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid var(--primary-dark);
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 850;
  box-shadow: 0 8px 22px rgba(30, 41, 38, 0.28);
  cursor: pointer;
}

.read-aloud-selection:hover,
.read-aloud-selection:focus-visible {
  background: var(--primary-dark);
}

.read-aloud-selection[hidden] {
  display: none;
}

@media print {
  .read-aloud-controls,
  .read-aloud-selection { display: none; }
}

@media (max-width: 640px) {
  .read-aloud-controls { left: auto; right: 10px; bottom: auto; top: 8px; }
  .read-aloud-controls button { padding: 7px 10px; font-size: 0.76rem; }
}

.nav-user {
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
}

.nav a,
.user-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 780;
  text-decoration: none;
}

.nav-primary a.active,
.nav-primary a[aria-current="page"] {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.page {
  /* A 24" classroom monitor should not read like a phone in the middle of the
     screen. Chromebooks and projectors fall back to the same fluid width. */
  width: min(1720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0 42px;
}

.footer {
  width: min(1720px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

h1,
h2,
p {
  margin-top: 0;
}

/* Content pages use a compact title so the first screen on a Chromebook shows
   the actual work, not just a headline. Marketing heroes opt back into large
   type below. */
h1 {
  margin-bottom: 8px;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.login-copy h1,
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 3.4rem);
  line-height: 1;
}

h2 {
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.lead {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.08rem;
}

.eyebrow,
.panel-title,
label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 22px;
  align-items: start;
  padding: 34px 0 22px;
}

.login-page .page {
  padding-top: 34px;
}

.login-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 26px;
  align-items: start;
  padding: 24px 0 22px;
}

.login-copy h1 {
  max-width: 760px;
}

.login-copy .lead {
  max-width: 650px;
}

.login-visual {
  max-width: 720px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.visual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.visual-header span,
.visual-tags span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.visual-meter {
  height: 9px;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--soft);
}

.visual-meter i {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--primary);
}

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

.stage {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 900;
}

.stage.open {
  border-color: rgba(47, 95, 159, 0.35);
  background: rgba(47, 95, 159, 0.09);
  color: var(--accent-blue);
}

.stage.active {
  border-color: rgba(23, 111, 103, 0.35);
  background: rgba(23, 111, 103, 0.1);
  color: var(--primary-dark);
}

.visual-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.visual-tags span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(201, 147, 42, 0.12);
  color: #755719;
}

.signin-card {
  padding: 22px;
  margin-top: clamp(92px, 8vw, 138px);
}

.signin-card-head {
  margin-bottom: 16px;
}

.signin-card-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.signin-card-head strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.18;
}

.signin-card-head p {
  margin: 8px 0 0;
  color: var(--muted);
}

.google-signin {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background: #fff;
  color: #3c4043;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
}

.google-signin:hover {
  background: #f8fafd;
  border-color: #c6cbd2;
}

.google-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.google-icon svg {
  width: 18px;
  height: 18px;
}

.fallback-access {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.fallback-access > summary {
  padding-top: 13px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 850;
}

.fallback-grid {
  display: grid;
  gap: 10px;
}

.fallback-access .fallback-grid {
  margin-top: 4px;
}

.login-showcase {
  max-width: 760px;
  margin-top: 30px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(47, 95, 159, 0.08), transparent 44%),
    linear-gradient(315deg, rgba(201, 147, 42, 0.12), transparent 48%),
    var(--panel);
  box-shadow: var(--shadow);
}

.showcase-topline,
.showcase-footer,
.student-unit-detail-head,
.progress-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.showcase-topline span,
.showcase-footer span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.course-path-graphic {
  display: grid;
  grid-template-columns: 18px 1fr 18px 1fr 18px 1fr 18px;
  align-items: center;
  gap: 7px;
  margin: 16px 0;
}

.path-node {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}

.path-node.done,
.path-node.active {
  border-color: var(--primary);
  background: var(--primary);
}

.path-node.active {
  box-shadow: 0 0 0 5px rgba(23, 111, 103, 0.13);
}

.path-line {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.path-line.done {
  background: var(--primary);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
}

.showcase-tile {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.showcase-tile span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.showcase-tile strong {
  font-size: 1.34rem;
  line-height: 1;
}

.studio-tile {
  border-color: rgba(23, 111, 103, 0.25);
}

.studio-tile em {
  display: block;
  width: 68%;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
}

.lab-tile {
  border-color: rgba(47, 95, 159, 0.25);
}

.signal-bars {
  display: flex;
  align-items: end;
  gap: 6px;
  min-height: 46px;
}

.signal-bars i {
  width: 13px;
  border-radius: 999px 999px 4px 4px;
  background: var(--accent-blue);
}

.signal-bars i:nth-child(1) { height: 16px; opacity: 0.55; }
.signal-bars i:nth-child(2) { height: 28px; opacity: 0.7; }
.signal-bars i:nth-child(3) { height: 38px; opacity: 0.86; }
.signal-bars i:nth-child(4) { height: 24px; opacity: 0.62; }

.cert-tile {
  border-color: rgba(201, 147, 42, 0.32);
}

.cert-tile strong {
  color: #755719;
}

.team-tile {
  border-color: rgba(184, 93, 117, 0.28);
}

.mini-avatars {
  display: flex;
}

.mini-avatars i {
  width: 34px;
  height: 34px;
  margin-right: -7px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--accent-rose);
}

.mini-avatars i:nth-child(2) {
  background: var(--primary);
}

.mini-avatars i:nth-child(3) {
  background: var(--accent-blue);
}

.showcase-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.login-panel,
.panel,
.narrow-card,
.notice-card,
.unit-panel,
.lesson-card,
.lesson-status,
.trust-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-panel,
.panel,
.narrow-card,
.notice-card {
  padding: 16px;
}

.stacked-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.stacked-form input,
.stacked-form select,
.stacked-form textarea,
.settings-grid input,
.settings-grid select,
.settings-grid textarea,
.inline-form input,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--text);
  outline: none;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 111, 103, 0.14);
}

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.button.primary,
.button.google {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.button.primary:hover,
.button.google:hover {
  background: var(--primary-dark);
}

.button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.button.danger-outline {
  border-color: rgba(184, 69, 78, 0.45);
  color: var(--danger);
}

.button.compact {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.88rem;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.setup-note,
.alert {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
}

.alert.success {
  border-color: rgba(23, 111, 103, 0.25);
  color: var(--primary-dark);
}

.alert.danger {
  border-color: rgba(184, 69, 78, 0.25);
  color: var(--danger);
}

.trust-grid,
.teacher-grid,
.project-context-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.trust-grid > div {
  padding: 14px;
}

.trust-grid p,
.muted,
.small,
.form-note,
.lesson-card p,
.notice-card p {
  color: var(--muted);
}

.small {
  font-size: 0.9rem;
}

.dashboard-head,
.lesson-hero {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.dashboard-head h1,
.lesson-hero h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.4rem);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat-grid div {
  min-width: 110px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.stat-grid strong {
  display: block;
  font-size: 1.6rem;
}

.stat-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.course-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.course-choice-card {
  margin: 0;
}

.course-choice-card button {
  width: 100%;
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--course-color, var(--primary)) 28%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--course-color, var(--primary)) 8%, #fff), #fff 58%);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
}

.course-choice-card button:hover {
  border-color: color-mix(in srgb, var(--course-color, var(--primary)) 62%, var(--line));
  transform: translateY(-1px);
}

.course-mark {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--course-color, var(--primary));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
}

.course-choice-card strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.today-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.today-head h1 {
  margin-bottom: 2px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.today-status {
  min-width: 180px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--warning);
  border-radius: 8px;
  background: var(--panel);
}

.today-status span,
.today-status strong {
  display: block;
}

.today-status span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.today-status.status-earned { border-left-color: var(--status-earned); }
.today-status.status-missing { border-left-color: var(--status-missing); }
.today-status.status-excused { border-left-color: var(--status-excused); }
.today-status.status-locked { border-left-color: var(--status-locked); }

.class-announcement {
  margin-bottom: 16px;
  padding: 14px 18px;
  border-left: 5px solid var(--accent-gold);
  background: var(--status-pending-bg);
}

.class-announcement p {
  margin: 5px 0 0;
}

.prerequisite-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
}

.prerequisite-callout h2,
.mission-card h2,
.evidence-form-panel h2 {
  margin-bottom: 8px;
  font-size: 1.55rem;
}

.today-workspace,
.today-teacher-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
  gap: 16px;
  align-items: start;
}

.today-workspace > *,
.today-teacher-grid > * {
  min-width: 0;
}

.today-teacher-grid {
  grid-template-columns: minmax(440px, 1.3fr) minmax(300px, 0.7fr);
  margin-bottom: 16px;
}

.mission-card,
.evidence-form-panel,
.today-plan-panel,
.evidence-overview-panel {
  margin: 0;
}

.mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.mission-actions {
  align-items: stretch;
}

.assignment-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -2px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(47, 95, 159, 0.25);
  border-left: 5px solid var(--accent-blue);
  border-radius: 8px;
  background: #f4f7fc;
}

.assignment-handoff.teacher-preview {
  border-color: rgba(23, 111, 103, 0.24);
  border-left-color: var(--primary);
  background: var(--status-earned-bg);
}

.assignment-handoff p {
  margin: 3px 0 0;
}

.assignment-handoff .eyebrow {
  margin-bottom: 2px;
}

.classroom-sync-form {
  margin: -3px 0 14px;
}

.classroom-sync-form small {
  color: var(--muted);
}

.teacher-feedback {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--accent-blue);
  background: rgba(47, 95, 159, 0.07);
}

.teacher-feedback p {
  margin: 4px 0 0;
}

.evidence-history,
.evidence-inbox {
  margin-top: 16px;
}

.evidence-history > summary,
.evidence-inbox > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.evidence-history > summary::-webkit-details-marker,
.evidence-inbox > summary::-webkit-details-marker {
  display: none;
}

.evidence-history > summary em,
.evidence-inbox > summary em {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: normal;
}

.history-list,
.evidence-inbox-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.evidence-inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 11px 12px;
  border-left: 4px solid var(--primary);
  background: #f1f7f5;
}

.evidence-inbox-toolbar p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.evidence-inbox-toolbar span {
  color: var(--muted);
  font-size: .8rem;
}

.history-list > div {
  display: grid;
  grid-template-columns: 72px 150px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.history-list p {
  margin: 0;
}

.history-list span small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.evidence-team-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  color: var(--muted);
  font-size: .78rem;
}

.evidence-team-context strong { color: var(--primary-deep); }
.evidence-form-panel > .evidence-team-context { width: fit-content; margin: 2px 0 12px; padding: 7px 9px; border-left: 3px solid var(--primary); background: var(--soft); }

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

.evidence-counts > div {
  padding: 10px;
  border-left: 3px solid var(--line);
  background: var(--soft);
}

.evidence-counts strong,
.evidence-counts span {
  display: block;
}

.evidence-counts strong {
  font-size: 1.4rem;
}

.evidence-counts span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.evidence-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.evidence-review-copy > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.evidence-review-copy p {
  margin: 7px 0;
}

.evidence-review-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.evidence-review-copy > .evidence-team-context { display: flex; }

.status-badge {
  color: var(--status-pending);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.status-badge.earned { color: var(--status-earned); }
.status-badge.pending { color: var(--status-pending); }
.status-badge.locked { color: var(--status-locked); }
.status-badge.missing { color: var(--status-missing); }
.status-badge.overdue { color: var(--status-missing); }
.status-badge.excused { color: var(--status-excused); }
.status-badge.not_submitted { color: var(--muted); }
.status-badge.not_enrolled { color: #757970; }
.status-badge.calendar_closed { color: #6d5d45; }

.student-recovery-panel { margin-top: 16px; padding: 0; overflow: hidden; }
.student-recovery-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.student-recovery-head h2 { margin: 2px 0 0; font-size: 1.2rem; }
.student-recovery-head > strong { color: var(--danger); }
.student-recovery-list article { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.student-recovery-list article:last-child { border-bottom: 0; }
.student-recovery-list article > div { min-width: 0; }
.student-recovery-list article p { margin: 3px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.student-recovery-list article small { color: var(--muted); }

.recovery-page-actions { margin: -6px 0 16px; }
.recovery-page-grid { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); align-items: start; gap: 16px; }
.recovery-brief,
.recovery-evidence-form { margin: 0; }
.recovery-brief h2,
.recovery-evidence-form h2 { margin: 4px 0 9px; font-size: 1.35rem; }
.recovery-brief > .evidence-team-context { width: fit-content; margin-top: 14px; padding: 7px 9px; border-left: 3px solid var(--primary); background: var(--soft); }

.daily-panel-heading,
.participation-controls,
.week-stepper,
.participation-legend {
  display: flex;
  align-items: center;
  gap: 10px;
}

.daily-panel-heading,
.participation-controls {
  justify-content: space-between;
}

.date-stepper {
  display: flex;
  gap: 6px;
}

.daily-date-label {
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.planned-lesson-lock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 4px solid #b27a11;
  background: var(--status-pending-bg);
}

.planned-lesson-lock > div {
  display: grid;
  gap: 2px;
}

.planned-lesson-lock span {
  color: var(--muted);
  font-size: .8rem;
}

.participation-controls {
  margin-bottom: 12px;
}

.participation-legend {
  flex-wrap: wrap;
  margin: 0 2px 12px;
}

.participation-legend .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.participation-legend b {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.participation-board-panel {
  padding: 0;
  overflow: hidden;
}

.participation-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.participation-table th,
.participation-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}

.participation-table th:first-child,
.participation-table td:first-child {
  border-left: 0;
}

.participation-table thead th {
  background: var(--soft);
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.participation-table thead th:first-child {
  width: 22%;
  text-align: left;
}

.participation-table thead th:last-child {
  width: 10%;
}

.participation-table thead th.active-day {
  box-shadow: inset 0 4px 0 var(--primary);
  background: var(--status-earned-bg);
}

.participation-table thead a,
.participation-status a {
  color: inherit;
  text-decoration: none;
}

.participation-table thead small,
.participation-table tbody th small,
.participation-rate small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: none;
}

.participation-table tbody th {
  text-align: left;
  overflow-wrap: anywhere;
}

.participation-status a {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.participation-status b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.participation-status span {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.participation-status.status-earned { color: var(--status-earned); background: var(--status-earned-bg); }
.participation-status.status-pending { color: var(--status-pending); background: var(--status-pending-bg); }
.participation-status.status-missing { color: var(--status-missing); background: var(--status-missing-bg); }
.participation-status.status-excused { color: var(--status-excused); background: var(--status-excused-bg); }
.participation-status.status-not_submitted { color: var(--muted); background: #f7f8f6; }
.participation-status.status-not_scheduled { color: #a6aaa3; background: var(--panel); }
.participation-status.status-not_enrolled { color: #757970; background: #f1f2ef; }
.participation-status.status-calendar_closed { color: #6d5d45; background: #f5f1e9; }
.participation-rate strong { color: var(--primary-dark); font-size: 1.1rem; }
.participation-note { margin: 10px 2px 0; }

.calendar-exception-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.calendar-exception-panel > summary::-webkit-details-marker { display: none; }
.calendar-exception-panel > summary em { color: var(--muted); font-size: 0.82rem; font-style: normal; }
.calendar-exception-body { margin-top: 16px; border-top: 1px solid var(--line); }

.calendar-exception-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 16px 0;
}

.calendar-exception-form label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-exception-form input,
.calendar-exception-form select { width: 100%; }
.calendar-exception-list { border-top: 1px solid var(--line); }

.calendar-exception-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.calendar-exception-list span,
.calendar-exception-list small { display: block; }
.calendar-exception-list small { margin-top: 2px; color: var(--muted); }
.participation-table thead .schedule-note { color: #6d5d45; font-weight: 800; }

.schedule-exception-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-left: 5px solid var(--accent-gold);
  background: var(--status-pending-bg);
  color: #624b13;
}

.schedule-exception-notice.closed {
  border-left-color: #6d5d45;
  background: #f5f1e9;
  color: #4f4637;
}

.schedule-exception-notice span { font-weight: 700; }
.no-class-panel { border-left: 5px solid #6d5d45; background: #f7f5f0; }
.no-class-panel h2 { margin: 3px 0 7px; }
.no-class-panel p:last-child { margin-bottom: 0; color: var(--muted); }

.evidence-closed-state {
  display: grid;
  place-items: center;
  min-height: 112px;
  margin-top: 8px;
  border: 1px dashed #b8ad99;
  background: #f7f5f0;
  text-align: center;
}

.evidence-closed-state strong { color: #4f4637; font-size: 1.55rem; }
.evidence-closed-state span { color: #6d5d45; font-weight: 700; }

.production-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.production-toolkit { margin-bottom: 18px; padding: 0; }
.production-toolkit > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; }
.production-toolkit > summary::-webkit-details-marker { display: none; }
.production-toolkit > summary em { color: var(--muted); font-size: .8rem; font-style: normal; }
.production-toolkit nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line); }
.production-toolkit nav a { display: grid; gap: 3px; min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.production-toolkit nav a:hover { background: var(--soft); }
.production-toolkit nav span { color: var(--muted); font-size: .78rem; }
.production-view-switch { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.production-admin-grid summary,
.production-stage > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.production-admin-grid summary::-webkit-details-marker,
.production-stage > summary::-webkit-details-marker { display: none; }
.production-admin-grid summary em,
.production-stage > summary em { color: var(--muted); font-size: .8rem; font-style: normal; }
.production-admin-grid form { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.production-stage-stack { display: grid; gap: 10px; }
.production-stage { border: 1px solid var(--line); border-left: 5px solid var(--primary); background: var(--panel); }
.production-stage > summary { padding: 15px 18px; font-weight: 850; }
.production-request-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; padding: 0 14px 14px; border-top: 1px solid var(--line); }
.production-request { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-top: 4px solid var(--primary); background: var(--soft); }
.production-request.archived { opacity: .88; background: #f5f5f2; }
.production-request.priority-high { border-top-color: var(--accent-gold); }
.production-request.priority-urgent { border-top-color: var(--danger); }
.production-request-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.production-request h3 { margin: 0; font-size: 1.1rem; }
.production-request p,
.production-request blockquote { margin: 0; }
.production-request blockquote { display: grid; gap: 3px; padding: 9px 11px; border-left: 3px solid var(--accent-blue); background: var(--panel); }
.production-request blockquote strong { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.production-request dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; margin: 0; font-size: .82rem; }
.production-request dt { color: var(--muted); font-weight: 800; }
.production-request dd { margin: 0; overflow-wrap: anywhere; }
.production-request-tools { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: .8rem; }
.production-status-form { display: grid; gap: 7px; margin-top: 5px; padding-top: 10px; border-top: 1px solid var(--line); }
.production-feedback { margin-top: 2px; }
.production-brief-details,
.production-release-history,
.production-release-form,
.production-request-admin { border: 1px solid var(--line); background: var(--panel); }
.production-brief-details > summary,
.production-release-history > summary,
.production-release-form > summary,
.production-request-admin > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; cursor: pointer; list-style: none; font-size: .82rem; font-weight: 850; }
.production-brief-details > summary::-webkit-details-marker,
.production-release-history > summary::-webkit-details-marker,
.production-release-form > summary::-webkit-details-marker,
.production-request-admin > summary::-webkit-details-marker { display: none; }
.production-brief-details > p { padding: 0 11px 11px; color: var(--muted); }
.production-release-history > summary span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: .72rem; }
.production-release-history ol { display: grid; gap: 8px; margin: 0; padding: 0 10px 10px; list-style: none; }
.production-release-history li { display: grid; gap: 4px; padding: 10px; border-left: 4px solid var(--line); background: var(--soft); }
.production-release-history li.playback-passed { border-left-color: var(--primary); }
.production-release-history li.playback-failed { border-left-color: var(--danger); }
.production-release-history li > div { display: flex; justify-content: space-between; gap: 10px; }
.production-release-history li > div span,
.production-release-history small { color: var(--muted); }
.production-release-history .playback-check { font-size: .76rem; font-weight: 800; }
.production-lock-note { display: grid; gap: 2px; margin-top: 5px !important; padding: 10px 12px; border-left: 4px solid var(--primary); background: #edf5f2; }
.production-lock-note span { color: var(--muted); font-size: .8rem; }
.production-release-form > form { margin: 0; padding: 0 11px 11px; border-top: 1px solid var(--line); }
.production-release-form label > span { color: var(--muted); font-size: .74rem; font-weight: 800; }
.production-request-admin > form { margin: 0; padding: 11px; border-top: 1px solid var(--line); }
.production-request-admin label > span { color: var(--muted); font-size: .74rem; font-weight: 800; }
.production-copy-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.production-copy-form label { display: grid; gap: 5px; min-width: 0; }
.production-archive-form .button,
.production-restore-form .button { width: 100%; }

.production-template-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.production-template-head h1 { margin: 4px 0 6px; }
.production-template-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.production-template-workspace { border: 1px solid var(--line); background: var(--panel); }
.production-template-status { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--soft); }
.production-template-status span { margin-right: auto; color: var(--muted); font-size: .82rem; }
.production-template-workspace fieldset { margin: 0; padding: 18px; border: 0; border-top: 1px solid var(--line); }
.production-template-workspace fieldset:first-of-type { border-top: 0; }
.production-template-workspace legend { padding: 0 8px 0 0; font-size: 1.05rem; font-weight: 850; }
.production-template-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.production-template-fields label { display: grid; align-content: start; gap: 6px; min-width: 0; }
.production-template-fields label:has(textarea) { grid-column: 1 / -1; }
.production-template-fields label > span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.production-template-fields input[type="text"],
.production-template-fields textarea { width: 100%; }
.production-template-check { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 10px 12px; border: 1px solid var(--line); background: var(--soft); }
.production-template-check input { margin-top: 2px; }

.evidence-review-form {
  display: grid;
  gap: 8px;
  align-content: start;
}

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

.status-button {
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.status-button:hover,
.status-button.active {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.section-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.section-admin-card {
  margin: 0;
  border-top: 4px solid var(--course-color, var(--primary));
}

.section-admin-card.archived {
  opacity: 0.64;
}

.section-rollover {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.section-rollover > summary {
  padding: 12px 0 2px;
  cursor: pointer;
  font-weight: 850;
}

.section-rollover form {
  margin-top: 10px;
  padding: 12px;
  border-left: 4px solid var(--accent-blue);
  background: var(--soft);
}

.section-delete {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.section-delete > summary {
  padding: 12px 0 2px;
  cursor: pointer;
  color: var(--danger);
  font-weight: 850;
}

.section-delete form {
  margin-top: 10px;
  padding: 12px;
  border-left: 4px solid var(--danger);
  background: var(--status-missing-bg);
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.health-grid > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

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

.health-grid span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.health-value-good { color: var(--status-earned); }
.health-value-attention { color: var(--status-missing); font-weight: 900; }
.health-value-neutral { color: var(--text); }

.health-summary-badge {
  display: inline-flex;
  width: max-content;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.health-summary-badge.good { background: var(--status-earned-bg); color: var(--primary-dark); }
.health-summary-badge.attention { background: var(--status-missing-bg); color: var(--status-missing); }

.readiness-panel {
  margin-bottom: 16px;
}

.readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.readiness-head p {
  max-width: 760px;
  margin: 4px 0 0;
}

.readiness-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  background: var(--soft);
}

.readiness-summary.ready { border-left-color: var(--primary); }
.readiness-summary.attention { border-left-color: var(--danger); }
.readiness-summary.running { border-left-color: var(--accent-blue); }
.readiness-summary span { color: var(--muted); font-size: 0.82rem; }

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

.readiness-check {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.readiness-check strong,
.readiness-check small {
  display: block;
}

.readiness-check small {
  margin-top: 2px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.readiness-check em {
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.readiness-indicator {
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}

.readiness-check.pass .readiness-indicator { border-color: var(--primary); background: var(--primary); }
.readiness-check.pass em { color: var(--primary); }
.readiness-check.fail .readiness-indicator { border-color: var(--danger); background: var(--danger); }
.readiness-check.fail em { color: var(--danger); }
.readiness-check.running .readiness-indicator { border-color: var(--accent-blue); background: var(--accent-blue); }
.readiness-check.running em { color: var(--accent-blue); }

.backup-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.backup-panel p {
  max-width: 760px;
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .readiness-head,
  .readiness-summary,
  .backup-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .readiness-head .row-actions,
  .readiness-head .button {
    width: 100%;
  }

  .readiness-checks {
    grid-template-columns: 1fr;
  }
}

.classroom-topic-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.classroom-topic-panel p { margin: 4px 0 0; }
.classroom-topic-panel small { display: block; max-width: 760px; margin-top: 5px; color: var(--muted); overflow-wrap: anywhere; }

.classroom-roster-panel { margin-bottom: 18px; padding: 0; }
.classroom-roster-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.classroom-roster-panel > summary::-webkit-details-marker { display: none; }
.classroom-roster-panel > summary span { font-weight: 850; }
.classroom-roster-panel > summary em { color: var(--muted); font-size: .8rem; font-style: normal; }
.classroom-roster-body { display: grid; gap: 16px; padding: 18px; border-top: 1px solid var(--line); }
.classroom-roster-body p { margin: 4px 0 0; }
.classroom-roster-body small { color: var(--muted); }
.classroom-roster-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.classroom-roster-counts > div { padding: 11px 14px; border-left: 1px solid var(--line); }
.classroom-roster-counts > div:first-child { border-left: 0; }
.classroom-roster-counts strong,
.classroom-roster-counts span { display: block; }
.classroom-roster-counts span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.classroom-roster-import { display: grid; gap: 12px; }
.classroom-roster-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.classroom-roster-list label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
.classroom-roster-list input { margin-top: 3px; }
.classroom-roster-list span,
.classroom-roster-list small { display: block; overflow-wrap: anywhere; }
.classroom-portal-only { padding: 13px 15px; border-left: 4px solid var(--warning); background: #fff8e9; }
.classroom-portal-only ul { margin: 9px 0; padding-left: 1.2rem; }
.classroom-portal-only li { margin: 4px 0; }

.classroom-submission-snapshot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 12px 0 5px; border: 1px solid var(--line); }
.classroom-submission-snapshot > div { min-width: 0; padding: 10px 8px; border-left: 1px solid var(--line); text-align: center; }
.classroom-submission-snapshot > div:first-child { border-left: 0; }
.classroom-submission-snapshot strong,
.classroom-submission-snapshot span { display: block; }
.classroom-submission-snapshot strong { font-size: 1.15rem; }
.classroom-submission-snapshot span { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.classroom-submission-snapshot .has-late strong { color: var(--danger); }
.classroom-sync-time { margin: 0 0 9px; color: var(--muted); font-size: .76rem; }
.classroom-maintenance { margin: 12px 0; border: 1px solid var(--line); background: var(--soft); }
.classroom-maintenance > summary,
.classroom-archive-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 850; }
.classroom-maintenance > summary::-webkit-details-marker,
.classroom-archive-panel > summary::-webkit-details-marker { display: none; }
.classroom-maintenance > form { margin: 0; padding: 14px; border-top: 1px solid var(--line); }
.classroom-maintenance .classroom-archive-form { display: flex; align-items: center; gap: 10px; }
.classroom-maintenance .classroom-archive-form small { color: var(--muted); }
.classroom-archive-panel { margin-top: 18px; padding: 0; }
.classroom-archive-panel > summary em { color: var(--muted); font-size: .8rem; font-style: normal; }
.classroom-archive-panel > .resource-list { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.classroom-submission-history { margin: 10px 0 12px; border: 1px solid var(--line); background: var(--soft); }
.classroom-submission-history > summary,
.classroom-activity-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 850; }
.classroom-submission-history > summary::-webkit-details-marker,
.classroom-activity-panel > summary::-webkit-details-marker { display: none; }
.classroom-submission-history > summary em,
.classroom-activity-panel > summary em { color: var(--muted); font-size: .78rem; font-style: normal; }
.classroom-submission-history > div { display: grid; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.classroom-submission-history article { padding: 10px 12px; border-left: 4px solid var(--primary); background: var(--panel); }
.classroom-submission-history article.has-late { border-left-color: var(--warning); }
.classroom-submission-history time { color: var(--muted); font-size: .76rem; font-weight: 800; }
.classroom-submission-history dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 7px 0 0; }
.classroom-submission-history dl div { min-width: 0; }
.classroom-submission-history dt { color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.classroom-submission-history dd { margin: 0; font-weight: 850; }
.classroom-activity-panel { margin-top: 18px; padding: 0; }
.classroom-activity-list { display: grid; gap: 7px; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.classroom-activity-list article { padding: 10px 12px; border-left: 4px solid var(--primary); background: var(--soft); }
.classroom-activity-list article.failed { border-left-color: var(--danger); background: #fff4f4; }
.classroom-activity-list article > div { display: flex; justify-content: space-between; gap: 12px; }
.classroom-activity-list time { color: var(--muted); font-size: .76rem; }
.classroom-activity-list p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }

.assessment-weight-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 8px;
}

.assessment-weight-strip > div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--panel);
  text-align: center;
}

.assessment-weight-strip > div:nth-child(2) { border-top-color: var(--accent-blue); }
.assessment-weight-strip > div:nth-child(3) { border-top-color: var(--accent-gold); }
.assessment-weight-strip strong,
.assessment-weight-strip span { display: block; }
.assessment-weight-strip strong { font-size: 1.45rem; }
.assessment-weight-strip span { color: var(--muted); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }

.assessment-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border-block: 1px solid var(--line);
}

.assessment-principles > div {
  min-width: 0;
  padding: 16px 18px;
}

.assessment-principles > div + div { border-left: 1px solid var(--line); }
.assessment-principles strong { display: block; margin-bottom: 4px; }
.assessment-principles p { margin: 0; color: var(--muted); }

.assessment-settings-panel > summary,
.contract-panel > summary,
.project-contract-summary > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}

.assessment-settings-panel > summary::-webkit-details-marker,
.contract-panel > summary::-webkit-details-marker,
.project-contract-summary > summary::-webkit-details-marker { display: none; }
.assessment-settings-panel > summary em,
.contract-panel > summary em,
.project-contract-summary > summary em { color: var(--muted); font-size: 0.84rem; font-style: normal; }

.mastery-table-wrap { overflow-x: auto; }
.mastery-table { width: 100%; min-width: 900px; border-collapse: collapse; }
.mastery-table th,
.mastery-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.mastery-table th:first-child { position: sticky; left: 0; z-index: 1; min-width: 180px; background: var(--panel); text-align: left; }
.mastery-table thead th { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; }
.mastery-table td.mastered { background: rgba(23, 111, 103, 0.1); color: var(--primary-dark); font-weight: 850; }

.student-assessment-picker {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.student-assessment-picker p { margin-bottom: 0; }
.student-assessment-picker select { min-width: 240px; }
.contract-stack { display: grid; gap: 12px; margin-top: 16px; }
.contract-panel { margin: 0; }
.contract-panel > summary span { display: grid; gap: 3px; }
.contract-panel > summary small { max-width: 820px; color: var(--muted); font-weight: 500; }
.contract-form { margin-top: 16px; border-top: 1px solid var(--line); }
.contract-form h3 { margin: 18px 0 6px; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; }

.contract-criterion {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.contract-criterion input { width: 18px; height: 18px; margin: 2px 0 0; }
.contract-criterion span { display: inline; margin: 0; color: var(--text); font-size: inherit; font-weight: 500; text-transform: none; letter-spacing: 0; }
.contract-criterion strong { color: var(--muted); text-align: right; }
.contract-review-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; margin: 16px 0; }
.contract-review-row select,
.contract-review-row textarea { width: 100%; }

.contract-score { display: flex; align-items: baseline; gap: 10px; margin: 14px 0; }
.contract-score strong { font-size: 2rem; }
.contract-score span { color: var(--muted); font-weight: 800; text-transform: uppercase; }
.student-contract-item { display: grid; grid-template-columns: 60px minmax(0, 1fr) 44px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.student-contract-item p { margin: 0; }
.student-contract-item > span { color: var(--danger); font-size: 0.74rem; font-weight: 850; text-transform: uppercase; }
.student-contract-item.met > span { color: var(--primary); }

.assessment-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.checkpoint-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
  border-block: 1px solid var(--line);
}

.checkpoint-snapshot > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 16px 18px;
}

.checkpoint-snapshot > div + div { border-left: 1px solid var(--line); }
.checkpoint-snapshot span { color: var(--muted); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }
.checkpoint-snapshot strong { font-size: 1.55rem; }
.checkpoint-snapshot em { overflow-wrap: anywhere; color: var(--muted); font-size: 0.8rem; font-style: normal; }
.checkpoint-snapshot .checkpoint-total strong { color: var(--primary-dark); }

.gradebook-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.date-range-form {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 0;
}

.date-range-form label { min-width: 170px; }

.checkpoint-note {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  padding: 10px 2px;
  color: var(--muted);
  font-size: 0.86rem;
}

.checkpoint-note strong { color: var(--text); }
.gradebook-table-panel { padding-inline: 0; }
.gradebook-table-panel > .panel-title { padding-inline: 20px; }
.gradebook-table-wrap { overflow-x: auto; }

.gradebook-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

.gradebook-table th,
.gradebook-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.gradebook-table thead th {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.gradebook-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  background: var(--panel);
}

.gradebook-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 600;
}

.gradebook-table .checkpoint-score {
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 900;
}

.coverage-meter {
  width: 92px;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.coverage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--panther-gold);
}

.text-danger { color: var(--danger); }
.recovery-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.recovery-panel > summary::-webkit-details-marker { display: none; }
.recovery-panel > summary em { color: var(--muted); font-size: 0.84rem; font-style: normal; }
.recovery-list { margin-top: 14px; border-top: 1px solid var(--line); }

.recovery-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.recovery-row:last-child { border-bottom: 0; }
.recovery-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; }
.recovery-copy .status-badge { width: fit-content; }
.recovery-copy time { color: var(--muted); font-size: 0.82rem; font-weight: 750; }
.recovery-copy p,
.recovery-copy small { grid-column: 2 / -1; margin: 0; }
.recovery-copy p { overflow-wrap: anywhere; }
.recovery-copy small { color: var(--muted); }
.recovery-actions { display: grid; gap: 8px; margin: 0; }
.recovery-actions input { width: 100%; }
.student-contract-item > strong { color: var(--muted); text-align: right; }

.challenge-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.challenge-card { min-height: 250px; display: grid; align-content: start; gap: 7px; padding: 15px; border: 1px solid var(--line); border-top: 4px solid var(--accent-blue); border-radius: 8px; background: var(--soft); }
.challenge-card.mastered { border-top-color: var(--primary); }
.challenge-card > span { color: var(--muted); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }
.challenge-card p { margin: 0; color: var(--muted); }
.challenge-card em { margin-top: auto; color: var(--accent-blue); font-size: 0.84rem; font-style: normal; font-weight: 800; }
.challenge-card small { color: var(--muted); }

.technical-challenge-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 5px solid var(--accent-blue);
}

.technical-challenge-callout h2 { margin-bottom: 5px; font-size: 1.45rem; }
.technical-challenge-callout p { margin-bottom: 7px; }
.technical-challenge-callout small { color: var(--muted); font-weight: 800; }

.avid-routine {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 14px 22px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: #f9f6ff;
}

.avid-routine > div { display: grid; align-content: start; }
.avid-routine span { color: #76558f; font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }
.avid-routine p { margin: 0; }
.avid-routine small { grid-column: 2; color: var(--muted); }

.project-contract-summary { margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--unit-color, var(--primary)) 24%, var(--line)); background: var(--soft); }
.project-contract-summary > summary { padding: 11px 13px; }
.project-contract-summary > summary span { font-weight: 850; }
.project-contract-summary > div { padding: 0 13px 13px; }
.project-contract-summary ul { columns: 2; column-gap: 28px; margin: 4px 0 12px; padding-left: 20px; }
.project-contract-summary li { margin: 5px 0; break-inside: avoid; }

.project-client-brief {
  margin-bottom: 14px;
  border-block: 1px solid color-mix(in srgb, var(--unit-color, var(--primary)) 28%, var(--line));
}

.project-client-brief > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}

.project-client-brief > summary::-webkit-details-marker { display: none; }
.project-client-brief > summary span { font-weight: 850; }
.project-client-brief > summary em { color: var(--muted); font-size: 0.84rem; font-style: normal; }
.project-client-brief-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 4px 2px 16px; }
.project-client-brief-body > div { padding: 12px 0; border-top: 1px solid var(--line); }
.project-client-brief-body > div:nth-child(3) { grid-column: 1 / -1; }
.project-client-brief-body p,
.project-client-brief-body ul { margin: 6px 0 0; }
.project-client-brief-body li { margin: 5px 0; }

.lesson-client-brief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: #f6f8f7;
}

.lesson-client-brief > div { min-width: 0; padding: 18px 26px; border-top: 1px solid var(--line); }
.lesson-client-brief > div:nth-child(even) { border-left: 1px solid var(--line); }
.lesson-client-brief .client-brief-heading { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; border-top: 0; border-left: 0; }
.lesson-client-brief span { color: var(--muted); font-size: 0.74rem; font-weight: 850; text-transform: uppercase; }
.lesson-client-brief em { color: var(--muted); font-style: normal; }
.lesson-client-brief p,
.lesson-client-brief ul { margin: 7px 0 0; }
.lesson-client-brief li { margin: 5px 0; }

.studio-task {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  margin: 0 26px 22px;
  border-block: 1px solid var(--line);
}

.studio-task > div { min-width: 0; padding: 16px 18px; }
.studio-task > div:nth-child(even) { border-left: 1px solid var(--line); }
.studio-task-head { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
.studio-task-head h3 { margin: 3px 0 7px; font-size: 1.25rem; }
.studio-task-head p:last-child { margin: 0; color: var(--muted); }
.studio-task ol,
.studio-task ul { margin: 8px 0 0; padding-left: 1.2rem; }
.studio-task li { margin: 7px 0; }
.studio-task-evidence { grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--status-earned-bg); }
.studio-task-evidence p { margin: 6px 0 0; }

.course-choice-card em,
.course-choice-card small {
  color: var(--muted);
  font-style: normal;
}

.course-choice-card em {
  font-size: 1rem;
  font-weight: 800;
}

.notebook-help-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.notebook-help-panel p {
  margin: 0;
}

.notebook-shell {
  display: grid;
  gap: 12px;
}

.notebook-cell {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.markdown-cell {
  padding: 18px;
}

.markdown-cell h2,
.markdown-cell h3,
.markdown-cell h4 {
  margin: 0 0 8px;
}

.markdown-cell p,
.markdown-cell ul {
  margin-bottom: 10px;
}

.markdown-cell code {
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--soft);
  font-size: 0.92em;
}

.code-cell {
  overflow: hidden;
}

.code-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.code-cell-head span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.code-cell textarea {
  width: 100%;
  min-height: 140px;
  display: block;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fcfdfb;
  color: #18231f;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
}

.notebook-output {
  min-height: 42px;
  padding: 12px 14px;
  background: #fbfbf8;
}

.notebook-output pre {
  margin: 0 0 8px;
  white-space: pre-wrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
}

.notebook-output .stderr {
  color: var(--danger);
}

.notebook-output .result {
  color: var(--primary-dark);
  font-weight: 800;
}

.notebook-output img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.panel {
  margin-bottom: 14px;
}

.admin-setup-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.admin-setup-panel > summary::-webkit-details-marker {
  display: none;
}

.admin-setup-panel > summary span {
  font-weight: 900;
}

.admin-setup-panel > summary em {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 760;
}

.admin-setup-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

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

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

.danger-zone > summary span {
  color: var(--danger);
  font-weight: 900;
}

.danger-zone > summary em {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 760;
}

.teacher-grid {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}

.student-management-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.student-progress-list {
  display: grid;
  gap: 10px;
}

.student-progress-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.4fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.student-identity {
  display: grid;
  gap: 4px;
}

.student-identity strong {
  font-size: 1.05rem;
}

.student-identity small,
.student-progress-detail small {
  color: var(--muted);
}

.student-identity p {
  margin: 5px 0 0;
  color: var(--muted);
}

.student-status {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(184, 69, 78, 0.1);
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-status.allowed {
  background: rgba(23, 111, 103, 0.11);
  color: var(--primary-dark);
}

.student-progress-detail {
  display: grid;
  gap: 8px;
}

.student-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.student-progress-head span {
  color: var(--muted);
  font-weight: 850;
}

.student-unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.student-unit-chips span {
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--unit-color) 35%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--unit-color) 10%, #fff);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 820;
}

.student-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.progress-board-panel {
  overflow: hidden;
}

.progress-board-head {
  margin-bottom: 12px;
}

.progress-board-head p {
  margin-bottom: 0;
}

.star-chart-wrap {
  overflow-x: auto;
}

.star-chart-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

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

.star-chart-table thead th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.star-chart-table tbody th {
  min-width: 220px;
}

.star-chart-table tbody th a {
  display: block;
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}

.star-chart-table tbody th a:hover {
  text-decoration: underline;
}

.star-chart-table small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.table-progress-cell {
  display: grid;
  gap: 2px;
}

.star-cell {
  min-width: 130px;
}

.unit-cell-title {
  display: none;
}

.star-progress {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: #e8e5d9;
  clip-path: polygon(50% 0, 61% 34%, 97% 34%, 68% 55%, 79% 90%, 50% 68%, 21% 90%, 32% 55%, 3% 34%, 39% 34%);
  vertical-align: middle;
}

.star-progress i {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--fill);
  background: var(--panther-gold);
}

.student-detail-stack {
  margin-bottom: 14px;
}

.student-detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}

.student-detail-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}

.student-detail-card > summary::-webkit-details-marker {
  display: none;
}

.student-detail-card > summary span {
  display: grid;
  gap: 2px;
}

.student-detail-card > summary strong {
  font-size: 1.04rem;
}

.student-detail-card > summary small,
.student-detail-card > summary em {
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 780;
}

.student-detail-card > summary em {
  margin-left: auto;
}

.student-detail-card > summary::after {
  content: "Open";
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
}

.student-detail-card[open] > summary::after {
  content: "Close";
}

.student-detail-body {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
}

.student-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.student-detail-meta p {
  margin: 0;
  color: var(--muted);
}

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

.student-unit-detail {
  border: 1px solid color-mix(in srgb, var(--unit-color) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--unit-color) 6%, white);
}

.student-unit-detail-head {
  padding: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--unit-color) 22%, var(--line));
}

.student-unit-detail-head span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.student-lesson-checks {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.lesson-check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.lesson-check i {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 2px solid #a9b0ab;
  border-radius: 50%;
}

.lesson-check.done i {
  border-color: var(--unit-color);
  background: var(--unit-color);
}

.lesson-check.locked {
  opacity: 0.55;
}

.lesson-check strong,
.lesson-check small {
  display: block;
}

.lesson-check strong {
  line-height: 1.22;
}

.lesson-check small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.detail-actions {
  justify-content: flex-start;
}

.roster-tools-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.roster-tools-panel > summary::-webkit-details-marker {
  display: none;
}

.roster-tools-panel > summary span {
  font-weight: 900;
}

.roster-tools-panel > summary em {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 760;
}

.roster-tools-panel[open] > summary {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.inner-panel {
  margin-bottom: 0;
  box-shadow: none;
}

.roster-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.roster-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.roster-mini-row span:first-child {
  display: grid;
  gap: 2px;
}

.roster-mini-row small {
  color: var(--muted);
}

.project-context-grid {
  grid-template-columns: 1.2fr 0.8fr;
}

.settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-grid .wide {
  grid-column: 1 / -1;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 780;
}

.check input {
  width: auto;
  min-height: 0;
}

.inline-actions,
.inline-form,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

.student-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
}

.team-create-panel > summary,
.team-edit-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 850;
}

.team-create-panel > summary { padding: 16px 18px; }
.team-create-panel > summary em { color: var(--muted); font-size: .82rem; font-style: normal; }
.team-create-panel[open] > summary { border-bottom: 1px solid var(--line); }
.team-editor-form { padding: 18px; }
.team-editor-form small { color: var(--muted); font-size: .75rem; }

.team-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.team-card.is-mine {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(23, 111, 103, 0.12), var(--shadow);
}

.team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.team-card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.team-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.team-card > .button { justify-self: start; }

.member-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.member-list strong,
.member-list small {
  display: block;
}

.team-role {
  flex: 0 1 auto;
  max-width: 48%;
  color: var(--primary-deep);
  font-size: .75rem;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.team-edit-panel { margin-top: 4px; border-top: 1px solid var(--line); }
.team-edit-panel > summary { padding: 12px 0 2px; }
.team-edit-panel .team-editor-form { grid-template-columns: 1fr; padding: 12px 0 0; }
.team-edit-panel .team-editor-form .wide { grid-column: auto; }
.team-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.team-empty-state { grid-column: 1 / -1; }

.member-list small {
  color: var(--muted);
  font-weight: 700;
}

.unit-stack {
  display: grid;
  gap: 12px;
}

.unit-panel {
  overflow: hidden;
}

.unit-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.unit-panel summary span {
  min-width: 0;
}

.unit-panel summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 750;
}

.unit-panel summary::-webkit-details-marker {
  display: none;
}

.unit-panel summary form {
  margin: 0;
}

.lesson-table {
  border-top: 1px solid var(--line);
}

.lesson-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.lesson-row:last-child {
  border-bottom: 0;
}

.lesson-row strong {
  display: block;
}

.lesson-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.status-dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: #a6aea8;
}

.is-unlocked .status-dot {
  background: var(--primary);
}

.current-lesson-row {
  background: #f7faf6;
}

.current-lesson-row strong {
  color: var(--primary-dark);
}

.lesson-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.lesson-status {
  min-width: 190px;
  display: grid;
  gap: 8px;
  padding: 12px;
  color: var(--primary-dark);
  font-weight: 900;
  text-align: center;
}

.lesson-status.teacher-only {
  color: var(--warning);
}

.arduino-workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.95fr) minmax(260px, 0.95fr);
  gap: 12px;
}

.arduino-workflow-grid > div,
.vocab-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.arduino-workflow-grid h2 {
  margin-bottom: 8px;
}

.workflow-steps {
  display: grid;
  gap: 7px;
  margin: 8px 0 0;
  padding-left: 22px;
}

.workflow-steps li::marker {
  color: var(--primary);
  font-weight: 900;
}

.code-snippet {
  max-height: 260px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #15211e;
  color: var(--status-earned-bg);
  font-size: 0.86rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Wrapper added by copy-code.js so the Copy button can sit over the block. */
.code-block {
  position: relative;
}

.code-block > .code-snippet {
  padding-right: 84px;
}

.code-copy {
  position: absolute;
  top: 15px;
  right: 10px;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid rgba(242, 250, 247, 0.34);
  border-radius: 6px;
  background: rgba(242, 250, 247, 0.12);
  color: var(--status-earned-bg);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 850;
}

.code-copy:hover,
.code-copy:focus-visible {
  background: rgba(242, 250, 247, 0.24);
}

.code-copy.is-copied {
  border-color: #7fd6b5;
  background: #1d6b52;
  color: #fff;
}

@media print {
  .code-copy { display: none; }
  .code-block > .code-snippet { padding-right: 11px; }
}

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

.vocab-card {
  display: grid;
  align-content: start;
  gap: 6px;
}

.vocab-card strong {
  color: var(--primary-dark);
}

.vocab-card p,
.vocab-card small {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

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

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

.guide-grid strong {
  display: block;
  margin-bottom: 5px;
}

.guide-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

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

.teacher-snapshot-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.teacher-guide-block {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.teacher-guide-block h2,
.study-tool-head h2,
.objective-map h2 {
  margin: 0;
  font-size: 1rem;
}

.guide-note-grid,
.resource-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.guide-note-card,
.resource-note-card {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.guide-note-card strong,
.resource-note-card strong {
  display: block;
}

.guide-note-card p,
.resource-note-card p,
.guide-flow-list p {
  margin-bottom: 0;
  color: var(--text);
  font-size: 0.9rem;
}

.resource-note-card small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.resource-note-card details {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.resource-note-card summary {
  padding: 8px 10px;
  cursor: pointer;
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 850;
}

.resource-note-card details p {
  padding: 0 10px 10px;
}

.guide-flow-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.guide-flow-list li {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.guide-flow-list li::marker {
  color: var(--primary);
  font-weight: 900;
}

.edp-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.edp-source-row span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 780;
}

.edp-section-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.edp-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.edp-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

.edp-section summary::-webkit-details-marker {
  display: none;
}

.edp-section summary em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.edp-section-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.edp-section-body p {
  margin-bottom: 0;
  color: var(--text);
}

.edp-table-wrap {
  overflow-x: auto;
  padding: 0 12px 12px;
}

.edp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.edp-table td {
  min-width: 150px;
  padding: 8px;
  border: 1px solid var(--line);
  vertical-align: top;
}

.edp-appendix {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.edp-appendix > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 900;
}

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

.edp-appendix > summary em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
}

.resource-list {
  display: grid;
  gap: 8px;
}

.resource-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  text-decoration: none;
}

.resource-row:hover {
  border-color: #bac3bd;
}

.resource-row span {
  font-weight: 830;
}

.resource-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.resource-row em,
.unit-panel summary em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.88rem;
}

.resource-row em.status-good { color: var(--primary); font-weight: 850; }
.resource-row em.status-bad { color: var(--danger); font-weight: 850; }

code {
  padding: 2px 5px;
  border-radius: 5px;
  background: #eef2ed;
  color: var(--text);
  overflow-wrap: anywhere;
}

.project-home-head h1 {
  max-width: 760px;
}

.trainer-card {
  width: min(360px, 100%);
}

.trainer-card strong,
.compact-panel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.06rem;
}

.trainer-card.required {
  border-color: #c9932a;
}

.trainer-card.complete {
  border-color: #4f7f2b;
}

.prerequisite-alert {
  margin-bottom: 14px;
  border-color: #d8b45f;
  background: var(--status-pending-bg);
  color: #5c4710;
}

.prerequisite-alert strong {
  margin-right: 4px;
}

.project-overview-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(5, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.progress-overview,
.unit-progress-card {
  min-height: 126px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.progress-overview span,
.unit-progress-card span,
.unit-progress-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.progress-overview strong,
.unit-progress-card strong {
  font-size: 1.55rem;
  line-height: 1;
}

.unit-progress-card strong {
  color: var(--unit-color);
}

.project-meter {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ebe5;
}

.project-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--unit-color, var(--primary));
}

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

.compact-panel {
  display: grid;
  align-content: start;
  gap: 8px;
}

.help-status {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgba(23, 111, 103, 0.22);
  border-radius: 8px;
  background: var(--status-earned-bg);
}

.help-status strong {
  margin: 0;
  color: var(--primary-dark);
}

.help-column {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.help-column h2 {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 11px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.help-list {
  display: grid;
  gap: 8px;
  min-height: 94px;
  padding: 10px;
}

.help-entry {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.help-entry.helping {
  border-color: rgba(47, 95, 159, 0.35);
  background: #f3f7fd;
}

.help-entry.done {
  opacity: 0.74;
}

.help-entry strong,
.help-entry small {
  display: block;
}

.help-entry small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.help-entry p {
  margin: 0;
  color: var(--muted);
}

.help-empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.queue-present-page {
  background: #111b18;
  color: #fff;
}

.queue-present-page .button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.present-topbar,
.present-shell {
  width: min(1440px, calc(100% - 36px));
  margin: 0 auto;
}

.present-topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.present-topbar .brand span {
  background: #fff;
  color: var(--primary-dark);
}

.present-topbar .brand strong {
  color: #fff;
}

.present-shell {
  padding: 28px 0 42px;
}

.present-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.present-hero h1 {
  max-width: 880px;
  color: #fff;
  font-size: 6rem;
}

.present-hero .eyebrow,
.present-hero .lead {
  color: rgba(255, 255, 255, 0.72);
}

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

.present-metrics span {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  font-weight: 900;
  text-transform: uppercase;
}

.present-metrics strong {
  display: block;
  color: #fff;
  font-size: 3.5rem;
  line-height: 1;
}

.present-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
  align-items: start;
}

.present-column {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.present-column h2 {
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.present-list {
  display: grid;
  gap: 12px;
  min-height: 240px;
  padding: 14px;
}

.present-entry {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.present-entry.helping {
  border-color: rgba(201, 147, 42, 0.55);
  background: rgba(201, 147, 42, 0.16);
}

.present-entry span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.present-entry strong {
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
}

.present-entry p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.15rem;
}

.present-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.project-unit-panel {
  --unit-color-soft: color-mix(in srgb, var(--unit-color) 11%, white);
}

.project-unit-panel summary {
  border-left: 7px solid var(--unit-color);
}

.project-unit-panel summary em {
  color: var(--unit-color);
  font-weight: 900;
}

.current-unit {
  border-color: color-mix(in srgb, var(--unit-color, var(--primary)) 45%, var(--line));
}

.current-unit > summary {
  background: color-mix(in srgb, var(--unit-color, var(--primary)) 8%, white);
}

.project-unit {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.project-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.22fr);
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--unit-color-soft, var(--soft));
}

.project-brief strong {
  display: block;
  margin-bottom: 5px;
}

.project-brief p {
  margin-bottom: 0;
  color: var(--muted);
}

.project-progress-block {
  display: grid;
  gap: 8px;
}

.project-progress-block span {
  color: var(--unit-color);
  font-size: 1.5rem;
  font-weight: 950;
  text-align: right;
}

.sequence-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 7px;
  padding: 2px 1px 8px;
}

.sequence-dot {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
}

.sequence-dot.open {
  border-color: color-mix(in srgb, var(--unit-color) 45%, var(--line));
  color: var(--unit-color);
}

.sequence-dot.done {
  position: relative;
  border-color: var(--unit-color);
  background: var(--unit-color);
  color: #fff;
}
/* Brady: "we should have a color indicator or checkmark to indicate which
   lessons are done or not." A filled dot is a colour, and colour alone is not
   an answer for a student who cannot pick this one out - so done also carries
   a tick, in its own corner, with the lesson number still readable underneath.
   Same shape the step-group badge already uses. */
.sequence-dot.done::after {
  content: "\2713";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--status-earned);
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
}

.sequence-dot.locked {
  opacity: 0.45;
}

.sequence-dot.current {
  outline: 3px solid color-mix(in srgb, var(--unit-color) 22%, transparent);
  outline-offset: 2px;
}

/* Lesson timeline: the unit lesson map shown above student lesson pages. */
.lesson-timeline {
  margin-bottom: 16px;
  padding: 13px 15px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.lesson-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 18px;
}

.lesson-timeline-place .eyebrow {
  margin-bottom: 2px;
}

.lesson-timeline-place strong {
  margin-right: 8px;
  font-size: 1.02rem;
}

.lesson-timeline-place small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.lesson-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-timeline-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.lesson-timeline-legend .tl-key {
  width: 13px;
  height: 13px;
  border: 2px solid var(--status-locked);
  border-radius: 50%;
  background: var(--panel);
}

.lesson-timeline-legend .tl-key.done {
  border-color: var(--status-earned);
  background: var(--status-earned);
}

.lesson-timeline-legend .tl-key.current {
  border-color: var(--status-earned);
  box-shadow: 0 0 0 2px var(--status-earned-bg);
}

.lesson-timeline-legend .tl-key.open {
  border-color: var(--status-pending);
  background: var(--status-pending-bg);
}

.lesson-timeline-legend .tl-key.locked {
  border-color: var(--status-locked);
  background: var(--status-locked-bg);
}

.lesson-timeline-track {
  display: flex;
  gap: 6px;
  margin: 11px 0 0;
  padding: 3px 1px 9px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.lesson-timeline-track li {
  flex: 0 0 auto;
}

/* The link is the 44px touch target; the visible circle sits inside it. */
.lesson-timeline-step {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
}

.lesson-timeline-step .tl-dot {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--status-locked);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.lesson-timeline-step.done .tl-dot {
  border-color: var(--status-earned);
  background: var(--status-earned);
  color: #fff;
}

.lesson-timeline-step.open .tl-dot {
  border-color: var(--status-pending);
  background: var(--status-pending-bg);
  color: var(--panther-gold-deep);
}

.lesson-timeline-step.locked .tl-dot {
  border-color: var(--status-locked);
  background: var(--status-locked-bg);
  color: var(--status-locked);
}

/* "You are here" stays hollow so it never reads as another finished lesson. */
.lesson-timeline-step.current .tl-dot {
  border: 3px solid var(--primary);
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--status-earned-bg);
  color: var(--primary-dark);
  transform: scale(1.06);
}

a.lesson-timeline-step:hover .tl-dot,
a.lesson-timeline-step:focus-visible .tl-dot {
  border-color: var(--primary-dark);
  color: var(--primary-dark);
}

a.lesson-timeline-step.done:hover .tl-dot,
a.lesson-timeline-step.done:focus-visible .tl-dot {
  background: var(--primary-dark);
  color: #fff;
}

span.lesson-timeline-step {
  cursor: not-allowed;
}

.lesson-timeline-catchup {
  margin: 2px 0 0;
  padding: 9px 12px;
  border-left: 4px solid var(--status-pending);
  border-radius: 0 6px 6px 0;
  background: var(--status-pending-bg);
  color: var(--panther-gold-deep);
  font-size: 0.88rem;
  font-weight: 700;
}

.lesson-timeline-catchup strong {
  font-weight: 900;
}

@media (max-width: 640px) {
  .lesson-timeline { padding: 11px 12px 9px; }
  .lesson-timeline-legend { gap: 3px 10px; }
  .lesson-timeline-legend li { font-size: 0.71rem; }
}

@media print {
  .lesson-timeline { display: none; }
}

.phase-accordion-list {
  display: grid;
  gap: 10px;
}

.phase-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.phase-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  background: var(--unit-color-soft, #eef2ed);
  color: var(--unit-color, var(--muted));
  font-size: 0.86rem;
  font-weight: 950;
  text-transform: uppercase;
}

.phase-section summary::-webkit-details-marker {
  display: none;
}

.phase-section summary em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 830;
  text-transform: none;
}

.phase-section.current-phase {
  border-color: color-mix(in srgb, var(--unit-color) 50%, var(--line));
}

.phase-section.current-phase summary {
  background: color-mix(in srgb, var(--unit-color) 16%, white);
}

.phase-lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 10px;
}

.phase-empty {
  min-height: 72px;
  display: grid;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.phase-lesson {
  display: grid;
  gap: 5px;
  min-height: 166px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-decoration: none;
}

.phase-lesson.available {
  border-color: color-mix(in srgb, var(--unit-color) 30%, var(--line));
}

.phase-lesson.done {
  border-color: var(--unit-color);
  background: color-mix(in srgb, var(--unit-color) 8%, white);
}

.phase-lesson.current-lesson {
  border-color: var(--unit-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--unit-color) 14%, transparent);
}

.phase-lesson.locked {
  opacity: 0.55;
  background: #f1f3ef;
}

.phase-lesson span,
.phase-lesson p,
.phase-lesson small,
.phase-lesson em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 780;
}

.phase-lesson p {
  margin-bottom: 0;
  font-size: 0.85rem;
}

.phase-lesson strong {
  line-height: 1.2;
}

.phase-lesson.done .lesson-card-head strong,
.phase-lesson.done .lesson-title-link {
  color: var(--unit-color);
}

.lesson-title-link {
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  text-decoration: none;
}

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

.complete-form {
  margin: 0;
}

.cert-head h1 {
  max-width: 760px;
}

.cert-status-card {
  width: min(420px, 100%);
}

.cert-status-card strong,
.cert-status-card small {
  display: block;
}

.cert-status-card small {
  color: var(--muted);
  font-weight: 780;
}

.cert-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.cert-domain-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.cert-domain-card span {
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 950;
}

.cert-domain-card strong {
  font-size: 1.08rem;
}

.cert-domain-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.cert-progress-panel { padding: 0; overflow: hidden; }
.cert-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cert-progress-head > div { display: grid; gap: 3px; }
.cert-progress-head > span { color: var(--muted); font-size: .82rem; font-weight: 800; }
.cert-progress-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cert-progress-metrics > div { min-width: 0; padding: 16px 20px; }
.cert-progress-metrics > div + div { border-left: 1px solid var(--line); }
.cert-progress-metrics strong,
.cert-progress-metrics span { display: block; }
.cert-progress-metrics strong { overflow-wrap: anywhere; font-size: 1.35rem; }
.cert-progress-metrics span { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.cert-domain-performance { display: grid; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.cert-domain-progress-row { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(180px, 1.2fr) 52px; gap: 14px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.cert-domain-progress-row:last-child { border-bottom: 0; }
.cert-domain-progress-row > span { overflow-wrap: anywhere; color: var(--muted); font-size: .82rem; font-weight: 800; }
.cert-domain-progress-row > i { height: 8px; overflow: hidden; background: #e2e5de; }
.cert-domain-progress-row > i > b { display: block; height: 100%; background: var(--primary); }
.cert-domain-progress-row > strong { text-align: right; }
.cert-student-progress-list { display: grid; padding: 0 20px 10px; }
.cert-student-progress-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(68px, .55fr)) minmax(170px, 1.2fr); gap: 12px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); }
.cert-student-progress-row:last-child { border-bottom: 0; }
.cert-student-progress-row > div { display: grid; gap: 2px; min-width: 0; }
.cert-student-progress-row small { overflow-wrap: anywhere; color: var(--muted); }
.cert-student-progress-header { min-height: 40px; color: var(--muted); font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.cert-cell-label { display: none; color: var(--muted); font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.cert-trend.up { color: var(--primary); }
.cert-trend.down { color: var(--danger); }
.cert-progress-empty { margin: 0; padding: 18px 0; }
.cert-attempt-history { display: grid; padding: 8px 20px; }
.cert-attempt-history > div { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(170px, 1fr) auto; gap: 14px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--line); }
.cert-attempt-history > div:last-child { border-bottom: 0; }
.cert-attempt-history span,
.cert-attempt-history em { color: var(--muted); font-size: .78rem; font-style: normal; }
.cert-attempt-history em { text-align: right; font-weight: 800; }

.cert-tool-panel {
  display: grid;
  gap: 14px;
}

.study-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.study-tabs button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  font-weight: 850;
}

.study-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.study-pane {
  display: none;
}

.study-pane[hidden] {
  display: none !important;
}

.study-pane.active {
  display: grid;
  gap: 14px;
}

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

.objective-map article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.objective-map p {
  margin-bottom: 0;
  color: var(--muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-row span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.official-source-list {
  margin-top: 2px;
}

.study-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.study-tool-head select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--text);
  font-weight: 800;
}

.flashcard {
  min-height: 240px;
  display: grid;
  align-content: center;
  gap: 12px;
  width: 100%;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #edf5f3 100%);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.flashcard span,
.flashcard em {
  color: var(--primary-dark);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.flashcard strong {
  max-width: 860px;
  font-size: 2rem;
  line-height: 1.2;
}

.study-actions {
  margin-top: 2px;
}

.quiz-domain-picker { display: grid; gap: 3px; }
.quiz-domain-picker > span { color: var(--muted); font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.quiz-domain-picker select { min-height: 38px; max-width: 240px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); color: var(--text); font-weight: 800; }

.quiz-list {
  display: grid;
  gap: 10px;
}

.quiz-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.quiz-card legend {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 0;
}

.quiz-card legend > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.quiz-card legend > strong {
  line-height: 1.4;
}

.quiz-choices {
  display: grid;
  gap: 7px;
}

.quiz-choices label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.quiz-explanation {
  display: none;
  margin-bottom: 0;
  color: var(--muted);
}

.quiz-card.correct {
  border-color: rgba(23, 111, 103, 0.45);
  background: var(--status-earned-bg);
}

.quiz-card.incorrect {
  border-color: rgba(184, 69, 78, 0.45);
  background: #fff7f7;
}

.quiz-card.correct .quiz-explanation,
.quiz-card.incorrect .quiz-explanation {
  display: block;
}

.quiz-result {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-weight: 850;
}

.quiz-result.good {
  border-color: rgba(23, 111, 103, 0.35);
  color: var(--primary-dark);
}

.quiz-result.needs-work {
  border-color: rgba(179, 122, 24, 0.35);
  color: var(--warning);
}

@media (max-width: 760px) {
  .cert-progress-head { align-items: flex-start; flex-direction: column; }
  .cert-progress-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-progress-metrics > div { border-top: 1px solid var(--line); }
  .cert-progress-metrics > div:nth-child(odd) { border-left: 0; }
  .cert-progress-metrics > div:nth-child(-n + 2) { border-top: 0; }
  .cert-domain-progress-row { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; padding: 8px 0; }
  .cert-domain-progress-row > i { grid-column: 1 / -1; grid-row: 2; }
  .cert-domain-progress-row > strong { grid-column: 2; grid-row: 1; }
  .cert-student-progress-header { display: none; }
  .cert-student-progress-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 0; }
  .cert-progress-student { grid-column: 1 / -1; }
  .cert-cell-label { display: block; }
  .cert-student-progress-row > div:last-child { grid-column: 1 / -1; }
  .cert-attempt-history > div { grid-template-columns: 1fr auto; padding: 8px 0; }
  .cert-attempt-history em { grid-column: 1 / -1; text-align: left; }
  .flashcard strong { font-size: 1.35rem; }
}

.narrow-card {
  max-width: 620px;
  margin: 60px auto;
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }

  .nav {
    width: auto;
    justify-content: flex-start;
    gap: 7px;
  }

  .section-pill {
    display: none;
  }

  .nav a,
  .user-pill {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 0.82rem;
  }
}

@media (max-width: 1100px) {
  .star-chart-wrap {
    overflow: visible;
  }

  .star-chart-table,
  .star-chart-table tbody,
  .star-chart-table tr,
  .star-chart-table th,
  .star-chart-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .star-chart-table thead {
    display: none;
  }

  .star-chart-table tr {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
  }

  .star-chart-table th,
  .star-chart-table td {
    padding: 0;
    border-bottom: 0;
  }

  .star-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px auto;
    align-items: center;
    gap: 8px;
  }

  .unit-cell-title {
    display: block;
    font-weight: 850;
  }
}

.lesson-chapter { padding: 0; overflow: hidden; }
.lesson-chapter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.lesson-chapter-head h2 { margin: 4px 0 0; font-size: 1.55rem; }
.lesson-question { padding: 20px 26px; background: var(--status-earned-bg); border-bottom: 1px solid var(--line); }
.lesson-question strong { color: var(--teal); text-transform: uppercase; font-size: .78rem; }
.lesson-question p { margin: 7px 0 0; font-size: 1.13rem; color: var(--ink); }
.student-lesson-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.student-lesson-route a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  min-height: 68px;
  padding: 11px 15px;
  color: var(--text);
  text-decoration: none;
}
.student-lesson-route a + a { border-left: 1px solid var(--line); }
.student-lesson-route a:hover { background: var(--soft); }
.student-lesson-route span,
.lesson-stage-heading > span {
  width: 31px;
  height: 31px;
  display: grid;
  grid-row: span 2;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}
.student-lesson-route strong { font-size: .9rem; }
.student-lesson-route small { color: var(--muted); font-size: .73rem; }
.lesson-vocabulary-first { padding: 20px 26px; border-bottom: 1px solid var(--line); background: var(--status-pending-bg); }
.lesson-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.lesson-section-heading span { color: var(--panther-gold-deep); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.lesson-section-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.lesson-vocabulary-first .vocab-grid { margin: 0; }
.lesson-standards { padding: 20px 26px; border-bottom: 1px solid var(--line); background: var(--status-earned-bg); }
.lesson-standards .lesson-section-heading span { color: var(--primary-dark); }
.lesson-standard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lesson-standard-grid article { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); background: #fff; }
.lesson-standard-grid strong { display: block; margin-bottom: 4px; color: var(--primary-dark); font-size: .82rem; }
.lesson-standard-grid p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.lesson-do-work { padding-top: 2px; border-top: 1px solid var(--line); }
.lesson-stage-heading { display: flex; align-items: center; gap: 12px; }
.lesson-do-work > .lesson-stage-heading { margin: 20px 26px; }
.lesson-stage-heading strong { display: block; font-size: 1.05rem; }
.lesson-stage-heading p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.student-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 22px 26px; }
.lesson-context-drawer { margin: 0 26px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.lesson-context-drawer > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; cursor: pointer; font-weight: 850; }
.lesson-context-drawer > summary em { color: var(--muted); font-size: .82rem; font-style: normal; text-align: right; }
.lesson-context-drawer[open] > summary { border-bottom: 1px solid var(--line); background: var(--status-earned-bg); }
.lesson-context-drawer .lesson-client-brief { margin: 0; border: 0; border-radius: 0; }
.student-guide-grid h3, .agenda-step h3 { margin: 0 0 10px; font-size: 1rem; }
.check-list, .plain-list { margin: 0; padding-left: 1.2rem; }
.check-list li, .plain-list li { margin: 7px 0; }
.check-list li::marker { color: var(--teal); }
.lesson-agenda { padding: 4px 26px 10px; }
.lesson-agenda-details {
  margin: 0 26px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.lesson-agenda-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  list-style-position: inside;
}
.lesson-agenda-details > summary span { display: inline-grid; gap: 3px; }
.lesson-agenda-details > summary strong { color: var(--ink); }
.lesson-agenda-details > summary small,
.lesson-agenda-details > summary em { color: var(--muted); font-size: .8rem; font-style: normal; }
.lesson-agenda-details[open] > summary { border-bottom: 1px solid var(--line); background: var(--status-earned-bg); }
.lesson-agenda-details .lesson-agenda { padding-top: 0; }
.worked-example { margin: 0 26px 18px; padding: 18px; border: 1px solid var(--line); background: var(--soft); }
.worked-example-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.worked-example-head h3 { margin: 0; }
.worked-example-head p { margin: 0; color: var(--muted); }
.worked-example pre { max-height: 360px; overflow: auto; margin: 0; }
.worked-example ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 32px; }
.worked-example li { margin: 0 0 9px; break-inside: avoid; }
.agenda-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.agenda-step-marker { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-weight: 800; }
.agenda-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.agenda-step-head span { color: var(--muted); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.agenda-step p { color: var(--muted); margin: 0 0 10px; }
.agenda-step ol { margin: 0; padding-left: 1.25rem; }
.agenda-step li { margin: 7px 0; }
.guide-finish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--soft); border-top: 1px solid var(--line); }
.guide-finish-grid > div { min-width: 0; }
.lesson-finish-panel { padding: 0; overflow: hidden; scroll-margin-top: 18px; }
.lesson-finish-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--status-earned-bg); }
.lesson-finish-head h2 { margin: 3px 0 0; font-size: 1.45rem; }
.lesson-finish-head .eyebrow { margin: 0; }
.finish-complete-badge { padding: 6px 9px; border-radius: 5px; background: #dcefe8; color: var(--primary-dark); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.lesson-finish-checks { border-bottom: 1px solid var(--line); }
.lesson-checkpoint-action,
.lesson-classroom-finish,
.lesson-completion-only {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.lesson-checkpoint-action { border-left: 6px solid var(--accent-blue); background: #f4f7fc; }
.lesson-checkpoint-action span { display: block; margin-bottom: 3px; color: var(--accent-blue); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.lesson-checkpoint-action p,
.lesson-classroom-finish p,
.lesson-completion-only p { margin: 4px 0 0; color: var(--muted); }
.lesson-daily-evidence { padding: 22px 24px 24px; }
.lesson-daily-evidence > h3 { margin: 0 0 6px; }
.student-evidence-form { margin-top: 14px; }
.lesson-finish-reflection { margin: 0; padding: 15px 24px; border-top: 1px solid var(--line); }
.lesson-finish-reflection summary { cursor: pointer; font-weight: 850; }
.lesson-finish-reflection p { color: var(--muted); }
.today-finish-card { margin: 0; }
.today-finish-card h2 { margin: 16px 0 7px; }
.today-finish-card > .button { margin-top: 12px; }
.today-finish-status { display: grid; gap: 3px; margin-top: 12px; padding: 11px 13px; border-left: 4px solid var(--primary); background: var(--status-earned-bg); }
.today-finish-status span { color: var(--primary-dark); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.today-finish-status strong { font-size: .85rem; font-weight: 750; }
.today-output { display: grid; gap: 3px; margin: 18px 0; padding: 12px 14px; border-left: 4px solid var(--primary); background: var(--status-earned-bg); }
.today-output span { color: var(--muted); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.today-output strong { color: var(--ink); }
.checkpoint-not-needed { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-left: 5px solid var(--accent-gold); }
.checkpoint-not-needed h2 { margin: 4px 0 6px; }
.checkpoint-not-needed p { margin: 0; color: var(--muted); }
.classroom-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr); gap: 18px; align-items: start; }
.classroom-map-form { align-items: end; }
.classroom-map-form label { min-width: min(520px, 100%); }
.classroom-map-form label span, .classroom-assignment-form label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.classroom-map-form select { width: 100%; }
.classroom-unit-list details { border-top: 1px solid var(--line); }
.classroom-unit-list details:first-child { border-top: 0; }
.classroom-unit-list summary { padding: 12px 0; cursor: pointer; font-weight: 850; }
.classroom-lesson-link { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
.classroom-lesson-link:hover, .classroom-lesson-link.active { background: #f2f7f5; border-left-color: var(--teal); }
.classroom-lesson-link em { color: var(--muted); font-size: .75rem; font-style: normal; white-space: nowrap; }
.classroom-composer { position: sticky; top: 12px; }
.classroom-connection-repair { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-left: 5px solid var(--warning); }
.classroom-connection-repair p { margin: 4px 0 0; }
.classroom-composer h2 { margin: 5px 0 8px; }
.classroom-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.classroom-form-row input { width: 100%; }
.student-course-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.course-check-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 12px; }
.course-enrollment-fieldset { margin: 0; padding: 10px 12px; border: 1px solid var(--line); }
.course-enrollment-fieldset legend { padding: 0 5px; color: var(--muted); font-size: .8rem; font-weight: 800; }

.teacher-today-head,
.web-workspace-head {
  align-items: end;
}

.teacher-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.teacher-lesson-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.teacher-lesson-actions > a,
.teacher-lesson-actions > button {
  min-width: 0;
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 11px 15px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.teacher-lesson-actions > :first-child {
  border-left: 0;
}

.teacher-lesson-actions > :hover {
  background: var(--soft);
}

.teacher-lesson-actions span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.teacher-lesson-actions strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.lesson-view-switch {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.lesson-view-switch a {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
}

.lesson-view-switch a + a { border-left: 1px solid var(--line); }
.lesson-view-switch a:hover { background: var(--soft); }
.lesson-view-switch a.active { background: var(--primary); color: #fff; }
.lesson-view-switch span { color: var(--muted); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.lesson-view-switch a.active span { color: #dcefe8; }
.lesson-view-switch strong { font-size: .88rem; }

.teacher-class-guide { border-color: #b9cdc4; }
.teacher-class-guide-head { background: #f7faf8; }
.teacher-class-guide-head .row-actions { justify-content: flex-end; }

.teacher-run-overview {
  display: grid;
  grid-template-columns: .65fr 1fr 1.35fr;
  border-bottom: 1px solid var(--line);
  background: var(--status-earned-bg);
}

.teacher-run-overview > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 15px 18px;
  border-left: 1px solid #c7d8d0;
}

.teacher-run-overview > div:first-child { border-left: 0; }
.teacher-run-overview span { color: var(--primary-dark); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.teacher-run-overview strong { font-size: .9rem; line-height: 1.45; }
.teacher-run-overview small { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.teacher-run-overview a { width: max-content; max-width: 100%; color: var(--primary-dark); font-size: .76rem; font-weight: 850; }

.teacher-class-stage { padding: 26px; scroll-margin-top: 16px; }
.teacher-class-stage + .teacher-class-stage { border-top: 8px solid var(--soft); }
.teacher-class-stage-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.teacher-class-stage-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
}

.lesson-teaching-content {
  margin: 24px 0;
  padding: 22px 0 4px;
  border-top: 4px solid var(--accent, var(--primary));
  border-bottom: 1px solid var(--line, var(--line));
}
.lesson-teaching-content > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 4px 18px;
}
.lesson-teaching-content > header .eyebrow { margin: 0 0 4px; }
.lesson-teaching-content > header h3 { margin: 0; font-size: 1.45rem; }
.lesson-teaching-content > header > span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.lesson-content-list { display: grid; }
.lesson-content-list > details { border-top: 1px solid var(--line, var(--line)); }
.lesson-content-list > details > summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
}
.lesson-content-list > details > summary::-webkit-details-marker { display: none; }
.lesson-content-list > details > summary small,
.lesson-content-list > details > summary strong { display: block; }
.lesson-content-list > details > summary small { color: var(--accent, var(--primary)); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.lesson-content-list > details > summary strong { margin-top: 2px; font-size: 1.04rem; }
.lesson-content-list > details > summary em { color: var(--muted); font-size: .78rem; font-style: normal; font-weight: 800; }
.lesson-content-list > details[open] > summary em { color: var(--accent, var(--primary)); }
.lesson-content-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 4px;
  border-top: 1px solid var(--line, var(--line));
}
.lesson-content-list > details > article { grid-template-columns: minmax(0, 1fr); padding: 8px 4px 22px 58px; border-top: 0; }
.lesson-content-list > details:not([open]) > article { display: none; }
.lesson-content-list > details > article > .lesson-content-number { display: none; }
.lesson-content-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent, var(--primary));
  border-radius: 50%;
  color: var(--accent, var(--primary));
  font-weight: 900;
}
.lesson-content-copy > span {
  display: block;
  margin-bottom: 3px;
  color: var(--accent, var(--primary));
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.lesson-content-copy h4 { margin: 0; font-size: 1.22rem; }
.lesson-content-summary {
  max-width: 82ch;
  margin: 8px 0 0;
  color: var(--ink, #17231f);
  font-size: 1.02rem;
  line-height: 1.6;
}
.lesson-content-copy ul {
  display: grid;
  gap: 7px;
  max-width: 84ch;
  margin: 12px 0 0;
  padding-left: 1.2rem;
}
.lesson-content-copy li { padding-left: 4px; line-height: 1.48; }
.lesson-content-example,
.lesson-content-prompt {
  max-width: 84ch;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 4px solid #d89e20;
  background: var(--status-pending-bg);
  line-height: 1.5;
}
.lesson-content-prompt { border-left-color: var(--accent, var(--primary)); background: #edf7f3; }
.lesson-content-example strong,
.lesson-content-prompt strong { display: block; margin-bottom: 3px; font-size: .76rem; text-transform: uppercase; }

@media (max-width: 680px) {
  .lesson-teaching-content > header { align-items: start; flex-direction: column; gap: 5px; }
  .lesson-content-list article { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .lesson-content-list > details > article { grid-template-columns: minmax(0, 1fr); padding-left: 44px; }
  .lesson-content-number { width: 30px; height: 30px; }
}
.teacher-class-stage-head .eyebrow { margin: 0 0 2px; }
.teacher-class-stage-head h2 { margin: 0; font-size: 1.45rem; }
.teacher-class-stage h3 { margin: 0 0 10px; font-size: 1rem; }

.teacher-launch-grid,
.teacher-class-materials,
.teacher-task-requirements,
.teacher-finish-grid,
.teacher-lab-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-launch-grid > div,
.teacher-class-materials > div,
.teacher-task-requirements > div,
.teacher-finish-grid > div,
.teacher-lab-guide > div {
  min-width: 0;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}

.teacher-launch-grid > div:nth-child(even),
.teacher-class-materials > div:nth-child(even),
.teacher-task-requirements > div:nth-child(even),
.teacher-finish-grid > div:nth-child(even),
.teacher-lab-guide > div:nth-child(even) { border-left: 1px solid var(--line); }
.teacher-class-materials > div:only-child,
.teacher-task-requirements > div:only-child { grid-column: 1 / -1; }

.teacher-launch-grid .lesson-question { padding: 18px 20px; border-bottom: 0; }
.teacher-class-materials { margin-top: 18px; border-bottom: 1px solid var(--line); }
.teacher-class-materials .print-ready-materials { margin: 0; border-top: 0; }
.teacher-task-requirements { margin-top: 22px; border-bottom: 1px solid var(--line); background: var(--soft); }
.teacher-task-requirements ol,
.teacher-task-requirements ul,
.teacher-finish-grid ol,
.teacher-finish-grid ul,
.teacher-lab-guide ol { margin: 0; padding-left: 1.25rem; }
.teacher-task-requirements li,
.teacher-finish-grid li,
.teacher-lab-guide li { margin: 7px 0; line-height: 1.5; }

.teacher-class-guide .teacher-student-directions { max-width: none; margin-top: 6px; }
.teacher-class-guide .teacher-student-directions h3 { margin-bottom: 12px; }
.teacher-class-guide .teacher-student-directions li { min-height: 60px; padding-block: 15px; padding-left: 58px; font-size: 1rem; }
.teacher-class-guide .teacher-student-directions li::before { top: 13px; }

.teacher-class-drawer {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.teacher-class-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 17px;
  cursor: pointer;
}

.teacher-class-drawer > summary span { min-width: 0; display: grid; gap: 3px; }
.teacher-class-drawer > summary small,
.teacher-class-drawer > summary em { color: var(--muted); font-size: .78rem; font-style: normal; }
.teacher-class-drawer[open] > summary { border-bottom: 1px solid var(--line); background: var(--status-earned-bg); }
.teacher-class-drawer > .vocab-grid { padding: 16px; }
.teacher-class-drawer > .lesson-agenda { padding: 0 20px 8px; }
.teacher-class-drawer > .worked-example { margin: 0; border: 0; }
.teacher-prompt-drawer > ul { display: grid; gap: 8px; margin: 0; padding: 16px 38px 18px; }
.teacher-prompt-drawer li { line-height: 1.5; }
.teacher-pacing-list { display: grid; padding: 5px 18px 12px; }
.teacher-pacing-list > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.teacher-pacing-list > div:first-child { border-top: 0; }
.teacher-pacing-list > div > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--primary-dark); font-size: .76rem; font-weight: 900; }
.teacher-pacing-list p { display: grid; gap: 2px; margin: 0; }
.teacher-pacing-list small { color: var(--muted); line-height: 1.4; }
.teacher-pacing-list em { color: var(--primary-dark); font-size: .76rem; font-style: normal; font-weight: 850; white-space: nowrap; }
.teacher-class-agenda { padding: 0; }
.teacher-class-links { margin-top: 24px; }
.teacher-class-finish { background: var(--soft); }
.teacher-finish-grid { border-bottom: 1px solid var(--line); }
.teacher-lab-guide .code-snippet { max-height: 320px; overflow: auto; }

.teacher-plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 16px;
  padding: 18px 20px;
  border-left: 5px solid var(--primary);
  background: var(--status-earned-bg);
}
.teacher-plan-heading .eyebrow { margin: 0 0 3px; }
.teacher-plan-heading h2 { margin: 0; font-size: 1.25rem; }
.teacher-plan-source { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; }

.teacher-lesson-route {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-lesson-brief {
  display: grid;
  grid-template-columns: .65fr 1.5fr 1fr .85fr;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.teacher-lesson-brief > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
}

.teacher-lesson-brief > div:first-child { border-left: 0; }
.teacher-lesson-brief span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.teacher-lesson-brief strong { font-size: .88rem; line-height: 1.42; }
.teacher-lesson-brief small { color: var(--muted); font-size: .73rem; }
.teacher-lesson-brief a,
.teacher-lesson-brief button {
  width: max-content;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.teacher-lesson-textbook,
#lesson-materials,
#do-work,
#finish-lesson,
#teacher-guide { scroll-margin-top: 16px; }

.teacher-student-guide-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.teacher-student-guide-drawer > summary::-webkit-details-marker {
  display: none;
}

.teacher-student-guide-drawer > summary span {
  display: grid;
  gap: 3px;
}

.teacher-student-guide-drawer > summary small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.teacher-student-guide-drawer > summary strong {
  font-size: 1rem;
}

.teacher-student-guide-drawer > summary em {
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 850;
}

.teacher-student-guide-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.teacher-daily-guide {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 14px;
}

.teacher-guide-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
}

.teacher-guide-summary::-webkit-details-marker { display: none; }
.teacher-guide-summary > span { display: grid; gap: 3px; }
.teacher-guide-summary small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.teacher-guide-summary strong { font-size: 1rem; }
.teacher-guide-summary em {
  color: var(--primary-dark);
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}
.teacher-daily-guide[open] > .teacher-guide-summary {
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.teacher-guide-content { min-width: 0; }

.teacher-guide-head,
.teacher-materials-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.teacher-guide-head h2,
.teacher-materials-panel h2 {
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.teacher-guide-head small {
  color: var(--muted);
}

.teacher-daily-guide .teacher-snapshot-grid {
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.teacher-daily-guide .teacher-snapshot-grid > div {
  padding: 16px 18px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: #fbfcfa;
}

.teacher-daily-guide .teacher-snapshot-grid > div:first-child {
  border-left: 0;
}

.teacher-guide-section {
  border-bottom: 1px solid var(--line);
}

.teacher-guide-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 13px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 880;
}

.teacher-guide-section > summary::-webkit-details-marker {
  display: none;
}

.teacher-guide-section > summary::after {
  content: "+";
  color: var(--primary);
  font-size: 1.15rem;
  text-align: center;
}

.teacher-guide-section[open] > summary::after {
  content: "-";
}

.teacher-guide-section > summary em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 760;
}

.teacher-guide-section[open] > summary {
  background: var(--status-earned-bg);
}

.teacher-guide-section-body {
  padding: 0 20px 20px;
}

.teacher-guide-section-body .guide-note-card,
.teacher-guide-section-body .resource-note-card,
.teacher-guide-section-body .guide-flow-list li {
  border-radius: 6px;
  background: var(--soft);
}

.teacher-guide-content > .edp-appendix {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.teacher-guide-content > .edp-appendix > summary {
  padding: 14px 20px;
}

.teacher-materials-panel {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 14px;
}

.teacher-materials-panel > header > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.teacher-materials-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.teacher-materials-grid > div {
  min-width: 0;
  padding: 18px 20px 20px;
}

.teacher-materials-grid > div + div {
  border-left: 1px solid var(--line);
}

.teacher-materials-grid > div > strong,
.print-ready-materials > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.teacher-print-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.print-ready-materials {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  padding: 12px;
  border-left: 4px solid var(--accent-gold);
  background: var(--status-pending-bg);
}

.print-ready-materials a {
  color: var(--primary-dark);
  font-size: 0.88rem;
  font-weight: 800;
}

.bell-ringer-card {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, var(--line));
  border-left: 5px solid var(--accent-gold);
  border-radius: 8px;
  background: var(--status-pending-bg);
}

.daily-bell-set {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.daily-bell-level {
  overflow: hidden;
  border: 1px solid #dfd6bd;
  border-left: 4px solid var(--accent-gold);
  border-radius: 6px;
  background: #fff;
}

.daily-bell-level-dok-2 { border-left-color: var(--primary); }
.daily-bell-level-dok-3 { border-left-color: #4775a7; }

.daily-bell-level > summary {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 11px 16px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.daily-bell-level > summary::-webkit-details-marker { display: none; }

.daily-bell-level > summary::after {
  content: "+";
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
}

.daily-bell-level[open] > summary::after { content: "-"; }

.daily-bell-level > summary span {
  color: var(--panther-gold-deep);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-bell-level-dok-2 > summary span { color: var(--primary-dark); }
.daily-bell-level-dok-3 > summary span { color: #315f90; }

.daily-bell-level > summary strong {
  font-size: .94rem;
  font-weight: 850;
}

.daily-bell-level > summary em {
  color: var(--muted);
  font-size: .76rem;
  font-style: normal;
  font-weight: 750;
}

.daily-bell-question {
  padding: 18px 26px 22px 96px;
  border-top: 1px solid var(--line);
  background: #fffefb;
}

.daily-bell-question .bell-question-stem,
.daily-bell-question .bell-question-paragraphs p {
  max-width: 86ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
}

.daily-bell-question .bell-question-stem { margin-bottom: 12px; font-weight: 750; }
.daily-bell-question .bell-question-choices {
  max-width: 90ch;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.daily-bell-question .bell-question-choices li {
  display: grid;
  grid-template-columns: 1.7em minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.48;
}
.daily-bell-question .bell-choice-marker { color: var(--panther-gold-deep); font-weight: 900; }
.daily-bell-question .bell-question-paragraphs { display: grid; gap: 14px; }

.bell-response-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.bell-response-choice {
  display: grid;
  grid-template-columns: 22px 1.6em minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  line-height: 1.45;
}
.bell-response-choice:has(input:checked) { border-color: var(--primary); background: var(--status-earned-bg); }
.bell-response-choice input { margin-top: 4px; }
.bell-response-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bell-response-actions small[data-state="saved"] { color: var(--primary-dark); font-weight: 800; }
.bell-response-actions small[data-state="error"] { color: var(--danger); font-weight: 800; }
.bell-written-note { margin: 14px 0 0; color: var(--muted); font-size: .86rem; font-weight: 750; }
.bell-written-answer { display: block; margin-top: 12px; }
.bell-written-answer textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; font: inherit; line-height: 1.45; background: var(--panel); color: inherit; resize: vertical; }
.bell-written-answer textarea:focus { border-color: var(--primary); outline: none; }

.lesson-bell-ringer { margin-top: 16px; margin-bottom: 20px; }
.lesson-bell-heading { grid-template-columns: 34px minmax(0, 1fr) auto; }
.lesson-bell-heading > div { display: grid; gap: 2px; }
.lesson-bell-heading > div > strong { font-size: 1.05rem; }
.lesson-bell-heading > div > em { min-width: 0; max-width: 100%; color: var(--muted); font-size: .84rem; font-style: normal; font-weight: 750; overflow-wrap: anywhere; }
.lesson-bell-heading > div > small { color: var(--primary-dark); font-size: .76rem; font-weight: 800; }
.lesson-bell-ringer-review { border-color: #b8d1c5; border-left-color: var(--primary); background: #f4faf7; }
.lesson-bell-ringer-preview { border-color: var(--line); border-left-color: #87958f; background: #f7f9f8; }
.bell-review-choices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bell-review-choices li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; line-height: 1.45; }
.bell-review-choices li.correct { border-color: #79aa8f; background: #edf8f1; }
.bell-review-choices li.correct > strong { align-self: center; padding: 3px 7px; border-radius: 4px; background: #d8efdf; color: #245c3b; font-size: .7rem; text-transform: uppercase; }
.bell-review-answer { display: grid; gap: 5px; margin-top: 14px; padding: 13px 15px; border-left: 4px solid #3a8a5e; background: #edf8f1; }
.bell-review-answer span { color: #245c3b; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.bell-review-answer p { margin: 0; color: #183d29; font-weight: 700; line-height: 1.5; }
.bell-answer-hidden { margin: 13px 0 0; color: var(--muted); font-size: .84rem; font-weight: 750; }

.today-standards { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0; }
.today-standards > span { margin-right: 3px; color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.today-standards > strong { padding: 4px 7px; border: 1px solid #b9cec6; border-radius: 4px; background: var(--status-earned-bg); color: var(--primary-dark); font-size: .72rem; }

.student-lesson-today .page { max-width: 1220px; }
.student-today-head { align-items: end; }
.student-today-head h1 { max-width: 26ch; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.1; }
.student-today-head .lead { max-width: 72ch; margin-bottom: 0; }
.lesson-position { min-width: 130px; display: grid; gap: 4px; padding: 12px 14px; border-left: 4px solid var(--primary); background: #edf6f2; }
.lesson-position span { color: var(--muted); font-size: .74rem; font-weight: 850; text-transform: uppercase; }
.lesson-position strong { font-size: 1rem; }

.student-lesson-section { margin-bottom: 16px; padding: clamp(20px, 3vw, 34px); }
.student-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.student-section-heading > span { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--text); color: #fff; font-weight: 900; }
.student-section-heading .eyebrow { margin: 0 0 2px; }
.student-section-heading h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.05rem); }
.student-ready-grid,
.student-task-grid,
.student-finish-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 22px; }
.student-ready-grid h3,
.student-task-grid h3,
.student-finish-grid h3 { margin: 0 0 10px; font-size: 1.05rem; }
.student-ready-grid ul,
.student-task-grid ul,
.student-task-grid ol,
.student-finish-grid ul,
.student-finish-grid ol { margin: 0; }
.student-standards { margin-top: 22px; border-top: 1px solid var(--line); }
.student-standards summary { padding: 14px 0 2px; color: var(--primary-dark); cursor: pointer; font-weight: 850; }
.student-standards summary span { margin-left: 5px; color: var(--muted); }
.student-standards .lesson-standard-grid { margin-top: 12px; }
.project-connection { margin-bottom: 22px; padding: 14px 16px; border-left: 5px solid var(--accent-blue); background: #f3f7fc; }
.project-connection p { margin: 4px 0 0; color: var(--muted); }
.student-task-scenario { max-width: 78ch; color: var(--muted); font-size: 1.05rem; }
.beginner-directions { max-width: 900px; }
.beginner-directions h3 { margin-bottom: 14px; }
.beginner-directions ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: beginner-step; }
.beginner-directions li { position: relative; min-height: 54px; padding: 12px 12px 12px 54px; border-top: 1px solid var(--line); counter-increment: beginner-step; line-height: 1.55; }
.beginner-directions li::before { content: counter(beginner-step); position: absolute; left: 8px; top: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; }
.student-independent-directions { margin-top: 18px; }
.student-requirements-drawer,
.lesson-help-ladder { margin: 18px 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.student-requirements-drawer > summary,
.lesson-help-ladder > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; cursor: pointer; list-style: none; }
.student-requirements-drawer > summary::-webkit-details-marker,
.lesson-help-ladder > summary::-webkit-details-marker { display: none; }
.student-requirements-drawer > summary span,
.lesson-help-ladder > summary span { display: grid; gap: 3px; }
.student-requirements-drawer > summary small,
.lesson-help-ladder > summary small { color: var(--muted); font-weight: 500; }
.student-requirements-drawer > summary em,
.lesson-help-ladder > summary em { color: var(--primary); font-style: normal; font-weight: 800; white-space: nowrap; }
.student-requirements-drawer[open] > summary,
.lesson-help-ladder[open] > summary { border-bottom: 1px solid var(--line); }
.student-requirements-drawer .student-task-grid { padding: 18px; }
.lesson-help-ladder ol { display: grid; gap: 10px; margin: 0; padding: 18px 28px 20px 44px; }
.lesson-help-ladder li { padding-left: 4px; line-height: 1.55; }
.course-book-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.course-book-hero h1 { margin: 4px 0 8px; }
.course-book-hero p:last-child { max-width: 74ch; margin: 0; color: var(--muted); }
.course-book-search { display: flex; gap: 8px; width: min(100%, 440px); }
.course-book-search label { flex: 1; }
.course-book-search input { width: 100%; }
.course-book-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 58px); align-items: start; }
.course-book-toc { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.course-book-toc-head { display: flex; justify-content: space-between; gap: 15px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.course-book-toc-head a { color: var(--primary); font-weight: 800; }
.course-book-toc details + details { border-top: 1px solid var(--line); }
.course-book-toc summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 800; }
.course-book-toc summary > span { display: grid; gap: 2px; }
.course-book-toc summary small { color: var(--primary-dark); font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.course-book-toc summary em { color: var(--muted); font-style: normal; }
.course-book-toc nav { display: grid; padding: 0 8px 10px; }
.course-book-toc nav a { display: grid; gap: 4px; padding: 11px 10px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
.course-book-toc nav a span { color: var(--muted); font-size: .7rem; font-weight: 750; }
.course-book-toc nav a strong { font-size: .9rem; line-height: 1.3; }
.course-book-toc nav a:hover,
.course-book-toc nav a.active { border-left-color: var(--primary); background: var(--status-earned-bg); }
.course-book-no-results { padding: 16px; }
.course-book-reading { min-width: 0; }
.course-book-article { width: min(100%, 970px); }
.course-book-article-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 4px 0 22px; border-bottom: 1px solid var(--line); }
.course-book-article-head h2 { max-width: 22ch; margin: 5px 0 9px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.04; }
.course-book-article-head p:last-child { max-width: 66ch; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.55; }
.course-book-used-by { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 25px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.course-book-used-by > strong { margin-right: 4px; color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.course-book-used-by a { display: inline-flex; gap: 5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font-size: .75rem; font-weight: 750; text-decoration: none; }
.course-book-used-by a span { color: var(--primary-dark); }
.course-book-prose { max-width: 76ch; }
.course-book-prose p { margin: 0 0 1.28em; color: var(--ink); font-size: 1.08rem; line-height: 1.75; }
.course-book-prose p:first-child::first-letter { float: left; margin: .08em .08em 0 0; color: var(--primary-dark); font-size: 3.4em; font-weight: 900; line-height: .8; }
.course-book-key-points { display: grid; grid-template-columns: minmax(140px, .45fr) minmax(0, 1.55fr); gap: 24px; margin: 32px 0; padding: 22px 24px; border-left: 6px solid var(--primary); background: #edf5f2; }
.course-book-key-points h3,
.course-book-example h3,
.course-book-practice-row h3,
.course-book-section-head h3 { margin: 3px 0 0; font-size: 1.35rem; }
.course-book-key-points ul,
.course-book-practice-row ol,
.course-book-practice-row ul { display: grid; gap: 8px; margin: 0; padding-left: 1.3rem; line-height: 1.55; }
.course-book-example { margin: 34px 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.course-book-example > div:first-child { padding: 20px 23px 17px; }
.course-book-example > div:first-child > p:last-child { max-width: 75ch; margin: 8px 0 0; color: var(--muted); }
.course-book-example .code-snippet { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: .94rem; line-height: 1.58; }
.course-book-practice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 34px 0; border-block: 1px solid var(--line); }
.course-book-practice-row > section { padding: 23px 24px 26px; }
.course-book-practice-row > section + section { border-left: 1px solid var(--line); }
.course-book-practice-row h3 { margin-bottom: 15px; }
.course-book-mistakes { background: var(--status-pending-bg); }
.course-book-vocabulary { margin-top: 34px; padding: 0; border: 0; background: transparent; }
.course-book-section-head { margin-bottom: 13px; }
.course-book-section-head > p:last-child { margin: 6px 0 0; color: var(--muted); }
.course-book-vocabulary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 2px solid var(--ink); }
.course-book-vocabulary dl > div { display: grid; grid-template-columns: minmax(105px, .42fr) minmax(0, 1fr); gap: 14px; padding: 13px 10px; border-bottom: 1px solid var(--line); }
.course-book-vocabulary dl > div:nth-child(odd) { padding-left: 0; }
.course-book-vocabulary dt { font-weight: 850; }
.course-book-vocabulary dd { margin: 0; color: var(--muted); line-height: 1.45; }
.course-book-checks { margin: 36px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.course-book-checks > div:last-child { border-top: 2px solid var(--ink); }
.course-book-checks details { border-bottom: 1px solid var(--line); }
.course-book-checks summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 15px 5px; cursor: pointer; }
.course-book-checks summary span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; }
.course-book-checks summary strong { line-height: 1.45; }
.course-book-checks summary em { color: var(--primary-dark); font-size: .75rem; font-style: normal; font-weight: 850; }
.course-book-checks details > p { margin: 0; padding: 0 52px 17px; color: var(--primary-dark); line-height: 1.55; }
.course-book-article-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 36px; padding: 22px 0; border-top: 2px solid var(--ink); }
.course-book-article-footer p { max-width: 65ch; margin: 0; color: var(--muted); }
.course-book-unavailable { min-height: 340px; display: grid; place-content: center; }
@media (max-width: 900px) {
  .course-book-hero { align-items: stretch; flex-direction: column; }
  .course-book-search { flex-direction: column; width: 100%; }
  .course-book-search label,
  .course-book-search input,
  .course-book-search button { min-width: 0; width: 100%; }
  .course-book-layout { grid-template-columns: 1fr; }
  .course-book-toc { position: static; max-height: none; }
  .course-book-reading { grid-row: 1; }
  .course-book-toc { grid-row: 2; }
  .course-book-article-head { flex-direction: column; }
  .course-book-vocabulary dl { grid-template-columns: 1fr; }
  .course-book-key-points { grid-template-columns: 1fr; }
  .course-book-practice-row { grid-template-columns: 1fr; }
  .course-book-practice-row > section + section { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 620px) {
  .course-book-prose p { font-size: 1rem; }
  .course-book-vocabulary dl > div { grid-template-columns: 1fr; gap: 4px; padding-inline: 0; }
  .course-book-checks summary { grid-template-columns: 30px minmax(0, 1fr); }
  .course-book-checks summary em { grid-column: 2; }
  .course-book-checks details > p { padding-left: 47px; padding-right: 5px; }
  .course-book-article-footer { align-items: stretch; flex-direction: column; }
}

.lesson-learning-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid #a9cbc4;
  border-left: 6px solid var(--primary);
  border-radius: 8px;
  background: #eef7f4;
}
.lesson-learning-path h2 { margin: 3px 0 5px; font-size: 1.25rem; }
.lesson-learning-path p:last-child { margin: 0; color: var(--muted); }
.lesson-learning-path .row-actions { flex-shrink: 0; }

.remote-lesson-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.remote-lesson-hero h1 { max-width: 28ch; margin: 4px 0 9px; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.1; }
.remote-lesson-hero p:last-child { max-width: 70ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.remote-lesson-hero-actions { display: grid; justify-items: end; gap: 9px; }
.remote-lesson-hero-actions > span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--soft); color: var(--muted); font-size: .75rem; font-weight: 850; }
.remote-lesson-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.remote-lesson-route a { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 13px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.remote-lesson-route a:first-child { border-left: 0; }
.remote-lesson-route span { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 900; }
.remote-lesson-route strong { min-width: 0; font-size: .82rem; }
.remote-lesson-goal { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr); margin: 0 0 14px; border: 1px solid var(--line); border-left: 6px solid #d49a1f; border-radius: 8px; background: var(--status-pending-bg); }
.remote-lesson-goal > div { padding: 20px 22px; }
.remote-lesson-goal > div + div { border-left: 1px solid var(--line); }
.remote-lesson-goal h2 { max-width: 55ch; margin: 3px 0 0; font-size: 1.3rem; line-height: 1.45; }
.remote-lesson-goal span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.remote-lesson-goal strong { line-height: 1.45; }
.remote-lesson-standards { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.remote-lesson-standards summary { display: flex; justify-content: space-between; gap: 18px; padding: 12px 16px; cursor: pointer; }
.remote-lesson-standards summary span { color: var(--muted); font-size: .75rem; }
.remote-lesson-standards ul { display: grid; gap: 7px; margin: 0; padding: 14px 22px 17px 43px; border-top: 1px solid var(--line); }
.remote-lesson-standards li strong { margin-right: 7px; color: var(--primary-dark); }
.remote-lesson-retrieval { margin: 22px 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.remote-lesson-retrieval > h2 { margin: 3px 0 14px; font-size: 1.35rem; }
.remote-lesson-retrieval details { border-top: 1px solid var(--line); }
.remote-lesson-retrieval summary { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 13px 2px; cursor: pointer; }
.remote-lesson-retrieval summary span { color: var(--primary-dark); font-size: .73rem; font-weight: 900; }
.remote-lesson-retrieval summary strong { line-height: 1.45; }
.remote-lesson-retrieval details ol,
.remote-lesson-retrieval details p { margin: 0; padding: 0 20px 14px 84px; line-height: 1.5; }
.remote-lesson-reading { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin: 22px 0; padding: 22px; border: 1px solid #9dc5bc; border-radius: 8px; background: #edf6f3; }
.remote-lesson-reading h2 { margin: 4px 0 5px; font-size: 1.45rem; }
.remote-lesson-reading p:last-child { max-width: 68ch; margin: 0; color: var(--muted); }
.remote-response-workspace { margin-top: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.remote-response-workspace > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px; border-bottom: 1px solid var(--line); }
.remote-response-workspace > header h2 { margin: 3px 0 6px; font-size: 1.55rem; }
.remote-response-workspace > header p:last-child { margin: 0; color: var(--muted); }
.remote-response-workspace > header > span { padding: 6px 9px; background: var(--soft); color: var(--muted); font-size: .72rem; font-weight: 850; }
.remote-response-form { display: grid; }
.remote-response-form > label { display: grid; gap: 9px; padding: 20px 23px; border-top: 1px solid var(--line); }
.remote-response-form > label:first-of-type { border-top: 0; }
.remote-response-form > label > span { display: flex; align-items: center; gap: 10px; }
.remote-response-form > label b { display: grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; }
.remote-response-form > label small { max-width: 105ch; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.remote-response-form textarea { min-height: 145px; resize: vertical; }
.remote-response-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 17px 23px; border-top: 1px solid var(--line); background: var(--soft); }
.remote-response-actions > span { margin-left: auto; color: var(--muted); font-size: .75rem; }

@media (max-width: 760px) {
  .lesson-learning-path,
  .remote-lesson-hero,
  .remote-lesson-reading { align-items: stretch; flex-direction: column; }
  .remote-lesson-hero-actions { justify-items: start; }
  .remote-lesson-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .remote-lesson-route a:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .remote-lesson-route a:nth-child(4) { border-top: 1px solid var(--line); }
  .remote-lesson-goal { grid-template-columns: 1fr; }
  .remote-lesson-goal > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .remote-lesson-retrieval summary { grid-template-columns: 1fr; }
  .remote-lesson-retrieval details ol,
  .remote-lesson-retrieval details p { padding-left: 22px; }
}
.student-lesson-section .worked-example { margin-top: 28px; }

.student-resource-shelf { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.student-resource-shelf h3 { margin: 0 0 12px; }
.student-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.student-resource-grid a { min-width: 0; display: grid; align-content: start; gap: 5px; min-height: 82px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.student-resource-grid a:hover { border-color: var(--primary); background: #f4f9f7; }
.student-resource-grid span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.student-resource-grid strong { overflow-wrap: anywhere; font-size: .92rem; }
.lesson-tool-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px 17px; border-left: 5px solid var(--accent-blue); background: #f3f7fc; }
.lesson-tool-callout p { margin: 4px 0 0; color: var(--muted); }
.lesson-completion-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--line); }
.lesson-completion-bar > div { display: grid; gap: 3px; }
.lesson-completion-bar span { color: var(--primary-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; }

.teacher-daily-page .page { max-width: 1320px; }
.teacher-head-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.teacher-head-actions form { margin: 0; }
.teacher-day-bar { display: flex; align-items: end; gap: 20px; margin-bottom: 16px; padding: 16px 18px; }
.teacher-day-bar .date-stepper { flex: 0 0 auto; }
.teacher-day-plan-form { min-width: 0; display: grid; flex: 1; grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.teacher-day-plan-form label { min-width: 0; margin: 0; }
.teacher-day-plan-form select,
.teacher-day-plan-form input { width: 100%; }
.teacher-lesson-overview { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.teacher-lesson-overview > * { min-width: 0; }
.teacher-lesson-main { margin: 0; }
.teacher-lesson-title-row { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.teacher-lesson-title-row h2 { margin: 0 0 18px; font-size: clamp(1.55rem, 2.4vw, 2.25rem); }
.status-badge-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-lock-form { display: inline-flex; margin: 0; }
.teacher-snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; border: 1px solid var(--line); }
.teacher-snapshot-grid > div { min-width: 0; display: grid; gap: 5px; padding: 13px 15px; }
.teacher-snapshot-grid > div:nth-child(even) { border-left: 1px solid var(--line); }
.teacher-snapshot-grid > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.teacher-snapshot-grid span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.teacher-snapshot-grid strong { overflow-wrap: anywhere; font-size: .9rem; line-height: 1.4; }
.teacher-vocab-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; }
.teacher-vocab-line span { margin-right: 3px; color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.teacher-vocab-line strong { padding: 5px 8px; border: 1px solid #bdd0c8; border-radius: 4px; background: #f2f8f5; color: var(--primary-dark); font-size: .74rem; }
.teacher-standards-drawer { margin-top: 14px; border-top: 1px solid var(--line); }
.teacher-standards-drawer summary { padding-top: 13px; cursor: pointer; font-size: .82rem; font-weight: 850; }
.teacher-standards-drawer .lesson-standard-grid { margin-top: 12px; }
.teacher-lesson-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.teacher-lesson-actions form { margin: 0; }
.teacher-lesson-side { display: grid; gap: 16px; }
.teacher-lesson-side .panel { margin: 0; }
.teacher-bell-summary > p { margin: 7px 0 12px; }
.bell-live-count { display: grid; gap: 1px; margin-bottom: 13px; border: 1px solid var(--line); background: var(--line); }
.bell-live-count span { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #fff; color: var(--muted); font-size: .78rem; font-weight: 800; }
.bell-live-count strong { color: var(--text); }
.teacher-materials-quick ul { margin: 10px 0 0; padding-left: 1.2rem; }
.teacher-materials-quick li { margin: 5px 0; font-size: .86rem; }
.teacher-notes-drawer,
.teacher-class-tools,
.teacher-course-map { margin-bottom: 16px; }
.teacher-notes-drawer > summary,
.teacher-class-tools > summary,
.teacher-course-map > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 850; }
.teacher-notes-drawer > summary em,
.teacher-class-tools > summary em,
.teacher-course-map > summary em { color: var(--muted); font-size: .78rem; font-style: normal; font-weight: 700; }
.teacher-notes-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; margin-top: 20px; }
.teacher-notes-columns > section { min-width: 0; border-top: 4px solid var(--primary); padding-top: 10px; }
.teacher-notes-columns h3 { margin: 0 0 11px; }
.teacher-notes-columns section > div + div { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.teacher-notes-columns strong { font-size: .88rem; }
.teacher-notes-columns ul { margin: 7px 0 0; padding-left: 1.1rem; }
.teacher-notes-columns li { margin: 5px 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.teacher-class-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 26px; margin-top: 18px; }
.teacher-class-tool-grid nav { display: grid; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.teacher-class-tool-grid nav a { padding: 10px 11px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-size: .84rem; font-weight: 800; }
.teacher-course-map > .unit-stack { margin-top: 18px; }

@media (max-width: 820px) {
  .student-ready-grid,
  .student-task-grid,
  .student-finish-grid { grid-template-columns: 1fr; }
  .student-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-tool-callout,
  .lesson-completion-bar { align-items: stretch; flex-direction: column; }
  .teacher-day-bar { align-items: stretch; flex-direction: column; }
  .teacher-day-plan-form,
  .teacher-lesson-overview,
  .teacher-notes-columns,
  .teacher-class-tool-grid { grid-template-columns: 1fr; }
  .enrollment-shell { min-height: 0; grid-template-columns: 1fr; padding-block: 38px; }
}

@media (max-width: 560px) {
  .student-today-head { align-items: stretch; }
  .lesson-position { min-width: 0; }
  .student-resource-grid { grid-template-columns: 1fr; }
  .daily-bell-question { padding-inline: 14px; }
  .bell-response-actions { align-items: stretch; flex-direction: column; }
}

.daily-step-label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.daily-step-label span {
  width: 27px;
  height: 27px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
}

.daily-step-label em {
  margin-left: auto;
  font-style: normal;
}

.bell-ringer-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 -4px;
}

.bell-ringer-editor-head > span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bell-ringer-editor-head a {
  color: var(--primary-dark);
  font-size: .78rem;
  font-weight: 850;
}

.bell-ringer-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.25fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, var(--line));
  border-left: 4px solid var(--accent-gold);
  border-radius: 8px;
  background: var(--status-pending-bg);
}

.bell-ringer-editor label:first-child {
  grid-row: span 2;
}

.bell-ringer-editor textarea,
.bell-ringer-editor select {
  width: 100%;
}

.teacher-tools-drawer,
.student-tools-drawer {
  margin-top: 16px;
  padding: 0;
  overflow: hidden;
}

.teacher-tools-drawer > summary,
.student-tools-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 900;
}

.teacher-tools-drawer > summary span,
.student-tools-drawer > summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.teacher-tools-drawer[open] > summary,
.student-tools-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
}

.teacher-tools-drawer > :not(summary),
.student-tools-drawer > :not(summary) {
  margin: 16px;
}

.deployment-safety-note {
  border-left: 5px solid var(--accent-blue);
  background: #f4f7fc;
}

.web-checkpoint-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.web-checkpoint-flow > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  gap: 3px 10px;
  padding: 15px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent-blue);
  border-radius: 8px;
  background: var(--panel);
}

.web-checkpoint-flow span {
  width: 30px;
  height: 30px;
  display: grid;
  grid-row: span 2;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 900;
}

.web-checkpoint-flow p {
  margin: 3px 0 0;
  color: var(--muted);
}

.web-upload-panel,
.web-checkpoint-roster {
  margin-bottom: 16px;
}

.web-upload-form {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.web-upload-form label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
}

.web-upload-form input {
  width: 100%;
}

.checkpoint-student-list {
  display: grid;
  gap: 7px;
}

.checkpoint-student-list a {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
}

.checkpoint-student-list a:hover,
.checkpoint-student-list a.active {
  border-color: var(--accent-blue);
  background: #f4f7fc;
}

.checkpoint-student-list span,
.checkpoint-student-list em {
  color: var(--muted);
}

.checkpoint-student-list em {
  font-style: normal;
  font-size: 0.78rem;
  white-space: nowrap;
}

.web-preview-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.web-check-results ul {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.web-check-results li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.web-check-results li span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.web-check-results li.pass {
  border-left: 4px solid var(--primary);
}

.web-check-results li.review {
  border-left: 4px solid var(--warning);
}

.web-preview-stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.web-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.web-preview-toolbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-preview-stage iframe {
  width: 100%;
  height: clamp(460px, 68vh, 820px);
  display: block;
  border: 0;
  background: #fff;
}

@media (max-width: 1020px) {

  .today-workspace,
  .today-teacher-grid,
  .evidence-review-row,
  .production-admin-grid,
  .production-template-fields {
    grid-template-columns: 1fr;
  }

  .production-template-fields label:has(textarea) { grid-column: 1; }
  .production-template-head { align-items: flex-start; flex-direction: column; }
  .production-template-actions { justify-content: flex-start; }

  .assignment-handoff {
    align-items: flex-start;
    flex-direction: column;
  }

  .classroom-connection-repair {
    align-items: stretch;
    flex-direction: column;
  }

  .web-checkpoint-flow {
    grid-template-columns: 1fr;
  }

  .web-upload-form,
  .checkpoint-student-list a {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .checkpoint-student-list em {
    white-space: normal;
  }

  .assessment-principles { grid-template-columns: 1fr; }
  .assessment-principles > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .technical-challenge-callout { align-items: stretch; flex-direction: column; }
  .project-client-brief-body,
  .lesson-client-brief,
  .studio-task { grid-template-columns: 1fr; }
  .project-client-brief-body > div:nth-child(3),
  .lesson-client-brief .client-brief-heading,
  .studio-task-head,
  .studio-task-evidence { grid-column: 1; }
  .lesson-client-brief > div:nth-child(even),
  .studio-task > div:nth-child(even) { border-left: 0; }

  .dashboard-head,
  .lesson-hero {
    display: grid;
  }

  .login-visual {
    max-width: none;
  }

  .login-showcase {
    max-width: none;
  }

  .signin-card {
    margin-top: 0;
  }

	  .row-actions {
	    justify-content: flex-start;
	  }

	  .study-tool-head {
	    align-items: stretch;
	    display: grid;
	  }

	  .study-tool-head select {
	    width: 100%;
	  }

	  .project-progress-block span {
	    text-align: left;
	  }

  .gradebook-controls,
  .participation-controls,
  .calendar-exception-form,
  .recovery-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .gradebook-controls,
  .participation-controls,
  .calendar-exception-form { display: grid; }
  .checkpoint-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkpoint-snapshot > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .checkpoint-snapshot > div:nth-child(4) { border-top: 1px solid var(--line); }
	}

@media (max-width: 640px) {
  h1,
  .dashboard-head h1,
  .lesson-hero h1 {
    font-size: 1.75rem;
  }

  .today-head h1 {
    font-size: 1.8rem;
  }

  .present-hero h1 {
    font-size: 3rem;
  }

  .present-metrics strong {
    font-size: 2.2rem;
  }

  .present-entry strong {
    font-size: 2rem;
  }

  .present-entry p {
    font-size: 1rem;
  }

  .form-pair {
    grid-template-columns: 1fr;
  }

  .production-release-history li > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .production-template-actions,
  .production-template-actions .button {
    width: 100%;
  }

  .production-copy-form {
    grid-template-columns: 1fr;
  }

  .production-template-status {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 0;
  }

  .teacher-head-actions,
  .teacher-head-actions .button,
  .web-upload-form .button {
    width: 100%;
  }

  .bell-ringer-editor {
    grid-template-columns: 1fr;
  }

  .bell-ringer-editor label:first-child {
    grid-row: auto;
  }

  .daily-step-label {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .daily-step-label em {
    width: 100%;
    margin-left: 36px;
  }

  .lesson-bell-heading > div > em {
    width: auto;
    margin-left: 0;
  }

  .bell-ringer-card { padding: 16px; }
  .daily-bell-level > summary { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 8px; padding-inline: 12px; }
  .daily-bell-level > summary em { display: none; }
  .daily-bell-question { padding: 16px; }

  .nav {
    justify-content: flex-start;
  }

  .nav-shell {
    width: 100%;
    justify-content: space-between;
  }

  .section-switcher {
    min-width: 0;
    flex: 1 1 0;
  }

  .section-switcher label,
  .section-switcher select {
    width: 100%;
    min-width: 0;
  }

  .nav-primary a:nth-child(n + 2) {
    display: none;
  }

  .nav-menu {
    margin-right: 4px;
  }

  .nav-menu > nav {
    position: fixed;
    top: 68px;
    right: 14px;
    left: 14px;
  }

  .today-head,
  .prerequisite-callout,
  .backup-panel,
  .classroom-topic-panel,
  .classroom-roster-panel > summary,
  .student-assessment-picker,
  .contract-panel > summary,
  .project-contract-summary > summary,
  .evidence-history > summary,
  .evidence-inbox > summary,
  .evidence-inbox-toolbar,
  .planned-lesson-lock {
    align-items: stretch;
    flex-direction: column;
  }

  .evidence-inbox-toolbar form,
  .evidence-inbox-toolbar .button,
  .planned-lesson-lock form,
  .planned-lesson-lock .button {
    width: 100%;
  }

  .classroom-roster-counts { grid-template-columns: 1fr; }
  .classroom-roster-counts > div { border-top: 1px solid var(--line); border-left: 0; }
  .classroom-roster-counts > div:first-child { border-top: 0; }
  .classroom-submission-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classroom-submission-snapshot > div { border-top: 1px solid var(--line); }
  .classroom-submission-snapshot > div:nth-child(odd) { border-left: 0; }
  .classroom-submission-snapshot > div:nth-child(-n + 2) { border-top: 0; }
  .classroom-maintenance .classroom-archive-form { align-items: stretch; flex-direction: column; }
  .classroom-submission-history dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classroom-activity-list article > div { align-items: flex-start; flex-direction: column; gap: 2px; }

  .calendar-exception-panel > summary,
  .calendar-exception-list > div,
  .schedule-exception-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .project-client-brief > summary,
  .lesson-context-drawer > summary,
  .lesson-client-brief .client-brief-heading {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .studio-task { margin-inline: 18px; }

  .today-status {
    width: 100%;
  }

  .evidence-counts,
  .status-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .form-pair { grid-template-columns: 1fr; }

  .daily-panel-heading,
  .week-stepper {
    align-items: stretch;
    flex-direction: column;
  }

  .date-stepper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }

  .participation-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .date-stepper .button,
  .week-stepper .button,
  .participation-controls > .button {
    width: 100%;
  }

  .participation-table,
  .participation-table tbody,
  .participation-table tr {
    display: block;
  }

  .participation-table thead {
    display: none;
  }

  .participation-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .participation-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
  }

  .participation-table tbody th {
    grid-column: 1 / -1;
    background: var(--soft);
  }

  .participation-table th,
  .participation-table td {
    border-left: 0;
    text-align: left;
  }

  .participation-table td {
    display: grid;
    grid-template-columns: minmax(72px, 0.8fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--line);
  }

  .participation-table td:nth-child(even) {
    border-left: 0;
  }

  .participation-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .participation-status a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
  }

  .participation-status b {
    width: 26px;
    height: 26px;
  }

  .participation-rate strong,
  .participation-rate small {
    margin: 0;
  }

  .assessment-weight-strip { width: 100%; }
  .checkpoint-snapshot { grid-template-columns: 1fr; }
  .checkpoint-snapshot > div + div,
  .checkpoint-snapshot > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .date-range-form { display: grid; grid-template-columns: 1fr; }
  .date-range-form label { min-width: 0; }
  .checkpoint-note,
  .recovery-panel > summary { align-items: stretch; flex-direction: column; }
  .recovery-copy { grid-template-columns: auto minmax(0, 1fr); }
  .recovery-copy time { grid-column: 2; }
  .contract-review-row,
  .avid-routine { grid-template-columns: 1fr; }
  .avid-routine small { grid-column: 1; }
  .project-contract-summary ul { columns: 1; }

  .resource-row,
  .unit-panel summary,
  .admin-setup-panel > summary,
  .roster-tools-panel > summary,
  .danger-zone > summary,
  .admin-setup-body,
  .progress-board-head,
  .student-detail-card > summary,
  .showcase-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .visual-stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .button,
  .inline-form input,
  .google-signin {
    width: 100%;
  }

  .student-actions {
    justify-content: flex-start;
  }

  .classroom-form-row {
    grid-template-columns: 1fr;
  }

  .student-guide-grid,
  .guide-finish-grid {
    grid-template-columns: 1fr;
  }

  .lesson-chapter-head,
  .agenda-step-head,
  .worked-example-head {
    align-items: stretch;
    flex-direction: column;
  }

  .worked-example ol {
    columns: 1;
  }
}

.lesson-evidence-workspace-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 5px solid var(--accent, var(--primary));
  background: var(--status-earned-bg);
}
.lesson-evidence-workspace-callout span,
.lesson-evidence-workspace-callout strong { display: block; }
.lesson-evidence-workspace-callout span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.lesson-evidence-workspace-callout strong { margin-top: 4px; font-size: 1.08rem; }
.lesson-evidence-workspace-callout p { margin: 5px 0 0; color: var(--muted); }
.lesson-evidence-workspace-callout small { display: block; max-width: 880px; margin-top: 7px; color: var(--muted); line-height: 1.45; }
.evidence-workspace-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 24px; }
.evidence-workspace-hero h1 { max-width: 18ch; margin: 0; }
.evidence-workspace-panel { padding: 0; overflow: hidden; }
.evidence-workspace-status { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--soft); }
.evidence-workspace-status strong,
.evidence-workspace-status span { display: block; }
.evidence-workspace-status span { margin-top: 3px; color: var(--muted); font-size: .8rem; }
.evidence-workspace-status p { margin: 0; color: var(--muted); }
.evidence-workspace-form { display: grid; gap: 0; }
.evidence-prompt { border-bottom: 1px solid var(--line); }
.evidence-prompt > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; }
.evidence-prompt > summary::-webkit-details-marker { display: none; }
.evidence-prompt > summary > span { display: flex; align-items: center; gap: 10px; }
.evidence-prompt > summary b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-size: .78rem; }
.evidence-prompt > summary em { color: var(--muted); font-size: .76rem; font-style: normal; font-weight: 800; }
.evidence-prompt.complete > summary em { color: var(--primary-dark); }
.evidence-prompt[open] > summary { background: var(--status-earned-bg); }
.evidence-prompt > label { display: grid; gap: 9px; padding: 0 22px 22px; }
.evidence-prompt small { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.evidence-prompt textarea { width: 100%; resize: vertical; }
.evidence-workspace-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px; }
.evidence-workspace-feedback { margin: 18px 22px 0; }
.evidence-workspace-feedback.status-revise { border-left: 4px solid var(--danger); }
.evidence-workspace-feedback small { color: var(--muted); }
.evidence-local-draft { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid #e5c869; background: #fff8df; }
.evidence-local-draft[hidden] { display: none; }
.evidence-local-draft > div:first-child { display: grid; gap: 2px; }
.evidence-local-draft span { color: var(--muted); font-size: .82rem; }
.evidence-local-draft-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.evidence-browser-backup { align-self: center; margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 750; }

.student-workspace-drafts { border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.student-workspace-drafts > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 850; }
.student-workspace-drafts > summary::-webkit-details-marker { display: none; }
.student-workspace-drafts > summary em { color: var(--muted); font-size: .82rem; font-style: normal; }
.student-workspace-list { display: grid; padding: 0 14px 12px; }
.student-workspace-list > p { margin: 0; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.student-workspace-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.student-workspace-row > div { display: grid; gap: 3px; min-width: 0; }
.student-workspace-row small { color: var(--muted); }
.workspace-review-status { width: fit-content; padding: 5px 8px; border-radius: 999px; background: var(--status-locked-bg); color: var(--status-locked); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.workspace-review-status.status-reviewed { background: var(--status-earned-bg); color: var(--primary-dark); }
.workspace-review-status.status-revise { background: var(--status-missing-bg); color: var(--status-missing); }
.workspace-review-status.status-resubmitted { background: var(--status-pending-bg); color: var(--status-pending); }

.workspace-review-inbox { margin-top: 16px; padding: 0; overflow: hidden; }
.workspace-review-inbox > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 850; }
.workspace-review-inbox > summary::-webkit-details-marker { display: none; }
.workspace-review-inbox > summary em { color: var(--muted); font-size: .82rem; font-style: normal; text-align: right; }
.workspace-review-inbox[open] > summary { border-bottom: 1px solid var(--line); }
.workspace-review-inbox-body { padding: 0 20px; }
.workspace-review-queue-list { display: grid; }
.workspace-review-queue-row { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(260px, 1.35fr) auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.workspace-review-queue-student,
.workspace-review-queue-work { display: grid; gap: 3px; min-width: 0; }
.workspace-review-queue-student small,
.workspace-review-queue-work small { overflow-wrap: anywhere; color: var(--muted); }
.workspace-review-empty { display: grid; gap: 3px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); }
.workspace-review-empty span { color: var(--muted); }
.workspace-review-inbox-footer { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-height: 48px; color: var(--muted); font-size: .82rem; }
.workspace-review-inbox-footer span:first-child { margin-right: auto; }

.workspace-review-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: 24px; }
.workspace-review-hero h1 { max-width: 20ch; margin: 0; }
.workspace-review-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.workspace-review-summary > div { display: grid; gap: 3px; }
.workspace-review-summary span:not(.workspace-review-status) { color: var(--muted); font-size: .84rem; }
.workspace-review-responses { padding: 0; overflow: hidden; }
.workspace-review-responses > .panel-title { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.workspace-review-response { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.workspace-review-response:last-child { border-bottom: 0; }
.workspace-review-response > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-size: .78rem; font-weight: 850; }
.workspace-review-response > div { display: grid; gap: 6px; min-width: 0; }
.workspace-review-response small { color: var(--muted); line-height: 1.45; }
.workspace-review-response p { margin: 4px 0 0; overflow-wrap: anywhere; }
.workspace-review-feedback { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 24px; margin-top: 16px; }
.workspace-review-feedback > small { grid-column: 1 / -1; }
.workspace-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.workspace-review-next { color: var(--muted); line-height: 1.45; text-align: right; }

.lesson-workspace-pulse { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lesson-workspace-pulse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lesson-workspace-pulse-head a,
.lesson-workspace-pulse-link { color: var(--primary-dark); font-size: .82rem; font-weight: 850; }
.lesson-workspace-pulse-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; border-block: 1px solid var(--line); }
.lesson-workspace-pulse-grid > div { display: grid; gap: 2px; padding: 10px 8px; border-right: 1px solid var(--line); }
.lesson-workspace-pulse-grid > div:last-child { border-right: 0; }
.lesson-workspace-pulse-grid strong { font-size: 1.05rem; }
.lesson-workspace-pulse-grid span { color: var(--muted); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.lesson-workspace-pulse-link { display: inline-flex; margin-top: 10px; }

.critique-head { align-items: end; }
.critique-head h1 { max-width: 15ch; }
.critique-progress-card { min-width: 250px; padding: 18px 20px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.critique-progress-card > span,
.critique-progress-card > strong { display: block; }
.critique-progress-card > span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.critique-progress-card > strong { margin: 4px 0 12px; font-size: 1.75rem; }

.critique-create-panel { padding: 0; overflow: hidden; }
.critique-create-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 850; }
.critique-create-panel > summary::-webkit-details-marker { display: none; }
.critique-create-panel > summary em { color: var(--muted); font-size: .82rem; font-style: normal; }
.critique-create-panel[open] > summary { border-bottom: 1px solid var(--line); }
.critique-create-form { max-width: 850px; padding: 20px; }

.critique-round-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 18px 0; }
.critique-round-tabs a { display: grid; gap: 3px; min-width: 0; padding: 11px 13px; border: 1px solid var(--line); background: white; color: var(--ink); text-decoration: none; }
.critique-round-tabs a:hover,
.critique-round-tabs a.active { border-color: var(--primary); box-shadow: inset 0 -3px var(--primary); }
.critique-round-tabs span { overflow-wrap: anywhere; font-weight: 850; }
.critique-round-tabs em { color: var(--muted); font-size: .76rem; font-style: normal; }
.critique-empty-state { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px; }
.critique-empty-state h2 { margin: 4px 0 7px; }
.critique-empty-state p:last-child { margin-bottom: 0; color: var(--muted); }

.critique-round-shell { display: grid; gap: 16px; scroll-margin-top: 20px; }
.critique-round-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 24px; }
.critique-round-header h2 { margin: 7px 0 6px; }
.critique-round-header p { max-width: 76ch; margin: 0; color: var(--muted); }
.critique-status { display: inline-flex; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.critique-status.status-draft { background: var(--status-pending-bg); color: var(--status-pending); }
.critique-status.status-open { background: var(--status-earned-bg); color: var(--primary-dark); }
.critique-status.status-closed { background: var(--status-locked-bg); color: var(--status-locked); }

.critique-curation-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 16px; align-items: start; }
.critique-sample-list,
.critique-add-sample { padding: 20px; }
.critique-sample-list > .panel-title,
.critique-add-sample > .panel-title { margin-bottom: 12px; }
.critique-draft-sample { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.critique-draft-sample > div { display: grid; gap: 2px; min-width: 0; }
.critique-draft-sample span { color: var(--primary-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.critique-draft-sample small { overflow-wrap: anywhere; color: var(--muted); }
.field-note { margin: -5px 0 4px; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.critique-share-confirm { align-items: start; padding: 12px; border: 1px solid #dbc787; background: #fff9e8; }
.critique-share-confirm input { margin-top: 3px; }
.critique-share-confirm span { color: #62501c; font-size: .82rem; line-height: 1.45; }

.critique-protocol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); background: var(--soft); }
.critique-protocol > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 15px 18px; }
.critique-protocol > div + div { border-left: 1px solid var(--line); }
.critique-protocol span { display: grid; grid-row: 1 / span 2; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-size: .76rem; font-weight: 900; }
.critique-protocol strong { align-self: end; }
.critique-protocol p { margin: 0; color: var(--muted); font-size: .82rem; }

.critique-teacher-board,
.critique-student-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.critique-teacher-sample,
.critique-student-sample { padding: 0; overflow: hidden; }
.critique-teacher-sample > header,
.critique-student-sample > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.critique-teacher-sample > header > div,
.critique-student-sample > header > div { display: grid; gap: 3px; min-width: 0; }
.critique-teacher-sample > header span,
.critique-student-sample > header span { color: var(--primary-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.critique-teacher-sample h3,
.critique-student-sample h3 { margin: 0; overflow-wrap: anywhere; }
.critique-teacher-sample header small { color: var(--muted); overflow-wrap: anywhere; }
.critique-context { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: .88rem; }
.critique-response-stack { display: grid; padding: 0 20px; }
.critique-response-stack > .muted { padding: 4px 0; }
.critique-teacher-response { display: grid; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.critique-teacher-response:last-child { border-bottom: 0; }
.critique-teacher-response.is-hidden { opacity: .68; }
.critique-teacher-response > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.critique-teacher-response > header span { color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.critique-teacher-response dl,
.critique-received-feedback dl,
.critique-closed-response dl { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px 12px; margin: 0; }
.critique-teacher-response dt,
.critique-received-feedback dt,
.critique-closed-response dt { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.critique-teacher-response dd,
.critique-received-feedback dd,
.critique-closed-response dd { margin: 0; overflow-wrap: anywhere; }
.critique-teacher-response form { display: flex; justify-content: flex-end; }

.critique-student-sample.is-owner { border-top: 4px solid var(--panther-gold-deep); }
.critique-response-form { display: grid; gap: 14px; padding: 18px 20px 20px; }
.critique-response-form label { display: grid; gap: 7px; }
.critique-response-form label > span { font-weight: 850; }
.critique-response-form label small { margin-left: 5px; color: var(--muted); font-weight: 500; }
.critique-response-form textarea { width: 100%; resize: vertical; }
.critique-saved-note { color: var(--muted); }
.critique-received-feedback,
.critique-closed-response { display: grid; gap: 14px; padding: 18px 20px 20px; }
.critique-received-feedback dl + dl { padding-top: 14px; border-top: 1px solid var(--line); }
.critique-closed-note { padding: 18px 20px; }
.critique-support-card { border-top: 4px solid var(--panther-gold-deep); }

.portfolio-head { align-items: end; }
.portfolio-head h1 { max-width: 14ch; }
.portfolio-add-panel { padding: 0; overflow: hidden; }
.portfolio-add-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 850; }
.portfolio-add-panel > summary::-webkit-details-marker { display: none; }
.portfolio-add-panel > summary em { color: var(--muted); font-size: .82rem; font-style: normal; }
.portfolio-add-panel[open] > summary { border-bottom: 1px solid var(--line); }
.portfolio-form { padding: 20px; }
.portfolio-add-panel > .portfolio-form { max-width: 900px; }
.portfolio-empty { display: grid; gap: 5px; padding: 28px; }
.portfolio-empty h2,
.portfolio-empty p { margin: 0; }
.portfolio-empty p { color: var(--muted); }
.portfolio-prerequisite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }

.portfolio-class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.portfolio-student-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 18px; color: var(--ink); text-decoration: none; }
.portfolio-student-card:hover { border-color: var(--primary); }
.portfolio-student-card > span { overflow-wrap: anywhere; font-weight: 850; }
.portfolio-student-card > strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--primary-dark); font-size: 2rem; }
.portfolio-student-card > em { color: var(--muted); font-size: .78rem; font-style: normal; }
.portfolio-student-card > small { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); }
.portfolio-student-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; }
.portfolio-student-header > div { display: grid; gap: 3px; }
.portfolio-student-header span { color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.portfolio-student-header h2,
.portfolio-student-header p { margin: 0; }
.portfolio-student-header p { color: var(--muted); }

.portfolio-course-stack { display: grid; gap: 24px; margin-top: 20px; }
.portfolio-course-group { display: grid; gap: 12px; }
.portfolio-course-group > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 3px solid var(--primary); }
.portfolio-course-group > header span { font-size: 1.12rem; font-weight: 900; }
.portfolio-course-group > header em { color: var(--muted); font-size: .8rem; font-style: normal; }
.portfolio-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; align-items: start; }
.portfolio-item { padding: 0; overflow: hidden; border-top: 4px solid var(--panther-gold-deep); scroll-margin-top: 18px; }
.portfolio-item.status-draft { border-top-color: #8a8983; }
.portfolio-item > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 19px 20px 15px; border-bottom: 1px solid var(--line); }
.portfolio-item > header > div { display: grid; gap: 3px; min-width: 0; }
.portfolio-item > header > div > span { overflow-wrap: anywhere; color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.portfolio-item h2 { margin: 0; overflow-wrap: anywhere; font-size: 1.15rem; }
.portfolio-visibility { flex: none; padding: 5px 8px; border-radius: 999px; background: var(--status-pending-bg); color: var(--status-pending); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.status-draft .portfolio-visibility { background: var(--status-locked-bg); color: var(--status-locked); }
.portfolio-item > p { margin: 0; padding: 18px 20px; line-height: 1.55; }
.portfolio-skill-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 18px; }
.portfolio-skill-list span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--muted); font-size: .75rem; font-weight: 800; }
.portfolio-item > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--soft); }
.portfolio-item > footer small { color: var(--muted); }
.portfolio-edit-panel { border-top: 1px solid var(--line); }
.portfolio-edit-panel > summary { padding: 14px 20px; cursor: pointer; list-style: none; color: var(--primary-dark); font-weight: 850; }
.portfolio-edit-panel > summary::-webkit-details-marker { display: none; }
.portfolio-edit-panel[open] > summary { border-bottom: 1px solid var(--line); }
.portfolio-edit-panel .portfolio-form { padding-bottom: 16px; }
.portfolio-delete-form { display: grid; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--line); background: #fff8f7; }
.portfolio-delete-form .check-row { align-items: start; }
.portfolio-delete-form .check-row input { margin-top: 3px; }
.portfolio-support-card { border-top: 4px solid #3569a8; }

.student-summary-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.student-summary-head > div:first-child { display: grid; gap: 4px; }
.student-summary-head h1,
.student-summary-head p { margin: 0; }
.student-summary-head h1 { font-size: 3rem; }
.student-summary-head > div:first-child > p:last-child { color: var(--muted); overflow-wrap: anywhere; }
.conference-snapshot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.conference-snapshot > div { display: grid; gap: 3px; min-width: 0; padding: 19px 20px; }
.conference-snapshot > div + div { border-left: 1px solid var(--line); }
.conference-snapshot strong { color: var(--primary-dark); font-size: 1.8rem; line-height: 1; }
.conference-snapshot span { font-weight: 900; }
.conference-snapshot small { overflow-wrap: anywhere; color: var(--muted); }
.conference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.conference-section { min-width: 0; padding: 21px 22px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow); }
.conference-section h2 { margin: 0 0 16px; font-size: 1.1rem; }
.conference-progress { grid-column: 1 / -1; }
.conference-progress > div { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 2fr) 48px; gap: 16px; align-items: center; padding: 10px 0; }
.conference-progress > div + div { border-top: 1px solid var(--line); }
.conference-progress > div > span { display: grid; gap: 2px; min-width: 0; }
.conference-progress > div strong { overflow-wrap: anywhere; }
.conference-progress small { color: var(--muted); }
.conference-progress em { color: var(--muted); font-style: normal; font-weight: 900; text-align: right; }
.conference-progress .project-meter { height: 9px; overflow: hidden; border-radius: 999px; background: var(--soft); }
.conference-progress .project-meter i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.conference-status-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; }
.conference-status-list dt,
.conference-status-list dd { padding: 8px 0; border-bottom: 1px solid var(--line); }
.conference-status-list dt { color: var(--muted); }
.conference-status-list dd { margin: 0; padding-left: 24px; font-weight: 900; text-align: right; }
.conference-note { display: grid; gap: 5px; margin: 17px 0 0; line-height: 1.5; }
.conference-note strong { font-size: .75rem; text-transform: uppercase; }
.conference-showcase-item { display: grid; gap: 4px; margin: 0; padding: 10px 0; }
.conference-showcase-item + .conference-showcase-item { border-top: 1px solid var(--line); }
.conference-showcase-item span { color: var(--muted); font-size: .84rem; }
.conference-skills { padding: 14px 0 0; }
.conference-next { grid-column: 1 / -1; }
.conference-next ol { display: grid; gap: 8px; margin: 0; padding-left: 22px; line-height: 1.45; }
.conference-notes-space { min-height: 108px; margin-top: 18px; border: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--line) 32px); }
.conference-notes-space span { display: inline-block; padding: 7px 9px; background: white; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }

.archive-class-head { margin-bottom: 18px; }
.archive-summary-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.archive-summary-grid > div { display: grid; gap: 3px; min-width: 0; padding: 18px; }
.archive-summary-grid > div + div { border-left: 1px solid var(--line); }
.archive-summary-grid strong { color: var(--primary-dark); font-size: 1.7rem; line-height: 1; }
.archive-summary-grid span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.archive-status-band { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 13px 16px; border: 1px solid var(--line); border-top: 0; background: var(--soft); color: var(--muted); font-size: .82rem; }
.archive-status-band strong { color: var(--text); }
.archive-record-section { margin-top: 22px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.archive-record-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.archive-record-title h2,
.archive-record-title p { margin: 0; }
.archive-record-title h2 { font-size: 1.15rem; }
.archive-record-title > span { color: var(--muted); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.archive-record-head,
.archive-record-row { display: grid; grid-template-columns: minmax(190px, 1.6fr) minmax(118px, .9fr) repeat(6, minmax(82px, .7fr)); gap: 12px; align-items: center; }
.archive-record-head { padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.archive-record-row { padding: 14px 18px; }
.archive-record-row + .archive-record-row { border-top: 1px solid var(--line); }
.archive-record-row > div { display: grid; gap: 2px; min-width: 0; }
.archive-record-row strong,
.archive-record-row small { overflow-wrap: anywhere; }
.archive-record-row > div:not(.archive-record-student) strong { font-size: 1.05rem; }
.archive-record-row small { color: var(--muted); font-size: .72rem; }
.archive-record-student strong { font-size: .9rem; }
.archive-record-section .empty-state { margin: 18px; }

.sr-only {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bell-bank-head { align-items: end; }
.bell-bank-toolbar { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1fr); gap: 18px 28px; align-items: end; margin-bottom: 22px; }
.bell-bank-course-form label { display: grid; gap: 6px; }
.bell-bank-course-form label > span { color: var(--muted); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.bell-bank-course-form select { min-height: 44px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.bell-bank-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--soft); }
.bell-bank-counts > div { display: grid; gap: 2px; padding: 10px 14px; text-align: center; }
.bell-bank-counts > div + div { border-left: 1px solid var(--line); }
.bell-bank-counts strong { color: var(--primary-dark); font-size: 1.35rem; line-height: 1; }
.bell-bank-counts span { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.bell-bank-exports { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.copy-status { grid-column: 1 / -1; min-height: 20px; margin: -8px 0 0; color: var(--primary-dark); font-size: .82rem; font-weight: 800; }
.bell-bank-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bell-bank-filters > div { display: grid; gap: 2px; }
.bell-bank-filters > div span { color: var(--muted); font-size: .82rem; }
.segmented-links { display: inline-grid; grid-template-columns: repeat(4, minmax(72px, auto)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.segmented-links a { padding: 9px 13px; color: var(--muted); font-size: .82rem; font-weight: 850; text-align: center; text-decoration: none; }
.segmented-links a + a { border-left: 1px solid var(--line); }
.segmented-links a.active { background: var(--primary); color: #fff; }
.bell-bank-search { display: flex; align-items: center; gap: 7px; }
.bell-bank-search input { min-height: 38px; width: min(320px, 55vw); padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.bell-bank-list { display: grid; gap: 9px; }
.bell-bank-item { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 8px 20px rgba(30, 41, 38, .04); }
.bell-bank-item > summary { min-height: 54px; display: grid; grid-template-columns: 76px minmax(220px, 1fr) minmax(150px, .7fr); gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.bell-bank-item > summary::-webkit-details-marker { display: none; }
.bell-bank-item > summary span,
.bell-bank-item > summary strong { font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.bell-bank-item > summary span { color: var(--muted); }
.bell-bank-item > summary strong { color: var(--primary-dark); }
.bell-bank-item > summary em { min-width: 0; overflow: hidden; font-style: normal; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.bell-bank-item[open] > summary { border-bottom: 1px solid var(--line); background: var(--soft); }
.bell-bank-item-body { display: grid; }
.bell-bank-question,
.bell-bank-answer { min-width: 0; padding: 22px; }
.bell-bank-question > p { margin: 0; font-size: 1rem; font-weight: 720; white-space: normal; }
.alpha-list { margin: 18px 0 0; padding-left: 32px; list-style-type: upper-alpha; }
.alpha-list li { margin: 8px 0; padding-left: 6px; }
.bell-bank-answer { border-top: 1px solid #eadcae; background: #fbf8ee; }
.bell-bank-answer > span { display: block; margin-bottom: 9px; color: #84601d; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.bell-bank-answer > strong { display: block; margin-bottom: 10px; font-size: .9rem; }
.bell-bank-answer p { margin: 0 0 12px; color: var(--text); font-size: .86rem; }
.bell-bank-answer small { display: block; color: var(--muted); line-height: 1.45; }
.bell-bank-item-body > footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 8px 14px 8px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; font-weight: 800; }
.bell-bank-set-meta { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(260px, 1fr); border-bottom: 1px solid var(--line); background: var(--soft); }
.bell-bank-set-meta > div { display: grid; gap: 3px; padding: 11px 16px; }
.bell-bank-set-meta > div + div { border-left: 1px solid var(--line); }
.bell-bank-set-meta span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.bell-bank-set-meta strong { font-size: .84rem; }
.bell-bank-question-set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--line); gap: 1px; }
.bell-bank-question-set > article { min-width: 0; padding: 18px; background: #fff; }
.bell-bank-question-set > article > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.bell-bank-question-set > article > header strong { color: var(--primary-dark); }
.bell-bank-question-set > article > header span { color: var(--muted); font-size: .7rem; text-transform: capitalize; }
.bell-bank-question-set > article > p { font-size: .9rem; font-weight: 720; line-height: 1.48; }
.bell-bank-question-set .alpha-list { font-size: .82rem; }
.bell-bank-question-set .bell-bank-answer { margin: 16px -18px -18px; padding: 15px 18px; }

@media (max-width: 700px) {
  .student-recovery-list article { align-items: start; grid-template-columns: 1fr; }
  .student-recovery-list article .button { justify-self: start; }
  .recovery-page-grid { grid-template-columns: 1fr; }
  .evidence-local-draft { align-items: stretch; flex-direction: column; }
  .evidence-local-draft-actions { justify-content: flex-start; }
  .evidence-browser-backup { width: 100%; margin-left: 0; }
  .evidence-prompt > summary,
  .lesson-agenda-details > summary { align-items: flex-start; flex-direction: column; }
  .evidence-workspace-actions .button { flex: 1 1 100%; }
  .lesson-workspace-pulse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-workspace-pulse-grid > div:nth-child(2) { border-right: 0; }
  .lesson-workspace-pulse-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .lesson-evidence-workspace-callout,
  .evidence-workspace-hero,
  .evidence-workspace-status,
  .workspace-review-hero,
  .workspace-review-feedback { grid-template-columns: 1fr; align-items: stretch; }
  .student-workspace-row { grid-template-columns: 1fr; align-items: start; }
  .workspace-review-inbox > summary,
  .workspace-review-inbox-footer { align-items: flex-start; flex-direction: column; }
  .workspace-review-inbox > summary em { text-align: left; }
  .workspace-review-queue-row { grid-template-columns: 1fr auto; }
  .workspace-review-queue-student,
  .workspace-review-queue-work { grid-column: 1 / -1; }
  .workspace-review-queue-row .button { justify-self: end; }
  .workspace-review-inbox-footer span:first-child { margin-right: 0; }
  .student-workspace-row .button,
  .workspace-review-hero .button { width: 100%; }
  .workspace-review-summary { align-items: flex-start; flex-direction: column; }
  .critique-head { align-items: stretch; }
  .critique-progress-card { min-width: 0; }
  .critique-create-panel > summary,
  .critique-empty-state,
  .critique-teacher-sample > header,
  .critique-student-sample > header { align-items: flex-start; flex-direction: column; }
  .critique-round-header,
  .critique-curation-grid,
  .critique-teacher-board,
  .critique-student-board { grid-template-columns: 1fr; }
  .critique-draft-sample { grid-template-columns: 1fr auto; }
  .critique-draft-sample > div { grid-column: 1 / -1; }
  .critique-protocol { grid-template-columns: 1fr; }
  .critique-protocol > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .critique-teacher-response dl,
  .critique-received-feedback dl,
  .critique-closed-response dl { grid-template-columns: 1fr; gap: 4px; }
  .critique-teacher-response dd,
  .critique-received-feedback dd,
  .critique-closed-response dd { margin-bottom: 8px; }
  .portfolio-head { align-items: stretch; }
  .portfolio-add-panel > summary,
  .portfolio-student-header,
  .portfolio-item > header,
  .portfolio-item > footer { align-items: flex-start; flex-direction: column; }
  .portfolio-prerequisite,
  .portfolio-item-grid { grid-template-columns: 1fr; }
  .portfolio-stats { width: 100%; }
  .portfolio-item > footer .button { width: 100%; }
  .student-summary-head { align-items: stretch; flex-direction: column; }
  .student-summary-head h1 { font-size: 2rem; }
  .student-summary-head .row-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .conference-snapshot,
  .conference-grid { grid-template-columns: 1fr; }
  .conference-snapshot > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .conference-progress,
  .conference-next { grid-column: auto; }
  .conference-progress > div { grid-template-columns: minmax(0, 1fr) 44px; gap: 8px 12px; }
  .conference-progress .project-meter { grid-column: 1 / -1; grid-row: 2; }
  .archive-class-head .row-actions { grid-template-columns: 1fr; }
  .archive-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-summary-grid > div + div { border-left: 0; }
  .archive-summary-grid > div:nth-child(even) { border-left: 1px solid var(--line); }
  .archive-summary-grid > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .archive-record-head { display: none; }
  .archive-record-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 18px; }
  .archive-record-student { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .archive-record-row > div:not(.archive-record-student)::before { content: attr(data-label); color: var(--muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
  .bell-bank-head { align-items: stretch; }
  .bell-bank-toolbar { grid-template-columns: 1fr; }
  .bell-bank-exports,
  .copy-status { grid-column: auto; }
  .bell-bank-exports { display: grid; grid-template-columns: 1fr; }
  .bell-bank-filters,
  .bell-bank-item-body { display: grid; grid-template-columns: 1fr; }
  .segmented-links { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented-links a:nth-child(3) { border-left: 0; }
  .segmented-links a:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .bell-bank-search { width: 100%; }
  .bell-bank-search label { flex: 1; }
  .bell-bank-search input { width: 100%; }
  .bell-bank-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bell-bank-counts > div:nth-child(odd) { border-left: 0; }
  .bell-bank-counts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .bell-bank-item > summary { grid-template-columns: 66px minmax(0, 1fr); gap: 4px 8px; padding-inline: 12px; }
  .bell-bank-item > summary em { grid-column: 2; }
  .bell-bank-question,
  .bell-bank-answer { padding: 18px; }
  .bell-bank-answer { border-top: 1px solid var(--line); border-left: 0; }
  .bell-bank-set-meta,
  .bell-bank-question-set,
  .lesson-standard-grid,
  .daily-bell-set { grid-template-columns: 1fr; }
  .bell-bank-set-meta > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .bell-bank-item-body > footer { align-items: flex-start; flex-direction: column; padding: 12px 18px; }
  .bell-bank-item-body > footer .button { width: 100%; }
  .student-lesson-route { grid-template-columns: 1fr; }
  .student-lesson-route a + a { border-top: 1px solid var(--line); border-left: 0; }
  .lesson-section-heading,
  .lesson-finish-head,
  .lesson-checkpoint-action,
  .lesson-classroom-finish,
  .lesson-completion-only,
  .checkpoint-not-needed { align-items: stretch; flex-direction: column; }
  .lesson-checkpoint-action .button,
  .lesson-classroom-finish .button,
  .lesson-completion-only .button,
  .checkpoint-not-needed .button { width: 100%; }
  .lesson-vocabulary-first,
  .lesson-standards,
  .lesson-daily-evidence { padding-inline: 18px; }
  .lesson-do-work > .lesson-stage-heading { margin-inline: 18px; }
}

@media (max-width: 760px) {
  .teacher-class-guide-head,
  .teacher-plan-heading,
  .teacher-class-drawer > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .teacher-class-guide-head .row-actions,
  .teacher-plan-heading .row-actions { width: 100%; justify-content: flex-start; }

  .teacher-run-overview,
  .teacher-launch-grid,
  .teacher-class-materials,
  .teacher-task-requirements,
  .teacher-finish-grid,
  .teacher-lab-guide { grid-template-columns: 1fr; }

  .teacher-run-overview > div,
  .teacher-launch-grid > div,
  .teacher-class-materials > div,
  .teacher-task-requirements > div,
  .teacher-finish-grid > div,
  .teacher-lab-guide > div { border-left: 0; }

  .teacher-run-overview > div + div,
  .teacher-launch-grid > div + div,
  .teacher-class-materials > div + div,
  .teacher-task-requirements > div + div,
  .teacher-finish-grid > div + div,
  .teacher-lab-guide > div + div { border-top: 1px solid var(--line); }

  .teacher-class-stage { padding: 20px 18px; }

  .teacher-lesson-route,
  .teacher-lesson-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-lesson-brief > div:nth-child(odd) { border-left: 0; }
  .teacher-lesson-brief > div:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .teacher-lesson-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .teacher-lesson-actions > :nth-child(odd) {
    border-left: 0;
  }

  .teacher-lesson-actions > :nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .teacher-guide-head,
  .teacher-materials-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .teacher-materials-grid {
    grid-template-columns: 1fr;
  }

  .teacher-materials-grid > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .teacher-daily-guide .teacher-snapshot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .teacher-daily-guide .teacher-snapshot-grid > div:nth-child(odd) {
    border-left: 0;
  }

  .teacher-daily-guide .teacher-snapshot-grid > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .lesson-view-switch { grid-template-columns: 1fr; }
  .lesson-view-switch a + a { border-top: 1px solid var(--line); border-left: 0; }
  .teacher-class-guide-head .row-actions,
  .teacher-plan-heading .row-actions { display: grid; grid-template-columns: 1fr; }
  .teacher-class-guide-head .button,
  .teacher-plan-heading .button { width: 100%; }
  .teacher-lesson-route,
  .teacher-lesson-brief { grid-template-columns: 1fr; }
  .teacher-lesson-brief > div { border-top: 1px solid var(--line); border-left: 0; }
  .teacher-lesson-brief > div:first-child { border-top: 0; }
}

@media print {
  .print-student-guide #main-content > * {
    display: none !important;
  }

  .print-student-guide #main-content > .lesson-hero,
  .print-student-guide #main-content > .lesson-chapter {
    display: block !important;
  }

  .evidence-workspace-actions,
  .evidence-workspace-hero .button,
  .lesson-evidence-workspace-callout .button {
    display: none !important;
  }

  body,
  .page {
    background: white !important;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .panel {
    box-shadow: none;
    break-inside: avoid;
  }

  .lesson-chapter {
    box-shadow: none;
    break-inside: auto !important;
  }

  .teacher-student-guide-drawer > .teacher-student-guide-body {
    display: block !important;
  }

  .lesson-hero {
    margin-bottom: 10px;
    break-after: avoid;
  }

  .lesson-hero h1 {
    font-size: 2rem;
  }

  .lesson-hero .lead {
    margin-bottom: 0;
  }

  .production-template-workspace {
    border: 0;
  }

  .production-template-workspace fieldset {
    break-inside: avoid;
  }

  .student-summary-head { margin-bottom: 14px; }
  .student-summary-head h1 { font-size: 2rem; }
  .conference-snapshot { margin-bottom: 12px; box-shadow: none; }
  .conference-snapshot > div { padding: 12px 14px; }
  .conference-snapshot strong { font-size: 1.35rem; }
  .conference-grid { gap: 10px; }
  .conference-section { padding: 14px 15px; box-shadow: none; break-inside: avoid; }
  .conference-section h2 { margin-bottom: 9px; }
  .conference-progress > div { padding: 6px 0; }
  .conference-notes-space { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Daily lesson clarity, quick Classroom posting, and program records. */
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-row { display: flex !important; align-items: flex-start; gap: 9px; }
.check-row input { width: auto !important; margin-top: 3px; }
.check-row span { display: grid; gap: 2px; }
.check-row small { color: var(--muted); font-weight: 500; }

.portal-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(20, 34, 29, .26);
}
.portal-dialog::backdrop { background: rgba(18, 31, 27, .55); }
.portal-dialog-card { display: grid; gap: 16px; margin: 0; padding: 24px; }
.portal-dialog-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-dialog-card h2 { margin: 2px 0 0; font-size: 1.65rem; }
.portal-dialog-card label { margin: 0; }
.portal-dialog-card input,
.portal-dialog-card select { width: 100%; }
.portal-dialog-card > footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.dialog-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--text); font-size: 1.45rem; cursor: pointer; }
.dialog-lesson-title { display: grid; gap: 4px; margin: -6px 0 0; padding: 11px 13px; border-left: 4px solid var(--primary); background: #f1f7f4; font-weight: 800; }
.dialog-lesson-title small { color: var(--muted); font-size: .74rem; font-weight: 750; }

.teacher-day-bar { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
.teacher-day-bar-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.teacher-day-bar-head .panel-title { margin: 0; }
.teacher-day-plan-form { grid-template-columns: minmax(200px, 1fr) minmax(190px, .85fr) minmax(190px, .8fr) minmax(200px, 1fr) auto; }
.delivery-mode-badge { display: inline-flex; width: max-content; margin-top: 6px; padding: 5px 10px; border-radius: 999px; background: var(--status-pending-bg); color: var(--status-pending); font-size: .74rem; font-weight: 850; text-transform: uppercase; }
.delivery-mode-badge.delivery-mode-paper { background: var(--status-locked-bg); color: var(--status-locked); }
/* The teacher's mode strip on a lesson: today's mode, the note for that mode, the other two to look at. */
.delivery-mode-strip { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.delivery-mode-strip-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.delivery-mode-strip-main .delivery-mode-badge { margin-top: 0; }
.delivery-mode-strip-main p { margin: 0; font-size: .92rem; }
.delivery-mode-strip-main .delivery-mode-note { flex-basis: 100%; }
.delivery-mode-strip-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.delivery-mode-strip-switch > span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; }

/* Web Lab: in-browser editor with live preview. */
.web-lab { margin-bottom: 16px; }

.web-lab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--panel);
}

.web-lab-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.web-lab-tab {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 800;
}

.web-lab-tab.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* The bar does two different jobs and they were reading as one row of eight
   equal things: WHICH FILE on the left, WHAT TO DO on the right. The tabs now
   sit flush against the editor the way an editor's tabs do, and the actions
   are ranked - Turn It In leads, Save and Check support it, and starting over
   is set apart because it throws work away. */
.web-lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.web-lab-status { color: var(--muted); font-size: 0.82rem; font-weight: 800; min-width: 0; }
.web-lab-status.unsaved { color: var(--status-pending); }

/* The active tab joins the editor below it, so "which file am I in" is read
   from the shape rather than only from the colour. The pull-down only applies
   while the tabs and the buttons share a line: once the bar wraps, the tabs
   would be dragged down on top of the buttons instead. */
.web-lab-tab { border-radius: 7px 7px 0 0; border-bottom-color: transparent; }
.web-lab-tab.active { box-shadow: 0 2px 0 0 var(--primary); }
@media (min-width: 1040px) {
  .web-lab-tabs { align-self: flex-end; margin-bottom: -10px; }
}

/* Starting over is rare, and it destroys work. It keeps its distance from Turn
   It In and stops competing with it: quiet until you go for it, and never the
   thing a thumb lands on by accident. */
.web-lab-toolbar .lab-reset {
  margin-left: auto;
  padding-left: 14px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.web-lab-toolbar .lab-reset:hover,
.web-lab-toolbar .lab-reset:focus-visible {
  color: #8a4f08;
  background: none;
}

/* The toolbar under the editor. The verbs act on the code, so they sit with
   the code rather than floating in the header above the preview pane. It reads
   as one strip: what to do on the left, and the one destructive thing set off
   on the right behind a divider. */
.web-lab-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 10px 14px;
  margin: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 9px 9px;
  background: var(--panel);
}
.web-lab-toolbar-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Check My Work leads: it is the loop a student is actually in. Turn It In is
   the hand-off, and Save is the quiet one because Check saves as well. */
.web-lab-toolbar .lab-second-action { border-color: var(--line); color: var(--muted); font-weight: 700; }

/* Opening the page in a real tab is the only way to see the <title>, so it
   stays - quietly. It is a thing you can do, not a thing you must press. */
.lab-quiet-action {
  border: 0; background: none; padding: 4px 2px;
  color: var(--muted); font: inherit; font-size: .84rem; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lab-quiet-action:hover, .lab-quiet-action:focus-visible { color: var(--panther-purple-dark); }

.web-lab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
}

.web-lab-editors { min-width: 0; background: #15211e; }

.web-lab-editor {
  width: 100%;
  min-height: 460px;
  display: none;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: #15211e;
  color: var(--status-earned-bg);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
}

.web-lab-editor.active { display: block; }
/* The editor and its line numbers, side by side and scrolling together. */
.web-lab-editor-pane { display: none; position: relative; }
.web-lab-editor-pane.active { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.web-lab-editor-pane .web-lab-editor { min-width: 0; }
.web-lab-gutter {
  overflow: hidden;
  padding: 14px 8px 14px 12px;
  background: #101a18;
  color: #6f8079;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: right;
  user-select: none;
}
.web-lab-gutter i { display: block; font-style: normal; }
.web-lab-editor:focus { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: none; }

.web-lab-preview { min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); }

.web-lab-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.web-lab-preview-head .button { text-transform: none; }

.web-lab-preview iframe { flex: 1; width: 100%; min-height: 420px; border: 0; background: #fff; }

.web-lab-run-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  /* This pane holds the ONLY way to run the code on a tool-runner course (the
     SC AI notebook, Java 1). Its ancestor .web-lab-split clips overflow, so on
     a short pane the button was cut off with no scrollbar to reach it -
     measured at 188px of content in a 132px pane on java_u2_l1_s1. Scroll
     rather than clip: a button a student cannot reach is the same as no
     button. */
  min-height: 0;
  overflow-y: auto;
}
.web-lab-run-body p { margin: 0; }
.web-lab-run-body .button { width: max-content; }

.web-lab-help ol { margin: 0; padding-left: 20px; }
.web-lab-help li { margin-bottom: 6px; }

.web-lab-headline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.web-lab-brief { margin-bottom: 14px; }
.web-lab-requirements { margin: 0; padding-left: 20px; }
.web-lab-requirements li { margin-bottom: 5px; }

.web-lab-checks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 12px;
}
.web-lab-checks-head p { margin: 2px 0 0; }

.web-lab-check-list { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }

.web-lab-check-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.web-lab-check-list li.pass { border-color: color-mix(in srgb, var(--status-earned) 40%, var(--line)); background: var(--status-earned-bg); }
.web-lab-check-list li.todo { border-color: color-mix(in srgb, var(--status-pending) 40%, var(--line)); background: var(--status-pending-bg); }

.web-lab-check-mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 900;
}
.web-lab-check-list li.pass .web-lab-check-mark { background: var(--status-earned); color: #fff; }
.web-lab-check-list li.todo .web-lab-check-mark { background: var(--status-pending); color: #fff; }

.web-lab-check-list strong { display: block; font-size: .92rem; }
.web-lab-check-list small { display: block; margin-top: 3px; color: var(--panther-gold-deep); font-size: .84rem; }
.web-lab-check-list li.pass em { color: var(--primary-dark); }
.web-lab-check-list li.todo em { color: var(--status-pending); }
.web-lab-check-list em { font-size: .8rem; font-weight: 850; text-transform: uppercase; }

@media (max-width: 900px) {
  .web-lab-split { grid-template-columns: 1fr; }
  .web-lab-preview { border-left: 0; border-top: 1px solid var(--line); }
  .web-lab-editor { min-height: 320px; }
  .web-lab-preview iframe { min-height: 300px; }
}

/* Grading settings: per-lesson AI eligibility. */
.grading-unit-panel { margin-bottom: 10px; }
.grading-unit-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 2px;
  cursor: pointer;
  font-weight: 850;
}
.grading-unit-panel > summary em { color: var(--muted); font-size: .84rem; font-weight: 800; }

.grading-lesson-list { display: grid; gap: 6px; padding-top: 6px; }

.grading-lesson-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.grading-lesson-row strong { display: block; font-size: .92rem; }
.grading-lesson-row small { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.checkbox-row span { margin: 0; }
.checkbox-row input { width: auto; }

.ai-draft-panel { margin-top: 12px; background: var(--soft); }

/* Grading review: PII highlighting and submission cards. */
.submission-review { margin-bottom: 14px; }

.submission-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 18px;
}

.submission-review-head h2 { margin: 2px 0 0; font-size: 1.25rem; }
.submission-review-flags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.submission-text {
  max-height: 340px;
  overflow: auto;
  margin: 12px 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

mark.pii-hit {
  padding: 1px 3px;
  border-bottom: 2px solid var(--status-missing);
  border-radius: 3px;
  background: var(--status-missing-bg);
  color: var(--status-missing);
  font-weight: 800;
}

.ai-cost-panel { margin-bottom: 14px; }
.ai-cost-panel .health-grid { margin-bottom: 0; }

.student-delivery-panel {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.student-delivery-panel .panel-title { margin-bottom: 4px; }
.student-delivery-panel p { margin: 0 0 10px; }

.student-delivery-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
}

.student-delivery-form {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) minmax(140px, .7fr) minmax(160px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.student-delivery-form label { margin: 0; min-width: 0; }
.student-delivery-form select,
.student-delivery-form input { width: 100%; }
.student-delivery-clear { margin-top: 8px; }

@media (max-width: 900px) {
  .student-delivery-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .student-delivery-form { grid-template-columns: 1fr; }
}
.teacher-pacing-note { flex: 1 0 100%; border-top: 1px solid var(--line); }
.teacher-pacing-note summary { width: max-content; padding-top: 11px; color: var(--primary-dark); cursor: pointer; font-size: .8rem; font-weight: 850; }
.teacher-pacing-note p { max-width: 95ch; margin: 9px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.48; }
.flex-day-panel,
.student-flex-day { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.flex-day-panel h2,
.student-flex-day h2 { margin: 3px 0 7px; }
.flex-day-panel p,
.student-flex-day p { margin: 0; color: var(--muted); }
.student-flex-actions { min-width: 250px; display: grid; gap: 8px; }
.student-flex-actions > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--line); background: #f8faf9; }
.student-flex-actions span { color: var(--muted); font-size: .75rem; font-weight: 850; text-transform: uppercase; }

.student-finish-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px 17px;
  border: 1px solid #d5bf81;
  border-left: 6px solid var(--panther-gold);
  background: var(--status-pending-bg);
}
.student-finish-line > span,
.student-turn-in-summary span { color: var(--panther-gold-deep); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.student-finish-line > strong { font-size: .98rem; line-height: 1.4; }
.student-finish-line > a { font-size: .82rem; font-weight: 850; white-space: nowrap; }
.student-files-first { margin: 0 0 24px; padding: 17px; border: 1px solid #c8d9d2; border-left: 6px solid var(--primary); background: #f5faf8; }
.resource-shelf-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.resource-shelf-heading .eyebrow { margin: 0 0 2px; }
.resource-shelf-heading h3 { margin: 0; }
.resource-shelf-heading > span { flex: 0 0 auto; color: var(--muted); font-size: .76rem; font-weight: 850; }
.student-resource-grid a em { margin-top: auto; color: var(--primary-dark); font-size: .74rem; font-style: normal; font-weight: 850; }
.student-turn-in-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; border-left: 6px solid var(--panther-gold); background: var(--status-pending-bg); }
.student-turn-in-summary > div { display: grid; gap: 4px; }
.student-turn-in-summary strong { max-width: 78ch; line-height: 1.45; }
.student-turn-in-summary > p { margin: 0; color: var(--muted); font-size: .86rem; }
.student-finish-details { margin-top: 13px; border-top: 1px solid var(--line); }
.student-finish-details > summary { padding: 13px 2px 2px; color: var(--primary-dark); cursor: pointer; font-size: .84rem; font-weight: 850; }
.student-finish-details .student-finish-grid,
.student-finish-details .lesson-finish-checks { padding-top: 8px; }

.credentials-page .page,
.pathways-page .page { max-width: 1280px; }
.compact-head { align-items: end; }
.compact-head h1 { margin-bottom: 0; font-size: clamp(2.2rem, 4vw, 3.8rem); }
.credential-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.credential-card { margin: 0; }
.credential-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.credential-card h2 { margin: 2px 0 0; font-size: 1.4rem; }
.credential-card > p { color: var(--muted); }
.credential-status,
.readiness-pill { display: inline-flex; width: max-content; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #f4f6f5; color: var(--muted); font-size: .72rem; font-weight: 850; }
.credential-status.status-verified,
.readiness-pill.ready { border-color: #9fc7b6; background: var(--status-earned-bg); color: var(--primary-dark); }
.credential-status.status-reported { border-color: #dec583; background: var(--status-pending-bg); color: var(--status-pending); }
.credential-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.credential-meta span { padding: 4px 7px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); font-size: .72rem; font-weight: 750; }
.credential-report { margin-top: 16px; border-top: 1px solid var(--line); }
.credential-report > summary { padding-top: 13px; cursor: pointer; color: var(--primary-dark); font-weight: 850; }
.credential-report form { margin-top: 13px; }
.verified-note { margin-bottom: 0; padding: 10px 12px; border-left: 4px solid var(--primary); background: var(--status-earned-bg); color: var(--primary-dark) !important; font-weight: 750; }

.pathway-roster-panel { padding: 0; overflow: hidden; }
.pathway-roster-panel > .panel-title { padding: 18px 20px 12px; }
.table-wrap { overflow-x: auto; }
.pathway-table { width: 100%; border-collapse: collapse; }
.pathway-table th,
.pathway-table td { padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.pathway-table th { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.pathway-table td { font-size: .86rem; }
.pathway-table td:first-child { min-width: 190px; }
.pathway-table td:first-child strong,
.pathway-table td:first-child small { display: block; }
.pathway-table td:first-child small { margin-top: 2px; color: var(--muted); }
.pathway-student-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.pathway-student-head h2 { margin: 2px 0; font-size: 2rem; }
.pathway-student-head p { margin: 0; color: var(--muted); }
.readiness-summary { min-width: 210px; display: grid; gap: 3px; padding: 13px 15px; border-left: 5px solid var(--panther-gold); background: var(--status-pending-bg); }
.readiness-summary.ready { border-left-color: var(--primary); background: var(--status-earned-bg); }
.readiness-summary span,
.readiness-summary small { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.pathway-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pathway-record-grid > .panel { margin: 0; }
.credential-management { margin-top: 16px; }
.credential-management-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.credential-management-head p { margin: 6px 0 0; color: var(--muted); }
.credential-edit-list { display: grid; gap: 8px; margin-top: 18px; }
.credential-edit-list > details,
.add-credential { border: 1px solid var(--line); background: #fff; }
.credential-edit-list > details > summary,
.add-credential > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; cursor: pointer; }
.credential-edit-list summary span { display: grid; gap: 3px; }
.credential-edit-list summary small,
.credential-edit-list summary em { color: var(--muted); font-size: .75rem; font-style: normal; }
.credential-edit-list form,
.add-credential form { padding: 16px; border-top: 1px solid var(--line); }
.add-credential { margin-top: 12px; }
.pathway-rule-note { margin-top: 16px; }
.pathway-rule-note > summary { cursor: pointer; font-weight: 850; }
.pathway-rule-note p { max-width: 100ch; color: var(--muted); }

@media (max-width: 900px) {
  .teacher-day-plan-form,
  .pathway-record-grid { grid-template-columns: 1fr 1fr; }
  .credential-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .form-grid.two,
  .form-grid.three,
  .teacher-day-plan-form,
  .pathway-record-grid { grid-template-columns: 1fr; }
  .student-finish-line { grid-template-columns: 1fr; gap: 7px; }
  .student-finish-line > a { white-space: normal; }
  .student-turn-in-summary,
  .flex-day-panel,
  .student-flex-day,
  .pathway-student-head,
  .credential-management-head { align-items: stretch; flex-direction: column; }
  .student-flex-actions,
  .readiness-summary { min-width: 0; }
  .portal-dialog-card { padding: 19px; }
  .lesson-bell-heading { grid-template-columns: 34px minmax(0, 1fr); }
  .lesson-bell-heading > .button { grid-column: 1 / -1; }
  .bell-review-choices li { grid-template-columns: 1.7em minmax(0, 1fr); }
  .bell-review-choices li.correct > strong { grid-column: 2; width: max-content; }
}

/* Novice-first lesson launch and gradual-release directions */
.student-lesson-launch,
.today-start-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 24px;
  margin: 0 0 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 7px solid var(--primary);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(30, 41, 38, 0.06);
}

.student-lesson-launch-heading,
.today-start-board-main > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-dark);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-lesson-launch-heading em,
.today-start-board-main > div:first-child em {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-style: normal;
}

.student-lesson-launch h2,
.today-start-board h2 {
  max-width: 42ch;
  margin: 7px 0 16px;
  font-size: 1.65rem;
  line-height: 1.2;
}

.student-lesson-launch-facts,
.today-start-board dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
}

.student-lesson-launch-facts > div,
.today-start-board dl > div {
  padding: 11px 12px;
  border-left: 4px solid #cbd6d1;
  background: var(--soft);
}

.student-lesson-launch-facts span,
.today-start-board dt,
.student-lesson-quick-files > span,
.today-quick-files > span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-lesson-launch-facts strong,
.today-start-board dd {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
}

.student-lesson-launch-actions,
.today-start-actions {
  min-width: 210px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.today-start-actions .today-alt-label {
  margin: 6px 0 -2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.today-start-actions .button:not(.primary) {
  min-height: 34px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.today-start-actions .button:not(.primary):hover {
  background: var(--soft);
  color: var(--text);
}

.student-meta-drawer {
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.student-meta-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}

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

.student-meta-drawer > summary span {
  display: grid;
  gap: 2px;
}

.student-meta-drawer > summary small,
.student-meta-drawer > summary em {
  color: var(--muted);
  font-style: normal;
}

.student-meta-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
}

.student-meta-drawer[open] > summary em::before { content: "Close"; }
.student-meta-drawer[open] > summary em { font-size: 0; }
.student-meta-drawer[open] > summary em::before { font-size: 0.86rem; }

.student-meta-drawer .student-ready-grid,
.student-meta-drawer .student-guide-grid {
  margin: 0;
  padding: 18px;
}

.student-meta-standards {
  padding: 0 18px 18px;
}

.student-meta-standards > h3 {
  margin: 0 0 12px;
}

.student-lesson-quick-files,
.today-quick-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
}

.student-lesson-quick-files > span,
.today-quick-files > span { margin: 0 5px 0 0; }

.student-lesson-quick-files a,
.today-quick-files a {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--primary-dark);
  font-size: .76rem;
  font-weight: 850;
  text-decoration: none;
}

.lesson-delivery-routes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lesson-delivery-routes a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft);
  text-decoration: none;
}

.lesson-delivery-routes span { color: var(--muted); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.lesson-delivery-routes strong { font-size: .88rem; }

.lesson-project-hub {
  display: grid;
  grid-template-columns: minmax(225px, .85fr) minmax(0, 1.5fr);
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid var(--unit-color, var(--primary));
  background: #fff;
}

.lesson-project-hub.has-project-actions { grid-template-columns: minmax(225px, .85fr) minmax(0, 1.5fr) minmax(190px, .55fr); }

.lesson-project-hub > * { min-width: 0; padding: 17px 19px; }
.lesson-project-hub > * + * { border-left: 1px solid var(--line); }
.lesson-project-identity h2 { margin: 2px 0 6px; font-size: 1.2rem; }
.lesson-project-identity > p:last-child,
.lesson-project-focus p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.48; }
.lesson-project-focus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; background: var(--soft); }
.lesson-project-focus > div { display: grid; align-content: center; gap: 4px; padding: 15px 18px; }
.lesson-project-focus > div + div { border-left: 1px solid var(--line); }
.lesson-project-focus span { color: var(--primary-dark); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.lesson-project-focus strong { font-size: .92rem; line-height: 1.4; }
.lesson-project-actions { display: grid; align-content: center; gap: 7px; }
.lesson-project-actions .button { width: 100%; justify-content: center; text-align: center; }
.lesson-project-actions small { color: var(--muted); font-size: .72rem; line-height: 1.4; text-align: center; }

.student-required-reading {
  margin: 22px 0;
  border: 1px solid var(--line);
  border-top: 6px solid var(--primary);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.student-required-reading > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 22px 17px;
  border-bottom: 1px solid var(--line);
  background: #f4f8f6;
}

.student-required-reading > header h3 {
  margin: 3px 0 5px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.student-required-reading > header p:last-child {
  max-width: 70ch;
  margin: 0;
  color: var(--muted);
}

.student-required-reading > header > span {
  padding: 6px 9px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-reading-prose {
  max-width: 80ch;
  padding: 21px 24px 4px;
}

.student-reading-prose p {
  margin: 0 0 1em;
  font-size: 1.03rem;
  line-height: 1.68;
}

.student-reading-key-points {
  margin: 14px 22px 22px;
  padding: 16px 18px;
  border-left: 5px solid var(--accent-gold);
  background: var(--status-pending-bg);
}

.student-reading-key-points > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--panther-gold-deep);
  font-size: .74rem;
  text-transform: uppercase;
}

.student-reading-key-points ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.student-required-reading > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.student-required-reading > footer span { color: var(--muted); font-size: .8rem; }
.student-required-reading > footer a { color: var(--primary-dark); font-size: .84rem; font-weight: 850; }

.lesson-reference-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 22px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 6px;
  background: var(--soft);
}

.lesson-reference-strip span { color: var(--muted); font-size: .86rem; }
.lesson-reference-strip a { color: var(--primary-dark); font-weight: 850; }

.student-step-groups {
  margin: 22px 0;
  border-top: 1px solid var(--line);
}

.student-step-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 2px 11px;
}

.student-step-groups-head > span { font-size: 1.2rem; font-weight: 900; }
.student-step-groups-head > strong { color: var(--primary-dark); font-size: .75rem; text-transform: uppercase; }

.student-step-groups > section {
  display: grid;
  grid-template-columns: minmax(190px, .45fr) minmax(0, 1fr);
  gap: 12px 24px;
  padding: 19px 2px;
  border-top: 1px solid var(--line);
}

.student-step-group-title {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.student-step-group-title b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}

.student-step-group-title h3 { margin: 5px 0 0; font-size: 1rem; line-height: 1.3; }
.student-step-groups ol { margin: 0; padding-left: 1.35rem; }
.student-step-groups li { margin: 0 0 9px; padding-left: 5px; line-height: 1.55; }

.student-step-check {
  grid-column: 2;
  padding: 10px 12px;
  border-left: 4px solid var(--accent-gold);
  background: var(--status-pending-bg);
}

.student-step-check span { color: var(--panther-gold-deep); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.student-step-check p { margin: 3px 0 0; font-size: .88rem; font-weight: 750; }

.lesson-standards-collapsed,
.lesson-extensions {
  margin: 15px 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft);
}

.lesson-standards-collapsed > summary,
.lesson-extensions > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  cursor: pointer;
}

.lesson-standards-collapsed summary span,
.lesson-extensions summary span { display: grid; gap: 2px; }
.lesson-standards-collapsed summary small,
.lesson-extensions summary small { color: var(--muted); font-size: .74rem; }
.lesson-standards-collapsed summary em,
.lesson-extensions summary em { color: var(--primary-dark); font-size: .75rem; font-style: normal; font-weight: 850; }
.lesson-standards-collapsed .lesson-standard-grid { padding: 13px; border-top: 1px solid var(--line); }
.lesson-extensions ul { margin: 0; padding: 14px 32px 16px; border-top: 1px solid var(--line); }
.lesson-extensions li { margin-bottom: 7px; }

/* Persistent unit project home */
.unit-project-page .page { width: min(1260px, calc(100% - 30px)); }

.unit-project-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin: 12px 0 0;
  padding: 34px 0 27px;
  border-bottom: 7px solid var(--unit-color, var(--primary));
}

.unit-project-hero h1 { margin: 4px 0 8px; font-size: 3.4rem; line-height: 1; }
.unit-project-hero p:last-child { max-width: 62ch; margin: 0; color: var(--muted); font-size: 1.05rem; }
.unit-project-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.unit-project-nav {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 26px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.unit-project-nav a { padding: 7px 10px; border-radius: 4px; color: var(--muted); font-size: .82rem; font-weight: 850; text-decoration: none; }
.unit-project-nav a:hover { background: #e9efeb; color: var(--text); }

.unit-project-now {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 22px;
  margin: 0 0 12px;
  padding: 21px 23px;
  border-left: 7px solid var(--primary);
  background: var(--status-earned-bg);
}

.unit-project-now h2 { margin: 3px 0 5px; font-size: 1.6rem; }
.unit-project-now p { margin: 0; }
.unit-project-now > div:last-child { padding-left: 20px; border-left: 1px solid #bfd5cb; }
.unit-project-now > div:last-child > span { display: block; color: var(--primary-dark); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.unit-project-now > div:last-child > strong { display: block; margin: 3px 0; }

.unit-project-section {
  padding: 42px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 65px;
}

.unit-project-section > header { max-width: 76ch; margin-bottom: 22px; }
.unit-project-section > header h2 { margin: 4px 0 6px; font-size: 2rem; }
.unit-project-section > header p:last-child { margin: 0; color: var(--muted); font-size: 1rem; }

.unit-project-brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.unit-project-brief-grid article { padding: 16px; border-left: 5px solid #c7d6d0; background: #fff; }
.unit-project-brief-grid span { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.unit-project-brief-grid strong { display: block; margin: 3px 0 6px; font-size: 1.08rem; }
.unit-project-brief-grid p { margin: 0; }

.unit-project-requirements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 25px 0; }
.unit-project-requirements h3 { margin: 0 0 9px; font-size: 1rem; }
.unit-project-requirements ul { margin: 0; padding-left: 1.2rem; }
.unit-project-requirements li { margin-bottom: 7px; }

.project-example-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.project-example-layout h3 { margin: 0 0 7px; font-size: 1.4rem; }
.project-example-layout iframe { width: 100%; min-height: 470px; border: 1px solid #bfc8c2; border-radius: 5px; background: #fff; }

.project-file-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.project-file-list > a { position: relative; display: grid; gap: 3px; min-height: 124px; padding: 15px 48px 15px 15px; border: 1px solid var(--line); border-radius: 5px; background: #fff; text-decoration: none; }
.project-file-list > a:hover { border-color: #9eb8ad; }
.project-file-list span { color: var(--primary-dark); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.project-file-list p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.project-file-list em { position: absolute; top: 14px; right: 14px; color: var(--primary-dark); font-size: .7rem; font-style: normal; font-weight: 850; }

.project-catch-up { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 18px; border: 1px solid #dec583; border-left: 6px solid var(--accent-gold); background: var(--status-pending-bg); }
.project-catch-up h3 { margin: 3px 0; }
.project-catch-up p:last-child { max-width: 72ch; margin: 0; }

.project-milestone-list { margin: 0; padding: 0; list-style: none; }
.project-milestone-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 14px 4px; border-top: 1px solid var(--line); }
.project-milestone-list li > span { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid #bcc8c2; border-radius: 50%; color: var(--muted); font-size: .76rem; font-weight: 900; }
.project-milestone-list li.released > span { border-color: var(--primary); background: var(--primary); color: #fff; }
.project-milestone-list li.current { padding-left: 9px; border-left: 5px solid var(--accent-gold); background: var(--status-pending-bg); }
.project-milestone-list strong { display: block; }
.project-milestone-list p { margin: 3px 0; color: var(--muted); }
.project-milestone-list small { color: var(--primary-dark); font-weight: 800; }
.project-milestone-list a { align-self: center; font-size: .78rem; font-weight: 850; }
.project-milestone-list li.locked { opacity: .65; }

.rubric-scroll { overflow-x: auto; margin-bottom: 14px; }
.project-rubric { width: 100%; min-width: 920px; border-collapse: collapse; background: #fff; }
.project-rubric th,
.project-rubric td { width: 20%; padding: 12px; border: 1px solid #cfd6d1; text-align: left; vertical-align: top; font-size: .78rem; line-height: 1.45; }
.project-rubric thead th { background: #eaf2ee; color: var(--primary-dark); font-size: .72rem; text-transform: uppercase; }
.project-rubric tbody th { background: var(--soft); font-size: .82rem; }

.peer-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-bottom: 22px; }
.peer-review-grid article { padding-top: 14px; border-top: 4px solid #c7d6d0; }
.peer-review-grid h3 { margin: 0 0 8px; }
.peer-review-grid ul { margin: 0; padding-left: 1.2rem; }
.peer-review-grid li { margin-bottom: 7px; }

/* Printable project and no-computer lesson routes */
.project-print-page,
.paper-lesson-page { background: #fff; color: #111; font-family: Arial, sans-serif; }
.project-print-page > header,
.paper-lesson-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 28px; border-bottom: 2px solid #111; }
.project-print-page > header p,
.project-print-page > header h1 { margin: 0; }
.project-print-page > main,
.paper-lesson-page > main { width: min(980px, calc(100% - 40px)); margin: 24px auto 60px; }
.project-print-page .project-rubric { min-width: 0; }
.project-print-page .project-rubric th,
.project-print-page .project-rubric td { padding: 8px; font-size: .68rem; }
.print-name-lines { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; margin: 16px 0 22px; font-weight: 700; }
.print-check-section { break-inside: avoid; margin: 22px 0; }
.print-check-section label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; margin: 11px 0; }
.print-check-section label em { grid-column: 2; min-height: 28px; font-size: .8rem; font-style: normal; }
.print-response { break-inside: avoid; }
.print-response div { height: 30px; border-bottom: 1px solid #777; }

.paper-lesson-toolbar div { display: grid; }
.paper-lesson-toolbar span { font-size: .78rem; }
.paper-lesson-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; margin-bottom: 24px; }
.paper-lesson-title p { margin: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.paper-lesson-title h1 { margin: 4px 0 7px; font-size: 2.4rem; line-height: 1.05; }
.paper-lesson-title .print-name-lines { display: grid; align-content: end; }
.paper-lesson-block { break-inside: avoid; padding: 20px 0; border-top: 2px solid #111; }
.paper-lesson-block h2 { margin: 4px 0 10px; font-size: 1.35rem; }
.paper-label { margin: 0; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.paper-reading p { font-family: Georgia, serif; font-size: 1rem; line-height: 1.55; }
.paper-lesson-block pre { padding: 12px; border: 1px solid #777; white-space: pre-wrap; }
.paper-model-notes { margin: 10px 0 0; padding-left: 22px; font-size: .95rem; }
.paper-model-notes li { margin: 4px 0; }
.paper-answer-choices { line-height: 1.7; }
.paper-response { break-inside: avoid; margin: 18px 0 25px; }
.paper-response h3 { margin-bottom: 8px; font-size: 1rem; }
.paper-lines i { display: block; height: 30px; border-bottom: 1px solid #777; }
.paper-checks { padding: 0; list-style: none; }
.paper-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin: 9px 0; }
.paper-checks li span { width: 15px; height: 15px; border: 1px solid #111; }

@media (max-width: 820px) {
  .student-lesson-launch,
  .today-start-board,
  .unit-project-now,
  .project-example-layout { grid-template-columns: 1fr; }
  .student-lesson-launch-actions,
  .today-start-actions { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-project-hero { align-items: flex-start; flex-direction: column; }
  .unit-project-hero-actions { justify-content: flex-start; }
  .unit-project-now > div:last-child { padding: 16px 0 0; border-top: 1px solid #bfd5cb; border-left: 0; }
  .unit-project-requirements { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .student-lesson-launch,
  .today-start-board { padding: 17px; }
  .student-lesson-launch-facts,
  .today-start-board dl,
  .lesson-delivery-routes,
  .student-lesson-launch-actions,
  .today-start-actions,
  .unit-project-brief-grid,
  .project-file-list,
  .peer-review-grid { grid-template-columns: 1fr; }
  .lesson-project-hub,
  .lesson-project-hub.has-project-actions { grid-template-columns: 1fr; }
  .lesson-project-hub > * + * { border-top: 1px solid var(--line); border-left: 0; }
  .project-catch-up { align-items: stretch; flex-direction: column; }
  .lesson-project-actions .button { width: auto; }
  .student-step-groups > section { grid-template-columns: 1fr; }
  .student-step-check { grid-column: 1; }
  .unit-project-hero h1 { font-size: 2.55rem; }
  .unit-project-nav { position: static; }
  .project-milestone-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .project-milestone-list a { grid-column: 2; }
  .paper-lesson-title { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .lesson-project-focus { grid-template-columns: 1fr; }
  .lesson-project-focus > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .teacher-pacing-list > div { grid-template-columns: 28px minmax(0, 1fr); }
  .teacher-pacing-list em { grid-column: 2; }
}

@media print {
  .project-print-page > header button,
  .paper-lesson-toolbar button { display: none; }
  .project-print-page > header,
  .paper-lesson-toolbar { padding: 0 0 12px; }
  .project-print-page > main,
  .paper-lesson-page > main { width: 100%; margin: 16px 0 0; }
  .project-print-page .project-rubric th,
  .project-print-page .project-rubric td { font-size: 8pt; }
}

.section-teachers { margin-top: 12px; border-top: 1px solid var(--line); }
.section-teachers > summary { padding: 12px 0 2px; cursor: pointer; font-weight: 850; }
.section-teachers form { margin-top: 10px; padding: 12px; border-left: 4px solid var(--accent-blue); background: var(--soft); }
.section-teachers .resource-list { margin-top: 10px; }

/* Lesson editor */
.editor-picker label { display: block; }
.editor-picker select { width: 100%; margin-top: 6px; }
.lesson-editor-form .editor-field { padding: 14px 0; border-top: 1px solid var(--line); }
.lesson-editor-form .editor-field:first-of-type { border-top: 0; }
.lesson-editor-form label span { display: block; font-weight: 850; margin-bottom: 6px; }
.lesson-editor-form input,
.lesson-editor-form textarea { width: 100%; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: inherit; }
.lesson-editor-form textarea { line-height: 1.5; resize: vertical; }
.editor-edited-note { margin: 0 0 8px; padding: 10px 12px; background: var(--soft); border-left: 4px solid var(--accent-blue); font-size: 0.94rem; }
.editor-original { margin-top: 8px; font-size: 0.9rem; }
.editor-original summary { cursor: pointer; color: var(--muted); }
.editor-original pre { margin: 6px 0 0; padding: 10px; background: var(--soft); border-radius: 8px; white-space: pre-wrap; font-size: 0.9rem; }

/* Reading level feedback. Uses the shared status colour language. */
.reading-grade { margin: 6px 0 0; font-size: 0.86rem; font-weight: 700; }
.reading-grade[data-band="good"] { color: var(--status-earned); }
.reading-grade[data-band="watch"] { color: var(--status-pending); }
.reading-grade[data-band="hard"] { color: var(--status-missing); }
.reading-grade[data-band="unknown"] { color: var(--muted); font-weight: 600; }
.reading-summary { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--soft); border-left: 5px solid var(--status-locked); }
.reading-summary[data-band="good"] { border-left-color: var(--status-earned); background: var(--status-earned-bg); }
.reading-summary[data-band="watch"] { border-left-color: var(--status-pending); background: var(--status-pending-bg); }
.reading-summary[data-band="hard"] { border-left-color: var(--status-missing); background: var(--status-missing-bg); }
.reading-summary p { margin: 4px 0 0; font-size: 0.9rem; color: var(--muted); }
.reading-worklist { list-style: none; margin: 10px 0 0; padding: 0; }
.reading-worklist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.reading-worklist li:first-child { border-top: 0; }
.reading-worklist span { color: var(--status-missing); font-weight: 750; white-space: nowrap; }

/* Glossary */
.glossary-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.glossary-tabs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: inherit; text-decoration: none; font-weight: 750; }
.glossary-tabs a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.glossary-controls { display: grid; gap: 10px; }
.glossary-search span { display: block; font-weight: 850; margin-bottom: 6px; }
.glossary-search input { width: 100%; font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: inherit; }
.glossary-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.glossary-letters a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--soft); border: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: 800; }
.glossary-letters a:hover, .glossary-letters a:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; }
.glossary-group { margin-top: 18px; }
.glossary-group > h2 { font-size: 1.6rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 3px solid var(--primary); scroll-margin-top: 90px; }
.glossary-term { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; scroll-margin-top: 90px; }
.glossary-term h3 { margin: 0 0 6px; font-size: 1.25rem; }
.glossary-term p { margin: 0 0 6px; line-height: 1.55; font-size: 1.02rem; }
.glossary-term p:last-child { margin-bottom: 0; }
.glossary-example { padding: 8px 12px; background: var(--soft); border-left: 4px solid var(--accent-blue); border-radius: 6px; }
.glossary-taught { color: var(--muted); font-size: 0.92rem; }
.glossary-taught a { font-weight: 750; }
@media print {
  .glossary-tabs, .glossary-controls, .nav-menu { display: none; }
  .glossary-term { break-inside: avoid; border: 0; padding: 4px 0; }
}

/* Library: mirrored textbooks */
.library-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.library-card { position: relative; display: grid; gap: 6px; padding: 18px 16px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.library-card.mine { border-color: var(--primary); }
.library-card strong { font-size: 1.15rem; line-height: 1.3; }
.library-card span { color: var(--muted); }
.library-card small { color: var(--muted); }
.library-badge { position: absolute; top: -10px; left: 14px; padding: 2px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 0.78rem; font-weight: 800; }
.library-attribution { margin: 0 0 16px; padding: 12px 14px; background: var(--soft); border-left: 4px solid var(--accent-gold); border-radius: 8px; font-size: 0.92rem; }
.library-attribution p { margin: 0 0 4px; }
.library-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.library-toc a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; font-weight: 750; }
.library-toc small { color: var(--muted); font-weight: 600; }
.library-toc-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--soft); font-weight: 900; }
.library-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.library-sections a { padding: 6px 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 700; }
.library-reading { max-width: 78ch; margin: 0 auto; font-size: 1.08rem; line-height: 1.65; }
.library-reading h2 { margin: 28px 0 10px; font-size: 1.5rem; scroll-margin-top: 90px; }
.library-reading h3 { margin: 22px 0 8px; font-size: 1.2rem; }
.library-reading p { margin: 0 0 14px; }
.library-reading pre { padding: 12px 14px; overflow-x: auto; background: var(--text); color: #f4f6f3; border-radius: 10px; font-size: 0.92rem; line-height: 1.5; }
.library-reading code { font-size: 0.95em; }
.library-reading p > code, .library-reading li > code { padding: 1px 5px; background: var(--soft); border-radius: 4px; }
.library-reading img { display: block; max-width: 100%; height: auto; margin: 12px auto; border-radius: 8px; }
.library-reading figure { margin: 16px 0; }
.library-reading figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; }
.library-reading table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 0.95rem; }
.library-reading th, .library-reading td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.library-reading blockquote { margin: 0 0 14px; padding: 8px 14px; border-left: 4px solid var(--accent-blue); background: var(--soft); }
.library-pager { display: flex; justify-content: space-between; gap: 12px; margin: 24px 0 16px; flex-wrap: wrap; }
@media print {
  .library-sections, .library-pager, .nav-menu { display: none; }
  .library-reading { max-width: none; font-size: 11pt; }
}

/* Named AVID strategies on a lesson, grouped Activate / Engage / Extend */
.avid-strategies { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.avid-strategies li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.avid-strategies strong { font-size: 0.98rem; }
.avid-strategies em { grid-column: 2; font-style: normal; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.avid-strategies p { grid-column: 2; margin: 0; font-size: 0.92rem; line-height: 1.45; }
/* The stage pill is a <span> inside .avid-routine, whose own `span` rule paints
   the AVID/WICOR label a muted purple. That descendant rule outranked this one,
   so the pills read as purple-on-blue and purple-on-purple - Brady: "the
   contrast is off". Named under .avid-routine so it wins on specificity, not
   on order. */
.avid-strategy-stage,
.avid-routine .avid-strategy-stage { padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 850; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
/* The list lands in the routine's two-column grid and was being squeezed into
   the narrow left column. It spans both. */
.avid-routine .avid-strategies { grid-column: 1 / -1; }
.avid-activate { background: var(--accent-blue); }
.avid-engage { background: var(--primary); }
.avid-extend { background: var(--panther-gold-deep); }

/* Textbook excerpt on a lesson */
.lesson-reading-excerpt { margin: 0 0 16px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--accent-gold); border-radius: 12px; padding: 0 16px 12px; }
.lesson-reading-excerpt > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.lesson-reading-excerpt > summary::-webkit-details-marker { display: none; }
.lesson-reading-excerpt > summary small { display: block; color: var(--muted); font-weight: 600; }
.lesson-reading-excerpt > summary em { font-style: normal; color: var(--primary); font-weight: 800; white-space: nowrap; }
.lesson-reading-body { max-width: none; font-size: 1.04rem; }
.lesson-reading-body p:last-child { margin-bottom: 8px; }
.lesson-reading-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; }

/* Step bookmarks: one "Now" cursor, per-step boxes, per-group counts.
   These are bookmarks, not scores - no colour rewards, no badges.

   The global `label span` rule styles FORM FIELD labels: uppercase, muted,
   small, letter-spaced and display:block. Wrapping each step in a label made
   every step inherit that, so directions shouted in grey capitals and the
   "Now" chip was pushed onto its own line. Everything below undoes it for
   this block only. */
.student-step-groups label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; cursor: pointer; margin: 0; }
.student-step-groups label > span {
  display: inline;
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.55;
}
.student-step-groups input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
/* The checkbox is the marker, so the native list number is turned off and the
   step number is drawn by the counter below - otherwise the two collided. */
.student-step-groups ol { list-style: none; margin: 0; padding-left: 0; counter-reset: student-step; }
.student-step-groups ol li { position: relative; margin: 0 0 4px; padding: 6px 0 6px 30px; counter-increment: student-step; }
.student-step-groups ol li::before {
  content: counter(student-step) ".";
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: right;
}
.student-step-groups ol li.is-done > label > span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.student-step-now {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--panther-gold);
  color: var(--panther-purple-dark);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.student-step-count { margin-left: auto; color: var(--muted); font-weight: 700; font-size: 0.84rem; white-space: nowrap; }
.student-step-group-title b.is-complete { position: relative; background: var(--status-earned-bg); color: var(--status-earned); }
.student-step-group-title b.is-complete::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--status-earned); }
.student-step-groups > section.is-current-group { box-shadow: inset 3px 0 0 var(--accent-gold); }
/* The checkpoint keeps its small uppercase kicker, but its sentence does not. */
.student-step-check label { align-items: start; }
.student-step-check label > span { display: block; color: var(--panther-gold-deep); font-size: .7rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.student-step-check label > p { grid-column: 2; margin: 3px 0 0; color: var(--text); font-size: .95rem; font-weight: 600; line-height: 1.5; text-transform: none; }
.student-step-check.is-done > label > p { color: var(--muted); }
/* The cursor lands on the checkpoint too, so mark it the way a step is marked. */
.student-step-check.is-now { box-shadow: inset 3px 0 0 var(--accent-gold); }
.student-step-check .student-step-now { margin-left: 8px; vertical-align: 1px; }
.student-step-stuck { display: inline-block; margin-top: 8px; margin-left: 34px; color: var(--accent-blue); font-size: 0.9rem; font-weight: 800; }
.student-step-status { margin: 8px 0 0; min-height: 1.2em; color: var(--status-missing); font-weight: 700; font-size: 0.9rem; }
.student-step-save { margin-top: 10px; }

/* Pick up here */
.resume-strip { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--accent-gold); border-radius: 10px; color: inherit; text-decoration: none; }
.resume-strip > span { color: var(--muted); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.resume-strip > strong { flex: 1 1 auto; min-width: 0; font-size: 1.04rem; }
.resume-strip > em { font-style: normal; font-weight: 900; color: var(--primary); white-space: nowrap; }
.resume-strip:hover, .resume-strip:focus-visible { border-left-color: var(--primary); }

/* One step at a time: dim the groups a student is not working in. Opt-in,
   never hides content from screen readers, and print is unaffected. */
body.focus-mode .student-step-groups > section:not(.is-current-group) { opacity: 0.45; }
body.focus-mode .student-step-groups > section.is-current-group { opacity: 1; }
body.focus-mode .lesson-reading-excerpt:not([open]) { opacity: 0.6; }
.focus-mode-toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
@media print {
  .student-step-now, .student-step-status, .student-step-save, .resume-strip, .focus-mode-toggle { display: none; }
  .student-step-groups input[type="checkbox"] { -webkit-appearance: none; appearance: none; border: 1px solid #666; border-radius: 3px; }
  .student-step-group-title b { color: inherit; background: none; }
  .student-step-groups ol li.is-done > label > span { color: inherit; text-decoration: none; }
  body.focus-mode .student-step-groups > section:not(.is-current-group) { opacity: 1; }
}

/* Guided Path: one screen at a time, for substitute days, e-learning days,
   or any day the class runs browser-only. */
.guided-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.guided-head h1 { margin: 2px 0 0; }
.guided-rail { margin: 0 0 18px; }
.guided-rail ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.guided-rail li a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: inherit; text-decoration: none; font-weight: 750; }
.guided-rail li a span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-size: 0.82rem; font-weight: 900; }
.guided-rail li.is-past a { color: var(--muted); }
.guided-rail li.is-past a span { background: var(--status-earned-bg); color: var(--status-earned); }
.guided-rail li.is-current a { border-color: var(--primary); background: var(--primary); color: #fff; }
.guided-rail li.is-current a span { background: rgba(255,255,255,0.25); color: #fff; }
.guided-progress { margin: 8px 0 0; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
.guided-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); }
.guided-panel > h2 { margin: 0 0 10px; font-size: 1.5rem; }
.guided-lead { font-size: 1.12rem; line-height: 1.6; margin: 0 0 12px; }
.guided-question { padding: 10px 14px; background: var(--soft); border-left: 4px solid var(--accent-blue); border-radius: 6px; }
.guided-callout { margin: 14px 0; padding: 14px 16px; background: var(--soft); border-left: 5px solid var(--accent-gold); border-radius: 8px; }
.guided-callout strong { display: block; margin-bottom: 4px; }
.guided-callout p { margin: 0 0 10px; }
.guided-lab { border-left-color: var(--primary); }
.guided-reading { margin: 0 0 12px; }
.guided-source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guided-teach h3 { margin: 16px 0 6px; font-size: 1.15rem; }
.guided-code { padding: 14px 16px; overflow-x: auto; background: var(--text); color: #f4f6f3; border-radius: 10px; line-height: 1.55; }
.guided-model-steps li, .guided-checklist li { padding: 6px 0; line-height: 1.55; }
.guided-checklist { list-style: none; padding: 0; }
.guided-checklist li::before { content: "\2713"; margin-right: 10px; color: var(--primary); font-weight: 900; }
.guided-bell { margin: 0 0 8px; padding: 10px 14px; background: var(--soft); border-radius: 8px; }
.guided-bell summary { cursor: pointer; }
.guided-bell summary span { display: inline-block; margin-right: 8px; color: var(--muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }
.guided-prompt { display: block; margin: 0 0 16px; }
.guided-prompt > span { display: block; font-weight: 850; margin-bottom: 2px; }
.guided-prompt > small { display: block; color: var(--muted); margin-bottom: 6px; }
.guided-prompt textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: inherit; line-height: 1.55; }
.guided-pager { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .guided-rail li a strong { display: none; }
  .guided-rail li.is-current a strong { display: inline; }
  .guided-panel { padding: 18px 16px; }
}
@media print { .guided-rail, .guided-pager { display: none; } }
.day-type-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.day-type-switch > span { color: var(--muted); font-weight: 800; font-size: 0.86rem; }
.day-type-switch-form { display: inline; margin: 0; }

/* Revision history on the teacher grading page. Deliberately factual: it
   reports what the saves show and always offers the ordinary explanation. */
.work-history-list { display: grid; gap: 10px; margin-top: 10px; }
.work-history-row { display: grid; gap: 6px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--status-pending); border-radius: 10px; }
.work-history-who strong { font-size: 1.02rem; }
.work-history-who small { display: block; color: var(--muted); }
.work-history-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.work-history-notes li { display: grid; gap: 2px; }
.work-history-notes span { font-weight: 700; }
.work-history-notes em { font-style: normal; color: var(--muted); font-size: 0.9rem; }
.work-history-facts { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.work-history-trail { margin: 8px 0 0; padding: 8px 12px; background: var(--soft); border-radius: 8px; }
.work-history-trail > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.work-history-trail > summary small { display: block; color: var(--muted); font-weight: 600; }
.work-history-trail > summary em { font-style: normal; color: var(--primary); font-weight: 800; }
.work-history-steps { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 4px; }
.work-history-steps li { display: grid; grid-template-columns: 72px minmax(0, 1fr) 64px 92px; align-items: center; gap: 10px; font-size: 0.86rem; }
.work-history-time { color: var(--muted); }
.work-history-bar { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.work-history-bar i { display: block; height: 100%; background: var(--primary); }
.work-history-delta { font-weight: 800; text-align: right; }
.work-history-total { color: var(--muted); text-align: right; }
/* Saves on today's lesson: the raw count, for the teacher to interpret. */
.teacher-work-counts { margin: 10px 0 4px; padding: 10px 14px; background: var(--soft); border-radius: 10px; }
.teacher-work-counts > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.teacher-work-counts > summary small { display: block; color: var(--muted); font-weight: 600; }
.teacher-work-counts > summary em { font-style: normal; color: var(--primary); font-weight: 800; }
.work-count-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.work-count-list li { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1.2fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 0.9rem; }
.work-count-list li.is-low { background: var(--status-pending-bg); }
.work-count-name { font-weight: 750; }
.work-count-saves strong { font-size: 1.05rem; }
.work-count-meta { color: var(--muted); font-size: 0.86rem; }
.work-count-open { font-weight: 800; }
.work-history-steps li.kind-seed, .work-history-steps li.kind-restore { color: var(--muted); }
.work-history-steps li.kind-seed .work-history-bar i, .work-history-steps li.kind-restore .work-history-bar i { background: var(--muted); }
.work-history-total em { font-style: normal; font-weight: 700; }
.work-count-heading { margin: 12px 0 2px; }
.handbook-attribution { margin-top: 12px; font-size: 0.88rem; }
/* The student's own files, shown on the Guided Path's work step. */
.guided-lab-panel { margin: 0 0 16px; padding: 14px 16px; background: var(--soft); border-left: 5px solid var(--primary); border-radius: 10px; }
.guided-lab-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.guided-lab-head strong { font-size: 1.05rem; }
.guided-lab-head .button { margin-left: auto; }
.guided-file-list { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 6px; }
.guided-file-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.guided-file-list a:hover, .guided-file-list a:focus-visible { border-color: var(--primary); }
.guided-file-list span { color: var(--muted); font-size: 0.84rem; font-family: system-ui, sans-serif; }
/* The lab embedded in a lesson step: same component, tighter frame. */
.guided-lab-embed { margin: 0 0 18px; }
.guided-lab-embed .web-lab-component.is-embedded .web-lab-split { min-height: 320px; }
.guided-lab-embed .web-lab-checks { margin-top: 12px; }
.lab-seeded-note { margin: 0 0 10px; padding: 8px 12px; background: var(--status-earned-bg); border-left: 4px solid var(--status-earned); border-radius: 6px; font-size: 0.92rem; }

/* ---------------------------------------------------------------
   The unit project frame: the job, and the seven steps that build it.
   A lesson only makes sense when the student can see the project it
   belongs to, so the challenge story and the phase arc carry the page.
   --------------------------------------------------------------- */
.unit-project-question {
  max-width: 62ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}
.unit-project-story {
  max-width: 68ch;
  margin: 0 0 22px;
  padding: 20px 22px;
  border-left: 5px solid var(--unit-color, var(--primary));
  border-radius: 0 6px 6px 0;
  background: var(--soft);
}
.unit-project-story p { margin: 0; font-size: 1.12rem; line-height: 1.62; }
.unit-project-role {
  margin: 0 0 10px !important;
  color: var(--primary-dark);
  font-size: 1rem !important;
  font-weight: 850;
}
.unit-project-mission {
  max-width: 68ch;
  margin: 0 0 26px;
}
.unit-project-mission > span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.unit-project-mission p { margin: 0; font-size: 1.08rem; line-height: 1.6; }

.unit-project-deliverables { margin: 0 0 26px; }
.unit-project-deliverables h3 { margin: 0 0 12px; font-size: 1.12rem; }
.unit-project-deliverables ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: deliverable;
}
.unit-project-deliverables li {
  position: relative;
  padding: 16px 16px 16px 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  counter-increment: deliverable;
}
.unit-project-deliverables li::before {
  content: counter(deliverable);
  position: absolute;
  top: 16px;
  left: 15px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--unit-color, var(--primary));
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
}
.unit-project-deliverables strong { display: block; font-size: 1.02rem; }
.unit-project-deliverables p { margin: 5px 0 0; color: var(--text); }
.unit-project-deliverables small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .84rem;
}

/* The Engineering Design Process arc. */
.edp-arc { margin: 0; padding: 0; list-style: none; }
.edp-phase {
  position: relative;
  margin: 0 0 6px;
  padding: 18px 20px 18px 26px;
  border: 1px solid var(--line);
  border-left: 5px solid #d3dcd7;
  border-radius: 0 6px 6px 0;
  background: var(--panel);
}
.edp-phase.complete { border-left-color: var(--status-earned); }
.edp-phase.current {
  border-left-color: var(--unit-color, var(--primary));
  box-shadow: var(--shadow);
}
.edp-phase-head { display: flex; align-items: center; gap: 12px; }
.edp-phase-step {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef2ef;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 900;
}
.edp-phase.current .edp-phase-step { background: var(--unit-color, var(--primary)); color: #fff; }
.edp-phase.complete .edp-phase-step { background: var(--status-earned-bg); color: var(--status-earned); }
.edp-phase-head strong { display: block; font-size: 1.14rem; }
.edp-phase-head small { display: block; color: var(--muted); font-size: .92rem; }
.edp-here {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--unit-color, var(--primary));
  color: #fff;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.edp-phase-does { margin: 12px 0 0 42px; padding: 0 0 0 18px; }
.edp-phase-does li { margin-bottom: 4px; }
.edp-phase-meter {
  height: 5px;
  margin: 14px 0 6px 42px;
  border-radius: 3px;
  background: #eaeee9;
  overflow: hidden;
}
.edp-phase-meter i {
  display: block;
  height: 100%;
  background: var(--unit-color, var(--primary));
}
.edp-phase-count { margin: 0 0 10px 42px; color: var(--muted); font-size: .84rem; }
.edp-phase-lessons { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 42px; }
.edp-lesson {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--text);
  font-size: .86rem;
  text-decoration: none;
}
.edp-lesson:hover { border-color: var(--primary); }
.edp-lesson.done { border-color: var(--status-earned); background: var(--status-earned-bg); color: var(--status-earned); }
.edp-lesson.current { border-color: var(--unit-color, var(--primary)); background: var(--unit-color, var(--primary)); color: #fff; font-weight: 850; }
.edp-lesson.locked { border-style: dashed; background: var(--status-locked-bg); color: var(--status-locked); }

@media (max-width: 720px) {
  .edp-phase-does,
  .edp-phase-meter,
  .edp-phase-count,
  .edp-phase-lessons { margin-left: 0; }
  .edp-phase-does { padding-left: 20px; }
}

/* The same seven steps, compressed, on the lesson page itself. */
.lesson-arc-strip {
  /* The hub is a three-column grid; the arc is a band under all of it. */
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.lesson-arc-strip li {
  padding: 8px 10px;
  border-top: 4px solid #dde3df;
  background: var(--soft);
}
.lesson-arc-strip li.complete { border-top-color: var(--status-earned); }
.lesson-arc-strip li.current {
  border-top-color: var(--primary);
  background: var(--status-earned-bg);
}
.lesson-arc-strip strong {
  display: block;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}
.lesson-arc-strip li.current strong { color: var(--primary-dark); }
.lesson-arc-strip small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.25;
}
@media (max-width: 760px) {
  .lesson-arc-strip { grid-auto-flow: row; grid-auto-columns: auto; }
  .lesson-arc-strip li { border-top: 0; border-left: 4px solid #dde3df; }
  .lesson-arc-strip li.complete { border-left-color: var(--status-earned); }
  .lesson-arc-strip li.current { border-left-color: var(--primary); }
  .lesson-arc-strip small { display: none; }
}

.guided-project-step {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
}
.guided-project-step strong { color: var(--primary-dark); }

/* The Guided Path's teaching step. It used to print a bare list of targets
   because it read a key the blocks do not have; now it shows the block's
   title, its explanation, its points and its example. */
.guided-teach { margin: 0 0 20px; }
.guided-teach-label {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.guided-teach h3 { margin: 0 0 8px; font-size: 1.22rem; }
.guided-teach-summary { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.62; }
.guided-teach-points { margin: 0 0 10px; padding-left: 20px; }
.guided-teach-points li { margin-bottom: 5px; line-height: 1.55; }
.guided-teach-example {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid var(--primary);
  border-radius: 0 5px 5px 0;
  background: var(--soft);
}

/* The teacher guide's own sections, beyond the first four. They were being
   discarded, which cost the demo script and the turn-in criteria. */
.teacher-notes-more { margin-top: 10px; }
.teacher-notes-more > summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-size: .86rem;
  font-weight: 850;
}
.teacher-notes-supplemental { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* The end-of-block participation pass, on the page the teacher is already on
   when the bell rings. The bulk action existed with nothing calling it. */
.teacher-credit-quick p { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }
.teacher-credit-quick form { margin-bottom: 6px; }

/* Arduino readings a student saved from the lab. SREB's redesign has the board
   collect data and students learn AI from it; this is where that data lives so
   nobody has to find a downloaded file again. */
.sensor-open-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.sensor-open-head h2 { margin: 3px 0 4px; }
.table-scroll { overflow-x: auto; }
.sensor-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sensor-table th,
.sensor-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.sensor-table th { background: var(--soft); font-weight: 850; }
.sensor-run-list { display: grid; gap: 8px; }
.sensor-run {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 0 6px 6px 0;
  background: var(--panel);
}
.sensor-run.current { box-shadow: var(--shadow); }
.sensor-run strong { display: block; }
.sensor-run small { color: var(--muted); }

/* The pointer to it from a lesson that needs the data. */
.lesson-sensor-data {
  margin: 16px 0;
  padding: 14px 16px;
  border-left: 5px solid var(--primary);
  border-radius: 0 6px 6px 0;
  background: var(--status-earned-bg);
}
.lesson-sensor-data strong { display: block; margin-bottom: 4px; }
.lesson-sensor-data p { margin: 0 0 8px; }

/* ---------------------------------------------------------------
   Pictures and video on a lesson. Every one of the 402 lessons
   shipped without either, which for a struggling reader is the
   difference between meeting an idea and only reading about it.
   --------------------------------------------------------------- */
.lesson-media-set { display: grid; gap: 18px; margin: 20px 0; }
.lesson-media { margin: 0; }
.lesson-media figcaption { margin-top: 9px; }
.lesson-media figcaption strong { font-size: 1.04rem; }
.lesson-media figcaption p { margin: 5px 0 0; }
.media-length {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

/* The poster. No iframe exists until this is pressed. */
.video-embed {
  position: relative;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #10201d;
  overflow: hidden;
}
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(23, 111, 103, .92);
  color: #fff;
  font-size: 1.9rem;
  padding-left: 6px;
}
.video-play:hover .video-play-mark { background: var(--primary-dark); }
.video-play:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

.media-summary { margin-top: 8px; }
.media-summary > summary { cursor: pointer; color: var(--primary-dark); font-weight: 850; }
.media-summary p { margin: 6px 0 0; }

.media-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}
.media-credit { margin: 6px 0 0 !important; color: var(--muted); font-size: .82rem; }
.media-credit a { color: var(--muted); }

/* Teacher-only: a picture we have specified but not made yet. */
.media-todo {
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--soft);
}
.media-todo figcaption strong { display: block; color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.media-todo > figcaption > p { margin: 4px 0 8px; font-size: 1.02rem; }
.media-prompt {
  margin: 6px 0 0 !important;
  padding: 10px 12px;
  border-radius: 5px;
  background: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .86rem;
  line-height: 1.5;
}

/* Paper day: the words, no player. */
.paper-media { margin: 14px 0; padding-left: 12px; border-left: 3px solid #999; }
.paper-media h3 { margin: 3px 0 6px; }

@media print {
  .video-embed, .media-todo { display: none; }
  .media-image img { max-width: 60%; }
}

/* The list of pictures still to make. One prompt, one filename, in order. */
.prompt-group { margin: 22px 0; }
.prompt-group h2 { margin: 0 0 12px; font-size: 1.2rem; }
.prompt-card {
  margin-bottom: 10px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--primary);
  border-radius: 0 7px 7px 0;
  background: var(--panel);
}
.prompt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}
.prompt-head strong { display: block; font-size: 1.05rem; }
.prompt-target {
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--status-earned-bg);
  color: var(--primary-dark);
  font-size: .82rem;
  word-break: break-all;
}
.prompt-shows { margin: 0 0 6px; }
.prompt-shows span {
  display: inline-block;
  min-width: 66px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prompt-text {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 5px;
  background: var(--soft);
  font-size: .88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* SREB attached up to sixteen videos to one lesson. The extras sit behind a
   toggle so the lesson's own hook is not buried under thumbnails. */
.lesson-media-more { margin: 16px 0; }
.lesson-media-more > summary {
  cursor: pointer;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--primary-dark);
  font-weight: 850;
}
.lesson-media-more[open] > summary { margin-bottom: 12px; }

/* Choosing a picture for a prompt. No filename to get right, no folder to
   find: the file goes straight onto the lesson. */
.prompt-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.prompt-upload input[type="file"] { max-width: 100%; font-size: .88rem; }
.prompt-card.is-done { border-left-color: var(--status-earned); }
.prompt-done-mark {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--status-earned-bg);
  color: var(--status-earned);
  font-size: .78rem;
  font-weight: 850;
}
.prompt-done-body {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.prompt-done-body img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
@media (max-width: 640px) {
  .prompt-done-body { grid-template-columns: minmax(0, 1fr); }
}

/* Whose view of this page. Present on every page for a real teacher, both
   directions, changing nothing but what is drawn. The old demo-student view
   swapped the session user, so getting back out was a round trip. */
.view-switch {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.view-switch a {
  padding: 5px 13px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
  text-decoration: none;
}
.view-switch a.active { background: var(--primary); color: #fff; }
.view-switch a:not(.active):hover { background: var(--soft); color: var(--text); }

/* A quiet band so it is never a surprise which view you are reading. */
.student-preview-band {
  padding: 7px 16px;
  background: var(--status-pending-bg);
  color: #6b4d10;
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
}
.student-preview-band a { color: inherit; }

/* A tool entry that names software the student opens themselves, like
   Photoshop or Premiere Pro. It looks like its neighbours but is not a link,
   because there is nothing on this site to open. */
.student-resource-grid .resource-static {
  min-width: 0; display: grid; align-content: start; gap: 5px; min-height: 82px;
  padding: 13px 14px; border: 1px dashed var(--line); border-radius: 6px; background: var(--soft);
}
.resource-row.is-static {
  cursor: default;
  border-style: dashed;
  background: transparent;
}
.resource-row.is-static:hover { border-color: var(--line); }

/* Color Studio's invitation. The swatch row is decoration, so it is hidden
   from screen readers; the words carry the meaning on their own. */
.lesson-color-callout { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lesson-color-callout > div:first-of-type { flex: 1 1 260px; min-width: 0; }
.color-callout-chips { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.color-callout-chips i {
  display: block; width: 20px; height: 34px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .14);
}

/* Why this class? The answer for a student who does not see the point. Plain,
   warm, and never a sales pitch - the words do the work, not the styling. */
.why-strip { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.why-strip a { font-weight: 700; margin-left: 6px; }
.why-page .why-hero { padding: 8px 0 18px; }
.why-page .why-hero h1 { margin: 4px 0 8px; font-size: 2rem; }
.why-one-line { font-size: 1.2rem; max-width: 60ch; margin: 0; }
.why-you-can { border-left: 4px solid var(--primary); }
.why-you-can p { font-size: 1.05rem; max-width: 62ch; margin: 4px 0 0; }
.why-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.why-list { margin: 8px 0 0; padding-left: 20px; }
.why-list li { margin: 6px 0; }
.why-someone { background: var(--soft); }
.why-units { padding-left: 22px; margin: 10px 0 0; }
.why-units li { margin: 12px 0; }
.why-units p { margin: 4px 0 0; }
.why-looks-like, .unit-why-looks-like { font-style: italic; color: var(--muted); }
.unit-why { max-width: 62ch; }

/* The wizard's editor, widened in place (the old "open full screen" was a link
   to another page that students could not get back from). */
.guided-lab-embed.is-wide { position: relative; z-index: 5; width: min(96vw, 1600px); margin-left: calc(50% - min(48vw, 800px)); }
.guided-lab-embed.is-wide .web-lab-editor { min-height: 58vh; }
.guided-lab-embed.is-wide iframe[data-lab-preview] { min-height: 58vh; }
@media (max-width: 900px) { .guided-lab-embed.is-wide { width: 100%; margin-left: 0; } }
/* What the site can see about the code, shown inside the Check it step. */
.guided-check-state { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.guided-check-state.all-pass { border-color: var(--primary); }
.guided-check-state > p:first-child { margin: 0 0 8px; }
/* Turn it in: the state of the code the student already wrote. */
.guided-turnin-state { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.guided-turnin-state.is-in { border-color: var(--primary); background: var(--panel); }
/* Not turned in is the state that has to be loud. It used to be the quietest
   box on the page while the all-clear carried the accent border - the warning
   whispered and the reassurance shouted. Gold is 2.1:1 on white, so it is the
   bar and never the words. */
.guided-turnin-state.needs-action {
  border-color: var(--status-pending);
  background: var(--status-pending-bg);
  box-shadow: inset 4px 0 0 var(--accent-gold);
}
.guided-turnin-state.needs-action > div > strong { color: var(--panther-gold-deep); }

/* An offer, not an alarm. A student who skipped a lesson should see it and be
   able to choose; the class is still on today's lesson and so are they. */
.guided-behind {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  margin: 0 0 16px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
}
.guided-behind strong { display: block; font-size: .97rem; }
.guided-behind p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.guided-turnin-state p, .guided-classroom p, .guided-complete p { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.guided-turnin-list { margin: 0 0 14px; }
.guided-classroom, .guided-complete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; }
.guided-complete.is-waiting { border-style: dashed; background: var(--surface-muted, transparent); }
.guided-complete.is-waiting strong { color: var(--muted); }

/* A setting that is a single yes/no, in a form of stacked label/field pairs. */
.checkbox-label { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 4px 10px; }
.checkbox-label input[type="checkbox"] { margin-top: 3px; }
.checkbox-label > span { font-weight: 700; }
.checkbox-label > small { grid-column: 2; }
.guided-turnin-times { margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.guided-turnin textarea[readonly] { background: var(--soft); color: var(--muted); }

/* What just happened, said in words where the student is looking. */
.lab-receipt[hidden] { display: none; }
.lab-receipt { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 12px 0; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--soft); }
.lab-receipt strong { display: block; font-size: 1.05rem; }
.lab-receipt p { margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
/* The way off the screen. Top-right corner of the notice, big enough to hit. */
.lab-receipt { position: relative; padding-right: 44px; }
.lab-receipt-close {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.lab-receipt-close:hover, .lab-receipt-close:focus-visible { background: var(--panel); color: var(--panther-purple-dark); }
.lab-receipt.is-turned-in { border-color: var(--primary); background: var(--panel); }
.lab-receipt.is-turned-in strong::before { content: "\2713  "; color: var(--primary); }
.lab-receipt.is-checked strong::before, .lab-receipt.is-saved strong::before { content: "\2713  "; color: var(--muted); }
.workspace-edited-after { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--status-pending-bg); color: var(--status-pending); font-size: .76rem; font-weight: 800; }

/* ---------------------------------------------------------------------------
   The lesson bar, pinned to the bottom of the window.

   Brady, 2026-09-08: "our progress/breadcrumb bar should become a fixed bar at
   the bottom of the screen to show our current progress and be navigation too.
   Right now it's at the top and just cluttering things up."
   --------------------------------------------------------------------------- */
.lesson-progress-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--panel);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(30, 41, 38, 0.10);
}
.lesson-progress-inner {
  width: min(1720px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: center;
  gap: 10px 20px;
  padding: 9px 0;
}
.lesson-progress-name { margin: 0; font-weight: 850; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-progress-bar ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.lesson-progress-bar li a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: inherit; text-decoration: none; font-weight: 750; font-size: .93rem; }
.lesson-progress-bar li a:hover { border-color: var(--primary); }
.lesson-progress-bar li a span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); font-size: .8rem; font-weight: 900; }
.lesson-progress-bar li.is-done a { border-color: var(--status-earned-bg); }
.lesson-progress-bar li.is-done a span { background: var(--status-earned-bg); color: var(--status-earned); }
.lesson-progress-bar li.is-current a { border-color: var(--primary); background: var(--primary); color: #fff; }
.lesson-progress-bar li.is-current a span { background: rgba(255,255,255,0.25); color: #fff; }
.lesson-progress-move { display: flex; gap: 8px; justify-content: flex-end; }
/* Nothing hides behind the bar. */
body.guided-lesson-page .page, body.student-lesson-today .page { padding-bottom: 104px; }
/* Keep the lesson bar to one row on a small laptop: the step you are on keeps
   its name, the rest are numbers. Two rows of pills ate the bottom of the page
   and pushed the work up. */
@media (max-width: 1150px) {
  .lesson-progress-name { display: none; }
  .lesson-progress-inner { grid-template-columns: 1fr minmax(0, auto); gap: 8px 12px; }
  .lesson-progress-bar li:not(.is-current) a strong { display: none; }
  .lesson-progress-bar li:not(.is-current) a { padding: 7px 10px; }
}
@media (max-width: 720px) {
  .lesson-progress-inner { grid-template-columns: 1fr; justify-items: center; }
  .lesson-progress-bar li a strong { display: none; }
  .lesson-progress-move { width: 100%; justify-content: space-between; }
}
@media print { .lesson-progress-bar { display: none; } }
/* The goal, above whichever step is open. */
.guided-goal { margin: 0 0 14px; font-size: 1.06rem; color: var(--muted); }

/* Decluttering the chrome: read-aloud rides in the top bar instead of floating
   above the page as two loose buttons, and the bar itself is quieter. */
.read-aloud-controls button { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .76rem; font-weight: 750; cursor: pointer; }
.read-aloud-controls button:hover { border-color: var(--primary); color: var(--primary); }
.read-aloud-controls button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 860px) {
}
@media print { .read-aloud-controls, .topbar { display: none; } }

/* The work step on a wide screen: directions on the left, editor on the right,
   the way a student actually works - read a line, type it, look right. A
   Chromebook or a projector stacks them, directions first. */
.guided-work.has-lab { display: grid; gap: 20px; grid-template-columns: minmax(300px, 27fr) minmax(0, 40fr); align-items: start; }
.guided-work-directions { min-width: 0; }
.guided-work.has-lab .guided-lab-embed { position: sticky; top: 68px; min-width: 0; }
/* A Chromebook stacks: directions, then the editor. Three columns need a real
   classroom monitor behind them or every column is too narrow to read. */
@media (max-width: 1500px) {
  .guided-work.has-lab { grid-template-columns: 1fr; }
  .guided-work.has-lab .guided-lab-embed { position: static; }
}

/* School colours where they read as the school, not as decoration. */
.brand span { background: var(--panther-purple); color: #fff; }
.topbar { border-bottom: 3px solid var(--panther-gold); }
.lesson-progress-bar { border-top: 3px solid var(--panther-gold); }
.lesson-progress-bar li.is-done a { border-color: var(--panther-gold); }
.lesson-progress-bar li.is-done a span { background: var(--panther-gold); color: #2b2410; }
.lab-receipt.is-turned-in { border-color: var(--panther-gold); }
.lab-receipt.is-turned-in strong::before { color: var(--panther-gold-deep); }

/* Answer text a student reads is never set in capitals. The global
   `label span` rule is for form field labels; it was also shouting every
   bell-ringer answer choice, and all-caps takes away the word shapes that
   weaker readers lean on. */
.bell-response-choice span,
.guided-prompt span,
.student-step-groups label span,
.guided-turnin label span { text-transform: none; letter-spacing: normal; }
.bell-response-choice span:first-of-type { font-weight: 800; }
/* Leftovers from the old teal theme, now that the school colours are the theme. */
.bell-response-choice:has(input:checked) { border-color: var(--primary); background: var(--status-earned-bg); }

/* ---------------------------------------------------------------------------
   The two bars are the school's colours; the page between them stays white and
   quiet. Brady: "Can we invert the top and bottom nav bars? I.e. purple bg with
   white text? Just to break up the design some?" It also frames the work: the
   chrome is clearly chrome, and the lesson is clearly the page.
   --------------------------------------------------------------------------- */
.topbar {
  background: var(--panther-purple);
  color: #fff;
  border-bottom: 3px solid var(--panther-gold);
}
.topbar a, .topbar .section-pill, .topbar summary { color: #fff; }
.topbar .brand span { background: var(--panther-gold); color: var(--panther-purple-dark); }
.topbar .brand strong { color: #fff; }
.topbar .nav a {
  /* The pills were white with a light border; on a purple bar they must carry
     their own translucent fill or the white text lands on white. */
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
}
.topbar .nav a:hover { color: #fff; background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); }
.topbar .nav a.active { color: var(--panther-purple-dark); background: var(--panther-gold); border-color: var(--panther-gold); }
.topbar .section-pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.topbar select { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.topbar select option { color: var(--text); background: #fff; }
.topbar .view-switch { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.35); }
.topbar .view-switch a { color: rgba(255,255,255,0.85); }
.topbar .view-switch a.active { background: var(--panther-gold); color: var(--panther-purple-dark); }
.topbar .nav-menu summary { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.10); }
.topbar .nav-menu[open] summary { background: var(--panther-gold); color: var(--panther-purple-dark); }
/* The drawer itself stays a light panel, so its long list is readable. */
.topbar .nav-menu nav { color: var(--text); }
.topbar .nav-menu nav a, .topbar .nav-menu nav span { color: var(--text); }
.read-aloud-controls button { background: var(--panther-purple); border-color: var(--panther-purple); color: #fff; }
.read-aloud-controls button:hover { background: var(--panther-purple-dark); border-color: var(--panther-gold); color: #fff; }
.read-aloud-controls button[aria-pressed="true"] { background: var(--panther-gold); border-color: var(--panther-gold); color: var(--panther-purple-dark); }

.lesson-progress-bar {
  background: var(--panther-purple);
  border-top: 3px solid var(--panther-gold);
}
.lesson-progress-name { color: rgba(255,255,255,0.72); }
.lesson-progress-bar li a { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.92); }
.lesson-progress-bar li a:hover { background: rgba(255,255,255,0.20); border-color: #fff; color: #fff; }
.lesson-progress-bar li a span { background: rgba(255,255,255,0.20); color: #fff; }
.lesson-progress-bar li.is-done a { border-color: rgba(201,178,107,0.75); }
.lesson-progress-bar li.is-done a span { background: var(--panther-gold); color: var(--panther-purple-dark); }
.lesson-progress-bar li.is-current a { background: var(--panther-gold); border-color: var(--panther-gold); color: var(--panther-purple-dark); }
.lesson-progress-bar li.is-current a span { background: #fff; color: var(--panther-purple-dark); }
.lesson-progress-move .button { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.lesson-progress-move .button:hover { background: rgba(255,255,255,0.22); border-color: #fff; }
.lesson-progress-move .button.primary { background: var(--panther-gold); border-color: var(--panther-gold); color: var(--panther-purple-dark); }
.lesson-progress-move .button.primary:hover { background: #d6c184; border-color: #d6c184; }

/* Chromebook width: the same bar, tighter, so the chrome does not eat three
   rows before the lesson starts. */
@media (max-width: 1500px) {
  .topbar { min-height: 48px; gap: 8px 10px; padding-left: 12px; }
  .topbar .nav a { padding: 5px 9px; font-size: .86rem; }
  .topbar .brand strong { font-size: .95rem; }
  .topbar select, .topbar .section-pill { font-size: .84rem; }
  .read-aloud-controls button { font-size: .72rem; padding: 3px 8px; }
}
@media (max-width: 1180px) {
  .topbar .nav a { padding: 5px 8px; font-size: .82rem; }
}

/* Read-aloud lives in a small dock, clear of the lesson bar, open only when
   asked for. */
.read-aloud-dock { position: fixed; right: 16px; bottom: 84px; z-index: 44; }
.read-aloud-dock > summary {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panther-purple); color: #fff;
  border: 2px solid var(--panther-gold);
  font-size: 1.15rem; cursor: pointer; list-style: none;
  box-shadow: 0 6px 18px rgba(36, 31, 38, 0.28);
}
.read-aloud-dock > summary::-webkit-details-marker { display: none; }
.read-aloud-dock > summary:hover { background: var(--panther-purple-dark); }
.read-aloud-dock[open] > summary { background: var(--panther-gold); color: var(--panther-purple-dark); }
.read-aloud-dock .read-aloud-controls {
  /* Reset every offset the earlier `position: fixed` rule set, or the panel
     inherits left:16px and stretches off the screen. Second time this exact
     trap has bitten in this file. */
  position: absolute; inset: auto 0 52px auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; width: max-content;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
.read-aloud-dock .read-aloud-controls button {
  background: var(--panther-purple); border: 1px solid var(--panther-purple);
  color: #fff; border-radius: 999px; padding: 7px 14px;
  font-size: .82rem; font-weight: 750; cursor: pointer; white-space: nowrap;
}
.read-aloud-dock .read-aloud-controls button:hover { background: var(--panther-purple-dark); border-color: var(--panther-gold); }
.read-aloud-dock .read-aloud-controls button[aria-pressed="true"] { background: var(--panther-gold); border-color: var(--panther-gold); color: var(--panther-purple-dark); }
/* Pages with no lesson bar can sit lower. */
body:not(.guided-lesson-page):not(.student-lesson-today) .read-aloud-dock { bottom: 16px; }
@media print { .read-aloud-dock { display: none; } }

/* Small-laptop chrome: nothing in the bar gets squeezed until it clips. */
@media (max-width: 1240px) {
  .topbar .view-switch { flex: 0 0 auto; }
  .topbar .view-switch a { padding: 4px 9px; }
  .topbar select { max-width: 150px; }
  .topbar .brand strong { display: none; }
  .topbar { gap: 6px 8px; }
}
@media (max-width: 1024px) {
  .topbar select { max-width: 120px; font-size: .8rem; }
  .topbar .nav a { padding: 4px 7px; font-size: .8rem; }
}

/* Rather than wrap onto a second row (which pushes the lesson down the page),
   the nav scrolls sideways on a small laptop. Everything stays reachable. */
@media (max-width: 1240px) {
  /* Brand and nav share the one row; only the nav scrolls. */
  .topbar { flex-wrap: nowrap; }
  .topbar .nav-shell { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; }
  .topbar .nav-primary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .topbar .nav-primary::-webkit-scrollbar { display: none; }
  .topbar .nav-primary a { flex: 0 0 auto; }
  .topbar .nav-shell { min-width: 0; }
}
.lab-receipt.is-failed { border-color: var(--danger); background: var(--status-missing-bg); }
.lab-receipt.is-failed strong::before { content: "!  "; color: var(--danger); }
.paper-teaching h3 { margin: 12px 0 4px; font-size: 1.02rem; }
.paper-teaching p, .paper-help li { margin: 4px 0; }
.paper-teaching ul, .paper-help ol { margin: 4px 0 10px; padding-left: 22px; }

/* Stepping lesson by lesson from the day plan - a different move from stepping
   day by day, and previously not possible at all. */
.teacher-lesson-stepper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.teacher-lesson-stepper .button { white-space: nowrap; }
.guided-check-note { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--panther-gold); background: var(--soft); }

/* ---- Class Now -------------------------------------------------------- */
/* The live class view. Read from the front of the room on a 24" monitor, so
   the tallies are large and the row tint carries the meaning, not an icon. */
.class-now-summary { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 0 0 18px; }
.class-now-tally { flex: 1 1 150px; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; background: var(--soft); }
.class-now-tally strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--panther-purple-dark); }
.class-now-tally span { display: block; margin-top: 2px; }
.class-now-tally.class-now-not_started { border-left-color: #9aa0a6; }
.class-now-tally.class-now-working { border-left-color: var(--panther-purple); }
.class-now-tally.class-now-quiet { border-left-color: #b4690e; }
.class-now-tally.class-now-turned_in { border-left-color: #1e7a45; }
.class-now-stamp { flex: 1 1 100%; margin: 0; }

.class-now-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.class-now-table th, .class-now-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.class-now-table thead th { font-size: .82rem; letter-spacing: .04em; text-transform: none; color: var(--panther-purple-dark); border-bottom: 2px solid var(--panther-gold); }
.class-now-table td[data-numeric] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.class-now-table tbody th { font-weight: 600; }
/* The tint is the status. Left border rather than a full fill, so the text
   keeps its contrast - gold and pale fills never carry meaning alone. */
.class-now-row { border-left: 5px solid transparent; }
.class-now-row.is-not_started { border-left-color: #9aa0a6; }
.class-now-row.is-working { border-left-color: var(--panther-purple); }
.class-now-row.is-quiet { border-left-color: #b4690e; background: #fdf6ec; }
.class-now-row.is-turned_in { border-left-color: #1e7a45; }
.class-now-open { text-align: right; white-space: nowrap; }

@media (max-width: 900px) {
  .class-now-table thead { display: none; }
  .class-now-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .class-now-table th, .class-now-table td { border: 0; padding: 2px 12px; }
  .class-now-table tbody th { grid-column: 1 / -1; font-size: 1.05rem; }
}

/* The hand-off from one lesson to the next, at the foot of Turn it in. It only
   appears once the lesson is marked done, so it reads as an invitation onward
   rather than a way out of unfinished work. */
.guided-onward { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 5px solid var(--panther-purple); border-radius: 12px; background: var(--soft); }
.guided-onward strong { display: block; color: var(--panther-purple-dark); }
.guided-onward p { margin: 2px 0 0; }
.guided-onward-end { margin: 16px 0 0; }

/* ---- Folding the directions away ------------------------------------- */
/* Brady: "if they just follow the Next prompt, they don't really need the
   instructions, but still want them there so they can reference them as needed
   too... That would free up room to code easier on smaller screens too."
   Folded, the directions become a single button and the editor takes the whole
   width. The choice is remembered, so a student who prefers one way never has
   to keep setting it. */
/* A handle on the edge between the two panels, not a button in the flow. It
   rides the right edge of the directions column, so the gesture is "push the
   tray shut" rather than "press a thing that is in my way". */
.directions-toggle {
  position: absolute; top: 0; right: -13px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--panther-purple-dark);
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.directions-toggle:hover, .directions-toggle:focus-visible {
  border-color: var(--panther-purple); background: var(--panther-purple); color: #fff;
}
.guided-work-directions, .web-lab-brief { position: relative; }
/* Folded, the column is only the handle, so the handle comes back inside. */
.guided-work.has-lab[data-directions-layout="shut"] .directions-toggle,
.web-lab-brief[data-directions="shut"] .directions-toggle { position: static; width: 30px; height: 30px; }

/* Everything except the button itself goes away when folded. */
[data-directions="shut"] > *:not(.directions-toggle) { display: none; }

/* The wrapper collapses its own grid, but must never be the thing that folds -
   it holds the editor too. */
.web-lab-brief[data-directions="shut"] { padding: 8px 12px; }
/* (folded-side rules moved to the end of the file, after the grid areas) */

/* Class Now's lesson strip. Two lessons a day is normal during review, so the
   view moves between them by number rather than by stepping. The day's lesson
   keeps a mark, so jumping around never loses where the class actually is. */
/* One word, then the same numbered circles All Lessons uses - one visual
   vocabulary for "a lesson" across the two pages a teacher flips between. The
   circles take their look from .sequence-dot; only the strip's own layout, the
   label, and the two states the map does not have (today / being watched)
   live here. Purple is the class's colour on this page, not a unit colour. */
.class-now-strip { --unit-color: var(--panther-purple); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.class-now-strip-label {
  margin-right: 4px; color: var(--muted);
  font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase;
}
.class-now-strip a.sequence-dot:hover { border-color: var(--panther-purple); color: var(--panther-purple-dark); }
/* The day's lesson keeps its gold ring even when another lesson is being
   watched, so the strip never loses where the class actually is. Gold is the
   ring, never the number. */
.class-now-strip a.is-today { box-shadow: 0 0 0 2px var(--panther-gold); }
.class-now-strip a.is-current {
  border-color: var(--panther-purple); background: var(--panther-purple); color: #fff;
}

/* Undo is an edit, not a hand-in, so it keeps its own group ahead of the three
   submit verbs rather than sitting among them. */
.web-lab-toolbar-edit { display: flex; align-items: center; gap: 8px; padding-right: 12px; margin-right: 2px; border-right: 1px solid var(--line); }
.web-lab-toolbar .lab-undo { border-color: var(--line); color: var(--panther-purple-dark); font-weight: 800; }

/* An unsaved file says so on its own tab, where the student is already looking,
   instead of in a line of text beside the buttons. The dot carries it as well
   as the colour: colour alone is not a signal every student can read. */
.web-lab-tab[data-unsaved] { border-color: #b4690e; color: #8a4f08; }
.web-lab-tab[data-unsaved]::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px;
  border-radius: 50%; background: #b4690e; vertical-align: middle;
}
.web-lab-tab.active[data-unsaved] { border-color: #f0c98a; }
.web-lab-tab.active[data-unsaved]::after { background: #f0c98a; }

/* The Next hint sits above the tabs now, so it reads as a line about the work
   rather than something wedged between the tabs and the editor they belong to. */
.web-lab-next-fix { margin: 0 0 10px; }

/* ---- Do the work: both titles on one line, and the room to use ---------- */
/* Brady: "Write your code should be at the same level as Do the work, see how
   it looks tight and weird over there right now." It sat outside the grid, so
   it could never line up. Both titles are the grid's first row now. */
.guided-work.has-lab {
  grid-template-areas: "worktitle labtitle" "directions lab";
}
.guided-work.has-lab > .guided-work-title { grid-area: worktitle; margin: 0; align-self: end; }
.guided-work.has-lab > .guided-lab-title { grid-area: labtitle; margin: 0; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.guided-work.has-lab > .guided-lab-title strong { font-size: 1.05rem; }
.guided-work.has-lab > .guided-work-directions { grid-area: directions; }
.guided-work.has-lab > .guided-lab-embed { grid-area: lab; }
.guided-work.has-lab[data-directions-layout="shut"] { grid-template-areas: "worktitle labtitle" "directions lab"; }

/* The step needs the screen more than it needs margins. Brady: "let's expand
   full width... with all this on the screen, we need the extra space." Only
   the step that holds an editor: everything else still reads at a column
   width a person can follow. */
@media (min-width: 1500px) {
  .guided-panel:has(.guided-work.has-lab) {
    width: calc(100vw - 24px);
    max-width: none;
    margin-left: calc(50% - 50vw + 12px);
    margin-right: calc(50% - 50vw + 12px);
  }
}

@media (max-width: 1499px) {
  .guided-work.has-lab { grid-template-areas: "worktitle" "directions" "labtitle" "lab"; }
}

/* Folded, the whole side goes - no rail. Brady: "collapse that whole side."
   The handle rides the editor's left edge, so the way back is still on screen
   without a column being held open for it. */
.guided-work.has-lab[data-directions-layout="shut"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "labtitle" "lab";
  padding-left: 30px;
  position: relative;
}
.guided-work.has-lab[data-directions-layout="shut"] > .guided-work-title,
.guided-work.has-lab[data-directions-layout="shut"] > .guided-work-directions > *:not(.directions-toggle) { display: none; }
.guided-work.has-lab[data-directions-layout="shut"] > .guided-work-directions {
  position: absolute; left: 0; top: 0; margin: 0; width: 26px;
}
.guided-work.has-lab[data-directions-layout="shut"] .directions-toggle { position: static; }

/* ---- The docked lab ----------------------------------------------------- */
/* The lesson header, at the top of the thing a student actually reads. Brady:
   "For the header area, move that into our instructions panel. I.e. The h1 at
   the top, the lesson number, description, etc can all be at the top of the
   instructions panel." The move happens in PHP, not in a media query, so it is
   the header on a Chromebook too - and so its type is set out here, not inside
   the docked block. */
.guided-work-lesson { margin: 0 0 14px; }
.guided-work-lesson .eyebrow { margin: 0 0 2px; }
.guided-work-lesson h1 { margin: 0 0 6px; font-size: 1.55rem; line-height: 1.2; }
.guided-work-lesson .guided-goal { margin: 0 0 8px; font-size: 1rem; }
.guided-work-lesson .guided-project-step { margin: 0 0 10px; }
.guided-work-title.is-inline { margin: 14px 0 10px; font-size: 1.2rem; }

/* The rail's own button means nothing where there is no rail: below the docking
   width the checks are the full panel they have always been, and a button that
   collapsed them into a column that does not exist would just be one more thing
   on screen. */
.checks-rail-toggle { display: none; }


/* Brady: "then we could dock our code editor and preview to fit the available
   height of the page, reducing scrolling issues and simplifying the ui even
   more... For the header area, move that into our instructions panel."

   So on the one step that holds directions, an editor, a preview and a set of
   checks at once, the page stops scrolling and each of those panes scrolls
   itself. The lesson's title and goal move into the directions column, because
   a header above a frame that never scrolls is just height taken from the
   editor.

   Only where the columns already sit side by side, and only on a window tall
   enough to be worth dividing. A Chromebook keeps the stacked, scrolling page
   it has today - dividing 768px between four panes helps nobody. */
@media (min-width: 1500px) and (min-height: 620px) {
  .guided-lesson-page.is-docked { overflow: hidden; }
  .guided-lesson-page.is-docked > .page {
    display: flex;
    flex-direction: column;
    /* The top bar is sticky and the step bar is fixed, so what is left is the
       viewport less both. dock-lab.js measures them; these are the fallbacks
       for a page that loads without it. */
    height: calc(100vh - var(--dock-top, 100px) - var(--dock-bottom, 62px));
    height: calc(100dvh - var(--dock-top, 100px) - var(--dock-bottom, 62px));
    padding-bottom: 8px;
  }
  .guided-lesson-page.is-docked .footer { display: none; }
  .guided-lesson-page.is-docked > .page > .guided-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
  }

  .guided-lesson-page.is-docked .guided-work.has-lab {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px 18px;
  }
  /* Each column scrolls itself, so reading the directions never moves the
     editor and typing never moves the directions. The scrolling happens one
     layer in: the fold handle is pinned to the column's edge, and a handle
     inside the scrolling box hung 13px outside it (a horizontal scrollbar the
     whole width of the directions) and scrolled out of reach besides. */
  .guided-lesson-page.is-docked .guided-work.has-lab > .guided-work-directions {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .guided-lesson-page.is-docked .guided-directions-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 16px;
  }
  .guided-lesson-page.is-docked .guided-work.has-lab > .guided-lab-embed {
    position: static;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* The component becomes the frame: editor on the left, checks rail down the
     right edge. The rail's track is held open at its shut width so opening the
     panel over the editor never moves anything. */
  .guided-lesson-page.is-docked .guided-lab-embed > .web-lab-component {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 10px;
  }
  .guided-lesson-page.is-docked .guided-lab-embed > .web-lab-component > .lab-seeded-note {
    grid-column: 1 / -1;
    margin: 0 0 8px;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  /* Only the code and the preview take the leftover height. Everything else in
     the form is a strip that is as tall as its own words.

     The Next line is written `flex: 1 0 100%` so that it spans the tool bar's
     row. Docked, the form itself is a flex COLUMN, where that same declaration
     reads as "be the full height and then grow" - it took all 820 pixels and
     left the editor two. Every strip in the column is stated plainly here so a
     flex value written for a row cannot be read as one for a column. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab > * { flex: 0 0 auto; }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-split {
    flex: 1 1 auto;
    min-height: 0;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-editors {
    min-height: 0;
    display: grid;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-editor-pane.active {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-editor {
    min-height: 0;
    height: 100%;
    resize: none;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-preview { min-height: 0; }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-preview iframe { min-height: 0; }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-toolbar { margin-top: 10px; }

  /* ---- the code and the preview are the stars --------------------------- */
  /* Brady: "I'm starting to think we should simplify our instructions too so
     they aren't so wide and provide more screen real estate for our code
     side... more codehs style, code and preview should be the stars of the
     show." CodeHS's left panel is a reference column, not half the tool.

     Two widths come back. The column itself drops from 40% of the tool to
     about 27%, and the step list stops spending a 190px column on its own
     heading - stacked, the heading sits above its steps and the steps get the
     whole column. Type size is untouched: these students read at grade 3 and
     the words stay the size they are. */
  .guided-lesson-page.is-docked .guided-work.has-lab {
    grid-template-columns: minmax(300px, 20fr) minmax(0, 53fr);
  }
  /* The fold rules live earlier in the file and carry the same specificity as
     the line above, so without this the narrower column WINS when folded: the
     directions shrink to the handle but their 300px track stays open, and the
     editor sits in the second track with a gap where the directions were.
     Brady: "The hide instructions button now collapses the ide side into it's
     old position or something weird." Folded is one column, always. */
  .guided-lesson-page.is-docked .guided-work.has-lab[data-directions-layout="shut"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .guided-lesson-page.is-docked .guided-directions-scroll .student-step-groups > section {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 15px 2px;
  }
  /* The Stop-and-check box is placed in column 2 explicitly, so declaring one
     track is not enough - it opens an implicit second column and squeezes the
     heading to zero width, printing it on top of step 1. The narrow-screen
     stack at styles.css:8650-8651 already pairs these two rules; the docked
     stack needs the same pair. */
  .guided-lesson-page.is-docked .guided-directions-scroll .student-step-check { grid-column: 1; }
  /* Stacked, the running count no longer has a column to sit in, so it rides
     with the heading it counts. */
  .guided-lesson-page.is-docked .guided-directions-scroll .student-step-group-title { gap: 8px; }

  /* ---- one strip above the code, one below ------------------------------- */
  /* Brady, looking at the first docked version beside CodeHS: "it's a little
     cluttered... scroll bars everywhere, our bars and write your code, etc...
     look at how much better they use their space... Once we're in the online
     IDE, so much needs to shift from a traditional page."

     Measured, the first version stacked FIVE strips around the editor - a
     title, a seeded-file note, a receipt, the Next hint and the tab bar - and
     put the verbs in a sixth below. 198px of a 740px frame, 258px with a
     receipt showing. CodeHS spends one strip per pane and nothing across the
     whole tool.

     So: the tabs sit on the editor, the verbs sit under it with the Next hint
     immediately above the button that answers it, and everything transient
     floats. Nothing is reparented - these are all already siblings inside
     form.web-lab, so this is placement only and the stacked page below 1500px
     never sees any of it. */

  /* "Write your code / 1 file in your site" was a page title on a tool. The
     tabs already say which file, and the step bar already says which step. */
  .guided-lesson-page.is-docked .guided-work.has-lab > .guided-lab-title { display: none; }

  /* Docked, the Next hint is rendered INSIDE the tool bar (app/lab.php), so the
     bottom of the tool is one strip carrying the sentence and the button that
     answers it. On a scrolling page it stays above the tabs, where Brady asked
     for it, so the tabs read as the editor's own. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-toolbar .web-lab-next-fix {
    flex: 1 1 380px;
    order: -1;
    min-width: 0;
    margin: 0;
    padding: 4px 10px;
    font-size: .84rem;
    line-height: 1.28;
  }
  /* Two lines, not one with an ellipsis. This sentence is the most useful line
     on the screen - "You have 4 h1 tags. Keep one and change the rest to <h2>"
     cut to "You have 4 h1 tags. Keep ..." is worse than no line at all. Two
     lines cost eleven pixels. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-toolbar .web-lab-next-fix strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /* Hidden, it must not hold a flex track open. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-toolbar .web-lab-next-fix[hidden] { display: none; }
  /* The verbs stay together on the right, so the row reads left to right as
     "here is what to fix" then "here is what to press". */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-toolbar-main { margin-left: auto; }

  /* The tab strip is the flexible track and the save status the fixed one.
     Mid-year this matters: the lab re-opens every file a student has ever
     written, so the bar grows from 49px to 105px to 170px and eats the editor.
     One row that scrolls sideways instead. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-bar {
    display: grid;
    /* tabs (flexible, scrolls) | saved status | start this file over */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-tab { flex: 0 0 auto; }

  /* A tool runner is a button and a sentence, not a second half of the tool.
     Giving it half the width left a 515x470 near-empty box beside the code. */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-split[data-runner="tool"],
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-split[data-runner="none"] {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  }

  /* ---- nothing transient moves the code --------------------------------- */
  /* A message that appears once, or for six seconds after a press, must never
     be the reason the editor is 45px shorter. Both of these float over the top
     of the preview, where they are read and then gone. */
  .guided-lesson-page.is-docked .guided-lab-embed > .web-lab-component > .lab-seeded-note,
  .guided-lesson-page.is-docked .guided-lab-embed .lab-receipt {
    position: absolute;
    z-index: 7;
    margin: 0;
    box-shadow: 0 10px 30px rgba(30, 41, 38, 0.22);
  }
  /* The note names a FILE, so it sits under the tabs it is talking about,
     over the student's own code - not over the preview, where it covered the
     preview's own header. */
  .guided-lesson-page.is-docked .guided-lab-embed > .web-lab-component > .lab-seeded-note {
    top: 58px;
    left: 10px;
    width: min(420px, 46%);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .guided-lesson-page.is-docked .guided-lab-embed > .web-lab-component > .lab-seeded-note p { margin: 0; }
  /* The receipt answers a press, so it lands top-right, clear of the tabs. */
  .guided-lesson-page.is-docked .guided-lab-embed .lab-receipt {
    top: 58px;
    right: 66px;
    left: auto;
    width: min(460px, 46%);
  }
  /* [hidden] must still win over the position rule above. */
  .guided-lesson-page.is-docked .guided-lab-embed .lab-receipt[hidden] { display: none; }

  /* ---- the checks rail --------------------------------------------------- */
  .guided-lesson-page.is-docked .guided-lab-embed .web-lab-checks {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin: 0;
  }
  .web-lab-checks[data-checks="shut"] {
    padding: 8px 6px;
    overflow-y: auto;
    overflow-x: hidden;
    /* The count at the top says how many checks there are, so the bar is not
       the cue - it is 15px stolen from a 52px rail. */
    scrollbar-width: none;
  }
  .web-lab-checks[data-checks="shut"]::-webkit-scrollbar { width: 0; height: 0; }
  /* Shut, the rail is the button and a column of marks - nothing else. */
  .web-lab-checks[data-checks="shut"] .web-lab-checks-head { display: none; }
  .web-lab-checks[data-checks="shut"] .web-lab-check-list { gap: 5px; margin: 8px 0 0; }
  .web-lab-checks[data-checks="shut"] .web-lab-check-list li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
    padding: 5px 2px;
  }
  .web-lab-checks[data-checks="shut"] .web-lab-check-list li > div,
  .web-lab-checks[data-checks="shut"] .web-lab-check-list li > em { display: none; }

  /* Open, it pops out over the editor rather than squeezing it, so the code a
     student is reading does not reflow under them while they read a check. */
  .web-lab-checks[data-checks="open"] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 6;
    width: min(360px, 40vw);
    padding: 14px 16px;
    overflow-y: auto;
    /* Declaring only overflow-y computes overflow-x to auto. Check labels are
       authored per lesson and name files and tags, so one long unbroken token
       put 348px of sideways scroll in a 360px panel. */
    overflow-x: hidden;
    box-shadow: -16px 0 34px rgba(30, 41, 38, 0.20);
  }
  .web-lab-checks[data-checks="open"] strong,
  .web-lab-checks[data-checks="open"] small { overflow-wrap: anywhere; }

  .checks-rail-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 7px 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    color: var(--panther-purple-dark);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.1;
    cursor: pointer;
  }
  .checks-rail-toggle:hover,
  .checks-rail-toggle:focus-visible {
    border-color: var(--panther-purple);
    background: var(--panther-purple);
    color: #fff;
  }
  /* Everything passing is the one state worth colouring. Gold is 2.1:1 on
     white, so it is the border here and never the words. */
  .checks-rail-toggle.is-passing { border-color: var(--status-earned); }
  .checks-rail-caret { font-size: 1.05rem; line-height: 1; }
  .web-lab-checks[data-checks="open"] .checks-rail-toggle {
    width: auto;
    flex-direction: row;
    margin: 0 0 10px auto;
    padding: 4px 10px;
  }
  .web-lab-checks[data-checks="open"] .checks-rail-count { display: none; }
}

/* ============================================================================
   Teacher Today: one type scale, one spacing scale, one owner per gap.

   Brady: "It needs a good UI workover in my opinion. Just looks disjointed and
   cluttered and random spacing, etc."

   Measured, the page declared 20 distinct spacing values and produced 5 more it
   never declared anywhere - 17.28, 23.27, 32, 34.4 and 44.4px - because
   .teacher-day-bar is a flex column with `gap`, and flex gap never collapses
   with a child's own margin, so every child's margin ADDED to the gap. Six
   consecutive gaps inside Today's Plan measured 20 / 32 / 30 / 26 / 44 / 24px.
   The 44 came from a paragraph's browser default margin (1em at 0.9rem = 14.4)
   landing on top of a 10px margin and a 20px gap. None of those numbers is
   tuneable, because none of them was ever written down.

   The ratio was inverted too: 20px between things INSIDE a panel and 16px
   between panels, so nothing grouped and the whole page read as one stack.

   Scoped to .teacher-daily-page, and appended, so source order settles every
   collision - no !important, no specificity escalation, and the whole change is
   one revertible region in a stylesheet five courses depend on.
   ========================================================================== */
.teacher-daily-page {
  --t-label:  .72rem;   /* uppercase scaffolding                       */
  --t-meta:   .84rem;   /* help text, list items, secondary buttons    */
  --t-body:   .95rem;   /* panel prose, primary buttons                */
  --t-strong: 1.15rem;  /* values that read from the back of the room  */
  --t-title:  1.4rem;   /* panel headings that carry content           */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;
}

/* --- 1. One owner per gap. A container owns its gaps; a child owns none. --- */
.teacher-daily-page .page > *,
.teacher-daily-page .teacher-day-bar > * { margin-block: 0; }
/* The browser's own paragraph margin is the source of the two largest unowned
   numbers, and it resolves differently at every font size, so it can never be
   tuned - only killed. */
.teacher-daily-page p { margin-block: 0; }
.teacher-daily-page .page > * + * { margin-block-start: var(--s5); }
.teacher-daily-page .page > .teacher-day-bar { margin-block-start: var(--s6); }
/* One mechanism, not two: the flex gap goes, margins carry the rhythm. */
.teacher-daily-page .teacher-day-bar { gap: 0; }
.teacher-daily-page .teacher-day-bar > * + * { margin-block-start: var(--s4); }

/* --- 2. The head reads as one thing, and the lesson is the biggest words. --- */
.teacher-daily-page .teacher-today-head h1 { margin: 0; line-height: 1.15; }
.teacher-daily-page .teacher-today-head .eyebrow { margin: 0 0 var(--s1); }
.teacher-daily-page .teacher-today-head .lead {
  margin-block-start: var(--s2);
  color: var(--muted);
  font-size: var(--t-meta);
}

/* --- 3. The day plan: a real form, not four unstyled browser controls. --- */
/* A grid, so the one free-text field gets the most room instead of the least.
   "Finish with" is a whole sentence and it sat in the narrowest box on the row.
   The hidden inputs take no cell - the browser gives them display:none. */
.teacher-daily-page .teacher-day-plan-form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.7fr) auto;
  gap: var(--s3) var(--s4);
  align-items: end;
}
@media (max-width: 1180px) {
  .teacher-daily-page .teacher-day-plan-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .teacher-daily-page .teacher-day-plan-form > button { grid-column: 1 / -1; justify-self: start; }
}
.teacher-daily-page .teacher-day-plan-form label { display: grid; gap: var(--s1); min-width: 0; }
.teacher-daily-page .teacher-day-plan-form label > span {
  color: var(--muted);
  font-size: var(--t-label);
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.teacher-daily-page .teacher-day-plan-form select,
.teacher-daily-page .teacher-day-plan-form input {
  width: 100%;
  min-width: 0;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--t-body);
}
/* "Finish with" was clipped at every width because it had no room of its own. */


/* --- 4. Day type: state and control in one object, like the top-bar switch. - */
.day-mode-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.day-mode-label {
  color: var(--muted);
  font-size: var(--t-label);
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.day-mode-current {
  padding: 6px 14px;
  border: 1px solid var(--panther-purple);
  border-radius: 999px;
  background: var(--panther-purple);
  color: #fff;
  font-size: var(--t-meta);
  font-weight: 800;
}
.day-mode-switch .day-type-switch-form { margin: 0; }
.day-mode-switch .button { border-radius: 999px; }
.day-mode-help { margin-block-start: var(--s2) !important; font-size: var(--t-meta); }

/* --- 5. Inner blocks share one treatment. A panel inside a panel never gets a
       border - it gets a fill, so nesting reads as depth and not as a box. --- */
.teacher-daily-page .teacher-lesson-stepper,
.teacher-daily-page .teacher-work-counts,
.teacher-daily-page .teacher-pacing-note,
.teacher-daily-page .today-inset {
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: 10px;
  background: var(--soft);
}
.teacher-daily-page .teacher-lesson-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* ---- Videos To Make ------------------------------------------------------ */
.video-packet { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; line-height: 1.45; resize: vertical; }
.video-unit { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; }
.video-unit > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.video-unit > summary em { color: var(--muted); font-style: normal; font-size: .84rem; }
.video-lesson-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .92rem; }
.video-lesson-table th, .video-lesson-table td { padding: 8px 6px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.video-lesson-table th { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; border-top: 0; }
.video-lesson-table td:last-child { text-align: right; white-space: nowrap; }
.attach-video-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.attach-video-form label { display: grid; gap: 4px; }
.attach-video-form label.wide { grid-column: 1 / -1; }
.attach-video-form label > span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.attach-video-form input, .attach-video-form select, .attach-video-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
.attach-video-form .row-actions { grid-column: 1 / -1; }
.attached-videos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.attached-videos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.attached-videos img { border-radius: 6px; }
.attached-videos strong { display: block; }
.attached-videos small { color: var(--muted); }
.attached-videos p { margin: 4px 0 0; }
@media (max-width: 760px) { .attach-video-form { grid-template-columns: 1fr; } }

/* ---- Grades -------------------------------------------------------------- */
.grades-defaults { margin: 0 0 16px; padding: 0 18px; }
.grades-defaults > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; list-style: none; }
.grades-defaults > summary em { color: var(--muted); font-style: normal; font-size: .86rem; }
.grades-defaults-form { display: grid; gap: 10px; padding: 0 0 16px; }
.grades-defaults-form label > span { display: inline-block; min-width: 130px; font-weight: 700; }
.grades-defaults-form input[type="number"] { width: 5.5em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.grades-defaults-form label em { color: var(--muted); font-style: normal; font-size: .86rem; }
.grades-policy-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; margin: 10px 0 6px; }
.grades-policy-form label { display: grid; gap: 4px; }
.grades-policy-form label > span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.grades-policy-form select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font: inherit; }
.grades-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.grades-table th, .grades-table td { padding: 8px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.grades-table thead th { border-top: 0; color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.grades-table th.num, .grades-table td.num { text-align: right; white-space: nowrap; }
.grades-table tbody th { font-weight: 800; white-space: nowrap; }
.grades-table input[type="number"] { width: 4.6em; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; text-align: right; }
.grades-table input[type="number"]:disabled { background: var(--soft); color: var(--muted); }
.grades-table input[type="text"] { width: 100%; min-width: 120px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.grades-table td small { display: block; margin-top: 3px; }
.grades-open { display: inline-block; margin-top: 3px; font-size: .82rem; }
.grades-answers > summary { cursor: pointer; list-style: none; }
.grades-answers dl { margin: 8px 0 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); max-width: 46ch; }
.grades-answers dt { margin: 6px 0 2px; color: var(--muted); font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.grades-answers dd { margin: 0; font-size: .9rem; line-height: 1.45; }
.grades-total strong { font-size: 1.05rem; }
.grades-form .row-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* ---- Grades: focus panel and suggestions -------------------------------- */
.grades-focus-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px 20px; }
.grades-focus-head .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grades-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 12px; }
.grades-focus-grid h3 { margin: 8px 0 6px; font-size: .78rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.grades-focus-list { margin: 0; padding: 0 0 0 1.2em; display: grid; gap: 6px; font-size: .92rem; }
.grades-focus-list strong { font-size: 1.02rem; }
.grades-focus-list small { display: block; color: var(--muted); font-size: .84rem; }
.grades-focus-plan { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--panther-purple); border-radius: 0 10px 10px 0; background: var(--soft); }
.grades-focus-headline { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; }
.grades-focus-item { margin: 8px 0; }
.grades-focus-item p { margin: 2px 0 0; font-size: .92rem; line-height: 1.45; }
.grades-use { margin-left: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); color: var(--panther-purple-dark); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.grades-use:hover, .grades-use:focus-visible { border-color: var(--panther-purple); background: var(--panther-purple); color: #fff; }
.grades-suggestion { margin-top: 2px; font-weight: 400; }
.grades-suggestion > summary { cursor: pointer; list-style: none; color: var(--muted); font-size: .76rem; text-decoration: underline; text-underline-offset: 2px; }
.grades-suggestion p { margin: 6px 0 0; max-width: 40ch; font-size: .84rem; line-height: 1.4; white-space: normal; }
@media (max-width: 900px) { .grades-focus-grid { grid-template-columns: 1fr; } }

/* ---- Grades: the wizard ---------------------------------------------------- */
/* Brady: "review a student's work, have the grading tools on the side, then
   progress to the next student." The work is the wide column; the tools stay
   in view while it scrolls. */
.grade-wizard-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 20px; margin-bottom: 16px; }
.grade-wizard-head h2 { margin: 2px 0 0; font-size: 1.5rem; }
.grade-wizard-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.grade-wizard-work { min-width: 0; display: grid; gap: 16px; }
.grade-wizard-work .panel-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.grade-wizard-checks { margin: 10px 0 14px; }
.grade-wizard-preview { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grade-wizard-preview iframe { display: block; width: 100%; height: 360px; border: 0; background: #fff; }
.grade-wizard-file { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; }
.grade-wizard-file > summary { padding: 8px 0; cursor: pointer; list-style: none; }
.grade-wizard-file .guided-code { margin: 0 0 10px; max-height: 520px; overflow: auto; }
.grade-wizard-answers { margin: 0; }
.grade-wizard-answers dt { margin: 12px 0 4px; font-weight: 800; }
.grade-wizard-answers dt small { display: block; color: var(--muted); font-weight: 500; font-size: .84rem; }
.grade-wizard-answers dd { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); line-height: 1.5; }
.grade-wizard-tools { position: sticky; top: 76px; display: grid; gap: 12px; }
.grade-wizard-tools label { display: grid; gap: 4px; }
.grade-wizard-tools label > span:first-child { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.grade-wizard-field { display: flex; align-items: center; gap: 8px; }
.grade-wizard-field input[type="number"] { width: 5.2em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 1.1rem; text-align: right; }
.grade-wizard-tools input[type="text"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.grade-wizard-tools .checkbox-row { display: flex; align-items: center; gap: 8px; }
.grade-wizard-why { margin: -4px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.grade-wizard-feedback { padding: 10px 12px; border-left: 3px solid var(--panther-purple); border-radius: 0 8px 8px 0; background: var(--soft); font-size: .9rem; }
.grade-wizard-feedback strong { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.grade-wizard-feedback p { margin: 0; line-height: 1.45; }
.grade-wizard-total { margin: 4px 0 0; font-size: .95rem; }
.grade-wizard-total strong { font-size: 1.4rem; }
.grade-wizard-actions { display: grid; gap: 8px; }
.grade-wizard-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }
.grade-wizard-link:hover { color: var(--panther-purple-dark); border-bottom-color: var(--panther-purple); }
@media (max-width: 1100px) { .grade-wizard { grid-template-columns: 1fr; } .grade-wizard-tools { position: static; } }