/* Simulator page flow (owned by the flow package, views/sim.js): the placeholders while the model runs on first load,
   and the stage kept in view beside the rail on desktop. Only the page around .sim-stage; the stage styles its inside (sim.css). Tokens only. */

/* ---------- "Lasketaan…" placeholders (first load: the rail paints first, the model runs right after) ---------- */
.flow-wait {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 160px; padding: var(--space-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-2); font-size: var(--step--1); text-align: center;
}
.flow-wait--stage { min-height: 220px; aspect-ratio: 16 / 10; }
.flow-wait__spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: flow-spin 0.9s linear infinite;
}
@keyframes flow-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flow-wait__spin { animation: none; border-top-color: var(--line-strong); } }
@media (forced-colors: active) { .flow-wait { border-color: CanvasText; } }

/* ---------- desktop: the scene stays beside the design and guess panels ----------
   On screens at least 800 px high the stage column is sticky even when the whole stage does not fit (sim.css makes it
   sticky only when it fits): the scene, caption and play button stay in view while the rail scrolls; the timeline below
   them comes into view at the top of the grid (step 4 scrolls there). */
@media (min-width: 1100px) and (min-height: 800px) {
  .sim-page:not(.is-presenting) .sim-sticky { position: sticky; top: calc(var(--sim-header-h) + var(--sim-steps-h) + 12px); }
  /* the grid ends a little lower, so the stuck stage is not pushed under the step bar while the last guesses are read
     (views/sim.js sets --flow-stage-room = how much taller the stage is than the space under the bars) */
  .sim-page:not(.is-presenting) .sim-rail { padding-bottom: var(--flow-stage-room, 0px); }
}

/* ---------- desktop "app" layout: each column scrolls on its own ----------
   views/sim.js sets .is-shell at >= 1100 x 640 px. The grid fills the window under the header and step bar, and the
   rail, the stage column and the results column each have their own scroll bar, so they never move together.
   Presentation mode keeps its own layout (sim.css). */
.sim-page.is-shell:not(.is-presenting) .sim-intro {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sim-page.is-shell:not(.is-presenting) .sim-grid {
  /* views/sim.js measures --sim-shell-h (window height minus everything above the grid) */
  height: var(--sim-shell-h, calc(100vh - var(--sim-header-h, 64px) - var(--sim-steps-h, 96px) - 40px));
  min-height: 480px;
  align-items: stretch;
}
.sim-page.is-shell:not(.is-presenting) :is(.sim-rail, .sim-center, .sim-right) {
  min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  align-content: start; align-self: stretch;
  /* room for focus rings and card shadows, which the scroll box would otherwise clip */
  padding: 4px 6px 24px 4px; margin: -4px -6px 0 -4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.sim-page.is-shell:not(.is-presenting) .sim-right { display: grid; gap: var(--sim-gap); }
.sim-page.is-shell:not(.is-presenting) .sim-sticky { position: static; }
.sim-page.is-shell:not(.is-presenting) [data-step] { scroll-margin-top: 4px; }
/* "Your view" ends the narrow results column: one column inside it */
.sim-page.is-shell:not(.is-presenting) .sim-right .sim-view__grid { grid-template-columns: minmax(0, 1fr); }
.sim-page.is-shell:not(.is-presenting) .sim-right .sim-view__prio { grid-template-columns: minmax(0, 1fr); }