:root {
  --blue-900: #17324d;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --teal-700: #0f766e;
  --teal-50: #ecfdf5;
  --red-50: #fef2f2;
  --red-700: #b91c1c;
  --slate-950: #0f172a;
  --slate-700: #334155;
  --slate-500: #64748b;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #fff;
  --max: 1180px;
  --radius: 8px;
  --shadow: 0 8px 24px rgb(15 23 42 / 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--slate-50);
  color: var(--slate-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

input, select, textarea, button { font: inherit; }

.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Buttons are inline-flex and space their own icons. A plain link is not, so an
   inline SVG would sit on the baseline and ride low against the text. */
a:not(.btn) > .icon { vertical-align: -0.18em; margin-right: 6px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 68px;
  padding: 0 clamp(16px, 5vw, 56px);
  border-bottom: 1px solid var(--slate-200);
  background: rgb(255 255 255 / 0.96);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-900);
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--white);
  background: var(--blue-600);
  border-radius: var(--radius);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--slate-700);
  font-size: .93rem;
  font-weight: 650;
  margin-left: auto;
}

.main-nav a:hover { color: var(--blue-700); }

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  min-height: 42px;
  padding: 10px 16px;
  font-weight: 750;
  cursor: pointer;
}

.header-cta,
.btn.primary {
  background: var(--blue-600);
  color: var(--white);
}

.btn.secondary {
  color: var(--blue-700);
  border-color: var(--blue-600);
  background: var(--white);
}

.btn.ghost {
  color: var(--slate-700);
  border-color: var(--slate-200);
  background: var(--white);
}

.menu-button {
  display: none;
  background: transparent;
  border: 0;
  color: var(--blue-900);
}

.mobile-nav {
  display: none;
  padding: 12px 16px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
}

.mobile-nav a {
  display: block;
  padding: 11px 4px;
  color: var(--slate-700);
  font-weight: 700;
}

.hero,
.page-hero,
.clinic-hero,
.wizard {
  padding: clamp(42px, 7vw, 84px) clamp(16px, 5vw, 56px);
}

.hero {
  background:
    linear-gradient(120deg, rgb(23 50 77 / .96), rgb(29 78 216 / .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18'%3E%3Cpath d='M96 80h608M96 160h608M96 240h608M96 320h608M160 32v336M320 32v336M480 32v336M640 32v336'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--white);
}

.hero-copy,
.section,
.page-hero > *,
.clinic-hero > *,
.wizard > *,
.results-layout,
.detail-grid,
.article-layout,
.footer-grid,
.footer-disclaimer {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}

.hero-copy { max-width: 900px; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--teal-700);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  font-size: .78rem;
}

.hero .eyebrow { color: #a7f3d0; }

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 16px;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.15; margin-bottom: 12px; }
h3 { font-size: 1.15rem; line-height: 1.25; }
p { color: var(--slate-700); }
.hero p { color: #dbeafe; font-size: 1.12rem; }

.search-panel {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 10px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  color: var(--slate-500);
  background: var(--white);
}

.search-input input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  color: var(--slate-950);
}

.quick-links,
.tags,
.card-actions,
.clinic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-links { margin-top: 18px; }

.quick-links a {
  color: var(--white);
  background: rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .25);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}

.trust-bar {
  padding: 16px clamp(16px, 5vw, 56px);
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 70px);
  flex-wrap: wrap;
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
}

.trust-bar span,
.freshness,
.address,
.source-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.trust-bar span { color: var(--slate-700); font-weight: 750; }

.section {
  padding: clamp(34px, 5vw, 68px) clamp(16px, 5vw, 56px);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr);
  gap: 28px;
  align-items: center;
}

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

.section-heading a,
.article-card a {
  color: var(--blue-700);
  font-weight: 800;
}

.steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li,
.panel,
.clinic-card,
.article-card,
.service-card,
.state-card,
.option-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgb(15 23 42 / .04);
}

.steps li {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 750;
}

.steps span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--white);
  background: var(--teal-700);
}

.service-grid,
.state-grid,
.article-grid,
.option-grid,
.fact-grid,
.mini-grid {
  display: grid;
  gap: 14px;
}

.service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.state-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.service-card,
.state-card,
.article-card,
.option-card {
  padding: 18px;
}

.service-card strong,
.state-card strong,
.option-card {
  display: block;
  color: var(--blue-900);
  font-weight: 850;
}

.service-card span,
.state-card span {
  display: block;
  margin-top: 6px;
  color: var(--slate-500);
}

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

.city-list a,
.mini-grid span,
.fact-grid span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--slate-200);
  background: var(--white);
}

.fact-grid span svg { flex: none; }

.results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr);
  gap: 24px;
  padding: 28px clamp(16px, 5vw, 56px) 68px;
  align-items: start;
}

.results-layout.single-column { grid-template-columns: minmax(0, 820px); }

.wizard-selection,
.answer-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-selection a { color: var(--blue-700); font-weight: 800; }

.answer-summary { margin: 18px 0; }
.answer-summary span {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--teal-700);
  background: var(--teal-50);
  border: 1px solid #99f6e4;
  font-weight: 800;
}

.results-main,
.detail-main {
  display: grid;
  gap: 16px;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
}

.filters a {
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--slate-700);
  font-weight: 750;
  font-size: .9rem;
}

.filters .active {
  color: var(--white);
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.clinic-card {
  padding: 20px;
  display: grid;
  gap: 12px;
}

.card-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.clinic-card h3 { margin: 0; color: var(--blue-900); }

.freshness {
  color: var(--slate-500);
  background: var(--slate-100);
  padding: 5px 8px;
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

.address {
  align-items: flex-start;
  color: var(--slate-700);
}

.address span { color: var(--slate-500); }
.address .distance { margin-left: auto; white-space: nowrap; }

.tags span {
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--teal-50);
  color: var(--teal-700);
  border: 1px solid #99f6e4;
  font-weight: 800;
  font-size: .84rem;
}

.source-note {
  color: var(--slate-500);
  font-size: .9rem;
}

.map-panel {
  position: sticky;
  top: 92px;
  min-height: 520px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgb(236 253 245 / .9), rgb(239 246 255 / .95)),
    repeating-linear-gradient(45deg, transparent, transparent 18px, rgb(37 99 235 / .08) 18px, rgb(37 99 235 / .08) 20px);
  display: block;
  overflow: hidden;
  color: var(--blue-900);
}

.map-panel.small { min-height: 260px; position: static; }

.directory-map {
  width: 100%;
  min-height: inherit;
  height: 100%;
}

.map-fallback {
  min-height: inherit;
  margin: 0;
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.leaflet-popup-content strong,
.leaflet-popup-content p,
.leaflet-popup-content a { display: block; }
.leaflet-popup-content p { margin: 6px 0; color: var(--slate-600); }
.leaflet-popup-content a { color: var(--blue-600); font-weight: 800; }

/* Clinic and school hero.
   Not a photograph, deliberately. This block sits directly under a real clinic's
   name and address, and a stock dental interior there reads as a picture of that
   clinic -- the rule the fetcher, Illustrations and topic_art() all state, and the
   same failure as filling an unknown field by inference. Blurring softens it but
   does not remove it: the reader still sees "a clinic photo" and attributes it to
   the name above. A tinted wash and the faint grid from the homepage hero give the
   block the same visual weight while depicting nothing. */
.clinic-hero {
  background:
    radial-gradient(120% 150% at 8% -10%, rgb(37 99 235 / .10), transparent 60%),
    radial-gradient(100% 130% at 92% 0%, rgb(15 118 110 / .09), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400'%3E%3Cg fill='none' stroke='%230f172a' stroke-opacity='.05'%3E%3Cpath d='M96 80h608M96 160h608M96 240h608M96 320h608M160 32v336M320 32v336M480 32v336M640 32v336'/%3E%3C/g%3E%3C/svg%3E"),
    var(--white);
  border-bottom: 1px solid var(--slate-200);
}

/* A clinic name is not a headline: the global h1 tops out at 4rem, which is sized
   for "Find Affordable Dental Care Near You" and not for "Metropolitan Family
   Health Network, Inc. at West New York". Measured over the 3,203 published names,
   67% wrap to two lines or more at 4rem and 8% to three or more. The guides were
   brought down for the same reason; these pages were missed. */
.clinic-hero h1 {
  font-size: clamp(1.65rem, 3.1vw, 2.45rem);
  line-height: 1.12;
  text-wrap: balance;
}

.clinic-title,
.detail-grid,
.article-layout {
  display: grid;
  gap: 24px;
}

.clinic-title {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  color: var(--slate-500);
  font-size: .9rem;
  margin-bottom: 18px;
}

.breadcrumb a { color: var(--blue-700); font-weight: 750; }

.detail-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  padding: 28px clamp(16px, 5vw, 56px) 68px;
  align-items: start;
}

.detail-side {
  display: grid;
  gap: 16px;
}

.panel { padding: 20px; }
.empty-state { text-align: center; padding: 40px 24px; }
.panel h2 { font-size: 1.25rem; }
.panel p:last-child { margin-bottom: 0; }
.data-panel strong { color: var(--slate-950); }

.wizard {
  min-height: 68vh;
  background: var(--white);
}

/* Keep the shorter reading measure without re-centring it: .wizard > * already
   centres every child inside --max, so a narrower max-width with auto margins
   pushed the h1 about 180px right of the eyebrow above it. */
.wizard h1 {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}

.option-card {
  min-height: 78px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.narrow-list { max-width: 900px; }

.calculator {
  max-width: 760px;
  display: grid;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
}

.calculator label {
  display: grid;
  gap: 6px;
  color: var(--slate-700);
  font-weight: 750;
}

.contact-form { display: grid; gap: 16px; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.context-note { padding: 10px 12px; background: var(--slate-100); border-radius: var(--radius); overflow-wrap: anywhere; }
.form-alert { padding: 16px; border-left: 4px solid var(--teal-700); background: var(--teal-50); color: #115e59; }
.form-alert p { margin: 6px 0 0; }
.form-alert.error { border-color: #dc2626; background: #fef2f2; color: #991b1b; }

.calculator input,
.calculator select,
.calculator textarea {
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 12px;
}

.article-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  padding: 54px clamp(16px, 5vw, 56px);
  align-items: start;
}

.article-body,
.article-side {
  display: grid;
  gap: 16px;
}

.article-body {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: clamp(22px, 5vw, 46px);
}

.article-callout {
  display: block;
  margin-top: 18px;
  padding: 20px;
  border-left: 4px solid var(--teal-700);
  background: var(--teal-50);
}

.policy-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px clamp(16px, 5vw, 56px) 72px;
}

.policy-page h2 { margin-top: 32px; }
.policy-date { color: var(--slate-500); font-weight: 700; }

.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
  gap: 28px;
  align-items: stretch;
}

.calculator,
.calculator-result {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: var(--white);
  padding: clamp(22px, 4vw, 34px);
}

.calculator { display: grid; gap: 10px; }
.calculator label { margin-top: 8px; color: var(--slate-700); font-weight: 800; }
.calculator input,
.calculator select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--slate-300);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--white);
  color: var(--slate-950);
  font: inherit;
}
.calculator .btn { margin-top: 10px; }
.currency-input { position: relative; }
.currency-input span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--slate-500); font-weight: 800; }
.currency-input input { padding-left: 28px; }
.form-error { min-height: 1.4em; margin: 0; color: #b91c1c; font-weight: 700; }
.calculator-result { display: flex; flex-direction: column; justify-content: center; background: var(--teal-50); border-color: #99f6e4; }
.calculator-result h2 { font-size: clamp(1.65rem, 4vw, 2.35rem); }
.guideline-amount { color: var(--blue-900); font-weight: 800; }
.estimator-notes { align-items: start; }
.callout-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--blue-900); color: var(--white); }
.callout-band h2 { color: var(--white); }
.callout-band p { color: #dbeafe; }
.callout-band .eyebrow { color: #5eead4; }

.faq-section details,
.data-panel details {
  border-top: 1px solid var(--slate-200);
  padding: 14px 0;
}

.faq-section summary,
.data-panel summary {
  cursor: pointer;
  color: var(--blue-900);
  font-weight: 800;
}

.faq-section details p { margin: 10px 0 0; }
.city-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 34px; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 0; }
.pagination a { display: grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--white); color: var(--blue-700); font-weight: 800; }
.pagination a.active { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }

.hours-list { display: grid; }
.hours-list div { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--slate-200); }
.hours-list div:last-child { border-bottom: 0; }
.evidence-list small { color: var(--slate-500); }

.article-side .panel {
  display: grid;
  gap: 10px;
}

.site-footer {
  padding: 42px clamp(16px, 5vw, 56px) 28px;
  background: var(--blue-900);
  color: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 26px;
}

.site-footer h2,
.site-footer h3 { color: var(--white); }

.site-footer p,
.site-footer a {
  display: block;
  color: #dbeafe;
}

.site-footer a { margin: 8px 0; }
.footer-disclaimer { margin-top: 28px; font-size: .9rem; color: #bfdbfe; }

@media (max-width: 920px) {
  .main-nav,
  .header-cta { display: none; }
  .menu-button { display: inline-flex; margin-left: auto; }
  .mobile-nav.is-open { display: block; }
  .search-panel,
  .split,
  .results-layout,
  .detail-grid,
  .clinic-title,
  .article-layout,
  .footer-grid { grid-template-columns: 1fr; }
  .search-panel { flex-direction: column; }
  .service-grid,
  .state-grid,
  .state-grid.compact,
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-panel { position: static; min-height: 260px; }
  .city-support { grid-template-columns: 1fr; }
  .calculator-layout { grid-template-columns: 1fr; }
  .callout-band { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .site-header { height: 62px; }
  .brand span:last-child { font-size: 1rem; }
  .hero,
  .page-hero,
  .clinic-hero,
  .wizard { padding-top: 34px; padding-bottom: 38px; }
  .page-hero { padding-bottom: 24px; }
  .results-layout { padding-top: 14px; }
  .breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
  }
  .service-grid,
  .state-grid,
  .state-grid.compact,
  .article-grid,
  .option-grid,
  .fact-grid,
  .mini-grid,
  .city-list { grid-template-columns: 1fr; }
  .card-topline,
  .card-actions,
  .clinic-actions { flex-direction: column; align-items: stretch; }
  .clinic-card .address { flex-wrap: wrap; }
  .clinic-card .address .distance { flex-basis: 100%; margin-left: calc(1.15em + 7px); }
  .filters { overflow-x: auto; flex-wrap: nowrap; }
  .filters a,
  .filters strong { white-space: nowrap; }
}

/* Admin */
.admin-body { background: #f4f7fb; }

.admin-header {
  min-height: 64px;
  padding: 10px clamp(16px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--white);
}

.admin-header nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
  color: var(--slate-700);
  font-weight: 750;
}

.admin-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px clamp(16px, 4vw, 44px) 64px;
}

.admin-main h1 { font-size: 2rem; }
.admin-login { max-width: 520px; margin: 8vh auto 0; }
.admin-login pre, .admin-raw pre { overflow: auto; padding: 14px; background: var(--slate-950); color: #e2e8f0; border-radius: var(--radius); }
.admin-login pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.admin-form { display: grid; gap: 16px; }
.admin-form label { display: grid; gap: 7px; color: var(--slate-700); font-weight: 750; }
.admin-form input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: var(--radius); }

.admin-page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--slate-200); border-radius: var(--radius); background: var(--white); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.admin-table th, .admin-table td { padding: 13px 14px; border-bottom: 1px solid var(--slate-200); text-align: left; vertical-align: middle; }
.admin-table th { background: var(--slate-100); color: var(--slate-700); font-size: .8rem; text-transform: uppercase; }
.admin-table td { color: var(--slate-700); }
.admin-table td strong, .admin-table td small { display: block; }
.admin-table td small { margin-top: 4px; color: var(--slate-500); }
.admin-table tr:last-child td { border-bottom: 0; }

.status-pill { display: inline-flex; padding: 5px 8px; border-radius: 6px; background: #e0f2fe; color: #075985; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.admin-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin-metrics div { padding: 16px; border: 1px solid var(--slate-200); background: var(--white); border-radius: var(--radius); }
.admin-metrics strong, .admin-metrics span { display: block; }
.admin-metrics strong { font-size: 1.55rem; color: var(--blue-900); }
.admin-metrics span { color: var(--slate-500); }

.admin-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; }
.admin-filters a { padding: 8px 11px; border: 1px solid var(--slate-200); border-radius: 6px; background: var(--white); white-space: nowrap; font-weight: 750; color: var(--slate-700); }
.admin-filters a.active { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }

.admin-detail-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; margin-bottom: 16px; }
.admin-definition-list { margin: 0; }
.admin-definition-list div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--slate-200); }
.admin-definition-list dt { color: var(--slate-500); font-weight: 750; }
.admin-definition-list dd { margin: 0; color: var(--slate-950); overflow-wrap: anywhere; }
.admin-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.admin-actions h2 { margin: 0 auto 0 0; }
.btn.danger { background: var(--white); border-color: #dc2626; color: #b91c1c; }
.admin-raw summary { cursor: pointer; font-weight: 800; color: var(--blue-900); }

.admin-alert { margin-bottom: 16px; padding: 12px 14px; border-left: 4px solid var(--blue-600); background: #eff6ff; color: #1e3a8a; }
.admin-alert.error { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.admin-alert.success { border-color: var(--teal-700); background: var(--teal-50); color: #115e59; }
.admin-alert.warning { border-color: #f59e0b; background: #fffbeb; color: #92400e; }

@media (max-width: 760px) {
  .admin-header { flex-wrap: wrap; }
  .admin-header nav { order: 3; width: 100%; margin-left: 0; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-actions { align-items: stretch; flex-direction: column; }
  .admin-actions h2 { margin-right: 0; }
  .admin-actions form, .admin-actions .btn { width: 100%; }
}

.evidence-lead {
  margin: 0 0 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--blue-700);
  background: var(--slate-50, #f6f8fb);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}

.evidence-quote {
  display: block;
  margin: 4px 0;
  color: var(--slate-500);
  font-size: .85rem;
  line-height: 1.45;
}

.program-panel { border-left: 3px solid var(--teal-700); }
.program-lead { font-weight: 650; color: var(--slate-950); }

.program-points {
  margin: 0 0 12px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--slate-700);
}

.program-caveat {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--slate-200);
  color: var(--slate-500);
  font-size: .87rem;
}

.call-checklist {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 14px;
}

.call-checklist li { color: var(--slate-950); }
.call-checklist strong { display: block; font-weight: 750; }

.call-checklist span {
  display: block;
  margin-top: 3px;
  color: var(--slate-500);
  font-size: .89rem;
  line-height: 1.45;
}

/* State coverage statistics and ranked city lists (state pages). */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 4px 0 8px;
}

.stat-row div {
  padding: 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  background: var(--white);
}

.stat-row strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--teal-700);
}

.stat-row span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--slate-600, #475569);
}

.ranked-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.ranked-list a { font-weight: 600; }

/* Short pointer paragraph that replaces repeated boilerplate with links. */
.inline-links {
  padding: 16px 18px;
  border-left: 3px solid var(--teal-700);
  background: var(--teal-50, #f0fdfa);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Pre-generated clinic article body (clinic_page_contents.html). */
.clinic-body h2 {
  margin-top: 28px;
  font-size: 1.25rem;
}
.clinic-body h2:first-child { margin-top: 0; }
.clinic-body h3 {
  margin-top: 20px;
  font-size: 1.05rem;
}
.clinic-body p { margin: 12px 0; }
.clinic-body ul,
.clinic-body ol {
  margin: 12px 0;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}
.clinic-body li { line-height: 1.65; }
.clinic-body small { color: var(--slate-600, #475569); }

/* Structured location facts on clinic detail pages. */
.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 0.95rem;
}
/* Row labels carry a small glyph.
   display:flex was wrong here: it takes the cell out of table layout, so the
   width below stopped applying and "Operated by" and "Operating calendar" wrapped
   onto two lines against a column sized to its own content. Keeping it a table
   cell and aligning the icon on the baseline holds the column width. */
.fact-table th .icon {
  color: var(--slate-400, #94a3b8);
  vertical-align: -0.18em;
  margin-right: 7px;
}

.fact-table th,
.fact-table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border-bottom: 1px solid var(--slate-200);
}
.fact-table th {
  width: 34%;
  min-width: 170px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--slate-600, #475569);
}
.fact-table tr:last-child th,
.fact-table tr:last-child td { border-bottom: 0; }


/* Topic illustration on the hand-written guide and service pages.
   Line art in the same 2px round-stroke vocabulary as the icons, so a header and
   the icons inside the text below it read as one drawing style. Never used on a
   clinic, school or program page: a picture beside a named real address reads as
   a picture of that place. */
.topic-art-band {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px 0 10px;
  border-radius: var(--radius, 14px);
  background: linear-gradient(180deg, rgba(14,116,144,0.06), rgba(14,116,144,0));
  color: var(--teal-700, #0e7490);
}
.topic-art {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.topic-art .art-wash { color: var(--teal-700, #0e7490); }
@media (max-width: 640px) {
  .topic-art { max-width: 240px; }
  .topic-art-band { padding: 12px 0 6px; margin-bottom: 16px; }
}


/* The question accordion inside a generated page body. The page-level
   .faq-section is a full-width band; this one sits between two h2 blocks, so it
   needs its own boundary to read as one group rather than loose rows. */
.clinic-body .faq-section {
  margin: 10px 0 4px;
  border-bottom: 1px solid var(--slate-200, #e2e8f0);
}
.clinic-body .faq-section details { padding: 12px 0; }
.clinic-body .faq-section summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.clinic-body .faq-section summary::-webkit-details-marker { display: none; }
.clinic-body .faq-section summary::after {
  content: "+";
  font-weight: 700;
  color: var(--slate-400, #94a3b8);
  flex: 0 0 auto;
}
.clinic-body .faq-section details[open] summary::after { content: "\2212"; }
.clinic-body .faq-section details[open] summary { color: var(--slate-950, #020617); }


/* Topic photograph. Used only on guide and service pages and on the article
   cards that link to them -- never beside a named clinic, school or program. */
.topic-photo { margin: 0 0 20px; }
.topic-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius, 14px);
  background: var(--slate-100, #f1f5f9);
}
.topic-photo figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--slate-500, #64748b);
}
/* In a card the image is the top edge, so it loses its own margin and its
   bottom corners, and the credit is dropped -- the Pexels licence does not
   require attribution and a caption under every card would be noise. */
.article-card .topic-photo.is-card { margin: -18px -18px 14px; }
.article-card .topic-photo.is-card img {
  border-radius: var(--radius, 14px) var(--radius, 14px) 0 0;
  aspect-ratio: 16 / 10;
}


/* On a narrow screen a 170px nowrap label column leaves too little for the value,
   so the table stacks: label on its own line, value under it. */
@media (max-width: 560px) {
  .fact-table, .fact-table tbody, .fact-table tr, .fact-table th, .fact-table td {
    display: block;
    width: auto;
  }
  .fact-table th {
    min-width: 0;
    border-bottom: 0;
    padding-bottom: 2px;
    font-size: 0.85rem;
  }
  .fact-table td { padding-top: 0; }
}


/* Cross-links between the directory and the writing. Before these, a reader who
   arrived on a clinic page from a search engine had no route to the guide that
   explains its pricing, and a guide had no route to the clinics it is about. */
.read-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.read-next-card { display: block; color: var(--slate-950, #020617); }
.read-next-card .topic-photo.is-card { margin: 0 0 10px; }
.read-next-card .topic-photo.is-card img { border-radius: 10px; aspect-ratio: 16 / 10; }
.read-next-card .topic-art-band { margin: 0 0 10px; padding: 8px 0; }
.read-next-card strong { display: block; font-weight: 700; line-height: 1.35; }
.read-next-card span {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--slate-500, #64748b);
}
.read-next-card:hover strong { color: var(--blue-700, #1d4ed8); }

.side-clinics ul { list-style: none; margin: 10px 0 14px; padding: 0; }
.side-clinics li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--slate-200, #e2e8f0);
}
.side-clinics li:first-child { border-top: 0; }
.side-clinics li span { font-size: 0.85rem; color: var(--slate-500, #64748b); }

/* Related-guide rows carry the topic photograph, so the sidebar reads as a list
   of articles rather than a stack of blue text. */
.side-guides .side-guide {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--slate-200, #e2e8f0);
  color: var(--slate-950, #020617);
  font-weight: 600;
}
.side-guides .side-guide:first-of-type { border-top: 0; }
.side-guides .side-guide .topic-photo.is-card { margin: 0; }
.side-guides .side-guide .topic-photo.is-card img {
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}
.side-guides .side-guide .topic-art-band { margin: 0; padding: 0; }
.side-guides .side-guide:hover span { color: var(--blue-700, #1d4ed8); }


/* Article card.
   Two problems fixed here. The heading inherited the article-body h2 size, so a
   three-word title filled three lines of a card. And the card carried the title
   twice -- once as the heading, once as a "Read: <title>" link underneath, which
   is where the odd stacked layout came from. The heading is now the link, so the
   anchor text is still the title and it is only said once. */
.article-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.article-card h2,
.article-card h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.article-card h2 a,
.article-card h3 a {
  color: var(--slate-950, #020617);
  font-weight: 700;
}
.article-card h2 a:hover,
.article-card h3 a:hover { color: var(--blue-700, #1d4ed8); }
.article-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--slate-500, #64748b);
}


/* Long-form article typography.
   The container is a grid with a 16px gap, so every element already has space
   between it and the next; the headings' own margins stacked on top of that and
   left a hole under the title. And h1 inherited the hero scale -- up to 4rem --
   which put a six-word guide title on three lines. */
.article-body { gap: 0; }
.article-body > * + * { margin-top: 18px; }

.article-body h1 {
  margin: 4px 0 0;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.article-body > .eyebrow { margin: 0; }
.article-body > .eyebrow + h1 { margin-top: 10px; }

.article-body h2 {
  margin-top: 36px;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.article-body h3 { margin-top: 26px; font-size: 1.08rem; }

.article-body p {
  margin: 0;
  line-height: 1.72;
  color: var(--slate-700, #334155);
}
.article-body > .article-lead {
  margin-top: 18px;
  font-size: 1.1rem;
  line-height: 1.62;
  color: var(--slate-600, #475569);
}

/* The photo credit is a footnote, not a caption competing with the title. */
.article-body .topic-photo { margin-bottom: 4px; }
.article-body .topic-photo figcaption {
  font-size: 0.76rem;
  color: var(--slate-400, #94a3b8);
}


.article-meta { color: var(--muted); font-size: 0.9rem; margin: -6px 0 0; }