/* ============================================================
   login.css — staff sign-in.
   Two panels: the brand side states who this is for and what the
   boundary is; the form side stays neutral and keyboard-first.
   ============================================================ */

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

/* ---- brand panel --------------------------------------------------- */

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-48);
  padding: var(--sp-48);
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-700) 100%);
  color: #fff;
  border-right: 2px solid var(--gold-500);
}

/* Restrained aurora — one soft light source, no animation. */
.auth-brand::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 90%;
  background: radial-gradient(60% 60% at 70% 20%, rgba(76, 130, 255, 0.34), transparent 70%);
  pointer-events: none;
}
.auth-brand::after {
  content: "";
  position: absolute;
  inset: auto -25% -35% -10%;
  height: 70%;
  background: radial-gradient(55% 55% at 25% 80%, rgba(226, 196, 138, 0.13), transparent 72%);
  pointer-events: none;
}
.auth-brand > * {
  position: relative;
  z-index: 1;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.brand-mark .glyph {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-ink);
  box-shadow: inset 0 0 0 1px rgba(226, 196, 138, 0.45);
}
.brand-mark .glyph img {
  width: 30px;
  height: auto;
}
.brand-mark .wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-mark .wordmark b {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.brand-mark .wordmark span {
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-300);
}

.auth-brand .pitch {
  max-width: 30ch;
}
.auth-brand .pitch h2 {
  font-size: clamp(26px, 2.6vw, var(--t-display));
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.14;
  text-wrap: balance;
  margin-bottom: var(--sp-16);
}
.auth-brand .pitch p {
  max-width: 42ch;
  color: #c0cce6;
  font-size: var(--t-body);
  line-height: 1.55;
}

/* The boundary is the product's central promise — it belongs on the
   door, not buried in a policy page. */
.boundary {
  max-width: 46ch;
  padding: var(--pad-card-lg);
  border-radius: var(--r-md);
  background: rgba(7, 12, 26, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--gold-400);
  backdrop-filter: blur(2px);
}
.boundary .tag {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-8);
}
.boundary p {
  font-size: var(--t-body-sm);
  line-height: 1.55;
  color: #d3ddef;
}
.boundary p + p {
  margin-top: var(--sp-8);
}
.boundary strong {
  color: #fff;
  font-weight: 600;
}

.brand-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32);
  padding-top: var(--sp-20);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.brand-meta dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8ca5d6;
  margin-bottom: var(--sp-4);
}
.brand-meta dd {
  margin: 0;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-data-sm);
  font-weight: 500;
  color: #fff;
}

/* ---- form panel ---------------------------------------------------- */

.auth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-24) var(--sp-48) var(--sp-32);
  background: var(--bg);
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--control-sm);
}

.auth-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-32) 0;
}

.auth-card {
  width: 100%;
  max-width: 396px;
}

.auth-card .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--t-overline);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-8);
}
.auth-card .eyebrow::after {
  content: "";
  height: 2px;
  flex: 1;
  max-width: 40px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.auth-card h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: var(--sp-6);
  text-wrap: balance;
}
.auth-card .sub {
  font-size: var(--t-body-sm);
  color: var(--ink-2);
  margin-bottom: var(--sp-24);
}

.auth-alert {
  margin-bottom: var(--sp-20);
}

form .stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

/* password field with reveal toggle */
.input-affix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-affix .input {
  padding-right: 46px;
}
.reveal {
  position: absolute;
  right: var(--sp-6);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.reveal:hover {
  color: var(--ink);
  background: var(--surface-sunken);
}
.reveal:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}


.caps-warning {
  display: none;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--t-caption);
  color: var(--warn);
}
.caps-warning[data-on="true"] {
  display: flex;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.btn--primary[data-pending="true"] .btn-label {
  opacity: 0.75;
}
.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: var(--r-pill);
  animation: spin 620ms linear infinite;
}
.btn--primary[data-pending="true"] .spinner {
  display: block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-note {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--divider);
  font-size: var(--t-caption);
  color: var(--ink-3);
  line-height: 1.5;
}
.auth-note svg {
  flex: none;
  margin-top: 1px;
  color: var(--ink-3);
}

.dev-signin {
  margin-top: var(--sp-16);
  padding: var(--sp-16);
  border: 1px dashed var(--divider);
  border-radius: 10px;
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.dev-signin p {
  margin: 0 0 var(--sp-8);
}
.dev-signin-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.auth-foot .dot {
  color: var(--border-strong);
}

/* ---- responsive ---------------------------------------------------- */

@media (max-width: 1080px) {
  .auth-brand {
    padding: var(--sp-32);
  }
  .auth-form {
    padding: var(--sp-24) var(--sp-32) var(--sp-32);
  }
}

@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
  }
  .auth-brand {
    gap: var(--sp-24);
    padding: var(--sp-24);
    border-right: none;
    border-bottom: 2px solid var(--gold-500);
  }
  .auth-brand .pitch,
  .brand-meta {
    display: none;
  }
  .boundary {
    max-width: none;
  }
  .auth-body {
    align-items: flex-start;
    padding-top: var(--sp-24);
  }
}

@media (max-width: 480px) {
  .auth-form {
    padding: var(--sp-16) var(--sp-20) var(--sp-24);
  }
}