@font-face {
  font-family:"Hanken Grotesk";
  src:url("/assets/fonts/HankenGrotesk-var.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --ground:#0F0F11;
  --card:#1A1A1E;
  --input:#141417;
  --quiet:#202025;
  --ink:#F5F5F7;
  --secondary:#A6A6AE;
  --muted:#77777F;
  --disabled:#4A4A52;
  --line:#26262B;
  --line-strong:#3A3A42;
  --accent:#0A84FF;
  --accent-hover:#339CFF;
  --success:#30D158;
  --danger:#FF453A;
  --selection:rgba(10,132,255,.35);
  --google-blue:#4285F4;
  --google-green:#34A853;
  --google-yellow:#FBBC05;
  --google-red:#EA4335;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}

* { box-sizing:border-box; }

*::selection { background:var(--selection); color:var(--ink); }

html * { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }

html *::-webkit-scrollbar { width:6px; height:6px; }

html *::-webkit-scrollbar-thumb { border-radius:999px; background:var(--line-strong); }

html,
body { min-height:100%; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 14px/20px "Hanken Grotesk",system-ui,sans-serif;
}

button,
input { font:inherit; }

button,
a { -webkit-tap-highlight-color:transparent; }

[hidden] { display:none !important; }

.auth-shell {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px 16px;
}

.auth-card {
  width:min(400px,100%);
  padding:28px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}

.wordmark {
  margin-bottom:36px;
  font:600 17px/22px "Hanken Grotesk",system-ui,sans-serif;
}

h1 {
  margin:0 0 24px;
  font:600 28px/34px "Hanken Grotesk",system-ui,sans-serif;
  letter-spacing:-.02em;
}

p { margin:0; }

.button {
  width:100%;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 16px;
  border:0;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none;
  font-size:15px;
  line-height:20px;
  font-weight:500;
}

.button.solid { background:var(--accent); color:var(--ink); }
.button.solid:hover { background:var(--accent-hover); }
.button.quiet { background:var(--quiet); color:var(--ink); }
.button.quiet:hover { background:var(--line); }
.button:disabled { cursor:default; opacity:.45; }

.button:focus-visible,
.text-button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.google-mark { width:18px; height:18px; flex:0 0 18px; }

.divider {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:20px 0;
  color:var(--muted);
  font-size:12px;
  line-height:16px;
}

.divider::before,
.divider::after { content:""; height:1px; background:var(--line); }

.auth-form { display:grid; gap:14px; }
.field-group { display:grid; gap:6px; }

label {
  font-size:13px;
  line-height:16px;
  font-weight:500;
}

input {
  width:100%;
  height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--input);
  color:var(--ink);
  outline:0;
}

input:hover { border-color:var(--line-strong); }
input:focus { border-color:var(--accent); box-shadow:none; }
input[aria-invalid="true"] { border-color:var(--danger); }

.field-hint {
  color:var(--muted);
  font-size:12px;
  line-height:16px;
}

.field-error,
.form-error {
  min-height:0;
  color:var(--danger);
  font-size:13px;
  line-height:17px;
}

.field-error:empty,
.form-error:empty { display:none; }

.form-error { margin-top:12px; }

.form-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  font-size:13px;
  line-height:18px;
}

.form-footer.center { justify-content:center; }

.text-button,
.form-footer a {
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent);
  cursor:pointer;
  text-decoration:none;
  font:500 13px/18px "Hanken Grotesk",system-ui,sans-serif;
}

.status-view { text-align:center; }
.status-view .wordmark { text-align:left; }

.status-glyph,
.invite-mark {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border-radius:999px;
  background:var(--quiet);
  color:var(--success);
  font-size:17px;
  font-weight:600;
}

.status-view h1,
.invite-card h1 { margin-bottom:10px; }
.status-view p,
.invite-card p { color:var(--secondary); }
.status-view .button { margin-top:24px; }

.invite-card { text-align:center; }
.invite-card .wordmark { text-align:left; }
.invite-mark { background:var(--quiet); color:var(--accent); }
.invite-card strong { color:var(--ink); font-weight:500; }
.invite-card .support-line { margin-top:8px; }
.invite-card .auth-form { margin-top:24px; }

.callback-status {
  display:grid;
  gap:12px;
  padding:8px 0 2px;
  color:var(--secondary);
}

.callback-line { font-size:14px; line-height:20px; }

.placeholder-track {
  position:relative;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:var(--line);
}

.placeholder-bar {
  position:absolute;
  inset:0 auto 0 0;
  width:36%;
  background:var(--accent);
  animation:auth-progress 1.1s ease-in-out infinite;
}

.callback-error p { margin-bottom:16px; color:var(--secondary); }

@keyframes auth-progress {
  0% { transform:translateX(-110%); }
  100% { transform:translateX(385%); }
}

@media (max-width:480px) {
  .auth-shell { padding:0; place-items:stretch; }
  .auth-card { width:100%; min-height:100dvh; padding:24px; border:0; border-radius:0; }
}

@media (prefers-reduced-motion:reduce) {
  .placeholder-bar { animation-duration:2.4s; }
}