/* Herp Food Web (Field Tools 0.55.0, mode="foodweb"). Ported from the beta v5: a field-guide spread, the web on the left
   and the open page on the right; on phones the page stacks under the web. Colours come from the site's tokens (rf.css)
   and follow the site's dark theme; the group colours are the beta's. */
.thc-fw {
  --thc-fw-ink: var(--thc-rf-text);
  --thc-fw-raised: var(--thc-rf-raised);
  --thc-fw-muted: var(--thc-rf-muted);
  --thc-fw-line: var(--thc-rf-border);
  --thc-fw-ink2: color-mix(in srgb, var(--thc-rf-text) 72%, transparent);
  --thc-fw-out: #c9782e;   /* orange: to what the pick eats */
  --thc-fw-in: #3f7fa8;    /* blue: from what eats the pick */
  /* 0.55.2: group colours chosen to stay apart (Micha, 2026-11-06: fish/lizards, salamanders/invertebrates, frogs/turtles,
     plants and alligators looked alike). Every pair differs by CIEDE2000 15 or more for normal vision in both themes (was 5.4
     light, 2.5 dark) and by 4 or more under simulated red-green and blue-yellow colour blindness (was 1.2); each group keeps
     one hue in both themes; each colour reaches 3:1 contrast on the panel. Checked by the kit's palette.py. */
  --thc-fw-frog: #2e8b3a; --thc-fw-salamander: #c58217; --thc-fw-lizard: #c24099; --thc-fw-snake: #d84827; --thc-fw-turtle: #11615a; --thc-fw-crocodilian: #5e3f9e;
  --thc-fw-bird: #9e1f3a; --thc-fw-mammal: #6e4423; --thc-fw-fish: #2f82c4; --thc-fw-invert: #8c8c8c; --thc-fw-plant: #6f7a1f;
}
html[data-thc-theme="dark"] .thc-fw {
  --thc-fw-out: #e8b37a; --thc-fw-in: #8fbbd6;
  --thc-fw-frog: #4fc45a; --thc-fw-salamander: #efa52e; --thc-fw-lizard: #f5b0ec; --thc-fw-snake: #ff633f; --thc-fw-turtle: #3fb8b0; --thc-fw-crocodilian: #a07cf2;
  --thc-fw-bird: #e83a4f; --thc-fw-mammal: #c4936a; --thc-fw-fish: #5aa8ff; --thc-fw-invert: #8a8580; --thc-fw-plant: #dede5a;
}
.thc-fw *, .thc-fw *::before, .thc-fw *::after { box-sizing: border-box; }
.thc-fw__status.is-error { color: var(--thc-rf-venom); }
.thc-fw__bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.thc-fw__switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; border: 1px solid var(--thc-fw-line); border-radius: 999px; padding: 6px 12px; background: var(--thc-fw-raised); cursor: pointer; min-height: 44px; }
.thc-fw__switch input { width: 18px; height: 18px; accent-color: var(--thc-rf-leaf); }
.thc-fw__controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.thc-fw__controls label { font-size: 14px; }
.thc-fw__controls input[type=search] { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--thc-rf-stroke); border-radius: 8px; background: var(--thc-fw-raised); color: var(--thc-fw-ink); min-width: 0; flex: 1 1 200px; max-width: 320px; }
.thc-fw__check { display: inline-flex; align-items: center; gap: 6px; }
/* 0.56.0: state or province picker */
.thc-fw .thc-fw__controls select { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--thc-rf-stroke); border-radius: 8px; background: var(--thc-fw-raised); color: var(--thc-fw-ink); min-height: 40px; width: auto; flex: 0 1 260px; min-width: 0; max-width: 100%; }
.thc-fw .thc-fw__controls label { display: inline; width: auto; margin: 0; }
.thc-fw__seg { display: inline-flex; border: 1px solid var(--thc-fw-line); border-radius: 8px; overflow: hidden; }
.thc-fw__seg button { background: var(--thc-fw-raised); color: var(--thc-fw-ink); border: 0; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; min-height: 40px; }
.thc-fw__seg button[aria-pressed="true"] { background: var(--thc-rf-leaf); color: #fff; }
.thc-fw button:focus-visible, .thc-fw input:focus-visible, .thc-fw a:focus-visible { outline: 2px solid var(--thc-fw-in); outline-offset: 2px; }
.thc-fw__spread { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .9fr); gap: 14px; min-height: 0; }
@media (max-width: 820px) { .thc-fw__spread { grid-template-columns: minmax(0, 1fr); } }
.thc-fw__web { position: relative; background: var(--thc-fw-raised); border: 1px solid var(--thc-fw-line); border-radius: var(--thc-rf-radius); height: min(70vh, 640px); min-height: 380px; overflow: hidden; touch-action: none; }
.thc-fw__web svg { width: 100%; height: 100%; display: block; cursor: grab; }
.thc-fw__web svg:active { cursor: grabbing; }
.thc-fw__lbl { font-size: 11px; fill: var(--thc-fw-ink); paint-order: stroke; stroke: var(--thc-fw-raised); stroke-width: 3px; stroke-linejoin: round; }
.thc-fw__lbl.is-group { font-size: 13px; font-weight: 600; }
/* 0.55.3: the how-to line sits under the legend, outside the web. */
.thc-fw__hint { font-size: 13px; color: var(--thc-fw-ink2); margin: 6px 0 0; }
.thc-fw__tip { margin: 10px 0 0; }
/* 0.55.3: bigger icons (24 px of a 40 px button), a tinted face, a firmer edge and a soft shadow so the buttons stand off the web;
   Fit uses a frame-corners icon and a dashed edge so it never reads as another plus. */
.thc-fw__zoom { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; }
.thc-fw__zoom button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--thc-rf-stroke); background: color-mix(in srgb, var(--thc-fw-raised) 86%, var(--thc-fw-ink) 14%); color: var(--thc-fw-ink); border-radius: 10px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.thc-fw__zoom button:hover { background: color-mix(in srgb, var(--thc-fw-raised) 72%, var(--thc-fw-ink) 28%); }
.thc-fw__zoom svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.thc-fw__zoom button.is-fit { margin-top: 4px; border-style: dashed; }
.thc-fw__zoom button.is-fit svg { stroke-width: 2.2; }
/* 0.56.1: Back sits under Fit, a little apart; dimmed when there is nothing to go back to. */
.thc-fw__zoom button.is-back { margin-top: 10px; }
.thc-fw__zoom button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.thc-fw__reset { min-height: 40px; }
/* 0.55.4: Show more */
.thc-fw__more { margin-top: 8px; display: block; }
.thc-fw__photo.is-pending { display: flex; align-items: center; min-height: 140px; font-size: 13px; }
.thc-fw__evlist { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.thc-fw__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--thc-fw-ink2); margin-top: 8px; }
.thc-fw__legend span { display: inline-flex; align-items: center; gap: 5px; }
.thc-fw__legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.thc-fw__page { background: var(--thc-fw-raised); border: 1px solid var(--thc-fw-line); border-radius: var(--thc-rf-radius); padding: 14px 16px; min-width: 0; max-height: min(70vh, 640px); overflow: auto; overflow-wrap: anywhere; }
@media (max-width: 820px) { .thc-fw__page { max-height: none; } }
.thc-fw__h { font-size: 1.4rem; margin: 0; }
.thc-fw__sci { font-style: italic; color: var(--thc-fw-ink2); font-size: 14px; }
.thc-fw__kind { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--thc-rf-stroke); margin-top: 2px; }
.thc-fw__small { font-size: 13px; color: var(--thc-fw-ink2); }
.thc-fw__general { margin-top: 12px; border-left: 3px solid var(--thc-rf-sage); padding: 2px 0 2px 10px; }
.thc-fw__general h3 { font-size: 15px; margin: 0 0 4px; }
.thc-fw__general ul { margin: 0; padding-left: 18px; font-size: 14px; }
.thc-fw__src { font-size: 12px; color: var(--thc-fw-ink2); }
.thc-fw__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .thc-fw__cols { grid-template-columns: 1fr; } }
.thc-fw__col { min-width: 0; }
.thc-fw__col h3 { font-size: 15px; font-weight: 600; border-bottom: 2px solid var(--thc-fw-line); padding-bottom: 4px; margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.thc-fw__col h3 small { font-weight: 400; color: var(--thc-fw-ink2); font-size: 12px; }
.thc-fw__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.thc-fw__col li button { width: 100%; text-align: left; background: none; border: 0; padding: 7px 6px; font: inherit; color: var(--thc-fw-ink); cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; }
.thc-fw__col li button:hover, .thc-fw__col li button.is-on { background: var(--thc-fw-muted); }
.thc-fw__nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thc-fw__ct { font-size: 12px; color: var(--thc-fw-ink2); font-variant-numeric: tabular-nums; }
.thc-fw__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.thc-fw__empty { color: var(--thc-fw-ink2); font-size: 14px; padding: 4px 6px; }
.thc-fw__chip { display: inline-block; font-size: 11px; border: 1px solid var(--thc-fw-line); border-radius: 10px; padding: 1px 7px; text-transform: none; letter-spacing: 0; }
.thc-fw__evidence { margin-top: 14px; border-top: 1px dashed var(--thc-fw-line); padding-top: 10px; }
.thc-fw__evidence h3 { font-size: 15px; margin: 0 0 4px; }
.thc-fw__evidence p { margin: 4px 0; font-size: 14px; }
.thc-fw__evidence ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.thc-fw__gate { background: var(--thc-fw-muted); border: 1px solid var(--thc-fw-line); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.thc-fw__gatehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.thc-fw__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thc-fw__btn { font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--thc-fw-line); background: var(--thc-fw-raised); color: var(--thc-fw-ink); cursor: pointer; min-height: 40px; }
.thc-fw__btn.is-primary { background: var(--thc-rf-leaf); border-color: var(--thc-rf-leaf); color: #fff; }
.thc-fw__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.thc-fw__photo { margin: 0; border: 1px solid var(--thc-fw-line); border-radius: 8px; padding: 6px; background: var(--thc-fw-raised); min-width: 0; }
.thc-fw__photo img { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 5px; }
.thc-fw__photo figcaption { font-size: 12px; margin-top: 4px; color: var(--thc-fw-ink2); }
.thc-fw__about { margin-top: 14px; border-top: 1px solid var(--thc-fw-line); padding-top: 8px; font-size: 14px; }
.thc-fw__about summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.thc-fw__about p { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { .thc-fw * { transition: none !important; animation: none !important; } }