/*
 * Look A, Bench Instrument. Warm gray hardware, one signal orange, a dark faceplate.
 * Tokens plus a few shapes. Structure lives in styles.css.
 */

html[data-skin="bench"] {
  --ground: #ECEAE4;
  --surface: #F7F6F2;
  --surface-2: #FFFFFF;
  --ink: #18181A;
  --muted: #5E5B55;
  --line: #D3D0C8;
  --accent: #C2410C;
  --on-accent: #FFFFFF;
  --deck: #1C1D1F;
  --deck-ink: #F2F1EC;
  --deck-muted: #A8A69F;
  --deck-line: #36383C;
  --key: #2C2D30;
  --key-ink: #F7F6F2;
  --key-ring: #F97316;
  --mark: #77756F;
  --mark-hot: #F97316;
  --radius: 26px;
  --radius-sm: 14px;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --backdrop: #DAD7CF;
  /* Two colors: signal orange for whatever is chosen or primary, sage (the readout's green-gray) for what is at rest. */
  --select: linear-gradient(135deg, #D9480F, #9A3412);
  --select-ink: #FFFFFF;
  --select-ring: #F97316;
  --chip: #DDE0D3;
  --chip-line: #C2C6B4;
  --chip-ink: #23251E;
  --words: #9A3412;
}

html[data-skin="bench"][data-theme="dark"] {
  --ground: #141516;
  --surface: #1E2022;
  --surface-2: #232527;
  --ink: #F2F1EC;
  --muted: #A8A69F;
  --line: #36383C;
  --accent: #F97316;
  --on-accent: #1A0B02;
  --deck: #0C0D0E;
  --deck-line: #2C2E31;
  --key: #232527;
  --backdrop: #0A0A0B;
  --select: linear-gradient(135deg, #FDBA74, #F97316);
  --select-ink: #1A0B02;
  --select-ring: #F97316;
  --chip: #252A23;
  --chip-line: #3C4338;
  --chip-ink: #E4E7DA;
  --words: #FDBA74;
}

/* The LCD strip: a pale green-gray readout set into the dark faceplate. */
html[data-skin="bench"] .tape-wrap { margin: 10px 10px 0; height: 44px; border-radius: 10px; background: #D8DBCF; border: 0; box-shadow: inset 0 2px 5px rgb(0 0 0 / .28); overflow: hidden; }
html[data-skin="bench"] .tape i { background: #9DA190; }
html[data-skin="bench"] .tape i[data-received] { background: #2A2C24; }
html[data-skin="bench"] .tape i[data-hot] { background: #C2410C; box-shadow: none; }
html[data-skin="bench"] .glyph::before, html[data-skin="bench"] .tape-empty { color: #55584B; }
html[data-skin="bench"] .glyph[data-hot]::before { color: #C2410C; }
html[data-skin="bench"] .scope path { stroke: #7C8070; }
html[data-skin="bench"] .scope path.live { stroke: #C2410C; }

/* A machined key with a small orange index dot, and a speaker grille behind it. */
html[data-skin="bench"] .key-stage {
  background-image: radial-gradient(circle, rgb(255 255 255 / .09) 1.2px, transparent 1.6px);
  background-size: 11px 11px; background-position: center;
}
html[data-skin="bench"] .key-cap { background: radial-gradient(circle at 50% 28%, #3A3C40, #232427 70%); }
html[data-skin="bench"] .key-label, html[data-skin="bench"] .slider span { letter-spacing: .18em; }

html[data-skin="bench"] .modes { background: var(--chip); border-color: var(--chip-line); }
html[data-skin="bench"] .mode { color: var(--chip-ink); }
html[data-skin="bench"] .mode[aria-selected="true"] { color: var(--select-ink); box-shadow: 0 2px 8px rgb(194 65 12 / .35); }
html[data-skin="bench"] .act-main { background: var(--select); border-color: transparent; color: var(--select-ink); }
html[data-skin="bench"] .act-main[aria-pressed="true"] { background: var(--chip); border: 1px solid var(--chip-line); color: var(--chip-ink); }