/* Sign-in and "not on the list" pages (auth.py + templates_auth.py). Tokens come from family.css (light on :root,
   dark from the device's colour scheme); the fallbacks only matter if family.css fails to load. No inline styles. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/barlow-condensed-700.woff2") format("woff2"); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.auth-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--plane, #f3f4f1); color: var(--ink, #101512);
  font: 400 15px/1.45 var(--sans, "Barlow", system-ui, sans-serif);
}

.auth-card {
  box-sizing: border-box; width: 100%; max-width: 400px;
  display: grid; gap: 18px;
  padding: 28px 24px 24px;
  background: var(--surface, #fcfcfb);
  border: 1px solid var(--hair, rgba(16, 21, 18, .10));
  border-radius: 12px;
}

.auth-title {
  margin: 0; font: 700 48px/1 var(--display, "Barlow Condensed", "Arial Narrow", sans-serif);
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink, #101512);
}
/* the family style's one red rule */
.auth-title::after {
  content: ""; display: block; width: 44px; height: 4px; margin-top: 14px;
  border-radius: 2px; background: var(--brand, #ff3535);
}

.auth-lead { margin: 0; font-size: 16px; color: var(--ink-2, #4d5550); overflow-wrap: anywhere; }
.auth-email { color: var(--ink, #101512); font-weight: 600; }

.auth-note {
  margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px;
  background: var(--note, #fff7e6); border-left: 3px solid var(--note-edge, #e9c46a); color: var(--ink, #101512);
}

.auth-btn {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
  font: 600 16px/1 var(--sans, "Barlow", system-ui, sans-serif); text-decoration: none; white-space: nowrap;
  background: var(--chip, #101512); color: var(--chip-ink, #fcfcfb);
}
.auth-btn:hover { opacity: .88; }
.auth-btn:focus-visible { outline: 2px solid var(--s1, #2a78d6); outline-offset: 2px; }
.auth-g { width: 22px; height: 22px; flex: none; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #fff; }
.auth-btn-quiet { background: var(--wash, rgba(16, 21, 18, .045)); color: var(--ink, #101512); padding: 0 16px; }
.auth-btn-quiet:hover { opacity: 1; background: var(--hair, rgba(16, 21, 18, .10)); }

.auth-code { display: grid; gap: 8px; margin: 0; padding-top: 18px; border-top: 1px solid var(--grid, #e3e5e0); }
.auth-code-head { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2, #4d5550); }
.auth-label { font-size: 13px; color: var(--muted, #6b736d); }
.auth-code-row { display: flex; gap: 8px; }
.auth-code input[name="code"] {
  box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px;
  border: 1px solid var(--axis, #c4c8c1); border-radius: 10px;
  background: var(--plane, #f3f4f1); color: var(--ink, #101512);
  font: 600 20px/1 var(--sans, "Barlow", system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.auth-code input[name="code"]:focus { outline: 2px solid var(--s1, #2a78d6); outline-offset: 1px; border-color: transparent; }
.auth-code input[aria-invalid="true"] { border-color: var(--bad, #c23434); }
.auth-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--bad, #c23434); }

.auth-link {
  justify-self: start; font: 600 14px/1.3 var(--sans, "Barlow", system-ui, sans-serif); color: var(--ink-2, #4d5550);
  text-decoration: none; border-bottom: 1px solid var(--axis, #c4c8c1);
}
.auth-link:hover { color: var(--ink, #101512); border-bottom-color: var(--ink-2, #4d5550); }

.auth-dev {
  margin: 0; padding: 10px 12px; border: 1px dashed var(--axis, #c4c8c1); border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--muted, #6b736d);
}

@media (max-width: 380px) {
  .auth-body { padding-left: 12px; padding-right: 12px; }
  .auth-card { padding: 22px 16px 18px; gap: 16px; }
  .auth-title { font-size: 40px; }
  .auth-code input[name="code"] { font-size: 18px; letter-spacing: .12em; padding: 0 10px; }
  .auth-btn-quiet { padding: 0 12px; }
}