/* Pantry Atlas: set like an old street atlas. The left page is an index of ingredients (name, dotted leader, counts),
   the right page is the plate: a map with a lettered grid. Shelf-tag yellow is the one loud colour.
   Type: Sofia Sans (Condensed and Semi Condensed for heads) + Spectral for notes and small print. Square corners, rules not boxes. */
:root{
  --paper:#F3EEE2; --card:#F3EEE2; --sheet:#FAF7EF; --ink:#1D1D1B; --muted:#6B6458; --line:#D9D0BD; --soft:#EAE3D2; --rule:#1D1D1B;
  --tag:#FFD84D; --tag-ink:#1E1A00; --chili:#A3262A; --leaf:#2F6B3A; --amber:#8A5F00; --water:#BCD3D9;
  --shadow:0 1px 0 rgba(29,29,27,.06),0 10px 24px -16px rgba(29,29,27,.45);
  --f-display:"Sofia Sans Condensed",ui-sans-serif,system-ui,sans-serif;
  --f-display-semi:"Sofia Sans Semi Condensed","Sofia Sans Condensed",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Sofia Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Spectral",Georgia,"Times New Roman",serif;
  --f-mono:"Sofia Sans",ui-sans-serif,system-ui,sans-serif;
  --lv-green:#2F6B3A; --lv-yellow:#8A5F00; --lv-orange:#B0501C; --lv-guess:#6B6458; --lv-no:#A3262A; --limit:#2E5E8C;
  color-scheme:light;
}
/* night edition: the same atlas printed in pale ink on dark paper */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141A20; --card:#141A20; --sheet:#1B232B; --ink:#EDE6D3; --muted:#A39A86; --line:#2E3843; --soft:#222C35; --rule:#EDE6D3;
  --tag:#F2CB3A; --tag-ink:#1E1A00; --chili:#FF7A6E; --leaf:#7FC48F; --amber:#E0B34A; --water:#1E2E38;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.7);
  --lv-green:#7FC48F; --lv-yellow:#E0B34A; --lv-orange:#F08A50; --lv-guess:#A39A86; --lv-no:#FF7A6E; --limit:#7FB2E0; color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#141A20; --card:#141A20; --sheet:#1B232B; --ink:#EDE6D3; --muted:#A39A86; --line:#2E3843; --soft:#222C35; --rule:#EDE6D3;
  --tag:#F2CB3A; --tag-ink:#1E1A00; --chili:#FF7A6E; --leaf:#7FC48F; --amber:#E0B34A; --water:#1E2E38;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 24px -14px rgba(0,0,0,.7);
  --lv-green:#7FC48F; --lv-yellow:#E0B34A; --lv-orange:#F08A50; --lv-guess:#A39A86; --lv-no:#FF7A6E; --limit:#7FB2E0; color-scheme:dark;}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.4;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:inherit}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap;padding:12px 32px;border-bottom:2px solid var(--rule)}
.brand-tag{background:var(--tag);color:var(--tag-ink);font-family:var(--f-body);font-weight:800;font-size:24px;letter-spacing:-.01em;text-decoration:none;
  padding:1px 14px 3px 24px;position:relative;clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);flex:none}
.brand-tag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--paper)}
.addr{position:relative;flex:1;min-width:250px;max-width:560px;display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--rule)}
.addr .from{font-size:15px;font-weight:600;color:var(--ink);flex:none}
.addr input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:7px 0;font-weight:600;font-size:16px}
.addr input::placeholder{color:var(--muted);font-weight:400}
.addr .locate{border:0;background:transparent;color:var(--muted);padding:6px;display:grid;place-items:center}
.addr .locate:hover{color:var(--ink)}
.addr .go{border:0;background:var(--ink);color:var(--paper);padding:5px 12px;font-weight:700;font-size:13px}
.addr-list{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:0;list-style:none;background:var(--sheet);border:1.5px solid var(--rule);box-shadow:var(--shadow);z-index:1200}
.addr-list li{padding:9px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.addr-list li:last-child{border-bottom:0}
.addr-list li small{display:block;color:var(--muted);font-family:var(--f-serif);font-style:italic;font-size:12.5px}
.addr-list li[aria-selected="true"],.addr-list li:hover{background:var(--soft)}
.addr-status{font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted)}
.addr-status b{font-family:var(--f-body);font-style:normal;color:var(--ink);font-weight:700}
.addr-status.err{color:var(--chili)}
.radius{display:flex;align-items:center;gap:8px;font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted);white-space:nowrap}
.radius input[type=range]{width:120px;accent-color:var(--ink)}
.radius output{min-width:44px;font-family:var(--f-body);font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.theme-btn{border:0;background:none;padding:4px 0;color:var(--ink);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.theme-btn:hover{text-decoration-thickness:2px}
.theme-btn svg{display:none}
#suggestBtn{margin-left:auto}
.proto{margin-left:auto;font-size:11px;color:var(--muted)}

/* ---------- two pages: index on the left, the plate on the right ---------- */
.app{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.4fr);
  transition:grid-template-columns .5s cubic-bezier(.3,.7,.2,1)}
.app.open{grid-template-columns:minmax(0,.66fr) minmax(0,1fr)}
@media (prefers-reduced-motion:reduce){.app,.mapwrap{transition:none}}
.pane{min-height:0;min-width:0;overflow:auto;background:var(--paper);border-right:2px solid var(--rule)}
.mapwrap{position:relative;min-width:0;overflow:hidden;background:var(--water);display:flex;flex-direction:column}
#map{position:relative;flex:1;min-height:0}
.mapband{display:none;flex:none;background:var(--paper);border-top:2px solid var(--rule);padding:12px 20px 14px;align-items:center;gap:8px 24px;flex-wrap:wrap;z-index:500}
.mapkey{display:none}
.mapkey .ttl{font-family:var(--f-display);font-stretch:80%;font-weight:800;font-size:17px;color:var(--ink)}
.app.open .mapband{display:flex}
.app.open .mapkey{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
.app.open .mapkey .legend{margin:0}
.app:not(.open) .leaflet-tile-pane{filter:sepia(.25) saturate(.45) opacity(.9)}
.leaflet-tile-pane{filter:sepia(.18) saturate(.75)}
:root[data-theme="dark"] .leaflet-tile-pane{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .leaflet-tile-pane{filter:none}}

@media (max-width:820px){
  html,body{height:auto}
  body{display:block}
  .topbar{padding:12px 16px}
  #suggestBtn{margin-left:0}
  .app,.app.open{display:flex;flex-direction:column-reverse}
  .pane{overflow:visible;border-right:0}
  .mapwrap{height:170px;transition:height .4s;border-bottom:2px solid var(--rule)}
  .app.open .mapwrap{height:400px}
  .mapband{padding:8px 16px}
}

/* ---------- the index ---------- */
.pantry-head{position:sticky;top:0;z-index:5;background:var(--paper);padding:24px 32px 0}
.kicker{margin:0;font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--muted)}
.pantry-head h1{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:70%;font-size:clamp(44px,5vw,68px);letter-spacing:0;line-height:.92;text-wrap:balance}
.find{display:flex;align-items:center;gap:12px;margin-top:18px;border-bottom:2px solid var(--rule);padding-bottom:4px}
.find span{font-size:15px;font-weight:600;color:var(--ink);flex:none}
.find input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:6px 0;font-size:18px;color:var(--ink)}
.find input::placeholder{color:var(--muted)}
.tabsrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-top:14px}
.modes{display:flex;gap:26px}
.modes button{border:0;background:none;padding:6px 0 4px;font-size:16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent}
.modes button:hover{color:var(--ink)}
.modes button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--rule)}
.typejump{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:10px;padding:7px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.typejump button{border:0;background:none;padding:2px 0;font-size:14px;color:var(--ink)}
.typejump button:hover{text-decoration:underline;text-underline-offset:3px}
.typejump button:not(:last-child)::after{content:"·";color:var(--muted);padding:0 9px;display:inline-block}
.typejump.letters button{font-weight:700}
.sect{padding:22px 32px 8px;scroll-margin-top:230px}
.sect h2{margin:0 0 2px;padding-bottom:4px;border-bottom:2px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--f-display);font-stretch:78%;font-weight:800;font-size:26px;letter-spacing:-.005em;line-height:1.05}
.sect h2 > span:last-child{font-family:var(--f-serif);font-stretch:100%;font-style:italic;font-weight:400;font-size:14px;color:var(--muted)}
.noresults{padding:28px 32px;font-family:var(--f-serif);font-size:16px;color:var(--muted)}

/* index entries: thumbnail, name, dotted leader, counts; the kinds underneath */
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));column-gap:36px}
.entry{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 0;color:var(--ink);min-height:54px}
.entry:hover strong{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.entry .th{width:40px;height:40px;flex:none;display:grid;place-items:center}
.entry .th img{width:100%;height:100%;object-fit:contain}
.entry.nothumb .th{display:none}
.store-tile .th img{object-fit:cover}
.eb{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.el{display:flex;align-items:baseline;gap:8px;min-width:0}
.el strong{font-size:16px;font-weight:700;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead{flex:1;min-width:10px;border-bottom:1.5px dotted var(--muted);opacity:.7;transform:translateY(-4px)}
.entry .kinds{font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--muted);line-height:1.3}
.entry .counts{display:flex;gap:10px;align-items:baseline;flex:none}
.entry .none,.entry .outside,.entry .eb > .el > span:not(.lead):not(.counts){font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--muted);flex:none}
.entry .none{color:var(--chili)}
.cnt{display:inline-flex;align-items:baseline;gap:4px;font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.near{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}

/* a grouped ingredient opened in place: its kinds */
.group{grid-column:1/-1;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);margin:-1px 0 0;padding:10px 0 14px;background:var(--paper)}
.group .ghead{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;padding:0;color:var(--ink)}
.group .ghead .ph{width:56px;height:56px;flex:none}
.group .ghead > span:not(.gclose){flex:1;display:flex;flex-direction:column;gap:1px}
.group .ghead strong{font-family:var(--f-display);font-stretch:80%;font-weight:800;font-size:24px;line-height:1.05}
.group .ghead .kinds{font-family:var(--f-serif);font-style:italic;font-size:13.5px;color:var(--muted)}
.group .gclose{font-size:26px;line-height:1;color:var(--muted);padding:0 4px}
.gkinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:28px;margin-top:8px}
.gkind{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;text-align:left;color:var(--ink)}
.gkind:hover strong{text-decoration:underline;text-underline-offset:3px}
.gkind.pic img{width:48px;height:48px;object-fit:contain}
.gkind strong{font-weight:700;font-size:15px}
.gkind span{font-size:13px;color:var(--muted)}
.gkind .counts{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.gkind.all strong{font-style:italic;font-family:var(--f-serif);font-weight:600}

/* lists of shops, brands, ingredients at a shop: rows, not boxes */
.ilist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:32px;padding:0 32px 8px}
.irow{display:flex;gap:12px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;color:var(--ink)}
.irow:hover strong{text-decoration:underline;text-underline-offset:3px}
.irow .ph{width:40px;height:40px;flex:none}
.irow strong{display:block;font-weight:700;font-size:15px;line-height:1.2}
.irow small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.irow.maybe{opacity:.8}
.ph{display:grid;place-items:center}
.ph img{width:100%;height:100%;object-fit:contain}
.ph svg{width:60%;height:60%;color:var(--muted);opacity:.6}
.ph.mono{border:1.5px solid var(--rule);border-radius:50%}
.ph.mono span{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:20px;color:var(--ink)}
.irow .ph.mono span{font-size:14px}
.note{padding:6px 32px 16px;font-family:var(--f-serif);font-size:14px;color:var(--muted);max-width:64ch}

/* ---------- an entry: ingredient, shop and brand pages ---------- */
.view-head{padding:18px 32px 16px;position:sticky;top:0;background:var(--paper);z-index:5;border-bottom:2px solid var(--rule)}
.back{background:none;border:0;padding:4px 0;color:var(--ink);font-size:14px;font-weight:600}
.back:hover{text-decoration:underline;text-underline-offset:3px}
.hero{display:flex;gap:20px;align-items:center;margin-top:10px}
.hero .ph{width:120px;height:120px;flex:none}
.hero .ph svg{display:none}
.hero h1{margin:0;font-family:var(--f-display);font-weight:800;font-stretch:70%;font-size:clamp(46px,6vw,84px);letter-spacing:0;line-height:.9;text-wrap:balance}
.hero p{margin:8px 0 0;}
.hero p.kicker{margin:0 0 2px;font-size:15px;color:var(--muted);font-style:italic}
.hero p:not(.kicker){margin:8px 0 0;font-family:var(--f-serif);font-size:16px;color:var(--ink)}
.hero .ph.mono{width:72px;height:72px}
.hero .ph.mono span{font-size:26px}
.typelabel{font-family:var(--f-serif);font-style:italic;color:var(--muted);margin-right:8px}
.typelabel::after{content:" ·"}
.credit{margin-top:4px!important;font-size:12px!important;font-style:italic;color:var(--muted)!important}

/* kinds as tick boxes */
.kindpick{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 4px;padding:9px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kchip{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--ink);padding:3px 0;font-size:15px}
.kchip small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.kchip .tick{width:15px;height:15px;border:1.5px solid var(--ink);display:inline-grid;place-items:center;flex:none}
.kchip.on .tick{background:var(--ink)}
.kchip.on .tick::after{content:"";width:7px;height:3.5px;border:solid var(--paper);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.kchip[data-kind="all"]{font-weight:700}
.kchip[data-kind="all"]::before{content:"";width:15px;height:15px;border:1.5px solid var(--ink);flex:none}
.kchip[data-kind="all"].on::before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.kchip.add{color:var(--muted);font-family:var(--f-serif);font-style:italic}
.kchip.add:hover{color:var(--ink)}
.kindtag{display:inline-block;margin-left:6px;font-family:var(--f-serif);font-style:italic;font-size:13px;font-weight:400;color:var(--muted)}
.ingnote{margin:10px 0 4px;padding:8px 0 8px 14px;border-left:3px solid var(--tag);font-family:var(--f-serif);font-size:15px;line-height:1.45}
.sugline{margin:10px 0 0;font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted)}

/* shop rows on an ingredient page: grid square, shop, how sure, miles */
.rows{list-style:none;margin:0;padding:0 32px}
.store,div.store{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:3px 14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 0}
.store > *{grid-column:2/-1}
.store > .gref{grid-column:1;grid-row:1/span 2;align-self:start}
.store > .store-link{grid-column:2}
.store > .dist{grid-column:3;grid-row:1}
.gref{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;padding:2px 0 2px 12px;justify-self:start;letter-spacing:.01em}
.store.hl .gref{background:var(--tag);color:var(--tag-ink);padding-right:6px;clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 50%)}
.store-link{background:none;border:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink)}
.store-link:hover h3,.store.hl h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.store h3{margin:0;font-family:var(--f-display-semi);font-stretch:85%;font-weight:700;font-size:20px;letter-spacing:-.005em;line-height:1.15}
.store .sub{font-size:13.5px;color:var(--muted)}
.store .dist{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.conf{display:flex;align-items:center;gap:8px 12px;font-size:13.5px;margin-top:3px;flex-wrap:wrap}
.conf .when{color:var(--muted)}
.store .src{font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--muted)}
.store .src a{color:var(--muted)}
.store .src a:hover{color:var(--ink)}
.price{font-weight:700;font-size:13px;background:var(--tag);color:var(--tag-ink);padding:0 6px;font-variant-numeric:tabular-nums}
.row-act{display:flex;justify-content:flex-end;margin-top:-2px}
.mini{border:0;background:none;color:var(--muted);padding:2px 0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.mini:hover{color:var(--ink)}
.visits{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thumbs{display:inline-flex;gap:4px}
.thumbs img{width:36px;height:36px;object-fit:cover;border:1px solid var(--line);display:block}
details.far{margin:0}
details.far>summary{cursor:pointer;padding:14px 32px;font-size:14px;font-weight:600;list-style:none}
details.far>summary::-webkit-details-marker{display:none}
details.far>summary::after{content:" ▸"}
details.far[open]>summary::after{content:" ▾"}
details.far .rows{opacity:.85}

.shopfind{padding:14px 32px 0}
.shopfind input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--rule);padding:8px 0;outline:none}
.shopfind input::placeholder{color:var(--muted);font-family:var(--f-serif);font-style:italic}
.shopfind .shopnone{margin:8px 0 0;font-family:var(--f-serif);color:var(--muted);font-size:14px}
.cta-wrap{padding:16px 32px 4px}
.cta{border:0;background:var(--ink);color:var(--paper);padding:11px 18px;font-weight:700;font-size:14px}
.cta:hover{background:color-mix(in srgb,var(--ink) 85%,var(--tag))}
.cta-sm{border:0;background:var(--ink);color:var(--paper);padding:6px 12px;font-size:13px;font-weight:700}
.linkbtn,.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* shop page */
.store-meta{display:flex;flex-direction:column;gap:2px;margin-top:10px;font-size:14.5px}
.store-meta .addrline{font-weight:600}
.store-meta .muted{color:var(--muted);font-family:var(--f-serif);font-style:italic}
.store-links{display:flex;gap:8px 20px;margin-top:12px;flex-wrap:wrap;align-items:center}
.store-links a{font-size:14px;font-weight:600;color:var(--ink);text-underline-offset:3px}
.storephoto{margin:8px 0 12px;position:relative;background:var(--soft);border:1.5px solid var(--rule)}
.storephoto img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
.storephoto figcaption{position:absolute;right:0;bottom:0;font-family:var(--f-serif);font-style:italic;font-size:12px;background:var(--paper);color:var(--ink);padding:2px 8px}
.hours{font-size:14px;margin:6px 0 2px}
.hours summary{cursor:pointer;list-style:none}
.hours summary::-webkit-details-marker{display:none}
.hours summary::after{content:" ▾";color:var(--muted);font-size:11px}
.hours .open{color:var(--lv-green)} .hours .shut{color:var(--lv-no)}
.hours table{border-collapse:collapse;margin:6px 0 2px;font-size:13.5px}
.hours th{text-align:left;font-weight:500;color:var(--muted);padding:1px 14px 1px 0}
.hours td{padding:1px 0;font-variant-numeric:tabular-nums}
.hours tr.today th,.hours tr.today td{color:var(--ink);font-weight:700}
.hours .small{font-size:12px;margin:2px 0 0}

/* delivery and brands */
.deliv{list-style:none;margin:0;padding:0 32px 16px}
.deliv a{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.deliv a:hover strong{text-decoration:underline;text-underline-offset:3px}
.deliv strong{font-size:15px}
.deliv span{font-size:13.5px;color:var(--muted)}
.deliv b.brand{color:var(--ink);font-weight:600}
.brands{display:inline-flex;flex-wrap:wrap;gap:0 10px}
.brand{font-family:var(--f-body);font-style:normal;font-size:13px;font-weight:600;color:var(--ink)}
.brands .brand:not(:last-child)::after{content:",";font-weight:400}
.brandlist{list-style:none;margin:0;padding:0 32px 16px}
.brandlist li{display:flex;flex-direction:column;gap:1px;font-size:15px;padding:8px 0;border-bottom:1px solid var(--line)}
.brandlist li span{font-family:var(--f-serif);font-size:13.5px;color:var(--muted)}

/* ---------- how sure: a symbol and a colour, like a map key ---------- */
.legend{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.lv{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px}
.legend .lv{font-weight:500}
.legend .hint{color:var(--muted);font-weight:400}
.dot{width:10px;height:10px;flex:none;display:inline-block;border-radius:50%;background:currentColor;position:relative;top:.5px}
.lv-green,.cnt.lv-green .dot{color:var(--lv-green)}
.lv-yellow,.cnt.lv-yellow .dot{color:var(--lv-yellow)}
.lv-orange,.cnt.lv-orange .dot{color:var(--lv-orange)}
.lv-guess,.cnt.lv-guess .dot{color:var(--lv-guess)}
.lv-no{color:var(--lv-no)}
.lv-yellow .dot{background:linear-gradient(90deg,transparent 50%,currentColor 50%);box-shadow:inset 0 0 0 2px currentColor}
.lv-orange .dot{border-radius:0;width:8px;height:8px;transform:rotate(45deg);margin:0 1px}
.lv-guess .dot{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.lv-no .dot{background:transparent;border-radius:0}
.lv-no .dot::before,.lv-no .dot::after{content:"";position:absolute;left:4px;top:-1px;width:2px;height:12px;background:currentColor;transform:rotate(45deg)}
.lv-no .dot::after{transform:rotate(-45deg)}
.cnt .dot{width:9px;height:9px}
.cnt.lv-orange .dot{width:7px;height:7px}
.good{color:var(--leaf)} .good-bg{background:var(--leaf)}
.mid{color:var(--amber)} .mid-bg{background:var(--amber)}
.stale{color:var(--chili)} .stale-bg{background:var(--chili)}

/* ---------- the plate: map skin ---------- */
.leaflet-container{font-family:var(--f-body);background:var(--water)}
.mk{stroke:var(--paper);stroke-width:2;fill-opacity:1}
.mk-idle{fill:var(--muted);fill-opacity:.55;stroke-width:1}
.mk-green{fill:var(--lv-green)}
.mk-yellow{fill:var(--lv-yellow)}
.mk-orange{fill:var(--lv-orange)}
.mk-guess{fill:var(--paper);stroke:var(--lv-guess);stroke-width:2.5}
.mk-no{fill:var(--lv-no);stroke:var(--paper);stroke-width:1.5}
.mk-good{fill:var(--leaf)} .mk-mid{fill:var(--amber)} .mk-stale{fill:var(--chili)}
.mk-sel{stroke:var(--ink);stroke-width:3}
.mk-you{fill:var(--tag);fill-opacity:1;stroke:var(--ink);stroke-width:2}
.mk-far{fill-opacity:.35;stroke-opacity:.4}
.leaflet-tooltip.lbl{background:var(--paper);color:var(--ink);border:0;border-radius:0;box-shadow:none;font-weight:700;font-size:12px;padding:1px 6px}
.leaflet-tooltip.lbl::before{display:none}
.leaflet-bar{border:1.5px solid var(--rule)!important;border-radius:0!important;box-shadow:none!important}
.leaflet-bar a{background:var(--paper);color:var(--ink);border-bottom-color:var(--line);border-radius:0!important}
.leaflet-bar a:hover{background:var(--soft)}
.leaflet-control-attribution{background:color-mix(in srgb,var(--paper) 85%,transparent)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--muted)!important}
.city-limit{stroke:var(--limit);stroke-width:2;stroke-opacity:.7;fill:none;stroke-linejoin:round;stroke-dasharray:8 4 2 4}
.radius-ring{fill:var(--ink);fill-opacity:.03;stroke:var(--ink);stroke-opacity:.4;stroke-width:1.5;stroke-dasharray:6 6}
/* the atlas grid: lettered columns, numbered rows */
.grid-line{stroke:var(--ink);stroke-opacity:.16;stroke-width:1}
.grid-lbl{font-family:var(--f-body);font-weight:800;font-size:12px;color:var(--ink);opacity:.5;white-space:nowrap;pointer-events:none;
  text-shadow:0 0 3px var(--paper),0 0 3px var(--paper)}
.leaflet-container:not(.grid-labels) .grid-lbl{display:none}

/* ---------- report and suggest forms ---------- */
dialog.rep{border:2px solid var(--rule);border-radius:0;background:var(--paper);color:var(--ink);padding:0;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);box-shadow:var(--shadow)}
dialog.rep::backdrop{background:rgba(10,15,20,.45)}
.repform{display:flex;flex-direction:column;gap:12px;padding:22px}
.repform h2{margin:0;font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:30px;line-height:1}
.repform .muted{margin:-4px 0 0;color:var(--muted);font-family:var(--f-serif);font-size:14px}
.repform label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:700}
.repform label small{font-weight:400;color:var(--muted);font-family:var(--f-serif);font-style:italic}
.repform input:not([type=radio]):not([type=checkbox]),.repform select,.repform textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--sheet);border:1.5px solid var(--line);border-radius:0;padding:8px 10px;width:100%}
.repform input:focus,.repform select:focus,.repform textarea:focus{border-color:var(--rule);outline:none}
.repform .fixed{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.repform .fixed span{color:var(--muted)}
.repform .saw{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.repform .saw legend{font-size:13.5px;font-weight:700;margin-bottom:4px;padding:0}
.repform .saw label{flex-direction:row;align-items:center;font-weight:400;gap:6px}
.repform input[type=radio],.repform input[type=checkbox]{accent-color:var(--ink)}
.repform .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.repform .err{margin:0;color:var(--lv-no);font-size:13.5px}
.repform .acts{display:flex;justify-content:flex-end;gap:16px;align-items:center}
.repform .ghost{border:0;background:none;color:var(--ink);padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.repform .go{border:0;background:var(--ink);color:var(--paper);padding:9px 18px;font-weight:700}
.repform .go:disabled{opacity:.6}
.repform [data-for][hidden]{display:none}
.sugkind{display:flex;flex-wrap:wrap;gap:4px 14px}
.pricebox{display:flex;gap:6px}
.pricebox input{flex:1;min-width:0}
.pricebox select{flex:0 0 auto;min-width:8.5em;max-width:50%;font:inherit;color:var(--ink);background:var(--sheet);border:1.5px solid var(--line);border-radius:0;padding:0 6px}
.storepick{display:flex;flex-direction:column;gap:6px}
.storepick .splist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:240px;overflow:auto;border-top:1px solid var(--line)}
.storepick .splist li{display:flex;flex-direction:column;padding:7px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.storepick .splist li:hover,.storepick .splist li[aria-selected="true"]{background:var(--soft)}
.storepick .splist li small{color:var(--muted);font-size:12.5px}
.storepick .splist li.none{cursor:default;color:var(--muted);font-size:13.5px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;transition:.25s;background:var(--ink);color:var(--paper);padding:10px 18px;font-size:14px;font-weight:600;z-index:3000}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* a chain in the shop index, and an ingredient seen through one brand */
.entry.chain strong{font-family:var(--f-display-semi);font-stretch:88%}
.entry.chain .kinds::after{content:" ▸"}
.group .index{margin-top:6px}
.bkicker{font-family:var(--f-body);font-style:normal;font-weight:800;color:var(--ink);background:var(--tag);color:var(--tag-ink);padding:0 6px}
.brandonly{margin:12px 0 0;font-family:var(--f-serif);font-size:15px}
.group{scroll-margin-top:250px}
/* subcategories inside a section */
.subhead{margin:18px 0 0;padding-bottom:3px;border-bottom:1px solid var(--rule);display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--f-display-semi);font-stretch:85%;font-weight:700;font-size:18px;line-height:1.1}
.subhead > span:last-child{font-family:var(--f-serif);font-stretch:100%;font-style:italic;font-weight:400;font-size:13px;color:var(--muted)}
.sect h2 + .subhead,.sect h2 + .subgrp > .subhead{margin-top:10px}

/* collapsible sections: closed, the index reads like a contents page */
.sect h2 .sect-toggle,.subhead .sub-toggle{all:unset;box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;cursor:pointer}
.sect h2{display:block}
.sect-toggle > span:first-child::before,.sub-toggle > span:first-child::before{content:"▸";display:inline-block;width:.9em;font-size:.6em;vertical-align:.25em;color:var(--muted);}
.sect-toggle[aria-expanded="true"] > span:first-child::before,.sub-toggle[aria-expanded="true"] > span:first-child::before{content:"▾"}
.sect-toggle:disabled > span:first-child::before,.sub-toggle:disabled > span:first-child::before{display:none}
.sect-toggle:disabled,.sub-toggle:disabled{cursor:default}
.sect-toggle:hover:not(:disabled) .tt,.sub-toggle:hover:not(:disabled) .tt{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sect-toggle:focus-visible,.sub-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sect-toggle > span:last-child{font-family:var(--f-serif);font-stretch:100%;font-style:italic;font-weight:400;font-size:14px;color:var(--muted)}
.sub-toggle > span:last-child{font-family:var(--f-serif);font-stretch:100%;font-style:italic;font-weight:400;font-size:13px;color:var(--muted)}
.subhead{display:block}
.sect:not(.open){padding-bottom:4px}
.sect-preview{margin:6px 0 0 1.3em;font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted);line-height:1.4}

/* heading portraits: up to three ingredient pictures fanned over each other */
.portrait{display:inline-flex;align-items:center;vertical-align:middle;margin-right:12px;flex:none;width:100px;min-height:46px}
.portrait img{width:46px;height:46px;object-fit:contain}
.portrait img + img{margin-left:-20px}
.portrait img:nth-child(2){position:relative;top:5px}
.subhead .portrait{margin-right:9px;width:70px;min-height:32px}
.subhead .portrait img{width:32px;height:32px}
.subhead .portrait img + img{margin-left:-14px}
.subhead .portrait img:nth-child(2){top:3px}
.sect-toggle > span:first-child,.sub-toggle > span:first-child{display:inline-flex;align-items:center}
.sect-toggle > span:first-child::before,.sub-toggle > span:first-child::before{vertical-align:middle;margin-right:4px}
.sect-toggle{align-items:center!important}
.sub-toggle{align-items:center!important;padding:2px 0}

/* sub-subcategories (Limes, Basils...) and items listed straight after headings */
.ssgroup{margin-left:22px}
.subhead.subsub{margin:12px 0 0;border-bottom-style:dotted;font-size:16px}
.subhead.subsub .portrait{width:56px;min-height:26px;margin-right:8px}
.subhead.subsub .portrait img{width:26px;height:26px}
.subhead.subsub .portrait img + img{margin-left:-11px}
.subhead ~ .index:last-child,.ssgroup ~ .index:last-child,.subgrp ~ .index:last-child{margin-top:8px}

/* cross-reference entries: the same ingredient listed in a second place */
.entry.xref strong{font-weight:500;font-style:italic}
.entry.xref .kinds{font-style:italic}
.entry.xref .xref-mark{font-size:15px;color:var(--muted);flex:none}

/* a subcategory cross-referenced from another section */
.subhead.xsub .tt{font-style:italic;font-weight:600}
.subhead.xsub .xsee{margin-left:10px;font-family:var(--f-serif);font-stretch:100%;font-style:italic;font-weight:400;font-size:13px;color:var(--muted)}
.subhead.xsub .xref-mark{font-size:15px;color:var(--muted);font-style:normal}
.subhead{scroll-margin-top:262px}

/* an open subcategory: its hard rule moves from under the heading to under its last item */
.subgrp.open{position:relative}
.subgrp.open > .subhead{border-bottom-color:var(--line)}
.subgrp.open::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--rule)}
.subgrp.open.lvl4::after{border-bottom-style:dotted}

/* entry names wrap instead of being cut off with "…"; on phones the counts drop to their own line under the name */
.el strong{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:pretty}
.el{align-items:last baseline}
@media (max-width:600px){
  .el{display:contents}
  .el > strong{order:0}
  .eb > .kinds{order:1}
  .el > .lead{display:none}
  .el > :not(strong):not(.lead){order:2;margin-top:3px}
  .el > .counts{justify-content:flex-start}
}