.wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
}

.card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--s-5);
}

.brand {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding-bottom: var(--s-1);
}

.brand b {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

/* The sign-in page's copy of the wordmark, and the same ruling: the sans, not
   the monospace. See `app.css`. */
.brand span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-mid);
  color: var(--acc);
  line-height: 1.3;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* The two sign-in boxes are `.in` (task 7, Finding K4): the surface, the
   hairline, the 32px height, the type and all six states come from
   `components.css`. What is left here is the one thing that is this card's
   own — a field fills the 380px column it sits in.

   Two marks left this file with the skin. The `var(--mono)` is gone, because
   an email address and a password are not figures (Adam's decision 2). And
   the focus treatment is gone: `.field input:focus` set `border-color`, a
   `--glow-soft` bloom AND `outline: none` — which at (0,1,1) beat the global
   `:focus-visible` ring at (0,1,0), so the outline Finding A1 counted as the
   third indicator was in fact already suppressed by the rule that drew the
   other two. Measured, it was two marks on one card, not three. It is one
   now: the accent border and the 2px `--ring` the component draws for every
   field in the app. */
.field .in {
  width: 100%;
}

.err {
  color: var(--mg);
  background: var(--mg-dim);
  border: 1px solid var(--mg);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-md);
  margin: -4px 0 0;
}

.foot {
  text-align: center;
  margin-top: 2px;
  line-height: 1.6;
}