/* The prayer tracker page (Isha). The tracker's four marks keep the app's own colours (src/theme.ts, light):
   on time #2f6b57, late = the brand gold, qada #c0662b, excused #7b68a6 at 60%, not logged = the line colour.
   The night band is the Isha band of the day, from the shared tokens. */

:root {
  --ontime: #2f6b57;
  --qada: #c0662b;
  --excused: #7b68a6;
  --on-mark: #fffaf0; /* the app's onAccent: text on a filled mark */
}

html:not(.js) .js-only { display: none !important; }

/* The two in-page links land with their heading clear of the sticky header (and of the .rise offset). */
#mode-title, #ew-title { scroll-margin-top: 130px; }

/* The hero window ends in the gap under the colour key, above the screen's date row. */

/* The marks, as ring strokes and as swatches */
.seg { fill: none; stroke-width: 6; stroke-linecap: round; }
.seg.st-ontime { stroke: var(--ontime); }
.seg.st-late { stroke: var(--gold); }
.seg.st-qada { stroke: var(--qada); }
.seg.st-excused { stroke: var(--excused); stroke-opacity: 0.6; }
.seg.st-none { stroke: var(--line); }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.sw.st-ontime, .bar .st-ontime { background: var(--ontime); }
.sw.st-late, .bar .st-late { background: var(--gold); }
.sw.st-qada, .bar .st-qada { background: var(--qada); }
.sw.st-excused { background: color-mix(in srgb, var(--excused) 60%, var(--sheet)); }
.sw.st-none { background: var(--line); }

/* ── Logging ── */
.log-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px 64px; align-items: start; }
.marks > li > b:first-child { display: flex; align-items: center; align-self: start; gap: 10px; }
.marks a { color: var(--ink); }
.where { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 26px 26px 28px; }
.where h3 { font-size: 22px; line-height: 1.2; }
.where .points { margin-top: 16px; }
@media (max-width: 920px) { .log-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── The example week: a small copy of the app's tracker card ── */
.rings-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: start; }
.ew-figure { margin: 0; display: grid; gap: 12px; }
.ew-figure figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.ew { padding: 22px 20px 20px; }
.ew-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ew-head h3 { font-size: 20px; line-height: 1.2; }
.ew-flag { flex: none; font-size: 12.5px; font-weight: 500; color: var(--ink); border: 1px dashed var(--gold); border-radius: 999px; padding: 3px 11px; }
.ew-intro { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ew-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; padding: 0 4px; }
.ew-sum b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.ew-sum span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ew-rings { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 10px; }
.ew-day { appearance: none; -webkit-appearance: none; border: 0; background: transparent; border-radius: 12px; padding: 6px 2px 5px; display: grid; justify-items: center; gap: 3px; cursor: pointer; font: inherit; color: var(--muted); }
.ew-day svg { width: 100%; max-width: 44px; height: auto; display: block; }
.ew-day span { font-family: var(--display); font-size: 12px; letter-spacing: 0.08em; }
.ew-day:hover { background: var(--bg); }
.ew-day[aria-pressed='true'] { background: var(--brass-soft); color: var(--ink); }
.ew-day:focus-visible { outline-offset: 1px; }
.ew-dayview { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ew-dayname { font-family: var(--display); font-size: 15px; letter-spacing: 0.1em; text-align: center; }
.ew-prayers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ew-prayers li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.ew-name { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; }
.ew-name .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.ew-marks { display: flex; gap: 5px; }
.ew-prayers li.four .ew-marks { width: 100%; }
.ew-prayers li.four .mk { flex: 1; padding-left: 4px; padding-right: 4px; }
.mk { font: 500 13px/1.2 var(--body); border: 1px solid var(--line); background: var(--sheet); color: var(--muted); border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.mk:hover { border-color: var(--gold); }
.mk[aria-pressed='true'] { color: var(--on-mark); }
.mk-ontime[aria-pressed='true'] { background: var(--ontime); border-color: var(--ontime); }
.mk-late[aria-pressed='true'] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.mk-qada[aria-pressed='true'] { background: color-mix(in srgb, var(--qada) 84%, var(--ink)); border-color: color-mix(in srgb, var(--qada) 84%, var(--ink)); } /* a shade darker, so its text passes AA */
.mk-excused[aria-pressed='true'] { background: var(--excused); border-color: var(--excused); }

/* The day's switch, a checkbox drawn as the app's switch */
.ew-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); cursor: pointer; }
.ew-switch-text { display: grid; gap: 2px; }
.ew-switch-text b { font-weight: 600; font-size: 15px; }
.ew-switch-text small { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ew-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ew-switch .track { flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--line); transition: background 0.2s; }
.ew-switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(36, 33, 28, 0.3); transition: transform 0.2s; }
.ew-switch input:checked + .track { background: var(--excused); }
.ew-switch input:checked + .track::after { transform: translateX(20px); }
.ew-switch input:focus-visible + .track { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ew-switch .track, .ew-switch .track::after { transition: none; } }

.ew-pp { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ew-bars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ew-bars li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13.5px; }
.ew-bars .bar { display: flex; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ew-bars .bar i { display: block; height: 100%; }
.ew-bars .bp { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.ew-bars .bd { grid-column: 2 / -1; margin-top: -5px; font-size: 12px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.ew-small { margin-top: 8px; font-size: 13px; color: var(--muted); }
.ew-key { list-style: none; margin: 14px 0 0; padding: 0 2px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.ew-key li { display: inline-flex; align-items: center; gap: 6px; }
.ew-foot { margin-top: 16px; display: flex; justify-content: center; }
.ew-foot .btn { font-size: 14px; padding: 8px 16px; }
/* On wide screens the text stays beside the taller example card as you scroll past it. */
@media (min-width: 921px) and (min-height: 760px) { .rings-split .text { position: sticky; top: 100px; } }
@media (max-width: 920px) { .rings-split { grid-template-columns: minmax(0, 1fr); } .ew-figure { max-width: 520px; width: 100%; margin-inline: auto; } }
@media (max-width: 400px) { .ew { padding: 18px 12px 16px; } .mk { padding: 7px 9px; } .ew-prayers li { padding-left: 10px; } }

/* ── Menstruation mode: the ruled grid of small items, three across ── */
.mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--sheet); }
.mode-grid > div { padding: 24px 24px 26px; }
.mode-grid b { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: 0.1em; color: var(--ink); }
.mode-grid span { margin-top: 10px; font-size: 15.5px; line-height: 1.55; }
.mode-grid a { color: var(--ink); }
.mode-note { margin-top: 28px; max-width: 760px; }
@media (max-width: 920px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mode-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Your record ── */
.record .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.record h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; margin-top: 14px; }
.record .lead { margin-top: 20px; font-size: 18px; color: var(--muted); }
@media (max-width: 920px) { .record .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ── The night, on the Isha band ── */
.night-band { background: var(--isha); color: var(--on-deep); position: relative; overflow: hidden; }
.night-band .arch-bg { position: absolute; left: -90px; right: auto; bottom: -140px; height: 560px; color: var(--on-deep); opacity: 0.06; pointer-events: none; }
@media (max-width: 920px) { .night-band .arch-bg { display: none; } }
.night-band .wrap { position: relative; }
.night-band .label { color: var(--on-deep); opacity: 0.7; }
.night-band .section-head p { color: var(--on-deep); opacity: 0.85; }
.night-band .section-head h2 em { color: var(--sunrise); }
.night-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.night-how { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(246, 241, 230, 0.4); }
.night-how li { padding: 18px 0; border-bottom: 1px solid rgba(246, 241, 230, 0.16); }
.night-how b { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: 0.1em; }
.night-how p { margin-top: 6px; opacity: 0.85; }
@media (max-width: 920px) { .night-grid { grid-template-columns: minmax(0, 1fr); } }

.night-tool { background: color-mix(in srgb, var(--on-deep) 7%, var(--isha)); border-color: rgba(246, 241, 230, 0.16); color: var(--on-deep); box-shadow: 0 40px 70px -50px rgba(0, 0, 0, 0.6); }
.night-tool .field > label { color: var(--on-deep); opacity: 0.8; }
.nt-top { display: grid; gap: 12px; }
.nt-span { font-size: 14.5px; opacity: 0.85; }
.nt-bar { position: relative; margin: 52px 0 0; padding-bottom: 30px; }
.nt-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; height: 42px; border-radius: 14px; overflow: hidden; }
.nt-track span { background: rgba(246, 241, 230, 0.1); }
.nt-track span:last-child { background: var(--sunrise); color: var(--isha); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.nt-mid { position: absolute; left: 50%; top: -6px; height: 54px; width: 2px; margin-left: -1px; background: var(--on-deep); opacity: 0.75; border-radius: 1px; }
.nt-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.nt-ticks span { position: absolute; top: 4px; white-space: nowrap; }
.nt-ticks span:nth-child(1) { left: 0; }
.nt-ticks span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.nt-ticks span:nth-child(3) { right: 0; }
.nt-pin { position: absolute; bottom: calc(100% + 4px); left: 66.67%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.nt-pin span { font-family: var(--display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sunrise); white-space: nowrap; }
.nt-pin::after { content: ''; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--isha), 0 0 0 5px var(--sunrise); }
.nt-pin.edge-r { transform: translateX(calc(-100% + 8px)); align-items: flex-end; }
.nt-pin.edge-l { transform: translateX(-8px); align-items: flex-start; }
.nt-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; }
.nt-times div { border: 1px solid rgba(246, 241, 230, 0.18); border-radius: 14px; padding: 10px 12px; }
.nt-times div.hl { border-color: var(--sunrise); }
.nt-times dt { font-size: 12.5px; opacity: 0.8; line-height: 1.3; }
.nt-times dd { margin: 4px 0 0; font-family: var(--display); font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nt-len { margin-top: 12px; font-size: 14px; opacity: 0.8; }
.nt-len span { white-space: nowrap; }
.nt-alarm { margin: 20px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid rgba(246, 241, 230, 0.18); display: grid; gap: 10px; min-width: 0; }
.nt-alarm legend { padding: 0; font-weight: 600; float: left; width: 100%; margin-bottom: 2px; }
.nt-alarm .choice span { background: transparent; border-color: rgba(246, 241, 230, 0.3); color: var(--on-deep); }
.nt-alarm .choice input:checked + span { background: var(--sunrise); border-color: var(--sunrise); color: var(--isha); }
.nt-alarm .choice input:focus-visible + span { outline-color: var(--sunrise); }
.nt-alarm [hidden] { display: none; }
.nt-next { font-size: 15px; }
.nt-note { font-size: 13px; opacity: 0.75; margin-top: -4px; }
.nt-next b { font-weight: 600; color: var(--sunrise); }
.nt-foot { margin-top: 18px; font-size: 13px; opacity: 0.75; }
.nt-foot.nt-nojs { margin-top: 0; }
.night-tool :focus-visible { outline-color: var(--sunrise); }
@media (max-width: 560px) { .nt-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } .night-tool { padding: 20px 16px; } }

/* ── The alarm ── */
.deliver { margin-top: 28px; }
.deliver > li { grid-template-columns: 110px minmax(0, 1fr); }
.more-link { margin-top: 20px; font-size: 15.5px; color: var(--muted); }
@media (max-width: 560px) { .deliver > li { grid-template-columns: minmax(0, 1fr); } }
.notifs { margin: 0; display: grid; gap: 14px; justify-items: center; }
.notif-sky { width: min(100%, 400px); border-radius: 34px; padding: 26px 16px; display: grid; gap: 10px; background: linear-gradient(180deg, var(--isha), color-mix(in srgb, var(--isha) 78%, var(--fajr))); box-shadow: 0 30px 60px -36px rgba(36, 33, 28, 0.5); }
.notif { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; background: color-mix(in srgb, var(--sheet) 94%, transparent); border-radius: 20px; padding: 12px 14px; }
.notif img { width: 40px; height: 40px; border-radius: 10px; }
.notif div { display: grid; gap: 1px; font-size: 14px; line-height: 1.35; }
.notif .app { font-size: 12px; color: var(--muted); }
.notif b { font-weight: 600; }
.notifs figcaption { font-size: 13px; color: var(--muted); text-align: center; max-width: 320px; }