/* Tone Lab controls: buttons, fields, menus, switches, keys, badges, chips, the scope, knobs and jacks, usable on any page.
   See design/guidelines.md (Type, Controls, Knobs, Jacks). Load after tokens.css and base.css. Sizes here are the app's; cards
   tighten a few of them in rack.css. Text on a --set or ink fill is --surface (white); on --live it is --ink. */

:root {
  /* Mask images, so only their shape counts: the fill comes from currentColor. */
  --path-through: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M0 9h16'/%3E%3Crect x='4.5' y='5.5' width='7' height='7'/%3E%3C/svg%3E");
  --path-around: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M0 9h1.8V1.8h12.4V9H16'/%3E%3Crect x='4.5' y='5.5' width='7' height='7'/%3E%3C/svg%3E");
  /* A data URI can't read a custom property, so the chevron's stroke writes out --ink (#111). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ctl-line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.btn:hover { background: var(--well); }
.btn:active { background: var(--pressed); }
/* A disabled button keeps its shape and greys its text and border. */
.btn:disabled, .btn:disabled:hover { border-color: var(--disabled-line); background: var(--surface); color: var(--disabled-text); cursor: default; }
.btn.sq { width: 32px; padding: 0; }
.btn.primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.big { gap: 8px; height: 48px; padding: 0 20px; font-size: 15px; }
.btn[aria-pressed="true"] { border-color: var(--set); background: var(--set); color: var(--surface); }
/* Bypass draws the signal path: a line through a box, or a line that hops over it when the module is bypassed. */
.pwr::before { content: ""; width: 14px; height: 14px; background: currentColor; mask: var(--path-through) center / contain no-repeat; -webkit-mask: var(--path-through) center / contain no-repeat; }
.pwr[aria-pressed="true"]::before { mask-image: var(--path-around); -webkit-mask-image: var(--path-around); }
.play { min-width: 80px; border-color: var(--ink); background: var(--ink); color: var(--surface); }
.play:hover { background: var(--primary-hover); }
.play.on, .play.on:hover { border-color: var(--live); background: var(--live); color: var(--ink); }
.skip, .hist { display: flex; gap: 4px; }

/* ---------- fields: a muted label before the value ---------- */
.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: 500 12px/1 var(--font-ui);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.field input, .field b { width: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: 600 15px/1 var(--font-ui); text-align: right; outline: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.field b { width: auto; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* The input itself draws no outline, so the whole field takes the focus ring. */
.field:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.field.pos { justify-content: center; min-width: 108px; color: var(--ink); font: 600 15px/1 var(--font-ui); }

/* ---------- menus and segmented switches: more than six choices is a menu, six or fewer a switch ---------- */
.sel {
  height: 32px;
  width: 140px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--ctl-line);
  border-radius: 0;
  background: var(--surface) var(--chevron) no-repeat right 10px center;
  color: var(--ink);
  font: 500 13px/1 var(--font-ui);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.sel:hover { border-color: var(--ink); }
.seg { display: inline-flex; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ctl-line); }
.seg button {
  height: 24px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text);
  font: 500 11.5px/1 var(--font-ui);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.seg button + button { box-shadow: inset 1px 0 0 var(--ctl-line); }
.seg button:hover { background: var(--well); }
.seg button[aria-checked="true"] { background: var(--set); color: var(--surface); box-shadow: none; }
/* Inside the switch, so the ring isn't hidden under the next segment. */
.seg button:focus-visible { outline-offset: -2px; }
/* The focused segment is always the chosen one, and an ink ring vanishes on its ink fill, so it turns white and sits further in. */
.seg button[aria-checked="true"]:focus-visible { outline-color: var(--surface); outline-offset: -4px; }

/* ---------- keys, badges and chips ---------- */
/* Keys and badges are a 1 px outline with no fill. */
kbd { padding: 1px 5px; border: 1px solid var(--ctl-line); background: none; color: var(--text); font: 500 11.5px/1.4 var(--font-ui); font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; padding: 3px 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 500 12px/1.3 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The module picker's chip (rack.css): quiet until pointed at, and the picked one fills ink. */
.chip { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid transparent; background: none; color: var(--ink); font: 500 13px/1.2 var(--font-ui); white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: var(--line); }
.chip.picked { border-color: var(--ink); background: var(--ink); color: var(--surface); }

/* ---------- the scope: a 1.25 px ink line in a 32 px box ---------- */
.scope { flex: 1 1 40px; min-width: 40px; height: 32px; border: 1px solid var(--line); background: var(--surface); }
.scope path { fill: none; stroke: var(--ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ---------- knobs: a track, a value arc and the number, with nothing else to read ---------- */
.knob {
  --ks: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 60px;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.knob svg { width: var(--ks); height: var(--ks); overflow: visible; }
.knob .track { fill: none; stroke: var(--knob-track); stroke-width: var(--knob-arc); }
.knob .val { fill: none; stroke: var(--knob-val); stroke-width: var(--knob-arc); }
.knob:hover .track { stroke: var(--cell-hover); }
.knob .lbl { order: -1; color: var(--muted); font: 500 10.5px/1.1 var(--font-ui); white-space: nowrap; }
/* The readout sits in the open foot of the arc, always on show. */
.knob .read { margin-top: calc(var(--ks) * -.17); padding: 1px 3px; color: var(--ink); font: 600 12px/1.2 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums; }
.knob.active .read { background: var(--ink); color: var(--surface); }
/* The arc thickens as the knob shrinks. */
.knob.lg { --ks: 64px; --knob-arc: 3.5px; gap: 4px; width: 96px; }
.knob.lg .lbl { font-size: 12px; }
.knob.lg .read { font-size: 15px; }
.knob.mini { --ks: 26px; --knob-arc: 6px; width: 44px; }
.knob.mini .lbl, .knob.mini .read { font-size: 10px; }
/* In the top bar a mini knob puts its label and readout beside it. */
.bar .knob { --ks: 26px; --knob-arc: 6px; flex-direction: row; width: auto; gap: 6px; }
.bar .knob .lbl { font-size: 12px; }
.bar .knob .read { min-width: 4ch; margin: 0; padding: 0; font-size: 13px; text-align: left; }

/* ---------- jacks: round is an output, square an input, colour the signal kind (data-k), a filled centre patched ---------- */
.jack {
  /* Above the leads inside a rack (rack.css, layering). */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 40px;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.jack i { position: relative; display: block; width: 14px; height: 14px; border: var(--jack-bw) solid var(--k); background: var(--surface); }
.jack.out i { border-radius: 50%; }
.jack.patched i::after { content: ""; position: absolute; inset: 2px; background: var(--k); }
.jack.out.patched i::after { border-radius: 50%; }
.jack:hover i { outline: 1px solid var(--k); outline-offset: 2px; }
.jack span { color: var(--muted); font: 500 10px/1.2 var(--font-ui); white-space: nowrap; }