/* The sign-in and password pages: a Prussian brand panel beside the form.
   Layered on app.css for the tokens and the form controls. The panel carries
   the mark, one line about the platform and a small forest plot; the form
   sits alone on the light side so there is nothing to look at but the two
   fields. On a phone the panel folds down to the wordmark. */

body.auth {
  height: auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
/* The brand rule across the top, as on the homepage. */
body.auth::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
  z-index: 2;
}

.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 36px 44px;
  color: var(--alabaster);
  background:
    url(/assets/contours.svg) left bottom / 1100px auto no-repeat,
    linear-gradient(165deg, var(--prussian) 0%, #0b1428 60%, var(--black) 100%);
}
.auth-brand .wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.2px;
  text-decoration: none;
}
.auth-brand .wordmark:hover { text-decoration: none; }
.auth-brand .mark { width: 28px; height: 28px; display: block; flex: none; }

.auth-brand-body { margin: auto 0; padding: 40px 0; max-width: 42ch; }
.auth-brand .kicker {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}
.auth-brand h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
}
.auth-brand p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(229, 229, 229, .74); }

.auth-plot { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 30px; }
.auth-plot .ci { stroke: rgba(229, 229, 229, .55); stroke-width: 1.6; stroke-linecap: round; }
.auth-plot .est { fill: var(--alabaster); }
.auth-plot .null { stroke: rgba(229, 229, 229, .35); stroke-width: 1.2; stroke-dasharray: 3 5; }
.auth-plot .rule { stroke: rgba(229, 229, 229, .2); }
.auth-plot .pooled { fill: var(--orange); }

.auth-brand-foot { font-size: 12px; color: rgba(229, 229, 229, .55); }
.auth-brand-foot i { color: rgba(229, 229, 229, .75); }

.auth-main {
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: var(--bg);
}
.auth-card {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 30px;
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; font-weight: 750; }
.auth-card .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 22px; }
.auth-card .lede { color: var(--ink-2); font-size: 13px; line-height: 1.55; margin: 0 0 20px; }
.auth-card input { padding: 9px 10px; }
.auth-card button[type=submit] { width: 100%; padding: 10px; margin-top: 6px; font-size: 14px; }

.msg, .err {
  padding: 8px 10px;
  font-size: 12.5px;
  margin-bottom: 12px;
  border: 1px solid;
}
.err, .msg.err { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.msg.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.rule { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.foot { margin-top: 18px; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.6; }
.foot a { color: var(--accent); }

@media (max-width: 820px) {
  body.auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 24px 20px; }
  .auth-brand-body, .auth-brand-foot { display: none; }
  .auth-main { padding: 28px 16px 48px; align-items: start; }
}