/* Three looks, one markup.  Each theme sets the variables and then flips the
   handful of structural switches it needs (ring vs bar, card rows vs hairline
   rows), so the page can be rebuilt into any of them without touching the DOM. */
:root {
  --font:-apple-system,'Segoe UI',Inter,Roboto,sans-serif;
  --radius:20px; --pill:999px; --vh:1vh;
  --rowgap:0px; --rowradius:0px; --listpad:0px;
  --ringshow:none; --barshow:block; --heroborder:none; --heropad:24px 26px;
  --herotx:#fff; --heroalign:stretch;
}

/* ── Soft: light, rounded, gradient hero ─────────────────────────────────── */
[data-theme=soft]{
  --bg:#F5F6FB; --card:#fff; --ink:#171A2B; --mut:#767B95; --line:#E8EAF3;
  --acc:#C8A84B; --brand:#3A5FA0; --link:#3A5FA0;
  --hero:linear-gradient(135deg,#3A5FA0 0%,#5B7FC4 52%,#8E7BC0 100%);
  --heroshadow:0 14px 34px -14px rgba(58,95,160,.6);
  --listbg:#fff; --listborder:1px solid #E8EAF3; --rowbg:transparent;
  --tabbg:#fff; --tabsel:#3A5FA0; --tabselink:#fff; --navbtnbg:#fff;
}
/* ── Nightfall: dark, glow, progress ring ────────────────────────────────── */
[data-theme=nightfall]{
  --bg:#0B1020; --card:#141B2F; --ink:#EEF2FF; --mut:#8994B2; --line:#222C45;
  --acc:#E3BE68; --brand:#4C7DF0; --link:#E3BE68;
  --hero:linear-gradient(158deg,rgba(76,125,240,.20),rgba(227,190,104,.09));
  --heroshadow:none; --heroborder:1px solid #222C45;
  --listbg:transparent; --listborder:none; --rowbg:#141B2F;
  --rowgap:8px; --rowradius:16px;
  --tabbg:rgba(255,255,255,.03); --tabsel:#EEF2FF; --tabselink:#0B1020;
  --navbtnbg:rgba(255,255,255,.03);
  --ringshow:block; --barshow:none; --herotx:#EEF2FF; --heroalign:center;
  --heropad:22px 24px;
}
/* the ring already carries the time; showing it again beside the name
   just prints the same number twice */
[data-theme=nightfall] .attime{display:none}
[data-theme=nightfall] body{background:
  radial-gradient(1100px 620px at 12% -8%, #1E2C58 0%, transparent 62%),
  radial-gradient(900px 520px at 108% 8%, #3A2B52 0%, transparent 58%), var(--bg)}
/* ── Editorial: light, serif, hairlines, numerals do the work ────────────── */
[data-theme=editorial]{
  --bg:#FAF9F6; --card:#FAF9F6; --ink:#14130F; --mut:#8B887E; --line:#E6E3DA;
  --acc:#A98526; --brand:#14130F; --link:#A98526;
  --font:'Iowan Old Style',Georgia,'Times New Roman',serif;
  --hero:transparent; --heroshadow:none; --heropad:20px 0 22px;
  --heroborder:none; --herotx:var(--ink);
  --listbg:transparent; --listborder:none; --rowbg:transparent;
  --radius:0px; --tabbg:transparent; --tabsel:transparent; --tabselink:var(--ink);
  --navbtnbg:transparent; --ringshow:none; --barshow:none;
}
[data-theme=editorial] .hero{border-top:2px solid var(--ink); border-bottom:1px solid var(--line)}
[data-theme=editorial] .times li{border-bottom:1px solid var(--line)}
/* the qibla block draws its own top rule, so the last row must not */
[data-theme=editorial] .times li:last-child{border-bottom:none}
[data-theme=editorial] .times li.on .nm, [data-theme=editorial] .times li.on .tm{color:var(--acc)}
[data-theme=editorial] .times li.on{background:transparent}
[data-theme=editorial] .nm{font-size:34px; letter-spacing:-1px; font-weight:400}
[data-theme=editorial] .attime{font-size:34px; letter-spacing:-1.2px}
[data-theme=editorial] .vb{border:none; border-bottom:2px solid transparent; border-radius:0;
  flex:0 0 auto; padding:8px 0; margin-inline-end:26px; font-family:var(--font)}
[data-theme=editorial] .vb.sel{border-bottom-color:var(--ink); font-weight:600}
[data-theme=editorial] .views{gap:0}
[data-theme=editorial] nav .ttl{font-size:12px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--mut); font-weight:500}
[data-theme=editorial] .cityname{font-size:46px; font-weight:400; letter-spacing:-1.5px}
[data-theme=editorial] .navbtn{border:none; border-bottom:1px solid var(--line); border-radius:0;
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--mut); padding:6px 0}

* {box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html, body {margin:0; padding:0}
body {background:var(--bg); color:var(--ink); font-family:var(--font);
  min-height:100vh; min-height:calc(var(--vh)*100); display:flex; flex-direction:column}
[data-lang=ur] body {font-family:'Noto Nastaliq Urdu',var(--font)}
[data-lang=ur] .times, [data-lang=ur] .hero, [data-lang=ur] .citybar {direction:rtl}

nav {display:flex; align-items:center; gap:10px; padding:14px 18px}
nav .mark {width:31px; height:31px; border-radius:11px}
[data-theme=nightfall] nav .mark, [data-theme=editorial] nav .mark {border-radius:50%}
nav .ttl {font-weight:650; font-size:16.5px; letter-spacing:-.2px}
nav .ttl b {color:var(--acc); font-weight:650}
nav .sp {flex:1}
.navbtn {border:1px solid var(--line); background:var(--navbtnbg); color:var(--mut);
  border-radius:var(--pill); padding:8px 15px; font:inherit; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px}
.navbtn:active {opacity:.7}

main {flex:1; width:100%; max-width:540px; margin:0 auto; padding:4px 18px 30px}

.citybar {display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:8px 0 16px}
.cityname {font-size:26px; font-weight:680; letter-spacing:-.7px}
.citysub {color:var(--mut); font-size:13.5px}
.linkbtn {background:none; border:none; color:var(--link); font:inherit; font-size:13px;
  cursor:pointer; padding:0; font-weight:560}

.hero {background:var(--hero); color:var(--herotx); border-radius:calc(var(--radius) + 6px);
  padding:var(--heropad); margin-bottom:10px; box-shadow:var(--heroshadow);
  border:var(--heroborder); display:flex; gap:22px; align-items:var(--heroalign)}
.hero .ring {display:var(--ringshow); width:118px; height:118px; flex-shrink:0}
.hero .rtrack {stroke:var(--line)}
.hero .rfill {stroke:var(--acc)}
.hero .rt1 {fill:var(--herotx); font-size:20px; font-weight:650; font-family:var(--font)}
.hero .rt2 {fill:var(--mut); font-size:11px; font-family:var(--font)}
.heroinfo {flex:1; min-width:0}
.hero .lbl {font-size:11px; text-transform:uppercase; letter-spacing:1.9px; opacity:.75}
.nmrow {display:flex; align-items:flex-end; gap:12px; margin-top:4px}
.hero .nm {font-size:33px; font-weight:700; letter-spacing:-1px; line-height:1.05}
.hero .hsp {flex:1}
.hero .attime {font-size:26px; font-weight:640; font-variant-numeric:tabular-nums;
  letter-spacing:-.6px; line-height:1.1}
.hero .bar {display:var(--barshow); height:5px; border-radius:99px;
  background:rgba(255,255,255,.24); margin-top:15px}
.hero .bar i {display:block; height:100%; border-radius:99px; background:#F2D998; width:0}
.hero .cd {font-size:12.5px; opacity:.85; margin-top:8px; font-variant-numeric:tabular-nums}
[data-theme=editorial] .hero .cd {color:var(--acc); opacity:1}
.datebar {color:var(--mut); font-size:12.5px; margin:0 0 18px; padding-inline-start:3px}

.views {display:flex; gap:5px; background:var(--tabbg); border:1px solid var(--line);
  border-radius:14px; padding:4px; margin:0 0 14px}
[data-theme=nightfall] .views, [data-theme=editorial] .views {background:transparent; border:none; padding:0}
[data-theme=nightfall] .views {gap:7px}
.vb {flex:1; border:1px solid transparent; background:transparent; color:var(--mut);
  border-radius:11px; padding:9px 6px; font:inherit; font-size:13px; cursor:pointer}
[data-theme=nightfall] .vb {border-color:var(--line); background:var(--tabbg); border-radius:13px}
.vb.sel {background:var(--tabsel); color:var(--tabselink); font-weight:620; border-color:var(--tabsel)}

.times {list-style:none; margin:0; padding:var(--listpad); background:var(--listbg);
  border:var(--listborder); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; gap:var(--rowgap)}
[data-theme=nightfall] .times {overflow:visible}
.times li {display:flex; align-items:center; gap:12px; padding:14px 17px; font-size:15.5px;
  background:var(--rowbg); border-radius:var(--rowradius); color:var(--mut)}
[data-theme=soft] .times li {border-bottom:1px solid var(--line)}
[data-theme=soft] .times li:last-child {border-bottom:none}
[data-theme=editorial] .times li {padding:14px 0}
.times .nm {flex:1}
.times .tm {font-variant-numeric:tabular-nums; font-size:18px; letter-spacing:-.3px}
.times li.on {color:var(--ink); font-weight:640}
[data-theme=soft] .times li.on {background:linear-gradient(90deg,#EEF2FB,transparent)}
[data-theme=nightfall] .times li.on {background:linear-gradient(120deg,rgba(76,125,240,.26),rgba(227,190,104,.12));
  border:1px solid #4C7DF055}
.times li.on .tm {color:var(--ink)}

.moon {display:flex; align-items:center; gap:16px; margin-top:14px; padding:17px 19px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--listbg)}
[data-theme=editorial] .moon {border:none; border-top:1px solid var(--line); border-radius:0;
  padding:18px 0 0}
.moon .mdark {fill:var(--line); opacity:.55}
.moon .mlit {fill:var(--acc)}
.moon .medge {stroke:var(--line); stroke-width:1}
.mphase {font-size:19px; font-weight:640; letter-spacing:-.3px; line-height:1.3}
.qibla {display:flex; align-items:center; gap:16px; margin-top:14px; padding:17px 19px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--listbg)}
[data-theme=editorial] .qibla {border:none; border-top:1px solid var(--line); border-radius:0;
  padding:18px 0 0}
.qibla svg {flex-shrink:0; color:var(--acc)}
.qlbl {font-size:11px; text-transform:uppercase; letter-spacing:1.7px; color:var(--mut)}
.qdeg {font-size:26px; font-weight:680; font-variant-numeric:tabular-nums; line-height:1.25;
  letter-spacing:-.7px}
.qnote {font-size:12px; color:var(--mut)}

footer {padding:20px 18px 28px; color:var(--mut); font-size:11.5px; line-height:1.7;
  text-align:center; border-top:1px solid var(--line); margin-top:22px}
footer a {color:var(--mut)}

.sheetbg {position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:30;
  align-items:center; justify-content:center; padding:18px}
.sheetbg.open {display:flex}
.sheet {background:var(--bg); color:var(--ink); width:100%; max-width:520px;
  border-radius:18px; padding:18px 20px 22px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
  max-height:82vh; max-height:calc(var(--vh)*82); overflow:auto}
.sheet h2 {margin:0 0 4px; font-size:17px}
.rowlbl {width:100%; margin-top:16px; padding-top:11px; border-top:1px solid var(--line);
  color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:1.2px}
.rowlbl:first-of-type {margin-top:6px; padding-top:0; border-top:none}
.rows {display:flex; flex-wrap:wrap; gap:7px; padding-top:9px}
.rows button {border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:var(--pill); padding:8px 13px; font:inherit; font-size:13px; cursor:pointer}
.rows button.sel {background:var(--acc); border-color:var(--acc); color:#fff}
.rows button .ang {opacity:.6; font-size:11px; margin-inline-start:5px}

#q {width:100%; font:inherit; font-size:16px; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); margin:10px 0}
#q:focus {outline:2px solid var(--acc); outline-offset:1px}
.hits {list-style:none; margin:0; padding:0}
.hits li {padding:11px 6px; border-bottom:1px solid var(--line); cursor:pointer;
  display:flex; align-items:baseline; gap:8px}
.hits .h1 {font-size:15px}
.hits .h2 {color:var(--mut); font-size:12.5px}
.note {color:var(--mut); font-size:13px; padding:12px 4px}

.mnav {display:flex; align-items:center; gap:10px; margin-bottom:10px}
.mttl {flex:1; text-align:center; font-size:16px; font-weight:600}
.tblwrap {overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
[data-theme=editorial] .tblwrap {border:none; border-top:1px solid var(--line); border-radius:0}
.mtbl {border-collapse:collapse; width:100%; font-size:13.5px}
.mtbl th, .mtbl td {padding:8px 9px; text-align:center; white-space:nowrap;
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.mtbl th {font-weight:600; color:var(--mut); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.6px; position:sticky; top:0; background:var(--bg)}
.mtbl tr:last-child td {border-bottom:none}
.mtbl td.d {text-align:start; color:var(--mut)}
.mtbl tr.today {background:var(--card); font-weight:600}
[data-theme=soft] .mtbl tr.today {background:#EEF2FB}
[data-theme=nightfall] .mtbl tr.today {background:rgba(76,125,240,.18)}
[data-theme=editorial] .mtbl tr.today {background:#F1EEE4}
.mtbl tr.today td.d {color:var(--ink)}
.printbtn {margin-top:12px}
@media (max-width:460px){
  .mtbl th, .mtbl td {padding:7px 4px; font-size:12.5px}
  .mtbl th {font-size:10.5px; letter-spacing:.2px}
}
@media print {
  nav, .views, .hero, .citybar .linkbtn, .printbtn, footer, .sheetbg, .qibla {display:none !important}
  body {background:#fff; color:#000}
  .tblwrap {border:none; overflow:visible}
  .mtbl th {position:static; color:#000}
  .mtbl th, .mtbl td {border-bottom:1px solid #ddd}
  .mtbl tr.today {background:#f2f2f2}
  main {max-width:none; padding:0}
}