
:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#eee;color:#17212b}
*{box-sizing:border-box}body{margin:0;padding:clamp(.75rem,2vw,1.5rem);background:#e9e7e1}
.supp-reader{--page:#fbf8f1;--panel:#fffdf8;--soft:#f4eee4;--ink:#1e2933;--muted:#66727c;--clay:#b65f49;--brass:#b99548;--frame:#b99548;--line:rgba(30,41,51,.13);--ornament:rgba(185,149,72,.2);position:relative;max-width:1440px;margin:auto;padding:clamp(2rem,5vw,5rem);color:var(--ink);background:var(--page);border-radius:20px;isolation:isolate;overflow:hidden;transition:background .18s ease,color .18s ease}
.supp-reader::before{content:"";position:absolute;inset:12px;z-index:-1;border:1px solid color-mix(in srgb,var(--frame) 72%,transparent);border-radius:14px;background:repeating-conic-gradient(from 45deg at 50% 50%,var(--ornament) 0 6deg,transparent 6deg 18deg,color-mix(in srgb,var(--brass) 22%,transparent) 18deg 24deg,transparent 24deg 36deg);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:9px;pointer-events:none;opacity:.92}
.hero{position:relative;min-height:310px;display:grid;align-content:center;max-width:100%;margin:0 0 1.5rem;padding:clamp(2rem,5vw,4rem);border-radius:18px;background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 96%,transparent) 0 54%,color-mix(in srgb,var(--soft) 80%,transparent) 100%),radial-gradient(circle at 82% 48%,var(--ornament) 0 8%,transparent 8.5% 18%,color-mix(in srgb,var(--frame) 12%,transparent) 18.5% 20%,transparent 20.5%);overflow:hidden}.hero .kicker{margin:0;color:var(--clay);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero-arabic{margin:.4rem 0 .25rem;font-family:"Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;font-size:clamp(4rem,7vw,6.3rem);line-height:1.15;color:var(--frame)}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.6rem,3vw,2.7rem);margin:.2rem 0 .5rem}.hero>p:last-child{max-width:58ch;color:var(--muted);line-height:1.65;margin:.2rem 0 0}
.toolbar{position:sticky;top:1rem;z-index:4;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(280px,1fr);gap:1rem;padding:1rem;margin-bottom:1rem;background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 40px color-mix(in srgb,var(--ink) 7%,transparent);backdrop-filter:blur(12px)}.field{display:grid;gap:.45rem}.field>span,.translation>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}select{min-height:46px;width:100%;border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;color:var(--ink);background:var(--panel);font:inherit}.layer-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.layer-controls label{display:flex;align-items:center;gap:.42rem;min-height:44px;padding:.45rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:.9rem}.theme-picker{grid-column:1/-1;border-top:1px solid var(--line);padding-top:.8rem}.theme-picker>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;cursor:pointer;font-weight:700}.theme-picker>summary strong{color:var(--frame)}.theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;padding:.7rem 0}.theme-option{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:.55rem;align-items:center;min-height:54px;border:1px solid var(--line);border-radius:11px;padding:.55rem .65rem;background:var(--panel);color:var(--ink);text-align:left;font:inherit;cursor:pointer}.theme-option.is-selected{border-color:var(--frame);box-shadow:inset 0 0 0 1px var(--frame)}.swatch{width:26px;height:26px;border-radius:8px;border:2px solid var(--brass);background:var(--soft)}.tier{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .35rem;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.tier--member{color:var(--brass)}.theme-note{font-size:.75rem;color:var(--muted);margin:.2rem 0 0}.theme-option:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--frame) 36%,transparent);outline-offset:2px}
.section-nav{display:flex;gap:.45rem;overflow:auto;padding:.6rem 0 1.1rem}.section-nav a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.86rem;background:var(--panel)}.section-nav a[aria-current="page"]{border-color:var(--frame);background:var(--soft)}
.reading{max-width:920px;margin:0 auto}.segment{display:grid;grid-template-columns:84px minmax(0,1fr);gap:1.35rem;padding:clamp(1.7rem,4vw,3rem) 0;border-bottom:1px solid var(--line);scroll-margin-top:8rem}.segment-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:.25rem}.segment-number,.repeat{min-width:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--frame) 60%,transparent);border-radius:999px;background:color-mix(in srgb,var(--soft) 70%,var(--panel));color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}.repeat{border-radius:10px;color:var(--frame)}.badge{font-size:.7rem;line-height:1.3;padding:.28rem .42rem;border-radius:7px;background:var(--soft);border:1px solid var(--line);font-weight:700}.badge--later{border-style:dashed}.arabic{margin:0;text-align:right;font-family:"Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;font-size:clamp(2.2rem,4.2vw,3.35rem);line-height:1.9;letter-spacing:0}.transliteration{font-style:italic;color:var(--muted);line-height:1.7}.translation{line-height:1.75}.translation>span{display:block;margin-bottom:.2rem}.variant{display:grid;gap:.2rem;padding:.8rem 1rem;border-left:3px solid var(--brass);border-radius:0 10px 10px 0;background:var(--soft);font-size:.9rem;line-height:1.55}.variant span{color:var(--muted)}.sources{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.sources summary{min-height:48px;display:flex;align-items:center;padding:.8rem 1rem;cursor:pointer;font-weight:800}.sources>div{padding:0 1rem 1rem;border-top:1px solid var(--line);color:var(--muted);line-height:1.65}.prototype-foot{max-width:920px;margin:2rem auto 0;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}
.supp-reader[data-ba-supp-theme="classic-ivory"]{--page:#fbf8f1;--panel:#fffdf8;--soft:#f4eee4;--ink:#1e2933;--muted:#66727c;--clay:#b65f49;--brass:#b99548;--frame:#b99548;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="ottoman-teal"]{--page:#eef5f1;--panel:#f9fcf9;--soft:#e6f0eb;--ink:#173a3c;--muted:#526c6c;--clay:#9a564a;--brass:#b58f43;--frame:#39706f;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="mamluk-blue"]{--page:#eef2f8;--panel:#fafcff;--soft:#e6edf7;--ink:#172a45;--muted:#52647a;--clay:#a2564b;--brass:#c19b50;--frame:#345886;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="andalusian-gold"]{--page:#fff7df;--panel:#fffdf6;--soft:#f7edcf;--ink:#372c1c;--muted:#77684e;--clay:#9f4f3e;--brass:#aa7925;--frame:#aa7925;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="moroccan-green"]{--page:#eef4e8;--panel:#fbfdf8;--soft:#e5eddc;--ink:#203b2b;--muted:#5b705e;--clay:#ad5b45;--brass:#b49145;--frame:#49714f;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="hijazi-sand"]{--page:#f3e7cf;--panel:#fbf5e8;--soft:#ead9ba;--ink:#392d24;--muted:#6d5d50;--clay:#a85f45;--brass:#9d793a;--frame:#9d793a;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="damascus-rose"]{--page:#f8eeee;--panel:#fffafa;--soft:#f1e2e1;--ink:#412b34;--muted:#795f68;--clay:#a94f57;--brass:#b08a47;--frame:#965d69;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="night-illumination"]{--page:#101b29;--panel:#172536;--soft:#1b2c3d;--ink:#f7f1df;--muted:#c4bdac;--clay:#ef9b7e;--brass:#d6b86b;--frame:#d6b86b;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="indigo-margins"]{--page:#ecebf5;--panel:#faf9ff;--soft:#e4e2ef;--ink:#292845;--muted:#62617b;--clay:#a95e55;--brass:#b49653;--frame:#575381;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="sage-garden"]{--page:#f0f2e8;--panel:#fcfcf8;--soft:#e7eadc;--ink:#2d382d;--muted:#667064;--clay:#a7614f;--brass:#a88d4a;--frame:#6e7f62;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="sepia-archive"]{--page:#eadcc5;--panel:#f5ead7;--soft:#e2cfb1;--ink:#403226;--muted:#6b5949;--clay:#9f5c45;--brass:#94713b;--frame:#806343;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="pearl-gold"]{--page:#f8f8f3;--panel:#fffefa;--soft:#efeee7;--ink:#252c31;--muted:#687076;--clay:#b36d55;--brass:#b79a53;--frame:#c4ad72;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="timurid-azure"]{--page:#edf5f8;--panel:#fbfeff;--soft:#e1eef2;--ink:#17344a;--muted:#587083;--clay:#9b584c;--brass:#c69b45;--frame:#2d7290;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="safavid-lapis"]{--page:#111f34;--panel:#172941;--soft:#1d3048;--ink:#f5edd8;--muted:#b8c1ca;--clay:#d58b71;--brass:#e1c36e;--frame:#4479b6;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="maghrebi-crimson"]{--page:#f8ece7;--panel:#fffaf8;--soft:#f2ded8;--ink:#42262a;--muted:#765e61;--clay:#a64343;--brass:#b88b42;--frame:#9c3f45;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}
.supp-reader[data-ba-supp-theme="mughal-emerald"]{--page:#edf4ec;--panel:#fbfdfa;--soft:#e4eee1;--ink:#173c32;--muted:#587267;--clay:#a05749;--brass:#b99246;--frame:#356f59;--line:color-mix(in srgb,var(--ink) 14%,transparent);--ornament:color-mix(in srgb,var(--frame) 22%,transparent);}

/* Swatches use each option's own palette, independent of the currently active theme. */
.theme-option[data-theme-option="classic-ivory"] .swatch{background:linear-gradient(135deg,#fbf8f1 0 46%,#b99548 47% 67%,#b99548 68% 82%,#fffdf8 83%);border-color:#b99548}
.theme-option[data-theme-option="ottoman-teal"] .swatch{background:linear-gradient(135deg,#eef5f1 0 46%,#39706f 47% 67%,#b58f43 68% 82%,#f9fcf9 83%);border-color:#39706f}
.theme-option[data-theme-option="mamluk-blue"] .swatch{background:linear-gradient(135deg,#eef2f8 0 46%,#345886 47% 67%,#c19b50 68% 82%,#fafcff 83%);border-color:#345886}
.theme-option[data-theme-option="andalusian-gold"] .swatch{background:linear-gradient(135deg,#fff7df 0 46%,#aa7925 47% 67%,#aa7925 68% 82%,#fffdf6 83%);border-color:#aa7925}
.theme-option[data-theme-option="moroccan-green"] .swatch{background:linear-gradient(135deg,#eef4e8 0 46%,#49714f 47% 67%,#b49145 68% 82%,#fbfdf8 83%);border-color:#49714f}
.theme-option[data-theme-option="hijazi-sand"] .swatch{background:linear-gradient(135deg,#f3e7cf 0 46%,#9d793a 47% 67%,#9d793a 68% 82%,#fbf5e8 83%);border-color:#9d793a}
.theme-option[data-theme-option="damascus-rose"] .swatch{background:linear-gradient(135deg,#f8eeee 0 46%,#965d69 47% 67%,#b08a47 68% 82%,#fffafa 83%);border-color:#965d69}
.theme-option[data-theme-option="night-illumination"] .swatch{background:linear-gradient(135deg,#101b29 0 46%,#d6b86b 47% 67%,#d6b86b 68% 82%,#172536 83%);border-color:#d6b86b}
.theme-option[data-theme-option="indigo-margins"] .swatch{background:linear-gradient(135deg,#ecebf5 0 46%,#575381 47% 67%,#b49653 68% 82%,#faf9ff 83%);border-color:#575381}
.theme-option[data-theme-option="sage-garden"] .swatch{background:linear-gradient(135deg,#f0f2e8 0 46%,#6e7f62 47% 67%,#a88d4a 68% 82%,#fcfcf8 83%);border-color:#6e7f62}
.theme-option[data-theme-option="sepia-archive"] .swatch{background:linear-gradient(135deg,#eadcc5 0 46%,#806343 47% 67%,#94713b 68% 82%,#f5ead7 83%);border-color:#806343}
.theme-option[data-theme-option="pearl-gold"] .swatch{background:linear-gradient(135deg,#f8f8f3 0 46%,#c4ad72 47% 67%,#b79a53 68% 82%,#fffefa 83%);border-color:#c4ad72}
.theme-option[data-theme-option="timurid-azure"] .swatch{background:linear-gradient(135deg,#edf5f8 0 46%,#2d7290 47% 67%,#c69b45 68% 82%,#fbfeff 83%);border-color:#2d7290}
.theme-option[data-theme-option="safavid-lapis"] .swatch{background:linear-gradient(135deg,#111f34 0 46%,#4479b6 47% 67%,#e1c36e 68% 82%,#172941 83%);border-color:#4479b6}
.theme-option[data-theme-option="maghrebi-crimson"] .swatch{background:linear-gradient(135deg,#f8ece7 0 46%,#9c3f45 47% 67%,#b88b42 68% 82%,#fffaf8 83%);border-color:#9c3f45}
.theme-option[data-theme-option="mughal-emerald"] .swatch{background:linear-gradient(135deg,#edf4ec 0 46%,#356f59 47% 67%,#b99246 68% 82%,#fbfdfa 83%);border-color:#356f59}

.supp-reader[data-ba-supp-theme="night-illumination"] .hero-arabic,.supp-reader[data-ba-supp-theme="safavid-lapis"] .hero-arabic{color:var(--brass);text-shadow:0 0 18px color-mix(in srgb,var(--brass) 22%,transparent)}
.supp-reader[data-ba-supp-theme="mamluk-blue"]::before,.supp-reader[data-ba-supp-theme="timurid-azure"]::before{background:conic-gradient(from 22.5deg,var(--ornament) 0 12.5%,transparent 12.5% 25%,color-mix(in srgb,var(--brass) 25%,transparent) 25% 37.5%,transparent 37.5% 50%,var(--ornament) 50% 62.5%,transparent 62.5% 75%,color-mix(in srgb,var(--brass) 25%,transparent) 75% 87.5%,transparent 87.5%)}
.supp-reader[data-ba-supp-theme="ottoman-teal"]::before,.supp-reader[data-ba-supp-theme="sage-garden"]::before,.supp-reader[data-ba-supp-theme="mughal-emerald"]::before{background:radial-gradient(ellipse at 25% 30%,var(--ornament) 0 20%,transparent 21%) 0 0/28px 22px,radial-gradient(ellipse at 75% 70%,color-mix(in srgb,var(--brass) 23%,transparent) 0 18%,transparent 19%) 0 0/28px 22px}
.supp-reader[data-ba-supp-theme="hijazi-sand"]::before,.supp-reader[data-ba-supp-theme="sepia-archive"]::before,.supp-reader[data-ba-supp-theme="maghrebi-crimson"]::before{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--frame) 45%,transparent) 0 3px,transparent 3px 8px,var(--ornament) 8px 10px,transparent 10px 16px)}
.supp-reader[data-ba-supp-theme="damascus-rose"]::before,.supp-reader[data-ba-supp-theme="pearl-gold"]::before{background:radial-gradient(circle at 25% 50%,var(--ornament) 0 4px,transparent 4.5px) 0 0/24px 18px,radial-gradient(circle at 75% 50%,color-mix(in srgb,var(--brass) 28%,transparent) 0 3px,transparent 3.5px) 0 0/24px 18px}
@media(max-width:1020px){.toolbar{grid-template-columns:1fr 1fr;position:static}.theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){body{padding:0;background:var(--page,#eee)}.supp-reader{border-radius:0;padding:1.75rem 1.2rem 4rem}.supp-reader::before{inset:7px;padding:7px}.hero{min-height:260px;padding:2rem 1.25rem}.hero-arabic{font-size:3.6rem}.hero h1{font-size:1.45rem}.toolbar{grid-template-columns:1fr;border-radius:14px}.theme-grid{grid-template-columns:1fr}.theme-picker>summary{align-items:flex-start;flex-wrap:wrap}.theme-picker>summary strong{width:100%}.segment{grid-template-columns:1fr;gap:.75rem;scroll-margin-top:1rem}.segment-meta{flex-direction:row;align-items:center}.arabic{font-size:2.15rem;line-height:1.95}.section-nav{margin-inline:-.2rem;padding-inline:.2rem}.reading{width:100%}}
@media(max-width:360px){.supp-reader{padding-inline:1rem}.arabic{font-size:1.95rem}.hero-arabic{font-size:3.1rem}.theme-option{grid-template-columns:28px minmax(0,1fr) auto}}
@media(prefers-reduced-motion:reduce){.supp-reader,*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Segment detail lightbox: presentation follows the active reader theme; content remains separately reviewed. */
.detail-hint{max-width:920px;margin:0 auto .3rem;color:var(--muted);font-size:.84rem;line-height:1.6}
.segment{position:relative;transition:background .16s ease,box-shadow .16s ease}.segment:hover{background:color-mix(in srgb,var(--soft) 42%,transparent);box-shadow:0 0 0 1rem color-mix(in srgb,var(--soft) 42%,transparent)}
.segment-detail-trigger{min-height:44px;max-width:82px;border:1px solid var(--line);border-radius:10px;padding:.45rem .55rem;background:var(--panel);color:var(--ink);font:inherit;font-size:.7rem;font-weight:800;line-height:1.25;text-align:left;cursor:pointer}.segment-detail-trigger:hover{border-color:var(--frame);color:var(--frame)}.segment-detail-trigger:focus-visible,.segment-lightbox button:focus-visible{outline:3px solid color-mix(in srgb,var(--frame) 36%,transparent);outline-offset:2px}
body.supp-lightbox-open{overflow:hidden}
.segment-lightbox{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:clamp(1rem,4vw,3rem);border:0;background:color-mix(in srgb,var(--ink) 42%,transparent);color:var(--ink);overflow:hidden}.segment-lightbox::backdrop{background:transparent}.segment-lightbox[open]{display:grid;place-items:center}
.segment-lightbox__panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(860px,100%);max-height:min(92dvh,900px);border:1px solid color-mix(in srgb,var(--frame) 55%,transparent);border-radius:22px;background:var(--page);box-shadow:0 30px 100px color-mix(in srgb,#000 36%,transparent);overflow:hidden;position:relative}.segment-lightbox__panel::before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid color-mix(in srgb,var(--frame) 40%,transparent);border-radius:15px;opacity:.55}
.segment-lightbox__header{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;padding:1.25rem 1.4rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 96%,transparent)}.segment-lightbox__eyebrow,.segment-lightbox__label{margin:0 0 .25rem;color:var(--clay);font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.segment-lightbox__header h2{margin:.15rem 0 .2rem;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,3vw,1.8rem)}.segment-lightbox__header [data-lightbox-context]{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}.segment-lightbox__close{min-width:64px;min-height:44px;border:1px solid var(--line);border-radius:999px;padding:.5rem .8rem;background:var(--panel);color:var(--ink);font:inherit;font-size:.8rem;font-weight:800;cursor:pointer}
.segment-lightbox__scroll{position:relative;z-index:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:clamp(1.4rem,4vw,2.3rem)}.segment-lightbox__identity{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.segment-lightbox__number{min-width:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--frame) 60%,transparent);border-radius:999px;background:var(--soft);font-weight:850}.segment-lightbox__arabic{margin:.3rem 0 1rem;text-align:right;font-family:"Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;font-size:clamp(2.35rem,5vw,3.8rem);line-height:1.9}.segment-lightbox__transliteration{margin:.2rem 0 1.25rem;color:var(--muted);font-style:italic;line-height:1.7}
.segment-lightbox__section{margin-top:.8rem;padding:1rem 1.05rem;border:1px solid var(--line);border-radius:13px;background:var(--panel);line-height:1.72}.segment-lightbox__section[hidden]{display:none}.segment-lightbox__section p:last-child{margin-bottom:0}.segment-lightbox__section--explanation{border-left:3px solid var(--brass);background:color-mix(in srgb,var(--soft) 48%,var(--panel))}.segment-lightbox__section--sources{border-style:dashed}.segment-lightbox__attribution{color:var(--muted);font-size:.76rem}.segment-lightbox__attribution::before{content:"Source: ";font-weight:800}.segment-lightbox__label{color:var(--frame)}
.segment-lightbox__footer{position:relative;z-index:1;display:grid;grid-template-columns:minmax(96px,auto) 1fr minmax(96px,auto);align-items:center;gap:.7rem;padding:.9rem 1.25rem;border-top:1px solid var(--line);background:var(--panel)}.segment-lightbox__footer button{min-height:44px;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;background:var(--page);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}.segment-lightbox__footer button:disabled{opacity:.38;cursor:not-allowed}.segment-lightbox__footer p{margin:0;text-align:center;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}

@media(max-width:640px){.detail-hint{margin:.15rem 0 .4rem}.segment:hover{box-shadow:none}.segment-detail-trigger{max-width:none}.segment-lightbox{padding:0;place-items:end center;background:color-mix(in srgb,var(--ink) 48%,transparent)}.segment-lightbox__panel{width:100%;max-height:94dvh;border-radius:20px 20px 0 0;border-bottom:0}.segment-lightbox__header{padding:1rem 1.1rem}.segment-lightbox__scroll{padding:1.2rem 1.1rem 1.5rem}.segment-lightbox__arabic{font-size:2.35rem}.segment-lightbox__footer{grid-template-columns:1fr auto 1fr;padding:.8rem 1rem}.segment-lightbox__footer button:last-child{justify-self:stretch}.segment-lightbox__footer button:first-child{justify-self:stretch}}


/* Only reviewed reader-value Qur'an connections belong in the public lightbox. */
.segment-lightbox__quran-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.segment-lightbox__quran-links li{display:grid;gap:4px}
.segment-lightbox__quran-kind{font-size:.8rem;opacity:.8}
.segment-lightbox__quran-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;text-underline-offset:.22em;width:fit-content}
.segment-lightbox__quran-links p{margin:0;line-height:1.5}

/* Local Docker-only SUPP-8 reader refinements; preserve all 16 canonical theme palettes. */
.reader-chapter{max-width:920px;scroll-margin-top:6rem;margin:2.4rem 0 .2rem;padding:.8rem 0;border-bottom:2px solid var(--frame);color:var(--ink);font:600 clamp(1.3rem,3vw,1.7rem)/1.4 Georgia,"Times New Roman",serif}
.reader-chapter:first-child{margin-top:.6rem}
.segment-meta [data-repeat-badge]{font-variant-numeric:tabular-nums}
.segment-body .arabic{unicode-bidi:plaintext}
.segment-body .translation{max-width:75ch}
.reader-tahlil-count{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1rem 0;padding:.7rem .85rem;border:1px solid var(--frame,#d4cbc0);border-radius:10px}
.reader-tahlil-count label{font:600 .85rem/1.4 system-ui,sans-serif;letter-spacing:.01em}
.reader-tahlil-count select{font:500 1rem system-ui,sans-serif;border:1px solid #a49e91;border-radius:8px;background:var(--paper,#fff);color:var(--ink,#252525);padding:9px 32px 9px 12px;min-height:44px}
.segment[data-segment-id^="dedication"] .arabic{line-height:2.05}
.segment[data-segment-id^="dedication"] .translation{line-height:1.65}

/* SUPP-8 manuscript polish v2 · 2026-11-05.
   Presentation only. Never touches Arabic, meanings, rights or publication state. */
html{scroll-padding-top:2rem}
body{background:#e8e5df;padding:clamp(0px,1.35vw,20px)}
.supp-reader{
  max-width:1280px;
  padding:clamp(1.2rem,3.2vw,3.5rem) clamp(1.1rem,4vw,4rem) 5rem;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(23,27,25,.11);
  overflow:clip;
}
.supp-reader::before{
  inset:9px;padding:0;border:1px solid color-mix(in srgb,var(--frame) 34%,transparent);
  border-radius:9px;background:none;mask:none;opacity:.7;z-index:-1;
}
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;max-width:960px;margin:0 auto 2rem;
  padding:clamp(1.6rem,4vw,3rem) 1rem clamp(1.7rem,3vw,2.5rem);
  background:none;border:0;border-bottom:1px solid var(--line);
  border-radius:0;text-align:center;
}
.hero .kicker{
  color:var(--frame);font-size:.7rem;font-weight:750;letter-spacing:.23em;
}
.hero-arabic{
  font-size:clamp(2.65rem,5.5vw,4.9rem);
  line-height:1.55;margin:.2rem 0 .1rem;opacity:.92;
}
.hero h1{
  margin:0 0 .55rem;
  font-size:clamp(2rem,3.6vw,3.35rem);
  line-height:1.16;letter-spacing:-.032em;font-weight:600;
}
.hero>p:last-child{
  max-width:54ch;font-size:clamp(.94rem,1.35vw,1.08rem);
  line-height:1.7;margin:.2rem 0 0;text-wrap:pretty;
}
.toolbar{
  position:relative;top:auto;z-index:3;
  max-width:970px;margin:0 auto 1.35rem;
  display:grid;grid-template-columns:minmax(210px,1fr) minmax(260px,1.18fr);
  column-gap:1rem;row-gap:.9rem;
  padding:clamp(.95rem,2vw,1.35rem);
  border:1px solid var(--line);border-radius:15px;
  background:var(--panel);
  box-shadow:0 4px 18px rgba(20,20,20,.035);
  backdrop-filter:none;
}
.toolbar .field>span{letter-spacing:.09em}
.toolbar select{font-size:.93rem;border-radius:9px}
.layer-controls{align-content:center;gap:.5rem}
.layer-controls label{
  background:var(--soft);font-size:.85rem;font-weight:560;
  padding:.4rem .65rem;border-radius:9px;cursor:pointer;
}
.layer-controls input{accent-color:var(--frame)}
.theme-picker{padding-top:.7rem}
.theme-picker>summary{
  min-height:46px;gap:.6rem;font-weight:580;font-size:.93rem;
}
.theme-picker>summary strong{color:var(--frame);font-size:.87rem;font-weight:700}
.theme-grid{gap:.65rem;padding:1rem 0 .4rem}
.theme-option{
  min-height:56px;border-radius:9px;font-size:.82rem;
  box-shadow:none;transition:border-color .12s ease,background .12s ease;
}
.theme-option:hover{border-color:var(--frame)}
.theme-note{line-height:1.55}
.section-nav{
  max-width:970px;margin:0 auto 1.5rem;
  padding:.45rem 0 .85rem;gap:.5rem;
  scrollbar-width:thin;scrollbar-color:var(--frame) transparent;
}
.section-nav a{
  background:transparent;border:1px solid var(--line);
  font-size:.82rem;min-height:40px;border-radius:6px;
  padding:.45rem .85rem;font-weight:580;
  white-space:nowrap;
}
.section-nav a:hover,.section-nav a:focus-visible{
  background:var(--soft);border-color:var(--frame)
}
.reading{max-width:970px;margin:0 auto}
.reader-chapter{
  display:flex;align-items:center;gap:1.1rem;
  max-width:none;margin:2.9rem 0 1.05rem;
  padding:0 0 .65rem;border:0;
  font-size:clamp(1.25rem,2.3vw,1.7rem);
  letter-spacing:-.012em;line-height:1.35;
}
.reader-chapter::after{
  content:"";height:1px;flex:1;min-width:1rem;
  background:color-mix(in srgb,var(--frame) 34%,transparent);
}
.segment{
  display:flex;flex-direction:column;gap:0;
  position:relative;padding:clamp(1.25rem,2.5vw,2rem) clamp(1.15rem,3.2vw,2.6rem);
  margin:0 0 1rem;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--panel) 88%,var(--page));
  box-shadow:0 5px 22px rgba(30,35,30,.03);
  scroll-margin-top:1.25rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.segment:hover,.segment:focus-within{border-color:color-mix(in srgb,var(--frame) 58%,var(--line))}
.segment-meta{
  display:flex;flex-direction:row;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding:0 0 .85rem;margin-bottom:.45rem;
  border-bottom:1px solid var(--line);
}
.segment-number{
  min-width:36px;min-height:36px;border-radius:8px;
  font-size:.82rem;font-weight:800;
  border-color:color-mix(in srgb,var(--frame) 40%,transparent);
  background:var(--soft);font-variant-numeric:tabular-nums;
}
.segment-meta .repeat{min-width:42px;min-height:34px;border-radius:7px;font-size:.81rem}
.segment-meta .badge{font-size:.68rem;font-weight:600}
.segment-detail-trigger{
  margin-left:auto;max-width:none;min-height:40px;
  padding:.55rem .85rem;background:transparent;color:var(--frame);
  border:1px solid color-mix(in srgb,var(--frame) 44%,transparent);
  border-radius:7px;text-align:center;
  font-size:.76rem;line-height:1.3;font-weight:690;
  cursor:pointer;
}
.segment-detail-trigger:hover{
  background:var(--soft);color:var(--ink);border-color:var(--frame);
}
.segment-body{width:100%;min-width:0}
.segment-body .arabic{
  max-width:100%;margin:.55rem 0 1.15rem;
  font-size:clamp(2rem,3.1vw,2.7rem);
  line-height:2.12;letter-spacing:0;
  text-align:right;direction:rtl;
  font-family:"Geeza Pro","Noto Naskh Arabic","Amiri","Times New Roman",serif;
  font-weight:400;overflow-wrap:break-word;
}
.segment[data-segment-id^="dedication"] .arabic{line-height:2.08}
.segment-body .transliteration{
  margin:0 0 .9rem;max-width:74ch;
  font-size:.95rem;line-height:1.8;
  font-style:normal;color:var(--muted)
}
.segment-body .translation{
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  padding-top:.85rem;margin:.3rem 0 .15rem;
  max-width:76ch;font-size:.98rem;line-height:1.83;
}
.segment-body .translation>span{
  font-size:.66rem;letter-spacing:.13em;margin-bottom:.35rem;
}
.detail-hint{margin:.25rem 0 .5rem;color:var(--muted);font-size:.76rem}
.reader-tahlil-count{
  max-width:970px;margin:.9rem auto 1.45rem;
  border-color:var(--line);border-radius:11px;padding:.85rem 1.15rem;
  background:var(--panel);
}
.reader-tahlil-count select{background:var(--page);color:var(--ink);border-color:var(--line)}
.segment-lightbox__panel{border-radius:16px}
.segment-lightbox__panel::before{border-radius:10px;opacity:.28}
.segment-lightbox__header{padding:1.15rem 1.5rem}
.segment-lightbox__scroll{padding:clamp(1.25rem,3.5vw,2.2rem)}
.segment-lightbox__arabic{font-size:clamp(2rem,4vw,3rem);line-height:2.1}
.segment-lightbox__section{border-radius:10px}
.segment-lightbox__footer{padding:.8rem 1.2rem}
.reader-progress{
  max-width:970px;margin:.25rem auto 1.15rem;
  display:flex;align-items:center;gap:.85rem;
  color:var(--muted);font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:730;
}
.reader-progress__track{
  flex:1;height:3px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--frame) 18%,var(--line));
}
.reader-progress__fill{
  height:100%;width:0%;background:var(--frame);
  border-radius:999px;transition:width .18s ease;
}
.reader-progress__count{
  min-width:4.25rem;text-align:right;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.prototype-foot{max-width:970px;line-height:1.65;margin-top:3rem}

@media(max-width:980px){
  .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toolbar{position:relative;grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{background:var(--page,#eee);padding:0}
  .supp-reader{border-radius:0;padding:1rem 1rem 3.5rem;box-shadow:none}
  .supp-reader::before{inset:5px;opacity:.4}
  .hero{padding:1.8rem .5rem 1.5rem;margin-bottom:1.25rem}
  .hero-arabic{font-size:2.9rem;line-height:1.5}
  .hero h1{font-size:2rem}
  .hero>p:last-child{font-size:.9rem}
  .toolbar{grid-template-columns:1fr;padding:1rem;row-gap:.6rem}
  .theme-grid{grid-template-columns:1fr}
  .theme-picker>summary{align-items:center;flex-wrap:wrap}
  .theme-picker>summary strong{width:auto}
  .section-nav{gap:.45rem}
  .section-nav a{min-height:40px}
  .reader-chapter{margin:2.1rem 0 .8rem;font-size:1.28rem}
  .segment{padding:1rem 1rem 1.35rem;margin-bottom:.75rem}
  .segment-meta{gap:.5rem}
  .segment-detail-trigger{font-size:.72rem;padding:.5rem .65rem;min-height:40px}
  .segment-body .arabic{font-size:clamp(1.95rem,6.1vw,2.35rem);line-height:2.05;margin:.6rem 0 1rem}
  .segment-body .transliteration{font-size:.88rem;line-height:1.75}
  .segment-body .translation{font-size:.92rem;line-height:1.75}
  .reader-tahlil-count{align-items:stretch}
  .reader-tahlil-count select{width:100%}
  .segment-lightbox{padding:0}
  .segment-lightbox__panel{width:100%;max-height:94dvh;border-radius:15px 15px 0 0}
  .segment-lightbox__header{padding:1rem}
  .segment-lightbox__scroll{padding:1.1rem 1.15rem}
  .segment-lightbox__arabic{font-size:2.1rem}
  .reader-progress{margin-bottom:.9rem}
}
@media(max-width:360px){
  .supp-reader{padding-inline:.8rem}
  .segment{padding:.9rem .8rem 1.2rem}
  .segment-body .arabic{font-size:1.87rem}
  .segment-detail-trigger{font-size:.69rem}
}
@media(prefers-reduced-motion:reduce){
  .reader-progress__fill,.segment,.theme-option{transition:none}
}
@media print{
  body{background:#fff;padding:0}
  .supp-reader{max-width:none;border-radius:0;box-shadow:none}
  .toolbar,.section-nav,.reader-progress,.segment-detail-trigger{display:none!important}
  .segment{break-inside:avoid;box-shadow:none}
  .hero{min-height:0}
}

/* SUPP-8 v0.2.1: semantic accessible foreground; decorative palette unchanged. */
.supp-reader[data-ba-supp-theme="classic-ivory"]{--accent-readable:#847041}
.supp-reader[data-ba-supp-theme="ottoman-teal"]{--accent-readable:#39706f}
.supp-reader[data-ba-supp-theme="mamluk-blue"]{--accent-readable:#345886}
.supp-reader[data-ba-supp-theme="andalusian-gold"]{--accent-readable:#956b23}
.supp-reader[data-ba-supp-theme="moroccan-green"]{--accent-readable:#49714f}
.supp-reader[data-ba-supp-theme="hijazi-sand"]{--accent-readable:#886935}
.supp-reader[data-ba-supp-theme="damascus-rose"]{--accent-readable:#965d69}
.supp-reader[data-ba-supp-theme="night-illumination"]{--accent-readable:#d6b86b}
.supp-reader[data-ba-supp-theme="indigo-margins"]{--accent-readable:#575381}
.supp-reader[data-ba-supp-theme="sage-garden"]{--accent-readable:#67775c}
.supp-reader[data-ba-supp-theme="sepia-archive"]{--accent-readable:#806343}
.supp-reader[data-ba-supp-theme="pearl-gold"]{--accent-readable:#7c7355}
.supp-reader[data-ba-supp-theme="timurid-azure"]{--accent-readable:#2d7290}
.supp-reader[data-ba-supp-theme="safavid-lapis"]{--accent-readable:#6e95be}
.supp-reader[data-ba-supp-theme="maghrebi-crimson"]{--accent-readable:#9c3f45}
.supp-reader[data-ba-supp-theme="mughal-emerald"]{--accent-readable:#356f59}

/* Keyboard-visible focus and touch dimensions for comfortable reading. */
.hero .kicker,.hero-arabic,.theme-picker>summary strong,.segment-detail-trigger{color:var(--accent-readable,var(--ink))}
.segment-detail-trigger{
  min-height:44px;max-width:none;
  padding:.68rem .95rem;
  font-size:.88rem;line-height:1.35;letter-spacing:.005em;
}
.theme-option{font-size:.88rem}
.section-nav{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.section-nav a{min-height:44px;scroll-snap-align:start}
.segment-detail-trigger:focus-visible,
.theme-option:focus-visible,
.theme-picker>summary:focus-visible,
.section-nav a:focus-visible,
.reader-tahlil-count select:focus-visible{
  outline:3px solid var(--accent-readable,var(--ink));
  outline-offset:3px;
}
.supp-skip-link{
 position:absolute;z-index:1000;left:1rem;top:-100px;
 padding:.8rem 1rem;background:var(--panel,#fff);color:var(--ink,#17212b);
 border:2px solid var(--accent-readable,#273b46);
 border-radius:8px;font:600 1rem/1.4 system-ui,sans-serif;
}
.supp-skip-link:focus{position:fixed;top:1rem}
@media(max-width:640px){
 .segment-detail-trigger{min-height:44px;font-size:.84rem;padding:.65rem .75rem}
 .section-nav a{min-height:44px}
 .hero .kicker{font-size:.75rem}
 .reader-progress{font-size:.76rem;letter-spacing:.025em}
}
@media(max-width:360px){
 .segment-detail-trigger{font-size:.8rem}
 .segment-meta{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
 .section-nav{scroll-behavior:auto}
}

/* SUPP-8 v0.2.2: accessible secondary text + true hidden badge handling. */
.supp-reader[data-ba-supp-theme="classic-ivory"]{--clay-readable:#ae5c48;--brass-readable:#847041}
.supp-reader[data-ba-supp-theme="ottoman-teal"]{--clay-readable:#9a564a;--brass-readable:#7e7141}
.supp-reader[data-ba-supp-theme="mamluk-blue"]{--clay-readable:#a2564b;--brass-readable:#80704c}
.supp-reader[data-ba-supp-theme="andalusian-gold"]{--clay-readable:#9f4f3e;--brass-readable:#956b23}
.supp-reader[data-ba-supp-theme="moroccan-green"]{--clay-readable:#ad5b45;--brass-readable:#7f723c}
.supp-reader[data-ba-supp-theme="hijazi-sand"]{--clay-readable:#a25c43;--brass-readable:#886935}
.supp-reader[data-ba-supp-theme="damascus-rose"]{--clay-readable:#a94f57;--brass-readable:#8c6c41}
.supp-reader[data-ba-supp-theme="night-illumination"]{--clay-readable:#ef9b7e;--brass-readable:#d6b86b}
.supp-reader[data-ba-supp-theme="indigo-margins"]{--clay-readable:#a55c55;--brass-readable:#826e4e}
.supp-reader[data-ba-supp-theme="sage-garden"]{--clay-readable:#a5604e;--brass-readable:#7f7140}
.supp-reader[data-ba-supp-theme="sepia-archive"]{--clay-readable:#965842;--brass-readable:#826336}
.supp-reader[data-ba-supp-theme="pearl-gold"]{--clay-readable:#9f6450;--brass-readable:#827247}
.supp-reader[data-ba-supp-theme="timurid-azure"]{--clay-readable:#9b584c;--brass-readable:#807247}
.supp-reader[data-ba-supp-theme="safavid-lapis"]{--clay-readable:#d58b71;--brass-readable:#e1c36e}
.supp-reader[data-ba-supp-theme="maghrebi-crimson"]{--clay-readable:#a64343;--brass-readable:#916a3a}
.supp-reader[data-ba-supp-theme="mughal-emerald"]{--clay-readable:#a05749;--brass-readable:#7d723f}

/* HTML hidden always wins over component display styles. */
.supp-reader [hidden]{display:none!important}
/* Small uppercase labels meet contrast and legibility. */
.segment-lightbox__eyebrow,.segment-lightbox__label{
 color:var(--clay-readable,var(--ink));
 font-size:.75rem;line-height:1.45;
}
.tier--member{color:var(--brass-readable,var(--ink))}
.section-nav a[aria-current]{
 border-color:var(--accent-readable,var(--ink));
 background:var(--soft);
 box-shadow:inset 0 -2px 0 var(--accent-readable,var(--ink));
}
.segment-lightbox button:focus-visible{
 outline:3px solid var(--accent-readable,var(--ink));
 outline-offset:3px;
}
.segment-lightbox__identity>.repeat:empty{display:none}
