/* The sign-in page's stylesheet: the brand palette and the card rules lifted
   from styles.css, and nothing that describes the app. styles.css itself is
   part of the shape a stranger may not see (prompt 03.5, Sam 2026-09-27) --
   its selectors name every pane -- so this file carries its own copy of the
   dozen rules the four screens use. Keep the two palettes identical; the
   hexes are the SDI brand's and are Fixed (sdi-graphic-design skill);
   tokens per prompts/08.6-design-plan.md §4. */
/* Barlow, the SDI heading face, self-hosted: CSP is font-src 'self'. Served by
   the static route because every page names the files below in a preload
   link and service/app.py derives its allowlist from src=/href=. */
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* metric-adjusted fallback so a late swap does not reflow (Barlow avg width .487 vs Segoe .50) */
@font-face { font-family: "Barlow Fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 97%; ascent-override: 100%; descent-override: 20%; }
:root {
  --font: "Barlow", "Barlow Fallback", system-ui, sans-serif;
  /* surfaces */
  --bg: #ffffff;  --surface: #f4f6f4;  --panel: #ffffff;
  --line: #e4e7e4;  --line-strong: #d5d5d5;
  /* ink (SDI neutrals) */
  --ink: #363636;  --ink-2: #4a4c4a;  --muted: #666666;  --faint: #8c918c;
  /* greens: #348c4f is the mark, fills and the map; small text uses
     --green-text, the one derived hex (5.7:1 on white, ruling 2026-09-27) */
  --green: #348c4f;  --green-bright: #45c76f;  --green-text: #2b7442;
  --green-tint: #e9f4ec;  --green-tint-2: #cfe8d6;
  --blue: #1b5e9b;  --blue-bright: #1780ce;
  --map-0: #e6e8e6; --map-1: #d3efdb; --map-2: #a4eab7; --map-3: #45c76f; --map-4: #348c4f; --map-5: #1f5c33;
  /* movement position: tag text on its tint, every pair AA */
  --smo: #2b7442;  --ally: #1b5e9b;  --bystander: #666666;  --target: #b8461e;  --opposition: #b51a59;
  --smo-tint: #e9f4ec;  --ally-tint: #e7eff8;  --bystander-tint: #eeeeee;  --target-tint: #fbebe4;  --opposition-tint: #f9e6ee;
  --warn: #8a5a00;  --warn-tint: #fff4e0;  --danger: #a82b2b;  --danger-tint: #fbe9e9;
  /* chart series: brand Dark Green (revenue) / Dark Blue (expenses) */
  --rev: #348c4f;  --exp: #1b5e9b;
  /* shape, depth, motion, spacing */
  --r-ctl: 4px;  --r-box: 8px;
  --shadow-1: 0 1px 2px rgba(20,30,20,.06), 0 1px 3px rgba(20,30,20,.05);
  --shadow-2: 0 12px 32px rgba(20,30,20,.12), 0 2px 6px rgba(20,30,20,.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--green-bright) 40%, transparent);
  --t: 150ms ease;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --accent: var(--green-text);  --accent-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131513;  --surface: #1a1d1a;  --panel: #1b1e1b;
    --line: #2a2e2a;  --line-strong: #3a3f3a;
    --ink: #e8eae8;  --ink-2: #cfd3cf;  --muted: #9aa09a;  --faint: #6f756f;
    --green-text: #5fd684;  --green-tint: rgba(69,199,111,.12);  --green-tint-2: rgba(69,199,111,.22);
    --map-0: #262a26; --map-1: #244a31; --map-2: #2f7d47; --map-3: #45c76f; --map-4: #8fe3a8; --map-5: #d3efdb;
    --smo: #5fd684;  --ally: #5aa9e6;  --bystander: #9aa09a;  --target: #f08a5d;  --opposition: #e8629a;
    --smo-tint: rgba(69,199,111,.14);  --ally-tint: rgba(23,128,206,.16);  --bystander-tint: rgba(154,160,154,.14);
    --target-tint: rgba(240,138,93,.14);  --opposition-tint: rgba(232,98,154,.14);
    --warn: #ffcf7a;  --warn-tint: rgba(255,180,60,.14);  --danger: #ff8a8a;  --danger-tint: rgba(255,120,120,.14);
    --rev: #45c76f;  --exp: #1780ce;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);  --shadow-2: 0 12px 32px rgba(0,0,0,.55);
    --accent-ink: #0d120f;
  }
}
html { color-scheme: light dark; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
::placeholder { color: var(--faint); }
::selection { background: var(--green-tint-2); }
a { color: var(--green-text); }
a:hover { text-decoration-thickness: 2px; text-underline-offset: 2px; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---- the two panels ---- */
.login { min-height: 100vh; display: grid; grid-template-columns: 46% 1fr; }
.side {
  position: relative; overflow: hidden; background: var(--surface);
  padding: var(--s8); display: flex; flex-direction: column; gap: var(--s12);
}
/* the curved bands: the one decorative element in the product */
.side svg.lines { position: absolute; left: 63%; top: -10%; width: 145%; height: 150%; pointer-events: none; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .side svg.lines { mix-blend-mode: screen; opacity: .55; } }

/* the SDI lockup: the institute's own logo (the supplied PNG, whole), a rule,
   and the product's name in words; the logo already says Stray Dog Institute */
.lockup { position: relative; display: inline-flex; align-items: center; gap: 14px; color: var(--ink); }
.lockup .logo { height: 64px; width: auto; flex: none; }
.lockup .rule { width: 1px; height: 44px; background: var(--ink); opacity: .55; }
.lockup .w1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }

.tagline {
  position: relative; max-width: 21ch; margin: var(--s6) 0 0;
  font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
}
.tagline small { display: block; max-width: 32ch; margin-top: var(--s4); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--muted); }

.form { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--s8); }
.lang { position: absolute; top: var(--s5); right: var(--s6); display: flex; gap: 2px; }
.lang button {
  height: 30px; padding: 0 10px; border: 0; background: none; color: var(--muted);
  font: 500 13px var(--font); border-radius: var(--r-ctl); cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.lang button:hover { color: var(--ink); background: var(--surface); }
.lang button.on { color: var(--green-text); background: var(--green-tint); }

/* ---- the card: whatever login.js renders into #modal ---- */
.card { width: 100%; max-width: 400px; }
.card:empty { display: none; }
.card h2 { margin: 0 0 var(--s2); font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.modal-sub { margin: 0 0 var(--s3); color: var(--muted); font-size: 16px; line-height: 1.5; }
.modal-sub b, .modal-sub strong { color: var(--ink); font-weight: 600; }
.modal-sec { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s4); }
.modal-sec .modal-sub { margin: 0; font-size: 14px; }
/* one field: label above, input below */
.modal-row { margin: var(--s5) 0 0; }
.modal-row label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.modal-row input {
  width: 100%; height: 44px; padding: 0 14px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: 16px var(--font);
  transition: border-color var(--t), box-shadow var(--t);
}
.modal-row input:hover { border-color: var(--muted); }
.modal-row input:focus-visible { outline: none; border-color: var(--green); box-shadow: var(--ring); }
.modal-row input.bad { border-color: var(--danger); }
.modal-row input.bad:focus-visible { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
#li-code { font-size: 22px; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
/* the line under the field: a hint, or the refusal in --danger */
#li-msg, #rc-msg { min-height: 0; margin: 6px 0 0; font-size: 14px; }
#li-msg.err, #rc-msg.err { color: var(--danger); }
#li-msg:empty, #rc-msg:empty { margin: 0; }
/* the primary on top at full width, the quiet link under it */
.modal-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--s3); margin-top: var(--s4); }
.navbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px;
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--r-ctl); font: 500 16px var(--font); cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.navbtn:hover { border-color: var(--muted); background: var(--surface); }
.navbtn:active { transform: translateY(1px); }
.navbtn.on { background: var(--green-text); color: var(--accent-ink); border-color: var(--green-text); }
.navbtn.on:hover { filter: brightness(.93); }
.navbtn[disabled] { opacity: .45; cursor: default; transform: none; }
.linklike { align-self: center; background: none; border: 0; padding: 4px 0; color: var(--green-text); font: 500 14px var(--font); cursor: pointer; }
.linklike:hover { text-decoration: underline; text-underline-offset: 2px; }
.modal-sub .linklike { display: inline; padding: 0; font-size: inherit; }

/* phone: one column, the brand panel first */
@media (max-width: 720px) {
  .login { grid-template-columns: 1fr; }
  .side { min-height: 220px; padding: var(--s5); gap: var(--s6); }
  .side svg.lines { left: 70%; top: -55%; width: 130%; height: 170%; opacity: .9; }
  .tagline { font-size: 22px; }
  .tagline small { display: none; }
  .form { align-items: flex-start; padding: var(--s12) var(--s4) var(--s8); }
  .lang { top: var(--s3); right: var(--s3); }
  .lockup { gap: 10px; }
  .lockup .logo { height: 48px; }
  .lockup .rule { height: 34px; }
  .lockup .w1 { font-size: 18px; }
}

/* focus is the brand ring, not the browser's black */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition: none !important; animation: none !important; }
}