/* Sandbox page. Cream ground is --bg (#f4efe6). One sans: Figtree.
   Mono stays on keys and code. This page has neither. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/design/page-fonts/figtree-latin.woff2") format("woff2");
}

:root {
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-brand: var(--font-sans);
}

.sandbox-page {
  font-family: var(--font-sans);
  background: var(--bg);
}

.sandbox-banner {
  position: sticky;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 1;
  margin: 0;
  padding: var(--space-3) max(20px, 4vw);
  background: var(--bg-well);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
  text-align: center;
}

.sandbox-page .walk-intro,
.sandbox-page .walk-stage {
  max-width: var(--w-measure);
}

.sandbox-page .walk-controls .ag-btn,
.sandbox-page .walk-card .ag-btn,
.sandbox-page .walk-rail button {
  min-height: var(--target);
  min-width: var(--target);
  max-width: 100%;
  height: auto;
  white-space: normal;
  text-align: center;
}

.sandbox-status {
  margin: var(--space-3) 0 0;
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  font-weight: var(--w-ui);
  letter-spacing: var(--tr-ui);
}

.sandbox-page .walk-console {
  min-width: 0;
  max-width: 100%;
}

.sandbox-page .walk-value,
.sandbox-page .prose,
.sandbox-page h1,
.sandbox-page h2,
.sandbox-page .ag-btn {
  overflow-wrap: anywhere;
  scroll-margin-top: calc(120px + env(safe-area-inset-top));
}

@media (max-width: 768px) {
  .sandbox-banner { top: calc(56px + env(safe-area-inset-top)); }
}

@media (max-width: 640px) {
  .sandbox-page .ag-nav-brand,
  .sandbox-page .ag-footer a {
    min-height: var(--target);
    min-width: var(--target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sandbox-page,
  .sandbox-page *,
  .sandbox-page *::before,
  .sandbox-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}