:root {
  --accent: #1e3a8a;        /* navy: not used by any status or derived colour here */
  --accent-wash: #eef2ff;
  --accent-soft: #c7d2fe;
  --bg: #f5f6fa;
  --panel: #ffffff;
  --ink: #16181d;
  --ink-soft: #5b6472;
  --line: #d9dce2;
  --land: #e8eaee;
  --land-line: #ffffff;

  /* Status encoding. Closed recalls must read differently from open ones. */
  --ongoing: #c2410c;
  --completed: #a16207;
  --terminated: #64748b;

  --derived: #7c3aed;      /* anything we computed rather than read */
  --warn-bg: #fef3c7;
  --warn-line: #d9a441;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: #1d4ed8; }

header {
  padding: 14px 20px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

h1 { font-size: 19px; margin: 0 0 2px; letter-spacing: -0.01em; }
.tagline { color: var(--ink-soft); font-size: 13px; margin: 0 0 10px; }

/* The data-as-of banner is permanent, not dismissible. */
.banner {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: #fbfbfa; font-size: 12.5px; color: var(--ink-soft);
}
.banner strong { color: var(--ink); font-weight: 600; }
.banner .lag { flex-basis: 100%; }

.gap {
  margin-top: 8px; padding: 9px 12px; font-size: 12.5px;
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 6px;
}

/* Scoped to the map page. This must NOT be a bare `main` rule: every page has a <main>
   since the accessibility pass, and the landing page inherited this grid and collapsed
   into three squeezed columns. */
main.map { display: grid; grid-template-columns: 320px 1fr 360px;
           height: calc(100vh - 168px); min-height: 460px; }
main.home, main.page, main.record-page { display: block; height: auto; }
@media (max-width: 1100px) { main.map { grid-template-columns: 1fr; height: auto; } #map { height: 60vh; } }

.sidebar, .detail {
  background: var(--panel); padding: 16px; overflow-y: auto;
  border-right: 1px solid var(--line);
}
.detail { border-right: 0; border-left: 1px solid var(--line); }

#map { background: #f0f2f5; z-index: 0; }

h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
     color: var(--ink-soft); margin: 20px 0 8px; font-weight: 600; }
h2:first-child { margin-top: 0; }

.field { margin-bottom: 12px; }
label { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
select, input[type=range] { width: 100%; }
select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; font-size: 13.5px; }

.count { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.count b { color: var(--ink); font-size: 17px; font-weight: 650; }

.legend-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot.ring { background: transparent; border: 2px dashed var(--terminated); }

.note { font-size: 12px; color: var(--ink-soft); margin: 8px 0 0; }

/* Derived values carry a visible marker everywhere they appear. */
.derived {
  color: var(--derived); border-bottom: 1px dotted var(--derived);
  cursor: help; font-weight: 500;
}
.badge {
  display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--derived); color: var(--derived); background: #f5f3ff;
  vertical-align: 1px; margin-left: 6px;
}

dl { margin: 0; }
dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--ink-soft); margin-top: 13px; font-weight: 600; }
dd { margin: 2px 0 0; }
.unreported { color: var(--ink-soft); font-style: italic; }

.status-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff;
}

.source-link {
  display: block; margin-top: 18px; padding: 10px 12px;
  background: #f1f5ff; border: 1px solid #c7d7fe; border-radius: 6px; font-size: 13px;
}

.placeholder { color: var(--ink-soft); font-size: 13.5px; }

footer {
  padding: 16px 20px; font-size: 12.5px; color: var(--ink-soft);
  border-top: 1px solid var(--line); background: var(--panel);
}

input[type=search] {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px;
  font: inherit; font-size: 13.5px; background: #fff;
}
input[type=search]:disabled { background: #f4f5f7; color: var(--ink-soft); }

.cat-chip {
  display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: #eef2f7; border: 1px solid var(--line); margin: 0 4px 4px 0;
}
.unreviewed {
  margin-top: 8px; padding: 9px 12px; font-size: 12.5px;
  background: #fee2e2; border: 1px solid #dc7c7c; border-radius: 6px;
}

label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px;
              color: var(--ink); cursor: pointer; }
label.check input { margin-top: 2px; flex: none; }

.scale { display: flex; align-items: center; gap: 4px; margin: 8px 0 4px; }
.scale span { height: 12px; flex: 1; }
.scale-label { display: flex; justify-content: space-between;
               font-size: 11px; color: var(--ink-soft); }

.composition { font-size: 12.5px; margin-top: 10px; }
.composition div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.composition .low { color: #b45309; }


/* ---- the primary controls -------------------------------------------------
   Same treatment as the disease atlas's condition picker: the controls that change
   what everything else shows are styled as controls, not as body text. Here that is
   free-text search and the category filter — search because it reaches every record
   including the uncategorised ones, category because the rulebook is now reviewed. */
.picker { background:var(--accent-wash); border:1px solid var(--accent-soft);
  border-radius:10px; padding:13px 14px; margin:0 0 14px; }
.picker .field { margin-bottom:12px; }
.picker .field:last-of-type { margin-bottom:0; }
.picker label { display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; font-weight:700; color:var(--accent); margin-bottom:6px; }
.picker input[type=search], .picker select {
  width:100%; font-size:15px; font-weight:600; color:var(--ink);
  padding:10px 11px; background:#fff;
  border:2px solid var(--accent); border-radius:8px;
  box-shadow:0 1px 2px rgba(15,23,42,.08); cursor:pointer;
}
.picker input[type=search] { font-weight:500; cursor:text; }
.picker input[type=search]:disabled { background:#eef1f7; border-color:var(--accent-soft);
  color:var(--ink-soft); cursor:default; }
.picker select:hover { background:#fbfcff; }
.picker input:focus-visible, .picker select:focus-visible {
  outline:3px solid var(--accent-soft); outline-offset:1px; }
.picker .note { margin-top:6px; }

/* The selected recall is the headline of the detail panel, as the selected condition
   is on the disease atlas. */
h2.record-title { display:block; border-bottom:2px solid var(--accent-soft);
  padding-bottom:9px; margin:0 0 4px; }
h2.record-title .name { display:block; font-size:17px; font-weight:700;
  letter-spacing:-.01em; color:var(--ink); line-height:1.3; }
h2.record-title .rest { display:block; font-size:12px; font-weight:500;
  color:var(--ink-soft); margin-top:4px; }

/* ---- shared panel / legend / badge / stat treatment ---------------------- */

/* Section labels get the atlas accent as a rule, so panels read as panels. */
h2 { display:flex; align-items:center; gap:8px; padding-bottom:7px;
     border-bottom:2px solid var(--accent-soft); }

.legend-box { background:var(--accent-wash); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; margin-top:12px; }
.legend-box .legend-title { font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  font-weight:650; color:var(--ink-soft); margin-bottom:9px; }

/* Headline figures, so the numbers are not buried in a sentence. */
.stats { display:flex; gap:12px; flex-wrap:wrap; margin:2px 0 12px; }
.stat { flex:1 1 150px; background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:8px; padding:10px 13px; }
.stat .n { display:block; font-size:23px; font-weight:650; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.15; }
.stat .k { display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; }
.stat .k em { font-style:normal; color:var(--ink); }
.stat.muted { border-left-color:var(--line); }

/* Recall-atlas specifics. Status colour stays the primary encoding; these only
   make the encoding easier to read, never replace it. */
.status-pill { padding:3px 11px; font-weight:650; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(0,0,0,.06); }
.badge { font-weight:600; }
.legend-row { padding:2px 0; }
.dot { box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.sidebar h2:first-child, .detail h2:first-child { margin-top:0; }

/* ---- shared atlas nav (kept identical in both repos) ---------------------- */
.atlas-nav {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px 20px; background:#161b26; color:#e8eaee; font-size:13px;
  border-bottom:3px solid var(--accent);
}
.atlas-nav .brand { font-weight:650; letter-spacing:-.01em; color:#fff;
  margin-right:14px; text-decoration:none; }
.atlas-nav a { display:inline-flex; align-items:center; gap:7px; color:#c3c9d4;
  text-decoration:none; padding:5px 11px; border-radius:6px; }
.atlas-nav a:hover { background:#242b3a; color:#fff; }
.atlas-nav a.active { background:var(--accent); color:#fff; }
.atlas-nav .ico { width:15px; height:15px; flex:none; }
.atlas-nav .sep { flex:1; }
.atlas-nav .disclaimer { color:#97a0b0; font-size:11.5px; }
@media (max-width:820px) { .atlas-nav .disclaimer { display:none; } }

/* The page header carries the atlas accent so you always know which one you are in. */
header { border-top:0; box-shadow:inset 0 3px 0 var(--accent-soft); }
h1 { display:flex; align-items:center; gap:9px; }
h1 .ico { width:20px; height:20px; color:var(--accent); flex:none; }

/* Data-age warning. Escalates rather than sitting quietly. */
.stale { margin-top:8px; padding:10px 12px; border-radius:6px; font-size:13px;
  background:#fef3c7; border:1px solid #d9a441; color:#4a3708; }
.stale.bad { background:#fee2e2; border-color:#dc7c7c; color:#5c1a1a; }
.stale:empty { display:none; }

/* ---- per-recall static pages -------------------------------------------- */
.record-page { max-width:780px; margin:0 auto; padding:22px 20px 60px; }
.record-page .crumb { font-size:12.5px; color:var(--ink-soft); margin:0 0 14px; }
.record-page dt { margin-top:15px; }
.record-page .verbatim { background:#fbfcfd; border:1px solid var(--line);
  border-radius:6px; padding:10px 12px; }

/* ---- accessibility --------------------------------------------------------
   A skip link, because every page starts with a nav bar and a banner; without
   one, a keyboard or screen-reader user traverses them on every page. */
.skip { position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 6px 0;
  font-size:14px; font-weight:600; text-decoration:none; }
.skip:focus { left:0; }

/* A visible focus ring everywhere, not only on the controls that got one by hand. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--accent); outline-offset:2px; border-radius:3px;
}

/* ---- keyboard-reachable results list -------------------------------------
   The map's markers are canvas and cannot be focused. This list carries the same
   filtered set as real buttons and links, so the map is one way in, not the only one. */
.results { list-style:none; margin:10px 0 0; padding:0; }
.results li { border-bottom:1px solid var(--line); padding:2px 0; }
button.result { display:flex; gap:9px; align-items:flex-start; width:100%;
  background:none; border:0; padding:9px 4px; text-align:left; cursor:pointer;
  font:inherit; color:inherit; border-radius:5px; }
button.result:hover { background:var(--accent-wash); }
button.result .dot { margin-top:4px; }
.result-label { flex:1; font-size:13.5px; line-height:1.4; }
.result-meta { display:block; font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.result-link { display:inline-block; font-size:12px; margin:0 0 8px 25px; }
.linklike { background:none; border:0; padding:0; font:inherit; font-size:13px;
  color:#1d4ed8; cursor:pointer; text-decoration:underline; }

/* ---- small screens --------------------------------------------------------
   The three-column layout cannot work on a phone. Stack it, give the map a usable
   height, and let the panels scroll with the page rather than inside themselves. */
@media (max-width: 1100px) {
  main.map { grid-template-columns: 1fr; height: auto; }
  .sidebar, .detail { border: 0; border-bottom: 1px solid var(--line);
                      max-height: none; overflow: visible; }
  #map { height: 62vh; min-height: 340px; }
}
@media (max-width: 640px) {
  header { padding: 12px 14px 10px; }
  main > section, .sidebar, .detail { padding: 14px; }
  #map { height: 54vh; min-height: 280px; }
  .banner { font-size: 12px; }
  /* touch targets: 44px is the usual floor for a finger */
  button.result { padding: 12px 6px; }
  select, input[type=search] { min-height: 44px; }
  .atlas-nav a { padding: 9px 11px; }
}

/* Inset labels on the map. Small, muted, and always visible — a repositioned state
   must never read as its true location. */
.inset-label { font-size:10.5px; color:var(--ink-soft); white-space:nowrap;
  font-weight:600; letter-spacing:.02em; }
.inset-label em { font-style:normal; font-weight:500; opacity:.75; }

/* The corrections route, in every footer. A site asking to be held to account should
   not make being told a scavenger hunt. */
a.correct { font-weight: 600; }

/* ---- warmth ---------------------------------------------------------------
   The interiors were near-flat white. This adds colour to the CHROME only —
   page ground, panel grounds, header band, table headers, section rules. Every
   data colour is untouched: status on the map and the derived/flag markers are
   encodings, and restyling them would trade meaning for decoration. */
body { background:
    linear-gradient(180deg, #eaeefb 0%, rgba(234,238,251,0) 420px),
    var(--bg); }

header { background:
    linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%); }

.sidebar { background: linear-gradient(180deg, #fbfcff 0%, #f4f7fe 100%); }
.detail  { background: linear-gradient(180deg, #fbfcff 0%, #f7f9fe 100%); }

section, .panel { box-shadow: 0 1px 2px rgba(30,58,138,.05); }
thead th { background: var(--accent-wash); }
table tbody tr:nth-child(even) td { background: rgba(30,58,138,.022); }
.banner { background: linear-gradient(180deg,#fbfcff 0%, #f3f6fe 100%);
          border-color: var(--accent-soft); }