/* The neutral stylesheet (D-074). Every colour and size is a token here; the Claude Design pass replaces this file. */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #ffffff;
  --ink: #1a1a1a;
  --muted: #5c5c5c;
  --rule: #d6d6d6;
  --accent: #08519c;                   /* links and the map's high end */
  --measure: 70ch;
  --leading: 1.6;
  /* map: ColorBrewer Blues (colour-blind safe), low → high */
  --map-1: #deebf7; --map-2: #9ecae1; --map-3: #6baed6; --map-4: #3182bd; --map-5: #08519c;
  --map-none: #bdbdbd;                 /* too few wells to say */
  --map-empty: #ffffff;                /* no tested wells */
  --map-line: #ffffff; --map-state: #4d4d4d; --hatch: #1a1a1a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/var(--leading) var(--font); }
a { color: var(--accent); }
header.top, main, footer.stamp { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
header.top { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
header.top .brand { font-weight: 700; color: var(--ink); text-decoration: none; }
header.top nav a { margin-left: 1em; }
main > *:not(figure):not(.params):not(.cols) { max-width: var(--measure); }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.2rem 0 .8rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.lede { font-size: 1.1rem; }
.crumb { margin: 1rem 0 0; color: var(--muted); }
.note { color: var(--muted); font-size: .92rem; }
.tag { font-weight: 400; font-size: .85rem; color: var(--muted); border: 1px solid var(--rule); padding: 0 .4em; margin-left: .4em; }
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 400; color: var(--muted); width: 45%; }
.cols { columns: 16rem; padding-left: 1.2em; }
.zip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.zip input { font: inherit; width: 7ch; padding: .3rem .4rem; border: 1px solid var(--muted); }
.zip button, .params button { font: inherit; padding: .3rem .8rem; border: 1px solid var(--muted); background: var(--bg); color: var(--ink); cursor: pointer; }
.zip p { flex-basis: 100%; margin: 0; min-height: 1.6em; }
.params { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.params button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
figure.map { position: relative; margin: 0; }
#map { width: 100%; height: auto; display: block; }
.county { stroke: var(--map-line); stroke-width: .25; cursor: pointer; }
.county:hover { stroke: var(--ink); stroke-width: 1; }
.state { fill: none; stroke: var(--map-state); stroke-width: .6; pointer-events: none; }
.hatched { fill: url(#hatch); pointer-events: none; }
.hatch-line { stroke: var(--hatch); stroke-width: 1; opacity: .45; }
.tip { position: absolute; background: var(--bg); border: 1px solid var(--ink); padding: .4rem .6rem; font-size: .88rem; max-width: 220px; pointer-events: none; }
.tip b, .tip span { display: block; }
#legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; margin-top: .5rem; }
#legend i { display: inline-block; width: 14px; height: 14px; margin-right: .35em; vertical-align: -2px; border: 1px solid var(--rule); }
#legend .hatch-key { background: repeating-linear-gradient(45deg, transparent 0 2px, var(--hatch) 2px 3px); opacity: .6; }
footer.stamp { margin-top: 3rem; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .88rem; }