/* 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 pale wash appears once
   behind the hero, and navy is reserved for links, the selected filter and the
   primary action. Amber only ever means a CMS star rating or an organisation, green
   only a CMS "better" verdict, red only "worse".

   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. */

/* Self-hosted variable fonts (latin subset, from Google Fonts' own woff2 builds), so
   a page load makes no request to a third party. Weight ranges cover every weight
   the stylesheet uses; anything else falls back down the stack. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(/assets/fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/noto-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Navy ink (2026-10 redesign, replacing emerald). Amber (star ratings, organisations),
   red (--bad) and the green of a CMS "better" verdict are semantic and do not follow
   the brand colour - see --good below. */
:root {
  --primary: #1B3350;
  --primary-dark: #0E1F33;
  --primary-soft: #DCE6F0;
  --primary-wash: #EEF2F7;
  --accent: #B45309;
  --accent-soft: #FEF3C7;
  --good: #047857;
  --good-soft: #D1FAE5;

  --bg: #F7F8FA;
  --card: #FFFFFF;
  --fg: #152238;
  --body: #2A3340;
  --muted: #F2F4F7;
  --muted-fg: #5B6472;
  --rule: #E1E5EB;
  --rule-strong: #C6CCD6;
  --ring: #1B3350;

  --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(15, 31, 54, .06);
  --shadow-lg: 0 8px 28px rgba(15, 31, 54, .14);

  --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;
  /* Same contrast fix as .btn: white on --primary alone is 3.77:1, under WCAG AA. */
  background: var(--primary-dark); border: 0; border-radius: 6px;
  transition: background .18s ease;
}
.head-search button:hover { background: var(--fg); }

.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);
  /* White on --primary measures 3.77:1 - under the 4.5:1 WCAG AA floor for text this
     size. --primary-dark clears it (5.5:1) while staying the same brand hue. */
  color: #fff; background: var(--primary-dark);
  border: 1px solid transparent; border-radius: var(--r);
  transition: background .18s ease;
}
.btn:hover { background: var(--fg); 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 wash 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(27, 51, 80, .22);
}
.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); }

/* ---------------------------------------------------------------- hospital tile map */

:root {
  /* Five-step scale for the "where they are" map: warm/low to emerald/high, echoing
     --bad and --primary-dark at the ends without reusing them directly (this is a
     relative shading, not a worse/better verdict). */
  --map1: #A3352A;
  --map2: #BA6B2E;
  --map3: #A98029;
  --map4: #5C7F2E;
  --map5: #0F7A5C;
}

.map-wrap { margin-top: var(--s2); }
.map-scroll { overflow-x: auto; padding-bottom: 2px; }
.map-grid {
  display: grid; grid-template-columns: repeat(11, 40px); gap: 4px;
  width: max-content; min-width: 100%;
}
.map-tile {
  display: flex; align-items: center; justify-content: center;
  height: 40px; border-radius: var(--r-sm);
  font: 700 .72rem/1 var(--sans); color: #fff; letter-spacing: .01em;
  background: var(--muted); text-decoration: none;
}
.map-tile:hover { outline: 2px solid var(--fg); outline-offset: 1px; text-decoration: none; }
.map-void { visibility: hidden; }
.map-unrated {
  color: var(--muted-fg); background: var(--card);
  border: 1px dashed var(--rule-strong);
}
.map-b1 { background: var(--map1); }
.map-b2 { background: var(--map2); }
.map-b3 { background: var(--map3); }
.map-b4 { background: var(--map4); }
.map-b5 { background: var(--map5); }

.map-terr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: var(--s3);
}
.map-terr-label { font-size: .78rem; color: var(--muted-fg); margin-right: 4px; }
.map-terr .map-tile { height: 30px; width: 40px; font-size: .68rem; flex: none; }

.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--muted-fg);
}
.map-legend .mono { font-family: var(--mono); font-size: .78rem; }
.map-swatch { display: inline-flex; border-radius: 3px; overflow: hidden; }
.map-swatch i { display: block; width: 16px; height: 10px; }
.map-swatch i:nth-child(1) { background: var(--map1); }
.map-swatch i:nth-child(2) { background: var(--map2); }
.map-swatch i:nth-child(3) { background: var(--map3); }
.map-swatch i:nth-child(4) { background: var(--map4); }
.map-swatch i:nth-child(5) { background: var(--map5); }
.map-legend-none { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.map-legend-none i { width: 12px; height: 10px; border-radius: 2px; border: 1px dashed var(--rule-strong); background: var(--card); }

@media (max-width: 560px) {
  .map-grid { grid-template-columns: repeat(11, 34px); }
  .map-tile { height: 34px; }
}

/* Map + "this selection" side by side on the unfiltered hub, stacked below that. */
.topgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(272px, 1fr); gap: var(--s4); align-items: stretch; }
.topgrid > .panel { height: 100%; }
/* .panel + .panel (for stacked panels elsewhere) would otherwise push the second
   column down instead of keeping both flush with the grid row's top. Same
   specificity as that rule, so it has to out-select it, not just come later. */
.topgrid > .panel + .panel { margin-top: 0; }
@media (max-width: 900px) { .topgrid { grid-template-columns: minmax(0, 1fr); } }

.sel-panel { display: flex; flex-direction: column; }
.sel-total { margin: 0; font: 700 2.1rem/1.1 var(--sans); letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.sel-total small { margin-left: var(--s2); font: 400 .95rem/1 var(--sans); color: var(--muted-fg); }

.sel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; margin: var(--s4) 0 0; }
.sel-facts > div { background: var(--card); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.sel-facts .big { font: 700 1.3rem/1.1 var(--sans); color: var(--fg); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sel-facts .sub { font-size: .78rem; color: var(--muted-fg); }

.sel-hist { display: flex; align-items: stretch; gap: 5px; height: 76px; margin-top: var(--s4); }
.sel-hist-col { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; height: 100%; }
.sel-hist-plot { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.sel-hist-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; }
.sel-hist-none { background: var(--rule-strong); opacity: .6; }
.sel-hist-lab { text-align: center; font-size: .68rem; color: var(--muted-fg); line-height: 1.3; }
.sel-hist-lab b { display: block; font-weight: 600; color: var(--fg); font-size: .74rem; }

.sel-unmeasured { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.sel-unmeasured h3 { margin: 0 0 var(--s3); font: 600 .78rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted-fg); }
.sel-um-row { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; font-size: .84rem; }
.sel-um-row:last-child { margin-bottom: 0; }
.sel-um-row .nm { flex: 1; min-width: 0; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-um-row .track { width: 64px; height: 6px; border-radius: 3px; background: var(--muted); flex: none; overflow: hidden; }
.sel-um-row .track i { display: block; height: 100%; border-radius: 3px; background: var(--map1); opacity: .6; }
.sel-um-row .n { font-family: var(--mono); font-size: .74rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; flex: none; min-width: 52px; text-align: right; }
.sel-um-none { font-size: .84rem; color: var(--muted-fg); margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- 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; }

/* ---------------------------------------------------------------- hospital quality */

/* Red means exactly one thing on this site: CMS found a result worse than the
   national rate. Better-than-national reuses the emerald. */
:root { --bad: #B42318; --bad-soft: #FEE4E2; }

.chip-on { border-color: var(--primary); background: var(--primary-soft); }

.glance {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--s4); overflow: hidden;
}
.glance > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0;
  padding: var(--s4); border-left: 1px solid var(--rule);
}
.glance > div:first-child { border-left: 0; }
.glance .big { font: 700 1.65rem/1.05 var(--sans); color: var(--fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.glance .sub { font-size: .8rem; color: var(--muted-fg); }

.jump { margin-bottom: var(--s5); }

.tally { display: inline-flex; flex-wrap: wrap; gap: var(--s1); }

.res {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
  font: 600 .76rem/1.6 var(--sans); white-space: nowrap;
}
.res-better { background: var(--good-soft); color: var(--good); }
.res-same { background: var(--muted); color: var(--muted-fg); }
.res-worse { background: var(--bad-soft); color: var(--bad); }
.res-na { color: var(--muted-fg); box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* Survey bars: the fill is this hospital; the two ticks are the state and national
   averages, so "above or below average" reads without a number. */
.bars { display: grid; gap: var(--s4); margin-top: var(--s4); }
.bar-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) 48px minmax(0, 1fr);
  column-gap: var(--s3); row-gap: 3px; align-items: center;
}
.bar-label { font: 500 .9rem/1.35 var(--sans); color: var(--fg); }
.bar-val { font: 700 .95rem/1 var(--sans); color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.bar-track { position: relative; height: 10px; border-radius: 999px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--primary); }
.bar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fg); }
.bar-mark.mark-state { background: var(--accent); }
.bar-bench { grid-column: 3; font-size: .76rem; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.bar-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--muted-fg);
}
.bar-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }

table.data td .range { display: block; margin-top: 1px; font-size: .76rem; color: var(--muted-fg); }
table.outcomes td:first-child { min-width: 220px; }

/* Side-by-side with neighbours: the hospital itself is the row the eye returns to. */
table.compare tr.is-self td { background: var(--primary-soft); }
table.compare tr.is-self:hover td { background: var(--primary-soft); }
table.compare td:first-child { min-width: 200px; }
table.compare .res { white-space: nowrap; }

.method ul { margin: 0; padding-left: 1.1rem; }
.method li { margin-bottom: var(--s2); font-size: .9rem; }
.method li:last-child { margin-bottom: 0; }

/* The 310px aside is too narrow for a label column beside the value. */
.kv-stack { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kv-stack dd { margin-bottom: var(--s3); }
.kv-stack dd:last-of-type { margin-bottom: 0; }

@media (max-width: 860px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance > div:nth-child(3) { border-left: 0; }
  .glance > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .bar-row { grid-template-columns: minmax(0, 1fr) 48px; }
  .bar-track, .bar-bench { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- industry payments */

.pay-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.pay-figures > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: var(--s3) var(--s4); border-radius: var(--r); background: var(--muted); }
.pay-figures .big { font: 700 1.35rem/1.1 var(--sans); color: var(--fg); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.pay-figures .sub { font-size: .78rem; color: var(--muted-fg); }

/* One bar per program year, scaled to the hospital's own biggest year: the shape of
   the trend matters here, not a comparison between hospitals. */
.pay-trend { display: grid; gap: 6px; margin: var(--s4) 0 0; padding: 0; list-style: none; }
.pay-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 80px; gap: var(--s3); align-items: center; font-size: .84rem; }
.pay-year { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.pay-bar { display: flex; height: 12px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.pay-general { background: var(--primary); }
.pay-research { background: var(--fg); }
.pay-total { text-align: right; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }

.pay-h { margin: var(--s5) 0 var(--s3); }

.share { display: inline-block; width: 56px; height: 6px; margin-right: var(--s2); border-radius: 3px; background: var(--muted); vertical-align: middle; overflow: hidden; }
.share > i { display: block; height: 100%; background: var(--primary); }

/* ---------------------------------------------------------------- doctor profile: Medicare, exclusions */

.notice-bad { background: var(--bad-soft); color: var(--bad); }
.notice-bad .ico { color: var(--bad); }
.notice-bad strong { display: block; font-family: var(--sans); }
.notice-bad p { margin: 4px 0 0; color: var(--body); }

.panel h3.sub-h { margin: var(--s5) 0 var(--s2); }

/* ---------------------------------------------------------------- home: two checks */

.hero-wide h1 { max-width: 24ch; }
.hero-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: clamp(24px, 3vw, 36px); }
.hero-pair .hero-form { margin-top: 0; max-width: none; }
.hero-pair label.eyebrow { display: block; margin-bottom: var(--s2); }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4) var(--s5); }
.checks h3 { margin: 0 0 4px; font: 600 1rem/1.3 var(--sans); color: var(--fg); }
.checks p { margin: 0; font-size: .9rem; color: var(--muted-fg); }

.hospital-search { margin: 0 0 var(--s5); max-width: 660px; }

/* Hospital roster sample: two or three columns inside the main panel. */
.mini-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--s5); }
.mini-cols a, .mini-cols a:first-child { padding: var(--s2) 0; border-top: 1px solid var(--rule); }

@media (max-width: 860px) {
  .hero-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- about / policy pages */

.about-list { margin: var(--s3) 0 0; padding-left: 1.1rem; }
.about-list li { margin-bottom: var(--s2); font-size: .92rem; color: var(--body); }
.about-list li:last-child { margin-bottom: 0; }
.panel p + p { margin-top: var(--s3); }

/* ---------------------------------------------------------------- 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; }
  /* minmax(0, ...) rather than a bare 1fr: a 1fr track cannot shrink below its widest
     child, so a wide table inside .table-wrap pushed the whole page sideways on phones. */
  .panels { grid-template-columns: minmax(0, 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); }
}

/* A table marked .stack becomes one card per row on a phone: the first cell is the
   card's heading and every other cell prints its column name from data-label, so
   nothing has to scroll sideways (the ER table used to, at 375px). */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; min-width: 0 !important; }
  table.stack td:first-child { padding-bottom: var(--s2); }
  table.stack td[data-label] { display: flex; justify-content: space-between; gap: var(--s4); text-align: right; }
  table.stack td[data-label]::before { content: attr(data-label); color: var(--muted-fg); text-align: left; }
  table.compare tr.is-self { padding-left: var(--s3); padding-right: var(--s3); background: var(--primary-soft); border-radius: var(--r-sm); }
  table.compare tr.is-self td { background: none; }
}

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

/* ---------------------------------------------------------------- front page, 2026-10 redesign */

/* Hero: copy on the left, a real CMS record card on the right, the two search forms
   on a white elevated panel underneath. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 var(--s4); padding: 5px 12px 5px 10px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font: 600 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-dark);
}
.hero-eyebrow .ico-sm { width: 14px; height: 14px; flex: none; }
.hero-wide h1 em { font-style: normal; color: var(--accent); }
.hero-wide .lede { max-width: 62ch; }
.hero-panel {
  position: relative; margin-top: clamp(28px, 4vw, 44px);
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--rule);
}
.hero-panel .hero-pair { margin-top: 0; }

.hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.hero-copy { min-width: 0; }
.hero-wide .hero-copy h1 { max-width: 20ch; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; margin-top: 6px; }
.record-card {
  position: relative; width: 100%; max-width: 300px;
  background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s5) var(--s4) var(--s4);
  transform: rotate(-2.5deg);
}
.record-card-back {
  position: absolute; inset: 10px -10px auto auto; width: 100%; max-width: 300px; height: 92%;
  transform: rotate(3.5deg); z-index: -1; opacity: .55;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.record-stamp {
  position: absolute; top: -10px; right: -10px;
  transform: rotate(8deg);
  border: 1.5px solid var(--primary); border-radius: 999px;
  color: var(--primary-dark); background: var(--primary-wash);
  font: 700 .62rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 10px;
}
.record-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.record-kind { font-size: .72rem; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .04em; }
.record-stars { color: var(--accent); letter-spacing: 1px; font-size: .85rem; }
.record-stars .dim { color: var(--rule-strong); }
.record-name { margin: var(--s2) 0 var(--s4); font: 700 1.1rem/1.25 var(--sans); color: var(--fg); }
.record-fields { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.record-fields > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.record-fields dt { font-size: .72rem; color: var(--muted-fg); }
.record-fields dd { margin: 0; font: 600 .85rem/1 var(--mono); color: var(--body); letter-spacing: .02em; }
.record-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font: 700 .68rem/1.6 var(--sans);
  background: var(--primary-soft); color: var(--primary-dark);
}
.record-rule { height: 1px; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 6px, transparent 6px 11px); margin: var(--s4) 0 var(--s3); }
.record-foot { margin: 0; font-size: .7rem; color: var(--muted-fg); }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { display: none; }
}

/* "What you can check" as cards with an icon each. */
.checks { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.check-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s4); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.check-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--rule-strong); }
.check-ic {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: var(--s3);
  background: var(--primary-wash); color: var(--primary-dark);
}
.check-ic svg { width: 20px; height: 20px; }

/* Section heads with an icon; counts as pills; a hover rule on the directory links. */
.section-head h2 { display: flex; align-items: center; gap: 8px; }
.sh-ic { width: 18px; height: 18px; color: var(--primary); flex: none; }
.home .count { padding: 1px 8px; border-radius: 999px; background: var(--muted); font-variant-numeric: tabular-nums; }
.home .tile, .home .state-grid a { border-left: 2px solid transparent; padding-left: var(--s2); }
.home .tile:hover, .home .state-grid a:hover { border-left-color: var(--primary); }

/* The front page's stacked sections read as distinct bands: a rule between each and
   an alternating tint, so the three directory lists do not run into one another. */
.home .section { border-top: 1px solid var(--rule-strong); }
.home .section:nth-of-type(even) { background: #EAEFF5; }

/* Footer, on every page: a brand rule along the top, icons on the column heads, an
   underline that draws in on hover, and the disclaimer on its own panel. */
.site-foot { position: relative; }
.site-foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}
.foot-links h2 { display: flex; align-items: center; gap: 6px; }
.fh-ic { width: 14px; height: 14px; color: var(--primary); flex: none; }
.foot-links a { position: relative; width: fit-content; }
.foot-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 1px;
  background: var(--primary); transition: right .18s ease;
}
.foot-links a:hover::after { right: 0; }
.foot-note-panel {
  background: var(--muted); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s4);
}