/*
  Nocturne — the auth surface from design/"Auth - issue 10.dc.html" (artboards 2a and 2b): the
  split-page shell and its centered variant, then the form controls. The tokens it uses are declared in ClientCommon's
  nocturne.css; this file consumes them and declares none of its own.
*/

.auth-page {
    min-height: 100vh;
    margin: 0;
    background: var(--nocturne-surface);
    color: var(--nocturne-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    display: flex;
}

.auth-page a {
    color: var(--nocturne-accent-text);
    text-decoration: none;
}

.auth-page a:hover {
    color: var(--nocturne-accent);
}

/* Left column — brand, form, and the one line of footer navigation. */
.auth-main {
    flex: 1;
    min-width: 0;
    padding: 44px 52px;
    display: flex;
    flex-direction: column;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: auto;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--nocturne-text);
}

.auth-body {
    max-width: 352px;
    width: 100%;
}

.auth-title {
    margin: 0 0 7px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.auth-lede {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--nocturne-text-muted);
}

.auth-footnote {
    margin-top: auto;
    padding-top: 24px;
    font-size: 14px;
    color: var(--nocturne-text-faint);
}

/* One centered column with no panel beside it — sign-in and registration (2a, 2b). Brand, form and
   footnote stay together as one group in the middle of the page, rather than the brand and footnote
   being pushed to the window's edges, where a tall window leaves the footnote out of sight. */
.auth-main.is-centered {
    align-items: center;
    justify-content: center;
}

.auth-main.is-centered .auth-brand {
    margin-bottom: 20px;
}

.auth-main.is-centered .auth-footnote {
    margin-top: 0;
    padding-top: 20px;
    text-align: center;
}

/* Right column — context panel. Static copy: nothing here reads live data. */
.auth-aside {
    width: 404px;
    flex: none;
    border-left: 1px solid var(--nocturne-line-soft);
    background: var(--nocturne-raised);
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.auth-aside-glow {
    position: absolute;
    inset: -40% -50% auto auto;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--nocturne-glow), transparent 65%);
    pointer-events: none;
}

.auth-aside-glow.is-low {
    inset: auto -50% -35% auto;
}

.auth-aside > *:not(.auth-aside-glow) {
    position: relative;
}

.auth-eyebrow {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--nocturne-text-faint);
    margin-bottom: 14px;
}

.auth-seats {
    display: flex;
    gap: 7px;
    margin-bottom: 22px;
}

.auth-seat {
    width: 38px;
    height: 48px;
    border: 1px solid var(--nocturne-line-strong);
    border-radius: 6px;
    background: var(--nocturne-raised-alt);
}

.auth-seat.is-empty {
    border-color: var(--nocturne-line);
    background: none;
}

.auth-aside-lead {
    font-size: 14px;
    line-height: 1.5;
    color: var(--nocturne-text);
    margin-bottom: 20px;
    max-width: 280px;
    text-wrap: pretty;
}

.auth-sample {
    padding: 13px 14px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised-alt);
    max-width: 300px;
}

.auth-sample-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
    margin-bottom: 6px;
}

.auth-sample-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--nocturne-text-bright);
}

.auth-sample-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.auth-sample-bars {
    display: flex;
    gap: 2px;
    width: 60px;
}

.auth-sample-bars span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--nocturne-line);
}

.auth-sample-bars span.is-on {
    background: var(--nocturne-accent);
}

.auth-sample-bars span.is-half {
    background: var(--nocturne-line-strong);
}

.auth-sample-note {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faint);
}

.auth-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 300px;
}

.auth-benefit {
    display: flex;
    gap: 11px;
}

.auth-benefit svg {
    flex: none;
    margin-top: 1px;
    color: var(--nocturne-accent);
}

.auth-benefit-title {
    font-size: 14px;
    margin-bottom: 3px;
}

.auth-benefit-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--nocturne-text-muted);
}

/* Form controls */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-field label,
.auth-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--nocturne-text-faint);
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* A label with a link at its far end — "Forgot?" beside the sign-in password, where 2a puts it. */
.auth-field-head {
    display: flex;
    align-items: baseline;
    margin-bottom: 5px;
}

.auth-field-head label {
    margin-bottom: 0;
}

.auth-field-link {
    margin-left: auto;
    font-size: 11px;
}

.auth-input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    background: var(--nocturne-raised);
    color: var(--nocturne-text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.4;
}

.auth-input::placeholder {
    color: var(--nocturne-text-faintest);
}

.auth-input:focus {
    outline: none;
    border-color: var(--nocturne-accent);
    box-shadow: 0 0 0 3px var(--nocturne-focus-halo);
}

.auth-input.invalid {
    border-color: var(--nocturne-accent-edge);
    outline: none;
}

.auth-password {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-password .auth-input {
    padding-right: 38px;
}

.auth-reveal {
    position: absolute;
    right: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nocturne-text-faint);
    cursor: pointer;
}

.auth-reveal:hover {
    color: var(--nocturne-text-dim);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 14px;
    color: var(--nocturne-text-dim);
    cursor: pointer;
}

.auth-check input {
    appearance: none;
    width: 14px;
    height: 14px;
    flex: none;
    margin: 0;
    border: 1px solid var(--nocturne-text-faintest);
    border-radius: 3px;
    background: none;
    cursor: pointer;
    position: relative;
}

.auth-check input:checked {
    border-color: var(--nocturne-accent);
    background: var(--nocturne-accent-wash-bold);
}

.auth-check input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--nocturne-accent-text);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.auth-check input:focus-visible {
    outline: 2px solid var(--nocturne-accent);
    outline-offset: 2px;
}

.auth-submit {
    margin-top: 6px;
    padding: 10px 0;
    background: transparent;
    border: 1px solid var(--nocturne-accent);
    border-radius: 8px;
    color: var(--nocturne-accent-text);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* The same button as a link — the way on from a finished or dead-end auth page. */
a.auth-submit {
    display: block;
    text-align: center;
}

.auth-submit:hover {
    background: var(--nocturne-accent-wash-strong);
}

.auth-alt {
    padding: 9px 0;
    background: transparent;
    border: 1px solid var(--nocturne-line);
    border-radius: 8px;
    color: var(--nocturne-text-dim);
    font-family: var(--font-sans);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.auth-alt:hover {
    border-color: var(--nocturne-accent);
    color: var(--nocturne-accent-text);
}

/* Sign in with Apple (#307), drawn as Apple asks of a button on the web: its own fill, its logo and its words, the
   same height and corners as the buttons beside it, and never restyled on hover beyond a slight dimming. */
.auth-alt.auth-apple,
.auth-alt.auth-apple:hover {
    background: var(--nocturne-apple-fill);
    border-color: var(--nocturne-apple-fill);
    color: var(--nocturne-apple-ink);
    font-weight: 500;
}

.auth-alt.auth-apple:hover {
    opacity: .88;
}

/* A form that has been sent (forms.js): its buttons are disabled until the next page arrives, and the
   one that sent it carries app.css's spinner beside its label. */
.auth-submit:disabled,
.auth-alt:disabled {
    cursor: progress;
}

.auth-submit:disabled:not(.is-busy),
.auth-alt:disabled:not(.is-busy) {
    opacity: .55;
}

.auth-submit:disabled:hover {
    background: transparent;
}

.auth-alt:disabled:hover {
    border-color: var(--nocturne-line);
    color: var(--nocturne-text-dim);
}

.auth-submit.is-busy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-or {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 1px 0;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
}

.auth-or::before {
    background: linear-gradient(90deg, transparent, var(--nocturne-line));
}

.auth-or::after {
    background: linear-gradient(90deg, var(--nocturne-line), transparent);
}

.auth-or span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--nocturne-text-faintest);
}

/* Notices — the redirect reason on the way in, and failures on the way back. */
.auth-notice {
    display: flex;
    gap: 8px;
    padding: 9px 11px;
    margin-bottom: 20px;
    border: 1px solid var(--nocturne-accent-faded);
    border-radius: 8px;
    background: var(--nocturne-accent-wash);
    font-size: 14px;
    line-height: 1.5;
    color: var(--nocturne-text-dim);
}

.auth-notice svg {
    flex: none;
    margin-top: 1px;
    color: var(--nocturne-accent);
}

.auth-notice code {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--nocturne-accent-text);
}

.auth-notice.is-error {
    border-color: var(--nocturne-accent-edge);
    background: var(--nocturne-accent-wash);
    color: var(--nocturne-accent-text);
}

.auth-notice.is-error svg {
    color: var(--nocturne-accent-bright);
}

.auth-validation {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nocturne-accent-bright);
}

/* Password strength — progressive enhancement, driven by auth.js. */
.auth-strength {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.auth-strength span {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--nocturne-line);
}

.auth-strength span.is-on {
    background: var(--nocturne-accent);
}

.auth-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 9px;
    padding: 0;
    list-style: none;
}

.auth-rule {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--nocturne-text-faint);
}

.auth-rule.is-met {
    color: var(--nocturne-accent-bright);
}

.auth-rule-mark {
    width: 11px;
    height: 11px;
    border: 1px solid currentColor;
    border-radius: 50%;
    flex: none;
    position: relative;
}

.auth-rule.is-met .auth-rule-mark {
    border-color: transparent;
}

.auth-rule.is-met .auth-rule-mark::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 3px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

/* Consent — the 2b artboard's checkbox: top-aligned, because its label wraps onto a second line. */
.auth-check.is-consent {
    align-items: flex-start;
    font-size: 11.5px;
    line-height: 1.5;
    cursor: default;
}

.auth-check.is-consent input {
    margin-top: 2px;
}

/* The line under a Google or Apple button saying that it signs you up as well. */
/* A quiet way round the form above it, such as asking for a sign-in link instead of typing a password. */
.auth-text-link {
    margin-top: 2px;
    font-size: 11.5px;
    text-align: center;
}

.auth-fineprint {
    margin: 0;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: var(--nocturne-text-faint);
}

.auth-page .auth-fineprint a {
    color: var(--nocturne-text);
}

.auth-page .auth-fineprint a:hover {
    color: var(--nocturne-accent-text);
}

/* Below the split's natural width the context panel is dropped rather than stacked: it is
   supporting copy, and on a phone it would push the form itself off the first screen. */
@media (max-width: 900px) {
    .auth-aside {
        display: none;
    }

    .auth-main {
        padding: 32px 24px;
        align-items: center;
    }

    .auth-main:not(.is-centered) .auth-brand {
        align-self: flex-start;
    }
}