/* ============================================================
   auth.css — Flex Europa · finaldesign
   ONE stylesheet for all three account pages (§3.8): sign in, create
   account, reset password. They carry the same chrome and differ only
   in which fields the panel holds, so a file each would be three
   copies of the same rules — the same reasoning that gave error.css
   five pages and checkout.css five steps.

   REUSE: .page-head and .breadcrumb for the band under the header;
   .field / .fieldset / .consent / .form-status / .text-action for
   every control; .btn for every action; .container for the gutters.
   This file adds only three things that did not already exist — the
   panel-and-rail layout, the label row that carries the Show/Hide
   toggle, and the sent panel on the reset page.

   No raw colour lives here (§1.4). The two layout metrics are local
   custom properties on the block, the way error.css scopes
   --errorpage-measure, because nothing outside these pages needs to
   read them.
   ============================================================ */

.auth {
  /* The panel and its rail together. Wider than this and a two-field
     sign-in form sprawls into a 1280px container with the fields
     stretched past a comfortable typing measure; narrower and the rail
     no longer holds its list without wrapping every line. */
  --auth-max:  960px;
  --auth-rail: 340px;

  padding-block: var(--space-2xl) var(--space-3xl);
}

.auth__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--auth-rail));
  gap: var(--space-2xl);
  align-items: start;
  max-inline-size: var(--auth-max);
  margin-inline: auto;
}

.auth__layout--verification {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* ---------------------------------------------------------------- Panel
   The page and the panel are both --color-bg, so the hairline is the
   only thing drawing the edge. That is this direction's grammar: a
   spec sheet is defined by its rules, not by a fill or a shadow. */
.auth__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg);
  border: var(--hairline);
}

.auth__panel--verification {
  border-block-start: 4px solid var(--color-accent-strong);
}

.auth__form { display: flex; flex-direction: column; gap: var(--space-lg); }

/* "Keep me signed in" and the reset link share a row, and wrap onto
   two lines together once the phone is too narrow to hold both. Both
   sides are already --step-size tall on their own, so the row needs no
   height of its own to keep the targets legal. */
.auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
}

.auth__actions { display: flex; flex-direction: column; gap: var(--space-md); }
/* The submit is the one thing the page is for, so it takes the panel's
   full width rather than sitting as a small button in a large frame. */
.auth__submit { inline-size: 100%; }

.auth__note { font-size: var(--fs-tiny); color: var(--color-text-muted); }


.field--verification-code {
  align-items: center;
}

.field--verification-code .field__input {
  max-inline-size: 280px;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: .24em;
  text-align: center;
}

.field--verification-code .field__input::placeholder {
  letter-spacing: .24em;
}

.auth__resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding-block-start: var(--space-lg);
  border-block-start: var(--hairline);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.auth__resend form { display: inline-flex; }
.auth__resend .text-action { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- Rail
   The same off-white panel the contact page puts its details in, so
   the two form pages read as one pair rather than two treatments. */
.auth__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: var(--hairline);
}
.auth__aside-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}
.auth__aside-text { font-size: var(--fs-sm); color: var(--color-text-muted); }
/* axe's link-in-text-block: a link separated from its surrounding text
   by colour alone needs 3:1 against that text. The underline is a cue
   that does not depend on colour at all (WCAG 1.4.1). */
.auth__aside-text a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth__list { display: flex; flex-direction: column; gap: var(--space-md); }
.auth__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.auth__list-item .icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 2px;
  color: var(--color-accent-strong);
}

/* The rail's closing move — a rule, then the one link to the sibling
   page. Separated so it reads as the panel's foot and not as a fifth
   item in the list above it. */
.auth__aside-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block-start: var(--space-lg);
  border-block-start: var(--hairline);
}

/* ---------------------------------------------------------------- Sent panel
   Reset password only. Success REPLACES the form, so a still-filled
   form cannot invite a second send — the same contract the contact
   page's success state honours, and deliberately the same anatomy, so
   the two read as one pattern.

   NOTE for a future turn: this and .contact__sent are now two copies
   of one block. A third instance is the point at which it should be
   lifted into components.css as a shared component rather than
   written out again. */
.auth__sent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-accent-tint);
  border: var(--hairline);
}
.auth__sent-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent-deep);
}
.auth__sent-mark .icon { inline-size: 22px; block-size: 22px; }
.auth__sent-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.auth__sent-text { font-size: var(--fs-sm); color: var(--color-text-muted); max-inline-size: var(--measure); }

/* ---------------------------------------------------------------- Breakpoints */
@media (max-width: 991px) {
  /* Stacked, the pair no longer needs the two-column measure — but it
     does still need a ceiling, or the panel runs the full width of a
     tablet and the fields stretch past reading length again. */
  .auth__layout {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: var(--container-narrow);
  }
}

@media (max-width: 575px) {
  .auth { padding-block: var(--space-xl) var(--space-2xl); }
  .auth__panel { padding: var(--space-lg); }
  .auth__sent { padding: var(--space-lg); }

  .auth__layout--verification { grid-template-columns: minmax(0, 1fr); }
  .field--verification-code .field__input { max-inline-size: none; }
  .auth__resend { align-items: flex-start; flex-direction: column; }
}