/*
 * ROBODRUM — HOLOGRAPHX HARDWARE skin (v1)
 * Loaded last. Visual only: colors, surfaces, lighting, type.
 * Remove the <link> and the body class "hx-hw" to return to the previous look.
 */

body.hx-hw {
    --hx-acc: #ff4a2a;
    --hx-acc-rgb: 255, 74, 42;
    --pad-col1: #ff3b2f;
    --pad-col2: #ff8a1f;
    --pad-col3: #ffc62e;
    --pad-col4: #e8e4dc;
    background: #050506 !important;
}

/* ---------- Chassis ---------- */
body.hx-hw #app-shell { background: #050506; }
body.hx-hw #app-content {
    background: var(--hx-chassis) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px #1d1d20;
    border-radius: 18px;
}
body.hx-hw #app-content::before,
body.hx-hw #app-content::after {
    content: "";
    position: absolute;
    bottom: 8px;
    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: 1;
}
body.hx-hw #app-content::before { left: 8px; }
body.hx-hw #app-content::after { right: 8px; }

/* ---------- Header bar ---------- */
body.hx-hw.hx-hw header {
    margin: 10px 12px 0;
    border-radius: 12px;
    background: var(--hx-bar-bg) !important;
    box-shadow: var(--hx-bar-shadow) !important;
    border: 0 !important;
}

body.hx-hw.hx-hw .logo-section h1 {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-shadow: 0 1px 0 #000;
    display: flex;
    align-items: center;
    gap: 0;
}
body.hx-hw.hx-hw .logo-section h1::before {
    content: "";
    width: 30px;
    height: 30px;
    margin-right: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(0,0,0,0) 0 7px, transparent 7px),
        radial-gradient(circle at 42% 38%, #fff 0, var(--hx-acc) 22%, rgba(0,0,0,.6) 40%, #1b1b1e 41% 56%, #0a0a0b 57%);
    box-shadow: inset 0 0 0 2px #2c2c30, 0 0 12px var(--hx-acc-dim);
}
body.hx-hw.hx-hw .logo-section h1 span {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    filter: none !important;
}
/* Title chase (hx-title-chase.js): active letter grows slightly, colour unchanged */
body.hx-hw.hx-hw .logo-section h1 .hx-title-letter {
    display: inline-block;
    transform-origin: 50% 60%;
    transition: transform .08s ease-out;
}
body.hx-hw.hx-hw .logo-section h1 .hx-title-letter.active {
    transform: scale(1.22);
}
@media (prefers-reduced-motion: reduce) {
    body.hx-hw.hx-hw .logo-section h1 .hx-title-letter.active { transform: none; }
}
body.hx-hw.hx-hw .logo-red { color: var(--pad-col1) !important; }
body.hx-hw.hx-hw .logo-orange { color: var(--pad-col2) !important; }
body.hx-hw.hx-hw .logo-yellow { color: var(--pad-col3) !important; }
body.hx-hw.hx-hw .logo-white { color: var(--pad-col4) !important; }

/* Labels */
body.hx-hw.hx-hw .tempo-control label,
body.hx-hw.hx-hw .loop-control label,
body.hx-hw.hx-hw .midi-io label,
body.hx-hw.hx-hw .pattern-select label,
body.hx-hw.hx-hw .volume-icon,
body.hx-hw.hx-hw .note-io-label {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    color: var(--hx-mute) !important;
    text-shadow: none !important;
}

body.hx-hw.hx-hw #record-btn.active {
    background: linear-gradient(180deg, #ff3030, #9c0e12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px rgba(255,48,48,.6), 0 2px 0 #000 !important;
}

/* Special action keys keep their meaning, in hardware form */
body.hx-hw.hx-hw #pattern-generate {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}


/* Volume knob: machined cap with accent ring */
body.hx-hw.hx-hw .volume-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) 70%, #222), 0 0 12px 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 .volume-knob-indicator {
    background: #f4f2ef !important;
    box-shadow: 0 0 4px rgba(255,255,255,.5) !important;
}
body.hx-hw.hx-hw .vu-meter {
    background: #111113 !important;
    border: 0 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1f1f22 !important;
    border-radius: 3px !important;
}
body.hx-hw.hx-hw .vu-bar {
    background: linear-gradient(0deg, #35d46f 0 65%, #ffc53d 65% 85%, #ff3a3a 85%) !important;
    box-shadow: 0 0 8px rgba(53,212,111,.5) !important;
}

/* ---------- Wells ---------- */
body.hx-hw.hx-hw :is(.pads-controls, .sequencer-controls) {
    background: var(--hx-well-bg) !important;
    box-shadow: var(--hx-well-shadow) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    padding: 12px !important;
}
body.hx-hw.hx-hw :is(.pads-grid, .sequencer-grid-container) {
    background: var(--hx-well-bg) !important;
    box-shadow: var(--hx-well-shadow) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    padding: 12px !important;
}
body.hx-hw.hx-hw .section-title {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .26em !important;
    color: #d9d6d2 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .armed-indicator {
    font-family: var(--hx-font) !important;
    color: var(--hx-acc) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow);
    letter-spacing: .14em;
}
body.hx-hw.hx-hw .bar-marker {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .2em !important;
    color: var(--hx-mute) !important;
    background: linear-gradient(180deg, #121214, #0c0c0e) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1c1c1f !important;
    border-radius: 6px !important;
}
body.hx-hw.hx-hw .bar-marker.active,
body.hx-hw.hx-hw .bar-marker.playing,
body.hx-hw.hx-hw .bar-marker.current {
    color: var(--hx-acc) !important;
    text-shadow: 0 0 8px var(--hx-acc-glow);
}

/* ---------- Pads: coloured rubber caps (colour on top, as in the original) ---------- */
/* box-shadow is set without !important (ID in the selector wins over polish.css)
   so the original armed-glow animation still runs. */
body.hx-hw.hx-hw .drum-pad {
    --pc: var(--pad-col1);
    border: 0 !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%),
        var(--pc) !important;
}
body.hx-hw.hx-hw #app-content .drum-pad {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -4px 0 color-mix(in srgb, var(--pc) 55%, #000), 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.5);
}
body.hx-hw.hx-hw .drum-pad.col-0 { --pc: var(--pad-col1); }
body.hx-hw.hx-hw .drum-pad.col-1 { --pc: var(--pad-col2); }
body.hx-hw.hx-hw .drum-pad.col-2 { --pc: var(--pad-col3); }
body.hx-hw.hx-hw .drum-pad.col-3 { --pc: var(--pad-col4); }
body.hx-hw.hx-hw .drum-pad::before { opacity: 0 !important; }
body.hx-hw.hx-hw .drum-pad .note-name {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    color: rgba(10,6,4,.82) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}
body.hx-hw.hx-hw .drum-pad :is(.pad-index, .pad-key) {
    font-family: var(--hx-mono) !important;
    color: rgba(10,6,4,.62) !important;
    background: none !important;
    border-color: rgba(0,0,0,.3) !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .drum-pad:is(.active, .flash, :active) {
    background:
        radial-gradient(80% 70% at 50% 45%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
        var(--pc) !important;
}
body.hx-hw.hx-hw #app-content .drum-pad:is(.active, .flash, :active) {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(0,0,0,.2), 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent), 0 2px 0 #000;
}
body.hx-hw.hx-hw .drum-pad.armed {
    outline: 2px solid #f2f0ec !important;
    outline-offset: 2px;
}

/* Pad utility keys (C / G / +) */
body.hx-hw.hx-hw .pad-controls button {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    color: var(--hx-ink-2) !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #070708, 0 1px 0 #000 !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .pad-controls button.active {
    color: var(--hx-acc) !important;
    text-shadow: 0 0 6px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .pad-controls button.holding {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: 0 0 10px var(--hx-acc-glow) !important;
}

/* ---------- Step keys: LED-lit ---------- */
body.hx-hw.hx-hw .step-cell {
    position: relative;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #232326, #161618) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #070708, 0 2px 0 #000 !important;
    overflow: hidden;
}
body.hx-hw.hx-hw .step-cell::after {
    content: "";
    position: absolute;
    left: 24%;
    right: 24%;
    top: 6px;
    height: 4px;
    border-radius: 2px;
    background: #2e1416;
    box-shadow: inset 0 1px 1px #000;
    pointer-events: none;
}
body.hx-hw.hx-hw .step-cell:nth-child(4n+1) {
    background: linear-gradient(180deg, #2b2b2f, #1c1c1f) !important;
}
body.hx-hw.hx-hw .step-cell:hover { filter: brightness(1.2); }
body.hx-hw.hx-hw .step-cell.filled {
    background: linear-gradient(180deg, #1d1d20, #121214) !important;
}
body.hx-hw.hx-hw .step-cell.filled::before { opacity: 0 !important; }
body.hx-hw.hx-hw .step-cell.current::after {
    background: #fff;
    box-shadow: 0 0 8px #fff;
}
body.hx-hw.hx-hw .step-cell .step-slot.filled {
    border-radius: 5px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -6px 10px rgba(0,0,0,.25) !important;
}
body.hx-hw.hx-hw .step-cell .step-slot.filled.col-0 { --pc: var(--pad-col1); background: linear-gradient(180deg, color-mix(in srgb, var(--pad-col1) 85%, #fff), color-mix(in srgb, var(--pad-col1) 60%, #000)) !important; }
body.hx-hw.hx-hw .step-cell .step-slot.filled.col-1 { --pc: var(--pad-col2); background: linear-gradient(180deg, color-mix(in srgb, var(--pad-col2) 85%, #fff), color-mix(in srgb, var(--pad-col2) 60%, #000)) !important; }
body.hx-hw.hx-hw .step-cell .step-slot.filled.col-2 { --pc: var(--pad-col3); background: linear-gradient(180deg, color-mix(in srgb, var(--pad-col3) 85%, #fff), color-mix(in srgb, var(--pad-col3) 60%, #000)) !important; }
body.hx-hw.hx-hw .step-cell .step-slot.filled.col-3 { --pc: var(--pad-col4); background: linear-gradient(180deg, color-mix(in srgb, var(--pad-col4) 90%, #fff), color-mix(in srgb, var(--pad-col4) 60%, #000)) !important; }
body.hx-hw.hx-hw .step-cell .step-note {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    color: #1a0c06 !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .step-cell .step-num {
    font-family: var(--hx-mono) !important;
    font-style: normal !important;
    color: #6f6c68 !important;
    text-shadow: none !important;
}
body.hx-hw.hx-hw .step-cell.current {
    outline: 2px solid #f2f0ec !important;
    outline-offset: -2px;
    box-shadow: 0 2px 0 #000 !important;
}
body.hx-hw.hx-hw .step-cell.armed-match {
    box-shadow: inset 0 0 0 2px var(--hx-acc), 0 0 12px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .step-cell.outside-loop {
    opacity: .35 !important;
}

/* Mixer strips follow the chassis */
body.hx-hw.hx-hw .mixer-strip {
    background: linear-gradient(180deg, #1a1a1d, #111113) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px #0a0a0b, 0 2px 0 #000 !important;
    border-radius: 8px !important;
}

/* Modals */
body.hx-hw.hx-hw .modal-content {
    background: linear-gradient(180deg, #19191c, #0e0e10) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 30px 60px rgba(0,0,0,.75) !important;
    border-radius: 14px !important;
}

/* ---------- Routing: one MIDI key and one AUDIO key open their panels ---------- */
body.hx-hw.hx-hw .midi-row .midi-menu-toggle,
body.hx-hw.hx-hw .midi-row .audio-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 16px !important;
}
body.hx-hw.hx-hw .midi-row .midi-menu,
body.hx-hw.hx-hw .midi-row .audio-menu {
    display: block !important;
    position: relative;
    align-self: center;
}
body.hx-hw.hx-hw .midi-row .midi-settings-panel,
body.hx-hw.hx-hw .midi-row .audio-settings-panel {
    display: block !important;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 60 !important;
    padding: 16px !important;
}
body.hx-hw.hx-hw .midi-row .midi-settings-panel { width: 560px !important; }
body.hx-hw.hx-hw .midi-row .audio-settings-panel { width: 260px !important; }
body.hx-hw.hx-hw .midi-row .midi-settings-panel[hidden],
body.hx-hw.hx-hw .midi-row .audio-settings-panel[hidden] {
    display: none !important;
}
body.hx-hw.hx-hw .midi-row .midi-panel-grid {
    display: grid !important;
    grid-template-columns: 1fr 96px 1fr 96px !important;
    gap: 12px 12px !important;
    align-items: end;
}
body.hx-hw.hx-hw .midi-row .audio-panel-grid { display: grid !important; }
body.hx-hw.hx-hw .midi-row .midi-settings-panel::before,
body.hx-hw.hx-hw .midi-row .audio-settings-panel::before {
    content: "" !important;
}
body.hx-hw.hx-hw .midi-row .midi-panel-grid .midi-io,
body.hx-hw.hx-hw .midi-row .audio-panel-grid .midi-io {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
}
body.hx-hw.hx-hw .midi-row .midi-panel-grid :is(select, #midi-input, #midi-output, #midi-input-channel, #midi-output-channel, #virtual-bus-input-channel, #virtual-bus-output-channel),
body.hx-hw.hx-hw .midi-row .audio-panel-grid #audio-output {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
}
body.hx-hw.hx-hw .midi-row .midi-panel-grid .note-io-controls {
    grid-column: 1 / -1;
    order: 10;
    padding-top: 10px;
    border-top: 1px solid #222226;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

/* Header layout: logo + transport + tempo, then routing keys, clock, volume */
body.hx-hw.hx-hw.mobile-ui header,
body.hx-hw.hx-hw header {
    grid-template-columns: auto minmax(0, 1fr) !important;
}
body.hx-hw.hx-hw .midi-row {
    align-items: center !important;
    justify-content: flex-end;
    gap: 10px !important;
    margin-left: 24px !important;
}
body.hx-hw.hx-hw .midi-row .sync-controls { align-self: center !important; }
body.hx-hw.hx-hw .midi-row .volume-controls { align-self: center !important; margin-left: 18px !important; }


/* Beat generator: reserve two lines for the genre description so the modal
   never resizes when a shorter (one-line) description is selected. */
body.hx-hw.hx-hw .genre-description {
    box-sizing: border-box;
    min-height: calc(2 * 1.4em + 12px) !important;
}
@media (max-width: 440px) {
    body.hx-hw.hx-hw .genre-description { min-height: calc(3 * 1.4em + 12px) !important; }
}

/* Pattern menu: sized just to fit "SELECT" (all caps) at the app's normal text size.
   Custom arrow (appearance: none) so the browser's own arrow can't eat text space. */
body.hx-hw.hx-hw #app-content #pattern-dropdown {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    padding-left: 8px !important;
    padding-right: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b9b5b0' stroke-width='1.6'/%3E%3C/svg%3E"), linear-gradient(180deg, #101318, #191e25) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 9px center, 0 0 !important;
    background-size: 10px 6px, 100% 100% !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}