/* Species page (species.js). Reuses the colour tokens and layout classes of style.css. */
#pages{margin-right:4px}
.sp-select{font:inherit;font-size:.82rem;width:100%;margin-top:6px;padding:5px 6px;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink)}
.sp-search{display:flex;flex-direction:column;gap:6px}
.sp-search input{font:inherit;font-size:.88rem;padding:6px 8px;border:1px solid var(--rule);border-radius:5px;background:var(--paper);color:var(--ink);width:100%}
.sp-search input:focus-visible{outline:2px solid var(--probe);outline-offset:1px}
.stackbar .sp-select{width:auto;margin:0;font-family:var(--mono)}
.sp-combo{position:relative}
#sp-suggest{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:20;list-style:none;margin:0;padding:4px 0;max-height:300px;overflow-y:auto;
  background:var(--sheet);border:1px solid var(--rule);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
#sp-suggest li{padding:6px 10px;cursor:pointer;display:flex;flex-direction:column;gap:1px;font-size:.88rem;line-height:1.3}
#sp-suggest li small{font-size:.72rem;color:var(--ink-2);font-style:normal}
#sp-suggest li b{font-weight:600}
#sp-suggest li[aria-selected="true"],#sp-suggest li[data-i]:hover{background:var(--paper)}
#sp-suggest li.sp-note{cursor:default;color:var(--ink-2);font-size:.8rem}
.varlist .sp-common{display:block;font-size:.76rem;color:var(--ink-2);font-weight:400}
.varlist .sp-name{font-style:italic}

#sp-row .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
/* Status card over the map (species.js status()): dims the map, message, moving bar while waiting. */
.sp-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--paper) 72%,transparent);z-index:2}
.sp-wait[hidden]{display:none}
.sp-card{background:var(--sheet);border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:18px 22px;max-width:420px;width:100%}
.sp-card #sp-status-title{font-weight:600;margin:0 0 6px}
.sp-card #sp-status-text{margin:0;font-size:.86rem;line-height:1.4}
.sp-bar{display:none;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;margin-top:14px}
.sp-wait.busy .sp-bar{display:block}
.sp-bar i{display:block;height:100%;width:35%;border-radius:3px;background:var(--accent);animation:sp-slide 1.3s ease-in-out infinite}
@keyframes sp-slide{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.sp-bar i{animation:none;width:100%;opacity:.5}}
.sp-time{margin:6px 0 0;font-family:var(--mono);font-size:.74rem;color:var(--ink-2);text-align:right;min-height:1em}
#sp-row .legend .ramp.sp{background:linear-gradient(90deg,var(--mid),var(--neg))}
.stackbar #sp-back{margin-right:8px}
.sp-biv{border-collapse:separate;border-spacing:2px;font-size:.72rem;color:var(--ink-2)}
.sp-biv caption{caption-side:top;padding-bottom:2px;white-space:nowrap}
.sp-biv th{font-weight:400;text-align:right;padding-right:4px}
.sp-biv td{width:46px;height:14px;text-align:center}
.sp-biv-note{max-width:430px;font-size:.76rem;line-height:1.35;text-align:left}
.sp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--probe);vertical-align:middle;margin-right:6px}
.sp-dot.faint{width:5px;height:5px;opacity:.4}

.sp-panel{display:flex;flex-direction:column;gap:22px}
.sp-panel section{display:flex;flex-direction:column;gap:8px}
.sp-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;align-items:end;height:96px;border-bottom:1px solid var(--rule)}
.sp-bars div{background:var(--neg);border-radius:1px 1px 0 0;min-height:2px;cursor:pointer;opacity:.5}
.sp-bars div.on{opacity:1}
.sp-years{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--ink-2)}
.sp-limits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.sp-limits li{display:grid;grid-template-columns:1fr 3.2em;gap:8px;align-items:center}
.sp-limits .bar{grid-column:1/-1;height:6px;background:var(--pos);border-radius:3px}
.sp-limits .pct{font-family:var(--mono);font-size:.76rem;text-align:right}
.sp-cell{min-height:2.6em}
.sp-panel .note{font-size:.8rem;color:var(--ink-2)}
@media (max-width:900px){
  .options{flex-wrap:wrap;height:auto;min-height:58px;padding:8px 16px;gap:8px}
  #sp-row .main{flex:none}
  #sp-row .stage{height:60vw;min-height:260px}
}

/* Page accent: Trends and Species each have their own colour (kept apart from the data colours), so it is
   clear which page is open. species.js sets data-page on <html>; the top bar and the selection lines follow. */
:root{--accent-trends:#0e6f6a;--accent-species:#6a3fa3;--accent:var(--accent-trends)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent-trends:#4fb8b0;--accent-species:#b08ae6}}
:root[data-theme="dark"]{--accent-trends:#4fb8b0;--accent-species:#b08ae6}
:root[data-page="species"]{--accent:var(--accent-species)}
.side>:first-child,.options{box-shadow:inset 0 -3px 0 var(--accent)}
.options .seg{border-color:var(--accent)}
.options .seg button + button{border-left-color:var(--accent)}
.options .seg button[aria-pressed="true"]{background:var(--accent)}
#pages button[data-page="trends"]{color:var(--accent-trends)}
#pages button[data-page="species"]{color:var(--accent-species)}
#pages button[aria-pressed="true"]{color:var(--sheet)}
.varlist button[aria-pressed="true"]{border-left-color:var(--accent)}
.side h2,.panel h2{color:var(--accent)}
/* v10: species portal. A slightly different background tells you which portal you are in. */
:root[data-portal="species"]{--paper:#e9f2f0; --sheet:#f6fbfa; --rule:#c5d6d3}
@media (prefers-color-scheme: dark){ :root[data-portal="species"]:not([data-theme="light"]){--paper:#0d1d1e; --sheet:#132223; --rule:#2b4244} }
:root[data-portal="species"][data-theme="dark"]{--paper:#0d1d1e; --sheet:#132223; --rule:#2b4244}
body,.side,.options,.legend,.stackbar,.panel{transition:background-color .35s ease,border-color .35s ease}
.sp-panel .mini{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.sp-panel .mini h3{font-size:.84rem;font-weight:600}
.sp-panel .mini canvas{width:100%;height:96px;display:block}
.sp-panel .mini p{font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.sp-panel .mini p.sp-extra{color:var(--ink)}
.sp-panel .verdict{font-size:.86rem}
#sp-world{width:100%;aspect-ratio:2/1;display:block;border-radius:3px}
#sp-layer{margin-bottom:6px}
.varlist .unit[title]{cursor:help}

/* Link to the method article, at the right end of the top bar. */
.options .methods-link{margin-left:auto;align-self:center;white-space:nowrap;font-size:.86rem;font-weight:500;color:var(--accent);text-decoration:none}
.options .methods-link:hover{text-decoration:underline;text-underline-offset:3px}
/* Explorer sidebar: the site name fits on one line. */
.side .logo-name{font-size:.98rem;white-space:nowrap}