/* Ichnic, the open atlas of illegal wildlife trade: one living map, everything else floats on it.
 *
 * Ground  mist #EDF1EF (a grey biased to leaf green, so the globe reads as a place, not a void)
 * Ink     #0F1A17 deep forest ink; body #3C4A45; captions #5F6D68
 * Lenses  each layer of evidence keeps one hue (colour psychology):
 *         cases red (urgency), species green (life), trade amber (commerce, caution),
 *         network teal (openness), investigate violet (insight), places blue (orientation)
 * Map     case kinds use the validated categorical slots: seizure #2A78D6,
 *         arrest/conviction #EB6834, rescue/report #1BAF7A (plus a text label everywhere)
 * Type    Bricolage Grotesque (display, used sparingly), Geist (UI), Geist Mono (numbers, IDs)
 */
:root {
  color-scheme: light;
  --ground: #edf1ef;
  --ink: #0f1a17;
  --ink-2: #3c4a45;
  --ink-3: #5f6d68;
  --line: rgba(15, 26, 23, 0.09);
  --line-2: rgba(15, 26, 23, 0.16);
  --glass: rgba(255, 255, 255, 0.76);
  --glass-2: rgba(255, 255, 255, 0.9);
  --edge: rgba(255, 255, 255, 0.9);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 20px 44px -22px rgba(15, 26, 23, 0.32), 0 2px 8px -3px rgba(15, 26, 23, 0.08);
  --blur: blur(22px) saturate(170%);
  --r: 20px;
  --r-sm: 12px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-slide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --cases: #d6453d;   --cases-ink: #a8271f;
  --species: #218a5b; --species-ink: #146a43;
  --trade: #c27a06;   --trade-ink: #8a5300;
  --network: #0e8f88; --network-ink: #0a6a65;
  --invest: #6550c8;  --invest-ink: #4a37a3;
  --place: #2563eb;   --place-ink: #1d4fbf;
  --accent: #c27a06;  /* brand ochre: the one warm note in the logo */

  --k-seizure: #2a78d6; --k-arrest: #eb6834; --k-other: #1baf7a;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Geist", -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 16px;
  --top: 76px;       /* height reserved by the top bar */
  --dock: 104px;     /* height reserved by the timeline */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
a { color: var(--place-ink); }
:focus-visible { outline: 2px solid var(--place); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the map */
#globe { position: fixed; inset: 0; }
#globe canvas { outline: none; }
#globe canvas:focus-visible { outline: 3px solid var(--place); outline-offset: -3px; }
.maplibregl-ctrl-attrib { font-size: 10.5px; background: rgba(255,255,255,.7) !important; border-radius: 8px; }
/* The map credit sits above the timeline dock, bottom right, under the legend. */
.maplibregl-ctrl-bottom-right { bottom: calc(var(--dock) + 16px) !important; right: calc(var(--gutter) - 6px) !important; }
body.inspecting .maplibregl-ctrl-bottom-right { right: calc(var(--gutter) + 430px) !important; }
.maplibregl-popup-content { border-radius: 14px !important; padding: 10px 12px !important; font: 13px/1.45 var(--font);
  background: var(--glass-2) !important; box-shadow: var(--shadow) !important; backdrop-filter: var(--blur); max-width: 280px; }
.maplibregl-popup-tip { display: none; }

/* ------------------------------------------------------------------ glass */
.glass {
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--shadow);
}
@media (prefers-reduced-transparency: reduce) { .glass { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ------------------------------------------------------------------ top bar */
.topbar { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: var(--gutter); right: var(--gutter);
  display: flex; gap: 10px; align-items: flex-start; z-index: 20; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 30px; height: 30px; color: var(--ink); }
.brand b { font: 800 19px/1 var(--display); letter-spacing: -0.03em; }
.brand .wm-a { font-weight: 500; }
.brand small { display: block; font: 500 10.5px/1.2 var(--font); color: var(--ink-3); letter-spacing: 0.01em; margin-top: 3px; }

.omni { position: relative; width: min(460px, 100%); flex: 0 1 460px; }
.omni-box { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 16px; }
.omni-box svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.omni input { flex: 1; border: 0; background: transparent; outline: none; font-size: 15px; min-width: 0; }
.omni input::placeholder { color: var(--ink-3); }
.omni-box:has(input:focus-visible) { outline: 2px solid var(--place); outline-offset: 2px; }
.kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink-3); background: rgba(255,255,255,.6); }
.omni-results { position: absolute; top: 58px; left: 0; right: 0; max-height: min(60vh, 520px); overflow: auto; padding: 6px; display: none; }
.omni.open .omni-results { display: block; animation: rise 260ms var(--ease) both; }
.hit { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; background: transparent; border-radius: 12px; cursor: pointer; }
.hit:hover, .hit[aria-selected="true"] { background: rgba(15, 26, 23, 0.05); }
.hit .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 600 11px/1 var(--mono); color: #fff; background: var(--c, var(--ink-3)); }
.hit .t { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit .s { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit .k { font-size: 11px; color: var(--ink-3); }
.omni-group { font: 600 10.5px/1 var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 10px 10px 6px; }

.lenses { display: flex; gap: 4px; padding: 5px; height: 52px; align-items: center; margin-left: auto; flex: none; }
.lens { --c: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 14px; border: 0;
  background: transparent; cursor: pointer; font-weight: 550; font-size: 13px; color: var(--ink-2);
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease); }
.lens:hover { background: rgba(15, 26, 23, 0.05); }
.lens:active { transform: scale(0.97); }
.lens .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); transition: opacity 200ms; }
.lens[aria-pressed="false"] { color: var(--ink-3); }
.lens[aria-pressed="false"] .dot { opacity: 0.25; box-shadow: none; }
.lens .n { font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.lens.tool { color: #fff; background: var(--invest); }
.lens.tool:hover { background: var(--invest-ink); }
.lens-title { font: 650 10.5px/1 var(--font); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding: 0 6px 0 10px; }
@media (max-width: 1180px) { .lens-title { display: none; } }
.sep { width: 1px; height: 24px; background: var(--line-2); margin: 0 4px; }

/* ------------------------------------------------------------------ pulse (left) */
.pulse { position: fixed; left: var(--gutter); top: calc(var(--top) + 8px + env(safe-area-inset-top, 0px)); width: 360px;
  bottom: calc(var(--dock) + 24px); display: flex; flex-direction: column; z-index: 10;
  transition: transform 420ms var(--ease-slide), opacity 300ms var(--ease); }
.pulse.folded { transform: translateX(calc(-100% + 44px)); }
.pulse-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; }
.pulse-head h2 { font: 650 13px/1 var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: 0; flex: 1; }
.pulse-body { overflow-y: auto; padding: 0 14px 16px 18px; flex: 1; scrollbar-width: thin; }
.icon-btn { width: 32px; height: 32px; border-radius: 10px; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--ink-2); flex: none; }
.icon-btn:hover { background: rgba(15, 26, 23, 0.06); }
.icon-btn svg { width: 17px; height: 17px; }

.headline { font: 700 30px/1.05 var(--display); letter-spacing: -0.035em; margin: 2px 0 6px; text-wrap: balance; }
.lede { color: var(--ink-2); margin: 0 0 14px; font-size: 13.5px; text-wrap: pretty; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.tile { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); }
.tile .v { font: 600 24px/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tile .k { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sec { margin: 16px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sec h3 { margin: 0; font: 650 12px/1 var(--font); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.sec button { border: 0; background: none; color: var(--place-ink); font-size: 12px; cursor: pointer; padding: 0; }

.bars { display: grid; gap: 2px; }
.bar { --c: var(--species); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px;
  border: 0; background: transparent; cursor: pointer; text-align: left; position: relative; overflow: hidden; }
.bar:hover { background: rgba(15, 26, 23, 0.04); }
.bar .fill { position: absolute; left: 0; top: 6px; bottom: 6px; border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--c) 16%, transparent); width: var(--w); transition: width 500ms var(--ease-slide); }
.bar[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 12%, white); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent); }
.bar span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bar .n { font: 500 12px/1 var(--mono); color: var(--ink-2); }

.feed { display: grid; gap: 2px; }
.item { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 8px; border-radius: 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.item:hover { background: rgba(15, 26, 23, 0.045); }
.item .k { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--kc); }
.item .t { font-weight: 550; font-size: 13px; line-height: 1.35; }
.item .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 550;
  background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line-2); color: var(--ink-2); cursor: pointer; }
.chip .x { opacity: 0.55; }
.chip.k { --kc: var(--ink-3); } .chip.k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kc); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.active-filters:empty { display: none; }

/* ------------------------------------------------------------------ inspector (right) */
.inspector { position: fixed; right: var(--gutter); top: calc(var(--top) + 8px + env(safe-area-inset-top, 0px)); width: 420px;
  bottom: calc(var(--dock) + 24px); z-index: 12; display: flex; flex-direction: column;
  transform: translateX(calc(100% + 32px)); opacity: 0;
  transition: transform 260ms var(--ease-exit), opacity 200ms var(--ease-exit); }
.inspector.on { transform: none; opacity: 1; transition: transform 520ms var(--ease-slide), opacity 280ms var(--ease); }
.insp-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 6px 12px; border-bottom: 1px solid var(--line); }
.crumbs { flex: 1; display: flex; gap: 4px; overflow: hidden; font-size: 12px; color: var(--ink-3); white-space: nowrap; min-width: 0; }
.crumbs button { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px 4px; border-radius: 6px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.crumbs button:hover { color: var(--ink); background: rgba(15, 26, 23, 0.05); }
.crumbs button[aria-current="true"] { color: var(--ink); font-weight: 600; }
.insp-body { overflow-y: auto; padding: 16px 18px 22px; flex: 1; scrollbar-width: thin; }
.insp-body > * { animation: rise 380ms var(--ease) both; }
.eyebrow { font: 650 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c, var(--ink-3)); display: flex; gap: 8px; align-items: center; }
.eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--c, var(--ink-3)); }
.title { font: 650 22px/1.2 var(--display); letter-spacing: -0.025em; margin: 10px 0 10px; text-wrap: balance; }
.facts { display: grid; grid-template-columns: 116px 1fr; gap: 7px 12px; font-size: 13px; margin: 14px 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }
.box { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); font-size: 13px; margin: 10px 0; }
.box h4 { margin: 0 0 6px; font: 650 11.5px/1 var(--font); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.box.limit { border-left: 3px solid var(--trade); }
.link-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font-size: 13px; }
.link-row:hover { background: rgba(15, 26, 23, 0.045); }
.status { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--font); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.status.good { background: rgba(33, 138, 91, 0.12); color: var(--species-ink); }
.status.warn { background: rgba(194, 122, 6, 0.14); color: var(--trade-ink); }
.status.info { background: rgba(60, 74, 69, 0.1); color: var(--ink-2); }
.status.bad { background: rgba(214, 69, 61, 0.12); color: var(--cases-ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.85); cursor: pointer; font-weight: 550; font-size: 13px; text-decoration: none; color: var(--ink);
  transition: transform 160ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); }
.btn:hover { background: #fff; box-shadow: 0 6px 16px -10px rgba(15, 26, 23, 0.4); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--ink); color: #fff; border-color: transparent; }
.btn.violet { background: var(--invest); color: #fff; border-color: transparent; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.terms { display: flex; flex-wrap: wrap; gap: 5px; }
.term { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: rgba(33, 138, 91, 0.08); color: var(--species-ink); border: 1px solid rgba(33, 138, 91, 0.18); }
.term i { font-style: normal; font-size: 9.5px; text-transform: uppercase; opacity: 0.7; margin-right: 4px; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ timeline (bottom) */
.dock { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: var(--dock);
  z-index: 15; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; }
.play { width: 44px; height: 44px; border-radius: 14px; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; }
.play svg { width: 18px; height: 18px; }
.tl { position: relative; height: 78px; min-width: 0; align-self: center; }
.tl svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tl .col { fill: color-mix(in srgb, var(--cases) 55%, white); transition: fill 200ms; }
.tl .col.in { fill: var(--cases); }
.tl .axis { font: 10.5px var(--mono); fill: var(--ink-3); }
.tl .brush { fill: rgba(214, 69, 61, 0.07); stroke: var(--cases); stroke-width: 1.5; cursor: grab; }
.tl .handle { fill: #fff; stroke: var(--cases); stroke-width: 1.5; cursor: ew-resize; }
.dock-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 12px; color: var(--ink-3); min-width: 150px; text-align: right; }
.dock-side b { color: var(--ink); font: 600 15px/1.1 var(--display); letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ sheets (bottom) */
.sheet { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: min(64vh, 680px);
  z-index: 30; display: flex; flex-direction: column; transform: translateY(calc(100% + 40px));
  transition: transform 280ms var(--ease-exit); }
.sheet.on { transform: none; transition: transform 560ms var(--ease-slide); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font: 650 17px/1.1 var(--display); letter-spacing: -0.02em; }
.sheet-head .tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(15, 26, 23, 0.05); margin-left: 10px; }
.sheet-head .tabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 550; color: var(--ink-3); }
.sheet-head .tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 26, 23, 0.12); }
.sheet-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 0 auto; }

/* workbench inside the sheet */
.wb { display: grid; grid-template-columns: 240px 1fr 300px; height: 100%; }
.wb-side { padding: 14px; overflow: auto; border-right: 1px solid var(--line); font-size: 13px; }
.wb-side:last-child { border-right: 0; border-left: 1px solid var(--line); }
.wb-canvas { position: relative; min-width: 0; }
#cy { position: absolute; inset: 0; }
.wb-tools { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; pointer-events: none; }
.wb-tools > * { pointer-events: auto; }
.wb-tools .btn { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 10px; }
.type-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.type-row:hover { background: rgba(15, 26, 23, 0.04); }
.type-row .sw { width: 11px; height: 11px; border-radius: 4px; }
.type-row .n { margin-left: auto; font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
.note { font-size: 12.5px; padding: 10px 12px; border-radius: 12px; background: rgba(101, 80, 200, 0.08); color: var(--invest-ink); border: 1px solid rgba(101, 80, 200, 0.18); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 5px 10px; font-size: 12.5px; }
.kv div:nth-child(odd) { color: var(--ink-3); }

/* importer */
.imp { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px; }
.drop { display: block; border: 1.5px dashed var(--line-2); border-radius: 16px; padding: 22px; text-align: center; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: border-color 200ms, background 200ms; }
.drop.over { border-color: var(--invest); background: rgba(101, 80, 200, 0.06); }
.map-grid { display: grid; grid-template-columns: 150px 1fr; gap: 8px 12px; align-items: center; font-size: 13px; }
select, input[type="text"], input[type="search"] { height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.9); }
.preview { overflow: auto; max-height: 220px; border-radius: 12px; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { text-align: left; padding: 6px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 600; color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; background: #fff; }

/* network directory in the sheet */
.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; padding: 16px; }
.obs { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); display: grid; gap: 7px; align-content: start; font-size: 13px; cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.obs:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(15, 26, 23, 0.45); }
.obs h4 { margin: 0; font: 650 15px/1.25 var(--display); letter-spacing: -0.01em; }
.obs .use { font-size: 12.5px; color: var(--network-ink); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px 0; align-items: center; }
.filters .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: transparent; }
.prose { max-width: 72ch; padding: 18px 22px; font-size: 14px; }
.prose h3 { font: 650 17px/1.2 var(--display); margin: 20px 0 6px; letter-spacing: -0.015em; }

/* ------------------------------------------------------------------ legend + map controls */
.legend { position: fixed; right: calc(var(--gutter) + 436px); bottom: calc(var(--dock) + 58px); z-index: 9; padding: 10px 12px; font-size: 12px; display: grid; gap: 5px;
  transition: right 420ms var(--ease-slide); }
body:not(.inspecting) .legend { right: var(--gutter); }
.legend .r { display: flex; gap: 8px; align-items: center; }
.legend .sw { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.mapctl { position: fixed; right: calc(var(--gutter) + 436px); top: calc(var(--top) + 8px); z-index: 9; display: grid; gap: 6px; transition: right 420ms var(--ease-slide); }
body:not(.inspecting) .mapctl { right: var(--gutter); }
.mapctl .icon-btn { background: var(--glass-2); box-shadow: var(--shadow); border: 1px solid var(--edge); width: 38px; height: 38px; border-radius: 12px; }

/* ------------------------------------------------------------------ motion */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bloom { 0% { opacity: 0; transform: scale(0.96); filter: brightness(1.15); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
@keyframes sheen { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.skeleton { position: relative; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.6); min-height: 16px; }
.skeleton::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 200%; background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.9) 50%, transparent 76%);
  background-size: 50% 100%; animation: sheen 2.6s linear infinite; }
.bloom { animation: bloom 560ms var(--ease) both; }
/* The splash covers the map only: the panels above it (z 9 and up) paint at once with the static question. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5; background: var(--ground); transition: opacity 600ms var(--ease); }
.boot.done { opacity: 0; pointer-events: none; }
.boot svg { width: 56px; height: 56px; color: var(--ink); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } }
.toast { position: fixed; left: 50%; bottom: calc(var(--dock) + 30px); transform: translate(-50%, 20px); opacity: 0; z-index: 60; padding: 10px 14px; font-size: 13px;
  transition: all 360ms var(--ease-slide); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1180px) {
  .inspector { width: 380px; }
  .legend, .mapctl { right: calc(var(--gutter) + 396px); }
  .lens[data-layer] .label { display: none; }
}
@media (max-width: 860px) {
  :root { --top: 196px; --dock: 0px; }
  .topbar { flex-wrap: wrap; }
  .brand small { display: none; }
  .omni { flex: 1 1 200px; }
  /* The lens bar scrolls sideways on a phone; the fade on the right says so, and each lens
     snaps, so Tour and Investigate are reachable instead of being cut off at the edge. */
  .lenses { margin-left: 0; width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
  .lenses::-webkit-scrollbar { display: none; }
  .lens { scroll-snap-align: start; flex: none; }
  .lens .label { display: inline; }
  .dock { display: none; }
  .pulse { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; height: 44vh; }
  .pulse.folded { transform: translateY(calc(100% - 56px)); }
  .inspector { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; height: 78vh; transform: translateY(calc(100% + 20px)); }
  .legend { display: none; }
  .mapctl { right: 8px; top: calc(var(--top) + 8px); }
  body:not(.inspecting) .mapctl { right: 8px; }
  .sheet { left: 8px; right: 8px; height: 86vh; }
  .wb { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wb-side { display: none; }
  .imp { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ v1.2: map-control pill, table, evidence */
.mapctl { gap: 0; padding: 4px; border-radius: 16px; background: var(--glass-2); box-shadow: var(--shadow); border: 1px solid var(--edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.mapctl .icon-btn { background: transparent; box-shadow: none; border: 0; width: 36px; height: 36px; border-radius: 11px; }
.mapctl .icon-btn:hover { background: rgba(15, 26, 23, 0.06); }
.mapctl .icon-btn[aria-pressed="true"] { color: var(--invest-ink); background: rgba(101, 80, 200, 0.1); }
.sort { border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 0; }
.sort:hover { color: var(--ink); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; white-space: normal; }
.linkish:hover { color: var(--place-ink); text-decoration: underline; }
.sheet-body td { white-space: normal; }
.sheet-body td.num { white-space: nowrap; }
.insp-body .title:focus { outline: none; }
.insp-body .title:focus-visible { outline: 2px solid var(--place); outline-offset: 4px; }
.legend { gap: 4px; font-size: 11.5px; }
.sec button { font-weight: 550; }
/* folded summary shows only its handle */
.pulse.folded .pulse-body, .pulse.folded .pulse-head h2 { visibility: hidden; }
.pulse.folded .pulse-head { justify-content: flex-end; }
.pulse.folded #fold svg { transform: rotate(180deg); }
.insp-body .title:focus, .insp-body .title:focus-visible { outline: none; }

/* v1.2.4: keep the lens bar inside the viewport as more lenses appear (Routes, Table, About) */
.omni { min-width: 200px; }
@media (max-width: 1560px) {
  .lens-title, .brand small { display: none; }
  .lens { padding: 0 10px; }
}
@media (max-width: 1320px) { .lens .n { display: none; } }

/* v1.3: trivia box ------------------------------------------------------------------
   Docked bottom-left, under Pulse. Motion follows the OpenHiggsfield vocabulary already
   in use here: cards arrive on --ease, the box leaves faster than it enters on
   --ease-exit, and nothing loops except the live dot. */
.trivia { position: fixed; left: calc(var(--gutter) + 376px); bottom: calc(var(--dock) + 24px); width: 340px; z-index: 11;
  border-radius: var(--r); padding: 4px 4px 8px; animation: drop 460ms var(--ease-slide) both; }
.tv-head { padding: 8px 8px 2px; }
.tv-toggle { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; cursor: pointer;
  padding: 6px 8px; border-radius: var(--r-sm); font: 600 13.5px/1 var(--font); color: var(--ink);
  transition: background 200ms var(--ease); }
.tv-toggle:hover { background: rgba(15, 26, 23, 0.05); }
.tv-toggle b { flex: 1; text-align: left; font-weight: 600; }
.tv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--trade); animation: tvpulse 2.6s ease-in-out infinite; }
.tv-toggle .chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform 260ms var(--ease); }
.trivia.folded .tv-toggle .chev { transform: rotate(180deg); }
.trivia.folded .tv-body, .trivia.folded .tv-foot { display: none; }
.trivia.folded { width: 230px; }
.tv-body { padding: 2px 12px 0; }
.tv-art { height: 76px; display: grid; place-items: center; margin: 2px 0 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ground) 60%, #fff); }
.tv-art svg { width: 168px; height: 68px; }
.tv-body h3 { font: 600 16.5px/1.25 var(--display); letter-spacing: -0.01em; margin: 0 0 6px; text-wrap: balance; }
.tv-body p { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.tv-src { font-size: 11.5px !important; color: var(--ink-3) !important; }
.tv-src a { color: var(--place-ink); }
.tv-tag { display: inline-block; background: color-mix(in srgb, var(--species) 14%, transparent); color: var(--species-ink);
  border-radius: 999px; padding: 2px 8px; font-weight: 600; margin-right: 4px; }
.tv-foot { display: flex; align-items: center; gap: 8px; padding: 2px 12px 4px; }
.tv-count { flex: 1; font-size: 11.5px; color: var(--ink-3); text-align: center; }
.tv-prev { width: 34px; padding: 0; }
@keyframes drop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tvpulse { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 1320px) { .trivia { left: var(--gutter); } .pulse.folded ~ .trivia { left: calc(var(--gutter) + 60px); } }
/* On a phone the box sits above the summary panel, folded, so it invites a tap without
   covering the map. */
@media (max-width: 1180px) {
  .trivia { left: 8px; right: 8px; width: auto; bottom: calc(44vh + 16px); }
  .trivia.folded { width: auto; }
  .tv-body { max-height: 46vh; overflow-y: auto; }
}
@media (max-width: 1180px) and (max-height: 620px) { .trivia { display: none; } }

/* v1.3: guided walkthrough ----------------------------------------------------------
   A dimming veil with a hole cut over the element being explained, so the reader is
   looking at the live interface. The veil fades; the hole travels on --ease-slide. */
.tour { position: fixed; inset: 0; z-index: 60; animation: fade 220ms var(--ease) both; }
.tour.out { animation: fade 160ms var(--ease-exit) reverse both; }
.tour-veil { position: absolute; inset: 0; background: rgba(15, 26, 23, 0.44); backdrop-filter: blur(1.5px); }
.tour-cut { position: absolute; border-radius: var(--r); box-shadow: 0 0 0 9999px rgba(15, 26, 23, 0.44), 0 0 0 2px var(--accent) inset;
  pointer-events: none; transition: left 420ms var(--ease-slide), top 420ms var(--ease-slide),
    width 420ms var(--ease-slide), height 420ms var(--ease-slide); }
.tour-cut:not([hidden]) ~ .tour-veil, .tour:has(.tour-cut:not([hidden])) .tour-veil { opacity: 0; }
.tour-card { position: absolute; width: 372px; max-width: calc(100vw - 28px); padding: 18px 18px 14px; border-radius: var(--r);
  background: var(--glass-2); box-shadow: var(--shadow); }
.tour-step { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.tour-card h2 { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; margin: 6px 0 8px; text-wrap: balance; }
.tour-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.tour-nav { display: flex; gap: 8px; align-items: center; }
.btn.primary { background: var(--invest); color: #fff; border-color: transparent; }
.btn.primary:hover { background: var(--invest-ink); }
body.touring .trivia, body.touring .legend { pointer-events: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* v1.3: the case account — the story of the case before the structured evidence blocks */
.account { margin: 12px 0 14px; }
.account p { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 9px; }
.account p:first-child::first-line { font-weight: 500; }
.account p:last-child { color: var(--ink-3); font-size: 13px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); padding-top: 2px; }
.facts dd { margin: 0; font-size: 13px; color: var(--ink); }

/* v1.5: modes (Cases · Flows · Zoonoses) -------------------------------------------
   One map, three questions. The mode switch sits first in the lens bar; the case layers,
   timeline and legend step back while Flows or Zoonoses is on. */
.modes { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: rgba(15, 26, 23, 0.05); }
.mode { --c: var(--ink); height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 600 13px/1 var(--font); color: var(--ink-3); transition: background 200ms var(--ease), color 200ms var(--ease); }
.mode:hover { color: var(--ink); }
.mode[aria-pressed="true"] { background: #fff; color: var(--c); box-shadow: 0 1px 3px rgba(15, 26, 23, 0.14); }
body:not(.mode-cases) .lens[data-layer] { display: none; }
body:not(.mode-cases) { --dock: 0px; }
body:not(.mode-cases) .dock, body:not(.mode-cases) .legend, body:not(.mode-cases) .trivia { display: none; }

/* right panel: the story and the route switches */
.flowside { position: fixed; right: var(--gutter); top: calc(var(--top) + 8px + env(safe-area-inset-top, 0px)); width: 380px;
  bottom: 24px; z-index: 11; display: none; flex-direction: column; animation: rise 380ms var(--ease) both; }
body.mode-flows .flowside, body.mode-zoo .flowside { display: flex; }
body.inspecting .flowside { display: none; }
body:not(.mode-cases):not(.inspecting) .mapctl { right: calc(var(--gutter) + 396px); }
body:not(.mode-cases):not(.inspecting) .maplibregl-ctrl-bottom-right { right: calc(var(--gutter) + 390px) !important; bottom: 16px !important; }
.fs-body { overflow-y: auto; padding: 16px 16px 18px; scrollbar-width: thin; }
.story { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 4px; text-wrap: pretty; }
.story b { color: var(--ink); }
.routes { display: grid; gap: 1px; }
.route { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; cursor: pointer; }
.route:hover { background: rgba(15, 26, 23, 0.045); }
.route input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.route .rt { display: grid; gap: 3px; min-width: 0; font-size: 13px; }
.route .rt b { font-weight: 600; }
.route .rb { display: block; height: 5px; border-radius: 3px; }
.route small { color: var(--ink-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route.off { opacity: 0.5; }
.route.off .rb { background: var(--line-2) !important; }
.route .mono { color: var(--ink); }
.legend-f { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.lg i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dotc { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }

/* controls */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(15, 26, 23, 0.06); }
.seg button { flex: 1; min-height: 32px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: 550 12.5px/1.1 var(--font); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 26, 23, 0.14); }
.ck { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; cursor: pointer; font-size: 13px; }
.ck input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.ck > span { display: grid; gap: 1px; }
.ck b { font-weight: 550; }
.ck small { color: var(--ink-3); font-size: 11.5px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.two select, .pulse select { max-width: 100%; min-width: 0; }
.chips select { height: 30px; font-size: 12.5px; border-radius: 999px; padding: 0 10px; max-width: 100%; }
.pulse input[type="range"] { accent-color: var(--trade-ink); }
.yrs { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.yrs i { flex: 1; background: var(--trade); border-radius: 3px 3px 0 0; min-width: 4px; }
.yrs i.part { background: repeating-linear-gradient(135deg, var(--trade) 0 2px, color-mix(in srgb, var(--trade) 25%, transparent) 2px 5px); }
.yrs-l { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); color: var(--ink-3); margin-top: 4px; }
.m-only { display: none; }

/* inspector blocks */
.rolebar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.rolebar i { min-width: 3px; }
.sankey { width: 100%; height: auto; overflow: visible; }
.sankey .sk { font: 600 11px var(--font); fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3px; }
.sankey .skn { font: 500 10.5px var(--mono); fill: var(--ink-3); }
.sankey .skh { font: 650 9.5px var(--font); letter-spacing: 0.06em; }

/* sheets: matrix, zoonoses table, analysis */
.matrix { border-collapse: separate; border-spacing: 3px; width: auto; }
.matrix th { position: static; background: transparent; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--ink); white-space: nowrap; padding: 4px 6px; }
.matrix thead th { vertical-align: bottom; text-align: center; }
.matrix td { padding: 0; border: 0; }
.mc { display: grid; place-items: center; width: 100%; min-width: 64px; height: 38px; border: 1px solid var(--line); border-radius: 7px; font: 500 12px/1 var(--mono); cursor: pointer; }
button.mc:hover:not(:disabled) { outline: 2px solid var(--ink); outline-offset: 1px; }
.mc:disabled { cursor: default; }
.zoo-t .mc { min-width: 54px; height: 32px; cursor: default; }
.zoo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; height: 100%; }
.zoo-side { border-left: 1px solid var(--line); padding: 14px 16px; overflow: auto; font-size: 13px; }
.zoo-side h4 { margin: 14px 0 6px; font: 650 11.5px/1 var(--font); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); }
.zoo-side h4:first-child { margin-top: 0; }
.zoo-side p { margin: 0 0 8px; line-height: 1.5; }
.both { font-size: 12.5px; }
.both th, .both td { padding: 5px 4px; }
.an { padding: 14px 16px 18px; display: grid; gap: 14px; }
.an-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile.a .k { display: flex; align-items: center; }
.an-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); min-width: 0; }
.card.wide { grid-column: span 2; }
.card h3 { margin: 0; font: 650 15px/1.2 var(--display); letter-spacing: -0.01em; }
.card > p { margin: 3px 0 10px; font-size: 12.5px; }
.bal { display: grid; grid-template-columns: 96px 1fr 1fr 58px; align-items: center; min-height: 24px; font-size: 12.5px; }
.bal .l { display: flex; justify-content: flex-end; padding-right: 1px; }
.bal .r { display: flex; padding-left: 1px; }
.bal i { height: 12px; }
.bal .l i { border-radius: 4px 0 0 4px; }
.bal .r i { border-radius: 0 4px 4px 0; }
.bal.hd { font-size: 11.5px; margin-bottom: 2px; }
.bal .mono { text-align: right; }

/* charts.js: marks, labels and the hover tip */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 11px var(--font); fill: var(--ink-3); }
.chart .lbl { fill: var(--ink-2); font-size: 12px; }
.chart .val { font-family: var(--mono); fill: var(--ink); }
.chart .grid-line { stroke: var(--line); }
svg .hit { fill: transparent; cursor: default; }
.chart .g:hover .mark { filter: brightness(0.9); }
.tip { position: fixed; z-index: 70; padding: 8px 10px; font-size: 12.5px; pointer-events: none; opacity: 0; transition: opacity 120ms var(--ease); max-width: 260px; }
.tip.on { opacity: 1; }

@media (max-width: 1180px) {
  .flowside { width: 340px; }
  .an-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .flowside { display: none !important; }
  .m-only { display: block; margin-top: 16px; }
  body:not(.mode-cases) .mapctl { right: 8px; }
  .modes { flex: none; }
  .an-tiles, .an-grid { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
  .zoo-grid { grid-template-columns: 1fr; height: auto; }
  .zoo-side { border-left: 0; border-top: 1px solid var(--line); }
  .two { grid-template-columns: 1fr; }
}

/* v1.6: icons, logos and route evidence ----------------------------------------------
   Icons are CSS masks (species silhouettes from PhyloPic, product and kind icons from Tabler),
   so they take the colour of the text around them. Logos are the outlets' own site icons. */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico.sp { width: 1.35em; height: 1.2em; vertical-align: -0.24em; }
.chip .ico, .bar .ico, .term-chip .ico { margin-right: 2px; }
.bar span .ico.sp { color: var(--species-ink); margin-right: 6px; }
.logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex: none; background: #fff;
  box-shadow: 0 0 0 1px var(--line); vertical-align: middle; }
.logo.lg { width: 24px; height: 24px; border-radius: 6px; }
.logo.letter { display: inline-grid; place-items: center; font: 650 9.5px/1 var(--font); color: var(--ink-2); background: rgba(15, 26, 23, 0.06); box-shadow: none; }
.logo.lg.letter { font-size: 12px; }
.sp-hero { display: flex; align-items: center; gap: 12px; }
.sp-hero .ico.sp { width: 44px; height: 40px; color: var(--c, var(--species)); }
.sp-hero .logo.lg { width: 32px; height: 32px; }
.sp-hero .title { margin: 10px 0; }
.item .k.ki { width: 18px; height: 18px; border-radius: 6px; background: var(--kc); color: #fff; display: grid; place-items: center; margin-top: 1px; font-size: 12px; }
.hit .ic .ico { width: 16px; height: 16px; }
.hit .ic.logo-ic { background: transparent; }
.eyebrow .ico { width: 14px; height: 14px; }
.eyebrow::before { flex: none; }

/* route evidence */
.evid { display: flex; flex-wrap: wrap; gap: 6px; }
.evid .chip .ico.sp { color: var(--species-ink); }
.term-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 550;
  background: rgba(194, 122, 6, 0.1); color: var(--trade-ink); border: 1px solid rgba(194, 122, 6, 0.22); }
.route .rt-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.route .ev { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.route .ev:hover { color: var(--trade-ink); border-color: var(--trade); }
.route .ev .ico.sp { width: 16px; height: 14px; color: var(--species-ink); }
.route .ev b { font-weight: 600; }

/* v1.6: flags, tour tips switch and the Tour menu ------------------------------------ */
.flag { width: 20px; height: 15px; border-radius: 3px; object-fit: cover; flex: none; vertical-align: -2px; margin-right: 6px;
  box-shadow: 0 0 0 1px rgba(15, 26, 23, 0.12); }
.flag.xl { width: 40px; height: 30px; border-radius: 5px; margin: 0; }
.route-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.route-t .flag { width: 28px; height: 21px; margin: 0; }
.matrix th .flag { width: 16px; height: 12px; margin-right: 4px; }
.bal .flag { width: 16px; height: 12px; margin-right: 5px; }
.tour-tips { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); cursor: pointer; }
.tour-tips input { accent-color: var(--invest); }
.tour-menu { position: fixed; z-index: 65; width: 300px; padding: 6px; display: grid; gap: 2px; animation: rise 200ms var(--ease) both; }
.tour-menu button { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--ink); }
.tour-menu button:hover, .tour-menu button:focus-visible { background: rgba(101, 80, 200, 0.08); }
.tour-menu button.muted { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.tm-switch { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.tm-switch input { margin-top: 2px; accent-color: var(--invest); }
/* Map layers live with the legend, beside the map they control (the top bar is for places to go). */
.legend-layers { display: grid; gap: 1px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.legend-layers .lens { height: 30px; padding: 0 8px; font-size: 12px; justify-content: flex-start; border-radius: 9px; }
.legend-layers .lens .label, .legend-layers .lens .n { display: inline !important; }
.legend-layers .lens .n { margin-left: auto; }
.route .rt b.rl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route .rt b.rl .flag { width: 16px; height: 12px; margin-right: 4px; }
.route small .ico.sp { color: var(--species-ink); width: 15px; height: 13px; margin-right: 3px; }

/* v1.6.2: the video guide ------------------------------------------------------------ */
.guide { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; animation: fade 220ms var(--ease) both; }
.guide-veil { position: absolute; inset: 0; background: rgba(15, 26, 23, 0.5); backdrop-filter: blur(2px); }
.guide-card { position: relative; width: min(1000px, calc(100vw - 32px)); padding: 12px 14px 10px; border-radius: var(--r); animation: rise 380ms var(--ease-slide) both; }
.guide-head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 10px; }
.guide-head b { font: 650 17px/1.1 var(--display); letter-spacing: -0.02em; }
.guide-head .muted { font-size: 12.5px; flex: 1; }
.guide video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #edf1ef; display: block; }
.guide-foot { font-size: 12px; margin: 8px 2px 0; }
.tour-menu .tm-video { color: var(--invest-ink); font-weight: 650; }
@media (max-width: 600px) { .guide-head .muted { display: none; } .guide-head b { flex: 1; } }

/* v1.6.3: the guide up front ----------------------------------------------------------- */
.guide-hello { font: 650 clamp(18px, 2.4vw, 24px)/1.15 var(--display); letter-spacing: -0.02em; padding: 4px 2px 8px; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guide-foot .row { display: flex; gap: 8px; margin-left: auto; }
.guide-card-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 8px 10px 8px 8px;
  border: 1px solid color-mix(in oklab, var(--invest-ink) 22%, transparent); border-radius: 14px; cursor: pointer; text-align: left;
  background: color-mix(in oklab, var(--invest-ink) 6%, #fff); color: inherit; font: inherit; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.guide-card-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(60, 40, 120, 0.12); }
.guide-card-cta:focus-visible { outline: 2px solid var(--invest-ink); outline-offset: 2px; }
.gc-thumb { position: relative; flex: none; width: 92px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #e8ecea; }
.gc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; background: rgba(40, 26, 90, 0.35); }
.gc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-text b { font-size: 13.5px; color: var(--invest-ink); }
.gc-text span { font-size: 12px; color: var(--muted, #5b6b66); }
#tour-btn.guide-btn .label { color: var(--invest-ink); font-weight: 650; }

.an-path { display: block; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(194, 122, 6, 0.09);
  color: var(--trade-ink); text-decoration: none; font-size: 13.5px; }
.an-path:hover { background: rgba(194, 122, 6, 0.15); }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .tbl th:last-child, .tbl td:last-child { display: none; } }

/* Ask: the question-first opening of Pulse */
.ask { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ask .lede { margin-bottom: 10px; }
.ask-for { margin: 4px 0 12px; }
.qcards { display: grid; gap: 8px; }
.qcard { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--qc) 10%, #fff) 0 4px, rgba(255,255,255,.72) 4px);
  cursor: pointer; transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s; }
.qcard:hover, .qcard:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--qc) 45%, transparent);
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--qc) 60%, transparent); }
.qcard .qq { font-weight: 650; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.qcard .qn { font-size: 12.5px; color: var(--ink-3); }
.qcard .qn b { color: var(--qc); font-size: 14px; font-variant-numeric: tabular-nums; }
.ask-all { margin-top: 10px; font-size: 13px; }
.headline.sub { font-size: 21px; margin-top: 4px; }
.answer-lede { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 6px 0 12px; }
.big-tile .v { color: var(--qc); font-size: 34px; }
.abars { display: grid; gap: 6px; margin: 12px 0 4px; }
.abar { display: grid; grid-template-columns: minmax(7rem, 42%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; }
.abar i { display: block; height: 9px; border-radius: 5px; width: var(--w); background: var(--qc); opacity: .85; }
@media (prefers-reduced-motion: reduce) { .qcard { transition: none; } }

/* Skip link: the first Tab stop, visible only when focused. */
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink);
  color: #fff; font-weight: 650; text-decoration: none; transition: top 160ms var(--ease); }
.skip:focus { top: 16px; }
.brand { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.brand:hover { transform: translateY(-1px); box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* v1.7: phones get a scrolling page instead of a fixed shell: the header, the map at about half the
   screen, then the questions and the summary in the page's own flow. Overlays (inspector, sheets,
   guide, tour) stay fixed. Desktop keeps the shell; the extra tools sit in the bar as before. */
.lens-more { display: contents; }
.more-btn { display: none; }
@media (max-width: 860px) {
  html, body { height: auto; }
  body { overflow-x: hidden; overflow-y: auto; }
  .topbar { position: relative; top: auto; left: auto; right: auto; padding: calc(10px + env(safe-area-inset-top, 0px)) 8px 0; }
  .lenses { overflow: visible; -webkit-mask-image: none; mask-image: none; position: relative; }
  .more-btn { display: inline-flex; margin-left: auto; }
  .more-btn::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease); }
  .more-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
  .lenses .sep { display: none; }
  .lens-more { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(260px, calc(100vw - 16px));
    padding: 6px; border-radius: 16px; background: var(--glass-2, #fff); border: 1px solid var(--edge); box-shadow: var(--shadow);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); flex-direction: column; gap: 2px; }
  .lenses.open .lens-more { display: flex; animation: rise 200ms var(--ease) both; }
  .lens-more .lens { width: 100%; justify-content: flex-start; min-height: 44px; }
  #globe { position: relative; inset: auto; height: 54vh; flex: none; margin-top: 8px; }
  /* The map comes first in the source (it is the backdrop on desktop); on a phone the header leads. */
  body { display: flex; flex-direction: column; min-height: 100vh; }
  /* Questions first, then the map: the first phone screen is the question, never a loading map. */
  .topbar { order: -3; }
  .pulse { order: -2; }
  #globe { order: -1; }
  /* Map controls: one row over the top right of the map, taking no space in the flow (44 px tall). */
  .mapctl, body:not(.inspecting) .mapctl, body:not(.mode-cases) .mapctl { position: relative; top: auto; right: auto; order: -1;
    align-self: flex-end; grid-auto-flow: column; margin: 0 12px -44px 0; transform: translateY(calc(-54vh + 4px)); }
  .pulse { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto;
    margin: 8px 8px 0; transform: none !important; }
  .pulse-head #fold { display: none; }
  .pulse.folded .pulse-body, .pulse.folded .pulse-head h2 { visibility: visible; }
  .pulse-body { overflow: visible; }
  .trivia { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: 0 8px 16px; }
}

/* Page changes (Impeccable: 300-500 ms for a view change, exit faster than entrance, natural ease-out).
   The old page lets go with a short blur, the new one settles up into place; the logotype stays put. */
.brand { view-transition-name: brand; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-out; }
::view-transition-new(root) { animation: 380ms cubic-bezier(0.16, 1, 0.3, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Main nav hover: the white pill of the active tab, lifted; Investigate lifts and deepens. */
.mode:hover:not([aria-pressed="true"]), .lens:not(.tool):hover { background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 3px rgba(15, 26, 23, 0.12); }
.mode, .lens { transition: background 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.lens.tool:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--invest) 35%, transparent); }
.mode[aria-pressed="true"]:hover { box-shadow: 0 2px 8px rgba(15, 26, 23, 0.14); }

/* Small text buttons get a 24 px target; the search input marks its own focus as well as the ring on its box. */
.sec button, .linkish, .ask-all { min-height: 24px; }
.omni input:focus-visible { box-shadow: inset 0 -2px 0 var(--place); }

/* While the map loads, the splash already shows the globe it will become: a soft sphere where the Atlas draws it
   (centred in the space the panels leave), so the first frame is the subject, not an empty page with a spinner. */
.boot { background:
  radial-gradient(circle min(27vmin, 300px) at 63% 47%, #c8dbe6 0, #b4cddc 70%, #a9c6d8 97%, rgba(169, 198, 216, 0) 100%),
  var(--ground); }
.boot svg { width: 40px; height: 40px; position: absolute; left: 63%; top: 47%; margin: -20px 0 0 -20px; }
@media (max-width: 860px) { .boot { background: var(--ground); } .boot svg { left: 50%; top: 70%; } }
#globe { background: radial-gradient(circle min(27vmin, 300px) at 63% 47%, #c8dbe6 0, #b4cddc 70%, #a9c6d8 97%, rgba(169, 198, 216, 0) 100%); }
@media (max-width: 860px) { #globe { background: radial-gradient(circle min(36vw, 170px) at 50% 50%, #c8dbe6 0, #b4cddc 70%, #a9c6d8 97%, rgba(169, 198, 216, 0) 100%); } }
.mode[aria-pressed="true"]:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 26, 23, 0.16); }

/* The story is the way in for a first-time reader: a quiet card under the questions. */
.story-cta { display: block; margin-top: 12px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: linear-gradient(120deg, rgba(214, 69, 61, 0.08), rgba(33, 138, 91, 0.08)); border: 1px solid var(--line);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.story-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -12px rgba(15, 26, 23, 0.35); }
.story-cta b { display: block; font: 650 14px/1.3 var(--display); }
.story-cta span { font-size: 12.5px; color: var(--ink-3); }