/* ============================================================
   Nordic skin prototype — scandinavian-design directions
   Loaded AFTER web.css. Scoped to html[data-theme="nordic"].
   Variants: html[data-variant="quiet|editorial|utilitarian"]
   ============================================================ */

@font-face {
  font-family: "Inter Variable";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2200-22FF;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/assets/fonts/inter-cyrillic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F;
}

/* ── Shared nordic tokens ─────────────────────────────────── */

html[data-theme="nordic"] {
  --glass-page: #ffffff;
  --glass-ink: #000000;
  --glass-body: rgb(0 0 0 / 64%);
  --glass-label: rgb(0 0 0 / 50%);
  --glass-line: rgb(0 0 0 / 10%);
  --nordic-line-strong: rgb(0 0 0 / 18%);
  --nordic-hover: rgb(0 0 0 / 5%);
  --nordic-pressed: rgb(0 0 0 / 9%);
  --nordic-surface: #ffffff;
  --nordic-fill: rgb(0 0 0 / 4%);
  --nordic-scrim: rgb(0 0 0 / 44%);
  --nordic-ok: #1a7f37;
  --nordic-warn: #a06700;
  --nordic-error: #a32020;
  /* accent vars stay defined — they survive only as data marks
     (dna lamp spots, washes); chrome never uses them */
  --font-mono: "Inter Variable", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Variable", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ink-3: rgb(0 0 0 / 40%);
}

/* ── Shared flattening ────────────────────────────────────── */

html[data-theme="nordic"] .glass-panel,
html[data-theme="nordic"] .glass-panel-soft,
html[data-theme="nordic"] .glass-nested,
html[data-theme="nordic"] .vision-card.glass-nested,
html[data-theme="nordic"] .search-result.glass-panel-soft {
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme="nordic"] .glass-panel:hover,
html[data-theme="nordic"] .vision-card.glass-nested:hover,
html[data-theme="nordic"] .synth-variant:hover,
html[data-theme="nordic"] .stat:hover {
  transform: none;
  box-shadow: none;
}

html[data-theme="nordic"] .gate-overlay {
  background: var(--glass-page);
}

/* ── Ice Observatory shell → nordic ───────────────────────── */

html[data-theme="nordic"] body::before { display: none; } /* ice glow off */

html[data-theme="nordic"] .studio-layout {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html[data-theme="nordic"] aside.sidebar {
  border-right: 1px solid var(--glass-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Team-tool actions are <button>s: undo the global nordic button skin so
   they read exactly like the <a> nav items around them. */
html[data-theme="nordic"] button.nav-item {
  border: 0;
  background: transparent;
  color: var(--glass-body);
  font-size: 11px;
  font-weight: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme="nordic"] button.nav-item:hover:not(:disabled) {
  background: var(--nordic-hover);
}
html[data-theme="nordic"] button.nav-item:active:not(:disabled) {
  background: var(--nordic-pressed);
}

.drawer-close { display: none; }

/* Mobile off-canvas drawer: the flat desktop sidebar above is transparent,
   which left the drawer with no panel at all. Give it a real sheet. */
@media (max-width: 1023px) {
  html[data-theme="nordic"] aside.sidebar {
    padding-top: 24px;
    border-right: 0;
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    background: var(--nordic-surface);
    box-shadow: 0 0 0 1px var(--glass-line), 0 32px 80px -24px rgb(0 0 0 / 28%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html[data-theme="nordic"] aside.sidebar .brand-mark { margin-right: 64px; }
  html[data-theme="nordic"] .drawer-close {
    display: inline-grid;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
  }
  html[data-theme="nordic"] .sidebar-backdrop {
    background: rgb(0 0 0 / 22%);
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    animation: nordic-scrim-in 0.32s ease both;
  }
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group,
  html[data-theme="nordic"] aside.sidebar.is-open .sidebar-foot {
    animation: nordic-drawer-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group:nth-child(1) { animation-delay: 60ms; }
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group:nth-child(2) { animation-delay: 110ms; }
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group:nth-child(3) { animation-delay: 160ms; }
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group:nth-child(4) { animation-delay: 210ms; }
  html[data-theme="nordic"] aside.sidebar.is-open .sidebar-foot { animation-delay: 240ms; }
}

@keyframes nordic-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nordic-drawer-rise {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="nordic"] aside.sidebar { transition: none; }
  html[data-theme="nordic"] .sidebar-backdrop,
  html[data-theme="nordic"] aside.sidebar.is-open .side-nav > .nav-group,
  html[data-theme="nordic"] aside.sidebar.is-open .sidebar-foot { animation: none; }
}

html[data-theme="nordic"] .brand-mark { color: var(--glass-ink); }

html[data-theme="nordic"] .nav-item {
  border-radius: var(--radius-mini);
  color: var(--glass-body);
  transition: background-color 0.12s ease;
}
html[data-theme="nordic"] .nav-item:hover:not(.future) {
  background: var(--nordic-hover);
}
html[data-theme="nordic"] .nav-item.active {
  color: var(--glass-ink);
  background: var(--nordic-pressed);
  box-shadow: none;
}
html[data-theme="nordic"] .nav-item.active .nav-mark {
  background: var(--glass-ink);
}
html[data-theme="nordic"] .nav-item.future em {
  border-color: var(--glass-line);
  color: var(--glass-label);
}
html[data-theme="nordic"] .nav-item .nav-count {
  color: var(--glass-label);
}
html[data-theme="nordic"] .sidebar-foot {
  border-top-color: var(--glass-line);
  color: var(--glass-label);
}

html[data-theme="nordic"] .utility-header {
  background: var(--glass-page);
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="nordic"] .utility-title strong { color: var(--glass-ink); }
html[data-theme="nordic"] .eyebrow { color: var(--glass-label); }

html[data-theme="nordic"] .icon-button {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .utilities > .icon-button { border-radius: var(--radius-mini); }
html[data-theme="nordic"] .icon-button:hover:not(:disabled) { background: var(--nordic-hover); }

html[data-theme="nordic"] .language {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .language select {
  color: var(--glass-ink);
  border: 0;
  background: transparent;
  padding: 0 22px 0 12px;
  height: 100%;
  width: 100%;
}
html[data-theme="nordic"] .language .icon { color: var(--glass-label); }

/* utilities row: one height, one radius — K chip is the reference */
html[data-theme="nordic"] .utilities > * { border-radius: var(--radius-mini); }
html[data-theme="nordic"] .utilities .palette-trigger,
html[data-theme="nordic"] .utilities .quota-badge,
html[data-theme="nordic"] .utilities .role-badge,
html[data-theme="nordic"] .utilities .language {
  height: 36px;
  min-height: 36px;
}
html[data-theme="nordic"] .utilities .quota-badge,
html[data-theme="nordic"] .utilities .role-badge {
  box-shadow: none;
  padding: 0 12px;
}
html[data-theme="nordic"] .utilities > .icon-button {
  width: 36px;
  height: 36px;
}
html[data-theme="nordic"] .utilities .language { width: 66px; }

html[data-theme="nordic"] .skip-link {
  border-radius: var(--radius-mini);
  background: var(--glass-ink);
}

html[data-theme="nordic"] .app-error-banner {
  border-color: var(--nordic-line-strong);
  border-radius: var(--radius-mini);
  background: var(--nordic-fill);
  color: var(--glass-ink);
}

/* overview flow rail → hairline steps */
html[data-theme="nordic"] .flow-rail a {
  border-color: var(--glass-line);
  border-radius: var(--radius-nested);
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .flow-rail a:hover { background: var(--nordic-hover); }
html[data-theme="nordic"] .flow-rail a span { color: var(--glass-label); }
html[data-theme="nordic"] .flow-rail a b { color: var(--glass-ink); }
html[data-theme="nordic"] .flow-rail a small { color: var(--glass-label); }
html[data-theme="nordic"] .flow-rail i { background: var(--glass-line); }

/* status pill → neutral outline */
html[data-theme="nordic"] .status-pill {
  border-color: var(--glass-line);
  background: transparent;
  color: var(--glass-body);
}
html[data-theme="nordic"] .status-pill.blue {
  border-color: var(--nordic-line-strong);
  background: transparent;
  color: var(--glass-ink);
}

/* Panel corner tools (refresh + collapse), wherever they sit — in a
   section-tools row, a DNA header, or pinned to the panel corner: one
   30px circle with a 14px glyph, so refresh and the chevron always match. */
html[data-theme="nordic"] .section-tools .icon-button,
html[data-theme="nordic"] .dna-proof-header > .panel-toggle,
html[data-theme="nordic"] .panel-toggle,
html[data-theme="nordic"] .studio-panel .panel-refresh {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}
html[data-theme="nordic"] .section-tools .icon-button .icon,
html[data-theme="nordic"] .panel-toggle .icon,
html[data-theme="nordic"] .panel-refresh .icon {
  width: 14px;
  height: 14px;
}

/* input shell → flat field */
html[data-theme="nordic"] .input-shell {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .input-shell:focus-within {
  border-color: var(--glass-ink);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);
}
html[data-theme="nordic"] .input-shell input {
  color: var(--glass-ink);
  border: 0;
  background: transparent;
  padding: 0;
  height: 100%;
  min-height: 40px;
}
html[data-theme="nordic"] .catalogue-search {
  border-top-color: var(--glass-line);
  align-items: end;
}
html[data-theme="nordic"] .catalogue-search .primary,
html[data-theme="nordic"] .catalogue-search button {
  align-self: end;
  height: var(--field-h, 52px);
  min-height: var(--field-h, 52px);
}

/* ready-only filter → quiet checkbox row, not a pill */
html[data-theme="nordic"] .song-filter-ready {
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--glass-label);
  font-size: 11px;
}
html[data-theme="nordic"] .song-filter-ready:hover { color: var(--glass-ink); }
html[data-theme="nordic"] .song-filter-ready input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--glass-ink);
}

/* catalogue song rows → flat list cells */
html[data-theme="nordic"] .song {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 12px;
}
html[data-theme="nordic"] .song::before { display: none; }
html[data-theme="nordic"] .song:hover { background: var(--nordic-hover); }
html[data-theme="nordic"] .song:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 0;
}
html[data-theme="nordic"] .song.active {
  border-color: var(--glass-ink);
  background: var(--nordic-pressed);
}
html[data-theme="nordic"] .song-list:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / 30%);
}

html[data-theme="nordic"] .badge {
  border-color: var(--nordic-line-strong);
  background: transparent;
  color: var(--glass-ink);
}
html[data-theme="nordic"] .badge.empty {
  border-color: var(--glass-line);
  border-style: dashed;
  background: transparent;
  color: var(--glass-label);
}

/* picker rows: checked = ink fill */
html[data-theme="nordic"] .song-dna-pick-row {
  border-radius: var(--radius-mini);
}
html[data-theme="nordic"] .song-dna-pick-row:hover { background: var(--nordic-hover); }
html[data-theme="nordic"] .song-dna-pick-row:has(input:checked) {
  background: var(--glass-ink);
  color: #ffffff;
}
html[data-theme="nordic"] .song-dna-pick-row input { accent-color: #ffffff; }
html[data-theme="nordic"] .song-dna-weights { border-top-color: var(--glass-line); }

/* DNA light table (dots, develop flood, threads): see dna-light-table.css */
/* lyrics info popover → quiet square icon + flat panel */
html[data-theme="nordic"] .dna-lyrics-info {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-label);
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  box-shadow: none;
}
html[data-theme="nordic"] .dna-lyrics-info:hover:not(:disabled),
html[data-theme="nordic"] .dna-lyrics-info:focus-visible {
  background: var(--nordic-hover);
  border-color: var(--nordic-line-strong);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .dna-lyrics-pop {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  background: var(--nordic-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="nordic"] .dna-lyrics-pop-label { color: var(--glass-label); }
html[data-theme="nordic"] .dna-lyrics-pop-text { color: var(--glass-body); }

html[data-theme="nordic"] .dna-section {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
}
html[data-theme="nordic"] .dna-section-summary::after { color: var(--glass-label); }

/* dna-proof header: keep action + panel toggle hugging the right edge */
html[data-theme="nordic"] .dna-proof-header {
  align-items: center;
  justify-content: flex-start;
}
html[data-theme="nordic"] .dna-proof-header .toolbar { margin-left: auto; }
html[data-theme="nordic"] .dna-proof-header > .panel-toggle {
  margin-left: 8px;
  flex: 0 0 auto;
}
html[data-theme="nordic"] .song-manual-summary {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: transparent;
  color: var(--glass-body);
}
html[data-theme="nordic"] .song-manual-summary:hover {
  background: var(--nordic-hover);
  border-color: var(--nordic-line-strong);
  transform: none;
}
html[data-theme="nordic"] .song-manual-details[open] > .song-manual-summary {
  background: var(--nordic-pressed);
  border-color: var(--glass-ink);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .lyricist-generate-hint {
  border-color: var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-hover);
  color: var(--glass-label);
}

/* status pills → quiet status chip: light surface, ink text, signal dot */
html[data-theme="nordic"] .song-status.is-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  box-shadow: none;
  color: var(--glass-ink);
  font-size: 11px;
  font-weight: 500;
}
html[data-theme="nordic"] .song-status.is-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--glass-ink);
  flex: 0 0 auto;
}
html[data-theme="nordic"] .song-status.is-pill.is-hint {
  background: var(--nordic-surface);
  border-color: var(--glass-line);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .song-status.is-pill.error,
html[data-theme="nordic"] .song-status.error {
  background: rgb(163 32 32 / 6%);
  border-color: rgb(163 32 32 / 28%);
  color: var(--nordic-error, #a32020);
}
html[data-theme="nordic"] .song-status.is-pill.error::before {
  background: var(--nordic-error, #a32020);
}

/* in-field clear buttons: keep absolute translateY centering in every state */
html[data-theme="nordic"] .search-query-clear,
html[data-theme="nordic"] .song-filter-clear {
  border: 0;
  background: transparent;
  color: var(--glass-label);
}
html[data-theme="nordic"] .search-query-clear:hover:not(:disabled),
html[data-theme="nordic"] .song-filter-clear:hover:not(:disabled),
html[data-theme="nordic"] .search-query-clear:active:not(:disabled),
html[data-theme="nordic"] .song-filter-clear:active:not(:disabled) {
  transform: translateY(-50%);
  background: var(--nordic-hover);
  border-color: transparent;
  color: var(--glass-ink);
}
/* selection status → compact status chip with square signal dot */
html[data-theme="nordic"] .pick-count-meta,
html[data-theme="nordic"] .song-dna-pick-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-body);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html[data-theme="nordic"] .pick-count-meta::before,
html[data-theme="nordic"] .song-dna-pick-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--glass-label);
}
html[data-theme="nordic"] .pick-count-meta.is-ok::before,
html[data-theme="nordic"] .song-dna-pick-meta.is-ok::before { background: var(--nordic-ok); }
html[data-theme="nordic"] .pick-count-meta.is-warn::before,
html[data-theme="nordic"] .song-dna-pick-meta.is-warn::before { background: var(--nordic-warn); }
html[data-theme="nordic"] .song-dna-pick-meta.is-warn { color: #8a6d1a; }

/* count badges: dark fill already — keep ink, drop blue */
html[data-theme="nordic"] .songs-gallery-count,
html[data-theme="nordic"] .lyrics-collection-count {
  border-color: transparent;
  background: var(--glass-ink);
  color: #ffffff;
}
html[data-theme="nordic"] .songs-gallery-body { border-top-color: var(--glass-line); }

/* quota / role chips → quiet outline */
html[data-theme="nordic"] .quota-badge {
  border-color: var(--glass-line);
  background: transparent;
  box-shadow: none;
  color: var(--glass-ink);
}
html[data-theme="nordic"] .credits-info { color: var(--glass-ink); }
html[data-theme="nordic"] .credits-info-body { color: var(--glass-label); }
/* The credits chip and Refill are <button>s: undo the global nordic button
   typography so the chip matches the role badge next to it. */
html[data-theme="nordic"] button.quota-badge {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html[data-theme="nordic"] button.credits-refill {
  border: 1px dashed var(--glass-line);
  border-radius: 999px;
  background: transparent;
  color: var(--glass-label);
  font-size: 12px;
  font-weight: 400;
}

/* ready badge stays semantic-green, de-frosted */
html[data-theme="nordic"] .song-item-ready-badge {
  border-color: var(--glass-line);
  background: transparent;
  color: var(--nordic-ok);
}

/* is-new highlight → ink edge, no blue wash */
html[data-theme="nordic"] .song-item.is-new {
  border-color: var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: inset 2px 0 0 var(--glass-ink);
}

/* studio PRO chip */
html[data-theme="nordic"] .song-item-studio {
  border-color: var(--glass-ink);
  background: var(--glass-ink);
}
html[data-theme="nordic"] .song-item-studio:hover { background: rgb(0 0 0 / 80%); }

/* vocal polish dialog → white sheet */
html[data-theme="nordic"] .vocal-polish-dialog {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
  background: var(--nordic-surface);
  box-shadow: 0 24px 64px rgb(0 0 0 / 18%);
}
html[data-theme="nordic"] .vocal-polish-dialog::backdrop { background: var(--nordic-scrim); }
html[data-theme="nordic"] .vocal-polish-drop { border-color: var(--nordic-line-strong); }
html[data-theme="nordic"] .vocal-polish-drop:focus-within {
  border-color: var(--glass-ink);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);
}

/* gate overlay → plain canvas */
html[data-theme="nordic"] .gate-overlay .glass-panel {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card);
}
html[data-theme="nordic"] .gate-error { color: var(--nordic-error); }

/* pixel loader → neutral ink dots */
html[data-theme="nordic"] .loading-state-pixel { background: var(--glass-ink); }
html[data-theme="nordic"] .loading-state-label { color: var(--glass-label); }

/* search result cards stay flat */
html[data-theme="nordic"] .search-result.glass-panel-soft {
  border-color: var(--glass-line);
}

/* notification / manual / gallery summary dividers */
html[data-theme="nordic"] .song-notification { border-color: var(--glass-line); }
html[data-theme="nordic"] .song-notification-required {
  border-color: var(--glass-line);
  color: var(--glass-label);
  background: transparent;
}
html[data-theme="nordic"] .songs-gallery-panel { background: transparent; }
html[data-theme="nordic"] .song-manual-summary:hover { color: var(--glass-ink); }

/* ── Buttons ──────────────────────────────────────────────── */

html[data-theme="nordic"] button {
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-ink);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
html[data-theme="nordic"] button:hover:not(:disabled) {
  background: var(--nordic-hover);
  border-color: var(--glass-line);
  transform: none;
}
html[data-theme="nordic"] button:active:not(:disabled) {
  background: var(--nordic-pressed);
}
html[data-theme="nordic"] button:has(.icon):not(.icon-button) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
html[data-theme="nordic"] .icon-button:has(.icon) { justify-content: center; }
html[data-theme="nordic"] button .icon { flex: 0 0 auto; }

html[data-theme="nordic"] button.primary,
html[data-theme="nordic"] .primary {
  background: var(--glass-ink);
  border-color: var(--glass-ink);
  color: #ffffff;
  letter-spacing: 0.02em;
  text-transform: none;
}
html[data-theme="nordic"] button.primary:hover:not(:disabled) {
  background: rgb(0 0 0 / 82%);
  border-color: transparent;
  transform: none;
}
html[data-theme="nordic"] button.primary .loading-state {
  --ls-pixel: #ffffff;
  --ls-shimmer-from: rgb(255 255 255 / 45%);
  --ls-shimmer-mid: #ffffff;
  --ls-timer: rgb(255 255 255 / 60%);
}

/* icon-only buttons: borderless, hover wash */
html[data-theme="nordic"] .btn-icon,
html[data-theme="nordic"] .song-filter-clear,
html[data-theme="nordic"] .search-query-clear,
html[data-theme="nordic"] .sidebar-toggle {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--glass-label);
  text-transform: none;
}
html[data-theme="nordic"] .btn-icon:hover:not(:disabled),
html[data-theme="nordic"] .sidebar-toggle:hover:not(:disabled) {
  background: var(--nordic-hover);
  color: var(--glass-ink);
}

/* draft card actions → uniform 28px squares, PRO stays an ink block */
html[data-theme="nordic"] .song-item-icon-btn,
html[data-theme="nordic"] .song-item-delete {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-body);
  font-size: 13px;
  line-height: 1;
}
html[data-theme="nordic"] .song-item-icon-btn:hover:not(:disabled),
html[data-theme="nordic"] .song-item-delete:hover:not(:disabled) {
  background: var(--nordic-hover);
  border-color: var(--nordic-line-strong);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .song-item-delete:hover:not(:disabled) {
  color: var(--nordic-error);
}
html[data-theme="nordic"] .song-item-studio {
  min-height: 28px;
  border-radius: var(--radius-mini);
  border-color: var(--glass-ink);
  background: var(--glass-ink);
  color: #ffffff;
}
html[data-theme="nordic"] .song-item-studio:hover:not(:disabled) {
  background: rgb(0 0 0 / 82%);
  transform: none;
}
html[data-theme="nordic"] .song-item-download {
  border-radius: var(--radius-mini);
  border-color: var(--glass-line);
  color: var(--glass-body);
}
html[data-theme="nordic"] .song-item-download:hover {
  background: var(--nordic-hover);
  transform: none;
  color: var(--glass-ink);
}
html[data-theme="nordic"] .songs-gallery-body {
  padding-top: 0;
  border-top: 0;
}
html[data-theme="nordic"] .songs-gallery-summary {
  padding-bottom: 14px;
}
html[data-theme="nordic"] .songs-gallery-panel { background: var(--nordic-surface); }
html[data-theme="nordic"] .songs-gallery-summary::after { color: var(--glass-label); }

/* ── Inputs / selects ─────────────────────────────────────── */

html[data-theme="nordic"] input,
html[data-theme="nordic"] textarea {
  background: var(--nordic-surface);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  color: var(--glass-ink);
}
/* One focus look for every text field: dark border + soft halo, the same
   as .input-shell:focus-within. A field wrapped in a shell draws nothing
   itself — the shell shows focus (it used to draw a second ring inside). */
html[data-theme="nordic"] input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):focus-visible,
html[data-theme="nordic"] textarea:focus-visible,
html[data-theme="nordic"] select:focus-visible {
  outline: none;
  border-color: var(--glass-ink);
  box-shadow: 0 0 0 3px rgb(0 0 0 / 8%);
}
html[data-theme="nordic"] :is(.input-shell, .nets-handle-wrap) :is(input, textarea):focus-visible {
  outline: none;
  box-shadow: none;
}
html[data-theme="nordic"] input:is([type="checkbox"], [type="radio"], [type="range"]):focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 2px;
}
html[data-theme="nordic"] input::placeholder,
html[data-theme="nordic"] textarea::placeholder {
  color: var(--glass-label);
}
html[data-theme="nordic"] select {
  background-color: var(--nordic-surface);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  color: var(--glass-ink);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 13px;
}
html[data-theme="nordic"] input[type="checkbox"],
html[data-theme="nordic"] input[type="radio"] {
  accent-color: #000000;
}

/* ── Chips, badges, pills ─────────────────────────────────── */

html[data-theme="nordic"] .quota-badge,
html[data-theme="nordic"] .role-badge,
html[data-theme="nordic"] .songs-gallery-count,
html[data-theme="nordic"] .lyrics-collection-count {
  border: 1px solid var(--glass-line);
  background: transparent;
  color: var(--glass-body);
}

html[data-theme="nordic"] .song-pill,
html[data-theme="nordic"] .dna-tags span,
html[data-theme="nordic"] .dna-tags li,
html[data-theme="nordic"] .dna-tag,
html[data-theme="nordic"] .pick,
html[data-theme="nordic"] .profilePick,
html[data-theme="nordic"] .lyricist-suggestion {
  border: 1px solid var(--glass-line);
  background: transparent;
  color: var(--glass-body);
  border-radius: 999px;
  box-shadow: none;
}
html[data-theme="nordic"] .pick:hover,
html[data-theme="nordic"] .profilePick:hover,
html[data-theme="nordic"] .lyricist-suggestion:hover:not(:disabled) {
  background: var(--nordic-hover);
  transform: none;
}
html[data-theme="nordic"] .pick:has(input:checked),
html[data-theme="nordic"] .profilePick:has(input:checked),
html[data-theme="nordic"] .pick.is-selected {
  border-color: var(--glass-ink);
  background: var(--nordic-pressed);
  color: var(--glass-ink);
}

html[data-theme="nordic"] .song-item-ready-badge {
  border: 1px solid var(--glass-line);
  background: transparent;
  color: var(--glass-body);
}
html[data-theme="nordic"] .song-item-ready-badge::before {
  background: var(--nordic-ok);
}

/* ── Lists and cards ──────────────────────────────────────── */

html[data-theme="nordic"] .song-item {
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .song-item.is-new {
  box-shadow: inset 2px 0 0 var(--glass-ink);
}
html[data-theme="nordic"] .song-list-fade {
  background: linear-gradient(to bottom, transparent, var(--glass-page));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="nordic"] .sidebar-backdrop {
  background: var(--nordic-scrim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* stat chips */
html[data-theme="nordic"] .stat {
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .stat b { color: var(--glass-ink); }

/* ── Prompt / brief blocks — quiet fill, no chrome ────────── */

html[data-theme="nordic"] .vision-card-brief,
html[data-theme="nordic"] .synth-prompt,
html[data-theme="nordic"] .glass-prompt-panel pre,
html[data-theme="nordic"] .song-lyrics-preview {
  background: var(--nordic-fill);
  border: 0;
  border-radius: var(--radius-mini);
  color: var(--glass-body);
}
html[data-theme="nordic"] .synth-prompt.copy-on-dblclick:hover {
  background: var(--nordic-hover);
}

/* ── Progress steps ───────────────────────────────────────── */

html[data-theme="nordic"] .song-progress-step {
  border: 1px solid var(--glass-line);
  background: transparent;
  color: var(--glass-label);
  opacity: 1;
}
html[data-theme="nordic"] .song-progress-step::before {
  background: var(--glass-label);
  opacity: 1;
}
html[data-theme="nordic"] .song-progress-step.is-active {
  background: var(--glass-ink);
  border-color: var(--glass-ink);
  color: #ffffff;
}
html[data-theme="nordic"] .song-progress-step.is-active::before {
  background: #ffffff;
}
html[data-theme="nordic"] .song-progress-step.is-done {
  border-color: var(--nordic-line-strong);
  background: transparent;
  color: var(--glass-body);
}
html[data-theme="nordic"] .song-progress-step.is-done::before {
  background: var(--nordic-ok);
}

/* ── DNA detail ───────────────────────────────────────────── */

html[data-theme="nordic"] .dna-lamp {
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="nordic"] .dna-lyrics-info {
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: none;
  color: var(--glass-body);
}
html[data-theme="nordic"] .dna-lyrics-info:hover {
  background: var(--nordic-hover);
}
html[data-theme="nordic"] .dna-lyrics-pop,
html[data-theme="nordic"] .draft-lyrics-pop,
html[data-theme="nordic"] .credits-info {
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="nordic"] .dna-lyrics-anchor,
html[data-theme="nordic"] .draft-lyrics-anchor {
  color: var(--glass-body);
}

/* mix-balance slider: neutral fill */
html[data-theme="nordic"] .song-dna-weight-slider {
  background: linear-gradient(
    90deg,
    var(--glass-ink) var(--fill, 0%),
    rgb(0 0 0 / 12%) var(--fill, 0%)
  );
}
html[data-theme="nordic"] .song-dna-weight-remove:hover {
  background: var(--nordic-error);
}

/* ── Art studio ───────────────────────────────────────────── */

html[data-theme="nordic"] .glass-item {
  border: 1px solid var(--glass-line);
  box-shadow: none;
}
html[data-theme="nordic"] .glass-settings {
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .glass-expand-backdrop {
  background: rgb(0 0 0 / 50%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="nordic"] .glass-expand-chrome {
  background: rgb(0 0 0 / 60%);
  border: 1px solid rgb(255 255 255 / 20%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="nordic"] .glass-expand-flyer {
  box-shadow: 0 24px 64px rgb(0 0 0 / 30%);
}

/* user-ref delete → square button, × optically centered */
html[data-theme="nordic"] .glass-user-ref-delete {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-mini);
  background: var(--nordic-surface);
  color: var(--glass-body);
  font-size: 13px;
  line-height: 1;
}
html[data-theme="nordic"] .glass-user-ref-delete:hover:not(:disabled) {
  background: var(--nordic-hover);
  color: var(--nordic-error);
  border-color: var(--nordic-line-strong);
}

/* generation loader: keep the prod dark pulsing canvas, only neutralize the glow tint */
html[data-theme="nordic"] .ig-gen-glow {
  background: radial-gradient(circle, rgb(255 255 255 / 20%), transparent 68%);
}

/* ── Toast ────────────────────────────────────────────────── */

html[data-theme="nordic"] .app-toast {
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--glass-ink);
}

/* ── Footer ───────────────────────────────────────────────── */

html[data-theme="nordic"] .app-footer {
  border: 0;
  border-top: 1px solid var(--glass-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
/* selection */
html[data-theme="nordic"] ::selection {
  background: rgb(0 0 0 / 12%);
}

/* ════════════════════════════════════════════════════════════
   VARIANT: QUIET — airy, white, maximum calm
   ════════════════════════════════════════════════════════════ */

html[data-theme="nordic"][data-variant="quiet"] {
  --glass-page: #ffffff;
  --nordic-surface: #ffffff;
  --glass-label: rgb(0 0 0 / 50%);
  --glass-line: rgb(0 0 0 / 10%);
  --radius-shell: 0px;
  --radius-hero: 14px;
  --radius-card: 12px;
  --radius-control: 10px;
  --radius-nested: 8px;
  --radius-mini: 8px;
}
html[data-variant="quiet"] .studio-panel,
html[data-variant="quiet"] .glass-panel {
  padding: 32px;
}
html[data-variant="quiet"] aside.sidebar { padding: 32px 22px 22px; }
html[data-variant="quiet"] h1,
html[data-variant="quiet"] h2,
html[data-variant="quiet"] h3 {
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════
   VARIANT: EDITORIAL — serif voice, chapters, sharp edges
   ════════════════════════════════════════════════════════════ */

html[data-theme="nordic"][data-variant="editorial"] {
  --glass-page: #ffffff;
  --nordic-surface: #ffffff;
  --glass-label: rgb(0 0 0 / 48%);
  --glass-line: rgb(0 0 0 / 12%);
  --font-display: Georgia, "Times New Roman", serif;
  --radius-shell: 0px;
  --radius-hero: 2px;
  --radius-card: 2px;
  --radius-control: 2px;
  --radius-nested: 2px;
  --radius-mini: 2px;
  --canvas-max: 1120px;
}
html[data-variant="editorial"] h1 { font-size: 30px; font-weight: 400; letter-spacing: -0.01em; }
html[data-variant="editorial"] h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.01em; }
html[data-variant="editorial"] h3 { font-size: 19px; font-weight: 400; }
html[data-variant="editorial"] .song-item h4,
html[data-variant="editorial"] .vision-card h4,
html[data-variant="editorial"] .synth-variant h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
}
/* panels become chapters separated by rules, not boxes */
html[data-variant="editorial"] .studio-panel.glass-panel,
html[data-variant="editorial"] .dna-proof.glass-panel {
  border: 0;
  border-top: 1px solid var(--glass-ink);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}
html[data-variant="editorial"] aside.sidebar {
  border-right: 1px solid var(--glass-line);
}
html[data-variant="editorial"] .nav-item,
html[data-variant="editorial"] .icon-button,
html[data-variant="editorial"] .input-shell,
html[data-variant="editorial"] .song,
html[data-variant="editorial"] .language,
html[data-variant="editorial"] .flow-rail a {
  border-radius: 2px;
}
html[data-variant="editorial"] .utility-title strong { font-weight: 500; }
html[data-variant="editorial"] .song-item.glass-nested,
html[data-variant="editorial"] .vision-card.glass-nested,
html[data-variant="editorial"] .synth-variant.glass-nested,
html[data-variant="editorial"] .stat.glass-nested,
html[data-variant="editorial"] .search-result.glass-panel-soft {
  border: 0;
  border-bottom: 1px solid var(--glass-line);
  border-radius: 0;
  background: transparent;
}
html[data-variant="editorial"] .song-item.is-new {
  box-shadow: none;
  border-left: 2px solid var(--glass-ink);
}
html[data-variant="editorial"] button {
  border-radius: 2px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
html[data-variant="editorial"] button.primary {
  border-radius: 2px;
}
html[data-variant="editorial"] input,
html[data-variant="editorial"] textarea,
html[data-variant="editorial"] select {
  border-radius: 2px;
}
/* chips go square-ish in editorial */
html[data-variant="editorial"] .song-pill,
html[data-variant="editorial"] .dna-tags span,
html[data-variant="editorial"] .dna-tags li,
html[data-variant="editorial"] .pick,
html[data-variant="editorial"] .lyricist-suggestion,
html[data-variant="editorial"] .song-progress-step,
html[data-variant="editorial"] .quota-badge,
html[data-variant="editorial"] .song-item-ready-badge {
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   VARIANT: UTILITARIAN — dense ops console, mono metadata
   ════════════════════════════════════════════════════════════ */

html[data-theme="nordic"][data-variant="utilitarian"] {
  --glass-page: #fafafa;
  --nordic-surface: #ffffff;
  --glass-label: rgb(0 0 0 / 56%);
  --glass-line: rgb(0 0 0 / 14%);
  --nordic-line-strong: rgb(0 0 0 / 22%);
  --font-mono: "Inter Variable", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Variable", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-data: "Departure Mono", SFMono-Regular, Consolas, monospace;
  --radius-shell: 0px;
  --radius-hero: 8px;
  --radius-card: 6px;
  --radius-control: 6px;
  --radius-nested: 6px;
  --radius-mini: 4px;
  --field-h: 40px;
}
html[data-variant="utilitarian"] body { font-size: 13px; }
html[data-variant="utilitarian"] .label-quiet,
html[data-variant="utilitarian"] .song-item-title-meta,
html[data-variant="utilitarian"] .vision-card-date,
html[data-variant="utilitarian"] .vision-card-tracks,
html[data-variant="utilitarian"] .synth-dna-blend,
html[data-variant="utilitarian"] .loading-state-timer,
html[data-variant="utilitarian"] .song-list-meta,
html[data-variant="utilitarian"] .sidebar-foot,
html[data-variant="utilitarian"] .app-footer-copy,
html[data-variant="utilitarian"] .song-dna-weight-badge,
html[data-variant="utilitarian"] .nav-group > p,
html[data-variant="utilitarian"] .eyebrow,
html[data-variant="utilitarian"] #songListMeta {
  font-family: var(--font-data);
}
html[data-variant="utilitarian"] .studio-panel,
html[data-variant="utilitarian"] .glass-panel {
  padding: 20px;
}
html[data-variant="utilitarian"] .studio-main { gap: 14px; padding: 14px 16px 20px; }
html[data-variant="utilitarian"] .utility-header { min-height: 60px; }
html[data-variant="utilitarian"] aside.sidebar { padding: 22px 16px 16px; }
html[data-variant="utilitarian"] .side-nav { gap: 14px; }
html[data-variant="utilitarian"] .nav-item { min-height: 36px; }
html[data-variant="utilitarian"] .flow-rail a { min-height: 74px; padding: 10px 12px; }
html[data-variant="utilitarian"] .overview h2 { font-size: clamp(24px, 2.4vw, 32px); }
html[data-variant="utilitarian"] .song { min-height: 48px; }
html[data-variant="utilitarian"] .song-item,
html[data-variant="utilitarian"] .vision-card,
html[data-variant="utilitarian"] .synth-variant {
  padding: 12px 14px;
}
html[data-variant="utilitarian"] button {
  font-size: 12px;
  padding: 6px 12px;
}
html[data-variant="utilitarian"] button.primary {
  padding: 8px 16px;
}
html[data-variant="utilitarian"] input,
html[data-variant="utilitarian"] textarea {
  padding: 8px 10px;
}
html[data-variant="utilitarian"] .input-shell { min-height: 40px; }
html[data-variant="utilitarian"] .input-shell input { min-height: 36px; }

/* one form language: tokens and controls share --radius-mini */
html[data-variant="utilitarian"] .status-pill,
html[data-variant="utilitarian"] .quota-badge,
html[data-variant="utilitarian"] .role-badge,
html[data-variant="utilitarian"] .songs-gallery-count,
html[data-variant="utilitarian"] .lyrics-collection-count,
html[data-variant="utilitarian"] .badge,
html[data-variant="utilitarian"] .song-pill,
html[data-variant="utilitarian"] .dna-tags span,
html[data-variant="utilitarian"] .dna-tags li,
html[data-variant="utilitarian"] .pick,
html[data-variant="utilitarian"] .profilePick,
html[data-variant="utilitarian"] .lyricist-suggestion,
html[data-variant="utilitarian"] .song-item-ready-badge,
html[data-variant="utilitarian"] .song-progress-step,
html[data-variant="utilitarian"] select {
  border-radius: var(--radius-mini);
}

/* ════════════════════════════════════════════════════════════
   Prototype switcher (not part of the skin)
   ════════════════════════════════════════════════════════════ */

.proto-switcher {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #111111;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  font-family: "Inter Variable", -apple-system, sans-serif;
}
.proto-switcher button {
  border: 0;
  background: transparent;
  color: rgb(255 255 255 / 60%);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  letter-spacing: 0.01em;
  text-transform: none;
}
.proto-switcher button:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 10%);
  transform: none;
}
.proto-switcher button.is-on {
  background: #ffffff;
  color: #000000;
}
.proto-switcher .proto-switcher-sep {
  width: 1px;
  height: 18px;
  background: rgb(255 255 255 / 18%);
  margin: 0 4px;
}
.proto-switcher .proto-switcher-label {
  color: rgb(255 255 255 / 40%);
  font-size: 11px;
  padding: 0 8px 0 10px;
  letter-spacing: 0.04em;
}

/* ── My library empty state ── */
html[data-theme="nordic"] .visions-empty-panel {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-panel);
  background: linear-gradient(135deg, var(--nordic-fill), transparent 70%);
}
html[data-theme="nordic"] .visions-empty-glyph {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--nordic-surface);
}
html[data-theme="nordic"] .visions-empty-glyph::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 999px;
  background: var(--glass-ink);
  animation: nordic-empty-breathe 2.8s ease-in-out infinite;
}
html[data-theme="nordic"] .visions-empty {
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--glass-body);
  text-wrap: pretty;
}
html[data-theme="nordic"] .visions-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--nordic-surface);
  color: var(--glass-ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="nordic"] .visions-empty-cta:hover { background: var(--nordic-hover); }
html[data-theme="nordic"] .visions-empty-cta:active { transform: scale(0.98); }
@keyframes nordic-empty-breathe {
  0%, 100% { transform: scale(0.7); opacity: 0.35; }
  50% { transform: scale(1); opacity: 1; }
}
@media (max-width: 640px) {
  html[data-theme="nordic"] .visions-empty-panel { grid-template-columns: auto minmax(0, 1fr); }
  html[data-theme="nordic"] .visions-empty-cta { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="nordic"] .visions-empty-glyph::after { animation: none; }
}

/* ── Panel refresh (catalog, whitelist, hit dna): shares the collapse
   toggle's corner — same 30px circle, same top edge, one slot to its left.
   Absolute, like the toggle, so panel padding per variant can't skew it. ── */
html[data-theme="nordic"] .studio-panel .panel-refresh {
  position: absolute;
  top: 16px;
  right: 54px;
}
html[data-theme="nordic"] .panel-refresh:active:not(:disabled) .icon,
html[data-theme="nordic"] #btnRefresh:active:not(:disabled) .icon {
  transform: rotate(-120deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="nordic"] .whitelist-head,
html[data-theme="nordic"] .hit-dna-head { padding-right: 88px; }

/* ════════════════════════════════════════════════════════════
   Studio navigation: gliding active pill, scroll-spy, Season Zero
   teaser, rolling counters, mobile tab bar + slim header.
   ════════════════════════════════════════════════════════════ */

/* One pill for the whole sidebar; app.js moves it to the active link. */
html[data-theme="nordic"] .side-nav { position: relative; }
html[data-theme="nordic"] .side-nav > .nav-group { position: relative; z-index: 1; }
html[data-theme="nordic"] .nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pill-size, 44px);
  border-radius: var(--radius-mini);
  background: var(--nordic-pressed);
  opacity: 0;
  transform: translateY(var(--pill-offset, 0));
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease;
  pointer-events: none;
}
html[data-theme="nordic"] .nav-pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 2px;
  background: var(--glass-ink);
}
html[data-theme="nordic"] .nav-pill.is-visible { opacity: 1; }
html[data-theme="nordic"] .nav-pill.no-transition,
html[data-theme="nordic"] .tabbar-pill.no-transition { transition: none; }
html[data-theme="nordic"] .side-nav .nav-item.active { background: transparent; }

/* Live route marker (Network Editions). */
html[data-theme="nordic"] .nav-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--glass-label);
  font-size: 8px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
html[data-theme="nordic"] .nav-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nordic-ok);
  box-shadow: 0 0 0 3px rgb(26 127 55 / 15%);
}

/* Season Zero: a lock + "soon" instead of a dashed chip; opens a teaser. */
html[data-theme="nordic"] .nav-item.nav-locked { cursor: pointer; }
html[data-theme="nordic"] .nav-item.nav-locked:hover { background: var(--nordic-hover); }
html[data-theme="nordic"] .nav-item.nav-locked .nav-mark { border-style: dashed; }
html[data-theme="nordic"] .nav-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  letter-spacing: 0.08em;
}
html[data-theme="nordic"] .nav-teaser {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="nordic"] .nav-teaser.is-open { grid-template-rows: 1fr; }
html[data-theme="nordic"] .nav-teaser > .nav-teaser-inner {
  min-height: 0;
  overflow: hidden;
  margin: 0 4px 0 33px;
  border-radius: var(--radius-mini);
  background: var(--nordic-fill);
  color: var(--glass-body);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}
html[data-theme="nordic"] .nav-teaser.is-open > .nav-teaser-inner { margin-bottom: 6px; }
html[data-theme="nordic"] .nav-teaser p { margin: 10px 12px 0; color: var(--glass-ink); }
html[data-theme="nordic"] .nav-teaser ul { margin: 6px 12px 0; padding-left: 16px; }
html[data-theme="nordic"] .nav-teaser li { margin: 3px 0; }
html[data-theme="nordic"] .nav-teaser .nav-teaser-foot {
  margin: 8px 12px 10px;
  color: var(--glass-label);
}

/* Counters: equal-width digits that roll per place. */
html[data-theme="nordic"] .nav-count,
html[data-theme="nordic"] .quota-badge { font-variant-numeric: tabular-nums; }
.rolling-count { display: inline-flex; line-height: 1; }
.rolling-digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
}
.rolling-reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rolling-reel > span { display: block; height: 1em; }

/* Drawer: follows the finger while being swiped closed. */
@media (max-width: 1023px) {
  html[data-theme="nordic"] aside.sidebar { touch-action: pan-y; }
  html[data-theme="nordic"] aside.sidebar.is-open {
    transform: translateX(var(--drawer-drag, 0px));
  }
  html[data-theme="nordic"] aside.sidebar.is-dragging { transition: none; }
}

/* Phones: the header stays one row with the mode toggle (simple-mode.css):
   no title, credits as a bare number (the full label stays readable to
   screen readers). docs/prototypes/simple-mode/visual-notes.md "Phone layout". */
@media (max-width: 420px) {
  html[data-theme="nordic"] .utility-title { display: none; }
  html[data-theme="nordic"] .utility-header { gap: 8px; padding-inline: 16px; }
  html[data-theme="nordic"] .utilities { gap: 6px; flex-wrap: nowrap; }
  html[data-theme="nordic"] .utilities #quotaBadge[data-short] { font-size: 0; padding: 0 10px; }
  html[data-theme="nordic"] .utilities #quotaBadge[data-short]::after { content: attr(data-short) / ""; font-size: 12px; }
}

/* Account controls live in the header on desktop, in the drawer on phones. */
.sidebar-account { display: none; }
.tabbar { display: none; }

@media (max-width: 767px) {
  html[data-theme="nordic"] .utilities .language,
  html[data-theme="nordic"] .utilities #btnLogout,
  html[data-theme="nordic"] .utilities #roleBadge { display: none; }

  /* The five studio sections move to the tab bar. */
  html[data-theme="nordic"] aside.sidebar .nav-group-studio { display: none; }

  html[data-theme="nordic"] .sidebar-account {
    display: grid;
    gap: 6px;
    margin: -8px -4px 14px;
    text-transform: none;
    letter-spacing: 0;
  }
  html[data-theme="nordic"] .sidebar-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--glass-body);
    font-size: 13px;
  }
  html[data-theme="nordic"] .sidebar-account .language { width: 78px; height: 36px; }
  html[data-theme="nordic"] .sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--glass-body);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
  }
  html[data-theme="nordic"] .sidebar-logout:hover:not(:disabled) {
    background: transparent;
    color: var(--glass-ink);
  }

  html[data-theme="nordic"] .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--glass-line);
    background: rgb(255 255 255 / 86%);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
  }
  html[data-theme="nordic"] .tabbar-item {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 50px;
    padding: 7px 2px 5px;
    color: var(--glass-label);
    font-size: 10px;
    letter-spacing: 0.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }
  html[data-theme="nordic"] .tabbar-item[hidden] { display: none; }
  html[data-theme="nordic"] .tabbar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-theme="nordic"] .tabbar-item.active { color: var(--glass-ink); }
  html[data-theme="nordic"] .tabbar-pill {
    position: absolute;
    top: 6px;
    left: 0;
    width: var(--pill-size, 0);
    height: 50px;
    border-radius: 12px;
    background: var(--nordic-pressed);
    opacity: 0;
    transform: translateX(var(--pill-offset, 0));
    transition:
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.2s ease;
    pointer-events: none;
  }
  html[data-theme="nordic"] .tabbar-pill.is-visible { opacity: 1; }
  /* The drawer and its scrim sit above the bar. */
  html[data-theme="nordic"] body.sidebar-open .tabbar { z-index: 100; }

  html[data-theme="nordic"] #app-root:not([hidden]) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  html[data-theme="nordic"] .app-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="nordic"] .nav-pill,
  html[data-theme="nordic"] .tabbar-pill,
  html[data-theme="nordic"] .nav-teaser,
  .rolling-reel { transition: none; }
}

/* ── Idea Lab thinking orb (thinking-orb.js) ── */
html[data-theme="nordic"] .thinking-orb {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  color: var(--glass-ink);
}
html[data-theme="nordic"] .thinking-orb[hidden] { display: none; }
html[data-theme="nordic"] .thinking-orb-canvas { width: 160px; height: 160px; }
html[data-theme="nordic"] .thinking-orb-status {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--glass-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-theme="nordic"] .thinking-orb-timer {
  color: var(--glass-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Disclosure rows that used the browser's ▸ triangle: one chevron glyph
   (Lucide chevron-right) that turns down when open. */
html[data-theme="nordic"] :is(.catalog-add, .glass-prompt-panel, .lyric-card-details, .synth-json-details) > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}
html[data-theme="nordic"] :is(.catalog-add, .glass-prompt-panel, .lyric-card-details, .synth-json-details) > summary::-webkit-details-marker {
  display: none;
}
html[data-theme="nordic"] :is(.catalog-add, .glass-prompt-panel, .lyric-card-details, .synth-json-details) > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="nordic"] :is(.catalog-add, .glass-prompt-panel, .lyric-card-details, .synth-json-details)[open] > summary::before {
  transform: rotate(90deg);
}
html[data-theme="nordic"] .lyric-card-details > summary::before { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme="nordic"] :is(.catalog-add, .glass-prompt-panel, .lyric-card-details, .synth-json-details) > summary::before { transition: none; }
}

/* ── "How it works" steps (Art Studio, Idea Lab) ──
   Three numbered cards joined by a dotted rail; replaces paragraph intros.
   Stacks into a vertical timeline on phones. */
html[data-theme="nordic"] .how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
html[data-theme="nordic"] .how-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-card, 12px);
  background: var(--nordic-surface);
}
/* dotted connector to the next card */
html[data-theme="nordic"] .how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 14px;
  border-top: 1.5px dotted var(--nordic-line-strong);
}
html[data-theme="nordic"] .how-step-icon {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--nordic-fill);
  color: var(--glass-ink);
}
html[data-theme="nordic"] .how-step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid var(--nordic-surface);
  border-radius: 999px;
  background: var(--glass-ink);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html[data-theme="nordic"] .how-step b {
  align-self: end;
  color: var(--glass-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
html[data-theme="nordic"] .how-step small {
  align-self: start;
  color: var(--glass-body);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  html[data-theme="nordic"] .how-steps {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  html[data-theme="nordic"] .how-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -9px;
    left: 35px;
    width: 0;
    height: 10px;
    border-top: 0;
    border-left: 1.5px dotted var(--nordic-line-strong);
  }
}

/* Desktop sidebar is narrow: the live marker keeps its dot only; the word
   stays in the accessibility tree (font-size 0, not display:none). */
@media (min-width: 1024px) {
  html[data-theme="nordic"] .nav-live { font-size: 0; gap: 0; }
}


/* ── Error pills: every inline error message shares one look —
   tinted surface, hairline error border, signal dot, error ink.
   Ids are matched as [id=…] so the list stays class-level specific and
   the compact overrides below can win by source order. ── */
html[data-theme] :is(
  .gate-error,
  [id="appError"],
  [id="synthStatus"].error,
  [id="glassStatus"].error,
  [id="glassUserRefsStatus"].error,
  [id="lyricistStatus"].error,
  [id="songStatus"].error,
  [id="vocalPolishStatus"].is-error,
  [id="catalogAddStatus"],
  .catalog-run.is-error,
  .song-lyrics-policy-error,
  .nets-status.is-error,
  .nets-hint.is-error,
  .netp-error,
  .hc-error
) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 12px;
  border: 1px solid rgb(163 32 32 / 28%);
  border-radius: var(--radius-mini);
  background: rgb(163 32 32 / 6%);
  box-shadow: none;
  color: var(--nordic-error, #a32020);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  overflow-wrap: anywhere;
}
html[data-theme] :is(
  .gate-error,
  [id="appError"],
  [id="synthStatus"].error,
  [id="glassStatus"].error,
  [id="glassUserRefsStatus"].error,
  [id="lyricistStatus"].error,
  [id="songStatus"].error,
  [id="vocalPolishStatus"].is-error,
  [id="catalogAddStatus"],
  .catalog-run.is-error,
  .song-lyrics-policy-error,
  .nets-status.is-error,
  .nets-hint.is-error,
  .netp-error,
  .hc-error
)::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 1px;
  background: currentColor;
}
/* the song status pill has its own nordic chip rules; keep them in step */
html[data-theme="nordic"] .song-status.is-pill.error {
  align-items: flex-start;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12px;
}
html[data-theme="nordic"] .song-status.is-pill.error::before {
  margin-top: 0.5em;
}
/* the profile feed error replaces the feed, so it centers in the column */
html[data-theme] .netp-error.netp-error {
  margin: 32px auto;
}
/* compact rows (catalogue runs, field hints) keep a smaller pill */
html[data-theme] :is(.catalog-run.is-error, .nets-hint.is-error) {
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
}

html[data-theme] .app-toast.is-error {
  border-color: rgb(163 32 32 / 32%);
  background: color-mix(in srgb, var(--nordic-error, #a32020) 6%, var(--nordic-surface, #fff));
  color: var(--nordic-error, #a32020);
}
html[data-theme] .studio-pack-status[data-status="failed"] {
  background: rgb(163 32 32 / 6%);
  color: var(--nordic-error, #a32020);
}

/* Status pills render only with text (e.g. the song count before the
   catalogue loads was an empty capsule next to refresh). */
.status-pill:empty { display: none; }

/* Utility eyebrow doubles as a link back to the network chart on
   profile/settings pages (app.js sets href only there). */
html[data-theme="nordic"] a.eyebrow { text-decoration: none; }
html[data-theme="nordic"] a.eyebrow[href] { cursor: pointer; transition: color 0.15s ease; }
html[data-theme="nordic"] a.eyebrow[href]:hover { color: var(--glass-ink); text-decoration: underline; text-underline-offset: 3px; }