/* ===============================================================
   THE SPLIT SIGN-IN LAYOUT (§9.25)
   ===============================================================
   The one page in the product that is allowed to be expressive.

   The asymmetric split (1fr / min(46%, 640px)), the grain over navy, the
   LIGHT serif weight at 34px, and a single coral clause inside an otherwise
   white sentence: that is the entire expressive budget of this product,
   spent in one place. Everything else is quiet by construction, which is
   exactly what makes this land — an expressive moment only reads as a
   choice if the rest of the product is restrained.

   The navy panel is hidden below `lg`; the form stands alone. Nothing here
   floats: the form sits directly on the paper, with no card and no shadow,
   because a card would make it one more panel rather than the page.
   =============================================================== */

.auth-page {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
    background: var(--paper);
}

@media (min-width: 1024px) {
    .auth-page { grid-template-columns: 1fr min(46%, 640px); }
}

/* ---- The navy panel ---- */
.auth-panel {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: var(--space-12);
    background: var(--chrome);
    color: var(--chrome-text);
}

@media (min-width: 1024px) {
    .auth-panel { display: flex; }
}

/* Texture, at ~40%. It stops a large flat navy field from looking like a
   placeholder. ONE place in the product; do not scatter it. */
.auth-grain {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
    /* The shared .grain draws INK dots, which is right on paper and
       invisible on navy. Over the chrome panel the dots have to be the
       chrome's own light text colour instead — same texture, inverted,
       still a token. */
    background-image: radial-gradient(circle at 1px 1px,
        color-mix(in srgb, var(--chrome-text) 22%, transparent) 1px,
        transparent 0);
}

.auth-panel-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--coral);
    color: var(--chrome-text-strong);
}

.auth-mark svg { width: 20px; height: 20px; }

.auth-wordmark {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: var(--font-semibold);
    color: var(--chrome-text-strong);
}

.auth-wordmark-dot { color: var(--coral); }

/* The statement: 34px serif at the LIGHT weight. The light cut is what
   makes a large line read as editorial rather than as a headline shout. */
.auth-statement {
    position: relative;
    max-width: 20ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: -0.018em;
    color: var(--chrome-text-strong);
    text-wrap: balance;
}

/* One coral clause inside an otherwise white sentence. One. */
.auth-statement-accent { color: var(--coral); }

.auth-panel-foot {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--chrome-rule);
}

.auth-fact { display: flex; flex-direction: column; gap: 4px; }

.auth-fact-label { color: var(--chrome-text-mute); }

.auth-fact-value {
    font-size: var(--text-xs);
    color: var(--chrome-text);
}

/* Registration codes are machine strings, so they are mono (Law 5). They
   do more for credibility on a sign-in page than any illustration would. */
.auth-fact-code {
    font-family: var(--font-mono);
    font-size: 11px;
}

/* ---- The form side ---- */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
}

.auth-form {
    width: 100%;
    max-width: 24rem;
}

.auth-eyebrow { color: var(--ink-mute); }

.auth-title {
    margin: var(--space-2) 0 0;
    font-family: var(--font-serif);
    font-size: var(--text-h1);
    line-height: var(--text-h1-lh);
    letter-spacing: var(--text-h1-ls);
    font-weight: var(--font-medium);
    color: var(--ink);
}

.auth-subtitle {
    margin: var(--space-2) 0 var(--space-6);
    font-size: var(--text-sm);
    color: var(--ink-mute);
}

.auth-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.auth-submit {
    width: 100%;
    height: 40px;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--royal-strong);
    font-size: var(--text-sm);
    text-decoration: none;
}

.auth-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.auth-footer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
}

.auth-footer-text {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
    font-size: var(--text-sm);
    color: var(--ink-mute);
}

.auth-copyright {
    margin: var(--space-8) 0 0;
    font-size: var(--text-xs);
    color: var(--ink-faint);
}

/* The submit button on the signed-out screens. `.btn-submit` is the legacy
   name, kept because the register and password-reset forms write it; it is
   the primary button, full width. */
.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--coral-strong);
    color: var(--on-strong);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--dur-colour) var(--ease-out-editorial),
                box-shadow var(--dur-colour) var(--ease-out-editorial);
}

.btn-submit:hover {
    background: var(--coral-hover);
    box-shadow: var(--shadow-raise);
}

/* The password reveal, on the signed-out screens as everywhere else. */
.auth-form .pw-eye { color: var(--ink-faint); }
.auth-form .pw-eye.active { color: var(--coral-strong); }

/* .auth-info-box is a SHARED component (enhancements.css) — an alert by
   another name. Defining it here as well would give the signed-out screens
   a different one from the rest of the product, which is the exact drift
   core/test_design_system.py exists to stop.

*/
/* The environment banner is fixed, so the signed-out layout clears it too. */
body:has(.environment-banner) .auth-page {
    padding-top: var(--env-banner-h);
}