/* ===========================================================================
   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; }