/* Sign in, sign up and account pages.
   Their markup and scripts come from the last site that served sign-in (Website
   release/site-20260925, b46d19b); the scripts address the markup by data-attributes
   and these class names, so the names stay and this file draws them in the current
   site's look. /signin/signin.css and /account/account.css (unchanged) load after it. */

.site-auth {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --ink-4: var(--ink-2);
  --sheet: #ffffff;
  --s-serious: #c9172a;
  --s-good: #1d7f3b;
  --font-ui: var(--font);
  --font-mono: var(--mono);
  --focus-ring: var(--accent);
  --site-accent: var(--accent);
  --site-control-radius: 12px;
  --page-max: var(--wrap);
  --page-gutter: var(--gutter);
  --track-caps: .08em;
  --r-sm: 8px;
}

.site-auth .site-main { padding: calc(var(--nav-h) + clamp(32px, 6vw, 72px)) 0 clamp(64px, 9vw, 112px); }
.site-auth .site-wrap { width: min(760px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.site-auth .site-section { padding-block: 28px; }
.site-auth .site-section + .site-section { border-top: 1px solid var(--line-2); }

.site-auth .site-display { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 650; color: var(--ink); margin: 0 0 18px; }
.site-auth .site-heading { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 620; margin: 0 0 12px; }
.site-auth .site-label { font-size: 12px; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.site-auth .site-lede { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; margin: 0 0 14px; }
.site-auth .site-body-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin: 0 0 14px; }
.site-auth .site-lede a, .site-auth .site-body-text a, .site-auth .settings-desc a, .site-auth .account-empty a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.site-auth .site-hero-block { display: grid; gap: 24px; padding-block: 8px 24px; }

.site-auth .site-spec { margin-top: 18px; padding: 18px 20px; border-radius: var(--radius-s); background: var(--bg-2); }
.site-auth .site-spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; font-size: 14px; }
.site-auth .site-spec dt { color: var(--ink-2); }
.site-auth .site-spec dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.site-auth .site-spec[hidden] { display: none; }

/* Rows: a name and a sentence, with the control beside them (stacked on phones). */
.site-auth .settings-section-rows { display: grid; gap: 0; }
.site-auth .settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, auto); align-items: start; gap: 8px 24px; padding-block: 14px; border-bottom: 1px solid var(--line-2); }
.site-auth .settings-row[hidden] { display: none; }
.site-auth .settings-copy { min-width: 0; }
.site-auth .settings-name { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; }
.site-auth .settings-desc { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.site-auth .settings-control { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.site-auth .settings-toggle { align-items: center; }
@media (max-width: 620px) {
  .site-auth .settings-row { grid-template-columns: minmax(0, 1fr); }
  .site-auth .settings-control { justify-content: flex-start; }
}

/* Controls */
.site-auth .ctl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(29, 29, 31, .22); font: inherit; font-size: 15px; font-weight: 550; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; transition: background-color .2s var(--ease); }
.site-auth .ctl-btn:hover:not(:disabled) { background: rgba(23, 32, 51, .05); }
.site-auth .ctl-btn.is-primary { background: var(--accent); color: #fff; box-shadow: none; }
.site-auth .ctl-btn.is-primary:hover:not(:disabled) { background: var(--accent-hover); }
.site-auth .ctl-btn:disabled { opacity: .45; cursor: not-allowed; }
.site-auth .ctl-btn[hidden] { display: none; }
.site-auth .ctl-select { min-height: 44px; padding: 0 12px; border-radius: var(--site-control-radius); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; max-width: 100%; }
.site-auth .fleet-inline-control { width: min(320px, 100%); }
.site-auth .fleet-profile-input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--site-control-radius); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.site-auth .fleet-profile-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.site-auth .fleet-profile-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--ink-2); border-radius: 6px; background: var(--bg-2); color: var(--ink); font-size: 15px; line-height: 1.5; }
.site-auth .fleet-profile-status.is-serious { border-left-color: var(--s-serious); }
.site-auth .fleet-profile-status.is-good { border-left-color: var(--s-good); }
.site-auth .fleet-profile-status[hidden] { display: none; }
.site-auth .setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.site-auth .setup-actions-spacer { flex: 1 1 auto; }

/* Passkeys list and form */
.site-auth .account-passkeys h2 { font-size: 22px; letter-spacing: -0.02em; margin: 28px 0 10px; }
.site-auth .account-passkeys ul { padding-left: 20px; }
.site-auth .account-passkeys label { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; color: var(--ink); }
.site-auth .passkey-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* The nav door: "Sign in", or the signed-in name with a Sign out button beside it. */
.gnav-account.is-named { font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.site-hero-signout { min-height: 44px; padding: 0 4px; border: 0; background: none; color: rgba(0, 0, 0, .8); font: inherit; font-size: 14px; cursor: pointer; }
.site-hero-signout:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.site-hero-status { width: min(760px, 100% - 2 * var(--gutter)); margin: calc(var(--nav-h) + 12px) auto 0; padding: 10px 14px; border-radius: 8px; background: var(--bg-2); font-size: 14px; color: var(--ink); }