/* ============================================================================
   WINNOW — the sign-in pages (DEP-4): login, the code step, invite set-up.
   Plain and on-brand: the three-tile mark + Michroma wordmark, Inter for text,
   IBM Plex Mono for the key and the code. Forest is the action colour (the
   chrome band); parchment the page. Both schemes; nothing here reaches the map.
   ========================================================================== */
:root {
  color-scheme: light;
  --page: #f4f1ea;
  --card: #ffffff;
  --ink: #1f2320;
  --ink-2: #4a514b;
  --line: #d9d4c7;
  --focus: #2d6a4f;
  --action: #1b4332;
  --action-hover: #245a43;
  --action-ink: #ffffff;
  --error-bg: #fbeceb;
  --error-ink: #8a1f17;
  --error-line: #e7b7b2;
  --note-bg: #eaf2ec;
  --note-ink: #1b4332;
  --tile-parch: #cdc7b9;
  --tile-green: #58603a;
  --tile-green-2: #535b37;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand: "Michroma", "Eurostile", var(--font-sans);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #23261f;
    --card: #2f322d;
    --ink: #eceae3;
    --ink-2: #b9bbb2;
    --line: #474b43;
    --focus: #aab28c;
    --action: #aab28c;
    --action-hover: #bcc39f;
    --action-ink: #1b1d18;
    --error-bg: #3a2522;
    --error-ink: #f2b8b0;
    --error-line: #6b3a33;
    --note-bg: #2c3a30;
    --note-ink: #cfe3d4;
    --tile-green: #aab28c;
    --tile-green-2: #99a17b;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.auth {
  max-width: 420px;
  margin: 0 auto;
  padding: 56px 16px 32px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.auth-mark { width: 44px; height: auto; flex: none; }
.auth-word {
  font: 400 20px/1 var(--font-brand);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
}
h1 { font: 600 22px/1.25 var(--font-sans); margin: 0 0 16px; }
.auth-lede { color: var(--ink-2); margin: 0 0 16px; }
.auth-lede strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.auth-error, .auth-note {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 15px;
}
.auth-error { background: var(--error-bg); color: var(--error-ink); border: 1px solid var(--error-line); }
.auth-note { background: var(--note-bg); color: var(--note-ink); }
.field { margin: 0 0 16px; }
label { display: block; font-weight: 500; margin: 0 0 6px; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--ink-2);
  border-radius: 6px;
}
/* invalid: a heavier border as well as the colour (1.4.1 — not colour alone); padding keeps the box size */
input[aria-invalid="true"] { border: 2px solid var(--error-ink); padding: 9px 11px; }
input:focus-visible, .btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
input.code { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.3em; }
.hint { color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
.btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font: 600 16px/1.4 var(--font-sans);
  color: var(--action-ink);
  background: var(--action);
  border: 1px solid transparent;          /* a boundary survives forced-colors mode */
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { background: var(--action-hover); }
.steps { margin: 0 0 16px; padding-left: 20px; color: var(--ink-2); }
.steps li { margin: 0 0 4px; }
.qr { margin: 0 0 20px; display: grid; justify-items: center; gap: 10px; }
.qr-img { width: 232px; height: 232px; background: #fff; border-radius: 6px; padding: 4px; }
.qr figcaption { text-align: center; }
.key {
  display: block;
  margin: 4px 0 0;
  font: 500 16px/1.5 var(--font-mono);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
  user-select: all;
}
.auth-alt { margin: 16px 0 0; text-align: center; }
.auth-alt a { display: inline-block; padding: 8px; }     /* a 24px+ target on its own (2.5.8) */
.qr figcaption .hint { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; }
.auth-foot { color: var(--ink-2); font-size: 14px; text-align: center; margin: 20px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 120ms ease; }
}