/* Chaffee Provides — draft redesign. Tokens first; dark mode follows the OS. */
:root{
  --bg:#fcfcfc; --bg-2:#f3f2ee; --card:#ffffff; --ink:#323232; --muted:#6b6b66;
  --line:#e2e0d9; --chip:#f0efea; --shadow:none;
  --green:#2f5d3a; --green-2:#3f7a4c; --on-green:#ffffff; --wheat:#b8862f; --rust:#a94f28;
  --sky:#4d82a3; --slate:#5b6b8c; --focus:#c8963e;
  --t-farm:#2f6b3c; --t-ranch:#8a5a3c; --t-market:#a8761d; --t-assistance:#a94f28; --t-dining:#5b6b8c; --t-community:#3f7f9c; --t-shop:#7a4f8f;
  --radius:3px; --max:1180px;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:"Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --light:"Mulish", "Open Sans", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121611; --bg-2:#181e17; --card:#1c231b; --ink:#ebe8df; --muted:#a4ab9d;
    --line:#2c3529; --chip:#252e23; --shadow:none;
    --green:#7fb88a; --green-2:#94c79e; --on-green:#0f1410; --wheat:#d9ad5c; --rust:#e08a62;
    --sky:#7fb3d1; --slate:#9aa8c6;
    --t-farm:#7fb88a; --t-ranch:#d09a72; --t-market:#d9ad5c; --t-assistance:#e08a62; --t-dining:#9aa8c6; --t-community:#7fb3d1; --t-shop:#b995cc;
  }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 var(--sans); }
img{ max-width:100%; display:block; }
a{ color:var(--green); text-underline-offset:2px; }
a:hover{ color:var(--green-2); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
/* Type follows the original chaffeeprovides.org: Playfair Display titles, Mulish (light)
   section headings, Open Sans text. */
h1,h2,h3{ line-height:1.2; margin:0 0 .5em; font-weight:400; }
h1{ font-family:var(--serif); font-size:clamp(2rem,4.5vw,3rem); }
h2{ font-family:var(--light); font-weight:300; font-size:clamp(1.6rem,3vw,2.1rem); }
h3{ font-family:var(--serif); font-size:1.2rem; }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 16px; }
.muted{ color:var(--muted); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--card); padding:8px 12px; z-index:2000; }
.skip:focus{ left:8px; }

/* Draft banner */
.draft{ background:#3a2f12; color:#f6e7c1; font-size:.85rem; text-align:center; padding:6px 16px; }
.draft strong{ color:#ffd77a; }

/* Header */
.site-header{ background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1000; }
.site-header .wrap{ display:flex; align-items:center; gap:20px; min-height:64px; }
.brand{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); line-height:1; }
.brand .name{ font-family:var(--serif); font-size:1.5rem; font-weight:400; }
.brand .tag{ text-transform:none; letter-spacing:0; font-family:var(--light); font-style:italic; font-weight:200; font-size:.95rem; color:var(--muted); margin-top:4px; }
.nav{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.nav a{ text-decoration:none; color:var(--ink); padding:8px 12px; font-family:var(--light); font-weight:300; font-size:1.02rem; border-bottom:1px solid transparent; }
.nav a:hover{ color:var(--green); }
.nav a[aria-current="page"]{ color:var(--green); border-bottom-color:var(--green); }
.menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:2px; padding:8px 12px; font:inherit; cursor:pointer; }
@media (max-width:860px){
  .menu-btn{ display:block; }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--card); border-bottom:1px solid var(--line);
    flex-direction:column; padding:8px 16px 16px; }
  .nav.open{ display:flex; }
  .nav a{ padding:12px; }
}

/* Buttons + chips */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:2px;
  text-decoration:none; border:1px solid transparent; cursor:pointer; font:inherit; font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; }
.btn-primary{ background:var(--green); color:var(--on-green); }
.btn-primary:hover{ background:var(--green-2); color:var(--on-green); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--chip); color:var(--ink); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:2px; background:var(--chip);
  color:var(--ink); border:1px solid transparent; font:inherit; font-size:.9rem; cursor:pointer; white-space:nowrap; }
.chip[aria-pressed="true"]{ background:var(--green); color:var(--on-green); }
.chip .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.tag{ display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.pill{ display:inline-block; font-size:.78rem; font-weight:600; padding:1px 8px; border-radius:2px; background:var(--chip); color:var(--muted); }
.pill.ok{ background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.pill.warn{ background:color-mix(in srgb, var(--wheat) 22%, transparent); color:var(--wheat); }

/* Hero */
.hero{ position:relative; background:#5a6b48 center/cover no-repeat; }
.hero .wrap{ padding:72px 16px; }
.hero .panel{ max-width:680px; margin:0 auto; background:rgba(255,255,255,.88); color:#323232; padding:32px 36px; text-align:center; }
.hero h1{ color:#323232; }
.hero p.lede{ font-weight:300; font-size:1.2rem; margin:0 auto; max-width:46ch; }
@media (max-width:560px){ .hero .wrap{ padding:40px 16px; } .hero .panel{ padding:24px 18px; } }
.search-bar{ display:flex; gap:6px; max-width:520px; margin:22px auto 0; background:#fff; padding:4px; border:1px solid #cfcdc4; }
.search-bar input{ flex:1; border:0; background:transparent; font:inherit; color:#323232; padding:8px 14px; min-width:0; }
.search-bar input:focus{ outline:none; }
.hero .notice{ margin:20px auto 0; max-width:560px; border-top:1px solid #d8d6ce; padding-top:14px; font-size:.92rem; }
.hero .notice a{ color:#2f5d3a; }

/* Sections */
section.block{ padding:56px 0; }
section.block.alt{ background:var(--bg-2); }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.section-head p{ margin:0; color:var(--muted); max-width:60ch; }
.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.grid.cols-4{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card .body{ padding:16px 18px; }
.tile{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); }
.tile:hover{ border-color:var(--green); color:var(--ink); }
.tile:hover strong{ color:var(--green); }
.tile strong{ font-family:var(--serif); font-weight:400; font-size:1.15rem; display:flex; align-items:center; gap:8px; }
.tile .dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.tile span.count{ color:var(--muted); font-size:.9rem; }

/* Post cards */
.post-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); height:100%; }
.post-card .img{ aspect-ratio:16/10; background:var(--chip) center/cover no-repeat; }
.post-card .body{ display:flex; flex-direction:column; gap:6px; flex:1; }
.post-card h3{ margin:0; }
.post-card .meta{ font-size:.85rem; color:var(--muted); }
.post-card:hover h3{ color:var(--green); }
.badge-new{ display:inline-block; color:var(--wheat); font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; }

/* Events list */
.events{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.events li{ display:flex; gap:14px; align-items:flex-start; border-bottom:1px solid var(--line); padding:10px 0; }
.events .when{ flex:0 0 auto; min-width:92px; font-weight:600; color:var(--green); font-size:.9rem; }
.events .what strong{ display:block; }
.events .what span{ color:var(--muted); font-size:.92rem; }

/* Find-food layout */
/* Fill the screen below the header + banner (measured in app.js as --chrome). */
.finder{ display:grid; grid-template-columns:380px 1fr; height:calc(100vh - var(--chrome, 95px)); height:calc(100dvh - var(--chrome, 95px)); min-height:460px; }
/* The whole panel scrolls as one, so tall filters (big text, narrow screens) never squeeze the results list. */
.finder aside{ border-right:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
.finder .filters{ padding:14px 16px; border-bottom:1px solid var(--line); display:grid; gap:10px; }
.finder .filters input[type=search], .finder .filters select{ width:100%; font:inherit; padding:9px 12px; border:1px solid var(--line);
  border-radius:2px; background:var(--bg); color:var(--ink); }
.finder .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.finder .row{ display:flex; gap:14px; flex-wrap:wrap; font-size:.93rem; }
.finder .row label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.finder .count{ padding:8px 16px; font-size:.9rem; color:var(--muted); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; position:sticky; top:0; z-index:2; background:var(--card); }
.finder .list{ flex:none; }
.finder #map{ height:100%; }
.result{ display:block; padding:12px 16px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); }
.result:hover, .result.hl{ background:var(--bg-2); color:var(--ink); }
.result strong{ display:block; font-size:1.02rem; }
.result .sub{ font-size:.88rem; color:var(--muted); }
.result .types{ display:flex; gap:8px; flex-wrap:wrap; margin-top:3px; }
.mobile-toggle{ display:none; }
@media (max-width:860px){
  .finder{ grid-template-columns:1fr; height:auto; }
  .finder aside{ border-right:0; overflow:visible; }
  .finder .count{ position:static; }
  .finder .list{ max-height:none; }
  .finder .mapbox{ height:60vh; position:sticky; top:64px; }
  .finder[data-view="list"] .mapbox{ display:none; }
  .finder[data-view="map"] .list, .finder[data-view="map"] .count{ display:none; }
  .mobile-toggle{ display:flex; gap:6px; }
}

/* Map-only view (find-food.html?embed=1) */
.embed body{ overflow:hidden; }
.embed .draft, .embed .site-header, .embed .finder aside, .embed .site-footer{ display:none; }
.embed .finder, .embed .finder[data-view] .mapbox{ display:block; grid-template-columns:1fr; height:100vh; height:100dvh; position:static; }

/* Map key (find-food.html) */
.map-legend{ background:rgba(255,255,255,.94); color:#323232; border:1px solid #cfcdc4; padding:8px 10px; font:13px/1.3 var(--sans); }
.map-legend-title{ font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6b6b66; margin-bottom:4px; }
.map-legend button{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; padding:3px 2px; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.map-legend button:hover{ text-decoration:underline; }
.map-legend button[aria-pressed="true"]{ font-weight:600; }
.pin-swatch{ width:22px; height:22px; flex:0 0 22px; display:flex; align-items:center; justify-content:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25); }

.pin-swatch span{ transform:rotate(45deg); font-size:11px; line-height:1; }

/* Map pins */
.pin{ width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.pin span{ transform:rotate(45deg); font-size:13px; line-height:1; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--card); color:var(--ink); }
.leaflet-popup-content{ margin:12px 14px; font:15px/1.45 var(--sans); }
.leaflet-popup-content h4{ margin:0 0 4px; font-family:var(--serif); font-size:1.05rem; }
.leaflet-container a.leaflet-popup-close-button{ color:var(--muted); }
/* Map credit: required, but small and quiet. */
.leaflet-container .leaflet-control-attribution{ font:10px/1.4 var(--sans); padding:0 5px; background:rgba(255,255,255,.6); color:#555; }
.leaflet-container .leaflet-control-attribution a{ color:inherit; text-decoration:none; }
@media (prefers-color-scheme: dark){ .leaflet-container .leaflet-control-attribution{ background:rgba(0,0,0,.45); color:#bbb; } }

/* Provider page */
.crumbs{ font-size:.9rem; color:var(--muted); margin:22px 0 8px; }
.crumbs a{ color:var(--muted); }
.provider{ max-width:760px; padding-bottom:56px; }
@media (max-width:860px){ .provider{ grid-template-columns:1fr; } }
.facts{ display:grid; gap:12px; margin:18px 0; }
.fact{ display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:baseline; border-top:1px solid var(--line); padding-top:10px; }
.fact .ic{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fact .src{ display:block; font-size:.78rem; color:var(--muted); }
.fact .src a{ color:var(--muted); }
.mini-map{ height:300px; margin:10px 0 14px; border-radius:var(--radius); border:1px solid var(--line); }
.sources{ font-size:.9rem; }
.sources li{ margin-bottom:4px; }
.notice-box{ border-left:4px solid var(--wheat); background:var(--card); padding:12px 16px; border-radius:0; margin:14px 0; }

/* Tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:3px; background:var(--card); }
table{ border-collapse:collapse; width:100%; font-size:.95rem; }
th, td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:var(--bg-2); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
tr:last-child td{ border-bottom:0; }

/* Article */
.article{ max-width:740px; margin:0 auto; padding:24px 16px 64px; }
.article .hero-img{ border-radius:var(--radius); aspect-ratio:16/9; object-fit:cover; width:100%; margin:18px 0 24px; background:var(--chip); }
.article h2{ margin-top:1.4em; font-size:1.5rem; }
.article ul{ padding-left:1.2em; }
.article li{ margin-bottom:.4em; }
.article .meta{ color:var(--muted); font-size:.95rem; }
.callout{ background:var(--bg-2); border:1px solid var(--line); border-radius:3px; padding:14px 18px; margin:20px 0; }

/* Forms */
.form{ display:grid; gap:14px; max-width:640px; }
.form label{ display:grid; gap:6px; font-weight:600; }
.form input, .form select, .form textarea{ font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:2px; background:var(--card); color:var(--ink); }
.form fieldset{ border:1px solid var(--line); border-radius:3px; padding:12px 14px; }
.form fieldset label{ display:inline-flex; font-weight:500; margin:4px 14px 4px 0; gap:6px; }

/* Footer */
.site-footer{ background:#1d261c; color:#d9ddd2; padding:44px 0 28px; margin-top:0; }
.site-footer a{ color:#e9dcb8; }
.site-footer .cols{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px; }
@media (max-width:760px){ .site-footer .cols{ grid-template-columns:1fr; } }
.site-footer .brand .name{ color:#fff; }
.site-footer .brand .tag{ color:#aab3a2; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.site-footer blockquote{ margin:14px 0 0; font-family:var(--serif); font-style:italic; color:#c9cfbf; }
.site-footer .fine{ margin-top:28px; font-size:.82rem; color:#9aa391; border-top:1px solid #33402f; padding-top:16px; }

/* ---- new data model: faded (unconfirmed) pins, directory cards, places list ---- */
.pin.unconfirmed{ opacity:.62; border:2px dashed rgba(255,255,255,.85); }
.pin-swatch.faded{ opacity:.62; border:2px dashed rgba(255,255,255,.85); }
.map-legend-note{ display:flex; align-items:center; gap:8px; margin-top:6px; padding-top:6px; border-top:1px solid #cfcdc4; font-size:.8rem; color:#555; }
.dir-head{ padding:28px 0 8px; }
.dir-tools{ display:grid; gap:10px; margin:14px 0 18px; }
.dir-tools input[type=search], .dir-tools select{ width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:var(--card); color:var(--ink); }
.dir-tools .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dir-tools .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.biz{ display:flex; flex-direction:row; align-items:stretch; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); }
.biz:hover{ border-color:var(--green); color:var(--ink); }
.biz .photo{ width:88px; height:auto; min-height:88px; flex:0 0 88px; object-fit:cover; display:block; background:var(--bg-2); }
.biz .ph{ display:flex; align-items:center; justify-content:center; background:var(--bg-2); font-size:1.6rem; }
.biz .body{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.biz h3{ margin:0; font-size:1.12rem; }
.biz .meta{ font-size:.88rem; color:var(--muted); }
.biz .chipline{ display:flex; gap:6px; flex-wrap:wrap; margin-top:2px; }
.mini-chip{ font-size:.74rem; padding:2px 8px; border-radius:2px; background:var(--chip); color:var(--ink); }
.hero-photo{ width:100%; max-height:300px; object-fit:cover; display:block; border-radius:var(--radius); margin:14px 0; }
.places{ display:grid; gap:10px; margin:10px 0 20px; padding:0; list-style:none; }
.places li{ border:1px solid var(--line); border-left:4px solid var(--green); background:var(--card); padding:10px 14px; border-radius:2px; }
.pager{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 14px; font-size:.95rem; }
.pager a, .pager .off{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pager a:last-child, .pager .off:last-child{ text-align:right; }
.pager .pos{ flex:0 0 auto; color:var(--muted, #6b6b62); }
.pager .off{ visibility:hidden; }
.places li.pickup{ border-left-color:var(--t-community); }
.places .role{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.places .faint{ font-size:.84rem; color:var(--muted); }
#cards.grid.cols-3{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px; }
.biz .photo{ align-self:stretch; }
@media (max-width:420px){ #cards.grid.cols-3{ grid-template-columns:1fr; } }

/* provider page: can I visit, and how do I get it */
.visit{ padding:12px 16px; border-radius:2px; border-left:5px solid var(--green); background:var(--card); margin:14px 0 4px; }
.visit.no{ border-left-color:var(--rust); }
.visit.unknown{ border-left-color:var(--wheat); }
.ways{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; }
.ways > li{ border-top:1px solid var(--line); padding-top:10px; }
.ways > li > strong{ display:block; }
ul.plain{ margin:4px 0 0; padding-left:18px; }

/* open to visits: two separate answers, drop-in and pickup at the farm */
.vflag{ display:inline-block; font-size:.72rem; font-weight:600; padding:1px 8px; border-radius:2px; margin-left:6px; vertical-align:middle; }
.vflag.yes{ background:color-mix(in srgb, var(--green) 18%, transparent); color:var(--green); }
.vflag.no{ background:color-mix(in srgb, var(--rust) 18%, transparent); color:var(--rust); }
.visit .vrow{ display:flex; gap:10px; align-items:flex-start; margin:4px 0; }
.visit .vmark{ flex:0 0 22px; height:22px; border-radius:50%; text-align:center; line-height:22px; font-weight:700; font-size:.85rem; color:#fff; background:var(--wheat); }
.visit .vrow.yes .vmark{ background:var(--green); }
.visit .vrow.no .vmark{ background:var(--rust); }
.visit .vnote{ margin-top:6px; color:var(--muted); font-size:.92rem; }

.visit .vhours{ margin-top:2px; font-size:.95rem; }
.visit.compact{ display:inline-block; padding:0; margin:6px 0 4px; background:none; border:0; font-size:.85rem; color:var(--muted); }
.visit.compact .vrow{ margin:0; gap:6px; align-items:center; }
.visit.compact .vmark{ flex:0 0 14px; height:14px; line-height:14px; font-size:.62rem; }
.about{ margin-top:14px; max-width:68ch; }
.about p{ margin:0 0 10px; }