/* Prayer times: the Fajr page. Only what this page adds to styles.css; colours are the shared tokens
   (the widget drawings use the app's own widget colours, which are the same tokens). */

/* Section anchors clear the sticky header */
section[id] { scroll-margin-top: 76px; }

.page-hero .glance { gap: 14px 26px; }

/* The reminders capture keeps a sliver of the Dynamic Island at its top edge; the arch hides it */
.screen img[src$='reminders.jpg'] { clip-path: inset(1.6% 0 0 0); }

/* A little less air between the parts of this long page */
.section { padding: 88px 0; }
@media (max-width: 720px) { .section { padding: 64px 0; } }
.section h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
.rows > li > div > p + p { margin-top: 8px; }

/* ── 01 · The methods and what Automatic picks ── */
.methods { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px 64px; margin-top: 64px; align-items: start; }
.methods > div > p { margin-top: 12px; color: var(--muted); max-width: 34em; }
.method-list { list-style: none; counter-reset: m; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.method-list li { counter-increment: m; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.method-list li::before { content: counter(m, decimal-leading-zero); font-family: var(--display); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); padding-top: 4px; }
.auto-table { font-size: 14.5px; }
.methods .table-wrap { margin-top: 22px; }
.auto-table tbody tr:last-child td { font-weight: 500; }
.cities { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cities summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font-weight: 500; }
.cities summary::-webkit-details-marker { display: none; }
.cities summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s; }
.cities[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.cities .rows { border-top-color: var(--line); margin-bottom: 8px; }
.cities .rows > li { grid-template-columns: 170px minmax(0, 1fr); padding: 12px 0; gap: 16px; }
.cities .rows > li > b:first-child { font-size: 12.5px; }
.cities .rows > li p { font-size: 15px; }
@media (max-width: 920px) { .methods { grid-template-columns: minmax(0, 1fr); margin-top: 48px; } }

/* ── 02 · Compare the methods ── */
.deep-band .section-head h2 { color: var(--on-deep); }
.compare { padding: 26px; color: var(--ink); }
.compare-controls { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 18px 22px; align-items: end; }
.compare fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.compare legend { padding: 0; margin-bottom: 6px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.compare .choice span { padding: 9px 16px; }
.date-row { display: flex; gap: 8px; }
.date-row input { flex: 1; }
.date-row .btn { padding: 9px 14px; background: var(--bg); }
.compare-status { margin: 22px 0 4px; font-size: 16.5px; min-height: 1.6em; }
.compare-meta { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.swipe-hint { display: none; }
.compare-status b { font-weight: 600; }
.compare-table { min-width: 720px; }
.compare-table caption { padding-bottom: 8px; }
.compare-table thead th:first-child { position: sticky; left: 0; background: var(--sheet); z-index: 2; }
.compare-table th[scope='row'] { position: sticky; left: 0; z-index: 1; background: var(--sheet); min-width: 230px; max-width: 290px; font-weight: 400; box-shadow: 1px 0 0 var(--line); }
.compare-table td { white-space: nowrap; font-size: 16px; vertical-align: middle; }
.m-name { display: block; font-weight: 600; line-height: 1.3; }
.m-how { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.m-pick { display: block; position: relative; margin-top: 6px; padding-left: 15px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--deep); }
.m-pick::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--brass) 25%, transparent); }
.compare-table tr.picked > * { background: var(--brass-soft); }
.compare-table tr.picked > th { box-shadow: inset 4px 0 0 var(--c), 1px 0 0 var(--line); }
.compare-table tr.picked td { font-weight: 600; }
.compare-spread { margin-top: 16px; font-size: 15px; }
.compare-note { margin-top: 8px; font-size: 13.5px; color: var(--muted); max-width: 60em; }
.compare .note { margin-top: 14px; }
html:not(.js) .compare-controls, html:not(.js) .compare-status, html:not(.js) .compare-meta, html:not(.js) .swipe-hint, html:not(.js) .compare-wrap, html:not(.js) .compare-spread, html:not(.js) .compare-note { display: none; }
/* The hint shows only while the table is wider than its box (the script sets .overflows) */
.compare.overflows .swipe-hint { display: block; margin: -8px 0 10px; font-size: 12.5px; color: var(--muted); }
/* Tablets too: three controls in a row leave the date field narrower than its input and Today button,
   and the 720px table no longer fits its box */
@media (max-width: 900px) {
  .compare-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare-controls > .field:first-child { grid-column: 1 / -1; }
  table.data.compare-table { min-width: 0; }
  table.data.compare-table th, table.data.compare-table td { padding: 10px 8px; }
  table.data.compare-table thead th { letter-spacing: 0.08em; font-size: 11px; }
  table.data.compare-table th[scope='row'], table.data.compare-table thead th:first-child { min-width: 132px; max-width: 140px; padding-left: 12px; }
  table.data.compare-table td { font-size: 14.5px; }
  table.data.compare-table td:last-child, table.data.compare-table thead th:last-child { padding-right: 12px; }
  .m-name { font-size: 14px; }
  .m-how { font-size: 11.5px; }
  .m-pick { font-size: 12px; }
}
@media (max-width: 760px) {
  .compare { padding: 18px 14px; border-radius: 22px; }
}
@media (max-width: 420px) {
  .compare-controls { grid-template-columns: minmax(0, 1fr); }
}

/* ── 03 · Match your mosque ── */
.more.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 920px) { .more.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .more.four { grid-template-columns: minmax(0, 1fr); } }
.csv { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.csv .points { margin-top: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; }
.sample { margin: 0; display: grid; gap: 10px; }
.sample pre { margin: 0; background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 0 16px 16px 0; padding: 18px 22px; overflow-x: auto; font: 500 13.5px/1.8 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); white-space: pre; }
.sample figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 920px) { .csv { margin-top: 48px; } .csv .points { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .sample pre { font-size: 12px; padding: 14px 16px; } }

/* ── 04 · Adhan and reminders ── */
.check { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px 56px; align-items: start; }
.check-head p { margin-top: 12px; color: var(--muted); }
.check-list { list-style: none; counter-reset: c; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.check-list li { counter-increment: c; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-list li::before { content: counter(c); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--c); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.check-list b { font-weight: 600; }
.check-list span { color: var(--muted); font-size: 15.5px; }
.check-foot { grid-column: 2; font-size: 15px; color: var(--muted); margin-top: -8px; }
.os { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.os > div { padding: 26px 32px 6px 0; }
.os > div + div { padding: 26px 0 6px 32px; border-left: 1px solid var(--line); }
.os .points { margin-top: 16px; }
@media (max-width: 920px) {
  .check { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .check-foot { grid-column: auto; margin-top: 0; }
  .os { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .os > div, .os > div + div { padding: 24px 0 8px; border-left: 0; }
  .os > div + div { border-top: 1px solid var(--line); margin-top: 16px; }
}

/* ── 05 · The sun and the Qibla ── */
.sun { margin-top: 72px; padding: 28px; }
.sun-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 18px 40px; align-items: end; }
.sun-head p { margin-top: 10px; color: var(--muted); max-width: 38em; }
.sun-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 40px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
/* At the Kaaba there are no sun moments: the facts take the whole width (the script sets .solo) */
.sun-body.solo { grid-template-columns: minmax(0, 1fr); }
.sun-body.solo .qibla-facts { max-width: 44em; }
.qibla-facts { margin: 0; display: grid; gap: 14px; }
.qibla-facts dt { font-family: var(--display); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.qibla-facts dd { margin: 3px 0 0; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.moments .label { display: block; margin-bottom: 10px; letter-spacing: 0.16em; }
.moments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.moments li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.moments li b { font-family: var(--display); font-weight: 400; font-size: 20px; font-variant-numeric: tabular-nums; }
/* Moments already gone: muted text on the card itself, inside a dashed rule (and "Earlier today." in words) */
.moments li.past { background: transparent; border: 1px dashed var(--line); padding: 11px 13px; }
.moments li.past b, .moments li.past span { color: var(--muted); }
.moments li em { font-style: normal; color: var(--muted); font-size: 14px; }
.moments li.none { grid-template-columns: minmax(0, 1fr); }
.zenith { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--muted); }
.zenith b { color: var(--ink); font-weight: 600; }
.zenith span { color: var(--ink); }
html:not(.js) .sun-body, html:not(.js) .sun-city { display: none; }
@media (max-width: 760px) {
  .sun { padding: 20px 16px; border-radius: 22px; }
  .sun-head, .sun-body { grid-template-columns: minmax(0, 1fr); }
  .moments li { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
}

/* ── 06 · Widgets, drawn from the app's widget layouts ── */
.screens { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 28px; align-items: start; }
.screen { margin: 0; display: grid; gap: 14px; }
.screen figcaption { font-size: 14.5px; color: var(--muted); }
.screen figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.wall { border-radius: 30px; padding: 22px; min-height: 330px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px; border: 1px solid var(--line); overflow: hidden; }
.wall.day { background: linear-gradient(160deg, color-mix(in srgb, var(--sunrise) 55%, var(--bg)), color-mix(in srgb, var(--fajr) 38%, var(--bg))); }
.wall.dusk { background: linear-gradient(160deg, color-mix(in srgb, var(--asr) 30%, var(--bg)), color-mix(in srgb, var(--maghrib) 45%, var(--bg))); }
.wall.night { background: linear-gradient(175deg, var(--isha), color-mix(in srgb, var(--fajr) 70%, var(--isha))); flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: stretch; gap: 0; padding: 12px 16px 18px; color: var(--on-deep); }
.w { background: var(--sheet); border-radius: 22px; padding: 14px 15px; box-shadow: 0 18px 36px -24px rgba(36, 33, 28, 0.55); display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.w-top { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; margin-bottom: auto; }
.w-brand { color: var(--brand); font-weight: 600; letter-spacing: 0.04em; }
.w-sub { font-size: 11px; color: var(--muted); }
.w-name { font-size: 21px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.w-name .ar { font-weight: 400; font-size: 17px; color: var(--gold); margin-left: 4px; }
.w-time { font-size: 14px; color: var(--ink); }
.w-time.gold { color: var(--gold); font-size: 15px; }
.w-count { font-size: 12.5px; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }
.w-then { font-size: 11px; color: var(--muted); margin-top: 2px; }
.w-small { width: 150px; height: 150px; }
.w-medium { width: 100%; max-width: 320px; height: 150px; }
.w-android { width: 100%; max-width: 250px; height: 170px; border-radius: 20px; }
.w-top + .w-sub { margin-top: auto; }
.island { display: flex; justify-content: space-between; align-items: center; gap: 22px; background: var(--ink); color: var(--on-deep); border-radius: 999px; padding: 7px 14px; min-width: 190px; font-size: 12.5px; font-weight: 600; }
.island .i-name { color: color-mix(in srgb, var(--brand) 55%, var(--on-deep)); }
.island .i-count { color: var(--sunrise); font-variant-numeric: tabular-nums; }
.l-inline { margin-top: 22px; font-size: 13px; font-weight: 500; opacity: 0.9; }
.l-clock { font-family: var(--display); font-size: 64px; line-height: 1.05; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.live { margin-top: auto; width: 100%; background: color-mix(in srgb, var(--sheet) 94%, transparent); color: var(--muted); border-radius: 20px; padding: 12px 14px; display: grid; gap: 4px; font-size: 12px; }
.live .w-top { margin: 0; }
.live-row { display: flex; align-items: baseline; gap: 8px; }
.live-row .w-name { font-size: 18px; }
.live-row .ar { color: var(--gold); font-size: 15px; }
.live-time { margin-left: auto; color: var(--ink); font-size: 15px; }
.live-row .w-count { margin-left: auto; font-size: 14px; font-weight: 600; }
.drawn { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
#widgets .rows { margin-top: 56px; }
@media (max-width: 1060px) {
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The third drawing takes the whole row: its wall under the first column, its caption beside it */
  .screen:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; align-items: center; }
}
@media (max-width: 640px) {
  .screens { grid-template-columns: minmax(0, 1fr); }
  .screen:nth-child(3) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wall { min-height: 0; }
  .wall.night { min-height: 330px; }
}

/* ── 07 · Places and the Hijri date ── */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: start; }
.pair > div > p { margin-top: 12px; color: var(--muted); }
.shift { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; max-width: 460px; }
.shift li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sheet); }
.shift li.calc { border-color: var(--c); box-shadow: inset 0 0 0 0.5px var(--c); }
.shift b { font-size: 14px; font-weight: 600; }
.shift span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.shift li.calc span { color: var(--ink); }
.shift span:empty { display: none; }
.shift-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
html:not(.js) .js-only { display: none; }
@media (max-width: 920px) { .pair { grid-template-columns: minmax(0, 1fr); } }