/**
 * صفحات الدخول والتسجيل — التصميم الجديد (مالك، 2026-10-31).
 *
 * المرجع: الموكابان المعتمدان login.html وstart.html (html_mockups/think-redesign/). يُحمَّل بعد public.css
 * في صفحات web/_auth_ui.php وweb/teacher/_teacher_ui.php وحدها.
 *
 * المدخلان (قرار مالك 2026-10-31): وليّ الأمر بالبريد، ومنه يدخل طفله · والمعلّم باسم المستخدم.
 *
 * ⚠️ البادئة p- كبقيّة التصميم: school.css يُحمَّل قبله وفيه .btn و.notice و--ink بمعانٍ أخرى.
 * ⚠️ «القديم» (صنف .au-* و<label><span>) لصفحاتٍ تمرّ بالقالب نفسه ولم تُنقل بعد (account-delete،
 *    teacher/index قيد التفعيل): يبقى مقروءاً بألوان التصميم الجديد حتى تُنقل.
 */

/* ── الصفحة: ترويسة التركيز تُظهر رابطها الجانبيّ على الهاتف أيضاً (public.css يُخفيه تحت 900px) ── */
.p-authpage .p-top__act { margin-inline-start: auto; }
.p-authpage .p-top__act .p-login { display: inline; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (max-width: 560px) {
  .p-authpage .p-top__in { gap: 12px; }
  .p-authpage .p-top__act .p-login { font-size: .86rem; line-height: 1.45; text-align: end; max-width: 13em; white-space: normal; }
}

/* ── الشبكة: الترحيب الأخضر والنموذج ── */
.p-auth__side h1 { text-wrap: balance; }
.p-auth__side .p-lede { color: var(--p-on-brand-2); }
.p-auth__side .p-ticks { margin-top: 6px; }
.p-auth__side .p-ticks li { line-height: 1.8; }
.p-auth__side a { color: var(--p-on-brand); font-weight: 600; text-underline-offset: 5px; }
.p-auth__col { width: 100%; max-width: 480px; justify-self: center; display: grid; gap: 0; }
.p-auth__col .p-form { max-width: none; }
.p-auth--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.p-auth--wide .p-auth__col { max-width: 640px; }
.p-auth__kick {
  justify-self: start; width: fit-content; margin-bottom: 12px;
  font-size: var(--p-step--1); font-weight: 600; color: var(--p-brand); background: var(--p-brand-tint);
  border-radius: 99px; padding: 2px 12px;
}
.p-auth__head { margin-bottom: 22px; }
.p-auth__head h1, .p-auth__head h2 { font-size: var(--p-step-2); }
.p-auth__head p { margin-top: 8px; color: var(--p-ink-2); line-height: 1.85; }
.p-auth__foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--p-line); font-size: var(--p-step--1); color: var(--p-ink-2); line-height: 1.9; }
.p-auth__main a:not(.p-btn):not(.btn) { color: var(--p-brand); font-weight: 600; text-underline-offset: 4px; }

/* بلا ترحيب: عمودٌ واحد في الوسط، والنموذج على بطاقة */
.p-auth--solo { grid-template-columns: 1fr; }
.p-auth--solo .p-auth__col {
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-r);
  padding: clamp(22px, 4vw, 36px); box-shadow: 0 24px 60px -40px oklch(0.2 0.04 160 / .35);
}

/* الهاتف: النموذج أوّلاً (public.css يرتّب .p-auth__main أوّلاً) — والترحيب بعده أقصر */
@media (max-width: 860px) {
  .p-auth--wide { grid-template-columns: 1fr; }
  .p-auth__side { gap: 14px; }
  .p-auth__side .p-lede { font-size: var(--p-step-0); }
  .p-auth--solo .p-auth__main { padding-inline: 16px; }
}

/* ── البابان (login): وليّ أمر · معلّم — والنموذج المطابق تحتهما ── */
.p-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.p-door {
  position: relative; display: grid; gap: 6px; align-content: start;
  border: 1.5px solid var(--p-line); border-radius: var(--p-r); padding: 18px 18px 16px;
  cursor: pointer; background: var(--p-surface); transition: border-color .2s var(--p-ease), background-color .2s var(--p-ease);
}
.p-door:hover { border-color: var(--p-ink-2); }
.p-door input { position: absolute; opacity: 0; inset-inline-start: 12px; top: 12px; width: 1px; height: 1px; }
.p-door:has(input:checked) { border-color: var(--p-brand); box-shadow: inset 0 0 0 1.5px var(--p-brand); background: var(--p-brand-tint); }
.p-door:has(input:focus-visible) { outline: 3px solid var(--p-accent); outline-offset: 3px; }
.p-door__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--p-brand); color: var(--p-on-brand); }
.p-door__ic svg { width: 24px; height: 24px; display: block; }
.p-door b { font: 700 var(--p-step-1) var(--p-f-display); line-height: 1.3; }
.p-door span:not(.p-door__ic) { font-size: var(--p-step--1); color: var(--p-ink-2); line-height: 1.7; }
@media (max-width: 420px) { .p-doors { gap: 10px; } .p-door { padding: 14px; } .p-door b { font-size: 1.05rem; } }

/* النموذج المطابق للباب المختار — بـ:has() بلا JavaScript؛ والمتصفّح الذي لا يعرفها يرى النموذجين معاً */
.p-door-form__title { display: none; font: 700 var(--p-step-0) var(--p-f-display); }
@supports selector(:has(*)) {
  .p-auth__col:has(input[name=door][value=parent]:checked) .p-door-form--teacher,
  .p-auth__col:has(input[name=door][value=teacher]:checked) .p-door-form--parent { display: none; }
}
@supports not selector(:has(*)) {
  .p-door-form__title { display: block; }
  .p-door-form--teacher { margin-top: 28px; }
}

/* ── النموذج ── */
.p-field label small { font: 400 var(--p-step--1) var(--p-f-text); color: var(--p-ink-2); }
.p-field input[dir=ltr] { text-align: left; }
.p-field input::placeholder { color: color-mix(in oklch, var(--p-ink-2) 60%, transparent); }
.p-field textarea {
  font: inherit; min-height: 96px; border-radius: var(--p-r-sm); border: 1.5px solid var(--p-line);
  padding: 10px 14px; background: var(--p-surface); color: var(--p-ink); resize: vertical; line-height: 1.8;
}
.p-field textarea:focus { outline: none; border-color: var(--p-brand); box-shadow: 0 0 0 4px var(--p-brand-tint); }
.p-field.is-bad input, .p-field.is-bad textarea { border-color: oklch(0.55 0.19 27); }
.p-form .p-btn { width: 100%; margin-top: 4px; }
.p-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
@media (max-width: 560px) { .p-form__grid { grid-template-columns: 1fr; } }
.p-form__after { margin-top: -4px; font-size: var(--p-step--1); color: var(--p-ink-2); }
.p-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--p-step--1); line-height: 1.85; cursor: pointer; }
.p-consent input { margin-top: 5px; width: 20px; height: 20px; flex: none; accent-color: var(--p-brand); }
.p-consent.is-bad { color: oklch(0.45 0.17 27); }

/* اختيار «من أنت؟» في التسجيل: المعلّم رابطٌ إلى نموذجه (حقوله غير حقول وليّ الأمر) */
.p-who-pick > a {
  position: relative; display: grid; gap: 4px; border: 1.5px solid var(--p-line); border-radius: var(--p-r-sm);
  padding: 14px 16px; background: var(--p-surface); text-decoration: none; color: var(--p-ink) !important; font-weight: 400 !important;
  transition: border-color .2s var(--p-ease);
}
.p-who-pick > a:hover { border-color: var(--p-ink-2); }
.p-who-pick > a b { font-family: var(--p-f-display); font-weight: 700; }
.p-who-pick > a b::after { content: " ←"; font-family: var(--p-f-text); color: var(--p-ink-2); }
.p-who-pick__on { display: grid; gap: 4px; border-radius: var(--p-r-sm); padding: 14px 16px; border: 1.5px solid var(--p-brand); box-shadow: inset 0 0 0 1.5px var(--p-brand); background: var(--p-brand-tint); }

/* ── الملاحظات ── */
.p-kidnote { display: flex; gap: 12px; align-items: center; background: var(--p-accent-tint); border-radius: var(--p-r-sm); padding: 12px 16px; font-size: var(--p-step--1); line-height: 1.8; margin-top: 22px; }
.p-kidnote b { font-family: var(--p-f-display); }
.p-kidnote > span:first-child { font-size: 1.3rem; flex: none; }
.p-auth-note { background: var(--p-brand-tint); border-radius: var(--p-r-sm); padding: 14px 16px; line-height: 1.9; margin-bottom: 18px; }
.p-auth-note b { font-family: var(--p-f-display); font-weight: 700; }
.p-auth-note p { margin-top: 8px; color: var(--p-ink-2); font-size: var(--p-step--1); }
.p-auth-note + .p-btn { width: 100%; }
.au-err {
  background: oklch(0.97 0.02 25); border: 1px solid oklch(0.85 0.08 25); color: oklch(0.42 0.15 27);
  border-radius: var(--p-r-sm); padding: 11px 14px; font-size: var(--p-step--1); line-height: 1.8; margin-bottom: 18px;
}

/* ── التجربة المحلّيّة (login، الجهاز المحلّيّ وحده) ── */
.p-quick { margin-top: 22px; padding: 14px; border: 2px dashed var(--p-line); border-radius: var(--p-r-sm); background: var(--p-surface); display: grid; gap: 8px; }
.p-quick__row { display: flex; gap: 8px; flex-wrap: wrap; }
.p-quick__row .p-btn { flex: 1 1 160px; min-height: 46px; padding: 0 16px; font-size: .95rem; }

/* ── القديم: صفحاتٌ تمرّ بالقالب ولم تُنقل بعد ── */
.p-auth__main .sub { color: var(--p-ink-2); line-height: 1.85; margin-bottom: 16px; }
.p-auth__main form:not(.p-form) label { display: block; margin-bottom: 14px; }
.p-auth__main form:not(.p-form) label > span { display: block; font: 600 .95rem var(--p-f-display); margin-bottom: 6px; }
.p-auth__main form:not(.p-form) :is(input[type=text], input[type=email], input[type=password], input[type=tel], textarea) {
  width: 100%; font: inherit; min-height: 50px; padding: 0 14px; border-radius: var(--p-r-sm);
  border: 1.5px solid var(--p-line); background: var(--p-surface); color: var(--p-ink);
}
.p-auth__main .au-note { background: var(--p-brand-tint); border: 1px solid color-mix(in oklch, var(--p-brand) 30%, transparent); border-radius: var(--p-r-sm); padding: 12px 14px; font-size: var(--p-step--1); line-height: 1.85; margin-bottom: 16px; }
.p-auth__main .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--p-step--1); margin: 0 0 18px; padding: 14px; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--p-r-sm); }
.p-auth__main .facts dt { color: var(--p-ink-2); }
.p-auth__main .facts dd { margin: 0; font-weight: 600; }
.p-auth__main .steps { margin: 0 0 18px; padding: 0 20px 0 0; font-size: var(--p-step--1); line-height: 2; }
.p-auth__main .btn { min-height: 50px; border-radius: 99px; font-family: var(--p-f-display); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.p-auth__main .btn--primary { background: var(--p-brand); border-color: var(--p-brand); }
.p-auth__main .btn--primary:hover { background: var(--p-brand-deep); border-color: var(--p-brand-deep); }
.p-auth__main .wa { display: flex; gap: 9px; width: 100%; background: #1f7a46; border-color: #1f7a46; color: #fff; }
.p-who-pick > .p-who-pick__on { font-size: var(--p-step-0); color: var(--p-ink); }
.p-who-pick > .p-who-pick__on > span { font-size: var(--p-step--1); color: var(--p-ink-2); }
.p-auth__head .sub { margin-bottom: 0; }

/* ── مفتاحا «تسجيل الدخول | حساب جديد» — الفرق بينهما يُرى قبل أن يُقرأ ── */
.p-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin-bottom: 22px; border-radius: 16px; background: var(--p-brand-tint); }
.p-modes a { display: grid; gap: 1px; text-align: center; padding: 10px 8px; border-radius: 12px; text-decoration: none; color: var(--p-ink-2); min-height: 56px; align-content: center; }
.p-modes a small { font-size: .78rem; }
.p-modes a b { font: 700 1rem var(--p-f-display); color: var(--p-ink); }
.p-modes a[aria-current="page"] { background: var(--p-surface); box-shadow: 0 6px 16px -10px oklch(0.3 0.05 160 / .5), inset 0 0 0 1.5px var(--p-brand); }
.p-modes a[aria-current="page"] b { color: var(--p-brand); }
.p-modes a:not([aria-current]):hover { background: color-mix(in oklch, var(--p-surface) 60%, transparent); }