/* ============================================================
   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;
}


/* نسبة العمل تحت زرّ الدخول — خافتة لا تزاحم الحقول */
/* نسبة العمل — وخطّها غير خطّ الموقع عن قصد.
   سنّ الباء الوسطى في SF Mada تنسحق بين الميم والراء، فلا يبقى من باء
   «المبرمج» إلا نقطتها وتُقرأ «المرمج». جرّبت التكبير حتى ١٫١٥ فلم
   يُصلحها، وقارنت الخطوط في المتصفّح: Noto Kufi يُظهرها كاملة. سطرٌ
   واحد بخطٍّ آخر أهون من كلمةٍ لا تُقرأ.
   Deliberately not the site face: SF Mada crushes the medial bā' between
   mīm and rā', leaving only its dot, so «المبرمج» reads «المرمج».
   Enlarging to 1.15rem did not fix it; Noto Kufi renders it whole. One
   line in another face beats a word nobody can read. */
/* كلٌّ منهما لا يُقطع داخله، فتقع الكسرة بينهما وحدها.
   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 Mada أولاً في `--font-head`، بطلبٍ
     صريح من صاحب الموقع.

     وللعلم لمن يقرأ بعدُ: SF Mada يبتلع باء «المبرمج» فتُقرأ «المرمج»،
     وهو ما كان هنا Noto Kufi من أجله. جُرّب إبطال الرابطات
     (`liga`/`calt`/`dlig`) وتكبير الحجم وتخفيف الوزن، فلم يُظهر الباءَ
     شيءٌ منها — العلاج الوحيد خطٌّ آخر.

     The site's head font, SF Mada first, by explicit request. For whoever
     reads this later: SF Mada swallows the bā' of «المبرمج» so it reads
     «المرمج» — which is why Noto Kufi stood here. Disabling ligatures,
     enlarging, and lightening the weight were all tried and none brought
     the bā' back; only a different face does. */
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}