/* ─────────────────────────────────────────
   DEMO VAULT
───────────────────────────────────────── */

/* Container */
.vault-container { padding: 0; }

/* ── Header ── */
/* One row: context line + actions. No page title — the Studio sub-tab
   already says "Demo Vault" (Ollie, 2026-08-06: "redundant, takes up
   a lot of space"). */
.vault-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.vault-subtitle {
  font-size: 13px; color: var(--text-3); line-height: 1.5;
  max-width: 420px;
}
.vault-header-actions {
  display: flex; gap: 8px; flex-shrink: 0; margin-left: 24px;
}
.vault-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  transition: all 150ms var(--ease); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
/* Quiet outline pills; solid fill is reserved for the one primary CTA per
   view (Upload / Save). Same family as Revenue's receipt action pills. */
.vault-btn-outline {
  background: transparent; border: 1px solid rgba(45,106,79,0.25);
  color: var(--green);
}
.vault-btn-outline:hover {
  background: var(--green-dim); border-color: rgba(45,106,79,0.4);
}
.vault-btn-primary {
  background: var(--green); border: 1px solid var(--green);
  color: #fff;
}
.vault-btn-primary:hover {
  opacity: 0.9;
}
.vault-btn-sm {
  font-size: 11px; padding: 6px 14px;
}
.vault-btn:disabled { opacity: 0.45; pointer-events: none; }
/* House focus ring — never the browser's blue */
.vault-btn:focus, .vault-filter-pill:focus, .vault-tab:focus { outline: none; }
.vault-btn:focus-visible, .vault-filter-pill:focus-visible, .vault-tab:focus-visible {
  outline: 2px solid rgba(45,106,79,0.4); outline-offset: 2px;
}
.vault-btn-danger {
  background: transparent; border: 1px solid rgba(180,67,67,0.25);
  color: var(--coral);
}
.vault-btn-danger:hover {
  background: rgba(180,67,67,0.08); border-color: rgba(180,67,67,0.45);
}

/* ── Sub-tabs — house pill segments, matching Revenue's .rh-seg ── */
.vault-tabs {
  display: flex; gap: 6px; border-bottom: 1px solid var(--border);
  padding-bottom: 14px; margin-bottom: 24px;
}
.vault-tab {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--green); background: transparent; padding: 8px 18px;
  border: 1px solid rgba(45,106,79,0.25); border-radius: 999px;
  cursor: pointer; transition: all 150ms var(--ease);
}
.vault-tab:hover { background: var(--green-dim); border-color: rgba(45,106,79,0.4); }
.vault-tab.active { background: var(--green-dim); border-color: rgba(45,106,79,0.35); }

/* ── Drop Zone — quieter surface card, not a billboard ── */
.vault-dropzone {
  border: 1.5px dashed rgba(45,106,79,0.32); border-radius: 16px;
  padding: 24px 28px; text-align: center; margin-bottom: 24px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.vault-dropzone:hover,
.vault-dropzone.dragover {
  border-color: var(--green); background: var(--green-dim);
}
.vault-dropzone-icon {
  width: 26px; height: 26px; margin: 0 auto 9px;
  opacity: 0.35;
}
.vault-dropzone-icon svg { width: 100%; height: 100%; }
.vault-dropzone-title {
  font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px;
}
.vault-dropzone-sub {
  font-size: 12px; color: var(--text-3);
}

/* ── Filter Pills ── */
.vault-filters {
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.vault-filters-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-3);
  margin-right: 4px;
}
/* Same family as .vault-tab, one size down */
.vault-filter-pill {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(45,106,79,0.25); background: transparent;
  color: var(--green);
  transition: all 150ms var(--ease);
}
.vault-filter-pill:hover { background: var(--green-dim); border-color: rgba(45,106,79,0.4); }
.vault-filter-pill.active {
  background: var(--green-dim); border-color: rgba(45,106,79,0.35);
}

/* ── Small inline action (add writer/holder, remove cover) — quiet house pill ── */
.vault-selection-action {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--green); cursor: pointer; background: transparent;
  border: 1px solid rgba(45,106,79,0.25); border-radius: 999px;
  padding: 6px 14px;
  transition: all 150ms var(--ease);
}
.vault-selection-action:hover { background: var(--green-dim); border-color: rgba(45,106,79,0.4); }

/* ── File List — enclosed surface card, like the newer pages' tables ── */
.vault-file-list {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: 14px; padding: 4px 18px;
}
.vault-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  transition: background 100ms var(--ease);
}
/* Only All Files rows open the detail panel on click */
.vault-file-row[data-file-row] { cursor: pointer; }
.vault-file-row:hover { background: var(--green-dim); margin: 0 -12px; padding: 12px; border-radius: 10px; }
.vault-file-row:last-child { border-bottom: none; }

/* Checkbox */
.vault-checkbox {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1.5px solid var(--border-med); flex-shrink: 0;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background: var(--surface);
  transition: all 120ms var(--ease);
  position: relative;
}
.vault-checkbox:checked {
  background: var(--green); border-color: var(--green);
}
.vault-checkbox:checked::after {
  content: '';
  position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Play button — quiet wash at rest; solid green is reserved for hover and
   the actually-playing track, so a list of rows doesn't read as a column of
   heavy discs competing with the player bar's primary button. */
.vault-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-dim); border: 1px solid rgba(45,106,79,0.22); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 150ms var(--ease), border-color 150ms var(--ease);
}
.vault-play-btn:hover { background: var(--green); border-color: var(--green); }
.vault-play-btn svg { width: 14px; height: 14px; fill: var(--green); margin-left: 2px; transition: fill 150ms var(--ease); }
.vault-play-btn:hover svg { fill: #fff; }
.vault-play-btn.playing { background: var(--green); border-color: var(--green); }
.vault-play-btn.playing svg { fill: #fff; margin-left: 0; }

/* Row cover art — playlist art wins, else the demo's own, else placeholder */
.vault-row-cover {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  overflow: hidden; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim); color: var(--green);
}
.vault-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-row-cover svg { width: 45%; height: 45%; opacity: 0.7; }

/* Detail panel Cover Art block */
.vault-fd-cover-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.vault-fd-cover {
  width: 72px; height: 72px; border-radius: 12px; flex-shrink: 0;
  overflow: hidden; border: 1px solid var(--border-med);
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim); color: var(--green);
}
.vault-fd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-fd-cover svg { width: 40%; height: 40%; opacity: 0.7; }
.vault-fd-cover-side { min-width: 0; }
.vault-fd-cover-hint { font-size: 11px; color: var(--text-3); line-height: 1.45; }
.vault-fd-cover-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Version stacking — vN chip on the demo row, fold-out of earlier versions */
.vault-version-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: var(--green); background: var(--green-dim);
  border: 1px solid rgba(45,106,79,0.22); border-radius: 999px;
  cursor: pointer; vertical-align: 1px;
  transition: all 150ms var(--ease);
}
.vault-version-toggle:hover { border-color: rgba(45,106,79,0.4); }
.vault-version-chev { font-size: 8px; transition: transform 150ms var(--ease); }
.vault-version-toggle.open .vault-version-chev { transform: rotate(180deg); }
.vault-version-rows { display: none; padding: 2px 0 8px 44px; border-bottom: 1px solid var(--border); }
.vault-version-rows.open { display: block; }
.vault-version-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.vault-version-row:last-child { border-bottom: none; }
.vault-version-num { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-3); width: 22px; }
.vault-version-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.vault-play-btn-sm { width: 24px; height: 24px; }
.vault-play-btn-sm svg { width: 11px; height: 11px; }

/* File info */
.vault-file-info { flex: 1; min-width: 0; }
.vault-file-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.vault-file-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-3);
}
.vault-file-meta-sep { color: var(--border-med); }

/* Tag badge */
.vault-tag {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  /* No own margin — the meta row's flex gap spaces chips evenly */
  display: inline-block;
  /* Default chip for custom tags — the four built-ins override below */
  background: rgba(45,106,79,0.12); color: var(--green);
}
/* +N — the fold marker for tags beyond the card's two; full set lives in
   the slide-out (and this chip's title) */
.vault-tag-more { background: transparent; border: 1px dashed var(--border-med); color: var(--text-3); }
/* Note marker — bare "note" text read as noise (Ollie, 2026-08-06: "you
   can't really see it"); a pill signals there's something to open */
.vault-note-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--green);
  background: var(--green-dim); border-radius: 999px; padding: 3px 9px;
}
.vault-note-pill svg { width: 10px; height: 10px; }
.vault-tag-master { background: rgba(45,106,79,0.12); color: var(--green); }
.vault-tag-demo { background: rgba(166,124,55,0.12); color: var(--amber); }
.vault-tag-stems { background: rgba(42,157,143,0.12); color: var(--teal); }
.vault-tag-unreleased { background: rgba(120,100,160,0.12); color: #7864a0; }

/* Per-row share button */
.vault-row-share-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: none; border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text-3);
  transition: all 150ms var(--ease);
}
.vault-row-share-btn:hover { color: var(--green); border-color: var(--green); background: var(--green-dim); }

/* Format label — full-strength ink so the meta row reads clearly, not faint
   grey (Eli, 2026-08-14). Theme-aware --text: near-black in light, legible in
   dark; size/weight still keep it subordinate to the title. */
.vault-format {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--text); text-transform: uppercase;
}

/* Mono data values */
.vault-data {
  font-family: var(--font-mono); font-size: 10px; color: var(--text);
}

/* Mini waveform (decorative) */
.vault-waveform {
  width: 100px; height: 28px; flex-shrink: 0;
  opacity: 0.3;
}
.vault-waveform svg { width: 100%; height: 100%; }

/* Date column */
.vault-date {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  white-space: nowrap; flex-shrink: 0; width: 70px; text-align: right;
}

/* ── Playlist Cards ── */
.vault-playlist-list { display: flex; flex-direction: column; gap: 16px; }
.vault-playlist-card {
  border: 1px solid var(--border-med); border-radius: 14px;
  padding: 20px 24px; background: var(--surface);
  cursor: pointer;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.vault-playlist-card:hover {
  border-color: var(--border-med);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.vault-playlist-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 8px;
}
.vault-playlist-card-id {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.vault-playlist-cover {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  background-size: cover; background-position: center;
  background-color: var(--surface-2);
  /* Hairline drawn OVER the artwork, not beside it: a real border next to a
     rounded background-image leaves an anti-aliased seam where the page
     shows through as faint edge lines (Eli, 2026-08-15). One custom property
     so the grid/hero elevation shadows compose it instead of re-typing it —
     and gradient tiles can opt out (they lead with colour, no chrome). */
  --cover-hairline: inset 0 0 0 1px var(--border);
  box-shadow: var(--cover-hairline);
}
.vault-playlist-cover-lg { width: 84px; height: 84px; border-radius: 12px; }
.vault-playlist-cover-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim); color: var(--green); opacity: 0.7;
}
.vault-playlist-cover-empty svg { width: 40%; height: 40%; }
.vault-playlist-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px;
}
.vault-playlist-meta {
  font-size: 11px; color: var(--text-3); margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
}
.vault-playlist-meta-sep { color: var(--border-med); }
.vault-playlist-subtitle-chip {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.3px; color: var(--green);
  background: rgba(45,106,79,0.08); padding: 3px 9px;
  border-radius: 999px;
}
.vault-playlist-tracks-preview {
  font-size: 12px; color: var(--text-3); margin: 8px 0;
  line-height: 1.5;
}
.vault-playlist-summary {
  font-size: 12px; color: var(--text-3); font-style: italic;
  margin-top: 6px; line-height: 1.5;
}

/* ── Playlist Detail View ── */
.vault-detail-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--text-3); background: none; border: none; padding: 0;
  cursor: pointer; margin-bottom: 16px;
  transition: color 150ms var(--ease);
}
.vault-detail-back:hover { color: var(--green); }
.vault-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 16px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: 14px;
}
.vault-detail-header-left {
  min-width: 0; display: flex; align-items: center; gap: 18px;
}
.vault-detail-header-text { min-width: 0; }
.vault-detail-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px; margin-bottom: 4px;
}
.vault-track-num {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  width: 20px; text-align: right; flex-shrink: 0;
}
/* Same family as .vault-btn-danger, row-sized */
.vault-row-remove-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: var(--coral); background: none;
  border: 1px solid rgba(180,67,67,0.25); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; flex-shrink: 0;
  transition: all 150ms var(--ease);
}
.vault-row-remove-btn:hover {
  background: rgba(180,67,67,0.08); border-color: rgba(180,67,67,0.45);
}

/* ── File Picker (Add Files modal) ── */
.vault-pick-list {
  max-height: 320px; overflow-y: auto; margin: 0 -8px;
}
.vault-pick-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 8px; cursor: pointer;
  transition: background 100ms var(--ease);
}
.vault-pick-row:hover { background: var(--green-dim); }
.vault-pick-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Shared Link Rows ── */
/* Enclosed surface card, matching the file list */
.vault-link-list {
  display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: 14px; padding: 4px 18px;
}
.vault-link-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.vault-link-row:last-child { border-bottom: none; }
.vault-link-info { flex: 1; min-width: 0; }
.vault-link-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 3px;
}
.vault-link-meta {
  font-size: 11px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
.vault-link-status {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.3px;
}
.vault-link-status.active { color: var(--green); }
.vault-link-status.revoked { color: var(--coral); }
.vault-link-status.expired { color: var(--amber); }
.vault-link-actions {
  display: flex; gap: 8px; flex-shrink: 0; margin-left: 16px;
}

/* ── Modals ── */
.vault-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  /* Above the detail slide-in (z 10000) — modals opened FROM the panel
     (fan responses, confirms) must cover it, not drown under it. Toast
     (10010) and the confirm dialog (10020) stay on top. */
  z-index: 10005; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms var(--ease), visibility 200ms;
}
.vault-modal-backdrop.open { opacity: 1; visibility: visible; }
.vault-modal {
  background: var(--surface); border-radius: 16px;
  padding: 28px 32px; width: 460px; max-width: 92vw;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  transform: translateY(12px);
  transition: transform 200ms var(--ease);
}
.vault-modal-backdrop.open .vault-modal { transform: translateY(0); }
.vault-modal-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 20px;
}
.vault-modal-field {
  margin-bottom: 16px;
}
.vault-modal-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--text);
  margin-bottom: 6px; display: block;
}
.vault-modal-input {
  width: 100%; font-family: var(--font-body); font-size: 13px;
  padding: 10px 14px; border: 1px solid var(--border-med);
  border-radius: 8px; background: var(--bg); color: var(--text);
  transition: border-color 150ms var(--ease);
  box-sizing: border-box;
}
.vault-modal-input:focus {
  outline: none; border-color: var(--green);
}
.vault-modal-input::placeholder { color: var(--text-3); }
.vault-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px;
}
.vault-confirm { width: 400px; }
.vault-modal-body {
  font-size: 13px; color: var(--text-2); line-height: 1.55;
}

/* ── Lyrics (detail panel) — roomier than Notes ── */
.vault-fd-note.vault-fd-lyrics { min-height: 140px; }

/* ── Tags (detail panel) ── */
.vault-fd-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
}

/* ── Downloads (detail panel) ── */
.vault-fd-downloads { display: flex; flex-direction: column; gap: 6px; }
.vault-fd-dl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 8px 7px 14px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface);
}
.vault-fd-dl-name {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-fd-dl-name .vault-data { color: var(--text-3); }

/* ── Collapsible comments (slide-out) — reads like the other section
      headers, not like the download rows; the chevron + green hover are
      the toggle affordance ── */
.vault-comments-head-toggle {
  cursor: pointer; user-select: none; align-items: center;
}
.vault-comments-head-toggle .vault-modal-label { cursor: pointer; }
.vault-comments-head-toggle:hover .vault-modal-label,
.vault-comments-head-toggle:hover .vault-comments-chev { color: var(--green); }
.vault-comments-chev {
  font-size: 11px; color: var(--text-3);
  display: inline-block; transition: transform 150ms var(--ease), color 150ms var(--ease);
}
.vault-comments-collapsed .vault-comments-chev { transform: rotate(-90deg); }
.vault-comments-collapsed .vault-comment-list { display: none; }

/* ── File Detail Slide-in (mirrors the Wire detail panel recipe) ── */
#vaultFileDetailOverlay {
  /* Above the Meridian FAB (z 9999) — the bubble dims under the scrim
     instead of floating over the panel's Save/Cancel footer. */
  position: fixed; inset: 0; z-index: 10000;
  pointer-events: none; visibility: hidden;
}
#vaultFileDetailOverlay.open { pointer-events: auto; visibility: visible; }
.vault-fd-scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 300ms var(--ease); cursor: pointer;
}
#vaultFileDetailOverlay.open .vault-fd-scrim { opacity: 1; }
.vault-fd-panel {
  position: absolute; top: 0; right: 0;
  width: 520px; max-width: 100%; height: 100%;
  background: var(--surface);
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
#vaultFileDetailOverlay.open .vault-fd-panel { transform: translateX(0); }
.vault-fd-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.vault-fd-content { padding: 24px; flex: 1; overflow-y: auto; }
.vault-fd-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px; border-top: 1px solid var(--border);
  flex-shrink: 0; background: var(--surface);
}
.vault-fd-delete { margin-right: auto; }

/* Editable name in the top bar — plain title text until focused */
.vault-fd-name {
  flex: 1; min-width: 0; box-sizing: border-box;
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
  letter-spacing: -0.3px; color: var(--text);
  padding: 4px 8px; margin-left: -8px; /* text aligns with the content below */
  border: 1px solid transparent; border-radius: 6px; background: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.vault-fd-name:hover { background: var(--surface-2); cursor: text; }
.vault-fd-name:focus {
  outline: none; border-color: var(--green); background: var(--bg);
}
.vault-fd-name::placeholder { color: var(--text-3); }

/* Close (X) at the end of the top bar */
/* House coral close (Ollie, 2026-08-04) — same destructive-red language
   as Close & Revoke / Delete pills */
.vault-fd-close {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(180,67,67,0.35); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(180,67,67,0.9);
  transition: all 150ms var(--ease);
}
.vault-fd-close:hover { background: rgba(180,67,67,0.08); border-color: rgba(180,67,67,0.55); }

/* Stat tiles — 3 rows × 2 cols, filled horizontally */
.vault-fd-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0;
}
.vault-fd-stat {
  background: var(--surface); border-radius: 10px;
  padding: 9px 12px; min-width: 0;
  border: 1px solid var(--border-med);
  transition: border-color 150ms var(--ease);
}
.vault-fd-stat-editable:focus-within { border-color: var(--green); }
.vault-fd-stat-value {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text); margin-bottom: 2px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-fd-stat-value-row { display: flex; align-items: baseline; gap: 6px; }
.vault-fd-stat-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-3);
}
/* Editable tile controls wear the value's own type — no input chrome */
.vault-fd-stat-input {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text); background: none; border: none; padding: 0;
  width: 100%; min-width: 0; cursor: pointer;
}
.vault-fd-stat-input:focus { outline: none; }
.vault-fd-stat-input::placeholder { color: var(--text-3); }
input.vault-fd-stat-input[type='number'] { width: 64px; cursor: text; appearance: textfield; -moz-appearance: textfield; }
.vault-fd-stat-input::-webkit-inner-spin-button,
.vault-fd-stat-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
select.vault-fd-stat-input { appearance: none; -webkit-appearance: none; }

/* Notes */
.vault-fd-note {
  width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical;
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--text); padding: 10px 14px;
  border: 1px solid var(--border-med); border-radius: 12px; background: var(--surface);
  transition: border-color 150ms var(--ease);
}
.vault-fd-note:focus { outline: none; border-color: var(--green); }
.vault-fd-note::placeholder { color: var(--text-3); }

/* Writer + master splits */
.vault-fd-splits-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.vault-selection-action + .vault-fd-splits-head { margin-top: 22px; }
.vault-fd-splits-total {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--coral);
}
.vault-fd-splits-total.complete { color: var(--green); }
.vault-fd-splits { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.vault-fd-split-row { display: flex; align-items: center; gap: 8px; }
.vault-fd-split-input {
  font-family: var(--font-body); font-size: 12px; color: var(--text);
  padding: 8px 12px; border: 1px solid var(--border-med);
  border-radius: 10px; background: var(--surface); min-width: 0;
  transition: border-color 150ms var(--ease);
}
.vault-fd-split-input:focus { outline: none; border-color: var(--green); }
.vault-fd-split-input::placeholder { color: var(--text-3); }
.vault-fd-split-name { flex: 1.4; }
.vault-fd-split-role { flex: 1; }
.vault-fd-split-pct {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
}
.vault-fd-split-pct input {
  width: 56px; text-align: right;
  font-family: var(--font-mono); font-size: 12px;
  appearance: textfield; -moz-appearance: textfield;
}
.vault-fd-split-pct input::-webkit-inner-spin-button,
.vault-fd-split-pct input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vault-fd-split-remove {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: none; border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: all 150ms var(--ease);
}
.vault-fd-split-remove:hover {
  color: var(--coral); border-color: var(--coral);
  background: rgba(155,68,68,0.06);
}

/* ── Cover Picker (New Playlist modal) ── */
.vault-cover-picker {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
}
.vault-cover-preview {
  width: 72px; height: 72px; border-radius: 12px; flex-shrink: 0;
  border: 2px dashed var(--border-med);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); background-size: cover; background-position: center;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.vault-cover-picker:hover .vault-cover-preview {
  border-color: var(--green); color: var(--green);
}
/* with artwork the dashed frame becomes the same over-the-art hairline as
   the tiles — a border beside the rounded image leaves the seam (audit) */
.vault-cover-preview.has-image { border-color: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.vault-cover-preview svg { width: 24px; height: 24px; }
.vault-cover-picker-text { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.vault-cover-picker-hint { font-size: 11px; color: var(--text-3); line-height: 1.4; }

/* ── Upload Progress ── */
.vault-upload-progress {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; font-size: 12px; color: var(--text-2);
}
.vault-upload-bar-track {
  flex: 1; height: 4px; background: var(--surface-2);
  border-radius: 2px; overflow: hidden;
}
.vault-upload-bar-fill {
  height: 100%; background: var(--green); border-radius: 2px;
  transition: width 200ms var(--ease);
}
.vault-upload-pct {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  width: 36px; text-align: right; flex-shrink: 0;
}

/* ── Empty State ── */
.vault-empty {
  text-align: center; padding: 48px 24px; color: var(--text-3);
}
.vault-empty-title {
  font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px;
}
.vault-empty-desc {
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}

/* ── Audio Player Bar (fixed to bottom of content area, excludes sidebar) ── */
.vault-player {
  position: fixed; bottom: 0; right: 0; left: 0; /* left is set by JS to clear the sidebar */
  height: 70.5px; /* matches the sidebar user badge's top border */
  background: var(--surface); border-top: 1px solid var(--border);
  /* extra right padding keeps the wave + total time clear of the floating chat bubble */
  padding: 0 96px 0 32px;
  display: flex; align-items: center; gap: 16px;
  z-index: 800;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
  transform: translateY(100%); visibility: hidden;
  transition: transform 250ms var(--ease), visibility 250ms;
}
.vault-player.active { transform: translateY(0); visibility: visible; }
.vault-player-transport {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.vault-player-ctl {
  width: 30px; height: 30px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); position: relative;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.vault-player-ctl:hover { color: var(--text); background: var(--green-dim); }
.vault-player-ctl.active { color: var(--green); }
.vault-player-ctl svg { width: 14px; height: 14px; }
.vault-player-ctl.repeat-one::after {
  content: '1';
  position: absolute; top: 0; right: 1px;
  font-family: var(--font-mono); font-size: 7px; font-weight: 700;
  color: var(--green);
}
.vault-player-play {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin: 0 4px;
  transition: opacity 150ms var(--ease);
}
.vault-player-play:hover { opacity: 0.85; }
.vault-player-play svg { width: 19px; height: 19px; fill: #fff; }
.vault-player-play svg.vault-player-play-icon { margin-left: 2px; }
.vault-player-info {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; flex-shrink: 0;
}
.vault-player-info.empty { color: var(--text-3); font-weight: 500; }
.vault-player-progress {
  flex: 1; height: 34px; cursor: pointer; position: relative;
  touch-action: none;
}
/* Larger invisible hit area for grabbing the bar */
.vault-player-progress::before {
  content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px;
}
/* Seek waveform: grey base + green played copy revealed by clip-path */
.vault-player-wave-base,
.vault-player-wave-played {
  position: absolute; inset: 0; pointer-events: none;
}
.vault-player-wave-base { color: var(--border-med); }
.vault-player-wave-played { color: var(--green); clip-path: inset(0 100% 0 0); }
.vault-player-wave-base svg,
.vault-player-wave-played svg { width: 100%; height: 100%; display: block; }
.vault-player-time {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  white-space: nowrap; flex-shrink: 0;
}

/* ── Share comments (owner view) ── */
.vault-comments { margin-top: 24px; }
.vault-comments-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.vault-comments-count {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
}
.vault-comment {
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.vault-comment:last-child { border-bottom: none; }
.vault-comment-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
/* Commenter pill — same recipe as the share page / To Do artist chips:
   colour wash background + solid colour dot */
.vault-comment-author {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--text);
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border-med);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-comment-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vault-comment-track {
  font-size: 10.5px; color: var(--green);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vault-comment-when {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3);
  margin-left: auto; flex-shrink: 0;
}
.vault-comment-delete {
  background: none; border: none; cursor: pointer; color: var(--text-3);
  padding: 2px; border-radius: 4px; flex-shrink: 0; align-self: center;
  display: flex; align-items: center; justify-content: center;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}
.vault-comment-delete:hover { color: var(--coral); background: var(--green-dim); }
.vault-comment-text {
  font-size: 13px; line-height: 1.55; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
}
.vault-comment-text .ts-link {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--green); cursor: pointer; text-decoration: none;
}
.vault-comment-text .ts-link:hover { text-decoration: underline; }

/* ── Toast ── */
.vault-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600;
  padding: 10px 20px; border-radius: 8px; z-index: 10010; /* above the detail slide-in */
  opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.vault-toast.show {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vault-header { flex-direction: column; gap: 12px; }
  .vault-header-actions { margin-left: 0; }
  .vault-waveform { display: none; }
  .vault-date { display: none; }
  .vault-file-row { gap: 8px; }
  .vault-player { height: 68px; padding: 0 80px 0 12px; gap: 10px; }
  .vault-player-info { max-width: 110px; }
  .vault-player-transport { gap: 0; }
  .vault-player-play { width: 38px; height: 38px; margin: 0 2px; }
  .vault-detail-header { flex-direction: column; gap: 14px; }
  .vault-playlist-cover-lg { width: 64px; height: 64px; }
}

@media (max-width: 600px) {
  .vault-fd-panel { width: 100%; }
}

/* ── Manager mode (Ollie, 2026-08-03; opened to read-WRITE 2026-08-06): a
   manager working in a connected artist's vault gets the same controls the
   artist has — "they are trusted team members once the accounts are
   connected". The .vault-viewing class stays as a styling hook and for the
   'managed' (no-account) case; it no longer hides mutation controls. ── */

/* ── Release Metadata page (Ollie, 2026-08-04) — lives inside the demo
   slide-out; quiet green house language, mono for data values ── */
/* Same quiet tile as its neighbours — only the chevron and hover hint
   that it opens (Ollie, 2026-08-04: no odd-one-out styling) */
.vault-fd-meta-tile { cursor: pointer; text-align: left; font: inherit; transition: border-color 150ms var(--ease); }
.vault-fd-meta-tile:hover { border-color: rgba(45,106,79,0.4); }
.vault-meta-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
#vaultMetaBack { flex: 0 0 auto; margin-right: 10px; }
/* Metadata page rhythm (Ollie, 2026-08-04): generous, consistent section
   spacing — each block gets air above its label and below its content */
.vault-meta-page .vault-fd-splits-head { margin-top: 4px; }
.vault-meta-page .vault-fd-splits-head + .vault-fd-splits { margin-top: 8px; }
.vault-meta-page .vault-selection-action { margin: 8px 0 24px; }
/* An empty splits list contributes zero height — + Add sits right under
   the label instead of floating below dead space */
.vault-meta-page .vault-fd-splits:empty { display: none; }
.vault-meta-page > .vault-modal-label { display: block; margin: 28px 0 12px; }
.vault-meta-page .vault-meta-grid { gap: 14px; margin-bottom: 8px; }
.vault-meta-page .vault-meta-lyrics { margin-bottom: 12px; }
.vault-meta-title { font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-meta-static { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.vault-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-bottom: 14px; }
.vault-meta-field { display: flex; flex-direction: column; gap: 4px; }
.vault-meta-wide { grid-column: 1 / -1; }
.vault-meta-label { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.vault-meta-field input, .vault-meta-field textarea, .vault-meta-field select {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; outline: none; transition: border-color 150ms var(--ease);
}
.vault-meta-field textarea { font-family: var(--font-body); font-size: 12.5px; min-height: 56px; resize: vertical; }
.vault-meta-field input:focus, .vault-meta-field textarea:focus, .vault-meta-field select:focus { border-color: rgba(45,106,79,0.4); }
.vault-meta-lyrics { min-height: 120px; }
.vault-meta-dl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.vault-meta-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.vault-meta-status { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }

/* ── Album grid (Ollie, 2026-08-06) ────────────────────────────────
   Feedback from artists: the dense row list read "too corporate… like a
   spreadsheet". This is the same DOM as the list — only restyled — so
   play / share / version / detail handlers are untouched. Artwork leads,
   the play button overlays it on hover the way Spotify and Apple do, and
   the metadata drops to a quiet second line. */
.vault-file-list.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 22px 18px;
  /* Matches the list variant's 18px inset (Ollie, 2026-08-06). The grid used
     to zero the horizontal padding, which left the first and last covers
     almost touching the surface card's border — the artwork read as clipped
     rather than placed. Inset equals the column gap, so the outer margin and
     the space between covers are the same distance. */
  padding: 18px;
}
.vault-file-list.vault-grid .vault-file-row {
  display: block; position: relative;
  padding: 0; border-bottom: none; gap: 0;
  border-radius: 14px;
  transition: transform 160ms var(--ease);
}
.vault-file-list.vault-grid .vault-file-row:hover {
  background: transparent; margin: 0; padding: 0; transform: translateY(-3px);
}
/* artwork leads — square, full width, the colour in the section */
.vault-file-list.vault-grid .vault-row-cover {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 12px; margin-bottom: 11px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transition: box-shadow 160ms var(--ease);
}
.vault-file-list.vault-grid .vault-file-row:hover .vault-row-cover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.17);
}
.vault-file-list.vault-grid .vault-row-cover svg { width: 32%; height: 32%; }
/* play button floats over the artwork, revealed on hover */
/* anchored to the artwork's TOP-right: the square cover is the card's
   full width, so a top offset is layout-independent — measuring up from
   the bottom would depend on how tall the name/meta wrap. */
.vault-file-list.vault-grid .vault-play-btn {
  position: absolute; right: 12px; top: 12px;
  width: 42px; height: 42px;
  background: var(--green); border-color: var(--green);
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.vault-file-list.vault-grid .vault-file-row:hover .vault-play-btn,
.vault-file-list.vault-grid .vault-play-btn.playing { opacity: 1; transform: translateY(0); }
.vault-file-list.vault-grid .vault-play-btn svg { width: 16px; height: 16px; fill: #fff; }
/* share sits top-right of the artwork, same reveal */
.vault-file-list.vault-grid .vault-row-share-btn {
  position: absolute; left: 12px; top: 12px;
  background: rgba(255,255,255,0.92); border-color: transparent;
  opacity: 0; transition: opacity 160ms var(--ease);
}
.vault-file-list.vault-grid .vault-file-row:hover .vault-row-share-btn { opacity: 1; }
/* name and meta below the art, quiet */
.vault-file-list.vault-grid .vault-file-info { min-width: 0; }
.vault-file-list.vault-grid .vault-file-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tags + format + duration can outgrow a 176px card (Ollie, 2026-08-06:
   three chips shoved the meta into the NEIGHBOURING card). Wrap instead
   of overflowing — chips take their own line(s), quietly. */
.vault-file-list.vault-grid .vault-file-meta {
  margin-top: 4px; font-size: 11px;
  flex-wrap: wrap; row-gap: 4px;
}
/* the spreadsheet furniture has no place on a card */
.vault-file-list.vault-grid .vault-track-num,
.vault-file-list.vault-grid .vault-waveform,
.vault-file-list.vault-grid .vault-date { display: none; }
@media (max-width: 640px) {
  .vault-file-list.vault-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
}

/* ── Playlist album grid (Ollie, 2026-08-06) ───────────────────────
   Same feedback as the file grid: rows read corporate, covers read like
   albums. Cover-less playlists get a generated gradient (vault-grad-N,
   hashed from the playlist id in JS) so every tile leads with colour —
   the palette only remixes the existing accents. */
.vault-cover-grad {
  /* deliberately chrome-less — a no-op term keeps composed shadows valid */
  --cover-hairline: inset 0 0 0 0 transparent;
}
.vault-grad-0 { background: radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--teal) 55%, white), transparent 62%), radial-gradient(140% 140% at 85% 85%, color-mix(in srgb, var(--green) 80%, white), transparent 70%), var(--teal); }
.vault-grad-1 { background: radial-gradient(120% 120% at 80% 15%, color-mix(in srgb, var(--teal) 45%, white), transparent 60%), radial-gradient(140% 140% at 15% 85%, #7864a0, transparent 75%), color-mix(in srgb, #7864a0 70%, var(--teal)); }
.vault-grad-2 { background: radial-gradient(120% 120% at 20% 18%, color-mix(in srgb, var(--amber) 55%, white), transparent 62%), radial-gradient(140% 140% at 82% 82%, var(--coral), transparent 72%), var(--amber); }
.vault-grad-3 { background: radial-gradient(120% 120% at 78% 14%, color-mix(in srgb, var(--amber) 45%, white), transparent 58%), radial-gradient(140% 140% at 18% 88%, var(--green), transparent 75%), color-mix(in srgb, var(--green) 72%, var(--amber)); }
.vault-grad-4 { background: radial-gradient(120% 120% at 22% 15%, color-mix(in srgb, var(--coral) 50%, white), transparent 60%), radial-gradient(140% 140% at 80% 85%, #7864a0, transparent 72%), color-mix(in srgb, var(--coral) 65%, #7864a0); }
.vault-grad-5 { background: radial-gradient(120% 120% at 82% 18%, color-mix(in srgb, var(--green) 45%, white), transparent 58%), radial-gradient(140% 140% at 15% 82%, var(--teal), transparent 72%), color-mix(in srgb, var(--green) 60%, var(--teal)); }

.vault-playlist-list.vault-pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 26px 22px;
}
.vault-pl-grid .vault-playlist-card {
  border: none; padding: 0; background: none;
  transition: transform 160ms var(--ease);
}
.vault-pl-grid .vault-playlist-card:hover { box-shadow: none; transform: translateY(-3px); }
/* artwork leads — the small thumb becomes the tile */
.vault-pl-art { position: relative; margin-bottom: 12px; }
.vault-pl-grid .vault-playlist-cover {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 14px;
  box-shadow: var(--cover-hairline), 0 6px 20px rgba(0,0,0,0.10);
  transition: box-shadow 160ms var(--ease);
}
.vault-pl-grid .vault-playlist-card:hover .vault-playlist-cover { box-shadow: var(--cover-hairline), 0 12px 30px rgba(0,0,0,0.17); }
/* actions float over the artwork, revealed on hover — share left, delete right */
.vault-pl-act {
  position: absolute; top: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  opacity: 0; transition: opacity 160ms var(--ease), transform 120ms var(--ease);
}
.vault-pl-act { left: 12px; }
.vault-pl-act-danger { left: auto; right: 12px; color: var(--coral); }
.vault-pl-act svg { width: 15px; height: 15px; }
.vault-pl-act:hover { transform: scale(1.08); }
.vault-pl-grid .vault-playlist-card:hover .vault-pl-act { opacity: 1; }
/* name and meta below the art, quiet */
.vault-pl-grid .vault-playlist-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-pl-sub {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .vault-playlist-list.vault-pl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
}

/* EQ curve attached to a comment (Ollie, 2026-08-06) — the artist's side
   of the idea a reviewer drew on the share page. */
.vault-comment-eq {
  margin-top: 8px; padding: 9px 11px;
  background: var(--green-dim); border: 1px solid rgba(45,106,79,0.18);
  border-radius: 10px;
}
.vault-comment-eq svg { display: block; }
.vault-comment-eq-read {
  margin-top: 5px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3px; color: var(--green);
}

/* ── Trash (Ollie, 2026-08-06): managers can bin, only the owner clears ── */
.vault-trash-note {
  font-size: 12px;
  color: var(--text-3);
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border-med);
  margin-bottom: 4px;
}
.vault-trash-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-med);
}
.vault-trash-main { flex: 1; min-width: 0; }
.vault-trash-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);   /* dimmed: it is not in the vault right now */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-trash-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}
.vault-trash-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Per-link share settings (Ollie, 2026-08-06) ──────────────────
   Only switches that are enforceable today live here. Downloads has no
   public route to gate and a password needs its own security work, so
   neither is offered — a switch that does nothing is worse than none. */
.vault-share-settings {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.vault-share-setting {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 9px 0;
}
.vault-share-setting-text { min-width: 0; }
.vault-share-setting-name { font-size: 13px; font-weight: 600; color: var(--text); }
.vault-share-setting-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ── Fan link (Ollie, 2026-08-09) ─────────────────────────────────
   A demo's second link, for fans: separate page, separate comment
   thread, optional questions answered before the song unlocks. */
.vault-fan-section {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.vault-fan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vault-fan-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--text-2); background: transparent;
  border: 1px solid var(--border-med); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: all 150ms ease;
}
.vault-fan-chip:hover { border-color: var(--green); color: var(--text); }
/* Selected = the site's green pill state (--green ink on --green-dim),
   NOT --green-solid — that var only exists on the share page, and an
   unresolvable var() drops the declaration, leaving the chip black. */
.vault-fan-chip.on {
  color: var(--green);
  background: var(--green-dim);
  border-color: rgba(45,106,79,0.45);
}
.vault-fan-custom { display: flex; gap: 8px; margin-top: 10px; }
.vault-fan-custom input { flex: 1; }
.vault-fan-responses {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; font-size: 12px; color: var(--text-3);
}
.vault-fan-responses b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }

/* Responses spreadsheet — one column per question, one row per fan */
.vault-fan-sheet-wrap {
  overflow: auto; max-height: 340px; margin-top: 4px;
  border: 1px solid var(--border-med); border-radius: 8px;
}
.vault-fan-sheet { width: 100%; border-collapse: collapse; }
.vault-fan-sheet th {
  text-align: left; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
  padding: 8px 10px; border-bottom: 1px solid var(--border-med);
  position: sticky; top: 0; background: var(--surface);
}
.vault-fan-sheet td {
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.vault-fan-sheet tr:last-child td { border-bottom: none; }

/* Link-kind chip on Shared Links rows: fan vs collab at a glance */
.vault-link-kind {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--border-med);
  border-radius: 999px; padding: 2px 8px;
}
/* Fan wears the Logic Pro purple (#7E44C0), collab the blue — the two
   kinds read by colour alone. Translucent fills, both themes. */
.vault-link-kind.fan {
  color: #7E44C0;
  background: rgba(126,68,192,0.10);
  border-color: rgba(126,68,192,0.40);
}
/* Collab wears the Logic Pro blue (#4A61B8, the board/calendar palette).
   Translucent fill like --green-dim — reads on light and dark alike,
   with no dependence on variant-scoped vars (--surface is empty outside
   [data-variant], the --divider lesson). */
.vault-link-kind.collab {
  color: #4A61B8;
  background: rgba(74,97,184,0.10);
  border-color: rgba(74,97,184,0.40);
}

/* The responses count in a fan row's meta line is a door, not a stat */
.vault-link-responses {
  font: inherit; font-weight: 600; color: var(--green);
  background: none; border: none; padding: 0; cursor: pointer;
}
.vault-link-responses:hover { text-decoration: underline; }

/* Fan Responses tab — a sheet you can work in */
.fr-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.fr-search { width: 260px; max-width: 100%; }
.fr-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
}


/* ══════════════════════════════════════════════════════════════════════
   Playlist detail — album-style hero + track rows (Eli, 2026-08-14).
   Own .vault-pl-* namespace so All Files (.vault-file-row) stays untouched.
   ══════════════════════════════════════════════════════════════════════ */
.vault-pl-hero {
  display: flex; align-items: stretch; gap: 26px;
  margin-bottom: 26px; padding: 2px;
}
.vault-pl-hero .vault-playlist-cover-lg {
  width: 176px; height: 176px; border-radius: 16px;
  box-shadow: var(--cover-hairline), 0 18px 42px -20px rgba(0,0,0,0.55);
}
.vault-pl-hero-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6px 0 6px;
}
.vault-pl-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: auto;
}
.vault-pl-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--green);
  padding-top: 5px;
}
.vault-pl-actions { display: flex; gap: 8px; flex-shrink: 0; }
.vault-pl-name {
  font-family: var(--font-body); font-size: 32px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.06; color: var(--text);
  margin: 12px 0 10px; overflow-wrap: anywhere;
}
.vault-pl-sub {
  font-size: 13px; color: var(--text-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vault-pl-sub-sep { color: var(--border-med); }
.vault-pl-summary {
  font-size: 12.5px; color: var(--text-3); font-style: italic;
  margin-top: 10px; line-height: 1.5;
}

/* Track list */
.vault-pl-list { display: flex; flex-direction: column; }
.vault-pl-track {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 10px; border-radius: 10px;
  border-bottom: 1px solid var(--border);
  transition: background 120ms var(--ease);
}
.vault-pl-track:last-child { border-bottom: none; }
.vault-pl-track:hover { background: var(--green-dim); }

/* Index digit ↔ play triangle */
.vault-pl-idx {
  position: relative; width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.vault-pl-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.vault-pl-idx .vault-play-btn {
  position: absolute; inset: 0; width: 30px; height: 30px;
  display: none; align-items: center; justify-content: center;
  background: var(--green); border: none; border-radius: 50%;
}
.vault-pl-idx .vault-play-btn svg { width: 12px; height: 12px; fill: #fff; margin-left: 0; }
.vault-pl-track:hover .vault-pl-num,
.vault-pl-idx .vault-play-btn.playing ~ .vault-pl-num { visibility: hidden; }
.vault-pl-track:hover .vault-pl-idx .vault-play-btn,
.vault-pl-idx .vault-play-btn.playing { display: flex; }

/* Title + filename */
.vault-pl-main { flex: 1; min-width: 0; }
.vault-pl-title {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vault-pl-file {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
}

/* Right data columns */
.vault-pl-cols {
  display: flex; align-items: center; gap: 18px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 11px;
}
.vault-pl-fmt { color: var(--text-3); }
.vault-pl-dur { color: var(--text-2); min-width: 38px; text-align: right; }

/* Kebab "..." menu */
.vault-pl-menu {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--text-3);
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.vault-pl-menu svg { width: 18px; height: 18px; }
.vault-pl-menu:hover { background: var(--green-dim); color: var(--text); }
.vault-pl-menu-pop {
  position: absolute; z-index: 3200; min-width: 184px;
  background: var(--surface); border: 1px solid var(--border-med);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 16px 42px -12px rgba(0,0,0,0.38);
}
.vault-pl-menu-item {
  display: block; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--text); background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 8px;
  transition: background 120ms var(--ease);
}
.vault-pl-menu-item:hover { background: var(--green-dim); }
.vault-pl-menu-danger { color: var(--coral); }
.vault-pl-menu-danger:hover { background: rgba(180,67,67,0.10); }

@media (max-width: 720px) {
  .vault-pl-hero { flex-direction: column; gap: 16px; }
  .vault-pl-hero .vault-playlist-cover-lg { width: 132px; height: 132px; }
  .vault-pl-name { font-size: 26px; }
}