/* /first-class — the practice missions.

   Layout only. Every colour resolves from a main.css token, so the bubbles,
   the rail and the tint over each photographed room all follow whichever theme
   the visitor picked rather than carrying a second palette to keep in sync.
   The one component fallback below protects a rolling cache where this file
   arrives before the main.css version that introduced --on-ink.
   The rooms themselves are one neutral raster set built by
   tools/build_stage_plates.py; the theme is a gradient over them. */

.first-class-page {
  /* The missing middle token silently dropped both the rail rings and the
     Moment Lab identity bar. Reuse the theme-aware violet support colour so
     the third stop is deliberate in every palette, with a rolling-cache
     fallback for an older main.css. */
  --fc-mid: var(--ume, #7a6aa4);
  --fc-on-ink-fallback: #ffffff;
  /* First Class has a real front plane. The base is always opaque; the
     existing theme surface is composited above it as a wash. In VR Night
     this keeps the intended near-black material (#201f26) without allowing
     the fixed ambient grid or petals to move through the interface. */
  --fc-front-base: var(--paper);
  --fc-front-wash: var(--surface);
}
.first-class-page[data-theme="night"] { --fc-on-ink-fallback: #201319; }

/* ---- hero: a mission briefing ---- */

.fc-hero {
  background: var(--topic-hero-bg);
  border-bottom: 1px solid var(--line);
  padding: clamp(38px, 7vw, 84px) 24px clamp(34px, 6vw, 66px);
}

.fc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}

.fc-hero__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font: 650 0.78rem/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.fc-hero__zero {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--btn-fg);
  font: 800 0.9rem/1 var(--font-body);
  letter-spacing: 0.06em;
}

.fc-hero h1 {
  margin: 0 0 16px;
  font: 750 clamp(2.6rem, 7.4vw, 4.6rem)/0.98 var(--font-hero);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.fc-hero__lead {
  margin: 0 0 26px;
  max-width: 52ch;
  font: 400 clamp(1rem, 1.5vw, 1.12rem)/1.65 var(--font-body);
  color: var(--text-soft);
}

.fc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The briefing card: five rows of things that are all literally true. */
.fc-brief {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 1.5);
  box-shadow: var(--shadow);
  padding: 24px 24px 20px;
}

.fc-brief::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed var(--line);
  border-radius: calc(var(--radius) * 1.2);
  pointer-events: none;
}

.fc-brief__title {
  position: relative;
  margin: 0 0 16px;
  font: 700 0.72rem/1 var(--font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.fc-brief__list {
  position: relative;
  margin: 0;
  display: grid;
  gap: 12px;
}

.fc-brief__list > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.fc-brief__list > div:last-child { border-bottom: 0; padding-bottom: 0; }

.fc-brief__list dt {
  font: 650 0.68rem/1.3 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-brief__list dd {
  margin: 0;
  font: 500 0.94rem/1.5 var(--font-body);
  color: var(--text-soft);
}

.fc-brief__num {
  font: 750 1.15rem/1 var(--font-display);
  color: var(--accent-ink);
  margin-right: 4px;
}

/* ---- mission chips ---- */

.section--missions { background: var(--surface-soft); }

.fc-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}

.fc-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font: 600 0.92rem/1.2 var(--font-body);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.fc-chip__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--band);
  color: var(--muted);
  font: 700 0.7rem/1 var(--font-body);
}

.fc-chip__emoji { font-size: 1.05rem; line-height: 1; }

.fc-chip:hover,
.fc-chip:focus-visible { border-color: var(--accent); color: var(--accent-ink); }

.fc-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-fg);
}

.fc-chip.is-active .fc-chip__num {
  background: var(--btn-fg);
  color: var(--accent);
}

/* ---- one mission ---- */

.fc-mission {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.7);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.fc-mission + .fc-mission { margin-top: 26px; }
.fc-mission[hidden] { display: none; }

.fc-mission__head { position: relative; padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 32px) 18px; }

.fc-mission__tag {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font: 650 0.7rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-mission__num {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 800 0.78rem/1 var(--font-body);
  letter-spacing: 0.04em;
}

.fc-mission__emoji { font-size: 1.1rem; letter-spacing: 0; }

.fc-mission__head h3 {
  margin: 0 0 8px;
  font: 650 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--font-display);
  color: var(--ink);
}

.fc-mission__place {
  margin: 0;
  max-width: 56ch;
  font: 400 1rem/1.6 var(--font-body);
  color: var(--muted);
}

/* ---- the stage ----

   A photographic chapter plate from one of Moe's own classrooms, cut so it
   carries no title text and no broadcast badges. It is atmosphere with an
   explicit source credit, not a diagram of where the learner stands. */

.fc-stage {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fc-stage__plate {
  display: block;
  width: 100%;
  height: clamp(150px, 21vw, 250px);
  object-fit: cover;
  object-position: center;
  filter: brightness(0.94) saturate(0.9) contrast(0.96);
}

/* The tint is one gradient over one neutral raster, so a dark theme needs no
   second set of files. */
.fc-stage__wash {
  position: absolute;
  inset: 0;
  bottom: auto;
  height: clamp(150px, 21vw, 250px);
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--surface) 20%, transparent) 0%,
      color-mix(in srgb, var(--surface) 3%, transparent) 24%,
      color-mix(in srgb, var(--surface) 2%, transparent) 70%,
      color-mix(in srgb, var(--surface) 14%, transparent) 100%);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fc-stage__wash { background: none; }
}

body[data-theme="night"] .fc-stage__plate {
  filter: brightness(0.7) saturate(0.82) contrast(0.94);
}

body[data-theme="night"] .fc-stage__wash {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--night) 62%, transparent) 0%,
      color-mix(in srgb, var(--night) 22%, transparent) 26%,
      color-mix(in srgb, var(--night) 20%, transparent) 66%,
      color-mix(in srgb, var(--night) 54%, transparent) 100%);
}

.fc-stage__credit {
  margin: 0;
  padding: 9px clamp(14px, 3vw, 32px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  font: 400 0.76rem/1.5 var(--font-body);
  color: var(--muted);
}

.fc-stage__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--accent-ink);
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .fc-stage__credit a { min-height: 44px; }
}

/* The step rail is the ground plan of the room above it: four stops, in
   order, on their own strip so nothing in the photograph is ever covered. */
.fc-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 16px clamp(10px, 2vw, 22px) 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.fc-rail__step {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  position: relative;
  padding-top: 16px;
  min-height: 44px;
}

.fc-rail__step::before {
  content: "";
  position: absolute;
  top: 29px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 11px);
}

.fc-rail__step:first-child::before { display: none; }

.fc-rail__dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--fc-mid);
  background: var(--surface);
  color: var(--muted);
  font: 700 0.78rem/1 var(--font-body);
  position: relative;
  z-index: 1;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.fc-rail__name {
  font: 650 0.66rem/1.3 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 15ch;
}

.fc-rail__step.is-done .fc-rail__dot {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.fc-rail__step.is-active .fc-rail__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-fg);
  transform: scale(1.14);
}

.fc-rail__step.is-active .fc-rail__name { color: var(--accent-ink); }

/* The end of a four-step walk, marked. Not a score and not a streak: it says
   the mission is over, which is the one thing the framing promised. */
.fc-complete {
  position: absolute;
  top: clamp(20px, 3vw, 30px);
  right: clamp(18px, 3vw, 32px);
  margin: 0;
  padding: 9px 16px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-ink);
  font: 800 0.76rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fc-mission.is-complete .fc-complete {
  opacity: 1;
  visibility: visible;
  transform: rotate(-4deg) scale(1);
}

.fc-mission:not(.is-complete) .fc-complete { transform: rotate(-4deg) scale(0.9); }

@media (prefers-reduced-motion: reduce) {
  .fc-complete, .fc-mission.is-complete .fc-complete,
  .fc-mission:not(.is-complete) .fc-complete { transition: none; transform: rotate(-4deg); }
}

/* The end of a four-step walk, marked. Not a score and not a streak: it says
   the mission is over, which is the one thing the framing promised. */
.fc-complete {
  position: absolute;
  top: clamp(20px, 3vw, 30px);
  right: clamp(18px, 3vw, 32px);
  margin: 0;
  padding: 9px 16px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-ink);
  font: 800 0.76rem/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.fc-mission.is-complete .fc-complete {
  opacity: 1;
  visibility: visible;
  transform: rotate(-4deg) scale(1);
}

.fc-mission:not(.is-complete) .fc-complete { transform: rotate(-4deg) scale(0.9); }

@media (prefers-reduced-motion: reduce) {
  .fc-complete, .fc-mission.is-complete .fc-complete,
  .fc-mission:not(.is-complete) .fc-complete { transition: none; transform: rotate(-4deg); }
}

/* ---- beats: a line spoken from where you stand ---- */

.fc-beats {
  list-style: none;
  margin: 0;
  padding: 0 clamp(18px, 3vw, 32px) clamp(18px, 3vw, 26px);
}

.fc-beat {
  padding-top: 26px;
}

.fc-beat + .fc-beat { border-top: 1px dashed var(--line); margin-top: 6px; }
.fc-beat[hidden] { display: none; }

.fc-beat__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font: 650 0.72rem/1 var(--font-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-beat__num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--btn-fg);
  font: 700 0.76rem/1 var(--font-body);
}

.fc-beat__cue {
  margin: 0 0 16px;
  max-width: 62ch;
  font: 400 0.95rem/1.6 var(--font-body);
  color: var(--text-soft);
}

/* The line itself. Its card stays in document flow instead of pointing at an
   invented location in a photograph with a different floor plane per crop. */
.fc-bubble {
  position: relative;
  margin: 0 0 16px;
  padding: 20px 24px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface-soft);
}

.fc-bubble__jp {
  margin: 0 0 8px;
  font: 500 clamp(1.5rem, 3.6vw, 2.1rem)/1.9 var(--font-body);
  color: var(--ink);
}

.fc-bubble__jp ruby rt {
  font-size: 0.44em;
  font-weight: 500;
  color: var(--muted);
}

.fc-bubble__romaji {
  margin: 0 0 8px;
  font: 500 1rem/1.4 var(--font-body);
  color: var(--accent-ink);
}

.fc-bubble__gloss {
  margin: 0;
  font: 400 1rem/1.55 var(--font-body);
  color: var(--text-soft);
}

.fc-beat__actions { margin: 0; }

.fc-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  background: var(--surface);
  font: 650 0.94rem/1.2 var(--font-body);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.fc-play:hover { background: var(--accent); color: var(--btn-fg); }
.fc-play.is-playing { background: var(--accent); color: var(--btn-fg); }
.fc-play.is-playing .fc-play__icon { font-size: 0.85em; }
.fc-play.is-failed { border-color: var(--line-strong); color: var(--muted); }

/* Harder setting: the label, the stage direction and the meaning stay; the
   Japanese comes back when you ask for it or play it. The text is still in
   the DOM, so a screen reader is never deprived of it by a visual aid. */
.fc-mission.is-hard .fc-beat:not(.is-open) .fc-bubble__jp,
.fc-mission.is-hard .fc-beat:not(.is-open) .fc-bubble__romaji {
  color: transparent;
  background: var(--line);
  border-radius: 8px;
  user-select: none;
}

.fc-mission.is-hard .fc-beat:not(.is-open) .fc-bubble__jp ruby rt { color: transparent; }
.fc-mission.is-hard .fc-beat:not(.is-open) .fc-bubble { cursor: pointer; }

/* ---- controls ---- */

.fc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(18px, 3vw, 32px);
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.fc-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-soft);
  font: 650 0.9rem/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.fc-step-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }

.fc-step-btn:disabled { opacity: 0.4; cursor: default; }

.fc-step-btn--next {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-fg);
}

.fc-step-btn--next:hover:not(:disabled) { color: var(--btn-fg); border-color: var(--accent-ink); }

.fc-step-btn--next:disabled {
  opacity: 1;
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent-ink);
}

.fc-progress {
  margin: 0;
  font: 700 1rem/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.fc-mission.is-complete .fc-progress { color: var(--accent-ink); }

.fc-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 16px clamp(18px, 3vw, 32px) 0;
}

.fc-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.fc-tool__label {
  font: 650 0.68rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-tool__value {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 650 0.9rem/1 var(--font-body);
}

.fc-tool__btn,
.fc-diff {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-soft);
  font: 600 0.85rem/1.2 var(--font-body);
  cursor: pointer;
}

.fc-tool__btn:hover,
.fc-diff:hover { border-color: var(--accent); color: var(--accent-ink); }

.fc-diff.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.fc-note {
  margin: 0;
  padding: 10px clamp(18px, 3vw, 32px) 0;
  max-width: 78ch;
  font: 400 0.85rem/1.6 var(--font-body);
  color: var(--muted);
}

/* ---- freeze, disclosure, source ---- */

.fc-freeze {
  margin: 18px clamp(18px, 3vw, 32px) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  padding: 2px 16px;
}

.fc-freeze > summary {
  cursor: pointer;
  padding: 13px 0;
  font: 650 0.95rem/1.3 var(--font-body);
  color: var(--accent-ink);
}

.fc-freeze[open] > summary { border-bottom: 1px solid var(--line); }

.fc-freeze__lead {
  margin: 13px 0 14px;
  font: 400 0.9rem/1.6 var(--font-body);
  color: var(--muted);
}

.fc-freeze ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.fc-freeze li { display: grid; gap: 5px; justify-items: start; }

.fc-freeze .fc-bubble__jp {
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  line-height: 1.8;
  margin: 0;
}

.fc-disclosure {
  margin: 18px clamp(18px, 3vw, 32px) 0;
  padding: 12px 14px;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-soft);
  font: 400 0.85rem/1.6 var(--font-body);
  color: var(--muted);
}

.fc-source {
  margin: 0;
  padding: 16px clamp(18px, 3vw, 32px) clamp(18px, 3vw, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  font: 400 0.85rem/1.6 var(--font-body);
  color: var(--muted);
}

.fc-source a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent-ink);
}

/* ---- Moe Moment Lab ---------------------------------------------------

   This is source material, not another mission skin. A compact editorial
   ledger keeps the checked classroom excerpt, its exact timestamp, and the site's
   interpretation exercise visibly separate. */

.fc-moment-jump {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 22px;
  text-align: right;
}

.fc-moment-jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-ink);
  font: 700 0.78rem/1.3 var(--font-body);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.fc-moment-jump a:hover { border-color: var(--accent); }

.fc-moment-lab {
  position: relative;
  width: min(1120px, calc(100% - 32px));
  margin: clamp(70px, 10vw, 126px) auto 0;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 9%, transparent);
}

.fc-moment-lab::before {
  content: "";
  display: block;
  height: 7px;
  background: linear-gradient(90deg, var(--accent) 0 36%, var(--fc-mid) 36% 67%, var(--ink) 67%);
}

.fc-moment-lab__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 6vw, 84px);
  align-items: end;
  padding: clamp(28px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 48%),
    var(--surface);
}

.fc-moment-lab__eyebrow,
.fc-moment__byline,
.fc-moment__practice-label {
  margin: 0 0 10px;
  font: 750 0.7rem/1.3 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.fc-moment-lab h2 {
  margin: 0;
  font: 650 clamp(2.35rem, 6vw, 5.1rem)/0.98 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--ink);
}

.fc-moment-lab__lead {
  max-width: 60ch;
  margin: 20px 0 0;
  font: 450 clamp(1rem, 1.6vw, 1.15rem)/1.7 var(--font-body);
  color: var(--text-soft);
}

.fc-moment-lab__count {
  width: min-content;
  min-width: 155px;
  margin: 0;
  padding-left: 22px;
  border-left: 1px solid var(--line-strong);
  font: 650 0.72rem/1.45 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-moment-lab__count strong {
  display: block;
  margin-bottom: 5px;
  font: 650 clamp(2.8rem, 6vw, 4.8rem)/0.85 var(--font-display);
  letter-spacing: -0.06em;
  color: var(--accent-ink);
}

.fc-moment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fc-moment {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.fc-moment:nth-child(odd) { border-right: 1px solid var(--line); }
.fc-moment:nth-last-child(-n + 2) { border-bottom: 0; }

.fc-moment__source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: clamp(24px, 4vw, 42px);
}

.fc-moment__number {
  margin: 1px 0 0;
  color: var(--accent);
  font: 650 1rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.fc-moment blockquote {
  margin: 0;
  font: 600 clamp(1.45rem, 2.5vw, 2.05rem)/1.65 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--ink);
}

.fc-moment__turn { display: block; }

.fc-moment__turn + .fc-moment__turn {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.fc-moment__gloss {
  margin: 0 0 9px;
  font: 500 0.92rem/1.6 var(--font-body);
  color: var(--muted);
}

.fc-moment__ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 12px clamp(24px, 4vw, 42px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.fc-moment__ledger a {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font: 650 0.77rem/1.35 var(--font-body);
}

.fc-moment__ledger a:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }

.fc-moment__ledger time {
  padding: 5px 7px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.fc-moment__review {
  font: 650 0.65rem/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.fc-moment__watch {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink, var(--fc-on-ink-fallback));
  font: 750 0.78rem/1.25 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.fc-moment__watch[hidden] { display: none; }
.fc-moment__watch:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.fc-moment__watch:focus-visible,
.fc-moment-player__close:focus-visible,
.fc-moment-player__source:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* One shared, full-bleed classroom projector. The video frame never exists
   until a reviewed card opens this native dialog. */
.fc-moment-player {
  box-sizing: border-box;
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 90px rgb(12 15 19 / 0.42);
}

.fc-moment-player:not([open]) { display: none; }

.fc-moment-player::backdrop {
  background: rgb(12 15 19 / 0.76);
  backdrop-filter: blur(8px);
}

.fc-moment-player__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px 0 22px;
}

.fc-moment-player__eyebrow,
.fc-moment-player__byline {
  margin: 0;
  color: var(--accent-ink);
  font: 700 0.69rem/1.3 var(--font-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fc-moment-player__topline form { margin: 0; }

.fc-moment-player__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font: 700 0.75rem/1 var(--font-body);
  cursor: pointer;
}

.fc-moment-player__close span:last-child { font: 400 1.3rem/1 var(--font-body); }

.fc-moment-player__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 24px;
  padding: 8px 22px 22px;
}

.fc-moment-player__intro h2 {
  margin: 5px 0 0;
  font: 750 clamp(1.35rem, 3.2vw, 2rem)/1.12 var(--font-hero);
  letter-spacing: -0.015em;
}

.fc-moment-player__cue {
  align-self: end;
  margin: 0;
  color: var(--muted);
  font: 650 0.68rem/1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-moment-player__cue time {
  display: block;
  margin-top: 4px;
  color: var(--accent-ink);
  font: 780 1.3rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.fc-moment-player__intro blockquote {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
  color: var(--ink);
  font: 650 clamp(1rem, 2.2vw, 1.2rem)/1.55 var(--font-jp);
}

.fc-moment-player__intro .fc-moment__turn { display: block; }
.fc-moment-player__intro .fc-moment__turn + .fc-moment__turn { margin-top: 5px; }

.fc-moment-player__frame {
  width: 100%;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  background: #08090b;
}

.fc-moment-player__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.fc-moment-player__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  padding: 18px 22px 22px;
}

.fc-moment-player__continuation,
.fc-moment-player__privacy {
  margin: 0;
  max-width: 62ch;
  color: var(--text-soft);
  font: 500 0.75rem/1.55 var(--font-body);
}

.fc-moment-player__privacy { margin-top: 6px; color: var(--muted); }

.fc-moment-player__source {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent-ink);
  font: 700 0.75rem/1.25 var(--font-body);
  text-decoration: none;
}

.fc-moment-player__source:hover span:first-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fc-moment__practice {
  padding: clamp(24px, 4vw, 42px);
  --fc-front-wash: var(--surface-soft);
}

/* ---- depth contract ----------------------------------------------------

   Ambient decoration is wallpaper, not glass content. These are the roots
   that can sit directly over the page background, so each owns an opaque
   paper base plus the theme's existing translucent wash. Use longhands here:
   a later `background:` shorthand without --fc-front-base would silently
   restore the scroll-dependent grid bleed this contract exists to prevent.

   The Moment practice panel deliberately has no ruled-paper pattern. The old
   32px rules crossed body copy and beat against the global 38px grid; its
   editorial label and spacing already distinguish the practice material. */
.fc-brief,
.fc-chip,
.fc-mission,
.fc-moment-jump a,
.fc-moment-lab,
.fc-moment-player,
.fc-moment__practice {
  background-color: var(--fc-front-base);
  background-image: linear-gradient(var(--fc-front-wash), var(--fc-front-wash));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  background-attachment: scroll;
  background-origin: border-box;
  background-clip: border-box;
  background-blend-mode: normal;
}

.fc-moment__practice-label { color: var(--muted); }

.fc-moment__context {
  margin: 0 0 23px;
  font: 450 0.92rem/1.65 var(--font-body);
  color: var(--text-soft);
}

.fc-moment fieldset { margin: 0; padding: 0; border: 0; }

.fc-moment legend {
  width: 100%;
  margin-bottom: 14px;
  font: 700 1.02rem/1.5 var(--font-body);
  color: var(--ink);
}

.fc-moment__choices { display: grid; gap: 9px; }

.fc-moment__choice {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
  font: 500 0.88rem/1.5 var(--font-body);
  cursor: pointer;
}

.fc-moment__choice:hover { border-color: var(--accent); }

.fc-moment__choice input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.fc-moment.is-checked .fc-moment__choice[data-result="answer"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

.fc-moment.is-checked .fc-moment__choice[data-result="picked"] {
  border-style: dashed;
  color: var(--muted);
}

.fc-moment__check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.fc-moment__check-row button {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--btn-fg);
  font: 700 0.84rem/1.2 var(--font-body);
  cursor: pointer;
}

.fc-moment__check-row button:hover { filter: brightness(0.94); }

.fc-moment__check-row p {
  flex: 1 1 180px;
  margin: 0;
  color: var(--accent-ink);
  font: 650 0.8rem/1.45 var(--font-body);
}

.fc-moment__reveal { margin-top: 16px; border-top: 1px solid var(--line-strong); }

.fc-moment__reveal summary {
  min-height: 44px;
  padding: 13px 2px 8px;
  color: var(--accent-ink);
  font: 700 0.82rem/1.4 var(--font-body);
  cursor: pointer;
}

.fc-moment__reveal p {
  margin: 5px 0 0;
  padding: 0 0 2px;
  color: var(--text-soft);
  font: 500 0.9rem/1.65 var(--font-body);
}

.fc-moment-lab__note {
  margin: 0;
  padding: 18px clamp(24px, 5vw, 62px);
  border-top: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--on-ink, var(--fc-on-ink-fallback));
  font: 500 0.78rem/1.6 var(--font-body);
}

@media (max-width: 820px) {
  .fc-moment-lab__head { grid-template-columns: 1fr; }
  .fc-moment-lab__count { width: auto; padding: 15px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .fc-moment-lab__count strong { display: inline-block; margin: 0 12px 0 0; }
  .fc-moment-grid { grid-template-columns: 1fr; }
  .fc-moment:nth-child(odd) { border-right: 0; }
  .fc-moment:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .fc-moment-lab { width: min(100% - 20px, 1120px); border-radius: var(--radius); }
  .fc-moment__ledger { grid-template-columns: 1fr; }
  .fc-moment__review { padding-bottom: 7px; }
  .fc-moment-player { max-height: calc(100dvh - 16px); border-radius: 13px; }
  .fc-moment-player__topline { padding: 10px 12px 0 16px; }
  .fc-moment-player__close span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fc-moment-player__intro { grid-template-columns: 1fr; gap: 12px; padding: 7px 16px 16px; }
  .fc-moment-player__cue { display: flex; align-items: baseline; gap: 8px; }
  .fc-moment-player__cue time { display: inline; margin: 0; }
  .fc-moment-player__foot { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .fc-moment-player__source { width: 100%; }
}

/* ---- closing band ---- */

.section--mission-end { background: var(--band); }

.fc-end {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}


.fc-end h2 {
  margin: 0 0 12px;
  font: 650 clamp(1.6rem, 3.6vw, 2.2rem)/1.15 var(--font-display);
  color: var(--ink);
}

.fc-end p {
  margin: 0 0 22px;
  font: 400 1.02rem/1.65 var(--font-body);
  color: var(--text-soft);
}

.fc-end__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.fc-end__aside { margin: 18px 0 0; font: 500 0.9rem/1.5 var(--font-body); }

.fc-end__aside a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--accent-ink);
}

/* ---- responsive ---- */

@media (max-width: 900px) {
  .fc-hero__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fc-brief__list > div { grid-template-columns: 1fr; gap: 4px; }
  .fc-rail { padding: 14px 10px 12px; }
  .fc-rail__step::before { top: 27px; }
  .fc-controls { padding: 14px 15px; }
  .fc-source a, .fc-end__aside a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-chip, .fc-play, .fc-step-btn, .fc-rail__dot { transition: none; }
  .fc-rail__step.is-active .fc-rail__dot { transform: none; }
}