/* data.ejgallego.com
   Tokens copied from site/site.css rather than shared: the sites deploy to separate
   docroots and must not develop a build-time coupling. Chart colours are added here and
   are chosen to stay distinguishable in both themes and to survive greyscale printing,
   which is why the two series also differ in dash pattern and not only in hue. */

:root{
  --bg:#f6f7f9; --surface:#ffffff; --ink:#141b23; --muted:#5a6673;
  --line:#e5e9ee; --accent:#0b7285; --accent-ink:#0b7285; --accent-soft:#e4f2f4;
  --grid:#e9edf1; --s1:#0b7285; --s2:#b8541a; --s3:#5f3dc4; --s4:#2b6b3f; --bar:#0b7285;
  --warn-soft:#fdf3e0; --warn-ink:#8a5a00; --warn-edge:#e0b060;
  --shadow:0 1px 2px rgba(16,24,32,.04),0 8px 24px rgba(16,24,32,.06);
  --maxw:920px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1117; --surface:#161b22; --ink:#e8edf2; --muted:#9aa7b4;
    --line:#232b35; --accent:#38b6c9; --accent-ink:#5fcfe0; --accent-soft:#12303a;
    --grid:#222a34; --s1:#38b6c9; --s2:#e08a4a; --s3:#a78bfa; --s4:#6cc48a; --bar:#38b6c9;
    --warn-soft:#2e2410; --warn-ink:#e0b060; --warn-edge:#6b5320;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
h1,h2{line-height:1.25; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:20; padding:9px 13px; border-radius:8px;
  background:var(--ink); color:var(--bg); font-weight:700; transform:translateY(-150%);
}
.skip-link:focus{transform:translateY(0)}

header{padding:22px 0 34px; border-bottom:1px solid var(--line)}
.site-nav{display:flex; gap:10px; align-items:center; font-size:.84rem; font-weight:650; margin-bottom:32px}
.site-nav a{color:var(--muted)}
.site-nav .here{color:var(--ink)}
.eyebrow{color:var(--accent-ink); font-weight:600; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase; margin:0 0 8px}
h1{font-size:clamp(1.9rem,5vw,2.7rem); letter-spacing:-.02em}
.tagline{margin:12px 0 0; font-size:1.05rem; color:var(--muted); max-width:56ch}

section{padding:38px 0; border-bottom:1px solid var(--line)}
.sec-title{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:10px}
.lead{color:var(--muted); margin:0 0 18px; max-width:66ch}
#provenance p{max-width:68ch}

/* headline stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:14px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px;
}
.stat-value{font-size:1.7rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat-label{font-size:.85rem; color:var(--muted); font-weight:600}
.stat-sub{font-size:.78rem; color:var(--muted)}
.checked{color:var(--muted); font-size:.92rem; margin:18px 0 0; max-width:68ch}

.banner{
  background:var(--warn-soft); border:1px solid var(--warn-edge); color:var(--warn-ink);
  border-radius:10px; padding:12px 16px; margin:0 0 18px; max-width:68ch; font-size:.94rem;
}

/* charts */
.chart{width:100%; height:auto; display:block; overflow:visible}
.chart .grid{stroke:var(--grid); stroke-width:1}
.chart .tick{fill:var(--muted); font-size:11px}
.chart .series{fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.chart .series.s1{stroke:var(--s1)}
.chart .series.s2{stroke:var(--s2); stroke-dasharray:6 4}
.chart .series.s3{stroke:var(--s3); stroke-dasharray:2 3}
.chart .series.s4{stroke:var(--s4); stroke-dasharray:11 3 2 3}
.chart .dot.s1{fill:var(--s1)}
.chart .dot.s2{fill:var(--s2)}
.chart .dot.s3{fill:var(--s3)}
.chart .dot.s4{fill:var(--s4)}
.chart .bar{fill:var(--bar)}
.chart-empty{color:var(--muted)}

.legend{display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.88rem; margin:10px 0 0}
.key{display:inline-block; width:16px; height:3px; margin-right:7px; vertical-align:middle}
.key.s1{background:var(--s1)}
.key.s2{background:var(--s2)}
.key.s3{background:var(--s3)}
.key.s4{background:var(--s4)}

/* the index: one card per topic */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.card{
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; box-shadow:var(--shadow);
}
.card:hover{border-color:var(--accent)}
.card-eyebrow{color:var(--accent-ink); font-weight:700; letter-spacing:.05em; font-size:.78rem; text-transform:uppercase}
.card-figure{font-size:2.1rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.card-label{color:var(--muted); font-size:.9rem; font-weight:600}
.card-more{color:var(--muted); font-size:.9rem; margin-top:8px}

/* the method sections */
.gates{margin:0}
.gates dt{font-weight:700; margin-top:16px}
.gates dt:first-child{margin-top:0}
.gates dd{margin:5px 0 0; color:var(--muted); max-width:68ch}

/* the numbers behind each chart */
.table-wrap{margin-top:14px}
.table-wrap summary{cursor:pointer; color:var(--accent-ink); font-size:.9rem; font-weight:600}
.table-wrap table{border-collapse:collapse; width:100%; margin-top:12px; font-size:.9rem; background:var(--surface)}
.table-wrap caption{text-align:left; color:var(--muted); font-size:.85rem; padding-bottom:8px}
.table-wrap th,.table-wrap td{text-align:right; padding:7px 11px; border-bottom:1px solid var(--line)}
.table-wrap th:first-child,.table-wrap td:first-child{text-align:left}
.table-wrap thead th{font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.table-wrap tbody tr:last-child td{border-bottom:0}

.sources{margin:0 0 16px; padding-left:20px; color:var(--muted)}
.sources li{margin-bottom:5px}
.health{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0; padding:12px 16px; color:var(--muted); font-size:.94rem;
}
.colophon{color:var(--muted); font-size:.88rem}

@media print{
  .skip-link,.table-wrap summary{display:none}
  .table-wrap[open] table{display:table}
  body{background:#fff; color:#000}
  section{border:0; padding:12px 0; break-inside:avoid}
}