/* Copyright (c) 2026 Doubling Technologies. Use of this file is governed by the LICENSE file in the repository root. */
/* Stylesheet for the Suno API sidebar SPA (public/index.html): design tokens sampled from suno.com (dark
   background, off-white ink, green accent, orange->pink CTA gradient, pill buttons, 4% white surfaces), plus
   the sidebar/topbar app shell, composer + advanced-options controls, generation rows, and settings tables
   used by the Create / API docs / Prompting / MCP / Settings routes.
   It also carries the shared documentation design system — the `.doc` prose block that the static guide
   fragments render into, the `.code-surface` and `.tabs` primitives, and the `.pg-*` API playground layout
   (endpoint nav, endpoint header, parameter rows, and the sticky code-sample/response rail) — and the
   workspace row's track foldout (chevron-toggled source-prompt/metadata panel), its honest busy-state
   indicators (spinner/pulse-dot, status text, determinate stems-progress bar) shown while a clip is
   preparing to play, downloading, or splitting into stems, and the in-place reconcile animations
   (.ws-enter entrance, .ws-updated highlight) that replaced full-page re-renders. The .hero/.auth-* rules style the
   branded sign-in card from /assets/brand.js shared by the signed-out, pending-approval, and SSO callback pages. */

/* Tokens sampled from suno.com: bg #101012, ink #F7F4EF, green #02D95C, orange->pink CTA, pill radius, 4% white surfaces. */
:root {
  --bg: #101012; --bg-2: #141417;
  --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.09);
  --ink: #F7F4EF; --ink-2: #A3A3A3; --ink-3: #8A8A8A;
  --green: #02D95C; --green-ink: #0B3D1F; --red: #FF5C5C; --amber: #F5B841; --blue: #6BB6FF;
  --cta: linear-gradient(95deg, #F26A2E 0%, #E8397A 100%);
  --r: 12px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.35);
  --sidebar-w: 240px;
  /* Documentation design system: a code face distinct from the UI face, a recessed surface for code and
     response bodies, and a reading measure so prose never runs the full width of a 1600px content pane. */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --code-bg: #0A0A0C; --code-ink: #D8D4CD;
  --measure: 72ch;
  --t-h1: 26px; --t-h2: 19px; --t-h3: 15px; --t-label: 11px;
  --rail-w: 400px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 400 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Ambient gradient like Suno's hero, kept low so tables stay readable */
.glow { position: fixed; inset: -20% -10% auto -10%; height: 60vh; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 70% at 20% 20%, rgba(242,106,46,.28), transparent 60%), radial-gradient(50% 60% at 80% 10%, rgba(232,57,122,.22), transparent 60%);
  filter: blur(40px); opacity: .9; }
/* Full-bleed wrapper: the signed-in app shell manages its own widths (sidebar + .content-in), so capping
   here would squeeze every page into a narrow column on wide displays. The signed-out hero centres itself. */
.wrap { position: relative; z-index: 1; }

.brand { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; letter-spacing: -.01em; font-size: 17px; }
.brand .mark { width: 32px; height: 32px; border-radius: 9px; background: var(--cta); display: grid; place-items: center; flex: none; }
.brand .mark svg { width: 18px; height: 18px; }
.brand small { color: var(--ink-2); font-weight: 400; font-size: 13px; margin-left: 2px; }
.who { display: flex; align-items: center; gap: var(--s-3); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); object-fit: cover; display: grid; place-items: center; color: var(--ink-2); font-weight: 600; font-size: 13px; flex: none; }
.who .name { font-weight: 500; }
.who .role { color: var(--ink-2); font-size: 13px; }
@media (max-width: 600px) { .brand small, .who .role, .who .name { display: none; } .who { gap: var(--s-2); } }

/* App shell: fixed sidebar + scrolling content, collapses to a top bar + drawer under 768px */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; position: relative; z-index: 1; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--bg-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s-4) var(--s-3); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 4; }
.sidebar .brand { padding: var(--s-2) var(--s-2) var(--s-5); white-space: nowrap; }
.sidebar .brand small { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-radius: 10px; color: var(--ink-2); text-decoration: none; font: 500 14px Inter, system-ui, sans-serif; transition: background .2s, color .2s; }
.nav-item svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: color .2s; }
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item.active { background: var(--surface-2); color: var(--ink); }
.nav-item.active svg { color: var(--green); }
.nav-user { border-top: 1px solid var(--border); padding-top: var(--s-3); margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-3); }
.nav-user .who-info { flex: 1; min-width: 0; }
.nav-user .name { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-user .role { color: var(--ink-2); font-size: 12px; }
.content { flex: 1; min-width: 0; padding: var(--s-5) var(--s-4) var(--s-7); }
/* Readable measure on laptops, but use the room on wide displays instead of leaving it empty. */
.content-in { max-width: 1100px; margin: 0 auto; }
@media (min-width: 1600px) { .content-in { max-width: 1360px; } }
@media (min-width: 2000px) { .content-in { max-width: 1600px; } }
.btn.mobile-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 20% 0 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease-out; box-shadow: 0 0 40px rgba(0,0,0,.5); }
  .sidebar.open { transform: none; }
  .btn.mobile-toggle { display: inline-flex; position: sticky; top: var(--s-3); left: var(--s-3); margin: var(--s-3) 0 0 var(--s-3); z-index: 5; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 3; }
  .content { padding-top: var(--s-2); }
}

/* Buttons: 44px targets, pill shape, 200ms transitions */
.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, border-color .2s, transform .15s, opacity .2s; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-2); border-color: rgba(255,255,255,.16); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-cta { background: var(--cta); border-color: transparent; color: #fff; box-shadow: 0 6px 24px rgba(232,57,122,.25); }
.btn-cta:hover { filter: brightness(1.08); border-color: transparent; background: var(--cta); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--surface); }
.btn-danger { color: var(--red); }
.btn-danger:hover { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.08); }
.btn-sm { min-height: 34px; padding: 0 var(--s-3); font-size: 13px; }
.btn-icon { min-width: 40px; padding: 0; justify-content: center; }

/* Cards */
.grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1.1fr .9fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.card-h h2 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.card-h h2 svg { width: 16px; height: 16px; color: var(--ink-2); }
.card-h h2 code { font-size: .95em; }
.card-h p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
.card-b { padding: var(--s-5); }
.card-b.flush { padding: 0; }
.card + .card { margin-top: var(--s-4); }

/* Status */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.stat { padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); }
.stat .k { color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.stat .v { margin-top: 4px; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: var(--s-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.on { background: var(--green); box-shadow: 0 0 0 4px rgba(2,217,92,.18); }
.dot.warn { background: var(--amber); }
.dot.off { background: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hint { color: var(--ink-2); font-size: 13px; margin: var(--s-3) 0 0; }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border); }
.pill.ok { color: var(--green); background: rgba(2,217,92,.1); border-color: rgba(2,217,92,.25); }
.pill.warn { color: var(--amber); background: rgba(245,184,65,.1); border-color: rgba(245,184,65,.25); }
.pill.bad { color: var(--red); background: rgba(255,92,92,.1); border-color: rgba(255,92,92,.25); }
.pill.run { color: #fff; background: var(--cta); border-color: transparent; }
.pill.method-get { color: var(--blue); background: rgba(107,182,255,.1); border-color: rgba(107,182,255,.25); }
.pill.method-post { color: var(--green); background: rgba(2,217,92,.1); border-color: rgba(2,217,92,.25); }
.pill.method-delete { color: var(--red); background: rgba(255,92,92,.1); border-color: rgba(255,92,92,.25); }

/* One-line session status bar at the top of Create: dots + values, actions pushed right. */
.session-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 13px; color: var(--ink-2); }
.session-bar .sb-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.session-bar b { color: var(--ink); font-weight: 500; }
.session-bar .sb-sep { color: var(--ink-3); }
.session-bar .sb-spacer { flex: 1 1 auto; }
.session-bar .btn { min-height: 32px; }
@media (max-width: 720px) { .session-bar { border-radius: var(--r); } .session-bar .sb-spacer { flex-basis: 100%; height: 0; } }

/* Generation rows: cover art, one-line prompt, actions */
.gen { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); min-width: 0; }
.gen:last-child { border-bottom: 0; }
.gen:hover { background: rgba(255,255,255,.02); }
.covers { display: flex; gap: 4px; flex: none; }
.covers img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--border); }
.cover-empty { width: 56px; height: 56px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--ink-3); }
.cover-empty svg { width: 20px; height: 20px; }
.gen-main { min-width: 0; }
.gen-title { font-weight: 500; display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-sub, .gen-meta { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: none; align-items: center; justify-content: flex-end; }
@media (max-width: 640px) { .gen { grid-template-columns: auto 1fr; } .gen-actions { grid-column: 1 / -1; justify-content: flex-end; } }
/* Tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
.tbl td { padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Data tables: keep short columns tight and let the prose column absorb the remaining width and wrap,
   so nothing is clipped and the table only scrolls when the viewport is genuinely too narrow. */
.tbl { table-layout: auto; }
.tbl td.tight, .tbl th.tight { width: 1%; white-space: nowrap; }
.tbl td.prose { white-space: normal; min-width: 22ch; }
.scroll > .tbl { min-width: 640px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.tbl .num { text-align: right; }
.tbl .muted { color: var(--ink-2); font-size: 13px; }
.tbl .cell-actions { text-align: right; white-space: nowrap; }
.scroll { overflow-x: auto; }
.empty { padding: var(--s-6) var(--s-5); text-align: center; color: var(--ink-2); font-size: 14px; }
.empty svg { width: 28px; height: 28px; color: var(--ink-3); margin-bottom: var(--s-2); }
.loading { padding: var(--s-6) var(--s-5); text-align: center; color: var(--ink-2); font-size: 14px; }
.placeholder { padding: var(--s-6) var(--s-5); text-align: center; color: var(--ink-2); }
.placeholder h3 { color: var(--ink); margin: 0 0 var(--s-2); }

/* Forms */
.field { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.input { min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-2); color: var(--ink); font: 400 14px Inter, system-ui, sans-serif; flex: 1 1 200px; transition: border-color .2s; }
select.input { border-radius: 10px; }
/* Composer (mirrors Suno's Simple/Custom create panel) */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--border); }
.seg button { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.compose { display: grid; gap: var(--s-3); }
.compose label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.compose textarea { min-height: 120px; padding: var(--s-3) var(--s-4); border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-2); color: var(--ink); font: 400 14px/1.5 Inter, system-ui, sans-serif; resize: vertical; transition: border-color .2s; }
.compose textarea::placeholder, .compose .input::placeholder { color: var(--ink-3); }
.compose .row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .compose .row { grid-template-columns: 1fr 1fr; } }
.compose .input { border-radius: 10px; }
.switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-2); color: var(--ink-2); font: 500 14px Inter, system-ui, sans-serif; cursor: pointer; user-select: none; transition: background .2s, color .2s, border-color .2s; }
.switch input { appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--ink-3); position: relative; transition: background .2s; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { transform: translateX(12px); }
.switch:has(input:checked) { color: var(--ink); border-color: rgba(2,217,92,.35); }
.compose .foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.compose .foot .btn-cta { min-width: 160px; justify-content: center; }
.input:hover { border-color: rgba(255,255,255,.16); }
.input::placeholder { color: var(--ink-3); }
.reveal { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 10px; background: rgba(2,217,92,.08); border: 1px solid rgba(2,217,92,.25); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.reveal code { word-break: break-all; flex: 1 1 300px; color: var(--ink); }
.reveal .lbl { color: var(--green); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; flex: 1 1 100%; }
.usage { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); overflow-x: auto; }
.usage pre { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.usage b { color: var(--ink); font-weight: 500; }

/* Advanced composer (collapsible <details>) */
details.adv { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); }
details.adv summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); font-weight: 500; user-select: none; min-height: 44px; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary svg { width: 16px; height: 16px; color: var(--ink-2); transition: transform .2s; margin-left: auto; }
details.adv[open] summary svg { transform: rotate(180deg); }
.adv-body { padding: var(--s-4); display: grid; gap: var(--s-4); border-top: 1px solid var(--border); }
.adv-body .row { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .adv-body .row { grid-template-columns: 1fr 1fr; } }
.slider-field { display: grid; gap: 6px; }
.slider-field .lbl-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.slider-field .lbl-row .switch { min-height: 28px; padding: 0 var(--s-3); font-size: 12px; text-transform: none; letter-spacing: normal; }
.slider-field input[type=range] { width: 100%; accent-color: var(--green); }
.slider-field input[type=range]:disabled { opacity: .4; }

/* Create page: two-pane layout (composer + workspace). Composer first in DOM so it stacks on top on narrow
   screens; a fixed 420px column appears only once there's room for both panes side by side. */
.create-layout { display: grid; gap: var(--s-4); grid-template-columns: 1fr; margin-bottom: 88px; align-items: start; }
@media (min-width: 1024px) { .create-layout { grid-template-columns: 420px 1fr; } }
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.model-pill { flex: 0 1 auto; min-width: 0; width: auto; border-radius: var(--r-pill); }

/* Reference chips: "+ Audio / + Voice / + Inspo" add-buttons, replaced by a removable chip once set. */
.ref-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.chip-add { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px dashed var(--border); background: transparent; color: var(--ink-2); font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; }
.chip-add:hover { color: var(--ink); border-color: rgba(255,255,255,.24); }
.chip-add svg { width: 14px; height: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s-2) 0 var(--s-3); border-radius: var(--r-pill); background: rgba(2,217,92,.1); border: 1px solid rgba(2,217,92,.25); color: var(--ink); font-size: 13px; }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.chip-x:hover { background: var(--surface-2); color: var(--ink); }
.chip-x svg { width: 12px; height: 12px; }

/* Style suggestion chips (Simple: description, Custom: style tags) */
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { min-height: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-2); color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: background .2s, color .2s; }
.tag-chip:hover { background: var(--surface-2); color: var(--ink); }
.compose-submit { display: flex; align-items: center; gap: var(--s-3); }
.credits-hint { font-size: 13px; }

/* Workspace pane: generations + Suno library, newest first, with inline mini-waveforms */
.ws-tools { display: flex; align-items: center; gap: var(--s-2); }
.ws-search { min-height: 34px; padding: 0 var(--s-3); flex: 0 1 200px; }
.ws-item { border-bottom: 1px solid var(--border); }
.ws-item:last-child { border-bottom: 0; }
.ws-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-5); min-width: 0; }
.ws-row:hover, .ws-row.playing { background: rgba(255,255,255,.02); }
.ws-row.playing { background: rgba(2,217,92,.06); }
.ws-cover { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--border); flex: none; }
.ws-main { min-width: 0; display: grid; gap: 4px; }
.ws-title { font-weight: 500; font-size: 13.5px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-wave { width: 100%; height: 28px; display: block; cursor: pointer; }
.ws-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 4px; flex: none; justify-content: flex-end; }
.ws-more { padding: var(--s-4); text-align: center; }
@media (max-width: 640px) { .ws-row { grid-template-columns: auto 1fr; } .ws-wave { display: none; } .ws-actions { grid-column: 1 / -1; justify-content: flex-end; } }

/* Track foldout: a chevron + the clickable title toggle a detail panel of source-prompt / clip metadata,
   remembered per clip id across re-renders (see page-create.js openRows). */
.ws-chevron, .ws-title-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; }
.ws-chevron { color: var(--ink-2); display: inline-flex; flex: none; }
.ws-chevron svg { width: 14px; height: 14px; transition: transform .2s; }
.ws-chevron[aria-expanded="true"] svg { transform: rotate(90deg); }
.ws-title-btn { color: inherit; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-title-btn:hover { text-decoration: underline; }
/* Stems accordion: a track's splits, collapsed by default. Indented and quieter than a .ws-row so the
   list still reads as a list of songs. */
.ws-stems { border-top: 1px dashed var(--border); }
.ws-stems-toggle { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 0; cursor: pointer; font: 500 12px Inter, system-ui, sans-serif; color: var(--ink-2); padding: var(--s-2) var(--s-5); }
.ws-stems-toggle:hover { color: var(--ink); }
.ws-stems-chevron { display: inline-flex; }
.ws-stems-chevron svg { width: 12px; height: 12px; transition: transform .2s; }
.ws-stems-chevron.open svg { transform: rotate(90deg); }
.ws-subs { display: grid; }
.ws-sub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-5) var(--s-2) calc(var(--s-5) + var(--s-6)); font-size: 13px; }
.ws-sub + .ws-sub { border-top: 1px solid var(--border); }
.ws-sub.playing .ws-sub-name { color: var(--green); }
.ws-sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sub-meta { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ws-sub { padding-left: var(--s-5); } }

.ws-detail { padding: var(--s-4) var(--s-5); background: rgba(255,255,255,.02); border-top: 1px dashed var(--border); display: grid; gap: var(--s-3); font-size: 13px; }
.ws-detail-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s-4); margin: 0; }
.ws-detail-facts dt { color: var(--ink-2); }
.ws-detail-facts dd { margin: 0; }
.ws-detail-row { display: grid; gap: 6px; }
.ws-detail-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.ws-detail-lbl { color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ws-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-lyrics { max-height: 220px; overflow: auto; white-space: pre-wrap; margin: 0; padding: var(--s-3) var(--s-4); border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.6; }
.ws-detail-ref { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Busy states (playing/preparing, downloading, splitting into stems): an honest status word plus a spinner
   — never a fake percentage. A determinate bar only appears where a real fraction exists (stems). */
.ws-status { font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; min-height: 14px; }
.ws-progress { width: 60px; height: 4px; border-radius: 2px; background: var(--bg-2); overflow: hidden; flex: none; }
.ws-progress-bar { height: 100%; background: var(--cta); }
.ws-progress-lbl { font-size: 11px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--ink-3); border-top-color: var(--ink); border-radius: 50%; display: inline-block; flex: none; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Reduced-motion fallback for .spinner: a plain dot the caller pulses via JS opacity toggles (armPulse in
   page-create.js), since the app-wide rule above disables CSS animation for these viewers. */
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); display: inline-block; flex: none; }

/* Workspace list reconcile (page-create.js reconcileWorkspaceList): a genuinely new row slides/fades in;
   a row that merely changed gets a brief highlight instead of a re-entrance. The app-wide reduced-motion
   rule above already collapses both to an instant, motionless appearance for those viewers. */
.ws-item.ws-enter { animation: ws-row-enter .6s ease-out; }
@keyframes ws-row-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ws-row { transition: background-color .5s ease; }
.ws-item.ws-updated .ws-row { background-color: rgba(2,217,92,.16); }

/* Persistent bottom player bar: created once on document.body (see page-create.js ensurePlayerBar) so it
   survives route changes. Sits beside the sidebar on desktop, full-width once the sidebar collapses. */
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); background: var(--bg-2); border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
.player-bar[hidden] { display: none; }
@media (min-width: 769px) { .player-bar { left: var(--sidebar-w); } }
.pb-cover { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg); border: 1px solid var(--border); flex: none; }
.pb-info { min-width: 120px; max-width: 220px; }
.pb-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Reserves its line even when empty, so the "Preparing… Ns" text appearing doesn't shift the bar's height. */
.pb-status { min-height: 14px; font-size: 11px; color: var(--amber); display: flex; align-items: center; gap: 4px; }
.pb-wave { flex: 1 1 auto; min-width: 0; height: 36px; cursor: pointer; }
.pb-time { font-size: 12px; flex: none; }
.pb-vol { width: 80px; accent-color: var(--green); }
#pb-loop.active { color: var(--green); }
@media (max-width: 640px) { .pb-info, .pb-time, .pb-vol, #pb-mute { display: none; } }

/* ===========================================================================
   Documentation design system
   Shared by the API playground (/#/docs) and the static guide fragments under
   /pages, which are injected into a `.doc` wrapper by page-guides.js. Modelled
   on the ElevenLabs / Mintlify API references: a constrained reading measure,
   a real type scale, recessed code surfaces, and hairline-separated rows.
   =========================================================================== */

/* --- Prose (guide fragments: Prompting, Stems & DAW, MCP) ---------------- */
/* One measure on the container rather than per child: a `ch` cap applied to each element resolves against
   that element's own font size, so headings, prose, and code would each stop at a different x. */
.doc { max-width: 820px; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.doc > :first-child { margin-top: 0; }
.doc > :last-child { margin-bottom: 0; }
.doc h2 { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-h1); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.doc h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-h2); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.doc h4 { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-h3); font-weight: 600; color: var(--ink); }
.doc p { margin: 0 0 var(--s-4); }
.doc ul, .doc ol { margin: 0 0 var(--s-4); padding-left: 1.35em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--ink-3); }
.doc strong, .doc b { color: var(--ink); font-weight: 600; }
.doc a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.doc a:hover { text-decoration-color: var(--green); }
/* Inline code reads as a token, not a block: tinted chip, never wrapped in a border-radius that hides text. */
/* Inline code is a token inside a sentence, not a button. A border plus a fill made every field name read as
   a chip, and these pages name a field every other clause — the result was ransom-note prose. Tint only. */
.doc :not(pre) > code { padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.06);
  color: #CDE7D6; font-size: .875em; white-space: nowrap; }
.doc a > code, .doc a code { color: inherit; }
.doc pre { margin: 0 0 var(--s-4); padding: var(--s-4); border-radius: var(--r); background: var(--code-bg); border: 1px solid var(--border); overflow-x: auto; }
.doc pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--code-ink); white-space: pre; }
.doc table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: 14px; display: block; overflow-x: auto; }
.doc th { text-align: left; font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.doc td { padding: var(--s-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc blockquote { margin: 0 0 var(--s-4); padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: 2px solid var(--green); color: var(--ink-2); }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }

/* --- Code surface (shared by the sample rail and the response viewer) ---- */
.code-surface { border-radius: var(--r); background: var(--code-bg); border: 1px solid var(--border); overflow: hidden; }
.code-surface pre { margin: 0; padding: var(--s-4); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--code-ink);
  white-space: pre; overflow-x: auto; }
.code-surface pre.wrap { white-space: pre-wrap; word-break: break-word; }

/* Underline tabs: a tab bar must not read as a row of buttons, or nothing signals "current view". */
.tabs { display: flex; gap: var(--s-4); }
.tabs button { min-height: 34px; padding: 0 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--ink-3); font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; transition: color .2s, border-color .2s; }
.tabs button:hover { color: var(--ink-2); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--green); }

/* --- Guide pages: prose + an "On this page" rail ------------------------- */
.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 1200px) { .guide { grid-template-columns: minmax(0, 1fr) 200px; } }
.guide-toc { display: none; }
@media (min-width: 1200px) {
  .guide-toc { display: block; position: sticky; top: var(--s-4); max-height: calc(100vh - var(--s-6)); overflow-y: auto; }
}
.guide-toc h4 { margin: 0 0 var(--s-3); font-size: var(--t-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); }
.guide-toc a { display: block; padding: 5px 0 5px var(--s-3); border-left: 2px solid var(--border);
  color: var(--ink-3); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .2s, border-color .2s; }
.guide-toc a:hover { color: var(--ink-2); }
.guide-toc a.active { color: var(--ink); border-left-color: var(--green); }

/* Code block shell: the copy button is a sibling of the <pre>, not a child, because a <pre> scrolls
   horizontally and would carry an absolutely positioned child out of view with its content. */
.code-block { position: relative; margin: 0 0 var(--s-4); }
.doc .code-block pre { margin: 0; }
.code-block-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0; background: var(--surface); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.code-block-h + pre { border-radius: 0 0 var(--r) var(--r) !important; }
.doc-copy { position: absolute; top: var(--s-2); right: var(--s-2); opacity: 0; transition: opacity .2s, color .2s; }
.code-block-h .doc-copy { position: static; opacity: 1; }
.code-block:hover .doc-copy, .doc-copy:focus-visible { opacity: 1; }
.doc-copy.ok { color: var(--green); border-color: rgba(2,217,92,.35); }
/* Touch devices have no hover, so the button must not depend on it to be reachable. */
@media (hover: none) { .doc-copy { opacity: 1; } }

/* ===========================================================================
   API playground (/#/docs)
   Layout: [endpoint nav] [ endpoint header / (request | sticky code+response) ]
   The rail sticks so the sample and the response stay in view while a long
   parameter list scrolls — the single behaviour that makes a reference feel
   like a console rather than a form.
   =========================================================================== */
.pg-layout { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
.pg-nav, .pg-main, .pg-request, .pg-rail { min-width: 0; }

/* Getting started: a quiet three-step strip, not a card that outweighs the reference below it. */
.pg-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.pg-start .pg-start-step { display: inline-flex; align-items: center; gap: var(--s-2); }
.pg-start .n { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); font-size: 11px; font-weight: 600; }
.pg-start code { color: var(--ink); }
.pg-start a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }

/* --- Endpoint nav ------------------------------------------------------- */
.pg-nav { display: flex; flex-direction: column; gap: var(--s-3); }
/* `flex: none` undoes the base .input `flex: 1 1 200px`, whose 200px basis resolves against the HEIGHT in
   this column flex container and turns the filter into a 200px-tall box. */
.pg-filter { flex: none; min-height: 36px; border-radius: 10px; font-size: 13px; }
.pg-nav-list { display: flex; flex-direction: column; gap: var(--s-5); }
.pg-nav-group h4 { margin: 0 0 var(--s-2); padding-left: var(--s-2); font-size: var(--t-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.pg-nav-item { display: flex; align-items: flex-start; gap: var(--s-2); width: 100%; min-height: 32px; padding: 6px var(--s-2);
  border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; background: transparent; color: var(--ink-2);
  text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pg-nav-item:hover { background: var(--surface); color: var(--ink); }
.pg-nav-item.active { background: var(--surface-2); color: var(--ink); border-left-color: var(--green); }
/* Fixed-width verb column so every path starts at the same x — the list scans as a table, not ragged text. */
.pg-verb { flex: none; width: 42px; padding: 2px 0; border-radius: 4px; text-align: center;
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.pg-verb.method-get { color: var(--blue); background: rgba(107,182,255,.12); }
.pg-verb.method-post { color: var(--green); background: rgba(2,217,92,.12); }
.pg-verb.method-delete { color: var(--red); background: rgba(255,92,92,.12); }
/* The /api/ prefix is on every route; dropping it here is what keeps long paths from truncating at 236px. */
.pg-nav-path { font: 400 12.5px/1.45 var(--mono); word-break: normal; overflow-wrap: break-word; }

/* --- Endpoint header ---------------------------------------------------- */
.pg-head { margin-bottom: var(--s-5); }
.pg-crumb { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--s-2); }
.pg-title { margin: 0 0 var(--s-3); font: 600 var(--t-h1)/1.25 var(--mono); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.pg-lede { margin: 0 0 var(--s-4); max-width: var(--measure); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
/* Method + fully-qualified URL, the way every reference opens an endpoint. */
.pg-url { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.pg-url .pg-url-text { font: 400 13px/1.5 var(--mono); color: var(--ink); overflow-wrap: anywhere; flex: 1 1 240px; }
.pg-url .pg-url-base { color: var(--ink-3); }
.pg-url .pg-url-param { color: var(--green); }
.pg-url .pill { flex: none; }

/* --- Request column ----------------------------------------------------- */
.pg-body { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
.pg-section { margin-bottom: var(--s-5); }
.pg-section > h3 { margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--border);
  font-size: var(--t-h3); font-weight: 600; color: var(--ink); }
.pg-section > h3 .pg-count { margin-left: 6px; color: var(--ink-3); font-weight: 400; }

/* One parameter: label line (name / type / required / constraints), description, then the control. */
.pg-field { padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.pg-section .pg-field:last-child { border-bottom: 0; padding-bottom: 0; }
.pg-field-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); margin-bottom: 6px; }
.pg-field-h label { font: 500 13.5px var(--mono); color: var(--ink); cursor: pointer; }
.pg-type { font-size: 12px; color: var(--ink-3); }
.pg-req { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.pg-opt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pg-const { padding: 1px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border);
  font: 400 11px var(--mono); color: var(--ink-2); }
.pg-help { margin: 0 0 var(--s-3); max-width: var(--measure); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.pg-help.mono { font-size: 12.5px; line-height: 1.7; color: var(--code-ink); }
.pg-help code, .pg-lede code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); font-size: .9em; }
.pg-help.mono code { padding: 0; border: 0; background: none; }
.pg-field .input { width: 100%; flex: none; }
.pg-field textarea.input { border-radius: 10px; min-height: 88px; padding: var(--s-3) var(--s-4); resize: vertical;
  font: 400 13.5px/1.6 var(--mono); }
.pg-field .input.pg-invalid, .pg-field textarea.pg-invalid { border-color: rgba(255,92,92,.6); }
.pg-field .switch { width: auto; }

/* Auth + presets sit above the parameters as secondary controls, not as bordered boxes competing with them. */
.pg-auth { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.pg-auth-modes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.pg-key-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pg-key-hint { margin: 0; font-size: 12px; }
.pg-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.pg-radio input { accent-color: var(--green); }
.pg-auth .input { flex: 1 1 180px; min-height: 34px; font-family: var(--mono); font-size: 12.5px; }
.pg-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-5); }
.pg-presets .hint { margin: 0; }
.pg-empty-params { margin: 0 0 var(--s-5); font-size: 13px; color: var(--ink-3); }
.pg-send { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.pg-send .hint { margin: 0; }

/* --- Sticky code + response rail ---------------------------------------- */
.pg-rail { display: grid; gap: var(--s-4); }
.pg-panel { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.pg-panel-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0 var(--s-3) 0 var(--s-4); border-bottom: 1px solid var(--border); min-height: 44px; }
.pg-panel-h h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.pg-panel-h .tabs button { min-height: 43px; }
.pg-panel-b { padding: var(--s-3); }
.pg-panel-b .code-surface pre { max-height: 340px; overflow-y: auto; }
.pg-resp-status { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 12px; color: var(--ink-3); }
.pg-resp-empty { margin: 0; padding: var(--s-4); font-size: 13px; color: var(--ink-3); }
.pg-resp-media { display: block; width: 100%; border-radius: 8px; }
pre.json { margin: 0; padding: var(--s-4); font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; color: var(--code-ink); max-height: 420px; overflow-y: auto; }
/* Syntax tokens (public/assets/syntax.js). One palette across JSON, shell, TOML, Python and JavaScript so a
   curl sample and the JSON response beside it read as the same system. Every colour is checked against
   --code-bg (#0A0A0C) at 4.5:1 or better. */
.tok-key { color: var(--blue); }
.tok-str { color: #93D9A3; }
.tok-num { color: var(--amber); }
.tok-bool { color: #C9A6FF; }
.tok-nul { color: var(--ink-3); }
.tok-com { color: #7E8794; font-style: italic; }
.tok-kw { color: #FF8FB0; }
.tok-fn { color: var(--blue); }
.tok-cmd { color: #C9A6FF; font-weight: 500; }
.tok-flag { color: var(--amber); }
.tok-var { color: var(--green); }
.tok-sec { color: #C9A6FF; font-weight: 500; }

/* --- Responsive --------------------------------------------------------- */
/* Below 1024 the nav sits above the endpoint, so it has to be bounded: the full list is two dozen entries
   and would otherwise push the endpoint itself off the bottom of a phone screen. */
@media (max-width: 1023px) {
  .pg-nav-list { max-height: 42vh; overflow-y: auto; padding-right: var(--s-2); }
}
/* >=1024: the endpoint nav becomes a sticky rail beside the content. */
@media (min-width: 1024px) {
  .pg-layout { grid-template-columns: 252px minmax(0, 1fr); }
  .pg-nav { position: sticky; top: var(--s-4); max-height: calc(100vh - var(--s-6)); overflow-y: auto;
    margin-left: calc(var(--s-2) * -1); padding-left: var(--s-2); }
}
/* >=1280: the sample/response rail moves beside the request form and sticks.
   Below this the rail stacks under the form, which is why the old 1600px
   threshold left a 1440px laptop reading one long half-empty column. */
@media (min-width: 1280px) {
  .pg-body { grid-template-columns: minmax(0, 1fr) var(--rail-w); }
  .pg-rail { position: sticky; top: var(--s-4); }
}
@media (min-width: 1600px) { :root { --rail-w: 460px; } }

/* Settings page */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); font-size: 14px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; }

/* Sign-in */
.hero { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: var(--s-5) var(--s-4); }
.hero-card { width: 100%; max-width: 420px; padding: var(--s-6) var(--s-5); }
.hero h1 { margin: var(--s-2) 0 var(--s-2); font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.hero p { margin: 0 0 var(--s-5); color: var(--ink-2); }
.hero-card > p:last-child { margin-bottom: 0; }
/* Branded auth card (markup from /assets/brand.js): logo tile, wordmark, stacked full-width actions, live status. */
.auth-logo { display: block; width: 64px; height: 64px; margin: 0 auto var(--s-3); border-radius: 16px; box-shadow: 0 10px 40px rgba(232,57,122,.35); }
.auth-wordmark { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.auth-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.btn-block { width: 100%; justify-content: center; min-height: 44px; }
.hero .auth-status { margin: var(--s-4) 0 0; min-height: 1.5em; font-size: 14px; }
.hero .auth-status:empty { margin: 0; min-height: 0; }
.auth-status.bad { color: var(--red); }
.auth-status a { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1C1C20; border: 1px solid var(--border); border-radius: 10px; padding: var(--s-3) var(--s-4); font-size: 14px; box-shadow: var(--shadow); z-index: 10; max-width: min(90vw, 560px); }
.toast.bad { border-color: rgba(255,92,92,.4); }
.fade { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Themed scrollbars: narrow floating pill instead of the OS default, applied globally so every scrolling
   surface (page, sidebar, workspace list, the ws-lyrics block, the docs code rail, .scroll table wrappers)
   matches. Standards-track properties first for Firefox, then the WebKit pseudo-elements Chrome/Edge/Safari
   actually use. Only existing :root tokens — no new ones. */
:root { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--ink-3); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: padding-box; /* inset so the thumb reads as a slim floating pill, not a full-width bar */
  transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--ink-2); }
::-webkit-scrollbar-corner { background: transparent; }