/* HOA Spy — one committed look in two palettes: white page / black ink by
   day, near-black page / off-white ink in dark mode. Every color is a token
   on :root; the dark set is applied when the device prefers dark (unless the
   visitor pinned light) and when the visitor pinned dark — site/theme.js sets
   data-theme on <html>. Never write a literal white/black or a hex in a rule:
   use the tokens, and mix tints with var(--page), not `white` (docs/SITE.md).
   Chart palette follows the validated dataviz reference instance
   (categorical slot 1 blue / slot 2 orange, fixed status colors). */

:root {
  color-scheme: light;
  --page:        #ffffff;
  --surface:     #fcfcfb;
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --muted:       #898781;
  --grid:        #e1e0d9;
  --baseline:    #c3c2b7;
  --border:      rgba(11,11,11,0.10);
  --series-1:    #2a78d6;   /* claims of lien */
  --series-2:    #eb6834;   /* lis pendens */
  --good:        #0ca30c;
  --warning:     #fab219;
  --serious:     #ec835a;
  --critical:    #d03b3b;
  --chip-bg:     rgba(11,11,11,0.05);
  --focus:       #2a78d6;
  --ink-hover:   #2a2a28;   /* solid ink buttons on hover */
  --page-hover:  #ececea;   /* page-colored buttons on hover */
  --on-ink-muted: #cfcfca;  /* secondary text on an ink-colored band */
  --overlay:     rgba(11,11,11,0.32);
  --serious-ink: #7a2e10;   /* text on the tinted status badges */
  --critical-ink: #8f1f1f;
  --warning-ink: #6b4a00;
  --good-ink:    #0a5c0a;
  --info-ink:    #164a86;
  --ring:        #475569;   /* court-case ring in the map legend */
  --tile-filter: none;      /* map tiles are inverted in dark mode */
}
/* Dark palette: the device prefers dark and the visitor did not pin light… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --page:        #101214;
  --surface:     #16191d;
  --ink:         #ecebe7;
  --ink-2:       #b5b3ac;
  --muted:       #8d8b84;
  --grid:        #2a2d32;
  --baseline:    #3f434a;
  --border:      rgba(236,235,231,0.13);
  --chip-bg:     rgba(236,235,231,0.07);
  --focus:       #5b9cf0;
  --ink-hover:   #ffffff;
  --page-hover:  #1c1f24;
  --on-ink-muted: #4d4c49;
  --overlay:     rgba(0,0,0,0.62);
  --serious-ink: #ffb797;
  --critical-ink: #ffa6a6;
  --warning-ink: #ffd97a;
  --good-ink:    #9ae59a;
  --info-ink:    #a9cdf7;
  --ring:        #cbd5e1;
  --tile-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.75);
  }
}
/* …or the visitor pinned dark (site/theme.js). Same values, on purpose. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:        #101214;
  --surface:     #16191d;
  --ink:         #ecebe7;
  --ink-2:       #b5b3ac;
  --muted:       #8d8b84;
  --grid:        #2a2d32;
  --baseline:    #3f434a;
  --border:      rgba(236,235,231,0.13);
  --chip-bg:     rgba(236,235,231,0.07);
  --focus:       #5b9cf0;
  --ink-hover:   #ffffff;
  --page-hover:  #1c1f24;
  --on-ink-muted: #4d4c49;
  --overlay:     rgba(0,0,0,0.62);
  --serious-ink: #ffb797;
  --critical-ink: #ffa6a6;
  --warning-ink: #ffd97a;
  --good-ink:    #9ae59a;
  --info-ink:    #a9cdf7;
  --ring:        #cbd5e1;
  --tile-filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.92) saturate(.75);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* scroll anchoring fights the collapsing sticky header (see app.js) */
  overflow-anchor: none;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }
a { color: var(--series-1); }

/* ---- header ---- */
.top {
  background: var(--page);
  border-bottom: 1px solid var(--grid);
  padding: 26px 0 16px;
  position: sticky; top: 0; z-index: 10;
}
.brand-row { display: flex; align-items: baseline; gap: 14px; }
.top h1 { margin: 0; font-size: 25px; letter-spacing: -0.02em; }
.freshness { font-size: 12.5px; color: var(--muted); }
.tag { margin: 6px 0 14px; color: var(--ink-2); max-width: 660px; }
/* when scrolled, the tagline collapses so search stays close at hand */
.top.compact .tag { display: none; }
.top.compact { padding: 12px 0; }

.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.q-wrap { flex: 1 1 260px; position: relative; }
#q {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font-size: 16px;
  background: var(--page); color: var(--ink);
  border: 1.5px solid var(--baseline); border-radius: 9px;
}
#q:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.controls select {
  padding: 10px 10px; font-size: 14px; border-radius: 9px;
  border: 1.5px solid var(--baseline); background: var(--page); color: var(--ink);
  max-width: 180px;
}
.status { margin-top: 9px; font-size: 13px; color: var(--muted); min-height: 1.2em; }

/* ---- typeahead dropdown (suggest.js): under the search box and the map's address box ---- */
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1200;
  min-width: min(420px, 92vw); max-width: 100%; max-height: 380px; overflow-y: auto;
  background: var(--page); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); text-align: left;
}
.q-wrap .suggest { right: 0; }
.suggest .grp { padding: 8px 12px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest .opt {
  display: block; width: 100%; padding: 7px 12px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink); text-align: left; line-height: 1.3;
}
.suggest .opt .sub { display: block; font-size: 12px; color: var(--muted); }
.suggest .opt.active, .suggest .opt:hover { background: var(--chip-bg); }
.suggest .foot { padding: 4px 12px 8px; font-size: 11px; color: var(--muted); }

/* ---- home / zero state ---- */
#home { padding-top: 18px; }
.section-h {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 20px 0 8px; font-weight: 600;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--chip-bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px;
}
.chip:hover { border-color: var(--series-1); }
.chip .x { color: var(--muted); margin-left: 6px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 16px 0 4px; }
.kpi { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; }
.kpi b { display: block; font-size: 22px; letter-spacing: -0.01em; }
.kpi span { font-size: 12.5px; color: var(--muted); }

/* ---- results ---- */
#results { padding: 6px 0 10px; }
.results-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 10px; }
.results-head .count { font-size: 13.5px; color: var(--ink-2); }

.row {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 16px; margin-bottom: 8px;
  cursor: pointer; color: var(--ink); font: inherit;
}
.row:hover, .row:focus-visible { border-color: var(--series-1); }
.row:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.row .line1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.row .name { font-weight: 600; font-size: 15.5px; }
.row .loc { color: var(--ink-2); font-size: 13px; }
.row .scent { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.row .scent .sep { color: var(--baseline); margin: 0 4px; }
.row .clean { color: var(--good); }

.badge {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px;
  background: var(--chip-bg); color: var(--ink-2); white-space: nowrap;
}
.badge.b-serious  { background: color-mix(in srgb, var(--serious) 20%, var(--page)); color: var(--serious-ink); }
.badge.b-critical { background: color-mix(in srgb, var(--critical) 16%, var(--page)); color: var(--critical-ink); }
.badge.b-warning  { background: color-mix(in srgb, var(--warning) 26%, var(--page)); color: var(--warning-ink); }
.badge.b-good     { background: color-mix(in srgb, var(--good) 14%, var(--page)); color: var(--good-ink); }

.more-btn, .ghost-btn {
  font: inherit; font-size: 14px; cursor: pointer; display: block;
  margin: 12px auto 20px; padding: 9px 22px;
  background: var(--page); color: var(--ink);
  border: 1.5px solid var(--baseline); border-radius: 9px;
}
.more-btn:hover, .ghost-btn:hover { border-color: var(--series-1); }

.no-results {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; margin-top: 14px;
}
.no-results h2 { margin: 0 0 6px; font-size: 17px; }
.no-results p { margin: 4px 0; color: var(--ink-2); font-size: 14px; }

/* ---- about ---- */
.about { padding: 10px 0 70px; color: var(--ink-2); font-size: 14px; }
.about h2 { color: var(--ink); font-size: 16px; margin: 28px 0 8px; }
.about ul { padding-left: 20px; margin: 6px 0; }

/* ---- report ---- */
.overlay {
  position: fixed; inset: 0; background: var(--overlay);
  display: flex; justify-content: flex-end; z-index: 30;
}
.overlay[hidden] { display: none; }
.report {
  width: min(720px, 100%); height: 100%; overflow-y: auto;
  background: var(--page); border-left: 1px solid var(--grid);
  padding: 20px 28px 70px;
}
.report-bar { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px; }
.report .close {
  font: inherit; font-size: 14px; cursor: pointer;
  background: var(--chip-bg); color: var(--ink); border: none;
  border-radius: 8px; padding: 7px 14px;
}
.report .close:hover { background: var(--grid); }
.report h2 { margin: 4px 0 3px; font-size: 22px; letter-spacing: -0.01em; }
.report .sub { color: var(--ink-2); margin: 0 0 6px; }
.report .oneline {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14.5px;
}
.report h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 26px 0 10px; font-weight: 600;
}

.flag {
  background: var(--surface); border: 1px solid var(--border);
  border-left-width: 4px; border-radius: 9px; padding: 11px 15px; margin-bottom: 8px;
}
.flag.serious, .flag.critical { border-left-color: var(--critical); }
.flag.warning { border-left-color: var(--warning); }
.flag.info    { border-left-color: var(--baseline); }
.flag.good    { border-left-color: var(--good); }
.flag .head { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px; }
.sev {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; padding: 2px 8px;
  border-radius: 5px; color: #fff; flex-shrink: 0;
}
.sev.serious, .sev.critical { background: var(--critical); }
.sev.warning { background: var(--warning); color: #0b0b0b; }
.sev.info { background: var(--muted); }
.sev.good { background: var(--good); }
.flag p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; }
.flag .src { font-size: 12.5px; margin-top: 6px; color: var(--muted); }

.statrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 15px; }
.stat b { display: block; font-size: 19px; }
.stat span { font-size: 12px; color: var(--muted); }
.pct-line { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 10px; }

.chart-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px 8px; margin-bottom: 10px; }
.chart-card .legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-2);
  margin-bottom: 6px; }
.legend .key { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-card details { margin: 6px 0 4px; }
.chart-card summary { font-size: 12.5px; color: var(--muted); cursor: pointer; }

table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 6px 0; }
table.data th { text-align: left; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--grid); padding: 4px 10px 4px 0; }
table.data td { border-bottom: 1px solid var(--grid); padding: 4px 10px 4px 0;
  font-variant-numeric: tabular-nums; }

.item { background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 15px; margin-bottom: 7px; font-size: 14px; }
.item .meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.related .row { margin-bottom: 6px; }

/* ---- member reviews ---- */
.reviews { margin-top: 4px; }
.stars { color: var(--grid); font-size: 15px; letter-spacing: 1.5px; white-space: nowrap; }
.stars .on { color: var(--warning); }
.rv-avgline { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--ink-2); margin: 2px 0 10px; }
.rv-item .rv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-item.rv-mine { border-color: var(--series-1); }
.rv-author { font-weight: 600; font-size: 13px; }
.rv-date { color: var(--muted); font-size: 12.5px; }
.rv-body { margin: 5px 0 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; }
.rv-ownctl { margin-top: 6px; display: flex; gap: 14px; }

.rv-form { margin: 10px 0 4px; }
.rv-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.rv-form input, .rv-form textarea {
  font: inherit; padding: 9px 12px; border: 1.5px solid var(--baseline);
  border-radius: 9px; background: var(--page); color: var(--ink);
}
.rv-form input:focus, .rv-form textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
#rv-email { flex: 1 1 220px; max-width: 320px; }
#rv-code { width: 110px; text-align: center; letter-spacing: 4px;
  font-variant-numeric: tabular-nums; }
.rv-form textarea { width: 100%; resize: vertical; }

.primary-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--ink); color: var(--page);
  border: 1.5px solid var(--ink); border-radius: 9px; padding: 9px 18px;
}
.primary-btn:hover { background: var(--ink-hover); }
.primary-btn:disabled { opacity: 0.5; cursor: default; }
.linklike {
  font: inherit; font-size: 13px; cursor: pointer; padding: 0;
  background: none; border: none; color: var(--series-1);
  text-decoration: underline; text-underline-offset: 2px;
}
.rv-starpick .rv-star {
  font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 3px;
  background: none; border: none; color: var(--grid);
}
.rv-starpick .rv-star.sel { color: var(--warning); }
.rv-starpick .rv-star:hover { transform: scale(1.12); }
.rv-note { font-size: 12.5px; color: var(--muted); margin: 4px 0; }
.rv-err { font-size: 13px; color: var(--critical); margin: 6px 0 0; flex-basis: 100%; }
.rv-disclaimer { margin-top: 12px; }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--ink); color: var(--page); border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.tooltip b { font-variant-numeric: tabular-nums; }

.foot-note { color: var(--muted); font-size: 12.5px; margin-top: 28px;
  border-top: 1px solid var(--grid); padding-top: 12px; }
.foot-note ul { padding-left: 18px; margin: 6px 0; }

@media (max-width: 640px) {
  .controls select { max-width: none; flex: 1; }
  .report { padding: 16px 18px 70px; }
}

/* ---- header nav (search / map / contribute) ---- */
.nav { margin-left: auto; display: flex; gap: 14px; font-size: 13px; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover, .nav a.on { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.top h1 a { color: inherit; text-decoration: none; }

/* ---- verdict panel (site/verdict.js) — shared by the report and contribute page ---- */
.verdict { border: 1.5px solid var(--border); border-left-width: 6px; border-radius: 10px;
  padding: 14px 16px; margin: 10px 0 16px; background: var(--surface); }
.verdict.v-ok       { border-left-color: var(--good); }
.verdict.v-concerns { border-left-color: var(--warning); }
.verdict.v-troubled { border-left-color: var(--serious); }
.verdict.v-redflags { border-left-color: var(--critical); }
.verdict.v-nodata   { border-left-color: var(--baseline); }
.v-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v-badge { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; padding: 3px 9px; border-radius: 6px; background: var(--muted); }
.v-ok .v-badge { background: var(--good); }
.v-concerns .v-badge { background: var(--warning); color: #0b0b0b; }
.v-troubled .v-badge { background: var(--serious); }
.v-redflags .v-badge { background: var(--critical); }
.v-headline { font-weight: 600; font-size: 15.5px; }
.v-score { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.v-sub { margin: 6px 0 8px; color: var(--ink-2); font-size: 14px; }
.v-note { font-size: 12.5px; color: var(--muted); margin: 6px 0; }
.v-pending { font-size: 11px; color: var(--warning-ink); background: color-mix(in srgb, var(--warning) 26%, var(--page));
  padding: 0 6px; border-radius: 999px; }
.v-sigs { list-style: none; padding: 0; margin: 8px 0; }
.v-sig { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--grid); font-size: 14px; }
.v-pts { flex: 0 0 40px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--critical); }
.v-sig.good .v-pts { color: var(--good); }
.v-sig.neutral .v-pts { color: var(--muted); }
.v-detail { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.v-src { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.v-cov { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--grid); padding-top: 8px; margin-top: 4px; }
.v-cov ul { margin: 2px 0 4px; padding-left: 18px; }
.v-next { margin-top: 10px; font-size: 13.5px; }
.v-next ol { margin: 4px 0 0; padding-left: 20px; }
.v-next li { margin: 3px 0; color: var(--ink-2); }
.v-for { margin: 0 0 6px; color: var(--ink-2); }

/* ---- About page: the verdict tier scale (site/about.html #verdict); reuses the .v-badge colors above.
       Horizontal spacing lives on margins, not flex `gap`, so the badge / point range / text keep their
       gaps even where flex gap is unsupported, and read correctly when the text is copied out. ---- */
.tierscale { display: grid; gap: 8px; max-width: 720px; margin: 0 0 22px; }
.tierrow { display: flex; align-items: baseline; flex-wrap: wrap;
  border: 1px solid var(--grid); border-radius: 10px; padding: 11px 14px; background: var(--page); }
.tierrow .v-badge { flex: 0 0 auto; min-width: 138px; margin-right: 14px; text-align: center; }
.tierpts { flex: 0 0 auto; margin-right: 14px; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tierwhat { flex: 1 1 240px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 560px) { .tierrow .v-badge { min-width: 0; } .tierwhat { flex-basis: 100%; margin-top: 5px; } }

/* ---- member-submitted record links in the report (app.js) ---- */
.links { margin-top: 4px; }
.lk-cta { margin: 8px 0 4px; }
.pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.pill.st-pending { background: color-mix(in srgb, var(--warning) 26%, var(--page)); color: var(--warning-ink); }
.pill.st-approved { background: color-mix(in srgb, var(--good) 14%, var(--page)); color: var(--good-ink); }
.pill.st-rejected { background: color-mix(in srgb, var(--critical) 16%, var(--page)); color: var(--critical-ink); }

/* ---- the Find & add records page keeps its rules in site/contribute.css ---- */
@media (max-width: 640px) {
  /* Five nav links no longer fit beside the brand on a phone: drop the nav
     under it and let the links wrap instead of clipping at the right edge. */
  .brand-row { flex-wrap: wrap; }
  .nav { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 6px 14px; }
}

/* ---- Miami-Dade lien map panel (site/map.js), sits under the search bar --- */
.mappanel { margin: 18px 0 4px; }
.maphead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.maphead h2 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-2);
  letter-spacing: -0.01em;
}
.mapcount { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.mapactions { margin-left: auto; display: flex; gap: 6px; }
.mapactions input {
  padding: 6px 9px; font-size: 13px; border-radius: 8px;
  border: 1.5px solid var(--baseline); background: var(--page); color: var(--ink);
  min-width: 190px;
}
.mapactions input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.mapactions button {
  padding: 6px 11px; font-size: 13px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--baseline); background: var(--surface); color: var(--ink-2);
}
.mapactions button:hover { background: var(--chip-bg); }
.mapbox {
  height: 360px; border-radius: 10px; border: 1.5px solid var(--baseline);
  background: var(--surface);
  /* Leaflet panes carry z-index 400–1000; isolate them so the map never
     paints over the sticky header or the report overlay (z-index 30). */
  position: relative; z-index: 0; isolation: isolate;
}
.mapnote { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }
.mlegend {
  background: var(--page); padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); font-size: 12px; line-height: 1.65;
  color: var(--ink-2); overflow-y: auto; box-sizing: border-box;
}
.mlegend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
}
/* The legend collapses behind its "Legend" button (map.js starts it
   collapsed on phones, where it covered half of a 280px map). */
.mlegend-toggle {
  display: block; width: 100%; font: inherit; font-size: 12px; font-weight: 600;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-align: left;
}
.mlegend-toggle::before { content: "▾ "; font-size: 11px; }
.mlegend.collapsed .mlegend-toggle::before { content: "▸ "; }
.mlegend.collapsed .mlegend-body { display: none; }
.mlegend-body { display: flex; gap: 14px; margin-bottom: 4px; }
.mlegend-col { white-space: nowrap; }
.mswitch {
  display: flex; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.mswitch button {
  background: var(--page); color: var(--ink-2); border: 0; cursor: pointer;
  font: inherit; font-size: 12px; padding: 6px 12px; line-height: 1;
}
.mswitch button + button { border-left: 1px solid var(--border); }
.mswitch button.on { background: var(--series-1, #2a78d6); color: #fff; }
.mpop h3 { margin: 0 0 3px; font-size: 14px; }
.mpop .s { color: var(--muted); font-size: 12px; }
.mpop table { border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.mpop td { padding: 1px 8px 1px 0; }
.mbadges { margin: 6px 0 2px; display: flex; gap: 5px; flex-wrap: wrap; }
.mb { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.mb.lie { background: rgba(42,120,214,0.12); color: var(--series-1); }
.mb.lp  { background: rgba(235,104,52,0.12); color: var(--series-2); }
.mb.nct { background: var(--chip-bg); color: var(--ink-2); }
.mlink {
  margin-top: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer;
  border-radius: 8px; border: 1.5px solid var(--baseline);
  background: var(--surface); color: var(--ink);
}
.mlink:hover { background: var(--chip-bg); }
.mcluster {
  display: flex; align-items: center; justify-content: center;
  background: rgba(137, 135, 129, 0.8); color: #fff;
  border: 2px solid var(--page); border-radius: 50%;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.mcluster:hover { background: rgba(110, 108, 103, 0.9); }
@media (max-width: 620px) {
  .mapactions { margin-left: 0; width: 100%; }
  .mapactions input { flex: 1; min-width: 0; }
  .mapbox { height: 280px; }
}

/* Case pins are rings (liens are filled dots); the legend key matches. */
.mlegend i.ring { background: var(--page); border: 2.5px solid var(--ring); width: 11px; height: 11px; }

/* "Search the record at the source" — Google county-clerk link on reports and
   the empty state (geo.js builds the query; the contribute finder's copy is
   styled in contribute.css). */
.ext-search { font-size: 13.5px; color: var(--ink-2); margin: 6px 0 10px; }
.ext-search a { font-weight: 600; }

/* ---- front door / splash (index.html) — the search app lives at search.html ---- */
.splash { padding-bottom: 60px; }
.hero { padding: 52px 0 26px; }
.hero .kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero h2 { margin: 0 0 14px; font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; max-width: 760px; }
.hero .lead { margin: 0 0 22px; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 680px; }
.hero-search { display: flex; gap: 8px; flex-wrap: wrap; max-width: 680px; }
.hero-search input {
  flex: 1 1 260px; padding: 13px 15px; font-size: 17px;
  background: var(--page); color: var(--ink);
  border: 1.5px solid var(--baseline); border-radius: 10px;
}
.hero-search input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.btn {
  display: inline-block; padding: 12px 20px; font-size: 16px; font-weight: 600;
  border-radius: 10px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--page);
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--ink-hover); }
.btn.secondary { background: var(--page); color: var(--ink); }
.btn.secondary:hover { background: var(--chip-bg); }
.hero .also { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 26px 0 8px; }
.stat { border: 1px solid var(--grid); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.stat b { display: block; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.splash section { padding: 34px 0 6px; }
.splash h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.splash .sub { margin: 0 0 18px; color: var(--ink-2); max-width: 680px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--grid); border-radius: 12px; padding: 18px; background: var(--page); }
.card h4 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.card .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.steps li { position: relative; padding-left: 44px; color: var(--ink-2); font-size: 15px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.steps li b { color: var(--ink); }
.coverage-note {
  border-left: 3px solid var(--warning); padding: 10px 14px; background: var(--surface);
  color: var(--ink-2); font-size: 14px; border-radius: 0 10px 10px 0; max-width: 760px;
}
.cta-band {
  margin-top: 40px; padding: 30px; border-radius: 16px; background: var(--ink); color: var(--page);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.cta-band h3 { margin: 0; color: var(--page); }
.cta-band p { margin: 4px 0 0; color: var(--on-ink-muted); font-size: 14px; }
.cta-band .btn { background: var(--page); color: var(--ink); border-color: var(--page); }
.cta-band .btn:hover { background: var(--page-hover); }
.splash footer { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--grid); font-size: 13px; color: var(--muted); }
.splash footer a { color: var(--ink-2); }
.foot-contact { margin-top: 8px; }
.foot-contact a { color: var(--series-1); }

/* ---- roadmap page (roadmap.html) ---- */
.btc { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btc code {
  font-size: 13px; word-break: break-all; background: var(--chip-bg); padding: 8px 10px;
  border-radius: 8px; flex: 1 1 260px; min-width: 0;
}
.btc .btn { padding: 8px 14px; font-size: 14px; text-align: center; white-space: nowrap; }
.phase-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.phase-tabs .chip.on { background: var(--ink); color: var(--page); border-color: var(--ink); }
.rmap-list .sub { margin-bottom: 14px; }
.rmap-phase { margin: 22px 0 10px; font-size: 17px; }
.rmap h4 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rmap h4 .st { font-size: 12px; color: var(--muted); font-weight: 400; }
.rmap h4 .ph {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  background: var(--chip-bg); border-radius: 999px; padding: 2px 8px;
}
.rmap .rmap-have, .rmap .rmap-metros { font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
.rmap .rmap-next-h { margin: 8px 0 2px; font-size: 13px; color: var(--muted); }
.rmap-next { margin: 0; padding-left: 0; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.rmap-next li { margin: 3px 0; padding-left: 0; }
.rmap-next .k {
  display: inline-block; min-width: 54px; margin-right: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.rmap-next .k-liens .k { color: var(--series-1); }
.rmap-next .k-courts .k { color: var(--series-2); }
.rmap-next .k-free .k { color: var(--good); }
.rmap-next .k-blocked .k { color: var(--critical, #b91c1c); }
@media (max-width: 600px) {
  .hero { padding-top: 32px; }
  .stat b { font-size: 24px; }
  .cta-band { padding: 22px; }
}

/* ---- color theme toggle (site/theme.js labels and wires it; docs/SITE.md) ---- */
.theme-toggle {
  font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; white-space: nowrap;
  background: var(--chip-bg); color: var(--ink-2); border: 1px solid var(--border);
  border-radius: 99px; padding: 3px 10px; align-self: center;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--series-1); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.nav .theme-toggle { margin-left: 4px; }

/* ---- Leaflet in the page's palette: dark tiles are the light OSM tiles
   inverted (--tile-filter is `none` by day); pins live in other panes and
   keep their colors; popups and controls take the tokens. ---- */
.leaflet-container { background: var(--surface); }
.leaflet-tile-pane { filter: var(--tile-filter); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--page); color: var(--ink); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-bar a, .leaflet-bar a:hover, .leaflet-bar a:focus {
  background: var(--page); color: var(--ink); border-bottom-color: var(--border); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--muted); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--page) 80%, transparent); color: var(--ink-2); }
.leaflet-control-attribution a { color: var(--series-1); }