/* Corro's front door: log in, start, forgot, reset, verify, invite. One small sheet, no imports, so the form
   paints at once. The tokens are design.css's light values (and themes.css's dark ones), repeated here on purpose:
   these pages must not wait for the app's sheets. */
:root {
  color-scheme: light;
  --n-0: #ffffff; --n-25: #fafbfc; --n-50: #f6f7f9; --n-100: #eef0f3; --n-200: #e2e5ea; --n-300: #cdd2da;
  --n-400: #838c9a; --n-500: #5a6372; --n-600: #454d5b; --n-700: #2f3642; --n-900: #14181f;
  --accent: #1c4cc8; --accent-strong: #0935b1; --accent-soft: #e8edfa; --accent-ring: rgba(28, 76, 200, .32); --on-accent: #ffffff;
  --ok: #17775a; --ok-soft: #e3f4ed; --warn: #8f5200; --warn-soft: #fcf0d9; --bad: #b3261e; --bad-soft: #fbe9e7;
  --e-2: 0 1px 2px rgba(20, 24, 31, .05), 0 6px 18px rgba(20, 24, 31, .07);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-md: 8px; --r-xl: 16px;
  --corro-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.23 5.3A8.5 8.5 0 1 0 17.23 18.7'/%3E%3Cpath d='M11 12l3 3 6.5-7.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --n-0: #1b1e23; --n-25: #171a1e; --n-50: #101214; --n-100: #262a31; --n-200: #30353d; --n-300: #454c57;
    --n-400: #7f8896; --n-500: #a7afbb; --n-600: #c3c9d2; --n-700: #d9dde4; --n-900: #f2f4f7;
    --accent: #8ab0fe; --accent-strong: #acc7ff; --accent-soft: #313b4f; --accent-ring: rgba(138, 176, 254, .42); --on-accent: #101214;
    --ok: #62d1a6; --ok-soft: #14302a; --warn: #f0b659; --warn-soft: #372a12; --bad: #ff8f85; --bad-soft: #41201d;
    --e-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .42);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --n-0: #1b1e23; --n-25: #171a1e; --n-50: #101214; --n-100: #262a31; --n-200: #30353d; --n-300: #454c57;
  --n-400: #7f8896; --n-500: #a7afbb; --n-600: #c3c9d2; --n-700: #d9dde4; --n-900: #f2f4f7;
  --accent: #8ab0fe; --accent-strong: #acc7ff; --accent-soft: #313b4f; --accent-ring: rgba(138, 176, 254, .42); --on-accent: #101214;
  --ok: #62d1a6; --ok-soft: #14302a; --warn: #f0b659; --warn-soft: #372a12; --bad: #ff8f85; --bad-soft: #41201d;
  --e-2: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px rgba(0, 0, 0, .42);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* .au-field and the forms are flex; hidden must still hide them */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--n-50); color: var(--n-900);
  font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; align-items: center; padding: 48px 16px 32px;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
p { margin: 0; }

.au { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.au-brand {
  display: inline-flex; align-items: center; gap: 8px; align-self: center; font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; color: var(--n-900); text-decoration: none;
}
.au-brand::before { content: ""; width: 24px; height: 24px; background: var(--accent); -webkit-mask: var(--corro-mark) center / contain no-repeat; mask: var(--corro-mark) center / contain no-repeat; }
.au-card { background: var(--n-0); border: 1px solid var(--n-200); border-radius: var(--r-xl); box-shadow: var(--e-2); padding: 32px; }
.au-card h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -.005em; }
.au-sub { margin-top: 6px; color: var(--n-500); }
.au-card form, .au-panel { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.au-field { display: flex; flex-direction: column; gap: 6px; }
.au-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.au-field label { font-size: 13px; font-weight: 600; color: var(--n-700); }
.au-field input {
  width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--n-900); background: var(--n-0);
  border: 1px solid var(--n-300); border-radius: var(--r-md); transition: border-color 120ms, box-shadow 120ms;
}
.au-field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.au-field input[aria-invalid="true"] { border-color: var(--bad); }
.au-field input[readonly] { background: var(--n-50); color: var(--n-600); }
.au-pw { position: relative; }
.au-pw input { padding-right: 76px; }
.au-show {
  position: absolute; right: 4px; top: 4px; height: 36px; min-width: 64px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--n-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.au-show:hover { background: var(--n-100); color: var(--n-900); }
.au-hint { font-size: 13px; color: var(--n-500); }
.au-err { font-size: 13px; color: var(--bad); font-weight: 500; }
.au-err:empty { display: none; }
.au-err::before { content: "! "; font-weight: 700; }
.au-small { font-size: 13px; }
.au-link { align-self: flex-start; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.au-link:hover { color: var(--accent-strong); }
#otp { font-variant-numeric: tabular-nums; letter-spacing: .12em; }

.au-alert, .au-note {
  padding: 10px 12px; border-radius: var(--r-md); font-size: 14px;
}
.au-alert { background: var(--bad-soft); color: var(--bad); font-weight: 500; }
.au-note { background: var(--n-100); color: var(--n-700); }
.au-note.ok { background: var(--ok-soft); color: var(--ok); font-weight: 500; }
.au-alert:empty, .au-note:empty { display: none; }

.au-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px;
  padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer; transition: background 120ms, border-color 120ms;
}
.au-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.au-btn.quiet { background: var(--n-0); color: var(--n-900); border-color: var(--n-300); }
.au-btn.quiet:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }
.au-btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.au-btn[aria-busy="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: au-spin .7s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-row { display: flex; gap: 8px; flex-wrap: wrap; }
.au-row > .au-btn { flex: 1 1 140px; width: auto; }

.au-alt { text-align: center; color: var(--n-600); }
.au-legal { font-size: 13px; color: var(--n-500); }
.au-guarantee { font-size: 13px; color: var(--n-600); border-top: 1px solid var(--n-200); padding-top: 16px; }
.au-who { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-md); background: var(--n-50); border: 1px solid var(--n-200); }
.au-who strong { font-size: 15px; }
.au-who span { font-size: 13px; color: var(--n-600); }
.au-dev { font-size: 13px; color: var(--n-600); }
.au-dev summary { cursor: pointer; }
.au-dev form { margin-top: 12px; }
.au-foot { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--n-500); text-align: center; }

/* Log-in and sign-up first ask whether a session exists, so a signed-in visitor goes straight to the app without
   seeing a form. The card keeps its space while it waits (no shift) and shows itself after 1.2 s whatever happens. */
.au-wait .au-card, .au-wait .au-alt { visibility: hidden; animation: au-reveal 0s 1.2s forwards; }
@keyframes au-reveal { to { visibility: visible; } }
.au-card { animation: au-rise 180ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes au-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 420px) {
  body { padding-top: 24px; }
  .au-card { padding: 24px 20px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .au-card { animation: none; }
  .au-btn[aria-busy="true"]::before { animation-duration: 2s; }
}