/* ============================================================
   PHASE 19 UX1A — DUAL THEME FOUNDATION + JOY THEME
   Default remains the approved sorrow theme.
   Joy is a presentation-only layer activated with:
     <html data-theme="joy">
   No user-facing theme switch is introduced in UX1A.
   ============================================================ */

:root {
  --theme-id: sorrow;
  --theme-header-bg: rgba(6,7,8,.93);
  --theme-focus: #f0c982;
}

html[data-theme="sorrow"] {
  --theme-id: sorrow;
  color-scheme: dark;
}

html[data-theme="joy"] {
  --theme-id: joy;
  --bg: #f6f3e8;
  --surface: #fffdf7;
  --surface-alt: #eef4e9;
  --surface-deep: #e7efe8;
  --text: #183229;
  --muted: #586d63;
  --border: #d4dfd4;
  --border-strong: #a9baae;
  --accent: #18705c;
  --accent-strong: #0d5343;
  --accent-soft: rgba(24,112,92,.12);
  --gold: #795115;
  --gold-bright: #9a681d;
  --danger: #963a3a;
  --success: #247250;
  --shadow: 0 18px 48px rgba(29,73,58,.12);
  --theme-header-bg: rgba(255,253,247,.94);
  --theme-focus: #0d6a56;
  color-scheme: light;
  background: #f6f3e8;
}

html[data-theme="joy"] body {
  background:
    radial-gradient(circle at 12% 8%, rgba(185,135,42,.09), transparent 26%),
    radial-gradient(circle at 88% 15%, rgba(24,112,92,.10), transparent 30%),
    linear-gradient(180deg,#fbf9f1 0%,#f6f3e8 64%,#f0eee3 100%);
  color: var(--text);
}

html[data-theme="joy"] body::before {
  opacity: .34;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(24,112,92,.035) 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(185,135,42,.028) 49% 51%, transparent 52%);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 78%);
}

/* Header / navigation --------------------------------------------------- */
html[data-theme="joy"] .site-header {
  background: var(--theme-header-bg);
  border-bottom-color: rgba(24,112,92,.18);
  box-shadow: 0 9px 30px rgba(25,66,52,.08);
}

html[data-theme="joy"] .header-search {
  background: rgba(255,255,252,.96);
  border-color: #c9d7cd;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
html[data-theme="joy"] .header-search:focus-within {
  border-color: rgba(13,106,86,.70);
  box-shadow: 0 0 0 4px rgba(24,112,92,.10);
}
html[data-theme="joy"] .header-search input { color: var(--text); }
html[data-theme="joy"] .header-search input::placeholder { color: #71837a; }
html[data-theme="joy"] .header-search button { color: var(--accent-strong); }

html[data-theme="joy"] .icon-button,
html[data-theme="joy"] .library-nav-button {
  background: #fffdf8;
  border-color: #cdd9d0;
  color: var(--accent-strong);
}
html[data-theme="joy"] .icon-button:hover,
html[data-theme="joy"] .library-nav-button:hover {
  background: #eef6ef;
  border-color: #93afa0;
}
html[data-theme="joy"] .queue-count {
  background: var(--accent);
  color: #fff;
}

html[data-theme="joy"] .site-nav {
  border-top-color: rgba(24,112,92,.08);
  background: linear-gradient(180deg,rgba(248,249,240,.92),rgba(240,245,236,.94));
}
html[data-theme="joy"] .site-nav a { color: #4c655a; }
html[data-theme="joy"] .site-nav a:hover,
html[data-theme="joy"] .site-nav a[aria-current="page"] {
  color: var(--accent-strong);
  background: rgba(24,112,92,.08);
}
html[data-theme="joy"] .site-nav a:hover::after { background: var(--gold); }

/* General surfaces / hierarchy ---------------------------------------- */
html[data-theme="joy"] .breadcrumbs { color: #657970; }
html[data-theme="joy"] .breadcrumbs a:hover { color: var(--accent-strong); }

html[data-theme="joy"] :is(.page-loading,.empty-state,.error-state,.search-panel,.p9-search-panel) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: 0 15px 36px rgba(35,75,61,.08);
}
html[data-theme="joy"] :is(.p9-section-header h2,.page-title h1,.p9-simple-title h1) { color: var(--text); }
html[data-theme="joy"] :is(.p9-section-header p,.section-note,.page-title p,.p9-simple-title p) { color: var(--muted); }
html[data-theme="joy"] .section-kicker,
html[data-theme="joy"] .p9-section-header > a { color: var(--gold); }

/* Joy hero: light, luminous and devotional without celebratory clutter. */
html[data-theme="joy"] .p9-hero {
  border-color: rgba(24,112,92,.23);
  background: linear-gradient(135deg,#0d5a49 0%,#176f59 58%,#0b4d3f 100%);
  box-shadow: 0 26px 60px rgba(22,82,63,.20);
}
html[data-theme="joy"] .p9-hero::before {
  opacity: .55;
  background:
    radial-gradient(circle at 12% 18%,rgba(246,218,160,.13),transparent 26%),
    repeating-linear-gradient(45deg,transparent 0 38px,rgba(255,255,255,.027) 38px 39px);
  mask-image: linear-gradient(90deg,#000 0%,rgba(0,0,0,.38) 66%,transparent 100%);
}
html[data-theme="joy"] .p9-hero-content {
  background:
    radial-gradient(circle at 18% 18%,rgba(255,245,213,.10),transparent 32%),
    transparent;
}
html[data-theme="joy"] .hero-eyebrow,
html[data-theme="joy"] .p9-hero h1 em,
html[data-theme="joy"] .hero-footnote a { color: #f3d693; }
html[data-theme="joy"] .hero-eyebrow span { background: #f3d693; }
html[data-theme="joy"] .p9-hero h1 {
  color: #fffaf0;
  text-shadow: 0 8px 30px rgba(2,45,34,.20);
}
html[data-theme="joy"] .p9-hero p { color: #e6f0ea; }
html[data-theme="joy"] .hero-footnote { color: #cfe1d8; }

html[data-theme="joy"] .p9-hero-art {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,rgba(8,61,48,.08) 0%,rgba(8,61,48,.02) 58%,rgba(8,61,48,.28) 100%),
    linear-gradient(0deg,rgba(8,61,48,.10),transparent 54%),
    url("/assets/p20cms1a-admin-a6c91e4d2f70/visual/joy-mawlid-hero.webp") center 48% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(250,220,151,.16);
}
html[data-theme="joy"] .p9-hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  bottom: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(circle at 84% 18%,rgba(255,243,202,.22),transparent 30%),
    linear-gradient(90deg,transparent 55%,rgba(8,61,48,.22) 100%);
  pointer-events: none;
}
html[data-theme="joy"] .p9-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%,rgba(6,52,41,.13)),
    linear-gradient(90deg,transparent 62%,rgba(8,61,48,.18));
  opacity: 1;
  pointer-events: none;
}
html[data-theme="joy"] .p9-hero-art .hero-arch { display: none; }

html[data-theme="joy"] .p15-home-paths a {
  color: #fff8e7;
  border-color: rgba(248,225,178,.28);
  background: rgba(255,255,255,.08);
}
html[data-theme="joy"] .p15-home-paths a:hover {
  border-color: rgba(248,225,178,.54);
  background: rgba(255,255,255,.13);
}

/* Simple inner-page banners no longer reuse the sorrow hero image. */
html[data-theme="joy"] .p9-simple-title,
html[data-theme="joy"] :is(.v2-topic-banner,.v2-subject-detail-banner,.v2-search-banner) {
  border-color: rgba(24,112,92,.22);
  background:
    radial-gradient(circle at 12% 18%,rgba(185,135,42,.11),transparent 28%),
    radial-gradient(circle at 88% 24%,rgba(24,112,92,.10),transparent 31%),
    linear-gradient(135deg,#fffdf7,#eef5ec);
  box-shadow: 0 18px 42px rgba(29,73,58,.10);
}
html[data-theme="joy"] .p9-simple-title::after { background: none; }
html[data-theme="joy"] :is(.v2-topic-banner,.v2-subject-detail-banner,.v2-search-banner)::after {
  border-color: rgba(24,112,92,.12);
  box-shadow: 0 0 0 22px rgba(185,135,42,.025);
}
html[data-theme="joy"] :is(.v2-topic-banner-motif,.v2-subject-mark,.v2-search-emblem) {
  color: #f8edcf;
  border-color: rgba(185,135,42,.42);
  background: linear-gradient(155deg,#18705c,#0d5343);
  box-shadow: 0 12px 28px rgba(19,82,63,.18);
}

/* Cards / discovery ---------------------------------------------------- */
html[data-theme="joy"] .p9-stat-strip {
  border-color: rgba(24,112,92,.20);
  background: linear-gradient(180deg,#fffdf8,#f1f6ef);
  box-shadow: 0 15px 34px rgba(29,73,58,.09);
}
html[data-theme="joy"] .p9-stat-strip > div { border-left-color: rgba(24,112,92,.12); }
html[data-theme="joy"] .p9-stat-strip strong { color: var(--accent-strong); }
html[data-theme="joy"] .p9-stat-strip span { color: var(--muted); }

html[data-theme="joy"] :is(.p9-reciter-card,.p9-subject-card,.p9-release-card,.p10-library-card,.p10-library-stats > div) {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 11px 28px rgba(29,73,58,.08);
}
html[data-theme="joy"] :is(.p9-reciter-card,.p9-subject-card,.p9-release-card,.p10-library-card):hover {
  border-color: #a5b9aa;
  box-shadow: 0 15px 34px rgba(29,73,58,.12);
}
html[data-theme="joy"] .p9-reciter-card::before { border-color: rgba(185,135,42,.13); }
html[data-theme="joy"] .p9-reciter-image {
  background: #e6efe8;
  border-color: rgba(24,112,92,.22);
  box-shadow: 0 7px 20px rgba(29,73,58,.10);
}
html[data-theme="joy"] .p9-reciter-copy small,
html[data-theme="joy"] .p9-release-card-copy small { color: var(--gold); }
html[data-theme="joy"] :is(.p9-reciter-copy h3,.p9-subject-card h3,.p9-release-card-copy h3,.p10-library-card-copy h3) { color: var(--text); }
html[data-theme="joy"] :is(.p9-reciter-copy p,.p9-subject-card p,.p9-release-card-copy p,.p10-library-card-copy p,.p10-library-card-copy small) { color: var(--muted); }
html[data-theme="joy"] .p9-card-arrow { color: var(--accent); }
html[data-theme="joy"] .subject-symbol,
html[data-theme="joy"] .p10-library-mark {
  color: #f8edcf;
  border-color: rgba(185,135,42,.40);
  background: linear-gradient(155deg,#1d7a63,#0d5343);
}

/* Recently added / continue ------------------------------------------- */
html[data-theme="joy"] .p11-continue-priority,
html[data-theme="joy"] .p12-reciter-resume {
  border-color: rgba(24,112,92,.25);
  background:
    radial-gradient(circle at 88% 18%,rgba(185,135,42,.09),transparent 36%),
    linear-gradient(135deg,#fffdf7,#edf5ec);
  box-shadow: 0 16px 38px rgba(29,73,58,.10);
}
html[data-theme="joy"] .p11-continue-priority .p10-library-card { background: rgba(255,255,252,.92); border-color: var(--border); }
html[data-theme="joy"] .p11-continue-priority .p10-library-play,
html[data-theme="joy"] .p12-release-resume { background: linear-gradient(145deg,#18705c,#0d5343); color: #fff; border-color: #176853; }
html[data-theme="joy"] :is(.p11-recent-listening,.p11-archive-info) { border-top-color: rgba(24,112,92,.14); }
html[data-theme="joy"] .p11-mobile-reciter-more,
html[data-theme="joy"] .p11-recently-added-more {
  border-color: var(--border);
  background: #fffdf8;
  color: var(--accent-strong);
}
html[data-theme="joy"] .p11-recently-added-date {
  border-color: rgba(24,112,92,.17);
  color: #536c61;
  background: #f5f8f2;
}
html[data-theme="joy"] .p11-recently-added-card {
  border-color: var(--border);
  background:
    radial-gradient(circle at 88% 15%,rgba(185,135,42,.07),transparent 40%),
    linear-gradient(145deg,#fffdf8,#f3f7f1);
}
html[data-theme="joy"] .p11-recently-added-card:hover { border-color: #a8bbaa; }
html[data-theme="joy"] .p11-recently-added-symbol {
  border-color: rgba(185,135,42,.30);
  background: linear-gradient(145deg,#1d7a63,#0d5343);
  color: #f4dfae;
}
html[data-theme="joy"] .p11-recently-added-copy small { color: #60756a; }
html[data-theme="joy"] .p11-recently-added-copy h3 { color: var(--text); }
html[data-theme="joy"] .p11-recently-added-copy p { color: var(--muted); }
html[data-theme="joy"] .p11-recently-added-arrow { color: var(--accent); }

/* Reciter / release browsing ------------------------------------------ */
html[data-theme="joy"] .p12-reciter-resume-copy h2 { color: var(--text); }
html[data-theme="joy"] .p12-reciter-resume-copy p,
html[data-theme="joy"] .p12-release-browser-intro { color: var(--muted); }
html[data-theme="joy"] .p12-reciter-resume-more { color: var(--accent); }
html[data-theme="joy"] :is(.p12-resume-progress,.p12-release-progress),
html[data-theme="joy"] :is(.p12-resume-progress,.p12-release-progress)::-webkit-progress-bar { background: #dce7df; }
html[data-theme="joy"] :is(.p12-resume-progress,.p12-release-progress)::-webkit-progress-value,
html[data-theme="joy"] .p13-track-progress::-webkit-progress-value { background: linear-gradient(90deg,#18705c,#b9872a); }
html[data-theme="joy"] :is(.p12-resume-progress,.p12-release-progress)::-moz-progress-bar,
html[data-theme="joy"] .p13-track-progress::-moz-progress-bar { background: linear-gradient(90deg,#18705c,#b9872a); }

html[data-theme="joy"] .p12-release-card,
html[data-theme="joy"] .p12-release-card.is-active {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(29,73,58,.08);
}
html[data-theme="joy"] .p12-release-card:hover { border-color: #9fb5a5; box-shadow: 0 15px 34px rgba(29,73,58,.12); }
html[data-theme="joy"] .p12-release-card.is-active {
  border-color: rgba(24,112,92,.42);
  background:
    radial-gradient(circle at 86% 18%,rgba(185,135,42,.08),transparent 35%),
    linear-gradient(135deg,#fffdf8,#edf5ec);
}
html[data-theme="joy"] .p12-release-art-link { border-left-color: rgba(24,112,92,.12); }
html[data-theme="joy"] .p12-release-meta span,
html[data-theme="joy"] .p12-release-state-chip {
  border-color: rgba(24,112,92,.20);
  color: #5d4a24;
  background: rgba(185,135,42,.07);
}
html[data-theme="joy"] .p12-release-card-copy h3 a { color: var(--text); }
html[data-theme="joy"] .p12-release-card-copy h3 a:hover { color: var(--accent-strong); }
html[data-theme="joy"] .p12-release-counts strong { color: var(--gold); }
html[data-theme="joy"] :is(.p12-release-counts span,.p12-release-listening small) { color: var(--muted); }
html[data-theme="joy"] .p12-release-state-row { color: var(--accent-strong); }
html[data-theme="joy"] .p12-release-open { color: var(--accent-strong); }

/* Strong page heroes / release headers / recording ------------------- */
html[data-theme="joy"] :is(.p9-reciter-hero,.p9-release-hero,.p9-recording-main,.p9-metadata-panel,.p10-library-hero,.p14-release-header,.p14-recording-focus,.p14-archive-metadata) {
  background:
    radial-gradient(circle at 86% 12%,rgba(185,135,42,.08),transparent 34%),
    linear-gradient(135deg,#fffdf8,#edf5ec);
  border-color: rgba(24,112,92,.22);
  box-shadow: 0 17px 42px rgba(29,73,58,.10);
}
html[data-theme="joy"] :is(.p9-reciter-hero,.p9-release-hero,.p9-recording-main,.p10-library-hero)::after { border-color: rgba(24,112,92,.10); box-shadow: 0 0 0 24px rgba(185,135,42,.018),0 0 0 48px rgba(24,112,92,.012); }
html[data-theme="joy"] :is(.p9-reciter-hero-copy h1,.p9-release-hero-copy h1,.p9-recording-copy h1,.p10-library-hero h1,.p14-recording-heading h1,.p14-release-identity h1,.p14-archive-heading h2) { color: var(--text); }
html[data-theme="joy"] :is(.p9-reciter-hero-copy p,.p9-recording-copy > p,.p10-library-hero p,.p14-recording-human-context,.p14-archive-heading p) { color: var(--muted); }
html[data-theme="joy"] .p14-listen-kicker,
html[data-theme="joy"] .p14-release-reciter { color: var(--gold); }
html[data-theme="joy"] .p14-release-reciter:hover { color: var(--accent-strong); }
html[data-theme="joy"] .p14-seek-panel,
html[data-theme="joy"] .p14-return-link {
  border-color: rgba(24,112,92,.18);
  background: rgba(255,255,255,.58);
}
html[data-theme="joy"] .p14-seek-time,
html[data-theme="joy"] .p14-return-link { color: var(--text); }
html[data-theme="joy"] :is(.p14-seek-label,.p14-return-label) { color: var(--muted); }
html[data-theme="joy"] .p14-seek-range { accent-color: var(--accent); }
html[data-theme="joy"] .p14-favorite-action[aria-pressed="true"] {
  border-color: rgba(185,135,42,.45);
  background: rgba(185,135,42,.09);
}

html[data-theme="joy"] .p14-coverless-release-hero,
html[data-theme="joy"] .p9-release-hero.v2-release-hero.p14-coverless-release-hero {
  background: linear-gradient(135deg,#fffdf8,#edf5ec);
  border-color: rgba(24,112,92,.22);
}

/* Buttons / badges ----------------------------------------------------- */
html[data-theme="joy"] .badge {
  background: #f3f6f1;
  border-color: #cbd8cf;
  color: #435e52;
}
html[data-theme="joy"] .badge.accent {
  color: var(--accent-strong);
  background: rgba(24,112,92,.08);
  border-color: rgba(24,112,92,.25);
}
html[data-theme="joy"] .primary-button,
html[data-theme="joy"] .p14-primary-play {
  color: #fff;
  background: linear-gradient(145deg,#1d7a63,#0d5b49);
  border-color: #176853;
  box-shadow: 0 9px 22px rgba(24,112,92,.20);
}
html[data-theme="joy"] .primary-button:hover:not(:disabled),
html[data-theme="joy"] .p14-primary-play:hover:not(:disabled) { background: linear-gradient(145deg,#23866d,#116451); }
html[data-theme="joy"] .secondary-button,
html[data-theme="joy"] :is(.p14-seek-jump,.p14-favorite-action,.p14-share-action) {
  background: #fffdf8;
  border-color: #c6d5ca;
  color: #36584a;
}
html[data-theme="joy"] .secondary-button:hover:not(:disabled),
html[data-theme="joy"] :is(.p14-seek-jump,.p14-favorite-action,.p14-share-action):hover { background: #eef6ef; border-color: #9fb4a5; }

/* Track lists / listening states -------------------------------------- */
html[data-theme="joy"] .premium-track-list {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 12px 30px rgba(29,73,58,.08);
}
html[data-theme="joy"] .premium-track-row { border-bottom-color: #e4ebe5; }
html[data-theme="joy"] .premium-track-row:hover { background: #f2f7f2; }
html[data-theme="joy"] .track-round-play {
  background: #e8f2eb;
  color: var(--accent-strong);
  border-color: rgba(24,112,92,.25);
}
html[data-theme="joy"] .track-round-play:hover:not(:disabled) { background: var(--accent); color: #fff; }
html[data-theme="joy"] .track-title a { color: var(--text); }
html[data-theme="joy"] .track-title small,
html[data-theme="joy"] .track-duration { color: var(--muted); }
html[data-theme="joy"] .track-favorite-button { color: #6b7f75; }
html[data-theme="joy"] .track-favorite-button:hover,
html[data-theme="joy"] .track-favorite-button.active {
  color: #795115;
  background: rgba(185,135,42,.10);
}
html[data-theme="joy"] .p13-recording-selection-header p { color: var(--muted); }
html[data-theme="joy"] .p13-track-row.p13-state-playing {
  background: linear-gradient(90deg,rgba(24,112,92,.05),rgba(24,112,92,.13));
  box-shadow: inset -3px 0 0 var(--accent);
}
html[data-theme="joy"] .p13-track-row.p13-state-partial { background: rgba(185,135,42,.055); }
html[data-theme="joy"] .p13-track-row.p13-current-track:not(.p13-state-playing) { background: rgba(24,112,92,.045); box-shadow: inset -1px 0 0 rgba(24,112,92,.28); }
html[data-theme="joy"] .p13-track-row.p13-state-playing .track-title a { color: #0b4c3d; }
html[data-theme="joy"] .p13-track-row.p13-state-completed .track-title a { color: #4f665b; }
html[data-theme="joy"] .p13-track-row.p13-state-playing .track-round-play { background: var(--accent); border-color: rgba(185,135,42,.46); color: #fff; }
html[data-theme="joy"] .p13-track-state-label.is-playing { color: #0d5d4a; }
html[data-theme="joy"] .p13-track-state-label.is-partial { color: #795115; }
html[data-theme="joy"] .p13-track-state-label.is-completed,
html[data-theme="joy"] .p13-track-state-time { color: #657970; }
html[data-theme="joy"] .p13-track-progress,
html[data-theme="joy"] .p13-track-progress::-webkit-progress-bar { background: #dce7df; color: var(--accent); accent-color: var(--accent); }

/* Metadata / IDs ------------------------------------------------------- */
html[data-theme="joy"] .p9-metadata-panel,
html[data-theme="joy"] .p14-archive-metadata { background: var(--surface); }
html[data-theme="joy"] .meta-item { border-bottom-color: #e4ebe5; }
html[data-theme="joy"] .meta-item span { color: var(--muted); }
html[data-theme="joy"] .meta-item strong { color: var(--text); }
html[data-theme="joy"] .lat-id { color: #795115 !important; }

/* Search / live search ------------------------------------------------- */
html[data-theme="joy"] .search-panel input,
html[data-theme="joy"] .p9-search-panel input {
  background: #fffef9;
  color: var(--text);
  border-color: #c9d7cd;
}
html[data-theme="joy"] .search-panel input::placeholder { color: #71837a; }
html[data-theme="joy"] :is(.live-search-popover,.live-search-option,.live-search-all) {
  background: #fffdf8;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="joy"] .live-search-option:hover,
html[data-theme="joy"] .live-search-option[aria-selected="true"] { background: #edf5ee; }
html[data-theme="joy"] .search-type-filter {
  background: #fffdf8;
  border-color: #cbd8cf;
  color: #4b6559;
}
html[data-theme="joy"] .search-type-filter.active,
html[data-theme="joy"] .search-type-filter[aria-pressed="true"] {
  background: rgba(24,112,92,.10);
  border-color: rgba(24,112,92,.34);
  color: var(--accent-strong);
}
html[data-theme="joy"] .search-match-reason { color: #795115; }
html[data-theme="joy"] .search-track-row .track-index.search-result-rank { color: #795115; }

/* User library --------------------------------------------------------- */
html[data-theme="joy"] .p10-library-stats strong { color: var(--accent-strong); }
html[data-theme="joy"] .p10-library-stats span { color: var(--muted); }
html[data-theme="joy"] .p10-library-open {
  background: #fffdf8;
  border-color: #c6d5ca;
  color: #36584a;
}
html[data-theme="joy"] .p10-library-remove {
  background: rgba(150,58,58,.06);
  border-color: rgba(150,58,58,.24);
  color: #843737;
}
html[data-theme="joy"] .p10-library-progress,
html[data-theme="joy"] .p10-library-progress::-webkit-progress-bar { background: #dce7df; }
html[data-theme="joy"] .p10-library-progress::-webkit-progress-value,
html[data-theme="joy"] .p10-library-progress::-moz-progress-bar { background: linear-gradient(90deg,#18705c,#b9872a); }
html[data-theme="joy"] .p10-local-note {
  background: #f4f6ed;
  border-color: #d4c69e;
}
html[data-theme="joy"] .p10-local-note strong { color: #795115; }
html[data-theme="joy"] .p10-local-note p { color: var(--muted); }

/* Player: light shell, dark text, emerald transport emphasis. ---------- */
html[data-theme="joy"] .player-shell {
  background: rgba(255,253,248,.975);
  border-top-color: #c7d5cb;
  box-shadow: 0 -16px 42px rgba(26,70,56,.14);
}
html[data-theme="joy"] .player-title-button strong { color: #183229; }
html[data-theme="joy"] .player-title-button span,
html[data-theme="joy"] .time { color: #60736a; }
html[data-theme="joy"] .player-control,
html[data-theme="joy"] #player-rewind,
html[data-theme="joy"] #player-forward {
  color: #274d3f;
  background: #edf4ee;
  border-color: #c4d4c8;
  box-shadow: none;
}
html[data-theme="joy"] #player-rewind:hover,
html[data-theme="joy"] #player-forward:hover {
  color: #0b4c3d;
  background: #e1ede5;
  border-color: #9bb5a5;
}
html[data-theme="joy"] .player-play {
  color: #fff;
  background: linear-gradient(145deg,#23826a,#0d5b49);
  border-color: rgba(185,135,42,.48);
  box-shadow: 0 9px 24px rgba(24,112,92,.22),0 0 0 1px rgba(255,255,255,.35) inset;
}
html[data-theme="joy"] .player-waveform { background: #edf3ed; }
html[data-theme="joy"] .player-actions .icon-button {
  color: #567066;
  background: #fffdf8;
  border-color: #cbd7cf;
}
html[data-theme="joy"] .player-actions .icon-button:hover,
html[data-theme="joy"] .player-actions .icon-button:focus-visible {
  color: #1c5b48;
  background: #edf5ee;
  border-color: #a5b9aa;
}

/* Queue --------------------------------------------------------------- */
html[data-theme="joy"] .queue-panel {
  background: #fffdf8;
  border-color: #cbd8cf;
  box-shadow: 16px 0 44px rgba(20,63,49,.17);
}
html[data-theme="joy"] .queue-panel-header { border-bottom-color: #e0e8e1; }
html[data-theme="joy"] .queue-panel-header strong { color: var(--text); }
html[data-theme="joy"] .queue-panel-header small,
html[data-theme="joy"] .queue-item small,
html[data-theme="joy"] .queue-item-index { color: var(--muted); }
html[data-theme="joy"] .queue-item { color: var(--text); }
html[data-theme="joy"] .queue-item:hover { background: #f0f6f0; }
html[data-theme="joy"] .queue-item.current { background: rgba(24,112,92,.10); color: var(--accent-strong); }
html[data-theme="joy"] .queue-backdrop { background: rgba(20,47,38,.28); }

/* Footer -------------------------------------------------------------- */
html[data-theme="joy"] .site-footer { border-top-color: rgba(24,112,92,.16); }
html[data-theme="joy"] .site-footer-inner {
  border-color: rgba(185,135,42,.24);
  background:
    radial-gradient(circle at 88% 18%,rgba(246,218,160,.12),transparent 32%),
    linear-gradient(135deg,#0d5343,#124e41);
  box-shadow: 0 17px 40px rgba(24,83,65,.16);
}
html[data-theme="joy"] .site-footer-brand strong { color: #f4dba7; }
html[data-theme="joy"] .site-footer-brand p { color: #d6e5dd; }
html[data-theme="joy"] .footer-links a { color: #e8f1ec; }
html[data-theme="joy"] .footer-links a:hover { color: #ffe3a5; background: rgba(255,255,255,.08); }
html[data-theme="joy"] .site-footer-inner > small { color: #b8cfc4; border-top-color: rgba(255,255,255,.12); }

/* Loading / skeletons ------------------------------------------------- */
html[data-theme="joy"] :is(.progressive-card-skeleton,.progressive-subject-skeleton) {
  border-color: #d8e3da;
  background:
    linear-gradient(90deg,rgba(255,255,255,.55),rgba(24,112,92,.06),rgba(255,255,255,.55)),
    #edf4ee;
}

/* Accessibility: the theme never weakens keyboard visibility. ---------- */
html[data-theme="joy"] :focus-visible {
  outline-color: #0d6a56 !important;
}
html[data-theme="joy"] .skip-link {
  background: #0d5343;
  color: #fff;
}

/* High-contrast preferences retain the semantic theme but strengthen it. */
@media (prefers-contrast: more) {
  html[data-theme="joy"] {
    --muted: #3f5a4e;
    --border: #9fb3a5;
  }
  html[data-theme="joy"] :is(.primary-button,.player-play) { border-width: 2px; }
}

/* Mobile: keep the approved geometry; only the joy visual layer changes. */
@media (max-width: 760px) {
  html[data-theme="joy"] .p9-hero-art {
    background:
      radial-gradient(circle at 50% 40%,rgba(255,255,255,.92) 0 8%,rgba(255,255,255,.22) 9% 21%,transparent 22%),
      radial-gradient(circle at 75% 16%,rgba(185,135,42,.16),transparent 24%),
      linear-gradient(145deg,#f9f1d9,#deeee4);
  }
  html[data-theme="joy"] .p9-simple-title {
    background:
      radial-gradient(circle at 82% 18%,rgba(185,135,42,.09),transparent 28%),
      linear-gradient(135deg,#fffdf8,#edf5ec);
  }
  html[data-theme="joy"] .p9-release-hero.v2-release-hero {
    background: linear-gradient(128deg,#fffdf8,#edf5ec 76%);
  }
}

@media (max-width: 650px) {
  html[data-theme="joy"] .p9-release-hero.v2-release-hero.p14-coverless-release-hero,
  html[data-theme="joy"] .p14-coverless-release-hero {
    background: #fffdf8;
    border-color: #cbd8cf;
  }
}

@media (forced-colors: active) {
  html[data-theme="joy"] { forced-color-adjust: auto; }
}


/* P19 UX1D — Joy Homepage Occasion Imagery: stronger mobile image presence without changing listener journeys. */
@media (max-width: 900px) {
  html[data-theme="joy"] .p11-listen-hero .p9-hero-art {
    min-height: 260px;
    background:
      linear-gradient(0deg,rgba(8,61,48,.08),transparent 62%),
      url("/assets/p20cms1a-admin-a6c91e4d2f70/visual/joy-mawlid-hero-mobile.webp") center 47% / cover no-repeat;
  }
}
@media (max-width: 560px) {
  html[data-theme="joy"] .p11-listen-hero .p9-hero-art {
    min-height: 205px;
    background-position: center 48%;
  }
}