/* Auth pages — sign in, create account, reset password, the demo launcher and the
   error pages (403 / 404 / 500) — on the dashboard's quiet-luxury system.

   Loaded after figbloom-theme.css and dashboard-premium.css and scoped to .au
   (the <main> element), so none of it reaches the signed-in pages. Colour comes
   only from the .pd tokens (which come from the --fb-* theme tokens), spacing is
   the same 4px scale, and nothing here uses a red or an icon background except
   the one place red is real: a failed sign-in / a server error.

   These pages deliberately do NOT use Bootstrap's .form-control / .form-check /
   .btn: the theme pads those for the signed-in app (which is what hid the
   "Keep me signed in" box and pushed the radio buttons away from their labels).
   Inputs are 16px so iOS does not zoom the page on focus. */

body.au-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pd.au {
  width: 100%;
  max-width: 456px;
  margin: 0 auto;
  /* Anchored near the top rather than vertically centred, so moving to the next step of a form does not make the logo jump. */
  padding: clamp(32px, 9vh, 88px) 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 14px;
}

.au, .au *, .au *::before, .au *::after { box-sizing: border-box; }

/* Bootstrap's utility is not guaranteed to be on every page that uses this kit. */
.au .d-none, .au [hidden] { display: none !important; }

/* --- Frame ---------------------------------------------------------------- */
.au .au-brand { display: flex; justify-content: center; }
.au .au-brand img { display: block; height: 44px; width: auto; }
.au .au-brand:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 6px; border-radius: 6px; }

.au .au-card {
  padding: 32px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 18px 40px -28px rgba(16, 24, 20, 0.22);
}

.au .au-title {
  margin: 0 0 6px !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--pd-text) !important;
}
.au .au-sub { margin: 0 0 24px !important; font-size: 14.5px; line-height: 1.5; color: var(--pd-muted); text-wrap: pretty; }

.au .au-foot { margin: 0; text-align: center; font-size: 12.5px; color: var(--pd-muted); }
.au .au-foot a { color: var(--pd-muted) !important; text-decoration: underline; text-underline-offset: 2px; }
.au .au-foot a:hover { color: var(--pd-text) !important; }

/* --- Messages --------------------------------------------------------------- */
.au .au-alert {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
/* An alert straight under the heading, with no line of text between (the account-security page). */
.au .au-alert.au-first { margin-top: 18px; }
.au .au-alert-danger { background: var(--pd-danger-bg); border-color: color-mix(in srgb, var(--pd-danger) 30%, transparent); color: var(--pd-danger); }
.au .au-alert-success { background: var(--pd-success-bg); border-color: color-mix(in srgb, var(--pd-success) 30%, transparent); color: var(--pd-success); }

/* --- Fields ------------------------------------------------------------------ */
.au .au-field { margin: 0 0 16px; }
.au .au-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--pd-text); }
.au .au-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.au .au-label-row .au-label { margin: 0; }
.au .au-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--pd-muted); }

.au .au-input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 10px;
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 16px;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--pd-fast) var(--pd-ease);
}
.au select.au-input { -webkit-appearance: menulist; appearance: auto; padding-right: 10px; }
.au input[type='file'].au-input { height: auto; padding: 9px 12px; font-size: 14px; }
.au input[type='file'].au-input::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 8px;
  background: var(--pd-hover);
  color: var(--pd-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.au .au-input::placeholder { color: var(--pd-faint); }
.au .au-input:hover { border-color: color-mix(in srgb, var(--pd-text) 32%, var(--pd-surface)); }
.au .au-input:focus { outline: 2px solid var(--pd-accent); outline-offset: 1px; border-color: var(--pd-accent); }
.au .au-input[readonly] { background: var(--pd-hover); color: var(--pd-muted); }

/* A one-time code: big, centred, tabular. The placeholder stays plain so it is not spaced out too. */
.au .au-input-code { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: 0.5em; text-indent: 0.5em; font-variant-numeric: tabular-nums; }
.au .au-input-code::placeholder { font-size: 15px; font-weight: 400; letter-spacing: 0; text-indent: 0; }

.au .au-input-wrap { position: relative; }
.au .au-input-wrap .au-input { padding-right: 48px; }
.au .au-eye {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pd-muted);
  cursor: pointer;
}
.au .au-eye:hover { background: var(--pd-hover); color: var(--pd-text); }
.au .au-eye:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 0; }
.au .au-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au .au-eye .au-eye-off { display: none; }
.au .au-eye[aria-pressed='true'] .au-eye-on { display: none; }
.au .au-eye[aria-pressed='true'] .au-eye-off { display: block; }

/* Two-way choice (email / phone, email / SMS) as native radios in a fieldset: arrow keys and screen
   readers work as they should, the inputs are only visually hidden. */
.au .au-seg, .au .au-group { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
.au .au-seg > legend, .au .au-group > legend { float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--pd-text); }
.au .au-seg-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  background: var(--pd-hover);
}
.au .au-seg-opt { position: relative; margin: 0; cursor: pointer; }
.au .au-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.au .au-seg-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pd-muted);
  transition: background var(--pd-fast) var(--pd-ease), color var(--pd-fast) var(--pd-ease);
}
.au .au-seg-opt:hover span { color: var(--pd-text); }
.au .au-seg-opt input:checked + span { background: var(--pd-surface); color: var(--pd-text); box-shadow: 0 1px 2px rgba(16, 24, 20, 0.1), 0 0 0 1px var(--pd-border); }
.au .au-seg-opt input:focus-visible + span { outline: 2px solid var(--pd-accent); outline-offset: 1px; }

.au .au-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--pd-text); cursor: pointer; }
.au .au-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pd-accent); cursor: pointer; }
.au .au-check a { color: var(--pd-accent) !important; font-weight: 600; }
.au .au-check a:hover { text-decoration: underline; }

.au .au-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 20px; }

/* --- Actions ------------------------------------------------------------------ */
.au .au-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--pd-accent);
  color: var(--pd-on-accent) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background var(--pd-fast) var(--pd-ease);
}
.au .au-btn:hover { background: var(--pd-accent-hover); }
.au .au-btn:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.au .au-btn:disabled { opacity: 0.75; cursor: progress; }
.au .au-btn .brand-spinner-icon { width: 18px; height: 18px; }
.au .au-btn-secondary { background: var(--pd-surface); border-color: var(--pd-border-strong); color: var(--pd-text) !important; }
.au .au-btn-secondary:hover { background: var(--pd-hover); }
.au .au-actions { display: grid; gap: 10px; margin-top: 24px; }

.au .au-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--pd-accent) !important;
  text-decoration: none;
  cursor: pointer;
}
.au .au-link:hover { text-decoration: underline; }
.au .au-link:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 3px; border-radius: 4px; }
.au .au-link:disabled { opacity: 0.6; cursor: progress; }

.au .au-lead { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--pd-text); }
/* A short bulleted list of what happened / what will happen (the account-security page). */
.au .au-list { display: grid; gap: 6px; margin: 0 0 20px; padding: 0 0 0 20px; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--pd-text); }
.au .au-list:empty { display: none; }
.au .au-slot { margin: 0 0 20px; }
.au .au-alt { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--pd-muted); }
.au .au-alt .au-link, .au .au-step-aside .au-link { text-decoration: underline; text-underline-offset: 3px; }
.au .au-step-aside { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--pd-muted); }

.au .au-btn-text { background: transparent; color: var(--pd-muted) !important; }
.au .au-btn-text:hover { background: var(--pd-hover); color: var(--pd-text) !important; }
.au .au-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }

/* Choosing between two paths (tenant / property manager): each is one button with a title and a line. */
.au .au-choices { display: grid; gap: 12px; }
.au .au-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--pd-border-strong);
  border-radius: 12px;
  background: var(--pd-surface);
  color: var(--pd-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pd-fast) var(--pd-ease), background var(--pd-fast) var(--pd-ease);
}
.au .au-choice:hover { border-color: var(--pd-accent); background: var(--pd-accent-tint); }
.au .au-choice:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.au .au-choice:disabled { opacity: 0.6; cursor: not-allowed; }
.au .au-choice-body { flex: 1; min-width: 0; }
.au .au-choice-title { display: block; font-size: 15px; font-weight: 600; }
.au .au-choice-desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; font-weight: 400; color: var(--pd-muted); }
.au .au-choice-go { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--pd-faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* "Step 2 of 6": a thin bar, not a stepper — the steps after the workspace are all optional. */
.au .au-progress { margin: 0 0 20px; }
.au .au-progress-label { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-muted); }
.au .au-progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: var(--pd-border); }
.au .au-progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pd-accent); transition: width 240ms var(--pd-ease); }

/* A plain line icon over a welcome or waiting message (no coloured disc behind it). */
.au .au-mark { display: block; width: 40px; height: 40px; margin: 4px auto 0; fill: none; stroke: var(--pd-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Waiting / status ---------------------------------------------------------- */
.au .au-spinner {
  width: 28px;
  height: 28px;
  margin: 28px auto 0;
  border: 3px solid var(--pd-accent-tint-strong);
  border-top-color: var(--pd-accent);
  border-radius: 50%;
  animation: au-spin 0.8s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }

.au .au-status { text-align: center; }
.au .au-code { margin: 0 0 12px; font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: var(--pd-faint); }
.au .au-code-danger { color: var(--pd-danger); }
.au .au-status .au-sub { max-width: 34ch; margin-left: auto !important; margin-right: auto !important; }
.au .au-status .au-actions { margin-top: 8px; }
.au .au-status .au-spinner:only-child { margin-top: 8px; }

@media (max-width: 480px) {
  .pd.au { padding: 24px 12px 24px; }
  .au .au-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .au * { transition: none !important; }
  .au .au-spinner { animation-duration: 2.4s; }
}