/* ── Design Tokens ── */
:root {
  /* Brand — from design handoff (NCA canonical colors) */
  --blue: #2988C9;
  --blue-dark: #1E6BA3;
  --blue-darker: #1E4E78;
  --blue-light: #E4F0FC;
  --blue-gradient-start: #1F72AE; /* darkened 2026-07-23: white + light-blue small text on the hero must clear 4.5:1 */
  --blue-gradient-end: #17527E;

  --gold: #FBB018;
  --gold-text: #8F6508;
  --gold-dark: #A9760A;
  --gold-light: #FCF0D8;

  --red: #F03C24;
  --red-text: #D8402A;
  --red-deep: #B7331F; /* red for small text: 4.5:1+ on white, red-light, and bg-page */
  --red-dark: #C0392B;
  --red-light: #FCE4DF;

  --teal: #00B4A8;
  --teal-text: #009186;
  --teal-dark: #1E9E5A;
  --teal-light: #E4FCF0;

  --green: #5BBE54;

  /* A Trusted Space® sub-brand (Building Trusted Spaces track): teal green + purple.
     Purple sampled from the brand jumping-fella set (#782484). */
  --ats-teal: #00A896;
  --ats-teal-text: #007A6E;
  --ats-teal-dark: #00564E;
  --ats-teal-light: #DFF5F1;
  --ats-purple: #782484;
  --ats-purple-dark: #5C1B66;
  --ats-purple-light: #F3E8F6;
  --ats-green: #2C9364;
  --ats-green-text: #1E6B45;

  /* Year coding (NCA canonical) */
  --year1: var(--blue);       /* Notice */
  --year2: var(--red);        /* Choose */
  --year3: var(--gold);       /* Act */

  /* Neutrals */
  --ink: #242424;
  --body: #3C4A55;
  --body-alt: #55605A;
  --muted: #5F6B62;
  --muted-alt: #635A85;
  --caption: #66736A;
  --border: #E8ECE6;
  --border-lavender: #E2DCF0;
  --bg-page: #F4F7F3;
  --bg-sidebar: #F7FBF5;
  --bg-hover: #F1F4EF;
  --white: #FFFFFF;

  /* Pastel panels */
  --panel-blue: #E4F0FC;
  --panel-gold: #FCF0D8;
  --panel-teal: #E4FCF0;
  --panel-coral: #FCE4DF;
  --panel-lavender: #EFEBF7;
  --panel-lavender-light: #F6F2FC;
  --panel-cream: #FBF3DE;

  /* Success/error */
  --success: #1E9E5A;
  --success-bg: #E7F7ED;
  --success-text: #1E7A4A;
  --error: #C0392B;
  --error-bg: #FCE4DF;
  --error-text: #7A2A1E;

  /* Typography */
  --font-display: 'Fjalla One', sans-serif;
  --font-heading: 'Barlow Semi Condensed', sans-serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --container-max: 1240px;
  --sidebar-width: 248px;
  --section-gap: 60px;

  /* Radius */
  --radius-card: 16px;
  --radius-btn: 11px;
  --radius-chip: 10px;
  --radius-pill: 999px;
  --radius-frame: 18px;

  /* Shadows */
  --shadow-card: 0 16px 34px -28px rgba(36,36,36,.4);
  --shadow-frame: 0 40px 80px -34px rgba(36,36,36,.45);
  --shadow-btn: 0 12px 22px -12px rgba(41,136,201,.6);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }

/* ── Animations ── */
@keyframes ldtpeFill { from { width: 0%; } to { width: 100%; } }
@keyframes ldtpeFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ldtpeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(41,136,201,.55); } 50% { box-shadow: 0 0 0 9px rgba(41,136,201,0); } }

/* ── Typography Helpers ── */
.font-display { font-family: var(--font-display); }
.font-heading { font-family: var(--font-heading); }
.eyebrow {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* ── Layout ── */
.ldtpe-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.btn:hover { opacity: .9; }
.btn-primary {
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  padding: 13px 22px;
}
.btn-teal {
  background: var(--ats-teal, #00A896);
  color: #06110D;
  font-size: 15px;
  padding: 14px 22px;
}
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  font-size: 15px;
  padding: 14px 22px;
}
.btn-ghost {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  font-size: 14px;
  padding: 11px 18px;
}
.btn-outline {
  background: var(--white);
  border: 1.5px solid #E0E6DD;
  color: var(--ink);
  font-size: 13.5px;
  padding: 10px 16px;
}
.btn-disabled {
  background: #C7CFD9;
  color: var(--white);
  cursor: not-allowed;
}
.btn-success {
  background: var(--success);
  color: var(--white);
  font-size: 15px;
  padding: 13px 26px;
}

/* ── Cards ── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px;
}

/* ── Chips / Pills ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
}
.chip-blue { background: var(--panel-blue); color: var(--blue-dark); }
.chip-gold { background: var(--panel-gold); color: var(--gold-dark); }
.chip-teal { background: var(--panel-teal); color: var(--teal-text); }
.chip-muted { background: var(--bg-page); color: var(--caption); }
.chip-success { background: var(--success-bg); color: var(--success-text); }

/* ── Progress Bars ── */
.progress-bar {
  height: 9px;
  border-radius: var(--radius-pill);
  background: #EEF1EC;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width .4s ease;
}

/* ── Blob Shapes (curriculum manual signature) ── */
.blob {
  position: absolute;
  border-radius: 46% 54% 62% 38% / 54% 42% 58% 46%;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════ */

.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
}

/* Brand + login panel */
.landing-brand {
  position: relative;
  background: linear-gradient(158deg, var(--blue-gradient-start) 0%, var(--blue-gradient-end) 100%);
  overflow: hidden;
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-brand .blob {
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,.07);
  top: -140px;
  left: -90px;
}
.landing-brand__chips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.landing-brand__ait-chip {
  display: inline-flex;
  background: var(--white);
  border-radius: var(--radius-chip);
  padding: 8px 10px;
}
.landing-brand__ait-chip img { height: 30px; display: block; }
.landing-brand__formerly {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #E8F4FD;
  margin-bottom: 22px;
}
.landing-brand__content { position: relative; }
.landing-brand__logo-chip {
  display: inline-flex;
  background: var(--white);
  border-radius: var(--radius-chip);
  padding: 8px 13px;
}
.landing-brand__logo-chip img { height: 32px; display: block; }
.landing-brand__eyebrow {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: .7px;
  color: #E8F4FD;
  margin-bottom: 14px;
}
.landing-brand h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.11;
  margin: 0 0 16px;
  color: var(--white);
  text-transform: uppercase;
}
.landing-brand h1 .gold { color: var(--gold); }
.landing-brand__intro {
  font-size: 15px;
  line-height: 1.6;
  color: #E8F4FD;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 380px;
}

/* Login form on brand panel */
.landing-login label {
  font-family: var(--font-display);
  font-size: 12px;
  color: #E8F4FD;
  letter-spacing: .5px;
  display: block;
}
.landing-login__field {
  height: 46px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  margin: 6px 0 14px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 14px;
  color: var(--white);
  font-weight: 600;
  width: 100%;
}
.landing-login__field::placeholder { color: #E8F4FD; }
.landing-login__field[type="password"] { letter-spacing: 3px; }
.landing-login input.landing-login__field {
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  outline: none;
}
.landing-login input.landing-login__field:focus {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.18);
}
.landing-login__submit {
  background: var(--gold);
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 800;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 4px;
}
.landing-login__links {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #E8F4FD;
}
.landing-login__links a:last-child { color: var(--white); }

/* Hero photo */
.landing-photo {
  position: relative;
  background: #9FB8C9;
  overflow: hidden;
}
.landing-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Info band */
.landing-info {
  position: relative;
  padding: 58px 38px 52px;
  background: var(--white);
  border-top: 1px solid #EEF1EC;
  overflow: hidden;
}
.landing-info .blob {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, #EAF8E6, rgba(234,248,230,0));
  top: -180px;
  right: -140px;
  opacity: .8;
}
.landing-info__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}
.landing-info__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 40px;
}
.landing-info__eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ats-teal-text);
  margin-bottom: 12px;
}
.landing-info h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 31px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.2px;
  line-height: 1.08;
}
.landing-info__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body-alt);
  font-weight: 500;
  margin: 0 0 14px;
  padding-top: 4px;
}
.landing-info__body strong { font-weight: 800; color: var(--ink); }
.landing-info__sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 600;
  margin: 0;
}

/* NCA framework cards */
.nca-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.nca-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
}
.nca-card--notice { border-top: 5px solid var(--blue); }
.nca-card--choose { border-top: 5px solid var(--red); }
.nca-card--act { border-top: 5px solid var(--gold); }
.nca-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nca-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.nca-card__label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .4px;
}
.nca-card__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--body-alt);
  font-weight: 600;
}

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-card {
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.stat-card__number {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-card__label {
  font-size: 13px;
  color: var(--body);
  font-weight: 600;
  line-height: 1.45;
}

/* Demo strip */
.landing-demo {
  position: relative;
  padding: 56px 38px;
  background: linear-gradient(160deg, var(--blue-dark) 0%, #17527E 100%);
  overflow: hidden;
}
.landing-demo .blob {
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,.06);
  bottom: -160px;
  right: -90px;
}
.landing-demo__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.landing-demo__video {
  position: relative;
  border-radius: var(--radius-frame);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.5);
  height: 300px;
  background: #9FB8C9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-demo__video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  opacity: .85;
}
.landing-demo__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23,82,126,.55), rgba(23,82,126,.1));
}
.landing-demo__play {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,.5);
  z-index: 1;
}
.landing-demo__play span {
  color: var(--blue-dark);
  font-size: 24px;
  margin-left: 5px;
}
/* The tile is a real button now (click plays the film in place) */
button.landing-demo__video { border: 0; padding: 0; cursor: pointer; font: inherit; width: 100%; }
button.landing-demo__video:hover .landing-demo__play,
button.landing-demo__video:focus-visible .landing-demo__play { transform: scale(1.08); }
.landing-demo__play { transition: transform .15s ease; }
.landing-demo__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.landing-demo__eyebrow {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 1px;
  color: #C9E9FF;
  margin-bottom: 10px;
}
.landing-demo h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  color: var(--white);
  line-height: 1.06;
  margin: 0 0 16px;
  letter-spacing: -.2px;
}
.landing-demo__features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
}
.landing-demo__feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.landing-demo__feature-check {
  color: #C9E9FF;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
}
.landing-demo__feature span:last-child {
  font-size: 14px;
  color: #E8F4FD;
  font-weight: 500;
  line-height: 1.45;
}
.landing-demo__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Footer */
.landing-footer {
  background: #F5F8F3;
  border-top: 3px solid var(--blue);
  padding: 40px 38px 30px;
}
.landing-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.landing-footer__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.landing-footer__brand img { height: 30px; }
.landing-footer__brand span {
  font-size: 13px;
  color: var(--caption);
  font-weight: 700;
}
.landing-footer__legal {
  font-size: 12.5px;
  color: var(--caption);
  font-weight: 600;
  text-align: right;
  line-height: 1.6;
}
.landing-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.landing-footer__legal a:hover { color: var(--blue); }

/* ══════════════════════════════════════════════
   APP SHELL (sidebar layout for logged-in views)
   ══════════════════════════════════════════════ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid #EAEFE6;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar__logo { padding: 4px 8px 22px; }
.sidebar__logo img { height: auto; max-height: 30px; max-width: 100%; width: auto; object-fit: contain; display: block; }
/* img selector needed: `.sidebar__logo img` outranks a bare class and was
   showing the mark alongside the full logo in expanded views (Tanner 8/7). */
.sidebar__logo img.sidebar__logo-mark { display: none; }
.sidebar__lbl { white-space: nowrap; }

/* ── One menu everywhere (row 206): inner pages carry the sidebar as a fixed
   58px icon rail that expands OVER the content on hover or keyboard focus.
   The dashboard keeps the expanded grid embedding above. ── */
.sidebar--rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 60;
  width: 58px;
  height: 100vh;
  padding: 18px 9px;
  overflow: hidden;
  transition: width .22s ease, box-shadow .22s ease;
}
.sidebar--rail .sidebar__logo { padding: 4px 4px 18px; }
.sidebar--rail .sidebar__link { padding: 11px 10px; }
.sidebar--rail:hover, .sidebar--rail:focus-within {
  width: 232px;
  overflow-y: auto;
  box-shadow: 12px 0 30px rgba(20, 40, 50, .16);
}
/* Collapsed rail = icon-only: labels leave the layout entirely so each link
   (and the active blue pill) shrinks snugly around its centered emoji
   (Tanner 8/7: the wide half-empty active box read as broken). */
.sidebar--rail:not(:hover):not(:focus-within) .sidebar__lbl { display: none; }
.sidebar--rail:not(:hover):not(:focus-within) .sidebar__link { justify-content: center; padding: 11px 0; gap: 0; }
.sidebar--rail:not(:hover):not(:focus-within) .sidebar__signout { justify-content: center; text-align: center; }
.sidebar--rail:not(:hover):not(:focus-within) .sidebar__user-inner { justify-content: center; }
.sidebar--rail:not(:hover):not(:focus-within) img.sidebar__logo-full { display: none; }
.sidebar--rail:not(:hover):not(:focus-within) img.sidebar__logo-mark { display: block; width: 32px; margin: 0 auto; }
.sidebar__link--admin { margin-top: 10px; border-top: 1px solid var(--border, #EAEFE6); border-radius: 0; padding-top: 14px; }
/* Inner-page wrappers clear the rail on desktop. */
@media (min-width: 901px) {
  .has-rail { padding-left: 58px; }
}

/* Drawer chrome: the hamburger lives in each page's top bar, shown below
   900px only; the scrim is printed by ldtpe_portal_sidebar(). */
.ldtpe-menu-btn { display: none; background: none; border: 0; cursor: pointer; padding: 6px 8px; flex: none; }
.ldtpe-menu-btn i { display: block; width: 19px; height: 2.5px; border-radius: 2px; background: var(--blue-dark); margin: 4px 0; }
.ldtpe-menu-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ldtpe-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(12, 28, 38, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
@media (max-width: 900px) {
  .ldtpe-menu-btn { display: inline-flex; flex-direction: column; }
  /* Below 900px EVERY sidebar (dashboard grid or inner rail) becomes the
     slide-in drawer: full labels, full logo, no icon-rail behavior. */
  .sidebar, .sidebar--rail {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 258px; height: 100vh;
    padding: 22px 16px;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: none;
  }
  body.ldtpe-drawer-open .sidebar { transform: none; box-shadow: 12px 0 30px rgba(20, 40, 50, .28); }
  body.ldtpe-drawer-open .ldtpe-scrim { opacity: 1; pointer-events: auto; }
  .sidebar .sidebar__lbl { opacity: 1 !important; }
  .sidebar .sidebar__logo-full { display: block !important; }
  .sidebar .sidebar__logo-mark { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar--rail, .sidebar, .ldtpe-scrim, .sidebar__lbl { transition: none; }
}
.sidebar__nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-btn);
  color: var(--body-alt);
  font-weight: 700;
  font-size: 14px;
  transition: background .15s;
}
.sidebar__link:hover { background: rgba(0,0,0,.04); }
.sidebar__link--active {
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
}
.sidebar__link--active:hover { background: var(--blue); }
.sidebar__link-icon { font-size: 15px; width: 20px; text-align: center; }
/* Building Trusted Spaces entry (row 449): divider + the training's own dark-green
   skin so it reads as its own thing among the Playgility pages. */
.sidebar__divider { margin: 10px 6px 4px; border-top: 1px solid var(--border, #EAEFE6); }
/* dark-features face at a size that reads (feedback 463) */
.sidebar__face { width: 26px; max-width: none; height: auto; display: block; margin: -3px; }
.sidebar__link--bts {
  background: linear-gradient(135deg, #00473C 0%, #00120E 100%);
  color: #CFEDE5;
  font-weight: 800;
}
.sidebar__link--bts:hover { background: linear-gradient(135deg, #005A4B 0%, #001A14 100%); }
.sidebar__link--bts.sidebar__link--active {
  background: linear-gradient(135deg, #00473C 0%, #00120E 100%);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--ats-teal, #00A896);
}
.sidebar__user {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #EAEFE6;
}
.sidebar__user-inner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
}
.sidebar__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 16px;
  flex-shrink: 0;
}
.sidebar__user-name { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.sidebar__user-school { font-size: 12px; color: var(--muted); font-weight: 600; }
.sidebar__signout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}
.sidebar__signout:hover { color: var(--ink); }
.top-nav__signout {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.top-nav__signout:hover { color: var(--ink); }

/* Top bar */
.topbar {
  height: 64px;
  border-bottom: 1px solid #EEF1EC;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 18px;
  background: var(--white);
}
.topbar__search {
  flex: 1;
  max-width: 340px;
  height: 38px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  color: var(--caption);
  font-size: 13px;
  font-weight: 600;
}
.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar__bell {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-chip);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.topbar__year-pill {
  background: var(--panel-blue);
  color: var(--blue-dark);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
}
/* Year 2 wears red, not blue (feedback 504) */
.topbar__year-pill--y2 {
  background: var(--red-light);
  color: var(--red-deep);
}

/* ══════════════════════════════════════════════
   TOP NAV (curriculum, plan views)
   ══════════════════════════════════════════════ */
.top-nav {
  height: 66px;
  background: var(--white);
  border-bottom: 1px solid #EEF1EC;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 28px;
}
.top-nav__logo { display: flex; align-items: center; }
.top-nav__logo img { height: auto; max-height: 32px; max-width: 168px; width: auto; object-fit: contain; display: block; }
.top-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-left: 6px;
}
@media (max-width: 900px) {
  .top-nav__links { gap: 8px 14px; }
}
.top-nav__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--body-alt);
}
.top-nav__link--active {
  font-weight: 800;
  color: var(--blue);
}
.top-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.top-nav .topbar__search { width: 230px; flex: none; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════ */
.dash-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.dash-content {
  padding: 28px 28px 36px;
  max-width: 771px;
}

/* Greeting */
.dash-greeting { margin-bottom: 22px; }
.dash-greeting__row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dash-greeting__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 34px;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.2px;
}
.dash-greeting__plan-btn {
  margin-left: auto;
  white-space: nowrap;
  font-size: 13.5px;
  padding: 10px 24px;
}
.dash-greeting__sub {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 3px;
}

/* Hero card */
.dash-hero {
  position: relative;
  background: linear-gradient(135deg, #2C90D1, #1E6BA3);
  border-radius: 18px;
  padding: 28px 30px;
  overflow: hidden;
  margin-bottom: 22px;
}
.dash-hero .blob {
  width: 300px;
  height: 300px;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  background: rgba(255,255,255,.08);
  top: -130px;
  right: -60px;
}
.dash-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.dash-hero__text { flex: 1; min-width: 300px; }
.dash-hero__media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.dash-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .8px;
  color: #BFE2F7;
  margin-bottom: 10px;
}
.dash-hero__meta {
  font-size: 12.5px;
  font-weight: 800;
  color: #BFE2F7;
  margin-bottom: 6px;
}
.dash-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 30px;
  color: var(--white);
  line-height: 1.05;
  margin: 0 0 6px;
}
.dash-hero__desc {
  font-size: 14px;
  color: #DCECF8;
  font-weight: 600;
  margin-bottom: 16px;
}
.dash-hero__desc strong { color: var(--white); font-weight: 800; }
.dash-hero__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin-bottom: 18px;
}
.dash-hero__pct {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--white);
}
.dash-hero__photo {
  width: 230px;
  height: 150px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  flex-shrink: 0;
}
.dash-hero__photo span {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #DCECF8;
  font-weight: 700;
  line-height: 1.5;
}
.dash-hero__photo--img { padding: 0; overflow: hidden; }
.dash-hero__photo--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Trusted Spaces hero: same layout, the dark A Trusted Space® room instead of
   Playgility blue. Light-on-dark pairs AA-checked against the near-black ground. */
/* Year 2 wears red, not blue (feedback 504) — hero included */
.dash-hero--y2 { background: linear-gradient(135deg, #D8402A, #A5301B); }
.dash-hero--y2 .dash-hero__eyebrow,
.dash-hero--y2 .dash-hero__meta { color: #FBD3C8; }
.dash-hero--y2 .dash-hero__desc { color: #FBE0D8; }
.dash-hero--bts { background: radial-gradient(120% 150% at 85% 0%, #003930 0%, #00120E 62%, #000202 100%); }
.dash-hero--bts .blob { background: rgba(111,222,204,.07); }
.dash-hero--bts .dash-hero__eyebrow,
.dash-hero--bts .dash-hero__meta { color: #6FDECC; }
.dash-hero--bts .dash-hero__desc { color: #C9E9E2; }
.dash-hero--bts .dash-hero__photo { background: rgba(111,222,204,.08); border-color: rgba(111,222,204,.28); }
.dash-hero__lesson-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 230px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* Card shared overrides for dashboard */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  color: var(--ink);
  margin: 0;
}
.card__action {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue);
}
.card__meta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* 2-col grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
}
.dash-grid__left,
.dash-grid__right {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Certification bars */
.dash-cert { display: flex; flex-direction: column; gap: 14px; }
.dash-cert__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
}
.dash-cert__label {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.dash-cert__count {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--body-alt);
}
.dash-cert__count--muted { color: var(--caption); font-size: 12px; }

/* Week snapshot */
.dash-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dash-week__day {
  border-radius: 11px;
  padding: 12px 10px;
  min-height: 104px;
}
.dash-week__day--blue { background: var(--panel-blue); }
.dash-week__day--gold { background: var(--panel-gold); }
.dash-week__day--teal { background: var(--panel-teal); }
.dash-week__day--off { background: var(--bg-page); }
.dash-week__day-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  margin-bottom: 8px;
  color: var(--caption);
}
.dash-week__day-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.dash-week__day-desc {
  font-size: 12px;
  color: var(--body-alt);
  font-weight: 600;
  margin-top: 4px;
}
.dash-week__day--off .dash-week__day-desc { color: var(--caption); }
.dash-week__footer {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.dash-week__footer a {
  color: var(--blue);
  font-weight: 800;
}

/* Quick links */
.dash-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-quick__tile {
  border-radius: 12px;
  padding: 14px;
  display: block;
  transition: opacity .15s;
}
.dash-quick__tile:hover { opacity: .85; }
.dash-quick__tile--blue { background: var(--panel-blue); }
.dash-quick__tile--gold { background: var(--panel-gold); }
.dash-quick__tile--teal { background: var(--panel-teal); }
.dash-quick__tile--warm { background: #FCF0E4; }
.dash-quick__icon {
  font-size: 18px;
  display: block;
  margin-bottom: 6px;
}
.dash-quick__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

/* Reflections */
.dash-reflections { display: flex; flex-direction: column; gap: 12px; }
.dash-reflections__item {
  border-left: 3px solid var(--blue);
  padding: 2px 0 2px 12px;
}
.dash-reflections__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 3px;
}
.dash-reflections__quote {
  font-size: 12.5px;
  color: var(--body);
  font-weight: 600;
  line-height: 1.45;
  font-style: italic;
}
.dash-reflections__date {
  font-size: 12px;
  color: var(--caption);
  font-weight: 700;
  margin-top: 4px;
}

/* SEL Muscles cloud */
.dash-muscles { margin-top: 22px; }
.dash-muscles__cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* Bottom row: cert ring + continue */
.dash-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
.dash-bottom__ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dash-ring__circle {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.dash-ring__inner {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-ring__pct {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--blue);
  line-height: 1;
}
.dash-ring__label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .3px;
}
.dash-bottom__ring-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.1;
}
.dash-bottom__ring-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 3px;
}
.dash-bottom__continue-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--caption);
  margin-bottom: 10px;
}
.dash-bottom__continue-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.dash-bottom__continue-step {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════
   CURRICULUM LIBRARY
   ══════════════════════════════════════════════ */
.cur-page { min-height: 100vh; background: var(--white); }
.cur-content {
  position: relative;
  padding: 28px 30px 36px;
  overflow: hidden;
}
.cur-blob {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 50% 45%, #EFEBF7, rgba(239,235,247,0));
  top: -180px;
  right: -150px;
  position: absolute;
  pointer-events: none;
}
.cur-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
}
.cur-header { margin-bottom: 18px; }

/* Year tabs */
.cur-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cur-tab {
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--body-alt);
  border-radius: 11px;
  padding: 11px 18px;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cur-tab--active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.cur-tab__year {
  font-family: var(--font-display);
  font-size: 12px;
}
.cur-tab--active .cur-tab__year { color: var(--white); }

/* Filter bar */
.cur-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 14px 18px;
  background: var(--panel-blue);
  border-radius: 12px;
}
.cur-filter__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.cur-filter__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue-dark);
}
.cur-filter__pill {
  background: var(--white);
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.cur-filter__pill--active {
  background: var(--blue);
  color: var(--white);
}
.cur-filter__note {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-dark);
}

/* Muscle group header */
.cur-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cur-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cur-group-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 23px;
  color: var(--ink);
}
.cur-group-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Lesson card grid */
.cur-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 30px;
}

/* Lesson card */
.cur-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  position: relative; /* fella anchors to the top corner */
  display: flex;
  flex-direction: column; /* lets the plan link pin to the bottom */
}
.cur-card--progress {
  border: 1.5px solid var(--gold);
  background: #FFFCF5;
}
.cur-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 92px; /* clear of the corner fella */
}
.cur-card__top .cur-card__pill {
  margin: 0 auto; /* centered between the number and the fella */
  font-size: 11px;
  padding: 3px 8px;
}
.cur-card__num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--white);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cur-card__pill {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}
.cur-card__pill--complete {
  color: var(--success-text);
  background: var(--success-bg);
}
.cur-card__pill--progress {
  color: var(--gold-dark);
  background: var(--panel-gold);
}
.cur-card__pill--none {
  color: var(--caption);
  background: #F1F4EF;
}
.cur-card__fella {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 62px;
  max-width: 88px; /* pairs/trios stay grouped, just crop wider */
  object-fit: contain;
}
.cur-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
  padding-right: 92px; /* clear of the corner fella */
}
.cur-card__activity {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  padding-right: 92px;
}
.cur-card__plan {
  display: flex;
  justify-content: flex-end;
  margin-top: auto; /* pin to the card's bottom corner */
  padding-top: 11px;
}
.cur-card__plan a {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
}

/* ══════════════════════════════════════════════
   TRAINING MODULE
   ══════════════════════════════════════════════ */
.trn-page { min-height: 100vh; background: var(--white); }

/* Top bar */
.trn-topbar {
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid #EEF1EC;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.trn-topbar__exit {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* When Back is available, Exit steps back a shade so the pair reads in order (row 369).
   A lighter weight rather than opacity, so easy-read mode keeps its contrast. */
.trn-topbar__exit--quiet { font-weight: 700; color: var(--body-alt); }
/* Exit lives in the top-right corner (row 417), boxed so it reads as a control */
.trn-topbar__exit--corner {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  line-height: 1;
}
.trn-topbar__exit--corner:hover { border-color: var(--muted); color: var(--ink); }
.trn-page--bts .trn-topbar__exit--corner { border-color: rgba(255,255,255,.25); }
html.ldtpe-easy .trn-page--bts .trn-topbar__exit--corner { border-color: rgba(0,0,0,.4); }
.trn-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
}
.trn-topbar__lesson { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; }
.trn-topbar__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--blue-dark);
  white-space: nowrap;
}
.trn-topbar__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.trn-topbar__progress {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.trn-topbar__pct {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--body-alt);
}
@media (max-width: 680px) {
  .trn-topbar { padding: 0 14px; gap: 10px; }
  .trn-topbar__label,
  .trn-topbar__title { overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
  .trn-topbar__progress .progress-bar { display: none; }
}
@media (max-width: 430px) {
  .trn-topbar__pct { display: none; }
}

/* Layout */
.trn-layout {
  display: grid;
  grid-template-columns: 248px 1fr;
}

/* Left rail */
.trn-rail {
  background: var(--bg-sidebar);
  border-right: 1px solid #EAEFE6;
  padding: 22px 14px;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.trn-rail__header {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--caption);
  margin: 4px 8px 14px;
}
.trn-rail__modules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trn-rail__module {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s;
}
.trn-rail__module:hover { background: rgba(0,0,0,.03); }
.trn-rail__module--active { background: var(--panel-blue); }
.trn-rail__module--active:hover { background: var(--panel-blue); }
.trn-rail__module--done .trn-rail__dot { background: var(--success); color: #fff; }
.trn-rail__module--done .trn-rail__dot::after { content: '✓'; font-size: 12px; }
.trn-rail__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.trn-rail__dot--active {
  background: var(--blue);
  color: var(--white);
}
.trn-rail__module--active .trn-rail__dot { background: var(--blue); color: var(--white); }
.trn-rail__name {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--ink);
}
.trn-rail__sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--caption);
}
.trn-rail__obj {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 9px;
}
.trn-rail__obj-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.trn-rail__obj-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body-alt);
  line-height: 1.35;
}
.trn-rail__obj--practiced .trn-rail__obj-dot { background: var(--panel-blue); color: var(--blue-dark); }
.trn-rail__obj--met .trn-rail__obj-dot { background: var(--success); color: var(--white); font-size: 12px; }
.trn-rail__obj--met .trn-rail__obj-text { color: var(--ink); }

/* Standards chart on the Y1 lesson overview screen — labeled rows matching
   the printed curriculum's STANDARDS block */
.trn-screen__standards {
  max-width: 620px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
  background: var(--panel-blue, #EAF3FB);
  border-radius: 12px;
  padding: 13px 16px 14px;
  margin-bottom: 18px;
}
.trn-std__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.trn-screen__standards-tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--blue-dark);
}
.trn-std__link { font-size: 12.5px; color: var(--blue-dark); font-weight: 800; text-decoration: none; white-space: nowrap; }
.trn-std__link:hover { text-decoration: underline; }
.trn-std__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}
.trn-std__lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-dark);
  padding-top: 1px;
  white-space: nowrap;
}
.trn-std__val { font-size: 13px; }
.trn-std__mine { color: var(--muted, #5F6B62); font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) {
  .trn-std__grid { grid-template-columns: 1fr; gap: 2px; }
  .trn-std__val { margin-bottom: 7px; }
}

/* Learning objectives on the lesson overview screen */
.trn-screen__objectives {
  max-width: 620px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E6E9EE);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 24px;
}
.trn-screen__obj-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.trn-screen__obj-lead {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.trn-screen__obj-list {
  margin: 0;
  padding-left: 22px;
}
.trn-screen__obj-list li {
  font-size: 15px;
  color: var(--body);
  line-height: 1.5;
  padding: 3px 0;
}
.trn-screen__obj-list li::marker {
  font-weight: 800;
  color: var(--blue);
}
.trn-screen__obj-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 10px;
}

/* Compact objective tracker on between-module and results screens */
.trn-obj-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
}
.trn-obj-strip__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.trn-obj-strip__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trn-obj-strip__dot--practiced { background: var(--panel-blue); color: var(--blue-dark); }
.trn-obj-strip__dot--met { background: var(--success); color: var(--white); }
.trn-obj-strip__hint {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Per-objective outcomes on the review results screen */
.trn-obj-results {
  max-width: 500px;
  margin: 0 auto 20px;
  text-align: left;
  background: var(--bg-sidebar, #F7F9F6);
  border: 1px solid var(--border, #E6E9EE);
  border-radius: 12px;
  padding: 14px 16px;
}
.trn-obj-results__head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--muted-alt);
  margin-bottom: 8px;
}
.trn-obj-results__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border, #E6E9EE);
}
.trn-obj-results__mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--panel-blue);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.trn-obj-results__row--met .trn-obj-results__mark { background: var(--success); color: var(--white); }
.trn-obj-results__text {
  flex: 1;
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.45;
}
.trn-obj-results__row--met .trn-obj-results__text { color: var(--ink); }
.trn-obj-results__score {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.trn-obj-results__foot {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--border, #E6E9EE);
}

.trn-rail__muscle {
  margin-top: 20px;
  background: var(--teal-light);
  border-radius: 12px;
  padding: 14px;
}
.trn-rail__muscle-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--success);
  margin-bottom: 4px;
}
.trn-rail__muscle-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}
.trn-rail__muscle-meta {
  font-size: 12px;
  color: var(--body-alt);
  font-weight: 600;
  margin-top: 3px;
}
.trn-rail__photo {
  margin: 16px 0 0;
}
.trn-rail__photo img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.trn-rail__photo figcaption {
  font-size: 12px;
  font-weight: 700;
  color: var(--caption);
  margin-top: 6px;
  line-height: 1.4;
}

/* Lesson overview photo */
.trn-screen__photo {
  margin: 4px 0 18px;
}
.trn-screen__photo img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.trn-screen__photo figcaption {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-alt);
  margin-top: 7px;
  line-height: 1.4;
}

/* Content area */
.trn-content {
  position: relative;
  background: var(--lesson-wash, var(--panel-lavender));
  padding: 30px 38px 28px;
  overflow: hidden;
  /* clip (not hidden) so browser focus/caret reveals can never scroll this box:
     with hidden, typing in a write-in or clicking Next mid-transition nudges
     scrollTop/scrollLeft into the blobs' bleed (trn-blob-1 is 150px wide of
     off-canvas art) and the whole player renders shifted with no way back. */
  overflow: clip;
  min-height: calc(100vh - 60px);
}
.trn-blob-1 {
  width: 480px;
  height: 540px;
  border-radius: 46% 54% 58% 42%/40% 42% 58% 60%;
  background: radial-gradient(circle at 50% 42%, #F6F2FC, rgba(246,242,252,0));
  top: -170px;
  right: -150px;
}
.trn-blob-2 {
  width: 320px;
  height: 320px;
  border-radius: 60% 40% 50% 50%/50% 55% 45% 50%;
  background: radial-gradient(circle, #FBF3DE, rgba(251,243,222,0));
  bottom: -160px;
  left: -120px;
  opacity: .85;
}
.trn-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.trn-module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.trn-module-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .7px;
  color: #5A5470;
  margin-bottom: 6px;
}
.trn-module-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 34px;
  color: var(--ink);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

/* Beat card */
.trn-card {
  background: var(--white);
  border: 1px solid var(--border-lavender);
  border-radius: 16px;
  padding: 26px 28px;
  min-height: 258px;
}
.trn-beat__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .7px;
  color: var(--muted-alt);
  margin-bottom: 12px;
}
.trn-beat__heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 29px;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 12px;
}
.trn-beat__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}
.trn-beat__body strong { font-weight: 800; color: var(--ink); }
/* real paragraph gaps wherever a beat stacks prose after ANY block — prose,
   lists, quotes, compares, stacks, callouts, diagrams, cards (feedback 422:
   "Their stress affects ours" sat flush against the stack above it) */
.trn-beat__body + .trn-beat__body,
.trn-beat__list + .trn-beat__body,
.trn-quote + .trn-beat__body,
.trn-stack + .trn-beat__body,
.trn-logolist + .trn-beat__body,
.trn-callout + .trn-beat__body,
.trn-diagram + .trn-beat__body,
.trn-quoterow + .trn-beat__body,
.trn-ncarow + .trn-beat__body,
.trn-artimg + .trn-beat__body,
.trn-imgslot + .trn-beat__body,
.trn-compare + .trn-beat__body { margin-top: 24px; }
/* One-line anchor statement: centered + bold with real air (feedback 457) */
.trn-statement {
  margin: 26px 0 22px;
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}
/* The marquee treatment (row 536): one line carries the slide. */
.trn-statement--xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1.22;
  letter-spacing: .012em;
  max-width: 580px;
  margin: 34px auto 26px;
}
.trn-statement--xl strong { color: #0E6E5C; font-weight: inherit; }
/* Dark BTS skin: the accent has to jump off the deep green, not sink into it. */
.trn-page--bts .trn-statement--xl strong { color: #6FDECC; }
.trn-beat__musclehead { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.trn-beat__musclehead .trn-beat__heading { margin: 0; }
.trn-beat__muscleicon { width: 54px; height: 54px; border-radius: 14px; flex: none; }
/* Air above the box so the floating label never crowds the paragraph, and
   text at body size (feedback 407: oxygen-mask box too tight and too small) */
.trn-quote {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-lavender);
  border-radius: 13px;
  padding: 18px 18px 15px;
  margin: 26px 0 2px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}
.trn-quote--bare { text-align: center; padding: 15px 18px; }
.trn-beat__body--after { margin-top: 14px; }
.trn-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 4px; }
.trn-compare__box {
  background: var(--white);
  border: 1px solid var(--border-lavender);
  border-radius: 13px;
  padding: 14px 16px;
}
.trn-compare__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  color: var(--blue-dark);
  margin: 0 0 8px;
}
.trn-compare__text { font-size: 14.5px; line-height: 1.6; color: var(--ink); text-align: center; }
.trn-compare--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .trn-compare, .trn-compare--three { grid-template-columns: 1fr; } }

/* ── Blocks pass (feedback rows 218-220): quote chips, NCA logo cards, callouts ── */
.trn-quoterow { display: flex; flex-wrap: wrap; gap: 14px 12px; justify-content: center; margin: 20px 0 14px; }
.trn-quotechip {
  position: relative;
  border: 1.5px solid;
  border-radius: 14px;
  padding: 12px 18px 13px;
  box-shadow: 0 4px 14px rgba(30, 46, 42, .08);
  animation: trnBob 3s ease-in-out infinite;
}
/* Three voices: each chip position gets its own font, color, tilt, and bob
   rhythm, so a row of quotes reads as different people talking */
.trn-quotechip:nth-child(3n+1) {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  background: #E4F0FC;
  border-color: #2887C8;
  color: #1E4E78;
  --tilt: -1.4deg;
  animation-duration: 2.7s;
}
.trn-quotechip:nth-child(3n+2) {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17.5px;
  background: #FCE4DF;
  border-color: #EB4225;
  color: #B7331F;
  --tilt: 1.2deg;
  animation-duration: 3.4s;
  animation-delay: .45s;
}
.trn-quotechip:nth-child(3n+3) {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: .025em;
  font-size: 15.5px;
  background: #FCF0D8;
  border-color: #F8AE1C;
  color: #8F6508;
  --tilt: -.8deg;
  animation-duration: 3.9s;
  animation-delay: .9s;
}
.trn-quotechip::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -7.5px;
  width: 13px;
  height: 13px;
  background: inherit;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  border-color: inherit;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
@keyframes trnBob {
  0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(2px); }
  50% { transform: rotate(var(--tilt, 0deg)) translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .trn-quotechip { animation: none; transform: rotate(var(--tilt, 0deg)); }
}
.trn-ncarow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 14px; }
.trn-ncacard {
  background: var(--white);
  border: 1px solid var(--border-lavender);
  border-top: 4px solid transparent;
  border-radius: 12px;
  padding: 18px 14px 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(30, 46, 42, .06);
}
.trn-ncacard--notice { border-top-color: #2887C8; }
.trn-ncacard--choose { border-top-color: #EB4225; }
.trn-ncacard--act    { border-top-color: #F8AE1C; }
.trn-ncacard__word { height: 26px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
.trn-ncacard__tag {
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.trn-ncacard__tag strong { color: var(--ink); }
.trn-ncacard__text { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.trn-callout {
  margin: 26px 0 14px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--panel-blue);
  border: 1px solid var(--blue-light);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.trn-callout strong { font-weight: 800; }
.trn-callout__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.trn-beat__list--check .trn-beat__bullet { color: var(--success-text); font-weight: 800; }
.trn-beat__list--cross .trn-beat__bullet { color: var(--red-deep); font-weight: 800; }
.trn-pills { margin: 24px 0 12px; text-align: center; }
.trn-pills__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.trn-pills__row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.trn-pill {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1.5px solid;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.trn-pill:nth-child(4n+1) { background: #E9F6F3; border-color: #7FC8BB; }
.trn-pill:nth-child(4n+2) { background: #ECEEF9; border-color: #9AA6DD; }
.trn-pill:nth-child(4n+3) { background: #F5EBF7; border-color: #C99AD4; }
.trn-pill:nth-child(4n+4) { background: #EEF4E8; border-color: #A4C98A; }
.trn-page--bts .trn-pill { background: rgba(255,255,255,.07); color: #fff; }
.trn-stack { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 10px; }
.trn-stack__box {
  border: 1px solid;
  border-left: 6px solid;
  border-radius: 12px;
  padding: 15px 18px 14px;
}
.trn-stack__box:nth-child(4n+1) { background: #E9F6F3; border-color: #BCE0D8; border-left-color: #00A896; }
.trn-stack__box:nth-child(4n+2) { background: #ECEEF9; border-color: #C9CFEC; border-left-color: #5261B4; }
.trn-stack__box:nth-child(4n+3) { background: #F5EBF7; border-color: #DFC6E6; border-left-color: #782484; }
.trn-stack__box:nth-child(4n+4) { background: #EEF4E8; border-color: #CFE2BF; border-left-color: #5E8C3F; }
/* doubled class so a pinned color outranks the :nth-child rotation above */
.trn-stack__box.trn-stack__box--notice { background: #EAF3FB; border-color: #BBD8EE; border-left-color: #2887C8; }
.trn-stack__box.trn-stack__box--choose { background: #FDEDEA; border-color: #F5C4BA; border-left-color: #EB4225; }
.trn-stack__box.trn-stack__box--act { background: #FDF3DC; border-color: #F2D9A4; border-left-color: #F8AE1C; }
.trn-stack__title { font-weight: 800; font-size: 15.5px; color: var(--ink); margin: 0 0 6px; }
.trn-stack__text { font-size: 15px; line-height: 1.65; color: var(--ink); }

/* Brand-led list (intro modules, feedback 389): "With <logo>…", stack cards */
.trn-logolist { margin-top: 22px; text-align: center; }
.trn-logolist__logo { display: inline-block; height: 34px; vertical-align: -10px; margin: 0 1px 0 4px; }
.trn-logolist__lead {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 4px;
}
.trn-logolist .trn-stack { text-align: left; }
.trn-materials-box {
  margin: 2px 0 16px;
  padding: 12px 16px;
  background: var(--teal-light);
  border: 1px solid #B9E4D2;
  border-radius: 12px;
}
.trn-materials-box__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ats-teal-text);
  margin-bottom: 4px;
}
.trn-materials-box__text { font-size: 14px; line-height: 1.6; color: var(--ink); font-weight: 500; }
.trn-artsvg { display: block; width: 100%; height: auto; }
/* deco diagrams sit small beside the prose, not as a centerpiece */
.trn-diagram--deco { float: right; width: 188px; max-width: 42%; margin: 4px 0 12px 18px; }
.trn-footnote { clear: both; }
.trn-imgslot {
  margin: 18px auto 8px;
  max-width: 440px;
  padding: 26px 20px;
  border: 2px dashed #B9C3CE;
  border-radius: 14px;
  text-align: center;
  background: rgba(255,255,255,.55);
}
.trn-imgslot__icon { font-size: 26px; display: block; margin-bottom: 6px; }
.trn-imgslot__label { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.trn-writein__parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trn-writein__parts--rows { grid-template-columns: 1fr; }
.trn-writein__parts--rows .trn-textarea--part { min-height: 72px; }
.trn-writein__part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trn-writein__part--lead { grid-column: 1 / -1; }
.trn-writein__part--lead .trn-textarea--part { min-height: 90px; }
.trn-writein__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.trn-writein__word { height: 20px; width: auto; align-self: flex-start; }
.trn-textarea--part { min-height: 120px; }
@media (max-width: 620px) { .trn-writein__parts { grid-template-columns: 1fr; } }
.trn-quoterow + .trn-beat__body,
.trn-ncarow + .trn-beat__body,
.trn-callout + .trn-beat__body { margin-top: 18px; }
.trn-ncarow--compact { gap: 10px; margin: 22px 0 12px; }
.trn-ncarow--compact .trn-ncacard { padding: 12px 12px 11px; border-top-width: 3px; }
.trn-ncarow--compact .trn-ncacard__word { height: 16px; }
.trn-ncarow--compact .trn-ncacard__tag { margin-top: 6px; font-size: 11.5px; }
.trn-ncarow--compact .trn-ncacard__text { margin-top: 6px; font-size: 13.5px; line-height: 1.55; }
@media (max-width: 620px) { .trn-ncarow { grid-template-columns: 1fr; } }
.trn-quote__label {
  position: absolute;
  top: -12px;
  left: 14px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 12px;
}
/* Air above a list that follows prose, and an indent so bullets read as a
   list, not more paragraph (Tanner 8/5: "too close on every slide",
   "check list/bullets should be indented") */
.trn-beat__list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-left: 18px; }
.trn-beat__list.trn-steps { padding-left: 0; }
.trn-beat__heading + .trn-beat__list { margin-top: 4px; }
/* Bullets read at the same size as body prose (feedback 389/390/392: smaller
   font reads as less important, and the lists carry the important info) */
.trn-beat__list > div { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink); font-weight: 500; line-height: 1.55; }
.trn-beat__list strong { font-weight: 800; color: var(--ink); }
/* Bullet markers read big and solid (feedback 426: the old middot was barely visible) */
.trn-beat__bullet { color: var(--blue); font-weight: 800; font-size: 1.2em; line-height: 1.3; }

/* Player controls */
.trn-player {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.trn-player__btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E4DEF2;
  color: #6A6488;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.trn-player__bar {
  flex: 1;
  height: 5px;
  border-radius: var(--radius-pill);
  background: #DAD2EE;
  overflow: hidden;
}
.trn-player__bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: #8B7BB8;
  transition: width .3s;
}
.trn-player__counter {
  font-size: 12px;
  font-weight: 800;
  color: #6A6488;
  min-width: 30px;
  text-align: right;
}

/* Beat dots */
.trn-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.trn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #DAD2EE;
  cursor: pointer;
  transition: background .15s;
}
.trn-dot--active { background: #6A6488; }
.trn-dot--done { background: #A99DD0; }

/* Quick check / review options */
.trn-qc-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .7px;
  color: var(--success-text);
  margin-bottom: 6px;
}
.trn-qc-question {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 14px;
}
.trn-qc-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 16px;
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-size: 14px;
  color: var(--body);
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 9px;
  transition: border-color .15s;
}
.trn-qc-option:hover { border-color: #B8AED6; }
.trn-qc--answered .trn-qc-option { pointer-events: none; opacity: .7; }
.trn-qc--answered .trn-qc-option--correct { opacity: 1; border-color: var(--success); background: var(--success-bg); }
.trn-qc--answered .trn-qc-option--wrong { opacity: 1; border-color: var(--red); background: var(--error-bg); }
.trn-qc--answered .trn-qc-option--soft { opacity: 1; border-color: var(--gold); background: var(--gold-light); }
.trn-qc-letter {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--muted-alt);
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--panel-lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trn-feedback {
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 12px;
}
.trn-feedback--ok { background: var(--success-bg); color: #1E7A4A; }
.trn-feedback--no { background: var(--error-bg); color: var(--error); }
.trn-feedback--soft { background: var(--gold-light); color: var(--gold-dark); }
/* Half-point tag on yellow review answers; currentColor keeps it legible in
   every skin (BTS dark, easy read) without per-theme overrides. */
.trn-feedback__half {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Review sort scenario (my bad vs real apology, bts-7) */
.trn-sort-note {
  font-size: 13px;
  color: var(--muted-alt);
  font-weight: 600;
  line-height: 1.5;
  margin: -8px 0 16px;
}
.trn-sort-card {
  border: 1.5px solid var(--border-lavender);
  border-radius: 14px;
  background: var(--white);
  padding: 22px 20px 18px;
  animation: ldtpeFade .3s ease both;
}
.trn-sort-count {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--muted-alt);
  margin-bottom: 10px;
}
.trn-sort-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}
.trn-sort-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.trn-sort-btn {
  flex: 1;
  min-width: 150px;
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  background: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--body);
  padding: 13px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.trn-sort-btn:hover { border-color: #B8AED6; }
.trn-sort-btn--picked-right { border-color: var(--success); background: var(--success-bg); color: #1E7A4A; }
.trn-sort-btn--picked-wrong { border-color: var(--red); background: var(--error-bg); color: var(--error); }
.trn-sort-btn--reveal { border-color: var(--success); }
.trn-sort--answered .trn-sort-btn { pointer-events: none; }
.trn-sort--answered .trn-sort-btn:not(.trn-sort-btn--picked-right):not(.trn-sort-btn--picked-wrong):not(.trn-sort-btn--reveal) { opacity: .55; }
.trn-sort-next { margin-top: 14px; text-align: right; }
.trn-sort-recap { margin-top: 4px; }
.trn-sort-recap__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-lavender);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--body);
}
.trn-sort-recap__row:last-child { border-bottom: none; }
.trn-sort-recap__mark { font-weight: 900; flex-shrink: 0; width: 18px; }
.trn-sort-recap__row--got .trn-sort-recap__mark { color: var(--success); }
.trn-sort-recap__row--miss .trn-sort-recap__mark { color: var(--red); }
.trn-sort-recap__call {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted-alt);
  padding-top: 2px;
  width: 92px;
}

/* Write-in */
.trn-feeds-pill {
  background: var(--panel-blue);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.trn-textarea {
  width: 100%;
  min-height: 84px;
  border: 1.5px solid #D8D0EC;
  border-radius: 12px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--body);
  background: #FBFAFE;
  resize: vertical;
  outline: none;
}
.trn-textarea:focus { border-color: #B8AED6; }
.trn-textarea-note {
  font-size: 12px;
  color: var(--muted-alt);
  font-weight: 700;
  margin-top: 8px;
}

/* Closing questions */
.trn-closing-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  color: #5A5470;
  margin: 16px 0 9px;
}
.trn-closing-questions { display: flex; flex-direction: column; gap: 9px; }
.trn-closing-q {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 14px;
  border: 1.5px solid var(--border-lavender);
  border-radius: 11px;
  background: var(--white);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--body);
  font-weight: 500;
  line-height: 1.45;
}
.trn-closing-q:hover { border-color: #B8AED6; }
.trn-closing-check {
  color: var(--caption);
  font-size: 14px;
  flex-shrink: 0;
}
.trn-closing-q--picked {
  border-color: var(--blue);
  background: var(--panel-blue);
}
.trn-closing-q--picked .trn-closing-check { color: var(--blue); }
.trn-closing-q--picked .trn-closing-check::before { content: '✓'; }
.trn-closing-q--picked .trn-closing-check { font-size: 0; }
.trn-closing-q--picked .trn-closing-check::before { font-size: 14px; }
.trn-closing-count {
  font-size: 12.5px;
  font-weight: 800;
  color: #5A5470;
}

/* Tips */
.trn-tip {
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.trn-tip strong { font-weight: 800; }
.trn-tip--do { background: var(--teal-light); color: #235C3E; }
.trn-tip--avoid { background: var(--error-bg); color: #7A2A1E; }

/* Review intro */
.trn-review__intro-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 6px;
}
.trn-review__intro-text {
  font-size: 12.5px;
  color: #5A5470;
  font-weight: 700;
  margin: 0 0 18px;
  line-height: 1.55;
}

/* Bottom nav */
.trn-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #DDD5EE;
  padding-top: 20px;
  margin-top: 28px;
}
.trn-nav__back {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  padding: 10px 16px;
}
.trn-nav__continue { padding: 13px 22px; }
.trn-nav__continue--locked,
.trn-nav__continue:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.trn-feedback__retry { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* Footnote under a beat: an ornate aside whose color scheme rotates from
   slide to slide (--v0..--v4, keyed off the text in footnoteHtml) so the box
   never becomes a familiar blue blur users auto-skip */
.trn-footnote {
  position: relative;
  margin-top: 24px;
  padding: 13px 16px 12px 20px;
  border: 1.5px solid var(--blue);
  border-left-width: 6px;
  background: var(--panel-blue);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  /* text stays near-black in every color scheme — the tinted text of the gold
     variant read as yellow-on-yellow (feedback 458) */
  color: var(--ink);
  line-height: 1.55;
}
.trn-beat__list + .trn-footnote,
.trn-stack + .trn-footnote,
.trn-quoterow + .trn-footnote,
.trn-ncarow + .trn-footnote,
.trn-callout + .trn-footnote,
.trn-compare + .trn-footnote { margin-top: 30px; }
.trn-footnote::before {
  content: '✦';
  animation: trnStarSpin 9s linear infinite;
  position: absolute;
  top: -10px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
@keyframes trnStarSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trn-footnote::before { animation: none; } }
.trn-footnote--v1 { border-color: var(--gold); background: var(--gold-light); }
.trn-footnote--v1::before { background: var(--gold-dark); }
/* v2 was red (border --red, bg --red-light) and read as an error message
   (feedback 396) — asides never get red; this slot is green now */
.trn-footnote--v2 { border-color: var(--success); background: var(--success-bg); }
.trn-footnote--v2::before { background: var(--success); }
.trn-footnote--v3 { border-color: var(--ats-teal); background: var(--ats-teal-light); }
.trn-footnote--v3::before { background: var(--ats-teal); }
.trn-footnote--v4 { border-color: var(--ats-purple); background: var(--ats-purple-light); }
.trn-footnote--v4::before { background: var(--ats-purple); }
.trn-footnote strong { font-weight: 800; }

/* Private jot box (localStorage only, never posted) */
.trn-jot { margin-top: 16px; }
.trn-jot__input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line, #D8DED2);
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--panel, #fff);
  resize: vertical;
}
.trn-jot__input:focus { outline: none; border-color: var(--blue); }
.trn-jot__note { margin-top: 7px; font-size: 12.5px; font-weight: 600; color: var(--dim, #6C7A70); }
.trn-jot__label { margin: 12px 0 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--body-alt, #55605A); }
.trn-jot__label:first-child { margin-top: 0; }
.trn-page--bts .trn-jot__label { color: var(--bts-glow, #7FE0D2); }
.trn-page--bts .trn-jot__input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.trn-page--bts .trn-jot__input:focus { border-color: var(--bts-accent); }
.trn-page--bts .trn-jot__note { color: var(--bts-dim); }

/* MTSS pyramid in the training player: the homepage graphic, restyled for
   the room it renders in. Bands and texts reuse the landing .mtss-* rules. */
.trn-mtss { max-width: 440px; margin: 18px auto 4px; }
.trn-mtss .mtss-svg { width: 100%; height: auto; display: block; overflow: visible; }
.trn-mtss .mtss-band { cursor: default; }
.trn-mtss .mtss-caption {
  margin-top: 10px;
  text-align: center;
  /* the pyramid sits at x=81 of the 132-unit viewBox (side labels use the left
     gutter), so nudge the caption right to center it under the triangle itself */
  transform: translateX(11.4%);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dim, #6C7A70);
}
.trn-page--bts .trn-mtss .mtss-band { stroke: rgba(0,0,0,.35); }
.trn-page--bts .trn-mtss .mtss-side--1 { fill: #9CC8EE; }
.trn-page--bts .trn-mtss .mtss-side--2 { fill: #F6CE84; }
.trn-page--bts .trn-mtss .mtss-side--3 { fill: #F2A08F; }
.trn-page--bts .trn-mtss .mtss-caption { color: var(--bts-dim); }

/* Fade list: a roll call that keeps going (fully readable; the trailing ellipsis
   carries the endlessness — beta reviewers read the old dissolve mask as cut-off text) */
.trn-fade-list {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
  color: var(--body);
}
.trn-page--bts .trn-fade-list { color: var(--bts-dim); }

/* Numbered steps */
.trn-steps > div { align-items: center; }
.trn-step__num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Un-numbered offering rows inside a steps list (game variations) */
.trn-step__var {
  flex-shrink: 0;
  height: 22px;
  border-radius: 7px;
  padding: 0 8px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trn-materials {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.trn-materials strong { color: var(--body-alt); }

/* Diagram */
.trn-diagram {
  margin: 4px 0 16px;
  display: flex;
  justify-content: center;
}
.trn-diagram__svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}

/* Coaching moments (see / do) */
.trn-coach { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.trn-coach__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--white);
}
.trn-coach__row { display: flex; gap: 11px; align-items: flex-start; }
.trn-coach__row + .trn-coach__row { margin-top: 9px; }
.trn-coach__tag {
  flex-shrink: 0;
  width: 58px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4px;
  padding: 4px 0;
  text-align: center;
  border-radius: 6px;
}
.trn-coach__tag--see { background: var(--panel-lavender); color: #5A5470; }
.trn-coach__tag--do { background: var(--success-bg); color: #1E7A4A; }
.trn-coach__text { font-size: 13px; color: var(--body); font-weight: 500; line-height: 1.5; }

/* Sort interaction */
.trn-sort { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.trn-sort__item {
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--white);
}
.trn-sort__item--correct { border-color: var(--success); background: var(--success-bg); }
.trn-sort__item--wrong { border-color: var(--red); }
.trn-sort__text { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; margin-bottom: 10px; }
.trn-sort__btns { display: flex; gap: 8px; }
.trn-sort__btn {
  border: 1.5px solid var(--border-lavender);
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.trn-sort__btn:hover { border-color: #B8AED6; }
.trn-sort__btn--chosen { border-color: var(--success); background: var(--success-bg); color: #1E7A4A; }
.trn-sort__item--correct .trn-sort__btns { pointer-events: none; }
.trn-sort__feedback:empty { display: none; }
.trn-sort__progress {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted-alt);
}

/* Order interaction */
.trn-order { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.trn-order__item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  padding: 12px 15px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.trn-order__item:hover { border-color: #B8AED6; }
.trn-order__item--locked { border-color: var(--success); background: var(--success-bg); cursor: default; }
.trn-order__item--wrong { border-color: var(--red); animation: trnShake .35s ease; }
@keyframes trnShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.trn-order__badge {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-lavender);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--muted-alt);
  background: var(--white);
}
.trn-order__item--locked .trn-order__badge { border-color: var(--success); background: var(--success); color: #fff; }
.trn-order__text { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.trn-order__feedback:empty { display: none; }

/* Builder interaction */
.trn-build { display: flex; flex-direction: column; gap: 14px; }
.trn-build__preview {
  display: flex; flex-direction: column; gap: 4px;
  border: 1.5px dashed var(--border-lavender);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 14px;
  background: var(--panel-lavender);
}
.trn-build__preview-label { font-size: 12px; font-weight: 800; letter-spacing: .4px; color: var(--muted-alt); }
#trn-build-line { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.trn-build__slot {
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--white);
}
.trn-build__slot--locked { border-color: var(--success); background: var(--success-bg); }
.trn-build__slot-label { font-size: 12px; font-weight: 800; letter-spacing: .3px; color: var(--muted-alt); margin-bottom: 9px; }
.trn-build__opts { display: flex; flex-direction: column; gap: 7px; }
.trn-build__opt {
  border: 1.5px solid var(--border-lavender);
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 9px 13px;
  border-radius: 9px;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color .15s, background .15s;
}
.trn-build__opt:hover { border-color: #B8AED6; }
.trn-build__opt--chosen { border-color: var(--success); background: var(--success-bg); color: #1E7A4A; }
.trn-build__opt--wrong { border-color: var(--red); opacity: .55; }
.trn-build__opt--soft { border-color: var(--gold); background: var(--gold-light); }
.trn-build__slot--locked .trn-build__opts { pointer-events: none; }
.trn-build__feedback:empty { display: none; }

/* Branch interaction */
.trn-branch { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.trn-branch__step {
  border-left: 3px solid var(--border-lavender);
  padding-left: 16px;
  animation: ldtpeFade .4s ease both;
}
.trn-branch__step--done { border-left-color: var(--success); }
.trn-branch__marker { font-size: 12px; font-weight: 800; letter-spacing: .4px; color: var(--muted-alt); margin-bottom: 6px; }
.trn-branch__nextlevel { margin: 18px 0 6px; text-align: center; }
.trn-branch__situation { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.55; margin-bottom: 12px; }
.trn-branch__then {
  margin-top: 10px;
  border-radius: 10px;
  padding: 11px 14px;
  background: var(--panel-lavender);
  font-size: 13.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--body);
  line-height: 1.55;
}
.trn-branch__feedback:empty, .trn-branch__outcome:empty { display: none; }

/* Scan interaction */
.trn-scan { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.trn-scan__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 1.5px solid var(--border-lavender);
  border-radius: 12px;
  padding: 12px 15px;
  background: var(--white);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.trn-scan__item:hover { border-color: #B8AED6; }
.trn-scan__item--found { border-color: var(--success); background: var(--success-bg); cursor: default; }
.trn-scan__item--clear { border-color: var(--gold); background: var(--gold-light); cursor: default; }
.trn-scan__mark { flex: 0 0 auto; font-weight: 800; color: var(--muted-alt); }
.trn-scan__item--found .trn-scan__mark { color: var(--success); }
.trn-scan__feedback:empty { display: none; }

/* Write-in head */
.trn-writein__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.trn-writein__prompt { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.4; }

/* Close picker — grade bands */
.trn-closing-group { margin-top: 16px; }
.trn-closing-band { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.trn-closing-band__tag {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--blue);
  background: var(--panel-blue);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.trn-closing-guidance { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.45; flex: 1; min-width: 200px; }
.trn-closing-q--custom { border-style: dashed; }
.trn-closing-add { display: flex; gap: 8px; margin-top: 14px; }
.trn-closing-add__input {
  flex: 1;
  border: 1.5px solid #D8D0EC;
  border-radius: 10px;
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--body);
  background: #FBFAFE;
  outline: none;
}
.trn-closing-add__input:focus { border-color: #B8AED6; }
.trn-closing-add__btn {
  border: none;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
}
.trn-closing-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
}

/* Curriculum card — dual links */
.cur-card__plan--dual { justify-content: space-between; align-items: center; }
.cur-card__plan-alt { color: var(--muted) !important; }

/* ══════════════════════════════════════════════
   LESSON PLAN VIEWER
   ══════════════════════════════════════════════ */
.plan-page { min-height: 100vh; background: var(--page-bg); }

/* Action bar */
.plan-action-bar {
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid #EEF1EC;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
}
.plan-action-bar__back {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  text-decoration: none;
}
.plan-action-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-action-bar__btn {
  background: var(--page-bg);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.plan-action-bar__btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Paper mat */
.plan-mat {
  background: #EDEFEA;
  padding: 30px;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 170px);
}
.plan-paper-stack {
  width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan-paper {
  background: var(--white);
  border: 1px solid #E2E6DD;
  box-shadow: 0 14px 40px -20px rgba(36,36,36,.3);
  padding: 46px 50px;
}

/* Letterhead */
.plan-letterhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 3px solid var(--blue);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.plan-letterhead__logo {
  height: 30px;
  display: block;
  margin-bottom: 12px;
}
.plan-letterhead__meta {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--blue);
}
.plan-letterhead__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 32px;
  color: var(--ink);
  line-height: 1.05;
  margin: 2px 0 0;
}
.plan-letterhead__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: var(--panel-blue);
  border-radius: 999px;
  padding: 5px 13px;
}
.plan-letterhead__chip-for {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--blue-dark);
}
.plan-letterhead__chip-class {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue-dark);
}
.plan-letterhead__right {
  text-align: right;
  font-size: 12px;
  color: var(--body);
  font-weight: 700;
  line-height: 1.7;
  padding-top: 4px;
}

/* Section labels */
.plan-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .5px;
  color: #46586C;
}
.plan-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Objective + Muscle two-col */
.plan-two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 26px;
}
.plan-objective-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  font-weight: 600;
}
.plan-objective-text strong {
  font-weight: 800;
  color: var(--ink);
}
.plan-muscle-chip {
  display: inline-block;
  background: var(--panel-blue);
  color: var(--blue-dark);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.plan-muscle-meta {
  font-size: 12px;
  color: var(--body);
  font-weight: 700;
  line-height: 1.6;
}

/* What we mean */
.plan-meaning {
  margin-bottom: 26px;
}
.plan-meaning-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  font-weight: 600;
}

/* Standards */
.plan-standards {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.plan-standards__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plan-standards__item {
  font-size: 12.5px;
  color: var(--body);
  font-weight: 600;
}
.plan-standards__code {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Standing safety note above the page-2 footer */
.plan-safety {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted, #5F6B62);
  border-top: 1px dashed var(--border, #E6E9EE);
  padding-top: 10px;
  margin-top: 14px;
}

/* Footer */
.plan-footer {
  text-align: right;
  font-size: 12px;
  color: #9AA69C;
  font-weight: 700;
  margin-top: 22px;
}

/* Lesson flow */
.plan-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.plan-flow-note {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.plan-flow {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
}
.plan-flow__step {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #F0F2EC;
}
.plan-flow__step--last {
  border-bottom: none;
}
.plan-flow__time {
  width: 62px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13px;
}
.plan-flow__step-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.plan-flow__step-desc {
  font-size: 12.5px;
  color: var(--body);
  font-weight: 500;
  line-height: 1.5;
}
.plan-flow__step--expanded .plan-flow__step-desc {
  line-height: 1.55;
  margin-bottom: 8px;
}
.plan-core-badge {
  background: #FCE4DF;
  color: #C0392B;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 5px;
}
.plan-training-note {
  background: var(--panel-blue);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--blue-dark);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* Activity */
.plan-activity {
  background: #F7FBF5;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.plan-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.plan-activity__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
}
.plan-activity__link {
  font-size: 12px;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.plan-activity__desc {
  font-size: 13px;
  color: var(--body);
  font-weight: 500;
  line-height: 1.55;
  margin-bottom: 16px;
}
.plan-activity__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.plan-activity__sub-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4px;
  color: #46586C;
  margin-bottom: 8px;
}
.plan-activity__checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-activity__check-item {
  font-size: 12.5px;
  color: var(--body);
  font-weight: 600;
}
.plan-activity__remember {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: #5C4A1E;
  font-weight: 600;
  line-height: 1.4;
}

/* Closing prompts */
.plan-closing {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 0;
}
.plan-closing__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 4px;
}
.plan-closing__instruction {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 12px;
}
.plan-closing__prompts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plan-closing__prompt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.plan-closing__nca-label {
  font-family: var(--font-display);
  font-size: 14px;
  width: 74px;
  flex-shrink: 0;
  padding-top: 1px;
}
.plan-closing__nca-text {
  font-size: 13.5px;
  color: var(--body);
  font-weight: 600;
  line-height: 1.5;
}
.plan-closing__divider {
  height: 1px;
  background: #F0F2EC;
}

/* ══════════════════════════════════════════════
   REGISTRATION
   ══════════════════════════════════════════════ */
.reg-page {
  min-height: 100vh;
  background: var(--page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.reg-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  max-width: 960px;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -34px rgba(36,36,36,.45);
  border: 1px solid var(--border);
  background: var(--white);
}

/* Brand panel */
.reg-brand {
  position: relative;
  background: linear-gradient(158deg, #2C90D1 0%, #1E6BA3 100%);
  overflow: hidden;
  padding: 48px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reg-brand__blob {
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: -130px;
  left: -90px;
  background: rgba(255,255,255,.07);
}
.reg-brand__inner { position: relative; }
.reg-brand__logo-chip {
  display: inline-flex;
  background: var(--white);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 26px;
}
.reg-brand__logo-chip img { height: 34px; display: block; }
.reg-brand__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 38px;
  color: var(--white);
  line-height: 1.05;
  margin: 0 0 14px;
}
.reg-brand__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #DCECF8;
  font-weight: 500;
  margin: 0 0 28px;
  max-width: 360px;
}
.reg-brand__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reg-brand__step {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reg-brand__step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--white);
  font-weight: 800;
}
.reg-brand__step-text {
  font-size: 14px;
  color: #EAF4FB;
  font-weight: 700;
}

/* Form panel */
.reg-form {
  padding: 46px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.reg-form__inner { max-width: 380px; }
.reg-form__eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .8px;
  color: var(--blue);
  margin-bottom: 8px;
}
.reg-form__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 31px;
  color: var(--ink);
  margin: 0 0 6px;
}
.reg-form__hint {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 26px;
  line-height: 1.5;
}
.reg-form__label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--body);
  letter-spacing: .5px;
}

/* Code input */
.reg-code {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
  align-items: center;
}
.reg-code__box {
  flex: 1;
  height: 54px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  background: #FAFBF9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: #AAB4AC;
  letter-spacing: 3px;
}
.reg-code__box--active {
  border-color: var(--blue);
  background: var(--white);
  color: var(--ink);
}
.reg-code__input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 3px;
  outline: none;
  text-transform: uppercase;
}
.reg-code__dash {
  font-size: 22px;
  color: #CBD3C9;
  font-weight: 800;
}
.reg-code__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: var(--teal-text);
  font-weight: 800;
}
.reg-form__submit {
  width: 100%;
  font-size: 15.5px;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 12px 22px -12px rgba(41,136,201,.6);
  margin-bottom: 16px;
}
.reg-form__links {
  border-top: 1px solid #EEF1EC;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reg-form__link-row {
  font-size: 13px;
  color: var(--body);
  font-weight: 700;
}
.reg-form__link-row a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.reg-form__link--teal {
  color: var(--teal) !important;
}

/* ══════════════════════════════════════════════
   PROFILE SETUP
   ══════════════════════════════════════════════ */
.setup-page { min-height: 100vh; background: var(--white); }

/* Progress header */
.setup-header {
  background: var(--white);
  border-bottom: 1px solid #EEF1EC;
  padding: 22px 38px 0;
}
.setup-header__inner { max-width: 900px; margin: 0 auto; }
.setup-header__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.setup-header__logo { height: 26px; display: block; }
.setup-header__welcome {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  margin-left: auto;
}
.setup-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.setup-progress__step { flex: 1; }
.setup-progress__bar {
  height: 6px;
  border-radius: 99px;
  background: #EEF1EC;
}
.setup-progress__label {
  font-size: 12px;
  font-weight: 800;
  margin-top: 7px;
  color: #9AA69C;
}

/* Content */
.setup-content {
  padding: 34px 38px 38px;
  background: var(--white);
}
.setup-content__inner { max-width: 900px; margin: 0 auto; }
.setup-intro { margin-bottom: 22px; }
.setup-intro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -.2px;
}
.setup-intro__desc {
  font-size: 15px;
  color: var(--body);
  font-weight: 500;
  margin: 0;
  line-height: 1.55;
  max-width: 580px;
}

/* Shared field label */
.setup-field-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--body);
  letter-spacing: .5px;
  display: block;
}

/* Chip rows */
.setup-chip-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.setup-chip {
  background: var(--white);
  border: 1.5px solid #E4E9E2;
  color: var(--body);
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.setup-chip--active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  padding: 10px 14px;
}
.setup-chip-note {
  font-size: 12px;
  color: #9AA69C;
  font-weight: 700;
  margin-left: 6px;
  margin-top: 8px;
}

/* How many classes */
.setup-how-many {
  background: #F7FBF5;
  border: 1px solid #E4ECDD;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}

/* Class tabs */
.setup-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.setup-tab {
  background: #F1F4EF;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 9px 14px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.setup-tab--active {
  background: var(--ink);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.setup-tab__badge {
  background: var(--gold);
  color: var(--ink);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
}
.setup-tab--remaining {
  color: #C2CBC0;
}

/* Class card */
.setup-class-card {
  border: 1.5px solid var(--ink);
  border-radius: 0 14px 14px 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.setup-class-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.setup-class-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 2px;
}
.setup-class-card__rename {
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}
.setup-class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Stepper + slider */
.setup-size-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.setup-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--blue);
  border-radius: 11px;
  overflow: hidden;
}
.setup-stepper__btn {
  width: 34px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 18px;
  font-weight: 800;
  background: #F4F9FD;
  cursor: pointer;
  user-select: none;
}
.setup-stepper__val {
  width: 54px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
}
.setup-slider { flex: 1; }
.setup-slider__input {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: #EEF1EC;
  border-radius: 99px;
  outline: none;
}
.setup-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  box-shadow: 0 2px 6px rgba(36,36,36,.2);
  cursor: pointer;
}

/* Class actions */
.setup-class-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #EEF1EC;
}
.setup-class-actions__dup {
  background: var(--panel-blue);
  color: var(--blue-dark);
  font-size: 13.5px;
  font-weight: 800;
  padding: 11px 16px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.setup-class-actions__new {
  background: var(--white);
  border: 1.5px solid #E0E6DD;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 11px;
  cursor: pointer;
}

/* Preview callout */
.setup-preview {
  background: #E4FCF0;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.setup-preview__text { flex: 1; min-width: 260px; }
.setup-preview__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 3px;
}
.setup-preview__desc {
  font-size: 13px;
  color: var(--body);
  font-weight: 600;
  line-height: 1.45;
}
.setup-preview__btn {
  background: var(--white);
  border: 1px solid #CCEFE0;
  color: #1E7A4A;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
}

/* Nav */
.setup-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.setup-nav__back {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.setup-nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.setup-nav__skip {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
.setup-nav__finish {
  font-size: 15px;
  padding: 13px 28px;
  box-shadow: 0 12px 22px -12px rgba(41,136,201,.6);
}

/* One sheet (family & team view of a lesson plan) */
.sheet-intro {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--body);
}
.sheet-alias {
  font-size: 12.5px;
  color: #46586C;
  margin-top: 7px;
}
.sheet-intro + .sheet-alias,
.sheet-alias + .sheet-section { margin-bottom: 0; }
.sheet-section {
  border: 1px solid #E2E6DD;
  border-radius: 12px;
  padding: 15px 18px 14px;
  margin-top: 14px;
}
.sheet-section .plan-section-label { margin-bottom: 7px; }
.sheet-section__aud {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: .8px;
  color: #7a828f;
}
.sheet-section__lead {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 9px;
}
.sheet-try__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .7px;
  margin-bottom: 5px;
}
.sheet-try__item {
  display: flex;
  gap: 7px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 4px;
}
.sheet-try__item:last-child { margin-bottom: 0; }
.sheet-challenge {
  background: var(--panel-blue);
  border-radius: 12px;
  padding: 13px 18px;
  margin-top: 10px;
}
.sheet-challenge__label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .7px;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
.sheet-challenge__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--blue-dark);
}

/* Print styles */
@media print {
  .top-nav,
  .plan-action-bar { display: none !important; }
  .plan-mat {
    background: none;
    padding: 0;
  }
  .plan-paper {
    box-shadow: none;
    border: none;
    page-break-after: always;
    padding: 30px 40px;
  }
  .plan-paper:last-child { page-break-after: avoid; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-photo { min-height: 300px; }
  .landing-info__grid { grid-template-columns: 1fr; }
  .nca-cards { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .landing-demo__inner { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: 1fr; }
  /* .sidebar is NOT hidden here anymore: it becomes the slide-in drawer
     (see the sidebar drawer block above). */
  .dash-content { max-width: 100%; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-week { grid-template-columns: repeat(3, 1fr); }
  .dash-bottom { grid-template-columns: 1fr; }
  .dash-greeting__row { flex-wrap: wrap; }
  .dash-hero__photo { display: none; }
  .cur-grid { grid-template-columns: repeat(2, 1fr); }
  .cur-filter { flex-direction: column; align-items: flex-start; }
  .trn-layout { grid-template-columns: 1fr; }
  .trn-rail { display: none; }
  .plan-paper-stack { width: 100%; }
  .plan-paper { padding: 28px 24px; }
  .plan-letterhead { flex-direction: column; gap: 14px; }
  .plan-letterhead__right { text-align: left; }
  .plan-two-col { grid-template-columns: 1fr; }
  .plan-activity__grid { grid-template-columns: 1fr; }
  .plan-action-bar__right { gap: 6px; }
  .reg-split { grid-template-columns: 1fr; }
  .reg-brand { padding: 30px; }
  .reg-form { padding: 30px; }
  .setup-class-grid { grid-template-columns: 1fr; }
  .setup-nav { flex-direction: column; gap: 16px; align-items: stretch; }
  .setup-nav__right { justify-content: flex-end; }
}

/* Phones: the shared inner-page top bar and the curriculum library (row 328) */
@media (max-width: 640px) {
  .top-nav { padding: 0 14px; gap: 12px; }
  .top-nav__logo img { max-width: 126px; }
  .top-nav__right { flex: 1; min-width: 0; gap: 10px; }
  .top-nav .topbar__search { width: auto; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
  .cur-content { padding: 20px 14px 30px; }
  .cur-grid { grid-template-columns: 1fr; }
  .cur-group-header { flex-wrap: wrap; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Admin backends (AIT super-admin console + district admin dashboard)
   ────────────────────────────────────────────────────────────────────────── */
.adm-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 26px; background:var(--white); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.adm-topbar__brand { display:flex; align-items:center; gap:12px; }
.adm-topbar__logo img { height:auto; max-height:38px; max-width:200px; width:auto; object-fit:contain; display:block; }
.adm-topbar__name { font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--ink); line-height:1.1; }
.adm-topbar__name span { display:block; font-family:var(--font-body); font-weight:700; font-size: 12px; letter-spacing:.5px; text-transform:uppercase; color:var(--blue); }
.adm-topbar__right { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--body-alt); flex-wrap:wrap; }
.adm-topbar__right a { color:var(--blue-dark); text-decoration:none; font-weight:700; }
.adm-wrap { max-width:1120px; margin:0 auto; padding:30px 26px 70px; }
.adm-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.adm-head__title { font-family:var(--font-display); font-size:34px; color:var(--ink); line-height:1.05; }
.adm-head__sub { color:var(--muted); font-size:13.5px; margin-top:6px; }
.adm-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:24px; border-bottom:1px solid var(--border); }
.adm-tab { padding:9px 15px; border-radius:9px 9px 0 0; font-weight:700; font-size:13.5px; color:var(--body-alt); text-decoration:none; }
.adm-tab:hover { background:var(--bg-hover); }
.adm-tab--active { color:var(--blue-dark); background:var(--blue-light); box-shadow:inset 0 -2px 0 var(--blue); }
.adm-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin-bottom:24px; }
.adm-stat { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:18px; }
.adm-stat__num { font-family:var(--font-display); font-size:30px; color:var(--ink); line-height:1; }
.adm-stat__label { font-size: 12px; font-weight:800; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; margin-top:7px; }
.card--table { overflow-x:auto; }
.adm-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.adm-table th { text-align:left; font-size: 12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); font-weight:800; padding:10px 12px; border-bottom:1px solid var(--border); }
.adm-table td { padding:11px 12px; border-bottom:1px solid var(--border); color:var(--body); vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; color:var(--ink); letter-spacing:.5px; }
.adm-form { display:grid; gap:14px; max-width:560px; }
.adm-form__row { display:grid; gap:6px; }
.adm-form__row--2 { grid-template-columns:1fr 1fr; gap:14px; }
.adm-label { font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--body-alt); }
.adm-input, .adm-select { width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px; font-family:var(--font-body); font-size:14.5px; color:var(--ink); background:var(--white); }
.adm-input:focus, .adm-select:focus { outline:none; border-color:var(--blue); }
.adm-hint { font-size:12px; color:var(--muted); }
.adm-notice { background:var(--success-bg); color:var(--success-text); border:1px solid #BFE6CD; border-radius:10px; padding:12px 14px; margin-bottom:18px; font-weight:600; font-size:14px; }
.adm-error { background:var(--error-bg); color:var(--error); border:1px solid #F3C2C2; border-radius:10px; padding:12px 14px; margin-bottom:18px; font-weight:600; font-size:14px; }
.adm-cred { background:var(--panel-gold); border:1px solid #EAD6A0; border-radius:12px; padding:16px 18px; margin-bottom:20px; }
.adm-cred__title { font-weight:800; color:var(--gold-dark); font-size:13px; letter-spacing:.3px; text-transform:uppercase; margin-bottom:8px; }
.adm-cred__row { display:flex; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--ink); margin-top:4px; align-items:center; }
.adm-cred code { font-family:ui-monospace,Menlo,monospace; font-weight:700; background:rgba(0,0,0,.06); padding:3px 9px; border-radius:6px; }
.adm-pill { display:inline-block; font-size: 12px; font-weight:800; letter-spacing:.3px; padding:3px 9px; border-radius:999px; text-transform:uppercase; }
.adm-pill--ok { background:var(--success-bg); color:var(--success-text); }
.adm-pill--wait { background:var(--gold-light); color:var(--gold-text); }
.adm-pill--muted { background:var(--bg-hover); color:var(--muted); }
.adm-prog { display:flex; align-items:center; gap:9px; }
.adm-bar { height:7px; border-radius:999px; background:var(--border); overflow:hidden; width:96px; flex:none; }
.adm-bar__fill { height:100%; background:var(--blue); }
.adm-prog__txt { font-size:12.5px; color:var(--body-alt); white-space:nowrap; }
.adm-group { margin-bottom:26px; }
.adm-group__title { font-family:var(--font-heading); font-weight:800; font-size:18px; color:var(--ink); margin-bottom:2px; }
.adm-group__meta { font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.adm-empty { color:var(--muted); font-size:14px; padding:16px 2px; }
.adm-signin { max-width:420px; margin:90px auto; text-align:center; }
.adm-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:26px; align-items:start; }
.adm-cols--single { grid-template-columns:minmax(0,1fr); }
/* Rows 438/439: one labeled box per trackable thing on the user detail */
.adm-boxes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.adm-box { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--white); }
.adm-box__lbl { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.adm-box__num { font-size:19px; font-weight:800; color:var(--ink); margin:3px 0 1px; }
.adm-box__sub { font-size:12px; font-weight:600; color:var(--body-alt); }
.adm-box--ok { border-color:#BFE3C8; background:#F2FAF4; }
.adm-box--ok .adm-box__num { color: var(--success-text, #1E6B45); }
.adm-box--muted .adm-box__num { color: var(--muted); font-weight:700; }
/* Row 444: the hand-picked recipients list on the district email tool */
.adm-nudge__picks { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 14px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.adm-nudge__pick { display:flex; align-items:baseline; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.adm-nudge__pick .adm-hint { font-weight:500; }
@media (max-width:860px){ .adm-cols { grid-template-columns:1fr; } }
@media (max-width:680px){ .adm-form__row--2 { grid-template-columns:1fr; } .adm-table { font-size:12.5px; } }

/* Admin dashboard charts */
.adm-hbars { display:flex; flex-direction:column; gap:7px; }
.adm-hbar { display:flex; align-items:center; gap:10px; }
.adm-hbar__label { font-size: 12px; font-weight:800; color:var(--muted); width:26px; flex:none; }
.adm-hbar__track { flex:1; height:14px; border-radius:7px; background:var(--bg-hover); overflow:hidden; }
.adm-hbar__fill { display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,var(--blue-gradient-start),var(--blue-gradient-end)); transition:width .5s ease; }
.adm-hbar__val { font-size:12px; font-weight:700; color:var(--body-alt); width:24px; text-align:right; flex:none; }
.adm-donut { width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.adm-donut__hole { width:84px; height:84px; border-radius:50%; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.adm-donut__pct { font-family:var(--font-display); font-size:26px; color:var(--ink); line-height:1; }
.adm-donut__cap { font-size: 12px; font-weight:800; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; }
.adm-legend { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--body); padding:3px 0; }
.adm-legend strong { margin-left:auto; color:var(--ink); }
.adm-legend__dot { width:10px; height:10px; border-radius:50%; flex:none; }
.adm-seg { display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--bg-hover); }
.adm-seg__part { height:100%; }

/* Teacher detail drill-down */
.adm-rowlink { color:var(--blue-dark); text-decoration:none; }
.adm-rowlink:hover { text-decoration:underline; }
.adm-back { display:inline-block; margin-bottom:14px; color:var(--blue-dark); text-decoration:none; font-weight:700; font-size:13.5px; }
.adm-detail__head { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:18px; }
.adm-detail__name { font-family:var(--font-display); font-size:24px; color:var(--ink); line-height:1.05; }
.adm-detail__stats { display:flex; gap:26px; flex-wrap:wrap; }
.adm-detail__stat { text-align:center; }
.adm-detail__statnum { font-family:var(--font-heading); font-weight:800; font-size:18px; color:var(--ink); }
.adm-detail__statlbl { font-size: 12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.adm-lessons { display:flex; flex-direction:column; }
.adm-lesson { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border); }
.adm-lesson:last-child { border-bottom:none; }
.adm-lesson__n { width:26px; height:26px; flex:none; border-radius:50%; background:var(--bg-hover); color:var(--muted); font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; }
.adm-lesson--done .adm-lesson__n { background:var(--blue); color:#fff; }
.adm-lesson__title { flex:1; font-weight:700; color:var(--ink); font-size:14px; }
.adm-lesson__meta { display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px; }
@media (max-width:680px){ .adm-detail__head { flex-direction:column; } }

/* ── Sprint 1: at-risk flag, sort/filter, nudge, export ─────────────────── */
.adm-stat--flag { border-color:#F0D9A8; background:var(--gold-light); }
.adm-pill--risk { background:var(--gold-light); color:var(--gold-dark); box-shadow:inset 0 0 0 1px #F0D9A8; }
.adm-row--risk td { background:rgba(251,176,24,.05); }
.adm-row--risk td:first-child { box-shadow:inset 3px 0 0 var(--gold); }

.adm-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
/* Export picker modal (members view, row 388) */
.adm-exportmodal { position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; padding:20px; }
.adm-exportmodal[hidden] { display:none; }
.adm-exportmodal__scrim { position:absolute; inset:0; background:rgba(20,26,32,.45); }
.adm-exportmodal__card { position:relative; background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px 22px 18px; width:min(520px, 100%); max-height:min(640px, 90vh); display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(20,26,32,.25); }
.adm-exportmodal__title { margin:0 0 2px; font-size:19px; font-weight:800; color:var(--ink); }
.adm-exportmodal__list { overflow-y:auto; border:1px solid var(--border); border-radius:12px; padding:6px 12px; margin-bottom:12px; }
.adm-exportmodal__group { font-size:12.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); padding:10px 2px 4px; }
.adm-exportmodal__row { display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:14px; color:var(--ink); cursor:pointer; }
.adm-exportmodal__row + .adm-exportmodal__row { border-top:1px solid var(--border); }
.adm-exportmodal__row input { width:16px; height:16px; accent-color:var(--blue); flex:none; }
.adm-exportmodal__foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.adm-toolbar__right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.adm-chips { display:flex; gap:7px; flex-wrap:wrap; }
.adm-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--body-alt); font-weight:700; font-size:13px; text-decoration:none; }
.adm-chip:hover { border-color:var(--blue); color:var(--blue-dark); }
.adm-chip--active { background:var(--blue); border-color:var(--blue); color:#fff; }
.adm-chip__n { font-size: 12px; font-weight:800; background:rgba(0,0,0,.08); color:inherit; padding:1px 7px; border-radius:999px; }
.adm-chip--active .adm-chip__n { background:rgba(255,255,255,.28); }

.adm-sort { color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; }
.adm-sort:hover { color:var(--blue-dark); }
.adm-table th[aria-sort="ascending"] .adm-sort, .adm-table th[aria-sort="descending"] .adm-sort { color:var(--blue-dark); }
.adm-caret { font-size: 12px; margin-left:3px; }
.adm-schoolfilter { display:flex; align-items:center; gap:6px; }
.adm-export { padding:8px 14px; font-size:13px; }

.adm-threshold { display:inline-flex; align-items:center; gap:6px; margin-left:8px; }
.adm-threshold label { font-weight:700; color:var(--body-alt); }
.adm-threshold .adm-input { width:64px; padding:5px 8px; font-size:13px; }
.adm-threshold .btn { padding:5px 11px; font-size:12.5px; }

.adm-nudge__form { max-width:560px; display:grid; gap:14px; }
.adm-nudge__note { margin:0; }
@media (max-width:680px){ .adm-toolbar { align-items:flex-start; } }

/* ── Sprint 2: funnel, benchmarks, due dates, methodology ──────────────── */
.adm-funnel { display:flex; flex-direction:column; gap:10px; }
.adm-funnel__row { display:flex; align-items:center; gap:12px; }
.adm-funnel__label { width:118px; flex:none; font-size:12.5px; font-weight:700; color:var(--body-alt); }
.adm-funnel__track { flex:1; height:20px; border-radius:6px; background:var(--bg-hover); overflow:hidden; }
.adm-funnel__fill { display:block; height:100%; border-radius:6px; background:var(--blue); transition:width .5s ease; min-width:2px; }
.adm-funnel__fill--issued { background:#9DBFD8; }
.adm-funnel__fill--redeemed { background:var(--blue); }
.adm-funnel__fill--started { background:var(--blue-dark); }
.adm-funnel__fill--certified { background:var(--success); }
.adm-funnel__val { width:76px; flex:none; text-align:right; font-weight:800; color:var(--ink); font-size:13.5px; }
.adm-funnel__pct { font-weight:700; color:var(--muted); font-size: 12px; }
.adm-funnel__hint { margin-top:14px; font-size:13px; color:var(--body-alt); background:var(--blue-light); border-radius:9px; padding:10px 12px; }
.adm-funnel__hint a { color:var(--blue-dark); font-weight:700; text-decoration:none; margin-left:4px; }

.adm-bench { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.adm-bench__row { display:flex; align-items:center; gap:12px; }
.adm-bench__label { width:150px; flex:none; font-size:13px; font-weight:700; color:var(--body-alt); }
.adm-bench__track { flex:1; height:16px; border-radius:6px; background:var(--bg-hover); overflow:hidden; }
.adm-bench__fill { display:block; height:100%; border-radius:6px; min-width:2px; }
.adm-bench__fill--own { background:var(--blue); }
.adm-bench__fill--district { background:#9DBFD8; }
.adm-bench__fill--org { background:#CFD6CC; }
.adm-bench__val { width:42px; flex:none; text-align:right; font-weight:800; color:var(--ink); font-size:13px; }

.adm-settings { display:flex; flex-direction:column; gap:8px; }
.adm-settings__item { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.adm-threshold input[type="date"] { width:auto; min-width:150px; }
.adm-info { cursor:help; color:var(--muted); font-size:13px; }
.adm-info:hover, .adm-info:focus { color:var(--blue-dark); }

/* ── Sprint 4: leaderboard, drop-off, pace forecast ────────────────────── */
.adm-pace { display:flex; align-items:center; gap:12px; margin-bottom:24px; font-size:15px; color:var(--body); border-left:4px solid var(--blue); }
.adm-pace--stalled { border-left-color:var(--gold); }
.adm-pace--done { border-left-color:var(--success); }
.adm-pace__icon { font-size:20px; flex:none; }
.adm-dropoff { margin-top:14px; background:var(--gold-light); color:var(--gold-dark); border-radius:9px; padding:10px 12px; }
.adm-board__list { list-style:none; margin:6px 0 0; padding:0; counter-reset:none; }
.adm-board__row { display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--border); }
.adm-board__row:last-child { border-bottom:none; }
.adm-board__rank { width:26px; height:26px; flex:none; border-radius:50%; background:var(--blue-light); color:var(--blue-dark); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.adm-board__row:first-child .adm-board__rank { background:var(--gold); color:#fff; }
.adm-board__name { flex:1; font-weight:700; color:var(--ink); text-decoration:none; }
a.adm-board__name:hover { text-decoration:underline; }
.adm-board__stat { flex:none; font-size:13px; font-weight:700; color:var(--body-alt); min-width:54px; text-align:right; }

/* ── B8: visible keyboard focus across admin UI ────────────────────────── */
.adm-tab:focus-visible, .adm-chip:focus-visible, .adm-sort:focus-visible, .adm-rowlink:focus-visible,
.adm-board__name:focus-visible, .adm-export:focus-visible, .adm-back:focus-visible, .adm-info:focus-visible,
.adm-funnel__hint a:focus-visible { outline:2px solid var(--blue-dark); outline-offset:2px; border-radius:4px; }

/* ── C5: admin action audit log (activity) ─────────────────────────────── */
.adm-filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:4px; max-width:none; }
.adm-filters__field { display:grid; gap:6px; }
.adm-filters__field .adm-select, .adm-filters__field .adm-input { min-width:170px; padding:8px 11px; font-size:13.5px; }
.adm-filters__field input[type="date"] { min-width:150px; }
.adm-filters__actions { display:flex; align-items:center; gap:12px; }
.adm-log__when { white-space:nowrap; color:var(--body-alt); font-weight:700; }
.adm-log__when .adm-hint { font-weight:500; }
.adm-log__detail { color:var(--body); }
.adm-pager { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }
.adm-pager__pos { font-size:13px; color:var(--muted); font-weight:700; }
.adm-pager__spacer { width:1px; }
.adm-pager .btn { padding:8px 16px; font-size:13px; text-decoration:none; }
@media (max-width:680px){ .adm-filters__field .adm-select, .adm-filters__field .adm-input { min-width:0; width:100%; } .adm-filters__field { flex:1 1 100%; } }

/* ── C6: privacy export + remove (anonymize) ───────────────────────────── */
.adm-privacy { margin-top:18px; }
.adm-privacy__actions { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.adm-removelink { color:var(--error); font-weight:700; font-size:13.5px; text-decoration:none; }
.adm-removelink:hover { text-decoration:underline; }
.adm-removelink:focus-visible { outline:2px solid var(--error); outline-offset:2px; border-radius:4px; }

/* ── Row actions: one quiet, consistent line per row ───────────────────── */
/* Neutral actions are blue text links; red is reserved for destructive ones.
   Buttons inside the little admin-post forms dress as the same links. */
.adm-acts { display:flex; gap:14px; align-items:center; justify-content:flex-end; white-space:nowrap; }
.adm-acts form { margin:0; display:inline; }
button.adm-rowlink, button.adm-removelink { background:none; border:0; padding:0; cursor:pointer; font:inherit; }
button.adm-rowlink { color:var(--blue-dark); }
button.adm-rowlink:hover, button.adm-removelink:hover { text-decoration:underline; }
.adm-rowlink { font-weight:700; font-size:13.5px; }

/* A card that fills its grid row (overview funnel next to the taller table). */
.card--fill { align-self:stretch; display:flex; flex-direction:column; }
.card--fill .adm-funnel { flex:1; justify-content:space-evenly; }
.btn-danger { background:var(--error); color:#fff; border:1.5px solid var(--error); }
.btn-danger:hover { filter:brightness(.94); }
.adm-confirm { border-left:4px solid var(--error); background:var(--error-bg); }
.adm-confirm__lead { font-family:var(--font-heading); font-weight:800; font-size:16px; color:var(--ink); margin:0 0 10px; }
.adm-confirm__list { margin:0 0 16px; padding-left:20px; color:var(--body); font-size:14px; }
.adm-confirm__list li { margin:4px 0; }
.adm-confirm__actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ── C6: data-handling statement page ──────────────────────────────────── */
.dp-wrap { max-width:760px; margin:0 auto; padding:56px 22px 80px; }
.dp__eyebrow { font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--blue); margin:0 0 8px; }
.dp__title { font-family:var(--font-display); font-size:38px; line-height:1.08; color:var(--ink); margin:0 0 16px; }
.dp__lead { font-size:18px; line-height:1.6; color:var(--body); margin:0 0 12px; }
.dp__section { margin-top:30px; }
.dp__section h2 { font-family:var(--font-heading); font-weight:800; font-size:20px; color:var(--ink); margin:0 0 8px; }
.dp__section p { font-size:16px; line-height:1.65; color:var(--body); margin:0; }
.dp__section a { color:var(--blue-dark); font-weight:700; }
@media (max-width:680px){ .dp__title { font-size:30px; } .dp-wrap { padding:40px 18px 60px; } }

/* ── Standards Alignment page (/standards/) ────────────────────────────── */
.std-wrap { max-width:860px; }
.std-return { margin:0 0 14px; }
.std-return a { color:var(--muted); font-weight:700; font-size:13px; text-decoration:none; }
.std-return a:hover { color:var(--blue); }
.std-wrap .screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.std-links { display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 8px; }
.std-links__card { flex:1 1 260px; display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1.5px solid var(--line, #E3E0D8); border-radius:14px; background:#fff; text-decoration:none; transition:border-color .15s, transform .15s; }
.std-links__card:hover { border-color:var(--blue); transform:translateY(-1px); }
.std-links__label { font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted, #6B7671); }
.std-links__title { font-family:var(--font-heading); font-weight:800; font-size:15.5px; line-height:1.35; color:var(--blue-dark); }
.std-toc { margin:22px 0 6px; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.std-toc__label { font-size:11px; font-weight:800; letter-spacing:.8px; color:var(--muted, #6B7671); margin-right:2px; }
.std-toc a { font-size:13px; font-weight:700; color:var(--blue-dark); text-decoration:none; padding:4px 10px; border:1px solid var(--line, #E3E0D8); border-radius:999px; background:#fff; }
.std-toc a:hover { border-color:var(--blue); }
.std-lesson { margin-top:42px; scroll-margin-top:24px; }
.std-lesson__eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.9px; color:var(--muted, #6B7671); }
.std-lesson__title { font-family:var(--font-display); font-size:26px; color:var(--ink); margin:4px 0 6px; }
.std-lesson__skill { font-size:15.5px; line-height:1.6; color:var(--body); margin:0 0 12px; max-width:640px; }
.std-lesson__frameworks { display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.std-fw { display:flex; gap:10px; align-items:baseline; }
.std-fw__tag { flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.7px; padding:3px 9px; border-radius:999px; }
.std-fw__tag--casel { background:#E2F1EF; color:var(--teal-text, #00655D); }
.std-fw__tag--sel { background:#E7EDF8; color:var(--blue-dark); }
.std-fw__text { font-size:14.5px; line-height:1.55; color:var(--body); }
.std-table-wrap { overflow-x:auto; border:1.5px solid var(--line, #E3E0D8); border-radius:14px; background:#fff; }
.std-table { width:100%; border-collapse:collapse; font-size:14px; }
.std-table th { text-align:left; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted, #6B7671); padding:10px 14px 8px; border-bottom:1.5px solid var(--line, #E3E0D8); }
.std-table td { padding:9px 14px; border-bottom:1px solid #EFEDE6; color:var(--body); line-height:1.5; vertical-align:top; }
.std-table tr:last-child td { border-bottom:0; }
.std-table__grade { font-weight:800; color:var(--ink); white-space:nowrap; width:64px; }
.std-table__code { font-weight:800; color:var(--blue-dark); white-space:nowrap; width:74px; }
.std-lesson__go { margin-top:10px; }
.std-lesson__go a { font-size:14px; font-weight:800; color:var(--blue-dark); text-decoration:none; }
.std-lesson__go a:hover { text-decoration:underline; }
.std-attrib { border-top:1.5px solid var(--line, #E3E0D8); padding-top:22px; margin-top:46px; }
@media (max-width:680px){ .std-lesson__title { font-size:22px; } }

/* ── C8: per-district branding controls (AIT client forms) ─────────────── */
.adm-brand__fields { display:flex; gap:18px; flex-wrap:wrap; }
.adm-brand__field { display:flex; flex-direction:column; gap:5px; }
.adm-brand__field input[type="color"] { width:56px; height:38px; padding:2px; border:1.5px solid var(--border); border-radius:8px; background:var(--white); cursor:pointer; }
.adm-brand__field input[type="file"] { font-size:13px; color:var(--body-alt); max-width:260px; }
.adm-brand__current { margin-bottom:10px; }
.adm-brand__current img { max-height:46px; max-width:200px; background:var(--bg-hover); padding:6px 10px; border-radius:8px; }
.adm-brand__clear { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--body-alt); margin-top:4px; }
.adm-brand__clear input { width:auto; }

/* ════════════════════════════════════════════════════════════════════════
   YEAR PLANNER (/plan/) — calendar setup tool (onboarding spec §4)
   ════════════════════════════════════════════════════════════════════════ */
.pl-page { min-height:100vh; background:var(--bg-page); }
.pl-wrap { max-width:1080px; margin:0 auto; padding:26px 28px 60px; }
.pl-save { font-size:13px; font-weight:700; color:var(--muted); margin-right:14px; }
.pl-save--ok { color:var(--success); }
.pl-save--err { color:var(--error); }

.pl-empty { max-width:520px; margin:80px auto; text-align:center; background:var(--white); border:1px solid var(--border); border-radius:18px; padding:46px 36px; }
.pl-empty__icon { font-size:42px; }
.pl-empty__title { font-size:24px; color:var(--ink); margin:10px 0 8px; }
.pl-empty__text { color:var(--body-alt); line-height:1.6; margin-bottom:22px; }

.pl-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px; }
.pl-back { font-size:13px; font-weight:700; color:var(--blue-dark); text-decoration:none; }
.pl-title { font-size:34px; color:var(--ink); margin:6px 0 6px; }
.pl-sub { color:var(--body-alt); line-height:1.6; max-width:680px; font-size:14.5px; }
.pl-done { white-space:nowrap; text-decoration:none; }

.pl-classbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.pl-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.pl-tab { border:1.5px solid var(--border); background:var(--white); color:var(--body); border-radius:999px; padding:7px 16px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:14px; cursor:pointer; }
.pl-tab--active { border-color:var(--blue); background:var(--blue); color:#fff; }
.pl-manage { font-size:13px; font-weight:700; color:var(--blue-dark); text-decoration:none; white-space:nowrap; padding:7px 0; }
.pl-manage:hover { text-decoration:underline; }
.pl-select { border:1.5px solid #DDE3DC; border-radius:9px; padding:8px 12px; font-family:inherit; font-size:14px; background:#fff; color:var(--ink); }

.pl-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.pl-card__head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.pl-card__title { font-size:18px; color:var(--ink); }
.pl-card__hint { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.pl-btn-sm { padding:8px 15px; font-size:13.5px; }

.pl-mini { display:flex; flex-direction:column; gap:5px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:12px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
.pl-mini--grow { flex:1; }
.pl-date, .pl-input { border:1.5px solid #DDE3DC; border-radius:9px; padding:9px 11px; font-family:inherit; font-size:14px; color:var(--ink); background:#fff; box-sizing:border-box; }
.pl-date--sm { padding:6px 9px; font-size:13px; }
.pl-input--num { width:88px; }
.pl-date:focus, .pl-input:focus, .pl-select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(41,136,201,.12); }

.pl-yearrow { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:18px; border-bottom:1px dashed var(--border); }
.pl-presets { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--muted); }
.pl-chip { border:1.5px solid var(--border); background:var(--white); color:var(--body); border-radius:999px; padding:6px 14px; font-weight:700; font-size:13px; cursor:pointer; }
.pl-chip--on { border-color:var(--blue); background:var(--panel-blue); color:var(--blue-dark); }

/* One-window date range picker + the PE-days row (row 371). */
.pl-mini__lbl { display:block; }
.pl-mini--inline { flex-direction:row; align-items:center; gap:8px; }
.pl-select--sm { padding:6px 9px; font-size:13px; text-transform:none; letter-spacing:0; }
.pl-daterange {
  border:1.5px solid #DDE3DC; border-radius:9px; background:#fff; color:var(--ink);
  font-family:inherit; font-size:14px; font-weight:700; padding:9px 13px; cursor:pointer;
  text-align:left; letter-spacing:0; text-transform:none; white-space:nowrap;
}
.pl-daterange:hover { border-color:var(--blue); }
.pl-daterange--sm { padding:6px 10px; font-size:13px; }
.pl-daysrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.pl-daychips { display:flex; gap:6px; }
.pl-daychip {
  border:1.5px solid var(--border); background:var(--white); color:var(--body);
  border-radius:9px; padding:7px 11px; font-family:inherit; font-weight:800; font-size:13px; cursor:pointer;
}
.pl-daychip--on { border-color:var(--blue); background:var(--blue); color:#fff; }

.pl-pick {
  position:absolute; z-index:120; width:300px; background:var(--white);
  border:1px solid var(--border); border-radius:14px; padding:12px 14px 10px;
  box-shadow:0 18px 44px rgba(35,48,67,.22);
}
.pl-pick__head { display:flex; align-items:center; justify-content:space-between; }
.pl-pick__jump { display:flex; gap:5px; }
.pl-pick__sel { border:1.5px solid #DDE3DC; border-radius:8px; background:#fff; color:var(--ink); font-family:inherit; font-weight:700; font-size:13px; padding:4px 6px; }
.pl-pick__typed { display:flex; align-items:center; gap:7px; margin-top:9px; }
.pl-pick__in { flex:1 1 0; min-width:0; border:1.5px solid #DDE3DC; border-radius:8px; padding:6px 8px; font-family:inherit; font-size:13px; color:var(--ink); }
.pl-pick__in:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(41,136,201,.12); }
.pl-pick__dash { font-size:12px; font-weight:700; color:var(--muted); }
.pl-pick__nav { border:none; background:var(--bg-hover); color:var(--body); width:26px; height:26px; border-radius:8px; font-size:16px; font-weight:800; cursor:pointer; line-height:1; }
.pl-pick__title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:6px 0 2px; }
.pl-pick__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:8px; }
.pl-pick__wd { text-align:center; font-size:11px; font-weight:800; color:var(--muted); padding-bottom:3px; }
.pl-pick__day {
  border:none; background:none; color:var(--ink); font-family:inherit; font-size:13px; font-weight:700;
  padding:6px 0; border-radius:8px; cursor:pointer;
}
.pl-pick__day:hover { background:var(--bg-hover); }
/* The chosen span shades in, ends solid, so one window shows the whole range. */
.pl-pick__day--mid { background:var(--panel-blue); color:var(--blue-dark); border-radius:0; }
.pl-pick__day--end { background:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(41,136,201,.4); }
.pl-pick__day--start { border-radius:8px 0 0 8px; }
.pl-pick__day--stop { border-radius:0 8px 8px 0; }
.pl-pick__day--solo { border-radius:8px; }
.pl-pick__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.pl-pick__read { font-size:12.5px; font-weight:700; color:var(--body); }
.pl-pick__done { border:none; background:var(--blue); color:#fff; font-family:inherit; font-weight:800; font-size:13px; padding:7px 15px; border-radius:999px; cursor:pointer; }
.pl-pick__done:disabled { opacity:.4; cursor:default; }
.pl-pick__hint { font-size:11.5px; color:var(--muted); margin-top:6px; }

.pl-terms { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.pl-term { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--bg-sidebar); }
.pl-term__name { width:100%; border:none; background:transparent; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:15px; color:var(--ink); margin-bottom:8px; }
.pl-term__name:focus { outline:none; }
.pl-term__dates { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-term__to { font-size:12px; color:var(--muted); }
.pl-term__wk { font-size: 12px; font-weight:700; color:var(--muted); margin-left:auto; }

.pl-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; font-size:13px; }
.pl-legend__lbl { font-weight:800; color:var(--muted); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.pl-legend__none { color:var(--muted); font-style:italic; }
.pl-legend__item { display:inline-flex; align-items:center; gap:6px; color:var(--body); }
.pl-legend__dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.pl-legend__badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--gold); color:#3a2a00; font-weight:800; font-size: 12px; }
.pl-legend__item--ldtpe { font-weight:700; }

.pl-block-editor { border:1px solid var(--blue); background:var(--panel-blue); border-radius:12px; padding:16px 18px; margin-bottom:16px; }
.pl-be__row { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.pl-be__actions { display:flex; gap:10px; align-items:center; }
.pl-be__hint { font-size:12.5px; color:var(--muted); margin:-6px 0 12px; }
.pl-be__del { margin-left:auto; color:var(--error)!important; }
.pl-be__row--weeks { margin-bottom:8px; }
.pl-be__hint--tight { margin:6px 0 0; display:block; }
.pl-weekchips { display:flex; gap:6px; flex-wrap:wrap; }
.pl-weekchip {
  border:1.5px solid var(--border); background:var(--white); color:var(--body);
  border-radius:999px; padding:6px 12px; font-family:inherit; font-weight:700; font-size:12.5px;
  cursor:pointer; letter-spacing:0; text-transform:none;
}
.pl-weekchip--on { border-color:var(--gold); background:var(--panel-gold); color:var(--gold-text); }
.pl-card__hint--block { margin:0 0 10px; }
.pl-range-hint { font-size:13px; font-weight:700; color:var(--blue-dark); background:var(--panel-blue); border-radius:9px; padding:8px 12px; margin-bottom:10px; }
.pl-excsug { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pl-excsug__lbl { font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pl-excsug__hint { font-size:12px; color:var(--muted); }
.pl-chip--add { padding:6px 12px; font-size:12.5px; }

.pl-warnings { margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
.pl-warn { font-size:13px; border-radius:9px; padding:9px 13px; line-height:1.5; }
.pl-warn--bad { background:var(--error-bg); color:var(--error); border:1px solid #F3C2C2; }
.pl-warn--info { background:var(--bg-hover); color:var(--body-alt); }

.pl-trow { margin-bottom:14px; }
.pl-trow__head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.pl-trow__name { font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:14px; color:var(--ink); }
.pl-trow__span { font-size:12px; color:var(--muted); }
/* Weeks wrap onto as many rows as they need: no term ever scrolls sideways. */
.pl-track { display:flex; gap:2px; padding-bottom:4px; flex-wrap:wrap; overflow-x:visible; }
.pl-track .pl-cell { flex:0 0 46px; }
.pl-cell { position:relative; flex:1 0 42px; min-height:52px; border-radius:6px; cursor:pointer; padding:4px 5px; box-sizing:border-box; transition:filter .12s; overflow:hidden; }
.pl-cell:hover { filter:brightness(1.04); outline:2px solid rgba(41,136,201,.35); }
.pl-cell--block { color:#fff; }
.pl-cell--gap { background:repeating-linear-gradient(45deg,var(--bg-hover),var(--bg-hover) 6px,#fff 6px,#fff 12px); border:1px dashed var(--border); }
.pl-cell--lesson { box-shadow:inset 0 0 0 2px var(--gold); }
.pl-cell--overlap { box-shadow:inset 0 0 0 2px var(--error); }
.pl-cell--more { flex:0 0 auto; display:flex; align-items:center; color:var(--muted); font-size:12px; font-weight:700; background:none; cursor:default; }
.pl-cell__wk { position:absolute; bottom:3px; left:5px; font-size: 12px; font-weight:700; opacity:.75; }
.pl-cell--gap .pl-cell__wk { color:var(--muted); }
.pl-cell__label { display:block; font-size: 12px; font-weight:800; line-height:1.2; }
.pl-cell__lesson { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:var(--gold); color:#3a2a00; font-weight:800; font-size: 12px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(0,0,0,.25); border:none; font-family:inherit; cursor:pointer; padding:0; }
/* Set a Playgility lesson day straight on the calendar: the L+ shows on hover. */
.pl-cell__addl {
  position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%;
  background:rgba(255,255,255,.82); color:var(--gold-text); border:1px dashed var(--gold);
  font-family:inherit; font-weight:800; font-size:9.5px; line-height:1; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s;
}
.pl-cell:hover .pl-cell__addl, .pl-cell__addl:focus-visible { opacity:1; }
.pl-cell__addl:hover { background:var(--gold); color:#3a2a00; border-style:solid; }
/* Touch has no hover: keep it visible so a tap can reach it instead of starting a unit. */
@media (hover: none) { .pl-cell__addl { opacity:.85; } }
.pl-cell--pending { outline:2px solid var(--blue); background:var(--panel-blue); box-shadow:inset 0 0 0 999px rgba(41,136,201,.14); }

.pl-dist-note { font-size:13px; color:var(--gold-dark); background:var(--gold-light); border-radius:9px; padding:0; line-height:1.5; }
.pl-dist-note:not(:empty) { padding:9px 13px; margin-bottom:12px; }
.pl-lessons { display:flex; flex-direction:column; gap:6px; }
.pl-lrow { display:flex; align-items:center; gap:12px; padding:9px 10px; border:1px solid var(--border); border-radius:10px; }
.pl-lrow--unplaced { background:var(--bg-sidebar); }
.pl-lrow__num { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--panel-blue); color:var(--blue-dark); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.pl-lrow__main { flex:1; min-width:0; }
.pl-lrow__title { font-weight:700; color:var(--ink); font-size:14px; }
.pl-lrow__meta { font-size:12px; color:var(--muted); }
.pl-tag { font-size: 12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--bg-hover); border-radius:5px; padding:1px 6px; vertical-align:middle; }
.pl-lrow__date { display:flex; align-items:center; gap:8px; }
.pl-lrow__date--none { color:var(--muted); font-size:13px; font-style:italic; }
.pl-lock { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--muted); cursor:pointer; }
.pl-lock input { width:auto; }

.pl-exc { display:flex; flex-direction:column; gap:6px; }
.pl-exc__row { display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; }
.pl-exc__date { font-weight:700; color:var(--ink); font-size:13.5px; min-width:120px; }
.pl-exc__date--edit { border:1px dashed var(--border); background:#fff; border-radius:8px; padding:5px 9px; font-family:inherit; cursor:pointer; text-align:left; }
.pl-exc__date--edit:hover { border-color:var(--blue); border-style:solid; color:var(--blue-dark); }
.pl-exc__type { font-size: 12px; font-weight:700; border-radius:5px; padding:2px 8px; }
.pl-exc__type--no_school { background:var(--error-bg); color:var(--error); }
.pl-exc__type--event { background:var(--panel-blue); color:var(--blue-dark); }
.pl-exc__type--note { background:var(--bg-hover); color:var(--body-alt); }
.pl-exc__note { flex:1; color:var(--body-alt); font-size:13px; }
.pl-exc__del { border:none; background:none; color:var(--error); font-size:12px; font-weight:700; cursor:pointer; }
.pl-hint { color:var(--muted); font-size:13.5px; font-style:italic; padding:4px 0; }

@media (max-width:600px){ .pl-be__row{flex-direction:column;gap:10px} .pl-head{flex-direction:column} .pl-cell{flex-basis:36px} }

/* ── Floating beta feedback widget ─────────────────────────────────────────── */
.fbw { position:fixed; right:18px; bottom:18px; z-index:99999; }
.fbw-btn { background:var(--blue); color:#fff; border:none; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px rgba(20,40,80,.25); font-family:inherit; }
.fbw-btn:hover { filter:brightness(1.05); }
.fbw-panel { display:none; width:330px; max-width:calc(100vw - 36px); background:#fff; border:1px solid #e6e9ee; border-radius:14px; box-shadow:0 12px 40px rgba(20,40,80,.22); overflow:hidden; }
.fbw--open .fbw-btn { display:none; }
.fbw--open .fbw-panel { display:block; }
.fbw-head { display:flex; align-items:center; justify-content:space-between; background:var(--blue); color:#fff; padding:11px 14px; }
.fbw-title { font-size:14px; font-weight:700; }
.fbw-min { background:transparent; border:none; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 6px; }
.fbw-body { padding:14px; }
.fbw-page { font-size:12px; color:#5a6472; margin-bottom:8px; }
.fbw-text { width:100%; box-sizing:border-box; font-family:inherit; font-size:14px; color:#1b2430; border:1px solid #d8dde4; border-radius:9px; padding:10px; resize:vertical; min-height:88px; line-height:1.45; }
.fbw-actions { display:flex; align-items:center; gap:10px; margin-top:10px; }
.fbw-save { background:var(--blue); color:#fff; border:none; border-radius:9px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.fbw-save:disabled { opacity:.6; cursor:default; }
.fbw-status { font-size:12px; color:#5a6472; }
.fbw-full { display:inline-block; margin-top:12px; font-size:13px; color:var(--blue); font-weight:600; text-decoration:none; }
.fbw-full:hover { text-decoration:underline; }
@media print { .fbw { display:none; } }

/* Playgility logo files carry a white background; multiply melts it into any
   light surface so the mark never sits in a white box. */
img[src*="ldtpe-logo"], img[src*="ldtpe-mark"] { mix-blend-mode: multiply; }

/* ═══════════ Landing: Playgility (stats label + MTSS prevention model) ═══════════ */

.stats-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ats-teal-text);
  margin: 34px 0 14px;
}

.landing-mtss {
  position: relative;
  padding: 58px 38px 64px;
  background: var(--bg-page);
  border-top: 1px solid #EEF1EC;
  overflow: hidden;
}
.landing-mtss__inner { max-width: 1080px; margin: 0 auto; }
.landing-mtss__head { max-width: 640px; margin-bottom: 30px; }
.landing-mtss__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 31px;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -.2px;
}
.landing-mtss__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body-alt);
  font-weight: 500;
  margin: 0;
}
.mtss-model {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
.mtss-svgwrap { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.landing-mtss.is-in .mtss-svgwrap { opacity: 1; transform: none; }
.mtss-svg { width: 100%; height: auto; display: block; overflow: visible; }
.mtss-band { cursor: pointer; transition: filter .25s ease, opacity .25s ease; stroke: var(--bg-page); stroke-width: .7; }
.mtss-band--1 { fill: var(--blue); fill-opacity: .46; }
.mtss-band--1:not(.is-active) { fill-opacity: .68; }
.mtss-band--2 { fill: var(--gold); }
.mtss-band--3 { fill: var(--red); }
.mtss-band:hover { filter: brightness(1.06); }
.mtss-band:focus-visible { outline: none; stroke: var(--blue-darker); stroke-width: 1.4; }
.mtss-band.is-active { filter: none; }
.mtss-band--2:not(.is-active), .mtss-band--3:not(.is-active) { opacity: .82; }
.mtss-txt {
  /* SVG viewBox units (132x78), NOT screen px - exempt from the 12px UI floor */
  font-family: var(--font-display);
  fill: #FFFFFF;
  font-size: 7px;
  letter-spacing: .35px;
  text-anchor: middle;
  pointer-events: none;
}
.mtss-txt--1 { filter: drop-shadow(0 1px 1.5px rgba(16, 38, 58, .6)); }
.mtss-brand { filter: drop-shadow(0 .6px 1.2px rgba(16, 38, 58, .35)); pointer-events: none; }
.mtss-brand__pill { fill: #FFFFFF; }
.mtss-txt--2 { fill: #5C3F04; font-size: 4px; }
/* small enough that FEW stays inside the narrow red tip once the pyramid
   settles into the prevention shape (Tanner 8/17) */
.mtss-txt--3 { fill: #FFFFFF; font-size: 3px; letter-spacing: .2px; }
.mtss-side {
  /* SVG viewBox units - exempt from the 12px UI floor */
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 4.5px;
  text-anchor: end;
  pointer-events: none;
}
.mtss-side--1 { fill: var(--blue-dark); }
.mtss-side--2 { fill: var(--gold-text); }
.mtss-side--3 { fill: var(--red-deep); }
.landing-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.landing-proof__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.landing-proof__stat {
  font-family: var(--font-display);
  font-size: 27px;
  color: var(--blue-dark);
  line-height: 1;
}
.landing-proof__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--body-alt);
  font-weight: 600;
}
@media (max-width: 900px) {
  .landing-proof { grid-template-columns: 1fr; }
}

.mtss-svgtitle {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.4px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 10px;
}
.mtss-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--caption);
}
.mtss-panels { position: relative; min-height: 190px; }
.mtss-panel {
  position: absolute;
  inset: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 24px 44px -32px rgba(30,78,120,.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.mtss-panel.is-active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.mtss-panel__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.mtss-panel__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 8px;
}
.mtss-panel__body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--body-alt);
  font-weight: 500;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mtss-svgwrap, .mtss-panel { transition: none !important; }
  .landing-mtss .mtss-svgwrap { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .mtss-model { grid-template-columns: 1fr; gap: 28px; }
  .mtss-panels { min-height: 220px; }
}

/* ═══════════ Landing: Building Trusted Spaces band ═══════════ */
/* Distinct from the rest of the landing page on purpose: the deep-teal
   A Trusted Space® room, with a typographic Building Trusted Spaces lockup.
   Light-on-dark pairs here all measure 10:1 or better. */
.landing-bts {
  position: relative;
  padding: 62px 38px 66px;
  background:
    radial-gradient(900px 420px at 78% 18%, rgba(0,168,150,.28), transparent 62%),
    radial-gradient(700px 380px at 12% 92%, rgba(0,86,78,.35), transparent 60%),
    linear-gradient(165deg, #003930 0%, #00120E 58%, #000202 100%);
  overflow: hidden;
}
.landing-bts__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.landing-bts__eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: #6FDECC;
  margin-bottom: 12px;
}
.landing-bts h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 31px;
  color: #FFFFFF;
  margin: 0 0 10px;
  letter-spacing: -.2px;
  line-height: 1.08;
}
.landing-bts__lead {
  font-size: 16.5px;
  line-height: 1.55;
  color: #6FDECC;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 520px;
}
.landing-bts__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: #EAF7F4;
  font-weight: 500;
  margin: 0 0 18px;
  max-width: 560px;
}
.landing-bts__body strong { color: #FFFFFF; font-weight: 800; }
.landing-bts__features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 24px;
}
.landing-bts__feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: #EAF7F4;
  font-weight: 600;
  line-height: 1.45;
}
.landing-bts__feature-check {
  color: #6FDECC;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.45;
}
.landing-bts__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.landing-bts__note {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #9CCFC6;
}
.landing-bts__mark {
  justify-self: center;
  padding: 36px 40px;
  border: 1.5px solid rgba(111,222,204,.4);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 60px rgba(0,168,150,.12) inset;
}
.landing-bts__mark-ait {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  color: #6FDECC;
  margin-bottom: 12px;
}
.landing-bts__mark-name {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: .5px;
  color: #FFFFFF;
  text-transform: uppercase;
}
.landing-bts__mark-rule {
  margin-top: 18px;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: #6FDECC;
}
@media (max-width: 900px) {
  .landing-bts__inner { grid-template-columns: 1fr; gap: 30px; }
  .landing-bts__mark { order: -1; justify-self: start; padding: 26px 30px; }
  .landing-bts__mark-name { font-size: 36px; }
}

/* ══════════════════════════════════════════════
   ACTIVITIES: directory cards + printable sheet
   ══════════════════════════════════════════════ */
.act-card { display: flex; flex-direction: column; }
.act-card__photo {
  width: calc(100% + 36px);
  margin: -18px -18px 12px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
}
.act-card--locked .act-card__photo { filter: grayscale(.7); opacity: .7; }

/* ── Crop focus (Tanner 8/25): the 120px cover-crops on the activity cards and
   training rail were slicing subjects at the vertical center — legs instead of
   faces. Per-photo object-position keeps the important part of each photo in
   the band wherever the file is cropped. Full-aspect uses ignore this. ── */
img[src*="photo-hi-ya"]              { object-position: 50% 15%; }
img[src*="photo-helium-stick"]       { object-position: 50% 12%; }
img[src*="photo-foxtails-grab"]      { object-position: 50% 30%; }
img[src*="photo-huddle-race"]        { object-position: 50% 30%; }
img[src*="photo-beach-ball-party"]   { object-position: 50% 30%; }
img[src*="photo-catch-the-move"]     { object-position: 50% 35%; }
img[src*="photo-bear-salmon-mosquito"]{ object-position: 50% 35%; }
img[src*="photo-castle-ball"]        { object-position: 50% 40%; }
img[src*="photo-hula-hoop-pass"]     { object-position: 50% 40%; }
img[src*="photo-group-juggle-circle"]{ object-position: 50% 45%; }
img[src*="photo-intro-muscles"]      { object-position: 50% 25%; }
img[src*="photo-u-matter-relay"]{ object-position: 50% 35%; }
img[src*="photo-graduation"]         { object-position: 50% 45%; }
img[src*="photo-invention-factory"]  { object-position: 50% 22%; }
img[src*="photo-masterpiece"]        { object-position: 50% 40%; }
img[src*="photo-shoulders-touchdown"]{ object-position: 50% 28%; }
img[src*="photo-pick-me-popcorn"]    { object-position: 50% 22%; }
img[src*="photo-dash-derby"]         { object-position: 50% 40%; }
img[src*="photo-gator-frenzy"]       { object-position: 50% 45%; }
img[src*="photo-jousting-jedis"]     { object-position: 50% 40%; }
img[src*="photo-picture-pipeline"]   { object-position: 50% 45%; }
img[src*="photo-four-corner-frenzy"] { object-position: 50% 40%; }
img[src*="photo-minefield-crossing"] { object-position: 50% 45%; }
.act-card--locked .cur-card__name { color: var(--body-alt); }
.act-card__meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body-alt);
  margin-top: 4px;
}
.act-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}
.act-card__actions--locked { display: none; }
.act-card--locked .act-card__actions--open { display: none; }
.act-card--locked .act-card__actions--locked { display: flex; }
.act-card__btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--blue-dark);
  background: var(--panel-blue);
  padding: 8px 13px;
  border-radius: 9px;
}
.act-card__btn--primary { background: var(--blue); color: var(--white); }
/* Three actions per card (row 370): share the row evenly, and wrap rather than
   letting a label run outside its pill on a narrow card. */
.act-card__actions--three { gap: 6px; flex-wrap: wrap; }
.act-card__actions--three .act-card__btn {
  flex: 1 1 auto;
  min-width: max-content;
  padding: 8px 8px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
@media (max-width: 1100px) {
  .act-card__actions--three .act-card__btn { font-size: 11.5px; padding: 8px 6px; }
}
.act-card__btn--play { background: var(--panel-gold); color: var(--gold-text); }
.act-back { display: inline-block; margin-bottom: 10px; }
.act-card__locknote {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body-alt);
  flex-basis: 100%;
}
.act-sheet__section { margin-top: 22px; }
.act-sheet__text {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.62;
  margin-top: 8px;
}
.act-sheet__equip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.act-sheet__equip-item {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
}
.act-sheet__debrief {
  margin: 8px 0 0;
  padding-left: 22px;
}
.act-sheet__debrief li {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.55;
  padding: 3px 0;
}
.act-sheet__sub-label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--blue-dark);
  margin-top: 14px;
}
.act-sheet__mylist { margin: 6px 0 0; padding-left: 22px; }
.act-sheet__mylist li { font-size: 13.5px; color: var(--ink); font-weight: 600; line-height: 1.55; padding: 3px 0; }
.act-sheet__note {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
  background: var(--panel-lavender-light);
  border: 1px solid var(--border-lavender);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
}

/* ── Materials Library (rows 448/453/454): compact button on the directory + the order table ── */
.act-mat-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border-teal, #cde8e4);
  border-left: 4px solid var(--teal, #00B4A8);
  border-radius: 12px;
  padding: 10px 18px;
  margin: 0 0 26px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(20, 40, 80, .05);
  transition: box-shadow .15s, transform .15s;
}
.act-mat-banner:hover { box-shadow: 0 8px 22px rgba(20, 40, 80, .1); transform: translateY(-1px); }
.act-mat-banner__icon { font-size: 19px; }
.act-mat-banner__title { font-family: var(--font-heading); font-weight: 800; font-size: 15.5px; color: var(--ink); }
.act-mat-banner__go { font-weight: 800; font-size: 15px; color: var(--teal-text, #007a72); white-space: nowrap; }
/* ── My Plans PE calendar (row 452): month grids from the year plan ── */
.mpc {
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 4px 18px rgba(20, 40, 80, .05);
}
.mpc__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mpc__nav {
  width: 32px; height: 32px;
  border: 1px solid #d8dde4; background: #fff; border-radius: 9px;
  font-size: 16px; font-weight: 700; color: #2d3742; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mpc__nav:disabled { opacity: .35; cursor: default; }
.mpc__label { font-family: var(--font-heading); font-weight: 800; font-size: 16.5px; color: var(--ink); min-width: 148px; text-align: center; }
.mpc__legend { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #5a6472; font-weight: 600; }
.mpc__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mpc__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mpc__dow { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #7a828f; text-align: center; padding: 3px 0; text-transform: uppercase; }
.mpc__cell { min-height: 62px; border: 1px solid #eef1f5; border-radius: 9px; padding: 4px 5px; background: #fff; min-width: 0; }
.mpc__cell--pad { border-color: transparent; background: transparent; }
.mpc__cell--off { background: #F7F9FB; }
.mpc__cell--today { box-shadow: inset 0 0 0 2px var(--blue); }
.mpc__date { font-size: 11px; font-weight: 700; color: #7a828f; display: block; margin-bottom: 2px; }
.mpc__chip {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; line-height: 1.35;
  border-radius: 6px; padding: 2px 6px; margin-top: 2px;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mpc__chip--lesson { background: var(--blue); color: #fff; }
a.mpc__chip--lesson:hover { filter: brightness(1.12); }
.mpc__chip--soon { opacity: .55; }
.mpc__chip--pe { background: #E4F5F3; color: #04665F; }
a.mpc__chip--pe:hover { background: #CFEDE9; }
.mpc__chip--mut { background: #F1F3F6; color: #7a828f; font-weight: 600; }
.mpc__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
@media (max-width: 700px) {
  .mpc__cell { min-height: 42px; padding: 3px 3px; }
  .mpc__chip { font-size: 9px; padding: 1px 3px; gap: 3px; }
  .mpc__legend { margin-left: 0; width: 100%; }
}

.act-mat__yours {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.55;
  background: var(--panel-teal-light, #eefaf8);
  border: 1px solid var(--border-teal, #cde8e4);
  border-radius: 10px;
  padding: 11px 14px;
  margin-top: 10px;
}
.act-mat__scroll { overflow-x: auto; margin-top: 10px; }
.act-mat__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.act-mat__table th {
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--blue-dark);
  padding: 8px 8px 6px;
  border-bottom: 2px solid var(--border, #e6e9ee);
  white-space: nowrap;
}
.act-mat__table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border, #eef1f5);
  text-align: center;
  color: var(--ink);
  font-weight: 700;
  vertical-align: top;
}
.act-mat__table .act-mat__item-col { text-align: left; min-width: 220px; }
.act-mat__item { font-weight: 800; color: var(--ink); }
.act-mat__note { font-size: 12px; color: var(--body); font-weight: 400; line-height: 1.5; margin-top: 2px; }
.act-mat__used { font-size: 12px; color: var(--body); font-weight: 600; white-space: nowrap; }
.act-mat__table .act-mat__hl { background: var(--panel-teal-light, #eefaf8); }
.act-mat__table th.act-mat__hl { color: var(--teal-text, #007a72); }
@media print {
  .act-mat-banner { display: none; }
  .act-mat__scroll { overflow: visible; }
  .act-mat__table .act-mat__hl { background: #eefaf8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════
   BUILDING TRUSTED SPACES · DARK MODULE ROOMS
   Design handoff: each part b1..b8 plays in its own brand-tinted dark
   theater. The tint equals that part's Notice Face color on the hub
   timeline (menu color === room color === face color). Everything here
   is scoped to .trn-page--bts so the blue i-track and Year 1 player
   are untouched.
   ══════════════════════════════════════════════ */

/* Per-part color map (accent = brand color, glow = halo/label on dark) */
.trn-page--bts{--bts-ink:#EAF7F4;--bts-dim:#9CCFC6;--bts-body:#EAF7F4;--bts-btn-ink:#06110D;
  --bts-accent:#00A896;--bts-glow:#6FDECC;--bts-bg1:#003930;--bts-bg2:#00120E;--bts-bg3:#000202}
.trn-page--bts[data-bts-part="1"],
.trn-page--bts[data-bts-part="8"]{--bts-accent:#2988C9;--bts-glow:#83D0FF;--bts-bg1:#04314E;--bts-bg2:#000D1F;--bts-bg3:#000106;--bts-body:#DEEFF5;--bts-dim:#A8CCE3}
.trn-page--bts[data-bts-part="2"]{--bts-accent:#00A896;--bts-glow:#6FDECC;--bts-bg1:#003930;--bts-bg2:#00120E;--bts-bg3:#000202;--bts-body:#EAF7F4;--bts-dim:#9CCFC6}
.trn-page--bts[data-bts-part="3"]{--bts-accent:#782484;--bts-glow:#EBAEF3;--bts-bg1:#3E2042;--bts-bg2:#160418;--bts-bg3:#030004;--bts-body:#F2EAF6;--bts-dim:#C9B3D1;--bts-btn-ink:#fff}
.trn-page--bts[data-bts-part="4"]{--bts-accent:#5BBE54;--bts-glow:#9BDB95;--bts-bg1:#163614;--bts-bg2:#011100;--bts-bg3:#000200;--bts-body:#EAF7EA;--bts-dim:#ABCFA8}
.trn-page--bts[data-bts-part="5"]{--bts-accent:#F5822A;--bts-glow:#FFB280;--bts-bg1:#482205;--bts-bg2:#1C0500;--bts-bg3:#050000;--bts-body:#F6E9CE;--bts-dim:#E3C4A5}
.trn-page--bts[data-bts-part="6"]{--bts-accent:#F03C24;--bts-glow:#FFAB99;--bts-bg1:#4B1E17;--bts-bg2:#1D0301;--bts-bg3:#050000;--bts-body:#F6E2DD;--bts-dim:#E4B4AB}
.trn-page--bts[data-bts-part="7"]{--bts-accent:#E24E9C;--bts-glow:#FFA8D0;--bts-bg1:#471D32;--bts-bg2:#1B030F;--bts-bg3:#050002;--bts-body:#F7E6EF;--bts-dim:#E3B7CD}

/* Remap the shared tokens inside the room so every var() consumer
   (rules and inline styles alike) recolors to the dark theater. */
.trn-page--bts{
  --blue:var(--bts-accent);
  --blue-dark:var(--bts-glow);
  --blue-darker:var(--bts-glow);
  --panel-blue:color-mix(in srgb, var(--bts-glow) 16%, transparent);
  --panel-lavender:rgba(255,255,255,.08);
  --ink:#FFFFFF;
  --body:var(--bts-body);
  --body-alt:var(--bts-dim);
  --muted:var(--bts-dim);
  --muted-alt:var(--bts-dim);
  --caption:var(--bts-dim);
  --border:rgba(255,255,255,.14);
  --border-lavender:rgba(255,255,255,.14);
  --bg-sidebar:rgba(255,255,255,.05);
  --success:#2FBF71;
  --success-bg:rgba(46,191,113,.16);
  --success-text:#8FE3B0;
  --error:#FF8A76;
  --error-bg:rgba(240,80,60,.14);
  --red:#FF8A76;
  --gold:#FFC65C;
  --gold-dark:#FFD79A;
  --gold-light:rgba(251,176,24,.13);
  --trn-ring-track:rgba(255,255,255,.14);
  --trn-ring-inner:var(--bts-bg2);
  background:var(--bts-bg3);
}

/* Room background: brand-tinted gradient + one soft glow blob */
.trn-page--bts .trn-content{
  background:radial-gradient(120% 80% at 50% 0%, var(--bts-bg1) 0%, var(--bts-bg2) 55%, var(--bts-bg3) 100%);
}
.trn-page--bts .trn-blob-1{
  width:560px;height:560px;border-radius:50%;top:-220px;right:6%;
  background:radial-gradient(circle, color-mix(in srgb, var(--bts-glow) 15%, transparent) 0%, transparent 62%);
}
.trn-page--bts .trn-blob-2{display:none}

/* Top bar */
.trn-page--bts .trn-topbar{background:color-mix(in srgb, var(--bts-bg1) 55%, #000);border-bottom:1px solid rgba(255,255,255,.09)}
.trn-page--bts .trn-topbar__label{color:var(--bts-glow)}
.trn-page--bts .trn-topbar__title{color:#fff}
.trn-page--bts .trn-topbar__divider{background:rgba(255,255,255,.14)}
.trn-page--bts .progress-bar{background:rgba(255,255,255,.15)}

/* Left rail */
.trn-page--bts .trn-rail{background:rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.08)}
.trn-page--bts .trn-rail__module:hover{background:rgba(255,255,255,.06)}
.trn-page--bts .trn-rail__module--active,
.trn-page--bts .trn-rail__module--active:hover{background:color-mix(in srgb, var(--bts-glow) 14%, transparent)}
.trn-page--bts .trn-rail__dot{background:rgba(255,255,255,.12)}
.trn-page--bts .trn-rail__module--active .trn-rail__dot{background:var(--bts-accent);color:var(--bts-btn-ink)}
.trn-page--bts .trn-rail__module--done .trn-rail__dot{color:#fff}
.trn-page--bts .trn-rail__muscle{background:color-mix(in srgb, var(--bts-glow) 10%, transparent);border:1px solid color-mix(in srgb, var(--bts-glow) 22%, transparent);text-align:center}
.trn-page--bts .trn-rail__muscle-label{color:var(--bts-glow)}
.trn-page--bts .trn-rail__muscle-name{color:#fff}
.trn-rail__fella {
  width: 56px;
  height: 72px;
  margin: 2px auto 10px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(30,46,42,.18));
}
/* Pair/trio art needs a wider rail crop; the art stays grouped (gen2 handoff). */
.trn-rail__fella--pair { width: 84px; }
.trn-rail__fella--trio { width: 96px; }
/* Full-cluster sheets (Y2 L1) are wider than tall: let them span the card. */
.trn-rail__fella--cluster { width: 100%; height: 68px; }
.trn-screen__fella {
  /* leaps in beside the title, filling the blank right side instead of
     stacking above the photo and leaving a gap */
  position: absolute;
  top: 4px;
  right: 26px;
  height: 86px;
  width: 96px;
  margin: 0;
}
/* inline-SVG fellas (growing heart): the span is the frame, the art fills it */
.trn-rail__fella svg, .trn-screen__fella svg, .trn-complete__fella svg,
.trn-rail__fella img, .trn-screen__fella img, .trn-complete__fella img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.trn-complete__fella {
  /* pops up on the "Nice work" checkpoint, heart one module bigger */
  display: block;
  width: 92px;
  height: 96px;
  margin: 0 auto 12px;
}
@media (max-width: 600px) {
  .trn-screen__fella { height: 60px; width: 68px; right: 8px; }
  .trn-screen__title { padding-right: 72px; }
}

/* ── Fella motion, two gears (gen2 handoff spec) ──────────────────────────
   calm = rail: slow idle only. lively = overview / checkpoint / celebration:
   idle on the inner svg plus a periodic whole-figure accent on the wrapper
   (the approved SVGs expose no per-part groups, so accents approximate each
   lesson's brief with whole-figure moves). Motion pauses after ~8s without
   user activity (html.ldtpe-fella-still, set by the player); pausing holds
   the current pose, amplitudes are small enough that the hold reads as rest. */
[data-gear="calm"] { animation: fellaIdle 4.2s ease-in-out infinite; }
[data-gear="lively"] svg { animation: fellaIdle 4.2s ease-in-out infinite; }
@keyframes fellaIdle {
  0%, 100% { transform: translateY(1px) rotate(-.5deg); }
  50% { transform: translateY(-6px) rotate(.5deg); }
}
.fella-acc--leap[data-gear="lively"]   { animation: fellaAccLeap 7s ease-in-out infinite; }
.fella-acc--hop[data-gear="lively"]    { animation: fellaAccHop 7s ease-in-out infinite; }
.fella-acc--lean[data-gear="lively"]   { animation: fellaAccLean 7s ease-in-out infinite; }
.fella-acc--burst[data-gear="lively"]  { animation: fellaAccBurst 7s ease-in-out infinite; }
.fella-acc--wiggle[data-gear="lively"] { animation: fellaAccWiggle 7s ease-in-out infinite; }
.fella-acc--shine[data-gear="lively"]  { animation: fellaAccShine 7s ease-in-out infinite; }
.fella-acc--stride[data-gear="lively"] { animation: fellaAccStride 7s ease-in-out infinite; }
.fella-acc--glide[data-gear="lively"]  { animation: fellaAccGlide 8s ease-in-out infinite; }
.fella-acc--puff[data-gear="lively"]   { animation: fellaAccPuff 7s ease-in-out infinite; }
.fella-acc--tip[data-gear="lively"]    { animation: fellaAccTip 7s ease-in-out infinite; }
.fella-acc--nod[data-gear="lively"]    { animation: fellaAccNod 7s ease-in-out infinite; }
@keyframes fellaAccLeap   { 0%,14%,100% { transform: none; } 4% { transform: translateY(-15px); } 8% { transform: translateY(-17px); } 11% { transform: translateY(-14px); } }
@keyframes fellaAccHop    { 0%,14%,100% { transform: none; } 3% { transform: translateY(-10px); } 6% { transform: none; } 9% { transform: translateY(-7px); } 12% { transform: none; } }
@keyframes fellaAccLean   { 0%,16%,100% { transform: none; } 5%,11% { transform: rotate(-4deg) translateX(-3px); } }
@keyframes fellaAccBurst  { 0%,15%,100% { transform: none; } 4% { transform: scale(1.07) rotate(-3deg); } 9% { transform: scale(1.04) rotate(-2deg); } }
@keyframes fellaAccWiggle { 0%,16%,100% { transform: none; } 3% { transform: rotate(-3deg); } 6% { transform: rotate(3deg); } 9% { transform: rotate(-2deg); } 12% { transform: rotate(2deg); } }
@keyframes fellaAccShine  { 0%,16%,100% { filter: brightness(1); transform: none; } 5%,10% { filter: brightness(1.22); transform: translateY(-3px); } }
@keyframes fellaAccStride { 0%,16%,100% { transform: none; } 5% { transform: translateX(4px) translateY(-3px); } 10% { transform: translateX(5px); } }
@keyframes fellaAccGlide  { 0%,18%,100% { transform: none; } 5% { transform: translateX(9px) rotate(1.5deg); } 11% { transform: translateX(10px); } }
@keyframes fellaAccPuff   { 0%,15%,100% { transform: none; } 5%,10% { transform: scale(1.06); } }
@keyframes fellaAccTip    { 0%,15%,100% { transform: none; } 5%,9% { transform: rotate(5deg); } }
@keyframes fellaAccNod    { 0%,14%,100% { transform: none; } 3% { transform: rotate(3deg); } 6% { transform: none; } 9% { transform: rotate(2deg); } }
/* The skateboard fella (L15, the only glide) idles by rolling gently side to
   side instead of bobbing — a board rolls, it doesn't bounce (feedback 461) */
.fella-acc--glide[data-gear="calm"] { animation-name: fellaIdleRoll; }
.fella-acc--glide[data-gear="lively"] svg { animation-name: fellaIdleRoll; }
@keyframes fellaIdleRoll {
  0%, 100% { transform: translateX(-4px) rotate(-.6deg); }
  50% { transform: translateX(4px) rotate(.6deg); }
}
html.ldtpe-fella-still [data-gear],
html.ldtpe-fella-still [data-gear] svg { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trn-rail__fella, .trn-screen__fella, .trn-complete__fella,
  [data-gear], [data-gear] svg { animation: none !important; }
}
.trn-page--bts .trn-rail__face{width:92px;margin:2px auto 10px;filter:drop-shadow(0 0 20px color-mix(in srgb, var(--bts-glow) 55%, transparent));animation:btsFaceIn .55s cubic-bezier(.3,1.4,.5,1) both, btsFloat 5s ease-in-out .6s infinite}

/* Faces + motion */
@keyframes btsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes btsFaceIn{from{transform:translateY(26px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.trn-page--bts .trn-screen__face{width:72px;margin:0 0 14px;filter:drop-shadow(0 0 24px color-mix(in srgb, var(--bts-glow) 55%, transparent));animation:btsFaceIn .55s cubic-bezier(.3,1.4,.5,1) both, btsFloat 5.5s ease-in-out .6s infinite}

/* Module header */
.trn-page--bts .trn-module-eyebrow{color:var(--bts-glow)}
.trn-page--bts .trn-module-title{color:#fff}

/* Reading panel: long-form body copy sits in a translucent card */
.trn-page--bts .trn-card{
  background:rgba(255,255,255,.05);
  border:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bts-glow) 18%, transparent);
}
.trn-page--bts .trn-beat__label{color:var(--bts-glow)}
.trn-page--bts .trn-beat__heading{color:#fff;font-size:35px;line-height:1.12}
.trn-page--bts .trn-beat__body{color:var(--bts-body);font-size:16.5px;line-height:1.7}
.trn-page--bts .trn-beat__body strong{color:#fff}
.trn-page--bts .trn-beat__list > div{color:var(--bts-body);font-size:15px;line-height:1.6}
.trn-page--bts .trn-beat__list strong{color:#fff}
.trn-page--bts .trn-beat__bullet{color:var(--bts-glow)}
.trn-page--bts .trn-beat__muscleicon{filter:drop-shadow(0 0 18px color-mix(in srgb, var(--bts-glow) 45%, transparent))}
.trn-page--bts .trn-footnote{background:rgba(255,255,255,.05);border-left-color:var(--bts-accent);color:var(--bts-dim)}

/* Blocks pass: quote chips stay white cards on the dark room; NCA cards go glassy
   with the BTS teal/purple/green word art (the -bts pngs mount automatically) */
.trn-page--bts .trn-quotechip{background:#fff;border-color:transparent;color:#1E2E2A;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.trn-page--bts .trn-quotechip::after{background:#fff;border-color:transparent}
.trn-page--bts .trn-ncacard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.trn-page--bts .trn-ncacard--notice{border-top-color:#339990}
.trn-page--bts .trn-ncacard--choose{border-top-color:#8A4699}
.trn-page--bts .trn-ncacard--act{border-top-color:#309F5F}
.trn-page--bts .trn-ncacard__tag{color:var(--bts-dim)}
.trn-page--bts .trn-ncacard__tag strong{color:#fff}
.trn-page--bts .trn-ncacard__text{color:var(--bts-body)}
.trn-page--bts .trn-callout{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#fff}
.trn-page--bts .trn-callout__label{color:var(--bts-glow)}
.trn-page--bts .trn-beat__list--check .trn-beat__bullet{color:var(--success-text)}
.trn-page--bts .trn-stack__box{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.trn-page--bts .trn-stack__box:nth-child(3n+1),.trn-page--bts .trn-stack__box--notice{border-left-color:#339990}
.trn-page--bts .trn-stack__box:nth-child(3n+2),.trn-page--bts .trn-stack__box--choose{border-left-color:#8A4699}
.trn-page--bts .trn-stack__box:nth-child(3n+3),.trn-page--bts .trn-stack__box--act{border-left-color:#309F5F}
.trn-page--bts .trn-stack__title{color:#fff}
.trn-page--bts .trn-stack__text{color:var(--bts-body)}
.trn-page--bts .trn-footnote{border-color:var(--bts-accent);border-left-width:6px;background:rgba(255,255,255,.05);color:var(--bts-dim)}
.trn-page--bts .trn-footnote::before{background:var(--bts-accent);color:var(--bts-btn-ink)}

/* "Sounds like" quote card stays a white card with an accent pill */
.trn-page--bts .trn-quote{background:#fff;border:none;color:#1E2E2A;box-shadow:0 8px 26px rgba(0,0,0,.3)}
.trn-page--bts .trn-quote__label{background:var(--bts-accent);color:var(--bts-btn-ink)}
.trn-page--bts .trn-compare__box{background:rgba(255,255,255,.06);border:1.5px solid color-mix(in srgb, var(--bts-glow) 26%, transparent)}
.trn-page--bts .trn-compare__title{color:var(--bts-glow)}
.trn-page--bts .trn-compare__text{color:var(--bts-body)}

/* Film placeholder */
.trn-page--bts .trn-video--soon{background:rgba(255,255,255,.04);border:1.5px dashed color-mix(in srgb, var(--bts-glow) 45%, transparent)}
.trn-page--bts .trn-video--soon p{color:var(--bts-dim)}
.trn-page--bts .trn-soon-badge{background:var(--bts-accent);color:var(--bts-btn-ink)}

/* Beat player + dots */
.trn-page--bts .trn-player__btn{background:rgba(255,255,255,.12);color:var(--bts-dim)}
.trn-page--bts .trn-player__bar{background:rgba(255,255,255,.12)}
.trn-page--bts .trn-player__bar-fill{background:var(--bts-glow)}
.trn-page--bts .trn-player__counter{color:var(--bts-dim)}
.trn-page--bts .trn-dot{background:rgba(255,255,255,.18)}
.trn-page--bts .trn-dot--active{background:var(--bts-glow)}
.trn-page--bts .trn-dot--done{background:color-mix(in srgb, var(--bts-glow) 55%, transparent)}

/* Quick checks, review scenarios, and every chip-style interaction:
   dark chips with accent focus/selected states. */
.trn-page--bts .trn-qc-label{color:var(--bts-glow)}
.trn-page--bts .trn-qc-question{color:#fff;font-size:16.5px}
.trn-page--bts .trn-qc-option,
.trn-page--bts .trn-sort__item,
.trn-page--bts .trn-sort__btn,
.trn-page--bts .trn-order__item,
.trn-page--bts .trn-order__badge,
.trn-page--bts .trn-build__slot,
.trn-page--bts .trn-build__opt,
.trn-page--bts .trn-scan__item,
.trn-page--bts .trn-coach__item,
.trn-page--bts .trn-closing-q{
  background:rgba(255,255,255,.05);
  border-color:color-mix(in srgb, var(--bts-glow) 24%, transparent);
  color:var(--bts-body);
}
.trn-page--bts .trn-qc-option:hover,
.trn-page--bts .trn-sort__btn:hover,
.trn-page--bts .trn-order__item:hover,
.trn-page--bts .trn-build__opt:hover,
.trn-page--bts .trn-closing-q:hover{border-color:var(--bts-glow)}
.trn-page--bts .trn-qc-letter{background:rgba(255,255,255,.1);color:var(--bts-dim)}
.trn-page--bts .trn-qc--answered .trn-qc-option--correct,
.trn-page--bts .trn-sort__item--correct,
.trn-page--bts .trn-sort__btn--chosen,
.trn-page--bts .trn-order__item--locked,
.trn-page--bts .trn-build__slot--locked,
.trn-page--bts .trn-build__opt--chosen{border-color:#2FBF71;background:rgba(46,191,113,.14);color:#D9F6E5}
.trn-page--bts .trn-qc--answered .trn-qc-option--wrong,
.trn-page--bts .trn-build__opt--wrong{border-color:#FF8A76;background:rgba(240,80,60,.12)}
.trn-page--bts .trn-qc--answered .trn-qc-option--soft,
.trn-page--bts .trn-build__opt--soft{border-color:#FFC65C;background:rgba(251,176,24,.12)}
.trn-page--bts .trn-order__item--locked .trn-order__badge{border-color:#2FBF71;background:#2FBF71;color:#06110D}
.trn-page--bts .trn-feedback--ok{background:rgba(46,191,113,.14);color:#8FE3B0}
.trn-page--bts .trn-feedback--no{background:rgba(240,80,60,.14);color:#FFB0A3}
.trn-page--bts .trn-feedback--soft{background:rgba(251,176,24,.13);color:#FFD79A}
.trn-page--bts .trn-sort__text,
.trn-page--bts .trn-order__text{color:#fff}
/* Review sort card (b7 "Make the call"): the room remaps --ink to white but
   not --white, so the card stayed white with white text (row 385). */
.trn-page--bts .trn-sort-card,
.trn-page--bts .trn-sort-btn{
  background:rgba(255,255,255,.05);
  border-color:color-mix(in srgb, var(--bts-glow) 24%, transparent);
}
.trn-page--bts .trn-sort-btn:hover{border-color:var(--bts-glow)}
.trn-page--bts .trn-sort-btn--picked-right{border-color:#2FBF71;background:rgba(46,191,113,.14);color:#D9F6E5}
.trn-page--bts .trn-sort-btn--picked-wrong{border-color:#FF8A76;background:rgba(240,80,60,.12);color:#FFB0A3}
.trn-page--bts .trn-coach__tag--see{background:rgba(255,255,255,.1);color:var(--bts-dim)}
.trn-page--bts .trn-coach__tag--do{background:rgba(46,191,113,.16);color:#8FE3B0}
.trn-page--bts .trn-coach__text{color:var(--bts-body)}
.trn-page--bts .trn-branch__situation{color:#fff}
.trn-page--bts .trn-branch__step{border-left-color:color-mix(in srgb, var(--bts-glow) 30%, transparent)}
.trn-page--bts .trn-branch__step--done{border-left-color:#2FBF71}
.trn-page--bts .trn-review__intro-label{color:var(--bts-glow)}

/* Write-in (b8): dark textarea, accent focus ring */
.trn-page--bts .trn-textarea{background:rgba(255,255,255,.06);border-color:color-mix(in srgb, var(--bts-glow) 30%, transparent);color:var(--bts-body)}
.trn-page--bts .trn-textarea::placeholder{color:var(--bts-dim);opacity:.75}
.trn-page--bts .trn-textarea:focus{border-color:var(--bts-glow)}
.trn-page--bts .trn-writein__prompt{color:#fff}

/* Overview / between-module / completion screens */
.trn-page--bts .trn-screen__eyebrow{color:var(--bts-glow)}
.trn-page--bts .trn-screen__title{color:#fff}
.trn-page--bts .trn-screen__fact{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--bts-body)}
.trn-page--bts .trn-screen__objectives{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.trn-page--bts .trn-screen__obj-head{color:var(--bts-glow)}
.trn-page--bts .trn-screen__obj-list li::marker{color:var(--bts-glow)}
.trn-page--bts .trn-screen__skip{color:var(--bts-dim)}
.trn-page--bts .trn-complete{background:rgba(255,255,255,.05);border:none;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bts-glow) 18%, transparent)}
.trn-page--bts .trn-complete__check{background:color-mix(in srgb, var(--bts-accent) 30%, transparent);color:var(--bts-glow)}
.trn-page--bts .trn-complete__eyebrow{color:var(--bts-glow)}
.trn-page--bts .trn-complete__list{background:rgba(255,255,255,.04)}
.trn-page--bts .trn-complete__num--next{background:var(--bts-accent);color:var(--bts-btn-ink)}
.trn-page--bts .trn-obj-results{background:rgba(255,255,255,.05)}

/* The 8-part recap on the training completion screen: every part
   dotted in its own room color. */
/* light-page recap (the intro track's finish reuses the BTS recap markup, row 403) */
.trn-bts-recap{list-style:none;max-width:340px;margin:0 auto 22px;padding:10px 16px;border-radius:12px;background:var(--white);border:1px solid var(--border-lavender);text-align:left}
.trn-bts-recap li{display:flex;align-items:center;gap:11px;padding:6px 2px;font-size:14px;font-weight:700;color:var(--ink)}
.trn-bts-recap__dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%}
.trn-page--bts .trn-bts-recap{list-style:none;max-width:340px;margin:0 auto 22px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:none;text-align:left}
.trn-page--bts .trn-bts-recap li{display:flex;align-items:center;gap:11px;padding:6px 2px;font-size:14px;font-weight:700;color:var(--bts-body)}
.trn-page--bts .trn-bts-recap__dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px color-mix(in srgb, var(--bts-glow) 35%, transparent)}

/* Bottom nav + buttons */
.trn-page--bts .trn-nav{border-top-color:rgba(255,255,255,.12)}
.trn-page--bts .trn-nav__back{color:var(--bts-dim)}
.trn-page--bts .trn-nav__back:hover{color:#fff}
.trn-page--bts .btn-primary{background:var(--bts-accent);color:var(--bts-btn-ink)}
.trn-page--bts .btn-success{background:#2FBF71;color:#06110D}
.trn-page--bts .btn-outline{background:transparent;border-color:color-mix(in srgb, var(--bts-glow) 45%, transparent);color:#fff}

/* Keyboard focus is always visible in the dark rooms */
.trn-page--bts :focus-visible{outline:3px solid var(--bts-glow);outline-offset:2px}

/* The trauma content (part 3) must never strobe or lurch */
@media (prefers-reduced-motion: reduce){
  .trn-page--bts *, .trn-page--bts *::before, .trn-page--bts *::after{animation:none!important;transition:none!important}
}

/* Six SEL Muscles™ card grid (b5 Meet the muscles) */
.trn-musclegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.trn-musclegrid__card { background: rgba(127,127,127,.08); border: 1px solid rgba(127,127,127,.25); border-radius: 14px; padding: 16px 12px; text-align: center; }
.trn-musclegrid__card img { width: 56px; height: 56px; margin: 0 auto 8px; display: block; }
.trn-musclegrid__name { font-weight: 800; font-size: 14.5px; line-height: 1.3; }
.trn-musclegrid__sub { font-size: 12px; opacity: .75; margin-top: 3px; }
.trn-page--bts .trn-musclegrid__card img { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bts-glow) 40%, transparent)); }
.trn-page--bts .trn-musclegrid__name { color: #fff; }

/* Framework art beats (b.image): centered brand art, glow on BTS pages */
.trn-artimg { text-align: center; margin: 18px 0; }
.trn-artimg img { max-width: min(440px, 82%); height: auto; display: inline-block; }
/* Real photos (jpg) in a beat render wider than transparent art, no glow */
.trn-artimg img[src$=".jpg"] { max-width: min(640px, 100%); border-radius: 14px; }
.trn-page--bts .trn-artimg img[src$=".jpg"] { filter: none; }
/* Photo rail: the player lifts every .jpg out of the slide and parks it here,
   hanging off the card's right edge, so photos sit NEXT TO the module window
   instead of eating the box (Tanner 8/25). The rail fills the free column —
   as wide as the screen leaves (1120px = 248 rail + 38+38 content padding +
   760 card + 26 gap; the extra 20 absorbs the scrollbar). Photos keep their
   natural aspect and are NEVER cropped (Tanner 8/26): they fill the column
   width and run below the card if they're tall — the space under the card is
   free — shrinking with the window (width tracks 100vw; very tall portraits
   also cap near the viewport height, which pulls their width in to match).
   Below 1320px there is no side room and the photos simply hide (Tanner:
   never drop them under the slide). */
.trn-card { position: relative; }
.trn-aside {
  position: absolute;
  left: calc(100% + 26px);
  top: 0;
  width: min(400px, calc(100vw - 1120px - 20px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.trn-aside .trn-artimg { margin: 0; flex: none; max-width: 100%; }
.trn-aside .trn-artimg img,
.trn-aside .trn-artimg img[src$=".jpg"] {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 250px);
  object-fit: unset;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(31, 41, 26, .16);
}
@media (max-width: 1319px) {
  /* !important: the player writes display:'' inline when a beat has photos */
  .trn-aside { display: none !important; }
}
.trn-ctarow { text-align: center; margin: 22px 0 6px; }
.trn-cta { display: inline-block; background: #00A896; color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .02em; border-radius: 12px; padding: 13px 26px; text-decoration: none; box-shadow: 0 6px 18px rgba(0,90,80,.28); transition: background .15s ease, transform .15s ease; }
.trn-cta:hover { background: #00937f; transform: translateY(-1px); color: #fff; }
.trn-page--bts .trn-artimg img { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--bts-glow) 30%, transparent)); }
.trn-page--bts .trn-musclegrid__sub { color: rgba(255,255,255,.75); opacity: 1; }

/* Redirect branch: breathing room between scenes, and Try again reads clickable */
.trn-branch__step + .trn-branch__step { margin-top: 26px; }
.trn-branch__situation { line-height: 1.6; }
.trn-feedback__retry { cursor: pointer; text-decoration: underline; }

/* line-per-line compare content (b7 five-part apology) */
.trn-compare__line { font-size: 13.5px; line-height: 1.55; margin: 7px 0; color: var(--ink); }
.trn-page--bts .trn-compare__line { color: var(--bts-body); }

/* ── Easy read (accessibility) mode ──────────────────────────────────────
   Flipped by the "Aa Easy read" toggle on the Trusted Spaces hub and the
   b-module player. Larger type, taller line-height, stronger contrast, and
   the decorative layers turned down, for anyone who wants plainer pages. */
.ldtpe-easy-toggle{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2px solid #C2CEC7;border-radius:999px;padding:7px 14px;font-family:'Mulish',sans-serif;font-weight:800;font-size:13.5px;color:#22312A;cursor:pointer;line-height:1}
.ldtpe-easy-toggle__icon{font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:14px;line-height:1;background:#12302A;color:#fff;border-radius:6px;padding:3px 6px}
.ldtpe-easy-toggle:hover{border-color:#12302A}
.ldtpe-easy-toggle:focus-visible{outline:3px solid #2988C9;outline-offset:2px}
html.ldtpe-easy .ldtpe-easy-toggle{background:#12302A;color:#fff;border-color:#12302A}
html.ldtpe-easy .ldtpe-easy-toggle__icon{background:#fff;color:#12302A}
.bts-top__right{display:flex;align-items:center;gap:16px}

/* the training player: scale the whole reading column, then calm it down */
html.ldtpe-easy .trn-inner{zoom:1.18}
/* Games run at natural scale even in easy read: the page zoom breaks
   clientX-vs-rect pointer math inside the arenas (row 361, Huddle Race
   guide point drifting). 0.8475 cancels the 1.18 exactly. */
html.ldtpe-easy .trn-inner .trn-game{zoom:0.8475}
html.ldtpe-easy .trn-beat__body{font-size:18px;line-height:1.85}
html.ldtpe-easy .trn-beat__list > div{line-height:1.75}
html.ldtpe-easy .trn-qc-question{font-size:18px;line-height:1.7}
html.ldtpe-easy .trn-content .blob{display:none}
/* Games are the activity itself — easy read must never freeze them (beta rows 346/350-363:
   the kill below made every CSS-driven game look dead or teleporty and hid animate-in
   elements like cheer bubbles and instructions). The :not(.trn-game *) carve-out keeps
   the calm-page rule for all slide content while the mounted game keeps its motion. */
html.ldtpe-easy .trn-page *:not(.trn-game *),html.ldtpe-easy .trn-page *:not(.trn-game *)::before,html.ldtpe-easy .trn-page *:not(.trn-game *)::after{animation:none!important;transition:none!important}
html.ldtpe-easy .trn-rail{font-size:15px}

/* the Trusted Spaces hub */
html.ldtpe-easy .bts-wrap{zoom:1.12}
html.ldtpe-easy .bts-head__lead{font-size:18.5px;line-height:1.8;color:#25352F}
html.ldtpe-easy .bts-head__antidote{font-style:normal}
html.ldtpe-easy .bts-head__face{display:none}
html.ldtpe-easy .bts-tl__sub{font-size:15px;color:#25352F}
html.ldtpe-easy .bts-tl__meta{font-size:13.5px}
html.ldtpe-easy .bts-bonus__blurb{font-size:15px;line-height:1.7;color:#25352F}
html.ldtpe-easy .bts-hub *,html.ldtpe-easy .bts-hub *::before,html.ldtpe-easy .bts-hub *::after{animation:none!important;transition:none!important}

/* Easy read = full accessibility mode (Tanner 8/9, refines beta rows 287/288):
   the BTS dark-box effect goes away entirely. Flat white background, black text,
   monochrome accents, AA contrast throughout. Normal (non-easy) mode untouched.
   The html.ldtpe-easy prefix outranks the per-part variable rules. */
html.ldtpe-easy .trn-page--bts{
  --bts-accent:#111111;
  --bts-glow:#111111;
  --bts-btn-ink:#FFFFFF;
  --bts-body:#111111;
  --bts-dim:#333333;
  --bts-bg1:#FFFFFF;
  --bts-bg2:#FFFFFF;
  --bts-bg3:#FFFFFF;
  --ink:#000000;
  --panel-lavender:rgba(0,0,0,.05);
  --border:rgba(0,0,0,.25);
  --border-lavender:rgba(0,0,0,.25);
  --bg-sidebar:rgba(0,0,0,.03);
  --success:#1F7A4A;
  --success-bg:#EAF5EE;
  --success-text:#175C38;
  --error:#B02A20;
  --error-bg:#FBEBE9;
  --red:#B02A20;
  --gold:#7A5409;
  --gold-dark:#5E410A;
  --gold-light:rgba(0,0,0,.05);
  --trn-ring-track:rgba(0,0,0,.15);
  --trn-ring-inner:#FFFFFF;
  background:#FFFFFF;
}
html.ldtpe-easy .trn-page--bts .trn-content{background:#FFFFFF}
html.ldtpe-easy .trn-page--bts .trn-topbar{background:#fff;border-bottom:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-topbar__title{color:#000}
html.ldtpe-easy .trn-page--bts .trn-topbar__label{color:#111}
html.ldtpe-easy .trn-page--bts .trn-topbar__divider{background:rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .progress-bar{background:rgba(0,0,0,.15)}
html.ldtpe-easy .trn-page--bts .trn-rail{background:#fff;border-right:1.5px solid rgba(0,0,0,.2)}
html.ldtpe-easy .trn-page--bts .trn-rail__module:hover{background:rgba(0,0,0,.05)}
html.ldtpe-easy .trn-page--bts .trn-rail__module--active,
html.ldtpe-easy .trn-page--bts .trn-rail__module--active:hover{background:rgba(0,0,0,.08)}
html.ldtpe-easy .trn-page--bts .trn-rail__dot{background:rgba(0,0,0,.1);color:#111}
html.ldtpe-easy .trn-page--bts .trn-rail__muscle{background:#fff;border:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-rail__muscle-label{color:#111}
html.ldtpe-easy .trn-page--bts .trn-rail__muscle-name{color:#000}
html.ldtpe-easy .trn-page--bts .trn-card{background:#fff;border:1.5px solid rgba(0,0,0,.25);box-shadow:none}
html.ldtpe-easy .trn-page--bts .trn-beat__label{color:#111}
html.ldtpe-easy .trn-page--bts .trn-module-title{color:#000}
html.ldtpe-easy .trn-page--bts .trn-beat__heading{color:#000}
html.ldtpe-easy .trn-page--bts .trn-beat__body,
html.ldtpe-easy .trn-page--bts .trn-beat__list{color:#111}
html.ldtpe-easy .trn-page--bts .trn-beat__body strong,
html.ldtpe-easy .trn-page--bts .trn-beat__list strong,
html.ldtpe-easy .trn-page--bts .trn-ncacard__tag strong{color:#000}
html.ldtpe-easy .trn-page--bts .trn-footnote{background:#fff;border:1.5px solid rgba(0,0,0,.25);border-left:6px solid #111;color:#111}
html.ldtpe-easy .trn-page--bts .trn-pill{background:#fff;border:1.5px solid rgba(0,0,0,.3);color:#111}
html.ldtpe-easy .trn-page--bts .trn-jot__input{background:#fff;border-color:rgba(0,0,0,.4);color:#000}
html.ldtpe-easy .trn-page--bts .trn-quotechip,
html.ldtpe-easy .trn-page--bts .trn-quote{background:#fff;box-shadow:none;border:1.5px solid rgba(0,0,0,.25);color:#111}
html.ldtpe-easy .trn-page--bts .trn-ncacard{background:#fff;border:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-callout{background:#fff;border:1.5px solid rgba(0,0,0,.3);color:#000}
html.ldtpe-easy .trn-page--bts .trn-stack__box{background:#fff;border:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-stack__title{color:#000}
html.ldtpe-easy .trn-page--bts .trn-compare__box{background:#fff;border:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-video--soon{background:#fff;border:1.5px dashed rgba(0,0,0,.35)}
html.ldtpe-easy .trn-page--bts .trn-player__btn{background:rgba(0,0,0,.08);color:#111}
html.ldtpe-easy .trn-page--bts .trn-player__bar{background:rgba(0,0,0,.15)}
html.ldtpe-easy .trn-page--bts .trn-dot{background:rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-qc-question{color:#000}
html.ldtpe-easy .trn-page--bts .trn-qc-letter{background:rgba(0,0,0,.08);color:#111}
html.ldtpe-easy .trn-page--bts .trn-order__text{color:#000}
html.ldtpe-easy .trn-page--bts .trn-coach__tag--see{background:rgba(0,0,0,.08);color:#111}
html.ldtpe-easy .trn-page--bts .trn-branch__situation{color:#000}
html.ldtpe-easy .trn-page--bts .trn-textarea{background:#fff;border-color:rgba(0,0,0,.4);color:#000}
html.ldtpe-easy .trn-page--bts .trn-writein__prompt{color:#000}
html.ldtpe-easy .trn-page--bts .trn-screen__title{color:#000}
html.ldtpe-easy .trn-page--bts .trn-screen__fact{background:#fff;border:1.5px solid rgba(0,0,0,.25);color:#111}
html.ldtpe-easy .trn-page--bts .trn-screen__objectives{background:#fff;border:1.5px solid rgba(0,0,0,.25)}
html.ldtpe-easy .trn-page--bts .trn-complete{background:#fff;border:1.5px solid rgba(0,0,0,.25);box-shadow:none}
html.ldtpe-easy .trn-page--bts .trn-complete__list{background:#fff;border:1.5px solid rgba(0,0,0,.2)}
html.ldtpe-easy .trn-page--bts .trn-obj-results{background:#fff;border:1.5px solid rgba(0,0,0,.2)}
html.ldtpe-easy .trn-page--bts .trn-bts-recap{background:#fff;border:1.5px solid rgba(0,0,0,.2)}
html.ldtpe-easy .trn-page--bts .trn-nav{border-top-color:rgba(0,0,0,.2)}
html.ldtpe-easy .trn-page--bts .trn-nav__back{color:#333}
html.ldtpe-easy .trn-page--bts .trn-nav__back:hover{color:#000}
html.ldtpe-easy .trn-page--bts .btn-outline{background:#fff;border-color:rgba(0,0,0,.5);color:#000}
html.ldtpe-easy .trn-page--bts .trn-musclegrid__name{color:#000}
html.ldtpe-easy .trn-page--bts .trn-musclegrid__sub{color:#333}
/* Quiz/exercise state colors (8/10, Tanner's screenshot): the dark-room state
   styles hardcode pale mint/peach text that vanishes on the easy-read white —
   every answered/locked/feedback state gets AA dark-on-light here. */
html.ldtpe-easy .trn-page--bts .trn-qc--answered .trn-qc-option--correct,
html.ldtpe-easy .trn-page--bts .trn-sort__item--correct,
html.ldtpe-easy .trn-page--bts .trn-sort__btn--chosen,
html.ldtpe-easy .trn-page--bts .trn-order__item--locked,
html.ldtpe-easy .trn-page--bts .trn-build__slot--locked,
html.ldtpe-easy .trn-page--bts .trn-build__opt--chosen{border-color:#1F7A4A;background:#EAF5EE;color:#113B26}
html.ldtpe-easy .trn-page--bts .trn-qc--answered .trn-qc-option--wrong,
html.ldtpe-easy .trn-page--bts .trn-build__opt--wrong{border-color:#B02A20;background:#FBEBE9;color:#111}
html.ldtpe-easy .trn-page--bts .trn-qc--answered .trn-qc-option--soft,
html.ldtpe-easy .trn-page--bts .trn-build__opt--soft{border-color:#7A5409;background:#F7F0E0;color:#111}
html.ldtpe-easy .trn-page--bts .trn-feedback--ok{background:#EAF5EE;color:#175C38}
html.ldtpe-easy .trn-page--bts .trn-feedback--no{background:#FBEBE9;color:#B02A20}
html.ldtpe-easy .trn-page--bts .trn-feedback--soft{background:#F7F0E0;color:#6E4E06}
html.ldtpe-easy .trn-page--bts .trn-sort__text{color:#000}
html.ldtpe-easy .trn-page--bts .trn-sort-card,
html.ldtpe-easy .trn-page--bts .trn-sort-btn{background:#fff;border-color:rgba(0,0,0,.35)}
html.ldtpe-easy .trn-page--bts .trn-sort-btn--picked-right{border-color:#1F7A4A;background:#EAF5EE;color:#113B26}
html.ldtpe-easy .trn-page--bts .trn-sort-btn--picked-wrong{border-color:#B02A20;background:#FBEBE9;color:#111}
html.ldtpe-easy .trn-page--bts .trn-coach__tag--do{background:#EAF5EE;color:#175C38}
html.ldtpe-easy .trn-page--bts .trn-order__item--locked .trn-order__badge{border-color:#1F7A4A;background:#1F7A4A;color:#fff}
/* MTSS pyramid side labels: pastel fills on the white room */
html.ldtpe-easy .trn-page--bts .trn-mtss .mtss-side--1{fill:#1E4E78}
html.ldtpe-easy .trn-page--bts .trn-mtss .mtss-side--2{fill:#6E4E06}
html.ldtpe-easy .trn-page--bts .trn-mtss .mtss-side--3{fill:#B02A20}
/* The dark-room glow (drop-shadow keyed to --bts-glow) turns into a gray smudge
   behind transparent art once easy read flips the glow to #111 on white. */
html.ldtpe-easy .trn-page--bts .trn-rail__face,
html.ldtpe-easy .trn-page--bts .trn-screen__face,
html.ldtpe-easy .trn-page--bts .trn-beat__muscleicon,
html.ldtpe-easy .trn-page--bts .trn-musclegrid__card img,
html.ldtpe-easy .trn-page--bts .trn-artimg img{filter:none}

/* Easy read AA floors for BOTH players: darken every sub-4.5:1 text token and
   raise the smallest recurring text sizes (the trn-inner zoom multiplies these). */
html.ldtpe-easy .trn-page{
  --ink:#000000;
  --body:#1A252C;
  --body-alt:#333D38;
  --muted:#3D4A44;
  --muted-alt:#453E60;
  --caption:#3D4A44;
  --gold-text:#6E4E06;
  --red-text:#B02A20;
  --teal-text:#00655D;
}
html.ldtpe-easy .trn-materials{font-size:14px}
html.ldtpe-easy .trn-module-eyebrow{color:#111111;font-size:14px}
html.ldtpe-easy .trn-beat__label{font-size:13.5px}
html.ldtpe-easy .trn-topbar__label{font-size:13px}
html.ldtpe-easy .trn-footnote{font-size:15px;line-height:1.75}
html.ldtpe-easy .trn-materials-box__text{font-size:15px}

/* Intro-overlay flag row shared by the activity games (the L11-15 look, extended
   to lessons 1-10 with the 8/12 board pass) */
.trn-game .trn-gflags{display:flex;gap:6px;margin-bottom:2px;justify-content:center}
.trn-game .trn-gflags i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top-width:16px;border-top-style:solid}

/* ══════════════════════════════════════════════
   PRINTABLE DOCUMENTS · 8/20 REDESIGN (pp-)
   Source of truth: design_handoff_onesheets mocks.
   Three print documents rendered by plan-print.js into .plan-paper-stack:
   Lesson Plan (up to 4 pages), Family One Sheet, School Team One Sheet.
   Every .pp is one fixed US Letter sheet (816×1056 @96dpi).
   Framework coding is canonical: Notice = blue, Choose = red, Act = gold.
   Mid-tone brand fills (#2988C9/#F03C24) never carry text; white text rides
   the darker AA pair (#1E6BA3/#C0392B). Do not use Anton; do not widen
   letterspacing on small labels (both rejected for legibility).
   ══════════════════════════════════════════════ */
.plan-mat { overflow-x: auto; }
.plan-paper-stack { width: 816px; }

.pp {
  width: 816px;
  height: 1056px;
  background: #fff;
  border: 1px solid #E2E6DD;
  box-shadow: 0 14px 40px -20px rgba(36,36,36,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Mulish', -apple-system, sans-serif;
  color: #3C4A55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pp *, .pp *::before, .pp *::after { box-sizing: border-box; }
/* Never let flex silently compress a block to fit the sheet - overflow must
   stay honest so the fit pass can step the page down a compact level. */
.pp-body > *, .pp-flow > *, .pp-step__main > *, .pp-starters > *, .pp-mats > *,
.pp-remember > *, .pp-standards__list > *, .pp-role__list > * { flex-shrink: 0; }
.pp p { margin: 0; }

/* Decorative brand blob (purely decorative) */
.pp-blob {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 46% 54% 62% 38% / 54% 42% 58% 46%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.16), rgba(255,255,255,0));
  top: -130px; right: -60px;
  pointer-events: none;
}
.pp-blob--act { width: 230px; height: 230px; top: auto; bottom: -120px; right: -50px; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.pp-blob--teal { width: 180px; height: 180px; top: auto; bottom: -90px; right: -40px; background: radial-gradient(circle at 40% 40%, rgba(0,180,168,.13), rgba(0,180,168,0)); }

/* Masthead (page 1 of every document) */
.pp-mast { background: #1E6BA3; padding: 28px 46px 24px; position: relative; overflow: hidden; flex-shrink: 0; }
.pp-mast > *:not(.pp-blob) { position: relative; }
.pp-mast__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pp-cobrand { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 9px; padding: 7px 12px; flex-shrink: 0; }
.pp-cobrand__logo { height: 26px; width: auto; display: block; }
.pp-cobrand__div { width: 1px; height: 24px; background: #D8DEDA; flex-shrink: 0; }
.pp-cobrand__dl { height: 26px; max-width: 140px; width: auto; object-fit: contain; display: block; }
.pp-pill {
  font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px;
  letter-spacing: .45px; text-transform: uppercase; color: #20323F; background: #FBB018;
  padding: 7px 14px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
}
.pp-eyebrow { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .55px; color: #D3E9F9; margin-top: 20px; }
.pp-h1 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 52px; line-height: 1.02; letter-spacing: -.5px; color: #fff; margin: 7px 0 0; }
.pp-h1:has(.pp-h1__act) { font-size: 48px; line-height: 1.03; }
.pp-h1__act { color: #FBB018; }
.pp-sub { margin: 11px 0 0; font-size: 14.5px; font-weight: 600; color: #DCEDFA; }
.pp-sub b { color: #fff; font-weight: 800; }
.pp-for { display: flex; align-items: center; gap: 9px; margin-top: 13px; }
.pp-for__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; color: #D3E9F9; }
.pp-for__pill { font-size: 13.5px; font-weight: 800; color: #20323F; background: #fff; padding: 6px 13px; border-radius: 999px; }
.pp-strip { height: 6px; flex-shrink: 0; background: linear-gradient(90deg, #2988C9 0 33.34%, #F03C24 33.34% 66.67%, #FBB018 66.67%); }

/* Running head (plan pages 2+) */
.pp-run { padding: 30px 46px 0; flex-shrink: 0; }
.pp-run__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid #2988C9; }
.pp-run__logo { height: 21px; width: auto; display: block; }
.pp-run__crumb { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; color: #68746B; text-transform: uppercase; text-align: right; }

/* Body + footer */
.pp-body { padding: 24px 46px 0; display: flex; flex-direction: column; gap: 19px; flex: 1; min-height: 0; }
.pp-body--team { padding-top: 17px; gap: 12px; }
.pp-body--plan { padding-top: 20px; gap: 15px; }
.pp-body--flow { padding-top: 22px; gap: 18px; }
.pp-body--walk, .pp-body--close { padding-top: 20px; gap: 15px; }
.pp-foot { padding: 15px 46px 20px; flex-shrink: 0; margin-top: auto; }
.pp-foot__rule { height: 1px; background: #E8ECE6; margin-bottom: 10px; }
.pp-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; font-weight: 700; color: #5C6760; }
.pp-foot__meta { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; letter-spacing: .35px; color: #68746B; text-transform: uppercase; text-align: right; }

/* Section label */
.pp-sec { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.pp-sec__dot { width: 5px; height: 17px; border-radius: 3px; flex-shrink: 0; }
.pp-sec__dot--blue { background: #2988C9; }
.pp-sec__dot--teal { background: #00B4A8; }
.pp-sec__dot--gold { background: #FBB018; }
.pp-sec__dot--red  { background: #F03C24; }
.pp-sec__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .45px; }
.pp-sec__lbl--blue { color: #1E6BA3; }
.pp-sec__lbl--teal { color: #00756D; }
.pp-sec__lbl--gold { color: #8A6008; }
.pp-sec__lbl--red  { color: #C0392B; }
.pp-sec__right { margin-left: auto; font-size: 12px; font-weight: 800; color: #5C6760; }

/* Body copy */
.pp-p { font-size: 15px; line-height: 1.58; color: #3C4A55; }
.pp-mb12 { margin-bottom: 12px !important; }

/* Notice / Choose / Act trio */
.pp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.pp-card { border-radius: 13px; padding: 13px 14px 14px; border: 1px solid; border-top-width: 4px; }
.pp-trio--plan .pp-card { padding: 12px 14px 13px; }
.pp-card--n { background: #E4F0FC; border-color: #CFE4F6; border-top-color: #2988C9; }
.pp-card--c { background: #FDE7E2; border-color: #F7CFC6; border-top-color: #F03C24; }
.pp-card--a { background: #FDF2DA; border-color: #F2DFAF; border-top-color: #FBB018; }
.pp-card__word { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .25px; line-height: 1; }
.pp-trio--plan .pp-card__word { font-size: 18px; }
.pp-card--n .pp-card__word { color: #1E6BA3; }
.pp-card--c .pp-card__word { color: #C0392B; }
.pp-card--a .pp-card__word { color: #8A6008; }
.pp-card__desc { font-size: 12.8px; line-height: 1.45; color: #3C4A55; margin-top: 6px; font-weight: 500; }
.pp-trio--plan .pp-card__desc { font-size: 12.5px; }

/* "Another way to think about it" chip row */
.pp-chips { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.pp-chips__lead { font-size: 12.5px; font-weight: 700; color: #5C6760; }
.pp-tag { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .35px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid; }
.pp-tag--n { color: #1E6BA3; background: #E4F0FC; border-color: #CFE4F6; }
.pp-tag--c { color: #C0392B; background: #FDE7E2; border-color: #F7CFC6; }
.pp-tag--a { color: #8A6008; background: #FDF2DA; border-color: #F2DFAF; }

/* Labeled panel head (gold/teal panels) */
.pp-panelhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.pp-panelhead__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .45px; color: #5C6760; }
.pp-panelhead__lbl--gold { color: #8A6008; }
.pp-panelhead__lbl--teal { color: #00756D; }
.pp-panelhead__rule { height: 1px; flex: 1; background: #E8ECE6; }
.pp-panelhead__rule--gold { background: #F2DFAF; }
.pp-panelhead__rule--teal { background: #BEEAE5; }

/* Family sheet: Try this tonight / starters / take-home challenge */
.pp-goldpanel { background: #FDF2DA; border: 1px solid #F2DFAF; border-radius: 15px; padding: 17px 19px; }
.pp-goldpanel__txt { font-size: 15px; line-height: 1.55; color: #3C4A55; font-weight: 600; }
.pp-starters { display: flex; flex-direction: column; gap: 9px; }
.pp-starter { display: flex; align-items: center; gap: 13px; background: #F5F9FD; border: 1px solid #DFEBF6; border-radius: 12px; padding: 12px 15px; }
.pp-starter__num { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 15px; color: #fff; background: #1E6BA3; width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pp-starter__txt { font-size: 14.8px; line-height: 1.45; color: #242424; font-weight: 600; }
.pp-challenge { background: #E0F7F4; border: 1.5px dashed #7FCFC7; border-radius: 15px; padding: 18px 20px; position: relative; overflow: hidden; }
.pp-challenge > *:not(.pp-blob) { position: relative; }
.pp-challenge__txt { font-size: 15.5px; line-height: 1.55; color: #20423F; font-weight: 600; }

/* School Team sheet: role panels */
.pp-role { border-radius: 14px; padding: 16px 19px; border: 1px solid; border-left-width: 5px; }
.pp-role--blue { background: #F5F9FD; border-color: #DFEBF6; border-left-color: #2988C9; }
.pp-role--teal { background: #EFFAF8; border-color: #CFEEEA; border-left-color: #00B4A8; }
.pp-role__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.pp-role__title { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .2px; color: #242424; line-height: 1; }
.pp-role__badge { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .45px; color: #fff; padding: 5px 11px; border-radius: 999px; flex-shrink: 0; }
.pp-role__badge--blue { background: #1E6BA3; }
.pp-role__badge--teal { background: #00756D; }
.pp-role__lead { margin: 0 0 11px; font-size: 14.5px; line-height: 1.55; color: #3C4A55; }
.pp-role__try { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; margin-bottom: 8px; }
.pp-role__try--blue { color: #1B5C8D; }
.pp-role__try--teal { color: #00756D; }
.pp-role__list { display: flex; flex-direction: column; gap: 8px; }
.pp-arrow { display: flex; gap: 10px; align-items: flex-start; }
.pp-arrow__glyph { font-weight: 800; font-size: 14.5px; line-height: 1.5; flex-shrink: 0; }
.pp-arrow--blue .pp-arrow__glyph { color: #1E6BA3; }
.pp-arrow--teal .pp-arrow__glyph { color: #00756D; }
.pp-arrow__txt { font-size: 14.3px; line-height: 1.5; color: #242424; }

/* Plan p1: class meta strip, objective, muscle card, standards */
.pp-meta { display: grid; gap: 1px; background: #E8ECE6; border: 1px solid #E8ECE6; border-radius: 12px; overflow: hidden; }
.pp-meta__cell { background: #FAFBF9; padding: 11px 13px; min-width: 0; }
.pp-meta__lbl, .pp-microlbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .45px; color: #68746B; }
.pp-meta__val { font-size: 13.5px; font-weight: 800; color: #242424; margin-top: 3px; }
.pp-obj { font-size: 15.5px; line-height: 1.55; color: #242424; font-weight: 600; }
.pp-obj strong { color: #1E6BA3; font-weight: 800; }
.pp-muscle { background: #F5F9FD; border: 1px solid #DFEBF6; border-radius: 13px; padding: 15px 18px; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.pp-muscle__main { flex-shrink: 0; }
.pp-muscle .pp-microlbl { display: block; margin-bottom: 6px; }
.pp-muscle__name { font-size: 16px; font-weight: 800; color: #1E6BA3; line-height: 1.3; }
.pp-muscle__dev { flex: 1; min-width: 210px; }
.pp-muscle__devtxt { font-size: 13.5px; color: #434E47; font-weight: 600; line-height: 1.4; }
.pp-standards { background: #FAFBF9; border: 1px solid #E8ECE6; border-radius: 14px; padding: 16px 18px; }
.pp-standards .pp-panelhead { margin-bottom: 11px; }
.pp-standards .pp-panelhead__lbl { font-size: 12.5px; }
.pp-standards__list { display: flex; flex-direction: column; gap: 9px; }
.pp-std { display: flex; gap: 12px; align-items: baseline; }
.pp-std__badge { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .35px; color: #fff; padding: 4px 9px; border-radius: 6px; flex-shrink: 0; min-width: 62px; text-align: center; }
.pp-std__badge--casel { background: #00756D; }
.pp-std__badge--sel { background: #1E6BA3; }
.pp-std__badge--cape { background: #8A6008; }
.pp-std__txt { font-size: 13.3px; line-height: 1.5; color: #3C4A55; }
.pp-std__txt b { font-weight: 800; color: #242424; }
.pp-std__all { color: #5C6760; font-weight: 700; }

/* Plan p2: lesson flow timeline */
.pp-flowhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pp-flowhead .pp-sec { margin-bottom: 0; }
.pp-flowhead__note { font-size: 12px; font-weight: 800; color: #5C6760; flex-shrink: 0; }
.pp-flow { display: flex; flex-direction: column; gap: 11px; }
.pp-step { display: flex; gap: 14px; align-items: stretch; }
.pp-step__gut { flex-shrink: 0; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pp-time { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .2px; padding: 5px 0; border-radius: 7px; width: 100%; text-align: center; }
.pp-time--blue { color: #fff; background: #1E6BA3; }
.pp-time--red  { color: #fff; background: #C0392B; }
.pp-time--gold { color: #242424; background: #FBB018; }
.pp-conn { flex: 1; width: 2px; }
.pp-conn--blue { background: #E4F0FC; }
.pp-conn--red  { background: #FDE7E2; }
.pp-conn--gold { background: #FDF2DA; }
.pp-step__main { flex: 1; padding-bottom: 4px; min-width: 0; }
.pp-step__title { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 19px; color: #242424; line-height: 1.15; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pp-step__desc { font-size: 14px; line-height: 1.5; color: #3C4A55; margin-top: 4px; }
.pp-step__desc em { font-style: italic; font-weight: 700; color: #242424; }
.pp-core { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .45px; color: #fff; background: #C0392B; padding: 3px 9px; border-radius: 999px; }
.pp-inset { background: #F5F9FD; border: 1px solid #DFEBF6; border-radius: 11px; padding: 11px 13px; margin-top: 9px; }
.pp-inset__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; color: #1E6BA3; }
.pp-inset__txt { font-size: 13.3px; line-height: 1.5; color: #3C4A55; margin-top: 5px; }
.pp-note { background: #FDF2DA; border-left: 4px solid #FBB018; border-radius: 0 11px 11px 0; padding: 11px 14px; margin-top: 9px; }
.pp-note__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; color: #8A6008; }
.pp-note__txt { font-size: 13.5px; line-height: 1.5; color: #5A4409; margin-top: 5px; font-style: italic; font-weight: 500; }
.pp-activity { background: #1E6BA3; border-radius: 15px; padding: 19px 21px; position: relative; overflow: hidden; margin-top: 2px; }
.pp-activity > *:not(.pp-blob) { position: relative; }
.pp-activity__title { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 24px; color: #fff; line-height: 1; margin-bottom: 8px; }
.pp-activity__desc { font-size: 14.5px; line-height: 1.55; color: #DCEDFA; }

/* Plan p3: run the activity, at full depth */
.pp-walk { border-radius: 13px; }
.pp-walk--blue, .pp-walk--wash { background: #F5F9FD; border: 1px solid #DFEBF6; padding: 14px 17px; }
.pp-walk--gold { background: #FDF2DA; border-left: 4px solid #FBB018; border-radius: 0 13px 13px 0; padding: 13px 16px; }
.pp-walk--teal { background: #EFFAF8; border: 1px solid #CFEEEA; padding: 14px 17px; }
.pp-walk__lbl { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: .45px; display: block; margin-bottom: 6px; }
.pp-walk__lbl--blue { color: #1E6BA3; }
.pp-walk__lbl--gold { color: #8A6008; }
.pp-walk__lbl--teal { color: #00756D; }
.pp-walk__txt { font-size: 14px; line-height: 1.55; color: #3C4A55; margin: 0 0 8px; }
.pp-walk__txt:last-child { margin-bottom: 0; }
.pp-walk--gold .pp-walk__txt { color: #5A4409; font-weight: 500; }

/* Plan last page: materials, remember, closing, safety */
.pp-twoup { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; align-items: start; }
.pp-twoup--even { grid-template-columns: 1fr 1fr; }
.pp-mats { display: flex; flex-direction: column; gap: 7px; }
.pp-mat { display: flex; align-items: center; gap: 10px; background: #EFFAF8; border: 1px solid #CFEEEA; border-radius: 9px; padding: 9px 12px; }
.pp-mat__check { color: #00756D; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.pp-mat__txt { font-size: 14px; font-weight: 700; color: #242424; }
.pp-remember { background: #FDF2DA; border: 1px solid #F2DFAF; border-radius: 13px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.pp-star { display: flex; gap: 10px; align-items: flex-start; }
.pp-star__glyph { color: #8A6008; font-weight: 800; font-size: 14px; line-height: 1.5; flex-shrink: 0; }
.pp-star__txt { font-size: 14px; line-height: 1.5; color: #5A4409; font-weight: 600; }
.pp-close { border: 1px solid #E8ECE6; border-radius: 15px; overflow: hidden; }
.pp-close__head { background: #FAFBF9; border-bottom: 1px solid #E8ECE6; padding: 14px 18px; }
.pp-close__title { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 23px; color: #242424; line-height: 1.1; }
.pp-w--n { color: #2988C9; }
.pp-w--c { color: #C0392B; }
.pp-w--a { color: #8A6008; }
.pp-close__sub { font-size: 12.8px; color: #5C6760; font-weight: 700; margin-top: 5px; }
.pp-close__list { padding: 6px 18px 16px; }
.pp-close__row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid #F0F3EF; }
.pp-close__row:last-child { border-bottom: none; }
.pp-close__badge { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .35px; color: #1E6BA3; background: #E4F0FC; padding: 5px 10px; border-radius: 7px; flex-shrink: 0; }
.pp-close__txt { font-size: 14.5px; line-height: 1.5; color: #242424; font-weight: 600; }
.pp-close__lead { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .35px; }
.pp-safety { display: flex; gap: 11px; align-items: flex-start; background: #FDE7E2; border: 1px solid #F7CFC6; border-radius: 12px; padding: 13px 16px; }
.pp-safety__badge { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .45px; color: #fff; background: #C0392B; padding: 4px 9px; border-radius: 6px; flex-shrink: 0; }
.pp-safety__txt { font-size: 13.3px; line-height: 1.5; color: #3C4A55; font-weight: 600; }

/* ── Ink saver (print-friendly): same document, without the heavy fills.
   Light washes stay (they cost almost nothing); every solid mid/dark ground
   becomes an outline treatment with its AA text token. ── */
.pp-ink .pp-mast { background: #fff; }
.pp-ink .pp-blob { display: none; }
.pp-ink .pp-cobrand { border: 1px solid #E2E6DD; padding: 6px 11px; }
.pp-ink .pp-pill { background: #fff; border: 1.5px solid #FBB018; color: #8A6008; padding: 5.5px 12.5px; }
.pp-ink .pp-eyebrow { color: #1E6BA3; }
.pp-ink .pp-h1 { color: #1E6BA3; }
.pp-ink .pp-h1__act { color: #8A6008; }
.pp-ink .pp-sub { color: #3C4A55; }
.pp-ink .pp-sub b { color: #242424; }
.pp-ink .pp-for__lbl { color: #68746B; }
.pp-ink .pp-for__pill { border: 1px solid #D8DEDA; padding: 5px 12px; }
.pp-ink .pp-starter__num { background: #fff; border: 1.5px solid #1E6BA3; color: #1E6BA3; }
.pp-ink .pp-role__badge { background: #fff; border: 1.5px solid; padding: 3.5px 9.5px; }
.pp-ink .pp-role__badge--blue { border-color: #1E6BA3; color: #1E6BA3; }
.pp-ink .pp-role__badge--teal { border-color: #00756D; color: #00756D; }
.pp-ink .pp-std__badge { background: #fff; border: 1.5px solid; padding: 2.5px 7.5px; }
.pp-ink .pp-std__badge--casel { border-color: #00756D; color: #00756D; }
.pp-ink .pp-std__badge--sel { border-color: #1E6BA3; color: #1E6BA3; }
.pp-ink .pp-std__badge--cape { border-color: #8A6008; color: #8A6008; }
.pp-ink .pp-time { background: #fff; border: 1.5px solid; padding: 3.5px 0; }
.pp-ink .pp-time--blue { border-color: #2988C9; color: #1E6BA3; }
.pp-ink .pp-time--red  { border-color: #F03C24; color: #C0392B; }
.pp-ink .pp-time--gold { border-color: #FBB018; color: #8A6008; }
.pp-ink .pp-core { background: #fff; border: 1.5px solid #C0392B; color: #C0392B; padding: 1.5px 7.5px; }
.pp-ink .pp-activity { background: #F5F9FD; border: 1px solid #CFE4F6; border-left: 5px solid #2988C9; }
.pp-ink .pp-activity__title { color: #1E6BA3; }
.pp-ink .pp-activity__desc { color: #3C4A55; }
.pp-ink .pp-safety__badge { background: #fff; border: 1.5px solid #C0392B; color: #C0392B; padding: 2.5px 7.5px; }

/* ── Compact fit levels. Real lesson copy runs longer than the mocks; a page
   that would overflow its fixed Letter sheet steps down instead of clipping.
   Applied cumulatively by plan-print.js (f1, then f1+f2, then f1+f2+f3). ── */
.pp--f1 .pp-mast { padding: 22px 46px 19px; }
.pp--f1 .pp-h1 { font-size: 44px; }
.pp--f1 .pp-h1:has(.pp-h1__act) { font-size: 42px; }
.pp--f1 .pp-eyebrow { margin-top: 16px; }
.pp--f1 .pp-body { padding-top: 17px; gap: 14px; }
.pp--f1 .pp-body--team { gap: 11px; padding-top: 13px; }
.pp--f1 .pp-p { font-size: 14.3px; line-height: 1.52; }
.pp--f1 .pp-card { padding: 10px 12px 11px; }
.pp--f1 .pp-card__word { font-size: 17px; }
.pp--f1 .pp-card__desc { font-size: 12.2px; }
.pp--f1 .pp-starter { padding: 9px 13px; }
.pp--f1 .pp-starter__txt { font-size: 14.2px; }
.pp--f1 .pp-goldpanel { padding: 13px 16px; }
.pp--f1 .pp-goldpanel__txt { font-size: 14.3px; }
.pp--f1 .pp-challenge { padding: 13px 16px; }
.pp--f1 .pp-challenge__txt { font-size: 14.6px; }
.pp--f1 .pp-role { padding: 13px 16px; }
.pp--f1 .pp-role__lead { font-size: 13.9px; margin-bottom: 9px; }
.pp--f1 .pp-arrow__txt { font-size: 13.8px; }
.pp--f1 .pp-obj { font-size: 14.8px; }
.pp--f1 .pp-flow { gap: 9px; }
.pp--f1 .pp-step__desc { font-size: 13.4px; }
.pp--f1 .pp-walk__txt { font-size: 13.4px; line-height: 1.5; }
.pp--f1 .pp-close__row { padding: 10px 0; }
.pp--f1 .pp-close__txt { font-size: 14px; }
.pp--f1 .pp-activity__desc { font-size: 14px; }
.pp--f1 .pp-star__txt { font-size: 13.4px; }
.pp--f1 .pp-mat { padding: 8px 11px; }

.pp--f2 .pp-mast { padding: 18px 46px 15px; }
.pp--f2 .pp-h1 { font-size: 38px; }
.pp--f2 .pp-h1:has(.pp-h1__act) { font-size: 36px; }
.pp--f2 .pp-eyebrow { margin-top: 13px; }
.pp--f2 .pp-body { padding-top: 12px; gap: 10px; }
.pp--f2 .pp-sec { margin-bottom: 6px; }
.pp--f2 .pp-p { font-size: 13.6px; line-height: 1.45; }
.pp--f2 .pp-card__desc { font-size: 11.6px; }
.pp--f2 .pp-starter { padding: 7px 12px; }
.pp--f2 .pp-starter__txt { font-size: 13.6px; }
.pp--f2 .pp-goldpanel { padding: 11px 14px; }
.pp--f2 .pp-goldpanel__txt { font-size: 13.6px; }
.pp--f2 .pp-challenge { padding: 11px 14px; }
.pp--f2 .pp-challenge__txt { font-size: 13.9px; }
.pp--f2 .pp-role { padding: 11px 14px; }
.pp--f2 .pp-role__title { font-size: 19px; }
.pp--f2 .pp-role__lead { font-size: 13.3px; margin-bottom: 7px; }
.pp--f2 .pp-arrow__txt { font-size: 13.2px; }
.pp--f2 .pp-chips { margin-top: 7px; }
.pp--f2 .pp-flow { gap: 7px; }
.pp--f2 .pp-step__desc { font-size: 12.8px; line-height: 1.45; }
.pp--f2 .pp-walk__txt { font-size: 12.8px; line-height: 1.45; }
.pp--f2 .pp-close__row { padding: 8px 0; }
.pp--f2 .pp-close__txt { font-size: 13.5px; }
.pp--f2 .pp-activity__desc { font-size: 13.5px; }
.pp--f2 .pp-star__txt { font-size: 13px; }
.pp--f2 .pp-inset__txt, .pp--f2 .pp-note__txt { font-size: 12.6px; }

.pp--f3 .pp-mast { padding: 14px 46px 12px; }
.pp--f3 .pp-h1 { font-size: 33px; }
.pp--f3 .pp-h1:has(.pp-h1__act) { font-size: 31px; }
.pp--f3 .pp-eyebrow { margin-top: 10px; }
.pp--f3 .pp-body { padding-top: 10px; gap: 8px; }
.pp--f3 .pp-p { font-size: 13px; line-height: 1.4; }
.pp--f3 .pp-blob { display: none; }
.pp--f3 .pp-card__desc { font-size: 11px; }
.pp--f3 .pp-starter { padding: 6px 11px; }
.pp--f3 .pp-starter__txt { font-size: 13px; }
.pp--f3 .pp-role__lead { font-size: 12.7px; }
.pp--f3 .pp-arrow__txt { font-size: 12.6px; }
.pp--f3 .pp-walk__txt { font-size: 12.2px; }
.pp--f3 .pp-step__desc { font-size: 12.4px; }
.pp--f3 .pp-close__txt { font-size: 13px; }
.pp--f3 .pp-challenge__txt { font-size: 13.3px; }
.pp--f3 .pp-goldpanel__txt { font-size: 13.2px; }

/* During PDF capture: no chrome around the sheet */
.pp-capture .pp { box-shadow: none; border-color: #fff; }
.pp-walk__txt b { font-weight: 800; color: #242424; }

/* Screen-only affordances on the printable docs: links render in the portal,
   disappear in print and in the downloaded PDF (no link affordances on paper). */
@media print { .pp-scr { display: none !important; } }
.pp-capture .pp-scr { display: none !important; }
.pp a.pp-std__badge, .pp a.pp-std__all { text-decoration: none; }
.pp a.pp-std__all { color: #5C6760; font-weight: 700; }
.pp-activity__link { display: inline-block; margin-top: 10px; color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: underline; position: relative; }
.pp-ink .pp-activity__link { color: #1E6BA3; }
@media print { .pp-activity__link { display: none !important; } }
.pp-capture .pp-activity__link { display: none !important; }

/* Merged multi-class plans: several FOR pills, wrapping cleanly */
.pp-for { flex-wrap: wrap; row-gap: 7px; }

/* PE day plan document (server-rendered; shares the pp- system) */
.pp-note--flush { margin-top: 0; border-radius: 0 11px 11px 0; }
.pp-pick { display: inline-block; margin-left: 7px; background: #FDF2DA; border: 1px solid #F2DFAF; color: #8A6008; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: .35px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.pp-day-lead { font-size: 15px; line-height: 1.58; color: #3C4A55; }
.pp-day-lead b { color: #242424; font-weight: 800; }

/* ══════════════════════════════════════════════
   Demo window veil (board round 8/25): shelves past the demo window render
   as untitled locked cards that blur and fade into the page, with one line
   pointing at the Request-a-demo form. Titles are never in the markup;
   the blur is the look, not the lock.
   ══════════════════════════════════════════════ */
.demo-veil { position: relative; }
.demo-veil__mask { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,.22) 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 35%, rgba(0,0,0,.22) 78%, transparent 100%); }
.demo-card-locked { pointer-events: none; user-select: none; }
.demo-card-locked__blur { filter: blur(4px); opacity: .8; }
.demo-veil__note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 26px; text-align: center; font-size: 14px; color: var(--body); }
.demo-veil__note a { color: var(--blue); font-weight: 800; text-decoration: none; }
.demo-veil__note a:hover { text-decoration: underline; }

/* BTS hub flavor of the same veil (its own light-gallery palette) */
.bts-tl__row--locked { pointer-events: none; user-select: none; }
.bts-tl__row--locked .bts-tl__card { box-shadow: none; }
.bts-tl__row--locked .bts-tl__name { filter: blur(4px); opacity: .75; }
.bts-tl--demo-fade { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.25) 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.25) 75%, transparent 100%); }
.bts-demo-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 6px auto 34px; max-width: 640px; text-align: center; font-size: 14.5px; color: #3A4A44; }
.bts-demo-note a { color: #00564E; font-weight: 800; text-decoration: none; }
.bts-demo-note a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════
   TRANSCENDENT THINKING · THE SUNLIT OFFICE
   The MHIY bonus module plays in Dr. Immordino-Yang's office: warm paper
   light, textbook navy, the hand-tinted colors of the anatomy chart on her
   wall (coral, ochre, sage, dusty blue), and its own typography — Fraunces
   for headings, Source Serif 4 for prose — so it reads like a monograph,
   not a slideshow. Scoped to .trn-page--mhiy; every other track untouched.
   ══════════════════════════════════════════════ */

.trn-page--mhiy{
  --mh-paper:#FBF7ED; --mh-paper2:#F4EDDD; --mh-navy:#2C3E66; --mh-navy-deep:#1E2B49;
  --mh-coral:#C4634F; --mh-gold:#B8862E; --mh-sage:#77875F; --mh-dusty:#5B7A9E;
  --mh-display:'Fraunces',Georgia,'Times New Roman',serif;
  --mh-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --blue:var(--mh-navy); --blue-dark:var(--mh-navy-deep); --blue-darker:#16203A;
  --panel-blue:#E9E9F2; --panel-lavender:#F1EBDB;
  --ink:#25304C; --body:#39435E; --body-alt:#5E6376; --muted:#7C8093; --muted-alt:#7C8093; --caption:#5E6376;
  --border:#E4DBC4; --border-lavender:#E4DBC4;
  --bg-sidebar:#F5EFDF;
  --gold:#B8862E; --gold-dark:#8F6A20; --gold-light:#F3E8CE;
  --trn-ring-track:#EAE2CC; --trn-ring-inner:#FFFDF6;
  background:var(--mh-paper2);
}
.trn-page--mhiy .trn-content{background:radial-gradient(120% 90% at 50% 0%, #FDFAF2 0%, var(--mh-paper) 55%, var(--mh-paper2) 100%)}
/* The atlas plates on the page margin — the chart wall from her office. Real
   anatomy plates (Tanner's Brain scan set, row 542), stacked like the printed
   sheet: lateral view up top, the midsagittal cut below it, coronal at the
   base. They live in the right margin; the paper card covers any overlap. */
.trn-page--mhiy .trn-content::before{content:'';position:absolute;right:-24px;top:40px;width:470px;height:1160px;
  background:
    url(../images/mhiy-brain-lateral.png) no-repeat right top/440px auto,
    url(../images/mhiy-brain-sagittal.png) no-repeat right 10px top 400px/420px auto,
    url(../images/mhiy-brain-coronal.png) no-repeat right 70px top 790px/310px auto;
  opacity:.42;pointer-events:none}
.trn-page--mhiy .trn-blob-1{width:520px;height:520px;border-radius:50%;top:-200px;right:8%;
  background:radial-gradient(circle, rgba(196,99,79,.10) 0%, transparent 62%)}
.trn-page--mhiy .trn-blob-2{width:420px;height:420px;border-radius:50%;bottom:-180px;left:4%;
  background:radial-gradient(circle, rgba(91,122,158,.10) 0%, transparent 62%)}
.trn-page--mhiy .trn-topbar{background:#FFFDF6;border-bottom:1px solid var(--border)}
.trn-page--mhiy .trn-topbar__label{color:var(--mh-coral)}
.trn-page--mhiy .trn-topbar__title{font-family:var(--mh-display);font-weight:520;font-size:17px;letter-spacing:.005em}
.trn-page--mhiy .trn-rail{background:#F7F2E4;border-right:1px solid var(--border)}
.trn-page--mhiy .trn-rail__muscle{background:#FFFDF6;border:1px solid var(--border);text-align:center}
.trn-page--mhiy .trn-rail__muscle-label{color:var(--mh-coral)}
.trn-page--mhiy .trn-rail__muscle-name{font-family:var(--mh-display);font-weight:540}
.trn-page--mhiy .trn-screen__eyebrow,.trn-page--mhiy .trn-module-eyebrow{color:var(--mh-coral)}

/* The page card is a paper page: navy masthead rule, sharper corners, wide margins */
.trn-page--mhiy .trn-card{background:#FFFEF9;border:1px solid #E0D6BB;border-top:3px solid var(--mh-navy);
  border-radius:8px;box-shadow:0 14px 34px rgba(44,62,102,.08);padding:38px 46px 34px}
@media (max-width:700px){.trn-page--mhiy .trn-card{padding:26px 22px 24px}}
.trn-page--mhiy .trn-module-title{font-family:var(--mh-display);font-weight:560;letter-spacing:.015em}
.trn-page--mhiy .trn-module-header{position:relative}
.trn-page--mhiy .trn-module-header::after{content:'';position:absolute;right:2px;top:-16px;width:92px;height:92px;
  background:url(../images/mhiy-brain-simple.png) no-repeat center/contain;opacity:.5;pointer-events:none}
@media (max-width:700px){.trn-page--mhiy .trn-module-header::after{width:56px;height:56px;top:-8px}}
.trn-page--mhiy .trn-beat__heading{font-family:var(--mh-display);font-weight:560;font-size:27px;line-height:1.18;
  letter-spacing:.002em;color:var(--mh-navy-deep)}
.trn-page--mhiy .trn-beat__body{font-family:var(--mh-serif);font-size:17px;line-height:1.78;color:var(--body)}
.trn-page--mhiy .trn-beat__body strong{color:var(--mh-navy-deep)}
.trn-page--mhiy .trn-beat__list > div{font-family:var(--mh-serif);font-size:16.5px;line-height:1.7}
.trn-page--mhiy .trn-beat__bullet{color:var(--mh-coral)}
.trn-page--mhiy .trn-screen__title{font-family:var(--mh-display);font-weight:560;letter-spacing:.002em}
.trn-page--mhiy .trn-screen__photo--mhiy img{object-position:55% 36%}
.trn-page--mhiy .trn-screen__obj-list li,.trn-page--mhiy .trn-screen__obj-lead{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-quote{font-family:var(--mh-display);font-style:italic;font-weight:480;font-size:21px;
  line-height:1.45;color:var(--mh-navy-deep)}
.trn-page--mhiy .trn-qc-question,.trn-page--mhiy .trn-qc-option,.trn-page--mhiy .trn-review__intro-text,
.trn-page--mhiy .trn-qc-feedback{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-win__text,.trn-page--mhiy .trn-win__context,.trn-page--mhiy .trn-win__note{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-statement--xl{font-family:var(--mh-display);font-weight:500}
.trn-page--mhiy .trn-statement--xl strong{color:var(--mh-coral)}

/* Footnotes drop their colored boxes and become true footnotes */
.trn-page--mhiy .trn-footnote{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;
  padding:12px 2px 0;margin-top:22px;font-family:var(--mh-serif);font-style:italic;font-size:13.8px;
  line-height:1.6;color:#6B7186}
.trn-page--mhiy .trn-footnote::before{display:none}
.trn-page--mhiy .trn-footnote strong{color:#4A5470}
.trn-page--mhiy .trn-footnote em{font-style:normal}

/* Compare and stack panels, restyled as printed sidebars */
.trn-page--mhiy .trn-compare__box{background:#FCF9F0;border:1px solid #E0D6BB;border-radius:6px}
.trn-page--mhiy .trn-compare__title{font-family:'Mulish',sans-serif;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;font-size:11.5px;color:var(--mh-navy)}
.trn-page--mhiy .trn-compare__line,.trn-page--mhiy .trn-compare__text{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-stack__box{background:#FCF9F0;border:1px solid #E7DEC6;border-left:3px solid var(--mh-dusty);border-radius:6px}
.trn-page--mhiy .trn-stack__box--notice{background:#FCF9F0;border-color:#E7DEC6;border-left-color:var(--mh-coral)}
.trn-page--mhiy .trn-stack__box--choose{background:#FCF9F0;border-color:#E7DEC6;border-left-color:var(--mh-gold)}
.trn-page--mhiy .trn-stack__box--act{background:#FCF9F0;border-color:#E7DEC6;border-left-color:var(--mh-sage)}
.trn-page--mhiy .trn-stack__title{font-family:var(--mh-display);font-weight:560;color:var(--mh-navy-deep)}
.trn-page--mhiy .trn-stack__text{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-callout{background:var(--mh-paper2);border:1px solid #E0D6BB;border-radius:6px}
.trn-page--mhiy .trn-callout,.trn-page--mhiy .trn-callout p{font-family:var(--mh-serif)}
.trn-page--mhiy .trn-pill{font-family:var(--mh-serif);font-style:italic;background:transparent;
  border:1px solid #D9CCA8;color:var(--mh-navy-deep)}

/* Marked terms: dotted annotation with a footnote star; tap for the aside */
.mterm{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--mh-navy,#2C3E66);
  cursor:pointer;border-bottom:1.5px dotted var(--mh-coral,#C4634F);line-height:inherit}
.mterm::after{content:'*';color:var(--mh-coral,#C4634F);font-size:.7em;vertical-align:super;margin-left:1px;font-weight:700}
.mterm:hover{background:rgba(184,134,46,.13)}
.mterm--seen{border-bottom-style:solid;border-bottom-color:#D9CCA8}
.mterm--seen::after{color:#C2B48C}
.mterm-pop{position:fixed;z-index:9999;background:#FFFEF9;border:1px solid #D9CCA8;border-top:3px solid var(--mh-navy,#2C3E66);
  border-radius:8px;box-shadow:0 22px 54px rgba(30,43,73,.25);padding:15px 18px 13px;max-height:min(430px,72vh);
  overflow-y:auto;animation:ldtpeFade .18s ease both}
.mterm-pop__x{position:absolute;top:6px;right:10px;background:none;border:0;font-size:20px;line-height:1;
  color:#A29A85;cursor:pointer;padding:4px}
.mterm-pop__x:hover{color:var(--mh-navy,#2C3E66)}
.mterm-pop__kicker{font-family:'Mulish',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.12em;
  color:var(--mh-coral,#C4634F);margin-bottom:3px}
.mterm-pop__title{font-family:'Fraunces',Georgia,serif;font-weight:580;font-size:19px;line-height:1.2;
  color:var(--mh-navy-deep,#1E2B49);margin-bottom:7px;padding-right:16px}
.mterm-pop__body{font-family:'Source Serif 4',Georgia,serif;font-size:14.3px;line-height:1.62;color:#39435E;margin:0 0 8px}
.mterm-pop__body strong{color:var(--mh-navy-deep,#1E2B49)}
.mterm-pop__cite{border-top:1px dashed #E0D6BB;padding-top:8px;font-family:'Source Serif 4',Georgia,serif;
  font-style:italic;font-size:12.5px;line-height:1.5;color:#7C8093}

/* The story box: case material in a documentary file of its own */
.trn-storybox{background:linear-gradient(150deg,#FBF6EA 0%,#F5EEDA 100%);border:1px solid #D9CCA8;
  border-left:4px solid var(--mh-coral,#C4634F);border-radius:8px;padding:20px 24px 16px;margin:18px 0}
.trn-storybox__kicker{font-family:'Mulish',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.13em;
  color:var(--mh-coral,#C4634F);margin-bottom:4px}
.trn-storybox__title{font-family:'Fraunces',Georgia,serif;font-weight:580;font-size:20px;color:var(--mh-navy-deep,#1E2B49);margin-bottom:8px}
.trn-storybox__text{font-family:'Source Serif 4',Georgia,serif;font-size:16.3px;line-height:1.72;color:#39435E;margin:0 0 10px}
.trn-storybox__note{border-top:1px dashed #DFD3B2;padding-top:9px;font-family:'Source Serif 4',Georgia,serif;
  font-style:italic;font-size:13px;line-height:1.55;color:#7C8093}

/* The journal: cream page, coral margin rule, serif hand */
.trn-page--mhiy .trn-jot{background:#FDFBF3;border:1px solid #E4DBC4;border-left:3px solid var(--mh-coral);
  border-radius:8px;padding:16px 18px 12px}
.trn-page--mhiy .trn-jot__label{font-family:var(--mh-display);font-style:italic;font-weight:500;font-size:15.5px;
  text-transform:none;letter-spacing:0;color:var(--mh-navy-deep)}
.trn-page--mhiy .trn-jot__input{font-family:var(--mh-serif);font-size:16px;line-height:1.65;background:#FFFEF9;
  border-color:#E0D6BB;color:var(--ink)}
.trn-page--mhiy .trn-jot__note{font-family:var(--mh-serif);font-style:italic;color:#7C8093}

/* The speak bar: dictation as the front door to every journal box */
.trn-speak{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 8px}
.trn-speak__btn{display:inline-flex;align-items:center;gap:8px;background:var(--mh-navy,#2C3E66);color:#FBF7ED;
  border:1.5px solid var(--mh-navy,#2C3E66);border-radius:999px;padding:8px 16px;cursor:pointer;
  font-family:'Mulish',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;transition:background .15s ease,color .15s ease}
.trn-speak__btn:hover{background:var(--mh-navy-deep,#1E2B49)}
.trn-speak__mic{width:16px;height:16px;flex:none}
.trn-speak--on .trn-speak__btn{background:var(--mh-coral,#C4634F);border-color:var(--mh-coral,#C4634F);color:#FFF6ED;
  animation:mhSpeakPulse 1.6s ease-in-out infinite}
@keyframes mhSpeakPulse{0%,100%{box-shadow:0 0 0 0 rgba(196,99,79,.34)}50%{box-shadow:0 0 0 7px rgba(196,99,79,0)}}
.trn-speak__or,.trn-speak__note{font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:13px;color:#8B8FA0}
@media (prefers-reduced-motion: reduce){.trn-speak--on .trn-speak__btn{animation:none}}

/* Transcript preview: her words scroll inside the video box at reading pace */
.trn-video--script{aspect-ratio:16/9;position:relative;background:#1E2B49;overflow:hidden;display:block}
.trn-script__badge{position:absolute;top:12px;left:12px;z-index:2;background:rgba(251,247,237,.14);color:#F3E8CE;
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.09em;border-radius:999px;padding:5px 12px}
.trn-script__scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.trn-script__inner{padding:56px 12% 46%}
.trn-script__line{font-family:'Source Serif 4','Newsreader',Georgia,serif;font-size:19px;line-height:1.62;color:#F5EFDF;margin:0 0 18px}
.trn-script__line--end{text-align:center;color:#8FA0C4}
@media (max-width:600px){.trn-script__line{font-size:16px}.trn-script__inner{padding:48px 8% 50%}}

/* The noticing layer: quiet nods when a journal entry makes a transcendent move */
.trn-muse{display:flex;flex-direction:column;gap:8px;margin:10px 0 2px}
.trn-muse:empty{display:none}
.trn-muse__chip{background:#FDF6EC;border:1px solid #E8CDB9;border-left:4px solid var(--mh-coral,#C4634F);
  border-radius:8px;padding:10px 14px;font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.5;color:#5A4638;animation:ldtpeFade .5s ease both}
.trn-muse__tag{display:inline-block;margin-right:8px;font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;
  font-size:10.5px;letter-spacing:.1em;color:var(--mh-coral,#C4634F)}

/* The notebook: this browser's own entries, read back */
.trn-notebook{display:flex;flex-direction:column;gap:14px;margin:16px 0 6px}
.trn-notebook__entry{background:var(--bg-sidebar,#F5EFDF);border:1px solid var(--border,#E4DBC4);border-radius:8px;padding:14px 18px}
.trn-notebook__label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mh-coral,#B05A48);margin-bottom:8px}
.trn-notebook__field{font-weight:800;font-size:12.5px;color:var(--body-alt,#5E6376);margin:8px 0 3px}
.trn-notebook__text{font-family:'Source Serif 4','Newsreader',Georgia,serif;font-size:16px;line-height:1.6;color:var(--ink,#25304C);white-space:pre-wrap}
.trn-notebook__empty{font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;color:var(--muted,#7C8093);font-style:italic}

/* Open the window: timeline scenarios with placeable reflective windows */
.trn-win__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.trn-win__tab{background:transparent;border:1.5px solid var(--border,#E4DBC4);color:var(--body,#3D4459);cursor:pointer;
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px}
.trn-win__tab:hover{border-color:var(--mh-navy,#2C3E66)}
.trn-win__tab.is-on{background:var(--mh-navy,#2C3E66);border-color:var(--mh-navy,#2C3E66);color:#fff}
.trn-win__tab.is-done:not(.is-on){color:var(--mh-sage,#77875F);border-color:var(--mh-sage,#77875F)}
.trn-win__context{font-size:14.5px;line-height:1.6;color:var(--body-alt,#5E6376);margin:0 0 14px}
.trn-win__steps{display:flex;flex-direction:column;gap:10px}
.trn-win__step{background:#FFFDF6;border:1.5px solid var(--border,#E4DBC4);border-radius:12px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.trn-win__step.is-picked{border-color:var(--mh-dusty,#5B7A9E);box-shadow:0 0 0 3px rgba(91,122,158,.14)}
.trn-win__step.is-hit{border-color:var(--mh-sage,#77875F);box-shadow:0 0 0 3px rgba(119,135,95,.16)}
.trn-win__step.is-near{border-color:var(--mh-gold,#B8862E);box-shadow:0 0 0 3px rgba(184,134,46,.13)}
.trn-win__step.is-point{border-style:dashed;border-color:var(--mh-coral,#C4634F)}
.trn-win__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trn-win__num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--panel-lavender,#F1EBDB);
  color:var(--mh-navy,#2C3E66);font-weight:800;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.trn-win__text{flex:1;min-width:200px;font-size:14.5px;line-height:1.5;color:var(--ink,#25304C)}
.trn-win__pick{flex:0 0 auto;background:transparent;border:1.5px solid var(--mh-dusty,#5B7A9E);color:var(--mh-dusty,#4A6685);
  cursor:pointer;font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:12.5px;padding:6px 13px;border-radius:999px}
.trn-win__pick:hover{background:rgba(91,122,158,.1)}
.trn-win__mark{flex:0 0 auto;font-family:'Barlow Semi Condensed',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:5px 11px}
.trn-win__mark--hit{background:rgba(119,135,95,.16);color:#54633F}
.trn-win__mark--near{background:rgba(184,134,46,.14);color:#8F6A20}
.trn-win__mark--point{background:rgba(196,99,79,.12);color:#A34F3D}
.trn-win__note{margin-top:9px;padding-top:9px;border-top:1px dashed var(--border,#E4DBC4);font-size:13.5px;line-height:1.55;color:var(--body-alt,#5E6376)}
.trn-win__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.trn-win__count{font-size:13px;font-weight:800;color:var(--body-alt,#5E6376)}
.trn-win__check:disabled{opacity:.45;cursor:not-allowed}
.trn-win__done{margin-top:16px;font-size:14px;line-height:1.55;font-weight:600;color:var(--mh-sage,#54633F)}

/* Easy read + reduced motion: the transcript never auto-drifts (JS honors the
   media query); keep the box scrollable and readable in both modes. Easy read
   also clears the atlas-plate watermark, keeping the page plain. */
.ldtpe-easy .trn-script__line{font-size:20px;line-height:1.75}
html.ldtpe-easy .trn-page--mhiy .trn-content::before,
html.ldtpe-easy .trn-page--mhiy .trn-module-header::after{display:none}
@media (prefers-reduced-motion: reduce){
  .trn-muse__chip{animation:none}
  .mterm-pop{animation:none}
}