/* Industrial control surfaces. Scope these classes to the action bar and map tools. */
.machine-case, .machine-key, .machine-rail {
  --machine-surface: color-mix(in srgb, var(--panel) 75%, var(--line));
  --machine-bed: color-mix(in srgb, var(--panel2) 82%, var(--line));
  --machine-edge: color-mix(in srgb, var(--muted) 63%, var(--line));
  --machine-shadow: color-mix(in srgb, #141411 38%, transparent);
  --machine-glint: color-mix(in srgb, #fff5df 27%, transparent);
  --machine-gold: color-mix(in srgb, var(--accent) 37%, #caad73);
  --machine-on: var(--target);
}
:root[data-theme="dark"] :is(.machine-case,.machine-key,.machine-rail) {
  --machine-surface: color-mix(in srgb, var(--panel) 85%, var(--line));
  --machine-bed: color-mix(in srgb, var(--bg) 85%, #0e0d0a);
  --machine-edge: color-mix(in srgb, var(--line) 79%, var(--muted));
  --machine-shadow: color-mix(in srgb, #0d0c0a 68%, transparent);
  --machine-glint: color-mix(in srgb, #e2dac6 16%, transparent);
}
.machine-case {
  position: relative;
  min-width: 0;
  padding: 16px 23px;
  border: 1px solid var(--machine-edge);
  border-radius: 4px;
  background-color: var(--machine-surface);
  background-image: linear-gradient(112deg,var(--machine-glint),transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.73' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px var(--machine-glint), inset 0 -2px var(--machine-shadow), 0 4px 0 color-mix(in srgb,var(--machine-edge) 66%,var(--bg));
}
.machine-case::before {
  content: '';
  position: absolute;
  inset: 5px;
  background:
    var(--machine-screw) left top,
    var(--machine-screw) right top,
    var(--machine-screw) left bottom,
    var(--machine-screw) right bottom;
  background-size: 11px 11px;
  background-repeat: no-repeat;
  pointer-events: none;
  --machine-screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.6' fill='%23454136' stroke='%231b1915'/%3E%3Cpath d='M3 7.5 8 4' stroke='%231b1915' stroke-width='1.2'/%3E%3Cpath d='M3.5 8.3 8.5 4.8' stroke='%23c7b79b' stroke-opacity='.57' stroke-width='.65'/%3E%3C/svg%3E");
}
.machine-recess {
  background: var(--machine-bed);
  border: 1px solid var(--machine-edge);
  border-radius: 3px;
  box-shadow: inset 0 2px 5px var(--machine-shadow), 0 1px 0 var(--machine-glint);
}
.machine-mark {
  color: var(--accent-text);
  font: 800 .73rem/1.25 var(--f-sign, system-ui);
  text-transform: uppercase;
  letter-spacing: .13em;
}
.machine-key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .56em;
  min-width: 44px;
  min-height: 46px;
  padding: .56em .8em;
  border: 1px solid var(--machine-edge);
  border-radius: 3px;
  background: linear-gradient(to bottom,var(--machine-glint),transparent 51%),var(--machine-surface);
  color: var(--ink);
  box-shadow: inset 0 1px var(--machine-glint), inset 0 -2px color-mix(in srgb,var(--machine-shadow) 78%,transparent), 0 2px 0 var(--machine-shadow);
  font: 760 .89rem/1.2 var(--f-ui,system-ui);
  text-align: left;
}
.machine-key > .machine-icon { width: 1.25em; height: 1.25em; color: currentColor; flex: none; }
.machine-key:hover:not(:disabled) { border-color: var(--accent-text); background: color-mix(in srgb,var(--machine-surface) 87%,var(--accent)); }
.machine-key:focus-visible { outline: 2px solid var(--focus,var(--river)); outline-offset: 3px; z-index: 1; }
.machine-key:disabled { opacity: .54; box-shadow: none; cursor: default; }
.machine-key:is(.active,[aria-pressed="true"]),.machine-key:active:not(:disabled) {
  background: color-mix(in srgb,var(--machine-bed) 91%,var(--machine-on));
  border-color: var(--machine-on);
  box-shadow: inset 0 2px 4px var(--machine-shadow);
}
.machine-key[data-key-indicator] { padding-right: 19px; }
.machine-key[data-key-indicator]::after {
  content: ''; position: absolute; right: 6px; top: 7px; width: 6px; height: 3px;
  border-radius: 1px; background: color-mix(in srgb,var(--muted) 49%,var(--machine-bed));
}
.machine-key[data-key-indicator]:is(.active,[aria-pressed="true"])::after { background: var(--machine-on); }
.machine-key.machine-gold {
  color: #211a10;
  border-color: color-mix(in srgb,var(--machine-gold) 52%,#2b2013);
  background: linear-gradient(155deg,#fff3cf48,transparent 48%,#3b291d25),var(--machine-gold);
  box-shadow: inset 0 0 0 2px #3a2b2147, inset 0 2px 0 #fff1c291, 0 3px 0 #2d2419af;
}
.machine-key.machine-gold:hover:not(:disabled) {
  color:#211a10;
  background: color-mix(in srgb,var(--machine-gold) 85%,#fff2cc);
}
.machine-key.machine-gold:active:not(:disabled) { box-shadow: inset 0 2px 4px #3b291d85; }
.machine-rail {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px 3px 5px;
  background: var(--machine-bed);
  border: 1px solid var(--machine-edge);
  border-bottom: 3px double var(--machine-edge);
  box-shadow: inset 0 2px 4px var(--machine-shadow);
  border-radius: 3px;
}
.machine-rail .machine-key { min-width: 44px; min-height: 44px; padding: .32em .6em; }
.machine-scale {
  color: var(--ink);
  font: 800 1.45rem/1 var(--f-sign,system-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: .045em;
}