/* OsteoStrong Academy shared styles. Dark base + orange accent.
   Palette mirrors Exec Dash (#0E1217 / #161B22) so Academy feels like
   the same family of apps as Coach Dash + Exec Dash. Page-hero gradients
   and the .level-gold "Bone Builder Master" banner stay light on purpose
   so they pop against the dark canvas. */

* { box-sizing: border-box; }
:root {
  /* Surfaces — GitHub dark exact (canvas-default / canvas-subtle).
     Goes deeper than Coach Dash/Exec Dash on purpose: Academy is a
     long-reading surface, John wants near-black to spare his eyes. */
  --bg:        #0D1117;
  --surface:   #161B22;
  --surface-2: #1A1F2A;

  /* Text — GitHub dark fg tokens */
  --text:        #E6EDF3;
  --text-soft:   #8B949E;
  --text-mute:   #6E7681;

  /* Borders — GitHub dark border tokens */
  --border:    #21262D;
  --border-2:  #30363D;

  /* Brand + status */
  --orange:    #f08124;
  --orange-2:  #d96f17;
  --green:     #10B981;
  --red:       #EF4444;

  /* Legacy aliases — older inline styles reference var(--navy), var(--cream),
     etc. Remapped to dark equivalents so existing pages render correctly
     without touching every inline style. */
  --navy:      #E6EDF3;   /* was page-fg/primary-text */
  --navy-2:    #8B949E;   /* was secondary-heading */
  --cream:     #1A1F2A;   /* was light tint background */
  --cream-2:   #21262D;   /* was lighter hover background */
  --line:      #21262D;   /* was light border */
  --line-2:    #30363D;   /* was slightly darker border */
  --gray:      #8B949E;
  --gray-2:    #6E7681;

  --shadow:    0 1px 0 rgba(255,255,255,0.02), 0 6px 16px rgba(0,0,0,0.45);
}
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

.topbar {
  background: var(--surface); color: var(--text);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--border);
}
.topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: 0.3px; }
.topbar .brand small { font-weight: 400; opacity: 0.7; margin-left: 4px; }
.topbar nav { margin-left: auto; display: flex; gap: 18px; align-items: center; }
.topbar nav a { color: var(--text-soft); font-size: 14px; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--orange); font-weight: 600; }
.topbar .who { font-size: 13px; color: var(--text-soft); }
.topbar .who .logout { color: var(--text-soft); opacity: 0.7; margin-left: 8px; cursor: pointer; }

.shell { max-width: 1080px; margin: 0 auto; padding: 24px 20px 80px; }
.shell.narrow { max-width: 720px; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 18px 20px; color: var(--text);
}
.card + .card { margin-top: 14px; }

h1 { font-size: 26px; margin: 0 0 6px; color: var(--text); }
h2 { font-size: 19px; margin: 0 0 8px; color: var(--text); }
h3 { font-size: 16px; margin: 0 0 6px; color: var(--text); }
p  { margin: 0 0 8px; }
.muted { color: var(--text-soft); font-size: 13px; }

.btn {
  display: inline-block; padding: 10px 18px;
  background: var(--orange); color: #fff; border: 0; border-radius: 8px;
  font-weight: 600; font-size: 14px; transition: background 0.15s;
}
.btn:hover { background: var(--orange-2); }
.btn:disabled { background: #3a3f47; color: #6b7280; cursor: not-allowed; }
.btn.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.btn.btn-secondary:hover { background: var(--surface-2); border-color: #3a4350; }
.btn.btn-ghost { background: transparent; color: var(--text); border: 0; }

.input, select, textarea {
  width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface-2); color: var(--text);
}
.input::placeholder, textarea::placeholder { color: var(--text-mute); }
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); border-color: var(--orange); }

.progress {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  height: 8px; overflow: hidden;
}
.progress > div { background: var(--orange); height: 100%; transition: width 0.3s; }

/* Default badge — dark chip; coloured variants below keep their light
   pill look so they pop against dark cards. */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.badge.green { background: #d6f0df; color: #1e6d3f; border-color: transparent; }
.badge.red   { background: #f5d8d4; color: #8a2419; border-color: transparent; }
.badge.gray  { background: #2A3340; color: var(--text-soft); border-color: transparent; }
.badge.gold  { background: #fbe5b6; color: #8a5a13; border-color: transparent; }

.footer-chip {
  position: fixed; bottom: 8px; right: 12px;
  font-size: 11px; color: var(--text-mute); font-family: monospace;
  background: rgba(22,27,34,0.85); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 999px;
}

.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 720px) {
  .grid.cols-2 { grid-template-columns: 1fr; }
}

table { width: 100%; border-collapse: collapse; }
table th, table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 14px; color: var(--text); }
table th { background: var(--surface-2); font-weight: 600; color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────
   Shared page-hero header (2026-05-30). Light pastel gradient strips on
   purpose — they pop against the dark canvas. Border-color override
   per family mirrors the .level-gold pattern.
   ────────────────────────────────────────────────────────────────────── */
.page-hero {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(15,23,42,0.08);
  background: var(--ph-body, var(--surface));
  box-shadow: var(--shadow);
}
.page-hero .ph-strip {
  background: var(--ph-strip, #e5e7eb);
  padding: 22px 26px 20px;
}
.page-hero .ph-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ph-mid, #6b6b6b);
  margin: 0 0 6px; line-height: 1;
}
.page-hero .ph-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ph-title, #1f2937); margin: 0 0 6px;
}
.page-hero .ph-subtitle {
  font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--ph-mid, #6b6b6b); margin: 0;
}
.page-hero.is-amber  { --ph-strip: linear-gradient(135deg, #FAE5B0 0%, #F0B048 50%, #B8821F 100%); --ph-body:#FAEEDA; --ph-title:#412402; --ph-mid:#854F0B; border-color:#854F0B; }
.page-hero.is-blue   { --ph-strip: linear-gradient(135deg, #B5D4F4 0%, #5B91D8 50%, #1E5FA8 100%); --ph-body:#E6F1FB; --ph-title:#0C447C; --ph-mid:#1E5FA0; border-color:#0C447C; }
.page-hero.is-coral  { --ph-strip: linear-gradient(135deg, #F5C4B3 0%, #D9743F 50%, #993C1D 100%); --ph-body:#FAECE7; --ph-title:#712B13; --ph-mid:#9C3D1A; border-color:#712B13; }
.page-hero.is-purple { --ph-strip: linear-gradient(135deg, #C9C4F1 0%, #897FCE 50%, #4F3F95 100%); --ph-body:#EEEDFE; --ph-title:#26215C; --ph-mid:#3C3489; border-color:#3C3489; }
@media (max-width: 480px) {
  .page-hero .ph-strip { padding: 16px 18px 14px; }
  .page-hero .ph-title { font-size: 22px; }
}

/* The Bone Builders — level badges + banner. Bone Builder Master (.level-gold)
   stays a sacred warm-gold gradient even on dark — see John's lock memo. */
.level-banner {
  padding: 20px 24px; border-radius: 12px; margin-bottom: 18px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.level-banner .level-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; opacity: 0.85; margin-bottom: 4px; }
.level-banner .level-name    { font-size: 26px; font-weight: 800; margin: 0 0 4px; line-height: 1.15; }
.level-banner .level-desc    { font-size: 14px; opacity: 0.9; margin-bottom: 8px; }
.level-banner .level-hint    { font-size: 13px; font-weight: 600; opacity: 0.95; }
.level-grey   { background: linear-gradient(135deg, #ebe7d8 0%, #d4cebd 100%); color: #4a4737; border-color: #c8c2af; }
.level-orange { background: linear-gradient(135deg, #ffd2a3 0%, var(--orange) 100%); color: #fff; border-color: var(--orange-2); }
.level-gold   { background: linear-gradient(135deg, #fcedb2 0%, #d4a843 100%); color: #4d3d0e; border-color: #b6892f; }
.level-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.level-badge.level-grey   { background: #ebe7d8; color: #4a4737; border-color: #d4cebd; }
.level-badge.level-orange { background: var(--orange); color: #fff; border-color: var(--orange-2); }
.level-badge.level-gold   { background: #d4a843; color: #fff; border-color: #b6892f; }

/* ──────────────────────────────────────────────────────────────────────
   Coach career-tier badges (migration 068): apprentice → foundation →
   coach → senior_coach → master. Distinct from the derived Bone Builder
   "level" above — this is the stored career rung shown on the profile,
   manager table, and tier-distribution widget. Bronze→silver→gold ramp,
   with master in deep emerald to read as "conferred, not earned by quiz".
   ────────────────────────────────────────────────────────────────────── */
.tier-badge {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.tier-apprentice        { background: #eceff1; color: #455a64; border-color: #cfd8dc; }
.tier-foundation        { background: #e8dcc6; color: #6b4f1d; border-color: #cdb389; }
.tier-coach             { background: #d7e3ef; color: #1f4e79; border-color: #aac4de; }
.tier-senior_coach      { background: linear-gradient(135deg, #fcedb2 0%, #d4a843 100%); color: #4d3d0e; border-color: #b6892f; }
/* 069 ladder: lead_coach (was master) + manager rungs. Emerald→slate ramp
   above senior so the "conferred, not quiz-earned" rungs read distinctly. */
.tier-lead_coach        { background: linear-gradient(135deg, #2f6f5e 0%, #1d4f42 100%); color: #fff; border-color: #133a30; }
.tier-master            { background: linear-gradient(135deg, #2f6f5e 0%, #1d4f42 100%); color: #fff; border-color: #133a30; } /* legacy alias */
.tier-assistant_manager { background: linear-gradient(135deg, #5b6fb5 0%, #34427a 100%); color: #fff; border-color: #28336b; }
.tier-manager           { background: linear-gradient(135deg, #4a3a78 0%, #2e2350 100%); color: #fff; border-color: #221a3e; }
.tier-owner             { background: linear-gradient(135deg, #3a3a3a 0%, #111 100%); color: #f4d774; border-color: #000; }

/* Tier status chips (profile + manager widgets). */
.tier-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.tier-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.tier-chip.chip-substate { background: #eef2f7; color: #38506b; border-color: #cdd9e6; }
.tier-chip.chip-info     { background: #eef6ee; color: #2c6e36; border-color: #c6e2c9; }
.tier-chip.chip-eligible { background: #fff3d6; color: #8a5a00; border-color: #e8c879; }
.tier-chip.chip-paused   { background: #eceff1; color: #546170; border-color: #cfd8dc; }
.tier-chip.chip-hold     { background: #ffe0dc; color: #a3281a; border-color: #f1b3aa; }

/* Tier banner on the profile (slimmer than the level-banner). */
.tier-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); margin-top: 8px;
}
.tier-strip .tier-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--gray); font-weight: 700; }
.tier-strip .tier-hint    { font-size: 12px; color: var(--text-soft); }
.tier-strip .tier-bar     { flex-basis: 100%; height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 2px; }
.tier-strip .tier-bar > div { height: 100%; background: linear-gradient(90deg, #d4a843, #c9a44c); }

/* Tier-distribution widget (manager). */
.tier-dist { display: flex; gap: 10px; flex-wrap: wrap; }
.tier-dist .td-cell {
  flex: 1; min-width: 96px; text-align: center; padding: 12px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.tier-dist .td-cell .td-count { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.tier-dist .td-cell .td-label { font-size: 11px; color: var(--text-soft); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.6px; }

/* Manager Analytics tier widgets (069): eligible / on-hold / probation. */
.tier-widget { margin-bottom: 14px; }
.tier-widget .tw-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--gray); font-weight: 700; margin-bottom: 10px; }
.tier-widget .tw-title .tw-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 11px; }
.tier-widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 4px; }
.tier-widget .tw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; }
.tier-widget .tw-row:first-of-type { border-top: 0; }
.tier-widget .tw-name  { font-weight: 600; color: var(--text); }
.tier-widget .tw-arrow { font-size: 12px; color: var(--text-soft); }
.tier-widget .tw-empty { font-size: 12px; color: var(--gray); font-style: italic; }

/* Hidden "ⓘ Tier requirements" legend accordion (Team Progress). */
.legend-link { font-size: 12px; font-weight: 700; color: var(--navy, #1f4e79); text-decoration: none; cursor: pointer; }
.legend-link:hover { text-decoration: underline; }
.legend-link.open::after { content: " ▲"; font-size: 9px; }
.legend-link:not(.open)::after { content: " ▼"; font-size: 9px; }
.legend-body { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.legend-row { display: grid; grid-template-columns: 160px 92px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border); }
.legend-row:first-child { border-top: 0; }
.legend-adv { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; align-self: center; }
.legend-adv.soft { color: #2c6e36; }
.legend-adv.hard { color: #8a5a00; }
.legend-crit { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-soft); line-height: 1.5; }

/* Course-section group headers on /courses. */
.course-section-head {
  margin: 26px 0 10px; padding: 0 2px;
  display: flex; align-items: baseline; gap: 10px;
}
.course-section-head:first-of-type { margin-top: 6px; }
.course-section-head h2 { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: 0.2px; margin: 0; }
.course-section-head .cs-count { font-size: 12px; color: var(--gray); font-weight: 600; }
.course-section-head .cs-rule { flex: 1; height: 1px; background: var(--border); }
.course-card.locked-course { opacity: 0.62; cursor: not-allowed; }
.course-card.locked-course .lock-note { font-size: 12px; font-weight: 700; margin-top: 6px; }

/* ──────────────────────────────────────────────────────────────────────
   Per-course brand color tokens. Each course gets a class like
   `course-color-amber` on its tile / player root / progress card. CSS
   vars are read by progress bars, breadcrumb links, Next/Prev outlines,
   quiz hero strips, and a `.course-dot` chip used in manager tables.
   Adding a new color = one block here; assigning it to a course =
   `brand_color` value in academy.courses (or the slug→color rotation
   in _shared.js for courses created before the column existed).
   ────────────────────────────────────────────────────────────────────── */
.course-color-amber  { --course-accent: #F0B048; --course-accent-deep: #854F0B; --course-accent-soft: #FAE5B0; }
.course-color-teal   { --course-accent: #1D9E75; --course-accent-deep: #04342C; --course-accent-soft: #9FE1CB; }
.course-color-blue   { --course-accent: #378ADD; --course-accent-deep: #042C53; --course-accent-soft: #B5D4F4; }
.course-color-coral  { --course-accent: #D85A30; --course-accent-deep: #4A1B0C; --course-accent-soft: #F5C4B3; }
.course-color-purple { --course-accent: #7F77DD; --course-accent-deep: #26215C; --course-accent-soft: #CECBF6; }
.course-color-green  { --course-accent: #639922; --course-accent-deep: #173404; --course-accent-soft: #C0DD97; }
.course-color-pink   { --course-accent: #D4537E; --course-accent-deep: #4B1528; --course-accent-soft: #F4C0D1; }
.course-color-gold   { --course-accent: #C9A44C; --course-accent-deep: #5A4209; --course-accent-soft: #F0E2B4; }

/* Course tile (on /courses): WHOLE-CARD brand color — gradient panel
   (soft → accent → deep) with 1px dark-outline border, mirroring the
   page-hero treatment so each tile reads as a vibrant brand panel
   against the dark page background. Text flips to the deep stop. */
.course-card[class*="course-color-"] {
  background: linear-gradient(135deg, var(--course-accent-soft) 0%, var(--course-accent) 50%, var(--course-accent-deep) 100%);
  border: 1px solid var(--course-accent-deep);
  color: var(--course-accent-deep);
}
.course-card[class*="course-color-"] .body h2,
.course-card[class*="course-color-"] .body h2 a,
.course-card[class*="course-color-"] .body p,
.course-card[class*="course-color-"] .meta { color: var(--course-accent-deep); }
.course-card[class*="course-color-"] .body h2 a:hover { color: var(--course-accent-deep); text-decoration: underline; }
.course-card[class*="course-color-"] .progress { background: rgba(255,255,255,0.35); border-color: var(--course-accent-deep); }
.course-card[class*="course-color-"] .progress > div { background: var(--course-accent-deep); }

/* Course player: hero, progress bar fill, breadcrumb link, Next button,
   active TOC item, and Quick Check accent all read the course accent. */
.course-player[class*="course-color-"] .progress > div   { background: var(--course-accent); }
.course-player[class*="course-color-"] .breadcrumb a     { color: var(--course-accent); }
.course-player[class*="course-color-"] .toc li.active    { border-left-color: var(--course-accent); }
.course-player[class*="course-color-"] .module-card.quiz { border-left-color: var(--course-accent); }
.course-player[class*="course-color-"] .quickcheck       { border-left-color: var(--course-accent); }
.course-player[class*="course-color-"] .quickcheck .qc-eyebrow { color: var(--course-accent); }
.course-player[class*="course-color-"] .qc-q label.selected    { border-color: var(--course-accent); }
.course-player[class*="course-color-"] .qc-progress span.active { background: var(--course-accent); }
.course-player[class*="course-color-"] .btn.btn-secondary       { border-color: var(--course-accent); color: var(--course-accent); }
.course-player[class*="course-color-"] .btn:not(.btn-secondary):not(.btn-ghost) { background: var(--course-accent); }
.course-player[class*="course-color-"] .btn:not(.btn-secondary):not(.btn-ghost):hover { background: var(--course-accent-deep); }
.course-player[class*="course-color-"] .final-hero { background: linear-gradient(135deg, var(--course-accent-soft) 0%, var(--course-accent) 100%); border-left-color: var(--course-accent-deep); }
.course-player[class*="course-color-"] .culm-hero  { background: linear-gradient(135deg, var(--course-accent-soft) 0%, var(--course-accent) 100%); border-left-color: var(--course-accent-deep); color: var(--course-accent-deep); }
.course-player[class*="course-color-"] .culm-hero h1 { color: var(--course-accent-deep); }

/* My Progress card: WHOLE-CARD brand gradient (mirrors .course-card on
   /courses) so the same course reads the same on both pages. */
.progress-card[class*="course-color-"] {
  background: linear-gradient(135deg, var(--course-accent-soft) 0%, var(--course-accent) 50%, var(--course-accent-deep) 100%);
  border: 1px solid var(--course-accent-deep);
  color: var(--course-accent-deep);
}
.progress-card[class*="course-color-"] h2,
.progress-card[class*="course-color-"] .muted { color: var(--course-accent-deep); }
.progress-card[class*="course-color-"] .progress {
  background: rgba(255,255,255,0.35);
  border-color: var(--course-accent-deep);
}
.progress-card[class*="course-color-"] .progress > div { background: var(--course-accent-deep); }
/* Status badges + Open button get a dark accent border so they still
   read against the soft end of the gradient (esp. amber). */
.progress-card[class*="course-color-"] .badge { border: 1px solid var(--course-accent-deep); }
.progress-card[class*="course-color-"] .btn.btn-secondary {
  color: var(--course-accent-deep);
  border-color: var(--course-accent-deep);
  background: rgba(255,255,255,0.35);
}

/* Color dot chip — used in Assignments tables + Analytics filter to
   show which brand color a course owns at a glance. */
.course-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 999px;
  background: var(--course-accent, var(--text-mute));
  border: 1px solid var(--course-accent-deep, var(--border-2));
  vertical-align: middle; margin-right: 6px;
}

/* Analytics header tint when scoped to a single course. */
.analytics-scoped[class*="course-color-"] .page-hero { border-color: var(--course-accent-deep); }
.analytics-scoped[class*="course-color-"] .page-hero .ph-strip { background: linear-gradient(135deg, var(--course-accent-soft) 0%, var(--course-accent) 100%); }
.analytics-scoped[class*="course-color-"] .page-hero .ph-title { color: var(--course-accent-deep); }
.analytics-scoped[class*="course-color-"] .page-hero .ph-eyebrow,
.analytics-scoped[class*="course-color-"] .page-hero .ph-subtitle { color: var(--course-accent-deep); }

/* OS Science section content — tables, figures, lists, callouts. */
.os-list { margin: 0 0 12px 22px; padding: 0; }
.os-list li { margin: 4px 0; line-height: 1.55; }
.os-sub { font-size: 16px; font-weight: 700; color: var(--text); margin: 18px 0 8px; }
.os-figure { margin: 16px 0; text-align: center; }
.os-figure img {
  max-width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
@media (min-width: 861px) {
  .os-figure img { max-width: 720px; }
}
.os-table-wrap { margin: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.os-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 6px; overflow: hidden;
}
.os-table th, .os-table td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); line-height: 1.5;
  color: var(--text);
}
.os-table th { background: var(--surface-2); font-weight: 700; color: var(--text); font-size: 13px; }
.os-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.os-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .os-table { font-size: 13px; }
  .os-table th, .os-table td { padding: 7px 9px; }
}

/* Coaching principle callout (Section 5C). Dark surface, orange spine. */
.coaching-callout {
  margin: 18px 0; padding: 16px 20px;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 6px solid var(--orange);
  border-radius: 8px; color: var(--text);
}
.coaching-callout .cc-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--orange);
  margin-bottom: 4px;
}
.coaching-callout .cc-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.coaching-callout p { margin: 0; font-size: 14px; line-height: 1.55; }

/* Quiz question chart image (Q20, Q21). */
.quiz-q .q-image {
  margin: 6px 0 10px; text-align: center;
}
.quiz-q .q-image img {
  max-width: 100%; height: auto; max-height: 360px;
  border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow);
}