/* Palette is sampled from the sky at the moments this site is about:
   deep blue-slate of late dusk for the page, amber for the sun above the
   horizon, periwinkle for the two prayers that happen below it.
   No web fonts: first paint has to survive a bad connection. */

:root{
  --ink:#101725; --ink-2:#1A2231; --ink-3:#222C3E;
  --rule:#29344A; --rule-2:#374357;
  --sun:#E9A93C; --dusk:#C9603A; --twilight:#8290D6;
  --text:#EDEAE3; --dim:#8E99B0; --dimmer:#6A748A;
  --ok:#5FBF97; --warn:#E0A93C;
  --r:10px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:18px;
}


/* The hidden attribute must win. Author rules like .panel{display:grid} otherwise
   beat the browser's own [hidden]{display:none}, because author styles outrank the
   user-agent stylesheet regardless of specificity — which silently un-hides
   anything the scripts try to hide. */
[hidden]{display:none!important}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 15px/1.65 var(--sans);
  padding:0 var(--pad) 56px;
  max-width:560px; margin-inline:auto;
  transition:background-color 1.2s linear;
}
h1,h2,h3{font-weight:400; margin:0}
p{margin:0}
a{color:var(--twilight)}
a:hover{color:var(--text)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;position:fixed;background:var(--ink-2);padding:10px 14px;border-radius:var(--r);z-index:60}

:where(button,select,input,summary,a):focus-visible{
  outline:2px solid var(--sun); outline-offset:2px; border-radius:4px;
}

/* ---- header ---- */
.bar{display:flex;align-items:center;gap:10px;padding:16px 0 10px}
.mark{width:13px;height:13px;border-radius:50%;background:var(--sun);flex:none;
  box-shadow:0 0 0 4px rgba(233,169,60,.13)}
.wordmark{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.place{margin-left:auto;background:none;border:1px solid var(--rule);color:var(--text);
  font:inherit;font-size:13px;padding:6px 11px;border-radius:99px;cursor:pointer;
  display:flex;align-items:center;gap:7px;max-width:56%}
.place:hover{border-color:var(--rule-2)}
#placeName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caret{width:0;height:0;border:4px solid transparent;border-top-color:var(--dim);margin-top:3px;flex:none}

/* ---- panels, cards ---- */
.panel,.card{background:var(--ink-2);border:1px solid var(--rule);border-radius:14px;
  padding:16px;margin:14px 0}
.panel{display:grid;gap:12px}
.h2{font-size:17px}
.h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}
.sub2{font-size:13.5px;color:var(--dim);margin-top:5px}
.micro{font-size:12.5px;color:var(--dimmer);line-height:1.55}

/* ---- hero ---- */
.hero{padding:20px 0 14px;border-bottom:1px solid var(--rule)}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.heroName{font-size:18px;margin-top:6px;letter-spacing:.01em}
.heroTime{font-size:54px;font-weight:200;line-height:1.02;margin-top:1px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.heroIn{font-size:14px;color:var(--dim);margin-top:4px;font-variant-numeric:tabular-nums}

/* ---- times list: the whole product for a two-second visit ---- */
.times{list-style:none;margin:0;padding:2px 0 0}
.times li{display:flex;align-items:baseline;gap:11px;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.times li:last-child{border-bottom:0}
.times .nm{font-size:14.5px;flex:none;min-width:68px}
.times .dot{width:5px;height:5px;border-radius:50%;flex:none;opacity:.9}
.times .dot.above{background:var(--sun)}
.times .dot.cross{background:var(--dusk)}
.times .dot.below{background:var(--twilight)}
.times .tm{margin-left:auto;font-size:20px;font-weight:300;font-variant-numeric:tabular-nums;
  letter-spacing:-.005em}
.times li.now{color:var(--sun)}
.times li.now .nm{font-weight:500}
.times li.sunrise .nm,.times li.sunrise .tm{color:var(--dim);font-weight:300}
.times .est{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--warn);
  border:1px solid rgba(224,169,60,.35);border-radius:99px;padding:1px 7px;align-self:center}
.estNote{margin-top:12px}

/* ---- method line ---- */
.methodLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--dim);padding:14px 0 2px}
.linkish{background:none;border:0;color:var(--twilight);font:inherit;cursor:pointer;
  text-decoration:underline;padding:0}
.linkish:hover{color:var(--text)}

/* ---- info button ---- */
.info{width:17px;height:17px;border-radius:50%;border:1px solid var(--rule-2);
  background:none;color:var(--dim);font:500 11px/1 var(--sans);cursor:pointer;
  vertical-align:middle;margin-left:5px;flex:none;padding:0}
.info:hover{border-color:var(--sun);color:var(--sun)}

/* ---- nudge ---- */
.nudge{background:var(--ink-2);border:1px solid var(--rule);border-left:3px solid var(--sun);
  border-radius:0 var(--r) var(--r) 0;padding:14px;margin:14px 0;font-size:13.5px}
.nudgeBtns{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}

/* ---- sun path ---- */
.pathWrap{margin:22px 0 4px}
#pathHost svg{display:block;width:100%;height:auto;margin-top:12px}

/* ---- qibla ---- */
.bigNum{font-size:40px;font-weight:200;font-variant-numeric:tabular-nums;margin-top:8px}
.unit{font-size:15px;color:var(--dim);margin-left:6px;font-weight:400}

/* ---- forms ---- */
.fld{display:block}
.lbl{display:block;font-size:12.5px;color:var(--dim);margin-bottom:5px}
input[type=text],select{
  width:100%;background:var(--ink-3);border:1px solid var(--rule);color:var(--text);
  font:400 15px var(--sans);padding:9px 11px;border-radius:var(--r);
  -webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
  linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input:hover,select:hover{border-color:var(--rule-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.setGrid{display:grid;gap:13px;margin-top:14px}
.offGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.offGrid .lbl{font-size:11.5px}

.btn{background:var(--ink-3);border:1px solid var(--rule-2);color:var(--text);
  font:400 14px var(--sans);padding:9px 15px;border-radius:var(--r);cursor:pointer;
  margin-right:7px;margin-top:4px}
.btn:hover{border-color:var(--dim)}
.btn.primary{background:var(--sun);border-color:var(--sun);color:#241703;font-weight:500}
.btn.primary:hover{background:#F2B851}
.btn.ghost{background:none}
.btn.sm{font-size:13px;padding:7px 12px}

.results{list-style:none;margin:0;padding:0;max-height:210px;overflow:auto}
.results li{padding:9px 11px;border-bottom:1px solid var(--rule);cursor:pointer;font-size:14px}
.results li:hover,.results li[aria-selected=true]{background:var(--ink-3)}
.results .cc{color:var(--dim);font-size:12.5px;margin-left:6px}

details.sub{border-top:1px solid var(--rule);margin-top:16px;padding-top:13px}
details.sub>summary{cursor:pointer;font-size:13.5px;color:var(--twilight);list-style:none}
details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary::before{content:"▸ ";font-size:11px}
details.sub[open]>summary::before{content:"▾ "}
.sub-open{border-top:1px solid var(--rule);margin-top:16px;padding-top:13px}
#settings>summary{cursor:pointer;list-style:none}
#settings>summary::-webkit-details-marker{display:none}
#settings>summary::after{content:" ▸";color:var(--dim);font-size:12px}
#settings[open]>summary::after{content:" ▾"}
.shareRow{margin-top:18px;border-top:1px solid var(--rule);padding-top:14px}

/* ---- info popover ---- */
.infoBack{position:fixed;inset:0;background:rgba(6,10,18,.72);z-index:40}
.infoBox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;
  width:min(430px,calc(100vw - 34px));max-height:78vh;overflow:auto;
  background:var(--ink-2);border:1px solid var(--rule-2);border-radius:14px;padding:20px}
.infoBox p{margin-top:10px;font-size:14px;color:#DAD7D0}
.infoBox .btn{margin-top:16px}

/* ---- footer ---- */
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--dim);display:grid;gap:9px}

@media (max-width:400px){
  .heroTime{font-size:46px}
  .times .tm{font-size:19px}
  .row2,.offGrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- branding ---- */
.wordmark b{font-weight:500;color:var(--text);letter-spacing:.1em}
.wordmark{color:var(--dim);letter-spacing:.1em;text-transform:lowercase;font-size:14px}
.footMark{font-size:13px;letter-spacing:.1em;color:var(--dim);text-transform:lowercase}
.footMark b{font-weight:500;color:var(--text)}

/* ---- compact location panel: a setting, not a gateway ---- */
.panel.compact{padding:13px;gap:9px;margin:10px 0 0}
.panel.compact .btn{font-size:13.5px;padding:8px 13px;margin-top:0}
.panel.compact .lbl{font-size:11.5px;margin-bottom:4px}
.panel.compact input[type=text]{padding:8px 10px;font-size:14px}
.panel.compact .micro{font-size:11.5px}
.panel.compact details.sub{margin-top:10px;padding-top:10px}
.panel.compact .results{max-height:170px}
.panel.compact .results li{padding:8px 10px;font-size:13.5px}

/* ---- source selector ---- */
.hintline{display:block;font-size:12px;color:var(--dimmer);margin-top:6px;line-height:1.5}
.srcNote{margin-top:10px;padding-left:11px;border-left:2px solid var(--twilight)}
.srcNote.warn{border-left-color:var(--warn);color:var(--warn)}

/* ---- location panel as a dropdown ----------------------------------------
   Anchored to the header rather than sitting in the document flow, so opening
   it overlays the page instead of pushing the timetable down. The times stay
   at the top of the page in every state. */
.topbar{position:relative;z-index:40}
.panel.compact{position:absolute;top:100%;right:0;left:auto;
  width:min(370px,100%);margin:6px 0 0;z-index:41;
  box-shadow:0 12px 34px rgba(4,8,16,.6)}
@media (max-width:430px){
  .panel.compact{width:100%}
}

/* ---- settings feedback ---- */
.applyNote{margin-top:10px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.savedPill{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);
  border:1px solid rgba(95,191,151,.4);border-radius:99px;padding:2px 9px}
.nudgeHead{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
.nudge.lupt{border-left-color:var(--twilight)}

/* ---- now / next ---- */
.nowRow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
.nowName{font-size:17px;color:var(--sun)}
.nowUntil{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---- qibla dial ---- */
.qiblaRow{display:flex;align-items:center;gap:18px;margin-top:10px;flex-wrap:wrap}
#qiblaDial svg{display:block;width:124px;height:124px}

/* the dialog takes focus itself, so suppress the default ring on the container */
.infoBox:focus{outline:none}
.infoBox:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.calNA{border-left:2px solid var(--twilight);padding-left:11px;margin-top:10px}