/* Shared styles for the gate pages (login, claim, forgot, reset, check-email)
   and the error pages. Standalone — does not require style.css. */
:root {
  --paper: #F6F5F1;
  --ink: #26262B;
  --ink-soft: #55555E;
  --hl: #FFD23F;
  --pen: #D0342C;
  --line: #DCDAD2;
  --ok: #2E7D32;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--paper);
  background-image:
    linear-gradient(rgba(38,38,43,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,38,43,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, serif;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate {
  width: 100%; max-width: 440px;
  background: #fff;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 44px 40px 40px;
  animation: arrive 0.5s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.mark {
  width: 52px; height: 52px;
  background: var(--hl); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 34px;
  margin: 0 auto 22px;
}
h1, .hand, .bignum { text-align: center; }
h1 { font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif; font-weight: 800; font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; }
.hand { font-family: 'Caveat', cursive; font-weight: 600; font-size: 21px; color: var(--pen); margin-top: 8px; }
.sub { margin-top: 14px; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.error {
  margin-top: 18px;
  background: rgba(208, 52, 44, 0.08);
  border-left: 3px solid var(--pen);
  color: var(--pen);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 14.5px;
  padding: 11px 14px;
  animation: shake 0.35s ease both;
}
.success {
  margin-top: 18px;
  background: rgba(46, 125, 50, 0.09);
  border-left: 3px solid var(--ok);
  color: var(--ok);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 14.5px;
  padding: 11px 14px;
}
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
form { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
label { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 7px; }
.hint { display: block; margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); font-family: 'Source Serif 4', Georgia, serif; text-transform: none; letter-spacing: 0; font-weight: 400; }
input {
  width: 100%;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink);
  padding: 13px 15px;
  transition: box-shadow 0.15s ease;
}
input:focus { outline: none; box-shadow: 0 0 0 4px var(--hl); }
button, .btn-link {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 15.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 15px; cursor: pointer;
  text-align: center; text-decoration: none; display: block;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button:hover, .btn-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--hl); }
button:active, .btn-link:active { transform: translate(0, 0); box-shadow: none; }
button.secondary { background: #fff; color: var(--ink); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--hl); outline-offset: 2px; }
.links { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.links a { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid var(--hl); padding-bottom: 1px; }
.links a:hover { color: var(--ink); }
.foot {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--ink-soft);
}
.built { display: inline-flex; align-items: baseline; gap: 5px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink); text-decoration: none; }
.built:hover { color: var(--pen); }
.form-logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.04em; font-size: 1.15em; }
.form-logo .fdot { color: #3D6BFF; }
.bignum { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 84px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.bignum .hl-mark { background: var(--hl); padding: 0 10px; }
@media (prefers-reduced-motion: reduce) {
  .gate, .error { animation: none; }
  button, input, .btn-link { transition: none; }
}
button[data-busy="1"] { opacity: 0.75; pointer-events: none; }