/*
 * ROBOSTEP — HOLOGRAPHX HARDWARE skin (v1)
 * ROBOSTEP is a Vite build, so this file lives in /shared and is linked from
 * robostepper/index.html (vite-ignore). Visual only.
 * Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #ff263d;
    --hx-acc-rgb: 255, 38, 61;
    background: #050506 !important;
}

/* ---------- Chassis ---------- */
body.hx-hw.hx-hw .viewport-shell { background: #050506 !important; }
body.hx-hw.hx-hw .instrument-canvas {
    background: var(--hx-chassis) !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px #1d1d20 !important;
}
body.hx-hw.hx-hw .instrument-canvas::before,
body.hx-hw.hx-hw .instrument-canvas::after {
    content: "";
    position: absolute;
    bottom: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        linear-gradient(35deg, transparent 44%, #0c0c0e 44% 56%, transparent 56%),
        radial-gradient(circle at 35% 30%, #6a6a70, #2a2a2e 55%, #141416);
    box-shadow: inset 0 -1px 1px #000;
    pointer-events: none;
    z-index: 3;
}
body.hx-hw.hx-hw .instrument-canvas::before { left: 6px; }
body.hx-hw.hx-hw .instrument-canvas::after { right: 6px; }

/* Header bar raised, other rails recessed */
body.hx-hw.hx-hw .top-rail {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw :is(.sound-rail, .settings-rail, .patterns-rail, .roll-panel, .keyboard-panel) {
    background: var(--hx-well-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-well-shadow) !important;
}
body.hx-hw.hx-hw .brand-icon {
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #1b1b1e 55%, #0a0a0b 56%) !important;
    box-shadow: inset 0 0 0 2px #2c2c30, 0 0 0 1px #000, 0 0 14px var(--hx-acc-dim) !important;
}
body.hx-hw.hx-hw .brand-icon span {
    border-radius: 50% !important;
    background: radial-gradient(circle at 42% 38%, #fff 0, var(--hx-acc) 26%, rgba(0,0,0,.6) 62%, transparent 64%) !important;
    box-shadow: 0 0 14px var(--hx-acc-glow) !important;
}
/* Title letters: keep the step-chase animation (.active lights each letter) */
body.hx-hw.hx-hw .brand-letter {
    font-family: var(--hx-font) !important;
    color: #f1efec;
    text-shadow: 0 1px 0 #000;
}
body.hx-hw.hx-hw .brand-letter.active {
    color: var(--hx-acc);
    filter: drop-shadow(0 0 8px var(--hx-acc));
}
body.hx-hw.hx-hw .instrument-canvas :is(label, .number-control > span, .knob-control > span) {
    font-family: var(--hx-font) !important;
    letter-spacing: .05em !important;
    color: var(--hx-mute) !important;
}

/* ---------- Keys (every hx-button except piano keys) ---------- */
body.hx-hw.hx-hw .instrument-canvas :is(.hx-button, .file-button, .nt-button):not(.white-key):not(.black-key) {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .06em !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;
}
body.hx-hw.hx-hw .instrument-canvas :is(.hx-button, .nt-button):not(.white-key):not(.black-key):is(.active, [data-state="active"], [aria-pressed="true"]),
body.hx-hw.hx-hw .instrument-canvas .generate-button.hx-button,
body.hx-hw.hx-hw .instrument-canvas .transport.hx-button {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw .instrument-canvas .hx-button:disabled { opacity: .45; }

/* LCD numbers */
body.hx-hw.hx-hw .number-control input {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    font-size: 20px !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;
}
body.hx-hw.hx-hw .knob-control output {
    font-family: var(--hx-mono) !important;
    color: #cfccc8 !important;
}

/* Knobs: accent value ring around the existing machined cap */
body.hx-hw.hx-hw .rotary-knob {
    border: 0 !important;
    background: radial-gradient(circle at 38% 28%, #58585e 0, #2a2a2e 38%, #141416 72%) !important;
    box-shadow: 0 0 0 3px #0b0b0c, 0 0 0 5px color-mix(in srgb, var(--hx-acc) 65%, #222), 0 0 14px var(--hx-acc-dim), 0 4px 8px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.18) !important;
}
body.hx-hw.hx-hw .rotary-knob i {
    background: #f4f2ef !important;
    box-shadow: 0 0 4px rgba(255,255,255,.5) !important;
}

/* ---------- Piano roll: LED step keys ---------- */
body.hx-hw.hx-hw .roll-cell {
    border: 0 !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #070708, 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw .roll-row.accidental-note .roll-cell {
    background: linear-gradient(180deg, #121214, #0b0b0c) !important;
}
body.hx-hw.hx-hw .roll-cell.beat-start {
    background: linear-gradient(180deg, #2c2c30, #1c1c1f) !important;
}
body.hx-hw.hx-hw .roll-cell.state-1 {
    background: linear-gradient(180deg, color-mix(in srgb, var(--hx-acc) 85%, #fff), color-mix(in srgb, var(--hx-acc) 55%, #000)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 10px rgba(0,0,0,.25), 0 0 14px var(--hx-acc-glow), 0 1px 0 #000 !important;
}
body.hx-hw.hx-hw .roll-cell.state-2 {
    background: linear-gradient(180deg, #6a1420, #3a0a10) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hx-acc) 45%, #000), 0 0 6px var(--hx-acc-dim) !important;
}
body.hx-hw.hx-hw .roll-cell.current::after {
    border: 2px solid #f2f0ec !important;
    background: rgba(255,255,255,.06) !important;
    box-shadow: 0 0 12px rgba(255,255,255,.3);
}
body.hx-hw.hx-hw .roll-step-header,
body.hx-hw.hx-hw .note-label {
    font-family: var(--hx-font) !important;
}

/* ---------- Keyboard: ivory and ebony ---------- */
body.hx-hw.hx-hw .piano {
    background: linear-gradient(180deg, #0a0a0b, #18181b) !important;
    border-radius: 8px;
    box-shadow: inset 0 2px 6px #000;
    padding: 4px 4px 6px;
}
body.hx-hw.hx-hw .white-key.hx-button {
    font-family: var(--hx-font) !important;
    color: #444 !important;
    border: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: linear-gradient(180deg, #d9d6d0 0, #fbfaf7 10%, #f2f0ec 86%, #d4d1cb 100%) !important;
    box-shadow: inset 0 -7px 0 #c9c5be, inset -1px 0 0 #bdb9b2, 0 3px 4px rgba(0,0,0,.6) !important;
}
body.hx-hw.hx-hw .black-key.hx-button {
    font-family: var(--hx-font) !important;
    color: #9a9894 !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    background: linear-gradient(180deg, #000 0, #2a2a2e 70%, #141416 100%) !important;
    box-shadow: inset 0 -6px 0 #050505, inset 1px 0 0 #3a3a3e, 0 3px 6px rgba(0,0,0,.75) !important;
}
body.hx-hw.hx-hw .white-key.hx-button.active {
    color: #7a0f18 !important;
    background: linear-gradient(180deg, #cfcac2 0, #ebe8e3 20%, #e2dfd9 100%) !important;
    box-shadow: inset 0 -2px 0 #c9c5be, inset 0 0 0 2px var(--hx-acc), 0 0 18px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .black-key.hx-button.active {
    color: var(--hx-acc) !important;
    box-shadow: inset 0 -2px 0 #050505, inset 0 0 0 2px var(--hx-acc), 0 0 16px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .status-message {
    font-family: var(--hx-font) !important;
    letter-spacing: .14em;
    color: #6c6a66 !important;
}

body.hx-hw.hx-hw .instrument-canvas .hx-select { letter-spacing: .02em !important; }