:root {
  --bg: #f2f9fb;
  --surface: #ffffff;
  --fg: #0f2733;
  --fg-muted: #52717f;
  --accent: #0891b2;
  --accent-dark: #0e7490;
  --accent-light: #cffafe;
  --border: #cfe3ea;
  --danger: #e11d48;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}

main { max-width: 640px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-6); }

/* --- Nav --- */
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topnav a {
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.92;
  padding: var(--space-1) 0;
}
.topnav a:hover { opacity: 1; text-decoration: underline; }
.topnav .brand { font-weight: 700; font-size: 1rem; margin-right: auto; opacity: 1; }
.topnav .logout { opacity: 0.75; }

/* --- Typography --- */
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--space-4); line-height: 1.25; }
h2 { font-size: 1.05rem; font-weight: 700; margin: var(--space-5) 0 var(--space-2); line-height: 1.3; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 var(--space-3); }

/* --- Forms --- */
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin: var(--space-4) 0 var(--space-1);
}
label:first-child { margin-top: 0; }
/* checkbox/radio labels stay inline with their control */
label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--fg);
}

input[type="search"], input[type="email"], input[type="text"], input[type="time"], select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  width: 100%;
  background: var(--surface);
  color: var(--fg);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --- Buttons --- */
button, .button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  margin: var(--space-1) var(--space-2) var(--space-1) 0;
}
button:hover, .button:hover { background: var(--accent-dark); }

.button-small {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  background: var(--accent-light);
  color: var(--accent-dark);
}
.button-small:hover { background: var(--border); }

/* the confirm()-guarded delete buttons scattered through the app - a
   distinct muted/red treatment so destructive actions read differently
   from everything else, instead of every button looking identical */
.button-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}
.button-danger:hover { background: var(--danger); color: white; }

/* --- Cards / sections --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.centered-card {
  max-width: 380px;
  margin: 3rem auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6) var(--space-5);
}

/* --- Lists --- */
.result-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.result-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.result-list li:last-child { border-bottom: none; }
.result-list li.clickable-row { cursor: pointer; border-radius: 6px; }
.result-list li.clickable-row:hover,
.result-list li.clickable-row:focus-visible { background: var(--accent-light); outline: none; }
.result-list a { color: var(--fg); text-decoration: none; font-weight: 500; }
.result-list a:hover { text-decoration: underline; }
.family-tag { color: var(--fg-muted); font-size: 0.85rem; text-align: right; }
.result-list.comments-hidden .family-tag { display: none; }

.data-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.data-table th, .data-table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); }
.data-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-muted); }

.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; align-items: center; }
.inline-form input { width: auto; flex: 1 1 160px; }

.scientific-name { color: var(--fg-muted); }
.range-text { font-style: italic; color: var(--fg-muted); }

.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
.checkbox-grid label { display: flex; align-items: center; gap: var(--space-2); font-size: 0.9rem; margin: 0; }

/* --- Chips --- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--accent);
  color: white;
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.chip-remove {
  background: none;
  border: none;
  color: white;
  opacity: 0.8;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.3rem;
  margin: 0;
  cursor: pointer;
}
.chip-remove:hover { opacity: 1; background: none; }

/* --- Tabs --- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.tabs button { background: var(--accent-light); color: var(--accent-dark); margin: 0; }
.tabs button:hover { background: var(--border); }
.tabs button.active { background: var(--accent); color: white; }

/* --- Region map --- */
.region-map-wrap {
  max-width: 100%;
  margin: var(--space-3) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-2);
}
#region-map {
  width: 100%;
  height: auto;
  display: block;
  /* Otherwise a long-press for the magnifier (region-map.js) races against
     the browser's own long-press behaviour (text/element selection callout)
     and reliably loses - the callout wins before our JS timer fires. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.au-outline { fill: var(--accent-light); stroke: var(--accent); stroke-width: 1.5; }
.region-marker-dot { fill: var(--accent); pointer-events: none; }
.region-marker-hit { fill: transparent; cursor: pointer; }
.region-marker-hit:hover, .region-marker-hit:focus {
  fill: var(--accent);
  fill-opacity: 0.25;
  outline: none;
}
.region-marker-hit.selected + .region-marker-dot { fill: var(--danger); }
.region-marker-hit.selected { fill: var(--danger); fill-opacity: 0.2; }

/* Press-and-hold magnifier lens (touch only - see region-map.js): a label
   pill stacked above a circular zoomed view, anchored by its bottom edge
   just above the finger so the label never overlaps the circle. */
.map-magnifier-lens {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.map-magnifier-label {
  background: var(--fg);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  min-height: 1.2em;
}
.map-magnifier-circle {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: var(--surface);
}
.map-magnifier-circle svg { display: block; width: 100%; height: 100%; }
.map-magnifier-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--danger);
  border-radius: 50%;
  pointer-events: none;
}
/* The marker currently "locked" as the pending selection, inside the lens clone only. */
.region-marker-hit.magnifier-locked { fill: var(--danger); fill-opacity: 0.35; }
.region-marker-hit.magnifier-locked + .region-marker-dot { fill: var(--danger); r: 6; }
/* Inside the lens, an already-confirmed selection (.selected, cloned as-is
   from the real map) sitting right next to the actively-dragged marker both
   read as the same solid red up close and blurred together. Dull the
   already-confirmed one specifically within the lens so red = "this is
   where you'll land if you let go right now" and nothing else. :not()
   keeps this from dimming the locked marker on the rare occasion it's the
   same one that was already selected. */
.map-magnifier-circle .region-marker-hit.selected:not(.magnifier-locked) {
  fill: var(--danger);
  fill-opacity: 0.12;
}
.map-magnifier-circle .region-marker-hit.selected:not(.magnifier-locked) + .region-marker-dot {
  fill: var(--danger);
  opacity: 0.4;
}

/* --- Audio player --- */
audio { width: 100%; margin: var(--space-3) 0; border-radius: 8px; }