/* Scopos Strategies — Native Courses Module
   Shared stylesheet for courses/ pages.
   Chrome styles (nav, page header) mirror courses.html so nav.js / footer.js
   render identically here. Site chrome stays dark; lesson reading surface is
   light ivory per the site's surface polarity. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:    #AC0014;
  --red-dk: #8a0010;
  --black:  #0D0D0D;
  --navy:   #081F5B;
  --ivory:  #F4F3F0;
  --ivory2: #ECEAE5;
  --mid:    #1a1a1a;
  --grey:   #2e2e2e;
  --muted:  #888888;
  --white:  #ffffff;
  --hairline: rgba(244,243,240,0.07);
  --ink:      #0D0D0D;
  --ink-soft: #3a3a3a;
  --ink-mute: #6b6862;
  --line-lt:  rgba(13,13,13,0.12);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-mark:    'Montserrat', sans-serif;

  --max-w: 1200px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }

/* ── NAV (desktop; mobile styles injected by nav.js) ──
   Scoped to #site-nav so semantic <nav> elements elsewhere on these pages
   (breadcrumbs, lesson prev/next) don't inherit the fixed chrome bar. */
#site-nav nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(13,13,13,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(172,0,20,0.2);
  height: 72px;
  display: flex;
  align-items: center;
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 32px; width: auto; }
.nav-wordmark {
  font-family: var(--font-mark);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,243,240,0.87);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--red); }

/* ── PAGE HEADER (dark) ── */
.page-header {
  padding-top: 72px;
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.page-header-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px 5% 48px;
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: block;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
}
.page-title em { font-style: normal; color: rgba(244,243,240,0.45); }
/* House two-tone: grey the setup phrase, keep the payoff in ivory. Locked treatment for main titles. */
.lesson-title em, .course-hero-title em { font-style: normal; color: rgba(244,243,240,0.45); }
.page-intro {
  margin-top: 18px;
  max-width: 560px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
}
.page-rule {
  width: 40px;
  height: 3px;
  background: var(--red);
  margin-top: 24px;
}

/* ── CATALOG GRID ── */
.catalog-section {
  flex: 1;
  background: var(--black);
  padding: 8px 5% 96px;
}
.catalog-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.course-card {
  display: flex;
  flex-direction: column;
  background: #111111;
  border: 1px solid var(--hairline);
  transition: border-color 0.2s, transform 0.2s;
}
a.course-card:hover,
a.course-card:focus-visible {
  border-color: rgba(172,0,20,0.55);
  transform: translateY(-2px);
  outline: none;
}
.course-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mid);
}
.course-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.55), transparent 55%);
}
/* Category chip — top-right of the cover; text set from the registry by course.js */
.course-card-chip {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ivory);
  background: rgba(13,13,13,0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(244,243,240,0.18);
  padding: 5px 9px; line-height: 1;
}
.course-card-chip:empty { display: none; }
.course-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.course-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.course-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin-bottom: 10px;
}
.course-card-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}
.course-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,243,240,0.55);
}
.course-card-meta .meta-done { color: #4CAF50; }
.course-card-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

/* Coming-soon card: typographic placeholder, no image */
.course-card.coming-soon { border-style: dashed; border-color: rgba(244,243,240,0.14); }
.course-card.coming-soon .course-card-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(244,243,240,0.03) 14px 15px),
    #101010;
}
.course-card.coming-soon .course-card-cover::after { content: none; }
.coming-soon-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(244,243,240,0.14);
  text-transform: uppercase;
  text-align: center;
}
.coming-soon-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(172,0,20,0.85);
  padding: 5px 12px;
  margin-bottom: 12px;
  align-self: flex-start;
}
/* In-development state: matches the homepage .tier-badge form (bordered pill,
   status dot, 9px mono) in red. Dot is static; the homepage CRRE badge does
   not pulse either. Scoped to .in-development so .coming-soon-tag and
   .coming-soon-tag.is-planned are untouched. */
.coming-soon-tag.in-development {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--red);
  background: rgba(172,0,20,0.06);
  border: 1px solid rgba(172,0,20,0.35);
  width: fit-content;
}
/* Planned state: same tier-badge form in muted grey, matching the homepage
   ERSE (tier-1) badge. Holds the planned cards visually behind the available
   courses and behind the in-development card. */
.coming-soon-tag.is-planned {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  background: rgba(136,136,136,0.06);
  border: 1px solid rgba(136,136,136,0.3);
  width: fit-content;
}
.coming-soon-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.coming-soon-tag.is-planned .coming-soon-dot { background: var(--muted); }

/* ── COURSE PAGE ── */
.course-hero {
  padding-top: 72px;
  background: var(--black);
  position: relative;
  overflow: hidden;
}
.course-hero-bg {
  position: absolute;
  inset: 72px 0 0 0;
}
.course-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.course-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13,13,13,0.96) 20%, rgba(13,13,13,0.55) 70%, rgba(13,13,13,0.35)),
              linear-gradient(to top, #0D0D0D 2%, transparent 45%);
}
.course-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 5% 64px;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
  display: block;
}
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span { color: rgba(244,243,240,0.28); padding: 0 6px; }
.course-hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ivory);
  max-width: 640px;
}
.course-hero-desc {
  margin-top: 20px;
  max-width: 520px;
  font-size: 17px;
  color: rgba(244,243,240,0.75);
  line-height: 1.7;
}
.course-hero-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.course-hero-meta .meta-done { color: #4CAF50; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--red);
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  min-height: 52px;              /* floor above both buttons' font-driven natural height; filled + ghost render equal */
  margin-top: 32px;
}
.btn-primary:hover { background: var(--red-dk); }
.btn-primary svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  background: none;
  border: 1px solid var(--red);
  cursor: pointer;
  min-height: 52px;              /* matches .btn-primary; both sit at this floor regardless of font size */
  transition: color 0.2s, background 0.2s;
}
.btn-ghost:hover { background: rgba(172,0,20,0.12); }

/* Syllabus */
.syllabus-section {
  flex: 1;
  background: var(--black);
  padding: 0 5% 96px;
}
.syllabus-inner { max-width: 860px; margin: 0 auto; }
.module-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;
}
.section-block { margin-top: 34px; }
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ivory);
  margin-bottom: 14px;
}
.lesson-list { list-style: none; }
.lesson-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: #111111;
  border: 1px solid var(--hairline);
  transition: border-color 0.2s;
}
.lesson-row + .lesson-row { margin-top: 10px; }
a.lesson-row:hover, a.lesson-row:focus-visible {
  border-color: rgba(172,0,20,0.55);
  outline: none;
}
.lesson-tick {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 1px solid rgba(244,243,240,0.25);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.lesson-tick svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.is-complete .lesson-tick {
  background: #1d3323;
  border-color: #4CAF50;
  color: #4CAF50;
}
.lesson-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lesson-row-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ivory);
  line-height: 1.2;
}
.lesson-row-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 11px;              /* breathing room between the lesson title and its meta row */
}
.lesson-row-go {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  flex-shrink: 0;
}

/* Lesson format manifest — locked component: ~time text + video/field-note/check icons.
   Icons carry accessible names in the markup; meaning never depends on hover. */
.lesson-format { display: inline-flex; align-items: center; gap: 12px; vertical-align: middle; }
.lesson-header-sub .lesson-format { margin-left: 10px; }
.lesson-format .fmt-time {
  position: relative;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); outline: none; transition: color 0.2s;
}
.lesson-format .fmt-time:hover, .lesson-format .fmt-time:focus-visible { color: var(--red); }
.lesson-format .fmt { position: relative; display: inline-flex; color: var(--muted); transition: color 0.2s; outline: none; }
.lesson-format .fmt:hover, .lesson-format .fmt:focus-visible { color: var(--red); }
/* Branded tooltip — reliable where the native title is not; name still carried by aria-label */
.lesson-format .fmt::after, .lesson-format .fmt-time::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ivory); background: #0D0D0D; border: 1px solid rgba(244,243,240,0.18);
  padding: 5px 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 30;
}
.lesson-format .fmt:hover::after, .lesson-format .fmt:focus-visible::after,
.lesson-format .fmt-time:hover::after, .lesson-format .fmt-time:focus-visible::after { opacity: 1; }
.lesson-format .fmt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lesson-format .fmt svg polygon { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.course-done-panel {
  margin-top: 40px;
  padding: 28px 28px 30px;
  background: #111111;
  border: 1px solid var(--hairline);
  border-top: 3px solid #4CAF50;
  display: none;
}
.course-done-panel.show { display: block; }
/* Final-check takeover: once every lesson is complete the check REPLACES the
   lesson list in place instead of stacking below it, so the completed state
   adds no page scroll. The list stays in the DOM (hidden, not removed) because
   the results panel reads lesson titles and hrefs off those rows. */
.syllabus-inner.check-takeover > .module-label,
.syllabus-inner.check-takeover > .section-block { display: none; }
.syllabus-inner.check-takeover > .course-done-panel { margin-top: 48px; }
.course-done-panel h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ivory);
  margin-bottom: 8px;
}
.course-done-panel p { font-size: 15px; color: var(--muted); margin-bottom: 20px; max-width: 520px; }
.course-done-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── LESSON PAGE ── */
.lesson-header {
  padding-top: 72px;
  background: var(--black);
}
.lesson-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 5% 36px;
}
.lesson-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ivory);
}
.lesson-header-sub {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;   /* context left, format pushed to the right margin */
  flex-wrap: wrap;
  gap: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.lesson-header-sub .lesson-format { margin-left: 0; }

/* Light reading surface */
.lesson-surface {
  flex: 1;
  background: var(--ivory);
  color: var(--ink);
  padding: 56px 5% 88px;
}
.lesson-surface-inner { max-width: 760px; margin: 0 auto; }

.video-frame {
  max-width: 900px;
  margin: 0 auto 56px;
}
.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border: 1px solid var(--line-lt);
  overflow: hidden;              /* clips the play mark's axis hairlines at the frame edge */
  container-type: inline-size;   /* the cqw unit the play overlay is drawn in */
}
.video-shell video,
.video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 1;
}
.video-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Lesson video: pre-play affordance (A-filled) ────────────────────
   Approved direction: 01-brand/sc-lesson-play-button-v2-mosaic.html (v2).
   Injected by course.js into every .video-shell holding a <video>, so it
   is identical on all 20 lessons across both Field Courses.

   The seal is the Attestation Seal's hexagon as a solid ivory stamp and
   the play triangle is brand red. Red clears the 3:1 floor for a
   graphical control ONLY because the plate under it is light (6.85:1 on
   the plate, 2.55:1 on the bare frame) — never render the red triangle
   straight onto the video frame. No stroke on the seal. No autoplay:
   playback starts on the user's click and nowhere else.

   Hit target: the WHOLE frame. inset:0 on the button is deliberate.
   ------------------------------------------------------------------ */
.video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
  transition: opacity 0.26s ease;
}
.video-play:focus { outline: none; }
.video-shell.is-playing .video-play { opacity: 0; pointer-events: none; }
/* An author `display` rule outranks the UA sheet's [hidden] { display: none },
   so without this the retired button stays in the tab order after playback. */
.video-play[hidden] { display: none; }

.vp-hexwrap { position: relative; display: block; line-height: 0; }
.vp-axis {
  position: absolute;
  top: 50%;
  height: 1px;
  width: 110cqw;
  background: rgba(244, 243, 240, 0.14);
  transform: translateY(-0.5px);
  transition: background 0.2s ease;
}
.vp-axis.l { right: calc(100% + 1.17cqw); }
.vp-axis.r { left:  calc(100% + 1.17cqw); }

.vp-mark  { display: block; width: clamp(88px, 15.56cqw, 148px); height: auto; }
.vp-plate { fill: var(--ivory); transition: fill 0.2s ease; }
.vp-tri   { fill: var(--red); stroke-linejoin: miter; }
.vp-label {
  display: block;
  margin-top: 2cqw;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: max(11px, 1.25cqw);   /* never under the 11px mono floor */
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.62);
  transition: color 0.2s ease;
}

/* Engaged. Focus carries the full hover state, not just the ring. */
.video-play:hover .vp-plate,
.video-play:focus-visible .vp-plate { fill: #ffffff; }
.video-play:hover .vp-axis,
.video-play:focus-visible .vp-axis  { background: rgba(172, 0, 20, 0.75); }
.video-play:hover .vp-label,
.video-play:focus-visible .vp-label { color: var(--ivory); }
.video-play:focus-visible .vp-hexwrap {
  outline: 2px solid var(--red);
  outline-offset: 1.1cqw;
}

@media (prefers-reduced-motion: reduce) {
  .video-play, .vp-axis, .vp-plate, .vp-label { transition-duration: 0.01ms; }
}
/* ── end lesson video pre-play affordance ─────────────────────────── */

.lesson-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 48px 0 18px;
}
.lesson-prose h2:first-child { margin-top: 0; }
.lesson-prose h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--red);
  margin-top: 12px;
}
.lesson-prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.lesson-prose strong { color: var(--ink); font-weight: 600; }
.lesson-prose em, .lesson-prose i { font-style: italic; }

/* Highlight chips (the three one-line cards) */
.chip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.chip {
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--red);
  background: var(--white);
  padding: 16px 16px 15px;
  text-align: center;
}
.chip p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

/* What / When / Where cards */
.field-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.field-card {
  background: var(--white);
  border: 1px solid var(--line-lt);
  padding: 22px 20px 20px;
}
.field-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.field-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ── QUIZ ── */
.quiz-block {
  margin-top: 56px;
  background: var(--white);
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--red);
  padding: 32px 32px 34px;
}
.quiz-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.quiz-block legend, .quiz-question {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 6px;
}
.quiz-scenario {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.quiz-options { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  background: var(--ivory);
  border: 1px solid var(--line-lt);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover:not(:disabled),
.quiz-option:focus-visible {
  border-color: var(--red);
  outline: none;
}
.quiz-option:disabled { cursor: default; }
.quiz-option .opt-key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  padding-top: 3px;
  flex-shrink: 0;
}
.quiz-option.is-correct {
  background: #eaf3ea;
  border-color: #4CAF50;
}
.quiz-option.is-correct .opt-key { color: #2e7d32; }
.quiz-option.is-wrong {
  background: #f7e9ea;
  border-color: var(--red);
  opacity: 0.9;
}
.quiz-option.is-dim { opacity: 0.45; }
/* Eliminated distractor: retired from the pool without revealing the answer. */
.quiz-option.is-eliminated {
  background: #f7e9ea;
  border-color: rgba(172,0,20,0.3);
  opacity: 0.5;
  cursor: default;
}
.quiz-option.is-eliminated .opt-key { color: var(--red); text-decoration: line-through; }
.fb-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-lt);
}
.fb-remaining {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
a.fb-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(172,0,20,0.4);
}
a.fb-source:hover { color: var(--red-dk); border-bottom-color: var(--red-dk); }
/* Right-hand pair inside the wrong-answer row: "review the source" (red, back
   to the prose) and "try again" (green, forward into a fresh attempt). Kept in
   one flex group so the remaining-options count stays pinned left. */
.fb-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
button.fb-retry {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2e7d32;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(46,125,50,0.45);
  padding: 0;
  cursor: pointer;
}
button.fb-retry:hover { color: #1b5e20; border-bottom-color: #1b5e20; }
button.fb-retry:focus-visible { outline: 2px solid #2e7d32; outline-offset: 3px; }
.quiz-feedback {
  display: none;
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--red);
  background: var(--ivory);
}
.quiz-feedback.show { display: block; }
.quiz-feedback.pass { border-left-color: #4CAF50; }
.quiz-feedback .fb-verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.quiz-feedback.pass .fb-verdict { color: #2e7d32; }
.quiz-feedback p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.quiz-retry { margin-top: 16px; }

/* Lesson completion panel */
.lesson-done {
  display: none;
  margin-top: 32px;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid var(--line-lt);
  border-top: 3px solid #4CAF50;
}
.lesson-done.show { display: block; }
.lesson-done h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px;
}
.lesson-done p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.lesson-done-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Prev / next strip */
.lesson-nav {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line-lt);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.lesson-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  transition: color 0.2s;
}
.lesson-nav a:hover { color: var(--red-dk); }

/* ── Course check + credential request (dark panel) ── */
.check-panel { border-top-color: var(--red); }
.check-panel.show { display: block; }
.check-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.check-eyebrow.pass { color: #4CAF50; }
.check-intro { font-size: 15px; color: var(--muted); max-width: 560px; margin-bottom: 22px; }
.check-fine { font-size: 13px; color: rgba(244,243,240,0.45); margin-top: 8px; }
.check-fine a { color: var(--red); }
.check-q { border: 0; padding: 0; margin: 0 0 22px; }
.check-q legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ivory);
  margin-bottom: 14px;
  padding: 0;
}
.check-qn { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--muted); margin-right: 12px; vertical-align: middle; }
.quiz-option.dark {
  background: #161616;
  border-color: rgba(244,243,240,0.12);
  color: var(--ivory);
}
.quiz-option.dark input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option.dark { position: relative; }
.quiz-option.dark:has(input:checked) { border-color: var(--red); background: #1c1414; }
.quiz-option.dark:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz-option.dark .opt-key { color: rgba(244,243,240,0.45); }
.quiz-option.dark.is-correct { background: #16261a; border-color: #4CAF50; }
.quiz-option.dark.is-wrong { background: #2b1114; border-color: var(--red); }
.quiz-option.dark.is-dim { opacity: 0.4; }
.check-panel .quiz-feedback { background: #161616; }
.check-panel .quiz-feedback p { color: rgba(244,243,240,0.7); }
/* Turnstile slot: only the LAST step renders it, directly above the button row.
   The bottom margin is the row's breathing space on that step, so it is set
   wide enough that the buttons never read as jammed under the widget. */
.ts-slot { margin: 18px 0 24px; min-height: 0; }
.check-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.check-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244,243,240,0.5);
  margin-top: 14px;
  min-height: 1.4em;
}
.check-status.ok { color: #4CAF50; }
.check-status.err { color: var(--red); }
.cred-form, .cred-sent, .cred-have { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.cred-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.cred-field { display: flex; flex-direction: column; gap: 6px; }
.cred-field span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cred-field input {
  background: var(--mid);
  border: 1px solid rgba(244,243,240,0.1);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
  width: 100%;
}
.cred-field input:focus { border-color: var(--red); }
.cred-optin { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; cursor: pointer; }
.cred-optin input { margin-top: 3px; accent-color: var(--red); flex-shrink: 0; width: 16px; height: 16px; }
.cred-optin span { font-family: var(--font-mono); font-size: 11px; color: rgba(244,243,240,0.45); letter-spacing: 0.04em; line-height: 1.6; }
@media (max-width: 620px) { .cred-fields { grid-template-columns: 1fr; } }

/* ── Final check, light card/step flow ──────────────────────────────
   Surface matches the lesson reading surface (ivory), and the wizard
   card, progress meter and step dots carry the IRRA intake form's
   visual language so the course and the assessment funnel read as one
   product. Opt-in per course page via .is-light; the dark panel above
   stays the default. */
.check-panel.is-light {
  background: var(--ivory);
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--red);
  color: var(--ink);
  padding: 40px 40px 44px;
}
.check-panel.is-light h3 { color: var(--ink); }
.check-panel.is-light .check-eyebrow { color: var(--ink-mute); }
.check-panel.is-light .check-eyebrow.pass { color: #2e7d32; }
.check-panel.is-light .check-intro { color: var(--ink-soft); }
.check-panel.is-light .check-fine { color: var(--ink-mute); }
.check-panel.is-light .check-fine a,
.check-panel.is-light .check-status.err { color: var(--red); }
.check-panel.is-light .check-status { color: var(--ink-mute); }
.check-panel.is-light .check-status.ok { color: #2e7d32; }
.check-panel.is-light .cred-form,
.check-panel.is-light .cred-sent,
.check-panel.is-light .cred-have { border-top-color: var(--line-lt); }
.check-panel.is-light .cred-field span { color: var(--ink-mute); }
.check-panel.is-light .cred-field input {
  background: var(--white);
  border: 1px solid var(--line-lt);
  color: var(--ink);
}
.check-panel.is-light .cred-field input:focus { border-color: var(--red); }
.check-panel.is-light .cred-optin span { color: var(--ink-mute); }
.check-panel.is-light .btn-ghost { color: var(--red); border-color: var(--red); }

/* Progress meter */
.check-progress { margin-bottom: 22px; }
.check-progress .progress-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.check-progress .progress-label,
.check-progress .progress-count,
.check-progress .progress-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.check-progress .progress-brand { color: var(--red); letter-spacing: 0.22em; text-align: center; }
.check-progress .progress-count { text-align: right; letter-spacing: 0.12em; }
.check-progress .step-dots { display: flex; gap: 4px; }
.check-progress .step-dot { height: 2px; flex: 1; background: rgba(13,13,13,0.12); transition: background 0.3s; }
.check-progress .step-dot.done { background: rgba(172,0,20,0.4); }
.check-progress .step-dot.active { background: var(--red); }

/* Wizard card: one question at a time */
.check-card {
  background: var(--white);
  border: 1px solid var(--line-lt);
  border-top: 2px solid var(--red);
  /* Bottom gap = top gap. The 40px top padding is the distance from the card's
     top edge to the question text, and the space under the Next/Back row is now
     the same 40px. The old 46px measured far wider than it read on paper because
     the status line under the row reserves its own height whether or not it
     carries a message: 46 + 14 margin + a ~15px empty line came out near 75px.
     That reserved line is folded into the 40px instead — 12 above it, an 18px
     line, 10px of card padding — so the resting gap is exactly 40px and the
     button row still never moves when a message appears. */
  padding: 40px 40px 10px;
  box-shadow: 0 4px 48px rgba(13,13,13,0.06);
}
/* margin-bottom:0 is load-bearing, not tidying: the status line is a <p> inside
   .course-done-panel, so it inherits that rule's 20px bottom margin (course.css:534)
   and was silently adding 20px under the card. Measured, not assumed. */
.check-card .check-status { margin-top: 12px; margin-bottom: 0; min-height: 18px; line-height: 18px; }
/* Breathing space above the Next/Back row on every wizard step. On the non-final
   steps the Turnstile slot that sits above the row is hidden (checkTurnstile.hidden
   = !last), so without this the button row falls flush against the last option.
   Scoped to .check-card = Off the Radar's card flow only; on the final step the
   shown Turnstile slot's bottom margin collapses with this, so it does not double. */
.check-card .check-actions { margin-top: 24px; }
.check-step { display: none; }
.check-step:focus { outline: none; }
.check-step.active { display: block; animation: checkStepIn 0.28s ease both; }
@keyframes checkStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.check-step .check-q { margin: 0; }
.check-panel.is-light .check-q legend {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.18;
  margin-bottom: 20px;
}
.check-panel.is-light .check-qn { color: var(--ink-mute); }
.check-panel.is-light .quiz-option.dark {
  background: var(--ivory);
  border-color: var(--line-lt);
  color: var(--ink);
}
.check-panel.is-light .quiz-option.dark:hover { border-color: rgba(13,13,13,0.3); background: var(--ivory2); }
.check-panel.is-light .quiz-option.dark .opt-key { color: var(--ink-mute); }

/* ── FINAL CHECK · SELECTED OPTION ──────────────────────────────────
   A picked answer must read CHOSEN, not wrong. The old selected state was
   a red border over a 5%-red wash, which is pixel-for-pixel the wrong-answer
   treatment used elsewhere (.quiz-option.is-wrong = pink fill + red rule), so
   choosing an answer looked like being told you had failed. Nothing red is
   used here. Selection is carried by ink instead: the row lifts off the ivory
   to white, takes a doubled ink rule (the inset shadow reads as 2px without
   changing the box, so the row never shifts), and the option letter inverts
   into a solid ink chip. Red stays reserved for what it means on this page —
   an error or a miss.

   The chip box is declared for BOTH states so selecting only swaps colours
   and never reflows the option row. */
.check-panel.is-light .quiz-option.dark .opt-key {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid var(--line-lt);
  background: var(--white);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.check-panel.is-light .quiz-option.dark:has(input:checked) {
  border-color: var(--ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.check-panel.is-light .quiz-option.dark:has(input:checked) .opt-key {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* Results card: every question, labelled Correct or Missed */
.check-results { display: block; }
.check-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.check-score .score-verdict { color: var(--red); }
.check-score .score-verdict.pass { color: #2e7d32; }
.check-missed { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.missed-item {
  border-left: 3px solid var(--red);
  background: var(--ivory);
  padding: 18px 20px;
}

/* ── FINAL CHECK · RESULTS, ALL TWENTY ──────────────────────────────
   The results list now carries every question, not the misses alone, so each
   item states its own verdict. Same structure for both, only the rule colour
   and the verdict word change: one list, two states, rather than two
   treatments. Green is the pass green already used by .score-verdict.pass. */
.missed-verdict {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.missed-item.is-correct { border-left-color: #2e7d32; }
.missed-item.is-correct .missed-verdict { color: #2e7d32; }
.missed-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.missed-item p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 10px; }
a.missed-source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid rgba(172,0,20,0.4);
}
a.missed-source:hover { color: var(--red-dk); }
.check-allright {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 18px;
}

/* Credential preview: the entry this credential creates on the student's
   LinkedIn profile, drawn in the Scopos design system. Deliberately NOT a
   replica of LinkedIn's card: LinkedIn's brand guidelines prohibit copying
   the platform's look and feel. Destination is named in Scopos type. */
/* Width is the measure of the paragraph directly above the card, so their right
   edges line up exactly. That measure is 520px and it is set by
   `.course-done-panel p` (course.css:534), NOT by the 560px that .check-intro
   declares — the generic rule is the more specific of the two, so inside this
   panel .check-intro's own max-width never applies. Measured, not assumed: at
   580px the card overhung the text by 60px, which read as a mistake rather than
   a choice. Keep this in step with line 534, not with .check-intro.
   Bottom margin is the panel's own top padding (40px), so the card is framed by
   the same gap above the "Final Check" meter that the panel gives its own top
   edge; 4px left the two all but touching. Both values track the panel, so the
   mobile block below restates them against the mobile padding rather than
   letting a desktop constant leak down. */
.cred-preview { margin: 26px 0 40px; max-width: 520px; }
.cred-preview-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.cred-preview-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line-lt);
  border-top: 3px solid var(--red);
  padding: 20px 22px 20px;
}
.cred-preview-mark {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
}
.cred-preview-mark img { width: 34px; height: 34px; display: block; }
.cred-preview-body { min-width: 0; }
.cred-preview-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.cred-preview-title span { color: var(--ink-mute); font-weight: 400; }
.cred-preview-issuer {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.cred-preview-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cred-preview-meta > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.cred-preview-meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 108px;
}
.cred-preview-meta dd {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  word-break: break-word;
}
.cred-preview-dest {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-lt);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cred-preview-dest b { color: var(--red); font-weight: 400; }
.cred-preview-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin-top: 12px;
  line-height: 1.8;
}
@media (max-width: 520px) {
  .cred-preview-card { flex-direction: column; gap: 14px; }
  .cred-preview-meta dt { min-width: 0; }
}

@media (max-width: 620px) {
  .check-panel.is-light { padding: 26px 18px 30px; }
  /* Same two rules as desktop, restated against the mobile paddings: the gap
     under the credential card is the panel's 26px top padding, and the gap under
     the button row is the card's 26px top padding (6 + a 16px status line + 4). */
  .cred-preview { margin-bottom: 26px; }
  .check-card { padding: 26px 18px 4px; }
  .check-card .check-status { margin-top: 6px; margin-bottom: 0; min-height: 16px; line-height: 16px; }
  .check-progress .progress-meta { grid-template-columns: 1fr; gap: 4px; }
  .check-progress .progress-brand, .check-progress .progress-count { text-align: left; }
}

/* ── Utility ── */
[hidden] { display: none !important; }

.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;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .chip-row, .field-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .chip-row, .field-cards { grid-template-columns: 1fr; }
  .quiz-block { padding: 24px 18px 26px; }
  .course-hero-inner { padding-top: 48px; padding-bottom: 48px; }
  .lesson-row { flex-wrap: wrap; }
  .lesson-row-go { width: 100%; text-align: right; }
}