/* ==========================================================================
   GENESIS auth screens - Login / Register
   Design source: "Nuova proposta grafica.dc.html" -> data-screen-label="Web — Login"
   Built on the --gns-* tokens in tokens.css. Dark-first, matching the design.

   Scoped under .gns-auth so nothing here leaks into the rest of the (still
   light) site. Loaded only on the login and register pages.
   ========================================================================== */

.gns-auth {
  --auth-panel-w: 468px;
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr var(--auth-panel-w);
  background: var(--gns-bg);
  color: var(--gns-text);
  font-family: var(--gns-font);
}

/* Typography, form-control and legacy-override resets now live in
   gns-base.css, applied via the `gns-scope` class on this screen's root.
   Only the mono labels are re-declared here, since they are specific to the
   auth layout rather than a global default. */
.gns-auth .gns-field > label,
.gns-auth .gns-auth__nodes,
.gns-auth .gns-auth__seal-label {
  font-family: var(--gns-font-mono);
  text-transform: uppercase;
}

/* --------------------------------------------------------- left: story --- */
.gns-auth__story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0, 191, 255, .10), transparent 62%),
    var(--gns-grid),
    var(--gns-bg);
  min-height: 100vh;
}

.gns-auth__brand {
  position: absolute;
  left: 40px;
  top: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.gns-auth__brand img { display: block; }

/* The artboard draws the lockup at TWO sizes, not one: the G mark at 21x19 and
   the wordmark at 11px tall, gap 10. Sizing both to one height made the
   wordmark 2.4x too big. The mark needs an explicit width too - mark-g.svg
   carries only a viewBox (no width/height attributes, unlike the design's
   inline <svg width="21" height="19">), so `width:auto` had nothing to resolve
   against and collapsed to 0. Design: data-screen-label="Web - Login". */
.gns-auth__mark     { width: 21px; height: 19px; }
.gns-auth__wordmark { width: auto; height: 11px; }

/* Language pill. The design puts this in the site nav; the auth screen is
   full-bleed with no nav, so it lives here - the page must stay switchable. */
.gns-auth__lang {
  position: absolute;
  right: 36px;
  top: 34px;
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-tint);
  border: 1px solid var(--gns-border);
  z-index: 2;
}
.gns-auth__lang a,
.gns-auth__lang span {
  padding: 4px 10px;
  border-radius: var(--gns-r-pill);
  font-size: 11px;
  line-height: 1.4;
  text-decoration: none;
  /* Sits on the --gns-tint pill, which lifts the effective ground: at
     --gns-secondary-2 the inactive label measured 3.25:1. */
  color: var(--gns-body);
}
.gns-auth__lang .is-active {
  background: var(--gns-text);
  color: var(--gns-bg);
  font-weight: 700;
}

/* Centre visual. Deliberately CSS-only: the design's model render is a
   placeholder asset that was not supplied for production. Drop the real
   render in here when it arrives. */
.gns-auth__visual {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: min(560px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(0, 191, 255, .16), transparent 68%);
}
/* Centred with negative margins, NOT transform: the gns-spin and gns-float
   keyframes both animate `transform`, which would replace a centring
   translate() and knock these off-centre. */
.gns-auth__seal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 232px;
  height: 232px;
  margin: -116px 0 0 -116px;
  border-radius: 50%;
  background: var(--gns-seal);
  animation: gns-spin 8s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
          mask: radial-gradient(circle, transparent 58%, #000 59%);
}

/* The object the visitor was about to buy, sitting inside the ring. Sized to
   fit the ring's inner circle (58% of 232px) with breathing room. */
/* The artboard's left column is ONE large free-floating render, 560px wide with
   a drop shadow - not a small object inside a ring. It was sized at 118px to fit
   the inner circle of a 232px Proof-of-Print seal that the template stopped
   emitting, so it was being held to the dimensions of a ring that is no longer
   drawn. Fills .gns-auth__visual (min(560px, 42vw)) instead.

   Centred with inset+auto margins, NOT transform: the gns-float keyframes
   animate `transform`, which would replace a centring translate(). */
.gns-auth__object {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--gns-shadow-model);
  animation: gns-float 7s ease-in-out infinite;
}

/* The disc treatment, kept but narrowed to the case that needs it. Catalogue
   images are photographs with opaque backgrounds, so a raw square sits badly on
   the panel; rounding makes a photo read as a disc. The DEFAULT render and the
   handoff's own models are 1100x1100 transparent cut-outs, which the artboard
   shows uncropped - so this now applies only when a real product photo is on
   screen (see the is_default flag in template-parts/auth-story.php). */
.gns-auth__object--photo {
  border-radius: 50%;
  background: var(--gns-card);
}
/* Sits clear below the ring. The ring is 232px, so half of that plus a gap. */
.gns-auth__seal-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 138px);
  transform: translateX(-50%);
  max-width: 260px;
  white-space: normal;
  font: 500 9.5px/1.4 var(--gns-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gns-secondary);
  text-align: center;
  white-space: nowrap;
}

.gns-auth__tagline {
  position: absolute;
  left: 40px;
  bottom: 40px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}
.gns-auth__tagline h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--gns-text);
}
.gns-auth__tagline p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gns-secondary);
}

.gns-auth__nodes {
  position: absolute;
  right: 36px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gns-muted);
  z-index: 2;
}
.gns-auth__nodes i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gns-cyan);
  animation: gns-pulse 2s infinite;
}

/* ---------------------------------------------------------- right: form --- */
.gns-auth__panel {
  border-left: 1px solid var(--gns-border);
  background: var(--gns-surface);
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 100vh;
}

.gns-auth__tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-tint);
  border: 1px solid var(--gns-border);
  align-self: flex-start;
}
.gns-auth__tabs a,
.gns-auth__tabs span {
  padding: 9px 20px;
  border-radius: var(--gns-r-pill);
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  /* Same as the language pill above - inactive tab on a tint, 3.21:1 at
     --gns-secondary-2. */
  color: var(--gns-body);
  white-space: nowrap;
}
.gns-auth__tabs .is-active {
  background: var(--gns-text);
  color: var(--gns-bg);
  font-weight: 700;
}

.gns-auth__panel h1 {
  margin: 34px 0 8px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--gns-text);
}
.gns-auth__intro {
  margin: 0 0 26px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gns-secondary);
}

.gns-auth__form { display: flex; flex-direction: column; gap: 14px; }
.gns-field { display: flex; flex-direction: column; gap: 7px; }

/* Register has more fields than login, so pair them up. */
.gns-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .gns-row { grid-template-columns: 1fr; } }

/* The register panel needs more room than the login one; the single-field
   screens (forgot / reset / resend) need less. */
.gns-auth--wide   { --auth-panel-w: 560px; }
.gns-auth--narrow { --auth-panel-w: 440px; }

/* Consent checkboxes - same control as "remember me", but multi-line. */
.gns-consent {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gns-secondary-2);
  cursor: pointer;
  margin-top: 4px;
}
.gns-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.gns-consent i {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1px solid var(--gns-border-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.gns-consent input:checked + i {
  background: var(--gns-cyan);
  border-color: var(--gns-cyan);
  color: var(--gns-on-accent);
}
.gns-consent input:focus-visible + i { box-shadow: 0 0 0 3px var(--gns-cyan-tint-2); }
.gns-consent a { color: var(--gns-cyan-ink); text-decoration: none; }
.gns-consent a:hover { text-decoration: underline; }
.gns-field > label {
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}

/* Colours, focus ring, date-picker handling and autofill all come from
   gns-base.css via the `gns-scope` class. Sizing is the one exception: the
   site-wide baseline is a 46px field at 14px over a .12 border, but the login
   artboard draws EMAIL and PASSWORD at 48px / 13.5px over a .14 border.
   Scoped to .gns-auth so the rest of the site keeps the shared baseline.
   Design: data-screen-label="Web - Login". */
.gns-auth .gns-field > :where(input, select) {
  height: 48px;
  font-size: 13.5px;
  border-color: var(--gns-border-heavy);
}

.gns-field--password { position: relative; }
.gns-field--password input { padding-right: 44px; }
.gns-auth__reveal {
  position: absolute;
  right: 12px;
  bottom: 0;
  height: 48px;
  display: flex;
  align-items: center;
  color: var(--gns-secondary-2);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 13px;
}
.gns-auth__reveal:hover { color: var(--gns-text); }

.gns-auth__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  margin-top: 2px;
}
.gns-auth__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gns-secondary-2);
  cursor: pointer;
  user-select: none;
}
.gns-auth__remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.gns-auth__remember i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--gns-border-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  color: transparent;
  transition: background .15s ease, border-color .15s ease;
}
.gns-auth__remember input:checked + i {
  background: var(--gns-cyan);
  border-color: var(--gns-cyan);
  color: var(--gns-on-accent);
}
.gns-auth__remember input:focus-visible + i {
  box-shadow: 0 0 0 3px var(--gns-cyan-tint-2);
}
.gns-auth__forgot { color: var(--gns-cyan-ink); text-decoration: none; }
.gns-auth__forgot:hover { text-decoration: underline; }

.gns-btn {
  height: 52px;
  margin-top: 10px;
  border: 0;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
  font-family: var(--gns-font);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: var(--gns-glow-cta);
  transition: transform .15s ease, filter .15s ease;
}
.gns-btn:hover { filter: brightness(1.06); }
.gns-btn:active { transform: translateY(1px); }
.gns-btn:focus-visible { outline: 2px solid var(--gns-focus); outline-offset: 3px; }
.gns-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.gns-auth__foot {
  margin-top: auto;
  padding-top: 26px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--gns-muted);
  text-align: center;
}
.gns-auth__foot a { color: var(--gns-secondary-2); }
/* ----------------------------------------------------------- social row ---
   Artboard: "Oppure" rule + three provider buttons, h46 / r11 / .12 border /
   13px, stacked with a 10px gap. Buttons ship disabled until an identity
   provider is wired - see the comment in templates/login.php. */
.gns-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
}
.gns-auth__divider::before,
.gns-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  /* The artboard's own .09 - between --gns-border (.08) and -strong (.12),
     so there is no token that matches it exactly. */
  background: rgba(255, 255, 255, .09);
}
.gns-auth__divider span {
  font-size: 11.5px;
  color: var(--gns-muted);
}

.gns-auth__social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gns-social {
  height: 46px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gns-text);
  transition: border-color .15s ease, background-color .15s ease;
}
.gns-social__mark {
  font-family: var(--gns-font-mono);
  font-weight: 700;
  display: flex;
  align-items: center;
}
/* Google and Facebook are the artboard's cyan letterforms; Apple is a supplied
   glyph and stays on the panel's own ink. */
.gns-social__mark--brand { color: var(--gns-cyan-ink); }

.gns-social[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.gns-social:not([disabled]):hover {
  border-color: var(--gns-border-heavy);
  background: var(--gns-cyan-tint);
}
.gns-social__soon {
  margin: 2px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--gns-muted);
}

.gns-auth__alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
  font-size: 12.5px;
  text-align: center;
}
.gns-auth__alt a { color: var(--gns-cyan-ink); text-decoration: none; }
.gns-auth__alt a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- notes --- */
.gns-note {
  border-radius: var(--gns-r-input);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 16px;
  border: 1px solid;
}
.gns-note--error {
  background: rgba(255, 110, 255, .06);
  border-color: var(--gns-border-magenta);
  color: var(--gns-note-error-ink);
}
.gns-note--success {
  background: var(--gns-cyan-tint);
  border-color: var(--gns-border-cyan);
  color: var(--gns-note-success-ink);
}
.gns-note a { color: inherit; text-decoration: underline; }

/* ----------------------------------------------------- verification result --- */
/* The one auth screen with no form (templates/verify-email.php). It reports an
   outcome, so the panel is centred on its result rather than top-aligned under a
   form, and the switcher tabs are dropped - there is no second form to switch
   to. Everything else is the family's own furniture: .gns-btn, .gns-note,
   .gns-auth__alt. */
.gns-auth__panel--result {
  justify-content: center;
  text-align: center;
}
.gns-auth__panel--result h1 { margin-top: 0; }
.gns-auth__panel--result .gns-btn { align-self: stretch; }

/* The seal the visitor just earned. Same conic ring and mask geometry as
   .gns-auth__seal on the story panel, held still: a turning ring reads as
   "working on it", which is wrong on a finished result. */
.gns-result__seal {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  /* The *-ink tokens, not the raw brand hues: the mark sits on --gns-surface,
     which is white in the light theme, where #00BFFF/#FF6EFF wash out. The ring
     below keeps the raw brand colours - it is a shape, not a mark. */
  color: var(--gns-cyan-ink);
}
.gns-result__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gns-seal);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
          mask: radial-gradient(circle, transparent 62%, #000 63%);
}
.gns-result__glyph {
  position: relative;
  width: 34px;
  height: 34px;
}

/* Failure breaks the ring rather than recolouring it whole: the seal is the
   thing that did not close. Magenta is the family's error hue (.gns-note--error). */
.gns-result__seal--failed { color: var(--gns-magenta-ink); }
.gns-result__seal--failed .gns-result__ring {
  background: conic-gradient(
    var(--gns-magenta) 0 18%, transparent 0 25%,
    var(--gns-magenta) 0 43%, transparent 0 50%,
    var(--gns-magenta) 0 68%, transparent 0 75%,
    var(--gns-magenta) 0 93%, transparent 0
  );
}

/* Neutral ring for the two states that are not the visitor's doing: our end
   failed, or they opened the page without their link. Nothing is broken on
   their side, so neither gets the alarm colour. */
.gns-result__seal--muted { color: var(--gns-secondary); }
.gns-result__seal--muted .gns-result__ring { background: var(--gns-border-heavy); }

.gns-result__status {
  margin: 0 0 12px;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gns-muted);
}

/* One stamped moment on load: the ring settles, then the glyph lands. */
.gns-result__ring  { animation: gns-seal-set .42s cubic-bezier(.2, .8, .3, 1) both; }
.gns-result__glyph { animation: gns-seal-set .34s cubic-bezier(.2, .8, .3, 1) .18s both; }

@keyframes gns-seal-set {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------ 2FA code --- */
.gns-otp {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 6px 0 4px;
}
.gns-otp input {
  width: 100%;
  height: 56px;
  text-align: center;
  font-family: var(--gns-font-mono);
  font-size: 22px;
}

/* ------------------------------------------------------------ responsive --- */
/* Below 900px the two panels stack. The story panel's absolute positioning is
   abandoned entirely and it becomes a normal flow column - keeping absolute
   children in a short panel makes the seal, heading and label overlap. */
@media (max-width: 900px) {
  .gns-auth {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .gns-auth__story {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px 26px;
  }
  .gns-auth__brand,
  .gns-auth__lang,
  .gns-auth__visual,
  .gns-auth__tagline,
  .gns-auth__nodes {
    position: static;
    transform: none;
    inset: auto;
  }

  /* Logo and language pill share one row. The wordmark is wide, so cap it or
     it runs under the pill. */
  .gns-auth__brand { order: 1; max-width: calc(100% - 90px); }
  .gns-auth__brand img { height: 20px; max-width: 100%; object-fit: contain; object-position: left center; }
  .gns-auth__lang  { order: 2; margin-left: auto; margin-top: -30px; }

  /* The ring and object are absolutely positioned, so they contribute no
     height. Give the block an explicit height that fits ring + label, and keep
     the label absolute below the ring exactly as on desktop. */
  .gns-auth__visual {
    order: 3;
    align-self: center;
    position: relative;
    width: 190px;
    height: 190px;
    margin: 6px 0 4px;
  }
  .gns-auth__seal   { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
  /* Fills the 190px visual above, same as the desktop rule - the old 68px was
     sized for the removed seal ring. */
  .gns-auth__object { width: 100%; height: 100%; margin: 0; inset: 0; }
  .gns-auth__seal-label {
    top: calc(50% + 82px);
    max-width: 190px;
  }

  .gns-auth__tagline { order: 4; max-width: none; }
  .gns-auth__tagline h2 { font-size: 21px; }

  .gns-auth__nodes { order: 5; align-self: flex-end; }

  .gns-auth__panel {
    border-left: 0;
    border-top: 1px solid var(--gns-border);
    padding: 30px 24px 36px;
    min-height: 0;
  }
  .gns-auth__panel h1 { margin-top: 26px; font-size: 26px; }

  /* Re-stated after the rule above, which has equal specificity and would
     otherwise put the form screens' top margin back on the result heading. */
  .gns-auth__panel--result h1 { margin-top: 0; }
  .gns-result__seal { width: 68px; height: 68px; margin-bottom: 18px; }
  .gns-result__glyph { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .gns-auth__seal, .gns-auth__nodes i { animation: none; }
  .gns-result__ring, .gns-result__glyph { animation: none; }
}