/* ============================================================
   Gantry — Auth & onboarding styles
   Editorial split screen (2026-08-04): a permanent --deep-slate
   panel on the left carrying the serif pull-quote, a minimal
   centered form column on the right. The slate panel is theme-
   INVARIANT (the one place chrome goes dark-on-light — see
   STYLE-CONTRACT "signature moves"); everything on it uses the
   fixed brand structure tokens, never the theme-side ones.
   The onboarding flow (NewUserFlow) renders the same shell with
   no aside, so the form column simply centers full-width.
   ============================================================ */

.cg-auth {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    background: var(--bg);
}

/* Legacy full-bleed backdrop — retired by the split relayout (the grid +
   radial glow treatment is gone; chrome is flat now). Kept defined so any
   straggling reference renders as plain page background. */
.cg-auth-bg {
    position: absolute;
    inset: 0;
    background: var(--bg);
    z-index: 0;
}

/* ---------- Left: deep-slate quote panel ---------- */
.cg-auth-aside {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 44%;
    max-width: 640px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 44px 40px;
    background: var(--deep-slate);
    color: var(--brand-mist);
    border-right: 1px solid var(--line);
}
/* Abstract backdrop (2026-08-04, John's pick: topographic contours):
   a generated contour field — nested meandering elevation lines with
   index-contour weight variation — over a whisper of radial glow and
   film grain. The field ships as a real asset (auth-topo.svg, built by
   the seeded generator; regenerate rather than hand-edit) so auth.css
   stays lean. The panel is theme-INVARIANT deep-slate, so one treatment
   serves both page themes; stroke color mirrors --brand-mist #F4F3EF at
   low in-file opacities, further trimmed by the layer opacity + a mask
   that recedes the field behind the text block.
   ⚠ The layer opacity + mask floor below are tuned for the LIGHT page,
   not the dark one. They were originally 0.34 / 0.26, which read fine while
   the whole app was dark but effectively vanished once the form column
   became white (2026-08-20, the app started following the device): the eye
   adapts to the bright surround, and 0.20 stroke-opacity x 0.34 layer x
   0.26 mask is a ~1.6% step off #0e0f10 in the masked centre — present in
   the pixels, invisible to a reader. Nothing errors when that happens, the
   panel just goes flat. Light is the demanding case and dark tolerates the
   stronger field, so both themes keep ONE treatment; re-check against the
   LIGHT page if you touch these two numbers. */
.cg-auth-aside-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(80% 66% at 70% 30%, rgba(244, 243, 239, 0.045), transparent 70%);
}
/* Film grain: tiled fractal noise, barely-there. */
.cg-auth-aside-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The contour field. The mask thins it to under half over the centered
   text block (left-of-center) and lets it breathe toward the edges. */
.cg-auth-aside-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("auth-topo.svg?v=3");
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    -webkit-mask-image: radial-gradient(85% 62% at 34% 46%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 1) 78%);
    mask-image: radial-gradient(85% 62% at 34% 46%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 1) 78%);
}
/* Holds <GantryLogo/> — placement and ink only. The lockup's own geometry
   (mark size, gap, baseline lock) is the design system's; this panel used to
   pair a bare mark with .cg-auth-aside-word, which is how the auth screen
   ended up showing something that wasn't the Gantry logo. */
.cg-auth-aside-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    color: var(--brand-mist);
}
/* Heading + lede as ONE vertically-centered block. */
.cg-auth-quote-block {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    padding-bottom: 28px; /* optical center: nudge the block up a touch */
}
.cg-auth-quote {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 420;
    font-size: clamp(30px, 3.2vw, 42px);
    line-height: 1.16;
    letter-spacing: -0.005em;
    max-width: 14em;
    text-wrap: balance;
}
.cg-auth-quote em {
    font-style: italic;
    /* Fixed dark-surface accent: the panel never changes theme, so the
       canonical gold is correct in BOTH page themes. */
    color: var(--brand-gold-bright);
}
/* The lede — sits under the heading inside the centered block, sized to
   balance the display serif rather than read as a footnote. */
.cg-auth-aside-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: color-mix(in oklab, var(--brand-mist) 66%, transparent);
    max-width: 30em;
}
/* Legacy bottom-pinned foot — retired 2026-08-04 (the lede moved into
   .cg-auth-quote-block). Kept defined so stragglers render harmlessly. */
.cg-auth-aside-foot {
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in oklab, var(--brand-mist) 55%, transparent);
    max-width: 34em;
}

/* ---------- Right: minimal centered form column ---------- */
.cg-auth-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cg-auth-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
}
/* Brand in the bar only when the aside (which carries it) is gone. */
.cg-auth-mobile-brand {
    display: none;
}
.cg-auth-stage {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 24px 28px 96px;
    width: 100%;
}

/* The form column is deliberately card-less: no border, no shadow — the
   whitespace and the hairline inputs are the design. */
.cg-auth-card {
    width: 100%;
    max-width: 400px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.cg-auth-h1 {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0 0 10px;
}
.cg-auth-sub {
    color: var(--fg-3);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 26px;
}

.cg-auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-auth-submit {
    margin-top: 8px;
}
.cg-auth-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fg-3);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 10px;
}

.cg-auth-err {
    color: var(--bad);
    font-size: 12px;
    background: color-mix(in oklab, var(--bad) 8%, var(--bg-1));
    border: 1px solid color-mix(in oklab, var(--bad) 30%, var(--line));
    padding: 8px 10px;
    border-radius: var(--r-sm);
}

.cg-auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
    font-size: 11px;
    color: var(--fg-4);
    font-family: var(--font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.cg-auth-divider::before,
.cg-auth-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: var(--line);
}
.cg-auth-divider::before {
    left: 0;
}
.cg-auth-divider::after {
    right: 0;
}
.cg-auth-divider span {
    background: var(--bg);
    padding: 0 10px;
}

/* SSO providers stack — full-width quiet buttons under the divider. */
.cg-auth-providers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-auth-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--fg-4);
    text-align: center;
}
.cg-auth-foot a {
    color: var(--fg-3);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
}
.cg-auth-foot a:hover {
    color: var(--brand-text);
}

.cg-auth-org-banner {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    margin-bottom: 18px;
}

/* Sidecard — retired by the split relayout (the quote panel replaced it).
   Kept defined for safety; nothing renders it. */
.cg-auth-sidecard {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px;
}

/* Code input — minmax(0,1fr) + min-width:0 override the input's intrinsic
   default width (~180px), which otherwise blows the row out of the card. */
.cg-code-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
    max-width: 340px;
}
.cg-code-input {
    min-width: 0;
    width: 100%;
    height: 52px;
    text-align: center;
    font-size: 22px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--fg);
    outline: none;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.cg-code-input:focus {
    border-color: var(--line-strong);
    background: var(--bg-2);
}

/* SSO step list */
.cg-sso-steps {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-sso-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--fg-3);
}
.cg-sso-step.active {
    color: var(--fg);
    border-color: var(--line-2);
}
.cg-sso-step.done {
    color: var(--fg-2);
}
.cg-sso-step-mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-3);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-3);
}
.cg-sso-step.done .cg-sso-step-mark {
    color: var(--good);
    border-color: color-mix(in oklab, var(--good) 40%, var(--line));
    background: color-mix(in oklab, var(--good) 10%, var(--bg-3));
}
.cg-sso-step.active .cg-sso-step-mark {
    color: var(--brand-text);
    border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
    background: var(--bg-2);
}

@keyframes cg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Progress dots */
.cg-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 22px;
}
.cg-progress-dot {
    width: 24px;
    height: 4px;
    border-radius: var(--r-sm);
    background: var(--line);
}
.cg-progress-dot.active {
    background: var(--fg);
}

.cg-org-match {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px;
}

.cg-review {
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.cg-review-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
.cg-review-row:last-child {
    border-bottom: 0;
}

/* ---------- Narrow viewports: the slate panel collapses away ---------- */
@media (max-width: 980px) {
    .cg-auth-aside {
        display: none;
    }
    .cg-auth-mobile-brand {
        display: inline-flex;
    }
    .cg-auth-top {
        justify-content: space-between;
    }
    .cg-auth-stage {
        padding: 16px 20px 72px;
    }
}