/* Reader pages: the contents and each surah. Builds on site.css. */
body.reader { background: radial-gradient(ellipse at 50% 0%, #fffdf8, var(--paper) 55%) fixed, var(--paper); }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 12px clamp(16px, 3.6vw, 52px); background: rgba(250, 246, 238, .86); border-bottom: 1px solid var(--gold-soft);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar .wordmark { font-size: 1.15rem; color: var(--charcoal); justify-self: start; margin-right: 0; }
.bar__title { font-style: italic; color: #5d5243; white-space: nowrap; }
.bar__nav { justify-self: end; display: flex; gap: 1.4rem; }
.bar__nav a { text-decoration: none; letter-spacing: .04em; border-bottom: 1px solid transparent; }
.bar__nav a[aria-current="page"] { border-color: var(--gold-soft); }
.bar__nav a:hover { border-color: var(--gold); }
.bar__end { justify-self: end; display: flex; align-items: center; gap: 1.2rem; }
.bar .aa-btn { width: 32px; height: 32px; color: var(--charcoal); }
@media (max-aspect-ratio: 4/5), (max-width: 700px) {
  .bar__nav { display: none; }
  .is-menu .bar { -webkit-backdrop-filter: none; backdrop-filter: none; } /* a blurred bar would trap the full-screen menu inside it */
}

/* ---------- Contents ---------- */
.contents { max-width: 1180px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px) 64px; }
.contents__head { text-align: center; margin-bottom: 2.4rem; }
.contents__head h1 { margin: .5rem 0 1.4rem; font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; }
.search input { width: min(100%, 420px); font: inherit; font-size: 1.05rem; padding: .6rem 1.2rem; border: 1px solid var(--gold-soft); border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--charcoal); }
.search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169, 132, 58, .15); }
.surah-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.sc { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num en ar" "num meta ar"; align-items: center; column-gap: 14px;
  padding: 14px 16px; text-decoration: none; border: 1px solid rgba(169, 132, 58, .3); border-radius: 6px; background: rgba(255, 255, 255, .45); transition: border-color .2s, background .2s, transform .2s; }
.sc:hover { border-color: var(--gold); background: #fffdf8; transform: translateY(-1px); }
.sc__num { grid-area: num; position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold); }
.sc__num svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc__num b { font-weight: 500; font-size: .92rem; color: var(--charcoal); font-variant-numeric: lining-nums; }
.sc__en { grid-area: en; font-size: 1.12rem; line-height: 1.25; }
.sc__en small { display: block; font-size: .86rem; color: #7b705f; font-style: italic; }
.sc__ar { grid-area: ar; font-family: var(--arabic); font-size: 1.6rem; color: #6f5422; }
.sc__meta { grid-area: meta; font-size: .78rem; letter-spacing: .08em; color: #8a7e6d; margin-top: 2px; }
.none { text-align: center; margin-top: 2rem; }

/* ---------- Recitations list ---------- */
.contents__head .muted { margin-top: -.6rem; }
.rc-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.rc { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 22px 22px 18px; text-decoration: none; text-align: center; border: 1px solid rgba(169, 132, 58, .32); border-radius: 6px;
  background: linear-gradient(rgba(250, 246, 238, .82), rgba(250, 246, 238, .95)), center / cover image-set(url("/assets/img/sky-day-960.avif?v=e82e3686dc") type("image/avif"), url("/assets/img/sky-day-960.webp?v=211161ed07") type("image/webp"));
  transition: border-color .2s, transform .2s; }
.rc:hover { border-color: var(--gold); transform: translateY(-2px); }
.rc__ar { font-family: var(--arabic); font-size: 1.7rem; line-height: 2; color: #6f5422; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc__name { font-size: 1.35rem; font-style: italic; }
.rc__meta { font-size: .85rem; letter-spacing: .1em; color: #7b705f; }

/* ---------- Surah headpiece ---------- */
.headpiece { padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 0; }
.headpiece__frame { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) 24px; text-align: center; overflow: hidden;
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--gold-soft);
  background: linear-gradient(rgba(250, 246, 238, .5), rgba(250, 246, 238, .9)), center 35% / cover no-repeat
    image-set(url("/assets/img/sky-day-960.avif?v=e82e3686dc") type("image/avif"), url("/assets/img/sky-day-960.webp?v=211161ed07") type("image/webp")); }
.headpiece h1 { margin: .4rem 0 0; font-weight: 400; }
.headpiece__ar { display: block; font-family: var(--arabic); font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1.6;
  background: linear-gradient(178deg, #f3d995 8%, #c99a42 42%, #7a531a 72%, #b98a35 92%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px rgba(92, 60, 12, .25)); }
.headpiece__en { display: block; font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.2; }
.headpiece__meta { margin: .5rem 0 0; color: #6d6150; letter-spacing: .08em; }

.controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem 2.4rem; margin: 2rem auto 0; padding: 0 16px; }
.controls .listen { font-size: 1.05rem; }
.controls .listen .player__disc { width: 46px; height: 46px; }
.tr-pick select { font: inherit; font-size: .95rem; color: var(--charcoal); background: transparent; border: 1px solid var(--gold-soft); border-radius: 999px; padding: .35rem 2.1rem .35rem 1rem; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }

.basmalah { margin: 2.6rem auto 0; padding: 0 16px; text-align: center; font-family: var(--arabic); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 2; color: #4a3a22; }

/* ---------- Ayahs ---------- */
.ayahs { list-style: none; max-width: 920px; margin: 1.6rem auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.ayah-row { position: relative; padding: 1.6rem 1.2rem 1.1rem; border-bottom: 1px solid rgba(169, 132, 58, .22); border-radius: 6px; scroll-margin-top: 90px; transition: background .5s ease; }
.ayah-row__ar { margin: 0; font-family: var(--arabic); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 2.2; color: var(--charcoal); text-align: right; }
.ayah-row__tr { margin: .6rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: #3d352a; }
.ayah-row__tr .add, .translation .add { color: #8f826f; }
.ayah-row__tools { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }
.ayah-row__ref { font-size: .85rem; letter-spacing: .1em; color: var(--gold); text-decoration: none; font-variant-numeric: lining-nums; }
.ayah-row__ref:hover { text-decoration: underline; }
.ayah-row__play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold-soft); display: grid; place-items: center; color: #5d5243; opacity: .75; transition: opacity .2s, border-color .2s; }
.ayah-row__play svg { width: 14px; height: 14px; fill: currentColor; }
.ayah-row:hover .ayah-row__play, .ayah-row__play:focus-visible, .is-current .ayah-row__play { opacity: 1; border-color: var(--gold); }
.ayah-row.is-current { background: radial-gradient(ellipse at 70% 30%, rgba(246, 226, 170, .38), rgba(246, 226, 170, .12) 70%); }
.ayah-row.is-current .ayah-row__ar { color: #3e2d10; }
.ayah-row:target { animation: arrive 2.4s ease-out; }
@keyframes arrive { from { background: rgba(246, 226, 170, .55); } to { background: transparent; } }

.pager { max-width: 920px; margin: 3rem auto 0; padding: 0 clamp(16px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
.pager a { text-decoration: none; }
.pager small { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pager__next { text-align: right; }
.pager__all { padding: .4rem 1.2rem; border: 1px solid var(--gold-soft); border-radius: 999px; }
.reader-credit { max-width: 920px; margin: 2rem auto 3rem; padding: 0 clamp(16px, 4vw, 40px); text-align: center; }

@media (max-width: 640px) {
  .bar { grid-template-columns: auto 1fr auto; }
  .bar__title { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; }
  .ayah-row { padding: 1.3rem .4rem 1rem; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ayah-row:target { animation: none; } .sc { transition: none; } }