/* Mushaf reader (M05). Uses the design tokens of maqraa.css; logical properties only. */

/* Verified mushaf font served locally so pages work offline (FR-507: pending committee approval). */
@font-face {
  font-family: "Muqraa Quran";
  src: local("Amiri Quran"), local("AmiriQuran-Regular"), url("../fonts/AmiriQuran-Regular.ttf") format("truetype");
  font-display: swap;
}
.mushaf-text, .result-text { font-family: "Muqraa Quran", var(--font-quran); }

.mushaf-reader { padding-block: 0 2rem; }
.reader-toolbar { margin-block-end: 1rem; gap: .75rem; flex-wrap: wrap; }
.reader-toolbar form { flex-wrap: nowrap; gap: .4rem; }
.reader-toolbar input.goto-input { inline-size: 9.5rem; max-inline-size: 100%; min-inline-size: 0; min-block-size: 38px; padding-block: .3rem; }
/* Phones (375px): the toolbar children may shrink below their content width and wrap, so the
   audio bar and its long reciter names never widen the page. min-inline-size:0 lets the select
   shrink inside its line; a percentage width is avoided on purpose (it would break the desktop row). */
.reader-toolbar > *, .reader-toolbar form { min-inline-size: 0; max-inline-size: 100%; }
.audio-bar { gap: .5rem; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; }
.audio-bar select.reciter-select { inline-size: auto; max-inline-size: 100%; min-inline-size: 0; min-block-size: 38px; padding-block: .3rem; line-height: 1.4; }
.audio-bar .btn { max-inline-size: 100%; white-space: normal; text-align: center; }
.audio-bar [hidden], .reader-toolbar [hidden] { display: none !important; }

.mushaf-page { position: relative; min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .mushaf-page { padding: .9rem .6rem; border-width: 6px; }
  .mushaf-page-head { font-size: .85rem; }
}
.mushaf-page-head {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-display); font-size: .95rem; color: var(--gold-700);
  border-block-end: 1px solid var(--gold-300); padding-block-end: .35rem; margin-block-end: .9rem;
}
.mushaf-page-head a { color: inherit; text-decoration: none; }
.mushaf-page-head a:hover { text-decoration: underline; }
.mushaf-page-foot { text-align: center; margin-block-start: 1rem; }
.page-number {
  display: inline-grid; place-items: center; min-inline-size: 2.4rem; padding: .1rem .6rem;
  border: 1px solid var(--gold-500); border-radius: 999px; font-family: var(--font-display); color: var(--gold-700);
}
:root[data-theme="dark"] .mushaf-page-head, :root[data-theme="dark"] .page-number { color: var(--gold-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mushaf-page-head, :root:not([data-theme="light"]) .page-number { color: var(--gold-300); }
}

.mushaf-text .surah-header:first-child { margin-block-start: 0; }
.ayah:target, .ayah.selected { background: color-mix(in srgb, var(--gold-300) 45%, transparent); }
.ayah.playing { background: color-mix(in srgb, var(--green-500) 22%, transparent); }
.ayah .w { border-radius: 4px; }
button.ayah-number {
  border: 0; padding: 0; cursor: pointer; font-size: .62em; line-height: 1; color: var(--green-800);
  font-family: var(--font-ui); font-weight: 700;
}
button.ayah-number:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 1px; border-radius: 50%; }
.page-divider {
  display: flex; align-items: center; gap: .75rem; margin-block: 1.2rem .6rem; font-family: var(--font-display);
  font-size: .9rem; color: var(--gold-700);
}
.page-divider::before, .page-divider::after { content: ""; flex: 1; block-size: 1px; background: var(--gold-300); }
.page-divider a { color: inherit; }
.range-page .mushaf-text + .page-divider { margin-block-start: 1.6rem; }
.pager { margin-block-start: 1.25rem; }

/* index */
input.surah-filter { inline-size: min(100%, 260px); min-block-size: 38px; padding-block: .35rem; }
.surah-name { font-family: var(--font-display); font-size: 1.15rem; text-decoration: none; }
.division-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.division-grid.compact { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.division-card { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; text-align: center; }
.division-number { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1.2; }

/* search */
.search-results > li { display: block; }
.result-text { font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 2.1; text-align: start; text-align-last: auto; margin-block-end: .25rem; }
mark.hit { background: color-mix(in srgb, var(--gold-300) 75%, transparent); color: inherit; border-radius: 4px; padding-inline: .1em; }

@media print {
  .mushaf-page { box-shadow: none; }
}