/* AI Studio shell, round 2. Tokens: 8 px grid, one accent, radii 6/10/14. Contrast: every text colour below is ≥ 4.5:1 on its surface. */
:root{
  --bg:#15171c;--surface:#1d2027;--surface-2:#272b33;--surface-3:#30353f;--line:#363b46;--line-2:#454b57;
  --text:#f2f4f7;--dim:#b4bbc7;--mute:#959eab;
  --accent:#DB2777;--accent-hover:#E8317F;--accent-text:#ff7fb6;--ok:#4ade80;--warn:#fbbf24;
  --wave:#4a515e;--wave-on:#E8317F;
  --r-s:6px;--r-m:10px;--r-l:14px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--mono:ui-monospace,"SF Mono",Consolas,monospace;
  --side:248px;--top:64px;--row:56px;
  --fs-title:15.5px;--fs-meta:13px;--fs-head:11px;--fs-body:15px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:var(--fs-body)/1.45 var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--r-s)}
svg{width:16px;height:16px;fill:currentColor}
.app{display:grid;grid-template-columns:var(--side) 1fr;grid-template-rows:var(--top) 1fr auto;height:100vh;height:100dvh}

/* ---- top ---- */
.top{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s5);border-bottom:1px solid var(--line);background:var(--surface)}
.logo{font-weight:800;font-size:17px;letter-spacing:-.2px;white-space:nowrap;text-decoration:none}.logo b{color:var(--accent-text)}.logo .sep{color:var(--mute);margin:0 8px;font-weight:400}
.crumb{color:var(--dim);white-space:nowrap;font-size:14px}.crumb strong{color:var(--text);font-weight:600}
.search{flex:1;max-width:520px;margin-left:auto;display:flex;align-items:center;gap:var(--s2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:0 var(--s4);height:40px;color:var(--mute)}
.search input{flex:1;background:none;border:0;color:var(--text);font:inherit;outline:none;min-width:0}
.search input::placeholder{color:var(--mute)}
.credits{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}.credits .n{font-weight:700;font-size:16px}.credits .lbl{color:var(--dim)}
/* 28 Oct: the balance always shows (Paul: "needs to be prominent"): a chip, amber when short of what is being made, red at 0 */
body.rj24-shell .top .credits{padding:3px 4px 3px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2)}
body.rj24-shell .top .credits .n{font-size:15px;font-weight:700;color:var(--text)}body.rj24-shell .top .credits .lbl{display:inline;color:var(--dim)}
body.rj24-shell .top .credits.low{border-color:#f59e0b;background:rgba(245,158,11,.14)}body.rj24-shell .top .credits.low .n{color:#fbbf24}
body.rj24-shell .top .credits.zero{border-color:#ef4444;background:rgba(239,68,68,.16)}body.rj24-shell .top .credits.zero .n{color:#f87171}
body.rj24-shell .top .credits .btn{height:28px;border-radius:999px}
body.rj24-shell [data-create].topup{background:#f59e0b!important;border-color:#f59e0b!important;color:#111!important}
/* 28 Oct, top-up B1: the pack list */
body.rj24-shell #rj24tu .tu-list{display:grid;gap:10px;margin:12px 0}body.rj24-shell #rj24tu .tu-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2)}
body.rj24-shell #rj24tu .tu-row b{font-size:16px}body.rj24-shell #rj24tu .tu-row span{flex:1;color:var(--dim)}
/* 28 Oct: Instrumental is a clear on/off toggle (Paul: "look more prominent so we know it's been clicked") */
body.rj24-shell .chip.inst{font-weight:600}body.rj24-shell .chip.inst span{font-weight:400;color:var(--dim);margin-left:4px}
body.rj24-shell .chip.inst.on{background:var(--accent,#E8317F);border-color:var(--accent,#E8317F);color:#fff;font-weight:700}body.rj24-shell .chip.inst.on span{color:rgba(255,255,255,.85)}

.btn{height:40px;padding:0 var(--s4);border-radius:var(--r-m);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-weight:700;text-decoration:none;white-space:nowrap}
.btn.sm{height:34px;font-size:14px;border-radius:999px}
.btn.accent{background:var(--accent);color:#fff}.btn.accent:hover{background:var(--accent-hover)}
.btn.ghost{border:1px solid var(--line-2);color:var(--text)}.btn.ghost:hover{border-color:var(--dim)}
.btn.big{height:56px;font-size:17px;padding:0 var(--s5)}
.btn[disabled]{opacity:.5;cursor:default}

/* ---- sidebar ---- */
.side{background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:var(--s3) 0}
.side h6{margin:var(--s4) var(--s5) var(--s2);font-size:var(--fs-head);letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-text);font-weight:800}
.side a{display:flex;align-items:center;gap:var(--s3);height:40px;padding:0 var(--s5);color:var(--dim);text-decoration:none;border-left:3px solid transparent;font-size:15px}
.side a:hover{color:var(--text);background:var(--surface-2)}
.side a.on{color:var(--text);background:var(--surface-3);border-left-color:var(--accent);font-weight:600}
.side a .c{margin-left:auto;font-size:12px;color:var(--mute);font-family:var(--mono)}
.side .ask{margin:var(--s5) var(--s4) 0;height:44px;border-radius:var(--r-m);background:linear-gradient(135deg,var(--accent),#8b2fd6);color:#fff;font-weight:700;justify-content:center;border-left:0}
.side .ask.on{outline:2px solid #fff}

/* ---- main ---- */
.main{overflow-y:auto;position:relative;scroll-behavior:smooth}
.pad{padding:var(--s5)}
h2.sec{margin:0 0 var(--s2);font-size:22px;font-weight:800;letter-spacing:-.2px}
p.sub{margin:0 0 var(--s4);color:var(--dim)}

/* step rail */
.rail{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);background:var(--surface);border-bottom:1px solid var(--line)}
.rail .steps{display:flex;gap:var(--s1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.rail .steps::-webkit-scrollbar{display:none}
.step{display:inline-flex;align-items:center;gap:var(--s2);height:36px;padding:0 var(--s3) 0 var(--s2);border-radius:999px;color:var(--dim);white-space:nowrap;font-weight:600;font-size:14px}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--surface-3);color:var(--text);display:grid;place-items:center;font-size:12px;font-weight:800}
.step:hover{background:var(--surface-2);color:var(--text)}
.step.on{background:var(--surface-3);color:var(--text)}.step.on .n{background:var(--accent);color:#fff}
.step.done .n{background:var(--ok);color:#0b2a16}
.rail .create{margin-left:var(--s3);height:44px;padding:0 var(--s4);border-radius:var(--r-m);background:var(--accent);color:#fff;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;white-space:nowrap}
.rail .create small{font-weight:600;font-size:12px;opacity:.9}
.rail .create:hover{background:var(--accent-hover)}

/* step panels */
.panel{padding:var(--s5)}
.panel h3{margin:0 0 var(--s1);font-size:20px;font-weight:800}
.panel .hint{margin:0 0 var(--s4);color:var(--dim)}
.words{width:100%;min-height:132px;resize:vertical;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);color:var(--text);font:19px/1.5 var(--font);padding:var(--s4)}
.words:focus{border-color:var(--accent);outline:none}
.meter{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s3);color:var(--dim);font-size:14px}.meter b{color:var(--text)}
.meter .ok{color:var(--ok)}.meter .warn{color:var(--warn)}
.next{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{height:34px;padding:0 var(--s3);border-radius:999px;background:var(--surface-2);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text)}
.chip:hover{border-color:var(--dim)}.chip.on{border-color:var(--accent);background:rgba(232,49,127,.14)}
.chip .x{color:var(--mute);margin-left:2px}.chip.sm{height:28px;font-size:13px}
.chip .mini{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}.chip .mini svg{width:10px;height:10px}
select.sel{height:34px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font:inherit;font-size:14px;padding:0 var(--s3)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:3}
.rail ~ .filters{top:61px}
.filters .count{margin-left:auto;color:var(--mute);font-size:13px;white-space:nowrap}

/* tables */
.head{display:grid;gap:var(--s3);padding:0 var(--s5);height:36px;align-items:center;color:var(--mute);font-size:var(--fs-head);letter-spacing:1.4px;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--line)}
.row{display:grid;gap:var(--s3);padding:0 var(--s5);min-height:var(--row);align-items:center;border-bottom:1px solid var(--line);transition:background .12s}
.row:hover{background:var(--surface)}.row.open{background:var(--surface-2)}
.row.picked{background:rgba(232,49,127,.10);box-shadow:inset 3px 0 0 var(--accent)}
.cols-v{grid-template-columns:84px 1.5fr 1fr .6fr .7fr 1.1fr 72px}
.cols-b{grid-template-columns:84px 1.5fr .8fr 1.2fr .6fr .5fr}
.cols-f{grid-template-columns:84px 1.5fr .8fr .8fr 1.1fr .6fr}
.cols-c{grid-template-columns:84px 1.6fr .9fr .8fr .6fr 48px}
.ctl{display:flex;gap:var(--s2)}
.ib{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--text);flex:none}
.ib:hover{border-color:var(--text);background:var(--surface-2)}
.ib.play.on,.ib.add.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ib svg{width:13px;height:13px}.ib.lg{width:44px;height:44px}.ib.lg svg{width:18px;height:18px}
.t{min-width:0}.t b{display:block;font-weight:600;font-size:var(--fs-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t span{color:var(--dim);font-size:var(--fs-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tag{justify-self:start;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--dim);font-size:12.5px;display:inline-flex;align-items:center;white-space:nowrap}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.num{font-family:var(--mono);color:var(--dim);font-size:13px}
.star{color:var(--accent-text);font-size:15px;justify-self:center}
.more{color:var(--dim);justify-self:end}.more svg{transition:transform .15s}.row.open .more svg{transform:rotate(180deg)}
.empty{padding:var(--s6);color:var(--dim)}
.vers{padding:var(--s2) var(--s5) var(--s4) calc(var(--s5) + 84px);background:var(--surface-2);border-bottom:1px solid var(--line)}
.ver{display:grid;grid-template-columns:72px 1fr auto;gap:var(--s3);align-items:center;height:52px;margin-top:var(--s2);background:var(--surface);border-radius:var(--r-m);padding:0 var(--s3)}
.ver .dl{display:flex;gap:var(--s2)}.ver .dl a,.ver .dl button{color:var(--dim);font-size:13px;text-decoration:none;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px}.ver .dl a:hover,.ver .dl button:hover{color:var(--text)}
canvas.wave{display:block;width:100%;height:36px}
.wrap-wave{position:relative;min-width:0}.wrap-wave .lab{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.7)}

/* sound slots */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.slot{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3) var(--s4);cursor:pointer;min-height:84px}
.slot.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.slot h5{margin:0 0 var(--s2);font-size:var(--fs-head);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);font-weight:800}
.slot .piece{display:flex;align-items:center;gap:var(--s2);font-weight:600}.slot .piece.none{color:var(--mute);font-weight:400}
.slot .piece .ib{width:28px;height:28px}.slot .piece .x{margin-left:auto;color:var(--mute)}
/* the lit slot pill: accent with white text (25 Oct: the white-on-white pill read as a blank). The labels never wrap or shrink. */
.subtabs{display:inline-flex;flex:none;background:var(--surface-2);border-radius:999px;padding:3px;margin-right:var(--s2);white-space:nowrap}.subtabs button{padding:6px 14px;border-radius:999px;color:var(--dim);font-weight:600;font-size:14px;white-space:nowrap;flex:none}
body.rj24-shell .subtabs button.on,.subtabs button.on{background:var(--accent);color:#fff}

/* hear it */
.hear{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s4)}
.hear .big{display:grid;grid-template-columns:56px 1fr;gap:var(--s4);align-items:center}
.hear canvas.wave{height:72px}
.hear .parts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

/* summary / make */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.sum .k{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3) var(--s4)}
.sum .k h5{margin:0 0 var(--s1);font-size:var(--fs-head);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);font-weight:800}
.sum .k b{font-size:16px}.sum .k p{margin:var(--s1) 0 0;color:var(--dim);font-size:14px}

/* sung */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3) var(--s4);text-align:left;display:flex;flex-direction:column;gap:var(--s2);min-height:96px}
.tile:hover{border-color:var(--dim)}.tile.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tile b{font-size:16px}.tile span{color:var(--dim);font-size:13px}
.tile .ib{width:30px;height:30px;align-self:flex-start}
.qty{display:flex;gap:var(--s2)}.qty .tile{min-height:72px;flex:1}

/* brand */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.form label{display:block}.form label span{display:block;color:var(--dim);font-size:13px;margin-bottom:6px}
.form input{display:block;width:100%;height:44px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);color:var(--text);font:inherit;padding:0 var(--s3)}

/* just ask */
.askv{display:grid;grid-template-columns:1fr 380px;height:100%}
.askbar{display:none}
.chat{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0;height:100%}
.msgs{flex:1;overflow-y:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.draft{overflow-y:auto}
.t b .star-in{display:none;color:var(--accent-text);font-size:13px}
.m{max-width:76%;padding:var(--s3) var(--s4);border-radius:var(--r-l);line-height:1.5}
.m.a{background:var(--surface);border:1px solid var(--line);align-self:flex-start}.m.u{background:var(--accent);color:#fff;align-self:flex-end}
.inp{display:flex;gap:var(--s2);padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--bg)}
.inp textarea{flex:1;min-height:48px;max-height:160px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);color:var(--text);font:inherit;padding:var(--s3)}
.draft{padding:var(--s5);background:var(--surface);display:flex;flex-direction:column;gap:var(--s4)}
.draft h4{margin:0 0 var(--s2);font-size:var(--fs-head);letter-spacing:1.4px;text-transform:uppercase;color:var(--accent-text);font-weight:800}
.draft textarea{width:100%;min-height:110px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);color:var(--text);font:15px/1.5 var(--font);padding:var(--s3);resize:vertical}
.aud{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}.aud:first-of-type{border-top:0}
.aud .t{flex:1}.aud .use{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--accent-text);color:var(--accent-text);font-weight:700;font-size:13px}.aud .use.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* player bar */
.bar{grid-column:1/-1;border-top:1px solid var(--line);background:var(--surface);transition:height .15s}
.bar.idle .bar-live,.bar:not(.idle) .bar-idle{display:none}
.bar-idle{height:44px;display:flex;align-items:center;padding:0 var(--s5);color:var(--mute);font-size:14px}
.bar-live{height:72px;display:grid;grid-template-columns:auto 260px 1fr auto;gap:var(--s4);align-items:center;padding:0 var(--s5)}
.np{min-width:0}.np .kind{display:inline-block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-text);font-weight:800;margin-bottom:2px}.np b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.scrub{min-width:0}.scrub canvas{display:block;width:100%;height:44px;cursor:pointer}.scrub .times{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:2px}
.tabs{display:none}

/* phone */
@media (max-width:760px){
  :root{--row:60px}
  .app{grid-template-columns:1fr;grid-template-rows:56px 1fr auto 64px}
  .side,.crumb,.search,body.rj24-shell .top a.help,body.rj24-shell .top .help{display:none!important}   /* 28 Oct: the balance stays on a phone; the tour and help move to the menu */
  body.rj24-shell .top .credits{flex:none}
  body.rj24-shell .top .credits .lbl{display:none}body.rj24-shell .top .credits .btn{padding:0 10px}
  .top{padding:0 var(--s4);gap:var(--s3)}.logo{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail{padding:var(--s2) var(--s4);gap:var(--s2)}.rail .create{position:fixed;left:var(--s4);right:var(--s4);bottom:calc(64px + 56px + env(safe-area-inset-bottom));z-index:9;box-shadow:0 10px 30px rgba(0,0,0,.5);height:52px;margin:0}
  .panel{padding:var(--s4)}.filters{padding:var(--s2) var(--s4)}.rail ~ .filters{top:52px}
  .head{display:none}
  .row{grid-template-columns:76px 1fr 32px !important;padding:var(--s2) var(--s4)}
  .row .tag,.row .num,.row .tags,.row .star{display:none}.row .more{display:block}
  .vers{padding:var(--s2) var(--s4) var(--s3)}.ver{grid-template-columns:64px 1fr}.ver .dl{display:none}
  .askbar{display:flex;gap:4px;padding:var(--s2) var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}.askbar button{flex:1;height:36px;border-radius:999px;color:var(--dim);font-weight:700}.askbar button.on{background:var(--surface-3);color:var(--text)}
  .askv{grid-template-columns:1fr;height:calc(100% - 53px)}.chat{border-right:0}.draft{height:100%}.askv.pane-chat .draft,.askv.pane-draft .chat{display:none}.m{max-width:88%}
  .t b .star-in{display:inline}.main{padding-bottom:0}.main.make{padding-bottom:140px}
  .bar-live{grid-template-columns:auto 1fr auto;gap:var(--s3);height:64px;padding:0 var(--s4)}.bar-live .scrub{display:none}
  .tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom)}
  .tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--dim);height:64px}
  .tabs button.on{color:var(--accent-text)}.tabs svg{width:22px;height:22px}
  .words{font-size:17px}.slots{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- the shell over the classic page: full viewport; the classic Studio stays in the DOM off screen and is driven by engine.js ---- */
body.rj24-shell{overflow:hidden!important}
body.rj24-shell .app{position:fixed;inset:0;z-index:99990}
body.rj24-shell #rj-ai-studio,body.rj24-shell #rj24-qc,body.rj24-shell #rj24-mine,body.rj24-shell #rjais-footer,body.rj24-shell .rj24ais-cta{position:fixed!important;left:-300vw!important;top:0!important;width:1280px!important;opacity:1;pointer-events:none}
body.rj24-shell #rj24aia-btn{display:none!important}
#rj24aia-mount #rj24aia{position:static;width:100%;max-width:none;height:100%;display:flex;border-radius:0;box-shadow:none}
.acct{position:relative}.acct .menu{display:none;position:absolute;right:0;top:44px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-m);min-width:200px;padding:6px;z-index:20;box-shadow:0 12px 32px rgba(0,0,0,.45)}
.acct.open .menu{display:block}.acct .menu a{display:block;padding:9px 12px;border-radius:var(--r-s);text-decoration:none;color:var(--text);font-size:14px}.acct .menu a:hover{background:var(--surface-3)}
.acct .menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.help{color:var(--dim);text-decoration:none;font-size:14px}.help:hover{color:var(--text)}
.ex{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.brandline{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);color:var(--dim);font-size:14px;flex-wrap:wrap}.brandline b{color:var(--text)}
.result{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s4);margin-top:var(--s4)}
.result audio{width:100%;margin-top:var(--s2)}
.sortsel{margin-left:auto}
@media (max-width:760px){body.rj24-shell .app{position:fixed}.help,.acct{display:none}}
/* the theme's own page stays in the DOM but must not paint or inherit into the shell */
body.rj24-shell > *:not(#app):not(#rj24aia){visibility:hidden!important}
body.rj24-shell #rj-ai-studio,body.rj24-shell #rjais-footer{visibility:visible!important}
body.rj24-shell .app{background:var(--bg);color:var(--text);font:var(--fs-body)/1.45 var(--font);-webkit-font-smoothing:antialiased}
body.rj24-shell .app *,body.rj24-shell .app *::before,body.rj24-shell .app *::after{box-sizing:border-box}
body.rj24-shell .app button,body.rj24-shell .app input,body.rj24-shell .app select,body.rj24-shell .app textarea{font-family:inherit;color:inherit}
body.rj24-shell .credits .n{color:var(--text)}
/* tips + slot note */
.tips{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-m);padding:0;margin:0 0 var(--s3)}
.tips summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:14px;color:var(--text);list-style:none;display:flex;align-items:center;gap:8px}
.tips summary::before{content:'';width:0;height:0;border-left:5px solid var(--dim);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.tips[open] summary::before{transform:rotate(90deg)}.tips summary::-webkit-details-marker{display:none}
.tips p{margin:0;padding:0 14px 12px;color:var(--dim);font-size:14px;line-height:1.5}
.slot-note{margin:var(--s2) 0 var(--s3);color:var(--accent-text);font-weight:500}
/* the player bar: label and times in the type scale, the wave as tall as the bar allows */
.bar .np{min-width:220px}.bar .np .kind{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}.bar .np b{font-size:15px;font-weight:600;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.bar .scrub{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.bar .scrub canvas{width:100%;height:44px;display:block;cursor:pointer}
.bar .times{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:760px){.bar .np{min-width:0;width:120px}.bar .np b{max-width:120px}.bar .scrub canvas{height:36px}}
/* headings are the brightest text on a step (the theme dims h3) */
body.rj24-shell .app h1,body.rj24-shell .app h2,body.rj24-shell .app h3,body.rj24-shell .app h4,body.rj24-shell .app h5,body.rj24-shell .app h6{color:var(--text);margin-top:0}
body.rj24-shell .app .panel h3{font-size:18px;font-weight:700;margin:0 0 var(--s2);letter-spacing:-.01em}
body.rj24-shell .app .side h6,body.rj24-shell .app .sum h5,body.rj24-shell .app .slot h5{color:var(--dim)}
/* favourites: a third control in every row */
.row.cols-v,.head.cols-v{grid-template-columns:118px 1.5fr 1fr .6fr .7fr 1.1fr 72px}
.row.cols-b,.head.cols-b{grid-template-columns:118px 1.5fr .8fr 1.2fr .6fr .5fr}
.row.cols-f,.head.cols-f{grid-template-columns:118px 1.5fr .8fr .8fr 1.1fr .6fr}
.ib.fav{font-size:15px;line-height:1;color:var(--dim)}.ib.fav.on{color:var(--accent-text);border-color:var(--accent)}.ib.fav:hover{color:var(--accent-text)}
.tile .ctl{display:flex;gap:var(--s2);margin-top:auto}.tile .ctl .ib{width:30px;height:30px}
@media (max-width:760px){.row.cols-v,.row.cols-b,.row.cols-f{grid-template-columns:118px 1fr}}
.madebar{display:flex;align-items:center;gap:var(--s3)}.madebar .wrap-wave{flex:1;min-width:0}.madebar canvas.wave{width:100%;height:56px;display:block}.madebar .lab{display:block;margin-top:4px;color:var(--dim);font-size:12px}
.madebar{display:flex;align-items:center;gap:var(--s3)}.madebar .wrap-wave{flex:1;min-width:0}.madebar canvas.wave{width:100%;height:56px;display:block}.madebar .lab{display:block;margin-top:4px;color:var(--dim);font-size:12px}
.fl{display:block;margin-bottom:var(--s3)}.fl>span{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}.words.one{min-height:0;height:48px;resize:none}
/* the script box: a visible outline and a pink focus ring (Paul, 25 Oct) */
body.rj24-shell .app textarea.words,body.rj24-shell .app input.words{border:1px solid #5b6474;background:var(--surface-2);color:var(--text);border-radius:var(--r-m);outline:none;transition:border-color .12s,box-shadow .12s}
body.rj24-shell .app textarea.words:focus,body.rj24-shell .app input.words:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(219,39,119,.28)}
/* ===== list steps (Paul, 25 Oct): 56 px rows, fixed columns, no horizontal overflow, Tags hidden under 1500 px, sticky action strip, virtualised rows ===== */
:root{--row:56px}
body.rj24-shell .main{--railh:58px;--striph:0px}
body.rj24-shell .rail{top:0}
body.rj24-shell .strip{position:sticky;top:var(--railh);z-index:4;display:flex;align-items:center;gap:var(--s3);padding:8px var(--s5);background:var(--surface);border-bottom:1px solid var(--line)}
body.rj24-shell .strip .chosen{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:14px}.strip .chosen b{color:var(--text)}
body.rj24-shell .filters{top:calc(var(--railh) + var(--striph));flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:8px var(--s5);gap:6px}
body.rj24-shell .filters .sel{height:32px;flex:none}body.rj24-shell .filters .chip{height:30px;padding:0 10px;font-size:13px;flex:none}
body.rj24-shell .filters .count{position:sticky;right:0;background:var(--bg);padding-left:8px}
body.rj24-shell .panel.slim{padding:var(--s3) var(--s5) var(--s2)}body.rj24-shell .panel.slim .hint{margin:0}
body.rj24-shell .row{height:var(--row);min-height:0;padding:0 var(--s5);gap:var(--s2)}
body.rj24-shell .row>*{min-width:0}body.rj24-shell .row .t b,body.rj24-shell .row .t span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.rj24-shell .row .t b{font-size:14.5px;line-height:1.25}body.rj24-shell .row .t span{font-size:12.5px;color:var(--dim);line-height:1.25}
body.rj24-shell .row .tags{display:flex;gap:4px;overflow:hidden;white-space:nowrap}
body.rj24-shell .row .tag,body.rj24-shell .row .num{overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.rj24-shell .row.cols-v,body.rj24-shell .head.cols-v{grid-template-columns:118px minmax(0,1fr) 150px 78px 104px 220px 56px}
body.rj24-shell .row.cols-b,body.rj24-shell .head.cols-b{grid-template-columns:118px minmax(0,1fr) 110px 220px 70px 110px}
body.rj24-shell .row.cols-f,body.rj24-shell .head.cols-f{grid-template-columns:118px minmax(0,1fr) 110px 110px 220px 70px}
body.rj24-shell .row.cols-x,body.rj24-shell .head.cols-x{grid-template-columns:56px minmax(0,1fr) 120px 80px}
body.rj24-shell .row .star{justify-self:center;color:var(--accent-text)}
@media (max-width:1500px){body.rj24-shell .row.cols-v,body.rj24-shell .head.cols-v{grid-template-columns:118px minmax(0,1fr) 150px 78px 104px 56px}body.rj24-shell .cols-v .tags,body.rj24-shell .head.cols-v span:nth-child(6){display:none}
  body.rj24-shell .row.cols-b,body.rj24-shell .head.cols-b{grid-template-columns:118px minmax(0,1fr) 110px 150px 70px 110px}body.rj24-shell .row.cols-f,body.rj24-shell .head.cols-f{grid-template-columns:118px minmax(0,1fr) 110px 110px 150px 70px}}
body.rj24-shell .vlist{position:relative;overflow:hidden}body.rj24-shell .vl-in{position:absolute;left:0;right:0;top:0;will-change:transform}
/* Hear it: the chips first, a framed waveform with the build button inside it until there is something to show, then what is in it */
body.rj24-shell .hear .parts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s3)}
body.rj24-shell .wavebox{position:relative;border:1px dashed #4a5262;border-radius:var(--r-m);min-height:96px;background:var(--surface-2)}
body.rj24-shell .wavebox canvas{width:100%;height:96px;display:block;opacity:0}body.rj24-shell .wavebox.ready{border-style:solid;border-color:var(--line-2)}body.rj24-shell .wavebox.ready canvas{opacity:1}
body.rj24-shell .wavecta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3)}body.rj24-shell .wavecta span{color:var(--dim);font-size:13px}
body.rj24-shell .wavebox.ready .wavecta{display:none}
body.rj24-shell .sub2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:var(--s4) 0 var(--s2)}
@media (max-width:760px){body.rj24-shell .row.cols-v,body.rj24-shell .row.cols-b,body.rj24-shell .row.cols-f,body.rj24-shell .row.cols-x{grid-template-columns:118px minmax(0,1fr)}body.rj24-shell .strip{padding:6px var(--s4)}body.rj24-shell .strip .chosen{display:none}}
.chip.staff{border-style:dashed}.t b .cut{font-size:11px;color:#f87171;font-weight:500;margin-left:4px}
/* the theme's clearfix puts a ::before/::after into every .row, which in a grid become two phantom cells (the star landed on a second line); and its select{width:100%} */
body.rj24-shell .row::before,body.rj24-shell .row::after,body.rj24-shell .head::before,body.rj24-shell .head::after,body.rj24-shell .filters::before,body.rj24-shell .filters::after{content:none!important;display:none!important}
body.rj24-shell .row,body.rj24-shell .head{margin:0;width:auto}
body.rj24-shell .filters .sel{width:auto;max-width:230px;flex:none}
body.rj24-shell .filters{scrollbar-width:none}body.rj24-shell .filters::-webkit-scrollbar{display:none}
body.rj24-shell .row .t b .star-in{display:none}@media (max-width:760px){body.rj24-shell .row .t b .star-in{display:inline}}
/* the count stays at the end of the filter row (sticky overlapped the chips at 1366); phone rows: three controls, no third column */
body.rj24-shell .filters .count{position:static;padding-left:8px;margin-left:auto}
@media (max-width:760px){body.rj24-shell .row.cols-v,body.rj24-shell .row.cols-b,body.rj24-shell .row.cols-f,body.rj24-shell .row.cols-x{grid-template-columns:118px minmax(0,1fr)!important}body.rj24-shell .row .star{display:none}body.rj24-shell .row .ctl{gap:6px}}
/* gate notes 25 Oct: chips wrap under 1500 px; the producer card on Words; recent creations under Make; the producer panel in the shell's dark */
@media (max-width:1500px){body.rj24-shell .filters{flex-wrap:wrap;overflow:visible}}
body.rj24-shell .producer-card{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-l);background:linear-gradient(135deg,rgba(219,39,119,.12),rgba(124,58,237,.12))}
body.rj24-shell .producer-card>div{flex:1;min-width:0}body.rj24-shell .producer-card b{display:block;margin-bottom:4px}body.rj24-shell .producer-card span{color:var(--dim);font-size:14px}
@media (max-width:760px){body.rj24-shell .producer-card{flex-direction:column;align-items:stretch}}
#rj24aia-mount #rj24aia{filter:invert(.92) hue-rotate(180deg);background:#f1f3f6}
/* "Based on a jingle you upload" (sung 0.9.0) */
.refp .refhead{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.refp .testlab{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:2px 10px}
.refp .reflist{display:flex;flex-direction:column;gap:6px;margin:var(--s3) 0}
.refp .refrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-2);cursor:pointer}
.refp .refrow.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.refp .refrow b{font-weight:600;min-width:0;overflow-wrap:anywhere}.refp .refrow span{margin-left:auto;color:var(--dim);font-size:13px;white-space:nowrap}
.refp .refrow input{accent-color:var(--accent)}
.refp .refup{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.refp .refrights{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s3);font-weight:600;color:var(--text);cursor:pointer}
.refp .refrights input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none}
/* 0.9.3: match levels, locked (unpaid) state, delete, the one-time notice */
.refp.locked .chip[disabled]{opacity:.5;cursor:not-allowed}
.refp .refrow .x{margin-left:8px;color:var(--mute);width:28px;height:28px;border-radius:50%;flex:none}.refp .refrow .x:hover{color:var(--text);background:var(--surface-3)}
.refp .refrow span{margin-left:auto}
.refp .refup .btn.dis{opacity:.45;pointer-events:none}
.refp .refline{color:var(--dim)}.refp .refrules{margin:6px 0 0}
.refp .refmatch{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s3)}.refp .refmatch .tile{min-height:0;padding:12px 14px;text-align:center}
.refmodal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:16px}
.refmodal .box{max-width:560px;width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s5);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.refmodal h3{margin:0 0 var(--s3);color:var(--text)}.refmodal p{color:var(--text);line-height:1.55;margin:0 0 var(--s4)}
@media (max-width:600px){.refp .refmatch{grid-template-columns:1fr}}
/* 27 Oct, audio editor Drop 1: "Add sounds", the library beside the timeline */
.se-add{margin-top:var(--s3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s3);display:grid;gap:var(--s2)}
.se-add .sa-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}.se-add .sa-h b{font-size:var(--fs-head)}
.se-add .sa-chips .chip{height:30px;padding:0 10px;font-size:13px}
.se-add .sa-list{max-height:340px;overflow-y:auto;display:grid;gap:6px}
.se-add .sa-row{display:flex;align-items:center;gap:var(--s2);padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface-3);cursor:grab;min-width:0}
.se-add .sa-row:active{cursor:grabbing}.se-add .sa-t{flex:1;min-width:0;display:flex;flex-direction:column}
.se-add .sa-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.se-add .sa-t span{color:var(--dim);font-size:var(--fs-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.se-add .sa-add{flex:none;height:32px;padding:0 14px}

/* 27 Oct: the one-line "middle effect left out" note */
.hint.warn{color:var(--warn)}