/* The Quran page. Shared parts come from styles.css; these are the page's own.
   The tajweed colours are the app's own light-theme colours (app/src/lib/tajweed.ts, COLOURS.light). */

:root {
  --tj-silent: #9b968c;
  --tj-madd2: #b07d1f;
  --tj-madd246: #dd7419;
  --tj-madd45: #d33b2c;
  --tj-madd6: #8c1c1c;
  --tj-ghunnah: #2f8a3f;
  --tj-qalqalah: #2c68c9;
}
.tj-silent { color: var(--tj-silent); }
.tj-madd2 { color: var(--tj-madd2); }
.tj-madd246 { color: var(--tj-madd246); }
.tj-madd45 { color: var(--tj-madd45); }
.tj-madd6 { color: var(--tj-madd6); }
.tj-ghunnah { color: var(--tj-ghunnah); }
.tj-qalqalah { color: var(--tj-qalqalah); }
.tj-bg-silent { background: var(--tj-silent); }
.tj-bg-madd2 { background: var(--tj-madd2); }
.tj-bg-madd246 { background: var(--tj-madd246); }
.tj-bg-madd45 { background: var(--tj-madd45); }
.tj-bg-madd6 { background: var(--tj-madd6); }
.tj-bg-ghunnah { background: var(--tj-ghunnah); }
.tj-bg-qalqalah { background: var(--tj-qalqalah); }

/* ── Search ── */
.search-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 40px 64px; align-items: start; }
.search-grid .rows > li > b:first-child { font-size: 13px; }
.search-grid .rows .ar { font-size: 1.25em; line-height: 1.4; }
.finder h3 { font-family: var(--body); font-weight: 600; font-size: 17px; letter-spacing: 0; }
.finder .field { margin-top: 14px; }
.finder input[type='search'] { font-size: 17px; }
.finder .try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.finder .try button { font: 500 13.5px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.finder .try button:hover { border-color: var(--gold); }
.finder .try button.ar { font-family: var(--arabic); font-size: 16px; line-height: 1.2; padding: 3px 12px 6px; }
.finder .status { margin-top: 14px; font-size: 14.5px; color: var(--muted); min-height: 1.6em; }
.finder .status .ar { font-size: 1.25em; line-height: 1.2; }
.hits { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg); }
.hits:empty { display: none; }
.hits li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.hits li:first-child { border-top: 0; }
.hits .badge { min-width: 36px; height: 36px; padding: 0 7px; border-radius: 18px; border: 1px solid var(--gold); display: grid; place-items: center; font-family: var(--display); font-size: 12px; font-variant-numeric: tabular-nums; }
.hits b { display: block; font-weight: 600; }
.hits small { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.hits .ar { font-size: 22px; line-height: 1.7; color: var(--brand); }
.finder .small { margin-top: 16px; font-size: 13.5px; color: var(--muted); }

/* ── Translation and tafsir: two leaves ── */
.leaves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.leaf { background: var(--bg); border: 1px solid var(--line); border-radius: 26px; padding: 30px 30px 32px; display: flex; flex-direction: column; }
.leaf .label { display: block; }
.leaf h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; margin-top: 10px; }
.leaf .specimen { margin: 22px 0 0; padding: 20px 22px; background: var(--sheet); border-radius: 18px; border: 1px solid var(--line); }
.leaf .specimen blockquote { margin: 0; }
.leaf .specimen blockquote p { margin: 0; font-size: clamp(20px, 2.1vw, 24px); line-height: 1.35; }
.leaf .specimen blockquote p::before { content: '“'; }
.leaf .specimen blockquote p::after { content: '”'; }
.leaf .specimen .ar { display: block; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.45; color: var(--brand); text-align: right; }
.leaf .specimen small, .leaf .specimen figcaption { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.leaf > p { margin-top: 18px; color: var(--muted); }
.leaf .points { margin-top: 18px; }

/* ── Tajweed, on the deep band ── */
.tajweed .section-head h2 em { color: var(--sunrise); }
.tajweed .split { align-items: start; }
/* The app's own screen stays in view beside the longer sample on wide screens */
@media (min-width: 921px) { .tajweed .split > .window { position: sticky; top: 110px; } }
.tajweed .window figcaption { color: var(--on-deep); opacity: 0.75; }
.trio { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(246, 241, 230, 0.22); }
.trio li { padding: 22px 26px 4px 0; }
.trio li + li { padding-left: 26px; border-left: 1px solid rgba(246, 241, 230, 0.22); }
.trio b { display: block; font-weight: 600; }
.trio p { margin-top: 6px; font-size: 15.5px; opacity: 0.82; }

/* The sample: Quraysh drawn as the app draws a surah with Tajweed on */
.mushaf { margin: 0; background: var(--sheet); color: var(--ink); border-radius: 28px; padding: 18px 18px 20px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.55); }
.mushaf .head { background: var(--deep); color: var(--on-deep); border-radius: 20px; padding: 14px 18px 18px; text-align: center; border: 1px solid rgba(246, 241, 230, 0.16); }
.mushaf .head .ar { display: block; font-size: 34px; line-height: 1.8; }
.mushaf .head b { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: 0.06em; }
.mushaf .head small { display: block; margin-top: 2px; font-size: 13.5px; opacity: 0.8; }
.switches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* The display rule above would otherwise beat the hidden attribute, and the switches only work with JavaScript */
.switches[hidden] { display: none; }
.switch { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line); background: var(--sheet); color: var(--muted); font: 600 13.5px var(--body); cursor: pointer; }
.switch[aria-pressed='true'] { border-color: var(--brass); background: var(--brass-soft); color: var(--ink); }
.key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.key li { display: inline-flex; align-items: center; gap: 6px; }
.key .dot, .falls .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.key button { display: inline-flex; align-items: center; gap: 6px; margin: -4px -8px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.key button:hover { color: var(--ink); }
.key button[aria-pressed='true'] { border-color: var(--line); background: var(--bg); color: var(--ink); font-weight: 600; }
.key-hint { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mushaf .basmala { margin: 14px 0 2px; text-align: center; font-size: 28px; line-height: 2; color: var(--brand); }
.verses { list-style: none; margin: 0; padding: 0; }
.verses li { padding: 12px 2px 14px; border-top: 1px solid var(--line); }
.verses .ayah { font-size: clamp(27px, 2.9vw, 32px); line-height: 2.05; text-align: right; }
.verses .end { color: var(--gold); }
.verses .en { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.verses .num { font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); padding-top: 4px; font-variant-numeric: tabular-nums; }
.verses .tr { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.mushaf .credit { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); text-align: center; }
.mushaf .credit a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* Switches off, as in the app: plain ink without Tajweed, and only the verse number without English */
.mushaf.no-tajweed .ayah span:not(.end), .mushaf[data-only] .ayah span:not(.end) { color: inherit; }
.mushaf.no-tajweed .key, .mushaf.no-tajweed .key-hint { display: none; }
.mushaf.no-en .tr { display: none; }
.mushaf[data-only='silent'] .ayah span.tj-silent { color: var(--tj-silent); }
.mushaf[data-only='madd2'] .ayah span.tj-madd2 { color: var(--tj-madd2); }
.mushaf[data-only='madd246'] .ayah span.tj-madd246 { color: var(--tj-madd246); }
.mushaf[data-only='madd45'] .ayah span.tj-madd45 { color: var(--tj-madd45); }
.mushaf[data-only='madd6'] .ayah span.tj-madd6 { color: var(--tj-madd6); }
.mushaf[data-only='ghunnah'] .ayah span.tj-ghunnah { color: var(--tj-ghunnah); }
.mushaf[data-only='qalqalah'] .ayah span.tj-qalqalah { color: var(--tj-qalqalah); }

/* Where each colour falls: every word that carries it, on a light chip so the colours read true */
.falls-head { margin-top: 80px; max-width: 760px; }
.falls-head h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin-top: 12px; }
.falls-head p { margin-top: 14px; font-size: 17px; opacity: 0.85; }
.falls { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid rgba(246, 241, 230, 0.3); }
.falls li { padding: 18px 0 20px; border-bottom: 1px solid rgba(246, 241, 230, 0.18); }
.falls b { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.falls .dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px rgba(246, 241, 230, 0.55); }
.falls .rules { margin-top: 4px; font-size: 14px; opacity: 0.75; }
.falls .found { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.falls .w { display: inline-flex; align-items: center; gap: 8px; background: var(--sheet); color: var(--ink); border-radius: 12px; padding: 0 10px 0 12px; }
.falls .w .ar { font-size: 25px; line-height: 1.6; padding: 2px 0 10px; }
.falls .w small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Recitation ── */
.recite-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px 64px; align-items: start; }
@media (min-width: 921px) { .recite-grid > :first-child { position: sticky; top: 110px; } }
.recite-grid table.data td:last-child, .recite-grid table.data th:last-child { white-space: nowrap; }
.lit-yes { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.lit-yes::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--brass-soft); }
.lit-no { color: var(--muted); }
.nw { white-space: nowrap; }
.recite-grid .after { margin-top: 18px; color: var(--muted); font-size: 15.5px; }
.recite-grid .after + .after { margin-top: 12px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.chips li { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chips li.on { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.recitation .note { margin-top: 48px; max-width: 860px; }

@media (max-width: 920px) {
  .search-grid, .recite-grid { grid-template-columns: minmax(0, 1fr); }
  .leaves { grid-template-columns: minmax(0, 1fr); }
  .falls { grid-template-columns: minmax(0, 1fr); }
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio li, .trio li + li { padding: 18px 0 20px; border-left: 0; }
  .trio li + li { border-top: 1px solid rgba(246, 241, 230, 0.22); }
}
@media (max-width: 560px) {
  .leaf { padding: 22px 20px 24px; }
  .mushaf { padding: 12px 12px 16px; border-radius: 24px; }
  .verses .en { grid-template-columns: 48px minmax(0, 1fr); }
  .hits li { gap: 10px; padding: 10px 12px; }
}