/* ============================================================================
   NOOR — DESIGN SYSTEM v7
   The pilgrim app, rebuilt from nothing. Deshwali Tour & Travels.

   Written for one person: a 60-year-old traveller, holding the phone in one
   hand, in bright Makkah sun, on hotel wifi that keeps dropping. Everything
   below serves that. Glass is used where depth helps him read a card against a
   photograph — never for decoration that costs legibility.

   Contract:
     · one scale of colour, one of space, one of radius, one of motion
     · 17px body floor, 56px tap floor, 4.5:1 contrast floor on every surface
     · dark mode is authored, not derived
     · every animation is behind prefers-reduced-motion
     · zero external assets — patterns and illustrations are inline SVG
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
.v7, .v7-splash {
  /* --- emerald: the primary. Sampled from the kiswah's stitching, not from a
     generic green ramp; it stays warm as it darkens. --- */
  --e-950:#031A13; --e-900:#04241B; --e-800:#063527; --e-700:#075E45;
  --e-600:#0B6B4F; --e-500:#0F8A66; --e-400:#21A57E; --e-300:#58C7A4;
  --e-200:#A6E3CD; --e-100:#D9F2E8; --e-050:#EEFAF5;

  /* --- gold: secondary. Restrained. Gold is for value and for the sacred,
     so it appears on progress, on rank, on the Kaaba — nowhere else. --- */
  --g-800:#6E5310; --g-700:#8A6A16; --g-600:#B08A22; --g-500:#C9A227;
  --g-400:#DCBB55; --g-300:#EBD68F; --g-200:#F2E6BE; --g-100:#F9F2DC;

  /* --- neutrals: warm. A cold grey next to emerald reads clinical. --- */
  --n-950:#0B0F0D; --n-900:#151A17; --n-800:#232A26; --n-700:#3A443E;
  --n-600:#566159; --n-500:#77837B; --n-400:#9DA79F; --n-300:#C3CBC6;
  --n-200:#DFE5E1; --n-100:#EFF2F0; --n-050:#F7F9F8;

  --danger:#B3261E; --danger-2:#DC3B33; --danger-soft:#FDECEA;
  --warn:#8A5A00;   --ok:#0B6B4F;

  /* --- semantic, light --- */
  --bg:#FBF9F5;                 /* soft warm white */
  --bg-2:#F4F1EA;
  --surface:#FFFFFF;
  --surface-2:#FAFAF8;
  --ink:#151A17;
  --ink-2:#3A443E;
  --ink-3:#6B7670;
  --line:#E4E7E3;
  --line-2:#D2D8D3;
  --brand:var(--e-600);
  --brand-ink:#FFFFFF;
  --brand-soft:var(--e-050);
  --accent:var(--g-600);
  --accent-soft:var(--g-100);

  /* --- glass. Two grades only. Frost sits on photography; veil sits on
     colour. More than two grades and the hierarchy stops reading. --- */
  --glass-frost:rgba(255,255,255,.62);
  --glass-frost-line:rgba(255,255,255,.55);
  --glass-veil:rgba(12,26,20,.34);
  --glass-veil-line:rgba(255,255,255,.20);
  --blur:blur(22px) saturate(1.7);

  /* --- elevation. Emerald-tinted shadows; pure black looks like dirt on a
     warm white background. --- */
  --sh-1:0 1px 2px rgba(4,36,27,.06), 0 1px 1px rgba(4,36,27,.04);
  --sh-2:0 4px 10px -2px rgba(4,36,27,.10), 0 2px 4px -2px rgba(4,36,27,.06);
  --sh-3:0 12px 26px -6px rgba(4,36,27,.14), 0 4px 10px -4px rgba(4,36,27,.08);
  --sh-4:0 24px 48px -12px rgba(4,36,27,.20), 0 8px 18px -8px rgba(4,36,27,.10);
  --sh-glass:0 8px 32px -8px rgba(4,36,27,.24), inset 0 1px 0 rgba(255,255,255,.45);

  /* --- radius --- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px;
  --r-xl:24px; --r-2xl:28px; --r-pill:999px;

  /* --- space: 4pt grid --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px;

  /* --- type. System stacks only: they ship with the phone, render Devanagari
     and Arabic correctly, and cost nothing offline. --- */
  --f-d:ui-rounded,-apple-system,"SF Pro Rounded","Segoe UI",Roboto,system-ui,sans-serif;
  --f-b:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --f-a:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Traditional Arabic",serif;
  --f-n:ui-monospace,SFMono-Regular,Menlo,monospace;   /* numerals in tables */

  /* --- motion. Three curves. Everything else is a variation of duration. --- */
  --ease:cubic-bezier(.22,.61,.36,1);        /* standard decelerate */
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --spring:cubic-bezier(.34,1.42,.64,1);     /* the one that feels native */
  --d1:120ms; --d2:200ms; --d3:320ms; --d4:520ms; --d5:820ms;

  --nav-h:76px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* --- dark: deep emerald + black + gold, authored by hand --- */
:root[data-theme="dark"] .v7,
:root[data-theme="dark"] .v7-splash {
  --bg:#05100C;
  --bg-2:#020A07;
  --surface:#0B1A15;
  --surface-2:#10241C;
  --ink:#EAF2EE;
  --ink-2:#B9C8C1;
  --ink-3:#8A9A93;
  --line:#1B2F27;
  --line-2:#28453A;
  --brand:var(--e-400);
  --brand-ink:#04241B;
  --brand-soft:#0C2419;
  --accent:var(--g-400);
  --accent-soft:#231C08;
  --danger:#FF6B61; --danger-2:#FF8B83; --danger-soft:#2A100E;
  --glass-frost:rgba(16,36,28,.58);
  --glass-frost-line:rgba(255,255,255,.10);
  --glass-veil:rgba(2,10,7,.52);
  --glass-veil-line:rgba(255,255,255,.12);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 4px 12px -2px rgba(0,0,0,.55);
  --sh-3:0 14px 30px -8px rgba(0,0,0,.62);
  --sh-4:0 26px 54px -14px rgba(0,0,0,.7);
  --sh-glass:0 10px 34px -10px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ==========================================================================
   2 · SURFACE
   ========================================================================== */
.v7 {
  background:var(--bg); color:var(--ink);
  font:400 17px/1.55 var(--f-b);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
.v7 *,
.v7 *::before,
.v7 *::after { box-sizing:border-box; }
.v7 button, .v7 input, .v7 select, .v7 textarea { font:inherit; color:inherit; }
.v7 button { background:none; border:0; padding:0; cursor:pointer; }
.v7 img { display:block; max-width:100%; }

/* Devanagari, Urdu and Arabic conjuncts break under letter-spacing. Tracking
   is a Latin-only affordance and is removed by script, not by guesswork. */
.v7:lang(hi) .v7-h1, .v7:lang(hi) .v7-h2, .v7:lang(hi) .v7-display,
.v7:lang(ur) .v7-h1, .v7:lang(ur) .v7-h2, .v7:lang(ur) .v7-display,
.v7:lang(ar) .v7-h1, .v7:lang(ar) .v7-h2, .v7:lang(ar) .v7-display { letter-spacing:0; }

/* ==========================================================================
   3 · TYPE SCALE
   Six sizes. The floor is 17px because he reads without glasses at arm's
   length; 15px "captions" simply do not get read.
   ========================================================================== */
.v7-display{ font:800 clamp(30px,8.2vw,38px)/1.1 var(--f-d); letter-spacing:-.028em; }
.v7-h1     { font:750 clamp(24px,6.4vw,29px)/1.18 var(--f-d); letter-spacing:-.022em; }
.v7-h2     { font:700 21px/1.25 var(--f-d); letter-spacing:-.014em; }
.v7-h3     { font:650 18px/1.3 var(--f-d); letter-spacing:-.008em; }
.v7-body   { font:400 17px/1.55 var(--f-b); }
.v7-lead   { font:400 18px/1.5 var(--f-b); color:var(--ink-2); }
.v7-meta   { font:550 15px/1.35 var(--f-b); color:var(--ink-3); letter-spacing:.01em; }
.v7-num    { font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum"; }
.v7-ar     { font-family:var(--f-a); font-size:1.28em; line-height:1.7; direction:rtl; }
.v7-dim    { color:var(--ink-3); }
.v7-strong { color:var(--ink); font-weight:650; }

/* ==========================================================================
   4 · ISLAMIC PATTERN
   A girih eight-point tessellation, inline, at 3–5% — the geometry that runs
   through the Haram's screens. It must be felt, never noticed: at any opacity
   where you can name the shape, it is already competing with the content.
   ========================================================================== */
.v7-pattern { position:relative; isolation:isolate; }
.v7-pattern::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.045; background-repeat:repeat; background-size:88px 88px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%230B6B4F' stroke-width='1.1'%3E%3Cpath d='M44 6 62 24 44 42 26 24Z'/%3E%3Cpath d='M44 46 62 64 44 82 26 64Z'/%3E%3Cpath d='M6 44 24 26 42 44 24 62Z'/%3E%3Cpath d='M46 44 64 26 82 44 64 62Z'/%3E%3Cpath d='M44 24 64 44 44 64 24 44Z'/%3E%3Cpath d='M0 0h88v88H0z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] .v7-pattern::before { opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23DCBB55' stroke-width='1.1'%3E%3Cpath d='M44 6 62 24 44 42 26 24Z'/%3E%3Cpath d='M44 46 62 64 44 82 26 64Z'/%3E%3Cpath d='M6 44 24 26 42 44 24 62Z'/%3E%3Cpath d='M46 44 64 26 82 44 64 62Z'/%3E%3Cpath d='M44 24 64 44 44 64 24 44Z'/%3E%3Cpath d='M0 0h88v88H0z'/%3E%3C/g%3E%3C/svg%3E"); }

/* ==========================================================================
   5 · GLASS
   ========================================================================== */
.v7-glass {
  background:var(--glass-frost);
  border:1px solid var(--glass-frost-line);
  box-shadow:var(--sh-glass);
  border-radius:var(--r-xl);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
/* On photography the frost inverts: light text on a dark veil. */
.v7-glass--veil {
  background:var(--glass-veil);
  border-color:var(--glass-veil-line);
  color:#fff;
}
.v7-glass--veil .v7-meta,
.v7-glass--veil .v7-dim { color:rgba(255,255,255,.78); }

/* The reflection: a single specular sweep across the top edge. Without it
   glass reads as flat translucency. */
.v7-glass::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.05) 32%, transparent 56%);
}
.v7-glass { position:relative; }

/* backdrop-filter is not universal. Without it, translucency becomes an
   unreadable smear — so opaque up the fallback instead of degrading text. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .v7-glass { background:var(--surface); border-color:var(--line); }
  .v7-glass--veil { background:rgba(4,20,14,.86); border-color:rgba(255,255,255,.18); }
}

/* ==========================================================================
   6 · CARD
   ========================================================================== */
.v7-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-1);
  padding:var(--s5); position:relative; overflow:hidden;
}
.v7-card--flush { padding:0; }
.v7-card--tint  { background:var(--brand-soft); border-color:transparent; }
.v7-card--brand {
  background:linear-gradient(152deg,var(--e-600),var(--e-800) 82%);
  border-color:transparent; color:#fff; box-shadow:var(--sh-3);
}
.v7-card--brand .v7-meta { color:rgba(255,255,255,.76); }
:root[data-theme="dark"] .v7-card--brand {
  background:linear-gradient(152deg,var(--e-800),var(--e-950) 84%);
}
.v7-card--danger { background:var(--danger-soft); border-color:transparent; }

.v7-cardhead { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.v7-cardhead .v7-h3 { margin-inline-end:auto; }

/* ==========================================================================
   7 · BUTTONS  ·  56px floor, always
   ========================================================================== */
.v7-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:56px; padding:0 var(--s6); border-radius:var(--r-pill);
  font:650 17px/1 var(--f-d); letter-spacing:-.01em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--d2) var(--spring), box-shadow var(--d2) var(--ease),
             background var(--d2) var(--ease);
}
.v7-btn .i, .v7-btn svg { width:22px; height:22px; flex:none; }
.v7-btn--primary { background:var(--brand); color:var(--brand-ink); box-shadow:var(--sh-2); }
.v7-btn--gold    { background:linear-gradient(140deg,var(--g-500),var(--g-600));
                   color:#2A1F02; box-shadow:var(--sh-2); }
.v7-btn--quiet   { background:var(--surface); color:var(--ink); border:1px solid var(--line-2); }
.v7-btn--ghost   { background:transparent; color:var(--brand); }
.v7-btn--danger  { background:var(--danger); color:#fff; box-shadow:var(--sh-2); }
.v7-btn--block   { display:flex; width:100%; }
.v7-btn--lg      { min-height:64px; font-size:19px; }
.v7-btn:active   { transform:scale(.97); }
.v7-btn:focus-visible,
.v7 [data-go]:focus-visible,
.v7 button:focus-visible,
.v7 a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm); }

/* Material 3 ripple, done with one pseudo-element and no JS listeners. */
.v7-btn::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
    currentColor 0%, transparent 62%);
  opacity:0; transform:scale(.2); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference) {
  .v7-btn:active::before { opacity:.16; transform:scale(1);
    transition:transform 420ms var(--ease), opacity 420ms var(--ease); }
}

/* ==========================================================================
   8 · CHIP / PILL / BADGE
   ========================================================================== */
.v7-chip {
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:36px; padding:0 var(--s4); border-radius:var(--r-pill);
  background:var(--bg-2); color:var(--ink-2);
  font:600 15px/1 var(--f-b); white-space:nowrap;
}
.v7-chip .i { width:16px; height:16px; }
.v7-chip--brand { background:var(--brand-soft); color:var(--e-700); }
:root[data-theme="dark"] .v7-chip--brand { color:var(--e-300); }
.v7-chip--gold  { background:var(--accent-soft); color:var(--g-700); }
:root[data-theme="dark"] .v7-chip--gold { color:var(--g-300); }
.v7-chip--onglass { background:rgba(255,255,255,.18); color:#fff;
  border:1px solid rgba(255,255,255,.22); }

.v7-dot { width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none; }
.v7-dot--live { background:var(--danger-2); box-shadow:0 0 0 0 rgba(220,59,51,.55); }
@media (prefers-reduced-motion:no-preference) {
  .v7-dot--live { animation:v7pulse 2s var(--ease) infinite; }
}
@keyframes v7pulse {
  70%  { box-shadow:0 0 0 10px rgba(220,59,51,0); }
  100% { box-shadow:0 0 0 0 rgba(220,59,51,0); }
}

/* ==========================================================================
   9 · ROW  ·  the workhorse list item
   ========================================================================== */
.v7-row {
  display:flex; align-items:center; gap:var(--s4); width:100%;
  min-height:64px; padding:var(--s3) 0; text-align:start;
  border-bottom:1px solid var(--line);
}
.v7-row:last-child { border-bottom:0; }
.v7-row__ic {
  width:44px; height:44px; flex:none; border-radius:14px; display:grid;
  place-items:center; background:var(--brand-soft); color:var(--brand);
}
.v7-row__ic .i { width:22px; height:22px; }
.v7-row__ic--gold { background:var(--accent-soft); color:var(--g-700); }
:root[data-theme="dark"] .v7-row__ic--gold { color:var(--g-300); }
.v7-row__ic--danger { background:var(--danger-soft); color:var(--danger); }
.v7-row__t { flex:1; min-width:0; }
.v7-row__t b { display:block; font:650 17px/1.3 var(--f-d); }
.v7-row__t span { display:block; font:400 15px/1.4 var(--f-b); color:var(--ink-3);
  margin-top:2px; }
.v7-row__go { color:var(--ink-3); flex:none; }
.v7-row__go .i { width:20px; height:20px; }
.v7-row:active { background:var(--bg-2); }

/* ==========================================================================
   10 · PROGRESS RING
   Stroke-dashoffset on an SVG circle. The gold arc is the journey travelled.
   ========================================================================== */
.v7-ring { position:relative; display:grid; place-items:center; flex:none; }
.v7-ring svg { transform:rotate(-90deg); display:block; }
.v7-ring__track { stroke:currentColor; opacity:.18; fill:none; stroke-linecap:round; }
.v7-ring__arc   { stroke:var(--g-400); fill:none; stroke-linecap:round;
  transition:stroke-dashoffset var(--d5) var(--ease); }
.v7-ring__mid { position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; line-height:1.05; }
.v7-ring__mid b { display:block; font:800 26px/1 var(--f-d); }
.v7-ring__mid span { display:block; font:600 12px/1.2 var(--f-b); opacity:.72;
  margin-top:3px; }

/* ==========================================================================
   11 · SHELL  ·  header, scroller, floating nav
   ========================================================================== */
.v7-app {
  min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); position:relative; overflow-x:clip;
}
.v7-main { flex:1; min-height:0; padding-bottom:calc(var(--nav-h) + var(--safe-b) + 26px); }
.v7-wrap { padding:0 var(--s5); max-width:560px; margin-inline:auto; width:100%; }
.v7-stack > * + * { margin-top:var(--s5); }
.v7-sec { margin-top:var(--s7); }
.v7-sec__h { display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s4); }
.v7-sec__h .v7-h2 { margin-inline-end:auto; }

/* --- header: 76px, glass, collapses its title on scroll --- */
.v7-hdr {
  position:sticky; top:0; z-index:40;
  padding-top:var(--safe-t);
  display:flex; align-items:center; gap:var(--s3);
  min-height:calc(76px + var(--safe-t)); padding-inline:var(--s5);
  background:transparent; transition:background var(--d3) var(--ease),
    border-color var(--d3) var(--ease), box-shadow var(--d3) var(--ease);
  border-bottom:1px solid transparent;
}
.v7-hdr--stuck {
  background:var(--glass-frost); border-bottom-color:var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
/* The mark rides the header on tab roots. It stays visible over the hero — the
   one piece of chrome that should never fade — while the title only appears
   once the hero has scrolled away. */
.v7-hdr__mark { flex:none; display:inline-grid; place-items:center;
  filter:drop-shadow(0 2px 8px rgba(3,26,19,.35)); }
.v7-hdr__t { font:700 19px/1.2 var(--f-d); letter-spacing:-.015em;
  opacity:0; transform:translateY(6px); transition:opacity var(--d3) var(--ease),
  transform var(--d3) var(--ease); margin-inline-end:auto; }
.v7-hdr--stuck .v7-hdr__t { opacity:1; transform:none; }
.v7-hdr__sp { margin-inline-end:auto; }
.v7-iconbtn {
  width:48px; height:48px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:var(--glass-frost); color:var(--ink);
  border:1px solid var(--glass-frost-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  transition:transform var(--d2) var(--spring);
}
.v7-iconbtn .i { width:23px; height:23px; }
.v7-iconbtn:active { transform:scale(.92); }
.v7-iconbtn--onhero { background:rgba(0,0,0,.28); color:#fff;
  border-color:rgba(255,255,255,.24); }

/* --- bottom navigation: floating glass pill, animated indicator --- */
.v7-nav {
  position:fixed; z-index:50; inset-inline:0; bottom:0;
  padding:0 var(--s4) calc(var(--safe-b) + 10px);
  pointer-events:none;
}
.v7-nav__in {
  pointer-events:auto; position:relative;
  max-width:520px; margin-inline:auto;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  height:var(--nav-h); padding:0 var(--s2);
  border-radius:26px;
  background:var(--glass-frost); border:1px solid var(--glass-frost-line);
  box-shadow:var(--sh-4), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .v7-nav__in { background:var(--surface); }
}
.v7-nav__ind {
  position:absolute; top:10px; height:calc(var(--nav-h) - 20px);
  border-radius:20px; background:var(--brand-soft);
  transition:transform var(--d3) var(--spring), width var(--d3) var(--spring);
  pointer-events:none;
}
:root[data-theme="dark"] .v7-nav__ind { background:rgba(33,165,126,.16); }
.v7-nav__b {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; color:var(--ink-3);
  font:600 11.5px/1.1 var(--f-b); letter-spacing:.005em;
  transition:color var(--d2) var(--ease);
  min-width:0; padding:0 2px;
}
.v7-nav__b .i { width:25px; height:25px;
  transition:transform var(--d3) var(--spring); }
.v7-nav__b span { max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.v7-nav__b[aria-current="page"] { color:var(--brand); }
.v7-nav__b[aria-current="page"] .i { transform:translateY(-1px) scale(1.08); }
.v7-nav__b:active .i { transform:scale(.9); }
.v7-nav__b em { position:absolute; top:9px; inset-inline-end:calc(50% - 20px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--danger); color:#fff; font:700 11px/18px var(--f-n);
  font-style:normal; text-align:center; }

/* ==========================================================================
   12 · HERO  ·  immersive photograph + parallax + veil card
   ========================================================================== */
.v7-hero { position:relative; margin-top:calc(-76px - var(--safe-t));
  min-height:clamp(400px,72vh,560px); display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; isolation:isolate;
  border-bottom-left-radius:var(--r-2xl); border-bottom-right-radius:var(--r-2xl); }
.v7-hero__img { position:absolute; inset:-8% 0 0; z-index:-2; }
.v7-hero__img img, .v7-hero__img .ph, .v7-hero__img picture {
  width:100%; height:100%; object-fit:cover; display:block; }
.v7-hero__img .ph { position:absolute; inset:0; }
.v7-hero::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(3,26,19,.52) 0%, rgba(3,26,19,.12) 30%,
    rgba(3,26,19,.55) 68%, rgba(3,26,19,.86) 100%);
}
.v7-hero__body { padding:var(--s6) var(--s5) var(--s6); color:#fff; }
/* The salutation carries direction:rtl for the Arabic form, which would drag
   it to the right edge in an LTR layout. Align it to the visual start of the
   column instead, so it sits over the name rather than beside it. */
.v7-hero__sal { font-family:var(--f-a); font-size:26px; line-height:1.6;
  color:var(--g-300); direction:rtl; text-align:left; }
.v7[dir="rtl"] .v7-hero__sal { text-align:right; }
.v7-hero__name { font:800 clamp(28px,7.6vw,36px)/1.1 var(--f-d);
  letter-spacing:-.03em; margin-top:2px; text-shadow:0 2px 18px rgba(0,0,0,.4); }
.v7-hero__where { font:500 17px/1.4 var(--f-b); color:rgba(255,255,255,.86);
  margin-top:var(--s2); }

/* ==========================================================================
   13 · ENTRANCE ANIMATIONS
   [data-in] elements rise in on a stagger the first time they are painted.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference) {
  .v7 [data-in] { opacity:0; transform:translateY(18px); }
  .v7 [data-in].is-in { opacity:1; transform:none;
    transition:opacity var(--d4) var(--ease), transform var(--d4) var(--ease); }
}
@media (prefers-reduced-motion:reduce) {
  .v7 [data-in] { opacity:1; transform:none; }
}

/* ==========================================================================
   14 · SKELETON
   ========================================================================== */
.v7-skel { border-radius:var(--r-md); background:var(--bg-2); position:relative;
  overflow:hidden; }
.v7-skel--line  { height:16px; margin:8px 0; }
.v7-skel--title { height:28px; width:62%; }
.v7-skel--block { height:132px; border-radius:var(--r-xl); }
@media (prefers-reduced-motion:no-preference) {
  .v7-skel::after { content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation:v7shim 1.5s var(--ease) infinite; }
  :root[data-theme="dark"] .v7-skel::after {
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); }
}
@keyframes v7shim { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

/* ==========================================================================
   15 · EMPTY / ERROR STATES
   ========================================================================== */
.v7-state { text-align:center; padding:var(--s8) var(--s5); }
.v7-state__ic { width:76px; height:76px; margin:0 auto var(--s5); border-radius:26px;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); }
.v7-state__ic .i { width:36px; height:36px; }
.v7-state--err .v7-state__ic { background:var(--danger-soft); color:var(--danger); }
.v7-state p { color:var(--ink-3); margin-top:var(--s2); }
.v7-state .v7-btn { margin-top:var(--s6); }

/* ==========================================================================
   16 · SPLASH
   Kaaba silhouette, crescent, birds, particles, calligraphy, dua.
   It runs once per session and is skippable by a tap anywhere.
   ========================================================================== */
.v7-splash {
  position:fixed; inset:0; z-index:9000; display:grid; place-items:center;
  background:
    radial-gradient(120% 82% at 50% 118%, #0F8A66 0%, transparent 58%),
    radial-gradient(90% 60% at 50% -12%, #075E45 0%, transparent 60%),
    linear-gradient(#031A13, #04241B 46%, #021009);
  color:#fff; text-align:center; overflow:hidden;
  transition:opacity var(--d4) var(--ease), visibility var(--d4);
}
.v7-splash.is-out { opacity:0; visibility:hidden; pointer-events:none; }
.v7-splash__art { position:relative; width:min(92vw,420px); }
.v7-splash svg { display:block; width:100%; height:auto; overflow:visible; }
.v7-splash__cal { font-family:var(--f-a); font-size:clamp(30px,9vw,42px);
  color:var(--g-300); direction:rtl; line-height:1.8; }
/* The logo plate is navy; on the deep-emerald splash it needs a ring of light
   so it reads as an object sitting on the field rather than a hole in it. */
/* One element now: BRAND.lockup() draws the plate, the star and the wordmark
   as a single piece of artwork, so nothing here may restyle the name. */
.v7-splash__logo { display:grid; place-items:center; margin:var(--s6) 0 0; }
.v7-splash__logo .dtt-mark {
  box-shadow:0 0 0 1px rgba(235,214,143,.34), 0 18px 40px -14px rgba(0,0,0,.7);
  border-radius:22px; }
.v7-splash__sub { font:500 14px/1.4 var(--f-b); color:rgba(255,255,255,.58);
  margin-top:var(--s3); letter-spacing:.09em; text-transform:uppercase; }
.v7-splash__dua { margin-top:var(--s7); color:rgba(255,255,255,.82);
  font:400 17px/1.6 var(--f-b); max-width:30ch; margin-inline:auto; }
.v7-splash__bar { width:132px; height:3px; border-radius:2px; margin:var(--s7) auto 0;
  background:rgba(255,255,255,.16); overflow:hidden; }
.v7-splash__bar i { display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg,var(--g-500),var(--g-300)); }

@media (prefers-reduced-motion:no-preference) {
  .v7-splash__bar i { animation:v7load 1.5s var(--ease) infinite; }
  .v7-sp-fade  { opacity:0; animation:v7spIn var(--d5) var(--ease) forwards; }
  .v7-sp-d1 { animation-delay:.15s } .v7-sp-d2 { animation-delay:.42s }
  .v7-sp-d3 { animation-delay:.72s } .v7-sp-d4 { animation-delay:1.02s }
  .v7-sp-kaaba { animation:v7rise 1.3s var(--ease) both .1s; }
  .v7-sp-moon  { transform-origin:center; animation:v7moon 5s var(--ease) infinite alternate; }
  .v7-sp-bird  { animation:v7fly 7s linear infinite; }
  .v7-sp-bird:nth-of-type(2) { animation-duration:9s; animation-delay:-2s; }
  .v7-sp-bird:nth-of-type(3) { animation-duration:11s; animation-delay:-5s; }
  .v7-sp-dust  { animation:v7dust 9s var(--ease) infinite; }
}
@keyframes v7load { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }
@keyframes v7spIn { to { opacity:1 } }
@keyframes v7rise { from { opacity:0; transform:translateY(26px) scale(.96) }
                    to   { opacity:1; transform:none } }
@keyframes v7moon { from { transform:translateY(0) } to { transform:translateY(-9px) } }
@keyframes v7fly  { from { transform:translate(-14%,4px) } to { transform:translate(118%,-16px) } }
@keyframes v7dust { 0%,100% { opacity:.14; transform:translateY(0) }
                    50%     { opacity:.5;  transform:translateY(-18px) } }
@media (prefers-reduced-motion:reduce) {
  .v7-sp-fade { opacity:1; }
}

/* ==========================================================================
   17 · ONBOARDING
   ========================================================================== */
.v7-ob { min-height:100dvh; display:flex; flex-direction:column;
  background:var(--bg); padding-top:var(--safe-t); }
.v7-ob__top { display:flex; align-items:center; padding:var(--s4) var(--s5); }
.v7-ob__brand { display:inline-flex; align-items:center; }
.v7-ob__skip { margin-inline-start:auto; font:600 16px/1 var(--f-b);
  color:var(--ink-3); min-height:48px; padding:0 var(--s3); }
/* NO scroll-behavior:smooth here. Inside a mandatory snap container both it
   and scrollTo({behavior:'smooth'}) moved the track 0px, which left the Next
   button dead and onboarding escapable only by swiping or Skip. The pane
   transition is tweened in JS instead, where it cannot be cancelled. */
.v7-ob__track { flex:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.v7-ob__track::-webkit-scrollbar { display:none; }
.v7-ob__pane { flex:0 0 100%; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--s5) var(--s6); text-align:center; gap:var(--s5); }
.v7-ob__art { width:min(76vw,300px); }
.v7-ob__art svg { width:100%; height:auto; display:block; }
.v7-ob__pane p { color:var(--ink-2); max-width:28ch; font-size:18px; line-height:1.55; }
.v7-ob__foot { padding:var(--s5) var(--s5) calc(var(--safe-b) + var(--s6));
  display:flex; align-items:center; gap:var(--s5); }
.v7-ob__dots { display:flex; gap:7px; }
.v7-ob__dots i { width:8px; height:8px; border-radius:4px; background:var(--line-2);
  transition:width var(--d3) var(--spring), background var(--d3) var(--ease); }
.v7-ob__dots i.on { width:26px; background:var(--brand); }
.v7-ob__foot .v7-btn { margin-inline-start:auto; }
.v7-ob__prev { min-height:56px; padding:0 var(--s4); border-radius:var(--r-pill);
  font:600 16px/1 var(--f-b); color:var(--ink-2); display:inline-flex;
  align-items:center; gap:var(--s2); }
.v7-ob__prev[hidden] { display:none; }
.v7-ob__prev .i { width:20px; height:20px; }

/* ==========================================================================
   18 · SHEET  ·  bottom sheet, drag handle, glass
   ========================================================================== */
.v7-sheet-bg { position:fixed; inset:0; z-index:8000; background:rgba(3,16,12,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--d3) var(--ease); }
.v7-sheet-bg.is-on { opacity:1; }
.v7-sheet {
  position:fixed; z-index:8001; inset-inline:0; bottom:0;
  max-height:88dvh; overflow:auto; -webkit-overflow-scrolling:touch;
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow:var(--sh-4);
  padding:var(--s3) var(--s5) calc(var(--safe-b) + var(--s7));
  transform:translateY(100%); transition:transform var(--d4) var(--spring);
}
.v7-sheet.is-on { transform:none; }
.v7-sheet__grip { width:44px; height:5px; border-radius:3px; background:var(--line-2);
  margin:var(--s2) auto var(--s5); }
@media (min-width:640px) {
  .v7-sheet { max-width:520px; margin-inline:auto; border-radius:var(--r-2xl);
    bottom:20px; inset-inline:20px; }
}

/* ==========================================================================
   19 · ACCESSIBILITY
   Font-size is a first-class setting, not a browser zoom. Elderly travellers
   set it once on day one and every screen honours it.
   ========================================================================== */
.v7[data-fs="lg"]  { font-size:19px; }
.v7[data-fs="xl"]  { font-size:21px; }
.v7[data-fs="lg"] .v7-row__t span,
.v7[data-fs="lg"] .v7-meta { font-size:16.5px; }
.v7[data-fs="xl"] .v7-row__t span,
.v7[data-fs="xl"] .v7-meta { font-size:18px; }
.v7[data-fs="lg"] .v7-btn { min-height:60px; font-size:18px; }
.v7[data-fs="xl"] .v7-btn { min-height:66px; font-size:20px; }

@media (prefers-contrast:more) {
  .v7 { --line:#8A968F; --line-2:#5C6862; --ink-3:#3A443E; }
  .v7-glass { background:var(--surface); }
  .v7-glass--veil { background:rgba(3,20,14,.9); }
}

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

/* ==========================================================================
   20 · RTL
   ========================================================================== */
.v7[dir="rtl"] .v7-row__go .i { transform:scaleX(-1); }
.v7[dir="rtl"] .v7-splash__cal { text-align:start; }

/* ==========================================================================
   21 · THE APP IS A PHONE, ON EVERY SCREEN
   Left alone, a 1900px browser stretched the hero photograph across the whole
   desktop while the content column sat at 560px in the middle and the floating
   nav drifted off on its own — it read as a website that had lost its layout,
   which is exactly what it must never look like.

   Above phone width the whole app is therefore held in a device-width column
   on a dark backdrop. Nothing inside changes: the hero, the sticky header and
   the floating nav all inherit the column, so the composition a pilgrim sees
   on a handset is the composition everyone sees.
   ========================================================================== */
@media (min-width:600px) {
  html { background:#04120D; }
  body {
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(15,138,102,.22), transparent 60%),
      radial-gradient(90% 50% at 50% 100%, rgba(201,162,39,.10), transparent 60%),
      #04120D;
    min-height:100dvh;
  }
  .v7-app {
    max-width:440px;
    margin-inline:auto;
    min-height:100dvh;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 90px -20px rgba(0,0,0,.7);
    overflow-x:clip;
  }
  /* The nav is fixed to the viewport, so it must be told where the column is
     rather than inheriting it. */
  .v7-nav { max-width:440px; margin-inline:auto; }
  .v7-nav__in { max-width:none; }
  /* The bottom sheet already centres itself; match the column so it does not
     float wider than the app it belongs to. */
  .v7-sheet { max-width:408px; }
}
@media (min-width:600px) and (display-mode:standalone) {
  /* Installed on a desktop the window IS the app — no backdrop, no frame. */
  body { background:var(--bg); }
  .v7-app { box-shadow:none; }
}