/* Prototype layer: variant switching, scaling, toast, device switcher. */
html { background: var(--bg, #F6F0DF); }
body { margin: 0; background: var(--bg, #F6F0DF); color: var(--ink, #0F1D0B); }

/* One variant visible at a time. --s is set by proto.js (fit-to-width scale). */
.v { display: none; --s: 1; zoom: var(--s); margin: 0 auto; }
.v-desktop { width: 1440px; --gx: 72px; }
/* >1440px: the desktop board spans the viewport (proto.js sets width/--gx exactly; this is the pre-JS fallback). */
@media (min-width: 1440px) { .v-desktop { width: 100%; --gx: max(72px, calc((100vw - 1440px) / 2 + 72px)); } }
.v-tablet { width: 834px; }
.v-phone { width: 390px; }
@media (min-width: 1200px) { html:not([data-view]) .v-desktop { display: block; } }
@media (min-width: 700px) and (max-width: 1199.98px) { html:not([data-view]) .v-tablet { display: block; } }
@media (max-width: 699.98px) { html:not([data-view]) .v-phone { display: block; } }
html[data-view="desktop"] .v-desktop,
html[data-view="tablet"] .v-tablet,
html[data-view="phone"] .v-phone { display: block; }

/* Loading overlay (splash): same 3-variant switching as the pages, scoped as .sv-* by build.py. */
.sv { display: none; --s: 1; zoom: var(--s); margin: 0 auto; }
.sv-desktop { width: 1440px; }
@media (min-width: 1440px) { .sv-desktop { width: 100%; } }
.sv-tablet { width: 834px; }
.sv-phone { width: 390px; }
@media (min-width: 1200px) { html:not([data-view]) .sv-desktop { display: block; } }
@media (min-width: 700px) and (max-width: 1199.98px) { html:not([data-view]) .sv-tablet { display: block; } }
@media (max-width: 699.98px) { html:not([data-view]) .sv-phone { display: block; } }
html[data-view="desktop"] .sv-desktop,
html[data-view="tablet"] .sv-tablet,
html[data-view="phone"] .sv-phone { display: block; }

/* Hidden by default (no JS = never blocks). The inline head gate adds si-splash-pending before first paint. */
.si-splash {
  display: none; position: fixed; inset: 0; z-index: 900; overflow: hidden; overscroll-behavior: contain;
  background: var(--bg, #F6F0DF); cursor: pointer; opacity: 1; transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(0.23, 1, 0.32, 1);
}
html.si-splash-pending .si-splash { display: block; }
html.si-splash-pending, html.si-splash-pending body { overflow: hidden; }
.si-splash.si-leaving { opacity: 0; transform: translateY(-10px) scale(1.015); pointer-events: none; }
.si-splash button.skip { cursor: pointer; margin: 0; }
/* Progress bar fill: honest to the display time (--si-splash-ms is set by proto.js). */
.si-splash .a-load { transform: scaleX(0); transform-origin: left; }
.si-splash.si-run .a-load { animation: siSplashFill var(--si-splash-ms, 3000ms) linear both; }
@keyframes siSplashFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .si-splash { transition: none; } }
body:focus { outline: none; }

/* Theme toggle icons: show the one matching the current mode. */
.si-if { display: contents; }
html[data-mode="system"] .si-if-light, html[data-mode="system"] .si-if-dark,
html[data-mode="light"] .si-if-system, html[data-mode="light"] .si-if-dark,
html[data-mode="dark"] .si-if-system, html[data-mode="dark"] .si-if-light { display: none; }

/* Menu overlay (phone/tablet). Positioned by proto.js to cover the viewport. */
.si-menu { overflow-y: auto; }
.si-menu.si-closed { display: none !important; }
html.si-lock { overflow: hidden !important; }

/* Replay chip: icon-only, pinned bottom-right on every variant. */
[data-replay][data-replay] {
  top: auto !important; left: auto !important; right: 16px !important; bottom: 16px !important;
  width: 44px !important; min-width: 44px !important; height: 44px !important;
  padding: 0 !important; justify-content: center !important;
}
/* Splash replay chip: same look as the replay chip, stacked right above it. */
[data-splash-replay][data-splash-replay] {
  position: fixed !important; top: auto !important; left: auto !important; right: 16px !important; bottom: 68px !important;
  width: 44px !important; min-width: 44px !important; height: 44px !important; margin: 0 !important;
  padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center !important;
  transform: none !important; z-index: 50 !important; cursor: pointer;
  background: var(--accent, #2E5A1C) !important; color: var(--on-accent, #FFFFFF) !important;
  border: 1.5px solid var(--ink, #0F1D0B) !important; box-shadow: 4px 4px 0 var(--ink, #0F1D0B) !important;
}
[data-splash-replay] > span,
[data-replay] > span {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}

/* Toast */
.si-toast {
  position: fixed; left: 50%; bottom: 72px; z-index: 1000; max-width: calc(100vw - 32px);
  padding: 12px 18px; box-sizing: border-box; background: var(--ink, #0F1D0B); color: var(--bg, #F6F0DF);
  border: 1.5px solid var(--ink, #0F1D0B); box-shadow: 4px 4px 0 var(--sun, #E6C84F);
  font: 500 13px/1.3 'IBM Plex Mono', monospace; letter-spacing: .04em; text-align: center;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.si-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Client-review device switcher */
.si-switch {
  position: fixed; left: 12px; bottom: 12px; z-index: 1000; display: flex; align-items: center; gap: 2px;
  padding: 4px; background: color-mix(in srgb, var(--card, #FFFCF3) 92%, transparent); color: var(--ink, #0F1D0B);
  border: 1px solid var(--ink, #0F1D0B); font: 500 11px/1 'IBM Plex Mono', monospace; opacity: .78;
  transition: opacity .15s ease; max-width: calc(100vw - 100px); flex-wrap: wrap;
}
.si-switch:hover, .si-switch:focus-within { opacity: 1; }
.si-switch .si-lbl { padding: 0 6px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #4D5A40); white-space: nowrap; }
.si-switch button {
  font: inherit; letter-spacing: .02em; min-height: 28px; padding: 0 8px; cursor: pointer;
  background: transparent; color: inherit; border: 1px solid transparent;
}
.si-switch button:hover { border-color: var(--ink, #0F1D0B); }
.si-switch button[aria-pressed="true"] { background: var(--ink, #0F1D0B); color: var(--bg, #F6F0DF); }
.si-switch button:focus-visible { outline: 2px solid var(--accent, #2E5A1C); outline-offset: 2px; }
@media (max-width: 699.98px) { html:not([data-view]) .si-switch { opacity: .6; } }

@media (max-width: 520px) { .si-switch .si-rev { display: none; } .si-switch { flex-wrap: nowrap; } }
html.si-lock .si-switch, html.si-lock [data-replay][data-replay], html.si-lock [data-splash-replay][data-splash-replay] { display: none !important; }