/* B6 LOCAL REFINEMENT (2026-10-24) — styles of the elements this pass adds or re-weighs, in BOTH interface modes (own file; app.css stays
   the Classic baseline). Create: the six-slot empty state · Music Model groups · Library: action hierarchy, Set context. */

/* ---- Create: before the first Set, what one request produces (4 interpretations + 2 HTC Extreme, C-69) */
.set-preview { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr) repeat(2, 1fr); gap: var(--s-2); }
.set-slot { display: grid; gap: 2px; align-content: start; min-height: 88px; padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-2); border-radius: 12px; }
.set-slot-n { font: 600 var(--t-2xs) var(--mono); letter-spacing: .08em; color: var(--muted); }
.set-slot b { font-weight: 600; color: var(--text); }
.set-slot small { color: var(--muted); font-size: 12.5px; }
.set-slot[data-kind="extreme"] { border-color: color-mix(in srgb, var(--plum, var(--rose)) 45%, var(--line-2)); }
.set-slot[data-kind="extreme"] b { color: var(--plum, var(--rose)); }
.set-slot[data-kind="extreme"]:nth-child(5) { margin-left: var(--s-3); }
@media (max-width: 1100px) { .set-preview { grid-template-columns: repeat(2, 1fr); } .set-slot[data-kind="extreme"]:nth-child(5) { margin-left: 0; } }
@media (max-width: 640px) { .set-slot { min-height: 0; padding: var(--s-2) var(--s-3); } }
.step-head .set-library { margin-left: auto; }
/* the results scrolled into view after a generation stop below the sticky app bar */
.create .ideas { scroll-margin-top: calc(var(--appbar) + var(--s-4)); }
@media (max-width: 640px) { .ideas > .step-head { flex-wrap: wrap; } .ideas > .step-head h2 { flex: 1 0 100%; } }

/* ---- app bar: the open-project link leads TO Studio; in Studio the page itself names the project (the squeezed chip said only "M1X … · r") */
html[data-route="studio"] .topbar .app-project { display: none; }
.topbar .app-project b { max-width: 18ch; }
/* the bar grew with B3–B5 (Catalogue, feedback, account): from 1101 to 1599 px its 32 px gaps pushed the account button off-screen at 1280
   (measured: 32 px overflow) and at 1440 with a project open; tighter gaps there — the deck keeps its fixed layout (C-168) */
@media (min-width: 1101px) and (max-width: 1599px) { .topbar { gap: var(--s-4); } .tabs a { padding: 0 10px; } .tabs a[aria-current="page"]::after { left: 10px; right: 10px; } }
/* below 1600 px the bar is full (tabs, mode switch, deck, feedback, account): the chip keeps the title only and may shrink, never overflow */
@media (max-width: 1599px) { .topbar .app-project small { display: none; } .topbar .app-project b { min-width: 0; } }
/* narrower laptops: no room for a readable title (it shrank to "G…") — the Studio tab leads to the open project; below 1280 the deck's
   loudness / limiter readouts step aside as they do on phones (meters stay), so the account button stays on screen */
@media (max-width: 1365px) { .topbar .app-project { display: none; } }
@media (min-width: 641px) and (max-width: 1279px) { .topbar { gap: var(--s-3); } .deck .meter b, .deck .meter em { display: none; } .deck .meter { grid-template-columns: 4px 4px; } }
/* tablets (641–1179 px, measured overflow 11–142 px): the main navigation and the Classic / Next switch move to the bottom bar, exactly
   as on phones (app.css / ui-switch.css ≤ 640 px); the views keep their wide layouts; the catalogue stays one tap away in the Library rail */
@media (min-width: 641px) and (max-width: 1179px) {
  .topbar .tabs, .topbar .ui-switch { display: none; }
  .deck { margin-left: auto; }
  main { padding-bottom: 96px; }
  #toast { bottom: 76px; }
  .bottombar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); background: rgba(12, 14, 16, .97); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .bottombar a { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; font: 600 11px var(--sans); color: var(--muted); text-decoration: none; }
  .bottombar a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bottombar a[aria-current="page"] { color: var(--text); } .bottombar a[aria-current="page"] svg { stroke: var(--cyan); }
  .bottombar:has(.ui-switch) { grid-template-columns: repeat(4, minmax(0, 1fr)) 72px; }
  .bottombar .ui-switch.compact { display: grid; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
  .bottombar .ui-switch.compact button { display: grid; justify-items: center; gap: 2px; min-height: 40px; padding: 6px 2px; font: 600 10.5px var(--sans); color: var(--muted); }
  .bottombar .ui-switch.compact svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ---- Library: a Set reads as one request (prompt, songs, date, model said once in its head) */
.set-head .set-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); }
.set-head .set-title > b { min-width: 0; overflow-wrap: anywhere; }
.set-head .set-sub { color: var(--muted); font-size: 12.5px; }
.set-head .model-badge { font-size: 11.5px; }
/* one accent per song row — "Open in Studio"; Feedback stays one quiet action among the others (Studio keeps its accented entry) */
.gen .btn.fb-song { border-color: transparent; color: var(--text-2); }
.gen .btn.fb-song:hover { border-color: var(--line-2); color: var(--text); }
/* Create cards: the same quiet action as an icon (named for assistive tech), beside the star — "Open in Studio" stays the one accent */
.world .btn.fb-card { width: var(--control-s, 30px); padding: 0; justify-content: center; border-color: transparent; color: var(--text-2); }
.world .btn.fb-card:hover { border-color: var(--line-2); color: var(--text); }
@media (max-width: 640px) { .world .btn.fb-card { width: var(--touch, 40px); min-height: var(--touch, 40px); } }
.lib-empty { display: grid; justify-items: center; gap: var(--s-3); max-width: 560px; margin: var(--s-6) auto; border: 1px dashed var(--line-2); border-radius: 14px; }
.lib-empty h2 { margin: 0; font: 600 var(--t-xl) var(--display); color: var(--text); }
.lib-empty p { margin: 0; line-height: 1.55; }
/* 901–1240 px: the five row actions took the third column and squeezed the facts ("E♭ do…", "4:07…") and the map — actions go under the
   song instead (wider screens and ≤ 900 px keep their app.css layouts) */
@media (min-width: 901px) and (max-width: 1240px) {
  .gen { grid-template-columns: calc(250px - var(--depth) * 28px) minmax(0, 1fr); grid-template-areas: "id preview" "id facts" "meta meta" "actions actions" "more more" "ver ver"; }
  .gen .gcard-actions { justify-content: start; flex-wrap: wrap; }
}

/* ---- Studio with no project: continue the song changed last */
.studio-empty-last { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
/* phones: the Sonic Map legend repeats on every map — the list starts sooner without it */
@media (max-width: 640px) { .gens-head { display: none; } }