/* mix-story.css · S3 the story player + the /sixty theater (Mix spec #s3, V3).
 *
 * Prefix: mxs- (this sheet owns it; nothing here leaks into components.css).
 * Tokens only on the warm canvas; the obsidian ground and the portal band
 * colors (#0b0e0d · #43d597 green · #e0a63c amber · #e6b654 gold · #ec7663
 * red) appear ONLY inside the .mxs-player product window, per the window law.
 * The D serif-italic story voice lives only inside the player frames; all
 * page chrome around it stays the site's Main Street type.
 * ?v= date bump on every edit (house law). */

/* ---- The theater: the site's deep-forest band, NOT obsidian ------------- */
.mxs-theater {
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(36, 106, 85, .42), transparent 60%),
    var(--deep);
  color: #fff;
  padding: 132px var(--pad) clamp(56px, 8vw, 96px);
  text-align: center;
}
.mxs-theater .eyebrow { color: var(--gold); }
.mxs-marquee {
  color: #fff;
  max-width: 18ch;
  margin: var(--s-3) auto var(--s-4);
}
.mxs-sub {
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
  margin: 0 auto var(--s-6);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.mxs-attr {
  max-width: 640px;
  margin: var(--s-5) auto 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .62);
}

/* ---- The product window (obsidian, portal palette) ---------------------- */
.mxs-player {
  max-width: 640px;
  margin: 0 auto;
  padding: 22px 26px 24px;
  text-align: left;
  background: #0b0e0d;
  color: #eef2ef;
  border: 1px solid rgba(230, 182, 84, .28);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
}
.mxs-player:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The six progress segments */
.mxs-segs { display: flex; gap: 5px; margin-bottom: 18px; }
.mxs-seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: #242b28; position: relative; overflow: hidden;
}
.mxs-seg.mxs-done::after,
.mxs-seg.mxs-run::after {
  content: ""; position: absolute; inset: 0; background: #e6b654;
}
.mxs-seg.mxs-run::after {
  transform: translateX(-100%);
  animation: mxs-fill 4s linear forwards;
}
.mxs-paused .mxs-seg.mxs-run::after { animation-play-state: paused; }
@keyframes mxs-fill { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* The frame: the ONLY place the serif-italic story voice exists */
.mxs-kick {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #67716b;
}
.mxs-text {
  margin: 10px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.3;
  min-height: 6.6em;
}
.mxs-text .mxs-num { color: #43d597; font-style: normal; font-family: var(--font-display); }
.mxs-text .mxs-biz { color: #e6b654; font-style: normal; }
.mxs-text .mxs-rival { color: #ec7663; font-style: normal; }
.mxs-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #67716b;
}

/* Controls */
.mxs-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.mxs-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #3a4440; background: transparent;
  color: #eef2ef; font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mxs-btn:hover, .mxs-btn:focus-visible { border-color: #e6b654; color: #e6b654; }
.mxs-meta {
  margin-left: auto; text-align: right;
  font-family: var(--font-mono); font-size: 11.5px; color: #67716b;
}
.mxs-source {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid #1d2421;
  font-family: var(--font-mono); font-size: 11.5px; color: #8a958f;
}

/* The static no-JS fallback inside the mount (replaced by the player) */
.mxs-fallback {
  max-width: 640px; margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.35;
  color: rgba(255, 255, 255, .88);
}

/* ---- The paragraph + Grade band under the theater (warm canvas) --------- */
.mxs-close {
  max-width: 60ch;
  margin: 0 auto var(--s-6);
  color: var(--muted);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
}

/* ---- Mobile (375px works) ----------------------------------------------- */
@media (max-width: 480px) {
  .mxs-theater { padding-top: 108px; }
  .mxs-player { padding: 16px 14px 18px; }
  .mxs-text { font-size: 17.5px; min-height: 0; }
  .mxs-btn { width: 44px; height: 44px; }
  .mxs-meta { font-size: 10.5px; }
}

/* ---- Reduced motion: no auto-fill; the current segment reads as lit ----- */
@media (prefers-reduced-motion: reduce) {
  .mxs-seg.mxs-run::after { animation: none; transform: none; }
}