/* The pixel field and its player on /areas/operating-principles-io. No tokens and
   no hex of its own: it sits inside a `.hb`, whose sheet defines --wf-* and
   --io-* (ADR 0007). Voice is --io-accent, music is --io-accent-2. */
.px-wrap{position:relative;border-top:1px solid var(--wf-border-subtle);
  scroll-margin-top:calc(var(--nav-h) + var(--sub-h))}
.px-stage{position:relative}
.px-stage.is-drop .px-field{outline:2px dashed var(--io-accent);outline-offset:-8px}
.px-field{display:block;width:100%;height:clamp(420px,78vh,860px);cursor:crosshair;
  /* Sideways drags paint on touch screens; vertical drags still scroll the page. */
  touch-action:pan-y}

.px-deck{position:fixed;left:50%;bottom:22px;z-index:120;transform:translateX(-50%);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;
  width:max-content;max-width:min(1040px,calc(100vw - 32px));padding:8px 10px;
  border:1px solid var(--wf-border);border-radius:16px;
  background:color-mix(in srgb,var(--wf-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.78),0 2px 10px rgba(0,0,0,.34);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--wf-fg-muted)}
.px-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.px-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--wf-border-strong);background:transparent;color:var(--wf-fg-muted);
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.px-btn:hover{color:var(--wf-fg);border-color:var(--wf-fg-subtle)}
.px-btn:focus-visible{outline:2px solid var(--io-accent);outline-offset:2px}
.px-btn[aria-pressed="true"]{color:var(--wf-fg);border-color:var(--io-accent);background:var(--io-accent-soft)}
.px-btn[data-tone="music"][aria-pressed="true"]{border-color:var(--io-accent-2);
  background:color-mix(in srgb,var(--io-accent-2) 14%,transparent)}
.px-play{padding:8px 10px}
.px-track{flex:1 1 320px;min-width:0}
.px-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:.02em;color:var(--wf-fg)}
.px-seek{flex:1 1 120px;min-width:80px;accent-color:var(--io-accent)}
.px-time{font-variant-numeric:tabular-nums;color:var(--wf-fg-subtle)}
.px-meters{gap:14px;padding-left:4px}
.px-meter{display:inline-flex;align-items:center;gap:8px}
.px-meter i{display:block;width:64px;height:4px;border-radius:2px;background:var(--wf-border);
  position:relative;overflow:hidden}
.px-meter i::after{content:"";position:absolute;inset:0;background:var(--io-accent);
  transform-origin:left;transform:scaleX(var(--v,0));transition:transform .08s linear}
.px-meter[data-tone="music"] i::after{background:var(--io-accent-2)}
.px-state{min-width:96px;color:var(--wf-fg)}
.px-cc{font-weight:700;letter-spacing:.08em}
.px-badge{padding:2px 6px;border-radius:4px;border:1px solid var(--wf-border-strong);
  color:var(--wf-fg);font-weight:700;letter-spacing:.06em}
.px-note{flex-basis:100%;margin:0;text-align:center;text-transform:none;letter-spacing:.02em;
  color:var(--wf-fg-subtle)}
.px-error{flex-basis:100%;margin:0;text-transform:none;letter-spacing:.02em;color:var(--io-accent-2)}

.px-cap{position:absolute;left:24px;top:18px;margin:0;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wf-fg-subtle)}

/* THE ORANGE BAR AS A FOOTER. Every other area page fixes it to the window;
   here the floating controls own the bottom of the window, so the bar sits at
   the end of the page and scrolls with it. `relative`, not `static`: its home
   button is centred with absolute positioning against it. */
.px-footer .io-nav{position:relative;z-index:auto;box-shadow:none}
/* The floating deck is ~58px tall and 22px off the bottom: the page's own
   bottom padding keeps the footer clear of it. */
body:has(.px-deck){padding-bottom:96px}
/* area.css pads every page's <main> 96px at the bottom; here the field is the
   last section and the footer should meet it, not a strip of page background. */
main:has(.px-wrap){padding-bottom:0}

@media (max-width:640px){
  .px-deck{bottom:12px;gap:6px 10px;padding:8px}
  .px-long{display:none}
  body:has(.px-deck){padding-bottom:124px}
  .px-btn{padding:7px 10px}
  .px-name{max-width:110px}
  .px-meter i{width:40px}
  .px-state{min-width:0}
  .px-cap{left:16px}
}