/* Shared fixes for tutorial-windows.html and tutorial-mac.html
   The simulated desktops are fixed-size (1200x640 / 1220x720), so they are
   scaled down with --fit (set by tutorial-fit.js) instead of being cropped. */

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ---- Header: wrap cleanly, scroll the step pills instead of overflowing ---- */
.tutorial-header { flex-wrap: wrap; row-gap: 10px; }
.brand-group { min-width: 0; flex-wrap: wrap; }
.step-pills { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.step-pills::-webkit-scrollbar { display: none; }
.step-pill { flex: none; white-space: nowrap; }
.playback-controls { flex-wrap: wrap; }
.btn-ctrl { white-space: nowrap; }
.theme-toggle-btn { min-width: 38px; justify-content: center; }
.btn-ctrl:focus-visible, .step-pill:focus-visible { outline: 2px solid var(--signal-bright); outline-offset: 2px; }

@media (max-width: 900px) {
  .tutorial-header { padding: 12px 16px; }
  .step-pills { order: 3; width: 100%; }
  .badge-mac, .badge-win { display: none; }
}
@media (max-width: 560px) {
  .playback-controls { width: 100%; }
  .playback-controls .btn-ctrl { flex: 1 1 auto; justify-content: center; }
  #tut-theme-toggle-label { display: none; }
}

/* ---- Stage: scale to fit ---- */
body { overflow-x: hidden; }
.motion-viewport { flex: none; }

/* macOS: scale the desktop inside a full-width stage */
.mac-desktop { flex: none; transform: scale(var(--fit, 1)); transform-origin: center center; }
body:has(.mac-desktop) .motion-viewport { height: calc(640px * var(--fit, 1) + 40px); min-height: 0; }

/* Windows: scale the whole 1220x720 viewport */
body:has(.win-desktop) .motion-viewport {
  width: 1220px; max-width: none; flex: none;
  transform: scale(var(--fit, 1)); transform-origin: top center;
  margin-bottom: calc(720px * (var(--fit, 1) - 1));
}

/* ---- Explainer docks below the stage on small screens (too small to read inside it) ---- */
.explainer-dock { padding: 12px 16px 24px; display: flex; justify-content: center; }
.explainer-dock #explainer-banner,
.explainer-dock .step-explainer-banner {
  position: static !important; transform: none !important; max-width: 640px; width: 100%;
  border-radius: 12px !important; padding: 12px 16px !important; pointer-events: auto;
  flex-wrap: wrap; font-size: 14px;
}
.explainer-dock #explainer-text, .explainer-dock .step-text { white-space: normal; line-height: 1.5; }