/* /prayer/ page — builds on styles.css tokens (light + dark, RTL/LTR) */
.pr-body { background: var(--bg); }
.pr-nav a.on { color: var(--accent); font-weight: 800; }
.pr-lang { display: inline-flex; gap: 4px; }
.pr-lang a { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border); text-decoration: none; color: var(--text-dim); font-size: .8rem; }
.pr-lang a.on { background: var(--green); color: #1B1E15; border-color: transparent; font-weight: 800; }
.pr .hdr .theme-toggle { margin-inline-start: 6px; }

.pr-hero { padding: 22px 0 8px; background: var(--glow); }
.pr-hero h1 { margin: 6px 0 6px; font-size: clamp(1.45rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1.35; }
.pr-lede { margin: 0 0 14px; color: var(--text-dim); font-size: .96rem; max-width: 62ch; }
.pr-fine { margin: 8px 0 0; font-size: .76rem; color: var(--text-mute); line-height: 1.75; }
.pr-sub { margin: -4px 0 12px; color: var(--text-mute); font-size: .85rem; }

/* the three dates */
.pr-dates { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pr-date { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 128px; }
.pr-date small { color: var(--text-mute); font-size: .72rem; font-weight: 600; }
.pr-date b { font-size: 1rem; font-weight: 800; }
.pr-date-main { background: var(--green); border-color: transparent; color: #1B1E15; justify-content: center; }
.pr-date-main span { font-size: 1.1rem; font-weight: 800; }

.pr-sec { padding-block: 12px; }
.pr-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; min-width: 0; }
.pr-h2 { margin: 0 0 12px; font-size: 1.12rem; font-weight: 800; }
.pr-h2 small { font-size: .74rem; font-weight: 600; color: var(--text-mute); margin-inline-start: 8px; }
.pr-h3 { margin: 14px 0 8px; font-size: .9rem; font-weight: 800; color: var(--text-dim); }

/* controls */
.pr-controls { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 18px; align-items: end; }
.pr-field { display: grid; gap: 6px; min-width: 0; font-size: .78rem; color: var(--text-mute); }
.pr-field > span { font-weight: 600; }
.pr-field select, .pr-conv select, .pr-conv input {
  font: inherit; font-size: .95rem; color: var(--text); background: var(--inset); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 11px; min-width: 0; width: 100%; height: 44px; box-sizing: border-box;
}
.pr-field-city { grid-column: span 5; order: 1; }
.pr-loc { order: 2; grid-column: span 3; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; width: 100%; box-sizing: border-box; }
.pr-loc[disabled] { opacity: .6; }
.pr-f-method { grid-column: span 4; order: 3; }
.pr-controls > .pr-msg, .pr-controls > .pr-controls-note { order: 9; }
.pr-f-asr { grid-column: span 6; order: 4; }
.pr-f-clock { grid-column: span 3; order: 5; }
.pr-f-beep { grid-column: span 3; order: 6; }
.pr-seg { display: flex; width: 100%; height: 44px; box-sizing: border-box; background: var(--inset); border: 1px solid var(--border); border-radius: 99px; padding: 3px; }
.pr-seg button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 600; color: var(--text-dim); padding: 0 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-seg button.on { background: var(--green); color: #1B1E15; }
@media (max-width: 960px) {
  .pr-field-city { grid-column: span 8; } .pr-loc { grid-column: span 4; }
  .pr-f-method, .pr-f-asr { grid-column: span 12; }
  .pr-f-clock, .pr-f-beep { grid-column: span 6; }
}
@media (max-width: 560px) {
  .pr-field-city, .pr-loc { grid-column: span 12; }
  .pr-seg button { font-size: .74rem; padding: 0 6px; }
}
.pr-controls-note, .pr-msg { grid-column: 1 / -1; margin: 0; }
.pr-msg { padding: 8px 12px; border-radius: var(--r-sm); background: var(--chip-fill); border: 1px solid var(--chip-border); font-size: .85rem; }
.pr-msg.bad { background: var(--live-tint); border-color: var(--live-tint-border); }

/* countdown + today */
.pr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pr-next {
  border-radius: var(--r-lg); padding: 22px 22px 18px; color: #16200A;
  background: linear-gradient(135deg, var(--green-bright), #8DBD1C); box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.pr-next::after { content: ""; position: absolute; inset-inline-end: -40px; inset-block-start: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pr-next small { font-weight: 700; opacity: .75; }
.pr-next h2 { margin: 2px 0 6px; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; }
.pr-count { font-size: clamp(2.5rem, 9vw, 4.2rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: .01em; }
.pr-next-at { margin-top: 8px; font-size: .95rem; font-weight: 600; }
.pr-bar { margin-top: 14px; height: 6px; border-radius: 99px; background: rgba(22,32,10,.18); overflow: hidden; }
.pr-bar i { display: block; height: 100%; width: 0; background: #16200A; border-radius: 99px; transition: width 1s linear; }

.pr-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pr-times li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r); background: var(--inset); border: 1px solid transparent; font-weight: 700; }
.pr-times li.minor { opacity: .85; font-weight: 600; }
.pr-tv { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pr-times li.past { opacity: .5; }
.pr-times li.next { opacity: 1; background: var(--chip-fill); border-color: var(--green); }
.pr-times li.next .pr-pn::after { content: " ●"; color: var(--accent); font-size: .7rem; }

/* month */
.pr-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.pr-month-head .pr-h2 { margin: 0; margin-inline-end: auto; }
.pr-pager { display: inline-flex; align-items: center; gap: 8px; }
.pr-pager button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1.2rem; line-height: 1; }
.pr-pager button:hover { border-color: var(--green); }
.pr-pager b { min-width: 9ch; text-align: center; font-size: .9rem; }
html[dir="rtl"] .pr-pager button span { display: inline-block; transform: scaleX(-1); }
.pr-table-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; min-width: 620px; }
.pr-table th, .pr-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.pr-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--text-mute); font-size: .74rem; font-weight: 700; z-index: 1; }
.pr-table tbody th { text-align: start; font-weight: 600; position: sticky; inset-inline-start: 0; background: var(--surface); min-width: 150px; z-index: 1; }
.pr-table tbody th b { font-size: 1rem; margin-inline-end: 4px; }
.pr-table tbody th span { color: var(--text-dim); }
.pr-table tbody th small { display: block; color: var(--text-mute); font-size: .68rem; font-weight: 500; }
.pr-table td { font-variant-numeric: tabular-nums; }
.pr-table tr.fri th, .pr-table tr.fri td { background: var(--inset); }
.pr-table tr.today th, .pr-table tr.today td { background: var(--chip-fill); font-weight: 800; box-shadow: inset 0 -2px 0 var(--green); }

/* converter */
.pr-conv { display: grid; gap: 10px; }
.pr-conv-row { display: grid; grid-template-columns: 74px 84px minmax(0, 1.4fr) 100px; gap: 8px; align-items: center; }
.pr-conv-row b { font-size: .9rem; }
.pr-conv input[type=number] { text-align: center; font-weight: 800; direction: ltr; -moz-appearance: textfield; }
.pr-conv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-conv-foot .pr-msg { grid-column: auto; padding: 6px 12px; }
.pr-conv-foot .pr-msg:empty { display: none; }

/* city links */
.pr-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pr-cities a { display: inline-block; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-size: .84rem; text-decoration: none; }
.pr-cities a:hover { border-color: var(--green); color: var(--text); }
.pr-cities a.on { background: var(--green); color: #1B1E15; border-color: transparent; font-weight: 800; }

.pr-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.pr-faq summary { cursor: pointer; font-weight: 700; }
.pr-faq details p { margin: 8px 0 0; color: var(--text-dim); line-height: 1.85; }

@media (max-width: 860px) {
  .pr-main { grid-template-columns: minmax(0, 1fr); }
  .pr-nav { display: none; }
}
@media (max-width: 560px) {
  .pr-hero { padding-top: 14px; }
  .pr-panel { padding: 14px; }
  .pr-dates { gap: 8px; }
  .pr-date { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); padding: 8px 12px; }
  .pr-date-main { flex-basis: 100%; }
  .pr-conv-row { grid-template-columns: 64px minmax(0, 1fr) 88px; gap: 6px; }
  .pr-conv-row b { grid-column: 1 / -1; }
  .pr-date-main { padding-block: 6px; }
  .pr-pager { width: 100%; justify-content: space-between; }
  .pr-month-head .pr-seg { order: 3; }
}
@media (prefers-reduced-motion: reduce) { .pr-bar i { transition: none; } }