/* WildTrace, 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; }
.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); }
.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; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; 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; }