* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  padding-top: var(--header-height, 0px);
  font-family: system-ui, sans-serif;
  background: #f2f5f7;
  color: #243340;
}

h1 {
  margin-top: 0;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

button {
  border: 1px solid #cbd3d9;
  background: #f5f7f8;
  color: #46545e;

  border-radius: 999px;

  padding: 7px 11px;

  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

button:hover {
  background: #e9eef1;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #17674b;
}

/* Active filter buttons */

.filter-toggle.active,
.date-filter-button.active {
  background: #dfe8ed;
  color: #253640;
  border-color: #9eafb9;
}

/* Record sorting button */
.cards {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 10px 0 24px;
  align-items: flex-start;
}

.card {
  flex: 0 0 350px;
  max-width: 85vw;
  padding: 22px;
  background: white;
  border: 1px solid #dce3e8;
  border-radius: 14px;
  scroll-snap-align: start;
}

.card h2 {
  margin: 0 0 18px;
  font-size: 22px;
}

.entries {
  padding-right: 8px;
}

.entry {
  padding: 14px 0;
  border-top: 1px solid #e7ecf0;
}

.date {
  display: block;
  margin-bottom: 6px;
  color: #17674b;
  font-weight: 700;
}

.context {
  margin-top: 6px;
  margin-bottom: 6px;
  color: #697784;
  font-size: 12px;
}

.entry .record-detail {
  margin-bottom: 4px;
}

.entry p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* search */
#search {
  width: 350px;
  max-width: 85vw;
  padding: 12px;
  font: inherit;
  border: 1px solid #ccd5dc;
  border-radius: 8px;
}

#results {
  width: 350px;
  max-width: 85vw;
  max-height: 300px;
  overflow-y: auto;
}

#results button {
  display: block;
  width: 100%;
  padding: 12px;
  text-align: left;
  background: white;
  border: 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

#results button:hover {
  background: #e8f4ee;
}

#results button:focus {
  outline: none;
  background: #dcefe5;
  color: #124b36;
  box-shadow: inset 0 0 0 3px #17674b;
}

/* fixed header */
.page-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  max-width: 100vw;

  z-index: 9999;

  padding: 16px 24px;

  background: #f2f5f7;
  border-bottom: 1px solid #dce3e8;

  box-sizing: border-box;
}

.page-header h1 {
  margin: 0 0 12px;
}

.page-header #status {
  margin: 4px 0 0;
}

#results {
  position: absolute;
  z-index: 101;
  background: white;
  box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
}

body {
  padding-top: var(--header-height, 220px);
}

.empty-species {
  margin-top: 12px;
  padding: 14px 16px;
  background: #f5f7f6;
  border-left: 4px solid #176b52;
  border-radius: 4px;
}

.empty-species-section {
  font-weight: 700;
  color: #176b52;
  margin-bottom: 5px;
}

.empty-species-note {
  margin: 0;
  color: #64706c;
  font-size: 0.92rem;
}

.bird-summary {
  margin-top: -6px;
  margin-bottom: 14px;
  font-size: 0.86rem;
  color: #66736f;
}

.bird-notes {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #d8dfdc;
  color: #4f5d58;
}

.bird-notes-heading {
  font-weight: 700;
  margin-bottom: 6px;
}

.bird-notes p {
  margin: 6px 0;
  line-height: 1.45;
}

.scrutiny-flag {
  cursor: help;
}

/* maps */
.ebird-map-link {
  margin-left: 8px;
  font-size: 0.8em;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}

.ebird-map-link:hover {
  opacity: 0.7;
}

.rarity-ranking {
  margin-top: -4px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #7b8791;
  letter-spacing: 0.01em;
}

.date-filter-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.date-quick-buttons {
  display: flex;
  gap: 5px;
}

/* ----------------------------------------------------------
   RANGE SLIDER
---------------------------------------------------------- */

.date-range-slider {
  width: 520px;
  max-width: 100%;
  position: relative;
  padding-top: 25px;
}

.dual-range {
  position: relative;
  height: 22px;
}

.dual-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  background: transparent;

  pointer-events: none;

  appearance: none;
  -webkit-appearance: none;
}

/* Track */

.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #d7e0e5;
  border-radius: 4px;
}

.dual-range input[type="range"]::-moz-range-track {
  height: 8px;
  background: #d7e0e5;
  border-radius: 4px;
}

/* Handles */

.dual-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  pointer-events: auto;

  width: 16px;
  height: 16px;

  margin-top: -4px;

  border-radius: 50%;

  background: #17658b;

  border: 2px solid white;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  cursor: pointer;
}

.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;

  width: 16px;
  height: 16px;

  border-radius: 50%;

  background: #17658b;

  border: 2px solid white;

  cursor: pointer;
}

/* Handle labels */

.slider-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  font-size: 11px;
  font-weight: 600;
}

#dateStartLabel,
#dateEndLabel {
  position: absolute;

  background: #172027;
  color: white;

  padding: 3px 7px;

  border-radius: 10px;

  white-space: nowrap;

  transform: translateX(-50%);
}

/* Month labels */

.date-slider-months {
  display: flex;
  justify-content: space-between;

  margin-top: 3px;

  font-size: 9px;
  color: #7a8790;
}

.date-range-slider {
  width: 520px;
  max-width: 100%;
  position: relative;
  padding-top: 27px;
}

.dual-range {
  position: relative;
  height: 22px;
}

/* Base track */

.date-track {
  position: absolute;

  left: 0;
  right: 0;

  top: 7px;

  height: 8px;

  background: #d7e0e5;

  border-radius: 5px;
}

/* Selected draggable period */

.selected-date-range {
  position: absolute;

  top: 7px;

  height: 8px;

  background: #78a9c1;

  border-radius: 5px;

  cursor: grab;

  z-index: 2;

  touch-action: none;
}

.selected-date-range:active {
  cursor: grabbing;
}

/* Range inputs */

.dual-range input[type="range"] {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;

  height: 22px;

  margin: 0;

  background: transparent;

  pointer-events: none;

  appearance: none;
  -webkit-appearance: none;

  z-index: 3;
}

/* Hide their own tracks */

.dual-range input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
}

.dual-range input[type="range"]::-moz-range-track {
  height: 8px;
  background: transparent;
}

/* Handles */

.dual-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  pointer-events: auto;

  width: 17px;
  height: 17px;

  margin-top: -4.5px;

  border-radius: 50%;

  background: #17658b;

  border: 2px solid white;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

  cursor: ew-resize;
}

.dual-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: #17658b;

  border: 2px solid white;

  cursor: ew-resize;
}

/* Date bubbles */

.slider-labels {
  position: absolute;

  left: 0;
  right: 0;

  top: 0;

  font-size: 11px;
  font-weight: 600;
}

#dateStartLabel,
#dateEndLabel {
  position: absolute;

  background: #172027;
  color: white;

  padding: 3px 7px;

  border-radius: 11px;

  white-space: nowrap;

  transform: translateX(-50%);
}

/* Month labels */

.date-slider-months {
  display: flex;

  justify-content: space-between;

  margin-top: 3px;

  font-size: 9px;

  color: #7a8790;
}

/* Live species count */

.date-species-count {
  flex: 0 0 auto;

  min-width: 82px;

  padding: 6px 10px;

  border-left: 1px solid #d5dde2;

  font-size: 0.82rem;
  font-weight: 600;

  color: #53636d;

  white-space: nowrap;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.record-sort-button {
  vertical-align: middle;
}

.record-sort-button svg {
  width: 36px;
  height: 14px;
  display: block;
}

.record-sort-button .sort-arrow {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.record-sort-button:not(.newest-first) .sort-arrow {
  transform: rotate(180deg);
}

/* ============================================================
   TAXONOMIC FAMILY CONTROLS
   ============================================================ */
.sort-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 7px;
  row-gap: 6px;
  margin: 10px 0 12px;
}
.sort-filter-row label {
  white-space: nowrap;
  font-size: 0.82rem;
}
.sort-filter-row select {
  border: 1px solid #cbd3d9;
  border-radius: 6px;
  background: #f5f7f8;
  color: #46545e;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.82rem;
  max-width: min(260px, 70vw);
  min-height: 33px;
}
.sort-filter-row select:focus-visible {
  outline: 2px solid #17674b;
  outline-offset: 2px;
}

/* ==========================================================
   ACTIVE FILTER SUMMARY
   ========================================================== */

.active-filters {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dce3e8;

  font-size: 0.78rem;
  color: #697784;

  line-height: 1.8;
}

.active-filters[hidden] {
  display: none;
}

.active-filter-label {
  font-weight: 600;
  color: #46545e;
  margin-right: 6px;
}

.active-filter-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  background: #e3eaf0;
  color: #354b5b;

  border-radius: 4px;
  padding: 2px 8px;

  margin: 2px 4px 2px 0;

  font-weight: 500;
}

.active-filter-remove {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0 3px;
  font-size: 1rem;
  line-height: 1;
  border-radius: 3px;
}

.active-filter-remove:hover {
  background: #cbd8e2;
}
/* Species count and active filters on the same line */

.filter-status-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  width: 100%;
}

.filter-status-row #status {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #46545e;
  white-space: nowrap;
}

.filter-status-row .active-filters {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  white-space: nowrap;
  overflow-x: auto;
}

.filter-status-row .active-filters[hidden] {
  display: none;
}

/* Shared site colour theme. */
:root { --modal-padding: 10px; color-scheme: light; --search-match-color: #697784; }
:root[data-theme="dark"] { color-scheme: dark; --search-match-color: #b2bec9; }
html[data-theme="dark"] body,
html[data-theme="dark"] .page-header { background: #151d25; color: #e3eaf0; }
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .entry,
html[data-theme="dark"] .bird-notes,
html[data-theme="dark"] .active-filters { border-color: #394653; }
html[data-theme="dark"] .card,
html[data-theme="dark"] #results,
html[data-theme="dark"] #results button { background: #202c37; color: #e3eaf0; }
html[data-theme="dark"] button,
html[data-theme="dark"] select,
html[data-theme="dark"] #search { background: #283540; color: #e3eaf0; border-color: #4b5c6b; }
html[data-theme="dark"] #search::placeholder { color: #b2bec9; }
html[data-theme="dark"] button:hover { background: #354755; }
html[data-theme="dark"] .filter-toggle.active,
html[data-theme="dark"] .date-filter-button.active { background: #405b70; color: #f0f5f8; border-color: #7c9db6; }
html[data-theme="dark"] .context,
html[data-theme="dark"] .rarity-ranking,
html[data-theme="dark"] .bird-summary,
html[data-theme="dark"] .bird-notes,
html[data-theme="dark"] .empty-species-note,
html[data-theme="dark"] .active-filters,
html[data-theme="dark"] .active-filter-label,
html[data-theme="dark"] .date-species-count,
html[data-theme="dark"] .filter-status-row #status,
html[data-theme="dark"] .date-slider-months { color: #b2bec9; }
html[data-theme="dark"] a,
html[data-theme="dark"] .date,
html[data-theme="dark"] .empty-species-section { color: #88d4b1; }
html[data-theme="dark"] .empty-species { background: #253a34; border-color: #88d4b1; }
html[data-theme="dark"] #results button { border-bottom-color: #394653; }
html[data-theme="dark"] #results button:hover,
html[data-theme="dark"] #results button:focus { background: #30493e; color: #edf8f1; }
html[data-theme="dark"] #results button:focus { box-shadow: inset 0 0 0 3px #88d4b1; }
html[data-theme="dark"] .active-filter-item { background: #354a5b; color: #e3eaf0; }
html[data-theme="dark"] .active-filter-remove { background: transparent; }
html[data-theme="dark"] .active-filter-remove:hover { background: #4b6478; }
html[data-theme="dark"] .date-track,
html[data-theme="dark"] .dual-range input[type="range"]::-webkit-slider-runnable-track { background: #445665; }
html[data-theme="dark"] .dual-range input[type="range"]::-moz-range-track { background: #445665; }
html[data-theme="dark"] .dual-range input[type="range"]::-webkit-slider-runnable-track,
html[data-theme="dark"] .dual-range input[type="range"]::-moz-range-track { background: transparent; }
html[data-theme="dark"] .selected-date-range { background: #7ab5d4; }
html[data-theme="dark"] .date-species-count { border-color: #4b5c6b; }
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] select:focus-visible { outline: 2px solid #88d4b1; outline-offset: 2px; }

.record-date-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.record-date-line .date { margin-bottom: 0; min-width: 0; }
.record-map-link { position: relative; display: inline-flex; margin-left: 0; opacity: 0.85; }
.record-map-link:hover, .record-map-link:focus-visible { opacity: 1; filter: grayscale(0%); }
.record-map-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 50%; }
.record-globe-icon { display: block; width: 17px; height: 17px; }

.record-globe-color { position: absolute; inset: 0; width: 17px; height: 17px; opacity: 0; }
.record-map-link:hover .record-globe-icon, .record-map-link:focus-visible .record-globe-icon { opacity: 0; }
.record-map-link:hover .record-globe-color, .record-map-link:focus-visible .record-globe-color { opacity: 1; }
.bird-summary { display: flex; align-items: center; gap: 8px; }

/* Joined frontend search control. */
.search-row { flex-wrap: wrap; }
.search-control { position: relative; display: flex; align-items: center; gap: 4px; width: min(750px, 100%); min-width: 0; margin: 0; padding: 5px; border: 1px solid #ccd5dc; border-radius: 30px; background: #f5f7f8; transition: border-color 180ms ease, box-shadow 180ms ease; }
.search-control:focus-within { border-color: #77a8ce; box-shadow: 0 0 0 3px rgb(85 145 195 / 12%); }
.search-control #search { flex: 1; min-width: 0; width: auto; max-width: none; padding: 11px 15px; border: 0; border-radius: 24px; background: transparent; outline: none; font-size: 0.9rem; }
.search-control > button { flex-shrink: 0; padding: 10px 14px; border: 0; border-radius: 24px; background: transparent; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.search-control > button:hover:not(:disabled) { background: #e3eff9; color: #245e8b; box-shadow: 0 2px 8px rgb(65 125 175 / 10%); }
.search-control > button:focus-visible { outline: 2px solid #77a8ce; outline-offset: -2px; box-shadow: none; }
.search-control #results { top: calc(100% + 5px); left: 0; width: 100%; max-width: none; border-radius: 12px; }
html[data-theme="dark"] .search-control { background: #283540; border-color: #4b5c6b; }
html[data-theme="dark"] .search-control:focus-within { border-color: #7eafd3; }
html[data-theme="dark"] .search-control #search,
html[data-theme="dark"] .search-control > button { background: transparent; }
html[data-theme="dark"] .search-control > button:hover:not(:disabled) { background: #3b526a; color: #dcefff; box-shadow: 0 2px 8px rgb(80 145 200 / 12%); }
@media (max-width: 480px) {
  .search-control #search { padding: 10px 8px; font-size: 0.8rem; }
  .search-control > button { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-control, .search-control > button { transition: none; }
}

/* Shared sun/moon switch. */
#themeToggle { position: fixed; top: 16px; right: 24px; z-index: 10000; width: 64px; height: 32px; padding: 0; border: 1px solid #c4cbd2; border-radius: 999px; background: #fff; box-shadow: none; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
#themeToggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background-color: #818a92; background-position: center; background-repeat: no-repeat; background-size: 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/svg%3E"); transition: transform 200ms ease, background-color 200ms ease; }
html[data-theme="dark"] #themeToggle { background: #202c37; border-color: #394653; }
html[data-theme="dark"] #themeToggle::before { transform: translateX(32px); background-color: #88d4b1; background-image: none; }
html[data-theme="dark"] #themeToggle::after { content: ""; position: absolute; top: 6px; left: 38px; width: 18px; height: 18px; background-color: #202c37; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14A9 9 0 0 1 10 3.5 9 9 0 1 0 20.5 14Z'/%3E%3C/svg%3E") center / contain no-repeat; transition: background-color 200ms ease; }
html[data-theme="dark"] #themeToggle:hover { border-color: #4b5c6b; }

#themeToggle:hover { border-color: #76a9cd; box-shadow: 0 0 0 3px rgb(118 169 205 / 10%); }
#themeToggle:focus-visible { outline: 2px solid #76a9cd; outline-offset: 3px; box-shadow: none; }
.page-header h1 { padding-right: 76px; }
@media (max-width: 480px) { #themeToggle { right: 16px; } }
@media (prefers-reduced-motion: reduce) { #themeToggle, #themeToggle::before, #themeToggle::after { transition: none; } }

/* Inline search operator help, shared by public and admin searches. */
.search-help { position: relative; flex-shrink: 0; display: flex; align-items: center; padding: 0 8px 0 4px; }
.search-control .search-help-button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: #697784; font: bold 15px Georgia, serif; cursor: pointer; }
.search-help-button:hover, .search-help-button:focus-visible { color: #245e8b; outline: 2px solid #77a8ce; outline-offset: 2px; }
.search-help-box { position: absolute; top: calc(100% + 14px); right: 0; z-index: 10001; width: min(360px, calc(100vw - 48px)); padding: 14px 16px; border: 1px solid #ccd5dc; border-radius: 12px; background: #f5f7f8; color: #243340; box-shadow: 0 6px 20px rgb(0 0 0 / 16%); font-size: 14px; line-height: 1.6; }
.search-help-box[hidden] { display: none; }
.search-help-box ol { margin: 0; padding-left: 20px; }
.search-help-box li + li { margin-top: 8px; }
.search-help-box code { white-space: normal; }
html[data-theme="dark"] .search-control .search-help-button { color: #b2bec9; }
html[data-theme="dark"] .search-help-box { background: #283540; color: #e3eaf0; border-color: #4b5c6b; }

/* Shared hover treatment for transparent, outlined text controls. */
:is(.outline-control, .species-alphabet a, .species-letter-links a) {
  --outline-hover-background: rgb(85 145 195 / 12%);
  --outline-hover-border: #77a8ce;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
html[data-theme="dark"] :is(.outline-control, .species-alphabet a, .species-letter-links a) {
  --outline-hover-background: rgb(118 169 205 / 16%);
  --outline-hover-border: #7eafd3;
}
html[data-theme] :is(.outline-control, .species-alphabet a, .species-letter-links a):not(:disabled):hover,
html[data-theme] :is(.outline-control, .species-alphabet a, .species-letter-links a):focus-visible {
  background-color: var(--outline-hover-background);
  border-color: var(--outline-hover-border);
  box-shadow: 0 2px 8px rgb(65 125 175 / 12%);
}
:is(.outline-control, .species-alphabet a, .species-letter-links a):focus-visible {
  outline: 2px solid var(--outline-hover-border);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  :is(.outline-control, .species-alphabet a, .species-letter-links a) { transition: none; }
}

.site-theme-tools { position: fixed; top: 16px; right: 24px; z-index: 10000; display: flex; align-items: center; gap: 12px; }
.site-theme-tools #themeToggle { position: relative; top: auto; right: auto; flex-shrink: 0; }
.about-project-button { white-space: nowrap; }
.page-header h1 { padding-right: 280px; }
.about-project-modal { width: min(520px, calc(100vw - 40px)); max-height: 85svh; overflow-y: auto; border: 1px solid #cbd3d9; border-radius: 24px; background: #f2f5f7; color: #243340; box-shadow: 0 16px 60px rgb(0 0 0 / 25%); }
.about-project-modal::backdrop { background: rgb(0 0 0 / 65%); }
.about-project-modal h2 { margin-top: 0; }
.about-project-modal h3 { margin-bottom: 8px; font-size: 1rem; }
.about-project-modal p { line-height: 1.6; }
html[data-theme="dark"] .about-project-modal { background: #1d2630; color: #e3eaf0; border-color: #4b5c6b; }
@media (max-width: 480px) { .site-theme-tools { right: 16px; } .page-header h1 { padding-right: 0; padding-top: 44px; } }

/* Shared close control for all modal dialogs. */
dialog { position: fixed; box-sizing: border-box; padding: var(--modal-padding, 10px); }
dialog > .modal-close { position: sticky; float: right; top: 14px; right: auto; z-index: 20; margin: 4px 4px 4px 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #b62e35; cursor: pointer; }
dialog .modal-close svg { display: block; width: 32px; height: 32px; }
.modal-close-circle { fill: #fff2f2; stroke: #d5a2a2; stroke-width: 1; transition: fill 150ms ease; }
.modal-close-cross { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
dialog .modal-close:hover .modal-close-circle { fill: #ffe1e3; stroke: #b62e35; }
dialog .modal-close:focus-visible { outline: 2px solid #b62e35; outline-offset: 3px; }
html[data-theme="dark"] dialog .modal-close { background: transparent; color: #ff8990; }
html[data-theme="dark"] .modal-close-circle { fill: #35252b; stroke: #9a4b54; }
html[data-theme="dark"] dialog .modal-close:hover .modal-close-circle { fill: #4d2b34; }

.about-project-modal h3 { font-size: 1.15rem; margin-bottom: 4px; }
.about-project-modal h3 + p { margin-top: 0; }
.about-project-modal p + h3 { margin-top: 32px; }

.about-project-modal { box-sizing: border-box; min-width: 0; overflow-x: hidden; overflow-wrap: anywhere; }
.about-project-modal :is(h2, h3, h4, p, li, blockquote) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.about-project-modal :is(ul, ol) { padding-left: 24px; }
.about-project-modal blockquote { margin-left: 16px; margin-right: 0; }
dialog.site-modal { overflow: hidden; max-height: var(--modal-height, 90svh); }
dialog.site-modal > .modal-content { max-height: calc(var(--modal-height, 90svh) - 22px); min-width: 0; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; padding-right: 42px; }
dialog.site-modal > .modal-content > :first-child { margin-top: 0; }
dialog.site-modal > .modal-close { position: absolute; float: none; top: 14px; right: 14px; margin: 0; }
.about-project-modal { --modal-height: 85svh; }

.frontend-nav { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; background: transparent; }
.frontend-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.frontend-brand img { display: block; border-radius: 50%; }
.page-header .frontend-nav h1 { margin: 0; padding: 0; }
.frontend-nav .site-theme-tools { position: static; margin-left: auto; z-index: auto; }

.archive-open { margin-top: 10px; }
.archive-modal { width: min(900px, 94vw); max-height: 90vh; box-sizing: border-box; border: 1px solid #8296a6; border-radius: 24px; background: #f2f5f7; color: #243340; overflow-y: auto; }
.archive-modal::backdrop { background: rgb(0 0 0 / 65%); }
.archive-modal select { max-width: 100%; }
.archive-notice { font-size: .8rem; opacity: .8; }
.archive-message { padding: 18px 0; border-top: 1px solid #8296a6; }
.archive-message-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.archive-matched-message { border-left: 3px solid #82d5b3; padding-left: 12px; }
html[data-theme="dark"] .archive-modal { background: #1d2630; color: #e3eaf0; }

.archive-conversation + .archive-conversation { margin-top: 32px; padding-top: 24px; border-top: 2px solid #8296a6; }

/* Standard circle icon controls share the alphabet buttons' palette and lift. */
:root { --circle-border: #cbd3d9; --circle-color: #17674b; --circle-hover-border: #77a8ce; --circle-hover-background: rgb(85 145 195 / 12%); }
html[data-theme="dark"] { --circle-border: #4b5c6b; --circle-color: #88d4b1; --circle-hover-border: #7eafd3; --circle-hover-background: rgb(118 169 205 / 16%); }
html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link) { border: 1px solid var(--circle-border); border-radius: 50%; background: transparent; color: var(--circle-color); transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, translate 180ms ease; }
html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link):not(:disabled):hover,
html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link):focus-visible { background: var(--circle-hover-background); border-color: var(--circle-hover-border); box-shadow: 0 2px 8px rgb(65 125 175 / 12%); translate: 0 -1px; }
html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link):focus-visible { outline: 2px solid var(--circle-hover-border); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link) { transition: none; }
  html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link):hover, html[data-theme] :is(.species-alphabet a, .species-add-shortcut, .search-control .search-help-button, .record-photo-edit, .record-photo-info, .media-caption-save, .media-gallery-arrow, .database-name-edit, .record-edit-link):focus-visible { translate: none; }
}

.search-help-button svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-help-button svg circle { fill: currentColor; stroke: none; }

.updates-list { list-style: none; margin: 0; padding: 0; }
.updates-list li { padding: 16px 0; border-top: 1px solid var(--circle-border, #cbd3d9); }
.updates-list h3 { margin: 0 0 6px; }
.updates-list p { margin: 4px 0; }
.updates-list .update-meta { font-size: .8rem; opacity: .75; }

.record-edit-link { opacity: 0; pointer-events: none; margin-left: auto; display: inline-grid; place-items: center; padding: 6px; flex-shrink: 0; text-decoration: none; }
.record-edit-link svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.entry:hover .record-edit-link, .entry:focus-within .record-edit-link { opacity: 1; pointer-events: auto; }