/* ============================================================
   auth.css — شاشات الدخول (المشرف بالبريد، والعائلة بالجوال)
   Sign-in screens: admin by email, family by phone + WhatsApp code.
   ============================================================ */

.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
  /* التدرّج وحده بلا `var(--bg)` تحته: اللون المعتم كان يطلي الشاشة
     كلها فوق خلفية الموقع فتختفي. حجاب `body::after` يكفي لقراءة البطاقة.
     The gradient alone, with no opaque `var(--bg)` beneath it: that was
     painting over the site backdrop and hiding it entirely. */
  background:
    radial-gradient(1100px 560px at 50% -10%, var(--accent-soft), transparent 65%);
  /* الشبكة صفّان: التنبيه ثم البطاقة.

     و`align-content: center` لا غنى عنه: الشبكة أطول من محتواها
     (`min-height: 100dvh`)، وبلا هذا تتمدّد الصفوف على الارتفاع كلّه
     فيقف التنبيه في أعلى الشاشة والبطاقة في وسطها، بينهما فراغٌ طويل.
     `place-items` يوسّط كلّ عنصرٍ في صفّه، لا الصفوف في الشبكة.

     `align-content: center` is not optional: the grid is taller than its
     content, so without it the two rows stretch to fill the viewport and
     the notice ends up at the top of the screen with the card marooned in
     the middle. `place-items` centres each item in its row, not the rows
     in the grid. */
  align-content: center;
  gap: 14px;
}
.auth[hidden] { display: none; }

/*
   تنبيهٌ وامض فوق البطاقة.

   والوميض يُضبط لا يُطلق: ما تردّد بين ٣ و٥٠ ومضةً في الثانية خطرٌ على
   من عنده حساسية ضوئية، وهذه نبضةٌ واحدة كل ثانيتين — أبطأ من ذلك
   المدى بكثير — ولا تنطفئ تماماً بل تخفت، فتُقرأ في كل حالاتها. ومن
   طلب من نظامه تسكين الحركة رآها ثابتة.

   A deliberate pulse, not a strobe: 3–50 Hz is the photosensitive range,
   this is one cycle per two seconds, and it dims rather than blanking so
   the line is legible throughout. Reduced-motion users get it still.
*/
.auth__notice {
  /* بعرض البطاقة نفسها وبنفس قياسها، فيقرأ الاثنان كشيءٍ واحد.
     The card's own width, so the two read as one thing. */
  width: min(400px, 100%);
  margin: 0;
  text-align: center;
  font-family: var(--font-head);
  /* يمتدّ على عرض البطاقة ولا يلتفّ سطرين على الشاشات الضيّقة:
     ١٫٩rem على الواسعة، ودونها يتبع العرض. البطاقة نفسها
     `min(400px, 100%)` داخل حشوةٍ ٢٤px من كل جانب، فهذا يلاحقها.
     Spans the card's width without wrapping on narrow screens: 1.9rem on
     wide ones, tracking the width below that. */
  font-size: min(1.9rem, calc(7.6vw - 4px));
  font-weight: 700;
  line-height: 1.6;
  color: var(--danger);
  animation: notice-pulse 2s ease-in-out infinite;
}

@keyframes notice-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__notice { animation: none; }
}

.auth__card {
  width: min(400px, 100%);
  padding: 30px 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}


.auth__title {
  text-align: center;
  font-size: 1.2rem;
  /* فسحةٌ بين الاسم وأول حقل: كان الاسم ملاصقاً لـ«اسم المستخدم» فيُقرآن
     كسطرٍ واحد، والاسم قد يكون سطرين فيزداد الالتباس.
     Room between the name and the first field: they used to touch and
     read as one line, and the name may now run to two. */
  margin-block-end: 22px;
}
.auth__hint {
  text-align: center;
  margin: 6px 0 22px;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.auth__error {
  margin-block-end: 14px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.7;
}
.auth__error[hidden] { display: none; }

.auth__note {
  margin-block-end: 14px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--success-soft);
  border: 1px solid color-mix(in oklab, var(--success) 45%, transparent);
  color: var(--success);
  font-size: .84rem;
  font-weight: 600;
}
.auth__note[hidden] { display: none; }

.auth__back {
  display: block;
  margin-block-start: 18px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-muted);
}

/* ---------- حقل رقم الجوال / phone field ---------- */
.phone-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  direction: ltr;                       /* الرقم يُكتب من اليسار */
}
.phone-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

.phone-field__code {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--surface-sunk);
  border-inline-end: 1px solid var(--border);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
  flex: none;
}

.phone-field__input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.phone-field__input:focus { outline: none; }

/* ---------- خانة الرمز / one-time code ---------- */
.otp-input {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .55em;
  text-indent: .55em;                   /* يوازن التباعد الأخير */
  font-variant-numeric: tabular-nums;
  direction: ltr;
  transition: border-color .15s, box-shadow .15s;
}
.otp-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

.auth__target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-end: 18px;
  font-size: .86rem;
  color: var(--text-muted);
}
.auth__target strong {
  color: var(--text);
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.auth__change {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.resend {
  display: block;
  width: 100%;
  margin-block-start: 12px;
  border: none;
  background: none;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
}
.resend:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }

.auth__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- شاشة الانتظار / checking session ---------- */
.auth__checking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: .88rem;
}


/* نسبة العمل تحت زرّ الدخول — خافتة لا تزاحم الحقول */
/* كلٌّ منهما لا يُقطع داخله، فتقع الكسرة بينهما وحدها.
   Neither half breaks internally, so the wrap can only fall between. */
.auth__credit span {
  display: inline-block;
  white-space: nowrap;
}

.auth__credit {
  margin-block-start: 20px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--border);
  text-align: center;
  /* SF Article — خطُّ سطر الإدارة في الرئيسية نفسه، بطلبٍ من صاحب الموقع
     بعد أن رأى الباء ناقصة.

     كان هنا `--font-head` (وأوّله SF Mada) بطلبٍ صريح قبله، وSF Mada
     يبتلع الباء بين الميم والراء فيُقرأ «المبرمج» «المرمج». جُرّب إبطال
     الرابطات (`liga`/`calt`/`dlig`) وتكبير الحجم وتخفيف الوزن فلم
     يُظهرها شيء — والعلاج خطٌّ آخر، وقد قُورنت خطوط العائلة في المتصفّح
     فأظهرها SF Article وSF Abyan وSF Sultan، واختير الأوّل.

     وهذا سطرٌ فيه اسمُ رجل: اسمٌ يُقرأ ناقصاً أسوأ من سطرٍ بخطٍّ ثانٍ.

     SF Article, the same face the hub's stewards line uses, asked for
     after the missing dot was seen. `--font-head` (SF Mada first) stood
     here by an earlier explicit request; it swallows the medial bā' so
     «المبرمج» reads «المرمج», and ligature switches, size and weight were
     all tried without bringing it back. The family was compared in the
     browser: Article, Abyan and Sultan all render it; Article was chosen.
     This line carries a man's name, and a name read wrong is worse than a
     line set in a second face. */
  font-family: var(--font-article);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}