/* ============================================================================
   STEP3-RACK.CSS — Step 3 "Humanize the Vocals" as a studio rack chassis
   ----------------------------------------------------------------------------
   Companion to master-rack.css. That file already ships the shared hardware
   language (.rk-nameplate, .rk-body, .rk-chain, .rk-node, .rk-mods,
   .rk-modrow, .rk-txt, .rk-outbay, .rk-cmp, .rk-transport, .rk-key ...). This
   file adds ONLY what Step 3 needs on top:

     1. .rk-step3            the chassis (same metal as .rk-master)
     2. .rk3-route           the read-only "which path am I on" strip
     3. .rk-modrow.locked    a module that shows a winning value and cannot be
                             changed — the whole point of the rebuild
     4. .rk-fid / .rk-fid-*  the detailed fidelity gate (per-stage rows plus
                             the individual metric checks)
     5. .rk3-hidden          keeps legacy form hooks in the DOM but invisible

   Purely additive: it never renames an id and never hides an element the JS
   drives, so humanize-ui.js / vocal-reperform-ui.js keep working unchanged.
   ============================================================================ */

/* ---- chassis ------------------------------------------------------------- */
.rk-step3{
  position:relative;
  padding:0 !important;
  border:1px solid #07090c !important;
  border-radius:16px;
  background:
    linear-gradient(180deg, #2b313c 0%, #22272f 8%, #1b1f27 46%, #15181e 82%, #12151a 100%) !important;
  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) !important;
  overflow:hidden;
}
.rk-step3::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px; z-index:0;
  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;
}
/* The step heading lives inside the nameplate now, so it must read as a
   nameplate label rather than a page heading. studio-route.js still finds
   `h2 .step-num` for renumbering, so the h2 itself is preserved. */
.rk-step3 .rk-nm h2{
  margin:0; font-size:15px; font-weight:750; letter-spacing:.01em;
  color:#e8ecf2; line-height:1.2; text-transform:none;
}
.rk-step3 .rk-nm h2 .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; margin-right:7px; border-radius:5px;
  font:800 11px/1 ui-monospace, Menlo, monospace; 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);
  vertical-align:1px;
}
.rk-step3 .rk-nm small{
  display:block; margin-top:3px;
  font:700 10px/1.3 ui-monospace, Menlo, monospace; letter-spacing:.13em;
  text-transform:uppercase; color:#93a0b4;
}
.rk-step3 .rk-body{ padding:16px 18px 18px; }
/* The path panels are direct children of the chassis (there is no .rk-body
   wrapper), so they carry the chassis gutter themselves. */
.rk-step3 > .path-panel{ padding:0 18px 18px; }
.rk-step3 > .path-panel > p.small-note:first-child{ margin-top:2px !important; }

/* The intro hint + goal note sit inside the chassis, so tone them down to
   read as silkscreened copy rather than body text. */
.rk-step3 > p.hint,
.rk-step3 > .step3-goal-note{
  margin:0; padding:12px 18px 0;
  font-size:12px; line-height:1.5; color:#93a0b4;
  position:relative; z-index:1;
}
.rk-step3 > .step3-goal-note{ padding-bottom:2px; font-size:11.5px; color:#7d8a9e; }
.rk-step3 > .step3-goal-note b{ color:#c3ccda; }
.rk-step3 > p.hint b{ color:#dbe3ee; }

/* ---- route strip (read-only "which path") -------------------------------- */
.rk3-route{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:14px 18px 0; 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);
}
.rk3-route-lamp{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--rk-phos, #35ff9e);
  box-shadow:0 0 9px var(--rk-phos, #35ff9e);
}
.rk3-route-txt{ flex:1 1 auto; min-width:0; }
.rk3-route-txt b{
  display:block; font-size:12px; font-weight:750; color:#e8ecf2; margin-bottom:2px;
}
.rk3-route-txt small{ display:block; font-size:10.5px; line-height:1.4; color:#7d8a9e; }
.rk3-route-tag{
  flex:0 0 auto;
  font:700 9px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em;
  text-transform:uppercase; color:#06241a; padding:5px 8px; border-radius:5px;
  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);
}

/* ---- locked module rows -------------------------------------------------- */
.rk-modrow.locked{
  border-color:rgba(53,255,158,.16);
  background:linear-gradient(180deg, rgba(53,255,158,.045), rgba(0,0,0,.2));
}
.rk-modrow.locked .rk-lamp{
  background:var(--rk-phos, #35ff9e);
  box-shadow:0 0 9px var(--rk-phos, #35ff9e);
}
.rk3-val{
  flex:0 0 auto;
  font:700 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.04em;
  color:#9fe8c6; white-space:nowrap; padding-right:2px;
}
.rk3-lock{
  flex:0 0 auto;
  font:700 8.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.12em;
  text-transform:uppercase; color:#8b97a9;
  padding:4px 7px; border-radius:4px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  white-space:nowrap;
}

/* ---- detailed fidelity gate --------------------------------------------- */
.rk-fid{
  margin:0 0 14px; border:1px solid rgba(0,0,0,.62); border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(0,0,0,.26));
  overflow:hidden;
}
.rk-fid-hd{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 13px; border-bottom:1px solid rgba(0,0,0,.55);
  font:700 9.5px/1 ui-monospace, Menlo, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:#8b97a9;
}
.rk-fid-hd .r{ color:var(--rk-phos, #35ff9e); letter-spacing:.1em; white-space:nowrap; }
.rk-fid-hd .r.warn{ color:#ffc861; }
.rk-fid-hd .r.bad{ color:#ff7b6b; }
.rk-fid-stages{ padding:9px 13px 4px; }
.rk-fid-stage{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.rk-fid-stage .lamp{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%;
  background:var(--rk-phos, #35ff9e); box-shadow:0 0 8px var(--rk-phos, #35ff9e);
}
.rk-fid-stage .lamp.warn{ background:#ffc861; box-shadow:0 0 8px #ffc861; }
.rk-fid-stage .lamp.bad{ background:#ff7b6b; box-shadow:0 0 8px #ff7b6b; }
.rk-fid-stage .lamp.off{ background:#333a46; box-shadow:none; }
.rk-fid-stage b{
  flex:0 0 108px; font-size:10.5px; font-weight:750; letter-spacing:.07em;
  text-transform:uppercase; color:#dbe3ee;
}
.rk-fid-stage .bar{
  flex:1 1 auto; height:5px; border-radius:3px; background:#0b0e13; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85);
}
.rk-fid-stage .bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#22b877,#5cf0b0);
}
.rk-fid-stage.warn .bar i{ background:linear-gradient(90deg,#b8860b,#ffc861); }
.rk-fid-stage.bad .bar i{ background:linear-gradient(90deg,#b23a2a,#ff7b6b); }
.rk-fid-stage .sc{
  flex:0 0 44px; text-align:right;
  font:700 11.5px/1 ui-monospace, Menlo, monospace; color:#9fe8c6;
}
.rk-fid-stage.warn .sc{ color:#ffc861; }
.rk-fid-stage.bad .sc{ color:#ff7b6b; }
.rk-fid-stage .tag{
  flex:0 0 48px; text-align:center;
  font:700 8.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.1em;
  padding:4px 0; border-radius:4px; color:#06241a;
  background:linear-gradient(180deg,#5cf0b0,#22b877);
}
.rk-fid-stage.warn .tag{ background:linear-gradient(180deg,#ffd98a,#d99a1e); color:#3a2600; }
.rk-fid-stage.bad .tag{ background:linear-gradient(180deg,#ff9c8c,#d94a34); color:#3a0d06; }

.rk-fid-metrics{
  display:flex; flex-wrap:wrap; gap:6px; padding:10px 13px 12px;
  border-top:1px solid rgba(0,0,0,.45);
}
.rk-fid-metrics .m{
  display:flex; align-items:center; gap:6px; padding:5px 9px; border-radius:6px;
  border:1px solid rgba(53,255,158,.16); background:rgba(53,255,158,.05);
}
.rk-fid-metrics .m span{
  font:600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.07em;
  text-transform:uppercase; color:#7d8a9e;
}
.rk-fid-metrics .m b{
  font:750 10.5px/1 ui-monospace, Menlo, monospace; color:#9fe8c6;
}
.rk-fid-metrics .m i{
  width:5px; height:5px; border-radius:50%;
  background:var(--rk-phos, #35ff9e); box-shadow:0 0 6px var(--rk-phos, #35ff9e);
}
.rk-fid-metrics .m.warn{ border-color:rgba(255,200,97,.22); background:rgba(255,200,97,.06); }
.rk-fid-metrics .m.warn b{ color:#ffc861; }
.rk-fid-metrics .m.warn i{ background:#ffc861; box-shadow:0 0 6px #ffc861; }
.rk-fid-metrics .m.bad{ border-color:rgba(255,123,107,.24); background:rgba(255,123,107,.07); }
.rk-fid-metrics .m.bad b{ color:#ff7b6b; }
.rk-fid-metrics .m.bad i{ background:#ff7b6b; box-shadow:0 0 6px #ff7b6b; }

.rk-fid-note{
  padding:9px 13px 11px; border-top:1px solid rgba(0,0,0,.45);
  font-size:11px; line-height:1.5; color:#8b97a9;
}
.rk-fid-note b.ok{ color:#5cf0b0; }
.rk-fid-note b.warn{ color:#ffc861; }
.rk-fid-note b.bad{ color:#ff7b6b; }

/* ---- legacy hooks kept in the DOM but invisible -------------------------- */
.rk3-hidden{ display:none !important; }

/* ---- small screens ------------------------------------------------------- */
@media (max-width: 720px){
  .rk-step3 .rk-body{ padding:14px 13px 16px; }
  .rk-step3 > .path-panel{ padding:0 13px 16px; }
  .rk3-route{ margin:12px 13px 0; }
  .rk-step3 > p.hint,
  .rk-step3 > .step3-goal-note{ padding-left:13px; padding-right:13px; }
  .rk-fid-stage b{ flex-basis:76px; font-size:9.5px; }
  .rk-fid-stage .sc{ flex-basis:38px; font-size:10.5px; }
  .rk-fid-stage .tag{ flex-basis:42px; font-size:8px; }
  .rk3-val{ font-size:10.5px; }
}