/* style.css — the site's one stylesheet: tokens first, then the components. */

/* Main Color Palette */
:root {
  --primary: #5f3f3b;
  --primary-light: #8a6762; /* Kept as is */
  --primary-dark: #422a27;  /* Kept as is */

  --secondary: #e0a491;     /* Changed from #555752 to new color */
  --secondary-light: #ebc3b5; /* Lighter version of new secondary */
  --secondary-dark: #b87e6f; /* Darker version of new secondary */

  --dark: #555752;          /* Moved former secondary to dark */
  --dark-light: #7a7c79;    /* Kept from former secondary-light */
  --dark-dark: #3a3c39;     /* Kept from former secondary-dark */

  --accent: #b2c081;        /* New accent color */
  --accent-light: #c6d0a0;  /* Lighter version of accent */
  --accent-dark: #97a566;   /* Darker version of accent */

  --light: #f8f9fa;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-600: #6c757d;
  --gray-800: #343a40;

  /* A caution and a refusal, in the house colours rather than Bootstrap's
     yellow and red. */
  --warn: #b87e6f;
  --warn-bg: rgba(224, 164, 145, 0.18);
  --danger: #9b4f35;
  --danger-bg: rgba(155, 79, 53, 0.12);

  /* Type scale. Body for reading, meta for the line under a title, micro for
     badges and counts — 0.75rem is the floor. */
  --fs-body: 1rem;
  --fs-meta: 0.85rem;
  --fs-micro: 0.75rem;

  /* One corner radius, so cards, panels and maps are cut the same way; and
     one for the things that are read as a lozenge — chips, badges, dots. */
  --radius: 0.5rem;
  --radius-pill: 999px;
}

/* Global Styles */
body {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  color: var(--dark);
  background-color: var(--gray-100);
  line-height: 1.6;
  /* The footer at the bottom of the screen, also when a page is short (an
     empty tab, a new station): the content takes up whatever room is left
     (feedback r.80, r.118). */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > .app-content-wrapper { flex: 1 0 auto; }
body > .app-nav-wrapper,
body > .app-footer-wrapper { flex-shrink: 0; }
@media print {
  /* On paper a page is as long as what is on it. */
  body { display: block; min-height: 0; }
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary-light);
  text-decoration: underline;
}

.btn-primary {
  /* Bootstrap 5.3 paints buttons via these CSS variables. */
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Map Bootstrap "primary" surfaces onto the brand colour so nothing renders in
   Bootstrap's default blue (badges, active list items, etc.). */
.bg-primary { background-color: var(--primary) !important; }
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
}
.list-group-item.active .badge.bg-primary { background-color: rgba(255, 255, 255, 0.3) !important; }

.btn-primary:active, .btn-primary.active {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

/* Link-style buttons follow the brand colour like plain anchors do
   (Bootstrap's default is blue). */
.btn-link {
  --bs-btn-color: var(--primary);
  --bs-btn-hover-color: var(--primary-dark);
  --bs-btn-active-color: var(--primary-dark);
  color: var(--primary);
}

.btn-secondary {
  /* Dark text: white on the salmon fill read at about 2:1. */
  --bs-btn-color: var(--primary-dark);
  --bs-btn-hover-color: var(--primary-dark);
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

/* Brand-colour Bootstrap "primary" outline buttons (default is blue). */
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  /* A form being saved disables its buttons (offline/capture-offline.js);
     without these they turned Bootstrap blue for that moment. */
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--primary);
  background-color: transparent;
  border-color: var(--primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--secondary);
  --bs-btn-hover-color: #fff;
  color: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-secondary:hover, 
.btn-outline-secondary:focus,
.btn-outline-secondary.active {
  color: var(--white);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
/* Add this to your style.css file */
.card {
  border-radius: var(--radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  border: 1px solid var(--gray-300);
}

.card a {
  text-decoration: none;
  color: inherit;
}

.card a:hover {
  text-decoration: none;
  color: inherit;
}

/* Anchors styled as buttons keep their button text colour and radius — the
   inherit above painted e.g. "btn btn-primary" links dark-on-dark in cards. */
.card a.btn {
  color: var(--bs-btn-color);
  border-radius: var(--bs-btn-border-radius);
}
.card a.btn:hover,
.card a.btn:focus {
  color: var(--bs-btn-hover-color);
}

.card .card-body {
  border-radius: var(--radius);
}

.card .img-thumbnail {
  border-radius: var(--radius);
}

/* A card's header names what is in it; it used to be a filled brown bar that
   read as heavier than the card itself, and two of them in one view fought
   each other. Same language as the section headings on the homepage. */
.card-header {
  background-color: transparent;
  color: var(--primary-dark, #422a27);
  font-weight: 600;
  border-bottom: 2px solid var(--secondary, #e0a491);
}

.card-body {
  padding: 1.25rem;
  background-color: var(--white);
}

/* Fix for nested cards */
.card .card {
  box-shadow: none;
  transform: none;
}



/* Ensure proper nesting of cards */
.card > .row > .col-md-6 > .card,
.card > .card-body > .row > .col-md-6 > .card {
  border-radius: var(--radius);
  overflow: hidden;
}

.card--link:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.card-footer {
  background-color: var(--gray-100);
  border-top: 1px solid var(--gray-300);
}

.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

.badge.bg-secondary {
  background-color: var(--secondary) !important;
}

/* Navigation Bar */
.main-nav {
  background-color: var(--white) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.birdinthehand-logo {
  max-height: 50px;
  margin-right: 15px;
}

.luistervink-logo-img {
  max-height: 50px;
  width: auto;
}

.birdinthehand-text-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.nav-link {
  color: var(--secondary);
  font-weight: 500;
  margin: 0 5px;
  padding: 8px 15px;
  border-radius: var(--radius);
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: var(--primary);
  background-color: var(--gray-100);
}

/* Calm active state (no dark block); the main nav adds an accent underline */
.nav-link.active {
  color: var(--primary-dark, #422a27);
  font-weight: 600;
}

/* How many things are behind a tab, under its label: the tabs carry the
   numbers that used to sit in a stat row of their own above them
   (partials/_tab_bar.html). Centred under the word, never louder than it. */
.nav-tabs .nav-link {
  text-align: center;
  line-height: 1.25;
}
.nav-link__count,
.tab-picker__count {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--dark-light);
}
.tab-picker__count { display: inline; }

/* Footer — a slim, full-width bar aligned to the header */
.footer-container {
    background-color: var(--primary);
    color: #fff;
    padding: 0.85rem 0;
}
.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    font-size: 0.9rem;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.footer-logo-img {
    height: 34px;
    width: auto;
}
.footer-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.footer-container a {
    color: #fff;
    text-decoration: none;
}
.footer-container a:hover {
    color: var(--secondary);
    text-decoration: underline;
}
.footer-lang { margin: 0; }
.footer-lang .dropdown-toggle { min-width: 8rem; }
.footer-lang .dropdown-item { color: var(--dark); }
@media (max-width: 767.98px) {
    .footer-bar { justify-content: center; text-align: center; }
}

/* Content */
.container {
  /* Bootstrap rows pull 12px out on each side; a container with less padding
     than that spills over the edge of a phone. */
  padding: 5px 12px;
}

h1, h2, h3, h4, h5, h6 {
  /* Dark on the light ground: the salmon --secondary read at about 2:1,
     which is unreadable on a phone outdoors. Salmon stays for accents. */
  color: var(--primary-dark);
}

/* Filter Area */
  .month-filter-container {
        overflow-x: auto;
        padding-bottom: 5px;
    }

.month-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

.month-filter .btn {
        flex: 1 1 auto;
        min-width: 60px;
        padding: 6px 8px;
    }

@media (max-width: 576px) {
        .month-filter .btn {
            min-width: 50px;
            font-size: 0.875rem;
        }
    }


.month-btn.active {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Pagination */
.pagination {
  margin-top: 30px;
}

.page-link {
  color: var(--primary);
  background-color: var(--white);
  border-color: var(--gray-300);
}

.page-link:hover {
  color: var(--primary-dark);
  background-color: var(--gray-200);
}

.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Image Cards */
.card-img-top {
  transition: opacity 0.3s ease;
}

.card--link:hover .card-img-top {
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .col-md-4.col-lg-3 {
    padding: 0 10px;
  }
  
  .card-title {
    font-size: 1rem;
  }
  
}



/* Alert Styling */
.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 15px 20px;
    position: relative;
    margin-bottom: 20px;
}

.alert-info {
    background-color: rgba(178, 192, 129, 0.2); /* Light version of #b2c081 */
    border-color: #b2c081;
    color: #5a6441; /* Darker shade of #b2c081 for text */
    position: relative;
}

.alert-info::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--accent);
    border-radius: var(--radius) 0 0 var(--radius);
}

.alert-info a {
    color: #5a6441; /* Darker shade for links */
    font-weight: 500;
    text-decoration: underline;
}

.alert-info a:hover {
    color: #7a8458; /* Mid-tone for hover */
}

/* A caution and a refusal. Bootstrap's yellow and red are a different palette
   than this site's; these say the same two things in the house colours. */
.bg-warning { background-color: var(--warn) !important; color: #fff; }
.text-warning { color: var(--warn) !important; }
.alert-warning {
  background-color: var(--warn-bg);
  border-color: var(--warn);
  color: var(--primary-dark);
}
.alert-warning a { color: var(--primary-dark); font-weight: 500; }

.bg-danger { background-color: var(--danger) !important; color: #fff; }
.text-danger { color: var(--danger) !important; }
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: #83422c;
  --bs-btn-hover-border-color: #83422c;
  --bs-btn-active-bg: #83422c;
  --bs-btn-active-border-color: #83422c;
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: #83422c;
  border-color: #83422c;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  color: var(--danger);
  border-color: var(--danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger.active {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.alert-danger {
  background-color: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* Bootstrap paints form focus rings, checked checkboxes/radios/switches,
   active dropdown items and select2 highlights in its default blue; map
   them onto the brand colours so forms match the rest of the site. */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.25rem rgba(95, 63, 59, 0.2);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.25rem rgba(95, 63, 59, 0.2);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary);
  color: #fff;
}

/* select2 dropdowns (species, location, ringer pickers). "body" in front:
   select2.min.css loads after this file (layout.html) and won at the same
   specificity, so the highlighted option stayed select2's blue. */
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--primary);
  color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary-light);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--gray-200);
  border-color: var(--gray-300);
}

/* Bootstrap's near-black "dark" → the palette's dark grey-green. */
.btn-dark {
  --bs-btn-bg: var(--dark);
  --bs-btn-border-color: var(--dark);
  --bs-btn-hover-bg: var(--dark-dark);
  --bs-btn-hover-border-color: var(--dark-dark);
  background-color: var(--dark);
  border-color: var(--dark);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
  background-color: var(--dark-dark);
  border-color: var(--dark-dark);
}
.bg-dark { background-color: var(--dark) !important; }

/* Bootstrap's green → the palette's nature green (accent). This is the site's
   one olive button; .btn-nature and .btn-info were the same thing twice. */
.bg-success { background-color: var(--accent-dark) !important; }
.text-success { color: var(--accent-dark) !important; }
.btn-success {
  --bs-btn-bg: var(--accent-dark);
  --bs-btn-border-color: var(--accent-dark);
  --bs-btn-hover-bg: #7f8c53;
  --bs-btn-hover-border-color: #7f8c53;
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: #7f8c53;
  border-color: #7f8c53;
}
.btn-outline-success {
  --bs-btn-color: var(--accent-dark);
  --bs-btn-border-color: var(--accent-dark);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-hover-color: #fff;
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success.active {
  background-color: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

/* Button styling for the form buttons */
@media (max-width: 767px) {
    .button-card .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .button-card .card-body {
        padding: 1rem;
    }
}

/* Styles for desktop */
@media (min-width: 768px) {
    .button-card .btn {
        min-width: 120px;
    }
}

/* Remove card hover effect for button card */
.button-card:hover {
    transform: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Make buttons more prominent */
.button-card .btn {
    font-weight: 500;
    padding: 0.5rem 1rem;
}

/* Add some breathing room between buttons */
.button-card .gap-2 {
    gap: 0.75rem !important;
}

/* Mobile section picker: tab bars collapse into one full-width button with
   the active section's name, opening a menu of all sections
   (partials/_tab_bar.html). */
.tab-picker__btn {
  background: #fff;
  border: 1px solid var(--gray-300);
  color: var(--primary-dark);
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  text-align: left;
}
.tab-picker__btn:hover, .tab-picker__btn:focus {
  border-color: var(--primary-light);
  color: var(--primary-dark);
}
.tab-picker .dropdown-menu { border-radius: var(--radius); }

/* Generic mobile list rows (bold title left, muted meta line, badges right)
   — the shared pattern behind the session/location/species/ring lists. */
.list-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--gray-300);
  text-decoration: none;
  color: inherit;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background-color: var(--gray-100); color: inherit; }
a.list-row:active, .list-row:active { background-color: var(--gray-100); }
.list-row__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.list-row__tag { font-size: var(--fs-micro); color: var(--dark-light); font-weight: 400; margin-left: 0.25rem; }
.list-row__meta { font-size: 0.8rem; color: var(--dark-light); margin-top: 0.15rem; overflow-wrap: anywhere; }
.list-row__badges { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex-shrink: 0; }
.list-row__badges .badge { font-size: var(--fs-micro); }
/* The numbers on the right of a row, read as two lines rather than badges. */
.list-row__nums { text-align: right; flex-shrink: 0; font-size: var(--fs-meta); }
.list-row__nums-sub { font-size: var(--fs-micro); color: var(--dark-light); }
/* Nothing caught here yet: present, but not competing for attention. */
.list-row--empty { opacity: 0.6; }

/* A row for something that is happening right now: the olive tint the diary
   and the navigation use, a pulsing dot and the word for it. */
.list-row--active,
.is-live-row {
  background-color: rgba(178, 192, 129, 0.22);
  box-shadow: inset 3px 0 0 var(--accent-dark);
}
.list-row--active:hover { background-color: rgba(178, 192, 129, 0.4); }
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-dark);
  margin-right: 0.3rem;
  vertical-align: middle;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151, 165, 102, 0.55); }
  50% { box-shadow: 0 0 0 4px rgba(151, 165, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Overview tabs of a location, ring station or project: the stat tile row and
   the bordered cards below it. Shared so all three pages look the same. */
/* What is filtered right now, and what it leaves: one chip per filter,
   above the gallery and above every filtered table. */
.gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.gallery-head__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gallery-head__right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.gallery-head__count { font-size: var(--fs-meta); color: var(--dark-light); white-space: nowrap; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--fs-micro);
    color: var(--primary, #5f3f3b);
    text-decoration: none;
}
.filter-chip:hover { border-color: var(--secondary, #e0a491); background: rgba(224, 164, 145, 0.14); color: var(--primary-dark, #422a27); }
.filter-chip--clear { border-style: dashed; }


/* The diary's catch days: a list on a desktop, a strip of days you swipe on a
   phone, with today's day marked the way the navigation marks a page. */
.diary-day-list { display: flex; flex-direction: column; }
.diary-day {
  display: block;
  border-radius: 0;   /* a row in a list, flush with the ones above and below */
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--gray-200, #e9ecef);
  text-decoration: none;
  color: inherit;
}
.diary-day:last-child { border-bottom: none; }
.diary-day:hover { background: var(--gray-100, #f8f9fa); color: inherit; }
.diary-day.is-active {
  background: rgba(178, 192, 129, 0.22);
  box-shadow: inset 3px 0 0 var(--accent-dark, #97a566);
}
@media (max-width: 767.98px) {
  .diary-day-list {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .diary-day {
    flex: 0 0 auto;
    min-width: 9.5rem;
    border-bottom: none;
    border-right: 1px solid var(--gray-200, #e9ecef);
    scroll-snap-align: start;
  }
  .diary-day.is-active { box-shadow: inset 0 -3px 0 var(--accent-dark, #97a566); }
}

/* A species table in a narrow column: the same table, set closer. */
.sp-table-card .table { font-size: var(--fs-meta); }
.sp-table-card .table th,
.sp-table-card .table td { padding: 0.35rem 0.4rem; }
.sp-table-card .species-rows { border: none; }

/* Thumbs are not mice: on a phone a button is at least 44px tall. The month
   row is the exception — twelve of them share one line by design. */
@media (max-width: 767.98px) {
  .btn:not(.month-btn):not(.btn-close):not(.page-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* A card's header and what follows it are one piece: no gap, no rounded
   corners of an inner table showing through the header's rule. */
.card > .card-header { border-radius: 0; padding: 0.65rem 1rem; }
.card > .card-header + .table-responsive > .table,
.card > .card-header + .table,
.card > .card-header + .list-group,
.card > .card-header + .diary-day-list { margin-top: 0; border-radius: 0; }
.card > .card-header + .table-responsive { margin-bottom: 0; }
.card > .card-header + .table > thead > tr > th { border-top: none; }

/* When a species was first and last seen here. */
.sp-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}

/* A callout: a note beside the page's own words, in the site's "live" tint
   with the same olive bar the navigation and the diary use. */
.callout {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: rgba(178, 192, 129, 0.22);
  box-shadow: inset 3px 0 0 var(--accent-dark, #97a566);
}
.callout__label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-light);
}

/* What a new thing will belong to: the chain it is being made inside, as
   chips on the callout (partials/_belongs_to.html). */
.callout--context { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.callout--context .callout__label { display: inline; margin-right: 0.2rem; }
.context-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--gray-300);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--primary-dark);
}

/* The day's meta line under a session's title. */
.sd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}
.sd-meta a { color: var(--primary, #5f3f3b); }

/* An empty list says what is missing, and how to fix it. */
.empty-state {
  padding: 1.5rem;
  border: 1px dashed var(--gray-300, #dee2e6);
  border-radius: var(--radius);
  text-align: center;
  color: var(--dark-light);
  font-size: var(--fs-meta);
}

/* The line that closes a table: what all the rows above it add up to. */
.diary-total td {
  border-top: 2px solid var(--gray-300, #dee2e6);
  font-weight: 600;
}

/* One muted grey, whichever name a template reaches for. */
.text-muted { color: var(--dark-light) !important; }
.quiet { color: var(--dark-light); }

/* Numbers in a table are read down the column. */
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   The site's tables

   The head is a label rather than a bar and a row is told apart by a hairline:
   that lives in table_with_filter.css, which every table already loads. What
   is here is what a row does — it is one record, and the whole row is the way
   into it (static/js/site.js); the first cell keeps its own <a> so a keyboard
   gets there too.
   --------------------------------------------------------------------------- */
.site-table { margin-bottom: 0; }
.site-table > tbody > tr[data-href] { cursor: pointer; }
.site-table > tbody > tr > td { vertical-align: middle; }
/* A day that is running now: the olive tint the diary and the nav use. */
.site-table > tbody > tr.is-live-row > td { background-color: rgba(178, 192, 129, 0.22); }
.site-table > tbody > tr.is-live-row > td:first-child { box-shadow: inset 3px 0 0 var(--accent-dark); }
/* A table inside a card sits flush with the card's edges. */
.card > .table-container > .table-responsive,
.card > .table-container > .table { margin-bottom: 0; }

/* One filter bar for every list: the fields on one line, each as wide as what
   it holds, and a label that stays out of the way of it. */
.list-filter__form .form-label {
  margin-bottom: 0.15rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--dark-light);
}
.list-filter__form .form-select,
.list-filter__form .form-control {
  height: 38px;
  border-radius: var(--radius);
}
.list-filter__form .form-select { min-width: 12rem; }
.list-filter__form input[type="date"] { width: 9rem; }
.list-filter__form .month-btn { min-width: 40px; height: 38px; }
@media (max-width: 767.98px) {
  .list-filter__form .list-filter__field { flex: 1 1 100%; }
  .list-filter__form .form-select,
  .list-filter__form .form-control { width: 100%; min-width: 0; }
}

/* The location map: full width, and never more than a phone screen. */
.location-map {
  height: 460px;
  border-radius: var(--radius);
}
@media (max-width: 575.98px) {
  .location-map { height: 40vh; }
}

/* The name a trap site wears on the map — shared by the read-only map and
   the location form's editor. */
.leaflet-tooltip.trap-label {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #bbb;
  border-radius: var(--radius);
  padding: 0 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #333;
  box-shadow: none;
}
.leaflet-tooltip.trap-label::before { display: none; }

/* When no tile provider will serve this browser, the map says so rather than
   sitting there grey. */
.map-blocked-note {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-micro);
  color: var(--dark, #555752);
  text-align: center;
}

/* Small maps of places: full width, and never taller than a phone can hold. */
.mini-map {
  height: 220px;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
/* A map that has to hold every place at once: 220px of the Netherlands is a
   band of pins with no country behind them. */
.mini-map--tall { height: 34rem; }
@media (max-width: 991.98px) { .mini-map--tall { height: 60vh; } }

/* The note behind an i on a row: the description is worth having and worth
   not printing. */
.loc-note {
  margin-left: 0.35rem;
  color: var(--dark-light);
  cursor: help;
}
.loc-note:hover, .loc-note:focus { color: var(--primary); }

/* Square where the map stands beside something else: a letterbox strip of a
   catching site shows sea on both sides and no more of the place. */
.mini-map--square {
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
}
@media (max-width: 575.98px) {
  .mini-map { height: 40vh; }
  /* A square map stays square on a phone: 40vh would set its height and the
     aspect ratio would then decide its width -- wider than the screen on a
     tall phone. */
  .mini-map--square { height: auto; }
}

/* A ring's road: a numbered pin per capture, and what the map cannot show. */
.rg-map { height: 300px; border-radius: var(--radius); }
.rg-map-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
  font-size: var(--fs-micro);
  color: var(--dark-light);
}
.rg-pin__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(66, 42, 39, 0.4);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .rg-map { height: 40vh; }
}

/* Badges in the site's own colours. Bootstrap's info/warning/success are a
   different palette; these cover what the site actually says: what a bird
   is, how many of something there are, what is live, and what needs a look. */
.badge--species {
  background-color: rgba(224, 164, 145, 0.35);
  color: var(--primary-dark, #422a27);
  font-weight: 600;
}
.badge--count {
  background-color: var(--gray-200, #e9ecef);
  color: var(--dark, #555752);
  font-weight: 600;
}
.badge--live {
  background-color: var(--accent, #b2c081);
  color: #2f3a1a;
  font-weight: 600;
}
.badge--note {
  background-color: var(--secondary-light, #ebc3b5);
  color: var(--primary-dark, #422a27);
  font-weight: 600;
}
.badge--warn {
  background-color: var(--secondary-dark, #b87e6f);
  color: #fff;
  font-weight: 600;
}

/* The small capitals a section opens with. The voice — size, weight,
   spacing — is set once here; a template adds only its own colour. */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Form pages (form_base.html)

   A form page is a page like any other: the same eyebrow-over-title head on
   the light ground, then one card. It used to open with a brown gradient
   panel under a two-colour rule, which made it the only page on the site that
   announced itself that way.
   --------------------------------------------------------------------------- */
.sf-head { margin-bottom: 0.75rem; }
.sf-eyebrow { color: var(--dark-light); }
.sf-eyebrow:empty { display: none; }
.sf-card__body { padding: 1.5rem 1.6rem 1.75rem; }

/* A richer form is read in sections. The title sits above its fields, in the
   same voice as every other section head — it used to be set on its side in a
   2.4rem gutter, which nothing else on the site does. */
.sf-section { margin-bottom: 1.25rem; }
.sf-section__title {
  display: block;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--secondary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.sf-section__body { min-width: 0; }
.sf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.1rem 1.4rem;
  align-items: start;
}
.sf-grid > div { min-width: 0; }
.sf-cell--wide { grid-column: span 2; }
.sf-section__body .mb-3 { margin-bottom: 0.7rem; }
.sf-section__body label,
.sf-section__body .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
}
/* The row a form ends with: what backs out on the left, what saves on the
   right, and exactly one filled button among them. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.form-actions__end { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
@media (max-width: 575.98px) {
  .sf-cell--wide { grid-column: auto; }
  .sf-card__body { padding: 1.15rem 1rem 1.4rem; }
  .form-actions,
  .form-actions__end { width: 100%; }
  .form-actions .btn { width: 100%; }
  .form-actions__end { margin-left: 0; flex-direction: column-reverse; }
}

/* One section head for the whole site: the title left, its actions right, and
   the salmon rule underneath. (Grew up on the session page as .sd-card-head.) */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 2px solid var(--secondary);
}
.section-head__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
}

/* The head of an entity page: what it is, and how much of it there is. */
.entity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.entity-head__main { min-width: 0; }
.entity-head__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-dark, #422a27);
  line-height: 1.2;
}
.entity-head__title .badge { font-size: var(--fs-micro); vertical-align: middle; }
.entity-head__sci {
  font-size: var(--fs-body);
  font-weight: 400;
  font-style: italic;
  color: var(--dark-light);
}
.entity-head__meta {
  margin-top: 0.15rem;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}
.entity-head__actions,
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* On a phone the actions at the top of a page give the title its room back:
   they fold behind one small button on the right (added by layout.html) and
   open as a panel under it. This covers .entity-head__actions and anything
   marked .head-actions; a head whose only action is already a dropdown keeps
   its one button and just moves to the right. */
.entity-actions-toggle { display: none; }
@media (max-width: 767.98px) {
  .head-actions-anchor { position: relative; }
  .entity-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    align-self: flex-start;
    min-width: 44px;
  }
  /* A lone Actions menu keeps its own dropdown but wears the same face:
     the ⋯ in the outline-secondary colours, whatever the button is on
     desktop. */
  .entity-actions-toggle--menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    color: var(--secondary, #e0a491) !important;
    background-color: transparent !important;
    border-color: var(--secondary, #e0a491) !important;
  }
  .entity-actions-toggle--menu::after { content: none; }
  .entity-head__actions,
  .head-actions { margin-left: auto; }
  /* A head inside a half-width card (the capture page) has no room beside its
     title on a phone: the folded button would wrap to a line of its own and
     leave a band of nothing above it. It sits in the corner instead, and the
     title keeps clear of it. */
  .capture-detail .entity-actions-toggle {
    position: absolute;
    top: 0;
    right: 0;
    margin-left: 0;
  }
  .capture-detail .entity-head__main { padding-right: 3.2rem; }
  /* :not(.is-open) lifts the specificity above a page's own display rule
     on the same element (e.g. .home-actions__buttons). */
  .head-actions--folded:not(.is-open) { display: none; }
  .head-actions--folded.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1050;
    min-width: 13rem;
    max-width: calc(100vw - 2rem);
    margin-left: 0;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  }
  /* Inside the panel every action reads as one full-width row. (!important:
     the global 44px thumb rule for .btn centers content and is more
     specific.) */
  .head-actions--folded.is-open .btn {
    width: 100%;
    justify-content: flex-start !important;
    text-align: left;
  }
  .head-actions--folded.is-open form,
  .head-actions--folded.is-open .dropdown { display: contents; }
}
@media print {
  .entity-actions-toggle { display: none !important; }
}

/* A page that renders a table for wide screens and rows for narrow ones marks
   both with data-view. CSS decides which one is painted; static/js/site.js
   adds `hidden` to the other, so it also leaves the tab order and the screen
   reader rather than only being painted over. */
[data-view="list"] { display: none; }
@media (max-width: 767.98px) {
  [data-view="table"] { display: none; }
  [data-view="list"] { display: block; }
}
[data-view][hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   The bottom bar (partials/_bottom_bar.html)

   One floating thing at the bottom of the screen, never three: the way to the
   filters, the catch day that is running, and the two things you do next.
   Replaces the old .filters-fab and .active-session-fab.
   --------------------------------------------------------------------------- */
.bottom-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 22px;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 22px rgba(66, 42, 39, 0.18);
}
/* With no catch day running there is one thing in the bar, so it is one pill
   in the middle rather than a white band with a button at one end. */
.bottom-bar--solo {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
}
/* From md up the filters are on the page already, so the bar shrinks to the
   catch day and its two actions and returns to the corner it used to sit in --
   and a bar whose only slot was the filters has nothing left to be. */
@media (min-width: 768px) {
  .bottom-bar { left: auto; right: 1rem; bottom: 1rem; transform: none; }
  .bottom-bar--solo { display: none !important; }
}
.bottom-bar__filters {
  border-radius: var(--radius-pill);
  min-height: 44px;
  flex-shrink: 0;
}
.bottom-bar__filters .badge {
  background: #fff;
  color: var(--primary);
  margin-left: 0.4rem;
}
.bottom-bar__filters .badge:empty { display: none; }
.bottom-bar__session {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0.4rem;
  text-decoration: none;
  color: var(--primary-dark);
}
.bottom-bar__where {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom-bar__round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
body.filters-open .bottom-bar { display: none !important; }
/* Room under the last row so the pager does not sit behind the bar. */
body.has-bottom-bar .app-content-wrapper { padding-bottom: 96px; }
body.has-bottom-bar .offline-toast { bottom: calc(22px + 56px + 12px); }
@media print { .bottom-bar { display: none !important; } }

.list-filter-sheet-head { display: none; }
@media (max-width: 767.98px) {
  body.filters-open { overflow: hidden; }
  .list-filter--sheet .list-filter-toggle { display: none !important; }
  .list-filter--sheet .list-filter-body {
    display: block !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1045;
    max-height: 85vh;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem 1rem 1rem;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -8px 30px rgba(66, 42, 39, 0.25);
    transform: translateY(105%);
    transition: transform 0.2s ease;
  }
  body.filters-open .list-filter--sheet .list-filter-body { transform: translateY(0); }
  .list-filter--sheet .list-filter-body .form-select,
  .list-filter--sheet .list-filter-body .form-control { min-height: 44px; }
  .list-filter--sheet .list-filter-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: #fff;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid var(--gray-200, #e9ecef);
    margin-bottom: 0.5rem;
  }
}

/* The panels on an entity overview: a title in small capitals over its
   content. Shared by the location, station and project overview pages. */
.loc-card {
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.loc-card--flush { padding: 0.5rem; height: 100%; }
.loc-card-title {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.loc-description { white-space: pre-wrap; line-height: 1.6; }

/* The row of numbers a page opens with: quiet, centred, and each one a way
   into the list behind it. One component for every entity page. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem 0.5rem;
}
.stat {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.stat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary-dark, #422a27);
  transition: color 0.12s ease;
}
.stat__label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-light);
}
a.stat:hover { color: inherit; }
a.stat:hover .stat__value { color: var(--primary, #5f3f3b); }


/* The beta note, as a band above the bar rather than a block in the page. */
.beta-band {
  background: var(--accent, #b2c081);
  color: #2f3a1a;
  font-size: var(--fs-micro);
}
.beta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.beta-band a { color: #2f3a1a; font-weight: 600; }
.beta-band .btn-close { padding: 0.25rem; font-size: var(--fs-micro); }

/* One pager for every list: back, where you are, on. */
.site-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.site-pager__status {
  font-size: var(--fs-meta);
  color: var(--dark-light);
  white-space: nowrap;
}

/* Capture detail: the bird in one look — what it is, its photo, its ring and
   what was measured. */
.cap-crumbs {
  font-size: var(--fs-micro);
  margin-bottom: 0.5rem;
}
/* The head of the capture page is the shared entity header now
   (partials/_entity_header.html); only its meta line is still its own. */
.cap-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin-top: 0.35rem;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}
.cap-head__meta a { color: var(--primary, #5f3f3b); }

/* Hero photo with the rest of the series beside it */
.cap-hero__main {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #1a1a1a;
}
.cap-hero__main img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
}
/* The line under the strip: how many photos there are and what a click does. */
.cap-photo-note {
  margin: 0.4rem 0 0;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}

/* Step through the series without leaving the page. */
.cap-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}
.cap-hero__nav:hover { background: rgba(0, 0, 0, 0.7); }
.cap-hero__nav--prev { left: 0.6rem; }
.cap-hero__nav--next { right: 0.6rem; }
.cap-hero__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.cap-hero__zoom:hover { background: rgba(0, 0, 0, 0.75); }
.cap-hero__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.cap-hero__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-200, #e9ecef);
  cursor: pointer;
}
.cap-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cap-hero__thumb.is-active { border-color: var(--primary, #5f3f3b); }
.cap-hero__thumb--extra { display: none; }
.cap-hero__strip--all .cap-hero__thumb--extra { display: block; }
.cap-hero__more {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--primary, #5f3f3b);
}

.cap-card__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark, #422a27);
}
/* What a card holds, said the way the printed forms say it: small, uppercase,
   out of the way of the numbers underneath. */
.cap-card__label {
  margin-bottom: 0.5rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark-light);
}
.cap-head__meta--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
/* Under the ring number: whether this bird wore it before. */
.cap-ring__note {
  margin-top: 0.2rem;
  font-size: var(--fs-meta);
  color: var(--dark-light);
}
.cap-ring__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--primary, #5f3f3b);
}
/* Notes: what the ringer wrote down, in the callout the session page uses
   for the same thing (.sd-notes there) -- white, one olive edge. */
.cap-notes {
  background: var(--white, #fff);
  border: 1px solid var(--gray-300, #dee2e6);
  border-left: 4px solid var(--accent-dark, #97a566);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}
.cap-notes__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark-light);
}
.cap-notes p { font-size: var(--fs-meta); }
.cap-notes p:last-child { margin-bottom: 0; }

/* The EURING line under the ring: there to be copied, not to be read. */
.cap-euring {
  display: block;
  margin-top: 0.9rem;
  font-size: var(--fs-micro);
  color: var(--dark-light);
  word-break: break-all;
}

/* A warning in the site's own colours instead of Bootstrap's yellow. */
.cap-alert {
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--secondary-dark, #b87e6f);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: rgba(224, 164, 145, 0.14);
  color: var(--primary-dark, #422a27);
}
.cap-alert ul { padding-left: 1.1rem; }

/* Measurements: the name above its value, in as many columns as fit. A
   measurement is read as a pair, so each pair is one cell. */
.cap-measures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.7rem 1rem;
  margin: 0;
}
.cap-measure { min-width: 0; }
.cap-measures dt {
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--dark-light);
}
.cap-measures dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark, #555752);
}
@media (max-width: 575.98px) {
  /* Two columns of measurements still fit a phone; three would not. */
  .cap-measures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Thumb targets on a photo: 44px is the floor for a finger. */
  .cap-hero__nav { width: 2.75rem; height: 2.75rem; }
  .cap-hero__zoom { width: 2.75rem; height: 2.75rem; }
  /* The strip scrolls sideways rather than growing rows deep. */
  .cap-hero__strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .cap-hero__thumb { flex: 0 0 auto; }
}

/* A required label whose field is, for this one kind of encounter, not: the
   asterisk crispy printed is hidden rather than the label redrawn. */
.cap-optional .asteriskField { display: none; }

/* Capture tables: the count of biometrics that have no column of their own,
   with the values themselves on hover. */
.cap-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0 0.3rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill);
  background: #f4f5ee;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--primary, #5f3f3b);
  cursor: default;
}

/* Capture charts: the per-species bars and the per-month columns,
   shared by the user, location and species-tab pages. */
.us-chart-title { font-size: 1rem; font-weight: 700; color: var(--primary-dark, #422a27); }
.us-legend { display: flex; gap: 0.9rem; font-size: var(--fs-micro); color: var(--dark-light); }
.us-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.us-swatch { width: 0.7rem; height: 0.7rem; border-radius: var(--radius-pill); display: inline-block; }
.us-swatch--new, .us-bar-seg--new { background: var(--primary); }
.us-swatch--recap, .us-bar-seg--recap { background: var(--accent-dark); }

.us-bars { display: flex; flex-direction: column; gap: 0.45rem; }
.us-bar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr; align-items: center; gap: 0.6rem; }
.us-bar-label { font-size: 0.78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-bar-label a { color: inherit; }
.us-bar-track { display: flex; align-items: center; gap: 2px; min-height: 14px; }
/* Flat at the baseline, 4px rounded data-end (last segment only) */
.us-bar-seg { height: 14px; }
.us-bar-seg:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.us-bar-value { font-size: var(--fs-micro); font-weight: 600; color: var(--primary-dark, #422a27); margin-left: 0.35rem; }
.us-species-details summary { font-size: 0.8rem; color: var(--dark-light); cursor: pointer; }

.us-months { display: flex; align-items: stretch; gap: 4px; flex: 1; min-height: 180px; }
.us-month { flex: 1; display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
a.us-month:hover .us-month-col { filter: brightness(1.18); }
a.us-month:hover .us-month-label { color: var(--primary-dark, #422a27); }
.us-month-col-wrap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.us-month-col { width: 70%; max-width: 26px; background: var(--primary); border-radius: var(--radius) var(--radius) 0 0; min-height: 1px; }
.us-month-value { font-size: var(--fs-micro); font-weight: 600; color: var(--primary-dark, #422a27); margin-bottom: 2px; }
.us-month-label { font-size: var(--fs-micro); color: var(--dark-light); text-align: center; margin-top: 3px; border-top: 1px solid #e6e0d8; padding-top: 3px; }
/* The year under the first bar and under January: twelve months span two. */
.us-month-year { display: block; font-size: 0.65rem; line-height: 1.1; color: var(--dark-light); }
.us-chart-period { font-size: var(--fs-micro); color: var(--dark-light); }
@media (max-width: 575.98px) {
    .us-bar-row { grid-template-columns: minmax(80px, 110px) 1fr; }
}

/* --- Photo zoom controls (static/js/photo-zoom.js) ---------------------
   Spelled out on the photo itself: a photo that can be enlarged should say
   so, and getting back to fit size should be one click. */
.pz-controls {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 8;
    display: flex;
    align-items: stretch;
    gap: 1px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pz-btn {
    border: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}
.pz-btn:hover { background: rgba(0, 0, 0, 0.75); }
.pz-btn--fit { font-size: 0.78rem; min-width: 3.4rem; }
.pz-percent { pointer-events: none; }

/* --- Photo strip (partials/_photo_strip.html) --------------------------
   The photos of one bird in a row under the big one: which one you are on,
   and one click to any other. Scrolls sideways rather than wrapping, so the
   page keeps its shape however many photos a capture has. */
.photo-strip { padding: 0.5rem 0.6rem; }
.photo-strip__scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.2rem;
}
.photo-strip__item {
    position: relative;
    flex: 0 0 auto;
    width: 4.6rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.72;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.photo-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip__item:hover { opacity: 1; }
.photo-strip__item.is-current {
    opacity: 1;
    border-color: var(--accent-dark, #97a566);
    box-shadow: 0 0 0 2px rgba(151, 165, 102, 0.35);
}
.photo-strip__number {
    position: absolute;
    left: 2px;
    bottom: 1px;
    padding: 0 0.25rem;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1.4;
}
.photo-strip--dark { background: #14160f; }
.photo-strip--dark .photo-strip__item.is-current { border-color: #fff; box-shadow: none; }


/* --- keyboard focus: one visible ring for everything focusable --- */
:focus-visible {
  outline: 2px solid var(--primary-dark, #422a27);
  outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--primary-dark, #422a27);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Offline data entry (app/offline.py)

   Two things a ringer sees: the word that a capture is safe on this device,
   and the list of what is still waiting. Both are deliberately quiet -- with
   a connection the whole mechanism should be invisible.
   --------------------------------------------------------------------------- */
.offline-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1080;
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--primary-dark, #422a27);
    color: #fff;
    font-size: 0.88rem;
    line-height: 1.35;
    box-shadow: 0 8px 26px rgba(66, 42, 39, 0.28);
    opacity: 1;
    transition: opacity 0.5s ease;
}
.offline-toast--out { opacity: 0; }

.offline-item { border-color: rgba(95, 63, 59, 0.16); }
.offline-item .badge { font-weight: 600; }

/* The inbox in the bar carries a number, so it needs less room than a word. */
#outbox-nav .badge { font-size: 0.7rem; padding: 0.2rem 0.45rem; }

@media print {
    .offline-toast { display: none !important; }
}

/* The photo codes (static/js/offline/qr.js). */
.qr-saved__code { width: 5.5rem; height: 5.5rem; flex-shrink: 0; }
.qr-saved__code svg, .qr-modal__code svg { display: block; width: 100%; height: 100%; }
.qr-modal__code { width: 13rem; height: 13rem; }

.qr-print { max-width: 30rem; margin-inline: auto; }
.qr-print__sheet { text-align: center; padding: 1.5rem; }
.qr-print__title { font-size: 1.4rem; margin-bottom: 0.5rem; }
.qr-print__where { font-size: 1.05rem; font-weight: 600; margin-bottom: 1.25rem; }
.qr-print__code { width: 15rem; height: 15rem; margin: 0 auto 1.25rem; }
.qr-print__code svg { display: block; width: 100%; height: 100%; }
.qr-print__note { font-size: 0.9rem; max-width: 22rem; margin: 0 auto 0.5rem; }
.qr-print__url { font-size: 0.7rem; color: var(--dark-light); word-break: break-all; }
@media print {
    .qr-print__sheet { padding: 0; }
    .app-nav-wrapper, .app-footer-wrapper, .messages-container { display: none !important; }
}

/* The phone's upload page (static/js/offline/quick-upload.js). Big targets:
   it is used one-handed, at a table, with a bird in the other hand. */
.quick-upload { max-width: 34rem; margin-inline: auto; }
.quick-upload__drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; width: 100%; min-height: 8rem; padding: 1.5rem;
    border: 2px dashed rgba(95, 63, 59, 0.3); border-radius: var(--radius);
    background: rgba(178, 192, 129, 0.08); color: var(--primary-dark, #422a27);
    cursor: pointer; text-align: center;
}
.quick-upload__drop:active { background: rgba(178, 192, 129, 0.18); }
/* Take or choose, and the one-tap way to the lens beside it. */
.quick-upload__pick { display: flex; align-items: stretch; gap: 0.5rem; }
.quick-upload__pick .quick-upload__drop { flex: 1 1 auto; }
.quick-upload__camera {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 5.5rem; gap: 0.2rem; font-size: var(--fs-meta); line-height: 1.2;
}

/* Which photos the labels and the Upload button act on. */
.quick-upload__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.quick-upload__bar [data-qu-selected] { color: var(--dark-light); }

.quick-upload__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.4rem; }
.qu-tile {
    position: relative; aspect-ratio: 1; padding: 0;
    border: 2px solid transparent; border-radius: var(--radius);
    overflow: hidden; background: #f1efe9; cursor: pointer;
}
.qu-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A photo that is picked wears the ring, and one that is not is set back. */
.qu-tile:not(.is-selected) img { opacity: 0.5; }
.qu-tile.is-selected { border-color: var(--primary); }
.qu-tile.is-selected::before {
    content: "\2713";
    position: absolute; top: 2px; right: 2px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 0.7rem; line-height: 1;
}
.qu-tile:disabled { cursor: default; }
.qu-tile--done::after, .qu-tile--queued::after {
    position: absolute; inset: auto 0 0 0; padding: 0.1rem 0.25rem;
    font-size: 0.65rem; text-align: center; color: #fff;
}
.qu-tile--done::after { content: "\2713"; background: rgba(70, 120, 60, 0.85); }
.qu-tile--queued::after { content: "\22EF"; background: rgba(120, 100, 40, 0.85); }
.qu-tile--refused::after { content: "!"; background: rgba(160, 50, 40, 0.9); }
/* What a tile that did not go says underneath it (quick-upload.js). */
.qu-cell { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.qu-cell__note { font-size: 0.7rem; line-height: 1.2; color: var(--dark-light); }
.qu-cell__note[hidden] { display: none; }
.qu-cell__note--refused { color: var(--bs-danger, #b02a37); }
.qu-cell__retry { display: block; font-size: 0.7rem; line-height: 1.2; }
.qu-cell__retry[hidden] { display: none; }
.qu-tag.active { background: var(--accent); border-color: var(--accent-dark); color: #fff; }

/* The photo code on a capture page: drawn, not hidden behind a click, because
   this is the page a ringer is on when they want this bird's photos. */
.cap-qr-card__body { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cap-qr-card__code { width: 8.5rem; height: 8.5rem; flex-shrink: 0; }
.cap-qr-card__code svg { display: block; width: 100%; height: 100%; }
.cap-qr-card__text { flex: 1 1 12rem; min-width: 0; }
.qr-row { color: inherit; text-decoration: none; }
.qr-row:hover { color: var(--primary-dark, #422a27); }
@media print { .cap-qr-card { display: none !important; } }

/* ---------------------------------------------------------------------------
   The offline page (templates/offline/offline.html)

   Not an error message: the front door with no network. So it looks like a
   page of the site rather than a browser failure, and it leads somewhere --
   a place, a station, the day that is already running.
   --------------------------------------------------------------------------- */
.offline-page { max-width: 46rem; margin-inline: auto; }
.offline-page__badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
    background: rgba(184, 126, 111, 0.14);
    color: var(--secondary-dark, #b87e6f);
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.offline-page__title { font-size: 1.6rem; margin: 0.6rem 0 0.4rem; }
.offline-page__lead { color: #5f5750; max-width: 34rem; }
.offline-page__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; }

.offline-card {
    border: 1px solid var(--gray-300, #dee2e6);
    border-left: 3px solid var(--accent-dark, #97a566);
    border-radius: var(--radius, 0.5rem);
    padding: 0.75rem 1rem; margin-bottom: 1.5rem; background: #fff;
}
.offline-card__label {
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--secondary-dark, #b87e6f);
    margin-bottom: 0.25rem;
}
.offline-card__body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.offline-list + .offline-list { margin-top: 1.25rem; }
.offline-list__title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.5rem; }
.offline-list__items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.offline-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--gray-300, #dee2e6);
    border-radius: var(--radius-pill);
    background: #fff; color: var(--primary-dark, #422a27);
    text-decoration: none; font-size: 0.9rem;
}
.offline-chip:hover { border-color: var(--accent-dark, #97a566); background: rgba(178, 192, 129, 0.12); }
.offline-chip i { color: var(--secondary-dark, #b87e6f); }

.offline-page__note {
    margin-top: 1.5rem; padding: 0.85rem 1rem;
    border-radius: var(--radius, 0.5rem);
    background: rgba(178, 192, 129, 0.12);
}
.offline-page__what { margin-top: 2rem; }
.offline-page__what summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; }
.offline-page__works h3, .offline-page__waits h3 { margin-bottom: 0.35rem; }
.offline-page__works ul li::marker { color: var(--accent-dark, #97a566); }
.offline-page__retry { margin-top: 1.5rem; }


/* --- Map pins that say what they are (static/js/mini_map.js) --------------
   Your own places, your ring stations (which pulse, so you find them among
   the rest) and other people's stations, which are smaller and grey. The
   sizes and the pulse come from the navigation handoff. */
.bith-pin {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(66, 42, 39, 0.4);
}
.bith-pin--loc { background: var(--primary); }
.bith-pin--station { background: var(--accent-dark); }
/* Light orange-brown rather than a pale grey that disappeared on the map,
   and a thinner edge so the colour shows (Marcel 28-09). */
.bith-pin--other { background: #d49a5c; width: 10px; height: 10px; border-width: 1px; }
.bith-pin--own { animation: pin-pop 1.8s ease-in-out infinite; }
@keyframes pin-pop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(151, 165, 102, 0.6), 0 1px 4px rgba(66, 42, 39, 0.4); }
  50% { box-shadow: 0 0 0 9px rgba(151, 165, 102, 0), 0 1px 4px rgba(66, 42, 39, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .bith-pin--own { animation: none; }
}

/* The map's legend: what the colours mean, under it rather than over it. */
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  font-size: var(--fs-micro);
  color: var(--dark-light);
}
.map-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }


/* --- Closing the catch day (captures/_close_session.html) -----------------
   The nets come down at the foot of the day's own page, so the button is
   there rather than among the six in the head. Full width on a phone: it is
   pressed with cold hands. */
.sd-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(178, 192, 129, 0.22);
  box-shadow: inset 3px 0 0 var(--accent-dark, #97a566);
}
.sd-close__text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-meta);
  color: var(--primary-dark);
  min-width: 0;
}
.sd-close__form { flex: 0 0 auto; }
.sd-close__btn { min-height: 44px; }
@media (max-width: 575.98px) {
  .sd-close { flex-direction: column; align-items: stretch; }
  .sd-close__form { width: 100%; }
  .sd-close__btn { width: 100%; }
}


/* --- Pills that narrow a list without asking the server -------------------
   All / Mine / Netherlands / Abroad above the places table, on the homepage
   and on a ringer's own overview. */
.ov-pills { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.ov-pill {
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--primary-dark);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.ov-pill:hover { border-color: var(--primary-light, #7a5a56); }
.ov-pill.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }


/* A callout about something that needs attention rather than something that
   is going well: the same shape, the salmon bar instead of the olive one. */
.callout--warn {
  background: rgba(224, 164, 145, 0.18);
  box-shadow: inset 3px 0 0 var(--secondary-dark, #b87e6f);
}

/* What each role may do, above the list that hands them out. */
.role-key strong { color: var(--primary-dark); }
.role-key strong + * { margin-right: 0.4rem; }


/* --- Finding a place for a new location ----------------------------------
   The search box above the map, and the handful of answers under it. */
.geo-results { max-height: 12rem; overflow-y: auto; }
.geo-results[hidden] { display: none !important; }
.geo-search .form-control { min-width: 10rem; }

/* Help page: the diagram of how places, stations, projects, sessions and
   captures hang together, and the search that narrows the page. */
.help-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.help-diagram-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.help-diagram-top .help-node { flex: 1 1 0; }
.help-node {
  width: 100%;
  max-width: 22rem;
  border: 2px solid var(--primary-light);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  background: var(--bs-body-bg);
}
.help-node-title { font-weight: 600; color: var(--primary); }
.help-node-text { font-size: 0.875rem; color: var(--bs-secondary-color); }
.help-link, .help-link-side {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--bs-secondary-color);
  text-align: center;
}
/* A vertical connector with an arrowhead, the label beside it. */
.help-link {
  position: relative;
  padding: 0.6rem 0 0.6rem 1rem;
}
.help-link::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0;
  bottom: 0.35rem;
  border-left: 2px solid var(--primary-light);
}
.help-link::after {
  content: "";
  position: absolute;
  left: calc(0.3rem - 4px);
  bottom: 0;
  border: 5px solid transparent;
  border-top: 6px solid var(--primary-light);
  border-bottom: 0;
}
.help-link-side {
  flex: 0 0 7rem;
  border-top: 2px dashed var(--primary-light);
  padding-top: 0.25rem;
}
@media (max-width: 575.98px) {
  .help-diagram-top { flex-direction: column; }
  .help-diagram-top .help-node { flex: none; }
  .help-link-side { flex: none; border-top: 0; padding: 0; }
}
.help-terms dt { color: var(--primary); }
.help-terms dd { margin-bottom: 0.75rem; }
.help-roles th[scope="row"] { white-space: nowrap; }
@media (max-width: 575.98px) {
  .help-roles th[scope="row"] { white-space: normal; }
}
.help-page mark { padding: 0 0.1em; background: var(--secondary-light); }
.help-toc li[hidden] { display: none; }