/* =========================================================================
   Mangrove Fishes of the Americas — styles
   Chrome (header, nav, panels) follows the STRI / Smithsonian web identity;
   the dashboard reproduces the colour-coded Tableau layout.
   Tableau tones marked (AA) were darkened slightly so white text meets
   WCAG AA contrast (original value in comment).
   ========================================================================= */

:root {
  /* Institutional (sampled from stri.si.edu) */
  --si-navy: #133566;
  --reset: #ffc22e;          /* Reset filters buttons (amber, contrasts with every column colour) */
  --si-blue: #214e8e;
  --si-raspberry: #a62656;
  --si-link: #4090da;
  --si-black: #0a0d0c;
  --si-purple: #3b1933;

  /* Dashboard (sampled from the Tableau workbook) */
  --tb-navy: #1b3664;
  --tb-fishes: #04788a;
  --tb-family: #a0dbee;
  --tb-species: #007d93;      /* (AA) Tableau #00a7c1 */
  --tb-mangrove: #067a3b;     /* (AA) Tableau #069146 */
  --tb-mangrove-head: #0f6634;
  --tb-region: #6b6b6b;       /* (AA) Tableau #808080 */
  --tb-tides: #e6e6e6;
  --tb-legend: #5a6b88;       /* (AA) Tableau #6b7d9b */
  --tb-btn-active: #6e6e6e;   /* (AA) Tableau #898989 */

  --ink: #0e1b2c;
  --paper: #ffffff;
  --focus: #ffd23f;

  --sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }
/* Author 'display' rules must never override the hidden attribute (caused a black box over the map) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--tb-navy); font-size: 16px; line-height: 1.45; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--focus); color: #000; padding: 10px 14px; z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }

/* ---------- Top bar ---------- */
.topbar { background: var(--si-navy); color: #fff; }
.topbar__inner { max-width: 1600px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sponsor { display: flex; flex-direction: column; gap: 3px; color: #fff; text-decoration: none; padding-right: 22px; border-right: 1px solid rgba(255,255,255,.35); }
.sponsor__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.sponsor__logo { display: block; height: 48px; width: auto; }
.sponsor:hover .sponsor__label { text-decoration: underline; }
.wordmark { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.wordmark__logo { width: 56px; height: 56px; border: 1px dashed rgba(255,255,255,.5); border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: rgba(255,255,255,.75); }
.wordmark__text { display: flex; flex-direction: column; }
.wordmark__title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; }
.wordmark__sub { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.4vw, 19px); opacity: .95; }
.utility { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 16px; }
.utility a { color: #fff; text-decoration: none; padding: 6px 2px; }
.utility a:hover { text-decoration: underline; }
.utility__accent { background: var(--si-raspberry); padding: 8px 14px !important; }
.utility__lang { background: none; border: 0; color: #fff; font-weight: 600; padding: 6px 2px; }

.mainnav { background: var(--si-blue); }
.mainnav__list { max-width: 1600px; margin: 0 auto; padding: 0 32px; list-style: none; display: flex; flex-wrap: wrap; }
.mainnav__list li { border-left: 1px solid rgba(255,255,255,.25); }
.mainnav__list li:last-child { border-right: 1px solid rgba(255,255,255,.25); }
.mainnav__list a { display: block; padding: 14px 26px; color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: .01em; }
.mainnav__list a:hover, .mainnav__list a[aria-current="page"] { background: rgba(0,0,0,.18); }

/* ---------- Viewer band ---------- */
.viewer { background: var(--tb-navy); color: #fff; }
.band { display: flex; align-items: center; gap: 20px 28px; padding: 14px 20px; flex-wrap: wrap; border-bottom: 2px solid #fff; }
.band__stats { margin: 0; display: flex; gap: 28px; }
.band__stats div { display: flex; flex-direction: column-reverse; }
.band__stats dt { font-size: 13px; opacity: .85; }
.band__stats dd { margin: 0; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.studies { position: relative; }
.studies__btn { display: flex; flex-direction: column; align-items: flex-start; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.55); color: #fff; padding: 4px 12px 4px 10px; border-radius: 2px; }
.studies__btn:hover, .studies__btn[aria-expanded="true"] { background: rgba(255,255,255,.2); }
.studies__num { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.studies__lbl { font-size: 13px; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: #fff; color: var(--ink); min-width: 260px; box-shadow: 0 10px 30px rgba(0,0,0,.35); display: flex; flex-direction: column; padding: 6px 0; }
.menu [role="menuitem"] { display: block; text-align: left; background: none; border: 0; padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--si-navy); text-decoration: none; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: #eef2f7; }
.band__filters { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.band__chips { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; }
.band__chips .chip { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; border-radius: 16px; padding: 4px 12px; font-size: 14px; min-height: 32px; }
.band__chips .chip:hover { background: rgba(255,255,255,.2); }
.band__chips .none { font-size: 14px; opacity: .85; }
.band__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { border-radius: 2px; padding: 0 16px; min-height: 40px; font-weight: 600; font-size: 15px; border: 1px solid transparent; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--accent { background: var(--si-raspberry); color: #fff; }
.btn--accent:hover { background: #8d1f49; }
.btn--solid { background: var(--si-navy); color: #fff; }
.btn--solid:hover { background: var(--si-blue); }
.btn--line { background: #fff; color: var(--si-navy); border-color: var(--si-navy); }

.status { margin: 0; padding: 8px 20px; font-size: 14px; background: #0f2446; color: #fff; }
.status:empty { display: none; }

/* ---------- Dashboard grid (Tableau layout) ---------- */
.dash {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 13.6fr) minmax(0, 13.4fr) minmax(0, 43fr);
  height: clamp(620px, calc(100vh - 72px), 980px);
}
.col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.head { display: flex; align-items: center; min-height: 52px; padding: 0 14px; }
.head h2 { margin: 0; font-weight: 500; font-size: clamp(18px, 1.55vw, 26px); letter-spacing: .01em; line-height: 1.1; }

/* Fishes */
.col--fishes { background: var(--tb-family); }
.head--fishes { background: var(--tb-fishes); color: #fff; justify-content: space-between; gap: 12px; border-bottom: 3px solid #fff; }
.head__btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.head--fishes { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.sortbtn { background: var(--tb-navy); color: #fff; border: 0; min-height: 40px; padding: 0 14px; font-weight: 600; font-size: clamp(13px, 1vw, 16px); }
.sortbtn[aria-expanded="true"] { background: #fff; color: var(--tb-navy); }
.sortbtn[aria-pressed="true"] { background: #fff; color: var(--tb-navy); }
.search { background: var(--tb-fishes); padding: 8px 12px 10px; }
.search input { width: 100%; min-height: 40px; border: 0; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.fishes__lists { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
.pane { display: flex; flex-direction: column; min-height: 0; }
.pane--species { background: var(--tb-species); color: #fff; }
.pane__title { margin: 0; padding: 10px 12px 6px; font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.pane--family .pane__title { color: #1f4d5c; }
.pane__all { display: block; font-size: 13px; text-transform: none; letter-spacing: 0; opacity: .9; }

.list { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; min-height: 0; flex: 1; }
.list button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 5px 8px; font-size: 16px; line-height: 1.3; color: inherit; border-radius: 2px; }
.list button:hover { text-decoration: underline; }
.list--family { color: #0b1f2a; }
.list--family button[aria-pressed="true"] { background: var(--tb-navy); color: #fff; }
.list--species button { font-style: italic; }
.list--species button[aria-pressed="true"] { background: #fff; color: var(--tb-species); font-weight: 600; }
.list .grp { font-size: 12px; font-style: normal; text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px 2px; opacity: .85; }
.list .empty { padding: 8px; font-size: 14px; font-style: normal; opacity: .9; }

/* Mangrove taxa */
.col--mangrove { background: var(--tb-mangrove); color: #fff; }
.head--mangrove { background: var(--tb-mangrove-head); }
.mangrove__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.mgtable { padding: 14px 8px 8px; }
.mgrow { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 4px; border-top: 2px solid var(--tb-mangrove-head); padding: 2px 0; }
.mgrow > * { min-width: 0; }
.mgrow button { overflow-wrap: normal; word-break: keep-all; }
/* Genus and its epithets side by side; the epithet list drops below the genus when the column is too narrow */
.mgrow { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 4px; }
.mgrow .mg-genus { flex: 0 0 auto; }
.mgrow ul { flex: 1 0 auto; }
.mgrow button { font-size: clamp(12.5px, 0.98vw, 16px); padding: 3px 4px; }
.col--mangrove { overflow: hidden; }
.mgrow:last-child { border-bottom: 2px solid var(--tb-mangrove-head); }
.mgrow button { background: none; border: 0; color: #fff; text-align: left; padding: 3px 5px; font-size: clamp(13px, 1.05vw, 16px); border-radius: 2px; }
.mgrow .mg-genus { font-weight: 700; font-style: italic; align-self: start; }
.mgrow ul { list-style: none; margin: 0; padding: 0; }
.mgrow ul button { font-style: italic; width: 100%; }
.mgrow button:hover { text-decoration: underline; }
.mgrow button[aria-pressed="true"] { background: #fff; color: var(--tb-mangrove-head); font-weight: 600; }
.mgrow button.is-partial { box-shadow: inset 3px 0 0 #fff; }

.modepanel { margin-top: auto; }
.modepanel--typology { background: var(--tb-mangrove); }
.modepanel--typology h3 { margin: 0; background: var(--tb-mangrove-head); padding: 12px 14px; font-weight: 500; font-size: clamp(17px, 1.4vw, 22px); }
.modepanel--typology ul { list-style: none; margin: 0; padding: 10px 6px 14px; }
.modepanel--typology button { display: block; width: 100%; text-align: left; background: none; border: 0; color: #fff; font-weight: 600; font-size: 18px; padding: 8px 8px; border-radius: 2px; }
.modepanel--typology button[aria-pressed="true"] { background: #fff; color: var(--tb-mangrove-head); }
.modepanel--tides { background: var(--tb-tides); color: var(--ink); }
.modepanel--tides h3 { margin: 0; padding: 12px 14px 6px; font-weight: 400; font-size: 24px; text-align: center; color: #333; }
.tides { width: 100%; border-collapse: collapse; font-size: 15px; }
.tides th { text-align: left; font-weight: 400; color: #333; padding: 4px 8px; }
.tides td { padding: 0; border-top: 1px solid #c9c9c9; }
.tides .reg { font-weight: 700; padding: 4px 8px; vertical-align: top; }
.tides button { width: 100%; text-align: left; background: #f4f4f4; border: 0; padding: 5px 8px; color: #333; font-size: 15px; }
.tides button[aria-pressed="true"] { background: var(--tb-navy); color: #fff; }

/* Regionalization */
.col--region { background: var(--tb-region); color: #fff; }
.head--region { background: #000; }
.region__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 18px; }
.blackhead { margin: 0; background: #000; color: #fff; padding: 10px 12px; font-weight: 400; font-size: clamp(17px, 1.35vw, 22px); text-transform: uppercase; letter-spacing: .03em; }
.blackhead--split { display: flex; justify-content: space-between; gap: 12px; }
.list--region { flex: 0 0 auto; padding: 12px 6px 16px; }
.list--region button { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); }
.list--region button[aria-pressed="true"], .list--country button[aria-pressed="true"] { background: #fff; color: #222; }
.list--country { padding-top: 8px; }
.country-row { display: flex; align-items: center; gap: 4px; }
.country-row > button[data-dim] { flex: 1; font-weight: 700; }
.expander { flex: 0 0 auto; width: 32px !important; height: 32px; padding: 0 !important; text-align: center !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 2px; font-size: 20px !important; line-height: 1 !important; font-weight: 600; }
.expander:hover { background: rgba(255,255,255,.15) !important; text-decoration: none !important; }
.list--country ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 14px; }
.list--country ul button { font-weight: 400; font-size: 15px; }

/* Map column */
.col--map { position: relative; background: #03080e; }
.map { flex: 1; min-height: 0; position: relative; }
.map__fallback { position: absolute; inset: 0 0 150px 0; background: #03080e; display: grid; place-items: center; padding: 24px; text-align: center; color: #cfd8e3; font-size: 16px; }
.legend { background: var(--tb-legend); display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; min-height: 64px; align-items: stretch; }
.legend:empty { display: none; }
.legend__item { flex: 1 1 120px; display: flex; flex-direction: column; background: #d6dbe3; color: #2b3440; text-align: center; font-size: 17px; border: 2px solid transparent; padding: 0; font-family: inherit; }
.legend__item:hover:not(:disabled) { border-color: #fff; }
.legend__item[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--tb-navy) inset; font-weight: 700; }
.legend.has-sel .legend__item[aria-pressed="false"] { opacity: .5; }
.legend__item:disabled { opacity: .35; cursor: not-allowed; }
.legend__label { padding: 5px 6px; flex: 1; display: flex; align-items: center; justify-content: center; line-height: 1.15; }
.legend__label { flex-direction: column; gap: 1px; }
.legend__range { white-space: nowrap; font-size: .82em; }
.legend--many .legend__item { flex: 1 1 0; min-width: 0; font-size: 15px; }
.legend--many .legend__name { overflow-wrap: normal; hyphens: manual; }
@media (max-width: 640px) {
  .legend--many { justify-content: center; }
  .legend--many .legend__item { flex: 0 1 calc(33.333% - 4px); }
}
.legend__swatch { height: 26px; border-top: 2px solid var(--tb-legend); display: grid; place-items: center; width: 100%; }
.legend__swatch span { width: 32%; height: 100%; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: #fff; padding: 3px 0 0; }
.modes button { background: var(--tb-navy); color: #fff; border: 0; min-height: 50px; font-weight: 600; font-size: clamp(15px, 1.2vw, 18px); }
.modes button:hover { background: var(--si-blue); }
.modes button[aria-pressed="true"] { background: var(--tb-btn-active); }
.source { margin: 0; padding: 6px 12px 8px; font-size: 13px; background: var(--tb-navy); color: #dfe6f0; min-height: 30px; }
.source a { color: #bcd9f5; }

/* Mapbox popup = Tableau tooltip */
.mapboxgl-popup-content { border-radius: 0; padding: 12px 14px; font-family: var(--sans); color: #1a1a1a; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.tt { width: 280px; max-width: 70vw; }
.tt__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; }
.tt__place { margin: 2px 0 8px; font-size: 13px; color: #444; }
.tt__grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; border-top: 1px solid #ddd; padding-top: 8px; }
.tt__f dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #555; line-height: 1.2; }
.tt__f dd { margin: 1px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tt__foot { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid #ddd; font-size: 12.5px; color: #333; line-height: 1.35; }

/* ---------- Landing ---------- */
.hero {
  /* Photo shown at its own proportion (1261 x 797) when the screen allows; anchored at the bottom so the fish stay in view */
  position: relative; overflow: hidden; display: flex; align-items: flex-start;
  /* Fits the first screen below the site header (--above-hero is measured by landing.js) so the fish at the bottom are visible without scrolling */
  min-height: clamp(440px, min(63.2vw, calc(100vh - var(--above-hero, 150px))), 1100px); min-height: clamp(440px, min(63.2vw, calc(100svh - var(--above-hero, 150px))), 1100px); color: #fff; background-color: #10302b;
}
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* Scrim only behind the text (top-left); the lower part of the photo, where the fish are, stays untouched */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,15,30,.80) 0%, rgba(5,15,30,.55) 30%, rgba(5,15,30,.15) 52%, rgba(5,15,30,0) 62%),
              linear-gradient(90deg, rgba(5,15,30,.45) 0%, rgba(5,15,30,0) 60%) top left / 100% 60% no-repeat; }
.hero__inner { position: relative; z-index: 2; }
.hero__inner { max-width: 1600px; width: 100%; margin: 0 auto; padding: clamp(32px, 4.5vw, 64px) 32px 32px; }
.hero__title { margin: 0; font-weight: 700; font-size: clamp(40px, 5.4vw, 92px); line-height: .98; letter-spacing: -.01em; max-width: 16ch; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero__lead { margin: 18px 0 28px; text-shadow: 0 1px 10px rgba(0,0,0,.4); font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 30px); line-height: 1.35; max-width: 34ch; }
.hero__cta { display: inline-flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; }
.hero__arrow { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--si-link); display: grid; place-items: center; transition: background-color .2s; }
.hero__cta:hover .hero__arrow { background: var(--si-link); }
.hero__cta:hover span:last-child { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .hero__arrow { transition: none; } }
@media (max-width: 720px) {
  .sponsor { border-right: 0; padding-right: 0; }
  .sponsor__logo { height: 38px; }
  /* Phones: text on navy, then the whole photo underneath */
  .hero { display: flex; flex-direction: column; min-height: 0; background: var(--si-navy); }
  .hero__inner { order: 1; }
  .hero__media { order: 2; }
  .hero::before { display: none; }
  .hero__media img { position: static; display: block; width: 100%; height: auto; }
  .hero__inner { padding: 36px 16px 28px; }
  .hero__credit { order: 3; position: static; align-self: flex-end; margin: 6px 8px 8px; font-size: 12px; background: none; padding: 0; }
}
.hero__ctas { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; }
/* Primary call to action: large tab-like button (requested by the team) */
.hero__btn { display: inline-flex; align-items: center; gap: 18px; min-height: 72px; padding: 0 34px 0 38px;
  background: var(--si-raspberry); color: #fff; text-decoration: none; font-weight: 700;
  font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .01em; border-radius: 2px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: background-color .2s, transform .2s; }
.hero__btn:hover { background: #8d1f49; transform: translateY(-1px); }
.hero__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .hero__btn { transition: none; } .hero__btn:hover { transform: none; } }
.hero__cta--secondary .hero__arrow { border-color: rgba(255,255,255,.75); }
.hero__cta--secondary:hover .hero__arrow { background: rgba(255,255,255,.2); }
.figures__link { position: relative; }
.figlink { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.figlink::after { content: ''; position: absolute; inset: 0; }
.figures__link:hover { background: rgba(255,255,255,.08); }
@media (min-width: 721px) { .hero__credit { position: absolute; right: 16px; bottom: 12px; } }
.hero__credit { z-index: 2; margin: 0; max-width: calc(100% - 32px); padding: 4px 10px; font-size: 13px; line-height: 1.3; color: #fff; background: rgba(5,15,30,.6); border-radius: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.figures { background: var(--si-navy); color: #fff; }
.figures__list { max-width: 1600px; margin: 0 auto; padding: 28px 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.figures__list div { display: flex; flex-direction: column-reverse; border-left: 1px solid rgba(255,255,255,.3); padding-left: 16px; }
.figures__list dt { font-size: 16px; opacity: .9; }
.figures__list dd { margin: 0; font-size: clamp(30px, 3vw, 46px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }

.sponsor-band { background: var(--si-navy); color: #fff; border-top: 1px solid rgba(255,255,255,.18); }
.sponsor-band__inner { max-width: 1600px; margin: 0 auto; padding: 48px clamp(24px, 5vw, 72px); display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.sponsor-band__logo { height: 60px; width: auto; flex: 0 0 auto; }
.sponsor-band__text { flex: 1 1 420px; max-width: 72ch; }
.sponsor-band h2 { margin: 0 0 10px; font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); }
.sponsor-band p { margin: 0 0 12px; font-family: var(--serif); font-size: 18px; line-height: 1.6; }
/* ---------- Contributors ---------- */
.contrib { background: #fff; color: var(--ink); }
.contrib__inner { max-width: 1600px; margin: 0 auto; padding: 56px clamp(24px, 5vw, 72px) 64px; }
.contrib h2 { margin: 0 0 28px; font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); color: var(--si-navy); }
.contrib__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.contrib__person { border-top: 3px solid var(--si-navy); padding-top: 16px; }
.contrib__name { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--si-navy); }
.contrib__aff { list-style: none; margin: 0 0 10px; padding: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.contrib__aff li + li { margin-top: 6px; }
.contrib__mail { color: var(--si-blue); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .contrib__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .contrib__list { grid-template-columns: minmax(0, 1fr); } }
/* Acknowledgements */
.ack { background: #f4f5f7; color: var(--ink); border-top: 1px solid #dde1e7; }
.ack__inner { padding-top: 44px; padding-bottom: 48px; }
.ack h2 { margin: 0 0 18px; font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); color: var(--si-navy); }
.ack__list { margin: 0; padding: 0 0 0 1.1em; max-width: 72ch; font-family: var(--serif); font-size: 17px; line-height: 1.6; }
.ack__list li + li { margin-top: 8px; }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { color: #fff; padding: 56px clamp(24px, 5vw, 72px); }
.panel h2 { margin: 0 0 10px; font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); }
.panel p { max-width: 62ch; }
.panel__lead { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55; }
.panel--purple { background: var(--si-purple); }
.panel--black { background: var(--si-black); }
.panel__link { display: inline-block; margin-top: 8px; color: #fff; font-weight: 600; font-size: 18px; border-bottom: 2px solid var(--si-link); text-decoration: none; padding-bottom: 2px; }
.panel__link:hover { border-bottom-color: #fff; }
.article-ref { margin: 22px 0 0; padding: 22px 24px; border-left: 4px solid var(--si-link); background: rgba(255,255,255,.06); font-family: var(--serif); font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; min-height: 110px; max-width: 70ch; }
.article-ref.is-pending { font-style: italic; color: #d5dbe3; }

.footer { background: var(--si-navy); color: #dfe6f0; padding: 22px 32px; font-size: 14px; }
.footer p { max-width: 1600px; margin: 0 auto; }

/* ---------- Bibliography filter panel ---------- */
.bibpanel { position: fixed; z-index: 40; background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(0,0,0,.4); display: flex; flex-direction: column; max-height: min(70vh, 640px); }
.bibpanel__head { display: flex; justify-content: space-between; align-items: center; background: var(--si-navy); color: #fff; padding: 10px 14px; }
.bibpanel__head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.bibpanel__close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; width: 40px; height: 40px; }
.bibpanel__tools { padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; border-bottom: 1px solid #dde3ea; }
.bibpanel__tools input { grid-column: 1 / -1; min-height: 40px; border: 1px solid #b9c5d4; padding: 0 10px; font: inherit; }
.bibpanel__info { margin: 0; font-size: 13px; color: #3f526b; }
.bibpanel__clear { background: none; border: 0; color: var(--si-blue); font-weight: 600; text-decoration: underline; padding: 4px; }
.bibpanel__list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.bibitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 14px; align-items: start; cursor: pointer; font-size: 14px; line-height: 1.4; }
.bibitem:hover { background: #f2f5f9; }
.bibitem input { margin-top: 3px; width: 18px; height: 18px; }
.bibitem__n { font-size: 12px; color: #4a5d75; white-space: nowrap; }
.bibpanel__empty { padding: 14px; font-size: 14px; }

/* ---------- Bibliography page ---------- */
.biblio { background: #fff; color: var(--ink); }
.biblio__inner { max-width: 1400px; margin: 0 auto; padding: 48px 32px 64px; }
.biblio h1 { margin: 0 0 6px; font-weight: 700; font-size: clamp(32px, 4vw, 52px); color: var(--si-navy); }
.biblio__lead { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-size: 19px; }
.biblio__tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.biblio__tools input { flex: 1 1 320px; min-height: 44px; border: 1px solid #b9c5d4; padding: 0 12px; font: inherit; font-size: 16px; }
.biblio__count { margin: 0 0 8px; font-size: 14px; color: #3f526b; }
.reftable { width: 100%; border-collapse: collapse; font-size: 15px; }
.reftable th { text-align: left; background: var(--si-navy); color: #fff; padding: 10px; font-weight: 600; position: sticky; top: 0; }
.reftable td { padding: 10px; border-bottom: 1px solid #e3e8ef; vertical-align: top; }
.reftable tr:nth-child(even) td { background: #f6f8fb; }
.reftable .ref { font-family: var(--serif); line-height: 1.55; }
.reftable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reftable .doi { overflow-wrap: anywhere; min-width: 190px; max-width: 320px; }
.reftable a { color: var(--si-blue); font-weight: 600; }
.reftable .na { color: #6b7686; }
.reftable .map a { white-space: nowrap; }
.tablewrap { overflow-x: auto; }

/* ---------- Dialog ---------- */
.dialog { border: 0; padding: 0; max-width: 640px; width: calc(100% - 32px); color: var(--ink); }
.dialog::backdrop { background: rgba(5, 15, 30, .72); }
.dialog__form { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.dialog h2 { margin: 0; font-size: 30px; color: var(--si-navy); }
.dialog__lead { margin: 0; font-family: var(--serif); font-style: italic; }
.dialog__summary { background: #eef2f7; padding: 12px 16px; }
.dialog__summary p { margin: 4px 0; }
.dialog__counts { font-variant-numeric: tabular-nums; font-weight: 600; }
.dialog__fmt { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dialog__fmt legend { font-weight: 700; margin-bottom: 6px; }
.dialog__fmt label { display: flex; gap: 8px; align-items: center; min-height: 32px; }
.dialog__note { margin: 0; font-size: 14px; }
.dialog__progress { margin: 0; font-size: 14px; min-height: 20px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .figures__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
  .col--map { grid-column: 1 / -1; order: -1; height: 70vh; min-height: 460px; }
  .col--fishes { grid-column: 1 / -1; }
  .fishes__lists, .col--mangrove, .col--region { height: 460px; }
  .col--mangrove { grid-column: span 1; }
  .col--region { grid-column: span 2; }
}
@media (max-width: 720px) {
  .topbar__inner, .mainnav__list, .section__inner { padding-left: 16px; padding-right: 16px; }
  .utility { gap: 14px; font-size: 15px; }
  .mainnav__list a { padding: 12px 14px; font-size: 15px; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .col--region, .col--mangrove { grid-column: 1 / -1; }
  .band__stats { gap: 18px; }
  .band__stats dd { font-size: 22px; }
  .modes button { font-size: 15px; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .figures__list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px 16px; }
  .hero__inner { padding: 36px 16px 28px; }
}

/* ---------- Reset filters buttons (v2.9): four copies, faint when there is nothing to reset ---------- */
.reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; font: inherit; font-size: 19px; font-weight: 700;
  background: var(--reset); color: var(--si-navy); border: 2px solid var(--reset); border-radius: 3px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.reset::before { content: "↺"; font-size: 1.3em; line-height: 1; }
.reset:hover { background: #ffd666; border-color: #ffd666; }
.reset:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* No filters: amber outline on a dark backing (contrast >= 7:1 on every column colour) */
.reset.is-idle { background: rgba(10,20,40,.72); color: var(--reset); box-shadow: none; }
.reset.is-idle:hover { background: rgba(10,20,40,.9); }
.colfoot { padding: 10px; display: flex; }
.colfoot .reset { flex: 1; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; padding: 8px 12px; }
.colfoot--mangrove .reset { font-size: 17px; }
.colfoot--fishes { background: var(--si-navy); }
.colfoot--mangrove { padding: 4px 10px 14px; }
.legendbar { display: flex; align-items: stretch; background: var(--tb-legend); }
.legendbar .legend { flex: 1; }
.legendbar .legend:empty { display: none; }
.reset--legend { margin: 8px 8px 8px auto; align-self: center; }
@media (max-width: 640px) { .legendbar { flex-wrap: wrap; } .reset--legend { margin: 0 8px 8px; flex: 1; } }

/* ---------- Area selection on the map ---------- */
.area-ctrl { display: grid !important; place-items: center; color: #333; }
.area-ctrl[aria-pressed="true"] { background: var(--si-navy) !important; color: #fff; }
.mapboxgl-canvas-container.is-drawing, .mapboxgl-canvas-container.is-drawing .mapboxgl-canvas { cursor: crosshair !important; touch-action: none; }
.area-box { position: absolute; top: 0; left: 0; width: 0; height: 0; border: 2px dashed #fff; background: rgba(255,255,255,.14); pointer-events: none; z-index: 2; }
.area-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(14,27,44,.9); color: #fff; padding: 6px 12px; font-size: 14px; border-radius: 2px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Studies panel: studies behind the current selection ---------- */
.menu { width: min(560px, calc(100vw - 32px)); max-height: min(75vh, 720px); overflow-y: auto; }
.menu .menu__item { display: block; text-align: left; background: none; border: 0; padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--si-navy); text-decoration: none; cursor: pointer; }
.menu .menu__item:hover, .menu .menu__item:focus-visible { background: #eef2f7; }
.menu__sel { border-top: 1px solid #dde1e7; margin-top: 6px; padding: 12px 16px 6px; }
.menu__seltitle { margin: 0 0 2px; font-size: 16px; color: var(--si-navy); }
.menu__selnote { margin: 0 0 8px; font-size: 13px; color: #4a5568; }
.menu__sellist { margin: 0; padding: 0 0 0 1.4em; font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.menu__sellist li { padding: 6px 0; border-bottom: 1px solid #eef0f3; }
.menu__sellist a { color: var(--si-blue); }
.menu__selmeta { display: block; font-family: var(--sans, inherit); font-size: 12.5px; color: #4a5568; margin-top: 2px; }
.menu__selnone { list-style: none; margin-left: -1.4em; color: #4a5568; }

/* ---------- Acknowledgements as a paragraph ---------- */
.ack__text { margin: 0; max-width: 80ch; font-family: var(--serif); font-size: 17px; line-height: 1.65; }

/* Website/database citation (v2.16) */
.article-ref--site { margin: 14px 0 26px; }
.article-ref--site a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-ref--site a:hover { color: var(--si-link); }