/* =====================================================================
   Frontend CSS — Wildex Visual Style on Tabler Base
   ===================================================================== */

/* Reserve the scrollbar gutter so Bootstrap modals don't cause a
   horizontal jump when they lock body scrolling on open.
   Also neutralize Bootstrap's compensating padding-right since the
   gutter already keeps the layout stable. */
html { scrollbar-gutter: stable; }
body.modal-open { padding-right: 0 !important; }

/* ---- Tokens ---- */
:root {
  --fe-primary:   #000000;
  --fe-primary-dark: #8B8A3D;
  --fe-accent:    #CBCA7B;
  --fe-accent-dark: #8a8936;
  /* Semantic colour for text links / inline actions on light backgrounds —
     darker than --fe-accent-dark for legible contrast (WCAG AA on --fe-bg). */
  --fe-link:        #8B8A3D;
  --fe-text:      #555555;
  --fe-muted:     #999999;
  --fe-bg:        #f2f2ef;
  --fe-bg-dark:   #0d0d0d;
  --fe-bg-subtle: #f5f5f5;
  --fe-border:    #e0e0e0;

  --tblr-font-sans-serif: 'Manrope', system-ui, sans-serif;
  --tblr-body-color:      #333;
  --tblr-body-bg:         #f2f2ef;
  --tblr-border-radius:   0;
  --tblr-body-font-weight: 500;
  /* Navbar-overlap braucht diese Variable um den negativen Margin zu setzen */
  --tblr-navbar-height:   92px;

  /* ---- Tone palette (related to olive accent) ---- */
  /* Each tone exposes a HEX, an RGB triple (for rgba()) and a "dark" hex
     for legible foreground text on light backgrounds. Use the helper
     classes `.fe-tone-{name}-bg`, `.fe-tone-{name}-soft`, `.fe-tone-{name}-text`
     and `.fe-tone-{name}-border` or address the variables directly. */
  --fe-tone-mustard:        #d4a843;   /* warm gold */
  --fe-tone-mustard-rgb:    212,168,67;
  --fe-tone-mustard-dark:   #9a7820;
  --fe-tone-sage:           #8fa875;   /* sage green */
  --fe-tone-sage-rgb:       143,168,117;
  --fe-tone-sage-dark:      #5d7a48;
  --fe-tone-earth:          #b8956a;   /* warm earth gold */
  --fe-tone-earth-rgb:      184,149,106;
  --fe-tone-earth-dark:     #7d6037;
  --fe-tone-olive:          #7a8c3d;   /* deeper olive green */
  --fe-tone-olive-rgb:      122,140,61;
  --fe-tone-olive-dark:     #536127;
  --fe-tone-champagne:      #d6cf9a;   /* light champagne */
  --fe-tone-champagne-rgb:  214,207,154;
  --fe-tone-champagne-dark: #766f3a;
  --fe-tone-copper:         #c08552;   /* warm copper / terracotta */
  --fe-tone-copper-rgb:     192,133,82;
  --fe-tone-copper-dark:    #8a4f25;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --fe-primary:    #ffffff;
  --fe-primary-dark: var(--fe-accent);
  --fe-text:       rgba(255,255,255,0.75);
  --fe-muted:      rgba(255,255,255,0.4);
  --fe-bg:         #111318;
  --fe-bg-subtle:  #1c1f26;
  --fe-border:     rgba(255,255,255,0.1);
  --tblr-body-color: rgba(255,255,255,0.75);
  --tblr-body-bg:    #111318;
  /* In dark mode, keep the bright accent for text links (it's legible on dark). */
  --fe-accent-dark:  var(--fe-accent);
  --fe-link:         var(--fe-accent);
}
[data-theme="dark"] body.fe-page { background: var(--fe-bg); color: var(--fe-text); }
[data-theme="dark"] .fe-section { background: var(--fe-bg); }
/* fe-section-alt sits between two default sections — needs a noticeable
   contrast in dark mode, where --fe-bg-subtle is too close to --fe-bg.
   #232833 is roughly the same luma step from #111318 as #f8f8f4 is from
   white in light mode, so the visual rhythm matches across themes. */
[data-theme="dark"] .fe-section-alt { background: #232833; }
/* fe-section-ink is hardcoded to #111318, which happens to equal --fe-bg
   in dark mode — making "ink" visually identical to default. Push it to
   true black in dark mode so an explicit ink accent stays an accent. */
[data-theme="dark"] .fe-section-ink { background: #000; }
[data-theme="dark"] .fe-section-title { color: #fff; }
[data-theme="dark"] .fe-section-text { color: var(--fe-text); }
[data-theme="dark"] .fe-eyebrow { color: var(--fe-accent); }
[data-theme="dark"] .fe-service-card,
[data-theme="dark"] .fe-section-dark .fe-service-card { background: #1e2128; border: none; }
[data-theme="dark"] .fe-service-card h3 { color: #fff; }
[data-theme="dark"] .fe-service-card p { color: var(--fe-text); }
[data-theme="dark"] .fe-service-body { background: #1e2128; }
[data-theme="dark"] .fe-check-list li { color: var(--fe-text); }
[data-theme="dark"] .fe-about-images .fe-about-img-secondary { border-color: #1e2128; }
[data-theme="dark"] .fe-section-ink .fe-about-img-secondary { border-color: #111318; }
[data-theme="dark"] .fe-adventure-text { background: #1e2128; border: 1px solid rgba(255,255,255,0.08); }
[data-theme="dark"] .fe-adventure-text h3 { color: #fff; }
[data-theme="dark"] p, [data-theme="dark"] li { color: var(--fe-text); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #fff; }
[data-theme="dark"] .fe-header.fe-header--scrolled { background: #0d0f14 !important; }
[data-theme="dark"] .fe-header:has(.navbar-collapse.show),
[data-theme="dark"] .fe-header:has(.navbar-collapse.collapsing) { background: #0d0f14 !important; }

/* Theme toggle slider */
.fe-switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}
.fe-switch input { display: none; }
.fe-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(255,255,255,0.18);
  border-radius: 22px;
  flex-shrink: 0;
  transition: background 0.25s;
}
.fe-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: transform 0.25s, background 0.25s;
}
.fe-switch input:checked ~ .fe-switch-track {
  background: var(--fe-accent);
}
.fe-switch input:checked ~ .fe-switch-track::after {
  transform: translateX(16px);
  background: #fff;
}
.fe-switch-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 575px) {
  .container, .container-fluid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ---- Base ---- */
body.fe-page {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  background: var(--fe-bg);
  color: var(--fe-text);
}
body.fe-page p {
  font-size: 1rem;
}

body.fe-page a,
body.fe-page a:hover,
body.fe-page a:focus {
  text-decoration: none !important;
  color: var(--fe-link);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', serif;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
}

/* ---- Navbar ---- */
.fe-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(203, 202, 123, 0.3) !important;
  box-shadow: none !important;
  padding: 0.6rem 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  --tblr-navbar-color: #fff;
}

/* Navbar scrolls off with the page (not sticky) — don't apply a solid
   dark background or shadow on scroll, otherwise it flashes black just
   before leaving the viewport. */

/* navbar-overlap::after würde die Hintergrundfarbe 9rem nach unten ziehen —
   für unser Bild-Hero wollen wir das nicht */
.fe-header.navbar-overlap::after {
  display: none;
}

/* White hamburger icon */
.fe-header .navbar-toggler {
  border-color: rgba(255,255,255,0.4);
  --tblr-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.fe-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Mobile: navbar solid black when menu is open or animating */
@media (max-width: 991px) {
  .fe-header:has(.navbar-collapse.show),
  .fe-header:has(.navbar-collapse.collapsing) {
    background: var(--fe-primary) !important;
    transition: none !important;
  }
}

/* Mobile: solid dark background when menu is expanded */
@media (max-width: 991px) {
  .fe-header .navbar-collapse.show,
  .fe-header .navbar-collapse.collapsing {
    background: rgba(0,0,0,0.96);
    padding: 0.5rem 1.5rem 1.25rem;
    margin-top: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255,255,255,0.1);
  }
  .fe-header .navbar-collapse .nav-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .fe-header .navbar-collapse .nav-item:last-child {
    border-bottom: none;
    margin-bottom: 0.75rem;
  }
  .fe-header .navbar-collapse .nav-link {
    padding: 0.85rem 0 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  .fe-header .navbar-collapse .d-flex {
    padding-top: 0.5rem;
  }
}

/* Hero / Auth direkt hinter Navbar hochziehen (Tabler-Version ohne navbar-overlap+* Regel) */
.fe-header + .fe-hero,
.fe-header + .fe-auth-section {
  margin-top: calc(-1 * var(--tblr-navbar-height));
}

.fe-header .nav-link {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.45rem 1rem !important;
  transition: color 0.2s;
}

.fe-header .nav-link:hover,
.fe-header .nav-link.active {
  color: var(--fe-accent) !important;
}

/* ---- Buttons ---- */
.fe-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 0.6rem 1.6rem;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.fe-btn:hover, .fe-btn:focus { text-decoration: none !important; }

/* icon is first child (left) → reduce left padding */
.fe-btn:has(i:first-child) { padding-left: 0.5rem; }
/* icon is last child (right) → reduce right padding */
/* also covers icon-only (which is both first and last) */
.fe-btn:has(i:last-child)  { padding-right: 0.5rem; }

.fe-btn:hover { transform: translateY(-2px); }
.fe-btn:active { transform: translateY(0); }

.fe-btn i { transition: transform 0.25s ease, background-color 0.25s ease; }
.fe-btn:hover i { transform: scale(1.12); background: rgba(0,0,0,0.1); }
.fe-btn-outline:hover i { background: rgba(0,0,0,0.04); }
.fe-btn-spin:hover i { transform: rotate(45deg); }

/* Back arrows used across detail pages are icon-only and would otherwise
   render slightly oval (icon line-height adds a few px to the height). */
.fe-btn[data-back] {
  aspect-ratio: 1;
  justify-content: center;
  padding: 0.5rem;
}

.fe-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
  font-size: 1.2em;
  flex-shrink: 0;
}

.fe-btn-outline i {
  background: rgba(0,0,0,0.08);
}
.fe-btn-outline-light i {
  background: rgba(255,255,255,0.2);
}
.fe-btn-sm i {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 1em;
}

.fe-btn-accent {
  background: var(--fe-accent);
  border-color: var(--fe-accent);
  color: #000 !important;
}
.fe-btn-accent:hover {
  background: #dedd97;
  border-color: #dedd97;
  color: #000 !important;
}

.fe-btn-outline {
  background: rgba(203, 202, 123, 0.08);
  border-color: var(--fe-accent);
  color: #5a5900 !important;
}
.fe-btn-outline:hover {
  background: #dedd97;
  border-color: #dedd97;
  color: #000 !important;
}

.fe-btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: #fff !important;
}
.fe-btn-outline-light:hover {
  background: #fff;
  color: #000 !important;
}

.fe-btn-sm {
  padding: 0.5rem 1.2rem;
}

.fe-btn-block {
  width: 100%;
  justify-content: center;
}

/* ---- Eyebrow / section label ---- */
.fe-eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-link);
  margin-bottom: 0.6rem;
}

.fe-section-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fe-primary);
  margin-bottom: 1rem;
}

.fe-section-text {
  color: var(--fe-text);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ---- Sections ---- */
.fe-section {
  padding: 3.5rem 0;
}

.fe-section-dark {
  background: var(--fe-bg-subtle);
}

/* Truly dark section (navy) */
.fe-section-ink {
  background: #111318;
}
.fe-section-ink .fe-eyebrow { color: var(--fe-accent); }
.fe-hero .fe-eyebrow { color: var(--fe-accent); }
.fe-section-ink .fe-section-title,
.fe-section-ink h2, .fe-section-ink h3 { color: #fff; }
.fe-section-ink .fe-section-text,
.fe-section-ink p, .fe-section-ink li { color: rgba(255,255,255,0.7); }
.fe-section-ink .fe-check-list li::before {
  background: var(--fe-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;
}
.fe-section-ink .fe-check-list li { color: rgba(255,255,255,0.75); }

.fe-section-alt {
  background: #f8f8f4;
}

/* Strong accent section, same colour as the counter strip. The eyebrow and the
   links default to --fe-link (#8B8A3D), which is olive on olive here and all
   but disappears, so they are darkened for this scope. */
.fe-section-accent {
  background: var(--fe-accent);
}
.fe-section-accent .fe-eyebrow {
  color: rgba(0, 0, 0, 0.45);
}
.fe-section-accent .fe-section-text {
  color: rgba(0, 0, 0, 0.7);
}
body.fe-page .fe-section-accent a:not(.fe-btn) {
  color: var(--fe-primary);
}
body.fe-page .fe-section-accent a:not(.fe-btn):hover {
  color: rgba(0, 0, 0, 0.6);
}
/* An accent-filled button would vanish into this section, and a black one
   competes with the store badges above — those are already solid black. The
   section's own accent, darkened, keeps the button in the same colour as its
   ground and reads as a deliberate shade rather than a foreign hue.
   Note: the -soft tone classes are translucent tints meant for chips on a light
   page; over this ground they mix to within a few points of the background. */
.fe-section-accent .fe-btn-accent {
  background: var(--fe-accent-dark);
  border-color: var(--fe-accent-dark);
  color: #fff !important;
}
.fe-section-accent .fe-btn-accent:hover {
  background: #6f6e2b;
  border-color: #6f6e2b;
  color: #fff !important;
}
.fe-section-accent .fe-btn-accent i {
  background: rgba(255, 255, 255, 0.22);
}
.fe-section-accent .fe-btn-accent:hover i {
  background: rgba(255, 255, 255, 0.35);
}

/* ---- Gallery (masonry-style layout) ----
   CSS column layout reflows mixed-aspect-ratio images without the empty
   "stair-stepping" gaps that a fixed Bootstrap row would produce. Items
   stay in source order column-first; break-inside avoids splitting a
   figure across columns. Captions float as a subtle gradient overlay on
   hover (mobile/touch users see them in the lightbox via alt text).
   Lightbox wiring is delegated to frontend.js (see .fe-lightbox-img). */
.fe-gallery-masonry {
  column-count: 3;
  column-gap: 1rem;
}
.fe-gallery-masonry .fe-gallery-item {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1rem 0;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;             /* kills the inline-image baseline gap */
}
.fe-gallery-masonry .fe-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.5s ease;
}
.fe-gallery-masonry .fe-gallery-item:hover img {
  transform: scale(1.04);
}
.fe-gallery-masonry .fe-gallery-item figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.8125rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.fe-gallery-masonry .fe-gallery-item:hover figcaption,
.fe-gallery-masonry .fe-gallery-item:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 991.98px) {
  .fe-gallery-masonry { column-count: 2; }
}
@media (max-width: 575.98px) {
  .fe-gallery-masonry { column-count: 1; }
}

/* ---- Hero ---- */
.fe-hero {
  position: relative;
  min-height: 100vh;
  background: url('/img/hero04-f2c532052d48e9a064d1fc37dbe618b0.webp') center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fe-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.45) 65%,
    rgba(0,0,0,0.75) 100%
  );
  z-index: 1;
}

/* Hero grid layout */
.fe-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
}

.fe-hero-main {
  flex: 1;
  padding: calc(var(--tblr-navbar-height, 92px) + 1rem) 0 3rem;
}
@media (max-width: 991.98px) {
  .fe-hero-main { padding: 9rem 0 3rem; }
}

.fe-hero-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 1.2rem;
}

.fe-hero-subtitle {
  color: #fff;
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.65;
  font-weight: 500;
  margin-bottom: 2rem;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

@media (min-width: 768px) {
  .fe-hero-badge-col { align-self: flex-end; margin-bottom: 1.5rem; }
}

.fe-hero-badge {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1rem;
  color: #fff;
  padding: 1.5rem 2rem;
  width: 100%;
  max-width: 380px;
}

a.fe-hero-badge-link,
a.fe-hero-badge-link:visited {
  display: block;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

a.fe-hero-badge-link:hover,
a.fe-hero-badge-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.55);
  color: #fff;
}
a.fe-hero-badge-link:hover .fe-hero-badge-title,
a.fe-hero-badge-link:focus-visible .fe-hero-badge-title { color: var(--fe-accent); }

.fe-hero-badge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.fe-hero-badge-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--fe-accent);
}

.fe-hero-badge-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.fe-hero-badge-count {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--fe-accent);
  line-height: 1;
}

.fe-hero-badge p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
}

.fe-hero-badge-map {
  margin-top: 1rem;
  height: 260px;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
}
.fe-hero-badge-map .leaflet-container { background: transparent; }

.fe-hero-benefits {
  border-top: 1px solid rgba(203, 202, 123, 0.3);
}

.fe-hero-benefit {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 2.5rem 1rem 3rem;
  color: #fff;
}

@media (max-width: 767px) {
  .fe-hero-benefit {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .fe-hero-benefit:last-child {
    border-bottom: none;
  }
}

.fe-hero-benefit:last-child { border-right: none; }

.fe-hero-benefit-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #000;
  flex-shrink: 0;
}

.fe-hero-benefit-icon { font-size: 1.8rem; color: var(--fe-accent); flex-shrink: 0; line-height: 1; }

.fe-hero-benefit strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}

.fe-hero-benefit p { color: rgba(255,255,255,0.65); font-size: 1.05rem; }

/* ---- About section ---- */
@media (min-width: 1200px) {
  .fe-about-text { padding-left: 3rem !important; }
}

/* ---- About images ---- */
.fe-about-images {
  position: relative;
}

.fe-about-img-main {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.fe-about-img-main img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Opt-out of the 4/3 cover crop above, which is meant for landscape photos and
   slices portrait phone screenshots in half. Keeps the natural ratio and caps
   the height instead. */
.fe-about-img-main.fe-img-natural {
  overflow: visible;
  text-align: center;
}
.fe-about-img-main.fe-img-natural img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
}


.fe-about-img-secondary {
  position: absolute;
  bottom: -10rem;
  right: -3rem;
  width: 55%;
  border: 7px solid #fff;
  border-radius: 0.75rem;
  overflow: hidden;
}
.order-lg-1 .fe-about-img-secondary {
  right: auto;
  left: -3rem;
}
.fe-section-ink .fe-about-img-secondary {
  border-color: #111318;
}

.fe-about-img-secondary img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 575px) {
  .fe-about-img-secondary { display: none; }
}

/* ---- Checklist ---- */
.fe-check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.fe-check-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0;
  font-size: 1rem;
}

.fe-check-list li::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--fe-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBCA7B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;
  clip-path: none;
  top: auto;
  left: auto;
  position: static;
}

/* ---- Blockquote ---- */
.fe-blockquote {
  border-left: 3px solid var(--fe-accent);
  padding: 0.5rem 1rem;
  margin: 0 0 1.5rem;
  font-style: italic;
  color: var(--fe-muted);
  font-size: 0.92rem;
}

/* ---- Service Cards ---- */
.fe-service-card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease;
}

.fe-section-dark .fe-service-card {
  background: #fff;
}

.fe-service-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.fe-service-img {
  position: relative;
}

.fe-service-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  clip-path: inset(0);
}

.fe-service-card:hover .fe-service-img img {
  transform: scale(1.04);
}

.fe-service-icon {
  position: absolute;
  bottom: -22px;
  right: 1.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.fe-service-icon i { font-size: 1.6rem; color: #000; }

.fe-service-body {
  padding: 2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.fe-service-body h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.fe-service-body p {
  font-size: 0.98rem;
  color: var(--fe-text);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 1rem;
}

/* Section footnote */
.fe-section-footnote {
  font-size: 0.88rem;
  color: var(--fe-muted);
}

.fe-section-footnote a {
  color: var(--fe-accent);
  font-weight: 700;
}

.fe-section-footnote a:hover {
  color: #dedd97;
}

.fe-badge {
  display: inline-block;
  background: var(--fe-accent);
  color: #000;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  margin-right: 0.4rem;
  border-radius: 0;
}

/* ---- Adventure Grid ---- */
.fe-adventure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 1rem;
}

@media (max-width: 991px) {
  .fe-adventure-grid { grid-template-columns: 1fr 1fr; }
  .fe-adventure-text { grid-column: span 2; }
}

@media (max-width: 575px) {
  .fe-adventure-grid { grid-template-columns: 1fr; }
  .fe-adventure-text { grid-column: span 1; }
}

.fe-adventure-text {
  background: var(--fe-primary);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fe-adventure-text h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.fe-adventure-img {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.fe-adventure-img img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
}

.fe-adventure-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.fe-adventure-overlay p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.fe-adventure-overlay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fe-accent);
}

.fe-adventure-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fe-accent);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fe-adventure-arrow:hover {
  background: #fff;
  transform: scale(1.08);
}

.fe-adventure-arrow i {
  font-size: 1.3rem;
  color: #000;
}

.fe-adventure-arrow:hover i {
  color: #000;
}

.fe-adventure-caption {
  background: var(--fe-bg-subtle);
  padding: 1rem 1.4rem;
  font-size: 1rem;
  color: var(--fe-text);
  border-top: 2px solid var(--fe-accent);
}

/* ---- Map (Leaflet) ----
   Carto offers no Voyager-Dark, so in dark mode we serve the same Voyager
   tiles and invert them to a dark palette via CSS. invert(1) flips luma
   (white land → dark land); hue-rotate(180deg) restores the original hue
   (blue water stays blue, green forest stays green) instead of becoming
   orange. The filter only targets .leaflet-tile-pane so markers, popups,
   controls and attribution stay untouched. */
[data-theme="dark"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.4) contrast(0.85);
}

/* Leaflet popups (marker info bubbles) default to a white wrapper from
   leaflet.css — make them match the dark theme: dark wrapper, dark tip,
   white text. Map-popup-kind headers (organisation/observation/meeting/
   start/end) flip their hardcoded white header to the alt-section colour
   so they sit on the dark wrapper without a glaring white strip. */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
  background: #1c1f26;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .leaflet-popup-content a {
  color: var(--fe-accent);
}
[data-theme="dark"] .fe-map-popup-kind--organisation,
[data-theme="dark"] .fe-map-popup-kind--observation,
[data-theme="dark"] .fe-map-popup-kind--meeting,
[data-theme="dark"] .fe-map-popup-kind--start,
[data-theme="dark"] .fe-map-popup-kind--end {
  background: #232833;
  color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .leaflet-popup:has(.fe-map-popup-kind) .leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme="dark"] .leaflet-popup:has(.fe-map-popup-kind) .leaflet-popup-close-button:hover {
  color: #fff !important;
}

/* Leaflet attribution bar (bottom-right "Leaflet | © OpenStreetMap © CARTO")
   and zoom/control buttons default to a white background — flip them in
   dark mode so they don't punch a bright corner into the page chrome.
   The .leaflet-container ancestor matches Leaflet's own selector
   specificity (0,2,0) and its rule is loaded later, so we need an extra
   class in our selector to win. */
[data-theme="dark"] .leaflet-container .leaflet-control-attribution {
  background: rgba(28, 31, 38, 0.85);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="dark"] .leaflet-container .leaflet-control-attribution a {
  color: var(--fe-accent);
}
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-bar a:hover {
  background: #1c1f26;
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .leaflet-bar a:hover {
  background: #232833;
}
[data-theme="dark"] .leaflet-bar a.leaflet-disabled {
  background: #15171c;
  color: rgba(255, 255, 255, 0.3);
}
[data-theme="dark"] .leaflet-control-minimap {
  background: #1c1f26;
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---- Counter Strip ---- */
.fe-counter-strip {
  background: var(--fe-accent);
  padding: 5rem 0 7rem;
  color: var(--fe-primary);
}

.fe-counter-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin-bottom: 0.6rem;
}

.fe-counter-heading {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.fe-counter-item {
  padding: 0.5rem;
}

.fe-counter-badge {
  background: rgba(0,0,0,0.12);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.fe-counter-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--fe-primary);
  flex-shrink: 0;
}

.fe-counter-value {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--fe-primary);
  line-height: 1;
}

.fe-counter-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

/* ---- Footer ---- */
.fe-footer {
  position: relative;
  /* Establish a block formatting context so the negative margin-top that
     Bootstrap puts on the inner .row (gutter alignment) does NOT collapse
     up through the footer and pull the whole footer 32 px into the
     previous section. */
  display: flow-root;
  background: url('/img/dive09-cda12c1dd2ccd78aba08a88a0b2c4159.webp') center center / cover no-repeat;
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
}

.fe-footer .container > .row {
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

.fe-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

.fe-footer .container,
.fe-footer-copyright {
  position: relative;
  z-index: 1;
}

body.fe-page .fe-footer a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: color 0.2s;
}

body.fe-page .fe-footer a:hover { color: var(--fe-accent); }

.fe-footer-slogan {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.fe-footer-contact {
  margin-top: 2rem !important;
}

.fe-footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.92);
}

.fe-footer-icon { font-size: 1.1rem; color: var(--fe-accent); flex-shrink: 0; }

.fe-footer .fe-switch-label { color: rgba(255,255,255,0.92); }

.fe-footer-heading {
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fe-accent);
  margin-bottom: 1rem;
}

.fe-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fe-footer-links li { margin-bottom: 0.5rem; }

.fe-footer-social {
  display: flex;
  gap: 0.75rem;
}

.fe-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.1rem;
  transition: all 0.2s;
}

.fe-footer-social a:hover {
  border-color: var(--fe-accent);
  color: var(--fe-accent) !important;
}

.fe-footer-copyright {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 2.5rem 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
}

.fe-footer-copyright p { margin: 0; }

/* ---- Page Header (sub-pages) ---- */
.fe-page-header {
  background: url('/img/hero05-15af8eec7e68fb9fa8c3bbf37ec3e17f.webp') center / cover no-repeat;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--tblr-navbar-height) + 4.5rem) 0 4.75rem;
  color: #fff;
}

.fe-header + .fe-page-header {
  margin-top: calc(-1 * var(--tblr-navbar-height));
}

.fe-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,20,0.45);
}

.fe-page-header-box {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

/* About stat card (block1 image) */
.fe-about-stat-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 3/4;
  width: 100%;
}
.fe-about-stat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fe-about-stat-body {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 2rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.12);
}
.fe-about-stat-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.fe-about-stat-label { font-size: 0.78rem; opacity: 0.8; }

.fe-page-header h1 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  font-weight: 700;
  margin: 0;
}

.fe-page-header .breadcrumb { background: none; padding: 0; margin: 0.25rem 0 0; justify-content: center; }
.fe-page-header .breadcrumb-item, .fe-page-header .breadcrumb-item a {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
}
.fe-page-header .breadcrumb-item.active { color: var(--fe-accent); }
.fe-page-header .breadcrumb-item + .fe-page-header .breadcrumb-item::before {
  color: rgba(255,255,255,0.3);
}

/* ---- Scroll animations ---- */
/* Gated behind .fe-js, which a tiny inline script in the head sets. Without it
   the rules never apply, so content stays visible when JavaScript is blocked,
   fails to load or throws before the observer is wired up. The animation is
   decoration; losing it must never cost the reader the content. This page has
   been here before: a missing git.properties broke the footer, took the whole
   script bundle with it, and left every animated block permanently invisible. */
html.fe-js .fe-animate {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

html.fe-js .fe-animate.fe-animate--img {
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

/* Muss dieselbe .fe-js-Stufe tragen wie die Regel, die versteckt. Ohne das
   liegt "html.fe-js .fe-animate" (0-2-1) über ".fe-animate--visible" (0-2-0):
   Die Klasse wird gesetzt, die Deckkraft bleibt trotzdem 0, und die Seite ist
   leer, obwohl das JavaScript einwandfrei gelaufen ist. */
html.fe-js .fe-animate.fe-animate--visible {
  opacity: 1;
  transform: none;
}

.fe-animate.fe-animate--delay-1 { transition-delay: 0.1s; }
.fe-animate.fe-animate--delay-2 { transition-delay: 0.2s; }
.fe-animate.fe-animate--delay-3 { transition-delay: 0.3s; }
.fe-animate.fe-animate--delay-4 { transition-delay: 0.4s; }

/* ---- Auth Pages (login, forgot-password, reset-password) ---- */
.fe-auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--tblr-navbar-height) + 2rem) 0 7rem;
  position: relative;
  background: url('/img/dive07-b9fc481db9670ae94dc8f691d264c21e.webp') center/cover no-repeat;
}
.fe-auth-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,5,20,0.45);
}
.fe-auth-section .container { position: relative; z-index: 1; }
.fe-auth-card {
  background: rgba(0,5,20,0.45);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 1.25rem;
  padding: 2.5rem 3rem;
  color: #fff;
}
.fe-auth-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 1.75rem;
}
.fe-auth-subtitle {
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1.75rem;
}
.fe-auth-alert {
  background: rgba(220,53,69,0.15);
  border: 1px solid rgba(220,53,69,0.4);
  border-radius: 0.6rem;
  color: #ff6b6b;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.fe-auth-success { text-align: center; }
.fe-auth-success-icon { font-size: 2.5rem; color: var(--fe-accent); margin-bottom: 1rem; }
.fe-auth-success h2 { color: #fff; margin-bottom: 0.75rem; }
.fe-auth-success p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 1.5rem; }
.fe-auth-field { margin-bottom: 1.25rem; }
.fe-auth-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.fe-auth-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  box-sizing: border-box;
}
.fe-auth-input::placeholder { color: rgba(255,255,255,0.35); }
.fe-auth-input:focus { border-color: var(--fe-accent); background: rgba(255,255,255,0.12); }
.fe-auth-check { margin-bottom: 1.5rem; }
.fe-auth-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
}
.fe-auth-links {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
body.fe-page .fe-auth-links a { color: var(--fe-accent); font-weight: 600; }
body.fe-page .fe-auth-links a:hover { color: #fff; }

/* ---- About Page ---- */
.fe-feature-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  height: 100%;
}
.fe-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #000;
  flex-shrink: 0;
}
.fe-feature-item strong { display: block; margin-bottom: 0.3rem; color: var(--fe-primary); }
.fe-feature-item p { color: var(--fe-text); font-size: 1rem; }

.fe-rounded-img {
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  aspect-ratio: 4/3;
  display: block;
}

.fe-info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
}
.fe-info-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #000;
  margin-bottom: 1.25rem;
}
.fe-info-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.75rem; }
.fe-info-card p { color: rgba(255,255,255,0.65); font-size: 1rem; margin: 0; }

.fe-why-card {
  background: var(--fe-bg-subtle);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fe-border);
}
.fe-why-num {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--fe-accent);
  line-height: 1;
  margin-bottom: 1rem;
}
.fe-why-card h3 { font-size: 1.05rem; margin-bottom: 0.75rem; color: var(--fe-primary); }
.fe-why-card p { font-size: 1rem; color: var(--fe-text); flex: 1; margin: 0; }
.fe-why-card-footer { padding-top: 1.25rem; margin-top: auto; }

.fe-link {
  color: var(--fe-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  transition: opacity 0.2s, gap 0.2s;
}
.fe-link:hover { opacity: 0.75; }

.fe-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 2.5rem 0 0;
}

.fe-callout-card {
  position: relative;
}
.fe-callout-img {
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}
.fe-callout-img img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}
.fe-callout-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}
.fe-callout-body {
  position: relative;
  z-index: 2;
  margin: -2.5rem 2rem 0 1.5rem;
  background: var(--fe-accent);
  width: fit-content;
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.fe-callout-contact h3 { color: rgba(0,0,0,0.5); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.fe-callout-contact p { color: #000; margin: 0; font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.fe-text-items { display: flex; flex-direction: column; }
.fe-text-item { padding: 2.5rem 0; }
.fe-text-item:not(:last-child) { border-bottom: 1px solid var(--fe-border); }
.fe-text-item-inner { display: flex; gap: 1rem; align-items: flex-start; }
.fe-text-item strong { display: block; margin-bottom: 0.3rem; color: var(--fe-primary); font-size: 1rem; }
.fe-callout-contacts { display: flex; align-items: center; gap: 0; }
.fe-callout-contacts .fe-callout-contact { flex: 1; }
.fe-callout-divider-v { width: 1px; align-self: stretch; background: rgba(0,0,0,0.3); margin: 0 1.25rem; }

.fe-team-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.fe-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fe-team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%);
}
.fe-team-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.25rem;
  z-index: 1;
}
.fe-team-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; color: #fff; font-weight: 700; }
.fe-team-card p { font-size: 0.9rem; color: rgba(255,255,255,0.75); margin: 0; }

/* Auth bottom bar (replaces full footer on auth pages) */
.fe-auth-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 1.25rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.3);
}
body.fe-page .fe-auth-bar a { color: var(--fe-accent); font-weight: 600; }
body.fe-page .fe-auth-bar a:hover { color: #fff; }

/* Language dropdown inside the auth bar: subtle on the dark hero, but the
   menu pops with a dark background and light text once opened so users can
   actually read the entries. */
.fe-auth-bar .dropdown-toggle {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.fe-auth-bar .dropdown-toggle:hover,
.fe-auth-bar .dropdown-toggle:focus,
.fe-auth-bar .dropdown-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  box-shadow: none;
}
.fe-auth-bar .dropdown-menu {
  background: #1f2230;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.fe-auth-bar .dropdown-menu .dropdown-item {
  color: rgba(255,255,255,0.85);
}
.fe-auth-bar .dropdown-menu .dropdown-item:hover,
.fe-auth-bar .dropdown-menu .dropdown-item:focus {
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.fe-auth-bar .dropdown-menu .dropdown-item.active {
  background: var(--fe-accent);
  color: #fff;
}

/* ---- Honeypot (must remain invisible to humans, including screen readers
   should ignore via aria-hidden, but we keep the input focusable=false) ---- */
.fe-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Registration captcha ---- */
.fe-captcha {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.fe-captcha-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.fe-captcha-target {
  display: flex;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.fe-captcha-target img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.fe-captcha-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.fe-captcha-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.08);
  transition: border-color 120ms ease, transform 120ms ease;
  margin: 0;
  background: rgba(0,0,0,0.25);
}
.fe-captcha-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fe-captcha-tile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fe-captcha-tile:hover { border-color: rgba(255,255,255,0.3); }
.fe-captcha-tile:has(input:checked) {
  border-color: var(--fe-accent);
  box-shadow: 0 0 0 3px rgba(0,168,232,0.35);
  transform: scale(0.98);
}

/* ---- Imprint ---- */
.fe-imprint-sidebar {
  position: sticky;
  top: calc(var(--tblr-navbar-height) + 1.5rem);
}
.fe-imprint-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fe-imprint-nav a {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--fe-text);
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.fe-imprint-nav a:hover {
  background: var(--fe-bg-subtle);
  border-left-color: var(--fe-accent);
  color: var(--fe-primary);
}
.fe-imprint-cta {
  background: var(--fe-accent);
  border-radius: 1rem;
  padding: 1.5rem;
}
body.fe-page .fe-imprint-cta-text {
  font-family: 'Bricolage Grotesque', serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000;
  margin-bottom: 1.1rem;
}
/* Selector specificity must beat the global "body.fe-page a" rule (Z. 159)
   that would otherwise paint these links in --fe-link (~accent-dark). */
body.fe-page .fe-imprint-cta-link,
body.fe-page .fe-imprint-cta-link:hover,
body.fe-page .fe-imprint-cta-link:focus {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #000;
  font-weight: 600;
  padding: 0.4rem 0;
}
.fe-imprint-cta-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #5a5920;
  color: #fff;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.fe-imprint-cta-link:hover { opacity: 0.85; }
.fe-imprint-cta-link + .fe-imprint-cta-link { border-top: 1px solid rgba(0,0,0,0.15); }

/* Override the global [data-theme="dark"] p/li rule that would otherwise
   turn the box text white on the light accent background. */
[data-theme="dark"] .fe-imprint-cta-text,
[data-theme="dark"] .fe-imprint-cta-link { color: #000; }

.fe-detail-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--fe-primary);
  letter-spacing: -0.02em;
}

.fe-imprint-section {
  margin-bottom: 1.5rem;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--fe-border);
}
[data-theme="dark"] .fe-imprint-section {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-imprint-heading { color: var(--fe-accent); }
.fe-imprint-section:last-child { margin-bottom: 0; }
/* Roomier variant for sections that hold a list + a separate input below
   (e.g. comments). Extra vertical padding gives the divider room to breathe. */
.fe-imprint-section--roomy {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Markdown-rendered legal pages (terms, privacy): style bare h2/ol/ul/p
   inside .fe-imprint-content so authors can write plain Markdown. */
.fe-imprint-content > h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin-bottom: 1rem;
}
.fe-imprint-content > h2:not(:first-child) { margin-top: 1.5rem; }
.fe-imprint-content > h3 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--fe-text);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}
[data-theme="dark"] .fe-imprint-content > h2 { color: var(--fe-accent); }
[data-theme="dark"] .fe-imprint-content > h3 { color: var(--fe-text); }
.fe-imprint-content ol,
.fe-imprint-content ul { padding-left: 1.25rem; }
.fe-imprint-content ol li,
.fe-imprint-content ul li { margin-bottom: 0.25rem; }
.fe-imprint-content p { margin-bottom: 1rem; }
.fe-imprint-content > *:last-child { margin-bottom: 0; }
.fe-imprint-heading {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.fe-imprint-heading-toggle {
  background: none;
  border: 0;
  color: var(--fe-accent);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.fe-imprint-heading-toggle:hover { background-color: rgba(0,0,0,0.05); }
[data-theme="dark"] .fe-imprint-heading-toggle:hover { background-color: rgba(255,255,255,0.08); }
.fe-imprint-section.is-collapsed .fe-imprint-row.is-empty { display: none; }
.fe-imprint-sub { color: var(--fe-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
.fe-imprint-dl { margin: 0; }
.fe-imprint-row {
  display: grid;
  /* min 11rem on the label column so longer i18n labels (e.g. "Unteraktivitäten")
     stay on a single line; falls back to a 1fr share when content is short. */
  grid-template-columns: minmax(11rem, 1fr) 2fr;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--fe-border);
}
.fe-imprint-row > dt,
.fe-imprint-row > dd { min-width: 0; }
.fe-imprint-row.is-first-visible { border-top: none; padding-top: 0; }
.fe-imprint-row.is-last-visible { padding-bottom: 0; }
.fe-imprint-row dt { font-weight: 400; color: var(--fe-text); }
.fe-imprint-row dd { margin: 0; color: var(--fe-text); overflow-wrap: anywhere; }
.fe-imprint-row dd.text-muted { color: var(--fe-muted) !important; opacity: 0.5; }
@media (max-width: 575.98px) {
  .fe-imprint-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .fe-imprint-row dt { font-weight: 600; }
}

/* ---- Contact ---- */
.fe-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  height: 100%;
}
.fe-contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--fe-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #000;
  flex-shrink: 0;
}
.fe-contact-item h3 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fe-muted); margin-bottom: 0.25rem; }
.fe-contact-item a, .fe-contact-item p { font-size: 1rem; font-weight: 600; color: var(--fe-primary); margin: 0; }
.fe-contact-item a:hover { color: var(--fe-accent); }
.fe-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--fe-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s;
}
[data-theme="dark"] .fe-input {
  background: var(--fe-bg-subtle);
}
.fe-input:focus { outline: none; border-color: var(--fe-accent); }
.fe-input::placeholder { color: var(--fe-muted); }
.fe-contact-map {
  border-radius: 1rem;
  overflow: hidden;
  height: 480px;
}
.fe-contact-map iframe { display: block; }

/* ---- Error pages ---- */
.fe-error-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--tblr-navbar-height));
  padding: calc(var(--tblr-navbar-height) + 3rem) 0 5rem;
  position: relative;
  background: url('/img/turtle01-b2e94f4bea990d9d77055db9a9dff8a5.webp') center / cover no-repeat;
}
.fe-error-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,5,20,0.35);
}
.fe-error-section .container { position: relative; z-index: 1; }
.fe-error-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
}
.fe-error-code {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 800;
  line-height: 1;
  color: var(--fe-accent);
  margin-bottom: 1.5rem;
}
.fe-error-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}
.fe-error-text {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  margin-bottom: 2rem;
}
.fe-error-details {
  text-align: left;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.fe-error-details pre {
  background: rgba(0,0,0,0.5);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: auto;
  max-height: 50vh;
  margin-top: 0.75rem;
  color: #e0e0e0;
}
.fe-error-details pre p { color: #e0e0e0 !important; font-size: 0.85rem; }

/* ================================ OBSERVATION CARDS ================================ */
.fe-obs-card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}
.fe-obs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  color: inherit;
  text-decoration: none;
}
.fe-obs-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--fe-bg-subtle);
  position: relative;
}
.fe-obs-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-obs-card-play {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}
.fe-obs-card-badges {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 0.3rem;
}
.fe-obs-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 1rem;
  backdrop-filter: blur(4px);
  line-height: 1;
  background: rgba(0,0,0,0.6);
}
.fe-obs-card-badge i { font-size: 0.78rem; }
.fe-badge-image { background: var(--fe-tone-sage-dark); }
.fe-badge-video { background: var(--fe-tone-copper-dark); }
.fe-badge-audio { background: var(--fe-tone-mustard-dark); }
.fe-badge-highlight { background: var(--fe-tone-champagne-dark); }
/* The thumbnail is wrapped in <span class="s-thumb-flag d-block">.
   The span is inline-block by default and shrinks to the image's natural
   size — force it to fill the 4/3 card-img container so the image can
   actually expand to 100% width × 100% height. */
.fe-obs-card-img > .s-thumb-flag {
  display: block;
  width: 100%;
  height: 100%;
}
.fe-obs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.fe-obs-card:hover .fe-obs-card-img img { transform: scale(1.04); }
.fe-obs-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  font-size: 3rem;
  background: var(--fe-bg-subtle);
}
[data-theme="dark"] .fe-obs-card-img-placeholder {
  background: #1c1f26;
}
.fe-obs-card-img-placeholder--needs-id {
  background: var(--fe-accent);
  color: rgba(0, 0, 0, 0.55);
}
.fe-obs-card-img-placeholder-icon {
  font-size: 6rem;
  line-height: 1;
}
[data-theme="dark"] .fe-obs-card-img-placeholder--needs-id {
  background: var(--fe-accent);
  color: rgba(0, 0, 0, 0.55);
}
.fe-obs-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fe-obs-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.fe-obs-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--fe-text);
  flex: 1 1 auto;
  min-width: 0;
}
.fe-obs-card-title-row .fe-obs-likes,
.fe-obs-card-title-row .fe-obs-comments {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  align-self: flex-start;
}
.fe-obs-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
.fe-obs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--fe-bg-subtle);
  border-radius: 2rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  color: var(--fe-muted);
  white-space: nowrap;
}
.fe-obs-tag.accent { background: var(--fe-accent); color: #000; }

/* Link-flavored chip: inherits normal chip styling but behaves as a hover-link. */
a.fe-obs-tag--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.15s ease;
}
a.fe-obs-tag--link:hover,
a.fe-obs-tag--link:focus {
  filter: brightness(0.94);
  text-decoration: none;
}

/* Tinted palette variants for observation meta tags */
.fe-obs-tag--time {
  background: rgba(var(--fe-tone-champagne-rgb), 0.35);
  color: var(--fe-tone-champagne-dark);
}
.fe-obs-tag--user {
  background: rgba(var(--fe-tone-earth-rgb), 0.25);
  color: var(--fe-tone-earth-dark);
}
.fe-obs-tag--depth {
  background: rgba(var(--fe-tone-sage-rgb), 0.28);
  color: var(--fe-tone-sage-dark);
}
.fe-obs-tag--confirmed {
  background: rgba(var(--fe-tone-olive-rgb), 0.22);
  color: var(--fe-tone-olive-dark);
}
.fe-obs-tag--time i,
.fe-obs-tag--user i,
.fe-obs-tag--depth i,
.fe-obs-tag--confirmed i { opacity: 0.85; }

[data-theme="dark"] .fe-obs-card { background: var(--fe-bg-subtle); }
[data-theme="dark"] .fe-obs-tag { background: rgba(255,255,255,0.07); color: var(--fe-muted); }
/* Submitter chip — embedded avatar on the left of the username. */
.fe-obs-tag--submitter { padding-left: .15rem; padding-right: .55rem; }
.fe-obs-tag-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: .35rem;
  background: var(--fe-bg-subtle);
}
[data-theme="dark"] .fe-obs-tag--time,
[data-theme="dark"] .fe-obs-tag--user,
[data-theme="dark"] .fe-obs-tag--depth,
[data-theme="dark"] .fe-obs-tag--confirmed { color: rgba(255,255,255,0.85); }

/* ---- Buttons: dark mode overrides ---- */
[data-theme="dark"] .fe-btn-outline {
  background: rgba(203, 202, 123, 0.1);
  border-color: var(--fe-accent);
  color: var(--fe-accent) !important;
}
[data-theme="dark"] .fe-btn-outline:hover {
  background: var(--fe-accent);
  color: #000 !important;
}
[data-theme="dark"] .fe-btn-outline i {
  background: rgba(255,255,255,0.12);
}
[data-theme="dark"] .fe-btn-outline:hover i {
  background: rgba(0,0,0,0.2);
}

/* ================================ OBSERVATION DETAIL ================================ */
.fe-obs-detail-img {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--fe-bg-subtle);
}
.fe-obs-detail-img img { width: 100%; height: 100%; object-fit: cover; }

/* Detail page photo gallery (sidebar) */
.fe-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fe-detail-gallery-img {
  width: 100%;
  border-radius: 1rem;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.fe-nav-marker, .fe-nav-marker a { pointer-events: auto; cursor: pointer; }
.fe-map-wrap { position: relative; }
.fe-map-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.95);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
.fe-map-expand:hover { background: #fff; }
.fe-map-full { width: 100%; height: 80vh; }

/* Oversized modal dialog used by detail-page map expanders.
   Almost-fullscreen so users can pan/zoom freely without the modal chrome
   stealing too much screen real estate. */
.fe-map-modal-dialog {
  max-width: 96vw;
  width: 96vw;
  margin: 2vh auto;
}
.fe-map-modal-dialog .modal-content {
  height: 96vh;
  display: flex;
  flex-direction: column;
}
.fe-map-modal-dialog .modal-body {
  flex: 1 1 auto;
  padding: 0;
  display: flex;
  min-height: 0;
}
.fe-map-modal-dialog .fe-map-full {
  height: 100%;
  flex: 1 1 auto;
}
.fe-lightbox-anchor { display: block; }
/* GLightbox footer/caption: solid black with white text */
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-inner,
.gslide-description,
.gdesc-inner {
  background: #000 !important;
}
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-desc,
.gslide-title,
.gslide-desc,
.gslide-description * {
  color: #fff !important;
}
.fe-carousel-img {
  aspect-ratio: 16/9;
  object-fit: cover;
}
#org-carousel, #obs-carousel { border-radius: 1rem; overflow: hidden; }
#org-carousel .carousel-control-prev-icon,
#org-carousel .carousel-control-next-icon,
#obs-carousel .carousel-control-prev-icon,
#obs-carousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.4);
  border-radius: 50%;
  padding: 1.25rem;
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.fe-obs-detail-map {
  border-radius: 1rem;
  overflow: hidden;
  height: 700px;
  border: 1px solid var(--fe-border);
}
[data-theme="dark"] .fe-obs-detail-map {
  background: #1a1b26;
}
[data-theme="dark"] .fe-map-full {
  background: #1a1b26;
}

/* ---- Filter Bar (shared across list pages) ---- */
.fe-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.fe-filter-search {
  display: flex;
  gap: 0.5rem;
  flex: 0 1 auto;
  max-width: 280px;
  align-items: center;
}
.fe-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}
.fe-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--fe-text);
  font-size: 0.88rem;
  white-space: nowrap;
}

/* Unified height for input, select, buttons in filter bar */
.fe-filter-bar .fe-input {
  height: 42px;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  box-sizing: border-box;
}
/* fe-btn in filter bar: force perfect circle for button and inner icon */
.fe-filter-search .fe-btn {
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fe-filter-search .fe-btn i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
}

/* View Toggle */
.fe-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.6rem;
  overflow: hidden;
  height: 42px;
  background: #fff;
}
[data-theme="dark"] .fe-view-toggle { background: var(--fe-bg-subtle); }
.fe-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  font-size: 1.15rem;
  color: var(--fe-muted);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fe-view-btn:hover { color: var(--fe-accent) !important; background: rgba(0,0,0,0.04); }
.fe-view-btn.active { color: #000 !important; background: var(--fe-accent); }
.fe-view-btn.active:hover { color: #000 !important; background: var(--fe-accent); opacity: 0.85; }
[data-theme="dark"] .fe-view-btn:hover { color: var(--fe-accent) !important; background: rgba(255,255,255,0.06); }
[data-theme="dark"] .fe-view-btn.active { color: #000 !important; background: var(--fe-accent); }
[data-theme="dark"] .fe-view-btn.active:hover { color: #000 !important; opacity: 0.85; }

/* Sort Select */
select.fe-input {
  width: auto;
  padding-right: 2.2rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  cursor: pointer;
}
select.fe-input:focus { border-color: var(--fe-accent); }
.fe-sort-select { min-width: 160px; }

/* ---- Frontend Table ---- */
/* ---- List View (compact card-rows with thumbnail) ---- */
.fe-list-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fe-list-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.fe-list-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  color: inherit;
  text-decoration: none;
}
[data-theme="dark"] .fe-list-row { background: var(--fe-bg-subtle); }
[data-theme="dark"] a.fe-list-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

.fe-list-thumb {
  width: 72px;
  height: 54px;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fe-bg-subtle);
  position: relative;
}
.fe-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-list-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fe-muted);
  font-size: 1.4rem;
}
.fe-list-thumb-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 0.75rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}
.fe-list-thumb-badge i { font-size: 0.72rem; }

.fe-list-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fe-bg-subtle);
  color: var(--fe-muted);
  font-size: 1.2rem;
}
[data-theme="dark"] .fe-list-icon { background: rgba(255,255,255,0.06); }

.fe-list-content {
  flex: 1;
  min-width: 0;
}
.fe-list-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fe-primary);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.fe-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.fe-list-row-sub { margin-left: 2rem; opacity: 0.8; }

/* ---- Advanced search (observations list) ---- */
.fe-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fe-link);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.fe-advanced-toggle:hover { color: var(--fe-primary); }
.fe-filter-count {
  font-size: 0.88rem;
  white-space: nowrap;
  margin-right: 0.25rem;
}
.fe-advanced-toggle .fe-advanced-chevron {
  transition: transform 0.2s;
  font-size: 0.95rem;
}
.fe-advanced-toggle.is-open .fe-advanced-chevron { transform: rotate(180deg); }

.fe-advanced-panel {
  flex: 1 1 100%;
  display: none;
  background: #fff;
  border: 1.5px solid var(--fe-border);
  border-radius: 0.8rem;
  padding: 1.25rem;
  margin-top: 0.25rem;
}
[data-theme="dark"] .fe-advanced-panel { background: var(--fe-bg-subtle); }
.fe-advanced-panel.is-open { display: block; }

/* Avoid duplicate Suchen/Zurücksetzen buttons: when the advanced panel is
   open, the panel's own submit/reset take over, so hide the inline ones
   from the top search row. */
.fe-filter-bar:has(.fe-advanced-panel.is-open) .fe-filter-search .fe-btn {
  display: none;
}

.fe-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem 1rem;
}
.fe-advanced-field { display: flex; flex-direction: column; gap: 0.3rem; }
.fe-advanced-field--wide { grid-column: 1 / -1; }
.fe-advanced-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fe-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.fe-advanced-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.5rem;
}
.fe-advanced-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---- Active filter chips ---- */
.fe-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.65rem 0.85rem;
  background: rgba(var(--fe-tone-champagne-rgb), 0.2);
  border-radius: 0.6rem;
}
.fe-filter-chips-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fe-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}
.fe-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 999px;
  padding: 0.2rem 0.35rem 0.2rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--fe-text);
}
[data-theme="dark"] .fe-filter-chip { background: var(--fe-bg-subtle); }
.fe-filter-chip-label { color: var(--fe-muted); font-weight: 500; }
.fe-filter-chip-value { font-weight: 600; color: var(--fe-text); }
.fe-filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--fe-muted);
  background: transparent;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.fe-filter-chip-remove:hover { background: var(--fe-accent); color: #000; }
.fe-filter-chips-clear {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--fe-muted);
  text-decoration: underline;
}
.fe-filter-chips-clear { color: var(--fe-link); }
.fe-filter-chips-clear:hover { color: var(--fe-primary); }

.fe-results-count { font-size: 0.88rem; }

/* ---- Map view ---- */
.fe-map-view {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.fe-map-view-help {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
}
.fe-map-view-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .fe-map-view-split { grid-template-columns: 1fr; }
}
.fe-obs-map {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border-radius: 0.6rem;
  border: 1.5px solid var(--fe-border);
  overflow: hidden;
  position: relative;
}
/* Touch-locked map hint badge: rules live in spotter.css so they apply to
   both frontend and backend maps. */
.fe-map-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
.fe-map-view-count {
  font-size: 0.88rem;
  color: var(--fe-muted);
}
.fe-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  font-size: 0.78rem;
  color: var(--fe-muted);
  padding: 0.4rem 0.55rem;
  background: transparent;
  border-radius: 0.45rem;
}
.fe-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--fe-border);
  color: var(--fe-text);
  font-size: inherit;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0.45;
}
.fe-map-legend-item.is-active { opacity: 1; border-color: var(--fe-accent-dark); }
.fe-map-legend-item:hover { border-color: var(--fe-accent-dark); }
[data-theme="dark"] .fe-map-legend-item { background: var(--fe-bg); }
.fe-map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid rgba(0,0,0,0.15);
}
.fe-rel-own        { background: var(--fe-tone-sage-dark); }
.fe-rel-confirmed  { background: var(--fe-tone-copper-dark); }
.fe-rel-organisation { background: var(--fe-tone-mustard-dark); }
.fe-rel-foreign    { background: var(--fe-accent); }
.fe-pt-meeting     { background: var(--fe-tone-sage-dark); }
.fe-pt-start       { background: var(--fe-tone-mustard-dark); }
.fe-pt-end         { background: var(--fe-tone-copper-dark); }

/* Activity map markers: circular pin with white icon. The kind modifier
   colors match the legend dots so users can read the map at a glance. */
.fe-pt-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.fe-pt-marker--meeting { background: var(--fe-tone-sage-dark); }
.fe-pt-marker--start   { background: var(--fe-tone-mustard-dark); }
.fe-pt-marker--end     { background: var(--fe-tone-copper-dark); }
.fe-pt-marker--obs     { background: var(--fe-tone-olive-dark); }

/* Activity-marker popup: full-bleed coloured header + padded body.
   We zero the wrapper padding and content margin via :has() so the kind
   header can extend cleanly to the rounded corners. The body re-applies
   its own gutter. Observations popups (no kind header) keep their default
   styling. */
.leaflet-popup-content-wrapper:has(.fe-map-popup-kind) {
  padding: 0;
  overflow: hidden;
}
.leaflet-popup-content-wrapper:has(.fe-map-popup-kind) > .leaflet-popup-content {
  margin: 0;
}
.fe-map-popup-kind {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 2.6rem 0.5rem 0.85rem;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.25;
  min-height: 2.4rem;
}
/* All popup kinds share the same scheme: white header with primary-dark
   text + primary-dark close button. The matching close button rule is
   defined AFTER the generic close-button rule below to win over its
   `color: #fff` at equal specificity. Marker-icon colours on the map
   continue to differentiate kinds; the popup header itself is neutral. */
.fe-map-popup-kind--organisation,
.fe-map-popup-kind--observation,
.fe-map-popup-kind--obs,
.fe-map-popup-kind--meeting,
.fe-map-popup-kind--start,
.fe-map-popup-kind--end {
  background: #fff;
  color: var(--fe-primary-dark);
}
.fe-map-popup-kind--organisation .fe-map-popup-kind-title,
.fe-map-popup-kind--organisation .fe-map-popup-kind-label,
.fe-map-popup-kind--organisation .fe-map-popup-kind-location,
.fe-map-popup-kind--observation .fe-map-popup-kind-title,
.fe-map-popup-kind--observation .fe-map-popup-kind-label,
.fe-map-popup-kind--observation .fe-map-popup-kind-location,
.fe-map-popup-kind--meeting .fe-map-popup-kind-title,
.fe-map-popup-kind--meeting .fe-map-popup-kind-label,
.fe-map-popup-kind--meeting .fe-map-popup-kind-location,
.fe-map-popup-kind--start .fe-map-popup-kind-title,
.fe-map-popup-kind--start .fe-map-popup-kind-label,
.fe-map-popup-kind--start .fe-map-popup-kind-location,
.fe-map-popup-kind--end .fe-map-popup-kind-title,
.fe-map-popup-kind--end .fe-map-popup-kind-label,
.fe-map-popup-kind--end .fe-map-popup-kind-location {
  color: var(--fe-primary-dark);
}

/* Organiser-type badge colors. Used in: organiser map popup (top of body),
   side list and grid card. The colour distinguishes dive centres, live-
   aboards and wildlife-watching providers at a glance. */
.fe-obs-tag.fe-org-type--divecenter,
.fe-obs-tag.fe-org-type--liveaboard,
.fe-obs-tag.fe-org-type--marinewildlifewatching {
  color: #fff;
  border-color: transparent;
}
.fe-obs-tag.fe-org-type--divecenter            { background: var(--fe-tone-sage-dark); }
.fe-obs-tag.fe-org-type--liveaboard            { background: var(--fe-tone-mustard-dark); }
.fe-obs-tag.fe-org-type--marinewildlifewatching { background: var(--fe-tone-copper-dark); }

/* Activity-status badge colours. Distinct from the accent-coloured Details
   button so the two never look the same in a popup. The list, popup and
   grid card all share these classes for a consistent reading. */
.fe-obs-tag.fe-act-status--PLANNED,
.fe-obs-tag.fe-act-status--OPEN,
.fe-obs-tag.fe-act-status--FULLYBOOKED,
.fe-obs-tag.fe-act-status--STARTED,
.fe-obs-tag.fe-act-status--FINISHED,
.fe-obs-tag.fe-act-status--CANCELED {
  color: #fff;
  border-color: transparent;
}
.fe-obs-tag.fe-act-status--PLANNED      { background: var(--fe-tone-sage-dark); }
.fe-obs-tag.fe-act-status--OPEN         { background: var(--fe-tone-sage-dark); }
.fe-obs-tag.fe-act-status--FULLYBOOKED  { background: var(--fe-tone-mustard-dark); }
.fe-obs-tag.fe-act-status--STARTED      { background: var(--fe-tone-copper-dark); }
.fe-obs-tag.fe-act-status--FINISHED     { background: var(--fe-muted); }
.fe-obs-tag.fe-act-status--CANCELED     { background: #8a3a3a; }
.fe-map-popup-kind-text { display: flex; flex-direction: column; min-width: 0; }
.fe-map-popup-kind-label {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.fe-map-popup-kind-location {
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.92;
  margin-top: 0.05rem;
}
/* Used by the list-map popup, where the activity title sits in the
   coloured header (no kind icon/label). */
.fe-map-popup-kind-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.fe-map-popup-body {
  padding: 0.6rem 0.85rem 0.7rem;
  display: flex;
  flex-direction: column;
}

/* Leaflet close button on the coloured kind header: a square 28×28 chip
   with the × visually centred — matches the header height so it sits in
   line with the title text. */
.leaflet-popup:has(.fe-map-popup-kind) .leaflet-popup-close-button {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  top: 4px;
  right: 4px;
  padding: 0;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.leaflet-popup:has(.fe-map-popup-kind) .leaflet-popup-close-button:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.15);
}
/* All kinds: close button uses primary-dark on the white header. Placed
   after the generic rule above so that, at equal specificity, this later
   definition wins. */
.leaflet-popup:has(.fe-map-popup-kind--organisation) .leaflet-popup-close-button,
.leaflet-popup:has(.fe-map-popup-kind--observation) .leaflet-popup-close-button,
.leaflet-popup:has(.fe-map-popup-kind--meeting) .leaflet-popup-close-button,
.leaflet-popup:has(.fe-map-popup-kind--start) .leaflet-popup-close-button,
.leaflet-popup:has(.fe-map-popup-kind--end) .leaflet-popup-close-button {
  color: var(--fe-primary-dark);
  text-shadow: none;
}
.leaflet-popup:has(.fe-map-popup-kind--organisation) .leaflet-popup-close-button:hover,
.leaflet-popup:has(.fe-map-popup-kind--observation) .leaflet-popup-close-button:hover,
.leaflet-popup:has(.fe-map-popup-kind--meeting) .leaflet-popup-close-button:hover,
.leaflet-popup:has(.fe-map-popup-kind--start) .leaflet-popup-close-button:hover,
.leaflet-popup:has(.fe-map-popup-kind--end) .leaflet-popup-close-button:hover {
  color: var(--fe-accent-dark);
  background: rgba(139, 138, 61, 0.08);
}
.fe-map-popup-location {
  font-size: 0.85rem;
  color: var(--fe-text);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fe-map-popup-location i { color: var(--fe-muted); }
.fe-map-popup-desc {
  font-size: 0.8rem;
  color: var(--fe-muted);
  margin: 0.3rem 0 0.45rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fe-map-list {
  overflow-y: auto;
  max-height: 70vh;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 0.25rem;
}
.fe-map-list-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.88rem;
}
.fe-map-list-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.45rem 0.5rem;
  background: transparent;
  border: 1px solid var(--fe-border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--fe-text);
  transition: border-color 0.15s, background 0.15s;
}
.fe-map-list-item:hover {
  border-color: var(--fe-accent-dark);
  background: rgba(var(--fe-tone-champagne-rgb), 0.2);
}
[data-theme="dark"] .fe-map-list-item { background: var(--fe-bg-subtle); }
.fe-map-list-thumb {
  width: 96px;
  height: 96px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fe-bg-subtle);
}
.fe-map-list-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fe-accent);
  color: rgba(0, 0, 0, 0.55);
  font-size: 2rem;
}
.fe-map-list-body { min-width: 0; flex: 1 1 auto; }
.fe-map-list-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--fe-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-map-list-meta {
  font-size: 0.78rem;
  color: var(--fe-muted);
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.fe-map-list-item.is-selected {
  border-color: var(--fe-accent-dark);
  background: rgba(var(--fe-tone-champagne-rgb), 0.35);
  box-shadow: 0 0 0 2px var(--fe-accent);
}
[data-theme="dark"] .fe-map-list-item.is-selected {
  background: rgba(var(--fe-tone-champagne-rgb), 0.18);
}
.fe-map-list-item .fe-map-list-thumb {
  width: 96px;
  height: 96px;
}

/* Like + comment badges in the map list reuse the grid-card pills.
   They sit in the natural flex flow on the right side of the row so they
   never overlap the title. */
.fe-map-list-social {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  flex-shrink: 0;
}

/* Leaflet popup: rich content (mirrors grid card body) */
.fe-map-popup { min-width: 220px; max-width: 300px; }
.fe-map-popup-thumb-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}
/* Full-width variant: thumb sits between the coloured kind header and the
   padded body, flush to both side edges of the popup wrapper. */
.fe-map-popup-thumb-wrap--full {
  margin: 0;
}
.fe-map-popup-thumb {
  width: 100%;
  border-radius: 0.35rem;
  display: block;
  max-height: 140px;
  object-fit: cover;
}
/* Flush thumb (used in the full-width variant): no inner rounded corners,
   so the image meets the popup edges cleanly. The popup wrapper's own
   overflow:hidden still clips the bottom corners if the thumb is the
   last element before the body. */
.fe-map-popup-thumb--flush {
  border-radius: 0;
  max-height: 180px;
}
.fe-map-popup-thumb-wrap .fe-obs-card-badges {
  top: 0.4rem;
  right: 0.4rem;
}
.fe-map-popup-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fe-primary);
  margin-bottom: 0.4rem;
}
.fe-map-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
}
.fe-map-popup-btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  margin-top: 0.75rem;
  margin-left: auto;
  align-self: flex-end;
}
/* Footer row: status badge on the left, action button on the right. */
.fe-map-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.fe-map-popup-footer .fe-map-popup-btn {
  margin: 0;
  align-self: auto;
}
.fe-map-popup { display: flex; flex-direction: column; }
.leaflet-popup-content { margin: 0.7rem 0.85rem; }

/* ---- Classification (observation detail sidebar) ---- */
/* ---- Avatars: always round ---- */
.fe-page .avatar {
  border-radius: 50% !important;
}

/* ---- Avatar in tags ---- */
.fe-avatar-tag {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---- Media list (observation detail, stacked images) ---- */
.fe-media-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fe-media-item { }
.fe-media-img {
  width: 100%;
  border-radius: 0.75rem;
  display: block;
  object-fit: cover;
  max-height: 400px;
}
video.fe-media-img {
  object-fit: contain;
  background: #000;
}
.fe-media-player-wrap { position: relative; }
.fe-media-thumb-overlay {
  position: relative;
  cursor: pointer;
}
.fe-media-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  backdrop-filter: blur(4px);
  transition: transform 0.15s;
}
.fe-media-thumb-overlay:hover .fe-media-play-btn { transform: translate(-50%, -50%) scale(1.1); }
.fe-media-hidden { display: none; }
.fe-media-audio-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--fe-bg-subtle);
  border-radius: 0.75rem;
}
.fe-media-audio-wrap audio { flex: 1; }
.fe-media-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.fe-media-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fe-text);
  font-weight: 500;
  min-width: 0;
  flex: 1;
}
.fe-media-filename {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.fe-media-description {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  color: var(--fe-text);
  line-height: 1.5;
}

.fe-content-label {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fe-accent);
  margin: 1.25rem 0 0.5rem;
}
.fe-img-caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--fe-muted);
  letter-spacing: 0.02em;
}
.fe-classification-img {
  width: 100%;
  border-radius: 0.75rem;
  display: block;
}
/* Taxonomy tree (vertical, indented with connectors) */
.fe-taxonomy-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The deepest branches are fifteen levels. Should a future taxonomy go deeper
     still, the tree scrolls inside its own box rather than pushing the page
     into a horizontal scrollbar. */
  overflow-x: auto;
}
.fe-taxonomy-node {
  position: relative;
  padding: 0.15rem 0 0.15rem 1.2rem;
  font-size: 0.88rem;
  color: var(--fe-text);
  line-height: 1.3;
}
/* Indentation, one step per level of the hierarchy.

   This used to be twelve hand-written nth-child rules, which silently stopped
   indenting at the thirteenth entry: the Büffelkopf-Papageifisch sits fourteen
   levels deep, so its last two nodes fell back to the left margin and the
   branch read as if it had ended. 251 of 2576 taxa are deeper than twelve
   levels.

   The template now states the depth as --fe-depth and nothing else; how wide a
   step is stays a question for the stylesheet. That split is what lets the step
   shrink on narrow screens: at fifteen levels a full 1rem step pushed the
   deepest node out of its box on a phone and put a horizontal scrollbar on the
   whole page. */
.fe-taxonomy-node {
  margin-left: calc(var(--fe-depth, 0) * 1rem);
}
@media (max-width: 575.98px) {
  .fe-taxonomy-node {
    margin-left: calc(var(--fe-depth, 0) * 0.6rem);
  }
}
.fe-taxonomy-node::before {
  content: '└';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fe-border);
  font-size: 0.85rem;
  line-height: 1;
}
.fe-taxonomy-node.fe-taxonomy-current {
  color: var(--fe-accent);
}
/* Full width and clearly detached: the point is that it must not read as just
   another entry in the hierarchy above it. The rule sits on the ::before, not
   on the button, so the button keeps its own background and radius. */
.fe-taxonomy-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
  position: relative;
}
.fe-taxonomy-cta::before {
  content: '';
  position: absolute;
  top: -1.25rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--fe-border);
}
/* Specificity must beat the global "body.fe-page a" rule (Z. 159) so the
   taxonomy nodes inherit the surrounding text color and only switch to the
   accent on hover/focus. */
body.fe-page .fe-taxonomy-node a,
body.fe-page .fe-taxonomy-node a:visited {
  color: inherit;
}
body.fe-page .fe-taxonomy-node a:hover,
body.fe-page .fe-taxonomy-node a:focus {
  color: var(--fe-link);
}
/* Current (own) node: darker idle, lighter on hover. */
body.fe-page .fe-taxonomy-node.fe-taxonomy-current a {
  color: var(--fe-link);
}
body.fe-page .fe-taxonomy-node.fe-taxonomy-current a:hover,
body.fe-page .fe-taxonomy-node.fe-taxonomy-current a:focus {
  color: var(--fe-accent);
}
/* External-source list on classification detail page. Patterned after the
   admin maintenance card: each row has a label + description on the left and
   a single action button on the right. */
.fe-external-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fe-external-links > li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--fe-border);
}
.fe-external-links > li:first-child { border-top: 0; }
.fe-external-links .fe-external-link-info {
  flex: 1;
  min-width: 0;
}
.fe-external-links .fe-external-link-name {
  font-weight: 600;
  color: var(--fe-text);
}
.fe-external-links .fe-external-link-desc {
  display: block;
  color: var(--fe-text);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}
.fe-external-links .fe-external-link-cta {
  flex-shrink: 0;
  /* Force perfectly circular icon button (default fe-btn shape can come out
     a few px taller than wide because of icon line-height). */
  aspect-ratio: 1;
  justify-content: center;
  padding: 0.5rem;
}
.fe-taxonomy-rank {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fe-muted);
  min-width: 4.5rem;
  margin-right: 0.35rem;
}

/* ---- Pricing Table (Tabler card-table pattern) ---- */
.fe-page .card {
  color: var(--fe-text);
  border-color: var(--fe-border);
  border-radius: 1rem;
}
[data-theme="dark"] .fe-page .card {
  background: var(--fe-bg-subtle);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .table {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .table td,
[data-theme="dark"] .fe-page .card .table th {
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .card h2 {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .display-6 {
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .card .btn {
  color: var(--fe-text);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .card .btn-primary {
  color: #000;
}

/* Dark mode overrides for generic Frontend .card / table styling */
[data-theme="dark"] .fe-page .fe-section .card,
[data-theme="dark"] .fe-page .card.card-table {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .fe-section .card-header,
[data-theme="dark"] .fe-page .fe-section .card-footer {
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .table td,
[data-theme="dark"] .fe-page .table th {
  background: transparent;
  color: var(--fe-text);
  border-color: var(--fe-border);
}
[data-theme="dark"] .fe-page .table h2,
[data-theme="dark"] .fe-page .table .display-6,
[data-theme="dark"] .fe-page .modal-title { color: #fff; }
[data-theme="dark"] .fe-page .text-secondary { color: rgba(255,255,255,0.55) !important; }

/* Form controls in dark mode */
[data-theme="dark"] .fe-page .form-control {
  background: var(--fe-bg);
  border-color: var(--fe-border);
  color: #eee;
}
[data-theme="dark"] .fe-page .form-control::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fe-page .form-label { color: rgba(255,255,255,0.8); }
[data-theme="dark"] .fe-page .form-hint { color: rgba(255,255,255,0.5); }

/* Modals in dark mode */
[data-theme="dark"] .fe-page .modal-content {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-page .modal-header,
[data-theme="dark"] .fe-page .modal-footer { border-color: var(--fe-border); }

/* ========================================================================
   USER DROPDOWN (frontend header)
   ======================================================================== */
.fe-user-dropdown { position: relative; }

.fe-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.4rem;
  border: 2px solid var(--fe-accent);
  border-radius: 999px;
  background: var(--fe-accent);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fe-user-trigger:hover,
.fe-user-trigger[aria-expanded="true"] {
  background: #dedd97;
  border-color: #dedd97;
  color: #000;
}
.fe-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
}
.fe-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-user-caret { font-size: 0.9rem; opacity: 0.7; }

.fe-user-menu.dropdown-menu {
  margin-top: 0.5rem;
  min-width: 220px;
  background: rgba(10,15,25,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fe-user-menu .dropdown-item {
  color: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.fe-user-menu .dropdown-item:hover,
.fe-user-menu .dropdown-item:focus {
  background: rgba(203,202,123,0.15);
  color: #fff;
}
.fe-user-menu .dropdown-item i {
  color: var(--fe-accent);
  font-size: 1.1rem;
}
.fe-user-menu .dropdown-divider {
  border-color: rgba(255,255,255,0.1);
  margin: 0.35rem 0;
}

/* Project submenu (top nav dropdown) — matches user dropdown look */
.fe-nav-submenu.dropdown-menu {
  margin-top: 0.5rem;
  min-width: 200px;
  background: rgba(10,15,25,0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.fe-nav-submenu .dropdown-item {
  color: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  background: transparent;
}
.fe-nav-submenu .dropdown-item:hover,
.fe-nav-submenu .dropdown-item:focus,
.fe-nav-submenu .dropdown-item.active {
  background: rgba(203,202,123,0.15);
  color: #fff;
}

/* Hide the dropdown name on very small screens */
@media (max-width: 420px) {
  .fe-user-name, .fe-user-caret { display: none; }
  .fe-user-trigger { padding: 0.35rem; }
}

/* ========================================================================
   FRONTEND CARDS (Tabler .card adapted to frontend look)
   Used on profile and future settings pages.
   ======================================================================== */
.fe-page .fe-section .card {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 1rem;
  box-shadow: none;
  overflow: hidden;
}
.fe-page .fe-section .card-header {
  background: transparent;
  border-bottom: 1px solid var(--fe-border);
  padding: 1.1rem 1.4rem;
}
.fe-page .fe-section .card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #8B8A3D;
  margin: 0;
}
.fe-page .fe-section .card-body { padding: 1.4rem; }
.fe-page .fe-section .card-footer {
  background: transparent;
  border-top: 1px solid var(--fe-border);
  padding: 1rem 1.4rem;
}
.fe-page .btn { border-radius: 999px; }
.fe-page .fe-section .btn-primary {
  background: #8B8A3D;
  border-color: #8B8A3D;
  color: #fff;
}
.fe-page .fe-section .btn-primary:hover,
.fe-page .fe-section .btn-primary:focus {
  background: #6b6a2e;
  border-color: #6b6a2e;
  color: #fff;
}
.fe-page .fe-section .btn-outline-primary {
  color: #6b6a2e;
  border-color: #8B8A3D;
  background: transparent;
}
.fe-page .fe-section .btn-outline-primary:hover,
.fe-page .fe-section .btn-outline-primary:focus {
  background: #8B8A3D;
  border-color: #8B8A3D;
  color: #fff;
}

/* Profile avatar with hover-overlay actions */
.fe-profile-avatar-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.fe-profile-avatar {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.fe-profile-avatar-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding-bottom: 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 75%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fe-profile-avatar-wrap:hover .fe-profile-avatar-actions,
.fe-profile-avatar-wrap:focus-within .fe-profile-avatar-actions {
  opacity: 1;
}
.fe-profile-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: #333;
  border: 0;
  padding: 0;
  font-size: 1rem;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fe-profile-avatar-btn:hover,
.fe-profile-avatar-btn:focus {
  background: #fff;
  color: #000;
  transform: scale(1.1);
}
/* Delete button: always red icon, red fill on hover */
.fe-profile-avatar-btn[type="submit"] {
  color: #b02a37;
}
.fe-profile-avatar-btn[type="submit"]:hover,
.fe-profile-avatar-btn[type="submit"]:focus {
  background: #b02a37;
  color: #fff;
}

/* Profile settings: sidebar nav + tab content */
.fe-profile-nav .list-group-item {
  color: #555;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  font-weight: 500;
  margin-bottom: 0.15rem;
}
.fe-profile-nav .list-group-item:hover {
  background: rgba(139,138,61,0.08);
  color: #333;
}
.fe-profile-nav .list-group-item.active {
  background: rgba(139,138,61,0.15);
  color: #6b6a2e;
  font-weight: 700;
}
.fe-profile-nav .list-group-item i { color: #8B8A3D; }

/* Dominant tab-heading + breathing room below.
   Scoped to the direct child of .tab-pane so nested cards
   (e.g. the danger zone) keep their normal title styling. */
.fe-page .fe-section .tab-pane > .card-body > .card-title,
.fe-page .fe-section .tab-pane > form > .card-body > .card-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #6b6a2e;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--fe-border);
}

/* Dark mode tweaks */
[data-theme="dark"] .fe-profile-nav .list-group-item { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .fe-profile-nav .list-group-item:hover {
  background: rgba(203,202,123,0.1);
  color: #fff;
}
[data-theme="dark"] .fe-profile-nav .list-group-item.active {
  background: rgba(203,202,123,0.18);
  color: #fff;
}
[data-theme="dark"] .fe-page .fe-section .tab-pane > .card-body > .card-title,
[data-theme="dark"] .fe-page .fe-section .tab-pane > form > .card-body > .card-title {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.1);
}

/* Favorite cards (profile / favorites tab) */
.fe-fav-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  overflow: hidden;
}
.fe-fav-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--fe-bg-subtle);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.fe-fav-img-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fe-fav-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(139,138,61,0.35);
  font-size: 3rem;
}
.fe-fav-body {
  padding: 0.6rem 0.75rem 0.75rem;
}
.fe-fav-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.fe-fav-card:hover .fe-fav-remove,
.fe-fav-card:focus-within .fe-fav-remove {
  opacity: 1;
}
.fe-fav-remove .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 1rem;
  background: rgba(255,255,255,0.85);
  border: 0;
  backdrop-filter: blur(6px);
  color: #b02a37;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.fe-fav-remove .btn:hover,
.fe-fav-remove .btn:focus {
  background: #b02a37;
  color: #fff;
  transform: scale(1.1);
}

[data-theme="dark"] .fe-fav-card { background: var(--fe-bg-subtle); border-color: var(--fe-border); }
[data-theme="dark"] .fe-fav-img { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .fe-fav-remove .btn { background: rgba(0,0,0,0.55); color: #ff8a95; }
[data-theme="dark"] .fe-fav-remove .btn:hover,
[data-theme="dark"] .fe-fav-remove .btn:focus { background: #b02a37; color: #fff; }

/* ===== Species picker: split layout inside modals ===== */
.modal-dialog:has(.fe-species-picker) {
  max-width: min(1400px, 95vw);
}
.modal .fe-species-picker-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem;
  align-items: stretch;
  height: min(640px, 60vh);
  padding: 0.75rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.modal .fe-species-picker-pane-results {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal .fe-species-picker-pane-results .fe-picker-scroll-wrap {
  flex: 1;
  min-height: 0;
}
.modal .fe-species-picker-pane-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal .fe-species-picker-pane-details .fe-picker-scroll-wrap {
  flex: 1;
  min-height: 0;
}
.modal .fe-species-picker-pane-details .fe-species-picker-details {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Custom scrollbar: native scrollbars hidden, JS draws an always-visible
   thumb track at the right edge — works on macOS, iOS and every other OS
   regardless of OS overlay-scrollbar settings. See species-picker.js. */
.fe-picker-scroll-wrap {
  position: relative;
  height: 100%;
}
.fe-picker-scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fe-picker-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fe-picker-scroll-track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background: #ececec;
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}
.fe-picker-scroll-thumb {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--fe-accent-dark);
  border-radius: 4px;
  pointer-events: auto;
  cursor: grab;
}
.fe-picker-scroll-thumb:hover { background: var(--fe-text); }
.fe-picker-scroll-thumb.is-dragging { cursor: grabbing; }
.fe-picker-scroll-track.is-empty { display: none; }
.fe-species-picker .fe-species-picker-hint {
  font-weight: 500;
}
.modal .fe-species-picker-results > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
.modal .fe-species-picker-details {
  margin-top: 0;
}
@media (max-width: 768px) {
  .modal .fe-species-picker-body {
    grid-template-columns: 1fr;
    height: auto;
  }
  .modal .fe-species-picker-pane-results,
  .modal .fe-species-picker-pane-details {
    height: auto;
  }
  .modal .fe-species-picker-pane-results .fe-picker-scroll-wrap,
  .modal .fe-species-picker-pane-details .fe-picker-scroll-wrap {
    flex: none;
    height: 40vh;
  }
}

/* ===== Species picker: list rows ===== */
.fe-species-pick-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  text-align: left;
  color: var(--fe-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.fe-species-pick-row:hover,
.fe-species-pick-row:focus-visible {
  border-color: var(--fe-accent);
  background: rgba(203, 202, 123, 0.08);
  color: var(--fe-text);
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fe-species-pick-row.is-selected {
  border-color: var(--fe-accent);
  background: rgba(203, 202, 123, 0.15);
  color: var(--fe-text);
  box-shadow: inset 0 0 0 1px var(--fe-accent);
}
.fe-species-pick-row-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--fe-bg-subtle);
  display: inline-block;
  position: relative;
}
.fe-species-pick-row-thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  display: block;
}
.fe-species-pick-row-text {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.fe-species-pick-row-name {
  font-weight: 600;
  color: var(--fe-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-species-pick-row-sci {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--fe-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-species-pick-row-chevron {
  color: var(--fe-muted);
  flex-shrink: 0;
}
.fe-species-pick-row.is-selected .fe-species-pick-row-chevron,
.fe-species-pick-row:hover .fe-species-pick-row-chevron {
  color: var(--fe-accent);
}
[data-theme="dark"] .fe-species-pick-row {
  background: var(--fe-bg-subtle);
  color: var(--fe-text);
}
[data-theme="dark"] .fe-species-pick-row:hover,
[data-theme="dark"] .fe-species-pick-row.is-selected {
  background: rgba(203, 202, 123, 0.22);
  color: var(--fe-text);
}

/* ===== Species picker: details pane ===== */
.fe-species-picker-details {
  background: #fff;
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
}
[data-theme="dark"] .fe-species-picker-details {
  background: var(--fe-bg-subtle);
  border-color: var(--fe-border);
}
.fe-species-picker-name {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.15rem;
  color: var(--fe-text);
}
.fe-species-picker-sci {
  font-style: italic;
  color: var(--fe-muted);
  margin-bottom: 0.75rem;
}
.fe-species-picker-desc {
  margin-bottom: 1rem;
  color: var(--fe-text);
}
.fe-species-picker-desc:empty { display: none; }
.fe-species-picker-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: start;
}
.fe-species-picker-img-anchor,
.fe-species-picker-dist-anchor {
  display: block;
  text-decoration: none;
  cursor: zoom-in;
}
.fe-species-picker-media .s-thumb-flag,
.fe-species-picker-media .fe-species-picker-dist-col {
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--fe-bg-subtle);
}
.fe-species-picker-img,
.fe-species-picker-dist {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
}
.fe-species-picker-traits .fe-imprint-section {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.fe-species-picker-traits .fe-imprint-heading {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.fe-species-picker-wiki {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--fe-link);
  text-decoration: none;
}
.fe-species-picker-wiki:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
  .fe-species-picker-media { grid-template-columns: 1fr; }
  .fe-species-picker-img,
  .fe-species-picker-dist { height: 160px; }
}

/* Pricing: Individual hero card — earth tone */
.fe-pricing-hero--individual {
  border: 1px solid rgba(var(--fe-tone-earth-rgb), 0.25);
  border-radius: 1rem;
  overflow: hidden;
}
.fe-pricing-hero-top {
  background: rgba(var(--fe-tone-earth-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--fe-tone-earth-rgb), 0.4);
}
[data-theme="dark"] .fe-pricing-hero-top {
  background: rgba(var(--fe-tone-earth-rgb), 0.22);
  border-bottom-color: rgba(var(--fe-tone-earth-rgb), 0.45);
}

/* Tier-Name (BASIC, PRO, PREMIUM) — bold + larger */
.fe-pricing-tier-name {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #333;
}
[data-theme="dark"] .fe-pricing-tier-name { color: #fff; }

/* Recommended tier (Pro) highlighting */
.fe-pricing-recommended {
  position: relative;
  background: rgba(139,138,61,0.08);
  box-shadow: inset 0 0 0 2px #8B8A3D;
}
.fe-pricing-badge {
  display: inline-block;
  background: #8B8A3D;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Carry the highlight through ALL rows (thead + tbody) */
.fe-pricing-table td:nth-child(3) {
  background: rgba(139,138,61,0.05);
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D;
}
.fe-pricing-table thead tr:first-child td:nth-child(3) {
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D, inset 0 2px 0 #8B8A3D;
}
.fe-pricing-table tbody tr:last-child td:nth-child(3) {
  box-shadow: inset 2px 0 0 #8B8A3D, inset -2px 0 0 #8B8A3D, inset 0 -2px 0 #8B8A3D;
}

[data-theme="dark"] .fe-pricing-recommended { background: rgba(203,202,123,0.12); box-shadow: inset 0 0 0 2px #CBCA7B; }
[data-theme="dark"] .fe-pricing-badge { background: #CBCA7B; color: #000; }
[data-theme="dark"] .fe-pricing-table td:nth-child(3) { background: rgba(203,202,123,0.06); box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B; }
[data-theme="dark"] .fe-pricing-table thead tr:first-child td:nth-child(3) { box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B, inset 0 2px 0 #CBCA7B; }
[data-theme="dark"] .fe-pricing-table tbody tr:last-child td:nth-child(3) { box-shadow: inset 2px 0 0 #CBCA7B, inset -2px 0 0 #CBCA7B, inset 0 -2px 0 #CBCA7B; }

/* Feature group heading rows in pricing table */
.fe-pricing-group-row td {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8B8A3D;
  padding: 0.75rem 1rem 0.4rem !important;
  background: rgba(139,138,61,0.06) !important;
  border-bottom: 1px solid rgba(139,138,61,0.2) !important;
}
[data-theme="dark"] .fe-pricing-group-row td {
  color: #CBCA7B;
  background: rgba(203,202,123,0.08) !important;
  border-bottom-color: rgba(203,202,123,0.25) !important;
}

/* Feature description column: narrower + allows line breaks */
.fe-pricing-feature-col {
  width: 40%;
  white-space: normal;
  line-height: 1.4;
}
.fe-pricing-table th, .fe-pricing-table td {
  white-space: normal;
}

/* Commercial pricing table header row — sage */
.fe-pricing-thead--commercial tr > td {
  background: rgba(var(--fe-tone-sage-rgb), 0.18);
  border-bottom: 2px solid rgba(var(--fe-tone-sage-rgb), 0.5) !important;
}
.fe-pricing-hero-icon--commercial {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background: var(--fe-tone-earth);
  color: #fff;
  font-size: 2rem;
}
[data-theme="dark"] .fe-pricing-thead--commercial tr > td {
  background: rgba(var(--fe-tone-sage-rgb), 0.22);
  border-bottom-color: rgba(var(--fe-tone-sage-rgb), 0.5) !important;
}
[data-theme="dark"] .fe-pricing-hero-icon--commercial {
  background: var(--fe-tone-earth);
  color: #fff;
}
.fe-pricing-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(var(--fe-tone-sage-rgb), 0.22);
  color: var(--fe-tone-sage-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.fe-pricing-hero-eyebrow {
  color: var(--fe-tone-earth-dark);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.fe-pricing-hero-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
}
.fe-pricing-hero-desc {
  color: var(--fe-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Feature list with green check circles */
.fe-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--fe-text);
  line-height: 1.4;
}

/* Column flow variant: items fill column-by-column instead of row-by-row */
.fe-feature-list--columns {
  column-count: 1;
  column-gap: 2.5rem;
}
.fe-feature-list--columns li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
  .fe-feature-list--columns { column-count: 2; }
}
@media (min-width: 992px) {
  .fe-feature-list--columns { column-count: 3; }
}

/* Two-line entries: bold title + muted description */
.fe-feature-list--twoline li { margin-bottom: 1.75rem; }
.fe-feature-list--twoline li:last-child { margin-bottom: 0; }
.fe-feature-title {
  font-weight: 700;
  color: #1a1a1a;
  font-size: 1.05rem;
  line-height: 1.3;
}
.fe-feature-desc {
  display: block;
  color: var(--fe-text);
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 0.25rem;
}
[data-theme="dark"] .fe-feature-title { color: #fff; }
[data-theme="dark"] .fe-feature-desc { color: rgba(255,255,255,0.65); }
.fe-feature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #8B8A3D;
  color: #fff;
  font-size: 1rem;
  margin-top: 1px;
}
[data-theme="dark"] .fe-feature-list li { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .fe-feature-check { background: #CBCA7B; color: #000; }

/* Red X in the same circle style */
.fe-feature-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: 1rem;
}
[data-theme="dark"] .fe-feature-x { background: #b02a37; color: #fff; }

/* Inline help button (question mark) */
.fe-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(0,0,0,0.3);
  cursor: help;
  font-size: 1.1rem;
  line-height: 1;
  vertical-align: middle;
  transition: color 0.15s ease;
}
.fe-help-btn:hover, .fe-help-btn:focus {
  color: #6b6a2e;
  outline: none;
}
[data-theme="dark"] .fe-help-btn { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .fe-help-btn:hover, [data-theme="dark"] .fe-help-btn:focus { color: #CBCA7B; }

/* Pricing toggle button-group */
.fe-pricing-toggle {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--fe-border);
  background: #fff;
}
.fe-pricing-toggle .btn {
  padding: 0.85rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  border: 0;
  border-radius: 0 !important;
  color: #555;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.fe-pricing-toggle--sm .btn {
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.fe-pricing-toggle .btn:hover { background: rgba(139,138,61,0.06); color: #333; }
.fe-pricing-toggle .btn.active {
  background: #8B8A3D;
  color: #fff;
}
[data-theme="dark"] .fe-pricing-toggle { background: var(--fe-bg-subtle); border-color: var(--fe-border); }
[data-theme="dark"] .fe-pricing-toggle .btn { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .fe-pricing-toggle .btn:hover { background: rgba(203,202,123,0.1); color: #fff; }
[data-theme="dark"] .fe-pricing-toggle .btn.active { background: #CBCA7B; color: #000; }

/* Section backgrounds (full-width bands) */
.fe-pricing-section { padding: 3.5rem 0; }
.fe-pricing-section--private {
  background: #fafaf8;
}
.fe-pricing-section--commercial {
  background: #f5f5f2;
}
[data-theme="dark"] .fe-pricing-section--private {
  background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .fe-pricing-section--commercial {
  background: rgba(255,255,255,0.04);
}

/* Section divider */
.fe-pricing-divider {
  position: relative;
  margin: 0;
}
.fe-pricing-divider-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fe-pricing-divider-inner::before,
.fe-pricing-divider-inner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fe-border);
}
.fe-pricing-divider-inner span {
  padding: 0 1rem;
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #6b6a2e;
  text-transform: uppercase;
}

/* Dark mode */
[data-theme="dark"] .fe-pricing-hero--individual {
  border-color: rgba(var(--fe-tone-earth-rgb), 0.4);
}
[data-theme="dark"] .fe-pricing-hero-icon { background: rgba(var(--fe-tone-sage-rgb), 0.25); color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-pricing-hero-eyebrow { color: var(--fe-tone-earth); }
[data-theme="dark"] .fe-pricing-hero-title { color: #fff; }
[data-theme="dark"] .fe-pricing-divider-inner span { color: #CBCA7B; }
[data-theme="dark"] .fe-pricing-divider-inner::before,
[data-theme="dark"] .fe-pricing-divider-inner::after { background: rgba(255,255,255,0.1); }

/* Danger zone card (profile) */
.fe-page .fe-section .card.fe-danger-zone {
  border: 1px solid #e8c4c4;
}
.fe-page .fe-section .card.fe-danger-zone .card-header {
  background: #fbeeee;
  border-bottom: 1px solid #e8c4c4;
}
.fe-page .fe-section .card.fe-danger-zone .card-title { color: #b02a37; }
.fe-danger-zone-row {
  display: flex;
  align-items: center;
  padding: 1rem 1.4rem;
}
.fe-danger-zone-row + .fe-danger-zone-row { border-top: 1px solid var(--fe-border); }

/* Danger zone in dark mode */
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone {
  background: rgba(176,42,55,0.08);
  border-color: rgba(176,42,55,0.4);
}
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone .card-header {
  background: rgba(176,42,55,0.15);
  border-bottom-color: rgba(176,42,55,0.4);
}
[data-theme="dark"] .fe-page .fe-section .card.fe-danger-zone .card-title { color: #ff8a95; }
[data-theme="dark"] .fe-danger-zone-row + .fe-danger-zone-row { border-top-color: rgba(176,42,55,0.25); }

/* Password strength meter (used in profile password modal) */
.fe-pw-strength-bar {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.fe-pw-strength-fill {
  height: 100%;
  width: 0;
  background: transparent;
  transition: width 0.25s ease, background 0.25s ease;
}
.fe-pw-strength-label {
  font-size: 0.8rem;
  font-weight: 600;
}

/* Match Frontend modal content to rest of app */
.fe-page .modal-content {
  border-radius: 1rem;
  border: 1px solid var(--fe-border);
}
.fe-page .modal-header {
  border-bottom: 1px solid var(--fe-border);
}
.fe-page .modal-title {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #8B8A3D;
}
.fe-page .modal .btn-primary {
  background: #8B8A3D;
  border-color: #8B8A3D;
}
.fe-page .modal .btn-primary:hover,
.fe-page .modal .btn-primary:focus {
  background: #6b6a2e;
  border-color: #6b6a2e;
}

/* Warm-beige secondary button (matches backend.css) */
.fe-page .btn-secondary {
  background-color: #dcdcd4;
  border-color: #b8b8ac;
  color: #333;
  font-weight: 600;
}
.fe-page .btn-secondary:hover,
.fe-page .btn-secondary:focus {
  background-color: #c9c9bf;
  border-color: #a5a597;
  color: #222;
}

/* Ghost-secondary: link-like by default, pill on hover (matches backend.css) */
.fe-page .btn-ghost-secondary {
  background: transparent;
  border-color: transparent;
  color: #999;
  font-weight: 500;
}
.fe-page .btn-ghost-secondary:hover,
.fe-page .btn-ghost-secondary:focus {
  background-color: #e8e8e3;
  border-color: #e8e8e3;
  color: #555;
}


/* ========================================================================
   TONE PALETTE — utility classes
   Use as: <div class="fe-tone-mustard-bg">…</div>
           <div class="fe-tone-sage-soft">…</div>
           <p class="fe-tone-copper-text">…</p>
   Each tone has 4 variants: -bg (solid filled),
                             -soft (translucent tint),
                             -text (foreground colour),
                             -border (border colour).
   ======================================================================== */
.fe-tone-mustard-bg     { background: var(--fe-tone-mustard); color: #fff; }
.fe-tone-mustard-soft   { background: rgba(var(--fe-tone-mustard-rgb), 0.18); color: var(--fe-tone-mustard-dark); }
.fe-tone-mustard-text   { color: var(--fe-tone-mustard-dark); }
.fe-tone-mustard-border { border-color: var(--fe-tone-mustard) !important; }

.fe-tone-sage-bg        { background: var(--fe-tone-sage); color: #fff; }
.fe-tone-sage-soft      { background: rgba(var(--fe-tone-sage-rgb), 0.18); color: var(--fe-tone-sage-dark); }
.fe-tone-sage-text      { color: var(--fe-tone-sage-dark); }
.fe-tone-sage-border    { border-color: var(--fe-tone-sage) !important; }

.fe-tone-earth-bg       { background: var(--fe-tone-earth); color: #fff; }
.fe-tone-earth-soft     { background: rgba(var(--fe-tone-sage-rgb), 0.18); color: var(--fe-tone-sage-dark); }
.fe-tone-earth-text     { color: var(--fe-tone-sage-dark); }
.fe-tone-earth-border   { border-color: var(--fe-tone-earth) !important; }

.fe-tone-olive-bg       { background: var(--fe-tone-olive); color: #fff; }
.fe-tone-olive-soft     { background: rgba(var(--fe-tone-olive-rgb), 0.18); color: var(--fe-tone-olive-dark); }
.fe-tone-olive-text     { color: var(--fe-tone-olive-dark); }
.fe-tone-olive-border   { border-color: var(--fe-tone-olive) !important; }

.fe-tone-champagne-bg     { background: var(--fe-tone-champagne); color: #333; }
.fe-tone-champagne-soft   { background: rgba(var(--fe-tone-champagne-rgb), 0.25); color: var(--fe-tone-champagne-dark); }
.fe-tone-champagne-text   { color: var(--fe-tone-champagne-dark); }
.fe-tone-champagne-border { border-color: var(--fe-tone-champagne) !important; }

.fe-tone-copper-bg      { background: var(--fe-tone-copper); color: #fff; }
.fe-tone-copper-soft    { background: rgba(var(--fe-tone-copper-rgb), 0.18); color: var(--fe-tone-copper-dark); }
.fe-tone-copper-text    { color: var(--fe-tone-copper-dark); }
.fe-tone-copper-border  { border-color: var(--fe-tone-copper) !important; }

/* Dark mode: lift the soft variants so the tint stays visible
   on dark backgrounds, and use the base colour for legible text */
[data-theme="dark"] .fe-tone-mustard-soft   { background: rgba(var(--fe-tone-mustard-rgb), 0.25);   color: var(--fe-tone-mustard); }
[data-theme="dark"] .fe-tone-mustard-text   { color: var(--fe-tone-mustard); }
[data-theme="dark"] .fe-tone-sage-soft      { background: rgba(var(--fe-tone-sage-rgb), 0.22);      color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-sage-text      { color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-earth-soft     { background: rgba(var(--fe-tone-sage-rgb), 0.22);     color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-earth-text     { color: var(--fe-tone-sage); }
[data-theme="dark"] .fe-tone-olive-soft     { background: rgba(var(--fe-tone-olive-rgb), 0.25);     color: var(--fe-tone-olive); }
[data-theme="dark"] .fe-tone-olive-text     { color: var(--fe-tone-olive); }
[data-theme="dark"] .fe-tone-champagne-soft { background: rgba(var(--fe-tone-champagne-rgb), 0.22); color: var(--fe-tone-champagne); }
[data-theme="dark"] .fe-tone-champagne-text { color: var(--fe-tone-champagne); }
[data-theme="dark"] .fe-tone-copper-soft    { background: rgba(var(--fe-tone-copper-rgb), 0.25);    color: var(--fe-tone-copper); }
[data-theme="dark"] .fe-tone-copper-text    { color: var(--fe-tone-copper); }


/* ========================================================================
   Frontend alerts — visible on earth-tone page backgrounds
   ======================================================================== */
.fe-page .alert {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-weight: 500;
  border: 0;
  border-left: 6px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.fe-page .alert-success {
  background: rgba(var(--fe-tone-sage-rgb), 0.20);
  border-left-color: var(--fe-tone-sage);
  color: var(--fe-tone-sage-dark);
}
.fe-page .alert-danger {
  background: rgba(var(--fe-tone-copper-rgb), 0.20);
  border-left-color: var(--fe-tone-copper);
  color: var(--fe-tone-copper-dark);
}
.fe-page .alert-warning {
  background: rgba(var(--fe-tone-mustard-rgb), 0.25);
  border-left-color: var(--fe-tone-mustard);
  color: var(--fe-tone-mustard-dark);
}
.fe-page .alert-info {
  background: rgba(var(--fe-tone-earth-rgb), 0.20);
  border-left-color: var(--fe-tone-earth);
  color: var(--fe-tone-earth-dark);
}

[data-theme="dark"] .fe-page .alert-success {
  background: rgba(var(--fe-tone-sage-rgb), 0.25);
  color: var(--fe-tone-sage);
}
[data-theme="dark"] .fe-page .alert-danger {
  background: rgba(var(--fe-tone-copper-rgb), 0.25);
  color: var(--fe-tone-copper);
}
[data-theme="dark"] .fe-page .alert-warning {
  background: rgba(var(--fe-tone-mustard-rgb), 0.30);
  color: var(--fe-tone-mustard);
}
[data-theme="dark"] .fe-page .alert-info {
  background: rgba(var(--fe-tone-earth-rgb), 0.25);
  color: var(--fe-tone-earth);
}


/* ========================================================================
   Hidden-observation indicator (top-right, frosted-glass backdrop)
   ======================================================================== */
.fe-hidden-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  color: #475569;
  font-size: 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  pointer-events: none;
}
.fe-hidden-badge i { line-height: 1; }

/* list-row variant: slightly smaller on the compact thumbnail */
.fe-list-thumb .fe-hidden-badge {
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  font-size: 14px;
}

/* ------------------ Organisation apply form ------------------ */
.fe-apply-section-title {
  display: flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fe-accent, #8B8A3D);
  margin-bottom: 1rem;
}
.fe-apply-section-title i { font-size: 1rem; }
.fe-apply-steps .fe-apply-step-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-right: 12px;
  border-radius: 50%;
  background: rgba(139,138,61,0.12);
  color: #6b6a2e;
  font-size: 1.1rem;
}
.form-label.required::after {
  content: " *";
  color: #d63939;
}

/* ------------------ Organisation apply — wizard ------------------ */
.fe-wizard-steps {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  flex-wrap: wrap;
}
.fe-wizard-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  font-size: 0.875rem;
  color: #6a6b72;
  cursor: default;
  flex: 1 1 auto;
  min-width: 0;
}
.fe-wizard-steps li .fe-wizard-step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #eceadf;
  color: #6b6a2e;
  font-size: 0.8rem;
  font-weight: 600;
}
.fe-wizard-steps li .fe-wizard-step-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fe-wizard-steps li.is-active {
  border-color: var(--fe-accent, #8B8A3D);
  color: #3a3b1a;
  background: #fffef5;
  font-weight: 600;
}
.fe-wizard-steps li.is-active .fe-wizard-step-num {
  background: var(--fe-accent, #8B8A3D);
  color: #fff;
}
.fe-wizard-steps li.is-done {
  border-color: rgba(139,138,61,0.35);
  color: #6b6a2e;
  cursor: pointer;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num::before {
  content: "✓";
  font-size: 0.9rem;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num {
  background: rgba(139,138,61,0.18);
  color: #6b6a2e;
}
.fe-wizard-steps li.is-done .fe-wizard-step-num > * { display: none; }

.fe-wizard-step { display: none; }
.fe-wizard-step.is-active { display: block; }

.fe-apply-stars {
  display: inline-flex;
  gap: 1px;
  font-size: 1.05rem;
  line-height: 1;
}

[data-theme="dark"] .fe-wizard-steps li {
  background: #1c1f26;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
[data-theme="dark"] .fe-wizard-steps li.is-active {
  background: #23251a;
  color: #fff;
}

/* Tabler steps in frontend: accent color + kill the stray outer border-left
   that Tabler's "steps with headings" variant re-applies to every .steps. */
.fe-page .steps {
  --tblr-steps-color: var(--fe-accent, #8B8A3D);
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}
.fe-page .steps-counter .step-item::before {
  background: var(--fe-accent, #8B8A3D) !important;
  color: #fff;
  font-weight: 700;
}
/* Upcoming steps: solid grey circle with white number,
   softer connector line so circle clearly covers it. */
.fe-page .steps .step-item.active ~ .step-item::before {
  background: #adafb5 !important;
  color: #fff !important;
}
.fe-page .steps .step-item.active ~ .step-item::after {
  background: #e2e4e8 !important;
}
.fe-page .steps .step-item.active ~ .step-item {
  color: #8b8c92;
}

/* Step headlines: match frontend section titles and align icon */
.fe-apply-step-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.fe-apply-step-title i {
  color: var(--fe-accent, #8B8A3D);
  font-size: 0.8em;
}

/* Wizard — success card */
.fe-apply-done {
  border: 1px solid rgba(139,138,61,0.25);
  background:
    radial-gradient(circle at top, rgba(139,138,61,0.08), transparent 60%),
    #fff;
  overflow: hidden;
}
.fe-apply-done-icon {
  font-size: 7rem;
  line-height: 1;
  color: var(--fe-accent, #8B8A3D);
  margin-bottom: 1.25rem;
  display: inline-flex;
  filter: drop-shadow(0 6px 20px rgba(139,138,61,0.25));
  animation: fe-apply-pop 0.5s ease-out;
}
@keyframes fe-apply-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.fe-apply-done-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin-right: 0.9rem;
  border-radius: 50%;
  background: rgba(139,138,61,0.14);
  color: var(--fe-accent, #8B8A3D);
  font-size: 1.1rem;
}
[data-theme="dark"] .fe-apply-done {
  background:
    radial-gradient(circle at top, rgba(203,202,123,0.12), transparent 60%),
    #1c1f26;
  border-color: rgba(203,202,123,0.18);
}

/* Profile — pending organisation registration card */
.fe-pending-card {
  border: 1px solid rgba(214,162,41,0.35);
  background: rgba(255,205,87,0.08);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.fe-pending-badge {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(214,162,41,0.2);
  color: #b0761e;
  font-size: 1.1rem;
}
[data-theme="dark"] .fe-pending-card {
  background: rgba(203,162,41,0.08);
}

/* --- Identification suggestion list ---------------------------------------
 * Shown inside an .fe-imprint-section on observation detail pages that are
 * still waiting for community classification. Each row is a single
 * suggestion; decided (non-pending) items are faded to keep focus on the
 * open ones.
 * ----------------------------------------------------------------------- */
.fe-suggest-list { display: flex; flex-direction: column; gap: .75rem; }
.fe-suggest-item {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(var(--fe-tone-sage-rgb), 0.08);
    border: 1px solid rgba(var(--fe-tone-sage-rgb), 0.25);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
}
.fe-suggest-actions {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .4rem;
}
.fe-suggest-main { flex: 1 1 auto; min-width: 0; }
.fe-suggest-item--decided { opacity: 0.65; }
[data-theme="dark"] .fe-suggest-item {
    background: rgba(var(--fe-tone-sage-rgb), 0.14);
    border-color: rgba(var(--fe-tone-sage-rgb), 0.35);
}

.fe-suggest-thumb {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    object-fit: cover;
    border-radius: .5rem;
    background: rgba(var(--fe-tone-sage-rgb), 0.12);
}
/* Der Titel ist jetzt ein Link, soll aber wie Text aussehen — die Unterstreichung
   erst beim Überfahren, damit die Liste ruhig bleibt. */
.fe-suggest-title-link {
    color: inherit;
    text-decoration: none;
}

.fe-suggest-title-link:hover,
.fe-suggest-title-link:focus-visible {
    text-decoration: underline;
}

.fe-suggest-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fe-accent);
    line-height: 1.25;
}

/* --- Circular icon-only action button (used in the suggestion list) --- */
.fe-btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: none;
    outline: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
    background: rgba(var(--fe-tone-copper-rgb), 0.9);
    color: #fff;
}
.fe-btn-icon:hover { filter: brightness(1.1); transform: scale(1.05); }
.fe-btn-icon:focus,
.fe-btn-icon:focus-visible,
.fe-btn-icon:active {
    outline: none;
    box-shadow: none;
}
.fe-btn-icon--accent {
    background: var(--fe-accent);
    color: #000;
}


/* =============================================================
   NEWS PAGES
   ============================================================= */

/* ---- List card ---- */
.fe-news-card {
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    color: inherit;
}
.fe-news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.08);
}
.fe-news-card-stripe {
    width: 6px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.08);
    transition: background 0.18s ease;
}
.fe-news-card:hover .fe-news-card-stripe {
    background: var(--fe-accent);
}
.fe-news-card--unread .fe-news-card-stripe {
    background: var(--fe-accent);
}
.fe-news-card-body {
    flex: 1;
    padding: 1.25rem 1.5rem;
}
.fe-news-card-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.25;
    color: #222;
}
.fe-news-card-meta {
    font-size: 0.85rem;
    color: #8a8a8a;
}
.fe-news-card-excerpt {
    color: #555;
    line-height: 1.55;
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-news-card-cta {
    color: var(--fe-accent);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
}
.fe-news-card:hover .fe-news-card-cta i {
    transform: translateX(3px);
    transition: transform 0.18s ease;
}

/* ---- Detail article ---- */
.fe-news-article {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 2.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
}
.fe-news-article-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.2;
    color: #222;
    margin-bottom: 1rem;
}
.fe-news-article .s-markdown {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}
.fe-news-article .s-markdown h1,
.fe-news-article .s-markdown h2,
.fe-news-article .s-markdown h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    color: #222;
}
.fe-news-article .s-markdown h1 { font-size: 1.6rem; }
.fe-news-article .s-markdown h2 { font-size: 1.35rem; }
.fe-news-article .s-markdown h3 { font-size: 1.15rem; }
.fe-news-article .s-markdown p { margin-bottom: 1rem; }
.fe-news-article .s-markdown a { color: var(--fe-accent); }
.fe-news-article .s-markdown blockquote {
    border-left: 3px solid var(--fe-accent);
    padding: 0.25rem 1rem;
    color: #555;
    margin: 1rem 0;
    background: rgba(0,0,0,0.02);
}
.fe-news-article .s-markdown ul,
.fe-news-article .s-markdown ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

/* ---- Sidebar ---- */
.fe-news-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.fe-news-meta-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.03);
}
.fe-news-meta-card-heading {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 0.75rem;
}
.fe-news-meta-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: #444;
    font-size: 0.95rem;
}
.fe-news-meta-row i {
    color: var(--fe-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.fe-news-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    background: rgba(0,0,0,0.03);
    transition: background 0.15s ease, color 0.15s ease;
}
.fe-news-nav-link:hover {
    background: var(--fe-accent);
    color: #000;
}
.fe-news-nav-link--prev i { margin-right: 0.2rem; }
.fe-news-nav-link--next { justify-content: space-between; }
.fe-news-nav-link-label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a8a8a;
    display: block;
}
.fe-news-nav-link:hover .fe-news-nav-link-label { color: rgba(0,0,0,0.55); }
.fe-news-nav-link-title {
    font-weight: 600;
    font-size: 0.92rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fe-news-nav-empty {
    color: #aaa;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

@media (max-width: 991px) {
    .fe-news-sidebar { position: static; }
}

/******************* CLASSIFICATION "PROBLEMATIC IMAGE" FLAG *******************/
/* Mirrors the backend.css rules so the public detail pages can dim a flagged
   primary image and overlay the same warning icon. */

.s-thumb-flag {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Seit der Blur-/Icon-Behandlung sitzt das Bild in einem .s-thumb-flag-Wrapper.
   Damit ist nicht mehr das Bild das Flex-Item, sondern der Wrapper — die
   Breiten- und flex-Angaben am Bild greifen dort nicht mehr. Ohne diese Regeln
   gibt der Wrapper nach, sobald der Text daneben Platz braucht, und zieht das
   Bild über max-width:100% mit: auf der Vorschlagsliste war es auf 6 px
   zusammengeschoben statt 56 px breit. */
.s-thumb-flag.fe-suggest-thumb-wrap {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
}

.s-thumb-flag.fe-map-list-thumb-wrap {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
}

.s-thumb-flag-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    line-height: 1;
    color: #ff1744;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
    pointer-events: none;
    z-index: 2;
    display: none;
}

/* GLightbox slide for a flagged source image: the bytes themselves are
   already server-blurred (the asset/cache endpoints honor the classification's
   problematicImage flag), so we only overlay the warning icon here. */
.gslide.s-lightbox-blocked .gslide-image::after {
    content: "\ea06"; /* tabler-icons "alert-triangle" */
    font-family: "tabler-icons";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    line-height: 1;
    color: #ff1744;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
    pointer-events: none;
    z-index: 5;
}

/* Smaller icon on list thumbnails / map popups (compact contexts). */
.s-thumb-flag.fe-map-list-thumb-wrap .s-thumb-flag-icon,
.s-thumb-flag.fe-suggest-thumb-wrap .s-thumb-flag-icon,
.species-hit .s-thumb-flag .s-thumb-flag-icon { font-size: 1.1rem; }
.fe-map-popup-thumb-wrap .s-thumb-flag .s-thumb-flag-icon { font-size: 1.6rem; }
.fe-obs-card-img .s-thumb-flag .s-thumb-flag-icon { font-size: 2.5rem; }
/* Larger icon on big detail-page hero images. */
.s-thumb-flag:has(.fe-classification-img) .s-thumb-flag-icon { font-size: 4rem; }

.s-thumb-flag-active .s-thumb-flag-icon {
    display: block;
}

/* No CSS blur on <img> here: the bytes served by /api/classifications/.../file
   and /api/media/cache?...&blur=true are already blurred server-side based on
   the classification's problematicImage flag. Background-image avatars/tiles
   below still need an overlay because they don't go through that pipeline. */

/* Variant for background-image avatars / tiles — dim via an overlay because
   filter/opacity on the container would also dim the icon. */
.s-thumb-flag.avatar,
.s-thumb-flag.fe-avatar,
.s-thumb-flag.fe-thumb-tile { position: relative; }
.s-thumb-flag-active.avatar::before,
.s-thumb-flag-active.fe-avatar::before,
.s-thumb-flag-active.fe-thumb-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}
.s-thumb-flag.avatar .s-thumb-flag-icon,
.s-thumb-flag.fe-avatar .s-thumb-flag-icon,
.s-thumb-flag.fe-thumb-tile .s-thumb-flag-icon { font-size: 1.5rem; z-index: 2; }

/* ===== Like + visibility buttons in the observation-detail title row ===
   Both reuse .fe-btn .fe-btn-outline for visual parity with the report
   button. .fe-btn-static is a non-interactive span styled like a button
   (passive indicator). .fe-btn-like-active fills the heart in copper. */
.fe-btn-static {
    cursor: default;
    pointer-events: auto;       /* still want hover tooltip */
}
.fe-btn-static:hover {
    /* Don't change visuals on hover — it's not actually clickable. */
    background: transparent;
    color: inherit;
}
/* Active like state: button chrome unchanged, only the heart goes filled+red. */
.fe-btn-like-active .ti-heart-filled {
    color: #e0245e;
}
/* Strip just the outer ring (border) so an element keeps full .fe-btn
   typography/padding but doesn't read as an actionable button. Adds a
   soft tinted background instead so it still has visual weight. Kills
   any hover transition/transform inherited from .fe-btn. */
.fe-btn-ringless,
.fe-btn-ringless:hover,
.fe-btn-ringless:focus,
.fe-btn-ringless:active {
    background: #ffffff;
    border: 1px solid var(--fe-border);
    color: #5a5900 !important;
    transform: none;
    box-shadow: none;
    transition: none;
}
/* Also stop the inner icon scale-up and lock the green/olive accent on
   the circle (otherwise the new grey outer pill would wash it out). */
.fe-btn-ringless i,
.fe-btn-ringless:hover i,
.fe-btn-ringless:focus i,
.fe-btn-ringless:active i {
    transform: none;
    transition: none;
    background: rgba(203, 202, 123, 0.5);
}

/* Dark-mode parity: card-like surface with the same border token used by
   .fe-imprint-section, accent-coloured text, brighter icon-circle tint. */
[data-theme="dark"] .fe-btn-ringless,
[data-theme="dark"] .fe-btn-ringless:hover,
[data-theme="dark"] .fe-btn-ringless:focus,
[data-theme="dark"] .fe-btn-ringless:active {
    background: var(--fe-bg-subtle);
    border-color: var(--fe-border);
    color: var(--fe-accent) !important;
}
[data-theme="dark"] .fe-btn-ringless i,
[data-theme="dark"] .fe-btn-ringless:hover i,
[data-theme="dark"] .fe-btn-ringless:focus i,
[data-theme="dark"] .fe-btn-ringless:active i {
    background: rgba(255, 255, 255, 0.12);
}

/* Like + comment badges for observation cards. The .fe-obs-badge base
   locks shape and height so the two stay perfectly aligned even when the
   filled-heart glyph (different font file) reports slightly different
   metrics than the outline message-circle. */
.fe-obs-likes,
.fe-obs-comments {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    line-height: 1;
    padding: 0 .55rem;
    height: 22px;
    border-radius: 999px;
}
.fe-obs-likes i,
.fe-obs-comments i {
    font-size: .9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.fe-obs-likes {
    background: rgba(var(--fe-tone-copper-rgb), 0.18);
    color: var(--fe-tone-copper-dark);
}
.fe-obs-comments {
    background: rgba(var(--fe-tone-earth-rgb), 0.18);
    color: var(--fe-tone-earth-dark);
}
/* "I liked this" variant: badge chrome unchanged, only the heart goes red. */
.fe-obs-likes--mine .ti-heart-filled { color: #e0245e; }

/* ===== Comments (observation detail) ================================ */
.fe-comment-list { list-style: none; padding: 0; margin: 0; }
.fe-comment-list-nested {
    padding-left: 1.2rem;
    border-left: 2px solid rgba(var(--fe-tone-champagne-rgb), 0.7);
    margin-top: .5rem;
}
.fe-comment-list-nested .fe-comment-list-nested .fe-comment-list-nested { padding-left: .6rem; }
.fe-comment-item {
    margin: .8rem 0;
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}
.fe-comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fe-bg-subtle);
    flex-shrink: 0;
    display: block;
}
.fe-comment-avatar-link { flex-shrink: 0; line-height: 0; }
.fe-comment-author {
    color: inherit;
    text-decoration: none;
}
.fe-comment-author:hover {
    color: var(--fe-accent);
    text-decoration: underline;
}

/* ===== Profile tabs ================================================== */
.fe-profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--fe-border);
}
.fe-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.25rem;
    color: var(--fe-tone-earth, #8c8273);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.fe-profile-tab:hover {
    color: var(--fe-accent);
    text-decoration: none;
    background: rgba(var(--fe-tone-champagne-rgb), 0.15);
}
.fe-profile-tab.is-active {
    color: #5a5900;
    font-weight: 700;
    border-bottom-color: var(--fe-accent);
}
[data-theme="dark"] .fe-profile-tab.is-active {
    color: var(--fe-accent);
}
.fe-profile-tab i { font-size: 1.05rem; }
.fe-profile-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .5rem;
    background: rgba(var(--fe-tone-olive-rgb), 0.18);
    color: var(--fe-tone-olive-dark);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.fe-profile-tab.is-active .fe-profile-tab-count {
    background: var(--fe-accent);
    color: #2a2a00;
}
[data-theme="dark"] .fe-profile-tab-count {
    background: rgba(255, 255, 255, 0.18);
    color: var(--fe-text);
}
[data-theme="dark"] .fe-profile-tab.is-active .fe-profile-tab-count {
    background: var(--fe-accent);
    color: #000;
}

/* ===== Empty state inside a profile tab (no observations / no users) === */
.fe-profile-empty {
    text-align: center;
    padding: 5rem 1.5rem;
    background: #ffffff;
    border: 1px solid var(--fe-border);
    border-radius: 1rem;
}
[data-theme="dark"] .fe-profile-empty {
    background: var(--fe-bg-subtle);
}
.fe-profile-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(var(--fe-tone-champagne-rgb), 0.45);
    color: var(--fe-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.25rem;
    box-shadow: 0 0 0 6px rgba(var(--fe-tone-champagne-rgb), 0.22);
}
.fe-profile-empty-icon i { font-size: 2.4rem; line-height: 1; }
.fe-profile-empty-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 1.4rem;
    color: var(--fe-accent);
    margin: 0 0 .5rem 0;
}
.fe-profile-empty-text {
    color: var(--fe-tone-earth, #8c8273);
    margin: 0 auto;
    max-width: 420px;
    line-height: 1.5;
}

/* ===== User mini-card (profile follower/following tabs) =============== */
.fe-user-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    background: #ffffff;
    border: 1px solid var(--fe-border);
    border-radius: .75rem;
    color: var(--fe-text);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.fe-user-card:hover {
    border-color: var(--fe-accent);
    transform: translateY(-2px);
    color: var(--fe-text);
    text-decoration: none;
}
[data-theme="dark"] .fe-user-card {
    background: var(--fe-bg-subtle);
}
.fe-user-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fe-bg-subtle);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fe-accent);
}
.fe-user-card-avatar--fish i { font-size: 1.4rem; }
.fe-user-card-body { min-width: 0; flex: 1 1 auto; }
.fe-user-card-name {
    font-weight: 600;
    color: var(--fe-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fe-user-card-handle {
    font-size: .8rem;
    color: var(--fe-tone-earth, #8c8273);
}
.fe-user-card-stats {
    margin-top: .45rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.fe-user-card-stats > span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    line-height: 1;
    height: 22px;
    padding: 0 .55rem;
    border-radius: 999px;
    background: rgba(var(--fe-tone-olive-rgb), 0.16);
    color: var(--fe-tone-olive-dark);
    font-weight: 600;
}
.fe-user-card-stats i { font-size: .85rem; }

/* "Du folgst diesem Nutzer"-Indikator — kleines Häkchen-Icon oben rechts. */
.fe-user-card { position: relative; }
.fe-user-card-flag {
    position: absolute;
    top: .55rem;
    right: .65rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--fe-tone-olive-rgb), 0.18);
    color: var(--fe-tone-olive-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fe-user-card-flag i { font-size: .85rem; }
.fe-comment-main { flex: 1 1 auto; min-width: 0; }
.fe-comment-head { font-size: .9rem; color: var(--fe-tone-olive-dark); }
.fe-comment-time { color: var(--fe-tone-olive); margin-left: .4rem; font-size: .8rem; }
.fe-comment-edited {
    font-style: italic;
    color: var(--fe-tone-olive);
    margin-left: .3rem;
    font-size: .75rem;
}
.fe-comment-body {
    margin-top: .35rem;
    padding: .55rem .8rem;
    background: rgba(var(--fe-tone-champagne-rgb), 0.18);
    border-radius: .6rem;
    white-space: pre-wrap;
}
.fe-comment-form-divider {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    border: 0;
    border-top: 2px solid rgba(var(--fe-tone-olive-rgb), 0.45);
}
[data-theme="dark"] .fe-comment-body {
    background: rgba(255, 255, 255, 0.05);
}
.fe-comment-actions { font-size: .85rem; margin-top: .2rem; }
.fe-comment-actions a { color: var(--fe-tone-copper-dark); text-decoration: none; }
.fe-comment-actions a:hover { text-decoration: underline; }
.fe-comment-actions .fe-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--fe-tone-copper-dark);
    font-size: inherit;
    cursor: pointer;
}
.fe-comment-actions .fe-link-btn:hover { text-decoration: underline; }
.fe-comment-action-sep { color: var(--fe-tone-olive); margin: 0 .15rem; }

/* ================================ NOTIFICATIONS (Task 26) ================================ */
.fe-notifications-card { padding: 1.25rem 1.5rem; }

.fe-notification-list { list-style: none; padding: 0; margin: 0; }
.fe-notification-item {
    border-bottom: 1px solid var(--fe-border);
}
.fe-notification-item:last-child { border-bottom: none; }
/* The entire row is a link — clicking anywhere in it navigates. */
.fe-notification-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.5rem;
    margin: .6rem 0;
    color: inherit;
    text-decoration: none;
    border-radius: .5rem;
    transition: background-color .12s ease;
}
.fe-notification-row:hover {
    background: rgba(var(--fe-tone-champagne-rgb), 0.22);
    color: inherit;
    text-decoration: none;
}
.fe-notification-row--inert { cursor: default; pointer-events: none; }

/* Unread-notifications indicator on the user-dropdown trigger.
   Tabler's badge-notification floats at the corner of a relatively-
   positioned parent. The avatar-wrap provides that positioning context. */
.fe-user-avatar-wrap {
    position: relative;
    display: inline-flex;
    line-height: 0;
}
.fe-user-avatar-wrap .badge-notification {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--fe-bg, #fff);
    border-radius: 50%;
}

.fe-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fe-bg-subtle);
    color: var(--fe-accent);
    flex-shrink: 0;
}
.fe-notification-icon i { font-size: 1.15rem; line-height: 1; }
.fe-notification-icon-like { background: rgba(214, 92, 71, 0.12); color: var(--fe-tone-copper, #d65c47); }
.fe-notification-icon-new_follower { background: rgba(101, 138, 89, 0.15); color: var(--fe-tone-olive-dark, #4a6940); }
.fe-notification-icon-comment_on_observation,
.fe-notification-icon-reply_to_comment,
.fe-notification-icon-followed_observation_commented { background: rgba(120, 145, 175, 0.15); color: #4a6b8a; }
.fe-notification-icon-new_observation_by_followee { background: rgba(214, 168, 92, 0.15); color: #a07a3a; }

.fe-notification-body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.fe-notification-text { color: var(--fe-text); line-height: 1.4; }
.fe-notification-text a { color: var(--fe-accent); font-weight: 600; text-decoration: none; }
.fe-notification-text a:hover { text-decoration: underline; }
.fe-notification-time { color: var(--fe-tone-earth, #8c8273); font-size: .8rem; }

.fe-notification-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--fe-accent);
    flex-shrink: 0;
}

.fe-notification-unread .fe-notification-text { font-weight: 600; }

/* ====== Empty state ====== */
/* fe-imprint-section gives us the card chrome (white bg, rounded border,
   dark-mode aware). We center everything inside and add generous vertical
   padding so the empty state feels like a destination, not an oversight. */
.fe-notifications-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}
.fe-notifications-empty-icon {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(var(--fe-tone-champagne-rgb), 0.55);
    color: var(--fe-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 0 8px rgba(var(--fe-tone-champagne-rgb), 0.25);
}
[data-theme="dark"] .fe-notifications-empty-icon {
    background: rgba(var(--fe-tone-champagne-rgb), 0.18);
    box-shadow: 0 0 0 8px rgba(var(--fe-tone-champagne-rgb), 0.08);
}
.fe-notifications-empty-icon i { font-size: 3rem; line-height: 1; }
.fe-notifications-empty-title {
    font-family: 'Bricolage Grotesque', serif;
    font-size: 1.7rem;
    color: var(--fe-accent);
    margin: 0 0 .6rem 0;
}
.fe-notifications-empty-text {
    color: var(--fe-tone-earth, #8c8273);
    margin: 0 auto 1.75rem auto;
    max-width: 460px;
    line-height: 1.5;
}
.fe-notifications-empty-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ================================ TOP-BAR BELL (Task 27) ================================ */
.fe-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--fe-tone-earth);
    text-decoration: none;
}
.fe-bell:hover { color: var(--fe-tone-earth-dark); background: rgba(var(--fe-tone-champagne-rgb), .35); }
.fe-bell-badge {
    position: absolute;
    top: 2px;
    right: 0;
    background: var(--fe-tone-copper);
    color: #fff;
    font-size: .65rem;
    line-height: 1;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* App promo block: official store badges keep a fixed height and clear space
   as required by Apple's and Google's brand guidelines. */
.fe-app-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.fe-app-badges img { height: 3.25rem; width: auto; display: block; }
/* Kept clearly apart from the store badges above — they are their own visual
   block, and a tight gap made the button read as a third badge. */
.fe-app-cta { margin-top: 2.5rem; }

/* From lg up the button sits on the screenshot's baseline. Tied to the column
   height rather than a fixed gap, which would only line up at one viewport
   width — the image scales with its column. Below lg the columns stack and the
   plain margin above applies. */
.fe-app-promo-row { align-items: center; }

@media (min-width: 992px) {
  .fe-app-promo-row { align-items: stretch; }
  .fe-app-promo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .fe-app-promo-text .fe-app-cta { margin-top: auto; }
}
/* A phone screenshot at full column width dwarfs the text next to it, so it is
   capped and centred rather than stretched to the grid. */
.fe-app-shot { text-align: center; }
.fe-app-shot img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 1rem;
}

/* ---------------------------------------------------------------------------
   Taxonomy tree (/classifications): children load lazily via HTMX, so rows
   must stay cheap to render.
   --------------------------------------------------------------------------- */
/* Master-detail frame: tree left, details right — same grid/framing language
   as the species picker (see .modal .fe-species-picker-body above). */
.fe-tree-browser {
  display: grid;
  /* The tree gets the wider share: its rows carry the indentation. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  height: min(720px, 70vh);
  padding: 0.75rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  border-radius: 0.75rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}
.fe-tree-browser-pane-tree,
.fe-tree-browser-pane-detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fe-tree-browser-pane-detail {
  background: var(--fe-bg);
  border: 1px solid var(--fe-border);
  border-radius: 0.6rem;
}
.fe-tree-scroll-wrap { position: relative; flex: 1; min-height: 0; }
.fe-tree-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  scrollbar-width: thin;
}
/* No sizing of its own: the taxonomy search is the shared .fe-filter-bar /
   .fe-filter-search pair, so it stays visually identical to /observations. */

/* One column on narrow viewports: panes stack and scroll with the page
   instead of fighting over a fixed height. */
@media (max-width: 767.98px) {
  .fe-tree-browser {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .fe-tree-scroll { max-height: 60vh; }
  .fe-tree-browser-pane-detail .fe-tree-scroll { max-height: none; }
}

/* ---- Tree rows ---- */
.fe-tree { list-style: none; margin: 0; padding: 0; }
/* Kept deliberately tight: the taxonomy runs twelve levels deep, so every
   extra 0.5rem per level costs 6rem of label width at the species end — the
   point where the name actually matters. */
.fe-tree-children > .fe-tree {
  margin-left: 0.55rem;
  padding-left: 0.25rem;
  border-left: 1px solid var(--fe-border);
}
.fe-tree-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.fe-tree-row:hover { background: var(--fe-bg-subtle); }
.fe-tree-browser-pane-tree .fe-tree-row:hover { background: var(--fe-bg); }
/* The selection has to survive on a --fe-bg-subtle pane, so it carries the
   accent as a tinted fill plus a wider bar rather than a plain background
   swap — the old var(--fe-bg) version was nearly invisible against the pane. */
.fe-tree-row.is-selected,
/* Beats .fe-tree-browser-pane-tree .fe-tree-row:hover, which is more specific. */
.fe-tree-browser-pane-tree .fe-tree-row.is-selected {
  background: rgba(var(--fe-tone-champagne-rgb), 0.45);
  border-left: 4px solid var(--fe-accent);
  padding-left: calc(0.5rem - 1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.fe-tree-row.is-selected .fe-tree-sci,
.fe-tree-row.is-selected .fe-tree-common {
  font-weight: 600;
  color: var(--fe-text);
}
.fe-tree-row.is-selected .fe-tree-rank { color: var(--fe-text); }

.fe-tree-toggle {
  border: none; background: none; padding: 0;
  width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.35rem;
  color: var(--fe-muted);
  cursor: pointer;
}
.fe-tree-toggle:hover { color: var(--fe-text); }
.fe-tree-toggle--leaf { cursor: default; }
.fe-tree-toggle i { transition: transform 0.18s ease; }
.fe-tree-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* Fixed-size slot even without an image, so labels stay in one column. */
.fe-tree-thumb-wrap {
  flex: 0 0 2.25rem;
  width: 2.25rem; height: 2.25rem;
  border-radius: 0.4rem;
  background: var(--fe-bg-subtle);
  border: 1px solid var(--fe-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fe-tree-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder for taxa without an image, so the row keeps its rhythm. */
.fe-tree-thumb-empty {
  font-size: 1rem;
  color: var(--fe-border);
}

/* flex:1 with min-width:0 is what lets long names ellipsize instead of
   growing the row and sliding underneath the rank label. */
.fe-tree-label {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: var(--fe-text);
}
.fe-tree-label:hover { color: var(--fe-link); }
.fe-tree-sci,
.fe-tree-common {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fe-tree-sci { font-style: italic; line-height: 1.25; }
.fe-tree-common { font-size: 0.85em; color: var(--fe-muted); line-height: 1.25; }
/* Search hits carry the weight; the ancestors around them stay quiet so the
   branch reads as context rather than as further results. */
.fe-tree-row.is-match .fe-tree-sci { font-weight: 600; color: var(--fe-text); }
.fe-tree-row.is-match .fe-tree-common { color: var(--fe-text); }

/* Explanatory line beside the search box. Capped so it stays a caption rather
   than a paragraph, and drops below the search field once space runs out. */
.fe-tree-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Beside the search, filling everything left of the right edge. No max-width:
     it should run out to the same edge as the browser box below. Wraps to its
     own line only once there is less than 18rem left for it. */
  flex: 1 1 18rem;
  min-width: 14rem;
  margin: 0 0 0 0.75rem;
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  background: rgba(var(--fe-tone-sage-rgb), 0.16);
  border: 1px solid var(--fe-border);
  border-radius: 0.85rem;
  color: var(--fe-text);
  font-size: 0.85rem;
  line-height: 1.4;
}
/* Round disc at the far right. Copper on purpose: the search button at the
   other end of the row is already accent, and the panel behind it is sage. */
.fe-tree-hint-icon {
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fe-tone-copper);
  color: #fff;
  font-size: 1.35rem;
}

/* The rank stays flush right; the count is pushed to sit just left of it. */
.fe-tree-rank {
  flex: 0 0 auto;
  padding-left: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fe-muted);
  white-space: nowrap;
}
.fe-tree-count {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 1.9rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--fe-accent);
  border: 1px solid var(--fe-accent);
  color: var(--fe-primary);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}
/* The selected row is champagne, so the plain accent badge would sink into it. */
.fe-tree-row.is-selected .fe-tree-count {
  background: var(--fe-accent-dark);
  border-color: var(--fe-accent-dark);
  color: var(--fe-bg);
}
.fe-tree-spin { font-size: 0.8rem; color: var(--fe-muted); }
.fe-tree-empty { color: var(--fe-muted); padding: 0.5rem; margin: 0; }

/* ---- Detail pane ---- */
.fe-tree-detail { padding: 0.75rem 0.25rem; }
.fe-tree-detail-media { margin-bottom: 1rem; }
/* The flag wrapper must span the pane, otherwise the inline-block shrink-wraps
   to the intrinsic image width and the picture sits small in a wide column. */
.fe-tree-detail-media-frame {
  display: block;
  position: relative;
  width: 100%;
}
.fe-tree-detail-img {
  width: 100%;
  height: auto;
  /* Portraits would otherwise run the pane several screens tall. */
  max-height: 22rem;
  object-fit: cover;
  border-radius: 0.6rem;
  display: block;
}
/* Heading and the full-page link share a row; the link stays top-right and
   keeps its label on one line even when the taxon name wraps. */
.fe-tree-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.fe-tree-detail-head-text { min-width: 0; }
.fe-tree-detail-rank {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fe-muted);
}
.fe-tree-detail-title { font-size: 1.35rem; margin: 0.15rem 0 0.1rem; }
.fe-tree-detail-sci { font-style: italic; color: var(--fe-muted); margin-bottom: 0.5rem; }
.fe-tree-detail-count { color: var(--fe-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }
.fe-tree-detail-count-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--fe-border);
}
.fe-tree-detail-count-link:hover {
  color: var(--fe-link);
  border-bottom-color: var(--fe-link);
}
.fe-tree-detail-desc { margin-bottom: 1rem; }
.fe-tree-detail-link { flex: 0 0 auto; white-space: nowrap; }

/* Empty state keeps the pane from collapsing before the first pick. */
.fe-tree-detail-empty {
  min-height: 14rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--fe-muted);
}
.fe-tree-detail-empty-icon { font-size: 2rem; opacity: 0.5; }
.fe-tree-detail-empty-text { margin: 0; max-width: 22rem; }