* {
  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, .frontend-register-link, .frontend-admin-link {
  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, .frontend-register-link:hover, .frontend-admin-link:hover {
  background: #e9eef1;
}

button:focus-visible, .frontend-register-link:focus-visible, .frontend-admin-link: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;
  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);
}

.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: 0 0 0 auto;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 500;
  color: #7b8791;
  letter-spacing: 0.01em;
}

.date-filter-controls {
  display: flex;
  margin-top: 10px;
  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;
}

.date-range-slider {
  margin-inline: 64px;
  max-width: calc(100% - 128px);
}

.date-range-slider .slider-labels {
  top: 38px;
  visibility: visible;
  pointer-events: none;
  z-index: 4;
}

#dateStartLabel { transform: translate(calc(-100% - 12px), -50%); }
#dateEndLabel { transform: translate(12px, -50%); }

.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;
}
:is(.sort-filter-row, .search-sort-controls) label {
  white-space: nowrap;
  font-size: 0.82rem;
}
:is(.sort-filter-row, .search-sort-controls) 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;
}
:is(.sort-filter-row, .search-sort-controls) 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"] .frontend-register-link,
html[data-theme="dark"] .frontend-admin-link,
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, html[data-theme="dark"] .frontend-register-link:hover, html[data-theme="dark"] .frontend-admin-link: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"] .active-filters,
html[data-theme="dark"] .active-filter-label,
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 { 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"] button:focus-visible,
html[data-theme="dark"] .frontend-register-link: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; } }

/* Blur the page behind every modal while preserving its dark overlay. */
dialog::backdrop { background: rgb(0 0 0 / 65%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Shared close control for all modal dialogs. */
dialog { position: fixed; box-sizing: border-box; padding: var(--modal-padding, 10px); }
.modal-close { 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 { position: sticky; float: right; top: 14px; right: auto; z-index: 20; margin: 4px 4px 4px 10px;  }
.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; }
.modal-close:hover .modal-close-circle { fill: #ffe1e3; stroke: #b62e35; }
.modal-close:focus-visible { outline: 2px solid #b62e35; outline-offset: 3px; }
html[data-theme="dark"] .modal-close { background: transparent; color: #ff8990; }
html[data-theme="dark"] .modal-close-circle { fill: #35252b; stroke: #9a4b54; }
html[data-theme="dark"] .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; flex: 1 1 500px; max-width: 798px; }
.frontend-brand > a { flex-shrink: 0; }
.frontend-brand .search-row { flex: 1; 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; }

.record-count-filter { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; padding-top: 16px; font-size: .82rem; }
.record-count-filter input[type="range"] { width: min(280px, 65vw); margin: 0; accent-color: #17674b; }
.record-count-filter output { position: absolute; top: 0; right: 0; width: min(280px, 65vw); text-align: center; font-size: .7rem; line-height: 14px; pointer-events: none; }
.record-count-filter output[hidden] { display: block; visibility: hidden; }

.record-first-badge { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-left: 6px; border: 1px solid var(--circle-border, #cbd3d9); border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; cursor: help; }
.record-first-badge:focus-visible { outline: 2px solid var(--circle-hover-border, #77a8ce); outline-offset: 2px; }

/* Horizontal is the original view; Vertical wraps equal-height card previews. */
.card-layout-picker { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; border: 1px solid #cbd3d9; border-radius: 999px; }
.card-layout-picker button { border: 0; border-radius: 999px; }
.card-layout-picker button[aria-pressed="true"] { background: #17674b; color: #fff; }
html[data-theme="dark"] .card-layout-picker button[aria-pressed="true"] { background: #88d4b1; color: #202c37; }
.card-view-all { display: none; }
body[data-card-layout="vertical"] .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 350px)); justify-content: center; align-items: stretch; width: 100%; }
body[data-card-layout="vertical"] .cards > .card { display: flex; flex-direction: column; width: 100%; max-width: 100%; height: 340px; min-width: 0; }
body[data-card-layout="vertical"] .cards .card-preview-content { flex: 1; min-height: 0; overflow: clip; }
body[data-card-layout="vertical"] .cards .card-view-all { display: flex; justify-content: center; flex-shrink: 0; padding-top: 16px; }
.card-layout-modal { width: min(440px, calc(100vw - 24px)); max-height: 90svh; border: 1px solid #cbd3d9; border-radius: 14px; background: #f2f5f7; color: #243340; }
.card-layout-modal::backdrop { background: rgb(0 0 0 / 65%); }
.card-layout-modal .card { width: 100%; max-width: 100%; min-width: 0; }
html[data-theme="dark"] .card-layout-modal { background: #1d2630; color: #e3eaf0; border-color: #4b5c6b; }
.frontend-nav .site-theme-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
/* Keep wheel/touch scrolling inside the full-card modal while it is open. */
html:has(#cardLayoutModal[open]), html:has(#cardLayoutModal[open]) body { overflow: hidden; overscroll-behavior: none; }
.card-layout-modal .modal-content { overscroll-behavior: contain; }
/* Compact cards show the endpoints of the current filtered record order. */
body[data-card-layout="vertical"] .cards .card-preview-content { display: flex; flex-direction: column; }
body[data-card-layout="vertical"] .cards .entries { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body[data-card-layout="vertical"] .cards .entries > .entry { flex: 1 1 0; min-height: 0; overflow: clip; }
body[data-card-layout="vertical"] .cards .entries > .entry:not([data-card-endpoint]), body[data-card-layout="vertical"] .cards .bird-notes { display: none; }
.card-layout-picker[hidden] { display: none; }

/* Guest filters retain their default state without exposing signed-in controls. */
body[data-signed-in="0"] #monthFilter,
body[data-signed-in="0"] #yearFilter,
body[data-signed-in="0"] .date-filter-controls:has(.date-quick-buttons),
body[data-signed-in="0"] .date-range-slider { display: none; }

.frontend-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #dcefe4; color: #17674b; font-weight: 600; text-decoration: none; }
.frontend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.frontend-register-link { text-decoration: none; }
html .frontend-admin-link { color: #b62e35; border-color: #b62e35; text-decoration: none; }
html[data-theme="dark"] .frontend-admin-link { color: #ff8990; border-color: #ff8990; }
.frontend-admin-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: none; }
.frontend-signin-modal { width: min(360px, calc(100vw - 24px)); max-height: 90svh; padding: 0; border: 0; border-radius: 40px; background: transparent; }
.frontend-signin-modal::backdrop { background: rgb(0 0 0 / 65%); }
.frontend-signin-modal iframe { width: 100%; height: 540px; max-height: 90svh; border: 0; display: block; }
dialog.frontend-signin-modal.site-modal > .modal-content { padding: 0; max-height: 90svh; }

.frontend-signout { margin: 0; }

.search-sort-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }

.filter-status-row { flex-wrap: wrap; }
.filter-status-row .search-sort-controls { margin-left: auto; justify-content: flex-end; }


.date-quick-buttons { align-items: center; flex-wrap: wrap; }
.search-sort-controls .record-count-filter { margin: 0 12px 0 0; }
.regions-dropdown { position: relative; }
.regions-dropdown summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; border: 1px solid #cbd3d9; background: #f5f7f8; color: #46545e; border-radius: 999px; padding: 7px 11px; font-size: .82rem; font-weight: 500; }
.regions-dropdown summary::-webkit-details-marker { display: none; }
.regions-dropdown summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.regions-dropdown summary:focus-visible { outline: 2px solid #17674b; outline-offset: 2px; }
.regions-dropdown-options { position: absolute; top: calc(100% + 8px); left: 0; z-index: 102; width: min(280px, calc(100vw - 48px)); padding: 10px; border: 1px solid #cbd3d9; border-radius: 16px; background: #f2f5f7; box-shadow: 0 8px 24px rgb(0 0 0 / 20%); }
.regions-dropdown .region-switch { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; }
.region-switch-track { position: relative; flex: 0 0 64px; height: 32px; box-sizing: border-box; border: 1px solid #c4cbd2; border-radius: 999px; background: #fff; }
.region-switch-track::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #818a92; transition: transform 200ms ease, background-color 200ms ease; }
.region-switch[aria-checked="true"] .region-switch-track::before { transform: translateX(32px); background: #17674b; }
html[data-theme="dark"] .regions-dropdown summary, html[data-theme="dark"] .regions-dropdown-options { background: #283540; color: #e3eaf0; border-color: #4b5c6b; }
html[data-theme="dark"] .region-switch-track { background: #202c37; border-color: #394653; }
html[data-theme="dark"] .region-switch[aria-checked="true"] .region-switch-track::before { background: #88d4b1; }
@media (prefers-reduced-motion: reduce) { .region-switch-track::before { transition: none; } }

.seen-dropdown .regions-dropdown-options { left: auto; right: 0; }
.seen-dropdown #seenStatus:empty { display: none; }
.card:has(.seen-bird-control) { position: relative; }
.card:has(.seen-bird-control input:checked) { background-image: radial-gradient(ellipse 180px 140px at top right, rgb(70 160 110 / 20%), transparent 100%); }
.card:has(.seen-bird-control) h2 { padding-right: 24px; }
.seen-bird-control { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; cursor: pointer; }
.seen-bird-control input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; padding: 0; border: 1px solid #9eafb9; border-radius: 50%; background: transparent; color: #46545e; cursor: pointer; }
.seen-bird-control input:checked::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(14% 44%, 0 59%, 38% 96%, 100% 20%, 83% 5%, 36% 65%); }
.seen-bird-control input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.seen-bird-control input:disabled { opacity: .5; }
html[data-theme="dark"] .seen-bird-control input { border-color: #4b5c6b; color: #b2bec9; }

.how-to-modal { width: min(600px, calc(100vw - 40px)); }
.how-to-modal .how-to-eyebrow { margin: 0 40px 8px 0; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #607783; }
.how-to-modal h2 { margin-bottom: 8px; }
.how-to-browsing, .how-to-account { margin-top: 24px; padding: 18px; border: 1px solid #d4dee3; border-radius: 16px; }
.how-to-browsing { background: linear-gradient(135deg, rgb(101 146 169 / 10%), transparent); }
.how-to-modal section h3 { margin: 0 0 16px; font-size: 1rem; }
.how-to-method { display: flex; align-items: flex-start; gap: 14px; }
.how-to-method + .how-to-method { margin-top: 20px; }
.how-to-symbol { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid #bdcdd6; border-radius: 10px; color: #496a7b; font-size: 24px; }
.how-to-method h4 { margin: 0 0 4px; font-size: .95rem; }
.how-to-method p { margin: 0; font-size: .88rem; }
.how-to-modal kbd { padding: 1px 5px; border: 1px solid #aebfc9; border-bottom-width: 2px; border-radius: 4px; font-size: .85em; }
.how-to-account p { font-size: .9rem; }
.how-to-account p:last-child { margin-bottom: 0; }
.how-to-register { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; color: #326582; font-weight: 600; text-underline-offset: 3px; }
html[data-theme="dark"] .how-to-modal .how-to-eyebrow { color: #a4b8c6; }
html[data-theme="dark"] .how-to-browsing, html[data-theme="dark"] .how-to-account { border-color: #394653; }
html[data-theme="dark"] .how-to-symbol { border-color: #4b5c6b; color: #aec7d5; }
html[data-theme="dark"] .how-to-register { color: #a6cadd; }

.frontend-account-links { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #cbd3d9; }
.frontend-account-links > a, .frontend-account-links .frontend-signout button { display: block; width: 100%; box-sizing: border-box; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; text-decoration: none; font: inherit; font-size: .82rem; }
.frontend-account-links > a:hover, .frontend-account-links .frontend-signout button:hover { background: rgb(100 130 150 / 15%); }
.frontend-account-links > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.frontend-account-links .frontend-signout { margin: 0; }
html[data-theme="dark"] .frontend-account-links { border-color: #4b5c6b; }

#mobileControlsButton { display: none; }
.mobile-controls-drawer { inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 20px; overflow-y: auto; border: 1px solid #cbd3d9; border-radius: 20px 0 0 20px; background: #f2f5f7; color: #243340; }
.mobile-controls-drawer h2 { margin: 4px 40px 24px 0; font-size: 1.15rem; }
#mobileControlsContent { display: flex; flex-direction: column; gap: 24px; }
#mobileControlsContent .site-theme-tools { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; z-index: auto; }
#mobileControlsContent .date-filter-controls { margin: 0; }
#mobileControlsContent .date-quick-buttons { flex-wrap: wrap; }
#mobileControlsContent .search-sort-controls { justify-content: flex-start; }
#mobileControlsContent .record-count-filter { margin-right: 0; }
#mobileControlsContent .record-count-filter input[type="range"], #mobileControlsContent .record-count-filter output { width: min(240px, 65vw); }
#mobileControlsContent .regions-dropdown-options { position: static; margin-top: 8px; width: 100%; box-sizing: border-box; }
#mobileControlsContent .regions-dropdown[open] { flex-basis: 100%; }
html:has(#mobileControlsDrawer[open]), html:has(#mobileControlsDrawer[open]) body { overflow: hidden; }
html[data-theme="dark"] .mobile-controls-drawer { background: #1d2630; color: #e3eaf0; border-color: #4b5c6b; }
@media (max-width: 800px) {
  #mobileControlsButton { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 7px; }
  #mobileControlsButton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .frontend-brand { flex-basis: 100%; gap: 8px; max-width: 100%; }
  .frontend-brand .search-control { width: 100%; }
  .frontend-brand .search-control #search { padding-inline: 5px; }
  .frontend-brand .search-control > button { padding-inline: 5px; }
  .frontend-nav { margin-bottom: 8px; }
}

.seen-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px; font-size: .82rem; }
.seen-status-filters { border-top: 1px solid #cbd3d9; margin-top: 12px; padding-top: 12px; }
#seenCount, #notSeenCount { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: .75; }
html[data-theme="dark"] .seen-status-filters { border-color: #4b5c6b; }

.card h2 a.bird-name { color: inherit; text-decoration: none; }
.card h2 a.bird-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.card h2 a.bird-name:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }

.frontend-login-modal { width: min(400px, calc(100vw - 24px)); }
.frontend-login-modal .signin-card { padding: 8px 0; }
.frontend-login-modal .signin-logo { display: block; width: fit-content; margin: 0 auto 20px; }
.frontend-login-modal .signin-logo img { display: block; }
.frontend-login-modal .signin-card form { display: grid; gap: 16px; }
.frontend-login-modal .signin-label { display: grid; gap: 6px; font-size: .85rem; }
.frontend-login-modal input:not([type="checkbox"]) { width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid #aabac5; border-radius: 10px; font: inherit; }
.frontend-login-modal .signin-remember { display: flex; align-items: center; justify-content: space-between; }
.frontend-login-modal .signin-reset { margin-top: 20px; }
.frontend-login-modal .signin-reset summary { cursor: pointer; }
.frontend-login-modal .signin-reset-content { margin-top: 14px; }
.frontend-login-fallback { display: inline-block; margin-top: 16px; font-size: .8rem; color: inherit; }
#frontendLoginStatus:empty { display: none; }
html[data-theme="dark"] .frontend-login-modal input:not([type="checkbox"]) { background: #283540; border-color: #4b5c6b; color: #e3eaf0; }

.frontend-login-modal .remember-switch { appearance: none; -webkit-appearance: none; position: relative; display: inline-block; width: 48px; height: 28px; flex: 0 0 48px; margin: 0; padding: 0; border: 2px solid #8296a6; border-radius: 999px; background: #e3eaf0; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; }
.frontend-login-modal .remember-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #697784; transition: transform 180ms ease, background-color 180ms ease; }
.frontend-login-modal .remember-switch:checked { background: #dcefe4; border-color: #17674b; }
.frontend-login-modal .remember-switch:checked::before { transform: translateX(20px); background: #17674b; }
.frontend-login-modal .remember-switch:focus-visible { outline: 2px solid #77a8ce; outline-offset: 3px; }
html[data-theme="dark"] .frontend-login-modal .remember-switch { background: #283540; border-color: #697784; }
html[data-theme="dark"] .frontend-login-modal .remember-switch:checked { background: #253a34; border-color: #88d4b1; }
html[data-theme="dark"] .frontend-login-modal .remember-switch:checked::before { background: #88d4b1; }
@media (prefers-reduced-motion: reduce) { .frontend-login-modal .remember-switch, .frontend-login-modal .remember-switch::before { transition: none; } }

.seen-layout-row { padding: 8px; }
.seen-layout-row .card-layout-picker { display: flex; }
.seen-layout-row .card-layout-picker button { flex: 1; }
html[data-theme="dark"] .card-layout-picker { border-color: #4b5c6b; }

.frontend-login-modal .signin-reset summary { font-size: .8rem; }
.frontend-login-fallback[hidden] { display: none; }

#frontendAccountToggle { position: relative; }
.frontend-mail-badge { position: absolute; top: -6px; left: -6px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #b62e35; color: #fff; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 18px; letter-spacing: 0; text-align: center; pointer-events: none; }
.frontend-mail-badge[hidden] { display: none; }

.frontend-account-links #notificationsNavLink { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#frontendMailboxCount { margin-left: auto; font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .8; }

.species-summary { margin: 0 0 14px; font-size: 14px; line-height: 1.6; white-space: normal; word-break: normal; overflow-wrap: break-word; hyphens: none; }
.species-summary :is(p, h2, h3, h4, blockquote, ul, ol) { margin: 0 0 .75em; font-size: inherit; }
.species-summary > :last-child { margin-bottom: 0; }
.species-summary :is(ul, ol) { padding-left: 1.4em; }
.species-summary blockquote { margin-left: 0; padding-left: 12px; border-left: 2px solid var(--circle-border, #cbd3d9); }