/* ==========================================================================
   Sign-in, password reset, and account screens. Requires system.css.

   Split composition: a navy brand column carries the identity so the form
   column can stay quiet and focused. Below 64em the brand column is removed
   entirely rather than stacked, so the form is the first thing on screen.
   ========================================================================== */

.auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Brand column -------------------------------------------------------- */
.auth-aside { display: none; }

.auth-aside-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
    max-width: 30rem;
    margin: auto;
    padding: var(--sp-12) var(--sp-10);
}

.auth-pitch h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #fff;
}
.auth-pitch p {
    margin-top: var(--sp-4);
    max-width: 34ch;
    color: #9fb1cb;
    font-size: var(--text-md);
    line-height: 1.65;
}

.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.auth-points li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    color: #dbe5f2;
    font-size: var(--text-base);
    line-height: 1.5;
}
.auth-points .icon { flex: none; margin-top: 0.15em; color: var(--brand-gold); }

.auth-aside-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #8ea0ba;
    font-size: var(--text-sm);
    line-height: 1.55;
}
.auth-aside-note .icon { flex: none; margin-top: 0.15em; color: var(--teal-600); }

/* --- Form column --------------------------------------------------------- */
.auth-main {
    display: grid;
    grid-template-rows: 1fr auto;
    padding: var(--gutter);
    background: var(--canvas);
}

.auth-card {
    width: 100%;
    max-width: 25rem;
    margin: auto;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* The brand is the anchor of this screen, so it is set at display scale
   rather than as a small utility mark. */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: clamp(var(--sp-3), 1.4vw, var(--sp-5));
    color: #fff;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem);
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1;
    text-decoration: none;
}
.auth-brand .brand-mark {
    display: grid;
    place-items: center;
    width: clamp(3rem, 2.2rem + 2.6vw, 4.5rem);
    height: clamp(3rem, 2.2rem + 2.6vw, 4.5rem);
    flex: none;
    border-radius: clamp(var(--radius-md), 1vw, var(--radius-lg));
    background: linear-gradient(135deg, var(--brand-gold), #f2cf74);
    color: var(--navy-900);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem);
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(214, 166, 72, 0.28);
}
/* The in-card copy sits on light and only appears when the aside does not. */
.auth-brand-compact { color: var(--text); margin-bottom: var(--sp-8); }

.auth-heading { margin-bottom: var(--sp-6); }
.auth-heading h1 {
    font-size: var(--text-2xl);
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-2);
}
.auth-heading p { color: var(--text-muted); line-height: 1.6; }

.auth-form { display: grid; gap: var(--sp-5); }
.auth-form .button { margin-top: var(--sp-1); }

.password-field { position: relative; }
.password-field .input { padding-right: calc(var(--tap) + var(--sp-1)); }
.password-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    /* Full tap target, not a 32px icon: this is a real control. */
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
}
.password-toggle:hover { color: var(--text); background: var(--n-100); }
.password-toggle[aria-pressed="true"] { color: var(--primary); }

.auth-alt { margin-top: var(--sp-5); text-align: center; font-size: var(--text-sm); }
.auth-alt a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: var(--sp-2);
    color: var(--text-muted);
    text-decoration: none;
}
.auth-alt a:hover { color: var(--primary); text-decoration: underline; }

.auth-footer { padding-top: var(--sp-6); text-align: center; font-size: var(--text-sm); }
.auth-footer a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    color: var(--text-muted);
    text-decoration: none;
}
.auth-footer a:hover { color: var(--primary); text-decoration: underline; }

/* --- Split layout from tablet-landscape up -------------------------------- */
@media (min-width: 64em) {
    .auth-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

    .auth-aside {
        display: grid;
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(90rem 40rem at -10% 110%, rgba(13, 139, 120, 0.35), transparent 60%),
            linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
    }
    /* A faint grid, sized in absolute units so it reads as texture, not pattern. */
    .auth-aside::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: radial-gradient(80% 60% at 30% 40%, #000 40%, transparent 100%);
    }
    /* Gold hairline marks the seam between the two columns. */
    .auth-aside::after {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        width: 3px;
        background: linear-gradient(180deg, var(--brand-gold), rgba(214, 166, 72, 0));
    }
    .auth-aside-inner { position: relative; z-index: 1; }

    .auth-brand-compact { display: none; }
    .auth-main { padding: var(--sp-10); background: var(--surface); }
    .auth-card {
        max-width: 25rem;
        padding: var(--sp-8) var(--sp-2);
        border: 0;
        box-shadow: none;
        background: transparent;
    }
}

@media (max-width: 63.99em) {
    /* Single column: keep the card visually distinct from the page. */
    .auth-main { background: var(--canvas); }
}

@media (min-width: 48em) and (max-width: 63.99em) {
    .auth-card { padding: var(--sp-8); }
}