/* auth.css — the sign-in and create-account pages.

   The layout is Amazon's, measured off their live sign-in page rather than
   eyeballed from a screenshot, because what makes that page read the way it
   does is not a look. It is a set of unusually specific sizes that almost
   nothing else on the web uses:

     card content   296px            (348px total, 26px side padding)
     h1             28px/36px at 400 — LARGE and LIGHT, never bold
     label          13px at 700      — small and heavy, the inverse of the h1
     input          31px tall        — shorter than feels right, on purpose
     button         32px tall, pill  — full width, radius 100px
     legal          12px/16px

   Get the h1/label inversion backwards and the page stops reading as this
   layout immediately, whatever the colours are. Everything else here is
   whitespace and one hairline, so every value is exact — there is nothing
   else left to carry it.

   Colour is ours. tokens.css says palettes live per page, so the accent
   below is login.css's --accent unchanged, and the yellow that would make
   this a forgery rather than a layout is deliberately absent. */

:root{
    --au-accent:#1aa6df;
    --au-accent-ink:#0d5f86;
    --au-accent-2:#118cc0;
    --au-ink:#0e2136;
    --au-mut:#6b7a90;
    --au-line:#e4ecf4;
    --au-line-2:#d5d9d9;
    --au-paper:#ffffff;
    --au-field-line:#a6acaf;
    --au-danger:#c4321a;
}
:root[data-theme="dark"]{
    --au-accent:#63d0ff;
    --au-accent-ink:#e6edf3;
    --au-accent-2:#1aa6df;
    --au-ink:#f5f9fc;
    --au-mut:#9ea3a6;
    --au-line:#33363a;
    --au-line-2:#3a3e42;
    --au-paper:#18191b;
    --au-field-line:#55595d;
    --au-danger:#ff8a70;
}

body{
    margin:0;
    background:var(--au-paper);
    color:var(--au-ink);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:20px;
    -webkit-font-smoothing:antialiased;
}

/* One column, top-aligned. This layout does NOT vertically centre the card:
   it sits near the top so nothing moves when the password step adds a
   field, and that stillness is most of why the flow feels solid. */
.au-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* The bottom 40px was the old in-column footer's job. Once the shared
       one moved below the column, a long signup on a 390px phone ended 8px
       above its rule, and on anything shorter ran straight into it. */
    padding:14px 18px 40px;
    box-sizing:border-box;
}

/* ---- logo ---------------------------------------------------------- */
/* Stacked, mark over wordmark. */
.au-logo{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    margin:12px 0 18px;
    text-decoration:none;
    color:var(--au-ink);
}
/* logo-mark.png, NOT logo.png. logo.png is colour type 2 — truecolour with
   no alpha channel at all — so its background is baked into the pixels and
   it renders as a lit square floating on the dark theme. No CSS fixes that;
   there is nothing to see through. logo-mark.png is colour type 6 and
   carries its own alpha, which is why code.html calls it "the logo, alpha
   and all". Transparent means the page background IS the logo background,
   in both themes, for free. */
.au-logo img{width:58px;height:58px;object-fit:contain;display:block}
.au-logo span{
    font-family:inherit;
    font-size:27px; font-weight:400; line-height:1;
}

/* ---- the card ------------------------------------------------------ */
.au-card{
    width:100%;
    max-width:348px;
    box-sizing:border-box;
    padding:20px 26px;
    border:1px solid var(--au-line);
    border-radius:8px;
    background:var(--au-paper);
}
.au-card h1{
    margin:0 0 14px;
    font-family:Inter,sans-serif;
    font-size:28px; line-height:36px; font-weight:400;
    letter-spacing:-.01em;
    color:var(--au-ink);
}

/* ---- fields -------------------------------------------------------- */
.au-field{margin:0 0 14px}
.au-label{
    display:block;
    margin:0 0 2px;
    font-size:13px; line-height:19px; font-weight:700;
    color:var(--au-ink);
}
.au-label .au-opt{font-weight:400;color:var(--au-mut)}
.au-input{
    display:block;
    width:100%;
    height:31px;
    box-sizing:border-box;
    padding:5px 11px;
    font:inherit; font-size:14px;
    color:var(--au-ink);
    background:var(--au-paper);
    border:1px solid var(--au-field-line);
    border-radius:8px;
    /* The inset top shadow is the detail copied last and noticed first:
       without it the field reads as a flat outline instead of a recess, and
       the card flattens with it. */
    box-shadow:0 1px 0 rgba(0,0,0,.07) inset;
    outline:none;
    transition:border-color var(--dur-snappy) var(--ease-snappy),box-shadow var(--dur-snappy) var(--ease-snappy);
}
/* The country picker: a select centres its own text, so it takes no vertical padding. */
select.au-input{padding-top:0;padding-bottom:0;cursor:pointer}
.au-input:focus{
    border-color:var(--au-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--au-accent) 28%,transparent);
}
.au-input[readonly]{
    background:color-mix(in srgb,var(--au-ink) 4%,transparent);
    color:var(--au-mut);
}
.au-hint{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--au-mut)}
/* The confirm-password verdict, said while typing. Colour alone would carry
   it for most people and nobody else, so the text says which state it is. */
.au-hint.ok{color:#2e7d32}
.au-hint.bad{color:var(--au-danger)}
:root[data-theme="dark"] .au-hint.ok{color:#7fd08a}

/* ---- buttons ------------------------------------------------------- */
/* Full width, 32px, pill. The radius is 100px rather than a large finite
   value so the cap stays a true semicircle if a button ever wraps to two
   lines in a translation. */
.au-btn{
    display:block;
    width:100%;
    min-height:32px;
    /* 5px, not 6: 20px line-height + 10px padding + 2px border is exactly
       32, and the button is the one control tall enough for a 2px error to
       show against the 31px field directly above it. */
    padding:5px 12px;
    box-sizing:border-box;
    font:inherit; font-size:14px; font-weight:500;
    border-radius:100px;
    border:1px solid transparent;
    cursor:pointer;
    transition:background var(--dur-snappy) var(--ease-snappy),border-color var(--dur-snappy) var(--ease-snappy);
}
.au-btn + .au-btn{margin-top:9px}
/* Dark ink on the bright fill, not white — and this is the accessible
   reading AND the faithful one, which is rare enough to write down.
   White on our accent measures 2.78:1 in light mode and 1.9:1 in dark
   (the accent lightens there), so the one control the whole page exists
   to offer would have been the only thing on it failing AA. Dark ink is
   ~6:1 on both. Amazon's own button is #0F1111 on yellow for the same
   reason; copying the colour would have been a forgery, copying the
   relationship is the actual lesson.

   Hover dims the fill rather than swapping the pair, so the contrast
   ratio moves a little instead of inverting under the cursor. */
.au-btn-primary{
    background:var(--au-accent);
    border-color:var(--au-accent);
    color:#07131f;
}
.au-btn-primary:hover{filter:brightness(.94)}
.au-btn-primary:disabled{opacity:.55;cursor:default;filter:none}
.au-btn-secondary{
    background:var(--au-paper);
    border-color:var(--au-field-line);
    color:var(--au-ink);
    box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.au-btn-secondary:hover{background:color-mix(in srgb,var(--au-ink) 4%,transparent)}
/* The provider buttons keep the pill but carry a mark, so they need a row
   layout the plain buttons do not. */
.au-btn-oauth{display:flex;align-items:center;justify-content:center;gap:9px}
.au-btn-oauth svg{width:17px;height:17px;flex:none}

/* ---- legal and links ----------------------------------------------- */
.au-legal{
    margin:12px 0 0;
    font-size:12px; line-height:16px;
    color:var(--au-ink);
}
.au-link,.au-legal a{color:var(--au-accent-ink);text-decoration:none}
.au-link:hover,.au-legal a:hover{text-decoration:underline}

/* ---- in-card divider ----------------------------------------------- */
.au-rule{
    display:flex; align-items:center; gap:10px;
    margin:16px 0 12px;
    font-size:12px; line-height:16px; color:var(--au-mut);
}
.au-rule::before,.au-rule::after{
    content:""; flex:1 1 auto; height:1px; background:var(--au-line-2);
}

/* ---- below the card ------------------------------------------------ */
/* The "New to Souqi?" line sits OUTSIDE the card, on a ruled line with the
   label breaking it. Putting it inside the card instead is the single most
   common way this layout gets mis-copied. */
.au-below{width:100%;max-width:348px;margin:18px 0 0}
.au-below-rule{
    position:relative;
    text-align:center;
    font-size:12px; line-height:16px; color:var(--au-mut);
    margin:0 0 12px;
}
.au-below-rule::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:1px; background:var(--au-line-2);
}
.au-below-rule span{
    position:relative;
    padding:0 8px;
    background:var(--au-paper);
}

/* ---- error --------------------------------------------------------- */
.au-err{
    display:none;
    margin:10px 0 0;
    padding:9px 11px;
    border:1px solid color-mix(in srgb,var(--au-danger) 45%,transparent);
    border-left-width:4px;
    border-radius:4px;
    font-size:13px; line-height:18px;
    color:var(--au-danger);
    background:color-mix(in srgb,var(--au-danger) 7%,transparent);
}
.au-err.show{display:block}

/* ---- password reveal ----------------------------------------------- */
.au-pw{position:relative}
.au-pw .au-input{padding-right:38px}
.au-eye{
    position:absolute; right:1px; top:1px;
    width:34px; height:29px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:0; border-radius:0 7px 7px 0;
    color:var(--au-mut); cursor:pointer;
}
.au-eye svg{width:16px;height:16px}
.au-eye:hover{color:var(--au-ink)}

/* ---- phone --------------------------------------------------------- */
/* Below 360px the card goes edge to edge and drops its side border: a
   348px box inside an 18px gutter on a 360px viewport leaves 3px a side,
   which reads as a rendering fault rather than a margin. */
@media (max-width:400px){
    .au-page{padding:10px 12px 40px}
    .au-card{padding:18px 16px}
    .au-card h1{font-size:24px;line-height:31px}
}
@media (max-width:359px){
    .au-page{padding:10px 0 40px}
    .au-card{border-left:0;border-right:0;border-radius:0}
}

@media (prefers-reduced-motion:reduce){
    .au-input,.au-btn{transition:none}
}