/* ============================================================
   slick.css — BLACK RABBIT / WET BLACK SLICK
   The house's skin over Todd's booth. Palette from Michael's
   sheet: void, panel, raised, type, record, on-device chip.
   Loaded last; overrides only, so his files stay his.
   ============================================================ */
:root {
  --ink: #050507;            /* void */
  --panel: #0b0b0e;
  --raised: #16161c;
  --line: #22222a;
  --text: #c8c8d0;           /* type */
  --text-dim: #8a8f86;
  --gold: #c8c8d0;
  --hot: #e11d2e;            /* record */
  --cool: #8a8f86;
  --ok: #8a8f86;
  --radius: 16px;
  --nav-h: 56px;
}
html, body { background: var(--ink) !important; color: var(--text); }
body { font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; }

/* the house's top bar: name and the on-device chip */
.house-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40;
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: rgba(5, 5, 7, .92); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.house-bar .hb-name { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.house-bar .hb-name svg { width: 22px; height: 22px; }
.house-bar .hb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--text-dim); border-radius: 6px; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); }
.house-bar .hb-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6fbf7a; box-shadow: 0 0 8px #6fbf7a; }
.house-bar .hb-room { margin-left: auto; color: var(--text-dim); text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.house-bar .hb-room:hover { color: #fff; }
.screen { top: 52px !important; }

/* panels */
.card {
  background: linear-gradient(180deg, #0d0d11, #0a0a0d) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 40px rgba(0, 0, 0, .45) !important;
}
.card h3 { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text); font-weight: 600; }
.card h3 .step { display: none; }
.card h3::after { content: ""; display: block; width: 26px; height: 2px; background: var(--hot); margin-top: 8px; }
.hint { color: var(--text-dim); }

/* buttons: pill, raised, wet */
.btn, .chip, button.btn-ghost, button.btn-line, label.btn {
  background: linear-gradient(180deg, #1c1c22, #0e0e12) !important;
  border: 1px solid #2a2a32 !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-family: ui-monospace, monospace !important;
  font-size: 11px !important; letter-spacing: .16em !important; text-transform: uppercase !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 6px 16px rgba(0, 0, 0, .5) !important;
}
.btn:hover, .chip:hover { border-color: #3a3a44 !important; color: #fff !important; }
.chip.on, .btn.on, .nav-btn.active { border-color: #d8d8dd !important; color: #fff !important; background: linear-gradient(180deg, #202028, #121218) !important; }
.chip.on::after { content: " \25CF"; color: #fff; }

/* the red button */
.rec-btn {
  width: 132px !important; height: 132px !important; border-radius: 50% !important;
  background: radial-gradient(circle at 40% 30%, #2a2a30 0%, #0c0c0f 55%, #050507 100%) !important;
  border: 6px solid #111116 !important;
  box-shadow: 0 0 0 1px #2a2a32, 0 24px 50px rgba(0, 0, 0, .7), 0 0 40px rgba(225, 29, 46, .12) !important;
}
.rec-btn .rec-dot { width: 14px !important; height: 14px !important; background: var(--hot) !important; box-shadow: 0 0 14px var(--hot), 0 0 30px rgba(225, 29, 46, .6) !important; }
.rec-btn.live { box-shadow: 0 0 0 1px #2a2a32, 0 24px 50px rgba(0, 0, 0, .7), 0 0 60px rgba(225, 29, 46, .45) !important; }
.rec-btn.live .rec-dot { animation: recpulse 1s ease-in-out infinite; }
@keyframes recpulse { 50% { transform: scale(1.35); opacity: .6; } }
.rec-time { font-family: ui-monospace, monospace; font-size: 40px; font-weight: 300; letter-spacing: .06em; color: #fff; }
.rec-state { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); }
.meter { background: #101014 !important; border-radius: 3px; }
.meter-fill { background: linear-gradient(90deg, #6fbf7a, #c8c8d0) !important; }

/* waveforms: voice light, beat dim */
.wave { background: #0a0a0d !important; border: 1px solid var(--line); border-radius: 8px; }
.wave-vox { filter: none; }

/* sliders */
input[type=range] { accent-color: #c8c8d0; }

/* the floating record button, in the house's colours */
.float-rec { background: linear-gradient(180deg, #1c1c22, #0e0e12) !important; border: 1px solid #2a2a32 !important; color: #fff !important; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.float-rec .fr-dot { background: var(--hot) !important; }
.float-rec.live { background: var(--hot) !important; border-color: var(--hot) !important; }

/* desktop: a session, not a scroll. Beat left, take centre, the rest below. */
@media (min-width: 1000px) {
  .nav { display: none !important; }
  .screen { inset: 52px 0 0 0 !important; }
  .studio-scroll { max-width: 1240px; margin: 0 auto; padding: 22px 22px 60px; }
  .studio-scroll .studio-head { grid-column: 1 / -1; }
  #screen-studio .studio-scroll { display: grid; grid-template-columns: 320px 1fr 340px; gap: 16px; align-content: start; }
  .card[data-step="1"] { grid-column: 1; grid-row: 2 / span 2; }
  .card[data-step="3"] { grid-column: 2; grid-row: 2; }
  .card[data-step="2"] { grid-column: 2; grid-row: 3; }
  .card.reader { grid-column: 3; grid-row: 2 / span 2; }
  .card[data-step="4"], .card[data-step="5"], .card[data-step="6"], .card[data-step="7"] { grid-column: 1 / -1; }
  .card[data-step="3"] .rec-wrap { flex-direction: column; align-items: center; text-align: center; }
  .card[data-step="3"] .rec-meta { order: -1; width: 100%; text-align: center; }
  .card[data-step="3"] .meter { width: 100%; max-width: 420px; margin: 8px auto; }
}
@media (max-width: 999px) {
  .house-bar { padding: 0 14px; }
  .house-bar .hb-room { display: none; }
}

/* the reader */
.card.reader { display: flex; flex-direction: column; min-height: 420px; }
.rd-text { width: 100%; min-height: 90px; margin: 10px 0; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--text); background: #0a0a0d; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }
.rd-stage { flex: 1 1 auto; min-height: 220px; max-height: 360px; overflow: hidden; padding: 18px 8px; background: #050507; border: 1px solid var(--line); border-radius: 10px; }
.rd-stage.mirror { transform: scaleX(-1); }
.rd-roll { font-family: "Instrument Serif", Georgia, serif; line-height: 1.35; color: #eef; }
.rd-l { margin: 0 0 .5em; color: #6b6f6a; transition: color .2s, transform .2s; }
.m-script .rd-l { color: #d8d8de; }
.rd-now { color: #fff; }
.rd-next { color: #a0a4a0; }
.rd-big { font-size: 1.6em; color: #fff; }
.m-hook .rd-l { color: #d8d8de; }
.rd-empty { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rd-dots { display: flex; gap: 8px; justify-content: center; margin: 12px 0 8px; }
.rd-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2a2a32; }
.rd-dots i.on { background: #fff; box-shadow: 0 0 8px #fff; }
.rd-ctl { gap: 8px; margin-top: 8px; align-items: center; }
.rd-lab { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.rd-lab input[type=range] { width: 90px; }
.card.reader.rd-fullscreen { position: fixed; inset: 0; z-index: 90; border-radius: 0 !important; min-height: 0; }
.card.reader.rd-fullscreen .rd-stage { max-height: none; }
.card.reader.rd-fullscreen .rd-roll { font-size: 1.4em; }
.card.reader.rd-fullscreen .rd-text { display: none; }