/* Community Resource Finder: a warm, mobile-first design. Colors are tokens so light and dark stay in step. */
:root {
  --bg: #fff8ee;
  --surface: #ffffff;
  --surface-2: #fff1df;
  --text: #2a2420;
  --muted: #675c52;
  --line: #eadfd1;
  --brand: #0e6f66;
  --brand-ink: #ffffff;
  --brand-soft: #ddf1ee;
  --brand-soft-ink: #0a4f49;
  --accent: #c73e22;
  --hero-1: #ffe2c4;
  --hero-2: #fff8ee;
  --shadow: 0 1px 2px rgba(74, 46, 20, .06), 0 6px 18px rgba(74, 46, 20, .07);
  --radius: 18px;
  --cost-free-bg: #dcfce7; --cost-free-fg: #14532d;
  --cost-sliding_scale-bg: #ffedd5; --cost-sliding_scale-fg: #7c2d12;
  --cost-low_cost-bg: #dbeafe; --cost-low_cost-fg: #1e3a8a;
  --warn: #92400e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17130f;
    --surface: #211b16;
    --surface-2: #2b231c;
    --text: #f5eee6;
    --muted: #bdb1a5;
    --line: #3a3028;
    --brand: #4fd1c0;
    --brand-ink: #06302b;
    --brand-soft: #163b37;
    --brand-soft-ink: #a8ebe1;
    --accent: #ff8a6b;
    --hero-1: #3a2616;
    --hero-2: #17130f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .3);
    --cost-free-bg: #14351f; --cost-free-fg: #bbf7d0;
    --cost-sliding_scale-bg: #43210e; --cost-sliding_scale-fg: #fed7aa;
    --cost-low_cost-bg: #172554; --cost-low_cost-fg: #bfdbfe;
    --warn: #fbbf24;
  }
}

/* Category colors: a tint for backgrounds and a dark (or, in dark mode, light) ink for text on it. */
.cat-food { --c-bg: #ffebcc; --c-fg: #7a3e00; }
.cat-health { --c-bg: #ffe1e1; --c-fg: #8a1c1c; }
.cat-mental_health { --c-bg: #ede3ff; --c-fg: #4b2a8c; }
.cat-legal { --c-bg: #dcebff; --c-fg: #17408f; }
.cat-housing { --c-bg: #d9f3ef; --c-fg: #0a4f49; }
.cat-benefits { --c-bg: #e4e4ff; --c-fg: #33308f; }
.cat-utilities { --c-bg: #fff3bf; --c-fg: #6b4e00; }
.cat-education { --c-bg: #ddf5dd; --c-fg: #1e5b2a; }
.cat-jobs { --c-bg: #d5f1f7; --c-fg: #0b5566; }
.cat-family { --c-bg: #ffe0ef; --c-fg: #8a1f55; }
.cat-safety { --c-bg: #ffddd6; --c-fg: #86241a; }
.cat-general { --c-bg: #e9e4dc; --c-fg: #4a4239; }
.cat-fun { --c-bg: #f8ddfb; --c-fg: #75207f; }
.cat-volunteer { --c-bg: #ffe4d6; --c-fg: #8a2f0e; }
@media (prefers-color-scheme: dark) {
  .cat-food { --c-bg: #4a3212; --c-fg: #ffd9a0; }
  .cat-health { --c-bg: #4a1e1e; --c-fg: #ffc2c2; }
  .cat-mental_health { --c-bg: #33234f; --c-fg: #dccbff; }
  .cat-legal { --c-bg: #1b2f52; --c-fg: #bfd7ff; }
  .cat-housing { --c-bg: #143c38; --c-fg: #a8ebe1; }
  .cat-benefits { --c-bg: #26244f; --c-fg: #cfcfff; }
  .cat-utilities { --c-bg: #4a3d10; --c-fg: #ffe58a; }
  .cat-education { --c-bg: #1c3f22; --c-fg: #bdebc3; }
  .cat-jobs { --c-bg: #113d47; --c-fg: #b4e7f1; }
  .cat-family { --c-bg: #4a1f35; --c-fg: #ffc2dd; }
  .cat-safety { --c-bg: #4a211c; --c-fg: #ffc5bb; }
  .cat-general { --c-bg: #37312a; --c-fg: #dad2c6; }
  .cat-fun { --c-bg: #431e4a; --c-fg: #f0c4f6; }
  .cat-volunteer { --c-bg: #4a2412; --c-fg: #ffcdb2; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI Rounded", "Segoe UI", Roboto, sans-serif;
}
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* ---- header and footer ---- */
header.site {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-mark { width: 34px; height: 34px; max-width: 34px; flex: none; }
main { max-width: 44rem; margin: 0 auto; padding: 16px 16px 48px; }
footer.site { max-width: 44rem; margin: 0 auto; padding: 0 16px 48px; color: var(--muted); font-size: .9rem; }
footer.site p { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
footer.site strong { color: var(--text); }

svg { max-width: 100%; }
h1 { font-size: 1.85rem; line-height: 1.15; margin: 6px 0 6px; letter-spacing: -.02em; font-weight: 800; }
h2 { font-size: 1.2rem; line-height: 1.25; margin: 30px 0 8px; letter-spacing: -.01em; font-weight: 800; }
.section-title { margin-top: 28px; }

/* ---- home: hero ---- */
.hero {
  position: relative;
  margin: -16px -16px 0;
  padding: 26px 16px 118px;
  background: linear-gradient(180deg, var(--hero-1) 0%, var(--hero-2) 100%);
  overflow: hidden;
}
.hero-copy, .finder { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 4px; font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: 2.2rem; margin-top: 0; }
.hero-sub { margin: 8px 0 18px; font-size: 1.1rem; color: var(--muted); }
.finder { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 16px 16px; box-shadow: var(--shadow); }
.need-picker { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.need-picker legend, .finder-label { padding: 0; font-weight: 800; display: block; margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--muted); font-size: .9rem; }
.need-grid { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.need-grid::-webkit-scrollbar { display: none; }
.need {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 48px; padding: 0 16px 0 12px; font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--text); background: var(--surface-2); border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.need:active { transform: scale(.97); }
.need-icon { font-size: 1.3rem; line-height: 1; }
.need[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-soft-ink); }
.finder select {
  width: 100%; min-height: 54px; padding: 8px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--line); border-radius: 14px;
}
.cta {
  display: block; width: 100%; min-height: 56px; margin-top: 12px; padding: 0 18px; font: inherit; font-size: 1.05rem; font-weight: 800;
  color: var(--brand-ink); background: var(--brand); border: 0; border-radius: 14px; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
.cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.hero-link { display: block; margin-top: 12px; text-align: center; font-weight: 600; }
.hero-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }

/* ---- home: reassurance and states ---- */
.promises { display: grid; gap: 10px; margin: -34px 0 0; position: relative; z-index: 2; }
.promises > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 14px 60px; position: relative; box-shadow: var(--shadow); }
.promises span { position: absolute; left: 16px; top: 14px; font-size: 1.7rem; line-height: 1; }
.promises h2 { margin: 0 0 2px; font-size: 1.05rem; }
.promises p { margin: 0; color: var(--muted); font-size: .95rem; }
.states { margin-top: 12px; }
.states h2 { margin-top: 24px; }
.state-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.state-grid a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 54px; padding: 8px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 600;
  transition: border-color .12s, transform .12s;
}
.state-grid a:hover { border-color: var(--brand); }
.state-grid a:active { transform: scale(.98); }
.state-grid .count { flex: none; min-width: 30px; padding: 1px 8px; text-align: center; font-size: .82rem; font-weight: 800; color: var(--brand-soft-ink); background: var(--brand-soft); border-radius: 999px; }
@media (min-width: 640px) { .state-grid { grid-template-columns: repeat(3, 1fr); } .need-grid { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; } .promises { grid-template-columns: repeat(3, 1fr); } .promises > div { padding: 56px 14px 14px; } .promises span { top: 14px; } }

/* ---- state page ---- */
.crumb { margin: 0 0 6px; }
.crumb a { font-weight: 700; text-decoration: none; }
.state-head h1 { font-size: 2rem; margin-bottom: 2px; }
.state-head p { margin: 0 0 14px; }
.view-toggle { display: inline-flex; margin: 0 0 12px; padding: 4px; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.view-toggle a { min-width: 96px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 800; color: var(--text); }
.view-toggle a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }

.pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 4px 16px 8px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap;
}
.pill[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

.filters { margin: 0 0 8px; }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search-row input, .search-row select, .search-row button { min-height: 50px; padding: 8px 14px; font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; }
.search-row input { grid-column: 1 / -1; }
.search-row button { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 800; padding: 0 22px; cursor: pointer; }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 14px; box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.card-head { display: flex; gap: 12px; align-items: flex-start; }
.card-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; font-size: 1.5rem; background: var(--c-bg, #e9e4dc); border-radius: 50%; }
.card h3 { margin: 2px 0 6px; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 800; }
.card p { margin: 8px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip { padding: 2px 10px; font-size: .8rem; font-weight: 700; border-radius: 999px; background: var(--surface-2); }
.chip-cat { background: var(--c-bg, #e9e4dc); color: var(--c-fg, #4a4239); }
.cost-free { background: var(--cost-free-bg); color: var(--cost-free-fg); }
.cost-sliding_scale { background: var(--cost-sliding_scale-bg); color: var(--cost-sliding_scale-fg); }
.cost-low_cost { background: var(--cost-low_cost-bg); color: var(--cost-low_cost-fg); }
.chip-soft { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); font-weight: 600; }
.card.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand), var(--shadow); }
.locs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.locs li { display: grid; gap: 1px; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.loc-name { font-weight: 800; font-size: .93rem; }
.loc-addr { color: var(--muted); font-size: .9rem; }
.loc-actions { display: flex; gap: 18px; margin-top: 4px; font-size: .92rem; font-weight: 700; }
.loc-actions a { padding: 6px 0; }
.linklike { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 700; color: var(--brand); text-decoration: underline; cursor: pointer; min-height: 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 14px; border: 2px solid var(--brand); font-weight: 800; text-decoration: none; color: var(--brand); }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.meta { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.meta .unverified { color: var(--warn); font-weight: 600; }
.empty { padding: 28px 8px; text-align: center; color: var(--muted); }

/* ---- map ---- */
.map-wrap { position: sticky; top: 0; z-index: 5; isolation: isolate; margin: 4px -16px 12px; background: var(--bg); padding: 4px 16px 8px; border-bottom: 1px solid var(--line); }
#map { height: 42vh; min-height: 260px; border-radius: 16px; border: 1px solid var(--line); }
.map-note { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.map-wrap ~ .card { scroll-margin-top: calc(42vh + 70px); }
.leaflet-container { font: inherit; }
.leaflet-container a { color: #0e6f66; }
.pin-icon { background: none; border: 0; }
.pin {
  display: block; width: 22px; height: 22px; margin: 0 3px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--pin, #475569); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  transition: transform .15s, box-shadow .15s;
}
.pin.active, .leaflet-marker-icon.active .pin { transform: rotate(-45deg) scale(1.35); box-shadow: 0 0 0 4px rgba(14, 111, 102, .35), 0 2px 6px rgba(0, 0, 0, .5); }
.pin-food { --pin: #d97706; } .pin-health { --pin: #dc2626; } .pin-mental_health { --pin: #7c3aed; }
.pin-legal { --pin: #2563eb; } .pin-housing { --pin: #0d9488; } .pin-benefits { --pin: #4f46e5; }
.pin-utilities { --pin: #a16207; } .pin-education { --pin: #059669; } .pin-jobs { --pin: #0891b2; }
.pin-family { --pin: #db2777; } .pin-safety { --pin: #be123c; } .pin-general { --pin: #475569; } .pin-fun { --pin: #c026d3; } .pin-volunteer { --pin: #ea580c; }
/* the .leaflet-container prefix beats the clustering plugin's own stylesheet, which loads later */
.leaflet-container .marker-cluster-small, .leaflet-container .marker-cluster-medium, .leaflet-container .marker-cluster-large { background: rgba(14, 111, 102, .35); }
.leaflet-container .marker-cluster-small div, .leaflet-container .marker-cluster-medium div, .leaflet-container .marker-cluster-large div {
  background: #0e6f66; color: #fff; font: 700 13px/1 system-ui, sans-serif;
}

/* ---- group headings inside a list ---- */
.tier-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tier-title::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tier-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }