/* IBM Plex, self-hosted (latin subset, SIL Open Font License: /fonts/OFL.txt). The sans files are variable (weights 400 to 600). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin.woff2) format("woff2") }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(/fonts/ibm-plex-sans-italic-latin.woff2) format("woff2") }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2") }
:root {
  --ground: #F5F6F3; --surface: #FFFFFF; --ink: #16201C; --ink-2: #3E4A44; --muted: #4F5B55;
  --line: #DADFDB; --line-2: #E6EAE6; --field: #C5CCC7; --chip: #E6EAE6;
  --accent: #0B5D4B; --accent-dark: #063F33; --quiet: #B4480E; --blue: #2F5DA8;
  --gap-known: var(--accent); --gap-part: #9FC8BA; --gap-open: var(--quiet); --gap-na: var(--field);
  --q0: #F6E7D8; --q1: #EBC29C; --q2: #D9935A; --q3: #B4480E; --q4: #6E2A06; --none: #FFFFFF; --zero: #E9ECE8;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.5 var(--sans) }
a { color: var(--accent) } a:hover { color: var(--accent-dark) }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.mono { font-family: var(--mono) }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px }
@media (min-width: 720px) { .wrap { padding: 0 24px } }
.skip { position: absolute; left: -999px } .skip:focus { left: 16px; top: 8px; background: #fff; padding: 8px; z-index: 10 }

/* Header */
.top { background: var(--surface); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-block: 12px }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none }
.brand b { font-size: 20px; font-weight: 600; letter-spacing: -.01em } .brand span { font-size: 13px; color: var(--muted) }
/* One row. If the links do not fit, the row scrolls sideways; common.js fades the edge that has more links. */
nav.main { --fl: 0px; --fr: 0px; display: flex; flex-wrap: nowrap; gap: 2px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent) }
nav.main::-webkit-scrollbar { display: none }
nav.main.more-l { --fl: 32px } nav.main.more-r { --fr: 32px }
@media (max-width: 899px) { nav.main { flex: 1 1 100%; margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px } }
nav.main a, nav.main span { flex: none; white-space: nowrap; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 6px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center }
nav.main a:focus-visible { outline-offset: -2px }
nav.main a:hover { background: var(--chip) }
nav.main a[aria-current] { background: var(--ink); color: #fff }
nav.main span { color: #6B7771 } nav.main span small { font-size: 11px; margin-left: 4px }
/* Under 900 px, with JavaScript: a Menu button opens the nav as a column (site-parts/header.html). */
button.menu { display: none }
@media (max-width: 899px) {
  .menu-js button.menu:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--field); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer }
  .menu-js button.menu[aria-expanded="true"] { background: var(--chip) }
  .menu-js nav.main { display: none }
  .menu-js nav.main.open { display: flex; flex-direction: column; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-bottom: 4px }
}

.dev { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #FFF4D6; border-top: 1px solid #E8D59A; font-size: 14px }
.dev .wrap { padding-block: 8px }

/* Type */
h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600 }
h1.page { font-size: clamp(30px, 4vw, 40px) }
.lede { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2) }
h2 { margin: 0; font-size: 22px; font-weight: 600 }
.note { font-size: 14px; color: var(--muted); margin: 6px 0 0 }

/* Blocks */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px }
.pad { padding: 20px } @media (min-width: 720px) { .pad { padding: 24px } }
.row { display: flex; flex-wrap: wrap; gap: 20px }
.grow { flex: 999 1 560px; min-width: 0 } .side { flex: 1 1 320px; min-width: 0; align-self: flex-start }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px } .kpis > * { min-width: 0 }
.kpi { display: block; text-decoration: none; color: var(--ink); padding: 20px }
.kpi b { display: block; font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--mono); overflow-wrap: anywhere } .kpi span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45 }
.kpi small { font-size: 18px; color: var(--muted) }
section { margin-top: 32px }

/* Map */
.mapbox { position: relative; margin-top: 12px; width: 100%; aspect-ratio: 2711 / 3054; max-height: clamp(420px, calc(100vh - 340px), 760px) }
.mapbox svg { width: 100%; height: 100%; display: block }
.mapbox path { stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: pointer }
.mapbox path:hover { stroke: var(--ink); stroke-width: 1.5 }
.mapbox path.sel, .mapbox path.hl { stroke: var(--ink); stroke-width: 2.5 }
.mapbox path.dim { opacity: .35 }
.tip { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.4; padding: 6px 9px; border-radius: 6px; width: max-content; max-width: min(280px, 100%); z-index: 2 }
.tip.touch { pointer-events: auto; font-size: 14px; padding: 10px 12px } .tip button.b { margin-top: 8px; font-weight: 600 }
.legend { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--ink-2) }
.legend .ramp { display: flex } .legend .ramp i { width: 40px; height: 12px } .legend .ramp i + i { margin-left: 1px }
.legend .lbl { display: flex; gap: 6px; align-items: center } .legend .sw { width: 12px; height: 12px; border: 1px solid #9AA49E }
.loading { color: var(--muted); padding: 40px 0; text-align: center }

/* Forms */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); min-width: 0; max-width: 100% }
label.f select { min-width: 0; max-width: 100% }
label.f.inline { flex-direction: row; align-items: center; gap: 8px } label.f.inline select { width: auto; flex: 0 1 auto }
select, input[type=search] { font: inherit; font-size: 15px; color: var(--ink); padding: 9px 10px; border: 1px solid var(--field); border-radius: 6px; background: #fff; min-height: 44px; width: 100% }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end }
button.b, a.b { font: inherit; font-size: 14px; padding: 10px 14px; min-height: 44px; border: 1px solid var(--field); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center }
button.b:hover { background: var(--ground) } button.b:disabled { opacity: .45; cursor: default }

/* Tables */
.tablebox { overflow-x: auto }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
th { font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--field); white-space: nowrap }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: 15px; vertical-align: top }
td.n, th.n { text-align: right }
.muted { color: var(--muted) }
td .en { color: var(--muted); font-size: 14px; margin-top: 2px }
pre.code { margin: 10px 0 0; padding: 12px 14px; background: var(--ground); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font: 13px/1.5 var(--mono); color: var(--ink) }
pre.code.wrapline { white-space: pre-wrap; overflow-wrap: anywhere }
.client { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 15px }
.client:last-child { border-bottom: 0 } .client .who { font-size: 15px } .client a.b { margin: 2px 0 8px }
@media (max-width: 600px) { .client { grid-template-columns: minmax(0, 1fr) } }
.bar { height: 10px; background: #EEF0ED; border-radius: 2px } .bar i { display: block; height: 10px; border-radius: 2px; background: var(--q2) }
dl.stats { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 15px }
dl.stats dd { margin: 0; text-align: right; font-family: var(--mono) }
.bar-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 18px 6px }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font-size: 14px; color: var(--muted) }

/* Modules, act, footer */
.act { background: var(--ink); color: #F5F6F3; border-radius: 12px; padding: 28px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between }
.act p { margin: 8px 0 0; color: #C9D1CC } .act .links { display: flex; flex-wrap: wrap; gap: 10px }
.act a { color: #F5F6F3; text-decoration: none; padding: 12px 16px; border: 1px solid #6C7A72; border-radius: 8px; font-size: 15px }
.act a.primary { background: #F5F6F3; color: var(--ink); font-weight: 600; border-color: #F5F6F3 }
/* Space for content that loads later, so nothing on screen moves when it comes: main reaches below the
   screen (the footer starts out of view), and on narrow screens, where the map sits under the status or the
   group cards, those parts fill the screen while empty. */
main { min-height: 100svh }
@media (max-width: 939px) { .cardlist:has(> .loading) { min-height: 100svh } }
@media (max-width: 600px) { .sp-status:empty { min-height: 100svh } }
footer { margin-top: 56px; border-top: 1px solid var(--line); background: var(--surface) }
footer .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; font-size: 14px; line-height: 1.6; color: var(--ink-2) }
footer .grow { flex: 999 1 480px }
.steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.steps li { padding: 16px; display: flex; flex-direction: column; gap: 6px }
.steps .mono { font-size: 12px; color: var(--muted) } .steps b { font-size: 16px } .steps span:last-child { font-size: 14px; color: var(--ink-2); line-height: 1.5 }
dl.defs { margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.55 }
dl.defs dt { font-weight: 600 } dl.defs dd { margin: 0; color: var(--ink-2) }
ul.plain { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.7; color: var(--ink-2) }
.review { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.6 } .review li { padding-bottom: 10px; border-bottom: 1px solid var(--line) }
.ok { color: var(--accent); font-weight: 600 } .bad { color: #9B1C1C; font-weight: 600 }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px }
.chip { font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px; border-radius: 999px; cursor: pointer; background: #fff; color: var(--ink); border: 1px solid var(--field) }
.chip[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink) }
ul.feed { list-style: none; margin: 0; padding: 0 }
ul.feed li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-2) }
ul.feed .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px } ul.feed .kind { font-size: 13px; font-weight: 600 }
@media (max-width: 600px) { ul.feed li { grid-template-columns: 12px minmax(0, 1fr) } }
.hist { margin-top: 18px; height: 200px; display: flex; gap: 4px; align-items: stretch }
.hist .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.hist .stack { flex: 1; display: flex; flex-direction: column-reverse; border-bottom: 1px solid #9AA49E }
.hist .stack i { display: block; width: 100% }
.hist .col span { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; align-self: center }
/* Space kept for content that arrives with the data, so the page does not move (CLS). */
#runline { min-height: 1.5em }
#hlegend { min-height: 20px } #histnote { min-height: 1.5em }
@media (max-width: 600px) { #runline, #crumbs { min-height: 3em } #histnote { min-height: 4.5em } #hlegend { min-height: 47px } }
.badge { display: inline-block; font-size: 13px; font-weight: 500; padding: 3px 8px; border-radius: 4px; white-space: nowrap }
.st-ok { background: #DCEEE8; color: #063F33 } .st-paper { background: #EEF0ED; color: #2D3833 } .st-none { background: #FBEBDD; color: #7A3208 }

/* Front page: explore */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ex { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; padding-bottom: 40px }
.ex-top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between }
/* "How far does our knowledge go?": one 100% bar, each part a gap; the same bar per group family. The four parts
   are an ordinal ramp of one hue (dataviz validate_palette.js --ordinal: monotone, steps >= 0.06, light end 2.09:1). */
:root { --k1: #93BCAC; --k2: #5F9E87; --k3: #2E7A62; --k4: #0B5D4B }
.k1 { background: var(--k1) } .k2 { background: var(--k2) } .k3 { background: var(--k3) } .k4 { background: var(--k4) }
.obs { background: var(--k3) }
/* The seven gaps: a row per gap, its plain name with the technical term, its question, and what we measure today. */
.gaps-card { margin-bottom: 20px }
.gaps { list-style: none; margin: 0; padding: 4px 22px 14px }
.gaps li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) minmax(0, 22em); gap: 4px 18px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--line-2) }
.gaps li:first-child { border-top: 0 }
.g-name b { display: block; font-size: 16px; font-weight: 600 }
.g-term { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent); background: #E6F0EC;
  border-radius: 4px; padding: 1px 6px; margin-top: 3px }
h2 .g-term { vertical-align: 3px; margin-left: 6px }
.g-q { font-size: 15px; color: var(--ink-2) }
.g-v b { font: 500 18px var(--mono) } .g-share { font-size: 14px; color: var(--ink-2) }
.g-not { font-size: 14px; color: var(--muted) }
.meter { display: block; height: 6px; margin-top: 6px; background: var(--zero); border-radius: 3px; overflow: hidden }
.meter i { display: block; height: 100%; background: var(--k4) }
@media (max-width: 760px) { .gaps { padding-inline: 16px } .gaps li { grid-template-columns: 1fr } }
.funnel-card { margin-bottom: 20px } .kbody { padding-top: 0 }
.khero { margin: 14px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px }
.khero b { font: 500 clamp(30px, 3.4vw, 40px)/1 var(--mono) } .khero span { font-size: 17px; color: var(--ink-2) }
.klegend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px }
.klegend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px }
.kbar { display: flex; gap: 2px; height: 56px }
.kbar .seg { box-sizing: border-box; margin: 0; border: 0; font: inherit; color: inherit; text-align: left; min-width: 2px; height: 100%; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; padding: 0 10px; overflow: hidden; cursor: default }
.kbar button.seg { cursor: pointer }
.kbar .seg:first-child { border-radius: 4px 0 0 4px } .kbar .seg:last-child { border-radius: 0 4px 4px 0 }
.kbar .seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.kbar button.seg[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--ink) }
.kbar .in { color: #fff; font-size: 13px; line-height: 1.25; white-space: nowrap } .kbar .in[hidden] { display: none } .kbar .in b { display: block; font: 500 16px var(--mono) }
.kbar .k1 .in { color: var(--ink) }
.kunl { margin: 12px 0 0; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2) }
.kunl > i { flex: none; width: 54px; height: 16px; margin-top: 14px; border: 2px dashed var(--k3); border-radius: 4px }
.kunl .st-link { font: inherit; color: var(--accent); background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px;
  min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.kunl .st-link[aria-pressed="true"] { border: 2px solid var(--ink); text-decoration: none }
.kbar.kmini { height: 10px; margin-top: 8px } .kmini .seg { padding: 0 }
.funnel-also { padding-top: 12px }
.funnel-also button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink) }
.ktip { position: fixed }
.search { position: relative; flex: 1 1 380px; max-width: 620px; display: flex; gap: 8px }
.sbox { flex: 1; display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); border-radius: 10px; padding: 0 12px; background: var(--surface); min-height: 48px }
.sbox input { border: 0; outline: 0; padding: 0; min-height: 44px; font-size: 16px; background: transparent; width: 100% }
.sbox:focus-within { box-shadow: 0 0 0 3px rgba(11,93,75,.25) }
.fbtn { min-height: 48px; white-space: nowrap }
.hits { position: absolute; z-index: 20; left: 0; right: 0; top: 56px; background: var(--surface); border: 1px solid var(--field); border-radius: 10px; box-shadow: 0 8px 24px rgba(22,32,28,.12); overflow: hidden; max-height: 60vh; overflow-y: auto }
.hits button { display: flex; width: 100%; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 14px; min-height: 44px; border: 0; border-bottom: 1px solid var(--line-2); background: var(--surface); font: inherit; font-size: 15px; text-align: left; cursor: pointer }
.hits button:hover, .hits button:focus { background: var(--ground) } .hits .muted { font-size: 12px } .hits .none { padding: 12px 14px; font-size: 14px }
.filters-panel fieldset { border: 0; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.filters-panel legend { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; width: 100% }
.fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--field); border-radius: 18px; font-size: 13px; cursor: pointer; background: var(--surface) }
.yr { display: inline-flex; align-items: center; gap: 6px; font-size: 14px }
.yr input { font: inherit; width: 6.5em; min-height: 36px; padding: 0 8px; border: 1px solid var(--field); border-radius: 8px; background: var(--surface); color: var(--ink) }
#list tr.picked td { background: var(--chip) }
#fyears .note { flex: 1 1 100%; margin: 2px 0 0 }
.yr-quick { display: flex; flex-wrap: wrap; gap: 6px }
.fchip input { width: 16px; height: 16px; margin: 0 } .fchip:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink) }
.ex-main { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start }
.cards { flex: 1 1 290px; min-width: 0; display: flex; flex-direction: column; gap: 8px }
.cards-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px }
.cardlist { display: flex; flex-direction: column; gap: 8px }
.gcard { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); min-height: 44px }
.gcard[aria-pressed="true"] { border: 2px solid var(--ink); padding: 9px 11px }
.gtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline } .gtop b { font-size: 14px } .gtop .mono { font-size: 15px; color: var(--quiet) }
.gline { display: block; font-size: 12px; color: var(--muted); margin-top: 4px }
.gbar { display: block; height: 6px; background: var(--zero); border-radius: 3px; margin-top: 8px; overflow: hidden } .gbar i { display: block; height: 6px; background: var(--q2) }
.ex-map { flex: 3 1 560px; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px }
.ex-sel { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start }
.crumb { font-size: 13px } .headline { margin: 2px 0 0; font-size: 17px } .headline b { font-weight: 500; font-size: 26px; color: var(--quiet) }
.ex-map .mapbox { min-height: 360px; aspect-ratio: 520 / 560 }
.ex-map[data-view="waiting"] { --q0: #E3ECF7; --q1: #B9CDEA; --q2: #7FA2D6; --q3: #2F5DA8; --q4: #173A75 }
.ex-map[data-view="iucn"] { --q0: #F7E3E3; --q1: #EDB8B8; --q2: #D9787A; --q3: #B03A3E; --q4: #6E1A1D }
.sp-table { width: 100%; min-width: 900px }
.tag { display: inline-block; max-width: 100%; font-size: 12px; background: var(--chip); color: var(--ink-2); border-radius: 3px; padding: 1px 6px; margin: 1px 4px 1px 0 }
.iucn { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 3px; padding: 1px 6px; white-space: nowrap; background: var(--chip); color: var(--ink-2) }
.i-CR { background: #6E1A1D; color: #fff } .i-EN { background: #B03A3E; color: #fff } .i-VU { background: #F2C14E; color: #16201C }
.i-NT { background: #DCEEE8; color: #063F33 } .i-LC { background: #E9ECE8; color: #3E4A44 } .i-DD { background: #E3ECF7; color: #173A75 }

/* Wait for a name: list mode, help text, priority tags and the link to iNaturalist */
.segbtns { display: flex; gap: 4px; margin-left: auto }
.segbtns .b[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink) }
.pwait { margin: 6px 0 0; font-size: 14px; color: var(--muted) } .pwait b { color: var(--ink) }
.wait-help { padding-top: 0; margin: 0; font-size: 14px }
.why { display: inline-block; margin: 0 4px 2px 0; padding: 1px 6px; border-radius: 4px; font-size: 12px; background: var(--q0); color: var(--q4) }
.why.first { background: var(--q3); color: #fff }
a.idlink { font-weight: 500; overflow-wrap: anywhere }
.wm { display: none }
@media (max-width: 600px) {
  .sp-table.waitlist { min-width: 0 }
  .waitlist th:not(:first-child), .waitlist td:not(:first-child) { display: none }
  .waitlist .wm { display: block; margin-top: 6px; font-size: 14px; line-height: 1.8 }
}
@media (max-width: 600px) { .tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px } .tiles3 .kpi { padding: 12px } .tiles3 .kpi span { font-size: 13px } }
.segbtns { flex-wrap: wrap; align-items: center } .seg-label { font-size: 13px; margin-right: 2px }
.sp-status { flex: 1 1 300px; min-width: 0; align-self: stretch }
.sp-wait { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2) } .sp-wait .idlink { display: inline-block; margin-top: 4px }
/* Records to fix */
#fix { margin-top: 16px }
.fix-h { font-size: 16px; margin: 0; padding-bottom: 8px }
.fix-kpis .kpi { border: 1px solid var(--line); box-shadow: none }
.next-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5 }
.next-steps .idlink { margin-right: 4px }
/* Shortlists (experimental): one card per observation; the photo box keeps its size before and after the photo loads */
.slist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px }
.slist > .loading, .slist > .empty { grid-column: 1 / -1 }
.slist:has(> .loading) { min-height: 100svh }   /* the pager starts below the screen, so the cards do not move it into view */
.sl { display: flex; flex-direction: column; overflow: hidden; min-width: 0 }
.sl-photo { position: relative; aspect-ratio: 4 / 3; background: #EEF0ED; display: flex; align-items: center; justify-content: center; padding: 0 16px; text-align: center; font-size: 14px; color: var(--muted) }
.sl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.sl-credit { margin: 0; padding: 6px 14px 0; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere }
.sl-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 16px; font-size: 15px }
.sl-body p { margin: 0 } .sl-body .note { padding-bottom: 6px } .sl-h { font-size: 13px; font-weight: 600; color: var(--ink-2) }
.sl-names { margin: 0; padding-left: 22px; font-size: 16px; line-height: 1.5 }
.sl-why { font-size: 13px; font-weight: 600; color: var(--accent-dark) }
.sl-body a.b.go { margin-top: auto; justify-content: center; background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600 }
#ginfo { min-height: 3em } #bands { min-height: 44px }
@media (max-width: 600px) { #ginfo { min-height: 6em } }

/* Weekly trend (changes.html): tiles that pick the measure, and the chart */
button.kpi { text-align: left; font: inherit; cursor: pointer; width: 100% } button.kpi:hover { border-color: var(--field) }
button.kpi[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.kpi .delta { margin-top: 4px; font-size: 14px; color: var(--muted) } .kpi .spark { display: block; margin-top: 10px; width: 100%; height: 28px }
.trend svg { display: block; width: 100%; height: auto; touch-action: pan-y }
.trend .axis { font: 12px var(--mono); fill: var(--muted) } .trend .grid { stroke: var(--line-2); stroke-width: 1 }
.kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 899px) { .kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } .kpis.four .kpi { padding: 14px }
  .kpis.four .kpi b { font-size: 22px } .kpis.four .delta { min-height: 2.9em } }   /* tiles keep one height */

/* Species page: name and picture; the seven gaps as a pyramid with the group's share in each block; where beside when
   (stat tiles under the timeline); who it interacts with; its relatives; then the details. */
.sp-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px 28px; align-items: start }
@media (max-width: 720px) { .sp-head { grid-template-columns: minmax(0, 1fr) } .sp-photo { width: min(420px, 100%) } }
.sp-photo { margin: 32px 0 0 } .sp-photo:empty { display: none }
.sp-photo .ph { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--line-2); border: 1px solid var(--line) }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block }
.sp-photo figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4 } .sp-photo figcaption a { color: inherit }
.sp-photo .none { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border-style: dashed; font-size: 14.5px; color: var(--ink-2) }
.sp-photo .none b { font-size: 16px; color: var(--ink) } .sp-photo .none a { font-weight: 600 }
.sp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 14px; background: var(--surface); border: 1px solid var(--line) }
.sp-pill b { font-weight: 600 }
.pyr { display: grid; gap: 6px }
.pyr .lvl { display: grid; gap: 6px } .pyr .l4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.pyr .l2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 12% } .pyr .l1 { margin: 0 30% }
@media (max-width: 600px) { .pyr .l4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pyr .l2 { margin: 0 } .pyr .l1 { margin: 0 20% } }
.blk { font: inherit; text-align: center; border-radius: 8px; padding: 10px; min-height: 92px; cursor: pointer; display: flex; flex-direction: column;
  justify-content: center; gap: 2px; border: 2px solid transparent; color: var(--ink) }
.blk .t { font-weight: 600; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere } .blk .p { font-size: 12.5px; opacity: .85 }
.blk.known { background: var(--gap-known); color: #fff } .blk.part { background: var(--gap-part) }
.blk.gap { background: var(--surface); border-color: var(--gap-open) }
.blk.list { background: var(--surface); border-color: var(--line); color: var(--ink) } .blk.list .bar i { background: var(--accent) }
.gaps-pyr { padding-top: 8px }
.blk.na { background: repeating-linear-gradient(45deg, var(--line-2) 0 6px, var(--surface) 6px 12px); border-color: var(--line); color: var(--muted) }
.blk[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink) }
.legend .sw.blk { min-height: 0; padding: 0 } .legend .sw.blk.na { border: 1px solid var(--gap-na) }
/* The group's share inside each block: a bar in the block's own ink, so it reads on every fill. */
.blk .grp { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 11.5px var(--mono) }
.blk .bar { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden }
.blk .bar i { display: block; height: 100%; background: currentColor; border-radius: 3px }
.sp-gapnote { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--line-2); font-size: 15px; color: var(--ink-2) }
.sp-two { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: stretch }
@media (max-width: 899px) { .sp-two { grid-template-columns: minmax(0, 1fr) } }
.sp-two .sp-map { margin-top: 0; --none: var(--zero) }
.sp-when { display: flex; flex-direction: column; min-width: 0 }
.sp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 18px }
@media (max-width: 520px) { .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.sp-tiles div { background: var(--line-2); border-radius: 10px; padding: 12px 14px }
.sp-tiles b { display: block; font: 500 24px/1.1 var(--mono); letter-spacing: -.02em }
.sp-tiles span { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-2) } .sp-tiles small { color: var(--muted); font-size: 13px }
#kindsbar { display: flex; gap: 2px; height: 34px; border-radius: 8px; overflow: hidden }
#kindsbar:empty { display: none }
#kindsbar button { border: 0; padding: 0 8px; font: 500 13px var(--sans); color: #fff; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 6px }
#kindsbar button[aria-pressed="false"] { opacity: .28 } #kindsbar button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.sp-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 6px }
.sp-search { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink) }
.sp-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); cursor: pointer }
.sp-toggle input { width: 18px; height: 18px; accent-color: var(--accent) }
.sp-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px 28px; margin-top: 8px }
.wb h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px }
.wb h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--c) } .wb h3 .note { font-weight: 400 }
.wb ul { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--c) }
.wb .note.why { display: block; background: none; color: var(--muted); padding: 0; margin: 4px 0 0 14px; font-size: 13.5px }
.wp { display: grid; grid-template-columns: 12px minmax(0, 1fr) 64px 44px; gap: 8px; align-items: center; width: 100%;
  min-height: 32px; padding: 3px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--ink); text-align: left; text-decoration: none }
a.wp:hover { background: var(--line-2); color: var(--ink) } .wp:focus-visible { outline: 2px solid var(--accent) }
.wp .nm { font-style: italic; overflow-wrap: anywhere } .wp .ct { font: 500 13px var(--mono); color: var(--muted); text-align: right }
.wp .bar { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden } .wp .bar i { display: block; height: 100%; background: var(--c) }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--c); background: #fff; display: inline-block; box-sizing: border-box }
.dot.in { background: var(--c) }
.wmore { margin: 4px 0 0 18px; font-size: 14px }
@media (max-width: 520px) { .wp { grid-template-columns: 12px minmax(0, 1fr) 40px } .wp .bar { display: none } }
#rel { width: 100%; min-width: 640px; height: auto; display: block }
#rel text { font: 13px var(--sans); fill: var(--ink-2) } #rel .ax { font: 12px var(--mono); fill: var(--muted) }
#rel .me text { fill: var(--ink); font-weight: 600 } #rel a:hover text { fill: var(--accent) }
.glyph { display: inline-block; vertical-align: middle } .glyph rect { stroke-width: 1.4 }
.g-known, .m-known { fill: var(--gap-known) } .g-part, .m-part { fill: var(--gap-part) } .m-open { fill: var(--gap-open) }
.g-gap { fill: #fff; stroke: var(--gap-open); stroke-width: 2 }
.g-na { fill: #fff; stroke: var(--gap-na); stroke-width: 2; stroke-dasharray: 4 3 }
.sp-map { margin-top: 20px; --none: var(--zero) }
details.card > summary { cursor: pointer; list-style-position: inside } details.card[open] > summary { border-bottom: 1px solid var(--line) }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer }