/* PANEL MODE — the control surface that takes the filmstrip's place while engaged.
   Uses Chain's own tokens throughout (--cn-*) so it reads as part of the same instrument rather
   than a bolted-on overlay. The accent is the existing amber, reused for "this is the parameter
   the keys are driving" exactly as the Master Dial already uses it. */

.pn-surface{ display:none; flex-direction:column; gap:10px; padding:10px 14px 12px;
  border-top:1px solid var(--cn-line-div); background:var(--cn-bg-panel,rgba(255,255,255,.02)); }
.pn-surface.on{ display:flex; }

/* ── header ─────────────────────────────────────────────── */
.pn-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pn-title{ font-size:10px; letter-spacing:.18em; color:var(--cn-amber); font-weight:600; }
.pn-spacer{ flex:1; }
.pn-page{ font-size:10px; letter-spacing:.08em; color:var(--cn-t-45,rgba(238,242,241,.45)); }
.pn-layers{ display:flex; gap:4px; flex-wrap:wrap; }
.pn-layerbtn{ display:flex; align-items:center; gap:5px; padding:4px 9px; border-radius:5px;
  border:1px solid var(--cn-line-div); background:transparent; color:var(--cn-t-68,rgba(238,242,241,.68));
  font-size:11px; letter-spacing:.04em; cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
.pn-layerbtn i{ font-style:normal; font-size:9px; padding:1px 4px; border-radius:3px;
  background:rgba(238,242,241,.09); color:var(--cn-t-45,rgba(238,242,241,.45)); }
.pn-layerbtn:hover{ border-color:var(--cn-line-knob); color:var(--cn-t-92,rgba(238,242,241,.92)); }
.pn-layerbtn.active{ border-color:var(--cn-amber); color:var(--cn-amber); background:rgba(230,150,60,.10); }
.pn-layerbtn.active i{ background:rgba(230,150,60,.20); color:var(--cn-amber); }
.pn-ghost{ padding:4px 9px; border-radius:5px; border:1px solid var(--cn-line-div); background:transparent;
  color:var(--cn-t-45,rgba(238,242,241,.45)); font-size:10px; letter-spacing:.08em; cursor:pointer; }
.pn-ghost:hover{ color:var(--cn-t-92,rgba(238,242,241,.92)); border-color:var(--cn-line-knob); }
.pn-ghost[aria-pressed="true"]{ color:var(--cn-amber); border-color:var(--cn-amber); }

/* The key legend. It replaces ten pairs of caps printed on the knobs themselves: one pair drives
   the selection, one moves it, so the whole scheme fits in the bar. */
.pn-key-note{ display:flex; align-items:center; gap:5px; margin-left:12px;
  font-size:9px; letter-spacing:.06em; color:var(--cn-t-45,rgba(238,242,241,.45)); white-space:nowrap; }
.pn-key-note b{ font:600 9px/1 var(--cn-font-mono,ui-monospace,monospace);
  padding:3px 5px; border-radius:4px; background:rgba(255,255,255,.07);
  border:1px solid var(--cn-line,rgba(238,242,241,.11)); color:var(--cn-t-70,rgba(238,242,241,.70)); }
.pn-key-note span{ margin:0 7px 0 2px; text-transform:uppercase; }
@media (max-width: 900px){ .pn-key-note{ display:none; } }

/* ── the 10 knobs, one row at a time ───────────────────────
   al: "can panel only have one row at a time with a scroll side bar that jumps to the next row".
   .pn-rows is a snapping scroller exactly one row tall (height set from the row's own measured
   height in wireRows, since a knob is an arc plus a wrapping name plus a caps line and any font
   change would move it). The native scrollbar is hidden and .pn-rowbar stands in for it: two
   segments that show which row you are on and jump to the other one. */
.pn-rowswrap{ display:flex; align-items:stretch; gap:8px; }
.pn-rows{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; overscroll-behavior:contain; scroll-snap-type:y mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.pn-rows::-webkit-scrollbar{ width:0; height:0; }
.pn-row{ scroll-snap-align:start; scroll-snap-stop:always; }
.pn-rowbar{ flex:0 0 auto; width:6px; display:flex; flex-direction:column; gap:5px; padding:2px 0; }
.pn-rowdot{ flex:1 1 0; width:4px; margin:0 auto; padding:0; border:0; border-radius:2px;
  background:var(--cn-line-knob,rgba(238,242,241,.30)); cursor:pointer;
  transition:background .16s var(--cn-ease,ease); }
.pn-rowdot:hover{ background:var(--cn-t-70,rgba(238,242,241,.70)); }
.pn-rowdot.on{ background:var(--cn-amber); }
.pn-rowdot:focus-visible{ outline:2px solid var(--cn-amber); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .pn-rows{ scroll-behavior:auto; } }
/* A 5-column grid, identical on both rows, so every knob is exactly the same width and the two
   rows line up column for column. This replaced a flex row with margin-left on the home row: that
   indent was meant to echo the keyboard's stagger, but it made the two rows different widths, so
   their five children resolved to different sizes and nothing aligned. The key caps on each knob
   already carry the mapping, so evenness is worth more than the stagger. */
.pn-row{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.pn-knob{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 4px 6px; border-radius:7px; border:1px solid transparent; background:rgba(255,255,255,.02);
  cursor:ns-resize; user-select:none; transition:border-color .12s,background .12s,transform .12s; }
.pn-knob.empty{ opacity:.3; cursor:default; }
.pn-knob:hover:not(.empty){ background:rgba(255,255,255,.05); }
.pn-knob.active{ border-color:var(--cn-amber); background:rgba(230,150,60,.08); }
.pn-knob.turn{ transform:scale(1.06); }
.pn-knob:focus-visible{ outline:2px solid var(--cn-amber); outline-offset:2px; }

.pn-arc{ position:relative; width:44px; height:44px; }
/* No transform here. The -90deg that starts the arc at 12 o'clock is applied to the two circles
   in the markup instead: on the <svg> it also rotated the needle, which carries its own angle, so
   the two composed and swung the needle right out of the dial. overflow is clipped for the same
   reason -- nothing should be able to draw outside the knob. */
.pn-arc svg{ width:44px; height:44px; overflow:hidden; }
.pn-track{ fill:none; stroke:rgba(238,242,241,.14); stroke-width:3; }
.pn-fill{ fill:none; stroke:var(--cn-amber); stroke-width:3; stroke-linecap:round; transition:none; }
/* NO transform-origin here, and that is the whole point.
   paintValues sets transform="rotate(a 22 22)" on this line — an SVG rotate that already names
   its own centre. A browser resolves that presentation attribute into the CSS transform
   property, and then applies it about transform-origin, so declaring 22px 22px here made the
   centre count twice: measured on the live page the needle rendered at -126.4 degrees where the
   maths said -51.8, an error of about 75 degrees that moved with the value and so never looked
   like a constant offset.
   This is why the earlier "needle and arc now agree" check was not worth much: it compared two
   numbers the code computed, and both were right. Nothing had asked the browser where the line
   actually ended up. Removing this line is the fix; measured after, the needle renders at -51.8. */
.pn-needle{ stroke:var(--cn-t-92,rgba(238,242,241,.92)); stroke-width:2; stroke-linecap:round; }
/* Sits in the knob's own corner, appearing on hover/focus so ten of them do not shout at once.
   Always in the DOM and always reachable — opacity, not display, so it never changes the knob's
   geometry and a keyboard user can still get to it. */
.pn-reset{ position:absolute; right:1px; top:1px; width:15px; height:15px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent; cursor:pointer;
  color:var(--cn-t-45,rgba(238,242,241,.45)); opacity:0; transition:opacity .14s, color .14s; }
.pn-reset svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2.2;
               stroke-linecap:round; }
.pn-knob:hover .pn-reset, .pn-knob:focus-within .pn-reset{ opacity:.75; }
.pn-reset:hover{ opacity:1 !important; color:var(--cn-amber); }
.pn-reset:focus-visible{ opacity:1; outline:2px solid var(--cn-amber); outline-offset:1px; }
@media (prefers-reduced-motion: reduce){ .pn-reset{ transition:none; } }

.pn-val{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--cn-font-mono,ui-monospace,monospace); font-size:10px; font-weight:600;
  color:var(--cn-t-92,rgba(238,242,241,.92)); pointer-events:none; }
.pn-name{ font-size:10px; line-height:1.15; text-align:center; color:var(--cn-t-68,rgba(238,242,241,.68));
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-caps{ display:flex; gap:3px; }
.pn-cap{ font-size:9px; min-width:13px; text-align:center; padding:1px 3px; border-radius:3px;
  background:rgba(238,242,241,.08); color:var(--cn-t-45,rgba(238,242,241,.45)); font-weight:600; }
.pn-knob.active .pn-cap{ background:rgba(230,150,60,.22); color:var(--cn-amber); }
.pn-empty{ font-size:11px; color:var(--cn-t-45,rgba(238,242,241,.45)); text-align:center; padding:2px 0 0; }

/* Off-screen but announced — parameter changes for screenreaders, throttled in panel.js. */
.pn-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── the dial's compact default + its engage button ─────── */
.cn-dial-panelbtn{ display:flex; align-items:center; gap:6px; margin-left:auto; padding:3px 9px;
  border-radius:5px; border:1px solid var(--cn-line-div); background:transparent;
  color:var(--cn-t-68,rgba(238,242,241,.68)); font-size:9px; letter-spacing:.12em; cursor:pointer; }
.cn-dial-panelbtn:hover{ color:var(--cn-amber); border-color:var(--cn-amber); }
.cn-dial-panelbtn[aria-pressed="true"]{ color:var(--cn-amber); border-color:var(--cn-amber);
  background:rgba(230,150,60,.12); }

@media (prefers-reduced-motion: reduce){
  .pn-knob, .pn-layerbtn{ transition:none; }
  .pn-knob.turn{ transform:none; }
}