/* ====================================================================
   Lodestone Eldercare — national directory
   Warm, accessible, pastel. Design language carried from the prototype.
   ==================================================================== */
:root{
  --paper:#fbf7ef;        /* warm paper-cream page background */
  --card:#fffdf8;         /* card background */
  --ink:#2c2a28;          /* main text — very dark, ~13:1 on paper */
  --ink-soft:#55504a;     /* secondary text — still ~7:1 */
  --rose:#c4317a;         /* accent (links, brand) */
  --rose-deep:#a32563;    /* darker accent for hover / small text */
  --rose-soft:#ffd9e7;    /* soft pink wash */
  --rose-mist:#fdeef4;    /* very light pink panels */
  --green:#1c5e35;        /* "clean record" */
  --green-soft:#e3f2e7;
  --amber:#7a5200;        /* "1 citation" */
  --amber-soft:#fdf0d2;
  --red:#8e2727;          /* "multiple citations" — still calm */
  --red-soft:#fbe7e3;
  --line:#e7dfcf;         /* card hairlines */
  --blue-mist:#eaf2fa;    /* gentle pastel blue */
  --blue-line:#c9ddee;
  --lav-mist:#f1edf9;     /* gentle pastel lavender */
  --lav-line:#d9cfee;
  --focus:#14538a;        /* keyboard focus ring */
  --hand:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
  --sans:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --maxw:1080px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ line-height:1.25; color:var(--ink); }
h1{ font-size:2.0rem; margin:.2em 0 .4em; }
h2{ font-size:1.45rem; margin:1.4em 0 .5em; }
h3{ font-size:1.15rem; margin:1.1em 0 .4em; }
p{ margin:.6em 0; }

/* ---------- accessibility basics ---------- */
a{ color:var(--rose-deep); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--rose); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.skip{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:200;
}
.skip:focus{ left:8px; top:8px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* ---------- header & nav ---------- */
header.site{
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100;
}
.headrow{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:var(--maxw); margin:0 auto; flex-wrap:wrap; }
.brand{
  font-family:var(--hand); font-size:28px; font-weight:700; color:var(--ink);
  text-decoration:none; display:flex; align-items:center; gap:10px;
}
.brand:hover{ color:var(--ink); }
.brand .star{ color:var(--rose); font-size:26px; }
.brand small{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink-soft); display:block; letter-spacing:.3px; }
nav.site a{ font-size:17px; font-weight:600; text-decoration:none; color:var(--ink); margin-left:22px; }
nav.site a:hover{ color:var(--rose-deep); text-decoration:underline; }

/* ---------- demo / status banner ---------- */
.banner{
  background:#fff3c9; color:#5c4500; border-bottom:1px solid #e9d489;
  text-align:center; padding:8px 16px; font-size:14px; font-weight:600;
}

/* ---------- buttons & controls ---------- */
.btn{
  display:inline-block; background:var(--rose); color:#fff; border:none; border-radius:10px;
  padding:12px 22px; font-size:17px; font-weight:700; cursor:pointer; text-decoration:none;
  font-family:var(--sans);
}
.btn:hover{ background:var(--rose-deep); color:#fff; }
.btn.ghost{ background:transparent; color:var(--rose-deep); border:2px solid var(--rose-soft); }
.btn.ghost:hover{ background:var(--rose-mist); color:var(--rose-deep); }
input[type=text],input[type=search],select{
  font-family:var(--sans); font-size:17px; padding:11px 14px; border:2px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); width:100%;
}
input:focus,select:focus{ border-color:var(--rose); }

/* ---------- cards ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:18px 0; }
.panel{ background:var(--rose-mist); border:1px solid var(--rose-soft); border-radius:16px; padding:22px 24px; }

/* ---------- hero ---------- */
.hero{ padding:38px 0 8px; }
.hero .lead{ font-size:1.25rem; color:var(--ink-soft); max-width:680px; }
.hero .big{ font-family:var(--hand); color:var(--rose-deep); }

/* ---------- stat tiles ---------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:22px 0; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-align:center; }
.stat .num{ font-size:1.9rem; font-weight:800; color:var(--rose-deep); display:block; }
.stat .lbl{ font-size:.85rem; color:var(--ink-soft); margin-top:4px; }

/* ---------- state picker grid ---------- */
.stategrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; margin:16px 0; }
.statecell{
  display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 12px; color:var(--ink); transition:transform .08s, border-color .08s;
}
.statecell:hover{ border-color:var(--rose); transform:translateY(-2px); color:var(--ink); }
.statecell .st{ font-weight:800; font-size:1.05rem; }
.statecell .nm{ font-size:.82rem; color:var(--ink-soft); display:block; }
.statecell .ct{ font-size:.82rem; color:var(--rose-deep); margin-top:6px; display:block; }

/* ---------- leaderboard ---------- */
.lead-list{ list-style:none; padding:0; margin:8px 0; }
.lead-list li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); }
.lead-list li:last-child{ border-bottom:none; }
.lead-list .rank{ color:var(--ink-soft); width:1.6em; display:inline-block; }
.lead-list .cnt{ font-weight:700; color:var(--rose-deep); }

/* ---------- tables ---------- */
.tablewrap{ overflow-x:auto; }
table.fac{ width:100%; border-collapse:collapse; font-size:.95rem; }
table.fac th, table.fac td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.fac th{ background:var(--rose-mist); font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
table.fac th[aria-sort]{ color:var(--rose-deep); }
table.fac tbody tr:hover{ background:#fff; }
table.fac a{ font-weight:600; }

/* ---------- stars ---------- */
.stars{ color:#caa53a; letter-spacing:1px; white-space:nowrap; }
.stars .off{ color:#dcd3c2; }
.starnum{ font-size:.78rem; color:var(--ink-soft); }

/* ---------- badges ---------- */
.badge{ display:inline-block; font-size:.78rem; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.clean{ background:var(--green-soft); color:var(--green); }
.badge.warn{ background:var(--amber-soft); color:var(--amber); }
.badge.bad{ background:var(--red-soft); color:var(--red); }
.badge.flag{ background:var(--red-soft); color:var(--red); }
.badge.sff{ background:#efe6f9; color:#5b2a8a; }
.badge.neutral{ background:var(--blue-mist); color:#1c4a72; }
.badge.info{ background:#e3f3f1; color:#1d6f63; }
.badge.mem{ background:#e8e9fb; color:#3b3a8a; }

/* ---------- data freshness indicator ---------- */
.freshness{ font-size:.85rem; border-radius:10px; padding:9px 14px; margin:12px 0; }
.freshness.ok{ background:var(--green-soft); color:var(--green); border:1px solid #bfe0c8; }
.freshness.stale{ background:var(--amber-soft); color:var(--amber); border:1px solid #e6cf8e; font-weight:600; }
.freshness.stale a{ color:var(--amber); text-decoration:underline; font-weight:700; }

/* ---------- source line (the doctrine stamp) ---------- */
.source{
  font-size:.82rem; color:var(--ink-soft); background:var(--blue-mist); border:1px solid var(--blue-line);
  border-radius:10px; padding:10px 14px; margin:14px 0;
}
.source strong{ color:#1c4a72; }

/* ---------- facility detail ---------- */
.fac-detail dl{ display:grid; grid-template-columns:max-content 1fr; gap:10px 20px; margin:14px 0; }
.fac-detail dt{ font-weight:700; color:var(--ink-soft); }
.fac-detail dd{ margin:0; }
.rating-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:14px 0; }
.rating-box{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.rating-box .rl{ font-size:.82rem; color:var(--ink-soft); }

/* ---------- search results ---------- */
.results{ margin-top:10px; }
.result{ display:block; text-decoration:none; color:var(--ink); padding:11px 14px; border:1px solid var(--line); border-radius:10px; margin:8px 0; background:var(--card); }
.result:hover{ border-color:var(--rose); color:var(--ink); }
.result .rname{ font-weight:700; }
.result .rloc{ color:var(--ink-soft); font-size:.9rem; }

/* ---------- misc ---------- */
.muted{ color:var(--ink-soft); }
.small{ font-size:.85rem; }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.crumb{ font-size:.9rem; color:var(--ink-soft); margin:14px 0 0; }
.crumb a{ font-weight:600; }
.loading{ color:var(--ink-soft); padding:30px 0; text-align:center; }
.controls{ display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:16px 0; }
.controls > div{ flex:1; min-width:160px; }
.controls label{ font-size:.85rem; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px; }
footer.site{ border-top:1px solid var(--line); margin-top:40px; padding:26px 0; color:var(--ink-soft); font-size:.9rem; }
footer.site a{ color:var(--rose-deep); }
.morebtn{ margin:16px auto; display:block; }

@media (max-width:620px){
  body{ font-size:17px; }
  h1{ font-size:1.6rem; }
  nav.site a{ margin-left:14px; font-size:15px; }
  .fac-detail dl{ grid-template-columns:1fr; gap:3px 0; }
  .fac-detail dt{ margin-top:10px; }
}

/* state-difference explainer box + a checkbox control row (added for the SC layer) */
.callout{ background:var(--rose-mist); border:1px solid var(--rose-soft); border-left:4px solid var(--rose-deep);
  border-radius:12px; padding:14px 18px; margin:16px 0; }
.callout p{ margin:0; font-size:.95rem; }
/* caution variant — amber (safety/accountability signal, e.g. FL flagged license status) */
.callout.caution{ background:var(--amber-soft); border-color:var(--amber); border-left-color:var(--amber); }
.controls .checkrow{ flex:1; min-width:160px; display:flex; align-items:center; }
.controls .checkrow label{ display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
.controls .checkrow input{ width:auto; }

/* ---- Homepage US map (§1b) ---------------------------------------- */
.mapwrap{position:relative;margin:10px 0 4px}
#usmap{display:block;width:100%;height:auto;max-width:920px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px}
#usmap .st{fill:#ece6da;stroke:var(--paper);stroke-width:1;cursor:pointer;
  transition:fill .12s,filter .12s}
#usmap .st:hover,#usmap .chip:hover rect{filter:brightness(.88)}
#usmap .st:focus{outline:none}
#usmap .st:focus-visible{stroke:var(--focus);stroke-width:2.5;outline:none}
#usmap .chip rect{fill:#ece6da;stroke:var(--paper);stroke-width:1;cursor:pointer}
#usmap .chip text{font:700 14px var(--sans);fill:var(--ink);pointer-events:none}
#usmap .chip{cursor:pointer}
#usmap .chip:focus{outline:none}
#usmap .chip:focus-visible rect{stroke:var(--focus);stroke-width:2.5}
#usmap .leader{stroke:var(--blue-line);stroke-width:1}
.maptip{min-height:2.6em;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:1.05rem;padding:8px 14px;margin-bottom:8px;
  background:var(--rose-mist);border:1px solid var(--rose-soft);border-radius:10px}
.maptip strong{font-size:1.15rem}
.maplegend{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;
  margin:12px auto 0;font-size:.85rem;color:var(--ink-soft);max-width:720px}
.maplegend .sw{display:inline-block;width:16px;height:16px;border-radius:3px;
  vertical-align:-3px;margin-right:5px;border:1px solid rgba(0,0,0,.12)}
.statelist-h{margin-top:24px;margin-bottom:2px}
@media(max-width:640px){.maptip{font-size:.98rem}#usmap .chip text{font-size:17px}}

/* ---- Merged state page: care-type tabs (§1a) ---------------------- */
.statehead{margin-bottom:2px}
.state-lead{margin-top:2px}
.caretabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;
  border-bottom:2px solid var(--line);padding-bottom:0}
.caretab{appearance:none;cursor:pointer;background:var(--card);
  border:1px solid var(--line);border-bottom:none;border-radius:12px 12px 0 0;
  padding:11px 18px;margin-bottom:-2px;font:inherit;text-align:left;color:var(--ink-soft)}
.caretab .tabname{display:block;font-weight:800;font-size:1.05rem;color:var(--ink)}
.caretab .tabsub{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:1px}
.caretab[aria-selected="true"]{background:var(--rose-mist);border-color:var(--rose-soft);
  box-shadow:0 -3px 0 var(--rose) inset}
.caretab[aria-selected="true"] .tabname{color:var(--rose-deep)}
.caretab:hover{background:var(--rose-mist)}
.caretab:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tabpanel{padding-top:18px}
.tabpanel[hidden]{display:none}
.tabpanel .crumb{display:none}
@media(max-width:640px){.caretab{flex:1 1 100%;border-radius:10px;border-bottom:1px solid var(--line);margin-bottom:0}
  .caretabs{border-bottom:none;gap:6px}}

/* ---- County nav on state pages + county pages (§2a) --------------- */
.countynav{margin-top:30px;border-top:1px solid var(--line);padding-top:16px}
.countylist{list-style:none;padding:0;margin:10px 0 0;column-width:220px;column-gap:26px}
.countylist li{break-inside:avoid;margin:0 0 6px;line-height:1.35}
.countylist a{font-weight:600}

/* ---- State page: static "at a glance" summary (§2a) --------------- */
.glance{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0 4px}
.glance h2{margin-top:0}
.glance h3{margin:14px 0 2px}
.glance-counties{list-style:none;padding:0;margin:6px 0 0;column-width:165px;column-gap:22px}
.glance-counties li{break-inside:avoid;margin:0 0 5px}