/* ==========================================================================
   Tinderino — design tokens
   Minimal, near-black surface with purple + osu! pink accents.
   Three color roles only: background (near-black), foreground (grays),
   accents (purple = secondary, pink = primary).
   ========================================================================== */
:root {
  color-scheme: dark;

  /* Background */
  --bg: #0a0a0f;
  --surface: #13131a; /* cards / sheets / drawers — floats above the page */
  --surface-2: #1b1b24; /* control fills inside surfaces */
  --border: #22222e;
  --border-strong: #2e2e3c;
  --divider: #1c1c26;

  /* Foreground */
  --text: #e8e8ef;
  --muted: #a0a0b0;
  --muted-2: #65656f; /* tertiary / disabled */

  /* Accents */
  --purple: #9d6bff; /* secondary actions, info, skip affordance */
  --pink: #ff66aa; /* PRIMARY: CTAs, save affordance, active chips, brand */
  --accent: var(--pink);
  --accent-2: var(--purple);
  --accent-gradient: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);

  /* State (use sparingly) */
  --success: #5fd17a;
  --warning: #ffb547;
  --error: #ff5d6c;
  --danger: var(--error);

  /* Radius scale */
  --radius-input: 2px;
  --radius-md: 8px; /* cards / buttons */
  --radius-card: 12px; /* beatmap cover frame */
  --radius-sheet: 16px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Elevation — restrained */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.55);

  --tap-size: 44px;

  /* osu! difficulty colors (lazer palette) — consumed by app.ts */
  --diff-easy: #88c0d0;
  --diff-normal: #4ade80;
  --diff-hard: #facc15;
  --diff-insane: #f97316;
  --diff-expert: #ec4899;
  --diff-expertplus: #a855f7;
}

* {
  box-sizing: border-box;
}

/* [hidden] must beat display:flex used on sheets/drawers. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 960px;
  margin: 0 auto;
}

/* ==========================================================================
   Header + brand
   ========================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
}

.brand-mark {
  /* Cat + shamisen outline — purple→pink gradient via mask. */
  display: inline-block;
  width: 20px;
  height: 18px;
  background: var(--accent-gradient);
  mask-image: url("/tinderino-logo-icon.png");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("/tinderino-logo-icon.png");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
}

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

/* ==========================================================================
   Icon button + badge
   ========================================================================== */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-size);
  height: var(--tap-size);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 80ms ease;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.icon-btn-badge-host {
  position: relative;
}

.icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--pink);
  color: #0a0a0f;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
}

.lucide {
  display: block;
  flex: 0 0 auto;
}

/* ==========================================================================
   Component primitives (.sm-*) — shared by filters + settings sheets
   ========================================================================== */
.sm-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sm-section__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sm-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 36px;
}

.sm-field--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.sm-field__label {
  font-size: 14px;
  color: var(--text);
}

.sm-field__value {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sm-field__hint {
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.4;
}

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

.sm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 80ms ease;
}

.sm-button:active {
  transform: scale(0.98);
}

.sm-button--primary {
  background: var(--pink);
  color: #0a0a0f;
}

.sm-button--primary:hover {
  background: var(--accent-gradient);
  color: #fff;
}

.sm-button--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.sm-button--secondary:hover {
  border-color: var(--border-strong);
}

.sm-button--ghost {
  background: transparent;
  color: var(--muted);
}

.sm-button--ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.sm-button--block {
  width: 100%;
}

.sm-button--sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
}

.sm-input {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.sm-input::placeholder {
  color: var(--muted-2);
}

.sm-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}

.sm-input--mask {
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Switch — appearance-reset checkbox */
.sm-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 40px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.sm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 140ms ease, background 140ms ease;
}

.sm-switch:checked {
  background: var(--pink);
  border-color: var(--pink);
}

.sm-switch:checked::after {
  transform: translateX(16px);
  background: #0a0a0f;
}

.sm-switch:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Chip / pill */
.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sm-chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.sm-chip.sm-chip--active,
.sm-chip[aria-pressed="true"] {
  background: var(--pink);
  border-color: var(--pink);
  color: #0a0a0f;
}

/* Chip wrapping a hidden checkbox (e.g. gameplay mod toggles) */
.sm-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sm-chip:has(input:checked) {
  background: var(--pink);
  border-color: var(--pink);
  color: #0a0a0f;
}

.sm-chip:has(input:focus-visible) {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Chip / token input — blocked mappers + diffnames blacklist controls */
.sm-chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
}

.sm-chip-input:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}

.sm-chip-input__chips {
  display: contents;
}

.sm-chip-input__field {
  flex: 1 1 120px;
  min-width: 120px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: var(--space-1) var(--space-1);
}

.sm-chip-input__field:focus {
  outline: none;
}

.sm-chip-input__field::placeholder {
  color: var(--muted-2);
}

/* A committed token: pill with an × remove button */
.sm-token {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 2px var(--space-2);
  border: 1px solid color-mix(in srgb, var(--purple) 45%, var(--border));
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--purple) 16%, var(--surface-2));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.sm-token__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-token__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.sm-token__remove:hover {
  background: var(--pink);
  color: #0a0a0f;
}

.sm-token__remove:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 1px;
}

/* ==========================================================================
   Sheet / drawer base (.sm-sheet) — centered modal on desktop,
   bottom sheet on mobile. Shared by filters + settings.
   ========================================================================== */
.sm-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

.sm-scrim[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

.sm-sheet {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 50%;
  width: min(480px, calc(100vw - var(--space-6)));
  max-height: min(85dvh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
  transform: translate(-50%, -48%) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 200ms cubic-bezier(0.32, 0.72, 0.21, 1),
    opacity 160ms ease,
    visibility 0s linear 200ms;
}

.sm-sheet[data-open="true"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  transition:
    transform 220ms cubic-bezier(0.32, 0.72, 0.21, 1),
    opacity 160ms ease,
    visibility 0s linear 0s;
}

.sm-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
}

.sm-sheet__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sm-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sm-sheet__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--divider);
}

@media (max-width: 640px) {
  .sm-sheet {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(88dvh, 100%);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    transform: translateY(100%);
  }

  .sm-sheet[data-open="true"] {
    transform: translateY(0);
  }

  /* Drag handle affordance */
  .sm-sheet::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }

  .sm-sheet__header {
    padding-top: var(--space-5);
  }

  .sm-sheet__footer {
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Filters sheet specifics
   ========================================================================== */
/* Pinned search stays flush with the top of the body. */
.filters-search {
  gap: var(--space-2);
}

/* --- Accordion sections (grouped, collapsible) --- */
.filters-accordions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filters-acc {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.filters-acc__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.filters-acc__head:hover {
  background: rgba(255, 255, 255, 0.02);
}

.filters-acc__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
}

/* Active-dot: shown only when the section has a non-default filter set. */
.filters-acc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  flex: 0 0 auto;
}

.filters-acc__summary {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.filters-acc__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform 200ms ease;
}

.filters-acc[data-expanded="true"] .filters-acc__chevron {
  transform: rotate(180deg);
}

/* Cheap expand/collapse: animate grid-template-rows 0fr → 1fr. */
.filters-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}

.filters-acc[data-expanded="true"] > .filters-acc__body {
  grid-template-rows: 1fr;
}

.filters-acc__clip {
  min-height: 0;
  overflow: hidden;
}

.filters-acc__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-4) var(--space-4);
}

/* --- Optional-stat compact row + pill (AR / CS / OD / HP / Combo) --- */
.filters-statpill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.filters-statpill__label {
  font-size: 14px;
}

.filters-statpill__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.filters-statpill[data-active="true"] .filters-statpill__pill {
  border-color: var(--pink);
  background: color-mix(in srgb, var(--pink) 16%, var(--surface-2));
  color: var(--text);
}

.filters-statpill__x {
  display: none;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
}

.filters-statpill[data-active="true"] .filters-statpill__x {
  display: inline;
}

/* The wrapped control's own heading is redundant with the pill header. */
.filters-statpill .sm-field--stack > .sm-field {
  display: none;
}

.filters-statpill__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}

.filters-statpill[data-active="true"] > .filters-statpill__body {
  grid-template-rows: 1fr;
}

.filters-statpill__clip {
  min-height: 0;
  overflow: hidden;
}

.filters-statpill__inner {
  padding-top: var(--space-1);
}

/* Tie the WHOLE active stat row (label header + expanded slider) to the
   Difficulty group with one continuous left accent, so the slider doesn't
   read as a detached component. Applies only while active/expanded. */
.filters-statpill[data-active="true"] {
  border-left: 2px solid color-mix(in srgb, var(--pink) 40%, transparent);
  padding-left: var(--space-4);
  margin-left: 2px;
}

/* Keep the slider thumbs clear of the left accent bar so they don't
   visually collide with it. */
.filters-statpill[data-active="true"] .filters-statpill__inner {
  padding-left: 2px;
}

/* Status checkbox grid */
.filters-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filters-status-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.filters-status-option:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* The checkbox itself is hidden; the label pill reflects checked state. */
.filters-status-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.filters-status-option:has(input:checked) {
  background: var(--pink);
  border-color: var(--pink);
  color: #0a0a0f;
}

.filters-status-option:has(input:focus-visible) {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Date range */
.filters-date-summary {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filters-date-summary strong {
  color: var(--text);
  font-weight: 600;
}

.filters-date-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.filters-date-sep {
  color: var(--muted-2);
  font-weight: 600;
}

.filters-year-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Toggle field (label + hint, switch on the right) */
.filters-toggle-field {
  align-items: center;
  cursor: pointer;
}

.filters-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filters-queue-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.filters-queue-badge strong {
  color: var(--pink);
  font-weight: 700;
}

/* Zero results isn't a brand moment — desaturate so it reads as a soft
   warning instead of competing with the pink active-state dots. */
.filters-queue-badge[data-empty="true"] strong {
  color: var(--muted);
}

/* ==========================================================================
   Dual range slider (.sm-range) — pink fill on a dark rail
   ========================================================================== */
.sm-range-track {
  position: relative;
  height: 36px;
  --min-pct: 0%;
  --max-pct: 100%;
  --fill-color: var(--pink);
}

.sm-range-track[data-optional-active="false"] {
  /* "Any" state: still show a faint pink hint so the slider doesn't read
     as empty/broken, but desaturate it so it's clearly inactive. The user
     gets affordance that this control IS a range, just unconstrained. */
  --fill-color: rgba(255, 102, 170, 0.18);
}

.sm-range-track[data-optional-active="false"] .sm-range::-webkit-slider-thumb {
  border-color: var(--muted);
}

.sm-range-track[data-optional-active="false"] .sm-range::-moz-range-thumb {
  border-color: var(--muted);
}

.sm-range-track::before {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: var(--radius-pill);
  /* Brighter than --surface-2 so the unfilled rail keeps presence against
     the dark sheet (the vision review flagged it as nearly invisible). */
  background: rgba(255, 255, 255, 0.2);
}

.sm-range-track::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    transparent 0,
    transparent var(--min-pct),
    var(--fill-color) var(--min-pct),
    var(--fill-color) var(--max-pct),
    transparent var(--max-pct),
    transparent 100%
  );
  pointer-events: none;
}

.sm-range {
  /* The two range inputs sit on top of each other and on top of the
     painted rail (::before / ::after on .sm-range-track). They must
     fill the FULL track box vertically so their default thumb position
     centers on the rail — otherwise WebKit/Chromium drop the thumb at
     the top of the input's content box, floating above the rail. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* The runnable track is invisible (we paint our own) but its height
   determines where the thumb centers vertically in WebKit. Give it the
   full track height so the thumb auto-centers on the painted rail. */
.sm-range::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
  border: none;
}

.sm-range::-moz-range-track {
  height: 100%;
  background: transparent;
  border: none;
}

.sm-range::-webkit-slider-thumb {
  /* Dark-interior pink-ring thumb so the painted rail behind doesn't
     show through the thumb's center. The dark interior occludes the
     rail entirely, making the rail visually terminate at the thumb's
     outer pink ring. */
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 80ms ease;
}

.sm-range::-webkit-slider-thumb:hover,
.sm-range::-webkit-slider-thumb:active {
  transform: scale(1.12);
}

.sm-range::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.sm-range-max {
  z-index: 2;
}

/* Coarse pointers (touch): bump thumb size for an easier, less fiddly grab. */
@media (pointer: coarse) {
  .sm-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .sm-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }
}

/* Single slider (volume) */
.sm-slider {
  width: 100%;
  margin: 0;
  accent-color: var(--pink);
}

/* ==========================================================================
   Settings sheet specifics
   ========================================================================== */
.account-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}

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

.account-username {
  font-size: 14px;
  font-weight: 600;
}

.account-scopes {
  font-size: 12px;
  color: var(--muted-2);
}

.about-line {
  font-size: 12px;
  color: var(--muted-2);
}

.skin-name {
  color: var(--muted);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all;
}

/* ==========================================================================
   Discover main + cover card
   ========================================================================== */
.discover-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.canvas-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: min(56dvh, 540px);
  margin-inline: auto;
  border-radius: var(--radius-card);
  background: #0a0a0f;
}

@media (max-height: 900px) {
  .canvas-wrap {
    width: auto;
    height: min(56dvh, 540px);
  }
}

@media (max-width: 640px) {
  .canvas-wrap {
    aspect-ratio: 16 / 9;
    max-height: 40dvh;
    width: 100%;
    height: auto;
  }
}

.card-stack {
  position: absolute;
  inset: 0;
}

/* The card is the dark "frame"; an 8px inner pad floats the cover inside it. */
.stack-card {
  position: absolute;
  inset: 0;
  padding: 8px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0a0a0f;
  will-change: transform;
  box-shadow: var(--shadow-1);
}

.stack-card-back {
  z-index: 1;
  pointer-events: none;
  transform: scale(0.92) translateY(14px);
  opacity: 0.85;
  filter: brightness(0.7) saturate(0.85);
  transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.stack-card-front {
  z-index: 2;
  touch-action: none;
  cursor: grab;
  transition: box-shadow 200ms ease;
}

.stack-card-front:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--pink) 30%, transparent);
}

.stack-card-front.stack-card-dragging {
  cursor: grabbing;
  transition: none;
}

.stack-loading {
  position: absolute;
  inset: 8px;
  z-index: 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  pointer-events: none;
  display: grid;
  place-items: center;
  animation: stack-loading-in 200ms ease;
}

.stack-loading-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) saturate(0.85) blur(1px);
}

.stack-loading-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--pink);
  border-right-color: var(--purple);
  animation: stack-loading-spin 700ms linear infinite;
}

@keyframes stack-loading-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes stack-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.stack-load-error {
  position: absolute;
  inset: 8px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  text-align: center;
}

.stack-load-error span {
  max-width: 42ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.stack-load-retry {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--pink);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pink) 12%, transparent);
  color: var(--pink);
  font-weight: 650;
  cursor: pointer;
}

.stack-load-retry:hover {
  background: color-mix(in srgb, var(--pink) 20%, transparent);
}

.stack-empty {
  position: absolute;
  inset: 8px;
  z-index: 4;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  padding: var(--space-5);
  text-align: center;
}

.stack-empty-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.stack-empty-body {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 28ch;
  line-height: 1.5;
}

/* Swipe stamps */
.stack-stamp {
  position: absolute;
  top: 18%;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 3px solid currentColor;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms linear;
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.stack-stamp-save {
  right: 8%;
  color: var(--pink);
  transform: rotate(12deg);
}

.stack-stamp-skip {
  left: 8%;
  color: var(--purple);
  transform: rotate(-12deg);
}

body.stack-drag-active {
  user-select: none;
  -webkit-user-select: none;
}

body.stack-drag-active img {
  -webkit-user-drag: none;
  user-drag: none;
}

.stack-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.stack-peek-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: brightness(0.55);
}

.stack-peek-title {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Tap-to-play overlay */
.tap-overlay {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: grid;
  place-items: end center;
  padding-bottom: var(--space-4);
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
  cursor: pointer;
  border-radius: var(--radius-md);
}

.tap-overlay p {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 15, 0.7);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  animation: tap-pulse 2.6s ease-in-out infinite;
}

.tap-overlay .lucide {
  color: var(--pink);
}

@keyframes tap-pulse {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   Scrub row
   ========================================================================== */
.scrub-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.time-label {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
  min-width: 3rem;
}

.scrub-bar {
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* The native track is invisible by default — we paint our own rail behind
   the input so the thumb sits centered on it. The filled portion uses
   `accent-color` automatically in Firefox; for WebKit/Chromium we paint a
   pink fill via a linear-gradient on the track. */
.scrub-bar::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--pink) 0,
    var(--pink) var(--scrub-pct, 0%),
    var(--surface-2) var(--scrub-pct, 0%),
    var(--surface-2) 100%
  );
}

.scrub-bar::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.scrub-bar::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--pink);
}

.scrub-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px; /* center on the 4px track */
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 80ms ease;
}

.scrub-bar::-webkit-slider-thumb:hover,
.scrub-bar::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.scrub-bar::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pink);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ==========================================================================
   Info bar + stats
   ========================================================================== */
.info-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.info-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.info-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  /* Two-line clamp with ellipsis so long titles don't truncate mid-word
     or push the layout. Falls back to single-line ellipsis on older
     browsers without -webkit-line-clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Wrap inside words when there's no other choice (e.g. very long single
     tokens) instead of overflowing the row. */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Limit to most of the row so the star badge has guaranteed space. */
  flex: 1 1 auto;
  min-width: 0;
}

.star-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--diff-color, var(--pink));
  color: #0a0a0f;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  transition: background 200ms ease;
}

.star-badge::before {
  content: "★";
  font-size: 0.9em;
}

.star-badge::after {
  content: "";
  display: none;
  font-size: 0.7em;
  margin-left: 0.05em;
  font-weight: 900;
}
.star-badge.is-buffed::after {
  content: "▲";
  display: inline;
}
.star-badge.is-nerfed::after {
  content: "▼";
  display: inline;
}

.played-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: max-content;
  align-self: flex-start;
}

.info-meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.info-meta .info-version {
  color: var(--text);
  font-weight: 600;
}

.info-meta .info-creator {
  color: var(--muted-2);
}

.status-message {
  margin: 0;
  color: var(--muted-2);
  font-size: 12px;
  min-height: 1.1em;
}

.info-stats {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-1) var(--space-2);
}

.info-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-1) var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 0;
  position: relative;
  transition: border-color 200ms ease, background 200ms ease;
}

/* Buffed = mod inflated the stat → pink */
.info-stats li.is-buffed {
  border-color: color-mix(in srgb, var(--pink) 55%, var(--border));
  background: color-mix(in srgb, var(--pink) 12%, var(--surface));
}
.info-stats li.is-buffed strong {
  color: var(--pink);
}

/* Nerfed = mod deflated the stat → purple */
.info-stats li.is-nerfed {
  border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
  background: color-mix(in srgb, var(--purple) 12%, var(--surface));
}
.info-stats li.is-nerfed strong {
  color: var(--purple);
}

.info-stats small {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.info-stats li.is-buffed small::after {
  content: "▲";
  font-size: 0.85em;
  color: var(--pink);
}
.info-stats li.is-nerfed small::after {
  content: "▼";
  font-size: 0.85em;
  color: var(--purple);
}

.info-stats strong {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@media (max-width: 480px) {
  .info-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .info-stats li {
    padding: var(--space-1) var(--space-2);
  }
}

@media (max-width: 360px) {
  .info-stats small {
    font-size: 10px;
  }
  .info-stats strong {
    font-size: 13px;
  }
}

/* ==========================================================================
   Action bar — circular 48px, transparent, accent border on drag
   ========================================================================== */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: auto;
  padding: var(--space-1) 0;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform 80ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.action-btn:not(:disabled):hover {
  color: var(--text);
  border-color: var(--text);
  transform: translateY(-1px);
}

.action-btn:not(:disabled):active {
  transform: scale(0.92);
}

.action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Save = pink hero */
.action-btn-save:not(:disabled):hover {
  color: var(--pink);
  border-color: var(--pink);
  background: color-mix(in srgb, var(--pink) 12%, transparent);
}

/* Skip = purple */
.action-btn-skip:not(:disabled):hover {
  color: var(--purple);
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 12%, transparent);
}

/* Open = subtle neutral (not a swipe action) */
.action-btn-open:not(:disabled):hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

/* Drag preview glows (driven by app.ts) */
.action-btn-glow-save {
  color: var(--pink) !important;
  border-color: var(--pink) !important;
  background: color-mix(in srgb, var(--pink) 18%, transparent) !important;
  transform: scale(1.08) !important;
}

.action-btn-glow-skip {
  color: var(--purple) !important;
  border-color: var(--purple) !important;
  background: color-mix(in srgb, var(--purple) 18%, transparent) !important;
  transform: scale(1.08) !important;
}

@media (max-width: 640px) {
  .action-bar {
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 720px) {
  .discover-main {
    padding-bottom: var(--space-5);
  }
}

/* ==========================================================================
   Collection drawer (side rail on desktop, bottom sheet on mobile)
   ========================================================================== */
.collection-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 26rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-sheet);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 240ms cubic-bezier(0.32, 0.72, 0.21, 1),
    opacity 200ms ease,
    visibility 0s linear 240ms;
}

.collection-drawer[data-open="true"] {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    transform 240ms cubic-bezier(0.32, 0.72, 0.21, 1),
    opacity 180ms ease,
    visibility 0s linear 0s;
}

.collection-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
}

.collection-drawer-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.collection-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--divider);
}

.collection-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}

.collection-toolbar-btn:hover:not(:disabled) {
  border-color: var(--pink);
  color: var(--pink);
}

.collection-toolbar-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Primary CTA: filled pink to establish hierarchy over the ghost reset. */
.collection-toolbar-btn--primary {
  flex: 1 1 auto;
  justify-content: center;
  background: var(--pink);
  border-color: var(--pink);
  color: #15010a;
}

.collection-toolbar-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #15010a;
}

.collection-toolbar-btn--primary:disabled {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.collection-toolbar-btn--ghost {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}

.collection-batch-status {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--divider);
}

.collection-empty {
  margin: var(--space-4);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.collection-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.collection-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  min-height: 64px;
}

.collection-thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius-input);
}

.collection-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.collection-row-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-row-meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.collection-row-downloaded {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 4px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: color-mix(in srgb, var(--pink) 85%, white);
  background: color-mix(in srgb, var(--pink) 10%, transparent);
}

.collection-row-actions {
  display: flex;
  gap: var(--space-1);
}

.collection-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

.collection-action-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* Square icon-only action buttons keep the row's right cluster compact so
   long titles don't get squeezed into 3-line wraps. */
.collection-action-btn--icon {
  min-width: 36px;
  width: 36px;
  padding: 0;
}

.collection-action-btn--icon .lucide {
  display: block;
}

.collection-action-btn--icon:hover {
  color: var(--pink);
  border-color: var(--pink);
}

@media (max-width: 640px) {
  .collection-drawer {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    max-height: min(80dvh, 100%);
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    transform: translateY(100%);
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-2));
  }

  .collection-drawer[data-open="true"] {
    transform: translateY(0);
  }

  .collection-drawer::before {
    content: "";
    position: absolute;
    top: var(--space-2);
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
  }

  .collection-drawer-header {
    padding-top: var(--space-5);
  }
}