/* Saudi AI Passport — Webfonts
   Arabic-first pairing. All four families are on Google Fonts (the source site loads
   them from there too). If you self-host, replace this @import with @font-face rules
   pointing at your licensed files — keep the family names identical.
   - Cairo ................ Arabic display / headings (the primary voice), 700–900
   - IBM Plex Sans Arabic . Arabic body / UI, 400–600
   - Playfair Display ..... English serif accents (credentials, ceremony), 400–900
   - IBM Plex Sans ........ English UI / captions, 400–600 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400&family=Cairo:wght@400;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');
/* ============================================================================
   COLORS — Saudi AI Passport
   A luxury passport for the AI age: deep palm green, gold foil, cream
   "paper". Dark theme is primary; "paper" cream is the light counterpart used for
   printable artifacts and passport pages — NOT a full light mode.
   There is NO navy / blue anywhere in this brand.
   ============================================================================ */
:root{
  /* ---- Raw palette (exact brand values — do not invent new hex) ---- */
  --palm:#0C3B2E;          /* base background (deep palm green) */
  --palm-shadow:#082B21;   /* background gradient end, deepest surface */
  --charcoal:#12100A;      /* near-black accents, print ink, toasts */
  --emerald:#157F5A;       /* success, correct answers */
  --gold:#C9A24B;          /* primary accent, seals, CTAs */
  --gold-light:#E7CE8F;    /* highlights, active states, eyebrow text */
  --gold-dark:#8A6A2E;     /* seal shading, pressed states */
  --gold-foil:#F3E3B8;     /* brightest foil catch-light */
  --paper:#F6F1E6;         /* headings, cream "paper" surfaces */
  --paper-ink:#241C0F;     /* ink on paper surfaces */
  --muted:#9FB3A6;         /* secondary / dim text on dark */

  /* ---- App panel surfaces (mobile shell) ---- */
  --panel:#0d2a20;         /* card / sheet surface */
  --panel-2:#0f3327;       /* raised panel, gradient top */
  --ink:#EAE3D2;           /* body ink on panels */
  --dim:#a9bcb0;           /* dim ink on panels */

  /* ---- Hairlines (gold, translucent) ---- */
  --edge:rgba(201,162,75,.28);         /* standard hairline border */
  --edge-strong:rgba(201,162,75,.55);  /* strong hairline / focus */
  --line:var(--edge);                  /* app alias */
  --line-2:var(--edge-strong);         /* app alias */

  /* ---- Semantic state colors ---- */
  --success:var(--emerald);
  --success-hi:#5bbf8a;                 /* correct border on dark */
  --success-bg:rgba(21,127,90,.22);     /* correct choice fill */
  --danger:#C0392B;                     /* errors, heart loss (ALWAYS pair with an icon) */
  --danger-hi:#d98a8a;                  /* wrong border on dark */
  --danger-soft:#b06060;                /* softer error accent */
  --danger-bg:rgba(190,70,70,.18);      /* wrong choice fill */

  /* ---- Signature gradients ---- */
  /* gold foil sheen — used for text (.foil), CTAs, seal edges */
  --foil:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-light) 30%,var(--gold) 48%,var(--gold-foil) 60%,var(--gold) 72%,var(--gold-dark) 100%);
  /* solid gold button face */
  --gold-face:linear-gradient(135deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  /* embossed seal metal (radial) */
  --seal-metal:radial-gradient(circle at 35% 30%,var(--gold-foil),var(--gold-light) 45%,var(--gold) 75%,var(--gold-dark) 100%);
  /* base app background — palm → deepest surface */
  --bg-app:linear-gradient(180deg,var(--palm),var(--palm-shadow));
  /* green passport-cover leather */
  --leather:radial-gradient(120% 120% at 30% 12%,#10493a 0%,var(--palm) 42%,#072a20 100%);

  /* ---- Textures (low-opacity overlays on large surfaces) ---- */
  /* film-grain fractal noise */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); /* @kind other */
  /* guilloché / mashrabiya security lattice (tileable) */
  --guilloche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 0 L34 17 L17 34 L0 17 Z' fill='none' stroke='%23C8A24C' stroke-opacity='0.28' stroke-width='1'/%3E%3Ccircle cx='17' cy='17' r='4' fill='none' stroke='%23C8A24C' stroke-opacity='0.22' stroke-width='1'/%3E%3C/svg%3E"); /* @kind other */

  /* ---- Semantic surface / text aliases (prefer these in components) ---- */
  --surface-1:var(--palm);              /* base page */
  --surface-2:var(--panel);             /* card */
  --surface-3:var(--panel-2);           /* raised */
  --surface-glass:rgba(255,255,255,.04);
  --surface-glass-2:rgba(255,255,255,.06);
  --surface-paper:var(--paper);
  --text-1:var(--paper);                /* primary on dark */
  --text-2:#cddbd2;                     /* secondary on dark */
  --text-3:var(--muted);                /* dim on dark */
  --text-ink:var(--paper-ink);          /* on paper */
  --text-gold:var(--gold-light);
  --accent:var(--gold);
  --accent-hi:var(--gold-light);
  --accent-lo:var(--gold-dark);
}
/* ============================================================================
   TYPOGRAPHY — Saudi AI Passport  (Arabic-first)
   Arabic leads; English follows as an LTR caption. Headings are ceremonial —
   fully voweled (tashkeel) Arabic in Cairo, with Playfair for English accents.
   ============================================================================ */
:root{
  /* ---- Font families ---- */
  --ar:'Cairo', system-ui, sans-serif; /* @kind font */
  --ar-body:'IBM Plex Sans Arabic', system-ui, sans-serif; /* @kind font */
  --serif:'Playfair Display', Georgia, serif; /* @kind font */
  --sans:'IBM Plex Sans', system-ui, sans-serif; /* @kind font */
  --mono:Menlo, Consolas, 'Courier New', monospace; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-eyebrow:11px;      /* eyebrow / kicker */
  --fs-caption:12px;      /* fine caption */
  --fs-caption-lg:13px;   /* caption */
  --fs-body:14px;         /* body */
  --fs-body-lg:15px;      /* comfortable body / Arabic body */
  --fs-card-title:17px;   /* card title */
  --fs-section:21px;      /* section title */
  --fs-screen-title:26px; /* screen title (app) */
  --fs-hero:32px;         /* hero — scales up via clamp() in use */

  /* ---- Weights ---- */
  --fw-reg:400;    /* @kind font */
  --fw-med:500;    /* @kind font */
  --fw-semi:600;   /* @kind font */
  --fw-bold:700;   /* @kind font */
  --fw-black:900;  /* @kind font */

  /* ---- Line-height ---- */
  --lh-tight:1.2; /* @kind other */
  --lh-title:1.4; /* @kind other */
  --lh-body:1.6; /* @kind other */
  --lh-ar:1.9; /* @kind other */

  /* ---- Tracking ---- */
  --ls-eyebrow:.3em; /* @kind other */
  --ls-caption:.16em; /* @kind other */
  --ls-tight:.02em; /* @kind other */
}

/* Numeric contexts (XP counters, ranks, timers) use tabular figures. */
.tnum,.sap-tnum{font-variant-numeric:tabular-nums;}

/* ---- Base type roles ---- */
.sap-hero{font-family:var(--ar);font-weight:var(--fw-black);font-size:clamp(32px,5.4vw,62px);line-height:var(--lh-title);color:var(--paper);direction:rtl;}
.sap-screen-title{font-family:var(--ar);font-weight:800;font-size:var(--fs-screen-title);line-height:1.35;color:var(--paper);direction:rtl;}
.sap-section-title{font-family:var(--serif);font-weight:600;font-size:var(--fs-section);line-height:var(--lh-title);color:var(--paper);}
.sap-card-title{font-family:var(--ar);font-weight:700;font-size:var(--fs-card-title);color:var(--paper);direction:rtl;}
.sap-body{font-family:var(--ar-body);font-size:var(--fs-body-lg);line-height:var(--lh-ar);color:var(--ink);direction:rtl;}
.sap-body-en{font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2);direction:ltr;}
.sap-caption{font-family:var(--sans);font-size:var(--fs-caption);letter-spacing:.04em;color:var(--muted);}
.sap-mono{font-family:var(--mono);letter-spacing:.14em;}
/* ============================================================================
   SPACING & LAYOUT — Saudi AI Passport
   The brand mixes a soft 4px-based rhythm with generous editorial section padding.
   Container is wide and centered on the marketing site; the app is a 480px column.
   ============================================================================ */
:root{
  /* ---- Spacing scale (4px base) ---- */
  --sp-0:0; /* @kind spacing */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:28px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;
  --sp-26:104px;
  --sp-section:120px;   /* vertical rhythm between marketing sections */

  /* ---- Marketing container ---- */
  --wrap-max:1180px;
  --wrap-pad:32px;

  /* ---- App shell ---- */
  --app-max:480px;      /* mobile column max width */
  --nav-h:66px;         /* bottom tab bar height (add safe-area) */
  --app-pad:18px;       /* app horizontal gutter */
  --tap-min:44px;       /* minimum touch target (hard rule) */
}

/* Centered marketing container. */
.sap-wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);}
@media (max-width:860px){.sap-wrap{padding:0 18px;}}
/* ============================================================================
   SHAPE, DEPTH & TEXTURE — Saudi AI Passport
   "Official document" depth: multi-layer soft shadows + an inset gold double-border.
   Two radius vocabularies: the marketing site keeps buttons SHARP (2px) for a formal,
   engraved feel; the app softens to 8–18px for touch.
   ============================================================================ */
:root{
  /* ---- Radius ---- */
  --r-sharp:2px;    /* marketing buttons / rules — engraved, formal */
  --r-sm:6px;       /* paper cards, passport, official-document cards */
  --r-md:10px;      /* choices, inputs */
  --r-btn:8px;      /* app buttons */
  --r-lg:16px;      /* glass cards, buttons */
  --r-xl:18px;      /* bottom sheets, swipe cards, feedback */
  --r-pill:999px;   /* pills, seals, hearts */

  /* ---- Borders ---- */
  --bw-hair:1px;
  --bw-focus:2px;
  --border-hair:1px solid var(--edge);
  --border-strong:1px solid var(--edge-strong);

  /* ---- Elevation (multi-layer soft shadows) ---- */
  --shadow-sm:0 8px 26px rgba(201,162,75,.28);       /* gold button glow */
  --shadow-md:0 20px 50px rgba(0,0,0,.4);            /* raised card */
  --shadow-lg:0 40px 90px rgba(0,0,0,.5);            /* passport / hero object */
  --shadow-glow:0 0 60px rgba(201,162,75,.14);       /* ambient gold aura */
  --shadow-toast:0 8px 24px rgba(0,0,0,.4);

  /* ---- Signature "official document" inset double-border ----
     inner deep-green rim + a thin gold hairline just inside it. */
  --engrave:inset 0 0 0 3px rgba(8,43,33,.55),inset 0 0 0 4px rgba(231,206,143,.18); /* @kind shadow */
  --engrave-strong:inset 0 0 0 3px rgba(8,43,33,.6),inset 0 0 0 4px rgba(231,206,143,.28); /* @kind shadow */

  /* ---- Glass ---- */
  --blur:20px;      /* backdrop-blur for glass surfaces (spec) */
  --blur-nav:8px;   /* lighter blur for bars */
}
/* ============================================================================
   MOTION — Saudi AI Passport
   One easing curve everywhere; springs for seals and modals. Restraint is the point:
   at most one ambient loop per screen. Exits run ~65% of the enter duration.
   prefers-reduced-motion → fade only.
   ============================================================================ */
:root{
  /* ---- Easing ---- */
  --ease:cubic-bezier(0.16,1,0.3,1); /* @kind other */
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-out:cubic-bezier(.22,1,.32,1); /* @kind other */

  /* ---- Durations ---- */
  --dur-micro:200ms; /* @kind other */
  --dur-base:350ms; /* @kind other */
  --dur-ceremony:800ms; /* @kind other */
  --dur-exit:230ms; /* @kind other */
  --stagger:40ms; /* @kind other */
}

/* ---- Signature keyframes (available system-wide) ---- */
/* wax-stamp press: overshoot down then settle, with a slight rotate */
@keyframes sap-stamp{0%{transform:scale(.4) rotate(-14deg);opacity:0;}60%{transform:scale(1.08) rotate(3deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
/* soft pop for correct answers / count-ups */
@keyframes sap-pop{0%{transform:scale(1);}40%{transform:scale(1.05);}100%{transform:scale(1);}}
/* shake for wrong answers (pair with the red + icon, never color alone) */
@keyframes sap-shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(3px);}}
/* gold-foil sheen sweep */
@keyframes sap-sheen{0%,12%{background-position:120% 120%;}55%,100%{background-position:-30% -30%;}}
/* foil text shimmer */
@keyframes sap-foil{from{background-position:0% 50%;}to{background-position:100% 50%;}}
/* current-node pulse (the one ambient loop) */
@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);}}
/* seal ring draw-on */
@keyframes sap-draw{to{stroke-dashoffset:0;}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}
/* ============================================================================
   BASE — Saudi AI Passport
   Reset, dark palm background, global film-grain, RTL defaults, focus rings.
   RTL is the DEFAULT direction; English captions are LTR islands (use .ltr / dir).
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  font-family:var(--sans);
  color:var(--text-1);
  background:var(--palm);
  line-height:var(--lh-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Global film-grain — a low-opacity noise wash over the whole page. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-repeat:repeat;opacity:.5;mix-blend-mode:overlay;
}

/* Arabic content defaults to the Arabic body face. */
[dir="rtl"]{font-family:var(--ar-body);}

/* Links inherit the gold accent (define defaults so editor-added links aren't browser-blue). */
a{color:var(--gold-light);text-decoration:none;transition:color var(--dur-micro) var(--ease);}
a:hover{color:var(--gold);}

/* Balance long headings; pretty-wrap body copy. */
h1,h2,h3,h4{text-wrap:balance;}
p{text-wrap:pretty;}

/* Visible gold focus ring (accessibility hard rule). */
:focus-visible{outline:var(--bw-focus) solid var(--gold-light);outline-offset:3px;border-radius:var(--r-sharp);}

/* Media never overflows its box. */
img,svg,video,canvas{max-width:100%;}
/* ============================================================================
   UTILITIES — Saudi AI Passport
   Reusable brand primitives: the eyebrow, gold-foil text, the engraved double
   border, hairline rules, glass surfaces, and the two signature textures.
   ============================================================================ */

/* ---- Eyebrow — the signature kicker above every screen/section title ---- */
.eyebrow,.sap-eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--gold-light);font-weight:var(--fw-bold);line-height:1.4;
}
/* centered eyebrow with flanking gold rules (marketing) */
.sap-eyebrow--center{display:flex;align-items:center;justify-content:center;gap:16px;}
.sap-eyebrow--center::before,.sap-eyebrow--center::after{content:"";width:44px;height:1px;background:var(--edge-strong);}

/* ---- Gold-foil text — animated sheen clipped to the glyphs ---- */
.foil,.sap-foil{
  background-image:var(--foil);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sap-foil 9s ease-in-out infinite alternate;
}

/* ---- Engraved double border — the "official document" frame ---- */
.engraved,.sap-engraved{border:1px solid var(--gold);box-shadow:var(--engrave-strong);}

/* ---- Hairline rule ---- */
.sap-rule{height:1px;border:0;border-top:1px solid var(--gold);box-shadow:0 1px 0 var(--edge);}
/* fading center rule */
.sap-rule--fade{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--edge-strong),transparent);}

/* ---- Glass surface — translucent white + backdrop blur ---- */
.sap-glass{
  background:var(--surface-glass);
  border:1px solid var(--edge);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
}

/* ---- Textures as overlays ---- */
/* Drop into a position:relative container for a grain wash. */
.sap-grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.35;mix-blend-mode:overlay;pointer-events:none;}
/* Guilloché / mashrabiya security lattice fill. */
.sap-guilloche{background-color:var(--palm);background-image:var(--guilloche);}

/* ---- Direction islands ---- */
.rtl{direction:rtl;text-align:right;}
.ltr{direction:ltr;text-align:left;}

/* ---- Screen-reader only (captions burned into video keep a readable copy) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
/* Icons — Lucide-style line glyphs. Color inherits via currentColor. */
.sap-icon{display:inline-block;vertical-align:middle;flex:none;}
/* ============================================================================
   BUTTONS
   Marketing CTAs are sharp (2px) and formal; app buttons soften to 8px. Press
   compresses to scale .97 with a gold glow. Gold = dark-green ink; ghost = gold.
   ============================================================================ */
.sap-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:var(--fw-semi);letter-spacing:.04em;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  border:1px solid transparent;border-radius:var(--r-sharp);
  transition:transform var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease);
}
/* Arabic labels take the Arabic UI face. */
[dir="rtl"] .sap-btn,.sap-btn.rtl{font-family:var(--ar-body);font-weight:var(--fw-bold);}
.sap-btn-label{display:inline-block;}

/* ---- Sizes ---- */
.sap-btn--sm{font-size:13px;padding:10px 20px;}
.sap-btn--md{font-size:14px;padding:15px 30px;}
.sap-btn--lg{font-size:15px;font-weight:var(--fw-bold);padding:16px 26px;border-radius:var(--r-btn);}

/* ---- Variants ---- */
.sap-btn--gold{background:var(--gold-face);color:#221803;box-shadow:var(--shadow-sm);}
.sap-btn--gold:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,162,75,.2);color:#221803;}
.sap-btn--ghost{background:transparent;color:var(--gold-light);border-color:var(--edge-strong);}
.sap-btn--ghost:hover{border-color:var(--gold);background:rgba(201,162,75,.08);color:var(--gold-light);}
.sap-btn--quiet{background:transparent;color:var(--text-2);}
.sap-btn--quiet:hover{color:var(--gold-light);background:var(--surface-glass);}

/* ---- Shape / layout modifiers ---- */
.sap-btn--pill{border-radius:var(--r-pill);}
.sap-btn--block{width:100%;}

/* ---- Press = compress + glow (spec) ---- */
.sap-btn:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.97);}
.sap-btn--gold:active:not(:disabled):not([aria-disabled="true"]){box-shadow:0 0 26px rgba(201,162,75,.5);}

/* ---- Disabled ---- */
.sap-btn:disabled,.sap-btn[aria-disabled="true"]{opacity:.4;box-shadow:none;cursor:not-allowed;pointer-events:none;transform:none;}

/* ============================================================================
   ICON BUTTONS — square, icon-only (lesson close, nav actions, share).
   ============================================================================ */
.sap-iconbtn{
  display:grid;place-items:center;flex:none;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--dim);
  border-radius:var(--r-btn);
  transition:transform var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease);
}
.sap-iconbtn--sm{width:36px;height:36px;}
.sap-iconbtn--md{width:40px;height:40px;}
.sap-iconbtn--lg{width:44px;height:44px;}   /* ≥44px touch target */
.sap-iconbtn:hover{background:var(--surface-glass-2);color:var(--gold-light);}
.sap-iconbtn:active:not(:disabled){transform:scale(.94);}
.sap-iconbtn--gold{background:var(--gold-face);color:#221803;box-shadow:var(--shadow-sm);}
.sap-iconbtn--gold:hover{background:var(--gold-face);color:#221803;box-shadow:0 0 10px rgba(201,162,75,.22);}
.sap-iconbtn--outline{border-color:var(--edge-strong);color:var(--gold-light);}
.sap-iconbtn--outline:hover{border-color:var(--gold-light);background:rgba(201,162,75,.12);color:var(--gold-light);box-shadow:0 0 0 2px rgba(201,162,75,.1);}
.sap-iconbtn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
/* ============================================================================
   CARDS
   Four surfaces: glass (translucent + blur), official-document (engraved gold
   double border), paper (cream, printable), membership (gold-on-green leather).
   ============================================================================ */
.sap-card{position:relative;border-radius:var(--r-sm);color:var(--text-1);}
.sap-card > *{position:relative;z-index:1;}

/* ---- Glass — translucent white + backdrop blur ---- */
.sap-card--glass{
  background:var(--surface-glass);border:1px solid var(--edge);border-radius:var(--r-lg);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));padding:24px;
  transition:transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}

/* ---- Official document — inset gold double border on green ---- */
.sap-card--official{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--edge);
  box-shadow:var(--engrave);padding:24px;overflow:hidden;
  transition:transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.sap-card--official.sap-card--strong{box-shadow:var(--engrave-strong);}

/* ---- Paper — cream, printable, with an engraved inner frame ---- */
.sap-card--paper{
  background:radial-gradient(130% 100% at 50% 0%,#FBF9F3 0%,#F7F3E7 58%,#F1EBDA 100%);
  color:var(--paper-ink);border:1px solid rgba(201,162,75,.5);padding:26px;overflow:hidden;
}
.sap-card--paper::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.07;pointer-events:none;}
.sap-card-frame{position:absolute;inset:8px;border:1px solid rgba(156,122,50,.5);pointer-events:none;z-index:0;}
.sap-card-frame::before{content:"";position:absolute;inset:3px;border:1px solid rgba(156,122,50,.22);}

/* ---- Membership — gold-on-green leather, wallet proportions ---- */
.sap-card--member{
  background:var(--leather);border-radius:var(--r-lg);color:var(--gold-light);
  box-shadow:var(--engrave-strong),var(--shadow-md);padding:22px 24px;overflow:hidden;
  aspect-ratio:1.586;display:flex;flex-direction:column;justify-content:space-between;
}
.sap-card--member::before{content:"";position:absolute;inset:10px;border:1px solid rgba(231,206,143,.32);border-radius:8px;pointer-events:none;}
.sap-member-top{display:flex;align-items:center;gap:12px;}
.sap-member-issuer{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
.sap-member-issuer b{display:block;font-family:var(--ar);font-size:14px;letter-spacing:0;color:var(--gold-light);margin-top:3px;}
.sap-member-holder{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--paper);letter-spacing:.04em;}
.sap-member-holder .ar{display:block;font-family:var(--ar);font-size:15px;color:var(--gold-light);margin-top:2px;}
.sap-member-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gold-light);}
.sap-member-row .lbl{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}

/* ---- Interactive: hover lift + a gold light-sweep ---- */
.sap-card--interactive{cursor:pointer;overflow:hidden;}
.sap-card--interactive:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-md);}
.sap-card--interactive::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(231,206,143,.06) 45%,rgba(255,244,214,.10) 50%,rgba(231,206,143,.06) 55%,transparent);
  transform:skewX(-18deg);transition:left .9s var(--ease-out);mix-blend-mode:screen;}
.sap-card--interactive:hover::after{left:130%;}
@media (prefers-reduced-motion:reduce){.sap-card--interactive:hover{transform:none;}.sap-card--interactive::after{display:none;}}
/* ============================================================================
   SEALS & STAMPS
   The octagon medallion is the brand mark — a foil-metal seal on palm green.
   City seals carry four states; earned stamps read as inked, unearned as embossed.
   ============================================================================ */
.sap-sealmark{display:block;flex:none;}

/* ---- City seal (stateful medallion) ---- */
.sap-cityseal{position:relative;display:grid;place-items:center;flex:none;}
.sap-cityseal-mark{width:100%;height:100%;}

/* completed — foil catches light + a stamped check badge */
.sap-cityseal--completed{filter:drop-shadow(0 4px 14px rgba(201,162,75,.4));}
.sap-cityseal-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);}
.sap-cityseal-badge svg{width:62%;height:62%;stroke-width:3;}

/* current — the one ambient loop: a pulsing gold ring */
.sap-cityseal-ring{position:absolute;inset:-7%;border-radius:50%;border:2px solid var(--gold-light);animation:sap-pulse 2.4s var(--ease) infinite;}

/* locked — desaturated, fogged, padlocked (icon + opacity, never color alone) */
.sap-cityseal--locked{filter:grayscale(1) brightness(.85);opacity:.6;}
.sap-cityseal-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%);}
.sap-cityseal-lock svg{width:34%;height:34%;}

/* coming-soon — faint mark inside a dashed reservation ring */
.sap-cityseal--coming .sap-cityseal-mark{opacity:.4;}
.sap-cityseal--coming::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--edge-strong);}

/* ============================================================================
   STAMP — an inked passport stamp. Earned = colored ink; unearned = faint emboss.
   ============================================================================ */
.sap-stamp{position:relative;aspect-ratio:1;transform:rotate(var(--rot,-6deg));}
.sap-stamp-ring{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:12%;
  border:2.5px solid currentColor;box-shadow:inset 0 0 0 3px transparent,0 0 0 2px transparent;}
.sap-stamp-ring::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1.5px dashed currentColor;opacity:.7;}
.sap-stamp-ar{font-family:var(--ar);font-weight:800;font-size:clamp(13px,15%,22px);line-height:1.2;direction:rtl;}
.sap-stamp-en{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.85;}
.sap-stamp-sub{font-family:var(--mono);font-size:8px;letter-spacing:.18em;margin-top:2px;opacity:.7;}

/* tones (ink color) */
.sap-stamp--green{color:#0C4A2E;}
.sap-stamp--gold{color:var(--gold-dark);}
.sap-stamp--red{color:var(--danger);}

/* earned — saturated ink, multiply-blended onto the page, with a stamp-in pop */
.sap-stamp--earned{mix-blend-mode:multiply;filter:drop-shadow(0 1px 0 rgba(138,106,46,.25));animation:sap-stamp .5s var(--ease-spring) both;}
/* faint — pale embossed outline waiting to be filled */
.sap-stamp--faint{opacity:.28;filter:grayscale(1);}
@media (prefers-reduced-motion:reduce){.sap-stamp--earned{animation:none;}.sap-cityseal-ring{animation:none;}}