.holistic-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.control span {
  display: block;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 6px;
}

.control select,
.control input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
}

.holistic-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 18px;
}

.chip {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 15%);
  background: transparent;
}

.chip--on {
  border-color: rgb(0 0 0 / 50%);
  font-weight: 600;
}

.holistic-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  align-items: start;
}

.map-shell {
  min-height: 240px;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 12px;
  overflow: hidden;
  padding: 10px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}

.plant-card {
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 14px;
  padding: 14px;
}

.plant-card .latin {
  font-size: 0.85em;
  opacity: 0.75;
  font-style: italic;
  margin-left: 6px;
}

.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.pill {
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 12%);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.tag {
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 12%);
  opacity: 0.95;
}

.notes {
  margin: 10px 0;
}

.cautions {
  margin-top: 10px;
}

.smallprint {
  margin-top: 10px;
  font-size: 0.85rem;
  opacity: 0.75;
}

@media (width <= 900px) {
  .holistic-controls {
    grid-template-columns: 1fr;
  }

  .holistic-layout {
    grid-template-columns: 1fr;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }
}