/* HTC UI NEXT 0.1 — "warm studio" presentation layer (experimental; Classic = app.css + tokens.css stays the baseline).
   EVERY selector here starts with [data-ui="next"] (only <html> carries it; tests/ui-next.test.js enforces the scope), so
   Classic never matches a rule of this file. Same DOM, same components, same project state: this file restyles; the
   views add Next-only interaction (Studio context menu) behind isNext().
   Direction (critical reading of the Google Stitch reference, docs/UI_NEXT.md): warm obsidian surfaces, ONE amber accent
   for play / primary / playhead / focus / selection, plum for generative "Extreme" ideas, teal reserved for signal
   (meters). Space Grotesk for titles, Inter for controls and numbers (tabular), when installed — offline-first: no web
   fonts are fetched; the stacks fall back to Segoe UI Variable. Musical colours (part roles, section directions) are
   unchanged: they carry meaning (Sonic Map, map, mixer) and must read the same in both interfaces.
   Rejected from the mockups: fabricated telemetry (DSP %, latency, "trained on…"), fake STABLE labels, glow, gradients
   on controls, monospace walls, text under 11 px. */
[data-ui="next"] {
  --bg: #0e0f12; --bg-2: #121317; --panel: #16181c; --panel-2: #1c1e23; --panel-3: #262930;
  --line: #24262c; --line-2: #31343c; --line-soft: #1b1d21; --inset: #0a0b0d;
  --text: #f4f1ea; --text-2: #cfc8bb; --muted: #9b9387; --faint: #6d675e;
  --cyan: #f5a524; --cyan-dim: #a06c1d; --cyan-ink: #1d1203; --teal: #2dd4bf; --violet: #b49ad8; --amber: #ef8a3a; --rose: #f07a92; --green: #8ad49a;
  --plum: #c792dc;
  --cyan-wash: rgba(245, 165, 36, .09); --cyan-wash-2: rgba(245, 165, 36, .18);
  --ring: 0 0 0 3px rgba(245, 165, 36, .22);
  --radius-s: 4px; --radius: 7px; --radius-l: 12px;
  --display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", "Inter Variable", "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: var(--sans); /* numbers are tabular Inter, not a monospace wall */
  --t-2xs: 11px; --t-xs: 11.5px; --t-s: 12.5px;
  --status-candidate: var(--amber);
}
[data-ui="next"] body { font-variant-numeric: tabular-nums; }
/* ---- primitives */
[data-ui="next"] h1 { font-weight: 600; letter-spacing: -.025em; }
[data-ui="next"] h2 { font: 600 15px/1.3 var(--display); letter-spacing: -.005em; text-transform: none; color: var(--text); }
[data-ui="next"] h3 { font-weight: 600; letter-spacing: -.015em; }
[data-ui="next"] h4, [data-ui="next"] .eyebrow, [data-ui="next"] .field, [data-ui="next"] .ro dt, [data-ui="next"] .insp-tag, [data-ui="next"] .reading-label { letter-spacing: .08em; }
[data-ui="next"] .btn { font-family: var(--sans); border-radius: var(--radius); }
[data-ui="next"] .btn:hover { border-color: #43464f; }
[data-ui="next"] .btn.primary { color: var(--cyan-ink); }
[data-ui="next"] .btn.primary:hover { background: #f7b84d; border-color: #f7b84d; }
[data-ui="next"] .btn.on { color: #f7c46a; }
[data-ui="next"] .btn.danger { color: var(--rose); }
[data-ui="next"] select:hover, [data-ui="next"] input:hover { border-color: #43464f; }
[data-ui="next"] .chip { border-radius: var(--radius); }
[data-ui="next"] .fader-cap { border-color: #474a53; }
[data-ui="next"] .pv-play:hover { border-color: #474a53; }
[data-ui="next"] .busy::after { background: rgba(14, 15, 18, .6); }
[data-ui="next"] .report, [data-ui="next"] .ai-paste { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
[data-ui="next"] .knob-value, [data-ui="next"] .fader-value { font-weight: 500; }
/* ---- shell: provisional logo, amber navigation, warm deck */
[data-ui="next"] .topbar { background: rgba(14, 15, 18, .94); }
[data-ui="next"] .brand { gap: 8px; }
[data-ui="next"] .brand-logo { display: block; height: 22px; width: auto; }
[data-ui="next"] .brand-mark, [data-ui="next"] .brand-word { display: none; }
[data-ui="next"] .brand-ver { margin-left: 0; font: 600 12px var(--display); color: var(--muted); }
[data-ui="next"] .tabs a { font: 600 14px var(--display); letter-spacing: -.005em; }
[data-ui="next"] .lcd { border-radius: var(--radius); }
[data-ui="next"] .lcd span { letter-spacing: .02em; }
[data-ui="next"] .deck-play.on { box-shadow: none; }
[data-ui="next"] .bottombar { background: rgba(14, 15, 18, .97); }
[data-ui="next"] .bottombar a { font-family: var(--display); }
/* ---- Create: the idea as a writing surface, one amber Generate, interpretations as distinct cards */
[data-ui="next"] .prompt { background: var(--inset); border: 1px solid var(--line-2); border-radius: var(--radius-l); padding: 16px 18px 18px; font: 400 26px/1.3 var(--display); letter-spacing: -.015em; }
[data-ui="next"] .prompt:focus { border-color: var(--cyan-dim); box-shadow: var(--ring); }
[data-ui="next"] .console { border-radius: 14px; }
[data-ui="next"] .action-bar { border-top-color: var(--line); }
[data-ui="next"] .action-bar #generate { min-height: 48px; padding: 0 26px; font: 600 15.5px var(--display); letter-spacing: -.005em; border-radius: 10px; }
[data-ui="next"] .reading .chip.result { font-family: var(--display); }
[data-ui="next"] .reading .chip.result b { color: var(--cyan); }
[data-ui="next"] .worlds { gap: 14px; background: transparent; border: 0; border-radius: 0; }
[data-ui="next"] .worlds .world:nth-child(n) { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
[data-ui="next"] .worlds .world:nth-child(n):has(.preview.playing) { background: var(--panel-2); border-color: var(--cyan-dim); }
[data-ui="next"] .worlds-empty { border: 0; }
[data-ui="next"] .worlds .world-ghost:nth-child(n) { border: 1px dashed var(--line-2); border-radius: 14px; }
[data-ui="next"] .world .eyebrow { color: var(--cyan); }
[data-ui="next"] .world.extreme .eyebrow, [data-ui="next"] .extreme-head h2 { color: var(--plum); }
[data-ui="next"] .worlds-extreme { border: 0; }
[data-ui="next"] .worlds .world.extreme:nth-child(n) { border-color: color-mix(in srgb, var(--plum) 32%, var(--line)); }
[data-ui="next"] .world-id h3 { font-size: 24px; }
[data-ui="next"] .world .pv-plot { height: 120px; border-radius: 10px; }
[data-ui="next"] .world-summary { font-size: 14px; line-height: 1.5; }
[data-ui="next"] .axes dt { letter-spacing: .08em; font-size: 10.5px; }
[data-ui="next"] .differs-key::before, [data-ui="next"] .ro.differs dt::before { background: var(--cyan); }
[data-ui="next"] .set-badge { border-color: var(--cyan-dim); color: var(--cyan); }
[data-ui="next"] .set-badge.extreme { border-color: color-mix(in srgb, var(--plum) 60%, transparent); color: var(--plum); }
/* ---- Create · compare two interpretations (app/views/create.js, Next only): A = amber letter, B = light letter — a label,
   never a ranking. Maps share one bar scale; the table lists stated differences first, the same aspects folded. */
[data-ui="next"] .cmp-pick[aria-pressed="true"] { border-color: var(--cyan-dim); color: var(--cyan); background: var(--cyan-wash); }
[data-ui="next"] .worlds .world[data-pick]:nth-child(n) { border-color: var(--cyan-dim); }
[data-ui="next"] .worlds .world[data-pick="B"]:nth-child(n) { border-color: var(--text-2); }
[data-ui="next"] .compare { display: grid; gap: 18px; margin-top: 10px; padding: 20px 22px 22px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; min-width: 0; scroll-margin-top: 72px; }
[data-ui="next"] .compare[hidden] { display: none; }
[data-ui="next"] .cmp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; }
[data-ui="next"] .cmp-head .btn { margin-left: auto; }
[data-ui="next"] .cmp-hint { margin: 0; color: var(--text-2); font-size: 14px; }
[data-ui="next"] .cmp-hint:empty { display: none; }
[data-ui="next"] .compare h4 { margin: 0 0 8px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-ui="next"] .cmp-letter { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 13px var(--display); background: var(--cyan); color: var(--cyan-ink); flex: none; }
[data-ui="next"] [data-pick="B"] > .cmp-letter { background: var(--text-2); color: var(--bg); }
[data-ui="next"] .cmp-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-ui="next"] .cmp-who-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
[data-ui="next"] .cmp-who-item > div { min-width: 0; }
[data-ui="next"] .cmp-who-item h3 { margin: 2px 0; font-size: 20px; overflow-wrap: anywhere; }
[data-ui="next"] .cmp-who-item .eyebrow { color: var(--cyan); }
[data-ui="next"] .cmp-maps { margin: 0; display: grid; gap: 8px; min-width: 0; }
[data-ui="next"] .cmp-map-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0; }
[data-ui="next"] .cmp-map-track { min-width: 0; }
[data-ui="next"] .cmp-map-track .sm-plot { height: 84px; border-radius: 8px; }
[data-ui="next"] .cmp-map-meta { white-space: nowrap; min-width: 9ch; text-align: right; }
[data-ui="next"] .cmp-scale { margin: 0; }
[data-ui="next"] .cmp-form-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 6px; }
[data-ui="next"] .cmp-sections { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
[data-ui="next"] .cmp-sections li { padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 12.5px; color: var(--text-2); background: var(--bg-2); }
[data-ui="next"] .cmp-form.differs h4 { color: var(--cyan); }
[data-ui="next"] .cmp-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: start; }
[data-ui="next"] .cmp-diffs { min-width: 0; }
[data-ui="next"] .cmp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
[data-ui="next"] .cmp-table th, [data-ui="next"] .cmp-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
[data-ui="next"] .cmp-table thead th { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
[data-ui="next"] .cmp-table tbody th { font-weight: 500; color: var(--text); width: 34%; }
[data-ui="next"] .cmp-table tbody th small { display: block; font-size: 11px; color: var(--faint); font-weight: 400; }
[data-ui="next"] .cmp-table td { color: var(--text-2); }
[data-ui="next"] .cmp-same { margin-top: 10px; }
[data-ui="next"] .cmp-same summary { cursor: pointer; color: var(--muted); font-size: 13px; }
[data-ui="next"] .cmp-same .cmp-table { opacity: .8; }
[data-ui="next"] .cmp-parts { display: grid; gap: 10px; margin: 0; }
[data-ui="next"] .cmp-parts dt { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
[data-ui="next"] .cmp-parts dd { margin: 2px 0 0; font-size: 13.5px; color: var(--text-2); }
[data-ui="next"] .cmp-ab { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
[data-ui="next"] .cmp-ab p { margin: 0; max-width: 72ch; }
[data-ui="next"] .cmp-ab > .btn { justify-self: start; }
[data-ui="next"] .cmp-ab-switch .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- Studio */
[data-ui="next"] .studio-head h1 { font-size: 30px; }
[data-ui="next"] .srm-sec { border-radius: 6px 6px 0 0; }
[data-ui="next"] .srm-role { border-radius: 0 6px 6px 0; }
[data-ui="next"] .srm-cell.ctx-target, [data-ui="next"] .srm-role.ctx-target, [data-ui="next"] .srm-sec.ctx-target, [data-ui="next"] .sf-part.ctx-target { box-shadow: inset 0 0 0 2px var(--cyan); filter: none; }
[data-ui="next"] .tabbar button { font: 600 13px var(--display); letter-spacing: 0; text-transform: none; }
[data-ui="next"] .insp-head h3 { font-size: 21px; }
[data-ui="next"] .strip-mute[aria-pressed="true"] { color: #241000; }
[data-ui="next"] .ctx-hint { margin: 0; color: var(--faint); font-size: 12px; }
/* ---- Studio Versions · revision diff map (app/components/revision-diff.js): kind letters on the part × section grid */
[data-ui="next"] .rev-diff { display: grid; gap: 10px; margin: 12px 0; padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; min-width: 0; }
[data-ui="next"] .rd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-ui="next"] .rd-head b { font: 600 14px var(--display); color: var(--text); }
[data-ui="next"] .rd-form { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
[data-ui="next"] .rd-form b { color: var(--cyan); font-weight: 600; }
[data-ui="next"] .rd-lines { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; color: var(--text-2); }
[data-ui="next"] .rd-scroll { overflow-x: auto; min-width: 0; scrollbar-width: thin; }
[data-ui="next"] .rd-grid { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
[data-ui="next"] .rd-grid th { font-weight: 500; color: var(--muted); text-align: left; padding: 2px 6px; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
[data-ui="next"] .rd-grid tbody th { color: var(--text); position: sticky; left: 0; background: var(--panel-2); max-width: 14em; }
[data-ui="next"] .rd-grid tbody th small { color: var(--faint); }
[data-ui="next"] .rd-grid td { min-width: 30px; height: 24px; text-align: center; border-radius: 4px; background: var(--inset); color: var(--bg); font-weight: 700; }
[data-ui="next"] .rd-grid td[data-kind="notes"], [data-ui="next"] .rd-key [data-kind="notes"] i { background: var(--cyan); }
[data-ui="next"] .rd-grid td[data-kind="performance"], [data-ui="next"] .rd-key [data-kind="performance"] i { background: var(--violet); }
[data-ui="next"] .rd-grid td[data-kind="mute"], [data-ui="next"] .rd-key [data-kind="mute"] i { background: var(--muted); }
[data-ui="next"] .rd-grid td[data-kind="added"], [data-ui="next"] .rd-key [data-kind="added"] i { background: var(--green); }
[data-ui="next"] .rd-grid tr.removed th { text-decoration: line-through; color: var(--muted); }
[data-ui="next"] .rd-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
[data-ui="next"] .rd-key span { display: inline-flex; align-items: center; gap: 6px; }
[data-ui="next"] .rd-key i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font: 700 11px var(--sans); font-style: normal; color: var(--bg); }
/* ---- Studio section inspector · chord strip (app/components/chord-strip.js): spans as chips, other degrees with their reach */
[data-ui="next"] .chord-strip { display: grid; gap: 8px; min-width: 0; }
[data-ui="next"] .chord-chips { display: flex; flex-wrap: wrap; gap: 4px; }
[data-ui="next"] .chord-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: 600 13.5px var(--display); cursor: pointer; }
[data-ui="next"] .chord-chip small { font: 500 11px var(--sans); color: var(--faint); }
[data-ui="next"] .chord-chip:hover, [data-ui="next"] .chord-chip[aria-expanded="true"] { border-color: var(--cyan-dim); background: var(--cyan-wash); }
[data-ui="next"] .chord-chip.edited { border-style: dashed; }
[data-ui="next"] .chord-chooser { display: grid; gap: 2px; padding: 6px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 10px; }
[data-ui="next"] .chord-chooser[hidden] { display: none; }
[data-ui="next"] .chord-chooser-head { margin: 2px 6px 6px; }
[data-ui="next"] .chord-option { display: grid; gap: 2px; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; }
[data-ui="next"] .chord-option:hover:not(:disabled), [data-ui="next"] .chord-option:focus-visible { background: var(--panel-3); outline: none; }
[data-ui="next"] .chord-option b { font: 600 14px var(--display); }
[data-ui="next"] .chord-option .chord-reach { color: var(--text-2); font-size: 12px; line-height: 1.4; }
[data-ui="next"] .chord-option .chord-reach.pending { color: var(--faint); }
/* ---- Library: generation sets read as sessions */
[data-ui="next"] .set-head { margin-top: var(--s-5); padding: var(--s-3) var(--s-2); font-size: 13px; border-bottom-color: var(--line-2); }
[data-ui="next"] .set-head b { font: 600 15px var(--display); letter-spacing: -.005em; color: var(--text); margin-right: 4px; }
[data-ui="next"] .gen:hover, [data-ui="next"] .gen:has(.preview.playing) { background: var(--panel); }
/* ---- Studio context menu (app/components/context-menu.js): scope groups, truthful items, a preview of each change's reach */
[data-ui="next"] .ctx-menu { position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); max-height: min(78vh, 640px); overflow: auto; padding: 6px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--elev-2); scrollbar-width: thin; }
[data-ui="next"] .ctx-title { padding: 8px 10px 6px; display: grid; gap: 2px; }
[data-ui="next"] .ctx-title b { font: 600 15px var(--display); color: var(--text); }
[data-ui="next"] .ctx-title small { color: var(--muted); font-size: 12px; }
[data-ui="next"] .ctx-group { border-top: 1px solid var(--line); padding: 6px 0 4px; }
[data-ui="next"] .ctx-group-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 4px 10px 4px; }
[data-ui="next"] .ctx-group-head b { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
[data-ui="next"] .ctx-group[data-scope="role"] .ctx-group-head b { color: var(--violet); }
[data-ui="next"] .ctx-group[data-scope="section"] .ctx-group-head b { color: var(--teal); }
[data-ui="next"] .ctx-group-head span { font-size: 11.5px; color: var(--muted); text-align: right; }
[data-ui="next"] .ctx-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 8px; align-items: start; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: 500 13.5px var(--sans); }
[data-ui="next"] .ctx-item:hover:not(:disabled), [data-ui="next"] .ctx-item:focus-visible { background: var(--panel-3); outline: none; }
[data-ui="next"] .ctx-item:disabled { cursor: default; color: var(--muted); }
[data-ui="next"] .ctx-item i { font-style: normal; color: var(--faint); font-size: 12px; line-height: 1.6; text-align: center; }
[data-ui="next"] .ctx-item[data-kind="command"] i { color: var(--cyan); }
[data-ui="next"] .ctx-item.danger { color: var(--rose); }
[data-ui="next"] .ctx-item em { font-style: normal; font-size: 11px; color: var(--faint); white-space: nowrap; padding-top: 2px; }
[data-ui="next"] .ctx-item small { grid-column: 2 / -1; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4; }
[data-ui="next"] .ctx-item .ctx-reach { color: var(--text-2); }
[data-ui="next"] .ctx-item .ctx-reach.pending { color: var(--faint); }
[data-ui="next"] .ctx-foot { border-top: 1px solid var(--line); padding: 8px 10px 4px; color: var(--faint); font-size: 11.5px; }
@media (max-width: 640px) {
  [data-ui="next"] .prompt { font-size: 20px; padding: 12px 14px 14px; }
  [data-ui="next"] .world-id h3 { font-size: 20px; }
  [data-ui="next"] .studio-head h1 { font-size: var(--t-xl); }
  [data-ui="next"] .action-bar #generate { width: 100%; }
  [data-ui="next"] .compare { padding: 16px 14px 18px; }
  [data-ui="next"] .cmp-who, [data-ui="next"] .cmp-body { grid-template-columns: minmax(0, 1fr); }
  [data-ui="next"] .cmp-map-row { grid-template-columns: 24px minmax(0, 1fr); }
  [data-ui="next"] .cmp-map-meta { grid-column: 2; text-align: left; }
  [data-ui="next"] .cmp-map-track .sm-plot { height: 64px; }
  [data-ui="next"] .cmp-ab-switch .btn { flex: 1 1 0; min-height: var(--touch); }
  [data-ui="next"] .cmp-pick { min-height: var(--touch); }
  [data-ui="next"] .chord-chip, [data-ui="next"] .chord-option { min-height: var(--touch); }
  /* the menu becomes a bottom sheet on phones (thumb reach), above the bottom bar */
  [data-ui="next"] .ctx-menu { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 74vh; border-radius: 14px 14px 0 0; padding: 6px 8px calc(84px + env(safe-area-inset-bottom)); }
  [data-ui="next"] .ctx-item { min-height: var(--touch); padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { [data-ui="next"] .ctx-menu { animation: none; } }