/* Sleep Studio — component primitives */

/* ============================== Buttons ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(180deg, var(--ember-strong), var(--ember));
  color: oklch(0.18 0.03 55);
  border: 1px solid var(--ember);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:focus-visible { box-shadow: var(--glow-ember); }

.btn-secondary {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-secondary:hover { border-color: var(--ember); color: var(--ember-strong); }

.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--ink); background: var(--surface); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Round transport buttons (play/pause/stop) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}
.icon-btn svg { width: 1.15rem; height: 1.15rem; }
.icon-btn:hover { border-color: var(--ember); box-shadow: var(--glow-ember-soft); }
.icon-btn:active { transform: scale(0.96); }
.icon-btn.is-primary {
  width: 3.25rem;
  height: 3.25rem;
  background: linear-gradient(180deg, var(--ember-strong), var(--ember));
  border-color: var(--ember);
  color: oklch(0.18 0.03 55);
}
.icon-btn.is-primary:hover { filter: brightness(1.06); box-shadow: none; }
.icon-btn.is-playing { box-shadow: var(--glow-ember); }
.icon-btn.sm { width: 2.25rem; height: 2.25rem; }
.icon-btn.sm svg { width: 0.95rem; height: 0.95rem; }

.btn.sm { padding: 0.42rem 0.8rem; font-size: var(--text-xs); }

/* =============================== Chips ================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--surface-raised) 82%, transparent);
  border: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.chip-label { color: var(--ink-muted); }
.chip-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.chip-cluster {
  color: var(--moon);
  border-color: color-mix(in oklch, var(--moon) 40%, var(--hairline));
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Coherence gauge chips: the two headline numbers on every pack card --
   a mini bar earns its place here (fast cross-card scanning) where it
   would be noise on the per-pair chips. */
.chip-gauge { padding-right: 0.5rem; }
.chip-bar {
  width: 26px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
  flex-shrink: 0;
}
.chip-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ember-soft), var(--ember-strong));
  border-radius: var(--radius-pill);
}

/* =========================== Panels / cards ============================ */

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft);
}
/* a warm sheen along the top edge -- the "lamp catching a surface" cue
   that separates a considered card from a flat bordered box */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.78 0.1 60 / 0.35), transparent);
  pointer-events: none;
}
#pack-grid .panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-raised);
  border-color: var(--hairline-strong);
}
.panel.is-playing { border-color: color-mix(in oklch, var(--ember) 45%, var(--hairline)); }

.panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--hairline);
}
.panel-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.panel-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.panel-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-row { column-gap: 6px; row-gap: 6px; }

/* =============================== Track row ============================= */

.track-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding: 0.85rem var(--space-5);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft);
}
.track-row:last-child { border-bottom: none; }
.track-row:hover {
  background: color-mix(in oklch, var(--surface-raised) 55%, transparent);
  transform: translateX(2px);
}
#track-list[data-active-tab="using"] .track-row[data-using-bucket="not-using"],
#track-list[data-active-tab="not-using"] .track-row[data-using-bucket="using"] {
  display: none;
}

.track-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.track-row .track-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* holds the badge row + category chip on their own line, clear of the
   title -- the two together used to crowd right under the title with no
   grouping; now they're one visually distinct "tags" row. */
.track-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  row-gap: 0.35rem;
}

/* role/family tag reads as a small pill, not bare text jammed against the
   title -- gives the row a clear first "what kind of thing is this" beat
   before the title, instead of everything running together. */
.track-row .track-role {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem 0.28rem 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  min-width: 5rem;
  justify-content: center;
  flex-shrink: 0;
}
.track-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.track-row .track-dur {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: right;
}

@keyframes row-flash {
  from { background: var(--ember-dim); }
  to   { background: transparent; }
}
.track-row.flash { animation: row-flash 1400ms var(--ease-out-soft); }

/* small role indicator: ember for foreground layers (lead/accent), moon
   for structural ones (bed/drone/freq) -- mirrors the actual mix, not an
   arbitrary extra color */
.role-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.role-dot[data-tone="ember"] { background: var(--ember); box-shadow: 0 0 6px -1px var(--ember-ring); }
.role-dot[data-tone="moon"] { background: var(--moon); }

/* Bucket section header (Previous Library / Campaign / Frequencies / Accents) */
.track-row--group {
  grid-template-columns: 1fr auto;
  background: color-mix(in oklch, var(--surface-raised) 92%, var(--void));
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 0.6rem;
  border-bottom-color: var(--hairline-strong);
}
.track-row--group .track-group-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.track-group-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--ember-strong);
  flex-shrink: 0;
}
.track-row--group .track-group-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================ Form controls ============================= */

select, input[type="text"], input[type="search"] {
  padding: 0.5rem 0.7rem;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}
select:hover, input[type="text"]:hover, input[type="search"]:hover { border-color: var(--hairline-strong); }
select:focus-visible, input[type="text"]:focus-visible, input[type="search"]:focus-visible {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-dim);
}
input[type="text"]::placeholder, input[type="search"]::placeholder { color: var(--ink-faint); }

/* =============================== Sliders =============================== */

.fader {
  --track-h: 4px;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}
.fader::-webkit-slider-runnable-track {
  height: var(--track-h);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
}
.fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: calc((var(--track-h) - 14px) / 2);
  border-radius: var(--radius-pill);
  background: var(--ember);
  border: 2px solid oklch(0.12 0.02 264);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fader:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: var(--glow-ember); }
.fader::-moz-range-track { height: var(--track-h); background: var(--surface-sunken); border-radius: var(--radius-pill); border: 1px solid var(--hairline); }
.fader::-moz-range-thumb { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--ember); border: 2px solid oklch(0.12 0.02 264); }

/* =========================== Channel strip (pack) ======================= */

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  padding: var(--space-5);
}

.strip {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  transition: border-color var(--dur-base) var(--ease-out-soft);
}

.strip-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-2);
  row-gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.strip-label .strip-role { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-muted); flex-shrink: 0; }
.strip-label .strip-db { font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }

.strip-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  line-height: var(--leading-tight);
  min-height: 2.4em;
}
.strip-title .tier-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  gap: 0.4rem;
}
.strip-title .tier-line .tier-tag { -webkit-box-orient: horizontal; margin-right: 0.4rem; }
.strip-title .tier-line + .tier-line { margin-top: 0.3rem; }
.tier-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--surface-sunken);
  color: var(--ink-faint);
}
.tier-tag[data-tier="a"] { color: var(--ember-strong); }
.tier-tag[data-tier="b"] { color: var(--moon); }

.meter-well {
  height: 64px;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-well);
  overflow: hidden;
  position: relative;
}
.meter-well canvas { width: 100%; height: 100%; display: block; }

.strip.is-active {
  border-color: color-mix(in oklch, var(--ember) 55%, var(--hairline));
  background: var(--surface-raised-2);
}

/* accent flash pip -- lights up on scheduled accent trigger */
.accent-pip {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ember);
  opacity: 0;
}
.accent-pip.fire { animation: needle-flash 900ms var(--ease-out); }

/* ============================== Transport =============================== */
/* A persistent "now playing" mini-player, fixed to the bottom of the
   viewport -- Library/Frequencies/Accents all share this one player, so it
   needs to stay visible regardless of which section the listener has
   scrolled to (see js/shared-ui.js createSingleTrackPlayer). */

.transport {
  position: fixed;
  left: 50%;
  bottom: var(--gutter);
  transform: translateX(-50%);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklch, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
  animation: rise-in var(--dur-base) var(--ease-out) both;
}
.transport[hidden] { display: none; }
.transport .meter-well { height: 44px; }

.transport-info {
  flex: 1;
  min-width: 0;
}
.transport-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transport-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================== Feedback ================================ */

.feedback {
  display: flex;
  gap: var(--space-2);
}
.feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-control);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-raised);
  color: var(--ink-muted);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft);
}
.feedback-btn svg { width: 1rem; height: 1rem; }
.feedback-btn:active { transform: scale(0.96); }
.feedback-btn.approve:hover, .feedback-btn.approve.is-set {
  color: var(--approve-strong); border-color: var(--approve); background: var(--approve-dim);
}
.feedback-btn.dislike:hover, .feedback-btn.dislike.is-set {
  color: var(--dislike-strong); border-color: var(--dislike); background: var(--dislike-dim);
}
.feedback-btn.flag:hover, .feedback-btn.flag.is-set {
  color: var(--flag-strong); border-color: var(--flag); background: var(--flag-dim);
}
.feedback-btn.sm { width: 2rem; height: 2rem; }
.feedback-btn.sm svg { width: 0.85rem; height: 0.85rem; }

/* ============================= Profile switch ============================= */

.profile-switch {
  position: relative;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.profile-thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--surface-raised-2);
  box-shadow: 0 1px 0 0 oklch(1 0.01 80 / 0.06) inset, 0 0 0 1px var(--ember-ring);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}
.profile-switch:has(.profile-btn[data-profile="yashika"].is-active) .profile-thumb {
  transform: translateX(100%);
}
.profile-btn {
  position: relative;
  z-index: 1;
  min-width: 4.5rem;
  text-align: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.profile-btn.is-active { color: var(--ember-strong); }

/* ================================ Toast =================================== */

.toast-stack {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.7rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--ink);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast[data-leaving] { opacity: 0; transform: translateY(6px) scale(0.98); }
.toast .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--approve); flex-shrink: 0; }
.toast.is-local .dot { background: var(--ink-faint); }

/* ================================ Nav pills ================================= */

.nav-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.nav-pill {
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-out-soft);
}
.nav-pill:hover { color: var(--ink); background: var(--surface-raised); }
/* Scrollspy highlight -- toggled by app.js's IntersectionObserver, always
   naming which of the 5 sections is currently in view. */
.nav-pill.is-active { color: var(--ember-strong); background: var(--ember-dim); }
@media (max-width: 900px) { .nav-pills { display: none; } }

/* =================================== Tabs ==================================== */

.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.tab {
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  transition: transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft);
}
.tab:hover { color: var(--ink); }
.tab:active { transform: scale(0.97); }
.tab.is-active { color: oklch(0.18 0.03 55); background: linear-gradient(180deg, var(--ember-strong), var(--ember)); }

/* ============================= Category chip + editor ============================ */

.cat-chip { position: relative; display: inline-flex; }
.cat-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.14rem 0.5rem 0.14rem 0.55rem;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft);
}
.cat-chip-btn:hover { color: var(--moon); border-color: color-mix(in oklch, var(--moon) 40%, var(--hairline)); }
.cat-chip-btn:active { transform: scale(0.97); }
.cat-chip-btn svg { width: 0.7rem; height: 0.7rem; opacity: 0.7; }

/* BUGFIX: an author stylesheet's `display` always wins over the UA
   `[hidden] { display: none }` rule regardless of selector order/specificity
   (different cascade origins) -- without this guard .cat-edit-pop's own
   `display: flex` below made every closed popover render anyway, as an
   835x26px absolutely-positioned grey bar sitting under each row's category
   chip and bleeding into the row beneath it. Same pattern already used
   correctly for .transport[hidden] above; this was the one spot it was
   missed, and the actual cause of the reported row-overlap bug. */
.cat-edit-pop[hidden] { display: none; }

.cat-edit-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: max(240px, 100%);
  padding: var(--space-3);
  background: var(--surface-raised-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
  transform-origin: top left;
  animation: pop-in var(--dur-fast) var(--ease-out) both;
}
.cat-edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.cat-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: 2px; }

/* ================================ Compat pill ================================= */

.compat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  border: 1px solid var(--hairline);
  background: var(--surface-sunken);
  color: var(--ink-muted);
}
.compat-pill-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.compat-pill[data-level="green"] { border-color: color-mix(in oklch, var(--approve) 45%, var(--hairline)); color: var(--approve-strong); }
.compat-pill[data-level="amber"] { border-color: color-mix(in oklch, var(--flag) 45%, var(--hairline)); color: var(--flag-strong); }
.compat-pill[data-level="red"] { border-color: color-mix(in oklch, var(--dislike) 45%, var(--hairline)); color: var(--dislike-strong); }

/* =================================== Badges =================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.35rem;
}
.badge-warn { background: var(--flag-dim); color: var(--flag-strong); border: 1px solid color-mix(in oklch, var(--flag) 40%, transparent); }
.badge-info { background: var(--moon-dim); color: var(--moon); border: 1px solid color-mix(in oklch, var(--moon) 35%, transparent); }

/* =========================== Section badge chips ================================ */
/* Render-only today (see js/shared-ui.js badgeRowHTML / js/badges.js, owned by a
   parallel workstream) -- small colour-tinted text chips naming which
   section(s) a track belongs to. --badge-color is set inline per-chip from
   SECTION_COLOR so this stays a thin rendering layer, not a hardcoded
   palette. Structured with data-badge-target-* + a trailing ghost "add"
   control so a later pass can wire add/remove editing straight onto this
   markup without a rewrite. */
.badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--badge-color, var(--ink-faint)) 16%, var(--surface-sunken));
  border: 1px solid color-mix(in oklch, var(--badge-color, var(--ink-faint)) 42%, transparent);
  color: color-mix(in oklch, var(--badge-color, var(--ink-faint)) 78%, var(--ink));
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.badge-chip-hint {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-style: italic;
  color: var(--ink-faint);
  opacity: 0.75;
}
/* inert placeholder for a future "add a badge" control -- no click handler
   is attached anywhere in this pass; kept low-contrast so it doesn't read
   as a working button yet. */
.badge-row-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--hairline-strong);
  color: var(--ink-faint);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.badge-row-add svg { width: 0.55rem; height: 0.55rem; }

/* ============================== Note stub =================================== */
/* Structure + affordance only -- the remarks feature itself is a later pass.
   Visually quiet (ghost icon-btn) so it doesn't compete with the real,
   wired controls next to it; clicking it safely no-ops today. */
.note-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-control);
  border: 1px dashed var(--hairline-strong);
  background: transparent;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out-soft), border-color var(--dur-fast) var(--ease-out-soft);
}
.note-btn svg { width: 0.85rem; height: 0.85rem; }
.note-btn:hover { color: var(--moon); border-color: color-mix(in oklch, var(--moon) 40%, var(--hairline-strong)); }

/* ================================== Callout ==================================== */

.callout {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-panel);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.callout-warn {
  background: var(--flag-dim);
  border: 1px solid color-mix(in oklch, var(--flag) 45%, var(--hairline));
  color: var(--ink);
}
.callout strong { display: block; margin-bottom: 4px; font-family: var(--font-display); }
.callout p { margin: 0; color: var(--ink-muted); max-width: none; }
.callout-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.callout-links button {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  transition: border-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft);
}
.callout-links button:hover { border-color: var(--flag); color: var(--flag-strong); }
.callout-links button:active { transform: scale(0.97); }

/* ============================== Pack card footer =============================== */

.panel-footer {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--hairline);
}

/* ========================= Pack details disclosure ============================= */
/* 48 full-height cards stacked was a ~12,270px wall. The channel rack + raw
   pair-compatibility chips are real detail, not headline info -- collapsed
   behind a native <details> (closed by default) so the grid is scannable;
   opens on click same as any disclosure, and js/packs.js force-opens it
   automatically when a pack starts playing (meters need real canvas size). */
.pack-details { border-top: 1px solid var(--hairline); }
.pack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  transition: color var(--dur-fast) var(--ease-out-soft), background-color var(--dur-fast) var(--ease-out-soft);
}
.pack-summary::-webkit-details-marker { display: none; }
.pack-summary::marker { content: ""; }
.pack-summary:hover { color: var(--ink); background: color-mix(in oklch, var(--surface-raised) 45%, transparent); }
.pack-summary:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }
.pack-summary-chevron { width: 0.85rem; height: 0.85rem; flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.pack-details[open] .pack-summary-chevron { transform: rotate(180deg); }
.pack-details[open] .pack-summary { border-bottom: 1px solid var(--hairline); }
.pack-details-body {
  animation: fade-in var(--dur-base) var(--ease-out-soft) both;
}
.pack-pair-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-4) var(--space-5) 0;
}
.pack-pair-chips:empty { padding: 0; }

/* ================================== Studio ===================================== */

.studio-panel { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.studio-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.studio-base-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  min-width: 240px;
  flex: 1;
  max-width: 420px;
}

.studio-coherence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.studio-coherence-overall {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-right: var(--space-2);
}
.studio-coherence-overall strong { color: var(--ink); font-size: var(--text-sm); }

.studio-rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.studio-slot { position: relative; }
.studio-slot.is-empty { border-style: dashed; background: var(--surface); }
.studio-slot.is-empty .strip-title { color: var(--ink-faint); }
.studio-slot-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ember-strong);
  background: var(--ember-dim);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.3rem;
}
.studio-slot-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.studio-slot .cat-chip { margin-top: -4px; }

.studio-picker {
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-control);
  transform-origin: top left;
  animation: pop-in var(--dur-base) var(--ease-out) both;
}
.studio-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
}
.studio-picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.studio-picker-filters input,
.studio-picker-filters select {
  flex: 1;
  min-width: 140px;
}
.studio-picker-results {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.studio-picker-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.studio-picker-row:last-child { border-bottom: none; }
.studio-picker-row:hover { background: color-mix(in oklch, var(--surface-raised) 55%, transparent); }
.studio-picker-row .track-title { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-picker-empty { padding: var(--space-4); text-align: center; }
.studio-picker-note { padding: var(--space-2) var(--space-4) 0; margin: 0; font-size: var(--text-2xs); }

.studio-save-row {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}
.studio-name-input { flex: 1; }
.studio-variations-head {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.studio-variations { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-variation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
}
.studio-variation-info { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.studio-variation-info span { font-size: var(--text-2xs); }
.studio-empty-note { margin: 0; padding: var(--space-3) 0; }

/* =============================== Utility =================================== */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--ink-muted); }
.text-faint { color: var(--ink-faint); }