/* Copyright (c) 2026 UC Berkeley. All rights reserved.
   Design rules copied verbatim from an upstream web demo's stylesheet and used
   here with its authors' permission: the tokens, base type and background,
   the glass material, segmented keys and toggles, round icons, separators,
   the range slider and the motion rules. Adaptations live in css/app.css. */

:root {
  /* The project site's palette, so page and demo read as one system. */
  --page: #ffffff;
  --bg: #f5f5f7;
  --fill: #e8e8ed;
  --hair: #d2d2d7;
  --ink: #1d1d1f;
  --ink2: #6e6e73;
  /* Translucent material: white glass over the studio. Popovers, sheets
     and the boot card carry text over the robot, so theirs is denser. */
  --mat: rgba(255, 255, 255, 0.72);
  --mat-dense: rgba(252, 252, 253, 0.88);
  --mat-line: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --mat-blur: saturate(180%) blur(24px);
  --lift: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(.28, .11, .32, 1);
  --display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Layer bands: chrome never covers the headline, and a panel holding a
     live hint rises so its caption clears its neighbours. */
  --z-chrome: 10;
  --z-hint: 20;
  --z-headline: 30;
  --z-boot: 40;
  --edge: 20px;
  --dock-h: 52px;
  /* Chrome keeps clear of notches and home bars on every edge it touches. */
  --pad-top: max(var(--edge), env(safe-area-inset-top));
  --pad-left: max(var(--edge), env(safe-area-inset-left));
  --pad-right: max(var(--edge), env(safe-area-inset-right));
  --pad-bottom: max(var(--edge), env(safe-area-inset-bottom));
  --dock-bottom: max(var(--edge), calc(env(safe-area-inset-bottom) + 12px));
}

* { margin: 0; box-sizing: border-box; }

/* A seamless cyclorama: the canvas is transparent and the floor draws only
   shadows and a fading grid, so floor and backdrop are one surface whose
   edge meets the site's slot colour. */
html, body { height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #fbfbfd 0%, #f5f5f7 60%, #efeff2 100%) var(--bg);
  font: 400 14px/1.43 var(--text); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01"; color: var(--ink); user-select: none; }
canvas { display: block; cursor: grab; touch-action: none; }
canvas:active { cursor: grabbing; }
button, input { font: 500 13px/1 var(--text); letter-spacing: -0.01em; color: inherit;
  -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The material sits on ::before: a backdrop-filter on a panel itself would
   stop the popovers nested in it from blurring the scene. */
.glass { isolation: isolate; }
.glass::before { content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; background: var(--mat);
  box-shadow: var(--mat-line), var(--lift);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
.glass.dense::before { background: var(--mat-dense); }

.key, .toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 12px; border-radius: 999px; font: 500 13px/1 var(--text);
  white-space: nowrap; }
.toggle { border: none; background: transparent; cursor: pointer; position: relative;
  color: var(--ink2); transition: background 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease); }
/* The world model is always shown, so its key wears the ON segment. */
.key, .toggle:not(.off) { background: var(--page); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.toggle.off:hover { background: rgba(0, 0, 0, 0.04); }

.icon { width: 40px; height: 40px; border-radius: 50%; border: none; flex: none;
  display: grid; place-items: center; background: transparent; color: var(--ink);
  cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.icon:hover { background: rgba(0, 0, 0, 0.05); }
.icon:active { background: rgba(0, 0, 0, 0.08); }
.icon.on { background: var(--ink); color: #fff; }
.sep { width: 1px; height: 24px; background: var(--hair); margin: 0 6px; flex: none; }

/* Slider: a hairline track that fills with ink up to the thumb (--p, main.js). */
input[type=range] { -webkit-appearance: none; appearance: none; width: 112px;
  height: 22px; flex: none; background: transparent; cursor: pointer; --p: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--ink) var(--p), var(--hair) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hair); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px;
  margin-top: -8px; border: none; border-radius: 50%; background: var(--page);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.18); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: none;
  border-radius: 50%; background: var(--page);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.18); }
input[type=range]:disabled { opacity: 0.4; cursor: default; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}