/*
 * Sign-in page v96: the night reference surface (design language §8.10,
 * critique #18) — one action colour, 700 headings, brand badge, no green.
 * Loaded by components/login-client.tsx only.
 */
.unified-login { background: var(--tc-night-900) !important; }
.unified-login :is(h1, h2, h3) { font-weight: var(--tc-fw-heading) !important; letter-spacing: 0 !important; }
.unified-login .login-copy h1 { color: #fff !important; font-size: clamp(36px, 4.4vw, 56px) !important; line-height: 1.2 !important; }
.unified-login .login-copy h1 em { color: var(--tc-flame) !important; font-style: normal; }
.unified-login .login-copy > p { color: var(--tc-on-night-2) !important; font-size: 16px !important; line-height: var(--tc-lh-body); }
.unified-login .login-copy > span {
  border-color: var(--tc-glass-line) !important;
  border-radius: var(--tc-r-pill) !important;
  background: var(--tc-glass) !important;
  color: var(--tc-flame-soft) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.unified-login .login-copy article {
  border-color: var(--tc-glass-line) !important;
  border-radius: var(--tc-r-lg) !important;
  background: var(--tc-glass) !important;
}
.unified-login .login-copy article svg { color: var(--tc-flame) !important; }
.unified-login .login-copy article small { color: var(--tc-on-night-2) !important; font-size: 14px !important; }
.unified-login .login-card { border-radius: var(--tc-r-xl) !important; }
.unified-login .login-card h1 { color: var(--tc-text) !important; font-size: var(--tc-fs-h1) !important; }
.unified-login .login-card > p,
.unified-login .secure-login-hint { color: var(--tc-text-2) !important; font-size: 14px !important; }
.unified-login .secure-login-button {
  height: var(--tc-btn-lg) !important;
  border-radius: var(--tc-r-md) !important;
  background: var(--tc-action) !important;
  color: var(--tc-on-action) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.unified-login .secure-login-button:hover:not(:disabled) { background: var(--tc-action-hover) !important; }
.unified-login .secure-login-button:disabled { opacity: 1 !important; filter: none !important; background: var(--tc-cream-200) !important; color: var(--tc-ink-600) !important; box-shadow: inset 0 0 0 1px var(--tc-line-strong) !important; cursor: not-allowed; }
.unified-login .login-card :is(input, select) { border-radius: var(--tc-r-md) !important; border-color: var(--tc-line-strong) !important; }
.unified-login .turnstile-shell { border-radius: var(--tc-r-md); overflow: hidden; }
.unified-login :is(a, button, input):focus-visible { outline: 3px solid var(--tc-focus) !important; outline-offset: 2px !important; }
.unified-login .login-copy :is(a, button):focus-visible { outline-color: var(--tc-flame-soft) !important; }
.unified-login .login-card > small { color: var(--tc-brand-600) !important; font-size: 13px !important; font-weight: 600 !important; }
.unified-login .login-card :is(h1, h2) { color: var(--tc-text) !important; }

/*
 * v98 polish (external review #2/#3): the sign-in card comes first in the DOM
 * (phones read the form before the role explainer); desktop keeps the copy
 * on the inline-start side. Role cards are centred the same way at every
 * width, and the security check is one compact status line
 * (components/turnstile-widget.tsx).
 */
.unified-login .login-stage { align-items: center !important; }
.unified-login .login-copy { grid-column: 1; grid-row: 1; min-width: 0; }
.unified-login .login-card { grid-column: 2; grid-row: 1; width: 100%; max-width: 440px; justify-self: center; }
.unified-login .login-copy > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--tc-s-3) !important; }
.unified-login .login-copy article {
  min-width: 0;
  padding: var(--tc-s-4) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--tc-s-2) !important;
  text-align: center !important;
}
.unified-login .login-copy article > svg { width: 24px !important; height: 24px !important; flex: none; }
.unified-login .login-copy article > b { align-items: center !important; gap: 2px; font-size: 15px !important; font-weight: 700 !important; }
.unified-login .login-copy article small { margin: 0 !important; line-height: 1.5; }
.unified-login .login-card .turnstile-shell { margin-block: var(--tc-s-3) 0; }
@media (max-width: 900px) {
  .unified-login .login-copy, .unified-login .login-card { grid-column: 1; }
  .unified-login .login-copy { grid-row: 2; }
}
@media (max-width: 767px) {
  .unified-login .login-stage { display: flex !important; flex-direction: column; gap: var(--tc-s-8) !important; min-height: 0 !important; padding-block: var(--tc-s-4) var(--tc-s-12) !important; width: calc(100% - 2 * var(--tc-s-4)) !important; }
  .unified-login .login-card { order: 1; max-width: 420px; margin-inline: auto; padding: var(--tc-s-6) var(--tc-s-4) !important; }
  .unified-login .login-card .login-mark { display: none; }
  .unified-login .login-card > small { margin-top: 0 !important; }
  .unified-login .login-copy { order: 2; width: 100%; text-align: center; }
  .unified-login .login-copy h1 { font-size: 30px !important; margin-block: var(--tc-s-3) var(--tc-s-2) !important; }
  .unified-login .login-copy > p { font-size: 15px !important; }
  .unified-login .login-copy > div { margin-top: var(--tc-s-4) !important; }
  .unified-login .login-copy article { padding: var(--tc-s-3) !important; }
  .unified-login .login-card :is(input, select) { font-size: 16px !important; min-height: 48px; }
}
body:has(.unified-login) { background: var(--tc-night-900); }
.unified-login .password-help summary { color: var(--tc-link) !important; }

/* ---------- v99: the form leads (external critique V99 B08/B09) ---------- */
.unified-login .password-help > summary { list-style: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.unified-login .password-help > summary::-webkit-details-marker { display: none; }
.unified-login .password-help > summary::marker { content: ""; }
.unified-login .auth-mode-tabs { border-radius: var(--tc-r-md) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; }
.unified-login .auth-mode-tabs button { min-height: 44px !important; border-radius: var(--tc-r-sm) !important; font-size: 15px !important; }
.unified-login .login-card > small { letter-spacing: 0 !important; text-transform: none !important; font-size: 13px !important; }
.unified-login .guest-order-option { border-radius: var(--tc-r-lg) !important; border-style: solid !important; }
.unified-login .guest-order-option b { font-size: 15px !important; }
.unified-login .guest-order-option small { font-size: 14px !important; }
.unified-login .guest-order-option a {
  min-height: 44px !important; padding: 0 16px !important; display: inline-flex !important; align-items: center;
  border: 1px solid var(--tc-line-strong) !important; border-radius: var(--tc-r-md) !important;
  background: var(--tc-paper) !important; color: var(--tc-text) !important; font-size: 14px !important; font-weight: 700 !important; white-space: nowrap;
}
.unified-login .secure-login-hint { display: block; margin-top: 8px; color: var(--tc-text-2) !important; font-size: 14px !important; line-height: 1.6; }
.unified-login .turnstile-shell { border-radius: var(--tc-r-md) !important; }
.unified-login .turnstile-shell .turnstile-container:empty { display: none; }
@media (max-width: 767px) {
  /* After the form: one line of explanation, not a second page of roles. */
  .unified-login .login-copy > div { display: none !important; }
  .unified-login .login-copy { padding-block: 32px !important; }
  .unified-login .login-copy h1 { font-size: 28px !important; }
}

/* The night runs to the bottom edge of the sign-in page (no cream strip under it). */
body:has(> #main-content .unified-login), body:has(.unified-login) { background: var(--tc-night-900, #111814); }