/* ==========================================================================
   EDIC auth surface  —  v3
   --------------------------------------------------------------------------
   Sign in, forgot password, reset password. Rebuilt against edic-tokens.css,
   replacing portal/auth/css/espandar-login-page.css.

   What changed and why:
     - The old sheet resolved its own --auth-* palette out of the legacy
       --brand-*, --surface-* and --text-* tokens in site.css. That indirection was
       the last thing keeping site.css on the critical path for these pages.
       The palette now comes straight from the semantic layer.
     - The card was a 30px-radius, backdrop-blurred panel wearing a gradient
       accent bar, above a 58px navy gradient button with a coloured drop
       shadow. Three separate devices all shouting "this is the important
       box" on a page that contains exactly one box. The card is now an
       ordinary v3 surface and the button is the ordinary v3 primary button,
       so the sign-in form looks like the portal it opens rather than like a
       different product.
     - Fields reuse .ed-field / .ed-label / .ed-error from edic-ui.css. The
       leading icon is the only thing this sheet adds to an input, because it
       is the only thing the shared primitive does not cover.
     - No gradients, no !important, no hard-coded colour or size.

   Namespace: .ed-auth-*   Requires: .ed-scope on an ancestor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE
   These pages render with hide_portal_chrome, so .portal-content is the whole
   viewport. It is made a column here so the card can take the slack and
   centre itself against the real height rather than against its own.
   -------------------------------------------------------------------------- */
.ed-auth-page .portal-content {
    display: flex;
    flex-direction: column;
}

/* Every auth template wraps its include in .ed-scope, so the flex chain from
   .portal-content down to .ed-auth runs through a plain block that stops it:
   a column flex container stretches its items across the cross axis, not
   along the main one, so .ed-auth's `flex: 1 1 auto` had nothing to grow
   inside. Passing the growth through is what lets .ed-auth-main centre the
   card against the real viewport height rather than against its own. */
.ed-auth-page .portal-content > .ed-scope {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
}

.ed-auth {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ed-space-8);
}

/* --------------------------------------------------------------------------
   HEADER
   The brand and the display controls. Deliberately not a bordered bar: there
   is nothing below it to separate it from until the card, and the card has
   its own edge.
   -------------------------------------------------------------------------- */
.ed-auth-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-4);
}

.ed-auth-brand {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
    text-decoration: none;
}

/* The brand asset is cropped to the lockup itself, 911x181, with no padding
   baked into the file. Sizing the slot by that ratio rather than by height
   means `contain` never letterboxes it. Both the light and dark files share
   these dimensions, so the theme swap cannot nudge the mark. */
.ed-auth-brand-logo {
    inline-size: clamp(150px, 17vw, 190px);
    aspect-ratio: 911 / 181;
    block-size: auto;
    max-inline-size: none;
    object-fit: contain;
}

.ed-auth-controls {
    display: flex;
    align-items: center;
    gap: var(--ed-space-2);
}

/* --------------------------------------------------------------------------
   CARD
   -------------------------------------------------------------------------- */
.ed-auth-main {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
}

.ed-auth-card {
    inline-size: min(460px, 100%);
    padding: var(--ed-space-8);
    background: var(--ed-surface);
    border: 1px solid var(--ed-separator-soft);
    border-radius: var(--ed-radius-lg);
    /* The one place a shadow is earned: the card floats on an empty canvas
       with no other content to establish depth by contrast. */
    box-shadow: var(--ed-shadow-raised);
}

.ed-auth-mark {
    display: block;
    inline-size: clamp(200px, 56%, 260px);
    aspect-ratio: 1400 / 320;
    block-size: auto;
    max-inline-size: none;
    margin: 0 auto var(--ed-space-6);
    object-fit: contain;
}

.ed-auth-title {
    margin: 0;
    font-size: var(--ed-text-display);
    font-weight: var(--ed-weight-semibold);
    letter-spacing: var(--ed-tracking-title);
    line-height: var(--ed-leading-tight);
    text-align: center;
}

.ed-auth-subtitle {
    max-inline-size: 42ch;
    margin: var(--ed-space-3) auto var(--ed-space-8);
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-secondary);
    text-align: center;
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.ed-auth-form {
    display: grid;
    gap: var(--ed-space-5);
}

/* An auth field is a touch target before it is a form control, so these
   inputs run taller than the dense in-portal default. */
.ed-auth-input {
    position: relative;
    display: block;
}

.ed-auth-input .form-control {
    min-block-size: 44px;
    padding-inline-start: var(--ed-space-10);
    font-size: var(--ed-text-body);
}

.ed-auth-input--reveal .form-control {
    padding-inline-end: var(--ed-space-10);
}

.ed-auth-input-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--ed-space-3);
    transform: translateY(-50%);
    inline-size: 20px;
    block-size: 20px;
    color: var(--ed-text-tertiary);
    pointer-events: none;
}

/* Show/hide password. A button, so it is reachable by keyboard; unlabelled
   in the visual sense, so its accessible name is swapped by the script. */
.ed-auth-reveal {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--ed-space-2);
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    color: var(--ed-text-tertiary);
    background: none;
    border: 0;
    border-radius: var(--ed-radius-pill);
    cursor: pointer;
    transition: color var(--ed-duration) var(--ed-ease),
                background-color var(--ed-duration) var(--ed-ease);
}

.ed-auth-reveal:hover {
    color: var(--ed-text);
    background: var(--ed-fill-subtle);
}

.ed-auth-reveal:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

.ed-auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ed-space-3);
    font-size: var(--ed-text-subhead);
}

.ed-auth-submit {
    inline-size: 100%;
}

/* --------------------------------------------------------------------------
   FOOTNOTES
   -------------------------------------------------------------------------- */
.ed-auth-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ed-space-2);
    margin: var(--ed-space-8) 0 0;
    font-size: var(--ed-text-subhead);
    line-height: var(--ed-leading-snug);
    color: var(--ed-text-tertiary);
    text-align: center;
}

.ed-auth-note svg {
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
}

.ed-auth-footer {
    font-size: var(--ed-text-subhead);
    color: var(--ed-text-tertiary);
    text-align: center;
}

/* --------------------------------------------------------------------------
   RTL
   Everything above is written in logical properties, so the only thing left
   to mirror is the icon, which is positioned against a physical edge by the
   browser's own transform.
   -------------------------------------------------------------------------- */
[dir="rtl"] .ed-auth-input-icon {
    transform: translateY(-50%) scaleX(1);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .ed-auth {
        gap: var(--ed-space-6);
    }

    .ed-auth-header {
        justify-content: center;
    }

    .ed-auth-card {
        padding: var(--ed-space-5);
    }

    .ed-auth-subtitle {
        margin-block-end: var(--ed-space-6);
    }
}

/* --------------------------------------------------------------------------
   SHOWCASE
   The sign-in page is the first thing anyone sees, and until v3 it carried
   its weight in the card: a blurred, gradient-trimmed panel with a coloured
   drop shadow. That was three devices competing on a page with one box, and
   stripping them was right.

   This is the other way to make the page arresting - give the impact its own
   surface and leave the form quiet. The card is untouched: still an ordinary
   v3 surface, still the ordinary primary button. Everything loud happens in
   a panel beside it that asks nothing of the user.

   Deliberately >= 900px only. Below that the panel is not rendered at all and
   the page is exactly the centred card it is today, which is what the tablets
   on the floor get: no gradient to composite, no extra paint.
   -------------------------------------------------------------------------- */
.ed-auth-stage {
    display: grid;
    justify-items: center;
    inline-size: 100%;
}

/* Not `visibility` or opacity - the panel must not exist below the breakpoint,
   so its gradients never enter the paint path on the floor devices. */
.ed-auth-showcase {
    display: none;
}

@media (min-width: 900px) {
    .ed-auth-stage {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        /* The stacked layout centres its single child; here each item owns
           its track, or the panel floats inside a wider column and the gap
           to the card reads as uneven. */
        justify-items: stretch;
        gap: var(--ed-space-12);
        inline-size: min(1080px, 100%);
    }

    /* `isolation` keeps the glow's blend inside the panel; without it the
       stacking context is the page and the blend reaches the canvas. */
    .ed-auth-showcase {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-block-size: 520px;
        padding: var(--ed-space-10);
        overflow: hidden;
        isolation: isolate;
        border-radius: var(--ed-radius-lg);
        /* The one hard-coded pair in this sheet. Both are token values; they
           are written literally because the panel keeps its dark field in
           light and dark theme alike, so it cannot resolve --ed-surface. */
        background: var(--ed-navy-900);
        color: var(--ed-grey-0);
    }
}

/* The kiln glow. Two offset radials rather than one: a single centred radial
   reads as a vignette, while an off-centre pair reads as a light source. Both
   are azure - the second was violet, which put a purple gradient on the page's
   most prominent surface while --ed-violet-500 is documented as "used
   sparingly". Separating the two by lightness rather than hue keeps the
   two-source reading without spending the secondary accent here. */
.ed-auth-glow {
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(38% 44% at 22% 78%,
            rgba(0, 176, 240, .55) 0%, rgba(0, 176, 240, 0) 68%),
        radial-gradient(46% 38% at 76% 22%,
            rgba(111, 209, 245, .20) 0%, rgba(111, 209, 245, 0) 70%);
}

/* Limestone strata. Thin, low-contrast, and diagonal so they never line up
   with the card's edge and read as a texture instead of a grid. */
.ed-auth-strata {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .06) 0px,
        rgba(255, 255, 255, .06) 1px,
        transparent 1px,
        transparent 22px
    );
    /* Fades the texture out before it reaches the copy, so the strata never
       cut through a line of text. */
    mask-image: linear-gradient(to top, transparent 0%, #000 42%, #000 100%);
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    /* Two animations, on different properties and at durations that do not
       divide into one another. 24 and 17 drift in and out of phase over four
       minutes, so the panel never settles into a beat the eye can follow --
       which is what separates a field that feels alive from one that is
       visibly looping. */
    .ed-auth-glow {
        animation:
            ed-auth-drift  24s var(--ed-ease) infinite alternate,
            ed-auth-kindle 17s var(--ed-ease) infinite alternate;
    }

    /* The strata creep along their own 118deg axis rather than across it, so
       the movement reads as the texture settling instead of sliding.
       background-position rather than transform: the layer is inset to 0 and
       its mask is measured from that box, so translating it would both expose
       an unstyled band at one edge and shift the fade off the copy. One slow
       repaint on one decorative element, above 900px only, is the cheaper
       mistake. */
    .ed-auth-strata {
        animation: ed-auth-creep 32s var(--ed-ease) infinite alternate;
    }
}

/* Slow enough to be felt rather than watched. The page is on screen for the
   few seconds it takes to type a password, so a full cycle is never seen. */
@keyframes ed-auth-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(var(--ed-auth-drift-x, 2.5%), -2%, 0) scale(1.06); }
}

/* A kiln does not glow at a constant rate, and the amplitude here is small
   enough that the panel reads as breathing rather than pulsing. */
@keyframes ed-auth-kindle {
    from { opacity: .82; }
    to   { opacity: 1; }
}

/* Two tile periods along the gradient axis: 44px at 118deg resolves to
   roughly 39px across and 21px down. Alternating, so it never has to meet
   itself seamlessly. */
@keyframes ed-auth-creep {
    from { background-position: 0 0; }
    to   { background-position: 39px 21px; }
}

/* --------------------------------------------------------------------------
   RTL
   A gradient has no logical-property equivalent: `at 22% 78%` is a physical
   coordinate and stays bottom-left however the document is flipped. Left
   alone, the panel moves to the right of the card in Persian while its light
   source does not, so the glow ends up on the inner edge pointing at the form
   instead of on the outer edge. Both layers and the drift are mirrored by
   hand, which is the only way to do it.
   -------------------------------------------------------------------------- */
[dir="rtl"] .ed-auth-glow {
    --ed-auth-drift-x: -2.5%;
    background:
        radial-gradient(38% 44% at 78% 78%,
            rgba(0, 176, 240, .55) 0%, rgba(0, 176, 240, 0) 68%),
        radial-gradient(46% 38% at 24% 22%,
            rgba(111, 209, 245, .20) 0%, rgba(111, 209, 245, 0) 70%);
}

[dir="rtl"] .ed-auth-strata {
    background: repeating-linear-gradient(
        62deg,
        rgba(255, 255, 255, .06) 0px,
        rgba(255, 255, 255, .06) 1px,
        transparent 1px,
        transparent 22px
    );
}

/* Larger than --ed-text-display on purpose. This is the only line on the
   page that is allowed to be a headline rather than a UI label. */
.ed-auth-showcase-line {
    max-inline-size: 16ch;
    margin: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: var(--ed-weight-semibold);
    letter-spacing: var(--ed-tracking-display);
    line-height: var(--ed-leading-tight);
}

.ed-auth-showcase-modules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ed-space-2);
    margin: var(--ed-space-8) 0 0;
    padding: 0;
    list-style: none;
}

.ed-auth-showcase-modules li {
    padding: var(--ed-space-1) var(--ed-space-3);
    font-size: var(--ed-text-caption);
    letter-spacing: var(--ed-tracking-caption);
    color: var(--ed-grey-0);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--ed-radius-pill);
}

/* The card sizes itself in the centred layout; in the split it must not take
   the slack the 1fr column leaves. */
@media (min-width: 900px) {
    .ed-auth-stage .ed-auth-card {
        inline-size: 460px;
        align-self: center;
    }
}