/* =============================================================
   Nominee sign-in and account
   Loaded on login.php (with forms.css) and account.php (with
   leader.css, which carries the profile card, the chips and the
   health check — everything here is only what those two pages
   add on top).
   ============================================================= */

/* ---------- Sign in ---------- */
.auth-page { padding-block: 4rem 6rem; }

.auth-card {
  max-width: 27rem;
  margin-inline: auto;
  text-align: center;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid #e7ecf3;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 30px 60px -34px rgba(15, 23, 42, 0.28);
}

.auth-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}
.auth-card__mark .icon { width: 22px; height: 22px; }

.auth-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.auth-card__lede {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

/* The form inside the card is the whole card: no max-width of its own, and the
   label sits left over a full-width input while everything else is centred. */
.auth-form { max-width: none; text-align: left; }
.auth-form__submit { width: 100%; margin-top: 1.25rem; justify-content: center; }

/* A six digit code, spaced so it reads as digits rather than as a number. */
.field__input--code {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-indent: 0.4em;   /* the tracking after the last digit, given back */
  font-variant-numeric: tabular-nums;
}

.auth-card__foot {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-faint);
}
.auth-card__foot a { color: var(--primary); font-weight: 600; }

.auth-card__restart { margin-top: 1rem; }

/* A button that has to read as a link: it posts, because sending a new code is
   not something a GET should do. */
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--primary); }

/* forms.css styles .alert and .alert--error; the sign-in flow is the first place
   on the public site with something to say that went right. */
.alert--ok {
  border-color: rgba(22, 163, 74, 0.24);
  background: rgba(22, 163, 74, 0.06);
  color: #14532d;
}
.alert--ok .icon { color: #15803d; }
.alert span { display: block; }

/* ---------- Account ---------- */
.account-page { padding-block: 2rem 5rem; }

.account-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 2rem;
  border: 1px solid #e7ecf3;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.account-bar__who {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  min-width: 0;
}
.account-bar__who .icon { flex: none; width: 16px; height: 16px; color: var(--text-faint); }
.account-bar__who strong { color: var(--secondary); font-weight: 600; word-break: break-all; }
.account-bar__out { margin: 0; }

.account-head { margin-bottom: 1.5rem; }
.account-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
.account-head__sub { font-size: 1rem; color: var(--text-muted); }

/* Only rendered when one address carries more than one nomination, which the
   schema allows on purpose — a corrected resubmission is a new row. */
.account-switch { margin-bottom: 1.75rem; }
.account-switch__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.625rem;
}
.account-switch__list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.account-switch__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.account-switch__item:hover { border-color: rgba(15, 23, 42, 0.25); color: var(--secondary); }
.account-switch__item.is-current {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.account-switch__ref { font-weight: 700; letter-spacing: 0.04em; }
.account-switch__when { font-size: 0.75rem; color: var(--text-faint); }
.account-switch__item.is-current .account-switch__when { color: var(--primary-dark); opacity: 0.75; }

/* leader.css draws the header block; this only puts it under the page title. */
.account-person { margin-bottom: 1.25rem; }

/* Where verification has got to, in a sentence. The one thing most people open
   this page for, so it is a band of its own rather than a row in the table. */
.account-state {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1.125rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.7;
}
.account-state .icon { flex: none; width: 18px; height: 18px; margin-top: 0.1875rem; }

.account-state--ok   { border-color: rgba(22, 163, 74, 0.24); background: rgba(22, 163, 74, 0.06); color: #14532d; }
.account-state--ok .icon { color: #15803d; }
.account-state--wait { border-color: rgba(180, 83, 9, 0.22);  background: rgba(180, 83, 9, 0.05);  color: #7c2d12; }
.account-state--wait .icon { color: #b45309; }
.account-state--warn { border-color: rgba(185, 28, 28, 0.22); background: rgba(185, 28, 28, 0.05); color: #7f1d1d; }
.account-state--warn .icon { color: #b91c1c; }

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

/* The awards invitation. Only rendered when an operator has opened the survey
   against this nomination, and it is the only thing on the page that asks
   something of the nominee — so it is allowed to be the loudest. */
.account-invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.375rem 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 120% at 92% 0%, rgba(249, 115, 22, 0.10) 0%, transparent 55%),
    linear-gradient(150deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
}
.account-invite__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}
.account-invite__mark .icon { width: 22px; height: 22px; }

.account-invite__eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.375rem;
}
.account-invite__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.125rem, 2.6vw, 1.375rem);
  letter-spacing: -0.015em;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.account-invite__lede {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.account-invite__lede strong { color: var(--secondary); font-weight: 600; }

/* Under the text rather than beside it: the paragraph is long enough that a
   button in a third column would leave both of them narrow. */
.account-invite__go { grid-column: 2; margin-top: 1rem; }

@media (max-width: 559px) {
  .account-invite { grid-template-columns: minmax(0, 1fr); }
  .account-invite__go { grid-column: 1; }
  .account-invite__go .btn { width: 100%; justify-content: center; }
}

.account-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft, #eef2f7);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-faint);
}
.account-note a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.account-note a:hover { color: var(--primary); }

/* The health check nobody took: a card, not a gap where the section would be. */
.account-prompt { margin-top: 1.5rem; }

/* Signed in with nothing to show, and the database refusing to answer. */
.account-empty {
  max-width: 34rem;
  margin: 3rem auto;
  text-align: center;
}
.account-empty__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 1.875rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.875rem;
}
.account-empty__text { font-size: 0.9375rem; line-height: 1.75; color: var(--text-muted); }
.account-empty__text a { color: var(--primary); font-weight: 600; }
.account-empty__actions { margin-top: 1.75rem; }

@media (max-width: 639px) {
  .account-bar { border-radius: var(--radius-lg); }
  .account-actions .btn { width: 100%; justify-content: center; }
}

@media print {
  .account-bar, .account-switch, .account-actions { display: none !important; }
}

/* The nominate-instead panel on the sign-in card. */
.auth-card__go { margin-top: 1.5rem; }
.auth-card__go .btn { width: 100%; justify-content: center; }