/* The sign-in screen. Its own file rather than home.css, because it is the one
   page served to somebody who has not authenticated yet - so it must not depend
   on a stylesheet that exists to dress the landing page the login replaced. */
:root{
  --signin-navy:#071923;
  --signin-navy-2:#0b2a38;
  --signin-line:rgba(255,255,255,.14);
  --signin-muted:rgba(255,255,255,.58);
  --signin-signal:#66d1d6;
}
body.signin{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(102,209,214,.13),transparent 55%),
    var(--signin-navy);
  font-family:var(--sans);
}
/* The same ruled field the landing hero used, kept so the two screens read as
   one place rather than a login bolted onto a different site. */
.signin-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--signin-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--signin-line) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.28;
  mask-image:radial-gradient(80% 60% at 50% 30%,#000 30%,transparent 100%);
}
.signin-main{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:64px 22px 40px;
}
.signin-plate{width:min(100%,430px)}
.signin-mark{width:auto;height:34px;opacity:.92}
.signin-eyebrow{
  margin:34px 0 0;
  color:var(--signin-signal);
  font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.signin-eyebrow span{margin:0 6px;color:var(--signin-muted)}
.signin-plate h1{
  margin:14px 0 0;
  font-family:var(--sans);
  font-size:clamp(44px,8vw,62px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1;
}
.signin-lede{
  margin:16px 0 0;
  max-width:38ch;
  color:var(--signin-muted);
  font-size:15px;
  line-height:1.65;
}
.signin-form{margin-top:36px;display:grid;gap:8px}
.signin-form label{
  margin-top:12px;
  color:var(--signin-muted);
  font:600 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.signin-form input{
  padding:14px 15px;
  color:#fff;
  font:400 16px/1.2 var(--sans);   /* 16px: anything smaller and iOS zooms the page */
  background:rgba(255,255,255,.06);
  border:1px solid var(--signin-line);
  border-radius:2px;
}
.signin-form input:focus-visible{
  outline:2px solid var(--signin-signal);
  outline-offset:1px;
  background:rgba(255,255,255,.1);
}
.signin-form button{
  margin-top:26px;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#082f33;
  font:700 13px/1 var(--sans);
  letter-spacing:.01em;
  background:var(--signin-signal);
  border:1px solid var(--signin-signal);
  border-radius:2px;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}
.signin-form button:hover{transform:translateY(-2px);background:#7fdce0}
.signin-form button span{font-size:17px}
.signin-error{
  margin:0 0 6px;
  padding:12px 14px;
  color:#ffd9d2;
  font-size:13px;
  line-height:1.5;
  background:rgba(190,74,52,.22);
  border:1px solid rgba(233,124,99,.42);
  border-radius:2px;
}
.signin-foot{
  margin:30px 0 0;
  padding-top:22px;
  max-width:40ch;
  color:var(--signin-muted);
  font-size:12.5px;
  line-height:1.6;
  border-top:1px solid var(--signin-line);
}
.signin-footer{
  position:relative;
  padding:24px 30px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  justify-content:space-between;
  color:rgba(255,255,255,.34);
  font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-top:1px solid var(--signin-line);
}
.signin-footer p{margin:0}

@media (max-width:560px){
  .signin-main{padding:48px 20px 32px}
  .signin-grid{background-size:64px 64px}
  .signin-footer{padding:20px}
}