/* ==========================================================================
   EventGo Australia — /login/ and /signup/ · AUTH EXPERIENCE V1
   --------------------------------------------------------------------------
   THE ACCESS PASS. Two zones:

     world   an event-world panel: one Higgsfield plate (an empty venue for
             login, light through a ticket's perforation for sign-up) and
             the EventGo Australia PASS, built from the ticket's own
             materials — the stub, the perforation and the holographic
             security line (violet → blue → teal), the same vocabulary as
             the checkout's Access Route.
     stub    the form, set as the pass's stub: a perforated edge and two
             notches between the zones.

   Desktop is an editorial split (world 55%, sticky, the stub scrolls);
   below 900px the world becomes a band above the form and the perforation
   turns horizontal — rebuilt, not squeezed.

   Loaded by /login/ and /signup/ only. Everything is scoped under .eg-c-auth
   and .eg-c-ash (the auth shell header), so no rule reaches another route.
   Only transform and opacity animate. Reduced motion: nothing moves; every
   element is drawn in its final state. No raw hex: tokens and neutral
   rgb(255 255 255 / a) only.
   ========================================================================== */

/* The pass's materials are declared on the pass as well as the page: the
   entrance clones the pass into the Route Pass overlay, OUTSIDE this
   section, and a clone that inherits nothing loses its gradients and its
   type (measured: the gradient "Go" vanished mid-flight). */
.eg-c-auth, .eg-c-pass {
  --a-sec: linear-gradient(90deg, var(--c-violet), var(--c-blue) 52%, var(--c-teal));
  --a-dot: rgb(255 255 255 / 0.26);
  --a-notch: 1.375rem;
}
.eg-c-auth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh; min-height: 100svh;
  background: var(--c-ink);
}
@media (min-width: 900px) {
  .eg-c-auth { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
}

/* ==========================================================================
   THE WORLD
   ========================================================================== */
.eg-c-auth__world {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(13.5rem, 34vh, 17.5rem); height: clamp(13.5rem, 34svh, 17.5rem);
  padding-top: var(--hdr-h);
  background: var(--c-ink-soft);
}
@media (min-width: 900px) {
  .eg-c-auth__world {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
  }
}
@media (max-height: 540px) and (max-width: 899.98px) {
  /* a short phone, or a phone on its side: the band gives the form the room */
  .eg-c-auth__world { height: calc(var(--hdr-h) + 7.5rem); }
}

.eg-c-auth__plate, .eg-c-auth__plate img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.eg-c-auth__plate img { object-fit: cover; object-position: 60% 40%; }
[data-auth="signup"] .eg-c-auth__plate img { object-position: 50% 50%; }
/* The ground the pass stands on: the plate darkens toward the stub and the
   floor so the header, the pass and the caption always read. */
.eg-c-auth__world::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(8 12 40 / 0.55), rgb(8 12 40 / 0) 30%, rgb(8 12 40 / 0) 55%, rgb(8 12 40 / 0.9)),
    linear-gradient(90deg, rgb(8 12 40 / 0.3), rgb(8 12 40 / 0) 45%);
}

/* ---- the caption (desktop) --------------------------------------------- */
.eg-c-auth__cap { display: none; }
@media (min-width: 900px) {
  .eg-c-auth__cap {
    display: block; position: absolute; left: clamp(2rem, 6vw, 6rem); bottom: clamp(2rem, 7vh, 4.5rem);
    max-width: 24ch;
  }
  .eg-c-auth__capk {
    font-size: var(--t-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--c-text-2); margin-bottom: .6rem;
  }
  .eg-c-auth__capt {
    font-family: var(--font-headline); font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); line-height: 1.02; letter-spacing: -.03em;
    text-wrap: balance;
  }
}

/* ==========================================================================
   THE PASS — decorative, built from the ticket's own materials
   ========================================================================== */
.eg-c-pass {
  --pw: clamp(15.5rem, 70vw, 19rem);
  position: absolute; z-index: 1;
  left: 50%; top: calc(var(--hdr-h) + (100% - var(--hdr-h)) * .5);
  width: var(--pw); aspect-ratio: 2.27;
  translate: -50% -50%; rotate: -5deg;
  display: grid; grid-template-columns: minmax(0, 1fr) 27%;
  border-radius: calc(var(--pw) * .055);
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c-violet) 26%, transparent), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, color-mix(in srgb, var(--c-teal) 14%, transparent), transparent 60%),
    linear-gradient(160deg, var(--c-surface), var(--c-ink-soft));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 2.2rem 4.5rem -1rem rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(0 0 0 / 0.25);
  /* the two NOTCHES at the perforation, cut out of the card */
  -webkit-mask:
    radial-gradient(circle at 73% 0, transparent calc(var(--pw) * .028), #000 calc(var(--pw) * .03)) top / 100% 51% no-repeat,
    radial-gradient(circle at 73% 100%, transparent calc(var(--pw) * .028), #000 calc(var(--pw) * .03)) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle at 73% 0, transparent calc(var(--pw) * .028), #000 calc(var(--pw) * .03)) top / 100% 51% no-repeat,
    radial-gradient(circle at 73% 100%, transparent calc(var(--pw) * .028), #000 calc(var(--pw) * .03)) bottom / 100% 51% no-repeat;
  overflow: hidden;
  font-family: var(--font-ui); line-height: 1.6;
  font-size: calc(var(--pw) * .042);
}
@media (min-width: 900px) {
  .eg-c-pass {
    --pw: clamp(20rem, 31vw, 30rem);
    top: 44%; left: 50%;
  }
}
@media (max-height: 540px) and (max-width: 899.98px) {
  .eg-c-pass { --pw: 12.5rem; }
}
/* The face is laid out AROUND the security line (58% down): the brand
   above, the label sitting on the line, the tagline below it. */
.eg-c-pass__face { position: relative; padding: 9% 7% 0; min-width: 0; }
.eg-c-pass__brand { display: flex; align-items: center; gap: .6em; }
.eg-c-pass__brand img { width: 2.1em; height: auto; flex: none; }
.eg-c-pass__brand span {
  font-family: var(--font-display); font-weight: 900; font-size: 1.35em; letter-spacing: -.02em; line-height: 1;
}
.eg-c-pass__brand b {
  font-weight: 900; background: var(--a-sec); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eg-c-pass__brand small {
  display: block; margin-top: .35em; font-family: var(--font-ui); font-weight: 700;
  font-size: .42em; letter-spacing: .38em; text-transform: uppercase; color: var(--c-text-2);
}
.eg-c-pass__k {
  position: absolute; left: 7%; right: 4%; bottom: calc(42% + .7em);
  font-size: .72em; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--c-text-2);
  white-space: nowrap; overflow: hidden;
}
/* THE SECURITY LINE — the same holographic line as the Access Route */
.eg-c-pass__sec {
  position: absolute; left: 0; right: 0; top: 58%; height: 2px;
  background: var(--a-sec);
  box-shadow: 0 0 .9em color-mix(in srgb, var(--c-violet) 70%, transparent);
  transform-origin: left center;
}
.eg-c-pass__tag { position: absolute; left: 7%; right: 4%; top: calc(58% + 1.1em); font-size: .68em; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.eg-c-pass__tag i { font-style: normal; }
.eg-c-pass__tag i:nth-child(1) { color: color-mix(in srgb, var(--c-violet) 55%, var(--c-text)); }
.eg-c-pass__tag i:nth-child(2) { color: color-mix(in srgb, var(--c-blue) 70%, var(--c-text)); }
.eg-c-pass__tag i:nth-child(3) { color: var(--c-teal); }
/* the stub, behind its perforation */
.eg-c-pass__stub {
  position: relative; display: grid; place-items: center;
  background-image: radial-gradient(circle, var(--a-dot) 42%, transparent 46%);
  background-size: 3px calc(var(--pw) * .042); background-repeat: repeat-y; background-position: 0 50%;
}
.eg-c-pass__stub span {
  writing-mode: vertical-rl; rotate: 180deg;
  font-size: .7em; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--c-text-2);
}
[data-pass="signup"] .eg-c-pass__stub span { color: var(--c-teal); }
/* the validation light — parked off the card; eg-auth.js and the entrance
   move it across with transform */
.eg-c-pass__sheen {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.16) 45%, color-mix(in srgb, var(--c-teal) 30%, transparent) 55%, transparent);
  transform: translateX(-120%) skewX(-12deg); opacity: 0;
}
/* VALIDATED — login success: the stub reads it, the line holds teal */
.eg-c-auth[data-auth-state="success"] .eg-c-pass__stub span { color: var(--c-teal); }

/* ==========================================================================
   THE STUB — the form zone
   ========================================================================== */
.eg-c-auth__stub {
  position: relative;
  display: grid; align-content: start; justify-items: center;
  padding: clamp(1.75rem, 5vw, 2.5rem) var(--c-gut) clamp(3rem, 8vh, 5rem);
  background: var(--c-ink);
}
/* the PERFORATION between the zones: a row of holes, horizontal on a phone */
.eg-c-auth__stub::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; pointer-events: none;
  background-image: radial-gradient(circle, var(--a-dot) 42%, transparent 46%);
  background-size: 12px 3px; background-repeat: repeat-x;
}
@media (min-width: 900px) {
  .eg-c-auth__stub {
    align-content: center;
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--hdr-h) + clamp(1.5rem, 5vh, 3.5rem)) clamp(2rem, 5vw, 5.5rem) clamp(2rem, 6vh, 4rem);
  }
  .eg-c-auth__stub::before {
    top: 0; bottom: 0; left: -1px; right: auto; width: 3px; height: auto;
    background-size: 3px 12px; background-repeat: repeat-y;
  }
  /* the two NOTCHES, where the stub tears from the pass */
  .eg-c-auth__stub::after {
    content: ""; position: absolute; left: calc(var(--a-notch) / -2); top: calc(var(--hdr-h) + 2.5rem);
    width: var(--a-notch); height: var(--a-notch); border-radius: 50%;
    background: var(--c-ink); pointer-events: none;
    box-shadow: 0 calc(100svh - var(--hdr-h) - 5rem - var(--a-notch)) 0 var(--c-ink);
  }
}

/* A PHONE ON ITS SIDE (≥640 wide, ≤540 tall). The band-over-form layout
   spent the whole 390px screen on the band and no field was visible, so the
   pass and the stub sit side by side — but NOT sticky (CLAUDE.md: nothing
   sticky below 900px). The world column scrolls with the page; the pass is
   centred in its first screen. */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) and (max-width: 899.98px) {
  .eg-c-auth { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
  .eg-c-auth__world { height: auto; min-height: 100vh; min-height: 100svh; }
  .eg-c-pass {
    --pw: min(36vw, 17rem);
    top: calc(var(--hdr-h) + (100vh - var(--hdr-h)) * .5);
    top: calc(var(--hdr-h) + (100svh - var(--hdr-h)) * .5);
  }
  .eg-c-auth__stub { padding-top: calc(var(--hdr-h) + .75rem); }
  .eg-c-auth .eg-c-auth__h { font-size: 2.25rem; }
  .eg-c-auth__stub::before {
    top: 0; bottom: 0; left: -1px; right: auto; width: 3px; height: auto;
    background-size: 3px 12px; background-repeat: repeat-y;
  }
}

.eg-c-auth__main {
  width: 100%; max-width: 27rem;
  display: grid; gap: .75rem; align-content: start;
}
.eg-c-auth__h {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: .98; letter-spacing: -.035em;
  text-wrap: balance;
}
.eg-c-auth__lead { color: var(--c-text-2); font-size: var(--t-lead); line-height: 1.5; max-inline-size: 34ch; text-wrap: pretty; }

/* ---- the form ------------------------------------------------------------ */
.eg-c-auth__form { display: grid; gap: 1.1rem; margin-top: 1rem; max-width: none; }
.eg-c-auth .eg-c-field { gap: .45rem; }
.eg-c-auth .eg-c-field label { font-size: .9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.eg-c-field__opt { font-weight: 500; color: var(--c-text-3); }
.eg-c-auth .eg-c-field :is(input, select) {
  min-height: 3.25rem; padding: .85rem 1rem; font-size: 1rem;
  border-radius: 14px; background: rgb(255 255 255 / 0.045);
  border-color: var(--c-line-strong);
  transition: none;
}
.eg-c-auth .eg-c-field :is(input, select):hover { border-color: rgb(255 255 255 / 0.32); }
.eg-c-auth .eg-c-field :is(input, select):focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px; border-color: var(--c-accent);
}
.eg-c-auth .eg-c-field__hint { font-size: .8125rem; color: var(--c-text-3); }
.eg-c-auth .eg-c-field__err { font-size: .875rem; line-height: 1.4; color: var(--status-critical); }
.eg-c-auth .eg-c-field__err:empty { display: none; }
.eg-c-auth .eg-c-field__err:not(:empty)::before {
  content: "!"; display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin-right: .45em;
  border-radius: 50%; background: var(--status-critical); color: var(--c-ink);
  font-size: .75em; font-weight: 800; vertical-align: .05em;
}
.eg-c-auth .eg-c-field[data-invalid] :is(input, select) { border-color: var(--status-critical); }
/* autofill: keep the dark field instead of the browser's pale yellow */
.eg-c-auth .eg-c-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--c-text);
  box-shadow: 0 0 0 100px var(--c-surface) inset;
  caret-color: var(--c-text);
}

.eg-c-auth__pair { display: grid; gap: 1.1rem; }
@media (min-width: 480px) { .eg-c-auth__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- password ------------------------------------------------------------ */
.eg-c-pw__box { position: relative; }
.eg-c-auth .eg-c-pw__box input { width: 100%; padding-right: 6.25rem; }
.eg-c-pw__toggle {
  position: absolute; top: 50%; right: .3rem; translate: 0 -50%;
  display: inline-flex; align-items: center; gap: .4rem;
  min-width: 44px; min-height: 44px; padding: 0 .8rem; border-radius: 10px;
  font-size: .875rem; font-weight: 600; color: var(--c-text-2);
}
.eg-c-pw__toggle:hover { color: var(--c-text); background: rgb(255 255 255 / 0.06); }
.eg-c-pw__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
.eg-c-pw__eye { width: 1.15rem; height: 1.15rem; }
.eg-c-pw__toggle[aria-pressed="true"] .eg-c-pw__eye { opacity: .55; }

/* the strength meter IS the security line: perforated until it is earned */
.eg-c-meter { display: grid; gap: .4rem; }
.eg-c-meter__track {
  position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden;
  background-image: radial-gradient(circle, var(--a-dot) 42%, transparent 46%);
  background-size: 9px 3px; background-repeat: repeat-x;
}
.eg-c-meter__track i {
  position: absolute; inset: 0; background: var(--a-sec);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .3s var(--c-ease);
}
.eg-c-meter[data-level="1"] .eg-c-meter__track i { transform: scaleX(.34); }
.eg-c-meter[data-level="2"] .eg-c-meter__track i { transform: scaleX(.67); }
.eg-c-meter[data-level="3"] .eg-c-meter__track i { transform: scaleX(1); }
.eg-c-meter__t { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--c-text-3); }
.eg-c-meter[data-met] [data-pw-rule]::before { content: "✓ "; color: var(--c-teal); }
.eg-c-meter__lvl { font-weight: 600; color: var(--c-text-2); }

/* ---- remember / forgot ---------------------------------------------------- */
.eg-c-auth__row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.eg-c-check {
  display: flex; align-items: flex-start; gap: .7rem;
  min-height: 44px; padding-block: .6rem;
  font-size: .9375rem; color: var(--c-text-2); cursor: pointer;
}
.eg-c-check input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; flex: none; accent-color: var(--c-violet); }
.eg-c-check a { color: var(--c-accent); text-decoration: underline; text-underline-offset: .2em; }
.eg-c-auth__forgot, .eg-c-auth__switch a, .eg-c-auth__fine a {
  color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
.eg-c-auth__forgot { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }

/* ---- the primary action --------------------------------------------------- */
.eg-c-auth__submit {
  position: relative; overflow: hidden; width: 100%; min-height: 3.5rem; margin-top: .25rem;
  letter-spacing: .01em; text-transform: none; font-size: 1rem;
}
.eg-c-auth__busy {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0;
  background: var(--a-sec); transform: translateX(-100%);
}
.eg-c-auth__submit[data-busy] .eg-c-auth__busy { opacity: 1; animation: eg-auth-busy 1.1s var(--c-ease) infinite; }
.eg-c-auth__submit[data-busy] { cursor: progress; }
@keyframes eg-auth-busy { to { transform: translateX(100%); } }

/* ---- the alternative ------------------------------------------------------ */
.eg-c-auth__or { display: flex; align-items: center; gap: .9rem; color: var(--c-text-3); font-size: .8125rem; }
.eg-c-auth__or::before, .eg-c-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.eg-c-auth__google { width: 100%; min-height: 3.5rem; gap: .75rem; letter-spacing: .01em; text-transform: none; font-size: 1rem; }
.eg-c-auth__gnote {
  margin: .75rem 0 0; padding-left: .875rem;
  border-left: 2px solid var(--c-line-strong);
  font-size: var(--t-meta); line-height: 1.5; color: var(--c-text-2);
}
.eg-c-auth__g { width: 1.25rem; height: 1.25rem; flex: none; }

.eg-c-auth__switch { margin-top: 1.25rem; color: var(--c-text-2); font-size: .9375rem; }
.eg-c-auth__fine { color: var(--c-text-3); font-size: .875rem; }

/* ---- THE NOTE — every result, one place ---------------------------------- */
.eg-c-auth__note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start;
  padding: .95rem 1rem; border-radius: 14px;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--c-line-strong);
}
.eg-c-auth__note[hidden] { display: none; }
.eg-c-auth__note:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.eg-c-auth__noteic { width: 3px; align-self: stretch; border-radius: 3px; background: var(--c-blue); }
.eg-c-auth__note[data-tone="error"] { border-color: color-mix(in srgb, var(--status-critical) 60%, transparent); }
.eg-c-auth__note[data-tone="error"] .eg-c-auth__noteic { background: var(--status-critical); }
.eg-c-auth__note[data-tone="success"] { border-color: color-mix(in srgb, var(--c-teal) 55%, transparent); }
.eg-c-auth__note[data-tone="success"] .eg-c-auth__noteic { background: var(--a-sec); }
.eg-c-auth__notet { font-weight: 700; font-size: .9375rem; }
.eg-c-auth__noted { color: var(--c-text-2); font-size: .9375rem; line-height: 1.5; }
.eg-c-auth__noted a { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.eg-c-auth__noted button {
  display: inline; min-height: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--c-accent); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.eg-c-auth__noted:empty { display: none; }

/* A sent / success state replaces the form with the note alone */
.eg-c-auth__form[data-done] > :not([data-auth-note]):not([data-auth-live]) { display: none; }

/* ---- the reset view (same document) --------------------------------------
   Without JavaScript, #reset is a :target; with it, eg-auth.js sets
   data-view on the section. Either way exactly one view is on screen. */
.eg-c-auth__reset { display: none; }
.eg-c-auth__reset:target { display: grid; }
.eg-c-auth[data-view] .eg-c-auth__reset, .eg-c-auth[data-view] [data-auth-view] { display: none; }
.eg-c-auth[data-view="login"] [data-auth-view="login"],
.eg-c-auth[data-view="reset"] [data-auth-view="reset"] { display: grid; }
.eg-c-auth__reset h2:focus { outline: none; }
/* ONE h1 PER PAGE, AND IT NEVER LEAVES. While the reset view shows, the
   login view steps out of the layout (display: contents) and everything in
   it but the h1 goes; the h1 stays in the accessibility tree, visually
   hidden, so the reset form reads as a sub-task of the page it is on. */
.eg-c-auth__stub:has(.eg-c-auth__reset:target) > [data-auth-view="login"],
.eg-c-auth[data-view="reset"] [data-auth-view="login"] { display: contents; }
.eg-c-auth__stub:has(.eg-c-auth__reset:target) > [data-auth-view="login"] > :not(.eg-c-auth__h),
.eg-c-auth[data-view="reset"] [data-auth-view="login"] > :not(.eg-c-auth__h) { display: none; }
.eg-c-auth__stub:has(.eg-c-auth__reset:target) > [data-auth-view="login"] > .eg-c-auth__h,
.eg-c-auth[data-view="reset"] [data-auth-view="login"] > .eg-c-auth__h {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- debug-only control -------------------------------------------------- */
[data-debug-only][hidden] { display: none !important; }
.eg-c-auth__dbg {
  display: grid; gap: .35rem; margin-top: 1.5rem; padding: .75rem; border-radius: 12px;
  border: 1px dashed var(--c-line-strong); font-size: .8125rem; color: var(--c-text-3);
}
.eg-c-auth__dbg select { min-height: 40px; padding: .4rem .6rem; border-radius: 8px; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-line-strong); font: inherit; }

/* ==========================================================================
   THE AUTH SHELL HEADER
   ========================================================================== */
.eg-c-ash__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.eg-c-ash__end { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.25rem); }
.eg-c-ash__help {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .4rem;
  font-size: .9375rem; color: var(--c-text-2);
}
.eg-c-ash__help:hover { color: var(--c-text); }
.eg-c-ash__q { font-size: .9375rem; color: var(--c-text-3); }
.eg-c-ash__door { text-transform: none; letter-spacing: .01em; font-size: .9375rem; }
@media (max-width: 559.98px) { .eg-c-ash__q { display: none; } }

/* ==========================================================================
   ENTRANCE — the stub's contents rise as the Route Pass lifts
   --------------------------------------------------------------------------
   Gated on .eg-c-js (set pre-paint only when motion is allowed) so the page
   is complete without JavaScript and under reduced motion. eg-auth.js adds
   .is-in when EG.entered resolves; the CSS failsafe shows everything after
   3s whatever happens to the script.
   ========================================================================== */
.eg-c-js .eg-c-auth [data-auth-rise] {
  opacity: 0; transform: translateY(14px);
  animation: eg-auth-failsafe 0s 3s forwards;
}
.eg-c-js .eg-c-auth.is-in [data-auth-rise] {
  opacity: 1; transform: none; animation: none;
  transition: opacity .5s var(--c-ease), transform .6s var(--c-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
@keyframes eg-auth-failsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .eg-c-auth [data-auth-rise] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .eg-c-meter__track i { transition: none; }
  .eg-c-auth__submit[data-busy] .eg-c-auth__busy { animation: none; transform: none; }
  .eg-c-pass__sheen { display: none; }
}