/* ─── SongWrite · the multiphase workspace ───────────────────────────────────
   The deployed tool's Ideas → Lyrics → Chords → Melody → Record → Harmony flow,
   ported from the validated mockup at docs/design/grunge-redesign.html into the
   real app (Chords/Melody/Harmony share the `.izone` styling the old Tune used).

   EVERYTHING here is scoped under `.sw` (the workspace root element) so the
   mockup's short, generic class names — .tab, .panel, .line, .opt, .head,
   .label, .meta — can never collide with a utility class or another view. The
   palette tokens are the grunge system's dark values (they match the Tailwind
   @theme remap in app/assets/tailwind/application.css); the app is committed to
   dark, so there's no light variant here. Fonts come from the embedded OSS faces
   loaded by application.css. */

.sw {
  --bg:#0E0F10; --panel:#16181A; --panel-2:#1E2124;
  --ink:#E9E6DE; --ink-2:#9C998F; --ink-3:#6A6860;
  --line:#2A2D30; --line-2:#3B3F43;
  --accent:#E23A25; --accent-2:#F2543D; --accent-ink:#F4A79B;
  --perfect-bg:rgba(70,185,157,.14); --perfect-fg:#5FCBB0;
  --near-bg:rgba(224,169,74,.15); --near-fg:#E5B15A;
  --rec:#E23A25;
  --hero:"Anton","Suez One","Arial Narrow","Impact",sans-serif;
  --display:"Oswald","Heebo","Arial Narrow","Franklin Gothic",sans-serif;
  --sans:"Barlow","Heebo","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"Space Mono","Heebo",ui-monospace,"SF Mono","Menlo",monospace;

  max-width:760px; margin:0 auto; padding:0 24px 96px;
  color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.5;
}
.sw *, .sw *::before, .sw *::after { box-sizing:border-box; }
.sw button { font:inherit; color:inherit; cursor:pointer; }
.sw input[type=text] { font:inherit; }
.sw [hidden] { display:none !important; }

.sw .label { font-family:var(--display); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:400; }
.sw .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.sw :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Song head ─────────────────────────────────────────────────────────── */
.sw .head { padding:28px 0 6px; }
.sw .kicker { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.sw .title-row { display:flex; align-items:baseline; gap:16px; }
.sw .song-title { font-family:var(--hero); font-size:56px; letter-spacing:.01em; text-transform:uppercase; line-height:.92; color:var(--ink); border:0; background:transparent; padding:0; flex:1; min-width:0; outline:none; }
.sw .song-title::placeholder { color:var(--ink-3); }
.sw .ghost { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:13px; letter-spacing:.05em; text-transform:uppercase; padding:7px 13px; white-space:nowrap; transition:.12s; }
.sw .ghost:hover { border-color:var(--accent); color:var(--accent); }
.sw .meta { margin-top:14px; display:flex; align-items:center; gap:12px; color:var(--ink-3); font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; flex-wrap:wrap; }
.sw .meta .sep { color:var(--line-2); }
.sw .meta .spark { color:var(--ink-2); }
.sw .savestate { color:var(--ink-3); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.sw .savestate.err { color:var(--accent); }

/* ── Section context (the song so far) ─────────────────────────────────── */
.sw .context { margin-top:24px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sw .context .label { margin-right:4px; }
.sw .sec { position:relative; display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); padding:3px 5px 3px 6px; transition:.12s; }
.sw .sec .grip { cursor:grab; color:var(--ink-3); font-size:13px; line-height:1; padding:0 1px; user-select:none; }
.sw .sec .grip:active { cursor:grabbing; }
.sw .sec.now .grip { color:rgba(255,255,255,.6); }
.sw .sec.dragging { opacity:.45; }
/* Where the dragged chip will land — a bar on the near edge (mirrored in RTL). */
.sw .sec.drop-before::before, .sw .sec.drop-after::after { content:""; position:absolute; top:-2px; bottom:-2px; width:3px; background:var(--accent-2); }
.sw .sec.drop-before::before { left:-5px; }
.sw .sec.drop-after::after { right:-5px; }
[dir="rtl"] .sw .sec.drop-before::before { left:auto; right:-5px; }
[dir="rtl"] .sw .sec.drop-after::after { right:auto; left:-5px; }
.sw .sec:hover { border-color:var(--ink-2); color:var(--ink); }
.sw .sec.now { border-color:var(--accent); background:var(--accent); color:#fff; }
.sw .sec.done { color:var(--ink); }
.sw .sec .tick { color:var(--accent); font-size:13px; }
.sw .sec.now .tick { color:#fff; }
/* Primary action: click the label to GO TO that section — the big, obvious target. */
.sw .sec-pick { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:inherit; font-family:var(--display); font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:3px 2px; cursor:pointer; }
.sw .sec-pick:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
/* Secondary action: a small caret retypes the section (verse → chorus) via an
   invisible native <select> laid over it, so it never steals the go-to click. */
.sw .sec-kind-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:22px; }
.sw .sec-caret { color:var(--ink-3); font-size:11px; line-height:1; pointer-events:none; }
.sw .sec:hover .sec-caret { color:var(--ink-2); }
.sw .sec.now .sec-caret { color:rgba(255,255,255,.7); }
.sw .sec-kind { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; border:0; -webkit-appearance:none; appearance:none; }
.sw .sec-kind:focus-visible ~ .sec-caret { color:var(--accent-2); }
.sw .sec-add:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.sw .sec-kind option { color:#1a1a1a; text-transform:none; }
.sw .sec-rm { border:0; background:transparent; color:var(--ink-3); font-size:17px; line-height:1; padding:3px 7px; cursor:pointer; }
.sw .sec-rm:hover { color:#fff; background:var(--accent); }
.sw .sec.now .sec-rm { color:rgba(255,255,255,.75); }
.sw .sec.now .sec-rm:hover { color:var(--accent); background:#fff; }
.sw .sec-add { border:1px dashed var(--line-2); background:transparent; color:var(--ink-3); font-family:var(--display); font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; cursor:pointer; }
.sw .sec-add:hover { border-color:var(--accent); color:var(--accent); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
/* overflow-y:hidden is required: setting overflow-x:auto alone forces overflow-y
   to compute as auto, which the active tab's underline turns into a 2px phantom
   vertical scroll. */
.sw .tabs { display:flex; gap:0; border-bottom:2px solid var(--line-2); margin-top:22px; overflow-x:auto; overflow-y:hidden; }
.sw .tab { position:relative; display:inline-flex; align-items:center; gap:10px; border:0; background:transparent; color:var(--ink-3); font-family:var(--display); font-size:17px; letter-spacing:.03em; text-transform:uppercase; padding:12px 18px 13px; white-space:nowrap; transition:color .12s; }
.sw .tab:first-child { padding-left:2px; }
.sw .tab:hover { color:var(--ink-2); }
.sw .tab.active { color:var(--ink); }
.sw .tab.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); }
.sw .tab.active:first-child::after { left:2px; }
.sw .pdot { width:16px; height:16px; border:2px solid var(--line-2); flex:none; display:inline-flex; align-items:center; justify-content:center; transition:.12s; }
.sw .pdot svg { width:8px; height:8px; color:#fff; opacity:0; }
.sw .pdot.locked { background:var(--accent); border-color:var(--accent); }
.sw .pdot.locked svg { opacity:1; }
.sw .tab-hint { font-size:12.5px; color:var(--ink-3); margin-top:13px; font-style:italic; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.sw .panel { display:none; padding-top:26px; }
.sw .panel.active { display:block; }

/* SONG-level phases (Overview, and later the play-through) sit on a bounded,
   tinted surface with an accent top edge, so they read apart from the PART-level
   phases (lyrics/progression/melody/record/harmony) that live on the bare page. */
.sw .panel.song-level { background:linear-gradient(180deg, rgba(226,58,37,.05), rgba(226,58,37,0) 200px), var(--panel); border:1px solid var(--line-2); border-top:2px solid var(--accent); padding:26px 26px 30px; margin-top:4px; }
.sw .ov-setup { margin-bottom:6px; }
.sw .ov-title-row { display:flex; align-items:center; gap:14px; }
.sw .panel.song-level .song-title { font-size:44px; }
.sw .ov-fields { display:flex; flex-wrap:wrap; gap:20px 40px; margin-top:20px; }
.sw .ov-field--genre { flex:1; min-width:260px; }
.sw .ov-ideas { border-top:1px solid var(--line); padding-top:24px; margin-top:24px; }
.sw .ov-tempo { display:flex; align-items:center; gap:10px; }
.sw .ov-tempo input { width:160px; accent-color:var(--accent); }
.sw .ov-bpm { font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.sw .ov-key { font-family:var(--display); font-size:22px; letter-spacing:.02em; color:var(--ink); }
.sw .sec-commit { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.sw .sc-label { font-size:12.5px; color:var(--ink-3); font-style:italic; }
.sw .sc-save { font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--bg); background:var(--accent); border:0; padding:7px 14px; cursor:pointer; transition:.12s; }
.sw .sc-save:hover { background:var(--accent-2); }
.sw .sc-revert { font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid var(--line-2); padding:7px 14px; cursor:pointer; transition:.12s; }
.sw .sc-revert:hover { border-color:var(--accent); color:var(--accent); }
.sw .versions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 14px; }
.sw .versions:empty { display:none; }
.sw .ver-lead { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.sw .ver-chip { font-family:var(--mono); font-size:11px; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; padding:4px 9px; cursor:pointer; transition:.12s; }
.sw .ver-chip:hover { border-color:var(--accent); color:var(--accent); }
.sw .ov-range { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sw .ov-note { width:3.6em; font-family:var(--mono); font-size:14px; text-align:center; text-transform:uppercase; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink); padding:5px 6px; outline:none; }
.sw .ov-note:focus { border-color:var(--accent); }
.sw .ov-dash { color:var(--ink-3); }
.sw .ov-voice { font-family:var(--mono); font-size:12px; color:var(--ink-2); font-style:italic; }
.sw .singer-match { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sw .singer-match:empty { display:none; }
.sw .sng-lead { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.sw .sng { display:inline-flex; align-items:baseline; gap:6px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); font-size:13px; padding:4px 10px; }
.sw .sng-band { font-size:11px; color:var(--ink-3); }
.sw .sng-note { font-family:var(--mono); font-size:10px; color:var(--ink-3); font-style:italic; }

/* ── Flow: two SONG-level bookends framing the PART-level workbench ────── */
.sw .flow { display:flex; align-items:stretch; gap:14px; margin-top:22px; }
.sw .workbench { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
.sw .workbench .context { margin-top:0; margin-bottom:4px; }
.sw.at-songlevel .workbench .context { display:none; }
.sw .workbench .tabs { margin-top:0; }
.sw .phase-book { display:flex; flex-direction:column; justify-content:flex-end; gap:3px; align-self:stretch; min-width:106px; border:1px solid var(--line-2); border-top:2px solid var(--line-2); background:var(--panel); color:var(--ink-2); padding:10px 16px 12px; cursor:pointer; transition:.12s; text-align:left; }
.sw .phase-book:hover { color:var(--ink); border-color:var(--ink-3); }
.sw .phase-book.active { border-top-color:var(--accent); background:linear-gradient(180deg, rgba(226,58,37,.08), rgba(226,58,37,0)), var(--panel); color:var(--ink); }
.sw .phase-book.book-finish { text-align:right; }
.sw .pb-tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.sw .phase-book.active .pb-tag { color:var(--accent); }
.sw .pb-name { font-family:var(--display); font-size:17px; letter-spacing:.03em; text-transform:uppercase; }

/* ── The Song finish page: a read-through of every section, then handoff ── */
.sw .song-play { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.sw .song-play-note { font-size:12.5px; color:var(--ink-3); font-style:italic; }
.sw .song-review { display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
.sw .sr-sec { border-left:2px solid var(--line-2); padding-left:16px; }
.sw .sr-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sw .sr-kind { font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.sw .sr-chords { font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.sw .sr-lines { display:flex; flex-direction:column; gap:3px; }
.sw .sr-line { font-family:var(--sans); font-size:16px; color:var(--ink); }
.sw .sr-empty { font-family:var(--sans); font-size:14px; color:var(--ink-3); font-style:italic; }
.sw .handoff { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; border:1px solid var(--line-2); background:var(--panel-2); padding:18px 20px; }
.sw .ho-copy { display:flex; flex-direction:column; gap:3px; }
.sw .ho-title { font-family:var(--display); font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.sw .ho-sub { font-size:13px; color:var(--ink-2); max-width:52ch; }
.sw .ho-btn { font-family:var(--display); font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--bg); background:var(--accent); border:0; padding:12px 22px; cursor:pointer; transition:.12s; white-space:nowrap; }
.sw .ho-btn:hover { background:var(--accent-2); }
.sw .step-goal { font-family:var(--hero); font-size:25px; font-weight:400; letter-spacing:.02em; text-transform:uppercase; line-height:1.15; color:var(--ink-2); margin:0 0 24px; }
.sw .step-goal b { color:var(--ink); font-weight:inherit; }
.sw .step-goal .arr { color:var(--accent); padding:0 4px; }
.sw .step-goal .lockword { color:var(--accent); }

/* ── Commit / locked (the shared shape) ────────────────────────────────── */
.sw .commit { margin-top:26px; border-top:2px solid var(--line-2); padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sw .commit .cq { font-size:13.5px; color:var(--ink-2); }
.sw .lock-btn { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff; border:0; font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase; padding:12px 22px; transition:background .12s; }
.sw .lock-btn:hover { background:var(--accent-2); }
.sw .lock-btn svg { width:14px; height:14px; }
.sw .locked-bar { display:none; margin-top:26px; border-top:2px solid var(--line-2); padding-top:20px; align-items:center; gap:16px; flex-wrap:wrap; }
.sw .locked-bar.show { display:flex; }
.sw .stamp { font-family:var(--hero); font-size:19px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border:3px solid var(--accent); padding:4px 12px 3px; transform:rotate(-4deg); box-shadow:inset 0 0 0 1px var(--bg); white-space:nowrap; }
.sw .locked-bar .summary { font-family:var(--mono); font-size:12.5px; color:var(--ink-2); flex:1; min-width:120px; text-transform:uppercase; letter-spacing:.03em; }
.sw .locked-bar .edit { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 14px; }
.sw .locked-bar .edit:hover { border-color:var(--accent); color:var(--accent); }

/* ── Ideas ─────────────────────────────────────────────────────────────── */
.sw .field-label { margin:0 0 12px; }
.sw .field-label.mt { margin-top:26px; }
.sw .spark-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sw .mini-sugg { border:0; background:transparent; color:var(--ink-3); font-family:var(--display); font-size:12px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; padding:0 0 12px; transition:.12s; }
.sw .mini-sugg:hover { color:var(--accent); }
.sw .seed-input { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:16px; padding:11px 14px; margin-bottom:12px; outline:none; }
.sw .seed-input:focus { border-color:var(--accent); }
.sw .spark-options { margin-bottom:10px; }
.sw .spark-options:empty { display:none; }
.sw .tagc.sugg.spark { font-family:var(--display); letter-spacing:.02em; }
.sw .sugg-head { flex-basis:100%; color:var(--ink-3); font-size:11px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px; }
.sw .genre-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sw .genre-credit { margin:0 0 8px; min-height:15px; color:var(--ink-3); font-family:var(--sans); font-size:12px; font-style:italic; }
.sw .genre-credit:empty { margin:0; min-height:0; }
.sw .genre-credit a { color:var(--ink-2); text-decoration:underline; }
.sw .genre-credit a:hover { color:var(--accent); }
.sw .gchip { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:15px; letter-spacing:.03em; text-transform:uppercase; padding:8px 15px; transition:.12s; }
.sw .gchip.on { border-color:var(--accent); color:#fff; background:var(--accent); }
.sw .gchip.sugg { border-style:dashed; color:var(--ink-3); }
.sw .gchip:hover { border-color:var(--accent); color:var(--accent); }
.sw .gchip.on:hover { color:#fff; }
.sw .cloud { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sw .tag-add { display:inline-flex; align-items:center; gap:6px; }
.sw .tag-add input { background:transparent; border:1px dashed var(--line-2); color:var(--ink); font-size:14px; padding:8px 12px; outline:none; min-width:150px; }
.sw .tag-add input:focus { border-color:var(--accent); border-style:solid; }
.sw .tadd { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:8px 12px; }
.sw .tadd:hover { border-color:var(--accent); color:var(--accent); }
.sw .field-label .hear-cue { text-transform:none; letter-spacing:0; color:var(--ink-3); font-family:var(--sans); font-size:12px; font-style:italic; }
.sw .tagc { display:inline-flex; align-items:center; gap:9px; background:var(--panel); border:1px solid var(--line); color:var(--ink); font-size:14px; padding:8px 13px; }
.sw .tagc .x { color:var(--ink-3); font-size:15px; line-height:1; background:transparent; border:0; padding:0; }
.sw .tagc .x:hover { color:var(--accent); }
.sw .tagc.sugg { background:transparent; border-style:dashed; color:var(--ink-2); cursor:pointer; }
.sw .tagc.sugg:hover { border-color:var(--accent); color:var(--ink); }
.sw .tagc.sugg .p { color:var(--accent); font-weight:700; }
.sw .empty-hint { color:var(--ink-3); font-size:13px; font-style:italic; }

/* ── Lyrics (manuscript) ───────────────────────────────────────────────── */
.sw .manuscript { display:flex; flex-direction:column; gap:2px; }
.sw .stanza { position:relative; padding:16px 18px 16px 20px; border:1px solid transparent; transition:background .12s,border-color .12s; }
.sw .stanza.kept { cursor:pointer; }
.sw .stanza.kept:hover { background:var(--panel); }
.sw .stanza.active { background:var(--panel); border-color:var(--line); }
.sw .stanza.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
.sw .stanza-head { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.sw .stanza-head .rm { margin-left:auto; color:var(--ink-3); background:transparent; border:0; font-size:16px; line-height:1; padding:2px 6px; }
.sw .stanza-head .rm:hover { color:var(--accent); }
.sw .writing-chip { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); padding:2px 7px; }

/* Song-structure scaffold: lay out the whole song as empty blocks to fill. */
.sw .structure-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.sw .struct-lead { font-size:13px; color:var(--ink-3); margin-right:4px; }
.sw [dir="rtl"] .struct-lead { margin-right:0; margin-left:4px; }
.sw .struct-chip { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; padding:5px 11px; cursor:pointer; transition:.12s; }
.sw .struct-chip:hover { color:var(--accent); border-color:var(--accent); }

/* Block controls: the loop a section owns, and freeze / duplicate / derive. */
.sw .stanza.frozen { border-color:var(--line); }
.sw .block-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:11px; }
.sw .blk-chords { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-2); }
.sw .blk-noloop { font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--ink-3); font-style:italic; }
.sw .blk-from { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; }
.sw .blk-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.sw [dir="rtl"] .blk-actions { margin-left:0; margin-right:auto; }
.sw .blk-btn { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:2px; padding:3px 9px; cursor:pointer; transition:color .12s,border-color .12s; }
.sw .blk-btn:hover { color:var(--accent); border-color:var(--accent); }
.sw .blk-badge { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:transparent; border:1px solid var(--accent); border-radius:2px; padding:3px 9px; cursor:pointer; }

/* Vocal-range strip + wizard */
.sw .range-strip { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.sw .rng-label { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.sw .rng-val { font-family:var(--mono); font-size:13px; color:var(--ink); letter-spacing:.03em; }
.sw .rng-find { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:2px; padding:3px 10px; cursor:pointer; }
.sw .rng-find:hover { color:var(--accent); border-color:var(--accent); }
.sw .range-wizard { margin:0 0 16px; }
.sw .rw-card { border:1px solid var(--accent); background:var(--panel); padding:16px 18px; border-radius:3px; max-width:460px; }
.sw .rw-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.sw .rw-title { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.sw .rw-chip { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
.sw .rw-prompt { font-size:15px; color:var(--ink); margin:0 0 12px; }
.sw .rw-listen { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); }
.sw .rw-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); animation:rw-pulse 1s ease-in-out infinite; }
.sw .rw-hold { height:5px; background:var(--line); border-radius:3px; overflow:hidden; margin:11px 0 5px; }
.sw .rw-hold-fill { display:block; height:100%; width:0; background:var(--accent); transition:width .12s linear; }
@keyframes rw-pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce) { .sw .rw-dot { animation:none; } }
.sw .rw-live { font-family:var(--mono); font-size:16px; color:var(--accent); margin-left:auto; min-width:44px; }
.sw [dir="rtl"] .rw-live { margin-left:0; margin-right:auto; }
.sw .rw-heard { font-size:15px; color:var(--ink); margin:0 0 12px; }
.sw .rw-note { font-family:var(--mono); font-size:20px; color:var(--accent); }
.sw .rw-err { font-size:13px; color:var(--accent); margin:0 0 12px; }
.sw .rw-actions { display:flex; gap:8px; }
.sw .rw-btn { font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:1px solid var(--line); border-radius:2px; padding:6px 14px; cursor:pointer; }
.sw .rw-btn:hover { color:var(--ink); border-color:var(--ink-2); }
.sw .rw-btn.primary { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.sw .rw-btn.ghost { color:var(--ink-3); }
.sw .lines { display:flex; flex-direction:column; gap:5px; }
.sw .line { display:flex; align-items:baseline; gap:14px; }
.sw .line .n { font-family:var(--mono); font-size:11px; color:var(--ink-3); width:14px; text-align:right; flex:none; }
.sw .line .t { flex:1; font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.4; color:var(--ink); letter-spacing:-.01em; background:transparent; border:1px solid transparent; padding:2px 6px; outline:none; min-width:0; }
.sw .line .t:hover { border-color:var(--line); }
.sw .line .t:focus { border-color:var(--accent); background:var(--panel-2); }
.sw .line .lrm { color:var(--ink-3); background:transparent; border:0; font-size:15px; opacity:0; padding:0 4px; }
.sw .line:hover .lrm { opacity:1; }
.sw .line .lrm:hover { color:var(--accent); }
.sw .empty-lines { padding:6px 0 2px; color:var(--ink-3); font-family:var(--sans); font-style:italic; font-size:16px; }
/* The "write a line yourself" row — dim + invitational until you type in it. */
.sw .line.blank .n { color:var(--line-2); }
.sw .line.blank .t { font-weight:600; color:var(--ink); }
.sw .line.blank .t::placeholder { color:var(--ink-3); font-weight:500; font-style:italic; opacity:1; }
.sw .line.blank .t:not(:focus) { border-bottom:1px dashed var(--line); border-radius:0; }
.sw .line.blank:hover .t:not(:focus) { border-bottom-color:var(--ink-3); }
.sw .cowriter { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.sw .move-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sw .primary { background:var(--accent); color:#fff; border:0; font-family:var(--display); font-size:15px; letter-spacing:.04em; text-transform:uppercase; padding:10px 17px; transition:background .12s; }
.sw .primary:hover { background:var(--accent-2); }
.sw .primary:disabled { opacity:.5; }
.sw .tone { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:14px; letter-spacing:.03em; text-transform:uppercase; padding:8px 13px; transition:.12s; }
.sw .tone:hover { border-color:var(--accent); color:var(--accent); }
.sw .tone.on { border-color:var(--accent); color:#fff; background:var(--accent); }
.sw .move-status { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.sw .options { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.sw .opt { background:var(--panel); border:1px solid var(--line); padding:15px 16px; display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:end; transition:border-color .12s; }
.sw .opt:hover { border-color:var(--line-2); }
.sw .opt .otext { font-family:var(--sans); font-weight:600; font-size:19px; line-height:1.35; color:var(--ink); grid-column:1 / -1; background:transparent; border:0; resize:none; width:100%; outline:none; }
.sw .opt .why { font-size:13px; color:var(--ink-2); display:flex; align-items:baseline; gap:8px; }
.sw .opt .why b { color:var(--accent); font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.sw .badge { display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; }
.sw .badge.perfect, .sw .badge.rich { background:var(--perfect-bg); color:var(--perfect-fg); }
.sw .badge.near, .sw .badge.assonance { background:var(--near-bg); color:var(--near-fg); }
.sw .badge.none, .sw .badge.grammatical { background:rgba(226,58,37,.14); color:var(--accent-ink); }
.sw .badge svg { width:11px; height:11px; }
.sw .keep { align-self:end; border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:var(--display); font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:9px 16px; white-space:nowrap; transition:.12s; }
.sw .keep:hover { background:var(--accent); color:#fff; }

/* ── Tune ──────────────────────────────────────────────────────────────── */
.sw .instrument { background:var(--panel); border:1px solid var(--line); padding:4px 22px; }
.sw .izone { padding:22px 0; border-top:1px solid var(--line); }
.sw .izone:first-child { border-top:0; }
.sw .ihead { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sw .ihint { font-size:12.5px; color:var(--ink-3); font-style:italic; }
/* The genre chosen in Ideas, shown as read-only context on Tune (never re-picked). */
.sw .genre-ctx { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-2); }
.sw .genre-ctx b { color:var(--accent); font-weight:600; }
.sw .genre-ctx .muted { color:var(--ink-3); font-style:italic; letter-spacing:0; }
.sw .inst-top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sw .play { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--bg); border:0; font-family:var(--display); font-size:15px; letter-spacing:.04em; text-transform:uppercase; padding:11px 20px 11px 17px; transition:.12s; }
.sw .play svg { width:13px; height:13px; }
.sw .play:hover { background:var(--accent); color:#fff; }
.sw .tempo { display:flex; align-items:center; gap:10px; font-size:12px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); }
.sw .tempo input { width:100px; accent-color:var(--accent); }
.sw .tempo .bpm { color:var(--ink-2); }
.sw .stat { display:flex; flex-direction:column; gap:2px; }
.sw .stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.sw .stat .v { font-family:var(--mono); font-size:14px; color:var(--ink); }
.sw .stat .v.key { font-family:var(--display); font-size:18px; }
.sw .stat .vr { display:flex; align-items:center; gap:7px; }
/* Tiny inline "hear this" button on the beat / sound stats — audition just that
   element without pressing play. */
.sw .saud { flex:none; width:22px; height:22px; border:1px solid var(--line-2); background:transparent; color:var(--accent); font-size:10px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:.12s; }
.sw .saud:hover { border-color:var(--accent); background:var(--accent); color:var(--panel); }
.sw .setkey { border:0; background:transparent; color:var(--accent); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; text-decoration:underline; text-underline-offset:3px; padding:0; }
.sw .chords { margin-top:16px; }
/* The loop as a bar chart: 4 measures a line, chords placed where they occur. */
.sw .bars { display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-right:none; border-bottom:none; }
.sw .bar { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:66px; padding:12px 8px 8px; background:var(--panel-2); border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); cursor:pointer; transition:.12s; }
.sw .bar:hover { background:var(--panel); }
.sw .bar .chsym { font-family:var(--display); font-size:20px; letter-spacing:.02em; line-height:1.05; }
.sw .bar .chroman { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-3); }
.sw .bar .bar-num { position:absolute; top:4px; left:6px; font-family:var(--mono); font-size:9px; color:var(--ink-3); opacity:.55; }
/* A held bar — the same chord still ringing; dimmer, with a continuation slash. */
.sw .bar.held { background:var(--panel); }
.sw .bar.held .bar-hold { font-family:var(--display); font-size:22px; color:var(--ink-3); opacity:.3; }
.sw .bar.sel { box-shadow:inset 0 0 0 2px var(--accent); z-index:1; }
.sw .bar.playing { background:var(--accent); }
.sw .bar.playing .chsym, .sw .bar.playing .chroman, .sw .bar.playing .bar-num, .sw .bar.playing .bar-hold { color:var(--accent-ink); }
.sw .bars .chadd { min-height:66px; border:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line); margin:0; }
/* Chord pills (legacy, still used by other chord surfaces): tap to hear. */
.sw .chord { display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink); padding:9px 18px 7px; min-width:70px; cursor:pointer; transition:.12s; }
.sw .chord:hover { border-color:var(--line); }
.sw .chord .chsym { font-family:var(--display); font-size:22px; letter-spacing:.02em; line-height:1.05; }
.sw .chord .chroman { font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); }
.sw .chord.sel { border-color:var(--accent); }
.sw .chord.playing { border-color:var(--accent); background:var(--accent); }
.sw .chord.playing .chsym, .sw .chord.playing .chroman { color:var(--accent-ink); }
/* The one editor for the selected chord — spelled out, its own row under the strip. */
.sw .ch-editor { flex-basis:100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:6px; padding-top:12px; border-top:1px solid var(--line-2); }
.sw .ch-ed-for { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.sw .ch-ed-for b { color:var(--ink); }
.sw .ch-ctl { border:1px solid var(--line-2); background:transparent; color:var(--ink); font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; padding:6px 11px; cursor:pointer; transition:.12s; }
.sw .ch-ctl:hover { border-color:var(--accent); color:var(--accent); }
.sw .ch-ctl.ch-remove:hover { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }
.sw .ch-hold { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.sw .ch-hold .ch-step { padding:2px 8px; font-size:13px; line-height:1; }
.sw .ch-holdn { min-width:3.6em; text-align:center; color:var(--ink); }

/* ── Lead-sheet canvas — words with the progression floating over them ─────
   Shown in Progression AND Melody so the chords + lyrics are always the frame of
   reference. Chords sit above the word each change lands on (spread evenly across
   the line — a scaffold, not exact per-syllable placement). */
.sw .song-canvas { margin-top:20px; border-top:1px solid var(--line); padding-top:18px; }
.sw .song-canvas:empty { display:none; }
.sw .cv-empty { font-size:13px; color:var(--ink-3); font-style:italic; margin:0; }
.sw .cv-sec { margin:16px 0 12px; }
.sw .cv-sec:first-child { margin-top:0; }
.sw .cv-line { font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.25; color:var(--ink); margin-bottom:14px; }
.sw .cv-w { display:inline-block; position:relative; padding-top:1.5em; }
.sw .cv-c { position:absolute; top:0; left:0; font-family:var(--mono); font-weight:400; font-size:12.5px; letter-spacing:.02em; color:var(--accent); white-space:nowrap; border:none; background:transparent; padding:0; cursor:pointer; }
.sw .cv-c:hover { text-decoration:underline; }
.sw .cv-hint { margin:14px 0 0; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.sw .cv-bars { display:flex; gap:8px; flex-wrap:wrap; }
.sw .cv-bar { font-family:var(--display); font-size:18px; letter-spacing:.02em; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line-2); padding:8px 16px; }
/* The Play button factored into the lead sheet — appears in every view that shows it. */
.sw .ls-play { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:9px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); cursor:pointer; transition:.12s; }
.sw .ls-play:hover { border-color:var(--accent); color:var(--accent); }
.sw .ls-play-sub { color:var(--ink-3); text-transform:none; letter-spacing:0; }
/* The lead sheet's measure row: the progression in bars, chords placed where they occur. */
.sw .cv-bar-row { display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-left:1px solid var(--line); margin:0 0 10px; }
.sw .lb-bar { flex:1 1 64px; min-width:64px; display:flex; align-items:center; justify-content:center; min-height:40px; padding:6px 8px; background:var(--panel-2); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.sw .lb-bar.held { background:var(--panel); }
.sw .lb-c { font-family:var(--display); font-size:17px; letter-spacing:.02em; color:var(--ink); border:none; background:transparent; padding:0; cursor:pointer; }
.sw .lb-c:hover { color:var(--accent); }
.sw .lb-hold { font-family:var(--display); font-size:17px; color:var(--ink-3); opacity:.3; }
.sw .drumtoggle { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding:7px 12px; }
.sw .drumtoggle[aria-pressed="false"] { opacity:.55; }
.sw .strum-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 2px; }
.sw .strum-picker { display:flex; gap:8px; flex-wrap:wrap; }
.sw .strum-chip { border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink-2); font-family:var(--mono); font-size:11.5px; padding:7px 12px; cursor:pointer; transition:border-color .12s, color .12s; }
.sw .strum-chip:hover { border-color:var(--accent); color:var(--ink); }
.sw .strum-chip.active { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }
.sw .chadd { align-self:center; border:1px dashed var(--line-2); background:transparent; color:var(--ink-3); cursor:pointer; font-size:18px; line-height:1; padding:8px 12px; }
.sw .chadd:hover { border-color:var(--accent); color:var(--accent); }

/* Transpose: shift the whole song up/down a semitone. */
.sw .transpose { display:inline-flex; gap:2px; margin-left:6px; vertical-align:middle; }
.sw .tr-btn { font-size:9px; line-height:1; color:var(--ink-3); background:transparent; border:1px solid var(--line-2); border-radius:2px; padding:2px 5px; cursor:pointer; }
.sw .tr-btn:hover { color:var(--accent); border-color:var(--accent); }
.sw .key-select { font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; padding:3px 6px; margin-left:4px; }
.sw .key-move { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-3); margin-left:6px; cursor:pointer; }
.sw .key-move input { accent-color:var(--accent); }
.sw .tk-retune { font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:.04em; }

/* Mode selector + the mode's diatonic chord palette. */
.sw .mode-row, .sw .mode-palette-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.sw .mode-select { font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; padding:5px 8px; }
.sw .mode-why { font-size:12px; color:var(--ink-3); flex:1; }
.sw .mode-palette { display:flex; flex-wrap:wrap; gap:6px; }
.sw .pal-chip { font-family:var(--display); font-size:14px; color:var(--ink-2); background:transparent; border:1px dashed var(--line-2); border-radius:2px; padding:4px 10px; cursor:pointer; transition:.12s; }
.sw .pal-chip:hover { color:var(--accent); border-color:var(--accent); border-style:solid; }

/* "Refine the sound": the tweak knobs, collapsed so the screen lands on a ready
   backing track. Open it to shape strum/bass/tone/mode/tabs. */
.sw .refine { margin:16px 0 4px; border-top:1px solid var(--line); }
.sw .refine > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:12px 0 2px; transition:color .12s; }
.sw .refine > summary::-webkit-details-marker { display:none; }
.sw .refine > summary::before { content:"▸"; font-size:10px; transition:transform .12s; }
.sw .refine[open] > summary::before { transform:rotate(90deg); }
.sw .refine > summary:hover { color:var(--ink); }
.sw .refine .refine-body { padding-top:4px; }
.sw .refine .strum-row:first-child { margin-top:6px; }

/* Guitar tabs: a fretboard box per chord (chords-db shapes). */
.sw .tab-row { display:flex; align-items:flex-start; gap:12px; margin-top:16px; }
.sw .tuning-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.sw .tuning-picker { display:flex; gap:6px; flex-wrap:wrap; }
.sw .tab-strip { display:flex; gap:12px; flex-wrap:wrap; }
.sw .chord-box { margin:0; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.sw .chord-box:hover figcaption { color:var(--accent); }
.sw .chord-box figcaption { font-family:var(--display); font-size:15px; color:var(--ink); letter-spacing:.02em; }
.sw .cd-svg { width:66px; height:82px; display:block; }
.sw .cd-none { width:66px; height:82px; display:grid; place-items:center; color:var(--ink-3); }
.sw .cd-fret, .sw .cd-str { stroke:var(--line-2); stroke-width:1; }
.sw .cd-dot { fill:var(--accent); }
.sw .cd-open { fill:none; stroke:var(--ink-2); stroke-width:1.3; }
.sw .cd-x { fill:var(--ink-3); font:9px var(--mono); }
.sw .cd-barre { stroke:var(--accent); stroke-width:8; stroke-linecap:round; opacity:.85; }
.sw .cd-basef { fill:var(--ink-3); font:8px var(--mono); }

/* Chord selector: pick a root × quality instead of typing a symbol. */
.sw .chord-picker { margin-top:12px; }
.sw .cp-card { border:1px solid var(--accent); background:var(--panel); padding:14px 16px; border-radius:3px; max-width:560px; }
.sw .cp-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sw .cp-title { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.sw .cp-preview { font-family:var(--display); font-size:22px; color:var(--accent); border:none; background:transparent; cursor:pointer; padding:0 4px; }
.sw .cp-preview:hover { text-decoration:underline; }
.sw .cp-x { margin-left:auto; border:none; background:transparent; color:var(--ink-3); font-size:18px; line-height:1; cursor:pointer; }
.sw [dir="rtl"] .cp-x { margin-left:0; margin-right:auto; }
.sw .cp-x:hover { color:var(--accent); }
.sw .cp-row { display:flex; flex-wrap:wrap; gap:6px; }
.sw .cp-roots { margin-bottom:10px; }
.sw .cp-root, .sw .cp-qual { font-family:var(--mono); background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink-2); cursor:pointer; transition:.12s; }
.sw .cp-root { font-size:13px; min-width:38px; padding:7px 0; text-align:center; }
.sw .cp-qual { font-size:11px; letter-spacing:.03em; padding:6px 11px; }
.sw .cp-root:hover, .sw .cp-qual:hover { border-color:var(--accent); color:var(--ink); }
.sw .cp-root.on, .sw .cp-qual.on { border-color:var(--accent); color:var(--accent-ink); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--accent); }
.sw .cp-subs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.sw .cp-subs-label { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:4px; }
.sw .cp-sub { display:inline-flex; align-items:baseline; gap:5px; font-family:var(--display); font-size:14px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; padding:5px 9px; cursor:pointer; transition:.12s; }
.sw .cp-sub:hover { border-color:var(--accent); color:var(--accent-ink); }
.sw .cp-sub-kind { font-family:var(--mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
/* Secondary dominant ("lead into next") — a highlighted craft move, not a plain sub. */
.sw .cp-lead .cp-subs-label { color:var(--accent); }
.sw .cp-seco { border-color:var(--accent); }
.sw .cp-seco:hover { background:var(--accent); color:var(--accent-ink); }
.sw .cp-seco:hover .cp-sub-kind { color:var(--accent-ink); }
.sw .mel-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sw .rec-mel { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:14px; letter-spacing:.03em; text-transform:uppercase; padding:9px 15px; }
.sw .rec-mel:hover { border-color:var(--rec); color:var(--rec); }
.sw .rec-mel .rdot { width:9px; height:9px; border-radius:999px; background:var(--rec); }
.sw .mels { margin-top:15px; display:flex; flex-direction:column; gap:8px; }
.sw .mel { display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--line); padding:12px 14px; transition:border-color .12s; }
.sw .mel.on { border-color:var(--accent); }
.sw .aud { flex:none; width:32px; height:32px; border:1px solid var(--line-2); background:transparent; color:var(--accent); display:inline-flex; align-items:center; justify-content:center; transition:.12s; }
.sw .aud:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.sw .aud svg { width:11px; height:11px; }
.sw .mel .mbody { flex:1; min-width:0; }
.sw .mel .mname { font-size:14.5px; font-weight:700; color:var(--ink); }
.sw .mel .opt-tuning { display:inline-block; margin-left:12px; font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:2px 7px; border-radius:2px; vertical-align:2px; }
.sw .mel .mwhy { font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.sw .mel .mwhy b { color:var(--accent); font-weight:700; }
.sw .mel .use { flex:none; border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; }
.sw .mel .use:hover { background:var(--accent); color:#fff; }
.sw .harm-cards { display:flex; flex-direction:column; gap:8px; }
.sw .hc { display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--line-2); padding:12px 14px; }
.sw .hc .hbody { flex:1; }
.sw .hc .hname { font-size:14.5px; font-weight:700; color:var(--ink); }
.sw .hc .hwhy { font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.sw .hc .add { flex:none; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; cursor:pointer; }
.sw .hc .add:hover { border-color:var(--accent); color:var(--accent); }
/* The chosen shape: a filled action + a lit card, so "which tune is mine" reads at a glance. */
.sw .hc .add.on { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); }
.sw .hc.chosen { border-color:var(--accent); background:linear-gradient(180deg, rgba(226,58,37,.06), rgba(226,58,37,0)), var(--panel-2); }
.sw .hc-actions { flex:none; display:flex; align-items:center; gap:8px; }
.sw .hc .hear { flex:none; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:7px 11px; cursor:pointer; }
.sw .hc .hear:hover { border-color:var(--accent); color:var(--accent); }
.sw .hc .chosen-tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-left:6px; }
.sw .tune-status { margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; min-height:1em; }
/* The integrated lead sheet: each line is the melody engraved on a staff ABOVE its
   chords-and-words row, so the tune, the harmony, and the lyric read as one thing.
   VexFlow draws in the inherited --ink (set on the container), on a paper panel. */
.sw .mel-staves { display:flex; flex-direction:column; gap:8px; margin-top:18px; }
.sw .mel-staves:empty { display:none; }
.sw .lead-sheet .cv-sec { margin:12px 0 2px; }
.sw .lead-sheet .cv-sec:first-child { margin-top:0; }
.sw .ls-line { border:1px solid var(--line); background:var(--panel-2); }
.sw .ls-line .mel-stave-sheet { border-bottom:1px solid var(--line); }
.sw .ls-line .cv-line { padding:8px 12px; margin:0; }
.sw .mel-stave-sheet { color:var(--ink); overflow-x:auto; padding:2px 6px 4px; }
.sw .mel-stave-sheet svg { display:block; }
.sw .mel-stave-sheet .vf-text, .sw .mel-stave-sheet text { fill:var(--ink); }
/* Note heads are draggable (change pitch); the whole sheet shows the grab intent. */
.sw .mel-stave-sheet .vf-stavenote { cursor:grab; }
.sw .mel-stave-sheet .vf-stavenote.tappable { cursor:pointer; }
/* Highlight the WHOLE note — head AND stem (a stroked path) — not just the head. */
.sw .mel-stave-sheet .vf-stavenote:hover, .sw .mel-stave-sheet .vf-stavenote.sel { fill:var(--accent); }
.sw .mel-stave-sheet .vf-stavenote:hover path, .sw .mel-stave-sheet .vf-stavenote.sel path { fill:var(--accent); stroke:var(--accent); }
/* The note lit as the lead sheet PLAYS (and its lyric line) — a moving spotlight. */
.sw .mel-stave-sheet .vf-stavenote.playing { fill:var(--accent); }
.sw .mel-stave-sheet .vf-stavenote.playing path { fill:var(--accent); stroke:var(--accent); }
.sw .ls-words.playing, .sw .ls-line.playing .cv-t { color:var(--accent); }
.sw .mel-stave-sheet.dragging { cursor:grabbing; }
.sw .mel-stave-sheet.dragging .vf-stavenote { cursor:grabbing; }
.sw .mel-stave-sheet:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* "fits your genre" pill on a melody shape whose contour suits the chosen genre. */
.sw .hc .fits { display:inline-block; margin-left:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--line-2); padding:2px 6px; vertical-align:middle; }

/* The DAW handoff — take the sketch out as a .mid to finish in GarageBand. The
   producer pivot's payoff, so it reads as a deliberate exit, not a stray button. */
.sw .handoff { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; }
.sw .handoff .ho-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sw .handoff .ho-title { font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); }
.sw .handoff .ho-sub { font-size:12.5px; color:var(--ink-2); max-width:44ch; }
.sw .handoff .ho-btn { flex:none; display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff; border:0; font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; padding:11px 20px; cursor:pointer; transition:background .12s; }
.sw .handoff .ho-btn:hover { background:var(--accent-2); }

/* ── From-ideas seed (Lyrics carries the spark/genre/feelings forward) ──── */
.sw .from-ideas { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.sw .from-ideas .label { flex:none; }
.sw .from-ideas .spark { font-family:var(--display); font-size:17px; color:var(--ink); letter-spacing:.01em; }
.sw .from-ideas .ls-genre { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border:1px solid var(--line-2); padding:3px 8px; }

/* ── Record ────────────────────────────────────────────────────────────── */
.sw .lede { margin:-12px 0 22px; font-size:13.5px; color:var(--ink-2); }
.sw .leadsheet { background:var(--panel); border:1px solid var(--line); padding:28px 30px 30px; }
.sw .ls-top { display:flex; align-items:center; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.sw .ls-lines { display:flex; flex-direction:column; gap:14px; }
.sw .ls-line { position:relative; font-family:var(--sans); font-weight:600; font-size:22px; line-height:1.35; color:var(--ink); letter-spacing:-.01em; }
.sw .ls-line.empty { color:var(--ink-3); font-style:italic; font-weight:400; font-size:18px; }
/* Record lead sheet rows: the sung take drawn as a staff ABOVE the section's words. */
.sw .leadsheet .ls-line { border:1px solid var(--line-2); background:var(--panel-2); overflow:hidden; }
.sw .leadsheet .ls-line.empty { border:0; background:transparent; }
.sw .leadsheet .mel-stave-sheet { border-bottom:1px solid var(--line-2); }
.sw .leadsheet .ls-words { padding:9px 14px; font-family:var(--sans); font-weight:600; font-size:20px; line-height:1.35; color:var(--ink); }
.sw .transport { margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sw .rec-big { display:inline-flex; align-items:center; gap:10px; background:var(--rec); color:#fff; border:0; font-family:var(--display); font-size:17px; letter-spacing:.06em; text-transform:uppercase; padding:13px 24px 13px 19px; }
.sw .rec-big .rdot2 { width:12px; height:12px; border-radius:999px; background:#fff; }
.sw .rec-big.recording { background:#fff; color:var(--rec); }
.sw .rec-big.recording .rdot2 { background:var(--rec); animation:sw-pulse 1s steps(2) infinite; }
@keyframes sw-pulse { 50% { opacity:.2; } }
.sw .play.ghosted { background:transparent; color:var(--ink-2); border:1px solid var(--line-2); }
.sw .play.ghosted:hover { border-color:var(--accent); color:var(--accent); background:transparent; }
.sw .countin { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.sw .takes { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.sw .take { display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--line); padding:12px 16px; flex-wrap:wrap; }
.sw .take .tk-name { font-family:var(--mono); font-size:12px; color:var(--ink); text-transform:uppercase; letter-spacing:.05em; }
.sw .take .tk-time { font-family:var(--mono); font-size:12px; color:var(--ink-3); flex:1; }
.sw .take .kt { border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; }
.sw .take .kt.on { background:var(--accent); color:#fff; }
.sw .take .redo { border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 13px; }
.sw .take-note { margin-top:16px; font-size:12.5px; color:var(--ink-3); font-style:italic; }

/* Record as melody partner — what you sang + where to take it */
.sw .melody-hints:empty { display:none; }
.sw .melody-hints { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.sw .mh-head { font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
.sw .mh-status { font-family:var(--mono); font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.sw .mh-heard { font-size:13.5px; color:var(--ink-2); margin-bottom:12px; }
.sw .mh-heard.dim { color:var(--ink-3); font-style:italic; }
/* Primary CTA: put the sung take on the Melody staff as editable notation. */
.sw .mh-tostaff { display:inline-block; margin-bottom:14px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-family:var(--display); font-size:14px; letter-spacing:.04em; text-transform:uppercase; padding:9px 17px; transition:.12s; }
.sw .mh-tostaff:hover { background:var(--accent-2); border-color:var(--accent-2); }
.sw .mh-heard .mh-notes { font-family:var(--mono); font-size:14px; color:var(--accent-ink); letter-spacing:.06em; }
.sw .mh-cards { display:flex; flex-direction:column; gap:8px; }
.sw .mh-card { background:var(--panel-2); border:1px solid var(--line-2); border-left:3px solid var(--accent); padding:12px 14px; }
.sw .mh-card .mh-top { display:flex; align-items:center; gap:8px; }
.sw .mh-card .mh-name { font-size:14.5px; font-weight:700; color:var(--ink); }
.sw .mh-card .fits { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); border:1px solid var(--line-2); padding:2px 6px; }
.sw .mh-card .mh-why { font-size:12.5px; color:var(--ink-2); margin:5px 0 10px; line-height:1.5; }
.sw .mh-card .mh-hear { border:1px solid var(--accent); background:transparent; color:var(--accent); font-family:var(--display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:7px 15px; transition:.12s; }
.sw .mh-card .mh-hear:hover { background:var(--accent); color:#fff; }

@media (max-width:560px){
  .sw { padding-left:16px; padding-right:16px; }
  .sw .song-title { font-size:40px; }
  .sw .step-goal { font-size:19px; }
  .sw .opt { grid-template-columns:1fr; }
  .sw .keep { justify-self:start; }
  .sw .leadsheet { padding:22px 20px; }
}

/* Heard from your recordings (songs/_heard): Studio's hearing of the writer's takes, one calm row per section. */
.sw .heard { border:1px solid var(--line-2); background:var(--panel-2); padding:18px 20px; margin-bottom:26px; }
.sw .heard-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.sw .heard-head audio { width:min(100%, 360px); }
.sw .heard-scroll { overflow-x:auto; }
.sw .heard-table { width:100%; border-collapse:collapse; font-size:14px; }
.sw .heard-table th, .sw .heard-table td { text-align:start; padding:9px 10px; border-top:1px solid var(--line-2); vertical-align:middle; white-space:nowrap; }
.sw .heard-table thead th { border-top:0; font-family:var(--display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:400; }
.sw .heard-table tbody th { font-family:var(--display); font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); font-weight:400; }
.sw .heard-table .hval { font-family:var(--mono); color:var(--ink); }
.sw .heard-table .hstrum { font-family:var(--mono); letter-spacing:.08em; color:var(--ink); }
.sw .heard-table .hstrum b { font-size:1.15em; }
.sw .hdot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-inline-end:6px; vertical-align:middle; background:var(--ink-2); }
.sw .hdot.you { background:#5FCBB0; } .sw .hdot.library { background:#E5B15A; } .sw .hdot.guess { background:var(--accent); }
.sw .heard-legend { margin:12px 0 0; font-size:12.5px; color:var(--ink-2); }
.sw .heard-legend .hdot { margin-inline:10px 4px; }
.sw .heard-empty { font-size:13px; color:var(--ink-2); font-style:italic; margin:0 0 20px; }
.sw .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }