/* Front-door sign-in. The portal's own type and palette, so the login and the
   product behind it read as one thing.

   Fonts are subset from the same TTFs the book and the directory use — latin
   plus the punctuation this page contains — 39KB rather than 700KB. */

@font-face {
  font-family: 'AU Serif';
  src: url(fonts/fraunces600.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AU Sans';
  src: url(fonts/inter400.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AU Sans';
  src: url(fonts/inter600.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Tokens, not raw colours, so the dark theme is a redefinition rather than a
   second stylesheet. --on-gold is the label colour that sits ON the gold
   button: it must flip with the theme, because dark mode lightens the gold and
   white-on-light-gold measured 1.71:1. */
:root {
  --paper:#fbfaf7; --card:#ffffff; --ink:#1f1c18; --ink-soft:#4c463d;
  --muted:#6b655c; --line:#e2ddd2; --gold:#a8842c; --gold-deep:#8a6b1f;
  --danger:#8f2f2a; --ok:#2f6b4f; --on-gold:#ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#141310; --card:#1c1a16; --ink:#f2efe8; --ink-soft:#cfc9bc;
    --muted:#a9a294; --line:#332f28; --gold:#d8b158; --gold-deep:#e4c271;
    --danger:#f0a49e; --ok:#8ecfad; --on-gold:#241d0c;
  }
}
:root[data-theme="dark"] {
  --paper:#141310; --card:#1c1a16; --ink:#f2efe8; --ink-soft:#cfc9bc;
  --muted:#a9a294; --line:#332f28; --gold:#d8b158; --gold-deep:#e4c271;
  --danger:#f0a49e; --ok:#8ecfad; --on-gold:#241d0c;
}
:root[data-theme="light"] {
  --paper:#fbfaf7; --card:#ffffff; --ink:#1f1c18; --ink-soft:#4c463d;
  --muted:#6b655c; --line:#e2ddd2; --gold:#a8842c; --gold-deep:#8a6b1f;
  --danger:#8f2f2a; --ok:#2f6b4f; --on-gold:#ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'AU Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}

/* Single column is the DEFAULT; the split only appears when there is room for
   it. Dealers open this on a phone at a job site. */
.wrap { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .wrap { grid-template-columns: 1.05fr 1fr; } }

.brand {
  padding: 2.5rem 1.5rem 0.5rem; display: flex; flex-direction: column;
  justify-content: center; gap: 1.4rem;
}
@media (min-width: 900px) {
  .brand { padding: 4rem 3.5rem; border-right: 1px solid var(--line); }
}
.logo { width: min(280px, 62vw); height: auto; display: block; }
.rule { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 0; }
.tagline {
  font-family: 'AU Serif', Georgia, serif; font-weight: 600;
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.18;
  letter-spacing: -0.012em; margin: 0; max-width: 15ch; text-wrap: balance;
}
.tagline em { font-style: normal; color: var(--gold-deep); }
.sub { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 42ch; }

.panel { padding: 1.5rem 1.5rem 3rem; display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .panel { padding: 4rem 3.5rem; } }
.card { width: 100%; max-width: 26rem; }

h1 {
  font-family: 'AU Serif', Georgia, serif; font-weight: 600; font-size: 1.55rem;
  line-height: 1.25; margin: 0 0 0.35rem; letter-spacing: -0.01em;
}
.lede { margin: 0 0 1.65rem; color: var(--muted); font-size: 0.95rem; }

label {
  display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.45rem;
}
input {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.9rem;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--muted); opacity: .7; }
input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
input[inputmode="numeric"] {
  font-size: 1.55rem; letter-spacing: 0.4em; text-align: center;
  padding-left: 0.4em; font-variant-numeric: tabular-nums;
}
input[aria-invalid="true"] { border-color: var(--danger); }

button {
  width: 100%; font: inherit; font-weight: 600; cursor: pointer; margin-top: 1rem;
  background: var(--gold-deep); color: var(--on-gold);
  border: 1px solid var(--gold-deep); border-radius: 10px; padding: 0.8rem 1rem;
  transition: background .15s, transform .06s;
}
button:hover { background: var(--gold); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button[disabled] { opacity: .55; cursor: default; transform: none; }

.linkbtn {
  background: none; border: 0; color: var(--gold-deep); font-weight: 600;
  width: auto; margin: 0; padding: 0; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { background: none; color: var(--gold); }

.msg {
  margin-top: 1rem; padding: 0.75rem 0.85rem; border-radius: 10px;
  font-size: 0.9rem; border: 1px solid var(--line); background: var(--card);
}
.msg[data-kind="error"] {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}
.msg[data-kind="ok"] {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
}
.msg a { color: inherit; }

.foot {
  margin-top: 1.9rem; font-size: 0.82rem; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 1rem;
}
.foot a { color: var(--gold-deep); }

.step { display: none; }
.step.is-on { display: block; animation: step-in .28s ease both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .step.is-on { animation: none; } }