/* math-dials.css: the styles for js/math/kit/dials.js (prefix mdl). */
/* panel.css — the Panel's rows (js/panel.js). Everything lives under .mdl, so nothing here reaches the rest of the site.
   Type and ink come from tokens.css; each tile carries its own --hue, set by its row. */
.mdl{
  --mdl-tile:color-mix(in srgb, var(--ink) 6%, transparent);
  --mdl-tile-hover:color-mix(in srgb, var(--ink) 8%, transparent);
  --mdl-rail:color-mix(in srgb, var(--ink) 15%, transparent);
  --mdl-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"] .mdl{ --mdl-tile:color-mix(in srgb, var(--ink) 4.5%, transparent); --mdl-tile-hover:color-mix(in srgb, var(--ink) 6.5%, transparent); --mdl-rail:color-mix(in srgb, var(--ink) 12%, transparent); }

/* the tile: its name and value on the left, the control on the right */
.mdl-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(--mdl-tile); overflow:hidden; transition:background-color .25s var(--ease), box-shadow .25s var(--ease); }
.mdl-tile:hover, .mdl-tile.mdl-held{ background:var(--mdl-tile-hover); }
.mdl-tile:has(.mdl-ctl:focus-visible){ box-shadow:inset 0 0 0 1.5px var(--hue); }
.mdl-read{ display:flex; flex-direction:column; justify-content:center; gap:9px; min-width:0; }
.mdl-k{ font:500 12px/1 var(--font-sans); color:var(--ink-muted); white-space:nowrap; }
.mdl-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 */
.mdl-ctl{ position:relative; flex:none; width:150px; touch-action:none; outline:none; }
.mdl-ctl svg{ display:block; overflow:visible; }
html[data-cursor="arrow"] .mdl-ctl{ cursor:grab; } html[data-cursor="arrow"] .mdl-held .mdl-ctl{ cursor:grabbing; }
.mdl-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; }
.mdl-marks span{ position:absolute; top:0; white-space:nowrap; transition:color .2s var(--ease); }
.mdl-marks span.on{ color:var(--ink); }

/* track: a slider over a gradient, the thumb a frame you look through */
.mdl-c-track .mdl-rail{ position:absolute; left:0; right:0; top:20px; height:28px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line); }
.mdl-c-track .mdl-detents i{ position:absolute; top:52px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--ink-faint); }
.mdl-c-track .mdl-thumb{ position:absolute; left:0; top:13px; width:26px; height:42px; border-radius:10px; border:3px solid var(--hue); box-shadow:0 0 0 1px rgba(8,8,8,.16), inset 0 0 0 1px rgba(8,8,8,.16), 0 4px 14px rgba(8,8,8,.22); will-change:transform; }

/* arc: the knob travels over the hill */
.mdl-arc-rail, .mdl-arc-fill{ fill:none; stroke-width:10; stroke-linecap:round; }
.mdl-arc-rail{ stroke:var(--mdl-rail); }
.mdl-arc-fill{ stroke:var(--hue); }
.mdl-knob{ fill:var(--ink-fill); }
.mdl-marks-arc{ top:66px; }

/* bars: sweep them */
.mdl-bars{ position:absolute; left:2px; right:2px; top:19px; bottom:19px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.mdl-bars i{ width:3px; height:100%; border-radius:2px; background:var(--mdl-rail); transition:background-color .12s var(--ease); }
.mdl-bars i.on{ background:var(--hue); }

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

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

@media (prefers-reduced-motion:reduce){
  .mdl-tile, .mdl-marks span, .mdl-bars i{ transition:none; }
}