/* Diorama prototype — copy cards float over a fixed WebGL canvas. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('/assets/fonts/Amiri-arabic.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
  --night: #04070f;
  --green: #0d9488;
  --green-deep: #0f766e;
  --green-bright: #2dd4bf;
  --gold: #fbd34c;
  --fg: #f0fdfa;
  --fg-2: rgb(240 253 250 / 0.78);
  --fg-3: rgb(240 253 250 / 0.56);
  --hair: rgb(240 253 250 / 0.14);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --arabic: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;
  --gutter: clamp(20px, 4.5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  color: var(--fg);
  font-family: var(--sans);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; line-height: 1.9; }

/* Slim fixed site nav */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgb(4 7 15 / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 50;
}
.site-nav a { color: var(--fg); text-decoration: none; }
.site-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.site-nav__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; }
.site-nav__links { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); font-size: 0.9rem; white-space: nowrap; }
.site-nav__links a { opacity: 0.85; }
.site-nav__links a:hover { opacity: 1; }
.site-nav__links .site-nav__cta { opacity: 1; padding: 6px 14px; border: 1px solid var(--gold); border-radius: 999px; }
.site-nav__links .site-nav__cta:hover { background: rgb(251 211 76 / 0.14); }

/* Scene layers sit behind the scrolling copy */
.town { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.poster {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  /* dawn to night, top to bottom: the fallback when WebGL is unavailable or motion is reduced */
  background: linear-gradient(180deg, #0a1230 0%, #1b2a4a 24%, #e9a5a0 52%, #f0cf8c 74%, #101a3f 100%);
}
html.poster-mode .poster { display: block; }
html.poster-mode .town { display: none; }

.flight { position: relative; z-index: 1; }

.station {
  min-height: 110vh;
  display: flex;
  align-items: center;
  padding: 72px var(--gutter) 40px;
}
.station:nth-child(odd) { justify-content: flex-start; }
.station:nth-child(even) { justify-content: flex-end; }

.card {
  width: 100%;
  max-width: 420px;
  background: rgb(4 7 15 / 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 22px;
  padding: clamp(20px, 4vw, 30px);
  will-change: transform;
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--fg-2);
}
h1, h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
}
h1 em, h2 em { font-style: italic; color: var(--green-bright); }
.lede { margin: 0 0 18px; font-size: clamp(1rem, 1.2vw + 0.8rem, 1.1rem); line-height: 1.55; color: var(--fg-2); }
.ar--display { margin: 0 0 4px; font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 2; color: var(--gold); }
.ar-ref { margin: 0 0 6px; font-size: 0.9rem; color: var(--fg-2); }
.hint { margin: 14px 0 0; font-size: 0.85rem; color: var(--fg-2); }
.card > :last-child { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--night);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: var(--green-bright); }

a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Each card's app screen stands beside it, toward the middle of the viewport, as one device at
   one consistent size — never floating in the 3D scene, where it read at a random scale. */
.card { position: relative; }
.phone {
  position: absolute;
  top: 50%;
  width: clamp(150px, 13vw, 196px);
  aspect-ratio: 1080 / 2300;
  margin: 0;
  border-radius: 14% / 6.6%;
  overflow: hidden;
  border: 6px solid #0d1117;
  background: #0d1117;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.14);
  /* individual translate/rotate properties, so GSAP's pop-in transform composes with them */
  translate: 0 -50%;
  rotate: var(--tilt);
}
/* tucked against the card's inner edge (overlapping only its padding, never its text) to keep the
   middle of the screen free for the scene's subject */
.station:nth-child(odd) .phone { left: calc(100% - 14px); --tilt: 4deg; }
.station:nth-child(even) .phone { right: calc(100% - 14px); --tilt: -4deg; }
.phone img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 11% / 5.2%; }
html.poster-mode .station .phone { position: static; translate: none; rotate: none; margin-top: 16px; width: clamp(130px, 30vw, 170px); }

.foot { position: relative; z-index: 1; padding: 40px var(--gutter) 48px; text-align: center; color: var(--fg-3); background: var(--night); font-size: 0.85rem; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 14px; font-size: 0.92rem; }
.foot a { color: var(--fg); }

/* Poster mode: no scene, no pop-ins, so everything simply reads as a page */
html.poster-mode .station { min-height: auto; padding-top: 40px; padding-bottom: 40px; }
html.poster-mode .station:first-child { padding-top: 96px; }

/* Phones and portrait tablets: scene stays visible above, copy hugs the bottom edge
   (main.js narrow() mirrors this query, and lifts each scene into the sky above its card) */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
  .station,
  .station:nth-child(odd),
  .station:nth-child(even) { justify-content: center; align-items: flex-end; padding-bottom: 7vh; }
  .card { max-width: min(100%, 640px); }
  .card.card--hero { max-width: min(100%, 700px); }
  .station.station--hero { min-height: 100vh; min-height: 100svh; padding-bottom: 4vh; } /* one screen: the card sits on its bottom edge at load */
  /* small device peeking over the card's top corner, so the scene above stays visible */
  html:not(.poster-mode) .station:nth-child(odd) .phone,
  html:not(.poster-mode) .station:nth-child(even) .phone {
    top: auto; bottom: calc(100% - 10px); left: auto; right: 14px; /* overlaps the card's padding only */
    width: 86px; border-width: 4px; --tilt: 6deg; translate: none;
  }
  html.poster-mode .station,
  html.poster-mode .station:nth-child(odd),
  html.poster-mode .station:nth-child(even) { align-items: center; padding-bottom: 28px; }
}
/* short phones: the longest cards leave little sky, so the peeking phone shrinks to stay below the nav */
/* phones held sideways: barely any height, so cards sit on the bottom edge (the whole gap below
   the nav is theirs), run wider and set tighter. No inner scrolling: it would clip the phone. */
@media (orientation: landscape) and (max-height: 500px) {
  /* stations are 110vh and centred when snapped, so 5vh of each sits below the screen */
  .station { align-items: flex-end; padding-top: 60px; padding-bottom: calc(5vh + 10px); }
  .station.station--hero { min-height: 100vh; min-height: 100svh; padding-bottom: 10px; }
  .card { max-width: 540px; padding: 14px 20px; }
  .card h1, .card h2 { font-size: 1.35rem; margin-bottom: 6px; }
  .card .lede { font-size: 0.88rem; line-height: 1.42; margin-bottom: 8px; }
  .card .eyebrow { margin-bottom: 4px; font-size: 0.66rem; }
  .feat { gap: 3px; }
  .feat li { font-size: 0.82rem; line-height: 1.38; }
  .ar--display { font-size: 1.2rem; line-height: 1.6; }
  .ar-ref { font-size: 0.78rem; }
  .tasbeeh { margin: 2px 0; }
  .tasbeeh__bead { width: 76px; }
  .station .phone { width: 96px; border-width: 4px; top: auto; bottom: 0; translate: 0 0; } /* level with the card's foot */
  .station .card.card--hero { max-width: 600px; padding: 16px 22px; }
  .station .card--hero h1 { font-size: 1.9rem; margin-bottom: 8px; }
  .station .card--hero .lede { font-size: 0.92rem; margin-bottom: 12px; }
  .station .card--hero .btn--store { padding: 10px 20px 10px 16px; }
}
/* portrait tablets: a larger peeking phone */
@media (orientation: portrait) and (min-width: 760px) and (max-width: 1100px) {
  html:not(.poster-mode) .station:nth-child(odd) .phone,
  html:not(.poster-mode) .station:nth-child(even) .phone { width: 128px; border-width: 5px; right: 22px; }
}
@media (max-width: 759px) and (max-height: 780px) {
  html:not(.poster-mode) .station:nth-child(odd) .phone,
  html:not(.poster-mode) .station:nth-child(even) .phone { width: 68px; border-width: 3px; }
}


/* ── Feature bullets inside cards ─────────────────────────── */
.feat { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.feat li { position: relative; padding-left: 18px; font-size: 0.95rem; line-height: 1.5; color: var(--fg-2); }
.feat li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
.feat b { color: var(--fg); font-weight: 600; }

/* ── Hero: the live site's opening, large, over the town before dawn ── */
.card--hero { max-width: 780px; padding: clamp(26px, 4vw, 48px); }
.card--hero .eyebrow { display: inline-flex; align-items: center; gap: 0.7em; letter-spacing: 0.2em; }
.card--hero .eyebrow::before { content: ''; width: 22px; height: 1px; background: rgb(240 253 250 / 0.45); }
.card--hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 1.2rem; text-wrap: balance; }
.card--hero .lede { font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.6; margin-bottom: 26px; }
.btn--store { gap: 12px; padding: 14px 26px 14px 22px; text-align: left; }
.btn--store small { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.7; letter-spacing: 0.04em; line-height: 1; margin-bottom: 3px; }
.btn--store b { display: block; font-weight: 600; line-height: 1; }

/* ── Tasbeeh counter (the beads in the scene move with each tap) ── */
.tasbeeh { display: flex; align-items: center; gap: 18px; margin: 6px 0 4px; }
.tasbeeh__bead { position: relative; width: 112px; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: rgb(240 253 250 / 0.06); color: var(--fg); cursor: pointer; display: grid; place-content: center; text-align: center; flex: none; }
.tasbeeh__bead svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.tasbeeh__bead .ring { fill: none; stroke: rgb(240 253 250 / 0.14); stroke-width: 6; }
.tasbeeh__bead .fill { fill: none; stroke: var(--green-bright); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.25s var(--ease); }
.tasbeeh__n { font-family: var(--serif); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tasbeeh__of { font-size: 0.72rem; color: var(--fg-2); }
.tasbeeh__bead:active { transform: scale(0.96); }
.tasbeeh__bead.done { animation: tasbeeh-done 0.5s var(--ease); }
@keyframes tasbeeh-done { 50% { box-shadow: 0 0 0 14px rgb(45 212 191 / 0.18); } }
.tasbeeh__phrase { margin: 0; display: grid; gap: 2px; }
.tasbeeh__phrase .ar { font-size: 1.5rem; color: var(--gold); line-height: 1.6; }
.tasbeeh__phrase span:last-child { font-size: 0.85rem; color: var(--fg-2); }

/* ── Covers: full-screen panels; the town holds still behind them ── */
.station--cover { min-height: 100vh; padding: 0; display: block; }
.cover {
  min-height: 100vh;
  padding: calc(52px + 7vh) var(--gutter) 8vh;
  background: rgb(4 7 15 / 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid var(--hair);
  display: grid;
  align-content: center;
  gap: 32px;
}
.cover > * { max-width: 1120px; width: 100%; margin-inline: auto; }
.cover--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 5vw, 72px); }
.cover--split > * { max-width: none; }
.cover__head { max-width: 760px; margin-inline: 0 auto; justify-self: start; }
.cover__head, .cover__copy { display: grid; gap: 0; }
.cover h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.cover__note { margin: 0; font-size: 0.9rem; color: var(--fg-3); }
.cover__media { display: grid; place-items: center; }
.phone.phone--static { position: static; translate: none; rotate: -3deg; width: clamp(170px, 18vw, 230px); }

.theme-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.theme-picker button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hair); background: rgb(240 253 250 / 0.05); color: var(--fg); font: inherit; font-size: 0.92rem; cursor: pointer; }
.theme-picker button[aria-checked="true"] { border-color: var(--green-bright); background: rgb(45 212 191 / 0.14); }
.sw { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25); }
.themes__note { margin: 0 0 18px; color: var(--fg-2); font-size: 0.95rem; }
.more-themes { margin: 0 0 10px; color: var(--fg-2); font-size: 0.9rem; }
.swatches { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(9, 26px); gap: 8px; } /* 17 = 9 + 8, no orphan */
.swatches li { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2); }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pcard { padding: 18px 18px 20px; border-radius: 18px; background: rgb(240 253 250 / 0.05); border: 1px solid var(--hair); }
.pcard h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 1.12rem; }
.pcard p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--fg-2); }

.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.value { border-top: 1px solid var(--hair); padding-top: 18px; }
.value__n { font-family: var(--serif); font-size: 0.95rem; color: var(--gold); }
.value h3 { margin: 10px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.value p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--fg-2); }

.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: rgb(240 253 250 / 0.05); border: 1px solid var(--hair); padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 1.02rem; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--green-bright); font-size: 1.2rem; line-height: 1; transition: rotate 0.3s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq__body p { margin: 0 0 16px; font-size: 0.93rem; line-height: 1.6; color: var(--fg-2); }
.faq a, .cover .hint a { color: var(--green-bright); }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 7px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.form input, .form textarea { font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--fg); background: rgb(240 253 250 / 0.06); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; outline: none; }
.form input:focus, .form textarea:focus { border-color: var(--green-bright); }
.form textarea { resize: vertical; min-height: 130px; }
.form .opt { text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600; gap: 10px; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 0; font-size: 0.92rem; color: var(--fg-3); min-height: 1.4em; }
.form-note.ok { color: var(--green-bright); }
.form-note a { color: var(--fg); }
.btn__spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: btn-spin 0.7s linear infinite; }
@keyframes btn-spin { to { rotate: 360deg; } }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px rgb(240 253 250 / 0.4); }

/* ── Closing ── */
.card--end { max-width: 640px; text-align: center; }
.end__line { font-family: var(--serif); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.3; color: var(--fg-2); margin: 0 0 22px; }
.end__brand { font-family: var(--serif); font-size: clamp(3rem, 8vw, 6rem); line-height: 1; margin: 0 0 10px; letter-spacing: 0.03em; }
.end__tag { font-family: var(--sans); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 400; color: var(--fg-2); margin: 0 0 24px; }
.end__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 8px; }
.station[data-station="closing"] { justify-content: center !important; }


@media (max-width: 1000px) {
  .pgrid, .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .cover--split { grid-template-columns: minmax(0, 1fr); }
  .cover { padding-top: calc(52px + 4vh); }
  .cover__media { display: none; }
  .pgrid, .vgrid { grid-template-columns: minmax(0, 1fr); }
  .tasbeeh__bead { width: 92px; }
  .site-nav__links { font-size: 0.82rem; gap: 12px; }
  .site-nav__sec { display: none; } /* phones: brand + Join waitlist only */
  .card--hero h1 { font-size: 2.3rem; }
  .card--hero .eyebrow { font-size: 0.64rem; letter-spacing: 0.16em; }
  .card--hero .lede { margin-bottom: 20px; }
}


/* ── App replica host: the themes phone renders the live site's Home replica, sized by
   the phone's own width (container query units stand in for the live site's --w) ── */
.phone--app { container-type: inline-size; aspect-ratio: 1080 / 2300; position: relative; --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }
.phone--app .app { --w: 100cqw; }
.phone--app .ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.phone--app .ic svg { width: 100%; height: 100%; }

/* ── Live app replica — the Imanza 1.3.1 home screen ───────
   Calm-glass redesign: no header bar, the Hijri date set in Fraunces,
   soft cards over a tinted wash, a scrolling row of quick actions and a
   floating navbar. Tokens are the app's own (src/constants/themes.ts). */
.app {
  /* defaults: Light (Default Green) — exact app tokens */
  --a-bg: #f3f6f9; --a-surface: #ffffff; --a-surface2: #f1f5f9;
  --a-text: #0f172a; --a-text2: #334155; --a-muted: #64748b; --a-faint: #94a3b8;
  --a-accent: #0d9488; --a-accent-text: #0f766e; --a-accent-light: #f0fdfa; --a-border: #e2e8f0; --a-on-accent: #fff;
  --a-tab: rgb(255 255 255 / 0.92); --a-glow: rgb(13 148 136 / 0.13);
  --a-warn: #d97706; --a-danger: #dc2626;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  font-family: var(--sans);
  font-size: calc(var(--w) * 0.033);
  color: var(--a-text);
  /* the app's atmosphere: two soft accent washes over the base */
  background:
    radial-gradient(120% 55% at 88% 0%, var(--a-glow), transparent 68%),
    radial-gradient(100% 45% at 0% 100%, var(--a-glow), transparent 70%),
    var(--a-bg);
  transition: background 0.8s var(--ease-io), color 0.8s var(--ease-io);
  overflow: hidden;
  user-select: none;
}
.app[data-app-theme='dark'] {
  --a-bg: #0a0f1a; --a-surface: #1e2d40; --a-surface2: #162032;
  --a-text: #e2e8f0; --a-text2: #cbd5e1; --a-muted: #94a3b8; --a-faint: #64748b;
  --a-accent: #2dd4bf; --a-accent-text: #99f6e4; --a-accent-light: #0c2a28; --a-border: #2d4060; --a-on-accent: #04211f;
  --a-tab: rgb(15 23 42 / 0.92); --a-glow: rgb(45 212 191 / 0.10);
  --a-warn: #fbbf24; --a-danger: #f87171;
}
.app[data-app-theme='latte'] {
  --a-bg: #efe6da; --a-surface: #fbf7f1; --a-surface2: #f3e9dc;
  --a-text: #2a1f16; --a-text2: #4d3b2c; --a-muted: #8a715a; --a-faint: #b39c86;
  --a-accent: #a97b52; --a-accent-text: #7a5433; --a-accent-light: #f3e9dc; --a-border: #e0d3c2; --a-on-accent: #fffaf3;
  --a-tab: rgb(251 247 241 / 0.92); --a-glow: rgb(169 123 82 / 0.12);
  --a-warn: #c47f16; --a-danger: #c0503a;
}
.app * { transition: background 0.8s var(--ease-io), color 0.8s var(--ease-io), border-color 0.8s var(--ease-io); }
.app .ic svg * { stroke-width: 1.6; }

/* header: greeting, the Hijri date, the Gregorian one beneath */
.app__hdr {
  flex: none;
  padding: 2.2em 1.3em 1em;
  display: flex; align-items: flex-start; gap: 0.8em;
  color: var(--a-text);
}
.app__hdr > div:first-child { flex: 1; min-width: 0; }
.app__hdr small { display: block; font-size: 0.78em; letter-spacing: 0.13em; text-transform: uppercase; color: var(--a-muted); }
.app__hdr b { display: block; font-family: var(--serif); font-size: 1.8em; font-weight: 400; line-height: 1.15; margin: 0.28em 0 0.12em; color: var(--a-text); }
.app__hdr em { display: block; font-style: normal; font-size: 0.88em; color: var(--a-muted); }
.app__menu {
  flex: none; width: 2.5em; height: 2.5em; border-radius: 50%;
  background: var(--a-surface2); display: grid; place-items: center; position: relative;
}
.app__menu::before {
  content: ''; width: 1.05em; height: 0.11em; border-radius: 1em;
  background: var(--a-text2);
  box-shadow: 0 -0.34em var(--a-text2), 0 0.34em var(--a-text2);
}

.app__body { flex: 1; padding: 0.4em 1.1em 6em; display: grid; gap: 0.85em; align-content: start; overflow: hidden; }

/* cards */
.app__card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 1.5em;
  padding: 1.1em 1.2em;
  color: var(--a-text2);
  box-shadow: 0 1.2em 2em -1.5em rgb(0 0 0 / 0.4);
}
.app__card--soft { background: var(--a-surface2); border-color: transparent; box-shadow: none; }
.app__card p { margin: 0.8em 0 0; font-size: 0.88em; color: var(--a-muted); }
.app__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: 0.75em; letter-spacing: 0.11em; text-transform: uppercase; color: var(--a-muted); }
.app__row--big { margin-top: 0.2em; text-transform: none; letter-spacing: 0; }
.app__prayer { font-family: var(--serif); font-size: 2.1em; font-weight: 400; line-height: 1; color: var(--a-accent); }
.app__count { font-size: 1.7em; font-weight: 600; line-height: 1; color: var(--a-text); font-variant-numeric: tabular-nums; }

/* the day's five prayers: a rail with a dot per prayer */
.app__track { position: relative; height: 0.7em; margin: 1.15em 0.45em 0.7em; }
.app__track .bar { position: absolute; left: 0; right: 0; top: 50%; height: 0.16em; transform: translateY(-50%); background: var(--a-border); border-radius: 1em; }
.app__track .bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: var(--a-accent); border-radius: 1em; }
.app__track i { position: absolute; top: 50%; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--a-accent); transform: translate(-50%, -50%); z-index: 1; }
.app__track i.off { background: var(--a-surface); border: 0.12em solid var(--a-border); }
.app__card--soft .app__track i.off { background: var(--a-bg); }
.app__times { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--a-muted); text-align: center; }
.app__times span { display: grid; gap: 0.2em; min-width: 3em; }
.app__times b { color: var(--a-text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1em; }
.app__times .on, .app__times .on b { color: var(--a-accent-text); }
.app__times--tr { margin-top: 0.55em; }

/* tracker + reading plan headings, with their streaks */
.app__row--title { text-transform: none; letter-spacing: 0; font-size: 1em; align-items: center; }
.app__row--title b { color: var(--a-text); font-size: 1.02em; font-weight: 600; }
.app__streak { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.88em; font-weight: 600; color: var(--a-text2); }
.app__streak .ic { font-size: 1.05em; color: var(--a-warn); }
.app__dots { display: flex; justify-content: space-between; padding: 0.9em 0.15em 0.1em; }
.app__dots span { width: 2.3em; height: 2.3em; border-radius: 50%; border: 0.11em solid var(--a-border); position: relative; }
.app__dots span.ok { background: var(--a-accent); border-color: var(--a-accent); }
.app__dots span.ok::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 0.72em; height: 0.36em;
  border-left: 0.15em solid var(--a-on-accent); border-bottom: 0.15em solid var(--a-on-accent);
  transform: rotate(-45deg) translate(0.08em, -0.08em);
}

/* the quick-action rail — it scrolls in the app, so the last one is cut */
.app__quick { display: flex; gap: 0.75em; overflow: hidden; padding: 0.15em 0.1em 0.1em; }
.app__quick span { flex: none; width: 4.5em; display: grid; justify-items: center; gap: 0.45em; font-size: 0.72em; color: var(--a-text2); text-align: center; line-height: 1.2; }
.app__quick .ic {
  width: 3.1em; height: 3.1em; padding: 0.8em; border-radius: 50%;
  background: var(--a-surface2); color: var(--a-text2);
}
.app__row--plan { text-transform: none; letter-spacing: 0; font-size: 0.92em; color: var(--a-text2); margin-top: 0.85em; }
.app__row--plan b { color: var(--a-accent-text); font-weight: 600; }
.app__bar { height: 0.4em; border-radius: 1em; background: var(--a-border); margin-top: 0.6em; overflow: hidden; }
.app__bar i { display: block; width: 90%; height: 100%; border-radius: 1em; background: var(--a-accent); }

/* ayah of the day */
.app__eyebrow { margin: 0.5em 0 0.35em; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); display: flex; align-items: center; gap: 0.6em; }
.app__eyebrow::before { content: ''; width: 1.7em; height: 1px; background: var(--a-faint); }
.app__ayah { margin: 0; font-size: 1.15em; line-height: 1.9; color: var(--a-text); }

/* floating navbar */
.app__tabs {
  position: absolute; left: 1.1em; right: 1.1em; bottom: 1.1em;
  height: 4em; border-radius: 3em;
  background: var(--a-tab); border: 1px solid var(--a-border);
  display: flex; justify-content: space-around; align-items: center;
  box-shadow: 0 1em 2.4em -1em rgb(0 0 0 / 0.35);
}
.app__tabs span { position: relative; display: grid; place-items: center; color: var(--a-muted); }
.app__tabs span.on { color: var(--a-accent); }
.app__tabs span.on::after { content: ''; position: absolute; bottom: -0.75em; width: 0.34em; height: 0.34em; border-radius: 50%; background: var(--a-accent); }
.app__tabs .ic { font-size: 1.45em; }