/* instrument.css: the shared chassis every creative instrument page sits in.
   Stage + panel layout, fields, buttons, chips, status voice, fullscreen,
   and the palpable-control feedback (knock, flash, detent). Page-specific
   racks stay in each page's own style block and may override these. */

/* The stage: the picture and its rail side by side, and the picture never
   leaves the screen. The preview column is sticky under the nav (nav.js
   publishes --nav-h), so the rail can be as long as the instrument needs and
   every change is watched where it is made. Under 821px the same idea turns
   vertical: the picture pins to the top and the rail scrolls beneath it. */
.re-stage{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1.4rem;align-items:start;margin:1.2rem 0 2rem}
.re-stage>.re-preview{position:sticky;top:calc(var(--nav-h,74px) + .9rem);max-height:calc(100dvh - var(--nav-h,74px) - 1.8rem)}
@media (max-width:820px){
  .re-stage{grid-template-columns:1fr;gap:1rem}
  .re-stage>.re-preview{top:calc(var(--nav-h,66px) + .35rem);z-index:5;max-height:44dvh;box-shadow:0 .6rem 1.6rem -.6rem #000}
}
.re-preview{position:relative;border:1px solid var(--hairline);border-radius:12px;overflow:hidden;
  background:#07070c;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.re-preview canvas{max-width:100%;max-height:100%;display:block}
/* display:block above is an author rule and beats the UA [hidden] rule, so a
   canvas marked hidden kept its box and pushed its sibling out of the stage.
   Third time this pattern has bitten in this codebase: an author display always
   needs its own [hidden] escape. */
.re-preview canvas[hidden]{display:none}
.re-panel{display:flex;flex-direction:column;gap:.9rem;font-family:var(--mono)}
.re-field{display:flex;flex-direction:column;gap:.3rem}
.re-lab{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;align-items:baseline}
.re-lab .re-val{color:var(--orange)}
input[type=text].re-in,select.re-in{font-family:var(--mono);font-size:.76rem;
  letter-spacing:.04em;color:var(--bone);background:color-mix(in oklab, var(--void) 86%, black);
  border:1px solid var(--hairline);border-radius:8px;padding:.55em .7em;width:100%}
.re-in:focus-visible{outline:2px solid var(--ember);outline-offset:1px;border-color:var(--orange)}
input[type=range]{accent-color:var(--orange);width:100%}
.re-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
  background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.55em 1.1em;cursor:pointer;
  transition:color .15s,border-color .15s}
.re-btn:hover{color:var(--bone);border-color:var(--orange)}
.re-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.re-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.re-toggle{display:inline-flex;align-items:center;gap:.5rem;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);cursor:pointer}
.re-toggle input{accent-color:var(--orange)}
.re-status{font-size:.64rem;letter-spacing:.06em;color:var(--muted);min-height:1.2em;white-space:pre-wrap}
.re-status.err{color:#ff6b6b}
.re-status.ok{color:var(--verified,#9fd6c2)}
.re-privacy{font-size:.58rem;letter-spacing:.06em;color:var(--verified,#9fd6c2)}
.re-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.re-chip{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.4em .7em;cursor:pointer;transition:color .15s,border-color .15s}
.re-chip[aria-pressed="true"],.re-chip[aria-checked="true"]{color:var(--bone);border-color:var(--orange);background:color-mix(in oklab,var(--orange) 14%,transparent)}
.re-chip:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.re-hint{font-size:.52rem;letter-spacing:.08em;text-transform:none;color:var(--muted);opacity:.75;font-weight:400}
/* full screen: the picture becomes the whole surface, controls stay on the keyboard */
.re-fs{position:absolute;right:.6rem;bottom:.6rem;z-index:3;font-family:var(--mono);font-size:.8rem;line-height:1;
  color:var(--muted);background:color-mix(in oklab,var(--void) 70%,transparent);border:1px solid var(--hairline);
  border-radius:8px;padding:.45em .6em;cursor:pointer;opacity:.55;transition:opacity .15s,color .15s,border-color .15s}
.re-preview:hover .re-fs{opacity:1}
.re-fs:hover{color:var(--bone);border-color:var(--orange)}
.re-fs:focus-visible{outline:2px solid var(--ember);outline-offset:2px;opacity:1}
.re-preview:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border:0;border-radius:0;background:#05050a}
/* the picture fills the screen: the buffer scales UP to the viewport,
   letterboxed by contain so the aspect holds and pixels stay honest */
.re-preview:fullscreen canvas{width:100vw;height:100vh;max-width:none;max-height:none;object-fit:contain}
/* palpable controls: a control that fires flashes and ticks back at you */
@keyframes re-knock{0%{transform:scale(1)}38%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes re-flash{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--orange) 70%,transparent)}
  100%{box-shadow:0 0 0 .5rem transparent}}
.re-hit{animation:re-knock .16s ease-out, re-flash .42s ease-out}
@keyframes re-detent{0%{background:color-mix(in oklab,var(--orange) 40%,transparent)}100%{background:transparent}}
.re-tick{animation:re-detent .18s ease-out}
@media (prefers-reduced-motion:reduce){.re-hit,.re-tick{animation:none}}
.re-keys{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--muted);margin:.2rem 0 .9rem}
.re-keys b{color:var(--bone);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.re-keys kbd{font-family:var(--mono);font-size:.58rem;color:var(--orange);border:1px solid var(--hairline);
  border-radius:4px;padding:.1em .35em;background:color-mix(in oklab,var(--void) 80%,transparent)}

/* ── reading measure for the small print (2026-08-13) ─────────────────────
   Hints, key legends, and seal lines had no measure at all, so on a wide
   screen they ran the full width of their container: 238 characters on the
   Loom's hint line, 222 on the Retro Engine's seal, 201 on its key legend.
   Small text needs a shorter line than body copy, not a longer one, because
   the eye has further to travel back for less reward. Values are in ch and
   land near 70 real characters at these sizes. */
.re-hint{max-width:60ch}
.re-keys{max-width:64ch}
/* fullscreen: the sticky clamp must not cap the fullscreen box */
.re-stage>.re-preview:fullscreen{position:fixed;top:0;max-height:none}