/**
 * liwan.css — LIWAN design system for the Fasih public site.
 *
 * Tokens are copied verbatim from pwa/src/styles/tokens.css (same names, same
 * values) — the site and the product share one visual language. Keep in sync.
 *
 * Theme: dark-first "Night Majlis" — warm near-black, restrained, premium.
 * No orientalist kitsch. One sadu-diamond band motif allowed as a thin divider
 * at <=12% opacity (.sadu-band below).
 *
 * Sections:
 *   1. Fonts (Google CDN — this is a website; no CSP/offline constraint)
 *   2. Tokens (:root)
 *   3. Base + type scale + Arabic display
 *   4. Shared components (.btn, .card, .chip, .hairline, .sadu-band, .section,
 *      .eyebrow, .input, footer, layout helpers)
 *   5. Phone-frame mockup primitives (.phone + .m-* — recreate the product UI)
 *   6. Accessibility + reduced motion
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ── 2. Tokens — mirror of pwa/src/styles/tokens.css ─────────────────────── */

:root {
  /* Color — core */
  --night: #18130E;            /* Majlis Night — ground (warm near-black) */
  --oud: #241C14;              /* Oud — raised surfaces: cards, bubbles */
  --oud-2: #2E241A;            /* second elevation step */
  --pearl: #F2E9DC;            /* Pearl — primary text + the "lit" state */
  --oasis: #46B5A4;            /* Oasis — actions, ring arc, Fasih's presence */
  --karak: #D9A05B;            /* Karak — automaticity family, gold moments */
  --sadu: #DF6E57;             /* Sadu — memory-check / retention family */
  --sadu-numeral: #E8836D;     /* Sadu lifted — LARGE numerals only */

  /* Color — derived neutrals & tints */
  --dune: #A89684;                          /* muted text */
  --line: rgba(242, 233, 220, 0.10);        /* hairlines */
  --tint-oasis: rgba(70, 181, 164, 0.12);
  --tint-karak: rgba(217, 160, 91, 0.12);
  --tint-sadu: rgba(223, 110, 87, 0.12);
  --sand-bubble: #332A1F;                   /* user bubble — "Sand at night" */

  /* Color — semantic */
  --success: var(--oasis);
  --warn: var(--karak);
  --error: #E06C5B;
  --tint-error: rgba(224, 108, 91, 0.12);

  /* Type stacks */
  --font-ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-arabic-display: 'Noto Naskh Arabic', 'Amiri', 'Scheherazade New', serif;

  /* Radius */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 100px;
  --r-spoken: 8px;             /* bubble "spoken-from" corner toward speaker */

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --gutter: 20px;
  --block-gap: 12px;
  --card-pad: 16px;
  --card-pad-lg: 18px;

  /* Motion — calm and few */
  --t-fast: 140ms;
  --t-std: 220ms;
  --t-reveal: 320ms;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
}

/* ── 3. Base ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--pearl);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;            /* no horizontal body scroll, ever */
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--oasis); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pearl); }

/* Type scale */
h1, .display {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h2, .section-title {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-2); }

p { margin: 0 0 var(--space-4); }

.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--dune);
  max-width: 62ch;
}

.muted { color: var(--dune); }
.tnum { font-variant-numeric: tabular-nums; }

/* Arabic — Naskh display. Add dir="rtl" lang="ar" on the element.
   Never letter-spaced, line-height >= 1.9. */
.arabic-display {
  font-family: var(--font-arabic-display);
  direction: rtl;
  unicode-bidi: isolate;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.9;
  letter-spacing: 0;
  font-weight: 500;
}

.arabic-inline {
  font-family: var(--font-arabic-display);
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.2em;
  line-height: 1.9;
  letter-spacing: 0;
}

/* ── 4. Shared components ────────────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--oasis);
  color: var(--night);
  font: 600 1rem/1.2 var(--font-ui);
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--t-fast) var(--ease-std),
    box-shadow var(--t-fast) var(--ease-std),
    background var(--t-fast) var(--ease-std),
    color var(--t-fast) var(--ease-std);
}
.btn:hover {
  color: var(--night);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(70, 181, 164, 0.28);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--pearl);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-ghost:hover {
  color: var(--pearl);
  background: rgba(242, 233, 220, 0.05);
  border-color: rgba(242, 233, 220, 0.24);
  box-shadow: none;
}

/* Card */
.card {
  background: var(--oud);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--card-pad-lg);
}
.card--raised { background: var(--oud-2); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 0.72rem/1 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(242, 233, 220, 0.07);
  color: var(--dune);
  white-space: nowrap;
}
.chip--oasis { background: var(--tint-oasis); color: var(--oasis); }
.chip--karak { background: var(--tint-karak); color: var(--karak); }
.chip--sadu  { background: var(--tint-sadu);  color: var(--sadu); }

/* Hairline divider (use on <hr> or a <div>) */
.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* Sadu diamond band — the ONE permitted motif; thin divider, <=12% opacity.
   Use on <hr class="sadu-band"> or an empty <div>. */
.sadu-band {
  border: 0;
  height: 8px;
  margin: var(--space-6) 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='8'%3E%3Cpath%20d='M7%201%2012%204%207%207%202%204Z'%20fill='%23DF6E57'%20fill-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 14px 8px;
  background-position: center;
}

/* Section rhythm + content columns */
.section { padding: clamp(56px, 10vw, 104px) var(--gutter); }
.section--tight { padding-block: clamp(36px, 6vw, 64px); }

.wrap { max-width: 1100px; margin-inline: auto; }
.wrap--narrow { max-width: 72ch; margin-inline: auto; }

/* Anything wide (tables, code, diagrams) scrolls in its OWN container */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.grid-2, .grid-3 { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Eyebrow — small uppercase kicker above section titles */
.eyebrow {
  display: block;
  font: 600 0.78rem/1.2 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--dune);
  margin: 0 0 var(--space-3);
}

/* Form input (waitlist) */
.input {
  width: 100%;
  background: var(--oud);
  border: 1px solid var(--line);
  color: var(--pearl);
  font: 400 1rem/1.3 var(--font-ui);
  padding: 13px 20px;
  border-radius: var(--r-pill);
}
.input::placeholder { color: var(--dune); }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.form-row .input { flex: 1 1 240px; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-6) var(--gutter) 48px;
  color: var(--dune);
  font-size: 0.85rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: center;
}
.site-footer a { color: var(--dune); text-decoration: none; }
.site-footer a:hover { color: var(--pearl); }

/* ── 5. Phone-frame mockup primitives ────────────────────────────────────── */
/* A CSS phone that recreates the real product UI. Structure:
   <div class="phone [phone--tilt]"><div class="phone-screen"> …m-* blocks… </div></div> */

.phone {
  width: 320px;
  max-width: 100%;
  background: var(--oud-2);
  border: 1px solid rgba(242, 233, 220, 0.14);
  border-radius: 36px;
  padding: 11px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.phone--tilt {
  transform: perspective(1400px) rotateY(-9deg) rotateX(2deg) rotate(-1deg);
}

.phone-screen {
  position: relative;
  height: 636px;               /* frame totals ~660px tall */
  background: var(--night);
  border: 1px solid rgba(242, 233, 220, 0.06);
  border-radius: 26px;
  overflow: hidden;
  padding: 18px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.phone-screen::after {         /* home indicator */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 96px;
  height: 4px;
  border-radius: 2px;
  background: rgba(242, 233, 220, 0.18);
}

/* Mock in-app top bar: <div class="m-topbar"><span>…</span><span>…</span></div> */
.m-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 0.72rem/1 var(--font-ui);
  color: var(--dune);
  letter-spacing: 0.04em;
  padding: 2px 2px 4px;
}

/* Goal ring — conic oasis arc on an oud disc.
   <div class="m-ring" style="--ring-pct: 41">
     <div class="m-ring-disc">
       <span class="m-ring-num">7</span>
       <span class="m-ring-sub">of 17 automatic</span>
     </div>
   </div> */
.m-ring {
  --ring-pct: 41;              /* 7 of 17 */
  --ring-size: 148px;
  --ring-w: 10px;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(var(--oasis) calc(var(--ring-pct) * 1%), var(--oud-2) 0);
  display: grid;
  place-items: center;
  margin-inline: auto;
  flex-shrink: 0;
}
.m-ring-disc {
  width: calc(var(--ring-size) - var(--ring-w) * 2);
  height: calc(var(--ring-size) - var(--ring-w) * 2);
  border-radius: 50%;
  background: var(--oud);
  display: grid;
  place-content: center;
  justify-items: center;
  row-gap: 3px;
  text-align: center;
}
.m-ring-num {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
}
.m-ring-sub { font-size: 0.72rem; line-height: 1.3; color: var(--dune); }

/* Scene card — sadu hairline top.
   <div class="m-scene">
     <div class="m-scene-title">The karak run</div>
     <div class="m-scene-ar" dir="rtl" lang="ar">مشوار الكرك</div>
     <div class="m-scene-row">
       <span class="m-scene-meta">10 phrases due</span>
       <span class="m-scene-start">Start</span>
     </div>
   </div> */
.m-scene {
  background: var(--oud);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(223, 110, 87, 0.45);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.m-scene-title { font-size: 0.95rem; font-weight: 600; }
.m-scene-ar {
  font-family: var(--font-arabic-display);
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
  font-size: 1.45rem;
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--pearl);
}
.m-scene-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.m-scene-meta { font-size: 0.8rem; color: var(--dune); }
.m-scene-start {
  background: var(--oasis);
  color: var(--night);
  font: 600 0.8rem/1 var(--font-ui);
  padding: 9px 20px;
  border-radius: var(--r-pill);
}

/* Drill — the sacred gap. Dim chrome rows around ONE lit prompt + mic.
   <div class="m-drill">
     <div class="m-drill-dim"><div class="m-skel m-skel--w40"></div></div>
     <div class="m-drill-card">
       <div class="m-drill-kicker">Say it in Arabic — from memory</div>
       <div class="m-drill-prompt">“How much is this?”</div>
     </div>
     <div class="m-drill-dim"><div class="m-skel m-skel--w70"></div></div>
     <div class="m-mic" aria-hidden="true"></div>
   </div> */
.m-drill {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  flex: 1;
}
.m-drill-dim { opacity: 0.4; display: flex; flex-direction: column; gap: var(--space-2); }

.m-skel { height: 10px; border-radius: 6px; background: var(--oud-2); }
.m-skel--w40 { width: 40%; }
.m-skel--w55 { width: 55%; }
.m-skel--w70 { width: 70%; }

.m-drill-card {
  background: var(--oud);
  border: 1px solid rgba(70, 181, 164, 0.35);
  border-radius: var(--r-md);
  padding: var(--card-pad-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow:
    0 0 0 4px rgba(70, 181, 164, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.35);
}
.m-drill-kicker {
  font: 600 0.68rem/1.3 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dune);
}
.m-drill-prompt { font-size: 1.05rem; font-weight: 600; line-height: 1.45; }

/* Mic — pearl ring glowing oasis */
.m-mic {
  position: relative;
  width: 64px;
  height: 64px;
  margin: var(--space-2) auto 0;
  border-radius: 50%;
  border: 2px solid var(--pearl);
  background: var(--tint-oasis);
  box-shadow:
    0 0 0 8px rgba(70, 181, 164, 0.12),
    0 0 30px rgba(70, 181, 164, 0.35);
  flex-shrink: 0;
}
.m-mic::before {               /* mic capsule */
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 16px;
  border-radius: 6px;
  background: var(--pearl);
}
.m-mic::after {                /* mic cradle arc */
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 19px;
  height: 13px;
  border: 2px solid var(--pearl);
  border-top: 0;
  border-radius: 0 0 11px 11px;
}

/* Proof — retention curve + automaticity band.
   <div class="m-proof">
     <div class="m-proof-title">Recalled cold, day 7</div>
     <svg class="m-proof-svg" viewBox="0 0 260 80" role="img" aria-label="Retention curve ending at 82%">
       <polyline class="m-proof-base" points="10,10 60,40 110,56 160,64 236,70"/>
       <polyline class="m-proof-line" points="10,10 55,26 60,16 105,30 110,19 155,32 160,21 210,33 236,24"/>
       <circle class="m-proof-dot" cx="236" cy="24" r="4"/>
       <text class="m-proof-num" x="236" y="12" text-anchor="middle">82%</text>
     </svg>
     <div class="m-band">
       <div class="m-band-seg m-band-seg--dune" style="flex:3">3</div>
       <div class="m-band-seg m-band-seg--oasis" style="flex:7">7</div>
       <div class="m-band-seg m-band-seg--karak" style="flex:7">7</div>
     </div>
     <div class="m-band-legend">
       <span><i class="m-dot m-dot--dune"></i>learning</span>
       <span><i class="m-dot m-dot--oasis"></i>retrieval</span>
       <span><i class="m-dot m-dot--karak"></i>automatic</span>
     </div>
   </div> */
.m-proof {
  background: var(--oud);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.m-proof-title { font-size: 0.8rem; font-weight: 600; color: var(--dune); }
.m-proof-svg { display: block; width: 100%; height: auto; }
.m-proof-line {
  fill: none;
  stroke: var(--oasis);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-proof-base {
  fill: none;
  stroke: var(--dune);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  opacity: 0.5;
}
.m-proof-dot { fill: var(--sadu); }
.m-proof-num {
  fill: var(--sadu-numeral);
  font: 700 13px var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.m-band {
  display: flex;
  gap: 3px;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
}
.m-band-seg {
  display: grid;
  place-items: center;
  font: 600 0.74rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}
.m-band-seg--dune  { background: rgba(168, 150, 132, 0.24); color: var(--dune); }
.m-band-seg--oasis { background: rgba(70, 181, 164, 0.26);  color: var(--oasis); }
.m-band-seg--karak { background: rgba(217, 160, 91, 0.26);  color: var(--karak); }

.m-band-legend {
  display: flex;
  gap: var(--space-4);
  font-size: 0.68rem;
  color: var(--dune);
}
.m-band-legend span { display: inline-flex; align-items: center; gap: 5px; }
.m-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.m-dot--dune  { background: var(--dune); }
.m-dot--oasis { background: var(--oasis); }
.m-dot--karak { background: var(--karak); }

/* Chat bubbles — Fasih left (oud), user right (sand). "Spoken-from" corner.
   <div class="m-bubble m-bubble--fasih">هلا والله! …</div>
   <div class="m-bubble m-bubble--user">شحالك</div> */
.m-bubble {
  width: fit-content;
  max-width: 86%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.55;
}
.m-bubble--fasih {
  background: var(--oud);
  border: 1px solid var(--line);
  border-bottom-left-radius: var(--r-spoken);
  align-self: flex-start;
  margin-right: auto;
}
.m-bubble--user {
  background: var(--sand-bubble);
  border-bottom-right-radius: var(--r-spoken);
  align-self: flex-end;
  margin-left: auto;
}
.m-bubble .arabic-inline { font-size: 1.15rem; }

/* Automaticity chip — karak gold moment.
   <span class="m-chip-auto">Automatic</span> */
.m-chip-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  background: var(--tint-karak);
  color: var(--karak);
  font: 700 0.66rem/1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.m-chip-auto::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--karak);
}

/* ── 6. Accessibility + motion ───────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--oasis);
  outline-offset: 2px;
}
.input:focus-visible { outline-offset: 1px; }

::selection { background: rgba(70, 181, 164, 0.30); color: var(--pearl); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;   /* motion collapses to opacity */
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
}