/* V5 Explore console. Light warm panels and dark ink around real terrain (FireTrace's craft and density, not its
   layout or palette); one warm colour for forest loss. No glow, no blur, no gradients, no all-caps.
   Independent concept study by Mason Capalongo. Not affiliated with or endorsed by Colossal Biosciences. */
:root { --ex-panel: #f6f6f4; --ex-line: #d4d4d0; --ex-ink: #1c1b18; --ex-ink2: #383835; --ex-muted: #5a5a55; --ex-loss: #ffb24a; --ex-loss-ink: #8a4b00; --ex-bg: #e4e4e1; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ex-bg); color: var(--ex-ink); font: 14px/1.4 var(--v1-sans); display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ex-muted); }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--ex-ink); outline-offset: 2px; }

.ex-top { flex: none; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; background: var(--ex-panel); border-bottom: 1px solid var(--ex-line); white-space: nowrap; }
.ex-top h1 { font: 600 16px/1 var(--v1-sans); margin: 0; }
.ex-home { color: var(--ex-ink); font-weight: 600; text-decoration: none; }
.ex-home::before { content: ''; display: inline-block; width: 7px; height: 7px; border-left: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-right: 7px; vertical-align: 2px; }
.sep { width: 1px; height: 22px; background: var(--ex-line); }
.ex-regionbox { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
#ex-region { font-weight: 400; font-size: 14px; line-height: 1.2; overflow: hidden; min-width: 0; white-space: normal; max-width: 440px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#ex-region b { font-weight: 600; }
.grow { flex: 1; }
.ex-disc { margin: 0 0 0 6px; font-size: 13px; color: var(--ex-muted); white-space: normal; max-width: 330px; line-height: 1.25; }
.ex-btn { background: #fafaf9; border: 1px solid var(--ex-line); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
.ex-btn:hover { border-color: #a79f8f; }
.ex-btn.tg[aria-expanded=true] { background: var(--ex-ink); color: #fafaf9; border-color: var(--ex-ink); }
body:not(.in-terrain) .tg, body:not(.in-terrain) #ex-back, body:not(.in-terrain) .ex-range { display: none; }
@media (max-width: 1700px) { .ex-range { display: none; } }
body:not(.in-terrain) .t-only { display: none !important; }

.ex-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ex-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#ex-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.ex-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--ex-bg); touch-action: none; cursor: grab; }
.ex-globe.fade { opacity: 0; pointer-events: none; }
.ex-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ex-overlay .border { fill: none; stroke: #2b2925; stroke-width: 1.5; stroke-dasharray: 6 4; }
.ex-overlay .path { fill: none; stroke: #1c1b18; stroke-width: 2.5; }
.ex-overlay .pathpt { fill: #fafaf9; stroke: #1c1b18; stroke-width: 2; }
.ex-labels { position: absolute; inset: 0; pointer-events: none; }
.ex-lab { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; color: #fafaf9; font-size: 13px; line-height: 1.2; text-shadow: 0 0 4px rgba(20, 18, 14, .75), 0 1px 2px rgba(20, 18, 14, .6); white-space: nowrap; margin: -8px 0 0 -6px; }
.ex-lab .tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #fafaf9; filter: drop-shadow(0 0 1.5px rgba(20, 18, 14, .8)); }
.ex-lab .el { grid-column: 2; opacity: .92; font-variant-numeric: tabular-nums; }
.ex-lab-river .nm, .ex-lab-lake .nm { font-style: italic; }
.ex-lab-river .tri, .ex-lab-lake .tri { display: none; }

.ex-marksg { position: absolute; inset: 0; pointer-events: none; }
body.in-terrain .ex-marksg, body.in-terrain .ex-list { display: none; }
.ex-mark { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fafaf9; background: var(--ex-loss); box-shadow: 0 0 0 1px #1c1b18; pointer-events: auto; cursor: pointer; padding: 0; }
.ex-mark:hover, .ex-mark:focus-visible { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ex-list { position: absolute; left: 16px; top: 16px; bottom: 16px; width: 320px; overflow: auto; background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: 8px; padding: 14px 14px 8px; }
.ex-list h2 { font: 600 16px/1.2 var(--v1-sans); margin: 0 0 4px; }
.ex-list .losss { border-left: 3px solid var(--ex-loss); padding-left: 8px; color: var(--ex-ink2); }
.ex-list .sub { margin: 0 0 10px; font-size: 13px; color: var(--ex-muted); }
.ex-list ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.ex-list li { counter-increment: r; }
.ex-list button { display: grid; grid-template-columns: 26px 1fr; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--ex-line); padding: 7px 2px; cursor: pointer; }
.ex-list button::before { content: counter(r); grid-row: span 2; color: var(--ex-muted); font-variant-numeric: tabular-nums; }
.ex-list button:hover { background: #e8e8e5; }
.ex-list .nm { font-weight: 600; }
.ex-list .v { font-size: 13px; color: var(--ex-ink2); }
.ex-status { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); margin: 0; background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: 6px; padding: 6px 12px; font-size: 13px; }
.ex-status:empty { display: none; }

.ex-tools { position: absolute; left: 16px; top: 16px; }
.ex-compass { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ex-line); background: var(--ex-panel); padding: 4px; cursor: pointer; }
.ex-compass svg { width: 100%; height: 100%; display: block; }
.ex-compass circle { fill: none; stroke: var(--ex-line); }
.ex-compass path { fill: var(--ex-ink); }
.ex-compass text { font: 700 12px var(--v1-sans); fill: var(--ex-ink); }
.ex-notes { position: absolute; left: 16px; bottom: 12px; max-width: min(660px, calc(100% - 420px)); display: flex; flex-direction: column; gap: 1px; align-items: flex-start; background: rgba(246, 246, 244, .92); border: 1px solid var(--ex-line); border-radius: 6px; padding: 5px 9px; }
.ex-notes p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ex-ink2); }
.ex-notes p#ex-coarsesent { font-weight: 600; color: var(--ex-ink); }
.ex-ctrl { position: absolute; right: 16px; bottom: 12px; display: flex; gap: 10px; align-items: flex-end; }
.ex-scale { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-right: 6px; font-size: 13px; color: #fafaf9; text-shadow: 0 0 3px rgba(0, 0, 0, .9); }
#ex-scalebar { display: block; height: 7px; border: 2px solid #fafaf9; border-top: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.seg { display: flex; border: 1px solid #2b2925; border-radius: 6px; overflow: hidden; background: #2b2925; }
.seg button { border: 0; background: #3a3833; color: #ededeb; min-width: 36px; height: 32px; padding: 0 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid #22211d; }
.seg button[aria-pressed=true] { background: var(--ex-loss); color: #1c1b18; font-weight: 600; }

.ex-side { position: absolute; right: 16px; top: 16px; bottom: 60px; width: 360px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; overflow-y: auto; }
.ex-side { width: 400px; }
.ex-panel { pointer-events: auto; flex: 0 0 auto; min-height: 0; overflow: visible; background: var(--ex-panel); border: 1px solid var(--ex-line); border-radius: 8px; padding: 12px 14px; }
.ex-panel h2 { font: 600 15px/1.2 var(--v1-sans); margin: 0 0 8px; }
.layers { list-style: none; margin: 0; padding: 0; }
.layers li { display: grid; grid-template-columns: 1fr 92px 40px; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--ex-line); }
.layers .chk { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.layers input[type=checkbox] { width: 16px; height: 16px; accent-color: #1c1b18; margin: 0; flex: none; }
.layers .thumb { width: 36px; height: 24px; border-radius: 3px; border: 1px solid var(--ex-line); flex: none; }
.layers .ln { display: flex; flex-direction: column; min-width: 0; }
.layers .nm { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layers .src { font-size: 13px; color: var(--ex-muted); white-space: normal; line-height: 1.25; }
.layers input[type=range] { width: 100%; accent-color: #1c1b18; }
.layers output { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ex-ink2); }
table.ov { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ov th, table.ov td { text-align: left; padding: 4px 4px 4px 0; border-top: 1px solid var(--ex-line); vertical-align: top; }
table.ov thead th { border-top: 0; color: var(--ex-muted); font-weight: 600; }
table.ov tbody th { font-weight: 400; color: var(--ex-ink2); }
.ex-panel .note { font-size: 13px; color: var(--ex-muted); margin: 8px 0 0; }

.ex-time { flex: none; background: var(--ex-panel); border-top: 1px solid var(--ex-line); padding: 8px 16px 6px; }
.ex-tl { display: flex; align-items: center; gap: 8px; }
.ex-ic { width: 34px; height: 32px; border: 1px solid var(--ex-line); background: #fafaf9; border-radius: 6px; cursor: pointer; font-size: 14px; display: grid; place-items: center; padding: 0; }
.ex-ic.play { background: var(--ex-ink); border-color: var(--ex-ink); }
.ex-ic.play svg { width: 16px; height: 16px; fill: #fafaf9; }
.ex-ic.play .pa, .ex-ic.play.on .pl { display: none; }
.ex-ic.play.on .pa { display: inline; }
.ex-yearlab { font: 600 20px/1 var(--v1-sans); font-variant-numeric: tabular-nums; width: 52px; text-align: center; }
.ex-slider { position: relative; flex: 1; padding: 0 0 16px; }
.ex-slider input { width: 100%; accent-color: #1c1b18; margin: 0; }
.ex-ticks { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 13px; color: var(--ex-muted); pointer-events: none; padding: 0 2px; }
.ex-tlmarks { position: absolute; left: 8px; right: 8px; top: -9px; height: 0; pointer-events: none; }
.tlm { position: absolute; transform: translateX(-50%); font-size: 13px; line-height: 1; background: var(--ex-loss); color: #1c1b18; border-radius: 3px; padding: 1px 4px; font-weight: 600; }
.ex-yearnote { font-size: 13px; width: 160px; }
.ex-losssent { margin: 4px 0 0; font-size: 13px; color: var(--ex-ink2); }
.ex-losssent::before { content: ''; display: inline-block; width: 11px; height: 11px; background: var(--ex-loss); border: 1px solid #8a4b00; margin-right: 7px; vertical-align: -1px; }
.ex-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 0.9fr); gap: 18px; padding: 8px 0 4px; border-top: 1px solid var(--ex-line); margin-top: 6px; }
.ch h3 { font: 600 13px/1.3 var(--v1-sans); margin: 0 0 2px; }
.ch h3 span { font-weight: 400; color: var(--ex-muted); }
.chart { display: block; max-width: 100%; }
.chart .grid { stroke: #dadad6; }
.chart .ax { font: 13px var(--v1-sans); fill: var(--ex-muted); }
.chart rect.past { fill: #d9a35a; }
.chart rect.now { fill: var(--ex-loss); stroke: #8a4b00; }
.chart rect.fut { fill: #d5d5d1; }
.chart .cumall { fill: none; stroke: #c8c8c3; stroke-width: 2; stroke-dasharray: 3 3; }
.chart .cumnow { fill: none; stroke: #b86a14; stroke-width: 2.5; }
.chart .dot { fill: var(--ex-loss); stroke: #8a4b00; stroke-width: 1.5; }
.chart .profa { fill: #d8dccd; }
.chart .profl { fill: none; stroke: #4c5a3c; stroke-width: 2; }
.ch .empty { font-size: 13px; color: var(--ex-muted); margin: 10px 0; }
.ch-ev h2 { font: 600 13px/1.3 var(--v1-sans); margin: 0 0 4px; }
.ev { list-style: none; margin: 0 0 8px; padding: 0; }
.ev button { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px; width: 100%; background: none; border: 0; border-top: 1px solid var(--ex-line); padding: 3px 0; text-align: left; cursor: pointer; font-size: 13px; }
.ev button:hover { background: #e8e8e5; }
.ev .rk { font-weight: 600; }
.ev .v { color: var(--ex-ink2); }

.ex-credits { flex: none; padding: 4px 16px 6px; font-size: 13px; color: var(--ex-muted); background: var(--ex-bg); display: flex; flex-wrap: wrap; gap: 2px 18px; }
.ex-credits p { margin: 0; }
.ex-credits .sw { display: inline-block; width: 10px; height: 10px; background: var(--ex-loss); margin-right: 6px; }

@media (max-width: 1400px) {
  .ex-top { flex-wrap: wrap; height: auto; padding: 6px 16px; row-gap: 4px; }
  .ex-disc { order: 9; flex-basis: 100%; max-width: none; margin: 0; }
  #ex-region { min-width: 140px; }
  .ex-range { display: none; }
}
@media (max-width: 960px) {
  body { overflow: auto; height: auto; }
  .ex-main { flex: none; }
  .ex-stage { flex: none; height: 64vh; min-height: 300px; }
  body.in-terrain .ex-stage { height: 42vh; min-height: 280px; }
  .ex-notes p { white-space: normal; max-width: calc(100vw - 32px); }
  .ex-ticks span:nth-child(2), .ex-ticks span:nth-child(4), .ex-ticks span:nth-child(5) { visibility: hidden; }
  #ex-coords { display: none; }
  .ex-top { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; white-space: normal; }
  .ex-disc { max-width: none; width: 100%; margin: 0; order: 9; }
  .ex-range, .sep { display: none; }
  .ex-list { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 42%; }
  .ex-side { left: 8px; right: 8px; width: auto; bottom: 96px; }
  .ex-charts { grid-template-columns: 1fr; }
  .ex-yearnote { display: none; }

  .ex-notes { bottom: 56px; max-width: calc(100% - 24px); left: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ex-globe { transition: none; } }
.ex-lossrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; }
.ex-losskey { margin: 4px 0 0; font-size: 13px; color: var(--ex-ink2); }
.ex-losskey .sw { display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 10px; vertical-align: -1px; border: 1px solid #8a4b00; }
.ex-losskey .sw.now { background: #f6dfb8; border: 2px solid #f0a800; margin-left: 0; }
.ex-losskey .sw.old { background: radial-gradient(circle at 50% 55%, #5a4630 0 1.5px, transparent 2px), #c9b896; border-color: #8a7a5a; }
body.coarse .ex-losskey .sw.now { background: #ffc65c; border-color: #8a4b00; }
body.coarse .ex-losskey .sw.old { background: #c08a5c; }

/* V6: worldwide total, list grouped by continent, map notes */
.ex-list .world { border-bottom: 1px solid var(--ex-line); margin: 0 0 10px; padding: 0 0 8px; }
.ex-list .world .wl { margin: 0; font-size: 13px; color: var(--ex-ink2); }
.ex-list .world .wv { margin: 2px 0 4px; font: 600 22px/1.15 var(--v1-sans); font-variant-numeric: lining-nums proportional-nums; }
.ex-list h3 { font: 600 13px/1.2 var(--v1-sans); color: var(--ex-ink2); margin: 12px 0 2px; }
.ex-list .gp { margin-top: 10px; }
.ex-list ol { counter-reset: none; }
.ex-list button { grid-template-columns: 1fr; }
.ex-list button::before { content: none; }
.ex-mark { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #fafaf9; border: 2px solid #1c1b18; box-shadow: none; }
.ex-mark:hover, .ex-mark:focus-visible { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.drvkey { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 13px; color: var(--ex-ink2); }
.drvkey .sw, .ov .drv .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, .35); }
.drvbox { border-top: 1px solid var(--ex-line); margin-top: 6px; padding-top: 6px; }
.drvbox .small { margin: 0; font-size: 13px; color: var(--ex-ink2); }
.ov .drv { display: inline-block; margin-right: 8px; white-space: nowrap; }
.ex-list .drvsw { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 6px; }

/* V6: notes under the map on narrow screens */
.ex-phonenotes { display: none; }
@media (max-width: 960px) { body.in-terrain .ex-phonenotes { display: block; padding: 6px 0 0; } .ex-notes.flow { position: static; max-width: none; border-radius: 6px; } }

/* V6: the ground photo line on the globe, always in view with it */
.ex-gphoto { position: absolute; right: 16px; bottom: 10px; margin: 0; font-size: 13px; color: var(--ex-ink2); background: rgba(246, 246, 244, .9); padding: 2px 8px; border-radius: 4px; z-index: 4; pointer-events: none; }
body.in-terrain .ex-gphoto { display: none; }
.ex-list .losss p { margin: 0 0 4px; }
@media (max-width: 960px) { .ex-gphoto { top: 8px; bottom: auto; right: 8px; } }

.ex-tlmarks .tlm.up { transform: translate(-50%, -16px); z-index: 2; }
@media (max-width: 960px) { .ex-side { max-height: 46%; } }

/* brief 6: lower-detail view. The nearest full-detail area is a button that flies there; "Build full detail here"
   appears only when the page was opened from the local helper, with the outline of the box it would build */
.ex-notes .ex-near { font: inherit; font-weight: 400; color: var(--ex-ink); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.ex-notes .ex-near:hover { color: #000; text-decoration-thickness: 2px; }
.ex-notes .ex-near:focus-visible { outline: 2px solid #1c1b18; outline-offset: 2px; border-radius: 2px; }
.ex-notes p#ex-build { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 3px; }
.ex-notes #ex-build .ex-btn { font-size: 13px; padding: 3px 9px; }
.ex-notes #ex-build .ex-btn:disabled { opacity: .5; cursor: default; }
.ex-overlay .buildbox { fill: rgba(255, 255, 255, .22); stroke: #1c1b18; stroke-width: 2; paint-order: stroke; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }

/* brief 6: on phones the globe's list of areas flows under the globe in the page (one scroll, no box inside it) */
@media (max-width: 960px) {
  body:not(.in-terrain) .ex-stage { height: auto; min-height: 0; overflow: visible; }
  body:not(.in-terrain) .ex-globe { position: relative; height: 64vh; min-height: 300px; }
  body:not(.in-terrain) #ex-canvas, body:not(.in-terrain) .ex-marksg, body:not(.in-terrain) .ex-overlay, body:not(.in-terrain) .ex-labels { bottom: auto; height: 64vh; min-height: 300px; }
  body:not(.in-terrain) .ex-list { position: static; max-height: none; overflow: visible; width: auto; margin: 8px; }
}

/* brief 6 (critic): lower-detail key. This year's cells: amber fill by share, amber outline from 1%; earlier loss: slate
   violet by share, shown as a three-step ramp */
body.coarse .ex-losskey .sw.now { background: #ffc65c; border: 2px solid #f5b400; }
.ex-losskey .sw.old.ramp { width: 30px; border-color: #6b6488; }
/* brief 6 (critic): the point clicked, and the full-detail areas inside a lower-detail view */
.ex-lab-here .tri { width: 10px; height: 10px; border: 2px solid #fafaf9; border-radius: 50%; background: rgba(28, 27, 24, .55); box-sizing: border-box; }
.ex-overlay .fdbox { fill: none; stroke: #fafaf9; stroke-width: 1.5; filter: drop-shadow(0 0 1.5px rgba(20, 18, 14, .9)); }
.ex-fdmarks { position: absolute; inset: 0; pointer-events: none; }
.ex-fd { position: absolute; left: 0; top: 0; pointer-events: auto; font: 13px/1.2 var(--v1-sans); color: #fafaf9; background: rgba(28, 27, 24, .86); border: 1px solid rgba(250, 250, 249, .6); border-radius: 4px; padding: 2px 7px; cursor: pointer; white-space: nowrap; }
.ex-fd:hover { background: #1c1b18; }
.ex-fd:focus-visible { outline: 2px solid #fafaf9; outline-offset: 2px; }
body:not(.in-terrain) .ex-fdmarks, body:not(.coarse) .ex-fdmarks { display: none; }
.ex-side::-webkit-scrollbar { width: 8px; }
.ex-side::-webkit-scrollbar-thumb { background: rgba(56, 56, 53, .45); border-radius: 4px; }

/* Release run (2026-10-25): the tool's name in the header */
.ex-brand { font-weight: 700; }
.ex-sub { color: var(--ex-ink); }
@media (min-width: 1401px) { .ex-disc { max-width: 600px; } }

/* Polish run (2026-10-26): the Built by line in the footer */
.ex-credits .built { flex-basis: 100%; }
.ex-credits .built a { color: inherit; }
/* on phones the stage lets the list of areas flow below the globe, so the marker and label layers clip to the map
   themselves (three markers past the right edge made the page scroll sideways by 31 px at 390 px) */
@media (max-width: 960px) { body:not(.in-terrain) .ex-marksg, body:not(.in-terrain) .ex-labels { overflow: hidden; } }