/* ═══════════════════════════════════════════════════════════════════════════
   The rig's own chrome — everything that is NOT the object.
   Quiet on purpose: the whole screen is a photograph of a material, and a
   loud control panel is a second thing competing with it.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Selecta';src:url(../vendor/fonts/Selecta-Regular.otf) format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Selecta';src:url(../vendor/fonts/Selecta-Medium.otf) format('opentype');font-weight:500;font-display:swap}

:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.42,.64,1);
  --pt:1px;
  --ui:rgba(20,21,26,.72);
  --ui-bg:rgba(255,255,255,.72);
  --ui-line:rgba(20,21,26,.10);
}
body.dark{
  --ui:rgba(238,240,244,.76);
  --ui-bg:rgba(22,24,30,.62);
  --ui-line:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden;
  background:var(--bg,#f7f8fa);
  color:var(--ink,#14151a);
  font:400 12px/1.35 'Selecta',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease);
  touch-action:none;
}

/* ── the scene ─────────────────────────────────────────────────────────── */
#stage{
  position:fixed; inset:0;
  perspective:1180px;
  perspective-origin:50% 46%;
  cursor:grab;
}
#stage:active{cursor:grabbing}
#world{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform-style:preserve-3d;
}
#slabs{position:absolute; transform-style:preserve-3d}
/* the floor is a real plane, turned. The casts are its children, so they are
   sorted in 3-D against the slabs standing on it rather than being painted
   under everything by z-index. */
#floor{
  position:absolute; transform-style:preserve-3d;
  width:0; height:0;
}
/* the ambient pool, in SCREEN space — see the note above */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 88%,
    var(--floor,rgba(0,0,0,.05)) 0%,
    color-mix(in oklab, var(--floor,rgba(0,0,0,.05)), transparent 62%) 42%,
    transparent 78%);
}

/* ── chrome ────────────────────────────────────────────────────────────── */
#readout{
  position:fixed; left:20px; top:18px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ui); opacity:.7; pointer-events:none;
}

#rail{
  position:fixed; right:14px; top:14px; bottom:74px;
  width:236px; padding:14px 4px 14px 14px;
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--ui-bg);
  -webkit-backdrop-filter:blur(11px) saturate(1.35);
  backdrop-filter:blur(11px) saturate(1.35);
  border:1px solid var(--ui-line); border-radius:18px;
  scrollbar-width:thin;
}
#rail::-webkit-scrollbar{width:6px}
#rail::-webkit-scrollbar-thumb{background:var(--ui-line); border-radius:3px}

.grp{margin:0 10px 16px 0}
.grp > h4{
  margin:0 0 7px; font:500 10px/1 'Selecta',sans-serif;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ui); opacity:.55;
}
.chips{display:flex; flex-wrap:wrap; gap:4px}
.chip{
  font:400 11px/1 'Selecta',sans-serif; color:var(--ui);
  padding:6px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ui-line); background:transparent;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover{border-color:color-mix(in oklab, var(--ui) 40%, transparent)}
.chip[aria-pressed=true]{
  background:var(--ink,#14151a); color:var(--bg,#fff); border-color:transparent;
}
body.dark .chip[aria-pressed=true]{background:var(--ink); color:#111}

.knob{display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; margin:0 0 8px}
.knob > label{font-size:11px; color:var(--ui); opacity:.72}
.knob > output{font-size:10px; color:var(--ui); opacity:.5; font-variant-numeric:tabular-nums}
.knob > input{
  grid-column:1 / -1;
  -webkit-appearance:none; appearance:none;
  width:100%; height:16px; background:transparent; cursor:pointer; margin:0;
}
.knob > input::-webkit-slider-runnable-track{height:2px; border-radius:2px; background:var(--ui-line)}
.knob > input::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--ink,#14151a); margin-top:-4.5px;
  border:2px solid var(--bg,#fff);
}

/* the behaviour dock — the one control that is worth a thumb, so it is big
   and it is at the bottom where a thumb is */
#dock{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:3px; padding:5px;
  max-width:min(94vw, 980px); overflow-x:auto; scrollbar-width:none;
  background:var(--ui-bg);
  -webkit-backdrop-filter:blur(11px) saturate(1.35);
  backdrop-filter:blur(11px) saturate(1.35);
  border:1px solid var(--ui-line); border-radius:999px;
}
#dock::-webkit-scrollbar{display:none}
#dock .chip{white-space:nowrap; padding:9px 13px; border:0; min-height:34px}
@media (pointer:coarse){
  #dock{gap:4px; padding:6px}
  #dock .chip{min-height:44px; padding:0 16px; font-size:12.5px; display:flex; align-items:center}
  /* the rail lies along the foot on a phone, so everything in it is a thumb
     target too — including the sliders, whose 16px track is a mouse's idea of
     a control */
  #rail .chip{min-height:40px; padding:0 14px; font-size:12px; display:inline-flex; align-items:center}
  #rail .knob > input{height:34px}
  #rail .knob > input::-webkit-slider-thumb{width:18px; height:18px; margin-top:-8px}
  #rail .grp{margin-bottom:20px}
  .pk-cell{gap:4px}
}
#dock .chip[aria-pressed=true]{background:var(--ink,#14151a); color:var(--bg,#fff)}
body.dark #dock .chip[aria-pressed=true]{color:#111}

/* the one control that opens it — hidden on a desk, where the rail is simply
   there, and gated on WIDTH rather than pointer because it is about room */
#railBtn{
  position:fixed; right:14px; top:12px; z-index:56;
  display:none; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 15px;
  font:500 12px/1 'Selecta',sans-serif; color:var(--ui); cursor:pointer;
  background:var(--ui-bg);
  -webkit-backdrop-filter:blur(11px) saturate(1.35);
  backdrop-filter:blur(11px) saturate(1.35);
  border:1px solid var(--ui-line); border-radius:999px;
}
body.rail-open #railBtn{background:var(--ink,#14151a); color:var(--bg,#fff); border-color:transparent}
body.bare #railBtn{display:none}

@media (max-width:860px){
  #rail{
    /* the same rail, lying down: full width, up from the foot, over the scene */
    left:8px; right:8px; bottom:8px; top:auto; width:auto;
    max-height:min(62vh, 460px);
    padding:14px 4px 14px 14px;
    border-radius:20px;
    transform:translateY(calc(100% + 16px));
    transition:transform .34s var(--sheet, cubic-bezier(.32,.72,0,1));
    z-index:55;
  }
  body.rail-open #rail{transform:none}
  /* the dock steps aside for it rather than sitting under it */
  body.rail-open #dock{opacity:0; pointer-events:none}
  #railBtn{display:flex}
  /* the dock is the entire interface here, so it takes the whole foot of the
     screen rather than sitting as a pill in the middle of it */
  #dock{
    left:8px; right:8px; bottom:8px; transform:none; max-width:none;
    border-radius:16px;
  }
  #readout{font-size:10px}
}

/* ⚠ a scroller with `justify-content` clips its FIRST item once the contents
   overflow — the dock holds sixteen chips and on a phone it always does */
#dock{justify-content:flex-start}

/* the bare view: everything that is not the object stands down, so a
   screenshot is of the material and not of a control panel. */
body.bare #rail,body.bare #dock,body.bare #readout{display:none}

/* ═══ THE BANK ═════════════════════════════════════════════════════════════
   A sheet over the scene rather than a panel beside it: sixty-nine widgets is
   a thing you go and look at, and while you are looking at it the scene is
   not what you are reading. */
#picker{
  position:fixed; inset:12px; z-index:60;
  display:flex; flex-direction:column; gap:10px;
  padding:12px 12px 4px;
  background:color-mix(in oklab, var(--bg,#f7f8fa) 84%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--ui-line); border-radius:20px;
}
#picker[hidden]{display:none}
.pk-bar{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.pk-bar input{
  flex:1 1 auto; min-width:0;
  font:400 13px/1 'Selecta',system-ui,sans-serif; color:var(--ink);
  padding:9px 13px; border-radius:999px;
  border:1px solid var(--ui-line); background:transparent;
}
.pk-bar input:focus{outline:none; border-color:color-mix(in oklab, var(--ui) 45%, transparent)}
.pk-n{font-size:11px; color:var(--ui); opacity:.55; white-space:nowrap}
.pk-x{
  font:400 12px/1 'Selecta',sans-serif; color:var(--ui); cursor:pointer;
  padding:8px 13px; border-radius:999px; border:1px solid var(--ui-line); background:transparent;
}
.pk-grid{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  display:grid; gap:10px 8px; align-content:start;
  grid-template-columns:repeat(auto-fill, minmax(94px, 1fr));
  padding:2px 2px 14px;
}
.pk-cell{
  display:flex; flex-direction:column; align-items:stretch; gap:3px;
  padding:0; border:0; background:none; cursor:pointer; text-align:left;
}
.pk-cell[hidden]{display:none}
.pk-hold{
  position:relative; display:block; aspect-ratio:1; border-radius:14px;
  overflow:hidden; background:var(--ui-bg);
  box-shadow:0 0 0 1px var(--ui-line), 0 2px 8px rgba(0,0,0,.06);
  transition:box-shadow .16s var(--ease), transform .16s var(--ease);
}
.pk-cell:hover .pk-hold{transform:translateY(-2px); box-shadow:0 0 0 1px color-mix(in oklab, var(--ui) 34%, transparent), 0 6px 16px rgba(0,0,0,.12)}
.pk-cell[aria-pressed=true] .pk-hold{box-shadow:0 0 0 2px var(--ink), 0 6px 16px rgba(0,0,0,.14)}
.pk-hold .field{position:absolute; left:0; top:0; width:140px; height:140px; transform-origin:0 0; transform:scale(var(--fk))}
.pk-cell cite{font:500 10.5px/1.2 'Selecta',sans-serif; font-style:normal; color:var(--ink); opacity:.9}
.pk-cell small{font:400 9.5px/1.2 'Selecta',sans-serif; color:var(--ui); opacity:.5}
/* the scene keeps moving behind the sheet, but its widgets stop stepping —
   the budget is borrowed, not doubled */
body.picking #readout{opacity:.3}

.chip.wide{width:100%; justify-content:center; padding:9px 12px}

.note{margin:7px 0 0; font-size:10.5px; line-height:1.45; color:var(--ui); opacity:.5}

.pk-kinds{display:flex; flex-wrap:wrap; gap:4px; flex:0 0 auto}
.pk-kinds .chip{font-size:11px; padding:6px 10px; text-transform:lowercase}
.pk-kinds .chip[aria-pressed=true]{background:var(--ink,#14151a); color:var(--bg,#fff); border-color:transparent}
body.dark .pk-kinds .chip[aria-pressed=true]{color:#111}
.pk-take{margin-left:auto; border-style:dashed}
@media (pointer:coarse){ .pk-kinds .chip{min-height:38px; padding:0 13px; display:inline-flex; align-items:center} }

/* ═══ THE ONE TRANSPORT ════════════════════════════════════════════════════
   The rig opens STILL, so the control that starts it has to be visible rather
   than a key somebody has to know. Top left, beside the readout, where the eye
   already is. */
#playBtn{
  position:fixed; left:18px; top:44px; z-index:56;
  display:flex; align-items:center; gap:8px;
  min-height:34px; padding:0 14px 0 11px;
  font:500 11.5px/1 'Selecta',sans-serif; letter-spacing:.04em;
  color:var(--ui); cursor:pointer;
  background:var(--ui-bg);
  -webkit-backdrop-filter:blur(11px) saturate(1.35);
  backdrop-filter:blur(11px) saturate(1.35);
  border:1px solid var(--ui-line); border-radius:999px;
}
/* ▶ and ▮▮ drawn, so there is no glyph to go missing */
#playBtn > i{
  width:9px; height:11px; display:block; background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
#playBtn[aria-pressed=true] > i{
  clip-path:polygon(0 0, 34% 0, 34% 100%, 0 100%, 0 0, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 0);
  background:currentColor;
}
#playBtn[aria-pressed=true]{background:var(--ink,#14151a); color:var(--bg,#fff); border-color:transparent}
body.dark #playBtn[aria-pressed=true]{color:#111}
body.bare #playBtn{display:none}
@media (pointer:coarse){ #playBtn{min-height:44px; padding:0 18px 0 15px; font-size:13px} }