/* 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; } }