/* Agent Hub — pre-auth pages (login, signup, onboarding, set-password).
   Default Keel & Straits brand: no org theme exists before sign-in.
   Layout only — colors and type come from the vendored keel-straits.css. */

.auth-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box; overflow-y: auto;
}

.auth-card {
  background: var(--ks-surface); border: 1px solid var(--ks-line);
  width: 400px; max-width: 100%; padding: 36px 40px 32px; box-sizing: border-box;
}

/* Lockup: the vendor .ks-header, compact, on the card surface. */
.auth-lockup { --ks-mark: 24px; --ks-pad-x: 0; padding: 0; margin-bottom: 12px; }

.auth-sub { font-size: 13px; color: var(--ks-graphite); margin: 0 0 26px; }
.auth-title { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--ks-ink); margin: 0 0 10px; }
.auth-text { font-size: 13.5px; line-height: 1.6; color: var(--ks-ink); margin: 0 0 8px; }

.auth-field { margin-bottom: 16px; }
/* Error text takes space ONLY when present — no reserved dead zone between
   the last field and the action. */
.auth-error { display: none; }
.auth-error:not(:empty) {
  display: block; font-size: 12px; line-height: 1.4;
  color: var(--ks-critical); margin: -8px 0 12px;
}
.auth-btn { width: 100%; justify-content: center; }
.ks-app a.ks-btn { text-decoration: none; }

/* Footer links: ONE action per row. */
.auth-links {
  margin-top: 20px; display: flex; flex-direction: column; gap: 8px;
  align-items: center; font-size: 12.5px; color: var(--ks-graphite);
}
.auth-links a, .auth-text a, .policy-view {
  color: var(--ks-ink); text-decoration: underline; text-underline-offset: 2px;
}
.auth-links a:hover, .policy-view:hover { color: var(--ks-graphite); }

/* Onboarding wizard steps (no card — centered on Bone). */
.auth-step { width: 460px; max-width: 92vw; text-align: center; }
.auth-step__mark { width: 30px; height: 30px; margin: 0 auto 18px; color: var(--ks-ink); }
.auth-step__mark svg { display: block; width: 100%; height: 100%; }
.auth-step__title { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; color: var(--ks-ink); margin-bottom: 8px; }
.auth-step__sub { font-size: 13.5px; color: var(--ks-graphite); margin-bottom: 28px; }
.auth-step form { text-align: left; }
.auth-step .auth-error:not(:empty) { margin: 6px 0 10px; }

.auth-panel { background: var(--ks-surface); border: 1px solid var(--ks-line); padding: 16px 18px; margin-bottom: 12px; }

/* Selectable option card (plans). Selection = 2px Ink border, padding
   compensated so nothing shifts. */
.auth-choice {
  display: block; background: var(--ks-surface); border: 1px solid var(--ks-line);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}
.auth-choice:hover { border-color: var(--ks-ink); }
.auth-choice--selected { border: 2px solid var(--ks-ink); padding: 13px 15px; }
.auth-choice b { font-size: 14px; color: var(--ks-ink); }
.auth-choice__desc { font-size: 12.5px; color: var(--ks-graphite); margin: 4px 0 0 24px; }

.auth-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ks-ink); cursor: pointer; }
.auth-check input { margin-top: 2px; }