/* =========================================================================
   Page — the public auth surfaces
   -------------------------------------------------------------------------
   Registration, verification, forgot-password, reset-password and invitation
   acceptance — and the sign-in page, for its `.auth-links` row. They share `pages/login.css`'s full-bleed card; what is here is
   the little each of them needs on top of it.

   The registration card is WIDER than the others, because it is the one with
   four sections rather than two fields. Everything else about the surface —
   the gradient, the card, the logo, the footer — is the sign-in page's, so a
   visitor who signs in and a visitor who registers are looking at one place.
   ========================================================================= */

/* A registration form in a 420 px column is a very long page. The rule is on
   the CARD rather than on `.auth-wrap`, so the four narrow pages keep theirs. */
.auth-card:has(.register-form) {
  max-width: 640px;
}

/* `:has()` is not everywhere yet, and this is a width rather than a
   correctness property: without it the registration form renders in the
   standard column, taller and still usable. The class below is the same rule
   for the page module to reach for if it ever needs to; nothing sets it today,
   and it is here so the fallback is a decision rather than a discovery. */
.auth-card.is-wide {
  max-width: 640px;
}

/* ---- Sections inside a card ------------------------------------------------- */

.auth-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--doc-line);
}

.auth-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.auth-links {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12.5px;
}

/* ---- The "this worked" panel ------------------------------------------------ */

.auth-result {
  padding: 20px;
  border: 1px solid var(--sd-success-bd);
  border-radius: var(--radius-lg);
  background: var(--sd-success-bg);
}

.auth-result-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.auth-result-detail {
  margin: 0 0 12px;
  font-size: 13.5px;
  /* --sd-text and not the semantic foreground: the semantic fg/bg pairs measure
     3.5:1 – 4.2:1 in the light palette, which is AA for large text only. The
     same reasoning badge.css records as L-FE-03. */
  color: var(--sd-text);
}

/* ---- The tier chooser ------------------------------------------------------- */

.tier-choice {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.tier-choice legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.tier-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--sd-border);
  border-radius: var(--radius);
  background: var(--sd-surface);
  cursor: pointer;
}

.tier-option:hover {
  border-color: var(--sd-secondary);
}

/* The selected option is outlined AND its radio is checked, so the state is
   never carried by colour alone (audit rule E-4). */
.tier-option:has(.tier-radio:checked) {
  border-color: var(--sd-secondary);
  background: var(--sd-info-bg);
}

.tier-radio {
  flex: 0 0 auto;
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

.tier-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier-option-name {
  font-weight: 700;
  font-size: 14px;
}

.tier-option-price {
  font-size: 13px;
  color: var(--sd-secondary);
  font-weight: 600;
}

.tier-option-detail {
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}

/* --- The business-area chooser (U-816) --------------------------------------
   The tier chooser's shape with checkboxes instead of radios: several areas may
   be chosen. "Individual" is the last option and looks like the others. */
.area-choice {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.area-choice legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.area-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--sd-border);
  border-radius: var(--radius);
  background: var(--sd-surface);
  cursor: pointer;
}

.area-option:hover {
  border-color: var(--sd-secondary);
}

/* Outlined AND checked, so the state is never carried by colour alone (E-4). */
.area-option:has(.area-check:checked) {
  border-color: var(--sd-secondary);
  background: var(--sd-info-bg);
}

.area-check {
  flex: 0 0 auto;
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

.area-option-picture {
  flex: 0 0 auto;
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
}

.area-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.area-option-name {
  font-weight: 700;
  font-size: 14px;
}

.area-option-detail {
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}

/* --- The three steps (U-815) -------------------------------------------------
   One form in three parts; the indicator names all three and marks the current
   one with `aria-current="step"`, so the state is text and an attribute, never
   colour alone (E-4). The kind-of-offering choice borrows the tier chooser's
   classes: it is the same kind of choice, a radio card with a detail line. */
.register-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--doc-ink-soft);
}

.register-steps-item[aria-current="step"] {
  color: var(--doc-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.register-step-title {
  margin: 0 0 16px;
  font-size: 18px;
}

.register-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* The primary action stays on the right when "Back" is hidden on step one. */
.register-nav > .btn-primary {
  margin-left: auto;
}