:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #1f2933;
  background: #f7f8f5;
}

body { margin: 0; }
.site-header { display: flex; justify-content: space-between; padding: 1rem 2rem; background: #173f35; color: white; }
.site-header a, .link-button { color: white; }
.brand { font-size: 1.25rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 1rem; align-items: center; }
.container { max-width: 70rem; margin: 2rem auto; padding: 0 1rem; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.action-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stacked-form { max-width: 32rem; display: grid; gap: 1rem; }
.stacked-form > div { display: grid; gap: .35rem; }
input, select, button, .button { font: inherit; padding: .55rem .7rem; }
input[type="search"] { min-width: 22rem; }
button, .button { border: 0; border-radius: .25rem; background: #246b59; color: white; cursor: pointer; text-decoration: none; }
.button-danger { background: #8a1c1c; }
.button-secondary { background: #5b6661; }
.inline-form { display: inline; }
.link-button { padding: 0; background: none; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { text-align: left; padding: .75rem; border-bottom: 1px solid #d8dedb; }
.message { padding: .75rem 1rem; border-left: .3rem solid #246b59; background: #e8f3ef; }
.message-error, .error, .errorlist { color: #8a1c1c; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.details dt { font-weight: 700; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.search-form { display: flex; align-items: end; gap: .75rem; margin-bottom: 1.5rem; }
.status { font-family: ui-monospace, monospace; }
pre { white-space: pre-wrap; background: white; padding: 1rem; overflow-wrap: anywhere; }
.study-layout { display: grid; grid-template-columns: minmax(18rem, 2fr) minmax(24rem, 3fr); gap: 2rem; }
.study-map { min-height: 24rem; background: #e7eee9; border: 1px solid #afbeb7; }
.study-map svg { display: block; width: 100%; height: 100%; min-height: 24rem; }
.map-buffer { fill: #d5b65c55; stroke: #9a781a; stroke-width: 2; }
.map-area { fill: #27896c88; stroke: #155744; stroke-width: 3; }
.map-centroid { fill: #b3261e; stroke: white; stroke-width: 2; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; }
.map-legend span { display: inline-block; width: 1rem; height: 1rem; margin-right: .3rem; vertical-align: middle; }
.legend-area { background: #27896c; }
.legend-buffer { background: #d5b65c; }
.legend-centroid { background: #b3261e; border-radius: 50%; }
.checksum { font-family: ui-monospace, monospace; word-break: break-all; }
.eyebrow { margin-bottom: 0; font-family: ui-monospace, monospace; font-weight: 700; }
.eyebrow + h1 { margin-top: .2rem; }
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; }
.campaigns { margin-top: 2rem; }
.habitats, .observations { margin-top: 2rem; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}
.dashboard-panel, .reference-version {
  padding: 1rem;
  border: 1px solid #d8dedb;
  background: white;
}
.dashboard-panel h2 { margin-top: 0; }
.taxon-list { padding-left: 1.25rem; }
.taxon-list small { color: #52615b; }
.metric { font-size: 1.2rem; }
.badge {
  display: inline-block;
  padding: .1rem .35rem;
  border-radius: .2rem;
  background: #f7df9b;
  color: #5d4500;
  font-size: .75rem;
}
.help-text { margin: 0; color: #52615b; font-size: .9rem; }
.taxon-results {
  max-height: 20rem;
  overflow-y: auto;
  border: 1px solid #afbeb7;
  background: white;
}
.taxon-result {
  display: block;
  width: 100%;
  border-radius: 0;
  border-bottom: 1px solid #d8dedb;
  background: white;
  color: #1f2933;
  text-align: left;
}
.taxon-result:hover, .taxon-result:focus { background: #e8f3ef; }
fieldset { border: 1px solid #afbeb7; }
fieldset.is-disabled { opacity: .6; }
.table-scroll { overflow-x: auto; }
.matrix-presence { text-align: center; }
.comparison-form { display: grid; gap: 1rem; max-width: 42rem; margin-bottom: 1rem; }
.comparison-form fieldset { display: grid; gap: .5rem; }
.comparison-form button { justify-self: start; }
@media (max-width: 52rem) {
  .study-layout { grid-template-columns: 1fr; }
  .site-header, .heading-row { align-items: flex-start; flex-direction: column; }
  nav { flex-wrap: wrap; }
  input[type="search"] { min-width: 0; width: 100%; }
}
*:focus-visible { outline: .2rem solid #efb700; outline-offset: .15rem; }
.map-habitat {
  stroke: none;
}

.legend-habitat {
  border: 0;
}