/* ─────────────────────────────────────────────────────────────────────────
   FreeParcelData — the system

   Built entirely on tokens.css. No colour, size or timing literal appears
   below except where a value is structural (hairline widths, grid counts) or
   is a derived tint of a token.

   The governing idea is a USGS topographic sheet: hairline rules, square
   corners, letterspaced uppercase labels in the margins, and colour used only
   where it carries meaning. Cadastral drawings have square corners, so the
   only rounding here is 2–3px on things you click.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Reset ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: rgb(var(--c-paper));
}

body {
  margin: 0;
  background: rgb(var(--c-paper));
  color: rgb(var(--c-ink));
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }

a {
  color: inherit;
  text-decoration-color: rgb(var(--c-ink-faint));
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: rgb(var(--c-hydro)); }

/* Focus is never removed, only styled. A keyboard user has to be able to see
   where they are, and this site is a directory — it is navigated by keyboard
   more than most. */
:focus-visible {
  outline: 2px solid rgb(var(--c-hydro));
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgb(var(--c-hydro) / 0.22); }

/* ── Type primitives ────────────────────────────────────────────────────── */

/* Archivo carries a width axis. Set wide, the way a map sheet letters a
   county name across a quad. */
h1, h2, h3, .display {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
}

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.dim { color: rgb(var(--c-ink-faint)); }
.alert { color: rgb(var(--c-survey)); font-weight: 600; }
.pos { color: rgb(var(--c-vegetation)); }
.neg { color: rgb(var(--c-survey)); }
.right { text-align: right; }

/* The margin label of a map sheet: small, uppercase, wide-tracked. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-ink-faint));
  margin: 0 0 var(--s-3);
}
.eyebrow a { color: rgb(var(--c-ink-soft)); }

.sect {
  font-size: var(--t-lg);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid rgb(var(--c-ink));
}
.sect__note {
  color: rgb(var(--c-ink-soft));
  max-width: var(--measure);
  margin: calc(var(--s-4) * -1) 0 var(--s-4);
  font-size: var(--t-sm);
}
/* The pull-up above is right under a `.sect` rule and wrong anywhere else. */
.sect__note--reset { margin-top: 0; }

/* A heading inside a section, below the ruled `.sect`. */
.subsect {
  font-size: var(--t-md);
  margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: var(--border-firm);
}
.subsect--tight { margin-top: var(--s-5); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--s-3); top: calc(var(--s-3) * -8);
  z-index: 100; padding: var(--s-3) var(--s-4);
  background: rgb(var(--c-ink)); color: rgb(var(--c-paper));
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s-3); }

.empty {
  padding: var(--s-5);
  border: 1px dashed rgb(var(--c-rule-strong));
  color: rgb(var(--c-ink-faint));
  font-size: var(--t-sm);
}

.more { margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 600; }
.more a { color: rgb(var(--c-hydro)); text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

main { display: block; }
main:focus { outline: none; }

.band { padding-block: var(--s-7); }
.band--sunk { background: rgb(var(--c-sunk)); }
.band--figures { padding-block: var(--s-5); border-block: var(--border-hair); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
/* Explanation on the left, specimen on the right. */
.grid--split { grid-template-columns: 1fr; }

/* `min-width: 0` on both tracks, not decoration: a grid item's automatic
   minimum size is its min-content width, so one wide table inside the main
   column stretches the whole grid and takes the page's horizontal scrollbar
   with it. The table has its own scroll container; the column must be allowed
   to be narrower than it. */
.layout { display: grid; gap: var(--s-6); padding-block: var(--s-6); }
.layout__main { min-width: 0; }
.layout__side { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }

.sect-block { margin-bottom: var(--s-7); }
.sect-block:last-child { margin-bottom: 0; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1000px) {
  :root { --page-gutter: var(--s-6); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layout--county { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-7); }
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgb(var(--c-paper) / 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: var(--border-firm);
}

.masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand toggle"
    "nav   nav";
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-2);
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand__mark { color: rgb(var(--c-ink)); flex: none; }
.brand__cell { fill: rgb(var(--c-hydro)); }
.brand__name {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* A plain strip, not a disclosure widget. Below 900px it scrolls sideways
   inside its own row rather than collapsing behind a control — six links is
   not enough content to justify a menu, and a menu is one more thing that can
   fail to open. */
.nav {
  grid-area: nav;
  display: flex;
  gap: var(--s-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--page-gutter) * -1);
  padding-inline: var(--page-gutter);
  border-top: var(--border-hair);
  padding-top: var(--s-2);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav a:hover { background: rgb(var(--c-sunk)); }
.nav a[aria-current="page"] {
  border-bottom-color: rgb(var(--c-survey));
  color: rgb(var(--c-ink));
  font-weight: 600;
}
.nav__cta { color: rgb(var(--c-hydro)); font-weight: 600; }

.themetoggle {
  grid-area: toggle;
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: none;
  border: var(--border-firm);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: rgb(var(--c-ink-soft));
}
.themetoggle:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-sunk)); }
.themetoggle__moon { display: none; }
:root[data-theme="dark"] .themetoggle__sun { display: none; }
:root[data-theme="dark"] .themetoggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle__sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle__moon { display: block; }
}

@media (min-width: 960px) {
  .masthead__inner {
    grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr) auto;
    grid-template-areas: "brand search nav toggle";
    min-height: 3.75rem;
    padding-block: 0;
  }
  /* Still `overflow-x: auto`, never `visible`: if the four columns ever stop
     fitting, the nav has to clip inside its own track rather than paint over
     the search field next to it. */
  .nav {
    justify-content: flex-end;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 0;
    padding-top: 0;
  }
}

/* ── Search ─────────────────────────────────────────────────────────────── */

.search { display: flex; gap: 0; min-width: 0; }
.search input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  font-size: var(--t-sm);
}
.search input::placeholder { color: rgb(var(--c-ink-faint)); }
.search button {
  flex: none;
  display: inline-grid; place-items: center;
  padding-inline: var(--s-3);
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  border: 1px solid rgb(var(--c-ink));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  cursor: pointer;
}
.search button:hover { background: rgb(var(--c-hydro)); border-color: rgb(var(--c-hydro)); }

.search--head { grid-area: search; display: none; }
@media (min-width: 960px) { .search--head { display: flex; } }

.search--hero input, .search--page input { padding: var(--s-3) var(--s-4); font-size: var(--t-base); }
.search--hero, .search--page { max-width: 34rem; }
.search--page { margin-top: var(--s-4); }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--t-sm);
}
.filterbar label { color: rgb(var(--c-ink-faint)); }
.filterbar select {
  padding: var(--s-2) var(--s-3);
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-radius: var(--r-sm);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgb(var(--c-rule-strong));
  border-radius: var(--r-md);
  background: rgb(var(--c-raised));
  color: rgb(var(--c-ink));
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { border-color: rgb(var(--c-ink)); }

.btn--primary {
  background: rgb(var(--c-ink));
  border-color: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
}
.btn--primary:hover { background: rgb(var(--c-hydro)); border-color: rgb(var(--c-hydro)); }

.btn--ghost { background: transparent; }
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: rgb(var(--c-ink-soft));
  padding-inline: var(--s-2);
}
.btn--quiet:hover { color: rgb(var(--c-ink)); border-color: rgb(var(--c-rule)); }

.btn--sm { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); }
.btn--lg { padding: var(--s-4) var(--s-5); font-size: var(--t-base); }

/* ── Coverage scale ─────────────────────────────────────────────────────── */

/* `stale` extends the scale defined in tokens.css. Contour brown is already
   the token for "aging", so this is a use of the system, not a new colour. */
:root { --cov-stale: var(--c-contour); }

.cov-none      { --cov: var(--cov-none); }
.cov-bounty    { --cov: var(--cov-bounty); }
.cov-stale     { --cov: var(--cov-stale); }
.cov-archive   { --cov: var(--cov-archive); }
.cov-community { --cov: var(--cov-community); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.15em var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  border: 1px solid rgb(var(--c-rule-strong));
  border-left-width: 3px;
  background: rgb(var(--c-raised));
  white-space: nowrap;
}
.badge--lg { font-size: var(--t-sm); padding: var(--s-2) var(--s-3); }

.badge--none      { border-left-color: rgb(var(--c-rule-strong)); color: rgb(var(--c-ink-faint)); }
.badge--bounty    { border-left-color: rgb(var(--c-survey));     background: rgb(var(--c-survey-wash));  color: rgb(var(--c-survey)); }
.badge--stale     { border-left-color: rgb(var(--c-contour));    background: rgb(var(--c-contour-wash)); color: rgb(var(--c-contour)); }
.badge--archive   { border-left-color: rgb(var(--c-hydro));      background: rgb(var(--c-hydro-wash));   color: rgb(var(--c-hydro)); }
.badge--community { border-left-color: rgb(var(--c-vegetation)); background: rgb(var(--c-veg-wash));     color: rgb(var(--c-vegetation)); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--border-hair);
  font-size: var(--t-xs);
}
.legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.legend__swatch {
  width: 0.75rem; height: 0.75rem;
  background: rgb(var(--cov));
  border: 1px solid rgb(var(--c-ink) / 0.12);
  flex: none;
}
.legend__label { color: rgb(var(--c-ink-soft)); }
.legend__count { color: rgb(var(--c-ink)); font-weight: 500; }

.mult {
  display: inline-block;
  padding: 0.05em var(--s-2);
  background: rgb(var(--c-survey));
  color: rgb(var(--c-paper));
  font-weight: 600;
  font-size: var(--t-xs);
}

/* ── The mosaic ─────────────────────────────────────────────────────────── */

.mosaic { position: relative; margin: 0; }

.mosaic__svg { width: 100%; height: auto; overflow: visible; }

.mosaic__code {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: rgb(var(--c-ink-faint));
  text-transform: uppercase;
}

.mosaic__hit { fill: transparent; }

.mosaic__state { cursor: pointer; }
.mosaic__state:hover .mosaic__code,
.mosaic__state:focus-visible .mosaic__code { fill: rgb(var(--c-ink)); }
.mosaic__state:hover .mo { filter: brightness(1.08); }
.mosaic__state:focus-visible {
  outline: 2px solid rgb(var(--c-hydro));
  outline-offset: 1px;
}

/* Single-letter classes: the mosaic emits 3,143 of these and verbose names
   would add ~25 KB to the most-requested page on the site. The mapping lives
   in apps/core/mosaic.py:CELL_CLASS. */
.mo    { shape-rendering: crispEdges; }
.mo.n  { fill: rgb(var(--c-rule)); }
.mo.b  { fill: rgb(var(--c-survey)); }
.mo.s  { fill: rgb(var(--c-contour)); }
.mo.a  { fill: rgb(var(--c-hydro)); }
.mo.c  { fill: rgb(var(--c-vegetation)); }

.mo.is-hot { stroke: rgb(var(--c-ink)); stroke-width: 1.2; paint-order: stroke; }

/* The fill-in. Staggered per state tile by column, so the sweep follows the
   grid west to east rather than the alphabet. Delay comes from --mo-delay,
   which the server stamps on each state group. */
.js .mosaic__svg .mo {
  animation: mo-in var(--dur-slow) var(--ease) both;
  animation-delay: var(--mo-delay, 0s);
}
@keyframes mo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mosaic__readout {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  font-size: var(--t-xs);
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -140%);
}
.mosaic__readout[hidden] { display: none; }
.mosaic__readout-geoid { opacity: 0.7; }
.mosaic__readout-cov { text-transform: uppercase; letter-spacing: var(--track-label); font-size: 0.625rem; }

/* One state at reading size, on the state hub. */
.statetile { margin: 0; }
.statetile__svg { width: 100%; height: auto; }
.statetile__cell { cursor: pointer; }
.statetile__cell:hover .mo { filter: brightness(1.12); }
.statetile__cell:hover .mo,
.statetile__cell:focus-visible .mo { stroke: rgb(var(--c-ink)); stroke-width: 1.5; }
.statetile__cell:focus-visible { outline: none; }

/* ── The hero ───────────────────────────────────────────────────────────── */

/* One column, one action. The homepage hero exists to get a stranger to the
   page for their own county, so nothing sits beside the lookup competing for
   the same glance. The faint grid is the ruling of a plat sheet — it is the
   only decorative mark on the page and it is set almost to the paper. */
.hero {
  padding-block: var(--s-7) var(--s-6);
  border-bottom: var(--border-hair);
  background:
    linear-gradient(rgb(var(--c-rule) / 0.28) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgb(var(--c-rule) / 0.28) 1px, transparent 1px) 0 0 / 32px 100%,
    rgb(var(--c-paper));
}
.hero .wrap { display: grid; gap: var(--s-5); }

.hero__h {
  font-size: var(--t-2xl);
  font-variation-settings: "wdth" 108;
  margin-bottom: var(--s-4);
  max-width: 20ch;
}
/* A break that only exists where there is room for the line it makes. Below
   that the headline wraps on its own, which is better than a break landing in
   the middle of a phrase. */
.brk { display: none; }
.hero__lede {
  font-size: var(--t-md);
  color: rgb(var(--c-ink-soft));
  max-width: 56ch;
}

@media (min-width: 760px) {
  .hero { padding-block: var(--s-8) var(--s-7); }
  .hero__h { font-size: var(--t-3xl); }
  .brk { display: inline; }
}
@media (min-width: 1100px) {
  .hero__h { font-size: var(--t-4xl); }
  .hero__lede { font-size: var(--t-lg); line-height: var(--lh-snug); }
}

/* ── The lookup plate ───────────────────────────────────────────────────── */

/* Set as a bordered, labelled block, the way an index sheet labels the thing
   you are meant to fill in. A bare input floating on the page is the one
   arrangement a visitor can mistake for decoration. */
.lookup {
  max-width: 40rem;
  border: 2px solid rgb(var(--c-ink));
  background: rgb(var(--c-raised));
  box-shadow: var(--shadow-raise);
}
.lookup__label {
  display: block;
  padding: var(--s-2) var(--s-3);
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
}
.lookup__body { display: grid; gap: var(--s-3); padding: var(--s-4); }
.lookup__hint { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }

.search--plate input {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-md);
  border-color: rgb(var(--c-rule-strong));
}
.search--plate button { padding-inline: var(--s-5); }
@media (min-width: 560px) {
  .search--plate input { font-size: var(--t-lg); }
}

/* The jump strip. Real links to the counties people actually arrive looking
   for, which is both a shortcut and a crawl surface. */
.jump {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
}
.jump__k {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
}
.jump a { text-decoration: none; border-bottom: 1px solid rgb(var(--c-rule-strong)); }
.jump a:hover { border-bottom-color: rgb(var(--c-hydro)); color: rgb(var(--c-hydro)); }
.jump a .mono { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); margin-left: var(--s-1); }
.jump__all { color: rgb(var(--c-hydro)); font-weight: 600; border-bottom-color: transparent; }

/* ── The promise strip ──────────────────────────────────────────────────── */

/* What the site costs, what it hands over, and what it asks for — directly
   under the hero, because those are the three things a stranger is deciding
   about before they will type anything. */
.band--promise { padding-block: var(--s-6); }
.promises {
  display: grid;
  gap: 1px;
  background: rgb(var(--c-rule));
  border: var(--border-hair);
}
.promise { background: rgb(var(--c-paper)); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.promise__k {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
}
.promise dd { display: grid; gap: var(--s-1); }
.promise__a {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 110;
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.1;
}
.promise__v { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Figures / stat rows ────────────────────────────────────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgb(var(--c-rule));
  border: var(--border-hair);
}
.figures--tight { margin-block: var(--s-5); }

.fig {
  background: rgb(var(--c-paper));
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: var(--s-1);
  /* A figure can hold a long unbroken machine string — ".zip (.shp/.shx/.dbf)"
     on the format pages — and a grid cell that refuses to shrink below it puts
     a scrollbar on the whole page at phone width. */
  min-width: 0;
}
.fig dt {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
}
.fig dd {
  font-family: var(--f-display);
  font-variation-settings: "wdth" 110;
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1;
  overflow-wrap: anywhere;
}
.fig__of { font-size: var(--t-md); color: rgb(var(--c-ink-faint)); font-weight: 400; }
.fig--alert dd { color: rgb(var(--c-survey)); }

@media (min-width: 720px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bar {
  display: block;
  height: 3px;
  background: rgb(var(--c-rule));
  overflow: hidden;
}
.bar i { display: block; height: 100%; background: rgb(var(--c-hydro)); }
.bar--inline { display: inline-block; width: 3.5rem; vertical-align: middle; margin-right: var(--s-2); }

.fillbar {
  display: inline-block;
  position: relative;
  padding: 0 var(--s-2);
  min-width: 3.25rem;
  text-align: right;
}
.fillbar::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: var(--fill, 0%);
  background: rgb(var(--c-hydro));
}

/* ── The GEOID specimen ─────────────────────────────────────────────────── */

/* Not decoration. GEOID is the literal join key of the system, so setting it
   as a machine identifier states something true about how the site works. */
.specimen {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgb(var(--c-ink));
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  line-height: 1;
}
.specimen__key {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-2);
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  font-size: 0.625rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.specimen__val { display: inline-flex; align-items: center; }
.specimen__st, .specimen__co {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-3);
  letter-spacing: 0.14em;
  font-weight: 500;
}
.specimen__st { color: rgb(var(--c-ink-faint)); border-right: 1px dotted rgb(var(--c-rule-strong)); }
.specimen__co { color: rgb(var(--c-ink)); }

/* ── Page heads ─────────────────────────────────────────────────────────── */

.shead { padding-block: var(--s-6) var(--s-5); border-bottom: var(--border-hair); }
.shead__h { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.shead__lede { color: rgb(var(--c-ink-soft)); max-width: 62ch; font-size: var(--t-md); }
.shead__hint { margin-top: var(--s-3); font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.shead--survey { border-top: 3px solid rgb(var(--c-survey)); }
.shead--veg { border-top: 3px solid rgb(var(--c-vegetation)); }

.chead {
  padding-block: var(--s-5);
  border-bottom: 2px solid rgb(var(--c-ink));
  background: rgb(var(--c-raised));
}
.chead--slim { padding-block: var(--s-4); }
.chead__inner { display: grid; gap: var(--s-4); }
.chead__h { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.chead__state { display: grid; gap: var(--s-2); align-content: start; justify-items: start; }
.chead__what { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); max-width: 40ch; }

.bountyline {
  display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
  font-size: var(--t-sm);
  color: rgb(var(--c-survey));
}

@media (min-width: 800px) {
  .chead__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .chead__h { font-size: var(--t-3xl); }
}

.crumbs { padding-block: var(--s-3); font-size: var(--t-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: rgb(var(--c-rule-strong)); }
.crumbs a { color: rgb(var(--c-ink-faint)); text-decoration: none; }
.crumbs a:hover { color: rgb(var(--c-ink)); text-decoration: underline; }
.crumbs [aria-current] { color: rgb(var(--c-ink-soft)); }

/* ── Tables ─────────────────────────────────────────────────────────────── */

/* Wide tables scroll inside their own container. The page body never scrolls
   sideways. */
.tablewrap {
  overflow-x: auto;
  border: var(--border-hair);
  background: rgb(var(--c-raised));
  -webkit-overflow-scrolling: touch;
}

.dtable { width: 100%; font-size: var(--t-sm); }
.dtable th, .dtable td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--border-hair);
  white-space: nowrap;
}
.dtable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(var(--c-sunk));
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
  border-bottom: 1px solid rgb(var(--c-rule-strong));
}
.dtable tbody tr:hover { background: rgb(var(--c-hydro) / 0.05); }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody th { font-weight: 500; }
.dtable a { text-decoration: none; }
.dtable a:hover { text-decoration: underline; }

/* Injected by app.js when a table is sortable. A real <button> rather than a
   click handler on the <th>, so it is reachable by keyboard and announced as
   an action. */
.sortbtn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.sortbtn:hover { color: rgb(var(--c-ink)); }
.sortbtn:focus-visible { outline: 2px solid rgb(var(--c-hydro)); outline-offset: 2px; }
[aria-sort="ascending"] .sortbtn::after { content: "▲"; font-size: 0.6em; }
[aria-sort="descending"] .sortbtn::after { content: "▼"; font-size: 0.6em; }

.dtable--schema td:last-child,
.dtable--schema th:last-child { white-space: normal; min-width: 16rem; }

/* The coverage state of a row shows as a 3px edge, the way a sheet index
   marks a quad. */
.crow th:first-child { border-left: 3px solid transparent; }
.crow--none      th:first-child { border-left-color: rgb(var(--c-rule)); }
.crow--bounty    th:first-child { border-left-color: rgb(var(--c-survey)); }
.crow--stale     th:first-child { border-left-color: rgb(var(--c-contour)); }
.crow--archive   th:first-child { border-left-color: rgb(var(--c-hydro)); }
.crow--community th:first-child { border-left-color: rgb(var(--c-vegetation)); }
.crow__st { margin-left: var(--s-2); color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.vgrid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vcard {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-top: 3px solid rgb(var(--c-hydro));
}
.vcard--mystery { border-top-color: rgb(var(--c-contour)); }
.vcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.vcard__date { font-size: var(--t-lg); letter-spacing: -0.01em; }
.vcard__age { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }

.vcard__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-3);
  border-block: var(--border-hair);
}
.vcard__facts > div { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-xs); }
.vcard__facts dt { color: rgb(var(--c-ink-faint)); }
.vcard__facts dd { font-weight: 500; }

.vcard__warn {
  font-size: var(--t-xs);
  color: rgb(var(--c-contour));
  background: rgb(var(--c-contour-wash));
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid rgb(var(--c-contour));
}
.vcard__qa { font-size: var(--t-xs); color: rgb(var(--c-ink-soft)); }
.vcard__verdicts { font-size: var(--t-xs); }
.vcard__foot { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.fmts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.fmts li {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  padding: 0.1em var(--s-2);
  border: 1px solid rgb(var(--c-rule));
  color: rgb(var(--c-ink-faint));
}

.score { display: grid; justify-items: center; gap: 2px; flex: none; }
.score__num {
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1;
  padding: var(--s-2);
  border: 1px solid currentColor;
}
.score__cap {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
}
.score--high { color: rgb(var(--c-vegetation)); }
.score--mid  { color: rgb(var(--c-contour)); }
.score--low  { color: rgb(var(--c-survey)); }
.score--unknown { color: rgb(var(--c-ink-faint)); }
.score--inline .score__num,
.score--inline { display: inline; padding: 0 var(--s-2); border: 1px solid currentColor; font-size: var(--t-xs); }

.bgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.bcard {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-left: 3px solid rgb(var(--c-survey));
  text-decoration: none;
}
.bcard:hover { background: rgb(var(--c-survey-wash)); }
.bcard__mult { font-size: var(--t-xl); font-weight: 600; color: rgb(var(--c-survey)); line-height: 1; }
.bcard__name { font-weight: 600; }
.bcard__st { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.bcard__why { font-size: var(--t-xs); color: rgb(var(--c-ink-soft)); margin-top: var(--s-2); }

.gcard {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  border-top: 2px solid rgb(var(--c-ink));
  text-decoration: none;
}
.gcard:hover { border-top-color: rgb(var(--c-hydro)); }
.gcard h2, .gcard h3 { font-size: var(--t-md); }
.gcard p { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
.gcard__date { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }

.fmtgrid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.fmtcard {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  text-decoration: none;
}
.fmtcard:hover { border-color: rgb(var(--c-ink)); }
.fmtcard__key {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-hydro));
}
.fmtcard__name { font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); }
.fmtcard__sum { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }

.fmtstack { display: grid; gap: var(--s-5); }
.fmtrow {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: var(--border-hair);
}
.fmtrow__key { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: rgb(var(--c-hydro)); }
.fmtrow__name { font-size: var(--t-xl); margin-block: var(--s-2); }
.fmtrow__name a { text-decoration: none; }
.fmtrow__ext { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.fmtrow__sum { font-size: var(--t-md); margin-bottom: var(--s-4); }
.fmtrow__pros { display: grid; gap: var(--s-3); }
.fmtrow__pros dt {
  font-family: var(--f-mono); font-size: 0.625rem; text-transform: uppercase;
  letter-spacing: var(--track-label); color: rgb(var(--c-ink-faint));
}
.fmtrow__pros dd { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); max-width: var(--measure); }
@media (min-width: 800px) { .fmtrow { grid-template-columns: 12rem minmax(0, 1fr); } }

.callout {
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  border-left: 3px solid rgb(var(--c-rule-strong));
  display: grid;
  gap: var(--s-3);
}
.callout p { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); max-width: var(--measure); }
.callout__act { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.callout--survey  { border-left-color: rgb(var(--c-survey));     background: rgb(var(--c-survey-wash)); }
.callout--veg     { border-left-color: rgb(var(--c-vegetation)); background: rgb(var(--c-veg-wash)); }
.callout--contour { border-left-color: rgb(var(--c-contour));    background: rgb(var(--c-contour-wash)); }
.callout--hydro   { border-left-color: rgb(var(--c-hydro));      background: rgb(var(--c-hydro-wash)); }

/* ── What parcel data is ────────────────────────────────────────────────── */

/* The plain-English field glossary. The assessor's column name sits beside the
   thing it means, because a downloader meets both: the name in the attribute
   table, the meaning in their head. */
.fields { display: grid; gap: var(--s-4); }
.field { padding-left: var(--s-4); border-left: 2px solid rgb(var(--c-rule)); }
.field dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  font-weight: 600;
}
.field dt .mono {
  font-size: var(--t-xs);
  font-weight: 400;
  color: rgb(var(--c-hydro));
  letter-spacing: 0.02em;
}
.field dd { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); margin-top: var(--s-1); }
.fields__note {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: var(--border-hair);
  font-size: var(--t-sm);
  color: rgb(var(--c-ink-faint));
  max-width: var(--measure);
}

/* One record, drawn as a specimen. This is the single most persuasive object
   on the homepage for someone who has never heard the term "parcel data": it
   is the answer to "what is actually in the file", shown rather than claimed. */
.record {
  margin: 0;
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-top: 3px solid rgb(var(--c-ink));
}
.record__cap {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--border-hair);
  background: rgb(var(--c-sunk));
  font-family: var(--f-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-ink-faint));
}
.record__rows { display: grid; }
.record__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px dotted rgb(var(--c-rule));
  font-size: var(--t-sm);
}
.record__row:last-child { border-bottom: 0; }
.record__row dt { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); align-self: center; }
.record__row dd { overflow-wrap: anywhere; }
.record__note {
  padding: var(--s-3);
  border-top: var(--border-hair);
  font-size: var(--t-xs);
  color: rgb(var(--c-ink-faint));
}
.record-side { display: grid; align-content: start; }

/* The questions the data answers, in the words someone would use to ask. */
.asks { display: grid; gap: var(--s-3); font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
.asks li { padding-bottom: var(--s-3); border-bottom: var(--border-hair); }
.asks li:last-child { border-bottom: 0; }
.asks__q { display: block; color: rgb(var(--c-ink)); font-weight: 600; }

.fmtcard__tools {
  font-size: 0.625rem;
  color: rgb(var(--c-ink-faint));
  letter-spacing: 0.02em;
  padding-top: var(--s-2);
  border-top: var(--border-hair);
}

/* ── The county download panel ──────────────────────────────────────────── */

/* The first object on a county page, and the reason the page exists. Whatever
   else is true about a county's coverage, a visitor who came for a file should
   be looking at the file, or at a straight answer about why there isn't one. */
.dlpanel {
  background: rgb(var(--c-raised));
  border: 2px solid rgb(var(--c-ink));
  margin-bottom: var(--s-6);
}
.dlpanel__cap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-4);
  background: rgb(var(--c-ink));
  color: rgb(var(--c-paper));
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.dlpanel__body { display: grid; gap: var(--s-5); padding: var(--s-5); }
.dlpanel__date { font-size: var(--t-2xl); line-height: 1; }
.dlpanel__age { font-size: var(--t-sm); color: rgb(var(--c-ink-faint)); margin-top: var(--s-2); }
.dlpanel__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--border-hair);
}
.dlpanel__facts > div { display: grid; gap: 2px; }
.dlpanel__facts dt {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
}
.dlpanel__facts dd { font-family: var(--f-mono); font-weight: 500; }
.dlpanel__act { display: grid; gap: var(--s-3); align-content: start; }
.dlpanel__act .btn { width: 100%; }
.dlpanel__fmts { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.dlpanel__lic { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.dlpanel__warn {
  font-size: var(--t-xs);
  color: rgb(var(--c-contour));
  background: rgb(var(--c-contour-wash));
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid rgb(var(--c-contour));
}

/* Nothing published. Still a page that answers the question. */
.dlpanel--empty { border-width: 1px; border-color: rgb(var(--c-rule-strong)); }
.dlpanel--empty .dlpanel__cap { background: rgb(var(--c-sunk)); color: rgb(var(--c-ink-soft)); }
.dlpanel__lede { font-size: var(--t-md); color: rgb(var(--c-ink-soft)); max-width: var(--measure); }
.dlpanel__lede strong { color: rgb(var(--c-ink)); }
.dlpanel__near {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: rgb(var(--c-ink-faint));
  margin-bottom: var(--s-3);
}

@media (min-width: 800px) {
  .dlpanel__body { grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s-6); }
  .dlpanel--empty .dlpanel__body { grid-template-columns: minmax(0, 1fr); }
}

.getbox {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: rgb(var(--c-raised));
  border: var(--border-firm);
  border-top: 3px solid rgb(var(--c-ink));
}
.fmtpick { display: grid; gap: var(--s-2); }
.fmtpick li { display: grid; grid-template-columns: 4rem 8rem minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-sm); align-items: baseline; }
.fmtpick__key { color: rgb(var(--c-hydro)); text-transform: uppercase; font-size: var(--t-xs); }
.fmtpick__note { color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }
.getbox__lic { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }

/* ── The contribution invitation ────────────────────────────────────────── */

/* Vegetation green throughout, which is the token for community-contributed
   data — so the colour is the same statement the block is making, rather than
   a second accent picked to stand out. Survey red is deliberately absent
   except on a live multiplier: red is the site's "act on this" signal and an
   invitation is not an alarm. */
.give { display: grid; gap: var(--s-3); }
.give__h { font-size: var(--t-lg); }
.give__p { color: rgb(var(--c-ink-soft)); max-width: var(--measure); }
.give__note { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); max-width: var(--measure); }
.give__act { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.give-band { padding-block: var(--s-7); }
.give--band {
  border-top: 3px solid rgb(var(--c-vegetation));
  padding-top: var(--s-5);
  gap: var(--s-5);
}
.give--band .give__h { font-size: var(--t-xl); }
.give--band .give__p { font-size: var(--t-md); }
.give--band .give__note { padding-top: var(--s-3); border-top: var(--border-hair); }
.give__side { display: grid; gap: var(--s-4); align-content: start; }
.give__wanted { gap: var(--s-2); }

.give--panel {
  padding: var(--s-4);
  background: rgb(var(--c-veg-wash));
  border: var(--border-hair);
  border-left: 3px solid rgb(var(--c-vegetation));
  gap: var(--s-2);
}
.give--panel .give__h { font-size: var(--t-md); }
.give--panel .give__p { font-size: var(--t-sm); }

.give--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  border-left: 3px solid rgb(var(--c-vegetation));
  font-size: var(--t-sm);
}
.give__lead { font-weight: 600; }
.give__body { color: rgb(var(--c-ink-soft)); }
.give__link { color: rgb(var(--c-hydro)); font-weight: 600; text-decoration: none; }
.give__link:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .give--band { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-7); }
}

/* ── The credit loop ────────────────────────────────────────────────────── */

/* Two halves of one exchange, set side by side so the trade is legible at a
   glance: green earns, blue spends. */
.loop { display: grid; gap: var(--s-4); }
.loop__col {
  padding: var(--s-5);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
}
.loop__col--earn  { border-top: 3px solid rgb(var(--c-vegetation)); }
.loop__col--spend { border-top: 3px solid rgb(var(--c-hydro)); }
.loop__h { font-size: var(--t-md); margin-bottom: var(--s-2); }
.loop__note { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); margin-bottom: var(--s-4); }

.ledger { display: grid; }
.ledger li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dotted rgb(var(--c-rule));
  font-size: var(--t-sm);
}
.ledger li:last-child { border-bottom: 0; }
.ledger__what { flex: 1 1 14rem; }
.ledger__why { display: block; font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.ledger__n { font-weight: 600; white-space: nowrap; }

/* Why one county pays more than another. The multiplier is the number people
   scan for, so it leads the row. */
.whys { display: grid; gap: var(--s-4); }
.why { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.why__mult { font-family: var(--f-mono); font-weight: 600; color: rgb(var(--c-survey)); }
.why__label { font-weight: 600; }
.why__body { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
.why__count { font-family: var(--f-mono); font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }

@media (min-width: 860px) {
  .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

/* ── Lists and chips ────────────────────────────────────────────────────── */

.feed { display: grid; }
.feed__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--border-hair);
  font-size: var(--t-sm);
}
.feed__where { font-weight: 500; text-decoration: none; flex: 1 1 12rem; }
.feed__where:hover { text-decoration: underline; }
.feed__st { margin-left: var(--s-2); color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }
.feed__geoid, .feed__vintage, .feed__count { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.feed--bounty .feed__row { border-bottom-color: rgb(var(--c-survey) / 0.2); }

.chiplist { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chiplist--wide { gap: var(--s-2); margin-block: var(--s-3); }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  border-left: 3px solid rgb(var(--c-rule));
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  text-decoration: none;
}
.chip:hover { border-color: rgb(var(--c-ink)); }
.chip span { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.chip--static { border-left-width: 1px; cursor: default; }
.chip--none      { border-left-color: rgb(var(--c-rule)); }
.chip--bounty    { border-left-color: rgb(var(--c-survey)); }
.chip--stale     { border-left-color: rgb(var(--c-contour)); }
.chip--archive   { border-left-color: rgb(var(--c-hydro)); }
.chip--community { border-left-color: rgb(var(--c-vegetation)); }

.statelist { display: grid; gap: 1px; background: rgb(var(--c-rule)); border: var(--border-hair); }
.statelist a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem;
  grid-template-areas: "code name cov" "bar bar bar";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: rgb(var(--c-paper));
  text-decoration: none;
  font-size: var(--t-sm);
}
.statelist a:hover { background: rgb(var(--c-raised)); }
.statelist__code { grid-area: code; color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }
.statelist__name { grid-area: name; font-weight: 500; }
.statelist__cov { grid-area: cov; text-align: right; font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.statelist .bar { grid-area: bar; }
@media (min-width: 700px) { .statelist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .statelist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rank { display: grid; gap: 1px; background: rgb(var(--c-rule)); border: var(--border-hair); }
.rank a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 4rem;
  grid-template-areas: "st name pct" "bar bar bar";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: rgb(var(--c-paper));
  text-decoration: none;
  font-size: var(--t-sm);
}
.rank__st { grid-area: st; color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }
.rank__name { grid-area: name; font-weight: 500; }
.rank__pct { grid-area: pct; text-align: right; }
.rank .bar { grid-area: bar; }
.rank--gap .bar i { background: rgb(var(--c-survey)); }

.reasons { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
.reasons .mono { color: rgb(var(--c-survey)); font-weight: 600; }

.toolline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }

.howto, .pipeline { display: grid; gap: var(--s-5); counter-reset: step; }
.howto li, .pipeline li {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid rgb(var(--c-ink));
}
.howto__n, .pipeline__n {
  font-size: var(--t-xs);
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-survey));
}
.howto h3, .pipeline h3 { font-size: var(--t-md); }
.howto p, .pipeline p { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
@media (min-width: 760px) {
  .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */

.sidenav {
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
}
.sidenav ul { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.sidenav a { text-decoration: none; }
.sidenav a:hover { text-decoration: underline; }
.sidenav .chiplist { display: flex; }

.preview {
  margin: 0;
  background: rgb(var(--c-raised));
  border: var(--border-hair);
}
.preview__canvas {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: var(--s-4);
  background:
    linear-gradient(rgb(var(--c-rule) / 0.35) 1px, transparent 1px) 0 0 / 100% 16px,
    linear-gradient(90deg, rgb(var(--c-rule) / 0.35) 1px, transparent 1px) 0 0 / 16px 100%,
    rgb(var(--c-sunk));
}
.preview__none { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); }
.outline { width: 100%; height: auto; }
.outline__fill {
  fill: rgb(var(--c-hydro) / 0.14);
  stroke: rgb(var(--c-ink));
  stroke-width: 1.1;
  stroke-linejoin: round;
  fill-rule: evenodd;
}
.preview__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-top: var(--border-hair);
  font-size: 0.625rem;
  color: rgb(var(--c-ink-faint));
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.elsewhere {
  padding: var(--s-4);
  background: rgb(var(--c-raised));
  border: var(--border-hair);
  border-top: 2px solid rgb(var(--c-vegetation));
}
.elsewhere__list { display: grid; gap: var(--s-4); }
.elsewhere__item a { display: grid; gap: 2px; text-decoration: none; }
.elsewhere__label { font-size: var(--t-sm); font-weight: 600; }
.elsewhere__item a:hover .elsewhere__label { text-decoration: underline; }
.elsewhere__host { font-size: 0.625rem; color: rgb(var(--c-ink-faint)); letter-spacing: 0.04em; }
.elsewhere__blurb { font-size: var(--t-xs); color: rgb(var(--c-ink-soft)); margin-top: var(--s-1); }

.prevnext {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-top: var(--border-hair);
}
.prevnext__a { display: grid; gap: var(--s-1); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.prevnext__a--n { text-align: right; }
.prevnext__a:hover { color: rgb(var(--c-hydro)); }

/* ── Prose ──────────────────────────────────────────────────────────────── */

.prose { max-width: var(--measure); color: rgb(var(--c-ink-soft)); }
.prose--wide { max-width: 78ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-lg); color: rgb(var(--c-ink)); margin-top: var(--s-6); }
.prose h3 { font-size: var(--t-md); color: rgb(var(--c-ink)); margin-top: var(--s-5); }
.prose a { color: rgb(var(--c-hydro)); }
.prose ul, .prose ol { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose code {
  font-family: var(--f-mono);
  font-size: 0.9em;
  padding: 0.1em 0.3em;
  background: rgb(var(--c-sunk));
  border: var(--border-hair);
}
.prose pre {
  overflow-x: auto;
  padding: var(--s-4);
  background: rgb(var(--c-sunk));
  border: var(--border-hair);
  font-size: var(--t-sm);
}
.prose pre code { border: 0; padding: 0; background: none; }
.prose table { width: 100%; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--border-hair); }
.prose blockquote {
  padding-left: var(--s-4);
  border-left: 3px solid rgb(var(--c-hydro));
  color: rgb(var(--c-ink-soft));
}

.article__head { padding-block: var(--s-6) var(--s-5); }
.article__h { font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.article__lede { font-size: var(--t-md); color: rgb(var(--c-ink-soft)); max-width: var(--measure); }
.article__body { padding-bottom: var(--s-6); }
.article__faq, .article__states, .article__related { padding-block: var(--s-6); border-top: var(--border-hair); }
@media (min-width: 800px) { .article__h { font-size: var(--t-3xl); } }

.faq { display: grid; }
.faq__item { border-bottom: var(--border-hair); }
.faq__item summary {
  cursor: pointer;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute; right: 0; top: var(--s-4);
  font-family: var(--f-mono);
  color: rgb(var(--c-ink-faint));
}
.faq__item[open] summary::after { content: "−"; }
.faq__item .prose { padding-bottom: var(--s-4); }

.notfound { display: grid; gap: var(--s-4); justify-items: start; padding-block: var(--s-7); }

/* ── Ads ────────────────────────────────────────────────────────────────── */

/* This block only ever styles a slot that has something in it. When there is
   nothing to show the markup is absent entirely, so there is no reserved
   height and no layout shift. */
.promo {
  margin-block: var(--s-5);
  border: var(--border-hair);
  background: rgb(var(--c-raised));
}
.promo__tag {
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-ink-faint));
  border-bottom: var(--border-hair);
}
.promo__body { display: flex; gap: var(--s-4); padding: var(--s-4); text-decoration: none; align-items: center; }
.promo__img { width: 5rem; height: auto; flex: none; }
.promo__text { display: grid; gap: var(--s-1); }
.promo__headline { font-weight: 600; }
.promo__blurb { font-size: var(--t-sm); color: rgb(var(--c-ink-soft)); }
.promo__cta { font-size: var(--t-xs); color: rgb(var(--c-hydro)); font-weight: 600; }
.promo--network { border-style: dashed; }

/* ── Messages and banners ───────────────────────────────────────────────── */

.announce {
  background: rgb(var(--c-hydro));
  color: rgb(var(--c-paper));
  font-size: var(--t-sm);
  padding-block: var(--s-2);
}

.messages { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.msg {
  padding: var(--s-3) var(--s-4);
  border: var(--border-hair);
  border-left: 3px solid rgb(var(--c-hydro));
  background: rgb(var(--c-hydro-wash));
  font-size: var(--t-sm);
}
.msg--success { border-left-color: rgb(var(--c-vegetation)); background: rgb(var(--c-veg-wash)); }
.msg--warning { border-left-color: rgb(var(--c-contour)); background: rgb(var(--c-contour-wash)); }
.msg--error { border-left-color: rgb(var(--c-survey)); background: rgb(var(--c-survey-wash)); }

/* ── Pager ──────────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: var(--border-hair);
  font-size: var(--t-sm);
}
.pager__step { text-decoration: none; font-weight: 600; }
.pager__step:hover { color: rgb(var(--c-hydro)); }
.pager__step.is-off { color: rgb(var(--c-ink-faint)); }
.pager__pos { color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footsheet {
  margin-top: var(--s-8);
  padding-block: var(--s-7) var(--s-5);
  border-top: 2px solid rgb(var(--c-ink));
  background: rgb(var(--c-sunk));
  font-size: var(--t-sm);
}
.footsheet__cols { display: grid; gap: var(--s-6); }
.footcol ul { display: grid; gap: var(--s-2); }
.footcol a { text-decoration: none; color: rgb(var(--c-ink-soft)); }
.footcol a:hover { color: rgb(var(--c-ink)); text-decoration: underline; }
.footcol--note p { color: rgb(var(--c-ink-faint)); font-size: var(--t-xs); max-width: 46ch; }
.footcol--note p + p { margin-top: var(--s-3); }
.footsheet__src { font-family: var(--f-mono); }
.footsheet__rule { height: 1px; background: rgb(var(--c-rule-strong)); margin-block: var(--s-6) var(--s-4); }
.footsheet__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: rgb(var(--c-ink-faint));
}
.footsheet__base a { color: inherit; }

@media (min-width: 700px) { .footsheet__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footsheet__cols { grid-template-columns: repeat(3, minmax(0, 9rem)) minmax(0, 1fr); }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

/* Everything above degrades to a static page. The mosaic in particular must
   arrive fully drawn rather than animating, because for a viewer with
   vestibular sensitivity a 3,000-element fade is exactly the wrong thing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .mosaic__svg .mo { animation: none; opacity: 1; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .masthead, .footsheet, .promo, .pager, .skip, .themetoggle { display: none; }
  body { background: #fff; color: #000; }
  .tablewrap { overflow: visible; border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ── Account pages ──────────────────────────────────────────────────────────

   Covers three things at once: this site's two account screens (the two-factor
   challenge and the security settings page) and every page django-allauth
   renders through templates/allauth/layouts/base.html.

   The allauth half is why these rules are attached to the body class rather
   than to a wrapper element. Those templates are the package's own and are not
   ours to wrap; overriding one layout file and constraining it from here is
   what keeps sign-in, sign-up and password reset inside the site shell without
   forking six templates that would then rot at the next upgrade.

   `.wrap--narrow` is a modifier the funnel templates already use, defined here
   with them because these are the only single-column form pages on the site. */

.wrap--narrow { max-width: 34rem; }

.p-account main { padding-block: var(--s-6) var(--s-7); }
.p-account main > * { max-width: 34rem; margin-inline: auto; padding-inline: var(--page-gutter); }
.p-account main > .wrap { padding-inline: var(--page-gutter); }

.p-account h1 { font-size: var(--t-2xl); margin: 0 0 var(--s-4); }
.p-account form { margin-block: var(--s-4); }
.p-account label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.p-account input[type="text"],
.p-account input[type="email"],
.p-account input[type="password"] {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid rgb(var(--c-rule-strong));
  border-radius: var(--r-md);
  background: rgb(var(--c-raised));
  color: rgb(var(--c-ink));
  font: inherit;
}
.p-account .helptext, .p-account .errorlist { font-size: var(--t-xs); }
.p-account .errorlist { color: rgb(var(--c-survey)); list-style: none; padding: 0; }

.gate__head { margin-block: var(--s-6) var(--s-5); }
.gate__h { font-size: var(--t-2xl); margin: 0 0 var(--s-3); }
.gate__p { margin: 0 0 var(--s-3); }
.gate__alt { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-4); }
.gate__foot { font-size: var(--t-sm); margin-top: var(--s-6); }

.form .field { padding-left: 0; border-left: 0; margin-bottom: var(--s-4); }
.form .field label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.form .field--check label { font-weight: 400; }
.form .field input[type="text"] {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid rgb(var(--c-rule-strong));
  border-radius: var(--r-md);
  background: rgb(var(--c-raised));
  color: rgb(var(--c-ink));
  font: inherit;
}
.form--code .field input[type="text"] {
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  letter-spacing: 0.4em;
}
.form--inline { display: inline-block; margin-block: 0; }
.field__help { font-size: var(--t-xs); color: rgb(var(--c-ink-faint)); margin: var(--s-2) 0 0; }
.field__err { font-size: var(--t-xs); color: rgb(var(--c-survey)); margin: var(--s-2) 0 0; }
.form__act { margin-top: var(--s-5); }

.devices { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.devices__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding-block: var(--s-3);
  border-bottom: var(--border-hair);
  font-size: var(--t-sm);
}
.devices__when { flex: 1 1 12rem; font-size: var(--t-xs); }
.tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgb(var(--c-vegetation));
}