/*
 * The signed-out pages (templates/accounts/*): sign in, sign up, password reset, set password.
 *
 * The theme's Tailwind bundle is prebuilt, so only the utility classes it already contains exist. Everything these
 * pages add on top of the theme's own login/register/forgot-password markup - toasts, inline errors, live checks,
 * the password checklist, the review card - is styled here, from the theme's own tokens so it follows brand.css
 * and dark mode.
 */

/* ---------- Card ---------- */
/* Softer corners than the theme's 5px on the signed-out card. */
.auth-card-round { border-radius: 14px; }

/* A lighter page behind the signed-out card: mostly white, with a touch of the theme's grey so the white card still stands out.
   Mixed from the theme's tokens, so dark mode gets the matching dark shade. */
.auth-page-soft { background: color-mix(in srgb, var(--surface-sunken) 35%, var(--surface-base)); }

/* ---------- Logo ---------- */
/* The artwork is white, so it would vanish on this page. It is used as a mask instead and filled with the
   blue of the Eko Atlantic wordmark; the box keeps the artwork's own 4015:686 shape. */
.auth-logo {
    display: block;
    height: 36px;                 /* under the theme's .login-logo (50px) */
    max-width: 100%;
    aspect-ratio: 4015 / 686;
    background-color: #29abe2;
    -webkit-mask: var(--auth-logo) center / contain no-repeat;
    mask: var(--auth-logo) center / contain no-repeat;
}

/* In the blue panel the white artwork shows as it is; same height as the one above. */
.auth-panel-logo { display: block; height: 36px; width: auto; }

/* ---------- Fields ---------- */
.auth-body input.is-invalid,
.auth-body select.is-invalid,
.auth-body .is-invalid .choices__inner {
    border-color: var(--color-danger-500) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-500) 14%, transparent);
}
.auth-body input.is-valid { border-color: var(--color-success-500) !important; }

.auth-field-error {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .4rem;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--color-danger-600);
}
.auth-field-error::before { content: "\2022"; font-weight: 700; }
.auth-field-error.hidden { display: none; }

.auth-field-note {
    margin-top: .4rem;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-tertiary);
}
.auth-field-note.hidden { display: none; }
.auth-field-note.is-success { color: var(--color-success-600); }
.auth-field-note.is-danger { color: var(--color-danger-600); }
.auth-field-note a { font-weight: 600; color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; }

.auth-capslock {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--color-warning-50);
    color: var(--color-warning-700);
}
.auth-capslock.hidden { display: none; }

/* Right-hand status icon on fields with a live check (email, phone, plot). */
.auth-live-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: .75rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    font-size: 14px;
    pointer-events: none;
}
.auth-live-icon[data-state="checking"] { color: var(--text-tertiary); }
.auth-live-icon[data-state="checking"] i { animation: auth-spin .8s linear infinite; }
.auth-live-icon[data-state="ok"] { color: var(--color-success-600); }
.auth-live-icon[data-state="taken"] { color: var(--color-danger-600); }

/* The little (i) beside "Keep me signed in". */
.auth-hint { position: relative; display: inline-grid; place-items: center; color: var(--text-tertiary); cursor: help; }
.auth-hint::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    width: 240px;
    padding: .55rem .7rem;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    background: var(--color-neutral-900, #1b2024);
    color: #fff;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 20;
}
.auth-hint:hover::after,
.auth-hint:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Password checklist and strength meter ---------- */
.auth-rule {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 11.5px;
    color: var(--text-tertiary);
    transition: color .15s;
}
.auth-rule i { width: 11px; text-align: center; }
.auth-rule.is-met { color: var(--color-success-600); }
.auth-rule.is-missed { color: var(--color-danger-600); }

.auth-strength-label { min-width: 3.75rem; text-align: end; transition: color .15s; }
[data-strength-bar] { transition: background-color .2s; }

/* ---------- Alerts (inline, above a form) ---------- */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem;
    border-radius: 10px;
    border: 1px solid;
}
.auth-alert.is-danger { background: var(--color-danger-50); border-color: var(--color-danger-200); color: var(--color-danger-700); }
.auth-alert.is-warning { background: var(--color-warning-50); border-color: var(--color-warning-200); color: var(--color-warning-700); }
.auth-alert.is-info { background: var(--color-primary-50); border-color: var(--color-primary-200); color: var(--color-primary-800); }

/* ---------- Toasts ---------- */
.auth-toasts {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}
.auth-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .75rem .75rem .8rem .8rem;
    border-radius: 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
    overflow: hidden;
    pointer-events: auto;
    animation: auth-toast-in .35s cubic-bezier(.16, 1, .3, 1) both;
}
.auth-toast.is-leaving { animation: auth-toast-out .25s ease-in both; }
.auth-toast-icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; flex-shrink: 0; }
.auth-toast.is-success .auth-toast-icon { background: var(--color-success-100); color: var(--color-success-700); }
.auth-toast.is-info .auth-toast-icon { background: var(--color-primary-100); color: var(--color-primary-700); }
.auth-toast.is-warning .auth-toast-icon { background: var(--color-warning-100); color: var(--color-warning-700); }
.auth-toast.is-danger .auth-toast-icon { background: var(--color-danger-100); color: var(--color-danger-700); }
.auth-toast p { padding-top: .2rem; }
.auth-toast-close { color: var(--text-tertiary); padding: .2rem; border-radius: 6px; }
.auth-toast-close:hover { background: var(--surface-sunken); color: var(--text-primary); }
/* The shrinking bar shows how long an auto-hiding toast has left; hovering pauses it. */
.auth-toast[data-autohide]::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: currentColor;
    opacity: .18;
    transform-origin: left;
    animation: auth-toast-timer var(--toast-duration, 6s) linear forwards;
}
.auth-toast[data-autohide]:hover::after { animation-play-state: paused; }
.auth-toast.is-success[data-autohide]::after { background: var(--color-success-500); opacity: .6; }
.auth-toast.is-info[data-autohide]::after { background: var(--color-primary-500); opacity: .6; }
.auth-toast.is-warning[data-autohide]::after { background: var(--color-warning-500); opacity: .6; }

/* ---------- Sign-up ---------- */
.auth-actions { flex-direction: row-reverse; }

.auth-review { border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
.auth-review-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; }
.auth-review-row + .auth-review-row { border-top: 1px dashed var(--border-subtle); }
.auth-review-edit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-primary-600);
    flex-shrink: 0;
}
.auth-review-edit:hover { background: var(--color-primary-50); }

.auth-select .choices { margin-bottom: 0; }
/* A dropdown beside a text input is the input's height (42px: py-2.5 around a 20px line, plus the border)
   and has its corners. The theme pins every dropdown at 37.6px with !important inside its "components"
   layer, and an !important in a layer beats one outside any layer - so this has to sit in an earlier
   layer ("base") to win; a plain !important rule here is ignored. */
@layer base {
    .auth-select .choices .choices__inner {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        border-radius: 0.5rem !important;
    }
}
.auth-select select { width: 100%; }

/* The panel cards sit on white whatever the theme, so their text stays dark in dark mode. */
.auth-panel-ink { color: #1b2024; }
.auth-panel-card.is-current { outline: 2px solid color-mix(in srgb, #fff 70%, transparent); outline-offset: 2px; }
.auth-ring { transition: stroke-dasharray .6s cubic-bezier(.16, 1, .3, 1); }

.auth-panel-mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .16);
    color: #fff;
    box-shadow: 0 0 0 2px rgb(255 255 255 / .3);
}

/* ---------- "What happens next" ---------- */
.auth-timeline { position: relative; display: grid; gap: .9rem; }
.auth-timeline li { position: relative; display: flex; gap: .7rem; }
.auth-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    bottom: -.9rem;
    inset-inline-start: .6875rem;
    width: 2px;
    background: var(--border-subtle);
}
.auth-timeline li.is-done:not(:last-child)::before { background: var(--color-success-500); }
.auth-timeline-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: .05rem;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--surface-sunken);
    color: var(--text-tertiary);
    box-shadow: 0 0 0 1px var(--border-subtle);
}
.auth-timeline li.is-done .auth-timeline-dot { background: var(--color-success-500); color: #fff; box-shadow: none; }
.auth-timeline li.is-current .auth-timeline-dot {
    background: var(--color-primary-600);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500) 22%, transparent);
    animation: auth-pulse 2s ease-in-out infinite;
}

/* ---------- Privacy / Terms modals ---------- */
.auth-policy-dialog { max-width: 44rem; display: flex; flex-direction: column; max-height: min(86vh, 820px); }
.auth-policy-progress { height: 2px; background: var(--border-subtle); }
.auth-policy-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500));
    transition: width .1s linear;
}
.auth-policy-body { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; overscroll-behavior: contain; }
.auth-policy-footer { border-top: 1px solid var(--border-subtle); }

/* The policy partials are plain HTML; Tailwind's reset strips headings and lists, so give them back. */
.policy-prose { font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.policy-prose > * + * { margin-top: .75rem; }
.policy-prose h1, .policy-prose h2, .policy-prose h3, .policy-prose h4, .policy-prose h5, .policy-prose h6 {
    margin-top: 1.25rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-primary);
}
.policy-prose ul, .policy-prose ol { padding-inline-start: 1.25rem; }
.policy-prose ul { list-style: disc; }
.policy-prose ol { list-style: decimal; }
.policy-prose li + li { margin-top: .35rem; }
.policy-prose li p { margin: 0; }
.policy-prose a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: 2px; }
.policy-prose strong { color: var(--text-primary); font-weight: 600; }

/* ---------- Buttons while a form is sending ---------- */
.auth-body .btn.is-busy { pointer-events: none; opacity: .85; }
.auth-spinner {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    animation: auth-spin .7s linear infinite;
}

.auth-pop { animation: auth-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ---------- Motion ---------- */
@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes auth-toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes auth-toast-timer { to { transform: scaleX(0); } }
@keyframes auth-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes auth-pulse {
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary-500) 10%, transparent); }
}

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

/* ---------- Gaps in the prebuilt bundle ---------- */
/* The theme's login.html uses this for the ticks on the brand panel, but the build never generated it. */
.u-color-color-success-400 { color: var(--color-success-400, #4ade80); }
.auth-link-btn:disabled { opacity: .5; cursor: not-allowed; }
.auth-body .choices__inner:has(select.is-invalid) {
    border-color: var(--color-danger-500) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-500) 14%, transparent);
}