:root {
  --red: #d93a3a;
  --yellow: #e6b422;
  --green: #2f9e44;
  --purple: #7c3aed;
  --gray: #4a5058;
  --ink: #1b1d1e;
  --mute: #5a6067;
  --bg: #fafbfc;
  --rule: #e3e6ea;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* Anchor-jump offset for the sticky top nav (44px tall on mobile, ~52px
   on desktop). 60px gives a small breathing band above the heading and
   no more — TOC clicks should land at the heading, not 200px below it.
   This is the ONLY scroll-offset rule on the site; do not also add
   scroll-margin-top on the targets, or the offsets stack. */
html { scroll-padding-top: 60px; }
/* Use dynamic viewport height on browsers that support it so iOS Safari's
   address-bar collapse/expand doesn't leave the map overflowing or gapping. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
body { display: flex; flex-direction: column; }

/* Long-scrolling document pages need natural flow, not the map's fixed
   100dvh clamp — otherwise the sticky top-nav can't find a scrolling
   ancestor and content collides with it. Map (index.html) keeps the
   clamp; every other page opts in via .doc-page / .stats-page. */
body.doc-page,
body.stats-page {
  height: auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.doc-page,
  body.stats-page { min-height: 100dvh; }
}

/* ----- Top nav (shared across Map / Playbook / Appraisals / Appeals / About).
   Sticky on scroll; horizontally scrollable pills on narrow viewports.
   ----- */
.site-nav {
  position: sticky; top: 0; z-index: 1003;
  display: flex; gap: 4px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav-link {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.site-nav-link:hover { background: #f2f6fb; }
.site-nav-link:focus-visible {
  outline: 2px solid #1b6fe6;
  outline-offset: 2px;
  background: #f2f6fb;
}
.site-nav-link[aria-current="page"] {
  background: #1b6fe6;
  color: #fff;
}
.site-nav-link[aria-current="page"]:hover { background: #1558c2; }
.site-nav-link[aria-current="page"]:focus-visible {
  outline: 2px solid #0a3a7f;
  outline-offset: 2px;
  background: #1558c2;
}
@media (max-width: 720px) {
  .site-nav { padding: 6px 8px; }
  .site-nav-link { font-size: 13px; padding: 8px 12px; min-height: 36px; }
}

/* ----- Stub pages (Playbook / Appraisals / Appeals / About while scaffolded).
   Plain document layout while full content lands chunk-by-chunk. ----- */
body.stub-page { background: var(--bg); }
.stub-container {
  flex: 1;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 20px 48px;
  line-height: 1.55;
  color: var(--ink);
}
.stub-title { font-size: 28px; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; }
.stub-lede  { font-size: 16px; color: var(--mute); margin: 0 0 20px; }
.stub-note  { font-size: 14px; color: var(--mute); background: #fff;
              border: 1px solid var(--rule); border-radius: 8px;
              padding: 14px 16px; margin: 18px 0; }
.stub-note a { color: #1b6fe6; }
.stub-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                  font-size: 13px; padding: 1px 5px; background: #f2f6fb;
                  border-radius: 4px; }
.stub-outline { list-style: none; padding: 0; margin: 18px 0; font-size: 14px; }
.stub-outline li { padding: 10px 14px; background: #fff;
                   border: 1px solid var(--rule); border-radius: 8px;
                   margin-bottom: 8px; }
@media (max-width: 720px) {
  .stub-container { padding: 22px 16px 40px; }
  .stub-title { font-size: 22px; }
  .stub-lede { font-size: 15px; }
}

header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--rule); background: #fff;
}
header h1 { font-size: 15px; margin: 0; font-weight: 600; }

.search { position: relative; flex: 1; max-width: 520px; }
.search input {
  width: 100%; padding: 7px 10px; font-size: 14px;
  border: 1px solid var(--rule); border-radius: 6px; outline: none;
}
.search input:focus { border-color: #4a90e2; }
#results {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0;
  padding: 0; list-style: none; background: #fff;
  border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  max-height: 320px; overflow-y: auto; z-index: 1001;
}
#results li {
  padding: 8px 10px; font-size: 13px; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
#results li:last-child { border-bottom: none; }
#results li:hover, #results li[aria-selected="true"] { background: #f2f6fb; }
#results .acct { color: var(--mute); font-size: 11px; margin-left: 8px; }

.legend { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.legend-item { white-space: nowrap; }
.legend-label { color: var(--mute); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; margin-right: 3px; }
.dot.red    { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green  { background: var(--green); }
.dot.purple { background: var(--purple); }
.dot.gray   { background: var(--gray); }

.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin-left: 2px;
  background: #fff; color: var(--mute);
  border: 1px solid var(--rule); border-radius: 50%;
  font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.info-btn:hover { background: #f2f6fb; color: var(--ink); border-color: #c3cad2; }
.info-btn[aria-expanded="true"] { background: #1b6fe6; color: #fff; border-color: #1b6fe6; }

.intro-nudge {
  background: none; border: none; padding: 0 2px; margin: 0;
  font: inherit; color: #1b6fe6; font-size: 12px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.intro-nudge:hover { text-decoration: underline; }

.info-popover {
  position: fixed; top: 96px; right: 16px; bottom: 16px; z-index: 1002;
  max-width: 420px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  font-size: 13px; line-height: 1.55; color: var(--ink);
  /* Cap to the viewport and let content scroll when it overflows. Without
     this, long popovers get clipped on small screens with no way to reach
     the bottom (mobile Safari, in particular). */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.info-popover section { margin-bottom: 14px; }
.info-popover section + section { padding-top: 14px; border-top: 1px solid var(--rule); }
.info-popover h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.info-popover p { margin: 6px 0; }
.info-popover ul, .info-popover ol { padding-left: 0; margin: 8px 0; list-style: none; counter-reset: howto; }
.info-popover li { margin: 6px 0; padding-left: 0; }
.info-popover ol li { padding-left: 22px; position: relative; counter-increment: howto; }
.info-popover ol li::before {
  content: counter(howto);
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: #eef2f7; color: var(--ink);
  font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.info-popover li strong { color: var(--ink); }
.info-popover a { color: #1b6fe6; }
.info-popover ol .dot { margin: 0 1px; }
.info-disclaimer { margin-top: 14px !important; padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--mute); }
.info-relative {
  margin-top: 10px !important; padding: 8px 10px;
  background: #f3eefe; border-left: 3px solid var(--purple);
  font-size: 12px; color: var(--ink); border-radius: 4px;
}

/* Popover "What the badges mean" — orange-ring dot mirrors the actual
   map pin (a colored fill plus an orange box-shadow ring); the
   methods-differ pill mirrors the inline tag shown in pin popups. */
.info-popover .dot.ring-cap {
  background: var(--red);
  box-shadow: 0 0 0 2px #ff7a00;
}
.info-popover .badge-tag {
  display: inline-block;
  padding: 1px 6px; margin-right: 4px;
  background: #fff8e1; border: 1px solid #e6b422;
  border-radius: 3px;
  font-size: 10px; font-weight: 600; color: #8a6500;
  text-transform: lowercase; letter-spacing: 0.02em;
  vertical-align: middle; white-space: nowrap;
}
.info-close {
  margin-top: 6px; padding: 6px 12px;
  background: #fff; color: var(--mute);
  border: 1px solid var(--rule); border-radius: 5px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.info-close:hover { background: #f2f6fb; color: var(--ink); }

/* Layer-control overlay rows: a small colored bullet inline with the
   bucket label, matching the pin color. The bullet is rendered via an
   inline `style="background:#xxx"` set in main.js so we don't have to
   duplicate the bucket palette here. */
.layer-bullet {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
/* Cap-ring footer row inside the layer-control — non-interactive, just
   an info note. Hairline rule above to separate it from the checkbox
   list above; muted color and italic to read as supplementary, not as
   a missing checkbox. */
.layer-cap-note {
  display: flex;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 12px;
  color: var(--mute);
  font-style: italic;
}
.layer-bullet-ring {
  background: transparent !important;
  border: 2px solid #ff7a00;
}

/* Layer-control (top-right) — custom HTML inside a maplibregl-ctrl-group.
   Collapsible via <details>. Hover or click on summary to expand. */
.layer-control {
  background: #fff;
  font-size: 13px;
}
.layer-control-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  font-weight: 500;
  user-select: none;
}
.layer-control-details > summary::-webkit-details-marker { display: none; }
.layer-control-details > summary::after {
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--mute);
}
.layer-control-details[open] > summary::after { content: "▴"; }
.layer-control-body {
  padding: 4px 10px 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  min-width: 180px;
}
.layer-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.layer-section + .layer-section {
  border-top: 1px solid rgba(0,0,0,0.06);
}
.layer-control label.layer-base,
.layer-control label.layer-overlay {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  line-height: 1.4;
}
.layer-control label.layer-base { font-weight: 500; }
.layer-control label.layer-overlay { font-size: 12.5px; }

/* MapLibre popup — strip the default padding so our .parcel-popup
   styling carries; keep the white background and tip. */
.maplibregl-popup-content {
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-top-color: #fff; border-bottom-color: #fff; }

@media (max-width: 720px) {
  /* Stack the header so search gets a full row.
     Row 1: title + (optional nudge) + ?
     Row 2: search (full width)
     Inline legend is hidden — the ? popover is the color reference on phones. */
  header {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 12px;
  }
  header h1 { flex: 1 1 auto; font-size: 14px; }
  .search {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
  .legend {
    order: 2;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
  }
  .legend-item { display: none; }
  .intro-nudge { font-size: 11px; }
  .info-popover {
    top: 140px;
    right: 8px; left: 8px;
    bottom: 8px;
    max-width: none;
  }
}

main { flex: 1; position: relative; }
#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* Map-overlay legend (bottom-right). Always visible — six rows stacked,
   no header, no toggle. The .legend-slim variant (current) drops
   descriptions for a tighter footprint, since the layer-control
   top-right and the ?-popover already carry the detailed thresholds. */
.legend-control {
  background: #fff;
  padding: 6px 10px 8px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.3;
  min-width: 170px;
}
.legend-control.legend-slim {
  padding: 5px 9px 6px;
  min-width: 0;
}
.legend-control .legend-row {
  display: grid;
  grid-template-columns: 12px auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.legend-control.legend-slim .legend-row {
  grid-template-columns: 10px auto;
  padding: 1px 0;
  font-size: 11.5px;
}
.legend-control .legend-row .dot {
  width: 12px; height: 12px; margin: 0;
}
.legend-control.legend-slim .legend-row .dot {
  width: 10px; height: 10px;
}
.legend-control .legend-desc {
  color: var(--mute); font-size: 11px;
  white-space: nowrap;
  text-align: right;
}
.legend-control .legend-cap {
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid var(--rule);
}
.legend-control.legend-slim .legend-cap {
  margin-top: 3px; padding-top: 3px;
}
/* Slim-legend cap row: hollow orange ring at the same outer dimensions
   as the other dots. The orange ring on a real map pin overlays its
   bucket color (it's not its own bucket), so the legend swatch shouldn't
   imply a fill — show just the ring on its own. */
.legend-control.legend-slim .dot.ring-cap {
  background: transparent;
  box-shadow: none;
  border: 2px solid #ff7a00;
  box-sizing: border-box;
  width: 10px; height: 10px;
}
/* Legend preview for a cap-violation pin. Mirrors the actual map pin:
   a bucket-colored dot (we use red here as an exemplar) with a thick
   orange ring. */
.legend-control .dot.ring-cap {
  background: var(--red);
  box-shadow: 0 0 0 2px #ff7a00;
  width: 10px; height: 10px;
  margin-right: 4px;
}

.zoom-readout {
  background: rgba(255,255,255,0.92);
  padding: 4px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: none;
}

.locate-control .locate-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #fff; color: var(--ink);
  cursor: pointer;
}
.locate-control .locate-btn:hover { background: #f2f6fb; color: #1b6fe6; }
.locate-control.loading .locate-btn { color: #1b6fe6; }
.locate-control.loading .locate-btn svg { animation: locate-pulse 1s ease-in-out infinite; }
@keyframes locate-pulse { 50% { opacity: 0.35; } }

.locate-toast,
.hcad-toast {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
  z-index: 2000; max-width: calc(100vw - 32px);
  padding: 10px 14px;
  background: #1b1d1e; color: #fff;
  border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
}

footer {
  padding: 8px 16px; font-size: 12px; color: var(--mute);
  border-top: 1px solid var(--rule); background: #fff; text-align: center;
}

.parcel-popup { font-size: 13px; line-height: 1.45; }
.parcel-popup .addr { font-weight: 600; margin-bottom: 2px; }
.parcel-popup .owner { font-size: 12px; color: var(--mute); margin-bottom: 4px; }
.parcel-popup .size { font-size: 12px; color: var(--mute); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.parcel-sheet .sheet-size { font-size: 13px; color: var(--mute); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.parcel-popup .pct { font-weight: 600; }
.parcel-popup .pct.red    { color: var(--red); }
.parcel-popup .pct.yellow { color: #a57a00; }
.parcel-popup .pct.green  { color: var(--green); }
.parcel-popup .pct.purple { color: var(--purple); }
.parcel-popup .pct.gray   { color: var(--gray); }
.parcel-popup a.download {
  display: inline-block; margin-top: 6px; padding: 5px 9px;
  background: #1b6fe6; color: #fff; border-radius: 5px;
  text-decoration: none; font-weight: 600; font-size: 12px;
}
.parcel-popup a.download:hover { background: #155fc6; }
.parcel-popup .cap-flag,
.parcel-sheet .sheet-cap {
  margin: 6px 0;
  padding: 4px 8px;
  background: #fff3e0;
  border-left: 3px solid #ff7a00;
  font-size: 12px; font-weight: 600; color: #b85300;
  border-radius: 3px;
}
.parcel-sheet .sheet-cap { font-size: 13px; margin: 6px 0 10px; }

/* Methods-differ tag — surfaces a directional bucket disagreement so a
   homeowner doesn't trust the primary pin color blindly. Muted blue to
   keep it distinct from the orange §23.23 cap flag. */
.parcel-popup .disagree-flag,
.parcel-sheet .sheet-disagree {
  margin: 6px 0;
  padding: 4px 8px;
  background: #eef2f7;
  border-left: 3px solid #5a6067;
  font-size: 12px; font-weight: 500; color: var(--ink);
  border-radius: 3px;
}
.parcel-sheet .sheet-disagree { font-size: 13px; margin: 6px 0 10px; }

/* Mobile bottom sheet — shown instead of Leaflet popup on touch/narrow views.
   Fixed at the bottom, doesn't move with the map, has room for content,
   explicit close button, finger won't occlude the text. */
.parcel-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
  padding: 24px 20px 24px;
  background: #fff;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
  max-height: 60vh; overflow-y: auto;
  font-size: 15px; line-height: 1.45; color: var(--ink);
}
.parcel-sheet.open { transform: translateY(0); }
/* Bucket-color accent strip across the top — catches the eye and
   reinforces the signal the user just tapped. */
.parcel-sheet::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
  background: var(--gray);
}
.parcel-sheet.red::before    { background: var(--red); }
.parcel-sheet.yellow::before { background: var(--yellow); }
.parcel-sheet.green::before  { background: var(--green); }
.parcel-sheet.purple::before { background: var(--purple); }
.parcel-sheet.gray::before   { background: var(--gray); }
/* Pull-handle pill — standard mobile affordance for a draggable/
   dismissible sheet. Purely visual here; dismissal is via close button
   or tap-on-map. */
.parcel-sheet::after {
  content: "";
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 2px;
  background: #d0d5db;
}
.parcel-sheet .sheet-close {
  position: absolute; top: 16px; right: 10px;
  width: 32px; height: 32px; padding: 0;
  background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--mute);
  cursor: pointer; border-radius: 50%;
}
.parcel-sheet .sheet-close:hover,
.parcel-sheet .sheet-close:active { background: #f2f6fb; color: var(--ink); }
.parcel-sheet .sheet-addr { font-weight: 600; font-size: 17px; padding-right: 36px; margin-bottom: 2px; }
.parcel-sheet .sheet-owner { font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.parcel-sheet .sheet-meta { font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.parcel-sheet .sheet-pct { font-weight: 600; margin: 4px 0 14px; }
.parcel-sheet .sheet-pct.red    { color: var(--red); }
.parcel-sheet .sheet-pct.yellow { color: #a57a00; }
.parcel-sheet .sheet-pct.green  { color: var(--green); }
.parcel-sheet .sheet-pct.purple { color: var(--purple); }
.parcel-sheet .sheet-pct.gray   { color: var(--gray); }
.parcel-sheet .sheet-action {
  display: block; text-align: center;
  padding: 12px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 600; font-size: 15px;
}
.parcel-sheet .sheet-action.download { background: #1b6fe6; color: #fff; }
.parcel-sheet .sheet-action.download:active { background: #155fc6; }

/* ============================================================
   REPORT PAGE — screen layout, then @media print at the bottom.
   Served at report.html?a=<account>; rendered by report.js.
   ============================================================ */
body.report-page { background: var(--bg); }

.report-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: #fff; border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.toolbar-btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  background: #fff; color: var(--ink);
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.toolbar-btn:hover { background: #f2f6fb; border-color: #c3cad2; }
.toolbar-btn.print {
  background: #1b6fe6; color: #fff; border-color: #1b6fe6;
}
.toolbar-btn.print:hover { background: #155fc6; border-color: #155fc6; }

.report {
  max-width: 820px; margin: 0 auto; padding: 24px 20px 48px;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.report-sheet {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 40px 48px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.report .legal-notice {
  font-style: italic; font-size: 12px; color: var(--mute);
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

/* Verdict banner — immediate file/don't-file signal at the top of Page 1.
   Big label + small subtitle, tinted by bucket. Deliberately attention-
   grabbing for the "FILE" / "DO NOT FILE" variants; muted for skip. */
.report .verdict-banner {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 6px;
  border-left: 6px solid var(--gray);
  background: #f4f6f8;
}
.report .verdict-label {
  font-size: 22px; font-weight: 800; letter-spacing: 0.5px;
  white-space: nowrap;
}
.report .verdict-subtitle {
  font-size: 13px; color: var(--ink); line-height: 1.4;
}
.report .verdict-banner.verdict-red {
  background: #fde8e8; border-left-color: var(--red);
}
.report .verdict-banner.verdict-red .verdict-label { color: var(--red); }
.report .verdict-banner.verdict-yellow {
  background: #fff5d6; border-left-color: var(--yellow);
}
.report .verdict-banner.verdict-yellow .verdict-label { color: #8a6500; }
.report .verdict-banner.verdict-green {
  background: #e8f5ec; border-left-color: var(--green);
}
.report .verdict-banner.verdict-green .verdict-label { color: var(--green); }
.report .verdict-banner.verdict-purple {
  background: #f3eefe; border-left-color: var(--purple);
}
.report .verdict-banner.verdict-purple .verdict-label { color: var(--purple); }
.report .verdict-banner.verdict-cap {
  background: #fff3e0; border-left-color: #ff7a00;
}
.report .verdict-banner.verdict-cap .verdict-label { color: #b85300; }
.report .verdict-banner.verdict-cap-conflict {
  background: #fff8ef; border-left-color: #b85300;
}
.report .verdict-banner.verdict-cap-conflict .verdict-label { color: #b85300; }
.report .verdict-banner.verdict-gray {
  background: #f1f3f5; border-left-color: var(--gray);
}
.report .verdict-banner.verdict-gray .verdict-label { color: var(--gray); }

@media (max-width: 560px) {
  .report .verdict-banner { flex-direction: column; gap: 4px; padding: 12px 14px; }
  .report .verdict-label { font-size: 18px; }
}

.report .report-title {
  margin: 0 0 2px; font-size: 22px; font-weight: 700;
}
.report .report-subtitle {
  margin: 0 0 18px; font-size: 13px; color: var(--mute);
}
.report h2 {
  margin: 20px 0 8px; font-size: 15px; font-weight: 700;
  padding-bottom: 4px; border-bottom: 1px solid var(--rule);
}
.report h3 {
  margin: 16px 0 6px; font-size: 14px; font-weight: 700;
}
.report p { margin: 8px 0; }
.report a { color: #1b6fe6; }

.report .bottomline {
  margin: 14px 0 20px;
  padding: 14px 16px;
  background: #F4F7FB;
  border-left: 3px solid #1b6fe6;
  border-radius: 4px;
  font-size: 15px; line-height: 1.5;
}
.report .bottomline .cap-note {
  display: block; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--rule);
  color: #b85300;
}
.report .bottomline .cap-note b { color: #b85300; }

/* Facts table */
.report table.facts {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.report table.facts th,
.report table.facts td {
  padding: 6px 10px;
  text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}
.report table.facts tr:last-child th,
.report table.facts tr:last-child td { border-bottom: none; }
.report table.facts th { font-weight: 600; width: 38%; }

/* Comp table */
.report table.comps {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin: 10px 0 12px;
}
.report table.comps thead th {
  background: #EEEEEE; font-weight: 600;
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid #000;
}
.report table.comps th.col-num,
.report table.comps th.col-year { text-align: center; }
.report table.comps th.col-sqft,
.report table.comps th.col-psf,
.report table.comps th.col-value { text-align: right; }

.report table.facts .psf-inline {
  color: var(--mute); font-weight: 400; font-size: 12px;
}
/* Year-over-year row inside the facts table. Neutral styling — we
   don't red/green it because "up" isn't always bad for the homeowner
   (e.g., an under-assessed home moving toward fair). */
.report table.facts .yoy-delta {
  font-variant-numeric: tabular-nums;
}
.report table.facts .yoy-amounts {
  color: var(--mute); font-weight: 400; font-size: 12px;
  margin-left: 6px; font-variant-numeric: tabular-nums;
}
/* Caveat under the YoY row when the percentage is impossibly large
   (>100%) — almost always means the prior-year appraisal was
   land-only, so the percentage isn't a real year-over-year change. */
.report table.facts .yoy-caveat {
  margin-top: 4px; padding: 6px 8px;
  background: #fff8e1; border-left: 3px solid var(--yellow);
  font-size: 11px; line-height: 1.4; color: var(--ink);
  border-radius: 3px;
}
.report table.facts .yoy-caveat b { color: #8a6500; }

/* Mini-map of subject + 5 comps on Page 1. Visual-only; doesn't change
   any number. Subject marker is gold-highlighted with a blue ring so
   "your home" stands out; comp markers are small numbered circles that
   cross-reference the # column in the comp table above. */
.report .comps-map-section { margin-top: 24px; }
.report .comps-map-section h2 { margin-bottom: 6px; }
.report .comps-map-intro {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--mute);
}
.report .comps-map {
  height: 260px;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: #f4f6f8;
}
.report .comp-map-subject-marker { background: transparent; border: 0; }
.report .comp-map-subject-marker .subject-dot {
  display: block;
  width: 22px; height: 22px;
  background: #FFF7E6;
  border: 3px solid #1b6fe6;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.report .comp-map-comp-marker { background: transparent; border: 0; }
.report .comp-map-comp-marker .comp-num {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #1b6fe6; color: #fff;
  font-weight: 700; font-size: 12px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
.report .comps-map .map-popup-tag {
  color: var(--mute); font-weight: 400; font-size: 11px;
}
.report .comps-map .comp-popup-addr {
  color: #1b6fe6; text-decoration: none;
}
.report .comps-map .comp-popup-addr:hover { text-decoration: underline; }

/* Thin-basket caveat — appears above the comp table when fewer than
   5 comps matched the §41.43(b)(3) filters. Info-blue left border
   (informational, not a warning) to signal "honest limitation" rather
   than "don't proceed." */
.report .thin-basket-note {
  margin: 10px 0 14px;
  padding: 11px 15px;
  background: #eff6ff;
  border-left: 3px solid #1b6fe6;
  border-radius: 4px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink);
}
.report .thin-basket-note p { margin: 0; }
.report .thin-basket-note b { color: var(--ink); }
.report .thin-basket-note a { color: #1b6fe6; }

/* "What This Tool Doesn't Adjust For" — muted informational section
   near the end of Page 1. Cool-gray left border to echo the other
   secondary sections (info-relative, purple-warning, cap-caveat)
   without shouting. */
.report .limits-section {
  margin-top: 24px;
  padding: 14px 18px;
  background: #f8fafc;
  border-left: 3px solid #c3cad2;
  border-radius: 4px;
}
.report .limits-section h2 {
  margin-top: 0;
  font-size: 14px;
}
.report .limits-section p {
  margin: 8px 0;
  font-size: 13px; line-height: 1.55;
}
.report .limits-list {
  padding-left: 22px;
  margin: 10px 0;
}
.report .limits-list li {
  margin: 6px 0;
  font-size: 13px; line-height: 1.5;
}
.report .limits-list b { color: var(--ink); }
.report table.comps tbody td,
.report table.comps tfoot td {
  padding: 6px 10px; border-bottom: 1px solid var(--rule);
}
.report table.comps td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* HCAD account links in the comp table — clicking copies the account
   number to the clipboard and opens HCAD's search page in a new tab.
   Subtle blue treatment so the table doesn't look like a wall of
   underlines. */
.report .hcad-link {
  color: #1b6fe6;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.report .hcad-link:hover { text-decoration: underline; }
.report .hcad-arrow { color: var(--mute); font-size: 10px; }
.report .subject-row .hcad-link { color: #1b6fe6; }

/* Google Street View links — same subtle blue as the HCAD links,
   used in the facts-table address row and in the comp table's
   Street View column. */
.report .sv-link {
  color: #1b6fe6;
  text-decoration: none;
  white-space: nowrap;
}
.report .sv-link:hover { text-decoration: underline; }
.report .sv-arrow { color: var(--mute); font-size: 10px; }
.report .sv-sep { color: var(--mute); margin: 0 2px; }

.report table.comps .subject-row td {
  background: #FFF7E6; font-weight: 600;
}
.report table.comps tfoot tr.summary td {
  background: #F4F7FB;
  font-weight: 600;
}

/* Comp-spread confidence badge (next to "Median $/sqft of 5 comps").
   Reads as a tiny pill so it doesn't dominate the median number itself. */
.report .conf-badge {
  display: inline-block; margin-left: 8px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; vertical-align: middle;
  border: 1px solid currentColor;
  cursor: help;
}
.report .conf-badge.conf-tight    { color: var(--green); background: #ecf9ef; }
.report .conf-badge.conf-moderate { color: #a57a00;     background: #fff8e1; }
.report .conf-badge.conf-wide     { color: var(--red);   background: #fdecec; }

/* Purple "do not file" warning box (replaces hearing script for under-
   assessed parcels). High-contrast border + background so it can't be
   skimmed past — this is a safety message. */
.report .purple-warning {
  margin: 12px 0 18px;
  padding: 14px 18px;
  background: #f3eefe;
  border-left: 4px solid var(--purple);
  border-radius: 4px;
  color: var(--ink);
}
.report .purple-warning p { margin: 6px 0; }
.report .purple-warning p:first-child { margin-top: 0; font-size: 15px; }
.report .purple-warning p:last-child { margin-bottom: 0; font-size: 12px; color: var(--mute); }
.report table.comps tfoot tr.summary:first-child td {
  border-top: 1px solid #000;
}
/* Color the dollar-amount cell on the summary "Over-assessment" /
   "Under-assessed" row. The amount is in the second-to-last TD (the
   final TD is the empty Street View column added by commit af6b5b8),
   so target nth-last-child(2). */
.report table.comps tfoot tr.summary.over  td:nth-last-child(2) { color: #C03030; }
.report table.comps tfoot tr.summary.under td:nth-last-child(2) { color: var(--green); }

/* Alternate-view rows: raw-dollar comp median, shown below the primary
   per-sqft summary. Muted and smaller so readers see this as a
   cross-reference to the Chronicle-style / ARB-panel-default method, not
   a competing primary conclusion. */
.report table.comps tfoot tr.alt-head td {
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  background: transparent;
  font-size: 11px; font-weight: 600;
  font-style: italic;
  color: var(--mute);
  text-align: left;
}
.report table.comps tfoot tr.alt-summary td {
  background: transparent;
  font-size: 12px; font-weight: 500;
  color: var(--mute);
  padding-top: 3px; padding-bottom: 3px;
}
.report table.comps tfoot tr.alt-summary.over  td:nth-last-child(2) { color: #c04040; }
.report table.comps tfoot tr.alt-summary.under td:nth-last-child(2) { color: #3a7a3a; }

/* Gray-parcel "no comps" notice takes the place of the comp table */
#gray-notice p { margin: 10px 0; }

/* Deadline banner (Page 2) */
.report .deadline-banner {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: #FFF8E1;
  border: 1px solid #E6B422;
  border-radius: 5px;
  font-size: 14px;
}

/* Rebuttals table */
.report table.rebuttals {
  width: 100%; border-collapse: collapse;
  font-size: 13px; margin: 10px 0 14px;
}
.report table.rebuttals thead th {
  background: #EEEEEE; font-weight: 600;
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid #000;
}
.report table.rebuttals td {
  padding: 8px 10px; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.report table.rebuttals td:first-child {
  width: 38%; font-style: italic;
}

/* What-not-to-argue + disclaimer lists */
.report ul.not-to-argue,
.report ul.disclaimer-list {
  list-style: none; padding: 0; margin: 8px 0;
}
.report ul.not-to-argue li,
.report ul.disclaimer-list li {
  padding: 6px 0 6px 18px;
  position: relative;
  font-size: 13px; line-height: 1.5;
}
.report ul.not-to-argue li::before,
.report ul.disclaimer-list li::before {
  content: "•"; position: absolute; left: 4px; color: var(--mute);
}

/* Pointer line below the report's slimmed disclaimer-list, sending
   readers (or paper-only readers, who see the URL string) to About
   for the canonical full Terms. */
.report .disclaimer-pointer {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
}
.report .disclaimer-pointer a { color: #1b6fe6; }

/* Hearing script ordered list */
.report ol.script {
  padding: 0 0 0 24px; margin: 10px 0;
}
.report ol.script li {
  margin: 10px 0; font-size: 14px;
}

.report .report-footer {
  margin-top: 24px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--mute); text-align: center;
  font-style: italic;
}

/* Methodology note — shown only on directional-disagreement parcels
   (per-sqft and raw-dollar methods recommend different actions). Sits
   between the comp table and the §23.23 cap section on Page 1. Neutral
   gray accent, no competing semantics with the orange cap section. */
.report .methods-note {
  margin-top: 18px;
  padding: 14px 18px;
  background: #f3f5f8;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--mute);
  border-radius: 6px;
}
.report .methods-note h2 {
  border-bottom: none;
  margin-top: 0;
  color: var(--ink);
  font-size: 14px;
}
.report .methods-note p { margin: 6px 0 0; font-size: 13px; }

/* §23.23 hearing-script block on Page 2 — pre-pended to the primary
   §41.43 script when the parcel has a cap claim. Orange accent matches
   the map pin ring and the Page-1 Alternate Ground section. */
.report .cap-script {
  margin-bottom: 14px; padding: 12px 14px;
  background: #fff7ee;
  border-left: 4px solid #ff7a00;
  border-radius: 4px;
}
.report .cap-script p:first-child { margin-top: 0; }
.report .cap-script p:last-child { margin-bottom: 0; }
.report .cap-script-caution {
  margin-top: 8px; padding: 8px 10px;
  background: #fff;
  border: 1px dashed #b85300;
  border-radius: 3px;
  font-size: 13px;
}

/* §23.23 Homestead Cap section — an alternate statutory ground that sits
   alongside the §41.43 unequal-appraisal case on Page 1. Orange accent
   matches the pin ring on the map so the connection is obvious. */
.report .cap-section {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff7ee;
  border: 1px solid #ffcfa3;
  border-left: 4px solid #ff7a00;
  border-radius: 6px;
}
.report .cap-section h2 {
  border-bottom: none;
  color: #b85300;
  margin-top: 0;
}
.report table.cap-table {
  width: 100%; border-collapse: collapse;
  margin: 8px 0; font-size: 13px;
}
.report table.cap-table th,
.report table.cap-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--rule);
}
.report table.cap-table th { text-align: left; font-weight: 600; width: 55%; }
.report table.cap-table td { text-align: right; font-variant-numeric: tabular-nums; }
.report table.cap-table tr.cap-excess td,
.report table.cap-table tr.cap-excess th {
  font-weight: 700; color: #b85300;
  border-top: 1px solid #000;
}
.report .cap-caveat {
  margin-top: 10px !important;
  font-size: 12px; color: var(--mute);
  border-top: 1px dashed var(--rule);
  padding-top: 8px;
}

/* Error state (bad ?a= or missing data) */
.report-error {
  max-width: 560px; margin: 60px auto; padding: 30px 32px;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  text-align: center;
}
.report-error h1 { font-size: 20px; margin: 0 0 10px; }
.report-error a { color: #1b6fe6; }

@media (max-width: 720px) {
  .report { padding: 12px 8px 40px; }
  .report-sheet { padding: 22px 18px; border-radius: 6px; }
  .report-toolbar { padding: 8px 12px; }
  .report .report-title { font-size: 18px; }
  .report table.facts th { width: 42%; }
  .report table.comps { font-size: 12px; }
  .report table.comps thead th,
  .report table.comps tbody td,
  .report table.comps tfoot td { padding: 5px 6px; }
  .report table.rebuttals td:first-child { width: 40%; }
}

/* ============================================================
   STATS PAGE — harristaxappeals.com/stats.html
   Community-impact snapshot. Advocacy-light tone: neutral headline,
   one hero number, scannable grid of secondary stats, clear disclaimer.
   ============================================================ */

body.stats-page {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.stats-toolbar {
  display: flex; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  background: #fff;
}
.stats-toolbar .toolbar-btn {
  font-size: 13px; color: #1b6fe6; text-decoration: none;
}
.stats-toolbar .toolbar-btn:hover { text-decoration: underline; }

.stats-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.stats-title {
  font-size: 20px; font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Segmented-control tabs at the top of the stats page. Two tabs:
   Appraisals (default) and Appeals & History. URL-param backed in
   stats.js; aria-selected on the active one. */
.stats-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  background: #eef2f7;
  border-radius: 10px;
}
.stats-tab {
  flex: 1 1 0;
  padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent;
  border: none; border-radius: 7px;
  text-decoration: none;
  color: var(--mute);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.stats-tab:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.stats-tab[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.stats-tab-label {
  font-size: 14px; font-weight: 600;
}
.stats-tab-sub {
  font-size: 11px; color: var(--mute); font-weight: 400;
}
.stats-tab[aria-selected="true"] .stats-tab-sub { color: var(--mute); }

.stats-hero {
  text-align: center;
  padding: 32px 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  margin-bottom: 28px;
}
.stats-hero-number {
  font-size: 46px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.stats-hero-label {
  font-size: 14px; color: var(--mute);
  line-height: 1.5;
}
.stats-hero-label b { color: var(--ink); font-weight: 600; }

/* Green hero variant — used on the Appeals tab to signal "win rate"
   visually. Inherits size/weight from .stats-hero-number. */
.stats-hero-number.stats-hero-win { color: var(--green); }

/* Small supporting line under the hero label ("Typical reduction:
   $19,484."). Inline continuation of the hero context, not a new
   card. */
.stats-hero-sub {
  margin-top: 14px;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
}
.stats-hero-sub b {
  color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Appeals-tab framing sentence + narrative paragraph. Quieter than
   hero + cards; does the "article prose" work between sections. */
.appeals-intro {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}
.appeals-paragraph {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.55;
}
.appeals-paragraph b {
  color: var(--ink); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Sub-section h3 under the three act-level h2s. Muted uppercase
   label style so it reads as "chart heading" rather than "new act." */
.stats-container h3 {
  font-size: 12px;
  font-weight: 700;
  margin: 22px 0 10px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* .stats-plain modifier — strips the white-card box styling from
   .stats-filings-chart / .stats-outcomes-bar so the charts flow into
   the surrounding prose instead of sitting in a dashboard tile. */
.stats-filings-chart.stats-plain,
.stats-outcomes-bar.stats-plain {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 4px 0;
}

/* "Click your pin on the map" CTA — used inside the Appeals-tab
   closing callout and as a standalone inline link between the
   Appraisals tab's "Also worth knowing" section and its disclaimer. */
.stats-cta {
  font-size: 14px;
  font-weight: 600;
}
.stats-cta a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stats-cta a:hover { color: #1b6fe6; }
/* Standalone variant (outside any callout) — needs its own vertical
   rhythm. Inside .stats-never-filed, the callout's p:last-child rule
   already zeroes the bottom margin. */
.stats-cta-inline {
  margin: 24px 0 28px;
}

/* Filings-by-year horizontal bar chart on the Appeals tab.
   Each row: year | bar (proportional to count) | count. The
   current year carries a small "so far" tag + muted bar color
   so readers don't treat a partial-year count as final. */
.stats-filings-section { margin-top: 28px; }
.stats-filings-section h2 { margin-bottom: 10px; }
.stats-filings-chart {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 18px;
}
.filings-row {
  display: grid;
  grid-template-columns: 56px 1fr 120px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}
.filings-year {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.filings-bar-wrap {
  background: #eef2f7;
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}
.filings-bar {
  height: 100%;
  background: #1b6fe6;
  border-radius: 4px;
}
.filings-partial .filings-bar { background: #9ca3af; }
.filings-count {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.filings-partial-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  background: #fff8e1;
  border: 1px solid #e6b422;
  border-radius: 3px;
  font-size: 10px; font-weight: 600; color: #8a6500;
  text-transform: uppercase; letter-spacing: 0.03em;
  vertical-align: middle;
}
.stats-filings-caption {
  margin: 10px 0 0;
  font-size: 12px; color: var(--mute); line-height: 1.5;
}

/* 2025 outcomes horizontal bar rows — three colored bars for
   reduced / unchanged / raised, with percent on the right. */
.stats-outcomes-section { margin-top: 28px; }
.stats-outcomes-section h2 { margin-bottom: 10px; }
.stats-outcomes-bar {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 18px;
}
.outcomes-row {
  display: grid;
  grid-template-columns: 220px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
}
.outcomes-label { color: var(--ink); }
.outcomes-bar-wrap {
  background: #eef2f7;
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}
.outcomes-bar {
  height: 100%;
  border-radius: 4px;
}
.outcomes-bar.outcomes-win  { background: var(--green); }
.outcomes-bar.outcomes-tie  { background: #9ca3af; }
.outcomes-bar.outcomes-lose { background: var(--red); }
.outcomes-pct {
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.stats-outcomes-caption {
  margin: 10px 0 0;
  font-size: 12px; color: var(--mute); line-height: 1.5;
}

/* Agent-vs-owner comparison table. Two value columns, one label
   column. Numeric values right-aligned, tabular-nums. */
.stats-filer-section { margin-top: 28px; }
.stats-filer-section h2 { margin-bottom: 10px; }
table.stats-filer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
table.stats-filer-table thead th {
  background: #f4f7fb;
  font-weight: 600; font-size: 12px;
  color: var(--mute);
  padding: 8px 14px;
  text-align: right;
  border-bottom: 1px solid var(--rule);
}
table.stats-filer-table thead th:first-child { text-align: left; }
table.stats-filer-table td,
table.stats-filer-table th[scope="row"] {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.stats-filer-table tr:last-child td,
table.stats-filer-table tr:last-child th { border-bottom: none; }
table.stats-filer-table th[scope="row"] {
  font-weight: 400;
  color: var(--ink);
  text-align: left;
}
table.stats-filer-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.stats-filer-caption {
  margin: 10px 0 0;
  font-size: 13px; color: var(--ink); line-height: 1.55;
}

/* "What's still possible in 2026" closer — single callout that
   absorbs three earlier callouts (never-filed opportunity, takeaway,
   2026-active-footer). Amber left-border + yellow tint signals
   "call to action + freshness" as one unified thought. */
.stats-never-filed {
  margin: 16px 0 24px;
  padding: 16px 20px;
  background: #fff8e1;
  border-left: 3px solid #e6b422;
  border-radius: 4px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
}
.stats-never-filed p {
  margin: 0 0 12px;
}
.stats-never-filed p:last-child {
  margin-bottom: 0;
}
.stats-never-filed b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Takeaway callout + 2026-still-active footer note */
.stats-takeaway {
  margin: 28px 0 12px;
  padding: 16px 20px;
  background: #eff6ff;
  border-left: 3px solid #1b6fe6;
  border-radius: 4px;
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
}
.stats-takeaway b { color: var(--ink); }
.stats-appeals-footer {
  margin: 12px 0;
  padding: 10px 14px;
  background: #fff8e1;
  border-left: 3px solid #e6b422;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink);
}
.stats-appeals-footer b { color: var(--ink); }
.stats-appeals-footer #filed-2026 {
  font-weight: 700; color: #1b6fe6;
  font-variant-numeric: tabular-nums;
}

/* Sub-hero row — secondary stat cards sitting under the hero number.
   Desktop: equal columns (auto-fit lets the row flex if the card count
   changes). Mobile: stacked single column. Each card is one big number
   + one muted caption. */
.stats-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}
.stats-trio .stat-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
}
.stats-trio .stat-big {
  font-size: 26px; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  line-height: 1.1;
}
.stats-trio .stat-caption {
  font-size: 12px; color: var(--mute);
  line-height: 1.4;
}

.stats-container h2 {
  font-size: 15px; font-weight: 600;
  margin: 28px 0 10px;
  color: var(--ink);
  /* Offset anchor-jump scrolls so the sticky top nav doesn't cover the
     heading the user just asked to see. */
  scroll-margin-top: 80px;
}
/* Visual separator between acts on the Appraisals + Appeals pages. Each
   act's <h2> is a sibling of the prior act's content; a hairline divider
   + breathing room matches the doc-page visual rhythm. First <h2> in the
   tabpanel is left alone (no separator above the first section). */
.stats-container section[role="tabpanel"] > h2 + h2,
.stats-container section[role="tabpanel"] > * + h2 {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin-top: 40px;
}
.stats-container section[role="tabpanel"] > h2:first-of-type {
  border-top: none;
  padding-top: 12px;
  margin-top: 28px;
}

table.stats-buckets {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.stats-buckets td {
  padding: 9px 6px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.stats-buckets tr:last-child td { border-bottom: none; }
table.stats-buckets .bucket-dot { width: 16px; padding-left: 0; }
table.stats-buckets .bucket-dot .dot {
  width: 12px; height: 12px; margin: 0;
}
table.stats-buckets .bucket-count {
  font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 4px;
}
table.stats-buckets .bucket-pct {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 10px;
}
table.stats-buckets .bucket-label { color: var(--ink); line-height: 1.4; }

/* Distribution histogram. Inline SVG; colors come from CSS so they
   flip cleanly in print mode. */
.stats-chart-section { margin: 28px 0 4px; }
.stats-chart-section h2 { margin-bottom: 8px; }
.stats-chart-intro {
  font-size: 13px; line-height: 1.5;
  color: var(--mute);
  margin: 0 0 12px;
}
.stats-chart {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
}
.stats-chart .chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.stats-chart-caption {
  font-size: 12px; color: var(--mute);
  margin: 8px 0 0;
  text-align: center;
}
.stats-chart-caption b { color: var(--ink); }
.chart-empty { color: var(--mute); font-size: 13px; text-align: center; margin: 0; }

/* SVG element styling */
.chart-bar { opacity: 0.88; }
.chart-bar-red    { fill: var(--red); }
.chart-bar-yellow { fill: var(--yellow); }
.chart-bar-green  { fill: var(--green); }
.chart-bar-purple { fill: var(--purple); }

.chart-baseline {
  stroke: #111; stroke-width: 1;
}
.chart-cutoff {
  stroke: #9ca3af; stroke-width: 1;
  stroke-dasharray: 3 3;
}
.chart-median {
  stroke: #1b6fe6; stroke-width: 1.5;
  stroke-dasharray: 2 3;
}
.chart-median-label {
  fill: #1b6fe6;
  font-size: 10px; font-weight: 600;
  font-family: inherit;
}
.chart-axis-tick {
  stroke: #6b7280; stroke-width: 1;
}
.chart-axis-label {
  fill: var(--mute);
  font-size: 10px;
  font-family: inherit;
}

/* By-neighborhood breakdown — ranked table of HCAD nbhd codes with
   case rate, median over-%, and combined gap. Mirrors .stats-buckets
   styling but adds tabular-num right-aligned numeric columns. */
.stats-nbhd-intro {
  margin: 4px 0 10px;
  font-size: 13px; color: var(--mute); line-height: 1.5;
}
table.stats-nbhd-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
table.stats-nbhd-table thead th {
  text-align: right;
  padding: 6px 6px;
  font-weight: 600; font-size: 12px;
  color: var(--mute);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.stats-nbhd-table thead th.col-nbhd {
  text-align: left;
}
table.stats-nbhd-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.stats-nbhd-table tr:last-child td { border-bottom: none; }
table.stats-nbhd-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.stats-nbhd-table .nbhd-label b {
  color: var(--ink); font-weight: 600;
}
table.stats-nbhd-table .nbhd-code {
  display: block;
  color: var(--mute); font-size: 11px;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
table.stats-nbhd-table .nbhd-empty {
  color: var(--mute); text-align: center;
  padding: 16px 6px;
}
table.stats-nbhd-table tfoot tr.nbhd-total td {
  background: #f4f7fb;
  font-weight: 600;
  border-top: 2px solid var(--ink);
  border-bottom: none;
  padding-top: 10px; padding-bottom: 10px;
}
table.stats-nbhd-table tfoot tr.nbhd-total .nbhd-code {
  font-weight: 400;
}

ul.stats-notable {
  list-style: none; padding: 0; margin: 0;
  font-size: 14px; line-height: 1.5;
}
ul.stats-notable li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
ul.stats-notable li:last-child { border-bottom: none; }

.stats-method {
  font-size: 13px; line-height: 1.55; color: var(--ink);
}
.stats-method a { color: #1b6fe6; }

.stats-disclaimer {
  margin-top: 28px;
  padding: 12px 14px;
  background: #f4f6f8;
  border-radius: 6px;
  font-size: 12px; color: var(--mute);
  line-height: 1.5;
}
.stats-disclaimer b { color: var(--ink); }

.stats-footer {
  padding: 14px 16px;
  font-size: 12px; color: var(--mute);
  border-top: 1px solid var(--rule);
  background: #fff;
  text-align: center;
}
.stats-footer a { color: #1b6fe6; text-decoration: none; }
.stats-footer a:hover { text-decoration: underline; }

.stats-error {
  max-width: 520px; margin: 40px auto; padding: 20px;
  text-align: center;
}
.stats-error h1 { font-size: 18px; margin: 0 0 12px; }
.stats-error a { color: #1b6fe6; }

@media (max-width: 560px) {
  .stats-title { font-size: 17px; }
  .stats-tabs { margin-bottom: 18px; }
  .stats-tab { padding: 8px 8px; }
  .stats-tab-label { font-size: 13px; }
  .stats-tab-sub { font-size: 10px; }
  .stats-hero { padding: 24px 16px; }
  .stats-hero-number { font-size: 34px; }
  .stats-trio { grid-template-columns: 1fr; gap: 8px; }
  .stats-trio .stat-big { font-size: 22px; }
  .stats-container { padding: 20px 14px 32px; }
  table.stats-buckets { font-size: 13px; }
  /* Tighten the filings/outcomes grid columns on narrow screens so
     the bars still get usable width. */
  .filings-row { grid-template-columns: 44px 1fr 90px; gap: 8px; font-size: 13px; }
  .outcomes-row { grid-template-columns: 140px 1fr 48px; gap: 8px; font-size: 13px; }
  .stats-filings-chart,
  .stats-outcomes-bar { padding: 10px 14px; }
}


/* ============================================================
   PRINT: hide chrome, page-break between Page 1 and Page 2,
   tighten margins to fit one sheet per section of LETTER paper.
   ============================================================ */
@media print {
  body.report-page { background: #fff; }
  .report-toolbar { display: none; }
  .report {
    max-width: none; margin: 0; padding: 0;
    font-size: 11pt; line-height: 1.35;
  }
  .report-sheet {
    border: none; box-shadow: none; margin: 0;
    padding: 0;
    page-break-after: always;
    break-after: page;
  }
  .report-sheet:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }
  .report-sheet.page-1 { page-break-inside: avoid; }
  .report h2, .report h3 { page-break-after: avoid; }
  .report table { page-break-inside: avoid; }
  .report .legal-notice {
    border-bottom: 1px solid #999; font-size: 9pt;
  }
  .report .verdict-banner {
    background: #fff !important;
    border: 1px solid #000; border-left-width: 4px !important;
    border-left-color: #000 !important;
    page-break-inside: avoid;
  }
  .report .verdict-banner .verdict-label { color: #000 !important; }
  .report .bottomline {
    background: #fff; border-left: 2px solid #000;
    padding: 8px 10px; font-size: 11pt;
  }
  .report .deadline-banner {
    background: #fff; border: 1px solid #999;
  }
  .report table.comps .subject-row td { background: #eee; }
  .report table.comps tfoot tr.summary td { background: #f4f4f4; }
  .report table.comps tfoot tr.summary.over  td:nth-last-child(2) { color: #000; font-weight: 700; }
  .report table.comps tfoot tr.summary.under td:nth-last-child(2) { color: #000; font-weight: 700; }
  .report table.comps tfoot tr.alt-head td,
  .report table.comps tfoot tr.alt-summary td {
    background: transparent; color: #444;
  }
  .report .conf-badge {
    background: #fff !important; color: #000 !important;
    border: 1px solid #000;
  }
  .report .purple-warning {
    background: #fff; border: 2px solid #000; border-left-width: 4px;
    color: #000;
  }
  /* HCAD links: render as plain account numbers on paper — no color, no
     arrow icon, no underline. The whole "open HCAD" interaction is
     screen-only. */
  .report .hcad-link { color: #000 !important; text-decoration: none !important; }
  .report .hcad-arrow { display: none; }
  /* Playbook callout: on paper, expose the URL string so a reader with
     only the printout knows where to go. Hide the color / anchor chrome. */
  .report .playbook-ref {
    background: #fff; border: 1px solid #000; border-left-width: 3px;
    padding: 10px 12px; font-size: 10pt; color: #000;
    page-break-inside: avoid;
  }
  .report .playbook-ref a { color: #000 !important; text-decoration: none !important; font-weight: 700; }
  .report .playbook-ref .playbook-url {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9pt;
    color: #000;
  }
  /* Street View is screen-only — a link isn't useful on paper. Hide
     the whole column in the comp table, and the inline link in the
     facts-table address row. */
  .report table.comps th.col-street,
  .report table.comps .sv-cell { display: none; }
  .report .sv-sep, .report .sv-link { display: none; }
  .report .limits-section {
    background: #fff; border-left: 2px solid #000;
    page-break-inside: avoid;
  }
  .report .thin-basket-note {
    background: #fff; border-left: 2px solid #000;
    page-break-inside: avoid;
  }
  /* Mini-map: hide the zoom control (useless on paper) but keep the
     attribution as required by the tile provider's terms. The tiles
     themselves rasterize fine on most browsers. */
  .report .comps-map-section { page-break-inside: avoid; }
  .report .comps-map .leaflet-control-zoom { display: none !important; }
  .report .comps-map .leaflet-control-attribution {
    font-size: 7pt; background: transparent; color: #666;
  }
  /* Distribution chart in B&W — keep bars distinguishable as grays
     (darker = more extreme bucket). */
  .chart-bar-red    { fill: #333 !important; }
  .chart-bar-yellow { fill: #888 !important; }
  .chart-bar-green  { fill: #bbb !important; }
  .chart-bar-purple { fill: #555 !important; }
  .chart-cutoff { stroke: #000 !important; }
  .chart-median { stroke: #000 !important; }
  .chart-median-label { fill: #000 !important; }
  a { color: #000; text-decoration: none; }
  @page { margin: 0.75in; }
}

/* ============================================================================
   Shared site footer (every page that isn't report.html / the old stats.html).
   ============================================================================ */
.site-footer {
  padding: 16px; margin-top: 24px;
  font-size: 12px; color: var(--mute);
  border-top: 1px solid var(--rule);
  background: #fff;
  text-align: center;
}
.site-footer a { color: #1b6fe6; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ============================================================================
   Document pages — Playbook, About, and (layered on top of .stats-page)
   the Appraisals + Appeals split pages. Article-style layout with a capped
   reading width, generous leading, and sectioned content blocks.
   ============================================================================ */
body.doc-page { background: var(--bg); }

.doc-container {
  flex: 1;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  /* Generous bottom padding so the last few sections have enough document
     below them to scroll up to the top of the viewport when their TOC
     anchor is clicked. Without this, near-bottom sections (Open source /
     Contact / Disclaimer on About) can't physically reach viewport-top
     because the document has no more content after them. */
  padding: 28px 20px 50vh;
  color: var(--ink);
  line-height: 1.6;
}
.doc-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.doc-lede {
  font-size: 16px; color: var(--mute);
  margin: 0 0 24px;
}
.doc-section {
  margin: 36px 0;
}
.doc-section > h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
/* Visual separator between consecutive sections on doc pages.
   First section is un-prefixed; every subsequent one gets a hairline
   divider + extra breathing room. The 32px margin-top sits OUTSIDE the
   section (between previous and current), so the section's top edge —
   which is what TOC anchors land on — still falls right where the
   heading is. No internal padding-top, otherwise anchor scroll lands
   below the heading. */
.doc-section + .doc-section {
  border-top: 1px solid var(--rule);
  margin-top: 32px;
  padding-top: 16px;
}
.doc-section > h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 8px;
}
.doc-section p { margin: 10px 0; }
.doc-section a { color: #1b6fe6; }
.doc-section code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; padding: 1px 5px; background: #f2f6fb;
  border-radius: 4px;
}
.doc-act-lede {
  font-size: 15px;
  color: var(--mute);
  font-style: italic;
  margin: 6px 0 16px;
}

/* In-page TOC at the top of long pages. Not sticky — scrolls away with the
   content. Pills wrap on narrow viewports. */
.doc-toc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 13px;
  margin: 18px 0 28px;
}
.doc-toc-label {
  color: var(--mute);
  font-weight: 600;
  margin-right: 6px;
}
.doc-toc a {
  color: #1b6fe6;
  text-decoration: none;
  padding: 4px 10px;
  background: #f2f6fb;
  border-radius: 999px;
  white-space: nowrap;
}
.doc-toc a:hover { background: #e3ecf7; }

/* Plain bulleted list with tight spacing — the default for in-prose callouts. */
.doc-plain-list {
  list-style: disc; padding-left: 22px; margin: 10px 0;
}
.doc-plain-list li { margin: 6px 0; }
.doc-plain-list li b { color: var(--ink); font-weight: 600; }

/* Numbered steps — used for the 3 filing channels, the hearing script, etc. */
.doc-numbered-list {
  list-style: decimal; padding-left: 22px; margin: 10px 0;
}
.doc-numbered-list li { margin: 10px 0; }
.doc-numbered-list li b { color: var(--ink); font-weight: 600; }

/* The 5-bucket color legend inside Playbook's "reading a pin" section —
   compact, single-line rows with the color dot inline. */
.doc-bucket-list {
  list-style: none; padding: 0; margin: 12px 0;
}
.doc-bucket-list li {
  padding: 6px 0;
  font-size: 14px;
}
.doc-bucket-list li .dot {
  width: 12px; height: 12px; margin-right: 8px;
  vertical-align: middle;
}

/* Indented sub-explainer that lives under a bucket bullet (currently the
   "No comps" row in both Playbook and the map's ?-popover). Reads as a
   visually subordinate "by the way, here's how the matching works"
   paragraph rather than competing with the bullet's own text. Plain
   text — just an indent and a slight color/size mute. */
.bucket-explainer {
  margin: 6px 0 4px 22px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mute);
}
.bucket-explainer b,
.bucket-explainer strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 720px) {
  .bucket-explainer {
    margin-left: 18px;
    font-size: 12px;
  }
}

/* May-15 deadline callout — prominent, warning-adjacent. */
.doc-deadline-banner {
  margin: 14px 0;
  padding: 14px 16px;
  background: #fff8e1;
  border-left: 4px solid var(--yellow);
  border-radius: 6px;
  font-size: 15px;
  color: var(--ink);
}
.doc-deadline-banner b { color: var(--ink); font-weight: 700; }

/* Glossary — definition-list styling. dt bold inline, dd muted below. */
.doc-glossary {
  margin: 14px 0;
  padding: 0;
}
.doc-glossary dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 14px;
  font-size: 14px;
}
.doc-glossary dt:first-child { margin-top: 0; }
.doc-glossary dd {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}
.doc-glossary dd a { color: #1b6fe6; }

/* FAQ — native <details>/<summary>. One question per row; the marker is a
   rotating chevron driven by open state. */
.doc-faq {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 8px;
  padding: 0;
}
.doc-faq > summary {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-faq > summary::-webkit-details-marker { display: none; }
.doc-faq > summary::before {
  content: "›";
  font-size: 18px;
  color: var(--mute);
  transition: transform 0.15s ease;
  display: inline-block;
}
.doc-faq[open] > summary::before { transform: rotate(90deg); }
.doc-faq > p {
  padding: 0 16px 14px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
}
.doc-faq > p a { color: #1b6fe6; }

/* The final disclaimer section on About — quieter, tight paragraphs. */
.doc-disclaimer p {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}
.doc-disclaimer p b { color: var(--ink); }

/* Appraisals hero accent — red-leaning to pair with the "over-assessment"
   story. Appeals uses green (defined further up). */
.stats-hero-appraisals { border-top: 3px solid var(--red); }
.stats-hero-appraisals .stats-hero-number { color: var(--red); }
.stats-hero-appraisals .stats-hero-number-sm { color: var(--red); }
.stats-hero-appeals .stats-hero-number-sm { color: var(--green); }

/* Secondary hero block on the Appraisals page: a smaller red number
   ($900M total) with its own explainer, sitting under the primary
   gap-number and separated by a hairline divider. Reads as a second
   data point in the same hero card, not a footnote. */
.stats-hero-secondary {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.stats-hero-number-sm {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stats-hero-label-sm {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.5;
}
.stats-hero-label-sm b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .stats-hero-number-sm { font-size: 24px; }
  .stats-hero-secondary { margin-top: 18px; padding-top: 18px; }
}

/* The Appraisals + Appeals pages share the site-nav chrome, but they
   also carry .stats-page for the pre-existing stats-specific rules. Both
   work together; the doc-page body class additionally provides the
   background. */
body.stats-page.doc-page .stats-container {
  /* Reset any bottom margin so the footer sits cleanly below. */
  padding-bottom: 24px;
}

/* Mobile tightening for all doc-page layouts. */
@media (max-width: 720px) {
  .doc-container { padding: 20px 16px 32px; }
  .doc-title { font-size: 24px; }
  .doc-lede { font-size: 15px; }
  .doc-section > h2 { font-size: 19px; }
  .doc-section > h3 { font-size: 15px; }
  .doc-toc { padding: 10px 12px; font-size: 12px; gap: 6px; }
  .doc-toc a { padding: 4px 8px; }
  .doc-deadline-banner { padding: 12px 14px; font-size: 14px; }
  .doc-faq > summary { padding: 10px 14px; font-size: 14px; }
  .doc-faq > p { padding: 0 14px 12px; font-size: 13px; }
}

/* Callout at the top of the report's Page 2 pointing readers to the
   Playbook for all the generic filing steps. Screen version is inline;
   print version exposes the URL since a paper reader has no way to click. */
.report .playbook-ref {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #f2f6fb;
  border-left: 3px solid #1b6fe6;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.report .playbook-ref a { color: #1b6fe6; font-weight: 600; }
.report .playbook-ref .playbook-url {
  display: none;
}

/* Print styling for the doc/stats pages. Hide navigation chrome and
   on-page TOC — printed output is the article itself, not the site. Force
   every FAQ <details> open so the printed Playbook includes all answers.
   Paper margins match the report page's @page rule. */
@media print {
  body.doc-page .site-nav,
  body.stats-page .site-nav,
  body.doc-page .site-footer,
  body.stats-page .site-footer,
  body.doc-page .doc-toc,
  body.stats-page .doc-toc {
    display: none !important;
  }
  body.doc-page .doc-container,
  body.stats-page .stats-container {
    max-width: none;
    margin: 0; padding: 0;
    font-size: 11pt; line-height: 1.4;
    color: #000;
  }
  body.doc-page a,
  body.stats-page a {
    color: #000; text-decoration: none;
  }
  body.doc-page .doc-faq {
    border: 1px solid #999; page-break-inside: avoid;
  }
  body.doc-page .doc-faq[open] > summary,
  body.doc-page .doc-faq > summary {
    list-style: none; font-weight: 700;
  }
  body.doc-page .doc-faq > summary::before {
    content: none;
  }
  /* Force all FAQ items open in print, regardless of user's onscreen state. */
  body.doc-page .doc-faq > p {
    display: block !important;
  }
  body.doc-page .doc-deadline-banner {
    background: #fff; border: 1px solid #000;
    page-break-inside: avoid;
  }
  body.doc-page .doc-section { page-break-inside: avoid; }
  body.doc-page h1, body.doc-page h2, body.doc-page h3 { page-break-after: avoid; }
  body.stats-page .stats-hero { background: #fff; border: 1px solid #000; }
  body.stats-page .stats-hero-number { color: #000 !important; }
  @page { margin: 0.75in; }
}

/* Force-open FAQ items when printing (details.open rule — browsers vary
   on whether @media print triggers open=true). Belt and suspenders with
   the display: block above. */
@media print {
  details.doc-faq { display: block; }
  details.doc-faq > p { display: block !important; }
}