/*
 * ds/auth.css — the signed-out shell.
 *
 * Loaded ONLY by templates/ds_auth.html, which is the only shell that has no rail. The
 * six screens on it (sign in, register, verify, request a reset, set a password, and
 * the two confirmations) are the one place in the product where there is no project and
 * no navigation, so the layout is its own rather than a variant of ds-app.
 *
 * It replaces static/css/auth-pages.css, which is still loaded by nothing after this
 * lands and is kept on disk for the marketing pages that reference its `.logo` rules.
 *
 * WHAT IS DELIBERATELY NOT HERE. The old pages had a `.noise-overlay`, a
 * `.grid-background`, a `blur-3xl` gradient blob in each corner and a `.confetti`
 * keyframe — five decorative layers across four files. The panel earns its weight by
 * saying what the product does; nothing else needs to be behind the card.
 *
 * Every colour is a role from theme-variables.css. The old pages hard-coded slate-900,
 * slate-50 and five confetti hexes, which is why they were light-only.
 */

/* =================================================================
   1. The frame
   ================================================================= */

.ds-auth-body {
    background: var(--ground);
    /* The card column scrolls, not the document: at 390px the register form is taller
       than the viewport and the panel must not scroll away above it. */
    overflow: hidden;
}

.ds-auth {
    display: grid;
    /* The panel is a fixed, readable measure; the card column takes the rest. A 50/50
       split -- which is what this was -- gave the panel 700px of line length on a wide
       screen and the card 700px it does not use. */
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

@media (max-width: 60rem) {
    .ds-auth {
        grid-template-columns: minmax(0, 1fr);
    }
    .ds-auth-say {
        display: none;
    }
}

/* =================================================================
   2. The panel
   ================================================================= */

.ds-auth-say {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-10);
    padding: var(--sp-10) var(--sp-8);
    background: var(--rail-bg);
    border-right: 1px solid var(--line-soft);
    overflow-y: auto;
}

.ds-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: var(--ink);
    font-weight: var(--fw-semibold);
}

.ds-auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md);
    background: var(--accent-fill);
    color: var(--on-accent);
    font-size: var(--fs-meta);
}

.ds-auth-brand-name {
    font-size: var(--fs-lead);
    letter-spacing: -0.01em;
}

.ds-auth-brand--small .ds-auth-brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--fs-micro);
}

.ds-auth-brand--small .ds-auth-brand-name {
    font-size: var(--fs-body);
}

.ds-auth-pitch {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.ds-auth-pitch-title {
    margin: 0;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.ds-auth-pitch-body {
    margin: 0;
    max-width: 24rem;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    color: var(--soft);
}

.ds-auth-points {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.ds-auth-point {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.ds-auth-point-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 1px;
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--fs-micro);
}

.ds-auth-point-text {
    font-size: var(--fs-dense);
    line-height: var(--lh-snug);
    color: var(--soft);
}

.ds-auth-foot {
    margin: 0;
    font-size: var(--fs-micro);
    color: var(--mute);
}

/* =================================================================
   3. The card column
   ================================================================= */

.ds-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-4) var(--sp-10);
    overflow-y: auto;
}

.ds-auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    max-width: 26rem;
}

/* The wordmark in this row is the panel's job on a wide screen, so it only appears
   once the panel has gone. */
.ds-auth-top .ds-auth-brand {
    visibility: hidden;
}

@media (max-width: 60rem) {
    .ds-auth-top .ds-auth-brand {
        visibility: visible;
    }
}

.ds-auth-theme {
    flex: 0 0 auto;
}

.ds-auth-card {
    width: 100%;
    max-width: 26rem;
    /* Centred in the space left over, not pinned to the top: the reset-request card is
       a third the height of the register card and would otherwise sit under the
       theme control with the whole page empty below it. */
    margin: auto 0;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.ds-auth-card-head {
    padding: var(--sp-6) var(--sp-6) var(--sp-4);
    text-align: center;
}

.ds-auth-card-head:empty {
    display: none;
}

.ds-auth-title {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.ds-auth-sub {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-dense);
    line-height: var(--lh-snug);
    color: var(--soft);
}

/* The address a code or a link was sent to. Monospace and unbroken, because the
   question it answers is "is that the right address", which needs it read character by
   character. */
.ds-auth-who {
    margin: var(--sp-1) 0 0;
    font-family: var(--font-mono);
    font-size: var(--fs-dense);
    color: var(--ink);
    word-break: break-all;
}

.ds-auth-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius-full);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--fs-h3);
}

.ds-auth-mark--passed {
    background: var(--st-passed-bg);
    color: var(--st-passed-ink);
}

.ds-auth-mark--failed {
    background: var(--st-failed-bg);
    color: var(--st-failed-ink);
}

.ds-auth-card-body {
    padding: var(--sp-6);
}

.ds-auth-card-foot {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--line-soft);
    text-align: center;
}

.ds-auth-card-foot:empty {
    display: none;
}

.ds-auth-card-foot p {
    margin: 0;
}

/* =================================================================
   4. The two tabs on the sign-in card
   ================================================================= */

/* A real tablist, keyed on `aria-selected` rather than on six utility classes added and
   removed by a script. The old version asked the browser to add four classes and remove
   four others on each click, and the two states shared `hover:` classes that were in
   the "inactive" list -- so the active tab lost its hover and the inactive one kept it.
   Here the state is one attribute and the selector reads it. */
.ds-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--line-soft);
    padding: 0 var(--sp-6);
}

.ds-auth-tab {
    flex: 1 1 0;
    padding: var(--sp-3) var(--sp-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: var(--fs-dense);
    font-weight: var(--fw-medium);
    color: var(--mute);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.ds-auth-tab:hover {
    color: var(--ink);
}

.ds-auth-tab[aria-selected="true"] {
    color: var(--accent-text);
    border-bottom-color: var(--accent);
}

.ds-auth-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.ds-auth-panel[hidden] {
    display: none;
}

/* =================================================================
   5. Inside the card
   ================================================================= */

/* Sign in with Google, and the rule that separates it from the form. The provider's
   mark is an <img> from their own domain, so it is sized here rather than trusted. */
.ds-auth-sso {
    width: 100%;
    justify-content: center;
}

.ds-auth-sso img {
    width: 1rem;
    height: 1rem;
}

.ds-auth-or {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
}

.ds-auth-or::before,
.ds-auth-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--line-soft);
}

.ds-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-dense);
}

/* A password field and the eye that reveals it. The button is inside the field's box
   rather than beside it, so the input keeps the full width. */
.ds-auth-secret {
    position: relative;
}

.ds-auth-secret > .ds-input {
    padding-right: var(--sp-10);
}

.ds-auth-peek {
    position: absolute;
    top: 50%;
    right: var(--sp-1);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--mute);
    cursor: pointer;
}

.ds-auth-peek:hover {
    color: var(--ink);
    background: var(--hover);
}

/* =================================================================
   6. The six code boxes
   ================================================================= */

.ds-auth-code {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
}

.ds-auth-digit {
    width: 2.75rem;
    height: 3.25rem;
    padding: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

@media (max-width: 24rem) {
    .ds-auth-code {
        gap: var(--sp-1);
    }
    .ds-auth-digit {
        width: 2.25rem;
        height: 2.75rem;
    }
}

/* Fine print under a form — the expiry of a code, the spam-folder reminder. Centred
   because the card it sits in is centred; `ds-micro` elsewhere is left-aligned in a
   left-aligned page. */
.ds-auth-fine {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-micro);
    line-height: var(--lh-snug);
    color: var(--mute);
    text-align: center;
}

/* Django's password validators hand back their rules as a `<ul>`, so the hint under the
   new-password field is a list and has to look like one. */
.ds-auth-rules ul {
    margin: 0;
    padding-left: var(--sp-4);
}

.ds-auth-rules li {
    line-height: var(--lh-snug);
}