/* The sign-in and welcome pages (XYZ-45). Their own file: they run under the
   strict sign-in policy, which allows no inline styles. */

.signin { padding-top: var(--space-8, 48px); }

.hero { text-align: center; margin-bottom: var(--space-6, 32px); }
.hero .wordmark {
  font: 800 clamp(56px, 16vw, 96px)/1 var(--font-sans);
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.hero .wordmark span { color: var(--accent); }
.hero.small .wordmark { font-size: clamp(40px, 10vw, 56px); }

.signin .card { display: grid; gap: var(--space-3); }
.signin form { margin-top: 0; }
.signin .or {
  display: flex; align-items: center; gap: var(--space-3);
  font: var(--caption); color: var(--ink-subtle); text-transform: uppercase;
}
.signin .or::before, .signin .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.err {
  color: var(--status-attention); background: var(--status-attention-soft);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); font: var(--small);
}
.err:empty { display: none; }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
#wording p, .explain { font: var(--body); color: var(--ink-muted); }