/* Jeeves tracker — shared tokens & components. One source of truth for every page. */
:root{
  --bg:#eef1f4; --surface:#ffffff; --ink:#16202a; --muted:#5b6672; --faint:#8a95a1;
  --line:#e3e7ec; --line-strong:#cfd6dd;
  --accent:#0f766e; --accent-soft:#d7efe9; --accent-tint:#e9f6f3;
  --warn:#b45309; --warn-bg:#fdf5e6; --warn-line:#eccb86;
  --err:#b42318; --err-bg:#fdecea;
  --ok:#0f766e;
  --radius:14px; --radius-sm:9px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding:max(18px,env(safe-area-inset-top)) 16px 96px;
}
.wrap{max-width:560px;margin:0 auto}

/* ---- header + nav ---- */
header.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 2px 14px}
.brand{display:flex;flex-direction:column;gap:2px}
.brand .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.brand h1{font-size:22px;font-weight:700;margin:0;letter-spacing:-.01em}
.who{font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:right;line-height:1.5}
.who button{font:inherit;color:var(--muted);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.who button:hover{color:var(--ink)}

nav.pages{display:flex;gap:6px;margin:0 2px 18px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
nav.pages a{flex:1;text-align:center;font:600 13px var(--sans);color:var(--muted);text-decoration:none;padding:8px 6px;border-radius:7px}
nav.pages a:hover{background:var(--accent-tint);color:var(--accent)}
nav.pages a.active{background:var(--accent);color:#fff}
nav.pages span.disabled{flex:1;text-align:center;font:600 13px var(--sans);color:var(--faint);padding:8px 6px;border-radius:7px;cursor:default}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(22,32,42,.04),0 8px 30px rgba(22,32,42,.05)}

/* ---- sign in (shared across every page) ---- */
#signin{padding:26px 22px}
#signin h2{margin:0 0 6px;font-size:18px}
#signin p{margin:0 0 18px;color:var(--muted);font-size:14px}
.field-row{display:flex;gap:8px}
input[type=email]{flex:1;font:15px var(--sans);padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{font:600 15px var(--sans);border:none;border-radius:var(--radius-sm);padding:11px 18px;cursor:pointer;background:var(--accent);color:#fff;text-decoration:none;display:inline-block}
.btn:hover{background:#0b5c55}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--accent-tint);color:var(--accent)}
.btn.ghost:hover{background:#dceee9}
.note{font-size:13px;color:var(--muted);margin-top:12px}
.note.warnproto{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);padding:10px 12px;border-radius:var(--radius-sm)}

.hidden{display:none!important}
@media (prefers-reduced-motion:no-preference){
  input,.btn,textarea,a{transition:border-color .15s,background .15s,box-shadow .15s}
}