/*
 * VIDEO SAMPLER — HOLOGRAPHX HARDWARE skin (v1)
 * The app is React with inline styles, and it shows pad/button state through
 * those inline colours. So this skin adds depth only (bevels, recesses,
 * bezels, type) and never overrides a control's background or text colour.
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #1fe3ff;
    --hx-acc-rgb: 31, 227, 255;
    background: var(--hx-chassis), #050506 !important;
}

/* Output screen: monitor bezel */
body.hx-hw.hx-hw .sampler-video-output {
    box-shadow: inset 0 0 0 6px #111113, inset 0 0 0 7px #26262a, inset 0 0 40px rgba(0,0,0,.9) !important;
}

/* Control deck: raised panel instead of flat grey */
body.hx-hw.hx-hw h1 { font-family: var(--hx-font) !important; font-style: normal !important; letter-spacing: .24em; }
/* (control-deck restyle removed: it needed :has(), which is costly on a React page) */

/* Buttons: bevel and shape only, their state colours stay */
body.hx-hw.hx-hw button:not(.electron-control-btn):not(.nt-button) {
    border-radius: 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5) !important;
    font-family: var(--hx-font) !important;
    letter-spacing: .08em;
}
body.hx-hw.hx-hw button:not(.electron-control-btn):not(.nt-button):active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw input:not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}

/* Pad bank: recessed well, pads as rubber pads */
body.hx-hw.hx-hw .sampler-performance-grid {
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.9), inset 0 0 0 1px #19191c !important;
    background: linear-gradient(180deg, #0c0c0e, #101012) !important;
}
body.hx-hw.hx-hw .sampler-pad-tile > div:nth-child(2) {
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.6), 0 3px 0 #000, 0 5px 10px rgba(0,0,0,.5) !important;
}
body.hx-hw.hx-hw :is(.sampler-pad-label, .sampler-trigger-label, .sampler-pad-shortcut, .sampler-empty-pad) {
    font-family: var(--hx-font) !important;
}

/* Dark neutral surfaces; state colours remain available for performance feedback. */
body.hx-hw { background: #070809 !important; color: #e3e7eb; color-scheme: dark; }
body.hx-hw .sampler-control-deck {
    background: linear-gradient(180deg, #15181b, #0c0e10) !important;
    border-top-color: #30383e !important;
}
body.hx-hw .sampler-performance-grid { background: #090b0d !important; }
body.hx-hw .sampler-trigger-label { border-color: #353a40 !important; }
body.hx-hw .sampler-beat-caption { color: #aab2ba; }
body.hx-hw .sampler-beat-controls button[aria-pressed=true] {
    background: #10292e; color: #73e1ed; border-color: #4197a1;
}
body.hx-hw .sampler-beat-step.is-on { color: #81e5ee; }
body.hx-hw .sampler-chain-editor { border-color: #41636b; }

body.hx-hw .sampler-beat-step {
    background: linear-gradient(145deg, #202328, #111315) !important;
    border-color: #353a41 !important;
}
body.hx-hw .sampler-beat-step.is-on {
    background: linear-gradient(145deg, #15353b, #102328) !important;
    border-color: #4197a1 !important;
}
body.hx-hw {
    --mw-surface-raised: #25282d;
    --mw-surface-control: #15171a;
    --mw-surface-control-hover: #30353b;
}