/*
 * MICROTONE — HOLOGRAPHX HARDWARE header skin (v1)
 * Follows the MICROTONE shell-only rule: every selector starts with #header,
 * only colour/surface properties, no geometry, and nothing on the module canvas
 * (modules, knobs, jacks, cables, grid and scope are untouched).
 * Self-contained on purpose: the shared hx-hardware.css is NOT loaded here,
 * so no shared rule can reach the modules. Remove the <link> to undo.
 */

#header {
  --mt-acc: #1fe3ff;
  --mt-acc-glow: rgb(31 227 255 / 55%);
  background:
    radial-gradient(120% 90% at 50% -30%, rgb(255 255 255 / 7%), transparent 60%),
    linear-gradient(180deg, #18181b, #0c0c0e);
  border-color: #1f1f23;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), inset 0 -1px 0 #000, 0 8px 22px rgb(0 0 0 / 55%);
}

/* The MICROTONE wordmark keeps its original gradient treatment. */

#header .midi-section label {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.16em;
  color: #8f8c88;
}

#header .midi-section select,
#header #preset-select {
  font-family: 'Orbitron', sans-serif;
  color: #ebe8e4;
  background-color: #0d0d0f;
  border-color: #000;
  box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024, 0 1px 0 rgb(255 255 255 / 5%);
}

#header .action-btn,
#header .add-module-btn {
  font-family: 'Orbitron', sans-serif;
  color: #d7d4d0;
  background: linear-gradient(180deg, #2a2a2e, #1a1a1d);
  border-color: #0a0a0b;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 2px 0 #000, 0 3px 6px rgb(0 0 0 / 50%);
  text-shadow: none;
}

#header .add-module-btn.fx-btn {
  background: linear-gradient(180deg, #2c2620, #1b1712);
  color: #ffc98a;
}

#header .action-btn:hover,
#header .add-module-btn:hover {
  color: var(--mt-acc);
  border-color: #0a0a0b;
  filter: brightness(1.15);
}

#header .action-btn:focus-visible,
#header .add-module-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#header .action-btn.active,
#header .action-btn[aria-pressed='true'] {
  color: #061014;
  background: linear-gradient(180deg, var(--mt-acc), color-mix(in srgb, var(--mt-acc) 55%, #000));
  border-color: #000;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 0 18px var(--mt-acc-glow), 0 2px 0 #000;
}

#header .danger {
  color: #ff6b5e;
}