/* Vegetation guide (Stage D5). Builds on legal.css. */
main { max-width: 60rem; }
.helper { border: var(--line); background: var(--paper-2); padding: var(--s3); margin: var(--s4) 0; }
.helper h2 { margin-top: 0; }
.helper select { font: inherit; padding: var(--s1) var(--s2); margin: var(--s1) 0 var(--s2); max-width: 100%; border: 1px solid var(--ink-2); background: var(--paper); color: var(--ink); }
.helper select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.veg-class { border-top: var(--line); padding-top: var(--s3); margin-top: var(--s5); }
.veg-class.likely h2::after { content: ' · likely here'; font-size: var(--fs-s); font-weight: 400; color: var(--ink-3); }
.veg-class h2 { display: flex; gap: var(--s2); align-items: baseline; }
.veg-class h2 .cls { font-family: var(--font-mono); border: var(--line); padding: 0 var(--s1); }
.veg-class .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s2) 0; }
.veg-class .facts dt { font-weight: 600; }
.veg-class .facts dd { margin: 0; }
.veg-top { display: grid; grid-template-columns: 240px 1fr; gap: var(--s4); align-items: start; }
.veg-top svg { width: 100%; height: auto; background: var(--paper-2); }
.region-block { margin: var(--s3) 0; }
.region-block h3 { font-size: var(--fs-m); margin: 0 0 var(--s1); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.veg-photo { margin: 0; }
.veg-photo img { width: 100%; height: auto; display: block; }
.veg-photo figcaption { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s1); }

.confusion { border-left: 3px solid var(--ink); padding-left: var(--s3); margin: var(--s2) 0; }
@media (max-width: 600px) {
  .veg-top { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.veg-note { margin: var(--s2) 0; font-size: var(--fs-s); color: var(--ink-2); }
.veg-note summary { cursor: pointer; }