:root{
  /* "Field log" — a printed operational document, not a consumer app card
     stack. Structure and type carry the character here; saturated colour is
     reserved almost entirely for signal DATA, so a status pill or a map pin
     is the most colourful thing on screen and reads instantly. */
  --bg:#f2f0ea; --surface:#fbfaf6; --surface-2:#edeae2; --surface-3:#e4e0d6;
  --border:#d6d1c4; --border-strong:#b9b2a1;
  --ink:#17191a; --ink-muted:#5a5c58; --ink-faint:#8a8c84;
  /* Exactly one non-data hue, for INTERACTIVE meaning only: links, focus
     rings, active states. Deliberately outside the red/amber/green ramp so it
     can never be mistaken for a signal reading. */
  --accent:#0f4c5c; --accent-ink:#ffffff; --accent-soft:#d7e4e8; --accent-strong:#0a3945;
  --sea:#dbe6ea;
  /* UI error colour, separate from the ramp so an error stays red even
     though "Poor" is orange. */
  --danger:#a3241a; --danger-soft:#f4ddd9;
  /* Signal severity ramp — the instrument scale. */
  --untested:#8b8c85; --untested-soft:#e6e3db;
  --none:#7a1512; --none-soft:#f0dbd8;
  --poor:#c0531a; --poor-soft:#f8e4d4;
  --moderate:#a8871a; --moderate-soft:#f4ebd0;
  --good:#2f6b3f; --good-soft:#dbe8dd;
  /* Legacy aliases — still referenced by admin/account/register. Removing
     these silently flattens those pages' pills to grey. */
  --partial:var(--moderate); --partial-soft:var(--moderate-soft);
  --improved:var(--good); --improved-soft:var(--good-soft);
  /* Panels are delineated by hairlines and ground shifts, not by floating.
     Only genuinely floating things (the modal) get a shadow of their own. */
  --shadow: none;
  --radius: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131517; --surface:#191c1f; --surface-2:#202427; --surface-3:#272c30;
    --border:#2c3236; --border-strong:#3c4449;
    --ink:#e9e7e1; --ink-muted:#a0a39d; --ink-faint:#787b73;
    --accent:#5fb3c6; --accent-ink:#07242c; --accent-soft:#1b3b43; --accent-strong:#8ed0de;
    --sea:#13262c;
    --danger:#e0796c; --danger-soft:#361d1a;
    --untested:#8b8c85; --untested-soft:#252927;
    --none:#ef8a86; --none-soft:#3a1917;
    --poor:#e8965a; --poor-soft:#372415;
    --moderate:#d9bb5c; --moderate-soft:#332c14;
    --good:#6fbf85; --good-soft:#1b2f21;
    --partial:var(--moderate); --partial-soft:var(--moderate-soft);
    --improved:var(--good); --improved-soft:var(--good-soft);
    --shadow: none;
  }
}
:root[data-theme="dark"]{
  --bg:#131517; --surface:#191c1f; --surface-2:#202427; --surface-3:#272c30;
  --border:#2c3236; --border-strong:#3c4449;
  --ink:#e9e7e1; --ink-muted:#a0a39d; --ink-faint:#787b73;
  --accent:#5fb3c6; --accent-ink:#07242c; --accent-soft:#1b3b43; --accent-strong:#8ed0de;
  --sea:#13262c;
  --danger:#e0796c; --danger-soft:#361d1a;
  --untested:#8b8c85; --untested-soft:#252927;
  --none:#ef8a86; --none-soft:#3a1917;
  --poor:#e8965a; --poor-soft:#372415;
  --moderate:#d9bb5c; --moderate-soft:#332c14;
  --good:#6fbf85; --good-soft:#1b2f21;
  --partial:var(--moderate); --partial-soft:var(--moderate-soft);
  --improved:var(--good); --improved-soft:var(--good-soft);
  --shadow: none;
}

*{box-sizing:border-box;}
html,body{ margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-size:15px; line-height:1.45;
}
h1,h2,h3{ font-family:'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif; letter-spacing:-.01em; }
button, .chip{ font-family:'IBM Plex Sans', system-ui, sans-serif; }
/* Every measurement, coordinate and timestamp is monospaced and
   tabular — it's instrument output, and columns of figures should line up. */
.stat-num, .mono{ font-variant-numeric:tabular-nums; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
a{ color:var(--accent); }

/* ---- shared form controls ---- */
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=email], select, textarea{
  font-family:inherit; font-size:.9rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:8px 10px; outline:none; width:100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
label{
  font-family:'IBM Plex Sans Condensed', sans-serif;
  font-size:.76rem; font-weight:600; color:var(--ink-muted); display:block; margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.07em;
}
.field{ margin-bottom:14px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  border-radius:var(--radius); padding:9px 16px; font-weight:600; font-size:.88rem;
  letter-spacing:.01em; cursor:pointer; text-decoration:none; line-height:1.25;
  font-family:'IBM Plex Sans', system-ui, sans-serif;
}
.btn.secondary{ background:transparent; color:var(--accent); }
.btn.ghost{ background:transparent; color:var(--ink-muted); border-color:var(--border-strong); }
.btn.ghost:hover{ border-color:var(--ink-muted); color:var(--ink); }
.btn[disabled]{ opacity:.55; cursor:default; }
/* Navigation clusters: same box language, less visual weight than a
   primary action, so the toolbar reads as consistent without shouting. */
.btn.sm{ padding:6px 11px; font-size:.79rem; font-weight:500; }
/* Anchors carrying .btn must not inherit the link colour. */
a.btn, a.btn:visited{ color:var(--accent-ink); }
a.btn.secondary, a.btn.secondary:visited{ color:var(--accent); }
a.btn.ghost, a.btn.ghost:visited{ color:var(--ink-muted); }
.banner{
  background:var(--accent-soft); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:10px 14px; font-size:.85rem; margin-bottom:14px;
}
.banner.err{ border-left-color:var(--danger); background:var(--danger-soft); }
.banner[hidden]{ display:none; }

/* ---- centered auth-card layout (login / account) ---- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
.auth-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px 26px; max-width:380px; width:100%;
}
.auth-card .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 6px;
}
.auth-card h1{ font-size:1.5rem; margin:0 0 18px; font-weight:700; }