/* ============================================================================
   PostPilot — auth.css · the sign-in screens and the status pages
   ----------------------------------------------------------------------------
   Loaded by _AuthLayout (sign in, register, confirm, forgot/reset, accept an invitation) and _StatusLayout (404, 403, 429, 5xx, access denied)
   after theme.css, base.css and lit.css.

   Sign-in screens. From 992px a lit-navy panel carries the product story beside a clean form; below that a short lit header (the brand and one
   line) and the form rising over it as a sheet with big rounded top corners. The page is always a single column of one thing to do.

   Forms. Labels are sentence case and always visible; controls are 52px; a field's error sits under it and is what the field is described by; a
   failure that belongs to no field (wrong password, locked out) is one alert above the form; a busy button keeps its label and spins.

   Status pages. The same lit ground with one white card: a small illustration, the code in coral, what happened and what to do next.
   ============================================================================ */

/* ===========================================================================
   1. The frame
   =========================================================================== */
.auth-body { background: var(--pp-workspace); color: var(--pp-ink); }

.auth-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
}

/* ---- a phone: the lit header, and the form rising over it ---- */
.auth-strip {
    flex: 0 0 auto;
    display: grid;
    gap: 0.9rem;
    padding: max(1.25rem, var(--pp-safe-top)) max(1.25rem, var(--pp-safe-right)) 3.75rem max(1.25rem, var(--pp-safe-left));
}

.auth-strip__line { margin: 0; font-family: var(--pp-font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.012em; color: rgba(255, 255, 255, 0.9); }

.auth-brand { display: inline-flex; align-items: center; gap: 0.65rem; width: fit-content; color: #fff; text-decoration: none; }
.auth-brand .brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.auth-brand__text { display: grid; gap: 3px; line-height: 1; }
.auth-brand__name { font-family: var(--pp-font-display); font-size: 1.3125rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-brand__by { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.auth-brand:hover { color: #fff; }
.auth-brand:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 4px; border-radius: 10px; }

.auth-main {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -2rem;
    padding: 2rem max(1.25rem, var(--pp-safe-right)) max(2rem, var(--pp-safe-bottom)) max(1.25rem, var(--pp-safe-left));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--pp-surface);
    box-shadow: 0 -18px 40px -26px rgba(0, 0, 0, 0.45);
}

.auth-main:focus { outline: none; }

.auth-card { width: 100%; max-width: 27.5rem; animation: pp-fade-up var(--pp-dur-3) var(--pp-ease-soft) both; }

.auth-legal { width: 100%; max-width: 27.5rem; margin: 1.5rem 0 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--pp-ink-muted); text-align: center; }
.auth-legal a { color: var(--pp-link); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the panel: desktop only ---- */
.auth-aside { display: none; }

@media (min-width: 992px) {
    .auth-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
    .auth-strip { display: none; }
    .auth-aside { grid-column: 1; grid-row: 1; }
    .auth-main {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        margin-top: 0;
        padding: 3rem 2rem;
        border-radius: 0;
        background: var(--pp-workspace);
        box-shadow: none;
    }

    /* The card is the surface on the paper canvas; on a phone the sheet itself is. */
    .auth-card { padding: 2.5rem; border: 1px solid var(--pp-hairline); border-radius: var(--r-lg); background: var(--pp-surface); box-shadow: var(--e-2); }
}

.auth-aside {
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: clamp(2rem, 4vw, 3.5rem);
}

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

.auth-pitch { display: grid; gap: 1.25rem; align-content: center; max-width: 34rem; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--pp-accent-on-ink); }
.auth-eyebrow::before { content: ""; width: 22px; height: 2px; flex: 0 0 auto; border-radius: 2px; background: currentColor; }

.auth-tagline { margin: 0; font-family: var(--pp-font-display); font-size: clamp(2.25rem, 3.6vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; }
.auth-emph { color: var(--pp-accent-on-ink); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .auth-emph { background: var(--pp-emphasis, linear-gradient(100deg, #ea6a4d, #f4a78e)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.06em; --pp-contrast-bg: #0b1a26; }
}

@media (forced-colors: active) {
    .auth-emph { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

.auth-copy { margin: 0; max-width: 40ch; font-size: var(--fs-md); line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

/* A slice of the queue, and four things the product does. */
.auth-demo { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding: 0.4rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.06); }
.auth-demo__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.75rem; border-radius: 12px; }
.auth-demo__row:first-child { background: rgba(255, 255, 255, 0.04); }
.auth-demo__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 1rem; }
.auth-demo__icon .bi-facebook { color: #7cb0f7; }
.auth-demo__icon .bi-instagram { color: #f79ab8; }
.auth-demo__main { min-width: 0; display: grid; gap: 0.1rem; }
.auth-demo__caption { overflow: hidden; font-size: var(--fs-sm); font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.auth-demo__when { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.72); }
.auth-demo__tag { padding: 0.28rem 0.6rem; border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.auth-demo__tag--ok { color: #86efac; background: rgba(134, 239, 172, 0.14); }
.auth-demo__tag--queued { color: var(--pp-accent-on-ink); background: rgba(234, 106, 77, 0.18); }

.auth-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.auth-facts li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.auth-facts i { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, 0.1); color: var(--pp-accent-on-ink); }

.auth-foot { margin: 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.62); }

@media (max-width: 1199.98px) {
    .auth-facts { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   2. The form system
   =========================================================================== */
.auth-head { margin-bottom: 1.5rem; }
.auth-head h1 { margin: 0 0 0.4rem; font-family: var(--pp-font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--pp-heading); }
/* anywhere: the second step names the person's address, a single long word that no space lets break. */
.auth-head p { margin: 0; font-size: var(--fs-base); color: var(--pp-ink-muted); overflow-wrap: anywhere; }

.auth-row { margin-bottom: 1rem; }
.auth-label { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--pp-ink); }
.auth-card .form-control { min-height: 52px; border-radius: var(--r-sm); }

.auth-field { position: relative; }
.auth-field > .bi { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--pp-ink-muted); font-size: 1.05rem; pointer-events: none; transition: color var(--pp-dur-2) var(--pp-ease-soft); }
.auth-field .form-control { padding-left: 2.85rem; }
.auth-field:focus-within > .bi { color: var(--pp-link); }
.auth-field .form-control[readonly] { background: var(--pp-sunken); color: var(--pp-ink-muted); }
.auth-field--secret .form-control { padding-right: 3.4rem; }

/* The reveal button is 44px all round and sits inside the field's right edge. */
.auth-reveal {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--pp-ink-muted);
    font-size: 1.1rem;
    transform: translateY(-50%);
    cursor: pointer;
}

.auth-reveal:hover { color: var(--pp-heading); background: var(--pp-sunken); }
.auth-reveal:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: -2px; }
html:not(.pp-js) .auth-reveal { display: none; }

.auth-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0.85rem; }

@media (min-width: 420px) {
    .auth-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.auth-hint { display: flex; align-items: center; gap: 0.45rem; margin: 0.4rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--pp-warn-ink); }
.auth-hint[hidden] { display: none; }

/* A failure that belongs to no field. */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(var(--pp-danger-rgb), 0.35);
    border-radius: var(--r-sm);
    background: rgba(var(--pp-danger-rgb), 0.08);
    color: var(--pp-danger-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.5;
}

.auth-alert[hidden] { display: none; }
.auth-alert > .bi { flex: 0 0 auto; margin-top: 0.1rem; font-size: 1.05rem; }
.auth-alert:focus { outline: 2px solid var(--pp-danger-ink); outline-offset: 2px; }

.auth-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
/* The tick box and its words on one centre line (Bootstrap floats the box out to the left of a text block, which sits it high on a touch screen). */
.auth-meta .form-check { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; min-height: 0; }
.auth-meta .form-check .form-check-input { float: none; margin: 0; flex: 0 0 auto; }
.auth-meta .form-check-label { font-size: var(--fs-sm); color: var(--pp-ink-muted); }
.auth-meta a { font-size: var(--fs-sm); font-weight: 600; color: var(--pp-link); }

.auth-card .btn-primary, .auth-card .btn-ghost { min-height: 52px; border-radius: var(--r-pill); font-size: var(--fs-base); }

.auth-alt { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--pp-hairline); font-size: var(--fs-sm); color: var(--pp-ink-muted); text-align: center; }
.auth-alt a { color: var(--pp-link); font-weight: 700; }
.auth-alt .auth-help { margin: 0.25rem 0 0.5rem; font-size: var(--fs-sm); line-height: 1.5; }

/* ---- the second step of a sign-in ---- */
/* The code's digits large and apart, so six of them are easy to check against the phone; a recovery code (letters and a hyphen) keeps normal spacing. */
.auth-code { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.auth-code[inputmode="numeric"] { letter-spacing: 0.22em; }
.auth-code::placeholder { font-weight: 500; letter-spacing: 0.1em; }
.auth-meta[hidden] { display: none; }

/* A button that reads as a link (switching to a recovery code, going back), with a thumb-sized target. */
.auth-linkbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pp-tap-min);
    padding: 0 0.6rem;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--pp-link);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.auth-linkbtn:hover { color: var(--pp-heading); text-decoration: underline; }
.auth-linkbtn:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 2px; }

/* ---- the strength rules ---- */
.auth-strength { margin-top: 0.75rem; }
.auth-strength__bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.auth-strength__bars i { height: 6px; border-radius: 3px; background: var(--pp-sunken-2); transition: background-color var(--pp-dur-2) var(--pp-ease-soft); }
.auth-strength__bars i.is-on.is-level-1 { background: var(--pp-danger-ink); }
.auth-strength__bars i.is-on.is-level-2 { background: var(--pp-warn-ink); }
.auth-strength__bars i.is-on.is-level-3 { background: var(--pp-info-ink); }
.auth-strength__bars i.is-on.is-level-4 { background: var(--pp-success-ink); }
.auth-strength__label { margin: 0.5rem 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--pp-ink-muted); }
.auth-strength[data-level="4"] .auth-strength__label { color: var(--pp-success-ink); }

.auth-rules { display: grid; gap: 0.3rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.auth-rules li { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--pp-ink-muted); }
.auth-rules li.is-met { color: var(--pp-success-ink); font-weight: 600; }

/* ---- a finished state: a mark, a heading, a sentence, a way on ---- */
.auth-status { margin-bottom: 1.5rem; }
.auth-status[hidden] { display: none; }
.auth-status h1 { margin: 0 0 0.5rem; font-family: var(--pp-font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--pp-heading); }
.auth-status h1:focus { outline: none; }
.auth-status p { margin: 0 0 0.75rem; font-size: var(--fs-base); line-height: 1.6; color: var(--pp-ink-muted); }
.auth-status .auth-help { font-size: var(--fs-sm); }
.auth-status a:not(.btn), .auth-help a { color: var(--pp-link); font-weight: 600; }
.auth-status code { padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--pp-sunken-2); color: var(--pp-ink); font-size: 0.9em; }
.auth-status + .btn { margin-top: 0.25rem; }

.auth-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.25rem; border-radius: var(--r-md); background: var(--pp-tile-coral); color: #fff; font-size: 1.8rem; }
.auth-mark--success { background: var(--pp-tile-teal); }
.auth-mark--danger { background: var(--pp-kpi-coral); }
.auth-tick { width: 34px; height: 34px; }
.auth-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    html:not([data-fx-tier="static"]) .auth-tick path { stroke-dashoffset: 1; animation: auth-draw 0.6s 0.2s var(--pp-ease-out) forwards; }
}

@keyframes auth-draw { to { stroke-dashoffset: 0; } }

/* ===========================================================================
   3. The status pages — 404, 403, 429, 5xx, access denied
   =========================================================================== */
.status-body-page { background: var(--pp-ink-deep); }

.status-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding: max(1.5rem, var(--pp-safe-top)) max(1.25rem, var(--pp-safe-right)) max(2rem, var(--pp-safe-bottom)) max(1.25rem, var(--pp-safe-left));
}

.status-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: #fff; text-decoration: none; }
.status-brand .brand-mark { width: 40px; height: 40px; }
.status-brand:hover { color: #fff; }
.status-brand:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 4px; border-radius: 10px; }
.status-brand .auth-brand__by { color: rgba(255, 255, 255, 0.7); }

.status-card {
    width: 100%;
    max-width: 32.5rem;
    margin: auto;
    padding: clamp(1.75rem, 5vw, 3rem);
    border-radius: var(--r-lg);
    background: var(--pp-surface);
    color: var(--pp-ink);
    box-shadow: var(--e-3);
}

.status-card:focus { outline: none; }

.status-panel { text-align: center; }
.status-art { display: block; width: 96px; height: 96px; margin: 0 auto 0.75rem; }

.status-art .art-ring, .status-art .art-body { fill: none; stroke: var(--pp-ink-muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.status-art .art-body { fill: var(--pp-sunken-2); }
.status-art .art-ticks, .status-art .art-stem { fill: none; stroke: var(--pp-ink-muted); stroke-width: 3; stroke-linecap: round; }
.status-art .art-stem--bold { stroke-width: 4; }
.status-art .art-needle { fill: var(--pp-ink-muted); }
.status-art .art-needle-accent, .status-art .art-accent { fill: var(--pp-accent); stroke: none; }
.status-art .art-pivot { fill: var(--pp-heading); }

/* The code is large, coral and not read aloud (the heading says what it means). Coral on white is 3.15:1 — fine for display type. */
.status-code { margin: 0 0 0.25rem; font-family: var(--pp-font-display); font-size: clamp(3.25rem, 12vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--pp-accent); user-select: none; }
.status-panel h1 { margin: 0 0 0.6rem; font-family: var(--pp-font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--pp-heading); text-wrap: balance; }
.status-body { margin: 0 auto 1.5rem; max-width: 40ch; font-size: var(--fs-base); line-height: 1.6; color: var(--pp-ink-muted); }

.status-ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.6rem 0.85rem; border-radius: var(--r-sm); background: var(--pp-sunken); font-size: var(--fs-sm); color: var(--pp-ink-muted); }
.status-ref > span { font-weight: 700; }
.status-ref code { color: var(--pp-ink); font-size: 0.9em; overflow-wrap: anywhere; }

.status-copy { display: none; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.15rem 0.7rem; border: 1px solid var(--pp-hairline-strong); border-radius: var(--r-pill); background: var(--pp-surface); color: var(--pp-ink); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
html.pp-js .status-copy { display: inline-flex; }
html.pp-js .status-copy[hidden] { display: none; }          /* no clipboard in this browser / a non-secure page: no button that would do nothing */
.status-copy:hover { background: var(--pp-sunken-2); }
.status-copy:focus-visible { outline: 2px solid var(--pp-focus); outline-offset: 2px; }
.status-copy.is-done { color: var(--pp-success-ink); }

@media (pointer: coarse) {
    .status-copy { min-height: var(--pp-tap-min); }
}

.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.status-actions .btn { min-height: 48px; border-radius: var(--r-pill); }

@media (max-width: 575.98px) {
    .status-actions { flex-direction: column; }
    .status-actions .btn { width: 100%; }
}

/* ===========================================================================
   4. Forced colours, print
   =========================================================================== */
@media (forced-colors: active) {
    .auth-card, .auth-alert, .status-card, .auth-demo, .status-ref { border: 1px solid CanvasText; }
    .auth-strength__bars i { border: 1px solid CanvasText; }
    .auth-strength__bars i.is-on { background: Highlight; }
}

@media print {
    .auth-aside, .auth-strip, .auth-legal { display: none !important; }
    .auth-main, .auth-card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
}