/* ===========================================================================
   Your Studio — studio-specific furniture ONLY.

   Colour, type, buttons, cards, inputs, pills, tables and notes all come from
   THE STANDARD (linked, never copied). Everything below is either
     (a) a control this app has that the standard has no class for — the mixer,
         the melody guide, the freeze locks, the split sheet, or
     (b) one of the four class families that live in the standard site's own
         site.css and are therefore missing from the shared stylesheet every
         adopter links. Those are ported token-for-token and marked PORTED —
         delete them the day the standard promotes them.
   Every value below is a standard token. No new colours are invented here.
   =========================================================================== */

/* ---- PORTED from bb2g-standard/assets/site.css (not in standard.css) ---- */
.bb-brandlink { display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.bb-headermark { flex:none; }
.bb-brandlink__txt { display:flex; flex-direction:column; line-height:1; }
.bb-brandlink__wm { font-family:var(--font-display); font-weight:700; font-size:1.28rem;
  letter-spacing:.04em; color:var(--text); }
.bb-brandlink__wm b { font-weight:700; }
.bb-brandlink__wm i { font-style:normal; }
.bb-brandlink__sub { font-size:.58rem; font-weight:600; letter-spacing:.27em;
  text-transform:uppercase; color:var(--gold-ink); margin-top:.28rem; }
.bb-themebtn { display:inline-grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--line-strong); border-radius:50%; background:transparent;
  color:var(--text-2); cursor:pointer; transition:all var(--dur) var(--ease); }
.bb-themebtn:hover { border-color:var(--gold); color:var(--gold-ink); background:var(--gold-wash); }
.bb-foot-motto { font-family:var(--font-serif); font-size:1.2rem; font-style:italic;
  color:var(--gold-bright); margin-bottom:var(--s3); }
.bb-foot-small { font-size:.8rem; line-height:1.85; color:#B9C7E2; }
.bb-foot-legal { color:#8296B8; font-size:.74rem; }
/* PORTED: the standard ships no dark-surface ghost button, and the footer is navy. */
.bb-footer .bb-btn--ghost, .bb-section--navy .bb-btn--ghost {
  color:var(--gold-pale); border-color:rgba(244,232,196,.45); }
.bb-footer .bb-rule { color:var(--gold); opacity:.55; }
/* ---- end PORTED --------------------------------------------------------- */

/* ------------------------------------------------------------ the rooms */
.panel { display:none; }
.panel.active { display:block; }
.st-h1 { font-size:var(--step-4); margin:0 0 var(--s4); }
.st-flow { list-style:none; display:flex; flex-wrap:wrap; gap:var(--s3); margin:0 0 var(--s5);
  padding:0; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); }
.st-flow li + li::before { content:"→"; margin-right:var(--s3); color:var(--gold); }
.st-flow li.on { color:var(--gold-ink); }

.st-tabs { display:flex; gap:var(--s3); margin-left:auto; align-items:center; flex-wrap:wrap; }
.st-tabs button:not(.bb-themebtn) { font-family:var(--font-sans); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); background:transparent;
  border:0; border-bottom:2px solid transparent; padding:.5em .2em; cursor:pointer; }
.st-tabs button:not(.bb-themebtn):hover { color:var(--text); }
.st-tabs button.active { color:var(--text); border-bottom-color:var(--gold); }
.st-tabs button i { font-family:var(--font-display); font-style:normal; letter-spacing:0;
  margin-right:.5em; color:var(--gold-ink); }

.st-card { margin:var(--s5) 0; padding:var(--s5); }
.st-card .st-h { font-family:var(--font-sans); font-size:.72rem; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 var(--s4); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line); }
.st-empty { text-align:center; padding:var(--s7) var(--s5); }
.st-empty p { margin:0 0 var(--s3); }
.st-stats { margin:var(--s5) 0; }

.st-fld { display:block; font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3); margin:0 0 var(--s2); }
.st-w { width:100%; }
.st-ta { min-height:220px; resize:vertical; line-height:1.75; font-size:var(--step-0);
  font-family:var(--font-sans); }
.st-sp { height:var(--s4); }
.st-3up { display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s5); }
.st-3up > div { flex:1; min-width:200px; }
.st-row { margin-top:var(--s4); }
.st-end { justify-content:flex-end; }
.st-push { margin-left:auto; }
.st-hint { font-size:.82rem; color:var(--text-3); margin:var(--s3) 0 0; }
.st-hint.st-top { margin:calc(-1 * var(--s2)) 0 var(--s4); }
input[type=range] { accent-color:var(--gold); width:100%; }

.st-vibes { display:flex; flex-wrap:wrap; gap:var(--s2); }
.st-vibes button { font-family:var(--font-sans); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:.42em 1em; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--text-2);
  transition:all var(--dur) var(--ease); }
.st-vibes button:hover { border-color:var(--gold); color:var(--text); }
.st-vibes button.on { background:var(--navy); border-color:var(--navy); color:#fff; }

/* -------------------------------------------------------- melody guide */
#guideCanvas { width:100%; height:230px; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
.st-legend { display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s3);
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.st-legend .sw { display:inline-block; width:16px; height:3px; vertical-align:middle; margin-right:.5em; }
.st-legend .sw.mel { background:var(--navy); }
.st-legend .sw.head { background:var(--red); }
.st-legend .sw.sect { background:var(--gold); }

/* -------------------------------------------------------------- mixer */
.st-track { display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4);
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin:0 0 var(--s2); }
.st-track .tname { min-width:150px; font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-2); }
.st-track .tname .lock { color:var(--gold-ink); letter-spacing:0; }
.st-track .wave { flex:1; height:40px; min-width:70px; }
.st-track .wave canvas { width:100%; height:100%; display:block; }
.st-track input[type=range] { width:88px; flex:0 0 auto; }
.st-ico { border:1px solid var(--line-strong); background:var(--surface); color:var(--text-2);
  border-radius:999px; padding:.42em .9em; font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; }
.st-ico:hover { border-color:var(--gold); color:var(--gold-ink); background:var(--gold-wash); }
.st-ico.off { color:var(--text-3); background:var(--surface-2); }

.st-freeze { display:flex; align-items:center; gap:var(--s4); width:100%; text-align:left;
  padding:var(--s4); border:1px dashed var(--line-strong); border-radius:var(--r);
  background:var(--surface-2); margin:0 0 var(--s3); cursor:pointer; color:var(--text);
  font-family:var(--font-sans); font-size:var(--step-0); transition:all var(--dur) var(--ease); }
.st-freeze:hover { border-color:var(--gold); }
.st-freeze[aria-pressed=true] { border-style:solid; border-color:var(--gold);
  background:var(--gold-wash); box-shadow:inset 3px 0 0 var(--gold); }
.st-freeze .lk { flex:0 0 78px; font-size:.64rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); }
.st-freeze[aria-pressed=true] .lk { color:var(--gold-ink); }
.st-freeze b { display:block; }
.st-freeze small { color:var(--text-3); }

.st-line { display:flex; gap:var(--s2); align-items:center; margin:0 0 var(--s2); flex-wrap:wrap; }
.st-line .lnum { flex:0 0 26px; text-align:right; font-family:var(--font-mono); font-size:.72rem;
  color:var(--text-3); }
.st-line input { flex:1; min-width:180px; }
.st-sect { font-size:.66rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-ink); margin:var(--s5) 0 var(--s2); }

/* -------------------------------------------------------------- store */
.st-songs { display:grid; grid-template-columns:1fr; gap:var(--s5); }
.st-song { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-1); }
.st-song .plate { display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5);
  background:var(--navy); border-bottom:1px solid var(--gold); }
.st-song .plate .ttl { font-family:var(--font-display); font-weight:700; font-size:var(--step-2);
  color:#fff; line-height:1.1; }
.st-song .plate .meta { font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-bright); margin-top:.4rem; }
.st-song .body { padding:var(--s5); }
.st-buckets { display:flex; gap:4px; flex:1; }
.st-buckets .bk { flex:1; height:6px; border-radius:3px; background:var(--line-strong); }
.st-buckets .bk.ok { background:var(--ok); }
.st-rowline { display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  flex-wrap:wrap; }
.st-split { display:flex; gap:var(--s2); align-items:center; margin:0 0 var(--s2); flex-wrap:wrap; }
.st-split input[type=text] { flex:2; min-width:150px; }
.st-split select { flex:1; min-width:130px; }
.st-split input[type=number] { flex:0 0 88px; }
.st-split .pc { color:var(--text-3); }
.st-money td .who { display:block; margin-top:var(--s2); font-size:.8rem; }
.st-money td small { display:block; color:var(--text-3); margin-top:2px; }

/* ------------------------------------------------------------- chrome */
.st-toast { position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%,1.6rem); opacity:0;
  background:var(--navy); color:var(--gold-pale); padding:.8em 1.5em; border-radius:999px;
  border:1px solid var(--gold-deep); font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; transition:all var(--dur) var(--ease); z-index:90; pointer-events:none;
  max-width:92%; text-align:center; }
.st-toast.show { opacity:1; transform:translate(-50%,0); }
.st-live { color:var(--red); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.7rem; }
.st-live::before { content:"●"; margin-right:.5em; animation:st-blip 1s steps(2,end) infinite; }
@keyframes st-blip { 50% { opacity:.2; } }
.st-count { font-family:var(--font-display); font-size:1.5rem; color:var(--gold-ink); }
audio { width:100%; margin-top:var(--s3); }
code { font-family:var(--font-mono); font-size:.85em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.1em .4em; }

@media (max-width:900px) {
  .bb-header__in { flex-wrap:wrap; gap:var(--s3); }
  .st-tabs { width:100%; margin-left:0; }
}
@media (max-width:560px) {
  .st-tabs button:not(.bb-themebtn) span { display:none; }
  .st-tabs button i { margin-right:0; }
  .st-track .tname { min-width:0; flex:0 0 64px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ------------------------------------------------- make it sound right */
.st-check { display:flex; align-items:center; gap:.6rem; padding:.55rem 0; cursor:pointer;
  font-size:var(--step-0); }
.st-check input { width:18px; height:18px; accent-color:var(--gold); flex:none; }
.st-check small { color:var(--text-3); }
.st-indent { margin:0 0 var(--s3) 2rem; }
.st-indent[hidden] { display:none; }
.st-ab { display:inline-flex; gap:.4rem; align-items:center; }

/* ---------------------------------------------- where the selling happens */
.st-sell { display:flex; gap:var(--s5); flex-wrap:wrap; align-items:flex-start; }
.st-sell > div:first-child { flex:3; min-width:280px; }
.st-sell p { margin:0; }
.st-sell-cta { flex:1; min-width:190px; display:flex; flex-direction:column; gap:var(--s3);
  align-items:flex-start; }
.st-song a.bb-btn { text-decoration:none; }

/* --------------------------------------------------- record, made findable */
.st-tab-rec { color:var(--red) !important; }
.st-tab-rec.active { border-bottom-color:var(--red) !important; }
.st-quick { display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; margin:var(--s4) 0; }
.st-big { font-size:.95rem !important; padding:1em 2em !important; }

.st-file { cursor:pointer; }

/* --------------------------------------------------------- the engine room */
.en-choices { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px){ .en-choices { grid-template-columns:1fr 1fr; } }
.en-choice { position:relative; text-align:left; padding:var(--s4); border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); cursor:pointer;
  display:flex; flex-direction:column; gap:.3rem; font-family:var(--font-sans);
  color:var(--text); transition:all var(--dur) var(--ease); }
.en-choice:hover { border-color:var(--gold); }
.en-choice.on { border-color:var(--gold); background:var(--gold-wash);
  box-shadow:inset 3px 0 0 var(--gold); }
.en-choice b { font-size:var(--step-0); }
.en-choice .st-hint { margin:0; }
.en-tag { position:absolute; top:var(--s3); right:var(--s3); font-style:normal; font-size:.56rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }
.en-choice.on .en-tag { color:var(--gold-ink); }
.en-code { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); overflow-x:auto; font-family:var(--font-mono); font-size:.76rem;
  line-height:1.6; color:var(--text-2); }
.en-steps { margin:0; padding-left:1.3rem; }
.en-steps li { margin:.5rem 0; }