/* Self-hosted slab serif (Bitter, OFL) for the "wild" theme headings —
   bundled so it works offline on the Pi. */
@font-face {
  font-family: 'AdderSerif';
  src: url('/static/fonts/bitter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AdderSerif';
  src: url('/static/fonts/bitter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f2f6f4;
  --card: #ffffff;
  --ink: #17211c;
  --muted: #5c6b63;
  --accent: #2c9c5d;
  --accent-dark: #1d7a45;
  --good: #2c9c5d;
  --warn: #c98a1a;
  --border: #e2ebe5;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,45,32,.05), 0 2px 8px rgba(20,45,32,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding-bottom: 90px;
}

header.top {
  background: var(--card);
  color: var(--ink);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(20,45,32,.04);
}

/* Brand lockup: the A Patch Wilder wordmark with "Adder Identification"
   sitting directly beneath it as one centred unit. */
header.top a.brand {
  color: var(--accent-dark);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

header.top .header-action {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 13px;
  border-radius: 10px;
}
header.top .header-action:active { background: var(--accent-dark); }

.brand-logo { display: block; width: auto; height: auto; max-height: 84px; max-width: min(420px, 82vw); }
.brand-mark { font-size: 2.4rem; line-height: 1; }
.brand-text { font-weight: 700; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-dark); }
@media (max-width: 420px) {
  .brand-logo { max-height: 60px; }
  .brand-text { font-size: 0.7rem; letter-spacing: 0.14em; }
  header.top .header-action { padding: 7px 10px; font-size: 0.78rem; }
}

main { padding: 14px; max-width: 720px; margin: 0 auto; }

.flash {
  background: #e6f5ec;
  border: 1px solid #b6e0c6;
  color: #185c37;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.stat-row {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  flex: 1;
  min-width: 100px;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease;
}
.stat.active { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.stat:hover { border-color: var(--accent); }

.stat .num { font-size: 1.5rem; font-weight: 700; color: var(--accent-dark); }
.stat .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.pending-banner {
  display: block;
  background: #fff6e2;
  border: 1px solid #f0d79a;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.pending-banner span.arrow { color: var(--warn); float: right; }

input[type=text], input[type=search], input[type=date], input[type=datetime-local], textarea, select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 1rem;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}

textarea { min-height: 70px; resize: vertical; }

.search-bar { margin-bottom: 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #ddd; }
.card .body { padding: 8px 10px; }
.card .name { font-weight: 700; font-size: 0.95rem; }
.card .meta { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 13px 18px;
  border-radius: 12px;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:active { background: var(--accent-dark); }
.btn.secondary { background: #fff; color: var(--accent-dark); border: 1px solid var(--accent); }
.btn.block { display: block; width: 100%; margin-top: 10px; }
.btn.small { padding: 8px 12px; font-size: 0.85rem; }
.btn.danger { background: #a83232; }

.fab {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: calc(100% - 32px);
  max-width: 688px;
}

form.field { margin-bottom: 14px; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }

.photo-hero { width: 100%; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; border: 1px solid var(--border); }
.photo-hero img { width: 100%; display: block; }

.candidate {
  display: flex;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.candidate img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.candidate .info { flex: 1; }
.candidate .conf { font-size: 0.78rem; color: var(--muted); }
.confbar { height: 6px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.confbar > div { height: 100%; background: var(--good); }

.sighting-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.sighting-row img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.sighting-row .meta { font-size: 0.85rem; color: var(--muted); }

.dup-compare { display: flex; gap: 10px; }
.dup-side { flex: 1 1 0; min-width: 0; }
.dup-label { font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; text-align: center; }
.dup-side img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); display: block; }

.sighting-date { font-weight: 600; color: var(--ink); text-decoration: none; }
.sighting-date:hover { color: var(--accent-dark); text-decoration: underline; }

.photo-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.photo-chips form { margin: 0; }
.chip {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.4;
}
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:active { transform: scale(.97); }

h1 { font-size: 1.4rem; margin: 6px 0 2px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
.muted { color: var(--muted); }
.section { margin-top: 22px; }

.pending-list-item {
  display: flex;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
.pending-list-item img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }

.file-input-wrap {
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  padding: 24px 14px;
  text-align: center;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 600;
}
.file-input-wrap input { margin-top: 10px; }

.empty { text-align: center; padding: 40px 14px; color: var(--muted); }

.quick-links { display: flex; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.quick-links a { font-size: 0.85rem; color: var(--accent-dark); text-decoration: none; font-weight: 600; background: #fff; border: 1px solid var(--border); padding: 8px 12px; border-radius: 10px; }

/* --- bar charts (pure CSS, no JS lib) --- */
.chart-block { margin: 14px 0 22px; }
.chart-title { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 110px;
  border-bottom: 1px solid var(--border);
  padding: 0 2px;
}
.bar-chart .bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.bar-chart .bar-count { font-size: 0.68rem; color: var(--muted); margin-bottom: 2px; }
.bar-chart .bar { width: 100%; max-width: 26px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.bar-chart .bar.peak { background: var(--accent-dark); }
a.bar { display: block; cursor: pointer; text-decoration: none; }
a.bar:hover { filter: brightness(1.08); }
a.bar:active { filter: brightness(1.15); }
/* colourful bars, cycling a palette so charts are easy to tell apart */
.bar-chart .bar-col:nth-child(6n+1) .bar { background: #6aa84f; }
.bar-chart .bar-col:nth-child(6n+2) .bar { background: #2e9aa0; }
.bar-chart .bar-col:nth-child(6n+3) .bar { background: #7a5ca0; }
.bar-chart .bar-col:nth-child(6n+4) .bar { background: #e0663f; }
.bar-chart .bar-col:nth-child(6n+5) .bar { background: #c9922e; }
.bar-chart .bar-col:nth-child(6n+6) .bar { background: #3f7fbf; }
.bar-chart .bar-label { font-size: 0.68rem; color: var(--muted); margin-top: 4px; white-space: nowrap; }

.stats-figures { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.stats-figures .fig { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 0.82rem; }
.stats-figures .fig b { color: var(--accent-dark); }

/* --- presence timeline (Gantt-style) --- */
.timeline-wrap { margin-top: 10px; overflow-x: auto; }
.timeline-axis { position: relative; height: 18px; margin-left: 110px; border-bottom: 1px solid var(--border); margin-bottom: 6px; min-width: 320px; }
.timeline-axis span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; color: var(--muted); }
.timeline-row { display: flex; align-items: center; margin-bottom: 10px; min-width: 320px; }
.timeline-label { width: 110px; flex-shrink: 0; font-size: 0.8rem; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-label a { color: var(--ink); text-decoration: none; font-weight: 600; }
.timeline-track { position: relative; flex: 1; height: 16px; background: #e6efe9; border-radius: 8px; }
.timeline-span { position: absolute; top: 6px; height: 4px; background: #9ad4b4; border-radius: 4px; }
.timeline-dot { position: absolute; top: 3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent-dark); border: 2px solid #fff; }

/* --- interactive presence timeline ("Who was around when") --- */
.tl-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; }
.tl-key { font-size: 0.75rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.tl-key-dot, .tl-key-ev { width: 11px; height: 11px; display: inline-block; }
.tl-key-dot { border-radius: 50%; background: var(--accent-dark); }
.tl-key-ev { background: #7a5ca0; transform: rotate(45deg); }

.tl-scroll { overflow-x: auto; overflow-y: hidden; touch-action: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.tl-canvas { position: relative; width: 100%; min-width: 100%; padding: 36px 0 8px; }
.tl-bg { position: absolute; left: 120px; right: 0; top: 0; bottom: 0; z-index: 0; background: #eef3f7; }
.tl-summer { position: absolute; top: 0; bottom: 0; background: #f7ead0; }
.tl-yearline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.10); }
.tl-yearlabel { position: absolute; top: 5px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 700; color: var(--ink); z-index: 1; white-space: nowrap; }
/* month ticks: hidden by default, revealed progressively as the user zooms in
   (quarters first, then every month). Years always stay visible. */
.tl-month { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.05); display: none; }
.tl-monthlabel { position: absolute; top: 20px; left: 0; transform: translateX(-50%); font-size: 0.58rem; color: var(--muted); white-space: nowrap; }
.tl[data-gran="q"] .tl-month[data-q="1"] { display: block; }
.tl[data-gran="m"] .tl-month { display: block; }

.tl-row { position: relative; display: flex; align-items: center; height: 26px; }
.tl-name { position: sticky; left: 0; z-index: 3; flex: 0 0 120px; display: flex; align-items: center; background: linear-gradient(to right, var(--card) 74%, rgba(255,255,255,0)); font-size: 0.82rem; padding: 0 16px 0 4px; white-space: nowrap; overflow: hidden; }
.tl-swatch { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--row-accent, var(--accent-dark)); margin-right: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.tl-name a { color: var(--row-accent, var(--ink)); text-decoration: none; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.tl-track { position: relative; flex: 1 1 auto; height: 100%; }
.tl-span { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--row-accent, #cdb9e0); opacity: .5; border-radius: 4px; z-index: 1; }
.tl-dot, .tl-ev { position: absolute; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px; border: 2px solid #fff; padding: 0; cursor: pointer; z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tl-dot { border-radius: 50%; background: var(--row-accent, var(--accent-dark)); }
.tl-ev { background: #7a5ca0; transform: rotate(45deg); }
.tl-dot:hover, .tl-ev:hover { filter: brightness(1.2); }

.tl-popup { position: fixed; z-index: 200; width: 210px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 8px; }
.tl-popup[hidden] { display: none; }
.tl-popup-close { position: absolute; right: 5px; top: 5px; border: none; background: rgba(0,0,0,.06); border-radius: 50%; width: 22px; height: 22px; line-height: 1; cursor: pointer; }
.tl-popup-img { width: 100%; border-radius: 8px; display: block; }
.tl-popup-title { font-weight: 700; margin-top: 6px; }
.tl-popup-title.tl-popup-event { color: #6a3fa0; }
.tl-popup-meta { font-size: 0.8rem; color: var(--muted); }
.tl-popup-note { font-size: 0.83rem; margin-top: 4px; }

html.theme-wild .tl { width: 100vw; margin-left: calc(50% - 50vw); }

/* --- catalog compare grid on the match page --- */
/* The "Who is this?" photo scrolls with the page (no longer pinned) so it
   never covers the identify options, on desktop or mobile. */
.photo-hero.sticky { position: static; }
.photo-hero img { max-height: 62vh; width: auto; margin: 0 auto; }
.compare-card form { margin-top: 6px; }
.compare-card .btn { width: 100%; }

/* --- soft "clean & bright" elevation on card-like surfaces --- */
.card, .stat, .candidate, .pending-list-item, .stats-figures .fig,
.quick-links a, .file-input-wrap, .pending-banner {
  box-shadow: var(--shadow);
}
.card { transition: box-shadow .15s ease, transform .15s ease; }
.card:active { transform: scale(.99); }

/* --- individual page photo banner --- */
.individual-banner {
  display: block;
  text-decoration: none;
  position: relative;
  width: 100%;
  height: 190px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 4px 0 14px;
  box-shadow: var(--shadow);
  background: #d7e2db;
}
.individual-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.individual-banner .banner-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(10,25,18,.72), rgba(10,25,18,0));
}
.individual-banner .banner-name {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.individual-banner .banner-sub {
  color: rgba(255,255,255,.9);
  font-size: 0.85rem;
  margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* --- "compare with reference sheet" button + overlay --- */
.btn.compare {
  background: #fff;
  color: var(--accent-dark);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow);
}
.btn.compare:active { background: #eef7f1; }

.ref-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #10201a;
  display: flex;
  flex-direction: column;
}
.ref-overlay[hidden] { display: none; }
.ref-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.ref-bar .ref-title { font-weight: 700; font-size: 0.95rem; }
.ref-bar .ref-hint { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.ref-panes {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.ref-pane {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 2px solid #10201a;
}
.ref-pane:last-child { border-right: none; }
.ref-pane-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(255,255,255,.06);
}
.ref-pane-label {
  color: #dbeee3;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ref-pane-zoom { display: flex; gap: 4px; flex: 0 0 auto; }
.ref-pane-zoom .btn.small { padding: 4px 9px; font-size: 0.85rem; line-height: 1; }
.ref-zoom {
  flex: 1 1 auto;
  overflow: hidden;
  touch-action: none;
  position: relative;
  min-height: 0;
}
.ref-zoom img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* interactive reference grid (right pane of the compare view) */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  width: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
  background: #10201a;
}
.ref-cell { position: relative; }
.ref-cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.ref-cell-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(10,20,15,.74);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  padding: 4px 3px;
}
.ref-loading { color: #dbeee3; text-align: center; padding: 24px 10px; }

/* =====================================================================
   Optional "Wild" theme — full-bleed images, flat surfaces, no rounding,
   editorial serif type. Toggled by html.theme-wild (see footer toggle).
   Everything here is an override so removing the class fully reverts.
   ===================================================================== */
html.theme-wild { --radius: 0px; }
/* Body/labels stay a clean sans; only the big titles go serif (as on the
   reference site). */
html.theme-wild body {
  background: #ffffff;
  color: #2c2c2c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.62;
}
html.theme-wild h1,
html.theme-wild h2,
html.theme-wild .banner-name,
html.theme-wild .brand-text {
  font-family: 'AdderSerif', Georgia, "Palatino Linotype", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}
html.theme-wild h1 { font-size: 2rem; margin: 10px 0 4px; }
html.theme-wild h2 { font-size: 1.45rem; margin-top: 26px; }
html.theme-wild .banner-name { font-size: 2rem; }
html.theme-wild main { max-width: 860px; }

/* Flat surfaces: kill rounding, borders and shadows */
html.theme-wild .card,
html.theme-wild .stat,
html.theme-wild .candidate,
html.theme-wild .pending-list-item,
html.theme-wild .file-input-wrap,
html.theme-wild .pending-banner,
html.theme-wild .quick-links a,
html.theme-wild .stats-figures .fig,
html.theme-wild .btn,
html.theme-wild .chip,
html.theme-wild input,
html.theme-wild textarea,
html.theme-wild select,
html.theme-wild header.top .header-action,
html.theme-wild .individual-banner,
html.theme-wild .photo-hero {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Full-bleed ONLY the individual banner. The "Who is this?" hero stays a
   sensibly-sized centred image so it doesn't bury the identify options. */
html.theme-wild .individual-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border: none;
  height: 300px;
  margin-top: 0;
  margin-bottom: 18px;
}
html.theme-wild .photo-hero { max-width: 460px; margin: 0 auto 12px; border: none; }
html.theme-wild .photo-hero img { max-height: 58vh; }

/* Wild catalogue: full-width grid, tight gaps, colour accents. Same responsive
   column count as the classic theme (which caps ~2 on phones → 4 on wide
   screens), but full-bleed so each image + caption is larger. */
html.theme-wild .grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 14px;
}
@media (min-width: 520px) { html.theme-wild .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 748px) { html.theme-wild .grid { grid-template-columns: repeat(4, 1fr); } }
html.theme-wild .card { border: none; background: #fff; }
html.theme-wild .card img { aspect-ratio: 1 / 1; border-bottom: 6px solid var(--wild-accent, #6aa84f); }
html.theme-wild .card .body { padding: 10px 12px 16px; }
html.theme-wild .card .name {
  font-family: 'AdderSerif', Georgia, serif;
  font-size: 1.05rem;
  color: var(--wild-accent, #2c2c2c);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html.theme-wild .card .meta { font-size: 0.85rem; }
html.theme-wild .grid .card:nth-child(5n+1) { --wild-accent: #6aa84f; }
html.theme-wild .grid .card:nth-child(5n+2) { --wild-accent: #2e9aa0; }
html.theme-wild .grid .card:nth-child(5n+3) { --wild-accent: #7a5ca0; }
html.theme-wild .grid .card:nth-child(5n+4) { --wild-accent: #e0663f; }
html.theme-wild .grid .card:nth-child(5n+5) { --wild-accent: #c9922e; }

/* Footer + theme toggle (present in both themes) */
.app-footer { text-align: center; padding: 26px 14px 40px; }
.theme-toggle {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
}
html.theme-wild .theme-toggle { border-radius: 0; }
.theme-toggle:hover { color: var(--accent-dark); border-color: var(--accent); }

/* --- built-in literature review page --- */
.lit-lede { font-size: 1.05rem; color: var(--muted); margin: 2px 0 8px; }
.lit-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; margin: 24px 0 2px; }
.lit p { margin: 0 0 12px; }
.lit ul { padding-left: 1.15rem; margin: 0 0 12px; }
.lit li { margin-bottom: 6px; }
.lit-callout { background: var(--card); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 12px 14px; margin: 14px 0; box-shadow: var(--shadow); }
.lit-callout.heather { border-left-color: #7a5ca0; }
.lit-callout .lbl { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; margin-bottom: 4px; }
.lit-callout.heather .lbl { color: #6a3fa0; }
.lit-callout p:last-child { margin-bottom: 0; }
.lit-quote { border-left: 3px solid #7a5ca0; padding-left: 14px; margin: 14px 0; font-style: italic; color: var(--ink); }
.lit-quote cite { display: block; font-style: normal; font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.lit-fig { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin: 16px 0; }
.lit-cap { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.lit-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 14px 0; }
.lit-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; min-width: 520px; }
.lit-table th, .lit-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lit-table thead th { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
.lit-table tbody tr:last-child td { border-bottom: none; }
.lit-ref { display: grid; grid-template-columns: 2rem 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.lit-ref .rn { color: var(--accent-dark); font-weight: 700; }
.lit-ref a { word-break: break-word; }
.lit-flag { color: var(--warn); font-weight: 700; }
sup.cite a { font-size: 0.72em; text-decoration: none; color: var(--accent-dark); font-weight: 700; }

/* --- life-history events (distinct purple, vs green sighting data) --- */
.events { margin: 4px 0; }
.event { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--border); border-left: 3px solid #7a5ca0; }
.event-date { flex: 0 0 92px; font-size: 0.78rem; color: var(--muted); font-weight: 600; padding-top: 1px; }
.event-body { flex: 1; min-width: 0; }
.event-type { font-weight: 700; color: #6a3fa0; }
.event-note { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.event form { margin: 0; }
.event-editor { margin-top: 4px; }
.event-editor summary { display: inline-block; list-style: none; cursor: pointer; }
.event-editor summary::-webkit-details-marker { display: none; }
.event-editor[open] summary { margin-bottom: 6px; }
.event-editor .field { margin: 0; }
.sighting-card .body { padding-bottom: 12px; }
.sighting-card .photo-chips { margin-top: 8px; }

/* only the reference name is the tap-to-assign target */
.ref-cell-name { cursor: pointer; }

/* --- wild theme: full-width, larger, colourful population stats --- */
html.theme-wild .chart-block { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 18px; box-sizing: border-box; }
html.theme-wild .chart-title { font-family: 'AdderSerif', Georgia, serif; font-size: 1.2rem; color: #2c2c2c; margin-bottom: 12px; }
html.theme-wild .bar-chart { height: 172px; }
html.theme-wild .bar-chart .bar { max-width: 46px; }
html.theme-wild .timeline-wrap { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 18px; box-sizing: border-box; }
html.theme-wild .stats-figures .fig { font-size: 0.95rem; }
@media (max-width: 640px) {
  .ref-pane-label { font-size: 0.66rem; }
}

/* --- single-photo zoomable viewer --- */
.photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #10201a;
  display: flex;
  flex-direction: column;
}
.photo-overlay[hidden] { display: none; }
.photo-overlay .ref-bar { flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.photo-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.photo-zoom {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
}
.photo-zoom img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: top left;
  cursor: zoom-in;
}