/* ============================================================
   سُنّتي  ·  design system
   Tokens, then layout, then components. The one loud element is
   the prayer arc, which takes its colour from the current window.
   ============================================================ */

:root {
  /* surfaces */
  --paper: #f6f4ee;
  --raised: #fffdf8;
  --sunken: #edeae1;
  --line: #e0dbcf;
  --line-soft: #eae6dc;

  /* text */
  --ink: #16241c;
  --ink-2: #55655c;
  --ink-3: #5e6c65;
  --accent-solid: var(--accent-ink);
  --on-accent: #fffdf8;

  /* identity */
  --green: #1e6f47;
  --green-2: #2a8c5b;
  --green-wash: rgba(30, 111, 71, .08);
  --gold: #b08833;

  /* prayer windows */
  --w-fajr: #4c5da8;
  --w-fajr-ink: #4c5da8;
  --w-duha: #c98b2c;
  --w-duha-ink: #885e1e;
  --w-dhuhr: #2f7fc0;
  --w-dhuhr-ink: #26689c;
  --w-asr: #b5643a;
  --w-asr-ink: #945230;
  --w-maghrib: #a84a6b;
  --w-maghrib-ink: #9c4564;
  --w-isha: #5b4a99;
  --w-isha-ink: #5b4a99;

  /* the active window paints this */
  --accent: #1e6f47;
  --accent-wash: rgba(30, 111, 71, .1);

  --danger: #b23c3c;

  /* type */
  --ui: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --naskh: 'Amiri', 'Noto Naskh Arabic', serif;
  --quran: 'Amiri Quran', 'Amiri', serif;

  --step--1: .74rem;
  --step-0: .86rem;
  --step-1: 1rem;
  --step-2: 1.22rem;
  --step-3: 1.55rem;
  --step-4: 2.1rem;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --r-md: 20px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(22, 36, 28, .04), 0 6px 18px rgba(22, 36, 28, .05);
  --shadow-lift: 0 2px 6px rgba(22, 36, 28, .06), 0 14px 32px rgba(22, 36, 28, .1);

  --tab-h: 60px;
  --shell: 520px;
  --quran-scale: 1;
}

[data-theme='dark'] {
  --paper: #12171a;
  --raised: #1a2126;
  --sunken: #0d1215;
  --line: #2a343a;
  --line-soft: #222b31;
  --ink: #e9e6dd;
  --ink-2: #a3b0aa;
  --ink-3: #96a39b;
  --accent-solid: var(--accent);
  --on-accent: #10161a;
  --green: #45b07a;
  --green-2: #5cc78f;
  --green-wash: rgba(69, 176, 122, .12);
  --gold: #d0a84f;
  --w-fajr: #7f8fd8;
  --w-fajr-ink: #8394e0;
  --w-duha: #e0a64a;
  --w-duha-ink: #e0a64a;
  --w-dhuhr: #5ba3dd;
  --w-dhuhr-ink: #5ba3dd;
  --w-asr: #d4855c;
  --w-asr-ink: #d4855c;
  --w-maghrib: #cd7093;
  --w-maghrib-ink: #da779d;
  --w-isha: #8a79c9;
  --w-isha-ink: #9c89e3;
  --danger: #e07272;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { font-size: 16px; }

body {
  font-family: var(--ui);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--banner-room, 0px));
  -webkit-font-smoothing: antialiased;
}

/* A single geometric field behind everything, barely there. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--pattern-weight, .30);
  /* Drawn by the controller so the pattern takes the colour that was chosen,
     and so a reader who wants none gets none. */
  background-image: var(--pattern);
  background-size: var(--pattern-size, 80px 80px);
}

[data-theme='dark'] body::before { opacity: calc(var(--pattern-weight, .30) * .66); }

::selection { background: var(--accent-wash); }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- shell ---------- */

.shell { max-width: var(--shell); margin: 0 auto; position: relative; z-index: 1; }

.view { display: none; padding: var(--s4) var(--s4) var(--s6); }
.view.is-open { display: block; animation: view-in .22s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.view-head {
  margin: 0 calc(var(--s2) * -1) var(--s4);
  padding: var(--s3) var(--s3) var(--s3);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--raised) 82%, transparent);
}
.view-head h1 { font-size: var(--step-3); font-weight: 700; letter-spacing: -.01em; }
.view-head p { color: var(--ink-2); font-size: var(--step--1); margin-top: 2px; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- tab bar ---------- */

.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--raised);
  border-top: 1px solid var(--line-soft);
}

.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--ink-3); font-size: .6rem; position: relative; transition: color .18s;
}
.tab .icon { width: 22px; height: 22px; }
.tab[aria-current='page'] { color: var(--accent-ink); }
.tab[aria-current='page']::before {
  content: ''; position: absolute; top: 0; width: 26px; height: 2px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}

/* ---------- prayer arc ---------- */

/* The clock, the date and the day's times sat straight on the lattice, and a
   number over a lattice is hard to read. They now stand on a soft panel that
   lets the pattern show through faintly at its edges, so the ornament frames
   the reading rather than running under it. */
.clock {
  text-align: center; padding: var(--s3) var(--s3) var(--s4);
  margin: 0 calc(var(--s2) * -1) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  box-shadow: var(--shadow);
  position: relative; z-index: 1;
}

.clock-date {
  font-size: var(--step--1); color: var(--ink-2); display: flex;
  align-items: center; justify-content: center; gap: var(--s2);
}
.clock-date b { font-weight: 600; color: var(--ink); }
/* A date that has been nudged says so, in the colour of a warning, and a tap
   on it puts the reckoning back. Silent shifting is how a day gets lost. */
.date-adjusted {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; background: color-mix(in srgb, #b8860b 18%, transparent);
  color: #7d6124; vertical-align: middle;
}
[data-theme='dark'] .date-adjusted { color: #e0c070; }

.date-nudge {
  width: 24px; height: 24px; border-radius: 50%; color: var(--ink-3);
  display: grid; place-items: center; border: 1px solid var(--line);
}
.date-nudge:active { background: var(--sunken); }

.arc-wrap { position: relative; width: 264px; max-width: 80vw; margin: var(--s3) auto var(--s2); }
.arc { display: block; overflow: visible; z-index: 1; }
.arc-track { stroke: var(--line); stroke-width: 6; fill: none; stroke-linecap: round; }
.arc-fill { stroke: var(--accent); stroke-width: 6; fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.arc-dot { fill: var(--raised); stroke: var(--accent); stroke-width: 3; }

/* In flow, so the wrap grows to hold the words and they always sit inside
   the arch rather than under it. */
.arc-center { position: relative; z-index: 2; padding-top: 82px; text-align: center; }
.arc-label { font-size: var(--step--1); color: var(--ink-2); }
.arc-name { font-size: var(--step-2); font-weight: 700; color: var(--accent-ink); margin-top: -2px; }
.arc-count {
  font-size: var(--step-4); font-weight: 300; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; direction: ltr; line-height: 1.15;
}
.arc-at { font-size: var(--step--1); color: var(--ink-3); direction: ltr; }

/* five window strip */
.windows { display: flex; gap: 2px; margin-top: var(--s3); }
.window {
  flex: 1; text-align: center; padding: var(--s2) 2px; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.window-name { font-size: .62rem; color: var(--ink-2); }
.window-time {
  font-size: var(--step--1); font-weight: 600; direction: ltr;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.window-time .ampm { font-size: .72em; font-weight: 600; margin-inline-start: 2px; }
.window.is-now { background: var(--accent-wash); border-color: var(--accent); }
.window.is-now .window-name { color: var(--accent-ink); }
/* A prayer already passed is quieter, but a person still reads it to check the
   time they prayed, so the colour is muted rather than the whole box faded. */
.window.is-past .window-name, .window.is-past .window-time { color: var(--ink-3); }
.window.is-past .window-time { font-weight: 500; }

.place-line {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; margin-top: var(--s2); min-height: 44px; flex-wrap: wrap;
  font-size: var(--step--1); color: var(--ink-3);
}
.place-where { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.place-where .icon { width: 15px; height: 15px; color: var(--accent-ink); }
.place-how {
  padding: 3px 10px; border-radius: 999px;
  background: var(--sunken); color: var(--ink-3);
}

/* The reading under the compass, on its own ground. */
.compass-panel {
  margin: var(--s3) calc(var(--s2) * -1) 0; padding: var(--s3);
  border-radius: var(--r-md); text-align: center;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
}

/* A line of small print that has to stand on the pattern gets a ground. */
.pill { display: table; margin-inline: auto; padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--raised) 85%, transparent); }

.voice-pick { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; justify-content: flex-end; }
.voice-pick .select { flex: 1; min-width: 0; max-width: 100%; }
.voice-plain { color: var(--ink-2); font-weight: 600; padding-inline: 4px; white-space: nowrap; }
.btn.is-playing { background: var(--accent-solid); color: var(--on-accent); border-color: transparent; }
/* Label and control share the one line: the label yields first, wrapping its
   own note, and the control never takes more than two thirds. Dropping the
   control to a second line left half a row empty. */
.setting > span:first-child { flex: 1 1 0; min-width: 0; }
.setting .select, .setting .voice-pick { flex: 0 1 auto; min-width: 0; max-width: 66%; }
.setting .select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setting-note { display: block; line-height: 1.7; }
.card > .setting-note { padding: var(--s2) 0 0; }

.fold-source { font-size: .62rem; color: var(--ink-3); margin: 2px 0 var(--s2); }

/* ---------- ornament ---------- */

/* A niche, the shape a prayer hall points with. It sits behind the countdown
   and takes the colour of the hour, so the arch changes through the day. */
/* Drawn over the same square as the arc so the niche frames the countdown
   rather than swallowing it, and the crown sits clear above the apex. */
.mihrab, .arc {
  position: absolute; inset-inline: 0; top: 0; width: 100%; height: auto;
}
.mihrab { color: var(--accent); pointer-events: none; z-index: 0; overflow: visible; }
.mihrab-line { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .42; }
.mihrab-inner { opacity: .2; }
.mihrab-star { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }
/* Tall enough that the whole countdown sits inside the niche rather than
   spilling out under its base. No padding, or the niche and the arc it frames
   start at different heights and the niche stretches to cover the difference. */



/* A frieze under a heading, the eight fold knot repeated as on a tiled band. */
.section-title.has-band { display: flex; align-items: center; gap: var(--s3); }
.section-title.has-band::after {
  content: ''; flex: 1; height: 12px; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cg fill='none' stroke='%23b08833' stroke-width='1'%3E%3Crect x='6' y='0' width='12' height='12' rx='2'/%3E%3Crect x='6' y='0' width='12' height='12' rx='2' transform='rotate(45 12 6)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 24px 12px; background-repeat: repeat-x;
}

/* The name of a surah sits inside a cartouche in a printed mushaf, so it does
   here as well, with a rosette on either side. */
.surah-frame {
  position: relative; text-align: center; padding: var(--s4) var(--s6);
  margin-bottom: var(--s4);
  border: 1.5px solid var(--accent-ink); border-radius: var(--r-md);
  background:
    radial-gradient(circle at 12px 50%, var(--accent-wash) 7px, transparent 8px),
    radial-gradient(circle at calc(100% - 12px) 50%, var(--accent-wash) 7px, transparent 8px);
}
.surah-frame::before, .surah-frame::after {
  content: ''; position: absolute; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; opacity: .85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23b08833' stroke-width='1.2'%3E%3Crect x='2.5' y='2.5' width='9' height='9' rx='1'/%3E%3Crect x='2.5' y='2.5' width='9' height='9' rx='1' transform='rotate(45 7 7)'/%3E%3C/g%3E%3C/svg%3E");
}
.surah-frame::before { inset-inline-start: 8px; }
.surah-frame::after { inset-inline-end: 8px; }
.surah-frame h2 { font-family: var(--naskh); font-size: var(--step-3); font-weight: 700; }
.surah-frame p { font-size: var(--step--1); color: var(--ink-3); margin-top: 3px; }

/* ---------- reading by the page ---------- */

.page-head { flex: 1; text-align: center; }
.page-num { font-size: var(--step-1); font-weight: 700; }
.page-meta { font-size: var(--step--1); color: var(--ink-3); margin-top: 2px; }
.page-body { min-height: 60vh; }
.page-surah { margin: var(--s3) 0; }
.page-foot { text-align: center; margin-top: var(--s4); }
.page-foot-num {
  display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px;
  border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink);
  font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums;
}
.page-nav { display: flex; gap: var(--s2); margin-top: var(--s3); }
.page-nav .btn { flex: 1; }
.page-nav .btn:disabled { opacity: .4; }

.goto-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: var(--s3); }
.goto-row .btn { justify-self: start; }

/* ---------- the month timetable ---------- */

.tt-scroll { max-height: 62vh; overflow: auto; margin: 0 calc(var(--s4) * -1); }
/* On the narrowest phones the seven columns are given a touch less type. */
@media (max-width: 340px) { .tt th, .tt td { font-size: .72rem; padding-inline: 2px; } }
.tt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tt th, .tt td { padding: 9px 3px; text-align: center; font-size: var(--step--1); white-space: nowrap; }
.tt td { direction: ltr; }
.tt td .ampm { font-size: .72em; margin-inline-start: 2px; }
.tt thead th {
  position: sticky; top: 0; z-index: 1; background: var(--raised);
  font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line);
  padding-block: 11px;
}
.tt tbody th { text-align: center; font-weight: 600; padding-inline-start: var(--s4); white-space: nowrap; }
.tt-day { display: block; font-size: var(--step-0); }
.tt-hijri { display: block; font-size: .62rem; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
.tt tbody tr { border-bottom: 1px solid var(--line); }
.tt tbody tr:last-child { border-bottom: 0; }
.tt tbody tr[data-friday='1'] { background: var(--sunken); }
.tt tbody tr.is-today { background: var(--accent-wash); }
.tt tbody tr.is-today th, .tt tbody tr.is-today td { color: var(--accent-ink); font-weight: 700; }

/* ---------- turning a date ---------- */

.convert-field { display: block; }
.convert-field .setting-label { display: block; margin-bottom: 6px; }
/* The month name is the widest thing here, so it takes a whole line and the day
   and year share the next. Cut to fit it read ربيع الأو, which is no month. */
.convert-hijri { display: grid; gap: 8px; }
.convert-pair { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.convert-out {
  margin-top: 8px; font-weight: 600; color: var(--accent-ink); min-height: 1.4em;
  font-variant-numeric: tabular-nums;
}

/* ---------- the month ---------- */

.cal-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.cal-title { flex: 1; text-align: center; }
.cal-month { font-size: var(--step-1); font-weight: 700; }
.cal-span { font-size: var(--step--1); color: var(--ink-3); margin-top: 2px; }
.cal-step {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-2); background: var(--sunken); flex: none;
}
.cal-step:active { transform: scale(.94); }

.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-week { margin-bottom: 4px; }
.cal-week span {
  text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-3);
  padding-bottom: 4px;
}
/* Seven columns across a phone leave a cell of forty three pixels, a pixel
   short of a thumb, so each reaches one pixel into the four pixel gap. Two
   pixels of that gap stay free, so no cell can claim its neighbour's tap. */
.cal-cell::before { content: ''; position: absolute; inset: -1px; }
.cal-cell {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; background: var(--sunken); font-variant-numeric: tabular-nums;
}
.cal-cell.is-empty { background: none; }
.cal-num { font-size: var(--step-0); font-weight: 600; line-height: 1.1; }
.cal-greg { font-size: .68rem; color: var(--ink-3); line-height: 1; }
.cal-cell.is-today { background: var(--accent-solid); }
.cal-cell.is-today .cal-num, .cal-cell.is-today .cal-greg { color: var(--on-accent); }
.cal-cell.is-picked { box-shadow: inset 0 0 0 2px var(--accent-solid); }
.cal-dot {
  position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
}
.cal-cell.is-today .cal-dot { background: var(--on-accent); }

/* A season reads differently from a fast, so each carries its own colour. */
.cal-cell.kind-eid .cal-dot, .occasion.kind-eid { --occ: #b8860b; }
.cal-cell.kind-fast .cal-dot, .occasion.kind-fast { --occ: #2a72ad; }
.cal-cell.kind-month .cal-dot, .occasion.kind-month { --occ: #1e6f47; }
.cal-cell.kind-season .cal-dot, .occasion.kind-season { --occ: #1e6f47; }
.cal-cell.kind-night .cal-dot, .occasion.kind-night { --occ: #5b4a99; }
.cal-cell.kind-weekly .cal-dot, .occasion.kind-weekly { --occ: #8b5a3c; }
.cal-cell.has-mark .cal-dot { background: var(--occ, var(--ink-3)); }
.cal-cell.is-today.has-mark .cal-dot { background: var(--on-accent); }

.occasion {
  border-inline-start: 3px solid var(--occ, var(--line));
  padding-inline-start: var(--s3); margin-bottom: var(--s3);
}
.occasion:last-child { margin-bottom: 0; }

/* ---------- the azkar of this hour ---------- */

.now-azkar {
  width: 100%; display: flex; align-items: center; gap: var(--s3); text-align: right;
  padding: var(--s4); margin-bottom: var(--s4); border-radius: var(--r-md);
  /* a solid colour under the gradient, so a browser without color-mix inside a
     gradient still paints the card, and so the contrast of the words on it can
     be measured */
  background-color: var(--accent-solid);
  background-image: linear-gradient(135deg, var(--accent-solid), color-mix(in srgb, var(--accent-solid) 70%, #000 30%));
  color: var(--on-accent); box-shadow: var(--shadow-lift);
}
.now-azkar-glyph {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, #fff 18%, transparent);
}
.now-azkar-glyph .icon { width: 26px; height: 26px; }
.now-azkar-body { flex: 1; display: grid; gap: 2px; }
.now-azkar-kicker { font-size: .62rem; font-weight: 600; opacity: .85; letter-spacing: .02em; }
.now-azkar-title { font-size: var(--step-1); font-weight: 700; }
.now-azkar-note { font-size: var(--step--1); opacity: .9; }
.now-azkar-ring { width: 48px; height: 48px; flex: none; }
.now-azkar-ring .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.now-azkar .ring-track { stroke: color-mix(in srgb, #fff 25%, transparent); }
.now-azkar .ring-fill { stroke: var(--on-accent); }
.now-azkar.is-complete .now-azkar-ring .ring-fill { stroke: var(--on-accent); }
.fold-static { cursor: default; }

/* ---------- folding groups ---------- */

.fold {
  background: var(--raised); border-radius: var(--r-md); box-shadow: var(--shadow);
  margin-bottom: var(--s3); overflow: hidden;
}
.fold-head {
  width: 100%; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4); min-height: 56px; text-align: right;
}
.fold-head .icon { color: var(--accent-ink); flex: none; }
.fold-title { flex: 1; font-size: var(--step-0); font-weight: 700; }
.fold-tally {
  flex: none; font-size: var(--step--1); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.fold-tally.is-full { color: var(--accent-ink); font-weight: 600; }
.fold-arrow { flex: none; color: var(--ink-3); transition: transform .2s ease; }
.fold.is-open .fold-arrow { transform: rotate(180deg); }
.fold-body { display: none; padding: 0 var(--s4) var(--s4); }
.fold.is-open .fold-body { display: block; }

/* ---------- cards ---------- */

.card {
  background: var(--raised); border-radius: var(--r); padding: var(--s4);
  box-shadow: var(--shadow); margin-bottom: var(--s3);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.card-head h2 { font-size: var(--step-1); font-weight: 700; display: flex; align-items: center; gap: var(--s2); }
.card-head h2 .icon { color: var(--accent); }
.card-more { font-size: var(--step--1); color: var(--accent-ink); font-weight: 600; }

.section-title {
  font-size: var(--step--1); color: var(--ink-2); font-weight: 700; margin: var(--s5) 0 var(--s2);
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--raised) 85%, transparent);
}
.section-title.has-band { display: flex; }

/* A thumb is about eleven millimetres across, which is far wider than some of
   these controls are drawn. Rather than fatten every chip and switch and spoil
   the layout, each one reaches out an invisible touch area to meet the finger.
   Nothing moves on screen and everything becomes reachable. */
.date-nudge, .switch, .card-more, .search-hit, .tile, .foot a, .about-links a, .setting-note a { position: relative; }
.date-nudge::before, .switch::before, .card-more::before, .foot a::before, .about-links a::before, .setting-note a::before {
  content: ''; position: absolute; inset-block: -11px; inset-inline: -10px;
}
.date-nudge::before { inset: -11px; }
/* a line of small print is eighteen pixels tall, so its links reach further */
.foot a::before, .about-links a::before, .setting-note a::before { inset-block: -14px; inset-inline: -8px; }
.select { min-height: 44px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 13px var(--s4); min-height: 46px; border-radius: var(--r-sm); font-size: var(--step-0);
  font-weight: 600; background: var(--sunken); color: var(--ink); transition: transform .08s, background .18s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-solid); color: var(--on-accent); }
.btn-ghost {
  background: color-mix(in srgb, var(--raised) 78%, transparent);
  border: 1px solid var(--line); color: var(--ink-2);
}
.btn-danger { background: none; border: 1px solid var(--danger); color: var(--danger); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

.chip {
  padding: 14px 16px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line);
  font-size: var(--step--1); color: var(--ink-2); font-weight: 500; transition: all .16s;
}
.chip.is-on { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
.chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip-scroll { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex: none; }

/* ---------- home grid ---------- */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.tile {
  background: var(--raised); border-radius: var(--r); padding: var(--s4) var(--s2);
  box-shadow: var(--shadow); text-align: center; transition: transform .08s;
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
}
.tile:active { transform: scale(.96); }
.tile .icon { width: 24px; height: 24px; color: var(--accent); }
.tile-name { font-size: var(--step-0); font-weight: 600; }
.tile-note { font-size: .6rem; color: var(--ink-3); }
/* The glyph on a tile, drawn from the sprite in the colour of the section. */
.tile-glyph {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--accent-wash); color: var(--accent-ink); margin-bottom: 4px;
}
.tile-glyph .icon { width: 24px; height: 24px; stroke-width: 1.5; }

/* ---------- list rows ---------- */

.row {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3); background: var(--raised); border-radius: var(--r-sm);
  box-shadow: var(--shadow); margin-bottom: var(--s2); text-align: right;
  transition: transform .08s;
}
.row:active { transform: scale(.99); }
.row-body { flex: 1; min-width: 0; }
/* Both are spans inside a plain block, so without this the title and its note
   share a line and read as one word: القبلةاتجاه الكعبة من موقعك. */
.row-title { display: block; font-size: var(--step-0); font-weight: 600; }
.row-note { display: block; font-size: var(--step--1); color: var(--ink-3); margin-top: 2px; line-height: 1.7; }
.row-meta { font-size: var(--step--1); color: var(--ink-3); direction: ltr; font-variant-numeric: tabular-nums; }
.row-mark {
  width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-wash);
  color: var(--accent-ink); display: grid; place-items: center; font-size: var(--step--1);
  font-weight: 700; flex: none;
}

/* ---------- checkable ---------- */

.check {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3);
  background: var(--raised); border-radius: var(--r-sm); box-shadow: var(--shadow);
  margin-bottom: var(--s2); text-align: right;
}
.check-box {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line);
  display: grid; place-items: center; flex: none; transition: all .18s; color: transparent;
}
.check-box .icon { width: 14px; height: 14px; stroke-width: 3; }
.check.is-done .check-box { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
/* A line drawn through arabic cuts across the letters that join, so a done
   deed is marked by its tick and a quieter colour instead. */
.check.is-done .check-label { color: var(--ink-3); }
.check-label { flex: 1; font-size: var(--step-0); }
/* The note is a second line under the deed, not a continuation of it. Without
   this it reads as صلاة الفجر في وقتهامن صلى الصبح, two sentences run together. */
.check-note { display: block; margin-top: 3px; font-size: var(--step--1); color: var(--ink-3); line-height: 1.7; }
.check.is-done .check-note { text-decoration: none; }

/* ---------- progress ---------- */

.meter { height: 6px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .35s ease; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); font-size: var(--step--1); }
.meter-head b { font-size: var(--step-1); font-weight: 700; }

/* thirty day activity grid */
.heat { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: var(--sunken); display: block; }
.heat i[data-level='1'] { background: color-mix(in srgb, var(--accent) 30%, var(--sunken)); }
.heat i[data-level='2'] { background: color-mix(in srgb, var(--accent) 55%, var(--sunken)); }
.heat i[data-level='3'] { background: color-mix(in srgb, var(--accent) 78%, var(--sunken)); }
.heat i[data-level='4'] { background: var(--accent); }
.heat i[data-today='1'] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- revealed text ---------- */

/* The words of the mushaf are read off clean paper, as in a printed one, and the
   ornament belongs to the margin around the page rather than under the letters. */
.reader-body {
  background: var(--raised); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: var(--s4) var(--s4) var(--s5);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.ayah-block {
  font-family: var(--quran);
  font-size: calc(1.32rem * var(--quran-scale));
  line-height: 2.35;
  text-align: justify;
  /* A centred last line stretches the closing word away from its verse number,
     which reads as a broken word. Letting it sit where it falls keeps the
     number beside the words it belongs to. */
  text-align-last: start;
  color: var(--ink);
}

.ayah { cursor: pointer; border-radius: 6px; padding: 0 2px; transition: background .2s; }
.ayah.is-active { background: var(--accent-wash); }
.ayah.is-marked { background: color-mix(in srgb, var(--gold) 16%, transparent); }
/* The verse being recited, carried into view as the reciter reaches it. */
.ayah.is-reciting {
  background: var(--accent-wash);
  box-shadow: 0 0 0 2px var(--accent-solid);
  border-radius: 6px;
}

.ayah { white-space: normal; }
.ayah-num {
  display: inline-block; position: relative; width: 1.9em; height: 1.9em;
  margin-inline: .18em; vertical-align: -.5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b08833' stroke-width='1.6'%3E%3Ccircle cx='20' cy='20' r='11'/%3E%3Crect x='10' y='10' width='20' height='20' rx='2'/%3E%3Crect x='10' y='10' width='20' height='20' rx='2' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* The figure is placed by its own middle, not by a baseline that shifts with
   whatever fallback font the phone picks for a digit, so it stays centred in
   the rosette on every device. */
.ayah-num::before {
  content: attr(data-n); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-family: var(--ui); font-size: .5em;
  font-weight: 700; line-height: 1; color: var(--accent-ink); direction: ltr;
}

.basmala {
  font-family: var(--quran); text-align: center; color: var(--accent-ink);
  font-size: calc(1.4rem * var(--quran-scale)); padding: var(--s3) 0 var(--s4);
}

.sajda-mark { color: var(--gold); font-size: .7em; }

.naskh { font-family: var(--naskh); font-size: calc(1.02rem * var(--quran-scale)); line-height: 2.1; }

.source { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--s2); }

/* surah header */
.surah-head {
  text-align: center; padding: var(--s4); border-radius: var(--r);
  background: var(--raised); border: 1px solid var(--line-soft); margin-bottom: var(--s3);
}
.surah-head h2 { font-family: var(--naskh); font-size: var(--step-3); font-weight: 700; }
.surah-head p { font-size: var(--step--1); color: var(--ink-3); margin-top: 2px; }

.reader-bar {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
  position: sticky; top: 0; z-index: 20; padding: var(--s2) 0; background: var(--paper);
}

/* ---------- search ---------- */

.field {
  width: 100%; padding: 12px var(--s4); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--r-sm); outline: none;
  font-size: var(--step-0); transition: border-color .18s;
 min-height: 46px; }
.field:focus { border-color: var(--accent); }
.field::placeholder { color: var(--ink-3); }

.search-hit {
  padding: var(--s3); background: var(--raised); border-radius: var(--r-sm);
  margin-bottom: var(--s2); box-shadow: var(--shadow); width: 100%; text-align: right;
}
.search-hit-ref { display: block; font-size: var(--step--1); color: var(--accent-ink); font-weight: 600; margin-bottom: var(--s1); }
.search-hit mark { background: color-mix(in srgb, var(--gold) 30%, transparent); color: inherit; border-radius: 3px; }

[hidden] { display: none !important; }

/* ---------- reading progress ---------- */

.read-progress {
  position: sticky; top: 0; z-index: 20; height: 3px;
  background: var(--line); border-radius: 999px; margin-bottom: var(--s3);
}
.read-progress span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--accent); transition: width .2s ease-out;
}
.ayah.is-reciting {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.repeat-row { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.repeat-row label { flex: 1; font-size: var(--step--1); color: var(--ink-2); }
.repeat-row select { flex: none; min-width: 96px; }
.reader-body.is-hidden .ayah { color: transparent; text-shadow: 0 0 12px var(--ink-3); }
.reader-body.is-hidden .ayah.is-reciting,
.reader-body.is-hidden .ayah-num { color: var(--ink); text-shadow: none; }

/* ---------- banner ---------- */

.banner {
  position: fixed; inset-inline: var(--s3); bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s3));
  z-index: 60; display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  background: var(--ink); color: var(--raised); box-shadow: var(--shadow-lift);
  animation: banner-rise .24s ease-out;
}
.banner-text { flex: 1; font-size: var(--step--1); line-height: 1.5; }
.banner-act {
  flex: none; padding: 6px 14px; border-radius: 999px;
  background: var(--accent-solid); color: var(--on-accent); font-weight: 600; font-size: var(--step--1);
}
.banner-close { flex: none; color: inherit; opacity: .6; display: grid; place-items: center; }
.banner-close .icon { width: 18px; height: 18px; }
@keyframes banner-rise { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .banner { animation: none } }

/* ---------- counter ---------- */

.counter {
  text-align: center; padding: var(--s4) var(--s3) var(--s4);
  margin: 0 0 var(--s3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  box-shadow: var(--shadow);
}
.counter-value { font-size: min(4.6rem, 18vw); font-weight: 200; color: var(--accent); direction: ltr; line-height: 1; font-variant-numeric: tabular-nums; }
.counter-target { font-size: var(--step--1); color: var(--ink-3); }
.counter-phrase { font-family: var(--naskh); font-size: var(--step-2); margin: var(--s2) 0 var(--s4); }
.counter-btn {
  width: min(168px, 44vw); height: min(168px, 44vw); border-radius: 50%; margin: 0 auto;
  background: var(--accent-solid); color: var(--on-accent); font-size: var(--step-1); font-weight: 600;
  display: grid; place-items: center; box-shadow: var(--shadow-lift); transition: transform .07s;
}
.counter-btn:active { transform: scale(.93); }

.dhikr {
  background: var(--raised); border-radius: var(--r); padding: var(--s4);
  margin-bottom: var(--s3); box-shadow: var(--shadow); position: relative;
  border-inline-start: 3px solid transparent; transition: opacity .25s, border-color .25s;
}
.dhikr.is-done { opacity: .5; border-inline-start-color: var(--accent); }
.dhikr-text { font-family: var(--naskh); font-size: calc(1.05rem * var(--quran-scale)); line-height: 2.1; }
.dhikr-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); }
/* The count sits inside a ring that fills as the dhikr is said. */
.dhikr-count {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent-ink); font-weight: 700;
  font-size: var(--step-0); font-variant-numeric: tabular-nums; flex: none;
  direction: ltr; transition: transform .07s;
}
.dhikr-count:active { transform: scale(.92); }
.dhikr-count .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--sunken); stroke-width: 3.5; }
.ring-fill { fill: none; stroke: var(--accent-solid); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .25s ease; }
.dhikr-count.is-done { background: var(--accent-solid); color: var(--on-accent); }
.dhikr-count.is-done .ring { display: none; }
.dhikr-left { position: relative; }
.dhikr { cursor: pointer; }
.dhikr:active { transform: scale(.995); }
.dhikr-note { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--s2); line-height: 1.8; }
.dhikr-share {
  position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-3); background: var(--sunken); flex: none; margin-inline-start: auto;
}
/* drawn at forty, reaching to forty eight without moving anything on screen */
.dhikr-share::before { content: ''; position: absolute; inset: -4px; }
.dhikr-share:active { transform: scale(.92); }
.dhikr.is-done { opacity: .6; }

/* ---------- qibla ---------- */

.compass { width: 236px; height: 236px; margin: var(--s5) auto; position: relative; }
.compass-face {
  position: absolute; inset: 0; border-radius: 50%; background: var(--raised);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
/* When the top of the phone comes within five degrees of the qibla the face
   answers, so a person knows without reading a number. */
.compass-face.is-aligned { box-shadow: 0 0 0 3px var(--accent-solid), var(--shadow-lift); }
.compass-rose { transition: transform .18s ease-out;
   position: absolute; inset: 0; transition: transform .2s linear; }
.compass-read { text-align: center; font-size: var(--step-3); font-weight: 300; direction: ltr; font-variant-numeric: tabular-nums; }

/* ---------- misc ---------- */

.note { background: var(--accent-wash); border-radius: var(--r-sm); padding: var(--s3); font-size: var(--step--1); color: var(--ink-2); line-height: 1.7; }

.toast {
  position: fixed; inset: auto var(--s4) calc(var(--tab-h) + 20px) var(--s4); z-index: 200;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); font-size: var(--step-0); text-align: center;
  box-shadow: var(--shadow-lift); opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .2s; pointer-events: none;
  max-width: var(--shell); margin: 0 auto;
}
.toast.is-open { opacity: 1; transform: none; }

.sheet {
  position: fixed; inset: 0; z-index: 150; display: none;
  background: rgba(10, 16, 13, .5); align-items: flex-end; justify-content: center;
}
.sheet.is-open { display: flex; }
.sheet-panel {
  background: var(--raised); width: 100%; max-width: var(--shell);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto; animation: sheet-up .24s ease both;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto var(--s3); }

.player {
  position: fixed; inset: auto 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0; z-index: 55;
  max-width: var(--shell); margin: 0 auto; display: none;
  align-items: center; gap: var(--s3); padding: var(--s2) var(--s4);
  background: var(--ink); color: var(--paper);
}
.player.is-open { display: flex; }
.player-body { flex: 1; min-width: 0; }
.player-title { font-size: var(--step-0); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub { font-size: .6rem; opacity: .7; }
.player button { color: var(--paper); display: grid; place-items: center; }

.setting { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
.setting:last-child { border-bottom: none; }
.setting-label { font-size: var(--step-0); }
.setting-note { font-size: var(--step--1); color: var(--ink-3); }

.select {
  padding: 9px var(--s3); border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--raised); font-size: var(--step--1); max-width: 62%;
}

.switch { width: 46px; height: 27px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch[aria-checked='true'] { background: var(--accent); }
.switch[aria-checked='true']::after { transform: translateX(-19px); }

/* accent-color alone leaves the unfilled part of the track almost black in the
   light theme, which reads as a fault rather than a control, so the track and
   the thumb are drawn here instead. */
.slider {
  width: 100%; padding-block: 14px; min-height: 44px; background: none;
  -webkit-appearance: none; appearance: none;
}
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--line); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--raised); box-shadow: var(--shadow);
}
.slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
.slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); }
.slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--raised);
}
.slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.empty { text-align: center; color: var(--ink-3); padding: var(--s6) var(--s4); font-size: var(--step-0); }
.empty .icon { width: 34px; height: 34px; margin-bottom: var(--s3); color: var(--line); }

.skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 50%, var(--sunken) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; height: 14px; margin-bottom: var(--s2);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.foot { text-align: center; color: var(--ink-3); font-size: var(--step--1); padding: var(--s5) 0 var(--s3); line-height: 1.9; }
.foot a { color: var(--accent-ink); text-decoration: none; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-ink); font-size: .62rem; font-weight: 600; }
.badge-gold { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }

@media (min-width: 560px) {
  .grid { gap: var(--s3); }
  .view { padding: var(--s5) var(--s5) var(--s6); }
}