:root {
  --bg: #f7f5f2;
  --surface: #ffffff;
  --surface-alt: #f0ece8;
  --text: #241f1f;
  --muted: #6f6461;
  --border: #ded8d3;
  --accent: #7b1f2d;
  --accent-strong: #5f1621;
  --accent-soft: #f4e7e9;
  --gold: #9a722b;
  --danger: #9c2d2d;
  --success: #2f6b4d;
  --shadow: 0 12px 35px rgba(38, 27, 28, .09);
  --radius: 18px;
  --player-height: 108px;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  padding-bottom: 24px;
}

body.has-player { padding-bottom: calc(var(--player-height) + 34px); }

button, input { font: inherit; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 9px 14px;
  background: var(--text);
  color: #fff;
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 242, .94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

.header-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: auto minmax(260px, 620px) auto;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 25px;
  box-shadow: 0 6px 18px rgba(123,31,45,.22);
}

.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 18px; }
.brand-copy small { color: var(--muted); font-size: 11px; direction: ltr; text-align: right; margin-top: 3px; }

.header-search {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.header-search:focus-within {
  border-color: rgba(123,31,45,.55);
  box-shadow: 0 0 0 4px rgba(123,31,45,.08);
}
.header-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 11px 17px;
  color: var(--text);
  background: transparent;
}
.header-search button {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  padding: 10px 17px;
  font-weight: 700;
}

.icon-button {
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 42px;
  height: 42px;
  border-radius: 13px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.icon-button:hover { border-color: #c9bdb8; background: #fbfaf9; }

.queue-button { position: relative; }
.queue-count {
  position: absolute;
  top: -6px; left: -7px;
  min-width: 20px; height: 20px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 0 5px;
}

.main-content {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 64px;
  outline: none;
}

.page-loading, .empty-state, .error-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  text-align: center;
  color: var(--muted);
}

.error-state strong { display: block; color: var(--danger); margin-bottom: 8px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 38px;
}
.hero-main, .hero-stats {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-main {
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.13), transparent 36%),
    linear-gradient(135deg, var(--accent-strong), var(--accent));
  color: #fff;
  padding: 42px;
}
.hero-kicker { color: #ead4d7; font-size: 14px; margin-bottom: 8px; }
.hero h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 52px); line-height: 1.25; }
.hero p { margin: 0; color: #f1e5e7; max-width: 660px; font-size: 16px; }

.hero-search {
  display: flex;
  margin-top: 26px;
  background: #fff;
  border-radius: 16px;
  padding: 5px;
}
.hero-search input {
  flex: 1;
  min-width: 0;
  border: 0; outline: 0;
  padding: 13px 14px;
  border-radius: 12px;
}
.hero-search button {
  border: 0;
  background: var(--text);
  color: #fff;
  padding: 11px 20px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.hero-stats {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat {
  background: var(--surface-alt);
  border-radius: 16px;
  padding: 16px;
}
.stat strong { display: block; font-size: 27px; line-height: 1.1; color: var(--accent); }
.stat span { display: block; color: var(--muted); font-size: 13px; margin-top: 7px; }

.section { margin-top: 34px; }
.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}
.section-header h2 { margin: 0; font-size: 23px; }
.section-header p { margin: 3px 0 0; color: var(--muted); }
.section-header a { color: var(--accent); font-weight: 700; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.entity-card {
  display: flex;
  flex-direction: column;
  min-height: 145px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.entity-card:hover {
  transform: translateY(-2px);
  border-color: #cbbdb8;
  box-shadow: 0 8px 22px rgba(36,31,31,.06);
}
.entity-card h3 { margin: 0 0 8px; font-size: 18px; }
.entity-card p { margin: 0; color: var(--muted); font-size: 13px; }
.entity-card .card-meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  padding: 4px 9px;
  white-space: nowrap;
}
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.badge.unavailable { background: #f8e7e5; color: var(--danger); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 18px;
}
.breadcrumbs a:hover { color: var(--accent); }

.page-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-title h1 { margin: 0 0 5px; font-size: clamp(27px, 4vw, 40px); line-height: 1.35; }
.page-title p { margin: 0; color: var(--muted); }
.page-title-actions { display: flex; gap: 8px; }

.primary-button, .secondary-button, .play-row-button {
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}
.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
}
.primary-button:hover { background: var(--accent-strong); }
.secondary-button {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 16px;
}
.secondary-button:hover { background: #fbfaf9; }

.release-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.release-row {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 17px 18px;
  transition: border-color .14s, background .14s;
}
.release-row:hover { border-color: #cbbdb8; background: #fffdfc; }
.release-row-main { display: flex; justify-content: space-between; gap: 12px; }
.release-row h3 { margin: 0; font-size: 17px; }
.release-row .release-year { color: var(--gold); font-weight: 700; direction: ltr; }
.release-row .release-meta { color: var(--muted); font-size: 12px; margin-top: 8px; }

.track-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.track-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 11px 16px;
  border-bottom: 1px solid #ece7e3;
}
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: #fcfbfa; }
.track-index {
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.track-title { min-width: 0; }
.track-title a { font-weight: 700; }
.track-title a:hover { color: var(--accent); }
.track-title small {
  display: block;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}
.track-duration { color: var(--muted); font-size: 12px; direction: ltr; }
.play-row-button {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 42px; height: 42px;
  padding: 0;
}
.play-row-button:hover { border-color: var(--accent); color: var(--accent); }
.play-row-button:disabled { cursor: not-allowed; opacity: .45; }

.search-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}
.search-panel form {
  display: flex;
  gap: 9px;
}
.search-panel input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
}
.search-panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(123,31,45,.07); }

.result-count { color: var(--muted); margin: 11px 0 0; font-size: 13px; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 22px 0 0;
}
.pagination button {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

.detail-card {
  display: grid;
  grid-template-columns: 1fr minmax(240px, .42fr);
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 24px;
}
.detail-card h1 { margin-top: 0; }
.detail-meta {
  display: grid;
  gap: 10px;
  align-content: start;
}
.meta-item {
  background: var(--surface-alt);
  border-radius: 13px;
  padding: 11px 13px;
}
.meta-item span { display: block; color: var(--muted); font-size: 11px; }
.meta-item strong { display: block; margin-top: 2px; font-size: 14px; }

.lat-id {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}

.queue-panel {
  position: fixed;
  z-index: 90;
  top: 0; bottom: 0;
  left: 0;
  width: min(430px, 92vw);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 40px rgba(31,25,25,.18);
  transform: translateX(-105%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
.queue-panel.open { transform: translateX(0); }
.queue-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px;
  border-bottom: 1px solid var(--border);
}
.queue-panel-header strong { display: block; }
.queue-panel-header small { color: var(--muted); }
.queue-list { overflow-y: auto; padding: 7px; }
.queue-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: right;
  cursor: pointer;
  border-radius: 12px;
  padding: 11px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 9px;
}
.queue-item:hover { background: var(--surface-alt); }
.queue-item.current { background: var(--accent-soft); color: var(--accent); }
.queue-item-index { text-align: center; color: var(--muted); }
.queue-item small { display: block; color: var(--muted); }
.queue-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  background: rgba(20,16,17,.42);
}

.player-shell {
  position: fixed;
  z-index: 70;
  bottom: 0;
  left: 0; right: 0;
  min-height: var(--player-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(36,31,31,.08);
  backdrop-filter: blur(14px);
}
.player-inner {
  max-width: 1280px;
  min-height: var(--player-height);
  margin: 0 auto;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: minmax(190px, .85fr) auto minmax(280px, 1.4fr) auto;
  align-items: center;
  gap: 16px;
}
.player-track { min-width: 0; }
.player-title-button {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: right;
  cursor: pointer;
  padding: 0;
}
.player-title-button strong,
.player-title-button span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player-title-button strong { font-size: 14px; }
.player-title-button span { color: var(--muted); font-size: 11px; margin-top: 3px; }

.player-controls { display: flex; align-items: center; gap: 5px; direction: ltr; }
.player-control, .player-play {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.player-control { width: 36px; height: 36px; border-radius: 999px; }
.player-control:hover { background: var(--surface-alt); }
.player-small-control { font-size: 11px; color: var(--muted); }
.player-play {
  width: 48px; height: 48px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
}
.player-play:hover { background: var(--accent-strong); }

.player-timeline {
  display: grid;
  grid-template-columns: 44px minmax(120px,1fr) 44px;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.player-waveform {
  width: 100%;
  height: 42px;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
}
.player-waveform:focus-visible { box-shadow: 0 0 0 3px rgba(123,31,45,.2); }
.player-actions { display: flex; gap: 5px; direction: ltr; }

.toast {
  position: fixed;
  z-index: 120;
  bottom: calc(var(--player-height) + 22px);
  left: 50%;
  transform: translate(-50%, 20px);
  background: #211d1d;
  color: #fff;
  border-radius: 12px;
  padding: 10px 15px;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  max-width: min(92vw, 520px);
  text-align: center;
  font-size: 13px;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 900px) {
  :root { --player-height: 152px; }
  .header-inner {
    grid-template-columns: auto 1fr auto;
    padding: 9px 13px;
    gap: 10px;
  }
  .brand-copy small { display: none; }
  .brand-mark { width: 40px; height: 40px; }
  .header-search input { padding: 10px 12px; }
  .header-search button { padding: 9px 12px; }
  .hero { grid-template-columns: 1fr; }
  .hero-main { padding: 30px 24px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .player-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "track actions"
      "timeline timeline"
      "controls controls";
    gap: 5px 10px;
    padding: 8px 12px;
  }
  .player-track { grid-area: track; }
  .player-actions { grid-area: actions; }
  .player-timeline { grid-area: timeline; }
  .player-controls { grid-area: controls; justify-content: center; }
}

@media (max-width: 650px) {
  :root { --player-height: 156px; }
  body.has-player { padding-bottom: calc(var(--player-height) + 24px); }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand-copy { display: none; }
  .header-search button { font-size: 0; width: 40px; padding: 0; }
  .header-search button::after { content: "⌕"; font-size: 22px; }
  .main-content { width: min(100% - 22px, 1180px); padding-top: 22px; }
  .hero-main { padding: 28px 20px; border-radius: 21px; }
  .hero h1 { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr 1fr; padding: 14px; border-radius: 20px; }
  .card-grid, .release-list { grid-template-columns: 1fr; }
  .page-title { flex-direction: column; }
  .detail-card { grid-template-columns: 1fr; padding: 18px; }
  .track-row {
    grid-template-columns: 38px minmax(0,1fr) 42px;
    gap: 8px;
    padding: 10px 9px;
  }
  .track-duration { display: none; }
  .player-track { padding-left: 5px; }
  .player-timeline { grid-template-columns: 38px minmax(100px,1fr) 38px; }
  /* Phase 9E-R2 preserved in Phase 10B-2 R1:
     keep ±10 second seek controls available on mobile. */
  .player-controls {
    gap: 3px;
    width: 100%;
  }

  .player-control {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .player-small-control {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
    background: var(--surface-alt);
  }

  .player-play {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Phase 8D-R8 — merged accessibility refinements.
   Replaces the separate a11y-r3.css request. */

:where(a, button, input, canvas, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

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

.queue-icon::before {
  content: "☷";
}

@media (forced-colors: active) {
  :where(a, button, input, canvas, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
  }

  .player-play,
  .primary-button {
    border: 1px solid ButtonText;
  }
}


/* =========================================================
   PHASE 9C — PREMIUM VISUAL LAYER
   Presentation-only redesign over the validated R8 core.
   ========================================================= */
:root {
  --bg: #f5f1ec;
  --surface: #fffdfb;
  --surface-alt: #eee7df;
  --text: #1b1818;
  --muted: #6e6461;
  --border: #ded4cb;
  --accent: #751927;
  --accent-strong: #4f0f18;
  --accent-soft: #f4e4e6;
  --gold: #af8a49;
  --shadow: 0 20px 55px rgba(58, 38, 35, .10);
  --radius: 22px;
  font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, "Segoe UI", Arial, sans-serif;
}

html {
  background:
    radial-gradient(circle at 7% 18%, rgba(117,25,39,.04), transparent 25%),
    #f5f1ec;
}

body {
  background:
    radial-gradient(circle at 7% 18%, rgba(117,25,39,.035), transparent 28%),
    linear-gradient(180deg,#f8f5f1 0%,#f5f1ec 55%,#f0e9e2 100%);
}

.site-header {
  background: rgba(248,245,241,.91);
  border-bottom-color: rgba(117,25,39,.10);
  backdrop-filter: blur(18px);
}

.header-inner { padding-block: 14px; }

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px 16px 16px 5px;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 24px rgba(117,25,39,.22);
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px 12px 12px 3px;
}
.brand-copy strong { font-size: 19px; }
.brand-copy small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.header-search {
  border-radius: 14px;
  background: rgba(255,253,251,.90);
  min-height: 46px;
  box-shadow: 0 5px 22px rgba(56,35,32,.03);
}
.header-search button { color: var(--accent); }

.main-content {
  width: min(1220px, calc(100% - 40px));
  padding-top: 28px;
}

.section-kicker {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
}

.p9-hero {
  min-height: 500px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(135deg,#651420 0%,#871e30 56%,#4c0f17 100%);
  box-shadow: var(--shadow);
  color: #fff;
  position: relative;
}
.p9-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg,#000,transparent 80%);
}
.p9-hero-content {
  padding: 64px 62px 54px;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  color: #ead8b2;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
}
.hero-eyebrow span { width: 28px; height: 1px; background: #ead8b2; }
.p9-hero h1 {
  margin: 16px 0 18px;
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1.16;
  letter-spacing: -.03em;
}
.p9-hero h1 em { font-style: normal; font-weight: 500; color: #ead8b2; }
.p9-hero p {
  max-width: 610px;
  margin: 0;
  color: #f2e9e6;
  font-size: 16px;
}
.p9-hero-search {
  display: flex;
  align-items: center;
  max-width: 620px;
  min-height: 58px;
  margin-top: 32px;
  padding: 5px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,.15);
}
.p9-hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 15px;
  color: #282020;
}
.p9-hero-search button {
  border: 0;
  border-radius: 12px;
  background: #211b1b;
  color: #fff;
  padding: 11px 23px;
  font-weight: 800;
  cursor: pointer;
}
.hero-footnote {
  margin-top: 22px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  color: #eadedb;
  font-size: 12px;
}
.hero-footnote a { color: #fff; font-weight: 800; }

.p9-hero-art { min-height: 500px; position: relative; overflow: hidden; }
.hero-arch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 190px 190px 0 0;
  border: 1px solid rgba(226,205,162,.32);
}
.hero-arch-back { width: 430px; height: 455px; bottom: -115px; background: rgba(255,255,255,.025); }
.hero-arch-mid { width: 340px; height: 390px; bottom: -76px; background: rgba(255,255,255,.035); }
.hero-arch-front {
  width: 260px; height: 330px; bottom: -40px;
  background: linear-gradient(180deg,rgba(240,220,178,.14),rgba(255,255,255,.025));
  display: flex; flex-direction: column; align-items: center; padding-top: 60px;
}
.hero-calligraphy {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 66px;
  color: #f2dec0;
  line-height: 1;
  text-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.hero-arch-front small { margin-top: 18px; color: #dcc7c6; font-size: 10px; }

.p9-stat-strip {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(56,35,32,.06);
}
.p9-stat-strip > div { padding: 23px 28px; border-left: 1px solid var(--border); }
.p9-stat-strip > div:last-child { border-left: 0; }
.p9-stat-strip strong { display:block; color: var(--accent); font-size: 28px; line-height:1.1; }
.p9-stat-strip span { display:block; color: var(--muted); font-size: 11px; margin-top: 7px; }

.p9-section { margin-top: 56px; }
.p9-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.p9-section-header h2 { margin: 4px 0 0; font-size: 29px; line-height: 1.25; }
.p9-section-header p { margin: 3px 0 0; color: var(--muted); }
.p9-section-header > a { color: var(--accent); font-weight: 800; }
.section-note { color: var(--muted); font-size: 11px; }

.p9-reciter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.p9-reciter-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0,1fr) 36px;
  align-items: center;
  gap: 15px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(62,42,39,.035);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.p9-reciter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(62,42,39,.09);
  border-color: #c8b5ae;
}
.p9-reciter-image { width:86px; height:86px; border-radius:20px; overflow:hidden; background:#2e181d; }
.reciter-portrait { display:block; object-fit:cover; }
.p9-reciter-card-photo { width:86px; height:86px; }
.reciter-portrait-fallback {
  display:grid; place-items:center; background:linear-gradient(145deg,#7c2231,#2f181c);
  color:white; font-size:30px; font-weight:800;
}
.p9-reciter-copy { min-width:0; }
.p9-reciter-copy small { color: var(--accent); font-size:10px; font-weight:800; }
.p9-reciter-copy h3 { margin:2px 0 0; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p9-reciter-copy p { margin:2px 0 0; color:var(--muted); font-size:11px; }
.p9-card-arrow { color:var(--accent); font-size:18px; }

.p9-subject-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.p9-subject-card {
  display:grid; grid-template-columns:48px minmax(0,1fr) 24px; gap:13px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px;
}
.subject-symbol {
  width:48px; height:48px; display:grid; place-items:center; border-radius:15px;
  background:linear-gradient(145deg,#f3e5e6,#ead8d9); color:var(--accent); font-weight:800; font-size:20px;
}
.p9-subject-card h3 { margin:0; font-size:15px; }
.p9-subject-card p { margin:2px 0 0; color:var(--muted); font-size:11px; }

.p9-reciter-hero {
  display:grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap:32px;
  align-items:center;
  padding:28px;
  border:1px solid var(--border);
  border-radius:30px;
  background:linear-gradient(135deg,#fffdfb,#f6ecea);
  box-shadow:0 14px 40px rgba(62,42,39,.07);
}
.p9-reciter-hero-image {
  width:250px; aspect-ratio:1; border-radius:28px; overflow:hidden; background:#2e181d;
  box-shadow:0 16px 34px rgba(52,31,31,.16);
}
.p9-reciter-hero-photo { width:100%; height:100%; object-fit:cover; }
.p9-reciter-hero-copy h1 { margin:5px 0 6px; font-size:clamp(34px,5vw,52px); line-height:1.2; }
.p9-reciter-hero-copy p { max-width:700px; color:var(--muted); margin:0 0 17px; }
.p9-badge-row { display:flex; gap:8px; flex-wrap:wrap; }

.p9-release-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.p9-release-card {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 8px 24px rgba(62,42,39,.04);
  transition:transform .18s,box-shadow .18s;
}
.p9-release-card:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(62,42,39,.09); }
.p9-release-card-copy { padding:13px 14px 15px; }
.p9-release-card-copy small { color:var(--accent); font-size:10px; font-weight:800; }
.p9-release-card-copy h3 { margin:2px 0 3px; font-size:15px; }
.p9-release-card-copy p { margin:0; color:var(--muted); font-size:10px; }

.release-art {
  position:relative;
  overflow:hidden;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:19px;
  background:#55151f;
  isolation:isolate;
}
.release-card-art { width:100%; aspect-ratio:1; }
.release-hero-art { width:270px; aspect-ratio:1; border-radius:24px; box-shadow:0 18px 42px rgba(50,25,28,.18); }
.recording-art { width:260px; aspect-ratio:1; border-radius:24px; }
.release-art::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.46) 100%);
}
.release-art-year {
  position:absolute; top:14px; right:15px; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:3px 8px; font-size:9px;
}
.release-art-title {
  font-family: Georgia,"Times New Roman",serif;
  font-size:clamp(23px,2.2vw,34px);
  line-height:1.08;
  overflow-wrap:anywhere;
}
.release-art-subtitle { margin-top:7px; font-size:9px; opacity:.83; }
.cover-arch { background:linear-gradient(145deg,#7b1827,#3a0d14); }
.cover-arch .release-art-motif {
  position:absolute; width:72%; height:78%; left:14%; bottom:-18%; z-index:-1;
  border:1px solid rgba(239,218,176,.46); border-radius:120px 120px 0 0;
}
.cover-lines { background:linear-gradient(145deg,#263a3a,#101b1c); }
.cover-lines .release-art-motif {
  position:absolute; inset:0; z-index:-1;
  background:repeating-linear-gradient(115deg,transparent 0 16px,rgba(255,255,255,.04) 16px 17px);
}
.cover-ring { background:linear-gradient(145deg,#9b6f38,#4a2a14); }
.cover-ring .release-art-motif {
  position:absolute; width:240px; height:240px; border:1px solid rgba(255,255,255,.22);
  border-radius:50%; top:-80px; left:-75px; z-index:-1;
  box-shadow:0 0 0 20px rgba(255,255,255,.025),0 0 0 40px rgba(255,255,255,.02);
}
.cover-grid { background:linear-gradient(145deg,#513859,#241726); }
.cover-grid .release-art-motif {
  position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
}
.cover-manuscript { background:linear-gradient(145deg,#795b48,#32241d); }
.cover-manuscript .release-art-motif {
  position:absolute; inset:17px; z-index:-1; border:1px solid rgba(247,229,199,.28);
}
.cover-disc { background:linear-gradient(145deg,#44566d,#1d2631); }
.cover-disc .release-art-motif {
  position:absolute; width:250px; height:250px; border:1px solid rgba(255,255,255,.18);
  border-radius:50%; top:-85px; left:-85px; z-index:-1;
  box-shadow:0 0 0 15px rgba(255,255,255,.025),0 0 0 30px rgba(255,255,255,.02);
}

.p9-release-hero {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:32px;
  align-items:center;
  padding:30px;
  border:1px solid var(--border);
  border-radius:30px;
  background:var(--surface);
  box-shadow:0 14px 40px rgba(62,42,39,.07);
}
.p9-release-hero-copy h1 { margin:5px 0 5px; font-size:clamp(34px,5vw,50px); line-height:1.22; }
.p9-reciter-text-link { color:var(--accent); font-weight:800; }
.p9-reciter-text-link.static { color:var(--muted); }
.p9-release-hero-copy .p9-badge-row { margin-top:17px; }
.p9-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }

.primary-button {
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 9px 24px rgba(117,25,39,.17);
}
.primary-button:hover:not(:disabled) { background:var(--accent-strong); }

.premium-track-list {
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
}
.premium-track-row {
  grid-template-columns:34px 38px minmax(0,1fr) 74px;
  gap:11px;
  padding:13px 15px;
  border-bottom:1px solid #ece4de;
}
.premium-track-row:last-child { border-bottom:0; }
.premium-track-row:hover { background:#fbf7f4; }
.track-round-play {
  width:34px; min-width:34px; height:34px; padding:0; border-radius:50%;
  background:#f1e7e5; color:var(--accent); border:0; box-shadow:none;
}
.track-round-play:hover:not(:disabled) { background:var(--accent); color:#fff; }

.p9-recording-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,.55fr); gap:18px; }
.p9-recording-main {
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:30px; align-items:center;
  padding:28px; border:1px solid var(--border); border-radius:28px; background:var(--surface);
  box-shadow:0 14px 38px rgba(62,42,39,.06);
}
.p9-recording-copy h1 { margin:8px 0 4px; font-size:clamp(32px,5vw,48px); line-height:1.22; }
.p9-recording-copy > p { color:var(--muted); margin:4px 0; }
.p9-metadata-panel {
  padding:25px; border:1px solid var(--border); border-radius:28px; background:var(--surface);
  box-shadow:0 14px 38px rgba(62,42,39,.05);
}
.p9-metadata-panel .detail-meta { margin-top:13px; }

.archive-notice-card {
  max-width:720px;
  margin:40px auto;
  padding:34px;
  border:1px solid var(--border);
  border-radius:26px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.archive-notice-card h1 { margin:4px 0; font-size:34px; }
.archive-notice-card p { color:var(--muted); margin:0 0 20px; }

.p9-simple-title h1 { margin-top:4px; }
.p9-search-panel { border-radius:22px; background:var(--surface); border-color:var(--border); }

/* Player visual refinement; audio logic is unchanged. */
.player-shell {
  background:rgba(255,253,251,.97);
  border-top-color:#d8cec7;
  backdrop-filter:blur(18px);
  box-shadow:0 -18px 45px rgba(49,31,29,.09);
}
.player-play {
  background:var(--accent);
  box-shadow:0 8px 20px rgba(117,25,39,.22);
}
.player-title-button strong { color:var(--text); }
.player-waveform { border-radius:10px; }

.queue-panel { background:#fffdfb; border-color:var(--border); }
.queue-item.current { background:var(--accent-soft); }

@media (max-width: 980px) {
  .p9-reciter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p9-release-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .p9-subject-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .main-content { width:min(100% - 24px, 720px); }
  .p9-hero { grid-template-columns:1fr; }
  .p9-hero-content { padding:40px 28px 30px; }
  .p9-hero-art { min-height:300px; }
  .p9-stat-strip { grid-template-columns:1fr 1fr; }
  .p9-stat-strip > div:nth-child(2) { border-left:0; }
  .p9-stat-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .p9-reciter-hero { grid-template-columns:170px minmax(0,1fr); gap:20px; padding:22px; }
  .p9-reciter-hero-image { width:170px; }
  .p9-release-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .p9-release-hero { grid-template-columns:210px minmax(0,1fr); gap:22px; padding:22px; }
  .release-hero-art { width:210px; }
  .p9-recording-layout { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .main-content { width:min(100% - 20px, 520px); padding-top:18px; }
  .p9-hero { border-radius:24px; }
  .p9-hero-content { padding:32px 20px 26px; }
  .p9-hero h1 { font-size:42px; }
  .p9-hero p { font-size:14px; }
  .p9-hero-search { min-height:auto; display:grid; grid-template-columns:1fr; padding:8px; }
  .p9-hero-search input { min-height:44px; }
  .p9-hero-search button { width:100%; }
  .p9-hero-art { min-height:250px; }
  .hero-arch-front { width:205px; height:265px; }
  .hero-arch-mid { width:270px; height:320px; }
  .hero-arch-back { width:340px; height:380px; }

  .p9-stat-strip > div { padding:18px; }
  .p9-stat-strip strong { font-size:23px; }
  .p9-section { margin-top:40px; }
  .p9-section-header { align-items:flex-start; flex-direction:column; gap:7px; }
  .p9-section-header h2 { font-size:25px; }

  .p9-reciter-grid { grid-template-columns:1fr; }
  .p9-reciter-card { grid-template-columns:72px minmax(0,1fr) 26px; }
  .p9-reciter-image,.p9-reciter-card-photo { width:72px; height:72px; }

  .p9-subject-grid { grid-template-columns:1fr; }

  .p9-reciter-hero { grid-template-columns:1fr; text-align:center; }
  .p9-reciter-hero-image { width:min(100%,280px); margin:auto; }
  .p9-badge-row { justify-content:center; }

  .p9-release-grid { gap:10px; }
  .release-art { padding:13px; }
  .release-art-title { font-size:21px; }
  .p9-release-card-copy { padding:10px 11px 12px; }

  .p9-release-hero { grid-template-columns:1fr; }
  .release-hero-art { width:min(100%,290px); margin:auto; }
  .p9-release-hero-copy { text-align:center; }
  .p9-release-hero-copy .p9-badge-row,.p9-release-hero-copy .p9-actions { justify-content:center; }

  .premium-track-row { grid-template-columns:26px 34px minmax(0,1fr) 51px; padding:11px 9px; gap:7px; }
  .premium-track-row .track-title a { font-size:12px; }
  .premium-track-row .track-title small { font-size:9px; }

  .p9-recording-main { grid-template-columns:1fr; padding:20px; }
  .recording-art { width:min(100%,290px); margin:auto; }
  .p9-recording-copy { text-align:center; }
  .p9-recording-copy .p9-badge-row,.p9-recording-copy .p9-actions { justify-content:center; }
}


/* =========================================================
   PHASE 9D-R1 — ACCESSIBILITY / LEGIBILITY PATCH
   No player, API, router or waveform logic changes.
   ========================================================= */

/* Accessible warm-gold text on light surfaces (>= 4.5:1). */
:root {
  --gold: #8c672c;
}

/* Lighthouse mobile legibility: visible supporting text is >= 12px. */
.brand-copy small,
.badge,
.meta-item span,
.player-title-button span,
.player-small-control,
.queue-count,
.section-kicker,
.p9-stat-strip span,
.section-note,
.p9-reciter-copy small,
.p9-reciter-copy p,
.p9-subject-card p,
.p9-release-card-copy small,
.p9-release-card-copy p,
.release-art-year,
.release-art-subtitle,
.hero-arch-front small {
  font-size: 12px;
}

/* The premium section kicker uses the accessible gold on ivory/white. */
.section-kicker {
  color: var(--gold);
}

/* Keep the compact mobile search icon, but do not expose 0px visible text
   to Lighthouse's legibility audit. */
@media (max-width: 650px) {
  .header-search button {
    font-size: 12px;
    color: transparent;
    overflow: hidden;
    position: relative;
  }
  .header-search button::after {
    color: var(--accent);
  }
}

/* Track metadata was explicitly 9px in the Phase 9 mobile layer. */
@media (max-width: 560px) {
  .premium-track-row .track-title small {
    font-size: 12px;
    line-height: 1.45;
  }

  .p9-release-card-copy small,
  .p9-release-card-copy p,
  .p9-reciter-copy small,
  .p9-reciter-copy p,
  .p9-subject-card p,
  .p9-stat-strip span,
  .section-note,
  .release-art-year,
  .release-art-subtitle {
    font-size: 12px;
    line-height: 1.45;
  }
}


/* =========================================================
   PHASE 9D-R1.3 — SEMANTIC BRAND ACCESSIBILITY
   Use actual link text as the accessible name.
   ========================================================= */

/* On mobile, keep the brand copy in the accessibility tree while removing it
   visually from layout. This avoids an empty/ambiguous link without aria-label. */
@media (max-width: 650px) {
  .brand-copy {
    display: block;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .brand-copy small {
    display: block;
  }
}


/* =========================================================
   PHASE 9D-R2 — PROGRESSIVE RENDER PERFORMANCE LAYER
   ========================================================= */
.home-progressive-placeholder,
.home-progressive-grid {
  contain: layout paint;
}

.progressive-card-skeleton,
.progressive-subject-skeleton {
  min-height: 112px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,.75) 50%,
      rgba(255,255,255,.35) 100%),
    var(--surface-alt);
  background-size: 220% 100%;
  animation: p9d-r2-shimmer 1.4s ease-in-out infinite;
}

.progressive-subject-skeleton {
  min-height: 78px;
  border-radius: 18px;
}

@keyframes p9d-r2-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progressive-card-skeleton,
  .progressive-subject-skeleton {
    animation: none;
  }
}


/* =========================================================
   PHASE 9D-R2.2 — RECORDING LCP PREBOOT SHELL
   This shell exists only until the full SPA recording view hydrates.
   ========================================================= */
.r22-recording-preboot {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(62,42,39,.06);
  min-height: 316px;
}

.r22-recording-preboot-art {
  width: 260px;
  aspect-ratio: 1;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(145deg,#7b1827,#3a0d14);
  color: #f0dbc5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
}

.r22-recording-preboot-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.r22-recording-preboot-copy h1 {
  margin: 8px 0 5px;
  font-size: clamp(32px,5vw,48px);
  line-height: 1.22;
}

.r22-recording-preboot-copy p {
  color: var(--muted);
  margin: 4px 0 7px;
}

.r22-recording-preboot-copy small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 560px) {
  .r22-recording-preboot {
    grid-template-columns: 1fr;
    padding: 20px;
    min-height: 0;
  }

  .r22-recording-preboot-art {
    width: min(100%,290px);
    margin: auto;
  }

  .r22-recording-preboot-copy {
    text-align: center;
  }
}


/* =========================================================
   PHASE 9D-R2.3 — STATIC RECORDING METADATA PREBOOT
   ========================================================= */
.r23-recording-preboot {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 14px 38px rgba(62,42,39,.06);
  min-height: 316px;
}

.r23-recording-preboot-art {
  width: 260px;
  aspect-ratio: 1;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(145deg,#7b1827,#3a0d14);
  color: #f0dbc5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
}

.r23-recording-preboot-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.r23-recording-preboot-copy h1 {
  margin: 8px 0 5px;
  font-size: clamp(32px,5vw,48px);
  line-height: 1.22;
}

.r23-recording-preboot-copy p {
  color: var(--muted);
  margin: 4px 0 7px;
}

.r23-recording-preboot-copy small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 560px) {
  .r23-recording-preboot {
    grid-template-columns: 1fr;
    padding: 20px;
    min-height: 0;
  }

  .r23-recording-preboot-art {
    width: min(100%,290px);
    margin: auto;
  }

  .r23-recording-preboot-copy {
    text-align: center;
  }
}


/* =========================================================
   PHASE 10B-1 — LOCAL USER LIBRARY
   ========================================================= */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.library-nav-button {
  height: 42px;
  min-width: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 800;
  color: var(--accent);
}

.library-nav-button:hover {
  border-color: #c9bdb8;
  background: #fbfaf9;
}

.library-nav-icon {
  font-size: 21px;
  line-height: 1;
}

.track-favorite-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 21px;
  display: grid;
  place-items: center;
}

.track-favorite-button:hover,
.track-favorite-button.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.premium-track-row {
  grid-template-columns: 34px 38px minmax(0,1fr) 74px 38px;
}

.p10-favorite-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.p10-favorite-action[aria-pressed="true"] {
  color: var(--accent);
  border-color: rgba(123,31,45,.35);
  background: var(--accent-soft);
}

.p10-home-library {
  scroll-margin-top: 92px;
}

.p10-library-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 10%, rgba(123,31,45,.07), transparent 34%),
    var(--surface);
  box-shadow: 0 14px 38px rgba(62,42,39,.05);
}

.p10-library-hero h1 {
  margin: 5px 0 4px;
  font-size: clamp(34px,5vw,50px);
}

.p10-library-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 720px;
}

.p10-library-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px,1fr));
  gap: 8px;
}

.p10-library-stats > div {
  padding: 13px 14px;
  min-width: 88px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fffaf8;
  text-align: center;
}

.p10-library-stats strong {
  display: block;
  color: var(--accent);
  font-size: 24px;
  line-height: 1.2;
}

.p10-library-stats span {
  color: var(--muted);
  font-size: 12px;
}

.p10-library-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.p10-library-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 8px 25px rgba(48,34,34,.04);
}

.p10-library-mark {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#7b1827,#3a0d14);
  color: #f0dbc5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
}

.p10-library-card-copy {
  min-width: 0;
}

.p10-library-card-copy small,
.p10-library-card-copy p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.p10-library-card-copy h3 {
  margin: 2px 0 5px;
  font-size: 17px;
  line-height: 1.45;
}

.p10-library-card-copy h3 a:hover {
  color: var(--accent);
}

.p10-library-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.p10-library-card-actions button,
.p10-library-card-actions a {
  min-height: 34px;
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
}

.p10-library-play {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.p10-library-open {
  border: 1px solid var(--border);
  background: var(--surface);
}

.p10-library-remove {
  border: 1px solid #e4c9cd;
  background: #fff8f8;
  color: var(--accent);
  cursor: pointer;
}

.p10-library-progress {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  background: #ece4df;
}

.p10-library-progress::-webkit-progress-bar {
  background: #ece4df;
  border-radius: 999px;
}

.p10-library-progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 999px;
}

.p10-library-progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 999px;
}

.p10-library-progress-label {
  display: block;
  margin-top: 4px;
}

.p10-local-note {
  margin-top: 38px;
  padding: 18px 20px;
  border: 1px solid #ddcfbd;
  border-radius: 18px;
  background: #fffaf2;
}

.p10-local-note strong {
  color: var(--accent);
}

.p10-local-note p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .library-nav-label { display: none; }
  .library-nav-button { width: 42px; padding: 0; }
}

@media (max-width: 650px) {
  .header-actions { gap: 5px; }

  .premium-track-row {
    grid-template-columns: 26px 34px minmax(0,1fr) 36px;
  }

  .premium-track-row .track-duration {
    display: none;
  }

  .track-favorite-button {
    width: 32px;
    height: 32px;
  }

  .p10-library-hero {
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .p10-library-stats {
    grid-template-columns: repeat(3,1fr);
  }

  .p10-library-stats > div {
    min-width: 0;
    padding: 10px 7px;
  }

  .p10-library-grid {
    grid-template-columns: 1fr;
  }

  .p10-library-card {
    padding: 14px;
  }
}


/* Phase 9E-R2 — extra-narrow mobile player fit. */
@media (max-width: 360px) {
  .player-controls { gap: 1px; }

  .player-control {
    width: 36px;
    height: 40px;
    flex-basis: 36px;
  }

  .player-small-control {
    width: 42px;
    height: 44px;
    flex-basis: 42px;
    font-size: 11px;
  }

  .player-play {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}


/* =========================================================
   PHASE 10V1 — RELIGIOUS VISUAL SYSTEM
   Dark devotional black / burgundy / antique-gold interface.
   Visual-only layer. Player/API/catalog behavior is unchanged.
   ========================================================= */

:root {
  --bg: #070809;
  --surface: #101112;
  --surface-alt: #161313;
  --surface-deep: #0b0c0d;
  --text: #f5eadc;
  --muted: #c2b4aa;
  --border: #3b2b24;
  --border-strong: #6d4b32;
  --accent: #9e2430;
  --accent-strong: #741722;
  --accent-soft: rgba(121, 26, 37, .20);
  --gold: #d6aa64;
  --gold-bright: #f0c982;
  --danger: #d65a5a;
  --success: #6ea788;
  --shadow: 0 22px 55px rgba(0, 0, 0, .34);
  --radius: 20px;
  color-scheme: dark;
}

html {
  background:
    radial-gradient(circle at 50% -10%, rgba(116,23,34,.19), transparent 38%),
    #070809;
}

body {
  background:
    radial-gradient(circle at 16% 13%, rgba(126,52,26,.08), transparent 25%),
    radial-gradient(circle at 82% 22%, rgba(130,24,34,.10), transparent 28%),
    linear-gradient(#08090a, #070809 72%, #050607);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  z-index: -1;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 28px, rgba(214,170,100,.025) 28px 29px),
    repeating-linear-gradient(-45deg, transparent 0 28px, rgba(214,170,100,.018) 28px 29px);
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* Header */
.site-header {
  background: rgba(6,7,8,.93);
  border-bottom: 1px solid rgba(214,170,100,.18);
  box-shadow: 0 9px 35px rgba(0,0,0,.26);
}

.header-inner {
  max-width: 1300px;
}

.brand-mark,
.footer-arch-mark {
  background:
    linear-gradient(155deg, rgba(154,33,45,.95), rgba(61,12,18,.98));
  color: var(--gold-bright);
  border: 1px solid rgba(214,170,100,.55);
  box-shadow:
    0 0 0 4px rgba(214,170,100,.04),
    0 9px 25px rgba(0,0,0,.32);
  border-radius: 22px 22px 12px 12px;
}

.brand-mark::after {
  border-color: rgba(240,201,130,.36);
  border-radius: 17px 17px 8px 8px;
}

.brand-copy strong { color: var(--gold-bright); }
.brand-copy small { color: #ad9a89; }

.header-search {
  background: rgba(18,17,17,.94);
  border-color: rgba(214,170,100,.24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.header-search:focus-within {
  border-color: rgba(240,201,130,.72);
  box-shadow: 0 0 0 4px rgba(214,170,100,.09);
}
.header-search input { color: var(--text); }
.header-search input::placeholder { color: #8f837b; }
.header-search button { color: var(--gold-bright); }

.icon-button,
.library-nav-button {
  background: #111112;
  border-color: #49352b;
  color: var(--gold-bright);
}
.icon-button:hover,
.library-nav-button:hover {
  background: #191616;
  border-color: #8b6140;
}

.site-nav {
  border-top: 1px solid rgba(214,170,100,.07);
  background: linear-gradient(180deg, rgba(17,14,14,.77), rgba(7,8,9,.94));
}
.site-nav-inner {
  max-width: 1300px;
  margin: 0 auto;
  min-height: 42px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.site-nav a {
  position: relative;
  padding: 9px 16px 10px;
  border-radius: 10px 10px 0 0;
  color: #cdbfae;
  font-size: 13px;
  font-weight: 800;
}
.site-nav a:hover {
  color: var(--gold-bright);
  background: rgba(117,23,34,.14);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 1px;
  background: transparent;
}
.site-nav a:hover::after { background: var(--accent); }

/* General page */
.main-content {
  width: min(1280px, calc(100% - 42px));
  padding-top: 28px;
}
.breadcrumbs { color: #9e8e81; }
.breadcrumbs a:hover { color: var(--gold-bright); }

.page-loading,
.empty-state,
.error-state,
.search-panel {
  background: #101112;
  border-color: #3b2b24;
  color: var(--muted);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
}

.section-kicker { color: var(--gold); }
.p9-section-header h2,
.page-title h1 { color: #f4e7d7; }
.p9-section-header p,
.section-note,
.page-title p { color: var(--muted); }
.p9-section-header > a { color: var(--gold-bright); }

/* Home hero */
.p9-hero {
  min-height: 530px;
  grid-template-columns: 1.08fr .92fr;
  background:
    radial-gradient(circle at 82% 16%, rgba(165,46,54,.24), transparent 38%),
    linear-gradient(135deg,#160c0e 0%,#210d11 48%,#090a0b 100%);
  border: 1px solid rgba(214,170,100,.30);
  box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.p9-hero::before {
  opacity: .7;
  background:
    radial-gradient(circle at 78% 38%, rgba(183,50,42,.16), transparent 28%),
    repeating-linear-gradient(45deg, transparent 0 36px, rgba(214,170,100,.035) 36px 37px);
  mask-image: linear-gradient(90deg,#000 0%,rgba(0,0,0,.42) 62%,transparent 100%);
}

.p9-hero-content {
  padding: 68px 64px 58px;
}
.hero-eyebrow { color: var(--gold-bright); }
.hero-eyebrow span { background: var(--gold-bright); }
.p9-hero h1 {
  color: #f8ead9;
  text-shadow: 0 9px 34px rgba(0,0,0,.34);
}
.p9-hero h1 em { color: var(--gold-bright); }
.p9-hero p { color: #dacfc7; }

.p9-hero-search {
  background: rgba(7,8,9,.88);
  border: 1px solid rgba(214,170,100,.45);
  box-shadow:
    0 20px 45px rgba(0,0,0,.36),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.p9-hero-search input { color: #f7eadc; }
.p9-hero-search input::placeholder { color: #91837a; }
.p9-hero-search button {
  color: #fff3dd;
  background: linear-gradient(145deg,#8e1f2c,#561019);
  border: 1px solid rgba(240,201,130,.28);
}
.p9-hero-search button:hover { background: linear-gradient(145deg,#a82a38,#711620); }
.hero-footnote { color: #bcaea2; }
.hero-footnote a { color: var(--gold-bright); }

.p9-hero-art {
  min-height: 530px;
  background:
    linear-gradient(90deg, rgba(15,9,10,.12), rgba(8,8,9,.10) 55%, rgba(8,8,9,.68) 100%),
    linear-gradient(0deg, rgba(7,8,9,.34), transparent 45%),
    url("./visual/religious-hero.webp") center / cover no-repeat;
}
.p9-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24,12,14,.03), rgba(7,8,9,.25) 58%, rgba(7,8,9,.76)),
    radial-gradient(circle at 44% 33%, transparent, rgba(0,0,0,.22) 75%);
  pointer-events: none;
}
.p9-hero-art .hero-arch { display: none; }

/* Stats */
.p9-stat-strip {
  border-color: rgba(214,170,100,.26);
  background: linear-gradient(180deg,#121111,#0d0e0f);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.p9-stat-strip > div { border-left-color: rgba(214,170,100,.16); }
.p9-stat-strip strong { color: var(--gold-bright); }
.p9-stat-strip span { color: #a99b90; }

/* Reciter cards */
.p9-reciter-grid { gap: 16px; }
.p9-reciter-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(128,30,40,.12), transparent 42%),
    #101112;
  border-color: #3e2d26;
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}
.p9-reciter-card::before {
  content: "";
  position: absolute;
  inset: -55% 48% 20% -10%;
  border: 1px solid rgba(214,170,100,.11);
  border-radius: 50%;
  pointer-events: none;
}
.p9-reciter-card:hover {
  border-color: #8a6040;
  box-shadow: 0 18px 45px rgba(0,0,0,.31);
}
.p9-reciter-image {
  background: #180f11;
  border: 1px solid rgba(214,170,100,.22);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.p9-reciter-copy small { color: var(--gold); }
.p9-reciter-copy h3 { color: #f2e4d3; }
.p9-reciter-copy p { color: #a99a8e; }
.p9-card-arrow { color: var(--gold-bright); }

/* Subject cards */
.p9-subject-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(144,31,41,.11), transparent 35%),
    #101112;
  border-color: #3c2c25;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.p9-subject-card:hover { border-color: #775337; }
.subject-symbol {
  color: var(--gold-bright);
  background:
    linear-gradient(160deg,rgba(121,27,37,.86),rgba(47,14,18,.88));
  border: 1px solid rgba(214,170,100,.38);
  border-radius: 24px 24px 12px 12px;
}
.p9-subject-card h3 { color: #efe1d1; }
.p9-subject-card p { color: #a99b90; }

/* Strong page heroes */
.p9-reciter-hero,
.p9-release-hero,
.p9-recording-main,
.p9-metadata-panel,
.p10-library-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 10%, rgba(133,29,38,.16), transparent 34%),
    linear-gradient(135deg,#131112,#0b0c0d);
  border-color: rgba(214,170,100,.28);
  box-shadow: 0 22px 52px rgba(0,0,0,.28);
}
.p9-reciter-hero::after,
.p9-release-hero::after,
.p9-recording-main::after,
.p10-library-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 430px;
  left: -95px;
  bottom: -230px;
  border: 1px solid rgba(214,170,100,.12);
  border-radius: 180px 180px 0 0;
  box-shadow:
    0 0 0 24px rgba(214,170,100,.018),
    0 0 0 48px rgba(214,170,100,.012);
  pointer-events: none;
}
.p9-reciter-hero-image {
  border: 1px solid rgba(214,170,100,.42);
  box-shadow: 0 22px 45px rgba(0,0,0,.38);
}
.p9-reciter-hero-photo { filter: saturate(.92) contrast(1.04); }
.p9-reciter-hero-copy h1,
.p9-release-hero-copy h1,
.p9-recording-copy h1,
.p10-library-hero h1 { color: #f5e6d2; }
.p9-reciter-hero-copy p,
.p9-recording-copy > p,
.p10-library-hero p { color: #b9aaa0; }

/* Badges and buttons */
.badge {
  background: #181617;
  border-color: #49362c;
  color: #d8c8bb;
}
.badge.accent {
  color: var(--gold-bright);
  background: rgba(124,28,38,.24);
  border-color: rgba(214,170,100,.30);
}
.primary-button {
  color: #fff2df;
  background: linear-gradient(145deg,#9b2633,#65141e);
  border-color: #a44a45;
  box-shadow: 0 11px 28px rgba(104,18,29,.28);
}
.primary-button:hover:not(:disabled) {
  background: linear-gradient(145deg,#b02f3d,#781823);
}
.secondary-button {
  background: #111213;
  border-color: #574033;
  color: #dfcbb4;
}
.secondary-button:hover:not(:disabled) {
  background: #1a1717;
  border-color: #8b6241;
}

/* Release art */
.p9-release-card {
  background: #101112;
  border-color: #3a2b24;
  box-shadow: 0 14px 34px rgba(0,0,0,.19);
}
.p9-release-card:hover {
  border-color: #7d573b;
  box-shadow: 0 20px 46px rgba(0,0,0,.30);
}
.p9-release-card-copy small { color: var(--gold); }
.p9-release-card-copy h3 { color: #f0e2d2; }
.p9-release-card-copy p { color: #aa9b8f; }

.release-art {
  border-bottom: 1px solid rgba(214,170,100,.20);
  background:#57131d;
}
.release-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,201,130,.12), transparent 30%),
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(255,255,255,.025) 26px 27px);
}
.release-art-title {
  color: #fff0dd;
  text-shadow: 0 4px 22px rgba(0,0,0,.38);
}
.release-art-year {
  color: var(--gold-bright);
  border-color: rgba(214,170,100,.38);
  background: rgba(6,7,8,.28);
}
.cover-arch { background:linear-gradient(145deg,#761622,#25090d); }
.cover-lines { background:linear-gradient(145deg,#28312c,#0b1210); }
.cover-ring { background:linear-gradient(145deg,#6f4d24,#24170d); }
.cover-grid { background:linear-gradient(145deg,#411c2e,#150b11); }
.cover-manuscript { background:linear-gradient(145deg,#5b3c2e,#201611); }
.cover-disc { background:linear-gradient(145deg,#26313d,#10141a); }

/* Track lists */
.premium-track-list {
  background: #0f1011;
  border-color: #3b2c25;
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
}
.premium-track-row {
  border-bottom-color: #2c2420;
}
.premium-track-row:hover { background: #171313; }
.track-round-play {
  background: #231719;
  color: var(--gold-bright);
  border: 1px solid rgba(214,170,100,.28);
}
.track-round-play:hover:not(:disabled) {
  background: var(--accent);
  color: #fff4e2;
}
.track-title a { color: #f0e2d2; }
.track-title small { color: #a99b90; }
.track-duration { color: #bdaea1; }
.track-favorite-button { color: #a99484; }
.track-favorite-button:hover,
.track-favorite-button.active {
  color: #eac780;
  background: rgba(121,27,37,.23);
}

/* Metadata */
.p9-metadata-panel { background: #0f1011; }
.meta-item { border-bottom-color: #2d2621; }
.meta-item span { color: #a9988b; }
.meta-item strong { color: #f1e2d2; }
.lat-id { color: var(--gold-bright) !important; }

/* Simple/search/subject pages get a devotional banner */
.p9-simple-title {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  padding: 32px 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(214,170,100,.25);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(8,8,9,.95), rgba(12,10,11,.79) 58%, rgba(8,8,9,.36)),
    url("./visual/religious-hero.webp") left 38% / cover no-repeat;
  box-shadow: 0 22px 52px rgba(0,0,0,.28);
}
.p9-simple-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 45%, rgba(7,8,9,.35) 70%, rgba(7,8,9,.82));
  pointer-events: none;
}
.p9-simple-title > div { position: relative; z-index: 1; }
.p9-simple-title h1 { color: #f4e5d1; font-size: clamp(34px,5vw,54px); }
.p9-simple-title p { color: #c2b4aa; }

.p9-search-panel {
  background: #0f1011;
  border-color: #3c2c25;
}
.search-panel input {
  background: #090a0b;
  color: #f4e6d6;
  border-color: #49362c;
}
.search-panel input::placeholder { color: #8d8178; }

/* User library */
.p10-library-stats > div,
.p10-library-card {
  background: #111112;
  border-color: #3b2b24;
}
.p10-library-stats strong { color: var(--gold-bright); }
.p10-library-stats span,
.p10-library-card-copy small,
.p10-library-card-copy p { color: #a99b90; }
.p10-library-card-copy h3 { color: #f0e2d2; }
.p10-library-mark {
  color: var(--gold-bright);
  border: 1px solid rgba(214,170,100,.38);
  background: linear-gradient(145deg,#7c1d29,#300b10);
}
.p10-library-open {
  background: #111213;
  border-color: #49362c;
  color: #d8c5b1;
}
.p10-library-remove {
  background: rgba(118,25,34,.15);
  border-color: rgba(157,63,66,.42);
  color: #e2a7a7;
}
.p10-library-progress { background: #2b2420; }
.p10-library-progress::-webkit-progress-bar { background: #2b2420; }
.p10-library-progress::-webkit-progress-value {
  background: linear-gradient(90deg,#9e2430,#d4a760);
}
.p10-library-progress::-moz-progress-bar {
  background: linear-gradient(90deg,#9e2430,#d4a760);
}
.p10-local-note {
  background: #14110f;
  border-color: #5e4934;
}
.p10-local-note strong { color: var(--gold-bright); }
.p10-local-note p { color: #b0a197; }

/* Player */
.player-shell {
  background: rgba(8,9,10,.97);
  border-top-color: #4b3528;
  box-shadow: 0 -18px 50px rgba(0,0,0,.48);
}
.player-title-button strong { color: #f3e4d3; }
.player-title-button span { color: #aa9b90; }
.player-control {
  color: #d8c6b0;
  background: #121314;
  border-color: #4a362b;
}
.player-small-control {
  color: var(--gold-bright);
  background: #171313;
}
.player-play {
  color: #fff2df;
  background: radial-gradient(circle at 35% 30%,#bb3b45,#791925 58%,#4b0c13);
  border: 1px solid rgba(240,201,130,.55);
  box-shadow:
    0 0 0 5px rgba(214,170,100,.05),
    0 10px 30px rgba(111,19,28,.45);
}
.player-waveform { background: #0b0c0d; }
.queue-panel {
  background: #0c0d0e;
  border-color: #3d2c25;
}
.queue-panel-header { border-bottom-color: #302620; }
.queue-item { border-bottom-color: #2d2520; }
.queue-item.current { background: rgba(121,27,37,.22); }

/* Footer */
.site-footer {
  width: min(1280px, calc(100% - 42px));
  margin: 34px auto 0;
  border-top: 1px solid rgba(214,170,100,.20);
  padding: 28px 0 140px;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) auto;
  gap: 20px 34px;
  align-items: center;
  padding: 24px 26px;
  border: 1px solid rgba(214,170,100,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 20%, rgba(130,28,38,.14), transparent 32%),
    #0d0e0f;
}
.site-footer-brand {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 14px;
  align-items: center;
}
.footer-arch-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-size: 25px;
  font-weight: 800;
}
.site-footer-brand strong { color: var(--gold-bright); font-size: 20px; }
.site-footer-brand p { margin: 3px 0 0; color: #a99a8e; max-width: 650px; }
.footer-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-links a {
  color: #cbb9a6;
  padding: 7px 10px;
  border-radius: 9px;
}
.footer-links a:hover {
  color: var(--gold-bright);
  background: rgba(121,27,37,.17);
}
.site-footer-inner > small {
  grid-column: 1 / -1;
  color: #7f746c;
  border-top: 1px solid #2b2420;
  padding-top: 13px;
}

/* Skeletons */
.progressive-card-skeleton,
.progressive-subject-skeleton {
  border-color: #342821;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018), rgba(214,170,100,.05), rgba(255,255,255,.018)),
    #111213;
}

/* Accessibility focus remains obvious on dark UI. */
:focus-visible {
  outline: 3px solid rgba(240,201,130,.82) !important;
  outline-offset: 3px !important;
}

/* Mobile religious layout */
@media (max-width: 760px) {
  .main-content { width: min(100% - 22px,720px); }
  .site-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav-inner::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }

  .p9-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .p9-hero-art {
    order: -1;
    min-height: 300px;
    background:
      linear-gradient(0deg, rgba(7,8,9,.58), transparent 48%),
      url("./visual/religious-hero-mobile.webp") center 39% / cover no-repeat;
  }
  .p9-hero-content { padding: 34px 28px 34px; }
  .p9-simple-title {
    min-height: 155px;
    background:
      linear-gradient(90deg, rgba(8,8,9,.94), rgba(8,8,9,.62)),
      url("./visual/religious-hero-mobile.webp") center 35% / cover no-repeat;
  }
}

@media (max-width: 560px) {
  .main-content { width: min(100% - 18px,520px); }
  .p9-hero { border-radius: 22px; }
  .p9-hero-art { min-height: 235px; }
  .p9-hero-content { padding: 26px 18px 28px; }
  .p9-hero h1 { font-size: 40px; }
  .p9-stat-strip { border-radius: 18px; }
  .p9-reciter-card { border-radius: 18px; }
  .p9-simple-title { padding: 24px 20px; border-radius: 22px; }
  .site-footer {
    width: min(100% - 18px,520px);
    padding-bottom: 150px;
  }
  .site-footer-inner {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .footer-links { justify-content: flex-start; }
}


/* =========================================================
   PHASE 10V1-R1 — VISUAL STABILITY / ACCESSIBILITY FIX
   Preserve the Phase 10V1 religious design while removing
   loading-to-content layout shifts.
   ========================================================= */

/* Keep the footer below the initial viewport while the SPA route hydrates.
   Previously the new footer was visible beneath the small "loading" card and
   then moved hundreds of pixels when the real route was rendered, producing
   very large Lighthouse CLS values on every page. */
.main-content {
  min-height: calc(100vh - 106px);
  min-height: calc(100svh - 106px);
}

/* Route loading shells also reserve a realistic first-view height. */
.page-loading {
  min-height: clamp(520px, calc(100vh - 190px), 760px);
  min-height: clamp(520px, calc(100svh - 190px), 760px);
  display: grid;
  place-items: center;
}

/* Footer rendering remains visually identical but is isolated below the fold. */
.site-footer {
  contain: layout paint style;
}

/* The old light-theme .badge.unavailable rule had higher specificity than
   the Phase 10V1 generic .badge override. Because --danger became lighter
   in the dark theme, the resulting red-on-pink contrast failed Lighthouse.
   Give unavailable badges an explicit dark-theme treatment. */
.badge.unavailable {
  background: rgba(154, 43, 55, .24);
  color: #ffd6d8;
  border: 1px solid rgba(222, 103, 112, .40);
}

/* Explicitly keep track metadata comfortably above AA contrast. */
.track-index,
.track-duration,
.track-title small {
  color: #c7b8ab;
}

@media (max-width: 760px) {
  .main-content {
    min-height: calc(100vh - 102px);
    min-height: calc(100svh - 102px);
  }

  .page-loading {
    min-height: clamp(500px, calc(100vh - 170px), 720px);
    min-height: clamp(500px, calc(100svh - 170px), 720px);
  }
}


/* Phase 10V1-R2: subjects page uses H2 after the page H1 for sequential
   heading order while preserving the existing card appearance. */
.p9-subject-card h2 {
  margin: 0;
  font-size: 15px;
  color: #efe1d1;
}


/* Phase 10V1-R2 early preboot shells. They intentionally reuse the final
   component geometry so the final SPA render replaces them without a shift. */
.r2-home-preboot,
.r2-reciter-preboot {
  animation: none !important;
}

.r2-preboot-search {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #94867b;
  pointer-events: none;
}
.r2-preboot-search b {
  padding: 8px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg,#7d1c29,#52121b);
  color: #f3d8ad;
  font-size: 13px;
}


/* Phase 10V1-R3 — Subjects early-render placeholders.
   Same card grid/height as final content to preserve the excellent R2 CLS. */
.r3-subjects-preboot { width: 100%; }
.r3-subject-skeleton { min-height: 78px; pointer-events: none; }
.r3-subject-skeleton > div { min-width: 0; width: 100%; }
.r3-subject-skeleton > div > span,
.r3-subject-skeleton > div > small {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(214,170,100,.12), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: r3SubjectPulse 1.6s ease-in-out infinite;
}
.r3-subject-skeleton > div > span { width: 58%; height: 15px; }
.r3-subject-skeleton > div > small { width: 38%; height: 9px; margin-top: 7px; }
@keyframes r3SubjectPulse {
  0%,100% { background-position: 0 50%; opacity: .65; }
  50% { background-position: 100% 50%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .r3-subject-skeleton > div > span,
  .r3-subject-skeleton > div > small { animation: none; }
}


/* =========================================================
   PHASE 10V1-R3.1 — MOBILE SEARCH ICON
   Desktop keeps text. Mobile uses a semantic SVG icon only.
   ========================================================= */
.header-search-submit-label {
  display: inline;
}

.header-search-submit-icon {
  display: none;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 650px) {
  .header-search button {
    width: 42px;
    min-width: 42px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: inherit;
    color: var(--gold-bright);
    overflow: visible;
  }

  .header-search button::after {
    content: none !important;
    display: none !important;
  }

  .header-search-submit-label {
    display: none;
  }

  .header-search-submit-icon {
    display: block;
  }
}


/* ============================================================
   PHASE 10V2 — PREMIUM COLLECTIONS / VISUAL DEPTH
   Visual-only layer. No canonical metadata is altered.
   ============================================================ */

/* Release cover system */
.v2-cover {
  isolation: isolate;
  min-height: 180px;
  transform: translateZ(0);
  background:
    radial-gradient(circle at 72% 20%, rgba(255,220,153,.18), transparent 27%),
    linear-gradient(155deg,#53121a,#17090c 72%);
}
.v2-cover .release-art-copy {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(92%, 420px);
}
.v2-cover .release-art-atmosphere,
.v2-cover .release-art-gate,
.v2-cover .release-art-orbit {
  position: absolute;
  pointer-events: none;
}
.v2-cover .release-art-atmosphere {
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(100deg,rgba(5,6,7,.78),rgba(5,6,7,.18) 58%,rgba(5,6,7,.58)),
    radial-gradient(circle at 22% 75%,rgba(178,42,53,.17),transparent 32%);
}
.v2-cover .release-art-gate {
  z-index: 1;
  width: 45%;
  height: 86%;
  left: 7%;
  bottom: -17%;
  border: 1px solid rgba(232,194,126,.26);
  border-radius: 160px 160px 0 0;
  box-shadow:
    0 0 0 16px rgba(232,194,126,.025),
    0 0 0 32px rgba(232,194,126,.015);
  transform: rotate(-4deg);
}
.v2-cover .release-art-orbit {
  z-index: 2;
  border: 1px solid rgba(244,213,155,.16);
  border-radius: 50%;
}
.v2-cover .release-art-orbit-a {
  width: 190px;
  height: 190px;
  right: -64px;
  top: -88px;
}
.v2-cover .release-art-orbit-b {
  width: 104px;
  height: 104px;
  right: -20px;
  top: -42px;
}
.release-art-seal {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 15px;
  width: 34px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 18px 18px 11px 11px;
  color: #f3d8aa;
  font-family: serif;
  font-size: 16px;
  border: 1px solid rgba(232,194,126,.38);
  background: rgba(9,8,8,.35);
  box-shadow: inset 0 0 20px rgba(232,194,126,.05);
}
.v2-cover .release-art-title {
  max-width: 13ch;
  font-size: clamp(20px,2.1vw,30px);
  line-height: 1.25;
}
.release-card-art.v2-cover .release-art-title {
  font-size: clamp(17px,1.5vw,23px);
}
.v2-cover .release-art-subtitle {
  color: #e0c6a7;
  opacity: .86;
}
.v2-cover .release-art-year {
  margin-bottom: 10px;
  backdrop-filter: blur(6px);
}

/* Visual-only occasion treatments inferred from words already in title. */
.occasion-muharram {
  background: linear-gradient(145deg,#731724,#18080c 75%);
}
.occasion-ashura {
  background:
    radial-gradient(circle at 76% 18%,rgba(224,58,52,.20),transparent 30%),
    linear-gradient(145deg,#4b0c12,#09090a 75%);
}
.occasion-arbaeen {
  background:
    radial-gradient(circle at 70% 20%,rgba(211,166,84,.17),transparent 27%),
    linear-gradient(145deg,#523617,#0d0d0c 76%);
}
.occasion-safar {
  background: linear-gradient(145deg,#32223c,#0b0b11 76%);
}
.occasion-ramadan {
  background:
    radial-gradient(circle at 76% 18%,rgba(98,172,134,.16),transparent 28%),
    linear-gradient(145deg,#17382d,#07110e 76%);
}
.occasion-fatimiyya {
  background:
    radial-gradient(circle at 70% 20%,rgba(179,147,202,.15),transparent 28%),
    linear-gradient(145deg,#34213e,#0d0911 76%);
}
.occasion-mawlid {
  background:
    radial-gradient(circle at 74% 16%,rgba(220,188,116,.19),transparent 28%),
    linear-gradient(145deg,#60471e,#181008 76%);
}
.occasion-martyrdom {
  background:
    radial-gradient(circle at 72% 18%,rgba(153,31,42,.21),transparent 28%),
    linear-gradient(145deg,#3b1017,#09090a 76%);
}
.occasion-archive {
  background:
    radial-gradient(circle at 73% 18%,rgba(179,127,77,.14),transparent 28%),
    linear-gradient(145deg,#3f2720,#111011 76%);
}

.cover-variant-2 .release-art-gate { left: auto; right: 7%; transform: rotate(4deg); }
.cover-variant-2 .release-art-copy { align-items: flex-end; text-align: right; margin-left: auto; }
.cover-variant-3 .release-art-gate { width: 38%; height: 105%; left: 31%; bottom: -42%; }
.cover-variant-4 .release-art-gate { opacity: .55; transform: scale(.8) rotate(-8deg); }

/* Premium release cards */
.p9-release-card {
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}
.p9-release-card .release-art {
  transition: filter .28s ease, transform .32s ease;
  transform-origin: 50% 80%;
}
.p9-release-card:hover .release-art {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.012);
}
.p9-release-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 35%,rgba(255,238,199,.045) 50%,transparent 65%);
  transform: translateX(120%);
  transition: transform .6s ease;
}
.p9-release-card:hover::after { transform: translateX(-120%); }

/* Release hero */
.v2-release-hero {
  min-height: 365px;
}
.v2-release-hero-art {
  position: relative;
  z-index: 2;
}
.v2-release-hero .release-hero-art.v2-cover {
  min-height: 285px;
  border: 1px solid rgba(237,197,126,.32);
  box-shadow: 0 22px 55px rgba(0,0,0,.38);
  border-radius: 25px;
}
.v2-release-hero-copy { position: relative; z-index: 3; }
.v2-archive-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d6ae72;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.v2-archive-eyebrow span { font-size: 8px; color: #9d2a35; }
.v2-hero-ornament {
  position: absolute;
  left: -48px;
  bottom: -80px;
  width: 300px;
  height: 300px;
  pointer-events: none;
  opacity: .55;
}
.v2-hero-ornament span,
.v2-hero-ornament i,
.v2-hero-ornament b {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(226,186,113,.12);
  border-radius: 50%;
}
.v2-hero-ornament i { inset: 34px; }
.v2-hero-ornament b { inset: 68px; }

/* Recording premium stage */
.v2-recording-art-stage {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%,rgba(133,30,39,.18),transparent 42%),
    linear-gradient(145deg,#0a0b0c,#151112);
  border: 1px solid rgba(214,170,100,.18);
}
.v2-recording-halo {
  position: absolute;
  width: min(78%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(230,190,119,.14);
  box-shadow:
    0 0 0 26px rgba(230,190,119,.02),
    0 0 0 52px rgba(230,190,119,.012);
}
.v2-recording-cover {
  width: min(100%, 330px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(232,195,125,.34);
  border-radius: 24px;
  box-shadow: 0 28px 65px rgba(0,0,0,.47);
}
.v2-art-caption {
  position: absolute;
  bottom: 11px;
  left: 16px;
  color: #856f5d;
  font-size: 8px;
  letter-spacing: .06em;
}
.v2-recording-copy h1 {
  max-width: 17ch;
  text-wrap: balance;
}

/* Topics / subject banners */
.v2-topic-banner,
.v2-subject-detail-banner,
.v2-search-banner {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(214,170,100,.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 20%,rgba(124,28,38,.20),transparent 30%),
    linear-gradient(135deg,#141112,#0b0c0d);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.v2-topic-banner::after,
.v2-subject-detail-banner::after,
.v2-search-banner::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 360px;
  left: -92px;
  bottom: -238px;
  border: 1px solid rgba(219,179,105,.11);
  border-radius: 150px 150px 0 0;
  box-shadow: 0 0 0 22px rgba(219,179,105,.018);
}
.v2-topic-banner-motif,
.v2-subject-mark,
.v2-search-emblem {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 72px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 38px 38px 18px 18px;
  border: 1px solid rgba(229,190,117,.35);
  color: #f0cf98;
  background: linear-gradient(155deg,rgba(129,29,39,.82),rgba(43,12,16,.88));
  font-size: 25px;
  box-shadow: 0 13px 32px rgba(0,0,0,.27);
}
.v2-subject-lines {
  margin-inline-start: auto;
  display: grid;
  gap: 9px;
  width: min(27vw,260px);
  opacity: .45;
}
.v2-subject-lines i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(225,186,113,.7),transparent);
}
.v2-subject-lines i:nth-child(2) { transform: scaleX(.74); }
.v2-subject-lines i:nth-child(3) { transform: scaleX(.48); }
.v2-search-emblem {
  font-family: serif;
  font-size: 31px;
}

/* Micro-interactions */
.primary-button,
.secondary-button,
.track-round-play,
.p9-reciter-card,
.p9-subject-card,
.p10-library-card {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}
.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.track-round-play:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
}
.p9-subject-card:hover,
.p10-library-card:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .v2-release-hero { min-height: auto; }
  .v2-release-hero .release-hero-art.v2-cover { min-height: 245px; }
  .v2-recording-art-stage { min-height: 275px; padding: 18px; }
  .v2-recording-cover { width: min(100%,280px); }
  .v2-topic-banner,
  .v2-subject-detail-banner,
  .v2-search-banner {
    min-height: 132px;
    padding: 19px 18px;
    gap: 14px;
    border-radius: 22px;
  }
  .v2-topic-banner-motif,
  .v2-subject-mark,
  .v2-search-emblem {
    width: 52px;
    height: 62px;
    font-size: 19px;
  }
  .v2-subject-lines { display: none; }
  .v2-cover .release-art-title { max-width: 12ch; }
}

@media (prefers-reduced-motion: reduce) {
  .p9-release-card,
  .p9-release-card .release-art,
  .p9-release-card::after,
  .primary-button,
  .secondary-button,
  .track-round-play,
  .p9-reciter-card,
  .p9-subject-card,
  .p10-library-card {
    transition: none !important;
  }
  .p9-release-card:hover .release-art,
  .p9-subject-card:hover,
  .p10-library-card:hover {
    transform: none !important;
  }
}


/* ============================================================
   PHASE 10V2.1 — RELEASE COVER CLEANUP
   The cover artwork intentionally contains NO duplicate year badge
   and NO unexplained decorative "ع" seal. Metadata remains below
   the card and in the Release hero badges.
   ============================================================ */
.release-art-seal,
.v2-cover .release-art-year {
  display: none !important;
}


/* ============================================================
   PHASE 10V3A — RECITER HERO ONLY
   One controlled visual experiment on top of stable Phase 10V2.
   No other page/component is intentionally restyled.
   ============================================================ */

/* Clean premium container: deeper than V2, but not ornament-heavy. */
.p9-reciter-hero {
  grid-template-columns: 282px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  min-height: 340px;
  padding: clamp(26px, 3.4vw, 40px);
  background:
    radial-gradient(circle at 17% 48%, rgba(133,29,38,.23), transparent 31%),
    radial-gradient(circle at 88% 4%, rgba(214,170,100,.055), transparent 26%),
    linear-gradient(128deg, #171314 0%, #0b0c0d 62%, #100d0e 100%);
  border-color: rgba(214,170,100,.30);
  box-shadow:
    inset 0 1px 0 rgba(245,215,158,.055),
    0 24px 56px rgba(0,0,0,.26);
}

/* Replace the older large decorative arch with one very quiet visual curve. */
.p9-reciter-hero::after {
  width: 310px;
  height: 390px;
  left: auto;
  right: -132px;
  bottom: -238px;
  border-color: rgba(214,170,100,.085);
  box-shadow:
    0 0 0 22px rgba(214,170,100,.010),
    0 0 0 44px rgba(214,170,100,.006);
  opacity: .9;
}

/* Portrait is the main visual anchor. */
.p9-reciter-hero-image {
  width: 282px;
  aspect-ratio: 1;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 28px;
  background: transparent;
  box-shadow: none;
}

.p9-reciter-hero-image::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -17px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 48%, rgba(137,31,43,.31), rgba(63,19,25,.13) 48%, transparent 72%);
  filter: blur(11px);
}

.p9-reciter-hero-image::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 29px;
  border: 1px solid rgba(226,185,109,.34);
  box-shadow:
    0 20px 46px rgba(0,0,0,.39),
    0 0 0 7px rgba(226,185,109,.025);
  pointer-events: none;
}

.p9-reciter-hero-photo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 28px;
  object-fit: cover;
  filter: saturate(.96) contrast(1.035);
}

/* Give the copy more hierarchy without adding more content. */
.p9-reciter-hero-copy {
  max-width: 770px;
}

.p9-reciter-hero-copy .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  color: #d4aa6b;
  letter-spacing: .025em;
}

.p9-reciter-hero-copy .section-kicker::before {
  content: "";
  width: 25px;
  height: 1px;
  background: linear-gradient(90deg, rgba(214,170,100,.22), rgba(231,194,125,.86));
}

.p9-reciter-hero-copy h1 {
  max-width: 14ch;
  margin: 7px 0 10px;
  font-size: clamp(38px, 5.1vw, 58px);
  line-height: 1.12;
  text-wrap: balance;
  color: #f5e7d5;
  text-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.p9-reciter-hero-copy p {
  max-width: 620px;
  margin-bottom: 21px;
  color: #bcaea3;
  font-size: 14px;
  line-height: 1.9;
}

/* Stats become quieter and more cohesive with the hero. */
.p9-reciter-hero .p9-badge-row {
  gap: 9px;
}

.p9-reciter-hero .badge {
  padding: 8px 11px;
  background: rgba(25,22,23,.78);
  border-color: rgba(214,170,100,.20);
  color: #d9c9bb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.p9-reciter-hero .badge.accent {
  background: rgba(112,25,35,.27);
  border-color: rgba(214,170,100,.31);
  color: #efcf99;
}

/* Desktop-only gentle lift, scoped to hero portrait. */
@media (hover: hover) and (pointer: fine) {
  .p9-reciter-hero-image {
    transition: transform .22s ease;
  }
  .p9-reciter-hero:hover .p9-reciter-hero-image {
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .p9-reciter-hero {
    grid-template-columns: 220px minmax(0,1fr);
    gap: 25px;
    min-height: 290px;
    padding: 26px;
  }

  .p9-reciter-hero-image {
    width: 220px;
  }

  .p9-reciter-hero-copy h1 {
    font-size: clamp(34px, 5.8vw, 47px);
  }
}

@media (max-width: 650px) {
  .p9-reciter-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 23px;
    padding: 23px 18px 26px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 19%, rgba(133,29,38,.22), transparent 29%),
      linear-gradient(180deg,#171314,#0b0c0d 72%);
  }

  .p9-reciter-hero::after {
    right: -180px;
    bottom: -270px;
    opacity: .68;
  }

  .p9-reciter-hero-image {
    width: min(68vw, 238px);
    margin: 2px auto 0;
  }

  .p9-reciter-hero-copy {
    margin: auto;
  }

  .p9-reciter-hero-copy .section-kicker {
    justify-content: center;
  }

  .p9-reciter-hero-copy .section-kicker::before {
    display: none;
  }

  .p9-reciter-hero-copy h1 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(34px, 10vw, 45px);
  }

  .p9-reciter-hero-copy p {
    max-width: 36rem;
    margin-inline: auto;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.8;
  }

  .p9-reciter-hero .p9-badge-row {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p9-reciter-hero-image {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   PHASE 10V3B — RELEASE HERO ONLY
   Built on accepted V2.1 + V3A.
   One controlled experiment: the top Release-page hero.
   ============================================================ */

/* Overall hero: calm museum/archive presentation. */
.p9-release-hero.v2-release-hero {
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 50px);
  align-items: center;
  min-height: 360px;
  padding: clamp(28px, 3.5vw, 42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 46%, rgba(123,29,39,.18), transparent 31%),
    linear-gradient(128deg, #171314 0%, #0c0d0e 63%, #100d0e 100%);
  border-color: rgba(214,170,100,.28);
  box-shadow:
    inset 0 1px 0 rgba(245,215,158,.05),
    0 24px 58px rgba(0,0,0,.25);
}

/* V2's large orbit ornament is intentionally removed here.
   We want to judge layout/hierarchy, not decoration. */
.p9-release-hero.v2-release-hero > .v2-hero-ornament {
  display: none;
}

/* Artwork gets more room and a cleaner presentation. */
.p9-release-hero .v2-release-hero-art {
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
}

.p9-release-hero .release-hero-art.v2-cover {
  min-height: 300px;
  aspect-ratio: 1 / 1;
  border-radius: 27px;
  border-color: rgba(228,188,114,.34);
  box-shadow:
    0 28px 62px rgba(0,0,0,.40),
    0 0 0 7px rgba(228,188,114,.018);
}

/* Keep the artwork decorative geometry, but lower its visual competition. */
.p9-release-hero .release-hero-art.v2-cover .release-art-gate,
.p9-release-hero .release-hero-art.v2-cover .release-art-orbit {
  opacity: .52;
}

.p9-release-hero .release-hero-art.v2-cover .release-art-title {
  max-width: 12ch;
  font-size: clamp(22px, 2.35vw, 31px);
  line-height: 1.25;
}

.p9-release-hero .release-hero-art.v2-cover .release-art-subtitle {
  opacity: .75;
}

/* Copy hierarchy */
.p9-release-hero .v2-release-hero-copy {
  max-width: 760px;
  padding-inline: 2px;
}

.p9-release-hero .v2-archive-eyebrow {
  margin-bottom: 5px;
  color: #caa56f;
  opacity: .88;
}

.p9-release-hero .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d2aa6e;
}

.p9-release-hero .section-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,170,100,.18), rgba(231,194,125,.82));
}

.p9-release-hero-copy h1 {
  max-width: 15ch;
  margin: 8px 0 8px;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.14;
  color: #f4e6d4;
  text-wrap: balance;
  text-shadow: 0 8px 22px rgba(0,0,0,.17);
}

.p9-release-hero .p9-reciter-text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 2px;
  color: #d7b176;
  font-size: 14px;
  text-decoration: none;
}

.p9-release-hero .p9-reciter-text-link:hover {
  color: #f0d39d;
}

/* Metadata is present, but doesn't compete with title. */
.p9-release-hero-copy .p9-badge-row {
  gap: 8px;
  margin-top: 20px;
}

.p9-release-hero-copy .badge {
  padding: 8px 11px;
  background: rgba(25,22,23,.78);
  border-color: rgba(214,170,100,.19);
  color: #d5c5b8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.p9-release-hero-copy .badge.accent {
  color: #eccb94;
  background: rgba(110,24,34,.27);
  border-color: rgba(214,170,100,.30);
}

.p9-release-hero .p9-actions {
  margin-top: 22px;
  gap: 10px;
}

.p9-release-hero .primary-button,
.p9-release-hero .secondary-button {
  min-height: 42px;
  padding-inline: 17px;
  border-radius: 13px;
}

/* Medium screens */
@media (max-width: 900px) {
  .p9-release-hero.v2-release-hero {
    grid-template-columns: 250px minmax(0,1fr);
    gap: 27px;
    min-height: 315px;
    padding: 27px;
  }

  .p9-release-hero .v2-release-hero-art {
    max-width: 250px;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    min-height: 250px;
  }

  .p9-release-hero-copy h1 {
    font-size: clamp(34px, 5.8vw, 48px);
  }
}

/* Mobile: artwork first, then centered metadata/actions. */
@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 23px 18px 26px;
    text-align: center;
    background:
      radial-gradient(circle at 50% 17%, rgba(123,29,39,.18), transparent 29%),
      linear-gradient(180deg, #171314, #0c0d0e 75%);
  }

  .p9-release-hero .v2-release-hero-art {
    width: min(75vw, 280px);
    max-width: none;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    min-height: 0;
    aspect-ratio: 1;
  }

  .p9-release-hero .v2-release-hero-copy {
    margin-inline: auto;
  }

  .p9-release-hero .section-kicker {
    justify-content: center;
  }

  .p9-release-hero .section-kicker::before {
    display: none;
  }

  .p9-release-hero-copy h1 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(34px, 9.5vw, 44px);
  }

  .p9-release-hero .p9-reciter-text-link {
    margin-inline: auto;
  }

  .p9-release-hero-copy .p9-badge-row,
  .p9-release-hero .p9-actions {
    justify-content: center;
  }

  .p9-release-hero .primary-button,
  .p9-release-hero .secondary-button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p9-release-hero .p9-reciter-text-link {
    transition: none !important;
  }
}


/* ============================================================
   PHASE 10V3B-R1 — COMPACT RELEASE HERO SPACING
   ADJUST only: closes the unnecessary visual gap between
   release artwork and release information.
   ============================================================ */

.p9-release-hero.v2-release-hero {
  grid-template-columns: minmax(280px, 315px) minmax(0, 1fr);
  gap: clamp(16px, 1.7vw, 26px);
}

.p9-release-hero .v2-release-hero-art {
  max-width: 315px;
  margin-inline: 0;
  justify-self: stretch;
}

.p9-release-hero .v2-release-hero-copy {
  max-width: 720px;
}

@media (max-width: 900px) {
  .p9-release-hero.v2-release-hero {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
  }

  .p9-release-hero .v2-release-hero-art {
    max-width: 240px;
  }
}

@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .p9-release-hero .v2-release-hero-art {
    width: min(72vw, 272px);
    max-width: none;
    margin-inline: auto;
    justify-self: center;
  }
}


/* ============================================================
   PHASE 10V3B-R2 — RELEASE HERO SPACING + RESPONSIVE TYPOGRAPHY
   Only the Release-page Hero is adjusted.
   ============================================================ */

/* DESKTOP >= 901px
   Flex removes the large perceived empty grid column.
   In RTL the first child (artwork) sits at the right, followed
   immediately by the copy block. */
@media (min-width: 901px) {
  .p9-release-hero.v2-release-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 330px;
    padding: 30px 32px;
  }

  .p9-release-hero .v2-release-hero-art {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    margin: 0;
    justify-self: auto;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    width: 300px;
    min-height: 300px;
    aspect-ratio: 1;
  }

  .p9-release-hero .v2-release-hero-copy {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-inline: 0;
  }

  /* Desktop title: prominent without dominating the whole hero. */
  .p9-release-hero-copy h1 {
    max-width: 18ch;
    margin: 7px 0 7px;
    font-size: clamp(34px, 2.2vw, 42px);
    line-height: 1.18;
  }

  .p9-release-hero .release-hero-art.v2-cover .release-art-title {
    max-width: 13ch;
    font-size: clamp(21px, 1.35vw, 25px);
    line-height: 1.30;
  }

  .p9-release-hero .v2-archive-eyebrow {
    font-size: 10px;
  }

  .p9-release-hero .section-kicker {
    font-size: 11px;
  }

  .p9-release-hero .p9-reciter-text-link {
    font-size: 13px;
  }

  .p9-release-hero-copy .badge {
    font-size: 12px;
    padding: 7px 10px;
  }

  .p9-release-hero .primary-button,
  .p9-release-hero .secondary-button {
    min-height: 40px;
    padding-inline: 15px;
    font-size: 14px;
  }
}

/* TABLET 651–900px */
@media (min-width: 651px) and (max-width: 900px) {
  .p9-release-hero.v2-release-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 285px;
    padding: 24px;
  }

  .p9-release-hero .v2-release-hero-art {
    flex: 0 0 230px;
    width: 230px;
    max-width: 230px;
    margin: 0;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    width: 230px;
    min-height: 230px;
    aspect-ratio: 1;
  }

  .p9-release-hero .v2-release-hero-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .p9-release-hero-copy h1 {
    max-width: 17ch;
    font-size: clamp(30px, 4.1vw, 36px);
    line-height: 1.20;
  }

  .p9-release-hero .release-hero-art.v2-cover .release-art-title {
    font-size: 21px;
  }

  .p9-release-hero .v2-archive-eyebrow { font-size: 10px; }
  .p9-release-hero .section-kicker { font-size: 11px; }
  .p9-release-hero .p9-reciter-text-link { font-size: 13px; }
  .p9-release-hero-copy .badge { font-size: 11px; }
}

/* MOBILE <= 650px
   Smaller hierarchy chosen specifically for a 390px phone. */
@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    min-height: auto;
    padding: 19px 16px 21px;
    text-align: center;
  }

  .p9-release-hero .v2-release-hero-art {
    flex: none;
    width: min(64vw, 236px);
    max-width: none;
    margin-inline: auto;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 23px;
  }

  .p9-release-hero .v2-release-hero-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Main release title: 27–30px at common phone widths. */
  .p9-release-hero-copy h1 {
    max-width: 20ch;
    margin: 6px auto 6px;
    font-size: clamp(27px, 7.2vw, 30px);
    line-height: 1.23;
  }

  /* Title printed inside the decorative cover. */
  .p9-release-hero .release-hero-art.v2-cover .release-art-title {
    max-width: 13ch;
    font-size: clamp(18px, 5.2vw, 21px);
    line-height: 1.30;
  }

  .p9-release-hero .v2-archive-eyebrow {
    justify-content: center;
    margin-bottom: 3px;
    font-size: 9px;
  }

  .p9-release-hero .section-kicker {
    justify-content: center;
    font-size: 10px;
  }

  .p9-release-hero .p9-reciter-text-link {
    margin-inline: auto;
    font-size: 12px;
  }

  .p9-release-hero-copy .p9-badge-row {
    gap: 6px;
    margin-top: 14px;
    justify-content: center;
  }

  .p9-release-hero-copy .badge {
    padding: 6px 8px;
    font-size: 10px;
  }

  .p9-release-hero .p9-actions {
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
  }

  .p9-release-hero .primary-button,
  .p9-release-hero .secondary-button {
    min-height: 40px;
    padding-inline: 13px;
    border-radius: 11px;
    font-size: 13px;
  }
}


/* ============================================================
   PHASE 10V3C — RECORDING HERO ONLY
   Accepted baseline: V2.1 + V3A + V3B-R2.
   This experiment only adjusts the main Recording-page card.
   ============================================================ */

/* Desktop >= 901px */
@media (min-width: 901px) {
  .p9-recording-main.v2-recording-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    min-height: 330px;
    padding: 26px 28px;
  }

  .p9-recording-main .v2-recording-art-stage {
    flex: 0 0 250px;
    width: 250px;
    min-height: 250px;
    padding: 14px;
    border-radius: 22px;
  }

  .p9-recording-main .v2-recording-cover {
    width: 220px;
    max-width: 220px;
    border-radius: 20px;
  }

  .p9-recording-main .v2-recording-halo {
    width: 208px;
  }

  .p9-recording-main .v2-art-caption {
    bottom: 7px;
    left: 10px;
    font-size: 7px;
  }

  .p9-recording-copy.v2-recording-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    text-align: right;
  }

  .p9-recording-copy h1 {
    max-width: 18ch;
    margin: 8px 0 7px;
    font-size: clamp(34px, 2.25vw, 42px);
    line-height: 1.18;
  }

  .p9-recording-copy > p {
    margin: 4px 0;
    font-size: 13px;
    line-height: 1.75;
  }

  .p9-recording-copy .p9-badge-row {
    gap: 7px;
  }

  .p9-recording-copy .badge {
    padding: 7px 10px;
    font-size: 12px;
  }

  .p9-recording-copy .p9-actions {
    gap: 9px;
    margin-top: 18px;
  }

  .p9-recording-copy .primary-button,
  .p9-recording-copy .secondary-button {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 14px;
  }
}

/* Tablet 651-900px */
@media (min-width: 651px) and (max-width: 900px) {
  .p9-recording-main.v2-recording-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    min-height: 285px;
    padding: 22px;
  }

  .p9-recording-main .v2-recording-art-stage {
    flex: 0 0 210px;
    width: 210px;
    min-height: 210px;
    padding: 12px;
  }

  .p9-recording-main .v2-recording-cover {
    width: 186px;
    max-width: 186px;
  }

  .p9-recording-main .v2-recording-halo {
    width: 176px;
  }

  .p9-recording-copy.v2-recording-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .p9-recording-copy h1 {
    max-width: 18ch;
    font-size: clamp(30px, 4vw, 36px);
    line-height: 1.20;
  }

  .p9-recording-copy > p {
    font-size: 12px;
  }

  .p9-recording-copy .badge {
    font-size: 11px;
  }

  .p9-recording-copy .primary-button,
  .p9-recording-copy .secondary-button {
    font-size: 13px;
  }
}

/* Mobile <=650px */
@media (max-width: 650px) {
  .p9-recording-main.v2-recording-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 17px;
    min-height: auto;
    padding: 18px 15px 20px;
  }

  .p9-recording-main .v2-recording-art-stage {
    flex: none;
    width: min(66vw, 232px);
    min-height: 0;
    aspect-ratio: 1;
    margin-inline: auto;
    padding: 12px;
    border-radius: 21px;
  }

  .p9-recording-main .v2-recording-cover {
    width: min(100%, 208px);
    max-width: 208px;
    border-radius: 19px;
  }

  .p9-recording-main .v2-recording-halo {
    width: min(76%, 190px);
  }

  .p9-recording-main .v2-art-caption {
    bottom: 6px;
    left: 8px;
    font-size: 7px;
  }

  .p9-recording-copy.v2-recording-copy {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .p9-recording-copy h1 {
    max-width: 21ch;
    margin: 6px auto 6px;
    font-size: clamp(27px, 7.2vw, 30px);
    line-height: 1.23;
  }

  .p9-recording-copy > p {
    margin: 3px auto;
    font-size: 12px;
    line-height: 1.65;
  }

  .p9-recording-copy .p9-badge-row {
    gap: 6px;
    justify-content: center;
  }

  .p9-recording-copy .badge {
    padding: 6px 8px;
    font-size: 10px;
  }

  .p9-recording-copy .p9-actions {
    gap: 7px;
    margin-top: 15px;
    justify-content: center;
  }

  .p9-recording-copy .primary-button,
  .p9-recording-copy .secondary-button {
    min-height: 40px;
    padding-inline: 12px;
    border-radius: 11px;
    font-size: 13px;
  }
}


/* ============================================================
   PHASE 10V3C-R1 — REMOVE RECORDING ARTWORK CAPTION
   Decorative caption removed to reduce mobile visual clutter.
   ============================================================ */
.v2-art-caption {
  display: none !important;
}


/* ============================================================
   PHASE 10V3D — TRACK ROWS ONLY
   Accepted baseline: V2.1 + V3A + V3B-R2 + V3C-R1.
   Only track-list row presentation changes.
   ============================================================ */

.premium-track-list {
  border-radius: 20px;
  border-color: #3b2c25;
  background: #0f1011;
  overflow: hidden;
}

/* DESKTOP / TABLET
   Five children -> five explicit columns:
   index | play | title | duration | favorite */
@media (min-width: 651px) {
  .premium-track-row {
    display: grid;
    grid-template-columns: 32px 36px minmax(0, 1fr) 58px 36px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 14px;
    border-bottom: 1px solid #2c2420;
    background: transparent;
  }

  .premium-track-row:last-child {
    border-bottom: 0;
  }

  .premium-track-row:hover,
  .premium-track-row:focus-within {
    background: #171313;
  }

  .premium-track-row .track-index {
    font-size: 12px;
    line-height: 1;
    color: #a99b90;
    text-align: center;
  }

  .premium-track-row .track-round-play {
    width: 34px;
    min-width: 34px;
    height: 34px;
    justify-self: center;
  }

  .premium-track-row .track-title {
    min-width: 0;
  }

  .premium-track-row .track-title a {
    display: block;
    color: #f0e2d2;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .premium-track-row .track-title small {
    display: block;
    margin-top: 2px;
    color: #aa9a8f;
    font-size: 11px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .premium-track-row .track-duration {
    display: block;
    min-width: 0;
    color: #b7a89d;
    font-size: 11px;
    text-align: center;
    direction: ltr;
    font-variant-numeric: tabular-nums;
  }

  .premium-track-row .track-favorite-button {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-self: center;
    border-radius: 10px;
  }
}

/* MOBILE <=650px
   Duration is intentionally hidden.
   Four visible children -> four explicit columns:
   index | play | title | favorite */
@media (max-width: 650px) {
  .premium-track-list {
    border-radius: 17px;
  }

  .premium-track-row {
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 9px 10px;
    border-bottom: 1px solid #2c2420;
    background: transparent;
  }

  .premium-track-row:last-child {
    border-bottom: 0;
  }

  .premium-track-row .track-index {
    font-size: 11px;
    line-height: 1;
    color: #aa9a8f;
    text-align: center;
  }

  .premium-track-row .track-round-play {
    width: 32px;
    min-width: 32px;
    height: 32px;
    justify-self: center;
    font-size: 11px;
  }

  .premium-track-row .track-title {
    min-width: 0;
  }

  .premium-track-row .track-title a {
    display: block;
    color: #f0e2d2;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .premium-track-row .track-title small {
    display: block;
    margin-top: 2px;
    color: #998c83;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .premium-track-row .track-duration {
    display: none;
  }

  .premium-track-row .track-favorite-button {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-self: center;
    border-radius: 9px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .premium-track-row {
    transition: background-color .16s ease;
  }

  .premium-track-row .track-title a {
    transition: color .16s ease;
  }

  .premium-track-row:hover .track-title a {
    color: #f3cd91;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-track-row,
  .premium-track-row .track-title a {
    transition: none !important;
  }
}


/* ============================================================
   PHASE 10V3E — EMPTY / LOADING / ERROR STATE STYLING ONLY
   No new symbols. No new copy. Existing semantic markup is preserved.
   ============================================================ */

/* Shared base: quiet, readable, not decorative. */
.page-loading,
.empty-state,
.error-state {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 22px;
  border: 1px solid #3a2c26;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #121112 0%, #0d0e0f 100%);
  color: #b9aaa0;
  text-align: center;
  line-height: 1.75;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

/* Loading: keep existing message only. */
.page-loading {
  position: relative;
  overflow: hidden;
  color: #cdbfb4;
  font-size: 13px;
}

.page-loading::after {
  content: "";
  position: absolute;
  right: 12%;
  left: 12%;
  bottom: 20px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(186,137,73,.22) 20%,
      rgba(220,177,105,.72) 50%,
      rgba(186,137,73,.22) 80%,
      transparent 100%);
  background-size: 180% 100%;
  animation: v3eLoadingLine 1.4s ease-in-out infinite;
}

/* Empty state: neutral, calm. */
.empty-state {
  color: #aaa097;
  font-size: 13px;
}

/* Error state: clear but not alarming. */
.error-state {
  flex-direction: column;
  gap: 5px;
  color: #c6b7ac;
  border-color: #53322f;
  background:
    linear-gradient(180deg, #171111 0%, #0e0d0d 100%);
}

.error-state strong {
  color: #e0c1b8;
  font-size: 15px;
  font-weight: 800;
}

@keyframes v3eLoadingLine {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Mobile: compact, readable, no wasted height. */
@media (max-width: 650px) {
  .page-loading,
  .empty-state,
  .error-state {
    min-height: 118px;
    padding: 18px 16px;
    border-radius: 15px;
    font-size: 12px;
  }

  .error-state strong {
    font-size: 14px;
  }

  .page-loading::after {
    right: 16%;
    left: 16%;
    bottom: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading::after {
    animation: none !important;
  }
}


/* ============================================================
   PHASE 10V3F — PLAYER + QUEUE ONLY
   Visual proportions only. Playback behavior is unchanged.
   ============================================================ */

/* Desktop player: cleaner, slightly more compact and better balanced. */
@media (min-width: 901px) {
  :root {
    --player-height: 84px;
  }

  .player-shell {
    min-height: var(--player-height);
    background: rgba(16, 15, 16, .97);
    border-top: 1px solid #3b2c26;
    box-shadow: 0 -14px 38px rgba(0,0,0,.28);
    backdrop-filter: blur(16px);
  }

  .player-inner {
    max-width: 1240px;
    min-height: var(--player-height);
    padding: 9px 16px;
    grid-template-columns: minmax(180px, .9fr) auto minmax(300px, 1.55fr) auto;
    gap: 14px;
  }

  .player-title-button strong {
    color: #f0e2d2;
    font-size: 13px;
    line-height: 1.35;
  }

  .player-title-button span {
    margin-top: 2px;
    color: #9e9188;
    font-size: 10px;
  }

  .player-controls {
    gap: 4px;
  }

  .player-control {
    width: 34px;
    height: 34px;
    color: #c5b8ae;
  }

  .player-small-control {
    font-size: 10px;
    font-weight: 750;
  }

  .player-play {
    width: 46px;
    height: 46px;
    font-size: 17px;
    background: #8d2332;
    box-shadow: 0 7px 20px rgba(117,25,39,.26);
  }

  .player-timeline {
    grid-template-columns: 40px minmax(150px,1fr) 40px;
    gap: 7px;
  }

  .time {
    color: #9e9188;
    font-size: 10px;
  }

  .player-waveform {
    height: 38px;
  }

  .player-actions {
    gap: 4px;
  }
}

/* Tablet / mobile shared player surface. */
@media (max-width: 900px) {
  .player-shell {
    background: rgba(16,15,16,.98);
    border-top: 1px solid #3b2c26;
    box-shadow: 0 -12px 34px rgba(0,0,0,.30);
    backdrop-filter: blur(16px);
  }

  .player-inner {
    gap: 4px 9px;
  }

  .player-title-button strong {
    color: #f0e2d2;
    font-size: 12px;
    line-height: 1.35;
  }

  .player-title-button span {
    margin-top: 1px;
    color: #9e9188;
    font-size: 9px;
  }

  .time {
    color: #9e9188;
    font-size: 9px;
  }

  .player-waveform {
    height: 34px;
  }
}

/* 390px-focused mobile sizing.
   ±10 sec controls are preserved explicitly. */
@media (max-width: 650px) {
  :root {
    --player-height: 150px;
  }

  .player-inner {
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "track actions"
      "timeline timeline"
      "controls controls";
    gap: 3px 8px;
  }

  .player-track {
    padding-left: 3px;
  }

  .player-title-button strong {
    font-size: 12px;
  }

  .player-title-button span {
    font-size: 9px;
  }

  .player-timeline {
    grid-template-columns: 34px minmax(100px,1fr) 34px;
    gap: 6px;
  }

  .player-controls {
    gap: 4px;
    width: 100%;
    justify-content: center;
  }

  .player-control {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    color: #c9bbb0;
  }

  /* Critical mobile feature preserved */
  .player-small-control {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 11px;
    font-weight: 800;
    color: #eadfd3;
    background: #211d1d;
    border: 1px solid #3a302c;
  }

  .player-play {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    font-size: 17px;
    background: #8d2332;
  }

  .player-actions .player-control {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Queue: improve hierarchy without decorative additions. */
.queue-panel {
  width: min(400px, 92vw);
  background: #101112;
  border-right: 1px solid #3a2c26;
  box-shadow: 16px 0 44px rgba(0,0,0,.34);
}

.queue-panel-header {
  padding: 15px 16px;
  border-bottom-color: #302622;
}

.queue-panel-header strong {
  color: #f0e2d2;
  font-size: 15px;
}

.queue-panel-header small {
  color: #998c83;
  font-size: 10px;
}

.queue-list {
  padding: 6px;
}

.queue-item {
  min-height: 56px;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  color: #d7c9bd;
}

.queue-item:hover {
  background: #181516;
}

.queue-item.current {
  background: #261518;
  color: #e3bb78;
}

.queue-item-index {
  color: #aa9a8f;
  font-size: 11px;
}

.queue-item strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item small {
  margin-top: 2px;
  color: #958981;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-backdrop {
  background: rgba(8,7,8,.58);
}

@media (max-width: 650px) {
  .queue-panel {
    width: min(360px, 94vw);
  }

  .queue-panel-header {
    padding: 13px 14px;
  }

  .queue-panel-header strong {
    font-size: 14px;
  }

  .queue-item {
    min-height: 54px;
    padding: 8px 9px;
  }

  .queue-item strong {
    font-size: 12px;
  }

  .queue-item small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .queue-panel {
    transition: none !important;
  }
}


/* ============================================================
   PHASE 10V3G — MICRO-INTERACTIONS + FINAL POLISH ONLY
   No layout, typography, sizing, content, or behavior changes.
   ============================================================ */

/* Cards: tiny lift, not a floating animation. */
@media (hover: hover) and (pointer: fine) {
  .p9-release-card,
  .p9-reciter-card,
  .p9-subject-card,
  .p10-library-card {
    transition:
      transform .14s ease,
      border-color .14s ease,
      box-shadow .14s ease,
      background-color .14s ease;
  }

  .p9-release-card:hover,
  .p9-reciter-card:hover,
  .p9-subject-card:hover,
  .p10-library-card:hover {
    transform: translateY(-2px);
    border-color: rgba(208, 162, 94, .34);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
  }

  /* Buttons: tactile but restrained. */
  .primary-button,
  .secondary-button,
  .track-round-play,
  .track-favorite-button,
  .player-control,
  .header-search button {
    transition:
      transform .12s ease,
      border-color .12s ease,
      background-color .12s ease,
      color .12s ease,
      box-shadow .12s ease;
  }

  .primary-button:hover,
  .secondary-button:hover,
  .track-round-play:hover:not(:disabled),
  .track-favorite-button:hover:not(:disabled),
  .player-control:hover:not(:disabled),
  .header-search button:hover {
    transform: translateY(-1px);
  }

  .primary-button:active,
  .secondary-button:active,
  .track-round-play:active:not(:disabled),
  .track-favorite-button:active:not(:disabled),
  .player-control:active:not(:disabled),
  .header-search button:active {
    transform: translateY(0) scale(.98);
  }

  /* Links in card titles receive a subtle color response only. */
  .p9-release-card a,
  .p9-reciter-card a,
  .p9-subject-card a,
  .p10-library-card a {
    transition: color .14s ease;
  }
}

/* Keyboard focus: one consistent premium ring. */
.p9-release-card:focus-within,
.p9-reciter-card:focus-within,
.p9-subject-card:focus-within,
.p10-library-card:focus-within {
  border-color: rgba(222, 180, 110, .52);
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.track-round-play:focus-visible,
.track-favorite-button:focus-visible,
.player-control:focus-visible,
.header-search button:focus-visible,
.p9-release-card a:focus-visible,
.p9-reciter-card a:focus-visible,
.p9-subject-card a:focus-visible,
.p10-library-card a:focus-visible {
  outline: 2px solid rgba(235, 194, 121, .82);
  outline-offset: 3px;
}

/* Mobile/touch: no hover translation. Keep only active tactile feedback. */
@media (hover: none), (pointer: coarse) {
  .p9-release-card,
  .p9-reciter-card,
  .p9-subject-card,
  .p10-library-card {
    transform: none !important;
  }

  .primary-button:active,
  .secondary-button:active,
  .track-round-play:active:not(:disabled),
  .track-favorite-button:active:not(:disabled),
  .player-control:active:not(:disabled),
  .header-search button:active {
    transform: scale(.985);
  }
}

/* Motion accessibility overrides every V3G movement. */
@media (prefers-reduced-motion: reduce) {
  .p9-release-card,
  .p9-reciter-card,
  .p9-subject-card,
  .p10-library-card,
  .primary-button,
  .secondary-button,
  .track-round-play,
  .track-favorite-button,
  .player-control,
  .header-search button,
  .p9-release-card a,
  .p9-reciter-card a,
  .p9-subject-card a,
  .p10-library-card a {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   PHASE 10V3H — PROFESSIONAL LOGO + FAVICON ONLY
   New image identity; no functional/layout changes elsewhere.
   ============================================================ */

.brand-with-logo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,.28));
}

.brand-logo-desktop {
  width: 210px;
  height: auto;
  max-height: 62px;
}

.brand-logo-mobile {
  display: none;
  width: 48px;
  height: 48px;
}

/* Keep the semantic brand name available to assistive technology. */
.brand-copy-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.footer-brand-mark {
  display: block;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,.28));
}

@media (max-width: 1050px) and (min-width: 651px) {
  .brand-logo-desktop {
    width: 174px;
    max-height: 56px;
  }
}

@media (max-width: 650px) {
  .brand-logo-desktop { display: none; }
  .brand-logo-mobile { display: block; }
  .brand-with-logo { min-width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .footer-brand-mark { transition: none !important; }
}


/* ============================================================
   PHASE 10UX1A — MAIN NAVIGATION SIMPLIFICATION
   Main nav = Home / Reciters / Subjects.
   Search + My Library remain dedicated header controls.
   ============================================================ */

.site-nav-inner {
  min-height: 44px;
  gap: 4px;
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 17px 9px;
}

.site-nav a[aria-current="page"] {
  color: var(--gold-bright);
  background: rgba(117,23,34,.16);
}

.site-nav a[aria-current="page"]::after {
  background: var(--accent);
}

#reciter-collections {
  scroll-margin-top: 132px;
}

/* Three links fit comfortably on phones; no horizontal nav scrolling. */
@media (max-width: 760px) {
  .site-nav-inner {
    justify-content: center;
    overflow: visible;
    padding-inline: 10px;
    gap: 2px;
  }

  .site-nav a {
    flex: 1 1 0;
    max-width: 136px;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
    font-size: 13px;
  }
}

@media (max-width: 390px) {
  .site-nav a {
    font-size: 12px;
    padding-inline: 6px;
  }
}


/* ============================================================
   PHASE 10UX1B — HEADER ACTION CLARITY
   Library and Queue are consistent, clearly labeled utilities.
   ============================================================ */

.header-actions {
  gap: 8px;
}

.header-utility-button {
  min-height: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0 12px;
  border: 1px solid #49352b;
  border-radius: 13px;
  background: #111112;
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.header-utility-button:hover {
  background: #191616;
  border-color: #8b6140;
}

.header-utility-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-utility-label {
  display: inline;
  font-size: 12px;
  line-height: 1;
}

.library-nav-icon {
  font-size: inherit;
}

.queue-button {
  position: relative;
  width: auto;
}

.queue-icon::before {
  content: none !important;
  display: none !important;
}

/* Tablet/mobile: keep utilities compact and equal. */
@media (max-width: 900px) {
  .header-actions {
    gap: 6px;
  }

  .header-utility-button,
  .library-nav-button,
  .queue-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
  }

  .header-utility-label,
  .library-nav-label,
  .queue-nav-label {
    display: none;
  }

  .header-utility-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
}

@media (max-width: 390px) {
  .header-actions {
    gap: 5px;
  }

  .header-utility-button,
  .library-nav-button,
  .queue-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}


/* ============================================================
   PHASE 10UX1C — COMPACT EXISTING BREADCRUMBS
   Refines the breadcrumbs already rendered inside content pages.
   No second navigation row is added.
   ============================================================ */

.breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  margin: -2px 0 14px;
  overflow: hidden;
  color: #9b8c82;
  font-size: 12px;
  line-height: 1.3;
}

.breadcrumbs > a,
.breadcrumbs > .breadcrumb-context,
.breadcrumbs > .breadcrumb-current {
  min-width: 0;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumbs > a {
  color: #aa9a8f;
}

.breadcrumbs > a:hover {
  color: var(--gold-bright);
}

.breadcrumbs > .breadcrumb-current {
  color: #e3d0b7;
  font-weight: 700;
}

.breadcrumbs > .breadcrumb-context {
  color: #9a8c82;
}

.breadcrumb-separator {
  flex: 0 0 auto;
  color: #6b5e56;
  font-size: 13px;
}

/* Mobile: keep context useful without allowing breadcrumbs to dominate. */
@media (max-width: 650px) {
  .breadcrumbs {
    gap: 4px;
    min-height: 26px;
    margin-bottom: 11px;
    font-size: 11px;
  }

  .breadcrumbs > a,
  .breadcrumbs > .breadcrumb-context,
  .breadcrumbs > .breadcrumb-current {
    max-width: 15ch;
  }

  /* On deep Recording paths, hide the least useful middle context first. */
  .breadcrumbs > :nth-child(4):not(:last-child),
  .breadcrumbs > :nth-child(5):not(:last-child) {
    display: none;
  }
}

@media (max-width: 390px) {
  .breadcrumbs {
    gap: 3px;
    font-size: 11px;
  }

  .breadcrumbs > a,
  .breadcrumbs > .breadcrumb-context,
  .breadcrumbs > .breadcrumb-current {
    max-width: 13ch;
  }
}

/* ============================================================
   PHASE 10UX2A — SEARCH RESULT TYPE FILTERS
   Search API remains recording-based. Reciter/Release shortcuts
   are derived honestly from matched recording rows.
   ============================================================ */

.search-panel-footer {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.search-panel-footer .result-count {
  margin: 0;
  flex: 0 0 auto;
}

.search-filter-strip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-filter-label {
  flex: 0 0 auto;
  color: #95877e;
  font-size: 11px;
}

.search-type-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-type-filter {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid #3b302b;
  border-radius: 999px;
  background: #0b0c0d;
  color: #afa096;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.search-type-filter small {
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  border-radius: 999px;
  background: #1b1716;
  color: #91847c;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.search-type-filter:hover {
  border-color: #7d5940;
  color: #ead9c5;
}

.search-type-filter.active {
  border-color: rgba(210,166,99,.55);
  background: #27171a;
  color: #efc982;
}

.search-type-filter.active small {
  background: #3a2024;
  color: #f1d8aa;
}

.search-result-section {
  margin-block: 18px 24px;
}

.search-result-section:first-child {
  margin-top: 0;
}

.search-result-section-head {
  margin-bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.search-result-section-head h2 {
  margin: 2px 0 0;
  color: #f0e2d2;
  font-size: 20px;
}

.search-view-more {
  border: 0;
  background: transparent;
  color: var(--gold-bright);
  padding: 6px 0;
  font-size: 11px;
  cursor: pointer;
}

.search-view-more:hover {
  text-decoration: underline;
}

.search-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  gap: 9px;
}

.search-entity-card {
  position: relative;
  min-width: 0;
  min-height: 74px;
  padding: 12px 42px 12px 13px;
  border: 1px solid #362b27;
  border-radius: 15px;
  background: #101112;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.search-entity-card:hover {
  border-color: rgba(210,166,99,.43);
  background: #161313;
}

.search-entity-kind {
  color: #9a8c83;
  font-size: 9px;
  font-weight: 750;
}

.search-entity-card strong {
  min-width: 0;
  color: #f0e2d2;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-entity-card small {
  min-width: 0;
  color: #958981;
  font-size: 10px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-entity-open {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #b88a52;
  font-size: 18px;
}

.search-derived-note {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px solid #302722;
  border-radius: 11px;
  background: #0f1011;
  color: #92867e;
  font-size: 10px;
  line-height: 1.6;
}

@media (max-width: 650px) {
  .search-panel-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .search-filter-strip {
    display: block;
  }

  .search-filter-label {
    display: block;
    margin-bottom: 5px;
  }

  .search-type-filters {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .search-type-filters::-webkit-scrollbar {
    display: none;
  }

  .search-type-filter {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .search-result-section-head h2 {
    font-size: 18px;
  }

  .search-entity-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .search-entity-card {
    min-height: 68px;
    padding-block: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .search-type-filter,
  .search-entity-card {
    transition: none !important;
  }
}

/* PHASE 10UX2A R1 — FILTER CLARITY + BALANCED QUICK RELEASES */
.search-quick-release-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .search-quick-release-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .search-quick-release-results {
    grid-template-columns: 1fr;
  }
}

/* PHASE 10UX2A R2 — DERIVED RESULT PAGINATION CLARITY */
.search-derived-note {
  color: #b3a39a;
  font-size: 11px;
}
.search-derived-note strong {
  color: #d0b079;
  font-weight: 800;
}
.search-source-pagination {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: 22px;
}
.search-source-pagination .pagination {
  margin-top: 0;
}
.search-source-pagination-label {
  color: #998d85;
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 650px) {
  .search-derived-note { font-size: 10.5px; }
  .search-source-pagination-label { font-size: 9.5px; }
}

/* ============================================================
   PHASE 10UX2B — HIJRI YEAR PAGE-REFINEMENT PILOT
   This is intentionally local to the currently loaded recording
   search page. It does not claim to filter the full result set.
   ============================================================ */
.search-page-refine {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #302722;
  border-radius: 13px;
  background: #0f1011;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
}
.search-page-refine-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.search-page-refine-copy strong {
  color: #d8c8b8;
  font-size: 12px;
}
.search-page-refine-copy small,
.search-page-refine-count {
  color: #958981;
  font-size: 10px;
  line-height: 1.45;
}
.search-year-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a99b91;
  font-size: 10px;
}
.search-year-filter select {
  min-width: 126px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #3b302b;
  border-radius: 10px;
  background: #0b0c0d;
  color: #eadfd4;
  font: inherit;
  outline: none;
}
.search-year-filter select:focus-visible {
  border-color: rgba(210,166,99,.72);
  box-shadow: 0 0 0 3px rgba(210,166,99,.12);
}
.search-page-refine-clear {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #49352c;
  border-radius: 9px;
  background: rgba(106,38,43,.16);
  color: #d8b69a;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.search-page-refine-clear:hover {
  border-color: rgba(210,166,99,.55);
  color: #f0d4b4;
}
.search-page-refine-clear:focus-visible {
  outline: 2px solid rgba(210,166,99,.7);
  outline-offset: 2px;
}
.search-page-refine-count {
  white-space: nowrap;
}
@media (max-width: 650px) {
  .search-page-refine {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .search-year-filter {
    justify-content: space-between;
  }
  .search-year-filter select {
    min-width: 0;
    width: min(190px, 62%);
    min-height: 40px;
  }
  .search-page-refine-clear {
    justify-self: start;
    min-height: 38px;
  }
  .search-page-refine-count {
    white-space: normal;
  }
}

/* PHASE 10UX2H RC2 — mobile-accessible scrollable Hijri year picker */
.search-year-mobile-trigger,
.search-year-mobile-panel {
  display: none;
}
@media (max-width: 650px) {
  .search-year-filter select {
    display: none;
  }
  .search-year-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    width: min(190px, 62%);
    min-height: 40px;
    padding: 7px 11px;
    border: 1px solid #3b302b;
    border-radius: 10px;
    background: #0b0c0d;
    color: #eadfd4;
    font: inherit;
    cursor: pointer;
  }
  .search-year-mobile-trigger::after {
    content: "⌄";
    margin-inline-start: 10px;
    color: #b99662;
  }
  .search-year-mobile-trigger:focus-visible {
    border-color: rgba(210,166,99,.72);
    box-shadow: 0 0 0 3px rgba(210,166,99,.12);
    outline: none;
  }
  .search-year-mobile-panel {
    display: block;
    grid-column: 1 / -1;
    max-height: min(260px, 42vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 8px;
    border: 1px solid #3b302b;
    border-radius: 12px;
    background: #0b0c0d;
  }
  .search-year-mobile-panel[hidden] {
    display: none !important;
  }
  .search-year-mobile-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .search-year-mobile-options button {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #302823;
    border-radius: 9px;
    background: #101112;
    color: #d8cdc3;
    font: inherit;
    text-align: center;
    cursor: pointer;
  }
  .search-year-mobile-options button[aria-selected="true"] {
    border-color: rgba(210,166,99,.72);
    background: rgba(106,38,43,.24);
    color: #f1d5a5;
  }
  .search-year-mobile-options button:focus-visible {
    outline: 2px solid rgba(210,166,99,.72);
    outline-offset: 1px;
  }
}

/* PHASE 10UX2B R2 — suppress global pagination while local year refinement is active */
.search-year-pagination-blocked {
  margin: 18px auto 0;
  max-width: 620px;
  color: #a99b91;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}
.search-year-pagination-blocked[hidden] { display: none !important; }
@media (max-width: 650px) {
  .search-year-pagination-blocked {
    margin-top: 14px;
    padding-inline: 10px;
    font-size: 9.5px;
  }
}
.search-source-pagination[hidden] { display: none !important; }


/* PHASE 10UX2C — search recovery / zero-result state */
.search-no-results {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 18px;
  align-items: start;
  margin-top: 14px;
  padding: 24px;
  border: 1px solid #3b2b24;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(121, 35, 40, .12), transparent 34%),
    #101112;
  box-shadow: 0 16px 38px rgba(0,0,0,.16);
}
.search-no-results-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210,166,99,.34);
  border-radius: 14px;
  background: rgba(106,38,43,.18);
  color: #d7a45e;
  font-size: 22px;
}
.search-no-results-copy h2 {
  margin: 4px 0 6px;
  color: #f4e7d7;
  font-size: clamp(20px, 2.4vw, 28px);
}
.search-no-results-copy p {
  margin: 0;
  color: #b7aaa0;
  line-height: 1.7;
}
.search-no-results-copy p strong { color: #e6c99e; font-weight: 700; }
.search-no-results-help {
  grid-column: 2;
  padding-top: 4px;
  color: #a99b91;
  font-size: 12px;
  line-height: 1.75;
}
.search-no-results-help > strong { color: #d8c2aa; }
.search-no-results-help ul {
  margin: 6px 0 0;
  padding-inline-start: 20px;
}
.search-no-results-actions {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-no-results-actions button {
  min-height: 38px;
  padding: 7px 13px;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}
.search-clear-button {
  border: 1px solid #49352c;
  background: transparent;
  color: #d6b998;
}
.search-clear-button:hover { border-color: rgba(210,166,99,.58); color: #f1d7b8; }
.search-clear-button:focus-visible,
.search-no-results-actions .secondary-button:focus-visible {
  outline: 2px solid rgba(210,166,99,.72);
  outline-offset: 2px;
}
@media (max-width: 650px) {
  .search-no-results {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .search-no-results-mark { width: 42px; height: 42px; }
  .search-no-results-help,
  .search-no-results-actions { grid-column: 1; }
  .search-no-results-help { font-size: 11px; }
  .search-no-results-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .search-no-results-actions button { min-height: 42px; }
}
@media (max-width: 380px) {
  .search-no-results-actions { grid-template-columns: 1fr; }
}


/* ============================================================
   PHASE 10UX2E — SEARCH MATCH CONTEXT / PRESENTATION QUALITY
   Ranking and result order are unchanged. Matching text is only
   emphasized inside already-returned search results.
   ============================================================ */
.search-match-highlight {
  color: #f2c67f;
  background: rgba(214, 160, 76, .12);
  border-radius: 4px;
  padding: 0 .08em;
  font: inherit;
  text-decoration: inherit;
  box-shadow: inset 0 -1px 0 rgba(224, 170, 84, .28);
}

.search-entity-card .search-match-highlight {
  color: #f4ca86;
  background: rgba(214, 160, 76, .10);
}

.search-track-row .track-title .search-match-highlight {
  color: #f4c984;
  background: rgba(214, 160, 76, .09);
}

.search-lat-match {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(192, 142, 70, .32);
  border-radius: 999px;
  color: #cdb38b;
  background: rgba(108, 72, 37, .14);
  font-size: .92em;
  direction: ltr;
  unicode-bidi: isolate;
}

.search-lat-match .search-match-highlight {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 650px) {
  .search-match-highlight {
    padding-inline: .04em;
  }
  .search-lat-match {
    margin-inline-start: 4px;
    padding-inline: 4px;
  }
}


/* ============================================================
   PHASE 10UX2F — SEARCH RESULT DENSITY + SCANABILITY
   Search rows use stable result positions as the primary scan
   anchor and slightly tighter vertical rhythm. Release/recording
   archive lists outside search retain their original track numbers.
   ============================================================ */
.search-track-row.premium-track-row {
  min-height: 60px;
  padding-block: 7px;
}

.search-track-row .track-index.search-result-rank {
  color: #c7aa7d;
  font-size: 10.5px;
  font-weight: 800;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

.search-track-row .track-title small {
  margin-top: 1px;
}

@media (max-width: 650px) {
  .search-track-row.premium-track-row {
    min-height: 58px;
    padding-block: 7px;
  }
  .search-track-row .track-index.search-result-rank {
    font-size: 10px;
  }
}
\n\n/* =========================================================
   PHASE 11UX1A — TASK-ORIENTED HOME
   Homepage prioritizes listening decisions over archive facts.
   ========================================================= */

.p11-home-continue-host:empty,
#home-recent-listening:empty { display: none; }

.p11-home-continue-host:not(:empty) {
  margin-top: 10px;
}

.p11-continue-priority {
  margin-top: 10px;
  padding: 22px;
  border: 1px solid rgba(214,170,100,.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 18%, rgba(153,32,44,.18), transparent 38%),
    linear-gradient(135deg,#151011,#0d0e0f 58%,#111011);
  box-shadow: 0 20px 46px rgba(0,0,0,.28);
}

.p11-continue-priority .p9-section-header { margin-bottom: 14px; }
.p11-continue-priority .p9-section-header h2 { font-size: 30px; }
.p11-continue-priority .p9-section-header p { max-width: 620px; }
.p11-continue-priority .p10-library-card {
  border-color: rgba(214,170,100,.24);
  background: rgba(11,12,13,.82);
}
.p11-continue-priority .p10-library-play {
  background: linear-gradient(145deg,#9c2533,#66131d);
  color: #fff0df;
}

.p11-listen-hero {
  min-height: 365px;
  margin-top: 18px;
  grid-template-columns: 1.22fr .78fr;
}
.p11-listen-hero .p9-hero-content {
  padding: 42px 52px 38px;
}
.p11-listen-hero h1 {
  font-size: clamp(42px,5vw,62px);
  line-height: 1.06;
  margin-bottom: 15px;
}
.p11-listen-hero p {
  max-width: 680px;
  font-size: 15px;
  line-height: 1.9;
}
.p11-listen-hero .p9-hero-search { margin-top: 20px; }
.p11-listen-hero .p9-hero-art {
  min-height: 365px;
  background-position: center 37%;
}

.p11-discovery-section { margin-top: 42px; }
.p11-discovery-section .p9-section-header { margin-bottom: 16px; }
.p11-discovery-section .p9-section-header h2 { font-size: 30px; }

.p11-recent-listening {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(214,170,100,.16);
}

.p11-archive-info {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(214,170,100,.16);
}
.p11-archive-info .p9-stat-strip { margin-top: 16px; }

@media (max-width: 900px) {
  .p11-listen-hero { grid-template-columns: 1fr; }
  .p11-listen-hero .p9-hero-art { order: -1; min-height: 210px; }
  .p11-listen-hero .p9-hero-content { padding: 30px 28px 30px; }
}

@media (max-width: 560px) {
  .p11-home-continue-host:not(:empty) { margin-top: 4px; }
  .p11-continue-priority {
    margin-top: 4px;
    padding: 15px;
    border-radius: 20px;
  }
  .p11-continue-priority .p9-section-header { gap: 5px; }
  .p11-continue-priority .p9-section-header h2 { font-size: 25px; }
  .p11-continue-priority .p9-section-header p { font-size: 12px; }
  .p11-continue-grid { grid-template-columns: 1fr; }
  .p11-continue-grid .p10-library-card:nth-child(n+2) { display: none; }

  .p11-listen-hero { margin-top: 12px; }
  .p11-listen-hero .p9-hero-art { min-height: 150px; }
  .p11-listen-hero .p9-hero-content { padding: 22px 18px 23px; }
  .p11-listen-hero h1 { font-size: 36px; margin: 7px 0 11px; }
  .p11-listen-hero p { font-size: 13px; line-height: 1.75; }
  .p11-listen-hero .p9-hero-search { margin-top: 15px; }
  .p11-listen-hero .hero-footnote { margin-top: 10px; }

  .p11-discovery-section { margin-top: 34px; }
  .p11-discovery-section .p9-section-header h2 { font-size: 26px; }
  .p11-recent-listening { margin-top: 36px; padding-top: 22px; }
  .p11-archive-info { margin-top: 38px; padding-top: 22px; }
}

/* Phase11UX1A R2: mobile discovery balance.
   Keep all nine reciters on desktop; on phones show the first six so subjects
   arrive earlier, with an explicit in-place expander for the remaining three. */
.p11-mobile-reciter-more {
  display: none;
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  border: 1px solid rgba(214,170,100,.24);
  border-radius: 14px;
  background: rgba(15,14,14,.82);
  color: #e7bd77;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 560px) {
  #home-reciter-grid:not(.is-expanded) .p9-reciter-card:nth-child(n+7) {
    display: none;
  }
  .p11-mobile-reciter-more:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p11-mobile-reciter-more:focus-visible {
    outline: 2px solid #d6aa64;
    outline-offset: 3px;
  }
}

/* =========================================================
   PHASE 11UX1B — TRUSTWORTHY RECENTLY ADDED
   Chronology comes only from permanent catalog identity issuance/amendment UTC.
   Never infer addition order from event year, filenames, sitemap order, or mtime.
   ========================================================= */

.p11-recently-added {
  margin-top: 42px;
}

.p11-recently-added .p9-section-header {
  margin-bottom: 16px;
  align-items: end;
}

.p11-recently-added .p9-section-header h2 {
  font-size: 30px;
}

.p11-recently-added-date {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(214,170,100,.20);
  border-radius: 999px;
  color: #c7ad88;
  background: rgba(15,14,14,.72);
  font-size: 12px;
  white-space: nowrap;
}

.p11-recently-added-date:empty { display: none; }

.p11-recently-added-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.p11-recently-added-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 18px;
  gap: 11px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(214,170,100,.20);
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 15%, rgba(145,32,43,.12), transparent 42%),
    linear-gradient(145deg, rgba(18,17,18,.96), rgba(11,12,13,.96));
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.p11-recently-added-card:hover {
  transform: translateY(-1px);
  border-color: rgba(214,170,100,.38);
}

.p11-recently-added-card:focus-visible {
  outline: 2px solid #d6aa64;
  outline-offset: 3px;
}

.p11-recently-added-symbol {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(214,170,100,.26);
  border-radius: 13px;
  background: linear-gradient(145deg,#751823,#4f1018);
  color: #e7bd77;
  font-size: 21px;
  line-height: 1;
}

.p11-recently-added-copy { min-width: 0; }
.p11-recently-added-copy small {
  display: block;
  margin-bottom: 3px;
  color: #aa9781;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p11-recently-added-copy h3 {
  margin: 0;
  color: #f4e6d4;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p11-recently-added-copy p {
  margin: 5px 0 0;
  color: #b8a58f;
  font-size: 11px;
}
.p11-recently-added-arrow { color: #d6aa64; font-size: 16px; }

.p11-recently-added-grid:not(.is-expanded) .p11-recently-added-card:nth-child(n+7) {
  display: none;
}

.p11-recently-added-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(214,170,100,.20);
  border-radius: 13px;
  background: rgba(15,14,14,.72);
  color: #e7bd77;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.p11-recently-added-more[hidden] { display: none; }
.p11-recently-added-more:focus-visible {
  outline: 2px solid #d6aa64;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .p11-recently-added-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .p11-recently-added { margin-top: 34px; }
  .p11-recently-added .p9-section-header {
    align-items: start;
    gap: 8px;
  }
  .p11-recently-added .p9-section-header h2 { font-size: 26px; }
  .p11-recently-added-date { font-size: 10px; min-height: 28px; }
  .p11-recently-added-grid { grid-template-columns: 1fr; gap: 9px; }
  .p11-recently-added-card {
    min-height: 78px;
    grid-template-columns: 38px minmax(0,1fr) 16px;
    padding: 11px 12px;
    border-radius: 15px;
  }
  .p11-recently-added-symbol { width: 36px; height: 36px; border-radius: 12px; font-size: 19px; }
  .p11-recently-added-copy h3 { font-size: 15px; }
  .p11-recently-added-grid:not(.is-expanded) .p11-recently-added-card:nth-child(n+5) { display: none; }
}



/* =========================================================
   PHASE 12 UX1A — RECITER BROWSING HUB
   Release hierarchy + device listening state.
   ========================================================= */

.p12-reciter-resume {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(180px,.8fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(201,144,78,.34);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 25%,rgba(147,29,42,.14),transparent 34%),
    linear-gradient(135deg,#111112,#161213);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.p12-reciter-resume-copy h2 {
  margin: 3px 0 3px;
  color: #f4e5d4;
  font-size: clamp(19px,2vw,26px);
  line-height: 1.35;
}
.p12-reciter-resume-copy p {
  margin: 0;
  color: #ad9b8c;
  font-size: 11px;
}
.p12-reciter-resume-more { color: #c9a568; }
.p12-reciter-resume-progress { min-width: 0; }
.p12-resume-progress,
.p12-release-progress {
  width: 100%;
  height: 6px;
  display: block;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #28201d;
}
.p12-resume-progress::-webkit-progress-bar,
.p12-release-progress::-webkit-progress-bar {
  background: #28201d;
  border-radius: 999px;
}
.p12-resume-progress::-webkit-progress-value,
.p12-release-progress::-webkit-progress-value {
  background: linear-gradient(90deg,#9d2230,#d29355);
  border-radius: 999px;
}
.p12-resume-progress::-moz-progress-bar,
.p12-release-progress::-moz-progress-bar {
  background: linear-gradient(90deg,#9d2230,#d29355);
  border-radius: 999px;
}
.p12-reciter-resume-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.p12-reciter-resume-actions .primary-button,
.p12-reciter-resume-actions .secondary-button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 11px;
  white-space: nowrap;
}

.p12-release-browser {
  margin-top: 34px;
}
.p12-release-browser-header {
  align-items: end;
}
.p12-release-browser-intro {
  margin: 5px 0 0;
  color: #9e8d80;
  font-size: 12px;
}
.p12-release-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.p12-release-card {
  position: relative;
  min-width: 0;
  min-height: 158px;
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid #342923;
  border-radius: 20px;
  background: #101112;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.p12-release-card:hover {
  transform: translateY(-2px);
  border-color: #6e503a;
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.p12-release-card.is-active {
  grid-column: 1 / -1;
  grid-template-columns: 132px minmax(0,1fr);
  border-color: rgba(190,113,67,.62);
  background:
    radial-gradient(circle at 85% 20%,rgba(145,28,40,.16),transparent 34%),
    linear-gradient(135deg,#121112,#171313);
}
.p12-release-card.has-history {
  border-color: rgba(170,119,66,.36);
}
.p12-release-card.is-complete {
  border-color: rgba(111,136,104,.34);
}
.p12-release-art-link {
  display: block;
  min-width: 0;
  height: 100%;
  border-left: 1px solid rgba(214,170,100,.16);
}
.p12-release-art-link .release-art {
  width: 100%;
  height: 100%;
  min-height: 158px;
  aspect-ratio: auto;
  padding: 11px;
  border-bottom: 0;
}
.p12-release-art-link .release-art-title {
  font-size: 15px;
  line-height: 1.18;
}
.p12-release-art-link .release-art-subtitle {
  display: none;
}
.p12-release-art-link .release-art-year {
  top: 9px;
  right: 9px;
  padding: 2px 6px;
  font-size: 8px;
}
.p12-release-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 13px;
}
.p12-release-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
}
.p12-release-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(197,143,80,.28);
  border-radius: 999px;
  color: #d0a968;
  background: rgba(175,112,55,.06);
  font-size: 9px;
  font-weight: 750;
}
.p12-release-card-copy h3 {
  margin: 6px 0 5px;
  font-size: clamp(17px,1.6vw,20px);
  line-height: 1.3;
}
.p12-release-card-copy h3 a {
  color: #f1e4d5;
  text-decoration: none;
}
.p12-release-card-copy h3 a:hover {
  color: #ffd18d;
}
.p12-release-counts {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.p12-release-counts strong {
  color: #e2c28b;
  font-size: 12px;
}
.p12-release-counts span {
  color: #94867b;
  font-size: 10px;
}
.p12-release-listening {
  margin-top: auto;
  display: grid;
  gap: 5px;
}
.p12-release-listening small {
  color: #998b80;
  font-size: 9px;
}
.p12-release-listening.is-active small { color: #b9a18e; }
.p12-release-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #d8a865;
  font-size: 9px;
}
.p12-release-state-row strong {
  font-size: 10px;
}
.p12-release-state-chip {
  justify-self: start;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(196,137,73,.27);
  color: #c69b64;
  background: rgba(168,106,54,.07);
  font-size: 9px;
  font-weight: 750;
}
.p12-release-state-chip.complete {
  border-color: rgba(116,151,105,.28);
  color: #a9c29f;
  background: rgba(92,126,81,.08);
}
.p12-release-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.p12-release-resume {
  min-height: 32px;
  padding: 6px 9px;
  border-color: #96423e;
  background: linear-gradient(145deg,#8f222e,#61151d);
  color: #fff0de;
  font-size: 9px;
  font-weight: 800;
}
.p12-release-open {
  color: #d3aa70;
  font-size: 10px;
  font-weight: 800;
}
.p12-release-open:hover { color: #f2cb8d; }

@media (max-width: 900px) {
  .p12-reciter-resume {
    grid-template-columns: minmax(0,1fr) minmax(150px,.65fr);
  }
  .p12-reciter-resume-actions {
    grid-column: 1 / -1;
  }
  .p12-release-grid {
    grid-template-columns: 1fr;
  }
  .p12-release-card.is-active {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .p12-reciter-resume {
    margin-top: 12px;
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 14px;
    text-align: right;
    border-radius: 16px;
  }
  .p12-reciter-resume-copy h2 {
    font-size: 18px;
  }
  .p12-reciter-resume-progress,
  .p12-reciter-resume-actions {
    grid-column: auto;
  }
  .p12-reciter-resume-actions {
    width: 100%;
  }
  .p12-reciter-resume-actions .primary-button {
    flex: 1 1 auto;
  }
  .p12-release-browser {
    margin-top: 26px;
  }
  .p12-release-browser-intro {
    font-size: 11px;
    line-height: 1.7;
  }
  .p12-release-card,
  .p12-release-card.is-active {
    grid-template-columns: 88px minmax(0,1fr);
    min-height: 142px;
    border-radius: 16px;
  }
  .p12-release-art-link .release-art {
    min-height: 142px;
    padding: 8px;
  }
  .p12-release-art-link .release-art-title {
    font-size: 12px;
  }
  .p12-release-card-copy {
    padding: 11px 12px 10px;
  }
  .p12-release-card-copy h3 {
    margin-top: 5px;
    font-size: 16px;
  }
  .p12-release-meta {
    gap: 4px;
  }
  .p12-release-meta span {
    min-height: 18px;
    padding: 1px 6px;
    font-size: 8px;
  }
  .p12-release-counts {
    margin-bottom: 6px;
  }
  .p12-release-counts strong {
    font-size: 11px;
  }
  .p12-release-counts span,
  .p12-release-listening small {
    font-size: 8px;
  }
  .p12-release-actions {
    margin-top: 7px;
  }
  .p12-release-resume {
    min-height: 30px;
  }
}


/* ============================================================
   PHASE 12 UX1A R1 — MOBILE RECITER HERO COMPRESSION
   Preserve the approved desktop hero. On small screens the page
   must become a browsing hub quickly, so portrait + identity are
   compacted side-by-side and releases arrive much sooner.
   ============================================================ */
@media (max-width: 560px) {
  .p9-reciter-hero {
    grid-template-columns: 112px minmax(0,1fr);
    gap: 14px;
    min-height: 0;
    padding: 15px;
    text-align: right;
    align-items: center;
    border-radius: 18px;
    background:
      radial-gradient(circle at 18% 40%, rgba(133,29,38,.18), transparent 30%),
      linear-gradient(128deg,#171314,#0b0c0d 72%);
  }

  .p9-reciter-hero::after {
    right: -220px;
    bottom: -300px;
    opacity: .45;
  }

  .p9-reciter-hero-image {
    width: 112px;
    margin: 0;
    align-self: center;
    border-radius: 20px;
  }

  .p9-reciter-hero-image::before {
    inset: -8px;
    border-radius: 24px;
    filter: blur(7px);
  }

  .p9-reciter-hero-image::after {
    border-radius: 21px;
    box-shadow:
      0 10px 26px rgba(0,0,0,.34),
      0 0 0 4px rgba(226,185,109,.022);
  }

  .p9-reciter-hero-photo {
    border-radius: 20px;
  }

  .p9-reciter-hero-copy {
    min-width: 0;
    margin: 0;
  }

  .p9-reciter-hero-copy .section-kicker {
    justify-content: flex-start;
    margin-bottom: 1px;
    font-size: 10px;
  }

  .p9-reciter-hero-copy h1 {
    max-width: none;
    margin: 2px 0 5px;
    font-size: clamp(27px, 8.1vw, 33px);
    line-height: 1.14;
    text-align: right;
  }

  .p9-reciter-hero-copy p {
    margin: 0 0 8px;
    font-size: 10.5px;
    line-height: 1.65;
    text-align: right;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .p9-reciter-hero .p9-badge-row {
    justify-content: flex-start;
    gap: 5px;
  }

  .p9-reciter-hero .badge {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 9px;
  }

  .p12-release-browser {
    margin-top: 20px;
  }
}

/* ============================================================
   PHASE 12 UX1B — RELEASE BROWSE CONTROLS
   Lightweight year / occasion / sorting controls for reciter hubs.
   Unknown metadata remains explicit and never receives invented values.
   ============================================================ */
.p12-release-controls {
  margin: 0 0 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(135px,.72fr) minmax(155px,.9fr) minmax(165px,.8fr) auto;
  align-items: end;
  gap: 8px;
  border: 1px solid #2f2824;
  border-radius: 15px;
  background: rgba(14,15,16,.9);
}
.p12-release-control {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #a99a8e;
}
.p12-release-control-label {
  font-size: 9px;
  font-weight: 750;
  color: #b5a294;
}
.p12-release-control select {
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #3b302b;
  border-radius: 10px;
  background: #0b0c0d;
  color: #eadfd4;
  font: inherit;
  font-size: 10px;
  outline: none;
}
.p12-release-control select:focus-visible {
  border-color: rgba(210,166,99,.72);
  box-shadow: 0 0 0 3px rgba(210,166,99,.12);
}
.p12-release-clear {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #49352c;
  border-radius: 10px;
  background: rgba(106,38,43,.14);
  color: #d8b69a;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.p12-release-clear:hover {
  border-color: rgba(210,166,99,.55);
  color: #f0d4b4;
}
.p12-release-clear:focus-visible,
.p12-release-empty button:focus-visible,
.p12-release-mobile-trigger:focus-visible,
.p12-release-mobile-options button:focus-visible {
  outline: 2px solid rgba(210,166,99,.72);
  outline-offset: 2px;
}
.p12-release-filter-status {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}
.p12-release-filter-status strong {
  color: #d7bb8d;
  font-size: 9.5px;
  white-space: nowrap;
}
.p12-release-filter-status small {
  color: #7f756f;
  font-size: 8.5px;
  line-height: 1.5;
  text-align: left;
}
.p12-release-empty {
  margin-top: 12px;
  min-height: 150px;
  padding: 28px 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #3a302b;
  border-radius: 16px;
  background: #0d0e0f;
  text-align: center;
}
.p12-release-empty[hidden] { display: none !important; }
.p12-release-empty strong {
  color: #e7d7c5;
  font-size: 15px;
}
.p12-release-empty span {
  max-width: 520px;
  color: #95877c;
  font-size: 10px;
  line-height: 1.65;
}
.p12-release-empty button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid #49352c;
  border-radius: 9px;
  background: rgba(106,38,43,.16);
  color: #ddb995;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.p12-release-mobile-trigger,
.p12-release-mobile-panel {
  display: none;
}

@media (max-width: 720px) {
  .p12-release-controls {
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: stretch;
  }
  .p12-release-control.is-sort {
    grid-column: 1 / -1;
  }
  .p12-release-clear {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .p12-release-filter-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .p12-release-filter-status strong { white-space: normal; }
  .p12-release-filter-status small { text-align: right; }
}

@media (max-width: 560px) {
  .p12-release-controls {
    margin-bottom: 10px;
    padding: 9px;
    gap: 7px;
    border-radius: 13px;
  }
  .p12-release-control select[data-release-filter] {
    display: none;
  }
  .p12-release-control.is-sort select {
    display: block;
    min-height: 40px;
    font-size: 9.5px;
  }
  .p12-release-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid #3b302b;
    border-radius: 10px;
    background: #0b0c0d;
    color: #eadfd4;
    font: inherit;
    font-size: 9.5px;
    cursor: pointer;
  }
  .p12-release-mobile-trigger::after {
    content: "⌄";
    margin-inline-start: 8px;
    color: #b99662;
  }
  .p12-release-mobile-panel {
    display: block;
    grid-column: 1 / -1;
    max-height: min(250px,38vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 6px;
    border: 1px solid #3b302b;
    border-radius: 10px;
    background: #0b0c0d;
  }
  .p12-release-mobile-panel[hidden] {
    display: none !important;
  }
  .p12-release-mobile-options {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
  }
  .p12-release-mobile-options button {
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid #302823;
    border-radius: 8px;
    background: #101112;
    color: #d8cdc3;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
  }
  .p12-release-mobile-options button[aria-selected="true"] {
    border-color: rgba(210,166,99,.72);
    background: rgba(106,38,43,.24);
    color: #f1d5a5;
  }
  .p12-release-clear {
    width: 100%;
    min-height: 38px;
  }
  .p12-release-filter-status {
    padding-top: 1px;
  }
  .p12-release-filter-status strong { font-size: 9px; }
  .p12-release-filter-status small { font-size: 8px; }
}


/* ============================================================
   PHASE 13 UX1A — RELEASE RECORDING SELECTION STATES
   The Release page is about choosing what to play. State is
   informational: playing > partial > completed > untouched.
   ============================================================ */
.p13-recording-selection {
  margin-top: 24px;
}

.p13-recording-selection-header p {
  margin: 4px 0 0;
  color: #a99b90;
  font-size: 12px;
}

.p13-track-row {
  position: relative;
}

.p13-track-row.p13-state-playing {
  background: linear-gradient(90deg, rgba(119,26,37,.08), rgba(119,26,37,.25));
  box-shadow: inset -3px 0 0 #b72e3e;
}

.p13-track-row.p13-state-partial {
  background: rgba(111,77,36,.08);
}

.p13-track-row.p13-state-completed .track-title a {
  color: #d7c7b8;
}

.p13-track-row.p13-state-playing .track-title a {
  color: #fff0dc;
}

.p13-track-row.p13-state-playing .track-round-play {
  background: #9f2636;
  border-color: rgba(239,181,119,.48);
  color: #fff4e2;
}

.p13-track-listening-state {
  display: grid;
  grid-template-columns: max-content max-content minmax(90px, 220px);
  align-items: center;
  justify-content: start;
  gap: 7px;
  margin-top: 5px;
  min-width: 0;
}

.p13-track-listening-state[hidden] {
  display: none !important;
}

.p13-track-state-label {
  font-size: 10px;
  line-height: 1.3;
  font-weight: 800;
  white-space: nowrap;
}

.p13-track-state-label.is-playing {
  color: #f0b878;
}

.p13-track-state-label.is-partial {
  color: #d6aa72;
}

.p13-track-state-label.is-completed {
  color: #aa9f92;
}

.p13-track-state-time {
  color: #8f8279;
  font-size: 9px;
  line-height: 1.3;
  direction: rtl;
  white-space: nowrap;
}

.p13-track-progress {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #2c2420;
  color: #c54a50;
  accent-color: #c54a50;
}

.p13-track-progress::-webkit-progress-bar {
  background: #2c2420;
  border-radius: 999px;
}

.p13-track-progress::-webkit-progress-value {
  background: linear-gradient(90deg,#a92739,#d08a59);
  border-radius: 999px;
}

.p13-track-progress::-moz-progress-bar {
  background: linear-gradient(90deg,#a92739,#d08a59);
  border-radius: 999px;
}

@media (max-width: 650px) {
  .p13-recording-selection {
    margin-top: 18px;
  }

  .p13-recording-selection-header {
    margin-bottom: 12px;
  }

  .p13-recording-selection-header p {
    font-size: 10px;
    line-height: 1.6;
  }

  .p13-track-row {
    min-height: 72px;
  }

  .p13-track-listening-state {
    grid-template-columns: max-content minmax(0,1fr);
    gap: 3px 6px;
    margin-top: 4px;
  }

  .p13-track-state-label {
    font-size: 9px;
  }

  .p13-track-state-time {
    font-size: 8px;
    text-align: right;
  }

  .p13-track-progress {
    grid-column: 1 / -1;
    max-width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p13-track-row,
  .p13-track-progress {
    transition: none !important;
  }
}


/* ============================================================
   PHASE 13 UX1A R1 — MOBILE RELEASE HERO: RECORDING-FIRST
   Desktop/tablet hero remains unchanged. On phones, release
   identity becomes a compact horizontal summary so recordings
   arrive much sooner and the mini-player does not consume the
   entire useful first viewport.
   ============================================================ */
@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 13px;
    text-align: right;
    background:
      radial-gradient(circle at 84% 38%, rgba(123,29,39,.16), transparent 29%),
      linear-gradient(128deg, #171314, #0c0d0e 76%);
  }

  .p9-release-hero .v2-release-hero-art {
    flex: 0 0 104px;
    width: 104px;
    max-width: 104px;
    margin: 0;
  }

  .p9-release-hero .release-hero-art.v2-cover {
    width: 104px;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 17px;
  }

  .p9-release-hero .release-hero-art.v2-cover .release-art-title {
    max-width: 10ch;
    font-size: 12px;
    line-height: 1.25;
  }

  .p9-release-hero .release-hero-art.v2-cover .release-art-subtitle {
    font-size: 8px;
  }

  .p9-release-hero .v2-release-hero-copy {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    text-align: right;
  }

  .p9-release-hero .v2-archive-eyebrow {
    display: none;
  }

  .p9-release-hero .section-kicker {
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 8px;
  }

  .p9-release-hero .section-kicker::before {
    display: none;
  }

  .p9-release-hero-copy h1 {
    max-width: none;
    margin: 2px 0 3px;
    font-size: clamp(20px, 5.8vw, 23px);
    line-height: 1.18;
    text-align: right;
  }

  .p9-release-hero .p9-reciter-text-link {
    margin: 0;
    font-size: 10px;
    text-align: right;
  }

  .p9-release-hero-copy .p9-badge-row {
    justify-content: flex-start;
    gap: 4px;
    margin-top: 7px;
  }

  .p9-release-hero-copy .badge {
    min-height: 22px;
    padding: 3px 5px;
    font-size: 8px;
  }

  .p9-release-hero .p9-actions {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 8px;
  }

  .p9-release-hero .primary-button,
  .p9-release-hero .secondary-button {
    min-height: 34px;
    padding-inline: 9px;
    border-radius: 9px;
    font-size: 10px;
  }

  .p13-recording-selection {
    margin-top: 12px;
  }
}


/* ============================================================
   PHASE 13 UX1B — RECORDING SELECTION POLISH
   Queue clarity, paused-current synchronization, Back continuity
   affordances, and keyboard/touch accessibility. No extra decoration.
   ============================================================ */
.p13-selection-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.p13-release-queue-action {
  min-height: 38px;
  padding-inline: 12px;
  white-space: nowrap;
}

.p13-track-row.p13-current-track:not(.p13-state-playing) {
  background: rgba(126, 84, 40, .055);
  box-shadow: inset -1px 0 0 rgba(226, 185, 109, .38);
}

.p13-track-row.p13-current-track:not(.p13-state-playing) .track-round-play {
  border-color: rgba(226, 185, 109, .5);
}

.p13-track-row .track-round-play,
.p13-track-row .track-favorite-button,
.p13-release-queue-action {
  touch-action: manipulation;
}

.p13-track-row .track-round-play:focus-visible,
.p13-track-row .track-title a:focus-visible,
.p13-track-row .track-favorite-button:focus-visible,
.p13-release-queue-action:focus-visible {
  outline: 2px solid rgba(226, 185, 109, .9);
  outline-offset: 2px;
}

@media (max-width: 650px) {
  .p13-recording-selection-header {
    align-items: stretch;
  }

  .p13-selection-tools {
    width: 100%;
    justify-content: space-between;
    gap: 7px;
  }

  .p13-release-queue-action {
    min-height: 42px;
    flex: 1 1 auto;
  }

  .p13-track-row .track-round-play,
  .p13-track-row .track-favorite-button {
    min-width: 42px;
    min-height: 42px;
  }

  .p13-track-row .track-title a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}


/* ============================================================
   PHASE 14 UX1A — RECORDING PAGE: LISTENING FIRST
   Priority:
   Play/Pause → Seek → Favorite → Share → Return → Archive metadata
   ============================================================ */

.p14-recording-focus {
  max-width: 930px;
  margin: 18px auto 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(214, 170, 100, .22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 12%, rgba(126, 30, 40, .10), transparent 32%),
    linear-gradient(145deg, #121011, #0c0d0e);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .24);
}

.p14-recording-identity {
  display: flex;
  align-items: center;
  gap: 22px;
}

.p14-recording-cover-wrap {
  flex: 0 0 142px;
  width: 142px;
}

.p14-recording-cover {
  width: 142px;
  aspect-ratio: 1;
  border-radius: 20px;
  border: 1px solid rgba(232, 195, 125, .28);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .36);
}

.p14-recording-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.p14-listen-kicker {
  display: inline-block;
  color: #d9ae66;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.p14-recording-heading h1 {
  max-width: 22ch;
  margin: 0;
  color: #f6eadc;
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.18;
  text-wrap: balance;
}

.p14-recording-human-context {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
  color: #b9a89b;
  font-size: 14px;
}

.p14-listening-stack {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin: 28px auto 0;
}

.p14-primary-play {
  width: 100%;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}

.p14-seek-panel {
  padding: 16px;
  border: 1px solid rgba(214, 170, 100, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .018);
}

.p14-seek-time {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #d8c7b8;
  font-size: 12px;
}

.p14-seek-time > :first-child { text-align: left; }
.p14-seek-time > :last-child { text-align: right; }

.p14-seek-label {
  text-align: center;
  color: #94857a;
}

.p14-seek-range {
  width: 100%;
  min-height: 28px;
  accent-color: #a92d3c;
  cursor: pointer;
}

.p14-seek-range:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.p14-seek-jumps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
}

.p14-seek-jump {
  min-width: 86px;
  min-height: 38px;
  padding-inline: 12px;
}

.p14-favorite-action,
.p14-share-action {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
}

.p14-favorite-action[aria-pressed="true"] {
  border-color: rgba(218, 161, 87, .52);
  background: rgba(218, 161, 87, .08);
}

.p14-recording-return {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding-top: 4px;
}

.p14-return-link {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(214, 170, 100, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .012);
  color: #e9d8c7;
  text-decoration: none;
}

.p14-return-link:hover {
  border-color: rgba(214, 170, 100, .36);
  background: rgba(214, 170, 100, .045);
}

.p14-return-label {
  color: #9e8d80;
  font-size: 11px;
}

.p14-return-link strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.p14-archive-metadata {
  max-width: 930px;
  margin: 22px auto 0;
  padding: 24px;
  border: 1px solid #2d2621;
  border-radius: 24px;
  background: #0f1011;
}

.p14-archive-heading h2 {
  margin: 5px 0 4px;
  font-size: 23px;
}

.p14-archive-heading p {
  margin: 0;
  color: #9f9085;
  font-size: 12px;
}

.p14-detail-meta {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.p14-primary-play:focus-visible,
.p14-seek-range:focus-visible,
.p14-seek-jump:focus-visible,
.p14-favorite-action:focus-visible,
.p14-share-action:focus-visible,
.p14-return-link:focus-visible {
  outline: 2px solid rgba(226, 185, 109, .92);
  outline-offset: 3px;
}

@media (max-width: 650px) {
  .p14-recording-focus {
    margin-top: 10px;
    padding: 18px 14px 20px;
    border-radius: 24px;
  }

  .p14-recording-identity {
    align-items: flex-start;
    gap: 13px;
  }

  .p14-recording-cover-wrap,
  .p14-recording-cover {
    flex-basis: 92px;
    width: 92px;
  }

  .p14-recording-cover { border-radius: 15px; }

  .p14-listen-kicker {
    font-size: 10px;
    margin-bottom: 3px;
  }

  .p14-recording-heading h1 {
    max-width: none;
    font-size: clamp(26px, 7.2vw, 31px);
    line-height: 1.22;
  }

  .p14-recording-human-context {
    gap: 5px;
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.55;
  }

  .p14-listening-stack {
    gap: 10px;
    margin-top: 18px;
  }

  .p14-primary-play {
    min-height: 56px;
    font-size: 17px;
  }

  .p14-seek-panel { padding: 13px 11px; }

  .p14-seek-time {
    grid-template-columns: 58px 1fr 58px;
    gap: 6px;
    font-size: 11px;
  }

  .p14-seek-range {
    min-height: 34px;
    touch-action: manipulation;
  }

  .p14-seek-jump,
  .p14-favorite-action,
  .p14-share-action {
    min-height: 44px;
    touch-action: manipulation;
  }

  .p14-recording-return { grid-template-columns: 1fr; }

  .p14-return-link {
    min-height: 52px;
    touch-action: manipulation;
  }

  .p14-archive-metadata {
    margin-top: 16px;
    padding: 18px 14px;
    border-radius: 20px;
  }

  .p14-detail-meta { grid-template-columns: 1fr; }
}


/* ============================================================
   PHASE 14 UX1A R1 — COMPACT RECORDING IDENTITY
   Keep listening controls strong; stop identity/cover taking space.
   ============================================================ */

.p14-recording-focus {
  max-width: 820px;
  padding: 24px 26px 26px;
}

.p14-recording-identity {
  max-width: 720px;
  margin-inline: auto;
  gap: 14px;
}

.p14-recording-cover-wrap {
  flex: 0 0 86px;
  width: 86px;
}

.p14-recording-cover {
  width: 86px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.p14-recording-heading h1 {
  max-width: none;
  font-size: clamp(28px, 3.1vw, 36px);
  line-height: 1.2;
}

.p14-recording-human-context {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.p14-listening-stack {
  margin-top: 18px;
}

@media (max-width: 650px) {
  .p14-recording-focus {
    padding: 14px 12px 18px;
  }

  .p14-recording-identity {
    gap: 10px;
  }

  .p14-recording-cover-wrap,
  .p14-recording-cover {
    flex-basis: 64px;
    width: 64px;
  }

  .p14-recording-cover {
    border-radius: 11px;
  }

  .p14-recording-heading h1 {
    font-size: clamp(22px, 6vw, 27px);
    line-height: 1.2;
  }

  .p14-recording-human-context {
    margin-top: 4px;
    font-size: 10.5px;
  }

  .p14-listening-stack {
    margin-top: 14px;
  }
}


/* ============================================================
   PHASE 14 UX1A R2 — TRUE COMPACT RECORDING IDENTITY
   Fix inherited v2-cover min-height and keep the header subordinate
   to Play / Seek.
   ============================================================ */

.p14-recording-focus {
  max-width: 790px;
  padding: 20px 22px 24px;
}

.p14-recording-identity {
  max-width: 690px;
  min-height: 0;
  gap: 12px;
}

.p14-recording-cover-wrap {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
}

.p14-recording-cover.v2-cover {
  width: 72px;
  height: 72px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  padding: 7px;
  border-radius: 12px;
}

.p14-recording-cover.v2-cover .release-art-copy {
  display: none;
}

.p14-recording-cover.v2-cover .release-art-gate {
  width: 52%;
  height: 78%;
}

.p14-recording-cover.v2-cover .release-art-orbit-a {
  width: 66px;
  height: 66px;
  right: -25px;
  top: -30px;
}

.p14-recording-cover.v2-cover .release-art-orbit-b {
  width: 38px;
  height: 38px;
  right: -9px;
  top: -16px;
}

.p14-recording-heading h1 {
  font-size: clamp(25px, 2.7vw, 32px);
  line-height: 1.18;
}

.p14-recording-human-context {
  margin-top: 4px;
  font-size: 11px;
}

.p14-listening-stack {
  margin-top: 14px;
}

@media (max-width: 650px) {
  .p14-recording-focus {
    padding: 12px 11px 17px;
  }

  .p14-recording-identity {
    gap: 9px;
  }

  .p14-recording-cover-wrap {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
  }

  .p14-recording-cover.v2-cover {
    width: 54px;
    height: 54px;
    min-height: 0;
    padding: 5px;
    border-radius: 9px;
  }

  .p14-recording-heading h1 {
    font-size: clamp(20px, 5.6vw, 24px);
  }

  .p14-recording-human-context {
    margin-top: 3px;
    font-size: 10px;
  }

  .p14-listening-stack {
    margin-top: 11px;
  }
}


/* ============================================================
   PHASE 14 UX1A R3 — COVERLESS ARCHIVE
   Site-wide rule for archive browsing:
   - no release covers
   - no recording covers
   - reciter portraits remain
   - homepage imagery remains
   ============================================================ */

/* RECITER PAGE — release cards become text-first. */
.p12-release-card.p14-coverless-release-card,
.p12-release-card.p14-coverless-release-card.is-active {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.p14-coverless-release-card .p12-release-card-copy {
  padding: 16px 17px 15px;
}

.p14-coverless-release-card .p12-release-card-copy h3 {
  margin-top: 7px;
}

/* RELEASE PAGE — remove artwork column and shrink the hero substantially. */
.p9-release-hero.v2-release-hero.p14-coverless-release-hero {
  display: block;
  min-height: 0;
  padding: 24px 26px;
  text-align: right;
  background:
    radial-gradient(circle at 10% 30%, rgba(123,29,39,.11), transparent 34%),
    linear-gradient(128deg, #151213 0%, #0c0d0e 72%);
}

.p14-coverless-release-hero .v2-release-hero-copy {
  width: 100%;
  max-width: 780px;
  margin: 0;
}

.p14-coverless-release-hero .p9-release-hero-copy h1 {
  max-width: 22ch;
  margin: 6px 0;
  font-size: clamp(30px, 3.1vw, 40px);
}

.p14-coverless-release-hero .p9-badge-row {
  margin-top: 14px;
}

.p14-coverless-release-hero .p9-actions {
  margin-top: 15px;
}

/* RECORDING PAGE — identity is text only, immediately followed by Play. */
.p14-coverless-recording-identity {
  display: block;
  max-width: 720px;
  margin-inline: auto;
}

.p14-coverless-recording-identity .p14-recording-heading {
  width: 100%;
}

.p14-coverless-recording-identity .p14-recording-heading h1 {
  max-width: none;
  font-size: clamp(25px, 2.7vw, 32px);
}

.p14-coverless-recording-identity + .p14-listening-stack {
  margin-top: 12px;
}

@media (max-width: 650px) {
  .p14-coverless-release-card .p12-release-card-copy {
    padding: 12px 13px 11px;
  }

  .p9-release-hero.v2-release-hero.p14-coverless-release-hero {
    display: block;
    padding: 15px 14px 17px;
    text-align: right;
  }

  .p14-coverless-release-hero .v2-release-hero-copy {
    margin: 0;
  }

  .p14-coverless-release-hero .section-kicker,
  .p14-coverless-release-hero .p9-reciter-text-link {
    margin-inline: 0;
    justify-content: flex-start;
  }

  .p14-coverless-release-hero .p9-release-hero-copy h1 {
    margin: 5px 0;
    font-size: clamp(25px, 7vw, 30px);
  }

  .p14-coverless-release-hero .p9-release-hero-copy .p9-badge-row,
  .p14-coverless-release-hero .p9-actions {
    justify-content: flex-start;
  }

  .p14-coverless-recording-identity .p14-recording-heading h1 {
    font-size: clamp(21px, 5.8vw, 25px);
  }

  .p14-coverless-recording-identity + .p14-listening-stack {
    margin-top: 9px;
  }
}


/* ============================================================
   PHASE 14 UX1A R4 — COMPACT SINGLE-LINE ARCHIVE TITLES
   One-line titles with restrained sizing; full title remains
   available through the element title attribute.
   ============================================================ */

/* Reciter page: release-card titles. */
.p14-coverless-release-card .p12-release-card-copy h3 {
  max-width: 100%;
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p14-coverless-release-card .p12-release-card-copy h3 a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Release page: main release name. */
.p14-coverless-release-hero .p9-release-hero-copy h1 {
  width: 100%;
  max-width: 100%;
  margin: 4px 0;
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Recording page: recording title. */
.p14-coverless-recording-identity .p14-recording-heading h1 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 650px) {
  .p14-coverless-release-card .p12-release-card-copy h3 {
    font-size: 16px;
  }

  .p14-coverless-release-hero .p9-release-hero-copy h1 {
    font-size: clamp(20px, 5.7vw, 24px);
  }

  .p14-coverless-recording-identity .p14-recording-heading h1 {
    font-size: clamp(19px, 5.2vw, 22px);
  }
}


/* ============================================================
   PHASE 14 UX1A R5 — COVERLESS RELEASE HERO BALANCE
   Remove the visual "ghost" of the old cover slot and use the
   header width for useful title/context/actions instead.
   ============================================================ */

.p9-release-hero.v2-release-hero.p14-coverless-release-hero {
  max-width: 820px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: 22px 24px;
  background: linear-gradient(128deg, #141112 0%, #0c0d0e 74%);
}

.p14-coverless-release-hero .v2-hero-ornament {
  display: none;
}

.p14-coverless-release-hero .v2-release-hero-copy {
  display: contents;
}

.p14-coverless-release-hero .section-kicker,
.p14-coverless-release-hero .p9-release-hero-copy h1,
.p14-coverless-release-hero .p9-reciter-text-link,
.p14-coverless-release-hero .p9-badge-row {
  grid-column: 1;
}

.p14-coverless-release-hero .p9-actions {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  margin: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.p14-coverless-release-hero .p9-release-hero-copy h1 {
  margin: 4px 0;
}

.p14-coverless-release-hero .p9-badge-row {
  margin-top: 8px;
}

@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero.p14-coverless-release-hero {
    display: block;
    max-width: none;
    padding: 14px 13px 15px;
  }

  .p14-coverless-release-hero .v2-release-hero-copy {
    display: block;
  }

  .p14-coverless-release-hero .p9-actions {
    margin-top: 11px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .p14-coverless-release-hero .p9-badge-row {
    margin-top: 8px;
  }
}


/* ============================================================
   PHASE 14 UX1A R6 — UNIFIED RELEASE PROPORTIONS
   ============================================================ */

.p9-release-hero.v2-release-hero.p14-coverless-release-hero {
  width: 100%;
  max-width: none;
  min-height: 0;
  box-sizing: border-box;
  display: block;
  padding: 20px 22px 18px;
  border-radius: 20px;
  background: #0f1011;
  border-color: #3b2c25;
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
}

.p14-coverless-release-hero .v2-hero-ornament {
  display: none;
}

.p14-coverless-release-hero .v2-release-hero-copy {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "kicker kicker"
    "title title"
    "reciter reciter"
    "badges actions";
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
}

.p14-coverless-release-hero .v2-archive-eyebrow {
  grid-area: eyebrow;
  margin: 0;
}

.p14-coverless-release-hero .section-kicker {
  grid-area: kicker;
  margin-top: 4px;
}

.p14-coverless-release-hero .p9-release-hero-copy h1 {
  grid-area: title;
  margin: 2px 0 1px;
  width: 100%;
  max-width: 100%;
  font-size: clamp(22px, 1.85vw, 28px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p14-coverless-release-hero .p9-reciter-text-link {
  grid-area: reciter;
  margin-top: 1px;
}

.p14-coverless-release-hero .p9-badge-row {
  grid-area: badges;
  margin-top: 10px;
  justify-content: flex-start;
  min-width: 0;
}

.p14-coverless-release-hero .p9-actions {
  grid-area: actions;
  grid-row: auto;
  margin: 10px 0 0;
  justify-content: flex-end;
  align-self: center;
  flex-wrap: nowrap;
}

.p14-coverless-release-hero .p9-actions .primary-button,
.p14-coverless-release-hero .p9-actions .secondary-button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 11px;
}

.p13-recording-selection {
  margin-top: 18px;
}

.p13-recording-selection .premium-track-list {
  border-radius: 20px;
}

.p13-recording-selection-header {
  margin-bottom: 14px;
}

@media (max-width: 650px) {
  .p9-release-hero.v2-release-hero.p14-coverless-release-hero {
    padding: 14px 13px 14px;
    border-radius: 17px;
  }

  .p14-coverless-release-hero .v2-release-hero-copy {
    display: block;
  }

  .p14-coverless-release-hero .p9-release-hero-copy h1 {
    margin: 4px 0 2px;
    font-size: clamp(19px, 5.4vw, 23px);
  }

  .p14-coverless-release-hero .p9-badge-row {
    margin-top: 8px;
  }

  .p14-coverless-release-hero .p9-actions {
    grid-row: auto;
    margin-top: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .p14-coverless-release-hero .p9-actions .primary-button,
  .p14-coverless-release-hero .p9-actions .secondary-button {
    min-height: 40px;
  }

  .p13-recording-selection {
    margin-top: 14px;
  }
}


/* ============================================================
   PHASE 14 UX1A R7 — RECORDING PAGE PROPORTION REBALANCE
   Listening card and archive metadata share one width.
   Desktop becomes wider and shorter; mobile remains stacked.
   ============================================================ */

.p14-recording-focus,
.p14-archive-metadata {
  width: 100%;
  max-width: 820px;
  box-sizing: border-box;
}

.p14-recording-focus {
  padding: 20px 22px 22px;
  border-radius: 22px;
}

.p14-coverless-recording-identity {
  max-width: none;
}

.p14-coverless-recording-identity .p14-recording-heading h1 {
  font-size: clamp(21px, 1.75vw, 27px);
}

.p14-recording-human-context {
  margin-top: 3px;
}

.p14-coverless-recording-identity + .p14-listening-stack,
.p14-listening-stack {
  max-width: none;
  margin-top: 11px;
  gap: 9px;
}

.p14-primary-play {
  min-height: 52px;
  border-radius: 13px;
  font-size: 17px;
}

.p14-seek-panel {
  padding: 12px 14px 11px;
  border-radius: 15px;
}

.p14-seek-time {
  margin-bottom: 5px;
}

.p14-seek-jumps {
  margin-top: 5px;
}

.p14-seek-jump {
  min-height: 36px;
}

.p14-recording-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.p14-recording-secondary-actions .p14-favorite-action,
.p14-recording-secondary-actions .p14-share-action {
  min-height: 44px;
}

.p14-recording-return {
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.p14-return-link {
  min-height: 48px;
  padding: 10px 13px;
}

.p14-archive-metadata {
  margin-top: 16px;
  padding: 20px 22px;
  border-radius: 22px;
}

.p14-archive-heading h2 {
  font-size: 21px;
}

.p14-detail-meta {
  margin-top: 12px;
}

@media (max-width: 650px) {
  .p14-recording-focus,
  .p14-archive-metadata {
    max-width: none;
  }

  .p14-recording-focus {
    padding: 13px 12px 16px;
    border-radius: 18px;
  }

  .p14-coverless-recording-identity .p14-recording-heading h1 {
    font-size: clamp(19px, 5.2vw, 22px);
  }

  .p14-primary-play {
    min-height: 52px;
  }

  .p14-seek-panel {
    padding: 11px 10px 10px;
  }

  .p14-recording-secondary-actions {
    grid-template-columns: 1fr;
  }

  .p14-recording-return {
    grid-template-columns: 1fr;
  }

  .p14-archive-metadata {
    margin-top: 13px;
    padding: 16px 13px;
    border-radius: 18px;
  }
}


/* ============================================================
   PHASE 14 UX1A R9 — CLEAN RELEASE HEADER
   New component. No legacy p9/v2 hero classes are used.
   ============================================================ */

.p14-release-header {
  width: 100%;
  box-sizing: border-box;
  padding: 17px 20px 16px;
  border: 1px solid #3b2c25;
  border-radius: 20px;
  background: #0f1011;
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
}

.p14-release-identity {
  min-width: 0;
}

.p14-release-identity h1 {
  width: 100%;
  margin: 0;
  color: #f5eadc;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p14-release-reciter {
  display: inline-flex;
  margin-top: 3px;
  color: #d4a75f;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.p14-release-reciter:hover {
  text-decoration: underline;
}

.p14-release-toolbar {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.p14-release-badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.p14-release-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.p14-release-actions .primary-button,
.p14-release-actions .secondary-button {
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 11px;
}

.p13-recording-selection {
  margin-top: 15px;
}

@media (max-width: 650px) {
  .p14-release-header {
    padding: 13px 12px 14px;
    border-radius: 17px;
  }

  .p14-release-identity h1 {
    font-size: clamp(19px, 5.4vw, 23px);
  }

  .p14-release-reciter {
    font-size: 11px;
  }

  .p14-release-toolbar {
    margin-top: 10px;
    gap: 8px;
  }

  .p14-release-actions {
    width: 100%;
  }

  .p14-release-actions .primary-button,
  .p14-release-actions .secondary-button {
    min-height: 42px;
  }

  .p13-recording-selection {
    margin-top: 12px;
  }
}


/* ============================================================
   PHASE 14 UX1A R10 — RECITER ACTIVE RELEASE CARD BALANCE
   Coverless active releases remain full-width, but their width
   is now used by identity + listening status/actions.
   ============================================================ */

.p14-release-card-identity,
.p14-release-card-status {
  min-width: 0;
}

.p14-release-card-status {
  margin-top: auto;
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  align-items: center;
  gap: 20px;
  padding: 13px 16px 12px;
}

.p12-release-card.p14-coverless-release-card.is-active .p14-release-card-status {
  margin-top: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid rgba(196,137,73,.18);
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-listening {
  margin-top: 0;
  gap: 5px;
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-listening small {
  display: none;
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-actions {
  margin-top: 8px;
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-progress {
  height: 5px;
}

.p12-release-card.p14-coverless-release-card.is-active .p12-release-card-copy h3 {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .p12-release-card.p14-coverless-release-card.is-active .p12-release-card-copy {
    display: flex;
    gap: 0;
    padding: 13px 14px 12px;
  }

  .p12-release-card.p14-coverless-release-card.is-active .p14-release-card-status {
    margin-top: auto;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .p12-release-card.p14-coverless-release-card.is-active .p12-release-listening small {
    display: block;
  }
}


/* ============================================================
   PHASE 14 UX1A R11 — RECORDING REFRESH / HYDRATION FIX
   The early Recording shell is coverless and cannot overwrite
   the hydrated Phase14 Recording page after refresh.
   ============================================================ */

.r23-recording-preboot.p14-recording-focus {
  max-width: 820px;
  min-height: 0;
  padding: 20px 22px 22px;
}

.r23-recording-preboot .p14-recording-heading h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.r23-recording-preboot-loading {
  height: 4px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

.r23-recording-preboot-loading span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(150,36,51,.25), rgba(184,49,65,.9), rgba(150,36,51,.25));
  animation: p14-preboot-loading 1.15s ease-in-out infinite alternate;
}

@keyframes p14-preboot-loading {
  from { transform: translateX(0); }
  to { transform: translateX(165%); }
}

@media (prefers-reduced-motion: reduce) {
  .r23-recording-preboot-loading span {
    animation: none;
    width: 100%;
    opacity: .55;
  }
}

@media (max-width: 650px) {
  .r23-recording-preboot.p14-recording-focus {
    padding: 13px 12px 16px;
  }

  .r23-recording-preboot-loading {
    margin-top: 10px;
  }
}

/* PHASE14UX1A R12 — robust clipboard fallback */
.p14-copy-helper { pointer-events: none; }


/* ============================================================
   PHASE 14 UX1A R13 — MOBILE NATIVE FILTER SELECTS
   Year and occasion use the browser/OS native select on mobile.
   This prevents long inline option panels from consuming viewport
   height. The native picker supplies its own scrolling.
   ============================================================ */

@media (max-width: 560px) {
  .p12-release-control select[data-release-filter] {
    display: block;
    min-height: 40px;
    font-size: 9.5px;
  }

  .p12-release-mobile-trigger,
  .p12-release-mobile-panel {
    display: none !important;
  }
}


/* ============================================================
   PHASE 15 UX1A — SEARCH INTELLIGENCE FOUNDATION
   Behavior-first: tolerant Arabic matching, four real groups,
   visible match reasons, and useful empty-search discovery.
   ============================================================ */

.search-result-section-head h2 small {
  margin-inline-start: 5px;
  color: #8f837b;
  font-size: .58em;
  font-weight: 700;
}

.search-match-reason {
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  color: #c9a76f;
  font-size: 9px;
  line-height: 1.45;
  white-space: normal;
}

.search-track-row .search-match-reason {
  display: block;
}

.search-entity-card .search-match-reason {
  padding-inline-end: 4px;
  color: #b99a6b;
}

.search-intelligence-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(190,139,72,.22);
  border-radius: 11px;
  background: rgba(69,45,31,.10);
  color: #9f9188;
  font-size: 10px;
  line-height: 1.65;
}

.search-intelligence-note strong {
  color: #d2ae73;
}

.search-empty-discovery {
  margin-top: 14px;
  padding: 22px;
  border: 1px solid #382d28;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 8%, rgba(117,35,42,.12), transparent 34%),
    #101112;
}

.search-empty-intro h2 {
  margin: 4px 0 7px;
  color: #f1e3d3;
  font-size: clamp(20px, 2.4vw, 28px);
}

.search-empty-intro p {
  max-width: 720px;
  margin: 0;
  color: #aa9c93;
  line-height: 1.75;
}

.search-empty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}

.search-empty-group,
.search-empty-examples {
  min-width: 0;
  padding: 13px;
  border: 1px solid #302824;
  border-radius: 13px;
  background: #0d0e0f;
}

.search-empty-group > strong,
.search-empty-examples > strong {
  display: block;
  margin-bottom: 8px;
  color: #d7c0a5;
  font-size: 11px;
}

.search-empty-examples {
  margin-top: 12px;
}

.search-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.search-suggestion-chips a {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #44352e;
  border-radius: 999px;
  background: #121111;
  color: #d1b48c;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 10px;
}

.search-suggestion-chips a:hover {
  border-color: rgba(210,166,99,.58);
  color: #f1d4a8;
}

.search-subject-card {
  border-color: rgba(117,91,58,.34);
}

@media (max-width: 650px) {
  .search-empty-discovery {
    padding: 17px 14px;
  }

  .search-empty-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .search-suggestion-chips {
    gap: 5px;
  }

  .search-suggestion-chips a {
    min-height: 38px;
    padding-inline: 11px;
  }

  .search-intelligence-note {
    font-size: 9.5px;
  }

  .search-match-reason {
    font-size: 8.5px;
  }
}


/* PHASE15UX1A R3 — No-results recovery suggestions */
.search-no-results-help .search-suggestion-chips {
  margin-top: 10px;
}

.search-no-results-help .search-suggestion-chips a {
  min-height: 34px;
}


/* ============================================================
   PHASE 15 UX1B — LIVE SEARCH SUGGESTIONS
   Behavior-first autocomplete using the Phase15 smart matcher.
   ============================================================ */

.live-search-anchor {
  position: relative;
}

.header-search.live-search-anchor {
  overflow: visible;
  z-index: 70;
}

.live-search-popover {
  position: absolute;
  z-index: 140;
  top: calc(100% + 8px);
  inset-inline: 0;
  max-height: min(480px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(214,170,100,.30);
  border-radius: 16px;
  background: #0d0e0f;
  box-shadow: 0 18px 50px rgba(0,0,0,.48);
  color: #f1e3d3;
  text-align: right;
}

.live-search-popover[hidden] {
  display: none !important;
}

.live-search-header {
  width: min(480px, calc(100vw - 20px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.live-search-group + .live-search-group {
  border-top: 1px solid #2d2622;
}

.live-search-group-label {
  padding: 8px 12px 5px;
  color: #c9a76f;
  font-size: 9px;
  font-weight: 800;
}

.live-search-group-options {
  display: grid;
}

.live-search-option {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 8px 11px;
  border-top: 1px solid rgba(255,255,255,.035);
  color: #e9ddd0;
  text-decoration: none;
}

.live-search-option:first-child {
  border-top: 0;
}

.live-search-option:hover,
.live-search-option[aria-selected="true"] {
  background: rgba(125,35,47,.20);
  outline: none;
}

.live-search-kind {
  min-width: 46px;
  padding: 4px 6px;
  border: 1px solid #49352b;
  border-radius: 999px;
  color: #c9a76f;
  font-size: 8px;
  text-align: center;
}

.live-search-option-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.live-search-option-copy strong {
  overflow: hidden;
  color: #f1e3d3;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-search-option-copy > small {
  overflow: hidden;
  color: #968981;
  font-size: 8.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-search-option-copy .live-search-reason {
  color: #b99a6b;
}

.live-search-arrow {
  color: #b98a52;
  font-size: 13px;
}

.live-search-all {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-top: 1px solid rgba(214,170,100,.26);
  background: #151313;
  color: #e3bf84;
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
}

.live-search-all:hover,
.live-search-all[aria-selected="true"] {
  background: #211719;
  color: #f1cf98;
}

.live-search-loading,
.live-search-empty {
  display: grid;
  gap: 3px;
  padding: 14px 12px;
  color: #b7aaa1;
  font-size: 10px;
}

.live-search-empty strong {
  color: #e0cfbe;
}

.live-search-empty small {
  color: #8f837b;
}

.live-search-popover mark.search-match-highlight {
  padding: 0 1px;
}

@media (max-width: 650px) {
  .live-search-popover {
    max-height: min(430px, calc(100vh - 105px));
    border-radius: 13px;
  }

  .live-search-header {
    width: min(380px, calc(100vw - 14px));
  }

  .live-search-option {
    min-height: 58px;
    padding: 9px 10px;
  }

  .live-search-kind {
    min-width: 42px;
  }

  .live-search-option-copy strong {
    font-size: 10.5px;
  }

  .live-search-page,
  .live-search-hero {
    width: 100%;
  }
}


/* ============================================================
   PHASE15UX1B R1 — HEADER-FIRST SEARCH
   Homepage no longer duplicates the live-search input.
   ============================================================ */

.p15-home-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 19px;
}

.p15-home-paths a,
.p15-home-paths > span {
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid rgba(214,170,100,.30);
  border-radius: 999px;
  background: rgba(11,12,13,.70);
  color: #dfbe8a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.p15-home-paths a:hover {
  border-color: rgba(225,180,108,.58);
  background: rgba(82,43,31,.28);
  color: #f0d4a8;
}

.p11-listen-hero .p15-home-paths + .hero-footnote {
  margin-top: 13px;
}

.r2-preboot-paths > span {
  opacity: .82;
}

@media (max-width: 560px) {
  .p15-home-paths {
    gap: 7px;
    margin-top: 14px;
  }

  .p15-home-paths a,
  .p15-home-paths > span {
    min-height: 38px;
    flex: 1 1 0;
    padding-inline: 10px;
    font-size: 10px;
  }
}


/* ============================================================
   PHASE15UX1B R2 — MOBILE HEADER WIDTH / LIVE SEARCH FIX
   ============================================================ */

.header-search.live-search-anchor {
  min-width: 0;
  max-width: 100%;
}

.header-search.live-search-anchor input {
  min-width: 0;
  width: 100%;
}

@media (max-width: 650px) {
  .header-inner {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .header-search.live-search-anchor {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .live-search-header {
    position: fixed;
    top: 62px;
    left: 7px;
    right: 7px;
    width: auto;
    max-width: none;
    transform: none;
  }
}


/* ============================================================
   PHASE17UX1A — LISTENING CONTINUITY
   One listening history, exact resume positions, durable completion.
   ============================================================ */

.p17-listening-card[data-listening-state="partial"],
.p17-listening-card[data-listening-state="playing"] {
  border-color: rgba(192, 128, 55, .48);
}

.p17-listening-card[data-listening-state="completed"] {
  border-color: rgba(126, 145, 103, .34);
}

.p17-listening-card-state {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.p17-listening-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  font-size: .82rem;
  color: var(--muted);
}

.p17-listening-state b {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.p17-listening-state.is-partial,
.p17-listening-state.is-playing {
  color: var(--accent);
  font-weight: 700;
}

.p17-listening-state.is-completed {
  color: #a9b798;
  font-weight: 700;
}

.p17-library-play {
  min-width: 128px;
}

.p17-recording-complete,
.p17-recording-resume-note {
  margin-top: -2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  font-size: .84rem;
  color: var(--muted);
}

.p17-recording-complete {
  color: #b8c7a9;
}

.p17-recording-resume-note b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 650px) {
  .p17-library-play {
    min-width: 0;
    width: 100%;
  }

  .p17-listening-state {
    font-size: .8rem;
  }
}

/* ============================================================
   PHASE18UX1B — PERSISTENT PLAYER VISUAL HIERARCHY
   Visual/presentation-only refinement. Playback, queue, API and
   Phase17 listening-continuity state logic remain unchanged.
   Priority: title > reciter > ±10/playback > progress > utilities.
   ============================================================ */

/* Give the recording identity enough space and prevent utility controls
   from stealing width from the title. */
.player-track {
  min-width: 0;
  align-self: center;
}

.player-title-button {
  min-width: 0;
}

.player-title-button strong {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-weight: 800;
  letter-spacing: .005em;
}

.player-title-button span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Main playback controls own the strongest visual weight. */
.player-controls {
  isolation: isolate;
}

#player-rewind,
#player-forward {
  display: grid;
  place-items: center;
  font-weight: 850;
  color: #f0e2d2;
  background: #211d1d;
  border: 1px solid #5a4135;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}

#player-rewind:hover,
#player-forward:hover {
  color: #fff4e7;
  background: #2b2020;
  border-color: #8b6140;
}

#player-prev,
#player-next {
  opacity: .55;
  transform: scale(.88);
}

#player-prev:hover,
#player-next:hover {
  opacity: .85;
}

.player-play {
  font-weight: 900;
  box-shadow: 0 9px 24px rgba(117,25,39,.34), 0 0 0 1px rgba(255,255,255,.035) inset;
}

/* Share/mute remain available but intentionally tertiary. */
.player-actions {
  opacity: .72;
  align-items: center;
}

.player-actions .icon-button {
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #b7a79b;
  background: #111112;
  border-color: #382c27;
  box-shadow: none;
}

.player-actions .icon-button:hover,
.player-actions .icon-button:focus-visible {
  opacity: 1;
  color: #dbc7b6;
  background: #181516;
  border-color: #5a4135;
}

/* Desktop: identity gets the largest guaranteed column; playback is bold;
   progress is clear but subordinate; utilities stay compact. */
@media (min-width: 901px) {
  :root { --player-height: 96px; }

  .player-inner {
    min-height: var(--player-height);
    grid-template-columns: minmax(260px, 1.2fr) auto minmax(260px, 1fr) auto;
    gap: 18px;
    padding-block: 10px;
  }

  .player-title-button strong {
    font-size: 15px;
    line-height: 1.42;
  }

  .player-title-button span {
    margin-top: 3px;
    font-size: 11px;
    color: #9d8f86;
  }

  .player-controls { gap: 6px; }

  #player-rewind,
  #player-forward {
    width: 44px;
    height: 44px;
    font-size: 12px;
  }

  #player-prev,
  #player-next {
    width: 30px;
    height: 30px;
  }

  .player-play {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }

  .player-waveform { height: 34px; }
  .time { font-size: 10px; }
}

/* Tablet: retain the hierarchy instead of compressing everything into the
   same visual row. */
@media (min-width: 651px) and (max-width: 900px) {
  :root { --player-height: 184px; }

  .player-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "track track"
      "controls controls"
      "timeline timeline"
      "actions actions";
    gap: 5px 10px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  }

  .player-track { grid-area: track; padding-inline: 2px; }
  .player-controls { grid-area: controls; justify-content: center; }
  .player-timeline { grid-area: timeline; }
  .player-actions { grid-area: actions; justify-content: center; }

  .player-title-button strong { font-size: 14px; line-height: 1.4; }
  .player-title-button span { margin-top: 2px; font-size: 10px; }

  #player-rewind,
  #player-forward { width: 44px; height: 44px; font-size: 12px; }
  #player-prev,
  #player-next { width: 32px; height: 32px; }
  .player-play { width: 54px; height: 54px; font-size: 19px; }
  .player-waveform { height: 30px; }
}

/* Mobile reading order is deliberate:
   title -> reciter -> playback -> progress -> secondary actions. */
@media (max-width: 650px) {
  :root { --player-height: 204px; }
  body.has-player { padding-bottom: calc(var(--player-height) + 24px); }

  .player-inner {
    min-height: var(--player-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "track"
      "controls"
      "timeline"
      "actions";
    gap: 4px;
    padding: 9px 11px calc(8px + env(safe-area-inset-bottom));
  }

  .player-track {
    grid-area: track;
    width: 100%;
    padding: 0 2px;
  }

  .player-title-button strong {
    font-size: 14px;
    line-height: 1.42;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .player-title-button span {
    margin-top: 2px;
    font-size: 10px;
    color: #9d8f86;
  }

  .player-controls {
    grid-area: controls;
    justify-content: center;
    gap: 6px;
    min-height: 56px;
  }

  #player-rewind,
  #player-forward {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 12px;
  }

  #player-prev,
  #player-next {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .player-play {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    font-size: 20px;
  }

  .player-timeline {
    grid-area: timeline;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    width: 100%;
  }

  .player-waveform { height: 28px; }
  .time { font-size: 9px; }

  .player-actions {
    grid-area: actions;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
  }

  .player-actions .icon-button {
    min-width: 30px;
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  :root { --player-height: 202px; }

  .player-title-button strong { font-size: 13px; }
  .player-controls { gap: 4px; }

  #player-rewind,
  #player-forward {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .player-play {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }
}



/* ============================================================
   PHASE18UX1C — MOBILE THUMB USABILITY
   390px-first touch spacing, player-safe content inset, and
   search-keyboard stability. Playback/history logic is unchanged.
   ============================================================ */

:root {
  --player-occupied-height: var(--player-height);
  --visual-viewport-height: 100vh;
  --visual-viewport-offset-top: 0px;
}

/* Measure the real fixed player and reserve that exact space below
   content. This prevents the final recording rows from sitting under it. */
body.has-player {
  padding-bottom: 24px;
}

body.has-player .main-content {
  padding-bottom: calc(64px + var(--player-occupied-height) + 24px);
}

body.has-player .toast {
  bottom: calc(var(--player-occupied-height) + 16px);
}

@media (max-width: 650px), (hover: none) and (pointer: coarse) {
  /* Comfortable thumb targets: important controls are 44px+ and are
     separated enough to reduce accidental adjacent taps. */
  :where(button, .header-utility-button, .library-nav-button, .queue-button,
    .site-nav a, .primary-button, .secondary-button, .pagination button,
    .search-type-filter, .live-search-all) {
    min-height: 44px;
    touch-action: manipulation;
  }

  .header-inner {
    gap: 8px;
    padding-inline: 10px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-utility-button,
  .library-nav-button,
  .queue-button,
  .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .header-search {
    min-height: 46px;
  }

  .header-search input {
    min-height: 44px;
    padding-block: 10px;
    font-size: 16px; /* P19UX1C R1: prevents iOS focus zoom */
  }

  .header-search button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }

  .site-nav-inner {
    min-height: 48px;
    gap: 4px;
  }

  .site-nav a {
    min-height: 44px;
    padding: 10px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Recording rows: both primary actions are full thumb targets. */
  .premium-track-row {
    grid-template-columns: 26px 44px minmax(0, 1fr) 44px;
    gap: 10px;
    min-height: 72px;
    padding: 10px 8px;
  }

  .premium-track-row .track-round-play,
  .premium-track-row .track-favorite-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .premium-track-row .track-title a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .p9-actions,
  .page-title-actions,
  .pagination {
    gap: 10px;
  }

  .search-panel form {
    gap: 10px;
  }

  .search-panel input {
    min-height: 48px;
    font-size: 16px; /* prevents iOS focus zoom */
  }

  .search-panel .primary-button {
    min-width: 64px;
    min-height: 48px;
  }

  .search-panel-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-filter-strip {
    width: 100%;
    display: block;
  }

  .search-filter-label {
    display: block;
    margin-bottom: 7px;
  }

  .search-type-filters {
    width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
  }

  .search-type-filters::-webkit-scrollbar { display: none; }

  .search-type-filter {
    min-height: 44px;
    padding-inline: 13px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .live-search-option {
    min-height: 60px;
    padding-block: 10px;
  }

  .live-search-all {
    min-height: 48px;
  }

  /* The suggestion list follows the visual viewport rather than the
     layout viewport, so the on-screen keyboard cannot hide its footer. */
  .live-search-popover {
    max-height: max(132px, calc(var(--visual-viewport-height) - 92px));
  }

  .live-search-header {
    top: calc(var(--visual-viewport-offset-top) + 62px);
  }

  /* 390px player: generous spacing while retaining the UX1B hierarchy. */
  :root {
    --player-height: 166px;
  }

  .player-inner {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 5px 10px;
  }

  .player-title-button {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .player-actions {
    gap: 8px;
  }

  .player-actions .icon-button,
  .player-actions .player-control {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .player-controls {
    gap: 8px;
  }

  #player-prev,
  #player-next {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    transform: none;
    font-size: 12px;
  }

  #player-rewind,
  #player-forward {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  #player-play {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    font-size: 19px;
  }

  /* Focusing Search should not make the persistent player jump above
     the keyboard. Audio keeps playing; only the fixed surface retreats. */
  html.search-input-active .player-shell {
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
    opacity: 0;
    pointer-events: none;
  }

  .player-shell {
    transition: transform .16s ease, opacity .16s ease;
  }

  html.search-input-active .live-search-popover {
    max-height: max(120px, calc(var(--visual-viewport-height) - 82px));
  }
}

@media (max-width: 390px) {
  .header-inner {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .site-nav a {
    font-size: 12px;
    padding-inline: 8px;
  }

  .player-controls {
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .player-controls { gap: 5px; }
  #player-prev, #player-next { width: 42px; height: 44px; flex-basis: 42px; }
  #player-rewind, #player-forward { width: 46px; height: 48px; flex-basis: 46px; }
  #player-play { width: 54px; height: 54px; flex-basis: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .player-shell { transition: none !important; }
}

/* ============================================================
   PHASE18UX1D — COMPACT BREADCRUMBS + LOCATION AWARENESS
   Home → Reciter → Release → Recording stays visible without
   competing with the page title. Direct recording arrivals get
   explicit reciter/release context before playback controls.
   ============================================================ */
.breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin: 0 0 12px;
  padding: 2px 0 4px;
  color: #96897e;
  font-size: 12px;
  line-height: 1.45;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs .breadcrumb-home,
.breadcrumbs .breadcrumb-context,
.breadcrumbs .breadcrumb-current {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs .breadcrumb-home {
  flex: 0 0 auto;
  max-width: none;
  color: #b6a99e;
  font-weight: 650;
}
.breadcrumbs a.breadcrumb-context {
  color: #b9aaa0;
  text-decoration: none;
  text-underline-offset: 3px;
}
.breadcrumbs a.breadcrumb-home:hover,
.breadcrumbs a.breadcrumb-context:hover {
  color: var(--gold-bright);
  text-decoration: underline;
}
.breadcrumbs .breadcrumb-current {
  color: #ddd0c3;
  font-weight: 700;
}
.breadcrumbs .breadcrumb-separator {
  flex: 0 0 auto;
  color: #655a52;
  opacity: .8;
  font-size: 11px;
}

.p18-location-aware-recording .p14-recording-heading {
  min-width: 0;
}
.p18-location-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .01em;
}
.p18-recording-location {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 7px;
  margin-top: 8px;
  color: #b6a89c;
}
.p18-recording-location .p18-location-label {
  color: #81756d;
  font-size: 10.5px;
  font-weight: 700;
}
.p18-recording-location a,
.p18-recording-location [data-location-reciter],
.p18-recording-location [data-location-release] {
  color: #d7c4ad;
  font-weight: 750;
}
.p18-recording-location a {
  text-decoration: underline;
  text-decoration-color: rgba(193, 151, 92, .38);
  text-underline-offset: 4px;
}
.p18-recording-location a:hover {
  color: var(--gold-bright);
  text-decoration-color: currentColor;
}
.p18-location-divider {
  color: #62574f;
  margin-inline: 2px;
}

@media (max-width: 650px) {
  .breadcrumbs {
    gap: 4px;
    margin-bottom: 9px;
    padding-bottom: 3px;
    font-size: 11px;
  }
  .breadcrumbs .breadcrumb-context { max-width: 11ch; }
  .breadcrumbs .breadcrumb-current { max-width: 13ch; }
  .breadcrumbs .breadcrumb-separator { font-size: 10px; }

  .p18-location-eyebrow {
    margin-bottom: 4px;
    font-size: 10px;
  }
  .p18-recording-location {
    gap: 4px 6px;
    margin-top: 7px;
    line-height: 1.65;
  }
  .p18-recording-location .p18-location-label {
    font-size: 10px;
  }
}


/* ============================================================
   PHASE18UX1E — PLAIN ARABIC + QUIET ARCHIVAL REFERENCES
   Public language favors listener-friendly Arabic. Technical IDs remain
   available as tertiary references and never compete with title/context.
   ============================================================ */
.p18e-reference-item {
  opacity: .72;
}
.p18e-reference-item > span {
  color: #817870 !important;
  font-size: 10px !important;
}
.lat-id.p18e-archive-reference {
  color: #9b9086 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  line-height: 1.4;
}
.search-lat-match {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-inline-start: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #8e847b;
  background: transparent;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  direction: rtl;
}
.search-lat-match .search-lat-label {
  color: #786f68;
  font-size: 9.5px;
  font-weight: 600;
}
.search-lat-match [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
.search-lat-match .search-match-highlight {
  color: #a99a89;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 650px) {
  .lat-id.p18e-archive-reference { font-size: 11px !important; }
  .search-lat-match { font-size: 9.5px; }
}

/* ============================================================
   PHASE18UX1F — USEFUL EMPTY STATES
   Empty states explain what belongs here and provide a clear
   next step without changing the established visual language.
   ============================================================ */

.empty-state.p18f-useful-empty {
  flex-direction: column;
  gap: 16px;
  min-height: 178px;
  padding: 26px 22px;
}

.p18f-empty-copy {
  width: min(100%, 580px);
  margin-inline: auto;
}

.p18f-empty-title {
  display: block;
  margin: 0 0 6px;
  color: #eadfd7;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.p18f-empty-copy p {
  margin: 0;
  color: #aaa097;
  font-size: 13px;
  line-height: 1.8;
}

.p18f-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  width: 100%;
}

.p18f-empty-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 18px;
  text-decoration: none;
}

.queue-list .p18f-useful-empty {
  min-height: 220px;
  margin: 8px 0;
}

@media (max-width: 650px) {
  .empty-state.p18f-useful-empty {
    min-height: 158px;
    gap: 14px;
    padding: 21px 16px;
  }

  .p18f-empty-title {
    font-size: 15px;
  }

  .p18f-empty-copy p {
    font-size: 12.5px;
  }

  .p18f-empty-actions {
    width: min(100%, 320px);
    flex-direction: column;
    gap: 8px;
  }

  .p18f-empty-action {
    width: 100%;
    min-height: 46px;
  }

  .queue-list .p18f-useful-empty {
    min-height: 190px;
  }
}


/* ============================================================
   PHASE18UX1G — MANUAL ACCESSIBILITY + KEYBOARD USABILITY
   Keyboard-first focus, screen-reader-friendly structure, 200%
   reflow protection, and high-contrast small text.
   ============================================================ */
:root {
  --a11y-focus: #ffd98f;
}

/* A consistent focus ring that remains visible against both burgundy
   controls and the near-black page surfaces. */
:where(a, button, input, select, textarea, [role="slider"], [tabindex]):focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #070809, 0 0 0 6px rgba(255, 217, 143, .24) !important;
}

.skip-link:focus-visible {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: #fff3d7;
  color: #15100b;
  border: 2px solid #15100b;
  font-weight: 800;
}

/* Programmatic route focus must not be obscured by the sticky header. */
.main-content h1[tabindex="-1"],
.main-content section[tabindex="-1"],
.main-content[tabindex="-1"] {
  scroll-margin-top: 126px;
}

/* Keep tertiary information visually quiet through size/weight, not by
   dropping below comfortable text contrast. */
.p18-recording-location .p18-location-label,
.p18e-reference-item > span {
  color: #a99c91 !important;
}
.p18e-reference-item { opacity: 1 !important; }
.lat-id.p18e-archive-reference { color: #b6aa9e !important; }
.search-lat-match { color: #aaa098 !important; }
.search-lat-match .search-lat-label { color: #9d938b !important; }

/* Semantic breadcrumb list retains the compact single-line design while
   preserving logical Home → context → current DOM order for screen readers. */
.breadcrumbs > ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: max-content;
}
.breadcrumbs > ol > li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

/* The queue behaves like a modal dialog for keyboard users. */
.queue-panel[role="dialog"]:focus-within {
  border-color: #a67d4c;
}

/* 200% desktop zoom is roughly a 640px CSS viewport on a 1280px screen.
   Allow essential page identity to wrap instead of being permanently
   ellipsized when the viewport crosses that range. */
@media (max-width: 700px) {
  .main-content { width: min(100% - 24px, 1280px); }

  .p14-coverless-recording-identity .p14-recording-heading h1,
  .p14-coverless-release-hero .p9-release-hero-copy h1,
  .p9-reciter-hero-copy h1,
  .page-title h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .breadcrumbs > ol { gap: 4px; }
  .breadcrumbs > ol > li { gap: 4px; }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #eadfd3;
    --border: #9b744d;
    --border-strong: #c99a61;
  }
  .p18-recording-location .p18-location-label,
  .p18e-reference-item > span,
  .lat-id.p18e-archive-reference,
  .search-lat-match,
  .search-lat-match .search-lat-label { color: #eadfd3 !important; }
  .breadcrumb-separator { color: #b7a89b !important; opacity: 1 !important; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [role="slider"], [tabindex]):focus-visible {
    outline: 3px solid Highlight !important;
    box-shadow: none !important;
  }
  .player-shell, .queue-panel, .empty-state, .search-panel, .premium-track-row {
    border: 1px solid CanvasText;
  }
}


/* ============================================================
   PHASE18UX1H — FOCUSED ARCHIVE RESTRAINT
   No new user-facing feature surface. Contextual controls appear
   only when they answer an active listening need.
   ============================================================ */
#queue-toggle[hidden],
#queue-count[hidden],
#player-prev[hidden],
#player-next[hidden] {
  display: none !important;
}

#player-prev:disabled,
#player-next:disabled {
  opacity: .24 !important;
  cursor: default;
  box-shadow: none;
}


/* ============================================================
   PHASE18UX1I — CONTEXTUAL, SELF-RETIRING ONBOARDING
   Inline only. No popup, overlay, coach marks, or permanent control.
   Shown only for a genuinely empty first-time Library and retired
   automatically after meaningful Favorites/listening use.
   ============================================================ */
.p18i-contextual-onboarding {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: center;
  margin: 18px 0 26px;
  padding: 20px 22px;
  border: 1px solid #4d4036;
  border-radius: 14px;
  background: #171412;
}

.p18i-onboarding-copy h2 {
  margin: 5px 0 7px;
  color: #f3e9e1;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}

.p18i-onboarding-copy p {
  margin: 0;
  color: #b9aea5;
  font-size: 13px;
  line-height: 1.8;
}

.p18i-onboarding-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.p18i-onboarding-point {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #3a312b;
  border-radius: 11px;
  background: #100e0d;
}

.p18i-onboarding-point strong {
  display: block;
  margin-bottom: 4px;
  color: #f0e5dc;
  font-size: 14px;
  line-height: 1.5;
}

.p18i-onboarding-point span {
  display: block;
  color: #b7aca3;
  font-size: 12.5px;
  line-height: 1.75;
}

@media (max-width: 760px) {
  .p18i-contextual-onboarding {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 14px 0 22px;
    padding: 17px 16px;
  }
  .p18i-onboarding-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (prefers-contrast: more) {
  .p18i-contextual-onboarding,
  .p18i-onboarding-point {
    border-color: #b59069;
  }
  .p18i-onboarding-copy p,
  .p18i-onboarding-point span {
    color: #eadfd3;
  }
}

@media (forced-colors: active) {
  .p18i-contextual-onboarding,
  .p18i-onboarding-point {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}


/* PHASE18UX1J — JOURNEY-LEVEL OPTIMIZATION
   No new user-facing controls: prioritize core journeys, intent order, and measurable guardrails. */


/* P19 UX1B — approved seasonal brand mark + exact readable name */
.brand-with-logo { gap: 10px; }
.brand-logo-desktop { width: 56px; height: 56px; max-height: 56px; border-radius: 14px; }
.brand-copy-themed { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; border: 0 !important; line-height: 1.15; }
.brand-copy-themed strong { color: var(--gold-bright); font-size: 18px; white-space: nowrap; }
.brand-copy-themed small { color: #ad9a89; font-size: 9px; letter-spacing: .13em; direction:ltr; text-align:right; white-space:nowrap; }
html[data-theme="joy"] .brand-copy-themed strong { color: var(--accent-strong); }
html[data-theme="joy"] .brand-copy-themed small { color: #61766b; }
@media (max-width:650px){ .brand-copy-themed{display:none!important;} .brand-logo-mobile{display:block;width:48px;height:48px;border-radius:13px;} }


/* ============================================================
   PHASE 20 UX1A R5 — INLINE LAYOUT CSS FIX
   Title and Hijri year are two adjacent primary fields.
   They stay on one horizontal row on desktop and mobile.
   ============================================================ */
.p20-release-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 0 5px;
}
.p20-release-primary-row .p20-release-title {
  min-width: 0;
  margin: 0 !important;
}
.p20-release-primary-row .p20-release-title a {
  min-width: 0;
}
.p20-release-year {
  align-self: center;
  min-width: max-content;
  white-space: nowrap;
  direction: rtl;
  color: #d0a968;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
html[data-theme="joy"] .p20-release-year {
  color: #2f715a;
}
.p20-release-secondary-meta {
  min-height: 0;
  margin-bottom: 5px;
}
@media (max-width: 650px) {
  .p20-release-primary-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .p20-release-year {
    font-size: 10px;
  }
}

/* ============================================================
   PHASE 20 UX1B — RELEASE PAGINATION
   24 releases per page. URL page state is shareable/back-friendly.
   ============================================================ */
.p20-release-pagination-host {
  margin-top: 18px;
}
.p20-release-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  direction: rtl;
}
.p20-release-page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.p20-release-page-nav,
.p20-release-page-number {
  min-width: 38px;
  min-height: 38px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  line-height: 1;
}
.p20-release-page-nav {
  min-width: 64px;
}
.p20-release-page-nav:hover,
.p20-release-page-number:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.p20-release-page-number.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.p20-release-page-nav.is-disabled {
  opacity: .42;
  cursor: default;
}
.p20-release-page-ellipsis {
  min-width: 22px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.p20-release-pagination a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
html[data-theme="joy"] .p20-release-page-number.is-current {
  background: #2f715a;
  border-color: #2f715a;
  color: #fff;
}
@media (max-width: 650px) {
  .p20-release-pagination {
    gap: 6px;
  }
  .p20-release-page-numbers {
    gap: 4px;
  }
  .p20-release-page-nav,
  .p20-release-page-number {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .p20-release-page-nav {
    min-width: 58px;
  }
}

/* Phase20 CMS1A — editor-controlled public descriptions and recording text */
.cms-release-description{max-width:72ch;margin:.8rem 0 0;color:var(--muted,#aaa);line-height:1.9;white-space:pre-wrap}.cms-recording-content{margin:24px 0;padding:clamp(18px,3vw,30px);border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.025)}.cms-recording-content-heading h2{margin:.25rem 0 1rem}.cms-recording-description{color:var(--muted,#aaa);line-height:1.9}.cms-recording-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:2.15;font-size:clamp(1rem,1.6vw,1.12rem);max-width:78ch}

/* PUBLIC AUDIO SEEK LTR R1
   Azaa Library is RTL, but HTML range controls are scalar controls and must
   increase from left to right. This applies to both the recording-page seek
   bar and the sticky player seek/range controls on mobile and desktop. */
input[type="range"] {
  direction: ltr !important;
}

/* PUBLIC PLAYER LTR R3
   The Arabic site remains RTL. Playback time is scalar, so its visual flow is
   LTR: current/start on the left, duration/end on the right; rewind on the
   left and forward on the right. Applies to recording page and sticky player. */
input[type="range"],
.p14-seek-range {
  direction: ltr !important;
}

.p14-seek-time,
.p14-seek-jumps,
.player-timeline,
.player-controls {
  direction: ltr !important;
}



/* R6C3_3_HOME_RECITER_LIMIT
   Performance guard: the home page renders only the initial reciter batch.
   Make the existing "show all reciters" control available on desktop/tablet too.
   Mobile still shows six cards initially via the existing nth-child rule. */
.p11-mobile-reciter-more:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}