/* /signup and /login. Every colour, size and space reads ds/tokens.css. The only literals are the two providers' fixed
   button colours (their brand rules forbid recolouring) and the Roboto / Segoe UI stacks their buttons are specified in. */
/* tokens.css is a generated copy of the design system (design-sync test), so this face is declared here, beside its only user. */
@font-face { font-family: "Roboto"; src: url("fonts/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, p, ul { margin: 0; }
h1 { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); line-height: var(--lh-tight); text-wrap: balance; }
h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
p { text-wrap: pretty; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--text); text-decoration-color: var(--text); } }
.brand, .nav-link, .nav-cta, .btn, .foot-link, .sso, .swap a { text-decoration: none; }
[hidden] { display: none !important; }
:is(a, button, input, summary):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--border-strong); border-radius: var(--radius-sm); color: var(--text); }
.skip:focus { top: var(--space-4); }

.auth-top { border-bottom: var(--border); background: var(--scrim); }
.auth-top-in { display: flex; align-items: center; justify-content: center; max-width: var(--max); margin: 0 auto; padding: var(--space-2) var(--pad); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-xl); letter-spacing: var(--ls-h3); color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand span span { color: var(--text-2); font-weight: var(--fw-medium); }

/* Shared public header (ds/site-header.html). The words give way to the mark on a phone so four targets fit in one row. */
.site-top .auth-top-in { justify-content: space-between; gap: var(--space-3); }
.site-top .brand { justify-content: center; min-width: var(--tap); }
.site-nav { display: flex; align-items: center; gap: var(--space-1); }
.nav-auth { display: contents; }
.nav-link, .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-signout button.nav-link { margin: 0; font: inherit; cursor: pointer; appearance: none; background: transparent; color: var(--text-2); }
.nav-link { color: var(--text-2); }
.nav-cta { background: var(--cta); border-color: var(--cta); color: var(--on-cta); font-weight: var(--fw-semibold); }
.nav-link:active, .nav-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--text); background: var(--field); } .nav-cta:hover { background: var(--cta-hi); border-color: var(--cta-hi); color: var(--on-cta); } }
.nav-user { position: relative; }
.nav-user-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); max-width: min(42vw, 12rem); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-menu { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; display: flex; flex-direction: column; min-width: 10rem; padding: var(--space-1); border: var(--border-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); }
.nav-menu[hidden] { display: none !important; }
.nav-menu-item, .nav-signout .nav-link { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.nav-menu-item:hover, .nav-signout .nav-link:hover { background: var(--field); color: var(--text); }
.nav-signout { margin: 0; }
.auth-signed-in-lede { margin: 0 0 var(--space-5); font-size: var(--fs-md); color: var(--text-2); }
.auth-switch-account { margin: var(--space-3) 0 0; }
@media (max-width: 639px) { .site-top .nav-home { display: none; } }
@media (max-width: 519px) {
  .site-top .brand-word { display: none; }
  .site-nav { gap: 0; }
  .site-nav .nav-link, .site-nav .nav-cta { padding: 0 var(--space-2); font-size: var(--fs-xs); }
}

.auth-main { flex: 1 0 auto; padding: var(--space-8) var(--pad) var(--space-12); }
.auth-card { max-width: 480px; margin: 0 auto; padding: var(--space-6); background: var(--surface); border: var(--border-strong); border-radius: var(--radius-lg); }
.auth-head { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); }
.auth-mark { flex: none; }
.auth-card h1 { font-size: var(--fs-2xl); }
.auth-lede { margin: var(--space-3) 0 var(--space-6); color: var(--text-2); font-size: var(--fs-md); }
#acct-status, .auth-lede a { overflow-wrap: anywhere; }
.auth-note { margin: var(--space-4) 0 0; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }

.foot { border-top: var(--border); padding: var(--space-4) 0; font-size: var(--fs-sm); color: var(--text-3); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-6); max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.foot-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-md); letter-spacing: var(--ls-h3); color: var(--text); }
.foot-link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-2); }

/* Input borders use --text-3: --line-strong is 1.6:1 on --surface and fails WCAG 1.4.11 (3:1). */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); min-width: 0; }
.field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.opt { color: var(--text-3); font-weight: var(--fw-regular); }
.hint { font-size: var(--fs-xs); color: var(--text-3); }
.field input { width: 100%; min-height: var(--control); padding: var(--space-3) var(--space-4); border: 1px solid var(--text-3); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font: inherit; }

/* The box is drawn at 24px inside a 44px element, so the whole 44px square is the hit area. */
.consent { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-6); font-size: var(--fs-sm); color: var(--text-2); cursor: pointer; }
.consent input { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); margin: 0; appearance: none; cursor: pointer; }
.consent input::before, .consent input::after { grid-area: 1 / 1; content: ""; }
.consent input::before { width: 24px; height: 24px; border: 1px solid var(--text-3); border-radius: 6px; background: var(--field); }
.consent input::after { width: 6px; height: 12px; margin-top: -2px; border: solid var(--on-cta); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.consent input:checked::before { background: var(--cta); border-color: var(--cta); }
.consent input:checked::after { opacity: 1; }
.consent span { padding-top: var(--space-3); }
.consent a { white-space: normal; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn-block { width: 100%; gap: var(--space-3); }
.btn-primary { background: var(--cta); border-color: var(--cta); color: var(--on-cta); }
.btn:not(.btn-primary):not(:disabled):not(.btn-passkey) { background: transparent; border-color: var(--line-strong); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:enabled { background: var(--cta-hi); border-color: var(--cta-hi); }
  .btn:not(.btn-primary):not(:disabled):not(.btn-passkey):hover { background: var(--field); }
}
/* Sign out sits beside the passkey prompt's primary button, so it steps back to an outline. */
.btn-outline, a.btn-outline:hover { background: transparent; border-color: var(--text-3); color: var(--text); }
/* A disabled button (a passkey ceremony is open, or an action is unavailable) must not read as a live primary action: outline, dashed. */
.btn:disabled { background: transparent; border: 1px dashed var(--text-3); color: var(--text-2); cursor: not-allowed; transform: none; }
.btn-passkey { min-height: 60px; padding: var(--space-2) var(--space-4); text-align: left; justify-content: flex-start; }
.btn-passkey svg { flex: none; }
.btn-passkey .pk-text { display: flex; flex-direction: column; }
.btn-passkey .pk-sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--on-cta); }

/* Provider buttons: the dark variants of the official Google and Microsoft rules. Both share height, radius and icon size
   so the pair reads as one set; Microsoft's dark button has no stroke, so its border is its own fill. */
.sso { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; height: var(--control); padding: 0 var(--space-4); border: 1px solid; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.sso:active { transform: scale(0.97); }
.sso svg { flex: none; width: 20px; height: 20px; }
.sso-google { background: #131314; border-color: #8e918f; color: #e3e3e3; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 500; }
.sso-ms { background: #2f2f2f; border-color: #2f2f2f; color: #fff; font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif; font-size: 15px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .sso-google:hover { background: #26262a; }
  .sso-ms:hover { background: #3d3d3d; }
}
.sso-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.sso-stack form { margin: 0; }

.or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); color: var(--text-2); font-size: var(--fs-sm); }
.or::before, .or::after { content: ""; flex: 1; border-top: var(--border-strong); }

.notice { display: flex; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--star-4); border-radius: var(--radius-md); background: var(--field); }
.notice svg { flex: none; margin-top: 2px; color: var(--star-4); }
.notice-title { font-weight: var(--fw-semibold); color: var(--text); }
.notice p + p { margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-2); }

/* "Save a passkey for next time" on /account: a quiet inset panel above the sign-out actions, not a second card. */
.pk-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.pk-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.pk-list .btn { min-height: 44px; }
.pk-prompt { display: flex; flex-direction: column; gap: var(--space-4); margin: 0 0 var(--space-6); padding: var(--space-5); border: var(--border-strong); border-radius: var(--radius-md); background: var(--field); }
.pk-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.pk-head svg { flex: none; margin-top: 2px; color: var(--accent); }
.pk-prompt h2 { margin: 0 0 var(--space-1); }
.pk-prompt p { font-size: var(--fs-sm); color: var(--text-2); }
.pk-msg { margin: 0; }
.pk-err { color: var(--text); font-weight: var(--fw-medium); }

.help { margin: var(--space-6) 0 0; padding: var(--space-4); border: var(--border); border-radius: var(--radius-md); }
.help ul { margin-top: var(--space-3); padding-left: var(--space-5); font-size: var(--fs-sm); color: var(--text-2); }
.help li + li { margin-top: var(--space-2); }
.swap { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-top: var(--space-4); color: var(--text-2); font-size: var(--fs-sm); }
.swap a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: var(--fw-semibold); }

@media (min-width: 768px) {
  .auth-main { padding-top: var(--space-16); }
  .auth-card { padding: var(--space-10); }
  .auth-main:has(.auth-card--empty) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.auth-audit-promise { margin-top: 0; font-weight: var(--fw-medium); color: var(--text); }
.auth-card--empty { position: relative; overflow: hidden; }
.auth-card--empty .empty-ring { position: absolute; right: -12%; top: -4%; width: min(56vw, 220px); height: auto; opacity: 0.1; pointer-events: none; color: var(--text); }
.legal-main .auth-card { max-width: var(--max); }
.legal-doc { text-align: left; }
.legal-updated { margin: 0 0 var(--space-4); color: var(--text-3); font-size: var(--fs-sm); }
.legal-draft-note { color: var(--text-2); font-size: var(--fs-sm); }
.legal-doc h2 { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); }
.legal-doc p, .legal-doc li { color: var(--text-2); font-size: var(--fs-sm); }
.legal-doc ul { margin: var(--space-3) 0; padding-left: var(--space-5); }
.legal-doc table { width: 100%; margin: var(--space-4) 0; border-collapse: collapse; font-size: var(--fs-sm); }
.legal-doc th, .legal-doc td { padding: var(--space-2) var(--space-3); border: var(--border); text-align: left; vertical-align: top; }
.legal-back { margin-top: var(--space-10); }

@media (prefers-reduced-motion: reduce) { .btn, .sso, .nav-link, .nav-cta { transition: none; } .btn:active, .sso:active, .nav-link:active, .nav-cta:active { transform: none; } }