/* A theme changes the backgrounds only. The gold accent and every text colour are
   deliberately NOT overridden below, so the times, headings and rules stay the same
   gold on all the dark palettes rather than taking on the theme's hue.
   Ivory is the exception, and has to be: it is a light palette, and text written
   for a night sky is invisible on cream. It restates the text colours, and only
   for that reason. */
:root,
:root[data-theme="blue"]{
  --night-top:#070B1E; --night-mid:#0E1430; --night-low:#161436;
  --dawn-glow:#3a2c4a;
  --shade-rgb:14,20,48; --scrim-rgb:4,6,18;

  /* shared across all themes */
  --ink:#ECEAF6; --muted:#8F93B8; --faint:#5c608a;
  --gold:#F2D08A; --gold-deep:#C7A25B; --accent-rgb:242,208,138;
  --dusk:#C98A4B; --dawn:#D98BA0; --moon:#C7CCE8; --warn:#E2725B; --sun-yellow:#FFC94D;
  --hair:rgba(199,204,232,.14);
  /* The label on a gold-filled button. A variable because Ivory's gold is dark,
     and a dark label on it would be unreadable. */
  --on-gold:#1a1408;
}
:root[data-theme="green"]{
  --night-top:#041C22; --night-mid:#0D272C; --night-low:#123238;
  --dawn-glow:#1d4a44;
  --shade-rgb:13,39,44; --scrim-rgb:2,14,18;
}
:root[data-theme="maroon"]{
  --night-top:#1A0F1D; --night-mid:#311E2F; --night-low:#3D2739;
  --dawn-glow:#4a2c3f;
  --shade-rgb:49,30,47; --scrim-rgb:14,7,16;
}
:root[data-theme="bronze"]{
  /* --night-low is a shade darker than the other themes' third tone: bronze is the
     warmest/lightest palette, and at #382F26 the muted text fell to 4.39:1. */
  --night-top:#1C1A17; --night-mid:#2D2720; --night-low:#332B22;
  --dawn-glow:#4a3a26;
  --shade-rgb:45,39,32; --scrim-rgb:14,12,9;
}
:root[data-theme="black"]{
  --night-top:#0A0C10; --night-mid:#171A20; --night-low:#1E222B;
  --dawn-glow:#2b3040;
  --shade-rgb:23,26,32; --scrim-rgb:3,4,6;
}
/* Ivory is the one light palette, so it is also the one that cannot leave the
   text colours alone: --ink is near-white, and near-white on cream cannot be
   read at all. Every colour below was chosen against the three Ivory
   backgrounds and checked — body text 12.66:1 at worst, the muted tone 5.69:1,
   the small faint tone 4.51:1, and the gold 4.87:1, so it carries ordinary text
   rather than only large figures. */
:root[data-theme="ivory"]{
  --night-top:#FFF9EE; --night-mid:#F4E8CC; --night-low:#EFE0BE;
  --dawn-glow:#e6cfa0;
  --shade-rgb:244,232,204; --scrim-rgb:46,38,22;

  --ink:#241E12; --muted:#5E5443; --faint:#6E6350;
  --gold:#7A5A12; --gold-deep:#5E4510; --accent-rgb:122,90,18;
  --dusk:#8F4A12; --dawn:#95324F; --moon:#4C5468; --warn:#992A12; --sun-yellow:#8A6000;
  --hair:rgba(36,30,18,.20);
  --on-gold:#FFF9EE;
}
/* White specks on cream are not stars, they are nothing at all. */
:root[data-theme="ivory"] .stars{display:none}
html{transition:background-color .45s ease}
*{box-sizing:border-box;margin:0;padding:0}
/* Anchors in the top nav glide rather than jump, so it stays clear that you have
   moved down the same page rather than landed somewhere new. */
html{height:100%;scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--ink);
  background:var(--night-top);
  min-height:100%;
  overflow-x:hidden;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:0;
  animation:tw 6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.05}50%{opacity:.55}}

.band{width:100%;position:relative}
.band-sky{background:linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 100%)}
.band-floor{background:var(--night-low);overflow:hidden}
.band-floor::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 100%, var(--dawn-glow) 0%, transparent 55%)}
.col{position:relative;z-index:1;width:100%;max-width:680px;margin:0 auto;text-align:center;
  padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
.band-sky .col{padding-top:clamp(20px,5vw,56px);padding-bottom:clamp(2.4rem,6vw,3.4rem)}
.band-floor .col{padding-bottom:clamp(16px,3vw,28px)}

.date{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:.9rem}
h1{font-family:"Fraunces",serif;font-weight:340;font-size:clamp(2.1rem,7vw,3.2rem);line-height:1;letter-spacing:-.01em;margin-bottom:.35rem}
.eyebrow{color:var(--muted);font-size:.95rem;font-weight:400;margin-bottom:clamp(1.8rem,5vw,2.8rem)}

.arc-stage{position:relative;width:100%;max-width:560px;margin:1.6rem auto 0}
.arc-visual{width:70%;max-width:340px;margin:0 auto}
/* Scoped to the arc rather than every svg on the page. As a bare `svg` rule it
   was the default size for any icon whose own rule failed to reach it, and an
   icon that falls back to width:100% of a centred column is 300px across. */
.arc-visual svg{display:block;width:100%;height:auto;overflow:visible}
/* Icons are sized by their own rules; this only stops an unsized one filling
   the column, and keeps them on the text baseline. */
svg{display:inline-block;max-width:100%;vertical-align:middle}
.arc-track{fill:none;stroke:var(--hair);stroke-width:1.5}
.arc-line{fill:none;stroke:url(#duskDawn);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.8s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.endpoint{opacity:0;animation:fade .7s ease .9s forwards}
.endpoint.right{animation-delay:1.1s}
.end-dot{fill:var(--moon)}
.end-dot.dusk{fill:var(--dusk)}
.end-dot.dawn{fill:var(--dawn)}
.now-moon{opacity:0;transition:opacity .6s ease}
.midpoint-mark{opacity:0;animation:fade .7s ease 1.7s forwards}
.moon-glow{fill:var(--gold);filter:blur(9px);opacity:.5}
.moon{fill:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}
.foot{display:flex;justify-content:space-between;align-items:flex-start;margin-top:1.2rem;gap:1rem}
.foot .cell{flex:1;opacity:0;animation:fade .7s ease 1.3s forwards}
.foot .cell.r{animation-delay:1.5s}
.cap{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem}
.tval{font-family:"Fraunces",serif;font-size:clamp(1.25rem,4.5vw,1.6rem);font-weight:500}
.foot .l .tval{color:var(--dusk)}
.foot .r .tval{color:var(--dawn)}
.duration{margin-top:1rem;font-size:.8rem;color:var(--muted);
  opacity:0;animation:fade .7s ease 1.6s forwards}
.duration b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.hero{opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) 1.7s forwards}
.hero .cap{color:var(--gold-deep);letter-spacing:.28em;margin-bottom:.5rem}
.hero .big{font-family:"Fraunces",serif;font-weight:340;font-size:clamp(3.6rem,15vw,6rem);
  line-height:.95;color:var(--gold);letter-spacing:-.02em;text-shadow:0 0 34px rgba(var(--accent-rgb),.28)}

.countdown{margin-top:.7rem;font-size:.92rem;color:var(--muted);line-height:1.6;
  opacity:0;animation:fade 1s ease 1.8s forwards}
.countdown b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.countdown.ended{font-weight:700;color:var(--ink)}
.countdown.ended b{color:var(--dawn)}
.countdown.urgent b{color:var(--warn);animation:urgentPulse 1.1s ease-in-out infinite}
@keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* loading + error */
.loading .tval,.loading .big,.loading .s-time{color:var(--faint);animation:pulse 1.3s ease-in-out infinite}
.loading .countdown{opacity:.35}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.75}}
.note{margin-top:clamp(2rem,6vw,3rem);color:var(--muted);font-size:.82rem;line-height:1.6;
  max-width:460px;margin-left:auto;margin-right:auto;opacity:0;animation:fade 1s ease 2s forwards}
.note b{color:var(--ink);font-weight:500}
.err-box{display:none;margin-top:1.4rem;color:var(--dawn);font-size:.86rem;line-height:1.6;
  max-width:460px;margin-left:auto;margin-right:auto}
.err-box.show{display:block}
.retry{margin-top:.9rem;background:var(--gold);color:var(--on-gold);border:none;border-radius:10px;
  padding:.6rem 1.3rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer}
.retry:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Salah times */
.salah{margin-top:clamp(2.4rem,6vw,3.2rem);opacity:0;animation:fade 1s ease 1.9s forwards}
.salah-title{font-family:"Fraunces",serif;font-weight:500;font-size:1.05rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:1rem}
.salah-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
@media(min-width:560px){.salah-grid{grid-template-columns:repeat(6,1fr)}}
.s-item{border:1px solid var(--hair);border-radius:12px;padding:.75rem .5rem;background:rgba(255,255,255,.02);
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.s-item .s-label{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem}
.s-item .s-time{font-family:"Fraunces",serif;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.s-item.small .s-time{font-size:.82rem;color:var(--muted)}
.s-item.small .s-label{font-size:.58rem}
.s-item.current{border-color:var(--gold);background:rgba(var(--accent-rgb),.08);box-shadow:0 0 22px rgba(var(--accent-rgb),.14)}
.s-item.current .s-time{color:var(--gold)}
.s-item.current .s-label{color:var(--gold-deep)}

.hadith{margin-top:clamp(2.2rem,6vw,3rem);padding:1rem 1.3rem;border-left:2px solid var(--gold-deep);
  text-align:left;color:var(--muted);font-size:.82rem;line-height:1.7;
  max-width:520px;margin-left:auto;margin-right:auto;opacity:0;animation:fade 1s ease 2.1s forwards}
.hadith-intro{display:block;font-style:normal;font-weight:700;color:var(--ink);margin-bottom:1rem}
.hadith-quote{display:block;font-style:italic}
.hadith-highlight{text-decoration:underline;text-decoration-color:var(--gold-deep);
  text-underline-offset:3px;color:var(--ink)}
.hadith .cite{display:block;margin-top:.7rem;font-style:normal;font-size:.7rem;letter-spacing:.05em;
  color:var(--faint);text-align:right}

.s-label-row{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:.35rem}
.s-label-row .s-label{margin-bottom:0}
.s-icon{width:14px;height:14px;flex-shrink:0}
.icon-sun{color:var(--sun-yellow)}
.icon-moon{color:var(--moon)}

.source{margin-top:1.6rem;font-size:.68rem;letter-spacing:.06em;color:var(--faint);
  opacity:0;animation:fade 1s ease 2.3s forwards}
.source + .source{margin-top:.5rem}
.source a{color:var(--faint)}
.source a:hover{color:var(--gold-deep)}

/* last third of the night — single card */
.last-third{display:flex;justify-content:center;margin-bottom:.4rem}
.last-third-item{min-width:170px}
.hadith-thirds{animation-delay:2.15s;margin-top:1rem}
.lt-title{margin-bottom:1.4rem}

/* top nav */
.topnav{display:flex;justify-content:center;gap:clamp(1.2rem,5vw,2.2rem);
  padding:.9rem 1rem;position:relative;z-index:2}
.topnav a{color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:.3rem .1rem;
  border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease}
.topnav a:hover{color:var(--gold);border-bottom-color:var(--gold-deep)}
.topnav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* the bands are full-bleed, so an anchored section needs a little breathing room */
#prayer-times{scroll-margin-top:1.4rem}
.topnav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold-deep)}

/* qibla finder */
.qibla-note{color:var(--muted);font-size:.85rem;line-height:1.6;margin-bottom:1.1rem}
.qibla-btn{background:var(--gold);color:var(--on-gold);border:none;border-radius:10px;
  padding:.6rem 1.3rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer}
.qibla-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qibla-btn:disabled{opacity:.6;cursor:default}
.qibla-map-wrap{position:relative;width:100%;aspect-ratio:1/0.85;border-radius:12px;
  overflow:hidden;border:1px solid var(--hair);background:var(--night-low)}
.qibla-map{width:100%;height:100%}
.qibla-result{margin-top:1.6rem}
.qibla-error{margin-top:.9rem;color:var(--warn);font-size:.82rem;line-height:1.6}

/* ---- qibla page ---- */
/* The page has no arc and no countdown, so nothing above it is animating in;
   the sections appear straight away rather than on the homepage's stagger. */
.qibla-page .salah{animation-delay:0s}
.qibla-page .hadith{animation-delay:.15s}
.qibla-page .source{animation-delay:.3s}
.qibla-page h1{margin-bottom:.5rem}

/* Prose blocks: left-aligned inside the otherwise centred column, because these
   are paragraphs to be read rather than labels to be glanced at. */
.prose{max-width:520px;margin:0 auto;text-align:left;color:var(--muted);
  font-size:.85rem;line-height:1.75}
.prose p{margin-bottom:.9rem}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--ink);font-weight:600}

.steps{max-width:520px;margin:0 auto;text-align:left;counter-reset:step}
.steps li{list-style:none;position:relative;padding-left:2.1rem;margin-bottom:1rem;
  color:var(--muted);font-size:.85rem;line-height:1.7}
.steps li:last-child{margin-bottom:0}
.steps li::before{counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-1px;width:1.5rem;height:1.5rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-deep);border-radius:50%;
  color:var(--gold);font-size:.7rem;font-weight:600;font-family:"Fraunces",serif}
.steps li b{color:var(--ink);font-weight:600}

/* A quiet route back, mirroring the theme toggle at the foot of the homepage. */
.back-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.6rem;
  color:var(--muted);text-decoration:none;font-size:.72rem;letter-spacing:.06em;
  border-bottom:1px solid var(--hair);padding:.3rem .2rem;
  transition:color .25s ease,border-color .25s ease}
.back-link:hover{color:var(--gold);border-bottom-color:var(--gold-deep)}
.back-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.back-link svg{width:12px;height:12px;flex-shrink:0}

/* evidence button */
.evidence-wrap{max-width:520px;margin:1rem auto 0;
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem;
  opacity:0;animation:fade 1s ease 2.2s forwards}
.evidence-btn{display:inline-flex;align-items:center;gap:.45rem;
  background:transparent;color:var(--muted);
  border:1px solid var(--hair);border-radius:10px;
  padding:.5rem 1rem;font:inherit;font-size:.78rem;font-weight:500;
  letter-spacing:.02em;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.evidence-btn:hover{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--faint)}
.evidence-btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.evidence-btn svg{width:13px;height:13px;flex-shrink:0}

/* evidence modal */
.modal-overlay{position:fixed;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(var(--scrim-rgb),.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex;animation:fade .3s ease forwards}
.modal{position:relative;width:100%;max-width:560px;max-height:85vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--night-mid),var(--night-low));
  border:1px solid var(--hair);border-radius:16px;
  padding:clamp(1.5rem,4vw,2.3rem);text-align:left;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.modal h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.3rem;
  color:var(--gold);margin-bottom:.35rem;letter-spacing:-.01em;padding-right:2rem}
.modal .modal-sub{color:var(--muted);font-size:.8rem;line-height:1.6;margin-bottom:1.4rem}
.modal .ev{margin-bottom:1.25rem;padding-left:1rem;border-left:2px solid var(--gold-deep)}
.modal .ev:last-of-type{margin-bottom:0}
.modal .ev-h{display:block;font-weight:600;color:var(--ink);font-size:.82rem;
  letter-spacing:.02em;margin-bottom:.45rem}
.modal .ev p{color:var(--muted);font-size:.82rem;line-height:1.7;margin-bottom:.4rem}
.modal .ev p:last-of-type{margin-bottom:0}
.modal .ev .q{font-style:italic;color:var(--ink)}
.modal .ev .src{display:block;margin-top:.5rem;font-size:.7rem;letter-spacing:.05em;color:var(--faint)}
.modal .ev-scholars{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--hair)}
.modal .ev-scholars-title{display:block;font-family:"Fraunces",serif;font-weight:500;
  font-size:1.05rem;color:var(--gold);margin-bottom:1.05rem;letter-spacing:-.01em}
.audio-player{display:none;align-items:center;gap:.6rem;margin-top:.9rem;padding:.5rem .65rem;
  background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:10px}
.audio-player.ready{display:flex;flex-direction:column;align-items:stretch;gap:.5rem}
.ap-lang{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500}
.ap-row{display:flex;align-items:center;gap:.6rem}
.ap-btn{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--accent-rgb),.1);border:1px solid var(--gold-deep);border-radius:50%;
  color:var(--gold);cursor:pointer;transition:background .2s ease}
.ap-btn:hover{background:rgba(var(--accent-rgb),.2)}
.ap-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ap-btn svg{width:15px;height:15px;fill:currentColor}
.ap-ic-pause{display:none}
.audio-player.playing .ap-ic-play{display:none}
.audio-player.playing .ap-ic-pause{display:block}
.ap-seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--hair);cursor:pointer}
.ap-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;
  border-radius:50%;background:var(--gold);border:none;cursor:pointer}
.ap-seek::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:none;cursor:pointer}
.ap-seek:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ap-time{flex-shrink:0;font-size:.72rem;color:var(--faint);font-variant-numeric:tabular-nums;
  min-width:64px;text-align:right}
.modal-close{position:absolute;top:.85rem;right:.85rem;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:8px;
  color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;
  transition:color .2s ease,background .2s ease}
.modal-close:hover{color:var(--ink);background:rgba(255,255,255,.1)}
.modal-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.modal-note{margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--hair);
  color:var(--faint);font-size:.75rem;line-height:1.7}
.modal-note b{color:var(--muted);font-weight:600}
.modal-link-btn{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  background:transparent;color:var(--gold);
  border:1px solid var(--gold-deep);border-radius:10px;
  padding:.5rem 1rem;font:inherit;font-size:.78rem;font-weight:500;
  letter-spacing:.02em;cursor:pointer;transition:background .25s ease}
.modal-link-btn:hover{background:rgba(var(--accent-rgb),.1)}
.modal-link-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.modal-link-btn svg{width:13px;height:13px;flex-shrink:0}

/* theme picker — a quiet text link at the foot of the page that reveals the options */
.theme-zone{margin-top:1.5rem}
.theme-toggle{display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:none;padding:.3rem .2rem;cursor:pointer;font:inherit;
  font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--hair);transition:color .25s ease,border-color .25s ease}
.theme-toggle:hover{color:var(--gold);border-bottom-color:var(--gold-deep)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.theme-toggle svg{width:12px;height:12px;flex-shrink:0;transition:transform .3s ease}
.theme-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* visibility, not just max-height:0 — otherwise the collapsed options stay in the
   tab order and are still announced by screen readers. */
.theme-panel{overflow:hidden;max-height:0;opacity:0;visibility:hidden;
  transition:max-height .35s ease,opacity .3s ease,margin .35s ease,visibility .35s}
.theme-panel.open{max-height:220px;opacity:1;visibility:visible;margin-top:1.1rem}
/* The vertical padding is load-bearing: the selected swatch's ring and the focus
   outline sit outside the option's box, and the panel clips overflow to animate. */
.theme-options{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;padding:6px 0}
.tp-option{display:flex;flex-direction:column;align-items:center;gap:.42rem;
  background:none;border:none;padding:0;cursor:pointer;font:inherit}
.tp-option:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px}
.tp-swatch{width:30px;height:30px;border-radius:50%;position:relative;
  border:1px solid var(--hair);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.tp-option:hover .tp-swatch{transform:scale(1.1)}
/* The gold pip is a reminder that the accent stays gold on every theme —
   only the two background tones differ between them. */
.tp-swatch::after{content:"";position:absolute;right:-1px;bottom:-1px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  border:1.5px solid var(--night-top)}
.tp-name{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  transition:color .2s ease}
.tp-option[aria-checked="true"] .tp-swatch{border-color:var(--gold);
  box-shadow:0 0 0 2px var(--night-top),0 0 0 3px var(--gold)}
.tp-option[aria-checked="true"] .tp-name{color:var(--gold)}
.tp-blue{background:linear-gradient(135deg,#070B1E 50%,#0E1430 50%)}
.tp-green{background:linear-gradient(135deg,#041C22 50%,#0D272C 50%)}
.tp-maroon{background:linear-gradient(135deg,#1A0F1D 50%,#311E2F 50%)}
.tp-bronze{background:linear-gradient(135deg,#1C1A17 50%,#2D2720 50%)}
.tp-black{background:linear-gradient(135deg,#0A0C10 50%,#171A20 50%)}
.tp-ivory{background:linear-gradient(135deg,#FFF9EE 50%,#F4E8CC 50%)}

/* remaining-time bar */
.remaining{max-width:420px;margin:1.3rem auto 0;
  opacity:0;animation:fade 1s ease 1.9s forwards}
.remaining.hidden{display:none}
.rem-track{position:relative;display:flex;align-items:center;gap:.55rem}
.rem-bar{position:relative;flex:1;min-width:0;height:6px;border-radius:999px;
  background:var(--hair);overflow:hidden}
.rem-fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width 1s linear}
.rem-ic{width:15px;height:15px;flex-shrink:0;color:var(--gold-deep)}
.rem-ic.start{color:var(--dusk)}
.rem-ic.end{color:var(--gold)}
.rem-text{margin-top:.5rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}

/* last third box uses the same accent border as the highlighted prayer */
.last-third-item{border-color:var(--gold);background:rgba(var(--accent-rgb),.06)}
.last-third-item .s-time{color:var(--gold)}
.last-third-item .s-label{color:var(--gold-deep)}

/* last updated */
/* --muted rather than --faint: at .66rem the faint tone fell to ~2.4:1, which is
   discreet to the point of being unreadable. */
.updated{margin-top:1.2rem;font-size:.68rem;letter-spacing:.08em;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:.4rem}
.updated svg{width:11px;height:11px;flex-shrink:0}
.updated.stale{color:var(--warn)}

/* back to top */
.to-top{position:fixed;right:clamp(1rem,4vw,1.8rem);bottom:clamp(1rem,4vw,1.8rem);
  z-index:41;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--shade-rgb),.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--gold);border-radius:50%;color:var(--gold);cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s,background .25s ease}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:rgba(var(--accent-rgb),.18)}
.to-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.to-top svg{width:17px;height:17px}

/* tomorrow's times */
.tmr-toggle{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  background:none;border:none;padding:.3rem .2rem;cursor:pointer;font:inherit;
  font-size:.72rem;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--hair);transition:color .25s ease,border-color .25s ease}
.tmr-toggle:hover{color:var(--gold);border-bottom-color:var(--gold-deep)}
.tmr-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tmr-toggle svg{width:12px;height:12px;flex-shrink:0;transition:transform .3s ease}
.tmr-toggle.open svg{transform:rotate(180deg)}
.tmr-panel{margin-top:.7rem}

/* common questions — the question takes the weight and ink colour this site gives
   emphasised prose, the answer the muted .85rem body used by .prose and .steps,
   so the block reads as part of the same page rather than a browser default. */
.faq{max-width:520px;margin:0 auto;text-align:left}
.faq details{border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.02);
  margin-bottom:.6rem;overflow:hidden;transition:border-color .25s ease}
.faq details[open]{border-color:var(--faint)}
.faq summary{cursor:pointer;list-style:none;padding:.9rem 2.4rem .9rem 1.1rem;
  color:var(--ink);font-size:.85rem;font-weight:600;line-height:1.5;
  position:relative;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.15rem;top:1.15rem;
  width:9px;height:9px;border-right:1.5px solid var(--gold-deep);
  border-bottom:1.5px solid var(--gold-deep);transform:rotate(45deg);
  transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(225deg);top:1.35rem}
.faq summary:hover{color:var(--gold)}
.faq summary:hover::after{border-color:var(--gold)}
.faq summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:-2px;border-radius:12px}
.faq details p{padding:0 1.1rem 1rem;color:var(--muted);font-size:.85rem;line-height:1.75}
.faq details p i{color:var(--ink);font-style:italic}

/* the last-third mark on the arc — positioned by script */
.third-mark{opacity:0;animation:fade .7s ease 1.8s forwards}

/* qibla call to action on the home page — a card rather than a button, since it
   leads somewhere rather than acting on the page it sits in */
.qibla-cta{display:flex;align-items:center;gap:.9rem;text-align:left;text-decoration:none;
  max-width:520px;margin:0 auto;padding:.95rem 1.1rem;
  border:1px solid var(--hair);border-radius:14px;background:rgba(255,255,255,.02);
  transition:border-color .25s ease,background .25s ease,transform .25s ease}
.qibla-cta:hover{border-color:var(--gold-deep);background:rgba(var(--accent-rgb),.06)}
.qibla-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.qibla-cta-ic{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-deep);border-radius:50%;color:var(--gold);
  background:rgba(var(--accent-rgb),.08)}
.qibla-cta-ic svg{width:19px;height:19px}
.qibla-cta-text{flex:1;min-width:0}
.qibla-cta-text b{color:var(--ink);font-size:.9rem;font-weight:600;letter-spacing:.01em}
.qibla-cta-go{width:16px;height:16px;flex-shrink:0;color:var(--gold-deep);
  transition:transform .25s ease}
.qibla-cta:hover .qibla-cta-go{transform:translateX(3px);color:var(--gold)}

/* map / satellite switch and the expand control */
.map-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:.4rem;margin-bottom:.7rem}
.map-types{display:flex;justify-content:center;gap:.4rem}
.mt-expand{display:inline-flex;align-items:center;gap:.35rem}
.mt-expand svg{width:12px;height:12px;flex-shrink:0}
.mt-btn{background:transparent;color:var(--muted);border:1px solid var(--hair);
  border-radius:999px;padding:.34rem .95rem;font:inherit;font-size:.72rem;font-weight:500;
  letter-spacing:.06em;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,color .25s ease}
.mt-btn:hover{color:var(--ink);border-color:var(--faint)}
.mt-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mt-btn.is-on{color:var(--gold);border-color:var(--gold-deep);background:rgba(var(--accent-rgb),.1)}

/* expanded map — the same element made to fill the screen, so nothing about the
   map is rebuilt and the page underneath is left exactly as it was */
.qibla-map-wrap.expanded{position:fixed;inset:0;z-index:60;
  width:100%;height:100vh;height:100dvh;max-width:none;
  aspect-ratio:auto;border:none;border-radius:0;background:var(--night-top)}
body.map-expanded{overflow:hidden}
/* Nothing else on the page paints while the map is expanded.
   The z-index above cannot be relied on by itself: the map sits inside .col,
   which has a z-index of its own and so opens a stacking context, and a z-index
   set inside one only ever competes within it — anything on the page that opens
   its own context can still be painted over the map. visibility is inherited
   rather than stacked, so hiding the whole column settles it whatever the
   contexts happen to be, and the map switches itself back on. */
body.map-expanded #wrap{visibility:hidden}
body.map-expanded .qibla-map-wrap.expanded{visibility:visible}
.map-bar{position:absolute;top:.7rem;left:.7rem;right:.7rem;z-index:3;
  display:none;align-items:center;justify-content:space-between;gap:.6rem}
.qibla-map-wrap.expanded .map-bar{display:flex}
/* Over the map rather than the page, so the switch needs its own backing to stay
   legible against whatever it happens to be sitting on. */
.qibla-map-wrap.expanded .map-types{background:rgba(var(--shade-rgb),.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.3rem;border-radius:999px}
.qibla-map-wrap.expanded .mt-btn{background:transparent;border-color:transparent;color:var(--ink)}
.qibla-map-wrap.expanded .mt-btn.is-on{color:var(--gold);border-color:var(--gold-deep);
  background:rgba(var(--accent-rgb),.14)}
.map-close{margin-left:auto;width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--shade-rgb),.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--gold);border-radius:50%;color:var(--gold);cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
.map-close:hover{background:rgba(var(--accent-rgb),.2)}
.map-close:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.map-close svg{width:17px;height:17px}
/* The floating back-to-top button would otherwise sit on top of the map. */
body.map-expanded .to-top{display:none}

/* ?debug=1 readout under the map */
.qibla-debug{margin-top:.7rem;padding:.5rem .7rem;border:1px solid var(--hair);border-radius:8px;
  background:rgba(255,255,255,.03);color:var(--muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;line-height:1.7;
  text-align:left;word-break:break-word}

/* qibla print summary card */
.print-card{display:none}
@media print{
  body{background:#fff;color:#000}
  .stars,.topnav,.to-top,.theme-zone,.qibla-btn,.qibla-note,.evidence-btn,.map-controls,.qibla-debug,
  .band-sky,.steps,.hadith,.source,.back-link,#qiblaIntro,.salah-title{display:none!important}
  .band-floor{background:#fff}
  .band-floor::before{display:none}
  .qibla-map-wrap{border:1px solid #999;page-break-inside:avoid}
  .foot .cap{color:#555}
  .foot .tval{color:#000}
  .print-card{display:block;margin-top:1.2rem;text-align:left;color:#000;
    border-top:1px solid #999;padding-top:1rem}
  .print-card .pc-title{font-weight:700;font-size:.9rem;margin-bottom:.6rem}
  .print-card .pc-big{font-size:1.1rem;font-weight:600;margin-bottom:.4rem}
  .print-card .pc-line{font-size:.85rem;margin-bottom:.25rem}
  .print-card .pc-note{font-size:.75rem;color:#444;margin-top:.6rem;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .rem-fill{transition:none}
  .arc-line{stroke-dashoffset:0}
  .now-moon{transition:none!important}
  .endpoint,.hero,.foot .cell,.note,.source,.salah,.countdown,.duration,.hadith,.evidence-wrap,.midpoint-mark,.remaining,.third-mark{opacity:1}
  /* animation:none leaves the stars at their base opacity of 0; hold them at a
     faint constant glow instead of removing them from the sky entirely. */
  .stars span{opacity:.28}
}