/* ============================================================================
 * La2etlak — 4C AUTHENTICATION SHELL (Stage B port)
 * ============================================================================
 * Ported by 4C-AUTH-STAGE-B-FINAL-PORT-PHONE-UI-001 from the locked authority:
 *
 *   docs/design/locked/2026-08-11/phase-4c-auth-shell-v2.html   FINAL AUTHORITY
 *   docs/design/locked/2026-08-11/phase-4c-auth-shell.html      SUPERSEDED (V1)
 *   docs/design/locked/2026-08-11/FINAL_DESIGN_FOUNDATION.md    contract
 *
 * PORT, DO NOT INTERPRET. Every value below is copied from the locked V2 board.
 * Do not "tidy", round or re-derive a number here.
 *
 * ── SCOPE ───────────────────────────────────────────────────────────────────
 *   proof                   production
 *   .pg                  ->  .la2-pg.la2-au          (auth pages only)
 *   .pg.light            ->  .la2-pg.la2-au          (default colourway)
 *   .pg.dark / .dark X   ->  [data-bs-theme="dark"] .la2-pg.la2-au
 *   .pg[dir=rtl]         ->  [dir="rtl"] .la2-pg.la2-au
 *   .pg.m                ->  two media queries, see section 9
 *
 * Every family member carries an `au-` prefix, for the reason 5E carries `msg-`,
 * 5F `ntf-`, 5G `dsh-`, 5H `set-`, 5J `rcl-`, 5K `prf-` and 5L `sub-`
 * (IMPLEMENTATION_LEDGER 42.2): the board's short names (`.brand`, `.util`,
 * `.alert`, `.doc`, `.sheet`, `.stage`) already have owners in the ported layer
 * or in Bootstrap.
 *
 * ── OWNER OVERRIDES — 4C-AUTH-STAGE-B-OWNER-CORRECTIONS-002 ─────────────────
 * After the port passed parity the owner reviewed the REAL runtime and
 * SUPERSEDED four of the board's presentation decisions. The locked artifact was
 * NOT edited and still governs every region these do not name.
 *
 *   4C-O1  The Auth-only floating three-pill header (language / theme / Home) is
 *          superseded on SIGN-IN and REGISTRATION, which now render the
 *          product's ONE public header — `components.design.header`, styled by
 *          `public-shell.css`. Nothing about that header is declared in this
 *          file: no `.hd`, `.hdi`, `.mainnav`, `.util`, dropdown or drawer rule
 *          exists here, and the header is a SIBLING above `.au-page` so this
 *          family's own `.btn` and `img` rules stop at its boundary. The nine
 *          UTILITY surfaces keep the accepted pill header (section 2).
 *   4C-O2  Registration's light editorial frame is superseded. Sign-in and
 *          registration are ONE composition system (section 4); registration
 *          differs only in CONTENT, through one wider intrinsic grid track.
 *   4C-O3/ The provider buttons take the REAL brand marks as local image assets
 *   4C-O5  in their own colours — no mask, no tint, no `currentColor` (section 8).
 *   4C-O4  The Terms label opens an in-page native `<dialog>` (section 8) over
 *          the SAME published Terms page, instead of a new browser tab.
 *
 * ── TWO COMPOSITIONS, NOT ONE CARD ──────────────────────────────────────────
 * V2 rejects the generic centred card outright, and the override keeps that:
 *   A  AUTH STAGE  dark navy stage, compass rings, brand column, overlapped
 *                  sheet. SIGN-IN and REGISTRATION both.
 *   C  UTILITY     560px document sheet on the navy stage, contextual head block
 *
 * ── AUTHORITY RESOLUTIONS DECLARED HERE ─────────────────────────────────────
 * 1. `--r1: 4px`. The board declares `--r1:4px` for its hard-cornered paper
 *    sheets and locks "4px radius" in its own DECISIONS table. FOUNDATION 5
 *    says to normalise to 6px "unless the auth sheet's harder corner is being
 *    reproduced exactly" — it is, so 4px stands, scoped to this family and
 *    never to the shared token.
 * 2. `--navDeep`. The board writes `#1B2247`; FINAL_DESIGN_FOUNDATION 1 gives
 *    the public role as `#1A2142`, and DESIGN_AUTHORITY 1.4 makes the
 *    foundation supersede any artifact ON COLOUR ROLES. foundation.css already
 *    declares `#1A2142` and the settled Public Shell consumes it, so re-pointing
 *    it would move CLOSED families. The shared token stands; the difference is
 *    DECLARED in tests/Design/maps/auth-shell.json, never hidden.
 * 3. `.btn` geometry. The board's DECISIONS table locks "action-blue, 52px, 4px
 *    radius, no flourish" for this family, where foundation's shared `.btn` is
 *    48px / `--r2`. That is a family styling a shared primitive INSIDE its own
 *    context (DesignCssOwnershipTest's own exemption), scoped by `.la2-au`.
 * 4. ONE TREE AND ONE WORDING AT EVERY WIDTH. The board's 390 frame drops the
 *    visible labels from the language and Home pills and keeps only an
 *    aria-label. Production keeps the labels and lets the header WRAP on its own
 *    available width — the 5H-P01 / 5K-P01 lesson: a component inside a page
 *    gutter is never as wide as the window, so nothing here is sized by a
 *    viewport query that a label could outgrow.
 * ========================================================================== */


/* ============================================================================
 * 1. FAMILY TOKENS + PAGE FRAME
 * ========================================================================== */
.la2-pg.la2-au {
    /* Authority resolution 1 — the hard-cornered auth sheet. */
    --r1: 4px;
}

/* 4C-P01. The auth layout no longer loads Bootstrap, and Bootstrap's Reboot was
   what reset the UA's `body { margin: 8px }` on these pages. Removing the
   dependency without replacing that one declaration left an 8px white gutter
   around the navy stage on every auth page — measured, `body` at x=8 y=8 with
   the composition 16px narrower than the window. `foundation.css` scopes
   `box-sizing` as `.la2-pg *`, which is the page root's DESCENDANTS, so the root
   itself needs its own declaration too. Both are stated here, in the one family
   that no longer has Reboot underneath it. */
.la2-pg.la2-au {
    margin: 0;
    box-sizing: border-box;
}

/* 4C-O1. On sign-in and registration the SHARED product header is a SIBLING
   above `.au-page`, not a child of it, so the window-filling job moved up to the
   page root: the document is the flex column and the composition is what grows
   inside it. The utility surfaces render no shared header and are unaffected —
   `.au-page` is still their only child here. The board's own `min-height:100%`
   resolves against a frame of auto height and so is inert there; production
   needs the navy field to reach the bottom of a tall window. */
.la2-pg.la2-au {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.la2-pg.la2-au .au-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Skip link. `la2etlak.css` owns `.la2-skip-link` for every legacy page; this
   family no longer loads that stylesheet, so the auth shell declares its own on
   the ported tokens rather than reaching across to a legacy owner. */
.la2-pg.la2-au .au-skip {
    position: absolute;
    top: -100%;
    inset-inline-start: 12px;
    z-index: 99;
    background: var(--pri);
    color: var(--priInk);
    padding: 10px 20px;
    border-radius: 0 0 var(--r1) var(--r1);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease;
}
.la2-pg.la2-au .au-skip:focus {
    top: 0;
    color: var(--priInk);
    text-decoration: none;
}


/* THE FAMILY'S OWN DISPLAY TYPE. The board declares `line-height:1.14` and
   `letter-spacing:-.012em` on its headings, and `1.42` with no tracking in
   Arabic, against the shared `1.18` / `-.01em` / `1.45` in foundation.css. That
   is a real design statement rather than drift: 4C's headings run at 52 / 46 /
   33 / 31px where the shared scale tops out at 34, and a display line at that
   size needs a tighter leading. Scoped to this family, exactly like the `.btn`
   geometry above; the shared rule is untouched and no other family moves. */
.la2-pg.la2-au h1,
.la2-pg.la2-au h2,
.la2-pg.la2-au h3 {
    line-height: 1.14;
    letter-spacing: -.012em;
}

[dir="rtl"] .la2-pg.la2-au h1,
[dir="rtl"] .la2-pg.la2-au h2,
[dir="rtl"] .la2-pg.la2-au h3 {
    line-height: 1.42;
    letter-spacing: 0;
}

/* THE SHARED BRAND MARK. 4C-O1 removed the registration masthead, which was the
   one auth context that emitted the light/dark colourway PAIR. Every mark this
   family still draws — the sign-in and registration brand column, the utility
   head block — stands on the navy field, which is navy in both themes, so the
   component emits ONE blue image and no swap rule is needed. The pair the SHARED
   header renders is styled by `public-shell.css`, its ONE owner, which the two
   pages that render that header now load. Nothing is re-declared here.

   4C-P02/P03. The board's own image rule. `foundation.css` declares only
   `display:block`, because 3-v3's images are all fixed-ratio media slots; 4C
   draws the brand lockup at display size and states the other three. Scoped to
   `.au-page` — the auth COMPOSITION — so it stops at the boundary of the shared
   header, whose own media stays with its own owner. */
.la2-pg.la2-au .au-page img {
    height: auto;
    width: auto;
    max-width: 100%;
}


/* ============================================================================
 * 2. THE UTILITY HEADER — no bar, no border. The brand sits IN the composition.
 * ----------------------------------------------------------------------------
 * OWNER OVERRIDE 4C-O1. Sign-in and registration NO LONGER use this header: they
 * render the product's ONE public header (`components.design.header`, styled by
 * `public-shell.css`, its single owner). Nothing below is copied from that file
 * and nothing below applies to it — `.hd`, `.hdi`, `.mainnav`, `.util`, the
 * dropdown and the drawer are not declared anywhere in this stylesheet.
 *
 * What remains here serves the NINE utility surfaces, which the owner
 * deliberately left on the accepted composition:
 *
 * DECISIONS - Header: "No bar and no border: brand at logical start, pill
 * controls for language and theme, and a real Home destination at logical end.
 * Never public navigation, search or admin."
 * ========================================================================== */
.la2-pg.la2-au .au-ahd {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 44px;
    /* Resolution 4 — the cluster breaks on its OWN width, never on a viewport
       query, so a long Arabic label can never push the page sideways. */
    flex-wrap: wrap;
}

.la2-pg.la2-au .au-on-nav { color: #DDE4F7; }

.la2-pg.la2-au .au-ahd .au-brand {
    margin-inline-end: auto;
    display: flex;
    align-items: center;
    min-height: 48px;
}
.la2-pg.la2-au .au-ahd .au-brand img { height: 52px; }
.la2-pg.la2-au .au-ahd .au-brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 46px;
}

.la2-pg.la2-au .au-util {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.la2-pg.la2-au .au-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    min-width: 46px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1.5px solid var(--edge);
    background: transparent;
    color: var(--body);
    font: 600 13.5px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .02em;
}
[dir="rtl"] .la2-pg.la2-au .au-pill { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg.la2-au .au-pill:hover {
    border-color: var(--act);
    color: var(--act);
    text-decoration: none;
}

.la2-pg.la2-au .au-on-nav .au-pill { border-color: rgba(255, 255, 255, .28); color: #DDE4F7; }
.la2-pg.la2-au .au-on-nav .au-pill:hover { border-color: var(--act); color: #DFE7FE; }

.la2-pg.la2-au .au-home { padding-inline: 15px 17px; }

/* The theme pill shows exactly one mark, the one it switches TO. Same rule the
   settled Public Shell states for `#theme-toggle`; restated here because this
   family does not load public-shell.css. */
.la2-pg.la2-au .au-pill .icon-sun { display: none; }
.la2-pg.la2-au .au-pill .icon-moon { display: inline-block; }
[data-bs-theme="dark"] .la2-pg.la2-au .au-pill .icon-sun { display: inline-block; }
[data-bs-theme="dark"] .la2-pg.la2-au .au-pill .icon-moon { display: none; }


/* ============================================================================
 * 3. THE NAVY STAGE + COMPASS GEOMETRY
 * ----------------------------------------------------------------------------
 * "Concentric rings and a crosshair echo the mark; they are plain circles and
 * 1px lines, never illustration."   (board PROOF 01 lede)
 * ========================================================================== */
.la2-pg.la2-au .au-stage {
    background: var(--navDeep);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1;
}

/* The board's ONE dark statement about the field: PROOF 05 carries
   `style="background:#0F1526"` on the dark `.stage`, and it is the only place
   the board draws this composition in dark. Dark is not inverted light
   (FOUNDATION 9), so the deeper field is ported as the family's dark value. */
[data-bs-theme="dark"] .la2-pg.la2-au .au-stage { background: #0F1526; }

.la2-pg.la2-au .au-rings { position: absolute; inset: 0; pointer-events: none; }

.la2-pg.la2-au .au-rings i {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}
.la2-pg.la2-au .au-rings i.a { width: 1180px; height: 1180px; inset-inline-start: -390px; top: -250px; }
.la2-pg.la2-au .au-rings i.b { width: 820px;  height: 820px;  inset-inline-start: -210px; top: -70px; }
.la2-pg.la2-au .au-rings i.c {
    width: 470px; height: 470px; inset-inline-start: -35px; top: 105px;
    border-color: rgba(244, 155, 35, .16);
}

.la2-pg.la2-au .au-rings u { position: absolute; background: rgba(255, 255, 255, .05); }
.la2-pg.la2-au .au-rings u.h { inset-inline: 0; top: 345px; height: 1px; }
.la2-pg.la2-au .au-rings u.v { inset-block: 0; inset-inline-start: 200px; width: 1px; }


/* ============================================================================
 * 4. THE AUTH FAMILY COMPOSITION — SIGN IN *AND* REGISTRATION
 * ----------------------------------------------------------------------------
 * OWNER OVERRIDE 4C-O2. The two pages are ONE composition system: same stage,
 * same compass geometry, same gutters, same vertical start, same left/right
 * relationship, same sheet treatment, same orange sheet accent, same typography
 * roles, same button geometry, same footer, same breakpoints.
 *
 * Registration differs in CONTENT, never in composition: `.au-wide` gives the
 * sheet the extra track its larger form needs and nothing else changes. The
 * width is the ONE number the owner allowed to differ, and it is an INTRINSIC
 * grid track — no fixed page height, no second breakpoint set and no second
 * silhouette.
 * ========================================================================== */
.la2-pg.la2-au .au-signin {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 568px);
    align-items: center;
    gap: 0;
    padding: 52px 44px 64px;
    position: relative;
    z-index: 2;
}

/* Registration: one wider track. Same alignment system, same everything else. */
.la2-pg.la2-au .au-signin.au-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 660px); }

/* 4C-O2. The brand column is TOP-ALIGNED against the sheet on BOTH pages, so the
   two columns start at the same height whatever the sheet holds. Centring it
   instead would have moved registration's headline below the fold, because its
   sheet is roughly twice as tall — a page whose introduction you have to scroll
   to reach is a different composition, not the same one. The ROW is still
   centred in the stage (`align-items: center` above), which is what keeps the
   short sign-in page balanced. */
.la2-pg.la2-au .au-brandcol { align-self: start; padding-inline-end: 56px; padding-block: 20px; }
.la2-pg.la2-au .au-brandcol .au-mark { height: 124px; margin-bottom: 26px; }
.la2-pg.la2-au .au-brandcol .au-eyebrow { color: var(--orn); display: block; margin-bottom: 18px; }
.la2-pg.la2-au .au-brandcol h1 { color: #FFFFFF; font-size: 52px; max-width: 19ch; }
[dir="rtl"] .la2-pg.la2-au .au-brandcol h1 { font-size: 46px; }
.la2-pg.la2-au .au-brandcol p { color: #AFBADB; font-size: 16px; max-width: 44ch; margin: 20px 0 0; }
.la2-pg.la2-au .au-brandcol .au-rule { width: 96px; height: 3px; background: var(--orn); margin: 28px 0 0; }

/* 4C-O2. The registration context list, moved into the brand column from the
   superseded side column. Same three lines, same icons — one column, not two,
   and no second logo. On the navy field it takes the on-navy ink the rest of
   the column already uses. */
.la2-pg.la2-au .au-brandcol .au-blisth {
    color: #FFFFFF;
    font-size: 17px;
    margin: 30px 0 0;
}
.la2-pg.la2-au .au-brandcol .au-blist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14.5px;
    color: #AFBADB;
    max-width: 44ch;
}
.la2-pg.la2-au .au-brandcol .au-blist li { display: flex; gap: 10px; align-items: flex-start; }
.la2-pg.la2-au .au-brandcol .au-blist li .ico { width: 17px; height: 17px; margin-top: 2px; color: var(--orn); flex: none; }

/* The sheet: hard-cornered paper pulled 40px into the brand column so the two
   OVERLAP instead of sitting side by side. The only elevated surface on the
   page — the form region is unmistakably primary. */
.la2-pg.la2-au .au-sheet {
    background: var(--bg);
    border-radius: var(--r1);
    box-shadow: 0 30px 70px rgba(9, 13, 32, .45), 0 2px 0 rgba(255, 255, 255, .04);
    padding: 38px 40px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    margin-inline-start: -40px;
}

.la2-pg.la2-au .au-sheet::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 104px;
    height: 4px;
    background: var(--orn);
    border-radius: var(--r1) 0 0 0;
}

.la2-pg.la2-au .au-sheet .au-kick { color: var(--muted); display: block; }
/* The TITLE heading only. Registration's group labels are h2 as well and own
   their own size below — a bare `.au-sheet h2` would outrank them. */
.la2-pg.la2-au .au-sheet .au-ttl h2 { font-size: 33px; }
[dir="rtl"] .la2-pg.la2-au .au-sheet .au-ttl h2 { font-size: 30px; }
.la2-pg.la2-au .au-sheet .au-dsc { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.la2-pg.la2-au .au-sheet .au-ttl { padding-bottom: 0; }


/* ============================================================================
 * 5. REGISTRATION CONTENT — inside the shared composition, never beside it
 * ----------------------------------------------------------------------------
 * OWNER OVERRIDE 4C-O2. The board's light editorial registration frame is
 * SUPERSEDED and is GONE from this file: no `.au-reg` ground, no `.au-rtop`, no
 * `.au-regmast` masthead, no `.au-regbody` two-column body, no `.au-regform`
 * column and no `.au-regside` hairline side column. Registration renders the
 * section-4 composition, and what is left below is only what its CONTENT needs.
 *
 * OWNER DECISION D3 still stands: SINGLE-PAGE REGISTRATION (option B). Option A
 * is REJECTED / MUST NOT IMPLEMENT — there is deliberately no `.steps`, no
 * `.optbar`, no `01 / 03` progression and no `Continue` arrow anywhere here.
 * ========================================================================== */

/* The two actions at the end of the form. */
.la2-pg.la2-au .au-regact { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* The single-page grouping (option B). Groups, never steps: no number, no
   progression, no navigation between them, one submit for the whole page. */
.la2-pg.la2-au .au-group { display: flex; flex-direction: column; gap: 14px; }
.la2-pg.la2-au .au-group + .au-group { margin-top: 6px; }
.la2-pg.la2-au .au-glab {
    font-size: 21px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    color: var(--head);
    line-height: 1.14;
    letter-spacing: -.012em;
    margin: 0;
}
[dir="rtl"] .la2-pg.la2-au .au-glab {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.42;
    letter-spacing: 0;
}


/* ============================================================================
 * 6. COMPOSITION C — UTILITY DOCUMENT SHEET
 * ----------------------------------------------------------------------------
 * "560px document sheet centred on the navy field, navy head block with the
 * icon mark plus one short contextual label — Password reset, Email
 * verification, Security check, Account reactivation. NO INVENTED STEP
 * COUNTERS."   (DECISIONS - Utility authentication shell)
 * ========================================================================== */
.la2-pg.la2-au .au-docwrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 44px 60px;
    position: relative;
    z-index: 2;
}

.la2-pg.la2-au .au-doc {
    width: 100%;
    max-width: 560px;
    background: var(--bg);
    border-radius: var(--r1);
    box-shadow: 0 30px 70px rgba(9, 13, 32, .45);
    overflow: hidden;
}
[data-bs-theme="dark"] .la2-pg.la2-au .au-doc { border: 1px solid var(--edge); }

.la2-pg.la2-au .au-dochd {
    background: var(--nav);
    padding: 20px 34px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.la2-pg.la2-au .au-dochd img { height: 44px; }
.la2-pg.la2-au .au-dochd .au-mono {
    color: var(--orn);
    margin-inline-start: auto;
    text-align: end;
    white-space: nowrap;
}

.la2-pg.la2-au .au-docbody {
    padding: 32px 34px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.la2-pg.la2-au .au-docbody h1 { font-size: 31px; }
[dir="rtl"] .la2-pg.la2-au .au-docbody h1 { font-size: 27px; }
.la2-pg.la2-au .au-docbody .au-dsc { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }


/* ============================================================================
 * 7. SHARED PIECES — micro-labels, alert slot, divider, secondary links, footer
 * ========================================================================== */

/* Mono micro-label. LOCKED (D2): "IBM Plex Mono is limited to step numbers and
   short system or security labels (Password reset, Security check ...).
   Eyebrows, dividers, footer links and all ordinary copy use the accepted
   sans." The step numbers do not exist in this product — option A is rejected —
   so the ONLY consumer here is the utility head block's contextual label. */
.la2-pg.la2-au .au-mono {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .10em;
    text-transform: uppercase;
}
[dir="rtl"] .la2-pg.la2-au .au-mono {
    font-family: 'IBM Plex Mono', 'IBM Plex Sans Arabic', monospace;
    letter-spacing: .04em;
}

/* Sans eyebrow — ordinary copy voice. */
.la2-pg.la2-au .au-eyebrow {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
[dir="rtl"] .la2-pg.la2-au .au-eyebrow { letter-spacing: 0; text-transform: none; font-size: 14px; }

/* THE RESERVED ALERT SLOT. "Reserved under the title, above the fields, in all
   three compositions and both breakpoints. A left/logical-start semantic bar,
   not a boxed card." A slot with nothing to say is ABSENT, not empty
   (FOUNDATION 13). */
.la2-pg.la2-au .au-alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-inline-start: 3px solid var(--inI);
    background: var(--inBg);
    color: var(--inI);
    border-radius: 0 var(--r1) var(--r1) 0;
    padding: 13px 15px;
    font-size: 13.5px;
    margin: 0;
}
[dir="rtl"] .la2-pg.la2-au .au-alert { border-radius: var(--r1) 0 0 var(--r1); }

.la2-pg.la2-au .au-er { border-inline-start-color: var(--erI); background: var(--erBg); color: var(--erI); }
.la2-pg.la2-au .au-ok { border-inline-start-color: var(--ok); background: var(--okBg); color: var(--ok); }

.la2-pg.la2-au .au-alert .ico { width: 18px; height: 18px; margin-top: 1px; }
.la2-pg.la2-au .au-alert b { display: block; }
.la2-pg.la2-au .au-alert ul { margin: 4px 0 0; padding-inline-start: 18px; }
.la2-pg.la2-au .au-alert a { color: inherit; text-decoration: underline; }

.la2-pg.la2-au .au-divx {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
}
.la2-pg.la2-au .au-divx::before,
.la2-pg.la2-au .au-divx::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.la2-pg.la2-au .au-slinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
    margin: 0;
}
.la2-pg.la2-au .au-slinks a { display: inline-flex; align-items: center; min-height: 46px; font-weight: 600; }
.la2-pg.la2-au .au-slinks .au-sp { color: var(--muted); }

/* Three secondary destinations in this family are MUTATIONS, not navigations —
   sign out, resend the verification email, resend the two-factor code — so each
   is a real POST form and its control is a real <button>. It reads exactly as
   the links beside it; nothing here makes a link out of something that acts, and
   nothing makes a button out of something that navigates. */
.la2-pg.la2-au .au-slinks form { display: inline-flex; }
.la2-pg.la2-au .au-linkbtn {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--act);
    font: 600 14.5px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    text-decoration: none;
}
[dir="rtl"] .la2-pg.la2-au .au-linkbtn { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg.la2-au .au-linkbtn:hover { color: var(--actHov); text-decoration: underline; }

/* The quiet auth footer. One row of truthful legal destinations that already
   exist in the runtime — never the full public footer. */
.la2-pg.la2-au .au-aftr { padding: 0 44px 26px; position: relative; z-index: 2; }
.la2-pg.la2-au .au-aftri {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--muted);
}
.la2-pg.la2-au .au-aftr nav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.la2-pg.la2-au .au-aftr nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--muted);
    font-size: 13px;
}
.la2-pg.la2-au .au-aftr nav a:hover { color: var(--act); }

.la2-pg.la2-au .au-on-nav-ftr .au-aftri,
.la2-pg.la2-au .au-on-nav-ftr nav a { color: #8E9AC4; }
.la2-pg.la2-au .au-on-nav-ftr nav a:hover { color: #FFD9A8; }


/* ============================================================================
 * 8. THE ACTION + FIELD SYSTEM
 * ----------------------------------------------------------------------------
 * DECISIONS - Field geometry: "One standard primary treatment everywhere —
 * action-blue, 52px, 4px radius, no flourish ... One dominant action per
 * context. Within the authentication family ORANGE APPEARS ONLY AS THE SHEET
 * EDGE AND THE BRAND RULE ON NAVY — never as a light-theme UI colour."
 *
 * Authority resolution 3: this is a family styling the shared `.btn` primitive
 * inside its own context, at (0,3,0) over foundation's (0,2,0).
 * ========================================================================== */
/* 4C-O1. Scoped to `.au-page` — the auth COMPOSITION — so the family's taller
   control geometry stops at the boundary of the shared product header, whose
   `.btn sm` actions keep the Public Shell's own 36px geometry from their own
   owner. The auth family styles a shared primitive inside its own context; it
   does not reach into another family's. */
.la2-pg.la2-au .au-page .btn {
    min-height: 52px;
    padding: 0 22px;
    border-radius: var(--r1);
    font: 600 15.5px/1 'IBM Plex Sans', sans-serif;
    border-width: 1.5px;
    gap: 10px;
    letter-spacing: .005em;
}
[dir="rtl"] .la2-pg.la2-au .au-page .btn { font-family: 'IBM Plex Sans Arabic', sans-serif; }

/* Real form controls. The board designs NO field — every content region in it is
   a labelled design-only placeholder — so the geometry comes from the DECISIONS
   table (52px, 4px radius) and the anatomy from FOUNDATION 11: visible label
   bound to the input, `--edge` border, `--ph` placeholder, the shared focus
   ring, and an invalid state that carries a word, a border and an icon. */
.la2-pg.la2-au .au-fld { display: flex; flex-direction: column; gap: 7px; }

.la2-pg.la2-au .au-flab {
    font-size: 14px;
    font-weight: 600;
    color: var(--head);
    line-height: 1.35;
    margin: 0;
}

.la2-pg.la2-au .au-fi {
    display: block;
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--edge);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    padding: 0 14px;
    margin: 0;
    box-shadow: none;
}
[dir="rtl"] .la2-pg.la2-au .au-fi { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.la2-pg.la2-au .au-fi::placeholder { color: var(--ph); opacity: 1; }
.la2-pg.la2-au .au-fi:focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }

.la2-pg.la2-au .au-fhelp { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0; }

/* Invalid: a word, a border and an icon — never colour alone (FOUNDATION 12). */
.la2-pg.la2-au .au-fld.au-bad .au-fi { border: 2px solid var(--erI); background: var(--erBg); }
.la2-pg.la2-au .au-ferr {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--erI);
    line-height: 1.45;
    margin: 0;
}
.la2-pg.la2-au .au-ferr .ico { width: 16px; height: 16px; margin-top: 2px; }

/* A read-only fact the form states but does not accept — the social-link
   confirmation's account address. Not an input: it carries no name and posts
   nothing. */
.la2-pg.la2-au .au-fro {
    display: flex;
    align-items: center;
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: var(--r1);
    background: var(--band);
    color: var(--body);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    padding: 0 14px;
    word-break: break-all;
}

/* The two checkbox rows — remember me, and the terms acknowledgement. */
/* 4C-C01 — A CHECKBOX AND ITS OWN LABEL ARE ONE UNIT.
   The label text may wrap to as many lines as it needs, but it wraps BESIDE the
   control, never underneath it. `flex-wrap: wrap` here let the span leave the
   control's line whenever `.au-check` was narrower than the span's own flex
   basis — which is what a `space-between` row does to it — so "Remember me"
   rendered under its checkbox at every measured width, sign-in's 1440 included.
   `nowrap` plus an `auto` basis makes the group's max-content contribution the
   truthful one, so the ROW breaks between the two logical groups instead. */
.la2-pg.la2-au .au-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--body);
    min-height: 44px;
    flex-wrap: nowrap;
    margin: 0;
}
.la2-pg.la2-au .au-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 3px;
    flex: none;
    accent-color: var(--act);
}
.la2-pg.la2-au .au-check > span { flex: 0 1 auto; min-width: 0; }
.la2-pg.la2-au .au-check a { font-weight: 600; }

/* The two logical groups. Where the sheet is too narrow to hold both, the row
   wraps between them — each group whole, and each still one unit. */
.la2-pg.la2-au .au-rowbtw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
}
.la2-pg.la2-au .au-rowbtw a {
    font-weight: 600;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Provider region. "Divider plus one reserved row, present only where a
   provider is configured; REMOVED ENTIRELY OTHERWISE." Individual provider
   buttons are not designed by the board, so they take the shared secondary
   role at the family's own control height. */
.la2-pg.la2-au .au-soc { display: flex; flex-direction: column; gap: 10px; }
.la2-pg.la2-au .au-soc .btn { width: 100%; }

/* The one code entry the runtime has. Mono is permitted here by D2 — a one-time
   code is exactly the "reference and one-time codes" case the rule names. */
.la2-pg.la2-au .au-code {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: .34em;
    text-align: center;
    font-size: 20px;
}
[dir="rtl"] .la2-pg.la2-au .au-code { letter-spacing: .34em; }

/* The Turnstile widget sits INSIDE the form geometry and is never restyled —
   the remote iframe owns its own appearance. When no captcha is required this
   element is absent, so nothing reserves an empty gap. */
.la2-pg.la2-au .au-captcha { display: block; }
.la2-pg.la2-au .au-captcha iframe { max-width: 100%; }

/* A submit that is the page's one dominant action fills the sheet. */
.la2-pg.la2-au .au-submit { display: flex; flex-direction: column; gap: 12px; }

/* OWNER OVERRIDE 4C-O3 / 4C-O5 — the real provider brand marks.

   A trademark is not an icon: these are LOCAL SVG assets drawn in their own
   colours, so there is deliberately no `mask`, no `--i` custom property, no
   `background-color: currentColor` and no tint of any kind on them. Only X
   ships two colourways, because its correct rendering is neutral black on light
   and neutral white on dark; Google and Facebook are colour-fixed. */
.la2-pg.la2-au .au-soc .au-pmark {
    width: 20px;
    height: 20px;
    flex: none;
    display: block;
}
.la2-pg.la2-au .au-soc .au-pmark--dark { display: none; }
[data-bs-theme="dark"] .la2-pg.la2-au .au-soc .au-pmark--light { display: none; }
[data-bs-theme="dark"] .la2-pg.la2-au .au-soc .au-pmark--dark { display: block; }


/* OWNER OVERRIDE 4C-O4-B — THE TERMS DIALOG.

   A native `<dialog>`, so modality, the top layer, the backdrop and Escape are
   the browser's own and this family ships no dialog engine. It is closed at rest
   and the UA hides it, which is exactly the no-JavaScript behaviour we want: the
   label beside it stays an ordinary link to the canonical `/terms` page. */
.la2-pg.la2-au .au-dlg {
    display: none;
    width: min(720px, calc(100vw - 32px));
    max-height: min(80vh, 760px);
    padding: 0;
    margin: auto;
    border: 1px solid var(--edge);
    border-radius: var(--r1);
    background: var(--bg);
    color: var(--body);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(9, 13, 32, .45);
}
.la2-pg.la2-au .au-dlg[open] { display: flex; flex-direction: column; }
.la2-pg.la2-au .au-dlg::backdrop { background: rgba(9, 13, 32, .62); }

.la2-pg.la2-au .au-dlghd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    flex: none;
}
.la2-pg.la2-au .au-dlgt { font-size: 21px; margin: 0; }
.la2-pg.la2-au .au-dlgt:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }

.la2-pg.la2-au .au-dlgx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex: none;
    border: 1px solid var(--edge);
    border-radius: var(--r1);
    background: transparent;
    color: var(--body);
    cursor: pointer;
}
.la2-pg.la2-au .au-dlgx:hover { border-color: var(--act); color: var(--act); }
.la2-pg.la2-au .au-dlgx .ico { width: 18px; height: 18px; }

/* The body scrolls INSIDE the dialog, never the page behind it. `tabindex="0"`
   is deliberate here — the opposite of the phone listbox, which must not be a
   stop: a long scrollable region a keyboard reader cannot focus is a region they
   cannot read. */
.la2-pg.la2-au .au-dlgb {
    padding: 20px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--body);
    flex: 1 1 auto;
    min-height: 0;
}
.la2-pg.la2-au .au-dlgb:focus-visible { outline: 3px solid var(--act); outline-offset: -3px; }

.la2-pg.la2-au .au-dlgf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--line);
    flex: none;
}
.la2-pg.la2-au .au-dlgf .au-dlglink {
    font-weight: 600;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}


/* ============================================================================
 * 9. RESPONSIVE — recompose, never hide
 * ----------------------------------------------------------------------------
 * The board declares its narrow composition as a CLASS (`.pg.m{width:390px}`),
 * not as a breakpoint, so the two steps below are chosen from
 * FINAL_DESIGN_FOUNDATION 7's PROVEN widths and nothing else:
 *
 *   1023.98  the two-column compositions become one column — the same width at
 *            which the locked hero becomes a single column.
 *    767.98  the board's own 390 composition: navy top, sheet rising over it
 *            edge to edge, reduced gutters, the lockup dropped in favour of the
 *            header icon.
 *
 * No content is removed at either step and no second tree is rendered.
 * ========================================================================== */
@media (max-width: 1023.98px) {
    /* ONE responsive model for BOTH pages (4C-O2): the two columns become one,
       in the same order, at the same width, with the same gutters. `.au-wide`
       needs no rule of its own — a single column has no second track. */
    .la2-pg.la2-au .au-signin { display: block; padding: 32px 32px 48px; }
    .la2-pg.la2-au .au-brandcol { padding-inline-end: 0; padding-block: 8px 24px; }
    .la2-pg.la2-au .au-brandcol h1 { font-size: 38px; max-width: none; }
    [dir="rtl"] .la2-pg.la2-au .au-brandcol h1 { font-size: 34px; }
    .la2-pg.la2-au .au-brandcol .au-blist { max-width: none; }
    .la2-pg.la2-au .au-sheet { margin-inline-start: 0; }
}

@media (max-width: 767.98px) {
    .la2-pg.la2-au .au-ahd { padding: 14px 18px 10px; gap: 8px; }
    .la2-pg.la2-au .au-ahd .au-brand img { height: 40px; }
    .la2-pg.la2-au .au-pill { min-height: 46px; min-width: 46px; padding: 0 12px; }

    .la2-pg.la2-au .au-signin { padding: 20px 0 0; }
    .la2-pg.la2-au .au-brandcol { padding: 2px 20px 18px; }
    .la2-pg.la2-au .au-brandcol .au-mark { display: none; }
    .la2-pg.la2-au .au-brandcol h1 { font-size: 26px; max-width: none; }
    [dir="rtl"] .la2-pg.la2-au .au-brandcol h1 { font-size: 24px; }
    .la2-pg.la2-au .au-brandcol p { font-size: 14.5px; margin-top: 14px; }
    .la2-pg.la2-au .au-brandcol .au-rule { margin-top: 14px; width: 64px; }

    .la2-pg.la2-au .au-sheet {
        margin: 0;
        border-radius: 22px 22px 0 0;
        padding: 26px 20px 22px;
        box-shadow: 0 -14px 40px rgba(9, 13, 32, .4);
    }
    .la2-pg.la2-au .au-sheet::before { border-radius: 22px 0 0 0; top: 0; height: 4px; width: 88px; }
    .la2-pg.la2-au .au-sheet h2 { font-size: 27px; }
    [dir="rtl"] .la2-pg.la2-au .au-sheet h2 { font-size: 25px; }

    .la2-pg.la2-au .au-rings i.a,
    .la2-pg.la2-au .au-rings i.b { display: none; }
    .la2-pg.la2-au .au-rings i.c {
        width: 340px; height: 340px;
        inset-inline-start: auto; inset-inline-end: -150px; top: -90px;
    }
    .la2-pg.la2-au .au-rings u.v { inset-inline-start: auto; inset-inline-end: 54px; }
    .la2-pg.la2-au .au-rings u.h { top: 210px; }

    .la2-pg.la2-au .au-aftr { padding: 20px 20px 22px; background: var(--bg); }
    .la2-pg.la2-au .au-aftri { justify-content: flex-start; gap: 10px 18px; }
    /* On the narrow sign-in page the footer sits on the risen sheet, so it takes
       the sheet's ground and loses the on-navy ink. */
    .la2-pg.la2-au .au-on-nav-ftr .au-aftri,
    .la2-pg.la2-au .au-on-nav-ftr nav a { color: var(--muted); }
    .la2-pg.la2-au .au-on-nav-ftr nav a:hover { color: var(--act); }

    .la2-pg.la2-au .au-docwrap { padding: 8px 16px 40px; align-items: flex-start; }
    .la2-pg.la2-au .au-dochd { padding: 16px 20px; }
    .la2-pg.la2-au .au-docbody { padding: 24px 20px 22px; }
    .la2-pg.la2-au .au-docbody h1 { font-size: 25px; }
    [dir="rtl"] .la2-pg.la2-au .au-docbody h1 { font-size: 23px; }

    .la2-pg.la2-au .au-glab { font-size: 19px; }
    .la2-pg.la2-au .au-brandcol .au-blisth { margin-top: 20px; font-size: 16px; }

    /* The dialog is a sheet at this width: full available width inside the
       viewport, with the safe area honoured for real. */
    .la2-pg.la2-au .au-dlg {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 40px);
    }
    .la2-pg.la2-au .au-dlghd,
    .la2-pg.la2-au .au-dlgb { padding-inline: 18px; }
    .la2-pg.la2-au .au-dlgf {
        padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        justify-content: flex-start;
    }
}


/* ============================================================================
 * 10. MOTION
 * ----------------------------------------------------------------------------
 * The family carries no decorative movement — the compass geometry is static
 * and the only transitions are the shared hover/focus ones foundation declares.
 * The rule below is stated so a future addition cannot arrive unguarded.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .la2-pg.la2-au * { animation: none; transition: none; }
}