/* ---------------------------------------------------------------------------
   Auth side panel — the artwork panel beside a sign-in or sign-up card.

   Used by registration/_auth_aside.html on the Projects and Calculator auth pages.
   A stylesheet rather than per-template <style> because this is the THIRD page to
   want it, and three hand-copied blocks drift: the first version of this panel was
   a bordered, drop-shadowed tile that read as clip-art parked beside a form, and
   fixing that in one template would have left the others wrong.

   Two art modes, because the assets are genuinely different kinds of thing:

     data-art-mode="cover"    a full-bleed photograph. Fills the panel, with a
                              scrim so the copy stays legible over it.
     data-art-mode="texture"  a light illustration on a flat ground. Bleeds past
                              every edge and dissolves into the panel ink, so it
                              reads as atmosphere rather than an inserted picture.

   The panel colour comes from --auth-aside-ink / --auth-aside-ink-2 so a page can
   tune the ground to its artwork. Cool navy fights warm parchment; that pairing is
   what made the first attempt look cheap.
   --------------------------------------------------------------------------- */

.auth-layout {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1.75rem;
    width: 100%;
}

.auth-aside { display: none; }

@media (min-width: 1024px) {
    .auth-aside {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 0 0 var(--auth-aside-w, 400px);
        max-width: var(--auth-aside-w, 400px);
        /* Sized to its own content, NOT stretched to the form. A signup form runs to
           ~1000px; a panel matched to it leaves a dead band of empty ink. Sticky keeps
           it in view while a long form is filled in, rather than scrolling away after
           the first two fields. */
        align-self: flex-start;
        position: sticky;
        top: 5rem;
        height: min(var(--auth-aside-h, 700px), calc(100vh - 9rem));
        overflow: hidden;
        border-radius: 16px;
        background: linear-gradient(160deg,
                    var(--auth-aside-ink, #1b2340) 0%,
                    var(--auth-aside-ink-2, #0f1428) 100%);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
        padding: 2.25rem;
    }
}

.auth-aside__art {
    position: absolute;
    background-image: var(--auth-aside-art);
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Full-bleed photo. */
.auth-aside[data-art-mode="cover"] .auth-aside__art {
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: var(--auth-aside-art-opacity, 1);
}
/* Scrim: the copy sits at the bottom, so darken the bottom hard and the top lightly.
   Without it, light passages in a photograph make the headline unreadable at random
   viewport heights. */
.auth-aside[data-art-mode="cover"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
                rgba(8, 11, 25, .32) 0%,
                rgba(8, 11, 25, .12) 28%,
                /* Ramps hard from here: the kicker and headline start around 55% and a
                   bright strand of the helix crosses exactly there, which washed the
                   uppercase kicker out to near-invisible. Legibility of the copy wins
                   over showing another inch of artwork. */
                rgba(8, 11, 25, .70) 54%,
                rgba(8, 11, 25, .92) 76%,
                rgba(8, 11, 25, .97) 100%);
}

/* Illustration dissolved into the ground.
   ⚠️ Every edge must bleed or it reads as a photo in a frame. left/right negative kills
   the sides, top negative kills that one, and `aspect-ratio` makes the element EXACTLY
   as tall as the rendered image so the mask reaches full transparency at the pixel the
   image stops. Sizing it any other way leaves a hard horizontal line partway down,
   however gentle the gradient looks on its own. */
.auth-aside[data-art-mode="texture"] .auth-aside__art {
    left: -19%;
    right: -19%;
    top: -3.5rem;
    aspect-ratio: var(--auth-aside-art-ratio, 1 / 1);
    background-size: 100% 100%;
    opacity: var(--auth-aside-art-opacity, .34);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 99%);
}
/* A bloom behind the figure, so the panel is not a flat rectangle of ink. */
.auth-aside[data-art-mode="texture"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(70% 42% at 50% 22%,
                var(--auth-aside-bloom, rgba(216, 178, 113, .20)), transparent 70%);
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */

.auth-aside__body { position: relative; z-index: 1; }

.auth-aside__kicker {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--auth-aside-accent, #8fb6cc);
}
.auth-aside__title {
    color: #f7f9ff;
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 700;
    margin-top: .6rem;
    text-wrap: balance;
}
.auth-aside__text {
    color: rgba(247, 249, 255, .68);
    font-size: .875rem;
    line-height: 1.6;
    margin-top: .75rem;
}
.auth-aside__list {
    margin-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.auth-aside__item {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    color: rgba(247, 249, 255, .86);
    font-size: .8125rem;
    line-height: 1.5;
}
.auth-aside__item i {
    color: var(--auth-aside-accent, #8fb6cc);
    font-size: .8rem;
    line-height: 1.5;
    flex: none;
}