/* The theme controls live in the existing reading drawer. */
.theme-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid #aa834438;
  font-size: 13px;
}
.theme-picker select {
  padding: 6px 12px;
  border: 1px solid #ab884d80;
  border-radius: 20px;
  color: inherit;
  background: #170e0870;
  color-scheme: dark;
}
#reading-drawer .drawer-body { max-height: calc(100dvh - 205px); }
.emerald-scene, .emerald-brand, body.reading-first .mushaf-navigation .emerald-index { display: none; }
body.reading-first .show-player span { display: none; }

html[data-theme="emerald"] {
  --emerald-gold: #deb774;
  --emerald-text: #f1dcaa;
  --emerald-border: #a77e46;
  --emerald-chrome: linear-gradient(180deg,#26392d,#111e17);
  --emerald-action: linear-gradient(140deg,#fff0b4,#deb05b 55%,#b0803d);
}
[data-theme="emerald"] body.reading-first { background: #101b15; color: var(--emerald-text); }
[data-theme="emerald"] body.reading-first .reading-panel.reading-expanded {
  background: radial-gradient(ellipse at 50% 35%,#384032 0%,#19281e 49%,#090f0d 100%);
}
[data-theme="emerald"] body.reading-first .reading-panel.reading-expanded.reading-night {
  background: radial-gradient(ellipse at 50% 40%,#203125,#0a100d 76%);
}
[data-theme="emerald"] .emerald-scene {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.emerald-scene::before {
  content: "";
  position: absolute;
  inset: -30dvh -8vw auto;
  height: 53dvh;
  border: 8px double #b48c4f36;
  border-radius: 50% 50% 0 0 / 83% 83% 0 0;
  box-shadow: 0 5px 24px #0004, inset 0 0 70px #0003;
}
.emerald-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 25%;
  background: repeating-linear-gradient(45deg,transparent 0 34px,#c39b5430 35px 36px,transparent 37px 70px),
              repeating-linear-gradient(-45deg,transparent 0 34px,#c39b5430 35px 36px,transparent 37px 70px);
  mask-image: linear-gradient(transparent,#000);
}
.emerald-scene i {
  position: absolute;
  top: 10dvh;
  left: 6vw;
  width: 47px;
  height: 91px;
  border: 3px solid #ae8247;
  border-radius: 48% 48% 22% 22%;
  background: radial-gradient(ellipse,#f6c376b0,#ab783e5c 44%,#171611 88%);
  box-shadow: inset 0 0 0 4px #201b16, 0 0 34px #f3bd6240;
}
.emerald-scene i:last-child { left: auto; right: 6vw; transform: scale(.82); }
.emerald-scene i::before {
  content: "";
  position: absolute;
  inset: 5px 10px;
  border: 2px solid #e2b66b70;
  border-radius: 49% 49% 12% 12%;
  background: linear-gradient(90deg,transparent 47%,#e3ba6d50 48% 52%,transparent 53%);
}
.emerald-scene i::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 43px;
  height: 13dvh;
  transform: translateX(-50%);
  background: linear-gradient(#7d6035,#a57d47);
  clip-path: polygon(48% 0,52% 0,52% 88%,100% 100%,0 100%,48% 88%);
}

[data-theme="emerald"] body.reading-first .mushaf-spread { gap: 3px; }
[data-theme="emerald"] body.reading-first .reading-panel.reading-expanded .mushaf-sheet {
  background: linear-gradient(90deg,#ead6ac,#fffaf0 6%,#fffaf0 94%,#ead6ac);
  border: 2px solid #c6a063;
  border-radius: 16px;
  box-shadow: inset 0 0 0 4px #fff9eb, inset 0 0 0 5px #dcb778,
              0 5px #c2a16e, 0 9px #7a6547, 0 18px 36px #0008;
  padding-bottom: 11px;
}
[data-theme="emerald"] body.reading-first.two-pages .reading-panel.reading-expanded .mushaf-sheet {
  border-radius: 4px 16px 16px 4px;
  background: linear-gradient(90deg,#d5b888,#fffaf0 8%,#fffaf0 95%,#eddbb8);
}
[data-theme="emerald"] body.reading-first.two-pages .reading-panel.reading-expanded .next-sheet {
  border-radius: 16px 4px 4px 16px;
  background: linear-gradient(90deg,#eddbb8,#fffaf0 5%,#fffaf0 92%,#d5b888);
}
[data-theme="emerald"] body.reading-first .reading-expanded .mushaf-sheet::before {
  inset: 8px;
  border: 3px double #b98b4e;
  border-radius: 9px;
}
[data-theme="emerald"] body.reading-first .reading-panel.reading-expanded .mushaf-canvas { background: #fffaf0; }
[data-theme="emerald"] body.reading-first .reading-expanded .sheet-corner {
  top: 7px;
  width: 12px;
  height: 12px;
  padding: 0;
  font-size: 0;
  border: 1px solid #b98945;
  background: repeating-conic-gradient(from 45deg,#1e513c 0 45deg,#f1d690 45deg 90deg);
  transform: rotate(45deg);
}
[data-theme="emerald"] .corner-tr { right: 8px; }
[data-theme="emerald"] .corner-tl { left: 8px; }
[data-theme="emerald"] .page-ornament { color: #8b622f; }
[data-theme="emerald"] .page-ornament span:nth-child(2) {
  background: #fcf1d6;
  border: 1px solid #c39456;
  border-radius: 9px;
  padding-inline: 9px;
}
[data-theme="emerald"] .turn-face::after { background: #302515; }
[data-theme="emerald"] .turn-face, [data-theme="emerald"] .turn-still { background: #fffaf0; }

[data-theme="emerald"] body.reading-first .reading-expanded .mushaf-navigation,
[data-theme="emerald"] body.reading-first .fullscreen-exit,
[data-theme="emerald"] body.reading-first .player,
[data-theme="emerald"] body.reading-first .verse-action,
[data-theme="emerald"] #tafsir-dialog .tafsir-head {
  color: var(--emerald-text);
  background: var(--emerald-chrome);
  border-color: var(--emerald-border);
  box-shadow: 0 12px 36px #0007, inset 0 1px #f0d29a30;
}
[data-theme="emerald"] body.reading-first .reading-expanded .mushaf-navigation {
  padding: 7px 13px;
  border-radius: 30px;
}
[data-theme="emerald"] .emerald-brand {
  display: inline;
  margin-inline: 6px 10px;
  color: var(--emerald-gold);
  font: bold 22px 'Traditional Arabic', Georgia, serif;
}
[data-theme="emerald"] body.reading-first .mushaf-navigation .emerald-index {
  display: inline-block;
  border: 1px solid #a67b447d;
  border-radius: 24px;
}
[data-theme="emerald"] body.reading-first .page-stepper { border-color: #b18d525c; }
[data-theme="emerald"] body.reading-first .mushaf-navigation input,
[data-theme="emerald"] body.reading-first .player-selectors select,
[data-theme="emerald"] body.reading-first select option {
  color: var(--emerald-text);
  background: #13231b;
  border-color: #ad814968;
}
[data-theme="emerald"] body.reading-first .mushaf-navigation .page-audio button,
[data-theme="emerald"] body.reading-first .playback-buttons .play-button,
[data-theme="emerald"] body.reading-first .verse-action #verse-action-play {
  color: #2b2116;
  background: var(--emerald-action);
  border-radius: 24px;
}
[data-theme="emerald"] body.reading-first .player { border-radius: 56px; max-width: 1280px; }
[data-theme="emerald"] body.reading-first .player-track .track-icon {
  background: #1c2d22;
  color: var(--emerald-gold);
  border-color: var(--emerald-border);
}
[data-theme="emerald"] body.reading-first .hide-player,
[data-theme="emerald"] body.reading-first .show-player {
  color: var(--emerald-text);
  background: #203326;
  border-color: var(--emerald-border);
}
[data-theme="emerald"] body.reading-first .show-player {
  left: auto;
  right: 14px;
  width: auto;
  padding: 0 13px;
  border-radius: 25px;
  font-size: 14px;
  opacity: 1;
}
[data-theme="emerald"] body.reading-first .show-player span { display: inline; }
[data-theme="emerald"] body.reading-first .show-player:hover { background: #304638; }

[data-theme="emerald"] #reading-drawer {
  inset: 0 0 0 auto;
  margin: 0;
  width: min(375px,calc(100vw - 30px));
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  background: var(--emerald-chrome);
  color: var(--emerald-text);
  border-color: var(--emerald-border);
  overflow: auto;
}
[data-theme="emerald"] #reading-drawer::backdrop { background: #050b08a8; backdrop-filter: none; }
[data-theme="emerald"] #reading-drawer > header { background: #24362a; padding: 16px 18px; }
[data-theme="emerald"] #reading-drawer .drawer-body { display: block; max-height: none; overflow: visible; }
[data-theme="emerald"] #drawer-catalog { border: 0; border-bottom: 1px solid #b18d5257; }
[data-theme="emerald"] #reading-drawer .surah-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  max-height: 44dvh;
  min-height: 0;
  padding: 3px;
}
[data-theme="emerald"] #reading-drawer .surah-card {
  min-height: 44px;
  gap: 5px;
  padding: 6px;
  border: 1px solid #aa824e8c;
  border-radius: 22px;
  background: var(--emerald-chrome);
}
[data-theme="emerald"] #reading-drawer .surah-card:hover:not(:disabled),
[data-theme="emerald"] #reading-drawer .surah-card.selected { background: #5b502e; }
[data-theme="emerald"] #reading-drawer .surah-copy small { display: none; }
[data-theme="emerald"] #reading-drawer .surah-copy strong { font-size: 12px; color: var(--emerald-text); }
[data-theme="emerald"] #reading-drawer .surah-number { width: 22px; height: 22px; font-size: 9px; }
[data-theme="emerald"] #reading-drawer .surah-action { width: 22px; height: 22px; }
[data-theme="emerald"] #reading-drawer .search-wrap, [data-theme="emerald"] .theme-picker select { background: #13231b; }

/* Use the actual toolbar sizes measured by the reader when tools are visible. */
@media (min-height: 520px) {
  [data-theme="emerald"] body.reading-first:not(.player-hidden) .reading-panel.reading-expanded #mushaf-view {
    --emerald-top: max(65px,var(--mushaf-nav-height,65px));
    --emerald-bottom: calc(var(--mushaf-player-height,90px) + 22px);
    padding-block: var(--emerald-top) var(--emerald-bottom);
  }
  [data-theme="emerald"] body.reading-first:not(.player-hidden) .reading-panel.reading-expanded .mushaf-sheet {
    width: min(calc(100vw - 24px),calc((100dvh - var(--emerald-top) - var(--emerald-bottom) - 52px) * 1080 / 1714 + 36px));
  }
  [data-theme="emerald"] body.reading-first.two-pages:not(.player-hidden) .reading-panel.reading-expanded .mushaf-sheet {
    width: min(calc((100vw - 28px) / 2),calc((100dvh - var(--emerald-top) - var(--emerald-bottom) - 52px) * 1080 / 1714 + 36px));
  }
}
@media (max-width: 850px) {
  [data-theme="emerald"] .emerald-brand, [data-theme="emerald"] .emerald-scene i { display: none; }
  [data-theme="emerald"] body.reading-first .player { border-radius: 23px; }
  [data-theme="emerald"] body.reading-first .reading-expanded .mushaf-navigation { border-radius: 17px; padding: 5px; }
}

.emerald-rail { display: contents; }
.emerald-rail > button:not(.fullscreen-exit) { display: none; }
[data-theme="emerald"] #reading-drawer { scrollbar-color: #7b6440 #19271e; scrollbar-width: thin; }
@media (min-width: 1120px) and (min-height: 520px) {
  [data-theme="emerald"] body.reading-first:not(.player-hidden) .emerald-rail {
    display: flex;
    position: fixed;
    top: 24dvh;
    right: 18px;
    z-index: 43;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    border: 1px solid var(--emerald-border);
    border-radius: 23px;
    background: var(--emerald-chrome);
    box-shadow: 0 10px 30px #0006;
  }
  [data-theme="emerald"] body.reading-first:not(.player-hidden) .emerald-rail > button {
    display: block;
    position: static;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    color: var(--emerald-gold);
    box-shadow: none;
    font-size: 19px;
  }
  [data-theme="emerald"] body.reading-first .emerald-rail > button:hover { background: #dcb36e26; }
  [data-theme="emerald"] body.reading-first.player-hidden .emerald-rail { display: none; }
  [data-theme="emerald"] body.reading-first.two-pages:not(.player-hidden) .reading-panel.reading-expanded .mushaf-sheet {
    max-width: calc((100vw - 160px) / 2);
  }
}
[data-theme="emerald"] body.reading-first .show-player:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}