/* Soppkart default theme: forest green, chanterelle gold, warm paper. */
:root {
  --paper: #faf7f0;
  --surface: #ffffff;
  --ink: #2a2a22;
  --muted: #5f5b4e;
  --line: #e4ddcc;
  --forest: #2f5233;
  --forest-ink: #f4f1e6;
  --gold: #e8a317;
  --link: #2f6b3a;
  --radius: 10px;
  --max: 64rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link); }
h1, h2 { line-height: 1.2; color: var(--forest); }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 2.2rem 0 0.6rem; }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem max(16px, calc((100% - var(--max)) / 2));
  background: var(--forest); color: var(--forest-ink);
}
.site-header a { color: var(--forest-ink); text-decoration: none; }
.brand { font-weight: 700; font-size: 1.2rem; }
.header-nav { display: flex; gap: 1.2rem; }
.header-nav a:hover { text-decoration: underline; }
.menu-button {
  font: inherit; color: var(--forest-ink); background: transparent; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.4); border-radius: 8px; padding: 0.25rem 0.8rem;
}
.menu-button:hover, .menu-button[aria-expanded="true"] { background: rgb(255 255 255 / 0.12); }

main > * { max-width: var(--max); margin-inline: auto; padding-inline: 16px; }
.intro { padding-top: 1.6rem; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 46rem; margin: 0 0 1rem; }
.breadcrumbs { padding-top: 1rem; font-size: 0.9rem; color: var(--muted); }

.content { padding-bottom: 2rem; }
.content ul, .content ol { padding-left: 1.2rem; }
.content li { margin: 0.3rem 0; }

.cards { list-style: none; padding: 0 !important; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card {
  display: flex; flex-direction: column;
  padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.card:hover { border-color: var(--gold); }
.card .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 0.5rem; }
.card em, .card span:last-child { color: var(--muted); font-size: 0.9rem; }

.county-list { columns: 2 14rem; }
.county-list li { break-inside: avoid; }
.county-list span { color: var(--muted); font-size: 0.9rem; }

.notice {
  background: #fff6de; border-left: 4px solid var(--gold);
  padding: 0.7rem 1rem; border-radius: 0 8px 8px 0;
}

.season { margin: 1rem 0; }
.season-bars {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end;
  list-style: none; padding: 0 !important; margin: 0; height: 170px;
}
.season-bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; margin: 0; }
.season-bars .bar { width: 100%; max-width: 38px; height: var(--h); min-height: 2px; background: var(--gold); border-radius: 4px 4px 0 0; }
.season-bars .count { font-size: 0.7rem; color: var(--muted); order: -1; }
.season-bars .month { font-size: 0.75rem; color: var(--muted); }
.season figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: var(--surface); }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--forest); }
.num { text-align: right; white-space: nowrap; }

.popup-finds { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.85rem; }
.popup-finds li { margin: 0.2rem 0; }
.maplibregl-popup-content { font: 14px/1.4 system-ui, sans-serif; }

.site-footer {
  margin-top: 2rem; padding: 1.2rem max(16px, calc((100% - var(--max)) / 2));
  background: #efe9da; color: var(--muted); font-size: 0.9rem;
}
.site-footer p { margin: 0.3rem 0; }

/* ---- Full-screen map pages: header, then the map fills the rest; text lives in the slide-in menu. */
.map-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.map-page .site-header { padding-inline: 16px; flex: none; }
.map-layout { position: relative; flex: 1; min-height: 0; }
.map-layout > * { max-width: none; margin: 0; padding: 0; }
.map-wrap { position: absolute; inset: 0; }
/* maplibre-gl.css sets position: relative on the map, so size it explicitly. */
.map { width: 100%; height: 100%; background: #eef1ee; }
.map > .notice { margin: 16px; }

.map-title {
  /* Above Leaflet's panes (400) and controls (800) in the fallback map. */
  position: absolute; z-index: 1000; top: 10px; left: 10px; max-width: calc(100% - 70px);
  background: rgb(255 255 255 / 0.93); border-radius: var(--radius); padding: 0.5rem 0.8rem;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.18);
}
.map-title h1 { font-size: 1.05rem; margin: 0; }
.map-title p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.species-picker { display: block; margin-top: 0.3rem; font-size: 0.9rem; }
.species-picker select { font: inherit; }

.panel {
  position: absolute; z-index: 1001; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--paper); box-shadow: -4px 0 16px rgb(0 0 0 / 0.2);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(105%); transition: transform 0.2s ease; visibility: hidden;
}
.menu-open .panel { transform: none; visibility: visible; }
.panel-close {
  position: sticky; top: 0; float: right; margin: 8px; width: 40px; height: 40px;
  font-size: 1.6rem; line-height: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}
.panel-nav ul { list-style: none; margin: 0; padding: 1rem 16px 0.8rem; border-bottom: 1px solid var(--line); }
.panel-nav li { margin: 0.2rem 0; }
.panel-nav a { font-weight: 600; text-decoration: none; }
.panel-nav a[aria-current="page"] { color: var(--ink); }
.panel-content { padding: 0 16px 1.5rem; }
.panel-content h2:first-child, .panel-content .breadcrumbs + section h2:first-child { margin-top: 1.2rem; }
.panel-content .breadcrumbs { padding-top: 0.8rem; }
.panel-content ul, .panel-content ol { padding-left: 1.2rem; }
.panel-content .cards { grid-template-columns: 1fr; }
.panel-content .county-list { columns: 1; }
.panel-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

/* Leaflet fallback (browsers without WebGL2): look like the MapLibre map. */
.leaflet-muted-tiles { filter: saturate(0.7); }
.leaflet-find-cluster { background: transparent; }
.leaflet-locate {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: #fff; color: #333; font-size: 20px; text-decoration: none;
}
.leaflet-popup-content { font: 14px/1.4 system-ui, sans-serif; }

/* Category filter in the header of map pages (Sopp / Bær / Fisk). Categories without species are greyed out. */
.category-bar { display: flex; gap: 2px; padding: 3px; background: rgb(0 0 0 / 0.18); border-radius: 999px; }
.category {
  padding: 0.2rem 0.9rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600;
  color: var(--forest-ink); text-decoration: none;
}
.site-header a.category { color: var(--forest-ink); }
.site-header a.category:hover { background: rgb(255 255 255 / 0.12); }
.site-header a.category[aria-current="true"] { background: var(--gold); color: #3a2604; }
.category[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 480px) {
  .brand-name, .menu-label { display: none; }
  .category { padding-inline: 0.7rem; }
}

/* Popup for a find */
.find-popup { font: 14px/1.4 system-ui, sans-serif; max-height: min(60vh, 420px); overflow-y: auto; }
.find-species { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; padding-right: 1rem; }
.find-popup .find-species a { font-weight: 700; font-size: 1.05rem; color: var(--forest); text-decoration: none; }
.find-popup .find-species a:hover { text-decoration: underline; }
.find-species em { color: var(--muted); }
.find-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #3a2604; align-self: center; }
.find-count { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.85rem; }
.find { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; margin: 0.5rem 0 0; padding-top: 0.5rem;
  border-top: 1px solid var(--line); }
.find dt { color: var(--muted); }
.find dd { margin: 0; overflow-wrap: anywhere; }
.find-popup .find a { color: var(--link); }

/* Place search: floats centred at the top of the map, under the Sopp/Bær/Fisk bar, styled like the map buttons. */
.place-search {
  position: absolute; z-index: 1000; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(380px, calc(100% - 140px));
}
.place-search input {
  width: 100%; font: inherit; font-size: 0.95rem; padding: 0.55rem 1rem 0.55rem 2.4rem;
  border: 0; border-radius: 999px; background: var(--surface) no-repeat 0.85rem center / 1.05rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5b4e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.22);
}
.place-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.place-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 4px 0; background: var(--surface);
  border-radius: 12px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.2); font-size: 0.9rem; overflow: hidden;
}
.place-results li { padding: 0.4rem 1rem; cursor: pointer; }
.place-results li span { color: var(--muted); }
.place-results li.active, .place-results li:hover { background: #fff6de; }
.place-results li.empty { color: var(--muted); cursor: default; }
/* Too narrow for search and title side by side: search on top across the map, the title card below it. */
@media (max-width: 900px) {
  .place-search { left: 10px; right: 56px; width: auto; transform: none; }
  .map-title { top: 66px; }
  .popup-open .map-title { visibility: hidden; }
}

/* Species picture: the same reference photo for every find of a species */
.find-photo { margin: -2px 0 0.5rem; }
.find-photo img { display: block; width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }
.find-photo figcaption, .species-photo figcaption { font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
.find-popup .find-photo a { color: var(--muted); }
.species-photo { margin: 0.8rem 0; }
.species-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Legend card: species on the map with their colours. Rolls up to letter chips (data-collapsed). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.map-title { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 2.4rem 0.55rem 0.6rem; }
.map-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; }
.map-legend li { display: flex; align-items: center; gap: 0.5rem; }
.map-legend li em { color: var(--muted); font-size: 0.8rem; }
.map-legend li.loading .chip { animation: chip-pulse 1s ease-in-out infinite alternate; }
.map-legend li.error .chip { opacity: 0.4; }
@keyframes chip-pulse { to { opacity: 0.35; } }
.map-legend .legend-empty { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 999px;
  font: 700 0.78rem/1 system-ui, sans-serif; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.7), 0 1px 2px rgb(0 0 0 / 0.25);
}
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.45); flex: none; }
.legend-edit {
  display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--link);
}
.legend-edit-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 999px; border: 1.5px dashed var(--muted); color: var(--muted); font-size: 1rem; line-height: 1;
}
.legend-edit:hover .legend-edit-label { text-decoration: underline; }
.legend-toggle {
  position: absolute; top: 0.4rem; right: 0.35rem; width: 1.8rem; height: 1.8rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; color: var(--muted);
}
.legend-toggle:hover { background: rgb(0 0 0 / 0.06); color: var(--ink); }
.legend-toggle svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
/* Rolled up: a row of letter chips, the + and the toggle, which now points the other way. */
.map-title[data-collapsed="true"] { flex-direction: row; align-items: center; gap: 0.3rem; padding: 0.4rem 2.3rem 0.4rem 0.45rem; }
.map-title[data-collapsed="true"] .map-legend { flex-direction: row; gap: 0.3rem; }
.map-title[data-collapsed="true"] .legend-name,
.map-title[data-collapsed="true"] .map-legend li em,
.map-title[data-collapsed="true"] .legend-edit-label { display: none; }
.map-title[data-collapsed="true"] .legend-toggle { top: 50%; transform: translateY(-50%); }
.map-title[data-collapsed="true"] .legend-toggle svg { transform: rotate(180deg); }

/* "Vis på kartet" in the menu */
.species-filter { padding: 1rem 16px 1rem; border-bottom: 1px solid var(--line); }
.species-filter h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.species-options { list-style: none; margin: 0; padding: 0; }
.species-options li { display: flex; align-items: center; justify-content: space-between; }
.species-options label { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; cursor: pointer; flex: 1; }
.species-options input { width: 1.1rem; height: 1.1rem; accent-color: var(--forest); margin: 0; }
.species-options em { color: var(--muted); font-size: 0.85rem; }
.remove-species {
  border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--muted); padding: 0 0.3rem;
}
.remove-species:hover { color: var(--ink); }
.species-search { position: relative; margin-top: 0.8rem; }
.species-search label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; }
.species-search input {
  width: 100%; font: inherit; font-size: 0.95rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.species-search input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.species-search .species-results { z-index: 2; }
.species-search-note { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); }
.panel-nav ul { padding-top: 0.8rem; }

/* Clusters (both map engines): a ring split by species colour around the number of finds. */
.cluster { position: relative; cursor: pointer; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.3)); }
.cluster svg { position: absolute; inset: 0; z-index: 0; }
/* leaflet.css gives every svg in the map z-index 200, which would cover the number. */
.leaflet-map-pane .cluster svg { z-index: 0; }
.cluster span {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  font: 700 12px system-ui, sans-serif; color: #2a2116;
}

/* iPhone and other phones with a notch or camera cut-out: the page covers the whole screen (viewport-fit=cover),
   the green header reaches the very top, and header, controls and menu keep clear of the camera and home bar. */
html { background: var(--forest); }
body { min-height: 100vh; }
.site-header {
  padding-top: calc(0.7rem + env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left), calc((100% - var(--max)) / 2));
  padding-right: max(16px, env(safe-area-inset-right), calc((100% - var(--max)) / 2));
}
.map-page .site-header {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.map-page .maplibregl-ctrl-bottom-left, .map-page .maplibregl-ctrl-bottom-right,
.map-page .leaflet-bottom { margin-bottom: env(safe-area-inset-bottom); }
.map-page .maplibregl-ctrl-top-right, .map-page .leaflet-right { margin-right: env(safe-area-inset-right); }
.map-title { left: max(10px, env(safe-area-inset-left)); }
.panel-content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.site-footer { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }

/* Adding one's own find: a map button (top right, among zoom and position), a hint under the search field,
   and the form. Nothing sits at the bottom edge, where phone browsers put their toolbars. */
.add-find-control { margin-top: 10px; }
.add-find-button {
  display: flex; align-items: center; gap: 0.4rem; height: 40px; padding: 0 0.9rem 0 0.7rem;
  font: 600 0.9rem system-ui, sans-serif; color: #fff; background: var(--forest);
  border: 0; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 6px rgb(0 0 0 / 0.3); white-space: nowrap;
}
.add-find-button svg { width: 1.25rem; height: 1.25rem; fill: var(--gold); flex: none; }
.add-find-button:hover { background: #3a6640; }
.add-find-button[hidden] { display: none; }
.add-find-hint {
  position: absolute; z-index: 1002; left: 50%; transform: translateX(-50%); top: 66px;
  width: min(380px, calc(100% - 20px));
  background: var(--surface); border-radius: 14px; padding: 0.8rem 1rem; text-align: center;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.25); border: 2px solid var(--gold);
}
.add-find-hint p { margin: 0 0 0.6rem; font-weight: 600; }
.add-find-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.add-find-actions button {
  font: inherit; font-size: 0.95rem; padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.add-find-actions .use-location, .add-find-actions .save-find { background: var(--forest); color: #fff; border-color: var(--forest); }
.add-find-actions .save-find:disabled { opacity: 0.6; cursor: wait; }
.add-find-form {
  position: absolute; z-index: 1002; left: 10px; top: 66px;
  width: min(360px, calc(100% - 20px)); max-height: calc(100% - 90px); overflow-y: auto;
  background: var(--surface); border-radius: 14px; padding: 1rem 1rem 0.9rem;
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.3);
}
.add-find-title { margin: 0 0 0.6rem; font-size: 1.15rem; font-weight: 700; color: var(--forest); }
.add-find-form label { display: block; margin: 0.6rem 0 0.25rem; font-weight: 600; font-size: 0.92rem; }
.add-find-form label span { font-weight: 400; color: var(--muted); }
.add-find-form input {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.add-find-form input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.add-find-form .species-search { margin: 0; }
.add-find-form .species-results { z-index: 3; }
.add-find-note { font-size: 0.8rem; color: var(--muted); margin: 0.7rem 0; }
.add-find-error { color: #a4161a; font-size: 0.9rem; margin: 0 0 0.6rem; }
.add-find-form .add-find-actions { justify-content: flex-start; }
.add-find-toast {
  position: absolute; z-index: 1003; left: 50%; transform: translateX(-50%); top: 70px; margin: 0;
  background: var(--forest); color: #fff; padding: 0.6rem 1rem; border-radius: 999px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.3); font-weight: 600; white-space: nowrap;
}
/* While adding a find, the hint or form takes the place of the legend (and of the search, for the form). */
[data-adding="pick"] .map-title, [data-adding="form"] .map-title, [data-adding="form"] .place-search { visibility: hidden; }
@media (max-width: 600px) {
  .add-find-form { left: 8px; right: 8px; top: 8px; width: auto; max-height: calc(100% - 16px); }
}
.draft-marker svg { width: 34px; height: 34px; fill: var(--forest); stroke: #fff; stroke-width: 1; }


/* Species cards in the menu: species that are switched off are dimmed. */
.cards .card-hidden .card { opacity: 0.55; }
div.card { cursor: default; }

/* Phones: on map pages only the map zooms. Pinching elsewhere (header, legend) must not zoom or shift the page,
   and nothing may make the page wider than the screen (the hidden menu panel sits just off to the right). */
.map-page {
  position: fixed; inset: 0; overscroll-behavior: none;
  touch-action: pan-x pan-y; /* no page pinch-zoom; the map canvas handles its own gestures */
}
.map-layout { overflow: hidden; }
/* iOS zooms into any text field with a font smaller than 16px; keep them at 16px on touch screens. */
@media (pointer: coarse), (max-width: 600px) {
  .place-search input, .species-search input, .add-find-form input { font-size: 16px; }
}

/* Edibility badges (NSNF's normliste). */
.edibility {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; vertical-align: middle;
  font: 600 0.72rem/1.5 system-ui, sans-serif; letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent;
}
.edibility.edible { background: #e3f1dc; color: #245c1d; border-color: #b9dcac; }
.edibility.caution { background: #fff1cf; color: #7a5200; border-color: #f0d38a; }
.edibility.inedible { background: #eeebe4; color: #57524a; border-color: #d8d2c6; }
.edibility.poisonous { background: #fde2e0; color: #a4161a; border-color: #f4b3ae; }
.edibility.deadly { background: #a4161a; color: #fff; border-color: #7a0f12; }
.edibility.deadly::before { content: "☠ "; }
.edibility.unknown { background: transparent; color: var(--muted); border-color: var(--line); border-style: dashed; }
.find-edibility { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--muted); }
.find-edibility a { color: var(--muted); }
.edibility-line { margin: 0.6rem 0 1rem; }
.edibility-legend { list-style: none; padding: 0 !important; }
.edibility-legend li { margin: 0.45rem 0; }
.examples { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.examples li { margin: 0; }
.panel-content h3 { margin: 1.2rem 0 0.3rem; font-size: 1.02rem; color: var(--forest); }
.panel-content h3 + p { margin-top: 0; }
.species-options .edibility { margin-left: 0.2rem; }
/* A poisonous species in the legend gets a small red warning corner. */
.chip { position: relative; }
.chip-poison::after {
  content: "!"; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  background: #a4161a; color: #fff; font: 700 9px/12px system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 1.5px #fff;
}
/* A find's popup goes above the floating search field and legend. */
.map-page .maplibregl-popup { z-index: 1001; }