/* The two pages you reach without a session: sign in, and set your password from an
 * invite link.
 *
 * They are standalone documents on purpose — base.html's nav assumes a logged-in user —
 * but they were also standalone in their STYLING, with the same ~15 declarations pasted
 * into each. That is the front door and the onboarding page disagreeing about the product
 * the moment either one is edited. They now load the same chain every other page does
 * (ui.css, then theme.css) and this file adds only what a centred single-card page needs
 * on top: the centring, the card's width, and the three bits of furniture — the subtitle,
 * the error banner, the hint — that exist nowhere else.
 *
 * `.card` and `.btn` come from the shared sheets, so a change to either reaches here.
 */
body {
  display: flex; min-height: 100vh; margin: 0;
  align-items: center; justify-content: center;
  padding: 24px 16px;
}

.card {
  width: 340px; max-width: 100%; margin: 0;
  padding: 28px 30px 30px;
  box-shadow: 0 20px 44px -26px rgba(43, 52, 70, .5);
}

.card h1 {
  font-size: 1.28rem; margin: 0 0 5px;
}
p.sub { color: var(--pp-ink-soft); margin: 0 0 18px; font-size: .86rem; }

label {
  display: block; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--pp-ink-soft); margin: 14px 0 5px;
}
.card input { width: 100%; box-sizing: border-box; padding: 9px 11px; }
.card input[readonly] { background: var(--pp-paper-alt); color: var(--pp-ink-soft); }

.card button {
  margin-top: 20px; width: 100%; padding: 11px;
  border-radius: 999px; border: 1px solid var(--pp-ink);
  background: var(--pp-ink); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
}
.card button:hover { background: #1e2635; }

.err {
  background: var(--pp-bad-bg); color: var(--pp-bad);
  border: 1px solid color-mix(in srgb, var(--pp-bad) 30%, transparent);
  border-radius: var(--pp-r-sm); padding: 9px 11px;
  font-size: .84rem; margin-bottom: 10px;
}
.hint { color: var(--pp-ink-soft); font-size: .78rem; margin: 9px 0 0; }
.hint a { color: var(--pp-accent); }

/* The brand ramp, as a lid on the card. These pages have no nav to hang it under, and
   without it they are the only two screens in the product carrying no mark at all. */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pp-gradient);
}