/* © 2026 33Hikma. All rights reserved. Palettes solved against their worst surface. */
:root[data-theme]{--s0:var(--surface-0);--s1:var(--surface-1);--s2:var(--surface-2);--ink2:var(--muted);--hair:var(--line-ui);--on:var(--on-gold);--hl:var(--surface-2);--radius:16px}
body{font-weight:400}
.page{--paper:var(--surface-3)}
input::placeholder{color:var(--muted);opacity:1}
.chip .count,.ghost:disabled,.eq-primary:disabled{opacity:1}
.ghost:disabled,.eq-primary:disabled{border-style:dashed;cursor:not-allowed}
.ghost:disabled{color:var(--muted)}
#versions{font-size:12px}
#legal-links{display:flex;flex-wrap:wrap;gap:4px 16px}
#legal-links a,#origin-more{color:inherit;text-underline-offset:3px}
#legal-links a{display:inline-flex;align-items:center;min-height:44px}
.banner{font-size:max(12px,.62em)}
.banner span{background:var(--surface-2)}
.ayah-end{font-size:max(12px,.46em)}
mark,.w.hit{box-shadow:inset 0 -2px 0 var(--gold);border-radius:.12em}
.w:hover{background:var(--surface-2)}
.reading-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px}
.reading-heading .eyebrow{margin:0}
.reading-settings{border:1px solid var(--line-ui);border-radius:12px;margin-bottom:20px;background:var(--surface-1)}
.reading-settings>summary{cursor:pointer;padding:11px 16px;min-height:44px;color:var(--ink)}
.reading-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid var(--line-ui);padding:16px}
.reading-options fieldset{margin:0;padding:0;border:0;min-width:0}
.reading-options legend,.reading-size>span:first-child{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.reading-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.reading-theme{border-radius:8px;text-align:center;min-height:44px;padding:7px}
.reading-theme[aria-pressed=true],#reading-focus[aria-pressed=true]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.reading-size{display:grid;align-content:start;gap:8px;min-width:0}
.reading-size input{width:100%;min-height:44px;accent-color:var(--gold)}
.reading-options .seg button{padding:10px}
:root[data-reading-focus=true] .reader{grid-template-columns:minmax(0,1fr);grid-template-areas:"page"}
:root[data-reading-focus=true] .side{display:none}
:root[data-reading-layout=flow] .page{max-width:720px;padding:24px}
:root[data-reading-layout=flow] #origin-mini{max-width:720px}
:root[data-reading-layout=flow] .lines{font-size:var(--reader-size,28px);line-height:2.35;text-align:justify;text-align-last:start}
:root[data-reading-layout=flow] .line.text{display:inline;white-space:normal;text-align:inherit;text-align-last:inherit;overflow-wrap:anywhere}
:root[data-reading-layout=flow] .line.basmala{white-space:normal;display:block;text-align:center;text-align-last:center}
:root[data-reading-layout=flow] .banner{font-size:16px;margin:20px 0}
:root[data-reading-layout=flow] .page-head,:root[data-reading-layout=flow] .page-foot{font-size:13px}
@media(max-width:999px){.reader{grid-template-areas:"page" "search" "word"}.reading-options{grid-template-columns:1fr 1fr}.reading-size{grid-column:1/-1}}
@media(max-width:700px){
 .top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:10px 16px}
 .controls{display:contents}.product{display:none}.brand{grid-column:1;grid-row:1}
 #lang{grid-column:2;grid-row:1;max-width:130px}#theme{grid-column:3;grid-row:1}
 .tabs{grid-column:1/-1;grid-row:2;width:100%}.tabs button{min-height:44px}
 .reading-heading{align-items:flex-start}.reading-heading .eyebrow{max-width:60%;padding-top:8px}
 .reading-options{grid-template-columns:1fr;padding:12px}.reading-size{grid-column:auto}
 :root[data-reading-layout=flow] .page{padding:18px 14px}
}
/* The printed page on a phone: the sheet runs almost edge to edge and the ayah markers are compact, so the letters stay as large as the screen allows. */
@media(max-width:520px){
 :root[data-reading-layout=page] #page{margin-inline:-12px}
 :root[data-reading-layout=page] .page{padding:12px 6px 10px}
 :root[data-reading-layout=page] .lines{padding:4px 0}
 :root[data-reading-layout=page] .ayah-end{min-width:1.55em;height:1.55em;padding:0 .2em;margin:0 .1em;box-shadow:none;border-radius:999px}
}
/* A printed line that cannot fit at the smallest readable size continues on a second row set at the far end of the line. Its words and their order are unchanged. */
:root[data-reading-layout=page] .line.runover{white-space:normal;text-align:justify;text-align-last:end}
:root,:root[data-theme=paper]{--surface-0:#f7f5ef;--surface-1:#fffdf8;--surface-2:#ece9de;--surface-3:#fffdf8;--ink:#29332d;--muted:#64695e;--gold:#7b6234;--amber:#8b572c;--ruby:#983b4b;--emerald:#326653;--line-ui:#868679;--on-gold:#ffffff;color-scheme:light}
:root[data-theme=sand]{--surface-0:#efe6d4;--surface-1:#f7efdf;--surface-2:#e5d8c1;--surface-3:#fcf3e3;--ink:#382f25;--muted:#6a5d4a;--gold:#765b2a;--amber:#88512d;--ruby:#953c49;--emerald:#3a6550;--line-ui:#877961;--on-gold:#ffffff;color-scheme:light}
:root[data-theme=night]{--surface-0:#15231f;--surface-1:#1b2c25;--surface-2:#24372f;--surface-3:#182a23;--ink:#e9e6d9;--muted:#a6b8a9;--gold:#cbb577;--amber:#d5a574;--ruby:#d5959e;--emerald:#8dbb9c;--line-ui:#738b76;--on-gold:#15231f;color-scheme:dark}
:root[data-theme=contrast]{--surface-0:#161819;--surface-1:#202425;--surface-2:#292e30;--surface-3:#161819;--ink:#f3f2e9;--muted:#c1c7c2;--gold:#e7cf89;--amber:#e6ba8a;--ruby:#e4a5ae;--emerald:#a3cfb4;--line-ui:#98a29b;--on-gold:#15231f;color-scheme:dark}