/* Chunk 251: the sign-in pages (backend/signin.py). Standalone, so a signed-out
   visit doesn't load the app's whole stylesheet. The values are the app's own
   tokens (style.css :root, build-checklist.md); keep them in step. No card:
   the words sit on the paper, the field and the one Ink pill are the anchors
   (design-principles.md 1 and 5). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-tight-latin.woff2") format("woff2"); }

:root {
  --page: #f4f3ef;
  --surface: #ffffff;
  --ink: #1c1d21;
  --text-2: #3a3c42;
  --muted: #62646b;
  --field-line: #85878e;
  --line: #d9d8d2;
  --brand-accent: #e8590c;
  --primary-fill: #1c1d21;
  --on-primary: #f4f3ef;
  --warn-bg: #fff3cd;
  --warn-line: #e0c97a;
  --warn-ink: #7a5b00;
  --err-ink: #b4430a; /* the app's missed ink 2: no red on a view; 4.5:1 on the paper */
  --link: #2a5db0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #141517; --surface: #1d1f22; --ink: #ecebe6; --text-2: #c9c8c2; --muted: #9a9ca3;
    --field-line: #787b82; --line: #33363b; --brand-accent: #f07a3a; --primary-fill: #ecebe6;
    --on-primary: #141517; --warn-bg: #3a3220; --warn-line: #6b5a2a; --warn-ink: #f0d68a;
    --err-ink: #ffb48a; --link: #8fb3ff; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #141517; --surface: #1d1f22; --ink: #ecebe6; --text-2: #c9c8c2; --muted: #9a9ca3;
  --field-line: #787b82; --line: #33363b; --brand-accent: #f07a3a; --primary-fill: #ecebe6;
  --on-primary: #141517; --warn-bg: #3a3220; --warn-line: #6b5a2a; --warn-ink: #f0d68a;
  --err-ink: #ffb48a; --link: #8fb3ff; color-scheme: dark;
}

* { box-sizing: border-box; }
body.signin {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font: 15px/22px "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.signin-top { padding: 20px 16px 0; }
.signin-top a { display: inline-block; border-radius: 6px; }
.signin-logo { display: block; height: 26px; width: auto; color: var(--ink); }
.signin-logo .accent { fill: var(--brand-accent); }

.signin-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 12vh 16px 48px;
}
.signin-card h1 {
  margin: 0 0 12px;
  font: 700 40px/44px "Inter Tight", "Inter", system-ui, sans-serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.signin-card h1:focus { outline: none; }
.signin-card p { margin: 0 0 12px; color: var(--text-2); }
.signin-card p.quiet { color: var(--muted); font-size: 14px; line-height: 20px; }
.signin-card strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.signin-form { margin-top: 28px; }
.signin-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.signin-form input[type="email"] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.2 "Inter", system-ui, sans-serif; /* 16px: phones don't zoom in */
}
.signin-form input[aria-invalid="true"] { border-color: var(--err-ink); box-shadow: inset 0 0 0 1px var(--err-ink); }
.signin-card .field-error { margin: 8px 0 0; color: var(--err-ink); font-size: 14px; font-weight: 500; line-height: 20px; }

.signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-fill);
  color: var(--on-primary);
  font: 600 15px/1 "Inter", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.signin-btn:hover { filter: brightness(1.15); }
.signin-btn:active { transform: scale(0.98); }

.signin-note {
  margin: 0 0 20px;
  padding: 10px 12px;
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 14px;
  line-height: 20px;
}
.signin-card a:not(.signin-btn) { color: var(--link); text-underline-offset: 2px; }
.signin-more { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }

:is(a, button, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.signin-form input:focus-visible { outline-offset: 0; border-color: var(--ink); }
.signin-form input[aria-invalid="true"]:focus-visible { outline-color: var(--err-ink); border-color: var(--err-ink); }

@media (min-width: 700px) {
  .signin-top { padding: 28px 32px 0; }
  .signin-card { padding-top: 22vh; }
  .signin-card h1 { font-size: 44px; line-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .signin-btn:active { transform: none; }
}