/* doctors.whalio.net
   ---------------------------------------------------------------------------
   A register, not a directory. Every record in NPPES is addressed by a 10-digit
   federal number, so identifiers - NPI, taxonomy code, licence, CCN - are set in
   tabular mono and given fixed positions, the way an archive treats an accession
   number. Names get the display face; anything that is a code looks like a code.

   Colour is rationed. White is the working surface, the mint wash appears once
   behind the hero, and emerald is reserved for links, the selected filter and the
   primary action. Amber only ever means a CMS star rating or an organisation.

   One stylesheet, no build step: the server has no node toolchain and these pages
   must render from a cold cache in a single round trip. */

:root {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-soft: #D1FAE5;
  --primary-wash: #ECFDF5;
  --accent: #B45309;
  --accent-soft: #FEF3C7;

  --bg: #FBFCFC;
  --card: #FFFFFF;
  --fg: #06342A;
  --body: #24343E;
  --muted: #F4F7F6;
  --muted-fg: #5B6B76;
  --rule: #E3EAE7;
  --rule-strong: #CBD8D2;
  --ring: #059669;

  --r-sm: 5px;
  --r: 9px;
  --r-lg: 12px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px;

  --shadow: 0 1px 2px rgba(6, 52, 42, .05);
  --shadow-lg: 0 8px 28px rgba(6, 52, 42, .12);

  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 15px/1.55 var(--text);
}

h1, h2, h3, h4 { font-family: var(--sans); color: var(--fg); margin: 0; line-height: 1.2; }
h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.018em; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.008em; }
h3 { font-size: .95rem; font-weight: 600; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--r-sm); }

.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;
}

.skip {
  position: absolute; left: var(--s3); top: -3rem; z-index: 50;
  background: var(--card); color: var(--fg); padding: var(--s2) var(--s4);
  border-radius: var(--r); box-shadow: var(--shadow-lg); font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: var(--s3); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--s4); }

.ico { width: 20px; height: 20px; flex: none; }
.ico-sm { width: 14px; height: 14px; flex: none; }

/* Every identifier on the site speaks in one voice. */
.code {
  font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; color: var(--body);
}

/* Section and field labels. Wide tracking separates chrome from content. */
.eyebrow {
  font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .085em;
  color: var(--muted-fg);
}

.count { font-variant-numeric: tabular-nums; color: var(--muted-fg); font-size: .82rem; }

/* ---------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.head-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4); min-height: 58px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s2); color: var(--fg); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 7px; background: var(--fg); color: #fff;
}
.brand-text { font-family: var(--sans); font-weight: 500; font-size: 1rem; letter-spacing: -.015em; }
.brand-text b { font-weight: 700; }

.head-search { position: relative; display: flex; align-items: center; }
.head-search-ico {
  /* Absolutely positioned, so the parent's flex alignment does not reach it - it
     centres itself against the input instead. */
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--muted-fg); pointer-events: none;
}
.head-search input {
  flex: 1; min-width: 0; height: 38px; padding: 0 92px 0 37px;
  font: 400 14.5px/1 var(--text); color: var(--body);
  background: var(--muted); border: 1px solid var(--rule); border-radius: var(--r);
}
.head-search input::placeholder { color: #7A8A94; }
.head-search input:focus {
  background: #fff; border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.head-search button {
  position: absolute; right: 4px; height: 30px; padding: 0 var(--s3);
  font: 600 13px/1 var(--sans); color: #fff; cursor: pointer;
  background: var(--primary); border: 0; border-radius: 6px;
  transition: background .18s ease;
}
.head-search button:hover { background: var(--primary-dark); }

.head-nav { display: flex; gap: var(--s4); font-family: var(--sans); font-size: .88rem; font-weight: 500; }
.head-nav a { color: var(--muted-fg); padding: var(--s2) 0; }
.head-nav a:hover { color: var(--fg); }

.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r);
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 62vh; overflow-y: auto;
}
.suggest a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  gap: var(--s3); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule); color: var(--body);
}
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.is-active { background: var(--primary-wash); text-decoration: none; }
.suggest .s-ico { display: grid; place-items: center; color: var(--muted-fg); }
.suggest .s-body { min-width: 0; }
.suggest .s-name, .suggest .s-meta { display: block; }
.suggest .s-name { font-family: var(--sans); font-weight: 600; font-size: .9rem; color: var(--fg); }
.suggest .s-meta {
  font-size: .78rem; color: var(--muted-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- shared */

.section { padding: var(--s6) 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--rule);
}
.section-head a { font-family: var(--sans); font-size: .85rem; font-weight: 600; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); }

.lede { font-size: 1rem; color: var(--muted-fg); max-width: 64ch; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  font: 600 11px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .05em;
  background: var(--primary-soft); color: var(--primary-dark);
}
.pill-grey {
  background: var(--muted); color: var(--muted-fg);
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px;
}
.pill-accent { background: var(--accent-soft); color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4); cursor: pointer;
  font: 600 14px/1 var(--sans);
  color: #fff; background: var(--primary);
  border: 1px solid transparent; border-radius: var(--r);
  transition: background .18s ease;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn-ghost { background: #fff; color: var(--fg); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--muted); }

.hint { font-size: .84rem; color: var(--muted-fg); }
.hint-center { text-align: center; margin-top: var(--s3); }

/* ---------------------------------------------------------------- home */

/* The mint appears here and nowhere else. */
.hero {
  background: var(--primary-wash);
  border-bottom: 1px solid var(--rule);
  padding: clamp(40px, 7vw, 76px) 0 clamp(32px, 5vw, 56px);
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.05rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; max-width: 16ch;
}
.hero h1 em { font-style: normal; color: var(--primary-dark); }
.hero .lede { margin-top: var(--s4); font-size: 1.05rem; }

.hero-form { position: relative; margin-top: clamp(24px, 3vw, 36px); max-width: 660px; }
.hero-form .row { display: flex; gap: var(--s2); }
.hero-form .field { position: relative; flex: 1; min-width: 0; }
.hero-form .field .head-search-ico { left: 15px; }
.hero-form input {
  width: 100%; height: 54px; padding: 0 var(--s4) 0 46px;
  font: 400 16px/1 var(--text); color: var(--body);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r);
}
.hero-form input:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(5, 150, 105, .18);
}
.hero-form .btn { height: 54px; padding: 0 var(--s5); }

/* Worked examples instead of a description: the box takes a name or a number, and
   these demonstrate each rather than explaining it. */
.hero-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.hero-examples .eyebrow { margin-right: var(--s1); }
.hero-examples a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--rule-strong);
  font-size: .84rem; color: var(--body);
  transition: border-color .18s ease, background .18s ease;
}
.hero-examples a:hover { text-decoration: none; border-color: var(--primary); background: #fff; }
.hero-examples a .code { font-size: .78rem; color: var(--primary-dark); }

.provenance {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: var(--s4); border-top: 1px solid var(--rule-strong);
  font-size: .86rem; color: var(--muted-fg);
}
.provenance b {
  font-family: var(--sans); font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 var(--s5); border-top: 1px solid var(--rule); }
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule); color: var(--fg);
  transition: padding-left .18s ease, background .18s ease;
}
.tile:hover { text-decoration: none; background: var(--muted); padding-left: var(--s2); }
.tile-name { font-family: var(--sans); font-weight: 500; font-size: .92rem; }

.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 var(--s5); }
.state-grid a {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: .88rem;
}
.state-grid a:hover { text-decoration: none; color: var(--primary-dark); }

/* ---------------------------------------------------------------- results */

.split {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s5); align-items: start; padding: var(--s5) 0 var(--s6);
}

.filters { position: sticky; top: 74px; }
.filters-inner { padding: var(--s4); }

.facet { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s3); }
.facet:first-of-type { border-top: 0; margin-top: var(--s2); padding-top: 0; }
.facet > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: var(--s1) 0;
  font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .085em;
  color: var(--muted-fg);
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary .ico { width: 15px; height: 15px; transition: transform .18s ease; }
.facet[open] > summary .ico { transform: rotate(180deg); }

.facet-list { margin-top: var(--s2); max-height: 268px; overflow-y: auto; }
.facet-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  padding: 5px var(--s2) 5px var(--s2); font-size: .87rem; color: var(--body);
  border-left: 2px solid transparent;
}
.facet-list a:hover { text-decoration: none; color: var(--primary-dark); border-left-color: var(--rule-strong); }
.facet-list a.on { border-left-color: var(--primary); color: var(--primary-dark); font-weight: 600; }
.facet-list .fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scope-toggle { display: flex; gap: 2px; margin: var(--s2) 0; padding: 2px; background: var(--muted); border-radius: 7px; }
.scope-toggle a {
  flex: 1; text-align: center; padding: 5px 6px; border-radius: 5px;
  font: 600 .78rem/1.3 var(--sans); color: var(--muted-fg);
}
.scope-toggle a:hover { text-decoration: none; color: var(--fg); }
.scope-toggle a.on { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow); }

.results-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.results-head h1 { font-size: 1.3rem; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s2) 4px var(--s3); border-radius: 999px;
  background: #fff; border: 1px solid var(--rule-strong);
  font: 500 .82rem/1.5 var(--sans); color: var(--fg);
}
.chip:hover { text-decoration: none; border-color: var(--primary); }
.chip b { font-weight: 400; color: var(--muted-fg); }
.chip .ico { width: 13px; height: 13px; color: var(--muted-fg); }
.chip-clear { border-style: dashed; color: var(--muted-fg); }

.sortbar { display: flex; align-items: center; gap: var(--s1); font-size: .84rem; color: var(--muted-fg); }
.sortbar .eyebrow { margin-right: var(--s1); }
.sortbar a { padding: 4px var(--s2); border-radius: var(--r-sm); font-weight: 500; color: var(--muted-fg); }
.sortbar a:hover { text-decoration: none; color: var(--fg); background: var(--muted); }
.sortbar a.on { background: var(--fg); color: #fff; }

/* --- the register ---------------------------------------------------------
   A continuous list with hairline rules rather than a stack of cards: this is an
   extract from a federal register and should read as one. The NPI holds its own
   column because it is the only thing in the row guaranteed to be unique. */

.register { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }

.reg-head, .reg-row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.5fr) minmax(0, 1.4fr) 116px;
  gap: var(--s4); align-items: center;
}

.reg-head {
  padding: 9px var(--s4) 9px calc(var(--s4) - 3px);
  border-bottom: 1px solid var(--rule-strong); background: var(--muted);
  border-left: 3px solid transparent;
}

.reg-row {
  padding: 11px var(--s4) 11px calc(var(--s4) - 3px);
  border-bottom: 1px solid var(--rule); border-left: 3px solid transparent;
  transition: background .15s ease, border-left-color .15s ease;
}
.reg-row:last-child { border-bottom: 0; }
.reg-row:hover { background: var(--muted); border-left-color: var(--primary); }
.reg-row.is-org:hover { border-left-color: var(--accent); }

.reg-name { font: 600 .96rem/1.35 var(--sans); color: var(--fg); }
.reg-name a { color: inherit; }
.reg-name .cred { font-weight: 400; color: var(--muted-fg); font-size: .85rem; }

.reg-kind { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .78rem; color: var(--muted-fg); }
.reg-row.is-org .reg-kind .ico-sm { color: var(--accent); }

.reg-cell { min-width: 0; font-size: .87rem; color: var(--body); }
.reg-cell .sub { display: block; font-size: .8rem; color: var(--muted-fg); }
.reg-npi { text-align: right; }
.reg-npi a { display: block; margin-top: 2px; font: 600 .78rem/1.4 var(--sans); color: var(--primary-dark); }

.empty { padding: var(--s6) var(--s5); text-align: center; }
.empty h2 { margin-bottom: var(--s2); }
.empty ul { margin: var(--s4) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

.notice {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--accent-soft); border-radius: var(--r); font-size: .88rem; color: #7C4310;
}
.notice .ico { color: var(--accent); }
.notice-quiet { background: var(--muted); color: var(--muted-fg); }
.notice-quiet .ico { color: var(--muted-fg); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-top: var(--s5); }
.pager a, .pager span {
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 var(--s3);
  border-radius: var(--r); font: 600 .86rem/1 var(--sans);
  background: #fff; border: 1px solid var(--rule); color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--primary); text-decoration: none; }
.pager .on { background: var(--fg); border-color: var(--fg); color: #fff; }
.pager .off { opacity: .4; }
.pager .gap { border: 0; background: none; min-width: 16px; padding: 0; }

/* ---------------------------------------------------------------- profile */

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s4); font-size: .84rem; color: var(--muted-fg); }
.crumbs a { color: var(--muted-fg); }
.crumbs a:hover { color: var(--fg); }
.crumbs span { color: #9AAAB2; }

/* The record's number sits above its name at label weight - present and quotable,
   never shouting. */
.profile-head { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.profile-head h1 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.025em; }
.profile-head h1 .cred { font-weight: 400; color: var(--muted-fg); letter-spacing: 0; }
.profile-npi { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.profile-npi .code { font-size: .95rem; letter-spacing: .02em; color: var(--fg); }
.profile-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.panels { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: var(--s5); align-items: start; padding-bottom: var(--s6); }
.panel { padding: var(--s4) var(--s5) var(--s5); }
.panel + .panel { margin-top: var(--s3); }
.panel h2 { padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); margin-bottom: var(--s4); }

.kv { display: grid; grid-template-columns: 158px minmax(0, 1fr); gap: var(--s3) var(--s4); font-size: .92rem; }
.kv dt { font: 600 11px/1.6 var(--sans); text-transform: uppercase; letter-spacing: .085em; color: var(--muted-fg); }
.kv dd { margin: 0; color: var(--body); }

.tax { border-top: 1px solid var(--rule); padding-top: var(--s3); margin-top: var(--s3); }
.tax:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.tax-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tax-name { font: 600 .95rem/1.3 var(--sans); color: var(--fg); }
.tax-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s2); font-size: .84rem; color: var(--muted-fg); }
.tax-meta .code { color: var(--fg); }

.mini { display: flex; flex-direction: column; }
.mini a { display: block; padding: var(--s2) 0; border-top: 1px solid var(--rule); color: var(--body); }
.mini a:first-child { border-top: 0; padding-top: 0; }
.mini a:hover { text-decoration: none; }
.mini a:hover .m-name { color: var(--primary-dark); }
.mini .m-name { display: block; font: 600 .89rem/1.3 var(--sans); color: var(--fg); }
.mini .m-meta { display: block; font-size: .79rem; color: var(--muted-fg); }

.contact-cta { display: flex; flex-direction: column; gap: var(--s2); }

/* ---------------------------------------------------------------- ratings */

.rating { display: inline-flex; align-items: center; gap: 1px; }
.star { color: #D3DCD8; display: inline-flex; }
.star.on { color: var(--accent); }
.star.on svg { fill: currentColor; }
.rating-num { margin-left: 6px; font-size: .8rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.rating-none { font-size: .82rem; color: var(--muted-fg); }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .89rem; }
table.data th, table.data td { padding: var(--s2) var(--s4); text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.data th {
  font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .085em;
  color: var(--muted-fg); white-space: nowrap; background: var(--muted);
  border-bottom: 1px solid var(--rule-strong);
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--muted); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */

.site-foot { margin-top: var(--s6); background: #fff; border-top: 1px solid var(--rule); }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); padding-top: var(--s5); padding-bottom: var(--s5); }
.foot-note { max-width: 62ch; font-size: .88rem; color: var(--muted-fg); }
.foot-strong { font-family: var(--sans); font-weight: 600; color: var(--fg); }
.foot-links { display: flex; gap: var(--s6); }
.foot-links h2 { font: 600 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .085em; color: var(--muted-fg); margin-bottom: var(--s2); }
.foot-links a { display: block; padding: 3px 0; font-size: .88rem; color: var(--body); }
.foot-base { padding: var(--s3) var(--s4); border-top: 1px solid var(--rule); font-size: .8rem; color: var(--muted-fg); }

/* ---------------------------------------------------------------- mobile */

.filters-toggle { display: none; }

@media (max-width: 1040px) {
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  .filters { position: static; }
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; padding: 0 var(--s4); cursor: pointer;
    font: 600 .9rem/1 var(--sans); color: var(--fg); list-style: none;
  }
  .filters-toggle::-webkit-details-marker { display: none; }
  .panels { grid-template-columns: 1fr; }

  /* The register drops its columns before they get too narrow to read. */
  .reg-head { display: none; }
  .reg-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: start; }
  .reg-cell { grid-column: 1; }
  .reg-npi { grid-column: 2; grid-row: 1; text-align: right; }
}

@media (max-width: 860px) {
  .head-inner { grid-template-columns: auto auto; grid-template-areas: 'brand nav' 'search search'; row-gap: var(--s2); padding-top: var(--s2); padding-bottom: var(--s2); }
  .brand { grid-area: brand; }
  .head-nav { grid-area: nav; justify-self: end; gap: var(--s3); font-size: .85rem; }
  .head-search { grid-area: search; }
  .foot-inner { grid-template-columns: 1fr; gap: var(--s5); }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: var(--s3); }
}

@media (max-width: 560px) {
  /* Brand plus three nav links do not fit side by side at 375px; three rows do. */
  .head-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'brand' 'search' 'nav'; }
  .head-nav { justify-self: start; gap: var(--s4); padding-bottom: var(--s1); }
  .hero-form .row { flex-direction: column; }
  .hero-form .btn { width: 100%; }
  .foot-links { flex-direction: column; gap: var(--s4); }
  .provenance { gap: var(--s2) var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}