/* ══ login.css — ورود / ثبت‌نام / کد یک‌بارمصرف ═══════════════════════════════
 *
 * زبانِ دیداری همان `landing.css` و `home.css` است تا مسیرِ «صفحهٔ اول ← ورود ←
 * داشبورد» یک محصول به نظر برسد — و حالا از یک جا می‌آید: توکن‌های theme.css.
 *
 * نکته‌ای که برنگردد: اینجا `@import` گوگل‌فونت بود. روی شبکهٔ ایران رندر را
 * بلاک می‌کرد و بدتر اینکه فونتِ لاتین می‌آورد در حالی که کلِ متن فارسی است.
 * فونت حالا خودمیزبان است (`/vendor/fonts.css`) و استک از var(--font) می‌آید
 * (همان Vazir → Vazirmatn، ولی یک‌بار نوشته‌شده).
 *
 * ⚠ هشت بازتعریفِ توکن اینجا بود (--accent، --accent-2، --accent-soft،
 *   --danger، --radius، --radius-sm، --shadow-sm، --shadow-lg) به‌علاوهٔ
 *   `color-scheme: light`. این فایل بعد از theme.css بار می‌شود، پس همه‌شان در
 *   **هر دو تم** برنده بودند و صفحهٔ ورود در تاریکی سفید می‌مانْد — با اینکه
 *   کلیدِ شناورِ تم (`.mb-theme-fab`) روی همین صفحه هست و پایین‌تر هم
 *   اندازه‌اش تنظیم می‌شود. حالا هیچ‌کدام نیست:
 *     --radius (۲۰px) → var(--r-xl)  |  --radius-sm (۱۴px) → var(--r-lg)
 *
 * کنتراست: هرجا مرکب روی `--accent-soft` یا سطحِ پنل می‌نشیند، نسخهٔ `-text`
 * است نه رنگِ خام — `--accent` روی `--accent-soft` نسبتِ ۴٫۴۳ می‌دهد.
 *
 * بریک‌پوینت‌ها: ۱۰۲۴ (کفِ لمس) ماند، و ۴۲۰ به مرزِ گوشیِ پروژه (۶۴۰) رفت.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  /* انتهای هاله‌ها `transparent` است نه rgbaِ خام، تا در تاریکی هم محو شوند. */
  background:
    radial-gradient(1000px 460px at 80% -10%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 0%, var(--info-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  letter-spacing: 0;
  min-height: 100vh;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-5);
}

.auth-back {
  align-self: center;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--r-md);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.auth-back:hover { background: var(--accent-soft); color: var(--accent-text); }
.auth-back:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* قابِ کارت از کیت می‌آید: ‎.mb-card--lg‎ (گردیِ --r-xl + پدینگِ --sp-5) و
   ‎.mb-card--float‎ (پلهٔ چهارمِ ارتفاع، --shadow-lg). اینجا فقط عرض می‌ماند. */
.auth-card {
  width: 100%;
  max-width: 430px;
}

/* ── سربرگ ─────────────────────────────────────────────────── */
.auth-head { text-align: center; margin-bottom: var(--sp-5); }
.auth-logo {
  display: grid;
  place-items: center;
  width: var(--sp-12); height: var(--sp-12);
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-md);
  color: var(--on-accent);
  background: var(--grad-accent);
  box-shadow: var(--shadow);
}
.auth-logo svg { width: var(--icon-lg); height: var(--icon-lg); }
.auth-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); margin-bottom: var(--sp-1); letter-spacing: 0; }
/* زیرعنوانِ کارت: متنِ توضیحِ ایستا، پس ‎.mb-note.mb-note--md‎ از کیت
   (login.html). وسط‌چینی‌اش را ‎.auth-head‎ می‌دهد، نه خودش. */

/* ── تب‌ها ─────────────────────────────────────────────────── */
.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-1);
  background: var(--info-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.auth-tab {
  border: 0;
  border-radius: var(--r-sm);
  min-height: var(--ctl-h-md);
  padding: 0 var(--sp-1);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.auth-tab:hover { color: var(--text-2); }
/* تبِ فعال با پس‌زمینه + سایه + مرکبِ پررنگ گفته می‌شود، نه فقط رنگ. */
.auth-tab.is-on { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.auth-tab:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--focus-offset) * -1); }

/* ── پنل‌ها ────────────────────────────────────────────────── */
.auth-pane { display: none; }
.auth-pane.is-on { display: grid; gap: var(--sp-3); }

/* فیلد از کیت: ‎.mb-field‎ + ‎.mb-field__label‎ + ‎.mb-input--lg.mb-input--soft‎
   در login.html. استدلالِ «۱۶px در هر عرضی، وگرنه سافاریِ iOS صفحه را زوم
   می‌کند» دیگر در CSSِ این صفحه نمی‌ماند — همان یک قانون حالا ‎--lg‎ی کیت است
   (primitives.css، بندِ ۴-الف) و هر صفحهٔ «اولین برخورد» از همان‌جا می‌گیردش.
   حالتِ خطا هم از ‎[aria-invalid="true"]‎ِ کیت می‌آید، نه از کلاسِ .is-bad. */
/* تنها تکهٔ فوکوسِ این فایل که برنگشت به کیت، و عمداً: کیت فوکوسِ فیلد را با
   هالهٔ نرم (box-shadow) می‌گوید و ‎outline‎ را صفر می‌کند — که در حالتِ
   «رنگ‌های اجباری» ویندوز سایه حذف می‌شود و آن ‎outline:none‎ سرِ جایش می‌ماند،
   یعنی کلِ مسیرِ تبِ فرمِ ورود بی‌نشانه. تا وقتی این حلقه در primitives.css
   (بندِ ۷) به خودِ ‎.mb-input‎ برسد، این بلوک همان چیزی است که در HEAD
   ‎.auth-field input:focus-visible‎ می‌داد — نه ظاهرِ عادی را عوض می‌کند، نه
   چیزی از کیت را بازنویسی. با رسیدنِ قاعدهٔ کیت، حذفش کنید. */
@media (forced-colors: active) {
  .auth-field input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
}

/* ستارهٔ «الزامی» روی سطحِ پنل: نسخهٔ -text، تا در تاریکی هم روی سطحِ تیره خوانا باشد. */
.auth-req { color: var(--danger-text); }

/* خانهٔ کد: جزیرهٔ وسط‌چینِ مونو از کیت می‌آید — ‎.mb-input--code‎ در login.html
   (‎text-align:center‎ + ‎font-mono‎ + ‎tabular-nums‎ + جداسازیِ LTR).
   آنچه اینجا می‌ماند سهمِ *این* یک خانه است و نه واژگانِ عمومی: شش رقم که
   باید حرف‌به‌حرف خوانده شوند، پس درشت و با فاصلهٔ حرفی.
   letter-spacing اینجا استثنای پذیرفته است: محتوا شش رقمِ لاتین است، نه متنِ
   فارسی — و خودِ خانه با ‎--code‎ جزیرهٔ LTR است. */
.auth-otp-input {
  letter-spacing: .5em;
  text-indent: .5em; /* جبرانِ فاصلهٔ آخر، وگرنه متن کمی چپ می‌افتد */
  /* ‎!important‎ لازم نبود: primitives.css پیش از این فایل تزریق می‌شود، پس
     در برابریِ اسپسیفیسیتی همین خط برندهٔ کسکید است. */
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

/* دکمهٔ اصلیِ هر فرم: ‎.mb-btn.mb-btn--primary.mb-btn--block‎ از کیت (login.html). */

.auth-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--accent-text);
  cursor: pointer;
  padding: var(--sp-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.auth-link:disabled { color: var(--faint); cursor: not-allowed; text-decoration: none; }

/* ── پیام‌ها ───────────────────────────────────────────────── */
/* جعبهٔ پیام از کیت می‌آید: ‎.mb-note.mb-note--callout‎ + لحنِ ‎--ok‎/‎--danger‎
   (زمینهٔ ‎-soft‎، کادرِ هم‌رنگ، مرکبِ ‎-text‎) — همان سه‌تایی که این فایل با دست
   نوشته بود، و همان مرجعی که ‎.uf-role-hint‎ در فرمِ کاربر از آن می‌آید.
   ⚠ لحن با دو کلاسِ ‎.is-ok‎/‎.is-bad‎ گفته نمی‌شود دیگر: آن‌ها نام‌های حالتِ
   صفحه بودند و در کنارِ کلاسِ کیت یا می‌باختند یا بازنویسی می‌کردند. login.js
   حالا نامِ کاملِ کلاسِ لحن را از یک جدول برمی‌دارد.
   اینجا فقط فاصله‌اش تا فرم می‌ماند. */
.auth-msg { margin-bottom: var(--sp-3); }

.auth-note {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 2;
}

/* ── ورودِ جایگزین ─────────────────────────────────────────── */
.auth-alt { margin-top: var(--sp-5); }
.auth-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--faint);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-3);
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-google { display: flex; justify-content: center; }

.auth-foot { font-size: var(--fs-xs); color: var(--muted); }

/* هدفِ لمسی: تب‌ها/بازگشت/لینک‌ها زیرِ کف بودند — نه فقط روی موبایل، که روی
   تبلت (۷۶۸px) هم، چون این قانون قبلاً فقط زیرِ ۴۲۰px بود و تبلت از زیرش رد
   می‌شد (اندازه‌گیری‌شده روی iPhone 13 و iPad: ۱۵۴×۳۳، ۱۱۸×۳۷، ۱۲۹×۲۷).
   حالا کلِ بازهٔ لمسی (تا ۱۰۲۴px) را می‌گیرد و کف هم ۴۰ نیست، --ctl-h-touch
   (۴۴) است — همان کفی که primitives.css برای هر کنترلِ .mb-* می‌گذارد.
   فونت دست‌نخورده می‌ماند — رونوشتِ قبلیِ همین قانون فونتِ تب را به ۱۱٫۵px
   می‌رساند (زیرِ کفِ ۱۲px)، همان اشتباه این‌جا حذف شد. */
@media (max-width: 1024px) {
  .auth-tab {
    min-height: var(--ctl-h-touch);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ctl-h-touch);
    padding-inline: var(--sp-4);
  }
  .auth-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--ctl-h-touch);
    padding-inline: var(--sp-3);
  }

  /* دکمهٔ شناورِ تم از `theme.css` می‌آید (تزریقِ سراسریِ `justime-ui.js`،
     پیش از `<head>` — یعنی پیش از این فایل). اسپسیفیسیتیِ این گزینه‌گر با
     خودِ آن تعریف برابر است (دو کلاس)، و چون این فایل در HTML دیرتر لینک
     می‌شود، همین قانون در کسکید برنده است — بدونِ نیازِ `!important`. */
  .mb-theme-fab .nav-theme-btn {
    width: var(--ctl-h-touch);
    height: var(--ctl-h-touch);
  }
}

/* پدینگِ کارت دیگر مرزِ گوشی ندارد: ‎.mb-card--lg‎ یک پدینگ برای هر عرض می‌دهد،
   و بلوکِ ۶۴۰پیکسلیِ این فایل که آن را باریک‌تر می‌کرد حذف شد. */

@media (prefers-reduced-motion: reduce) {
  /* گذارِ ‎.mb-input‎ را خودِ کیت در همین حالت صفر می‌کند (primitives.css، بندِ ۱۱). */
  .auth-tab, .auth-back { transition: none; }
}