/* ============================================================
   WAVELINE SIGNAL SYSTEM — design tokens + shared components
   (header/dock, mobile nav, command palette, mini-player, cards,
   hero, footer, buttons, forms, states). Dark-first; `body.light`
   is the alternate theme. Prefixed `wv-` so it can coexist with
   any remaining legacy page styles during rollout.
   ============================================================ */

:root {
  /* Colour — dark signal (default) */
  --wv-bg:        #0a0b0d;
  --wv-bg-raised: #101214;
  --wv-surface:   #141619;
  --wv-surface-2: #1a1d21;
  --wv-ink:       #f3eee6;   /* warm off-white */
  --wv-ink-2:     #c9c4bb;
  --wv-muted:     #8b8f94;
  --wv-border:    #24272c;
  --wv-border-2:  #33373d;
  --wv-accent:      #ff5f3d;  /* the signal — warm coral-orange */
  --wv-accent-ink:  #ff8a68;
  --wv-accent-soft: rgba(255,95,61,.13);
  --wv-on-accent: #160f0a;   /* text placed on top of --wv-accent */
  --wv-danger:    #ff6b61;
  --wv-danger-soft:rgba(255,107,97,.13);
  --wv-on-danger: #160f0a;  /* text placed on top of --wv-danger (dark: danger is light, so text is dark) */
  --wv-success:   #4ecb86;
  --wv-success-soft: rgba(78,203,134,.13);

  /* Artist-derived ambient accent (artist page overrides these) */
  --wv-amb: var(--wv-accent);
  --wv-amb-ink: var(--wv-accent-ink);
  --wv-amb-soft: var(--wv-accent-soft);

  /* Type */
  --wv-font-display: 'Space Mono', ui-monospace, monospace;
  --wv-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

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

  /* Radius / shadow / border */
  --wv-radius: 8px;
  --wv-radius-lg: 14px;
  --wv-radius-xl: 22px;
  --wv-radius-pill: 999px;
  --wv-shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);
  --wv-shadow-md: 0 10px 30px rgba(0,0,0,.55);
  --wv-shadow-lg: 0 24px 60px rgba(0,0,0,.6);

  /* Motion */
  --wv-motion: 180ms;
  --wv-motion-slow: 420ms;
  --wv-ease: cubic-bezier(.2,.6,.2,1);

  /* Layout */
  --wv-maxw: 1180px;
  --wv-maxw-wide: 1360px;
  --wv-header-h: 64px;
  --wv-dock-h: 56px;
  --wv-bottomnav-h: 60px;

  /* Breakpoints (referenced in comments — CSS can't read these in media queries) */
  --wv-bp-sm: 560px;
  --wv-bp-md: 768px;
  --wv-bp-lg: 1024px;
  --wv-bp-xl: 1440px;

  /* Z-index scale */
  --wv-z-scene: 0;
  --wv-z-content: 1;
  --wv-z-header: 100;
  --wv-z-bottomnav: 110;
  --wv-z-player: 115;
  --wv-z-palette: 300;
  --wv-z-toast: 400;
}

body.light {
  --wv-bg:        #e9e7e1;
  --wv-bg-raised: #f2f0ea;
  --wv-surface:   #ffffff;
  --wv-surface-2: #f4f2ec;
  --wv-ink:       #16181b;
  --wv-ink-2:     #3d434c;
  --wv-muted:     #6b7178;
  --wv-border:    #ddd9cf;
  --wv-border-2:  #cac5b8;
  /* #c73717 (not the darker --wv-accent-ink) so --wv-on-accent text on this
     background clears WCAG AA (4.5:1) for normal-weight button text — the
     previous #d6431f only reached 4.27:1. */
  --wv-accent:      #c73717;
  --wv-accent-ink:  #b23417;
  --wv-accent-soft: rgba(199,55,23,.10);
  --wv-on-accent: #fff8f3;
  --wv-danger:    #b3261e;
  --wv-danger-soft:#fdecea;
  --wv-on-danger: #fff8f3;  /* light: danger is dark, so text is light */
  --wv-success:   #1a7f4b;
  --wv-success-soft:#e8f6ee;
  --wv-shadow-sm: 0 1px 2px rgba(20,22,26,.06), 0 1px 3px rgba(20,22,26,.05);
  --wv-shadow-md: 0 10px 26px rgba(20,22,26,.12);
  --wv-shadow-lg: 0 24px 50px rgba(20,22,26,.16);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body {
  font-family: var(--wv-font-body);
  background: var(--wv-bg);
  color: var(--wv-ink);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
  position: relative;
}

/* Subtle grain, purely decorative — inert to assistive tech, ignored under reduced motion/print */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: var(--wv-z-scene);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
@media print { body::before { display: none; } }

a { color: var(--wv-accent-ink); }
img { max-width: 100%; display: block; }

.wv-container { max-width: var(--wv-maxw); margin: 0 auto; padding: 0 var(--wv-5); }
.wv-container-wide { max-width: var(--wv-maxw-wide); margin: 0 auto; padding: 0 var(--wv-5); }

/* Accessibility helpers */
.wv-skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--wv-z-toast);
  background: var(--wv-accent); color: var(--wv-on-accent); padding: 10px 16px; border-radius: 0 0 var(--wv-radius) 0;
  font-family: var(--wv-font-display); font-size: .8rem;
}
.wv-skip:focus { left: 0; }
.wv-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--wv-accent);
  outline-offset: 2px;
  border-radius: var(--wv-radius);
}

/* Data-coordinate label — thin technical line treatment used throughout */
.wv-coord {
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--wv-muted); display: inline-flex; align-items: center; gap: 8px;
}
.wv-coord::before { content: ""; width: 18px; height: 1px; background: var(--wv-border-2); }

/* ── Desktop dock navigation ───────────────────────────────── */
.wv-header {
  position: sticky; top: 0; z-index: var(--wv-z-header);
  padding: var(--wv-3) var(--wv-4) 0;
}
.wv-dock {
  max-width: var(--wv-maxw-wide); margin: 0 auto;
  background: color-mix(in srgb, var(--wv-surface) 82%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius-xl);
  box-shadow: var(--wv-shadow-sm);
  height: var(--wv-dock-h);
  display: flex; align-items: center; gap: var(--wv-4);
  padding: 0 var(--wv-3) 0 var(--wv-4);
}
.wv-brand {
  font-family: var(--wv-font-display); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; font-size: .85rem;
  color: var(--wv-ink); text-decoration: none; display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.wv-brand .wv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wv-accent); box-shadow: 0 0 0 3px var(--wv-accent-soft); }
/* One-shot "coming online" pulse on load only — not a forever-looping decoration. */
.wv-brand .wv-dot.wv-pulse { animation: wv-pulse-once 1.8s var(--wv-ease) 1; }
@keyframes wv-pulse-once { 0% { box-shadow: 0 0 0 3px var(--wv-accent-soft); } 40% { box-shadow: 0 0 0 7px var(--wv-accent-soft); } 100% { box-shadow: 0 0 0 3px var(--wv-accent-soft); } }

.wv-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.wv-nav a {
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--wv-muted); text-decoration: none; padding: 8px 12px; border-radius: var(--wv-radius-pill);
  transition: color var(--wv-motion) var(--wv-ease), background var(--wv-motion) var(--wv-ease);
  position: relative;
}
.wv-nav a:hover { color: var(--wv-ink); background: var(--wv-surface-2); }
.wv-nav a[aria-current="page"] { color: var(--wv-on-accent); background: var(--wv-accent); }

/* margin-left:auto is the real fix here, not just belt-and-suspenders with
   .wv-nav's margin-right:auto: on mobile .wv-nav is display:none (removed
   from flex layout entirely), so without its own margin this block used to
   collapse right next to the brand — leaving the rest of the pill-shaped
   dock looking empty. */
.wv-header-actions { display: flex; align-items: center; gap: var(--wv-2); flex-shrink: 0; margin-left: auto; }
.wv-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border: 1px solid var(--wv-border-2); background: transparent; color: var(--wv-ink-2);
  border-radius: var(--wv-radius); cursor: pointer; font-size: 1rem; text-decoration: none;
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease), background var(--wv-motion) var(--wv-ease);
}
.wv-iconbtn:hover { border-color: var(--wv-accent); color: var(--wv-accent-ink); }

/* Theme toggle: shows the icon for the action a click performs (sun =
   "switch to light" while dark is active; moon = "switch to dark" while
   light is active) — CSS-driven off body.light so nav.js never has to touch
   these SVGs (only the aria-label/title and the mobile button's text span
   are updated in JS, see initTheme()). Shared by both the desktop icon-only
   button and the mobile More-panel row button. */
.wv-theme-icon { display: inline-flex; align-items: center; justify-content: center; }
.wv-theme-icon-moon { display: none; }
body.light .wv-theme-icon-sun { display: none; }
body.light .wv-theme-icon-moon { display: inline-flex; }
.wv-bell { position: relative; }
.wv-msgicon { position: relative; }
.wv-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--wv-danger); color: var(--wv-on-danger); border-radius: var(--wv-radius-pill);
  font-family: var(--wv-font-body); font-size: .68rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* Notification row — shared by the full /notifications page and the
   desktop notification-bell dropdown preview (Phase 4). */
.nt-item {
  display: flex; align-items: flex-start; gap: 12px; padding: var(--wv-4);
  text-decoration: none; color: inherit; border-top: 1px solid var(--wv-border);
  transition: background var(--wv-motion) var(--wv-ease);
}
.nt-item:first-child { border-top: none; }
.nt-item:hover, .nt-item:focus-visible { background: var(--wv-surface-2); }
.nt-item.is-unread { background: var(--wv-accent-soft); }
.nt-item.is-unread:hover, .nt-item.is-unread:focus-visible { background: color-mix(in srgb, var(--wv-accent-soft) 65%, var(--wv-surface-2)); }
.nt-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wv-surface-2); color: var(--wv-muted);
}
.nt-item.is-unread .nt-icon { background: var(--wv-surface); color: var(--wv-accent-ink); }
.nt-avatar { flex-shrink: 0; margin-top: 2px; }
.nt-body { flex: 1; min-width: 0; }
.nt-line { font-size: .92rem; color: var(--wv-ink-2); line-height: 1.5; }
.nt-actor { font-family: var(--wv-font-display); font-weight: 700; color: var(--wv-ink); overflow-wrap: anywhere; }
.nt-snippet { color: var(--wv-muted); overflow-wrap: anywhere; }
.nt-time { display: block; margin-top: 3px; font-family: var(--wv-font-display); font-size: .66rem; letter-spacing: .6px; text-transform: uppercase; color: var(--wv-muted); }
.nt-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--wv-accent); margin-top: 8px; }

/* Notification menu (desktop): bell trigger + dropdown preview */
.wv-notifmenu { position: relative; }
.wv-notifmenu-trigger[aria-expanded="true"] { border-color: var(--wv-accent); color: var(--wv-accent-ink); }
.wv-notifmenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 32px));
  z-index: var(--wv-z-palette); background: var(--wv-surface); border: 1px solid var(--wv-border-2);
  border-radius: var(--wv-radius-lg); box-shadow: var(--wv-shadow-lg); overflow: hidden;
  animation: wv-palette-in var(--wv-motion) var(--wv-ease);
}
.wv-notifmenu-panel[hidden] { display: none; }
.wv-notifmenu-list { max-height: 420px; overflow-y: auto; }
.wv-notifmenu-list .nt-item { padding: var(--wv-3) var(--wv-4); }
.wv-notifmenu-empty { padding: var(--wv-6) var(--wv-4); text-align: center; font-size: .86rem; color: var(--wv-muted); }
.wv-notifmenu-footer {
  display: block; padding: 12px var(--wv-4); text-align: center; border-top: 1px solid var(--wv-border);
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-accent-ink); text-decoration: none; background: var(--wv-surface-2);
}
.wv-notifmenu-footer:hover, .wv-notifmenu-footer:focus-visible { background: var(--wv-accent-soft); }

/* Direct-message row — shared by the full /messages inbox and the
   desktop Messages-bell dropdown preview (Phase 7.5). */
.dm-avatar { flex-shrink: 0; margin-top: 2px; }
.dm-item {
  display: flex; align-items: flex-start; gap: 12px; padding: var(--wv-4);
  text-decoration: none; color: inherit; border-top: 1px solid var(--wv-border);
  transition: background var(--wv-motion) var(--wv-ease);
}
.dm-item:first-child { border-top: none; }
.dm-item:hover, .dm-item:focus-visible { background: var(--wv-surface-2); }
.dm-item.is-unread { background: var(--wv-accent-soft); }
.dm-item.is-unread:hover, .dm-item.is-unread:focus-visible { background: color-mix(in srgb, var(--wv-accent-soft) 65%, var(--wv-surface-2)); }
.dm-body { flex: 1; min-width: 0; }
.dm-line { font-size: .92rem; color: var(--wv-ink-2); line-height: 1.5; }
.dm-name { font-family: var(--wv-font-display); font-weight: 700; color: var(--wv-ink); overflow-wrap: anywhere; }
.dm-preview {
  display: block; color: var(--wv-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 46ch;
}
.dm-time { display: block; margin-top: 3px; font-family: var(--wv-font-display); font-size: .66rem; letter-spacing: .6px; text-transform: uppercase; color: var(--wv-muted); }
.dm-unread-count {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wv-font-display); font-size: .66rem; font-weight: 700;
  color: var(--wv-on-accent); background: var(--wv-accent); border-radius: var(--wv-radius-pill);
}
@media (max-width: 560px) { .dm-preview { max-width: 56vw; } }

/* Messages menu (desktop): envelope trigger + dropdown preview — same
   shell/tokens as .wv-notifmenu, deliberately. */
.wv-msgmenu { position: relative; }
.wv-msgmenu-trigger[aria-expanded="true"] { border-color: var(--wv-accent); color: var(--wv-accent-ink); }
.wv-msgmenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 32px));
  z-index: var(--wv-z-palette); background: var(--wv-surface); border: 1px solid var(--wv-border-2);
  border-radius: var(--wv-radius-lg); box-shadow: var(--wv-shadow-lg); overflow: hidden;
  animation: wv-palette-in var(--wv-motion) var(--wv-ease);
}
.wv-msgmenu-panel[hidden] { display: none; }
.wv-msgmenu-list { max-height: 420px; overflow-y: auto; }
.wv-msgmenu-list .dm-item { padding: var(--wv-3) var(--wv-4); }
.wv-msgmenu-footer {
  display: block; padding: 12px var(--wv-4); text-align: center; border-top: 1px solid var(--wv-border);
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-accent-ink); text-decoration: none; background: var(--wv-surface-2);
}
.wv-msgmenu-footer:hover, .wv-msgmenu-footer:focus-visible { background: var(--wv-accent-soft); }

.wv-userchip {
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-ink); text-decoration: none; padding: 8px 12px; border: 1px solid var(--wv-border-2);
  border-radius: var(--wv-radius-pill);
}
.wv-userchip:hover { border-color: var(--wv-accent); color: var(--wv-accent-ink); }

/* Profile menu (logged-in desktop): trigger + dropdown */
.wv-profilemenu { position: relative; }
.wv-profilemenu-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-ink); background: transparent; cursor: pointer; padding: 6px 10px 6px 6px;
  border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-pill);
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
}
.wv-profilemenu-trigger:hover, .wv-profilemenu-trigger[aria-expanded="true"] { border-color: var(--wv-accent); color: var(--wv-accent-ink); }
.wv-profile-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--wv-accent); color: var(--wv-on-accent);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .7rem; flex-shrink: 0;
}
/* Phase 3: same slot, real uploaded photo instead of the monogram */
img.wv-profile-avatar { object-fit: cover; display: block; }
.wv-profilemenu-caret { font-size: .6rem; color: var(--wv-muted); transition: transform var(--wv-motion) var(--wv-ease); }
.wv-profilemenu-trigger[aria-expanded="true"] .wv-profilemenu-caret { transform: rotate(180deg); }
.wv-profilemenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; max-width: calc(100vw - 32px); z-index: var(--wv-z-palette);
  background: var(--wv-surface); border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-lg);
  box-shadow: var(--wv-shadow-lg); padding: var(--wv-2); animation: wv-palette-in var(--wv-motion) var(--wv-ease);
}
.wv-profilemenu-panel[hidden] { display: none; }
.wv-profilemenu-panel a {
  display: block; padding: 10px 12px; border-radius: var(--wv-radius); font-size: .88rem;
  color: var(--wv-ink); text-decoration: none;
}
.wv-profilemenu-panel a:hover, .wv-profilemenu-panel a:focus-visible { background: var(--wv-accent-soft); color: var(--wv-accent-ink); }

/* More menu (desktop): overflow for secondary product pages — Compare, News */
.wv-navmenu { position: relative; }
.wv-navmenu-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-muted); background: transparent; cursor: pointer; padding: 8px 12px;
  border: 1px solid transparent; border-radius: var(--wv-radius-pill);
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease), background var(--wv-motion) var(--wv-ease);
}
.wv-navmenu-trigger:hover, .wv-navmenu-trigger[aria-expanded="true"] { color: var(--wv-ink); background: var(--wv-surface-2); }
.wv-navmenu-trigger.is-active { color: var(--wv-on-accent); background: var(--wv-accent); }
.wv-navmenu-caret { font-size: .6rem; transition: transform var(--wv-motion) var(--wv-ease); }
.wv-navmenu-trigger[aria-expanded="true"] .wv-navmenu-caret { transform: rotate(180deg); }
.wv-navmenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; max-width: calc(100vw - 32px); z-index: var(--wv-z-palette);
  background: var(--wv-surface); border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-lg);
  box-shadow: var(--wv-shadow-lg); padding: var(--wv-2); animation: wv-palette-in var(--wv-motion) var(--wv-ease);
}
.wv-navmenu-panel[hidden] { display: none; }
.wv-navmenu-panel a {
  display: block; padding: 10px 12px; border-radius: var(--wv-radius); font-size: .88rem;
  color: var(--wv-ink); text-decoration: none;
}
.wv-navmenu-panel a:hover, .wv-navmenu-panel a:focus-visible { background: var(--wv-accent-soft); color: var(--wv-accent-ink); }
.wv-navmenu-panel a[aria-current="page"] { color: var(--wv-accent-ink); font-weight: 700; }

/* Search trigger inside the dock */
.wv-searchbtn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--wv-border-2); background: var(--wv-surface-2);
  color: var(--wv-muted); border-radius: var(--wv-radius-pill); cursor: pointer; font-family: var(--wv-font-body); font-size: .82rem;
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
}
.wv-searchbtn:hover { border-color: var(--wv-accent); color: var(--wv-ink-2); }
.wv-searchbtn kbd {
  font-family: var(--wv-font-display); font-size: .64rem; border: 1px solid var(--wv-border-2); border-radius: 4px;
  padding: 1px 5px; color: var(--wv-muted); background: var(--wv-surface);
}

.wv-bottomnav, .wv-moretrigger, .wv-morepanel { display: none; }

/* ── Mobile navigation: sticky bottom bar + More panel ─────── */
/* Inverse of .wv-desktop-only: hidden by default, shown only at/under the
   mobile breakpoint below. Keeps "exactly one visible control" pairs
   (e.g. the search trigger) a matter of picking a class, not a page-local
   workaround. */
.wv-header .wv-mobile-only { display: none; }

/* Header crowding, 861–1100px: the full desktop dock (brand + 4 nav links +
   search + messages + notifications + profile menu + More + theme toggle)
   all show at once here with no bottom-nav fallback yet. Rather than
   removing any destination, trim the lowest-value width first: the ⌘K
   shortcut hint and the visible @username (the avatar + accessible label
   already identify the account menu). */
@media (min-width: 861px) and (max-width: 1100px) {
  .wv-header .wv-hide-crowded { display: none; }
}

@media (max-width: 860px) {
  .wv-dock { padding-right: var(--wv-2); }
  .wv-nav, .wv-header .wv-desktop-only { display: none; }
  .wv-header .wv-mobile-only { display: inline-flex; }
  /* ~44px touch areas for mobile header actions (search / messages /
     notifications / log in) — bigger than the 38px desktop icon buttons. */
  .wv-header .wv-iconbtn.wv-mobile-only { min-width: 44px; height: 44px; }
  .wv-header .wv-userchip.wv-mobile-only { min-height: 40px; display: inline-flex; align-items: center; }

  .wv-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--wv-z-bottomnav);
    height: var(--wv-bottomnav-h);
    background: color-mix(in srgb, var(--wv-surface) 92%, transparent);
    backdrop-filter: saturate(1.5) blur(14px);
    border-top: 1px solid var(--wv-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .wv-bottomnav-inner { display: flex; align-items: stretch; width: 100%; }
  /* Icon-only, Instagram-tab-bar-inspired: no visible label competing with
     the icon for attention, equal-width slots, a bigger (48-56px) target
     now that there's no second line of text to make room for. */
  .wv-bottomnav a, .wv-bottomnav button.wv-moretrigger {
    flex: 1; display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: var(--wv-muted); background: none; border: none; cursor: pointer;
    font-family: var(--wv-font-body); min-height: 52px;
  }
  .wv-bottomnav .ic {
    position: relative; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--wv-motion) var(--wv-ease);
  }
  .wv-bottomnav .ic svg { width: 24px; height: 24px; }
  /* Deliberately restrained per design review: a coral soft-circle behind
     every active icon read as too heavy/busy for a 5-icon bar this small —
     a plain colour change (like Instagram's own tab bar) carries the
     "selected" state clearly enough on its own. Very subtle, capped,
     one-shot scale accompanies it: <=180ms, <=1.04, never looping — already
     covered by the global prefers-reduced-motion override further up this
     file, which forces every animation to ~0 duration (same mechanism as
     .wv-pulse-once elsewhere). */
  .wv-bottomnav a[aria-current="page"] .ic {
    color: var(--wv-accent-ink);
    animation: wv-nav-select .16s var(--wv-ease) 1;
  }
  @keyframes wv-nav-select {
    0% { transform: scale(.96); }
    100% { transform: scale(1.04); }
  }

  /* Home: outline by default, filled ("heavier") only when active — same
     CSS-driven swap technique as the theme sun/moon icons, so no JS needed. */
  .wv-home-icon-filled { display: none; }
  .wv-bottomnav a[aria-current="page"] .wv-home-icon-outline { display: none; }
  .wv-bottomnav a[aria-current="page"] .wv-home-icon-filled { display: inline-flex; }

  .wv-moretrigger { display: flex; position: relative; }
  /* The account/avatar trigger gets a subtle coral ring only while its
     sheet is open (aria-expanded, already set by initMorePanel() — no new
     JS needed), never a permanent border, and never distorts the avatar. */
  .wv-account-ic { border-radius: 50%; }
  .wv-moretrigger[aria-expanded="true"] .wv-account-ic { box-shadow: 0 0 0 2px var(--wv-accent); }
  .wv-account-avatar-img, .wv-account-avatar-mono {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    display: flex; align-items: center; justify-content: center; font-size: .7rem;
  }
  .wv-moredot {
    position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--wv-accent); border: 2px solid var(--wv-surface);
  }

  body { padding-bottom: calc(var(--wv-bottomnav-h) + env(safe-area-inset-bottom, 0)); }

  .wv-morepanel {
    position: fixed; inset: 0; z-index: var(--wv-z-palette);
  }
  /* The real bug behind "tapping More does nothing" on a real phone: the
     global `.wv-bottomnav, .wv-moretrigger, .wv-morepanel { display: none; }`
     rule above is never overridden for the non-hidden case — only
     [hidden] was ever addressed, so removing the hidden attribute (which
     initMorePanel() does correctly) left the panel stuck at display:none
     regardless. Both rules below have equal (0,2,0) specificity — the
     class plus an attribute selector either way, [hidden] directly or via
     :not()'s argument — but are mutually exclusive (an element can't both
     have and not have the attribute), so whichever actually matches always
     wins over the bare (0,1,0) global default. */
  .wv-morepanel:not([hidden]) { display: block; }
  .wv-morepanel[hidden] { display: none; }
  .wv-morepanel .wv-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .wv-morepanel-sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto;
    background: var(--wv-surface); border-top: 1px solid var(--wv-border);
    border-radius: var(--wv-radius-xl) var(--wv-radius-xl) 0 0;
    padding: var(--wv-3) var(--wv-4) calc(var(--wv-6) + env(safe-area-inset-bottom, 0));
    box-shadow: var(--wv-shadow-lg);
    animation: wv-sheet-up var(--wv-motion-slow) var(--wv-ease);
  }
  @keyframes wv-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .wv-morepanel-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--wv-border-2); margin: 6px auto var(--wv-4); }
  .wv-morepanel h2 { font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wv-muted); margin: var(--wv-4) 0 var(--wv-2); }
  .wv-morepanel h2:first-of-type { margin-top: 0; }
  .wv-morepanel a, .wv-morepanel .wv-more-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--wv-3);
    padding: 13px 4px; min-height: 48px; text-decoration: none; color: var(--wv-ink);
    font-size: .95rem; border-bottom: 1px solid var(--wv-border);
  }
  .wv-morepanel a:last-child, .wv-morepanel .wv-more-row:last-child { border-bottom: none; }
  .wv-morepanel .muted { color: var(--wv-muted); font-size: .8rem; }

  /* ── Account identity header (authenticated) ── */
  .wv-more-account { display: flex; align-items: center; gap: var(--wv-3); padding: var(--wv-2) 4px var(--wv-4); }
  .wv-more-account-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .wv-more-account-avatar img, .wv-more-account-avatar .wv-avatar { width: 100%; height: 100%; border-radius: 50%; font-size: 1.1rem; }
  .wv-more-account-name { font-family: var(--wv-font-display); font-weight: 700; font-size: 1rem; color: var(--wv-ink); overflow-wrap: anywhere; }

  /* ── Two-column quick actions (Messages / Notifications) ──
     Higher-specificity compound selectors (.wv-morepanel a.wv-more-quick)
     rather than !important, to cleanly beat the shared .wv-morepanel a
     list-row rule above instead of fighting it property-by-property. */
  .wv-more-quickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wv-3); margin-bottom: var(--wv-3); }
  .wv-morepanel a.wv-more-quick {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px;
    padding: 14px; min-height: 76px; border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-lg);
    background: var(--wv-surface-2); color: var(--wv-ink); text-decoration: none; font-size: .88rem; font-weight: 600;
    border-bottom: 1px solid var(--wv-border-2);
  }
  .wv-more-quick-ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wv-accent-soft); color: var(--wv-accent-ink); }
  .wv-more-quick-ic svg { width: 18px; height: 18px; }
  /* .wv-more-quick already establishes position:relative above, so the
     shared .wv-badge component's default top:-6px/right:-6px anchors it to
     this card's corner with no extra override needed. */

  /* ── Logged-out: authentication is the first thing you see, not the
     last thing you scroll to past Compare/News. ── */
  .wv-more-join { padding: var(--wv-2) 0 var(--wv-4); }
  .wv-morepanel h2.wv-more-join-head { margin: 0 0 var(--wv-3); }
  .wv-more-join-primary, .wv-more-join-secondary { width: 100%; margin-bottom: 10px; }
  .wv-more-join-secondary:last-child { margin-bottom: 0; }
}
@media (min-width: 861px) { .wv-bottomnav, .wv-morepanel { display: none !important; } }

/* ── Command palette ────────────────────────────────────────── */
.wv-palette-overlay {
  position: fixed; inset: 0; z-index: var(--wv-z-palette);
  background: rgba(6,6,7,.65); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--wv-4) var(--wv-4);
}
.wv-palette-overlay[hidden] { display: none; }
.wv-palette {
  width: 100%; max-width: 560px; background: var(--wv-surface); border: 1px solid var(--wv-border-2);
  border-radius: var(--wv-radius-lg); box-shadow: var(--wv-shadow-lg); overflow: hidden;
  animation: wv-palette-in var(--wv-motion) var(--wv-ease);
}
@keyframes wv-palette-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.wv-palette-inputrow { display: flex; align-items: center; gap: 10px; padding: var(--wv-3) var(--wv-4); border-bottom: 1px solid var(--wv-border); }
.wv-palette-inputrow .ic { color: var(--wv-muted); }
.wv-palette-inputrow input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--wv-ink); font-size: 1rem;
  font-family: var(--wv-font-body);
}
.wv-palette-inputrow input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wv-accent-soft) inset; border-radius: var(--wv-radius); }
.wv-palette-inputrow kbd {
  font-family: var(--wv-font-display); font-size: .64rem; border: 1px solid var(--wv-border-2); border-radius: 4px;
  padding: 2px 6px; color: var(--wv-muted);
}
.wv-palette-list { max-height: 56vh; overflow-y: auto; padding: var(--wv-2); }
.wv-palette-group { font-family: var(--wv-font-display); font-size: .62rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wv-muted); padding: 10px 10px 4px; }
.wv-palette-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none;
  color: var(--wv-ink); padding: 11px 10px; border-radius: var(--wv-radius); cursor: pointer; font-size: .92rem;
  text-decoration: none;
}
.wv-palette-item .meta { margin-left: auto; color: var(--wv-muted); font-size: .74rem; font-family: var(--wv-font-display); text-transform: uppercase; letter-spacing: 1px; }
.wv-palette-item[aria-selected="true"], .wv-palette-item:hover { background: var(--wv-accent-soft); color: var(--wv-accent-ink); }
.wv-palette-empty { padding: var(--wv-6) var(--wv-4); text-align: center; color: var(--wv-muted); font-size: .88rem; }

/* ── Persistent mini-player ─────────────────────────────────── */
.wv-player {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(0); z-index: var(--wv-z-player);
  display: flex; align-items: center; gap: var(--wv-3);
  background: var(--wv-surface); border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-lg);
  box-shadow: var(--wv-shadow-lg); padding: 10px var(--wv-3) 10px 10px;
  max-width: calc(100vw - 32px); width: 380px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--wv-motion) var(--wv-ease), transform var(--wv-motion) var(--wv-ease);
}
.wv-player.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
@media (max-width: 860px) { .wv-player { bottom: calc(var(--wv-bottomnav-h) + 12px + env(safe-area-inset-bottom, 0)); width: calc(100vw - 24px); } }
.wv-player-art { width: 40px; height: 40px; border-radius: var(--wv-radius); background: var(--wv-surface-2); flex-shrink: 0; overflow: hidden; }
.wv-player-info { min-width: 0; flex: 1; }
.wv-player-title { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-player-artist { font-size: .74rem; color: var(--wv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-player-btn { background: none; border: none; color: var(--wv-ink-2); cursor: pointer; font-size: 1.1rem; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wv-player-btn:hover { background: var(--wv-surface-2); color: var(--wv-accent-ink); }
.wv-player-progress { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; background: var(--wv-border); border-radius: 2px; overflow: hidden; }
.wv-player-progress-fill { height: 100%; width: 0%; background: var(--wv-accent); }
.wv-player-src { font-size: .62rem; color: var(--wv-muted); font-family: var(--wv-font-display); text-transform: uppercase; letter-spacing: 1px; }

/* ── Buttons ───────────────────────────────────────────── */
.wv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wv-font-display); font-size: .78rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; min-height: 44px; padding: 0 20px; border-radius: var(--wv-radius);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--wv-motion) var(--wv-ease), background var(--wv-motion) var(--wv-ease), border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
}
.wv-btn-primary { background: var(--wv-accent); color: var(--wv-on-accent); }
.wv-btn-primary:hover { background: var(--wv-accent-ink); }
.wv-btn-ghost { background: transparent; color: var(--wv-ink); border-color: var(--wv-border-2); }
.wv-btn-ghost:hover { border-color: var(--wv-accent); color: var(--wv-accent-ink); }
.wv-btn:disabled { opacity: .6; cursor: not-allowed; }
.wv-btn-sm { min-height: 36px; padding: 0 14px; font-size: .68rem; }
.wv-btn-lg { min-height: 54px; padding: 0 28px; font-size: .82rem; }

/* Magnetic-eligible marker; JS adds subtle pointer-following transform on fine-pointer devices */
.wv-magnetic { will-change: transform; }

/* ── Section scaffolding ───────────────────────────────── */
.wv-section { padding: var(--wv-7) 0; }
.wv-section-tight { padding: var(--wv-6) 0; }
.wv-eyebrow {
  font-family: var(--wv-font-display); font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--wv-accent-ink); margin-bottom: var(--wv-2);
}
.wv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wv-4); margin-bottom: var(--wv-5); flex-wrap: wrap; }
.wv-h2 { font-family: var(--wv-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: .3px; }
.wv-link { font-family: var(--wv-font-display); font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--wv-accent-ink); text-decoration: none; }
.wv-link:hover { text-decoration: underline; }

/* Numbered editorial chapter heading, used on the homepage narrative */
.wv-chapter-head { display: flex; align-items: flex-end; gap: var(--wv-4); margin-bottom: var(--wv-5); flex-wrap: wrap; }
.wv-chapter-num {
  font-family: var(--wv-font-display); font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: .85;
  color: transparent; -webkit-text-stroke: 1px var(--wv-border-2);
}
.wv-chapter-title h2 { font-family: var(--wv-font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.2px; }
.wv-chapter-title p { color: var(--wv-muted); font-size: .92rem; margin-top: 6px; max-width: 60ch; }
.wv-chapter { padding: var(--wv-8) 0; border-top: 1px solid var(--wv-border); }
.wv-chapter:first-of-type { border-top: none; }

/* ── Cards ─────────────────────────────────────────────── */
.wv-card {
  background: var(--wv-surface); border: 1px solid var(--wv-border); border-radius: var(--wv-radius-lg);
  box-shadow: var(--wv-shadow-sm);
}
.wv-card-pad { padding: var(--wv-5); }
.wv-grid { display: grid; gap: var(--wv-4); }
.wv-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wv-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wv-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .wv-grid-4, .wv-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wv-grid-2, .wv-grid-3, .wv-grid-4 { grid-template-columns: 1fr; } }

/* ── Footer ────────────────────────────────────────────── */
.wv-footer { border-top: 1px solid var(--wv-border); background: var(--wv-surface); margin-top: var(--wv-8); }
.wv-footer-inner { max-width: var(--wv-maxw-wide); margin: 0 auto; padding: var(--wv-6) var(--wv-5); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--wv-5); }
@media (max-width: 860px) { .wv-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wv-footer-inner { grid-template-columns: 1fr; } }
.wv-footer h3 { font-family: var(--wv-font-display); font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--wv-muted); margin-bottom: var(--wv-3); }
.wv-footer a { display: block; color: var(--wv-ink-2); text-decoration: none; font-size: .88rem; padding: 3px 0; }
.wv-footer a:hover { color: var(--wv-accent-ink); }
.wv-footer p { font-size: .85rem; color: var(--wv-muted); }
.wv-footer-brand { font-family: var(--wv-font-display); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wv-ink); }

/* ── States (empty / error) ────────────────────────────── */
.wv-empty { text-align: center; padding: var(--wv-7) var(--wv-5); border: 1px dashed var(--wv-border-2); border-radius: var(--wv-radius-lg); background: var(--wv-surface); color: var(--wv-muted); }
.wv-empty h3 { font-family: var(--wv-font-display); color: var(--wv-ink); margin-bottom: var(--wv-2); font-size: 1rem; }
.wv-notice { display: flex; gap: 10px; align-items: flex-start; padding: var(--wv-3) var(--wv-4); border-radius: var(--wv-radius); font-size: .9rem; }
.wv-notice-info { background: var(--wv-accent-soft); color: var(--wv-accent-ink); border: 1px solid color-mix(in srgb, var(--wv-accent) 30%, transparent); }
.wv-notice-error { background: var(--wv-danger-soft); color: var(--wv-danger); border: 1px solid color-mix(in srgb, var(--wv-danger) 30%, transparent); }

/* ── Chips / tags ──────────────────────────────────────── */
.wv-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--wv-border-2); background: var(--wv-surface); color: var(--wv-ink-2);
  border-radius: var(--wv-radius-pill); font-size: .82rem; text-decoration: none; cursor: pointer;
  font-family: var(--wv-font-body); max-width: 100%; overflow-wrap: anywhere;
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
}
.wv-chip:hover { border-color: var(--wv-accent); color: var(--wv-accent-ink); }

/* ── Sticky in-page section nav (artist page, etc.) ────── */
.wv-subnav { position: sticky; top: calc(var(--wv-dock-h) + var(--wv-3) + 10px); z-index: 40; background: color-mix(in srgb, var(--wv-bg) 88%, transparent); backdrop-filter: blur(8px); padding: 10px 0; margin-bottom: var(--wv-5); overflow-x: auto; }
.wv-subnav-inner { display: flex; gap: var(--wv-2); }
.wv-subnav a { flex-shrink: 0; font-family: var(--wv-font-display); font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; color: var(--wv-muted); text-decoration: none; padding: 8px 14px; border-radius: var(--wv-radius-pill); border: 1px solid var(--wv-border-2); white-space: nowrap; }
.wv-subnav a[aria-current="true"] { color: var(--wv-on-accent); background: var(--wv-amb); border-color: var(--wv-amb); }

/* Reveal-on-scroll utility (progressive enhancement; JS adds .is-visible) */
.wv-reveal { opacity: 1; transform: none; }
.wv-js .wv-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--wv-motion-slow) var(--wv-ease), transform var(--wv-motion-slow) var(--wv-ease); }
.wv-js .wv-reveal.is-visible { opacity: 1; transform: none; }

/* ── Avatars — deterministic colour tile (see services.avatar_color) ──
   Square-with-soft-corner monogram, used for user identity everywhere:
   profile header, post/comment authors, notification actors. No image
   uploads exist, so the letter + stable colour together stand in as the
   identity mark. */
.wv-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--wv-radius); color: #fdfaf6;
  font-family: var(--wv-font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0;
}
.wv-avatar-lg { width: 88px; height: 88px; font-size: 2rem; border-radius: var(--wv-radius-lg); }
.wv-avatar-sm { width: 32px; height: 32px; font-size: .8rem; }
.wv-avatar-xs { width: 26px; height: 26px; font-size: .68rem; border-radius: 6px; }
/* Phase 4: a real uploaded photo reuses the same slot for notification actors */
img.wv-avatar-xs { object-fit: cover; display: block; }
/* Phase 5: a real uploaded photo reuses the same slot on Discover cards */
img.wv-avatar-sm { object-fit: cover; display: block; }

/* Large circular variant for the public-profile cover hero specifically —
   everywhere else (post cards, notifications, the nav avatar chip) keeps
   the square-with-soft-corner treatment above. The ring uses --wv-bg
   (the page background, not a surface) so it reads as a clean cutout
   against whatever sits behind it, in both themes. */
.wv-avatar-hero {
  width: 128px; height: 128px; border-radius: 50%; font-size: 2.6rem;
  border: 4px solid var(--wv-bg); box-shadow: 0 0 0 1px var(--wv-border-2);
}
@media (max-width: 560px) {
  .wv-avatar-hero { width: 96px; height: 96px; font-size: 2rem; border-width: 3px; }
}
/* Phase 3: a real uploaded photo reuses the same size/ring, applied to an <img> */
img.wv-avatar-hero { object-fit: cover; display: block; }

/* Phase 3: real cover photo layered over the existing CSS gradient fallback
   (which stays underneath — see templates/profile.html .pf-hero). */
.pf-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Post / comment cards — shared between the community feed and
   public profiles (templates/_post_card.html). Editorial list treatment:
   thin dividing rules between items rather than boxed cards, so it reads
   the same whether wrapped in a .wv-card (profile) or laid directly on
   the page (feed). ── */
.wv-post-list { padding: var(--wv-2) var(--wv-5); }
.wv-post { padding: var(--wv-4) 0; border-top: 1px solid var(--wv-border); }
.wv-post:first-child { border-top: none; }
.wv-post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wv-post-avatar { flex-shrink: 0; }
.wv-post-author { font-family: var(--wv-font-display); font-weight: 700; font-size: .85rem; color: var(--wv-ink); text-decoration: none; overflow-wrap: anywhere; }
.wv-post-author:hover { color: var(--wv-accent-ink); }
.wv-post-artist {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--wv-font-display); font-size: .62rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-accent-ink); text-decoration: none;
  border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-pill); padding: 4px 10px;
  max-width: 100%; overflow-wrap: anywhere;
}
.wv-post-artist:hover { border-color: var(--wv-accent); }
.wv-post-time { margin-left: auto; font-family: var(--wv-font-display); font-size: .66rem; letter-spacing: .3px; color: var(--wv-muted); white-space: nowrap; text-decoration: none; }
.wv-post-time:hover { color: var(--wv-accent-ink); text-decoration: underline; }
.wv-post-body { font-size: .96rem; line-height: 1.65; color: var(--wv-ink-2); white-space: pre-wrap; word-wrap: break-word; max-width: 62ch; }
.wv-post-actions { display: flex; align-items: center; gap: 8px; margin-top: var(--wv-3); flex-wrap: wrap; }
.wv-act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wv-font-body); font-size: .8rem; color: var(--wv-muted);
  background: none; border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-pill);
  padding: 0 14px; min-height: 44px; cursor: pointer;
  transition: border-color var(--wv-motion) var(--wv-ease), color var(--wv-motion) var(--wv-ease);
}
button.wv-act-btn:hover { border-color: var(--wv-accent); color: var(--wv-accent-ink); }
button.wv-act-btn:disabled { opacity: .5; cursor: not-allowed; }
.wv-act-btn svg { flex-shrink: 0; }
.wv-like-btn.is-liked { color: #e0245e; border-color: #e0245e; }
.wv-like-btn.is-liked svg { fill: currentColor; }
button.wv-del-btn:hover { border-color: var(--wv-danger); color: var(--wv-danger); }

.wv-post-discussion { scroll-margin-top: calc(var(--wv-dock-h) + var(--wv-5)); }
.wv-comments { margin: var(--wv-3) 0 0 15px; padding-left: 21px; border-left: 1px solid var(--wv-border); display: grid; gap: 10px; }
.wv-comment { font-size: .86rem; color: var(--wv-ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.wv-c-author { font-family: var(--wv-font-display); font-weight: 700; color: var(--wv-ink); text-decoration: none; font-size: .82rem; overflow-wrap: anywhere; }
.wv-c-author:hover { color: var(--wv-accent-ink); }
.wv-c-time { color: var(--wv-muted); font-size: .74rem; margin-left: 6px; }
.wv-post-viewall {
  display: inline-block; margin: var(--wv-3) 0 0 15px; font-family: var(--wv-font-display);
  font-size: .72rem; letter-spacing: .3px; color: var(--wv-accent-ink); text-decoration: none;
}
.wv-post-viewall:hover { text-decoration: underline; }
.wv-comment-form { display: flex; gap: 8px; margin: var(--wv-3) 0 0 15px; padding-left: 21px; }
.wv-comment-form input {
  flex: 1; min-width: 0; font-family: var(--wv-font-body); font-size: .86rem;
  border: 1px solid var(--wv-border-2); border-radius: var(--wv-radius-pill);
  padding: 0 14px; height: 44px; background: var(--wv-surface-2); color: var(--wv-ink);
}
.wv-comment-form input:focus { outline: none; border-color: var(--wv-accent); background: var(--wv-surface); }
.wv-comment-form button {
  font-family: var(--wv-font-display); font-size: .64rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--wv-on-accent); background: var(--wv-accent); border: none; border-radius: var(--wv-radius-pill);
  padding: 0 18px; min-height: 44px; cursor: pointer;
}
.wv-comment-form button:hover { background: var(--wv-accent-ink); }
@media (max-width: 480px) {
  .wv-post-list { padding: var(--wv-2) var(--wv-4); }
  .wv-comments, .wv-comment-form, .wv-post-viewall { margin-left: 6px; padding-left: 10px; }
}