/* Sign-in. Same red and Inter as the rest of the site -- the card leads with
   the wordmark on brand red so the page reads as Midfield, not as a generic
   login screen bolted on. */

.auth-wrap{
  --auth-ink:#181818;
  --auth-meta:#79776f;
  --auth-rule:#eceae5;
  --auth-paper:#ffffff;
  --auth-brand:#e2231a;
  --auth-brand-dark:#c11d15;

  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  padding:36px 0 56px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
html.dark-mode .auth-wrap{
  --auth-ink:#f0efe9; --auth-meta:#9a9890;
  --auth-rule:#2c2d31; --auth-paper:#1c1d20;
}

.auth-card{
  width:100%;
  max-width:430px;
  background:var(--auth-paper);
  border:1px solid var(--auth-rule);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 34px -12px rgba(0,0,0,.13);
}

/* ---- crest ---- */
.auth-crest{
  background:var(--auth-brand);
  background-image:linear-gradient(160deg, var(--auth-brand) 0%, var(--auth-brand-dark) 100%);
  padding:26px 32px 24px;
  text-align:center;
  position:relative;
}
/* faint pitch lines, so the band is not a flat slab */
.auth-crest::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 50% 130%, rgba(255,255,255,.16) 0 38%, transparent 38%),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:100% 100%, 100% 13px;
  pointer-events:none;
}
.auth-crest-mark{
  position:relative;
  font-size:23px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#fff;
}
.auth-crest-mark span{color:#ffd400;}

/* ---- body ---- */
.auth-body{padding:26px 32px 4px;}

.auth-title{
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--auth-ink);
  margin:0 0 5px;
  text-align:center;
}
.auth-sub{
  font-size:13.5px;
  line-height:1.5;
  color:var(--auth-meta);
  text-align:center;
  margin:0 0 22px;
}

.auth-error{
  background:#fdeceb;
  border:1px solid #f5c6c2;
  color:#8e1b13;
  border-radius:9px;
  padding:11px 14px;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  margin:0 0 16px;
}
html.dark-mode .auth-error{background:#2a1614; border-color:#5a2a25; color:#f0a9a3;}

/* ---- google button ---- */
.auth-google{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:100%;
  padding:13px;
  border:1px solid #d9d7cf;
  border-radius:10px;
  background:var(--auth-paper);
  font-family:inherit;
  font-size:14.5px;
  font-weight:700;
  color:var(--auth-ink);
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .08s;
}
html.dark-mode .auth-google{border-color:#3a3b40;}
.auth-google:hover{
  border-color:var(--auth-brand);
  box-shadow:0 3px 12px -4px rgba(226,35,26,.35);
}
.auth-google:active{transform:translateY(1px);}
.auth-google svg{flex-shrink:0;}

/* ---- divider ---- */
.auth-rule{
  display:flex;
  align-items:center;
  gap:12px;
  margin:24px 0 16px;
}
.auth-rule::before,
.auth-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--auth-rule);
}
.auth-rule span{
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--auth-meta);
}

/* ---- perks ---- */
.auth-perks{
  list-style:none;
  margin:0;
  padding:0;
}
.auth-perks li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:11px 0;
}
.auth-perks li + li{border-top:1px solid var(--auth-rule);}
.auth-perks svg{
  width:19px;
  height:19px;
  flex-shrink:0;
  margin-top:1px;
  color:var(--auth-brand);
}
.auth-perks span{
  font-size:13px;
  line-height:1.45;
  color:var(--auth-meta);
}
.auth-perks strong{
  display:block;
  font-size:13.5px;
  font-weight:700;
  color:var(--auth-ink);
  margin-bottom:2px;
}

/* ---- footer ---- */
.auth-foot{
  margin:0;
  padding:16px 32px 20px;
  border-top:1px solid var(--auth-rule);
  font-size:11.5px;
  line-height:1.5;
  color:var(--auth-meta);
  text-align:center;
}
.auth-foot a{color:var(--auth-brand); text-decoration:none; font-weight:600;}
.auth-foot a:hover{text-decoration:underline;}

:where(.auth-google, .auth-foot a):focus-visible{
  outline:2px solid var(--auth-brand);
  outline-offset:2px;
}

@media (max-width:520px){
  .auth-wrap{padding:22px 0 40px;}
  .auth-card{border-radius:13px;}
  .auth-crest{padding:22px 22px 20px;}
  .auth-body{padding:22px 22px 4px;}
  .auth-foot{padding:14px 22px 18px;}
  .auth-title{font-size:19.5px;}
}
@media (prefers-reduced-motion:reduce){
  .auth-google{transition:none;}
}