/* Web of Life public site: landing page, map, network sheet, 3D view. */

:root {
  --blue: #4c8ffd;
  --blue-dark: #2e6fd6;
  --blue-soft: #eaf2ff;
  --text: #333;
  --muted: #888;
  --line: #e4e7ec;
  --row-alt: #f8f9fb;
  --panel: #fff;
  --shadow: 0 6px 24px rgba(20, 30, 50, 0.16);
  --radius: 8px;
  --font: "Helvetica Neue", Arial, system-ui, sans-serif;
  --title-font: Arial, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 13px/1.45 var(--font); color: var(--text); background: #fff; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.badge { display: inline-block; padding: 0 6px; border-radius: 9px; background: #fff3cd; color: #7a5b00; font-size: 11px; font-weight: normal; }
.b {
  display: inline-block; width: 1.25em; height: 1.25em; margin-right: 1px; border: 1.5px solid currentColor;
  border-radius: 50%; text-align: center; line-height: 1.1em; font-weight: bold;
}

/* Landing page ---------------------------------------------------------- */

/* Sizes follow the legacy layout, 520 px wide: 1cqw is 5.2 legacy pixels. */
.landing-page { min-height: 100vh; display: flex; }
.landing { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.sphere { position: relative; container-type: inline-size; width: min(94vw, calc((100vh - 190px) * 520 / 545), 600px); }
.spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.spokes line { stroke: #f0f0f0; stroke-width: 4; }
.hub {
  position: absolute; width: 32.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: url("../img/sphere-center-gray.e541fe81d640.png") center / contain no-repeat;
}
.masthead { position: absolute; left: 7.31%; top: 31.19%; z-index: 2; pointer-events: none; }
.masthead .title {
  pointer-events: auto; font: bold 13.08cqw / 1.25 Arial, var(--font); color: var(--blue);
  text-shadow: 0.38cqw 0.38cqw 0 #e8e8e8; white-space: nowrap;
}
.masthead .title:hover { text-decoration: none; color: var(--blue-dark); }
.slogan {
  position: absolute; top: 13.46cqw; left: -1.15cqw; margin: 0; white-space: nowrap;
  font: 3.85cqw Verdana, var(--font); letter-spacing: 0.26cqw; color: #888; text-shadow: 0.38cqw 0.38cqw 0 #e8e8e8;
}
.satellite {
  position: absolute; width: 19.62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  transition: transform 0.2s;
}
.satellite img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.2s; }
.satellite .blue { opacity: 0; }
.satellite[href]:hover, .satellite[href]:focus-visible { transform: translate(-50%, -50%) scale(1.2); text-decoration: none; }
.satellite[href]:hover .blue, .satellite[href]:focus-visible .blue { opacity: 1; }
.satellite[href]:hover .gray, .satellite[href]:focus-visible .gray { opacity: 0; }
.satellite span {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 1px;
  white-space: nowrap; font: clamp(11px, 2.4cqw, 13px) Verdana, var(--font); color: #888; transition: color 0.2s;
}
.satellite[href]:hover span { color: var(--blue); }
.not-available {
  width: min(300px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--text); font: 13px/1.5 var(--font);
}
.not-available::backdrop { background: transparent; }
.not-available > div { position: relative; padding: 16px 18px 12px; }
.not-available .close { position: absolute; top: 6px; right: 6px; }
.not-available p { margin: 0 22px 8px 0; }
.not-available ul { margin: 0; padding-left: 18px; list-style: "›  "; }
.not-available li::marker { color: var(--blue); font-weight: bold; }
.not-available a { font-size: 14px; }
.landing-footer { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 10px; }
.landing-footer .lab { display: inline-flex; align-items: center; font: 20px Arial, var(--font); color: #888; }
.landing-footer .lab:hover { color: #fd9900; text-decoration: none; }
.landing-footer .lab .b {
  width: 24px; height: 24px; margin-right: 1px; border: 1px solid #777; background: #8a8a8a; color: #fff;
  font-weight: normal; line-height: 21px;
}
.landing-footer .lab:hover .b { border-color: #e08600; background: #fd9900; }
.masthead .title { display: inline-block; transform-origin: 0 0; }

/* The legacy intro: spheres appear one by one with their links, the title grows, the slogan types out. */
@media (prefers-reduced-motion: no-preference) {
  .landing .hub { animation: fade-in 150ms ease-out both; }
  .landing .satellite { animation: fade-in 150ms ease-out both; animation-delay: calc(300ms + var(--i) * 150ms); }
  .landing .spokes line {
    stroke-dasharray: 1; animation: draw-link 150ms linear both; animation-delay: calc(450ms + var(--i) * 150ms);
  }
  .landing .title { animation: title-grow 600ms ease-in-out 1800ms both; }
  .landing .slogan { animation: type-out 700ms steps(28, end) 2400ms both; }
  .landing .lab { animation: fade-in 600ms ease 3500ms both; }
  .landing .supported { animation: fade-in 600ms ease 4100ms both; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes draw-link { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes title-grow {
  0% { opacity: 0; transform: translate(28.3cqw, 8.1cqw) scale(0.147); }
  1% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes type-out { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.supported { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 640px; color: var(--muted); font-size: 11px; text-align: center; }

/* Map page ------------------------------------------------------------- */

.map-page { height: 100vh; overflow: hidden; }
#map { position: absolute; inset: 0; }

.toolbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px 14px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14);
}
.toolbar .brand { font: bold 18px var(--title-font); color: var(--blue); white-space: nowrap; }
.toolbar .brand:hover { text-decoration: none; color: var(--blue-dark); }
.filter { display: flex; align-items: center; gap: 6px; font-weight: bold; color: #555; position: relative; }
.filter select, .range-toggle {
  min-width: 112px; height: 28px; padding: 0 8px; border: 1px solid #ccd2db; border-radius: 5px; background: #fff;
  font-weight: normal; text-align: left; cursor: pointer;
}
.range-toggle::after { content: " ▾"; color: var(--muted); }
.popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; padding: 10px 12px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); font-weight: normal;
}
.range .popover label, .structure-filter .popover label, .threatened-filter .popover label {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0;
}
.structure-filter .popover { min-width: 220px; }
.structure-filter .popover input { width: 90px; height: 26px; padding: 0 6px; border: 1px solid #ccd2db; border-radius: 4px; }
.popover-title { margin: 6px 0 2px; color: #555; font-weight: bold; }
.popover-title:first-child { margin-top: 0; }
.structure-toggle { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.threatened-filter .popover { min-width: 220px; }
.threatened-filter .popover label.category { justify-content: flex-start; gap: 6px; margin: 2px 0; }
.threatened-filter .popover input[type="number"] { width: 90px; height: 26px; padding: 0 6px; border: 1px solid #ccd2db; border-radius: 4px; }
.threatened-toggle { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download-menu { min-width: 250px; }
.download-menu .everything { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.range .popover input { width: 90px; height: 26px; padding: 0 6px; border: 1px solid #ccd2db; border-radius: 4px; }
.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > button, .menu > a, .dropdown > button {
  padding: 5px 9px; border: 0; border-radius: 5px; background: none; color: var(--blue); font-weight: bold; cursor: pointer;
}
.menu > button:hover, .menu > a:hover, .dropdown > button:hover { background: var(--blue-soft); text-decoration: none; }
.menu [aria-expanded="true"] { background: var(--blue-soft); }
.dropdown { position: relative; }
.download-menu { left: auto; right: 0; }
.download-menu label { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.format-buttons { display: flex; gap: 6px; }
.format-buttons button, .button, .download-bar button {
  padding: 4px 12px; border: 1px solid var(--blue); border-radius: 5px; background: #fff; color: var(--blue);
  font-weight: bold; cursor: pointer;
}
.format-buttons button:hover, .button:hover, .download-bar button:hover { background: var(--blue); color: #fff; text-decoration: none; }
button.link { padding: 0; border: 0; background: none; color: var(--blue); font-weight: bold; cursor: pointer; }
button.link:hover { text-decoration: underline; }

.panel {
  position: absolute; top: calc(var(--toolbar-height, 46px) + 12px); left: 14px; z-index: 15; display: flex; flex-direction: column;
  width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - var(--toolbar-height, 46px) - 70px);
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }
/* Opens over the Networks window, 40 px down and right, and always in front of it (map.js places it). */
.species-panel { z-index: 16; top: calc(var(--toolbar-height, 46px) + 52px); left: 54px; width: min(480px, calc(100vw - 28px)); }
/* In front of the network sheet: they open from its links too. */
.help-panel { z-index: 20; width: min(680px, calc(100vw - 28px)); }
/* The help is usually read on its own, so it opens as large as the Tutorial (the live site's took the whole map). */
.help-main-panel { width: min(1100px, calc(100vw - 28px)); }
.r-panel { width: min(800px, calc(100vw - 28px)); }
.tutorial-panel { width: min(1100px, calc(100vw - 28px)); height: calc(100vh - var(--toolbar-height, 46px) - 70px); }
.tutorial-panel .panel-header a { font-size: 12px; }
.tutorial-panel .panel-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.tutorial-panel iframe { display: block; width: 100%; height: 100%; border: 0; border-top: 1px solid var(--line); }
.panel-body.prose h2 { margin: 18px 0 4px; font-size: 14px; color: #555; }
.results-panel { width: min(960px, calc(100vw - 28px)); }
.species-table .group td { background: var(--row-alt); }
.panel-header { display: flex; align-items: center; gap: 14px; padding: 12px 16px 6px; }
.panel-header h2 { margin: 0 auto 0 0; font-size: 18px; font-weight: bold; color: #555; }
@media (min-width: 761px) {
  .panel-header { cursor: move; user-select: none; touch-action: none; }
  .panel-header button { cursor: pointer; }
}
.panel-caption {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px;
}
.close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.close:hover { background: #f0f2f5; color: var(--text); }
.panel-tools { display: flex; align-items: center; gap: 12px; padding: 4px 16px 8px; }
.panel-tools input[type="search"], .species-tools input[type="search"] {
  flex: 0 1 260px; height: 28px; padding: 0 8px; border: 1px solid #ccd2db; border-radius: 5px;
}
.panel-hint { margin: 0; padding: 0 16px 8px; }
.panel-body { overflow: auto; padding: 0 16px 14px; }
.prose h3 { margin: 18px 0 4px; font-size: 14px; color: #555; }
.prose p, .prose ul { margin: 0 0 8px; }
.help-toc { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.prose h4 { margin: 14px 0 4px; font-size: 13px; color: #555; }
.help-figure { margin: 4px 0 12px; }
.help-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.help-legend { list-style: none; padding-left: 4px; }
.legend-dot {
  display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 50%;
  border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.help-note { font-size: 11px; font-style: italic; }
.help-code { font-family: monospace; font-size: 14px; }
.species-note { margin: 0 16px 8px; padding: 6px 10px; border-radius: 5px; background: var(--blue-soft); }

.results-table, .species-table, .sheet-table { width: 100%; border-collapse: collapse; }
.results-table th, .species-table th, .sheet-table th {
  position: sticky; top: 0; z-index: 1; padding: 6px 8px; background: #fff; border-bottom: 2px solid var(--line);
  color: #555; text-align: left; white-space: nowrap;
}
.results-table td, .species-table td, .sheet-table td { padding: 3px 8px; border-bottom: 1px solid #f0f1f4; white-space: nowrap; }
.results-table tbody tr:hover td, .species-table tbody tr:hover td, .sheet-table tbody tr:hover td { background: var(--blue-soft); }
.num { text-align: right !important; }
th.check, td.check { width: 28px; padding-right: 0; }
.results-table .ref { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.results-table .family td { background: var(--row-alt); font-weight: bold; }
.results-table .family .toggle { width: 18px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.results-table .member td:nth-child(2) { padding-left: 26px; }
.results-table .network-link { font-weight: normal; }
.components-icon { vertical-align: -3px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 12px; background: var(--blue-soft); }
.chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }

.map-tooltip, .map-chooser {
  position: absolute; z-index: 25; max-width: 340px; padding: 8px 10px; pointer-events: none;
  background: #fff; border-radius: 6px; box-shadow: var(--shadow); font-size: 12px;
}
.map-tooltip th { padding: 1px 8px 1px 0; color: #555; text-align: left; vertical-align: top; white-space: nowrap; }
.map-tooltip td { padding: 1px 0; }
.map-tooltip .more { margin-top: 4px; color: var(--muted); }
.map-chooser { pointer-events: auto; max-height: 260px; overflow: auto; }
.map-chooser button { display: block; width: 100%; padding: 3px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.map-chooser button:hover { background: var(--blue-soft); }
.map-chooser p { margin: 0 0 4px; }

.map-notices {
  position: absolute; top: calc(var(--toolbar-height, 46px) + 10px); left: 50%; z-index: 12; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.map-notice {
  padding: 6px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--shadow);
  font-size: 12px; pointer-events: auto;
}
.map-notice[hidden] { display: none; }
.area-button { font-size: 17px; line-height: 1; }
.area-button.active { background: var(--blue-soft) !important; color: var(--blue); }
.area-box { position: absolute; border: 2px dashed var(--blue); background: rgba(76, 143, 253, 0.1); pointer-events: none; }

.sheet-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; }
.sheet-actions [aria-expanded="true"] { text-decoration: underline; }
.drawer { margin-top: 8px; padding: 10px 12px; border-radius: 6px; background: var(--row-alt); }
.drawer[hidden] { display: none; }
.drawer p { margin: 0 0 6px; }
.snippet {
  margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff;
  white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--font);
}
.snippet.code { font-family: Consolas, Menlo, monospace; white-space: pre; overflow-x: auto; word-break: normal; }
.drawer-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.report-form textarea, .report-form input[type="email"] {
  display: block; width: 100%; margin-bottom: 6px; padding: 6px 8px; border: 1px solid #ccd2db; border-radius: 5px; font: inherit;
}
.report-form .honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.report-form .sent { margin: 0; color: #2b7a3d; font-weight: bold; }
.picture-buttons { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.picture-buttons .label { font-weight: bold; color: #555; }
.graph-tools { align-items: center; flex-wrap: wrap; }
.layout-switch { display: inline-flex; border: 1px solid #ccd2db; border-radius: 5px; overflow: hidden; }
.layout-switch button { padding: 3px 10px; border: 0; background: #fff; color: var(--blue); cursor: pointer; }
.layout-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.legend { white-space: nowrap; }

/* Species window, beside the network sheet ---------------------------------- */

.species-window {
  position: absolute; top: calc(var(--toolbar-height, 46px) + 8px); bottom: 46px; right: 12px; z-index: 19;
  width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.species-window[hidden] { display: none; }
.species-open .network-panel { left: 12px; right: calc(min(420px, 100vw - 24px) + 24px); width: auto; transform: none; }
/* While a network is open the Networks window sits beside it on the left, as the species window does on the right.
   Its top and bottom are the sheet's, so the matrix keeps its height however the network was opened. map.js sets the class. */
@media (min-width: 1101px) {
  .results-docked .results-panel, .results-docked .species-panel {
    top: calc(var(--toolbar-height, 46px) + 8px) !important; left: 12px !important; right: auto !important; bottom: 46px;
    width: 300px; max-height: none;
  }
  .results-docked .results-panel .panel-header { cursor: default; }
  .results-docked .results-panel .panel-body { flex: 1; min-height: 0; padding: 0 0 6px; }
  /* Every column stays, scrolling sideways, with the ID in view so that a value is never without its network. */
  .results-docked .results-table :is(th, td):nth-child(-n + 2) { position: sticky; background: var(--panel); }
  .results-docked .results-table th:nth-child(-n + 2) { z-index: 2; }
  .results-docked .results-table :is(th, td):nth-child(1) { left: 0; width: 34px; min-width: 34px; box-sizing: border-box; }
  .results-docked .results-table :is(th, td):nth-child(2) { left: 34px; box-shadow: 1px 0 0 var(--line); }
  .results-docked .results-table .family td { background: var(--row-alt); }
  .results-docked .results-table tbody tr:hover td, .results-docked .results-table tr.open td { background: var(--blue-soft); }
  .results-docked .network-panel:not(.maximized) { left: 324px; right: auto; width: min(1120px, calc(100vw - 336px)); transform: none; }
}
/* With the species window too there is only room for all three on a wide screen. Otherwise the list waits until it closes. */
@media (min-width: 1101px) and (max-width: 1499px) {
  .results-docked.species-open .results-panel, .results-docked.species-open .species-panel { display: none; }
  .results-docked.species-open .network-panel:not(.maximized) { left: 12px; right: calc(min(420px, 100vw - 24px) + 24px); width: auto; }
}
@media (min-width: 1500px) {
  .results-docked.species-open .network-panel:not(.maximized) { right: calc(min(420px, 100vw - 24px) + 24px); width: auto; }
}
.results-table tr.open td { background: var(--blue-soft); }
.species-sheet { flex: 1; overflow: auto; padding: 10px 16px 16px; }
.species-sheet-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.species-sheet h1 { margin: 2px 0; font-size: 20px; color: #333; }
.species-sheet h2 { margin: 16px 0 6px; font-size: 14px; color: #555; }
.species-sheet .species-layout { grid-template-columns: 1fr; gap: 0; }
.species-sheet .species-map { height: 200px; }
.species-sheet .sheet-table td { white-space: normal; }

/* Species and API pages ---------------------------------------------------- */

.page { background: #fff; }
.page-header {
  display: flex; align-items: center; gap: 20px; padding: 10px 20px; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}
.page-header .brand { font: bold 18px var(--title-font); color: var(--blue); margin-right: auto; }
.page-header .back { font-weight: bold; }
.page-body { max-width: 980px; margin: 0 auto; padding: 20px 20px 48px; }
.page-body h1 { margin: 8px 0 4px; font-size: 26px; color: #333; }
.page-body h2 { margin: 26px 0 8px; font-size: 16px; color: #555; }
.species-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr); gap: 24px; }
.species-layout h2 { margin-top: 12px; }
.facts.wide th { padding-right: 14px; }
.external-links { margin-top: 12px; }
.species-map { height: 280px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.api-table td { white-space: normal; }
.prose code { padding: 1px 4px; border-radius: 3px; background: var(--row-alt); font-size: 12px; }

.map-footer {
  position: absolute; left: 50%; bottom: 10px; z-index: 10; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 18px; color: #fff; font: bold 14px var(--title-font);
}
.map-footer > a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
.map-footer > a.login-link { font: normal 12px var(--font); opacity: 0.9; }
.credits { position: relative; }
.credits summary {
  list-style: none; padding: 5px 16px; border-radius: 6px 6px 0 0; background: #fff; color: #555; cursor: pointer;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.18);
}
.credits summary::-webkit-details-marker { display: none; }
.credits summary::after { content: " ▴"; color: var(--muted); }
.credits[open] summary::after { content: " ▾"; }
.credits-body {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px;
  min-width: 190px; margin-bottom: 4px; padding: 10px 14px; background: #fff; border-radius: 6px; box-shadow: var(--shadow);
  font-weight: normal; text-align: center;
}
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Network sheet -------------------------------------------------------- */

.network-panel {
  position: absolute; top: calc(var(--toolbar-height, 46px) + 8px); bottom: 46px; left: 50%; z-index: 18; transform: translateX(-50%);
  width: min(1120px, calc(100vw - 24px)); display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.network-panel[hidden] { display: none; }
.network-panel.maximized { top: 8px; bottom: 8px; width: calc(100vw - 16px); z-index: 40; }
.network-sheet { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet-header { position: relative; padding: 12px 48px 8px 18px; border-bottom: 1px solid var(--line); }
.sheet-header .close { position: absolute; top: 8px; right: 10px; }
.facts { border-collapse: collapse; font-size: 12px; }
.facts th { padding: 1px 10px 1px 0; color: #444; text-align: left; vertical-align: top; white-space: nowrap; }
.facts td { padding: 1px 22px 1px 0; vertical-align: top; }
.facts .links a + a::before { content: ", "; color: var(--text); }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 86px; padding: 8px 10px 6px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--blue); font-size: 12px; cursor: pointer;
}
.tabs button img { width: 22px; height: 22px; opacity: 0.85; }
.tabs button:hover { background: var(--blue-soft); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--text); font-weight: bold; }
.panes { flex: 1; min-height: 0; display: flex; }
.panes > section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 18px 12px; overflow: auto; }
.panes > section[hidden] { display: none; }
.download-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.download-bar label { display: inline-flex; align-items: center; gap: 4px; }
.download-bar .label { font-weight: bold; color: #555; }
.species-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.species-tools label { display: flex; gap: 6px; align-items: center; font-weight: bold; color: #555; }
.species-tools select { height: 28px; border: 1px solid #ccd2db; border-radius: 5px; font-weight: normal; }
.table-wrap { flex: 1; min-height: 0; overflow: auto; }
.sortable th[data-sort] { cursor: pointer; user-select: none; }
.sortable th[data-sort]::after { content: " ↕"; color: #c4c9d2; }
.sortable th[aria-sort="ascending"]::after { content: " ↑"; color: var(--blue); }
.sortable th[aria-sort="descending"]::after { content: " ↓"; color: var(--blue); }
.presence-list { margin: 4px 0 6px; padding: 6px 10px; border-left: 3px solid var(--blue); background: var(--row-alt); white-space: normal; }
.presence-list a { margin-right: 10px; }
.history td.date { width: 100px; color: #555; vertical-align: top; }
.history td { white-space: normal; padding: 6px 8px; }
.resources li { margin-bottom: 4px; }

.matrix-wrap { flex: 1; min-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.matrix { border-collapse: separate; border-spacing: 0; font-size: 11px; }
.matrix th, .matrix td { padding: 1px 4px; text-align: center; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: #fff; vertical-align: bottom; }
.matrix thead th.col { height: 170px; padding: 4px 1px; font-weight: normal; }
.matrix thead th.col span { display: inline-block; max-height: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix tbody th { position: sticky; left: 0; z-index: 1; max-width: 230px; overflow: hidden; text-overflow: ellipsis; background: #fff; text-align: left; font-weight: normal; white-space: nowrap; }
.matrix thead th.corner { left: 0; z-index: 3; }
.matrix td { color: #c8ccd3; }
.matrix td.on { color: var(--text); font-weight: bold; background: var(--blue-soft); }
.matrix .abundance { color: #7a5b00; background: #fff8e1; font-weight: normal; }
.matrix-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 6px; }
.status-box { display: inline-flex; align-items: center; gap: 4px; }
.status-legend { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.status-legend[hidden] { display: none; }
.iucn-key { padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }
.matrix .iucn { display: none; font-style: normal; font-weight: bold; }
.show-status.matrix-wrap .matrix .iucn { display: inline; }
/* The Red List's own colours for the threatened categories, paler for the rest so that those stand out. */
.show-status .matrix th[data-status="EX"], .iucn-key[data-status="EX"] { background-color: #000; color: #fff; }
.show-status .matrix th[data-status="EW"], .iucn-key[data-status="EW"] { background-color: #542344; color: #fff; }
.show-status .matrix th[data-status="CR"], .iucn-key[data-status="CR"] { background-color: #d81e05; color: #fff; }
.show-status .matrix th[data-status="EN"], .iucn-key[data-status="EN"] { background-color: #fc7f3f; color: #000; }
.show-status .matrix th[data-status="VU"], .iucn-key[data-status="VU"] { background-color: #f9e814; color: #000; }
.show-status .matrix th[data-status="CD"], .iucn-key[data-status="CD"] { background-color: #eef5b0; color: #000; }
.show-status .matrix th[data-status="NT"], .iucn-key[data-status="NT"] { background-color: #e0f09a; color: #000; }
.show-status .matrix th[data-status="LC"], .iucn-key[data-status="LC"] { background-color: #cdeec9; color: #000; }
.show-status .matrix th[data-status="DD"], .iucn-key[data-status="DD"] { background-color: #e4e4dd; color: #000; }
.matrix tbody tr:hover th, .matrix tbody tr:hover td { background-color: #dfeaff; }

.graph-tools { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.graph { flex: 1; min-height: 320px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fcfcfd; }
.graph svg { display: block; width: 100%; height: 100%; cursor: grab; }
.graph .link { stroke: #b9bfc9; stroke-opacity: 0.6; }
.graph .node circle { stroke: #fff; stroke-width: 1; }
.graph .node:hover circle { stroke: #333; stroke-width: 1.5; }

/* 3D page --------------------------------------------------------------- */

/* As the legacy page: white, with the control panel (lil-gui, the successor of its dat.gui) on the right. */
.three-page { height: 100vh; overflow: hidden; background: #fff; }
.three-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.9);
}
.three-header .brand { font: bold 18px var(--title-font); color: var(--blue); }
.three-header a:last-child { margin-left: auto; }
.three-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.three-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 50%; }
#graph3d { position: absolute; inset: 0; }
.three-page .lil-gui.autoPlace { top: 56px; right: 12px; max-height: calc(100% - 68px); }
.three-hint { position: absolute; left: 16px; bottom: 10px; z-index: 2; margin: 0; color: var(--muted); font-size: 11px; }
.three-tooltip {
  position: fixed; z-index: 1100; padding: 3px 7px; border-radius: 4px; background: #fff; box-shadow: var(--shadow);
  font-size: 12px; pointer-events: none;
}
.three-message { position: absolute; top: 50%; left: 0; right: 0; margin: 0; color: var(--muted); text-align: center; }

/* Lab workspace ------------------------------------------------------------ */

.workspace { background: #f5f7fa; }
.workspace-header { flex-wrap: wrap; background: #fff; }
.workspace-header .brand .muted { font: normal 13px var(--font); }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.workspace-nav a { font-weight: bold; }
.logout { display: flex; align-items: center; gap: 10px; margin: 0; }
.workspace-body { max-width: 1100px; }
.page-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 6px; }
.page-nav a { font-weight: bold; text-decoration: none; }
.page-nav a:hover { text-decoration: underline; }
.prev-next { display: flex; gap: 14px; margin-left: auto; }
/* Long references, names and emails wrap inside their card; dates and numbers stay on one line. */
.workspace .sheet-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.workspace .sheet-table td.date, .workspace .sheet-table td.num { white-space: nowrap; }
.page-body.narrow { max-width: 460px; }
.narrow-block { max-width: 560px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent-back + .sent-back { border-top: 1px solid var(--line); margin-top: 10px; }
.card { margin: 0 0 16px; padding: 16px 18px; background: #fff; border-radius: var(--radius); box-shadow: 0 1px 4px rgba(20, 30, 50, 0.08); }
.card > h2:first-child { margin-top: 0; }
.card.highlight { border-left: 4px solid var(--blue); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cards .card { margin: 0 0 16px; }
details.card summary { cursor: pointer; font-weight: bold; color: #555; }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { margin: 3px 0; }
.columns { columns: 2 320px; }
.note { padding: 8px 12px; border-radius: 6px; background: var(--blue-soft); }
.messages { margin: 0 0 16px; padding: 0; list-style: none; }
.messages li { margin-bottom: 6px; padding: 8px 12px; border-radius: 6px; background: #e8f5ec; color: #20603a; }
.messages li.error { background: #fdecec; color: #8a1f1f; }
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button.danger, button.link.danger { border-color: #c0392b; color: #c0392b; }
.button.danger:hover { background: #c0392b; color: #fff; }
.button[disabled] { opacity: 0.45; cursor: not-allowed; }
a.button, button.button { display: inline-block; padding: 6px 14px; border: 1px solid var(--blue); border-radius: 5px; background: #fff; color: var(--blue); font-weight: bold; cursor: pointer; }
a.button:hover { text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0; }
.help { margin: 2px 0 8px; color: var(--muted); font-size: 12px; }

.form > div, .form-grid > div, .place-layout > div > div { margin-bottom: 10px; }
.form label { display: block; margin-bottom: 3px; font-weight: bold; color: #555; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"], .form input[type="url"],
.form input:not([type]), .form input[type="date"], .form select, .form textarea, .species-check input, .species-check select,
.filter-bar input, .filter-bar select {
  width: 100%; max-width: 100%; padding: 6px 8px; border: 1px solid #ccd2db; border-radius: 5px; background: #fff; font: inherit;
}
.form input[type="checkbox"], .form input[type="radio"] { width: auto; margin-right: 6px; }
.form .helptext { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.form .errorlist { margin: 4px 0; padding: 0; list-style: none; color: #c0392b; }
.form div:has(> input[type="radio"]) label, .form ul label { display: flex; align-items: center; font-weight: normal; }
.form ul { margin: 4px 0; padding: 0; list-style: none; }
.checkbox { display: flex; align-items: center; gap: 4px; }
.checkbox label { margin: 0; font-weight: normal; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.inline-field { display: flex; align-items: flex-end; gap: 10px; }
.inline-field .grow { flex: 1; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.inline-form textarea { flex: 1 1 300px; }
.inline-form input, .inline-form select { width: auto; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-bar input { width: 260px; }
.filter-bar select { width: auto; }

.wizard-head h1 { margin-bottom: 2px; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 16px; padding: 0; list-style: none; counter-reset: none; }
.steps li { padding: 6px 12px; border-radius: 16px; background: #e8ebf0; color: var(--muted); }
.steps li.done { background: var(--blue-soft); }
.steps li.current { background: var(--blue); color: #fff; font-weight: bold; }
.steps li.current a { color: #fff; }
.check { margin: 4px 0; padding: 6px 10px 6px 28px; border-radius: 5px; position: relative; }
.check::before { position: absolute; left: 9px; font-weight: bold; }
.check.error { background: #fdecec; color: #8a1f1f; }
.check.error::before { content: "✕"; }
.check.warning { background: #fff6dd; color: #6b4e00; }
.check.warning::before { content: "!"; }
.check.ok { background: #e8f5ec; color: #20603a; }
.check.ok::before { content: "✓"; }
.check.info { background: #f0f2f5; color: #555; }
.check.info::before { content: "i"; }
.status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: normal; vertical-align: middle; }
.status.published { background: #e8f5ec; color: #20603a; }
.status.submitted { background: #fff6dd; color: #6b4e00; }
.status.draft { background: #f0f2f5; color: #555; }
.status.retracted { background: #fdecec; color: #8a1f1f; }
.preview { max-height: 420px; margin: 10px 0; }
.matrix.small td, .matrix.small th { font-size: 11px; }
.matrix.small thead th.col { height: 120px; }
.matrix-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.matrix-tools h2 { margin: 0; }
.matrix-tools input[type="search"] { width: 220px; padding: 5px 8px; border: 1px solid #ccd2db; border-radius: 5px; font: inherit; }
.matrix-tools [data-full-screen] { margin-left: auto; }
.matrix-tools label { display: inline-flex; align-items: center; gap: 5px; }
.matrix-readout { min-height: 18px; margin: 6px 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-box { height: 68vh; min-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.matrix-box table { table-layout: fixed; }
.matrix-box tbody tr { height: 20px; }
.matrix-box tbody td, .matrix-box tbody th { box-sizing: border-box; height: 20px; padding: 0 3px; line-height: 19px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.matrix-box tbody th { max-width: none; padding-left: 6px; text-overflow: ellipsis; }
.matrix-box thead th { box-sizing: border-box; overflow: hidden; }
.matrix-box thead th.col { height: 178px; }
.matrix-box thead tr.abundances th { height: 20px; padding: 0 3px; font-weight: normal; }
.matrix-box tr.gap td { padding: 0; }
.matrix-box tr.gap:hover td { background: none; }
.matrix-box th a { color: inherit; text-decoration: none; }
.matrix-box th a:hover { color: var(--blue); text-decoration: underline; }
.matrix-box .found, .matrix-box tr.found th, .matrix-box tr.found td { background-color: #fff3c4; }
.matrix-box td.on.found, .matrix-box tr.found td.on { background-color: #ffe28a; }
.matrix-box th.flagged, .matrix-box tbody tr:hover th.flagged { color: #b3261e; font-weight: bold; background-color: #fdeceb; }
.matrix-box .lit { background-color: #dfeaff; }
.matrix-box td.on.lit { background-color: #bcd4ff; }
.matrix-card.full { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; margin: 0; border-radius: 0; }
.matrix-card.full .matrix-box { flex: 1; height: auto; min-height: 0; }
body.matrix-full { overflow: hidden; }
.species-check td { white-space: normal; vertical-align: middle; }
.species-check td.check { text-align: center; }
.use-all { display: inline-flex; align-items: center; gap: 6px; }
.names summary { cursor: pointer; color: var(--blue); }
.names[open] summary { margin-bottom: 6px; }
.correct { margin: 10px 0; }
.correct input, .correct select { width: 100%; padding: 6px 8px; border: 1px solid #ccd2db; border-radius: 5px; background: #fff; font: inherit; }
.moves td { white-space: normal; vertical-align: top; }
.species-check td:nth-child(2) { white-space: nowrap; }
.species-check td:nth-child(3) { min-width: 180px; }
.species-check td:nth-child(4) { min-width: 104px; }
.state-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #c8ccd3; }
tr.ok .state-dot { background: #2b9a4f; }
tr.warn .state-dot { background: #e0a100; }
.place-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr); gap: 16px; }
.place-map { min-height: 340px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.place-chosen { padding: 6px 10px; border-radius: 5px; background: var(--blue-soft); }
.place-chosen[hidden] { display: none; }
.nearby .place { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.lookup { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--row-alt); }
.save-actions { position: sticky; bottom: 0; }

/* Phones ---------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* No room for both side by side: the species window covers the sheet until it is closed. */
  .species-open .network-panel { right: 12px; }
  .species-window { z-index: 41; }
}

@media (max-width: 760px) {
  .species-layout { grid-template-columns: 1fr; }
  .species-window { top: 8px; bottom: 8px; }
  .picture-buttons { margin-left: 0; }
  .toolbar { gap: 6px 10px; padding: 8px 10px; }
  .filter select, .range-toggle { min-width: 0; }
  .menu { margin-left: 0; flex-wrap: wrap; }
  .panel, .species-panel { left: 8px; right: 8px; width: auto; }
  .network-panel { top: 8px; bottom: 8px; width: calc(100vw - 16px); z-index: 40; }
  .facts, .facts tbody, .facts tr { display: block; }
  .facts th, .facts td { display: inline; }
  .facts td::after { content: ""; display: block; }
  .map-footer { gap: 10px; font-size: 12px; }
}