/* =====================================================================
   Auth pages — sign in, sign up, verify
   ---------------------------------------------------------------------
   Deliberately light, and deliberately NOT theme-aware. The dashboard is
   a dark tool people stare at for hours; the front door is the first
   thing a prospective customer sees, and every comparable B2B product
   (Stripe, Linear, Everflow, Affise) opens on a bright, high-contrast
   page. Inheriting the app's near-black palette here read as unfinished
   rather than as a considered choice.

   Split layout: brand on the left, form on the right, stacking on narrow
   screens. The left panel is the only saturated surface on the page, so
   the eye lands on the form.

   The palette is taken from the marketing homepage so the two do not look
   like different products: the same indigo-to-purple hero gradient
   (#667eea -> #764ba2), the same #f8f9fa page tint, the same #0d6efd
   primary and #198754 success.
   ===================================================================== */

:root {
  color-scheme: light;

  --a-bg:        #f8f9fa;   /* homepage page tint */
  --a-surface:   #ffffff;
  --a-muted:     #f8f9fa;
  --a-border:    #e9ecef;   /* homepage card border */
  --a-border-2:  #ced4da;

  --a-text:      #212529;   /* homepage --dark-color */
  --a-text-2:    #495057;
  --a-text-3:    #6c757d;   /* homepage --secondary-color */

  --a-accent:    #0d6efd;   /* homepage --primary-color */
  --a-accent-2:  #0b5ed7;
  --a-accent-sw: #e7f1ff;

  /* The homepage hero gradient, reused verbatim. */
  --a-hero:      linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  --a-green:     #198754;   /* homepage --success-color */
  --a-amber:     #997404;
  --a-red:       #dc3545;   /* homepage --danger-color */
  --a-red-sw:    #f8d7da;
  --a-amber-sw:  #fff3cd;

  --a-r:    10px;
  --a-r-lg: 16px;
  --a-shadow: 0 .125rem .25rem rgba(0,0,0,.075), 0 1rem 3rem rgba(0,0,0,.06);
  --a-t: 130ms cubic-bezier(.4, 0, .2, 1);

  --a-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --a-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

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

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--a-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Layout */

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

/* ---------------------------------------------------------- Brand side */

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 52px;
  color: #fff;
  background: var(--a-hero);
}
/* A soft light source in the corner, so the panel reads as a surface
   rather than a flat block of colour. */
.auth-brand::before {
  content: "";
  position: absolute;
  top: -18%; right: -12%;
  width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  pointer-events: none;
}
.auth-brand::after {
  content: "";
  position: absolute;
  bottom: -28%; left: -18%;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 66%);
  pointer-events: none;
}
.auth-brand > * { position: relative; z-index: 1; }

.auth-logo { display: flex; align-items: center; gap: 12px; }
/* The plate is square but the mark is taller than it is wide, so size by
   height and let the width follow. Fitting a 0.62-ratio mark into a padded
   square rendered it about 14px across — unreadable. */
.auth-logo .plate {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.auth-logo .plate img { height: 32px; width: auto; display: block; }
.auth-logo span { font-size: 20px; font-weight: 660; letter-spacing: -.02em; }

.auth-pitch { max-width: 26rem; }
.auth-pitch h1 {
  margin: 0 0 14px;
  font-size: 33px; line-height: 1.18; font-weight: 680; letter-spacing: -.032em;
}
.auth-pitch p { margin: 0; font-size: 15px; color: rgba(255,255,255,.86); }

.auth-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 13px; }
.auth-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; }
.auth-points .tick {
  flex: none; width: 21px; height: 21px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.19);
}
.auth-points b { font-weight: 620; }
.auth-points span.sub { display: block; color: rgba(255,255,255,.76); font-size: 13px; }

.auth-foot { font-size: 12.5px; color: rgba(255,255,255,.68); }

/* ----------------------------------------------------------- Form side */

.auth-form-side {
  display: grid;
  place-items: center;
  padding: 44px 32px;
  background: var(--a-surface);
}
body { background: var(--a-bg); }
.auth-form { width: 100%; max-width: 384px; }

.auth-form-mark { display: none; }   /* shown only when the panel is hidden */

.auth-head { margin-bottom: 26px; }
.auth-head h2 {
  margin: 0 0 6px;
  font-size: 25px; font-weight: 670; letter-spacing: -.028em;
}
.auth-head p { margin: 0; color: var(--a-text-3); font-size: 14px; }

.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.auth-field > label {
  font-size: 13px; font-weight: 580; color: var(--a-text-2);
}
.auth-field .req { color: var(--a-red); margin-left: 2px; }
.auth-field .hint { font-size: 12.5px; color: var(--a-text-3); }

.auth-input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  font: inherit; font-size: 14.5px;
  color: var(--a-text);
  background: var(--a-surface);
  border: 1px solid var(--a-border-2);
  border-radius: var(--a-r);
  transition: border-color var(--a-t), box-shadow var(--a-t), background var(--a-t);
}
.auth-input::placeholder { color: #adb5bd; }
.auth-input:hover { border-color: #adb5bd; }
.auth-input:focus {
  outline: none;
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3.5px var(--a-accent-sw);
}

.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.auth-btn {
  width: 100%;
  height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: #fff;
  background: var(--a-accent);
  border: 1px solid var(--a-accent);
  border-radius: var(--a-r);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13,110,253,.26);
  transition: background var(--a-t), transform var(--a-t), box-shadow var(--a-t);
}
.auth-btn:hover { background: var(--a-accent-2); border-color: var(--a-accent-2); }
.auth-btn:active { transform: translateY(1px); box-shadow: none; }
.auth-btn:focus-visible { outline: 3px solid var(--a-accent-sw); outline-offset: 2px; }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.auth-btn-quiet {
  color: var(--a-text-2);
  background: var(--a-surface);
  border-color: var(--a-border-2);
  box-shadow: none;
  height: 38px; font-size: 13.5px; width: auto; padding: 0 14px;
}
.auth-btn-quiet:hover { background: var(--a-muted); border-color: #adb5bd; color: var(--a-text); }

.auth-alt {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--a-border);
  text-align: center; font-size: 13.5px; color: var(--a-text-2);
}
.auth-alt .sub { display: block; margin-top: 5px; font-size: 12.5px; color: var(--a-text-3); }

/* -------------------------------------------------------------- Notes */

.auth-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: var(--a-r);
  font-size: 13.5px; line-height: 1.5;
  background: var(--a-accent-sw); color: #084298;
  border: 1px solid #b6d4fe;
}
.auth-note.err   { background: var(--a-red-sw);   color: #842029; border-color: #f5c2c7; }
.auth-note.warn  { background: var(--a-amber-sw); color: #664d03; border-color: #ffecb5; }
.auth-note svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------- OTP inputs */

.auth-otp { display: flex; gap: 10px; justify-content: space-between; margin: 4px 0 2px; }
.auth-otp input {
  width: 100%; max-width: 54px; height: 58px;
  text-align: center;
  font-family: var(--a-mono);
  font-size: 23px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--a-text);
  background: var(--a-surface);
  border: 1px solid var(--a-border-2);
  border-radius: var(--a-r);
  transition: border-color var(--a-t), box-shadow var(--a-t);
}
.auth-otp input:focus {
  outline: none; border-color: var(--a-accent);
  box-shadow: 0 0 0 3.5px var(--a-accent-sw);
}
.auth-otp input.filled { border-color: #9ec5fe; background: #fbfdff; }
.auth-otp.shake { animation: authShake 320ms cubic-bezier(.36,.07,.19,.97); }
@keyframes authShake {
  10%,90% { transform: translateX(-2px) } 30%,70% { transform: translateX(4px) }
  50% { transform: translateX(-4px) }
}

.auth-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; font-size: 13px; color: var(--a-text-3);
}

.auth-code {
  font-family: var(--a-mono); font-size: 12.5px;
  background: var(--a-muted); border: 1px solid var(--a-border);
  border-radius: 6px; padding: 2px 6px; color: var(--a-text-2);
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  /* The pitch is supporting material; on a phone it would push the form
     below the fold, so only a compact brand bar survives. */
  .auth-brand { padding: 22px 24px; }
  .auth-pitch, .auth-points, .auth-foot { display: none; }
  .auth-form-side { padding: 34px 24px 48px; }
}

@media (max-width: 420px) {
  .auth-row { grid-template-columns: 1fr; }
  .auth-otp { gap: 7px; }
  .auth-otp input { height: 52px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

select.auth-input {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

/* --------------------------------------------------------- Portal tabs */
/* Entry points for each kind of account. Presentation only: the role comes
   from the account, so choosing the "wrong" one still signs you in. A tab
   that could reject you would be the old role picker again, which only
   ever produced "no account found as X". */
.auth-tabs {
  display: flex; gap: 3px;
  margin: -6px 0 22px;
  padding: 3px;
  background: var(--a-muted);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r);
}
.auth-tabs a {
  flex: 1; text-align: center;
  padding: 7px 6px; border-radius: 7px;
  font-size: 13px; font-weight: 560;
  color: var(--a-text-3); text-decoration: none;
  transition: background var(--a-t), color var(--a-t);
}
.auth-tabs a:hover { color: var(--a-text-2); text-decoration: none; }
.auth-tabs a.on {
  background: var(--a-surface);
  color: var(--a-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.07);
}

.opt { font-weight: 400; font-size: 11px; color: var(--a-text-3); }