/* Zone Edges species filter - base (dark) styles. Species filter lane,
   29 Oct 2026. Light-theme rules live in theme-light.css /
   theme-light-premium.css (body.theme-light scoped). */

/* On-map pill: top centre. A chosen species shows in Pro/Custom while Zone
   Edges is on; never in Lite. On phones mobile-control-layout.js puts it on
   the next free row under the top pills and any notices (Rosco 1 Nov). */
.ps-species-pill {
  position: absolute;
  top: calc(84px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  display: none;
  align-items: center;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: rgba(4, 16, 30, 0.88);
  border: 1px solid rgba(53, 191, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  color: #e8f3f9;
  font: 600 12px/1.3 system-ui, -apple-system, sans-serif;
}
.ps-species-pill.show { display: flex; }
.ps-species-pill.show.ps-popup-open { display: none; }
.ps-species-pill.is-all { border-color: rgba(117, 194, 226, 0.25); color: #cfe3ee; }
body:not(.ps-lite) .ps-species-pill.is-all { display: none; }
.ps-species-pill button {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-height: 32px;
}
.ps-species-pill-open { padding: 4px 6px 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-species-pill.is-all .ps-species-pill-open { padding-right: 14px; }
.ps-species-pill-k { font-weight: 500; opacity: 0.75; }
.ps-species-pill-name { color: #6fd3ff; }
.ps-species-caret { opacity: 0.7; margin-left: 2px; }
.ps-species-pill-clear { padding: 4px 12px 4px 6px; opacity: 0.8; font-size: 13px; }
.ps-species-pill-clear[hidden] { display: none; }
.ps-species-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(6, 20, 36, 0.97);
  border: 1px solid rgba(117, 194, 226, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ps-species-menu[hidden] { display: none; }
.ps-species-menu-head { padding: 6px 8px 8px; font-size: 11px; font-weight: 500; opacity: 0.75; line-height: 1.35; white-space: normal; }
.ps-species-menu .ps-species-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  min-height: 34px;
  font-weight: 500;
}
.ps-species-menu .ps-species-option:hover { background: rgba(53, 191, 255, 0.12); }
.ps-species-menu .ps-species-option[aria-selected="true"] { background: rgba(53, 191, 255, 0.2); color: #6fd3ff; font-weight: 700; }
.ps-species-menu .ps-species-option[aria-selected="true"]::after { content: "\2713"; float: right; }

/* Pro Layers panel: Zone Edges row picker, above Less / More. */
.layer-row .ps-species-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.layer-row .ps-species-row-label { font-size: 10px; color: #8aa3b4; letter-spacing: 0.04em; text-transform: uppercase; }
.layer-row .ps-species-select {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(117, 194, 226, 0.35);
  background: rgba(4, 16, 30, 0.6);
  color: #e8f3f9;
  font: 500 12px system-ui, -apple-system, sans-serif;
}

/* "Why here?" popup species line. */
.ps-species-note { margin: 4px 0 6px; padding: 4px 6px 4px 8px; border-radius: 8px; background: rgba(53, 191, 255, 0.1); border-left: 3px solid #35bfff; font-size: 12px; line-height: 1.35; }
.ps-species-note.ps-species-edge { border-left-color: #f0b84a; }
.ps-species-note.ps-species-out { border-left-color: #8a9aa6; }
.ps-species-note.ps-species-unknown { border-left-color: #8a9aa6; }
.ps-species-note-sub { margin-top: 3px; font-size: 10.5px; opacity: 0.75; }
.ps-species-note-head { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.ps-species-note-k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.ps-species-note-toggle {
  appearance: none; margin-left: auto; width: 20px; height: 20px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit;
  font: italic 700 11px/18px Georgia, serif; text-align: center; cursor: pointer; opacity: 0.8;
}
.ps-species-note.open .ps-species-note-toggle { background: #35bfff; border-color: #35bfff; color: #04101e; opacity: 1; }
.ps-species-note-body { margin-top: 5px; }
.ps-species-note-body[hidden] { display: none; }