/* measure/tutorial.css — THE FIRST MEASURE's presentation (docs/measure-tutorial-spec.md §4).
 *
 * Four things, all inside THE MEASURE's own register (the --ms-* tokens measure.css defines on
 * `.ms-overlay`): THE COACH CARD docked at the top of THE WORLD, the ring on the one command a
 * step teaches, the quiet on the ones it does not, and the first-visit offer + training row on
 * the front door. Nothing here moves a cell (THE SAME SPOT RULE): the gate is paint only.
 */

/* ── THE COACH CARD — CIRCINUS's line + the plain instruction ─────────────────────────── */
.ms-coach {
  position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3;
  margin: 0 auto; max-width: 560px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 10px 8px;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.9), rgba(10, 8, 6, 0.72));
  border: 1px solid rgba(255, 215, 106, 0.35);
  border-left: 3px solid var(--ms-gold);
  pointer-events: none;            /* it never eats a tap meant for a figure */
}
.ms-coach[hidden] { display: none; }
.ms-coach-head { display: flex; justify-content: space-between; gap: 8px;
                 font-size: 0.56rem; letter-spacing: 0.2em; color: rgba(244, 239, 228, 0.55); }
.ms-coach-voice { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ms-gold); }
.ms-coach-how { font-size: 0.74rem; line-height: 1.45; color: var(--ms-ink); letter-spacing: 0.02em; }
/* free play: the card steps back, the board is yours */
.ms-coach:not(.ms-coach-gated) { border-left-color: rgba(244, 239, 228, 0.4); opacity: 0.88; }
/* the turn is being watched (a beat, THE ANSWERED WAVE): the card dims, it never leaves */
.ms-coach.ms-coach-watching { opacity: 0.45; }
/* THE PHONE: a flow row between THE SLUG and THE WORLD, never over the plates. A min-height
   keeps THE WORLD from re-measuring every time a step's text is a line shorter. */
.ms-stage:not(.ms-desktop) > .ms-coach {
  position: relative; inset: auto; margin: 0 0 6px; max-width: none;
  flex: 0 0 auto; min-height: 72px; padding: 6px 9px 7px;
}
.ms-stage:not(.ms-desktop) > .ms-coach .ms-coach-how { font-size: 0.7rem; line-height: 1.38; }
/* THE DESKTOP: docked top-left inside THE WORLD, clear of the wave's centre */
.ms-stage.ms-desktop .ms-world > .ms-coach { right: auto; margin: 0; max-width: 420px; }

/* ── THE GATE — the taught command is ringed, the rest go quiet (never removed) ─────────── */
.ms-cmd.ms-cmd-coach {
  outline: 2px solid var(--ms-gold); outline-offset: -2px;
  animation: ms-coach-ring 1.4s ease-in-out infinite;
}
.ms-cmd.ms-cmd-coach-locked { opacity: 0.32; }
@keyframes ms-coach-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 106, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 215, 106, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-cmd.ms-cmd-coach { animation: none; }
}

/* ── THE FRONT DOOR — the training row and the first-visit offer ────────────────────────── */
.ms-mission.ms-mission-tutorial { border-style: dashed; }
.ms-mission.ms-mission-tutorial .ms-mission-act { color: var(--ms-gold); }

.ms-tutorial-offer {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6, 8, 12, 0.82);
}
.ms-tutorial-offer[hidden] { display: none; }
.ms-tutorial-offer-card {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 460px; padding: 18px 18px 16px;
  background: rgba(10, 8, 6, 0.94);
  border: 1px solid rgba(255, 215, 106, 0.4); border-left: 3px solid var(--ms-gold);
}
.ms-tutorial-offer-title { font-size: 1.1rem; letter-spacing: 0.18em; color: var(--ms-gold); }
.ms-tutorial-offer-body { font-size: 0.8rem; line-height: 1.5; color: var(--ms-ink); }
.ms-tutorial-offer-note { font-size: 0.62rem; letter-spacing: 0.12em; color: rgba(244, 239, 228, 0.55); }
.ms-tutorial-offer .ms-launch { width: 100%; min-height: 48px; }
.ms-tutorial-offer .ms-tutorial-skip { width: 100%; min-height: 44px; }

/* ── THE SPOTLIGHT (measure-tutorial-spec.md §4.1) — fade all but the taught control ───────
   COMMAND: the veil dims THE WORLD (3D stage included); every rail cell but the ringed one,
   every party card but the lit one, the slug, the ticker and the bar fade.
   AIM: the foes the step allows + CAST stay; the rest of the scene and the deck fade. */
.ms-coach-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: rgba(4, 5, 9, 0.68);
  transition: opacity 180ms ease;
}
.ms-coach-veil[hidden] { display: none; }
.ms-stage.ms-desktop .ms-world > .ms-coach { z-index: 4; }

.ms-coach-focus-cmd .ms-slug,
.ms-coach-focus-cmd .ms-cmd:not(.ms-cmd-coach),
.ms-coach-focus-cmd .ms-member:not(.ms-coach-lit),
.ms-coach-focus-cmd .ms-bar,
.ms-coach-focus-cmd .ms-action-state,
.ms-coach-focus-aim .ms-slug,
.ms-coach-focus-aim .ms-ticker,
.ms-coach-focus-aim .ms-world-log,
.ms-coach-focus-aim .ms-cmd:not(.ms-cast),
.ms-coach-focus-aim .ms-aim-info,
.ms-coach-focus-aim .ms-aim-headline,
.ms-coach-focus-aim .ms-member:not(.ms-coach-lit),
.ms-coach-focus-aim .ms-world-hero:not(.ms-coach-lit),
.ms-coach-focus-aim .ms-foe:not(.ms-coach-lit),
.ms-coach-focus-aim .ms-boss-banner:not(.ms-coach-lit),
.ms-coach-focus-aim .ms-bar:not(.ms-bar-enter),
.ms-coach-focus-aim .ms-super-art,
.ms-coach-focus-aim .ms-super-text,
.ms-coach-focus-aim .ms-super-forecast,
.ms-coach-focus-aim .ms-super-target {
  opacity: 0.14 !important;
  filter: saturate(0.25);
  /* no transition: the board REBUILDS these nodes every render, so a fade would restart from
     full brightness each time — measured at 0.78 mid-fade in the headless probe. */
  transition: none !important;
}
/* the lit party card reads as the thing to press */
.ms-coach-focus-cmd .ms-member.ms-coach-lit,
.ms-coach-focus-aim .ms-member.ms-coach-lit {
  outline: 2px solid var(--ms-gold); outline-offset: -2px;
}

/* THE MARKER — a bobbing gold arrow on the one place to tap. Rides the overlay root. */
.ms-coach-arrow {
  position: absolute; z-index: 40; width: 0; height: 0; pointer-events: none;
}
.ms-coach-arrow[hidden] { display: none; }
.ms-coach-arrow::before {
  content: ''; position: absolute; left: -15px; bottom: 4px;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 22px solid var(--ms-gold, #ffd76a);
  filter: drop-shadow(0 0 6px rgba(255, 215, 106, 0.7)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
  animation: ms-coach-bob 900ms ease-in-out infinite;
}
.ms-coach-arrow.ms-coach-arrow-up::before {
  bottom: auto; top: 4px;
  border-top: none; border-bottom: 22px solid var(--ms-gold, #ffd76a);
  animation-name: ms-coach-bob-up;
}
@keyframes ms-coach-bob    { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(-2px); } }
@keyframes ms-coach-bob-up { 0%, 100% { transform: translateY(10px); }  50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  .ms-coach-arrow::before { animation: none; transform: translateY(-4px); }
  .ms-coach-arrow.ms-coach-arrow-up::before { transform: translateY(4px); }
}

/* while the spotlight is up, the coach card is the one text on screen — its instruction leads */
.ms-stage.ms-coach-focus-cmd .ms-coach .ms-coach-how,
.ms-stage.ms-coach-focus-aim .ms-coach .ms-coach-how { font-size: 0.82rem; }
.ms-stage.ms-coach-focus-cmd .ms-coach .ms-coach-voice,
.ms-stage.ms-coach-focus-aim .ms-coach .ms-coach-voice { font-size: 0.6rem; opacity: 0.8; }

/* SENTENCE CASE (Jeff, 2026-10-10: "softer", then "Shorter not softer"): the board's overlay
   uppercases everything, and a line in capitals shouts. The gold heading keeps the capitals. */
.ms-coach .ms-coach-how,
.ms-tutorial-offer .ms-tutorial-offer-body,
.ms-tutorial-offer .ms-tutorial-offer-note { text-transform: none; letter-spacing: 0.01em; }