/* V4 additions over the V1 base. Independent concept study by Mason Capalongo. Not affiliated with or endorsed by Colossal Biosciences. */
.zoomctl { position: absolute; display: flex; flex-direction: column; gap: 1px; z-index: 4; }
.zoomctl button { width: 32px; height: 32px; font: 500 18px/1 var(--v1-sans, system-ui); color: var(--v1-ink, #eef3ee); background: rgba(16, 20, 22, 0.86); border: 1px solid rgba(238, 243, 238, 0.22); cursor: pointer; }
.zoomctl button:disabled { opacity: 0.4; cursor: default; }
.zoomctl button:focus-visible { outline: 2px solid var(--v1-focus, #ffe9a6); outline-offset: 2px; }

/* ---- V4 calm opening: page links live in the footer; no group names at rest; forest loss starts closed ---- */
.top nav a { display: none; }
#gl-none { display: none; }
.lossbox .lossopen { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; font: 500 15px/1 var(--v1-sans, system-ui); color: var(--v1-ink, #eef3ee); background: rgba(16, 20, 22, 0.86); border: 1px solid rgba(238, 243, 238, 0.28); cursor: pointer; }
.lossbox .lossopen:hover { border-color: rgba(238, 243, 238, 0.6); }
.lossbox .lossopen:focus-visible { outline: 2px solid var(--v1-focus, #ffe9a6); outline-offset: 2px; }
.lo-swatch { width: 12px; height: 12px; background: var(--v4-loss, #ffb24a); }
.lossbox:not(.open) .tl-row, .lossbox:not(.open) .tl-sentence, .lossbox:not(.open) .tl-credit { display: none; }
.lossbox.open .lossopen { display: none; }
.tl-readout, .tl-ticks { display: none !important; }

/* ---- V4 chosen state: the answer reads as a console (V3's panels), short and in sentence case ---- */
.lc-seq { display: none !important; }
html:not(.v5-glabels) .lc-glabels { display: none !important; }
.lc-sure-title { text-transform: none !important; letter-spacing: 0 !important; }
.v4-sure { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(238, 243, 238, 0.16); max-width: 46em; }
.v4-sure-title { font: 600 17px/1.3 var(--v1-sans, system-ui); margin: 0 0 8px; color: var(--v1-ink, #eef3ee); }
.v4-note { margin: 0 0 6px; font: 400 15px/1.45 var(--v1-sans, system-ui); color: var(--v1-ink-2, #c9d4ce); }
.v4-full { margin-top: 4px; padding: 0; background: none; border: 0; color: var(--v1-ink, #eef3ee); font: 500 14px/1.4 var(--v1-sans, system-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v4-full:focus-visible { outline: 2px solid var(--v1-focus, #ffe9a6); outline-offset: 2px; }
.v4-full-box { margin-top: 12px; }
.v4-full-box .lc-sure-title { display: none; }
.lc-ans-mark > *:not(.lc-large) { display: none !important; }
.lc-foot a { display: none; }
.lc-clear { font-size: 0 !important; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.lc-clear::after { content: '\00d7'; font-size: 22px; line-height: 1; }
.v4-sure-title .v4-full { font: inherit; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.v4-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left: 2px; }
.v4-full[aria-expanded="true"] .v4-chev { transform: rotate(45deg); }
.defline { display: none; }
.v4-full-box .defline { display: block; }
/* phone: the opening fills the screen, so the credits start below it */
html.stacked .app { min-height: 100svh; }

/* ---- V4 console type (V3's: serif statements, sans details) ---- */
.lc-ruled { font-family: 'V4 Fraunces', Georgia, serif !important; font-weight: 380 !important; font-size: 28px !important; line-height: 1.22 !important; letter-spacing: -0.005em; }
.v4-sure-title { font-family: 'V4 Fraunces', Georgia, serif; font-weight: 500; font-size: 19px; }
.lc-country, .lc-classfam { font-size: 15px; }
.lc-country-note, .lc-foot { font-size: 13.5px !important; }
.lossbox { background: transparent; }
:root { --v4-loss: #ffb24a; }
.tl-bars rect.past { fill: #7d6243; }
.tl-bars rect.now { fill: var(--v4-loss); }
.tl-bars rect.future, .tl-bars rect { fill: #26343a; }
.tl-bars rect.past { fill: #7d6243; }
.tl-bars rect.now { fill: var(--v4-loss); }

/* ---- V4 light theme: V1's hard-coded dark surfaces mapped to the paper palette (no gradient behind the globe) ---- */
body { background: var(--v1-bg) !important; }
.app { background: var(--v1-bg) !important; }
.top { background: var(--v1-bg) !important; border-bottom: 1px solid var(--v1-rule) !important; }
.credits { background: var(--v1-bg-2) !important; }
.keybtn, .keypanel, .tip, .glabel, .lossnote, .nogl { background: var(--v1-panel) !important; color: var(--v1-ink) !important; border-color: var(--v1-rule-2) !important; }
.zoomctl button, .lossbox .lossopen, .tl-btn { background: var(--v1-panel) !important; color: var(--v1-ink) !important; border: 1px solid var(--v1-rule-2) !important; }
.tl-bars rect, .tl-bars rect.future { fill: #d9d1c1; }
.tl-bars rect.past { fill: #c8935a; }
.tl-bars rect.now { fill: #e08a1e; }
.v4-sure { border-top-color: var(--v1-rule) !important; }
.lc-results, .lc-opt { background: var(--lc-surface); }
html.stacked .top nav a, .top nav a { display: none !important; }
html.v4-chosen .keybtn > span:last-child { display: none; }
/* the opening sentence sets on two lines ("If ___" / "is found:") at desktop widths */
html:not(.stacked) .lookup:not(.answered) .lc-if, html:not(.stacked) .lookup:not(.answered) .lc-input, html:not(.stacked) .lookup:not(.answered) .lc-ghost, html:not(.stacked) .lookup:not(.answered) .lc-mirror { font-size: clamp(34px, 3.35vw, 64px); }
/* chosen state: like the Key, the Forest loss button shows its swatch only (spoken label and title stay), so the
   longest answer fits the 100-word ceiling Mason set on 2026-10-23 */
html.v4-chosen .lossbox .lossopen > span:last-child { display: none; }
html.v4-chosen .lossbox .lossopen { padding: 0 12px; }

/* V5: one icon link to Explore (forest loss and terrain in 3D, no species), under the zoom buttons; no visible words */
.zoomctl .xlink { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 8px; background: var(--v1-panel); border: 1px solid var(--v1-rule-2); color: var(--v1-ink); }
.zoomctl .xlink svg { width: 20px; height: 20px; fill: currentColor; }
.zoomctl .xlink:focus-visible { outline: 2px solid var(--v1-focus); outline-offset: 2px; }
.zoomctl[style*='row'] .xlink { margin: 0 0 0 8px; }

/* V5: tilted 3D country (country3d.js) in the porthole, labelled gene mark and detached-part insets on the left */
.v5-c3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.v5-c3d.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v5-c3d { transition: none; } }
.zoomctl .v5-turn { width: 32px; height: 32px; margin-top: 1px; background: var(--v1-panel); border: 1px solid var(--v1-rule-2); color: var(--v1-ink); font: 500 17px/1 var(--v1-sans); cursor: pointer; }
.zoomctl .v5-turn:first-of-type { margin-top: 8px; }
.v5-exag { flex-basis: 100%; margin: 0; font: 400 13px/1.3 var(--v1-sans); color: var(--v1-ink-2); }
.v5-genes { position: relative; width: 300px; }
.v5-genes .v5-gl { position: absolute; margin: 0; left: 34px; white-space: nowrap; font: 400 14px/18px var(--v1-sans); color: var(--v1-ink); }
.v5-left { margin-top: 18px; display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; max-width: 600px; }
.v5-genes svg { display: block; }
.v5-genes .gl { font: 400 14px/1.2 var(--v1-sans); color: var(--v1-ink); }
.v5-genes .gap { height: 4px; grid-column: span 2; }
.v5-parts { position: relative; min-width: 0; }
.v5-parts-h { margin: 0 0 6px; font: 600 14px/1.2 var(--v1-sans); color: var(--v1-ink); }
.v5-insets { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.v5-insetcv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.v5-inset { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.v5-ibox { width: 132px; height: 104px; border: 1px solid var(--v1-rule-2); background: #0a1230; }
.v5-inset figcaption { font: 400 13px/1.25 var(--v1-sans); color: var(--v1-ink); max-width: 132px; }
.v5-small { margin: 6px 0 0; font: 400 13px/1.3 var(--v1-sans); color: var(--v1-muted); }
html.stacked .v5-ibox { width: 104px; height: 82px; }
html.v5-3d:not(.v5-lossview) #cv-hl { visibility: hidden; }
html.v5-lossview .v5-c3d { opacity: 0 !important; }
html.stacked .v5-left { order: 10; padding: 0 16px; margin-top: 12px; }
html.v5-lossview #v5-exag, html.v5-lossview .zoomctl .v5-turn { display: none !important; }

/* V6: the ground photo line, wherever the Blue Marble photo is on screen (globe and 3D country view) */
.groundphoto { position: absolute; right: 16px; top: 8px; margin: 0; font-size: 13px; color: var(--v1-ink-2, #4a463e); background: rgba(237, 237, 235, .85); padding: 1px 6px; border-radius: 3px; pointer-events: none; z-index: 6; }
html.stacked .groundphoto { right: 12px; bottom: 2px; }
/* V6 phone row under the globe: zoom and turn buttons, then the ground photo line */
.phonebar { display: none; }
html.stacked .phonebar { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; margin: 6px 16px 0; }
html.stacked .phonebar .zoomctl { position: static; order: 1; }
html.stacked .phonebar .groundphoto2 { order: 2; flex-basis: 100%; text-align: right; margin: 0; font-size: 13px; color: var(--v1-ink-2); }
html.stacked #groundphoto { display: none; }

/* V6 (critic 1): tree cover loss is offered only with no species chosen */
html.v4-chosen .lossbox { display: none !important; }
/* the relief label with the 3D country view reads as body text, not a footnote */
.v5-exag { font: 400 15px/1.4 var(--v1-sans) !important; color: var(--v1-ink) !important; max-width: 520px; }

.v6-kinds { position: relative; z-index: 2; margin: 18px 0 0; font: 400 15px/1.35 var(--v1-sans); color: var(--v1-ink-2); max-width: 520px; }
.v6-kinds-h { margin: 0 0 6px; font-weight: 600; color: var(--v1-ink); }
.v6-kinds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.v6-kinds li { display: flex; align-items: center; gap: 8px; }
.v6-kinds b { font-weight: 600; color: var(--v1-ink); font-variant-numeric: tabular-nums; }
.v6-kinds .v6-kmark { width: 14px; height: 14px; flex: none; }
html.v4-chosen .v6-kinds, .lookup.answered .v6-kinds { display: none; }
html.stacked .v6-kinds { margin: 10px 0 0; font-size: 14px; }
html.stacked .v6-kinds ul { gap: 4px 12px; }

/* V6 (critic 1): the clear button stays on the sentence's line on phones. (Brief 6: the ground photo line no longer
   gives way to a tooltip; tooltips are placed clear of it instead, so the line is always on screen) */
html.stacked .lc-sentence { flex-wrap: wrap; }
html.stacked .lc-sentence .lc-clear { margin-left: auto; }
html.stacked .phonebar .v5-exag { order: 3; flex-basis: 100%; margin: 0; font-size: 14px !important; }

.v6-changes { margin-top: 10px; font-size: 14px; }
.v6-changes summary { cursor: pointer; font-weight: 600; }
.v6-changes p { margin: 6px 0; }
/* brief 6: on phones "is found:" and the clear button wrap together (home-choose.js glueClear) */
html.stacked .lc-tail { display: inline-flex; align-items: baseline; column-gap: 0.3em; flex: none; white-space: nowrap; }
html.stacked .lc-tail .lc-clear { margin-left: 0; }

/* Release run (2026-10-25): the tool's name and subtitle in the header (release/build/apply_v6web.py) */
.top .brand { margin: 0; flex: none; display: flex; flex-direction: column; line-height: 1.2; color: var(--v1-ink); white-space: nowrap; }
.top .brand b { font-size: 15px; font-weight: 700; }
.top .brand span { font-size: 13px; color: var(--v1-ink-2); }
html.stacked .top .brand { flex-basis: 100%; white-space: normal; }
.lc-found, .lc-subsp { margin: 6px 0 0; }
.lc-found { font-weight: 600; }
.lc-short, .lc-scope { margin: 6px 0 0; }
.lc-scope { font-size: 13.5px; color: var(--v1-ink-2); }
.v4-scope { margin: 0 0 6px; font: 400 14px/1.45 var(--v1-sans, system-ui); color: var(--v1-muted); }