/*
 * Prayer times (js/prayer.js, docs/adr/0017): the next prayer in the top bar (wide screens), the day
 * card on the wall's side panel, and the «وقت الصلاة» page (today's times, the quiet settings, the
 * slide preview). Interior-page language as the schedule pages: flat panels on hairlines, radius 0
 * on structure, 4px on controls. The coming prayer is marked with the brand's primary text colour,
 * like today in the calendar; colours are tokens only.
 */

body[data-view='prayer'] .actionbar { display: none; }
#view-prayer { display: grid; gap: var(--space-5); align-content: start; padding-block-end: var(--space-7); }
#view-prayer[hidden] { display: none; }
#view-prayer .page-head { padding-block-end: 0; }

/* ---------- Top bar: the next prayer and its countdown (1200px and wider) ---------- */
.prayer-pill { display: none; }
@media (min-width: 1200px) {
  .prayer-pill:not([hidden]) {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-inline-start: auto;
    padding: 6px 12px; border: 1px solid var(--fm-border); border-radius: 999px;
    font: var(--type-small); color: var(--fm-text-secondary); text-decoration: none; white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
  }
  .prayer-pill:not([hidden]) + .live-pill { margin-inline-start: 0; }
  .prayer-pill:not([hidden]) + .live-pill[hidden] + .theme-toggle { margin-inline-start: 0; }
}
@media (hover: hover) and (pointer: fine) { .prayer-pill:hover { color: var(--fm-topbar-fg); border-color: var(--fm-border-strong); } }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fm-primary-text); }
.pp-dot.is-quiet { background: var(--fm-primary-text); box-shadow: none; }
.pp-name { color: var(--fm-topbar-fg); font-weight: 600; }
.pp-left [data-count-to] { display: inline-block; min-width: 4.2ch; }

/* ---------- The wall's side panel: today ---------- */
.side-day { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--fm-border); border-radius: 10px; background: var(--fm-surface-raised); }
.side-day:empty { display: none; }
.day-date { display: grid; }
.day-date b { font: 600 13px/20px var(--fm-font); }
.day-date small { font: 400 12px/18px var(--fm-font); color: var(--fm-text-secondary); }
.day-now { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-block-start: 6px; border-block-start: 1px solid var(--fm-border); font: 400 12px/18px var(--fm-font); color: var(--fm-text-secondary); }
.day-now b { font: 600 15px/20px var(--fm-font); color: var(--fm-text); white-space: nowrap; }
.day-now.is-quiet b { color: var(--fm-primary-text); }
.day-link { justify-self: start; font: 600 12px/18px var(--fm-font); color: var(--fm-link); text-decoration: none; }
.day-link:hover { text-decoration: underline; }

/* ---------- «مواقيت اليوم» ---------- */
.pr-date { font: var(--type-small); color: var(--fm-text-secondary); }
.pr-times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; border-block-start: 1px solid var(--fm-border); border-inline-start: 1px solid var(--fm-border); }
.pr-time {
  position: relative; display: grid; gap: 2px; align-content: start; min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-inline-end: 1px solid var(--fm-border); border-block-end: 1px solid var(--fm-border);
  background: var(--fm-surface-raised);
}
.pr-name { font: var(--type-label); }
.pr-clock { font: 600 30px/40px var(--fm-font); }
.pr-quiet, .pr-sun { font: var(--type-small); color: var(--fm-text-secondary); }
.pr-quiet.is-none { color: var(--fm-disabled-text); }
.pr-tag { justify-self: start; margin-block-start: var(--space-2); padding: 1px 8px; border-radius: 999px; background: var(--fm-primary-tint); color: var(--fm-primary-text); font: 600 12px/20px var(--fm-font); }
.pr-time.is-next { box-shadow: inset 0 3px 0 var(--fm-primary-text); }
.pr-time.is-next .pr-clock { color: var(--fm-primary-text); }
.pr-time.is-quiet { background: var(--fm-primary-tint); box-shadow: inset 0 3px 0 var(--fm-primary-text); }
.pr-tag.is-quiet { background: var(--fm-primary); color: var(--fm-on-primary); }
.pr-time.is-passed :is(.pr-name, .pr-clock) { color: var(--fm-text-secondary); }
@media (max-width: 899px) { .pr-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 519px) { .pr-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The settings and the slide ---------- */
.pr-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 899px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } }
.pr-form { display: grid; gap: var(--space-5); }
.pr-form .form-actions { padding: 0; justify-content: flex-start; }
.pr-row { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(128px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr); align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--fm-border); }
.pr-row--head { padding-block: 0 var(--space-2); font: 600 12px/18px var(--fm-font); color: var(--fm-text-secondary); }
.pr-row-name { display: grid; font: var(--type-label); }
.pr-row-name small { font: 400 12px/16px var(--fm-font); color: var(--fm-text-secondary); }
.pr-row.is-off .pr-min { opacity: .55; }
.pr-min { display: flex; align-items: center; gap: var(--space-2); font: var(--type-small); color: var(--fm-text-secondary); }
.pr-min .input { width: 76px; }
.pr-adj .input { width: 100%; min-width: 0; }
.pr-form .input:disabled, .pr-form .seg-radio:has(input:disabled) { cursor: not-allowed; }
.pr-form .input:disabled { background: var(--fm-disabled-bg); color: var(--fm-disabled-text); box-shadow: none; }
@media (max-width: 639px) {
  .pr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-row--head { display: none; }
}

.pr-slide-panel { justify-items: start; }
.pr-slide { position: relative; display: grid; place-items: center; width: min(100%, 220px); aspect-ratio: 9 / 16; background: var(--fm-device-bg); box-shadow: 0 0 0 1px var(--fm-border); }
.pr-canvas { width: 100%; height: 100%; }
.pr-black { position: absolute; color: var(--fm-stage-text); font: var(--type-small); opacity: 0; }
.pr-slide.is-black .pr-canvas { opacity: 0; }
.pr-slide.is-black .pr-black { opacity: .7; }

/* ---------- The master switch: the whole quiet on or off ---------- */
.pr-quiet-head { align-items: center; }
.pr-master { flex: none; font-weight: 600; }
.pr-off-note {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--fm-border-strong);
  background: var(--fm-surface-raised); color: var(--fm-text-secondary); font: var(--type-small);
}
/* Off: the settings stay editable and saved, but read as dormant. */
.pr-form.is-paused .pr-rows,
.pr-form.is-paused .entry-group { opacity: 0.5; transition: opacity var(--motion-fast) var(--ease-out); }