/* Copyright A&I Solutions 2026 */

.auth-body {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: rgb(var(--scout-color-text, 248 250 252));
  font-family: var(--scout-font-body, "Open Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background:
    radial-gradient(ellipse 85% 74% at 10% 48%, rgb(5 99 133 / 0.62), transparent 64%),
    radial-gradient(ellipse 78% 80% at 93% 24%, rgb(0 143 125 / 0.62), transparent 66%),
    radial-gradient(ellipse 64% 64% at 82% 76%, rgb(0 91 83 / 0.48), transparent 68%),
    radial-gradient(ellipse 58% 72% at 43% 10%, rgb(1 45 76 / 0.60), transparent 66%),
    linear-gradient(134deg,
      transparent 0%,
      transparent 34%,
      rgb(0 20 34 / 0.18) 40%,
      rgb(19 128 119 / 0.42) 48%,
      rgb(2 47 65 / 0.56) 56%,
      transparent 67%),
    linear-gradient(180deg, #06111a 0%, #031421 42%, #041614 100%);
}

html:has(> body.auth-body) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.auth-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, 3fr) minmax(420px, 2fr);
}

.auth-art {
  display: flex;
  align-items: stretch;
  padding: 32px;
}

.auth-art-inner {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 560px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: rgb(var(--scout-color-text));
  border: 1px solid rgb(var(--scout-color-border) / var(--scout-alpha-border));
  border-radius: var(--scout-radius-lg);
  background: rgb(var(--scout-color-surface-glass) / var(--scout-alpha-surface-glass));
  box-shadow: var(--scout-shadow-glass);
  -webkit-backdrop-filter: var(--scout-filter-glass);
  backdrop-filter: var(--scout-filter-glass);
}

.auth-art-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgb(var(--scout-color-glass-shine) / var(--scout-alpha-glass-shine-strong)), rgb(var(--scout-color-glass-shine) / var(--scout-alpha-glass-shine-soft)) 24%, transparent 48%) top left / var(--scout-glass-shine-size) var(--scout-glass-shine-size) no-repeat,
    linear-gradient(315deg, rgb(var(--scout-color-glass-shine) / var(--scout-alpha-glass-shine-medium)), rgb(var(--scout-color-glass-shine) / var(--scout-alpha-glass-shine-faint)) 24%, transparent 48%) bottom right / var(--scout-glass-shine-size) var(--scout-glass-shine-size) no-repeat;
}

.auth-art-logo,
.auth-art-visual,
.auth-art-copy {
  position: relative;
  z-index: 1;
}

.auth-art-logo {
  width: 132px;
  margin: 28px 28px 0;
}

.auth-art-visual {
  min-height: 320px;
  margin: 20px;
  flex: 1 1 auto;
}

.auth-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 56px rgb(0 0 0 / 0.34));
}

.auth-art-copy {
  max-width: 560px;
  padding: 22px 36px 40px;
}

.auth-art-copy h1 {
  margin: 0;
  max-width: 520px;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.04;
}

.auth-art-copy p {
  max-width: 420px;
  color: rgb(var(--scout-color-text-muted, 203 213 225) / 0.82);
  font-size: 15px;
  line-height: 1.55;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.auth-form,
.auth-flow {
  display: grid;
  gap: 18px;
}

.auth-heading {
  display: grid;
  gap: 8px;
}

.auth-eyebrow {
  margin: 0;
  color: rgb(var(--scout-color-brand, 94 234 212));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-heading h1 {
  margin: 0;
  color: rgb(var(--scout-color-text-strong, 255 255 255));
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.15;
}

.auth-copy {
  margin: 0;
  color: rgb(var(--scout-color-text-muted, 226 232 240) / 0.76);
  font-size: 14px;
  line-height: 1.5;
}

.auth-field {
  display: grid;
  gap: 7px;
  color: rgb(var(--scout-color-text-muted, 226 232 240) / 0.86);
  font-size: 13px;
  font-weight: 600;
}

.auth-field input,
.auth-field textarea {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  padding: 0 13px;
  color: rgb(var(--scout-color-text, 248 250 252));
  background: rgb(var(--scout-color-surface-glass, 2 6 23) / var(--scout-alpha-surface-glass, 0.48));
  font: inherit;
  outline: none;
}

/* A multi-line field needs top/bottom padding and room to grow; it shares the
   input's border, colour and glass background so the two look of a piece. */
.auth-field textarea {
  min-height: 96px;
  padding: 11px 13px;
  line-height: 1.45;
  resize: vertical;
}

.auth-field input:focus,
.auth-field textarea:focus {
  border-color: rgb(var(--scout-color-brand, 94 234 212) / 0.80);
  box-shadow: 0 0 0 3px rgb(var(--scout-color-brand, 94 234 212) / 0.14);
}

.auth-password-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* The shared scout-password-wrap (components.css) sets this too, but
   components.css is imported into the Tailwind build inside
   @layer components and auth.css is unlayered -- unlayered wins over any
   layer, whatever the specificity. So the auth pages have to make the room
   themselves or typed text runs under the toggle (#6707). */
.auth-password-wrap input,
.scout-password-wrap input {
  padding-right: 44px;
}

.auth-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgb(var(--scout-color-text-muted, 148 163 184) / 0.85);
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms ease, color 120ms ease;
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: rgb(var(--scout-color-text, 248 250 252));
  outline: none;
}

.auth-password-toggle .auth-eye-hide {
  display: none;
}

.auth-password-toggle.is-visible .auth-eye-show {
  display: none;
}

.auth-password-toggle.is-visible .auth-eye-hide {
  display: inline;
}

.auth-primary,
.auth-secondary {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-primary {
  color: rgb(var(--scout-color-on-brand));
  background: rgb(var(--scout-color-brand) / var(--scout-alpha-brand));
  border: 1px solid rgb(var(--scout-color-brand) / 0.55);
}

.auth-primary:hover {
  background: rgb(var(--scout-color-brand-hover) / 0.70);
}

.auth-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.auth-submit-label {
  transition: opacity 160ms ease;
}

.auth-submit-indicator {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.auth-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin 720ms linear infinite;
}

/* htmx marks whichever element made the request, and for a form submit that
   is the form itself — so an unscoped descendant rule lit every indicator
   inside it. On the security-code panel that meant Verify and Resend code
   spinning together, as if the code were being checked and re-sent at once.
   A form submit is the primary button's request; a sibling that owns its own
   hx-post is marked directly and matches the second selector. */
.auth-form.htmx-request .auth-primary .auth-submit-label,
.auth-submit.htmx-request .auth-submit-label {
  opacity: 0;
}

.auth-form.htmx-request .auth-primary .auth-submit-indicator,
.auth-submit.htmx-request .auth-submit-indicator {
  opacity: 1;
}

/* htmx ships its own descendant rule (.htmx-request .htmx-indicator), and the
   indicator spans carry that class too, so the form's request would light this
   one whatever auth.css scopes above. The resend answers to its own request
   only, which reaches it through .auth-submit.htmx-request. */
.auth-form.htmx-request .auth-secondary.auth-submit .auth-submit-indicator {
  opacity: 0;
}

/* Resending is not a choice the user has while a code is being verified — the
   form already refuses the click — so the button steps aside rather than sit
   there looking available. visibility, not display, so the panel keeps its
   height and nothing jumps under the pointer. */
.auth-form.htmx-request .auth-secondary.auth-submit {
  visibility: hidden;
}

.auth-form.htmx-request .auth-primary[type="submit"],
.auth-submit.htmx-request {
  cursor: progress;
}

.auth-form.htmx-request :is(input, button, a) {
  pointer-events: none;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-secondary {
  color: rgb(var(--scout-color-text));
  border: 1px solid rgb(var(--scout-color-border) / var(--scout-alpha-border));
  background: rgb(var(--scout-color-surface-glass) / var(--scout-alpha-surface-glass));
  box-shadow: var(--scout-shadow-sm);
}

.auth-secondary:hover {
  color: rgb(var(--scout-color-text-strong));
  background: rgb(var(--scout-color-surface-glass) / var(--scout-alpha-surface-glass-strong));
}

.auth-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.auth-alert,
.auth-notice {
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.4;
}

.auth-alert {
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.36);
  background: rgba(127, 29, 29, 0.32);
}

.auth-notice {
  color: #bbf7d0;
  border: 1px solid rgba(134, 239, 172, 0.34);
  background: rgba(20, 83, 45, 0.28);
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.auth-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: rgb(var(--scout-color-brand));
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--scout-radius-md);
  background: transparent;
  transition: background var(--scout-transition-fast), border-color var(--scout-transition-fast), color var(--scout-transition-fast);
}

.auth-links a:hover,
.auth-links a:focus-visible {
  color: rgb(var(--scout-color-text-strong));
  background: rgb(var(--scout-color-brand) / 0.12);
  border-color: rgb(var(--scout-color-brand) / 0.28);
  outline: none;
}

@media (max-width: 720px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-art {
    display: none;
  }

  .auth-panel {
    padding: 22px;
  }
}

/* Accept-policy modal (mirrors the React Terms & Conditions dialog). */

.policy-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.policy-modal {
  width: min(92%, 1200px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: var(--scout-radius-lg, 12px);
  background: rgb(var(--scout-color-surface-glass) / var(--scout-alpha-surface-glass-strong, 0.50));
  border: 1px solid rgb(var(--scout-color-border) / var(--scout-alpha-border, 0.14));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42),
    inset 0 0.5px 0 rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: var(--scout-filter-glass);
  backdrop-filter: var(--scout-filter-glass);
}

.policy-header {
  padding: 14px 20px 8px;
}

.policy-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--scout-color-text-strong, 255 255 255));
}

.policy-divider {
  height: 1px;
  background: rgb(var(--scout-color-border, 108 108 108) / var(--scout-alpha-border, 0.14));
  flex-shrink: 0;
}

.policy-agreement-heading {
  padding: 8px 20px 4px;
  text-align: center;
}

.policy-agreement-heading h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--scout-color-text-strong, 255 255 255));
}

.policy-content {
  height: 400px;
  overflow-y: auto;
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  color: rgb(var(--scout-color-text, 248 250 252));
}

.policy-content p {
  margin: 0;
}

.policy-content ul {
  margin: 4px 0;
  padding-left: 24px;
}

.policy-content li {
  margin-bottom: 4px;
}

.policy-content strong {
  color: rgb(var(--scout-color-text-strong, 255 255 255));
}

/* The Agreement is a numbered document: top-level sections count 1..11 and
   each subsection counts a..d, matching the published text's own numbering so
   its internal cross-references read the same here as on the website. */
.policy-content ol.policy-sections {
  margin: 4px 0;
  padding-left: 22px;
  list-style-type: decimal;
}

.policy-content ol.policy-subsections {
  margin: 6px 0;
  padding-left: 22px;
  list-style-type: lower-alpha;
}

.policy-content ol.policy-sections > li {
  margin-bottom: 10px;
}

.policy-content ol.policy-subsections > li {
  margin-bottom: 8px;
}

.policy-content ol.policy-sections > li::marker,
.policy-content ol.policy-subsections > li::marker {
  color: rgb(var(--scout-color-text-strong, 255 255 255));
  font-weight: 600;
}

.policy-updated {
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.8;
}

.policy-email-link {
  color: #3b82f6;
  text-decoration: underline;
}

.policy-email-link:hover {
  color: #60a5fa;
}

.policy-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  flex-shrink: 0;
}

.policy-accept-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.policy-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: rgb(var(--scout-color-brand, 94 234 212));
}

.policy-accept-text {
  font-size: 16px;
  font-weight: 700;
  color: rgb(var(--scout-color-text-strong, 255 255 255));
}

.policy-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  min-height: 34px;
  min-width: 80px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--scout-radius-md, 8px);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--scout-color-text-inverse, 255 255 255));
  background: rgb(var(--scout-color-brand, 14 116 144) / 0.85);
  cursor: pointer;
  transition: background var(--scout-transition-fast, 150ms ease);
}

.policy-submit-btn:hover:not(:disabled) {
  background: rgb(var(--scout-color-brand-hover, 8 145 178) / 0.95);
}

.policy-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.policy-footer.htmx-request .auth-submit-label {
  opacity: 0;
}

.policy-footer.htmx-request .auth-submit-indicator {
  opacity: 1;
}

.policy-footer.htmx-request .policy-submit-btn {
  cursor: progress;
}

.policy-footer.htmx-request :is(input, button) {
  pointer-events: none;
}

/* Accept and Decline sit together at the trailing edge of the footer, so the
   Accept tickbox keeps the leading edge it already had. */
.policy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Decline is deliberately quieter than Submit: it is a real choice, not the
   expected one. It is never disabled -- refusing must not require first
   ticking Accept. */
.policy-decline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 80px;
  padding: 0 18px;
  border: 1px solid rgb(var(--scout-color-border, 148 163 184) / 0.5);
  border-radius: var(--scout-radius-md, 8px);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--scout-color-text-muted, 148 163 184));
  background: transparent;
  cursor: pointer;
  transition:
    color var(--scout-transition-fast, 150ms ease),
    border-color var(--scout-transition-fast, 150ms ease);
}

.policy-decline-btn:hover {
  color: rgb(var(--scout-color-text, 226 232 240));
  border-color: rgb(var(--scout-color-border, 148 163 184) / 0.9);
}

/* Ticking Accept is a choice, so Decline greys out to show which way the
   choice currently points. Unticking brings it back. */
.policy-decline-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.policy-decline-btn.htmx-request {
  cursor: progress;
  opacity: 0.6;
}

/* The declined confirmation reuses the modal shell but holds a short message
   rather than a scrolling document, so it is sized to its content. */
.policy-modal--message {
  height: auto;
  max-width: 520px;
}

.policy-declined-body {
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: rgb(var(--scout-color-text, 226 232 240));
}

.policy-declined-body p {
  margin: 0 0 12px;
}

.policy-declined-body p:last-child {
  margin-bottom: 0;
}

/* Shown only when the refusal could not be saved, so it has to read as a
   call to action rather than reassurance. */
.policy-declined-warning {
  color: rgb(var(--scout-color-warning, 251 191 36));
}

.policy-declined-link {
  color: rgb(var(--scout-color-brand, 14 116 144));
  text-decoration: underline;
}

/* The declined page's single action is a link, so it needs the underline
   removed to read as the button it is painted as. */
.policy-declined-action {
  text-decoration: none;
}

.policy-footer--end {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .policy-modal {
    width: 100%;
  }

  .policy-content {
    height: 300px;
  }
}