/* panel.css — the Panel's rows (js/panel.js). Everything lives under .pnl, so nothing here reaches the rest of the site.
   Type and ink come from tokens.css; each tile (and each switch) carries its own --hue, set by its row. */
.pnl{
  --pnl-tile:color-mix(in srgb, var(--ink) 6%, transparent);
  --pnl-tile-hover:color-mix(in srgb, var(--ink) 8%, transparent);
  --pnl-rail:color-mix(in srgb, var(--ink) 15%, transparent);
  --pnl-on-hue:rgba(8,8,8,.86);
  display:flex; flex-direction:column; gap:6px; padding:0 8px 8px;
  font-family:var(--font-sans); letter-spacing:normal; color:var(--ink);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
html[data-mode="light"] .pnl{ --pnl-tile:color-mix(in srgb, var(--ink) 4.5%, transparent); --pnl-tile-hover:color-mix(in srgb, var(--ink) 6.5%, transparent); --pnl-rail:color-mix(in srgb, var(--ink) 12%, transparent); }

/* the tile: its name and value on the left, the control on the right */
.pnl-tile{ position:relative; display:flex; align-items:stretch; justify-content:space-between; gap:10px; height:88px; padding:0 14px 0 16px; border-radius:16px; background:var(--pnl-tile); overflow:hidden; transition:background-color .25s var(--ease), box-shadow .25s var(--ease); }
.pnl-tile:hover, .pnl-tile.pnl-held{ background:var(--pnl-tile-hover); }
.pnl-tile:has(.pnl-ctl:focus-visible){ box-shadow:inset 0 0 0 1.5px var(--hue); }
.pnl-read{ display:flex; flex-direction:column; justify-content:center; gap:9px; min-width:0; }
.pnl-k{ font:500 12px/1 var(--font-sans); color:var(--ink-muted); white-space:nowrap; }
.pnl-v{ font:600 32px/.86 var(--font-sans); letter-spacing:-.03em; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* the control: the whole height of the tile is the place to take hold */
.pnl-ctl{ position:relative; flex:none; width:150px; touch-action:none; outline:none; }
.pnl-ctl svg{ display:block; overflow:visible; }
html[data-cursor="arrow"] .pnl-ctl{ cursor:grab; } html[data-cursor="arrow"] .pnl-held .pnl-ctl{ cursor:grabbing; }
.pnl-marks{ position:absolute; left:0; right:0; top:66px; height:11px; font:400 9.5px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-faint); pointer-events:none; }
.pnl-marks span{ position:absolute; top:0; white-space:nowrap; transition:color .2s var(--ease); }
.pnl-marks span.on{ color:var(--ink); }

/* swatches: three shades, the frame jumps from one to the next */
.pnl-c-swatches .pnl-sw{ position:absolute; top:17px; height:34px; border-radius:9px; box-shadow:inset 0 0 0 1px var(--line); }
.pnl-c-swatches .pnl-frame{ position:absolute; left:0; top:12px; height:44px; border-radius:13px; border:2.5px solid var(--hue); will-change:transform; }
.pnl-c-swatches .pnl-marks span{ transform:translateX(-50%); }

/* lever: it rests at one end or the other, never between */
.pnl-plate{ fill:var(--pnl-rail); }
.pnl-dome{ fill:color-mix(in srgb, var(--ink) 24%, transparent); }
.pnl-rest{ fill:var(--pnl-rail); }
.pnl-bat line{ stroke:var(--ink-faint); stroke-width:6; stroke-linecap:round; transition:stroke .2s var(--ease); }
.pnl-bat circle{ fill:var(--ink-muted); transition:fill .2s var(--ease); }
.pnl-up .pnl-bat line{ stroke:var(--hue); } .pnl-up .pnl-bat circle{ fill:var(--hue); }
.pnl-marks-lever{ top:0; height:100%; }

/* groups: five groups of bars, each drawn as its touch moves the field; the chosen one lights */
.pnl-groups{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; pointer-events:none; }
.pnl-grp{ display:flex; align-items:center; }
.pnl-grp i{ display:block; flex:none; border-radius:2px; background:var(--pnl-rail); transition:background-color .15s var(--ease); }
.pnl-grp.on i{ background:var(--hue); }

/* compass: a disc at the tile's edge, turned under a fixed index */
.pnl-ctl.pnl-c-compass{ width:164px; margin-right:-14px; }
.pnl-disc{ fill:var(--hue); }
.pnl-tick{ stroke:rgba(8,8,8,.45); stroke-width:1.1; stroke-linecap:round; }
.pnl-tick.major{ stroke:rgba(8,8,8,.75); stroke-width:1.5; }
.pnl-on-disc{ color:var(--pnl-on-hue); }
.pnl-gtext{ font:500 9px var(--font-mono); fill:currentColor; }
.pnl-index{ stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; }

/* drum: a knurled roller of glyphs, the chosen one under the marks */
.pnl-sh-mid{ stop-color:var(--ink); stop-opacity:.07; } .pnl-sh-edge{ stop-color:var(--ink); stop-opacity:.02; }
html[data-mode="light"] .pnl-sh-mid{ stop-color:var(--paper); stop-opacity:.9; } html[data-mode="light"] .pnl-sh-edge{ stop-color:var(--paper); stop-opacity:.15; }
.pnl-rib{ stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.pnl-drum-mark{ stroke:var(--hue); stroke-width:2; stroke-linecap:round; }
.pnl-g-ink{ color:var(--ink); } .pnl-g-hue{ color:var(--hue); }

/* toggles: one row of round switches, each lit in its own colour when on */
.pnl-tile.pnl-is-toggles{ height:auto; padding:12px 6px 12px; }
.pnl-toggles{ flex:1; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.pnl-tg{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:2px 0; outline:none; touch-action:manipulation; }
.pnl-key{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--pnl-rail); color:var(--ink-muted); transition:background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.pnl-key svg{ display:block; }
.pnl-tg:hover .pnl-key{ box-shadow:inset 0 0 0 1.5px var(--ink-faint); }
.pnl-tg.on .pnl-key{ background:var(--hue); box-shadow:inset 0 0 0 1.5px var(--hue); color:var(--pnl-on-hue); }
.pnl-tg:active .pnl-key{ transform:scale(.93); }
.pnl-tg:focus-visible .pnl-key{ outline:1.5px solid var(--hue); outline-offset:3px; }
.pnl-tl{ font:500 10.5px/1.2 var(--font-sans); text-align:center; color:var(--ink-faint); transition:color .2s var(--ease); }
.pnl-tg.on .pnl-tl{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  .pnl-tile, .pnl-marks span, .pnl-grp i, .pnl-bat line, .pnl-bat circle, .pnl-key, .pnl-tl{ transition:none; }
}