/* ============================================================================
   رِماية — صفحات الدخول (auth). نمط مستقلّ بذاته، بلا اعتماد على لوحة التحكم.
   Rimaya — the merchant-facing auth pages: login, welcome (invite → set
   password), forgot and reset.

   ---------------------------------------------------------------------------
   WHY THIS SHEET DEFINES ITS OWN TOKENS

   AGENTS.md §2 says the merchant workspace is our own brand identity and the
   strategy change moves these pages onto our own domain. The dashboard's tokens
   (`prototypes/admin/css/base.css`) are still the OLD Salla-themed set, and the
   landing page's set (`prototypes/landing/css/landing.css`) is the new purple
   identity but scoped to marketing. These pages are the merchant's FIRST
   impression and must not inherit a stale palette through a stylesheet that is
   being re-themed by another worker in parallel, so the six official colours and
   the derived neutrals are declared here, once, and every component below reads
   a variable. No component in this file contains a raw brand hex.

   The values are not invented: `prototypes/admin/BRAND_NOTES.md` §1.1–§1.2 and
   §8.2 are the source, and the two derived families (surfaces, and the one
   status colour) are marked "derived" below with the measurement behind them.

   ---------------------------------------------------------------------------
   THE THREE RULES THIS FILE CARRIES

   1) **The gradient never carries body copy in its Violet end.** White on
      `#BB50F8` measures 3.74:1 (BRAND_NOTES §1.6) — below AA for body text. The
      135° gradient is therefore oriented so the Violet stop lands in the
      decorative corner, and a scrim (`--brand-scrim`) sits under every word. The
      promise line reads against Deep (`#331761`, 14.62:1) whatever the viewport.

   2) **Motion is capped and pausable, and reduced motion is honoured globally.**
      Three floating cards, one slow light sweep, one grain layer. Every one is
      inside the `prefers-reduced-motion` guard at the bottom of this file, and
      nothing animates layout — only `transform` and `opacity`.

   3) **One status colour, documented.** The identity has no success/warning/
      danger (BRAND_NOTES §8.7 — an open decision). An auth form's error state has
      to be unmistakable, because "the password is wrong" and "your session ended"
      must not look alike, so this sheet derives exactly one red, `--error`, and
      confines it to validation copy, the invalid ring and the field's start bar.
      Success is the brand's own Electric→Violet, because a reward is not a
      status.
   ========================================================================== */

/* --------------------------------------------------------------- الخطوط --- */
/* Self-hosted, from the same files the landing page ships (SIL OFL, see
   `prototypes/landing/fonts/OFL.txt`). `thmanyah sans` remains the identity's
   Arabic face but its licence is unverified (BRAND_NOTES §2.4) — IBM Plex Sans
   Arabic is the documented substitute and is what is served. Three weights only:
   the page uses 400/500/700. */
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Rimaya Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ------------------------------------------------------------ الرموز --- */
:root {
  /* الرسمي — BRAND_NOTES §1.1–§1.2 (لا قيمة خارج هذا الجدول إلا الموسوم) */
  --brand-deep: #331761;
  --brand: #5c17fd;
  --brand-violet: #bb50f8;
  --brand-mid: #4717ad;
  --charcoal: #1a1a1a;
  --white: #ffffff;

  /* تدرّج الهوية: 135°، Deep ← Electric ← Violet (§1.4 + اتجاه القرار) */
  --gradient-brand: linear-gradient(
    135deg,
    var(--brand-deep) 0%,
    var(--brand) 52%,
    var(--brand-violet) 100%
  );
  /* سواتر (مشتقة): تضمن أن كل كلمة فوق التدرّج تجلس على Deep لا على Violet */
  --brand-scrim: radial-gradient(
    120% 90% at 0% 0%,
    rgba(23, 9, 51, 0.72) 0%,
    rgba(23, 9, 51, 0.34) 45%,
    rgba(23, 9, 51, 0) 72%
  );
  /* حبر العلامة (مشتق): Electric على الفاتح (7.01:1 ✅)، Violet على الداكن (4.9:1 ✅).
     #5C17FD لا يصلح كنص على سطح داكن (§1.6) — لذا يتغيّر الرمز لا التعبئة. */
  --brand-ink: var(--brand);
  /* التعبئة الأساسية: Electric دائماً — وهي الرمز الذي يحمل نصاً أبيض (7.01:1) */
  --brand-fill: var(--brand);
  --on-brand: var(--white);
  --brand-fill-hover: #4a10d6; /* مشتق: Electric أعمق 8% */

  /* الأسطح والمحايدات — مشتقة كما في §8.2 (صبغة Deep على أبيض) */
  --canvas: #f7f6fa;
  --surface: #ffffff;
  --surface-sunken: #f2f0f7;
  --ink: #1a1a1a;
  --ink-secondary: #55516b;
  --ink-muted: #6f6a86; /* مشتق ومُقوّى: 4.9:1 على --surface (الأصل §8.2 كان 4.2:1) */
  --ink-inverse: var(--white);
  --hairline: #e6e3ee;
  --hairline-strong: #d3cee2;
  /* حدّ عنصر تحكّم: WCAG 1.4.11 يطلب 3:1 للحدّ الذي يُعرِّف الحقل أو الزر.
     `--hairline-strong` (1.53:1) يكفي فاصلاً زخرفياً ولا يكفي حدّاً، فوجب رمز
     ثانٍ مشتق ومُتحقَّق: 3.56:1 على --surface و3.15:1 على --surface-sunken. */
  --field-border: #8b83a6;
  --accent-soft: #ede6ff;
  --accent-mid: #c9b8e8;

  /* الحالات — قرار واحد موثَّق (BRAND_NOTES §8.7 لا يعطي ألوان حالة).
     --error مشتق: 6.0:1 على --surface و5.6:1 على --surface-sunken (AA ✅)،
     ولا يُستخدم إلا لنصّ خطأ وحدّ حقل. */
  --error: #c0244e;
  --error-soft: #fdeef2;
  --error-ring: rgba(192, 36, 78, 0.28);
  --success: var(--brand);

  /* الظلال — مشتقة من Deep (لا رمادي محايد) */
  --shadow-1: 0 1px 2px rgba(51, 23, 97, 0.05), 0 12px 26px -20px rgba(51, 23, 97, 0.3);
  --shadow-2: 0 32px 70px -40px rgba(51, 23, 97, 0.5), 0 6px 16px -10px rgba(51, 23, 97, 0.14);
  --shadow-brand: 0 14px 32px -16px rgba(92, 23, 253, 0.55);

  /* الخط والحجم — سلّم واجهة مشتق (§8.5) */
  --font-ar: "Rimaya Arabic", "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-lat: "Manrope", "Rimaya Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --fs-display: clamp(26px, 3.2vw, 34px);
  --fs-h1: 24px;
  --fs-h2: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-caption: 12px;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-tile: 18px;
  --field-h: 52px;

  --dur-1: 140ms;
  --dur-2: 220ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

/* الوضع الداكن — يتبع النظام افتراضياً، ويُثبَّت بـ`data-theme` من `auth.js`.
   الأسطح الداكنة مشتقة: Deep مُعتَّم، والأحبار من نفس العائلة. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #120826;
    --surface: #1c1040;
    --surface-sunken: #251549;
    --ink: #f6f3ff;
    --ink-secondary: #c8bee6;
    --ink-muted: #a398c9;
    --ink-inverse: var(--white);
    --hairline: #30205c;
    --hairline-strong: #463081;
    --field-border: #7a6da8;
    --accent-soft: #2c1a5c;
    --accent-mid: #6a4ec0;
    /* تدرّج Violet فاتح للوضع الداكن: #BB50F8 يصل 4.38:1 على السطح الغائر،
       والتدرّج المشتق #C79BFF يبلغ 7.98:1 على --surface و6.78:1 على --accent-soft. */
    --brand-ink: #c79bff;
    --brand-fill-hover: #6d31ff;
    --error: #ff8ba7; /* 6.4:1 على --surface الداكن */
    --error-soft: #3a0f22;
    --error-ring: rgba(255, 139, 167, 0.34);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 26px -20px rgba(0, 0, 0, 0.7);
    --shadow-2: 0 32px 70px -40px rgba(0, 0, 0, 0.8), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
/* الاختيار الصريح يتجاوز النظام، ولذلك يأتي بعده. */
:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f7f6fa;
  --surface: #ffffff;
  --surface-sunken: #f2f0f7;
  --ink: #1a1a1a;
  --ink-secondary: #55516b;
  --ink-muted: #6f6a86;
  --hairline: #e6e3ee;
  --hairline-strong: #d3cee2;
  --field-border: #8b83a6;
  --accent-soft: #ede6ff;
  --accent-mid: #c9b8e8;
  --brand-ink: var(--brand);
  --brand-fill-hover: #4a10d6;
  --error: #c0244e;
  --error-soft: #fdeef2;
  --error-ring: rgba(192, 36, 78, 0.28);
  --shadow-1: 0 1px 2px rgba(51, 23, 97, 0.05), 0 12px 26px -20px rgba(51, 23, 97, 0.3);
  --shadow-2: 0 32px 70px -40px rgba(51, 23, 97, 0.5), 0 6px 16px -10px rgba(51, 23, 97, 0.14);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #120826;
  --surface: #1c1040;
  --surface-sunken: #251549;
  --ink: #f6f3ff;
  --ink-secondary: #c8bee6;
  --ink-muted: #a398c9;
  --hairline: #30205c;
  --hairline-strong: #463081;
  --field-border: #7a6da8;
  --accent-soft: #2c1a5c;
  --accent-mid: #6a4ec0;
  --brand-ink: #c79bff;
  --brand-fill-hover: #6d31ff;
  --error: #ff8ba7;
  --error-soft: #3a0f22;
  --error-ring: rgba(255, 139, 167, 0.34);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 26px -20px rgba(0, 0, 0, 0.7);
  --shadow-2: 0 32px 70px -40px rgba(0, 0, 0, 0.8), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------ الأساس --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

:lang(en) body,
html[lang="en"] body {
  font-family: var(--font-lat);
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button,
input {
  font: inherit;
  color: inherit;
}

/* كل عنصر تفاعلي يراه التاب: حلقة تركيز ظاهرة، لا `outline: none` في الملف. */
:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -60px;
  z-index: 9;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  transition: inset-block-start var(--dur-1) var(--ease);
}
.skip:focus {
  inset-block-start: 12px;
}

/* ------------------------------------------------------------ التخطيط --- */
/* فوق 900px: لوحة هوية + لوحة نموذج. في RTL تقع لوحة الهوية يميناً (بداية
   السطر البصري) — وهذا هو الترتيب في DOM، فيعمل الاثنان بلا حالة خاصة. */
.auth {
  display: grid;
  grid-template-columns: minmax(320px, 44%) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* --------------------------------------------------------- لوحة الهوية --- */
.brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(28px, 4vw, 64px);
  background: var(--gradient-brand);
  color: var(--ink-inverse);
}

/* الساتر: يضمن أن كل نص فوق التدرّج يجلس على Deep (14.62:1) لا على Violet. */
.brand__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--brand-scrim);
  pointer-events: none;
}

/* الحُبَيبات: نسيج خفيف، لا صورة ولا طلب شبكة. */
.brand__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ساتر سفلي: آخر التدرّج هو Violet الساطع، وسطر التذييل يجلس عليه. */
.brand::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 0;
  height: 140px;
  background: linear-gradient(to top, rgba(23, 9, 51, 0.62), rgba(23, 9, 51, 0));
  pointer-events: none;
}

.brand__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 100%;
}

/* قفل الشعار: علامة ملوّنة على بلاطة فاتحة (الشكل المعتمد §3.8) + الكاليغرافي
   الأسود مُقلوباً إلى أبيض (حلّ §8.4 المسموح — ملف بملء واحد `#000000`).
   كل ملفات الشعار في صندوق مربّع 264.58 وبداخلها حشو: الكاليغرافي 30% أعلى
   وأسفل، والعلامة 17%. فيُقاس الصندوق على الرسم لا على الملف — وإلا بقي الشعار
   أصغر مما يبدو، أو حجز 90px ارتفاعاً فارغاً في صفّ الترويسة. */
.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lockup__tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 0 0 1px rgba(51, 23, 97, 0.1);
}
.lockup__tile img {
  width: 44px;
  height: 44px;
  display: block;
}
/* 150 × (1 − 0.30 − 0.298) = 60 رأسياً، و150 × 0.905 = 136 عرضاً؛ والهوامش
   السالبة تُلغي الحشو الفارغ من التخطيط. */
.lockup__word {
  width: 150px;
  height: 150px;
  margin-block: -45px;
  filter: brightness(0) invert(1);
}
.lockup--onlight .lockup__word {
  filter: none;
}
.lockup--onlight .lockup__tile {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.brand__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block: auto;
  max-width: 21ch;
}
.brand__promise {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.brand__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.brand__facts li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand__facts li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-violet);
}
.brand__foot {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

/* ----------------------------------------------- الأشكال الطافية (زينة) --- */
/* بطاقات عرض مرسومة بالـCSS: بلا صور، بلا شبكة، و`aria-hidden`.
   كلها في الجهة الداخلية من اللوحة، والنص في الجهة الخارجية، فلا يتراكبان —
   ولا واحدة منها تخرج عن اللوحة (وهذا ما كان يجعل الصفحة تُمرَّر أفقياً). */
.brand__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.art-glow {
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -14%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(187, 80, 248, 0.55) 0%, rgba(187, 80, 248, 0) 68%);
  filter: blur(6px);
}
.art-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 172px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -24px rgba(10, 2, 32, 0.7);
  animation: drift 16s var(--ease-soft) infinite;
}
.art-card--1 {
  --rot: -4deg;
  inset-block-start: 12%;
  inset-inline-end: 8%;
}
.art-card--2 {
  --rot: 3deg;
  inset-block-start: 42%;
  inset-inline-end: 26%;
  width: 148px;
  animation-duration: 20s;
  animation-direction: reverse;
}
.art-card--3 {
  --rot: -2deg;
  inset-block-end: 12%;
  inset-inline-end: 5%;
  width: 160px;
  animation-duration: 24s;
}
.art-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.62);
}
.art-bar--short {
  width: 58%;
  background: rgba(255, 255, 255, 0.34);
}
.art-bar--head {
  width: 74%;
  height: 10px;
}
.art-pill {
  align-self: flex-start;
  margin-block-start: 2px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--white);
  color: var(--brand-deep);
  font-family: var(--font-lat);
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg));
  }
  50% {
    transform: translate3d(0, -16px, 0) rotate(var(--rot, 0deg));
  }
}

/* ---------------------------------------------------------- لوحة النموذج --- */
.panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(18px, 4vw, 48px);
  background: var(--canvas);
}
.panel__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.panel__in {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.head__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.head__lead {
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
}
.head__title b {
  font-weight: 700;
}

/* أزرار الشريط: صغيرة، هادئة، و48px منطقة لمس على الموبايل */
.iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--field-border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-secondary);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.iconbtn:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}
.iconbtn svg {
  width: 15px;
  height: 15px;
  display: block;
}
/* أيقونة المظهر: الشمس والقمر يتناوبان حسب الوضع الساري — لا نص مكرّر. */
.iconbtn .sun {
  display: none;
}
:root[data-theme="dark"] .iconbtn .sun {
  display: block;
}
:root[data-theme="dark"] .iconbtn .moon {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iconbtn .sun {
    display: block;
  }
  :root:not([data-theme="light"]) .iconbtn .moon {
    display: none;
  }
}
.langbtn {
  min-width: 40px;
  justify-content: center;
  font-family: var(--font-lat);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- النموذج --- */
.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}
/* القاعدة معروضة قبل الكتابة، لا بعد محاولة فاشلة. */
.field__hint {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}
.field__wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input {
  width: 100%;
  height: var(--field-h);
  padding: 0 15px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder {
  color: var(--ink-muted);
}
.input:hover {
  border-color: var(--brand-ink);
}
.input:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.input[dir="ltr"] {
  text-align: left;
}
.input[readonly] {
  background: var(--surface-sunken);
  color: var(--ink-secondary);
  cursor: default;
}
/* الحقل الذي فيه زرّ: نُبعد النص عن الزر. الحقلان دائماً `dir="ltr"` (بريد
   وكلمة مرور)، فـ`padding-inline-end` فيهما = اليمين الفيزيائي، وموضع الزر
   فيزيائي كذلك: في RTL كان `inset-inline-end` يضع الزر فوق النص نفسه. */
.field--hasbtn .input {
  padding-inline-end: 78px;
}
.reveal {
  position: absolute;
  right: 6px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-secondary);
  font-size: var(--fs-caption);
  font-weight: 500;
  cursor: pointer;
}
.reveal:hover {
  color: var(--brand-ink);
  background: var(--accent-soft);
}
/* خطأ الحقل: حدّ أحمر + شريط بداية + نصّ — ثلاث إشارات، لا لون وحده (§1.6). */
.input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 4px var(--error-ring);
}
.field__err {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--error);
  font-size: var(--fs-sm);
  font-weight: 500;
}
/* تركيز برمجي هادئ: لا شيء يُرسم حتى أول ضغطة مفاتيح أو لمسة. */
.no-ring:focus,
.no-ring:focus-visible {
  outline: none;
  box-shadow: none;
}
.input.no-ring:focus {
  border-color: var(--field-border);
}
/* حاويات تُستقبل التركيز لقارئ الشاشة، لا لتُرسم حولها حلقة. */
.head__title:focus,
.stores:focus,
.state:focus {
  outline: none;
}

/* مؤشّر القوة: ثلاث قطع + كلمة. الشكل يحمل المعنى، والكلمة تسمّيه. */
.strength {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}
.strength__bars {
  display: flex;
  gap: 4px;
}
.strength__bars i {
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 99px;
  background: var(--hairline-strong);
}
.strength__text {
  font-size: var(--fs-caption);
  color: var(--ink-secondary);
}
.strength[data-level="weak"] .strength__bars i:nth-child(1) {
  background: var(--error);
}
.strength[data-level="ok"] .strength__bars i:nth-child(-n + 2) {
  background: var(--brand-mid);
}
.strength[data-level="strong"] .strength__bars i {
  background: var(--brand);
}

/* نصّ مساعد/ملاحظة أسفل الحقل */
.hint {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

/* زرّ أساسي: Electric، بارتفاع 52px، وبطاقة تحميل داخلية بلا صورة */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--field-h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--brand-fill);
  color: var(--on-brand);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled) {
  background: var(--brand-fill-hover);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn[disabled],
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
  box-shadow: none;
}
.btn--quiet {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--field-border);
  box-shadow: none;
}
.btn--quiet:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--brand-ink);
}
.spinner {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  animation: spin 700ms linear infinite;
}
.spinner--ink {
  border-color: var(--hairline-strong);
  border-top-color: var(--brand-ink);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* سطر أسفل النموذج: رابط واحد واضح، لا زخرفة */
.form__links {
  display: flex;
  justify-content: center;
  font-size: var(--fs-sm);
}
/* سطر المساعدة: جملة قصيرة ورابط، بلا صندوق ولا شارة. */
.fineprint {
  text-align: center;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--ink-muted);
}
.fineprint a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------- الحالات والرسائل --- */
.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border-inline-start: 3px solid var(--error);
  background: var(--error-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}
/* الحاوية موجودة في الصفحة قبل الرسالة، لا معها: قارئ الشاشة يُعلن ما يُكتب
   داخل منطقة حيّة قائمة، ولا يضمن أن يُعلن منطقةً ظهرت في اللحظة نفسها.
   فتبقى في DOM بحجم صفر، وتتّسع عند وصول نصّ (`.is-on`). */
.msg:not(.is-on) {
  padding: 0;
  border: 0;
  gap: 0;
  background: none;
}
.msg:not(.is-on) .msg__icon {
  display: none;
}
.msg--ok {
  border-inline-start-color: var(--brand);
  background: var(--accent-soft);
}
.msg--info {
  border-inline-start-color: var(--brand-ink);
  background: var(--accent-soft);
}
.msg--info .msg__icon {
  color: var(--brand-ink);
}
.msg__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-block-start: 1px;
  color: var(--error);
}
.msg--ok .msg__icon {
  color: var(--brand-ink);
}

/* حالات كاملة: تحقّق، رابط منتهٍ، نجاح */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 4px 6px;
  text-align: center;
}
.state__title {
  font-size: var(--fs-h1);
  font-weight: 700;
}
.state__text {
  color: var(--ink-secondary);
  font-size: var(--fs-sm);
  max-width: 34ch;
}
.state__art {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand-ink);
}
.state__art svg {
  width: 26px;
  height: 26px;
}
.state--ok .state__art {
  background: var(--gradient-brand);
  color: var(--white);
  box-shadow: var(--shadow-brand);
}
.state--warn .state__art {
  background: var(--error-soft);
  color: var(--error);
}
.state .btn {
  min-width: 220px;
  margin-block-start: 4px;
}
/* حالة التحقّق: تُعرض قبل أول رسم عندما يضع `auth.js` `data-auth="checking"`،
   فلا تومض استمارة ثم تُستبدَل. وبلا جافاسكربت لا تُعرض أبداً. */
[data-when="checking"] {
  display: none;
}
:root[data-auth="checking"] [data-when="checking"] {
  display: flex;
}
:root[data-auth="checking"] [data-when="ready"] {
  display: none;
}

/* إخفاء منطقي: خاصية `hidden` يجب أن تفوز على `display:flex` أعلاه. */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------- اختيار المتجر --- */
.stores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* زرّ بشكل رابط: فعل ثانوي داخل سطر، لا زرّ يعارض الزرّ الأساسي. */
.linkish {
  padding: 2px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--brand-ink);
  font: inherit;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover {
  color: var(--brand-fill-hover);
}
.picker__foot {
  display: flex;
  justify-content: center;
  font-size: var(--fs-sm);
}
.store {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
}
.store:hover {
  border-color: var(--brand-ink);
  background: var(--accent-soft);
}
.store:active {
  transform: translateY(1px);
}
.store__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--brand-ink);
  font-weight: 700;
}
.store__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.store__name {
  font-weight: 700;
  font-size: var(--fs-sm);
}
.store__domain {
  font-family: var(--font-lat);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  direction: ltr;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store__go {
  margin-inline-start: auto;
  color: var(--ink-muted);
}
/* في LTR يبقى سهم الاتجاه صحيحاً: السهم يشير دائماً إلى جهة التقدّم القرائي. */
.store__go svg {
  width: 16px;
  height: 16px;
  display: block;
}
html[dir="rtl"] .store__go svg {
  transform: scaleX(-1);
}

/* ------------------------------------------------------------- الموبايل --- */
@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .brand {
    gap: 16px;
    padding: 18px 18px 22px;
  }
  .brand__in {
    gap: 14px;
    min-height: 0;
  }
  .brand__body {
    margin-block: 0;
    max-width: none;
    gap: 8px;
  }
  .brand__promise {
    font-size: 23px;
    max-width: 20ch;
  }
  /* الشريط يحمل الهوية والوعد فقط: الشعار، الجملة، والنموذج بعدها. */
  .brand__facts,
  .brand__foot,
  .brand__art,
  .brand::after {
    display: none;
  }
  .lockup__word {
    width: 118px;
    height: 118px;
    margin-block: -35px;
  }
  .panel {
    justify-content: flex-start;
    padding: 18px 16px 32px;
  }
  .panel__bar {
    margin-block-end: 4px;
  }
  .card {
    padding: 20px 16px;
    border-radius: var(--radius);
    gap: 18px;
  }
  .head__title {
    font-size: var(--fs-h1);
  }
  .skip {
    inset-inline-start: 16px;
    transform: none;
  }
}

/* شاشات قصيرة: لا نُكدّس اللوحة رأسياً */
@media (min-width: 901px) and (max-height: 640px) {
  .brand__art {
    display: none;
  }
  .brand__foot {
    display: none;
  }
}

/* ------------------------------------------------------- تفضيلات الحركة --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}