/* ============================================================================
   GEPA — authentication screens

   One narrow column on paper. Shared by login, register, forgot-password,
   reset-password and verify-email, which carried an identical copy of this
   block each before it was lifted out.

   Reads the token layer; declares no colour of its own.
   ========================================================================== */

/* Auth screens — paper. Layout only: every control, field, rule and
           badge below comes from the token layer, so nothing here restyles a
           component or names a surface. */
        .auth-grid { display: grid; gap: var(--s7); }
        @media (min-width: 1024px) {
            .auth-grid {
                grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                gap: var(--s8);
                align-items: start;
            }
        }
        .auth-aside { max-width: 46ch; }
        .auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
        .auth-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); align-items: start; }
        .auth-points .icon { color: var(--gilt); margin-top: 2px; }

        .auth-card { max-width: 560px; }
        @media (min-width: 1024px) { .auth-card { margin-left: auto; } }
        .auth-card h2 { margin-bottom: var(--s2); }
        .auth-intro { margin: 0 0 var(--s5); }
        .auth-card .rule { margin-block: var(--s5); }
        /* A two-up field row supplies its own gap, so the fields inside it
           drop the stacked margin and the row carries it instead. */
        .auth-card .field-row { margin-bottom: var(--s4); }
        .auth-card .field-row .field { margin-bottom: 0; }

        /* The label fills the row rather than being padded to it, so the 44px
           band does not depend on the line box of whichever font loaded. */
        .auth-check { display: flex; gap: var(--s3); }
        .auth-check input { width: 24px; height: 24px; flex: none; margin: 0; align-self: center; accent-color: var(--link); }
        .auth-check label { display: flex; align-items: center; min-height: 44px; margin: 0; cursor: pointer; }

        .auth-alt { margin: var(--s4) 0 0; text-align: center; }
        .auth-alt a { color: var(--action); font-weight: 700; }

        .auth-note { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s5) 0 0; }
        .auth-note .icon { color: var(--gilt); margin-top: 1px; }
        .auth-note a { color: var(--action); font-weight: 700; }

/* --- verify-email only --- */
/* The address we sent to, set in mono so a transposed character is
           visible rather than absorbed into proportional type. */
        .auth-address { display: block; margin-top: var(--s1); word-break: break-all; }
        /* Two single-button forms, one after the other: the gap belongs to the
           stack, not to a margin on the button. */
        .auth-stack-forms { display: grid; gap: var(--s3); }

/* ---------------------------------------------------------------------------
   Account creation — the register page and the store's guest checkout.

   Both ask for the same three things and the same tick, so the two controls
   they share (the password reveal and the consent row) live here and the
   checkout links this file too. Everything reads the surface tokens.
   ------------------------------------------------------------------------ */

/* Password with its reveal toggle inside the input's right edge. The button
   is inset 2px top and bottom, so it is a 48px target inside the 52px field.
   The input pads right only once gepa-auth.js has shown the button, so typed
   text never runs under it and a field without it has no blank strip. */
.auth-pw { position: relative; }
.auth-pw.is-revealable .input { padding-right: 100px; }
/* Edge draws its own eye inside a password field; one toggle is enough. */
.auth-pw .input::-ms-reveal { display: none; }
.auth-reveal {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--action);
    font: 700 14px/1 var(--font-ui);
    cursor: pointer;
}
/* The display above would otherwise beat the user-agent [hidden] rule, and
   the button must stay invisible until the script has wired it. */
.auth-reveal[hidden] { display: none; }
/* Hover only where there is a pointer to hover with: iOS keeps :hover on
   whatever was last tapped, which would leave an "off" toggle looking on. */
@media (hover: hover) {
    .auth-reveal:hover { background: var(--well); }
}
/* On is the action colour turned solid, with the field colour as its ink —
   a chip 7.4:1 against the field on paper and 11.3:1 on forest, where off
   is bare text. The word stays "Show" because aria-pressed carries the state,
   so what is seen matches what a screen reader says. Declared after the
   hover rule, so hovering never dims it. */
.auth-reveal[aria-pressed="true"] { background: var(--action); color: var(--field-bg); }

/* Consent — a tick the person makes, not a sentence under the button. The
   whole bordered row is the label, so the target is the row (well over 44px
   tall) and a tap anywhere but the two links ticks the box. The box sits on
   the first line of the sentence rather than centred against two lines. */
.auth-consent-field { margin-bottom: var(--s5); }
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    min-height: 44px;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--field-border);
    border-radius: var(--r-sm);
    background: var(--field-bg);
    font: 600 15px/1.5 var(--font-ui);
    color: var(--text);
    cursor: pointer;
}
.auth-consent input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--action);
    cursor: pointer;
}
.auth-consent a { color: var(--action); font-weight: 700; text-underline-offset: 3px; }
.auth-consent:has(input:checked) { border-color: var(--action); }
.auth-consent.is-invalid { border: 1.5px solid var(--danger); }

/* --- register only --------------------------------------------------------
   The heading, the form and the reasons in one grid. Below 1024px they stack
   in that order with a tighter top than .section, so the first field is on
   the first screen of a phone; from 1024px the reasons move up under the
   heading and the form holds the right-hand column. */
.signup { padding-block: var(--s6) var(--s7); }
.signup-grid {
    display: grid;
    gap: var(--s5);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "card" "aside";
}
.signup-head { grid-area: head; max-width: 46ch; }
.signup-head > * + * { margin-top: var(--s3); }
.signup-card { grid-area: card; width: 100%; }
.signup-aside { grid-area: aside; max-width: 46ch; }
.signup-roles { margin: var(--s2) 0 0; text-align: center; }

@media (min-width: 1024px) {
    .signup { padding-block: var(--section); }
    .signup-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "head card" "aside card";
        column-gap: var(--s8);
        row-gap: var(--s6);
        align-items: start;
    }
}

/* The photograph. Its caption sits on a forest veil that is solid for the
   whole height of the text and only fades above it, so the caption keeps
   its contrast whatever the picture behind it does. */
.signup-photo {
    position: relative;
    margin: 0 0 var(--s5);
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--well);
}
.signup-photo picture { display: block; height: 100%; }
.signup-photo img { width: 100%; height: 100%; object-fit: cover; }
.signup-photo-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--s6) var(--s4) var(--s3);
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--forest-sunk) 90%, transparent) 0%,
        color-mix(in srgb, var(--forest-sunk) 90%, transparent) 68%,
        transparent 100%
    );
    color: var(--on-forest);
    font: 600 13px/1.45 var(--font-ui);
}
.signup-photo-cap::before {
    content: "";
    display: block;
    width: 22px;
    height: 1.5px;
    margin-bottom: var(--s2);
    background: var(--gold);
}
@media (min-width: 1024px) { .signup-photo { aspect-ratio: 4 / 3; } }