/* ============================================================
   auth.css — modern split-screen layout for public/auth pages
   (login, register, forgot/reset password, verification, home).
   Depends on tokens.css (pulled in via ok-ui.css @import).
   Scoped under .auth-body / .auth so it never touches the app shell.
   ============================================================ */

.auth-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ok-font-sans);
    color: var(--ok-text);
    background: var(--ok-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Two-pane shell */
.auth {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* ---------- Left brand panel ---------- */
.auth-aside {
    position: relative;
    flex: 1 1 46%;
    max-width: 46%;
    overflow: hidden;
    color: var(--ok-text-on-dark);
    background: var(--main-bg-color);
    background-image:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--primary), transparent 35%) 0%, transparent 45%),
        radial-gradient(100% 100% at 100% 100%, color-mix(in srgb, var(--primary), black 10%) 0%, transparent 55%),
        linear-gradient(150deg, var(--main-bg-color-light) 0%, var(--main-bg-color) 45%, var(--main-bg-color-dark) 100%);
    display: flex;
}
/* floating soft blobs for depth */
.auth-aside::before,
.auth-aside::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(6px);
    opacity: .42;
    pointer-events: none;
}
.auth-aside::before {
    width: 27rem; height: 27rem;
    right: -8rem; top: -7rem;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary), white 22%), transparent 70%);
}
.auth-aside::after {
    width: 21rem; height: 21rem;
    left: -6rem; bottom: -7rem;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--primary), transparent 5%), transparent 70%);
    opacity: .3;
}
.auth-aside-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    max-width: 30rem;
    margin: auto;
    padding: 3.5rem;
}
.auth-aside-logo { display: inline-flex; }
.auth-aside-logo .auth-logo-img { height: 2.6rem; width: auto; }
.auth-aside-title {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 1rem;
    color: #fff;
}
.auth-aside-text {
    font-size: var(--ok-text-lg);
    line-height: 1.5;
    color: var(--ok-text-on-dark-muted);
    margin: 0;
}
.auth-aside-points { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.auth-aside-points li {
    display: flex; align-items: flex-start; gap: .7rem;
    font-size: var(--ok-text-md);
    color: var(--ok-text-on-dark);
}
.auth-aside-points li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.35rem; height: 1.35rem; margin-top: .1rem;
    border-radius: 50%;
    background:
        color-mix(in srgb, var(--primary), white 10%)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
        center / .8rem no-repeat;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary), transparent 80%);
}
.auth-aside-foot { font-size: var(--ok-text-sm); color: var(--ok-text-on-dark-muted); }

/* ---------- Right form panel ---------- */
.auth-main {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: var(--ok-surface);
}
.auth-card {
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
}
.auth-card.auth-card--wide { max-width: 30rem; }

/* logo shown above the form (mobile, and as anchor on form side) */
.auth-brandmark { display: none; margin-bottom: 1.75rem; }
.auth-brandmark img.logo, .auth-brandmark img { height: 2.2rem; width: auto; }

/* small uppercase editorial eyebrow above the title */
.auth-eyebrow {
    font-size: var(--ok-fs-xs);
    font-weight: var(--ok-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ok-tracking-eyebrow);
    color: var(--ok-accent-600);
    margin: 0 0 .6rem;
}
.auth-title {
    font-size: clamp(1.6rem, 2.4vw, 1.95rem);
    font-weight: var(--ok-fw-bold);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 .5rem;
    color: var(--ok-ink);
}
.auth-subtitle {
    font-size: var(--ok-text-md);
    color: var(--ok-text-muted);
    margin: 0 0 1.9rem;
    line-height: 1.55;
}

/* inline link used inside form rows (e.g. "Forgot password?") */
.auth-inline-link {
    font-size: var(--ok-text-sm);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.auth-inline-link:hover { color: var(--primary-dark); text-decoration: underline; }

/* form */
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-row { display: flex; gap: 1rem; }
.auth-row > .auth-group { flex: 1 1 0; min-width: 0; }
.auth-group { display: flex; flex-direction: column; gap: .4rem; }
.auth-group > label {
    font-size: var(--ok-text-sm);
    font-weight: 600;
    color: var(--ok-text);
    margin: 0;
}

/* inputs — override the bootstrap/sb-admin pill look inside auth */
.auth .form-control,
.auth input[type="text"],
.auth input[type="email"],
.auth input[type="password"] {
    width: 100%;
    height: auto;
    padding: .7rem .9rem;
    font-size: var(--ok-text-md);
    line-height: 1.3;
    color: var(--ok-text);
    background: var(--ok-surface);
    border: 1px solid var(--ok-border-strong);
    border-radius: var(--ok-radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth .form-control::placeholder { color: var(--ok-text-subtle); }
.auth .form-control:focus,
.auth input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem var(--primary-with-alpha);
}

/* remember-me / inline checkbox row */
.auth-check { display: flex; align-items: center; gap: .5rem; font-size: var(--ok-text-sm); color: var(--ok-text-muted); }
.auth-check input { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0; }
.auth-check label { margin: 0; }
.auth-formrow {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: -.2rem;
}

/* buttons */
.auth .btn,
.auth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%;
    padding: .75rem 1rem;
    font-size: var(--ok-text-md);
    font-weight: 600;
    border-radius: var(--ok-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.auth .btn:active, .auth-btn:active { transform: translateY(1px); }
.auth .btn-primary {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(9, 30, 66, .14);
}
.auth .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: var(--ok-shadow-sm);
}
.auth .btn-primary:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--primary-with-alpha);
}
/* The registration submit is disabled by registration.js until the form is
   valid; keep it a confident solid teal (not a washed-out pale-teal that reads
   as broken). It turns interactive the moment the form validates. */
.auth .btn-primary:disabled,
.auth .btn-primary.disabled {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    opacity: 1;
    box-shadow: 0 1px 2px rgba(9, 30, 66, .14);
    cursor: not-allowed;
}

/* social / secondary providers */
.auth .btn-google, .auth .btn-facebook, .auth .btn-secondary, .auth-btn--ghost {
    color: var(--ok-text);
    background: var(--ok-surface);
    border: 1px solid var(--ok-border-strong);
    margin-top: .65rem;
    text-decoration: none;
}
.auth .btn-google:hover, .auth .btn-facebook:hover, .auth-btn--ghost:hover {
    background: var(--ok-surface-2);
    border-color: var(--ok-text-subtle);
    text-decoration: none;
}

/* divider with centered label */
.auth-divider {
    display: flex; align-items: center; gap: .9rem;
    margin: 1.5rem 0 .25rem;
    color: var(--ok-text-subtle);
    font-size: var(--ok-text-xs); text-transform: uppercase; letter-spacing: .06em;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--ok-border);
}

/* footer links */
.auth-links {
    margin-top: 1.5rem;
    text-align: center;
    font-size: var(--ok-text-sm);
    color: var(--ok-text-muted);
    display: flex; flex-direction: column; gap: .5rem;
}
.auth-links a { color: var(--primary); font-weight: 600; }
.auth-links a:hover { color: var(--primary-dark); }

/* status / alert messages */
.auth-alert {
    padding: .7rem .9rem;
    border-radius: var(--ok-radius-sm);
    font-size: var(--ok-text-sm);
    line-height: 1.4;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.auth-alert--error   { color: var(--ok-err); background: var(--ok-err-050); border-color: color-mix(in srgb, var(--ok-err), transparent 62%); }
.auth-alert--success { color: var(--ok-ok);  background: var(--ok-ok-050);  border-color: color-mix(in srgb, var(--ok-ok), transparent 62%); }
.auth-alert--info    { color: var(--ok-text-muted); background: var(--ok-surface-2); border-color: var(--ok-border); }

/* small inline note under a control (e.g. WIP provider warning) */
.auth-note {
    display: block;
    margin-top: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--ok-radius-sm);
    font-size: var(--ok-text-xs);
    line-height: 1.4;
    border: 1px solid transparent;
}
.auth-note--warn {
    color: var(--ok-warn);
    background: var(--ok-warn-050);
    border-color: color-mix(in srgb, var(--ok-warn), transparent 68%);
}

/* inline validation hints from registration.js (#pass-match-error etc.) */
.auth .field-error, .auth #pass-match-error, .auth #pass-length-error, .auth .text-error {
    font-size: var(--ok-text-sm);
    color: var(--ok-err);
}

/* big confirmation / status screens (thank-you, verification) */
.auth-status { text-align: center; }
.auth-status .auth-status-icon {
    width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 1.6rem;
}
.auth-status-icon--ok   { color: var(--ok-ok);   background: var(--ok-ok-050); }
.auth-status-icon--warn { color: var(--ok-warn); background: var(--ok-warn-050); }
.auth-status-icon--err  { color: var(--ok-err);  background: var(--ok-err-050); }
.auth-status .auth-title { margin-bottom: .6rem; }
.auth-status p { color: var(--ok-text-muted); line-height: 1.55; }

/* ---------- Setup wizard: stepper + summary ---------- */
.auth-stepper {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
}
.auth-step {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: var(--ok-text-xs);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ok-text-subtle);
    text-align: center;
}
/* connector line to the previous step (behind the dots) */
.auth-step:not(:first-child)::before {
    content: "";
    position: absolute;
    top: .8rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--ok-border-strong);
    z-index: 0;
}
.auth-step-dot {
    position: relative;
    z-index: 1;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ok-text-xs);
    font-weight: 700;
    line-height: 1;
    background: var(--ok-surface);
    color: var(--ok-text-subtle);
    border: 1.5px solid var(--ok-border-strong);
}
.auth-step.is-active { color: var(--ok-ink); }
.auth-step.is-active .auth-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--primary-with-alpha);
}
.auth-step.is-done { color: var(--ok-text-muted); }
.auth-step.is-done .auth-step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.auth-step.is-active:not(:first-child)::before,
.auth-step.is-done:not(:first-child)::before {
    background: var(--primary);
}

/* summary review block */
.auth-summary {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 0 1.9rem;
}
.auth-summary-term {
    font-size: var(--ok-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ok-tracking-eyebrow);
    font-weight: var(--ok-fw-bold);
    color: var(--ok-text-subtle);
    margin: 0 0 .35rem;
}
.auth-summary-val {
    font-size: var(--ok-text-md);
    font-weight: 600;
    color: var(--ok-text);
    margin: 0;
}
.auth-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.auth-summary-list li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--ok-text-md);
    font-weight: 600;
    color: var(--ok-text);
}
.auth-summary-list li::before {
    content: "";
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--primary);
}

/* ---------- Home / landing variant (single centered panel) ---------- */
.auth--center { justify-content: center; }
.auth--center .auth-main { max-width: 26rem; }
.home-actions { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.75rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .auth { flex-direction: column; }
    .auth-aside { display: none; }
    .auth-main { flex: 1 1 auto; padding-top: 3rem; }
    .auth-brandmark { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .auth .btn, .auth-btn, .auth .form-control { transition: none; }
}