@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Readex+Pro:wght@300;400;500;600&display=swap");

/* ============================================================================
   RAHMAH SKIN  ·  v1
   A visual-only override layer for Qur'an Study Companion.

   HOW IT WORKS
   This file is appended AFTER the app's own <style> block, so equal-specificity
   rules win by source order. It redefines design tokens and restyles surfaces.
   It adds no markup, renames no class, and changes no behaviour.

   WHAT IT DELIBERATELY DOES NOT TOUCH  (the JS depends on all of these)
     .pe1–.pe24        per-Surah pigments; JS sets them via pearl(n)
     --rows            set by render(); drives the two-column colonnade
     --fs              set by applyFS(); 16 calc() sizes scale from it
     [aria-pressed]    the selected-state hook for every toggle in the app
     .on / .open       display toggles for reading, wbw, analysis, overlays
     body.font-*       the Interface-font selector
     body[data-arfont] the Qur'an-font selector
     --wnow-bg/-line/-chip  written inline by JS for the word highlight
     grid-template-areas on .card  (niche motif en ar meta theme)

   THEMES
     Light is the default. Dark engages automatically from the OS setting, and
     can be forced either way with <html data-theme="dark"> / "light".
   ========================================================================== */


/* ============================================================================
   1 · TOKENS — LIGHT ("Mihrab Light")
   Off-white ground with a faint green cast, emerald primary, teal secondary.
   The app's own variable names are reused so every existing rule re-themes
   itself for free.
   ========================================================================== */
:root{
  color-scheme:light;

  /* --- new palette --- */
  --em:#0A9D6E;          --em-deep:#06714E;      --em-soft:#E4F5EE;
  --teal:#12B0AE;        --teal-deep:#0C8583;    --teal-soft:#E0F4F4;
  --mint:#3FD9A8;
  --amber:#F0A020;       --ember:#E9603C;
  --azure:#2E8FE0;

  /* --- the app's existing tokens, re-pointed at the new palette --- */
  --paper:#F5F8F7;
  --parch2:#EDF3F1;
  --surface:#FFFFFF;
  --surface-2:#F0F5F3;
  --ink:#0D1A17;
  --ink-soft:#5C6C67;
  --line:#DEE8E4;

  --lapis:var(--em);            /* "primary" throughout the app */
  --lapis-deep:var(--em-deep);
  --lapis-mid:var(--teal);
  --turq:var(--teal);
  --turq-soft:var(--teal-soft);
  --gold:var(--teal-deep);      /* accents/eyebrows become teal, not gold */
  --gold2:var(--teal);
  --gold-lite:var(--mint);
  --gold-soft:#CDE7E0;
  --jade:var(--em);
  --emerald:var(--em);
  --emerald-soft:var(--em-soft);
  --makki:#B4651C;
  --madani:#1C6FA8;

  /* --- typography ---
     --ui and --disp are redefined rather than hardcoded on <body>, so the
     app's Interface-font selector keeps working. --ar is left alone: the
     muṣḥaf text must stay in a naskh face. --ar-ui is new, for UI Arabic. */
  --disp:'Sora',system-ui,sans-serif;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ar-ui:'Readex Pro','Noto Naskh Arabic',var(--ar);

  /* --- shape --- */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* --- elevation: soft, wide, low-opacity --- */
  --sh-1:0 1px 2px rgba(13,26,23,.05);
  --sh-2:0 8px 26px -10px rgba(13,26,23,.14);
  --sh-3:0 18px 44px -14px rgba(13,26,23,.20);
  --ring:0 0 0 3px rgba(10,157,110,.16);

  /* --- glass --- */
  --glass-bg:rgba(255,255,255,.76);
  --glass-line:rgba(255,255,255,.7);
  --glass-blur:saturate(160%) blur(14px);

  /* --- metadata gradients: Meccan vs Medinan --- */
  --g-makki:linear-gradient(135deg,var(--amber),var(--ember));
  --g-madani:linear-gradient(135deg,var(--teal),var(--azure));
  --glow-makki:rgba(233,96,60,.38);
  --glow-madani:rgba(46,143,224,.38);

  /* prayer-window progress, 0–1. Stays 0 without the optional JS, which
     simply leaves a neutral divider where the bar would be. */
  --ptw-p:0;
}


/* ============================================================================
   2 · TOKENS — DARK ("Obsidian")
   Deep slate ground, neon-mint highlights, frosted glass panels.
   Written twice on purpose: once for the OS preference (guarded so an explicit
   data-theme="light" still wins) and once for an explicit data-theme="dark".
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#080C10;
    --parch2:#0C1218;
    --surface:#111921;
    --surface-2:#161F29;
    --ink:#E9F2EE;
    --ink-soft:#93A5A0;
    --line:#22303B;

    --em:#2FE0A0;        --em-deep:#13B47D;     --em-soft:rgba(47,224,160,.12);
    --teal:#35D7D2;      --teal-deep:#17A9A5;   --teal-soft:rgba(53,215,210,.12);
    --mint:#5FF3C0;
    --amber:#FFB63D;     --ember:#FF7A53;
    --azure:#5AB0FF;
    --gold-soft:#24404A;
    --makki:#D98432;
    --madani:#4FA0DC;

    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 10px 30px -12px rgba(0,0,0,.72);
    --sh-3:0 22px 54px -16px rgba(0,0,0,.85);
    --ring:0 0 0 3px rgba(47,224,160,.22);

    --glass-bg:rgba(20,29,38,.62);
    --glass-line:rgba(120,220,195,.14);

    --glow-makki:rgba(255,122,83,.42);
    --glow-madani:rgba(90,176,255,.42);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#080C10;
  --parch2:#0C1218;
  --surface:#111921;
  --surface-2:#161F29;
  --ink:#E9F2EE;
  --ink-soft:#93A5A0;
  --line:#22303B;

  --em:#2FE0A0;        --em-deep:#13B47D;     --em-soft:rgba(47,224,160,.12);
  --teal:#35D7D2;      --teal-deep:#17A9A5;   --teal-soft:rgba(53,215,210,.12);
  --mint:#5FF3C0;
  --amber:#FFB63D;     --ember:#FF7A53;
  --azure:#5AB0FF;
  --gold-soft:#24404A;
  --makki:#D98432;
  --madani:#4FA0DC;

  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.72);
  --sh-3:0 22px 54px -16px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(47,224,160,.22);

  --glass-bg:rgba(20,29,38,.62);
  --glass-line:rgba(120,220,195,.14);

  --glow-makki:rgba(255,122,83,.42);
  --glow-madani:rgba(90,176,255,.42);
}


/* ============================================================================
   3 · GROUND
   ========================================================================== */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--em-soft), transparent 62%),
    radial-gradient(900px 520px at 92% 2%,  var(--teal-soft), transparent 60%);
  background-attachment:fixed;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* The Interface-font selector stays honest: "Spectral" must still be Spectral
   even though --disp is now a geometric sans. */
body.font-spectral{font-family:'Spectral',Georgia,serif}

/* One consistent focus ring, in the new primary. */
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{
  outline:2px solid var(--em);outline-offset:2px;border-radius:6px}

/* The watermark is navy ink baked into a data URI — invert it so it stays
   legible (and equally faint) on the obsidian ground. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .wm-layer{filter:invert(1);opacity:.05}
}
:root[data-theme="dark"] .wm-layer{filter:invert(1);opacity:.05}


/* ============================================================================
   4 · HEADER & WORDMARK
   ========================================================================== */
header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:26px 20px 34px;
}
.brandsub .en{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.brandsub .ta{color:var(--em-deep)}
.brandsub .si{color:var(--teal-deep)}
.brandsub .ar{font-family:var(--ar-ui);font-weight:500;color:var(--em)}
.brandlogo{filter:drop-shadow(0 6px 18px rgba(10,157,110,.18))}
.tagline{color:var(--ink-soft)}
.tagline b{color:var(--em-deep);font-weight:700}


/* ============================================================================
   5 · CONTROL DECK
   The toolbar lifts off the header edge and reads as one floating panel.
   Not sticky by choice: it is tall enough that pinning it would eat a phone
   viewport. To pin it anyway, see the blueprint.
   ========================================================================== */
.toolbar{
  position:relative;z-index:2;
  margin:-22px auto 0;
  max-width:1280px;
  padding:20px 22px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--sh-3);
}
/* Browsers without backdrop-filter get an opaque panel instead of a
   washed-out translucent one. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .toolbar{background:var(--surface)}
}

.search input{
  border-radius:var(--r-md);
  border:1.5px solid var(--line);
  background-color:var(--surface);
  color:var(--ink);
  box-shadow:var(--sh-1);
  /* keep the app's inline search-glyph background-image; only recolour it */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A9D6E' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>");
}
.search input::placeholder{color:var(--ink-soft);opacity:.8}
.search input:focus{border-color:var(--em);box-shadow:var(--ring)}

.langsel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.langsel button{border-radius:var(--r-pill);color:var(--ink-soft);font-weight:600}
.langsel button:hover{background:var(--surface);color:var(--ink)}
.langsel button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));
  color:#04120D;box-shadow:0 4px 14px -4px var(--em)}

/* filter chips */
.chip{
  border-radius:var(--r-pill);
  border:1.5px solid var(--line);
  background:var(--surface);
  color:var(--ink-soft);
  font-weight:600;
  box-shadow:var(--sh-1);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),border-color .16s,background .16s,color .16s,box-shadow .16s;
}
.chip:hover{border-color:var(--em);color:var(--em-deep);transform:translateY(-1px)}
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));
  border-color:transparent;color:#04120D;
  box-shadow:0 6px 18px -6px var(--em)}
.featrow{border-top:1px solid var(--line)}
.featrow .chip.goldc{border-color:var(--gold-soft);color:var(--ink);background:var(--surface)}
.featrow .chip.goldc:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--teal-soft)}

/* appearance strip, set back into the deck */
.appbar{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.appbar .ablbl{color:var(--ink-soft)}
.appbar select,.appbar .absize button{
  border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink)}
.appbar .absize button{color:var(--em-deep);font-weight:700}
.appbar .absize button:hover{background:var(--em-soft);border-color:var(--em)}

/* install + study-group buttons */
.wa-link.inst-link{background:var(--surface);border:1.5px solid var(--em);color:var(--em-deep)}
.wa-link.inst-link:hover{border-color:var(--teal);box-shadow:0 8px 20px -8px var(--em);transform:translateY(-2px)}
.wa-cap{color:var(--ink-soft)}
.wa-point{color:var(--em)}


/* ============================================================================
   6 · LIST HEADING
   ========================================================================== */
.listhead h2{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.listhead .lh-rule{background:linear-gradient(90deg,var(--em),transparent);height:2px;border-radius:2px}
.listhead .count{color:var(--ink-soft);font-weight:600}


/* ============================================================================
   7 · SURAH CARDS
   The grid keeps grid-auto-flow:column and --rows, so 1–57 / 58–114 column
   ordering is unchanged. Only the card skin changes.
   ========================================================================== */
.grid{gap:11px 20px}

.card{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  padding:14px 18px;
  box-shadow:var(--sh-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),
             box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
/* the pigment wash arrives only on hover, as a tinted ring + lift */
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--pe,var(--em)) 46%,transparent);
  box-shadow:var(--sh-2),0 0 0 1px color-mix(in srgb,var(--pe,var(--em)) 22%,transparent);
  background:var(--surface);
}
.card:active{transform:translateY(-1px)}
.card:focus-visible{outline:2px solid var(--em);outline-offset:3px}

/* --- SIGNATURE: the mihrab-arch number badge ---
   Kept as an arch rather than flattened to a circle: the pointed niche is this
   app's own form, and it is what makes the card unmistakably Rahmah. The fill
   still encodes Makki/Madani exactly as before; the glow is the Surah's
   pigment, so the author's 24-pigment system is amplified, not discarded.
   For a plain circle instead, see the blueprint. */
.card .num{
  width:44px;height:50px;
  border:none;
  border-radius:22px 22px 11px 11px;
  font-family:var(--disp);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;
  color:#fff;
  background:var(--madani);                       /* fallback */
  background-image:var(--g-madani);
  box-shadow:0 6px 16px -6px var(--glow-madani),
             inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease;
}
/* these need the same 3-class specificity as the app's own rules */
.card.makki .num{
  background:var(--makki);
  background-image:var(--g-makki);
  box-shadow:0 6px 16px -6px var(--glow-makki),inset 0 1px 0 rgba(255,255,255,.30)}
.card.madani .num{
  background:var(--madani);
  background-image:var(--g-madani);
  box-shadow:0 6px 16px -6px var(--glow-madani),inset 0 1px 0 rgba(255,255,255,.30)}
.card:hover .num{transform:translateY(-1px) scale(1.04)}
.card.makki:hover .num{box-shadow:0 10px 22px -6px var(--glow-makki),inset 0 1px 0 rgba(255,255,255,.34)}
.card.madani:hover .num{box-shadow:0 10px 22px -6px var(--glow-madani),inset 0 1px 0 rgba(255,255,255,.34)}

/* motif tile keeps the per-Surah pigment */
.card .motif{
  border-radius:13px;
  background:color-mix(in srgb,var(--pe,var(--em)) 12%,transparent);
  stroke:var(--pe,var(--em));
  opacity:.95;
  transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.card:hover .motif{transform:rotate(-4deg) scale(1.05)}

.card .arname{font-family:var(--ar-ui);font-weight:500;color:var(--ink);font-size:19px}
.card .enname{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;color:var(--ink);font-size:14.5px}
.card .theme{color:var(--ink-soft)}
.card .meta{color:var(--ink-soft)}

/* Meccan / Medinan chips — the vibrant metadata coding */
.tag{
  border-radius:var(--r-pill);
  padding:3px 10px;
  font-size:10px;font-weight:800;letter-spacing:.08em;
  color:#fff;border:none}
.tag.makki{background:var(--g-makki);box-shadow:0 3px 10px -4px var(--glow-makki)}
.tag.madani{background:var(--g-madani);box-shadow:0 3px 10px -4px var(--glow-madani)}
.ebadge{
  border-radius:var(--r-pill);
  background:var(--em-soft);border:1px solid color-mix(in srgb,var(--em) 40%,transparent);
  color:var(--em-deep)}


/* ============================================================================
   8 · PRAYER WIDGET — smartwatch face
   Stays dark in BOTH themes on purpose: a dark instrument face against a light
   page is what makes it read as a watch rather than another card.
   ========================================================================== */
.ptw{
  width:clamp(224px,20vw,268px);
  border-radius:var(--r-xl);
  padding:16px 16px 13px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(63,217,168,.16), transparent 60%),
    linear-gradient(170deg,#101C22,#070E12);
  border:1px solid rgba(95,243,192,.16);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.06);
  color:#E6F4EF;
}
.ptw-top{border-bottom:none;padding-bottom:0;margin-bottom:10px;text-align:center}
.ptw-time{
  font-family:var(--disp);font-weight:700;font-size:34px;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  color:#fff;
  text-shadow:0 0 22px rgba(95,243,192,.30)}
.ptw-loc{color:#7FA99C;font-weight:500}
.ptw-loc:hover{color:var(--mint)}

/* Progress through the current prayer window.
   One element, one gradient: filled to --ptw-p, track beyond it. With no JS,
   --ptw-p is 0 and this reads as the divider it replaced. */
.ptw-top::after{
  content:"";display:block;height:4px;margin-top:11px;border-radius:99px;
  background:linear-gradient(90deg,
    var(--mint) 0 calc(var(--ptw-p,0) * 100%),
    rgba(230,244,239,.13) calc(var(--ptw-p,0) * 100%) 100%);
  box-shadow:0 0 12px -2px rgba(95,243,192,calc(var(--ptw-p,0) * .8));
  transition:background .6s linear}

.ptw-list{gap:2px}
.ptw-list li{border-radius:11px;padding:5.5px 8px;transition:background .2s ease}
.ptw-list li svg{stroke:#6E9A8C;opacity:.9}
.ptw-name{color:#A8C4BB;font-weight:500}
.ptw-at{color:#EAF6F1;font-weight:600}
/* .now marks the NEXT prayer — the app's own meaning, kept as-is */
.ptw-list li.now{
  background:linear-gradient(90deg,rgba(63,217,168,.20),rgba(63,217,168,.06));
  box-shadow:inset 0 0 0 1px rgba(95,243,192,.30)}
.ptw-list li.now svg{stroke:var(--mint);opacity:1}
.ptw-list li.now .ptw-name{color:#EAFBF4;font-weight:700}
.ptw-list li.now .ptw-at{color:var(--mint)}
.ptw-foot{border-top:1px solid rgba(230,244,239,.10);color:#7FA99C}
.ptw-foot b{color:var(--mint)}
.ptw-mct{color:#5E8377}
.ptw-mnav{
  border:1px solid rgba(95,243,192,.24);background:rgba(230,244,239,.05);
  color:var(--mint)}
.ptw-mnav:hover{background:rgba(95,243,192,.16);color:#fff}
.ptw-mnav:focus-visible{outline:2px solid var(--mint)}


/* ============================================================================
   9 · OVERLAYS & READING SURFACES
   .on / .open keep their display semantics untouched — only the skin changes.
   ========================================================================== */
.overlay{
  background:rgba(6,12,16,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3)}
.frame{border:1px solid var(--line);border-radius:var(--r-lg)}
.frame::before{border-color:color-mix(in srgb,var(--em) 26%,transparent);opacity:.5;border-radius:var(--r-md)}
.closeb{
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-soft)}
.closeb:hover{background:var(--em-soft);color:var(--em-deep);border-color:var(--em)}

.d-ar{font-family:var(--ar-ui);font-weight:500;color:var(--em-deep)}
.d-en{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.d-si{color:var(--teal-deep)}
.d-motif{
  background:var(--peW,var(--em-soft));
  border:1px solid color-mix(in srgb,var(--pe,var(--em)) 30%,transparent);
  stroke:var(--pe,var(--em))}
.d-theme,.gintro{color:var(--ink-soft)}
.rule{border-top:1px solid var(--line)}
.rule::after{background:var(--surface);color:var(--teal)}

.sec>h2{color:var(--em-deep);border-color:var(--line);letter-spacing:.1em}
.mainhead{font-family:var(--disp);font-weight:700;color:var(--ink)}

/* panels */
.pbox,.reading,.audio-box{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg)}
.pbox h3,.reading h3{font-family:var(--disp);font-weight:700;color:var(--ink)}

/* buttons */
.btn{
  border-radius:var(--r-md);font-family:var(--disp);font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--em),var(--teal));
  color:#04120D;
  box-shadow:0 8px 22px -10px var(--em);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s ease,filter .16s ease}
.btn:hover{background:linear-gradient(135deg,var(--em),var(--teal));filter:brightness(1.06);
  transform:translateY(-2px);box-shadow:0 14px 30px -12px var(--em)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:var(--surface);color:var(--em-deep);
  border:1.5px solid color-mix(in srgb,var(--em) 46%,transparent);
  box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--em-soft);border-color:var(--em);filter:none}

.tbtn{
  border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600}
.tbtn:hover{border-color:var(--em);background:var(--em-soft)}
.tbtn.primary{
  background:linear-gradient(135deg,var(--em),var(--teal));
  border-color:transparent;color:#04120D}
.tbtn.primary:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--em),var(--teal))}
.tbtn[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--amber),var(--ember));
  border-color:transparent;color:#fff}

.recp{border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);color:var(--ink-soft)}
.recp:hover{border-color:var(--em);color:var(--em-deep)}
.recp[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));border-color:transparent;color:#04120D}

/* the recommended reciter. A gold hairline and a small star — enough to find
   at a glance, not enough to compete with the pressed state, which still has
   to read as "this is the one playing". */
.recp-pick{border-color:var(--nt-gold-lite,#D9B25A)}
.recpick{margin-left:6px;font-size:11px;line-height:1;color:var(--nt-gold-lite,#D9B25A)}
.recp-pick[aria-pressed="true"] .recpick{color:#04120D;opacity:.72}

.langtog,.tajtoggle,.fsctl,.hlsel{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.langtog button,.tajtoggle button,.fsctl button{border-radius:var(--r-pill);color:var(--ink-soft);font-weight:600}
.langtog button[aria-pressed="true"],.tajtoggle button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));color:#04120D}
.fsctl button:hover{background:var(--em-soft)}

/* reading view */
.ayah{border-top:1px solid var(--line)}
.ayah.playing{background:var(--em-soft);border-radius:var(--r-md)}
.anum{color:var(--teal-deep);font-weight:700}
.abtn{border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);color:var(--em-deep)}
.abtn:hover{border-color:var(--em);background:var(--em-soft)}
.wbw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.wchip{border-radius:var(--r-sm);border:1.3px solid var(--line);background:var(--surface)}
.wchip:hover{border-color:var(--em)}
.wchip.playing{background:linear-gradient(135deg,var(--em),var(--teal));border-color:transparent}
.wchip.playing .war,.wchip.playing .wtr,.wchip.playing .wmn{color:#04120D}
.war{color:var(--ink)}
.wtr,.wmn,.wbw-note,.transrow,.legend{color:var(--ink-soft)}
.translbl{color:var(--ink)}
.atrans{color:var(--ink)}
.syncstat,.hllbl{color:var(--ink-soft)}

/* analysis blocks */
.pill{border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--line);color:var(--ink)}
.pill:hover{border-color:var(--em);background:var(--em-soft)}
.fcard{
  border-radius:var(--r-lg);background:var(--surface);
  border:1.5px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--em)}
.fcard .lbl{color:var(--teal-deep);font-weight:800}
.fcard.flip{background:linear-gradient(140deg,var(--em),var(--teal));border-color:transparent;color:#04120D}
.fcard.flip .lbl{color:rgba(4,18,13,.72)}
.rev1{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.refl{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pfbadge{border-radius:var(--r-pill);border:1px solid var(--line);color:var(--teal-deep)}
.pfb{border-radius:var(--r-sm);border:1px solid var(--line)}
th{background:var(--surface-2);color:var(--ink);border-bottom:2px solid var(--line)}
td{border-bottom:1px solid var(--line)}
table.stack tr{border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface)}

/* comparison + timeline */
.cmpslot{border-radius:var(--r-pill);background:var(--surface);border:1.5px solid var(--em)}
.cmpslot .x{background:var(--em-soft);color:var(--em-deep)}
.cmpsetup select{border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.cmpcommon{border-radius:var(--r-lg);background:var(--em-soft);border:1px solid color-mix(in srgb,var(--em) 32%,transparent)}
.cmpcommon h4{color:var(--em-deep)}
.cmpchip{border-radius:var(--r-pill);background:var(--surface);border:1.3px solid var(--line)}
.cmptable td.lbl{background:var(--surface-2);color:var(--ink)}
.tlcard{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--amber)}
.tlev.madinah .tlcard{border-left-color:var(--azure);border-color:var(--line)}
.tlm{border:2px solid var(--amber);background:var(--surface);border-radius:var(--r-pill)}
.tlev.madinah .tlm{border-color:var(--azure)}
.tlyear{border-radius:var(--r-pill);background:var(--g-makki);color:#fff;font-family:var(--disp);font-weight:700}
.tlev.madinah .tlyear{background:var(--g-madani)}
.tlt{font-family:var(--disp);font-weight:700;color:var(--ink)}
.tld{color:var(--ink)}
.tls span{border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft)}
.tl .tls span:hover{background:var(--em);border-color:var(--em);color:#04120D}
.tlphase{border-radius:var(--r-pill);font-family:var(--disp);font-weight:700}
.tlphase.mk{background:var(--surface-2);color:var(--makki);border:1px solid var(--line)}
.tlphase.md{background:var(--surface-2);color:var(--madani);border:1px solid var(--line)}

/* status surfaces */
.errbox{border-radius:var(--r-md);border:1.5px solid var(--ember);
  background:color-mix(in srgb,var(--ember) 10%,transparent);color:var(--ember)}
.netbanner{border-radius:var(--r-md);border:1.5px solid var(--amber);
  background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--ink)}
.netbanner b{color:var(--amber)}
.spin{border-color:var(--line);border-top-color:var(--em)}
.prog span{background:var(--line);border-radius:99px}
.prog span.done{background:linear-gradient(90deg,var(--em),var(--teal));opacity:1}
.loading{color:var(--ink-soft)}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);color:var(--ink-soft)}
.madeby a{color:var(--em-deep);border-bottom-color:color-mix(in srgb,var(--em) 42%,transparent)}
.madeby a:hover{color:var(--teal-deep);border-bottom-color:var(--teal)}

/* --- the footer band: mark left, text beside it, packed tight -------------
   It used to be three centred blocks stacked vertically — an ornament on its
   own row, the credits, then the byline — which spent a lot of height saying
   very little. One row instead: the app tile on the left where there was an
   empty margin, and the text filling the width it was leaving unused. */
footer{--nt-foot-pb:16px;padding:14px 0 16px}
footer .hizb{display:none!important}     /* the lone ۞ above the text: gone */
.footrow{
  display:flex;align-items:center;gap:clamp(12px,2.2vw,22px);
  max-width:var(--shell);margin:0 auto;
  padding-left:var(--gut);padding-right:var(--gut);
  text-align:left}
.footlogo{
  flex:0 0 auto;width:clamp(42px,5.2vw,58px);height:auto;display:block;
  border-radius:10px}
.foottext{min-width:0;flex:1 1 auto}
.foottext p{margin:0;line-height:1.42}
.foottext .madeby{margin-top:3px}

/* Below the fold of a phone the row would crush the text into a narrow
   column, so stack — but keep the tight spacing that was the point. */
@media(max-width:560px){
  .footrow{flex-direction:column;gap:8px;text-align:center}
  .foottext p{line-height:1.38}
}


/* ============================================================================
   10 · VIBRANT PIGMENTS — 24 hues, one per Surah
   The app already assigns pe1–pe24 via pearl(n) = 'pe'+((n-1)%24+1), and puts
   the SAME class on the detail sheet. So re-pointing these 24 variables colours
   all 114 cards and every tap-through view at once, with no JS change.

   The original 24 were muted historical tile pigments. These are their vivid
   counterparts, deliberately ordered warm/cool/warm so that consecutive Surahs
   never look like a gradient running down the column.
   ========================================================================== */
.pe1 {--pe:#2F6BFF}   /* electric blue  */
.pe2 {--pe:#FF6B35}   /* vivid orange   */
.pe3 {--pe:#12C48B}   /* emerald        */
.pe4 {--pe:#C04CF0}   /* violet         */
.pe5 {--pe:#FFB020}   /* amber          */
.pe6 {--pe:#FF4D8D}   /* hot pink       */
.pe7 {--pe:#0FB9D6}   /* cyan           */
.pe8 {--pe:#8BC220}   /* lime           */
.pe9 {--pe:#7A5CFF}   /* indigo         */
.pe10{--pe:#FF7A45}   /* coral          */
.pe11{--pe:#00B8A9}   /* teal           */
.pe12{--pe:#E8467C}   /* rose           */
.pe13{--pe:#4A9CFF}   /* sky            */
.pe14{--pe:#F0961E}   /* tangerine      */
.pe15{--pe:#34C759}   /* green          */
.pe16{--pe:#9B5CF0}   /* purple         */
.pe17{--pe:#FFC93C}   /* gold           */
.pe18{--pe:#FF5C7A}   /* salmon         */
.pe19{--pe:#1FC3C3}   /* turquoise      */
.pe20{--pe:#A3CC2E}   /* chartreuse     */
.pe21{--pe:#5B7CFF}   /* periwinkle     */
.pe22{--pe:#FF8A3D}   /* mango          */
.pe23{--pe:#22C58B}   /* jade           */
.pe24{--pe:#D94CE0}   /* orchid         */

/* The wash, the hairline and the text-safe variant are derived from --pe
   rather than written out 24 times.

   These MUST be declared on the elements that carry the peN class (.card and
   .sheet), not on :root. A custom property substitutes var() at the element it
   is declared on, then inherits already-resolved — so deriving them at :root
   would freeze all 24 to the root's --pe and every Surah would come out the
   same colour. Declared here, each card resolves its own hue.

   --pe-text is the pigment pushed toward the page's ink, which keeps a pale
   hue like gold or chartreuse readable as text instead of washing out. */
:root{
  --pe:var(--em);
  --peW:var(--em-soft);
  --pe-text:var(--em-deep);
  --pe-line:color-mix(in srgb, var(--em) 38%, transparent);
}
.card,.sheet{
  --peW:color-mix(in srgb, var(--pe) 14%, #fff);
  --pe-text:color-mix(in srgb, var(--pe) 70%, #04140F);
  --pe-line:color-mix(in srgb, var(--pe) 40%, transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .sheet{
    --peW:color-mix(in srgb, var(--pe) 22%, #0A1016);
    --pe-text:color-mix(in srgb, var(--pe) 84%, #EAF6F1);
    --pe-line:color-mix(in srgb, var(--pe) 48%, transparent);
  }
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .sheet{
  --peW:color-mix(in srgb, var(--pe) 22%, #0A1016);
  --pe-text:color-mix(in srgb, var(--pe) 84%, #EAF6F1);
  --pe-line:color-mix(in srgb, var(--pe) 48%, transparent);
}

/* --- the card wears its pigment --- */
.card{
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--pe) 15%, var(--surface)) 0%,
      var(--surface) 62%);
  border-color:var(--pe-line);
  -webkit-tap-highlight-color:color-mix(in srgb, var(--pe) 22%, transparent);
}
.card:hover{
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--pe) 17%, var(--surface)) 0%,
      var(--surface) 66%);
  border-color:var(--pe-line);
  box-shadow:var(--sh-2),0 0 0 1px var(--pe-line),
             0 10px 30px -14px color-mix(in srgb, var(--pe) 60%, transparent);
}
.card .motif{background:color-mix(in srgb, var(--pe) 18%, transparent)}
.card .enname{color:var(--pe-text)}

/* the tap itself: a quick, positive press rather than a dead click */
.card:active{
  transform:translateY(0) scale(.988);
  box-shadow:var(--sh-1),0 0 0 2px var(--pe-line);
  transition-duration:.07s}


/* ============================================================================
   11 · THE TAP-THROUGH VIEW — each Surah opens in its own colour
   openSurah() already does: sheet.classList.add(pearl(n)). Everything below
   reads --pe from that class, so Surah 36 opens teal, 37 opens rose, and so on.
   ========================================================================== */
.sheet{
  background:
    radial-gradient(130% 62% at 50% 0%, color-mix(in srgb, var(--pe) 20%, transparent), transparent 62%),
    var(--surface);
  border-color:var(--pe-line);
  box-shadow:var(--sh-3),0 0 0 1px var(--pe-line),
             0 30px 80px -40px color-mix(in srgb, var(--pe) 70%, transparent);
}
.frame{border-color:var(--pe-line)}
.frame::before{border-color:color-mix(in srgb, var(--pe) 30%, transparent)}
.closeb:hover{background:var(--peW);color:var(--pe-text);border-color:var(--pe-line)}

.d-ar{color:var(--pe-text)}
.d-en{color:var(--ink)}
.d-motif{background:var(--peW);border-color:var(--pe-line);stroke:var(--pe)}
.rule{border-top-color:var(--pe-line)}
.rule::after{color:var(--pe);background:var(--surface)}

/* section headings take the Surah's hue; the underline is the same hue, faded */
.sheet .sec>h2,.analysis .sec>h2{color:var(--pe-text);border-color:var(--pe-line)}
.sheet .mainhead{color:var(--pe-text)}

/* panels inside the sheet pick up the faintest wash so the colour reads as the
   view's identity rather than a stripe bolted onto the top */
.sheet .pbox,.sheet .reading{
  background:color-mix(in srgb, var(--pe) 5%, var(--surface-2));
  border-color:var(--pe-line)}
.sheet .pill:hover,.sheet .abtn:hover,.sheet .recp:hover{
  border-color:var(--pe);background:var(--peW);color:var(--pe-text)}
.sheet .anum{color:var(--pe-text)}
.sheet .ayah.playing{background:var(--peW)}
.sheet .fcard:hover{border-color:var(--pe);box-shadow:var(--sh-2),0 0 0 1px var(--pe-line)}
.sheet .fcard .lbl{color:var(--pe-text)}
.sheet .rev1,.sheet .refl{border-color:var(--pe-line)}
.sheet th{border-bottom-color:var(--pe-line)}

/* Buttons stay emerald on purpose: they are the one element whose contrast must
   hold for all 24 hues, and a pale pigment like gold cannot carry white text. */


/* ============================================================================
   12 · FORM CONTROLS & HARDCODED-LIGHT LEFTOVERS
   A handful of the app's rules paint a near-white fill directly (#FFFDF8,
   #EDF1FB, #F0F3FB) instead of going through a token. Left alone they become
   white boxes holding light text once the page goes dark. Each is re-pointed
   at a token here; none of them changes in light mode.
   ========================================================================== */
.memo select,.memo input[type=number],
.cmpsetup select,.appbar select{
  background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-sm)}
.memo select:focus,.memo input[type=number]:focus{
  border-color:var(--em);outline:none;box-shadow:var(--ring)}
.memo label,.memo{color:var(--ink-soft)}
/* the checkbox is a native control: tint it rather than rebuild it */
.memo input[type=checkbox]{accent-color:var(--em);width:17px;height:17px}
.fsctl button:hover,.appbar .absize button:hover{background:var(--em-soft)}

/* timeline: the Madinah variants carry their own pale blue fills */
.tlev.madinah .tlm{background:var(--surface);border-color:var(--azure)}
.tlev.madinah .tls span{background:var(--surface-2);border-color:var(--line);color:var(--ink-soft)}
.tlev.madinah::before{background:var(--pe-line)}

/* native dropdown popups follow color-scheme, which the token blocks set */
select option{background:var(--surface);color:var(--ink)}


/* ============================================================================
   13 · FLOATING BACK CONTROL
   Three concentric rings with a bold arrow at the centre. Appears only while
   something is open, and steps back one level per tap:
     word-by-word panel → reading view → overlay → page.
   Built by skin/rahmah-skin.js; it adds no markup to index.html.
   ========================================================================== */
.rahmah-back{
  position:fixed;left:18px;bottom:18px;z-index:9995;
  width:62px;height:62px;padding:0;border:none;border-radius:50%;
  display:none;place-items:center;cursor:pointer;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.rahmah-back.on{display:grid}

/* layer 1 — outer halo */
.rahmah-back::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:color-mix(in srgb, var(--em) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--em) 38%, transparent);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
/* layer 2 — middle ring */
.rahmah-back::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  background:color-mix(in srgb, var(--em) 34%, transparent);
  border:1px solid color-mix(in srgb, var(--em) 55%, transparent);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
/* layer 3 — solid core carrying the arrow */
.rahmah-back .rb-core{
  position:relative;z-index:1;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--em),var(--teal));
  box-shadow:0 8px 22px -6px color-mix(in srgb, var(--em) 75%, transparent),
             inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.rahmah-back .rb-core svg{
  width:23px;height:23px;display:block;
  fill:none;stroke:#04120D;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.rahmah-back:hover::before{transform:scale(1.10)}
.rahmah-back:hover::after{transform:scale(1.06)}
.rahmah-back:hover .rb-core{transform:translateX(-2px) scale(1.05)}
.rahmah-back:active .rb-core{transform:translateX(-1px) scale(.94)}
.rahmah-back:focus-visible{outline:3px solid var(--em);outline-offset:4px}

/* a slow breath on the outer halo, so it reads as live without nagging */
@keyframes rb-breathe{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.13);opacity:.45}
}
.rahmah-back.on::before{animation:rb-breathe 2.8s ease-in-out infinite}

@media (max-width:619px){
  .rahmah-back{left:14px;bottom:14px;width:58px;height:58px}
  .rahmah-back .rb-core{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .rahmah-back.on::before{animation:none}
  .rahmah-back::before,.rahmah-back::after,.rahmah-back .rb-core{transition:none}
  .rahmah-back:hover::before,.rahmah-back:hover::after,
  .rahmah-back:hover .rb-core{transform:none}
}


/* ============================================================================
   14 · MOTION & QUALITY FLOOR
   ========================================================================== */
/* The app already goes full-width for the widget below 1079px. This skin sets
   an explicit .ptw width for the desktop header slot, and because it lands
   later in the cascade it would otherwise beat that mobile rule — so restate
   it here rather than leaving the widget pinned narrow on a phone. */
@media (max-width:1079px){
  .ptw{width:100%;margin:14px 0 0}
  .ptw-list li{min-width:0}
  .ptw-name{font-size:11px}
  .ptw-at{font-size:12px}
}
@media (max-width:619px){
  .toolbar{margin:-14px auto 0;border-radius:var(--r-lg);padding:16px 14px 12px}
  .card{border-radius:var(--r-md);padding:12px 14px}
  .card .num{width:42px;height:46px;border-radius:21px 21px 10px 10px}
  .ptw{border-radius:var(--r-lg)}
}
@media (prefers-reduced-motion:reduce){
  .card,.card .num,.card .motif,.btn,.chip,.fcard{transition:none!important}
  .card:hover,.btn:hover,.chip:hover,.fcard:hover{transform:none!important}
  .ptw-top::after{transition:none!important}
}
/* ===========================================================================
   RAWDAH NIGHT — ornate hero treatment
   ---------------------------------------------------------------------------
   Turns the header into an emerald night courtyard: a mosque skyline, hanging
   lanterns, a crescent, stars and an arabesque wash, inside a gold page frame.
   Everything below it is re-tuned to sit on that ground.

   NO IMAGE FILES. Every ornament is an inline SVG data URI or a gradient, so
   the app keeps working from file:// and from the service worker cache with no
   extra request. Artwork is objects, nature and geometry only — no figures —
   per the project's hard rule 4.

   THEMES. The hero band is night in BOTH themes, the way the prayer widget is
   dark in both — a lit night sky is the identity, not a colour scheme. Every
   surface BELOW the band is theme-dependent, so each such colour is a --nt-*
   token declared dark here and re-declared for light further down. Style with
   the tokens, never with a literal: a literal is what broke light mode the
   first time, leaving cream text on a white page.

   Nothing here touches the JS contract (REDESIGN-BLUEPRINT.md §7): no display
   on .on/.open, no grid-template-* on .grid, no font-family on body, the
   pe1–24 pigment classes only get re-pointed, and selected state is still
   read from [aria-pressed="true"].
   ------------------------------------------------------------------------- */

:root{
  /* the night band — fixed, not theme-dependent */
  --nt-sky-hi:#0C4438;
  --nt-sky-mid:#073029;
  --nt-sky-lo:#03170F;
  --nt-gold:#D9B25A;
  --nt-gold-lite:#F0D79A;
  --nt-cream:#F6EFDC;

  /* surfaces below the band — dark values; the light block overrides them */
  --nt-edge:rgba(217,178,90,.30);
  --nt-edge-lit:rgba(217,178,90,.55);
  --nt-panel-a:rgba(7,38,31,.90);
  --nt-panel-b:rgba(4,22,18,.94);
  --nt-panel-solid:#062620;
  --nt-inset:rgba(2,18,14,.48);
  --nt-field:rgba(2,18,14,.72);
  --nt-txt:#C9E3D6;
  --nt-txt-hi:#F6EFDC;
  --nt-muted:#9DBFB0;
  --nt-place:#88AB9C;
  --nt-card-a:rgba(9,42,34,.80);
  --nt-card-b:rgba(4,23,18,.86);
  --nt-card-edge:rgba(217,178,90,.16);
  --nt-ar:#EDE3C6;
  --nt-ground:radial-gradient(1300px 560px at 50% -90px,rgba(12,68,56,.55),transparent 72%);
}

/* --- the emerald ground, in place of the obsidian one --- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#03150F; --surface:#082A22; --surface-2:#0C3428;
    --line:#134838; --ink:#EAF6EF; --ink-soft:#9DBFB0;
    --glass-bg:rgba(8,42,34,.66);
  }
}
:root[data-theme="dark"]{
  --paper:#03150F; --surface:#082A22; --surface-2:#0C3428;
  --line:#134838; --ink:#EAF6EF; --ink-soft:#9DBFB0;
  --glass-bg:rgba(8,42,34,.66);
}

/* --- light mode: same shapes, daylight surfaces --- */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --nt-edge:rgba(164,126,48,.30);
    --nt-edge-lit:rgba(164,126,48,.55);
    --nt-panel-a:rgba(255,255,255,.88);
    --nt-panel-b:rgba(240,247,244,.94);
    --nt-panel-solid:#FFFFFF;
    --nt-inset:rgba(240,245,243,.85);
    --nt-field:#FFFFFF;
    --nt-txt:#4C6157;
    --nt-txt-hi:#0D1A17;
    --nt-muted:#5C6C67;
    --nt-place:#859890;
    --nt-card-a:rgba(255,255,255,.96);
    --nt-card-b:rgba(246,251,249,.99);
    --nt-card-edge:rgba(164,126,48,.20);
    --nt-ar:#2A2418;
    --nt-ground:none;
  }
}
:root[data-theme="light"]{
  --nt-edge:rgba(164,126,48,.30);
  --nt-edge-lit:rgba(164,126,48,.55);
  --nt-panel-a:rgba(255,255,255,.88);
  --nt-panel-b:rgba(240,247,244,.94);
  --nt-panel-solid:#FFFFFF;
  --nt-inset:rgba(240,245,243,.85);
  --nt-field:#FFFFFF;
  --nt-txt:#4C6157;
  --nt-txt-hi:#0D1A17;
  --nt-muted:#5C6C67;
  --nt-place:#859890;
  --nt-card-a:rgba(255,255,255,.96);
  --nt-card-b:rgba(246,251,249,.99);
  --nt-card-edge:rgba(164,126,48,.20);
  --nt-ar:#2A2418;
  --nt-ground:none;
}

/* =========================================================================
   1 · THE GOLD PAGE FRAME
   Fixed, non-interactive: a 1px rule and four corner flourishes. Four data
   URIs rather than one rotated element, because a background image cannot be
   rotated per corner.
   ====================================================================== */
body::before{
  content:'';position:fixed;inset:0;z-index:9989;pointer-events:none;
  border:1px solid var(--nt-edge);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23D9B25A' stroke-width='1.7' opacity='.8'%3E%3Cpath d='M3 46V17A14 14 0 0 1 17 3h29'/%3E%3Cpath d='M9 62V20A11 11 0 0 1 20 9h42'/%3E%3Cpath d='M19 12l7 7-7 7-7-7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left top/78px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg transform='translate(90,0) scale(-1,1)' fill='none' stroke='%23D9B25A' stroke-width='1.7' opacity='.8'%3E%3Cpath d='M3 46V17A14 14 0 0 1 17 3h29'/%3E%3Cpath d='M9 62V20A11 11 0 0 1 20 9h42'/%3E%3Cpath d='M19 12l7 7-7 7-7-7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top/78px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg transform='translate(0,90) scale(1,-1)' fill='none' stroke='%23D9B25A' stroke-width='1.7' opacity='.8'%3E%3Cpath d='M3 46V17A14 14 0 0 1 17 3h29'/%3E%3Cpath d='M9 62V20A11 11 0 0 1 20 9h42'/%3E%3Cpath d='M19 12l7 7-7 7-7-7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left bottom/78px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg transform='translate(90,90) scale(-1,-1)' fill='none' stroke='%23D9B25A' stroke-width='1.7' opacity='.8'%3E%3Cpath d='M3 46V17A14 14 0 0 1 17 3h29'/%3E%3Cpath d='M9 62V20A11 11 0 0 1 20 9h42'/%3E%3Cpath d='M19 12l7 7-7 7-7-7z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/78px;
}

/* =========================================================================
   2 · THE HERO BAND
   Layer order, front to back: stars · arabesque wash · crescent · moon glow ·
   sky gradient. The skyline and the lanterns need their own boxes, so they
   take header::before and header::after — both of which the app switches off,
   and this file switches back on.
   ====================================================================== */
header{
  position:relative;overflow:hidden;isolation:isolate;
  /* --nt-hdr-pt is the band's own top padding. §15 re-reads it and adds the
     iOS status-bar inset, so every breakpoint sets the token, never the
     padding-top directly. */
  --nt-hdr-pt:30px;
  padding:30px clamp(14px,4vw,46px) 42px;
  border-bottom:1px solid rgba(217,178,90,.55);
  box-shadow:0 1px 0 rgba(3,21,15,.9),0 18px 40px -26px rgba(0,0,0,.9);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23D7F0E2'%3E%3Ccircle cx='24' cy='38' r='1.3' opacity='.75'/%3E%3Ccircle cx='96' cy='18' r='1' opacity='.5'/%3E%3Ccircle cx='158' cy='52' r='1.5' opacity='.7'/%3E%3Ccircle cx='212' cy='26' r='1' opacity='.45'/%3E%3Ccircle cx='58' cy='104' r='1.1' opacity='.6'/%3E%3Ccircle cx='134' cy='128' r='1' opacity='.4'/%3E%3Ccircle cx='238' cy='112' r='1.3' opacity='.6'/%3E%3Ccircle cx='18' cy='176' r='1' opacity='.45'/%3E%3Ccircle cx='108' cy='206' r='1.4' opacity='.65'/%3E%3Ccircle cx='186' cy='178' r='1' opacity='.4'/%3E%3Ccircle cx='246' cy='232' r='1.2' opacity='.55'/%3E%3Ccircle cx='74' cy='246' r='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0/260px 260px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23CBA85A' stroke-width='1' opacity='.13'%3E%3Cpath d='M75 10l24 24-24 24-24-24z'/%3E%3Cpath d='M75 82l24 24-24 24-24-24z'/%3E%3Cpath d='M0 46l24 24-24 24'/%3E%3Cpath d='M150 46l-24 24 24 24'/%3E%3Ccircle cx='75' cy='70' r='9'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0/150px 150px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M46 6a34 34 0 1 0 22 62A28 28 0 1 1 46 6z' fill='%23F0D79A' opacity='.92'/%3E%3C/svg%3E") no-repeat 62% 30px/50px,
    radial-gradient(560px 340px at 88% 6%,rgba(240,215,154,.17),transparent 68%),
    linear-gradient(180deg,var(--nt-sky-hi) 0%,var(--nt-sky-mid) 44%,var(--nt-sky-lo) 100%);
}
/* the skyline — domes, minarets and an arcade, mirrored left and right so the
   brand block in the middle keeps a quiet sky behind it */
header::before{
  content:'';display:block;position:absolute;left:0;right:0;bottom:0;z-index:-1;
  height:min(70%,250px);pointer-events:none;opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23062E22'%3E%3Cpath d='M0 300v-42h1600v42z'/%3E%3Cpath d='M61 258V140h18v118z'/%3E%3Cpath d='M56 142h28v7H56z'/%3E%3Cpath d='M61 140q9-30 9-30t9 30z'/%3E%3Cpath d='M68 110h4V96h-4z'/%3E%3Cpath d='M128 258v-71q0-50 62-55 62 5 62 55v71z'/%3E%3Cpath d='M188 132v-18h4v18z'/%3E%3Ccircle cx='190' cy='108' r='5'/%3E%3Cpath d='M291 258V170h18v88z'/%3E%3Cpath d='M286 172h28v7h-28z'/%3E%3Cpath d='M291 170q9-26 9-26t9 26z'/%3E%3Cpath d='M298 144h4v-12h-4z'/%3E%3Cpath d='M340 258v-33q0-30 40-35 40 5 40 35v33z'/%3E%3Cpath d='M378 190v-14h4v14z'/%3E%3Ccircle cx='380' cy='172' r='4'/%3E%3Cpath d='M440 258v-28q0-16 16-16t16 16v28zm44 0v-28q0-16 16-16t16 16v28zm44 0v-28q0-16 16-16t16 16v28z'/%3E%3Cpath d='M748 258v-43q0-32 52-40 52 8 52 40v43z'/%3E%3Cpath d='M798 175v-15h4v15z'/%3E%3Ccircle cx='800' cy='156' r='4'/%3E%3Cpath d='M628 258v-24q0-14 14-14t14 14v24zm40 0v-24q0-14 14-14t14 14v24zm256 0v-24q0-14 14-14t14 14v24zm40 0v-24q0-14 14-14t14 14v24z'/%3E%3Cpath d='M1521 258V140h18v118z'/%3E%3Cpath d='M1516 142h28v7h-28z'/%3E%3Cpath d='M1521 140q9-30 9-30t9 30z'/%3E%3Cpath d='M1528 110h4V96h-4z'/%3E%3Cpath d='M1348 258v-71q0-50 62-55 62 5 62 55v71z'/%3E%3Cpath d='M1408 132v-18h4v18z'/%3E%3Ccircle cx='1410' cy='108' r='5'/%3E%3Cpath d='M1291 258V170h18v88z'/%3E%3Cpath d='M1286 172h28v7h-28z'/%3E%3Cpath d='M1291 170q9-26 9-26t9 26z'/%3E%3Cpath d='M1298 144h4v-12h-4z'/%3E%3Cpath d='M1180 258v-33q0-30 40-35 40 5 40 35v33z'/%3E%3Cpath d='M1218 190v-14h4v14z'/%3E%3Ccircle cx='1220' cy='172' r='4'/%3E%3Cpath d='M1040 258v-28q0-16 16-16t16 16v28zm44 0v-28q0-16 16-16t16 16v28zm44 0v-28q0-16 16-16t16 16v28z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom/cover;
}
/* the lanterns, and the warm pools of light they throw */
header::after{
  content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 300'%3E%3Cg fill='none' stroke='%23D9B25A' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M55 0v62'/%3E%3Cpath d='M37 70h36l-8-8H45z'/%3E%3Cpath d='M30 72h50l-9 104H39z'/%3E%3Cpath d='M39 176h32l-6 12H45z'/%3E%3Cpath d='M55 188v12'/%3E%3Ccircle cx='55' cy='207' r='7'/%3E%3C/g%3E%3Cpath d='M39 78h32l-7 92H46z' fill='%23F2C879' opacity='.30'/%3E%3C/svg%3E") no-repeat left 3.5% top -10px/auto 214px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 300'%3E%3Cg fill='none' stroke='%23D9B25A' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M55 0v62'/%3E%3Cpath d='M37 70h36l-8-8H45z'/%3E%3Cpath d='M30 72h50l-9 104H39z'/%3E%3Cpath d='M39 176h32l-6 12H45z'/%3E%3Cpath d='M55 188v12'/%3E%3Ccircle cx='55' cy='207' r='7'/%3E%3C/g%3E%3Cpath d='M39 78h32l-7 92H46z' fill='%23F2C879' opacity='.30'/%3E%3C/svg%3E") no-repeat right 3.5% top -34px/auto 170px,
    radial-gradient(160px 160px at 6% 20%,rgba(242,200,121,.22),transparent 70%),
    radial-gradient(130px 130px at 94% 14%,rgba(242,200,121,.17),transparent 70%);
}
@media(max-width:860px){
  header::after{background-size:auto 140px,auto 112px,auto,auto}
}

/* --- the brand block. White-on-night in both themes, because the band is
       night in both. --- */
header .portal{position:relative;z-index:1;align-items:center}
.brandlogo{width:clamp(92px,10vw,132px);height:auto;
  filter:drop-shadow(0 0 26px rgba(240,215,154,.38))}
.brandsub .en{color:#FFF9EA;letter-spacing:.012em;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.brandsub .ta{color:#FBEFD2}
.brandsub .si{color:#DDF1E4}
.brandsub .ar{color:#4BE3AE;text-shadow:0 0 20px rgba(75,227,174,.35)}

/* the page ground picks the hero up and carries it down, so the band does not
   end in a hard edge against flat black. --paper stays the base, and
   --nt-ground resolves to `none` in light mode. */
body{background:var(--nt-ground),var(--paper)}

/* =========================================================================
   3 · THE PRAYER PANEL — a gold-framed instrument face.
   Dark in both themes, deliberately: see REDESIGN-BLUEPRINT.md §5.
   ====================================================================== */
.ptw{
  border:1.5px solid rgba(217,178,90,.55);border-radius:18px;
  padding:11px 13px 9px;
  background:linear-gradient(180deg,rgba(6,34,28,.94),rgba(2,16,12,.97));
  box-shadow:0 0 0 4px rgba(217,178,90,.10),
             0 22px 50px -18px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.ptw-top{flex-direction:column;align-items:center;gap:1px}
.ptw-time{font-size:clamp(23px,2.3vw,30px);color:#F7FCF9;letter-spacing:.015em}
.ptw-loc{font-size:11px;line-height:1.35;color:#B9D4C6;text-align:center;white-space:normal}
.ptw-list li{border-radius:9px}
.ptw-list li.now{
  background:linear-gradient(90deg,rgba(47,224,160,.26),rgba(47,224,160,.07));
  box-shadow:inset 3px 0 0 var(--nt-gold-lite),inset 0 0 0 1px rgba(93,214,167,.30)}
.ptw-foot{border-top-color:rgba(217,178,90,.30)}
.ptw-foot b{color:var(--nt-gold-lite)}
.ptw-mnav{border-color:rgba(217,178,90,.55);color:var(--nt-gold-lite)}

/* =========================================================================
   4 · THE CONTROL DECK
   ====================================================================== */
.toolbar{
  border:1px solid var(--nt-edge);border-radius:24px;
  background:linear-gradient(180deg,var(--nt-panel-a),var(--nt-panel-b));
  box-shadow:inset 0 1px 0 rgba(217,178,90,.14),
             0 28px 64px -28px rgba(0,0,0,.45);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .toolbar{background:var(--nt-panel-solid)}
}
.tagline{color:var(--nt-txt)}
.tagline b{color:var(--nt-gold-lite)}

.search input{
  background:var(--nt-field);border:1.5px solid var(--nt-edge);
  color:var(--ink);border-radius:14px}
.search input::placeholder{color:var(--nt-place)}
.search input:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(47,224,160,.16)}

.langsel{background:var(--nt-inset);border:1px solid var(--nt-edge);border-radius:var(--r-pill)}
.langsel button{color:var(--nt-txt)}
.langsel button:hover{background:rgba(217,178,90,.12);color:var(--nt-txt-hi)}
.langsel button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));color:#04120D;
  box-shadow:0 6px 16px -8px var(--em)}

.chip{
  background:var(--nt-inset);border:1px solid var(--nt-edge);color:var(--nt-txt);
  border-radius:var(--r-pill)}
.chip:hover{border-color:var(--nt-edge-lit);background:rgba(217,178,90,.12);color:var(--nt-txt-hi)}
.chip[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--em),var(--teal));border-color:transparent;
  color:#04120D;box-shadow:0 6px 18px -8px var(--em)}
select.chip{color:var(--nt-txt)}

/* the three study tools, each with its own mark.
   .chip.goldc is needed in the selector: the skin already sets
   `.featrow .chip.goldc{padding:10px 20px}` (0,3,0), which outranks a plain
   `.featrow .chip` and left the icon sitting on top of the first letter. */
.featrow .chip,.featrow .chip.goldc{
  position:relative;padding-left:46px;border-radius:14px;
  border-color:var(--nt-edge-lit);color:var(--nt-txt-hi)}
.featrow .chip::before{
  content:'';position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;background-repeat:no-repeat;background-position:center;
  background-size:contain;opacity:.92}
#globalb::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8992F' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.6-4.3-2.2-7-2v13c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V4c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 6v13'/%3E%3C/svg%3E")}
#timelineb::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8992F' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='1.2' fill='%23C8992F' stroke='none'/%3E%3Ccircle cx='15.5' cy='17.5' r='1.2' fill='%23C8992F' stroke='none'/%3E%3C/svg%3E")}
#compareb::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8992F' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 4v16M5 7h14'/%3E%3Cpath d='M5 7l-3 7h6zM19 7l-3 7h6z'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E")}

.appbar{
  background:var(--nt-inset);border:1px solid var(--nt-edge);
  border-radius:16px}
.appbar,.appbar label,.ablbl,.absize{color:var(--nt-txt)}
.appbar select{background:var(--nt-field);border:1px solid var(--nt-edge);color:var(--ink)}
.appbar button{border:1px solid var(--nt-edge);background:var(--nt-field);color:var(--em-deep)}

/* =========================================================================
   5 · THE LIST
   ====================================================================== */
.listhead h2{color:var(--nt-txt-hi)}
.listhead h2::before{
  content:'';display:inline-block;vertical-align:-6px;margin-right:11px;
  width:27px;height:27px;background-repeat:no-repeat;background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8992F' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.6-4.3-2.2-7-2v13c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V4c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 6v13'/%3E%3C/svg%3E")}
.listhead .lh-rule{height:1px;
  background:linear-gradient(90deg,var(--nt-edge-lit),rgba(217,178,90,.10))}
.listhead .count{color:var(--nt-muted)}

/* --- the Surah card ----------------------------------------------------- */
.card{
  border:1px solid var(--nt-card-edge);border-radius:14px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pe) 9%,var(--nt-card-a)),
    color-mix(in srgb,var(--pe) 5%,var(--nt-card-b)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding-right:38px;
}
.card:hover{
  border-color:color-mix(in srgb,var(--pe) 55%,transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pe) 15%,var(--nt-card-a)),
    color-mix(in srgb,var(--pe) 8%,var(--nt-card-b)));
  box-shadow:0 10px 26px -14px color-mix(in srgb,var(--pe) 70%,transparent)}
/* the chevron the mockup ends each row with. Absolute, so the card's
   grid-template-areas contract is untouched. */
.card::after{
  content:'\203A';position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-size:23px;line-height:1;
  color:var(--nt-edge-lit);transition:color .18s ease,transform .18s ease}
.card:hover::after{color:var(--nt-gold);transform:translateY(-50%) translateX(2px)}

/* the number reads as the Surah's own pigment, a rounded tile rather than the
   arch. Makki/Madani is carried by the tag, which is where the mockup puts it. */
.card .num,.card.makki .num,.card.madani .num{
  width:44px;height:44px;border-radius:13px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--pe) 96%,#fff),
    color-mix(in srgb,var(--pe) 62%,#04120D));
  color:#04120D;font-weight:800;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--pe) 80%,transparent)}
.card .motif{
  border-radius:13px;
  background:color-mix(in srgb,var(--pe) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--pe) 32%,transparent)}
.card .enname{color:color-mix(in srgb,var(--pe) 72%,var(--ink))}
.card .theme{color:var(--nt-muted)}
.card .arname{color:var(--nt-ar)}

/* =========================================================================
   7 · ABOVE THE FOLD
   The first build spent ~790px before the first Surah card. Almost all of it
   was air: the prayer widget was inside the header portal and forced the band
   ~300px tall, and the deck stacked five full-width rows. Three moves fix it —
   a shorter band, the prayer times as their own slim horizontal rail, and a
   deck that puts the filters and the study tools on ONE row with the settings
   folded away. Target: cards begin around 480px on a 1328px-wide window.
   ====================================================================== */

/* --- 7.1 the band: title only, and tighter --- */
header{--nt-hdr-pt:12px;padding:12px clamp(14px,4vw,46px) 15px}
header .portal{gap:clamp(12px,2.2vw,26px);align-items:center;justify-content:center}
.brandlogo{width:clamp(60px,6.4vw,88px)}
.brandsub{line-height:1.08}
.brandsub span{font-size:clamp(15px,1.95vw,25px)}
.brandsub .ar{font-size:clamp(17px,2.3vw,30px);line-height:1.22}
header::before{height:min(78%,190px)}          /* skyline follows the shorter band */
header::after{background-size:auto 150px,auto 118px,auto,auto}
header{background-position:0 0,0 0,62% 14px,0 0,0 0;background-size:260px 260px,150px 150px,40px,auto,auto}

/* --- 7.2 the prayer rail: clock · six prayers in a row · method ---------
   .ptw is now a sibling of <header>, not a child of the portal. It keeps the
   widget's dark instrument face, laid out as one horizontal bar. */
.ptw{
  max-width:1320px;margin:-12px auto 0;position:relative;z-index:2;
  width:auto;padding:8px 14px;
  display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);
  border-radius:16px}
.ptw-top{
  flex:0 0 auto;flex-direction:row;align-items:baseline;gap:9px;
  padding-right:clamp(8px,1.2vw,16px);border-right:1px solid rgba(217,178,90,.28)}
.ptw-top::after{display:none}                  /* the progress bar needs a row of its own; not here */
.ptw-time{font-size:clamp(19px,1.7vw,25px);line-height:1}
.ptw-loc{width:auto;margin:0;max-width:20ch;font-size:10.5px;line-height:1.25;
  text-align:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.ptw-list{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0}
.ptw-list li{
  flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;padding:5px 4px;border-radius:10px;min-width:0}
.ptw-list li svg{width:13px;height:13px;flex:0 0 13px}
.ptw-name{flex:0 0 auto;font-size:10.5px;letter-spacing:.02em}
.ptw-at{font-size:13px;line-height:1.1}
.ptw-foot{
  flex:0 0 auto;margin:0;padding:0 0 0 clamp(8px,1.2vw,16px);
  border-top:none;border-left:1px solid rgba(217,178,90,.28);
  min-width:118px;gap:4px}
.ptw-mname{font-size:10.5px}
.ptw-mnav{width:23px;height:23px;font-size:13px}
@media(max-width:900px){
  .ptw{flex-wrap:wrap;margin-top:-6px}
  .ptw-top{flex:1 1 100%;justify-content:center;border-right:none;padding-right:0}
  .ptw-list{flex:1 1 100%;order:2}
  .ptw-foot{flex:1 1 100%;order:3;border-left:none;padding-left:0;justify-content:center}
}

/* --- 7.3 the deck: fewer rows, less air ---------------------------------- */
.toolbar{margin:11px auto 0;padding:10px clamp(12px,2vw,20px);gap:7px}
/* The tagline is a thin strip, so the settings group rides at its right end
   rather than claiming a row of its own. `order` does the pairing — the
   settings sit last in the DOM, where they belong for reading order. */
.tagline{order:-2;flex:1 1 300px;text-align:left;font-size:12px;margin:0;opacity:.85}
.searchrow{gap:10px}
.search input{padding-top:11px;padding-bottom:11px}

/* filters and study tools share one row instead of taking two. Both were
   flex:0 0 100% — that full-width claim is what forced the stack. */
.chips,.featrow{flex:0 1 auto;gap:7px;margin:0}
.featrow{padding:0;border:none;position:relative}
.featrow::before{                               /* a hairline between the groups */
  content:'';position:absolute;left:-7px;top:18%;bottom:18%;width:1px;
  background:var(--nt-edge)}
@media(max-width:1180px){.featrow::before{display:none}}
.chip{min-height:38px;padding:7px 15px;font-size:13.5px}
.featrow .chip,.featrow .chip.goldc{min-height:38px;padding:7px 15px 7px 40px;font-size:13.5px}
.featrow .chip::before{left:14px;width:17px;height:17px}
select.chip{min-height:38px!important}

/* the settings row: one slim line — a disclosure plus whatever the skin
   scripts appended (Dark, Save for offline) */
.appbar{order:-1;flex:0 1 auto;margin:0;padding:4px 10px;gap:8px;font-size:12.5px;
  border-radius:var(--r-pill)}
.appbar:has(#appset:not([hidden])){flex:0 0 100%;border-radius:14px;padding:7px 12px}
.appset{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.appset[hidden]{display:none}
.apptog{min-height:32px;padding:5px 14px;font-size:12.5px}
.apptog::after{content:' \25BE';font-size:10px;opacity:.75}
.apptog[aria-expanded="true"]::after{content:' \25B4'}
.appbar #themeb,.appbar #offlineb{min-height:32px!important;padding:5px 14px!important;font-size:12.5px!important}

/* --- 7.4 the list starts sooner --- */
.listhead{margin:12px auto 4px}
.listhead h2{font-size:clamp(19px,2vw,26px)}
.listhead h2::before{width:23px;height:23px;vertical-align:-5px;margin-right:9px}

/* =========================================================================
   8 · THE ARRANGEMENT
   Brand hard left, clock and language tiles hard right, tagline under the
   brand, prayer times alone on the rail. The markup moved to match, so this
   only has to lay the pieces out.
   ====================================================================== */

/* --- 8.1 the band: two columns, brand left, controls right --- */
header .portal{
  max-width:1320px;justify-content:space-between;align-items:flex-start;
  gap:clamp(14px,3vw,40px);flex-wrap:wrap;text-align:left}
.brandblock{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  flex:1 1 auto;min-width:0}
/* The logo carries "QUR'AN STUDY COMPANION" in fine print under the wordmark.
   At the size the compact band first used, that line was unreadable and the
   prayer rail's negative margin cropped what was left, so the logo gets its
   own floor here and the rail no longer rides over it. */
.brandlogo{width:clamp(74px,7.4vw,104px);flex:0 0 auto}
.brandsub{flex:0 1 auto;min-width:0}

/* Exactly two lines: the clock on the first, the language tiles and the
   install/WhatsApp links side by side on the second. A grid, not wrapping
   flex — flex wrapping guessed differently at each width and put the band
   anywhere between 256px and 361px tall. */
.headside{
  flex:0 0 auto;margin-left:auto;
  display:grid;grid-template-columns:auto auto;
  grid-template-areas:"clock clock" "lang links";
  justify-content:end;align-items:center;gap:8px 10px}
.ptw-clock{grid-area:clock;justify-self:end}
.headside .langsel{grid-area:lang}
.headside .wa-wrap{grid-area:links}

/* the clock, top right */
.ptw-clock{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:6px 13px;border-radius:14px;
  border:1px solid rgba(217,178,90,.42);
  background:linear-gradient(180deg,rgba(6,34,28,.90),rgba(2,16,12,.94));
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
.ptw-clock .ptw-top{
  display:flex;flex-direction:column;align-items:flex-end;gap:0;
  padding:0;border:none;background:none}
.ptw-clock .ptw-time{
  font-size:clamp(21px,1.9vw,29px);line-height:1.02;color:#F7FCF9}
.ptw-clock .ptw-loc{
  width:auto;max-width:26ch;margin:0;padding:0;font-size:10.5px;line-height:1.28;
  text-align:right;color:#B9D4C6;white-space:normal}

/* the language tiles and the links, directly beneath it */
.headside .langsel{margin:0;flex:0 0 auto}
.headside .wa-wrap{margin:0;flex:0 0 auto}
.headside .wa-cap{font-size:10px}

/* the tagline, under the brand */
header .tagline{
  order:0;max-width:1320px;margin:9px auto 0;padding:0;
  text-align:left;font-size:12.5px;opacity:.9;flex:none}

/* Everything inside the band sits on the night sky in BOTH themes, so none of
   it may take a theme-dependent token. In light mode the tagline and the
   "Install app" / "Feedback only" captions were resolving to dark ink and
   disappearing into the sky. */
header .tagline{color:#AECCBC}
header .tagline b{color:var(--nt-gold-lite)}
.headside .wa-cap{color:#CBE4D8}
.headside .langsel{
  background:rgba(2,18,14,.55);border-color:rgba(217,178,90,.30)}
.headside .langsel button{color:#C9E3D6}
.headside .langsel button:hover{background:rgba(217,178,90,.14);color:#F6EFDC}
.headside .langsel button[aria-pressed="true"]{color:#04120D}

/* --- 8.2 the rail now carries only the prayers and the method --- */
.ptw{margin:-10px auto 0;padding:7px 13px}
.ptw-list{grid-template-columns:repeat(6,minmax(0,1fr))}
.ptw-foot{border-left:1px solid rgba(217,178,90,.28)}

/* --- 8.3 the deck: two rows. Search and settings share the first, filters
       and study tools the second. --- */
.searchrow{order:-1;flex:1 1 460px;gap:10px}
.searchrow .search{flex:1 1 auto;max-width:none}
.toolbar .tagline{display:none}       /* the deck's copy is gone; header owns it now */

/* --- 8.4 responsive ----------------------------------------------------- */
@media(max-width:1060px){
  header .portal{flex-direction:column;align-items:center;text-align:center}
  .brandblock{justify-content:center;flex:0 0 auto}
  .headside{margin-left:0;justify-content:center;justify-items:center;max-width:100%}
  .ptw-clock{justify-self:center;align-items:center}
  .ptw-clock .ptw-top,.ptw-clock .ptw-loc{align-items:center;text-align:center}
  header .tagline{text-align:center}
}
/* Below ~620px the tiles and the links cannot share a line without running
   off the edge — and header{overflow:hidden} hides that rather than showing
   a scrollbar, so it has to be prevented, not detected. One column. */
@media(max-width:620px){
  .brandblock{flex-direction:column;gap:8px}
  .brandsub span{text-align:center}
  .headside{grid-template-columns:minmax(0,1fr);grid-template-areas:"clock" "lang" "links"}
  .headside .langsel{flex-wrap:wrap;justify-content:center}
}
/* nothing in the corner may exceed the band */
.ptw-clock{max-width:100%}
.ptw-clock .ptw-loc{max-width:100%}
.headside .wa-wrap{max-width:100%;flex-wrap:wrap;justify-content:center}

/* =========================================================================
   9 · CARD TEXT MUST FIT
   The name was `white-space:nowrap; text-overflow:ellipsis`, so half the
   Surahs read "Al-Mujadilah · The Pleading Wo…". Names are short; letting
   them wrap costs one line on a handful of cards and nothing on the rest.
   The card is a grid — this changes no area name, only how the cell flows.
   ====================================================================== */
.card .enname{
  white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.25;align-self:center;padding-bottom:1px;
  overflow-wrap:break-word}        /* last resort only; the cap below is the fix */
/* The name column is minmax(0,1fr) while .ar and .meta are `auto`, so a wide
   meta starves it — on Al-Ikhlas the badge left the name 56px and "Sincerity"
   spilled. Cap the TRACK, not the element: a max-width on .meta resolves
   against the track, which is itself sized to .meta's content, so it shrinks
   the box and leaves the track exactly as wide as before. Measured: the track
   stayed at 262px while .meta went to 115px and the name gained nothing.

   Scoped to the wide layout only. Below 1080px the app re-lays the card as a
   single column (index.html, @media max-width:1079px) and must keep it. */
@media(min-width:1080px){
  .card{grid-template-columns:46px 48px minmax(0,1fr) auto minmax(0,206px)}
}
.card .meta{flex-wrap:wrap;justify-content:flex-end}
.card .arname{max-width:22ch}
.card .theme{                     /* the teaser stays one line — the name is
                                     what had to be readable, and giving the
                                     teaser a second line adds ~22px to every
                                     one of 114 cards */
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.3}
.card{align-items:center;padding-top:11px;padding-bottom:11px}
.card .arname{align-self:center}
.card .meta{align-self:center}

/* =========================================================================
   10 · THE BRAND LOCKUP
   One piece of artwork replaces the roundel plus four stacked text lines.

   The file is fully opaque on an off-white ground — probed, 100% opaque, no
   alpha anywhere — so it cannot simply sit on the night sky. It is presented
   as what it already looks like: an engraved plaque, given a warm ground, a
   gold hairline and a soft drop so it reads as mounted on the wall rather
   than pasted onto it. If a cut-out version ever arrives, delete .brandplate
   and the padding and it will drop straight onto the sky.

   The stacked lines stay in the DOM. The <h1> is the page heading and must
   stay in the accessibility tree, so it is clipped, never `display:none`.
   ====================================================================== */

.brandblock{position:relative}

/* No plaque, no panel: the asset is cut out, so it sits straight on the sky
   with nothing behind it to match. A drop shadow gives it the same lift the
   plaque did without introducing a second ground. */
.brandmark{
  display:block;width:clamp(230px,32vw,520px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* With the lockup showing, the roundel and the four lines are for screen
   readers only — clipped rather than removed, so the <h1> still announces. */
.brandblock .brandlogo{display:none}
.brandblock .brandsub{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The artwork is the brand on EVERY device — a phone showing a different mark
   from the desktop is the kind of thing people notice. It just gets smaller,
   and the four live text lines stay clipped for screen readers throughout. */
@media(max-width:560px){
  .brandmark{width:min(92vw,420px)}
}

/* paper never carries it — the header does not print anyway, but be explicit */
@media print{.brandmark{display:none!important}}

/* --- The Surah sheet and the printed sheet use the APP TILE, not the wide
       lockup. The lockup's lettering is white on the sheet's own dark green
       ground: cut out it vanishes on white paper, and left uncut it lands as
       a dark rectangle on the page. The tile carries its own ground, so it
       reads on paper, on the light sheet and on the dark one alike. --- */
.ovlogo{width:76px;height:auto;top:13px;left:15px;border-radius:14px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.55)}
@media(max-width:560px){.ovlogo{width:54px;top:10px;left:10px}}
@media print{.ovlogo{width:58px!important;top:0!important;left:0!important;
  position:static!important;margin:0 0 4pt;box-shadow:none!important;
  border-radius:10px!important}}

/* =========================================================================
   11 · ONE SHELL, ONE EDGE
   Every band had its own width: portal and toolbar 1320, list head 1280, grid
   1320 with 20px of its own padding. The result was four different left edges
   down the page. One shell width and one gutter, applied to all of them, so
   the panels, the heading and the cards all start and end on the same line.
   ====================================================================== */
/* --gut-base is the gutter the design wants; --gut is what the shell uses and
   never drops below the notch inset (see §15). Breakpoints set --gut-base. */
:root{--shell:1320px; --gut-base:clamp(12px,1.7vw,24px);
      --gut:max(var(--gut-base),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}

/* Content bands: the gutter is padding, so their text and cards start at
   shell + gut. */
header .portal,
header .tagline,
.listhead,
.grid{
  max-width:var(--shell);
  margin-left:auto;margin-right:auto;
  padding-left:var(--gut);padding-right:var(--gut);
}
/* Panels: the gutter has to be OUTSIDE them, or their border sits a gutter's
   width left of everything else — which is exactly what it was doing. Shrink
   the box by two gutters instead and let their own padding stay internal. */
.ptw,
.toolbar{
  /* width AND max-width: max-width alone stops constraining once the viewport
     is narrower than the shell, and the panels then ran edge to edge while the
     cards kept their gutter. */
  width:calc(100% - 2 * var(--gut));
  max-width:calc(var(--shell) - 2 * var(--gut));
  margin-left:auto;margin-right:auto;
  padding-left:clamp(10px,1.4vw,18px);padding-right:clamp(10px,1.4vw,18px);
}
.listhead .count{margin-left:auto}   /* stays right-aligned when the head wraps */
.toolbar{padding-top:10px;padding-bottom:10px}
.ptw{padding-top:7px;padding-bottom:7px}

/* Keep the deck at two rows. searchrow and appbar are order:-1; this zero-
   height full-width item sorts with them but sits last in the DOM, so it ends
   their line and the filters and tools always start a fresh one. Without it a
   wider deck pulled the chips up and left the three tools centred alone. */
.toolbar::after{content:'';order:-1;flex:0 0 100%;height:0;margin:0}
/* the header's own side padding is now the gutter's job */
header{padding-left:0;padding-right:0}
@media(max-width:619px){
  .grid{max-width:var(--shell)}   /* the app drops to 900px here; keep the edge */
}

/* =========================================================================
   12 · THE CLOCK CORNER
   "Manchester, United Kingdom of Great Britain and Northern Ireland" is not a
   one-line string. Cap the box and let the line wrap to two, clipped after
   that rather than pushing the corner off the edge of the band.
   ====================================================================== */
.ptw-clock{max-width:min(300px,42vw)}
.ptw-clock .ptw-loc{
  max-width:100%;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.24}

/* =========================================================================
   13 · THE TWO LINK BUTTONS GET A WHITE DISC
   A white circle behind each, larger than the button, so the install tile and
   the WhatsApp mark both read as badges on the night sky rather than as
   shapes floating on it.
   ====================================================================== */
.headside .wa-link{
  box-shadow:0 0 0 5px #fff, 0 6px 16px -6px rgba(0,0,0,.55);
  border-color:#fff}
.headside .wa-link:hover{
  box-shadow:0 0 0 5px #fff, 0 10px 22px -8px rgba(0,0,0,.6)}
.headside .wa-link:focus-visible{outline-offset:6px}
.headside .wa-col{margin-top:2px}      /* room for the disc */
.headside .wa-wrap{gap:14px}

/* --- the Install button, called out ------------------------------------
   Orange ground with a WhatsApp-green ring, instead of the shared white disc.
   The two header buttons were previously identical white badges, so the one
   that installs the app read as a twin of the one that opens a chat group —
   and installing is the action a first-time visitor most wants and is least
   likely to find.

   The two now invert each other: orange on green here, green on white next
   door. Same two colours, opposite way round, so they read as a pair without
   being mistaken for each other.

   #25D366 is the WhatsApp green already used by .wa-link, and #128C7E its
   hover — taken from there rather than restated, so the pair cannot drift.
   Scoped to .inst-link: the WhatsApp mark keeps its white disc. */
.headside .wa-link.inst-link{
  background:#F0821E;
  border-color:#25D366;
  box-shadow:0 0 0 5px #25D366, 0 6px 16px -6px rgba(0,0,0,.55)}
.headside .wa-link.inst-link:hover{
  background:#FF9433;
  border-color:#128C7E;
  box-shadow:0 0 0 5px #128C7E, 0 10px 22px -8px rgba(0,0,0,.6)}
.headside .wa-link.inst-link:focus-visible{outline:2px solid #FFD9A8;outline-offset:6px}

/* =========================================================================
   14 · PHONES AND SMALL TABLETS
   The same brand and the same bands, packed down. Nothing is hidden that
   carries meaning; what goes is decoration that costs a row.
   ====================================================================== */
@media(max-width:620px){
  :root{--gut-base:12px}

  header{--nt-hdr-pt:10px;padding-top:10px;padding-bottom:10px}
  .brandmark{width:min(94vw,400px);filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
  header .tagline{
    font-size:11px;margin-top:6px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .headside{gap:6px}
  .ptw-clock{padding:5px 11px;max-width:100%}
  .ptw-clock .ptw-time{font-size:20px}
  .ptw-clock .ptw-loc{font-size:10px}
  .headside .langsel{padding:2px}
  .headside .langsel button{min-height:32px;padding:5px 13px;font-size:12.5px}
  .wa-point{display:none}          /* a nudging arrow is not worth a row here */
  .headside .wa-wrap{gap:16px}
  .headside .wa-link{width:38px;height:38px;box-shadow:0 0 0 4px #fff,0 4px 12px -4px rgba(0,0,0,.5)}
  .headside .wa-link svg{width:18px;height:18px}
  .headside .wa-cap{font-size:9.5px}

  .ptw{padding:5px 8px}
  .ptw-list{gap:3px}
  .ptw-list li{padding:3px 2px}
  .ptw-name{font-size:9.5px}
  .ptw-at{font-size:12px}
  .ptw-foot{padding-top:3px;gap:3px}
  .ptw-mnav{width:21px;height:21px;font-size:12px}

  .toolbar{padding:8px 10px;gap:6px}
  .search input{padding:9px 13px;font-size:15px}   /* 15px+: iOS zooms below 16 only on focus */
  .chip{min-height:34px;padding:6px 12px;font-size:12.5px}
  select.chip{min-height:34px!important}
  .apptog{min-height:30px;padding:4px 12px;font-size:12px}
  .appbar{padding:3px 8px;gap:6px}
  .appbar #themeb,.appbar #offlineb{min-height:30px!important;padding:4px 12px!important;font-size:12px!important}

  /* the three study tools in a 2 + 1 block instead of three stacked bars */
  .featrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .featrow .chip,.featrow .chip.goldc{
    min-height:34px;padding:6px 8px 6px 32px;font-size:11.5px;text-align:left}
  .featrow .chip::before{left:10px;width:15px;height:15px}
  .featrow .chip:last-child{grid-column:1 / -1}

  .listhead{margin-top:8px}
  .listhead h2{font-size:18px}
  .listhead h2::before{width:19px;height:19px;margin-right:7px;vertical-align:-4px}
  .grid{margin-top:8px}
}

/* very small phones: the prayer rail's six columns get tight */
@media(max-width:400px){
  .ptw-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .brandmark{width:96vw}
}

/* =========================================================================
   16 · TAJWEED ON A DARK PAGE, AND A THEME SWITCH ON EVERY PAGE
   ====================================================================== */

/* --- 16.1 the switch, floating beside each overlay's close button -------
   rahmah-skin.js creates it; it is only shown while an overlay is open,
   because the deck's own Dark button is reachable when none is. */
.themefab{display:none}
body:has(.overlay.open) .themefab{
  display:grid;place-items:center;position:fixed;z-index:9991;
  top:18px;right:70px;width:42px;height:42px;border-radius:50%;
  font:inherit;font-size:19px;line-height:1;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
body:has(.overlay.open) .themefab:hover{border-color:var(--em);color:var(--em)}
body:has(.overlay.open) .themefab:focus-visible{outline:2px solid var(--em);outline-offset:3px}
@media(max-width:560px){
  body:has(.overlay.open) .themefab{top:14px;right:58px;width:36px;height:36px;font-size:16px}
}
@media print{.themefab{display:none!important}}

/* --- 16.2 tajweed colours for a dark page ------------------------------
   The app's values (#D32F2F · #1B8A3A · #1565C0 · #9AA0A8) are Material 700s
   picked for white paper. On the dark emerald sheet the blue lands at about
   2.3:1 and the green at 2.6:1 — and the green is the background's own hue,
   so it effectively disappears. These are the same four rules, lifted for a
   dark ground; hue order (red / green / blue / grey) is unchanged, because
   the colour IS the meaning.

   Print is untouched: on paper the originals are correct, and CLAUDE.md
   requires tajweed colours to reach the printer exactly as the app sets them. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tj-m{color:#FF8A80}
  :root:not([data-theme="light"]) .tj-g{color:#5CE6A0}
  :root:not([data-theme="light"]) .tj-q,
  :root:not([data-theme="light"]) .tj-i{color:#8FCBFF}
  :root:not([data-theme="light"]) .tj-h{color:#8FA39B}
}
:root[data-theme="dark"] .tj-m{color:#FF8A80}
:root[data-theme="dark"] .tj-g{color:#5CE6A0}
:root[data-theme="dark"] .tj-q,
:root[data-theme="dark"] .tj-i{color:#8FCBFF}
:root[data-theme="dark"] .tj-h{color:#8FA39B}

/* the word-highlight palettes are pale pastels, built for a light sheet. On
   the dark one they still read — the word turns into a light chip — but the
   ink has to flip to dark or the glyph is light-on-light. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .atext .wq.wnow{color:#10211B}
  :root:not([data-theme="light"]) .atext .wq.wnow .tj-m{color:#B3261E}
  :root:not([data-theme="light"]) .atext .wq.wnow .tj-g{color:#11683A}
  :root:not([data-theme="light"]) .atext .wq.wnow .tj-q,
  :root:not([data-theme="light"]) .atext .wq.wnow .tj-i{color:#134C90}
  :root:not([data-theme="light"]) .atext .wq.wnow .tj-h{color:#5C6C67}
}
:root[data-theme="dark"] .atext .wq.wnow{color:#10211B}
:root[data-theme="dark"] .atext .wq.wnow .tj-m{color:#B3261E}
:root[data-theme="dark"] .atext .wq.wnow .tj-g{color:#11683A}
:root[data-theme="dark"] .atext .wq.wnow .tj-q,
:root[data-theme="dark"] .atext .wq.wnow .tj-i{color:#134C90}
:root[data-theme="dark"] .atext .wq.wnow .tj-h{color:#5C6C67}

/* =========================================================================
   6 · MOTION — the lanterns breathe, unless the reader asked them not to
   ====================================================================== */
@keyframes nt-lamp{0%,100%{opacity:.86}50%{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  header::after{animation:nt-lamp 5.5s ease-in-out infinite}
}

/* ---------------------------------------------------------------------------
   PRINT — hand the page back to the app's own print layout.

   The app defines a careful printed sheet (A4, ½in margins, one Section per
   sheet with a foot rule on each, black rules, no
   chrome) in its @media print block. This skin loads AFTER that block, and
   several of its rules are more specific than the app's print rules — e.g.
   `.sheet .sec>h2` (0,2,1) outranks the app's `.sec>h2{color:#000}` (0,1,1).
   Left alone, the skin's colours win on paper and the sheet prints tinted.

   So everything decorative is reverted here with !important, and the app's
   black-ink intent is restated for each selector this skin outranks.

   The critical one is backdrop-filter. An element that has it becomes a
   containing block and is rasterised as a single composited layer, which stops
   the printed content fragmenting across pages — the page-alignment failure.
   It must be off before anything reaches paper.
   ------------------------------------------------------------------------- */
@media print{
  *,*::before,*::after{
    box-shadow:none!important;
    text-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transition:none!important;
    animation:none!important;
    filter:none!important;
  }
  body{
    background:#fff!important;background-image:none!important;
    background-attachment:scroll!important;
    color:#000!important}
  .overlay{background:none!important}

  /* Dark mode must never reach paper. The enumerated list below was written
     against the light palette and misses anything whose ground comes from
     --surface — `table.stack tr` is the worst of them: the Arabic column
     printed as a black band, and .war is forced to black ink, so the words
     came out invisible. Whiten every printed ground first, then let the
     specific rules that follow re-assert the black-ink intent. Nothing in the
     print design carries a meaningful fill; tajweed is colour, not background,
     and is left alone. */
  .overlay.open,.overlay.open *,.overlay.open *::before,.overlay.open *::after{
    background-color:#fff!important;background-image:none!important}

  /* flat white panels — no gradients, no pigment washes */
  .sheet,.frame,.pbox,.reading,.rev1,.refl,.fcard,.pill,.wbw,.wchip,
  .cmpcommon,.cmpchip,.cmpslot,.tlcard,.tlm,.card,.ayah.playing,
  .tlphase,.tlphase.mk,.tlphase.md,.tls span,.tlev.madinah .tls span{
    background:#fff!important;background-image:none!important}
  .sheet{border:none!important;border-radius:0!important}

  /* restore black ink wherever this skin's colour rules outrank the app's */
  .sheet .sec>h2,.analysis .sec>h2,.sec>h2{color:#000!important;border-color:#000!important}
  .sheet .mainhead,.mainhead,.d-en,.d-ar,.d-si,.tlt,.tld,
  .card .enname,.sheet .anum,.anum,.translbl,.atrans,.war,.wmn{color:#000!important}
  .fcard,.fcard .lbl,.sheet .fcard .lbl{color:#000!important;border-color:#000!important}
  .rule{border-top-color:#000!important}
  .rule::after{color:#000!important;background:#fff!important}
  .frame,.rev1,.refl,.pill,.wchip,.tlcard,.cmpcommon{border-color:#000!important}
  th,td,table.stack tr{border-color:#000!important}
  th{background:#fff!important;color:#000!important}

  /* metadata chips: outline instead of a gradient fill, so they stay legible
     on a mono printer and cost no ink */
  .tag,.tag.makki,.tag.madani,.tlyear,.tlev.madinah .tlyear,.ebadge,.pfbadge{
    background:none!important;background-image:none!important;
    color:#000!important;border:1px solid #000!important}

  /* tajweed colours are meaningful — leave them exactly as the app sets them */

  .rahmah-back{display:none!important}
  /* the Rawdah Night ornaments are screen furniture — never ink */
  body::before,header::before,header::after{display:none!important}
  .card::after,.listhead h2::before,.featrow .chip::before{display:none!important}
}

/* =========================================================================
   15 · THE iOS SAFE AREA
   Installed to an iPhone home screen the app runs standalone, and
   apple-mobile-web-app-status-bar-style="black-translucent" means the page
   starts at the very top of the display — the clock, the notch and the home
   indicator sit ON the page, not above it. Without this the .brandblock
   printed under the status bar.

   The band keeps its full-bleed night sky: the inset is paid as padding, so
   the gradient still runs edge to edge and up behind the status bar, where
   its white lettering is exactly what black-translucent assumes. Both themes
   are safe here — §2's band is night in light mode too.

   In a browser tab, and on every non-Apple device, env() is 0 and each rule
   below collapses to the value it already had.

   This must stay the LAST screen rule in the file: it reads --nt-hdr-pt,
   which the breakpoints set, and adds to it.
   ====================================================================== */
@media screen{
  /* the status bar / notch */
  header{padding-top:calc(var(--nt-hdr-pt,30px) + env(safe-area-inset-top,0px))}

  /* the home indicator — the footer is the last thing in the flow, so it is
     what the bar would otherwise cross. Reads --nt-foot-pb for the same reason
     the header reads --nt-hdr-pt: hard-coding the padding here silently undid
     a change made to the footer itself. */
  footer{padding-bottom:calc(var(--nt-foot-pb,30px) + env(safe-area-inset-bottom,0px))}

  /* Overlays are fixed to the viewport, so they get no help from the flow:
     each one pays all four insets itself, on top of its own 24px/12px. */
  .overlay{
    padding-top:calc(24px + env(safe-area-inset-top,0px));
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
    padding-left:calc(12px + env(safe-area-inset-left,0px));
    padding-right:calc(12px + env(safe-area-inset-right,0px));
  }
}