/*
 * HOLOGRAPHX HARDWARE — shared visual layer (v1)
 * Opt-in: add class "hx-hw" to <body> and set --hx-acc on body or app root.
 * Purely visual. Never hide, reorder or re-state controls from here.
 */

@font-face {
    font-family: 'Orbitron';
    src: local('Orbitron'), url('/shared/fonts/Orbitron-Variable.ttf') format('truetype-variations'), url('/shared/fonts/Orbitron-Variable.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

body.hx-hw {
    --hx-acc: #ff2d3d;
    --hx-acc-rgb: 255, 45, 61;
    --hx-acc-glow: rgba(var(--hx-acc-rgb), .55);
    --hx-acc-dim: rgba(var(--hx-acc-rgb), .16);

    --hx-ink: #ebe8e4;
    --hx-ink-2: #b9b5b0;
    --hx-mute: #8f8c88;
    --hx-font: 'Orbitron', 'Rajdhani', sans-serif;
    --hx-mono: 'Share Tech Mono', 'Orbitron', monospace;

    --hx-chassis:
        radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.07), transparent 60%),
        linear-gradient(180deg, #141416, #0a0a0b 40%, #070708);

    --hx-bar-bg: linear-gradient(180deg, #18181b, #0f0f11);
    --hx-bar-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #1f1f23, 0 6px 16px rgba(0,0,0,.6);

    --hx-well-bg: linear-gradient(180deg, #0c0c0e, #101012);
    --hx-well-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px #19191c, 0 1px 0 rgba(255,255,255,.05);

    --hx-key-bg: linear-gradient(180deg, #2a2a2e, #1a1a1d);
    --hx-key-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px #0a0a0b, 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5);
    --hx-key-on-bg: linear-gradient(180deg, var(--hx-acc), color-mix(in srgb, var(--hx-acc) 58%, #000));
    --hx-key-on-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(0,0,0,.5), 0 0 10px var(--hx-acc-dim), 0 2px 0 #000;

    --hx-lcd-bg: linear-gradient(180deg, color-mix(in srgb, var(--hx-acc) 6%, #050202), color-mix(in srgb, var(--hx-acc) 9%, #0a0404));
    --hx-lcd-shadow: inset 0 2px 6px #000, inset 0 0 0 1px color-mix(in srgb, var(--hx-acc) 22%, #0a0a0a), 0 1px 0 rgba(255,255,255,.05);
    --hx-lcd-lines: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);

    --hx-radius-key: 8px;
    --hx-radius-well: 12px;
}

/* Keyboard focus is always visible on hardware controls. */
body.hx-hw button:focus-visible,
body.hx-hw select:focus-visible,
body.hx-hw input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.hx-hw * { transition: none !important; }
}

/* ================= Shared components ================= */
/* ---------- Keys: every flat button becomes a hardware key ---------- */
body.hx-hw.hx-hw :is(.sync-btn, .mode-btn, .dual-btn, .spinner-btn, .delete-armed-btn,
    .pattern-controls button, [id="chain-toggle"], .fullscreen-btn, .transport-btn,
    .midi-menu-toggle, .audio-menu-toggle, .jam-btn, .export-btn, .theme-btn,
    .midi-toggle-btn, .midi-learn-btn, .chain-toggle-btn, .hx-key):not(.recording, .midi-learn-pending, .learning, .midi-learning) {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow) !important;
    text-shadow: none !important;
    transition: transform .06s;
}
body.hx-hw.hx-hw :is(.sync-btn, .mode-btn, .dual-btn, .spinner-btn, .delete-armed-btn,
    .pattern-controls button, [id="chain-toggle"], .fullscreen-btn, .transport-btn,
    .midi-menu-toggle, .audio-menu-toggle, .jam-btn, .export-btn, .theme-btn,
    .midi-toggle-btn, .midi-learn-btn, .chain-toggle-btn, .hx-key):hover {
    filter: brightness(1.18);
}
body.hx-hw.hx-hw :is(.sync-btn, .mode-btn, .dual-btn, .spinner-btn, .delete-armed-btn,
    .pattern-controls button, [id="chain-toggle"], .fullscreen-btn, .transport-btn,
    .midi-menu-toggle, .audio-menu-toggle, .jam-btn, .export-btn, .theme-btn,
    .midi-toggle-btn, .midi-learn-btn, .chain-toggle-btn, .hx-key):active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #0a0a0b, 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw :is(.sync-btn, .mode-btn, .dual-btn, .pattern-controls button, [id="chain-toggle"], .midi-menu-toggle, .audio-menu-toggle, .jam-btn, .export-btn, .theme-btn,
    .midi-toggle-btn, .midi-learn-btn, .chain-toggle-btn, .hx-key).active {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}

/* Transport: round rubber play key */
body.hx-hw.hx-hw .transport-btn {
    border-radius: 50% !important;
    color: #fff !important;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--hx-acc) 90%, #fff 10%), color-mix(in srgb, var(--hx-acc) 55%, #000)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.35), 0 0 22px var(--hx-acc-glow), 0 2px 0 #000 !important;
}

/* ---------- LCD readouts ---------- */
body.hx-hw.hx-hw :is(.spinner-input, .spinner-display, .spinner-value, .hx-lcd) {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 10px var(--hx-acc-glow) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}

/* Selects: recessed, engraved */
body.hx-hw.hx-hw select {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    color: var(--hx-ink) !important;
    background-color: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024, 0 1px 0 rgba(255,255,255,.05) !important;
}
body.hx-hw.hx-hw select option { background: #111113; color: var(--hx-ink); }

/* Routing popovers */
body.hx-hw.hx-hw :is(.midi-settings-panel, .audio-settings-panel):not([data-inline="true"]) {
    background: linear-gradient(180deg, #1a1a1d, #0e0e10) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 22px 48px rgba(0,0,0,.7) !important;
    border-radius: 12px !important;
}
body.hx-hw.hx-hw :is(.midi-settings-panel, .audio-settings-panel):not([data-inline="true"])::before {
    background: #1a1a1d !important;
    border-color: #26262a !important;
}