/* ==========================================================================
   MP-Beats — producer console

   Layout only. Every button, input, card, badge, chip, switch, table, modal,
   skeleton and state block on these screens is composed from components.css;
   nothing here redefines a primitive, and nothing here hard-codes a colour,
   radius, shadow, duration or easing — it all derives from tokens.css through
   var() / color-mix() / calc().

   Ownership note: five console views (upload, orders, audience, licenses,
   settings) ship their own <style> block at import time and own every rule for
   their `up- / ord- / aud- / lic- / set-` namespaces. This file therefore owns
   the shell, the dashboard, the catalogue table and the beat editor in full,
   and only fills the handful of gaps those injected sheets leave (section 10).
   Because their <style> lands in <head> after this link element, anything they
   do declare wins — so nothing below re-states a property they already set.
   ========================================================================== */

/* ==========================================================================
   1. Console frame
   ========================================================================== */

.admin {
  /* The site header floats over the page; #view already reserves its height,
     so every sticky thing inside the console measures from the same origin. */
  --admin-top: calc(var(--header-h) + var(--safe-t));
  --admin-bar-h: 54px;
  --admin-gutter: clamp(1rem, 0.4rem + 2vw, 2.5rem);
  --admin-max: 1320px;
  --nav-w: 258px;
  --rail-w: 76px;

  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100svh - var(--admin-top));
  /* Nothing in the console may push the document sideways. */
  max-width: 100%;
}

.admin[data-nav='rail'] {
  --nav-w: var(--rail-w);
}

/* The redirect placeholder and the "not authorised" screen */
.admin-guard {
  width: 100%;
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: var(--space-16) var(--gutter) var(--space-24);
}

/* ==========================================================================
   2. Sidebar — permanent furniture, not a floating panel
   ========================================================================== */

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-3) var(--space-3);
}

/* Only the docked sidebar sticks and collapses. The identical panel inside the
   mobile drawer always shows its labels, so every rule that shrinks the rail is
   scoped to the direct child. */
.admin > .admin-nav {
  position: sticky;
  top: var(--admin-top);
  height: calc(100svh - var(--admin-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: max(var(--space-3), var(--safe-l));
  /* The player bar is fixed over the bottom of the viewport — the rail's own
     footer links have to clear it. See --admin-dock at the foot of this file;
     the fallback covers a first paint before the route lands on <html>. */
  padding-bottom: var(--admin-dock, calc(var(--player-h) + var(--space-4) + var(--safe-b)));
  background: color-mix(in oklab, var(--surface-base) 76%, transparent);
  border-right: 1px solid var(--border-subtle);
  scrollbar-width: thin;
  transition: width var(--dur-base) var(--ease-out);
}

.admin-nav__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 44px;
  margin-bottom: var(--space-3);
}

.admin-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-nav__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* Language switch — positioning only; .lang-toggle owns its own looks. */
.admin-nav__lang {
  display: flex;
  min-width: 0;
  margin-top: var(--space-2);
  padding-inline: var(--space-2);
}

.admin-nav__lang > .lang-toggle {
  width: 100%;
}

/* In the collapsed rail the segmented control stacks instead of overflowing. */
.admin[data-nav='rail'] > .admin-nav .admin-nav__lang {
  padding-inline: 0;
}

.admin[data-nav='rail'] > .admin-nav .admin-nav__lang > .lang-toggle {
  flex-direction: column;
}

/* ---- Brand block ------------------------------------------------------ */

.admin-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}

.admin-brand:hover {
  background: var(--glass-thin);
}

.admin-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.admin-brand__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--gradient-ember);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  box-shadow: var(--shadow-xs);
}

.admin-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--leading-tight);
}

.admin-brand__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-brand__role {
  font-size: var(--text-2xs);
  color: var(--text-quiet);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.admin-rail-toggle {
  flex: 0 0 auto;
  color: var(--text-quiet);
}

/* ---- Nav links -------------------------------------------------------- */

.admin-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  transition: var(--transition-colors);
}

.admin-nav__link:hover {
  background: var(--glass-thin);
  color: var(--text-primary);
}

.admin-nav__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-nav__link.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

/* A hairline ember tab on the active row — the "you are here" of the console */
.admin-nav__link.is-active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--space-3) * -1 + 1px);
  width: 2px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translateY(-50%);
}

.admin-nav__link--quiet {
  color: var(--text-tertiary);
  font-weight: var(--weight-regular);
}

.admin-nav__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  color: currentcolor;
}

.admin-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shortcut hints stay ghosted until the row is under the cursor */
.admin-nav__hot {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.admin-nav__link:hover .admin-nav__hot,
.admin-nav__link:focus-visible .admin-nav__hot {
  opacity: 0.8;
}

.admin-nav__hot .kbd {
  min-width: 16px;
  padding: 0 4px;
  border-bottom-width: 1px;
  font-size: var(--text-2xs);
  line-height: 1.5;
}

/* ---- Collapsed rail --------------------------------------------------- */

.admin[data-nav='rail'] > .admin-nav {
  padding-inline: var(--space-3);
  align-items: stretch;
}

.admin[data-nav='rail'] > .admin-nav .admin-brand__text,
.admin[data-nav='rail'] > .admin-nav .admin-nav__label,
.admin[data-nav='rail'] > .admin-nav .admin-nav__hot {
  display: none;
}

.admin[data-nav='rail'] > .admin-nav .admin-nav__top {
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.admin[data-nav='rail'] > .admin-nav .admin-brand {
  justify-content: center;
  flex: 0 0 auto;
}

.admin[data-nav='rail'] > .admin-nav .admin-nav__link {
  justify-content: center;
  padding-inline: 0;
  min-height: 42px;
}

.admin[data-nav='rail'] > .admin-nav .admin-nav__link.is-active::before {
  left: calc(var(--space-3) * -1);
}

/* Below 1100px the rail is forced regardless of the stored preference */
@media (max-width: 1100px) {
  .admin {
    --nav-w: var(--rail-w);
  }

  .admin > .admin-nav {
    padding-inline: var(--space-3);
  }

  .admin > .admin-nav .admin-brand__text,
  .admin > .admin-nav .admin-nav__label,
  .admin > .admin-nav .admin-nav__hot,
  .admin > .admin-nav .admin-rail-toggle {
    display: none;
  }

  .admin > .admin-nav .admin-nav__top {
    justify-content: center;
  }

  .admin > .admin-nav .admin-nav__link {
    justify-content: center;
    padding-inline: 0;
    min-height: 42px;
  }

  .admin > .admin-nav .admin-nav__lang {
    padding-inline: 0;
  }

  .admin > .admin-nav .admin-nav__lang > .lang-toggle {
    flex-direction: column;
  }
}

/* ==========================================================================
   3. Mobile top bar + navigation drawer
   ========================================================================== */

.admin-topbar {
  display: none;
  grid-column: 1 / -1;
  position: sticky;
  top: var(--admin-top);
  z-index: calc(var(--z-sticky) + 1);
  align-items: center;
  gap: var(--space-2);
  min-height: var(--admin-bar-h);
  padding: var(--space-2) var(--admin-gutter);
  padding-left: max(var(--admin-gutter), var(--safe-l));
  padding-right: max(var(--admin-gutter), var(--safe-r));
  background: var(--glass-thick);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-topbar__menu {
  flex: 0 0 auto;
}

.admin-topbar__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.admin-topbar__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--gradient-ember);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-black);
}

.admin-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.admin-drawer__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--surface-void) 74%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}

.admin-drawer.is-open .admin-drawer__scrim {
  opacity: 1;
}

.admin-drawer__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(292px, 86vw);
  padding-top: var(--safe-t);
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l);
  background: var(--surface-overlay);
  border-right: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
}

.admin-drawer.is-open .admin-drawer__panel {
  transform: none;
}

.admin-drawer__panel .admin-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}

@media (min-width: 861px) {
  .admin-drawer {
    display: none;
  }
}

@media (max-width: 860px) {
  .admin {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin > .admin-nav {
    display: none;
  }

  .admin-topbar {
    display: flex;
  }
}

/* ==========================================================================
   4. Page column — generous header, dense body
   ========================================================================== */

.admin-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--admin-gutter);
  padding-left: max(var(--admin-gutter), var(--safe-l));
  padding-right: max(var(--admin-gutter), var(--safe-r));
  padding-bottom: var(--space-16);
}

.admin-page__head,
.admin-page__body {
  width: 100%;
  max-width: var(--admin-max);
  margin-inline: auto;
}

.admin-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-block: var(--space-10) var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-page__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 22rem;
}

.admin-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.admin-page__sub {
  max-width: 64ch;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.admin-page__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.admin-page__body {
  min-width: 0;
}

@media (max-width: 860px) {
  .admin-page {
    padding-bottom: var(--space-12);
  }

  .admin-page__head {
    padding-block: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
  }

  .admin-page__actions .btn {
    flex: 1 1 auto;
  }
}

/* The console's sticky furniture must clear the site header and, on phones,
   the console top bar as well. Scoped so the views' own sheets keep every
   other property they set. */
.admin .up-head,
.admin .set-nav__wrap {
  top: calc(var(--admin-top) + var(--space-2));
}

@media (max-width: 860px) {
  .admin .up-head,
  .admin .set-nav__wrap {
    top: calc(var(--admin-top) + var(--admin-bar-h) + var(--space-2));
  }
}

/* ==========================================================================
   5. Shared console bits
   ========================================================================== */

/* Square artwork thumb used by every console list. `.art` is a <span>, so it
   needs a box before aspect-ratio and width can do anything. */
.adm-thumb {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

.adm-thumb .art__initials {
  font-size: 40%;
  letter-spacing: var(--tracking-tight);
}

/* Muted placeholder text inside dense tables */
.t-quiet {
  color: var(--text-quiet);
}

/* Panels used across the dashboard */
.panel-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.panel-head__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.panel-head__sub {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.panel-head .tabs {
  flex: 0 0 auto;
}

/* Skeleton row used by the dashboard panels while the numbers land */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-row > .skeleton--square {
  flex: 0 0 auto;
  height: 40px;
}

.skeleton-row > .skeleton--text:last-child {
  flex: 0 0 auto;
}

/* Modal width modifiers — the console opens `sm` (shortcuts) and `lg`
   (order receipt, licence editor) dialogs. */
.modal--sm {
  width: min(440px, 100%);
}

.modal--md {
  width: min(560px, 100%);
}

.modal--lg {
  width: min(780px, 100%);
}

/* Keyboard shortcut sheet */
.admin-shortcuts {
  display: flex;
  flex-direction: column;
}

.admin-shortcuts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-shortcuts__row:last-child {
  border-bottom: none;
}

.admin-shortcuts__what {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.admin-shortcuts__keys {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 0 0 auto;
  color: var(--text-quiet);
  font-size: var(--text-2xs);
}

.admin-shortcuts__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ==========================================================================
   6. Dashboard
   ========================================================================== */

.dash {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--space-4);
}

.dash__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1040px) {
  .dash__grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  }

  .dash__chart {
    grid-column: 1;
    grid-row: 1;
  }

  .dash__top {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .dash__attention {
    grid-column: 1;
    grid-row: 2;
  }

  .dash__orders {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ---- KPI cards — quiet, with the number as the hero ------------------- */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5);
  background: var(--surface-base);
  transition: border-color var(--dur-base) var(--ease-out);
}

.kpi:hover {
  border-color: var(--border-default);
}

.kpi__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.kpi__glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-xs);
  background: var(--glass-medium);
  color: var(--text-tertiary);
}

/* The caption wraps rather than truncating — a KPI whose label reads
   "REVENUE · 30 DA…" has failed at its only job. */
.kpi__label {
  min-width: 0;
  padding-top: 5px;
  line-height: var(--leading-snug);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.kpi__value {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.kpi__affix {
  font-size: 0.62em;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.kpi__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 20px;
}

.kpi__meta:empty {
  display: none;
}

.kpi__foot {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--text-quiet);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

/* ---- Hand-drawn SVG trend chart -------------------------------------- */

.chart {
  position: relative;
  width: 100%;
  min-width: 0;
}

.chart__canvas {
  width: 100%;
  min-width: 0;
}

.chart__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Pointer inspection must never steal a vertical scroll gesture */
  touch-action: pan-y;
}

.chart__svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.chart__grid {
  stroke: var(--border-subtle);
  stroke-width: 1;
  shape-rendering: crispedges;
}

.chart__ylabel,
.chart__xlabel {
  fill: var(--text-quiet);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.chart__empty {
  fill: var(--text-quiet);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.chart__stop-a {
  stop-color: var(--brand-accent);
  stop-opacity: 0.32;
}

.chart__stop-b {
  stop-color: var(--brand-accent);
  stop-opacity: 0;
}

.chart__stroke-a {
  stop-color: var(--brand-accent);
}

.chart__stroke-b {
  stop-color: var(--brand-accent-2);
}

/* The fill is a per-chart gradient set inline; the stroke must stay off. */
.chart__area {
  stroke: none;
  pointer-events: none;
}

.chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__last {
  fill: var(--accent);
  stroke: var(--surface-raised);
  stroke-width: 2;
}

.chart__cursor {
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.chart__dot {
  fill: var(--accent);
  stroke: var(--surface-raised);
  stroke-width: 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

/* SVG elements ignore the `hidden` IDL attribute, so the readout state is a
   class the stylesheet owns. */
.chart__cursor.is-on,
.chart__dot.is-on {
  opacity: 1;
}

.chart__hit {
  cursor: crosshair;
}

.chart__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}

.chart__tip-day {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

.chart__tip-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- Top beats -------------------------------------------------------- */

.top-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.top-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.top-list__row:last-child {
  border-bottom: none;
}

.top-list__rank {
  flex: 0 0 auto;
  width: 2ch;
  color: var(--text-quiet);
  font-size: var(--text-2xs);
}

.top-list__play {
  flex: 0 0 auto;
}

.top-list__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--space-1);
  border-radius: var(--radius-xs);
}

.top-list__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: color var(--dur-fast) var(--ease-soft);
}

.top-list__body:hover .top-list__title {
  color: var(--accent-text);
}

.top-list__stat {
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
}

.top-list__open {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.top-list__row:hover .top-list__open,
.top-list__open:focus-visible {
  opacity: 1;
}

@media (pointer: coarse) {
  .top-list__open {
    opacity: 1;
  }
}

/* ---- Needs attention -------------------------------------------------- */

.attention {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.attention__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  transition: border-color var(--dur-base) var(--ease-out);
}

.attention__row:hover {
  border-color: var(--border-default);
}

.attention__glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--glass-medium);
  color: var(--text-tertiary);
}

.attention__glyph--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.attention__glyph--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.attention__glyph--info {
  background: var(--info-soft);
  color: var(--info);
}

.attention__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.attention__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.attention__text {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.attention__cta {
  flex: 0 0 auto;
  align-self: center;
}

@media (max-width: 520px) {
  .attention__row {
    flex-wrap: wrap;
  }

  .attention__cta {
    width: 100%;
  }
}

/* ---- Recent orders table --------------------------------------------- */

.orders-table {
  min-width: 34rem;
}

.orders-table__id {
  font-size: var(--text-xs);
  color: var(--accent-text);
}

.orders-table__id:hover {
  text-decoration: underline;
}

.dash__orders .table-wrap {
  border-color: var(--border-subtle);
  background: transparent;
}

/* ==========================================================================
   7. Catalogue manager
   ========================================================================== */

.beats {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.beats__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.beats__search {
  flex: 1 1 18rem;
  min-width: 0;
}

.beats__status {
  flex: 0 1 auto;
  max-width: 100%;
}

.beats__selects {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 20rem;
  min-width: 0;
}

.beats__select {
  flex: 1 1 8rem;
  min-width: 0;
  width: auto;
}

.beats__chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.beats__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--info-soft);
  color: var(--info);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.beats__notice .icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

/* ---- Table ------------------------------------------------------------ */

.beats__table-wrap {
  /* Tables scroll inside their own box; the page never moves sideways. */
  overscroll-behavior-x: contain;
}

.beats__table {
  min-width: 62rem;
}

.beats__table td {
  padding-block: var(--space-2);
  color: var(--text-secondary);
}

.beats__rows {
  min-width: 0;
}

/* Empty, error and "no matches" states are painted into one spanning cell —
   they supply their own padding, so the cell must not add another layer. */
.beats__rows > tr > td[colspan] {
  padding: 0;
  border-bottom: none;
}

.beats__row {
  transition: background-color var(--dur-fast) var(--ease-soft);
}

.beats__row.is-selected {
  background: var(--accent-softer);
}

.beats__row.is-skeleton td {
  height: 52px;
}

.beats__row.is-skeleton .skeleton {
  height: 0.8em;
}

/* Column sizing — dense, with the beat itself taking whatever is left */
.col-check {
  width: 1%;
  padding-right: 0;
}

.col-drag {
  width: 1%;
  padding-inline: var(--space-1);
}

.col-beat {
  min-width: 16rem;
}

.col-status,
.col-genre,
.col-updated {
  width: 1%;
  white-space: nowrap;
}

.col-bpm,
.col-price,
.col-num {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.beats__table th.col-bpm,
.beats__table th.col-price,
.beats__table th.col-num {
  text-align: right;
}

.col-actions {
  width: 1%;
  padding-left: 0;
}

/* ---- Row contents ----------------------------------------------------- */

.beats__check {
  display: grid;
  place-items: center;
  min-height: 30px;
  cursor: pointer;
}

/* A bare checkbox, styled to match `.checkbox input` without redefining it */
.beats__check input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-base);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  cursor: pointer;
  transition: var(--transition-colors);
}

.beats__check input:hover {
  border-color: var(--accent);
}

.beats__check input:checked,
.beats__check input:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
}

.beats__check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
}

.beats__check input:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5.5 12h13'/%3E%3C/svg%3E");
}

.beats__check input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.beats__handle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 30px;
  border-radius: var(--radius-xs);
  color: var(--text-quiet);
  cursor: not-allowed;
  opacity: 0.4;
  /* Pointer-driven drag must not double as a scroll gesture */
  touch-action: none;
  transition: var(--transition-colors), opacity var(--dur-fast) var(--ease-soft);
}

.beats__table-wrap.is-reorderable .beats__handle {
  cursor: grab;
  opacity: 1;
}

.beats__table-wrap.is-reorderable .beats__handle:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.beats__table-wrap.is-dragging .beats__handle {
  cursor: grabbing;
}

.beats__beat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.beats__art {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.beats__art:hover {
  opacity: 0.82;
}

.beats__names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.beats__title {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease-soft);
}

.beats__title:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.beats__rename {
  min-height: 30px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.beats__slug {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-quiet);
  font-size: var(--text-2xs);
}

.beats__slug a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.beats__flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.beats__pill {
  gap: var(--space-1);
  text-transform: capitalize;
}

.beats__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background: var(--text-quiet);
}

.beats__dot[data-status='published'] {
  background: var(--success);
}

.beats__dot[data-status='draft'] {
  background: var(--warning);
}

.beats__dot[data-status='archived'] {
  background: var(--text-quiet);
}

.beats__key {
  margin-left: var(--space-2);
  color: var(--text-quiet);
  font-size: var(--text-2xs);
}

.beats__more {
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-soft);
}

.beats__row:hover .beats__more,
.beats__more:focus-visible,
.beats__more[aria-expanded='true'] {
  opacity: 1;
}

@media (pointer: coarse) {
  .beats__more {
    opacity: 1;
  }
}

.beats__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.beats__foot .pagination {
  margin-top: 0;
}

.beats__count {
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---- Drag to reorder -------------------------------------------------- */

.beats__row.is-dragging {
  position: relative;
  z-index: var(--z-raised);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}

.beats__row.is-drop-before td {
  box-shadow: inset 0 2px 0 0 var(--accent);
}

.beats__row.is-drop-after td {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

body.is-row-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Bulk action bar — snaps in from the bottom ----------------------- */

.bulkbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--player-h) + var(--space-4) + var(--safe-b));
  z-index: var(--z-sticky);
  width: max-content;
  max-width: calc(100vw - var(--space-8));
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, calc(100% + var(--space-10)));
  transition:
    transform var(--dur-base) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-soft),
    visibility 0s linear var(--dur-base);
}

.bulkbar.is-open {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition:
    transform var(--dur-base) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-soft),
    visibility 0s;
}

.bulkbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--glass-thick);
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
  box-shadow: var(--shadow-xl);
}

.bulkbar__count {
  flex: 0 0 auto;
  padding-left: var(--space-3);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bulkbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-inline: var(--space-1);
  border-inline: 1px solid var(--border-subtle);
}

.bulkbar__actions::-webkit-scrollbar {
  display: none;
}

.bulkbar__actions .btn {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .bulkbar {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
    max-width: none;
    bottom: calc(var(--player-h-mobile) + var(--tabbar-h) + var(--safe-b) + var(--space-3));
    transform: translate(0, calc(100% + var(--space-10)));
  }

  .bulkbar.is-open {
    transform: translate(0, 0);
  }

  .bulkbar__inner {
    border-radius: var(--radius-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bulkbar {
    transition: opacity var(--dur-fast) var(--ease-soft), visibility 0s;
    transform: translate(-50%, 0);
  }

  .bulkbar.is-open {
    transform: translate(-50%, 0);
  }
}

/* ---- Row action menu (portalled to <body>) ---------------------------- */

.rowmenu {
  position: fixed;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-xl);
  animation: fade-up var(--dur-fast) var(--ease-out) both;
}

.rowmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: left;
  transition: var(--transition-colors);
}

.rowmenu__item .icon {
  flex: 0 0 auto;
  color: var(--text-quiet);
}

.rowmenu__item:hover,
.rowmenu__item:focus-visible {
  background: var(--surface-hover);
  color: var(--text-primary);
  outline: none;
}

.rowmenu__item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.rowmenu__item:hover .icon,
.rowmenu__item:focus-visible .icon {
  color: currentcolor;
}

.rowmenu__item--danger {
  color: var(--danger);
}

.rowmenu__item--danger .icon {
  color: currentcolor;
}

.rowmenu__item--danger:hover,
.rowmenu__item--danger:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .rowmenu {
    animation: none;
  }
}

/* ==========================================================================
   8. Beat editor
   ========================================================================== */

.editor {
  min-width: 0;
}

.editor__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1040px) {
  .editor__cols {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    gap: var(--space-6);
  }
}

.editor__main,
.editor__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.editor__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.editor__card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor__card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.editor__card-sub {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.editor__danger {
  border-color: color-mix(in oklab, var(--danger) 32%, transparent);
  background: color-mix(in oklab, var(--danger) 5%, var(--surface-raised));
}

.editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-4);
}

.editor__slug-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.editor__slug-prefix {
  flex: 0 0 auto;
  color: var(--text-quiet);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.editor__slug {
  flex: 1 1 auto;
  min-width: 0;
}

.editor__slug:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.editor__counter {
  align-self: flex-end;
  color: var(--text-quiet);
  font-size: var(--text-2xs);
}

.editor__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.editor__note .icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.editor__switch {
  align-items: flex-start;
  gap: var(--space-3);
}

.editor__switch-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.editor__switch-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.editor__player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* One line telling the producer what the machine does for him. */
.editor__auto {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.editor__auto .icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
}

/* ---- Audio drop zone --------------------------------------------------- */

.audiodrop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--accent-softer), transparent 70%),
    var(--surface-base);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.audiodrop:hover {
  border-color: var(--border-accent);
}

.audiodrop.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

.audiodrop.is-busy,
.audiocurrent.is-busy {
  cursor: progress;
}

.audiodrop__glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.audiodrop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.audiodrop__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.audiodrop__hint {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

.audiodrop__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.audiodrop__stage {
  color: var(--text-secondary);
  font-size: var(--text-2xs);
}

/* The player on an existing beat doubles as a drop target for a new file. */
.audiocurrent {
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.audiocurrent.is-over {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}

@media (max-width: 480px) {
  .audiodrop {
    flex-direction: column;
    padding: var(--space-4);
  }
}

/* ---- Advanced settings ------------------------------------------------- */

.advanced {
  min-width: 0;
}

.advanced__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-soft);
}

.advanced__summary::-webkit-details-marker {
  display: none;
}

.advanced__summary:hover .advanced__title {
  color: var(--accent-text);
}

.advanced__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.advanced__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.advanced__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-fast) var(--ease-soft);
}

.advanced__sub {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.advanced__chev {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-out);
}

.advanced[open] .advanced__chev {
  transform: rotate(180deg);
}

.advanced__body {
  margin-top: var(--space-5);
  animation: fade-in var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .advanced__body {
    animation: none;
  }
}

.field__req {
  margin-left: 2px;
  color: var(--danger);
}

/* ---- Save bar --------------------------------------------------------- */

.savebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.savebar__status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.savebar__state {
  color: var(--text-quiet);
  font-size: var(--text-xs);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}

.savebar__state.is-dirty {
  color: var(--warning);
  font-weight: var(--weight-semibold);
}

.savebar__kbd {
  margin-left: var(--space-1);
  border-bottom-width: 1px;
  opacity: 0.7;
}

@media (pointer: coarse) {
  .savebar__kbd {
    display: none;
  }
}

/* On phones the save bar leaves the header and pins itself above the player */
@media (max-width: 860px) {
  .savebar {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--player-h-mobile) + var(--tabbar-h) + var(--safe-b) + var(--space-3));
    z-index: var(--z-sticky);
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--glass-thick);
    backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4);
    box-shadow: var(--shadow-xl);
  }

  .savebar__status {
    flex: 1 1 100%;
    order: -1;
  }

  .savebar .btn {
    flex: 1 1 auto;
  }
}

/* ---- Artwork drop zone ------------------------------------------------ */

.artdrop {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.artdrop:hover {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}

.artdrop.is-over {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  box-shadow: var(--glow-accent);
}

.artdrop__preview {
  flex: 0 0 auto;
  width: 88px;
  border-radius: var(--radius-md);
  pointer-events: none;
}

.artdrop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.artdrop__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.artdrop__hint {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
}

@media (max-width: 400px) {
  .artdrop {
    flex-direction: column;
    align-items: stretch;
  }

  .artdrop__preview {
    width: 100%;
    max-width: 150px;
  }
}

/* Upload progress ring, laid over the artwork preview */
.ring {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--surface-void) 68%, transparent);
  color: var(--text-primary);
  pointer-events: none;
}

.ring svg {
  position: absolute;
  transform: rotate(-90deg);
}

.ring__track {
  fill: none;
  stroke: var(--border-default);
  stroke-width: 4;
}

.ring__bar {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-fast) linear;
}

.ring__label {
  position: relative;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* ---- Segmented status control ----------------------------------------- */

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.segmented__item {
  min-height: 34px;
  padding-inline: var(--space-2);
  border-radius: calc(var(--radius-md) - var(--space-1));
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-soft);
}

.segmented__item:hover {
  color: var(--text-primary);
}

.segmented__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The live status has to be readable at a glance from across the room, so the
   active segment is filled with the accent rather than merely tinted. */
.segmented__item[aria-checked='true'] {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-xs);
}

.segmented__item[aria-checked='true']:hover {
  color: var(--accent-contrast);
}

/* Header-sized: it shares a row with Save. */
.segmented--compact {
  gap: 2px;
  padding: 2px;
  background: var(--surface-raised);
}

.segmented--compact .segmented__item {
  min-height: 28px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.savebar__seg {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .savebar__seg {
    flex: 1 1 100%;
    order: -1;
  }
}

/* ---- Per-beat licence pricing ----------------------------------------- */

.license {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.license.is-overridden {
  border-color: var(--border-accent);
}

.license.is-off {
  opacity: 0.55;
}

.license__toggle {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

.license__names {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.license__name {
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.license__default {
  color: var(--text-quiet);
}

.license__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 7.5rem;
}

.license__currency {
  position: absolute;
  left: var(--space-3);
  color: var(--text-quiet);
  font-size: var(--text-xs);
  pointer-events: none;
}

.license__price {
  min-height: 38px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-8);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.license.is-overridden .license__price {
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

/* ---- Attached files --------------------------------------------------- */

.filelist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.filelist__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.filelist__row:last-child {
  border-bottom: none;
}

.filelist__kind {
  flex: 0 0 4.5rem;
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.filelist__name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.filelist__size {
  flex: 0 0 auto;
  color: var(--text-quiet);
}

/* ---- Performance mini-stats ------------------------------------------- */

.ministats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--space-2);
}

.ministats__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

.ministats__label {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.ministats__value {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* ---- Combobox --------------------------------------------------------- */

.combo {
  position: relative;
  min-width: 0;
}

.combo__input {
  width: 100%;
}

.combo__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  left: 0;
  z-index: var(--z-raised);
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  box-shadow: var(--shadow-lg);
}

.combo__option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.combo__option:hover,
.combo__option.is-active {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* ---- Tag input -------------------------------------------------------- */

.taginput {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  cursor: text;
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-soft);
}

.taginput:hover {
  border-color: var(--border-strong);
}

.taginput:focus-within {
  border-color: var(--accent);
  background: var(--surface-raised);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The chips wrapper must not become a flex row of its own — the chips and the
   input share one wrapping line. */
.taginput__chips {
  display: contents;
}

.taginput__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-1) 2px var(--space-2);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.taginput__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  color: inherit;
  opacity: 0.65;
  transition: opacity var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}

.taginput__x:hover {
  opacity: 1;
  background: color-mix(in oklab, var(--brand-accent) 26%, transparent);
}

.taginput__x:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.taginput__input {
  flex: 1 1 8ch;
  min-width: 8ch;
  padding-block: var(--space-1);
  border: none;
  background: none;
  color: var(--text-primary);
  /* iOS zooms a focused field under 16px */
  font-size: max(16px, var(--text-sm));
  outline: none;
}

.taginput__input::placeholder {
  color: var(--text-quiet);
}

@media (min-width: 861px) {
  .taginput__input {
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   9. Console-wide focus + motion hygiene
   ========================================================================== */

/* Every duration token collapses to 1ms under prefers-reduced-motion, so the
   only things left to silence are the movements this file introduces. */
@media (prefers-reduced-motion: reduce) {
  .admin-drawer__scrim,
  .admin-drawer__panel,
  .chart__cursor,
  .chart__dot,
  .ring__bar,
  .top-list__open,
  .admin-nav__hot,
  .beats__more {
    transition: none;
  }

  .admin-drawer__panel {
    /* No slide — the panel is simply there once the drawer opens. */
    transform: none;
    opacity: 0;
  }

  .admin-drawer.is-open .admin-drawer__panel {
    opacity: 1;
  }
}

/* ==========================================================================
   10. Complements for the self-styling views
   Only the handful of hooks those injected sheets reference but never define.
   Nothing here re-states a property they already set.
   ========================================================================== */

.ord-body,
.aud-body,
.lic-body,
.set-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ord-stats,
.aud-stats,
.ord-pager,
.aud-pager {
  min-width: 0;
}

.ord-stats:empty,
.aud-stats:empty,
.ord-pager:empty,
.aud-pager:empty {
  display: none;
}

.ord-pager .pagination,
.aud-pager .pagination {
  margin-top: var(--space-4);
}

.ord-detail__loading {
  padding-block: var(--space-4);
}

.ord-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ord-line__lic {
  color: var(--text-tertiary);
}

.ord-cell-when,
.ord-cell-who {
  min-width: 0;
  vertical-align: top;
}

.aud-cell-source,
.aud-cell-joined {
  white-space: nowrap;
}

.lic-field {
  min-width: 0;
}

.up-head__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.up-card__badge {
  margin-left: auto;
}

.up-failed {
  border-color: color-mix(in oklab, var(--warning) 28%, transparent);
}

.set-nav__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-save__hint {
  color: var(--text-quiet);
}

/* ==========================================================================
   Admin takeover
   The console owns the whole window. Without this the storefront header,
   footer and mobile tab bar stack on top of the admin chrome, giving the
   producer two navigations and a doubled brand mark.
   ========================================================================== */

html[data-route^="/admin"] #header,
html[data-route^="/admin"] #footer,
html[data-route^="/admin"] #tabbar {
  display: none !important;
}

/* The storefront reserves space for the fixed player; the console does not. */
html[data-route^="/admin"] #view {
  padding-bottom: 0;
}

/* Keep the player usable while managing the catalogue — the producer previews
   beats from the beats table — but give it the console's full width.
   `has-player` is toggled on <body> (components/player-bar.js), not on <html>. */
html[data-route^="/admin"] body.has-player #view {
  padding-bottom: var(--player-h);
}

@media (max-width: 860px) {
  html[data-route^="/admin"] body.has-player #view {
    padding-bottom: calc(var(--player-h-mobile) + var(--safe-b));
  }
}

/* With the storefront header gone, #view's reserved header band would leave a
   dead strip above the console, and every sticky offset inside the shell would
   be pushed down by exactly that much. */
html[data-route^="/admin"] #view {
  padding-top: var(--safe-t);
}

html[data-route^="/admin"] .admin {
  --admin-top: var(--safe-t);
}

/* One number for "how much of the bottom of the window is already spoken for".
   The tab bar is hidden on console routes and the player only exists while
   something is playing, so everything that docks to the bottom — the bulk bar,
   the editor's save bar, the settings save bar and the toasts they fire —
   reads the same value instead of each guessing. */
html[data-route^="/admin"] {
  --admin-dock: calc(var(--space-5) + var(--safe-b));
}

html[data-route^="/admin"] body.has-player {
  --admin-dock: calc(var(--player-h) + var(--space-4) + var(--safe-b));
}

@media (max-width: 860px) {
  html[data-route^="/admin"] {
    --admin-dock: calc(var(--space-4) + var(--safe-b));
  }

  html[data-route^="/admin"] body.has-player {
    --admin-dock: calc(var(--player-h-mobile) + var(--space-3) + var(--safe-b));
  }
}

html[data-route^="/admin"] .bulkbar,
html[data-route^="/admin"] .savebar,
html[data-route^="/admin"] .set-save,
html[data-route^="/admin"] .toast-root {
  bottom: var(--admin-dock);
}

/* ==========================================================================
   Payments master switch
   Turning this off releases every beat for free, so it is deliberately not
   just another row in the switch list — it states its own consequence.
   ========================================================================== */

.set-payments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  transition: border-color var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft);
}

.set-payments.is-live {
  border-color: color-mix(in oklab, var(--success) 40%, transparent);
  background: color-mix(in oklab, var(--success) 5%, var(--surface-base));
}

.set-payments.is-free {
  border-color: var(--border-accent);
  background: var(--accent-softer);
}

.set-payments__switch {
  align-items: flex-start;
  gap: var(--space-4);
}

.set-payments__state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

.set-payments__state .icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.set-payments.is-live .set-payments__state .icon { color: var(--success); }
.set-payments.is-free .set-payments__state .icon { color: var(--accent-text); }
