/* ─────────────────────────────────────────────────────────
 * The sections that play (js/play.js, js/sees.js): the live card
 * the real client runs in, the "try" caps, and the switcher. All
 * from MetalUI's tokens; the switcher is the twin of MetalUI's
 * Tabs track (Switcher recipe) until the site can import it.
 * ───────────────────────────────────────────────────────── */

/* ── The live card: a bone plate with the client inside ── */
.live-card {
  position: relative; width: 100%; max-width: 1080px; height: clamp(380px, 52vw, 560px);
  border-radius: var(--mu-radius-hero); overflow: hidden; isolation: isolate;
  background: var(--mu-page); box-shadow: var(--mu-raise);
  opacity: 0; translate: 0 18px; scale: 0.985;
  transition: opacity 500ms var(--mu-ease-slide), translate var(--mu-spring-surface-d) var(--mu-spring-surface), scale var(--mu-spring-surface-d) var(--mu-spring-surface);
}
.live-card.is-in { opacity: 1; translate: 0 0; scale: 1; }
.live-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.live-card.is-taken { box-shadow: var(--mu-raise), 0 0 0 2px color-mix(in srgb, var(--mu-green) 55%, transparent); }
.hint { margin: 0; font: var(--mu-type-body); color: var(--mu-ink3); }

/* ── "Try" caps: MetalUI plain caps at compact height; the LED comes on while the line is written ── */
.tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.try {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border: 0; border-radius: var(--mu-radius-pill);
  font: var(--mu-type-ui); letter-spacing: var(--mu-type-ui-tracking); color: var(--mu-ink2); background: var(--mu-btn-bg); box-shadow: var(--mu-btn-sh); cursor: pointer;
  transition: translate var(--mu-spring-release-d) var(--mu-spring-release), color 160ms, box-shadow 160ms;
}
.try:hover { color: var(--mu-ink); }
.try:active { translate: 0 var(--mu-button-travel); background: var(--mu-pressed-bg); }
.try:focus-visible { outline: var(--mu-focus-width) solid var(--mu-focus); outline-offset: var(--mu-focus-offset); }
.try[disabled] { opacity: 0.5; cursor: default; }
.try-led { width: 6px; height: 6px; border-radius: var(--mu-round); background: var(--mu-led-off); box-shadow: var(--mu-led-ring); transition: background 200ms; }
.try.is-on { color: var(--mu-ink); }
.try.is-on .try-led { background: var(--mu-led-green); }

/* ── Switcher: a well track, a raised thumb that glides on the part spring ── */
.switcher {
  position: relative; display: inline-flex; gap: var(--mu-r-switcher-self-gap); padding: var(--mu-r-switcher-self-pad);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--mu-radius-pill);
  background: var(--mu-r-switcher-self-background); box-shadow: var(--mu-r-switcher-self-shadow);
}
.switcher::-webkit-scrollbar { display: none; }
.sw-thumb {
  position: absolute; top: var(--mu-r-switcher-self-pad); left: 0; height: var(--mu-r-switcher-option-height-regular); width: 0;
  border-radius: var(--mu-radius-pill); background: var(--mu-r-switcher-thumb-background); box-shadow: var(--mu-r-switcher-thumb-shadow);
  translate: var(--x, 0) 0; width: var(--w, 0);
  transition: translate var(--mu-spring-part-d) var(--mu-spring-part), width var(--mu-spring-part-d) var(--mu-spring-part);
}
.sw-opt {
  position: relative; z-index: 1; display: inline-flex; align-items: center; height: var(--mu-r-switcher-option-height-regular); padding: 0 calc(var(--mu-r-switcher-option-pad-x) + 4px);
  margin: 0; border: 0; border-radius: var(--mu-radius-pill); background: transparent; white-space: nowrap; cursor: pointer;
  font: var(--mu-r-switcher-option-font); font-size: 13px; letter-spacing: var(--mu-r-switcher-option-tracking); color: var(--mu-r-switcher-option-ink);
  transition: var(--mu-r-switcher-option-transition);
}
.sw-opt:hover, .sw-opt[aria-selected="true"] { color: var(--mu-r-switcher-option-ink-on); }
.sw-opt:focus-visible { outline: var(--mu-r-switcher-option-focus-width) solid var(--mu-focus); outline-offset: 0; }
.sees-cap { margin: 0; min-height: 2.9em; max-width: 34em; font: 400 15px/1.45 var(--mu-sans); color: var(--mu-ink2); text-wrap: pretty; }
.sees-cap.is-swap { animation: cap-in var(--mu-spring-settle-d) var(--mu-spring-settle) both; }
@keyframes cap-in { from { opacity: 0; translate: calc(var(--dir, 1) * 6px) 0; } }

@media (max-width: 720px) {
  .sw-opt { padding: 0 9px; font-size: 12.5px; }
  .live-card { height: clamp(420px, 120vw, 520px); }
}
@media (prefers-reduced-motion: reduce) {
  .live-card { transition: opacity 200ms; translate: 0 0; scale: 1; }
  .sw-thumb { transition: none; }
  .sees-cap.is-swap { animation: cap-fade 200ms both; }
  @keyframes cap-fade { from { opacity: 0; } }
}