/* codemany.com home, right column: the demo (#demo) is a replica of the Codemany app window
 * (macos/Codemany/Sources/Codemany/Onboarding/ and the main window), playing its setup.
 * One window border, the app's grid background, then one slim step line under the window
 * (clickable, with play/pause). scenes.css draws onboarding, runners.css the main window.
 * The window body has a fixed height per breakpoint, so switching steps never moves anything. */
.demo {
  --app-fg: #09090b; --app-muted: #71717a; --app-faint: #a1a1aa; --app-border: #e4e4e7;
  --app-fill: #f4f4f5; --app-card: #fafafa; --app-idle: #15803d;
  --app-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  display: grid; gap: 10px; min-width: 0; container-type: inline-size;
}

/* ---------- the window ---------- */
.app {
  position: relative; margin: 0; min-width: 0; overflow: hidden;
  border: 1px solid #d4d4d8; border-radius: 12px; background-color: #fff; color: var(--app-fg);
  background-image: linear-gradient(90deg, #00000008 1px, #0000 1px), linear-gradient(#00000008 1px, #0000 1px);
  background-size: 24px 24px;
  box-shadow: 0 1px 2px #0000000d, 0 24px 60px -28px #00000047;
}
.app-bar { position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 1; }
.lights { position: absolute; left: 12px; top: 9px; display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0000001f; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.app-body { position: relative; height: clamp(360px, 60vh, 430px); }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; }
.scene[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .scene { animation: scene-in .33s ease-out both; }
}
@keyframes scene-in { from { opacity: 0; } }

/* ---------- the step line under the window ---------- */
.stepbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; min-width: 0; gap: 2px; }
.steps li { min-width: 0; }
.steps .sm { display: none; }
.steps li + li::before { content: "·"; margin: 0 4px 0 2px; color: var(--border); }
.steps li { display: flex; align-items: center; }
.steps button {
  position: relative; padding: 4px 2px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 12px/1.4 var(--font); color: var(--muted-foreground); transition: color .2s;
}
.steps button b { font-weight: 400; color: var(--ring); }
.steps button:hover, .steps button[aria-current="step"] { color: var(--foreground); }
.steps button[aria-current="step"] b { color: var(--muted-foreground); }
.steps button::after { content: ""; position: absolute; left: 2px; bottom: 0; height: 1.5px; width: calc((100% - 4px) * var(--p, 0)); background: var(--foreground); }
.play {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); cursor: pointer;
}
.play:hover { background: var(--muted); }
.play svg { width: 12px; height: 12px; }
.play .i-play, .stepbar.paused .play .i-pause { display: none; }
.stepbar.paused .play .i-play { display: block; }
.stepbar.static .play { display: none; }

/* ---------- narrow: below the headline, full width ---------- */
@media (max-width: 860px) {
  .demo { width: 100%; max-width: 560px; }
}
@media (max-width: 600px) {
  .app-body { height: clamp(300px, 46vh, 360px); }
}
/* the step line fits beside the controls: full labels when wide, short ones, then only the current one's */
.steps button { font-size: 11px; }
@container (max-width: 640px) {
  .steps .lg { display: none; }
  .steps .sm { display: inline; }
}
@container (max-width: 470px) {
  .steps li + li::before { margin: 0 2px 0 0; }
  .steps button:not([aria-current]) .sm { display: none; }
}
/* very short screens: the value prop wins, the demo goes (it would not fit without scrolling) */
@media (max-width: 860px) and (max-height: 600px), (max-height: 460px) {
  .demo { display: none; }
}