/* ==========================================================
   4 Sale NC — v4.1 Stylesheet
   Organized, readable, maintainable CSS for Cloudflare Pages
   ========================================================== */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --blue:        #123f7a;
  --blue2:       #1f6bc1;
  --blue-hover:  #0f3566;
  --ink:         #17233c;
  --muted:       #64748b;
  --line:        #d9e2ef;
  --bg:          #f4f7fb;
  --card:        #ffffff;
  --soft:        #eaf3ff;
  --soft2:       #dbeafe;
  --good:        #0f766e;
  --warn:        #a16207;
  --danger:      #b91c1c;

  /* Badge colours */
  --badge-tax-bg:     #fef3c7;
  --badge-tax-color:  #92400e;
  --badge-county-bg:  #ede9fe;
  --badge-county-color: #5b21b6;
  --badge-upset-bg:   #fee2e2;
  --badge-upset-color:#991b1b;
  --badge-other-bg:   #f1f5f9;
  --badge-other-color:#334155;

  --badge-sold-bg:    #d1fae5;
  --badge-sold-color: #065f46;
  --badge-listed-bg:  #e0f2fe;
  --badge-listed-color: #0369a1;

  /* Radius & shadow */
  --radius-card: 18px;
  --radius-btn:  12px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-modal:0 24px 80px rgba(15, 23, 42, 0.28);
  --shadow-btn:  0 8px 18px rgba(18, 63, 122, 0.12);
  --shadow-btn-hover: 0 10px 24px rgba(18, 63, 122, 0.18);

  /* Transitions */
  --ease: 0.18s ease;
}

/* ----------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Aptos", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

a { color: inherit; }

p { margin: 0.5em 0; }

h1, h2, h3 { line-height: 1.15; }

code {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 0.85em;
}

/* ----------------------------------------------------------
   3. NAVIGATION / TOPBAR
   ---------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 48px);
  box-shadow: 0 4px 16px rgba(18, 63, 122, 0.06);
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.brand strong { display: block; color: var(--blue); line-height: 1; }
.brand small  { display: block; color: var(--muted); font-size: 0.75rem; }

.nav-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.nav-actions a {
  text-decoration: none;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius-pill);
  padding: 8px 11px;
  transition: background var(--ease), color var(--ease);
}

.nav-actions a:hover { background: var(--soft); color: var(--blue-hover); }

.nav-actions a.active {
  background: var(--soft);
  box-shadow: inset 0 0 0 1px #cfe2ff;
}

/* ----------------------------------------------------------
   4. HERO / SITE HEADER
   ---------------------------------------------------------- */
.site-header { background: linear-gradient(135deg, #fff 0%, #eef6ff 100%); }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 28px;
  align-items: center;
  max-width: 1180px;
  margin: auto;
  padding: 52px 20px;
}

.eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue2);
  font-weight: 800;
  font-size: 0.78rem;
  margin: 0 0 6px;
}

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  margin: 0.15em 0 0.4em;
  color: var(--blue);
}

.tagline { font-size: 1.05rem; color: #334155; max-width: 680px; }

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  align-items: stretch;
}

/* ----------------------------------------------------------
   5. HERO STATS PANEL
   ---------------------------------------------------------- */
.hero-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-grid div {
  background: var(--soft);
  border: 1px solid #cfe2ff;
  border-radius: 14px;
  padding: 16px;
}

.stat-grid strong {
  display: block;
  font-size: 2rem;
  color: var(--blue);
  line-height: 1;
}

.stat-grid span {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 4px;
  display: block;
}

/* Calendar page stat variant */
.cal-stats { max-width: 480px; }

/* ----------------------------------------------------------
   6. MAIN LAYOUT & PANELS
   ---------------------------------------------------------- */
main {
  max-width: 1180px;
  margin: auto;
  padding: 24px 20px 60px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin: 20px 0;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0.1em 0;
  color: var(--blue);
}

.section-heading h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.section-heading h2 { font-size: 1.6rem; }

.section-heading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.small  { color: var(--muted); font-size: 0.9rem; }
.muted  { color: var(--muted); }

/* ----------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--blue);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--blue);
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease),
              box-shadow var(--ease), transform var(--ease);
  line-height: 1.1;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  background: #f7fbff;
}

.button:active { transform: translateY(0); box-shadow: none; }

.button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.button.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }

.button.ghost {
  background: #fff;
  color: var(--blue);
  border-color: #bdd7f6;
}

.button.ghost:hover { background: var(--soft); }

.button.reset,
#resetBtn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.button.reset:hover,
#resetBtn:hover { background: #eef2f7; color: var(--blue); }

/* ----------------------------------------------------------
   8. LINK BUTTONS (external links in record rows/cards)
   ---------------------------------------------------------- */
.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  border: 1px solid #cfe2ff;
  background: #eef6ff;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease), border-color var(--ease),
              box-shadow var(--ease), transform var(--ease);
}

.link-btn:hover {
  background: var(--soft2);
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(31, 107, 193, 0.12);
  transform: translateY(-1px);
}

.link-btn:active { transform: translateY(0); }

.links-cell,
.record-links,
.detail-links { display: flex; gap: 6px; flex-wrap: wrap; }

/* ----------------------------------------------------------
   9. BADGES — Sale Type & Status
   ---------------------------------------------------------- */
.badge {
  background: var(--soft);
  color: var(--blue);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  font-weight: 800;
  font-size: 0.78rem;
}

.sale-type-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Sale type variants */
.sale-tax    { background: var(--badge-tax-bg);    color: var(--badge-tax-color); }
.sale-county { background: var(--badge-county-bg); color: var(--badge-county-color); }
.sale-upset  { background: var(--badge-upset-bg);  color: var(--badge-upset-color); }
.sale-other  { background: var(--badge-other-bg);  color: var(--badge-other-color); }

/* Status variants */
.status-upset  { background: var(--badge-upset-bg);  color: var(--badge-upset-color); }
.status-sold   { background: var(--badge-sold-bg);   color: var(--badge-sold-color); }
.status-listed { background: var(--badge-listed-bg); color: var(--badge-listed-color); }
.status-other  { background: var(--badge-other-bg);  color: var(--badge-other-color); }

/* ----------------------------------------------------------
   10. DASHBOARD CARDS
   ---------------------------------------------------------- */
.county-grid,
.dashboard-grid,
.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.county-card,
.action-card,
.source-card {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.county-card:hover,
.action-card:hover,
.source-card:hover {
  transform: translateY(-2px);
  border-color: #b7d3f4;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.county-card-hero {
  position: relative;
  overflow: hidden;
}

.county-card-hero span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  background: #eff6ff;
  border-radius: 999px;
  margin-bottom: 12px;
}

.county-card-hero strong {
  display: block;
  font-size: 1.15rem;
  margin: 0 0 6px;
}

.county-card-hero small {
  display: block;
  margin-top: 6px;
}

.county-card span { color: var(--muted); font-weight: 800; font-size: 0.9rem; }

.county-card strong {
  display: block;
  font-size: 2.2rem;
  color: var(--blue);
  margin: 6px 0 4px;
  line-height: 1;
}

.county-card small { color: var(--muted); font-size: 0.82rem; }

.action-card h3,
.source-card h3 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 1.05rem;
}

.action-card p,
.source-card p { color: var(--muted); margin: 0; font-size: 0.9rem; }

.version-panel p { color: var(--muted); max-width: 760px; }

/* Breakdown rows */
.breakdown {
  display: grid;
  gap: 8px;
}

.breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 0.9rem;
}

/* ----------------------------------------------------------
   11. RECORDS TABLE — FILTERS
   ---------------------------------------------------------- */
.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.records-toolbar {
  position: sticky;
  top: 64px;
  z-index: 8;
  margin-bottom: 16px;
}

.records-sticky {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  padding: 14px;
}

.controls-actions {
  display: flex;
  align-items: end;
}

.records-summarybar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  margin-top: 12px;
}

.records-summarybar strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.records-summarybar span {
  color: var(--muted);
  font-size: 0.84rem;
}

.records-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.records-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
}

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.records-browse-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
}

.density-toggle {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  padding: 3px;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
  background: #f8fbff;
}

.chip {
  appearance: none;
  border: 1px solid #cfe2ff;
  background: #f5faff;
  color: var(--blue);
  border-radius: 999px;
  min-height: 40px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.chip:hover,
.chip:focus-visible {
  background: #eaf4ff;
  border-color: #9fc2ea;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.chip.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.controls input,
.controls select,
.lock-panel input,
.filter-inline select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
}

.filter-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.filter-inline select { width: auto; min-width: 120px; }

.record-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.record-summary strong { color: var(--ink); }

/* ----------------------------------------------------------
   12. RECORDS TABLE
   ---------------------------------------------------------- */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.table-wrap::before,
.table-wrap::after {
  content: '';
  position: sticky;
  top: 0;
  height: 100%;
  width: 18px;
  pointer-events: none;
  z-index: 2;
}

.table-wrap::before {
  left: 0;
  float: left;
  margin-right: -18px;
  background: linear-gradient(90deg, rgba(244,247,251,0.95), rgba(244,247,251,0));
}

.table-wrap::after {
  right: 0;
  float: right;
  margin-left: -18px;
  background: linear-gradient(270deg, rgba(244,247,251,0.95), rgba(244,247,251,0));
}

.records-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1040px;
}

.records-table th {
  position: sticky;
  top: 0;
  background: #eaf3ff;
  color: var(--blue);
  z-index: 1;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.records-table th,
.records-table td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  vertical-align: middle;
}

body[data-records-density="compact"] .records-table th,
body[data-records-density="compact"] .records-table td {
  padding: 7px 10px;
}

body[data-records-density="compact"] .records-table {
  font-size: 0.9rem;
}

.records-table tbody tr:last-child td { border-bottom: none; }

.records-table small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.78rem;
}

.col-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.col-updated { font-size: 0.8rem; color: var(--muted); }
.col-name { max-width: 260px; }

.no-links { color: var(--muted); font-size: 0.82rem; }

/* Clickable rows */
.record-row { cursor: pointer; }

.record-row td:first-child { border-left: 3px solid transparent; }

.record-row:hover td { background: #f8fbff; }

.record-row:hover td:first-child { border-left-color: var(--blue2); }

.record-row:focus-visible td { background: #eef6ff; }
.record-row:focus-visible td:first-child { border-left-color: var(--blue2); }

.record-row[aria-selected="true"] td {
  background: #eef6ff;
}

.record-row[aria-selected="true"] td:first-child {
  border-left-color: var(--blue);
}

.record-row[aria-selected="true"]:hover td {
  background: #eaf4ff;
}

.links-cell { min-width: 160px; }

.record-cards {
  display: none;
  gap: 12px;
  margin: 10px 0 16px;
}

.record-tile {
  cursor: pointer;
  padding: 16px;
  gap: 12px;
}

.record-card-head h3 {
  margin: 6px 0 4px;
  color: var(--blue);
  font-size: 1.02rem;
}

.record-address {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.record-tile .mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-secondary { opacity: 0.98; }

/* Empty state row */
.empty-state {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--muted);
}

.empty-state span { display: block; font-size: 1rem; font-weight: 700; color: #475569; }
.empty-state small { display: block; margin-top: 6px; font-size: 0.85rem; }

/* ----------------------------------------------------------
   13. RECORD MODAL
   ---------------------------------------------------------- */
body.modal-open { overflow: hidden; }

.record-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.55);
  display: grid;
  place-items: center;
  padding: 18px;
}

.record-modal[hidden] { display: none; }

.record-modal:not([hidden]) { animation: modalFadeIn 160ms ease; }

.record-modal-panel {
  position: relative;
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-modal);
  padding: 28px;
  animation: modalPopIn 180ms ease;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  transition: background var(--ease), transform var(--ease), border-color var(--ease);
}

.modal-close:hover { background: #eef6ff; border-color: #b7d3f4; transform: translateY(-1px); }

/* Property detail inside modal */
.property-detail-head { margin-bottom: 10px; }

.detail-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.detail-verification {
  background: #ecfeff;
  color: #155e75;
  border: 1px solid #99f6e4;
}

.property-detail h2 {
  margin: 0.3rem 0 0.5rem;
  color: var(--blue);
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.detail-legal { color: var(--muted); margin-bottom: 14px; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.detail-section-grid {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.detail-data-section {
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.detail-data-section h3 {
  margin: 0;
  color: var(--blue);
  font-size: 0.98rem;
}

.detail-grid div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
}

.detail-grid dt {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-grid dd {
  margin: 4px 0 0;
  font-weight: 800;
  color: var(--ink);
  word-break: break-word;
  font-size: 0.95rem;
}

.detail-links { margin: 14px 0; }

.detail-links-section {
  background: #f8fbff;
  border: 1px solid #dbe7f5;
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0;
}

.detail-links-section h3 {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 0.98rem;
}

.detail-trust {
  margin-top: 12px;
}

.detail-verified-line {
  margin: 10px 0 0;
}

.detail-notes {
  background: var(--soft);
  border: 1px solid #cfe2ff;
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}

.detail-notes strong { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue); }
.detail-notes p { margin: 6px 0 0; color: #334155; font-size: 0.9rem; }

.detail-disclaimer {
  color: var(--muted);
  font-size: 0.82rem;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 14px;
}

/* ----------------------------------------------------------
   14. CALENDAR
   ---------------------------------------------------------- */
.calendar-date {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin: 14px 0;
  padding: 16px 20px;
}

.calendar-date h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--blue);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
}

.calendar-date h3 span {
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
}

.calendar-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.calendar-item-body { flex: 1; min-width: 0; }

.calendar-item-body strong { display: block; font-size: 0.95rem; }

.calendar-item-body small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.82rem;
}

.calendar-item-body code { display: inline-block; margin-top: 4px; }

.cal-legal {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
  font-style: italic;
}

/* ----------------------------------------------------------
   15. LOCK / AUTH PANEL
   ---------------------------------------------------------- */
.lock-panel {
  max-width: 560px;
  margin: 40px auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.lock-panel h1 { color: var(--blue); margin: 8px 0 12px; }

.lock-panel input {
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 1.2rem;
}

.lock-panel .button { width: 100%; }

.notice {
  background: #fff8e1;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px;
  color: #78450f;
  font-size: 0.9rem;
}

/* ----------------------------------------------------------
   16. ADMIN AUDIT
   ---------------------------------------------------------- */
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}

.metric-card {
  background: var(--soft);
  border: 1px solid #cfe2ff;
  border-radius: 14px;
  padding: 16px;
}

.metric-card strong {
  display: block;
  font-size: 2rem;
  color: var(--blue);
  line-height: 1;
}

.metric-card span { color: var(--muted); font-size: 0.85rem; margin-top: 4px; display: block; }

/* ----------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid #dbe7f5;
  background: #f8fbff;
  color: #47637f;
  padding: 22px 18px;
  text-align: center;
}

.footer-inner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.footer-inner span,
.footer-inner a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.footer-inner a {
  color: #0b5cad;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #cfe0f4;
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  background: #fff;
  transition: background var(--ease), border-color var(--ease);
}

.footer-inner a:hover { background: #eaf4ff; border-color: #9fc2ea; }

/* ----------------------------------------------------------
   18. DISCLAIMER
   ---------------------------------------------------------- */
.disclaimer-panel { padding: 14px 24px; }

.disclaimer {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
}

/* ----------------------------------------------------------
   19. FOCUS & ACCESSIBILITY
   ---------------------------------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
.record-row:focus-visible {
  outline: 3px solid rgba(31, 107, 193, 0.4);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   20. RECORD CARD (grid view — used in calendar fallback etc.)
   ---------------------------------------------------------- */
.record-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.media {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: #537eaa;
  min-height: 100px;
}

.media.land       { background: #27726a; }
.media.house      { background: #8057a2; }
.media.storage    { background: #8a5b1f; }
.media.commercial { background: #435aa8; }

.record-body { padding: 16px; }
.record-body h3 { margin: 8px 0; color: var(--blue); }

.record-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.mini-grid div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px;
}

.mini-grid dt { color: var(--muted); font-size: 0.74rem; }
.mini-grid dd { margin: 0; font-weight: 800; }

/* ----------------------------------------------------------
   21. PRINT STYLES
   ---------------------------------------------------------- */
@media print {
  .topbar, .button, .controls, .site-footer, .record-modal { display: none; }
  .panel, .calendar-date { box-shadow: none; border-color: #999; }
  body { background: #fff; }
}

/* ----------------------------------------------------------
   22. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .hero-panel { order: -1; }
}

@media (max-width: 760px) {
  .nav-actions a { font-size: 0.82rem; padding: 7px 8px; }
  .record-card { grid-template-columns: 1fr; }
  .media { height: 70px; }
  .section-heading { display: block; }
  .section-heading-actions { margin-top: 12px; }
  .calendar-item { display: block; }
  .calendar-item .record-links { margin-top: 10px; }
  .button { width: 100%; min-height: 44px; }
  .hero-actions .button { width: auto; }
  .links-cell { min-width: 140px; }
  .controls {
    grid-template-columns: 1fr;
  }
  .records-toolbar {
    top: 56px;
  }
  .records-sticky {
    padding: 12px;
  }
  .records-summarybar {
    flex-direction: column;
    align-items: flex-start;
  }
  .records-meta {
    justify-content: flex-start;
  }
  .records-browse-row {
    flex-direction: column;
  }
  .density-toggle {
    width: 100%;
  }
  .density-toggle .chip {
    flex: 1;
  }
  .controls-actions {
    align-items: stretch;
  }
  .controls .button,
  .controls .controls-actions .button {
    width: 100%;
  }
  .record-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .record-cards {
    display: grid;
  }
  .table-wrap {
    display: none;
  }
  .records-table th:nth-child(4),
  .records-table td:nth-child(4),
  .records-table th:nth-child(7),
  .records-table td:nth-child(7),
  .records-table th:nth-child(8),
  .records-table td:nth-child(8),
  .records-table th:nth-child(10),
  .records-table td:nth-child(10),
  .records-table th:nth-child(11),
  .records-table td:nth-child(11) {
    display: none;
  }
  .record-modal {
    padding: 0;
    place-items: stretch;
  }
  .record-modal-panel {
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    padding: 14px 14px 22px;
  }
  .modal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-bottom: 8px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-links,
  .record-links {
    gap: 8px;
  }
  .link-btn {
    width: 100%;
  }
  .county-card-hero {
    padding: 16px;
  }
  .county-card-hero strong {
    font-size: 1rem;
  }
  .county-directory-hero .stat-grid {
    grid-template-columns: 1fr;
  }
  .detail-links-section {
    padding: 12px;
  }
}

/* ----------------------------------------------------------
   v4.2 additions
   ---------------------------------------------------------- */

/* Validation warning block inside property detail modal */
.validation-warning {
  background: #fff8e1;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 0.84rem;
  color: #78450f;
}

.validation-warning strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.validation-warning ul {
  margin: 0;
  padding-left: 18px;
}

.validation-warning li { margin: 2px 0; }

/* Validation error badge in admin audit table */
.validation-error {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.76rem;
  font-weight: 700;
  margin: 2px 2px 2px 0;
}

/* ----------------------------------------------------------
   v4.3 additions — County plugin system
   ---------------------------------------------------------- */

/* Staged county cards in expansion pipeline section */
.staged-card {
  border-style: dashed;
  opacity: 0.85;
  position: relative;
}

.staged-badge {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   v4.9 additions — Mobile records optimization, table scroll cues,
   source directory, unified search
   ---------------------------------------------------------- */

/* County hero */
.county-hero .stat-grid { margin-top: 16px; max-width: 600px; }

/* Source directory grid */
.source-directory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.source-directory-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.source-directory-item:hover {
  transform: translateY(-2px);
  border-color: #b7d3f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.source-directory-item strong { color: var(--blue); font-size: 0.95rem; }
.source-directory-item span   { color: var(--muted); font-size: 0.82rem; }

.bid-contact-note {
  grid-column: 1 / -1;
  background: var(--soft);
  border: 1px solid #cfe2ff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 4px;
}

.bid-contact-note strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 4px;
}

.bid-contact-note p { margin: 0; color: #334155; font-size: 0.9rem; }

/* Public property card grid (county landing pages) */
.public-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.public-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.public-card:hover {
  transform: translateY(-2px);
  border-color: #b7d3f4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.public-card-head {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.public-card h3 {
  margin: 0;
  color: var(--blue);
  font-size: 1.02rem;
  line-height: 1.3;
}

.public-card-address {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.public-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 4px 0;
}

.public-card-grid div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
}

.public-card-grid dt {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.public-card-grid dd {
  margin: 2px 0 0;
  font-weight: 800;
  font-size: 0.88rem;
  word-break: break-word;
}

/* Unified search box (dashboard) */
.unified-search {
  display: flex;
  gap: 10px;
  margin: 0;
  flex: 1 1 340px;
  min-width: min(100%, 340px);
  max-width: 720px;
}

.unified-search input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
  background: #fff;
  min-width: 0;
}

.unified-search input:focus-visible {
  outline: 3px solid rgba(31, 107, 193, 0.25);
  outline-offset: 1px;
}

/* County source grid links on dashboard (clickable county cards already exist;
   this styles the "County Pages" quick links if used) */
.county-page-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .public-card-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions { gap: 10px; }
  .hero-actions > .button,
  .hero-actions > .unified-search {
    width: 100%;
    flex-basis: 100%;
    max-width: none;
  }
  .unified-search { flex-direction: column; }
  .unified-search .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   SECTION 23 — Watchlist star (v4.9.9)
   Per-device watchlist toggle on records table + cards.
   ============================================================ */
.watch-star{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:1.15rem;line-height:1;padding:.15rem .3rem;border-radius:var(--radius-btn);
  color:var(--muted);transition:color var(--ease,.15s),transform var(--ease,.15s),background var(--ease,.15s);
}
.watch-star:hover{color:var(--warn,#c8860a);background:var(--soft);}
.watch-star:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.watch-star.is-watched{color:var(--warn,#e0a106);}
.watch-star:active{transform:scale(.9);}
th.col-watch,td.col-watch{width:2.2rem;text-align:center;padding-left:.25rem;padding-right:.25rem;}
.record-top .watch-star{margin-left:auto;}
.record-top{display:flex;align-items:center;gap:.4rem;}
.share-btn{cursor:pointer;}
/* WCAG 2.2 / iOS HIG / Android: 44px floor for high-frequency controls on touch. */
@media (pointer: coarse){
  .watch-star{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;}
  th.col-watch,td.col-watch{width:44px;}
  .share-btn{min-height:44px;}
}

/* ============================================================
   SECTION 24 — v5.1-Stable record-view stabilization
   ============================================================ */
.record-modal-title{margin:0 2.5rem .75rem 0;font-size:1.35rem;line-height:1.25;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* County card open affordance + View Record */
.public-card{cursor:pointer;}
.public-card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.75rem;}
.click-to-open{font-size:.8rem;color:var(--muted);}
.view-record-btn{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;cursor:pointer;}
@media (pointer: coarse){ .view-record-btn{min-height:44px;} }
.calendar-item .view-record-btn{margin-left:auto;}


/* ----------------------------------------------------------
   SECTION 25 — v5.1-Stable desktop record-width stabilization
   ----------------------------------------------------------
   Purpose: keep the restored Cloudflare route structure intact while making
   the Records page and full record modal use desktop width correctly.
*/

.records-main {
  max-width: min(1580px, calc(100vw - 32px));
  padding-left: 16px;
  padding-right: 16px;
}

.records-panel {
  overflow: visible;
}

.records-main .table-wrap {
  width: 100%;
}

.records-main .records-table {
  min-width: 1280px;
}

.records-main .col-name {
  max-width: 380px;
}

.records-main .links-cell {
  min-width: 230px;
}

.records-main .links-cell .link-btn {
  margin: 2px 3px 2px 0;
}

.record-modal {
  padding: clamp(18px, 2.2vw, 36px);
  place-items: center;
}

.record-modal-panel {
  width: min(1280px, calc(100vw - 56px));
  max-width: 1280px;
  max-height: 92vh;
  padding: clamp(26px, 2.8vw, 42px);
}

#recordModalBody,
.property-detail {
  width: 100%;
  max-width: none;
}

.property-detail-head {
  padding-right: 54px;
}

.detail-section-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.detail-data-section {
  min-width: 0;
}

.detail-data-section .detail-grid {
  grid-template-columns: 1fr;
}

.detail-grid dd {
  overflow-wrap: anywhere;
  word-break: normal;
}

.detail-links {
  align-items: center;
}

.detail-links-section .link-btn,
.detail-links-section .share-btn {
  width: auto;
}

@media (max-width: 1180px) {
  .record-modal-panel {
    width: min(1060px, calc(100vw - 36px));
    padding: 24px;
  }
  .detail-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .records-main {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
  .record-modal {
    padding: 0;
    place-items: stretch;
  }
  .record-modal-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    padding: 14px 14px 22px;
  }
  .property-detail-head {
    padding-right: 0;
  }
  .detail-section-grid {
    grid-template-columns: 1fr;
  }
  .detail-links-section .link-btn,
  .detail-links-section .share-btn {
    width: 100%;
  }
}


/* ============================================================
   SECTION 26 — v5.1-Stable menu and records UI cleanup
   ============================================================ */

/* Admin is intentionally omitted from the top navigation. Footer remains the admin entry point. */
.nav-actions {
  gap: 8px;
}

.nav-actions a {
  padding-left: 12px;
  padding-right: 12px;
}

/* Records listings now rely on direct row/card click instead of a View Record button. */
.records-main .records-table {
  min-width: 1180px;
}

.records-main .links-cell {
  min-width: 142px;
  gap: 8px;
}

.records-table tbody tr {
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}

.record-row:hover td {
  background: #f3f9ff;
}

.record-row:hover .col-name {
  color: var(--blue);
}

.record-row:hover td:first-child {
  border-left-color: var(--blue);
}

.record-row:focus-visible td {
  background: #eef6ff;
}

.record-row:focus-visible .col-name {
  color: var(--blue);
}

.record-card.record-tile {
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease), background var(--ease);
}

.record-card.record-tile:hover,
.record-card.record-tile:focus-visible {
  border-color: #b8d6fa;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
  background: #fbfdff;
}

.record-card-foot {
  justify-content: flex-start;
  border-top: 1px solid #e7eef8;
  padding-top: 10px;
}

.click-to-open {
  color: var(--blue);
  font-weight: 800;
}

.click-to-open::before {
  content: '↗';
  margin-right: 6px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .records-main .records-table {
    min-width: 1040px;
  }
}

/* ============================================================
   SECTION 27 — v5.1-Stable Records scale and county directory inline UI
   ============================================================ */

/* Records page: keep Source / GIS / Tax links on one readable inline row. */
.records-main .links-cell,
.records-main .record-links,
.records-main .mobile-priority dd {
  align-items: center;
}

.records-main .links-cell {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 176px;
  white-space: nowrap;
}

.records-main .links-cell .link-btn {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 0.74rem;
  line-height: 1;
}

.record-card .mini-grid dd .link-btn {
  display: inline-flex;
  width: auto;
  min-height: 31px;
  padding: 6px 10px;
  margin: 2px 4px 2px 0;
}

/* Records scale control: Large / Comfortable / Compact. */
.scale-toggle {
  align-items: center;
}

.scale-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 4px 0 8px;
  white-space: nowrap;
}

body[data-records-density="large"] .records-main .records-table {
  min-width: 1380px;
  font-size: 1rem;
}

body[data-records-density="large"] .records-table th,
body[data-records-density="large"] .records-table td {
  padding: 15px 14px;
}

body[data-records-density="large"] .records-table small {
  font-size: 0.82rem;
  margin-top: 5px;
}

body[data-records-density="large"] .records-main .links-cell {
  min-width: 196px;
  gap: 6px;
}

body[data-records-density="large"] .records-main .links-cell .link-btn {
  min-height: 34px;
  padding: 8px 11px;
  font-size: 0.78rem;
}

body[data-records-density="large"] .record-card.record-tile {
  font-size: 1.02rem;
}

body[data-records-density="large"] .record-card.record-tile h3 {
  font-size: 1.12rem;
}

body[data-records-density="large"] .record-card .mini-grid div {
  padding: 11px;
}

body[data-records-density="compact"] .records-main .links-cell {
  min-width: 150px;
  gap: 4px;
}

body[data-records-density="compact"] .records-main .links-cell .link-btn {
  min-height: 26px;
  padding: 5px 7px;
  font-size: 0.7rem;
}

/* County directory: v5.1-Stable restores the requested stacked section layout while
   keeping only the summary metrics inline on desktop. */
.county-directory-panel {
  display: grid;
  gap: 24px;
}

.county-directory-section {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.county-directory-hero {
  margin: 0;
}

.county-directory-hero .county-stat-strip,
.county-stat-strip-inline {
  max-width: 720px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.section-heading-compact {
  margin-bottom: 0;
}

.section-heading-compact h2 {
  margin: 0.15em 0 0.2em;
  color: var(--blue);
}

.county-grid-inline,
.source-grid-inline {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.county-grid-inline .county-card,
.source-grid-inline .source-card {
  padding: 15px;
  box-shadow: none;
}

.county-grid-inline .county-card-hero strong,
.source-grid-inline .source-card h3 {
  font-size: 1rem;
}

.source-grid-inline .source-card p {
  margin: 6px 0;
}

@media (max-width: 760px) {
  .records-browse-row {
    flex-direction: column;
  }

  .scale-toggle {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 18px;
  }

  .scale-toggle .chip {
    flex: 1 1 auto;
    min-width: 108px;
  }

  .records-main .links-cell {
    min-width: 160px;
  }

  body[data-records-density="large"] .records-main .records-table,
  .records-main .records-table {
    min-width: 1080px;
  }

  .county-directory-hero .county-stat-strip {
    grid-template-columns: 1fr;
  }

  .county-directory-section {
    gap: 12px;
  }
}

/* ----------------------------------------------------------
   v5.1-Stable — Counties section spacing correction
   ---------------------------------------------------------- */
.county-directory-spaced {
  display: grid;
  gap: 18px;
}

.county-directory-spaced > .panel {
  margin: 0;
}

.county-directory-primary-panel {
  gap: 20px;
}

.county-directory-primary-panel > .section-heading {
  margin-bottom: 4px;
}

.county-directory-secondary-panel {
  padding-top: 22px;
}

@media (max-width: 760px) {
  .county-directory-spaced {
    gap: 14px;
  }

  .county-directory-secondary-panel {
    padding-top: 20px;
  }
}

/* ----------------------------------------------------------
   v5.1-Stable — Counties summary placement correction
   ---------------------------------------------------------- */
.county-summary-under-heading {
  margin-top: 6px;
  margin-bottom: 2px;
}

.county-directory-primary-panel > .county-summary-under-heading + .operating-counties-section {
  margin-top: 2px;
}

@media (max-width: 760px) {
  .county-summary-under-heading {
    margin-top: 4px;
    margin-bottom: 0;
  }
}