/* Source paths carry their own weight. Do not synthesize bold strokes or fit words. */
.set-quran { min-width: 0; }
.set-quran-group { margin-block: 1rem; }
.set-quran-label { display: block; margin-bottom: .5rem; font-weight: 600; }
.set-quran-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.set-quran-option { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.set-quran-option.is-on { border-color: var(--accent); background: var(--accent-soft); }
.set-quran-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-quran-swatch { inline-size: 1rem; block-size: 1rem; border-radius: 50%; }
[data-quran-palette][hidden] { display: none; }
.quran-preview { display: block; padding: 1rem; border-block-start: 1px solid var(--border); margin-top: 1rem; direction: rtl; }
.quran-preview svg { height: 4.94rem; width: auto; flex: none; fill: currentColor; }
.im-verse-words, .verse-follow-line, .ann-verse-line { display: block; direction: rtl; }
.quran-reflow-row { display: flex; direction: rtl; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.quran-reflow-row:last-child { justify-content: flex-start; }
.quran-reflow-row > * { flex: 0 0 auto; max-width: none; }
.quran-reflow-row svg { shape-rendering: geometricPrecision; }
.quran-renderer-missing { font: .8rem var(--font, sans-serif); color: var(--text-muted); }

.quran-reflow-row > svg, .quran-reflow-row > .verse-follow-word svg, .quran-reflow-row > .verse-follow-end svg { max-width: none; }

.verse-follow-word[role="button"] { cursor: pointer; }
.verse-follow-word[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root {
  --quran-band: 2.75; /* 1000-unit em; includes the two stacked marks in 36:52. */
  --quran-tone-accent: var(--accent);
  --quran-tone-blue: color-mix(in oklch, var(--band-blue) 80%, var(--accent));
  --quran-tone-rose: color-mix(in oklch, var(--danger) 85%, var(--accent));
  --quran-tone-gold: color-mix(in oklch, var(--gold) 85%, var(--accent));
  --quran-tone-purple: color-mix(in oklch, color-mix(in oklch, var(--band-blue) 65%, var(--danger)) 80%, var(--accent));
}
.quran-preview svg { height: calc(1.9rem * var(--quran-band) * var(--quran-scale, 1)); }
.im-verse-words svg { height: calc(2.1em * var(--quran-band) * var(--quran-scale, 1)); }
.im-breath-words svg { height: calc(1.4em * var(--quran-band) * var(--quran-scale, 1)); }
.verse-follow-word svg, .verse-follow-end svg { height: calc(.85238077em * var(--quran-band) * var(--quran-scale, 1)); }
.qw-glyph.is-vector { height: calc(1em * var(--quran-band) * var(--quran-scale, 1)); }
/* Keep the size preference useful when a selected asset is unavailable. */
.qw-glyph.is-text { font-size: calc(1.2rem * var(--quran-scale, 1)); }
.im-breath-words span { font-size: calc(1.15rem * var(--quran-scale, 1)); }
.im-verse-text { font-size: calc(clamp(1.75rem, 3vw, 2.15rem) * var(--quran-scale, 1)); }
@media (max-width: 560px) {
  .im-verse-text { font-size: calc(1.75rem * var(--quran-scale, 1)); }
}
.verse-follow-word:not(:has(svg)) { font-size: calc(1em * var(--quran-scale, 1)); }
:root { --quran-tone-muted: color-mix(in oklch, var(--text) 65%, var(--surface)); }
[data-quran-tajweed][hidden], [data-quran-tajweed-rules][hidden] { display: none; }
.set-tajweed { margin-block: 1.25rem; border-block-start: 1px solid var(--border); padding-top: 1rem; }
.set-tajweed-master { display: flex; align-items: center; gap: .65rem; min-height: 44px; font-weight: 600; }
.set-tajweed input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex: none; }
.set-tajweed-note, .set-tajweed-rule small { color: var(--text-muted); font-size: .85rem; line-height: 1.7; }
.set-tajweed-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-block: 1rem; font-size: .8rem; }
.set-tajweed-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.set-tajweed-rules { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: .65rem; }
.set-tajweed-rule { padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm,8px); background: var(--surface); min-width: 0; }
.set-tajweed-rule label { display: flex; gap: .6rem; min-height: 44px; cursor: pointer; align-items: start; }
.set-tajweed-rule small { display: block; }
quran-tajweed-example { display: block; direction: rtl; overflow-x: auto; }
quran-tajweed-example svg { height: calc(1.25rem * var(--quran-band) * var(--quran-scale,1)); width: auto; fill: currentColor; }
.quran-example-reference { display: block; color: var(--text-muted); font-size: .75rem; margin-top: .35rem; }
.quran-preview .quran-asset-reference { display: flex; gap: .5rem; align-items: center; color: var(--text-muted); font-size: .8rem; margin-top: .75rem; }
.quran-preview .quran-asset-reference .quran-asset-number { display: grid; place-items: center; width: 2rem; height: 2rem; position: relative; color: var(--text); }
.quran-asset-number span { position: relative; font-family: 'Amiri Quran',serif; font-size: .8rem; }

.quran-asset-number::before { content: ''; position: absolute; inset: 0; background: currentColor; mask: url('./media/quran/assets/ayah-marker.svg') center / contain no-repeat; }

:root { --quran-tone-madd-stop: color-mix(in oklch, var(--quran-tone-purple) 40%, var(--quran-tone-gold)); --quran-tone-madd-six: color-mix(in oklch, var(--quran-tone-rose) 70%, var(--quran-tone-gold)); }
/* Eight separated hues; theme changes tint them without collapsing their meanings. */
:root { --quran-tajweed-lightness: .48; --quran-tajweed-chroma: .14;
  --quran-tone-tajweed-heavy: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 250) 94%, var(--accent));
  --quran-tone-tajweed-qalqalah: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 200) 94%, var(--accent));
  --quran-tone-tajweed-ghunna: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 145) 94%, var(--accent));
  --quran-tone-tajweed-natural: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 90) 94%, var(--accent));
  --quran-tone-tajweed-stop: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 55) 94%, var(--accent));
  --quran-tone-tajweed-extended: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 315) 94%, var(--accent));
  --quran-tone-tajweed-six: color-mix(in oklch, oklch(var(--quran-tajweed-lightness) var(--quran-tajweed-chroma) 20) 94%, var(--accent));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --quran-tajweed-lightness: .8; --quran-tajweed-chroma: .12; } }
:root[data-theme="dark"] { --quran-tajweed-lightness: .8; --quran-tajweed-chroma: .12; }

/* The number uses its measured ink bounds rather than the font's line box. */
.quran-asset-number text { font-family: 'Amiri Quran','AmiriQuran',serif; fill:currentColor; direction:ltr; text-anchor:start; }
.quran-preview .quran-asset-number svg { position:absolute; inset:0; width:100%; height:100%; }
quran-tajweed-help { display:none; vertical-align:middle; margin-inline-start:.35rem; }
:root[data-quran-tajweed-active="true"] quran-tajweed-help { display:inline-block; }
.quran-help-button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid var(--border); border-radius:50%; color:var(--text); background:var(--surface); font:inherit; cursor:pointer; }
.quran-help-panel { position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); overflow:auto; direction:rtl; box-shadow:var(--shadow-lg); font-size:14px; }
.quran-help-panel:popover-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.quran-help-panel strong { display:block; margin-bottom:12px; }
.quran-help-panel > strong,.quran-help-panel > button { grid-column:1/-1; }
.quran-help-rule { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 9px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); }
.quran-help-rule i { flex:0 0 12px; height:12px; border-radius:50%; }
.quran-help-rule b { display:block; min-width:0; font-size:.76rem; line-height:1.45; }
.quran-help-panel button { padding:6px 14px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface); cursor:pointer; }
@media (max-width:380px) { .quran-help-panel { grid-template-columns:1fr; } .quran-help-panel > strong,.quran-help-panel > button { grid-column:auto; } }

/* ---------------------------------------------------------------------------
   The Quran reader's settings (webapp/mushaf-settings.js), drawn in the
   app's «قرآن» settings tab and in the reader's own settings tab - which is
   why they live here, in the one stylesheet both documents link.

   The papers are printed colours, not theme colours: a cream page is cream,
   as a printed page is. Each names its own ink so text stays legible on it,
   and the reader switches to night paper when the app is dark.
   --------------------------------------------------------------------------- */
:root {
  --mushaf-paper-cream: oklch(0.972 0.022 88);  --mushaf-ink-cream: oklch(0.24 0.02 65);
  --mushaf-paper-white: oklch(1 0 0);           --mushaf-ink-white: oklch(0.2 0 0);
  --mushaf-paper-sepia: oklch(0.925 0.04 78);   --mushaf-ink-sepia: oklch(0.29 0.045 55);
  --mushaf-paper-gray: oklch(0.9 0.006 250);    --mushaf-ink-gray: oklch(0.22 0.012 250);
  /* Dark papers: a near-neutral grey and a near-white ink. A beige ink on a
     blue-grey page read as dim and tinted (2026-09-29). */
  --mushaf-paper-night: oklch(0.2 0.005 250);   --mushaf-ink-night: oklch(0.94 0.006 85);
  --mushaf-paper-black: oklch(0.13 0 0);        --mushaf-ink-black: oklch(0.91 0.004 85);
}
/* A colour dropdown (quran-settings.js selectMarkup()): the choice on a
   button, the list opening beneath it. Used for the paper and the harakat
   and waqf colours. */
.set-select { position: relative; display: grid; gap: 6px; margin-block: 10px; }
.set-select-label { font-weight: var(--weight-bold, 700); font-size: var(--text-sm, .9rem); }
.set-select-button {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; max-inline-size: 320px; min-height: 44px; padding: 6px 12px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.set-select-button:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.set-select-button[aria-expanded="true"], .set-select-button:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent); outline: none; }
.set-select-value { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.set-select-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A choice's one-line meaning: in the list under its name, never on the button. */
.set-select-option .set-select-name { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
.set-select-note { color: var(--text-muted); font-size: var(--text-xs, .8rem); font-weight: normal; line-height: 1.5; }
.set-select-value .set-select-note { display: none; }
.set-select-swatch { inline-size: 22px; block-size: 22px; flex: none; border-radius: 7px; border: 1px solid color-mix(in oklch, var(--text) 18%, transparent); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--surface) 35%, transparent); }
.set-select-chevron { inline-size: 18px; block-size: 18px; flex: none; color: var(--text-muted); transition: transform .15s ease; }
.set-select-button[aria-expanded="true"] .set-select-chevron { transform: rotate(180deg); }
.set-select-list {
  position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 4px); inline-size: min(100%, 320px); max-block-size: 300px; overflow-y: auto;
  display: grid; gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg);
  animation: set-select-in .12s ease-out;
}
.set-select-list[hidden] { display: none; }
@keyframes set-select-in { from { opacity: 0; transform: translateY(-4px); } }
.set-select-option { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.set-select-option:hover, .set-select-option:focus-visible { background: var(--accent-soft); outline: none; }
.set-select-option[aria-selected="true"] { background: var(--accent-soft); font-weight: var(--weight-bold, 700); }
.set-select-option[aria-selected="true"]::after { content: ''; margin-inline-start: auto; inline-size: 8px; block-size: 14px; border: solid var(--accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .set-select-list { animation: none; } .set-select-button, .set-select-chevron { transition: none; } }
.mq { padding-block-end: 12px; }
.mq-row { margin-block: 12px 12px; }
.mq-label { display: block; margin-bottom: 8px; font-weight: var(--weight-bold, 700); font-size: var(--text-sm, .9rem); }
.mq-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-option {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-sm, .9rem); cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.mq-option:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.mq-option.is-on { border-color: var(--accent); background: var(--accent-soft); font-weight: var(--weight-bold, 700); }
.mq-option:focus-visible, .mq-preset:focus-visible, .mq-toggle input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mq-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.mq-preset {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; text-align: start; min-height: 72px;
  border: 2px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--surface); color: var(--text);
  font: inherit; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.mq-preset:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.mq-preset.is-on { border-color: var(--accent); background: var(--accent-soft); }
.mq-preset-text { display: flex; flex-direction: column; gap: 2px; }
.mq-preset-text b { font-size: var(--text-md, 1rem); }
.mq-preset-text small { color: var(--text-muted); font-size: var(--text-xs, .78rem); line-height: 1.6; }
/* A thumbnail page in the app's light or dark: a heading band, four lines,
   the frame if the preset has one; a minimal page is all text. */
.mq-preset-page {
  --pp: var(--mushaf-paper-cream); --pi: var(--mushaf-ink-cream);
  display: grid; gap: 3px; align-content: start; flex: none; width: 44px; aspect-ratio: .7; padding: 7px 7px;
  border-radius: 4px; background: var(--pp); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pi) 15%, transparent), 0 2px 6px color-mix(in oklch, black 18%, transparent);
}
.mq-preset-page[data-minimal="true"] { --pp: var(--mushaf-paper-white); --pi: var(--mushaf-ink-white); padding: 4px 3px; gap: 2.5px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mq-preset-page { --pp: var(--mushaf-paper-night); --pi: var(--mushaf-ink-night); } }
:root[data-theme="dark"] .mq-preset-page { --pp: var(--mushaf-paper-night); --pi: var(--mushaf-ink-night); }
.mq-preset-page[data-frame="true"] { box-shadow: inset 0 0 0 2px var(--pp), inset 0 0 0 4px color-mix(in oklch, oklch(0.7 0.1 160) 80%, var(--pi)), 0 2px 6px color-mix(in oklch, black 18%, transparent); }
.mq-preset-page i { display: block; height: 2px; border-radius: 2px; background: color-mix(in oklch, var(--pi) 70%, var(--pp)); }
.mq-preset-page[data-script="digital-khatt"] i { height: 2.5px; border-radius: 0 2px 2px 0; }
.mq-preset-page i.mq-preset-head { height: 5px; margin-bottom: 2px; background: linear-gradient(90deg, oklch(0.7 0.1 160) 0 30%, var(--pp) 30% 70%, oklch(0.7 0.1 160) 70%); }
.mq-preset-page[data-minimal="true"] i.mq-preset-head { background: none; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--pi) 45%, var(--pp)); border-radius: 3px; }

.mq-toggle[hidden] { display: none; }
.mq-toggle { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-block: 8px; cursor: pointer; }
.mq-toggle input { inline-size: 1.15rem; block-size: 1.15rem; margin-top: 3px; accent-color: var(--accent); flex: none; }
.mq-toggle span { display: flex; flex-direction: column; gap: 2px; }
.mq-toggle small { color: var(--text-muted); font-size: var(--text-sm, .86rem); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .mq-option, .mq-preset { transition: none; } }