/* ParticleSim host page: a full-window canvas beneath the controller deck columns. */
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #0a0f1e; }
#sim-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: none; }
html[data-explainers="true"] :is([data-tip], [data-zoo-tip], [data-experiment-tip], #sim-canvas, #wave-readout-canvas, #sim-hud) { -webkit-touch-callout: none; }
#sim-canvas:focus-visible { outline: 2px solid #268c93; outline-offset: -3px; }
/* Keep folded tray tabs available over the walkthrough; native modal dialogs retain their top layer. */
html[data-deck-persistent="true"] .controller-deck.is-collapsed { z-index: 21; }
/* The Particles tray omits the shared readout pane; Waves keeps its existing readout. */
#left-deck[data-folder="particles"] [data-deck-pane="readout"] { display: none; }
/* Particles uses the persistent edge tabs and the stage's depiction selectors. */
#left-deck[data-folder="particles"] .deck-folder-tabs,
#left-deck[data-folder="particles"] .wave-deck-controls,
#left-deck[data-folder="particles"] .particle-tray-original-actions { display: none; }
.particle-tray-actions { position: relative; }
#left-deck .particle-tray-action-row {
  flex-wrap: nowrap; overflow-x: auto; gap: 3px; padding: 3px 1px 6px;
  scrollbar-width: thin; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom;
}
#left-deck .particle-tray-action-row button { flex: 0 0 auto; white-space: nowrap; padding-inline: 4px; }
.sim-tip { box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; }
.sim-tip[hidden] { display: none; }
.sim-tip > strong { display: block; margin-bottom: 7px; font-size: calc(13px * var(--app-text-scale, 1)); }
/* The pristine viewport's links, wrapping together on narrow phones. */
#sim-links {
  position: fixed; z-index: 30; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; white-space: nowrap;
  font: calc(11px * var(--app-text-scale, 1))/1.4 system-ui, sans-serif; letter-spacing: 0.02em; color: rgb(190 205 230 / 40%);
  max-width: calc(100% - 16px); width: max-content; flex-wrap: wrap; justify-content: center;
}
#sim-links a { padding: 2px 6px; color: rgb(190 205 230 / 55%); text-decoration: none; border-radius: 4px; }
#sim-links a:hover, #sim-links a:focus-visible { color: #e7edf7; text-decoration: underline; outline: none; }
/* Shared live statistics in both depictions: selectable text, with scrollable overflow. */
.sim-hud {
  position: fixed; z-index: 5; top: 12px; box-sizing: border-box; padding: 9px 12px 10px; border-radius: 10px;
  font: calc(12px * var(--app-text-scale, 1))/calc(17px * var(--app-text-scale, 1)) system-ui, -apple-system, sans-serif; cursor: text; user-select: text; -webkit-user-select: text;
  max-height: 40dvh; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere;
}
.sim-hud[data-docked="wave"] { position: static; width: 100%; max-width: 100% !important; max-height: none; margin: 0; overflow: visible; }
@media (max-width: 759px) { .sim-hud[data-docked="false"] { max-height: 26dvh; } }
.sim-hud[hidden] { display: none; }
.sim-hud p { margin: 0; }
p.sim-hud-head { font-size: calc(13px * var(--app-text-scale, 1)); font-weight: 600; }
p.sim-hud-line { color: var(--hud-muted); }
p.sim-hud-badge { color: #ffb020; font-size: calc(11.5px * var(--app-text-scale, 1)); line-height: calc(16px * var(--app-text-scale, 1)); }
.sim-hud p:not(.sim-hud-badge) + p.sim-hud-badge { margin-top: 8px; }
/* Full Form: readout rows beside a glossary of the terms each row introduces; long panels scroll. */
.sim-hud-glossary { max-height: min(55vh, calc(100vh - 260px)); overflow-y: auto; padding: 6px 10px 8px; }
.sim-hud-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.sim-hud-table th { padding: 2px 8px 5px 2px; text-align: left; font-size: calc(10.5px * var(--app-text-scale, 1)); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hud-muted); }
.sim-hud-table th:first-child, .sim-hud-table td:first-child { width: 54%; }
.sim-hud-table td { padding: 6px 8px 6px 2px; vertical-align: top; border-top: 1px solid var(--hud-rule); }
.sim-hud-table td + td, .sim-hud-table th + th { padding-left: 10px; border-left: 1px solid var(--hud-rule); }
.sim-hud-table tr.sim-hud-head .sim-hud-text { font-size: calc(13px * var(--app-text-scale, 1)); font-weight: 600; }
.sim-hud-table tr.sim-hud-line .sim-hud-text { color: var(--hud-muted); }
.sim-hud-table tr.sim-hud-badge .sim-hud-text { color: #ffb020; }
.sim-hud-term { margin: 0 0 4px; font-size: calc(11px * var(--app-text-scale, 1)); line-height: calc(15px * var(--app-text-scale, 1)); color: var(--hud-muted); }
.sim-hud-term:last-child { margin-bottom: 0; }
.sim-hud-term strong { color: var(--hud-text); font-weight: 650; }
#sim-problem {
  position: fixed; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%); max-width: min(720px, calc(100% - 32px)); padding: 12px 16px;
  border-radius: 8px; background: #8f1d1d; color: #fff; font: calc(13px * var(--app-text-scale, 1))/1.5 system-ui, sans-serif; white-space: pre-wrap; box-shadow: 0 8px 30px rgb(0 0 0 / 40%);
}

/* Guided Walkthrough card: a light page so the solid black slide icons read clearly over the dark simulation. */
.tour {
  --tour-paper: #f7f5ef; --tour-ink: #16191d; --tour-muted: #4f5761; --tour-rule: #ddd7ca; --tour-label: #6f6553; --tour-focus: #1f5fd6;
  position: fixed; z-index: 20; top: 12px; bottom: 12px; left: 12px; width: var(--tour-width, clamp(320px, 31vw, 440px));
  display: flex; flex-direction: column; border-radius: 14px; background: var(--tour-paper); color: var(--tour-ink);
  box-shadow: 0 18px 50px rgb(0 0 0 / 45%); font: calc(15px * var(--app-text-scale, 1))/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tour[hidden] { display: none; }
.tour-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; border-radius: inherit; }
.tour-content[hidden], .tour-resize[hidden] { display: none; }
.tour.is-collapsed { width: 0; background: transparent; box-shadow: none; }
.tour button { font: inherit; font-size: calc(13px * var(--app-text-scale, 1)); color: var(--tour-ink); cursor: pointer; }
.tour :focus-visible { outline: 2px solid var(--tour-focus); outline-offset: 2px; }
.tour .tour-tab { position: absolute; z-index: 2; left: 100%; top: 20px; width: 34px; min-height: 144px; padding: 10px 7px; display: flex; align-items: center; justify-content: center; gap: 8px; writing-mode: vertical-rl; border: 1px solid var(--tour-rule); border-radius: 0 9px 9px 0; background: var(--tour-paper); box-shadow: 5px 3px 12px rgb(0 0 0 / 15%); touch-action: manipulation; }
.tour-tab svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.tour.is-collapsed .tour-tab svg { transform: rotate(180deg); }
.tour-resize { position: absolute; z-index: 1; top: 0; bottom: 0; right: -5px; width: 10px; cursor: ew-resize; touch-action: none; }
.tour-resize::after { content: ""; position: absolute; left: 4px; top: 44%; height: 52px; width: 3px; border-radius: 3px; background: var(--tour-label); opacity: 0.55; }
.tour-resize:hover::after, .tour-resize:focus-visible::after { background: var(--tour-focus); opacity: 1; }
html.tour-resizing, html.tour-resizing * { cursor: ew-resize !important; user-select: none !important; -webkit-user-select: none !important; }
.tour-head { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--tour-rule); }
.tour-kicker { margin: 0; display: flex; flex-direction: column; font-size: calc(12px * var(--app-text-scale, 1)); line-height: 1.35; color: var(--tour-label); }
.tour-kicker [data-part="part"] { font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.tour-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tour-close { border: 1px solid var(--tour-rule); background: #fff; border-radius: 999px; padding: 3px 10px; }
.tour-paused { display: none; margin: 0; width: 100%; font-size: calc(12px * var(--app-text-scale, 1)); font-weight: 650; color: var(--tour-label); }
html[data-sim-paused="true"] .tour-paused { display: block; }
.tour-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; overscroll-behavior: contain; overflow-wrap: anywhere; }
.tour-title { display: flex; align-items: center; gap: 14px; margin: 2px 0 10px; }
.tour-icon { flex: 0 0 76px; height: 76px; display: grid; place-items: center; }
.tour-icon svg { width: 76px; height: 76px; display: block; }
.tour-title h2 { margin: 0; font-size: calc(22px * var(--app-text-scale, 1)); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.tour-title h2:focus { outline: none; }
.tour-body p { margin: 0 0 14px; line-height: 1.75; }
.tour-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tour-rule); }
.tour-section h3 { margin: 0 0 6px; font-size: calc(11.5px * var(--app-text-scale, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tour-label); }
.tour-name { font-weight: 650; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tour-bio { color: var(--tour-muted); font-size: 0.9em; }
.tour-now { padding: 7px 10px; border-radius: 8px; background: #ece8dd; font-size: calc(14px * var(--app-text-scale, 1)); }
.tour-now[hidden] { display: none; }
.tour-now-label { font-weight: 650; }
.tour-narrative { margin-top: 0; padding-top: 0; border-top: 0; }
.tour-watch + .tour-narrative { margin-top: 20px; }
.tour-reading-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tour-reading-details { border-top: 1px solid var(--tour-rule); margin-top: 12px; }
.tour-reading-details[hidden] { display: none; }
.tour-reading-details summary { min-height: 44px; box-sizing: border-box; padding: 12px 0; cursor: pointer; font-weight: 650; color: inherit; }
.tour-reading-details h4 { margin: 16px 0 6px; }
.tour-reading-details h4:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tour-action-row { margin-top: 16px; }
.tour-action-row[hidden] { display: none; }
.tour-zoo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tour-zoo-actions[hidden], .tour-sources[hidden] { display: none; }
.tour-sources { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; line-height: 1.6; font-size: calc(13px * var(--app-text-scale, 1)); }
.tour-sources a { color: inherit; text-underline-offset: 3px; }
.tour-action { border: 0; border-radius: 8px; padding: 9px 14px; background: var(--tour-ink); color: var(--tour-paper) !important; font-weight: 600; }
.tour-foot { flex-shrink: 0; border-top: 1px solid var(--tour-rule); padding: 8px 14px 12px; display: grid; gap: 8px; }
.tour-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tour-dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid var(--tour-ink); background: transparent; }
.tour-dot[aria-current="step"] { background: var(--tour-ink); }
.tour-buttons { display: flex; gap: 8px; }
.tour-buttons button { flex: 1; border: 1px solid var(--tour-rule); border-radius: 8px; padding: 7px 8px; background: #fff; }
.tour-buttons button:disabled { opacity: 0.4; cursor: default; }
.tour-buttons .tour-primary { background: var(--tour-ink); border-color: var(--tour-ink); color: var(--tour-paper); font-weight: 600; }
.tour-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* Phones and narrow windows: the card becomes a sheet across the lower part of the screen. */
@media (max-width: 759px) {
  .tour { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(56vh, 560px); font-size: calc(14.5px * var(--app-text-scale, 1)); }
  .tour.is-collapsed { width: auto; height: 0; }
  .tour .tour-tab { top: -34px; left: auto; right: 0; width: auto; height: 34px; min-height: 0; padding: 5px 12px; writing-mode: horizontal-tb; border-radius: 9px 9px 0 0; }
  .tour-tab svg { transform: rotate(-90deg); }
  .tour.is-collapsed .tour-tab svg { transform: rotate(90deg); }
  .tour-icon, .tour-icon svg { flex-basis: 56px; width: 56px; height: 56px; }
  .tour-title h2 { font-size: calc(19px * var(--app-text-scale, 1)); }
  .tour-buttons button { padding: 9px 6px; }
  .tour-dot { width: 16px; height: 16px; }
}