/* Sign-in page. Colours, type and controls come from tokens.css and base.css,
   so it follows the dashboard's light and dark themes. */
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

.login {
  width: 100%;
  max-width: 24rem;
  margin: 0 var(--gutter);
  display: grid;
  gap: 1.5rem;
}

.brand-block { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.logo { display: block; margin-bottom: .4rem; }
.logo path { fill: none; stroke-width: 5; stroke-linejoin: miter; stroke-linecap: butt; }
.logo-ground { stroke: var(--rule); stroke-width: 2; }
.logo-peak { stroke: var(--ink); }
.logo-bar { stroke: var(--accent); }
.wordmark {
  font-size: var(--step-2);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .28em;
  /* the trailing letter-space would nudge the word off-centre */
  margin-right: -.28em;
}
.product { color: var(--muted); font-size: var(--step--1); }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem;
}
.panel h1 {
  font-size: var(--step-1);
  padding-bottom: .6rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.field { display: grid; gap: .3rem; margin-bottom: 1rem; }
.field input {
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .7rem;
  font-size: 1rem; /* 16px keeps mobile browsers from zooming in */
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.field input:hover { border-color: var(--muted); }
.field input:focus-visible { border-color: var(--accent); }

#submit { width: 100%; min-height: 2.75rem; margin-top: .25rem; font-size: 1rem; font-weight: 600; }
#submit:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--accent); }

.error {
  margin: 0 0 1rem;
  padding: .5rem .7rem;
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: 2px;
  font-size: var(--step--1);
}

.login-foot { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: center; }