/* =========================================================
   DESIGN SYSTEM — edit here to update the entire book
   ========================================================= */
:root {
  /* Color palette */
  --dark-navy: #1B2740;
  --navy: #243352;
  --med-navy: #2E4272;
  --blue: #3D5A80;
  --red: #8B1A1A;
  --dark-red: #5C1010;
  --brown: #8B5E3C;
  --gold: #C8A84B;
  --gold-soft: #B89A40;
  --gold-deep: #7A5E12;
  --cream: #F5F0E8;
  --off-white: #EAE4D9;
  --white: #FFFFFF;
  --light-gray: #D4CFC6;
  --mid-gray: #6E6454;
  --charcoal: #2B2B2B;

  /* Typography */
  --font-heading: 'Crimson Pro', Cambria, Georgia, serif;
  --font-body: 'Inter', Calibri, -apple-system, system-ui, sans-serif;

  /* Layout widths */
  --max-prose: 720px;
  --max-content: 960px;
  --max-wide: 1140px;
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* =========================================================
   GLOBAL FOCUS INDICATOR (WCAG 2.4.7 Focus Visible, AA)
   Every keyboard-focusable element gets a visible gold outline unless a
   more specific rule provides its own focus treatment. Uses :focus-visible
   so the indicator shows for keyboard users without flashing on mouse click.
   ========================================================= */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.vocab-term:focus-visible {
  /* Two-tone ring: gold outline + dark outer halo. The gold carries contrast
     on dark backgrounds (6.5:1 on navy); the dark halo carries it on light
     backgrounds (13:1 on cream). Meets WCAG 1.4.11 on any surface. */
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--dark-navy), 0 0 0 7px rgba(255,255,255,0.5);
  border-radius: 2px;
}
.top-nav :focus-visible { outline-offset: 1px; }
/* R206: activity controls sit on busy/tinted backgrounds, so give their
   keyboard-focus ring extra weight + offset so it reads clearly. Same strong
   indicator as the global rule, slightly thicker. (Focus only — hover keeps
   its own distinct background/border shift; conflating the two would be
   visually heavy and non-standard.) */
.t1-source-tab:focus-visible,
.t1-writing-tab:focus-visible,
.t1-organizer__choice:focus-visible,
.t1-section__header:focus-visible,
.source-flip__btn:focus-visible,
.coach-controls__btn:focus-visible,
.coach-controls__speed input:focus-visible,
input[data-coach-speed]:focus-visible,
.chain-widget__rail:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--dark-navy), 0 0 0 8px rgba(255,255,255,0.6);
  border-radius: 3px;
  position: relative;
  z-index: 2;
}
/* R210: wide header BARS (foldout section headers + band headers) need more than
   a thin ring to read clearly — give the focused bar a visible fill + inset gold
   edge so the whole control changes state, not just its border. */
.t1-section__header:focus-visible,
.t1-band__header:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -3px;                 /* inset so it doesn't get clipped */
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px var(--dark-navy);
  background: rgba(200, 168, 75, 0.16);  /* clear gold wash across the whole bar */
  z-index: 2;
}
/* R210b: band headers are <div role="button"> — some browsers don't grant
   :focus-visible to a role=button div, so the rule above can silently miss,
   leaving "step" headers un-highlighted (the native-<button> section headers
   highlight, the div-based band headers don't — an inconsistency). Add a plain
   :focus fallback for the band header so it ALWAYS shows the bar treatment when
   focused, keyboard or not. */
.t1-band__header:focus {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--gold), 0 0 0 3px var(--dark-navy);
  background: rgba(200, 168, 75, 0.16);
  z-index: 2;
}
/* R210: a focused-but-not-yet-selected answer (deferred-selection radiogroup)
   gets a clear highlight so the student sees which option Enter will commit. */
.t1-organizer__choice:focus-visible {
  background: rgba(200, 168, 75, 0.14);
  border-color: var(--gold-deep, #7A5E12);
}
html {
  /* Note: NOT using scroll-behavior: smooth, because it animates programmatic
     scrollTo() calls and can interfere with reliable scroll-to-top on page change. */
  scroll-padding-top: 70px;
  --reading-scale: 1;
  font-size: calc(100% * var(--reading-scale));  /* root size → scales all rem text */
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--blue); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--dark-red); text-decoration: underline; }

/* External links inside prose — subtle dotted underline + tiny external arrow */
.prose a[target="_blank"]:not(.figure__credit a) {
  text-decoration: underline;
  text-decoration-color: rgba(61, 90, 128, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a[target="_blank"]:not(.figure__credit a)::after {
  content: '\2197'; /* ↗ */
  font-size: 0.75em;
  margin-left: 0.15em;
  color: var(--mid-gray);
  vertical-align: super;
  text-decoration: none;
}
.prose a[target="_blank"]:not(.figure__credit a):hover {
  text-decoration-color: var(--dark-red);
  color: var(--dark-red);
}
.prose a[target="_blank"]:not(.figure__credit a):hover::after {
  color: var(--dark-red);
}

img { max-width: 100%; display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   STICKY TOP NAVIGATION
   ========================================================= */
.top-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--dark-navy);
  color: var(--cream);
  border-bottom: 3px solid var(--gold);
  padding: 0.6rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.top-nav__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
  font-size: 22px;  /* was 18px — bumped for R58 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.top-nav__title a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw; }
.top-nav__title a:hover { color: var(--white); text-decoration: none; }
.top-nav__title-icon {
  width: 44px;
  height: 22px;
  flex-shrink: 0;
  color: var(--gold);
}
.top-nav__title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 2000;
  background: var(--dark-navy);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
#book:focus { outline: none; }
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}
.top-nav__links { display: flex; gap: 1rem; align-items: center; }/* ===== R98: Focus Tracker (focus indicator + report) ===== */
.focus-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--cream);
  height: 28px;
  padding: 0 0.75rem 0 0.55rem;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.focus-indicator:hover,
.focus-indicator[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
}
.focus-indicator__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #888;
  transition: background 0.3s, box-shadow 0.3s;
}
.focus-indicator--green .focus-indicator__dot {
  background: #5a9a5a;
  box-shadow: 0 0 8px rgba(90,154,90,0.55);
}
.focus-indicator--yellow .focus-indicator__dot {
  background: #d4ad3e;
  box-shadow: 0 0 8px rgba(212,173,62,0.55);
}
.focus-indicator--red .focus-indicator__dot {
  background: #c75a5a;
  box-shadow: 0 0 8px rgba(199,90,90,0.55);
}
/* R196: Off state — tracker disabled by the student. Neutral hollow dot, no glow. */
.focus-indicator--off .focus-indicator__dot {
  background: transparent;
  border: 1.5px solid rgba(244,234,213,0.45);
  box-shadow: none;
}
.focus-indicator--off .focus-indicator__label {
  opacity: 0.7;
}

/* R99 v115: Storage-Cleared state — cookie-with-bite icon as its own
   PRIORITY state. Stands alone — not compounded with red/yellow/green
   (the JS now applies only storage-cleared when it fires; see
   updateIndicator below). The cookie has:
   - A gold border so the circular silhouette is readable at small sizes
   - A gold glow (replacing the prior red glow that was bleeding past
     the cookie's edges as a "red diamond" effect)
   - A bite carved at top-right, edge gold-trimmed so the bite reads
     as a deliberate shape rather than a stray artifact
   - Three chocolate-chip dots in a darker brown for contrast against
     the cookie tan. */
.focus-indicator--storage-cleared .focus-indicator__dot {
  background: #c08858;             /* cookie tan */
  border: 1.5px solid var(--gold);
  position: relative;
  overflow: visible;
  box-shadow: 0 0 9px rgba(200,168,75,0.65);  /* gold glow, not red */
  box-sizing: border-box;
}
.focus-indicator--storage-cleared .focus-indicator__dot::before {
  /* Bite — matches the bottom-nav background so it appears
     "carved out" of the cookie. v116: reverted to original
     8px no-border treatment — the v115 gold border made the
     bite read as a separate adjacent circle instead of a real
     bite. With the cookie's own gold border, the bite's
     dark-navy fill overlaps that border in the bite region,
     interrupting it so the missing-chunk effect reads cleanly. */
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dark-navy);
}
.focus-indicator--storage-cleared .focus-indicator__dot::after {
  /* Three chocolate chips via the main dot + two box-shadow copies.
     v116: reverted to original 5px top + 7px stacking. */
  content: '';
  position: absolute;
  top: 5px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #3a2010;
  box-shadow:
    6px 4px 0 #3a2010,
    -1px 7px 0 #3a2010;
}
.focus-indicator--storage-cleared:hover .focus-indicator__dot::before,
.focus-indicator--storage-cleared[aria-expanded="true"] .focus-indicator__dot::before {
  /* On hover the indicator bg flips to gold — match it so the bite
     stays "carved out". */
  background: var(--gold);
}

.focus-report {
  position: fixed;
  top: 56px;
  left: 50%;
  width: min(680px, calc(100% - 3rem));
  /* max-height accounts for top:56px positioning + ~100px clearance for the
     fixed .page-nav at the bottom (which is ~74px tall + 26px breathing room).
     Previously this was calc(100vh - 80px) which let the drawer overlap the
     bottom nav by ~50px when history was long. R101 fix. */
  max-height: calc(100vh - 156px);
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  z-index: 90;
  transform: translate(-50%, calc(-100% - 80px));
  transition: transform 0.25s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.focus-report[hidden] { display: none; }
.focus-report.is-open { transform: translate(-50%, 0); }

.focus-report__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.3rem 0.8rem;
  border-bottom: 1px solid var(--light-gray, #e8e0c8);
  flex-shrink: 0;
}
.focus-report__title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin: 0;
}
.focus-report__date {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.focus-report__close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--charcoal, #333);
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
}
.focus-report__close:hover { background: rgba(0,0,0,0.06); }

.focus-report__body {
  overflow-y: auto;
  padding: 1rem 1.3rem 1.3rem;
}

/* R196: on/off toggle row at the top of the focus report */
.focus-report__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.1rem;
  background: rgba(27, 39, 64, 0.05);
  border: 1px solid rgba(27, 39, 64, 0.12);
  border-radius: 7px;
}
.focus-report__toggle-text { display: flex; flex-direction: column; gap: 0.1rem; }
.focus-report__toggle-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--dark-navy);
}
.focus-report__toggle-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep, #7A5E12);
}
.focus-report__switch {
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: none;
  background: #b9b3a6;
  position: relative;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease;
}
.focus-report__switch.is-on { background: #5a9a5a; }
.focus-report__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.18s ease;
}
.focus-report__switch.is-on .focus-report__switch-knob { transform: translateX(20px); }
.focus-report__switch:focus-visible { outline: 2px solid var(--gold-deep, #7A5E12); outline-offset: 2px; }
.focus-report__off-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--charcoal, #3a3a3a);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .focus-report__switch, .focus-report__switch-knob { transition: none; }
}

/* R204b: High-contrast mode support (WCAG 1.4.11 / adaptive). When the OS/browser
   requests more contrast, strengthen UI borders, focus rings, and muted text so
   interface chrome and activity controls stay clearly delineated. */
@media (prefers-contrast: more) {
  .top-nav__menu-panel,
  .tools-menu__other-chapters,
  .t1-source-tab,
  .t1-organizer__choice,
  .t1-stage-pulldown,
  .focus-report__stat,
  .cob-pdf-modal,
  .page-jumper { border-width: 2px; border-color: var(--dark-navy); }
  /* Muted greys -> darker ink for clearer reading under high contrast. */
  .focus-report__stat-label,
  .focus-report__legend,
  .source-card__portrait-caption,
  .top-nav__menu-panel a small,
  .t1-source-inline__meta,
  .page-nav__counter { color: #3a3a3a; }
  /* Make focus rings unmistakable. */
  a:focus-visible, button:focus-visible,
  [role="menuitem"]:focus-visible, [role="tab"]:focus-visible,
  input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--dark-navy) !important;
    outline-offset: 2px !important;
  }
  /* Selected/active states get a non-color reinforcement via heavier border. */
  .t1-source-tab[data-t1-state="active"],
  .version-menu__item--current { border-left-width: 4px; }
}

.focus-report__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
}
.focus-report__stat {
  background: var(--off-white, #fffaf0);
  border: 1px solid var(--light-gray, #e8e0c8);
  border-radius: 6px;
  padding: 0.85rem 0.7rem 0.75rem;
  text-align: center;
}
.focus-report__stat-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.focus-report__stat-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
  line-height: 1.3;
}

.focus-report__section-head {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 1.1rem 0 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--light-gray, #e8e0c8);
}
.focus-report__section-head:first-of-type { margin-top: 0; }

.focus-report__pages {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.focus-report__page-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px dotted #f0e8d2;
  font-size: 13px;
}
.focus-report__page-row:last-child { border-bottom: none; }
.focus-report__page-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.focus-report__page-activity {
  font-size: 11px;
  color: var(--mid-gray);
  font-variant-numeric: tabular-nums;
}
.focus-report__page-time {
  font-weight: 700;
  color: var(--dark-navy);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}

.focus-report__avg {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--light-gray, #e8e0c8);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--font-heading);
  color: var(--mid-gray);
  letter-spacing: 0.06em;
}
.focus-report__avg strong {
  color: var(--dark-navy);
  font-variant-numeric: tabular-nums;
}

.focus-report__groups {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.focus-report__group {
  background: var(--off-white, #fffaf0);
  border: 1px solid var(--light-gray, #e8e0c8);
  border-radius: 4px;
  overflow: hidden;
}
.focus-report__group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--dark-navy);
  gap: 0.6rem;
}
.focus-report__group-toggle:hover { background: rgba(0,0,0,0.03); }
.focus-report__group-summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.focus-report__group-times {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.focus-report__group-meta {
  font-size: 11px;
  color: var(--mid-gray);
}
.focus-report__group-caret {
  font-size: 11px;
  color: var(--mid-gray);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.focus-report__group.is-expanded .focus-report__group-caret { transform: rotate(180deg); }
.focus-report__group-events {
  display: none;
  padding: 0.2rem 0.85rem 0.65rem 1.4rem;
  border-top: 1px dotted var(--light-gray, #e8e0c8);
}
.focus-report__group.is-expanded .focus-report__group-events { display: block; }
.focus-report__event {
  font-size: 12px;
  color: var(--charcoal, #333);
  padding: 0.2rem 0;
  font-variant-numeric: tabular-nums;
}
.focus-report__event-page {
  font-style: italic;
  color: var(--mid-gray);
  font-size: 11px;
}

.focus-report__empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--mid-gray);
  font-style: italic;
  font-size: 13px;
}

.focus-report__compare {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-top: 0.35rem;
  line-height: 1.35;
}
.focus-report__compare strong {
  color: var(--dark-navy);
  font-weight: 700;
}
.focus-report__compare--better { color: #2f5a2f; }
.focus-report__compare--better strong { color: #2f5a2f; }
.focus-report__compare--worse { color: #8a5a3a; }
.focus-report__compare--worse strong { color: #8a5a3a; }

.focus-report__history-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.focus-report__history-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px dotted #f0e8d2;
  font-size: 12.5px;
}
.focus-report__history-row:last-child { border-bottom: none; }
.focus-report__history-row--today {
  background: rgba(218, 165, 32, 0.06);
  border-radius: 4px;
}
.focus-report__history-date {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-navy);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.focus-report__history-bar-wrap {
  position: relative;
  height: 14px;
  background: #f3eedd;
  border-radius: 7px;
  overflow: hidden;
}
.focus-report__history-bar-book {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #5a9a5a 0%, #6daa66 100%);
  border-radius: 7px;
  transition: width 0.3s ease;
}
.focus-report__history-bar-off {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(199, 90, 90, 0.6);
  border-radius: 0 7px 7px 0;
}
.focus-report__history-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--dark-navy);
  font-size: 12px;
  text-align: right;
}

.focus-report__legend {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.55rem;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  color: var(--mid-gray);
  text-transform: uppercase;
}
.focus-report__legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.focus-report__legend-dot--book { background: #5a9a5a; }
.focus-report__legend-dot--off { background: rgba(199, 90, 90, 0.6); }

/* R98: Split-window state — dot becomes back-to-back triangles ◀▶
   Only fires when the browser window has been < 75% of screen width for 10+ sec.
   Triangle color matches the active state (green/yellow/red). */
.focus-indicator--split .focus-indicator__dot {
  background: transparent;
  box-shadow: none;
  width: 12px;
  height: 9px;
  border-radius: 0;
  position: relative;
}
.focus-indicator--split .focus-indicator__dot::before,
.focus-indicator--split .focus-indicator__dot::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.focus-indicator--split .focus-indicator__dot::before { left: 0; }
.focus-indicator--split .focus-indicator__dot::after  { right: 0; }
/* Color variants: green */
.focus-indicator--green.focus-indicator--split .focus-indicator__dot::before {
  border-right: 5px solid #5a9a5a;
  filter: drop-shadow(0 0 3px rgba(90, 154, 90, 0.55));
}
.focus-indicator--green.focus-indicator--split .focus-indicator__dot::after {
  border-left: 5px solid #5a9a5a;
  filter: drop-shadow(0 0 3px rgba(90, 154, 90, 0.55));
}
/* Color variants: yellow */
.focus-indicator--yellow.focus-indicator--split .focus-indicator__dot::before {
  border-right: 5px solid #d4ad3e;
  filter: drop-shadow(0 0 3px rgba(212, 173, 62, 0.55));
}
.focus-indicator--yellow.focus-indicator--split .focus-indicator__dot::after {
  border-left: 5px solid #d4ad3e;
  filter: drop-shadow(0 0 3px rgba(212, 173, 62, 0.55));
}
/* Color variants: red */
.focus-indicator--red.focus-indicator--split .focus-indicator__dot::before {
  border-right: 5px solid #c75a5a;
  filter: drop-shadow(0 0 3px rgba(199, 90, 90, 0.55));
}
.focus-indicator--red.focus-indicator--split .focus-indicator__dot::after {
  border-left: 5px solid #c75a5a;
  filter: drop-shadow(0 0 3px rgba(199, 90, 90, 0.55));
}

/* R98: Report advisory row — surfaces when split-window state has accumulated */
.focus-report__advisory {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.9rem 0.65rem;
  background: rgba(212, 173, 62, 0.08);
  border-left: 3px solid #d4ad3e;
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--dark-navy);
}
.focus-report__advisory-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a5a3a;
  margin-bottom: 0.3rem;
}
.focus-report__advisory-body { color: var(--charcoal, #333); }
.focus-report__advisory-detail {
  display: block;
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: 0.4rem;
}

/* Hide tracker entirely on mobile (per author spec — option B) */
@media (max-width: 700px) {
  .focus-indicator,
  .focus-report { display: none !important; }
}

/* ===== R98: Link-share (section URL copy) ===== */
.link-share {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.link-share[hidden] { display: none !important; }
.link-share:not([hidden]) { display: flex; }
.link-share.is-open { opacity: 1; }

.link-share__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 33, 50, 0.55);
  cursor: pointer;
}

.link-share__card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.32);
  padding: 1.4rem 1.5rem 1.3rem;
  max-width: 520px;
  width: calc(100% - 2rem);
  transform: translateY(-12px);
  transition: transform 0.2s ease;
}
.link-share.is-open .link-share__card { transform: translateY(0); }

.link-share__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
/* Heading anchor-link icon — small chain-link beside prose-section headings.
   Lets teachers copy a direct link to a section for Google Classroom.
   The SVG uses currentColor; we set color to gold. Hidden until the heading
   is hovered/focused on pointer devices; faintly visible on touch. */
.heading-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 0.95em;
  height: 0.55em;
  margin-left: 0.45em;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.heading-link svg { width: 100%; height: 100%; display: block; }
h1:hover > .heading-link,
h2:hover > .heading-link,
h3:hover > .heading-link,
h4:hover > .heading-link,
.subhead-title:hover > .heading-link,
.section-opener__title:hover > .heading-link,
.chapter-opener__title:hover > .heading-link,
.heading-link:focus-visible {
  opacity: 0.8;
}
.heading-link:hover { opacity: 1 !important; transform: scale(1.1); }
.heading-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; opacity: 1; }
@media (hover: none) {
  .heading-link { opacity: 0.55; }
}
.link-share__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin: 0;
}
.link-share__close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--charcoal, #333);
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
}
.link-share__close:hover { background: rgba(0,0,0,0.06); }

.link-share__heading {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 17px;
  color: var(--dark-navy);
  margin: 0 0 1rem;
  line-height: 1.35;
}

.link-share__url-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.link-share__url {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  color: var(--dark-navy);
  background: var(--off-white, #fffaf0);
  overflow-x: auto;
  white-space: nowrap;
}
.link-share__url:focus { outline: none; border-color: var(--gold); }

.link-share__copy {
  background: var(--dark-navy);
  color: var(--cream);
  border: 1px solid var(--dark-navy);
  border-radius: 4px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  flex-shrink: 0;
  min-width: 88px;
}
.link-share__copy:hover { background: #2a3556; }
.link-share__copy:active { transform: translateY(1px); }
.link-share__copy.is-copied {
  background: #3d6b3d;
  border-color: #3d6b3d;
}

.link-share__hint {
  font-size: 12px;
  color: var(--mid-gray);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .link-share__card { padding: 1.2rem 1.1rem 1.1rem; }
  .link-share__url { font-size: 11px; }
  .link-share__url-row { flex-direction: column; }
  .link-share__copy { width: 100%; }
}

/* ===== R98: Search feature ===== */
.top-nav__search-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--cream);
  width: 36px;
  height: 28px;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.top-nav__search-btn:hover,
.top-nav__search-btn[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
}
.top-nav__search-btn svg {
  width: 18px;
  height: 18px;
}

.search-popup {
  position: fixed;
  top: 56px;
  left: 50%;
  width: min(760px, calc(100% - 3rem));
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  z-index: 95;
  transform: translate(-50%, calc(-100% - 80px));
  transition: transform 0.25s ease;
}
.search-popup[hidden] { display: none; }
.search-popup.is-open { transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .search-popup {
    width: calc(100% - 1.5rem);
    top: 52px;
  }
}

.search-popup__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem 1.5rem 1.1rem;
}

.search-popup__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-popup__input {
  flex: 1;
  font-size: 16px;
  padding: 0.55rem 0.85rem;
  border: 2px solid var(--light-gray);
  border-radius: 4px;
  font-family: inherit;
  color: var(--dark-navy);
  background: var(--white);
}
.search-popup__input:focus {
  outline: none;
  border-color: var(--gold);
}

.search-popup__close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--charcoal, #333);
  border-radius: 4px;
  transition: background 0.12s;
}
.search-popup__close:hover { background: rgba(0,0,0,0.06); }

.search-popup__suggestions[hidden],
.search-popup__results-meta[hidden] { display: none !important; }
.search-popup__suggestions {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.search-popup__suggestions-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  flex-shrink: 0;
}
.search-popup__suggestion {
  background: var(--off-white, #fffaf0);
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  padding: 0.3rem 0.75rem;
  font-size: 12px;
  cursor: pointer;
  color: var(--dark-navy);
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.search-popup__suggestion:hover {
  background: var(--cream);
  border-color: var(--gold);
}

.search-popup__results-meta {
  margin-top: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}
.search-popup__results-count {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.search-popup__results-legend {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.search-popup__legend-item {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  font-family: var(--font-heading);
}
.search-popup__legend-item--green {
  background: #c8e6c8;
  color: #2f5a2f;
}
.search-popup__legend-item--yellow {
  background: #fae9b8;
  color: #6e5012;
}

.search-popup__results-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  background: var(--white);
}

.search-popup__result {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.95rem;
  border: 0;
  border-bottom: 1px solid #f0e8d2;
  border-left: 4px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s, border-left-color 0.12s, color 0.12s;
}
.search-popup__result:last-child { border-bottom: none; }
.search-popup__result:hover { background: rgba(0,0,0,0.03); }

.search-popup__result--green {
  border-left-color: #5a9a5a;
  background: rgba(200, 230, 200, 0.20);
}
.search-popup__result--green:hover {
  background: rgba(200, 230, 200, 0.35);
}
.search-popup__result--yellow {
  border-left-color: #d4ad3e;
  background: rgba(250, 233, 184, 0.22);
}
.search-popup__result--yellow:hover {
  background: rgba(250, 233, 184, 0.40);
}

.search-popup__result--visited {
  background: rgba(120, 120, 120, 0.08) !important;
  border-left-color: #909090 !important;
}
.search-popup__result--visited .search-popup__result-title {
  color: var(--mid-gray);
  text-decoration: line-through;
  text-decoration-color: rgba(120, 120, 120, 0.5);
}
.search-popup__result--visited .search-popup__result-page {
  color: var(--mid-gray);
}

.search-popup__result-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
}
.search-popup__result-check {
  display: none;
  color: #5a9a5a;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.search-popup__result--visited .search-popup__result-check {
  display: inline;
  color: var(--mid-gray);
}
.search-popup__result-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-navy);
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-popup__result-page {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid-gray);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.search-popup__empty {
  margin-top: 0.95rem;
  padding: 1.2rem;
  text-align: center;
  color: var(--mid-gray);
  font-style: italic;
  font-size: 14px;
  background: var(--off-white, #fffaf0);
  border-radius: 4px;
}

@media (max-width: 1000px) {
  .search-popup__inner { padding: 0.85rem 1rem 1rem; }
  .search-popup__suggestions-label { display: none; }
  .search-popup__results-legend .search-popup__legend-item { font-size: 9px; }
}
.top-nav__links a {
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.top-nav__links a:hover { color: var(--gold); text-decoration: none; }

/* Tools dropdown menu */
.top-nav__menu {
  position: relative;
  display: inline-block;
}
.top-nav__menu-btn {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.top-nav__menu-btn:hover,
.top-nav__menu-btn[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
}

/* Home button — sits before the hamburger, returns to chainsofbelief.com.
   Matches the hamburger's gold-outline icon-button styling. Stays visible on
   mobile since the title now goes to the cover, not the home site. */
.top-nav__home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 34px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex: none;
}
.top-nav__home-btn:hover { background: var(--gold); color: var(--dark-navy); text-decoration: none; }
.top-nav__home-btn svg { display: block; }

/* Future-feature placeholder icons (map, chains). Visually faded — they
   sit in the nav so the layout is settled before the actual widgets ship.
   Currently disabled; aria-disabled and pointer-events:none keep them
   non-interactive until the implementing rounds activate them. */
.top-nav__hook-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--cream);
  opacity: 0.32;
  border-radius: 3px;
  cursor: not-allowed;
  font-family: inherit;
  transition: opacity 0.15s;
  pointer-events: auto;  /* keep tooltip working */
}
.top-nav__hook-icon[disabled] {
  cursor: not-allowed;
}
/* Enabled hook icons, but NO data on the current page: render in a muted
   slate-blue so they read as clearly inactive-for-this-page (distinct from the
   gold "available" state, which means there IS data here). Still clickable. */
#chain-hook-btn:not([disabled]),
#map-hook-btn:not([disabled]) {
  opacity: 0.9;
  cursor: pointer;
  color: #7FA8C9; /* light slate blue = "no data on this page" */
}
#chain-hook-btn:not([disabled]):hover,
#map-hook-btn:not([disabled]):hover {
  opacity: 1;
  color: #9BC0DC;
  border-color: var(--gold-soft);
}
/* "Data available on this page" state — toggled per-page by JS. The icon shifts
   to the gold accent, gains a soft drop shadow so it sits "up" off the page, and
   lifts a touch. Persistent (no looping motion) so it signals availability
   without competing with reading. Hover lifts it further. */
.top-nav__hook-icon--available {
  color: var(--gold) !important;
  opacity: 1 !important;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 3px rgba(60, 42, 20, 0.35));
  transition: transform 0.18s ease, filter 0.18s ease, color 0.25s ease;
}
.top-nav__hook-icon--available:hover {
  transform: translateY(-2.5px);
  filter: drop-shadow(0 4px 6px rgba(60, 42, 20, 0.4));
}
/* respect reduced-motion: drop the lift transition, keep the color/shadow cue */
@media (prefers-reduced-motion: reduce) {
  .top-nav__hook-icon--available { transition: none; transform: none; }
  .top-nav__hook-icon--available:hover { transform: none; }
}
.top-nav__hook-icon:hover {
  opacity: 0.5;  /* small hover feedback so the user sees they're real elements */
}
.top-nav__hook-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.top-nav__menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  min-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: none;
  z-index: 100;
  padding: 0.5rem 0;
  /* Never taller than the space below the nav; scroll if the item list is long.
     Fixes the menu being uncloseably tall on short viewports (landscape phones,
     and long activity lists in portrait). dvh accounts for mobile browser chrome
     (URL bar) so the menu doesn't overflow the visible area on phones. */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.top-nav__menu-panel.is-open { display: block; }
.top-nav__menu-panel a {
  display: flex !important;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 1rem;
  color: var(--charcoal) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  font-weight: 400;
  border-bottom: 1px solid var(--off-white);
  text-decoration: none;
  transition: background 0.1s;
}
/* button menu items (Map, Chains) must match the <a> items exactly */
.top-nav__menu-panel button.hamburger-menu__item {
  gap: 0.85rem; padding: 0.65rem 1rem; color: var(--charcoal) !important;
  font-size: 13px !important; font-weight: 400;
  border-bottom: 1px solid var(--off-white); transition: background 0.1s;
}
.top-nav__menu-panel button.hamburger-menu__item strong { color: var(--dark-navy); font-weight: 700; font-size: 13px; }
.top-nav__menu-panel button.hamburger-menu__item small { color: var(--mid-gray); font-size: 11px; font-style: italic; }
.top-nav__menu-panel button.hamburger-menu__item:hover { background: var(--off-white); color: var(--dark-navy) !important; }
.top-nav__menu-panel a:last-child { border-bottom: none; }
.top-nav__menu-panel a:hover {
  background: var(--off-white);
  color: var(--dark-navy) !important;
}
.top-nav__menu-panel a strong {
  color: var(--dark-navy);
  font-weight: 700;
  font-size: 13px;
}
.top-nav__menu-panel a small {
  color: var(--mid-gray);
  font-size: 11px;
  font-style: italic;
}

/* R196: Version switcher menu */
.top-nav__menu-intro {
  padding: 0.7rem 1rem 0.6rem;
  border-bottom: 1px solid var(--off-white);
}
.top-nav__menu-intro strong { font-size: 12.5px; color: var(--dark-navy); display: block; margin-bottom: 0.2rem; }
.top-nav__menu-intro p { font-size: 11px; color: var(--mid-gray); margin: 0; line-height: 1.4; }
.version-menu__badge {
  display: inline-block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-navy);
  background: var(--gold);
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.version-menu__item--current {
  background: rgba(200, 168, 75, 0.10);
  border-left: 3px solid var(--gold);
  padding-left: calc(1rem - 3px);
}
/* The current-version item sits on a gold tint; its muted small text needs a
   darker ink than the on-white small text to clear WCAG AA (was 2.53). */
.version-menu__item--current small { color: #5a5240; }
.version-menu__item--soon { opacity: 0.62; cursor: default; }
.version-menu__item--soon:hover { background: transparent; }
/* R198b: greyed-out, non-active menu items (planned-for-future reading levels) */
.top-nav__menu-item--disabled { opacity: 0.5; cursor: default; }
.top-nav__menu-item--disabled:hover { background: transparent; }
.top-nav__menu-item--disabled strong { color: var(--mid-gray); }
.top-nav__menu-item--disabled .top-nav__menu-icon { color: var(--mid-gray); }

/* Section labels inside the Tools menu (chapter-specific vs book-wide) */
.tools-menu__section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep, #7A5E12);
  padding: 0.65rem 1rem 0.35rem;
  margin: 0;
}
.tools-menu__section-label--divider {
  border-top: 1px solid var(--off-white);
  margin-top: 0.35rem;
  padding-top: 0.7rem;
}
.tools-menu__empty {
  font-size: 12.5px;
  color: var(--mid-gray);
  font-style: italic;
  padding: 0.4rem 1rem 0.7rem;
}

/* Current-item highlight: the chapter activity/quiz the user is currently
   viewing gets a distinct background tint + gold left border so they can
   see at a glance which tool they're inside. */
.top-nav__menu-panel a.is-current {
  background: rgba(200, 168, 75, 0.10);
  border-left: 3px solid var(--gold);
  padding-left: calc(1rem - 3px);
}
.top-nav__menu-panel a.is-current:hover {
  background: rgba(200, 168, 75, 0.18);
}
.tools-menu__current-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(200, 168, 75, 0.15);
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* "Other chapters" expandable: collapsed by default; opens to reveal
   activities/quizzes for chapters other than the one being viewed. */
.tools-menu__other-chapters {
  border-top: 1px solid var(--off-white);
  margin-top: 0.35rem;
}
.tools-menu__other-chapters-summary {
  cursor: pointer;
  list-style: none;
  display: block;
  user-select: none;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  border: none;
  margin: 0;
}
.tools-menu__other-chapters-summary::-webkit-details-marker { display: none; }
.tools-menu__other-chapters[open] .tools-menu__other-chapters-summary {
  color: var(--gold-deep, #7A5E12);
}
.tools-menu__other-chapters-body {
  padding-bottom: 0.4rem;
}
.tools-menu__sub-chapter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--dark-navy);
  opacity: 0.85;
  padding: 0.5rem 1rem 0.2rem;
  letter-spacing: 0.04em;
}

/* Translate panel content (not link list) */
.top-nav__menu-panel--translate {
  padding: 0.85rem 1rem 0.85rem;
  width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}
.translate-panel__intro strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark-navy);
  font-size: 13.5px;
  margin-bottom: 0.3rem;
}
.translate-panel__intro p {
  font-size: 12px;
  color: var(--mid-gray);
  line-height: 1.45;
  margin: 0 0 0.85rem;
  font-style: italic;
}
.translate-panel__widget {
  border-top: 1px solid var(--off-white);
  padding-top: 0.7rem;
  min-height: 2.5rem;
}
/* Tame the Google Translate widget styling so it does not look out of place */
.translate-panel__widget .goog-te-gadget {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--charcoal) !important;
}
.translate-panel__widget select.goog-te-combo {
  margin: 0.25rem 0 0.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 13px;
  border: 1px solid var(--light-gray);
  border-radius: 3px;
  background: var(--white);
  color: var(--dark-navy);
  width: 100%;
}
.translate-panel__future {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--off-white);
  color: var(--mid-gray);
  font-size: 11px;
}
/* Hide Google Translate's "Translated to: X" banner at the top.
   Google injects this when a translation is active and it pushes the
   whole page down, blocking our top nav. Hide every form of the banner
   and reset any body offset Google applies. The language menu popup
   (goog-te-menu-frame) is NOT hidden — that's the popup we need. */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; height: 0 !important; }
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
/* Google Translate sets body { top: 40px !important } to push content down for its banner.
   Override aggressively. Use position: static so the top: 40px does nothing even if Google
   sets it inline. */
body { top: 0 !important; position: static !important; }
html { margin-top: 0 !important; }
/* Make sure Google's language popup floats above the rest of the page chrome */
.goog-te-menu-frame { z-index: 2147483647 !important; }

/* Top nav button with text label */
.top-nav__menu-btn-text { margin-left: 0.15rem; }
@media (max-width: 760px) {
  .top-nav__menu-btn-text { display: none; }
}
.top-nav__menu-icon {
  color: var(--gold);
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* =========================================================
   PAGE / SECTION CONTAINERS
   ========================================================= */
.page {
  /* No-op now. The .page-content container handles width and padding. */
}
.page--wide { /* no-op */ }
.prose {
  max-width: var(--max-prose);
  margin: 0 auto;
}
.prose > p { margin: 0 0 1.1em; }
.prose > p:last-child { margin-bottom: 0; }

/* =========================================================
   BOOK COVER (full screen hero)
   ========================================================= */
.book-cover {
  /* No min-height — let content size naturally. Allow scrolling if oversized. */
  background: var(--dark-navy);
  color: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: visible;
}
@media (max-width: 1000px) {
  .book-cover { padding: 2rem 1.25rem; }
}
.book-cover::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--gold);
}
.book-cover::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
  background: var(--gold);
}
.book-cover__inner {
  max-width: var(--max-content); margin: 0 auto; width: 100%;
}
.book-cover__chain {
  display: inline-block;
  width: clamp(78px, 11vw, 128px);
  height: auto;
  flex: 0 0 auto;
  transform: rotate(-12deg);
}
@media (max-width: 1000px) {
  .book-cover__chain { width: 72px; }
}

/* Reviewer-copy notice — sits in the lower-right of the cover, below the
   chain icon. Muted styling so it doesn't compete with the title and
   thesis. On narrow screens, falls back to normal flow at the bottom. */
.book-cover__notice {
  position: absolute;
  right: 2rem;
  bottom: 2.5rem;
  max-width: 320px;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 234, 213, 0.78);
  font-size: 11.5px;
  line-height: 1.45;
  border-radius: 0 3px 3px 0;
  z-index: 4;
}
.book-cover__notice-head {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.book-cover__notice-body {
  margin-bottom: 0.5rem;
  font-style: italic;
}
.book-cover__notice-body a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dotted rgba(200, 168, 75, 0.5);
}
.book-cover__notice-body a:hover {
  border-bottom-color: var(--gold);
}
.book-cover__notice-copy {
  font-size: 10.5px;
  color: rgba(244, 234, 213, 0.45);
  letter-spacing: 0.04em;
  font-style: normal;
}
@media (max-width: 900px) {
  /* Below 900px the cover gets crowded — drop the notice into normal flow
     at the bottom of the cover so it doesn't collide with the meta block. */
  .book-cover__notice {
    position: static;
    margin: 2rem auto 0;
    max-width: var(--max-content);
    width: 100%;
  }
}
.book-cover__beta {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  z-index: 5;
}
.book-cover__beta-tag {
  background: var(--red);
  color: var(--white);
  font-size: 10px; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 2px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}
.book-cover__beta-note {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  letter-spacing: 0.04em;
}
@media (max-width: 1000px) {
  .book-cover__beta-note { display: none; }
}
.book-cover__badge {
  display: inline-block;
  background: var(--red); color: var(--gold);
  padding: 0.5rem 1.5rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase;
}
.book-cover__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.75rem, 7.5vw, 5rem);
  line-height: 0.95;
  margin: 1rem 0 0;
  letter-spacing: -0.02em;
  color: var(--white);
}
.book-cover__title .highlight { color: var(--gold); }
.book-cover__title-row { display: flex; align-items: center; }
.book-cover__title-row .highlight { margin-right: 1.1rem; }
.book-cover__subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  color: var(--cream);
  margin: 1.4rem 0 0;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
.book-cover__subtitle::before {
  /* small gold rule above the thesis to set it apart from the title */
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: 1rem;
  opacity: 0.7;
}
.book-cover__author {
  margin: 1.5rem 0 0;
  display: flex; align-items: baseline; gap: 1rem;
}
.book-cover__author-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase;
}
.book-cover__author-name {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 1.25rem;
  color: var(--white);
}
.book-cover__meta {
  margin-top: 1.75rem;
  border-top: 2px solid var(--gold);
  padding-top: 1.1rem;
  display: grid; gap: 1rem;
  max-width: 36rem;
}
.book-cover__meta-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.book-cover__meta-value {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.35;
}
.book-cover__cta {
  margin-top: 2rem;
}
.book-cover__cta a {
  display: inline-block;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 0.8rem 2rem;
  font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; font-size: 13px;
}
.book-cover__cta a:hover {
  background: var(--gold); color: var(--dark-navy); text-decoration: none;
}

/* =========================================================
   TABLE OF CONTENTS
   ========================================================= */
.toc {
  background: var(--cream);
  border-top: 1px solid var(--off-white);
}
.toc__header {
  text-align: center;
  margin-bottom: 3rem;
}
.toc__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--dark-red);
  margin-bottom: 0.5rem;
}
.toc__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.25rem, 4vw, 3rem);
  color: var(--dark-navy);
  margin: 0;
  letter-spacing: -0.02em;
}
.toc__rule {
  width: 80px; height: 3px; background: var(--gold);
  margin: 1.25rem auto 0;
}
.toc__group {
  margin-bottom: 3rem;
}
.toc__group-label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--mid-gray);
  margin: 0 0 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--light-gray);
}
.toc__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0.5rem;
}
.toc__item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border-left: 4px solid var(--gold);
  border-radius: 0 4px 4px 0;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
}
.toc__item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
}
.toc__item--intro { /* v116: intro now uses default styling for consistency with Ch 1 */ }
.toc__item--placeholder {
  background: var(--off-white);
  border-left-color: var(--mid-gray);
  opacity: 0.85;
}
.toc__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
}
.toc__item--intro .toc__num { /* v116: intro num now uses default gold styling */ }
.toc__item--placeholder .toc__num { color: var(--mid-gray); }
.toc__body {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.toc__item-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--dark-navy);
  line-height: 1.25;
}
.toc__item-desc {
  font-size: 13px;
  color: var(--mid-gray);
  font-style: italic;
}
.toc__pages {
  font-size: 12px;
  color: var(--mid-gray);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* =========================================================
   CHAPTER / SECTION HEADERS
   ========================================================= */
.chapter-opener {
  background: var(--dark-navy);
  color: var(--cream);
  border-bottom: 4px solid var(--gold);
  position: relative;
}
.chapter-opener__inner {
  max-width: var(--max-content);
  margin: 0 auto;
}
.chapter-opener__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.8rem;
  display: inline-block;
  background: var(--red); padding: 0.4rem 1rem;
}
.chapter-opener__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  margin: 1rem 0 0;
  color: var(--white);
  letter-spacing: -0.01em;
}
.chapter-opener__question {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--gold);
  margin: 1.25rem 0 0;
  font-weight: 400;
}

/* =========================================================
   CHAPTER COVER PAGE
   The full-bleed page that opens each chapter. Distinct from
   the book cover (which is even bigger) and from per-section
   chapter-opener (which is a header above prose).
   ========================================================= */
.chapter-cover {
  background: var(--dark-navy);
  color: var(--cream);
  margin: -2rem -2rem 0;
  padding: 4rem 2rem 5rem;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,168,75,0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(178,58,72,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.chapter-cover__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.chapter-cover__number {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--dark-navy);
  background: var(--gold);
  padding: 0.5rem 1.25rem;
  margin-bottom: 1.75rem;
}
.chapter-cover__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 1.5rem;
  letter-spacing: -0.015em;
}
.chapter-cover__subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  color: var(--gold);
  line-height: 1.4;
  margin: 0 0 2.5rem;
  max-width: 640px;
}
.chapter-cover__epigraph {
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 0 0 2rem;
  max-width: 560px;
}
.chapter-cover__epigraph-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--cream);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.chapter-cover__epigraph-attr {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.chapter-cover__promise {
  border-top: 1px solid rgba(245,238,222,0.25);
  padding-top: 1.5rem;
  margin-top: 1rem;
  max-width: 600px;
}
.chapter-cover__promise-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.5rem;
}
.chapter-cover__promise-text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cream);
  margin: 0;
}

@media (max-width: 1000px) {
  .chapter-cover {
    margin: -1.5rem -1.25rem 0;
    padding: 3rem 1.25rem 3.5rem;
    min-height: calc(100vh - 160px);
  }
}

/* Section opener (lighter than chapter) */
.section-opener {
  margin: 0 0 1rem;
}
.section-opener__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--dark-red);
  margin-bottom: 0.5rem;
}
.section-opener__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0;
  color: var(--dark-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.section-opener__rule {
  width: 60px; height: 3px; background: var(--gold);
  margin: 1rem 0 0;
}
.section-opener__lede {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--med-navy);
  margin: 1.25rem 0 0;
  max-width: var(--max-prose);
  line-height: 1.5;
}

/* Sub-section (within a section) */
.subhead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--dark-red);
  margin: 2.75rem 0 0.5rem;
}
/* First subhead in any container shouldn't add top space — the container's
   own padding/margin already handles separation from preceding elements. */
.prose > .subhead:first-child,
.page > .prose > .subhead:first-child,
.subhead:first-of-type:first-child {
  margin-top: 0;
}
.page > .prose:first-child > .subhead:first-child { margin-top: 0; }
.subhead-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--dark-navy);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.subhead-rule {
  width: 60px; height: 3px; background: var(--gold);
  margin: 0 0 1.25rem;
}

/* =========================================================
   STANDARDS / ROADMAP / META PAGES
   ========================================================= */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}
.meta-card {
  background: var(--white);
  border-top: 4px solid var(--gold);
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 0 0 4px 4px;
}
.meta-card--blue { border-top-color: var(--blue); }
.meta-card--red { border-top-color: var(--red); }
.meta-card--brown { border-top-color: var(--brown); }
.meta-card__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--dark-navy);
  margin: 0 0 1rem;
}
.meta-card__list { list-style: none; margin: 0; padding: 0; }
.meta-card__list li { margin-bottom: 0.85rem; font-size: 14px; line-height: 1.5; }
.meta-card__list li:last-child { margin-bottom: 0; }
.meta-card__list strong { color: var(--dark-red); display: block; margin-bottom: 0.15rem; }
.meta-card__list em { color: var(--mid-gray); font-style: italic; }

.targets {
  background: var(--dark-navy);
  color: var(--cream);
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
  margin-top: 2rem;
}
.targets__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.85rem;
}
.targets ul { margin: 0; padding-left: 1.25rem; }
.targets li { margin-bottom: 0.5rem; }
.targets li:last-child { margin-bottom: 0; }

/* Roadmap */
.roadmap {
  display: grid; gap: 0.85rem;
  max-width: var(--max-content);
  margin: 0 auto;
}
.roadmap__item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: stretch;
  background: var(--white);
  border-left: 4px solid var(--gold);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  border-radius: 0 4px 4px 0;
}
.roadmap__item:hover {
  transform: translateX(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  text-decoration: none; color: inherit;
}
.roadmap__num {
  background: var(--dark-navy);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
}
.roadmap__item:nth-child(2) .roadmap__num { background: var(--brown); }
.roadmap__item:nth-child(3) .roadmap__num { background: var(--red); }
.roadmap__item:nth-child(4) .roadmap__num { background: var(--med-navy); }
.roadmap__item:nth-child(5) .roadmap__num { background: var(--dark-red); }
.roadmap__item:nth-child(6) .roadmap__num { background: var(--gold); color: var(--charcoal); }
.roadmap__item:nth-child(7) .roadmap__num { background: var(--charcoal); }
.roadmap__body {
  padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  justify-content: center;
}
.roadmap__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--dark-navy);
  line-height: 1.2;
}
.roadmap__desc {
  font-size: 13px;
  color: var(--mid-gray);
  font-style: italic;
  line-height: 1.4;
}

/* =========================================================
   CALLOUTS — sized to content, semantic markup
   ========================================================= */
.callout {
  margin: 1.75rem 0;
  border-radius: 4px;
  overflow: hidden;
}
.callout--full-width {
  clear: both;
}
.callout__header {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.callout__body {
  padding: 1rem 1.25rem 1.1rem;
}
.callout__body p:last-child { margin-bottom: 0; }

/* Insight callout — author voice meta-commentary
   "Why This Section Says What It Says" pattern.
   Cream background, gold left rule, dark-red uppercase overline. */
.callout--insight {
  background: var(--cream);
  border-left: 4px solid var(--gold);
  padding: 1.1rem 1.3rem 1.2rem;
  border-radius: 4px;
}
.callout--insight .callout__overline {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin: 0 0 0.65rem;
}
.callout--insight p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 0.7rem;
}
.callout--insight p:last-child { margin-bottom: 0; }
.callout--insight blockquote {
  margin: 0.8rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
  font-style: italic;
}

/* Breakdown callout — structured "what a thing was" infographic.
   Built for the encomienda (§1.4a): an entrustment whose whole meaning
   lives in the GAP between what the colonist owed and what he took.
   The owed/took split is carried by column label + position + tag,
   never by color alone (color-not-sole-signal). Earth-tone palette. */
.callout--breakdown {
  background: var(--cream);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.15rem 1.3rem 1.25rem;
  margin: 1.75rem 0;
}
.callout--breakdown .breakdown__overline {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dark-red);
  margin: 0 0 0.3rem;
}
.callout--breakdown .breakdown__term {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 700; font-style: italic;
  color: var(--dark-navy);
  margin: 0 0 0.2rem;
}
.callout--breakdown .breakdown__gloss {
  font-size: 14px; line-height: 1.5; color: var(--charcoal);
  margin: 0 0 0.95rem;
}
.callout--breakdown .breakdown__cols {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
}
.callout--breakdown .breakdown__col {
  flex: 1 1 220px;
  background: #fff;
  border-radius: 4px;
  padding: 0.75rem 0.9rem 0.85rem;
}
.callout--breakdown .breakdown__col--owed { border-left: 4px solid var(--gold); }
.callout--breakdown .breakdown__col--took { border-left: 4px solid var(--dark-red); }
.callout--breakdown .breakdown__col-head {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dark-navy);
  margin: 0 0 0.45rem;
}
.callout--breakdown .breakdown__col-tag {
  font-size: 10px; letter-spacing: 0.04em; font-weight: 700;
  text-transform: uppercase;
}
.callout--breakdown .breakdown__col--owed .breakdown__col-tag { color: var(--gold-deep); }
.callout--breakdown .breakdown__col--took .breakdown__col-tag { color: var(--dark-red); }
.callout--breakdown .breakdown__col ul {
  margin: 0; padding-left: 1.05rem; font-size: 14px; line-height: 1.5;
}
.callout--breakdown .breakdown__col li { margin: 0.25rem 0; }
.callout--breakdown .breakdown__gap {
  margin: 0.95rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--gold-soft);
  font-size: 14.5px; line-height: 1.55; color: var(--charcoal);
}
.callout--breakdown .breakdown__gap strong { color: var(--dark-red); }

/* Beacon refrain — used for short, recurring author-voice lines that
   reappear across the book ("Men die. Ideas are immortal." etc.).
   Visually distinct so students recognize the pattern; both instances
   render identically so they read as the same refrain. */
.beacon-refrain {
  display: block;
  font-family: var(--font-display, var(--font-heading));
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--dark-red);
  letter-spacing: 0.005em;
  text-align: center;
  margin: 1.6rem auto 0.6rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  background: var(--cream);
  max-width: 680px;
  line-height: 1.3;
}
.beacon-refrain .beacon-refrain__sub {
  display: block;
  font-size: 0.62em;
  font-weight: 600;
  font-style: normal;
  color: var(--mid-gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.45rem;
}
.beacon-refrain a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--gold);
}
.beacon-refrain a:hover {
  color: var(--dark-navy);
  border-bottom-color: var(--dark-navy);
}

/* Section-closing beacon — for multi-paragraph author-voice closes like
   "Whether the hammer was real or not didn't really matter..." Distinct
   from .beacon-refrain because it carries narrative weight, not just a
   short refrain. Used at the end of a section to land its argument.
   Updated R64: larger text on the blue italic body and red final line
   so the section close lands with appropriate weight; "There was no
   hammer" gets its own line via <br> in markup. */
.beacon-section-close {
  display: block;
  margin: 1.6rem auto 0.6rem;
  padding: 1.4rem 1.5rem 1.5rem;
  max-width: 680px;
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  font-family: var(--font-display, var(--font-heading));
  line-height: 1.5;
  color: var(--dark-navy);
  text-align: center;
}
.beacon-section-close p {
  margin: 0 0 0.8rem;
  font-weight: 700;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--dark-red);
  line-height: 1.3;
}
.beacon-section-close p:last-child {
  margin-bottom: 0;
}
/* R95/Batch 2 beacon format pass — all beacon paragraphs render as punch (red bold
   italic 1.5rem). Context that previously rendered navy inside the beacon has been
   moved out as regular prose preceding the beacon. The eye lands between the gold
   lines on the punch alone. */
.beacon-section-close p .beacon-section-close__break {
  display: block;
  margin-top: 0.3rem;
}

/* Compression-demo (R64) — visual companion to the Melanchthon Guide
   note. Shows the full historical record on the left, an arrow labeled
   "compressed by Melanchthon, 1546," and the seven-word compressed
   phrase on the right. The frames have a file-explorer aesthetic
   (filename + byte size in monospace) to drive the computer-compression
   analogy. Stacks on mobile. */
.compression-demo {
  display: block;
  margin: 0.6rem 0 1.4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--cream);
  border: 1px solid #e0d6bb;
  border-radius: 5px;
}
.compression-demo__header {
  margin-bottom: 0.85rem;
}
.compression-demo__overline {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.compression-demo__frames {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.85rem;
  align-items: stretch;
}
.compression-demo__frame {
  background: var(--white);
  border: 1px solid #d8d0bb;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.compression-demo__frame-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: var(--dark-navy);
  color: var(--cream);
  border-bottom: 2px solid var(--gold);
}
.compression-demo__file-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.compression-demo__bytes {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--cream);
  opacity: 0.85;
}
.compression-demo__frame-body {
  flex: 1 1 auto;
  padding: 0.7rem 0.85rem 0.85rem;
}
.compression-demo__frame-body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.compression-demo__frame--full .compression-demo__frame-body p {
  /* Optical hint that this is "lots of stuff" — slightly tighter
     leading so the block reads as dense */
  line-height: 1.5;
}
.compression-demo__compressed-phrase {
  font-family: var(--font-display, var(--font-heading)) !important;
  font-style: italic;
  font-size: 1.1rem !important;
  font-weight: 600;
  color: var(--dark-navy) !important;
  text-align: center;
  padding: 1.2rem 0.4rem 1.4rem;
  line-height: 1.4 !important;
}
.compression-demo__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: var(--gold);
  flex: 0 0 110px;
  align-self: center;
}
.compression-demo__arrow-svg {
  width: 80px;
  height: 24px;
  display: block;
}
.compression-demo__arrow-label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  text-align: center;
  line-height: 1.35;
}
.compression-demo__note {
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.9rem;
  background: rgba(218, 165, 32, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.compression-demo__note strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
.closing-line {
  margin: 1.6rem 0 0.6rem;
  padding: 0.6rem 0;
  font-family: var(--font-display, var(--font-heading));
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--dark-red);
  text-align: left;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: 1rem 0;
}
.dichotomy-line {
  margin: 1.4rem 0 0.4rem;
  text-align: center;
}

.compression-demo__note em {
  font-style: italic;
  color: var(--dark-red);
}

/* Mobile: stack vertically, rotate arrow to point downward */
@media (max-width: 720px) {
  .compression-demo__frames {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .compression-demo__arrow {
    flex-direction: row;
    flex: 0 0 auto;
    gap: 0.6rem;
    padding: 0.2rem 0;
  }
  .compression-demo__arrow-svg {
    transform: rotate(90deg);
    width: 60px;
    height: 20px;
  }
  .compression-demo__arrow-label {
    text-align: left;
  }
}

/* Closing-callback link — used in section closing prose to point back to a
   load-bearing passage earlier in the chapter (e.g., the loss-shaped-hole
   prose on page 51 referenced from the page-35 closing). Styled as a quiet
   gold-dotted link so it signals "follow this back" without competing with
   the closing prose's argumentative weight. */
.closing-callback {
  color: var(--dark-red);
  text-decoration: none;
  border-bottom: 1px dotted var(--gold);
  transition: border-bottom-color 0.15s ease, color 0.15s ease;
}
.closing-callback:hover, .closing-callback:focus {
  color: var(--dark-navy);
  border-bottom: 1px solid var(--dark-navy);
}

/* =========================================================
   FLIP CARD — for paired-opposite player cards (Kramer/Spee).
   The card is visually identical to a standard player-card
   (white background, thin colored left border, gold-bordered
   portrait, name/role/body/action/dichotomies). The ONLY
   visual addition is a small "↻ flip" affordance in the top-
   right corner of the card padding — absolutely positioned
   so it does NOT push body content down. CSS 3D rotation
   on click reveals the back face. Auto-flip-on-scroll JS
   adds .is-flipped when the card is mostly past the viewport.
   ========================================================= */
.flip-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--dark-navy);
  text-align: center;
  margin: 1.8rem 0 0.6rem;
  font-style: italic;
}
.flip-card-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 0.5rem auto 0;
}
.flip-card {
  position: relative;
  perspective: 1800px;
  margin: 0.4rem auto 1.8rem;
  /* Both faces use the standard .player-card grid (130px portrait
     + 1fr text). Container is sized to whichever face is taller. */
  min-height: 720px;
}
@media (max-width: 720px) {
  .flip-card { min-height: 1000px; }
}
@media (max-width: 480px) {
  .flip-card { min-height: 1220px; }
}
.flip-card__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.25, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0 !important;
  cursor: pointer;
}
.flip-card__face--back {
  transform: rotateY(180deg);
}
/* Corner-hint affordance — small, unobtrusive, absolutely positioned
   so it does NOT alter the card's standard player-card layout. Sits
   in the top-right corner of the card's padding area, inside the
   white card body. Lit gold on hover. */
.player-card__flip-hint {
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.22rem;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--gold-pale, #e6d4a8);
  border-radius: 3px;
  z-index: 5;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.player-card__flip-hint .player-card__flip-icon {
  font-size: 11px;
  color: var(--gold);
  line-height: 1;
}
/* Bulletproof hint visibility: only show the hint on the face that's
   currently facing the user. This prevents any possibility of the
   back-face hint bleeding through to the front view (which can happen
   in some browsers despite backface-visibility:hidden). */
.flip-card .flip-card__face--back .player-card__flip-hint { display: none; }
.flip-card.is-flipped .flip-card__face--front .player-card__flip-hint { display: none; }
.flip-card.is-flipped .flip-card__face--back .player-card__flip-hint { display: inline-flex; }
/* During the flip animation, hide ALL hints — prevents mirror-imaged
   hints from briefly appearing as faces rotate through 90deg and beyond.
   The .is-flipping class is added by JS at click time and removed by
   timeout matching the CSS transition duration. */
.flip-card.is-flipping .player-card__flip-hint { display: none !important; }
.flip-card:hover .player-card__flip-hint {
  color: var(--dark-navy);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 1);
}

/* Reveal callout (question-on-front, answer-on-reveal) — used for paired
   primary-source comparisons where students should think before clicking. */
.callout--reveal {
  background: var(--cream-light);
  border: 1px solid var(--gold-pale, #e6d4a8);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin: 1.4rem 0;
}

/* Vocabulary callout — used when introducing a category framework
   the book will reuse across chapters (perpetrator/victim/bystander/
   upstander). Visually anchored: gold left border, dark navy heading. */
.callout--vocabulary {
  background: var(--cream-light, #f4ebd5);
  border: 1px solid var(--gold-pale, #e6d4a8);
  border-left: 5px solid var(--gold);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 1.6rem 0 1.8rem;
}

/* ===== R83: looking-forward-callout ===== */
.looking-forward-callout {
  margin: 1.4rem 0;
  padding: 0.95rem 1.1rem 1.05rem;
  border: 1px solid var(--gold, #b08a2c);
  border-left: 4px solid var(--gold, #b08a2c);
  background: linear-gradient(180deg, rgba(176,138,44,0.06), rgba(176,138,44,0.02));
  border-radius: 4px;
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
}
.looking-forward-callout__overline {
  display: block;
  font-family: var(--font-display-serif, 'EB Garamond', Georgia, serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--dark-navy, #1c2a3a);
  margin-bottom: 0.4rem;
}
.looking-forward-callout__overline::before {
  content: "\2192  ";
  color: var(--gold, #b08a2c);
  font-weight: bold;
  font-style: normal;
}
.looking-forward-callout__body {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--charcoal, #2a2a2a);
}

/* ===== R83: whats-next-callout (dark-navy + gold pattern, mirrors .key-insight) ===== */
.whats-next-callout {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem 1.5rem 1.4rem;
  background: var(--dark-navy);
  color: var(--cream);
  border-left: 6px solid var(--gold);
  border-radius: 0 4px 4px 0;
}
.whats-next-callout__overline {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(200,168,75,0.3);
}
.whats-next-callout__body p {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream);
}
.whats-next-callout__body p:last-child { margin-bottom: 0; }
.whats-next-callout__body em {
  color: var(--gold);
  font-style: italic;
}

/* ===== R83: roadmap--pending ===== */
.roadmap__item--pending {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(0,0,0,0.02);
}
.roadmap__item--pending .roadmap__title::after {
  content: " (coming soon)";
  font-style: italic;
  font-weight: normal;
  font-size: 0.85em;
  color: rgba(0,0,0,0.5);
}

.callout--vocabulary .callout__body--lead {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--charcoal);
}
.callout--vocabulary .callout__body--coda {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 1.1rem 0 0;
  padding-top: 0.95rem;
  border-top: 1px dashed rgba(214, 167, 76, 0.55);
  color: var(--charcoal);
}
.callout--vocabulary .vocabulary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.callout--vocabulary .vocabulary-list li {
  background: var(--white);
  border-radius: 4px;
  padding: 0.85rem 1.1rem;
  margin: 0.55rem 0;
  border-left: 3px solid var(--dark-navy);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--charcoal);
}
.callout--vocabulary .vocabulary-list li strong {
  color: var(--dark-navy);
  font-family: var(--font-heading);
  font-size: 17px;
  letter-spacing: 0.01em;
}
.callout--reveal .callout__overline {
  font-family: var(--font-heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--dark-red);
  font-size: 13px; margin-bottom: 0.65rem;
}
.callout--reveal .reveal__pair {
  background: white; border-radius: 4px; padding: 1rem 1.25rem;
  margin: 0.5rem 0 1rem; border-left: 4px solid var(--dark-navy);
  font-size: 16px; line-height: 1.6;
}
.callout--reveal .reveal__pair p { margin: 0.4rem 0; }
.callout--reveal .reveal__pair p:first-child { margin-top: 0; }
.callout--reveal .reveal__pair p:last-child { margin-bottom: 0; }
.callout--reveal .reveal__question {
  font-family: var(--font-heading);
  font-style: italic; font-size: 1.05rem;
  color: var(--dark-navy);
  margin: 0.8rem 0;
  text-align: center;
}
/* --- callout--reveal readability + question/button grouping --- */
.callout--reveal > .callout__overline {
  font-size: 13px;
  letter-spacing: 0.16em;
}
.callout--reveal .reveal__question {
  font-size: 1.25rem;
  font-weight: 600;
  font-style: normal;
  text-align: left;
  margin: 0 0 0.55rem;
}
/* Each question + its reveal form one visually grouped block */
.callout--reveal details {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
.callout--reveal .reveal__question {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--gold);
}
.callout--reveal .reveal__question:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.4rem;
}
.callout--reveal details {
  margin-top: 0.6rem;
  padding-top: 0;
}
.callout--reveal details > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-red);
  list-style: none;
  padding: 0.4rem 0.6rem;
  background: var(--gold);
  color: var(--dark-navy);
  border-radius: 4px;
  display: inline-block;
}
.callout--reveal details > summary::-webkit-details-marker { display: none; }
.callout--reveal details > summary::before { content: '\25B6\00A0'; font-size: 0.8em; }
.callout--reveal details[open] > summary::before { content: '\25BC\00A0'; }
.callout--reveal details[open] > summary {
  background: var(--dark-navy); color: var(--cream);
}
.callout--reveal details ol {
  margin: 0.9rem 0 0.5rem; padding-left: 1.4rem;
}
.callout--reveal details ol li {
  margin-bottom: 0.7rem; line-height: 1.5;
}
.callout--reveal details ol li:last-child { margin-bottom: 0; }
.callout--reveal .reveal__coda {
  font-style: italic; font-size: 14px; color: var(--mid-gray);
  margin-top: 0.9rem; padding-top: 0.7rem;
  border-top: 1px solid var(--cream-darker, #e8e0c8);
}

/* Vocabulary callout (gold + navy) */
.callout--vocab .callout__header {
  background: var(--gold); color: var(--dark-navy);
}
.callout--vocab .callout__body {
  background: var(--navy); color: var(--light-gray);
}
.callout--vocab dl { margin: 0; }
.callout--vocab dt {
  font-weight: 700; color: var(--gold);
  font-size: 1.05rem; margin-top: 0.65rem;
}
.callout--vocab dt:first-child { margin-top: 0; }
.callout--vocab dd {
  margin: 0.1rem 0 0; font-style: italic; font-size: 13px;
  color: var(--light-gray); line-height: 1.45;
}

/* Did You Know callout */
.callout--did-you-know .callout__header {
  background: var(--dark-red); color: var(--gold);
}
.callout--did-you-know .callout__body {
  background: var(--off-white); color: var(--charcoal);
  border-left: 4px solid var(--dark-red);
  font-size: 14px;
}

/* Think of It This Way callout */
.callout--think-of-it .callout__header {
  background: var(--med-navy); color: var(--gold);
}
.callout--think-of-it .callout__body {
  background: var(--off-white);
  border-left: 4px solid var(--med-navy);
  font-style: italic;
  color: var(--charcoal);
}

/* Seeding Idea callout */
.callout--seeding .callout__header {
  background: var(--brown); color: var(--gold);
}
.callout--seeding .callout__body {
  background: var(--off-white); color: var(--charcoal);
  border-left: 4px solid var(--brown);
  font-size: 14px;
  font-style: italic;
}

/* In His/Her Own Words — quote */
.callout--quote {
  background: var(--navy); color: var(--white);
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
  position: relative;
  margin: 2rem 0;
}
.callout--quote::before {
  content: '"';
  position: absolute; top: 0.5rem; left: 1rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 4rem; color: var(--gold);
  line-height: 1;
  opacity: 0.5;
}
.callout--quote__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.85rem;
  padding-left: 2.5rem;
}
.callout--quote__text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
  padding-left: 2.5rem;
}
.callout--quote__attr {
  margin: 1rem 0 0;
  padding-left: 2.5rem;
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
}
.callout--quote__gloss {
  margin: 1rem 0 0;
  padding-left: 2.5rem;
  font-size: 13px;
  font-style: italic;
  color: var(--light-gray);
  line-height: 1.5;
  border-top: 1px solid rgba(200,168,75,0.3);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
}

/* ─── Flippable quote callout — 3D flip, click-anywhere ─────────────────────────
   Outer is a <button> so the entire surface is clickable + keyboard-accessible.
   Two shadows at rest (matching Stop-and-Think): outer drop-shadow + per-face
   box-shadow → visible elevation cue before any hover. Hover lifts further.
   Height is driven naturally by the FRONT face (position: relative, in flow).
   The BACK face is absolutely positioned over the front (inset: 0) and scrolls
   internally if its content exceeds the front-determined height — so the card
   itself never grows or shrinks when flipped (page layout stays stable). */
.callout--quote--flippable {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 2rem 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  perspective: 1400px;
  position: relative;
  filter: drop-shadow(0 6px 14px rgba(20, 32, 51, 0.20));
  transition: filter 0.22s ease, transform 0.22s ease;
}
.callout--quote--flippable:hover {
  filter: drop-shadow(0 10px 24px rgba(20, 32, 51, 0.30));
  transform: translateY(-2px);
}
.callout--quote--flippable:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.callout--quote--flippable .callout--quote__inner {
  position: relative;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.35, 1);
  transform-style: preserve-3d;
}
.callout--quote--flippable.is-flipped .callout--quote__inner {
  transform: rotateY(180deg);
}
.callout--quote--flippable .callout--quote__face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--navy);
  color: var(--white);
  padding: 1.5rem 1.75rem 1.4rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
}
.callout--quote--flippable .callout--quote__face::before {
  content: '"';
  position: absolute; top: 0.5rem; left: 1rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 4rem; color: var(--gold);
  line-height: 1;
  opacity: 0.5;
  pointer-events: none;
}
/* FRONT face: in flow, drives the inner's natural height */
.callout--quote--flippable .callout--quote__face--front {
  position: relative;
}
/* BACK face: absolutely positioned over the front, fills its dimensions exactly */
.callout--quote--flippable .callout--quote__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow: hidden; /* contains the scrollable inner */
}
.callout--quote--flippable .callout--quote__label {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.85rem;
  padding-left: 2.5rem;
}
/* Front-face scroll wrapper: passive — never scrolls; content drives card height */
.callout--quote--flippable .callout--quote__face--front .callout--quote__scroll {
  flex: 0 0 auto;
}
/* Back-face scroll wrapper: grows to fill available space; scrolls if overflow */
.callout--quote--flippable .callout--quote__face--back .callout--quote__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent 100%);
}
.callout--quote--flippable .callout--quote__face--back .callout--quote__scroll::-webkit-scrollbar {
  width: 6px;
}
.callout--quote--flippable .callout--quote__face--back .callout--quote__scroll::-webkit-scrollbar-thumb {
  background: rgba(200, 168, 75, 0.4);
  border-radius: 3px;
}
.callout--quote--flippable .callout--quote__text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--white);
  margin: 0;
  padding-left: 2.5rem;
}
.callout--quote--flippable .callout--quote__text--modern {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.55;
}
.callout--quote--flippable .callout--quote__attr {
  flex: 0 0 auto;
  margin: 0.85rem 0 0;
  padding-left: 2.5rem;
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
}
.callout--quote--flippable .callout--quote__pill {
  flex: 0 0 auto;
  display: inline-block;
  align-self: flex-start;
  margin: 0.6rem 0 0;
  margin-left: 2.5rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  pointer-events: none;
}

/* Key insight banner */
.key-insight {
  background: var(--med-navy);
  color: var(--white);
  padding: 1rem 1.5rem 1rem 2rem;
  border-left: 6px solid var(--gold);
  margin: 2rem 0;
  border-radius: 0 4px 4px 0;
}
.key-insight__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase;
  margin-right: 0.85rem;
}
.key-insight__text {
  font-style: italic;
  display: inline;
}

/* ===== R98: .key-insight--expandable — lean short summary on top, click to
   slide-down a longer detail. Used for Hold This Too callouts and other
   Key Insights where the content needs more than a one-line statement.
   Modern grid-template-rows transition (handles unknown content height). ===== */
.key-insight--expandable {
  padding: 0;
}
.key-insight__trigger {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1rem 1.5rem 1rem 2rem;
  position: relative;
  border-radius: 0;
  transition: transform 0.08s ease;
}
.key-insight__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.key-insight__trigger:hover {
  transform: translateY(-1px);
}
.key-insight__trigger:active {
  transform: translateY(0);
}
.key-insight__chevron {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--gold);
  font-size: 1.05em;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
.key-insight--expandable.is-expanded .key-insight__chevron {
  transform: rotate(180deg);
}
.key-insight__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.key-insight--expandable.is-expanded .key-insight__detail {
  grid-template-rows: 1fr;
}
.key-insight__detail-inner {
  overflow: hidden;
}
.key-insight__detail-inner > * {
  margin: 0 1.5rem 0.85rem 2rem;
  font-style: italic;
  font-size: 0.95em;
  line-height: 1.55;
}
.key-insight__detail-inner > *:first-child {
  margin-top: 0.5rem;
}
.key-insight__detail-inner > *:last-child {
  margin-bottom: 1.2rem;
}
.key-insight__detail-inner blockquote {
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
  margin: 0.85rem 1.5rem 0.85rem 2rem;
}
@media print, body.is-printing-chapter {
  .key-insight--expandable .key-insight__detail {
    grid-template-rows: 1fr !important;
  }
  .key-insight__chevron { display: none; }
}

/* Pull quote */
.pull-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--dark-red);
  text-align: center;
  margin: 2.5rem auto;
  max-width: 600px;
  padding: 1rem 2rem;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  font-weight: 500;
}

/* Preview question (used in section opener context) */
.preview-q {
  background: var(--off-white);
  border-left: 6px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 4px 4px 0;
}
.preview-q__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--dark-red);
  margin: 0 0 0.5rem;
}
.preview-q__text {
  font-family: var(--font-heading); font-style: italic; font-weight: 600;
  font-size: 1.25rem;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.4;
}

/* =========================================================
   FLOATED IMAGE WITH CAPTION
   ========================================================= */
.figure {
  margin: 1.5rem 0;
  font-size: 13px;
}
.figure--right {
  float: right;
  width: 320px;
  margin: 0.5rem 0 1rem 1.75rem;
  clear: right;
}
.figure--left {
  float: left;
  width: 320px;
  margin: 0.5rem 1.75rem 1rem 0;
  clear: left;
}
.figure__placeholder {
  background: var(--off-white);
  border: 2px dashed var(--mid-gray);
  border-radius: 4px;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--mid-gray);
}
.figure__placeholder-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.figure__placeholder-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
}
.figure img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  display: block;
}
.figure__caption {
  margin: 0.6rem 0 0;
  color: var(--mid-gray);
  font-style: italic;
  line-height: 1.45;
}
.figure__credit {
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: 0.25rem;
  display: block;
}
.figure__credit a {
  color: var(--mid-gray);
  text-decoration: underline;
  text-decoration-color: var(--light-gray);
}
.figure__credit a:hover {
  color: var(--med-navy);
}
@media (max-width: 700px) {
  .figure--right, .figure--left { float: none; width: 100%; margin: 1.25rem 0; }
}

/* Clearfix for prose containing floats */
.prose::after { content: ''; display: table; clear: both; }

/* =========================================================
   GRAPHIC ORGANIZER — Roots / Branches / Fruit
   ========================================================= */
.rbf-tree {
  margin: 2rem 0;
  display: grid;
  gap: 0.5rem;
}
.rbf-band {
  display: grid;
  grid-template-columns: 8.25rem 1fr;
  border-radius: 4px;
  overflow: hidden;
}
.rbf-band__label {
  padding: 1rem 0.7rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  color: var(--gold);
}
.rbf-band__label-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}
.rbf-band__label-sub {
  font-size: 11px;
  font-style: italic;
  color: var(--light-gray);
  line-height: 1.3;
}
.rbf-band--fruit .rbf-band__label { background: var(--dark-red); }
.rbf-band--branch .rbf-band__label { background: var(--blue); }
.rbf-band--root .rbf-band__label { background: var(--brown); }
.rbf-band__body {
  padding: 1rem 1.25rem;
}
.rbf-band--fruit .rbf-band__body { background: #EBD8D8; }
.rbf-band--branch .rbf-band__body { background: #DDE3EC; }
.rbf-band--root .rbf-band__body { background: #E8DFD3; }
.rbf-band__body ul {
  margin: 0; padding: 0; list-style: none;
}
.rbf-band__body li {
  margin-bottom: 0.55rem;
  padding-left: 1.25rem;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--charcoal);
}
.rbf-band__body li:last-child { margin-bottom: 0; }
.rbf-band__body li::before {
  content: '•';
  position: absolute; left: 0; top: 0;
  color: currentColor;
  font-weight: 700;
}
.rbf-band__body em {
  color: var(--dark-navy);
  font-weight: 700;
  font-style: italic;
}

/* RBF — Three column compact (for framework intro) */
.rbf-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
@media (max-width: 700px) { .rbf-cols { grid-template-columns: 1fr; } }
.rbf-col {
  background: var(--off-white);
  border-radius: 4px;
  overflow: hidden;
}
.rbf-col__head {
  padding: 0.85rem 1rem 0.95rem;
  text-align: center;
  color: var(--gold);
}
.rbf-col__head-name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.2em;
}
.rbf-col__head-sub {
  font-size: 12px; font-style: italic;
  color: var(--light-gray);
  margin-top: 0.15rem;
}
.rbf-col--root .rbf-col__head { background: var(--brown); }
.rbf-col--branch .rbf-col__head { background: var(--blue); }
.rbf-col--fruit .rbf-col__head { background: var(--dark-red); }
.rbf-col__body {
  padding: 1rem 1.1rem 1.2rem;
  font-size: 14px;
  line-height: 1.5;
}
.rbf-col__example {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--dark-red);
  margin: 0.85rem 0 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--light-gray);
}
.rbf-col__example-text {
  font-style: italic;
  font-size: 13px;
  color: var(--charcoal);
}

/* =========================================================
   GAMES OF BELIEF (4 quadrants)
   ========================================================= */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
@media (max-width: 700px) { .games-grid { grid-template-columns: 1fr; } }
.game-quad {
  background: var(--off-white);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.game-quad__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--gold);
}
.game-quad__icon { font-size: 1.4rem; line-height: 1; }
.game-quad__label {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.2em;
}
.game-quad--rules .game-quad__head { background: var(--dark-navy); }
.game-quad--players .game-quad__head { background: var(--red); }
.game-quad--strategies .game-quad__head { background: var(--brown); }
.game-quad--reset .game-quad__head { background: var(--gold); color: var(--dark-navy); }
.game-quad__body {
  padding: 1rem 1.1rem 1.15rem;
  font-size: 14px; line-height: 1.5;
  flex: 1;
}

/* =========================================================
   DICHOTOMIES TABLE
   ========================================================= */
.dichotomies {
  margin: 2rem 0;
}
.dicho-group {
  margin-bottom: 1.25rem;
}
.dicho-group__title {
  background: var(--dark-navy); color: var(--gold);
  padding: 0.55rem 1.1rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}
.dicho-group--society .dicho-group__title { background: var(--brown); }
.dicho-group--truth .dicho-group__title { background: var(--dark-red); }
.dicho-row {
  display: grid;
  grid-template-columns: 9rem 2.5rem 9rem 1fr;
  align-items: center;
  background: var(--off-white);
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--light-gray);
  gap: 0.85rem;
}
.dicho-row:last-child { border-bottom: none; border-radius: 0 0 4px 4px; }
@media (max-width: 700px) {
  .dicho-row { grid-template-columns: 1fr 2.5rem 1fr; }
  .dicho-row__q { grid-column: 1 / -1; padding-top: 0.5rem; }
}
.dicho-row__a, .dicho-row__b {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark-navy);
}
.dicho-row__a { text-align: right; }
.dicho-row__vs {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--mid-gray);
  text-align: center;
}
.dicho-row__q {
  font-size: 13px;
  font-style: italic;
  color: var(--mid-gray);
  line-height: 1.4;
}
.dicho-running {
  margin-top: 1.25rem;
  background: var(--med-navy); color: var(--white);
  padding: 0.85rem 1.25rem;
  border-radius: 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (max-width: 700px) {
  .dicho-running { grid-template-columns: 1fr; gap: 0.5rem; }
}
.dicho-running__label {
  font-family: var(--font-heading); font-weight: 700;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}
.dicho-running__q {
  font-size: 13px;
  font-style: italic;
  color: var(--light-gray);
}

/* =========================================================
   COMPREHENSION GATE MODAL
   ========================================================= */
.gate-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(27, 39, 64, 0.75);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.gate-modal {
  background: var(--cream);
  border-top: 6px solid var(--gold);
  border-radius: 4px;
  padding: 1.75rem;
  max-width: 580px;
  width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  animation: gateIn 0.25s ease-out;
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.gate-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem;
}
.gate-modal__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--dark-red);
}
.gate-modal__close {
  background: transparent;
  border: 1px solid var(--mid-gray);
  color: var(--mid-gray);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.gate-modal__close:hover { background: var(--mid-gray); color: var(--white); }

.gate-modal__q {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--dark-navy);
  margin-bottom: 1.25rem;
}

.gate-modal__options {
  display: grid;
  gap: 0.6rem;
}
.gate-option {
  background: var(--white);
  border: 2px solid var(--light-gray);
  padding: 0.85rem 1rem;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--charcoal);
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.15s, transform 0.1s;
}
.gate-option:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.gate-modal__feedback {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
}
.gate-modal__feedback--right {
  background: #DEEAD9;
  border-left: 4px solid #2D6431;
  color: #1F4422;
}
.gate-modal__feedback--wrong {
  background: #F1E1DC;
  border-left: 4px solid var(--red);
  color: var(--dark-red);
}

.gate-modal__continue {
  margin-top: 1rem;
  text-align: right;
}

@media print { .gate-overlay { display: none !important; } }

/* =========================================================
   SKILLS GRID (3 historical investigation skills)
   ========================================================= */
.skills-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.skill-card {
  display: grid;
  grid-template-columns: 4rem 1fr;
  background: var(--off-white);
  border-left: 6px solid var(--med-navy);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}
.skill-card--red { border-left-color: var(--dark-red); }
.skill-card--brown { border-left-color: var(--brown); }
.skill-card__num {
  background: var(--med-navy);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.skill-card--red .skill-card__num { background: var(--dark-red); }
.skill-card--brown .skill-card__num { background: var(--brown); }
.skill-card__body {
  padding: 1rem 1.25rem 1.1rem;
}
.skill-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--dark-navy);
  line-height: 1.2;
}
.skill-card__sub {
  font-style: italic;
  color: var(--dark-red);
  margin: 0.15rem 0 0.65rem;
  font-size: 14px;
}
.skill-card__detail {
  font-size: 14px;
  line-height: 1.55;
}

/* =========================================================
   CONTRIBUTIONS TABLE (What We Got From Where)
   ========================================================= */
.contributions-table {
  display: grid;
  gap: 1px;
  background: var(--light-gray);
  border-radius: 4px;
  overflow: hidden;
  margin: 2rem 0;
}
.contrib-row {
  display: grid;
  grid-template-columns: 1.7fr 2fr 2fr 2fr;
  gap: 1px;
  background: var(--light-gray);
}
@media (max-width: 800px) {
  .contrib-row { grid-template-columns: 1fr; }
  .contrib-row--head { display: none; }
}
.contrib-cell {
  background: var(--white);
  padding: 1rem 1.1rem;
  font-size: 14px;
  line-height: 1.5;
}
.contrib-cell--head {
  background: var(--dark-navy);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.contrib-cell--label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  min-width: 0;
}
.contrib-cell--label strong {
  display: block;
  line-height: 1.15;
}
.contrib-cell--label em {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 0.35rem;
  color: rgba(255,255,255,0.85);
}

/* =========================================================
   BELIEF CARDS (flip on click — preview of Chapter template)
   ========================================================= */
.belief-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
.belief-card {
  perspective: 1200px;
  height: 380px;
  cursor: pointer;
}
.belief-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.65s cubic-bezier(0.45, 0.05, 0.25, 1);
  transform-style: preserve-3d;
}
.belief-card.is-flipped .belief-card__inner {
  transform: rotateY(180deg);
}
.belief-card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 6px;
  padding: 1.25rem 1.4rem;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
}
.belief-card__face--front {
  background: var(--dark-navy);
  color: var(--cream);
  border-top: 6px solid var(--gold);
}
.belief-card__face--back {
  background: var(--cream);
  color: var(--charcoal);
  transform: rotateY(180deg);
  border-top: 6px solid var(--dark-red);
}
.belief-card__overline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.belief-card__face--back .belief-card__overline {
  color: var(--dark-red);
}
.belief-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 0.85rem;
}
.belief-card__face--back .belief-card__title {
  color: var(--dark-navy);
}
.belief-card__belief {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--light-gray);
  margin-top: auto;
  margin-bottom: 2.5rem;  /* room for the flip pill */
  padding-top: 0.6rem;
  border-top: 1px solid rgba(200,168,75,0.25);
}
.belief-card__row {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 0.6rem;
}
.belief-card__row:last-child { margin-bottom: 0; }
.belief-card__row strong {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  display: block;
  margin-bottom: 0.1rem;
}
.belief-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.75rem;
  color: var(--gold);
}
.belief-card__icon svg { width: 100%; height: 100%; display: block; }
.belief-card__face--front {
  text-align: center;
  align-items: center;
}
.belief-card__face--front .belief-card__overline,
.belief-card__face--front .belief-card__title {
  text-align: center;
}
.belief-card__face--front .belief-card__title {
  font-size: 1.4rem;
}
.belief-card__face--front .belief-card__belief {
  text-align: center;
  width: 100%;
}
/* Prominent flip-hint pill, fixed at bottom of card */
.belief-card__flip-hint {
  position: absolute;
  bottom: 0.9rem; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--dark-navy);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  pointer-events: none; /* let card receive the click */
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.15s;
}
.belief-card:hover .belief-card__flip-hint {
  background: var(--white);
  transform: translateX(-50%) translateY(-2px);
}
.belief-card__flip-hint-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

/* =========================================================
   ABRAHAMIC RELIGIONS COMPARISON
   ========================================================= */
.abrahamic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
@media (max-width: 800px) { .abrahamic-grid { grid-template-columns: 1fr; } }
.abr-card {
  background: var(--off-white);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.abr-card__head {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 0.75rem 0.85rem;
  color: var(--gold);
}
.abr-card--judaism .abr-card__head { background: var(--med-navy); }
.abr-card--christianity .abr-card__head { background: var(--dark-red); }
.abr-card--islam .abr-card__head { background: var(--brown); }
.abr-card__body {
  padding: 1rem 1.1rem 1.2rem;
}
.abr-card__row {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 0.85rem;
  font-size: 13px;
  line-height: 1.5;
}
.abr-card__row:last-child { margin-bottom: 0; }
.abr-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.15rem;
}

/* =========================================================
   AQUINAS CHAIN (horizontal pill chain)
   ========================================================= */
.aquinas-chain {
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}
.chain-link {
  background: var(--med-navy);
  color: var(--white);
  padding: 0.7rem 1.25rem;
  border-radius: 4px;
  text-align: center;
  min-width: 110px;
}
.chain-link__name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.chain-link__year {
  font-size: 13px;
  font-weight: 500;
  margin-top: 0.15rem;
}
.chain-link:nth-child(1) { background: var(--med-navy); }
.chain-link:nth-child(3) { background: var(--blue); }
.chain-link:nth-child(5) { background: var(--dark-red); }
.chain-link:nth-child(7) { background: var(--gold); }
.chain-link:nth-child(7) .chain-link__name { color: var(--dark-navy); }
.chain-link:nth-child(7) .chain-link__year { color: var(--dark-navy); }
.chain-arrow {
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 700;
}

/* B/A/C visual — three-step belief→action→consequence */
.bac-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
  margin: 2rem 0;
}
@media (max-width: 700px) {
  .bac-chain { grid-template-columns: 1fr; }
  .bac-chain .chain-arrow { display: none; }
}
.bac-box {
  padding: 1rem 0.85rem;
  border-radius: 4px;
  background: var(--med-navy);
  color: var(--white);
  text-align: center;
}
.bac-box:nth-child(3) { background: var(--blue); }
.bac-box:nth-child(5) { background: var(--dark-red); }
.bac-box__label {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.15em;
}
.bac-box__detail {
  margin-top: 0.3rem;
  font-style: italic;
  font-size: 13px;
}

/* =========================================================
   CHAPTER MAP (8 chapters)
   ========================================================= */
.chapter-map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin: 1.5rem 0;
}
@media (max-width: 700px) { .chapter-map { grid-template-columns: 1fr; } }
.ch-card {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  background: var(--off-white);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  text-decoration: none; color: inherit;
}
.ch-card__num {
  background: var(--dark-navy);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  display: flex; align-items: center; justify-content: center;
}
.ch-card__body { padding: 0.75rem 1rem 0.85rem; }
.ch-card__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1rem;
  color: var(--dark-navy);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.ch-card__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--mid-gray);
}

/* =========================================================
   NON-NEGOTIABLES CARDS (page 16 equiv)
   ========================================================= */
.nn-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 700px) { .nn-cards { grid-template-columns: 1fr; } }
.nn-card {
  background: var(--off-white);
  border-left: 6px solid var(--dark-red);
  padding: 1.25rem 1.4rem;
  border-radius: 0 4px 4px 0;
}
.nn-card--gold { border-left-color: var(--gold); }
.nn-card__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--dark-red);
}
.nn-card--gold .nn-card__label { color: var(--gold-soft); }
.nn-card__claim {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark-navy);
  line-height: 1.3;
  margin: 0 0 0.85rem;
}
.nn-card__detail {
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================================
   COMMITMENTS LIST — page 18 "What This Book Promises You"
   Visually distinct ordered list with large italic gold numerals
   sitting in the left margin. Each commitment is a single line of
   prose that reads with rhetorical force on its own.
   ========================================================= */
.commitments-list {
  list-style: none;
  counter-reset: commitments;
  padding: 0;
  margin: 0.6rem 0 1.6rem;
}
.commitments-list li {
  counter-increment: commitments;
  position: relative;
  padding: 0.7rem 0 0.7rem 3.4rem;
  margin: 0;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--charcoal);
  border-bottom: 1px solid var(--light-gray, #e5e0d2);
}
.commitments-list li:last-child { border-bottom: none; }
.commitments-list li::before {
  content: counter(commitments) ".";
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  line-height: 1;
}

/* =========================================================
   CLOSING BANNER (the "last thing to know")
   ========================================================= */
.closing-banner {
  background: var(--dark-navy);
  color: var(--cream);
  padding: 2rem 2rem 2.25rem;
  border-left: 8px solid var(--gold);
  border-radius: 0 4px 4px 0;
  margin: 2rem 0;
}
.closing-banner__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.closing-banner__line {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--light-gray);
  margin: 0 0 0.6rem;
}
.closing-banner__line strong {
  color: var(--white);
  font-weight: 700;
  font-style: italic;
}
.closing-banner__close {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--gold);
  margin-top: 1rem;
}

/* =========================================================
   ACTIVITIES
   ========================================================= */
.activity {
  background: var(--white);
  border-top: 5px solid var(--red);
  padding: 1.75rem 1.75rem 2rem;
  margin: 3rem 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
}

.export-menu {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 5;
}
.export-btn {
  background: var(--med-navy);
  color: var(--gold);
  border: none;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s;
}
.export-btn:hover,
.export-btn[aria-expanded="true"] { background: var(--gold); color: var(--dark-navy); }
.export-btn__icon { font-size: 14px; }
.export-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 3px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  min-width: 220px;
  padding: 0.4rem 0;
}
.export-menu__panel.is-open { display: block; }
.export-menu__option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.95rem;
  background: var(--white);
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--charcoal);
  transition: background 0.1s;
  border-bottom: 1px solid var(--off-white);
}
.export-menu__option:last-child { border-bottom: none; }
.export-menu__option:hover { background: var(--off-white); color: var(--dark-navy); }
.export-menu__option strong { display: block; color: var(--dark-navy); font-weight: 700; font-size: 13px; }
.export-menu__option small { display: block; color: var(--mid-gray); font-size: 11px; font-style: italic; margin-top: 0.1rem; }

/* Legacy print button styles preserved for backward compat */
.print-btn {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--med-navy);
  color: var(--gold);
  border: none;
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s;
}
.print-btn:hover { background: var(--gold); color: var(--dark-navy); }
.print-btn__icon { font-size: 14px; }

@media print {
  .print-btn, .export-menu { display: none !important; }
}
.activity__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: 0.4rem;
}
.activity__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.75rem;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.15;
}
.activity__directions {
  background: var(--off-white);
  border-left: 4px solid var(--gold);
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0 1.5rem;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
}
.activity__directions strong {
  color: var(--dark-red);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-right: 0.85rem;
}

.activity__part {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.2rem;
  color: var(--dark-navy);
  margin: 1.5rem 0 0.85rem;
}

/* Activity input boxes — students can type in these (contenteditable="true") */
.activity-blank {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 3px;
  padding: 0.75rem 0.85rem;
  min-height: 2rem;
  font-style: normal;
  color: var(--charcoal);
  font-size: 14px;
  line-height: 1.5;
  margin: 0.4rem 0;
  cursor: text;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.activity-blank:hover { border-color: var(--gold); }
.activity-blank:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(200,168,75,0.18);
}
.activity-blank:empty::before {
  content: attr(data-prompt);
  color: var(--mid-gray);
  font-style: italic;
  font-size: 13px;
  pointer-events: none;
}
.activity-blank--tall { min-height: 5rem; }
.activity-blank--mid { min-height: 3rem; }

/* Two-column activity layout (vocab matching) */
.activity-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
}
.activity-table th {
  background: var(--dark-navy);
  color: var(--gold);
  padding: 0.6rem 0.85rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: left;
}
.activity-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--light-gray);
  font-size: 14px;
}
.activity-table td:first-child {
  background: var(--off-white);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  text-align: center;
  color: var(--dark-red);
  width: 30%;
}
.activity-table td:last-child {
  background: var(--white);
  color: var(--mid-gray);
  font-style: italic;
}

/* Activity card grid (3 scenarios) */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem;
}
@media (max-width: 700px) { .scenario-grid { grid-template-columns: 1fr; } }
.scenario {
  background: var(--off-white);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  align-items: start;
}
.scenario__letter {
  background: var(--dark-navy);
  color: var(--gold);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem;
  border-radius: 50%;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
}
.scenario__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1rem;
  color: var(--dark-navy);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.scenario__body { font-size: 13px; line-height: 1.45; color: var(--charcoal); }

/* Sourcing analysis (Belief Detective) */
.sourcing {
  display: grid; gap: 0.75rem;
  margin: 1rem 0;
}
.sourcing__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
}
.sourcing__letter {
  background: var(--dark-navy);
  color: var(--gold);
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0;
}
.sourcing__body {
  background: var(--white);
  padding: 0.75rem 1rem 0.85rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
}
.sourcing__title {
  font-weight: 700;
  color: var(--dark-navy);
  margin-bottom: 0.15rem;
  font-size: 14px;
}
.sourcing__title em { color: var(--mid-gray); font-style: italic; font-weight: 400; }
.sourcing__blank {
  background: var(--off-white);
  border: 1px dashed var(--light-gray);
  padding: 0.65rem 0.75rem;
  border-radius: 3px;
  margin-top: 0.5rem;
  font-style: italic;
  color: var(--mid-gray);
  font-size: 13px;
  min-height: 2rem;
}

/* Primary source block */
.source-block {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  margin: 1.25rem 0;
}
.source-block__head {
  background: var(--dark-navy); color: var(--gold);
  padding: 0.55rem 1.1rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  border-radius: 4px 4px 0 0;
}
.source-block__body {
  padding: 1.1rem 1.4rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.6;
  font-size: 15px;
}
.source-block__body p { margin: 0 0 0.85em; }
.source-block__body p:last-child { margin-bottom: 0; }

/* =========================================================
   ANNOTATED SOURCE TEMPLATE
   Primary source with clickable highlighted phrases that reveal
   detective-style annotations in a side panel.
   ========================================================= */
.annotated-source {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.annotated-source__head {
  background: var(--dark-navy); color: var(--gold);
  padding: 0.55rem 1.1rem;
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  grid-column: 1 / -1;
}
.annotated-source__hint {
  padding: 0.65rem 1.4rem 0;
  font-size: 12px;
  color: var(--mid-gray);
  grid-column: 1 / -1;
}
.annotated-source__body {
  padding: 0.85rem 1.4rem 1.4rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.7;
  font-size: 15.5px;
}
.annotated-source__body p { margin: 0 0 0.85em; }
.annotated-source__body p:last-child { margin-bottom: 0; }
.annotated-source__notes {
  background: var(--white);
  border-top: 2px solid var(--gold);
  padding: 1.25rem 1.4rem;
  min-height: 4rem;
}
.annotated-source__placeholder {
  font-size: 13px;
  color: var(--mid-gray);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}
.annotated-source__placeholder strong {
  color: var(--charcoal);
  font-style: normal;
  display: block;
  margin-bottom: 0.25rem;
}

/* On wide screens, put the annotation panel as a column on the right */
@media (min-width: 920px) {
  .annotated-source {
    grid-template-columns: 1fr 320px;
  }
  .annotated-source__notes {
    border-top: none;
    border-left: 2px solid var(--gold);
    margin: 0;
  }
}

.annot {
  cursor: pointer;
  background: linear-gradient(180deg, transparent 60%, rgba(200,168,75,0.4) 60%);
  padding: 0 2px;
  font-style: inherit;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.annot:hover {
  background: linear-gradient(180deg, transparent 0%, rgba(200,168,75,0.55) 0%);
}
.annot.is-active {
  background: var(--gold);
  color: var(--dark-navy);
  font-weight: 600;
}

.annot-note {
  display: none;
  animation: annotReveal 0.25s ease-out;
}
.annot-note.is-shown { display: block; }
@keyframes annotReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.annot-note__head {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-navy);
  margin-bottom: 0.45rem;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.35rem;
}
.annot-note__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--charcoal);
}
.annotated-source__notes:has(.annot-note.is-shown) .annotated-source__placeholder {
  display: none;
}

/* =========================================================
   DRAG-AND-DROP CLASSIFICATION TEMPLATE
   Items in a tray; students drag each into the correct labeled bin.
   Visual feedback on drop: green if correct, red if wrong (snaps back).
   ========================================================= */
.dragsort {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.dragsort__head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.3rem;
}
.dragsort__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark-navy);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.dragsort__directions {
  font-size: 13px;
  font-style: italic;
  color: var(--mid-gray);
  margin-bottom: 1rem;
}
.dragsort__tray {
  background: var(--off-white);
  border: 2px dashed var(--light-gray);
  border-radius: 4px;
  padding: 0.85rem;
  margin-bottom: 1rem;
  min-height: 4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
}
.dragsort__tray-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mid-gray);
  width: 100%;
  margin-bottom: 0.25rem;
}
.dragsort__bins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.dragsort__bin {
  background: var(--off-white);
  border: 2px dashed var(--gold);
  border-radius: 4px;
  padding: 0.75rem;
  min-height: 7rem;
  transition: background 0.15s, border-color 0.15s;
  display: flex; flex-direction: column;
}
.dragsort__bin.is-over {
  background: rgba(200,168,75,0.12);
  border-style: solid;
  border-color: var(--gold);
}
.dragsort__bin-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-navy);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.dragsort__bin-items {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}
.dragsort__item {
  background: var(--white);
  border: 1.5px solid var(--med-navy);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  font-size: 13px;
  line-height: 1.35;
  color: var(--charcoal);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;  /* Prevent the browser from claiming the gesture for scrolling */
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.2s, background 0.2s;
}
.dragsort__item:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); transform: translateY(-1px); }
.dragsort__item:active { cursor: grabbing; }
.dragsort__item.is-dragging { opacity: 0.4; }
.dragsort__item.is-correct {
  border-color: #4A7C59;
  background: #E8F1E8;
  cursor: default;
}
.dragsort__item.is-wrong {
  border-color: var(--dark-red);
  background: #F5E5E0;
  animation: dragsortShake 0.4s ease-out;
}
@keyframes dragsortShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.dragsort__feedback {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
}
.dragsort__feedback.is-shown { display: block; }
.dragsort__feedback--right { background: #E8F1E8; border-left: 3px solid #4A7C59; color: #1F4422; }
.dragsort__feedback--wrong { background: #F5E5E0; border-left: 3px solid var(--dark-red); color: var(--dark-red); }
.dragsort__progress {
  margin-top: 0.85rem;
  font-size: 13px;
  color: var(--mid-gray);
  text-align: center;
  font-style: italic;
}
.dragsort__done {
  background: linear-gradient(135deg, #DEEAD9 0%, #E8F1E8 100%);
  border: 2px solid #4A7C59;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  margin-top: 0.85rem;
  font-size: 14px;
  color: #1F4422;
  display: none;
}
.dragsort__done.is-shown { display: block; }
.dragsort__done strong { display: block; margin-bottom: 0.2rem; color: #1F3A28; }
.dragsort__reset {
  background: transparent; border: 1px solid var(--mid-gray); color: var(--mid-gray);
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-top: 0.85rem;
}
.dragsort__reset:hover { background: var(--med-navy); color: var(--white); border-color: var(--med-navy); }

/* =========================================================
   INTERACTIVE TIMELINE TEMPLATE
   Horizontal scrollable track of dated events. Click a marker
   to reveal a card with details. Region filters let students
   compare what was happening simultaneously across civilizations.
   ========================================================= */
.timeline {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.25rem 0 0;
  margin: 1.75rem 0;
  overflow: hidden;
}
.timeline__head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.3rem;
  padding: 0 1.4rem;
}
.timeline__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark-navy);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  padding: 0 1.4rem;
}
.timeline__directions {
  font-size: 13px;
  font-style: italic;
  color: var(--mid-gray);
  margin-bottom: 1rem;
  padding: 0 1.4rem;
}
.timeline__filters {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0 1.4rem 1rem;
  border-bottom: 1px solid var(--light-gray);
}
.timeline__filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  width: 100%;
  margin-bottom: 0.2rem;
}
.timeline__filter {
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  color: var(--charcoal);
  font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.timeline__filter::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--region-color, var(--mid-gray));
}
.timeline__filter:hover { border-color: var(--gold); }
.timeline__filter.is-active {
  background: var(--dark-navy);
  color: var(--white);
  border-color: var(--dark-navy);
}

/* The horizontal track */
.timeline__track-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--off-white);
  padding: 1.5rem 1.4rem 0;
}
.timeline__track-wrap::-webkit-scrollbar { height: 8px; }
.timeline__track-wrap::-webkit-scrollbar-track { background: var(--off-white); }
.timeline__track-wrap::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.timeline__track {
  position: relative;
  height: 200px;
  min-width: 100%;
}
.timeline__rail {
  position: absolute;
  left: 0; right: 0; top: 100px;
  height: 3px;
  background: linear-gradient(90deg, var(--light-gray) 0%, var(--gold) 50%, var(--light-gray) 100%);
  border-radius: 2px;
}
.timeline__year-label {
  position: absolute;
  top: 122px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  color: var(--mid-gray);
  letter-spacing: 0.05em;
  transform: translateX(-50%);
}

/* The event marker (dot + connecting line + label) */
.timeline__event {
  position: absolute;
  top: 0; bottom: 0;
  cursor: pointer;
  transition: transform 0.15s;
  transform: translateX(-50%);
}
.timeline__event:hover { transform: translateX(-50%) scale(1.05); }
.timeline__event-dot {
  position: absolute;
  top: 91px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--region-color, var(--gold));
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1.5px var(--region-color, var(--gold)), 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.timeline__event.is-active .timeline__event-dot {
  background: var(--dark-navy);
  box-shadow: 0 0 0 3px var(--gold), 0 4px 12px rgba(0,0,0,0.25);
  transform: translateX(-50%) scale(1.15);
}
.timeline__event-stem {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 2px;
  height: 65px;
  background: var(--region-color, var(--gold));
  transform: translateX(-50%);
  opacity: 0.6;
}
.timeline__event-mini {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1.5px solid var(--region-color, var(--gold));
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal);
  white-space: nowrap;
  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.timeline__event.is-active .timeline__event-mini {
  background: var(--dark-navy);
  color: var(--white);
  border-color: var(--dark-navy);
}
.timeline__event.is-hidden { display: none; }

/* Bottom-row events — flipped for visual variety on dense timelines */
.timeline__event--bottom .timeline__event-stem { top: 113px; }
.timeline__event--bottom .timeline__event-mini { top: auto; bottom: 0; }

/* Detail card revealed below */
.timeline__detail {
  background: var(--off-white);
  border-top: 2px solid var(--gold);
  padding: 1.25rem 1.4rem;
  min-height: 5rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
}
.timeline__detail-placeholder {
  font-style: italic;
  color: var(--mid-gray);
  text-align: center;
  font-size: 13px;
  padding: 0.5rem 0;
}
.timeline__detail-card {
  display: none;
  animation: tlReveal 0.25s ease-out;
}
.timeline__detail-card.is-shown { display: block; }
@keyframes tlReveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.timeline__detail-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.timeline__detail-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--dark-navy);
  line-height: 1;
}
.timeline__detail-region {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  /* White text needs a dark pill. The badge is set per-event to a dark region
     color (red/green/blue); the fallback must also be dark (was gold = white-on-
     gold 2.29 fail). Dark-navy fallback keeps the default safe. */
  background: var(--region-color, var(--dark-navy));
  color: var(--white);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.timeline__detail-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark-navy);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}
.timeline__detail-text { margin: 0 0 0.5rem; }
.timeline__detail-text:last-child { margin-bottom: 0; }
.timeline__detail-belief {
  margin-top: 0.65rem;
  padding: 0.55rem 0.85rem;
  background: var(--white);
  border-left: 3px solid var(--dark-red);
  font-size: 13px;
  font-style: italic;
  color: var(--charcoal);
}
.timeline__detail-belief strong { font-style: normal; color: var(--dark-red); font-weight: 700; }

/* =========================================================
   SECTION RHYTHM / FOOTER NAV
   ========================================================= */
.section-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--light-gray);
  margin-top: 3rem;
  font-size: 14px;
}
.section-nav a {
  color: var(--med-navy);
  font-weight: 600;
}
.section-nav a:hover { color: var(--dark-red); }

/* =========================================================
   PAGINATION SYSTEM
   ========================================================= */
main#book {
  padding-bottom: 110px; /* room for the sticky bottom nav (was 90) */
  position: relative;
}

.progress-bar {
  position: fixed;
  top: 47px;          /* just below the top nav */
  left: 0; right: 0;
  height: 3px;
  background: rgba(200,168,75,0.15);
  z-index: 99;
}
.progress-bar__fill {
  height: 100%;
  background: var(--gold);
  width: 5%;
  transition: width 0.35s ease;
}

.page-content {
  display: none;
  animation: pageIn 0.3s ease-out;
}
.page-content.active {
  display: block;
  /* THIS is the unified container. Every page gets the same width
     and padding regardless of what wrappers exist inside. */
  max-width: var(--max-content);
  margin: 0 auto;
  /* Bottom padding must clear the fixed nav bar (~80px) plus a comfortable buffer. */
  padding: 2rem 2rem 8rem;
}
/* Cover is the only exception — it bleeds full-width by design */
.page-content[data-page="1"].active {
  max-width: none;
  padding: 0;
}
@media (max-width: 1000px) {
  .page-content.active { padding: 1.5rem 1.25rem 7rem; }
}

/* Inner .page / .prose / .page-section wrappers should NOT add their own
   padding — the parent .page-content has already handled that. They become
   simple semantic containers. The .prose can still constrain width inside. */
.page-content .page,
.page-content .page-section,
.page-content section.page-section {
  padding: 0;
  max-width: none;
  margin: 0;
}
.page-content .prose {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   DROP CAP — first body paragraph of each section opens with
   a large red initial (the "I" of "In the year 1300..." pattern).
   Applied via the prose-lead class tagged on the first body <p>.
   ========================================================= */
.prose-lead::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark-red);
  font-size: 3.2rem;        /* variant C: cap-top aligns with the adjacent word's cap */
  line-height: 0.74;
  padding: 0;
  margin: 0.04em 0.5rem 0 0;
}
/* Narrow caps (I, J) have little side-bearing and read as detached;
   trim the right gap so the cap connects to the following text. */
.prose-lead[data-dropcap="narrow"]::first-letter {
  margin-right: 0.32rem;
}
@media (max-width: 1000px) {
  .prose-lead::first-letter {
    font-size: 2.75rem;
    line-height: 0.74;
    padding: 0;
    margin: 0.04em 0.4rem 0 0;
  }
  .prose-lead[data-dropcap="narrow"]::first-letter {
    margin-right: 0.28rem;
  }
}
@media print {
  .prose-lead::first-letter {
    color: #5C1010;  /* dark-red prints legibly on white */
  }
}

/* On carded pages, the navy handle carries the locator
   "Chapter · Section · Part X of Y". The section TITLE returns to the prose
   as a large bold title just above the gold rule (where it used to live).
   The overline stays hidden — it would duplicate the handle's locator. */
.page-content--card.active .section-opener__overline {
  display: none;
}
.page-content--card.active .section-opener__title {
  display: block;
}

/* =========================================================
   READING SEGMENTS (float-out model)
   A carded page splits into alternating runs:
   - .reading-slab  : white "sheet" segment (prose + full-width color bands)
   - .reading-float : interactive that sits in a TAN GAP between slabs, on the
                      cream body, spanning the same width as the white slabs.
   The page itself goes transparent; slabs provide the white surface. Rounded
   corners only at the first slab's top and last slab's bottom. */
.page-content--card.active.is-segmented,
.page-content--card.is-segmented {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 3rem 7rem;
}
.page-content--card.active.is-segmented::before,
.page-content--card.is-segmented::before { content: none !important; display: none !important; }

.reading-slab {
  background: var(--white);
  border-left: 1px solid rgba(27,39,64,0.07);
  border-right: 1px solid rgba(27,39,64,0.07);
  box-shadow: 0 1px 2px rgba(27,39,64,0.04), 0 8px 24px rgba(27,39,64,0.10);
  padding: 2.25rem 3rem;
  margin: 0 -3rem;
}
.reading-slab--first {
  border-top: none;
  border-radius: 12px 12px 0 0;
  padding-top: 0;
}
.reading-slab--last {
  border-bottom: 1px solid rgba(27,39,64,0.07);
  border-radius: 0 0 12px 12px;
}
.reading-handle {
  background: var(--dark-navy);
  color: var(--gold);
  border-radius: 12px 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 0.85rem 3rem;
  /* Pull up & out by the slab's 1px border so the navy fully covers the
     slab's rounded top corners — no white arc peeks around the handle. */
  margin: -1px -3rem 2rem;
  margin-left: calc(-3rem - 1px);
  margin-right: calc(-3rem - 1px);
}
/* Float: the interactive sits on the tan body, same OUTER width as the white
   slabs (so it reads as a full-width piece), no white backing, no padding. */
.reading-float {
  margin: 1.75rem -3rem;
  padding: 0;
  background: transparent;
}
.reading-float > * {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
/* Full-bleed color BAND: the band class is applied directly to the spine
   component (key-insight / callout--insight / third-ruler-callout / beacon).
   Force it to span the slab edge-to-edge: cancel auto-centering, max-width,
   side margins and corner rounding so the colored fill reaches both edges
   with no white gap. The slab's 3rem padding is countered with -3rem margin
   plus 3rem inner padding so text stays in the reading column. */
.reading-band {
  margin-left: calc(-3rem - 1px) !important;
  margin-right: calc(-3rem - 1px) !important;
  max-width: none !important;
  width: auto !important;
  border-radius: 0 !important;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
/* The beacon centers itself by default; also strip its auto side-margins. */
.reading-band.beacon-section-close { margin-top: 1.75rem; margin-bottom: 1.75rem; }
@media (max-width: 1000px) {
  .page-content--card.is-segmented { padding: 0 1.25rem 7rem; }
  .reading-slab { padding: 1.5rem 1.25rem; margin: 0 -1.25rem; }
  .reading-slab--first { border-radius: 8px 8px 0 0; }
  .reading-slab--last { border-radius: 0 0 8px 8px; }
  .reading-handle { margin: 0 -1.25rem 1.5rem; padding: 0.7rem 1.25rem; font-size: 0.9rem; border-radius: 8px 8px 0 0; }
  .reading-float { margin: 1.25rem -1.25rem; padding: 0; }
  .reading-band { margin-left: calc(-1.25rem - 1px) !important; margin-right: calc(-1.25rem - 1px) !important; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* Featured bilingual primary-quote couplets read as centered set-pieces
   (they lost their centered look when the reading column narrowed). */
.reading-slab .primary-quote--bilingual {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------
   ON-SHEET CALLOUT CONTRAST.
   Several callout-type components default to white or near-white
   backgrounds. On the new white reading sheet they vanish (white-on-white
   / cream-on-cream). When they sit inside a slab, give them a clearly
   distinct tinted background + border so they read as callouts on the page.
   --------------------------------------------------------- */
.reading-slab .sourcing {
  background: var(--off-white);
  border: 1px solid #d9cfb8;
  border-left: 4px solid var(--gold);
  border-radius: 5px;
  padding: 1rem 1.2rem;
}
.reading-slab .slave-systems-chart {
  background: var(--off-white);
}
.reading-slab .compression-demo {
  background: var(--off-white);
  border-color: #d9cfb8;
}
.reading-slab .dichotomy-callout {
  background: var(--off-white);
  border: 1px solid #d9cfb8;
}

/* ---------------------------------------------------------
   PRINT: dissolve the float-out segmentation (spec §2.59).
   The slab/float/band/handle wrappers and their negative margins are a
   screen affordance only. In print they must collapse to a continuous
   single-column flow, or the screen-only negative margins (e.g. slab
   margin:-3rem, the beacon's auto-centering) leak onto paper and throw
   elements out of place (the floating-beacon artifact). We neutralize all
   of it and let content print as ordinary stacked blocks.
   --------------------------------------------------------- */
@media print {
  .page-content--card.is-segmented,
  .page-content--card.active.is-segmented {
    padding: 0 !important;
    background: #fff !important;
  }
  /* Slabs: no breakout margins, no card chrome, just flow. */
  .reading-slab,
  .reading-slab--first,
  .reading-slab--last {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* Floats: the interactive prints in place at normal width, no breakout. */
  .reading-float {
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .reading-float > * { width: auto !important; }
  /* Bands: print as a normal full-text-width tinted block, no breakout. */
  .reading-band {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Handle: render as a plain running header line, not a navy bar with
     breakout margins. */
  .reading-handle {
    margin: 0 0 0.75rem 0 !important;
    padding: 0 0 0.4rem 0 !important;
    background: transparent !important;
    color: #1B2740 !important;
    border-radius: 0 !important;
    border-bottom: 1.5px solid #C8A84B !important;
    font-size: 12pt !important;
  }
  /* Beacon: its own static centered block; clear any stray segment margins. */
  .reading-band.beacon-section-close,
  .beacon-section-close {
    margin: 1rem auto !important;
  }
}

/* Chapter-opener gets a negative margin so it bleeds edge-to-edge of the
   page-content container, while still living inside it. */
.page-content > .chapter-opener,
.page-content > section > .chapter-opener,
.page-content > section.page-section > .chapter-opener {
  margin: -2rem -2rem 1.5rem;
  padding: 2.5rem 2rem 2rem;
}
@media (max-width: 1000px) {
  .page-content > .chapter-opener,
  .page-content > section > .chapter-opener,
  .page-content > section.page-section > .chapter-opener {
    margin: -1.5rem -1.25rem 1.25rem;
    padding: 2rem 1.25rem 1.5rem;
  }
}
.page-content > .section-opener,
.page-content > header.section-opener,
.page-content > section > .section-opener,
.page-content > section > header.section-opener {
  margin: 0 auto 1.5rem;
  padding: 0;
  max-width: var(--max-prose);
}

/* =========================================================
   READING CARD TREATMENT (book-wide reading pages)
   A white "sheet" floating on the cream body, with a rounded
   navy header "handle" carrying the running title. Applied only
   to .page-content--card pages (reading prose); full-bleed pages
   (covers, chapter openers, activities, TOC, roadmaps) are excluded.
   ========================================================= */
.page-content--card.active {
  background: var(--white);
  max-width: 860px;
  margin: 1.5rem auto 3rem;
  /* All four corners rounded. The handle (::before) carries matching rounded
     top corners and sits flush to the top, so the two coincide exactly — no
     white corner pokes out. We avoid overflow:hidden so component popovers
     (vocab, dichotomy, coach notes) can still escape the card bounds. */
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27,39,64,0.05), 0 14px 40px rgba(27,39,64,0.15);
  border: 1px solid rgba(27,39,64,0.07);
  padding: 0 3rem 7rem;
  position: relative;
}
/* The navy header handle. Flows at the very top of the card, spans edge-to-edge,
   and carries rounded top corners matching the card so the corners coincide. */
.page-content--card.active::before {
  content: attr(data-running-head);
  display: block;
  margin: 0 -3rem 2rem;            /* pull out to the card edges, span full width */
  background: var(--dark-navy);
  color: var(--gold);
  border-radius: 12px 12px 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 0.85rem 3rem;
}
@media (max-width: 1000px) {
  .page-content--card.active {
    max-width: none;
    margin: 0.75rem 0 2rem;
    border-radius: 8px;
    padding: 0 1.25rem 7rem;
  }
  .page-content--card.active::before {
    margin: 0 -1.25rem 1.5rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 8px 8px 0 0;
  }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 3px solid var(--gold);
  padding: 0.85rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  z-index: 90;
  box-shadow: 0 -3px 14px rgba(0,0,0,0.08);
}

.page-nav__btn {
  background: var(--dark-navy);
  color: var(--gold);
  border: none;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
/* The old visibility-hidden trick for prev (kept it from collapsing the
   bottom-nav grid) is obsolete — prev now lives inside .page-nav__pager
   which has stable width regardless. The .page-nav__pager rules below
   handle hiding prev cleanly. */
.page-nav__btn:hover:not(:disabled) {
  background: var(--gold);
  color: var(--dark-navy);
  transform: translateY(-1px);
}
.page-nav__btn:active:not(:disabled) { transform: translateY(0); }
.page-nav__btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.page-nav__btn--prev { justify-self: start; }
.page-nav__btn--next { justify-self: end; }
.page-nav__arrow { font-size: 1.1rem; flex-shrink: 0; }

/* Left-side container: chapter and section jumpers, with their popovers
   anchored relative to this container. Together they form the "where am I"
   navigation tier — chapter and section that the current page belongs to.
   The back button sits to the left, separate from the jumpers since it's
   navigation history rather than book-structure navigation. */
.page-nav__jumpers {
  justify-self: start;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.page-nav__caret-group {
  position: relative;
  display: inline-flex;
}
/* Carets are connected as a pair within the caret-group cluster; each pair
   has its own gap from the back button. The two caret-groups inside .jumpers
   sit flush against each other (1px gap). */
.page-nav__caret-group + .page-nav__caret-group {
  margin-left: 1px;
}

/* Back button — browser-style "go back to last visited page". Square,
   matches caret/prev/next height. Hidden until user has navigated at least
   once (otherwise there's nothing to go back to). */
.page-nav__back-btn {
  background: var(--dark-navy);
  color: var(--gold);
  border: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.page-nav__back-btn[hidden] { display: none; }
.page-nav__back-btn:hover:not(:disabled) {
  background: var(--gold);
  color: var(--dark-navy);
}
.page-nav__back-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.page-nav__back-btn svg {
  width: 20px;
  height: 20px;
}

.page-nav__jumpers .page-nav__jump-caret {
  border-radius: 0;
}
.page-nav__caret-group:first-of-type .page-nav__jump-caret {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.page-nav__caret-group:last-of-type .page-nav__jump-caret {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* If the first caret is hidden but the second is shown (a possible state
   if the manifest changes), give the second caret full rounding. */
.page-nav__caret-group:has(.page-nav__jump-caret[hidden]) {
  display: none;
}

/* Right-side container: previous + next paired together, browser-style.
   Both buttons fixed-width so they don't resize per-page (which was visually
   distracting). Long titles fade out gently on the right via mask-image
   instead of clipping with ellipsis. */
.page-nav__pager {
  position: relative;
  justify-self: end;
  display: flex;
  align-items: stretch;
  gap: 1px;
}
.page-nav__pager .page-nav__btn {
  border-radius: 0;
  width: 240px;        /* fixed width — fits "STANDARDS COVERED" without fade */
  flex: 0 0 240px;
  padding: 0.7rem 1rem;
  justify-content: flex-start;  /* arrow + label aligned to start */
  overflow: hidden;
}
.page-nav__pager .page-nav__btn--prev {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.page-nav__pager .page-nav__btn--next {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.page-nav__pager .page-nav__btn .page-nav__label {
  white-space: nowrap;
  overflow: hidden;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
/* Both prev and next: fade out the RIGHT side of the LABEL when text
   overflows. Reading is left-to-right, so the start of the title should
   always be visible; only the end can fade. The arrow lives in a separate
   span outside the masked label, so it stays solid in both cases.
   The fade ends at 80% of the label's width, leaving a small solid edge
   before the label container's right boundary so the fade completes
   before bumping into the arrow on the next button. */
.page-nav__pager .page-nav__btn .page-nav__label {
  text-align: left;
  -webkit-mask-image: linear-gradient(to right, black 78%, transparent);
          mask-image: linear-gradient(to right, black 78%, transparent);
}
.page-nav__pager .page-nav__btn--next {
  /* Next button has label first, arrow second — the label fades on its
     right, then the arrow sits to the right of it, staying solid. */
  flex-direction: row;
}
.page-nav__pager .page-nav__btn--next .page-nav__label {
  /* Add a bit of right padding so the fade completes well inside the label
     before the arrow sits flush against it. */
  padding-right: 0.4rem;
}
.page-nav__pager .page-nav__btn--prev[hidden] {
  display: none !important;
}
.page-nav__pager:has(.page-nav__btn--prev[hidden]) .page-nav__btn--next {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Jump-caret buttons (chapter on the left of NEXT, section on the right of
   NEXT). Both styled identically, both labeled with their current state.
   Visually a pair of "navigate up to chapter / down to section" jumpers.
   Vertical padding matches the prev/next buttons so they all sit at the
   same height in the bottom-nav row. Fixed minimum widths so the labels
   don't resize when the chapter/section number changes. */
.page-nav__jump-caret {
  background: var(--dark-navy);
  color: var(--gold);
  border: none;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
  position: relative;
  white-space: nowrap;
  min-height: 44px;
  line-height: 1;
}
.page-nav__jump-caret--chapter {
  min-width: 78px;  /* fits "INTRO ▼" or "CH 8 ▼" without resize */
}
.page-nav__jump-caret--section {
  min-width: 96px;  /* fits "§ 1.1A ▼" or "§ 0.5B ▼" without resize */
}
.page-nav__jump-caret--chapter {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.page-nav__jump-caret--chapter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-right: 1px solid rgba(200,168,75,0.25);
  pointer-events: none;
}
.page-nav__jump-caret--section {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.page-nav__jump-caret--section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(200,168,75,0.25);
  pointer-events: none;
}
.page-nav__jump-caret[hidden] { display: none; }
.page-nav__jump-caret:hover,
.page-nav__jump-caret[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
}
.page-nav__jump-caret-label {
  font-size: 11px;
  font-weight: 700;
}
.page-nav__jump-caret svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.page-nav__jump-caret[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Section jumper — pops up from the caret. Lists chapter sections.
   Anchored to its caret-group's left edge so it grows rightward. */
.section-jumper {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  min-width: 320px;
  max-width: 90vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem 0;
  z-index: 200;
  animation: jumperIn 0.18s ease-out;
}
.section-jumper.is-open { display: block; }
@keyframes jumperIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-jumper__head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding: 0.55rem 1rem 0.4rem;
  border-bottom: 1px solid var(--off-white);
}
.section-jumper__chapter {
  padding: 0.5rem 1rem 0.55rem;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-navy);
  background: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
}
.section-jumper__item {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
  color: var(--charcoal);
  font-size: 13.5px;
  border-bottom: 1px solid var(--off-white);
  transition: background 0.12s;
  align-items: center;
}
.section-jumper__item:last-child { border-bottom: none; }
.section-jumper__item:hover { background: var(--off-white); }
.section-jumper__item.is-current {
  background: rgba(200,168,75,0.12);
  border-left: 3px solid var(--gold);
  padding-left: calc(1rem - 3px);
}
.section-jumper__num {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dark-red);
  text-align: center;
  padding: 0.25rem 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 3px;
}
.section-jumper__item.is-current .section-jumper__num {
  background: var(--gold); color: var(--dark-navy); border-color: var(--gold);
}
.section-jumper__title {
  font-weight: 600;
  color: var(--dark-navy);
  line-height: 1.25;
}
.section-jumper__sub {
  font-size: 11.5px;
  color: var(--mid-gray);
  margin-top: 0.15rem;
}

/* Chapter jumper — pops up from the chapter caret. Lists the chapters.
   Anchored to the LEFT side of the next-wrap (under the chapter caret). */
.chapter-jumper {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  min-width: 280px;
  max-width: 90vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.4rem 0;
  z-index: 200;
  animation: jumperIn 0.18s ease-out;
}
.chapter-jumper.is-open { display: block; }
.chapter-jumper__head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding: 0.55rem 1rem 0.4rem;
  border-bottom: 1px solid var(--off-white);
}
.chapter-jumper__item {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.7rem;
  padding: 0.65rem 1rem;
  text-decoration: none;
  color: var(--charcoal);
  font-size: 13.5px;
  border-bottom: 1px solid var(--off-white);
  transition: background 0.12s;
  align-items: center;
}
.chapter-jumper__item:last-child { border-bottom: none; }
.chapter-jumper__item:hover { background: var(--off-white); }
.chapter-jumper__item.is-current {
  background: rgba(200,168,75,0.12);
  border-left: 3px solid var(--gold);
  padding-left: calc(1rem - 3px);
}
.chapter-jumper__item.is-pending {
  opacity: 0.55;
  cursor: not-allowed;
}
.chapter-jumper__item.is-pending:hover { background: transparent; }
.chapter-jumper__num {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--dark-red);
  text-align: center;
  padding: 0.3rem 0.2rem;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chapter-jumper__item.is-current .chapter-jumper__num {
  background: var(--gold); color: var(--dark-navy); border-color: var(--gold);
}
.chapter-jumper__title {
  font-weight: 600;
  color: var(--dark-navy);
  line-height: 1.25;
}
.chapter-jumper__sub {
  font-size: 11.5px;
  color: var(--mid-gray);
  margin-top: 0.15rem;
  font-style: italic;
}

/* ============================================================
   CHAPTER SCORE BADGE — bottom-nav, right of the section caret.
   Shows current chapter's earned/max score, color-coded:
     ≥80% green / 60-79% yellow / <60% red / no-scores neutral.
   Click opens a popover showing scoring method + per-activity history.
   First-build: registers Section 1.2e wp-builder. Other activities
   register via window.cobScoreRegistry as they're built.
   ============================================================ */
.page-nav__score-group {
  position: relative;
  display: inline-flex;
  margin-left: 0.6rem;  /* small gap from section caret */
}
.page-nav__score-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  height: 44px;
  border: 1.5px solid rgba(26, 35, 50, 0.25);
  border-radius: 4px;
  background: var(--off-white, #fffaf0);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--dark-navy);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.08s;
  /* Never let the score wrap — the numbers + slash must stay on one line.
     Without this, a tight bottom nav stacks "0 / 84" vertically (the slash
     ends up mid-stack), which reads as broken. */
  white-space: nowrap;
  flex: none;
}
.page-nav__score-badge[hidden] { display: none; }
.page-nav__score-badge:hover {
  background: var(--white);
  border-color: var(--dark-navy);
  transform: translateY(-1px);
}
.page-nav__score-badge:active { transform: translateY(0); }
.page-nav__score-label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.7;
}
.page-nav__score-fraction {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.page-nav__score-divider {
  margin: 0 0.15rem;
  opacity: 0.5;
}
/* Color states — applied via [data-score-state] attribute */
.page-nav__score-badge[data-score-state="green"] {
  background: rgba(74, 125, 74, 0.12);
  border-color: #4a7d4a;
  color: #2f5a2f;
}
.page-nav__score-badge[data-score-state="yellow"] {
  background: rgba(218, 165, 32, 0.16);
  border-color: var(--gold, #daa520);
  color: #6e5012;
}
.page-nav__score-badge[data-score-state="red"] {
  background: rgba(168, 80, 64, 0.12);
  border-color: #a85040;
  color: #6f3528;
}
.page-nav__score-badge[data-score-state="neutral"] {
  background: var(--off-white, #fffaf0);
  border-color: rgba(26, 35, 50, 0.25);
  color: rgba(26, 35, 50, 0.55);
}

/* Score history popover — same visual register as section-jumper but
   with structured content (current total, scoring method, activity list). */
.score-history-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  min-width: 380px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
  z-index: 200;
  animation: jumperIn 0.18s ease-out;
}
.score-history-popover.is-open { display: block; }
.score-history-popover[hidden] { display: none; }
.score-history-popover__head {
  padding: 0.85rem 1.1rem 0.6rem;
  border-bottom: 1px solid var(--off-white, #fffaf0);
  background: var(--cream, #f4ead5);
  /* Sticky so the close (X) stays visible when the popover content scrolls.
     Without this, scrolling the tall score list pushed the X out of view and
     iOS rubber-band bounce sprang it back unreachable. */
  position: sticky;
  top: 0;
  z-index: 2;
}
.score-history-popover__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--dark-navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.score-history-popover__close:hover,
.score-history-popover__close:focus {
  opacity: 1;
  background: rgba(26, 35, 50, 0.08);
}
.score-history-popover__chapter-name {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 0 0 0.3rem;
}
.score-history-popover__total {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dark-navy);
  margin: 0;
}
.score-history-popover__total[data-score-state="green"] { color: #2f5a2f; }
.score-history-popover__total[data-score-state="yellow"] { color: #6e5012; }
.score-history-popover__total[data-score-state="red"] { color: #6f3528; }
.score-history-popover__total[data-score-state="neutral"] { color: rgba(26, 35, 50, 0.55); }
.score-history-popover__total-pct {
  font-size: 14px;
  font-weight: 600;
  margin-left: 0.4rem;
  opacity: 0.7;
}
.score-history-popover__section {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--off-white, #fffaf0);
}
.score-history-popover__section:last-child { border-bottom: none; }
.score-history-popover__section-title {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 0 0 0.5rem;
}
.score-history-popover__method {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--charcoal, #333);
  margin: 0;
}
.score-history-popover__method strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
.score-history-popover__history {
  list-style: none;
  margin: 0;
  padding: 0;
}
.score-history-popover__history-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(26, 35, 50, 0.08);
  font-size: 12.5px;
}
.score-history-popover__history-item:last-child { border-bottom: none; }
.score-history-popover__history-label {
  flex: 1;
  color: var(--charcoal, #333);
  line-height: 1.35;
}
.score-history-popover__history-score {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--dark-navy);
  font-size: 13px;
}
/* R99: best-retake score, shown next to the locked original when the
   student has improved on retake. Visually softer than the original
   (the original is the "stamped" score; retake is supplementary). */
.score-history-popover__history-retake {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mid-gray);
  font-size: 12px;
  font-style: italic;
}
.score-history-popover__empty {
  font-size: 12.5px;
  font-style: italic;
  color: var(--mid-gray);
  margin: 0;
}

/* R59: per-activity "How scored?" toggle + inline-expand detail panel.
   The toggle is a small text-button styled to look like a clickable link
   without overpowering the row's primary content (label + score). The
   detail panel renders as its own li (with no bullet via list-style:none
   inherited from .score-history-popover__history) and slides in below
   the row when expanded. */
.score-history-popover__method-toggle {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  background: transparent;
  border: 1px solid rgba(26, 35, 50, 0.18);
  color: var(--mid-gray);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.score-history-popover__method-toggle:hover {
  background: var(--off-white, #fffaf0);
  color: var(--dark-navy);
  border-color: var(--dark-navy);
}
.score-history-popover__method-toggle.is-active {
  background: var(--dark-navy);
  color: var(--gold);
  border-color: var(--dark-navy);
}
.score-history-popover__method-detail {
  padding: 0;
  border-bottom: 1px dashed rgba(26, 35, 50, 0.08);
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease-out;
}
.score-history-popover__method-detail.is-open {
  max-height: 500px;  /* generous; actual content rarely exceeds 200px */
}
.score-history-popover__method-detail-inner {
  padding: 0.6rem 0.75rem 0.7rem;
  background: rgba(218, 165, 32, 0.06); /* faint gold tint */
  border-left: 3px solid var(--gold);
  margin: 0.3rem 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--charcoal, #333);
}
.score-history-popover__method-detail-inner strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
.score-history-popover__method-detail-inner p {
  margin: 0 0 0.5rem;
}
.score-history-popover__method-detail-inner p:last-child { margin-bottom: 0; }

/* On mobile, the score badge can be tighter and the popover full-width */
@media (max-width: 1000px) {
  .page-nav__score-badge { padding: 0 0.55rem; gap: 0.35rem; }
  .page-nav__score-label { display: none; }
  .score-history-popover { min-width: 280px; left: -0.5rem; }
}

/* On mobile, the caret stays but the dropdown becomes wider */
@media (max-width: 1000px) {
  .page-nav__next-wrap:has(.page-nav__jump-caret:not([hidden])) .page-nav__btn--next .page-nav__label {
    max-width: 100px;
  }
  .section-jumper { min-width: 250px; left: -0.5rem; }
  .chapter-jumper { min-width: 250px; left: -0.5rem; }
}

/* Cover-state styling: when Next button has .next-cta-cover, make it bigger and gold */
.page-nav__btn.next-cta-cover {
  background: var(--gold);
  color: var(--dark-navy);
  font-size: 13px;
  padding: 0.85rem 1.5rem;
}
.page-nav__btn.next-cta-cover:hover:not(:disabled) {
  background: var(--white);
}
/* On phones the label is normally hidden — but show it on the cover so users
   see "Open the Book". */
@media (max-width: 1000px) {
  .page-nav__btn.next-cta-cover .page-nav__label { display: inline !important; }
}

.page-nav__center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  position: relative;  /* anchor for page-jumper popover */
}
.page-nav__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--dark-navy);
  line-height: 1.2;
  max-width: 38ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: none;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  font-style: italic;
  border-radius: 3px;
  transition: background 0.15s;
}
.page-nav__title:hover {
  background: rgba(200,168,75,0.10);
}
.page-nav__counter {
  font-family: inherit;
  font-size: 11px;
  color: var(--mid-gray);
  font-weight: 500;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  padding: 0.05rem 0.4rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.page-nav__counter:hover {
  background: rgba(200,168,75,0.10);
}
.page-nav__num {
  color: var(--dark-red);
  font-weight: 700;
}

/* Page-jumper popover — appears above the counter when the user clicks
   the title or counter. Numeric input + Go button to jump to a print page. */
.page-jumper {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  padding: 0.85rem 1rem;
  z-index: 200;
  min-width: 240px;
  /* Use a dedicated keyframe so the horizontal centering (translateX(-50%))
     is preserved across all animation frames. The shared jumperIn keyframe
     would overwrite the centering and cause a horizontal jerk. */
  animation: pageJumperIn 0.18s ease-out;
}
@keyframes pageJumperIn {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* R99 v115: First-visit toast — bottom-left, slides up, auto-dismisses.
   Shown once per browser (localStorage flag) to warn students that
   their reading progress is saved on this device and clearing cookies
   will reset everything. Browsers do not expose a "user is about to
   clear cookies" event, so this preemptive notice is the best practical
   pre-warning we can deliver. */
.cob-storage-toast {
  position: fixed;
  bottom: 70px;
  left: 16px;
  max-width: 340px;
  background: var(--dark-navy);
  color: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 95;
  font-size: 0.86rem;
  line-height: 1.45;
  animation: cobToastIn 0.35s ease-out;
  cursor: pointer;
}
.cob-storage-toast[hidden] { display: none; }
.cob-storage-toast__title {
  display: block;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cob-storage-toast__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--cream);
  opacity: 0.7;
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.cob-storage-toast__close:hover { opacity: 1; }
@keyframes cobToastIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* R99 v115: Mid-session "storage was cleared" modal. Fires once when
   the heartbeat detects localStorage/cookies were wiped while the tab
   was open (typically: user opened DevTools, cleared site data, then
   came back). The data is already gone — the modal explains what
   happened and lets the student dismiss. */
.cob-storage-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 51, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: cobToastIn 0.2s ease-out;
}
.cob-storage-modal-backdrop[hidden] { display: none; }
.cob-storage-modal {
  max-width: 480px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.7rem 1.4rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  color: var(--charcoal);
}
.cob-storage-modal__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
  color: var(--dark-red);
}
.cob-storage-modal__body {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}
.cob-storage-modal__close {
  background: var(--dark-navy);
  color: var(--cream);
  border: none;
  border-radius: 4px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.92rem;
}
.cob-storage-modal__close:hover {
  background: var(--gold);
  color: var(--dark-navy);}

/* R196: PDF / export "coming soon" modal */
.cob-pdf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 51, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.cob-pdf-modal-backdrop.is-open { opacity: 1; }
.cob-pdf-modal {
  max-width: 460px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.7rem 1.4rem;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
  color: var(--charcoal);
}
.cob-pdf-modal__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0 0 0.7rem;
  color: var(--dark-navy);
}
.cob-pdf-modal__body {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.9rem;
}
.cob-pdf-modal__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.2rem;
}
.cob-pdf-modal__btn {
  border: none;
  border-radius: 5px;
  padding: 0.6rem 1.15rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cob-pdf-modal__btn--primary { background: var(--dark-navy); color: var(--cream); }
.cob-pdf-modal__btn--primary:hover { background: var(--gold); color: var(--dark-navy); }
.cob-pdf-modal__btn--secondary { background: transparent; color: var(--dark-navy); box-shadow: inset 0 0 0 1.5px rgba(27,39,64,0.3); }
.cob-pdf-modal__btn--secondary:hover { background: rgba(27,39,64,0.08); }
.cob-pdf-modal__btn:focus-visible { outline: 2px solid var(--gold-deep, #7A5E12); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cob-pdf-modal-backdrop { transition: none; }
}

.page-jumper[hidden] { display: none; }
.page-jumper__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 0.45rem;
}
.page-jumper__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.page-jumper__input {
  flex: 1;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--light-gray);
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark-navy);
  background: var(--off-white);
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.page-jumper__input:focus {
  border-color: var(--gold);
  background: var(--white);
}
/* Hide spinner buttons in numeric input — they're tiny and ugly */
.page-jumper__input::-webkit-outer-spin-button,
.page-jumper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-jumper__input { -moz-appearance: textfield; }
.page-jumper__go {
  background: var(--dark-navy);
  color: var(--cream);
  border: none;
  padding: 0 1rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.page-jumper__go:hover {
  background: var(--gold);
  color: var(--dark-navy);
}
.page-jumper__hint {
  font-size: 11px;
  color: var(--mid-gray);
  margin-top: 0.4rem;
  font-style: italic;
  min-height: 1em;
}
.page-jumper__hint--error {
  color: var(--dark-red);
  font-style: normal;
}

/* Page-break markers — invisible content boundaries used by the
   pagination system to track which print-equivalent page the student
   is currently scrolling through. JS assigns sequential numbers at load
   time. The marker takes no visual or layout space. */
.page-break {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0;
  line-height: 0;
}

/* Reset book cover height when paginated — content sizes naturally now */
.page-content[data-page="1"] .book-cover {
  /* No min-height needed — content fits within natural flow */
}

@media (max-width: 1000px) {
  main#book { padding-bottom: 130px; }
  /* The 3-col grid (jumpers | center | pager) overflowed iPhone widths because
     the pager buttons were a fixed 240px each (=480px). On mobile the labels are
     hidden, so the prev/next collapse to compact arrow-only buttons and the whole
     bar fits the viewport. Prevents the page-wide horizontal scroll + off-screen
     prev/next reported on iPhone. */
  .page-nav {
    padding: 0.6rem 0.6rem;
    gap: 0.4rem;
    grid-template-columns: auto 1fr auto;  /* let columns size to content, center flexes */
    max-width: 100vw;
    overflow-x: hidden;
  }
  .page-nav__btn { padding: 0.55rem 0.6rem; font-size: 11px; }
  .page-nav__title { font-size: 12px; max-width: 14ch; }
  .page-nav__counter { font-size: 10px; }
  .page-nav__label { display: none; }
  /* Pager buttons: drop the fixed 240px, become compact arrow-only on mobile */
  .page-nav__pager .page-nav__btn {
    width: auto;
    flex: 0 1 auto;          /* allow shrink */
    min-width: 40px;
    max-width: 42vw;          /* never let one button exceed ~42% of screen */
    padding: 0.55rem 0.7rem;
  }
  .page-nav__pager { max-width: 100%; min-width: 0; }
  /* The cover CTA 'Open the Book' is the only page with a single wide next btn;
     give it room but keep it on-screen by letting its label truncate. */
  .page-nav__btn.next-cta-cover { max-width: 60vw; }
  .page-nav__btn.next-cta-cover .page-nav__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .page-nav__pager .page-nav__btn .page-nav__arrow { font-size: 1.2rem; }
  /* Jumpers column: keep carets, allow it to shrink */
  .page-nav__jumpers { gap: 0.25rem; min-width: 0; flex-wrap: nowrap; overflow: visible; }
  /* On phones the bottom bar can't hold everything in one row. Priority =
     back + chapter/section carets + prev/next. Hide the secondary center
     (page title + counter) and the score badge so the essentials don't collide.
     Location is still shown by the carets; the score is reachable on the chapter
     score page. */
  .page-nav__center { display: none; }
  /* Hide only the bottom-nav score BADGE on mobile (no room), but keep the
     score-group in layout so its popover can still open — triggered from the
     Tools-menu 'Chapter Score' item. The badge has zero size so it doesn't
     affect the 2-col grid. */
  .page-nav__score-badge { display: none; }
  .page-nav__score-group { position: static; width: 0; overflow: visible; }
  /* Now the grid only needs two columns: jumpers (left) | pager (right). */
  .page-nav { grid-template-columns: 1fr auto; }
  .page-nav__jumpers .page-nav__jump-caret { padding: 0.4rem 0.45rem; font-size: 11px; }
  .page-nav__jumpers .page-nav__jump-caret-label { max-width: 7ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Belt-and-suspenders: never let any single element force the page wider than
   the screen on small viewports. */
@media (max-width: 1000px) {
  html, body { max-width: 100%; overflow-x: clip; }
}


/* === Mobile/phablet nav hardening (R-mobile2): covers up to 768px so all phones
   are caught regardless of how the browser reports width. Mirrors the 600px rules
   for the items most likely to overflow. === */
@media (max-width: 768px) {
  .top-nav { flex-wrap: nowrap; max-width: 100vw; gap: 6px; padding: 8px 12px; }
  .top-nav__hook-icon { display: none !important; }
  /* Mobile: show the chain-link mark instead of the title text (saves width so the
     search button fits). The whole title is still a link to #cover. */
  .top-nav__title-icon { display: block !important; }
  .top-nav__title-text { display: none; }
  .top-nav__title a { white-space: nowrap; display: inline-flex; align-items: center; }
  .top-nav__menu-btn-text { max-width: 0; overflow: hidden; opacity: 0; }
  .page-nav { grid-template-columns: auto 1fr auto; max-width: 100vw; }
  .page-nav__pager .page-nav__btn { width: auto; flex: 0 1 auto; min-width: 40px; max-width: 42vw; }
  .page-nav__label { display: none; }
  html, body { max-width: 100%; overflow-x: clip; }
}


/* === Jumper popover stacking fix ===
   The bottom-nav (.page-nav) is position:fixed and forms a stacking context; the
   page content's pageIn animation (opacity+transform) forms its own context that was
   painting OVER the nav's absolutely-positioned jumper popovers, hiding them behind
   the prose. Making the OPEN jumper position:fixed lifts it out of the nav's context
   to the viewport's top stacking level, so it reliably paints above the page. */
.chapter-jumper.is-open,
.section-jumper.is-open {
  position: fixed;
  bottom: 64px;            /* just above the ~58-64px bottom nav */
  left: 10px;
  top: auto;
  max-height: 70vh;
  z-index: 300;            /* above page content + bottom nav, below full-screen modals if any */
}
@media (min-width: 1001px) {
  /* On desktop anchor them near the left of the nav cluster rather than full-left */
  .chapter-jumper.is-open,
  .section-jumper.is-open { left: 1.5rem; bottom: 70px; }
}


/* Mobile: the score popover (opened from the Tools menu) must escape the bottom-nav
   stacking context to render above the prose, like the chapter/section jumpers. */
@media (max-width: 1000px) {
  .score-history-popover:not([hidden]) {
    position: fixed;
    left: 10px;
    right: 10px;
    /* Bound the popover BETWEEN the two navs so its header (with the score + close X)
       can never slide under the top nav. top clears the top nav (~57px + gap);
       bottom clears the bottom nav (~64px). max-height removed — the top/bottom
       anchors define the height, and overflow-y scrolls the body within. */
    top: 66px;
    bottom: 64px;
    max-width: none;
    width: auto;
    max-height: none;
    overflow-y: auto;
    z-index: 300;
  }
}


/* === Landscape phone: widescreen reading ===
   A phone rotated sideways is WIDE but SHORT (~390px tall). Use the extra width
   for a slightly larger reading size, and trim vertical padding so the short
   viewport isn't wasted. Scoped to landscape orientation + short height so it
   only catches phones, not tablets/laptops. The nav chrome stays the compact
   mobile version (better for a short viewport than the desktop bars). The reading
   bump stacks on top of any zoom level the reader has chosen. */
@media (orientation: landscape) and (pointer: coarse) and (hover: none) and (max-height: 600px) {
  /* Desktop-only chrome that must also be hidden on phones in landscape (the
     max-width mobile breakpoints don't catch landscape phones, which are wide). */
  .focus-report { display: none !important; }
  .focus-indicator { display: none !important; }
  .top-nav__title-text { display: none; }        /* icon-only title (room for search) */
  .top-nav__hook-icon { display: none !important; }
  .top-nav__title-icon { display: block !important; }
  html { font-size: calc(112% * var(--reading-scale, 1)); }  /* ~12% larger base */
  .page-content.active { padding: 1rem 2rem 5.5rem; }         /* trim top/bottom */
  main#book { padding-bottom: 90px; }

  /* Landscape phones are wider than the 600px mobile breakpoint, so the mobile nav
     rules don't apply here. Re-pin the nav chrome in px so the 112% reading bump
     doesn't enlarge the bars, and hide the disabled hooks. */
  .top-nav { padding: 6px 14px; gap: 8px; flex-wrap: nowrap; max-width: 100vw; }
  .top-nav__hook-icon { display: none; }
  .top-nav__title a { font-size: 15px; max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .top-nav__menu-btn { font-size: 11px; padding: 5px 7px; }
  .top-nav__menu-btn-text { max-width: 0; overflow: hidden; opacity: 0; }
  .top-nav__hamburger-btn { padding: 6px 8px; }
  .top-nav__home-btn { font-size: 15px; }
  /* Bottom nav in landscape: KEEP the score badge (there's width for it), but
     DROP the center page-title — it took variable width and pushed prev/next off
     screen. Grid: jumpers (with score) | pager. */
  .page-nav { font-size: 13px; gap: 8px; padding: 8px 14px; grid-template-columns: 1fr auto; }
  .page-nav__center { display: none; }
  .page-nav__score-group { position: relative; width: auto; }
  .page-nav__score-badge { display: inline-flex; }
  .page-nav__btn { font-size: 12px; padding: 8px 12px; }
  .page-nav__arrow, .page-nav__pager .page-nav__btn .page-nav__arrow { font-size: 18px; }
  .page-nav__jumpers .page-nav__jump-caret { font-size: 11px; padding: 7px 8px; }
  /* Compact prev/next like portrait — labels off, icon-sized — so they fit.
     Use the high-specificity selector to beat .page-nav__pager .page-nav__btn .page-nav__label. */
  .page-nav__pager .page-nav__btn .page-nav__label,
  .page-nav__pager .page-nav__btn--next .page-nav__label { display: none !important; }
  .page-nav__pager .page-nav__btn { width: auto; flex: 0 1 auto; min-width: 40px; max-width: 64px; padding: 9px 11px; }
}


/* First-visit storage toast: in short landscape viewports, keep it compact and low
   so it doesn't overlap the reading column. */
@media (orientation: landscape) and (pointer: coarse) and (hover: none) and (max-height: 600px) {
  .cob-storage-toast {
    /* Cramped landscape: anchor top-right, compact. Clear of both the reading
       column (centered) and the bottom nav. First-visit only, auto-dismisses. */
    top: 64px;
    bottom: auto;
    left: auto;
    right: 8px;
    max-width: 250px;
    font-size: 0.66rem;
    line-height: 1.25;
    padding: 0.4rem 0.55rem;
    z-index: 250;
  }
}

/* Print: show all pages, hide navigation */
@media print {
  .page-content { display: block !important; page-break-after: always; }
  .page-nav, .progress-bar, .top-nav { display: none !important; }
  main#book { padding-bottom: 0; }
}

/* =========================================================
   END-OF-INTRO OPTION CARDS
   ========================================================= */
.end-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.end-option {
  display: block;
  padding: 1.5rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.end-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
}
/* All three end-option cards share one uniform look — gold top border,
   white background, gold icon. (Per-card color differentiation was removed
   so the trio reads as one set of equal choices.) */
.end-option--quiz { border-top-color: var(--gold); }
.end-option--continue { border-top-color: var(--gold); background: var(--white); }
.end-option__icon {
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.end-option--quiz .end-option__icon { color: var(--gold); }
.end-option--continue .end-option__icon { color: var(--gold); }
.end-option__head {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--dark-navy);
  margin-bottom: 0.5rem;
}
.end-option__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
  margin-bottom: 1rem;
}
.end-option__cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* =========================================================
   PRACTICE QUIZ
   ========================================================= */
.quiz-frame {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}
.quiz-progress {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 0.85rem;
}
.quiz-q {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--dark-navy);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}
.quiz-options {
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.quiz-option {
  background: var(--off-white);
  border: 1.5px solid var(--light-gray);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  color: var(--charcoal);
  line-height: 1.4;
}
.quiz-option:hover:not(:disabled) {
  border-color: var(--gold);
  background: var(--white);
}
.quiz-option--correct { background: #E8F1E8; border-color: #4A7C59; color: #1F3A28; }
.quiz-option--wrong { background: #F5E5E0; border-color: var(--dark-red); color: var(--dark-red); }
.quiz-option:disabled { cursor: default; }
.quiz-feedback {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  display: none;
}
.quiz-feedback.is-shown { display: block; }
.quiz-feedback--right { background: #E8F1E8; border-left: 4px solid #4A7C59; color: #1F3A28; }
.quiz-feedback--wrong { background: #F5E5E0; border-left: 4px solid var(--dark-red); color: var(--dark-red); }
.quiz-nav { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.quiz-running-score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--gold-deep, #7A5E12);
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}
.quiz-nav__btn {
  background: var(--gold);
  color: var(--dark-navy);
  border: none;
  padding: 0.65rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  display: none;
}
.quiz-nav__btn.is-shown { display: inline-block; }
.quiz-nav__btn:hover { background: var(--white); }
.quiz-results { text-align: center; padding: 2rem 1rem; }
.quiz-results__score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1;
}
.quiz-results__total {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--mid-gray);
}
.quiz-results__msg {
  font-style: italic;
  color: var(--charcoal);
  margin: 1rem 0 1.5rem;
}
.quiz-results__actions {
  display: flex; gap: 0.85rem; justify-content: center;
  flex-wrap: wrap;
}
.quiz-results__actions .end-option { flex: 1 1 200px; max-width: 280px; }

/* =========================================================
   ZOOM CONTROLS (floating, lower-right) — vertical stack
   of three buttons: + on top, cycle in middle, − on bottom.
   Four zoom levels (0 = default, 3 = full-width). Higher
   levels scale text up and reduce side margins, preserving
   layout (no element rearrangement, no reflow surprises).
   ========================================================= */
.zoom-controls {
  position: fixed;
  right: 1rem;
  bottom: 100px; /* above the page-nav */
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  font-family: var(--font-body);
}
.zoom-controls__step,
.zoom-controls__cycle {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--dark-navy);
  transition: background 0.15s, color 0.15s, transform 0.15s, opacity 0.15s;
  padding: 0;
}
.zoom-controls__step {
  width: 32px; height: 32px;
}
.zoom-controls__step svg { width: 16px; height: 16px; }
.zoom-controls__cycle {
  width: 44px; height: 44px;
}
.zoom-controls__cycle svg { width: 22px; height: 22px; }
.zoom-controls__step:hover,
.zoom-controls__cycle:hover {
  background: var(--gold);
  color: var(--dark-navy);
  transform: translateY(-1px);
}
.zoom-controls__step:disabled,
.zoom-controls__step[disabled] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.zoom-controls__icon-out { display: block; }
.zoom-controls__icon-in { display: none; }
body.zoom-3 .zoom-controls__icon-out { display: none; }
body.zoom-3 .zoom-controls__icon-in { display: block; }
body.zoom-3 .zoom-controls__cycle {
  background: var(--gold);
  color: var(--dark-navy);
}

/* Honor the [hidden] attribute */
.zoom-controls[hidden] { display: none !important; }

/* ZOOM LEVELS — pure CSS `zoom` property, same as browser Ctrl++.
   Everything scales proportionally: text, images, padding, margins,
   widgets — all together. Layout is preserved exactly; users just
   see a larger version of the same page (and proportionally less
   vertical content fits on screen, like any normal browser zoom). */
/* === ZOOM — two implementations by platform ===
   DESKTOP (>=601px): the original CSS `zoom` property on the page content. Desktop
   never had the Safari-pinch freeze / left-clip issues, and `zoom` keeps the nav
   chrome untouched automatically (it only scales .page-content). Restored per request.
   MOBILE (<=600px): font-size scaling via --reading-scale on <html>, which avoids the
   mobile-Safari `zoom` problems. The top/bottom nav are insulated so they DON'T scale
   (their font-size is pinned in px independent of the reading scale). */

/* Desktop: old zoom-property method (only scales the reading page, not the nav) */
@media (min-width: 1001px) {
  body.zoom-1 .page-content.active { zoom: 1.15; }
  body.zoom-2 .page-content.active { zoom: 1.30; }
  body.zoom-3 .page-content.active { zoom: 1.50; }
}

/* Mobile: font-size scaling via root --reading-scale */
@media (max-width: 1000px) {
  html:has(body.zoom-1) { --reading-scale: 1.12; }
  html:has(body.zoom-2) { --reading-scale: 1.26; }
  html:has(body.zoom-3) { --reading-scale: 1.42; }
  body.zoom-3 { --max-content: 100%; --max-prose: 100%; }
  /* Insulate the nav chrome from the reading zoom. The reading scale lives on the
     <html> root font-size, so ANY rem/em value inside the navs (font-size, padding,
     icon size, gaps) would scale. Pin the size-bearing properties in px so the
     top/bottom bars stay a constant size at every zoom level. */
  .top-nav, .top-nav * { font-size: revert; }
  .top-nav__title a { font-size: 14px; }
  .top-nav__menu-btn { font-size: 11px; padding: 5px 6px; }
  .top-nav__hamburger-btn, .top-nav__menu-btn.top-nav__hamburger-btn { padding: 6px 8px; }
  .top-nav__home-btn { font-size: 14px; }
  /* Bottom nav: pin font-size, padding, gaps, and the arrow glyph (all were rem) */
  .page-nav { font-size: 13px; gap: 6px; padding: 10px 10px; }
  .page-nav__jumpers .page-nav__jump-caret { font-size: 11px; padding: 7px 7px; }
  .page-nav__btn { font-size: 11px; padding: 9px 11px; }
  .page-nav__pager .page-nav__btn { padding: 9px 11px; }
  .page-nav__arrow { font-size: 18px; }
  .page-nav__pager .page-nav__btn .page-nav__arrow { font-size: 18px; }
  .back-btn, #back-btn { padding: 7px; }
}

@media (max-width: 1000px) {
  .zoom-controls { right: 0.6rem; bottom: 120px; }
  .zoom-controls__step { width: 30px; height: 30px; }
  .zoom-controls__cycle { width: 40px; height: 40px; }
  .zoom-controls__cycle svg { width: 20px; height: 20px; }
}

@media print { .zoom-controls { display: none !important; } }
@media print {
  body { font-size: 11pt; background: white; color: black; }
  .top-nav { display: none; }
  .book-cover, .toc, .chapter-opener, .section-opener { page-break-after: always; }
  .activity, .callout--quote, .closing-banner { break-inside: avoid; }
  a { color: black; text-decoration: none; }
  .figure--right, .figure--left { float: none; width: 60%; margin: 1rem auto; }
}

/* =========================================================
   BREATHING ROOM ON SMALL SCREENS
   ========================================================= */
@media (max-width: 1000px) {
  body { font-size: 1rem; }
  .page { padding: 3rem 1.25rem; }
  .chapter-opener { padding: 2rem 1.25rem 1.75rem; }
  .top-nav { padding: 8px 12px; gap: 6px; flex-wrap: nowrap; max-width: 100vw; }
  .top-nav__title { font-size: 14px; }
  .top-nav__title-icon { display: block; }   /* show the chain-link mark on mobile */
  .top-nav__title-text { display: none; }    /* hide the text to make room for search */
  .top-nav__links { gap: 0.5rem; min-width: 0; }
  .top-nav__links a { margin-left: 0.5rem; font-size: 11px; }
  /* The two disabled 'coming soon' hook placeholders (map + chain) eat width and
     do nothing yet — hide them on mobile so the bar fits the viewport. */
  .top-nav__hook-icon { display: none; }
  /* Compact the menu buttons so Version/Level/Translate/Tools fit */
  .top-nav__menu-btn { padding: 5px 6px; font-size: 11px; }
  .top-nav__menu-btn-text { max-width: 0; overflow: hidden; opacity: 0; }  /* icon-only on mobile */
  .roadmap__item, .toc__item { grid-template-columns: 3rem 1fr; }
  .toc__pages { grid-column: 2; padding-top: 0.25rem; }
}
/* =========================================================
   CITATIONS — inline superscript markers + a Works Cited page.
   Uses <sup class="cite"><a href="#cite-N">N</a></sup>.
   Hover/focus shows a tooltip preview pulled from the [data-cite-N] entry.
   ========================================================= */
.cite {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.05em;
}
.cite a {
  color: var(--dark-red);
  font-weight: 700;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  transition: background 0.12s;
}
.cite a:hover {
  background: var(--gold);
  color: var(--dark-navy);
}
.cite a:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Works Cited page styling */
.works-cited {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: refnum;
}
.works-cited__entry {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--light-gray);
  font-size: 14px;
  line-height: 1.5;
  scroll-margin-top: 80px;
}
.works-cited__entry.is-highlight {
  background: rgba(200,168,75,0.18);
  border-left: 3px solid var(--gold);
  padding-left: 0.5rem;
  transition: background 0.4s, border 0.4s, padding 0.4s;
}
.works-cited__num {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--dark-red);
  font-size: 13px;
  text-align: right;
  padding-top: 0.05rem;
}
.works-cited__body {
  color: var(--charcoal);
}
.works-cited__body cite {
  font-style: italic;
  color: var(--dark-navy);
}
.works-cited__body a {
  color: var(--med-navy);
  word-break: break-word;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.works-cited__type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--off-white);
  color: var(--mid-gray);
  border: 1px solid var(--light-gray);
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  margin-right: 0.5rem;
  vertical-align: 1px;
}
.works-cited__type--primary { background: #F0E5D8; color: #6B4226; border-color: #C9B79A; }
.works-cited__type--scholarly { background: #E2EBF0; color: #1B4F72; border-color: #B6CCD8; }
.works-cited__type--encyclopedia { background: #DEEAD9; color: #2D6431; border-color: #B4CFAB; }
.works-cited__type--video { background: #F5E5E0; color: var(--dark-red); border-color: #E2BEB4; }
.works-cited__annotation { display: block; margin-top: .3rem; font-size: .92em; color: var(--mid-gray, #6E6454); line-height: 1.5; }
.works-cited__annotation a { font-size: inherit; }

/* =========================================================
   DIG DEEPER — a small curated panel at the end of a section.
   ~5 student-friendly resources for kids who want to go further.
   ========================================================= */
.dig-deeper {
  margin: 2.25rem 0 0;
  padding: 1.15rem 1.4rem 1.4rem;
  background: var(--dark-navy);
  border: 1.5px solid var(--med-navy);
  border-radius: 4px;
}
.dig-deeper__head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.dig-deeper__icon {
  font-size: 18px;
  color: var(--gold);
}
.dig-deeper__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.dig-deeper__lede {
  font-size: 13px;
  color: var(--cream);
  font-style: italic;
  margin: 0 0 0.85rem;
}
.dig-deeper__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.dig-deeper__item {
  background: var(--cream);
  border: 1px solid rgba(193,154,91,0.35);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
  font-size: 13.5px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.dig-deeper__type {
  font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.25rem 0;
  border-radius: 3px;
  align-self: start;
}
.dig-deeper__type--book { background: #F0E5D8; color: #6B4226; }
.dig-deeper__type--video { background: #F5E5E0; color: var(--dark-red); }
.dig-deeper__type--article { background: #E2EBF0; color: #1B4F72; }
.dig-deeper__type--podcast { background: #E5DEEA; color: #5D3A8E; }
.dig-deeper__type--site { background: #DEEAD9; color: #2D6431; }
.dig-deeper__title {
  font-weight: 700;
  color: var(--dark-navy);
  text-decoration: none;
}
.dig-deeper__title:hover { color: var(--dark-red); text-decoration: underline; }
.dig-deeper__title::after { content: " \2197"; font-size: 0.85em; opacity: 0.6; }
.dig-deeper__desc {
  margin-top: 0.2rem;
  color: var(--charcoal);
  font-size: 13px;
}

/* =========================================================
   DICHOTOMY ICONS — small SVG glyphs that flag which of the
   six recurring tensions a passage pulls on. Each icon is
   24x24 inline SVG, used in callouts, in R/B/F rules, and
   in margin annotations.
   ========================================================= */
.dichotomy-icon {
  display: inline-block;
  vertical-align: -0.18em;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}
.dichotomy-icon path,
.dichotomy-icon line,
.dichotomy-icon circle,
.dichotomy-icon rect,
.dichotomy-icon polyline {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dichotomy-icon .fill-now { fill: currentColor; stroke: none; }

/* Dichotomy inline tag — small chip used in line with prose */
.dichotomy-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem 0.22rem 0.45rem;
  border-radius: 999px;
  background: var(--off-white);
  color: var(--med-navy);
  border: 1px solid var(--light-gray);
  white-space: nowrap;
  vertical-align: 1px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
}
.dichotomy-tag:hover {
  background: var(--cream);
  border-color: var(--gold);
}
.dichotomy-tag:active { transform: translateY(1px); }
.dichotomy-tag .dichotomy-icon { width: 13px; height: 13px; flex-shrink: 0; }

/* The two poles inside a tag, separated by a directional arrow. */
.dichotomy-tag__pole {
  font-weight: 700;
}
.dichotomy-tag__pole--from { color: var(--mid-gray); }
.dichotomy-tag__pole--to { color: var(--dark-red); }
.dichotomy-tag__arrow {
  font-size: 13px;
  margin: 0 0.05rem;
  font-weight: 700;
  color: var(--dark-red);
  letter-spacing: 0;
  position: relative;
  top: -1px;
}
/* Contested: double arrow, both poles emphasized equally */
.dichotomy-tag[data-direction="contested"] .dichotomy-tag__pole--from,
.dichotomy-tag[data-direction="contested"] .dichotomy-tag__pole--to {
  color: var(--med-navy);
}
.dichotomy-tag[data-direction="contested"] .dichotomy-tag__arrow { color: var(--med-navy); }
/* Stable: em dash, both poles muted */
.dichotomy-tag[data-direction="stable"] .dichotomy-tag__pole--from,
.dichotomy-tag[data-direction="stable"] .dichotomy-tag__pole--to {
  color: var(--mid-gray);
}
.dichotomy-tag[data-direction="stable"] .dichotomy-tag__arrow { color: var(--mid-gray); }

/* Single-pole variant — used on player cards where we just label which
   dichotomy the player engaged with, not which direction the chapter moves. */
.dichotomy-tag[data-variant="single"] .dichotomy-tag__pole {
  font-weight: 700;
  color: var(--med-navy);
}

/* The old separate direction badge is no longer used — keep CSS for backward compat
   but hide it. */
.dichotomy-direction { display: none; }

/* =========================================================
   DICHOTOMY POPOVER — click any dichotomy chip and a modal-style
   popover shows the dichotomy's explanation. Same content as
   the chapter's full inline callout, used as a quick refresher.
   ========================================================= */
.dich-popover-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 51, 0.45);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dich-popover-overlay.is-open { display: flex; }

/* =========================================================
   IMAGE LIGHTBOX — click any figure image to expand it.
   ========================================================= */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.lightbox-overlay.is-open { display: flex; flex-direction: column; }
.lightbox-overlay__img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.lightbox-overlay__caption {
  color: rgba(244, 234, 213, 0.9);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  margin-top: 1rem;
  max-width: 720px;
  text-align: center;
  padding: 0 1rem;
  cursor: default;
}
.lightbox-overlay__close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--cream);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.lightbox-overlay__close:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--gold);
}
.lightbox-overlay__close:active { transform: scale(0.95); }
/* Visual cue that figure images are clickable */
.figure__img,
.figure img {
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.figure__img:hover,
.figure img:hover { opacity: 0.85; }

/* =========================================================
   CHAIN WIDGET — recurring callout for ongoing chains of
   related events/ideas across the book. Vertical chain on
   the left, text panel on the right. Click any link to
   switch the panel to that link's explanation.
   ========================================================= */
.chain-callout {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 1.1rem 1.3rem 1.2rem;
  margin: 1.5rem 0;
}
.chain-callout__overline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.55rem;
}
.chain-callout__icon {
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chain-callout__icon svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chain-callout__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--dark-navy);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.chain-callout__tagline {
  font-style: italic;
  color: var(--med-navy);
  font-size: 13.5px;
  margin: 0 0 1rem;
  line-height: 1.4;
}

/* =========================================================
   PAIRED-CHAIN WIDGET — synced two-chain visualization for
   mixed-chain framework. First use: Section 1.3c (printing
   press → Reformation / witch hunts). Layout: ONE chain
   spine down the middle of the box, with events for chainA
   projecting LEFT and events for chainB projecting RIGHT.
   Two tall panels on the outer edges show the active event
   detail per chain. Two color-coded labels above the chain
   identify which side belongs to which chain.
   ========================================================= */
.paired-chain {
  margin: 1.6rem auto 1.4rem;
  background: var(--cream-light, #f4ebd5);
  border: 1px solid var(--gold-pale, #e6d4a8);
  border-radius: 6px;
  padding: 1.4rem 0.5rem 1.5rem;
}
.paired-chain__header { text-align: center; margin: 0 0 1.2rem; }
.paired-chain__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-navy);
  margin: 0 0 0.35rem;
}
.paired-chain__intro {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.5;
}
/* Main 3-column layout: left panel | chain rail | right panel.
   All three columns are stretched to the same height. */
.paired-chain__main {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  gap: 0.5rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .paired-chain__main { grid-template-columns: 1fr 240px 1fr; gap: 0.4rem; }
}
@media (max-width: 540px) {
  /* On very narrow screens, stack: rail full width, panels below.
     This is a degraded but readable layout. */
  .paired-chain__main {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* The chain rail container is a flex column: split labels at the top,
   then the mist-masked SVG viewport below. */
.paired-chain__rail {
  display: flex;
  flex-direction: column;
}
/* Split labels above the chain — Reformation on left half, Witch Hunts
   on right half, with color-coded bottom-border underline. */
.paired-chain__rail-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.55rem;
  gap: 4px;
}
.paired-chain__label {
  margin: 0;
  padding: 0 0.2rem 0.4rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 2px solid;
  line-height: 1.25;
}
.paired-chain__label--reformation {
  color: var(--gold);
  border-color: var(--gold);
}
.paired-chain__label--witch-hunts {
  color: var(--dark-red);
  border-color: var(--dark-red);
}

/* Rail viewport — fixed-height windowed view, mist mask, drag cursor.
   Holds the SVG. */
.paired-chain__rail-viewport {
  position: relative;
  flex: 1;
  height: 380px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
  /* Mist mask top and bottom so chains fade out at edges */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.5) 6%, rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%, rgba(0,0,0,0.5) 94%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,0.5) 6%, rgba(0,0,0,1) 16%,
    rgba(0,0,0,1) 84%, rgba(0,0,0,0.5) 94%, transparent 100%);
}
.paired-chain__rail-viewport.is-dragging { cursor: grabbing; }
.paired-chain__rail-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.paired-chain__rail-svg.is-dragging { transition: none; }
.paired-chain__link-group { cursor: pointer; }
.paired-chain__link-blank { cursor: default; opacity: 0.35; }

/* Panels — tall narrow white boxes, fixed-height, internal scroll
   if content overflows. Match the rail viewport height for visual
   alignment but include a top label-row of breathing room. */
.paired-chain__panel {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 1rem 0.7rem 1rem;
  height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* Vertically center align with the chain rail viewport (panels start
     at the top of the column, but rail starts AFTER the labels — so
     give the panels a top margin equal to the labels' height). */
  margin-top: calc(12px * 1.25 + 0.4rem + 2px + 0.55rem);  /* font-size * line-height + padding-bottom + border + label margin-bottom */
}
/* Smaller chips inside paired-chain panels — these panels are narrower
   than other places chips appear, so we shrink the font/padding so they
   fit even when the vertical scrollbar takes its 12-15px slice. */
.paired-chain__panel .dichotomy-tag {
  font-size: 9.5px;
  padding: 0.18rem 0.4rem 0.18rem 0.32rem;
  letter-spacing: 0.04em;
  gap: 0.25rem;
}
.paired-chain__panel .dichotomy-tag .dichotomy-icon {
  width: 11px;
  height: 11px;
}
.paired-chain__panel .dichotomy-tag__arrow {
  font-size: 11px;
}
.paired-chain__panel--reformation { border-left: 4px solid var(--gold); }
.paired-chain__panel--witch-hunts { border-left: 4px solid var(--dark-red); }
.paired-chain__panel-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--mid-gray);
  margin: 0 0 0.2rem;
}
.paired-chain__panel-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--dark-navy);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.paired-chain__panel-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin: 0 0 0.7rem;
}
.paired-chain__panel-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
}
.paired-chain__panel-body p {
  margin: 0 0 0.6rem;
}
.paired-chain__panel-body p:last-child { margin-bottom: 0; }
/* Blank state — slot has no event for this chain */
.paired-chain__panel--blank {
  align-items: center;
  justify-content: center;
}
.paired-chain__panel-blank-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mid-gray);
  font-style: italic;
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}

.paired-chain__footer {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--charcoal);
  font-style: italic;
  text-align: center;
  margin: 1.3rem 0 0;
  padding: 0 0.5rem;
}

/* The two-column body */
.chain-widget {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.3rem;
  margin-top: 0.5rem;
}
@media (max-width: 720px) {
  .chain-widget { grid-template-columns: 1fr; }
}
/* Left rail: a fixed-height windowed view of a continuous chain SVG.
   The chain SVG inside translates vertically; a fixed highlight band in
   the center of the container indicates the active link. */
.chain-widget__rail {
  position: relative;
  height: 420px;
  width: 100%;
  overflow: hidden;
  /* Touch: capture vertical pan gestures for our drag handler */
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  /* Fade the chain at the top and bottom edges into "mist" */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.4) 6%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0.4) 94%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,0.4) 6%,
    rgba(0,0,0,1) 18%,
    rgba(0,0,0,1) 82%,
    rgba(0,0,0,0.4) 94%,
    transparent 100%);
}
/* The fixed highlight band — sits in the center of the rail container
   and never moves. Gold spotlight indicating the active link. Height
   matches LINK_PITCH (32px) plus a small visual margin (8px) so the
   centered link sits comfortably inside the band. */
.chain-widget__highlight {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 40px;
  margin-top: -20px;
  background: rgba(193, 154, 91, 0.18);
  border-top: 1px solid rgba(193, 154, 91, 0.35);
  border-bottom: 1px solid rgba(193, 154, 91, 0.35);
  pointer-events: none;
  z-index: 1;
}
/* The continuous chain SVG inside the rail — translates vertically as
   the user scrolls/drags */
.chain-widget__chain {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* Smooth animation when active link changes via click; disabled
     during free-scroll/drag (transition-none class added by JS). */
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.chain-widget__chain.is-dragging {
  transition: none;
}
/* Each link in the chain SVG is a clickable group */
.chain-widget__link-group {
  cursor: pointer;
}
/* Anchor pin: a small gold dot at the left edge of every link group,
   hidden by default. Shown only on the link that is the section's
   anchored link (its index === _defaultIdx). Always visible regardless
   of where the user has scrolled — it's a "you are here" marker that
   tracks the page's anchored link, not the currently-centered link. */
.chain-widget__anchor-pin {
  display: none;
}
.chain-widget__link-group.is-anchored .chain-widget__anchor-pin {
  display: block;
}
/* Right panel: text explanation of the active link */
.chain-widget__panel {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--charcoal);
  /* Motion blur during scrolling — JS adds .is-scrolling to start, removes
     to end. Eased fade in/out via transition on filter and opacity. */
  filter: blur(0);
  opacity: 1;
  transition: filter 240ms ease-out, opacity 240ms ease-out;
}
.chain-widget__panel.is-scrolling {
  filter: blur(3px);
  opacity: 0.55;
  transition: filter 80ms ease-in, opacity 80ms ease-in;
}
.chain-widget__panel-year {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dark-red);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.chain-widget__panel-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark-navy);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.chain-widget__panel-body { margin: 0; }
.chain-widget__panel-body em { color: var(--dark-red); }
.chain-widget__shift {
  margin-bottom: 0.8rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--off-white);
}
.chain-widget__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.chain-widget__shift-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--charcoal);
}
.chain-widget__shift-line em { color: var(--dark-red); font-style: italic; }
.chain-widget__shift-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark-red);
  margin-right: 0.25rem;
}
.chain-widget__later-note {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--off-white);
  font-size: 12px;
  font-style: italic;
  color: var(--mid-gray);
}
/* ===== Chain widget v2 — long-chain windowed view =====
   When a chain has more than CHAIN_WINDOW_THRESHOLD links, the rail
   only renders a visible window of CHAIN_WINDOW_SIZE links centered on
   the active link. The topmost and bottommost visible links fade. Links
   outside the window are hidden. Two boundary buttons appear when there
   are hidden links above/below. */
/* Panel cross-chapter navigation link */
.chain-widget__panel-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--light-gray);
  font-size: 12.5px;
  color: var(--med-navy);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  border-left: none; border-right: none; border-bottom: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.chain-widget__panel-jump:hover {
  color: var(--dark-red);
  text-decoration: underline;
}
.chain-widget__panel-jump-arrow {
  font-size: 14px;
  transition: transform 0.15s;
}
.chain-widget__panel-jump:hover .chain-widget__panel-jump-arrow {
  transform: translateX(3px);
}
.chain-widget__panel-here {
  display: block;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--light-gray);
  font-size: 12px;
  font-style: italic;
  color: var(--mid-gray);
}
.dich-popover {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 5px solid var(--gold);
  border-radius: 6px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.6rem 1.7rem 1.5rem;
  position: relative;
  box-shadow: 0 24px 56px rgba(0,0,0,0.25);
}
.dich-popover__close {
  position: absolute;
  top: 0.8rem; right: 0.95rem;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--light-gray);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--mid-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dich-popover__close:hover {
  background: var(--cream);
  color: var(--dark-navy);
  border-color: var(--gold);
}
.dich-popover__overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.55rem;
}
.dich-popover__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--dark-navy);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.dich-popover__poles {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.dich-popover__pole--from { color: var(--mid-gray); }
.dich-popover__pole--to { color: var(--dark-red); }
.dich-popover__arrow {
  color: var(--dark-red);
  font-size: 18px;
  line-height: 1;
  position: relative;
  top: -1px;
}
.dich-popover[data-direction="contested"] .dich-popover__arrow {
  color: var(--med-navy);
}
.dich-popover[data-direction="contested"] .dich-popover__pole--from,
.dich-popover[data-direction="contested"] .dich-popover__pole--to {
  color: var(--med-navy);
}
.dich-popover__tagline {
  font-style: italic;
  color: var(--med-navy);
  font-size: 14.5px;
  margin: 0 0 1rem;
  line-height: 1.45;
}
.dich-popover__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 1.1rem;
}
.dich-popover__text em { color: var(--dark-red); }
.dich-popover__text strong { color: var(--dark-navy); }
.dich-popover__direction-note {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--off-white);
  font-size: 12.5px;
  color: var(--mid-gray);
  font-style: italic;
  line-height: 1.45;
}

/* Direction arrow showing where the dichotomy is moving in this section/chapter:
   - .dir-stable: no arrow (omit) — game answers stay put
   - .dir-right: solid right arrow (the dichotomy is moving rightward — toward
     the second-named side of the pair, e.g. Reason in Faith vs Reason)
   - .dir-left:  solid left arrow (toward first-named side)
   - .dir-contested: double arrow stacked, both directions — actively contested
*/
.dichotomy-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.dichotomy-arrow--right { color: #2D6431; }    /* gain — green */
.dichotomy-arrow--left  { color: var(--dark-red); } /* return to old — red */
.dichotomy-arrow--contested {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-size: 9px;
  line-height: 1;
  color: #6B3F7A;
}
.dichotomy-arrow--contested span { display: block; }
.dichotomy-arrow__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 0.2rem;
  color: var(--mid-gray);
}

/* =========================================================
   PRINT STYLES — for "Export this chapter" / "Save as PDF".
   When body has .is-printing-chapter, only that chapter's
   pages are visible, the navigation chrome is hidden, and
   pages flow as continuous text rather than pagination.
   ========================================================= */
@media print {
  /* Hide all chrome */
  .top-nav,
  .page-nav,
  .zoom-controls,
  .gate-overlay,
  .top-nav__menu-panel,
  .section-jumper,
  #export-chapter-btn,
  .annotated-source__hint,
  .activity__export-btn,
  .quiz-flip__pill,
  .dragsort__reset,
  .focus-indicator,
  .focus-report,
  .search-popup,
  .link-share,
  .heading-link,
  .chain-seed__pin {
    display: none !important;
  }
  /* Vocabulary + concept glosses: the hover/click popup can't work on paper,
     so render the definition inline, in parentheses, right after the term.
     The underline affordance is dropped (no interaction to signal). */
  .vocab-term, .vocab-term--concept {
    border-bottom: none !important;
    background: none !important;
  }
  .vocab-term__pop {
    display: inline !important;
    position: static !important;
    background: none !important;
    color: var(--charcoal) !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    font-size: 0.85em !important;
    font-style: italic;
  }
  .vocab-term__pop::after { display: none !important; }
  .vocab-term__head, .vocab-term__phon, .vocab-term__phon-lang,
  .vocab-term__concept-tag { display: none !important; }
  .vocab-term__def::before { content: " (def: "; }
  .vocab-term__def::after { content: ")"; }
  .vocab-term__etym { display: none !important; }
  /* Chain widget: static-render. The JS builds a rail of links plus a detail
     panel; for print, show the panel content (text) and let the rail print as
     a simple list. */
  .chain-widget { page-break-inside: avoid; }
  .chain-widget__panel { position: static !important; }
  body {
    background: var(--white) !important;
    color: var(--charcoal) !important;
  }
  /* Show every page that isn't hidden by .is-printing-chapter logic */
  .page-content {
    display: block !important;
    page-break-inside: auto;
    page-break-after: always;
    max-width: none !important;
    padding: 0.5in !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .page-content:last-child {
    page-break-after: auto;
  }
  /* Fix headings to start a new page when sensible */
  .chapter-cover, .chapter-opener, .section-opener {
    page-break-after: avoid;
  }
  h1, h2, h3, h4, h5 {
    page-break-after: avoid;
  }
  p, li {
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
  }
  /* Show URL after links so the printed page is still useful */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9px;
    color: var(--mid-gray);
    word-break: break-all;
  }
  /* Don't print URLs after internal links */
  a[href^="#"]::after { content: ""; }
  /* Flip cards: show both faces */
  .quiz-flip__inner { transform: none !important; }
  .quiz-flip {
    height: auto !important;
    page-break-inside: avoid;
  }
  .quiz-flip__face {
    position: static !important;
    backface-visibility: visible !important;
    transform: none !important;
    margin-bottom: 0.5rem;
  }
  /* Belief cards too */
  .belief-card { transform: none !important; }
  .belief-card__inner { transform: none !important; }
  .belief-card__face {
    position: static !important;
    backface-visibility: visible !important;
    transform: none !important;
    page-break-inside: avoid;
  }
  /* Annotated source: show all annotations expanded */
  .annot-note {
    display: block !important;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--off-white);
    border-left: 2px solid var(--gold);
  }
  .annot-note__head { font-weight: 700; }
  /* Dragsort: just show items in tray, no game */
  .dragsort__bin { min-height: 0 !important; }
  /* Dichotomy callouts and DOK questions print well as-is */
}

/* When printing a single chapter, this class is added to body and only the
   selected chapter's pages get displayed by display: block. All others stay
   display: none in print. */
@media print {
  body.is-printing-ch1 .page-content:not([data-page="25"]):not([data-page="26"]):not([data-page="27"]):not([data-page="28"]):not([data-page="29"]):not([data-page="30"]):not([data-page="31"]):not([data-page="32"]):not([data-page="33"]):not([data-page="34"]):not([data-page="35"]):not([data-page="36"]):not([data-page="37"]):not([data-page="38"]):not([data-page="39"]):not([data-page="40"]):not([data-page="41"]):not([data-page="42"]) {
    display: none !important;
  }
}

/* Dichotomy callout — full pull-out block when a section's content
   pulls hard on a dichotomy. Visually distinct from the regular
   --vocab/--seeding callouts. */
.dichotomy-callout {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.85rem;
  align-items: start;
  margin: 1.5rem 0;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #F7F1E5 0%, #FBF7EE 100%);
  border-left: 4px solid var(--med-navy);
  border-radius: 4px;
}
.dichotomy-callout__symbol {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--med-navy);
  display: flex; align-items: center; justify-content: center;
  color: var(--med-navy);
}
.dichotomy-callout__symbol .dichotomy-icon { width: 1.5rem; height: 1.5rem; }
.dichotomy-callout__head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--med-navy);
  margin-bottom: 0.2rem;
}
.dichotomy-callout__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-navy);
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.dichotomy-callout__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
}
.dichotomy-callout__text em {
  color: var(--dark-red);
  font-style: italic;
  font-weight: 600;
}

/* Dichotomy color hints used by callouts and tags. The "current passage
   leans toward" color is applied when needed — left or right side. */
.dichotomy-callout--order { --dich-color: #7A5C3F; }     /* Order vs Liberty */
.dichotomy-callout--faith { --dich-color: #6B3F7A; }     /* Faith vs Reason */
.dichotomy-callout--ind { --dich-color: #1B4F72; }       /* Individual vs Community */
.dichotomy-callout--tradition { --dich-color: #2D6431; } /* Tradition vs Progress */
.dichotomy-callout--hier { --dich-color: var(--dark-red); } /* Hierarchy vs Equality */
.dichotomy-callout--universal { --dich-color: #5D3A8E; } /* Universal vs Particular */

/* Inline dichotomy markers attached to R/B/F rules — small icon
   pair (left side highlighted = the rule chooses that side) */
.rule-dichotomy {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: 1px;
}
.rule-dichotomy__pair {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mid-gray);
  text-transform: none;
}
.rule-dichotomy__pair .dichotomy-icon {
  width: 11px; height: 11px;
  opacity: 0.4;
}
.rule-dichotomy__pair .dichotomy-icon.is-active {
  opacity: 1;
  color: var(--dark-red);
}
.rule-dichotomy__pair .rule-dichotomy__sep { color: var(--light-gray); }

/* =========================================================
   THIRD RULER CANDLE — small symbol for moments where the
   third ruler is named, challenged, or overthrown.
   ========================================================= */
.third-ruler-callout {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(135deg, #1F2D43 0%, #142033 100%);
  color: var(--cream);
  border-radius: 4px;
  border-left: 4px solid var(--gold);
}
.third-ruler-callout__symbol {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.15rem;
}
.third-ruler-callout__symbol svg {
  width: 2.4rem; height: 2.4rem;
  color: var(--gold);
}
.third-ruler-callout__head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.third-ruler-callout__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.third-ruler-callout__text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.third-ruler-callout__text em { color: var(--gold); font-style: italic; }

/* =========================================================
   QUIZ-FLIP — chapter-style flip card. Front shows a question,
   back shows the answer/details. Click to flip; stays flipped
   until clicked again. Designed for self-check moments in
   chapter prose. Distinct from the introduction's belief cards.
   ========================================================= */
.quiz-flips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0;
  perspective: 1200px;
}
.quiz-flip {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  height: 240px;
  position: relative;
  text-align: left;
  /* subtle drop shadow as rest-state interactivity hint */
  filter: drop-shadow(0 2px 8px rgba(20,32,51,0.08));
  transition: filter 0.2s, transform 0.2s;
}
.quiz-flip:hover {
  filter: drop-shadow(0 5px 15px rgba(20,32,51,0.18));
  transform: translateY(-1px);
}
.quiz-flip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.quiz-flip--tall { height: 360px; }
.quiz-flip--xl { height: 460px; }
.quiz-flip--full { width: 100%; }
.quiz-flip--foreshadow { height: auto; min-height: 320px; }
.quiz-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.4, 1);
  transform-style: preserve-3d;
}
.quiz-flip.is-flipped .quiz-flip__inner {
  transform: rotateY(180deg);
}
.quiz-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 5px;
  padding: 1rem 1.2rem 2.4rem;
  display: block;
  text-align: left;
  overflow: hidden;
}
.quiz-flip__face--front {
  background: linear-gradient(140deg, var(--white) 0%, var(--off-white) 100%);
  border: 1.5px solid var(--gold);
  color: var(--charcoal);
}
.quiz-flip__face--back {
  background: linear-gradient(140deg, var(--dark-navy) 0%, var(--med-navy) 100%);
  color: var(--cream);
  transform: rotateY(180deg);
  border: 1.5px solid var(--gold);
}
.quiz-flip__overline {
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.55rem;
  display: block;
}
.quiz-flip__face--back .quiz-flip__overline { color: var(--gold); }
.quiz-flip__q {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0rem;
  line-height: 1.35;
  color: var(--dark-navy);
  margin: 0;
}
.quiz-flip__a {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--cream);
}
.quiz-flip__pill {
  position: absolute;
  bottom: 0.7rem;
  left: 0.85rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--dark-navy);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.quiz-flip__face--back .quiz-flip__pill {
  background: var(--cream);
  color: var(--dark-navy);
}

/* =========================================================
   FORESHADOW FLIP CARD — a wider, taller variant for "stop and
   think" moments where a quote or question is posed and the
   answer/explanation is on the back. Used in the Voltaire
   moment in 1.1, and reusable in every chapter.
   ========================================================= */
.foreshadow-flip {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  margin: 1.75rem 0;
  perspective: 1400px;
  text-align: left;
  min-height: 360px;
  position: relative;
  /* subtle drop shadow as rest-state interactivity hint */
  filter: drop-shadow(0 3px 10px rgba(20,32,51,0.08));
  transition: filter 0.2s, transform 0.2s;
}
.foreshadow-flip:hover {
  filter: drop-shadow(0 6px 18px rgba(20,32,51,0.18));
  transform: translateY(-1px);
}
.foreshadow-flip:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.foreshadow-flip__inner {
  position: relative;
  width: 100%;
  min-height: 360px;
  transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.35, 1);
  transform-style: preserve-3d;
}
.foreshadow-flip.is-flipped .foreshadow-flip__inner {
  transform: rotateY(180deg);
}
.foreshadow-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  padding: 1.5rem 1.75rem 2.4rem;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.foreshadow-flip__face--front {
  background: linear-gradient(140deg, #FBF7EE 0%, #F5EFE3 100%);
  border: 2px solid var(--gold);
  color: var(--charcoal);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.foreshadow-flip__face--back {
  background: linear-gradient(140deg, var(--dark-navy) 0%, var(--med-navy) 100%);
  color: var(--cream);
  transform: rotateY(180deg);
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.foreshadow-flip__overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dark-red);
}
.foreshadow-flip__face--back .foreshadow-flip__overline { color: var(--gold); }
.foreshadow-flip__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.35;
  color: var(--dark-navy);
  margin: 1rem 0 0.5rem;
}
.foreshadow-flip__attr {
  font-size: 12.5px;
  color: var(--mid-gray);
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}
.foreshadow-flip__q {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-red);
  margin-top: auto;
  line-height: 1.4;
}
.foreshadow-flip__a-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  margin: 0.85rem 0 0.85rem;
  line-height: 1.3;
}
.foreshadow-flip__a {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cream);
  margin: 0;
}
.foreshadow-flip__a em { color: var(--gold); font-style: italic; }
.foreshadow-flip__a strong { color: var(--white); }
.foreshadow-flip__pill {
  position: absolute;
  bottom: 0.85rem;
  left: 1.75rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--dark-navy);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.foreshadow-flip__face--back .foreshadow-flip__pill {
  background: var(--cream);
  color: var(--dark-navy);
}

/* ---------------------------------------------------------
   SCROLLABLE VARIANT — for cards whose back content exceeds
   the standard min-height (e.g. multi-position Stop-and-Think
   cards like §1.5a). Bumps both faces slightly taller AND
   adds internal scroll to the back face content. The overline
   stays anchored at top; the pill stays anchored at bottom;
   only the content list between them scrolls.
   --------------------------------------------------------- */
.foreshadow-flip--scrollable,
.foreshadow-flip--scrollable .foreshadow-flip__inner {
  min-height: 460px;
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back {
  padding-bottom: 3.1rem; /* extra clearance so scrolled content does not run under the pill */
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back .foreshadow-flip__a-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Soft fade at bottom hints there is more content to scroll */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  /* Keep scrollbar from feeling cramped while preserving readable width */
  padding-right: 0.5rem;
  margin-right: -0.5rem;
  padding-bottom: 0.5rem;
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back .foreshadow-flip__a-list::-webkit-scrollbar {
  width: 6px;
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back .foreshadow-flip__a-list::-webkit-scrollbar-thumb {
  background: rgba(255, 220, 142, 0.35); /* dim gold */
  border-radius: 3px;
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back .foreshadow-flip__a-title {
  margin-top: 0.5rem;
}
.foreshadow-flip--scrollable .foreshadow-flip__face--back .foreshadow-flip__a + .foreshadow-flip__a {
  margin-top: 0.9rem;
}

/* =========================================================
   SOURCE FLIP CARD — primary-source presentation for the
   history-detective Tier 1 mini-assignments. Three regions:
   (1) source citation block (year, author, title, meta)
   (2) flip area: original text on front, modernized on back,
       toggled via a segmented-control button row
   (3) Socratic prompt list: click-to-expand questions with
       multiple-choice answers and per-choice feedback
   The flip uses grid stacking so both faces share the same
   cell — parent expands to fit the larger face, no JS height
   measurement needed.
   ========================================================= */
.source-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 6px;
  margin: 2.5rem 0;
  /* overflow: visible (R94) — was 'hidden', but that clipped vocab-term
     popups when the term sat near the card's left/right/top edge. The
     rounded-corner clipping cost is small (~6px at the top corners) and
     the popup-escape benefit is real. Per Design Reference Part 2 §3.15:
     containers that host vocab terms must NOT use overflow:hidden. */
  overflow: visible;
  box-shadow: 0 2px 10px rgba(20,32,51,0.06);
}

/* Source citation block — top of every source card. The student
   sees who, when, where, what kind of document BEFORE reading.
   Flex layout: portrait on the left (88px circle), content on the right. */
.source-card__cite {
  background: rgba(20, 32, 51, 0.04);
  padding: 1.1rem 1.5rem 1.2rem;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.source-card__cite-portrait {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92px;
}
.source-card__portrait {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--off-white, #f4ebd5);
  border: 2px solid var(--gold);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(20,32,51,0.12);
}
.source-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Default centering for square crops; overridden per-portrait
     when a tall image needs the crop to favor the top (face). */
  object-position: center top;
  display: block;
}
.source-card__portrait--silhouette {
  background: linear-gradient(135deg, #d4cdb6 0%, #b8b09a 100%);
}
.source-card__portrait--silhouette svg {
  width: 100%;
  height: 100%;
  color: rgba(20, 32, 51, 0.4);
  display: block;
}
.source-card__portrait-caption {
  font-size: 11px;
  color: var(--mid-gray);
  font-style: italic;
  text-align: center;
  margin-top: 0.4rem;
  line-height: 1.3;
}
.source-card__cite-content {
  flex: 1;
  min-width: 0;
}
@media (max-width: 540px) {
  .source-card__cite { gap: 0.9rem; }
  .source-card__cite-portrait { width: 72px; }
  .source-card__portrait { width: 68px; height: 68px; }
}

.source-card__cite-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 0.5rem;
}
.source-card__year {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--dark-red);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
/* Typology container: holds the main label plus the smaller role
   subordinate label beneath it. Both are vertically stacked. */
.source-card__typology-block {
  margin: 0.1rem 0 0.7rem;
  display: block;
}
.source-card__typology {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: italic;
  color: var(--dark-navy);
  background: linear-gradient(to bottom, transparent 78%, var(--gold) 78%, var(--gold) 96%, transparent 96%);
  padding: 0 0.2rem;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
/* Role subordinate label — names the source's role in the
   perpetrator/victim/bystander/upstander framework that the book
   uses across chapters. Smaller, sits directly beneath the typology
   label, in italic small caps. Wraps gracefully when the label
   needs more than one line (e.g., "perpetrator tells the victim's
   story"). */
.source-card__typology-role {
  display: block;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--dark-red);
  margin-top: 0.3rem;
  padding-left: 0.2rem;
  line-height: 1.45;
  max-width: 22em;
}
.source-card__author {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1.2;
}
.source-card__title {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--charcoal);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.source-card__meta {
  font-size: 12.5px;
  color: var(--mid-gray);
  margin-top: 0.55rem;
  letter-spacing: 0.02em;
}

/* Framing paragraph — context the author writes ABOVE the primary source,
   priming the student to read it well. Dark-navy inset on cream/white
   background, with margin around it so the white border of the source
   card stays visible (per author direction). */
.source-card__framing {
  margin: 1.25rem 1.5rem 0.5rem;
  background: var(--dark-navy);
  color: var(--cream);
  padding: 1.1rem 1.4rem;
  border-radius: 4px;
  border-left: 4px solid var(--gold);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
}
.source-card__framing > p {
  margin: 0 0 0.75rem;
}
.source-card__framing > p:last-child {
  margin-bottom: 0;
}
.source-card__framing em {
  color: var(--gold);
  font-style: italic;
}
.source-card__framing strong {
  color: var(--cream);
}
.source-card__framing a {
  color: var(--gold);
  border-bottom: 1px dotted var(--gold);
  text-decoration: none;
}
.source-card__framing a:hover {
  border-bottom-style: solid;
}
/* Vocab-term hovers inside the framing paragraph need contrast tweaks
   so they read on the dark background. */
.source-card__framing .vocab-term {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.source-card__framing .vocab-term:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}
/* Pointer paragraph — used in shorter source-card framings that
   redirect students to the section closing for the deeper analysis.
   Visually subdued: smaller, gold dotted top border separating it
   from the situate-the-person opening above. */
.source-card__framing .source-card__framing-pointer {
  margin-top: 0.85rem !important;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(214, 167, 76, 0.45);
  font-size: 14.5px;
  color: rgba(244, 235, 213, 0.82);
  font-style: italic;
}

/* Flip area: cream background, segmented toggle on top, then the
   flip card itself. */
.source-flip {
  background: var(--cream);
  padding: 1.25rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--light-gray);
}
.source-flip__toggle {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.source-flip__btn {
  background: transparent;
  border: none;
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-gray);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid var(--light-gray);
}
.source-flip__btn:last-child { border-right: none; }
.source-flip__btn:hover {
  color: var(--dark-navy);
  background: rgba(193, 154, 91, 0.08);
}
.source-flip__btn.is-active {
  background: var(--dark-navy);
  color: var(--gold);
}

/* The flip card body — both faces grid-stacked so parent height
   = max(face heights). 3D rotation reveals one face at a time. */
.source-flip__inner {
  display: grid;
  position: relative;
  perspective: 2200px;
}
.source-flip__face {
  grid-row: 1;
  grid-column: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.3, 1.0, 0.4, 1.0), opacity 0.3s;
}
.source-flip[data-mode="original"] .source-flip__face[data-face="original"] {
  transform: rotateY(0deg);
  opacity: 1;
  pointer-events: auto;
}
.source-flip[data-mode="original"] .source-flip__face[data-face="modernized"] {
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}
.source-flip[data-mode="modernized"] .source-flip__face[data-face="modernized"] {
  transform: rotateY(0deg);
  opacity: 1;
  pointer-events: auto;
}
.source-flip[data-mode="modernized"] .source-flip__face[data-face="original"] {
  transform: rotateY(-180deg);
  opacity: 0;
  pointer-events: none;
}
.source-flip__face p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  margin-bottom: 0.9rem;
}
.source-flip__face p:last-child { margin-bottom: 0; }
.source-flip__attr {
  font-size: 12.5px !important;
  color: var(--mid-gray) !important;
  font-style: italic;
  margin-top: 0.6rem !important;
  margin-bottom: 0 !important;
}
/* Excerpt label inside a source-flip face — used when a single
   document is presented as multiple labeled excerpts (e.g., the
   Agimet confession's three different bureaucratic registers).
   The label sits as a small uppercase header above each excerpt. */
.source-flip__face .source-excerpt-label {
  font-family: var(--font-heading);
  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-red);
  margin-top: 1.1rem !important;
  margin-bottom: 0.4rem !important;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--gold);
}
.source-flip__face .source-excerpt-label:first-child {
  margin-top: 0 !important;
}

/* Socratic prompts: click-to-expand details element, with
   multiple-choice answers and per-choice feedback. Stronger /
   weaker readings are color-coded after the student selects. */
/* Difficult-Language Walkthrough — sits between .source-flip and
   .source-card__prompts (when prompts are present) on each primary-source
   card. Forward/back stepper through highlighted terms with a floating
   popup explanation. See Design Reference Part 2 §3.26. */
.source-walkthrough {
  background: #f0e8d2;
  border-top: 1px solid #d8d0bb;
  padding: 0.85rem 1.5rem 1rem;
  transition: box-shadow 0.22s ease-out;
}

/* Floating mode — once the student starts the walkthrough, the strip
   detaches and floats just above the bottom nav so it stays accessible
   during scroll. Snaps back when the student resets, flips faces,
   navigates away, or scrolls past the source-card it belongs to. */
.source-walkthrough.is-floating {
  position: fixed;
  left: 0;
  right: 0;
  /* The bottom-nav is 64px high (44px button row + ~20px padding/gap).
     Float just above it. */
  bottom: 64px;
  z-index: 30;
  background: #f0e8d2;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid #d8d0bb;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.16);
  animation: walkthroughFloatIn 0.32s ease-out;
  /* Match the page-content max-width / padding so the bar reads like
     a continuation of the page rhythm rather than a screen-wide HUD. */
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.source-walkthrough.is-floating .source-walkthrough__bar {
  max-width: 720px;
  margin: 0 auto;
}
@keyframes walkthroughFloatIn {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* The placeholder fills the inline space the strip used to occupy so
   layout doesn't jump. Keeps the tan background so the source-card
   reads continuous, and shows a greyed-out ghost of the walkthrough
   bar so it's clear where the floating bar came from. The ghost has
   the same internal layout but with disabled-look buttons \u2014 visual
   "the bar is floating right now, here's where it lives at rest". */
.source-walkthrough-placeholder {
  background: #f0e8d2;
  border-top: 1px solid #d8d0bb;
  padding: 0.85rem 1.5rem 1rem;
  opacity: 0.55;
  filter: grayscale(0.5);
  pointer-events: none;
}
.source-walkthrough__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.source-walkthrough__btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--dark-navy);
  background: var(--dark-navy);
  color: var(--cream);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.16s, border-color 0.16s;
}
.source-walkthrough__btn:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-navy);
}
.source-walkthrough__btn:disabled {
  background: #c9c2ad;
  border-color: #c9c2ad;
  color: #8a8470;
  cursor: not-allowed;
}
.source-walkthrough__btn svg { display: block; }
/* Next button shows an arrow during walkthrough; on the last term it
   becomes an X close button, signaling that clicking it ends the
   walkthrough. JS toggles .is-final on the button to swap the icons. */
.source-walkthrough__btn--next .source-walkthrough__icon--close { display: none; }
.source-walkthrough__btn--next.is-final {
  background: var(--dark-red);
  border-color: var(--dark-red);
  color: var(--cream);
}
.source-walkthrough__btn--next.is-final:hover:not(:disabled) {
  background: #a02828;
  border-color: #a02828;
}
.source-walkthrough__btn--next.is-final .source-walkthrough__icon--arrow { display: none; }
.source-walkthrough__btn--next.is-final .source-walkthrough__icon--close { display: block; }
.source-walkthrough__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  text-align: center;
}
.source-walkthrough__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  line-height: 1;
}
.source-walkthrough__counter {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--charcoal);
  font-weight: 600;
}
.source-walkthrough__counter-of {
  font-weight: 400;
  color: var(--mid-gray);
  margin: 0 0.2rem;
}
.source-walkthrough__reset {
  background: transparent;
  border: 1px solid #b8b29a;
  color: var(--charcoal);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-body);
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.16s, border-color 0.16s;
}
.source-walkthrough__reset:hover {
  background: var(--cream);
  border-color: var(--gold);
}
.source-walkthrough__hint {
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--mid-gray);
  line-height: 1.4;
}

/* The highlight class wraps a phrase in the source text when the
   walkthrough is active. Two states: pre (lighter, all phrases the
   walkthrough will visit) and current (darker, the active step). The
   pre state lets students see the lay of the difficult-language land
   the moment they begin the walkthrough; the current state shows them
   exactly where they are. */
.walkthrough-highlight {
  padding: 0.05em 0.18em;
  border-radius: 2px;
  transition: background 0.18s ease-out, box-shadow 0.18s ease-out;
}
.walkthrough-highlight.is-pre {
  background: #fdf3c2;  /* light yellow */
  box-shadow: inset 0 -1px 0 rgba(176, 138, 0, 0.35);
  font-weight: 500;
}
.walkthrough-highlight.is-current {
  background: #fce99c;  /* darker yellow */
  box-shadow: inset 0 -2px 0 var(--gold);
  font-weight: 500;
}

/* Modernized-tab gating: until the student has stepped through the full
   Original-face walkthrough, the Modernized button is locked. Visually
   it shows a small lock icon and a desaturated state; clicking shakes
   it briefly. Once the walkthrough completes (any session), the lock
   is removed permanently. */
.source-flip__btn[data-walkthrough-locked="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  position: relative;
  padding-right: 2.1em;
}
.source-flip__btn[data-walkthrough-locked="true"]::after {
  content: "\1F512";
  position: absolute;
  right: 0.65em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  opacity: 0.7;
}
.source-flip__btn[data-walkthrough-locked="true"]:hover {
  background: inherit;
  color: inherit;
}
@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.source-flip__btn.is-locked-shake {
  animation: lockShake 0.32s ease-out;
}

/* Floating tooltip shown when the student clicks the locked Modernized
   tab. Auto-dismisses after 4s. Visually parallel to the walkthrough's
   own popup style so the page reads coherently. The tooltip points at
   the Difficult Language Walkthrough's Next button (in the same
   source-card) rather than at the locked tab itself \u2014 directing the
   student to the action that actually unlocks Modernized. */
.source-flip__locked-tooltip {
  position: absolute;
  z-index: 40;
  width: 280px;
  background: var(--dark-navy);
  color: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 0.65rem 0.95rem;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  animation: lockedTooltipIn 0.18s ease-out;
  pointer-events: none;
}
.source-flip__locked-tooltip::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--dark-navy);
  /* Default caret position (overridden by --above / --below variants) */
}
/* Tooltip above the Next button: caret points DOWN from bottom edge */
.source-flip__locked-tooltip--above::before {
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
}
/* Tooltip below the Next button: caret points UP from top edge */
.source-flip__locked-tooltip--below::before {
  top: -6px;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
}
.source-flip__locked-tooltip.is-dismissing {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
@keyframes lockedTooltipIn {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Floating popup that shows the term's plain-English explanation while
   that step is active. Positioned absolutely inside the .source-flip via
   JS so it floats near the highlighted phrase. */
.walkthrough-popup {
  position: absolute;
  z-index: 8;
  width: 320px;
  max-width: calc(100% - 16px);
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 0.85rem 1.05rem 0.95rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
}
.walkthrough-popup::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 18px;
  width: 14px;
  height: 14px;
  background: var(--cream);
  border-top: 1.5px solid var(--gold);
  border-left: 1.5px solid var(--gold);
  transform: rotate(45deg);
}
.walkthrough-popup--above::before {
  top: auto;
  bottom: -8px;
  border-top: none;
  border-left: none;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
}
.walkthrough-popup__phrase {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dark-navy);
  margin-bottom: 0.35rem;
}
.walkthrough-popup__explanation {
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
.walkthrough-popup__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--mid-gray);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.walkthrough-popup__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--dark-navy);
}

/* The .source-flip needs to be a positioning context for the popup. */
.source-flip { position: relative; }

@media (max-width: 580px) {
  .source-walkthrough__bar {
    gap: 0.4rem;
  }
  .source-walkthrough__label {
    font-size: 10px;
  }
  .walkthrough-popup {
    width: calc(100% - 16px);
    left: 8px !important;
  }
}

.source-card__prompts {
  background: var(--white);
  padding: 1.1rem 1.5rem 1.5rem;
}
.source-card__prompts-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 0.7rem;
}
.source-prompt {
  border: 1px solid var(--light-gray);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  margin-bottom: 0.6rem;
  background: var(--off-white);
}
.source-prompt:last-child { margin-bottom: 0; }
.source-prompt > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--dark-navy);
  font-weight: 600;
  position: relative;
  transition: background 0.15s;
}
.source-prompt > summary::-webkit-details-marker { display: none; }
.source-prompt > summary::before {
  content: "?";
  position: absolute;
  left: 0.85rem;
  top: 0.65rem;
  width: 22px;
  height: 22px;
  background: var(--gold);
  color: var(--dark-navy);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}
.source-prompt > summary:hover {
  background: rgba(193, 154, 91, 0.06);
}
.source-prompt[open] > summary {
  background: rgba(193, 154, 91, 0.08);
  border-bottom: 1px solid var(--light-gray);
}
.source-prompt__choices {
  padding: 0.85rem 1rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.source-prompt__choice {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 14px;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
  transition: background 0.15s, border-color 0.15s;
}
.source-prompt__choice:hover {
  background: var(--cream);
  border-color: var(--gold);
}
.source-prompt__choice.is-selected[data-quality="stronger"] {
  background: rgba(193, 154, 91, 0.16);
  border-color: var(--gold);
  border-left: 3px solid var(--gold);
  padding-left: calc(0.85rem - 2px);
}
.source-prompt__choice.is-selected[data-quality="weaker"] {
  background: rgba(140, 42, 42, 0.05);
  border-color: rgba(140, 42, 42, 0.3);
  border-left: 3px solid var(--dark-red);
  padding-left: calc(0.85rem - 2px);
}
.source-prompt__feedback {
  padding: 0.9rem 1rem 1rem;
  background: var(--off-white);
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
  border-top: 1px solid var(--light-gray);
  font-family: var(--font-body);
}
.source-prompt__feedback[hidden] { display: none; }
.source-prompt__feedback strong {
  color: var(--dark-navy);
}
.source-prompt__feedback em {
  color: var(--med-navy);
}

/* =========================================================
   VOCABULARY TOOLTIPS — auto-generated from a glossary.
   First occurrence of a glossary word in body prose gets
   wrapped with a dotted underline; hover/tap reveals the
   definition. Only fires inside .prose; skipped inside
   headings, links, and existing callouts.
   ========================================================= */
.vocab-term {
  position: relative;
  border-bottom: 1.5px dotted #8A6520;
  cursor: help;
  background: linear-gradient(to bottom, transparent 80%, rgba(200,168,75,0.08) 80%);
  padding: 0 1px;
  transition: background 0.15s, border-color 0.15s;
}
.vocab-term:hover,
.vocab-term:focus,
.vocab-term.is-open {
  border-bottom-color: var(--dark-red);
  background: rgba(200,168,75,0.18);
  outline: none;
}
/* Keyboard focus gets an explicit outline too (exceeds WCAG 2.4.7) */
.vocab-term:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.vocab-term__pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  transform: translateX(-50%);
  background: var(--dark-navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 4px;
  border-top: 3px solid var(--gold);
  width: 280px;
  max-width: 80vw;
  z-index: 50;
  display: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
.vocab-term__pop::after {
  /* little arrow pointing down. By default centered (50%); JS may
     override via --vocab-arrow-left when the popup is shifted to
     avoid viewport clipping, so the arrow still points at the term. */
  content: "";
  position: absolute;
  left: var(--vocab-arrow-left, 50%);
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--dark-navy);
}
.vocab-term:hover .vocab-term__pop,
.vocab-term:focus .vocab-term__pop,
.vocab-term.is-open .vocab-term__pop {
  display: block;
}

/* ===== Taught-in-context CONCEPT terms =====
   Distinct from vocab terms: a solid TEAL underline (vs. gold dotted), and
   CLICK-to-open only (no hover-open), since these are bigger ideas the reader
   chooses to dig into rather than quick word-glosses. Keyboard :focus still
   opens for accessibility. Teal #1B6E7A clears WCAG 1.4.11 (5.2:1 on cream). */
.vocab-term--concept {
  border-bottom: 2px solid #1B6E7A;
  background: linear-gradient(to bottom, transparent 80%, rgba(27,110,122,0.08) 80%);
  cursor: pointer;
}
.vocab-term--concept:hover,
.vocab-term--concept:focus,
.vocab-term--concept.is-open {
  border-bottom-color: #11505a;
  background: rgba(27,110,122,0.15);
}
/* Concept terms do NOT open on hover — click (or keyboard focus) only.
   Override the shared hover rule by hiding the popup on plain hover. */
.vocab-term--concept:hover .vocab-term__pop {
  display: none;
}
.vocab-term--concept:focus .vocab-term__pop,
.vocab-term--concept.is-open .vocab-term__pop {
  display: block;
}
.vocab-term--concept .vocab-term__pop {
  border-top-color: #2C9CAD;
}
.vocab-term--concept .vocab-term__head {
  color: #5FC8D8;
}
.vocab-term__concept-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5FC8D8;
  border: 1px solid rgba(95,200,216,0.5);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  margin-bottom: 0.4rem;
}
/* Chain-seed pin — the small link icon that marks a sentence as planting a
   link in a chain the reader will see paid off later. */
.chain-seed__pin {
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.85em;
  filter: saturate(0.4) brightness(0.9);
  vertical-align: 0.04em;
}
.vocab-term__head {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 0.25rem;
  letter-spacing: 0.04em;
}
.vocab-term__phon {
  display: block;
  margin: -0.1rem 0 0.4rem;
  font-size: 12px;
  color: rgba(244,234,213,0.78);
  letter-spacing: 0.02em;
}
.vocab-term__phon-lang {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid rgba(193,154,91,0.5);
  border-radius: 3px;
  padding: 0 0.3em;
  margin-right: 0.35em;
  vertical-align: 0.08em;
}
.vocab-term__def {
  display: block;
  margin: 0;
}
.vocab-term__etym {
  display: block;
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 11.5px;
  color: rgba(244,234,213,0.7);
  font-style: italic;
}
/* On narrow screens, position the popover below if it would clip the top */
@media (max-width: 640px) {
  .vocab-term__pop {
    width: 240px;
    font-size: 12.5px;
    padding: 0.6rem 0.7rem;
  }
}

/* FLIP-DOWN STATE — applied by JS when the popup would otherwise clip
   behind the sticky top nav. Reverses the vertical positioning: popup
   now appears BELOW the term, and the arrow flips to point upward. */
.vocab-term--flip-down .vocab-term__pop {
  bottom: auto;
  top: calc(100% + 0.55rem);
  border-top: none;
  border-bottom: 3px solid var(--gold);
}
.vocab-term--flip-down .vocab-term__pop::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--dark-navy);
}

/* =========================================================
   PLAYER CARDS — for the chapter's "key actors who push the
   ideas forward or pull them backward." Each card has a
   portrait, name, dates, role, the dichotomy/ies they pull
   on, and a quick description.
   Two presentations:
   - .player-card.player-card--inline = full card embedded in prose
   - .player-card.player-card--mini   = thumbnail used in the cast strip
   ========================================================= */
.cast-strip {
  margin: 1.75rem 0;
  padding: 1.15rem 1.4rem 1.4rem;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-top: 4px solid var(--gold);
  border-radius: 4px;
}
.cast-strip__head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.45rem;
}
.cast-strip__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark-navy);
  margin: 0 0 0.6rem;
  line-height: 1.2;
}
.cast-strip__lede {
  font-size: 13.5px;
  color: var(--charcoal);
  font-style: italic;
  margin: 0 0 1.1rem;
  line-height: 1.5;
}
.cast-strip__grid {
  /* v117: switched from CSS Grid auto-fit to flexbox with center
     justification. Grid auto-fit fills rows left-to-right, leaving the
     last row left-aligned with blank space at the right when card count
     doesn't divide evenly. Flex with justify-content: center makes the
     last row center itself when it has fewer cards than the row above. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}
.cast-strip__grid .player-mini {
  /* Fixed width so cards stay consistent and the row can center properly.
     Same effective width as the prior grid auto-fit minimum (140px). */
  flex: 0 0 140px;
  max-width: 140px;
}

.player-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: 4px;
  padding: 0.65rem 0.5rem 0.7rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.2s;
  /* faint shadow at rest to signal interactivity */
  box-shadow: 0 1px 4px rgba(20,32,51,0.06);
}
.player-mini:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20,32,51,0.14);
}
.player-mini__img {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--gold);
  object-fit: cover;
  /* Center the crop on the top of the image so portrait-orientation
     paintings of head + torso (frescoes, manuscript miniatures) show
     the face rather than cropping it off. */
  object-position: center top;
  margin-bottom: 0.45rem;
}
.player-mini__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--dark-navy);
  line-height: 1.2;
}
.player-mini__dates {
  font-size: 10.5px;
  color: var(--mid-gray);
  margin-top: 0.15rem;
}
.player-mini__role {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dark-red);
  margin-top: 0.35rem;
}
.player-mini__icons {
  display: flex; gap: 0.15rem;
  margin-top: 0.45rem;
  align-items: center;
  justify-content: center;
  color: var(--med-navy);
}
.player-mini__icons .dichotomy-icon { width: 12px; height: 12px; }

/* The full inline player card — used at the moment the player walks on stage */
.player-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.15rem;
  margin: 1.75rem 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-left: 4px solid var(--dark-red);
  border-radius: 4px;
  padding: 1.15rem 1.3rem;
  align-items: start;
}
.player-card--push { border-left-color: var(--dark-red); }      /* pushes the dichotomy */
.player-card--pull { border-left-color: #1B4F72; }              /* pulls in the opposite direction */
.player-card--mixed { border-left-color: #6B3F7A; }             /* did both / contested */
.player-card__portrait {
  width: 110px;
  height: 130px;
  background: var(--off-white);
  border: 2px solid var(--gold);
  border-radius: 4px;
  object-fit: cover;
  /* Center the crop on the top of the image so portrait-orientation
     paintings of head + torso show the face rather than the chest. */
  object-position: center top;
  display: block;
}
.player-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.player-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--dark-navy);
  margin: 0;
  line-height: 1.15;
}
.player-card__dates {
  font-size: 12.5px;
  color: var(--mid-gray);
  letter-spacing: 0.05em;
}
.player-card__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-red);
  margin-bottom: 0.7rem;
}
.player-card__bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 0.7rem;
}
.player-card__bio:last-child { margin-bottom: 0; }
.player-card__what {
  background: var(--off-white);
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  border-left: 3px solid var(--gold);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0.65rem 0 0.7rem;
}
.player-card__what strong { color: var(--dark-navy); }
.player-card__dichs {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  margin-top: 0.5rem;
}

@media (max-width: 1000px) {
  .player-card { grid-template-columns: 1fr; }
  .player-card__portrait { width: 100%; height: auto; max-height: 240px; }
}

/* =========================================================
   PRINT MODE — for "print this chapter" / save as PDF.
   When body has .is-printing-chapter, everything except the
   prose of one chapter's pages is hidden, and the pages are
   stacked into one continuous document for printing.
   ========================================================= */
body.is-printing-chapter .top-nav,
body.is-printing-chapter .page-nav,
body.is-printing-chapter .zoom-controls,
body.is-printing-chapter .gate-overlay,
body.is-printing-chapter .section-jumper,
body.is-printing-chapter .top-nav__menu-panel,
body.is-printing-chapter .activity__toolbar,
body.is-printing-chapter .quiz-flip__pill,
body.is-printing-chapter .foreshadow-flip__pill,
body.is-printing-chapter .dragsort,
body.is-printing-chapter .annotated-source__hint,
body.is-printing-chapter .timeline__filters {
  display: none !important;
}
body.is-printing-chapter {
  background: white !important;
  margin: 0;
  padding: 1.25rem 1.5rem;
}
body.is-printing-chapter .page-content {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  max-width: 7.5in !important;
  margin: 0 auto 0.5in !important;
  padding: 0 !important;
  page-break-after: always;
}
body.is-printing-chapter .page-content.print-show {
  display: block !important;
}
body.is-printing-chapter .page-content:last-child { page-break-after: auto; }
/* Hide pages NOT in the chapter being printed */
body.is-printing-chapter .page-content.print-hide {
  display: none !important;
}
/* Open all flip cards in print so the back faces are readable */
body.is-printing-chapter .quiz-flip,
body.is-printing-chapter .foreshadow-flip {
  height: auto !important;
  min-height: 0 !important;
  page-break-inside: avoid;
  break-inside: avoid;
}
body.is-printing-chapter .quiz-flip__inner,
body.is-printing-chapter .foreshadow-flip__inner {
  transform: none !important;
  transform-style: flat !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}
body.is-printing-chapter .quiz-flip__face,
body.is-printing-chapter .foreshadow-flip__face {
  position: static !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  transform: none !important;
  display: block !important;
  margin-bottom: 0.5rem;
  page-break-inside: avoid;
  break-inside: avoid;
}
body.is-printing-chapter .quiz-flip__face--back::before,
body.is-printing-chapter .foreshadow-flip__face--back::before {
  content: "Answer / Back side: ";
  display: block;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
  font-weight: 700;
}
body.is-printing-chapter .figure {
  page-break-inside: avoid;
  break-inside: avoid;
}
body.is-printing-chapter .dok-questions,
body.is-printing-chapter .dig-deeper,
body.is-printing-chapter .third-ruler-callout,
body.is-printing-chapter .dichotomy-callout,
body.is-printing-chapter .key-insight,
body.is-printing-chapter .callout {
  page-break-inside: avoid;
  break-inside: avoid;
}
@media print {
  body.is-printing-chapter { padding: 0 !important; }
  body.is-printing-chapter .page-content {
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }
  /* DOK hints are click-to-reveal on screen; on paper, show them expanded
     (no clicking on paper) and relabel the toggle as a plain "Hint" lead-in. */
  .dok-questions__hint[open],
  .dok-questions__hint { display: block; }
  .dok-questions__hint > .dok-questions__hint-text { display: block !important; }
  .dok-questions__hint > summary { list-style: none; color: var(--mid-gray) !important; }
  .dok-questions__hint > summary::before { display: none !important; }
  .dok-questions__hint > summary { font-size: 11px; }
}

/* =========================================================
   DOK QUESTIONS — end-of-section homework prompts.
   ========================================================= */
.dok-questions {
  margin: 2rem 0 0;
  border: 1.5px solid var(--med-navy);
  border-radius: 4px;
  background: var(--white);
  overflow: hidden;
}
.dok-questions__head {
  background: var(--dark-navy);
  color: var(--gold);
  padding: 0.75rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.dok-questions__title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0;
}
.dok-questions__sub {
  font-size: 11px;
  color: var(--cream);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.dok-questions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dok-questions__item {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--off-white);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
}
.dok-questions__item:last-child { border-bottom: none; }
.dok-questions__level {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  padding: 0.4rem 0.4rem 0.45rem;
  width: 5.5rem;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
}
.dok-questions__level-num {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-navy);
}
.dok-questions__level-label {
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-top: 0.25rem;
  line-height: 1.2;
  text-align: center;
}
.dok-questions__level-icon {
  width: 22px; height: 22px;
  margin-bottom: 0.2rem;
  color: var(--dark-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dok-questions__level-icon svg {
  width: 100%; height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dok-questions__item--dok1 .dok-questions__level-icon { color: #2D6431; }
.dok-questions__item--dok2 .dok-questions__level-icon { color: #1B4F72; }
.dok-questions__item--dok3 .dok-questions__level-icon { color: var(--dark-red); }
.dok-questions__item--dok4 .dok-questions__level-icon { color: #5D3A8E; }
.dok-questions__item--dok1 .dok-questions__level { border-color: #2D6431; background: #F0F5EE; }
.dok-questions__item--dok1 .dok-questions__level-num { color: #2D6431; }
.dok-questions__item--dok2 .dok-questions__level { border-color: #1B4F72; background: #E8EFF5; }
.dok-questions__item--dok2 .dok-questions__level-num { color: #1B4F72; }
.dok-questions__item--dok3 .dok-questions__level { border-color: var(--dark-red); background: #FCEDE8; }
.dok-questions__item--dok3 .dok-questions__level-num { color: var(--dark-red); }
.dok-questions__item--dok4 .dok-questions__level { border-color: #5D3A8E; background: #EFE8F5; }
.dok-questions__item--dok4 .dok-questions__level-num { color: #5D3A8E; }
.dok-questions__prompt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0.1rem 0 0;
}
.dok-questions__prompt strong { color: var(--dark-navy); }
.dok-questions__hint {
  margin-top: 0.55rem;
  font-size: 12.5px;
}
.dok-questions__hint > summary {
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-accent, #8A6520);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.15rem 0;
  -webkit-tap-highlight-color: transparent;
}
.dok-questions__hint > summary::-webkit-details-marker { display: none; }
/* triangle marker that rotates on open — secondary, non-color signal */
.dok-questions__hint > summary::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transition: transform 0.15s ease;
}
.dok-questions__hint[open] > summary::before { transform: rotate(90deg); }
.dok-questions__hint[open] > summary { margin-bottom: 0.3rem; }
.dok-questions__hint > summary:hover { text-decoration: underline; }
.dok-questions__hint > summary:focus-visible {
  outline: 2px solid var(--gold-accent, #8A6520);
  outline-offset: 2px;
  border-radius: 2px;
}
.dok-questions__hint-text {
  margin: 0;
  font-style: italic;
  color: var(--mid-gray);
  line-height: 1.5;
}
/* Explicit reveal control (don't rely on UA details default, which an author
   display rule on the <p> can defeat): hidden when closed, shown when open. */
.dok-questions__hint:not([open]) > .dok-questions__hint-text { display: none; }
.dok-questions__hint[open] > .dok-questions__hint-text { display: block; }

/* =========================================================
   FIGURE WITH CAPTION — Wikimedia images, with caption + source
   ========================================================= */
.figure {
  margin: 1.5rem 0;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  /* Was: overflow: hidden — but that clipped vocab popups inside captions.
     Instead we apply rounded corners to the image directly so the visual
     treatment survives without trapping absolutely-positioned children. */
}
.figure img {
  border-radius: 3px 3px 0 0;
}
.figure--right {
  float: right;
  width: min(380px, 50%);
  margin: 0.4rem 0 1rem 1.4rem;
  clear: right;
}
.figure--left {
  float: left;
  width: min(380px, 50%);
  margin: 0.4rem 1.4rem 1rem 0;
  clear: left;
}
.figure--full {
  width: 100%;
  margin: 1.5rem 0;
}
.figure__img {
  width: 100%;
  display: block;
  background: var(--off-white);
}
.figure__caption {
  padding: 0.65rem 0.85rem 0.4rem;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--charcoal);
  font-style: italic;
}
.figure__source {
  padding: 0 0.85rem 0.55rem;
  font-size: 10.5px;
  color: var(--mid-gray);
  font-style: italic;
}
.figure__source a { color: inherit; text-decoration: underline; }
@media (max-width: 1000px) {
  .figure--right, .figure--left { float: none; width: 100%; margin: 1rem 0; }
}

/* ============================================================
   TIER 1 WRITING ACTIVITY PATTERN — Read → Watch → Try → Write
   ============================================================
   Component prefix: t1-
   Data attributes: data-t1-*
   localStorage key: cob:tier1:<section-id>:state
   Locked architecture spec: Ideas Backlog Section U
   First instance: Section 1.2e (this file).
   When propagating to future Tier 1 instances, copy this block as-is;
   only the per-instance content (organizer options, source recaps)
   varies per chapter. */

/* ----- Activity page outer container ----- */
.t1-activity {
  background: var(--cream);
  padding: 0;
}
.t1-activity__opener {
  background: linear-gradient(180deg, var(--dark-navy) 0%, #1a2840 100%);
  color: var(--cream);
  padding: 2.4rem 2rem 2rem;
  text-align: center;
}
.t1-activity__overline {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.t1-activity__title {
  font-family: var(--font-display, var(--font-heading));
  font-size: 2.1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--cream);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.t1-activity__rule {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 1rem auto;
}
.t1-activity__lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(245, 240, 224, 0.92);
  max-width: 640px;
  margin: 0 auto 1rem;
  line-height: 1.5;
}
.t1-activity__question {
  font-family: var(--font-display, var(--font-heading));
  font-size: 1.18rem;
  font-style: italic;
  font-weight: 600;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--gold);
  border-right: 3px solid var(--gold);
  padding: 1rem 1.4rem;
  max-width: 720px;
  margin: 1.2rem auto 0;
  line-height: 1.4;
  text-align: left;
}
.t1-activity__question-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
  line-height: 1;
}

/* ----- Stage pulldown (replaces the old top stage tabs).
   Sits to the LEFT of the source-tabs row. Shows the current stage for
   the current source. Clicking opens a popover listing the stages
   available to that source (e.g. Boccaccio has Read + View; Paris Medical
   has Read + Practice + Writing; Agimet/Königshofen have only Read).
   ----- */
.t1-source-row {
  display: flex;
  gap: 6px;
  margin-bottom: 1.4rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .t1-source-row { flex-direction: column; }
}

.t1-stage-pulldown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--dark-navy);
  color: var(--cream);
  border: 2px solid var(--dark-navy);
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-heading);
  cursor: pointer;
  flex: 0 0 196px;
  width: 196px;
  transition: background 0.16s, border-color 0.16s;
}
.t1-stage-pulldown:hover { background: #1a2840; }
.t1-stage-pulldown[aria-expanded="true"] {
  border-color: var(--gold);
}
.t1-stage-pulldown__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.t1-stage-pulldown__icon svg { width: 100%; height: auto; display: block; }
.t1-stage-pulldown__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  text-align: left;
  min-width: 0;
}
.t1-stage-pulldown__overline {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  line-height: 1;
  white-space: nowrap;
}
.t1-stage-pulldown__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.1;
}
.t1-stage-pulldown__chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--gold);
  transition: transform 0.2s ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.t1-stage-pulldown__chevron svg { width: 100%; height: auto; display: block; }
/* The blue box is a bookmark, not a dropdown. When the student is AT their
   furthest point it's a quiet status chip; when they've navigated AWAY it
   brightens and the arrow nudges to invite a one-tap return. */
.t1-stage-pulldown[data-bookmark-away="true"] {
  background: #20406e;
}
.t1-stage-pulldown[data-bookmark-away="true"] .t1-stage-pulldown__chevron {
  color: var(--cream);
  animation: t1BookmarkNudge 1.4s ease-in-out infinite;
}
@keyframes t1BookmarkNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.t1-stage-pulldown[data-bookmark-here="true"] .t1-stage-pulldown__chevron {
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .t1-stage-pulldown[data-bookmark-away="true"] .t1-stage-pulldown__chevron {
    animation: none;
  }
}

/* Pulldown popover — drops below the trigger button */
.t1-stage-pulldown__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--dark-navy);
  border: 1px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  z-index: 20;
  padding: 0.35rem 0;
  cursor: default;
  display: none;
}
.t1-stage-pulldown[aria-expanded="true"] .t1-stage-pulldown__popover {
  display: block;
}
.t1-stage-pulldown__popover-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-heading);
  color: var(--cream);
  cursor: pointer;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  transition: background 0.14s;
  white-space: nowrap;
}
.t1-stage-pulldown__popover-item:hover:not([data-state="locked"]) {
  background: rgba(200, 168, 75, 0.18);
}
.t1-stage-pulldown__popover-item[data-state="active"] {
  background: rgba(200, 168, 75, 0.22);
  color: var(--gold);
  font-weight: 700;
}
.t1-stage-pulldown__popover-item[data-state="complete"] {
  color: rgba(245, 240, 224, 0.85);
}
.t1-stage-pulldown__popover-item[data-state="complete"]::after {
  content: "\2713";
  margin-left: auto;
  color: #95c46d;
  font-weight: 700;
}
.t1-stage-pulldown__popover-item[data-state="locked"] {
  color: rgba(245, 240, 224, 0.42);
  cursor: not-allowed;
}
.t1-stage-pulldown__popover-item[data-state="locked"]::after {
  content: "\1F512";
  margin-left: auto;
  font-size: 10px;
  opacity: 0.6;
}
.t1-stage-pulldown__popover-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.t1-stage-pulldown__popover-item[data-state="locked"] .t1-stage-pulldown__popover-icon {
  color: rgba(200, 168, 75, 0.4);
}
.t1-stage-pulldown__popover-icon svg { width: 100%; height: auto; display: block; }

/* When the source has only one stage (Read), no pulldown — show a static
   label instead. Toggle via data attribute set in JS. */
.t1-stage-pulldown[data-only-read="true"] {
  cursor: default;
  background: var(--dark-navy);
}
.t1-stage-pulldown[data-only-read="true"]:hover {
  background: var(--dark-navy);
}
.t1-stage-pulldown[data-only-read="true"] .t1-stage-pulldown__chevron {
  display: none;
}

/* When only the current stage is unlocked (no other stages to switch to),
   the pulldown is locked-looking — opaque cursor, lock icon overlay,
   tooltip explains. Distinct from data-only-read because here the source
   COULD eventually have more stages (after current stage completes); the
   lock just signals that progression is gated by completion. */
.t1-stage-pulldown[data-locked-by-progress="true"] {
  cursor: not-allowed;
  background: #2a3a55;
  opacity: 0.78;
}
.t1-stage-pulldown[data-locked-by-progress="true"]:hover {
  background: #2a3a55;
}
.t1-stage-pulldown[data-locked-by-progress="true"] .t1-stage-pulldown__chevron svg {
  display: none;
}
.t1-stage-pulldown[data-locked-by-progress="true"] .t1-stage-pulldown__chevron::after {
  content: "\1F512";
  font-size: 12px;
  color: var(--gold);
  opacity: 0.7;
}
.t1-stage-pulldown__progress-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--dark-navy);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 12;
}
.t1-stage-pulldown[data-locked-by-progress="true"]:hover .t1-stage-pulldown__progress-tooltip {
  display: block;
}

/* Next-stage button — appears at the bottom of each stage's content.
   Disabled until that stage is complete; once enabled, label updates to
   point at the next destination (next stage of same source, or first
   stage of next source, or activity-complete state for the last source). */
.t1-stage-next-wrap {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid #d8d0bb;
  display: flex;
  justify-content: flex-end;
}
.t1-stage-next-wrap--stub {
  margin-top: 1.4rem;
  padding-top: 0;
  border-top: none;
  justify-content: center;
}
.t1-stage-next-btn {
  background: var(--dark-navy);
  color: var(--cream);
  border: 2px solid var(--dark-navy);
  border-radius: 4px;
  padding: 0.75rem 1.6rem;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
  min-width: 240px;
}
.t1-stage-next-btn:hover:not(:disabled) {
  background: #1a2840;
  border-color: var(--gold);
}
.t1-stage-next-btn:disabled,
.t1-stage-next-btn[aria-disabled="true"] {
  background: #c9c2ad;
  border-color: #c9c2ad;
  color: #504a38;
  cursor: not-allowed;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.t1-stage-next-btn:disabled:hover,
.t1-stage-next-btn[aria-disabled="true"]:hover {
  background: #c9c2ad;
  border-color: #c9c2ad;
}
/* R99 v92: hide the Continue button when the coach is in chooser
   mode (Boccaccio's "pick Watch or Read" screen). The student
   should commit to a tutorial style first; offering Continue at
   the same time confuses the affordance. Once they pick a mode,
   the coach-tutorial's data-coach-mode flips to 'watch' or 'read'
   and this rule stops matching, so the Continue button reappears.
   Only Boccaccio's coach has a chooser pane — Paris Medical's
   auto-mounts in watch mode and is never in chooser, so this
   selector never matches its Continue button. */
.coach-tutorial[data-coach-mode="chooser"] ~ .t1-stage-next-wrap {
  display: none;
}
.t1-stage-next-btn__action strong { color: var(--gold); }
/* Hint span is no longer used — JS shows the action label in both
   enabled and disabled states (destination text greyed out when locked,
   bold + blue when unlocked). The disabled styling above is enough
   visual signal that the button isn't ready. */
.t1-stage-next-btn__hint { display: none; }
/* When disabled, the gold from <strong> inside the action label looks
   over-saturated against the grey background. Mute it. */
.t1-stage-next-btn[aria-disabled="true"] .t1-stage-next-btn__action strong { color: inherit; font-weight: 500; }

/* Per-source stage content containers (inside each source panel).
   Only the currently-selected stage for the current source is visible. */
.t1-source-stage {
  display: none;
}
.t1-source-stage[data-t1-active="true"] {
  display: block;
}

/* Stub styling for stages not yet built (Round 40+) — same look-and-feel as
   the locked-stage placeholders we used before, with the new copy. */
/* Coach signature icon (clipboard) — appears at the start of every
   coach-speech block in the I Do text view, marking the voice as the
   coach's (not narrator's, not source-author's). One per block. */
.coach-whistle-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 0.4em;
  color: var(--gold);
  flex-shrink: 0;
}
.coach-whistle-icon svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   I DO — Coach-led analytical walkthrough of a primary source
   First instance: Boccaccio I Do (Round 42).
   Companion: hovering on .t1-move__hl spans triggers the coach-note
   popup (CSS at the end of this block).
   ============================================================ */
.t1-i-do {
  font-family: var(--font-body);
  color: var(--charcoal);
  line-height: 1.6;
}

.t1-i-do__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--dark-navy);
  color: var(--cream);
  border-radius: 6px 6px 0 0;
}
.t1-i-do__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--gold);
}
.t1-i-do__icon svg { width: 100%; height: 100%; display: block; }
.t1-i-do__header-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.t1-i-do__stage-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
.t1-i-do__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream);
  margin: 0;
  line-height: 1.2;
}

.t1-i-do__intro {
  background: #fdfaef;
  border: 1px solid #e6dec7;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 1.2rem 1.5rem 1.3rem;
  font-size: 1rem;
  margin-bottom: 1.6rem;
}
.t1-i-do__intro p { margin: 0 0 0.85em; }
.t1-i-do__intro p:last-child { margin-bottom: 0; }
.t1-i-do__intro strong { color: var(--dark-navy); font-weight: 700; }

/* Inline source for the coach to read with — clean, slightly recessed */
.t1-i-do__source {
  background: var(--cream);
  border-left: 4px solid var(--dark-navy);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2rem;
}
.t1-i-do__source-cite {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dark-navy);
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #d8c98e;
}
.t1-i-do__source-cite strong { color: var(--dark-red); font-size: 1.1rem; }
.t1-i-do__source-cite em { color: var(--dark-red); }
.t1-i-do__source-body {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--charcoal);
}
.t1-i-do__source-body p { margin: 0 0 0.85em; }
.t1-i-do__source-body p:last-child { margin-bottom: 0; }

/* Each named move: header + body. The body holds prose, an inline
   source quote (with hover-highlights), and a pivot turn-toward-student
   line. */
.t1-move {
  margin: 0 0 2rem;
  padding: 0;
}
.t1-move__header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 0.85rem;
  padding: 0 0 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.t1-move__num {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-red);
  flex-shrink: 0;
}
.t1-move__title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1.25;
}
.t1-move__body {
  font-size: 1rem;
  line-height: 1.65;
}
.t1-move__body p { margin: 0 0 1em; }
.t1-move__body p:last-child { margin-bottom: 0; }
.t1-move__body strong { color: var(--dark-navy); }
.t1-move__body em { font-style: italic; }

/* Inline source quote within a move — light recessed background, with
   hover-highlights on the spans that have data-coach-note attributes. */
.t1-move__source-quote {
  background: #fdf4d8;
  border-left: 3px solid var(--gold);
  border-radius: 0 3px 3px 0;
  padding: 0.95rem 1.2rem;
  margin: 1.2rem 0;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 1.04rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--charcoal);
}
.t1-move__hl {
  background: rgba(218, 165, 32, 0.20);
  padding: 0.05em 0.18em;
  border-radius: 2px;
  cursor: help;
  transition: background 0.15s ease-out;
  border-bottom: 1px dotted var(--gold);
  font-style: normal;
}
.t1-move__hl:hover,
.t1-move__hl:focus {
  background: rgba(218, 165, 32, 0.42);
  outline: none;
}

/* Pivot: turn-toward-the-student callout at the end of each move. */
.t1-move__pivot {
  background: var(--dark-navy);
  color: var(--cream);
  border-left: 4px solid var(--gold);
  padding: 0.95rem 1.25rem;
  margin: 1.4rem 0 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.98rem;
}
.t1-move__pivot strong { color: var(--gold); }
.t1-move__pivot em { color: var(--cream); font-style: italic; }
.t1-move__pivot--climax {
  border-left-color: var(--dark-red);
  background: linear-gradient(180deg, var(--dark-navy) 0%, #1a2940 100%);
}

/* Closing turn-toward-student: the four moves recapped + handoff */
.t1-i-do__close {
  background: #fdfaef;
  border: 1px solid #e6dec7;
  border-top: 4px solid var(--gold);
  padding: 1.4rem 1.6rem 1.5rem;
  margin: 2.4rem 0 1.5rem;
  border-radius: 0 0 6px 6px;
}
.t1-i-do__close-title {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  color: var(--dark-navy);
  margin: 0 0 1rem;
  font-weight: 700;
}
.t1-i-do__close-list {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
  font-size: 1rem;
}
.t1-i-do__close-list li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
.t1-i-do__close-list strong { color: var(--dark-red); }
.t1-i-do__close p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0;
}
.t1-i-do__close p strong { color: var(--dark-navy); }
.t1-i-do__close p em { font-weight: 600; }

/* Coach-note popup: triggered on hover/focus of .t1-move__hl. Same
   visual language as the walkthrough popup so the page reads coherent. */
.coach-note-popup {
  position: absolute;
  z-index: 35;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 0.85rem 1.05rem 0.95rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--charcoal);
  pointer-events: none;
  animation: coachNoteIn 0.16s ease-out;
}
.coach-note-popup strong {
  color: var(--dark-navy);
  font-family: var(--font-heading);
}
.coach-note-popup em {
  font-style: italic;
}
.coach-note-popup::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--cream);
  transform: rotate(45deg);
}
.coach-note-popup--above::before {
  bottom: -7px;
  left: 24px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
}
.coach-note-popup--below::before {
  top: -7px;
  left: 24px;
  border-top: 1.5px solid var(--gold);
  border-left: 1.5px solid var(--gold);
}
@keyframes coachNoteIn {
  0%   { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 580px) {
  .t1-move__source-quote {
    padding: 0.8rem 1rem;
    font-size: 1rem;
  }
  .t1-move__title { font-size: 1.05rem; }
  .coach-note-popup {
    width: calc(100vw - 32px);
    left: 16px !important;
  }
}

/* ============================================================
   WP-BUILDER — Writing Practice (Tier 1, we-do-jumble stage)
   First instance: Paris Medical Writing Practice (Round 53).
   Student picks one sentence at a time across 6 sequential steps
   (Claim → Evidence → Analysis → Evidence → Analysis → Conclusion).
   Each step presents a tiered candidate pile: wrong / ok / good /
   best. Original picks score 0/1/2/3 per slot; recovery (going back
   to fix) earns +0.5 once per slot. Best required to advance.
   Replaces the all-at-once .jumble-player from R51.
   ============================================================ */
.wp-builder {
  background: var(--cream, #faf3e0);
  border: 1.5px solid rgba(26, 35, 50, 0.12);
  border-radius: 6px;
  padding: 1.25rem 1.4rem 1.4rem;
  font-family: var(--font-body);
  color: var(--charcoal);
  position: relative;
}
.wp-builder__intro {
  margin-bottom: 1.2rem;
}
.wp-builder__intro[hidden] { display: none; }
.wp-builder__intro p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.wp-builder__intro-hint {
  background: rgba(218, 165, 32, 0.10);
  border-left: 3px solid var(--gold, #daa520);
  padding: 0.55rem 0.8rem;
  margin: 0;
  font-size: 0.9rem;
}
.wp-builder__intro-hint strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}

/* Step progress: a row of dots/numbers showing where you are in the
   six-step sequence. */
.wp-builder__progress {
  margin-bottom: 1rem;
}
.wp-builder__progress-steps {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.wp-builder__progress-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.wp-builder__progress-dot {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 35, 50, 0.25);
  background: var(--off-white, #fffaf0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: rgba(26, 35, 50, 0.55);
  font-variant-numeric: tabular-nums;
  transition: all 0.15s ease-out;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.wp-builder__progress-dot:hover { border-color: var(--gold, #daa520); }
.wp-builder__progress-dot:focus-visible { outline: 2px solid var(--gold, #daa520); outline-offset: 2px; }
.wp-builder__progress-pencil { width: 0.95rem; height: 0.95rem; display: block; }
/* Written-but-not-yet-scored: navy fill, gold pencil — neutral "you wrote
   this, not judged yet". Tier colors only apply on the scored screen. */
.wp-builder__progress-step--pencil .wp-builder__progress-dot {
  background: var(--dark-navy);
  border-color: var(--dark-navy);
  color: var(--gold, #daa520);
}
.wp-builder__progress-step--current .wp-builder__progress-dot {
  background: var(--gold, #daa520);
  border-color: var(--gold, #daa520);
  color: var(--dark-navy);
}
.wp-builder__progress-step--filled .wp-builder__progress-dot {
  background: var(--dark-navy);
  border-color: var(--dark-navy);
  color: var(--gold, #daa520);
}
.wp-builder__progress-step--filled.wp-builder__progress-step--best .wp-builder__progress-dot {
  background: #4a7d4a;
  border-color: #4a7d4a;
  color: var(--off-white, #fffaf0);
}
.wp-builder__progress-step--filled.wp-builder__progress-step--ok .wp-builder__progress-dot,
.wp-builder__progress-step--filled.wp-builder__progress-step--good .wp-builder__progress-dot {
  background: #c8a04a;
  border-color: #c8a04a;
  color: var(--dark-navy);
}
.wp-builder__progress-step--filled.wp-builder__progress-step--wrong .wp-builder__progress-dot {
  background: #a85040;
  border-color: #a85040;
  color: var(--off-white, #fffaf0);
}
.wp-builder__progress-step-label {
  font-size: 0.78rem;
  color: rgba(26, 35, 50, 0.65);
  white-space: nowrap;
}
.wp-builder__progress-step--current .wp-builder__progress-step-label {
  color: var(--dark-navy);
  font-weight: 700;
}
.wp-builder__progress-step-arrow {
  color: rgba(26, 35, 50, 0.3);
  font-size: 0.85rem;
  margin: 0 0.1rem;
}

/* Section labels for paragraph zone */
.wp-builder__paragraph-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-navy);
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

/* Paragraph zone: shows the sentences picked so far. */
.wp-builder__paragraph {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.8rem;
  background: rgba(26, 35, 50, 0.02);
  border: 1px solid rgba(26, 35, 50, 0.12);
  border-radius: 4px;
  min-height: 4rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.wp-builder__paragraph:empty::before {
  content: "Your sentences will appear here as you build the paragraph.";
  color: rgba(26, 35, 50, 0.5);
  font-style: italic;
  font-size: 0.88rem;
}
.wp-builder__paragraph-line {
  margin: 0;
  padding: 0.3rem 0;
  display: inline;  /* keep paragraph as flowing prose, not bulletized */
}
.wp-builder__paragraph-line + .wp-builder__paragraph-line::before {
  content: " ";
}
.wp-builder__paragraph-line--current {
  background: rgba(218, 165, 32, 0.18);
  border-radius: 2px;
  padding: 0.1rem 0.25rem;
}
.wp-builder__paragraph-line--placeholder {
  color: rgba(26, 35, 50, 0.4);
  font-style: italic;
}

/* Step screen: the candidate pile + heading for the active step. */
.wp-builder__step {
  margin-top: 1.2rem;
}
.wp-builder__step[hidden] { display: none; }
.wp-builder__step-heading {
  margin-bottom: 0.85rem;
}
.wp-builder__step-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.35rem;
}
.wp-builder__step-instruction {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.wp-builder__candidates {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.wp-builder__recovery-hint {
  margin-top: 0.85rem;
  padding: 0.55rem 0.8rem;
  background: rgba(168, 80, 64, 0.08);
  border-left: 3px solid #a85040;
  font-size: 0.88rem;
  border-radius: 4px;
}
.wp-builder__recovery-hint[hidden] { display: none; }
.wp-builder__recovery-hint strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}

/* Candidate card: a single sentence the student can pick. */
.wp-cand {
  background: var(--off-white, #fffaf0);
  border: 1.5px solid rgba(26, 35, 50, 0.18);
  border-radius: 4px;
  padding: 0.65rem 0.9rem;
  font-size: 0.93rem;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.12s ease-out, background 0.12s ease-out, box-shadow 0.12s ease-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.wp-cand:hover:not(:disabled) {
  border-color: var(--gold, #daa520);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.wp-cand:focus-visible {
  outline: 2px solid var(--gold, #daa520);
  outline-offset: 2px;
}
.wp-cand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wp-cand.is-picked {
  border-color: var(--dark-navy);
  background: rgba(26, 35, 50, 0.06);
  box-shadow: 0 0 0 3px rgba(26, 35, 50, 0.10);
}
/* Verdict states for recovery mode (verdict revealed on click) */
.wp-cand.verdict-best {
  border-color: #4a7d4a;
  background: rgba(74, 125, 74, 0.10);
}
.wp-cand.verdict-good,
.wp-cand.verdict-ok {
  border-color: #c8a04a;
  background: rgba(200, 160, 74, 0.10);
}
.wp-cand.verdict-wrong {
  border-color: #a85040;
  background: rgba(168, 80, 64, 0.10);
}
.wp-cand__feedback {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(26, 35, 50, 0.12);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.wp-cand__feedback strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
.wp-cand__feedback em { font-weight: 600; }
.wp-cand__feedback[hidden] { display: none; }

/* Review screen */
.wp-builder__review[hidden] { display: none; }
.wp-builder__review {
  margin-top: 1.2rem;
}
.wp-builder__review-heading {
  margin-bottom: 0.85rem;
}
.wp-builder__review-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.35rem;
}
.wp-builder__review-instruction {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Score screen */
.wp-builder__score[hidden] { display: none; }
.wp-builder__score {
  margin-top: 1.2rem;
}
.wp-builder__score-heading {
  margin-bottom: 0.85rem;
}
.wp-builder__score-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.35rem;
}
.wp-builder__score-summary {
  margin: 0 0 0.85rem;
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Per-sentence verdict cards on the Score screen — replaces the
   inline paragraph view with one card per sentence + feedback. */
.wp-builder__paragraph-scored {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-builder__scored-item {
  border: 1.5px solid rgba(26, 35, 50, 0.18);
  border-radius: 4px;
  padding: 0.7rem 0.95rem;
  background: var(--off-white, #fffaf0);
}
.wp-builder__scored-item--best {
  border-color: #4a7d4a;
  background: rgba(74, 125, 74, 0.08);
}
.wp-builder__scored-item--good,
.wp-builder__scored-item--ok {
  border-color: #c8a04a;
  background: rgba(200, 160, 74, 0.08);
}
.wp-builder__scored-item--wrong {
  border-color: #a85040;
  background: rgba(168, 80, 64, 0.08);
}
.wp-builder__scored-text {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.55rem;
}
.wp-builder__scored-feedback {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(26, 35, 50, 0.12);
}
.wp-builder__scored-feedback strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
.wp-builder__scored-feedback em { font-weight: 600; }
.wp-builder__scored-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}
.wp-builder__scored-tier {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wp-builder__scored-item--best .wp-builder__scored-tier { color: #356635; }
.wp-builder__scored-item--good .wp-builder__scored-tier,
.wp-builder__scored-item--ok .wp-builder__scored-tier { color: var(--gold-deep, #7A5E12); }
.wp-builder__scored-item--wrong .wp-builder__scored-tier { color: var(--red, #8B1A1A); }
.wp-builder__scored-points {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark-navy);
  font-variant-numeric: tabular-nums;
}
.wp-builder__scored-fix {
  background: var(--dark-navy);
  color: var(--gold, #daa520);
  border: none;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease-out;
}
.wp-builder__scored-fix:hover {
  background: #1a2840;
}

/* Nav row: Back / Next / Confirm / Reset / Score badge */
.wp-builder__nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.wp-builder__nav-btn {
  padding: 0.6rem 1.1rem;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s ease-out, transform 0.08s ease-out;
  border: 1.5px solid transparent;
  background: var(--dark-navy);
  color: var(--gold, #daa520);
}
.wp-builder__nav-btn:hover:not(:disabled) {
  background: #1a2840;
}
.wp-builder__nav-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.wp-builder__nav-btn:disabled {
  background: rgba(26, 35, 50, 0.18);
  color: rgba(26, 35, 50, 0.45);
  cursor: not-allowed;
}
.wp-builder__nav-btn[hidden] { display: none; }
.wp-builder__nav-btn--back {
  background: transparent;
  color: var(--dark-navy);
  border-color: rgba(26, 35, 50, 0.25);
}
.wp-builder__nav-btn--back:hover:not(:disabled) {
  background: rgba(26, 35, 50, 0.06);
  border-color: rgba(26, 35, 50, 0.4);
}
.wp-builder__nav-btn--confirm {
  background: var(--gold, #daa520);
  color: var(--dark-navy);
}
.wp-builder__nav-btn--confirm:hover:not(:disabled) {
  background: #e0b950;
}
.wp-builder__nav-btn--reset {
  background: transparent;
  color: var(--dark-navy);
  border-color: rgba(26, 35, 50, 0.25);
}
.wp-builder__nav-btn--reset:hover:not(:disabled) {
  background: rgba(26, 35, 50, 0.06);
  border-color: rgba(26, 35, 50, 0.4);
}
/* In the standalone writing panels (on white), the reset button reads as a
   distinct tan/gold control rather than a faint outline button. */
.t1-writing-panel .wp-builder__nav-btn--reset {
  background: var(--gold-soft, #B89A40);
  color: var(--dark-navy);
  border-color: var(--gold-soft, #B89A40);
}
.t1-writing-panel .wp-builder__nav-btn--reset:hover:not(:disabled) {
  background: var(--gold, #C8A84B);
  border-color: var(--gold, #C8A84B);
}
.wp-builder__score-badge {
  margin-left: auto;
  background: var(--dark-navy);
  color: var(--gold, #daa520);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1.5px solid rgba(218, 165, 32, 0.55);
  font-variant-numeric: tabular-nums;
}
.wp-builder__score-badge[hidden] { display: none; }

@media (max-width: 580px) {
  .wp-builder { padding: 1rem 1rem 1.15rem; }
  .wp-builder__progress-step-label { display: none; }
  .wp-builder__progress-step-arrow { display: none; }
  .wp-builder__progress-steps { gap: 0.5rem; }
  .wp-cand { font-size: 0.88rem; padding: 0.55rem 0.75rem; }
  .wp-builder__nav { gap: 0.45rem; }
  .wp-builder__nav-btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
  .wp-builder__score-badge { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   COACH TUTORIAL — chooser / watch / read modes
   First instance: Boccaccio I Do (Round 43b).
   The chooser greets the student; Watch is the animated tutorial; Read
   is the long-form text. Mode-toggle links inside each pane.
   ============================================================ */
.coach-tutorial {
  margin: 0;
  position: relative;
}
.coach-tutorial__pane[hidden] { display: none !important; }

/* ----- CHOOSER ----- */
[data-coach-pane="chooser"] {
  background: #fdfaef;
  border: 1px solid #e6dec7;
  border-radius: 0 0 6px 6px;
  padding: 2.5rem 2rem 2.8rem;
  text-align: center;
}
.coach-chooser__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.4rem;
}
.coach-chooser__sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #6b6657;
  margin: 0 0 1.8rem;
  font-style: italic;
}
.coach-chooser__options {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.coach-chooser__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: var(--cream);
  border: 2px solid #d8c98e;
  border-radius: 8px;
  padding: 1.6rem 2rem 1.5rem;
  width: 240px;
  cursor: pointer;
  transition: all 0.18s ease-out;
  font-family: var(--font-body);
  color: var(--charcoal);
}
.coach-chooser__btn:hover,
.coach-chooser__btn:focus {
  background: var(--dark-navy);
  border-color: var(--gold);
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  outline: none;
}
.coach-chooser__btn-icon {
  display: block;
  width: 56px;
  height: 56px;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.coach-chooser__btn-icon svg { width: 100%; height: 100%; display: block; }
.coach-chooser__btn-label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-navy);
}
.coach-chooser__btn:hover .coach-chooser__btn-label,
.coach-chooser__btn:focus .coach-chooser__btn-label {
  color: var(--cream);
}
.coach-chooser__btn-sub {
  font-size: 0.85rem;
  color: #7a7565;
  font-style: italic;
}
.coach-chooser__btn:hover .coach-chooser__btn-sub,
.coach-chooser__btn:focus .coach-chooser__btn-sub {
  color: var(--gold);
}

/* ----- WATCH window ----- */
[data-coach-pane="watch"] {
  background: var(--dark-navy);
  border-radius: 0 0 6px 6px;
  padding: 0;
  overflow: hidden;
}
.coach-window {
  position: relative;
  width: 100%;
  height: 440px;
  background: #faf3df;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 8%),
    linear-gradient(0deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 8%);
  overflow: hidden;
  border-bottom: 1px solid #1a2940;
}

.coach-window__edge-link {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d8c98e;
  border-radius: 12px;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--dark-navy);
  cursor: pointer;
  transition: all 0.15s ease-out;
}
.coach-window__edge-link:hover,
.coach-window__edge-link:focus {
  background: var(--gold);
  color: var(--dark-navy);
  outline: none;
}

/* The "world" — full text laid out at natural width, transformed by JS */
.coach-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 760px;
  padding: 2.4rem 2.6rem 2rem;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--charcoal);
  transform-origin: 0 0;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.coach-stage__cite {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--dark-red);
  margin-bottom: 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #d8c98e;
}
.coach-stage__cite strong { color: var(--dark-red); font-size: 1.1rem; }
.coach-stage p {
  margin: 0 0 1em;
}
/* Targets: subtle by default, bright gold when active. When ANY target
   is active in the stage, dim the rest of the prose so the active phrase
   really pops (set on .coach-stage via JS). */
.coach-stage [data-coach-target] {
  background: rgba(218, 165, 32, 0.10);
  padding: 0.05em 0.18em;
  border-radius: 2px;
  transition: background 0.4s ease-out, color 0.4s ease-out, opacity 0.4s ease-out;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.coach-stage.has-active-target p {
  color: rgba(60, 50, 40, 0.45);
  transition: color 0.4s ease-out;
}
.coach-stage.has-active-target [data-coach-target]:not(.is-active) {
  opacity: 0.55;
}
/* Active state — must beat the .has-active-target dim rule. */
.coach-stage [data-coach-target].is-active {
  background: rgba(218, 165, 32, 0.55) !important;
  color: var(--dark-navy) !important;
  font-weight: 700;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.85);
}

/* Flash state — for sub-phrase emphasis without a camera move. The coach
   is already zoomed on a phrase and references something inside it; the
   inner span pulses brighter for ~1.2s rather than triggering another
   camera change. Pure attention cue, not a state change. */
.coach-stage [data-coach-target].is-flashing {
  animation: coachTargetFlash 1.2s ease-out 1;
}
@keyframes coachTargetFlash {
  0%   { background: rgba(218, 165, 32, 0.55); transform: scale(1); }
  30%  { background: rgba(255, 200, 90, 0.95); transform: scale(1.04); box-shadow: 0 0 0 3px rgba(218, 165, 32, 1); }
  100% { background: rgba(218, 165, 32, 0.55); transform: scale(1); }
}

/* Read-target sentences: light blue highlight signaling "your turn — read
   this." Distinct from the gold "the coach is pointing at this" highlight.
   The spectacle icon hovers above the passage to reinforce the "read"
   action. Read-target wins over both default and dim — it's an instruction
   to the viewer, not a comment from the coach. */
.coach-stage [data-coach-sentence] {
  transition: background 0.4s ease-out, color 0.4s ease-out;
}
.coach-stage [data-coach-sentence].is-reading {
  background: rgba(80, 145, 200, 0.22) !important;
  color: var(--dark-navy) !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(80, 145, 200, 0.55);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px;
  padding: 0.05em 0.18em;
}
/* Inside a read-sentence, individual phrase targets dim back to neutral so
   the whole sentence reads as a single calm highlight, not a checkered one. */
.coach-stage [data-coach-sentence].is-reading [data-coach-target] {
  background: transparent !important;
  box-shadow: none !important;
  font-weight: inherit !important;
  color: inherit !important;
}
/* When in read mode (.has-reading-target on stage), fade the rest of the
   prose so the reading sentence is the focus. Same dimming idea as gold. */
.coach-stage.has-reading-target p {
  color: rgba(60, 50, 40, 0.4);
  transition: color 0.4s ease-out;
}
.coach-stage.has-reading-target [data-coach-target]:not(.is-active) {
  opacity: 0.4;
}

/* Spectacle icon — for read-with-me beats. Sits inline at the start of
   the bubble body, signaling "your turn to read." A small floating-out
   block, sized just larger than the body line-height, with the same
   light-blue color as the read-target highlight so the eye associates
   bubble + passage as one unit. */
.coach-bubble__spectacle {
  display: inline-block;
  width: 1.7em;
  height: 1.05em;
  vertical-align: -0.18em;
  margin-right: 0.45em;
  color: rgba(160, 200, 240, 0.95);
  flex-shrink: 0;
}
.coach-bubble__spectacle-svg { width: 100%; height: 100%; display: block; }

/* Read-bubble border: light-blue accent so the bubble color-codes to its
   purpose (read instruction, not coach commentary). */
.coach-bubble.coach-bubble--read {
  border-color: rgba(160, 200, 240, 0.95);
}
.coach-bubble.coach-bubble--read .coach-bubble__tail {
  border-right-color: rgba(160, 200, 240, 0.95);
  border-bottom-color: rgba(160, 200, 240, 0.95);
}

/* Question-bubble (Reading Practice MC questions and Your-turn Socratic
   questions): purple accent so the student visually recognizes "this is
   for me to answer" \u2014 distinct from gold (coach narrating) and
   light-blue (read along). */
.coach-bubble.coach-bubble--question {
  border-color: #b89bdf;
  border-width: 2px;
}
.coach-bubble.coach-bubble--question .coach-bubble__tail {
  border-right-color: #b89bdf;
  border-bottom-color: #b89bdf;
}
.coach-bubble.coach-bubble--question .coach-bubble__body strong {
  color: #d4bdf2;
}

/* Multiple-choice panel: appears below the camera-window when the current
   beat has an `mc` field. Holds option buttons + per-option feedback +
   Continue button. */
.coach-mc-panel {
  background: rgba(255, 250, 235, 0.98);
  border: 2px solid #b89bdf;
  border-radius: 6px;
  padding: 0.85rem 1rem 0.95rem;
  margin: 0.55rem 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.coach-mc-panel[hidden] { display: none; }
.coach-mc-panel__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.coach-mc-panel__option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
  background: var(--cream, #fdf9ed);
  border: 1.5px solid rgba(60, 50, 40, 0.18);
  border-radius: 5px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--dark-navy, #1a2332);
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}
.coach-mc-panel__option:hover:not(:disabled) {
  background: #fff5d6;
  border-color: rgba(218, 165, 32, 0.6);
}
.coach-mc-panel__option:disabled {
  cursor: default;
  opacity: 0.65;
}
.coach-mc-panel__option-letter {
  flex-shrink: 0;
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  background: rgba(60, 50, 40, 0.1);
  color: var(--dark-navy);
  font-weight: 700;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin-top: 0.05em;
}
.coach-mc-panel__option-label { flex: 1; }

/* Verdict states \u2014 the option the student picked gets a colored ring
   and badge, all options become disabled, the picked one stays prominent. */
.coach-mc-panel__option.is-picked {
  border-width: 2px;
  font-weight: 600;
  opacity: 1;
}
.coach-mc-panel__option--best.is-picked {
  border-color: #4a7d4a;
  background: rgba(74, 125, 74, 0.08);
}
.coach-mc-panel__option--best.is-picked .coach-mc-panel__option-letter {
  background: #4a7d4a;
  color: #fff;
}
.coach-mc-panel__option--good.is-picked {
  border-color: #c8a04a;
  background: rgba(200, 160, 74, 0.08);
}
.coach-mc-panel__option--good.is-picked .coach-mc-panel__option-letter {
  background: #c8a04a;
  color: var(--dark-navy);
}
.coach-mc-panel__option--worse.is-picked {
  border-color: #a85040;
  background: rgba(168, 80, 64, 0.08);
}
.coach-mc-panel__option--worse.is-picked .coach-mc-panel__option-letter {
  background: #a85040;
  color: #fff;
}

.coach-mc-panel__feedback {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.7);
  border-left: 4px solid #b89bdf;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--dark-navy);
}
.coach-mc-panel__feedback[hidden] { display: none; }
.coach-mc-panel__feedback strong { color: var(--dark-navy); font-weight: 700; }

.coach-mc-panel__continue {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.7rem;
}
.coach-mc-panel__continue[hidden] { display: none; }
.coach-mc-panel__continue-btn {
  background: var(--dark-navy, #1a2332);
  color: var(--cream, #fdf9ed);
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease-out;
}
.coach-mc-panel__continue-btn:hover { background: #2a3548; }

/* Score badge: appears in the feedback panel once the student has gotten
   the best answer. Compact line at the bottom of feedback. */
.coach-mc-panel__score {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(160, 130, 200, 0.3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(60, 50, 40, 0.75);
}
.coach-mc-panel__score strong {
  color: #4a7d4a;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Scored Questions (Set B) — viewer-free MC list. Reuses .coach-mc-panel__*
   for the options + feedback; these only style the per-question wrapper. */
.scored-q__list { display: flex; flex-direction: column; gap: 1.4rem; }
.scored-q__item { }
.scored-q__prompt {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-navy);
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 0.6rem;
}
.scored-q__item .coach-mc-panel__feedback { margin-top: 0.7rem; }

/* Released-responsibility (Set B) section. Mirrors Set A's visual language:
   .t2-section-group__heading for the section title, and the .t1-band corner
   number-box styling on the <details> step folds (kept as <details> so they
   stay self-contained from the band state machine, but visually identical). */
.t1-released-intro {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream, #F5F0E8);
  background: var(--dark-navy, #142033);
  border-left: 4px solid var(--gold, #C19A5B);
  border-radius: 5px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
}
.t1-released-intro strong { color: var(--gold, #C19A5B); }
/* Section head — identical to Set A's .t2-section-group__heading */
.t1-released-section-head {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--gold-soft, #B89A40);
}
/* Step fold — matches the .t1-band shell + corner number square */
.t1-step-fold {
  position: relative;
  border: 1px solid rgba(20, 32, 51, 0.15);
  border-radius: 6px;
  margin: 0 0 0.9rem;
  background: var(--cream, #F5F0E8);
  overflow: hidden;
}
/* Numbered step square on the left edge — exact match to .t1-band[data-t1-band-step] */
.t1-step-fold[data-t1-step]::before {
  content: attr(data-t1-step);
  position: absolute; left: 0; top: 0; width: 34px; height: 49px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: var(--cream); background: var(--mid-gray, #6E6454);
  z-index: 2; border-top-left-radius: 6px; border-bottom-left-radius: 6px;
}
.t1-step-fold[data-t1-step="1"]::before { background: var(--blue, #3D5A80); }
.t1-step-fold[data-t1-step="2"]::before { background: var(--gold-soft, #B89A40); color: var(--dark-navy); }
.t1-step-fold[data-t1-step="3"]::before { background: var(--red, #8B1A1A); }
.t1-step-fold__summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem 0.7rem 46px; /* left pad makes room for the number square */
  cursor: pointer;
  background: rgba(20, 32, 51, 0.04);
  border-bottom: 1px solid rgba(20, 32, 51, 0.10);
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--dark-navy);
  font-size: 0.98rem;
}
.t1-step-fold__summary::-webkit-details-marker { display: none; }
.t1-step-fold__summary:hover { background: rgba(20, 32, 51, 0.08); }
.t1-step-fold__title { flex: 1; }
.t1-step-fold__chevron {
  flex: none; width: 12px; height: 12px;
  color: var(--dark-navy);
  transition: transform 0.2s ease;
  display: inline-flex;
}
.t1-step-fold[open] .t1-step-fold__chevron { transform: rotate(180deg); }
.t1-step-fold__body { padding: 0.9rem 1rem 1rem 46px; }
.t1-released-info {
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--dark-navy);
  background: var(--white, #ffffff);
  border: 1px solid rgba(20, 32, 51, 0.10);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
}
.t1-released-info__list { margin: 0.6rem 0; padding-left: 1.1rem; }
.t1-released-info__list li { margin: 0.35rem 0; }

/* Make the scored questions POP: each question sits in its own light panel
   (mirrors the viewer's .coach-mc-panel look), and option buttons go white so
   they stand out from the panel rather than blending into the tan page. */
.scored-q__item {
  background: rgba(255, 250, 235, 0.98);
  border: 1.5px solid rgba(184, 155, 223, 0.55);
  border-radius: 6px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.scored-q__item .coach-mc-panel__option {
  background: #ffffff;
}
.scored-q__item .coach-mc-panel__option:hover:not(.is-picked) {
  background: #fff5d6;
}

/* R99 v89: End-of-tutorial incomplete-MCs banner. Shown when student
   reaches the last beat without picking the best answer on every MC.
   Friendly amber palette — clear "attention needed" signal without
   alarm. The Jump button drops them onto the first unanswered MC. */
.coach-incomplete-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.8rem 0 0;
  padding: 0.85rem 1rem;
  background: #fff4e0;
  border: 1.5px solid #d97f3a;
  border-left-width: 4px;
  border-radius: 4px;
  color: #6b3a14;
  font-family: var(--font-body);
}
.coach-incomplete-banner[hidden] { display: none; }
.coach-incomplete-banner__icon {
  flex: 0 0 22px;
  color: #c0651e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-incomplete-banner__body {
  flex: 1;
  min-width: 0;
}
.coach-incomplete-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: #6b3a14;
  margin-bottom: 0.15rem;
}
.coach-incomplete-banner__msg {
  font-size: 0.88rem;
  line-height: 1.4;
  color: #7a4a22;
}
.coach-incomplete-banner__btn {
  flex: 0 0 auto;
  background: #d97f3a;
  color: #fff;
  border: 2px solid #d97f3a;
  border-radius: 4px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, transform 0.12s;
  white-space: nowrap;
}
.coach-incomplete-banner__btn:hover {
  background: #b8651e;
  border-color: #b8651e;
  transform: translateY(-1px);
}
.coach-incomplete-banner__btn:active { transform: none; }
@media (max-width: 1000px) {
  .coach-incomplete-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .coach-incomplete-banner__btn { width: 100%; }
}

/* Whistle in corner — pulses gently when bubble is showing (active speech) */
.coach-whistle {
  position: absolute;
  bottom: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  color: var(--gold);
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  transition: transform 0.3s ease-out;
}
.coach-whistle svg { width: 100%; height: 100%; display: block; }

/* Score badge — upper-right of the camera-window. Tracks running score
   across all MC questions in the player. Only shows once the student has
   touched at least one MC. Sits above the camera-stage transform so it
   stays fixed while the camera pans/zooms. */
.coach-score-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  background: rgba(26, 35, 50, 0.92);
  color: var(--cream, #fdf9ed);
  padding: 0.35rem 0.7rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(218, 165, 32, 0.55);
  font-family: var(--font-body);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  user-select: none;
}
.coach-score-badge[hidden] { display: none; }
.coach-score-badge__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 250, 235, 0.7);
  font-weight: 600;
}
.coach-score-badge__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold, #daa520);
  font-variant-numeric: tabular-nums;
}
.coach-window.is-speaking .coach-whistle {
  animation: coachWhistlePulse 1.6s ease-in-out infinite;
}
@keyframes coachWhistlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.12); opacity: 0.85; }
}

/* Speech bubbles container — overlays the camera viewport, holds 1+ bubbles */
.coach-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* Speech bubble */
.coach-bubble {
  position: absolute;
  z-index: 6;
  max-width: 280px;
  background: var(--dark-navy);
  color: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  padding: 0.85rem 1.05rem 0.95rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  pointer-events: none;
  animation: coachBubbleIn 0.32s ease-out;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out, filter 0.35s ease-out;
}
.coach-bubble[hidden] { display: none; }
.coach-bubble__body strong { color: var(--gold); }
.coach-bubble__body em { font-style: italic; color: #f6e7c2; }

/* Muted — previous bubbles in the same camera group fade and shrink slightly
   so the current one reads as primary. They're still visible — that's the
   point: the student can see the prior thought next to the current one. */
.coach-bubble--muted {
  opacity: 0.55;
  transform: scale(0.92);
  filter: saturate(0.85);
  z-index: 5;
}
.coach-bubble--leaving {
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  pointer-events: none;
}

/* Tail — small triangle pointing at the highlight */
.coach-bubble__tail {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--dark-navy);
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
}
/* Tail position varies based on bubble's relation to target — JS sets a class */
.coach-bubble[data-tail-side="bottom"] .coach-bubble__tail {
  bottom: -9px;
  left: 28px;
  transform: rotate(45deg);
}
.coach-bubble[data-tail-side="top"] .coach-bubble__tail {
  top: -9px;
  left: 28px;
  transform: rotate(-135deg);
}
.coach-bubble[data-tail-side="left"] .coach-bubble__tail {
  top: 14px;
  left: -9px;
  transform: rotate(135deg);
}
.coach-bubble[data-tail-side="right"] .coach-bubble__tail {
  top: 14px;
  right: -9px;
  transform: rotate(-45deg);
}
/* R177: side-placed bubbles (used on short attribution/background stages where
   there's no vertical room) run wider and therefore shorter, so they sit beside
   the highlighted text without covering it. */
.coach-bubble[data-tail-side="left"],
.coach-bubble[data-tail-side="right"] {
  max-width: min(340px, 60%);
}
/* General-comment bubbles (paragraph-level target, no specific phrase to
   point at) — hide the tail entirely. The bubble floats as a free-standing
   remark, not an arrow at any particular spot. */
.coach-bubble.coach-bubble--no-tail .coach-bubble__tail {
  display: none;
}

/* Move icon — small corner badge in the upper-right of each bubble belonging
   to one of the four analytical Moves. Tinted in the bubble's accent color so
   it sits quietly without competing with the body text. */
.coach-bubble__move-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  color: var(--gold);
  opacity: 0.7;
  pointer-events: none;
}
.coach-bubble__move-badge svg { width: 100%; height: 100%; display: block; }
/* Read-bubble: badge picks up the blue accent. Question-bubble: purple. */
.coach-bubble.coach-bubble--read .coach-bubble__move-badge { color: rgba(160, 200, 240, 0.9); }
.coach-bubble.coach-bubble--question .coach-bubble__move-badge { color: #d4bdf2; }
@keyframes coachBubbleIn {
  0%   { opacity: 0; transform: translateY(4px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- WATCH controls ----- */
.coach-controls {
  background: #1a2940;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--cream);
}
.coach-controls__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.coach-controls__row--secondary {
  font-size: 0.82rem;
  color: #b8b09a;
  gap: 1.2rem;
}
.coach-controls__btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease-out;
}
.coach-controls__btn:hover:not(:disabled),
.coach-controls__btn:focus:not(:disabled) {
  background: var(--gold);
  color: var(--dark-navy);
}
/* R210: do NOT remove the outline on keyboard focus — the enhanced
   :focus-visible rule below provides a clear ring. (Mouse focus still shows
   only the gold fill, since :focus-visible suppresses the ring for pointer.) */
.coach-controls__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.coach-controls__play {
  background: var(--gold);
  color: var(--dark-navy);
}
.coach-controls__play:hover:not(:disabled) {
  background: #e0b950;
}

/* Play button shows play icon by default; flips to pause when autoplay
   is running. Same affordance, opposite action. */
.coach-controls__play .coach-controls__icon--pause { display: none; }
.coach-controls__play.is-playing .coach-controls__icon--play { display: none; }
.coach-controls__play.is-playing .coach-controls__icon--pause { display: block; }

/* Pulse animation: applied after a student picks the correct MC answer
   while autoplay had been running. A non-mandatory cue: "click here to
   keep going." The pulse runs until the user clicks Play (resume) or
   clicks Continue (manual step). Both paths clear the class. */
.coach-controls__play--pulsing {
  animation: coachPlayPulse 1.4s ease-in-out infinite;
}
@keyframes coachPlayPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(218, 165, 32, 0.55);
  }
  50% {
    transform: scale(1.10);
    box-shadow: 0 0 0 8px rgba(218, 165, 32, 0);
  }
}

/* Next button shows an arrow normally; on the last beat it becomes a
   "Start over" restart button. Same affordance, different action. */
.coach-controls__next .coach-controls__icon--restart { display: none; }
.coach-controls__next.is-restart {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-navy);
}
.coach-controls__next.is-restart:hover:not(:disabled) {
  background: #e0b950;
}
.coach-controls__next.is-restart .coach-controls__icon--arrow { display: none; }
.coach-controls__next.is-restart .coach-controls__icon--restart { display: block; }

/* Progress bar */
.coach-controls__progress {
  flex: 1;
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}
.coach-controls__progress-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}
.coach-controls__progress-fill {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.3s ease-out;
  width: 0;
}
.coach-controls__progress-dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.coach-progress-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid var(--dark-navy);
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: all 0.15s ease-out;
  z-index: 2;
}
.coach-progress-dot:hover,
.coach-progress-dot:focus {
  background: var(--gold);
  outline: none;
}
.coach-progress-dot.is-passed {
  background: var(--gold);
}
.coach-progress-dot.is-current {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.45);
}
.coach-progress-dot__label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-navy);
  color: var(--cream);
  font-size: 0.72rem;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
  border: 1px solid var(--gold);
}
.coach-progress-dot:hover .coach-progress-dot__label,
.coach-progress-dot:focus .coach-progress-dot__label {
  opacity: 1;
}

.coach-controls__speed {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.coach-controls__speed input[type="range"] {
  width: 90px;
}
/* Sound button — disabled until TTS layer ships. Shows muted speaker icon
   by default (the X-bars). When sound is on, the .is-on class shows the
   speaker-with-waves icon instead. Sized to match the other small btns. */
.coach-controls__sound {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-controls__sound .coach-controls__icon--sound-on { display: none; }
.coach-controls__sound.is-on .coach-controls__icon--sound-off { display: none; }
.coach-controls__sound.is-on .coach-controls__icon--sound-on { display: block; }
.coach-controls__beat-indicator {
  margin-left: auto;
  font-style: italic;
  font-size: 0.78rem;
  color: #9b9483;
}
/* Read-link in the controls bar: small italic link, lower-right of the
   secondary row. Replaces the corner edge-link inside the camera viewport. */
.coach-controls__read-link {
  background: transparent;
  border: none;
  padding: 0.25rem 0.6rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(218, 165, 32, 0.85);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease-out, color 0.15s ease-out;
  white-space: nowrap;
}
.coach-controls__read-link:hover,
.coach-controls__read-link:focus {
  background: rgba(218, 165, 32, 0.15);
  color: var(--gold);
  outline: none;
}

/* ----- READ mode ----- */
[data-coach-pane="read"] {
  position: relative;
  padding: 0;
}
.coach-read__edge-link {
  display: block;
  margin: 0 0 0.6rem auto;
  background: rgba(218, 165, 32, 0.14);
  border: 1px solid #d8c98e;
  border-radius: 12px;
  padding: 4px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--dark-navy);
  cursor: pointer;
  transition: all 0.15s ease-out;
  width: fit-content;
}
.coach-read__edge-link:hover,
.coach-read__edge-link:focus {
  background: var(--gold);
  outline: none;
}

@media (max-width: 720px) {
  .coach-window { height: 320px; }
  .coach-stage { width: 580px; padding: 1.6rem 1.8rem; font-size: 15px; }
  .coach-bubble { max-width: 240px; font-size: 0.88rem; }
  .coach-chooser__btn { width: 100%; max-width: 320px; }
  .coach-controls__row--secondary { flex-wrap: wrap; gap: 0.6rem; }
  .coach-controls__beat-indicator { margin-left: 0; }
}

.t1-source-stage__stub {
  margin-top: 1.2rem;
  background: var(--white);
  border: 1px dashed #c8a84b;
  border-radius: 6px;
  padding: 2rem 1.8rem;
  text-align: center;
}
.t1-source-stage__stub-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.8rem;
  color: var(--gold);
}
.t1-source-stage__stub-icon svg { width: 100%; height: 100%; display: block; }
.t1-source-stage__stub-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.7rem;
  letter-spacing: 0.04em;
}
.t1-source-stage__stub-body {
  max-width: 540px;
  margin: 0 auto 0.95rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.t1-source-stage__stub-body p { margin: 0; }
.t1-source-stage__stub-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(200, 168, 75, 0.12);
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
}

/* ----- Stage content (one visible at a time) ----- */
.t1-stage-content {
  display: none;
  padding: 1.5rem 1.5rem 2.5rem;
  max-width: 920px;
  margin: 0 auto;
}
.t1-stage-content[data-t1-active="true"] { display: block; }

/* ----- Stage 1 (READ) — source tabs + per-source panels ----- */
.t1-stage1__intro {
  background: #fdfaef;
  border-left: 3px solid var(--gold);
  padding: 1rem 1.2rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.t1-stage1__intro strong { color: var(--dark-navy); }

/* R177: friendly, scannable "How this works" intro for the §1.2e activity.
   Color is a MEANINGFUL code, reused on the section headings:
     Sourcing = blue, Context = amber/gold-deep, Close Reading = red.
   Each move also carries its icon (icon + color, never color alone). */
.t1-howto__opener { margin: 0 0 0.9rem; font-size: 0.98rem; }
.t1-howto__moves {
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.1rem;
}
.t1-howto__move {
  flex: 1 1 0; min-width: 150px;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: #fff; border: 1px solid #e6dcc2; border-radius: 8px;
  border-left-width: 5px;
  padding: 0.65rem 0.8rem 0.7rem 0.85rem; position: relative;
}
.t1-howto__move-icon {
  width: 26px; height: 26px; margin-bottom: 0.1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.t1-howto__move-icon svg { width: 22px; height: 22px; }
/* Per-move color code (icon + accent + number badge all share the move color). */
.t1-howto__move--sourcing  { border-left-color: var(--blue);      background: #eaf0f7; }
.t1-howto__move--context   { border-left-color: var(--gold-deep); background: #f7f0dd; }
.t1-howto__move--closeread { border-left-color: var(--red);       background: #f7ecec; }
.t1-howto__move--sourcing  .t1-howto__move-icon,
.t1-howto__move--sourcing  .t1-howto__move-name  { color: var(--blue); }
.t1-howto__move--context   .t1-howto__move-icon,
.t1-howto__move--context   .t1-howto__move-name  { color: var(--gold-deep); }
.t1-howto__move--closeread .t1-howto__move-icon,
.t1-howto__move--closeread .t1-howto__move-name  { color: var(--red); }
.t1-howto__move--sourcing  .t1-howto__move-num { background: var(--blue);      color: #fff; }
.t1-howto__move--context   .t1-howto__move-num { background: var(--gold-deep); color: #fff; }
.t1-howto__move--closeread .t1-howto__move-num { background: var(--red);       color: #fff; }
.t1-howto__move-num {
  position: absolute; top: -10px; left: 0.8rem;
  width: 20px; height: 20px; border-radius: 50%;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(27,39,64,0.25);
}
.t1-howto__move-name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.08rem; margin-top: 0.1rem;
}
.t1-howto__move-desc { font-size: 0.9rem; color: var(--charcoal); line-height: 1.4; }

.t1-howto__ramp-lead { margin: 0 0 0.55rem; font-size: 0.98rem; }
/* Two-tier grouping: the first two sources are COACHED, the last two are ON YOUR
   OWN. The tier — not a per-source hue — is what the color encodes. */
.t1-howto__ramp {
  display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.t1-howto__tier {
  flex: 1 1 0; min-width: 220px;
  border-radius: 8px; padding: 0.55rem 0.7rem 0.7rem;
}
.t1-howto__tier--coached { background: #eaf0f7; border: 1px solid #c7d6e8; }
.t1-howto__tier--onown   { background: #f5efe0; border: 1px solid #e0d2ab; }
.t1-howto__tier-label {
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 0.45rem;
  display: flex; align-items: center; gap: 0.35rem;
}
.t1-howto__tier--coached .t1-howto__tier-label { color: var(--blue); }
.t1-howto__tier--onown   .t1-howto__tier-label { color: var(--gold-deep); }
.t1-howto__tier-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;}
.t1-howto__tier-ico svg{width:18px;height:18px;}
.t1-howto__tier-srcs { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.t1-howto__rung {
  flex: 1 1 0; min-width: 100px;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: #fff; border-radius: 6px; padding: 0.5rem 0.6rem;
  border: 1px solid rgba(27,39,64,0.1);
}
.t1-howto__rung-src {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--dark-navy); font-size: 0.98rem;
}
.t1-howto__rung-do { font-size: 0.84rem; color: var(--charcoal); line-height: 1.32; font-weight: 500; }
.t1-howto__tier-arrow {
  align-self: center; color: var(--gold-deep); font-size: 1.4rem; font-weight: 700; flex: 0 0 auto;
}
.t1-howto__finish {
  margin: 0; padding-top: 0.85rem; border-top: 1px solid #ece3cd;
  font-size: 0.92rem; color: var(--charcoal); line-height: 1.45;
}
.t1-howto__finish-icon { color: var(--gold-deep); margin-right: 0.4rem; display: inline-flex; width: 20px; height: 20px; vertical-align: -4px; }
.t1-howto__finish-icon svg { width: 100%; height: auto; }
/* Capstone howto: THEN/NOW matched-set cards + scoring line. THEN=med-navy,
   NOW=gold, matching the Tier-2 coach THEN/NOW convention used elsewhere. */
.t1-howto__sets {
  display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 0 0 1.1rem;
}
.t1-howto__set {
  flex: 1 1 280px; min-width: 0;
  background: #faf5ea; border: 1px solid #e8dfc6; border-radius: 6px;
  padding: 0.7rem 0.85rem;
}
.t1-howto__set-label {
  font-size: 0.9rem; color: var(--charcoal); line-height: 1.35; margin-bottom: 0.5rem;
}
.t1-howto__set-tag {
  display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dark-navy); background: #ece3cd; border-radius: 3px;
  padding: 0.1rem 0.45rem; margin-right: 0.35rem;
}
.t1-howto__set-pair { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.t1-howto__then, .t1-howto__now {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700;
  border-radius: 3px; padding: 0.25rem 0.55rem; line-height: 1.2;
}
.t1-howto__then { color: #2C3E50; background: rgba(44,62,80,0.12); border-left: 3px solid var(--med-navy, #2C3E50); }
.t1-howto__now  { color: #8A6520; background: rgba(193,154,91,0.16); border-left: 3px solid var(--gold); }
.t1-howto__vs { font-style: italic; color: var(--mid-gray); font-size: 0.85rem; flex: 0 0 auto; }
.t1-howto__scoring {
  margin: 0 0 0.9rem; padding: 0.6rem 0.8rem;
  background: rgba(184,155,223,0.10); border: 1px solid rgba(184,155,223,0.45);
  border-radius: 5px; font-size: 0.9rem; color: var(--charcoal); line-height: 1.45;
}
.t1-howto__scoring-ico {
  display: inline-flex; width: 18px; height: 18px; vertical-align: -3px;
  margin-right: 0.35rem; color: var(--gold-deep);
}
.t1-howto__scoring-ico svg { width: 100%; height: auto; }
@media (max-width: 640px) {
  .t1-howto__tier-arrow { display: none; }
  .t1-howto__tier, .t1-howto__move { min-width: 0; flex-basis: 100%; }
  .t1-howto__set { flex-basis: 100%; }
}

.t1-source-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.4rem;
  background: var(--cream);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #d8d0bb;
  flex: 1;
  min-width: 0;
}

/* Column that stacks the 4 source tabs over the full-width writing tab.
   It takes the horizontal space the tab row used to occupy; align-items:
   stretch on .t1-source-row makes it match the blue stage box's height. */
.t1-source-tabs-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.t1-source-tabs-col .t1-source-tabs {
  margin-bottom: 0;
  flex: 1; /* the 4-tab row grows; the writing tabs below are fixed height */
}

/* The two writing tabs sit side by side under the four source tabs: the
   left (Writing Practice) under sources 1-2, the right (Writing Quiz) under
   sources 3-4. Each takes half the row so they line up beneath their pair. */
.t1-writing-tabs {
  display: flex;
  gap: 6px;
}
.t1-writing-tabs .t1-writing-tab {
  flex: 1 1 0;
  min-width: 0;
}

/* The Writing tab — a bar under its pair of source tabs. */
.t1-writing-tab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: var(--cream);
  border: 1px solid #d8d0bb;
  border-radius: 6px;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-heading);
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.t1-writing-tab__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--gold-deep);
  display: inline-flex;
}
.t1-writing-tab__icon svg { width: 100%; height: auto; display: block; }
.t1-writing-tab__label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}
.t1-writing-tab__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1.15;
}
.t1-writing-tab__sub {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid-gray);
  font-family: var(--font-body);
}
.t1-writing-tab__indicator {
  flex: 0 0 auto;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-body);
  color: var(--mid-gray);
  white-space: nowrap;
}
.t1-writing-tab:hover:not([data-t1-state="locked"]) {
  background: #fdfaef;
  border-color: #e8d8a8;
}
.t1-writing-tab[data-t1-state="active"] {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.t1-writing-tab[data-t1-state="active"] .t1-writing-tab__title { color: var(--dark-navy); }
.t1-writing-tab[data-t1-state="active"] .t1-writing-tab__sub { color: var(--mid-gray); }
.t1-writing-tab[data-t1-state="active"] .t1-writing-tab__indicator { color: var(--gold-deep); font-weight: 700; }
.t1-writing-tab[data-t1-state="active"] .t1-writing-tab__icon { color: var(--gold-deep); }
.t1-writing-tab[data-t1-state="ready"] {
  border-color: var(--gold);
  background: #fffdf5;
}
.t1-writing-tab[data-t1-state="ready"] .t1-writing-tab__indicator { color: var(--gold-deep); font-weight: 700; }
.t1-writing-tab[data-t1-state="complete"] {
  background: rgba(106, 142, 63, 0.06);
  border-color: rgba(106, 142, 63, 0.25);
}
.t1-writing-tab[data-t1-state="complete"] .t1-writing-tab__indicator { color: #4d6b29; font-weight: 700; }
.t1-writing-tab[data-t1-state="locked"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.t1-writing-tab[data-t1-state="locked"] .t1-writing-tab__icon { color: var(--mid-gray); }
@media (max-width: 720px) {
  .t1-source-tabs-col { width: 100%; }
}
.t1-source-tab {
  flex: 1;
  min-width: 145px;
  padding: 0.85rem 0.85rem 0.95rem;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: var(--font-heading);
  color: var(--charcoal);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  text-align: left;
  line-height: 1.25;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.t1-source-tab:hover:not([data-t1-state="locked"]) {
  background: #fdfaef;
  border-color: #e8d8a8;
}
.t1-source-tab[data-t1-state="active"] {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.t1-source-tab[data-t1-state="active"]:hover {
  background: var(--white);
  border-color: var(--gold);
}
.t1-source-tab[data-t1-state="complete"] {
  background: rgba(106, 142, 63, 0.06);
  border-color: rgba(106, 142, 63, 0.25);
}
.t1-source-tab[data-t1-state="locked"] {
  cursor: not-allowed;
  opacity: 0.55;
  background: transparent;
}
.t1-source-tab[data-t1-state="locked"]:hover { background: transparent; border-color: transparent; }

.t1-source-tab__num {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 1;
  line-height: 1;
}
.t1-source-tab[data-t1-state="locked"] .t1-source-tab__num { color: var(--mid-gray); opacity: 0.6; }
.t1-source-tab[data-t1-state="complete"] .t1-source-tab__num { color: #4d6b29; }

.t1-source-tab__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-navy);
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.t1-source-tab[data-t1-state="locked"] .t1-source-tab__name { color: var(--mid-gray); }
.t1-source-tab[data-t1-state="active"] .t1-source-tab__name { color: var(--dark-navy); }

.t1-source-tab__indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mid-gray);
  font-family: var(--font-body);
}
.t1-source-tab[data-t1-state="complete"] .t1-source-tab__indicator {
  color: #4d6b29;
}
.t1-source-tab[data-t1-state="complete"] .t1-source-tab__indicator::before {
  content: "\2713";
  font-weight: 700;
}
.t1-source-tab[data-t1-state="locked"] .t1-source-tab__indicator::before {
  content: "\1F512";
  font-size: 10px;
  margin-right: 0.2rem;
  opacity: 0.7;
}
.t1-source-tab[data-t1-state="locked"] .t1-source-tab__indicator { color: var(--mid-gray); }
/* Show indicator content for locked + complete states; hide for default/active */
.t1-source-tab .t1-source-tab__indicator { display: none; }
.t1-source-tab[data-t1-state="locked"] .t1-source-tab__indicator,
.t1-source-tab[data-t1-state="complete"] .t1-source-tab__indicator { display: inline-flex; }

.t1-source-panel {
  display: none;
}
.t1-source-panel[data-t1-active="true"] { display: block; }

/* Source recap (mini-card pointing back to page 35 for full reading) */
/* DEPRECATED Round 39 — replaced by t1-section collapsible bars below.
   Kept here only to avoid breaking older HTML if re-introduced; currently unused. */
.t1-source-recap {
  background: var(--dark-navy);
  color: var(--cream);
  padding: 1.1rem 1.3rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  display: none; /* hidden — pattern retired */
}

/* ----- Collapsible / static section bars (Reading, Insights, Questions, Writing) -----
   Round 39 visual system: each per-source panel is composed of titled
   "section bars" — each with an icon, a label, and (for collapsible
   variants) a chevron. The Reading and Insights bars are collapsible
   (default collapsed); the Questions bar is static (always-open header).
   Stage 4 will introduce a Writing bar using the same pattern. */

.t1-section {
  margin-bottom: 0.85rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid #d8d0bb;
}
.t1-section--reading { border-left: 3px solid var(--gold); }
.t1-section--insights { border-left: 3px solid #c5942f; }
.t1-section--questions {
  border-left: 3px solid var(--dark-navy);
  background: #fefcf3;
  margin-top: 1.2rem;
}

.t1-section__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  background: #fbf6e8;
  border: none;
  padding: 0.85rem 1rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--charcoal);
  transition: background 0.16s;
}
.t1-section__header:hover { background: #f5edd0; }
.t1-section--reading .t1-section__header { background: #fbf6e8; }
.t1-section--insights .t1-section__header { background: #f8efd8; }
.t1-section--questions .t1-section__header {
  background: var(--dark-navy);
  color: var(--cream);
  cursor: default;
  padding: 0.95rem 1.1rem;
}
.t1-section--questions .t1-section__header:hover { background: var(--dark-navy); }
.t1-section__header--static { cursor: default; }

.t1-section__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-navy);
}
.t1-section--questions .t1-section__icon { color: var(--gold-deep, #7A5E12); }
.t1-section__icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.t1-section__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.t1-section__label-main {
  font-family: var(--font-heading);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--dark-navy);
  letter-spacing: 0.01em;
}
.t1-section--questions .t1-section__label-main {
  color: var(--cream);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.t1-section__label-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--mid-gray);
  font-style: italic;
  line-height: 1.3;
}
.t1-section--questions .t1-section__label-sub {
  color: rgba(245, 240, 224, 0.78);
  font-style: normal;
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: 0;
}

.t1-section__chevron {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-navy);
  background: rgba(20, 32, 51, 0.06);
  border-radius: 50%;
  transition: transform 0.25s ease-out, background 0.18s;
}
.t1-section__header:hover .t1-section__chevron {
  background: rgba(20, 32, 51, 0.12);
}
.t1-section[data-t1-open="true"] .t1-section__chevron {
  transform: rotate(180deg);
  background: var(--dark-navy);
  color: var(--cream);
}
.t1-section__chevron svg {
  width: 11px;
  height: auto;
  display: block;
}

/* Completion indicator inside the Questions header subtitle —
   replaces the removed next-source button by signaling progress
   inline. The static subtitle text is replaced via JS when complete. */
.t1-section--questions[data-t1-source-complete="true"] .t1-section__label-sub {
  color: var(--gold);
  font-weight: 600;
}
.t1-section--questions[data-t1-source-complete="true"] .t1-section__label-sub::before {
  content: "\2713  ";
  color: var(--gold);
  font-weight: 700;
}

.t1-section__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, visibility 0s linear 0.3s;
}
.t1-section[data-t1-open="true"] .t1-section__body {
  max-height: 5000px;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out, visibility 0s;
}
.t1-section__body-inner {
  padding: 1.2rem 1.4rem 1.4rem;
}
.t1-section--questions .t1-section__body {
  /* Always open for the Questions section */
  max-height: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}
.t1-section--questions .t1-section__body-inner {
  padding: 1.4rem 1.5rem;
}

/* Inline source-card display inside the Reading collapsible.
   Tightens the page-35 source-card styles into a more compact form
   for the activity context. The student already saw the full card on
   page 35; this is a re-read view. */
.t1-source-inline {
  background: var(--white);
  border-radius: 4px;
}
.t1-source-inline__cite {
  background: rgba(20, 32, 51, 0.04);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-radius: 3px 3px 0 0;
}
.t1-source-inline__portrait {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--off-white);
  border: 2px solid var(--gold);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t1-source-inline__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.t1-source-inline__portrait--silhouette {
  background: linear-gradient(135deg, #d4cdb6 0%, #b8b09a 100%);
}
.t1-source-inline__portrait--silhouette svg {
  width: 100%;
  height: 100%;
  color: rgba(20, 32, 51, 0.4);
}
.t1-source-inline__cite-content { flex: 1; min-width: 0; }
.t1-source-inline__typology {
  font-family: var(--font-display, var(--font-heading));
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: var(--dark-navy);
  margin-bottom: 0.1rem;
}
.t1-source-inline__role {
  font-size: 11px;
  color: var(--gold-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.t1-source-inline__author {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--charcoal);
}
.t1-source-inline__year {
  font-size: 12px;
  color: var(--mid-gray);
  font-style: italic;
}
.t1-source-inline__title {
  font-size: 0.93rem;
  color: var(--charcoal);
  margin-top: 0.3rem;
}
.t1-source-inline__meta {
  font-size: 11.5px;
  color: var(--mid-gray);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.t1-source-inline__framing {
  padding: 0.95rem 1.2rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.t1-source-inline__framing p { margin: 0 0 0.7rem; }
.t1-source-inline__framing p:last-child { margin-bottom: 0; }

/* Re-use the source-flip widget styling that's already on page 35.
   No new styles needed; the flip toggle and faces inherit. */

/* Stop-and-Think synopsis block (now lives inside Insights collapsible) */
.t1-st-synopsis {
  background: transparent;
  border-left: none;
  padding: 0;
  margin-bottom: 0;
}
.t1-st-synopsis__title {
  display: none; /* the section bar's label takes over this role */
}
.t1-st-synopsis__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--charcoal);
}
.t1-st-synopsis__body p { margin: 0 0 0.6rem; }
.t1-st-synopsis__body p:last-child { margin-bottom: 0; }

/* Gate banner — shows if Stop-and-Think on page 35 not done */
.t1-gate {
  background: #fff4e6;
  border: 1px solid #e8c995;
  border-left: 4px solid #c89200;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
  border-radius: 3px;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.t1-gate__icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  margin-top: 0.05rem;
}
.t1-gate__body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: #6c4a00;
}
.t1-gate__body strong { color: var(--dark-navy); }
.t1-gate__action {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.4rem 0.8rem;
  background: var(--dark-navy);
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 3px;
}
.t1-gate__action:hover { background: #1a2840; }

/* Per-source organizer (the analytical capture work) */
.t1-organizer {
  background: #fefcf3;
  border: 1px solid #e8e0c8;
  padding: 1.4rem 1.5rem;
  border-radius: 4px;
}
.t1-organizer__title {
  font-family: var(--font-display, var(--font-heading));
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 600;
  color: var(--dark-navy);
  margin: 0 0 0.4rem;
}
.t1-organizer__intro {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 1.2rem;
}
.t1-organizer__question {
  margin-bottom: 1.3rem;
}
.t1-organizer__question:last-child { margin-bottom: 0; }
.t1-organizer__q-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.t1-organizer__q-prompt {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--dark-navy);
  margin: 0 0 0.7rem;
  line-height: 1.45;
}
.t1-organizer__choices {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.t1-organizer__choice {
  text-align: left;
  background: var(--cream);
  border: 1px solid #d8d0bb;
  padding: 0.65rem 0.95rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.08s;
}
.t1-organizer__choice:hover {
  border-color: var(--gold);
  background: #fdfaef;
}
.t1-organizer__choice[data-t1-selected="true"] {
  border-color: var(--dark-navy);
  background: #f4ede0;
  border-left: 3px solid var(--gold);
  font-weight: 600;
  color: var(--dark-navy);
}
.t1-organizer__choice[data-t1-selected="true"]::after {
  content: " \2713";
  color: var(--gold);
  font-weight: 700;
  margin-left: 0.4rem;
}

/* R60: tiered feedback for "Your Turn" investigate questions on Agimet
   and Königshofen. When a choice has a verdict, color the LEFT BORDER
   to signal the tier (best/good/ok/wrong) without overwhelming the
   button's own selected style. The full feedback text appears in a
   sibling .t1-organizer__feedback panel below the choice list. */
.t1-organizer__choice[data-t1-verdict="best"][data-t1-selected="true"] {
  border-left-color: #4a7d4a;
  background: rgba(74, 125, 74, 0.10);
}
.t1-organizer__choice[data-t1-verdict="best"][data-t1-selected="true"]::after {
  content: " \2713 strongest";
  color: #2f5a2f;
}
.t1-organizer__choice[data-t1-verdict="good"][data-t1-selected="true"] {
  border-left-color: var(--gold);
  background: rgba(218, 165, 32, 0.10);
}
.t1-organizer__choice[data-t1-verdict="good"][data-t1-selected="true"]::after {
  content: " \2713 good";
  color: #6e5012;
}
.t1-organizer__choice[data-t1-verdict="ok"][data-t1-selected="true"] {
  border-left-color: #c8a84b;
  background: rgba(200, 168, 75, 0.08);
}
.t1-organizer__choice[data-t1-verdict="ok"][data-t1-selected="true"]::after {
  content: " \2713 ok";
  color: #6e5012;
}
.t1-organizer__choice[data-t1-verdict="wrong"][data-t1-selected="true"] {
  border-left-color: #a85040;
  background: rgba(168, 80, 64, 0.10);
}
.t1-organizer__choice[data-t1-verdict="wrong"][data-t1-selected="true"]::after {
  content: " \2715 not the strongest read";
  color: #6f3528;
  font-weight: 700;
  margin-left: 0.4rem;
}
.t1-organizer__feedback {
  margin-top: 0.7rem;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 3px;
  border-left: 3px solid var(--mid-gray);
  background: rgba(26, 35, 50, 0.04);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--charcoal);
  display: none;
  animation: t1OrgFeedbackIn 0.18s ease-out;
}
.t1-organizer__feedback.is-open { display: block; }
.t1-organizer__feedback[data-t1-verdict="best"] {
  border-left-color: #4a7d4a;
  background: rgba(74, 125, 74, 0.06);
}
.t1-organizer__feedback[data-t1-verdict="good"] {
  border-left-color: var(--gold);
  background: rgba(218, 165, 32, 0.06);
}
.t1-organizer__feedback[data-t1-verdict="ok"] {
  border-left-color: #c8a84b;
  background: rgba(200, 168, 75, 0.05);
}
.t1-organizer__feedback[data-t1-verdict="wrong"] {
  border-left-color: #a85040;
  background: rgba(168, 80, 64, 0.05);
}
.t1-organizer__feedback strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
@keyframes t1OrgFeedbackIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

.t1-organizer__textarea {
  width: 100%;
  min-height: 80px;
  background: var(--cream);
  border: 1px solid #d8d0bb;
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--charcoal);
  resize: vertical;
  box-sizing: border-box;
}
.t1-organizer__textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fefcf3;
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.15);
}
.t1-organizer__hint {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--mid-gray);
  margin-top: 0.4rem;
}

/* ============================================================
   R60: FINISH-ON-PAPER closeout stage. Lives on the Königshofen
   panel after the you-do investigate. Restates the writing
   prompt, shows the C-E-A-E-A-C structure visually, instructs
   on color-coding for paper markup, links the downloadable
   graphic organizer PDF, and acknowledges student completion
   so the activity can mark itself done.
   ============================================================ */
.t1-finish {
  display: block;
}
.t1-finish__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 1.2rem;
}
.t1-finish__prompt-card {
  background: var(--dark-navy);
  color: var(--cream);
  border-radius: 5px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0 0 1.6rem;
  border-left: 4px solid var(--gold);
}
.t1-finish__prompt-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.t1-finish__prompt-text {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.45;
  margin: 0 0 0.65rem;
  color: var(--cream);
}
.t1-finish__prompt-text strong {
  font-style: normal;
  color: var(--white);
}
.t1-finish__prompt-instruction {
  font-family: var(--font-body);
  font-size: 0.92rem;
  margin: 0;
  color: rgba(253, 246, 232, 0.85);
}

/* R61: collapsible source-text block on the finish stage. Native
   <details>/<summary> with `open` attribute defaulting to expanded so
   the student sees the source passages immediately when they arrive at
   the finish stage. They can close it if they want to focus on the
   structure block, but the default invites them to read alongside
   their writing. */
.t1-finish__sources {
  background: var(--cream);
  border: 1px solid #e0d6bb;
  border-radius: 5px;
  margin: 0 0 1.6rem;
  overflow: hidden;
}
.t1-finish__sources-summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  background: rgba(218, 165, 32, 0.08);
  border-bottom: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.t1-finish__sources-summary::-webkit-details-marker { display: none; }
.t1-finish__sources-summary::marker { content: ""; }
.t1-finish__sources-summary:hover {
  background: rgba(218, 165, 32, 0.14);
}
.t1-finish__sources[open] > .t1-finish__sources-summary {
  border-bottom-color: #e0d6bb;
}
.t1-finish__sources-icon {
  flex: 0 0 auto;
  color: var(--dark-navy);
  display: inline-flex;
}
.t1-finish__sources-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.t1-finish__sources-title {
  flex: 1 1 auto;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark-navy);
}
.t1-finish__sources-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--dark-navy);
  transition: transform 0.18s ease-out;
}
.t1-finish__sources-chevron svg {
  width: 12px;
  height: 8px;
  display: block;
}
.t1-finish__sources[open] > .t1-finish__sources-summary > .t1-finish__sources-chevron {
  transform: rotate(180deg);
}
.t1-finish__sources-body {
  padding: 0.85rem 1.1rem 1rem;
  display: grid;
  gap: 1.2rem;
}
.t1-finish__source {
  display: block;
}
.t1-finish__source + .t1-finish__source {
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(26, 35, 50, 0.15);
}
.t1-finish__source-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-navy);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}
.t1-finish__source-title em {
  font-style: italic;
  color: var(--dark-red);
}
.t1-finish__source-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--mid-gray);
  margin: 0 0 0.7rem;
  line-height: 1.45;
}
.t1-finish__source-text {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.t1-finish__source-text p {
  margin: 0 0 0.6rem;
}
.t1-finish__source-text p:last-child { margin-bottom: 0; }
.t1-finish__source-text .source-excerpt-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.85rem;
  margin-bottom: 0.3rem;
}
.t1-finish__source-text .source-excerpt-label:first-child {
  margin-top: 0;
}

.t1-finish__section-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-navy);
  margin: 1.4rem 0 0.4rem;
}
.t1-finish__section-title--inset {
  margin-top: 0;
}
.t1-finish__section-lede {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--mid-gray);
  margin: 0 0 0.7rem;
}
.t1-finish__structure {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.45rem;
}
.t1-finish__structure-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.6rem 0.8rem;
  background: var(--cream);
  border-radius: 4px;
  border-left: 3px solid var(--mid-gray);
}
.t1-finish__structure-hint-btn {
  grid-column: 3;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(26, 35, 50, 0.18);
  color: var(--mid-gray);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  align-self: center;
}
.t1-finish__structure-hint-btn:hover {
  background: rgba(218, 165, 32, 0.12);
  color: var(--dark-navy);
  border-color: var(--gold);
}
.t1-finish__structure-hint-btn[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
  border-color: var(--dark-navy);
}
.t1-finish__structure-hint {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: 0.7rem 0.85rem;
  background: rgba(218, 165, 32, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--charcoal);
  animation: t1FinishHintIn 0.18s ease-out;
}
.t1-finish__structure-hint p {
  margin: 0;
}
.t1-finish__structure-hint strong {
  font-family: var(--font-heading);
  color: var(--dark-navy);
}
@keyframes t1FinishHintIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
.t1-finish__structure-tag {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.3rem 0.4rem;
  border-radius: 3px;
  color: var(--dark-navy);
  background: var(--white);
  border: 1px solid rgba(26, 35, 50, 0.15);
}
.t1-finish__structure-tag--claim {
  background: rgba(218, 165, 32, 0.18);
  border-color: var(--gold);
  color: #6e5012;
}
.t1-finish__structure-row:has(.t1-finish__structure-tag--claim) {
  border-left-color: var(--gold);
}
.t1-finish__structure-tag--evidence {
  background: rgba(168, 80, 64, 0.12);
  border-color: #a85040;
  color: #6f3528;
}
.t1-finish__structure-row:has(.t1-finish__structure-tag--evidence) {
  border-left-color: #a85040;
}
.t1-finish__structure-tag--analysis {
  background: rgba(74, 125, 74, 0.12);
  border-color: #4a7d4a;
  color: #2f5a2f;
}
.t1-finish__structure-row:has(.t1-finish__structure-tag--analysis) {
  border-left-color: #4a7d4a;
}
.t1-finish__structure-tag--conclusion {
  background: rgba(26, 35, 50, 0.08);
  border-color: var(--dark-navy);
  color: var(--dark-navy);
}
.t1-finish__structure-row:has(.t1-finish__structure-tag--conclusion) {
  border-left-color: var(--dark-navy);
}
.t1-finish__structure-desc {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--charcoal);
}
.t1-finish__color-card {
  background: var(--cream);
  border: 1px solid #e0d6bb;
  border-radius: 5px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0 0 1.6rem;
}
.t1-finish__color-lede {
  font-family: var(--font-body);
  font-size: 0.93rem;
  margin: 0 0 0.7rem;
  color: var(--charcoal);
}
.t1-finish__color-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: grid;
  gap: 0.45rem;
}
.t1-finish__color-list li {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--charcoal);
}
.t1-finish__color-chip {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.55rem;
  min-width: 70px;
  text-align: center;
}
.t1-finish__color-chip--claim {
  background: #fff5b8;
  border: 1px solid #d4b545;
  color: #5a4a12;
}
.t1-finish__color-chip--evidence {
  background: #fcd9d2;
  border: 1px solid #a85040;
  color: #6f3528;
}
.t1-finish__color-chip--analysis {
  background: #d2e8d2;
  border: 1px solid #4a7d4a;
  color: #2f5a2f;
}
.t1-finish__color-alt {
  color: var(--mid-gray);
  font-style: italic;
  font-size: 0.88rem;
}
.t1-finish__color-note {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--mid-gray);
  margin: 0;
  line-height: 1.5;
}
.t1-finish__organizer-card {
  background: rgba(218, 165, 32, 0.08);
  border: 1px solid rgba(218, 165, 32, 0.4);
  border-radius: 5px;
  padding: 1rem 1.2rem 1.1rem;
  margin: 0 0 1.6rem;
}
.t1-finish__organizer-lede {
  font-family: var(--font-body);
  font-size: 0.93rem;
  margin: 0 0 0.85rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.t1-finish__organizer-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.1rem;
  background: var(--dark-navy);
  color: var(--gold);
  border: none;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.t1-finish__organizer-open-btn:hover {
  background: #122036;
  color: var(--white);
  transform: translateY(-1px);
}
.t1-finish__organizer-open-btn[aria-expanded="true"] {
  background: var(--gold);
  color: var(--dark-navy);
}
.t1-finish__organizer-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* In-page printable graphic organizer (R61). Hidden by default;
   revealed when "Open the Graphic Organizer" is clicked. Toolbar
   provides Print + Download-PDF + Close actions. The organizer
   itself is rendered as HTML/CSS and styled to match the PDF
   visually. CSS @media print scopes the printout to this region. */
.t1-printable-organizer {
  margin-top: 1.2rem;
  background: var(--white);
  border: 1px solid #d8d0bb;
  border-radius: 5px;
  overflow: hidden;
}
.t1-printable-organizer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.95rem;
  background: var(--dark-navy);
  color: var(--cream);
  flex-wrap: wrap;
}
.t1-printable-organizer__toolbar-title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.t1-printable-organizer__toolbar-actions {
  display: flex;
  gap: 0.45rem;
}
.t1-printable-organizer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  background: rgba(253, 246, 232, 0.1);
  color: var(--cream);
  border: 1px solid rgba(253, 246, 232, 0.25);
  border-radius: 3px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.t1-printable-organizer__btn:hover {
  background: var(--gold);
  color: var(--dark-navy);
  border-color: var(--gold);
  text-decoration: none;
}

/* The organizer itself — visible in-page; same DOM is targeted by
   @media print rules to render as the printable view. */
.cob-organizer {
  background: #fbf6e8;
  padding: 0.6in 0.55in;
  font-family: var(--font-body);
  color: var(--charcoal);
  font-size: 10.5px;
  line-height: 1.5;
}
.cob-organizer__header {
  background: var(--dark-navy);
  margin: -0.6in -0.55in 0.18in;
  padding: 0.18in 0.32in 0.22in;
  border-top: 3px solid var(--gold);
}
.cob-organizer__overline {
  margin: 0 0 0.05in;
  font-family: var(--font-heading);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.cob-organizer__title {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  color: var(--white);
  font-weight: 600;
}
.cob-organizer__id-strip {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0.18in;
  margin-bottom: 0.16in;
}
.cob-organizer__id-field {
  display: flex;
  align-items: baseline;
  gap: 0.06in;
  font-size: 9px;
}
.cob-organizer__id-label {
  flex: 0 0 auto;
  color: var(--charcoal);
  font-weight: 600;
}
.cob-organizer__id-line {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--mid-gray);
  height: 0.18in;
  display: inline-block;
}
.cob-organizer__prompt {
  background: #f4ede0;
  border-left: 3px solid var(--gold);
  padding: 0.1in 0.18in 0.12in;
  margin-bottom: 0.18in;
}
.cob-organizer__prompt-label {
  margin: 0 0 0.04in;
  font-family: var(--font-heading);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dark-navy);
}
.cob-organizer__prompt-text {
  margin: 0 0 0.06in;
  font-family: var(--font-heading);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--charcoal);
}
.cob-organizer__prompt-instr {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 9px;
  color: var(--mid-gray);
}
.cob-organizer__legend {
  margin-bottom: 0.16in;
}
.cob-organizer__legend-title {
  margin: 0 0 0.05in;
  font-family: var(--font-heading);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-navy);
}
.cob-organizer__legend-row {
  display: inline-flex;
  align-items: center;
  gap: 0.05in;
  margin-right: 0.18in;
  margin-bottom: 0.04in;
}
.cob-organizer__legend-chip {
  display: inline-block;
  padding: 0.025in 0.1in;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 0.55in;
  text-align: center;
}
.cob-organizer__legend-chip--yellow { background: #fff5b8; border: 1px solid #d4b545; color: #5a4a12; }
.cob-organizer__legend-chip--red    { background: #fcd9d2; border: 1px solid #a85040; color: #6f3528; }
.cob-organizer__legend-chip--green  { background: #d2e8d2; border: 1px solid #4a7d4a; color: #2f5a2f; }
.cob-organizer__legend-text {
  font-size: 8.5px;
  color: var(--charcoal);
}
.cob-organizer__boxes {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cob-organizer__box {
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  margin-bottom: 0.06in;
  padding: 0.06in 0.08in 0.05in;
  page-break-inside: avoid;
  break-inside: avoid;
}
.cob-organizer__box-header {
  display: flex;
  align-items: center;
  gap: 0.08in;
  padding-bottom: 0.04in;
  border-bottom: 1px solid #d8d0bb;
  margin-bottom: 0.05in;
}
.cob-organizer__box-tag {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.02in 0.08in;
  border-radius: 1.5px;
  font-family: var(--font-heading);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-width: 0.5in;
  text-align: center;
}
.cob-organizer__box-tag--claim      { background: #fff5b8; border: 1px solid #d4b545; color: #5a4a12; }
.cob-organizer__box-tag--evidence   { background: #fcd9d2; border: 1px solid #a85040; color: #6f3528; }
.cob-organizer__box-tag--analysis   { background: #d2e8d2; border: 1px solid #4a7d4a; color: #2f5a2f; }
.cob-organizer__box-tag--conclusion { background: #1a2332; border: 1px solid #1a2332; color: var(--white); }
.cob-organizer__box-instr {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 8.5px;
  color: var(--mid-gray);
  line-height: 1.35;
}
.cob-organizer__box-lines {
  display: block;
}
.cob-organizer__box-lines span {
  display: block;
  border-bottom: 0.5px solid #d8d0bb;
  height: 0.22in;
}

/* PRINT-ONLY rules (R64): clone-to-body-level approach. When the user
   hits Print, JS clones the organizer into a body-level #cob-print-host
   div and sets body.cob-printing-organizer. Everything else on the page
   is then hidden via display:none so no other content contributes
   layout to the printed output. The `display:none` (not visibility:hidden)
   is the load-bearing fix — visibility:hidden preserved layout space
   and produced 100+ blank pages after the organizer.

   The old @media print rules (commented out) used visibility:hidden
   and tried to position the organizer absolutely, which caused
   pagination cascades through every page in the book. */
@media print {
  @page {
    size: letter;
    margin: 0.4in 0.4in 0.4in 0.4in;
  }
  body.cob-printing-organizer > *:not(#cob-print-host) {
    display: none !important;
  }
  body.cob-printing-organizer #cob-print-host {
    display: block !important;
    margin: 0;
    padding: 0;
  }
  body.cob-printing-organizer #cob-print-host .cob-organizer {
    background: #ffffff;
    padding: 0;
    box-shadow: none;
  }
  body.cob-printing-organizer #cob-print-host .cob-organizer__header {
    margin: 0 0 0.18in;
    padding: 0.14in 0.2in 0.16in;
  }
  /* Make sure no body children we're hiding accidentally cause page
     breaks via their CSS. */
  body.cob-printing-organizer { background: #ffffff !important; }
}

.t1-finish__ack {
  text-align: center;
  padding: 1rem 0 0;
  border-top: 1px dashed rgba(26, 35, 50, 0.15);
  margin-top: 0.5rem;
}
.t1-finish__ack-prompt {
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-style: italic;
  color: var(--mid-gray);
  margin: 0 0 0.7rem;
}
.t1-finish__ack-btn {
  background: var(--gold);
  color: var(--dark-navy);
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.4rem;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.t1-finish__ack-btn:hover {
  background: #e9b73e;
  transform: translateY(-1px);
}
.t1-finish__ack-btn:active { transform: translateY(0); }
.t1-finish__ack-btn[disabled] {
  background: rgba(26, 35, 50, 0.1);
  color: var(--mid-gray);
  cursor: default;
  transform: none;
}
.t1-finish__ack-confirm {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #2f5a2f;
  margin: 0.85rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.t1-finish__ack-check {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(74, 125, 74, 0.18);
  color: #2f5a2f;
  text-align: center;
  line-height: 22px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .t1-finish__structure-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .t1-finish__structure-tag {
    width: max-content;
  }
}

.t1-saved-indicator {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6a8e3f;
  opacity: 0;
  transition: opacity 0.3s;
}
.t1-saved-indicator[data-t1-visible="true"] { opacity: 1; }

/* Stage 1 done-state CTA (move to next stage) */
.t1-stage-progress {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--dark-navy);
  color: var(--cream);
  border-radius: 4px;
  text-align: center;
}
.t1-stage-progress__msg {
  font-family: var(--font-body);
  font-size: 0.93rem;
  margin-bottom: 0.6rem;
  color: rgba(245, 240, 224, 0.92);
}
.t1-stage-progress__msg strong { color: var(--gold); }
.t1-stage-progress__cta {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  background: var(--gold);
  color: var(--dark-navy);
  border: none;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
}
.t1-stage-progress__cta:hover {
  background: #d4b860;
}
.t1-stage-progress__cta[disabled],
.t1-stage-progress__cta[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Locked-stage placeholders (Stages 2/3/4 not built yet) */
.t1-locked-stage {
  text-align: center;
  padding: 3rem 2rem;
  background: #fdfaef;
  border: 2px dashed #d8d0bb;
  border-radius: 4px;
  color: var(--mid-gray);
  font-family: var(--font-body);
}
.t1-locked-stage__icon {
  font-size: 2.5rem;
  margin-bottom: 0.6rem;
  opacity: 0.6;
}
.t1-locked-stage__title {
  font-family: var(--font-display, var(--font-heading));
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 600;
  color: var(--dark-navy);
  margin: 0 0 0.5rem;
}
.t1-locked-stage__msg {
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}

/* Activity controls (reset, etc.) */
.t1-controls {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid #d8d0bb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.t1-reset-btn {
  background: transparent;
  color: var(--mid-gray);
  border: 1px solid #d8d0bb;
  padding: 0.5rem 1rem;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
}
.t1-reset-btn:hover {
  color: var(--dark-red);
  border-color: var(--dark-red);
}
.t1-controls__hint {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--mid-gray);
}

/* Page-35 CTA into the activity uses the established .end-option pattern
   (already defined elsewhere in the stylesheet). No bespoke styles needed.
   The wrapper just provides a centered max-width since this isn't sitting
   inside an end-options grid. */
.t1-page35-cta-wrap {
  max-width: 580px;
  margin: 1.6rem auto 0.8rem;
}

/* Print rules — Tier 1 activity is interactive-only; in print mode,
   render a brief notice instead of the full activity. */
@media print {
  .t1-activity__opener,
  .t1-stage-bar,
  .t1-stage-content,
  .t1-controls { display: none !important; }
  .t1-print-notice {
    display: block !important;
    padding: 2in 0.5in;
    text-align: center;
    font-style: italic;
    color: #555;
  }
}

/* The next-source button was removed in Round 39 (post-feedback) — the
   visual progression is now: completing a source unlocks the next tab,
   the student clicks the tab. No redundant button.
   See .t1-section--questions header subtitle below for the inline
   completion indicator that replaces it. */

/* Mobile responsiveness — narrower viewports stack tabs vertically */
@media (max-width: 640px) {
  .t1-source-tabs { flex-direction: column; padding: 4px; }
  .t1-source-tab {
    min-width: 0;
    text-align: left;
    padding: 0.65rem 0.85rem;
  }
  .t1-source-recap { flex-direction: column; align-items: flex-start; }
  .t1-stage { padding: 0.7rem 0.3rem 0.6rem; gap: 0.25rem; }
  .t1-stage__num { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; }
  .t1-stage__name { font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; }
  .t1-stage__icon-slot { width: 20px; height: 20px; }
}
/* === END Tier 1 Writing Activity Pattern CSS === */

  /* Foreword — Newman's standalone thesis line + closing line */
  .foreword-thesis {
    text-align: center;
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--dark-navy);
    margin: 2.5rem 0;
    padding: 0;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .foreword-closing {
    font-style: italic;
    color: var(--dark-navy);
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(20,32,51,0.15);
    line-height: 1.6;
  }

  .foreword-ai-note {
    background: rgba(184, 148, 92, 0.08);
    border-left: 3px solid var(--gold, #b8945c);
    padding: 1.5rem 1.75rem;
    margin: 3rem 0 1rem;
    border-radius: 4px;
    color: var(--charcoal, #2a2a2a);
  }
  .foreword-ai-note__title {
    font-family: var(--font-heading, Georgia, serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--dark-navy);
    margin: 0 0 0.85rem;
    letter-spacing: 0.01em;
  }
  .foreword-ai-note p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 0.85rem;
  }
  .foreword-ai-note p:last-child {
    margin-bottom: 0;
  }
  .foreword-signature {
    margin-top: 2.5rem;
    text-align: right;
    font-family: var(--font-display, Georgia, serif);
  }
  .foreword-signature__name {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--dark-navy);
    letter-spacing: 0.02em;
  }
  .foreword-signature__date {
    font-size: 0.9rem;
    color: rgba(20,32,51,0.55);
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
  }

  .chapter-opener__byline {
    font-size: 0.95rem;
    color: rgba(20,32,51,0.65);
    font-style: italic;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
  }
  .callout__epigraph {
    margin: 0 0 1.5rem 0;
    padding: 0 0 1.25rem 0;
    border-bottom: 1px solid rgba(20,32,51,0.15);
    text-align: center;
    quotes: none;
  }
  .callout__epigraph::before, .callout__epigraph::after { content: none; }
  .callout__epigraph-text {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--dark-navy);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
  }
  .callout__epigraph-attr {
    font-size: 0.9rem;
    color: rgba(20,32,51,0.7);
    margin: 0;
    letter-spacing: 0.05em;
  }

/* ============================================================================
   Player-card 3D flip + back-of-card "analytical view" (R97 — Batch 6, v64)
   ============================================================================ */
.player-card-flip {
  position: relative;
  perspective: 1800px;
  margin: 0 0 1.5rem 0;
}

.player-card-flip__inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4, .2, .2, 1);
}

.player-card-flip.is-flipped .player-card-flip__inner {
  transform: rotateY(180deg);
}

.player-card-flip__face {
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  cursor: pointer;
}

/* Interactive descendants of the face restore default cursor / their own cursor */
.player-card-flip__face .dichotomy-tag,
.player-card-flip__face .player-card-back__chip,
.player-card-flip__face .player-card-back__chip-popup,
.player-card-flip__face .player-card-flip__toggle,
.player-card-flip__face a,
.player-card-flip__face button {
  cursor: pointer;
}

/* Front face sets the natural height of the card */
.player-card-flip__face--front {
  position: relative;
  margin: 0;
}

/* Back face fills the card; internal scroll for overflow */
.player-card-flip__face--back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: rotateY(180deg);
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar styling for the back face (Webkit) */
.player-card-flip__face--back::-webkit-scrollbar {
  width: 8px;
}
.player-card-flip__face--back::-webkit-scrollbar-track {
  background: rgba(200, 168, 75, 0.08);
  border-radius: 4px;
}
.player-card-flip__face--back::-webkit-scrollbar-thumb {
  background: rgba(200, 168, 75, 0.55);
  border-radius: 4px;
}
.player-card-flip__face--back::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 168, 75, 0.8);
}

/* ---------------------------------------------------------------------------
   v66 fixes for the non-visible face:
   (1) The wrong-side toggle button is removed from the DOM via display:none
       rather than just hidden via backface-visibility. Eliminates the
       mirrored-ghost rendering issue entirely (the element doesn't exist
       in the rendering tree, so there's no backface to leak through).
   (2) pointer-events:none on the non-visible face — the back is always
       physically positioned over the front (position:absolute;inset:0), so
       without this rule the invisible back intercepts wheel events meant
       for the page when the mouse is over the card on the front side.
   --------------------------------------------------------------------------- */

/* Hide the to-front toggle while the card is showing the front
   (it lives on the back face — should not render until flipped). */
.player-card-flip:not(.is-flipped) .player-card-flip__toggle--to-front {
  display: none;
}

/* Hide the to-back toggle while the card is flipped to the back
   (it lives on the front face — should not render after flipping). */
.player-card-flip.is-flipped .player-card-flip__toggle--to-back {
  display: none;
}

/* During the flip animation, hide BOTH toggles. The CSS rules above
   would otherwise instantly reveal the new toggle at T=0, but the card
   takes 700ms to rotate — so during the first half of the animation, the
   newly-revealed toggle would render on a face that's still rotated away
   from the viewer, appearing as a mirrored ghost. The is-mid-flip class
   is added at flip start and removed at T=420ms (60% of the animation,
   comfortably past the edge-on midpoint), so the correct toggle reveals
   itself only once its face is facing the viewer. */
.player-card-flip.is-mid-flip .player-card-flip__toggle {
  display: none !important;
}

/* Disable pointer events on the non-visible face, so wheel/click events
   pass through to the page (or to the visible face below) instead of being
   captured by the invisible-but-physically-present overlay face. */
.player-card-flip:not(.is-flipped) .player-card-flip__face--back {
  pointer-events: none;
}

.player-card-flip.is-flipped .player-card-flip__face--front {
  pointer-events: none;
}

/* Toggle buttons (inside each face, top-right corner) */
.player-card-flip__toggle {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 5px 10px 5px 8px;
  background: rgba(247, 240, 220, 0.95);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--dark-navy);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  /* Hide when the parent face is rotated away — fixes the mirrored-ghost
     toggle showing through on the wrong side. position:absolute creates a
     stacking context that doesn't inherit backface-visibility from the face. */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.player-card-flip__toggle:hover,
.player-card-flip__toggle:focus-visible {
  background: var(--gold);
  color: var(--dark-navy);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.14);
}

.player-card-flip__toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.35);
}

.player-card-flip__toggle-icon {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.player-card-flip__toggle-label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Reserve right-padding on the front-face header lines so the analytical-view
   toggle (absolute, top:10px right:12px, ~145px wide with label) doesn't
   overlap the name/dates/years text. Covers both markup patterns:
   (h4 + .player-card__head wrapper) and (bare h3.player-card__name with
   inline years). The mobile-icon-only override is in the @media block below. */
.player-card-flip__face--front .player-card__head,
.player-card-flip__face--front .player-card__name {
  padding-right: 160px;
}

/* Back-of-card surface */
.player-card-back {
  display: block;
  background:
    linear-gradient(180deg, rgba(245, 234, 208, 0.55), rgba(248, 241, 222, 0.7)),
    var(--cream);
  border: 1px solid rgba(200, 168, 75, 0.45);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.4);
  padding: 1.4rem 1.5rem 1.2rem 1.5rem;
  font-family: var(--font-body);
  color: var(--dark-navy);
}

/* Back header — pill centered above name+overline */
.player-card-back__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.7rem;
  margin: 0 3rem 0.9rem 3rem; /* leave room for top-right toggle, top-left mirror */
  border-bottom: 1px solid rgba(200, 168, 75, 0.35);
  text-align: center;
}

.player-card-back__chain-pill {
  display: inline-block;
  padding: 4px 14px;
  margin-bottom: 0.55rem;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.player-card-back__chain-pill--mixed {
  background: linear-gradient(90deg, var(--gold), var(--dark-red));
}

.player-card-back__chain-pill--liberating {
  background: linear-gradient(90deg, var(--gold), #5a8a4c);
}

.player-card-back__chain-pill--destructive {
  background: linear-gradient(90deg, var(--dark-red), #4a2a2a);
}

.player-card-back__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
  color: var(--dark-navy);
  line-height: 1.15;
}

.player-card-back__years {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--mid-gray);
  margin-left: 0.4rem;
}

.player-card-back__overline {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-red);
  font-weight: 600;
  margin-top: 0.3rem;
}

.player-card-back__section {
  margin-bottom: 1rem;
}

.player-card-back__section:last-of-type {
  margin-bottom: 0;
}

.player-card-back__section-title {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-red);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  padding: 0;
}

/* Chip rows (Influences, Influenced) */
.player-card-back__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
}

.player-card-back__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 4px 11px;
  background: rgba(255, 250, 230, 0.85);
  border: 1px solid rgba(200, 168, 75, 0.55);
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: var(--font-body);
  color: var(--dark-navy);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  line-height: 1.3;
}

.player-card-back__chip:hover,
.player-card-back__chip:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-navy);
  outline: none;
  transform: translateY(-1px);
}

.player-card-back__chip[aria-expanded="true"] {
  background: var(--dark-navy);
  border-color: var(--dark-navy);
  color: var(--cream);
}

.player-card-back__chip-mod {
  font-size: 0.7rem;
  color: var(--mid-gray);
  font-style: italic;
  letter-spacing: 0;
}

.player-card-back__chip[aria-expanded="true"] .player-card-back__chip-mod {
  color: rgba(247, 240, 220, 0.7);
}

/* Chip bio popup */
.player-card-back__chip-popup {
  position: absolute;
  z-index: 100;
  max-width: 320px;
  padding: 10px 14px;
  background: var(--dark-navy);
  color: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
  pointer-events: auto;
}

.player-card-back__chip-popup::before {
  content: "";
  position: absolute;
  top: -7px;
  /* Arrow horizontal position is set per-popup via the --popup-arrow-left CSS
     variable, computed in JS from the trigger chip's center. Falls back to 18px
     for older browsers / safety. R101 fix — was hardcoded left: 18px which made
     the arrow always point to the same spot regardless of which chip opened it. */
  left: var(--popup-arrow-left, 18px);
  width: 12px;
  height: 12px;
  background: var(--dark-navy);
  border-left: 1px solid var(--gold);
  border-top: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* Timeline — no internal scroll now, since whole back scrolls */
.player-card-back__timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.2rem;
  border-left: 2px solid rgba(200, 168, 75, 0.5);
}

.player-card-back__timeline li {
  display: flex;
  gap: 0.7rem;
  padding: 0.3rem 0 0.3rem 0.6rem;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.35;
}

.player-card-back__timeline li::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--cream);
}

.player-card-back__timeline-item--marker::before {
  background: var(--dark-red) !important;
  width: 11px !important;
  height: 11px !important;
  left: -6.5px !important;
  top: 0.5rem !important;
  box-shadow: 0 0 0 3px rgba(168, 75, 75, 0.2);
}

.player-card-back__timeline-item--dark::before {
  background: #2c1a1a !important;
}

.player-card-back__year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark-red);
  flex-shrink: 0;
  width: 4rem;
  letter-spacing: 0.01em;
}

.player-card-back__event {
  flex: 1;
  color: var(--dark-navy);
}

.player-card-back__timeline-item--dark .player-card-back__year {
  color: #2c1a1a;
}

/* Chain explanation */
.player-card-back__chain-note {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: rgba(255, 250, 230, 0.6);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  color: var(--dark-navy);
}

/* Dichotomy rows on back */
.player-card-back__dichs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-card-back__dich-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.35rem 0;
}

.player-card-back__dich-row .dichotomy-tag {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.player-card-back__dich-note {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--dark-navy);
}

/* Print: front only */
@media print {
  .player-card-flip__toggle { display: none !important; }
  .player-card-flip__face--back { display: none !important; }
  .player-card-flip__inner { transform: none !important; }
  .player-card-flip__face--front {
    position: relative !important;
    transform: none !important;
  }
  .player-card-back__chip-popup { display: none !important; }
}

/* Mobile breakpoint */
@media (max-width: 1000px) {
  .player-card-flip__toggle-label { display: none; }
  .player-card-flip__toggle {
    padding: 6px 8px;
  }
  /* On mobile the toggle is icon-only (~30px). Tighter reservation. */
  .player-card-flip__face--front .player-card__head,
  .player-card-flip__face--front .player-card__name {
    padding-right: 40px;
  }
  .player-card-back {
    padding: 1.1rem 1.1rem 1rem 1.1rem;
  }
  .player-card-back__head {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
  .player-card-back__year {
    width: 3.5rem;
    font-size: 0.8rem;
  }
}

/* ============================================================
   R101 — Earth-tone palette overrides for RBF tree (LOCKED)
   These override the prior var(--brown) / var(--blue) / var(--dark-red)
   values used on rbf-band labels with the locked R100 earth tones:
   ROOTS brown #5a4220, BRANCHES green #2d4a2e, FRUIT ruby red #7a2530.
   ============================================================ */
.rbf-band--root .rbf-band__label { background: #5a4220; color: var(--cream); }
.rbf-band--root .rbf-band__body { background: #ede5d3; }
.rbf-band--branch .rbf-band__label { background: #2d4a2e; color: var(--cream); }
.rbf-band--branch .rbf-band__body { background: #dde6dc; }
.rbf-band--fruit .rbf-band__label { background: #7a2530; color: var(--cream); }
.rbf-band--fruit .rbf-band__body { background: #ecd9d8; }

/* Apply to rbf-cols as well so the abstract teaching version matches */
.rbf-col--roots .rbf-col__head,
.rbf-col--root .rbf-col__head { background: #5a4220; color: var(--cream); }
.rbf-col--branches .rbf-col__head,
.rbf-col--branch .rbf-col__head { background: #2d4a2e; color: var(--cream); }
.rbf-col--fruit .rbf-col__head { background: #7a2530; color: var(--cream); }

/* ============================================================
   R101 — Ruler-row container (chapter open / close / split-state)
   For the Three Rulers icons on the Ch 1 roadmap (all state 0)
   and the §1.6 chapter close (paired before/after).
   ============================================================ */
.ruler-row {
  display: grid;
  grid-template-columns: 12rem auto auto auto 1fr;
  gap: 0.85rem 1.1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  background: #142033;
  border-radius: 8px;
  margin: 0.85rem 0;
}
.ruler-row--single { grid-template-columns: 12rem auto 1fr; }
.ruler-row__name {
  color: var(--cream);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.ruler-row__name-sub {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}
.ruler-row__icon {
  width: 110px;
  height: 110px;
  background: #142033;
  border: 1px solid #3a4866;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.ruler-row__icon:hover {
  border-color: #c8a84b;
  box-shadow: 0 0 12px rgba(200,168,75,0.25);
  transform: translateY(-1px);
}
.ruler-row__icon:focus-visible {
  outline: 2px solid #c8a84b;
  outline-offset: 2px;
}
.ruler-row__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ruler-row__arrow {
  color: #c8a84b;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}
.ruler-row__caption {
  color: var(--cream);
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.92;
}
.ruler-row__caption strong { color: #c8a84b; font-weight: 600; }
.ruler-rows-block {
  margin: 1.25rem 0;
}
.ruler-rows-block__head {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  color: var(--dark-navy);
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}
@media (max-width: 720px) {
  .ruler-row { grid-template-columns: 1fr; }
  .ruler-row--single { grid-template-columns: 1fr; }
  .ruler-row__icon { width: 88px; height: 88px; margin: 0 auto; }
  .ruler-row__arrow { display: none; }
}

/* ============================================================
   R101 — Game Board (LOCKED — from RBF_vs_RPS_Prototype_v4)
   Structural-snapshot pattern. Once per chapter at SP#2 position.
   Replaces the old §1.1c rbf-tree-styled "Medieval Game" chart.
   Visually distinct from rbf-tree: dark slate + gold + columnar.
   ============================================================ */
.game-board {
  background: #1a2540;
  border: 2px solid #c8a84b;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1.5rem;
  margin: 1.5rem 0;
  color: var(--cream);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  position: relative;
}
.game-board__head { text-align: center; margin-bottom: 1.25rem; }
.game-board__overline {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,240,220,0.65);
  margin-bottom: 0.35rem;
}
.game-board__title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.85rem;
  color: #c8a84b;
  margin: 0 0 0.25rem 0;
  font-weight: 600;
}
.game-board__subtitle {
  font-style: italic;
  font-size: 0.92rem;
  opacity: 0.78;
}
.game-board__columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  position: relative;
}
.game-board__column {
  padding: 0 0.9rem;
  border-right: 1px solid rgba(200,168,75,0.32);
}
.game-board__column:last-child { border-right: none; }
.game-board__col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid rgba(200,168,75,0.4);
}
.game-board__col-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.game-board__col-icon svg { width: 100%; height: 100%; display: block; }
.game-board__col-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.1rem;
  margin: 0;
  color: #c8a84b;
  font-weight: 600;
}

.rule-item {
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dotted rgba(200,168,75,0.18);
}
.rule-item:last-child { border-bottom: none; }
.rule-item__text {
  font-style: italic;
  margin: 0 0 0.45rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.dichotomy-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  background: rgba(200,168,75,0.13);
  border: 1px solid rgba(200,168,75,0.45);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #c8a84b;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.dichotomy-chip:hover { background: rgba(200,168,75,0.22); transform: translateY(-1px); }
.dichotomy-chip__arrow { opacity: 0.7; }

.game-board .player-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem;
  margin-bottom: 0.7rem;
  background: rgba(20,32,51,0.6);
  border: 1px solid rgba(200,168,75,0.3);
  border-radius: 8px;
  transition: opacity 0.25s ease, box-shadow 0.2s ease,
              transform 0.15s ease, border-color 0.2s ease,
              background 0.2s ease;
  cursor: pointer;
}
.game-board .player-card:hover {
  background: rgba(20,32,51,0.85);
  border-color: rgba(200,168,75,0.55);
}
.game-board .player-card__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: #142033;
  border: 1px solid #3a4866;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.game-board .player-card__icon:hover {
  border-color: #c8a84b;
  box-shadow: 0 0 10px rgba(200,168,75,0.30);
}
.game-board .player-card__icon svg { width: 100%; height: 100%; display: block; }
.game-board .player-card__body {
  min-width: 0;
}
.game-board .player-card__name {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--cream);
  margin-bottom: 0.15rem;
}
.game-board .player-card__domain {
  font-size: 0.78rem;
  opacity: 0.78;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.game-board .player-card__tag {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.player-card__tag--king,
.player-pill--king { background: rgba(200,168,75,0.22); color: #c8a84b; border: 1px solid rgba(200,168,75,0.55); }
.player-card__tag--pope,
.player-pill--pope { background: rgba(178,58,72,0.22); color: #d97581; border: 1px solid rgba(178,58,72,0.55); }
.player-card__tag--belief,
.player-pill--belief { background: rgba(199,192,168,0.18); color: #c7c0a8; border: 1px solid rgba(199,192,168,0.45); }
.player-card__tag--noble,
.player-pill--noble { background: rgba(74,101,133,0.22); color: #84a4c7; border: 1px solid rgba(74,101,133,0.55); }
.player-card__tag--bishop,
.player-pill--bishop { background: rgba(106,58,122,0.22); color: #b888c9; border: 1px solid rgba(106,58,122,0.55); }
.player-card__tag--merchant,
.player-pill--merchant { background: rgba(74,122,58,0.22); color: #92c47a; border: 1px solid rgba(74,122,58,0.55); }
.player-card__tag--peasant,
.player-pill--peasant { background: rgba(122,85,32,0.22); color: #c7a070; border: 1px solid rgba(122,85,32,0.55); }

/* Glow halo for ruler-tier player cards in Game Board */
.game-board .player-card:has(.player-card__tag--king) .player-card__icon,
.game-board .player-card:has(.player-card__tag--pope) .player-card__icon,
.game-board .player-card:has(.player-card__tag--belief) .player-card__icon {
  border-color: rgba(200,168,75,0.55);
  box-shadow: 0 0 12px rgba(200,168,75,0.30);
}

.strategy-item {
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.45;
  border-radius: 6px;
  background: rgba(20,32,51,0.4);
  cursor: pointer;
  position: relative;
  transition: opacity 0.25s ease,
              background 0.2s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
}
/* Highlighted strategies render above dimmed ones during the slide animation */
.game-board[data-active-player="king"]     .strategy-item:has(.player-pill--king),
.game-board[data-active-player="pope"]     .strategy-item:has(.player-pill--pope),
.game-board[data-active-player="belief"]   .strategy-item:has(.player-pill--belief),
.game-board[data-active-player="noble"]    .strategy-item:has(.player-pill--noble),
.game-board[data-active-player="bishop"]   .strategy-item:has(.player-pill--bishop),
.game-board[data-active-player="merchant"] .strategy-item:has(.player-pill--merchant),
.game-board[data-active-player="peasant"]  .strategy-item:has(.player-pill--peasant) {
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .strategy-item { transition: opacity 0.2s ease, background 0.2s ease; }
}
.strategy-item:hover { background: rgba(20,32,51,0.7); }
.player-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: 0.07em;
}

/* Player <-> Strategy click-linking (uses :has() — supported in modern browsers) */
.game-board[data-active-player] .player-card,
.game-board[data-active-player] .strategy-item {
  opacity: 0.30;
}
.game-board[data-active-player="king"]     .player-card:has(.player-card__tag--king),
.game-board[data-active-player="pope"]     .player-card:has(.player-card__tag--pope),
.game-board[data-active-player="belief"]   .player-card:has(.player-card__tag--belief),
.game-board[data-active-player="noble"]    .player-card:has(.player-card__tag--noble),
.game-board[data-active-player="bishop"]   .player-card:has(.player-card__tag--bishop),
.game-board[data-active-player="merchant"] .player-card:has(.player-card__tag--merchant),
.game-board[data-active-player="peasant"]  .player-card:has(.player-card__tag--peasant) {
  opacity: 1;
  border-color: #c8a84b;
  box-shadow: 0 0 14px rgba(200,168,75,0.40);
  transform: translateY(-1px);
}
.game-board[data-active-player="king"]     .strategy-item:has(.player-pill--king),
.game-board[data-active-player="pope"]     .strategy-item:has(.player-pill--pope),
.game-board[data-active-player="belief"]   .strategy-item:has(.player-pill--belief),
.game-board[data-active-player="noble"]    .strategy-item:has(.player-pill--noble),
.game-board[data-active-player="bishop"]   .strategy-item:has(.player-pill--bishop),
.game-board[data-active-player="merchant"] .strategy-item:has(.player-pill--merchant),
.game-board[data-active-player="peasant"]  .strategy-item:has(.player-pill--peasant) {
  opacity: 1;
  /* Fully opaque solid background — slight lift from game-board bg #1a2540 — so the
     sliding card reads cleanly when it passes over dimmed strategies underneath. */
  background: #243156;
  border: 1px solid rgba(200,168,75,0.40);
}

@media (max-width: 720px) {
  .game-board__columns { grid-template-columns: 1fr; gap: 1rem; }
  .game-board__column { border-right: none; border-bottom: 1px solid rgba(200,168,75,0.25); padding-bottom: 1rem; }
  .game-board__column:last-child { border-bottom: none; }
}

/* ============================================================
   R102 — Ruler-info popover (click any ruler icon for state info)
   ============================================================ */
.ruler-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,32,51,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 11000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ruler-info-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ruler-info {
  background: var(--cream, #f5efdc);
  border: 2px solid #c8a84b;
  border-radius: 10px;
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 14px 40px rgba(20,32,51,0.35);
  position: relative;
  transform: translateY(10px);
  transition: transform 0.22s ease;
}
.ruler-info-overlay.is-open .ruler-info {
  transform: translateY(0);
}
.ruler-info__close {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--mid-gray, #7a7a7a);
  cursor: pointer;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
}
.ruler-info__close:hover { background: rgba(0,0,0,0.06); color: var(--dark-navy, #142033); }
.ruler-info__head {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.95rem;
  padding-right: 1.5rem;
}
.ruler-info__icon {
  width: 78px;
  height: 78px;
  background: #142033;
  border: 1px solid #3a4866;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ruler-info__icon svg { width: 100%; height: 100%; display: block; }
.ruler-info__title-block { min-width: 0; }
.ruler-info__overline {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8a84b;
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.ruler-info__title {
  font-family: var(--serif, Georgia, serif);
  font-size: 1.4rem;
  margin: 0 0 0.1rem 0;
  color: var(--dark-navy, #142033);
  font-weight: 600;
}
.ruler-info__state {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--charcoal, #3a3a3a);
}
.ruler-info__state strong { color: #8e2a2a; font-style: normal; }
.ruler-info__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--charcoal, #3a3a3a);
}
.ruler-info__body p { margin: 0 0 0.7rem 0; }
.ruler-info__body p:last-child { margin-bottom: 0; }
.ruler-info__body em { color: #8e2a2a; font-style: italic; }

/* ============================================================
   R102 — Game Board widescreen float
   Click background → expand to widescreen modal-style view
   ============================================================ */
.game-board { cursor: zoom-in; }
.game-board.is-floated {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  z-index: 1300;
  margin: 0;
  cursor: default;
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
  padding: 1.5rem 1.75rem 2rem;
}
.game-board.is-floated .game-board__columns {
  gap: 0;
}
.game-board.is-floated .game-board__column {
  padding: 0 1.25rem;
}
.game-board.is-floated .game-board__title {
  font-size: 2.1rem;
}
.game-board-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,32,51,0.65);
  z-index: 1299;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.game-board-backdrop.is-active { opacity: 1; }
/* Expand/shrink toggle — static in markup, always visible at upper-right
   of the game-board. Icon swaps based on .is-floated state. */
.game-board__expand-toggle {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  background: rgba(20,32,51,0.6);
  border: 1px solid rgba(200,168,75,0.4);
  color: var(--cream, #f5efdc);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 3;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.game-board__expand-toggle:hover {
  background: rgba(200,168,75,0.25);
  border-color: #c8a84b;
  transform: translateY(-1px);
}
.game-board__expand-toggle:focus-visible {
  outline: 2px solid #c8a84b;
  outline-offset: 2px;
}
.game-board__expand-toggle-icon {
  width: 20px;
  height: 20px;
  display: block;
}
/* Inline state: show expand icon, hide shrink */
.game-board__expand-toggle-icon--shrink { display: none; }
/* Floated state: show shrink icon, hide expand */
.game-board.is-floated .game-board__expand-toggle-icon--expand { display: none; }
.game-board.is-floated .game-board__expand-toggle-icon--shrink { display: block; }
.game-board__float-hint {
  position: absolute;
  bottom: 0.75rem;
  right: 1.15rem;
  font-size: 0.72rem;
  color: rgba(247,240,220,0.55);
  font-style: italic;
  pointer-events: none;
}
.game-board.is-floated .game-board__float-hint { display: none; }
/* Hint also hidden on narrow screens to avoid clutter */
@media (max-width: 720px) {
  .game-board__float-hint { display: none; }
  .game-board { cursor: default; }
  .game-board.is-floated {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    top: 0;
    left: 0;
    transform: none;
    border-radius: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-board-backdrop { transition: none; }
}


/* ===== Tier-2 coach: THEN/NOW label chips + comparison pair ===== */
.t2-coach-label{display:flex;align-items:baseline;gap:0.6rem;margin:0.9rem 0;padding:0.5rem 0.9rem;border-radius:4px;border-left:4px solid var(--gold);background:rgba(193,154,91,0.10);}
.t2-coach-label--then{border-left-color:var(--med-navy);background:rgba(44,62,80,0.10);}
.t2-coach-label--now{border-left-color:var(--gold);background:rgba(193,154,91,0.12);}
.t2-coach-label__tag{font-family:var(--font-heading);font-weight:700;letter-spacing:0.14em;font-size:0.95rem;color:var(--dark-navy);}
.t2-coach-label--now .t2-coach-label__tag{color:var(--dark-gold,#8A6520);}
.t2-coach-label__sub{font-size:0.85rem;color:var(--charcoal);font-style:italic;}
.t2-coach-pair{display:flex;align-items:stretch;gap:0.5rem;margin:1.1rem 0;flex-wrap:wrap;}
.t2-coach-pair__side{flex:1 1 14rem;padding:0.8rem 1rem;border-radius:4px;border:1px solid rgba(44,62,80,0.25);background:var(--cream);}
.t2-coach-pair__side--then{border-top:3px solid var(--med-navy);}
.t2-coach-pair__side--now{border-top:3px solid var(--gold);}
.t2-coach-pair__tag{display:block;font-family:var(--font-heading);font-weight:700;letter-spacing:0.1em;font-size:0.8rem;margin-bottom:0.35rem;color:var(--dark-navy);}
.t2-coach-pair__side--now .t2-coach-pair__tag{color:var(--dark-gold,#8A6520);}
.t2-coach-pair__side p{margin:0;font-size:0.95rem;line-height:1.45;}
.t2-coach-pair__arrow{display:flex;align-items:center;font-size:1.6rem;color:var(--gold);padding:0 0.2rem;}
@media (max-width:560px){.t2-coach-pair__arrow{transform:rotate(90deg);justify-content:center;width:100%;}}

/* ===== Collapsing-band model (capstone Close Reading) ===== */
.t1-band{border:1px solid rgba(20,32,51,0.15);border-radius:6px;margin:0 0 0.9rem;overflow:hidden;background:var(--cream);}
.t1-band--reading{background:transparent;border:none;}
.t1-band__header{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:0.7rem 1rem;cursor:pointer;background:rgba(20,32,51,0.04);border-bottom:1px solid rgba(20,32,51,0.10);width:100%;border-left:none;border-right:none;border-top:none;text-align:left;font:inherit;color:inherit;-webkit-appearance:none;appearance:none;}
.t1-band__header:hover{background:rgba(20,32,51,0.08);}
.t1-band__title{font-family:var(--font-heading);font-weight:600;color:var(--dark-navy);font-size:0.98rem;flex:1;}
.t1-band__lead-icon{flex:0 0 22px;width:22px;height:22px;color:var(--gold-deep);display:inline-flex;align-items:center;}
.t1-band__lead-icon svg{width:100%;height:auto;display:block;}
.t1-band__chevron{width:12px;height:8px;display:inline-flex;align-items:center;justify-content:center;transition:transform 0.2s ease;flex:none;}
.t1-band[data-t1-open="true"] > .t1-band__header .t1-band__chevron{transform:rotate(180deg);}
/* R177 §1.2e: the viewer-band headers carry an inline SVG chevron (same as the
   step-1 reading-band headers). The base .t1-band__chevron rule ALSO draws a
   CSS-border arrow, so on the §1.2e page both stacked = a double-arrow artifact.
   Neutralize the border arrow here and let the inline SVG render cleanly, exactly
   like step 1. (The capstone solves this separately with its circular badge.)
   R247: give the step-2 chevron the SAME circular grey badge as the step-1
   (.t1-section__chevron) so the two steps look consistent. */
[data-page-id="ch1-act-1-2e"] .t1-band__chevron,
[data-page-id="ch1-act-1-2f"] .t1-band__chevron{
  width:22px;height:22px;border:none;transform:none;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  color:var(--dark-navy);
  background:rgba(20, 32, 51, 0.06);
  border-radius:50%;
  transition:transform 0.25s ease-out, background 0.18s;
}
[data-page-id="ch1-act-1-2e"] .t1-band__header:hover .t1-band__chevron,
[data-page-id="ch1-act-1-2f"] .t1-band__header:hover .t1-band__chevron{
  background:rgba(20, 32, 51, 0.12);
}
[data-page-id="ch1-act-1-2e"] .t1-band__chevron svg,
[data-page-id="ch1-act-1-2f"] .t1-band__chevron svg{width:11px;height:auto;display:block;}
[data-page-id="ch1-act-1-2e"] .t1-band[data-t1-open="true"] > .t1-band__header .t1-band__chevron,
[data-page-id="ch1-act-1-2f"] .t1-band[data-t1-open="true"] > .t1-band__header .t1-band__chevron{
  transform:rotate(180deg);
  background:var(--dark-navy);
  color:var(--cream);
}
.t1-band__body{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height 0.3s ease-out,opacity 0.2s ease-out,visibility 0s linear 0.3s;}
/* During a step advance we disable the collapse animation so the scroll-to-top
   measures a STABLE layout. Measuring mid-animation (the leaving band still
   shrinking) is what made the page overshoot then settle back. */
.t1-activity--snap-advance .t1-band__body{transition:none !important;}
.t1-activity--snap-advance .t1-section__body{transition:none !important;}
.t1-activity--snap-advance .t1-band{transition:none !important;}
/* R177: scroll-margin so a band/section heading lands below the sticky nav when
   scrolled to (used by scrollBandToTop's measure-and-scroll and any native
   scrollIntoView fallback). 70px nav + a little breathing room. */
.t1-band[data-t1-band]{scroll-margin-top:78px;}
.t2-section-group{scroll-margin-top:78px;}
.t1-band[data-t1-open="true"] > .t1-band__body{max-height:20000px;opacity:1;visibility:visible;transition:max-height 0.3s ease-out,opacity 0.2s ease-out,visibility 0s;}
/* The reading band has no header (it opens by default); show its content directly when open */
.t1-band--reading[data-t1-band-complete="true"] .t1-band__gate{display:none;}
/* Done-reading gate */
.t1-band__gate{display:flex;justify-content:flex-end;padding:0.4rem 0 0.8rem;}
.t1-band__done-btn{background:var(--dark-navy);color:var(--cream);border:none;border-radius:5px;padding:0.65rem 1.2rem;font-family:var(--font-heading);font-weight:600;font-size:0.95rem;cursor:pointer;transition:background 0.18s;}
.t1-band__done-btn:hover{background:var(--med-navy);}
/* Completed bands: collapsed summary look + read-only interior */
.t1-band[data-t1-band-complete="true"] > .t1-band__header{background:rgba(193,154,91,0.12);}
.t1-band[data-t1-band-complete="true"] > .t1-band__header .t1-band__title::after{content:" \2713";color:var(--dark-gold,#8A6520);font-weight:700;}
.t1-band[data-t1-band-complete="true"][data-t1-open="true"] .t1-band__body :is([data-coach-mc-options] button){pointer-events:none;opacity:0.6;}

/* Viewer band locked until "Done reading" */
.t1-band[data-t1-band-locked="true"]{opacity:0.55;}
.t1-band[data-t1-band-locked="true"] > .t1-band__header{cursor:not-allowed;}
.t1-band[data-t1-band-locked="true"] > .t1-band__header .t1-band__title::after{content:" \1F512";font-size:0.85em;opacity:0.7;}
.t1-band[data-t1-band-locked="true"] > .t1-band__body{max-height:0 !important;overflow:hidden;opacity:0 !important;visibility:hidden !important;}

/* Next Source button on a completed last band */
.t1-band__next-source-wrap{display:flex;justify-content:flex-end;padding:0.9rem 1rem 0.9rem;border-top:1px dashed rgba(20,32,51,0.15);margin-top:0.6rem;}
.t1-band__next-source-btn{background:var(--gold);color:var(--dark-navy);border:none;border-radius:5px;padding:0.65rem 1.4rem;font-family:var(--font-heading);font-weight:700;font-size:0.98rem;cursor:pointer;transition:background 0.18s;}
.t1-band__next-source-btn:hover{background:var(--gold-soft);color:var(--dark-navy);}

/* Numbered step square on the left edge of each band (1=document, 2=viewer, 3=writing) */
.t1-band{position:relative;}
.t1-band[data-t1-band-step]::before{
  content:attr(data-t1-band-step);
  position:absolute;left:0;top:0;width:34px;height:49px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--cream);
  background:var(--mid-gray);z-index:2;border-top-left-radius:6px;border-bottom-left-radius:6px;
}
.t1-band[data-t1-band-step="1"]::before{background:var(--blue);}
.t1-band[data-t1-band-step="2"]::before{background:var(--gold-soft);color:var(--dark-navy);}
.t1-band[data-t1-band-step="3"]::before{background:var(--red);}
/* Make room for the square: indent the band header + reading section header. */
.t1-band[data-t1-band-step] > .t1-band__header{padding-left:46px;}
.t1-band[data-t1-band-step] .t1-section__header{padding-left:46px;}
.t1-band[data-t1-band-step] .t1-band__gate{padding-left:46px;}
.t1-band[data-t1-band-step] > .t1-band__body{padding-left:46px;}
.t1-band[data-t1-band-step] .t1-section__body{padding-left:46px;}
.t1-band[data-t1-band-step] .t1-section--reading{margin-left:0;}
/* Think Aloud (viewer) bands: the step badge only occupies the header's
   top-left corner, so the coach content below it should span the FULL band
   width to match the section bar above — not sit indented 46px. */
.t1-band--viewer[data-t1-band-step] > .t1-band__body{padding-left:0;}
/* "Your turn" scored-question bands (Set B released sources) also span the
   full band width — the step badge only occupies the header corner, so the
   questions shouldn't sit indented 46px below it. */
.t1-band[data-t1-band-step]:has([data-scored-questions]) > .t1-band__body{padding-left:0;}
/* Released sources that use the gentle ORGANIZER for their "your turn" questions
   (e.g. agimet) get the same full-width treatment as scored-question bands: the
   questions span the band edge-to-edge, and the organizer drops its inset card
   chrome so it doesn't read as a narrow box floating inside the band. */
.t1-band[data-t1-band-step]:has([data-t1-organizer]) > .t1-band__body{padding-left:0;}
.t1-band[data-t1-band-step] > .t1-band__body > .t1-organizer{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
}
/* Inside a "your turn" question band, the organizer choice buttons match the
   capstone's scored-question look: white background (not cream), so source 3's
   released questions read the same as the capstone's released source 3. */
.t1-band[data-t1-band-step] > .t1-band__body > .t1-organizer .t1-organizer__choice{
  background:#ffffff;
}
.t1-band[data-t1-band-step] > .t1-band__body > .t1-organizer .t1-organizer__choice:hover{
  background:#fff5d6;
}
/* And each QUESTION sits in its own light panel, mirroring the capstone's
   .scored-q__item: warm off-white fill, lavender border, rounded, subtle shadow.
   Without this the released questions read as bare text on the page instead of
   the "each question pops in its own card" look the capstone uses. */
.t1-band[data-t1-band-step] > .t1-band__body > .t1-organizer .t1-organizer__question{
  background: rgba(255, 250, 235, 0.98);
  border: 1.5px solid rgba(184, 155, 223, 0.55);
  border-radius: 6px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 1.1rem;
}

/* Writing-panel bands are standalone activities (not numbered steps in a
   section). Suppress the step-number badge and its 46px indent so the inner
   activity header (t1-i-do / t1-finish) reads as the single heading. The
   outer section-group heading is removed in markup for these panels. */
.t1-writing-panel .t1-band[data-t1-band-step]::before{display:none;}
.t1-writing-panel .t1-band[data-t1-band-step] > .t1-band__header,
.t1-writing-panel .t1-band[data-t1-band-step] .t1-section__header,
.t1-writing-panel .t1-band[data-t1-band-step] .t1-band__gate,
.t1-writing-panel .t1-band[data-t1-band-step] > .t1-band__body,
.t1-writing-panel .t1-band[data-t1-band-step] .t1-section__body{padding-left:0;}
.t1-writing-panel .t2-section-group{margin-top:0;}
/* WCAG: writing activities sit on WHITE (not cream-on-cream), so the
   builder/finish content and its cream-tinted children have a clean,
   high-contrast backdrop. Scoped to the standalone writing panels only —
   the in-source §1.2e instances are unaffected. */
.t1-writing-panel .t1-band__body{background:#ffffff;border-radius:6px;padding-top:0;overflow:hidden;}
.t1-writing-panel .wp-builder{background:#ffffff;border-color:rgba(26,35,50,0.16);border-top:none;border-top-left-radius:0;border-top-right-radius:0;}
.t1-writing-panel .wp-builder__candidate{background:#fbf8f2;}
.t1-writing-panel .t1-finish__intro,
.t1-writing-panel .t1-finish{background:transparent;}
/* The Writing Quiz (t1-finish) has no internal padding of its own (unlike the
   wp-builder). On the white band body, the navy HEADER should span the full
   width (flush to the box edges, rounded top matching the box), while the
   content BELOW the header gets breathing room from the edges. */
.t1-writing-panel .t1-finish{padding:0 0 1.4rem;}
.t1-writing-panel .t1-finish > *:not(.t1-i-do__header){margin-left:1.4rem;margin-right:1.4rem;}
.t1-writing-panel .t1-finish > .t1-finish__intro{margin-top:1.25rem;}

/* Section groups (Sourcing / Contextualization / Close Reading / Writing) */
.t2-section-group{margin:0 0 1.4rem;}
/* Space BETWEEN section groups so a completed band's "Next Step/Next Source"
   button isn't cramped against the following section's heading (R178). The
   first section group needs no extra top gap. */
.t2-section-group + .t2-section-group{margin-top:2rem;}
.t2-section-group__heading{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;color:var(--cream);margin:1.6rem 0 0.6rem;padding:0.55rem 1rem;background:var(--dark-navy);border-radius:6px;border-left:4px solid var(--gold);letter-spacing:0.01em;display:flex;align-items:center;gap:0.5rem;}
/* R177: per-move color code on section headings (matches the §1.2e intro cards):
   Sourcing = blue, Context = amber, Close Reading = red. Hits §1.2e + capstone. */
.t2-section-group[data-t1-section-group$=":sourcing"]  > .t2-section-group__heading{border-left-color:var(--blue);}
.t2-section-group[data-t1-section-group$=":context"]   > .t2-section-group__heading{border-left-color:var(--gold);}
.t2-section-group[data-t1-section-group$=":closeread"] > .t2-section-group__heading{border-left-color:var(--red);}
.t2-section-group__heading-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;}
.t2-section-group__heading-icon svg{width:20px;height:20px;}
.t2-section-group[data-t1-section-group$=":sourcing"]  > .t2-section-group__heading .t2-section-group__heading-icon{color:#8FB4D9;}
.t2-section-group[data-t1-section-group$=":context"]   > .t2-section-group__heading .t2-section-group__heading-icon{color:var(--gold);}
.t2-section-group[data-t1-section-group$=":closeread"] > .t2-section-group__heading .t2-section-group__heading-icon{color:#E69A9A;}
/* Attribution block (Sourcing reading) */
.t2-attribution{font-family:var(--font-body,inherit);}
.t2-attribution__line{margin:0.3rem 0;font-size:1rem;line-height:1.5;}
.t2-attribution__key{display:inline-block;min-width:92px;font-weight:700;color:var(--gold-deep);text-transform:uppercase;font-size:0.72rem;letter-spacing:0.06em;vertical-align:baseline;}
.t2-attribution__note{margin-top:0.9rem;padding-top:0.7rem;border-top:1px dashed rgba(20,32,51,0.18);font-style:italic;color:var(--mid-gray);font-size:0.95rem;}

.t2-context-read p{margin:0.5rem 0;line-height:1.6;font-size:1rem;}
.t2-context-read strong{color:var(--dark-navy);}

/* Reading-band number square: its header is taller than a viewer header, so
   give the square the reading-header height to fill the collapsed bar. */
.t1-band--reading[data-t1-band-step]::before{height:62px;}

/* Standardize viewer (band) chevrons to match the reading (section) chevron —
   circular badge — within the Tier-2 capstone only. */
[data-page-id="ch1-act-cap"] .t1-band__chevron{
  width:22px;height:22px;border:none;transform:none;background:rgba(20,32,51,0.12);
  color:var(--dark-navy);border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;flex:none;transition:transform 0.2s ease,background 0.2s ease;
}
[data-page-id="ch1-act-cap"] .t1-band__chevron svg{width:11px;height:auto;display:block;}
[data-page-id="ch1-act-cap"] .t1-band[data-t1-open="true"] > .t1-band__header .t1-band__chevron{
  transform:rotate(180deg);background:var(--dark-navy);color:var(--cream);border:none;
}

/* Completion checkmark on completed READING bands (step 1: Sourcing / Context),
   matching the viewer bands' checkmark. Reading bands use t1-section__header /
   t1-section__label-main rather than t1-band__title, so they need their own rule. */
[data-page-id="ch1-act-cap"] .t1-band--reading[data-t1-band-complete="true"] .t1-section__label-main::after{
  content:" \2713";color:var(--dark-gold,#8A6520);font-weight:700;
}

/* Always-visible section headings: locked sections show a greyed heading with a
   lock cue; their bands stay hidden until the section is reached, then unfold. */
.t2-section-group[data-t1-section-locked="true"] > .t2-section-group__heading{
  background:rgba(20,32,51,0.45);color:rgba(244,234,213,0.7);border-left-color:rgba(193,154,91,0.45);
}
.t2-section-group[data-t1-section-locked="true"] > .t2-section-group__heading::after{
  content:" \1F512";font-size:0.78em;opacity:0.8;
}
/* Hide every band inside a locked section (children after the heading). */
.t2-section-group[data-t1-section-locked="true"] > .t1-band{display:none;}

/* Number square corners: rounded both left corners when collapsed; bottom-left
   goes sharp when the band is open (content follows below it). */
.t1-band[data-t1-band-step][data-t1-open="true"]::before{border-bottom-left-radius:0;}
.t1-band--reading[data-t1-band-step] .t1-section--reading[data-t1-open="true"] ~ *::before{}
.t1-band--reading[data-t1-band-step]:has(.t1-section--reading[data-t1-open="true"])::before{border-bottom-left-radius:0;}

/* Question panel slides out BELOW the controls so the camera animation isn't
   pushed down when a question appears — the student watches the move in place,
   then scrolls down to answer. Flex column + order reorders panel after controls. */
[data-coach-pane="watch"]{display:flex;flex-direction:column;}
[data-coach-pane="watch"] > .coach-window{order:0;}

/* Next button becomes a flashing "Q" when a question is waiting below the
   controls — cues the student to scroll down and answer. */
.coach-controls__next--question{position:relative;background:var(--gold,#C8A84B);border-color:var(--gold,#C8A84B);animation:coachQpulse 1.1s ease-in-out infinite;}
.coach-controls__next--question .coach-controls__icon{opacity:0;}
.coach-controls__next--question::after{
  content:"Q";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--dark-navy);
}
@keyframes coachQpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,0.55);}
  50%{box-shadow:0 0 0 7px rgba(200,168,75,0);}
}
@media (prefers-reduced-motion: reduce){
  .coach-controls__next--question{animation:none;}
}

/* =========================================================
   HAMBURGER MENU (top-nav, left of title) — added R220 (file-split step A)
   Opens a menu of links into hub.html sections + the About/Help pages.
   Reuses .top-nav__menu / .top-nav__menu-panel open/close machinery
   (the .is-open class is toggled by book.js, same as Version/Tools menus).
   ========================================================= */
.top-nav__menu--hamburger { margin-right: 0.35rem; display: flex; align-items: center; }
/* Left cluster: hamburger + title sit together so the nav's flex
   space-between keeps the title beside the hamburger (not centered). */
.top-nav__left { display: flex; align-items: center; gap: 0.4rem; }
.top-nav__hamburger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem 0.5rem; color: var(--gold, #C19A5B);
}
.top-nav__hamburger-btn:hover { color: #d9b878; }
/* The hamburger is on the LEFT of the nav, so its panel must open to the
   right (left-anchored), unlike the right-side menus which use right:0. */
.top-nav__menu-panel--hamburger {
  min-width: 270px; max-width: 320px;
  left: 0; right: auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.hamburger-menu__group-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red, #8B1A1A); padding: 0.7rem 0.95rem 0.3rem;
}
/* Map / Chains items belong in the hamburger ONLY on mobile, where the top-nav
   hook icons are hidden. On desktop those icons live in the top nav, so these
   duplicate items are hidden. Mirror the 1000px breakpoint that hides the
   top-nav hook icons. Specificity must beat .hamburger-menu__item's display. */
.hamburger-menu__item.hamburger-menu__hook-only,
.hamburger-menu__group-label.hamburger-menu__hook-only { display: none; }
@media (max-width: 1000px) {
  .hamburger-menu__item.hamburger-menu__hook-only { display: flex; }
  .hamburger-menu__group-label.hamburger-menu__hook-only { display: block; }
}
.hamburger-menu__item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.55rem 0.95rem; text-decoration: none; color: var(--dark-navy, #142033);
  border-radius: 4px;
}
/* <button> hamburger items (Map, Chains) must look identical to the <a> items —
   strip the browser's default button chrome (grey bg, border, centring). */
button.hamburger-menu__item {
  background: none; border: none; width: 100%; text-align: left;
  font: inherit; cursor: pointer; box-shadow: none; appearance: none; -webkit-appearance: none;
}
.hamburger-menu__item:hover { background: rgba(20,32,51,0.05); }
.hamburger-menu__item strong { font-weight: 600; }
.hamburger-menu__item small { color: var(--mid-gray, #6E6454); font-size: 0.8rem; }
.hamburger-menu__icon {
  flex: 0 0 auto; width: 1.3em; text-align: center; color: var(--gold-deep, #7A5E12);
  font-size: 1rem; line-height: 1.4;
}

/* =========================================================
   TOC MOVED notice — the book's internal Contents page now
   redirects to the hub (file-split step 3, option B). Shown
   briefly before auto-redirect, and as a static fallback if
   redirect is blocked. Added R220.
   ========================================================= */
.toc-moved__notice { max-width: 560px; margin: 2rem auto 0; text-align: center; }
.toc-moved__lead { font-size: 1.05rem; color: var(--dark-navy); margin: 0 0 1.5rem; line-height: 1.5; }
.toc-moved__btn {
  display: inline-block; background: var(--dark-navy); color: var(--cream);
  padding: 0.7rem 1.4rem; border-radius: 5px; text-decoration: none; font-weight: 600;
  border: 1px solid var(--gold);
}
.toc-moved__btn:hover { background: var(--blue, #3D5A80); }
.toc-moved__sub { font-size: 0.85rem; color: var(--mid-gray); margin: 1.25rem 0 0; }
.toc-moved__sub a { color: var(--gold-deep, #7A5E12); }

/* End-of-chapter "coming soon" option — muted to read as not-yet-available
   while keeping the card shape. Added R220 (For Teachers restructure). */
.end-option--soon { opacity: 0.72; }
.end-option--soon .end-option__cta {
  color: var(--mid-gray);
  font-style: italic;
}
.end-option--soon:hover { opacity: 0.85; }

/* Glossary results inside the search popup (R220). A definition shown inline
   so the reader gets the answer without leaving the page. */
.search-popup__result--gloss {
  display: block; cursor: default; text-align: left;
  background: var(--off-white); border-left: 3px solid var(--gold);
  padding: 0.7rem 0.85rem; margin-bottom: 0.4rem; border-radius: 4px;
}
.search-popup__gloss-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.3rem; }
.search-popup__gloss-term { font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; font-size: 1.02rem; color: var(--dark-navy); }
.search-popup__gloss-phon { font-size: 0.8rem; font-style: italic; color: var(--mid-gray); }
.search-popup__gloss-tag { font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 3px; padding: 0.05rem 0.35rem; }
.search-popup__gloss-def { font-size: 0.86rem; line-height: 1.45; color: #2c3848; }
.search-popup__gloss-def em { font-style: italic; }
.search-popup__gloss-heading {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
  color: var(--gold-deep); margin: 0.8rem 0 0.4rem; padding-top: 0.6rem;
  border-top: 1px solid var(--light-gray);
}

/* Per-source breakdown inside the score popover (R220). Lets a teacher see
   how a student did on each source within an activity. */
.score-history-popover__breakdown {
  list-style: none; margin: 0 0 0.4rem; padding: 0.4rem 0 0.2rem 0.8rem;
  border-left: 2px solid var(--gold);
}
.score-history-popover__bd-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem;
  padding: 0.3rem 0;
}
.score-history-popover__bd-src {
  flex: 1 1 auto; font-size: 12px; color: var(--dark-navy); font-weight: 600;
}
.score-history-popover__bd-score {
  flex: 0 0 auto; font-family: var(--font-heading); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.score-history-popover__bd-score[data-score-state="green"] { color: #2f5a2f; }
.score-history-popover__bd-score[data-score-state="yellow"] { color: #6e5012; }
.score-history-popover__bd-score[data-score-state="red"] { color: #6f3528; }
.score-history-popover__bd-score[data-score-state="neutral"] { color: rgba(26,35,50,0.5); }
.score-history-popover__bd-stages {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem;
  margin-top: 0.1rem;
}
.score-history-popover__bd-stage {
  font-size: 11px; color: var(--mid-gray); font-variant-numeric: tabular-nums;
}

/* ============================================================
   Game-board embed mode (?gbexpand=1)
   The marketing lander iframes this page to show ONLY the real,
   floated game board. Hide all book chrome; the floated board +
   its backdrop sit above everything and remain fully interactive.
   ============================================================ */
.gb-embed-mode .top-nav,
.gb-embed-mode .page-nav,
.gb-embed-mode .focus-report,
.gb-embed-mode .focus-indicator,
.gb-embed-mode .first-visit-toast { display: none !important; }
/* Neutralize the normal page padding/scroll so the backdrop fills the frame */
.gb-embed-mode, .gb-embed-mode body { background: var(--dark-navy, #1a2332) !important; }
.gb-embed-mode .book-main, .gb-embed-mode .page-content { margin: 0 !important; }