/* ==========================================================================
   Smart Kid CRM — the signed-out pages (login, forgot / reset / confirm password, verify email): scoped under .au-*.

   These pages used to be stock Breeze: Tailwind utilities, the Figtree face from a third party and an English, left-to-right
   frame around Arabic text. They now share the CRM's design system: the self-hosted IBM Plex Sans Arabic, the --ui-* tokens
   and the shared fields, buttons and alert strips (ui.css). This file only draws what no other page has: the centred card,
   the brand mark and the "remember me" checkbox.

   The guest layout no longer loads the Tailwind bundle, so the few resets the pages relied on are restated here, scoped to
   the page body. Every value is a --ui-* token. No build step, no !important.
   ========================================================================== */

.au-body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--ui-font);
  font-size: var(--ui-fs-body);
  line-height: var(--ui-lh-body);
  color: var(--ui-ink);
  background: var(--ui-canvas);
  -webkit-font-smoothing: antialiased;
}
.au-body *, .au-body *::before, .au-body *::after { box-sizing: border-box; }
.au-body h1, .au-body p, .au-body form { margin: 0; }
.au-body button, .au-body input { font: inherit; }
.au-body img { display: block; max-width: 100%; height: auto; }

/* The page: the card in the middle of the viewport, never wider than the screen. */
.au-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-gap-lg);
  padding: 24px 16px;
}
.au-brand { display: block; border-radius: var(--ui-radius-md); }
.au-brand:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: var(--ui-focus-offset); }
/* The brand PNG carries an opaque white ground; multiply lets the page canvas show through it, so there is no box. */
.au-brand .au-logo { width: auto; height: 72px; mix-blend-mode: multiply; }

.au-card {
  width: min(100%, 440px);
  padding: 28px 28px 24px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-popover);
}
@media (max-width: 480px) {
  .au-card { padding: 22px 18px 20px; }
  .au-brand .au-logo { height: 60px; }
}

.au-head { margin-bottom: 18px; }
.au-title { font-size: var(--ui-fs-title); font-weight: var(--ui-fw-bold); line-height: var(--ui-lh-tight); }
.au-sub { margin-top: 6px; font-size: var(--ui-fs-small); line-height: 1.75; color: var(--ui-ink-soft); }
.au-card .ui-alert { margin-bottom: 16px; }

/* The form's controls stack; the actions follow with room to breathe. */
.au-form { display: flex; flex-direction: column; gap: 16px; }
.au-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.au-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 18px; }

/* "Remember me": a real checkbox in a label with a touch-sized row. */
.au-check { display: flex; align-items: center; gap: 10px; min-height: var(--ui-touch-min); cursor: pointer; font-size: var(--ui-fs-control); color: var(--ui-ink); }
.au-check__box { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ui-navy); cursor: pointer; }
.au-check__box:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: var(--ui-focus-offset); }

/* A link-like button (log out on the verification page). */
.au-linkbtn { display: inline-flex; align-items: center; min-height: var(--ui-touch-min); padding: 0; font-weight: var(--ui-fw-semibold); color: var(--ui-ink); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ui-turquoise); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.au-linkbtn:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-color); outline-offset: var(--ui-focus-offset); border-radius: 4px; }