/* ==========================================================================
   Cleverlybox — Auth redesign ("The Studio")
   Editorial split-screen for the customer auth pages (login, register,
   forgot, reset, sender result). Loaded AFTER auth.css so it overrides the
   shell while reusing the shared form/button/alert primitives.

   All brand colour is drawn from --color-teal (the active scheme primary) via
   color-mix, so the panel follows pink/blue/green/… automatically. The brand
   panel is intentionally ALWAYS dark so white text stays legible in every
   scheme and in both light and dark themes.
   ========================================================================== */

:root {
    --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    /* Always-dark brand canvas — deepened + tinted with the active scheme colour
       so it stays distinct from the (also-dark) form panel in dark mode. The
       tint resolves from --color-teal, so it follows the active scheme + theme. */
    --brand-ink:        #ffffff;
    --brand-ink-soft:   rgba(255, 255, 255, 0.66);
    --brand-ink-faint:  rgba(255, 255, 255, 0.40);
    --brand-base:       color-mix(in srgb, var(--color-teal) 15%, #06060a);
    --brand-base-2:     color-mix(in srgb, var(--color-teal) 32%, #101019);
    --brand-hairline:   rgba(255, 255, 255, 0.10);
}

/* ---- Kill the inherited centered-card shell ---- */
body { display: block; min-height: 100vh; background: var(--color-page-bg); }
body::before { display: none !important; }      /* remove dot-grid */
.auth-topbar { display: none; }                  /* old topbar — moved into panel */
.auth-main { display: block; padding: 0; }       /* neutralise old wrapper if present */

/* ==========================================================================
   Split shell
   ========================================================================== */

.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;          /* don't stretch columns to the taller side */
    min-height: 100vh;
    min-height: 100dvh;
}

@media (min-width: 1100px) {
    .auth-split { grid-template-columns: 46fr 54fr; }
}

/* ==========================================================================
   Brand canvas (left)
   ========================================================================== */

.auth-brand {
    position: sticky;            /* stay pinned while the form side scrolls */
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: clamp(var(--space-8), 4vw, var(--space-16));
    background: radial-gradient(120% 120% at 0% 0%, var(--brand-base-2), var(--brand-base) 62%);
    color: var(--brand-ink);
    /* subtle seam so the two dark sections stay separated in dark mode */
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    isolation: isolate;
}

/* One soft, slow scheme-coloured glow — calm, not glowy */
.auth-brand::before {
    content: '';
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(46% 50% at 22% 16%, color-mix(in srgb, var(--color-teal) 50%, transparent), transparent 70%),
        radial-gradient(40% 44% at 84% 90%, color-mix(in srgb, var(--color-teal) 28%, transparent), transparent 72%);
    filter: blur(34px);
    opacity: 0.95;
    animation: brand-drift 30s ease-in-out infinite alternate;
}

/* Subtle vignette for depth (no grid, no grain) */
.auth-brand::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(125% 100% at 50% -10%, transparent 55%, rgba(0, 0, 0, 0.38));
    pointer-events: none;
}

@keyframes brand-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

/* ---- Brand head: logo ---- */
.auth-brand-logo { display: flex; align-items: center; }
.auth-brand-logo img { height: 30px; width: auto; }
.auth-brand-logo .auth-brand-wordmark {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
}

/* ---- Brand body: copy + visual ---- */
.auth-brand-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    max-width: 30rem;
}

.auth-brand-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brand-ink-faint);
}

.auth-brand-headline {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 340;
    font-size: clamp(2.3rem, 3vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    color: var(--brand-ink);
    margin: 0;
}
.auth-brand-headline em {
    font-style: italic;
    font-weight: 420;
    /* gentle scheme tint, lifted toward white for a fine, legible accent */
    color: color-mix(in srgb, var(--color-teal) 42%, white 58%);
}

.auth-brand-sub {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--brand-ink-soft);
    margin: 0;
    max-width: 25rem;
}

/* ---- Quiet feature list (replaces the floating-card motif) ---- */
.auth-brand-features {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}
.auth-brand-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3-5);
    padding: var(--space-4) 0;
    font-size: var(--text-base);
    color: var(--brand-ink-soft);
    border-top: 1px solid var(--brand-hairline);
}
.auth-brand-features li:last-child { border-bottom: 1px solid var(--brand-hairline); }
.auth-brand-features .material-symbols-rounded {
    font-size: 20px;
    color: color-mix(in srgb, var(--color-teal) 50%, white 50%);
    font-variation-settings: 'wght' 300, 'FILL' 0;
}

/* ---- Brand footer ---- */
.auth-brand-foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--brand-ink-faint);
}
.auth-brand-foot .ab-dot {
    width: 5px; height: 5px; border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-teal) 70%, white 30%);
}

/* ==========================================================================
   Form panel (right)
   ========================================================================== */

.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-page-bg);
}

.auth-panel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-6);
}

.auth-panel-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) clamp(var(--space-5), 5vw, var(--space-12)) var(--space-10);
}

/* The form column (was a bordered card — now a clean column) */
.auth-card {
    width: 100%;
    max-width: 400px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Logo inside the form column — only shown on mobile (brand panel hidden) */
.auth-card-logo { display: none; justify-content: flex-start; margin-bottom: var(--space-6); }
.auth-card-logo img { height: 30px; }

/* ---- Title / subtitle: editorial, left-aligned ---- */
.auth-card-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    text-align: left;
    font-size: clamp(1.9rem, 2.4vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 1.14;
    color: var(--color-text);
    margin-bottom: var(--space-2-5);
}
.auth-card-subtitle {
    text-align: left;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-8);
}
.auth-card-subtitle a { color: var(--color-teal); text-decoration: none; font-weight: var(--weight-medium); }
.auth-card-subtitle a:hover { text-decoration: underline; }

/* ==========================================================================
   Form control refinements (build on auth.css primitives)
   ========================================================================== */

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

.form-input {
    height: 48px;
    font-size: var(--text-md);
    border-radius: var(--radius-input);
    border-color: var(--color-border-strong);
    background: var(--color-card-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.form-input:hover { border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border-strong)); }
.form-input:focus {
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-ring);
}
.password-wrapper .form-input { padding-right: var(--space-12); }
.password-toggle { height: 48px; }

/* Primary button — confident, with a subtle lift */
.btn-primary {
    height: 48px;
    margin-top: var(--space-1);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-input);
    box-shadow: none;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
.btn-primary:hover { background: var(--color-teal-hover); }
.btn-primary:active { opacity: 0.92; }

/* OAuth buttons */
.btn-oauth { height: 48px; border-radius: var(--radius-input); }
.btn-oauth-text { color: var(--color-text); font-weight: var(--weight-medium); }

/* Divider with centered label */
.auth-divider { margin: var(--space-7) 0; }

/* Remember / forgot row */
.auth-row-between { margin-bottom: var(--space-6); }
.auth-link-sm { font-weight: var(--weight-medium); }
.auth-link-sm:hover { color: var(--color-teal); }

/* ==========================================================================
   Footer
   ========================================================================== */
.auth-footer {
    text-align: left;
    padding: var(--space-5) clamp(var(--space-5), 5vw, var(--space-12)) var(--space-6);
    color: var(--color-text-disabled);
}

/* ==========================================================================
   Entrance choreography
   ========================================================================== */
@keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-brand-logo,
.auth-brand-eyebrow,
.auth-brand-headline,
.auth-brand-sub,
.auth-brand-features,
.auth-brand-foot,
.auth-card-title,
.auth-card-subtitle,
.auth-card .auth-alert,
.auth-card .form-group,
.auth-card .auth-row-between,
.auth-card .auth-captcha-wrap,
.auth-card .btn-primary,
.auth-card .auth-divider,
.auth-card .oauth-intro,
.auth-card .btn-oauth {
    opacity: 0;
    animation: auth-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.auth-brand-eyebrow   { animation-delay: 0.05s; }
.auth-brand-headline  { animation-delay: 0.13s; }
.auth-brand-sub       { animation-delay: 0.22s; }
.auth-brand-features  { animation-delay: 0.32s; }
.auth-brand-foot      { animation-delay: 0.42s; }

.auth-card-title      { animation-delay: 0.10s; }
.auth-card-subtitle   { animation-delay: 0.16s; }
.auth-card .form-group:nth-of-type(1) { animation-delay: 0.22s; }
.auth-card .form-group:nth-of-type(2) { animation-delay: 0.28s; }
.auth-card .auth-row-between          { animation-delay: 0.34s; }
.auth-card .btn-primary               { animation-delay: 0.40s; }
.auth-card .auth-divider              { animation-delay: 0.46s; }
.auth-card .oauth-intro,
.auth-card .btn-oauth                 { animation-delay: 0.50s; }

/* ==========================================================================
   Responsive — collapse brand panel below 900px
   ========================================================================== */
@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-card-logo { display: flex; }
    .auth-panel { background: var(--color-page-bg); }
    .auth-card-title { font-size: var(--text-2xl); }
    .auth-panel-inner { align-items: flex-start; padding-top: var(--space-6); }
}

@media (max-width: 480px) {
    .auth-panel-controls { padding: var(--space-4); }
    .auth-panel-inner { padding-left: var(--space-5); padding-right: var(--space-5); }
    .auth-footer { padding-left: var(--space-5); padding-right: var(--space-5); text-align: center; }
    .auth-card-logo { justify-content: center; }
    .auth-card-title, .auth-card-subtitle { text-align: center; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .auth-brand::before { animation: none; }
    .auth-brand-logo, .auth-brand-eyebrow, .auth-brand-headline, .auth-brand-sub,
    .auth-brand-features, .auth-brand-foot, .auth-card-title, .auth-card-subtitle,
    .auth-card .auth-alert, .auth-card .form-group, .auth-card .auth-row-between,
    .auth-card .auth-captcha-wrap, .auth-card .btn-primary, .auth-card .auth-divider,
    .auth-card .oauth-intro, .auth-card .btn-oauth {
        opacity: 1;
        animation: none;
    }
}