/* GayStash — auth and the dead-link page. Both are single-purpose screens,
   so neither loads the app shell: no sidebar, no tab bar, nothing to click
   except the thing you came to do. */

.auth{
  min-height:100vh;display:grid;align-content:start;justify-items:center;
  padding:34px 14px calc(40px + env(safe-area-inset-bottom));
}
.auth-in{width:100%;max-width:400px}
.auth .brand{justify-content:center;font-size:21px;padding-bottom:24px}

.auth h1{font-size:23px;line-height:1.2;text-align:center;letter-spacing:-.025em}
.auth-sub{
  padding-top:8px;text-align:center;max-width:34ch;margin:0 auto;
  font-size:14px;font-weight:500;line-height:1.5;color:var(--text-3);
}
.auth-sub a{color:var(--accent);font-weight:700}

/* ── the provider buttons ───────────────────────────────────────
   Google goes first and full width because that is the path most
   arrivals take; burying it under an email form serves nobody. */
.oa{display:flex;flex-direction:column;gap:9px;padding-top:22px}
.oa button{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:50px;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  transition:background .14s var(--ease);
}
.oa button:hover{background:var(--surface-3)}
.oa svg{width:19px;height:19px;flex:none}

/* what the provider hands over, said before the tap rather than after */
.oa-note{
  padding-top:11px;font-size:12.5px;font-weight:500;line-height:1.5;
  color:var(--text-3);text-align:center;
}
.oa-note b{color:var(--text-2);font-weight:700}

.sep{
  display:flex;align-items:center;gap:12px;padding:20px 0 4px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── fields ─────────────────────────────────────────────────────
   Defined here rather than pulling in the whole add-a-stash sheet for
   three inputs. */
.af{display:block;padding-top:14px}
.af > span{display:block;font-size:13px;font-weight:700;color:var(--text-2);padding-bottom:7px}
.af input{
  width:100%;height:48px;padding:0 14px;border-radius:var(--r-md);
  background:var(--bg);border:1.5px solid var(--line-2);
  font-size:15.5px;font-weight:500;color:var(--text);
  transition:border-color .14s var(--ease);
}
.af input:focus{border-color:var(--accent);outline:none}
.af input::placeholder{color:var(--text-3)}
.af > span.af-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.af-row a{font-size:12.5px;font-weight:700;color:var(--accent)}

.auth .btn-lg{width:100%;margin-top:18px}

/* the alternative route, stated plainly rather than hidden in small print */
.alt{
  padding-top:16px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--text-3);
}
.alt a{color:var(--accent);font-weight:700}
.alt + .alt{padding-top:9px}

/* 18+ and the two things people actually worry about on a site like this */
.terms{
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line);
  font-size:12px;font-weight:500;line-height:1.55;color:var(--text-3);
}
.terms a{color:var(--text-2);font-weight:700}
.terms b{color:var(--text-2);font-weight:700}

/* ── waiting and arriving ───────────────────────────────────────
   The callback is usually invisible. It only gets seen when it breaks,
   which is exactly why it needs a designed failure. */
.wait-mark{
  width:44px;height:44px;margin:0 auto 18px;border-radius:50%;
  border:3px solid var(--surface-3);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.sent-mark{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  background:var(--surface-2);display:grid;place-items:center;
}
.sent-mark svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:2}

.inbox{
  margin-top:20px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface);
  font-size:13px;font-weight:500;line-height:1.55;color:var(--text-3);
}
.inbox b{color:var(--text-2);font-weight:700}
.inbox code{
  display:block;padding-top:6px;
  font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-2);
}

/* ── the username step ──────────────────────────────────────────
   Over half of all first visits land here. It gets a whole screen. */
.uname-in{
  width:100%;height:58px;padding:0 15px;border-radius:var(--r-md);
  background:var(--bg);border:1.5px solid var(--line-2);
  font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--text);
}
.uname-in:focus{border-color:var(--accent);outline:none}
.uname-pre{
  font-size:13px;font-weight:600;color:var(--text-3);padding-bottom:8px;
}
.uname-pre b{color:var(--text-2)}
.sugg-row{display:flex;flex-wrap:wrap;gap:7px;padding-top:12px}
.sugg-row button{
  height:34px;padding:0 13px;border-radius:var(--r-pill);
  background:var(--surface-2);font-size:13.5px;font-weight:600;color:var(--text-2);
}
.sugg-row button:hover{background:var(--surface-3);color:var(--text)}

/* ── the dead link ──────────────────────────────────────────────
   Not a 404 in the useful sense: the record is known, only the host copy
   is gone. Everything that survives it is on the page. */
.gone{max-width:620px;margin:0 auto;padding:22px 14px 40px}
.gone-h{font-size:clamp(21px,2.4vw,26px);line-height:1.2}
.gone-p{
  padding-top:9px;max-width:60ch;
  font-size:14.5px;font-weight:500;line-height:1.6;color:var(--text-2);
}
.gone-p b{color:var(--text)}
.was{
  margin-top:20px;padding:15px 16px;border-radius:var(--r-lg);background:var(--surface);
}
.was-lab{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.was h2{font-size:17px;line-height:1.3;padding:7px 0 3px}
.was-sub{font-size:13px;font-weight:600;color:var(--text-3)}
.was-sub b{color:var(--text-2)}
.was form{display:flex;gap:8px;padding-top:14px}
.was form input{
  flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--line-2);
  font-size:14.5px;font-weight:500;color:var(--text);
}
.was form input:focus{border-color:var(--accent);outline:none}

@media (min-width:1000px){
  .gone{padding:30px 22px 46px}
}

/* ── which state is on screen ───────────────────────────────────
   One template, one server-set attribute. The states are mutually
   exclusive, so this is an attribute selector rather than nine classes
   toggled by script. */
.auth .s{display:none}
[data-state=signin]     .s-signin,
[data-state=signup]     .s-signup,
[data-state=magic]      .s-magic,
[data-state=magic-sent] .s-magic-sent,
[data-state=reset]      .s-reset,
[data-state=reset-sent] .s-reset-sent,
[data-state=reset-new]  .s-reset-new,
[data-state=callback]   .s-callback,
[data-state=error]      .s-error{display:block}

/* 404 is quoted: an unquoted attribute value cannot start with a digit, and
   one invalid selector invalidates the whole comma-separated rule with it. */
.gone .k{display:none}
[data-kind=gone] .k-gone,[data-kind="404"] .k-404{display:block}
[data-kind=gone] nav.k-gone,[data-kind="404"] nav.k-404{display:flex}