/* auth.css — owned by P8 PR-2 (the v2 sign-in and sign-up pages; the P8 plan 3.2, D-302, D-305, D-312..D-315), with
   one marked block appended by P8 PR-6b (the Google button, D-322). web/account.py links it from the auth document
   only while AUTH_V2 is on (features.auth_v2_on: <body class="auth as-a2">, inserted at serve time; auth.html itself
   is never edited). Every rule here is scoped under body.auth.as-a2, so the v1 auth page and the dashboard never
   change; no @import, no url() (tests/core/test_account_app.py). No new token (C-2): tokens.css's primitives under
   this page's own names. Logical properties only: Arabic and Urdu mirror themselves (the grid too).
   1 reset · 2 the frame (one column, below 768 px) · 3 two columns (768 px and up) · 4 the form · 5 the password and
   email fields · 6 dark · 7 forced colours. No animation here (the showcase's are showcase.css's). */

/* 1 ─ Reset: app.css centres a 440 px auth box in a padded grid (C-3) ───────────────────────────────────────── */
body.auth.as-a2 { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; }
body.auth.as-a2 .auth-main { max-width: none; width: 100%; }

/* 2 ─ The frame, one column (phones): the header a 64 px blue strip, the form, the brand section after it ─── */
body.auth.as-a2 .a2 {
  /* the brand panel: our blue, white text 6.75-10.24:1 (D-302); a deeper blue in dark mode (section 6) */
  --a2-panel: linear-gradient(160deg, var(--as-brand-600), var(--as-brand-800));
  --a2-panel-solid: var(--as-brand-700);
  --a2-grid: rgba(12, 31, 71, .05);
  --a2-head: 88px;
  --a2-input-line: var(--as-neutral-500);
  --a2-ok: var(--as-ok-700);
  position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background-color: var(--bg);
  /* the form side's faint 40 px grid, fading away from the form (a radial veil of the page's own background) */
  background-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0, var(--bg) 100%),
                    linear-gradient(to right, var(--a2-grid) 1px, transparent 1px),
                    linear-gradient(to bottom, var(--a2-grid) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
body.auth.as-a2 .a2-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-2) var(--sp-4); background: var(--a2-panel-solid); background: var(--a2-panel);
  color: var(--as-neutral-0);
}
body.auth.as-a2 .a2-logo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0;
  color: var(--as-neutral-0); text-decoration: none; font: 800 18px/1.2 var(--as-font-display);
  border-radius: var(--as-radius-pill);
}
body.auth.as-a2 .a2-logo:hover { color: var(--as-neutral-0); }
body.auth.as-a2 .a2-disc {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--as-neutral-0);                      /* the blue logo on the blue panel would vanish (D-313) */
}
body.auth.as-a2 .a2-logo-img { display: block; width: 32px; height: 32px; }
body.auth.as-a2 .a2-lang {
  width: auto; min-height: 44px; padding-inline: var(--sp-3); font-size: 14px; flex: none;
  background: var(--as-neutral-0); color: var(--as-neutral-950); border: 1px solid var(--as-neutral-0);
}
/* on the blue: a white ring with a dark-blue edge (3 px, 2 px off the control; D-302) */
body.auth.as-a2 .a2-logo:focus-visible,
body.auth.as-a2 .a2-head .a2-lang:focus-visible,
body.auth.as-a2 .a2-brand :focus-visible {
  outline: 3px solid var(--as-neutral-0); outline-offset: 2px; box-shadow: 0 0 0 2px var(--as-brand-800);
}
body.auth.as-a2 .a2-pane { position: relative; padding: var(--sp-6) var(--sp-4) var(--sp-6); }
body.auth.as-a2 .a2-form { position: relative; width: min(400px, 100%); margin-inline: auto; }
body.auth.as-a2 .a2-brand {
  display: flex; flex-direction: column; flex: 1 0 auto; gap: var(--sp-5); padding: var(--sp-5) var(--sp-4);
  background: var(--a2-panel-solid); background: var(--a2-panel); color: var(--as-neutral-0);
}
body.auth.as-a2 .a2-showcase { min-width: 0; }
body.auth.as-a2 .a2-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-4);
  color: var(--as-brand-100); font-size: 14px;
}
body.auth.as-a2 .a2-foot a {
  display: inline-flex; align-items: center; min-height: 24px; color: var(--as-brand-100);
  text-decoration: underline; text-underline-offset: 3px;
}
body.auth.as-a2 .a2-foot a:hover { color: var(--as-neutral-0); }
/* "Chat with us" exists only beside the form at 768 px and up (D-312); below, "Need help? Contact us" */
body.auth.as-a2 .a2-chat { display: none; }
body.auth.as-a2 .a2-help { margin-block: var(--sp-5) 0; text-align: center; color: var(--muted); font-size: 14px; }
body.auth.as-a2 .a2-help a { font-weight: 600; }

/* 3 ─ Two columns from 768 px: the blue brand side on the inline-start (left in English, right in Arabic and
   Urdu: the grid mirrors), the form on the other; the header's two controls take the top row's two cells ──── */
@media (min-width: 768px) {
  body.auth.as-a2 .a2 {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: var(--a2-head) minmax(0, 1fr); grid-template-areas: "logo lang" "brand pane";
  }
  body.auth.as-a2 .a2::before {
    content: ""; grid-column: 1; grid-row: 1 / -1; background: var(--a2-panel-solid); background: var(--a2-panel);
  }
  body.auth.as-a2 .a2-head { display: contents; }
  body.auth.as-a2 .a2-logo { grid-area: logo; align-self: center; justify-self: start; margin-inline: 48px 24px; }
  body.auth.as-a2 .a2-lang {
    grid-area: lang; align-self: center; justify-self: end; margin-inline-end: 48px;
    background: var(--surface); color: var(--ink); border-color: var(--a2-input-line);
  }
  /* on the light form side now: the brand ring (as specific as the blue-strip ring above, so it wins) */
  body.auth.as-a2 .a2-head .a2-lang:focus-visible {
    outline: 3px solid var(--brand); outline-offset: 2px; box-shadow: none;
  }
  /* the brand side stays in view while a long form scrolls; its footer always reachable (D-302, D-313) */
  body.auth.as-a2 .a2-brand {
    grid-area: brand; align-self: start; position: sticky; top: 0;
    height: calc(100vh - var(--a2-head)); height: calc(100dvh - var(--a2-head)); overflow-y: auto;
    padding: var(--sp-5) 48px var(--sp-6); background: none; container-type: inline-size;
  }
  body.auth.as-a2 .a2-showcase { flex: 1 0 auto; display: grid; align-content: center; }
  body.auth.as-a2 .a2-pane {
    grid-area: pane; display: flex; flex-direction: column; justify-content: center;
    padding: var(--sp-5) 48px 96px;               /* 96 px: the chat pill's room (WCAG 2.4.11, D-302) */
  }
  body.auth.as-a2 .a2-pane input, body.auth.as-a2 .a2-pane select, body.auth.as-a2 .a2-pane button,
  body.auth.as-a2 .a2-pane a { scroll-margin-block: 24px 96px; }
  /* the page scrolls a focused control that is in view but under the fixed chat pill (Google's button above the
     form pushes the password to the pill's height at 1366 x 657): the root scroller keeps the pill's 96 px */
  :root:has(> body.auth.as-a2) { scroll-padding-block-end: 96px; }
  body.auth.as-a2 .a2-help { display: none; }
  body.auth.as-a2 .a2-chat {
    display: inline-flex; align-items: center; gap: var(--sp-2); position: fixed; z-index: 30;  /* under toasts */
    inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); min-height: 48px; padding: 0 20px;
    border-radius: var(--as-radius-pill); background: var(--as-brand-700);
    background: linear-gradient(135deg, var(--as-brand-600), var(--as-brand-800));
    color: var(--as-neutral-0); font-weight: 600; text-decoration: none; box-shadow: var(--as-shadow-float);
  }
  body.auth.as-a2 .a2-chat:hover { color: var(--as-neutral-0); background: var(--as-brand-800); }
  body.auth.as-a2 .a2-icon { flex: none; width: 20px; height: 20px; }
}
@media (min-width: 1024px) {
  body.auth.as-a2 .a2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 4 ─ The form ─────────────────────────────────────────────────────────────────────────────────────────────── */
body.auth.as-a2 .a2-title {
  margin: 0 0 var(--sp-2); color: var(--ink); font: 800 clamp(26px, 2.2vw, 32px)/1.2 var(--as-font-display);
  letter-spacing: -.01em;
}
:root:lang(ar) body.auth.as-a2 .a2-title, :root:lang(ur) body.auth.as-a2 .a2-title {
  font-family: var(--font-ar); font-weight: 700; letter-spacing: 0;
}
body.auth.as-a2 .a2-lead { margin-block-end: var(--sp-5); color: var(--muted); font-size: var(--as-text-md); }
body.auth.as-a2 .a2-form input[type="text"], body.auth.as-a2 .a2-form input[type="password"],
body.auth.as-a2 .a2-form input[type="email"], body.auth.as-a2 .a2-form select {
  min-height: 44px; border-color: var(--a2-input-line); border-radius: var(--as-radius-10);
}
body.auth.as-a2 .a2-form .btn { min-height: 44px; }
/* the primary button: the brand gradient in both themes (white 6.75:1; P7's dark button is 3.53:1) */
body.auth.as-a2 .a2-form .btn:not(.ghost):not(.secondary) {
  border: 0; color: var(--as-neutral-0); background: var(--as-brand-700);
  background: linear-gradient(135deg, var(--as-brand-600), var(--as-brand-800));
}
body.auth.as-a2 .a2-form .btn:not(.ghost):not(.secondary):hover {
  background: var(--as-brand-800); color: var(--as-neutral-0);
}
body.auth.as-a2 .a2-form .btn.ghost { min-height: 32px; }
body.auth.as-a2 .a2-form .check input { width: 18px; height: 18px; flex: none; }
body.auth.as-a2 .a2-form .check label { font-weight: 400; }
body.auth.as-a2 .a2-form .field .hint { font-size: 13px; }
body.auth.as-a2 .a2-form .auth-foot { margin-block-start: var(--sp-5); font-size: 15px; }
body.auth.as-a2 .a2-form .auth-foot a { font-weight: 700; }
body.auth.as-a2 .a2-form .turnstile.compact { min-height: 140px; }
body.auth.as-a2 .a2-label-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  margin-block-end: var(--sp-1);
}
body.auth.as-a2 .a2-label-row label { margin: 0; }
body.auth.as-a2 .a2-forgot { display: inline-flex; align-items: center; min-height: 24px; font-size: 14px; }
/* "or" between Google's button (P8 PR-6b, above the form) and the form */
body.auth.as-a2 .a2-or {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
body.auth.as-a2 .a2-or::before, body.auth.as-a2 .a2-or::after {
  content: ""; flex: 1; border-block-start: 1px solid var(--line-2);
}

/* 5 ─ The password (D-305) and the email (D-304) ───────────────────────────────────────────────────────────── */
body.auth.as-a2 .a2-pw { position: relative; }
body.auth.as-a2 .a2-pw .a2-pw-input { width: 100%; padding-inline-end: 48px; }   /* the eye's room, inline-end */
body.auth.as-a2 .a2-eye {
  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--as-radius-8); background: transparent;
  color: var(--muted); cursor: pointer;
}
body.auth.as-a2 .a2-eye:hover { color: var(--ink); background: var(--surface-2); }
body.auth.as-a2 .a2-eye[aria-pressed="true"] { color: var(--brand); }
body.auth.as-a2 .a2-eye .a2-icon { width: 20px; height: 20px; }
body.auth.as-a2 .a2-caps { margin: var(--sp-1) 0 0; color: var(--warn); font-size: 13px; font-weight: 600; }
body.auth.as-a2 .a2-rules {
  display: grid; gap: 2px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; color: var(--muted);
  font-size: 13px;
}
body.auth.as-a2 .a2-rule { display: flex; align-items: baseline; gap: 6px; }
body.auth.as-a2 .a2-rule.ok { color: var(--a2-ok); }
body.auth.as-a2 .a2-mark { flex: none; width: 1em; font-weight: 800; text-align: center; }
body.auth.as-a2 .a2-rules.done { display: none; }          /* all met: the one "meets the requirements" line */
body.auth.as-a2 .a2-pw-ok { margin: var(--sp-2) 0 0; color: var(--a2-ok); font-size: 13px; font-weight: 600; }
body.auth.as-a2 .a2-typo { margin: var(--sp-1) 0 0; font-size: 13px; color: var(--ink-2); }
body.auth.as-a2 .a2-typo:empty { display: none; }
body.auth.as-a2 .a2-linkbtn {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none;
  color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* 6 ─ Dark (data-theme="dark", or the system's while no choice is stored): the form side follows the page's
   night tokens; the panel a deeper blue (#0031AE → #071531, O-1 h) with a 1 px seam ──────────────────────── */
:root[data-theme="dark"] body.auth.as-a2 .a2 {
  --a2-panel: linear-gradient(160deg, var(--as-brand-800), var(--as-navy-900));
  --a2-panel-solid: var(--as-navy-800);
  --a2-grid: rgba(148, 173, 230, .06);
  --a2-input-line: var(--as-night-300);
  --a2-ok: var(--as-ok-300);
}
:root[data-theme="dark"] body.auth.as-a2 .a2::before { border-inline-end: 1px solid var(--as-navy-line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.auth.as-a2 .a2 {
    --a2-panel: linear-gradient(160deg, var(--as-brand-800), var(--as-navy-900));
    --a2-panel-solid: var(--as-navy-800);
    --a2-grid: rgba(148, 173, 230, .06);
    --a2-input-line: var(--as-night-300);
    --a2-ok: var(--as-ok-300);
  }
  :root:not([data-theme="light"]) body.auth.as-a2 .a2::before { border-inline-end: 1px solid var(--as-navy-line); }
}

/* 7 ─ Forced colours: the system draws the panel; the controls keep visible edges ─────────────────────────── */
@media (forced-colors: active) {
  body.auth.as-a2 .a2-eye, body.auth.as-a2 .a2-chat, body.auth.as-a2 .a2-disc { border: 1px solid CanvasText; }
  body.auth.as-a2 .a2-chat { forced-color-adjust: auto; }
}

/* ── P8 PR-6b: Google sign-in (the P8 plan 3.7, D-322) ── the one block PR-6b owns in this file (auth2/google.js's
   classes); the integrator keeps it after PR-2's rules. Google's branding: the unaltered "G" (inline SVG paths, no
   URL), "Continue with Google" / "Sign up with Google", a white button with a 1 px border in light mode and Google's
   dark button (its own fill, stroke and text colours) in dark mode; nothing is loaded from Google. The "or" divider
   under it is PR-2's (.a2-or, auth2/frame.js googleSlot). No motion. */
body.auth.as-a2 .a2-google { display: grid; margin-block: var(--as-space-4); }
body.auth.as-a2 .a2-google-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--as-space-3); inline-size: 100%;
  min-block-size: 44px; margin: 0; padding: 10px var(--as-space-4); border: 1px solid var(--as-neutral-500);
  border-radius: var(--as-radius-10); background: var(--as-neutral-0); color: var(--as-neutral-950);
  font: inherit; font-size: var(--as-text-base); font-weight: 600; line-height: 1.3; text-align: center;
  cursor: pointer;
}
body.auth.as-a2 .a2-google-btn:hover { background: var(--as-neutral-75); }
body.auth.as-a2 .a2-google-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
body.auth.as-a2 .a2-google-btn:disabled { cursor: progress; }
body.auth.as-a2 .a2-google-mark { flex: none; inline-size: 18px; block-size: 18px; }
body.auth.as-a2 .a2-google-pw { margin-block: var(--as-space-3) var(--as-space-2); }
/* Google's dark button: fill #131314, stroke #8E918F, text #E3E3E3 (its branding's colours, not tokens) */
:root[data-theme="dark"] body.auth.as-a2 .a2-google-btn { border-color: #8E918F; background: #131314; color: #E3E3E3; }
:root[data-theme="dark"] body.auth.as-a2 .a2-google-btn:hover { background: #1E1F20; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.auth.as-a2 .a2-google-btn {
    border-color: #8E918F; background: #131314; color: #E3E3E3;
  }
  :root:not([data-theme="light"]) body.auth.as-a2 .a2-google-btn:hover { background: #1E1F20; }
}
@media (forced-colors: active) {
  body.auth.as-a2 .a2-google-btn { border-color: ButtonText; }
  body.auth.as-a2 .a2-google-btn:focus-visible { outline-color: Highlight; }
}
/* ── end of P8 PR-6b's block ── */