/* ==========================================================================
   OUTPUT 101 — RM-101 drum machine (loaded on /machine only)
   A hardware-like panel in the site's monochrome, with foil for the lights.
   Phones show one row in full (the selected voice) and the others folded;
   wide screens show the whole pattern at once.
   ========================================================================== */
.machine {
    --m-key: var(--bg);
    --m-key-alt: var(--surface);
    --m-key-line: var(--line-strong);
    --m-on: var(--ink);
    --m-cap: var(--bg);
    --m-screen: var(--bg);
    --m-trace: #0b0b0c;
    --m-label: 9.25rem;
    --m-knobs: 13.75rem;
    --m-gap: 6px;
    position: relative;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--bg-soft), var(--surface));
    box-shadow: var(--shadow-lg);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .machine {
    --m-key: var(--surface);
    --m-key-alt: var(--surface-2);
    --m-cap: var(--surface-2);
    --m-screen: #050506;
    --m-trace: #f4f4f2;
    background: linear-gradient(180deg, #141416, #0e0e10);
}

/* The foil used for lights: lit steps under the playhead, LEDs, the hit marker. */
.machine__led.is-on .machine__led-dot,
.voice.is-hit .voice__name::before,
.step[aria-pressed="true"].is-current {
    background-color: transparent;
    background-image: var(--holo-spark), var(--holo-rays), var(--holo-cross), var(--holo-band), var(--holo-mirror);
    background-size: 260% 260%, 280% 280%, 420% 420%, 340% 340%, 100% 320%;
    background-position: 62% 64%, 40% 30%, 30% 60%, 20% 30%, 50% 66%;
    background-repeat: no-repeat;
    background-blend-mode: screen, soft-light, soft-light, color, normal;
    box-shadow: var(--foil-edge), var(--foil-shine);
}

/* ---------- Top: name plate, display, master knobs ---------- */
.machine__top { display: grid; gap: 14px; }
.machine__plate { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 2px 4px; }
.machine__model { margin: 0; font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.06em; }
.machine__sub { margin: 0; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.machine__display {
    position: relative;
    height: 96px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--m-screen);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08);
}
.machine__scope { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; }
.machine__readout {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 9px;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    pointer-events: none;
}
.machine__name { color: var(--fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.machine__master { display: flex; justify-content: space-around; gap: 10px; padding: 4px 0; }

/* ---------- Transport, presets, actions ---------- */
.machine__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.machine__play { min-width: 118px; }
.machine__play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
}
.machine__play[aria-pressed="true"] .machine__play-icon { width: 10px; height: 10px; border: 0; border-radius: 1px; background: currentColor; }
.machine__presets { flex: 1 1 100%; order: 3; }
.machine__presets .chip { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.machine__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.machine__actions .btn:disabled { opacity: .5; cursor: progress; }

/* ---------- Knobs ---------- */
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 46px; }
.knob {
    --size: 34px;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    cursor: ns-resize;
    touch-action: none;
}
.knob::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -135deg, var(--fg) calc(var(--v) * 270deg), var(--line-strong) 0 270deg, transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
.knob__cap {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--m-cap);
    box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgba(0, 0, 0, .12);
    transform: rotate(calc(var(--v) * 270deg - 135deg));
}
.knob__cap::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 2px;
    height: 32%;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--fg);
}
.knob:focus-visible { outline-offset: 3px; border-radius: 50%; }
.knob.is-dragging .knob__cap { box-shadow: inset 0 0 0 1px var(--fg), 0 1px 2px rgba(0, 0, 0, .12); }
.knob__label { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.knob-wrap--large { width: 64px; }
.knob-wrap--large .knob { --size: 50px; }
.knob-wrap--large .knob__cap { inset: 8px; }

/* ---------- Pattern grid (phones first: folded rows) ---------- */
.machine__grid { display: grid; gap: 4px; }
.machine__leds { display: none; }

.voice {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
}
.voice__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.voice__name { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.voice__name::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
}
.voice__code { font-size: .74rem; font-weight: 600; letter-spacing: .06em; }
.voice__label { display: none; font-size: .85rem; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice__mute,
.voice__knobs { display: none; }
.voice__note { margin: 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }

.voice__steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.step {
    height: 12px;
    border-radius: 3px;
    background: var(--m-key);
    box-shadow: inset 0 0 0 1px var(--m-key-line);
    transition: background-color .06s, transform .1s var(--ease);
}
.step:nth-child(8n+5), .step:nth-child(8n+6), .step:nth-child(8n+7), .step:nth-child(8n+8) { background-color: var(--m-key-alt); }
.voice__steps .step:nth-child(4n+1):not(:first-child) { margin-left: 3px; }
.step[aria-pressed="true"] { background-color: var(--m-on); box-shadow: none; }
.step.is-current { box-shadow: inset 0 0 0 2px var(--fg); }
.voice:not(.is-selected) .step { pointer-events: none; }
.voice.is-muted .voice__steps { opacity: .35; }
.voice--accent { cursor: pointer; }

/* The selected row, unfolded: its knobs and big steps, four to a line */
.voice.is-selected {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-color: var(--line);
    background: var(--bg);
    cursor: default;
}
:root[data-theme="dark"] .voice.is-selected { background: var(--bg-soft); }
.voice.is-selected .voice__label { display: inline; }
.voice.is-selected .voice__mute { display: inline-flex; }
.voice.is-selected .voice__knobs { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.voice.is-selected .voice__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.voice.is-selected .step { height: 52px; border-radius: 10px; }
.voice.is-selected .voice__steps .step:nth-child(4n+1) { margin-left: 0; }
.voice.is-selected .step:active { transform: scale(.96); }

.voice__mute {
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    transition: background-color .15s, color .15s, border-color .15s;
}
.voice__mute:hover { color: var(--fg); border-color: var(--fg); }
.voice__mute[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.machine__hint { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1rem 0 0; font-size: .68rem; letter-spacing: .04em; color: var(--muted); }
.machine__notice { padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
@media (pointer: coarse) {
    .machine__hint span:first-child, .machine__hint span:last-child { display: none; }
}

@media (min-width: 640px) {
    .machine { padding: 18px; }
    .voice.is-selected .voice__steps { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .voice.is-selected .voice__steps .step:nth-child(4n+1):not(:nth-child(8n+1)) { margin-left: 6px; }
    .machine__presets { flex: 0 1 auto; order: 0; }
}

@media (min-width: 760px) {
    .machine__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .machine__plate { flex-direction: column; justify-content: center; }
    .machine__model { font-size: 2.8rem; }
    .machine__master { grid-column: 1 / -1; justify-content: flex-start; gap: 22px; }
}

/* ---------- Wide screens: the whole pattern at once ---------- */
@media (min-width: 1100px) {
    .machine { padding: 22px 24px 18px; }
    .machine__top { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: center; gap: 24px; }
    .machine__master { grid-column: auto; gap: 14px; }
    .machine__display { height: 104px; }
    .machine__actions { margin-left: auto; }

    .machine__grid { gap: 2px; }
    .machine__leds {
        display: grid;
        grid-template-columns: repeat(16, minmax(0, 1fr));
        gap: var(--m-gap);
        margin: 0 0 6px calc(var(--m-label) + var(--m-knobs) + 32px);
    }
    .machine__led { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .58rem; color: var(--dim); }
    .machine__led:nth-child(4n+1):not(:first-child) { margin-left: 8px; }
    .machine__led-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
    .machine__led.is-on { color: var(--fg); }

    .voice,
    .voice.is-selected {
        grid-template-columns: var(--m-label) var(--m-knobs) minmax(0, 1fr);
        gap: 16px;
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: none;
        cursor: default;
    }
    .voice + .voice { border-top: 1px solid var(--line); }
    .voice__label { display: inline; font-size: .8rem; }
    .voice__mute { display: inline-flex; width: 26px; height: 26px; }
    .voice__knobs, .voice.is-selected .voice__knobs { display: flex; flex-wrap: nowrap; gap: 0 8px; align-items: center; }
    .voice__steps, .voice.is-selected .voice__steps { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--m-gap); }
    .step, .voice.is-selected .step { height: 40px; border-radius: 8px; pointer-events: auto; }
    .voice__steps .step:nth-child(4n+1):not(:first-child),
    .voice.is-selected .voice__steps .step:nth-child(4n+1):not(:first-child) { margin-left: 8px; }
    .step:hover { box-shadow: inset 0 0 0 1px var(--fg); }
    .step[aria-pressed="true"]:hover { box-shadow: none; filter: brightness(1.25); }
    .voice:not(.is-selected) .step { pointer-events: auto; }
    .knob-wrap { width: 42px; }
    .knob { --size: 30px; }
    .knob__cap { inset: 5px; }
    .knob-wrap--large { width: 60px; }
    .knob-wrap--large .knob { --size: 46px; }
    .knob-wrap--large .knob__cap { inset: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .step, .voice.is-selected .step:active { transition: none; transform: none; }
}