/* ============================================================================
   REPERFORM-RACK.CSS — §247p
   ----------------------------------------------------------------------------
   Brings the Re-Performance Studio onto the same rack hardware as the
   Re-Production Studio. This is the visual layer only.

   HOW IT WORKS
   - reperform.html now carries `class="rk-console"` on <body> and loads
     rack.css + rack-console.css LAST, so the shared tokens (--rk-metal-*,
     --rk-phos, --rk-amber, --rk-edge, --rk-hi, --rk-led-off) and the generic
     .rk-* parts are already available. Nothing is duplicated here.
   - This file only adds the PAGE SHELL the studio does not have: the chassis,
     the nameplate, the LED step rail, the cartridge bay and the tools strip.
   - Loaded LAST. Purely additive, following the contract at the top of
     rack.css: no id or class is renamed, no `display` or `visibility` of an
     interactive element is changed, no hit-testing is altered, and no element
     is re-ordered in the DOM.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. BENCH — the rack needs a wider stage than a prose page
   --------------------------------------------------------------------------- */
body.rk-console .reperform-panel {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   2. CHASSIS — .reperform-panel becomes the rack unit
   --------------------------------------------------------------------------- */
body.rk-console .reperform-panel {
  position: relative;
  border: 1px solid #07090c;
  border-radius: 16px;
  padding: 20px 20px 18px;
  background:
    linear-gradient(180deg, #2b313c 0%, #22272f 8%, #1b1f27 46%, #15181e 82%, #12151a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 2px 0 rgba(255, 255, 255, .03),
    inset 0 -1px 0 rgba(0, 0, 0, .75),
    inset 1px 0 0 rgba(255, 255, 255, .025),
    inset -1px 0 0 rgba(0, 0, 0, .4),
    0 22px 50px -20px rgba(0, 0, 0, .9),
    0 3px 8px rgba(0, 0, 0, .55);
  overflow: visible;
}

/* The old accent bar becomes the top vent slot. */
body.rk-console .reperform-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, rgba(53, 255, 158, .55), rgba(255, 107, 53, .35), rgba(53, 194, 255, .35));
  opacity: .55;
}

/* Corner screws, painted above the chassis but below the content. */
body.rk-console .reperform-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  background:
    radial-gradient(circle at 13px 13px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 13px) 13px, #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at 13px calc(100% - 13px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #4a5262 0 3.2px, #1b1f27 3.6px, transparent 4.6px);
  opacity: .85;
  z-index: 0;
}

/* Everything the user touches sits above the screw layer. */
body.rk-console .reperform-panel > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   3. NAMEPLATE — the <h2> becomes the top of the chassis
   --------------------------------------------------------------------------- */
/* rack-console.css hides #panel-reperform > h2 because the console skin
   replaces the page-level explainer with its own rail. On this page the
   nameplate IS that replacement, so it has to out-specify the ID rule. */
body.rk-console #panel-reperform > h2.rk-rp-nameplate {
  display: flex;
}

body.rk-console .rk-rp-nameplate {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 15px;
  padding: 0 2px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .01em;
  color: #e8ecf2;
}

/* Power lamp. */
body.rk-console .rk-rp-power {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
body.rk-console .rk-rp-power i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rk-phos);
  box-shadow: 0 0 10px var(--rk-phos), inset 0 1px 1px rgba(255, 255, 255, .5);
}

body.rk-console .rk-rp-nameplate .step-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .55);
}

body.rk-console .rk-rp-nm {
  display: block;
  min-width: 0;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.2;
  color: #e8ecf2;
}
body.rk-console .rk-rp-nm small {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5c6779;
}

body.rk-console .rk-rp-spacer { flex: 1 1 auto; }

body.rk-console .rk-rp-take {
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #5c6779;
}

body.rk-console .rk-rp-nameplate .rp-pro-badge {
  flex: 0 0 auto;
  margin-left: 4px;
}

/* ---------------------------------------------------------------------------
   4. LED STEP RAIL — five lamps, one per spine step
   --------------------------------------------------------------------------- */
body.rk-console .rk-rp-rail {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

body.rk-console .rk-rp-rail .rk-st {
  flex: 1 1 0;
  min-width: 96px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--rk-edge);
  border-radius: 9px;
  background: linear-gradient(180deg, #2a303b, #191d24);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .6),
    0 1px 2px rgba(0, 0, 0, .5);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #7d8a9e;
  transition: color .15s, box-shadow .15s, border-color .15s;
}

body.rk-console .rk-rp-rail .rk-st .rk-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--rk-led-off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8);
}

body.rk-console .rk-rp-rail .rk-st .rk-n {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #5c6779;
}

/* Current step: phosphor. */
body.rk-console .rk-rp-rail .rk-st.on {
  color: #e8ecf2;
  border-color: rgba(53, 255, 158, .34);
}
body.rk-console .rk-rp-rail .rk-st.on .rk-led {
  background: var(--rk-phos);
  box-shadow: 0 0 10px var(--rk-phos), inset 0 1px 1px rgba(255, 255, 255, .5);
}
body.rk-console .rk-rp-rail .rk-st.on .rk-n { color: var(--rk-phos); }

/* Completed step: dim phosphor. */
body.rk-console .rk-rp-rail .rk-st.done .rk-led {
  background: var(--rk-phos-dim);
  box-shadow: 0 0 6px rgba(31, 107, 69, .9);
}
body.rk-console .rk-rp-rail .rk-st.done .rk-n { color: var(--rk-phos-dim); }

/* ---------------------------------------------------------------------------
   5. CARTRIDGE BAY — the module tabs become path cartridges
   --------------------------------------------------------------------------- */
body.rk-console .rp-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 0;
}

body.rk-console .rp-tab {
  position: relative;
  flex: initial;
  display: block;
  text-align: left;
  cursor: pointer;
  padding: 30px 14px 12px;
  border: 1px solid var(--rk-edge);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .22));
  box-shadow:
    inset 0 1px 0 var(--rk-hi-2),
    inset 0 -1px 0 rgba(0, 0, 0, .45);
  color: #7d8a9e;
  font: inherit;
  transition: border-color .15s, box-shadow .15s, color .15s;
}

body.rk-console .rp-tab:hover {
  border-color: #2c3441;
  color: #e8ecf2;
}

body.rk-console .rp-tab.active {
  color: #e8ecf2;
  border-color: rgba(53, 255, 158, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(0, 0, 0, .22));
  box-shadow:
    inset 0 1px 0 var(--rk-hi-2),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 0 0 1px rgba(53, 255, 158, .16),
    0 0 22px -6px rgba(53, 255, 158, .55);
}

body.rk-console .rp-tab-ico {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1;
  flex: initial;
}

body.rk-console .rp-tab-txt {
  display: block;
}
body.rk-console .rp-tab-txt b {
  display: block;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  margin-bottom: 3px;
  color: inherit;
}
body.rk-console .rp-tab-txt small {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: #7d8a9e;
}
body.rk-console .rp-tab.active .rp-tab-txt b { color: #e8ecf2; }

body.rk-console .rp-tab .rp-pro-badge {
  position: absolute;
  top: 9px;
  right: 11px;
  margin: 0;
  font-size: 9px;
  letter-spacing: .08em;
}

/* PATH n tag, added by the bay markup. */
body.rk-console .rp-tab .rp-cart-tag {
  position: absolute;
  top: 9px;
  left: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #5c6779;
}
body.rk-console .rp-tab.active .rp-cart-tag { color: var(--rk-phos); }

/* ---------------------------------------------------------------------------
   6. TOOLS STRIP — Live Instrument + Likeness live here, not in the bay
   --------------------------------------------------------------------------- */
body.rk-console .rp-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 18px;
  padding: 9px 11px;
  border: 1px dashed rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  flex-wrap: wrap;
}

body.rk-console .rp-tools-lbl {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c6779;
  margin-right: 2px;
}

body.rk-console .rp-tools .rp-tab {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: 11.5px;
  font-weight: 700;
}
body.rk-console .rp-tools .rp-tab .rp-tab-ico {
  display: inline;
  margin: 0 6px 0 0;
  font-size: 12px;
}
body.rk-console .rp-tools .rp-tab .rp-tab-txt { display: inline; }
body.rk-console .rp-tools .rp-tab .rp-tab-txt b {
  display: inline;
  font-size: 11.5px;
  margin: 0;
}
body.rk-console .rp-tools .rp-tab .rp-tab-txt small { display: none; }
body.rk-console .rp-tools .rp-tab .rp-pro-badge,
body.rk-console .rp-tools .rp-tab .rp-cart-tag {
  position: static;
  margin-left: 6px;
  font-size: 8.5px;
}

/* ---------------------------------------------------------------------------
   7. SECTION FACEPLATES — each .rp-section reads as a module in the rack
   --------------------------------------------------------------------------- */
body.rk-console .reperform-panel .rp-section {
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 11px;
  padding: 14px 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(0, 0, 0, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

body.rk-console .reperform-panel .rp-section > h4 {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8b98ab;
  margin: 0 0 12px;
}

/* The step chip, skinned as a rack LED counter. Same element on every path
   (Pass 2), so this one rule covers instrumental, vocal, sing-along, live
   instrument and likeness at once. */
body.rk-console .reperform-panel .rp-step {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--rk-phos);
  background: linear-gradient(180deg, #2a303b, #1a1e26);
  border: 1px solid var(--rk-edge);
  box-shadow:
    inset 0 1px 0 var(--rk-hi),
    0 0 10px -4px rgba(53, 255, 158, .7);
}

/* Nested sections (AUTO / CUSTOM inside the mode step) stay flat. */
body.rk-console .reperform-panel .rp-section .rp-section {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 10px 0 0;
}

/* ---------------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.rk-console .rp-tabs {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* The phone shell (reperform-mobile.js) builds its own appbar and its own
   #rp-steprail, and it relocates #rp-tabs into that head. Showing the desktop
   nameplate and the rack rail on top of that would double every heading, so
   the shell owns the top of the page on phones. */
body.rk-console.rp-on #panel-reperform > h2.rk-rp-nameplate,
body.rk-console.rp-on #rk-rp-rail {
  display: none;
}

@media (max-width: 700px) {
  body.rk-console .reperform-panel {
    padding: 16px 14px 14px;
    border-radius: 13px;
  }
  body.rk-console .rk-rp-rail {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  body.rk-console .rk-rp-rail .rk-st {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 8px 9px;
    font-size: 11px;
  }
  body.rk-console .rk-rp-nameplate {
    gap: 10px;
    flex-wrap: wrap;
  }
  body.rk-console .rk-rp-take { display: none; }
  body.rk-console .rp-tabs {
    grid-template-columns: 1fr;
  }
  body.rk-console .rp-tools .rp-tab {
    flex: 1 1 100%;
  }
}


/* ---------------------------------------------------------------------------
   9. MODULE INTERIORS — the three Re-Performance paths as rack hardware
   ---------------------------------------------------------------------------
   Pass 1 (§247p) built the SHELL: chassis, nameplate, LED rail, cartridge bay,
   tools strip, and a faceplate around each .rp-section. The path interiors
   themselves were still prose forms — bordered divs with body copy, native
   selects and browser-default sliders. This pass brings them onto the same
   hardware as the Re-Production wizard's Step 3 (step3-rack.css / master-rack.css):

     9.1  .rk3-route   read-only "which path am I on" strip
     9.2  .rk-mods     locked winning-metric module rows
     9.3  .rk-outbay   the output bay (result + fidelity + meter)
     9.4  interior control skin (checks, toggles, modes, chips, faders, selects,
          dropzones, progress, gates, errors)

   Contract, unchanged from Pass 1: purely additive. No id or class is renamed,
   no `display`/`visibility` of an interactive element is changed, no element is
   re-ordered, and no hit-testing is altered. Every rule is scoped to
   `body.rk-console` so the page is still usable if the skin fails to load.
   --------------------------------------------------------------------------- */

/* ==== 9.1 ROUTE STRIP ==================================================== */
body.rk-console .rk3-route {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, rgba(53, 255, 158, .06), rgba(0, 0, 0, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.rk-console .rk3-route-lamp {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rk-phos);
  box-shadow: 0 0 9px var(--rk-phos);
}

body.rk-console .rk3-route-txt { flex: 1 1 auto; min-width: 0; }

body.rk-console .rk3-route-txt b {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
  color: #e8ecf2;
}

body.rk-console .rk3-route-txt small {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
  color: #7d8a9e;
}

body.rk-console .rk3-route-tag {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 5px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #06241a;
  background: linear-gradient(180deg, #5cf0b0, #22b877);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .4);
}

body.rk-console .rk3-route-tag.amber {
  color: #2a1200;
  background: linear-gradient(180deg, #ffb066, #ff6b35);
}

/* ==== 9.2 LOCKED MODULE STRIPS =========================================== */
body.rk-console .rk-mods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

body.rk-console .rk-modrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .032), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.rk-console .rk-modrow.locked {
  border-color: rgba(53, 255, 158, .16);
  background: linear-gradient(180deg, rgba(53, 255, 158, .045), rgba(0, 0, 0, .2));
}

body.rk-console .rk-modrow .rk-lamp {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rk-phos);
  box-shadow: 0 0 9px rgba(53, 255, 158, .8);
}

body.rk-console .rk-modrow .rk-lamp.off {
  background: var(--rk-led-off);
  box-shadow: none;
}

body.rk-console .rk-modrow .rk-txt { flex: 1 1 auto; min-width: 0; }

body.rk-console .rk-modrow .rk-txt b {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
  color: #e8ecf2;
}

body.rk-console .rk-modrow .rk-txt small {
  display: block;
  font-size: 10.5px;
  line-height: 1.4;
  color: #7d8a9e;
}

/* the winning value, right-aligned like a hardware readout */
body.rk-console .rk-modrow .rk-val {
  flex: 0 0 auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--rk-phos);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(53, 255, 158, .35);
  white-space: nowrap;
}

body.rk-console .rk-modrow .rk-val.dim { color: #8b98ab; text-shadow: none; }

body.rk-console .rk-modrow .rk-lock {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #06241a;
  background: linear-gradient(180deg, #5cf0b0, #22b877);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ==== 9.3 OUTPUT BAY ===================================================== */
body.rk-console .rk-outbay {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 11px;
  border: 1px solid var(--rk-edge);
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .12));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55);
}

body.rk-console .rk-ob-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rk-phos-dim);
}

body.rk-console .rk-ob-hd .r {
  margin-left: auto;
  color: var(--rk-phos);
}

/* ==== 9.4 INTERIOR CONTROL SKIN ========================================== */

/* ---- intro copy reads as silkscreen, not body text ---- */
body.rk-console .reperform-panel .rp-tagline {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #a9b5c6;
}
body.rk-console .reperform-panel .rp-tagline em {
  color: #e8ecf2;
  font-style: normal;
  font-weight: 700;
}

/* ---- "How it works" becomes a pull-out drawer ---- */
body.rk-console .reperform-panel .rp-more {
  margin: 0 0 14px;
  border: 1px solid rgba(0, 0, 0, .5);
  border-radius: 10px;
  background: rgba(0, 0, 0, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
body.rk-console .reperform-panel .rp-more > summary {
  padding: 9px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8b98ab;
}
body.rk-console .reperform-panel .rp-more[open] > summary {
  color: var(--rk-phos);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
}
body.rk-console .reperform-panel .rp-more .hint {
  padding: 0 12px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #7d8a9e;
}

/* ---- the four-step "how" cards become a signal chain ---- */
body.rk-console .reperform-panel .rp-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  padding: 0 12px 12px;
}
body.rk-console .reperform-panel .rp-how-step {
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2));
  font-size: 10.5px;
  line-height: 1.45;
  color: #7d8a9e;
}
body.rk-console .reperform-panel .rp-how-step b {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 750;
  color: #e8ecf2;
}
body.rk-console .reperform-panel .rp-how-num {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
  color: var(--rk-phos);
  background: #1a1e26;
  border: 1px solid var(--rk-edge);
}

/* ---- notes ---- */
body.rk-console .reperform-panel .rp-note,
body.rk-console .reperform-panel .rp-hint {
  font-size: 11px;
  line-height: 1.5;
  color: #6f7d92;
}
body.rk-console .reperform-panel .rp-note b,
body.rk-console .reperform-panel .rp-hint b { color: #b6c2d2; }

/* ---- checkbox rows: a module with a lamp ---- */
body.rk-console .reperform-panel .rp-check,
body.rk-console .reperform-panel .rp-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
  font-size: 11.5px;
  line-height: 1.5;
  color: #93a0b4;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
body.rk-console .reperform-panel .rp-check:hover,
body.rk-console .reperform-panel .rp-toggle:hover {
  border-color: rgba(53, 255, 158, .2);
}
body.rk-console .reperform-panel .rp-check input[type="checkbox"],
body.rk-console .reperform-panel .rp-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 2px 0 0;
  width: 14px;
  height: 14px;
  accent-color: var(--rk-phos);
  cursor: pointer;
}
body.rk-console .reperform-panel .rp-check b,
body.rk-console .reperform-panel .rp-toggle b { color: #e0e7f0; }

/* ---- AUTO / CUSTOM cartridges ---- */
body.rk-console .reperform-panel .rp-mode {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 var(--rk-hi-2), inset 0 -1px 0 rgba(0, 0, 0, .45);
  color: #7d8a9e;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
body.rk-console .reperform-panel .rp-mode:hover { border-color: #2c3441; color: #e8ecf2; }
body.rk-console .reperform-panel .rp-mode.active {
  color: #e8ecf2;
  border-color: rgba(53, 255, 158, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .2));
  box-shadow:
    inset 0 1px 0 var(--rk-hi-2),
    0 0 0 1px rgba(53, 255, 158, .14),
    0 0 20px -6px rgba(53, 255, 158, .5);
}
body.rk-console .reperform-panel .rp-mode h4 { color: inherit; }
body.rk-console .reperform-panel .rp-mode p { color: #7d8a9e; }
body.rk-console .reperform-panel .rp-mode .rp-mode-dot {
  border-color: #333a46;
  background: transparent;
}
body.rk-console .reperform-panel .rp-mode.active .rp-mode-dot {
  border-color: var(--rk-phos);
  background: var(--rk-phos);
  box-shadow: 0 0 9px var(--rk-phos);
}

/* ---- preset chips: small hardware keys ---- */
body.rk-console .reperform-panel .rp-chip {
  border: 1px solid var(--rk-edge);
  border-radius: 6px;
  padding: 5px 10px;
  background: linear-gradient(180deg, #262c36, #171b22);
  box-shadow: inset 0 1px 0 var(--rk-hi), 0 1px 2px rgba(0, 0, 0, .6);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8b98ab;
  cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
body.rk-console .reperform-panel .rp-chip:hover { color: #e8ecf2; border-color: #2c3441; }
body.rk-console .reperform-panel .rp-chip.active {
  color: var(--rk-phos);
  border-color: rgba(53, 255, 158, .4);
  background: linear-gradient(180deg, #10241b, #0a1712);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 16px -4px rgba(53, 255, 158, .55);
}

/* ---- faders: a real channel strip ---- */
body.rk-console .reperform-panel .rp-slider {
  padding: 10px 11px 11px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, .5);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1e242d, #141920 60%, #0f141a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -12px 24px -18px #000;
}
body.rk-console .reperform-panel .rp-slider .rp-slider-head {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.rk-console .reperform-panel .rp-slider .rp-slider-head b {
  color: #a9b5c6;
  font-weight: 700;
}
body.rk-console .reperform-panel .rp-slider .rp-slider-head span {
  color: var(--rk-phos);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(53, 255, 158, .35);
}
body.rk-console .reperform-panel .rp-slider input[type="range"] {
  width: 100%;
  height: 18px;
  accent-color: var(--rk-phos);
  cursor: pointer;
}
body.rk-console .reperform-panel .rp-slider small { color: #6f7d92; font-size: 10px; }

/* ---- selects: read as a small screen ---- */
body.rk-console .reperform-panel .rp-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--rk-edge) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .3)),
    linear-gradient(180deg, var(--rk-screen-1), var(--rk-screen-2)) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7) !important;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--rk-phos) !important;
  cursor: pointer;
}
body.rk-console .reperform-panel .rp-select:focus {
  outline: none;
  border-color: rgba(53, 255, 158, .4) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(53, 255, 158, .12) !important;
}
body.rk-console .reperform-panel .rp-field > label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b98ab;
}

/* ---- dropzone: an input bay ---- */
body.rk-console .reperform-panel .rp-dropzone {
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(53, 255, 158, .05), transparent 70%),
    rgba(0, 0, 0, .22);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .5);
  transition: border-color .15s, background .15s;
}
body.rk-console .reperform-panel .rp-dropzone:hover,
body.rk-console .reperform-panel .rp-dropzone.drag {
  border-color: rgba(53, 255, 158, .42);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(53, 255, 158, .09), transparent 70%),
    rgba(0, 0, 0, .22);
}
body.rk-console .reperform-panel .rp-dropzone-text b { color: #e0e7f0; }
body.rk-console .reperform-panel .rp-dropzone-text small { color: #6f7d92; }
body.rk-console .reperform-panel .rp-link { color: var(--rk-phos); }

/* ---- file info: a loaded-media readout ---- */
body.rk-console .reperform-panel .rp-file-info {
  border: 1px solid rgba(53, 255, 158, .16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(53, 255, 158, .05), rgba(0, 0, 0, .2));
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: #a9b5c6;
}

/* ---- progress: an LED bar ---- */
body.rk-console .reperform-panel .rp-progress-wrap {
  border: 1px solid var(--rk-edge);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(0, 0, 0, .26);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
}
body.rk-console .reperform-panel .rp-progress-track {
  height: 7px;
  border-radius: 4px;
  background: #0a0c10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  overflow: hidden;
}
body.rk-console .reperform-panel .rp-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1f6b45, var(--rk-phos) 72%, #ffe066);
  box-shadow: 0 0 12px -2px rgba(53, 255, 158, .85);
}
body.rk-console .reperform-panel .rp-progress-msg {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .05em;
  color: #8b98ab;
}

/* ---- result card: the output bay ---- */
body.rk-console .reperform-panel .rp-result-card {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 26px -22px #000;
}
body.rk-console .reperform-panel .rp-result-card h4 { color: #e8ecf2; }
body.rk-console .reperform-panel .rp-result-card p { color: #7d8a9e; }

/* ---- likeness meter: a metering bay ---- */
body.rk-console .reperform-panel .likeness-meter {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .14));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55);
}
body.rk-console .reperform-panel .meter-title {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rk-phos-dim);
}
body.rk-console .reperform-panel .meter-model {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .04em;
  color: #5c6779;
}
body.rk-console .reperform-panel .meter-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b98ab;
}
body.rk-console .reperform-panel .meter-track {
  height: 6px;
  border-radius: 3px;
  background: #0a0c10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  overflow: hidden;
}
body.rk-console .reperform-panel .meter-value {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--rk-phos);
  font-variant-numeric: tabular-nums;
}
body.rk-console .reperform-panel .meter-verdict {
  font-size: 10.5px;
  line-height: 1.45;
  color: #93a0b4;
}

/* ---- fidelity gate: same hardware as .rk-fid in Step 3 ---- */
body.rk-console .reperform-panel .rp-fidelity {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, .14));
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55);
}
body.rk-console .reperform-panel .rp-fid-head {
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
body.rk-console .reperform-panel .rp-fid-title {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rk-phos-dim);
}
body.rk-console .reperform-panel .rp-fid-verdict {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 4px;
}
body.rk-console .reperform-panel .rp-fid-sub {
  font-size: 10.5px;
  line-height: 1.5;
  color: #6f7d92;
}
body.rk-console .reperform-panel .rp-fid-score-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b98ab;
}
body.rk-console .reperform-panel .rp-fid-score-track {
  height: 6px;
  border-radius: 3px;
  background: #0a0c10;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  overflow: hidden;
}
body.rk-console .reperform-panel .rp-fid-score-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #1f6b45, var(--rk-phos) 72%, #ffe066);
  box-shadow: 0 0 10px -2px rgba(53, 255, 158, .8);
}
body.rk-console .reperform-panel .rp-fid-score-val {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--rk-phos);
  font-variant-numeric: tabular-nums;
}
body.rk-console .reperform-panel .rp-fid-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: #6f7d92;
}

/* ---- gate + error: warning plates ---- */
body.rk-console .reperform-panel .rp-gate {
  border: 1px solid rgba(255, 107, 53, .3);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 107, 53, .07), rgba(0, 0, 0, .24));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #b6c2d2;
}
body.rk-console .reperform-panel .rp-gate b { color: #ffb066; }
body.rk-console .reperform-panel .rp-error {
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
}

/* ---- primary / ghost buttons: hardware keys ---- */
body.rk-console .reperform-panel .rp-btn {
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 16px;
  transition: filter .15s, box-shadow .15s;
}
body.rk-console .reperform-panel .rp-btn.primary {
  color: #06241a;
  background: linear-gradient(180deg, #5cf0b0, #22b877);
  border: 1px solid #0d3a26;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 2px 0 #0d3a26,
    0 8px 20px -10px rgba(53, 255, 158, .8);
}
body.rk-console .reperform-panel .rp-btn.primary:hover { filter: brightness(1.08); }
body.rk-console .reperform-panel .rp-btn.ghost {
  color: #a9b5c6;
  background: linear-gradient(180deg, #262c36, #171b22);
  border: 1px solid var(--rk-edge);
  box-shadow: inset 0 1px 0 var(--rk-hi), 0 1px 2px rgba(0, 0, 0, .6);
}
body.rk-console .reperform-panel .rp-btn.ghost:hover { color: #e8ecf2; }

/* ---- the "locked" plate on the instrumental path ---- */
body.rk-console .reperform-panel .rp-locked {
  border-color: rgba(53, 255, 158, .22) !important;
  background: linear-gradient(180deg, rgba(53, 255, 158, .05), rgba(0, 0, 0, .22)) !important;
  border-radius: 9px !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: #93a0b4 !important;
}
body.rk-console .reperform-panel .rp-locked b { color: var(--rk-phos); }

/* ---- badges ---- */
body.rk-console .reperform-panel .rp-badge {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rk-phos);
  background: rgba(53, 255, 158, .08);
  border: 1px solid rgba(53, 255, 158, .22);
  border-radius: 4px;
  padding: 2px 5px;
}

/* ---- sing-along: own-stems bay + DAW ---- */
body.rk-console .reperform-panel .sa-own {
  border: 1px solid rgba(53, 255, 158, .2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(53, 255, 158, .045), rgba(0, 0, 0, .2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
body.rk-console .reperform-panel .sa-own-toggle {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e8ecf2;
}
body.rk-console .reperform-panel .sa-own-badge {
  color: #06241a;
  background: linear-gradient(180deg, #5cf0b0, #22b877);
  border-radius: 4px;
  font-size: 8.5px;
  letter-spacing: .08em;
}
body.rk-console .reperform-panel .sa-or span {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5c6779;
}
body.rk-console .reperform-panel .sa-daw {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, #141920, #0d1116);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .6);
}
body.rk-console .reperform-panel .sa-daw-bar {
  background: linear-gradient(180deg, #262c36, #171b22);
  border-bottom: 1px solid var(--rk-edge);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b98ab;
}
body.rk-console .reperform-panel .sa-mini,
body.rk-console .reperform-panel .sa-seg {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid var(--rk-edge);
  border-radius: 5px;
  background: linear-gradient(180deg, #262c36, #171b22);
  box-shadow: inset 0 1px 0 var(--rk-hi);
  color: #8b98ab;
  cursor: pointer;
}
body.rk-console .reperform-panel .sa-mini:hover,
body.rk-console .reperform-panel .sa-seg:hover { color: #e8ecf2; }
body.rk-console .reperform-panel .sa-seg.is-on {
  color: var(--rk-phos);
  border-color: rgba(53, 255, 158, .35);
  background: linear-gradient(180deg, #10241b, #0a1712);
}

/* ==== 9.5 RESPONSIVE ===================================================== */
@media (max-width: 700px) {
  body.rk-console .rk3-route { padding: 10px 11px; gap: 9px; }
  body.rk-console .rk3-route-txt b { font-size: 11.5px; }
  body.rk-console .rk-mods { grid-template-columns: 1fr; }
  body.rk-console .rk-modrow { padding: 9px 10px; }
  body.rk-console .rk-modrow .rk-val { font-size: 11px; }
  body.rk-console .reperform-panel .rp-how { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  body.rk-console .rk-modrow { flex-wrap: wrap; }
  body.rk-console .rk-modrow .rk-val { width: 100%; text-align: left; padding-left: 19px; }
  body.rk-console .reperform-panel .rp-how { grid-template-columns: 1fr; }
}

/* =====================================================================
   9.6  Sing-Along parity with Re-Production Step 3
   The Sing-Along path mirrors the Step 3 sing-along block one-for-one.
   The one thing it must NOT do is re-perform the instrumental, so those
   controls are present but dead: .rk-off greys them without hiding them,
   because a missing control reads as a bug and a greyed one reads as a
   deliberate rule.
   ===================================================================== */

/* ---- greyed / not-available-on-this-path ---- */
body.rk-console .reperform-panel .rk-off,
body.rk-console .reperform-panel .rk-off * {
  cursor: not-allowed !important;
}
body.rk-console .reperform-panel .rp-toggle.rk-off {
  opacity: .45;
  filter: grayscale(1);
  border-style: dashed;
}
body.rk-console .reperform-panel .rp-toggle.rk-off input[type="checkbox"] {
  accent-color: var(--rk-led-off) !important;
  box-shadow: none !important;
}
body.rk-console .reperform-panel .rp-toggle.rk-off em {
  color: var(--rk-amber);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
}
body.rk-console .reperform-panel .sa-seg.rk-off {
  opacity: .38;
  filter: grayscale(1);
  border-color: var(--rk-edge) !important;
  color: var(--rk-led-off) !important;
  background: linear-gradient(180deg, var(--rk-metal-2), var(--rk-metal-3)) !important;
  box-shadow: inset 0 1px 0 var(--rk-hi-2) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
body.rk-console .reperform-panel .sa-seg.rk-off.is-on {
  background: linear-gradient(180deg, var(--rk-metal-2), var(--rk-metal-3)) !important;
  color: var(--rk-led-off) !important;
}

/* ---- section detect progress / status (ported from section-recorder.css) ---- */
body.rk-console .reperform-panel .sr-progress {
  position: relative;
  height: 6px;
  margin: 12px 0 0;
  border-radius: 4px;
  background: var(--rk-screen-1);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .85);
  overflow: hidden;
}
body.rk-console .reperform-panel .sr-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1f6b45, var(--rk-phos) 72%, #ffe066);
  box-shadow: 0 0 10px rgba(53, 255, 158, .45);
  transition: width .25s linear;
}
body.rk-console .reperform-panel .sr-status {
  margin-top: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--rk-phos-dim);
  min-height: 14px;
}
body.rk-console .reperform-panel .sr-status.err {
  color: var(--rk-amber);
}

/* ---- the cast block sits on the same faceplate rhythm as the rest ---- */
body.rk-console .reperform-panel .rp-section .sa-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
body.rk-console .reperform-panel .rp-section .sa-block-head h4 {
  margin: 0;
}
body.rk-console .reperform-panel .rp-section .sa-block-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- input / output pickers read as patch points ---- */
body.rk-console .reperform-panel .sa-input {
  border: 1px solid var(--rk-edge);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--rk-metal-2), var(--rk-metal-3));
  box-shadow: inset 0 1px 0 var(--rk-hi-2), 0 1px 0 rgba(0, 0, 0, .5);
}
body.rk-console .reperform-panel .sa-input .cb-select,
body.rk-console .reperform-panel .sa-ot-guide .cb-select,
body.rk-console .reperform-panel .sa-ot-guide select {
  background: linear-gradient(180deg, var(--rk-screen-1), var(--rk-screen-2)) !important;
  border: 1px solid var(--rk-edge) !important;
  color: var(--rk-phos) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7) !important;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
}

/* ---- record-mode cartridges ---- */
body.rk-console .reperform-panel .sa-record-mode .sa-mode-btn {
  border: 1px solid var(--rk-edge);
  background: linear-gradient(180deg, var(--rk-metal-2), var(--rk-metal-3));
  box-shadow: inset 0 1px 0 var(--rk-hi-2);
  border-radius: 9px;
}
body.rk-console .reperform-panel .sa-record-mode .sa-mode-btn.is-on {
  border-color: rgba(53, 255, 158, .45);
  background: linear-gradient(180deg, rgba(53, 255, 158, .1), rgba(53, 255, 158, .03));
  box-shadow: inset 0 1px 0 var(--rk-hi), 0 0 0 1px rgba(53, 255, 158, .18),
              0 0 18px rgba(53, 255, 158, .12);
}

/* ---- one-take bay ---- */
body.rk-console .reperform-panel .sa-onetake {
  border: 1px solid var(--rk-edge);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--rk-metal-2), var(--rk-metal-3));
  box-shadow: inset 0 1px 0 var(--rk-hi-2), 0 2px 0 rgba(0, 0, 0, .45);
}
body.rk-console .reperform-panel .sa-ot-timer,
body.rk-console .reperform-panel .sa-ot-time {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--rk-phos);
  text-shadow: 0 0 12px rgba(53, 255, 158, .35);
}
body.rk-console .reperform-panel .sa-ot-status {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--rk-phos-dim);
}
body.rk-console .reperform-panel .sa-ot-take audio {
  width: 100%;
  filter: invert(.92) hue-rotate(120deg) saturate(.6);
}

@media (max-width: 700px) {
  body.rk-console .reperform-panel .rp-section .sa-block-head {
    flex-direction: column;
    align-items: stretch;
  }
  body.rk-console .reperform-panel .rp-section .sa-block-actions {
    width: 100%;
  }
  body.rk-console .reperform-panel .rp-section .sa-block-actions .sr-btn {
    flex: 1 1 auto;
  }
}

/* =====================================================================
   9.7  Four visual corrections on the Sing-Along path
   ---------------------------------------------------------------------
   (a) the selected record-mode cartridge must show BLACK letters — the
       label <b> was inheriting --accent (orange) on an orange slab;
   (b) "Record the whole song" is the house logo blue, not the section
       accent orange;
   (c) the captured-take card must match the Re-Production Studio exactly:
       an unfiltered native player and a red "Delete take" key.
   ===================================================================== */

/* (a) selected mode cartridge — black type on the orange enamel ---------- */
body.rk-console #saRecordMode .sa-mode-btn.is-on,
body.rk-console #saRecordMode .sa-mode-btn.is-on .sa-mode-body b,
body.rk-console #saRecordMode .sa-mode-btn.is-on .sa-mode-body small,
body.rk-console #saRecordMode .sa-mode-btn.is-on .sa-mode-ico {
  color: #000 !important;
  text-shadow: none !important;
}
body.rk-console #saRecordMode .sa-mode-btn.is-on .sa-mode-body small {
  opacity: .72;
}

/* (b) record-the-whole-song — the same key as "Auto-Balance Now" in the
       Step 5 rack: a dark glass slab with a cyan hairline and inner glow,
       an icon, a bold title and a muted subtitle. Copied from
       master-rack.css .rk-bal-go so the two read as one control family. */
body.rk-console .reperform-panel #saOneTake #saOtRecord {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(127, 220, 255, .20) !important;
  background:
    radial-gradient(120% 150% at 18% 0%, rgba(127, 220, 255, .10), transparent 58%),
    linear-gradient(180deg, #121a22 0%, #0a1016 44%, #05080c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 26px -8px rgba(34, 211, 255, .42),
    inset 0 -16px 26px -20px rgba(34, 211, 255, .55),
    0 10px 22px -16px #000 !important;
  color: #cfefff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: transform .12s, box-shadow .2s, border-color .2s, background .2s;
}
/* the glass: a soft sheen across the top of the panel */
body.rk-console .reperform-panel #saOneTake #saOtRecord::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52%;
  pointer-events: none;
  z-index: 0;
  border-radius: 11px 11px 40% 40% / 11px 11px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 78%);
}
body.rk-console .reperform-panel #saOneTake #saOtRecord:hover:not(:disabled) {
  border-color: rgba(127, 220, 255, .5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 32px -6px rgba(34, 211, 255, .62),
    inset 0 -16px 26px -18px rgba(34, 211, 255, .70),
    0 0 26px -6px rgba(34, 211, 255, .45),
    0 10px 22px -16px #000 !important;
}
body.rk-console .reperform-panel #saOneTake #saOtRecord:active:not(:disabled) {
  transform: translateY(1px);
}
body.rk-console .reperform-panel #saOneTake #saOtRecord:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}
body.rk-console .reperform-panel #saOneTake #saOtRecord .sa-rec-go-ico {
  position: relative;
  z-index: 1;
  font-size: 19px;
  line-height: 1;
  color: #8fe3ff;
  filter: drop-shadow(0 0 8px rgba(34, 211, 255, .85));
}
body.rk-console .reperform-panel #saOneTake #saOtRecord .sa-rec-go-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.rk-console .reperform-panel #saOneTake #saOtRecord .sa-rec-go-txt b {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: none;
  color: #e6f8ff;
}
body.rk-console .reperform-panel #saOneTake #saOtRecord .sa-rec-go-txt small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: none;
  color: #7fa6bd;
}

/* armed / recording: the same slab, lit red instead of cyan */
body.rk-console .reperform-panel #saOneTake #saOtRecord.recording {
  border: 1px solid rgba(255, 77, 94, .55) !important;
  background:
    radial-gradient(120% 150% at 18% 0%, rgba(255, 77, 94, .18), transparent 58%),
    linear-gradient(180deg, #221216 0%, #160a0e 44%, #0c0508 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 26px -8px rgba(255, 77, 94, .55),
    inset 0 -16px 26px -20px rgba(255, 77, 94, .65),
    0 0 24px -8px rgba(255, 77, 94, .45) !important;
  animation: cb-pulse 1s ease-in-out infinite;
}
body.rk-console .reperform-panel #saOneTake #saOtRecord.recording .sa-rec-go-ico {
  color: #ff8d97;
  filter: drop-shadow(0 0 10px rgba(255, 77, 94, .95));
}
body.rk-console .reperform-panel #saOneTake #saOtRecord.recording .sa-rec-go-txt b {
  color: #ffd0d5;
}
body.rk-console .reperform-panel #saOneTake #saOtRecord.recording .sa-rec-go-txt small {
  color: #c98d95;
}

/* (c) captured take — identical to the Re-Production Studio ------------- */
/* the native player must not be colour-shifted (that invert() made it look
   like a video player instead of an audio take) */
body.rk-console .reperform-panel .sa-ot-take audio {
  filter: none !important;
}
/* #rp-module-singalong .cb-mini (id specificity) was flattening the red
   .cb-mini.danger key back to grey. Restore the studio's danger skin. */
body.rk-console .reperform-panel #saOtDelete,
body.rk-console .reperform-panel .sa-ot-take .cb-mini.danger {
  background: #101319 !important;
  border: 1px solid rgba(255, 77, 94, .45) !important;
  color: #ffb3bb !important;
  box-shadow: none !important;
}
body.rk-console .reperform-panel #saOtDelete:hover,
body.rk-console .reperform-panel .sa-ot-take .cb-mini.danger:hover {
  background: rgba(255, 77, 94, .12) !important;
  border-color: #ff4d5e !important;
  color: #ffd0d5 !important;
}