/*
 * 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);
    /* WIDE: the card column scrolls, not the document, so the panel stays put while a
       tall register form moves. That needs the shell to be EXACTLY the viewport -- with
       `min-height` the grid row grew to its content instead, `overflow-y: auto` on the
       column never engaged, and the overflow was simply clipped away. `overflow: hidden`
       still permits PROGRAMMATIC scrolling, which is why `scrollIntoView` reached the
       button in a test and a thumb could not. Narrow widths undo all of this below. */
    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);
    height: 100vh;
    height: 100dvh;
}

/* =================================================================
   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);
}

/* NARROW: the panel goes, and the DOCUMENT scrolls again.
   This block has to sit AFTER `.ds-auth-say { display: flex }` rather than beside the
   grid rules at the top of the file: a media query adds no specificity, so the later
   `display: flex` was winning and the pitch panel stayed on screen at 390px -- 520px of
   marketing above the card, with the sign-in button clipped below a viewport that
   `overflow: hidden` would not let anybody scroll.

   Nothing scrolls inside anything here. A phone's viewport height changes as the URL bar
   retracts, so a full-height inner scroller fights the browser's own gesture; the
   document is the scroller it expects. */
@media (max-width: 60rem) {
    .ds-auth-body {
        overflow: visible;
    }
    .ds-auth {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .ds-auth-say {
        display: none;
    }
    .ds-auth-main {
        overflow-y: visible;
    }
}

/* =================================================================
   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);
}