/* ─────────────────────────────────────────────────────────────────────────────
   Sign-in shell — the form column on a quiet page, and beside it the
   academy's own picture with its motto on a light card. On a phone the
   picture is a short band above the form. Used by login.html and
   reset-password.html.
   ───────────────────────────────────────────────────────────────────────────── */

@layer layout {

  body { background: var(--bg); }

  .auth {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }

  /* ── Form column ────────────────────────────────────────────────────────── */
  .auth-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--s-8);
    padding: var(--s-6) clamp(1.25rem, 0.5rem + 4vw, 4.5rem);
  }
  .auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .auth-top__home { font-size: var(--fs-small); }
  .auth-top__arrow { width: 1.05em; height: 1.05em; }

  .auth-brand { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
  .auth-brand img { width: 2.5rem; height: 2.5rem; }

  .auth-main__body { display: grid; align-content: center; justify-items: center; }
  .auth-view { width: min(100%, 25.5rem); display: grid; gap: var(--s-8); animation: auth-view-in 0.55s var(--ease-out); }
  .auth-view[hidden] { display: none; }
  @keyframes auth-view-in { from { opacity: 0; translate: 0 12px; } }

  .auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--ink-2); font-size: var(--fs-caption); }
  .auth-foot nav { display: flex; gap: var(--s-5); }
  .auth-foot a:hover { color: var(--pink-strong); }

  /* ── The academy's picture ──────────────────────────────────────────────── */
  /* As tall as the screen, beside the form. The picture's people stand on its
     start third, so the frame keeps them in view at any width; the motto's
     card sits at the foot, over a soft light that keeps it readable. */
  .auth-aside {
    position: sticky;
    top: var(--s-3);
    align-self: start;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    align-content: end;
    height: calc(100dvh - var(--s-6));
    min-height: 34rem;
    margin: var(--s-3);
    margin-inline-start: 0;
    padding: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem);
    border-radius: var(--r-xl);
    background: #FBE9EF;
  }
  .auth-photo { position: absolute; inset: 0; z-index: -2; }
  .auth-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
  .auth-aside::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(251 233 239 / 0.92), rgb(251 233 239 / 0));
    pointer-events: none;
  }
  .auth-aside__card {
    display: grid;
    gap: var(--s-3);
    max-width: 31rem;
    padding: clamp(1.25rem, 0.8rem + 1.2vw, 1.85rem);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.8);
    border: 1px solid rgb(255 255 255 / 0.95);
    box-shadow: 0 28px 60px -36px rgb(120 30 70 / 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  .auth-aside__brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--pink-strong); font-size: var(--fs-small); font-weight: 700; }
  .auth-aside__brand img { width: 1.75rem; height: 1.75rem; }
  .auth-aside__motto {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 0.95rem + 1.1vw, 1.95rem);
    font-weight: 700;
    line-height: 1.5;
    text-wrap: balance;
  }

  @media (max-width: 960px) {
    .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .auth-aside { order: -1; position: relative; top: auto; height: clamp(9.5rem, 34vw, 15rem); min-height: 0; margin: var(--s-3) var(--s-3) 0; border-radius: var(--r-lg); }
    .auth-aside::after, .auth-aside__card { display: none; }
    .auth-photo img { object-position: 16% 42%; }
    .auth-main { gap: var(--s-6); padding-top: var(--s-5); }
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-view { animation: none; }
  }
}

@layer page {

  /* ── Heading and states ─────────────────────────────────────────────────── */
  .auth-head { display: grid; justify-items: start; gap: var(--s-2); }
  .auth-head__title { font-size: clamp(2rem, 1.55rem + 1.3vw, 2.6rem); line-height: 1.2; text-wrap: balance; }
  .auth-head__title:focus { outline: none; }
  .auth-head__lead { color: var(--ink-2); font-size: var(--fs-body); }

  .auth-form { display: grid; gap: var(--s-5); }
  .auth-form .field { gap: var(--s-2); }
  .auth-form .input { min-height: 3.35rem; border-radius: 14px; background-color: var(--white); }
  .auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .auth-form__submit { width: 100%; min-height: 3.35rem; margin-top: var(--s-1); font-size: var(--fs-body); }
  .auth-form__submit:disabled { opacity: 0.75; cursor: progress; transform: none; }

  .auth-link { color: var(--pink-strong); font-size: var(--fs-small); font-weight: 500; }
  .auth-link:hover { color: var(--pink-deeper); text-decoration: underline; text-underline-offset: 4px; }
  .auth-alt { padding-top: var(--s-6); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); text-align: center; }
  .auth-back {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--ink-2);
    font-size: var(--fs-small);
    transition: color var(--dur-fast) linear;
  }
  .auth-back:hover { color: var(--pink-strong); }
  .auth-back svg { width: 1.05rem; height: 1.05rem; }

  /* «اختيار الواجهة» — the design stage's choice of a portal. */
  .auth-roles { display: grid; gap: var(--s-3); }
  .auth-role {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--white);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) linear, box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
  }
  .auth-role:hover { border-color: var(--pink-border); box-shadow: var(--shadow-md); translate: 0 -2px; }
  .auth-role:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
  .auth-role__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--pink-soft); color: var(--pink-strong); }
  .auth-role__icon--teacher { background: var(--info-soft); color: var(--info-ink); }
  .auth-role__icon--student { background: var(--ok-soft); color: var(--ok); }
  .auth-role__icon svg { width: 1.35rem; height: 1.35rem; }
  .auth-role__text { display: grid; gap: 2px; }
  .auth-role__text b { font-size: var(--fs-body); }
  .auth-role__text small { color: var(--ink-2); font-size: var(--fs-caption); line-height: 1.6; }
  .auth-role__go { width: 1.1rem; height: 1.1rem; color: var(--ink-2); }
  @media (prefers-reduced-motion: reduce) { .auth-role { transition: none; } .auth-role:hover { translate: none; } }

  .auth-state { display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
  .auth-state__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--s-2); border-radius: 50%; }
  .auth-state__icon svg { width: 2rem; height: 2rem; }
  .auth-state__icon--ok { background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 10px rgb(21 128 61 / 0.05); }
  .auth-state__icon--danger { background: var(--danger-soft); color: var(--danger); box-shadow: 0 0 0 10px rgb(217 45 32 / 0.05); }
  .auth-state__text { color: var(--ink-2); line-height: 1.95; }
  .auth-state .btn { margin-top: var(--s-3); }

  /* Password strength: four bars fill as the password grows stronger. */
  .strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-top: calc(var(--s-3) * -1); }
  .strength span { height: 4px; border-radius: 4px; background: var(--line-strong); transition: background-color var(--dur-base) var(--ease-out); }
  .strength[data-level="1"] span:nth-child(-n + 1) { background: var(--danger); }
  .strength[data-level="2"] span:nth-child(-n + 2) { background: var(--warn); }
  .strength[data-level="3"] span:nth-child(-n + 3) { background: var(--pink); }
  .strength[data-level="4"] span { background: var(--ok); }
}