/* Saudi AI Passport — app shell. Built on tokens from ../assets/styles.css. */

:root{ --nav-h:66px; --line:rgba(201,162,75,.28); --line-2:rgba(201,162,75,.5);
       --panel:#0d2a20; --panel-2:#0f3327; --ink:#EAE3D2; --dim:#a9bcb0; }

html,body{ height:100%; }
body{ overflow:hidden; }                 /* app scrolls inside .app-main */
#app{ height:100dvh; display:flex; justify-content:center; }

.app-shell{ position:relative; z-index:1; width:100%; max-width:480px; height:100dvh;
  display:flex; flex-direction:column; background:linear-gradient(180deg,var(--palm),var(--palm-shadow)); }

/* ---------- top bar ---------- */
.app-top{ flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px; border-bottom:1px solid var(--line); }
.app-top .stat{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--ink); }
.app-top .stat svg{ width:18px; height:18px; }
.hearts{ display:flex; gap:4px; }
.heart svg{ width:16px; height:16px; display:block; }
.heart.empty{ opacity:.32; }
.streak-flame{ color:var(--gold-light); }
.grow{ flex:1; }
.mini-xp{ height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; width:84px; }
.mini-xp > i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:99px; transition:width .5s cubic-bezier(.16,1,.3,1); }

/* ---------- main scroll ---------- */
.app-main{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding:22px 18px calc(var(--nav-h) + env(safe-area-inset-bottom) + 22px); }
.screen-eyebrow{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-light); font-weight:700; margin-bottom:6px; }
.screen-title{ font-family:var(--ar); font-weight:800; font-size:26px; color:var(--paper); margin-bottom:4px; }
.screen-sub{ color:var(--dim); font-size:14px; margin-bottom:20px; }

/* ---------- journey header: title + progress ring + Saud guide (exact DS spec) ---------- */
.jmap-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:2px 2px 16px; }
.jmap-header .jh-text{ min-width:0; }
.jmap-header .screen-title{ margin:6px 0 8px; font-size:24px; line-height:1.3; }
.jmap-header--simple{ display:block; padding:8px 2px 20px; }
.jmap-title{ font-size:30px; line-height:1.34; margin:0; text-align:right; }
.jmap-sub{ color:var(--dim); font-family:var(--ar-body); font-size:13px; line-height:1.7; direction:rtl; margin:0; }
.jmap-ringwrap{ position:relative; flex:0 0 auto; display:grid; place-items:center; }
.jmap-ringtxt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--ar); font-weight:800; font-size:19px; color:var(--gold-light); line-height:1; }
.jmap-ringtxt i{ font-style:normal; opacity:.45; margin:0 1px; }
.jmap-ringtxt small{ font-size:8px; letter-spacing:.14em; color:var(--muted); margin-top:3px; font-weight:600; }
.jmap-guide{ margin:0 2px 16px; }
.sap-guide{ display:inline-flex; align-items:center; gap:10px; }
.sap-guide-av{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--gold-face); color:#0C3B2E;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(201,162,75,.4); border:2px solid var(--gold-foil); }
.sap-guide-av svg{ width:24px; height:24px; }
.sap-guide-bubble{ position:relative; background:var(--panel); border:1px solid var(--edge); border-radius:12px;
  padding:9px 13px; direction:rtl; text-align:right; max-width:220px; }
.sap-guide-bubble .nm{ display:block; font-family:var(--ar); font-weight:800; font-size:13px; color:var(--gold-light); }
.sap-guide-bubble .note{ display:block; font-family:var(--ar-body); font-size:12.5px; color:var(--ink); line-height:1.6; margin-top:2px; }
.sap-guide-bubble::after{ content:""; position:absolute; inset-inline-end:-6px; top:16px; width:10px; height:10px;
  background:var(--panel); border-inline-end:1px solid var(--edge); border-top:1px solid var(--edge); transform:rotate(45deg); }

/* ---------- diwan podium (exact DS spec) ---------- */
.podium{ display:flex; justify-content:center; align-items:flex-end; gap:12px; margin-bottom:18px; }
.pod-col{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; max-width:120px; }
.pod-av{ position:relative; width:64px; height:64px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(231,206,143,.2),transparent 70%); border:1.5px solid var(--edge-strong);
  font:800 20px var(--ar); color:var(--gold-light); }
.pod-col.p1 .pod-av{ width:74px; height:74px; border-color:var(--gold); }
.pod-av.me{ border-color:var(--gold); background:radial-gradient(circle at 35% 30%,rgba(231,206,143,.32),rgba(201,162,75,.14) 70%); }
.pod-crown{ position:absolute; top:-16px; color:var(--gold-light); }
.pod-crown svg{ width:22px; height:22px; }
.pod-nm{ font:700 13px var(--ar); color:var(--paper); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-xp{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--gold-light); }
.pod-base{ width:100%; border-radius:6px 6px 0 0; background:linear-gradient(rgba(201,162,75,.22),rgba(201,162,75,.05));
  display:grid; place-items:center; font-family:var(--serif); font-weight:800; color:var(--gold-light); font-size:20px; }
.pod-col.p1 .pod-base{ height:78px; }
.pod-col.p2 .pod-base{ height:58px; }
.pod-col.p3 .pod-base{ height:42px; }

/* ---------- profile tier ladder (exact DS spec) ---------- */
.tier-row{ display:flex; gap:8px; overflow-x:auto; margin:10px 0 20px; padding-bottom:4px; scrollbar-width:none; }
.tier-row::-webkit-scrollbar{ display:none; }
.tier-row > *{ flex:0 0 auto; }
.tier-pill{ display:inline-flex; align-items:center; gap:8px; padding:5px 14px; border:1px solid var(--edge); border-radius:var(--r-pill);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--text-2); background:rgba(12,59,46,.5); white-space:nowrap; }
.tier-pill i{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.tier-pill.active{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,75,.08); }

/* ---------- journey / cities ---------- */
.city{ position:relative; overflow:hidden; border:1px solid var(--edge); border-radius:var(--r-sm); padding:16px 16px 14px;
  margin-bottom:16px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); box-shadow:var(--engrave); }
/* guilloché security lattice fading behind the card header (matches --engrave official-document look) */
.city::before{ content:""; position:absolute; top:6px; left:6px; right:6px; height:104px; border-radius:4px;
  background-image:var(--guilloche); opacity:.6; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 58%,transparent 100%);
  mask-image:linear-gradient(rgba(0,0,0,.95) 0%,rgba(0,0,0,.55) 58%,transparent 100%); }
.city > *{ position:relative; z-index:1; }
.city.locked{ opacity:.55; }
.city-head{ display:flex; align-items:center; gap:12px; }
.city-seal{ position:relative; width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; }
.city-seal.completed{ filter:drop-shadow(0 4px 14px rgba(201,162,75,.4)); }
.city-seal .seal-badge{ position:absolute; right:-3%; bottom:-3%; width:36%; height:36%; display:grid; place-items:center; border-radius:50%;
  background:var(--gold-face); color:#0C3B2E; border:1.5px solid var(--gold-foil); box-shadow:0 2px 7px rgba(0,0,0,.45); }
.city-seal .seal-badge svg{ width:62%; height:62%; stroke-width:3; }
.city-seal .seal-ring{ position:absolute; inset:-7%; border-radius:50%; border:2px solid var(--gold-light); animation:sap-pulse 2.4s var(--ease) infinite; }
.city-seal.locked{ filter:grayscale(1) brightness(.85); opacity:.6; }
.city-seal .seal-lock{ position:absolute; inset:0; display:grid; place-items:center; color:var(--gold-light); border-radius:50%;
  background:radial-gradient(circle,rgba(6,20,15,.55),rgba(6,20,15,.15) 70%); }
.city-seal .seal-lock svg{ width:34%; height:34%; }
@keyframes sap-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,206,143,.5); } 50%{ box-shadow:0 0 0 8px rgba(231,206,143,0); } }
.city-titles{ display:flex; flex-direction:column; }
.city-ar{ font-family:var(--ar); font-weight:800; font-size:19px; color:var(--paper); direction:rtl; }
.city-en{ display:block; direction:ltr; font-size:12px; letter-spacing:.05em; color:var(--dim); }
.city-tier{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 10px; border:1px solid var(--edge-strong); border-radius:var(--r-pill); color:var(--gold-light); font-weight:700; white-space:nowrap; }
.city-blurb{ color:var(--dim); font-size:13px; direction:rtl; text-align:right; margin:8px 0 4px; line-height:1.7; }

.skill{ display:flex; align-items:center; gap:12px; width:100%; text-align:start;
  background:transparent; border:none; border-top:1px solid var(--line); padding:12px 2px; cursor:pointer; color:var(--ink); }
.skill:disabled{ cursor:default; }
.node{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--line-2); background:radial-gradient(circle at 35% 30%,rgba(231,206,143,.18),transparent 70%); }
.node.done{ background:radial-gradient(circle at 35% 30%,#F3E3B8,#C9A24B 60%,#8A6A2E); border-color:#E7CE8F; box-shadow:0 4px 14px rgba(201,162,75,.35); }
.node svg{ width:22px; height:22px; color:#221803; }
.node.locked svg,.node:not(.done) svg{ color:var(--gold-light); }
.skill-body{ flex:1; }
.skill-ar{ font-family:var(--ar); font-weight:700; font-size:15px; color:var(--paper); direction:rtl; }
.skill-en{ font-size:11px; color:var(--dim); }
.skill-cta{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); white-space:nowrap; }

/* ---------- lesson player (full-screen overlay) ---------- */
.lesson{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--palm-shadow),var(--palm) 70%); }
.lesson-head{ display:flex; align-items:center; gap:14px; padding:calc(env(safe-area-inset-top) + 12px) 16px 10px; }
.icon-btn{ width:40px; height:40px; display:grid; place-items:center; border:none; background:transparent; color:var(--dim); cursor:pointer; border-radius:8px; }
.icon-btn:hover{ background:rgba(255,255,255,.06); }
.bar{ flex:1; height:12px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius:99px; transition:width .35s cubic-bezier(.16,1,.3,1); }
.lesson-body{ flex:1; overflow-y:auto; padding:14px 20px 20px; }
.ex-q{ font-family:var(--serif); font-size:15px; color:var(--dim); margin-bottom:4px; }
.ex-q-ar{ font-family:var(--ar); font-weight:700; font-size:21px; color:var(--paper); direction:rtl; text-align:right; line-height:1.6; margin-bottom:22px; }

.choice{ display:flex; flex-direction:column; gap:2px; width:100%; text-align:right; direction:rtl;
  border:1.5px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px;
  background:rgba(255,255,255,.03); color:var(--paper); cursor:pointer; transition:border-color .15s, background .15s, transform .08s; min-height:48px; }
.choice:hover{ border-color:var(--line-2); }
.choice:active{ transform:scale(.99); }
.choice .en{ font-size:12px; color:var(--dim); direction:ltr; text-align:left; }
.choice.sel{ border-color:var(--gold); background:rgba(201,162,75,.1); }
.choice.correct{ border-color:#5bbf8a; background:rgba(21,127,90,.22); }
.choice.wrong{ border-color:#d98a8a; background:rgba(190,70,70,.18); }

/* order / assemble */
.order-tray,.order-pool{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.order-tray{ min-height:56px; border:1.5px dashed var(--line); border-radius:10px; padding:10px; }
.chip{ border:1.5px solid var(--line-2); border-radius:8px; padding:12px 14px; background:rgba(255,255,255,.04);
  color:var(--paper); cursor:pointer; direction:rtl; text-align:right; min-height:44px; }
.chip .en{ font-size:11px; color:var(--dim); direction:ltr; text-align:left; }
.chip.correct{ border-color:#5bbf8a; } .chip.wrong{ border-color:#d98a8a; }

/* match */
.match-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.match-col{ display:flex; flex-direction:column; gap:10px; }
.match-item{ border:1.5px solid var(--line); border-radius:8px; padding:12px; background:rgba(255,255,255,.03);
  color:var(--paper); cursor:pointer; text-align:center; min-height:48px; direction:rtl; font-size:14px; }
.match-item .en{ display:block; font-size:11px; color:var(--dim); }
.match-item.sel{ border-color:var(--gold); background:rgba(201,162,75,.12); }
.match-item.done{ opacity:.35; pointer-events:none; border-color:#5bbf8a; }

/* feedback + foot */
/* the verdict is the top layer of the whole screen, centred — it never grows the card,
   never scrolls away with the content it is judging, and can't be missed */
.feedback{ position:fixed; z-index:90; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(84vw,340px); padding:20px 18px 18px; border-radius:18px;
  direction:rtl; text-align:center; display:none; backdrop-filter:blur(10px);
  box-shadow:0 18px 60px rgba(0,0,0,.55); }
.feedback.show{ display:block; animation:fb-pop .3s cubic-bezier(.2,1.5,.4,1) both; }
.feedback{ max-height:70vh; overflow-y:auto; }        /* three coach notes must not run off-screen */
/* Mid-conversation the learner has to EDIT the answer this panel is talking about — so it
   drops to the bottom and stops covering the textarea. On the final verdict it re-centers. */
.feedback.chat{ top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 92px); transform:translateX(-50%);
  width:min(92vw,420px); max-height:44vh; animation:none; }
.feedback.chat::before{ width:0; height:0; margin:0; content:''; }
.feedback.ok{ background:rgba(21,127,90,.95); border:1px solid #5bbf8a; }
.feedback.no{ background:rgba(150,52,52,.95); border:1px solid #d98a8a; }
/* the verdict badge — the part you read from across the room */
.feedback::before{ display:grid; place-items:center; width:62px; height:62px; margin:0 auto 12px;
  border-radius:50%; font:700 34px/1 system-ui, sans-serif;
  background:rgba(255,255,255,.95); animation:fb-mark .42s .06s cubic-bezier(.2,1.6,.4,1) both; }
.feedback.ok::before{ content:'✓'; color:#12704f; }
.feedback.no::before{ content:'✕'; color:#8f2f2f; }
.feedback b{ color:var(--paper); font:800 19px var(--ar); }
.feedback p{ color:var(--ink); font-size:13.5px; margin-top:7px; line-height:1.75; }
.fb-hint{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:13px; font:700 12.5px var(--ar);
  color:var(--paper); opacity:.85; font-style:normal; }
.fb-hint svg{ width:17px; height:17px; }
@keyframes fb-pop{ from{ opacity:0; transform:translate(-50%,-50%) scale(.82) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
@keyframes fb-mark{ 0%{ opacity:0; transform:scale(.3) rotate(-18deg) } 100%{ opacity:1; transform:none } }

/* one-time gesture tour — the card owns the screen after this.
   NOT `.tour`: that name is already taken by the iOS install mini-tour further down
   (position:relative; height:210px), which would win on order and drop this into flow. */
.swipe-tour{ position:absolute; inset:0; z-index:20; background:rgba(6,20,15,.86); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:26px; animation:fb-in .24s ease both; }
.st-box{ width:100%; max-width:330px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:22px 20px; direction:rtl; text-align:right; }
.st-h{ font:900 21px var(--ar); color:var(--paper); margin-bottom:16px; text-align:center; }
.st-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line); }
.st-row:first-of-type{ border-top:0; }
.st-row b{ font:800 15px var(--ar); color:var(--paper); flex:0 0 auto; }
.st-row i{ font:500 12px var(--ar); font-style:normal; color:var(--dim); line-height:1.5; }
.st-ic{ flex:0 0 40px; height:40px; border-radius:11px; display:grid; place-items:center; }
.st-ic svg{ width:22px; height:22px; }
.st-ic.yes{ background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#0C3B2E; }
.st-ic.save{ background:rgba(255,255,255,.07); color:var(--paper); }
.st-ic.no{ background:rgba(176,96,96,.18); color:#f0c9c9; }
.st-box .btn-lg{ margin-top:16px; }

/* Saud's intro card */
.saud-card{ text-align:center; direction:rtl; }
.saud-av.lg{ width:74px; height:74px; margin:6px auto 12px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#0C3B2E; }
.saud-av.lg svg{ width:38px; height:38px; }
.saud-card h3{ text-align:center; }
.saud-card p{ text-align:center; }
.saud-play.lg{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 20px;
  border-radius:99px; background:rgba(201,162,75,.14); border:1px solid var(--line);
  font:700 13px var(--ar); color:var(--gold-light); }
.saud-play.lg svg{ width:17px; height:17px; }

/* reading card (unscored content between exercises) */
.read-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 18px; direction:rtl; text-align:right; }
.read-eyebrow{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-light); font-weight:700; margin-bottom:10px; }
.read-card h3{ font-family:var(--ar); font-weight:800; font-size:20px; color:var(--paper); margin-bottom:10px; }
.read-card p{ color:var(--ink); font-size:15.5px; line-height:2; }
.read-card p.en{ color:var(--dim); font-size:12.5px; line-height:1.65; direction:ltr; text-align:left; margin-top:12px; border-top:1px solid var(--line); padding-top:12px; }
.lesson-foot{ padding:14px 20px calc(env(safe-area-inset-bottom) + 16px); border-top:1px solid var(--line); }
/* the swipe modes render no footer at all — collapse it so the card gets the whole screen
   instead of ~112px of empty bar and a stray divider */
.lesson-foot:empty{ display:none; }

/* ---------- project components (M16–M19) ---------- */
.watch-v{ width:100%; aspect-ratio:9/16; display:block; border-radius:10px; margin:4px 0 0; background:var(--palm-shadow);
  object-fit:cover; border:1px solid var(--line); }   /* aspect-ratio reserves the box before metadata loads */
/* a video card IS the video: it takes the whole card, not a slice of the top half. The clips
   render at 9:16 with captions inside a safe inset, so `cover` fills the card edge-to-edge
   without eating the words — no letterbox bars. */
.swipe-card > .lesson-body:has(.watch-v){ padding:0; overflow:hidden; }
.read-card:has(.watch-v){ height:100%; display:flex; flex-direction:column; justify-content:center;
  padding:0; border:0; background:transparent; }
.read-card:has(.watch-v) .watch-v{ flex:1; min-height:0; height:auto; aspect-ratio:auto;
  margin:0; border:0; border-radius:0; object-fit:cover; background:var(--palm-shadow); }
.read-card:has(.watch-v) > .read-eyebrow,
.read-card:has(.watch-v) > h3{ position:absolute; top:10px; inset-inline-end:14px; z-index:2; margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.65); }
.read-card:has(.watch-v) > h3{ top:26px; font-size:16px; }

/* Saud's one-time full-bleed self-introduction (showIntro) */
.lesson.intro{ z-index:70; padding:0; display:block; background:#000; }
.intro-v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--palm-shadow); }
.intro-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(6,20,15,.94) 0%, rgba(6,20,15,.55) 34%, rgba(6,20,15,0) 60%); pointer-events:none; }
.intro-card{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:0 24px calc(env(safe-area-inset-bottom) + 26px); text-align:center; }
.intro-card .saud-av.lg{ margin-bottom:8px; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.intro-card h2{ font:800 24px var(--ar); color:var(--gold-light); margin:0 0 8px; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.intro-lead{ font:400 14px/1.6 var(--ar-body); color:#EFE7D5; margin:0 auto 18px; max-width:34ch; text-shadow:0 1px 8px rgba(0,0,0,.7); }

.v-unmute{ display:block; width:100%; margin:8px 0 12px; padding:9px; border-radius:8px; cursor:pointer;
  font:700 12px var(--ar); color:var(--palm); background:var(--gold-light); border:0; }
.brief{ border:1px dashed var(--line-2); border-radius:12px; padding:14px; margin:2px 0 12px; background:rgba(201,162,75,.06); }
.brief-t{ font:800 18px var(--ar); color:var(--gold-light); margin-bottom:6px; }
.brief-d{ color:var(--ink); font-size:14px; line-height:1.9; }
.brief-list{ margin:10px 0 0; padding-inline-start:18px; color:var(--ink); font-size:13.5px; line-height:2; }
.brief-for{ margin-top:10px; padding-top:8px; border-top:1px solid var(--line-2); font:700 12px var(--ar); color:var(--gold); }

/* scenario */
.scen-body{ color:var(--ink); font-size:15px; line-height:2; direction:rtl; text-align:right;
  border-inline-start:3px solid var(--gold); padding-inline-start:12px; margin-bottom:14px; }
.scen-out{ color:var(--paper); font-size:13px; line-height:1.8; margin-top:6px; font-style:italic; }

/* sort */
.sort-buckets{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sort-bucket{ border:1.5px dashed var(--line); border-radius:10px; padding:10px; min-height:96px; }
.sb-h{ font:800 14px var(--ar); color:var(--gold-light); direction:rtl; text-align:center; margin-bottom:8px; }
.sb-h .en{ display:block; font:500 10px var(--sans); color:var(--dim); letter-spacing:.06em; }
.sb-items{ display:flex; flex-direction:column; gap:8px; }
.sb-items .chip{ padding:9px 10px; font-size:13px; min-height:0; }
.chip.sel{ border-color:var(--gold); background:rgba(201,162,75,.14); }

/* build / task / reflect */
.rubric{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; direction:rtl; text-align:right; background:rgba(255,255,255,.03); }
.rubric b{ color:var(--gold-light); font:800 13px var(--ar); }
.rubric ul{ margin:6px 0 0; padding-inline-start:18px; color:var(--ink); font-size:13px; line-height:1.9; }
.ta{ direction:rtl; text-align:right; font-family:var(--ar); line-height:1.9; resize:vertical; min-height:96px; }
.tfield{ display:block; margin-bottom:12px; }
.tfield > span{ display:block; font:700 13.5px var(--ar); color:var(--paper); direction:rtl; text-align:right; margin-bottom:6px; }
.skill-builds{ display:block; font:600 11px var(--ar); color:var(--gold-light); opacity:.85; direction:rtl; margin-top:2px; }

/* Saud narration (M22) */
.saud-play{ flex:0 0 auto; background:none; border:none; color:var(--gold-light); cursor:pointer; padding:2px; }
.saud-play svg{ width:18px; height:18px; }
/* coach transcript: one row per note Saud has given on this card */
.saud-line{ display:flex; align-items:flex-start; gap:8px; direction:rtl; text-align:right;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.saud-line:first-of-type{ border-top:none; padding-top:2px; }
.saud-line p{ flex:1 1 auto; margin:0; font-size:13.5px; line-height:1.85; }
.sl-n{ flex:0 0 auto; width:19px; height:19px; border-radius:50%; margin-top:2px;
  display:grid; place-items:center; font:700 11px var(--ar);
  color:var(--palm); background:var(--gold-light); }

/* R2 — اسأل سعود: the persistent affordance in the lesson head + its chat panel.
   The panel reuses .feedback.chat (bottom-docked card) and .saud-line, then adds a
   header, a scrolling log, and an input row on top. */
.ask-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto;
  padding:6px 11px; border-radius:99px; border:1px solid var(--line); cursor:pointer;
  background:rgba(201,162,75,.14); color:var(--gold-light); font:700 12px var(--ar); }
.ask-btn svg{ width:16px; height:16px; }
.ask-btn:hover{ background:rgba(201,162,75,.22); }
@media (max-width:360px){ .ask-btn span{ display:none; } }   /* icon-only when the head is tight */
.ask-panel{ display:none; flex-direction:column; gap:0; text-align:right;
  padding:12px 14px 14px; background:rgba(10,28,21,.97); border:1px solid var(--line); }
.ask-panel.show{ display:flex; }
.ask-panel::before{ content:none; width:0; height:0; margin:0; }
.ask-head{ display:flex; align-items:center; gap:9px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.ask-head b{ flex:1 1 auto; font:800 15px var(--ar); color:var(--paper); }
.ask-x{ width:32px; height:32px; }
.saud-av.sm{ width:30px; height:30px; }
.saud-av.sm svg{ width:17px; height:17px; }
.ask-log{ flex:1 1 auto; overflow-y:auto; max-height:32vh; }
.ask-hint{ font:500 12.5px var(--ar); color:var(--dim); line-height:1.7; padding:6px 2px; }
.ask-q{ margin:10px 0 2px; padding:8px 11px; border-radius:12px 12px 4px 12px; align-self:flex-start;
  max-width:88%; background:rgba(255,255,255,.07); color:var(--paper); font:600 13px var(--ar); line-height:1.7; }
.ask-line-typing p, .saud-line.typing p{ color:var(--dim); font-style:italic; }
.ask-row{ display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.ask-in{ flex:1 1 auto; min-width:0; padding:10px 12px; border-radius:12px; direction:rtl;
  background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--paper); font:500 13.5px var(--ar); }
.ask-in:focus{ outline:none; border-color:var(--gold-light); }
.ask-in:disabled{ opacity:.55; }
.ask-send{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  border:none; border-radius:12px; background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#0C3B2E; }
.ask-send svg{ width:19px; height:19px; }
.ask-send:disabled{ opacity:.5; cursor:default; }

/* artifact sheet — the exported project (print = PDF) */
.artifact-sheet{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 18px; direction:rtl; text-align:right; }
.art-head{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; }
.art-t{ font:800 18px var(--ar); color:var(--paper); }
.art-s{ font-size:12px; color:var(--dim); }
.art-d{ color:var(--dim); font-size:13px; line-height:1.9; margin-bottom:14px; }
.art-row{ border-top:1px solid var(--line); padding:12px 0; }
.art-row:first-of-type{ border-top:none; }
.art-lbl{ font:800 13px var(--ar); color:var(--gold-light); margin-bottom:4px; }
.art-val{ color:var(--ink); font-size:14.5px; line-height:1.9; white-space:pre-wrap; }
.art-row.todo .art-val{ color:var(--dim); font-style:italic; }
.art-foot{ margin-top:16px; border-top:1px solid var(--line); padding-top:10px; font-size:11px; color:var(--dim); text-align:center; letter-spacing:.06em; }
@media print{
  body{ overflow:visible; }
  .app-shell, .lesson-head, .lesson-foot, .app-nav, .app-top{ display:none !important; }
  #artv{ position:static !important; display:block !important; background:#fff !important; }
  #artv .app-main{ overflow:visible !important; padding:0 !important; }
  .artifact-sheet{ background:#fff !important; color:#111 !important; border-color:#999 !important; }
  .art-t,.art-val{ color:#111 !important; } .art-lbl{ color:#8A6A2E !important; } .art-s,.art-d,.art-foot{ color:#555 !important; }
}

/* ---------- buttons ---------- */
.btn-lg{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.03em; padding:16px; border-radius:8px; border:none; cursor:pointer; }
.btn-lg.gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark)); color:#221803; box-shadow:0 8px 26px rgba(201,162,75,.28); }
.btn-lg.gold:disabled{ opacity:.4; box-shadow:none; cursor:not-allowed; }
.btn-lg.ghost{ background:transparent; border:1px solid var(--line-2); color:var(--gold-light); }

/* ---------- results / stamp reveal ---------- */
/* the finish screen sits in the middle of the screen, not pinned under the top edge */
.results{ text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.results > *{ width:100%; }
.stamp-reveal{ width:150px; height:150px; margin:0 auto 18px; animation:stampIn .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stampIn{ 0%{ transform:scale(.4) rotate(-14deg); opacity:0; } 60%{ transform:scale(1.08) rotate(3deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.results h2{ font-family:var(--ar); font-size:26px; color:var(--paper); margin-bottom:6px; }
.results .stat-row{ display:flex; justify-content:center; gap:14px; margin:18px 0 26px; }
.stat-pill{ border:1px solid var(--line); border-radius:10px; padding:12px 16px; min-width:88px; }
.stat-pill .n{ font-size:22px; font-weight:800; color:var(--gold-light); font-variant-numeric:tabular-nums; }
.stat-pill .l{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
/* Profile stat tiles — a 3-up grid (4th tile drops to a second row) per the DS reference,
   not a full-width stack. */
.pf-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:4px; }
.pf-stats .stat-pill{ min-width:0; text-align:center; }

/* ---------- passport screen ---------- */
/* animated passport cover */
.passport-cover{ position:relative; overflow:hidden; border-radius:12px; padding:24px 20px 20px; margin-bottom:16px; text-align:center;
  background:linear-gradient(160deg,#0F4A3A,#0C3B2E 45%,#082B21);
  box-shadow:inset 0 0 0 3px rgba(8,43,33,.6), inset 0 0 0 4px rgba(231,206,143,.28), 0 14px 34px rgba(0,0,0,.4);
  animation:coverIn .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes coverIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.passport-cover::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(201,162,75,.35); border-radius:8px; pointer-events:none; }
.pc-sheen{ position:absolute; top:0; bottom:0; width:60%; left:-60%;
  background:linear-gradient(105deg,transparent,rgba(231,206,143,.14) 45%,rgba(243,227,184,.28) 50%,rgba(231,206,143,.14) 55%,transparent);
  animation:pcSheen 5.5s ease-in-out 1s infinite; pointer-events:none; }
@keyframes pcSheen{ 0%{ left:-60%; } 55%,100%{ left:120%; } }
.pc-seal{ display:inline-block; width:70px; height:70px; animation:pcPulse 3.2s ease-in-out infinite; filter:drop-shadow(0 3px 10px rgba(201,162,75,.4)); }
@keyframes pcPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.pc-title{ font-family:var(--ar); font-weight:800; font-size:22px; margin-top:8px; }
.pc-sub{ font-size:12px; letter-spacing:.12em; color:var(--gold-light); margin-top:2px; }
.pc-rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); margin:12px auto 10px; width:70%; }
.pc-issuer{ font-family:var(--ar); font-size:13px; color:var(--ink); }
.wallet-btns{ display:flex; flex-direction:column; gap:10px; }
.wallet-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:14px; border-radius:10px; border:1px solid var(--line-2); background:#0d1117; color:var(--paper);
  font:600 14px/1 var(--sans); cursor:pointer; transition:.2s; }
.wallet-btn:hover{ border-color:var(--gold); background:#12161d; }
.wallet-btn:active{ transform:scale(.98); }
.wallet-btn svg{ width:20px; height:20px; color:var(--gold-light); }
.wallet-note{ color:var(--dim); font-size:12px; text-align:center; direction:rtl; margin-top:10px; line-height:1.7; }
.ver{ text-align:center; color:var(--dim); font-size:12px; margin-top:20px; line-height:1.8; }
.ver span{ font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; }

.cred{ border:1px solid var(--line-2); border-radius:10px; padding:18px; margin-bottom:22px;
  background:linear-gradient(135deg,var(--palm-shadow),var(--palm)); box-shadow:inset 0 0 0 3px rgba(8,43,33,.55), inset 0 0 0 4px rgba(231,206,143,.2); }
.cred .who{ font-family:var(--ar); font-weight:800; font-size:22px; color:var(--paper); }
.cred .row{ display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--dim); letter-spacing:.05em; }
.cred .row b{ color:var(--gold-light); font-variant-numeric:tabular-nums; }
.ring{ width:120px; height:120px; margin:0 auto 6px; }
.stamps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px; }
.stamp-cell{ aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px;
  background:rgba(255,255,255,.02); }
.stamp-cell.empty svg{ opacity:.22; }
.stamp-cell .lbl{ font-size:10px; color:var(--dim); margin-top:4px; text-align:center; }

/* ---------- diwan (league) — exact DS RankRow ---------- */
.row-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--edge); border-radius:var(--r-md); margin-bottom:8px; background:rgba(255,255,255,.02); }
.row-item.me{ border-color:var(--gold); background:rgba(201,162,75,.1); }
.rank{ width:26px; flex:0 0 auto; text-align:center; font-weight:800; color:var(--gold-light); font-variant-numeric:tabular-nums; }
.row-item.r1 .rank{ color:#F3E3B8; } .row-item.r2 .rank{ color:#E4E8EC; } .row-item.r3 .rank{ color:#D89A6A; }
.row-item .av{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--gold-face); color:#221803; display:grid; place-items:center; font-weight:700; font-size:13px; }
.row-item .nm{ flex:1; color:var(--paper); font-weight:600; direction:rtl; text-align:start; }
.row-item .xp{ color:var(--dim); font-variant-numeric:tabular-nums; font-size:13px; }
/* promotion divider */
.promo-div{ display:flex; align-items:center; gap:12px; margin:12px 2px; color:var(--emerald); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.promo-div::before,.promo-div::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(21,127,90,.5),transparent); }

/* ---------- bottom nav ---------- */
.app-nav{ position:absolute; left:0; right:0; bottom:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom); display:flex; border-top:1px solid var(--line);
  background:rgba(8,20,15,.92); backdrop-filter:blur(8px); }
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:none; border:none; cursor:pointer; color:var(--dim); font-family:var(--ar-body); font-size:10px; letter-spacing:.04em; }
.tab svg{ width:22px; height:22px; }
.tab.active{ color:var(--gold-light); }

/* ---------- onboarding ---------- */
.onb{ display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 26px; text-align:center; }
.onb .seal-lg{ width:96px; height:96px; margin:0 auto 20px; }
.field{ width:100%; padding:15px 16px; border-radius:8px; border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  color:var(--paper); font-size:16px; text-align:center; direction:rtl; margin:20px 0; }
.field::placeholder{ color:var(--dim); }
.linkbtn{ background:none; border:none; color:var(--gold-light); text-decoration:underline; font-family:var(--sans); font-size:14px; margin-top:16px; cursor:pointer; }
.gate-warn{ border:1px solid var(--edge-strong); background:rgba(201,162,75,.08); border-radius:10px; padding:12px 14px; margin:6px 0 14px; color:var(--ink); font-size:14px; text-align:center; direction:rtl; line-height:1.7; }
.ios-arrow{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 6px); transform:translateX(-50%); z-index:80; pointer-events:none; animation:iosBounce 1s ease-in-out infinite; filter:drop-shadow(0 4px 10px rgba(201,162,75,.5)); }
@keyframes iosBounce{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,12px); } }
@media (prefers-reduced-motion: reduce){ .ios-arrow{ animation:none; } }

.toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + 20px); transform:translateX(-50%);
  background:var(--charcoal); border:1px solid var(--line-2); color:var(--ink); padding:12px 18px; border-radius:99px;
  font-size:13px; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.4); }

/* Lottie celebration overlay — fixed, centred, never intercepts taps. */
.celebrate-overlay{ position:fixed; left:50%; top:var(--cel-top,40%); transform:translate(-50%,-50%);
  width:var(--cel-size,300px); height:var(--cel-size,300px); max-width:80vw; max-height:80vw;
  z-index:100; pointer-events:none; }
.celebrate-overlay svg{ width:100%; height:100%; display:block; }

/* ---------- gamification motion ---------- */
.btn-lg:active{ transform:scale(.98); }
.choice.correct{ animation:pop .32s ease; } .choice.wrong{ animation:shake .34s ease; }
.chip.correct{ animation:pop .3s ease; } .chip.wrong{ animation:shake .34s ease; }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.035); } 100%{ transform:scale(1); } }
@keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
.stat-pill .n{ transition:transform .2s; }
/* stamp reveal gets a shimmer sweep */
.stamp-reveal{ position:relative; }
.stamp-reveal::after{ content:""; position:absolute; inset:-8%; border-radius:50%;
  background:linear-gradient(115deg,transparent 40%,rgba(243,227,184,.55) 50%,transparent 60%);
  background-size:250% 250%; animation:sweep 1.1s ease-out .15s 1 both; pointer-events:none; }
@keyframes sweep{ from{ background-position:180% 0; } to{ background-position:-80% 0; } }

/* ---------- profile toggles ---------- */
.toggle-row{ display:flex; gap:10px; }
.btn-lg.half{ flex:1; font-size:13px; padding:13px 8px; gap:7px; }
.btn-lg.half svg{ width:18px; height:18px; }
.btn-lg.ghost.is-on{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,75,.08); }

/* ---------- iOS install mini-tour ---------- */
.tour{ position:relative; height:210px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,#0c2118,#0a1a13); margin:4px 0 12px; }
.tour-frame{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; animation:tourCycle 7.5s infinite; }
.tour-frame.f2{ animation-delay:2.5s; } .tour-frame.f3{ animation-delay:5s; }
@keyframes tourCycle{ 0%{ opacity:0; transform:translateY(8px);} 4%,29%{ opacity:1; transform:translateY(0);} 33%,100%{ opacity:0; } }
.tour-cap{ font-family:var(--ar); color:var(--paper); font-size:14px; direction:rtl; }
.tour-cap b{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#221803; font-size:12px; margin-inline-start:6px; }
.tour-hi{ animation:hiPulse 1s ease-in-out infinite; border-radius:8px; }
@keyframes hiPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,206,143,0);} 50%{ box-shadow:0 0 0 4px rgba(231,206,143,.5);} }
.mini-safari{ width:150px; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); background:#0e2a20; }
.mini-url{ font-size:11px; color:var(--dim); text-align:center; padding:8px; border-bottom:1px solid var(--line); direction:ltr; }
.mini-bar{ display:flex; justify-content:center; padding:10px; }
.mini-share{ color:var(--gold-light); display:inline-flex; padding:4px; }
.mini-menu{ width:210px; background:#12100A; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; }
.mini-row{ padding:11px 14px; font-size:13px; color:var(--ink); direction:rtl; text-align:right; border-bottom:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; }
.mini-row.tour-hi{ background:rgba(201,162,75,.14); color:var(--gold-light); }
.mini-row span{ color:var(--gold-light); font-weight:800; }
.mini-home{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.mini-app{ display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--palm-shadow); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.mini-app.pop{ animation:appPop .6s cubic-bezier(.34,1.56,.64,1) .1s both; }
@keyframes appPop{ 0%{ transform:scale(.2); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.mini-lbl{ font-family:var(--ar); font-size:12px; color:var(--paper); }

@media (prefers-reduced-motion: reduce){
  .stamp-reveal{ animation:none; } .stamp-reveal::after{ animation:none; opacity:0; }
  .choice.correct,.choice.wrong,.chip.correct,.chip.wrong,.tour-hi,.mini-app.pop{ animation:none; }
  .passport-cover,.pc-sheen,.pc-seal{ animation:none; } .pc-sheen{ display:none; }
  .tour-frame{ animation:none; opacity:1; position:relative; } .tour-frame.f2,.tour-frame.f3{ display:none; }
  *{ transition-duration:.01ms !important; }
}

/* ===== M23 · swipe-stack lesson runner ===== */
.segbar{ flex:1; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.segbar > i{ flex:1 1 6px; min-width:6px; height:8px; border-radius:99px; background:rgba(255,255,255,.10); transition:background .3s; }
.segbar > i.on{ background:linear-gradient(90deg,var(--gold),var(--gold-light)); }
.segbar > i.q{ background:rgba(201,162,75,.22); }   /* the quiz tail, visible before you get there */
.segbar > i.q.on{ background:linear-gradient(90deg,var(--gold),var(--gold-light)); }
.segbar .req{ font-size:10.5px; color:var(--gold-light); opacity:.85; margin-inline-start:4px; white-space:nowrap; }

/* min-height:0 — a column flex item defaults to min-height:auto and refuses to shrink below
   its content, so a tall card (a video card is ~950px) pushes the swipe buttons off-screen
   instead of scrolling inside the card. */
.stack{ position:relative; flex:1; min-height:0; overflow:visible; padding:8px 14px 32px; display:flex; }
/* the deck behind the top card — slivers peek out below; count driven by data-left in showCard() */
.stack-peek{ position:absolute; inset:8px 14px 32px 14px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line); z-index:0; opacity:0; filter:brightness(.72); transition:opacity .2s, transform .2s; }
.stack-peek{ transform-origin:50% 100%; }                                  /* fan splays from the bottom edge */
.stack-peek.p1{ transform:rotate(-6.5deg) translateY(4px); }
.stack-peek.p2{ transform:rotate(-13deg) translateY(8px); }
.stack[data-left="1"] .p1, .stack[data-left="2"] .p1{ opacity:.65; }
.stack[data-left="2"] .p2{ opacity:.38; }
.swipe-card{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 16px 18px;
  touch-action:pan-y; will-change:transform; box-shadow:0 8px 30px rgba(0,0,0,.28); }
.swipe-card > .lesson-body{ flex:1; min-height:0; overflow-y:auto; }   /* card is the frame; content scrolls inside it */

/* clockwise glowing border: a conic sweep masked down to the 2px ring */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.swipe-card > .glow{ position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--ang), transparent 0 58%, var(--gold) 76%, var(--gold-light) 84%, var(--gold) 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:glowspin 3.4s linear infinite; }
@keyframes glowspin{ to{ --ang:360deg; } }
.swipe-card::before,.swipe-card::after{ position:absolute; top:14px; font:800 14px var(--ar); padding:6px 12px; border-radius:99px; opacity:0; transition:opacity .12s; pointer-events:none; z-index:3; }
.swipe-card::after{ content:'فهمت ✓'; inset-inline-end:14px; color:#0C3B2E; background:var(--gold-light); }
.swipe-card::before{ content:'لم أفهم ↺'; inset-inline-start:14px; color:#fff; background:#b06060; }
.swipe-card.hint-right::after{ opacity:1; } .swipe-card.hint-left::before{ opacity:1; }
.swipe-card.hint-up{ box-shadow:0 0 0 2px var(--gold) inset, 0 8px 30px rgba(0,0,0,.3); }

/* the per-card caption bar (.saud/.saud-txt) is gone — Saud gets one card at the start.
   .saud-av survives because the intro card reuses it at .lg size. */
.saud-av{ border-radius:50%; display:grid; place-items:center; background:var(--gold); color:#0C3B2E; }

/* The swipe bar is gone — `.gest`/`.gbtn` now dress only the passport-art share row
   (app.js:359). The column-flex and .no/.save/.wide variants existed for the arrow
   buttons and are dropped with them. */
.gest{ display:flex; gap:10px; }
.gbtn{ flex:1; padding:15px 8px; border-radius:13px; font:800 15px var(--ar); border:1px solid var(--line); background:var(--panel); color:var(--paper); cursor:pointer; transition:transform .1s, filter .15s; }
.gbtn:active{ transform:scale(.96); }
.gbtn.yes{ background:linear-gradient(180deg,var(--gold),var(--gold-dark)); color:#0C3B2E; border-color:transparent; flex:1.5; }
.foot-hint{ text-align:center; color:var(--dim); font-size:13px; padding:14px 0; }

.review-cta{ width:100%; display:flex; align-items:center; gap:12px; text-align:right; direction:rtl; cursor:pointer;
  background:linear-gradient(120deg,rgba(201,162,75,.16),rgba(21,127,90,.12)); border:1px solid var(--edge,rgba(201,162,75,.28));
  border-radius:16px; padding:14px 16px; margin-bottom:16px; }
.review-cta .rc-n{ flex:0 0 auto; min-width:40px; height:40px; padding:0 10px; border-radius:12px; background:var(--gold); color:#0C3B2E; font:900 20px var(--ar); display:grid; place-items:center; }
.review-cta .rc-t{ flex:1; font:800 16px var(--ar); color:var(--paper); display:flex; flex-direction:column; }
.review-cta .rc-t small{ font:500 12px var(--ar); color:var(--ink); margin-top:2px; }
.review-cta .rc-go{ font:700 14px var(--ar); color:var(--gold-light); }
a.review-cta{ text-decoration:none; }                       /* Pulse is a link, not a button */
.review-cta .rc-n svg{ width:20px; height:20px; }

@media (prefers-reduced-motion: reduce){
  .swipe-card{ transition:none !important; } .segbar > i{ transition:none; }
  .swipe-card > .glow{ animation:none; background:var(--gold); opacity:.5; }
  .stack-peek{ transition:none; }
  .feedback.show{ animation:none; } .feedback::before{ animation:none; }
}

/* Off-screen but readable: video cards burn their captions into the pixels, so the body
   copy lives here for screen readers. Not `display:none` — that removes it from the
   accessibility tree, which is the whole point of keeping it. */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ============================================================================
   ONBOARDING CEREMONY (Cover → Identity → Oath → Visa → Saud → Slides),
   the top-bar "Ask Saud" button + global chat sheet, and Profile invitations.
   Functional pass — Claude Design supplies the polished visuals; tweak here after.
   ============================================================================ */

/* ---- Ask Saud (top bar) + global chat sheet ---- */
.ask-top{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(201,162,75,.1); color:var(--gold-light);
  font:700 12px var(--ar-body); cursor:pointer; white-space:nowrap; }
.ask-top svg{ width:16px; height:16px; }
.ask-top.icon-only{ padding:7px; gap:0; }
.ask-top:active{ transform:scale(.96); }
@keyframes askpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,.5); } 50%{ box-shadow:0 0 0 8px rgba(201,162,75,0); } }
.ask-top.pulse{ animation:askpulse 1.8s var(--ease) infinite; }
.ask-sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(6,20,15,.55); backdrop-filter:blur(3px); }
.ask-sheet-panel{ width:100%; max-width:var(--app-max,480px); background:var(--panel); border-top:1px solid var(--line-2);
  border-radius:18px 18px 0 0; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); display:flex; flex-direction:column;
  gap:10px; max-height:80vh; box-shadow:0 -20px 50px rgba(0,0,0,.5); animation:sheetup var(--dur-base) var(--ease); }
@keyframes sheetup{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.ask-sheet .ask-log{ max-height:56vh; }
.ask-sheet-panel{ gap:8px; }
.ask-handle{ display:block; width:44px; height:5px; border-radius:3px; background:var(--edge-strong); margin:2px auto 6px; }
.ask-head-ic{ display:grid; place-items:center; }
.ask-head-ic svg{ width:20px; height:20px; color:var(--gold-light); }
/* Saud intro bubble + suggested chips (empty state) */
.ask-intro{ margin:8px 2px 14px; }
.ask-intro .sap-guide{ display:flex; align-items:flex-start; gap:12px; width:100%; }
.ask-intro .sap-guide-av{ width:62px; height:62px; box-shadow:0 0 22px rgba(201,162,75,.4); }
.ask-intro .sap-guide-av svg{ width:30px; height:30px; }
.ask-intro .sap-guide-bubble{ flex:1; max-width:none; background:rgba(21,127,90,.14); padding:12px 15px; border-radius:14px; }
.ask-intro .sap-guide-bubble .nm{ font-size:14px; }
.ask-intro .sap-guide-bubble .note{ font-size:13.5px; line-height:1.7; margin-top:3px; }
.ask-intro .sap-guide-bubble::after{ background:rgba(21,127,90,.14); }
.ask-chips{ display:flex; flex-direction:column; gap:9px; margin-bottom:4px; }
.sap-ask-chip{ width:100%; text-align:right; background:rgba(255,255,255,.03); border:1px solid var(--edge); border-radius:10px;
  padding:12px 14px; color:var(--ink); font:400 13.5px var(--ar-body); cursor:pointer; direction:rtl;
  transition:border-color var(--dur-micro),color var(--dur-micro); }
.sap-ask-chip:hover{ border-color:var(--gold); color:var(--gold-light); }

/* ---- Profile: stats, invitations, sector chips, toggles ---- */
.pf-stats--2{ grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:6px; }
.pf-stats--2 .stat-pill{ padding:20px 16px; }
.pf-stats--2 .stat-pill .n{ font-size:30px; }
.pf-inv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; margin-bottom:4px; }
.sap-invite-count{ display:inline-flex; align-items:center; gap:5px; font-family:var(--ar-body); font-size:11px; color:var(--gold-light);
  font-variant-numeric:tabular-nums; border:1px solid var(--edge); border-radius:999px; padding:5px 11px; white-space:nowrap; }
.sap-invite-count svg{ width:14px; height:14px; }
.sap-invite-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.sap-invite{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--edge); border-radius:var(--r-md,10px); background:rgba(255,255,255,.02); }
.sap-invite--open{ border-style:dashed; }
.sap-invite-ic{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; border:1px solid var(--edge-strong); color:var(--gold-light); background:rgba(201,162,75,.06); }
.sap-invite-ic svg{ width:18px; height:18px; }
.sap-invite-ic--joined{ background:var(--success-bg,rgba(21,127,90,.22)); color:var(--success-hi,#5bbf8a); border-color:rgba(91,191,138,.4); }
.sap-invite-body{ flex:1; min-width:0; }
.sap-invite-name{ display:block; font:700 14px var(--ar); color:var(--paper); direction:rtl; }
.sap-invite-meta{ display:block; font:400 11px var(--ar-body); color:var(--dim); direction:rtl; margin-top:1px; }
.sap-invite-share{ width:38px; height:38px; flex:none; border-radius:8px; border:1px solid var(--edge); background:none; color:var(--gold-light); display:grid; place-items:center; }
.sap-invite-share svg{ width:17px; height:17px; }
.inv-btn{ flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px; border:none; cursor:pointer;
  background:var(--gold-face); color:#221803; font:700 13px var(--ar); box-shadow:0 4px 14px rgba(201,162,75,.3); }
.inv-btn svg{ width:16px; height:16px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.sect-chip{ flex:0 0 auto; padding:9px 18px; border-radius:999px; border:1px solid var(--edge); background:rgba(12,59,46,.4);
  color:var(--text-2,#cddbd2); font:600 13px var(--ar); cursor:pointer; transition:border-color var(--dur-micro),color var(--dur-micro),background var(--dur-micro); }
.sect-chip.active{ border-color:var(--gold); color:var(--gold-light); background:rgba(201,162,75,.1); }
.pf-toggle{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; font:700 15px var(--ar); color:var(--paper); }
.switch{ width:52px; height:30px; flex:none; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line); position:relative; cursor:pointer; transition:background var(--dur-micro),border-color var(--dur-micro); }
.switch i{ position:absolute; top:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:50%; background:var(--dim); transition:inset-inline-start var(--dur-micro),background var(--dur-micro); }
.switch.on{ background:rgba(21,127,90,.4); border-color:var(--gold); }
.switch.on i{ inset-inline-start:25px; background:var(--gold-face); }

/* ---- Onboarding shell ---- */
.onb-shell{ position:relative; min-height:100%; display:flex; flex-direction:column;
  background:var(--bg-app,linear-gradient(180deg,var(--palm),var(--palm-shadow))); overflow:hidden; }
.onb-step{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:calc(28px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); text-align:center; }
.onb-step.onb-scroll{ justify-content:flex-start; overflow-y:auto; }
.onb-eyebrow{ font:700 11px var(--ar-body); letter-spacing:.16em; color:var(--gold); text-transform:none; }
.onb-title{ font:800 24px var(--ar); color:var(--gold-light); line-height:1.4; margin:2px 0; }
.onb-step .field{ text-align:right; }
.onb-lbl{ display:block; text-align:right; font:600 12px var(--ar-body); color:var(--dim); }
.onb-lbl .field{ margin-top:4px; direction:ltr; }

/* Cover — full-bleed passport, tap page-turns like a real cover */
.onb-cover{ position:relative; flex:1 1 auto; display:block; perspective:1600px; cursor:pointer;
  background:radial-gradient(620px 420px at 50% 32%,rgba(21,127,90,.28),transparent 62%); }
.onb-cover-face{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  padding:calc(env(safe-area-inset-top) + 42px) 26px calc(env(safe-area-inset-bottom) + 34px);
  text-align:center; background:var(--leather); overflow:hidden;
  transform-origin:right center; transform-style:preserve-3d; backface-visibility:hidden;
  transition:transform var(--dur-ceremony,850ms) var(--ease); }
.onb-cover-face::before{ content:""; position:absolute; inset:16px; border:1px solid var(--edge-strong);
  border-radius:18px; box-shadow:inset 0 0 0 4px rgba(8,43,33,.4),inset 0 0 0 5px rgba(231,206,143,.14); pointer-events:none; }
.onb-cover .ob-sp{ display:block; width:1px; flex-shrink:0; }
.ob-cover-top{ font:600 12px var(--sans); letter-spacing:.34em; color:var(--gold-light); opacity:.85; }
.ob-cover-seal{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.ob-cover-ar{ font:800 26px/1.28 var(--ar); color:var(--gold-light); }
.ob-cover-en{ font:600 15px var(--serif); letter-spacing:.16em; color:var(--paper); margin-top:9px; }
.ob-cover-chip{ width:66px; height:47px; border-radius:8px; background:var(--gold-face);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.3); }
.ob-cover-foot{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.ob-cover-foot-en{ font:600 11px var(--sans); letter-spacing:.24em; color:var(--gold-dark); }
.ob-cover-hint{ font:500 13px var(--ar-body); color:var(--gold-light); opacity:.82; }
.onb-cover.flip .onb-cover-face{ transform:rotateY(158deg); }
@media (prefers-reduced-motion:reduce){ .onb-cover-face{ transition:opacity .3s; } .onb-cover.flip .onb-cover-face{ transform:none; opacity:0; } }

/* Identity — full-bleed cream passport bio-data page (matches handoff) */
.ob-identity{ height:100%; display:flex; flex-direction:column; gap:11px;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 12px); box-sizing:border-box; text-align:right; }
.ob-bio{ flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column; overflow:hidden;
  color:#173427; color-scheme:light; background:linear-gradient(160deg,#F2F1E8 0%,#E9EADF 55%,#E2E4D8 100%);
  border:1px solid var(--gold); border-radius:10px; padding:16px 16px 14px; box-shadow:0 40px 90px rgba(0,0,0,.5); }
.ob-bio-lam{ position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.32) 42%,rgba(255,255,255,.05) 50%,transparent 58%),radial-gradient(70% 40% at 78% 20%,rgba(140,190,255,.08),rgba(190,140,255,.05) 45%,transparent 100%); }
.ob-bio > *{ position:relative; z-index:2; }
.ob-bio-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:1.5px solid rgba(12,74,46,.4); padding-bottom:9px; }
.ob-bio-head .ar{ font:700 14px var(--ar); color:#0C4A2E; direction:rtl; }
.ob-bio-head .en{ font:400 7px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.16em; color:#51604f; margin-top:2px; }
.ob-bio-type{ text-align:left; font:400 8px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.1em; color:#6a755f; line-height:1.7; flex:none; }
.ob-bio-type b{ color:#0C4A2E; }
.ob-bio-type span{ display:block; }
.ob-bio-top{ display:flex; gap:12px; margin-top:14px; }
.ob-bio-photo{ width:80px; height:100px; flex:none; border-radius:3px; border:1px solid rgba(12,74,46,.25); cursor:pointer; overflow:hidden; padding:0;
  background:linear-gradient(160deg,#cdd3c7,#aab3a3) center/cover no-repeat; box-shadow:inset 0 1px 4px rgba(0,0,0,.18); display:grid; place-items:center; color:#5a6552; }
.ob-bio-photo img{ width:100%; height:100%; object-fit:cover; }
.ob-bio-photo-ph{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; }
.ob-bio-photo-ph small{ font:400 7px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.1em; }
.ob-bio-photo-ph svg{ width:24px; height:24px; }
.ob-bio-names{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.ob-bio-rest{ display:grid; grid-template-columns:1fr 1fr; gap:11px 16px; margin-top:14px; }
.ob-bf{ display:block; min-width:0; }
.ob-bf--wide{ grid-column:1/-1; }
.ob-bf-l{ display:block; font:400 7px ui-monospace,Menlo,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:#6a755f; margin-bottom:1px; }
.ob-bf-l em{ font-style:normal; opacity:.7; }
.ob-bf-i{ width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px solid rgba(12,74,46,.32);
  font:700 13px var(--serif); color:#173427; padding:2px 0 3px; outline:none; letter-spacing:.01em; }
.ob-bf-i:focus{ border-bottom-color:var(--gold); }
.ob-bf-i::placeholder{ color:#9aa392; font-weight:400; }
.ob-identity .btn-lg{ flex:none; margin:0; }
.ob-mrz{ flex:none; font:400 10px/1.7 ui-monospace,Menlo,Consolas,monospace; letter-spacing:.14em;
  color:rgba(231,206,143,.5); white-space:nowrap; overflow:hidden; text-align:left; direction:ltr; padding:0 2px; }
.ob-mrz span{ display:block; }

/* Oath — Saudi vibe, hold-to-swear fingerprint */
.onb-oath{ position:relative; }
.onb-guilloche{ position:absolute; inset:0; background:url('../assets/guilloche.svg') center/280px repeat;
  opacity:.1; pointer-events:none; mix-blend-mode:screen; }
.onb-oath-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; }
.onb-oath-seal{ filter:drop-shadow(0 4px 14px rgba(201,162,75,.4)); }
.onb-oath-text{ font:600 16px/1.9 var(--ar); color:var(--paper); max-width:340px; }
.onb-mute{ position:absolute; top:calc(14px + env(safe-area-inset-top)); left:16px; z-index:2; width:40px; height:40px;
  display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); background:rgba(0,0,0,.25); color:var(--gold-light); cursor:pointer; }
.onb-mute svg{ width:18px; height:18px; }
.onb-mute.off{ color:var(--dim); opacity:.6; }
.onb-hold-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px; }
.onb-hold{ position:relative; width:132px; height:132px; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 40% 35%,rgba(21,127,90,.5),rgba(8,43,33,.9)); color:var(--gold-light);
  display:grid; place-items:center; touch-action:none; -webkit-tap-highlight-color:transparent; }
.onb-hold .onb-fp{ width:58px; height:58px; position:relative; z-index:1; transition:transform var(--dur-base) var(--ease); }
.onb-hold.holding .onb-fp{ transform:scale(1.08); color:var(--gold-foil); }
.onb-hold-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.onb-hold-ring circle{ fill:none; stroke-width:5; }
.onb-hold-ring .track{ stroke:rgba(255,255,255,.12); }
.onb-hold-ring .fill{ stroke:var(--gold-light); stroke-linecap:round; transition:none; }
.onb-hold.sealed{ animation:waxpress var(--dur-ceremony) var(--ease-spring); }
@keyframes waxpress{ 0%{ transform:scale(1.15) rotate(-4deg); } 60%{ transform:scale(.94) rotate(2deg); } 100%{ transform:scale(1); } }
.onb-hold-hint{ font:600 13px var(--ar-body); color:var(--dim); }

/* "5 of 10" roadmap signals — lessons per city, and cities on the journey */
.city-soon{ margin:8px 2px 0; font:600 12px var(--ar-body); color:var(--gold-light); }
.jmap-soon{ margin:18px 8px 4px; text-align:center; font:600 13px var(--ar-body); color:var(--dim); }

/* Visa activated → the seal drops and presses onto the passport, then the new world opens */
.visa-enter .intro-scrim{ animation:veScrim .4s ease both; }
.visa-enter .intro-card{ inset:0; display:grid; place-content:center; gap:14px; padding:0 24px; }
.visa-enter .onb-visa-stamp.stamping{ position:relative; animation:veStamp .62s cubic-bezier(.2,1.2,.3,1) both; }
.visa-enter .onb-visa-stamp.stamping::after{ content:""; position:absolute; inset:-8%; border-radius:50%;
  border:2px solid var(--gold-light); opacity:0; animation:veShock .7s ease-out .34s both; }
.visa-enter h2{ animation:veRise .5s ease .5s both; }
.visa-enter .intro-lead{ animation:veRise .5s ease .64s both; }
@keyframes veScrim{ from{ opacity:0; } to{ opacity:1; } }
@keyframes veStamp{ 0%{ transform:scale(2.4) rotate(-26deg); opacity:0; filter:blur(3px); }
  55%{ transform:scale(.9) rotate(4deg); opacity:1; filter:blur(0); }
  75%{ transform:scale(1.06) rotate(-9deg); } 100%{ transform:scale(1) rotate(-7deg); } }
@keyframes veShock{ 0%{ transform:scale(.6); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes veRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .visa-enter *{ animation-duration:.01ms !important; } }

/* Visa — centered ceremonial page (stamped, guilloché) */
.onb-visa{ position:relative; }
.onb-visa-card{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.onb-visa-stamp{ filter:drop-shadow(0 4px 16px rgba(201,162,75,.4)); margin-bottom:2px; }
.onb-visa-lead{ font:500 15px/1.85 var(--ar); color:var(--paper); max-width:360px; }
.onb-visa-lead b{ color:var(--gold-light); }
.onb-visa-note{ display:flex; align-items:center; gap:10px; justify-content:center; font:600 13px var(--ar-body);
  color:var(--gold-light); border:1px solid var(--line-2); border-radius:12px; padding:12px 16px; background:rgba(201,162,75,.08); }
.onb-visa-note svg{ width:18px; height:18px; flex:0 0 auto; }

/* Saud — static intro hero (photo slot + VO). Real photo/voiceover drop in here. */
.onb-saud{ align-items:center; }
.onb-saud-hero{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:4px; }
.saud-hero-av{ display:grid; }
.saud-photo{ width:132px; height:132px; border-radius:50%; object-fit:cover; object-position:center top;
  border:3px solid rgba(201,162,75,.4); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.saud-av.xl{ width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
  background:var(--seal-metal,radial-gradient(circle at 35% 30%,var(--gold-foil),var(--gold) 75%,var(--gold-dark))); color:var(--palm);
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 4px rgba(201,162,75,.2); }
.saud-av.xl svg{ width:54px; height:54px; }
.onb-saud-replay{ display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(201,162,75,.1); color:var(--gold-light); font:700 13px var(--ar-body); cursor:pointer; }
.onb-saud-replay svg{ width:16px; height:16px; }
.onb-saud-lead{ font:500 15px/1.8 var(--ar); color:var(--paper); max-width:360px; }

/* Saud intro — top-bar demo strip announcing the Ask Saud button */
.onb-topbar-demo{ display:flex; align-items:center; gap:10px; width:100%; max-width:360px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.3); }
.onb-demo-hearts{ display:flex; gap:2px; }
.onb-topbar-demo .grow{ flex:1 1 auto; }
.onb-demo-cap{ font:600 12px var(--ar-body); color:var(--dim); max-width:320px; }

/* Slides */
.onb-slides{ position:relative; touch-action:pan-y; }
.onb-slide{ display:flex; flex-direction:column; align-items:center; gap:14px; flex:1 1 auto; justify-content:center; }
.onb-slide-ic{ width:64px; height:64px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line-2); color:var(--gold-light); background:rgba(201,162,75,.1); }
.onb-slide-ic svg{ width:30px; height:30px; }
.onb-slide-b{ font:500 15px/1.9 var(--ar); color:var(--paper); max-width:340px; }
.onb-dots{ display:flex; gap:8px; justify-content:center; margin:8px 0 14px; }
.onb-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); transition:all var(--dur-micro) var(--ease); }
.onb-dot.on{ width:22px; border-radius:5px; background:var(--gold-light); }
.onb-slide-nav{ display:flex; gap:10px; }
.onb-swipe-demo{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:24px; background:rgba(6,20,15,.82); backdrop-filter:blur(4px); cursor:pointer; text-align:center; }
.osd-hand{ width:64px; height:64px; object-fit:contain; animation:osdswipe 1.8s var(--ease) infinite; }
@keyframes osdswipe{ 0%,100%{ transform:translateX(26px) rotate(6deg); } 50%{ transform:translateX(-26px) rotate(-6deg); } }
.osd-rows{ display:flex; flex-direction:column; gap:12px; }
.osd-row{ display:flex; align-items:center; gap:10px; font:700 15px var(--ar); color:var(--paper); }
.osd-row i{ font:600 13px var(--ar-body); color:var(--gold-light); font-style:normal; }
.osd-row .osd-ar{ width:34px; height:34px; display:grid; place-items:center; color:var(--gold-light); }
.osd-row .osd-ar svg{ width:26px; height:26px; }
.osd-cap{ font:600 13px var(--ar-body); color:var(--dim); max-width:300px; }