/* ==========================================================================
   Muslim Hands · Prayer times
   One page: today (a sky that follows the time of day), timetable, Qibla,
   Ramadan giving, mosques, events, key dates. Brand tokens match the other demos.
   ========================================================================== */

:root {
  --blue: 54 185 223;
  --yellow: 248 175 58;
  --red: 238 50 46;
  --navy: 8 66 116;
  --green: 37 121 82;
  --header: 37 187 219;
  --gold: 251 189 49;
  --ink: 30 30 36;
  --ink-soft: 71 68 72;
  --muted: 100 104 112;
  --off: 247 248 249;
  --tint: 240 247 250;
  --white: 255 255 255;
  --night: 6 26 51;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-h: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-ar: 'Amiri', 'Traditional Arabic', serif;

  --page: 1180px;
  --gutter: clamp(16px, 5vw, 40px);
  --space: clamp(56px, 8vw, 104px);
  --header-h: 60px;
  --toc-h: 52px;

  --radius: 16px;
  --radius-brand: 12px 6px 12px 6px;
  --radius-media: 22px 10px 22px 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --line: rgb(var(--ink) / 0.1);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.06), 0 16px 34px -20px rgb(0 0 0 / 0.38);
  --shadow-lg: 0 6px 16px rgb(0 0 0 / 0.08), 0 34px 70px -30px rgb(0 0 0 / 0.5);
}

@media (min-width: 900px) { :root { --header-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--toc-h) + 16px);
}

body {
  margin: 0;
  background: rgb(var(--white));
  color: rgb(var(--ink));
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }

:where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

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

.u-sr {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.Skip {
  position: fixed; inset: 8px auto auto 8px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: rgb(var(--ink)); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 200ms;
}
.Skip:focus { transform: none; }

.Wrap { inline-size: min(100% - var(--gutter) * 2, var(--page)); margin-inline: auto; }
.Wrap--mid { inline-size: min(100% - var(--gutter) * 2, 840px); }

.Section { position: relative; padding-block: var(--space); }
.Section--tint { background: rgb(var(--tint)); }

.Eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-block-end: 12px;
  color: rgb(var(--green));
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.Eyebrow::before { content: ''; inline-size: 20px; block-size: 2px; background: rgb(var(--gold)); }
.Eyebrow--gold { color: rgb(var(--gold)); }

.Head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 32px; margin-block-end: clamp(24px, 4vw, 40px);
}
.Head__title { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); }

.Demo { color: rgb(var(--muted)); font-size: 0.8125rem; }
.Demo--center { text-align: center; }

/* ---------- Buttons (the theme's sliding two-tone hover, no lift) ---------- */

.Btn {
  --btn-bg: rgb(var(--gold));
  --btn-bg-2: color-mix(in srgb, #fff 20%, rgb(var(--gold)));
  --btn-fg: rgb(var(--ink));
  --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 50px; padding: 0 20px;
  border: 2px solid var(--btn-border); border-radius: var(--radius-brand);
  background: linear-gradient(to right, var(--btn-bg-2) 0%, var(--btn-bg-2) 50%, var(--btn-bg) 50%, var(--btn-bg) 100%);
  background-position: calc(100% + 5px) 50%;
  background-size: calc(200% + 20px) 100%;
  color: var(--btn-fg);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out;
}
.Btn svg { inline-size: 18px; block-size: 18px; fill: currentColor; flex: none; }
.Btn:hover { background-position: -5px 50%; }
.Btn--navy { --btn-bg: rgb(var(--navy)); --btn-bg-2: color-mix(in srgb, #000 20%, rgb(var(--navy))); --btn-fg: #fff; }
.Btn--ghost { --btn-bg: rgb(var(--white)); --btn-bg-2: rgb(var(--off)); --btn-border: rgb(0 0 0 / 0.1); }
.Btn--light { --btn-bg: rgb(255 255 255 / 0.1); --btn-bg-2: rgb(255 255 255 / 0.24); --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.35); }
.Btn--sm { min-block-size: 42px; padding: 0 16px; font-size: 0.9375rem; }
.Btn--block { inline-size: 100%; }

.Link {
  color: rgb(var(--navy)); font-weight: 600; font-size: 0.9375rem;
  transition: color 200ms;
}
.Link:hover { color: rgb(var(--green)); }

/* ---------- Header ---------- */

.Header {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgb(var(--header)); color: #fff;
}
.Header.is-scrolled { box-shadow: 0 10px 28px -20px rgb(var(--navy) / 0.9); }

.Header__bar { display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); block-size: var(--header-h); }

.Brand { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 12px); min-inline-size: 0; margin-inline-end: auto; text-decoration: none; }
.Brand__mark { inline-size: clamp(36px, 8vw, 50px); flex: none; }
.Brand__word { inline-size: clamp(112px, 34vw, 196px); min-inline-size: 0; }

.Header__nav { display: none; }
.Header__nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.Header__nav a {
  display: block; padding: 10px clamp(8px, 0.9vw, 14px); border-radius: 8px;
  color: rgb(var(--ink)); font-size: clamp(0.9375rem, 0.62rem + 0.42vw, 1.0625rem); font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: background-color 200ms;
}
.Header__nav a:hover { background: rgb(255 255 255 / 0.22); }
.Header__nav a[aria-current='page'] { background: rgb(255 255 255 / 0.28); }

.Burger {
  display: grid; align-content: center; gap: 5px;
  inline-size: 42px; block-size: 42px; padding: 0 10px;
  border-radius: 10px; background: rgb(255 255 255 / 0.18);
}
.Burger span { display: block; block-size: 2px; border-radius: 2px; background: rgb(var(--ink)); transition: transform 300ms var(--ease), opacity 200ms; }
.Burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.Burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.Burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.Menu { background: rgb(var(--navy)); padding-block: 8px 20px; }
.Menu__label { margin: 10px 0 6px; color: rgb(255 255 255 / 0.6); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.Menu__list { margin: 0; padding: 0; list-style: none; }
.Menu__list a { display: block; padding: 12px 0; border-block-end: 1px solid rgb(255 255 255 / 0.12); font-family: var(--font-h); font-size: 1.125rem; font-weight: 600; text-decoration: none; }

@media (min-width: 1100px) {
  .Brand { margin-inline-end: 0; }
  .Header__nav { display: block; margin-inline: auto; }
  .Burger, .Menu { display: none !important; }
}

/* ---------- Sky (today) ---------- */

.Sky {
  --sky-a: #0b5f8c;
  --sky-b: #1aa3cf;
  --sky-c: #7fd3ea;
  --sun: 251 189 49;
  position: relative;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.Sky[data-period='night']   { --sky-a: #04142a; --sky-b: #0a2a52; --sky-c: #163f72; }
.Sky[data-period='fajr']    { --sky-a: #121c45; --sky-b: #4a3f7d; --sky-c: #d98a7c; }
.Sky[data-period='morning'] { --sky-a: #0d6a98; --sky-b: #1f9ccb; --sky-c: #8fd6ea; }
.Sky[data-period='day']     { --sky-a: #0b5f8c; --sky-b: #1890bd; --sky-c: #4fc0e2; }
.Sky[data-period='asr']     { --sky-a: #12507f; --sky-b: #3b80a8; --sky-c: #e7a85a; }
.Sky[data-period='maghrib'] { --sky-a: #241d4f; --sky-b: #8a3d6b; --sky-c: #ef8a4c; }
.Sky[data-period='isha']    { --sky-a: #081a3c; --sky-b: #1d2a63; --sky-c: #4b3a7a; }

.Sky__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 58%, var(--sky-c) 100%);
  transition: background 1200ms;
}

.Sky__stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 78% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 6% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 60%, #fff 50%, transparent 51%);
  opacity: 0;
  transition: opacity 1200ms;
}

.Sky[data-period='night'] .Sky__stars,
.Sky[data-period='isha'] .Sky__stars { opacity: 0.85; }
.Sky[data-period='fajr'] .Sky__stars { opacity: 0.4; }

.Sky__glow {
  position: absolute; inset: auto -20% -60% 20%; block-size: 90%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.22), transparent 70%);
}

.Sky__inner { padding-block: clamp(20px, 4vw, 36px) clamp(28px, 5vw, 48px); }

.Sky__bar { display: flex; flex-wrap: wrap; gap: 10px; }

.Chip {
  display: inline-flex; align-items: center; gap: 10px;
  min-block-size: 48px; padding: 6px 14px 6px 10px;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-align: start;
  transition: background 200ms, border-color 200ms;
}
.Chip:hover { background: rgb(255 255 255 / 0.22); border-color: rgb(255 255 255 / 0.6); }
.Chip svg { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.Chip > span:not(.Chip__action) { display: grid; line-height: 1.2; }
.Chip__main { font-weight: 600; }
.Chip__sub { font-size: 0.75rem; opacity: 0.8; }
.Chip__action { padding: 4px 10px; border-radius: 999px; background: rgb(var(--gold)); color: rgb(var(--ink)); font-size: 0.8125rem; font-weight: 600; }
.Chip--method .Chip__sub { order: -1; }

.Sky__grid {
  display: grid; align-items: center;
  gap: clamp(8px, 2vw, 32px);
  margin-block-start: clamp(20px, 3vw, 32px);
}

.Sky__title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); }
.Sky__date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block-start: 10px; font-size: 1.0625rem; opacity: 0.92; }
.Sky__dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.Sky__date small { font-size: 0.8125rem; opacity: 0.8; }
@media (max-width: 600px) { .Sky__dot { display: none; } .Sky__date span { inline-size: 100%; } .Arc__label, .Arc__time { display: none; } }

.Next { margin-block-start: clamp(20px, 3vw, 30px); }
.Next__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.Next__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-block-start: 4px; }
.Next__name { font-family: var(--font-h); font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); font-weight: 700; line-height: 1; }
.Next__time { font-family: var(--font-h); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.92; }
.Next__count { margin-block-start: 6px; font-size: 1.125rem; }
.Next__count b { font-variant-numeric: tabular-nums; }

.Ramadan {
  display: inline-flex; align-items: center; gap: 12px;
  margin-block-start: clamp(18px, 3vw, 26px);
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-brand);
  background: rgb(var(--night) / 0.38);
  border: 1px solid rgb(var(--gold) / 0.55);
  text-decoration: none;
  transition: background 200ms;
}
.Ramadan:hover { background: rgb(var(--night) / 0.55); }
.Ramadan > span:not(.Ramadan__moon) { display: grid; line-height: 1.25; }
.Ramadan b { color: rgb(var(--gold)); }
.Ramadan span span { font-size: 0.875rem; opacity: 0.9; }
.Ramadan > svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.Ramadan__moon {
  inline-size: 28px; block-size: 28px; border-radius: 50%; flex: none;
  box-shadow: inset -7px 3px 0 0 rgb(var(--gold));
  transform: rotate(-20deg);
}

/* Arc: the sun's path through the day */
.Arc { margin: 0; }
.Arc__svg { inline-size: 100%; block-size: auto; overflow: visible; }
.Arc__horizon { stroke: rgb(255 255 255 / 0.35); stroke-width: 1.5; }
.Arc__ground { fill: rgb(0 0 0 / 0.14); }
.Arc__path { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 2.5; stroke-linecap: round; }
.Arc__future { fill: none; stroke: rgb(255 255 255 / 0.45); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.Arc__dot { fill: var(--sky-b); stroke: #fff; stroke-width: 2; }
.Arc__dot.is-past { fill: #fff; }
.Arc__label { fill: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; }
.Arc__time { fill: rgb(255 255 255 / 0.8); font-family: var(--font); font-size: 13px; font-variant-numeric: tabular-nums; }
.Arc__sun { fill: rgb(var(--sun)); }
.Arc__halo { fill: rgb(var(--sun) / 0.25); }
.Arc__moon { fill: #f4f1e6; }

/* Six times */
.Times {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: clamp(18px, 3vw, 28px) 0 0; padding: 0; list-style: none;
}
.Time {
  position: relative;
  display: grid; gap: 2px;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background 300ms, border-color 300ms, color 300ms;
}
.Time__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.Time__name { font-weight: 600; }
.Time__ar { font-family: var(--font-ar); font-size: 1.125rem; line-height: 1; opacity: 0.8; }
.Time__at { font-family: var(--font-h); font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.Time__sub { font-size: 0.8125rem; opacity: 0.85; }
.Time.is-past { opacity: 0.62; }
.Time.is-now { background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.6); }
.Time.is-next { background: #fff; border-color: #fff; color: rgb(var(--navy)); opacity: 1; }
.Time__flag {
  position: absolute; inset: -9px 12px auto auto;
  padding: 2px 8px; border-radius: 999px;
  background: rgb(var(--gold)); color: rgb(var(--ink));
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.Time--sunrise .Time__at { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem); }

.Sky__note { margin-block-start: 14px; font-size: 0.8125rem; opacity: 0.85; }

@media (min-width: 700px) {
  .Times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .Sky__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .Times { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- On this page ---------- */

.Toc {
  position: sticky; inset-block-start: var(--header-h); z-index: 40;
  background: rgb(var(--white) / 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}
.Toc__inner { display: flex; gap: 6px; overflow-x: auto; padding-block: 8px; scrollbar-width: none; }
.Toc__inner::-webkit-scrollbar { display: none; }
.Toc a {
  flex: none; padding: 8px 14px; border-radius: 999px;
  color: rgb(var(--ink-soft)); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background 200ms, color 200ms;
}
.Toc a:hover { background: rgb(var(--tint)); color: rgb(var(--ink)); }
.Toc a[aria-current='true'] { background: rgb(var(--navy)); color: #fff; }

/* ---------- Timetable ---------- */

.Tabs { display: inline-flex; padding: 4px; border-radius: 14px 7px 14px 7px; background: rgb(var(--off)); border: 1px solid var(--line); max-inline-size: 100%; overflow-x: auto; }
.Tabs__tab { flex: none; padding: 9px 16px; border-radius: var(--radius-brand); color: rgb(var(--ink-soft)); font-weight: 600; font-size: 0.9375rem; transition: background 250ms, color 250ms; }
.Tabs__tab:hover { color: rgb(var(--ink)); }
.Tabs__tab[aria-selected='true'] { background: rgb(var(--navy)); color: #fff; }

.Panel__intro { margin-block-end: 16px; color: rgb(var(--ink-soft)); max-inline-size: 72ch; }
.Panel__intro b { color: rgb(var(--ink)); }

.Table {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.Table table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.Table th, .Table td { padding: 12px 14px; text-align: start; white-space: nowrap; }
.Table thead th {
  position: sticky; inset-block-start: 0;
  background: rgb(var(--off));
  color: rgb(var(--muted)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  border-block-end: 1px solid var(--line);
}
.Table tbody tr { border-block-end: 1px solid var(--line); }
.Table tbody tr:last-child { border-block-end: 0; }
.Table tbody th { font-weight: 600; }
.Table .Day { display: grid; line-height: 1.25; }
.Table .Day small { color: rgb(var(--muted)); font-weight: 400; font-size: 0.8125rem; }
.Table tr.is-today { background: rgb(var(--gold) / 0.14); }
.Table tr.is-today th::after { content: 'Today'; margin-inline-start: 8px; padding: 2px 7px; border-radius: 999px; background: rgb(var(--gold)); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 2px; }
.Table tr.is-friday td.Dhuhr { color: rgb(var(--green)); font-weight: 600; }
.Table .Tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: rgb(var(--green) / 0.12); color: rgb(var(--green)); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.Table tr.is-ten { background: rgb(var(--navy) / 0.04); }
.Table tr.is-odd th { color: rgb(var(--navy)); }
.Table td.Key { font-weight: 700; color: rgb(var(--navy)); }
.Table tr.Callout td {
  padding: 14px; background: rgb(var(--navy)); color: #fff; white-space: normal;
}
.Callout__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.Callout__in p { font-weight: 500; }
.Callout__in b { color: rgb(var(--gold)); }

.Panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-start: 16px; }
.Panel__method { margin-inline-start: auto; color: rgb(var(--muted)); font-size: 0.875rem; }

/* ---------- Qibla ---------- */

.Section--navy { background: rgb(var(--navy)); color: #fff; overflow: hidden; }

.Qibla { display: grid; align-items: center; gap: clamp(28px, 5vw, 64px); }
.Qibla__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-block: 18px 10px; }
.Qibla__big > span:first-child { font-family: var(--font-h); font-size: clamp(3.6rem, 2.4rem + 5vw, 6rem); font-weight: 700; line-height: 1; color: rgb(var(--gold)); font-variant-numeric: tabular-nums; }
.Qibla__dir { font-family: var(--font-h); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 600; }
.Qibla__text { max-inline-size: 48ch; font-size: 1.0625rem; color: rgb(255 255 255 / 0.88); }
.Qibla__text b { color: #fff; }
.Qibla__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 22px; }
.Qibla__small { margin-block-start: 14px; max-inline-size: 52ch; font-size: 0.8125rem; color: rgb(255 255 255 / 0.65); }

.Compass__status:empty { display: none; }
.Compass__status {
  margin-block-start: 18px; padding: 12px 14px; border-radius: 12px;
  background: rgb(255 255 255 / 0.1); font-weight: 500;
}
.Compass__status.is-aligned { background: rgb(var(--green)); }

.Qibla__visual { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; gap: clamp(12px, 2vw, 24px); }
.Compass { position: relative; inline-size: 100%; max-inline-size: 380px; justify-self: center; }
.Compass__dial { inline-size: 100%; block-size: auto; overflow: visible; }
.Compass__rot { transition: transform 260ms linear; transform-origin: 160px 160px; }
.Compass__hint { display: block; margin-block-start: 10px; text-align: center; font-size: 0.8125rem; color: rgb(255 255 255 / 0.65); }

.Globe { inline-size: 100%; max-inline-size: 240px; justify-self: center; margin-block-end: 28px; }
@media (max-width: 600px) { .Qibla__visual { grid-template-columns: minmax(0, 1fr); } .Globe { max-inline-size: 200px; margin: 0 auto; } }
.Globe__lines path { fill: none; stroke: rgb(255 255 255 / 0.16); stroke-width: 0.8; }
.Globe__rim { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.2; }
.Globe__arc { fill: none; stroke: rgb(var(--gold)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.Globe__home circle { fill: #fff; }
.Globe__kaaba rect { fill: rgb(var(--gold)); stroke: #fff; stroke-width: 1.5; }
.Globe text { fill: #fff; font-family: var(--font); font-size: 15px; font-weight: 600; }

@media (min-width: 900px) {
  .Qibla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Ramadan giving ---------- */

.Section--night { background: linear-gradient(180deg, #04142a 0%, #0a2a52 70%, #0e3566 100%); color: #fff; overflow: hidden; }
.Night { position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 20%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 92% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 40%, #fff 50%, transparent 51%);
  opacity: 0.7;
}
.Night__moon {
  position: absolute; inset: clamp(30px, 6vw, 70px) clamp(20px, 8vw, 120px) auto auto;
  inline-size: clamp(70px, 10vw, 130px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: inset calc(clamp(70px, 10vw, 130px) * -0.26) calc(clamp(70px, 10vw, 130px) * 0.1) 0 0 rgb(var(--gold));
  transform: rotate(-24deg);
  opacity: 0.9;
}

.Count { position: relative; display: grid; gap: 28px; align-items: end; margin-block-end: clamp(32px, 5vw, 52px); }
.Count__title { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); max-inline-size: 16ch; }
.Count__title span { color: rgb(var(--gold)); font-variant-numeric: tabular-nums; }
.Count__text { margin-block-start: 14px; max-inline-size: 56ch; font-size: 1.0625rem; color: rgb(255 255 255 / 0.86); }
.Count__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.Count__steps li { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); }
.Count__steps b { font-family: var(--font-h); font-size: 1.25rem; font-weight: 600; }
.Count__steps span { font-size: 0.8125rem; color: rgb(255 255 255 / 0.75); }

@media (min-width: 980px) { .Count { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
@media (max-width: 560px) { .Count__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.Gifts { position: relative; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.Gift {
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: #fff; color: rgb(var(--ink));
}
.Gift__img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.Gift__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.Gift__tag { color: rgb(var(--green)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.Gift__title { font-size: 1.375rem; }
.Gift__text { color: rgb(var(--ink-soft)); }
.Gift__text--small { font-size: 0.8125rem; }
.Gift__link {
  display: inline-flex; align-items: center; gap: 8px; margin-block-start: auto; padding-block-start: 8px;
  color: rgb(var(--navy)); font-weight: 600; text-decoration: none;
}
.Gift__link svg { inline-size: 16px; block-size: 16px; fill: currentColor; transition: transform 300ms var(--ease); }
.Gift__link:hover svg { transform: translateX(4px); }
.Gift__link:hover { color: rgb(var(--green)); }
.Gift__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-block-start: auto; }
.Gift__link--btn { align-self: flex-start; font-size: 0.9375rem; }

.Gift--text { background: rgb(255 255 255 / 0.96); }
.Rates { display: grid; gap: 8px; margin: 6px 0; }
.Rates div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgb(var(--tint)); }
.Rates dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--muted)); }
.Rates dd { margin: 0; }
.Rates b { font-family: var(--font-h); font-size: 1.375rem; color: rgb(var(--navy)); }

.Gift--wide { grid-column: 1 / -1; display: grid; background: rgb(255 255 255 / 0.06); color: #fff; border: 1px solid rgb(var(--gold) / 0.4); }
.Gift--wide .Gift__tag { color: rgb(var(--gold)); }
.Gift--wide .Gift__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.Gift--wide .Gift__text { color: rgb(255 255 255 / 0.85); max-inline-size: 56ch; }
.Gift--wide .Gift__body { padding: clamp(22px, 3.5vw, 36px); gap: 12px; }
.Gift__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-block-start: 8px; }
.Gift__sum { font-size: 1.0625rem; }
.Gift__sum b { font-family: var(--font-h); font-size: 1.5rem; color: rgb(var(--gold)); }

.Amounts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; }
.Amount { position: relative; }
.Amount input { position: absolute; opacity: 0; pointer-events: none; }
.Amount span {
  display: grid; place-items: center; min-inline-size: 72px; min-block-size: 46px; padding: 0 16px;
  border: 2px solid rgb(255 255 255 / 0.3); border-radius: var(--radius-brand);
  font-weight: 600; cursor: pointer; transition: background 200ms, border-color 200ms, color 200ms;
}
.Amount span:hover { border-color: rgb(255 255 255 / 0.7); }
.Amount input:checked + span { background: rgb(var(--gold)); border-color: rgb(var(--gold)); color: rgb(var(--ink)); }
.Amount input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.Nights {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; gap: 6px;
  padding: clamp(18px, 3vw, 30px);
  background: rgb(0 0 0 / 0.18);
}
.Nights__n { display: grid; justify-items: center; gap: 6px; font-size: 0.75rem; color: rgb(255 255 255 / 0.7); }
.Nights__bar { inline-size: 100%; max-inline-size: 26px; border-radius: 6px 6px 3px 3px; background: rgb(255 255 255 / 0.25); }
.Nights__n.is-odd .Nights__bar { background: rgb(var(--gold)); }
.Nights__n.is-odd { color: #fff; font-weight: 600; }
.Nights__star { font-size: 0.75rem; line-height: 1; color: rgb(var(--gold)); }

@media (min-width: 980px) { .Gift--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }

.Gift--plan { background: rgb(var(--gold)); }
.Gift__col { display: grid; gap: 8px; align-content: start; }
@media (min-width: 980px) {
  .Gift--plan { grid-column: span 2; }
  .Gift--plan .Gift__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 32px; }
  .Gift--plan .Gift__title { font-size: 1.75rem; }
}
.Gift--plan .Gift__tag { color: rgb(var(--navy)); }
.Gift--plan .Gift__text { color: rgb(var(--ink)); }
.Signup { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 6px; }
.Signup input {
  flex: 1 1 180px; min-block-size: 50px; padding: 0 14px;
  border: 2px solid rgb(var(--ink) / 0.15); border-radius: var(--radius-brand); background: #fff;
}
.Signup input:focus { outline: none; border-color: rgb(var(--navy)); }
.Signup.is-invalid input { border-color: rgb(var(--red)); }
.Signup__done { font-weight: 500; }

/* ---------- Mosques ---------- */

.Mosques { display: grid; gap: 20px; align-items: start; }
.Mosques__map {
  block-size: clamp(320px, 52vw, 560px);
  border-radius: var(--radius-media);
  overflow: hidden; background: rgb(var(--tint));
  box-shadow: var(--shadow-md);
  z-index: 0;
}
.Mosques__side { display: grid; gap: 14px; }
.Mosques__count { color: rgb(var(--muted)); font-size: 0.9375rem; }

.Verify { padding: 14px 16px; border-radius: 14px; background: rgb(var(--tint)); }
.Verify__title { font-weight: 600; margin-block-end: 8px; }
.Verify__key { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: rgb(var(--ink-soft)); }
.Verify__key .Status { margin-inline-end: 6px; }

.Status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.Status--ok { background: rgb(var(--green) / 0.12); color: rgb(var(--green)); }
.Status--ok::before { content: '✓'; }
.Status--wait { background: rgb(var(--yellow) / 0.2); color: rgb(150 90 0); }
.Status--sample { background: rgb(var(--navy) / 0.08); color: rgb(var(--navy)); }

.List { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; max-block-size: 520px; overflow-y: auto; }
.Place {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  text-align: start; inline-size: 100%;
  transition: border-color 200ms, background 200ms;
}
.Place:hover, .Place.is-active { border-color: rgb(var(--navy) / 0.45); background: rgb(var(--tint)); }
.Place__n { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: rgb(var(--navy)); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.Place__name { font-family: var(--font-h); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.Place__addr { grid-column: 2; color: rgb(var(--muted)); font-size: 0.8125rem; }
.Place__meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-block-start: 4px; font-size: 0.8125rem; }
.Place__dist { font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--navy)); }
.Place__go { color: rgb(var(--green)); font-weight: 600; text-decoration: none; }
.Place__go:hover { text-decoration: none; color: rgb(var(--navy)); }

.Pin { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: rgb(var(--navy)); border: 2px solid #fff; box-shadow: 0 4px 10px rgb(0 0 0 / 0.3); }
.Pin span { transform: rotate(45deg); color: #fff; font: 700 12px/1 var(--font); }
.Pin.is-active { background: rgb(var(--gold)); }
.Pin.is-active span { color: rgb(var(--ink)); }
.Me { inline-size: 18px; block-size: 18px; border-radius: 50%; background: rgb(var(--header)); border: 3px solid #fff; box-shadow: 0 0 0 6px rgb(var(--header) / 0.3); }
.leaflet-container { font-family: var(--font); }
.leaflet-tile-pane { filter: saturate(0.55) brightness(1.04); }
.Place__meta .Link { font-size: 0.8125rem; font-weight: 500; color: rgb(var(--muted)); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.875rem; }
.leaflet-popup-content b { font-family: var(--font-h); font-size: 1rem; }

@media (min-width: 980px) {
  .Mosques { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .Mosques__map { position: sticky; inset-block-start: calc(var(--header-h) + var(--toc-h) + 16px); }
}

/* ---------- Events ---------- */

.Filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 18px; }
.Filter {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-weight: 600; font-size: 0.9375rem; color: rgb(var(--ink-soft));
  transition: background 200ms, border-color 200ms, color 200ms;
}
.Filter:hover { border-color: rgb(var(--navy) / 0.4); }
.Filter[aria-pressed='true'] { background: rgb(var(--navy)); border-color: rgb(var(--navy)); color: #fff; }

.Events { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.Event {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px;
  padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
}
.Event__date { display: grid; place-content: center; text-align: center; block-size: 72px; border-radius: 14px 6px 14px 6px; background: rgb(var(--navy)); color: #fff; line-height: 1.05; }
.Event__date b { font-family: var(--font-h); font-size: 1.6rem; }
.Event__date span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.Event--mh .Event__date { background: rgb(var(--header)); color: rgb(var(--ink)); }
.Event__body { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
.Event__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.Event__title { font-size: 1.1875rem; line-height: 1.2; }
.Event__meta { color: rgb(var(--muted)); font-size: 0.875rem; }
.Event__text { font-size: 0.9375rem; color: rgb(var(--ink-soft)); }
.Event__cat { color: rgb(var(--green)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.Events__empty { grid-column: 1 / -1; display: grid; justify-items: start; gap: 10px; padding: 24px; border: 2px dashed rgb(var(--ink) / 0.12); border-radius: 18px; background: #fff; }
.Events__empty b { font-family: var(--font-h); font-size: 1.25rem; }
.Events__note { margin-block-start: 18px; max-inline-size: 80ch; color: rgb(var(--muted)); font-size: 0.875rem; }
.Events__note b { color: rgb(var(--ink)); }

/* ---------- Key dates ---------- */

.Dates { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.DateRow {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px 18px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff;
}
.DateRow__cal { display: grid; place-content: center; text-align: center; block-size: 76px; border-radius: 14px 6px 14px 6px; background: rgb(var(--tint)); line-height: 1.05; }
.DateRow__cal b { font-family: var(--font-h); font-size: 1.75rem; color: rgb(var(--navy)); }
.DateRow__cal span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--muted)); }
.DateRow__main { display: grid; gap: 2px; min-inline-size: 0; }
.DateRow__title { font-size: 1.25rem; }
.DateRow__sub { color: rgb(var(--muted)); font-size: 0.875rem; }
.DateRow__note { font-size: 0.9375rem; color: rgb(var(--ink-soft)); }
.DateRow__in { font-weight: 600; color: rgb(var(--green)); font-size: 0.875rem; }
.DateRow__give { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-radius: 12px; background: rgb(var(--gold) / 0.14); font-size: 0.9375rem; }
.DateRow__give a { color: rgb(var(--navy)); font-weight: 700; text-decoration: none; white-space: nowrap; }
.DateRow__give a:hover { color: rgb(var(--green)); }
.DateRow.is-big .DateRow__cal { background: rgb(var(--navy)); }
.DateRow.is-big .DateRow__cal b, .DateRow.is-big .DateRow__cal span { color: #fff; }

@media (min-width: 900px) {
  .DateRow { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.1fr); }
  .DateRow__give { grid-column: auto; }
}

.Dates__note { margin-block-start: 16px; color: rgb(var(--muted)); font-size: 0.875rem; max-inline-size: 80ch; }

/* ---------- FAQ ---------- */

.Faq { margin-block-start: 24px; border-block-start: 1px solid var(--line); }
.Faq__item { border-block-end: 1px solid var(--line); }
.Faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-h); font-weight: 600; font-size: 1.125rem;
}
.Faq__item summary::-webkit-details-marker { display: none; }
.Faq__item summary::after { content: '+'; display: grid; place-items: center; flex: none; inline-size: 30px; block-size: 30px; border-radius: 50%; background: rgb(var(--header) / 0.15); color: rgb(var(--navy)); font-family: var(--font); font-size: 1.25rem; transition: transform 300ms var(--ease); }
.Faq__item[open] summary::after { transform: rotate(45deg); }
.Faq__item p { padding: 0 0 18px; max-inline-size: 68ch; color: rgb(var(--ink-soft)); }

/* ---------- Footer ---------- */

.Footer { padding-block: 40px 96px; background: rgb(var(--ink)); color: rgb(255 255 255 / 0.72); font-size: 0.875rem; }
.Footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block-end: 24px; border-block-end: 1px solid rgb(255 255 255 / 0.12); }
.Footer__brand { display: flex; align-items: center; gap: 10px; }
.Footer__brand img:first-child { inline-size: 42px; }
.Footer__brand img:last-child { inline-size: 160px; }
.Footer__social { display: flex; gap: 8px; }
.Footer__social a { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: #fff; transition: background-color 200ms; }
.Footer__social a:hover { background: rgb(var(--blue)); }
.Footer__social svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.Footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.Footer__links a { color: #fff; text-decoration: none; }
.Footer__legal { margin-block-start: 22px; max-inline-size: 70ch; line-height: 1.6; }

@media (min-width: 900px) { .Footer { padding-block-end: 40px; } }

/* ---------- Dock (mobile) ---------- */

.Dock {
  position: fixed; inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 16px;
  background: rgb(var(--night) / 0.94); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  transform: translateY(0); transition: transform 400ms var(--ease), opacity 300ms;
}
.Dock.is-hidden { transform: translateY(150%); opacity: 0; }
.Dock__next { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.Dock__label { font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; }
.Dock__next b { font-family: var(--font-h); font-size: 1.125rem; }
.Dock__in { color: rgb(var(--gold)); font-size: 0.875rem; font-weight: 600; }

@media (min-width: 900px) { .Dock { display: none; } }

/* ---------- Sheets (dialogs) ---------- */

.Sheet {
  inline-size: min(100% - 24px, 560px); max-block-size: min(100% - 24px, 820px);
  padding: 0; border: 0; border-radius: 22px;
  background: #fff; color: rgb(var(--ink));
  box-shadow: var(--shadow-lg);
}
.Sheet::backdrop { background: rgb(var(--night) / 0.6); backdrop-filter: blur(3px); }
.Sheet[open] { animation: sheet-in 380ms var(--ease); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.Sheet__inner { display: grid; gap: 16px; padding: clamp(20px, 4vw, 30px); }
.Sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.Sheet__title { font-size: 1.5rem; }
.Sheet__close { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: rgb(var(--off)); font-size: 1.5rem; line-height: 1; }
.Sheet__close:hover { background: rgb(var(--tint)); }
.Sheet__lede { color: rgb(var(--ink-soft)); }
.Sheet__label { color: rgb(var(--muted)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 600px) {
  .Sheet { inline-size: 100%; max-inline-size: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-block-size: 92%; }
}

.Search { position: relative; }
.Search svg { position: absolute; inset: 50% auto auto 14px; inline-size: 20px; block-size: 20px; translate: 0 -50%; color: rgb(var(--muted)); }
.Search input { inline-size: 100%; min-block-size: 54px; padding: 0 14px 0 44px; border: 2px solid rgb(var(--ink) / 0.14); border-radius: var(--radius-brand); font-size: 1.0625rem; }
.Search input:focus { outline: none; border-color: rgb(var(--header)); box-shadow: 0 0 0 4px rgb(var(--header) / 0.2); }

.Locate { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgb(var(--tint)); text-align: start; transition: background 200ms; }
.Locate:hover { background: rgb(var(--header) / 0.18); }
.Locate svg { inline-size: 26px; block-size: 26px; color: rgb(var(--navy)); flex: none; }
.Locate > span { display: grid; }
.Locate span span { color: rgb(var(--muted)); font-size: 0.8125rem; }

.Results { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; max-block-size: 340px; overflow-y: auto; }
.Result { display: flex; align-items: center; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 11px 12px; border-radius: 10px; text-align: start; }
.Result:hover, .Result[aria-selected='true'] { background: rgb(var(--tint)); }
.Result b { font-weight: 600; }
.Result span { color: rgb(var(--muted)); font-size: 0.875rem; }
.Result small { color: rgb(var(--muted)); font-size: 0.75rem; white-space: nowrap; }
.Results__msg { padding: 10px 12px; color: rgb(var(--muted)); }

.Opts { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.Opts legend { margin-block-end: 8px; font-weight: 600; }
.Opts__list { display: grid; gap: 6px; max-block-size: 280px; overflow-y: auto; padding: 2px; }
.Opt { position: relative; display: block; }
.Opt input { position: absolute; opacity: 0; }
.Opt span { display: grid; gap: 2px; padding: 10px 12px 10px 40px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 200ms, background 200ms; }
.Opt span::before { content: ''; position: absolute; inset: 14px auto auto 14px; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid rgb(var(--ink) / 0.3); }
.Opt b { font-weight: 600; }
.Opt small { color: rgb(var(--muted)); font-size: 0.8125rem; }
.Opt em { font-style: normal; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: rgb(var(--green) / 0.12); color: rgb(var(--green)); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.Opt input:checked + span { border-color: rgb(var(--navy)); background: rgb(var(--navy) / 0.04); }
.Opt input:checked + span::before { border-color: rgb(var(--navy)); background: radial-gradient(circle, rgb(var(--navy)) 45%, transparent 50%); }
.Opt input:focus-visible + span { outline: 2px solid rgb(var(--red)); outline-offset: 2px; }

.Seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.Seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.Seg label { position: relative; }
.Seg input { position: absolute; opacity: 0; }
.Seg span { display: grid; gap: 2px; block-size: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 0.8125rem; color: rgb(var(--muted)); transition: border-color 200ms, background 200ms; }
.Seg b { color: rgb(var(--ink)); font-size: 0.9375rem; }
.Seg input:checked + span { border-color: rgb(var(--navy)); background: rgb(var(--navy) / 0.05); }
.Seg input:focus-visible + span { outline: 2px solid rgb(var(--red)); outline-offset: 2px; }

.Fields { display: grid; gap: 12px; }
.Field { display: grid; gap: 6px; }
.Field label { font-weight: 500; font-size: 0.9375rem; }
.Field input, .Field select, .Field textarea { inline-size: 100%; min-block-size: 48px; padding: 10px 12px; border: 2px solid rgb(var(--ink) / 0.12); border-radius: 10px; background: #fff; }
.Field textarea { min-block-size: 90px; resize: vertical; }
.Field input:focus, .Field select:focus, .Field textarea:focus { outline: none; border-color: rgb(var(--header)); }
.Field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.Field.is-invalid input { border-color: rgb(var(--red)); }

.Checks { padding: 14px 16px; border-radius: 14px; background: rgb(var(--tint)); }
.Checks__title { font-weight: 600; margin-block-end: 6px; }
.Checks ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 0.9375rem; color: rgb(var(--ink-soft)); }

.Sent { padding: 16px; border-radius: 14px; background: rgb(var(--green) / 0.1); }
.Sent__title { font-family: var(--font-h); font-weight: 600; font-size: 1.125rem; color: rgb(var(--green)); margin-block-end: 4px; }

.Plan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.Plan li { display: grid; gap: 2px; padding: 8px; border-radius: 10px; background: rgb(var(--tint)); text-align: center; font-size: 0.8125rem; }
.Plan li b { font-family: var(--font-h); color: rgb(var(--navy)); }
.Plan li.is-odd { background: rgb(var(--gold) / 0.3); }

/* ---------- Print ---------- */

@media print {
  .Header, .Toc, .Sky, #qibla, #ramadan, #mosques, #events, #dates, #faq, .Footer, .Dock, .Tabs, .Panel__actions { display: none !important; }
  #week { padding: 0; }
  .Table { border: 0; overflow: visible; }
  .Table th, .Table td { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}