/* ===========================================================================
   rack-console.css  —  §247d  The Rack CONSOLE layout (Concept A, real layout)
   ---------------------------------------------------------------------------
   This is NOT a skin. It re-arranges Step 3 into the three-column studio
   console from the approved Concept A mockup:

        header  ·  AVH STUDIOS   START SEPARATE VOICE REBUILD MASTER EXPORT  PRO
        ┌──────────┬────────────────────────────────┬──────────────────────┐
        │ TRACKS   │  arrangement waveform + ruler  │  TAKE MORE           │
        │ 03 LEAD  │  verse / chorus markers        │  ONE TAKE | BY SECTION│
        │ 02 BACK  │                                │  PLAY  STOP  RETRY   │
        │ 01 INST  │                                ├──────────────────────┤
        │          │                                │  VOCAL ENHANCER      │
        │          │                                │  dials               │
        ├──────────┴────────────────────────────────┴──────────────────────┤
        │  BACK ·············· Headphones ON ·············· NEXT           │
        └──────────────────────────────────────────────────────────────────┘

   Everything is additive and scoped to `body.rk-console`, which rack-console.js
   only sets when the Step-3 sing-along surface is actually on screen. If the
   script never runs, the previous stacked layout is untouched. No id or class
   is renamed; no element is removed from the DOM — only re-placed by grid.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. WIDEN THE SHELL — the console needs a wider stage than a prose page
   --------------------------------------------------------------------------- */
body.rk-console .wrap{
  max-width:1480px;
  margin-left:auto;
  margin-right:auto;
}

/* ---------------------------------------------------------------------------
   1. THE CONSOLE GRID
   --------------------------------------------------------------------------- */
body.rk-console #path-singalong{
  display:grid;
  grid-template-columns:196px minmax(0,1fr) 344px;
  grid-template-rows:auto auto auto auto auto auto;
  gap:14px;
  align-items:start;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
/* §247e.1 — the verse-by-verse arrangement is now a full-width band UNDER the
   stems/arrangement, and the single Vocal Enhancer sits after it. */
body.rk-console #saVbv{
  grid-column:1 / -1;
  grid-row:3;
  margin:0;
}
/* §247g (Option A) — the Vocal Enhancer is now the LAST thing before Keep take,
   so it renders BELOW the Voice section (Match / Guide-tune / Convert) instead
   of above the recorder. Order: record -> prepare -> convert -> enhance. */
body.rk-console #sa-enhancer-section{
  grid-column:1 / -1;
  grid-row:5;
  margin:0;
}

/* the long prose intro is gone in console mode — the rail says it instead */
body.rk-console #path-singalong > p.small-note{ display:none; }
/* and so is the page-level explainer above the console */
body.rk-console #step3-hint,
body.rk-console #panel-mixer > h2{ display:none; }
/* the one-line goal note survives as a slim console bar (246 suite requires it) */
body.rk-console #step3-goal-note{
  margin:0 0 12px;
  padding:8px 12px;
  font-size:11px;
  color:#9aa0ac;
  background:linear-gradient(180deg,#181c24,#12151a);
  border:1px solid #07090c;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.rk-console #panel-mixer{ padding:0; background:none; border:0; box-shadow:none; }

/* LEFT — the track stack */
body.rk-console #rkTracks{
  grid-column:1;
  grid-row:1 / span 2;
  position:sticky;
  top:12px;
}

/* CENTRE — the arrangement screen */
body.rk-console #sa-arrangement{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
}

/* RIGHT — take controls + transport rack */
body.rk-console #sa-cast{
  grid-column:3;
  grid-row:1;
  margin:0;
}
body.rk-console #rkTransport{
  grid-column:3;
  grid-row:2;
  margin:0;
}

/* FULL WIDTH — the recorder console, then the enhancer, then the upsell.
   §247g: #voice-console (Match / Guide-tune / Convert) lives INSIDE
   .mixer-console, so it already renders at the console's foot — the enhancer
   simply moves below the whole console to become the last step. */
body.rk-console #path-singalong > .mixer-console{
  grid-column:1 / -1;
  grid-row:4;
  margin:0;
}
body.rk-console #path-singalong > #nuclear-upsell{
  grid-column:1 / -1;
  grid-row:6;
  margin:0;
}

/* ---------------------------------------------------------------------------
   2. HEADER  —  brand on the left, the six steps as tabs on the right
   --------------------------------------------------------------------------- */
body.rk-console .app-header{
  padding:12px 16px 10px;
  margin-bottom:0;
  border-radius:14px 14px 0 0;
  border-bottom:0;
  background:
    linear-gradient(180deg,#262c36 0%, #1c2029 60%, #171a21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.6);
}
body.rk-console .app-header .brand-h1{
  font-size:19px;
  margin:0;
  line-height:1.1;
}
/* the marketing tagline + badge row are not part of a working console */
body.rk-console .app-header > div > p,
body.rk-console .app-header .badge-row{
  display:none;
}

/* the rail becomes a tab strip welded to the bottom of the header */
body.rk-console #flow-progress{
  margin:0 0 14px;
  padding:0 10px;
  border:0;
  border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#171a21 0%, #12151a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px -14px rgba(0,0,0,.9);
}
body.rk-console .flow-progress-head{ display:none; }
body.rk-console .flow-steps{
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
}
body.rk-console .flow-steps::-webkit-scrollbar{ display:none; }

/* §247e.3 — the six tabs now STRETCH the full width of the header and read
   as proper console keys: a numbered chip + the step name, evenly divided. */
body.rk-console .flow-steps{
  gap:0;
  overflow-x:auto;
  scrollbar-width:none;
  width:100%;
}
body.rk-console .flow-step{
  flex:1 1 0;
  min-width:0;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 12px 14px;
  border:0;
  border-radius:0;
  border-bottom:2px solid transparent;
  background:transparent !important;
  box-shadow:none !important;
  color:#7d8593;
  font-size:12px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
/* thin machined divider between keys */
body.rk-console .flow-step + .flow-step{
  border-left:1px solid rgba(255,255,255,.05);
}
/* the connector line is not part of a tab strip */
body.rk-console .flow-step::before{ display:none; }
body.rk-console .flow-step .flow-label{
  max-width:none;
  font-size:inherit;
  line-height:1;
  letter-spacing:inherit;
}
body.rk-console .flow-step .flow-dot{
  width:22px; height:22px;
  flex:0 0 auto;
  border-radius:6px;
  font-size:10.5px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0d1015;
  border:1px solid #2a313d;
  color:#7d8593;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.rk-console .flow-step.done .flow-dot{
  background:rgba(53,255,158,.12);
  border-color:var(--rk-phos-dim);
  color:var(--rk-phos);
  box-shadow:0 0 6px rgba(53,255,158,.5);
}
body.rk-console .flow-step.active{
  color:#f2f4f7;
  border-bottom-color:var(--rk-amber);
  background:linear-gradient(180deg, rgba(255,107,53,.12), rgba(255,107,53,0)) !important;
}
body.rk-console .flow-step.active .flow-dot{
  background:linear-gradient(180deg,#ffb08a,#ff7a45 55%,#ef5a24);
  border-color:#ff8a55;
  color:#241008;
  box-shadow:0 0 10px rgba(255,107,53,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
body.rk-console .flow-step:hover{ color:#c9d1d9; }
body.rk-console .flow-step:hover .flow-dot{ border-color:var(--rk-amber); }

/* ---------------------------------------------------------------------------
   3. LEFT RAIL — the track stack
   --------------------------------------------------------------------------- */
.rk-tracks{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 10px;
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
}
.rk-tracks-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:0 2px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:2px;
}
.rk-tracks-head b{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
}
.rk-tracks-head span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  color:#5f6875;
}
.rk-track{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 8px;
  border-radius:8px;
  background:linear-gradient(180deg,#1b2029,#14181f);
  border:1px solid #0a0d11;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.rk-track:hover{ border-color:#2a3240; }
.rk-track.is-on{
  background:linear-gradient(180deg,#222834,#181d25);
  border-color:#3a2a20;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,107,53,.14);
}
.rk-track-num{
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:#5f6875;
  min-width:18px;
}
.rk-track.is-on .rk-track-num{ color:var(--rk-amber); }
.rk-track-body{ flex:1 1 auto; min-width:0; }
.rk-track-name{
  display:block;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8b93a1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rk-track.is-on .rk-track-name{ color:#e8eaed; }
.rk-track-wave{
  display:block;
  width:100%;
  height:16px;
  margin-top:5px;
  border-radius:3px;
  background:#080b0e;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
  overflow:hidden;
}
.rk-track-wave i{
  display:block;
  height:100%;
  width:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(53,255,158,.85) 0 1px,
      transparent 1px 3px);
  opacity:.75;
}
.rk-track.is-on .rk-track-wave i{
  background:
    repeating-linear-gradient(90deg,
      rgba(53,255,158,.95) 0 1px,
      transparent 1px 3px);
  opacity:1;
}
.rk-track.is-empty{ opacity:.45; cursor:default; }
.rk-tracks-foot{
  margin-top:2px;
  padding:8px 2px 0;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5f6875;
  display:flex;
  justify-content:space-between;
}

/* ---------------------------------------------------------------------------
   4. CENTRE — the arrangement screen
   --------------------------------------------------------------------------- */
body.rk-console #sa-arrangement{
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
  padding:12px 14px 14px;
}
/* compact head: keep the two action buttons, drop the heading prose */
body.rk-console #sa-arrangement > .sa-block-head{
  margin:0 0 8px;
  padding:0;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
body.rk-console #sa-arrangement > .sa-block-head h4{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
  margin:0;
}
body.rk-console #sa-arrangement > .sa-block-head h4 .sa-step-num{
  display:inline-flex;
  width:16px; height:16px;
  margin-right:6px;
  font-size:9px;
}
body.rk-console #sa-arrangement > .sa-note{ display:none; }

/* the DAW fills the centre column */
body.rk-console #saDaw{
  border-radius:9px;
  min-height:420px;
}
body.rk-console #saDaw .sa-daw-lanes{ min-height:300px; }

/* the transport + tools become a lower bezel strip */
body.rk-console #saDaw .sa-daw-transport,
body.rk-console #saDaw .sa-daw-tools{
  border-radius:7px;
  margin-top:8px;
}
body.rk-console #saDaw .sa-marker-help{ display:none; }

/* ---------------------------------------------------------------------------
   5. RIGHT — TAKE MORE rack
   --------------------------------------------------------------------------- */
body.rk-console #sa-cast{
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
  padding:12px 14px 14px;
}
body.rk-console #sa-cast > .sa-block-head{
  margin:0 0 10px;
  padding:0 0 8px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.rk-console #sa-cast > .sa-block-head h4{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
  margin:0;
}
body.rk-console #sa-cast > .sa-block-head h4 .sa-step-num{
  display:inline-flex;
  width:16px; height:16px;
  margin-right:6px;
  font-size:9px;
}
body.rk-console #sa-cast > .sa-note{ display:none; }

/* ONE TAKE / BY SECTION — a proper hardware toggle */
body.rk-console #saRecordMode{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:4px;
  border-radius:9px;
  background:#0b0e12;
  border:1px solid #05070a;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85);
  margin:0 0 12px;
}
body.rk-console #saRecordMode .sa-mode-btn{
  border:0;
  border-radius:6px;
  padding:9px 6px;
  background:transparent;
  color:#7d8593;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:none;
  transition:background .15s ease, color .15s ease;
}
body.rk-console #saRecordMode .sa-mode-btn.is-on{
  background:linear-gradient(180deg,#ffb08a,#ff7a45 48%,#ef5a24);
  color:#241008;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

/* the one-take body gets tightened */
body.rk-console #saOneTake{ margin:0; }
body.rk-console #saOneTake .sa-note{ display:none; }
body.rk-console #saOneTake .sa-ot-head{ margin:0 0 8px; }
body.rk-console #saOneTake .sa-ot-title{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
body.rk-console #saOneTake .sa-ot-timer{
  font-size:20px;
  font-variant-numeric:tabular-nums;
  color:var(--rk-phos);
  text-shadow:0 0 10px rgba(53,255,158,.45);
}
body.rk-console #saOneTake .sa-ot-transport{ gap:6px; }
body.rk-console #saOneTake .rp-btn.primary{
  width:100%;
  padding:11px 10px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
body.rk-console #saOneTake .sa-onetake-actions,
body.rk-console #saVbv .sa-vbv-actions{ gap:6px; }

/* ---------------------------------------------------------------------------
   5b. RIGHT — the transport rack (the REAL DAW transport, relocated here)
   --------------------------------------------------------------------------- */
.rk-transport{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px 14px;
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
}
.rk-transport-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 8px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rk-transport-head b{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
}
.rk-transport-head span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rk-phos);
  text-shadow:0 0 8px rgba(53,255,158,.45);
}

/* the relocated .sa-daw-transport becomes a big hardware transport */
.rk-transport .sa-daw-transport{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "play play"
    "stop loop"
    "time time";
  gap:8px;
  align-items:center;
  margin:0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
}
.rk-transport #saDawPlay{
  grid-area:play;
  width:78px;
  height:78px;
  margin:2px auto 4px;
  border-radius:50%;
  font-size:0;                     /* hide the "▶ Play" text, keep the glyph */
  position:relative;
  background:
    radial-gradient(circle at 50% 30%, #ffc4a4 0%, #ff8a55 34%, #ef5a24 62%, #c9451a 100%);
  border:1px solid #7a2d0f;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 12px rgba(0,0,0,.35),
    0 6px 16px -4px rgba(255,107,53,.55),
    0 2px 4px rgba(0,0,0,.6);
  color:#2a1005;
  transition:transform .08s ease, filter .15s ease;
}
.rk-transport #saDawPlay::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-38%,-50%);
  width:0; height:0;
  border-left:22px solid #2a1005;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
}
.rk-transport #saDawPlay:hover{ filter:brightness(1.07); }
.rk-transport #saDawPlay:active{ transform:translateY(1px) scale(.985); }
.rk-transport #saDawPlay.is-playing::after{
  border-left:0;
  border-top:0;
  width:16px; height:18px;
  transform:translate(-50%,-50%);
  background:#2a1005;
  box-shadow:8px 0 0 #2a1005;
  border-radius:1px;
}

.rk-transport #saDawStop,
.rk-transport #saDawLoop{
  width:100%;
  height:40px;
  border-radius:8px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#252a35,#1a1e26);
  border:1px solid var(--rk-edge);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 2px 4px rgba(0,0,0,.5);
  color:#aab2c0;
}
.rk-transport #saDawStop{ grid-area:stop; }
.rk-transport #saDawLoop{ grid-area:loop; }
.rk-transport #saDawStop:hover,
.rk-transport #saDawLoop:hover{ color:#e8eaed; }
.rk-transport #saDawStop:active,
.rk-transport #saDawLoop:active{ transform:translateY(1px); }

.rk-transport .sa-daw-time{
  grid-area:time;
  text-align:center;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  color:var(--rk-phos);
  text-shadow:0 0 10px rgba(53,255,158,.5);
  padding:7px 0 2px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ---------------------------------------------------------------------------
   5c. FULL-WIDTH — VERSE-BY-VERSE VOCAL ARRANGEMENTS (§247e.1)
   A wide plate under the stems: the section cards flow as a responsive grid
   instead of a cramped vertical strip in the right rack.
   --------------------------------------------------------------------------- */
body.rk-console #saVbv{
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
  padding:12px 14px 14px;
}
body.rk-console #saVbv .sa-vbv-bar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.rk-console #saVbv .sa-vbv-title{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#c9d1d9;
}
body.rk-console #saVbv #saVbvCount{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rk-phos);
  text-shadow:0 0 8px rgba(53,255,158,.4);
}
body.rk-console #saVbv .sa-vbv-hint{
  margin:12px 0 0;
  font-size:11px;
  line-height:1.5;
  color:#7d8593;
}
/* ---------------------------------------------------------------------------
   §247f concept B — SONG RIBBON + ONE INSPECTOR
   The twelve parts are no longer twelve competing tiles. They are one
   proportional ribbon across the top of the plate, and a single inspector
   below it carries the only set of controls for the selected part.
   --------------------------------------------------------------------------- */
body.rk-console #saVbvList{
  display:block;
}

/* ---- the ribbon ---------------------------------------------------------- */
body.rk-console #saVbvList .vbx-ribbon{
  display:flex;
  align-items:stretch;
  height:76px;
  border-radius:9px;
  overflow:hidden;
  border:1px solid #07090c;
  background:#0d1116;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px -14px rgba(0,0,0,.9);
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0;
  padding:9px 9px 8px;
  border:0;
  border-right:1px solid rgba(0,0,0,.62);
  border-radius:0;
  background:linear-gradient(180deg,#1b2029 0%, #14181f 100%);
  box-shadow:none;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  color:inherit;
  transition:background .15s ease, box-shadow .15s ease;
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg:last-child{ border-right:0; }
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg.chorus{
  background:linear-gradient(180deg,#241d1c 0%, #191514 100%);
  border-right-color:rgba(0,0,0,.62);
  box-shadow:none;
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg:hover{
  background:linear-gradient(180deg,#232936 0%, #191d25 100%);
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg.chorus:hover{
  background:linear-gradient(180deg,#2e2320 0%, #1d1817 100%);
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg.is-sel{
  background:linear-gradient(180deg,rgba(255,107,53,.24) 0%, rgba(255,107,53,.06) 100%);
  box-shadow:inset 0 2px 0 var(--rk-amber);
}
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg.is-sel .vbx-seg-nm{ color:#ffd9c6; }
body.rk-console #saVbvList .sa-vbv-sec.vbx-seg.is-rec{
  box-shadow:inset 0 2px 0 var(--danger);
}

body.rk-console #saVbvList .vbx-seg-nm{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8e97a5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
body.rk-console #saVbvList .sa-vbv-sec.chorus .vbx-seg-nm{ color:#e8b79c; }
body.rk-console #saVbvList .vbx-seg-tm{
  display:block;
  font-size:9px;
  font-weight:600;
  color:#5d6673;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  line-height:1.2;
}
body.rk-console #saVbvList .vbx-seg-bar{
  display:block;
  height:3px;
  border-radius:2px;
  background:#2a313d;
  overflow:hidden;
}
body.rk-console #saVbvList .vbx-seg-bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:2px;
  background:var(--rk-phos);
  box-shadow:0 0 6px rgba(53,255,158,.7);
  transition:width .25s ease;
}
body.rk-console #saVbvList .sa-vbv-sec.is-rec .vbx-seg-bar i{
  background:var(--danger);
  box-shadow:0 0 7px rgba(255,77,94,.8);
}

/* ---- the inspector ------------------------------------------------------- */
body.rk-console #saVbvList .vbx-ins{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(180px, 232px) minmax(0,1fr) minmax(300px, 400px);
  gap:20px;
  align-items:center;
  padding:15px 18px;
  border-radius:10px;
  background:linear-gradient(180deg,#1b2029 0%, #14181f 100%);
  border:1px solid #07090c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.rk-console #saVbvList .vbx-ins-l{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
body.rk-console #saVbvList .vbx-ins-l .cb-badge{
  font-size:11px;
  padding:4px 11px;
}
body.rk-console #saVbvList .vbx-ins-meta{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  font-size:10.5px;
  color:#7d8593;
  font-variant-numeric:tabular-nums;
}
body.rk-console #saVbvList .vbx-ins-meta .vbx-dot{ color:#3d4653; }
body.rk-console #saVbvList .vbx-part{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5d6673;
}
body.rk-console #saVbvList .vbx-ins-mid{ min-width:0; }
body.rk-console #saVbvList .vbx-ins-mid .cb-take{
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
body.rk-console #saVbvList .vbx-ins-mid .cb-take-audio{
  width:min(100%, 300px);
  height:34px;
}
body.rk-console #saVbvList .vbx-ins-mid .cb-take-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
}
body.rk-console #saVbvList .vbx-ins-mid .cb-take-singer{
  font-size:10.5px;
  font-weight:700;
  color:#c9d1d9;
  letter-spacing:.02em;
}
body.rk-console #saVbvList .vbx-ins-mid .cb-take-len{
  font-size:9.5px;
  color:#5d6673;
  font-variant-numeric:tabular-nums;
}
body.rk-console #saVbvList .vbx-empty{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
  padding:8px 12px;
  border-radius:8px;
  border:1px dashed #2a313d;
  background:rgba(0,0,0,.22);
}
body.rk-console #saVbvList .vbx-empty-t{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6f7887;
}
body.rk-console #saVbvList .vbx-empty-h{
  font-size:10.5px;
  line-height:1.45;
  color:#5d6673;
}
body.rk-console #saVbvList .vbx-ins-r{
  display:flex;
  flex-direction:column;
  gap:9px;
  align-items:stretch;
  min-width:0;
}
body.rk-console #saVbvList .vbx-ins-r .cb-sec-cast{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body.rk-console #saVbvList .vbx-ins-r .sa-cast-voice{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
body.rk-console #saVbvList .vbx-ins-r .sa-cast-voice label{
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6f7887;
}
body.rk-console #saVbvList .vbx-ins-r .sa-cast-voice select{
  flex:1 1 auto;
  min-width:0;
  font-size:11px;
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #232a35;
  background:#0c0f14;
  color:#c2cad4;
  font-family:inherit;
}
body.rk-console #saVbvList .vbx-ins-btns{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
body.rk-console #saVbvList .vbx-ins-btns .cb-mini{
  flex:1 1 auto;
  text-align:center;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 9px;
  border-radius:6px;
  white-space:nowrap;
}
/* the mixer, when opened, takes the whole inspector width */
body.rk-console #saVbvList .vbx-ins .sa-vbv-mixer{
  grid-column:1 / -1;
  margin-top:4px;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:980px){
  body.rk-console #saVbvList .vbx-ins{
    grid-template-columns:1fr;
    gap:14px;
    align-items:stretch;
  }
  body.rk-console #saVbvList .vbx-ribbon{
    overflow-x:auto;
    scrollbar-width:thin;
  }
  body.rk-console #saVbvList .sa-vbv-sec.vbx-seg{
    flex:0 0 92px;
  }
}
@media (max-width:760px){
  body.rk-console #saVbvList .vbx-ribbon{ height:66px; }
  body.rk-console #saVbvList .sa-vbv-sec.vbx-seg{ flex:0 0 80px; padding:8px 7px 7px; }
  body.rk-console #saVbvList .vbx-seg-nm{ font-size:8.5px; letter-spacing:.06em; }
  body.rk-console #saVbvList .vbx-ins{ padding:13px 13px; }
  body.rk-console #saVbvList .vbx-ins-mid .cb-take-audio{ width:100%; }
}

/* ---------------------------------------------------------------------------
   6. FULL-WIDTH — VOCAL ENHANCER rack (the ONE module, after the takes)
   --------------------------------------------------------------------------- */
body.rk-console #sa-enhancer-section{
  border-radius:12px;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px -16px rgba(0,0,0,.9);
  padding:12px 14px 14px;
}
body.rk-console #sa-enhancer-section > .sa-block-head{
  margin:0 0 10px;
  padding:0 0 8px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.rk-console #sa-enhancer-section > .sa-block-head h4{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
  margin:0;
}
body.rk-console #sa-enhancer-section > .sa-block-head h4 .sa-step-num{
  display:inline-flex;
  width:16px; height:16px;
  margin-right:6px;
  font-size:9px;
}
body.rk-console #sa-enhancer-section > .sa-note{ display:none; }

/* the enhancer scrolls inside its own rack slot so the console never grows */
body.rk-console #rp-vocal-enhancer-mount{
  max-height:640px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#2a313d transparent;
  border-radius:8px;
}
body.rk-console #rp-vocal-enhancer-mount::-webkit-scrollbar{ width:8px; }
body.rk-console #rp-vocal-enhancer-mount::-webkit-scrollbar-thumb{
  background:#2a313d; border-radius:4px;
}

/* make the enhancer's dials read as milled hardware dials */
body.rk-console #rp-vocal-enhancer-mount .ve-knob{
  border-radius:10px;
  background:linear-gradient(180deg,#1b2029,#14181f);
  border:1px solid #0a0d11;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
body.rk-console #rp-vocal-enhancer-mount .ve-knob-label{
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8b93a1;
}
body.rk-console #rp-vocal-enhancer-mount .ve-knob-val{
  color:var(--rk-phos);
  text-shadow:0 0 8px rgba(53,255,158,.5);
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   7. BOTTOM TRANSPORT BAR
   --------------------------------------------------------------------------- */
body.rk-console .wizard-nav{
  border-radius:12px;
  background:linear-gradient(180deg,#232935 0%, #171b22 100%);
  border:1px solid #07090c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 -6px 20px -10px rgba(0,0,0,.9);
  padding:10px 14px;
}
body.rk-console .wizard-nav .wz-btn{
  border-radius:8px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
body.rk-console .wizard-nav .wz-hint{
  font-size:10px;
  letter-spacing:.06em;
}

/* ---------------------------------------------------------------------------
   8. RESPONSIVE — below 1180px the console folds back to two columns,
      below 900px it stacks. Never wider than the viewport.
   --------------------------------------------------------------------------- */
@media (max-width:1180px){
  body.rk-console #path-singalong{
    grid-template-columns:170px minmax(0,1fr) 300px;
    gap:10px;
  }
}

@media (max-width:980px){
  body.rk-console #path-singalong{
    grid-template-columns:minmax(0,1fr) 300px;
    grid-template-rows:auto auto auto auto auto auto;
  }
  body.rk-console #rkTracks{
    grid-column:1 / -1;
    grid-row:1;
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
  }
  .rk-tracks-head{ flex:1 0 100%; }
  .rk-track{ flex:1 1 130px; }
  .rk-tracks-foot{ flex:1 0 100%; }
  body.rk-console #sa-arrangement{ grid-column:1; grid-row:2 / span 2; }
  body.rk-console #sa-cast{ grid-column:2; grid-row:2; }
  body.rk-console #rkTransport{ grid-column:2; grid-row:3; }
  body.rk-console #saVbv{ grid-column:1 / -1; grid-row:4; }
  body.rk-console #path-singalong > .mixer-console{ grid-row:5; }
  body.rk-console #sa-enhancer-section{ grid-column:1 / -1; grid-row:6; }
  body.rk-console #path-singalong > #nuclear-upsell{ grid-row:7; }
}

@media (max-width:760px){
  body.rk-console #path-singalong{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
  }
  body.rk-console #rkTracks{ grid-column:1; grid-row:1; }
  body.rk-console #sa-arrangement{ grid-column:1; grid-row:2; }
  body.rk-console #sa-cast{ grid-column:1; grid-row:3; }
  body.rk-console #rkTransport{ grid-column:1; grid-row:4; }
  body.rk-console #saVbv{ grid-column:1; grid-row:5; }
  body.rk-console #path-singalong > .mixer-console{ grid-column:1; grid-row:6; }
  body.rk-console #sa-enhancer-section{ grid-column:1; grid-row:7; }
  body.rk-console #path-singalong > #nuclear-upsell{ grid-column:1; grid-row:8; }
  body.rk-console #rp-vocal-enhancer-mount{ max-height:none; }
  body.rk-console #saDaw{ min-height:300px; }
  body.rk-console #saDaw .sa-daw-lanes{ min-height:200px; }
  /* §247e.3 — below 720px the existing wizard-mobile slim rail takes over
     (wizard-mobile.css), so the large stretched keys only apply ≥721px. */
}

/* ---------------------------------------------------------------------------
   9. PRINT — flatten the console
   --------------------------------------------------------------------------- */
@media print{
  body.rk-console #path-singalong{ display:block; }
  body.rk-console #rkTracks{ display:none; }
  body.rk-console #rp-vocal-enhancer-mount{ max-height:none; overflow:visible; }
}

/* ---------------------------------------------------------------------------
   10. CENTRE EMPTY-STATE
   --------------------------------------------------------------------------- */
.rk-center-empty{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:420px;
  border-radius:9px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(53,255,158,.04), transparent 62%),
    linear-gradient(180deg,#080b0e,#0d1116);
  border:1px solid #000;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.9);
  text-align:center;
}
.rk-center-empty b{
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
}
.rk-center-empty span{
  font-size:11px;
  color:#5f6875;
}
@media (max-width:760px){
  .rk-center-empty{ min-height:300px; }
}

/* ==========================================================================
   11. §247d centre chrome + take-more polish
   ========================================================================== */

/* duration readout, top-left of the arrangement plate */
body.rk-console #rkDur{
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
  color:var(--rk-phos);
  text-shadow:0 0 10px rgba(53,255,158,.5);
  margin-right:auto;
  padding-right:10px;
}
body.rk-console #sa-arrangement .sa-block-head{
  display:flex;
  align-items:center;
  gap:10px;
}
body.rk-console #sa-arrangement .sa-block-head .sa-block-actions{ margin-left:0; }

/* time ruler under the waveform */
body.rk-console .rk-ruler{
  position:relative;
  height:24px;
  margin-top:6px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#0a0d11,#0d1116);
  border-radius:0 0 8px 8px;
}
body.rk-console .rk-tick{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
body.rk-console .rk-tick:first-child{ transform:translateX(2px); align-items:flex-start; }
body.rk-console .rk-tick:last-child{ transform:translateX(-100%); align-items:flex-end; }
body.rk-console .rk-tick i{
  display:block;
  width:1px;
  height:5px;
  background:rgba(255,255,255,.22);
}
body.rk-console .rk-tick b{
  margin-top:3px;
  font-size:8.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:#6f7885;
}

/* RETRY \u2014 hardware key under the transport */
body.rk-console .rk-retry{
  display:block;
  width:100%;
  margin-top:8px;
  padding:9px 10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d7dce4;
  background:linear-gradient(180deg,#2a303b 0%,#1d222b 55%,#171b22 100%);
  border:1px solid #07090c;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.55);
  cursor:pointer;
  transition:filter .12s ease, transform .06s ease;
}
body.rk-console .rk-retry:hover{ filter:brightness(1.14); }
body.rk-console .rk-retry:active{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.6); }

/* quiet the one-take card: keep EVERY control, drop only the redundant title */
body.rk-console #saOneTake .sa-ot-head{ display:none !important; }
body.rk-console #saOneTake .sa-ot-head{ margin-bottom:8px; }
body.rk-console #saOneTake .sa-ot-title{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; }

/* ---- take-more plate: trim prose, keep every control ------------------- */
body.rk-console #sa-cast .sa-block-head h4{ display:none; }
body.rk-console #sa-cast .sa-block-head{
  justify-content:space-between;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.rk-console #sa-cast .sa-block-head::before{
  content:"Take More";
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
}
body.rk-console #sa-cast #saOneVoice{
  font-size:9px;
  letter-spacing:.1em;
  padding:5px 9px;
  opacity:.85;
}
/* mode toggle: drop the verbose sub-labels, keep the big words */
body.rk-console .sa-mode-btn .sa-mode-body small{ display:none; }
body.rk-console .sa-mode-btn .sa-mode-body b{ font-size:11px; letter-spacing:.06em; }
/* one-take: the record button speaks for itself */
body.rk-console #saOneTake .sa-ot-head{ display:none; }
/* the transport strip already sits under the Take More plate */
body.rk-console #rkTransport .rk-transport-head{ display:none; }
body.rk-console #rkTransport{ padding-top:12px; }

/* ==========================================================================
   12. §247d.8 — the SAME console architecture on Steps 1, 2, 4, 5, 6
   Every panel becomes rail / stage / rack. Slots are assigned by JS
   (rk-slot-rail / -center / -right / -full) so the DOM order never changes.
   ========================================================================== */
/* only the CURRENT panel becomes the grid — non-current panels must stay
   display:none (body.wizard-on section.panel). The id keeps this above that. */
body.rk-console section.panel.is-current#panel-upload,
body.rk-console section.panel.is-current#panel-stems,
body.rk-console section.panel.is-current#panel-reperform,
body.rk-console section.panel.is-current#panel-preview,
body.rk-console section.panel.is-current#panel-export{
  display:grid;
  grid-template-columns:196px minmax(0,1fr) 344px;
  gap:14px;
  align-items:start;
  padding:14px;
}
/* the page-level explainer is replaced by the rail */
body.rk-console #panel-upload > h2,
body.rk-console #panel-stems > h2,
body.rk-console #panel-reperform > h2,
body.rk-console #panel-export > h2,
body.rk-console #panel-upload > p.hint,
body.rk-console #panel-stems > p.hint,
body.rk-console #panel-reperform > p.hint,
body.rk-console #panel-export > p.hint{
  display:none;
}
/* Step 5 keeps its sub-head (it is a merged stop) but flattens it */
body.rk-console #panel-preview > h2.master-subhead{
  grid-column:1 / -1;
  grid-row:1;
  margin:0 0 2px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8b93a1;
}
body.rk-console #panel-preview > p.hint{ display:none; }

body.rk-console .rk-slot-rail{
  grid-column:1;
  grid-row:2 / span 6;
  position:sticky;
  top:12px;
  margin:0 !important;
}
body.rk-console .rk-slot-center{
  grid-column:2;
  grid-row:2 / span 6;
  margin:0 !important;
  min-width:0;
}
body.rk-console .rk-slot-right{
  grid-column:3;
  grid-row:auto;
  margin:0 !important;
  min-width:0;
}
body.rk-console .rk-slot-full{
  grid-column:1 / -1;
  margin:0 !important;
}

/* the info rail reuses the track-rail chassis */
body.rk-console .rk-info{
  display:flex;
  flex-direction:column;
  gap:6px;
}
body.rk-console .rk-info-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  background:linear-gradient(180deg,#181c24,#12151a);
  border:1px solid #07090c;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.rk-console .rk-info-row span{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8b93a1;
}
body.rk-console .rk-info-row b{
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--rk-phos);
  text-shadow:0 0 8px rgba(53,255,158,.4);
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:62%;
}

/* right-rack plates read as hardware modules */
body.rk-console #panel-upload .rk-slot-right,
body.rk-console #panel-stems .rk-slot-right,
body.rk-console #panel-reperform .rk-slot-right,
body.rk-console #panel-preview .rk-slot-right,
body.rk-console #panel-export .rk-slot-right{
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  border-radius:12px;
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -16px rgba(0,0,0,.9);
}
body.rk-console #panel-upload .rk-slot-center,
body.rk-console #panel-stems .rk-slot-center,
body.rk-console #panel-reperform .rk-slot-center,
body.rk-console #panel-preview .rk-slot-center,
body.rk-console #panel-export .rk-slot-center{
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  border-radius:12px;
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -16px rgba(0,0,0,.9);
}

/* responsive: same ladder as the Step-3 console */
@media (max-width:1180px){
  body.rk-console section.panel.is-current#panel-upload,
  body.rk-console section.panel.is-current#panel-stems,
  body.rk-console section.panel.is-current#panel-reperform,
  body.rk-console section.panel.is-current#panel-preview,
  body.rk-console section.panel.is-current#panel-export{
    grid-template-columns:170px minmax(0,1fr) 300px;
  }
}
@media (max-width:980px){
  body.rk-console section.panel.is-current#panel-upload,
  body.rk-console section.panel.is-current#panel-stems,
  body.rk-console section.panel.is-current#panel-reperform,
  body.rk-console section.panel.is-current#panel-preview,
  body.rk-console section.panel.is-current#panel-export{
    grid-template-columns:minmax(0,1fr) 300px;
  }
  body.rk-console .rk-slot-rail{
    grid-column:1 / -1;
    grid-row:1;
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    max-width:100%;
    min-width:0;
  }
  body.rk-console .rk-info-row{
    flex:1 1 100%;
    min-width:0;
    max-width:100%;
  }
  body.rk-console .rk-slot-center{ grid-column:1; grid-row:2; }
  body.rk-console .rk-slot-right{ grid-column:2; grid-row:2; }
}
@media (max-width:760px){
  body.rk-console section.panel.is-current#panel-upload,
  body.rk-console section.panel.is-current#panel-stems,
  body.rk-console section.panel.is-current#panel-reperform,
  body.rk-console section.panel.is-current#panel-preview,
  body.rk-console section.panel.is-current#panel-export{
    grid-template-columns:minmax(0,1fr);
    padding:10px;
  }
  body.rk-console .rk-slot-rail,
  body.rk-console .rk-slot-center,
  body.rk-console .rk-slot-right{
    grid-column:1;
    grid-row:auto;
  }
  body.rk-console .rk-info-row b{ max-width:55%; }
}
@media print{
  body.rk-console section.panel.is-current#panel-upload,
  body.rk-console section.panel.is-current#panel-stems,
  body.rk-console section.panel.is-current#panel-reperform,
  body.rk-console section.panel.is-current#panel-preview,
  body.rk-console section.panel.is-current#panel-export{
    display:block;
  }
}

/* Step 1: route chooser spans the full width under the stage */
body.rk-console .rk-slot-full{
  grid-column:1 / -1;
  grid-row:auto;
  margin:0 !important;
  background:linear-gradient(180deg,#20252e 0%, #171b22 100%);
  border:1px solid #07090c;
  border-radius:12px;
  padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -16px rgba(0,0,0,.9);
}
/* panels with no right rack run rail + stage only */
body.rk-console section.panel.is-current#panel-upload.rk-no-right,
body.rk-console section.panel.is-current#panel-stems.rk-no-right,
body.rk-console section.panel.is-current#panel-reperform.rk-no-right,
body.rk-console section.panel.is-current#panel-preview.rk-no-right,
body.rk-console section.panel.is-current#panel-export.rk-no-right{
  grid-template-columns:196px minmax(0,1fr);
}
body.rk-console section.panel.is-current#panel-upload.rk-no-right .rk-slot-center,
body.rk-console section.panel.is-current#panel-stems.rk-no-right .rk-slot-center,
body.rk-console section.panel.is-current#panel-reperform.rk-no-right .rk-slot-center,
body.rk-console section.panel.is-current#panel-preview.rk-no-right .rk-slot-center,
body.rk-console section.panel.is-current#panel-export.rk-no-right .rk-slot-center{ grid-column:2; }
/* Step 5: the vocal enhancer is the right rack module — cap + scroll it */
body.rk-console #panel-preview #vocal-enhancer-details.rk-slot-right{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
body.rk-console #panel-preview #vocal-enhancer-details.rk-slot-right::-webkit-scrollbar{ width:8px; }
body.rk-console #panel-preview #vocal-enhancer-details.rk-slot-right::-webkit-scrollbar-thumb{
  background:#2b323d; border-radius:4px;
}
/* the route cards wrap instead of overflowing the rack */
body.rk-console #route-chooser .route-cards{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
body.rk-console #route-chooser .route-card{
  flex:1 1 220px;
  min-width:0;
}
body.rk-console #route-chooser .route-card *{
  overflow-wrap:anywhere;
}
@media (max-width:980px){
  body.rk-console section.panel.is-current#panel-upload.rk-no-right,
  body.rk-console section.panel.is-current#panel-stems.rk-no-right,
  body.rk-console section.panel.is-current#panel-reperform.rk-no-right,
  body.rk-console section.panel.is-current#panel-preview.rk-no-right,
  body.rk-console section.panel.is-current#panel-export.rk-no-right{ grid-template-columns:minmax(0,1fr); }
  body.rk-console section.panel.is-current#panel-upload.rk-no-right .rk-slot-center,
  body.rk-console section.panel.is-current#panel-stems.rk-no-right .rk-slot-center,
  body.rk-console section.panel.is-current#panel-reperform.rk-no-right .rk-slot-center,
  body.rk-console section.panel.is-current#panel-preview.rk-no-right .rk-slot-center,
  body.rk-console section.panel.is-current#panel-export.rk-no-right .rk-slot-center{ grid-column:1; }
}

/* ---- §247k: audio input / line-in picker (Step 3) ------------------------ */
body.rk-console .sa-input{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px;
  padding:8px 10px;
  border:1px solid var(--rk-edge,#0a0c10);
  border-radius:9px;
  background:linear-gradient(180deg,var(--rk-metal-2,#1b1f27),var(--rk-metal-3,#14171d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.rk-console .sa-input-ico{ font-size:14px; line-height:1; opacity:.9; }
body.rk-console .sa-input-name{
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rk-phos-dim,#1f6b45);
  font-weight:800;
}
body.rk-console #saInputDevice{
  flex:1 1 110px;
  min-width:96px;
  max-width:340px;
  height:28px;
  padding:0 8px;
  font-size:12px;
  color:var(--text,#e8eaed);
  background:var(--rk-metal-3,#14171d);
  border:1px solid var(--border,#2a2f3a);
  border-radius:6px;
}
body.rk-console #saInputDevice:focus{
  outline:none;
  border-color:var(--accent-2,#35c2ff);
  box-shadow:0 0 0 2px rgba(53,194,255,.18);
}
body.rk-console #saInputRefresh,
body.rk-console #saInputTest{
  height:28px;
  min-width:30px;
  padding:0 8px;
  font-size:11.5px;
  font-weight:700;
  border-radius:6px;
  border:1px solid var(--border,#2a2f3a);
  background:linear-gradient(180deg,#232833,#1b1f27);
  color:var(--text-dim,#9aa0ac);
  cursor:pointer;
}
body.rk-console #saInputRefresh:hover,
body.rk-console #saInputTest:hover{ color:var(--text,#e8eaed); border-color:rgba(53,194,255,.45); }
body.rk-console #saInputRefresh.is-busy{ animation:saInputSpin .8s linear infinite; }
@keyframes saInputSpin{ to{ transform:rotate(360deg); } }
body.rk-console #saInputTest.is-on{
  color:#0b0d11;
  background:linear-gradient(180deg,var(--rk-phos,#35ff9e),#22c47a);
  border-color:var(--rk-phos,#35ff9e);
}
body.rk-console .sa-input-meter{
  position:relative;
  flex:0 0 58px;
  height:8px;
  border-radius:5px;
  overflow:hidden;
  background:#0b0e12;
  border:1px solid var(--rk-edge,#0a0c10);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
body.rk-console .sa-input-meter > i{
  display:block;
  height:100%;
  width:0%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--rk-phos,#35ff9e),#ffd23f 72%,var(--danger,#ff4d5e));
  transition:width .06s linear;
}
body.rk-console .sa-input-status{
  font-size:10.5px;
  line-height:1.3;
  flex:1 1 100%;
  order:9;
  min-width:0;
  color:var(--text-dim,#9aa0ac);
}
body.rk-console .sa-input-status.ok{ color:var(--rk-phos,#35ff9e); }
body.rk-console .sa-input-status.err{ color:var(--danger,#ff4d5e); }
body.rk-console .sa-input-hint{
  margin:-4px 0 10px;
  font-size:11px;
  line-height:1.35;
  color:var(--rk-phos-dim,#1f6b45);
}
body.rk-console .sa-input-hint[hidden]{ display:none; }
@media (max-width:760px){
  body.rk-console #saInputDevice{ flex:1 1 100%; max-width:none; }
  body.rk-console .sa-input-meter{ flex:1 1 60px; }
}
/* The Step-3 right rack is only ~344px wide — keep the picker on two tidy
   rows (controls, then status) instead of letting it wrap into a staircase. */
body.rk-console #sa-cast .sa-input{ gap:6px; padding:7px 8px; }
body.rk-console #sa-cast .sa-input-ico{ display:none; }
body.rk-console #sa-cast .sa-input-name{ font-size:9.5px; letter-spacing:.1em; }
body.rk-console #sa-cast #saInputRefresh,
body.rk-console #sa-cast #saInputTest{ padding:0 6px; min-width:26px; font-size:11px; }

/* ---------------------------------------------------------------------------
   §247l — Output device strip (mirrors the Input strip)
   --------------------------------------------------------------------------- */
body.rk-console #saOutputDevice{
  flex:1 1 110px;
  min-width:96px;
  max-width:340px;
  height:28px;
  padding:0 8px;
  font-size:12px;
  color:var(--text,#e8eaed);
  background:var(--rk-metal-3,#14171d);
  border:1px solid var(--border,#2a2f3a);
  border-radius:6px;
}
body.rk-console #saOutputDevice:focus{
  outline:none;
  border-color:var(--accent-2,#35c2ff);
  box-shadow:0 0 0 2px rgba(53,194,255,.18);
}
body.rk-console #saOutputDevice:disabled{
  opacity:.55;
  cursor:not-allowed;
}
body.rk-console #saOutputRefresh,
body.rk-console #saOutputTest{
  height:28px;
  min-width:30px;
  padding:0 8px;
  font-size:11.5px;
  font-weight:700;
  border-radius:6px;
  border:1px solid var(--border,#2a2f3a);
  background:linear-gradient(180deg,#232833,#1b1f27);
  color:var(--text-dim,#9aa0ac);
  cursor:pointer;
}
body.rk-console #saOutputRefresh:hover,
body.rk-console #saOutputTest:hover{ color:var(--text,#e8eaed); border-color:rgba(53,194,255,.45); }
body.rk-console #saOutputRefresh.is-busy{ animation:saInputSpin .8s linear infinite; }
body.rk-console #saOutputTest.is-on{
  color:#0b0d11;
  background:linear-gradient(180deg,var(--rk-phos,#35ff9e),#22c47a);
  border-color:var(--rk-phos,#35ff9e);
}
/* no meter on the output row, so the status sits inline instead of wrapping */
body.rk-console #saOutput .sa-input-status{
  flex:1 1 120px;
  order:0;
  font-size:10.5px;
}
body.rk-console #saOutput .sa-input-status.warn{ color:#ffd23f; }
body.rk-console .sa-output{ margin-top:-4px; }
@media (max-width:760px){
  body.rk-console #saOutputDevice{ flex:1 1 100%; max-width:none; }
  body.rk-console #saOutput .sa-input-status{ flex:1 1 100%; order:9; }
}

/* ---------------------------------------------------------------------------
   §247m — Arrangement zoom controls
   --------------------------------------------------------------------------- */
body.rk-console .sa-daw-zoom{
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 5px;
  border:1px solid var(--rk-edge,#0a0c10);
  border-radius:7px;
  background:linear-gradient(180deg,var(--rk-metal-3,#14171d),#0f1218);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.rk-console .sa-daw-zoom .sa-mini{
  height:24px;
  min-width:26px;
  padding:0 7px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  border-radius:5px;
  border:1px solid var(--border,#2a2f3a);
  background:linear-gradient(180deg,#232833,#1b1f27);
  color:var(--text-dim,#9aa0ac);
  cursor:pointer;
}
body.rk-console .sa-daw-zoom .sa-mini:hover:not(:disabled){
  color:var(--text,#e8eaed);
  border-color:rgba(53,194,255,.45);
}
body.rk-console .sa-daw-zoom .sa-mini:disabled{ opacity:.4; cursor:not-allowed; }
body.rk-console .sa-daw-zoom-val{
  min-width:38px;
  text-align:center;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  color:var(--rk-phos,#35ff9e);
  text-shadow:0 0 8px rgba(53,255,158,.4);
}
body.rk-console .sa-daw.is-zoomed .sa-daw-zoom{
  border-color:rgba(53,255,158,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(53,255,158,.12);
}
/* the zoomed screen gets a subtle edge vignette so the window reads as a slice */
body.rk-console .sa-daw.is-zoomed .sa-daw-lanes{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 16px 46px rgba(0,0,0,.92),
    inset 0 -10px 30px rgba(0,0,0,.6),
    inset 24px 0 28px -18px rgba(0,0,0,.85),
    inset -24px 0 28px -18px rgba(0,0,0,.85),
    0 4px 14px rgba(0,0,0,.55);
}
@media (max-width:760px){
  body.rk-console .sa-daw-zoom{ width:100%; justify-content:space-between; }
  body.rk-console .sa-daw-zoom .sa-mini{ flex:1 1 auto; }
}

/* ============================================================================
   §247n — VOICE MODULE, RACK EDITION
   ----------------------------------------------------------------------------
   The Voice block (Match / Final vocal / Guide-tune) was the last part of
   Step 3 still wearing the old "soft card" skin: cyan and orange glows, pill
   badges, rounded 12px cards. Everything around it is brushed metal, engraved
   silkscreen and phosphor LCDs, so it read as a web form bolted onto a rack.
   This turns it into three hardware modules in one chassis:
     · a screwed faceplate with a brushed-metal grain
     · silkscreened module headers with an LED lamp each
     · engraved channel tags (VC-1 / VC-2 / VC-3)
     · LCD status readouts instead of loose coloured text
     · real fader tracks for Strength and the blend depth
   ========================================================================== */

body.rk-console #voice-console{
  position:relative;
  margin:16px 0 0;
  padding:14px 16px 16px;
  border:1px solid var(--rk-edge);
  border-radius:14px;
  background:
    radial-gradient(circle at 13px 13px, #4a5364 0 2.1px, #0a0c10 2.1px 3.3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 13px) 13px, #4a5364 0 2.1px, #0a0c10 2.1px 3.3px, transparent 3.5px),
    radial-gradient(circle at 13px calc(100% - 13px), #4a5364 0 2.1px, #0a0c10 2.1px 3.3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #4a5364 0 2.1px, #0a0c10 2.1px 3.3px, transparent 3.5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#272c36 0%, #1c2028 44%, #14171d 100%);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 12px 28px rgba(0,0,0,.45);
}

/* ---- chassis header: silkscreen + power LED ------------------------------- */
body.rk-console #voice-console .vc-head{
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid #0a0c10;
  box-shadow:0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-title{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#c9d0dc;
  text-shadow:0 1px 0 rgba(0,0,0,.85);
}
body.rk-console #voice-console .vc-title::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--rk-phos);
  box-shadow:0 0 7px rgba(53,255,158,.9), inset 0 0 2px rgba(0,0,0,.7);
}
body.rk-console #voice-console .vc-pro-badge{
  border-radius:3px;
  padding:2px 7px;
  font-size:8.5px;
  letter-spacing:.18em;
  background:linear-gradient(180deg,#3d2b1b,#241a11);
  border:1px solid #5d3f24;
  color:var(--rk-amber);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  text-shadow:0 0 6px rgba(255,107,53,.45);
}
body.rk-console #voice-console .vc-sub{
  font-size:11.5px;
  line-height:1.55;
  color:#8b93a1;
  margin:8px 0 14px;
}

/* ---- LCD chip (used for the engine state + inline values) ----------------- */
body.rk-console #voice-console .vc-cap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rk-phos);
  background:linear-gradient(180deg,#08120d,#0c1a12);
  border:1px solid #0a0c10;
  border-radius:3px;
  padding:2px 6px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 var(--rk-hi-2);
  text-shadow:0 0 6px rgba(53,255,158,.35);
}
body.rk-console #voice-console .vc-cap .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3d4552;
  box-shadow:inset 0 0 2px rgba(0,0,0,.8);
}
body.rk-console #voice-console .vc-cap.studio .dot{
  background:var(--rk-phos);
  box-shadow:0 0 6px rgba(53,255,158,.9);
}
body.rk-console #voice-console .vc-cap.preview .dot{
  background:#ffb454;
  box-shadow:0 0 6px rgba(255,180,84,.85);
}

/* ---- the three modules ---------------------------------------------------- */
body.rk-console #voice-console .vc-match,
body.rk-console #voice-console .vc-out,
body.rk-console #voice-console .vc-tune{
  position:relative;
  margin:0 0 10px;
  padding:0 12px 12px;
  border:1px solid var(--rk-edge);
  border-radius:9px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#242932 0%, #1a1e26 58%, #151920 100%);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Engraved model tag, bottom-right, like a real faceplate. */
body.rk-console #voice-console .vc-match::after,
body.rk-console #voice-console .vc-out::after,
body.rk-console #voice-console .vc-tune::after{
  position:absolute;
  right:10px;
  bottom:3px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:8px;
  letter-spacing:.18em;
  color:#4d5563;
  pointer-events:none;
}
body.rk-console #voice-console .vc-match::after{ content:"VC-1"; }
body.rk-console #voice-console .vc-out::after{ content:"VC-2"; }
body.rk-console #voice-console .vc-tune::after{ content:"VC-3"; }

/* Module header bar: bleeds to the module edges, LED + silkscreen label. */
body.rk-console #voice-console .vc-match-head{
  margin:0 -12px 11px;
  padding:8px 12px 7px;
  background:linear-gradient(180deg,#2d333e 0%, #232833 55%, #1e222a 100%);
  border-bottom:1px solid #0a0c10;
  box-shadow:inset 0 1px 0 var(--rk-hi-2), 0 1px 0 rgba(255,255,255,.03);
}
body.rk-console #voice-console .vc-match-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#9aa3b2;
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}
body.rk-console #voice-console .vc-match-title::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2f6b4c;
  box-shadow:0 0 5px rgba(53,255,158,.45), inset 0 0 2px rgba(0,0,0,.7);
}
body.rk-console #voice-console .vc-out .vc-match-title::before{
  background:#7a4a24;
  box-shadow:0 0 5px rgba(255,107,53,.5), inset 0 0 2px rgba(0,0,0,.7);
}
body.rk-console #voice-console .vc-tune .vc-match-title::before{
  background:#2f6b4c;
  box-shadow:0 0 5px rgba(53,255,158,.45), inset 0 0 2px rgba(0,0,0,.7);
}

/* Engraved legend plates instead of glowing pills. */
body.rk-console #voice-console .vc-match-tag{
  border-radius:3px;
  padding:2px 7px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
  background:linear-gradient(180deg,#16272f,#101b21);
  border:1px solid #1e4a5c;
  color:#79cfe8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow:none;
}
body.rk-console #voice-console .vc-out .vc-match-tag{
  background:linear-gradient(180deg,#2c1d13,#1d140d);
  border-color:#5a3a22;
  color:#e8a074;
}
body.rk-console #voice-console .vc-tune .vc-match-tag{
  background:linear-gradient(180deg,#132a1d,#0e1d14);
  border-color:#1f5c3c;
  color:#7fe0a8;
}

/* Body copy inside a module: quieter, so the controls lead. */
body.rk-console #voice-console .vc-note{
  font-size:11px;
  line-height:1.5;
  color:#7d8798;
}
body.rk-console #voice-console .vc-note b{
  color:#a7b0bf;
  font-weight:700;
}

/* ---- hardware buttons ----------------------------------------------------- */
body.rk-console #voice-console .vc-btn{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:9px 13px;
  border-radius:6px;
  color:#cfd6e2;
  background:linear-gradient(180deg,#3a414e 0%, #272c35 52%, #1d2129 100%);
  border:1px solid var(--rk-edge);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
body.rk-console #voice-console .vc-btn:hover:not(:disabled){
  background:linear-gradient(180deg,#444c5b 0%, #2d333d 52%, #232830 100%);
}
body.rk-console #voice-console .vc-btn:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75);
}
body.rk-console #voice-console .vc-btn:disabled{
  opacity:.4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
body.rk-console #voice-console .vc-btn.primary{
  color:#1c0e05;
  background:linear-gradient(180deg,#ff9a5e 0%, #ff6b35 55%, #dd541d 100%);
  border-color:#7d310f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 10px rgba(255,107,53,.22);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
body.rk-console #voice-console .vc-btn.primary:hover:not(:disabled){
  background:linear-gradient(180deg,#ffab77 0%, #ff7a45 55%, #e85f26 100%);
}

/* ---- LCD status readout --------------------------------------------------- */
body.rk-console #voice-console .vc-status{
  flex:1 1 100%;
  min-width:0;
  padding:5px 8px;
  border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.03em;
  color:var(--rk-phos);
  background:linear-gradient(180deg,#07110c,#0b1811);
  border:1px solid #0a0c10;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.9), 0 1px 0 var(--rk-hi-2);
  text-shadow:0 0 6px rgba(53,255,158,.3);
  overflow-wrap:anywhere;
}
body.rk-console #voice-console .vc-status:empty{ display:none; }
body.rk-console #voice-console .vc-status.ok{ color:#8dffc4; }
body.rk-console #voice-console .vc-status.err{
  color:#ff9a9a;
  text-shadow:0 0 7px rgba(255,77,94,.45);
  border-color:#3a1418;
  background:linear-gradient(180deg,#150a0b,#1d0d0f);
}

/* ---- progress as a rack meter -------------------------------------------- */
body.rk-console #voice-console .vc-progress{
  height:8px;
  border-radius:3px;
  background:linear-gradient(180deg,#080b10,#11151b);
  border:1px solid #0a0c10;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
  overflow:hidden;
}
body.rk-console #voice-console .vc-progress > i{
  background:linear-gradient(90deg,#1f6b45,#35ff9e);
  box-shadow:0 0 9px rgba(53,255,158,.6);
}

/* ---- faders --------------------------------------------------------------- */
body.rk-console #voice-console input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:20px;
  background:transparent;
  cursor:pointer;
}
body.rk-console #voice-console input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:3px;
  background:linear-gradient(180deg,#080b10,#161b22);
  border:1px solid #0a0c10;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:18px;
  margin-top:-7px;
  border-radius:2px;
  background:linear-gradient(180deg,#eef2f8 0%, #b3bccb 45%, #7f899a 100%);
  border:1px solid #0a0c10;
  box-shadow:0 1px 3px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.8);
}
body.rk-console #voice-console input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:3px;
  background:linear-gradient(180deg,#080b10,#161b22);
  border:1px solid #0a0c10;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
body.rk-console #voice-console input[type="range"]::-moz-range-thumb{
  width:11px;
  height:17px;
  border-radius:2px;
  background:linear-gradient(180deg,#eef2f8,#b3bccb 45%,#7f899a);
  border:1px solid #0a0c10;
  box-shadow:0 1px 3px rgba(0,0,0,.75);
}
body.rk-console #voice-console input[type="range"]:focus-visible{
  outline:1px solid var(--accent-2);
  outline-offset:3px;
}

/* ---- Final-vocal mode selector ------------------------------------------- */
body.rk-console #voice-console .vc-out-modes{
  gap:8px;
  margin:0 0 11px;
}
body.rk-console #voice-console .vc-out-mode{
  padding:9px 11px;
  border-radius:6px;
  border:1px solid var(--rk-edge);
  background:linear-gradient(180deg,#2a303a 0%, #1d222a 100%);
  box-shadow:inset 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-out-mode b{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c2c9d6;
}
body.rk-console #voice-console .vc-out-mode span{
  font-size:10px;
  color:#78828f;
}
body.rk-console #voice-console .vc-out-mode:hover{
  border-color:#2b4a5c;
}
body.rk-console #voice-console .vc-out-mode.is-active{
  border-color:#1f6b45;
  background:linear-gradient(180deg,#17301f 0%, #0f2016 100%);
  box-shadow:
    inset 0 0 0 1px rgba(53,255,158,.16),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 12px rgba(53,255,158,.1);
}
body.rk-console #voice-console .vc-out-mode.is-active b{ color:var(--rk-phos); }
body.rk-console #voice-console .vc-out-mode.is-active span{ color:#8fbfa4; }

/* ---- etched divider ------------------------------------------------------- */
body.rk-console #voice-console .vc-divider{
  height:1px;
  margin:4px 0 0;
  border:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.75) 12%, rgba(0,0,0,.75) 88%, transparent);
  box-shadow:0 1px 0 var(--rk-hi-2);
}

/* ---- narrow racks --------------------------------------------------------- */
@media (max-width:760px){
  body.rk-console #voice-console{ padding:12px 12px 14px; }
  body.rk-console #voice-console .vc-out-modes{ grid-template-columns:1fr; }
  body.rk-console #voice-console .vc-btn{ flex:1 1 100%; justify-content:center; }
  body.rk-console #voice-console .vc-row{ gap:8px; }
}

/* ---- engine bay: model / library / train / Convert ------------------------ */
body.rk-console #voice-console .vc-bay{
  position:relative;
  margin:2px 0 0;
  padding:12px 12px 10px;
  border:1px solid #0a0c10;
  border-radius:8px;
  background:linear-gradient(180deg,#101319 0%, #14181f 100%);
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.75),
    inset 0 -1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-bay .vc-row{
  margin-bottom:10px;
}
body.rk-console #voice-console .vc-bay .vc-row:last-of-type{
  margin-bottom:6px;
}
body.rk-console #voice-console .vc-bay .vc-note{
  color:#6f7987;
  font-size:10.5px;
}
body.rk-console #voice-console .vc-bay .vc-note a{
  color:#79cfe8;
}

/* rack selector */
body.rk-console #voice-console .vc-select{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10.5px;
  letter-spacing:.04em;
  color:#c9d0dc;
  background:linear-gradient(180deg,#0b0e13,#12161d);
  border:1px solid #0a0c10;
  border-radius:4px;
  padding:8px 10px;
  min-width:200px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85), 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-select:focus{
  outline:1px solid var(--accent-2);
  outline-offset:1px;
}

/* text field */
body.rk-console #voice-console .vc-input{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:10.5px;
  color:#c9d0dc;
  background:linear-gradient(180deg,#0b0e13,#12161d);
  border:1px solid #0a0c10;
  border-radius:4px;
  padding:8px 10px;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.85), 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-input:focus{
  outline:1px solid var(--accent-2);
  outline-offset:1px;
}
body.rk-console #voice-console .vc-input::placeholder{ color:#4f5866; }

/* library + train sub-panels read as inner sub-chassis */
body.rk-console #voice-console .vc-library,
body.rk-console #voice-console .vc-train{
  margin:0 0 10px;
  padding:0 10px 10px;
  border:1px solid var(--rk-edge);
  border-radius:7px;
  background:linear-gradient(180deg,#1b1f27 0%, #161a21 100%);
  box-shadow:inset 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-train-head{
  margin:0 -10px 9px;
  padding:7px 10px 6px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8b93a1;
  background:linear-gradient(180deg,#262b34,#1e222a);
  border-bottom:1px solid #0a0c10;
  box-shadow:inset 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-train-head .vc-match-tag{
  margin-left:6px;
}

/* sample status as a tiny LCD */
body.rk-console #voice-console .vc-sample-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8b93a1;
  background:linear-gradient(180deg,#08120d,#0c1a12);
  border:1px solid #0a0c10;
  border-radius:3px;
  padding:3px 7px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
body.rk-console #voice-console .vc-sample-status.ready{ color:var(--rk-phos); }
body.rk-console #voice-console .vc-sample-status.recording{ color:#ff8a8a; }

/* converted badge = engraved confirmation plate */
body.rk-console #voice-console .vc-converted-badge{
  border-radius:3px;
  padding:3px 8px;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rk-phos);
  background:linear-gradient(180deg,#132a1d,#0e1d14);
  border:1px solid #1f5c3c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* voice chips in the library */
body.rk-console #voice-console .vc-voice-chip{
  border-radius:5px;
  border:1px solid var(--rk-edge);
  background:linear-gradient(180deg,#242932,#1a1e26);
  box-shadow:inset 0 1px 0 var(--rk-hi-2);
}
body.rk-console #voice-console .vc-voice-chip.active{
  border-color:#1f6b45;
  background:linear-gradient(180deg,#17301f,#0f2016);
  box-shadow:inset 0 0 0 1px rgba(53,255,158,.16);
}

/* ---------------------------------------------------------------------------
   X. TAKE DECK — the recorded take as a rack transport
   ---------------------------------------------------------------------------
   The take slot used to be a bare <audio controls>, which dropped a grey
   native widget into an otherwise art-directed rack. This turns it into a
   small hardware transport: nameplate, waveform screen, scrub groove,
   timecode, Loop and Duplicate. The <audio> element is still in the DOM (it
   is tapped by a MediaElementSource so the take runs through the Vocal
   Enhancer) but it is parked off-canvas and never drawn.
   --------------------------------------------------------------------------- */
#saVbvList .cb-take.tk-deck,#saOneTake .cb-take.tk-deck,
body.rk-console #saVbvList .vbx-ins-mid .cb-take.tk-deck,
body.rk-console #saOneTake .vbx-ins-mid .cb-take.tk-deck{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:8px;
  width:100%;
  min-width:0;
  padding:9px 10px 10px;
  border-radius:9px;
  border:1px solid var(--rk-edge,#0a0c10);
  background:linear-gradient(180deg,var(--rk-metal-1,#252a34) 0%,var(--rk-metal-2,#1b1f27) 55%,var(--rk-metal-3,#14171d) 100%);
  box-shadow:inset 0 1px 0 var(--rk-hi,rgba(255,255,255,.075)),
             inset 0 -1px 0 var(--rk-lo,rgba(0,0,0,.55)),
             0 2px 6px rgba(0,0,0,.45);
  position:relative;
}

/* nameplate ---------------------------------------------------------------- */
#saVbvList .tk-name,
#saOneTake .tk-name{ display:flex;align-items:center;gap:7px;min-width:0; }
#saVbvList .tk-slot,
#saOneTake .tk-slot{
  flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.13em;
  padding:2px 6px;border-radius:4px;
  color:var(--rk-amber,#ff6b35);
  background:rgba(255,107,53,.13);
  border:1px solid rgba(255,107,53,.3);
}
#saVbvList .tk-title,
#saOneTake .tk-title{
  flex:1 1 auto;min-width:0;font-size:10.5px;font-weight:700;color:#c9d1d9;
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#saVbvList .tk-fmt,
#saOneTake .tk-fmt{
  flex:0 0 auto;font-size:8px;font-weight:800;letter-spacing:.09em;color:#7d8794;
  padding:2px 5px;border-radius:3px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
}
#saVbvList .tk-dur,
#saOneTake .tk-dur{
  flex:0 0 auto;font-size:9.5px;font-weight:700;color:#5d6673;
  font-variant-numeric:tabular-nums;
}

/* screen ------------------------------------------------------------------- */
#saVbvList .tk-screen,
#saOneTake .tk-screen{
  display:flex;flex-direction:column;gap:6px;
  padding:7px 8px 8px;border-radius:6px;
  border:1px solid #05070a;
  background:linear-gradient(180deg,var(--rk-screen-1,#080b0e),var(--rk-screen-2,#0d1116));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.03);
}
#saVbvList .tk-wave,
#saOneTake .tk-wave{ display:flex;align-items:center;gap:1px;height:34px; }
#saVbvList .tk-wave i,
#saOneTake .tk-wave i{
  flex:1 1 0;min-width:1px;height:16%;border-radius:.5px;
  background:var(--rk-phos-dim,#1f6b45);
  transition:background .16s ease, box-shadow .16s ease;
}
#saVbvList .tk-wave i.on,
#saOneTake .tk-wave i.on{
  background:var(--rk-phos,#35ff9e);
  box-shadow:0 0 4px rgba(53,255,158,.5);
}
#saVbvList .tk-scrub,
#saOneTake .tk-scrub{
  position:relative;height:12px;border-radius:6px;cursor:pointer;
  background:var(--rk-groove,rgba(0,0,0,.42));
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8), inset 0 -1px 0 rgba(255,255,255,.05);
}
#saVbvList .tk-fill,
#saOneTake .tk-fill{
  position:absolute;top:3px;bottom:3px;left:3px;border-radius:3px;
  width:calc((100% - 6px) * var(--p,0));
  background:linear-gradient(180deg,rgba(53,255,158,.8),rgba(31,107,69,.9));
  box-shadow:0 0 7px rgba(53,255,158,.3);
}
#saVbvList .tk-thumb,
#saOneTake .tk-thumb{
  position:absolute;top:50%;left:calc(3px + (100% - 6px) * var(--p,0));
  width:8px;height:16px;margin:-8px 0 0 -4px;border-radius:2px;
  background:linear-gradient(180deg,#e8eef5,#9aa6b4 55%,#5c6674);
  box-shadow:0 1px 3px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.65);
}

/* transport ---------------------------------------------------------------- */
#saVbvList .tk-transport,
#saOneTake .tk-transport{ display:flex;align-items:center;gap:7px; }
#saVbvList .tk-play,
#saOneTake .tk-play{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border-radius:50%;cursor:pointer;
  color:#9aa6b4;font-size:9px;line-height:1;
  border:1px solid #0a0c10;
  background:linear-gradient(180deg,#2d333e,#1a1e26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.6);
  transition:color .14s ease, box-shadow .14s ease;
}
#saVbvList .tk-play:hover,
#saOneTake .tk-play:hover{ color:#e8eef5; }
#saVbvList .tk-play.is-on,
#saOneTake .tk-play.is-on{
  color:#04120b;
  background:linear-gradient(180deg,#5cffb4,#25c47a 60%,#149257);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(53,255,158,.5);
}
#saVbvList .tk-tc,
#saOneTake .tk-tc{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;color:var(--rk-phos-dim,#1f6b45);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  transition:color .16s ease;
}
#saVbvList .tk-tc b,
#saOneTake .tk-tc b{ font-weight:600;color:#4a535f; }
#saVbvList .tk-deck.is-playing .tk-tc,
#saOneTake .tk-deck.is-playing .tk-tc{
  color:var(--rk-phos,#35ff9e);
  text-shadow:0 0 7px rgba(53,255,158,.45);
}
#saVbvList .tk-sp,
#saOneTake .tk-sp{ flex:1 1 auto; }
#saVbvList .tk-btn,
#saOneTake .tk-btn{
  flex:0 0 auto;font:inherit;font-size:9px;font-weight:700;letter-spacing:.03em;
  padding:4px 8px;border-radius:5px;cursor:pointer;color:#8b95a3;
  border:1px solid #0a0c10;
  background:linear-gradient(180deg,#272d37,#191d25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.5);
  transition:color .14s ease, border-color .14s ease;
}
#saVbvList .tk-btn:hover,
#saOneTake .tk-btn:hover{ color:#dbe2ea; }
#saVbvList .tk-btn.is-on,
#saOneTake .tk-btn.is-on{
  color:var(--rk-phos,#35ff9e);
  border-color:rgba(53,255,158,.35);
  background:linear-gradient(180deg,#1d2f26,#14211a);
  box-shadow:inset 0 0 0 1px rgba(53,255,158,.14);
}

/* the real element, parked off-canvas -------------------------------------- */
#saVbvList .tk-el, parked off-canvas -------------------------------------- */
#saOneTake .tk-el{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0;
  pointer-events:none;
}

/* duplicate picker --------------------------------------------------------- */
#saVbvList .tk-dup,
#saOneTake .tk-dup{
  display:flex;flex-direction:column;gap:5px;
  padding:7px 8px 8px;border-radius:6px;
  border:1px solid rgba(53,255,158,.18);
  background:rgba(8,11,14,.72);
}
#saVbvList .tk-dup-t,
#saOneTake .tk-dup-t{
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6f7a88;
}
#saVbvList .tk-dup-list,
#saOneTake .tk-dup-list{ display:flex;flex-wrap:wrap;gap:5px; }
#saVbvList .tk-dup-row,
#saOneTake .tk-dup-row{
  display:flex;align-items:center;gap:6px;font:inherit;font-size:9.5px;
  padding:4px 8px;border-radius:5px;cursor:pointer;color:#c9d1d9;
  border:1px solid #232a35;
  background:linear-gradient(180deg,#1e242d,#171b22);
}
#saVbvList .tk-dup-row:hover,
#saOneTake .tk-dup-row:hover{ border-color:rgba(53,255,158,.4);color:#fff; }
#saVbvList .tk-dup-lab,
#saOneTake .tk-dup-lab{ font-weight:700; }
#saVbvList .tk-dup-time,
#saOneTake .tk-dup-time{ font-size:8.5px;color:#5d6673;font-variant-numeric:tabular-nums; }
#saVbvList .tk-dup-has,
#saOneTake .tk-dup-has{
  font-size:7.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#ff6b35;background:rgba(255,107,53,.12);
  border:1px solid rgba(255,107,53,.28);padding:1px 4px;border-radius:3px;
}
#saVbvList .tk-dup-none,
#saOneTake .tk-dup-none{ font-size:9.5px;color:#5d6673; }
#saVbvList .tk-dup-x,
#saOneTake .tk-dup-x{
  align-self:flex-start;font:inherit;font-size:9px;font-weight:700;padding:3px 8px;
  border-radius:4px;cursor:pointer;color:#7d8794;border:1px solid #232a35;background:transparent;
}
#saVbvList .tk-dup-x:hover,
#saOneTake .tk-dup-x:hover{ color:#c9d1d9; }

@media (max-width:760px){
  #saVbvList .tk-wave,
  #saOneTake .tk-wave{ height:28px; }
  #saVbvList .tk-fmt,
  #saOneTake .tk-fmt{ display:none; }
  #saVbvList .tk-transport,
  #saOneTake .tk-transport{ gap:5px; }
  #saVbvList .tk-tc,
  #saOneTake .tk-tc{ font-size:9px; }
  #saVbvList .tk-btn,
  #saOneTake .tk-btn{ padding:4px 6px; font-size:8.5px; }
  #saVbvList .tk-play,
  #saOneTake .tk-play{ width:22px; height:22px; }
}