/* =========================================================================
   Page — sign in ({en,de}/login.html)
   ========================================================================= */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
}

/* Darkening, not mint — the one rule L-FE-17 makes binding. No text is painted
   on this bloom today (the card sits above it), so nothing measured as a
   failure here; it is changed anyway, because a codified rule with a live
   counter-example in the tree is a rule people learn to ignore. */
.auth-wrap::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  top: -200px;
  right: -160px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 30% 30%,
    color-mix(in srgb, var(--nav-bg) 42%, transparent),
    transparent 70%
  );
}

/* NO SHADOW, and it is the older of DESIGN_TOKENS.md §9.1's two open items.
   A shadow is reserved for something that floats above the document and
   OCCLUDES it — a dropdown, a drawer, a dialog, the skip link. This card rests;
   it is the page. Its depth comes from the three grounds, and it has the
   largest step the system offers: `--doc-panel` on the hero gradient.
 *
   §9.2 is the second reason and it is the sharper one — *one hairline, never
   two.* A border AND a shadow on the same edge reads as a seam rather than as a
   frame, so the shadow was not merely unearned, it was working against the
   border beside it. Kept as a pair with `.signin-card` (components/signin.css):
   the two are one look, and closing one would have made them disagree. */
.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 26px;
  background: var(--doc-panel);
  color: var(--doc-ink);
  border: 1px solid var(--doc-line);
  border-radius: var(--radius-lg);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.auth-logo img {
  height: 44px;
  width: auto;
}

.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}


/* The card's content is rendered by pages/login.js — the form deliberately
   does not exist in the markup (L-FE-08) — so the sizing lives here. */
.auth-card > h1 {
  margin: 0 0 4px;
  font-size: 21px;
  text-align: center;
}

.auth-foot p {
  margin: 8px 0 0;
}