/* Today: one live period, a quiet day thread, and a date jump. */
.hero-next-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
#todayView .hero-next-footer .countdown-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
#heroNextLabel{font-size:.875rem;line-height:1.4}
.day-thread{display:none;color:#e0e9e3}
  .day-thread-track{height:34px;position:relative;direction:ltr}
  .day-thread-track>svg{display:block;width:100%;height:100%;overflow:visible;stroke-width:1.2;stroke-linecap:round}
  .thread-base{stroke:#d8e8dc40}
  .thread-progress{stroke:#d7be81}
  .thread-dot,.thread-position{position:absolute;display:block;border-radius:50%;transform:translate(-50%,-50%)}
  .thread-dot{width:6px;height:6px;border:1px solid #b4c8bb;background:#294f3c}
  .thread-dot.elapsed{background:#d7be81;border-color:#d7be81}
  .thread-position{width:8px;height:8px;background:#f6e5b3;box-shadow:0 0 0 4px #e9cd8f22}
  .day-thread-labels{position:relative;height:15px;font-size:.625rem;line-height:1.5;text-align:center}
  .day-thread-labels span{position:absolute;transform:translateX(-50%);white-space:nowrap}
  .day-thread-labels span:first-child{transform:none}
  .day-thread-labels span:last-child{transform:translateX(-100%)}
  [dir=rtl] .day-thread-labels span{transform:translateX(50%)}
  [dir=rtl] .day-thread-labels span:first-child{transform:none}
  [dir=rtl] .day-thread-labels span:last-child{transform:translateX(100%)}
  .day-thread-labels .elapsed{color:#cbdacf}
  .day-thread-labels .active{color:#f5e3ad;font-weight:700}
  [dir=rtl] .day-thread-track{transform:scaleX(-1)}

#dateLine{border:0;background:transparent;width:100%;min-height:44px;padding:2px 4px;cursor:pointer;border-radius:7px}
#dateLine:hover{background:var(--today-next-bg)}
#dateLine .date-gregorian{display:flex;align-items:center;justify-content:center;gap:6px}
#dateLine .date-gregorian svg{width:13px;height:13px;opacity:.7}
.day-picker{padding:20px;width:min(360px,calc(100vw - 32px));max-height:calc(100svh - 32px);border:1px solid var(--today-rule);border-radius:16px;background:var(--today-surface);color:var(--today-text);overflow:auto}
.day-picker::backdrop{background:#09151199;backdrop-filter:blur(3px)}
.day-picker-heading,.day-picker-month{display:flex;align-items:center;justify-content:space-between;gap:8px}
.day-picker-heading h2{font:normal 1.5rem/1.3 Georgia,serif;margin:0}
.day-picker-month{margin:12px 0 8px}
.day-picker-month h3{font:600 1rem/1.4 var(--sans);margin:0;text-align:center}
[dir=rtl] :is(#pickerPreviousMonth,#pickerNextMonth){transform:scaleX(-1)}
.day-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.picker-weekday{text-align:center;font-size:.6875rem;color:var(--today-muted);padding:6px 0}
.picker-day{position:relative;border:0;background:transparent;border-radius:8px;min-height:44px;padding:4px 0;font-size:.9375rem;font-variant-numeric:tabular-nums}
.picker-day.outside{color:var(--today-muted)}
.picker-day:hover{background:var(--today-next-bg)}
.picker-day[aria-current=date]::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;bottom:4px;left:calc(50% - 2px)}
.picker-day.selected{background:#294f3c;color:#fff;font-weight:700}
html[data-theme=night] .picker-day.selected{background:#d7be81;color:#1c2922}
.day-picker-footer{border-top:1px solid var(--today-rule);margin-top:12px;padding-top:10px;display:flex;justify-content:center}
@media(min-width:721px){
  body:not(.native-app) #todayView .countdown-wrap{max-width:55%;margin-top:14px}
  body:not(.native-app) #todayView .hero-time{text-align:start}
  body:not(.native-app) #todayView .hero-kicker>span:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
}
@media(max-width:720px){
  :root{--rhythm-gap:16px;--past-prayer:#6a746c}
  html[data-theme=night]{--past-prayer:#929ea2}
  /* Reserve the measured bottom tabs, including their native safe area. */
  #todayView.page-wrap{padding:var(--rhythm-gap) 16px calc(var(--rhythm-gap) + var(--today-nav,61px));min-height:calc(100dvh - var(--today-header,69px))}
  /* A definite height lets all six rows share the remaining space. The
     intrinsic minimum keeps short screens and enlarged text scrollable. */
  #todayView .today-grid{gap:var(--rhythm-gap);height:calc(100dvh - var(--today-header,69px) - var(--today-nav,61px) - var(--rhythm-gap)*2);min-height:min-content}
  #todayView .hero,#todayView .prayer-section,#todayView .date-return-slot{order:0}
  #todayView .hero{flex:none}
  #todayView .hero-content{padding:10px 16px 14px}
  #todayView .hero-kicker{min-height:28px;gap:8px}
  #todayView .hero-kicker>span:first-child{display:flex;align-items:center;gap:8px}
  #todayView .hero-kicker .sky-scene{margin-inline-start:auto;width:28px;height:28px}
  #todayView .hero-main{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:0}
  #todayView .hero-summary{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
  #todayView .hero-main .sky-scene{width:28px;height:28px}
  #todayView .next-name h2{font-size:2rem}
  #todayView .next-name>span{font-size:1.125rem}
  #todayView .hero-next-footer{margin:12px -16px 0;padding:9px 16px;background:#ffffff08;border-block-start:1px solid #ffffff16;border-block-end:0}
  #todayView .hero-time{font-size:2.25rem;margin:0}
  #todayView .hero-time small{font-size:.6875rem}
  #todayView .hero-next-footer .countdown-wrap{font-size:.8125rem;line-height:1.5;min-height:0}
  .day-thread{display:block;margin-top:10px;color:#e0e9e3}
  #todayView .prayer-section{flex:1;display:flex;flex-direction:column;min-height:min-content}
  #todayView .timetable-heading{flex:none;padding:8px 4px}
  #prayerCards{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,minmax(48px,1fr));gap:0;padding:0;min-height:max-content;border-top:1px solid var(--today-rule)}
  #prayerCards .prayer-time-card{border-radius:0;min-height:48px}
  #prayerCards .prayer-time-card:last-child{border-end-start-radius:12px;border-end-end-radius:12px}
  #prayerCards .prayer-time-card.passed :is(.prayer-name,.prayer-hour,.period),html[data-theme=night] #prayerCards .prayer-time-card.passed :is(.prayer-name,.prayer-hour,.period){color:var(--past-prayer)!important}
  #prayerCards .prayer-time-card.passed .prayer-bell{color:var(--past-prayer)!important}
  #todayView .date-return-slot{position:relative;flex:none;min-height:28px;height:28px;margin:-8px 0 0}
  #todayView .date-return-slot .date-return{position:absolute;top:-8px;left:50%;transform:translateX(-50%);min-height:44px;white-space:nowrap;font-size:.8125rem}
}
@media(max-width:720px) and (max-height:720px){
  :root{--rhythm-gap:10px}
  #todayView .hero-content{padding:6px 12px 10px}
  #todayView .hero-kicker{min-height:22px;font-size:.75rem}
  #todayView .hero-kicker .sky-scene{height:22px;width:22px}
  #todayView .hero-main{margin-top:0;gap:8px}
  #todayView .hero-main .sky-scene{height:22px;width:22px}
  #todayView .next-name h2{font-size:1.65rem}
  #todayView .hero-time{font-size:1.9rem}
  #todayView .hero-next-footer{margin:8px -12px 0;padding:6px 12px}
  #todayView .hero-next-footer .countdown-wrap{font-size:.75rem}
  .day-thread{margin-top:4px}
  .day-thread-track{height:24px}
  .day-thread-labels{display:none}
  #todayView .timetable-heading{padding:2px 4px}
  #todayView .date-nav{min-height:44px}
  #prayerCards{grid-template-rows:repeat(6,minmax(44px,1fr))}
  #prayerCards .prayer-time-card{min-height:44px;padding-block:0}
}
@media(prefers-reduced-motion:reduce){.day-thread *{transition:none!important}}

#prayerCards .prayer-name .prayer-until{font:400 .75rem/1.4 var(--sans);white-space:nowrap;color:#286b54!important}
#prayerCards .prayer-until::before{content:" · ";white-space:pre}
html[data-theme=night] #prayerCards .prayer-name .prayer-until{color:#accfbb!important}