/* ============================================================================
   UMRAH OS v2 — "One instruction, large, in Hindi, over a photograph."
   Layers on tokens.css + ui.css. Everything here is tuned for a 55-year-old
   first-time pilgrim on a budget Android phone in bright sunlight.
   ========================================================================== */

.v2 {
  /* ---- Type: nothing below 13px, body at 17px ------------------------- */
  --t-hero: clamp(30px, 8vw, 40px);
  --t-xl:   28px;
  --t-lg:   22px;
  --t-md:   19px;
  --t-body: 17px;
  --t-sub:  15px;
  --t-min:  13px;

  /* ---- 8-point spacing ------------------------------------------------ */
  --v-1: 4px;  --v-2: 8px;  --v-3: 16px; --v-4: 24px;
  --v-5: 32px; --v-6: 40px; --v-7: 56px; --v-8: 72px;

  --v-r:   18px;   /* card radius */
  --v-r-lg: 26px;
  --v-tap: 56px;   /* minimum interactive height */

  /* ---- Warmer, calmer surface than v1 --------------------------------- */
  --v-paper:  #FBFAF7;
  --v-card:   #FFFFFF;
  --v-ink:    #14171A;
  --v-ink-2:  #4C555D;
  --v-line:   #D6D2C8;
  --v-green:  #0B6B4F;
  --v-green-d:#064330;
  --v-gold:   #B08A34;
  --v-warm:   #FDF6E9;

  font-size: var(--t-body);
  line-height: 1.55;
  background: var(--v-paper);
  color: var(--v-ink);
  font-family: var(--font-sans);
}
:root[data-theme="dark"] .v2 {
  --v-paper: #0C0E10;
  --v-card:  #16191C;
  --v-ink:   #EDF0EF;
  --v-ink-2: #A6B0B4;
  --v-green:  #4FA98A;   /* dark theme had none, so it fell back to the light
                            value and measured 2.71:1 as text. */
  --v-green-d:#0A3F2E;
  --v-gold:   #D9BC72;
  --v-line:  #3A4147;
  --v-warm:  #221D12;
}

/* Hindi and Urdu need more line height than Latin. */
.v2:lang(hi), .v2:lang(ur), .v2:lang(ar) { line-height: 1.7; }
.v2:lang(ur), .v2:lang(ar) { font-family: var(--font-ar), var(--font-sans); }

/* ---------- Photograph slots ---------------------------------------------
   Every photo is a named slot. Until a real image is supplied the slot
   renders as an intentional duotone panel, never a broken box. ---------- */
.v2 .ph {
  position: relative; overflow: hidden; background: var(--v-green-d);
  border-radius: var(--v-r); isolation: isolate;
}
.v2 .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2 .ph--hero  { aspect-ratio: 4 / 5; border-radius: 0; }
.v2 .ph--wide  { aspect-ratio: 16 / 9; }
.v2 .ph--card  { aspect-ratio: 3 / 2; }
.v2 .ph--sq    { aspect-ratio: 1 / 1; }
.v2 .ph__fallback {
  position: absolute; inset: 0; display: grid; place-content: center;
  gap: var(--v-2); padding: var(--v-4); text-align: center;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(176,138,52,.30), transparent 60%),
    linear-gradient(160deg, #0E5C46, #062B1F 70%);
  color: rgba(255,252,244,.90);
}
.v2 .ph__fallback b {
  font-size: var(--t-sub); font-weight: 600; letter-spacing: .01em;
}
.v2 .ph__fallback span {
  font-size: var(--t-min); color: rgba(255,252,244,.58);
  text-transform: uppercase; letter-spacing: .14em;
}
.v2 .ph__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgba(6,20,16,.86));
}
/* Overlaid slots: pin the placeholder caption to the top corner and quieten it,
   so headline text sitting over the photo is never obscured. */
.v2 .ph--overlay .ph__fallback {
  place-content: start; align-items: start; text-align: start;
  padding: var(--v-3);
}
.v2 .ph--overlay .ph__fallback b {
  font-size: var(--t-min); font-weight: 600; opacity: .55;
}
.v2 .ph--overlay .ph__fallback span { font-size: 10px; opacity: .40; }

/* ---------- The one instruction card ---------------------------------- */
.v2 .today {
  background: linear-gradient(165deg, var(--v-green), var(--v-green-d));
  color: #fff; border-radius: var(--v-r-lg); padding: var(--v-5) var(--v-4);
  box-shadow: 0 18px 40px rgba(6,40,30,.22);
}
.v2 .today__eyebrow {
  font-size: var(--t-sub); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: var(--v-2);
  /* gold-300 measured 3.69:1 on this green; gold-200 clears AA for the size. */
  color: var(--gold-200);
}
.v2 .today__what {
  font-size: var(--t-hero); line-height: 1.15; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: var(--v-3);
}
.v2 .today__when {
  display: inline-flex; align-items: center; gap: var(--v-2);
  background: rgba(255,255,255,.14); border-radius: 999px;
  padding: 10px 18px; font-size: var(--t-md); font-weight: 600;
}
.v2 .today__note {
  margin-top: var(--v-3); font-size: var(--t-body);
  color: rgba(255,255,255,.80); line-height: 1.5;
}

/* ---------- Big tappable rows ------------------------------------------ */
.v2 .big {
  display: flex; align-items: center; gap: var(--v-3); width: 100%;
  min-height: var(--v-tap); padding: var(--v-3) var(--v-3);
  background: var(--v-card); border: 1px solid var(--v-line);
  border-radius: var(--v-r); text-align: start; color: inherit;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.v2 .big:active { transform: scale(.99); }
.v2 .big + .big { margin-top: var(--v-2); }
.v2 .big__ico {
  width: 48px; height: 48px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: var(--v-warm); color: var(--v-green);
}
.v2 .big__ico .i { width: 24px; height: 24px; }
.v2 .big__txt { flex: 1; min-width: 0; }
.v2 .big__t { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.v2 .big__s { font-size: var(--t-sub); color: var(--v-ink-2); margin-top: 2px; }
.v2 .big__go { color: var(--v-ink-2); flex: none; }
.v2 .big--call .big__ico { background: #E8F3EE; color: var(--v-green); }
.v2 .big--warn .big__ico { background: #FDECEC; color: #B22E2E; }

/* ---------- Buttons: one primary action, thumb-sized ------------------- */
.v2 .act {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--v-2); min-height: var(--v-tap); padding: 0 var(--v-5);
  border-radius: 16px; font-size: var(--t-md); font-weight: 700;
  background: var(--v-green); color: #fff; width: 100%;
  box-shadow: 0 6px 18px rgba(11,107,79,.28);
}
.v2 .act--ghost {
  background: transparent; color: var(--v-green);
  border: 2px solid var(--v-line); box-shadow: none;
}
.v2 .act--danger { background: #B22E2E; box-shadow: 0 6px 18px rgba(178,46,46,.3); }
.v2 .act:active { transform: scale(.985); }

/* ---------- Step list (progressive: today + next only) ----------------- */
.v2 .steps2 { display: flex; flex-direction: column; gap: var(--v-2); }
.v2 .step2 {
  display: flex; gap: var(--v-3); align-items: flex-start;
  padding: var(--v-3); border-radius: var(--v-r); background: var(--v-card);
  border: 1px solid var(--v-line);
}
.v2 .step2__mark {
  width: 32px; height: 32px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-sub);
  background: var(--v-line); color: var(--v-ink-2);
}
.v2 .step2.done .step2__mark { background: var(--v-green); color: #fff; }
.v2 .step2.now  { border-color: var(--v-green); background: var(--v-warm); }
.v2 .step2.now .step2__mark { background: var(--v-gold); color: #1B1608; }
.v2 .step2__t { font-size: var(--t-md); font-weight: 600; }
.v2 .step2__s { font-size: var(--t-sub); color: var(--v-ink-2); margin-top: 2px; }

/* ---------- Section heading -------------------------------------------- */
.v2 .sec { margin: var(--v-6) 0 var(--v-3); }
.v2 .sec h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; }
.v2 .sec p  { font-size: var(--t-sub); color: var(--v-ink-2); margin-top: 2px; }

/* ---------- Screen frame ----------------------------------------------- */
.v2 .scr { padding: var(--v-3) var(--v-3) calc(var(--v-8) + 40px); }
.v2 .scr--flush { padding-inline: 0; }
.v2 .bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: var(--v-3); padding: var(--v-3);
  background: color-mix(in srgb, var(--v-paper) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v-line);
}
.v2 .bar__t { font-size: var(--t-lg); font-weight: 700; }

/* ---------- Four-tab bar, large, concrete ------------------------------ */
.v2 .tabs2 {
  position: sticky; bottom: 0; z-index: 20; display: grid;
  grid-template-columns: repeat(4, 1fr); min-height: 74px;
  background: color-mix(in srgb, var(--v-card) 96%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--v-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.v2 .tabs2 button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; font-size: var(--t-min); font-weight: 600; color: var(--v-ink-2);
  padding: var(--v-2) 4px;
}
.v2 .tabs2 button .i { width: 26px; height: 26px; }
.v2 .tabs2 button[aria-current="page"] { color: var(--v-green); }
.v2 .tabs2 button[aria-current="page"] .i { transform: translateY(-1px); }

/* ---------- Floating assistant ----------------------------------------- */
.v2 .fab {
  position: fixed; inset-inline-end: var(--v-3); bottom: calc(74px + var(--v-3));
  z-index: 30; display: flex; align-items: center; gap: var(--v-2);
  min-height: 60px; padding: 0 var(--v-4); border-radius: 999px;
  background: var(--v-gold); color: #1B1608; font-size: var(--t-md);
  font-weight: 700; box-shadow: 0 10px 28px rgba(176,138,52,.42);
}
.v2 .fab .i { width: 24px; height: 24px; }

/* ---------- Language picker (first run) -------------------------------- */
.v2 .lang { display: grid; gap: var(--v-2); }
.v2 .lang button {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; padding: 0 var(--v-4); border-radius: var(--v-r);
  background: var(--v-card); border: 2px solid var(--v-line);
  font-size: var(--t-xl); font-weight: 600; color: inherit;
}
.v2 .lang button[aria-pressed="true"] {
  border-color: var(--v-green); background: var(--v-warm);
}
.v2 .lang small { font-size: var(--t-sub); color: var(--v-ink-2); font-weight: 500; }

/* ---------- Chat ------------------------------------------------------- */
.v2 .msg { max-width: 86%; padding: var(--v-3); border-radius: 20px;
  font-size: var(--t-body); line-height: 1.5; }
.v2 .msg--them { background: var(--v-card); border: 1px solid var(--v-line);
  border-bottom-left-radius: 6px; }
.v2 .msg--me { background: var(--v-green); color: #fff; margin-inline-start: auto;
  border-bottom-right-radius: 6px; }
.v2 .msg + .msg { margin-top: var(--v-2); }

/* ---------- Website: cinematic ----------------------------------------- */
.v2 .w-hero { position: relative; min-height: 88vh; display: grid; }
.v2 .w-hero .ph { position: absolute; inset: 0; border-radius: 0; }
.v2 .w-hero__in {
  position: relative; z-index: 2; align-self: end;
  padding: var(--v-7) var(--v-4) var(--v-7); color: #fff; max-width: 900px;
}
.v2 .w-hero h1 {
  font-size: clamp(34px, 7vw, 68px); line-height: 1.08; font-weight: 700;
  letter-spacing: -0.03em; margin-bottom: var(--v-3);
}
.v2 .w-hero p { font-size: clamp(17px, 2.4vw, 22px); color: rgba(255,255,255,.86);
  max-width: 40ch; margin-bottom: var(--v-4); }
.v2 .w-sec { padding: var(--v-8) var(--v-4); max-width: 1180px; margin-inline: auto; }
.v2 .w-sec h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.15;
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--v-3); }
.v2 .w-sec p.lead2 { font-size: var(--t-md); color: var(--v-ink-2);
  max-width: 56ch; margin-bottom: var(--v-5); }
.v2 .w-grid { display: grid; gap: var(--v-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.v2 .w-card { background: var(--v-card); border: 1px solid var(--v-line);
  border-radius: var(--v-r-lg); overflow: hidden; }
.v2 .w-card__body { padding: var(--v-4); }
.v2 .w-card h3 { font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--v-2); }
.v2 .w-card p { font-size: var(--t-body); color: var(--v-ink-2); }
.v2 .w-quote { font-size: clamp(20px, 3vw, 30px); line-height: 1.4;
  font-weight: 600; letter-spacing: -0.01em; max-width: 22ch; }

/* ---------- Utility ----------------------------------------------------- */
.v2 .mt2 { margin-top: var(--v-2); } .v2 .mt3 { margin-top: var(--v-3); }
.v2 .mt4 { margin-top: var(--v-4); } .v2 .mt5 { margin-top: var(--v-5); }
.v2 .rowb { display: flex; align-items: center; gap: var(--v-3); }
.v2 .stack2 { display: flex; flex-direction: column; }
.v2 .muted2 { color: var(--v-ink-2); }
.v2 .sub { font-size: var(--t-sub); }
.v2 .center2 { text-align: center; }
[dir="rtl"] .v2 .big__go { transform: scaleX(-1); }

@media print { .v2 .tabs2, .v2 .fab, .v2 .bar { display: none !important; } }

/* ---------- Focus ----------------------------------------------------------
   v2.css shipped with no focus styles at all. Keyboard and switch users need
   a visible ring on every interactive element, sized for a 55-year-old eye. */
.v2 :focus-visible {
  outline: 3px solid var(--v-green);
  outline-offset: 3px;
  border-radius: 10px;
}
.v2 .today :focus-visible,
.v2 .w-hero :focus-visible { outline-color: #FFFFFF; }