/* Quiet Light Apps: ink and gold, matching the Zaka app. */
:root {
  --bg:#F3F4F6; --fg:#14161B; --mut:#555B66; --card:#FFFFFF; --line:#E1E4E8;
  --ink:#101216; --ink-2:#1A1D24; --on-ink:#EDEEF0; --on-ink-mut:#A3AAB6; --ink-line:#343842;
  --gold:#E8C97A; --gold-deep:#B08626; --gold-text:#7A5C16; --link:#7A5C16; --focus:#8A6A1E;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic","Amiri",serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0D0E11; --fg:#EDEEF0; --mut:#A3AAB6; --card:#17191E; --line:#262A31; --gold-text:#E3C078; --link:#E3C078; --focus:#E3C078; color-scheme:dark; }
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:1rem; line-height:1.6; }
img,svg { max-width:100%; }
a { color:var(--link); text-underline-offset:.18em; }
a:focus-visible,button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:-999px; top:0; background:var(--card); color:var(--fg); padding:.6rem 1rem; z-index:10; }
.skip:focus { left:1rem; top:1rem; }
.wrap { width:100%; max-width:62rem; margin:0 auto; padding-inline:max(1.25rem, env(safe-area-inset-left)); }

/* ink band: header and hero, with the star pattern strongest below the logo line */
.band { position:relative; background:var(--ink); color:var(--on-ink); overflow:hidden; isolation:isolate; }
.band::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.38;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='none' stroke='%23C9A24B' stroke-width='1'><rect x='11' y='11' width='22' height='22'/><rect x='11' y='11' width='22' height='22' transform='rotate(45 22 22)'/></svg>"); background-size:44px 44px; background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.02) 0, rgba(0,0,0,.08) 3.5rem, #000 8rem, transparent 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.02) 0, rgba(0,0,0,.08) 3.5rem, #000 8rem, transparent 100%); }
.top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.7rem; color:var(--on-ink); text-decoration:none; font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.brand img { width:2.4rem; height:2.4rem; }
nav ul { display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
nav a { color:var(--on-ink-mut); text-decoration:none; font-size:.95rem; }
nav a:hover,nav a[aria-current] { color:var(--gold); }
.hero { padding-block:3.2rem 3.6rem; }
.hero.compact { padding-block:2.2rem 2.4rem; }
.kicker { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; font-weight:600; }
h1 { font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.15; margin:0 0 1rem; font-weight:500; letter-spacing:-.01em; text-wrap:balance; }
.hero p.lead { font-size:1.12rem; color:var(--on-ink-mut); max-width:38rem; margin:0; }
.hero .app-id { display:flex; align-items:center; gap:1.1rem; margin-bottom:1.4rem; }
.hero .app-id img { width:5rem; height:5rem; border-radius:1.2rem; box-shadow:0 0 0 1px var(--ink-line); }
.pill { display:inline-block; padding:.45rem 1rem; border-radius:999px; border:1px solid var(--ink-line); color:var(--gold); font-size:.9rem; margin-top:1.5rem; }

main { padding-block:2.4rem 3.5rem; }
h2 { font-size:1.4rem; font-weight:500; line-height:1.25; margin:2.6rem 0 1rem; text-wrap:balance; }
h2:first-child { margin-top:0; }
h3 { font-size:1.05rem; margin:1.6rem 0 .4rem; font-weight:600; }
p { margin:0 0 1rem; max-width:44rem; }
ul.plain,ol.plain { margin:0 0 1rem; padding-left:1.3rem; max-width:44rem; }
li { margin-bottom:.35rem; }
.muted { color:var(--mut); }
.card { background:var(--card); border:1px solid var(--line); border-radius:1.2rem; padding:1.3rem 1.4rem; }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.grid .card h3 { margin-top:0; }
.grid .card p { margin:0; color:var(--mut); font-size:.97rem; }
.app-card { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; text-decoration:none; color:inherit; }
.app-card img { width:4.6rem; height:4.6rem; border-radius:1.1rem; flex:none; }
.app-card .txt { flex:1 1 15rem; min-width:0; }
.app-card h3 { margin:0 0 .2rem; font-size:1.15rem; }
.app-card p { margin:0; color:var(--mut); }
.tag { display:inline-block; font-size:.8rem; padding:.2rem .7rem; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--gold-text); margin-top:.5rem; }
.btn { display:inline-block; padding:.7rem 1.3rem; border-radius:999px; background:var(--ink-2); color:var(--gold); text-decoration:none; font-weight:600; border:1px solid var(--ink-line); }
.btn:hover { background:var(--ink); }
.ink-card { background:var(--ink); color:var(--on-ink); border-radius:1.4rem; padding:1.6rem; border:1px solid var(--ink-line); }
.ink-card h2,.ink-card h3 { margin-top:0; color:var(--on-ink); }
.ink-card p { color:var(--on-ink-mut); }
.note { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--gold-deep); border-radius:.8rem; padding:1rem 1.2rem; margin:0 0 1.5rem; max-width:44rem; }
.note p:last-child { margin:0; }
.quote { text-align:center; padding:1.6rem 1.2rem; }
.quote .ar { font-family:var(--font-ar); font-size:clamp(1.5rem,5vw,1.9rem); line-height:2; color:var(--gold-text); margin:0 auto .6rem; direction:rtl; max-width:none; }
.quote .en { font-style:italic; margin:0 auto .4rem; }
.quote .ref { color:var(--gold-text); font-size:.9rem; margin:0 auto; }
.meta { color:var(--on-ink-mut); font-size:.9rem; margin-top:1rem; }
details { background:var(--card); border:1px solid var(--line); border-radius:.9rem; padding:.2rem 1.1rem; margin-bottom:.7rem; max-width:44rem; }
summary { cursor:pointer; padding:.8rem 0; font-weight:600; }
details p { color:var(--mut); }
table { border-collapse:collapse; width:100%; max-width:44rem; margin:0 0 1.2rem; font-size:.96rem; }
th,td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; }
.table-scroll { overflow-x:auto; }
footer { background:var(--ink); color:var(--on-ink-mut); border-top:1px solid var(--ink-line); padding-block:1.8rem 2.4rem; font-size:.92rem; }
footer a { color:var(--gold); }
footer a:hover { color:#F0D58F; }
footer .wrap { display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between; }
footer ul { display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
footer p { margin:0; max-width:none; }
@media (prefers-reduced-motion: no-preference) { .btn { transition:background .2s; } }
.m0 { margin:0; }
.ink-card a.gold-link { color:var(--gold); }
td { overflow-wrap:anywhere; }

/* Yusra pages: night indigo with a moonlight lattice; gold stays as the small accent, as in the app */
body.yusra { --bg:#F2F3F8; --fg:#141833; --mut:#555B7A; --line:#DFE2EE;
  --ink:#141833; --ink-2:#1E2550; --on-ink:#EEF0FA; --on-ink-mut:#A9B0D1; --ink-line:#343B66; }
@media (prefers-color-scheme: dark) {
  body.yusra { --bg:#0B0D1A; --fg:#ECEEF8; --mut:#9499B8; --card:#151933; --line:#262B4A; --ink:#11142A; --ink-2:#1A1F40; }
}
body.yusra .band::before { opacity:.45; background-size:36px 36px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36' fill='none' stroke='%238EA0E6' stroke-width='1'><path d='M18 0 L36 18 L18 36 L0 18 Z'/><path d='M18 9 L27 18 L18 27 L9 18 Z' stroke-width='.7'/><circle cx='18' cy='18' r='1.4' fill='%238EA0E6' stroke='none'/></svg>"); }
.app-gap { margin-top:1rem; }

/* Hajj and Umrah planner pages: Madinah green with a pattern of circles; gold stays as the small accent, as in the app */
body.hajj { --bg:#F1F5F2; --fg:#10201A; --mut:#56655D; --line:#DCE6E0;
  --ink:#0F3B2E; --ink-2:#174A3A; --on-ink:#EEF4F0; --on-ink-mut:#A7BFB4; --ink-line:#2A5244; }
@media (prefers-color-scheme: dark) {
  body.hajj { --bg:#0A1310; --fg:#ECF2EE; --mut:#93A79D; --card:#13201B; --line:#22352D; --ink:#112A21; --ink-2:#163329; }
}
body.hajj .band::before { opacity:.45; background-size:40px 40px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none' stroke='%238FC7AF' stroke-width='.8'><circle cx='20' cy='20' r='5'/><circle cx='20' cy='20' r='11'/><circle cx='20' cy='20' r='17'/><circle cx='20' cy='20' r='1.2' fill='%238FC7AF' stroke='none'/></svg>"); }

/* Hifz app pages: mushaf burgundy with a pattern of rosettes like ayah markers; gold stays as the small accent, as in the app */
body.hifzapp { --bg:#F7F2F1; --fg:#2A1416; --mut:#6B5557; --line:#EADDDD;
  --ink:#5E1A24; --ink-2:#6E2430; --on-ink:#F8EEEF; --on-ink-mut:#D9B9BD; --ink-line:#7A3440; }
@media (prefers-color-scheme: dark) {
  body.hifzapp { --bg:#140A0C; --fg:#F4EAEB; --mut:#B29A9D; --card:#211215; --line:#3A2226; --ink:#2E1418; --ink-2:#3A1A20; }
}
body.hifzapp .band::before { opacity:.45; background-size:40px 40px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none' stroke='%23D9A0A8'><circle cx='20' cy='20' r='6.5' stroke-width='.7'/><circle cx='20' cy='20' r='10' stroke-width='1.4' stroke-dasharray='1.4 2.2'/><circle cx='20' cy='20' r='1.3' fill='%23D9A0A8' stroke='none'/></svg>"); }





/* app:will */
body.willapp { --bg:#F2F3F4; --fg:#1A1E22; --mut:#5B636B; --line:#DEE1E4;
  --ink:#2B3238; --ink-2:#353D44; --on-ink:#EEF1F3; --on-ink-mut:#A9B2BA; --ink-line:#3D464E; }
@media (prefers-color-scheme: dark) {
  body.willapp { --bg:#0E1113; --fg:#ECEFF1; --mut:#98A1A9; --card:#171B1F; --line:#272D33; --ink:#1C2227; --ink-2:#232A30; }
}
body.willapp .band::before { opacity:.45; background-size:42px 48px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48' fill='none' stroke='%237D8B96' stroke-width='.8'><path d='M21 4 L37 13 L37 31 L21 40 L5 31 L5 13 Z'/><circle cx='21' cy='22' r='1.3' fill='%237D8B96' stroke='none'/></svg>"); }
/* /app:will */

/* app:ramadan */
body.ramadanapp { --bg:#F1F3F8; --fg:#131A2E; --mut:#58617A; --line:#DCE1EC;
  --ink:#14214A; --ink-2:#1B2B5C; --on-ink:#EEF1F8; --on-ink-mut:#A7B0CC; --ink-line:#263561; }
@media (prefers-color-scheme: dark) {
  body.ramadanapp { --bg:#060A17; --fg:#ECEFF8; --mut:#949CB8; --card:#0E152E; --line:#1D2646; --ink:#101A3C; --ink-2:#16224A; }
}
body.ramadanapp .band::before { opacity:.5; background-size:44px 44px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44' fill='%237C95DC'><path d='M22 18 L22.9 21.1 L26 22 L22.9 22.9 L22 26 L21.1 22.9 L18 22 L21.1 21.1 Z'/><circle cx='6' cy='9' r='.9'/><circle cx='36' cy='37' r='.7'/></svg>"); }
/* /app:ramadan */