/* The shared header (links + ☰ settings) and footer on every page: /, /key, /faq, /support (tools/sync-chrome.mjs puts the
   markup in each page). Its own colors, so it looks the same whatever page it sits on, and resets of the page rules it could
   pick up (support.html styles every button and footer, for example). */
.cn,.cf{--c-bg:#FFF9EE;--c-ink:#1F4E55;--c-soft:#3F6368;--c-line:#1F4E5526;--c-on:#FFF9EE;--c-gold:#C4933A;--c-gold-ink:#8A6420;--c-gold-a:#C4933A2E;--c-mint:#CFE7E0;--c-mint-ink:#123A3F;
  --c-deep:#1F4E55;--c-deep-ink:#FFF9EE;--c-deep-soft:#CFE0DFCC;--c-deep-line:#FFF9EE26;--c-deep-card:#FFF9EE12;
  font-family:"IBM Plex Sans Arabic",system-ui,"Noto Sans Arabic",sans-serif;-webkit-tap-highlight-color:transparent}
:root[data-theme=dark] .cn,:root[data-theme=dark] .cf{--c-bg:#15272A;--c-ink:#DDEBE7;--c-soft:#A9C3BF;--c-line:#DDEBE726;--c-on:#0F1D1F;--c-gold:#D4A54C;--c-gold-ink:#E3BC6C;--c-gold-a:#D4A54C33;--c-mint:#DCEFE8;--c-mint-ink:#12272A;
  --c-deep:#091517;--c-deep-card:#FFF9EE0D}
.cn *,.cf *{box-sizing:border-box}
html{scroll-padding-top:64px}

/* Header. Phone: the four places as a row of pills beside ☰ (the row scrolls sideways if they don't fit),
   and the whole header slides away while scrolling down and comes back on the first scroll up (chrome.js).
   From 700px wide: one row, the four places and ☰, as before. Sticks to the top while the page scrolls. */
.cn{position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);background:var(--c-bg);color:var(--c-ink);border-bottom:1px solid var(--c-line);transition:transform .25s ease}
.cn.cn-away{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.cn{transition:none}}
.cn-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;max-width:980px;margin:0 auto;padding:6px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
.cn-brand{display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;color:var(--c-ink);font:800 17px/1.2 "Alexandria","IBM Plex Sans Arabic",sans-serif;text-decoration:none}
.cn-brand img{flex:none;width:22px;height:28px}
.cn-tabs{grid-column:1;grid-row:1;display:flex;gap:3px;margin:0;margin-inline-end:-4px;padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cn-tabs::-webkit-scrollbar{display:none}
.cn-link{flex:none;display:flex;align-items:center;justify-content:center;min-height:38px;padding:5px 8px;border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);font:600 13px/1.2 inherit;font-family:inherit;text-align:center;text-decoration:none;white-space:nowrap}
@media (hover:hover){.cn-link:hover{background:var(--c-gold-a)}}
.cn-tabs{position:relative}
.cn-link{position:relative;z-index:1;transition:color .3s,border-color .3s}

.cn-logo{flex:none;width:14px;height:14px;margin-inline-end:3px;fill:currentColor}
.cn-android{fill:#3DDC84}
.cn-long{display:none}
/* «الرئيسية» is the house icon alone and «أسئلة شائعة» reads «الأسئلة», on every screen (the word stays for screen readers), so the other three have room. */
.cn-home-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cn-link[data-nav=home] .cn-logo{width:17px;height:17px;margin:0}
/* The open page's tab: a filled pill drawn behind its label (.cn-pill), its own piece in the page-to-page view transition,
   so the browser glides it from the old tab to the new one while the page changes. */
.cn-link[aria-current=page]{border-color:transparent;color:var(--c-mint-ink)}
.cn-pill{display:none}
.cn-link[aria-current=page]>.cn-pill{display:block;position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--c-mint);view-transition-name:cn-pill}
.cn-in{display:flex;align-items:center}
.cn-link[data-nav=home]>.cn-in{view-transition-name:cn-t-home}
.cn-link[data-nav=key]>.cn-in{view-transition-name:cn-t-key}
.cn-link[data-nav=tuktuk]>.cn-in{view-transition-name:cn-t-tuktuk}
.cn-link[data-nav=faq]>.cn-in{view-transition-name:cn-t-faq}
.cn-link:focus-visible,.cn-brand:focus-visible,.cn-menu:focus-visible,.cn-seg>*:focus-visible,.cf a:focus-visible,.cf button:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}
.cn .cn-menu{flex:none;display:grid;place-items:center;width:40px;min-width:0;height:40px;min-height:0;margin:0;padding:0;border:1px solid var(--c-line);border-radius:12px;background:none;color:var(--c-ink);cursor:pointer;box-shadow:none}
.cn-bar>.cn-menu{grid-column:2;grid-row:1}
.cn-menu svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.cn-menu[aria-expanded=true]{background:var(--c-ink);color:var(--c-on);border-color:var(--c-ink)}
@media (min-width:700px){
  .cn-bar{position:relative;display:flex;gap:8px;padding-block:8px}
  .cn-brand{display:none}
  .cn-tabs{display:contents}
  .cn-link{padding:6px 16px;border:0;border-radius:12px;font-size:15px}
  .cn-link[aria-current=page]{color:var(--c-on)}
  .cn-link[aria-current=page]>.cn-pill{background:var(--c-ink)}
  .cn-menu{margin-inline-start:auto!important}
}

/* ☰ panel: theme and language. Opens under the header, on the menu's side. */
.cn-panel{position:absolute;top:100%;inset-inline-end:max(8px,env(safe-area-inset-left));width:min(320px,calc(100vw - 16px));margin-top:6px;padding:12px 14px 14px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-bg);color:var(--c-ink);box-shadow:0 14px 34px #00000033}
@media (min-width:1000px){.cn-panel{inset-inline-end:calc(50vw - 482px)}}
.cn-panel[hidden]{display:none}
.cn .cn-h{margin:0 0 6px;font:600 13px/1.4 inherit;font-family:inherit;color:var(--c-soft)}
.cn-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 12px}
.cn .cn-seg>button,.cn .cn-seg>a{display:flex;align-items:center;justify-content:center;width:auto;min-height:42px;margin:0;padding:6px 4px;border:1px solid var(--c-line);border-radius:12px;background:none;color:var(--c-ink);font:600 14px/1.2 inherit;font-family:inherit;text-decoration:none;cursor:pointer;box-shadow:none}
.cn .cn-seg>[aria-pressed=true],.cn .cn-seg>[aria-current]{background:var(--c-ink);color:var(--c-on);border-color:var(--c-ink)}
.cn-langs>[lang=ar],.cn-langs>[lang=ur]{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.cn-extra:empty{display:none}
.cn .cn-extra>button{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;margin:0;padding:6px 10px;border:1px dashed var(--c-gold);border-radius:12px;background:none;color:var(--c-ink);font:600 14px/1.2 inherit;font-family:inherit;cursor:pointer;box-shadow:none}
.cn .cn-extra>button:before{content:"؟";margin-inline-end:8px;font-weight:800;color:var(--c-gold-ink)}

/* Footer: a deep band at the end of every page, the same on all of them. */
.cf{position:relative;z-index:1;margin:40px 0 0;padding:36px max(16px,env(safe-area-inset-right)) max(96px,calc(env(safe-area-inset-bottom) + 80px)) max(16px,env(safe-area-inset-left));background:var(--c-deep);color:var(--c-deep-ink);font-size:15px;line-height:1.7;text-align:start}
.cf-in{max-width:980px;margin:0 auto}
.cf a{color:inherit}
.cf h2{margin:0;color:var(--c-deep-ink)}
.cf p{margin:0}
.cf-top{display:grid;gap:26px}
.cf-owner{display:grid;gap:12px}
.cf-owner-head{display:flex;align-items:center;gap:14px;text-decoration:none}
.cf-owner-head img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--c-gold)}
.cf-owner-head h2{font:800 19px/1.35 "Alexandria","IBM Plex Sans Arabic",sans-serif}
.cf-arrow{margin-inline-start:6px;color:var(--c-gold)}
.cf-owner-head p{font-size:14px;color:var(--c-deep-soft)}
.cf-more{font-size:13px;font-weight:600;color:var(--c-gold);text-decoration:underline;text-underline-offset:3px}
.cf-accs{display:grid;gap:10px}
.cf-acc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--c-deep-line);border-radius:16px;background:var(--c-deep-card)}
.cf-acc-logo{flex:none;width:48px;height:48px;border-radius:12px;object-fit:contain}
.cf-acc-text{min-width:0;flex:1}
.cf-acc h2{display:inline;margin-inline-end:8px;font:800 17px/1.4 "Alexandria","IBM Plex Sans Arabic",sans-serif}
.cf-acc-text>p{display:inline;font-size:13px;color:var(--c-deep-soft)}
.cf-acc-links{display:flex;gap:4px;margin-top:4px}
.cf-acc-links a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px}
.cf-acc-links a:hover{background:var(--c-deep-line)}
.cf-acc-links img,.cf-official img{filter:brightness(0) invert(.92)}
.cf-acc-links span{display:none}
.cf-note{font-size:14px;color:var(--c-deep-soft)}
.cf-quick h2{margin:0 0 10px;font:800 19px/1.35 "Alexandria","IBM Plex Sans Arabic",sans-serif}
.cf-quick ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cf-quick li{margin:0}
.cf .cf-quick li>a,.cf .cf-quick li>button{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:0;padding:8px 12px;border:1px solid var(--c-deep-line);border-radius:12px;background:var(--c-deep-card);color:var(--c-deep-ink);font:600 14.5px/1.35 inherit;font-family:inherit;text-align:start;text-decoration:none;cursor:pointer;box-shadow:none}
.cf .cf-quick li>a:hover,.cf .cf-quick li>button:hover{border-color:var(--c-gold)}
.cf .cf-quick li>button:disabled{opacity:.6;cursor:wait}
.cf-quick li[hidden]{display:none}
/* The same box as the «شاركني الأجر» box in the code card: gold border and tint, the hadith line, the button, then the count and the note. */
.cf-support{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 14px 12px;border:1px solid color-mix(in srgb,var(--c-gold) 45%,transparent);border-radius:16px;background:color-mix(in srgb,var(--c-gold) 10%,transparent);text-align:center;color:var(--c-deep-ink)}
.cf-support .cf-quote{font-size:14.5px;font-weight:700;line-height:1.6}
.cf-support .cf-cta{margin-top:2px}
.cf-support .cf-meta{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;opacity:.85}
.cf-support .supporters-count{display:block;font-size:15px;font-weight:700;line-height:1.6}
.cf-support .supporters-count[hidden]{display:none}
.cf-support .sc-n{display:inline-block;min-width:1.8em;padding:0 10px;border-radius:999px;background:var(--c-gold);color:#13262A;font-weight:800;text-align:center}
.cf-support .cf-note{display:inline;margin:0;font-size:12px;opacity:1}
.cf .cf-cta{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-height:44px;margin:0;padding:8px 22px;border:1.5px solid var(--c-gold);border-radius:999px;background:var(--c-gold);color:#1F2A2C;font:800 15px/1.4 "Alexandria","IBM Plex Sans Arabic",sans-serif;cursor:pointer;box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold) 40%,transparent);transition:transform .18s}
/* The same button as «إشترك شاركني الأجر» inside the code card: a white heart, a light sheen and three slow breaths once it comes into view. */
.cf .cf-cta:before{content:"🤍";font-size:14px}.cf .cf-cta:active{transform:scale(.97)}
.cf .cf-cta:after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:40%;background:linear-gradient(100deg,transparent,#fffbefcc,transparent);transform:skewX(-18deg);z-index:-1;pointer-events:none}
@media (hover:hover){.cf .cf-cta:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion:no-preference){.cf .cf-cta.in-view{animation:cf-breathe 2.4s cubic-bezier(.45,0,.55,1) 6 alternate}.cf .cf-cta.in-view:after{animation:cf-sheen 2.4s cubic-bezier(.45,0,.55,1) 6 alternate}}
@keyframes cf-breathe{from{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--c-gold) 0%,transparent),0 2px 6px color-mix(in srgb,var(--c-gold) 13%,transparent)}to{transform:scale(1.045);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-gold) 15%,transparent),0 0 22px color-mix(in srgb,var(--c-gold) 35%,transparent)}}
@keyframes cf-sheen{from{left:-30%}to{left:90%}}
.cf-bar{display:grid;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--c-deep-line)}
.cf-official{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cf-official p{font-size:13px;color:var(--c-deep-soft)}
.cf-official nav{display:flex;gap:4px}
.cf-official a{display:grid;place-items:center;width:40px;height:40px;border-radius:10px}
.cf-legal{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--c-deep-soft)}
@media (min-width:760px){
  .cf-top{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:40px}
  .cf-accs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-support{grid-column:1/-1}
  .cf-bar{grid-template-columns:auto 1fr;align-items:center}
  .cf-legal{justify-content:flex-end}
}
@media print{.cn,.cf{display:none}}

/* Moving between pages, in browsers with cross-page view transitions (the others open the page as before): the header
   stays put, the pill glides to the new tab, the labels cross-fade their colors, and the page under it cross-fades. */
@view-transition{navigation:auto}
.cn{view-transition-name:cn-header}
::view-transition-group(cn-header){animation:none}
::view-transition-group(cn-pill){animation-duration:.34s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}