/* Five-prayer arc on city prayer-times pages. Geometry = the app's DayArc (see scripts/prayer_arc.py).
   Light-on-photo: the site's prayer-times sky under the app's photo scrim (6,12,9). */
.pa{position:relative;margin:26px 0 20px;padding:14px 12px 10px;border-radius:18px;overflow:hidden;isolation:isolate;
  color:#f5f1e8;background:linear-gradient(180deg,rgba(6,12,9,.62),rgba(6,12,9,.86)),url(/assets/images/heroes/prayer-times-800.webp) center 28%/cover #1a2b20}
@media(min-width:700px){.pa{padding:18px 24px 14px;background-image:linear-gradient(180deg,rgba(6,12,9,.62),rgba(6,12,9,.86)),url(/assets/images/heroes/prayer-times-1600.webp)}}
.pa-next{margin:0 0 4px;min-height:26px;text-align:center;font:600 15px/26px var(--sans);color:#f5f1e8;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.pa-next b{font-family:var(--serif);font-weight:500;font-size:19px;color:var(--gold-on-dark,#EBD3A0);margin:0 .1em}
.pa-next span{opacity:.82;font-variant-numeric:tabular-nums}
.pa-stage{position:relative;max-width:600px;margin:0 auto}
.pa-stage svg{display:block;width:100%;height:auto;overflow:visible}
.pa-line{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.3;stroke-linecap:round}
.pa-glow{opacity:0}
.pa-core{fill:transparent;stroke:rgba(255,255,255,.88);stroke-width:1.6}
.pa-dot.is-past .pa-core{fill:rgba(235,211,160,.6);stroke:none}
.pa-dot.is-now .pa-glow{opacity:1}
.pa-dot.is-now .pa-core{fill:var(--gold-on-dark,#EBD3A0);stroke:#FFF6DF;stroke-width:1.4}
.pa-labels{list-style:none;margin:2px 0 0;padding:0;position:relative;height:44px}
.pa-labels li{position:absolute;top:0;width:19.5%;transform:translateX(-50%);text-align:center;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pa-labels b{display:block;font:700 13px/1.25 var(--sans);color:rgba(245,241,232,.82);white-space:nowrap}
.pa-labels time{display:block;margin-top:1px;font:500 13px/1.25 var(--sans);font-variant-numeric:tabular-nums;color:rgba(245,241,232,.78);white-space:nowrap}
.pa-labels li.is-past b,.pa-labels li.is-past time{color:rgba(245,241,232,.62)}
.pa-labels li.is-next b,.pa-labels li.is-next time{color:#f5f1e8}
.pa-labels li.is-now b,.pa-labels li.is-now time{color:var(--gold-on-dark,#EBD3A0)}
@media(max-width:400px){.pa-labels b{font-size:12px}.pa-labels time{font-size:11.5px;letter-spacing:-.01em}}
@media(prefers-reduced-motion:no-preference){.pa-dot .pa-core,.pa-dot .pa-glow{transition:opacity .4s,fill .4s}}