/* Waveline skins — the login screen. One composition, one primary action, and
   the only cyan fill in the whole app. */

body{
  display:flex;
  flex-direction:column;
}

form{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:20px;
  width:min(760px,100%);
  margin:0 auto;
  padding:32px clamp(20px,4vw,32px);
  text-align:center;
}

form .mark{
  width:clamp(180px,32vw,260px);
  height:auto;
  margin-bottom:7px;
}

form h2{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel-600);
}

form h1{
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,62px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--steel-100);
}
form h1 a{color:inherit;}
form h1 a:hover{color:var(--steel-100);}

form h3{
  max-width:52ch;
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  text-transform:none;
  color:var(--steel-400);
}

/* The one place in the app that spends a cyan fill: the action the screen
   exists for. It carries emission, never a neutral drop shadow. */
form .main-btn{
  margin-top:7px;
  padding:14px 26px;
  background:var(--signal);
  border-color:var(--signal);
  color:var(--signal-ink);
  fill:var(--signal-ink);
  font-weight:700;
  box-shadow:0 8px 30px -10px rgba(36,224,255,.6);
  transition:background var(--t) var(--ease-smooth),
             box-shadow var(--t) var(--ease-smooth),
             transform var(--t) var(--ease-smooth);
}
form .main-btn:hover,
form .main-btn:focus-visible{
  background:var(--signal-bright);
  border-color:var(--signal-bright);
  color:var(--signal-ink);
  box-shadow:0 14px 40px -10px rgba(36,224,255,.85);
  transform:translateY(-2px);
}
form .main-btn:active{
  transform:none;
  box-shadow:0 8px 30px -10px rgba(36,224,255,.6);
  transition-duration:var(--t-press);
}