/* ===== /assets/curriculum-hub.css ===== */

.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  background: #0284c7;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  z-index: 1000000;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid #f59e0b;
}

/* Curriculum Hub base styles — extracted from curriculum/index.html.
 * Loaded by a <link> at the same document position, so cascade order is
 * unchanged. Keep the ?v= stamp in the hub in sync with this file's
 * content hash; tools/curriculum-hub-assets.test.mjs enforces that.
 */
:root {
  /* ACCESS Practice Lab palette — light, formal, academic */
  --navy: #15487f; /* deep brand blue */
  --teal: #205fa6; /* primary accent / links */
  --teal-light: rgba(32, 95, 166, 0.08);
  --amber: #256b5b; /* secondary accent (green) */
  --amber-light: rgba(44, 125, 107, 0.08);
  --cream: #eaf0f7; /* paper background */
  --ink: #14223a; /* primary text (navy ink) */
  --muted: #56627a; /* slate gray */
  --line: rgba(20, 34, 58, 0.1);
  --card: #ffffff; /* surface */
  --surface-2: #f3f7fc;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(44, 125, 107, 0.14), transparent 60%),
    radial-gradient(1000px 520px at -5% 2%, rgba(32, 95, 166, 0.16), transparent 58%),
    var(--cream);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}
a {
  color: var(--teal);
  transition: color 0.2s;
  text-decoration: none;
}
a:hover {
  color: var(--amber);
}
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 58px) clamp(18px, 4vw, 36px) 64px;
}
header.hub {
  margin: 0 0 22px;
}
header.hub .eyebrow {
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0;
}
header.hub h1 {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  margin: 8px 0 10px;
  font-size: clamp(2.35rem, 5.5vw, 3.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
header.hub p.lede {
  color: var(--muted);
  margin: 0;
  font-size: 16px;
  max-width: 65ch;
  line-height: 1.6;
}
.controls {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 18px 0 16px;
  padding: 10px;
  background: rgba(234, 240, 247, 0.92);
  border: 1px solid rgba(20, 34, 58, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(20, 34, 58, 0.08);
  backdrop-filter: blur(14px);
}
.search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  min-height: 46px;
  transition: all 0.2s;
}
.search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(32, 95, 166, 0.18);
}
.search input {
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  min-height: 44px;
}
.search label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.btn {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  outline: none;
}
.btn:hover,
.btn:focus-visible {
  background: #f3f7fc;
  border-color: var(--teal);
  color: var(--teal);
}
.no-results {
  display: none;
  color: var(--muted);
  font-size: 15px;
  padding: 18px;
  text-align: center;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.no-results.show {
  display: block;
}
/* Units (Fallback print view only) */
details.unit {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 0 16px;
  overflow: hidden;
}
details.unit > summary.unit-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  min-height: 44px;
}
details.unit > summary::-webkit-details-marker {
  display: none;
}
.unit-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.unit-num {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
}
.unit-name {
  font-size: 15px;
  color: var(--amber);
  font-weight: 600;
}
.unit-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.unit-blurb {
  font-size: 13px;
  color: var(--muted);
}
.unit-count {
  font-size: 12.5px;
  color: var(--muted);
}
.unit-sum::after {
  content: "▸";
  margin-left: 6px;
  color: var(--amber);
  font-size: 14px;
  transition: transform 0.15s;
}
details.unit[open] > summary.unit-sum::after {
  transform: rotate(90deg);
}
.unit-body {
  padding: 14px 16px 18px;
}
/* Unit resources strip (Fallback) */
/* Lesson-band game headers (curriculum organization pass) */
.band-game {
  margin: 0 0 12px;
}
.band-game-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid #0f766e;
  border-radius: 10px;
  background: var(--teal-light);
  color: #0f4c46;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.15s;
  min-height: 40px;
}
.band-game-link:hover,
.band-game-link:focus-visible {
  background: #d6f2ec;
  transform: translateY(-1px);
  outline: none;
}
.band-game-emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.band-game-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.band-game-title {
  font-weight: 700;
}
.band-game-sub {
  font-size: 0.85rem;
  color: #3a6b64;
}
.band-game-cta {
  font-size: 1rem;
  color: #0f766e;
}
@media (prefers-reduced-motion: reduce) {
  .band-game-link {
    transition: none;
  }
  .band-game-link:hover {
    transform: none;
  }
}

.unit-res {
  background: var(--teal-light);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.unit-res-label {
  display: block;
  font-weight: 700;
  color: var(--teal);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}
/* Lessons (Fallback) */

/* small-group-injected */
details.lesson.lesson-smallgroup {
  margin-left: 1.6rem;
  margin-bottom: 10px;
  border-left: 4px solid var(--line);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
details.lesson.lesson-sg1 {
  border-left-color: #3b82f6;
}
details.lesson.lesson-sg2 {
  border-left-color: #f59e0b;
}
details.lesson.lesson-smallgroup[open] {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, 0.35);
}
.lesson-smallgroup > summary.lesson-sum {
  min-height: 48px;
  padding: 12px 14px;
}
.lesson-smallgroup > summary .lesson-head {
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.lesson-smallgroup .lesson-obj {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.82;
  font-style: normal;
  max-width: 62ch;
}
.lesson-smallgroup .res {
  min-height: 42px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 14px;
  color: #0f3f73;
  background: linear-gradient(180deg, #f4f8fd, #e7f0fa);
  border: 1px solid rgba(30, 90, 160, 0.22);
  border-radius: 10px;
  box-shadow: 0 4px 12px -8px rgba(15, 63, 115, 0.45);
}
.lesson-smallgroup .res:hover {
  background: linear-gradient(180deg, #eaf3fc, #dceaf8);
  border-color: rgba(30, 90, 160, 0.35);
}
.lesson-sg2 .res {
  color: #7a4a05;
  background: linear-gradient(180deg, #fff9eb, #fef0c7);
  border-color: rgba(180, 120, 20, 0.28);
  box-shadow: 0 4px 12px -8px rgba(122, 74, 5, 0.35);
}
.lesson-sg2 .res:hover {
  background: linear-gradient(180deg, #fff4d8, #fde8a8);
  border-color: rgba(180, 120, 20, 0.42);
}
.badge-support {
  background: #e0edff;
  color: #1e40af;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge-challenge {
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  letter-spacing: 0.02em;
}

details.lesson {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 10px;
  background: rgba(255, 255, 255, 0.01);
}
details.lesson > summary.lesson-sum {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
details.lesson > summary::-webkit-details-marker {
  display: none;
}
.lesson-sum::before {
  content: "▸";
  color: var(--teal);
  margin-right: 8px;
  font-size: 13px;
  transition: transform 0.15s;
}
details.lesson[open] > summary.lesson-sum::before {
  transform: rotate(90deg);
}
.lesson-head {
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}
.lesson-body {
  padding: 0 14px 14px 30px;
}
.lesson-obj {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
}
.res-none {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
/* Resource pills */
.res-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.res {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #15487f;
  background: #eef3f9;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  padding: 8px 14px;
  min-height: 36px;
  line-height: 1.2;
  transition: all 0.2s;
}
.res:hover,
.res:focus-visible {
  background: #dbe7f5;
  border-color: var(--teal);
  outline: none;
  color: var(--navy);
}
.res-project {
  background: var(--amber-light);
  border-color: rgba(44, 125, 107, 0.22);
  color: var(--amber);
}
.res-project:hover {
  background: rgba(44, 125, 107, 0.14) !important;
  border-color: var(--amber) !important;
  color: var(--amber) !important;
}
.res-sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
.res-missing {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.01);
  border-style: dashed;
  cursor: default;
}
.res-dash {
  color: var(--line);
}
/* Badges */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 6px;
}
.badge-flagship {
  background: var(--amber-light);
  color: var(--amber);
  border: 1px solid rgba(44, 125, 107, 0.2);
}
.badge-std {
  background: var(--teal-light);
  color: var(--teal);
  border: 1px solid rgba(32, 95, 166, 0.18);
  font-weight: 600;
}
.badge-cluster {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border: 1px solid var(--line);
}
footer.hub {
  margin-top: 48px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

/* New Curriculum Redesign styles */
#interactive-hub {
  margin-top: 18px;
}
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
@media (max-width: 960px) {
  .units-grid {
    grid-template-columns: 1fr;
  }
}
.unit-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    0 10px 26px -18px rgba(20, 34, 58, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s,
    border-color 0.3s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The unit a deep link (?u=&l=) points to — highlighted so it is easy
   to find after the page opens at the top. No layout shift. */
.unit-card.is-linked {
  border-color: var(--teal);
  box-shadow:
    0 0 0 2px var(--teal),
    0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
.unit-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px -22px rgba(20, 34, 58, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-color: rgba(32, 95, 166, 0.22);
}
.unit-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.unit-card-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.unit-card-num {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.unit-card-name {
  font-size: 14px;
  color: var(--teal);
  font-weight: 600;
}
.unit-card-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.unit-card-blurb {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  text-align: right;
}

/* Selector Group */
.selector-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.selector-group--lesson {
  grid-template-columns: 1fr;
  margin-bottom: 10px;
}
/* Three horizontally-aligned phase dropdowns: Pre / Lesson / Post. */
.phase-selectors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
}
.phase-selectors .select-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .selector-group {
    grid-template-columns: 1fr;
  }
  .phase-selectors {
    grid-template-columns: 1fr;
  }
}
.selector-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.selector-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.select-wrapper {
  position: relative;
}
.select-control {
  width: 100%;
  padding: 10px 32px 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.select-control option {
  background: #ffffff;
  color: var(--ink);
}
.select-control:focus {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.03);
  outline: none;
}
.select-wrapper::after {
  content: "▼";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 8px;
}

/* Action button */
.btn-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #08090d;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    background 0.2s,
    transform 0.1s;
}
.btn-launch:hover {
  background: #ffffff;
}
.btn-launch:active {
  transform: scale(0.98);
}

/* Dynamic details block */
.lesson-info {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lesson-info-obj {
  font-size: 13.5px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  border-left: 2px solid var(--teal);
  padding-left: 10px;
}
.lesson-outline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.lesson-outline-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.lesson-outline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lesson-outline-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 12px;
  transition: all 0.2s;
}
.lesson-outline-item a:hover {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal);
}
.lesson-outline-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  flex-basis: 100%;
  width: 100%;
}
.lesson-outline-group:first-child {
  margin-top: 0;
}
.lesson-outline-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Unit Resources section */
.unit-resources-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.unit-resource-btn {
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
  color: var(--teal);
  background: var(--teal-light);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  transition: all 0.2s;
}
.unit-resource-btn:hover {
  background: rgba(32, 95, 166, 0.16);
  border-color: rgba(32, 95, 166, 0.35);
  color: var(--teal);
}

/* Canvas (SCORM) download links — one-click /api/scorm packages for
   every unit, lesson, and activity (see functions/api/scorm.js). */
.scorm-dl {
  flex: 0 0 auto;
}
.lesson-outline-item a.scorm-dl {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}
.lesson-outline-item a.scorm-dl:hover {
  color: var(--teal);
  border-style: solid;
  border-color: var(--teal);
}
/* Demote SCORM / print chrome behind a compact "More" disclosure */
.lesson-outline-item .outline-more {
  flex: 0 0 auto;
  position: relative;
}
.lesson-outline-item .outline-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  user-select: none;
}
.lesson-outline-item .outline-more > summary::-webkit-details-marker {
  display: none;
}
.lesson-outline-item .outline-more[open] > summary {
  color: var(--teal);
  border-style: solid;
  border-color: var(--teal);
}
.lesson-outline-item .outline-more-body {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(21, 72, 127, 0.12);
}
@media print {
  .lesson-outline-item .outline-more {
    display: none !important;
  }
}
.scorm-lesson-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 7px 12px;
  transition: all 0.2s;
}
.scorm-lesson-btn:hover {
  color: var(--teal);
  border-style: solid;
  border-color: var(--teal);
  background: var(--surface-2);
}
@media print {
  .scorm-dl,
  .scorm-lesson-btn {
    display: none !important;
  }
}

/* Search results section */
.search-results-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.search-result-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.search-result-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  font-family: "Nunito", system-ui, sans-serif;
}
.search-result-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}
/* Print/Screen Media queries */
@media screen {
  details.unit {
    display: none !important;
  }
}
@media print {
  #interactive-hub {
    display: none !important;
  }
  details.unit {
    display: block !important;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 18px 12px 48px;
  }
  header.hub h1 {
    font-size: 24px;
  }
  .unit-meta {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .unit-sum::after,
  .lesson-sum::before {
    transition: none;
  }
}

/* Collapsible Lesson Rows */
.unit-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.lesson-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  transition:
    border-color 0.2s,
    background 0.2s;
  overflow: hidden;
}
.lesson-row:hover {
  background: #f3f7fc;
  border-color: var(--teal);
}
.lesson-row.active {
  background: #eef3f9;
  border-color: var(--teal);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.lesson-row-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.lesson-row-header:focus-visible {
  box-shadow: inset 0 0 0 2px var(--teal);
}
.lesson-row-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.lesson-row-chevron {
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.lesson-row.active .lesson-row-chevron {
  transform: rotate(180deg);
}
.lesson-row-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lesson-row-content-inner {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Light Theme Overrides */
body.light-theme {
  /* ACCESS Practice Lab palette — cool paper, blue primary, green accent */
  --cream: #eaf0f7;
  --ink: #14223a;
  --muted: #56627a;
  --line: #d6e0ec;
  --card: #ffffff;
  --navy: #15487f;
  --teal: #205fa6;
  --teal-light: #e7eff9;
  --amber: #256b5b;
  --amber-light: #e7f4ef;
}
body.light-theme::before {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(44, 125, 107, 0.14), transparent 60%),
    radial-gradient(1000px 520px at -5% 2%, rgba(32, 95, 166, 0.16), transparent 58%),
    var(--cream) !important;
}
body.light-theme::after {
  opacity: 0.01;
}
body.light-theme .unit-card {
  box-shadow:
    0 4px 12px rgba(18, 53, 91, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
body.light-theme .unit-card:hover {
  border-color: var(--teal);
  box-shadow:
    0 8px 24px rgba(18, 53, 91, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
body.light-theme .select-control {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
}
body.light-theme .select-control option {
  background: #ffffff;
  color: var(--ink);
}
body.light-theme .btn-launch {
  background: var(--navy);
  color: #ffffff;
  box-shadow: 0 4px 12px -4px rgba(18, 53, 91, 0.3);
}
body.light-theme .btn-launch:hover {
  background: var(--teal);
  box-shadow: 0 6px 16px -4px rgba(18, 53, 91, 0.5);
}
body.light-theme .lesson-info {
  background: var(--teal-light);
  border: 1px solid var(--line);
}
body.light-theme .lesson-info-obj {
  border-left-color: var(--teal);
}
body.light-theme .lesson-outline-item a {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
}
body.light-theme .lesson-outline-item a:hover {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal);
}
body.light-theme .search {
  background: #ffffff;
  border: 1px solid var(--line);
}
body.light-theme .btn {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
}
body.light-theme .btn:hover {
  background: var(--teal-light);
  border-color: var(--teal);
}
body.light-theme .unit-resource-btn:hover {
  background: var(--teal);
  color: #ffffff;
}
body.light-theme .lesson-outline-item a.scorm-dl {
  background: transparent;
  color: var(--muted);
}
body.light-theme .lesson-outline-item a.scorm-dl:hover {
  color: var(--teal);
  border-color: var(--teal);
}
body.light-theme .scorm-lesson-btn {
  color: var(--muted);
  background: #ffffff;
  border: 1px dashed var(--line);
}
body.light-theme .scorm-lesson-btn:hover {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-light);
}
body.light-theme .search-result-item {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(18, 53, 91, 0.03);
}
body.light-theme .lesson-row {
  background: rgba(0, 0, 0, 0.015);
  border-color: var(--line);
}
body.light-theme .lesson-row:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--teal);
}
body.light-theme .lesson-row.active {
  background: var(--teal-light);
  border-color: var(--teal);
}

/* Custom Launch Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 8, 14, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 20px;
}
.modal-overlay.show {
  opacity: 1;
}
.modal-card {
  background: #11131f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  padding: 32px;
  position: relative;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.show .modal-card {
  transform: scale(1);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s;
  outline: none;
}
.modal-close:hover {
  color: var(--ink);
}
.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.modal-eyebrow {
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.modal-title {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
}
.modal-desc {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.5;
}
.modal-btn-launch {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #08090d;
  background: var(--amber);
  border: none;
  border-radius: 10px;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.1s;
}
.modal-btn-launch:hover {
  background: #ffffff;
  color: #08090d;
}
.modal-btn-launch:active {
  transform: scale(0.98);
}

/* Light Theme Overrides for Modal */
body.light-theme .modal-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body.light-theme .modal-btn-launch {
  color: #ffffff;
  background: var(--teal);
}
body.light-theme .modal-btn-launch:hover {
  background: var(--navy);
  color: #ffffff;
}

/* ── Units browser moved to its own page ─────────────────────────────────────
   The hub keeps a single card pointing at /curriculum/units/, and that page
   gets a slim header of its own. Both live here so the two pages share one
   stylesheet and stay visually identical to what the browser looked like when
   it was part of the hub. */
.units-moved {
  margin: 18px 0 26px;
}
.units-moved__cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 2px solid #cfe0ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
  text-decoration: none;
  color: #16324a;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.units-moved__cta:hover,
.units-moved__cta:focus-visible {
  border-color: #1d7fb8;
  transform: translateY(-1px);
}
.units-moved__cta strong {
  font-size: 1.05rem;
}
.units-moved__cta span {
  color: #5a7186;
  font-size: 0.92rem;
}

.units-page-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 6px;
}
.units-page-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 4.65:1 on the #eef2f8 header. #6b8299 scored 3.54:1 — this is 12.5px
     uppercase with wide tracking, the hardest thing on the page to read, and it
     is the first line a student sees now that /curriculum/ sends them here. */
  color: #5b6f82;
}
.units-page-title {
  margin: 4px 0 6px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: #12293d;
}
.units-page-sub {
  margin: 0 0 14px;
  max-width: 64ch;
  color: #4a6076;
}
.units-page-foot {
  max-width: 1180px;
  margin: 10px auto 40px;
  padding: 0 20px;
}

/* ===== /assets/curriculum-polish.css ===== */
/* ==========================================================================
   Curriculum Hub — visual polish layer.
   Loaded LAST (after curriculum-enhancements.css + curriculum-sidebar.css) so it
   refines the existing look without changing markup, JS, routes, or class names.
   Scoped to the curriculum page only (linked solely from curriculum/index.html).

   Goal: a clean, modern, professional academic UI. Crisp white surfaces, a calm
   slate palette, layered soft shadows, a defined control panel, a tinted unit
   header band, and clean activity cards. Pairs with the active `light-theme`.
   ========================================================================== */

:root {
  --p-bg: #eef2f8;
  --p-surface: #ffffff;
  --p-surface-2: #f6f9fc;
  --p-ink: #14233d;
  --p-muted: #56657d;
  --p-faint: #5d6c80; /* AA on white + #f6f9fc */
  --p-line: #e4eaf2;
  --p-line-strong: #d3dde9;
  --p-navy: #143a6b;
  --p-blue: #1f5fa6;
  --p-blue-soft: #e9f1fb;
  --p-blue-line: #d2e2f5;
  --p-green: #1c7a64;
  --p-green-soft: #e6f4ef;
  --p-radius: 16px;
  --p-radius-sm: 11px;
  --p-shadow-sm:
    0 1px 2px rgba(17, 38, 71, 0.05), 0 2px 6px rgba(17, 38, 71, 0.05);
  --p-shadow-md:
    0 4px 10px rgba(17, 38, 71, 0.06), 0 18px 36px -20px rgba(17, 38, 71, 0.3);
  --p-shadow-lg:
    0 8px 18px rgba(17, 38, 71, 0.08), 0 30px 60px -28px rgba(17, 38, 71, 0.38);
}

/* ---- Calmer, modern page background ----------------------------------- */
body.light-theme {
  background: var(--p-bg);
  font-size: 16.5px;
}
body.light-theme::before {
  background:
    radial-gradient(
      820px 420px at 94% -12%,
      rgba(28, 122, 100, 0.07),
      transparent 62%
    ),
    radial-gradient(
      1000px 520px at -10% -6%,
      rgba(31, 95, 166, 0.09),
      transparent 60%
    ),
    var(--p-bg) !important;
}

.wrap {
  max-width: 1160px;
}

/* ---- Masthead ----------------------------------------------------------- */
header.hub {
  margin-bottom: 30px;
}
header.hub .eyebrow {
  display: inline-block;
  color: var(--p-blue);
  background: var(--p-blue-soft);
  border: 1px solid var(--p-blue-line);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
header.hub h1 {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--p-navy);
  margin: 18px 0 14px;
  line-height: 1.02;
}
header.hub p.lede {
  color: var(--p-muted);
  font-size: 17px;
  max-width: 70ch;
}

/* ==========================================================================
   Control panel — gather the stacked rows into one defined white card
   ========================================================================== */
#hub-toolbar-sticky {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow-md);
  padding: 18px 20px 16px;
  margin: 0 0 26px;
}
body.light-theme #hub-toolbar-sticky {
  background: var(--p-surface);
}
/* When it sticks, keep it readable with a frosted fallback */
#hub-toolbar-sticky.is-stuck,
#hub-toolbar-sticky {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Primary search — clearly the focal control */
.controls {
  margin: 0 0 14px;
}
body.light-theme .search {
  border: 1.5px solid var(--p-line-strong);
  border-radius: 13px;
  background: var(--p-surface-2);
  box-shadow: none;
  min-height: 54px;
  padding: 0 18px;
}
.search:focus-within {
  border-color: var(--p-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 95, 166, 0.12);
}
.search label {
  color: var(--p-faint);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.search input {
  font-size: 16px;
}

/* Secondary controls (Show only problems / Status) — quiet, inline */
.audit-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--p-line);
  font-size: 13.5px;
  color: var(--p-muted);
}
.audit-controls label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.audit-controls select {
  border: 1px solid var(--p-line-strong);
  background: var(--p-surface);
  color: var(--p-ink);
  border-radius: 8px;
  padding: 6px 9px;
  font: inherit;
  font-size: 13px;
}

/* Mode toggle + dashboard link */
body.light-theme .hub-mode-toggle {
  min-height: 44px;
  border-radius: 11px;
  border-color: var(--p-line-strong);
  background: var(--p-surface);
  font-weight: 700;
}
body.light-theme .hub-mode-toggle[aria-pressed="true"] {
  background: var(--p-navy);
  border-color: var(--p-navy);
  color: #fff;
}
.hub-enhance-controls {
  margin-bottom: 16px;
}

/* Category filter chips — clean pills, solid navy active state */
.hub-filter-chips {
  gap: 9px;
  margin-bottom: 16px;
}
body.light-theme .hub-filter-chip {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--p-line-strong);
  background: var(--p-surface);
  color: var(--p-muted);
  font-weight: 700;
  box-shadow: none;
}
body.light-theme .hub-filter-chip:hover,
body.light-theme .hub-filter-chip:focus-visible {
  border-color: var(--p-blue);
  color: var(--p-blue);
  background: var(--p-blue-soft);
}
body.light-theme .hub-filter-chip[aria-pressed="true"] {
  background: var(--p-navy);
  border-color: var(--p-navy);
  color: #fff;
}

/* Browse by standard — its own light sub-panel */
.hub-standards {
  gap: 9px 11px;
  padding: 14px 16px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius-sm);
  box-shadow: none;
  margin-bottom: 0;
}
.hub-standards-lead {
  padding-top: 9px;
  color: var(--p-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11.5px;
  font-weight: 800;
}
.hub-standard-chip {
  border: 1.5px solid var(--p-line-strong);
  border-radius: 999px;
  background: var(--p-surface);
}
.hub-standard-chip:hover,
.hub-standard-chip:focus-visible {
  background: var(--p-green-soft);
  border-color: var(--p-green);
}
.hub-substd-select {
  border: 1px solid var(--p-line-strong);
  border-radius: 8px;
}

.hub-progress-summary {
  margin: 14px 2px 4px;
  font-size: 13.5px;
}

/* ==========================================================================
   Master/detail shell
   ========================================================================== */
.curr-shell {
  gap: 30px;
}
.curr-rail {
  gap: 8px;
}
.curr-rail-item {
  position: relative;
  border-radius: 12px;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--p-line);
  background: var(--p-surface);
  box-shadow: var(--p-shadow-sm);
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.curr-rail-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 4px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s;
}
.curr-rail-item:hover,
.curr-rail-item:focus-visible {
  border-color: var(--p-line-strong);
  box-shadow: var(--p-shadow-md);
  transform: none;
}
.curr-rail-item[aria-current="true"] {
  background: var(--p-blue-soft);
  border-color: var(--p-blue-line);
  box-shadow: var(--p-shadow-md);
}
.curr-rail-item[aria-current="true"]::before {
  background: var(--p-navy);
}
.cri-num {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--p-ink);
}
.curr-rail-item[aria-current="true"] .cri-num {
  color: var(--p-navy);
}
.cri-name {
  color: var(--p-muted);
  font-size: 12px;
}

/* ==========================================================================
   Unit detail card — premium white panel with a tinted header band
   ========================================================================== */
body.light-theme .unit-card {
  border: 1px solid var(--p-line);
  border-radius: 20px;
  padding: 0;
  box-shadow: var(--p-shadow-lg);
  gap: 0;
  overflow: hidden;
}
body.light-theme .unit-card:hover {
  transform: none;
  box-shadow: var(--p-shadow-lg);
  border-color: var(--p-line);
}
/* Header band */
.unit-card-header {
  align-items: flex-start;
  padding: 26px 30px 22px;
  margin: 0;
  background: linear-gradient(180deg, var(--p-blue-soft), #f4f8fd);
  border-bottom: 1px solid var(--p-blue-line);
}
.unit-card-num {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--p-navy);
  letter-spacing: -0.025em;
}
.unit-card-name {
  color: var(--p-blue);
  font-size: 15.5px;
  font-weight: 700;
}
.unit-card-blurb {
  color: var(--p-muted);
  font-size: 12.5px;
}
.unit-progress-bar {
  background: #d8e3f1;
}

/* Everything below the header gets body padding via the direct children.
   The unit-card is a flex column; pad each non-header block. */
body.light-theme .unit-card > *:not(.unit-card-header) {
  margin-left: 30px;
  margin-right: 30px;
}
body.light-theme .unit-card > .unit-resources-row {
  margin-top: 22px;
}
body.light-theme .unit-card > *:last-child {
  margin-bottom: 28px;
}

/* Standard badges row */
.lesson-standard-badge {
  border-radius: 999px;
  padding: 3px 11px;
  font-weight: 800;
}

/* Unit-resource chips (graphic novel / game / tests / print) */
body.light-theme .unit-resource-btn {
  background: var(--p-blue-soft);
  color: var(--p-blue);
  border: 1px solid var(--p-blue-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
}
body.light-theme .unit-resource-btn:hover {
  background: var(--p-navy);
  border-color: var(--p-navy);
  color: #fff;
}
.unit-resources-row {
  gap: 9px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--p-line);
}

/* Phase selectors (Pre / Lesson / Post) */
.selector-label {
  color: var(--p-faint);
  font-weight: 800;
}
body.light-theme .select-control {
  border: 1.5px solid var(--p-line-strong);
  border-radius: 11px;
  background: var(--p-surface);
  padding: 12px 36px 12px 14px;
  box-shadow: none;
  font-size: 14.5px;
}
body.light-theme .select-control:focus {
  border-color: var(--p-blue);
  box-shadow: 0 0 0 4px rgba(31, 95, 166, 0.12);
}

/* Launch button */
body.light-theme .btn-launch {
  border-radius: 11px;
  padding: 13px 24px;
  font-weight: 700;
  box-shadow: 0 8px 18px -8px rgba(20, 58, 107, 0.5);
}

/* Lesson info / objective / real-world callout */
body.light-theme .lesson-info {
  background: var(--p-surface-2);
  border: 1px solid var(--p-line);
  border-radius: 14px;
  padding: 20px;
}
.lesson-info-obj {
  border-left: 3px solid var(--p-blue);
  color: var(--p-muted);
  font-size: 14px;
}
body.light-theme .lesson-real-world {
  border-radius: 12px;
}

/* ---- Activity menu: clean grouped cards ------------------------------- */
.lesson-outline-group {
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--p-line);
}
.lesson-outline-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.lesson-outline-group-title {
  color: var(--p-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 800;
}
.lesson-outline-list {
  gap: 10px;
}
.lesson-outline-item {
  gap: 7px;
}
body.light-theme .lesson-outline-item a {
  border: 1.5px solid var(--p-line-strong);
  border-radius: 11px;
  background: var(--p-surface);
  color: var(--p-ink);
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 14px;
  box-shadow: var(--p-shadow-sm);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    color 0.15s,
    transform 0.1s;
}
body.light-theme .lesson-outline-item a:hover {
  border-color: var(--p-blue);
  color: var(--p-blue);
  box-shadow: var(--p-shadow-md);
  transform: translateY(-1px);
}
.progress-check {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  border: 1.5px solid var(--p-line-strong);
}
.progress-check[aria-pressed="true"] {
  background: var(--p-green-soft);
  border-color: var(--p-green);
  color: var(--p-green);
}

/* Copy-link */
.lesson-copy-link {
  border-radius: 11px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.wrap > footer,
footer.hub-footer {
  color: var(--p-faint);
  margin-top: 8px;
}

/* ---- Responsive: drop the header-band side padding offsets on mobile --- */
@media (max-width: 820px) {
  .curr-shell {
    gap: 18px;
  }
}
@media (max-width: 560px) {
  .unit-card-header {
    padding: 20px 18px 16px;
  }
  body.light-theme .unit-card > *:not(.unit-card-header) {
    margin-left: 18px;
    margin-right: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .curr-rail-item,
  .lesson-outline-item a {
    transition: none;
  }
}

/* ==========================================================================
   Larger, clearer type — a more legible, professional scale
   ========================================================================== */
body.light-theme {
  font-size: 17.5px;
  line-height: 1.62;
}
header.hub p.lede {
  font-size: 18px;
  line-height: 1.6;
}
.search input,
.search input::placeholder {
  font-size: 16.5px;
}
.search label,
.audit-controls,
.hub-progress-summary {
  font-size: 14px;
}
body.light-theme .hub-filter-chip {
  font-size: 14px;
}
.hub-standard-chip,
.hub-standard-chip .hsc-code,
.hub-standard-chip .hsc-label {
  font-size: 13.5px;
}
.cri-num {
  font-size: 15px;
}
.cri-name {
  font-size: 12.5px;
}
.unit-card-name {
  font-size: 16px;
}
.lesson-info-obj {
  font-size: 14.5px;
}
.lesson-real-world {
  font-size: 14px !important;
}
body.light-theme .select-control {
  font-size: 15px;
}
body.light-theme .lesson-outline-item a {
  font-size: 14px;
}
.lesson-outline-group-title,
.selector-label {
  font-size: 11.5px;
}
/* Slightly stronger muted contrast for accessibility */
body.light-theme {
  --muted: #4d5b72;
}

/* ==========================================================================
   Two-pane layout — static intro/controls on the left, scrolling units right
   Engages only on wide screens; below 1080px it stays single-column (mobile).
   ========================================================================== */
@media (min-width: 1080px) {
  .wrap {
    max-width: 1340px;
    display: grid;
    grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    padding-top: clamp(28px, 4vw, 52px);
  }

  /* Left pane: pinned, scrolls internally if taller than the viewport */
  .hub-side {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 10px 24px 2px;
    margin: -4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  /* Thin, unobtrusive scrollbar for the left pane */
  .hub-side::-webkit-scrollbar {
    width: 8px;
  }
  .hub-side::-webkit-scrollbar-thumb {
    background: #cdd8e6;
    border-radius: 999px;
  }

  /* Right pane: the curriculum, scrolls with the page */
  #interactive-hub {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .wrap > .no-results,
  .wrap > .result-count,
  .wrap > #hub-print-header {
    grid-column: 2;
  }
  .wrap > footer.hub {
    grid-column: 1 / -1;
    margin-top: 24px;
  }

  /* The control panel no longer needs its own sticky — the whole side is pinned */
  #hub-toolbar-sticky {
    position: static;
    margin-bottom: 0;
  }

  /* Reset per-item margins/spacing inside the flex side column */
  .hub-side > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Compact masthead in the narrow column */
  header.hub h1 {
    font-size: clamp(2rem, 3vw, 2.6rem);
    margin: 14px 0 10px;
  }
  header.hub p.lede {
    font-size: 15.5px;
  }

  /* Feature cards become compact link cards: icon + title + buttons only.
     The long descriptions are hidden in the narrow sidebar so the search and
     filters below stay within easy reach. */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .mailbox-feature,
  .ai-hub-feature {
    padding: 16px 18px !important;
  }
  .mailbox-feature .mf-text,
  .ai-hub-feature .ahf-text,
  .mailbox-feature .mf-sub,
  .ai-hub-feature .ahf-sub {
    display: none !important;
  }
  .mailbox-feature h2,
  .ai-hub-feature h2 {
    font-size: 1.18rem !important;
    margin: 2px 0 10px !important;
  }
  .mailbox-feature .mf-icon,
  .ai-hub-feature .ahf-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .mailbox-feature .mf-btn,
  .ai-hub-feature .ahf-btn {
    font-size: 13px !important;
    min-height: 40px !important;
  }

  /* Tighten the secondary blocks so controls stay reachable */
  .eoy-callout {
    padding: 13px 15px !important;
  }
  .eoy-callout .eoy-text {
    font-size: 13.5px !important;
  }

  /* Compact the control panel inside the narrow sidebar */
  #hub-toolbar-sticky {
    padding: 16px 16px 14px !important;
  }
  .hub-filter-chip {
    min-height: 44px;
    padding: 0 14px !important;
  }
  .hub-standards {
    padding: 11px 12px;
    gap: 7px 8px;
  }
  .hub-standard-chip {
    min-height: 32px;
    padding: 0 10px;
  }
  .hub-substd-select {
    min-height: 30px;
    max-width: none;
  }
  .hub-mode-toggle {
    min-height: 40px !important;
  }
}

/* In two-pane mode the unit rail sits inside the right pane beside the detail;
   keep the shell from feeling cramped. */
@media (min-width: 1080px) {
  .curr-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
  }
}

/* ── Accessibility: links inside text blocks ────────────────────────────────
   The hub footer sets its link apart by colour alone, which a student with a
   colour-vision deficiency cannot perceive (WCAG 1.4.1 "Use of Color";
   axe rule `link-in-text-block`). Underline it — it sits mid-sentence, so the
   underline is the only non-colour affordance available. */
footer.hub a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   GOOGLE-GRADE SIMPLIFIED HUB DESIGN OVERHAUL (2026-08-11)
   Simplifies usage, visual rhythm, search flow, and unit cards to Google standards.
   ========================================================================== */

.curriculum-guide {
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
}

.curriculum-guide h1 {
  font-family: "Nunito", "Outfit", system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--p-navy);
}

.curriculum-guide__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.curriculum-guide__action {
  border-radius: 14px;
  padding: 14px 18px;
  border: 1px solid var(--p-line);
  background: var(--p-surface-2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.curriculum-guide__action:hover {
  transform: translateY(-2px);
  background: var(--p-surface);
  border-color: var(--p-blue);
  box-shadow: 0 8px 24px -8px rgba(31, 95, 166, 0.2);
}

.curriculum-guide__action strong {
  font-size: 15px;
  font-weight: 800;
}

.curriculum-guide__action span {
  font-size: 13px;
  color: var(--p-muted);
  line-height: 1.4;
}

/* Google-grade toolbar & search bar */
#hub-toolbar-sticky {
  border-radius: 18px;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.1);
}

.search {
  border-radius: 14px !important;
  background: var(--p-surface-2) !important;
  border: 1.5px solid var(--p-line-strong) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search:focus-within {
  background: #ffffff !important;
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.15) !important;
}

/* Material You filter pills */
.hub-filter-chip {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hub-filter-chip:hover {
  transform: translateY(-1px);
}

.hub-filter-chip.active {
  background: #1a73e8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -2px rgba(26, 115, 232, 0.4) !important;
}

/* Unit cards visual elevation */
.unit {
  border-radius: 20px !important;
  border: 1px solid var(--p-line) !important;
  background: var(--p-surface) !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08) !important;
  margin-bottom: 28px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.unit:hover {
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.12) !important;
}

/* Lesson resource action chips */
.res {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.res:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 16px -4px rgba(31, 95, 166, 0.25) !important;
}

/* Pacing map Core vs Extension badges & Formative Math Probe callout */
.pace-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-left: 6px;
}

.pace-core {
  background: rgba(2, 132, 199, 0.1);
  color: #0369a1;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.pace-ext {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.pace-probe-callout {
  margin: 6px 0 8px 36px;
  padding: 8px 12px;
  background: #fffbebf5;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12.5px;
  color: #92400e;
}



/* ===== /assets/curriculum-top1.css ===== */
/* curriculum-top1.css — Start Here role panel + accessibility upgrades.
   Scoped with the top1- prefix. Additive only; no overrides of existing hub styles. */

:root {
  --top1-navy: #0f2747;
  --top1-blue: #1d6fb8;
  --top1-ink: #1b2733;
  --top1-line: #d7dee7;
  --top1-bg: #f6f9fc;
  --top1-card: #ffffff;
}

.top1 {
  margin: 18px 0 26px;
  padding: 22px;
  border: 1px solid var(--top1-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--top1-bg) 100%);
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--top1-ink);
}

.top1-hero {
  margin-bottom: 14px;
}
.top1-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--top1-blue);
}
.top1-hero h2 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--top1-navy);
  line-height: 1.15;
}
.top1-lede {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  color: #3a4654;
}

/* role cards */
.top1-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 14px;
}
.top1-role {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 76px;
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--top1-line);
  border-radius: 12px;
  background: var(--top1-card);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.05s;
}
.top1-role:hover {
  border-color: var(--top1-blue);
}
.top1-role[aria-pressed="true"] {
  border-color: var(--top1-blue);
  box-shadow: 0 0 0 2px rgba(29, 111, 184, 0.25);
  background: #f0f7ff;
}
.top1-role-icon {
  font-size: 22px;
}
.top1-role-label {
  font-weight: 700;
  font-size: 15px;
  color: var(--top1-navy);
}
.top1-role-sub {
  font-size: 12.5px;
  color: #51606f;
}

/* stage */
.top1-stage {
  border-top: 1px solid var(--top1-line);
  padding-top: 16px;
}
.top1-intro-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--top1-navy);
}
.top1-intro-sub {
  margin: 0 0 12px;
  font-size: 14px;
  color: #41506a;
  max-width: 64ch;
}

/* picker */
.top1-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.top1-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--top1-navy);
}
.top1-select {
  min-height: 44px;
  min-width: 180px;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid var(--top1-line);
  border-radius: 10px;
  background: #fff;
  color: var(--top1-ink);
}

/* lesson card / output */
.top1-lesson-card {
  padding: 14px 16px;
  border: 1px solid var(--top1-line);
  border-left: 4px solid var(--top1-blue);
  border-radius: 12px;
  background: var(--top1-card);
  margin-bottom: 12px;
}
.top1-lesson-head {
  font-size: 17px;
  color: var(--top1-navy);
  margin-bottom: 6px;
}
.top1-obj {
  margin: 0 0 8px;
  font-size: 14px;
  color: #2f3d4d;
}
.top1-why {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f0f7ff;
  border-radius: 8px;
  font-size: 13.5px;
  color: #234;
}
.top1-kv {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #2a3744;
}
.top1-note {
  padding: 8px 10px;
  background: #fff7e6;
  border-radius: 8px;
  border: 1px solid #f0dcae;
  color: #5c4708;
}

/* links + badges */
.top1-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.top1-link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
  border: 1px solid var(--top1-line);
  border-radius: 9px;
  background: #fbfdff;
}
.top1-link {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--top1-blue);
  text-decoration: none;
}
.top1-link:hover,
.top1-link:focus-visible {
  text-decoration: underline;
}
.top1-meta {
  font-size: 11.5px;
  color: #5c6b7a;
  margin-left: auto;
}
/* 🖨 print action on a printable resource row (mirrors the unit-card
   outline's per-activity print button). Right-aligns when it's the only
   trailing control; sits after the time meta when both are present. */
.top1-link-print {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--top1-blue);
  background: #fff;
  border: 1px solid var(--top1-line);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}
.top1-meta + .top1-link-print {
  margin-left: 4px;
}
.top1-link-print:hover,
.top1-link-print:focus-visible {
  background: #eef5fc;
  border-color: var(--top1-blue);
}
.top1-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.top1-badge-student {
  background: #e7f1fb;
  color: #114a7a;
  border-color: #bcd9f2;
}
.top1-badge-teacher {
  background: #fde8d4;
  color: #7a3c00;
  border-color: #f3c79a;
}
.top1-badge-download {
  background: #e9edf2;
  color: #36424f;
  border-color: #c7d0da;
}
.top1-badge-assess {
  background: #efe6fb;
  color: #4a2a7a;
  border-color: #d3bff0;
}
.top1-badge-game {
  background: #e1f4ea;
  color: #15603f;
  border-color: #b6e3cc;
}
.top1-badge-family {
  background: #def3f3;
  color: #115a5a;
  border-color: #b2e2e2;
}
.top1-badge-std {
  background: var(--top1-navy);
  color: #fff;
}

/* collapsibles */
.top1-collapse {
  border: 1px solid var(--top1-line);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
}
.top1-collapse .top1-collapse {
  background: #fbfdff;
  border-color: #dce5f0;
}
.top1-collapse > summary {
  cursor: pointer;
  padding: 12px 14px;
  min-height: 44px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--top1-navy);
  list-style: none;
}
.top1-collapse > summary::-webkit-details-marker {
  display: none;
}
.top1-collapse > summary::after {
  content: "＋";
  float: right;
  color: var(--top1-blue);
}
.top1-collapse[open] > summary::after {
  content: "－";
}
.top1-collapse-body {
  padding: 4px 14px 14px;
}
.top1-checklist {
  margin: 6px 0;
  padding-left: 20px;
}
.top1-checklist li {
  margin-bottom: 5px;
  font-size: 14px;
  color: #2a3744;
}
.top1-ladder {
  margin: 6px 0;
  padding-left: 22px;
}
.top1-ladder li {
  margin-bottom: 6px;
  font-size: 14px;
}

/* uifr */
.top1-uifr {
  border: 1px solid #c9d6e6;
  border-radius: 12px;
  background: #fbfdff;
  padding: 14px;
}
.top1-uifr-disc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: #5c6b7a;
  font-style: italic;
}
.top1-nextsteps {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f0f7ff;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #234;
}
.top1-plan {
  white-space: pre-wrap;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  background: #f7fafd;
  border: 1px solid var(--top1-line);
  border-radius: 10px;
  padding: 12px 14px;
  color: #233;
  margin: 0 0 12px;
}

/* buttons */
.top1-btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.top1-copy,
.top1-chip {
  min-height: 44px;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--top1-blue);
  border-radius: 10px;
  background: #fff;
  color: var(--top1-blue);
  cursor: pointer;
}
.top1-copy:hover,
.top1-chip:hover {
  background: #eef6ff;
}
.top1-chip {
  min-height: 44px;
  padding: 7px 12px;
  border-color: var(--top1-line);
  color: var(--top1-ink);
}
.top1-chip[aria-pressed="true"] {
  background: var(--top1-blue);
  border-color: var(--top1-blue);
  color: #fff;
}
.top1-disp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.top1-disp-label {
  font-weight: 700;
  font-size: 13px;
  width: 92px;
  color: var(--top1-navy);
}

/* Public/private safety: hide teacher-only hub chrome in the Student-Mode
   default. The existing system adds body.teacher-mode in Teacher Mode. */
body:not(.teacher-mode) .hub-teacher-only {
  display: none !important;
}

/* Mirror of the above: student-facing copy that would read as wrong or
   duplicated once Teacher Mode is on. Lets one block of hub chrome carry both
   a teacher framing and a student framing without a second render path. */
body.teacher-mode .hub-student-only {
  display: none !important;
}

/* ---------- global accessibility upgrades (WCAG 2.2 AA targets) ---------- */

/* Progress check buttons must be >= 44x44 CSS px (was ~27px). */
.progress-check {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Visible focus everywhere for keyboard users. */
.top1 a:focus-visible,
.top1 button:focus-visible,
.top1 select:focus-visible,
.progress-check:focus-visible,
.hub-mode-toggle:focus-visible,
.res:focus-visible {
  outline: 3px solid #1d6fb8;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Display preference: text scaling within the start-here panel. */
body.top1-text-lg .top1 {
  font-size: 17px;
}
body.top1-text-xl .top1 {
  font-size: 19px;
}
body.top1-text-lg .top1 .top1-kv,
body.top1-text-lg .top1 .top1-link {
  font-size: 16px;
}
body.top1-text-xl .top1 .top1-kv,
body.top1-text-xl .top1 .top1-link {
  font-size: 18px;
}
body.top1-space .top1 .top1-kv,
body.top1-space .top1 .top1-checklist li {
  line-height: 1.8;
}
body.top1-space .top1 .top1-link-row {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* High contrast preference. */
body.top1-contrast .top1 {
  background: #fff;
}
body.top1-contrast .top1-role,
body.top1-contrast .top1-link-row,
body.top1-contrast .top1-lesson-card,
body.top1-contrast .top1-collapse {
  border-color: #1b2733;
}
body.top1-contrast .top1-role-sub,
body.top1-contrast .top1-lede,
body.top1-contrast .top1-intro-sub,
body.top1-contrast .top1-meta {
  color: #1b2733;
}
body.top1-contrast .top1-link {
  color: #0b3a63;
}

/* Reduced motion preference. */
body.top1-reduced * {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .top1 * {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: 560px) {
  .top1 {
    padding: 16px;
  }
  /* Unit/role pickers fill the column and never push the page sideways. */
  .top1-field {
    width: 100%;
    min-width: 0;
  }
  .top1-picker .top1-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  /* Resource links get a comfortable tap area on phones (the row is already
     44px, but each link should be easy to hit on its own). */
  .top1-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 4px 6px;
  }
  .hub-hint-link {
    display: inline-block;
    min-height: 44px;
    padding: 10px 2px;
  }
}

/* ===== /assets/curriculum-teacher-workflow.css ===== */
.ctw-panel {
  /* Both accent values are the MINIMUM darkening that clears WCAG AA 4.5:1,
     not a redesign: #0f8a7a -> #0e8071 and #0284c7 -> #027bb9, each about 7%
     down the same hue, each measured at 4.64:1. They failed only where they
     meet small bold text — the section headings here are 12px bold and the
     buttons 13.5-14.4px bold, all under the 18.66px large-text threshold, so
     the 4.10:1 both used to score was judged against 4.5:1 and lost. Anything
     larger in the same colour always passed, which is why this went unseen. */
  --ctw-navy: #102a43;
  --ctw-blue: #1769aa;
  --ctw-teal: #0e8071;
  --ctw-gold: #f6c453;
  --ctw-paper: #f5f8fb;
  --ctw-card: #ffffff;
  --ctw-ink: #17212b;
  --ctw-muted: #526574;
  --ctw-line: #cbd8e2;
  --ctw-focus: #ffd43b;
  max-width: 1180px;
  margin: 18px auto 26px;
  padding: 0 clamp(18px, 4vw, 36px);
  color: var(--ctw-ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.ctw-panel[hidden] {
  display: none !important;
}

/* Quick-links row — the first two things a teacher sees on the hub. */
.ctw-quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .ctw-quicklinks {
    grid-template-columns: 1fr;
  }
}
.ctw-ql-card,
a.ctw-button.ctw-ql-card,
button.ctw-ql-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 2px solid var(--ctw-line);
  background: var(--ctw-card);
  color: var(--ctw-ink);
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 42, 67, 0.08);
}
.ctw-ql-card:hover,
.ctw-ql-card:focus-visible {
  border-color: var(--ctw-blue);
  box-shadow: 0 4px 16px rgba(23, 105, 170, 0.18);
}
.ctw-ql-card:focus-visible {
  outline: 3px solid var(--ctw-focus);
  outline-offset: 2px;
}
.ctw-ql-icon {
  font-size: 2rem;
  line-height: 1;
}
.ctw-ql-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ctw-ql-body strong {
  font-size: 1.08rem;
  color: var(--ctw-navy);
}
.ctw-ql-body span {
  color: var(--ctw-muted);
  font-size: 0.9rem;
}

/* The header deliberately mirrors #district-pacing-console at the top of the
   hub — same white card, same blue rule, same uppercase chip. The two panels
   carry the same "Plan it. Teach it. Launch it." promise, so reading as two
   different products was the whole complaint. Change them together. */
.ctw-header {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 4vw, 28px);
  border: 1.5px solid #027bb9;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  color: var(--ctw-ink);
  background: #ffffff;
}

.ctw-header h2 {
  margin: 0 0 6px;
  color: #0f172a;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* Direct child ONLY. As a descendant selector this also matched
   .ctw-pacing-stamp (last child of .ctw-headrow) and, at specificity 0,2,1,
   beat the stamp's own 0,1,0 rule — rendering the stamp as 15px body copy. */
.ctw-header > p:last-child {
  max-width: 72ch;
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Chip + pacing stamp sit on one row, exactly like the top console. */
/* Sits inside #district-pacing-console at the top of the hub. */
.ctw-jump-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1.5px solid #027bb9;
  border-radius: 10px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

.ctw-jump-link:hover {
  background: #bae6fd;
}

.ctw-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.ctw-kicker {
  display: inline-block;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* "Grade 6 Math · Course 1 District Pacing" — names the sequence this cockpit
   is currently pointed at, so the lesson it opens on is never a mystery. */
.ctw-pacing-stamp {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
}

/* Tabs and stage continue the header's card rather than introducing a second
   surface. The grey strip (#e8f0f5) and grey stage read as a different product
   sitting under a white panel — the whole reason the bottom of the hub did not
   look like the district console at the top. */
.ctw-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid #027bb9;
  border-top: 0;
  border-bottom: 1px solid #e2e8f0;
  scrollbar-width: thin;
}

.ctw-stage {
  padding: clamp(18px, 4vw, 28px);
  border: 1.5px solid #027bb9;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #fff;
}

/* One button language, matching the console's outlined blue pills. */
.ctw-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1.5px solid #7dd3fc;
  border-radius: 10px;
  background: #fff;
  color: #0369a1;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ctw-button:hover {
  border-color: #027bb9;
  background: #e0f2fe;
  color: #075985;
}

.ctw-button[aria-pressed="true"] {
  border-color: #027bb9;
  background: #027bb9;
  color: #fff;
}

/* The one solid call-to-action per view, like "Launch Today's Lesson" up top. */
.ctw-primary {
  background: #027bb9;
  border-color: #027bb9;
  color: #fff;
}

.ctw-primary:hover {
  color: #fff;
  background: #0369a1;
}

/* Student-facing and generator actions keep a distinct hue so a teacher can
   still tell "this sends something to students" from "this opens a tool" at a
   glance — but as tinted outlines, not solid green/purple slabs. Colour still
   carries the meaning; it no longer looks like a different design system. */
.ctw-student {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

.ctw-student:hover {
  color: #065f46;
  background: #d1fae5;
  border-color: #059669;
}

.ctw-generator {
  background: #f5f3ff;
  border-color: #c4b5fd;
  color: #6d28d9;
}

.ctw-generator:hover {
  color: #5b21b6;
  background: #ede9fe;
  border-color: #7c3aed;
}

.ctw-panel a:focus-visible,
.ctw-panel button:focus-visible,
.ctw-panel select:focus-visible,
.ctw-panel input:focus-visible,
.ctw-panel summary:focus-visible {
  outline: 4px solid var(--ctw-focus);
  outline-offset: 3px;
}

.ctw-selectors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 15px;
}

.ctw-field {
  display: grid;
  gap: 5px;
  color: var(--ctw-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.ctw-select,
.ctw-input {
  width: 100%;
  min-height: 46px;
  padding: 8px 11px;
  border: 2px solid var(--ctw-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ctw-ink);
  font: inherit;
  font-size: 0.92rem;
}

.ctw-lesson-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.ctw-lesson-nav .ctw-button:last-child {
  justify-self: end;
}

.ctw-position {
  color: var(--ctw-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.ctw-today-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 38px);
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--ctw-line);
  border-radius: 18px;
  background: var(--ctw-card);
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.08);
}

.ctw-today-card h3,
.ctw-readiness h3,
.ctw-quick h3,
.ctw-next-move h3,
.ctw-planning-card h3 {
  margin: 5px 0 10px;
  color: var(--ctw-navy);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

.ctw-objective {
  margin: 0 0 8px;
  color: var(--ctw-ink);
  font-size: 1rem;
  font-weight: 760;
}

.ctw-language {
  margin: 0 0 13px;
  color: var(--ctw-muted);
  font-size: 0.9rem;
}

.ctw-metadata,
.ctw-actions,
.ctw-quick-links,
.ctw-planning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ctw-metadata {
  margin-bottom: 18px;
}

.ctw-metadata span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f2f8;
  color: #234c68;
  font-size: 0.75rem;
  font-weight: 800;
}

.ctw-qr-wrap {
  width: 168px;
  text-align: center;
}

.ctw-qr {
  display: block;
  width: 148px;
  height: 148px;
  margin: 0 auto 6px;
  border: 6px solid #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--ctw-line);
}

.ctw-muted {
  margin: 6px 0 0;
  color: var(--ctw-muted);
  font-size: 0.78rem;
}

.ctw-readiness,
.ctw-quick,
.ctw-next-move,
.ctw-planning-card {
  margin-bottom: 18px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--ctw-line);
  border-radius: 16px;
  background: var(--ctw-card);
}

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

.ctw-readiness-item {
  padding: 13px;
  border: 1px solid #d8e3ea;
  border-radius: 11px;
  background: #f9fbfd;
}

.ctw-readiness-item h4 {
  margin: 0 0 4px;
  color: var(--ctw-teal);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ctw-readiness-item p {
  margin: 0;
  color: var(--ctw-ink);
  font-size: 0.88rem;
  line-height: 1.5;
}

.ctw-sequence {
  margin: 10px 0;
  border: 1px solid var(--ctw-line);
  border-radius: 10px;
  overflow: hidden;
}

.ctw-sequence summary {
  min-height: 44px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  color: var(--ctw-navy);
  background: #edf4f8;
  font-weight: 850;
  cursor: pointer;
}

.ctw-sequence ol {
  margin: 0;
  padding: 15px 20px 15px 42px;
}

.ctw-sequence li {
  margin-bottom: 6px;
}

.ctw-planning-grid {
  display: grid;
  gap: 12px;
}

.ctw-week-row,
.ctw-playlist-row,
.ctw-unit-row,
.ctw-evidence-grid {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--ctw-line);
  border-radius: 11px;
  background: #fff;
}

.ctw-week-row {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.ctw-playlist-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ctw-unit-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.4fr) auto;
}

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

.ctw-day,
.ctw-row-title {
  color: var(--ctw-navy);
  font-weight: 850;
}

.ctw-row-copy {
  min-width: 0;
}

.ctw-row-copy p {
  margin: 3px 0 0;
  color: var(--ctw-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.ctw-empty {
  padding: 20px;
  border: 2px dashed var(--ctw-line);
  border-radius: 12px;
  color: var(--ctw-muted);
  text-align: center;
}

.ctw-recommendations {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.ctw-recommendation {
  padding: 14px;
  border-radius: 11px;
  background: #eef6fa;
  border-left: 5px solid var(--ctw-blue);
}

.ctw-recommendation h4,
.ctw-recommendation p {
  margin: 0 0 5px;
}

.ctw-tools-drawer {
  max-width: 1180px;
  margin: 0 auto 14px;
  padding: 0 clamp(18px, 4vw, 36px);
}

/* The Pacing Planner card, lifted out of the tools drawer so a collapsed
   drawer cannot hide it (assets/curriculum-teacher-planning.js). Marker class
   only — the layout the lifted card needs is applied inline by that script,
   because three separate sheets (this one, curriculum-polish.css, and the
   hub's inline <style>) all style .mailbox-feature and the winner depends on
   load order. This class stays so the lifted card is findable in review and
   in tests. */
.cns-lifted {
  display: block;
}

.ctw-tools-drawer > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  color: #f8fafc;
  background: #161825;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 760px) {
  .ctw-selectors,
  .ctw-readiness-grid,
  .ctw-recommendations,
  .ctw-evidence-grid {
    grid-template-columns: 1fr;
  }

  .ctw-today-card {
    grid-template-columns: 1fr;
  }

  .ctw-qr-wrap {
    width: 100%;
  }

  .ctw-week-row,
  .ctw-playlist-row,
  .ctw-unit-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  body.ctw-printing > *:not(.wrap),
  body.ctw-printing .wrap > *:not(.ctw-panel),
  body.ctw-printing .ctw-header,
  body.ctw-printing .ctw-tabs,
  body.ctw-printing .ctw-selectors,
  body.ctw-printing .ctw-lesson-nav,
  body.ctw-printing .ctw-actions,
  body.ctw-printing .ctw-quick,
  body.ctw-printing .ctw-qr-wrap {
    display: none !important;
  }

  body.ctw-printing .ctw-panel,
  body.ctw-printing .ctw-stage {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #000;
  }

  body.ctw-printing .ctw-today-card,
  body.ctw-printing .ctw-readiness {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* Assembled printable lesson plan (built by the "Print lesson plan" button).
   Hidden on screen; only rendered to paper. */
#ctw-plan-print {
  display: none;
}

@media print {
  body.ctw-plan-printing {
    background: #fff;
  }

  body.ctw-plan-printing > *:not(#ctw-plan-print) {
    display: none !important;
  }

  body.ctw-plan-printing #ctw-plan-print {
    display: block;
  }

  @page {
    margin: 14mm;
  }

  .ctw-plan-doc {
    font:
      12pt/1.45 "Hanken Grotesk",
      system-ui,
      sans-serif;
    color: #000;
    max-width: 100%;
  }

  .ctw-plan-head {
    border-bottom: 3px solid #12355b;
    padding-bottom: 8px;
    margin-bottom: 14px;
  }

  .ctw-plan-brand {
    margin: 0 0 4px;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0d7a76;
  }

  .ctw-plan-head h1 {
    margin: 0 0 6px;
    font-size: 20pt;
    color: #12355b;
  }

  .ctw-plan-meta {
    margin: 0;
    font-size: 10pt;
    color: #333;
  }

  .ctw-plan-section {
    margin: 0 0 12px;
    break-inside: avoid;
  }

  .ctw-plan-section h2 {
    margin: 0 0 6px;
    padding-bottom: 3px;
    font-size: 12pt;
    color: #12355b;
    border-bottom: 1px solid #cbd6e2;
  }

  .ctw-plan-dl {
    display: grid;
    grid-template-columns: 175px 1fr;
    gap: 3px 14px;
    margin: 0;
  }

  .ctw-plan-dl dt {
    font-weight: 700;
    color: #333;
  }

  .ctw-plan-dl dd {
    margin: 0;
  }

  .ctw-plan-list {
    margin: 0;
    padding-left: 20px;
  }

  .ctw-plan-list li {
    margin: 0 0 3px;
    break-inside: avoid;
  }

  .ctw-plan-link {
    break-inside: avoid;
  }

  .ctw-plan-url {
    margin: 0 0 8px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 9.5pt;
    word-break: break-all;
  }

  .ctw-plan-qr .ctw-qr {
    width: 120px;
    height: 120px;
  }
}

/* --- Tools dropdown menu (2026-07-15): the drawer is a compact menu of the
   featured/teacher cards instead of the full card wall. Cards stay in the DOM
   as the source of truth; .ctw-cards-hidden hides them until a panel item is
   revealed or "Show full cards" is toggled. --- */
.ctw-menu-mode > summary::after {
  content: "▾";
  margin-left: auto;
  opacity: 0.7;
}
.ctw-menu-mode[open] > summary::after {
  content: "▴";
}
.ctw-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px;
  padding: 12px 2px;
}
.ctw-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(22, 24, 37, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #161825;
  font: inherit;
  font-weight: 700;
  font-size: 0.93rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ctw-menu-item:hover {
  border-color: #161825;
  background: #f6f4ef;
}
.ctw-menu-item:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.ctw-menu-item[aria-expanded="true"] {
  background: #161825;
  color: #f8fafc;
}
.ctw-menu-ic {
  font-size: 1.15rem;
  line-height: 1;
}
.ctw-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px dashed rgba(22, 24, 37, 0.35);
  border-radius: 10px;
  background: transparent;
  color: #161825;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.ctw-show-all:hover {
  border-style: solid;
}
.ctw-menu-mode .curriculum-tools-bar.ctw-cards-hidden > section {
  display: none;
}
.ctw-menu-mode .curriculum-tools-bar.ctw-cards-hidden > section.ctw-reveal {
  display: block;
}

/* ── Live class signal (Today view) ────────────────────────────────────── */
.ctw-live-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 8px 0 10px;
}
.ctw-live-table th,
.ctw-live-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.ctw-live-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.ctw-live-bad {
  color: #b91c1c;
  font-weight: 700;
}
.ctw-live-warn {
  color: #b45309;
  font-weight: 700;
}
.ctw-actions .ctw-warmup {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.ctw-actions .ctw-warmup:hover {
  background: #ffedd5;
  border-color: #ea580c;
  color: #7c2d12;
}

/* ---- Next move card (assets/curriculum-next-move.js) --------------------- */
/* The coverage line is deliberately NOT small print: a recommendation read
   without its denominator is how a teacher ends up acting on two data points. */
.ctw-next-move-coverage {
  margin: 0 0 10px;
  color: var(--ctw-ink);
  font-size: 0.95rem;
  font-weight: 640;
}
.ctw-next-move-caveat {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--ctw-navy);
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.95rem;
  font-weight: 640;
}
.ctw-next-move-lane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ctw-next-move-lab {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ctw-navy);
}
.ctw-next-move-watchwrap {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.ctw-next-move-watch {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 0.97rem;
  line-height: 1.5;
}
.ctw-next-move-pacing {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 640;
  color: var(--ctw-navy);
}

/* The workspace's own heading: it names the section for a screen reader
   without adding a fifth visible title to a page that already has plenty. */
.tws-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Teacher workspace ──────────────────────────────────────────────────────
   The first thing a teacher sees on /curriculum/: Teach, Plan, Support
   Students. Built by assets/curriculum-teacher-planning.js.

   Hierarchy is carried by SIZE and ORDER, not by colour alone: Lessons is a
   full-width band with the largest heading, Planner and Supports are a pair
   beneath it, and More is body text with a link. Deliberately not four equal
   cards — equal weight would say these are four equal choices, and they are
   not. */
.tws {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 clamp(18px, 4vw, 36px);
}

.tws-lead {
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 30px);
  border: 1px solid #d7e2ed;
  border-left: 6px solid #15487f;
  border-radius: 14px;
  background: #fff;
}

.tws-pair {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: 12px;
}

.tws-card {
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2vw, 22px);
  border: 1px solid #d7e2ed;
  border-radius: 14px;
  background: #fff;
}

.tws-kicker {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #55617a;
}

.tws-lead h3 {
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  color: #12355b;
}

.tws-card h3 {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.2;
  color: #12355b;
}

.tws-sub {
  margin: 0;
  max-width: 62ch;
  color: #3d4a60;
  font-size: 0.96rem;
  line-height: 1.5;
}

.tws-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.tws-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #15487f;
  border-radius: 10px;
  background: #15487f;
  color: #fff;
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
}

.tws-btn.ghost {
  background: #fff;
  color: #15487f;
}

.tws-btn:hover,
.tws-btn:focus-visible {
  text-decoration: underline;
}

.tws-btn:focus-visible {
  outline: 3px solid #0b2f57;
  outline-offset: 2px;
}

.tws-more {
  margin: 14px 0 0;
  color: #55617a;
  font-size: 0.92rem;
  line-height: 1.5;
}

.tws-more a {
  color: #15487f;
  font-weight: 700;
}

/* The planner card keeps its full description below the workspace, but the
   workspace is now what announces the planner, so the card no longer needs to
   shout. */
.cns-lifted.tws-has-card {
  margin-top: 0 !important;
}

/* ── Lesson picker (Teach band) ─────────────────────────────────────────────
   Section → Unit → Lesson, then the lesson's own actions. A compact teacher
   control, deliberately not three cards: these are one decision made in three
   steps, and boxing each step would say they were three separate things. */
.tws-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 14px 0 0;
}

.tws-pick-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  /* Lesson titles are long; the lesson control gets the room it needs and the
     three wrap to a stack on a narrow screen rather than shrinking the text. */
  flex: 1 1 15rem;
  min-width: 0;
}

/* Section holds the longest labels ("Geometric Reasoning and Measurement") and
   Lesson holds the longest values, so those two get the room. Unit is "Unit 7". */
.tws-pick-field:first-child {
  flex: 1.3 1 17rem;
}

.tws-pick-field:nth-child(2) {
  flex: 0.6 1 8rem;
}

.tws-pick-field:last-child {
  flex: 2 1 22rem;
}

.tws-pick-field label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #55617a;
}

.tws-pick-field select {
  font: inherit;
  font-size: 0.96rem;
  min-height: 44px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #9db0cb;
  border-radius: 10px;
  background: #fff;
  color: #12355b;
}

.tws-pick-field select:disabled {
  background: #f2f5f9;
  color: #55617a;
}

.tws-pick-field select:focus-visible {
  outline: 3px solid #0b2f57;
  outline-offset: 2px;
}

.tws-open:empty {
  display: none;
}

.tws-open {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid #d7e2ed;
  border-radius: 12px;
  background: #f7fafd;
}

.tws-open-title {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #12355b;
}

.tws-open-actions {
  margin-top: 10px;
}

/* The labelled rows of the expansion — small-group versions, what each of those
   versions hands out, the lesson's own materials, and what goes home. One rule,
   because they are one kind of thing: a labelled row of routes the manifest
   carries for this lesson. Styling them separately is how one of them drifts. */
.tws-open-variants,
.tws-open-variant-parts,
.tws-open-parts,
.tws-open-home {
  margin-top: 8px;
  align-items: center;
}

.tws-open-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #55617a;
}

.tws-pick-error {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #85381f;
  font-size: 0.95rem;
}

/* ===== /assets/curriculum-guided-path.css ===== */
:root {
  --guide-navy: #12355b;
  --guide-blue: #205fa6;
  --guide-green: #256b5b;
  --guide-paper: #ffffff;
  --guide-line: #cfdbea;
}

.curriculum-guide {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 54px) clamp(18px, 4vw, 36px) 22px;
}

.curriculum-guide__eyebrow {
  margin: 0 0 6px;
  color: var(--guide-green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.curriculum-guide h1 {
  margin: 0;
  color: var(--guide-navy);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.curriculum-guide__lede {
  max-width: 68ch;
  margin: 14px 0 0;
  color: #47566b;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
}

.curriculum-guide__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.curriculum-guide__action {
  display: grid;
  min-height: 118px;
  align-content: center;
  gap: 4px;
  padding: 18px;
  border: 2px solid var(--guide-line);
  border-radius: 16px;
  background: var(--guide-paper);
  color: var(--guide-navy);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(18, 53, 91, 0.08);
}

.curriculum-guide__action:hover,
.curriculum-guide__action:focus-visible {
  border-color: var(--guide-blue);
  color: var(--guide-blue);
  outline: 3px solid rgba(32, 95, 166, 0.2);
  outline-offset: 3px;
}

.curriculum-guide__action strong {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 1.12rem;
}

.curriculum-guide__action span {
  color: #5a6779;
  font-size: 0.92rem;
  line-height: 1.4;
}

.curriculum-guide__model {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 4px solid var(--guide-green);
  border-radius: 10px;
  background: rgba(37, 107, 91, 0.08);
  color: #33445a;
}

.curriculum-guide__model strong {
  color: var(--guide-navy);
}

.curriculum-guide__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  font-weight: 700;
}

/* Touch target: these rendered 28px tall on a phone. */
.curriculum-guide__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.curriculum-tools-disclosure {
  max-width: 1180px;
  margin: 12px auto 22px;
  padding: 0 clamp(18px, 4vw, 36px);
}

.curriculum-tools-disclosure > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--guide-line);
  border-radius: 14px;
  background: #fff;
  color: var(--guide-navy);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.curriculum-tools-disclosure > summary::-webkit-details-marker {
  display: none;
}

.curriculum-tools-disclosure > summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--guide-blue);
  font-size: 0.88rem;
}

.curriculum-tools-disclosure[open] > summary::after {
  content: "Hide";
}

.curriculum-tools-disclosure .curriculum-tools-bar {
  padding-inline: 0;
}

.lesson-outline-title {
  font-size: 1rem;
}

@media (max-width: 760px) {
  .curriculum-guide__actions {
    grid-template-columns: 1fr;
  }

  .curriculum-guide__action {
    min-height: 92px;
  }
}

@media print {
  .curriculum-guide,
  .curriculum-tools-disclosure {
    display: none !important;
  }
}

/* ===== /assets/curriculum-studio-journey.css ===== */
/* Studio Journey — per-unit progress "gallery wall" strip on the curriculum
 * hub + a continue-where-you-left-off chip. Additive and scoped (.ntj-*):
 * reads existing local signals only, renders growth, never deficits. */

.ntj-continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 16px;
  border: 2px solid #7c5cd6;
  border-radius: 14px;
  background: #f6f3ff;
  color: #2d2354;
}
.ntj-continue a {
  font-weight: 800;
  color: #4c2ea8;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ntj-continue a:focus-visible {
  outline: 3px solid #4c2ea8;
  outline-offset: 2px;
}
.ntj-continue .ntj-es {
  flex-basis: 100%;
}

.ntj-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 2px;
}
.ntj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #d5d9e6;
  border-radius: 999px;
  background: #f6f7fb;
  color: #4a5068;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  transition:
    background 200ms ease,
    border-color 200ms ease;
}
.ntj-pill[data-lit="true"] {
  border-color: #7c5cd6;
  background: #efe9ff;
  color: #3b2a75;
}
.ntj-complete {
  border-color: #15803d;
  background: #ecfdf3;
  color: #14532d;
}
.ntj-invite {
  font-size: 0.82rem;
  color: #5a6178;
  margin: 0;
  font-style: italic;
}
.ntj-es {
  display: block;
  font-size: 0.86em;
  font-style: italic;
  color: #6d5bb0;
}

@media (prefers-reduced-motion: reduce) {
  .ntj-pill {
    transition: none;
  }
}
@media print {
  .ntj-continue,
  .ntj-strip,
  .ntj-invite {
    display: none;
  }
}