/* The city prayer-times pages (website/prayer-times/). */

/* ---------- The sky: the app's sky for the prayer whose time it is ----------
   Colours from the app's SkyPalette. The page's head script sets data-sky
   on <html> before anything is drawn; prayer-times.js keeps it current.
   The new sky fades in on top, and the old one leaves only once it's
   covered. */
.pt-page .sky-layer { opacity: 0; transition: opacity 1.6s ease 1.6s; }
html:not([data-sky]) .pt-page .sky-layer[data-layer="asr"],
html[data-sky="fajr"] .pt-page .sky-layer[data-layer="fajr"],
html[data-sky="dhuhr"] .pt-page .sky-layer[data-layer="dhuhr"],
html[data-sky="asr"] .pt-page .sky-layer[data-layer="asr"],
html[data-sky="maghrib"] .pt-page .sky-layer[data-layer="maghrib"],
html[data-sky="isha"] .pt-page .sky-layer[data-layer="isha"] { opacity: 1; z-index: 1; transition-delay: 0s; }
.sky-layer[data-layer="fajr"] { background: linear-gradient(180deg, #141A45 0%, #2A2C66 50%, #4E447E 78%, #5E4A7E 100%); }
.sky-layer[data-layer="dhuhr"] { background: linear-gradient(180deg, #5DB8F2 0%, #BDE6FF 60%, #E9F7FF 100%); }
.sky-layer[data-layer="asr"] { background: linear-gradient(180deg, #F2BC5E 0%, #FFE0A3 55%, #FFF1D2 100%); }
.sky-layer[data-layer="maghrib"] { background: linear-gradient(180deg, #A99BE6 0%, #D8B5E0 45%, #FFD3B8 100%); }
.sky-layer[data-layer="isha"] { background: linear-gradient(180deg, #0E1233 0%, #1C1F4F 60%, #2C2A63 100%); }
/* Fajr: the sun still under the hills. Dhuhr: small and high. Asr: lower,
   golden. Maghrib: setting. Isha: a crescent moon. */
.sky-layer[data-layer="fajr"] .sun { width: 150px; height: 150px; right: 18%; bottom: calc(max(26vh, 150px) * 0.5 - 100px); background: #FFD27A; box-shadow: 0 0 120px 60px rgba(255, 210, 122, 0.45); }
.sky-layer[data-layer="dhuhr"] .sun { width: 96px; height: 96px; right: 12%; top: 11vh; background: #FFE27A; box-shadow: 0 0 0 24px rgba(255, 242, 168, 0.45), 0 0 120px 50px rgba(255, 242, 168, 0.6); }
.sky-layer[data-layer="asr"] .sun { width: 140px; height: 140px; right: 10%; top: 14vh; background: #FFE58F; box-shadow: 0 0 0 30px rgba(255, 236, 170, 0.35), 0 0 120px 50px rgba(255, 230, 150, 0.45); }
.sky-layer[data-layer="maghrib"] .sun { width: 170px; height: 170px; right: 16%; bottom: 6vh; background: #FFB98C; box-shadow: 0 0 100px 50px rgba(255, 170, 140, 0.45); }
.sky-layer[data-layer="isha"] .sun { width: 80px; height: 80px; right: 12%; top: 12vh; background: transparent; box-shadow: 16px -12px 0 0 #F3E7C9; }
.sky-layer[data-layer="fajr"] .star { opacity: 0.5; }
.sky-layer[data-layer="maghrib"] .cloud { background: rgba(255, 236, 242, 0.62); }
/* Under the night skies the page stays a warm, light card, not a grey one. */
html[data-sky="fajr"] .pt-page .doc, html[data-sky="isha"] .pt-page .doc { background: rgba(255, 250, 246, 0.98); transition: background 1.6s ease; }
/* On a phone the card covers the upper sky, where a sun or moon would only
   peek out from behind it; the sky's colours and the low suns stay. */
@media (max-width: 560px) {
  .sky-layer[data-layer="dhuhr"] .sun, .sky-layer[data-layer="asr"] .sun, .sky-layer[data-layer="isha"] .sun { display: none; }
  .sky-layer .sun { transform: scale(0.7); transform-origin: bottom right; }
}
@media (prefers-reduced-motion: reduce) { .pt-page .sky-layer { transition: none; } }

/* ---------- Today ---------- */
.pt-card { margin: 22px 0 10px; padding: 20px 20px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 24px; }
.pt-date { margin: 0; font-weight: 800; font-size: 15px; color: var(--ink-faint); }
.pt-hijri { white-space: nowrap; }
.doc .pt-next { margin: 4px 0 14px; font-weight: 800; font-size: 19px; color: var(--ink); }
.doc .pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pt-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name time" "until until" "bar bar"; gap: 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid transparent; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .pt-row { grid-template-columns: 9.5em auto 1fr; grid-template-areas: "name time until" "bar bar bar"; align-items: baseline; } }
.pt-row.on { border-color: var(--amber); background: var(--gold-dim); }
/* No prayer in its time (sunrise to Dhuhr, or before Fajr): the next one, outlined only. */
.pt-row.next { border-color: var(--amber); }
.pt-name { grid-area: name; font-weight: 800; font-size: 17px; color: var(--ink); }
.pt-name em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--button-ink); background: var(--button); border-radius: 8px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.pt-row.next .pt-name em { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber); }
.pt-time { grid-area: time; font-weight: 900; font-size: 22px; color: var(--ink); text-align: right; }
@media (min-width: 560px) { .pt-time { text-align: left; } }
.pt-until { grid-area: until; font-size: 14px; color: var(--ink-faint); }
.pt-until b { color: var(--ink); font-weight: 800; }
/* On a phone the Islamic date, and the time left, get their own lines. */
@media (max-width: 559px) { .pt-hijri, .pt-left { display: block; } .pt-hijri .pt-sep, .pt-left .pt-sep { display: none; } }
/* What's left of the prayer's time, running down to the next. */
.pt-bar { grid-area: bar; display: block; height: 5px; margin-top: 10px; border-radius: 5px; background: rgba(176, 122, 30, 0.18); overflow: hidden; }
.pt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--amber); transition: width 0.6s ease; }
.doc .pt-tomorrow, .doc .pt-together { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-dim); }
.pt-together a { font-weight: 800; }
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pt-share { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 800; color: var(--button-ink); background: var(--button); border: 0; border-radius: 14px; padding: 10px 16px; cursor: pointer; }
.pt-share svg { width: 18px; height: 18px; flex: none; }
.pt-share-note { font-size: 14px; font-weight: 700; color: var(--ink-faint); }

/* ---------- Method and Asr: one line, folded ---------- */
/* A plain line, not one of the site's question boxes. */
.pt-settings { margin: 10px 0 4px; background: none; border: 0; border-radius: 0; }
.pt-settings summary { display: block; padding: 6px 0; font-size: 14px; font-weight: 400; color: var(--ink-faint); }
.pt-settings summary::after { content: none; }
.pt-settings summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.pt-settings summary .pt-change { margin-left: 6px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.pt-settings summary .pt-change::after { content: " ▾"; font-size: 11px; }
.pt-settings[open] summary .pt-change::after { content: " ▴"; }
.pt-settings-body { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 6px 0 4px; }
.doc .pt-settings-body p { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--ink-faint); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.seg button { font: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink-dim); background: transparent; border: 0; border-radius: 10px; padding: 7px 11px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--button); color: var(--button-ink); }

/* ---------- The month ---------- */
.pt-month-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.doc .pt-month-head h2 { margin: 0 auto 0 0; }
.pt-month-head button, .pt-more { font: inherit; font-weight: 800; font-size: 14px; color: var(--ink); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 12px; padding: 7px 12px; cursor: pointer; }
.pt-more { display: block; width: 100%; margin-top: 10px; padding: 10px 12px; }
.pt-month-wrap { overflow-x: auto; margin-top: 12px; }
table.pt-month { width: 100%; min-width: 520px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14.5px; }
table.pt-month th { text-align: left; font-size: 12.5px; font-weight: 800; color: var(--ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
table.pt-month td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
@media (max-width: 560px) { table.pt-month { min-width: 0; font-size: 12.5px; } table.pt-month td, table.pt-month th { padding: 6px 5px; } }
table.pt-month tr.today td { background: var(--gold-dim); font-weight: 800; }
table.pt-month.folded tbody tr:not(.wk) { display: none; }

/* ---------- Qibla ---------- */
.qibla { display: flex; gap: 16px; align-items: center; margin: 12px 0; }
.qibla svg { width: 92px; height: 92px; flex: none; }
.doc .qibla p { margin: 0; }
.qibla b { font-size: 26px; color: var(--ink); }

/* ---------- Questions, folded ----------
   The site's own question boxes (styles.css, as on Support). */
.pt-faq { margin-top: 12px; }
.pt-faq summary { font-weight: 700; }
.doc .pt-other { margin-top: 18px; }

/* ---------- The app ---------- */
.pt-app { margin-top: 36px; padding: 20px 22px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--raised); border: 1px solid var(--line); border-radius: 22px; }
.pt-app img { width: 56px; height: 56px; border-radius: 13px; }
.doc .pt-app h2 { margin: 0 0 6px; }
.doc .pt-app p { margin: 0 0 8px; }
.pt-app .waitlist { margin: 12px 0 0; max-width: 460px; text-align: left; }
@media (max-width: 560px) { .pt-app { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; } }

/* ---------- Print: the month only, all of it ---------- */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .pt-month-head button, .pt-more, .sky, .site-header, .site-footer { display: none !important; }
  table.pt-month { min-width: 0; font-size: 11pt; }
  table.pt-month.folded tbody tr { display: table-row; }
  table.pt-month tr.today td { background: none; }
  .print-note { display: block !important; }
}
.print-note { display: none; margin-top: 10px; font-size: 10pt; color: #574A86; }