/* Sign in, register and "registration received" pages: a brand panel beside
   the form on wide screens, stacked on phones. Theme tokens only, so every
   theme — including the dark one — colours it. */

body.ax-page { margin: 0; background: var(--canvas); color: var(--ink); }

.ax-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Brand panel ------------------------------------------------------ */
.ax-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px calc(20px + env(safe-area-inset-right)) 26px calc(20px + env(safe-area-inset-left));
  background:
    radial-gradient(700px 300px at 100% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 65%),
    radial-gradient(600px 320px at 0% 100%, color-mix(in srgb, var(--brand-2) 45%, transparent), transparent 60%),
    linear-gradient(150deg, var(--brand), var(--sidebar-bg));
  color: #fff;
}
.ax-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ax-logo-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: color-mix(in srgb, #fff 16%, transparent); font-size: 17px;
}
.ax-logo strong { font-size: 19px; letter-spacing: -.02em; }
.ax-brand-copy { display: grid; gap: 10px; max-width: 520px; }
.ax-brand-kicker { color: color-mix(in srgb, #fff 72%, transparent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ax-brand h2 { margin: 0; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.15; letter-spacing: -.03em; }
.ax-brand p { margin: 0; color: color-mix(in srgb, #fff 82%, transparent); font-size: 14px; line-height: 1.6; }
.ax-points, .ax-steps { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ax-points li, .ax-steps li { display: flex; align-items: flex-start; gap: 12px; }
.ax-points i, .ax-steps b {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 11px;
  background: color-mix(in srgb, #fff 14%, transparent); font-size: 14px; font-style: normal;
}
.ax-points span, .ax-steps span { display: grid; gap: 1px; color: color-mix(in srgb, #fff 78%, transparent); font-size: 12.5px; }
.ax-points strong, .ax-steps strong { color: #fff; font-size: 14px; }
.ax-brand-card { display: none; }

/* ---- Form panel ------------------------------------------------------- */
.ax-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 26px calc(16px + env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.ax-card {
  width: min(460px, 100%);
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--ink) 12%, transparent);
}
.ax-card.wide { width: min(640px, 100%); }
.ax-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; }
.ax-back:hover { color: var(--brand); }
.ax-kicker { display: block; margin-bottom: 6px; color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ax-card h1 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.03em; }
.ax-lead { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.ax-alert {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface)); color: var(--danger);
}
.ax-alert ul { margin: 0; padding: 0; list-style: none; }
.ax-alert.info { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: color-mix(in srgb, var(--info) 9%, var(--surface)); color: var(--ink); }

.ax-form { display: grid; gap: 14px; }
.ax-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ax-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ax-field > span { color: var(--ink); font-size: 12.5px; font-weight: 750; }
.ax-field > span small { color: var(--muted); font-weight: 600; }
.ax-field .field, .ax-field .select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px;
  background-color: var(--surface); color: var(--ink); font: inherit; font-size: 15px; outline: 0;
}
.ax-field .select { padding-right: 38px; background-position: right 14px center; }
.ax-field .field::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.ax-field .field:focus, .ax-field .select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.ax-field .ax-help { color: var(--muted); font-size: 11.5px; }
.ax-field .ax-error { color: var(--danger); font-size: 12px; font-weight: 650; }
.ax-field:has(.ax-error) .field { border-color: var(--danger); }
.ax-password { position: relative; }
.ax-password .field { padding-right: 70px; }
.ax-password button {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--surface-2);
  color: var(--brand); font-size: 12px; font-weight: 800; cursor: pointer;
}
.ax-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ax-submit {
  width: 100%; min-height: 50px; margin-top: 4px; border: 0; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--brand); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 28%, transparent);
  transition: background-color .15s ease, transform .15s ease;
}
.ax-submit:hover { background: var(--brand-2); }
/* Dark theme: the bright green button takes dark text so it stays readable. */
:root[data-theme="midnight"] .ax-submit { color: #04170e; }
.ax-submit:active { transform: translateY(1px); }
.ax-secondary {
  width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid var(--line); border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 750;
  text-decoration: none; cursor: pointer;
}
.ax-secondary:hover { border-color: var(--brand); color: var(--brand); }
.ax-alt { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 13.5px; }
.ax-alt a { color: var(--brand); font-weight: 800; text-decoration: none; }
.ax-alt a:hover { text-decoration: underline; }
.ax-note { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; padding: 12px 14px; border-radius: 13px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ax-note i { margin-top: 2px; color: var(--brand); }
.ax-foot { color: var(--muted); font-size: 12px; text-align: center; }
.ax-foot a { color: var(--muted); font-weight: 750; }

/* ---- Registration received ------------------------------------------- */
.ax-done-icon {
  width: 64px; height: 64px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 20px;
  background: color-mix(in srgb, var(--success, var(--brand)) 14%, var(--surface)); color: var(--success, var(--brand)); font-size: 28px;
}
.ax-next { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.ax-next li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.ax-next b { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); color: var(--brand); font-size: 13px; }
.ax-next span { font-size: 13.5px; line-height: 1.5; }
.ax-next code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: 13px; }

@media (min-width: 720px) {
  .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-grid .full { grid-column: 1 / -1; }
  .ax-card { padding: 34px 32px 28px; }
}

@media (min-width: 1000px) {
  .ax-shell { grid-template-columns: minmax(380px, 1fr) minmax(0, 1.1fr); }
  .ax-brand { min-height: 100dvh; padding: 36px 48px; justify-content: space-between; }
  .ax-brand-copy { gap: 14px; }
  .ax-brand-card {
    display: grid; gap: 8px; max-width: 420px; padding: 14px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent); border-radius: 18px;
    background: color-mix(in srgb, #fff 8%, transparent); backdrop-filter: blur(6px);
  }
  .ax-brand-card-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #fff 8%, transparent); font-size: 13px; }
  .ax-brand-card-row i { width: 18px; color: var(--accent); text-align: center; }
  .ax-brand-card-row span { flex: 1; }
  .ax-brand-card-row em { font-style: normal; font-size: 11px; font-weight: 800; color: color-mix(in srgb, #fff 70%, transparent); }
  .ax-brand-card-row.ready em { color: #8ff0bd; }
  .ax-panel { padding: 40px 32px; }
}

@media (max-width: 999px) {
  /* Phones and tablets: a short header, the form right after it. */
  .ax-brand .ax-points, .ax-brand .ax-steps, .ax-brand p { display: none; }
  .ax-brand h2 { font-size: 20px; }
}