/* ============================================================================
   HiChord Studio — redesign layer (Stage 1: game-HUD theme + zoned IA).
   Loaded LAST; additive over style.css. No DOM moves, no JS dependencies —
   re-groups the existing sections into 5 zones using the app's own
   body[data-tab] mechanism, brought to desktop, plus a Simple/Under-the-Hood
   level. Voice-strip reframe + per-zone fine-grouping are a later pass.
   ============================================================================ */
:root{
  --rd-accent:#0E5C3A; --rd-accent-2:#14794F; --rd-b:#3FA877; --rd-b-2:#5DBE96;
  --rd-ink:#F5F5F7;
}
body.rd{
  background:#08080A;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.022) 1px, transparent 0);
  background-size:23px 23px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---- brand / header --------------------------------------------------- */
body.rd .topnav{ border-bottom:1px solid var(--border); }
body.rd .dash-header{ border-bottom:1px solid var(--border); }
body.rd .logo, body.rd .brand-name{ font-weight:900; letter-spacing:-.03em; }

/* ---- zone nav (was mobile-only tabs → now the desktop IA) ------------- */
body.rd .tab-bar{
  display:flex !important; gap:4px; align-items:center; justify-content:center;
  max-width:1100px; margin:14px auto 4px; padding:5px;
  background:#141416; border:1px solid var(--border); border-radius:12px;
}
body.rd .tab-btn{
  flex:0 1 180px; text-align:center; border:none; border-radius:8px; margin:0;
  padding:11px 14px; font-family:'Inter',sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.02em; text-transform:none; color:var(--text-secondary);
}
body.rd .tab-btn:hover{ background:#1A1A1E; color:var(--rd-ink); }
body.rd .tab-btn.active{
  background:var(--rd-accent); color:#fff; border:none;
  box-shadow:0 3px 14px rgba(14, 92, 58,.5);
}
/* the Simple/Under-the-Hood + info live in their own little bar */
.rd-levelbar{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 auto 16px; }
.rd-seg{ display:inline-flex; background:#141416; border:1px solid var(--border); border-radius:9px; padding:3px; }
.rd-seg button{ background:none; border:none; color:var(--text-secondary); font:inherit; font-weight:700;
  font-size:12px; padding:7px 15px; border-radius:7px; cursor:pointer; transition:.15s; }
.rd-seg button.on{ background:var(--rd-accent); color:#fff; box-shadow:0 2px 12px rgba(14, 92, 58,.45); }

/* ---- single-column zoned layout on all widths ------------------------- */
body.rd main.dash-grid{ display:block !important; height:auto !important; overflow:visible !important; max-width:1100px; margin:0 auto; }
body.rd .dashboard{ height:auto !important; overflow:visible !important; }
body.rd .dash-column-left,
body.rd .dash-column-right{ width:100% !important; max-width:100%; margin:0 auto; }

/* Zone visibility is driven by JS (rd-zones): each labeled leaf group gets a
   data-zone and the inactive ones get .zone-hidden. Wrappers stay visible so
   their visible children render. */
body.rd .zone-hidden{ display:none !important; }
body.rd[data-level="simple"] .tab-bar{ display:none !important; }
/* The GLOBAL PARAMETERS wrapper holds only Sound/Effects groups — hide its
   shell (and stray empty wrappers) in zones where it has no visible children. */
body.rd[data-tab="perform"] .preset-global,
body.rd[data-tab="motion"]  .preset-global,
body.rd[data-tab="system"]  .preset-global{ display:none !important; }

/* ---- card / label styling (bold, HUD) --------------------------------- */
body.rd .dash-card, body.rd .global-controls-section, body.rd .arp-editor-section{
  border:1px solid var(--border); border-radius:10px; background:#131316;
}
body.rd .card-label, body.rd .section-label{
  font-family:'Inter',sans-serif; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-tertiary); font-size:10px;
}
body.rd .bpm-value{ font-weight:900; letter-spacing:-.03em; }

/* ---- controls: neon accent ------------------------------------------- */
body.rd input[type="range"]{ accent-color:var(--rd-accent); }
body.rd .key-btn.active, body.rd .mode-btn.active, body.rd .octave-btn-compact.active{
  background:var(--rd-accent) !important; border-color:var(--rd-accent) !important; color:#fff !important;
  box-shadow:0 0 12px rgba(14, 92, 58,.4);
}
body.rd .btn-bpm{ font-weight:800; }

/* ---- mobile: keep the zone bar on one line + tighten ------------------- */
@media (max-width: 600px){
  body.rd .tab-bar{
    gap:2px; padding:3px; margin:10px auto 6px; border-radius:10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  body.rd .tab-bar::-webkit-scrollbar{ display:none; }
  body.rd .tab-btn{ flex:1 1 0; min-width:0; padding:9px 4px; font-size:11px; letter-spacing:0; white-space:nowrap; }
  body.rd .rd-levelbar{ margin:0 auto 12px; }
  body.rd .rd-seg button{ padding:7px 13px; font-size:11.5px; }
  body.rd main.dash-grid{ padding-left:12px; padding-right:12px; }
  body.rd .dash-card,
  body.rd .global-controls-section,
  body.rd .arp-editor-section{ padding:13px; }
}