/* Nursing Homes Compared hero, built to the Sunnyaid structural spec
   Panels: 20px radius, 30px gap, 80px page inset, 1320px inner cap.
   Type: display serif 45-60px at -0.03em; body a flat 18/32. No middle sizes. */
:root{
  --ink:#0B3948;          /* brand deep teal, headings */
  --panel-hero:#0E7C8E;   /* mid teal, hero panel */
  --panel-soft:#F2F0EC;   /* warm light band */
  --panel-dark:#0C2229;   /* near-black band */
  --gold:#FFD470;
  --gold-ink:#3D2B06;
  --accent:#00636F;       /* solid buttons */
  --body:#5D6A83;
  --muted:#4C6272;
  --line:#DFE5E4;
  --white:#FFFFFF;
  /* One typeface, and it is the one already on the reader's phone.

     Headings were Fraunces, whose letterforms Cameron found wonky. Then they
     were Atkinson Hyperlegible, the Braille Institute's low-vision face,
     which was the right instinct for families of elderly people and the wrong
     result: it is drawn so no two characters can be confused, and over
     paragraph after paragraph those deliberate quirks are what the eye keeps
     catching on. Cameron, on an iPhone, 29 Sep 2026: the font is the biggest
     thing throwing me off.

     This is the system stack, so an iPhone draws SF, an Android draws Roboto
     and a PC draws Segoe. Nobody downloads anything, which takes 30 KB of
     base64 webfont off every one of 20,271 pages, it renders at native
     hinting, and it follows whatever text size the reader has set on their
     phone. The accessibility argument does not go away with Atkinson: SF is
     one of the most legible screen faces there is, and unlike Atkinson it
     ships every weight, which is what the heading ladder needs.

     app/static/fonts.css still holds Atkinson and is still on disk, because
     src/ogcard.py renders the social card image with it. No page links it. */
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(0.68,0.01,0.58,0.75);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);
  font-family:var(--sans);font-size:18px;line-height:31px;letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;color:var(--ink);
  letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
[hidden]{display:none !important}

/* page inset + panel rhythm */
.shell{max-width:2100px;margin-inline:auto;padding:0 clamp(20px,(100% - 1320px) / 2,80px)}
.panel{border-radius:20px;margin-top:30px;overflow:hidden;position:relative}
.inner{max-width:1320px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.topbar{background:var(--panel-dark);color:#B9CCCF;font-size:16px;line-height:27px;min-height:46px}
.topbar .inner{display:flex;justify-content:space-between;gap:20px;padding:0 24px}
.topbar span{display:inline-flex;align-items:center;gap:9px}
.topbar svg{width:15px;height:15px;flex:none;opacity:.85}

/* ---------- header ---------- */
.hdr{background:var(--white);height:96px;display:flex;align-items:center;
  overflow:visible;z-index:60}  /* the search dropdown has to escape the panel clip */
.hdr .inner{display:flex;align-items:center;gap:24px;padding:0 24px;width:100%}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto;white-space:nowrap;
  font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.02em}
.mainnav{display:flex;gap:28px;margin-left:14px;flex:0 0 auto}
/* the button exists only below 1250; above it the nav is always open */
.navtoggle{display:none;align-items:center;gap:10px;height:48px;padding:0 16px;margin-left:auto;
  border:2px solid var(--line);border-radius:26px;background:#fff;color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:700}
.navtoggle:hover{border-color:#9FB6B4}
.navtoggle b{display:block;width:18px;height:2px;background:currentColor;position:relative}
.navtoggle b::before,.navtoggle b::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor}
.navtoggle b::before{top:-6px}
.navtoggle b::after{top:6px}
.mainnav a{font-size:18px;font-weight:400;line-height:22px;color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.mainnav a:hover,.mainnav a[aria-current]{border-bottom-color:var(--gold)}
.hdr .right{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto}
.phone{display:inline-flex;align-items:center;gap:10px;height:62px;padding:0 20px;border-radius:5px;white-space:nowrap;flex:0 0 auto;
  background:#E8F1F4;border:1px solid #D8EEF5;color:var(--accent);
  font-size:20px;font-weight:700;text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.phone:hover{background:var(--accent);color:#fff}
.phone:hover svg path{fill:#fff}
.phone svg{width:17px;height:17px}

.btn{display:inline-flex;align-items:center;gap:11px;height:60px;padding:0 26px;border-radius:5px;white-space:nowrap;flex:0 0 auto;
  font-family:var(--sans);font-size:18px;font-weight:400;text-decoration:none;border:0;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn svg{transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--ink)}
.btn--gold{background:var(--gold);color:var(--gold-ink)}
.btn--gold:hover{background:#FFC63F}
/* the secondary the system was missing. Two calls to action need two weights,
   and the 404 is the only place with two. Inset shadow rather than a border so
   it does not change the 60px height the other two have. */
.btn--line{background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--accent)}
.btn--line:hover{background:var(--accent);color:#fff}

/* ---------- hero panel ---------- */
.hero{background:var(--panel-hero)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 12% 8%,rgba(255,255,255,.16),transparent 60%),
             radial-gradient(90% 70% at 92% 95%,rgba(0,0,0,.18),transparent 62%);
  pointer-events:none}
.hero .inner{display:grid;grid-template-columns:minmax(0,696px) minmax(0,1fr);
  align-items:center;gap:30px;padding-top:70px;padding-bottom:70px}
.herocard{background:var(--white);border-radius:20px;padding:74px 80px 78px;position:relative;z-index:2}
.eyebrow{display:inline-block;font-size:14px;font-weight:700;line-height:24px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:var(--panel-soft);padding:0 14px;
  border-radius:30px;margin-bottom:20px}
.herocard h1{font-size:48px;line-height:54px}
.herocard h1 .mark{position:relative;white-space:nowrap}
/* the swash sits under the baseline, not through the words */
.herocard h1 .mark svg{position:absolute;left:-.06em;top:auto;bottom:-.1em;
  width:calc(100% + .12em);height:.34em;z-index:-1}
.herocard p{margin-top:18px;font-size:18px;line-height:31px;color:#656565;max-width:46ch}

form.find{position:relative;margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}
form.find input{flex:1 1 320px;min-width:0;height:60px;padding:0 20px;border-radius:5px;
  border:1px solid rgba(101,101,101,.5);font-family:var(--sans);font-size:18px;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
form.find input::placeholder{color:#6B7885}
form.find input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,99,111,.15)}
form.find input:focus:not(:focus-visible){outline:none}
.herocard .findhint,.findhint{margin-top:16px;font-size:16px;line-height:26px;color:var(--muted);
  max-width:none}

.heroart{position:relative;z-index:2;justify-self:end;width:100%;max-width:600px;min-width:0}
.heroart svg{width:100%;height:auto;display:block}

/* one entrance, matching the template's single fadeInRight. Vertical at every
   width, because a sideways offset pokes outside the panel and gets clipped
   before it settles. */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:translateY(0);
  transition:opacity .2s ease,transform .2s ease}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .btn,.btn svg,.card2,.ctile{transition:none}
  .btn:hover,.btn:hover svg,.card2:hover,.ctile:hover{transform:none}
  html{scroll-behavior:auto}
}
@media print{.reveal,.up{opacity:1;transform:none}}
/* gold reads on the dark and teal grounds, ink on everything else */
/* keyboard users get this as the first stop on the page; everyone else never
   sees it. It has to stay focusable, so it is moved off-screen, not hidden. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 10px 0;
  font-family:var(--sans);font-size:16px;font-weight:700;text-decoration:none}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.panel--dark :focus-visible,.panel--teal :focus-visible,.cityband :focus-visible,
.foot :focus-visible{outline-color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:1280px){.phone{display:none}}
/* the bar has to be free to grow before its two strings stop fitting on one line */
@media (max-width:860px){.topbar{line-height:1.45;padding:11px 0}}
@media (max-width:1250px){
  .hero .inner{grid-template-columns:1fr;padding-top:50px;padding-bottom:50px}
  .heroart{max-width:520px;justify-self:stretch;width:100%;margin:10px auto 0}
  .herocard{padding:50px 44px 54px}
  .herocard h1{font-size:40px;line-height:47px}
  /* the nav collapses behind a button here. It used to just disappear, which
     left every visitor under 1250px with no way to reach any other page. */
  .navtoggle{display:inline-flex}
  .mainnav{position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;gap:0;margin:0;padding:8px 0;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 14px 34px rgba(6,27,92,.13)}
  .mainnav[hidden]{display:none}
  .mainnav a{padding:14px 24px;border-bottom:0;font-size:18px}
  .mainnav a:hover,.mainnav a[aria-current]{background:var(--panel-soft);border-bottom:0}
  .hdr{position:relative}
}
@media (max-width:760px){
  .shell{padding:0}
  .panel{border-radius:0;margin-top:0}
  .topbar{height:auto;line-height:1.45;padding:11px 0;font-size:14px}
  .topbar .inner{flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 24px}
  .topbar span{align-items:flex-start;text-align:left}
  .hdr{height:70px}
  .hdr .inner{padding:0 24px;gap:16px}
  /* the whole right group goes, not just the button: an empty flex item still
     carried margin-left:auto and pulled the Menu button off the search field's edge */
  .phone,.hdr .right{display:none}
  .eyebrow{padding:0 8px}
  .herocard{padding:36px 26px 40px;border-radius:16px}
  .herocard h1{font-size:36px;line-height:43px}
  .hero .inner{padding:26px 24px}
  form.find input,form.find .btn{flex:1 0 100%}
  form.find .btn{justify-content:center}
}

/* ============================================================
   HOME, sections below the hero
   Panels alternate: soft / dark / soft / teal / soft, 30px apart.
   ============================================================ */
.panel--soft{background:var(--panel-soft)}
/* two soft panels in a row are one cream field: the 30px white seam between them
   reads as a mistake, so they join. Their .sec padding still keeps them apart. */
.panel--soft:has(+ .panel--soft),.wrapresults:has(+ .panel--soft){
  border-bottom-left-radius:0;border-bottom-right-radius:0}
.panel--soft + .panel--soft,
.wrapresults:not(:has(.results2:empty)) + .panel--soft{
  margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.panel--dark{background:var(--panel-dark)}
.panel--teal{background:var(--panel-hero)}
/* Was 120/100. Cameron, 3 Sep 2026: "there are just small spacing issues where
   it looks like the spacing is too big or out of place".
   The About page was 3,632px tall carrying 464 words, and one panel spent 845px
   on 119 words. 88/76 is not a guess: it is what the <=1100px breakpoint below
   has always used, so it is a measure this design has been rendering correctly
   at some width since the day it was written. */
.sec{padding-top:88px;padding-bottom:76px}

/* section header: 75/25, title left, mark right */
.sechead{display:grid;grid-template-columns:minmax(0,75%) minmax(0,25%);gap:30px;
  align-items:start;margin-bottom:40px}
/* A section header with a lead paragraph closes with an 18px gap to it. One
   WITHOUT a lead was closing with the header's whole 52px bottom margin plus
   the descender space under a 54px line, which measured 104px on "Where the
   data comes from" against 18px on every panel above it. Same page, same kind
   of heading, six times the gap. That is the "out of place" spacing. */
.sechead:not(:has(.lead)){margin-bottom:30px}
.sechead h2{font-size:40px;line-height:44px}
.sechead .lead{margin-top:18px;font-size:18px;line-height:31px;max-width:52ch;color:var(--body)}
.panel--dark .sechead h2,.panel--teal .sechead h2{color:#fff}
.panel--dark .sechead .lead,.panel--teal .sechead .lead{color:#C6D8DA}
.sechead .mark{justify-self:end}
.sechead .mark svg{width:112px;height:112px;display:block}
.sechead .mark svg path[stroke]{opacity:.5}  /* fade the walls, keep the gold door */
.sechead:not(:has(.mark)){grid-template-columns:1fr}
.sechead--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sechead--center .lead{margin-left:auto;margin-right:auto}

/* 50/50 split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.split--art{align-self:center}
.split--art{justify-self:stretch;width:100%}
.split--art svg{width:100%;height:auto;display:block;border-radius:20px}

/* dark inset card (the plum card in the template) */
.deep{background:var(--ink);border-radius:20px;padding:64px 56px;color:#C6D8DA}
.deep h3{font-size:30px;line-height:38px;color:#fff;font-family:var(--display);font-weight:700}
.deep .kicker{font-size:20px;font-weight:700;line-height:26px;color:#fff;margin-top:34px}
.deep ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.deep li{display:flex;gap:14px;align-items:flex-start;font-size:18px;line-height:28px;color:#BFD3D6}
.deep li svg{flex:none;width:22px;height:22px;margin-top:4px}

/* service cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
/* only the cards with a pinned ghost button need a common height */
.grid3:not(:has(.ghost)){align-items:start}
.tile p:last-child{margin-bottom:0}
.tile{background:#fff;border-radius:20px;padding:56px 28px 44px;display:flex;flex-direction:column}
.tile .ico{height:80px;display:flex;align-items:center;margin-bottom:26px}
.tile .ico svg{height:80px;width:auto;display:block}
.tile h3{font-family:var(--sans);font-size:24px;font-weight:700;line-height:31px;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:16px}
.tile p{font-size:18px;line-height:31px;color:var(--body);margin-bottom:30px}
.tile .ghost{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:10px;border:1px solid #DBDBDB;background:none;color:#222;
  font-family:var(--sans);font-size:16px;font-weight:400;text-decoration:none;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.tile .ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.tile .ghost:hover svg path{stroke:#fff}

/* stats */
.statwrap{background:#fff;border-radius:20px;padding:40px}
/* The three counters used to be a narrow column standing beside an illustration,
   which is why the tiles stack. Merging "Built on records that already exist"
   into the section above it left them spanning the full width, where stacking
   three 52px numbers would have added about 500px of page to say three things.
   Side by side they are one band and the section is shorter than either of the
   two it replaced. */
.statwrap--row{margin-top:34px}
@media (min-width:900px){
  .statwrap--row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:22px;
    align-items:stretch}
  .statwrap--row .stile{margin-top:0}
  .statwrap--row .stile + .stile{margin-top:0}
}
.stile{border-radius:16px;padding:30px 32px}
.stile + .stile{margin-top:30px}
.stile .n{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.stile .l{margin-top:10px;font-size:18px;line-height:28px;color:#656565}
.stile--a{background:#ECF7F9}.stile--a .n{color:#006676}
.stile--b{background:#FDF3DF}.stile--b .n{color:#6B4A00}
.stile--c{background:#E9F4E7}.stile--c .n{color:#4C7F41}

/* editorial band */
.pullwrap{max-width:1000px}
.pull{font-family:var(--display);font-weight:700;font-size:40px;line-height:50px;letter-spacing:-.03em;
  color:#fff;text-wrap:balance}
.pull em{font-style:normal;color:var(--gold)}
.pullnote{margin-top:28px;font-size:18px;line-height:31px;color:#fff;max-width:60ch}
.curvebar{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  max-width:1000px;align-items:start}
.curve{background:rgba(0,0,0,.14);border-radius:16px;padding:24px 26px}
.curve .s{font-family:var(--display);font-size:30px;font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.03em}
.curve .t{margin-top:8px;font-size:16px;line-height:24px;color:#E4F1F3}

/* closing CTA */
.cta{text-align:center;padding-top:120px;padding-bottom:100px}
.cta .mk{margin:0 auto 26px;display:block}
.cta h2{font-size:40px;line-height:46px;margin-bottom:16px}
.cta p{font-size:18px;line-height:31px;color:var(--body);max-width:52ch;margin:0 auto 42px}

/* footer */
.foot{background:var(--panel-dark);border-radius:20px 20px 0 0;margin-top:30px;
  padding-top:110px;padding-bottom:72px;color:#92ACB0}
.foot .brand{color:#fff;display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.15;
  text-decoration:none}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:34px;padding-bottom:56px;
  border-bottom:2px solid rgba(255,255,255,.11)}
.foot .blurb{margin-top:20px;font-size:18px;line-height:31px;max-width:40ch}
.foot h3{font-family:var(--sans);font-size:20px;font-weight:400;line-height:22px;color:rgba(255,255,255,.8);
  margin:0 0 20px}
/* Same detached-rule problem as .crumb a, hover only. These are display:block at
   line-height 32, and 44 tall below 1101 once the tap padding lands, so a
   border-bottom drew the gold hover rule 6px under the ink on a desktop and 12px
   under it on a tablet, close enough to the NEXT link in the column to read as a
   divider between two rows rather than an underline of the one being pointed at.
   A transparent decoration at rest keeps the resting footer identical. */
.foot a{display:block;font-size:18px;line-height:31px;color:#92ACB0;width:fit-content;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:transparent;
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.foot a:hover{color:#fff;text-decoration-color:var(--gold)}
.footnote{padding-top:30px;font-size:16px;line-height:27px;max-width:72ch}
.footnote + .footnote{margin-top:12px;padding-top:0}

/* scroll reveal for the sections */
/* content must never depend on JS to be visible: if the reveal script does not
   run, everything below the fold would sit at opacity 0 forever. */
html:not(.js) .up,html:not(.js) .reveal{opacity:1;transform:none}
.up{opacity:0;transform:translateY(30px)}
.up.in{opacity:1;transform:translateY(0);transition:opacity .2s ease,transform .2s ease}
@media (prefers-reduced-motion:reduce){.up,.up.in{opacity:1;transform:none;transition:none}}

@media (max-width:1100px){
  .sec{padding-top:88px;padding-bottom:76px}
  .sechead{grid-template-columns:1fr}
  .sechead h2{font-size:40px;line-height:48px}
  .sechead .mark{display:none}
  .split{grid-template-columns:1fr;gap:34px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .pull{font-size:30px;line-height:41px}
  .cta h2{font-size:40px;line-height:48px}
  .cta{padding-top:88px;padding-bottom:76px}
  .footgrid{grid-template-columns:repeat(2,1fr)}
  .foot{padding-top:88px}
}
@media (max-width:760px){
  .sec{padding-top:64px;padding-bottom:56px}
  .sechead h2{font-size:30px;line-height:37px}
  .sechead{margin-bottom:34px}
  .deep{padding:38px 26px}
  .deep h3{font-size:24px;line-height:31px}
  .grid3{grid-template-columns:1fr;gap:20px}
  .tile{padding:38px 26px 32px}
  /* the frame inset and the gap between tiles have to agree on a phone */
  .statwrap{padding:12px}
  .stile{padding:24px}
  .stile + .stile{margin-top:12px}
  .stile .n{font-size:40px}
  .pull{font-size:24px;line-height:34px}
  .curvebar{grid-template-columns:1fr}
  .cta{padding-top:64px;padding-bottom:56px}
  .cta h2{font-size:30px;line-height:37px}
  /* padding-bottom stayed at the desktop 72 while the top stepped down to 64,
     so the footer was the one panel on the site with more space under its
     content than over it. Every other panel steps both together. */
  .foot{border-radius:0;margin-top:0;padding-top:64px;padding-bottom:56px}
  .footgrid{grid-template-columns:1fr;gap:30px;padding-bottom:36px}
}

/* ============================================================
   CITY PAGE
   ============================================================ */
.cityband{position:relative}
/* The white lift is at 10% 6%, which is exactly where the breadcrumb, the h1 and
   the sub sit. At .15 it composited the panel to about rgb(49,143,158) under
   that text and put WHITE at 3.78:1 and #F1F8F9 at 3.56:1, measured off the
   rendered pixels at 390, 768 and 1440 on the state, county, city, facility and
   /near heroes. It also took the gold focus ring on a breadcrumb link to 2.68:1.
   White on the flat panel is 4.89:1, so the whole 0.39 of headroom was being
   spent on the decoration. .04 is the most this lift can carry and still leave
   white at 4.56:1. The dark lobe is untouched. */
.cityband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 10% 6%,rgba(255,255,255,.04),transparent 58%),
             radial-gradient(90% 70% at 94% 96%,rgba(0,0,0,.2),transparent 62%)}
.cityhero{position:relative;z-index:1;padding-top:76px;padding-bottom:76px}
.cityhero .eyebrow{display:inline-block;background:rgba(0,0,0,.16);color:#fff}
/* A city hero's eyebrow is a LINK to the county (src/build_city.py _county_eyebrow).
   The pill is 30px tall and the anchor inside it is an inline box 14px tall, so
   the tap target for "Caddo Parish" measured 109.7 x 14. The pill is a design
   object and stays 30px: the target is an overlay instead, which reaches 44
   without moving anything. Nothing else is within 20px of it, so the extra 7px
   above and below takes no other target's area. */
.cityhero .eyebrow a{position:relative}
.cityhero .eyebrow a::after{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.cityhero h1{font-size:40px;line-height:46px;color:#fff;letter-spacing:-.03em;max-width:16ch}
/* #F1F8F9 measures 4.55:1 on the flat teal panel, which is 1% of headroom, and
   the panel's own lift spent it. White is the token this hero already uses for
   the h1 and the crumb links, and the size hierarchy carries what the 4% of
   luminance never did. */
.cityhero .sub{margin-top:18px;font-size:18px;line-height:31px;color:#fff;max-width:56ch}
.cityhero form.find{margin-top:34px;max-width:620px}
.cityhero form.find input{background:#fff}

/* the summary strip */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:20px;margin-top:44px;
  grid-auto-rows:1fr}
.fact2{background:rgba(0,0,0,.14);border-radius:16px;padding:24px 26px;
  display:flex;flex-direction:column;justify-content:flex-start}
.fact2 .n{font-family:var(--display);font-size:36px;font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fact2 .t{margin-top:9px;font-size:16px;line-height:24px;color:#E4F1F3}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:20px 12px;align-items:center;margin-bottom:26px}
.filters .lbl{font-size:16px;font-weight:700;color:var(--ink);margin-right:4px}
/* text-decoration:none is not cosmetic here. The city, county and state filter
   bars emit this class on a <button> (src/build_city.py); /near emits it on an
   <a> and a <span> (app/pages.py _radius_row). Without it the four distance
   chips came up underlined, and the pressed one carried a white underline
   through a solid ink pill, while the identical control on a city page did not. */
.chip2{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:24px;
  border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  text-decoration:none;
  font-family:var(--sans);font-size:16px;font-weight:400;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.chip2:hover{border-color:#9FB6B4}
.chip2[aria-pressed="true"],
.chip2[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* a filter with nothing behind it is shown, so the count is still visible,
   but it cannot be pressed into the empty state */
.chip2:disabled{opacity:.45;cursor:default}
.chip2:disabled:hover{background:none;border-color:var(--line);color:inherit;transform:none}
.chip2 .c{font-variant-numeric:tabular-nums;opacity:.8;font-size:14px}
/* no margin-left:auto: the bar always wraps, and the auto margin flung the
   control to the far right of an otherwise empty second row */
.sortwrap{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--muted)}
.sortwrap select{min-height:46px;padding:0 14px;border-radius:8px;border:2px solid var(--line);
  background:#fff;font-family:var(--sans);font-size:16px;color:var(--ink)}

/* facility list */
.list{display:flex;flex-direction:column;gap:16px}
.card2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;
  background:#fff;border:2px solid transparent;border-radius:20px;padding:26px 30px;
  text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.card2:hover{border-color:var(--gold);transform:translateY(-2px)}
.card2 .main{display:block;min-width:0}
.card2 .nm{display:block;font-family:var(--sans);font-size:20px;font-weight:700;line-height:28px;
  color:var(--ink);letter-spacing:-.02em}
.card2 .ad{display:block;margin-top:5px;font-size:16px;line-height:24px;color:var(--muted)}
.card2 .chips3{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* a flat tag, deliberately not the capsule shape the filter buttons use */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;line-height:20px;
  padding:5px 12px;border-radius:6px;border:1.5px solid}
.pill--crit{background:#FBEDEB;border-color:#9A1C17;color:#9A1C17}
.pill--warn{background:#FCF3E5;border-color:#8A4A06;color:#8A4A06}
.pill--calm{background:#F1F4F3;border-color:#C6D1CF;color:#4C6272}
/* 5px puts the 19px star glyphs optically on the 29px name line */
.card2 .side{text-align:right;padding-top:5px}
.stars2{display:inline-flex;gap:3px}
.stars2 i{width:19px;height:19px;display:block;background:#D3DCDA;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars2 i.on{background:var(--accent)}
.card2 .rt{margin-top:6px;line-height:19px;font-size:14px;color:var(--muted);white-space:nowrap}
.card2 .norate{font-size:14px;font-weight:700;color:#9A1C17}
.empty2{background:#fff;border-radius:20px;padding:56px 40px;text-align:center}
.empty2 h3{font-family:var(--display);font-size:24px;color:var(--ink);margin-bottom:10px}
.empty2 p{font-size:18px;color:var(--body)}
.count{font-size:16px;color:var(--muted);margin-bottom:18px}

@media (max-width:1100px){
  .cityhero h1{font-size:40px;line-height:48px}
  .facts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .cityhero{padding-top:44px;padding-bottom:44px}
  .cityhero h1{font-size:30px;line-height:37px}
  .facts{grid-template-columns:1fr;gap:12px;margin-top:30px}
  /* the number stays stacked above its label: a baseline row put every label at
     a different left edge, because the numbers are all different widths */
  .fact2{padding:18px 20px}
  .fact2 .n{font-size:30px}
  /* The listing card, on a phone. It stacks, which is right: the flag chips are
     the longest thing on it and every pixel of width they lose is another line
     they wrap onto. I tried putting the rating back beside the name to reclaim
     the block below, and it made the page LONGER, 15,519px to 16,617px, because
     the chips lost 110px of width and wrapped more than the rating saved.

     What does work is the rating itself. Stacked, the five stars sat above
     "1 out of 5" with a 24px gap above the pair: 87px to say one thing. On one
     row it is 20px, and it reads as a sentence rather than a column.

     Deliberately no smaller type. Dropping the chips from 14px to 13.5 saved
     534px of 15,519, three per cent, and the chips are the sentences that say
     "5 immediate jeopardy findings" to the family of someone who lives there.
     That is the last text on this site that should get smaller. */
  .card2{grid-template-columns:1fr;gap:12px 16px;padding:22px}
  .card2 .side{text-align:left;display:flex;align-items:center;gap:10px;padding-top:0}
  .card2 .rt{margin-top:0}
  .card2 .chips3{gap:6px;margin-top:12px}
  .sortwrap{width:100%}
  .sortwrap select{flex:1}
}

/* ============================================================
   HEADER SEARCH + DROPDOWN
   ============================================================ */
.hdrsearch{position:relative;flex:1 1 300px;min-width:180px;max-width:420px;margin-left:auto}
.hdrsearch input{width:100%;height:52px;padding:0 18px 0 44px;border-radius:26px;
  border:2px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:16px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.hdrsearch input::placeholder{color:#6B7885}
.hdrsearch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,99,111,.14)}
.hdrsearch input:focus:not(:focus-visible){outline:none}
.hdrsearch .mag{position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:#6B7885;pointer-events:none}
/* while a search list is open its panel must not clip it */
.panel.is-searching{overflow:visible}
/* .herocard and .heroart are both z-index:2 and the illustration comes second,
   so it painted on top, and the dropdown's own z-index:50 could not help: it is
   inside the card's stacking context and cannot climb out of it. On a phone the
   list runs past the bottom of the card and the house illustration was drawn
   straight through the middle of it, over two of the results. */
.panel.is-searching .herocard{z-index:60}
.panel.is-searching .heroart{z-index:1}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;
  background:#fff;border:2px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 34px rgba(6,27,92,.13);max-height:60vh;overflow-y:auto}
.mini{display:block;padding:13px 18px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);transition:background-color .15s var(--ease)}
.mini:last-child{border-bottom:0}
.mini:hover,.mini:focus{background:var(--panel-soft)}
.mini .mn{display:block;font-size:16px;font-weight:700;color:var(--ink);line-height:23px}
.mini .ms{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.mininone{padding:20px 18px;font-size:16px;color:var(--muted);margin:0}

/* inline results (home + city hero) */
.results2{margin-top:30px}
.results2 .count{margin:24px 0 18px}
.results2 .card2{border-color:var(--line)}
.cityhero .results2 .card2{border-color:transparent}
.results2 .card2:hover,.cityhero .results2 .card2:hover{border-color:var(--gold)}
.cityhero .results2 .count{color:#fff}
.place2{grid-template-columns:minmax(0,1fr)}
.place2 .nm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em}

@media (max-width:1180px){.hdrsearch{max-width:300px;flex-basis:220px}}
/* below 1000 the field drops to its own full-width row rather than disappearing */
@media (max-width:1000px){
  .hdr{height:auto;padding:13px 0}
  .hdr .inner{flex-wrap:wrap}
  .hdrsearch{order:3;flex:1 0 100%;min-width:0;max-width:none;margin-left:0}
}
.results2:empty{display:none}
/* the homepage results block is a panel like every other band */
.wrapresults{background:var(--panel-soft);border-radius:20px;margin-top:30px}
.wrapresults:has(.results2:empty){display:none}
.wrapresults .inner{padding-top:48px;padding-bottom:56px}
.wrapresults .results2{margin-top:0}
@media (max-width:760px){.wrapresults{border-radius:0;margin-top:0}}

/* ============================================================
   FACILITY PAGE
   ============================================================ */
.crumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:16px;color:#fff;margin-bottom:22px}
/* The underline is a text-decoration, not a border-bottom. Every crumb link is a
   flex item, so it is blockified and its box is the full 32px line box, and at
   1100 and below it also carries 6px of padding for the tap target. A border on
   that box drew the rule 7px under the text on a desktop and 13px under it on a
   phone: a detached hairline floating below the trail on every hero on the site.
   A decoration follows the text and the 45px target is kept. */
.crumb a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3);
  transition:text-decoration-color .18s var(--ease),color .18s var(--ease)}
.crumb a:hover{color:#fff;text-decoration-color:var(--gold)}
.crumb svg{width:12px;height:12px;opacity:.55}

.fachero h1{font-size:40px;line-height:46px;color:#fff;letter-spacing:-.03em;max-width:19ch}
.fachero .meta{margin-top:18px;font-size:18px;line-height:30px;color:#fff;max-width:62ch}
/* the phone number must never break across two lines.
   Same reason as .crumb a: the 11px of padding that makes this a 44px target
   (further down this file) pushed a border-bottom 16px clear of the digits and
   drew a stray rule across the hero. A decoration stays on the text. */
.fachero .meta a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35);
  white-space:nowrap}
.facflags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.facflags:empty{display:none}
.flagpill{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:700;
  padding:8px 15px;border-radius:22px;background:#FBEDEB;color:#9A1C17;border:2px solid #E8A9A2}
.flagpill.warn{background:#FCF3E5;color:#8A4A06;border-color:#E3C08A}
.flagpill b{flex:none;font-family:var(--mono,var(--sans));font-size:14px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:#9A1C17;color:#fff;line-height:22px}
.flagpill.warn b{background:#8A4A06}

.verdict{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:26px;margin-top:44px;
  background:rgba(0,0,0,.14);border-radius:20px;padding:30px;align-items:start}
.verdict .rate .lb{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#E4F1F3;font-weight:700}
.verdict .stars3{display:inline-flex;gap:4px;margin-top:12px}
.verdict .stars3 i{width:26px;height:26px;display:block;background:rgba(255,255,255,.28);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.verdict .stars3 i.on{background:var(--gold)}
.verdict .rate .big{font-family:var(--display);font-size:30px;font-weight:700;color:#fff;margin-top:10px;
  line-height:1.15}
.verdict .cav{margin-top:12px;font-size:14px;line-height:21px;color:#E4F1F3}
/* the rule spans the card, the text keeps a readable measure. Putting both on
   one element drew a divider across 61% of the card and left the rest bare. */
.verdict > .cav{grid-column:1/-1;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;line-height:21px;color:#D6E8EA}
.verdict > .cav > span{display:block;max-width:62ch}
/* the track fits the cells it has. A fixed three-column grid left 47% of the
   card blank on every home with a single tile, which is 6,066 of them. */
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,262px));gap:20px;
  align-content:center;justify-content:start}
.vcell .n{font-family:var(--display);font-size:36px;font-weight:700;color:#fff;line-height:38px;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vcell .n.sm{font-size:30px}
.vcell .t{margin-top:9px;font-size:16px;line-height:24px;color:#E4F1F3}

/* staffing */
.sbar{margin-top:26px}
/* the rule shares the measure of the bar and the sentence above it. Full width
   under 664px of content left 608px of bare rule on every staffing row. */
.srow2{padding:24px 0;border-bottom:2px solid var(--line);max-width:664px}
.srow2:last-child{border-bottom:0}
.srow2 .k{font-size:16px;font-weight:700;color:var(--ink)}
.srow2 .v{font-family:var(--display);font-size:30px;font-weight:700;color:var(--ink);margin-top:4px;
  line-height:1.12;letter-spacing:-.02em}
/* the bar shares the measure of the sentence that explains it */
.track{height:14px;background:#E3E7E4;border-radius:8px;margin-top:14px;position:relative;
  border:1px solid #D2D9D6;max-width:664px}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:#8A4A06}
.track .fill.ok{background:#4C7F41}
/* the bar is scaled provided/needed, so the need level is always the far end */
.track .need{position:absolute;margin-left:-2px;top:-7px;bottom:-7px;width:4px;background:var(--ink);
  border-radius:2px}
.srow2 .say2{margin-top:14px;font-size:16px;line-height:26px;color:var(--body);max-width:62ch}

/* findings */
.legend2{background:#fff;border-radius:16px;padding:24px 26px;margin:24px 0 28px;
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px}
.legend2 > p{grid-column:1/-1}
/* The column track lives on the container and every definition row borrows it
   through subgrid, so the two descriptions share one left edge. As a flex row
   each began right after its own pill, 52px apart. The measure was uncapped and
   ran to 126 characters; 78ch here is the same cap .verdict > .cav uses. */
.legend2 p{align-items:start;font-size:16px;line-height:27px;color:var(--body);
  max-width:62ch}
.legend2 p:has(.sevtag){display:grid;grid-template-columns:subgrid;column-gap:14px;
  max-width:none}
/* a subgrid row is sized by the tracks it spans, so max-width on the row itself
   does nothing. The measure belongs to the description. 62ch is what .say2 and
   .find2 .plain use; this block had no cap at all and ran to 126 characters. */
.legend2 p:has(.sevtag) > *:last-child{max-width:62ch}
/* line-height is set here, not inherited: the same pill was 40px in the legend
   and 46px on the cards below it */
.sevtag{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  line-height:20px;padding:5px 12px 5px 8px;border-radius:20px;border:2px solid}
.sevtag b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:14px}
.sevtag.ij{background:#FBEDEB;border-color:#9A1C17;color:#9A1C17}
.sevtag.ij b{background:#9A1C17;color:#fff}
.sevtag.hm{background:#FCF3E5;border-color:#8A4A06;color:#8A4A06}
.sevtag.hm b{background:#8A4A06;color:#fff}

/* the accent is a pseudo-element, not a border: a 7px border mitred across the
   16px corner radius and tapered to a hook at both ends */
.find2{background:#fff;border-radius:16px;padding:24px 26px 24px 33px;margin-bottom:14px;
  position:relative;overflow:hidden}
.find2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:#9A1C17}
.find2.hm::before{background:#8A4A06}
.find2 .top{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.find2 .dt{font-size:16px;color:var(--muted)}
.find2 .cx{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border:1.5px solid var(--line);padding:4px 10px;border-radius:20px}
.find2 h3{font-size:20px;font-weight:700;color:var(--ink);margin:14px 0 0;letter-spacing:-.02em}
.find2 .plain{margin-top:7px;font-size:18px;line-height:29px;color:var(--body);max-width:62ch}
/* a citation under a requirement CMS has since withdrawn. Reads as a note on
   the rule, not as part of the finding. */
.find2 .gone{margin-top:7px;font-size:16px;line-height:26px;color:var(--muted);
  max-width:62ch;padding-left:13px;border-left:3px solid var(--line)}
.find2 .fixed{margin-top:12px;font-size:16px;color:var(--muted)}
.find2 .fixed.open{color:#9A1C17;font-weight:700}
.find2 .fixed.pending,.find2 .fixed.waiver{color:#8A4A06;font-weight:700}
.find2 .fixed.corrected{color:#4C7F41}
.find2 details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.find2 summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--accent);list-style:none;
  display:inline-flex;align-items:center;gap:8px}
.find2 summary::-webkit-details-marker{display:none}
.find2 summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s var(--ease)}
.find2 details[open] summary::after{transform:rotate(-135deg)}
.find2 .cms{margin-top:10px;font-size:16px;line-height:26px;color:var(--muted);font-style:italic;
  max-width:70ch}
.find2 .cmslab{font-style:normal;font-weight:700;color:var(--ink);display:block;margin-bottom:4px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* a fixed first track: max-content was recomputed per row, so no two rows lined up */
.mixrow{display:grid;grid-template-columns:minmax(0,190px) 44px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:2px solid var(--line)}
.mixrow:last-child{border-bottom:0}
.mixrow .ml2{font-weight:700;color:var(--ink);font-size:16px}
.mixrow .mn2{font-family:var(--display);font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:right}
.mixrow .md2{font-size:16px;color:var(--muted);line-height:24px}

/* what you can do */
.dos2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.do2{background:rgba(255,255,255,.07);border-radius:16px;padding:26px 28px}
.do2 h3{margin:0;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em}
.do2 p{margin-top:10px;font-size:16px;line-height:26px;color:#BFD3D6}

.note{margin-top:26px;font-size:16px;line-height:27px;color:var(--muted);max-width:66ch}
/* A finding the home is formally contesting through Medicare's own process, and
   a staffing figure Medicare itself put a note on. Both are context the page was
   holding and not showing. Muted and small: they qualify the thing above them,
   they do not compete with it. */
.disputed,.footnoted{border-left:3px solid var(--line);padding-left:14px;margin-top:12px;
  font-size:16px;line-height:26px;color:var(--muted)}

.srcnote{font-size:16px;line-height:27px;color:var(--muted);max-width:66ch}
.srcnote + .srcnote{margin-top:14px}

/* Privacy, terms and corrections. Prose pages, so they get a measure and room
   between blocks and nothing else. No new type sizes: h2 and h3 are the ones
   the rest of the site already uses. */
.legal > p,.legal > ul,.legal > ol{max-width:66ch}
.legal > h2{margin-top:48px;font-size:30px;line-height:38px}
.legal > h3{margin-top:32px;font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ink)}
.legal > p,.legal > ul,.legal > ol{margin-top:16px}
.legal > ul,.legal > ol{padding-left:24px}
.legal li{margin-top:8px}
.legal > h2:first-child,.legal > p:first-child{margin-top:0}

/* An unfilled blank. Loud on purpose: these pages are drafts and a reader, or
   Cameron scanning for what is left, must not be able to mistake a gap for a
   finished sentence. Gold ground and ink text is 9.64:1, the same pair the
   primary button uses. */
mark.todo{background:var(--gold);color:var(--gold-ink);padding:1px 6px;border-radius:4px;
  font-weight:700;font-size:.94em}

/* The contact address measured 262x22, just under WCAG 2.5.8's 24px minimum,
   and on the corrections page it is the whole point of the page. Vertical
   padding on an inline box grows the hit area without changing the line box, so
   the prose it sits inside does not reflow. Not 44: that needs an overlay or a
   block, and both would disturb the two that sit mid sentence. */
.legal a[href^="mailto"]{padding:2px 0}

@media (max-width:1100px){
  .fachero h1{font-size:36px;line-height:43px}
  .verdict{grid-template-columns:1fr;gap:24px}
  .dos2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .fachero h1{font-size:30px;line-height:38px}
  .verdict{padding:22px}
  .vgrid{grid-template-columns:1fr;gap:18px}
  .mixrow{grid-template-columns:1fr 56px;gap:8px}
  .mixrow .md2{grid-column:1/-1}
  .find2{padding:20px 20px 20px 27px}
  /* one column on a phone: the pill takes its own line above the text, so
     there is no shared track for the rows to borrow */
  .legend2{grid-template-columns:1fr}
  .legend2 p,.legend2 p:has(.sevtag){display:block}
  /* the tag is inline-flex, so it needs its own box to actually take a line */
  .legend2 .sevtag{display:flex;width:fit-content;margin-bottom:8px}
  .srow2 .v{font-size:24px}
}

/* the label key above a city list: five definitions read as a wall when they
   are stacked full-measure, so they run two up and each one leads with its term */
.keygrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;margin-top:36px}
/* h4, not h3. The markup writes <h4 aria-level="3"> in all sixteen of these,
   on this page and on How ratings work, and this rule named h3, so it matched
   none of them. Every one of those headings was falling back to the browser's
   own h4: 24px of margin above and 24px below where 4px was intended, which is
   why each heading floated between the paragraphs instead of sitting on its own.
   Roughly 700px of unasked-for space across the two pages.
   Written as :is(h3,h4) rather than by correcting the markup because the aria
   level is deliberate and this way the rule survives either choice. */
.keyitem :is(h3,h4){font-family:var(--sans);font-size:16px;font-weight:700;line-height:24px;
  color:var(--ink);letter-spacing:-.02em;margin:0 0 4px}
.keyitem p{font-size:16px;line-height:26px;color:var(--muted);max-width:56ch}
/* an odd count would otherwise leave the last definition beside an empty cell */
/* was grid-column:1/-1, which stretched the row to 1272px while the text kept
   its 56ch measure, leaving a 672px hole under a two column grid. */
.keyitem:last-child:nth-child(odd){grid-column:auto}
@media (max-width:900px){
  /* the gap between two definitions has to beat the leading inside one */
  .keygrid{grid-template-columns:1fr;gap:34px}
  .keyitem :is(h3,h4){margin-bottom:8px}
}

/* ============================================================
   STATE PAGE
   ============================================================ */
.statehero h1{max-width:15ch}

/* browse by city */
.citycols{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;
  grid-auto-rows:60px}
.ctile{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:0;
  background:#fff;border:2px solid transparent;border-radius:14px;padding:8px 20px;
  text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.ctile:hover{border-color:var(--gold);transform:translateY(-2px)}
.ctile .cn{font-size:16px;font-weight:700;line-height:19px;color:var(--ink);letter-spacing:-.02em;
  min-width:0;overflow-wrap:break-word;hyphens:auto}
.ctile .cc{font-size:14px;line-height:21px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
/* the 404's calls to action size to their own text. They were city tiles, so
   they inherited the city grid and its empty right third. */
.ctas{display:flex;flex-wrap:wrap;gap:14px}
.morecities{margin-top:28px;font-size:16px;line-height:27px;color:var(--muted);max-width:66ch}

/* Folded blocks: the towns with a single home, and the homes Medicare names as
   Special Focus candidates. See build_state.py for why each is shut.
   Styled as a control rather than a bare triangle: 52px tall so it clears the
   44px touch target, and the marker replaced because the native one is about
   9px and sits outside the box on Safari. */
.fold{border-top:1px solid var(--line);padding-top:26px}
.fold > summary{display:flex;align-items:center;gap:12px;min-height:52px;
  padding:12px 20px;background:var(--white);border:2px solid var(--line);border-radius:26px;
  font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;width:fit-content;max-width:100%}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{content:"";width:9px;height:9px;flex:none;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s var(--ease)}
.fold[open] > summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.fold > summary:hover{border-color:var(--gold)}
.fold > summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fold > summary::before{transition:none}}

/* "Philadel/phia".

   The tile puts the place name and its count on one line. At 360px that left
   the name 94px, and overflow-wrap:break-word then did exactly what it is told:
   on Pennsylvania 119 of 383 tiles broke inside the word, on /browse 25 of the
   53 states did, and Massachusetts read "Massachus etts". hyphens:auto is set
   and does not fire, so it cannot be leaned on.

   Shrinking the name to 15px fixed most of it and still broke five names on
   Pennsylvania. Shrinking further is the wrong direction anyway: the people
   reading this site are the families of elderly people and a good number of
   them are elderly.

   So on a phone the count moves under the name instead of beside it, and the
   name gets the whole tile. It stays 17px, the tile stays 58px, and the page
   grows by 408px out of 30,000. Checked against the longest single-word place
   names in the country, Correctionville, Charlottesville and Montgomeryville at
   fifteen characters: every one sits on a single line, unclipped, inside its
   tile. Zero mid-word breaks at 320, 360, 390 and 414. */
@media (max-width:430px){
  .ctile{flex-direction:column;align-items:flex-start;justify-content:center;
    gap:0;padding:7px 10px}
  .ctile .cn{font-size:16px;line-height:19px}
  .ctile .cc{font-size:14px;line-height:17px}
}

/* The smallest phones still in use, an iPhone SE at 320px and a folded Galaxy
   at 280. Two columns there leave 111px for a name however the tile is laid
   out, which still broke 67 of Pennsylvania's 383 and 66 of Tennessee's 254.
   One column gives the name 268px and every place name in the country fits.
   It is a taller page, but only on the screens where the alternative is
   "Philadel/phia", and those screens are scrolling either way. */
@media (max-width:345px){
  .citycols{grid-template-columns:1fr}
}

/* ============================================================
   BROWSE MAP
   Two renderings of the same 53 links, one on screen at a time: the
   geographic map at 900px and up, the tile grid below it. The full text list
   sits under both and is never replaced, because a crawler cannot click an SVG
   and a screen reader should not have to.

   Nothing here is shaded by data. Colour on a national map reads as a league
   table, and inspection stars are graded on a curve inside each state, so
   there is no honest national number to shade with.
   ============================================================ */
/* visible the moment it is focused, which is the only time it is any use */
.skipmap{position:absolute;left:-9999px;display:inline-block;padding:10px 18px;
  background:var(--ink);color:#fff;border-radius:10px;text-decoration:none;font-size:16px}
.skipmap:focus{position:static;left:auto;margin:0 0 18px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:34px;
  align-items:start;margin:0 0 44px;max-width:1140px}
.mapbox{min-width:0}
.usmap{display:block;width:100%;height:auto}
/* the state's own code, printed on the state. Without labels the map asked a
   reader to recognise 51 shapes, which is a quiz, not a way in. */
.mlab{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--ink);
  text-anchor:middle;dominant-baseline:central;pointer-events:none;opacity:.72}
.mpath.lit + .mlab,.mlab.lit{opacity:1}

/* Light land, drawn border. The border is what carries the contrast, the way it
   does on a paper map: a fill dark enough to clear 3:1 against this panel on its
   own would leave the hover state nowhere to go. */
.mpath path{fill:#E4EEEC;stroke:#628589;stroke-width:1.1;
  transition:fill .16s var(--ease)}
.mpath:hover path,.mpath:focus-visible path,.mpath.lit path{fill:var(--panel-hero)}
.mpath:focus{outline:none}
.mpath:focus-visible path{stroke:var(--ink);stroke-width:2.4}
/* DC is 5px wide at full size, so its own border is most of it */
.mpath[data-st="DC"] path{stroke-width:.5}

/* the locator, drawn only for a state whose chip is hovered or focused */
.mring{fill:none;stroke:var(--ink);stroke-width:2.6;opacity:0;
  transition:opacity .16s var(--ease)}
.mring.lit{opacity:1}

.mapread{margin:6px 0 0;font-size:16px;line-height:26px;color:var(--muted);
  min-height:28px;font-variant-numeric:tabular-nums}

.mapside{padding-top:4px}
.mapsidelab{margin:0 0 10px;font-size:14px;line-height:20px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.mapchips{display:flex;flex-direction:column;gap:6px;margin:0 0 26px}
.mapchip{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;background:#fff;border:2px solid transparent;border-radius:12px;
  padding:6px 14px;text-decoration:none;color:inherit;
  transition:border-color .16s var(--ease)}
.mapchip:hover,.mapchip:focus-visible,.mapchip.lit{border-color:var(--gold)}
.mapchip .cn{font-size:16px;font-weight:700;line-height:20px;color:var(--ink);
  letter-spacing:-.02em}
.mapchip .cc{font-size:14px;line-height:19px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none}
.mapnote{margin:-18px 0 26px;font-size:14px;line-height:22px;color:var(--muted)}

/* Contents, on How ratings work only.

   That page is 1,391 words and six minutes, and cutting it would be the wrong
   fix: every paragraph on it is the explanation somebody came for. What makes a
   reference page feel long is not being able to reach your own question. A
   reader who wants to know what one star means should be one tap from it rather
   than six minutes into it. */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  border:2px solid var(--line);border-radius:24px;background:var(--white);
  font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);
  text-decoration:none;transition:border-color .16s var(--ease)}
.toc a:hover{border-color:var(--gold)}
.toc a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* A jump link that lands with the heading hard against the top of the window is
   a jump link that looks broken, so every anchor target keeps a little air. */
:target{scroll-margin-top:24px}
/* There is deliberately no scroll-behavior:smooth here. I added one with these
   links on 8 Sep 2026 and it stopped the page scrolling at all in testing:
   window.scrollTo with behavior "smooth" moved nothing, the same call with
   "instant" moved 800px, and the anchor jumped correctly the moment the rule
   was disabled. It would have taken the "Get started" button down with it,
   since that is an anchor too. A nicety that can silently disable every jump
   link on the site is not worth having. */

/* the phone rendering. Equal squares beat true shapes at this size: Rhode
   Island is 5px wide on a 390px screen and DC is one and a half. */
.tilemap{display:none;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows),auto);gap:3px;margin:0 0 34px}
.mtile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1;background:#E4EEEC;border:1px solid #628589;border-radius:7px;
  text-decoration:none;color:var(--ink);padding:2px;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.mtile:hover,.mtile:focus-visible{background:var(--panel-hero);border-color:var(--ink);color:#fff}
.mtile .ts{font-size:14px;font-weight:700;line-height:16px;letter-spacing:0}
.mtile .tc{font-size:14px;line-height:17px;font-variant-numeric:tabular-nums;opacity:.75}

@media (max-width:1100px){
  .mapwrap{grid-template-columns:minmax(0,1fr) 200px;gap:24px}
}
/* above 900px the geographic map, at 900 and below the tile grid. Never both,
   and the full text list is under either one. */
@media (max-width:900px){
  .mapwrap{display:none}
  .tilemap{display:grid}
}
/* under about 430px the squares stop holding two lines. The count goes, the
   code stays full size: a 26px square is small enough already. */
@media (max-width:430px){
  .mtile .tc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mpath path,.mring,.mapchip,.mtile{transition:none}
}


/* staffing comparison (dark panel) */
.cmp{max-width:880px}
.cmprow{padding:30px 0;border-bottom:2px solid rgba(255,255,255,.13)}
/* Three short, unrelated statements stacked in a single 880px column inside a
   1,320px panel: 845px tall, 119 words, and the entire right half of the panel
   empty. They do not build on each other and there is no reason to read them in
   order, so on a wide screen they sit side by side and the panel is a third of
   the height. The rules between them become the gaps between columns. */
@media (min-width:1000px){
  .cmp--3up{max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
  .cmp--3up .cmprow{padding:0 40px 0 0;border-bottom:0;
    border-right:2px solid rgba(255,255,255,.13)}
  .cmp--3up .cmprow:last-child{border-right:0;padding-right:0}
  .cmp--3up .csay{margin-bottom:0}
}
/* the block's own edges come from .sec, so the first and last row do not add to them */
.cmprow:first-child{padding-top:0}
.cmprow:last-child{border-bottom:0;padding-bottom:0}
.cmprow .ck{font-size:16px;font-weight:700;color:#fff}
.cmprow .cv{font-family:var(--display);font-size:36px;font-weight:700;color:#fff;line-height:1.12;
  margin-top:5px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cmpbar{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.14);margin-top:18px}
.cmpbar .f{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:#E5B45B}
.cmpbar .f.ok{background:#7FCB8F}
.cmpbar .mk2{position:absolute;top:-8px;bottom:-8px;width:3px;background:#fff;border-radius:2px}
.cmpkeys{display:flex;flex-wrap:wrap;gap:20px;margin-top:15px;font-size:14px;line-height:22px;color:#BFD3D6}
.cmpkeys span{display:inline-flex;align-items:center;gap:9px}
.cmpkeys i{width:14px;height:14px;border-radius:4px;display:block;flex:none;background:#E5B45B}
.cmpkeys i.ok{background:#7FCB8F}
.cmpkeys i.mk{width:3px;height:16px;border-radius:2px;background:#fff}
.cmprow .csay{margin-top:15px;font-size:16px;line-height:26px;color:#BFD3D6;max-width:62ch}
.cnote{margin-top:40px;max-width:62ch;font-size:16px;line-height:27px;color:#A9C2C6;
  border-left:3px solid rgba(255,255,255,.22);padding-left:24px}

/* rating distribution (teal panel) */
.dist{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:38px;align-items:end}
.dcol{display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
/* no non-zero baseline: a bar's height is only ever its share of the tallest */
/* a zero bucket stays blank; anything non-zero keeps a readable floor */
.dbar{border-radius:10px 10px 0 0;background:rgba(255,255,255,.70);
  height:max(calc(var(--p,0) * 2px),calc(min(var(--p,0),1) * 6px))}
.dcol.lo .dbar{background:#F5CFCA}
.dcol.hi .dbar{background:var(--gold)}
/* "not rated" is not a grade, so it does not get a grade's solid fill. Hue
   alone would not carry it anyway: it read identically to "three stars". */
.dcol.nr .dbar{background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.88)}
.dcol .dn{font-family:var(--display);font-size:24px;font-weight:700;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums}
.dcol .dl{font-size:14px;line-height:21px;color:#F1F8F9}
.distnote{margin-top:30px;font-size:16px;line-height:27px;color:#fff;max-width:66ch}

@media (max-width:1100px){
  .dist{gap:10px}
  .dcol .dn{font-size:20px}
  .dcol .dl{font-size:14px;line-height:20px}
}
@media (max-width:760px){
  .citycols{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:58px}
  .ctile{padding:7px 15px;gap:10px}
  .cmprow .cv{font-size:30px}
  .dist{grid-template-columns:1fr;gap:10px;align-items:stretch}
  .dcol{display:grid;grid-template-columns:minmax(2.5ch,max-content) minmax(0,10ch) minmax(0,1fr);
    align-items:center;gap:14px}
  .dcol .dn{order:1;font-size:20px}
  .dcol .dl{order:2;text-align:left}
  .dbar{order:3;height:15px;border-radius:8px;
    width:max(calc(var(--p,0) * 1%),calc(min(var(--p,0),1) * 6px))}
}

/* ============================================================
   MOBILE: touch targets and the breadcrumb
   ============================================================ */
@media (max-width:760px){
  /* secondary links were 32-33px tall and stacked with no gap between them */
  .foot a{padding:6px 0}
  .crumb a{display:inline-block;padding:6px 0}
  .find2 summary{padding:8px 0}
  .findhint a{display:inline-block;padding:8px 0}
  /* the separator belongs to the crumb that follows it, so it wraps with it
     instead of being stranded at the end of the previous line */
  .crumb svg{display:none}
  .crumb > *:nth-child(n+2):not(svg)::before{content:"\203A";opacity:.55;margin-right:9px}
  /* the current page's own name ran to three lines inside a four line crumb,
     which is most of a phone screen spent restating the h1 directly below it.
     Bound it to one line; the trail stays visible and the full name is the
     heading underneath. */
  .crumb .cur{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    display:inline-block;vertical-align:bottom}
}


/* The prefers-reduced-motion block near the top of this file is overridden by the
   component rules that come after it: .card2 and .ctile set transition and a
   hover transform at lines 384 and 667, same specificity, later source wins. So
   the reset silently did nothing for every card and every city tile, while .btn
   escaped only because its rules sit above the block. Measured with REDUCE=1:
   .card2 transition-duration 0.18s, .btn 0s.

   This block is last on purpose. Do not move it, and add new motion resets here
   rather than to the block above. */
@media (prefers-reduced-motion: reduce) {
  .card2, .ctile, .chip2, .mtile, .mapchip, .stile { transition: none !important }
  .card2:hover, .ctile:hover, .card2:focus-visible, .ctile:focus-visible { transform: none }
}

/* DC renders 3.4 x 4.1 px, and its stroke-width rule sat after the focus rule at
   equal specificity, so it was the one state on the map with no focus stroke. */
.mpath[data-st="DC"]:focus-visible path { stroke-width: 2.4 }

/* A 3px outline at 3px offset landed outside the dropdown's own overflow clip, so
   the focus ring on a result row was cut away on all four sides. */
.dropdown .mini:focus-visible { outline-offset: -3px }

/* With scripting off the nav is never hidden, so below 1250px it sat permanently
   open over the hero while its own toggle reported aria-expanded="false". And the
   filter chips and sort select rendered as live controls with nothing behind them. */
html:not(.js) .navtoggle { display: none }
html:not(.js) .mainnav { position: static; box-shadow: none; padding: 0; border: 0 }
html:not(.js) .filters { display: none }


/* The chip and the sort select had no boundary that cleared 3:1: a #DFE5E4 border
   on the #F2F0EC panel measures 1.12:1, and the white fill 1.09:1, so the control
   had no perceptible edge at all. #788C8B measures 3.12:1 on the panel and 3.55:1
   on white, and stays in the teal-grey family the rest of the page uses. */
.chip2, .sortwrap select { border-color: #788C8B }
.chip2:hover, .sortwrap select:hover { border-color: #0B3948 }

/* A blanket opacity:.45 dropped the disabled chip's label to 2.62:1 and its count,
   which also carries .c{opacity:.8}, to 2.06:1. The count is deliberately kept
   visible, so it has to be legible. Carry the disabled signal on the border and
   the cursor instead of on the ink. */
.chip2:disabled { opacity: 1; color: #5F6E6D; border-color: #C6CFCE; cursor: default }
.chip2:disabled .c { opacity: 1; color: #5F6E6D }

/* The tile count reappears at 431px but needs about 31px of height, more than the
   column gives until roughly 490, so aspect-ratio:1 lost to content and the grid
   stopped being square between those widths. */
@media (max-width: 489px) {
  .mtile .tc { display: none }
}

/* The count row on a map tile kept opacity .75 through the hover and focus state,
   where the ground goes teal and the text white, landing at 3.47:1. */
.mtile:hover .tc, .mtile:focus-visible .tc { opacity: 1; color: #E8F3F4 }


/* The filter bar was one wrapping flex row, so "Show only" and "Sort by" did not
   share a left edge and the chips sat 31px right of the select. At 768 the chips
   wrapped into three different left edges. A two column grid gives both labels
   one column and both control groups the other, at every width. The role=group
   and aria-labelledby also give the four chips a name a screen reader can use;
   before this they were four loose buttons beside some plain text. */
.filters { display: grid; grid-template-columns: max-content minmax(0, 1fr);
           gap: 18px 14px; align-items: center }
.filters .lbl { margin-right: 0 }
.chiprow { display: flex; flex-wrap: wrap; gap: 12px }
.sortwrap { display: flex; align-items: center }
/* a rectangle among pills */
.sortwrap select { border-radius: 24px; padding-left: 16px }
@media (max-width: 700px) {
  .filters { grid-template-columns: minmax(0, 1fr) }
  .filters .lbl { margin-bottom: -8px }
}


/* The empty star was white at .28 over the teal hero, which put it at 2.11:1
   against the gold filled star. The obvious fix, raising the alpha, makes it
   WORSE: a lighter empty star moves toward the gold, and .45 measures 1.59:1.
   Darkening it is what separates them. rgba(0,0,0,.30) gives 5.83:1 against the
   gold and still reads as a star shape at 1.68:1 against the panel. */
.verdict .stars3 i { background: rgba(0,0,0,.30) }
.verdict .stars3 i.on { background: var(--gold) }

/* .citycols gap moved into the base rule at the top of this file. Appending it
   here beat the phone override in the max-width:760px block, because a media
   query adds no specificity and this rule came later in the file. */

/* The input and the panel under it share exact left and right edges 8px apart,
   so a 26px pill over a 16px panel reads as a mistake rather than two shapes. */
.dropdown { border-radius: 26px }


/* Touch targets were only widened below 760px, so iPad portrait and landscape
   got none of it: footer and breadcrumb links 33px, the home hero's example
   links 18px tall and 8px apart. And the phone number in a facility hero, the
   most-tapped link on that page, had no rule at any width and measured 22px.

   The footer was named in that note and then left out of the selector below, so
   footer links were still 32px tall at 768 and at 1100 while the breadcrumb
   beside them was 44. .foot a is in the list now: measured 32 before, 44 after,
   at both widths. */
@media (max-width: 1100px) {
  .crumb a, .find2 summary, .findhint a { display: inline-block; padding: 6px 0 }
  .foot a { padding: 6px 0 }
  .footgrid > :first-child { grid-column: 1 / -1 }
  .foot { padding-bottom: 58px }
  .cityhero { padding-top: 50px; padding-bottom: 50px }
}
.fachero .meta a { display: inline-block; padding: 11px 0 }

/* The map was capped 132px short of the state grid directly beneath it, so their
   right edges did not line up on any screen above 1140. It scales, so the cap
   was doing nothing but breaking the alignment. */
.mapwrap { max-width: none }


/* Measure caps. Several blocks had none and ran the full 1272px card, which is
   about 145 characters at 17px against the 62ch this page uses everywhere else.
   The rules under them ran the full width too, so a card with 700px of content
   carried a 1272px hairline and read as having a hole in it. This is the same
   defect the .srow2 comment records fixing for the staffing rows. */
.sbar > .say2 { max-width: 62ch }
.findlist { max-width: 764px }
.mixrow { max-width: 836px }
.legend2 { max-width: 874px }
.mixrow .md2 { max-width: 62ch }

/* The empty part of a staffing track is the scale the fill is read against, and
   it had no perceptible edge: #D2D9D6 on #F2F0EC is 1.26:1. #788C8B is the value
   this file already validated at 3.12:1 on the same panel. Same for the
   "From a complaint" pill, which was a 1.28:1 ghost outline next to a pill with
   an 8.23:1 border. */
.track { border-color: #788C8B }
.find2 .cx { border-color: #788C8B }

/* A gap that rounds to zero is neither short nor over. */
.track .fill.same { background: var(--accent) }

/* The benchmark marker sat on top of the fill's rounded cap when the two met. */
.track .need { outline: 2px solid var(--panel-soft) }

/* The legend's severity pill was stretched to match its wider sibling by the
   subgrid track, so "Actual harm" carried 66px of empty tail. */
.legend2 p:has(.sevtag) > .sevtag { justify-self: start }

@media (max-width: 760px) {
  /* .fact2 .n steps to 30px on a phone and .vcell .n, the same component on the
     facility page, had no step at all and stayed at 40px. 30px is a size already
     in use here, so this adds none. */
  .vcell .n { font-size:30px }
}


/* Non-text contrast, WCAG 1.4.11. All colour, no geometry, no type sizes.
   #788C8B is the boundary token this file already validated at 3.55:1 on white
   and 3.12:1 on the soft panel. */
.hdrsearch input, .dropdown, .navtoggle { border-color: #788C8B }
/* the hero field's border was rgba(101,101,101,.5), which composites to #B2B2B2
   at 2.12:1 on the white card it sits in */
form.find input { border-color: #788C8B }
/* the gold submit button on the white hero card had no boundary at all: its own
   fill measures 1.41:1 against the card. An inset ring keeps the 60px height,
   the way .btn--line already does. */
.herocard .btn--gold { box-shadow: inset 0 0 0 2px #7A5A00 }
/* .panel--dark scoped the gold focus ring, but the six Learn more buttons sit on
   WHITE tiles inside that panel, so their ring was gold on white at 1.41:1. It
   was the only focus ring on the site under 3:1; every other measures 10.9:1 or
   better. */
.panel--dark .tile :focus-visible { outline-color: var(--ink) }
.tile .ghost { border-color: #788C8B }
/* the disabled-chip hover rule outranked the fix written for it earlier today
   and put the 1.28:1 border back on hover */
.chip2:disabled:hover { border-color: #C6CFCE; color: #5F6E6D; background: #fff }


/* Tiles were a fixed 60px row (58 on a phone), so any label wrapping past two
   lines spilled out of the white tile and printed on top of the row beneath.
   Connecticut's planning regions are the worst case: 9 of its tiles need 77px in
   a 58px row at 390, and the screenshot shows "Region" printed over
   "Northeastern". minmax keeps the rhythm and lets a long label breathe. */
.citycols { grid-auto-rows: minmax(60px, auto) }
@media (max-width: 760px) {
  .citycols { grid-auto-rows: minmax(58px, auto) }
}

/* The three flagged-home cards on a state page carry no .ghost button, so
   .grid3:not(:has(.ghost)){align-items:start} fired and left their bottoms 192px
   apart on Connecticut. And between 761 and 1100 the three-card set split 2 + 1,
   leaving one card beside an empty cell. */
.panel--soft .grid3, .panel--dark .grid3 { align-items: stretch }
@media (max-width: 1100px) {
  .grid3 { grid-template-columns: 1fr }
}

/* A bucket with a real but small count clamped to a 6px stub that does not read
   as a bar at all: Texas has 12 homes with no rating and drew 8px. At 390 the
   same rule gave a 7px wide, 15px tall rounded pill that reads as the digit 0.
   A zero bucket now gets a 3px mark so the row reads as an axis. */
.dcol .dbar {
  height: max(calc(var(--p, 0) * 2px), calc(min(var(--p, 0), 1) * 18px), 3px)
}
@media (max-width: 760px) {
  .dcol .dbar {
    width: max(calc(var(--p, 0) * 1%), calc(min(var(--p, 0), 1) * 22px), 3px)
  }
}

/* The staffing track on the dark panel is the scale its fill is read against and
   measured 1.54:1. Raising its alpha would clear the panel but sink the fill, so
   give it an edge instead: the outline computes to about 5:1 on the panel while
   the fill keeps its 5.6:1. */
.cmpbar { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5) }

/* .verdict .stars3 got its empty pip darkened earlier today and .stars2, the
   same component on every card, was left at 1.40:1 against the white card. A
   true 3:1 is unreachable without collapsing filled-versus-empty, so this takes
   it to 1.84:1 on the card while keeping 3.79:1 against the filled pip. */
.stars2 i { background: #B4C2BF }


/* align-items:center put "Show only" against the middle of a wrapped chip block,
   so between 701 and 1200 the label floated 29 to 58px below the first chip and
   read as labelling the middle row. */
.filters { align-items: start }
.filters .lbl { min-height: 46px; display: flex; align-items: center }

/* The eleven state chips beside the map had a transparent resting border and a
   1.14:1 white fill on the panel, and their hover and cross-highlight state was
   carried by a gold border at 1.24:1 against that panel. Hovering a sliver
   state's shape lights its chip, and that was the chip's only feedback. Same
   token and the same reasoning as .chip2. */
.mapchip { border-color: #788C8B }
.mapchip:hover, .mapchip.lit { border-color: var(--ink) }

/* The third pill tier had no visible container: a 1.11:1 fill inside a 1.56:1
   border, next to siblings whose borders measure 8.23:1 and 6.86:1. */
.pill--calm { border-color: #788C8B }

/* The tile grid's gutter is 3px and the focus ring is 3px at 3px offset, so a
   focused tile's ring lapped into all four neighbours. Same remedy as the
   dropdown rows. The teal fill change carries the state on its own. */
.mtile:focus-visible { outline-offset: -3px }

/* A select is a different KIND of control from a toggle, and at 24px it was
   pixel-identical to a chip apart from the chevron, so a menu looked like a
   pressed toggle. This reverses a change I made earlier today for visual
   consistency; affordance beats matching corners when the two controls do
   different things. */
.sortwrap select { border-radius: 8px }

/* /browse: the hero was 729px tall on a laptop and pushed the map, which is the
   point of the page, to 1,428px down. The four fact tiles are one line now. */
.browsehero{padding-top:38px;padding-bottom:38px}
.browsehero h1{font-size:36px;line-height:44px}
.browsehero .sub{margin-top:14px;max-width:62ch}
.browsehero form.find{margin-top:26px}
.browsestats{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-size:16px;line-height:26px;color:var(--muted);max-width:80ch}
.sechead--tight{margin-bottom:26px}
.sechead--tight .lead{margin-top:10px}
.sec--tight{padding-top:34px;padding-bottom:56px}
@media (max-width:900px){
  .browsestats{margin-top:20px;font-size:16px;line-height:26px}
  .sec--tight{padding-top:32px;padding-bottom:40px}
}


/* ============================================================
   PHONE DENSITY
   Most people arrive on a phone, and the first screen was being spent
   on decoration. On a 375x812 phone the home page put the search box
   577px down, and a state page put "Start with your town" 1,899px
   down: two and a half screens of scrolling before the page does the
   thing it exists to do. Nothing is taken away here. The type steps
   down one notch, the padding comes in, and the four summary tiles
   sit two across instead of four deep.
   ============================================================ */
@media (max-width:760px){
  /* home hero */
  .hero .inner{padding:18px 20px}
  .herocard{padding:28px 22px 32px}
  .herocard h1{font-size:32px;line-height:39px}
  .herocard p{margin-top:14px;font-size:17px;line-height:27px}
  form.find{margin-top:24px;gap:12px}
  .herocard .findhint,.findhint{margin-top:12px;line-height:24px}

  /* state, county and town heroes */
  .cityhero{padding-top:30px;padding-bottom:34px}
  .cityhero h1{font-size:28px;line-height:35px}
  .cityhero .sub{margin-top:14px;font-size:17px;line-height:27px}
  .cityhero form.find{margin-top:24px}
  .crumb{margin-bottom:16px}

  /* the four summary tiles, two across. The label is the long part, so it
     takes the size step and the number keeps its weight. */
  .facts{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
  .fact2{padding:15px 14px}
  .fact2 .n{font-size:26px}
  .fact2 .t{margin-top:6px;font-size:14px;line-height:20px}

  /* the bands below, which repeat down the whole page */
  .sec{padding-top:46px;padding-bottom:44px}
  .sechead{margin-bottom:26px}
  /* stated again because .sec is set above it and the two are equal weight */
  .sec--tight{padding-top:28px;padding-bottom:34px}
  .browsehero{padding-top:26px;padding-bottom:28px}

  /* The eyebrow wrapped onto a second line on a phone, because .14em of
     tracking on uppercase is wide. One line, and it stops being 48px of
     nothing. */
  .eyebrow{font-size:13px;letter-spacing:.06em;margin-bottom:14px}

  /* One search box per page. The header carries its own field, and on the
     home page it sat 380px above a second, much bigger one asking for the
     same thing; on a state or town page it sat above that page's own. The
     header does not stick on a phone, so it scrolls away either way and
     nothing is lost by dropping it where the page already has a field.
     Pages with no field of their own, which is every facility page, keep it.
     A browser without :has() shows both, which is what today does. */
  body:has(main form.find) .hdrsearch{display:none}
}


/* ============================================================
   THE SAME LADDER ON A LAPTOP
   The phone block above fixed an inversion: h1 28, h2 30. On a laptop the two
   were merely equal, 40 and 40, on every state, town, county and home page, so
   the title of the page still did not outrank the headings inside it. The h1
   goes up rather than the h2s coming down, so no section heading on a page
   Cameron has already signed off changes size at full width.
   ============================================================ */
.cityhero h1,.fachero h1,.browsehero h1{font-size:48px;line-height:54px}
@media (max-width:1100px){
  .cityhero h1,.fachero h1,.browsehero h1{font-size:40px;line-height:48px}
  .sechead h2,.cta h2{font-size:36px;line-height:42px}
}

/* ============================================================
   PHONE TYPE: one ladder, top to bottom
   On a 390px phone the h1 was 28px and the h2s underneath it were 30px, so
   the title of a page was smaller than the headings inside it and nothing
   read as the top of anything. Body prose was 16px on the home page, 17 on a
   state and 18 on a home's page, all doing the same job, and inside the
   citation and legend cards 18px sat in a 295px box: 27 to 31 characters a
   line, where comfortable reading is 45 to 75.

   The ladder is 30 / 24 / 20 / 18 / 16, and every one of those is a size the
   site's nine-size scale already uses. 18 is the one intro paragraph under a
   heading, 16 is everything else. The advertisements join the same ladder,
   because a 30px ad headline under a 24px section heading is exactly the
   "looks good but laid out wrong" Cameron was pointing at.
   ============================================================ */
@media (max-width:760px){
  .herocard h1,.cityhero h1,.fachero h1,.browsehero h1{font-size:30px;line-height:37px}
  .sechead h2,.cta h2,.legal > h2{font-size:24px;line-height:31px}
  .deep h3,.tile h3,.empty2 h3{font-size:20px;line-height:27px}
  /* these three take their leading from the body, so a 20px heading was
     drawing on 31px of line box */
  .find2 h3,.sec > h3{line-height:27px}
  .do2 h3{line-height:25px}

  /* the intro paragraph under a heading */
  .herocard p,.cityhero .sub,.browsehero .sub,.sechead .lead,.fachero .meta{
    font-size:18px;line-height:28px}
  /* and everything else that is read rather than scanned */
  .find2 .plain,.find2 .cms,.find2 .gone,.legend2 p,.srow2 .say2,.legal > p{
    font-size:16px;line-height:26px}

  /* the cards those paragraphs sit inside. 26px of padding each side of a
     342px column left 290px of text to read. */
  .legend2{padding:18px}
  .find2{padding:18px 18px 18px 25px}
}


/* Option B, chosen 29 Sep 2026. On the system stack a heading set at the body's
   own weight reads flat, because it is literally the same typeface doing both
   jobs. Heavy, with the tracking pulled in, is how Apple sets its own headlines
   and it gives the title presence without a second font or a download.
   Anything that sets its own weight or tracking more specifically keeps it. */
h1,h2,h3,.jehl-lead,.jehl-bandh,.jehl-stripq{font-weight:800;letter-spacing:-.035em}


/* ============================================================
   THE READING COLUMN, AND THE FACTS FIRST
   Cameron, 29 Sep 2026, on a laptop: the spacing looks weird, and I had to
   scroll two or three times to get to the facts.

   Measured on Graceland at 1728px wide: the container gives 1272px of usable
   column, and the blocks inside it are 589px (a section intro), 664px (a
   staffing bar), 764px (a citation card) and 874px (the legend). Every
   paragraph is capped at 52 to 70 characters, which is right for reading, but
   nothing was ever designed to sit in the other half, so all of it collected
   into one dead strip down the right side of the page. Not too much white
   space. White space with no job.

   A reading section now gets a frame that fits its own column. The hero keeps
   the full width, because the stat strip is the one block that actually uses
   it. Town and county tile grids keep it too: they are a grid, not a column,
   and narrowing them would only make those pages taller.
   ============================================================ */
.sec--read{max-width:880px}

@media (max-width:760px){
  /* the four facts, two across. One per row was 663px of scrolling for four
     numbers, which is most of a phone screen. */
  .vgrid{grid-template-columns:repeat(2,1fr);gap:16px 14px}
  .vcell .n{font-size:24px;line-height:28px}
  .vcell .n.sm{font-size:20px;line-height:26px}
  .vcell .t{margin-top:6px;font-size:14px;line-height:20px}
  .verdict{margin-top:26px;padding:18px}
  .verdict .rate .big{font-size:26px}
  /* the last crumb is the page's own name, repeated as the h1 directly under
     it. On a 390px screen it wrapped to three lines to say nothing. */
  .crumb .cur{display:none}
  /* the address, phone, beds and ownership now sit below the verdict */
  .fachero .meta{margin-top:22px;font-size:16px;line-height:26px}
  .facflags{margin-top:14px}
}


/* The label glossary on a town page now sits under the list of homes rather
   than in front of it, so it needs a heading of its own and a real gap above
   it. Five definitions with no heading, arriving after a list, would read as
   more list. */
.keyhead{margin-top:64px;padding-top:30px;border-top:1px solid var(--line)}
.keyhead h3{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em;margin:0}
.keyhead + .keygrid{margin-top:24px}
@media (max-width:760px){
  .keyhead{margin-top:44px;padding-top:24px}
  .keyhead + .keygrid{margin-top:20px}
}


/* The filter bar, folded. On a phone the four chips wrapped to four rows and
   the whole control block ran 396px, which is half a screen of controls
   standing in front of the homes somebody opened the page for. It is one 44px
   line now and a tap away. A laptop opens it on load, where it has always been.
   See build_city.py: the <details> ships closed and the page script opens it
   above 760px. */
.filtfold{margin-top:40px}
.filtfold > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-size:16px;font-weight:700;color:var(--accent);padding:10px 0}
.filtfold > summary::-webkit-details-marker{display:none}
.filtfold > summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;
  transition:transform .18s var(--ease)}
.filtfold[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.filtfold > summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.filtfold .filters{margin-top:16px}
@media (min-width:761px){
  /* on a laptop the summary is not a control, it is noise: the bar is open */
  .filtfold > summary{display:none}
  .filtfold .filters{margin-top:4px}
}
@media (max-width:760px){
  .filtfold{margin-top:26px}
}


/* ============================================================
   ONE GROUND
   BRAND.md, approved by Cameron 29 September 2026. A page gets one
   coloured field, its hero, and everything below it sits on the cream.
   That retires the near-black band and the second teal band, which
   between them were two of the four backgrounds a state page used to
   run through.

   Nothing moves. Every rule below is a light-ground repaint of a
   component that was written for a dark one, and the bar colours it
   adopts are the severity colours the rest of the site already uses on
   light: #8A4A06 below the benchmark, #4C7F41 at or above it.
   ============================================================ */
.panel--dark,
.panel--teal:not(.cityband):not(.hero){background:var(--panel-soft)}

.panel--dark .sechead h2,
.panel--teal:not(.cityband):not(.hero) .sechead h2{color:var(--ink)}
.panel--dark .sechead .lead,
.panel--teal:not(.cityband):not(.hero) .sechead .lead{color:var(--body)}
/* white on cream is not a card, it is a smudge */
.panel--dark .tile{border:1px solid var(--line)}

/* What you can do, on a home's page */
.do2{background:#fff;border:1px solid var(--line)}
.do2 h3{color:var(--ink)}
.do2 p{color:var(--body)}

/* How a state is staffed */
.cmprow{border-bottom-color:var(--line)}
.cmprow .ck,.cmprow .cv{color:var(--ink)}
.cmpbar{background:#E3E7E4}
.cmpbar .f{background:#8A4A06}
.cmpbar .f.ok{background:#4C7F41}
.cmpbar .mk2{background:var(--ink)}
.cmpkeys{color:var(--muted)}
.cmpkeys i{background:#8A4A06}
.cmpkeys i.ok{background:#4C7F41}
.cmpkeys i.mk{background:var(--ink)}
.cmprow .csay{color:var(--body)}
.cnote{color:var(--muted)}

/* the editorial band and its two counters */
.pull{color:var(--ink)}
.pull em{color:var(--accent)}
.pullnote{color:var(--body)}
.curve{background:#fff;border:1px solid var(--line)}
.curve .s{color:var(--ink)}
.curve .t{color:var(--muted)}

/* the star distribution chart */
.dbar{background:#C6CFCE}
.dcol.lo .dbar{background:#D98C82}
.dcol.hi .dbar{background:#E5B45B}
.dcol.nr .dbar{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.dcol .dn{color:var(--ink)}
.dcol .dl{color:var(--muted)}
.distnote{color:var(--body)}

/* ============================================================
   GOLD MEANS TWO THINGS, NOT SEVEN
   The star rating, and Jehl Law Group. Everything the site itself
   asks a reader to do is teal, so "what this site wants" and "what
   the advertiser wants" stop looking identical. BRAND.md.
   ============================================================ */
.btn--gold{background:var(--accent);color:#fff}
.btn--gold:hover{background:#00505A}
.herocard .btn--gold{box-shadow:none}
.btn--gold svg path,.btn--gold svg circle{stroke:currentColor}


/* An odd number of summary tiles left the last one alone in a half empty row.
   It takes the whole row instead: same information, one row shorter, and it
   stops reading as a mistake. */
@media (max-width:760px){
  .facts .fact2:last-child:nth-child(odd){grid-column:1/-1}
}


/* The staffing rows carried 24px of padding top and bottom so that one row
   stands off the next. The first and last rows have no neighbour on one side,
   so that padding was separating them from nothing: on a home with only two
   measures it left 118px of empty column between the last sentence and the
   next heading, with a rule floating in the middle of it. */
.sbar .srow2:first-child{padding-top:0}
.sbar .srow2:last-child{padding-bottom:0}
.sbar{margin-top:18px}
.sbar + .keyhead{margin-top:44px;padding-top:26px}