/*
    AMX Mobile API — authentication screens.

    These pages are the only AMX UI a mobile user sees outside the app: they open in the
    system's in-app browser part-way through signing in. They follow DESIGN_LANGUAGE.md —
    flat fills, one green accent, borders for structure, subtle shadow — and
    ACCESSIBILITY_LANGUAGE.md (WCAG 2.2 AA) for contrast, focus and target size.

    The token block is scoped to .amx-auth-page rather than :root, per DESIGN_LANGUAGE.md §6,
    so nothing here leaks into the rest of the site. This project has no app.css to alias, so
    the primitives are declared in full; the values are the canonical ones from the doc.

    Dark mode follows the operating system. There is no theme switch on these pages (the user
    never signed in, so there is no stored preference), so prefers-color-scheme is the honest
    signal — but [data-theme] on the root wins in both directions, should the host ever set one.
    Hence the media query is guarded with :not([data-theme="light"]): without it an explicit
    light theme would silently lose to a dark operating system.
*/

.amx-auth-page {
    /* Colour primitives — DESIGN_LANGUAGE.md §2 (light reference). */
    --dbd-bg: #fafafa;
    --dbd-surface: #ffffff;
    --dbd-fg: #18181b;
    --dbd-muted: #71717a;
    --dbd-border: #e4e4e7;
    --dbd-border-strong: #d4d4d8;
    --dbd-subtle: #f4f4f5;
    --dbd-accent: #15803d;
    --dbd-accent-bright: #16a34a;
    --dbd-accent-strong: #166534;
    --dbd-accent-soft: #f0fdf4;

    /* Semantic aliases — components read these, never the hex. */
    --text-primary: var(--dbd-fg);
    --text-secondary: #52525b;
    --text-muted: var(--dbd-muted);
    --text-on-accent: #ffffff;
    --border-color: var(--dbd-border);
    /* A border that is the sole boundary of an interactive control needs 3:1 — a11y §2. */
    --border-interactive: #767d8c;

    /* A card sitting on a photograph is the one case the design language lets go deeper than
       --shadow-md: it is the modal depth (DESIGN_LANGUAGE.md §1), and no further. The photo
       runs at full strength, so the hairline alone leaves the card with no edge at all. */
    --shadow-float: 0 8px 24px rgba(0, 0, 0, .12);

    /* Vivid status colours are fill / icon / border only; the -text variants are the ones
       that clear 4.5:1 as body copy (ACCESSIBILITY_LANGUAGE.md §2). */
    --accent-danger: #ef4444;
    --accent-danger-text: #c4201f;
    --accent-warning: #f59e0b;
    --accent-warning-text: #a4490a;

    /* Spacing / radius / motion scales — DESIGN_LANGUAGE.md §4. */
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;

    /* Two shallow steps only — depth comes from borders, not drop shadows. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .06);

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* dvh keeps the card centred while a mobile browser's chrome collapses; the vh above is
       the fallback for engines that do not know it. */
    min-height: 100dvh;
    width: 100%;
    /* viewport-fit=cover is set in _Layout, so the notch/home indicator have to be paid for. */
    padding:
        calc(var(--space-8) + env(safe-area-inset-top))
        calc(var(--space-4) + env(safe-area-inset-right))
        calc(var(--space-8) + env(safe-area-inset-bottom))
        calc(var(--space-4) + env(safe-area-inset-left));
    background-color: var(--dbd-bg);
    color: var(--text-primary);
    /* Native chrome - the checkbox, scrollbars, autofill fill - follows the page's own theme
       rather than the operating system's, which is what the tokens above have just decided. */
    color-scheme: light;
    font-size: .875rem;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* The account's own background photo, where one is configured. The page sets
   --amx-backdrop to the image URL; everything else lives here.

   The photo is shown as supplied, with nothing laid over it. The fallback costs nothing: with
   no photo the custom property resolves to `none` and the background-color set above - the flat
   ground - is what shows, so an account with no image configured needs no special case. No text
   contrast depends on the photo either way, because the card is opaque. */
.amx-auth-page.has-backdrop {
    background-image: var(--amx-backdrop, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Not `fixed`: mobile Safari repaints it a frame behind as the URL bar collapses. */
    background-attachment: scroll;
}

/* Over a photograph a hairline no longer separates the card from its ground - against a light
   or busy area --dbd-border disappears entirely - so the edge is carried by the shadow instead,
   at the modal depth the design language allows and not beyond. */
.amx-auth-page.has-backdrop .amx-auth-card {
    box-shadow: var(--shadow-float);
}

.amx-auth-page *,
.amx-auth-page *::before,
.amx-auth-page *::after {
    box-sizing: border-box;
}

/* ===== Card ===== */

.amx-auth-card {
    width: 100%;
    max-width: 420px;
    padding: var(--space-8) var(--space-6);
    background-color: var(--dbd-surface);
    border: 1px solid var(--dbd-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

/* ===== Status badge =====
   A quiet disc, not a loud red fill: the heading carries the message, the colour only
   reinforces it (a11y §2 — colour is never the only signal). The stroke colour clears 3:1
   against the disc, so it stays legible as a meaningful graphic. */

.amx-auth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-5);
    border-radius: 50%;
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border-strong);
    color: var(--text-muted);
}

.amx-auth-badge svg {
    width: 26px;
    height: 26px;
}

/* The glyph and its ring take the accessible -text variants, not the vivid fills: at 1.75px
   stroke on a --dbd-subtle disc the vivid amber lands near 2:1 and all but vanishes. */
.amx-auth-badge.is-danger {
    color: var(--accent-danger-text);
    border-color: var(--accent-danger-text);
}

.amx-auth-badge.is-warning {
    color: var(--accent-warning-text);
    border-color: var(--accent-warning-text);
}

.amx-auth-badge.is-accent {
    color: var(--dbd-accent);
    border-color: var(--dbd-accent);
}

/* ===== Copy ===== */

.amx-auth-title {
    margin: 0 0 var(--space-2);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.amx-auth-message {
    /* Deliberately narrow — a couple of readable lines beat one long line across the card. */
    max-width: 40ch;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: .875rem;
}

/* ===== Detail block =====
   The underlying reason, usually written for whoever supports the user rather than for the
   user. Kept, because it is what makes a support call short — but demoted below the plain
   explanation, and left-aligned because it is often a long, unwrapped identifier. */

.amx-auth-detail {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    border-left: 3px solid var(--accent-danger);
    border-radius: var(--radius-md);
    text-align: left;
}

.amx-auth-detail-label {
    display: block;
    margin-bottom: 2px;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

.amx-auth-detail-text {
    margin: 0;
    color: var(--text-primary);
    font-size: .8125rem;
    /* Reasons quote usernames and group names that have no break opportunities. */
    overflow-wrap: anywhere;
}

/* ===== Actions ===== */

.amx-auth-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.amx-auth-actions form {
    margin: 0;
}

.amx-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    /* 44px, not the app's 36px: these screens are only ever touched, never clicked. */
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), filter var(--transition-fast);
}

/* Flat accent fill — no gradient (DESIGN_LANGUAGE.md §1). */
.amx-auth-btn.is-primary {
    background-color: var(--dbd-accent);
    color: var(--text-on-accent);
}

.amx-auth-btn.is-primary:hover {
    filter: brightness(1.05);
}

.amx-auth-btn.is-ghost {
    background-color: var(--dbd-surface);
    border-color: var(--border-interactive);
    color: var(--text-primary);
}

.amx-auth-btn.is-ghost:hover {
    background-color: var(--dbd-subtle);
}

/* A soft accent ring, never a hard outline — but an outline as well, so it survives
   forced-colours mode where box-shadow is dropped. */
.amx-auth-btn:focus-visible {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .25);
}

/* ===== Footnote ===== */

.amx-auth-footnote {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--dbd-border);
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.45;
}

/* ===== Waiting state ===== */

.amx-auth-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto var(--space-4);
    border: 2px solid var(--dbd-border-strong);
    border-top-color: var(--dbd-accent);
    border-radius: 50%;
    animation: amx-auth-spin 700ms linear infinite;
}

@keyframes amx-auth-spin {
    to { transform: rotate(360deg); }
}

/* ===== Dark mode =====
   Re-point the primitives only; every rule above reads tokens, so it themes for free.
   Values are the canonical dark set from DESIGN_LANGUAGE.md §6 — do not invent another navy. */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .amx-auth-page {
        color-scheme: dark;

        --dbd-bg: #0f1524;
        --dbd-surface: #111726;
        --dbd-fg: #e6e9f2;
        --dbd-muted: #98a2b8;
        --dbd-border: #202840;
        --dbd-border-strong: #2c3552;
        --dbd-subtle: #1a2136;
        --dbd-accent: #22c55e;
        --dbd-accent-bright: #4ade80;
        --dbd-accent-strong: #4ade80;
        --dbd-accent-soft: rgba(34, 197, 94, .12);

        --text-secondary: #98a2b8;
        --border-interactive: #66729a;
        --shadow-float: 0 8px 24px rgba(0, 0, 0, .45);

        /* On dark the vivid fills already clear 4.5:1, so text and fill converge. */
        --accent-danger: #f87171;
        --accent-danger-text: #f87171;
        --accent-warning: #f59e0b;
        --accent-warning-text: #f59e0b;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
    }

    :root:not([data-theme="light"]) .amx-auth-page .amx-auth-btn.is-primary {
        /* The accent is bright in dark mode, so its label has to go dark to stay readable. */
        color: #0f1524;
    }

    :root:not([data-theme="light"]) .amx-auth-page .amx-auth-btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .3);
    }
}

[data-theme="dark"] .amx-auth-page {
    color-scheme: dark;

    --dbd-bg: #0f1524;
    --dbd-surface: #111726;
    --dbd-fg: #e6e9f2;
    --dbd-muted: #98a2b8;
    --dbd-border: #202840;
    --dbd-border-strong: #2c3552;
    --dbd-subtle: #1a2136;
    --dbd-accent: #22c55e;
    --dbd-accent-bright: #4ade80;
    --dbd-accent-strong: #4ade80;
    --dbd-accent-soft: rgba(34, 197, 94, .12);

    --text-secondary: #98a2b8;
    --border-interactive: #66729a;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, .45);

    --accent-danger: #f87171;
    --accent-danger-text: #f87171;
    --accent-warning: #f59e0b;
    --accent-warning-text: #f59e0b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .amx-auth-page .amx-auth-btn.is-primary {
    color: #0f1524;
}

/* ===== User preferences ===== */

@media (prefers-contrast: more) {
    .amx-auth-page .amx-auth-card {
        border-width: 2px;
        border-color: var(--text-primary);
    }

    .amx-auth-page .amx-auth-btn.is-ghost {
        border-color: var(--text-primary);
    }
}

@media (prefers-reduced-motion: reduce) {
    .amx-auth-page *,
    .amx-auth-page *::before,
    .amx-auth-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ===== Sign-in form =====
   Only the login screen uses these. Kept in the same file, and on the same tokens, so the
   screen a user succeeds on and the screens they fail on are visibly one thing. */

.amx-auth-card.is-form {
    text-align: left;
}

/* The organisation's own logo, when one is configured. Height-capped rather than width-capped:
   these are supplied by customers at every aspect ratio. */
.amx-auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin-bottom: var(--space-6);
}

.amx-auth-logo img {
    max-width: 100%;
    max-height: 88px;
    width: auto;
    height: auto;
}

.amx-auth-head {
    margin-bottom: var(--space-6);
    text-align: center;
}

.amx-auth-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: .875rem;
}

.amx-auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.amx-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A quiet caption, not a heading — DESIGN_LANGUAGE.md §3. */
.amx-auth-label {
    margin: 0;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-secondary);
}

.amx-auth-input {
    width: 100%;
    /* 44px for a touch target, and a 16px font so iOS does not zoom the page on focus. */
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--dbd-surface);
    /* The box is the only thing marking the field out, so the border has to clear 3:1 as a UI
       component (WCAG 1.4.11) - --dbd-border-strong is a decorative hairline and does not. */
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.amx-auth-input::placeholder {
    color: var(--text-muted);
}

/* A soft accent ring, never a hard outline. */
.amx-auth-input:focus {
    outline: none;
    border-color: var(--dbd-accent);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}

.amx-auth-input[aria-invalid="true"] {
    border-color: var(--accent-danger);
}

/* Errors are text, tied to their field — never colour alone (a11y §5). */
.amx-auth-field-error:empty {
    display: none;
}

.amx-auth-field-error {
    margin: 0;
    color: var(--accent-danger-text);
    font-size: .8125rem;
}

.amx-auth-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* The whole row is the label, so the target comfortably clears 24x24. */
    min-height: 32px;
    color: var(--text-primary);
    font-size: .875rem;
    cursor: pointer;
}

.amx-auth-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--dbd-accent);
    flex: 0 0 auto;
}

.amx-auth-check input:focus-visible {
    outline: 2px solid var(--dbd-accent);
    outline-offset: 2px;
}

/* Whole-form errors ("Invalid login attempt.", the lockout notice). Shares the detail block's
   language so a failure reads the same here as it does on the failure screens. The tag helper
   emits an empty list when the model is valid, hence the -valid guard. */
.amx-auth-alert {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--dbd-subtle);
    border: 1px solid var(--dbd-border);
    border-left: 3px solid var(--accent-danger);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: .8125rem;
}

.amx-auth-alert.validation-summary-valid {
    display: none;
}

.amx-auth-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.amx-auth-alert li + li {
    margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .amx-auth-page .amx-auth-input:focus {
        box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
    }
}

[data-theme="dark"] .amx-auth-page .amx-auth-input:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}