/*
  Sign in, create an account, reset a password (AuthLayout), and /account.

  The four forms sit on the page with no card, beside the front page's promise on its ruled panel;
  /account keeps one card per section, centred in a column.

  Everything here is prefixed `auth-`. `.brand` and `.btn` are borrowed on purpose — the wordmark
  and the hero's button, so these screens read as the same product rather than as a login bolted
  onto it.

  NO COLOUR ON THE ERROR STATE, and that is a decision rather than an omission. This host has one
  accent, teal, and it means "grew". The negative value in docs/design/README.md's table
  (#E8674F) was validated on the admin host's grounds, not these, and that file says to re-run the
  check rather than move a value across. So an error is carried by weight, position and
  role="alert". Give it a colour once the ramp has been measured here.
*/

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 1rem;
}

/* No .brand rule here on purpose: Screens' ground.css already has one, and a second treatment on
   the sign-in page would be a second wordmark. Its size is site.css's, beside the header's. */

.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: var(--raise);
}

.auth-card h1 {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}

/* ── the forms (AuthLayout): the form first, then the panel, side by side from 900px ── */
.auth-split {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--gutter) 3rem;
}

.auth-form {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  justify-self: center;
  width: 100%;
  max-width: 24rem;
}

/* On the page itself: the panel beside it is the one surface. */
.auth-split .auth-card {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* The hero's panel, a size down: a small logo, the promise, what a member can do. */
.auth-aside {
  position: relative;
  isolation: isolate;
  padding: 1.5rem 1.25rem;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--panel);
}
.auth-aside .mark { display: block; height: 2.5rem; width: auto; margin-bottom: 1rem; }
.auth-aside h2 { max-width: 16ch; font-size: var(--t-h3); }
.auth-aside .hero-can { margin-top: 1rem; gap: 10px; }
.auth-aside .hero-can li { font-size: var(--t-small); }
.auth-aside-fine { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-soft); }

@media (min-width: 900px) {
  .auth-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .auth-form { padding-block: 2rem; }
  .auth-split .auth-card h1 { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); }
  .auth-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: min(40rem, calc(100vh - 9rem));
    padding: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* Large and still, beside the form as on the 404. */
  .auth-aside .mark { height: clamp(5rem, 8vw, 7rem); margin-bottom: 2rem; }
  .auth-aside h2 { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: .98; letter-spacing: -.04em; }
  :lang(da) .auth-aside h2 { font-size: clamp(1.85rem, .9rem + 2vw, 3rem); }
  .auth-aside .hero-can { margin-top: 1.75rem; gap: 12px; }
  .auth-aside .hero-can li { font-size: 1.0625rem; }
  .auth-aside-fine { margin-top: 1.5rem; }
}

/* /account's way back, above its first card, in the product page's look (product.css's
   .product-back), which this page does not load. */
.auth-back { width: 100%; max-width: 26rem; font-size: var(--t-small); }
.auth-back a { color: var(--ink-soft); text-decoration: none; }
.auth-back a:hover { color: var(--ink); }

.auth-card .signout { margin-top: 1rem; }

/* A section of /account, one card each. */
.auth-card h2 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

/* "Signed in as" and "a link is on its way" carry an address, which may break after its "@"
   (Wording.Address); one too long even for that breaks where it must rather than leave the card. */
.auth-lede {
  color: var(--ink-soft);
  font-size: var(--t-small);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.auth-card > .auth-lede:last-child { margin-bottom: 0; }

/* What a change on /account just did. Ink and a tint, not teal: teal means "went up" alone. */
.auth-done {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-hi);
  background: var(--tint);
  color: var(--ink);
  font-size: var(--t-small);
}

.auth-field { margin-bottom: 1.1rem; }

/* A visible label, never a placeholder standing in for one: a placeholder vanishes the moment
   anyone types, which is when they most need to know which box they are in. */
.auth-field label {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.auth-input {
  width: 100%;
  /* A touch target, not a text line, and the submit button's height. */
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke-hi);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
}

.auth-input::placeholder { color: var(--ink-faint); }

/* Never `outline: none`. A keyboard is how half of this form is filled in. */
.auth-input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

/* Show, inside the password box's right edge (PasswordReveal, password.js). The box keeps room for
   it only once the script has shown it. Pressed, it is ink, and its eye is struck through. */
.auth-pw { position: relative; }
.auth-pw:has(> .auth-reveal:not([hidden])) .auth-input { padding-inline-end: 6rem; }

.auth-reveal {
  position: absolute;
  top: 2px;
  bottom: 2px;
  inset-inline-end: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline: 0.75rem;
  border: 0;
  border-radius: calc(var(--r-md) - 2px);
  background: none;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}
.auth-reveal[hidden] { display: none; }
.auth-reveal:hover { color: var(--ink); background: var(--tint); }
.auth-reveal:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.auth-reveal[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.auth-reveal .i-eye-off,
.auth-reveal[aria-pressed="true"] .i-eye { display: none; }
.auth-reveal[aria-pressed="true"] .i-eye-off { display: block; }

.auth-hint {
  color: var(--ink-faint);
  font-size: var(--t-small);
  margin: 0.4rem 0 0;
}

.auth-hint a { color: var(--ink-soft); }

.auth-msg {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-small);
  margin-top: 0.35rem;
}

.auth-error {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--ink-faint);
  background: var(--glass-hi);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
}

.auth-error p { margin: 0; }
.auth-error p + p { margin-top: 0.35rem; }

.auth-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}

.auth-check input { flex: none; width: 1rem; height: 1rem; accent-color: var(--ink); }

.auth-submit { width: 100%; min-height: 48px; }

/* The bot check's field (SignUpCheck): off screen rather than display:none, which some bots skip. */
.auth-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-alt {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

.auth-alt a { color: var(--ink); }