/* ---------------------------------------------------------------------------
   Member auth screens.

   Narrow single column on purpose. A form is a sequence, and a sequence reads
   fastest in one column — multi-column forms measurably slow people down and
   invite skipped fields.

   Same fallback convention as the other sheets.
   --------------------------------------------------------------------------- */

.au {
    max-width: 26rem;
    margin: 0 auto;
    padding: 4rem 1.5rem 6rem;
}

.au-head {
    margin-bottom: 2rem;
}

.au-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ub-ink-muted);
    margin: 0 0 0.75rem;
}

.au-title {
    font-family: var(--ub-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.15;
    font-weight: 600;
    margin: 0;
    color: var(--ub-ink);
}

.au-intro {
    margin: 1rem 0 0;
    color: var(--ub-ink-muted);
    line-height: 1.6;
}

/* Fields ------------------------------------------------------------------ */

.au-field {
    margin-bottom: 1.25rem;
}

.au-label {
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--ub-ink-muted);
    margin-bottom: 0.375rem;
}

.au-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    /* 1rem, not smaller. iOS Safari zooms the viewport on focus for any input under
       16px, and the zoom doesn't reverse — which reads as the page breaking. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--ub-ink);
    background: var(--ub-paper-sunken);
    border: var(--ub-rule); /* input gets the lighter --ub-line, buttons/notes below get --ub-line-strong — a real distinction the original fallback values already made (#2a2a2a vs #3a3a3a), preserved here */
    border-radius: 0;
}

.au-input:focus {
    outline: none;
    border-color: var(--ub-accent-500);
    box-shadow: var(--ub-focus-ring);
}

/* Chrome/Safari force their own background on an autofilled input via the internal
   :-webkit-autofill pseudo-class — background-color alone can't override it, only an inset
   box-shadow large enough to visually cover it can. Without this, an autofilled field ignores
   --ub-paper-sunken entirely and shows the browser's own pale blue/yellow fill regardless of
   theme (confirmed via screenshot: every OTHER token-mapped element rendered correctly in
   sepia, only the two autofilled fields didn't — the tell that this is a browser override,
   not a broken token mapping).
   -webkit-text-fill-color is the autofill-specific equivalent of `color` — plain `color` gets
   overridden by the browser the same way `background-color` does. */
.au-input:-webkit-autofill,
.au-input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--ub-paper-sunken) inset;
    -webkit-text-fill-color: var(--ub-ink);
    caret-color: var(--ub-ink);
}
/* Layered (not replaced) with the real focus ring, comma-separated, so an autofilled field
   that gets focused shows BOTH the accent ring around the outside and the theme-correct fill
   inside — otherwise this rule's higher specificity would silently drop the focus ring that
   plain .au-input:focus provides for a manually-typed field. */
.au-input:-webkit-autofill:focus {
    -webkit-box-shadow: var(--ub-focus-ring), 0 0 0 1000px var(--ub-paper-sunken) inset;
    -webkit-text-fill-color: var(--ub-ink);
    border-color: var(--ub-accent-500);
    caret-color: var(--ub-ink);
}

/* Show/hide password ------------------------------------------------------ */

.au-input-group {
    position: relative;
}
/* Room for the toggle button so typed text never runs under it. */
.au-input-group .au-input {
    padding-right: 2.75rem;
}

.au-toggle-visibility {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--ub-radius-sm);
    color: var(--ub-ink-muted);
    cursor: pointer;
    transition: color var(--ub-duration-fast) var(--ub-ease),
                background var(--ub-duration-fast) var(--ub-ease);
}
.au-toggle-visibility:hover {
    color: var(--ub-ink);
    background: var(--ub-paper-raised);
}
.au-toggle-visibility svg {
    width: 1.125rem;
    height: 1.125rem;
}
/* The native `hidden` attribute doesn't reliably apply display:none to <svg> elements in
   every browser — SVG has its own rendering model, and not every browser's UA stylesheet
   extends the generic [hidden] rule to SVG root elements the way it does for ordinary HTML
   elements. Without this, both icons render at once instead of only the active one.
   Explicit, not relying on the browser to get this right on its own. */
.au-toggle-visibility svg[hidden] {
    display: none;
}
/* Same focus-visible treatment already established for every other interactive element on
   this page (.au a:focus-visible, .au button:focus-visible already covers this button by
   selector, since it's a real <button> — no separate rule needed here). */

.au-hint {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--ub-ink-muted);
}

.au-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    color: var(--ub-ink-muted);
}

/* Errors ------------------------------------------------------------------ */

.au-errors {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--ub-danger-500);
    background: var(--ub-paper-sunken);
    color: var(--ub-ink);
    font-size: 0.875rem;
}

.au-errors ul {
    margin: 0;
    padding-left: 1rem;
}

.au-errors ul:empty,
.au-errors:has(ul:empty) {
    display: none;
}

.au-error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ub-danger-700);
}

/* Error colour is paired with placement — the message sits directly under its
   own field, so the association survives for anyone who can't see the red. */

.au-note {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--ub-line-strong);
    background: var(--ub-paper-sunken);
    color: var(--ub-ink-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.au-note-good {
    border-left-color: var(--ub-accent-500);
    color: var(--ub-ink);
}

.au-note a {
    color: var(--ub-ink);
}

/* Buttons ----------------------------------------------------------------- */

.au-btn {
    display: inline-block;
    padding: 0.625rem 1.125rem;
    font-family: inherit;
    font-size: var(--ub-text-base); /* was 0.875rem — matches .ub-plan-card__cta's size on Plans */
    text-decoration: none;
    color: var(--ub-ink);
    background: transparent;
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-sm); /* was 0 — the flat, sharp-cornered look was the one thing making this button family read as a different component from Load More / Plans' rounded buttons */
    cursor: pointer;
    transition: background var(--ub-duration-fast) var(--ub-ease),
                border-color var(--ub-duration-fast) var(--ub-ease); /* Load More / Plans buttons both animate on state change; this had none */
}

.au-btn:hover {
    border-color: var(--ub-ink);
}

.au-btn-primary {
    width: auto;
    background: var(--ub-accent-500);
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
    font-weight: 600; /* was 500 — matches .ub-plan-card__cta */
}

/* Previously missing entirely — without its own :hover, a primary button falls back to the
   base .au-btn:hover above (border-color: var(--ub-ink)), which darkens the BORDER to ink
   while the BACKGROUND stays accent-colored — a mismatched, two-different-colors hover state.
   This is the same accent-500 -> accent-700 hover .ub-plan-card__cta already uses. */
.au-btn-primary:hover {
    background: var(--ub-accent-700);
    border-color: var(--ub-accent-700);
}

.au-form .au-btn-primary {
    width: 100%;
    padding: 0.75rem 1.125rem;
}

.au-alt {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--ub-ink-muted);
}

.au-alt a {
    color: var(--ub-ink);
    text-decoration-color: var(--ub-accent-500);
    text-underline-offset: 0.2em;
}

/* Header login status ----------------------------------------------------- */

.ls-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ls-status-name {
    font-size: 0.875rem;
    color: var(--ub-ink);
    text-decoration: none;
}

.ls-status-name:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ls-status-form {
    display: inline;
}

.ls-status-out {
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--ub-ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.ls-status-out:hover {
    color: var(--ub-ink);
}

/* Quality floor ----------------------------------------------------------- */

.au a:focus-visible,
.au button:focus-visible,
.ls-status a:focus-visible,
.ls-status button:focus-visible {
    outline: 2px solid var(--ub-accent-500);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .au {
        padding: 2.5rem 1.125rem 4rem;
    }
}

/* Textarea -----------------------------------------------------------------
   .au-input covers text/email/password inputs; a <textarea> needs the same
   look plus resize/min-height, which .au-input alone doesn't set. */

.au-textarea {
    resize: vertical;
    min-height: 7rem;
    font-family: inherit;
}

/* Password strength notice (Register.cshtml) -------------------------------
   Reuses .au-note/.au-note-good's existing left-border-accent language rather
   than inventing a new visual vocabulary for "this requirement is met." */

.au-password-requirement {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--ub-ink-muted);
}

.au-password-requirement__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.au-password-requirement--met {
    color: var(--ub-ink);
}

.au-password-requirement--met .au-password-requirement__icon {
    color: var(--ub-accent-500);
}

/* Contact form toasts (ContactSurfaceController) ----------------------------
   Same visual language and animation Account/Default.cshtml already
   established inline for its own TempData-driven toasts (.ub-toast /
   .ub-toast-container) -- pulled out here, into a globally-loaded sheet,
   because contact-form.js needs to create these dynamically on the client
   (an AJAX response has no server-rendered TempData markup to hook), not
   just render server-side on page load like Account's do. The --error
   variant is new: Account's own toasts are all success-flavored (its error
   states go through the separate .au-errors/.ub-alert mechanism instead),
   but an AJAX-submitted contact form needs an error-flavored toast too, not
   a full-page reload to show one. */

.ub-toast-container {
    position: fixed;
    bottom: var(--ub-space-6);
    right: var(--ub-space-6);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2);
    pointer-events: none;
}

.ub-toast {
    background: var(--ub-paper-raised);
    color: var(--ub-ink);
    border: 1px solid var(--ub-line);
    border-left: 4px solid var(--ub-accent-500);
    padding: var(--ub-space-3) var(--ub-space-4);
    border-radius: var(--ub-radius-sm);
    box-shadow: var(--ub-shadow-float);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    display: flex;
    align-items: center;
    gap: var(--ub-space-3);
    animation: ubToastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards, ubToastOut 0.4s 3s forwards;
}

.ub-toast i {
    color: var(--ub-accent-500);
    font-size: 1.1em;
}

.ub-toast--error {
    border-left-color: var(--ub-danger-500, #e5484d);
}

.ub-toast--error i {
    color: var(--ub-danger-500, #e5484d);
}

@keyframes ubToastIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes ubToastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
        visibility: hidden;
        pointer-events: none;
    }
}