/* ============================================================
   Officer Portal — login.css
   ============================================================ */

.auth-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,137,76,.16), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(46,125,84,.10), transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}

.auth-card {
  width: 100%;
  max-width: 410px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--brass);
  overflow: hidden;
  animation: rise .3s var(--ease);
}

.auth-mark {
  text-align: center;
  padding: 2.25rem 2rem 1rem;
}
.auth-mark .crest {
  width: 46px; height: 46px; margin: 0 auto .9rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--brass); border-radius: 10px;
  color: var(--brass-deep);
}
.auth-mark .wordmark {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  color: var(--ink); letter-spacing: -.01em;
}
.auth-mark .wordmark b { color: var(--brass-deep); font-weight: 600; }
.auth-mark .tag {
  margin-top: .35rem;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--text-3);
}

.auth-body { padding: .5rem 2rem 2rem; }

.auth-toggle { width: 100%; margin: 0 0 1.25rem; }
.auth-toggle .segmented { display: flex; width: 100%; }
.auth-toggle .segmented button { flex: 1; }

.auth-error {
  display: none;
  align-items: center; gap: .5rem;
  margin-bottom: 1rem; padding: .6rem .8rem;
  background: var(--alert-tint); color: var(--alert);
  border: 1px solid rgba(169,60,60,.25); border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.auth-error.show { display: flex; }

.auth-submit { width: 100%; height: 44px; margin-top: .25rem; }

.auth-foot {
  text-align: center;
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--text-3);
}
.auth-foot .mono { color: var(--text-2); }

.auth-legal {
  margin-top: 1.25rem; text-align: center;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-dim);
}

@media (max-width: 460px) {
  .auth-mark, .auth-body { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* — Officer hint under the badge form — */
.auth-hint {
  margin: .15rem 0 .25rem;
  font-size: var(--t-xs);
  color: var(--text-3);
  line-height: 1.4;
}

/* — Multi-company selector rows — */
.company-choices { display: flex; flex-direction: column; gap: .5rem; }
.company-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  width: 100%; text-align: left;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.company-choice:hover { border-color: var(--brass); background: var(--surface-sunken); }
.company-choice .cc-name { font-weight: 600; color: var(--ink); font-size: var(--t-base); }
.company-choice .cc-code { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; color: var(--text-3); }