/* V1 home page layout. Desktop: the lookup on the left, the globe in its porthole on the right with the 856-mark
   spiral around it, the forest-loss timeline under the globe. Phone: sentence and answer first, globe below.
   Independent concept study by Mason Capalongo. Not affiliated with or endorsed by Colossal Biosciences. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--v1-bg);
  color: var(--v1-ink);
  font-family: var(--v1-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--v1-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--v1-focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the app frame ---------- */
.app { position: relative; min-height: 100vh; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at var(--glow-x, 70%) var(--glow-y, 48%), #0a1a22 0%, #061016 45%, var(--v1-bg) 80%); }
.top { position: absolute; left: 0; right: 0; top: 0; height: 52px; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 0 40px; border-bottom: 1px solid var(--v1-rule); background: rgba(4, 8, 11, 0.86); }
.top .disclaimer { margin: 0; font-size: 13.5px; color: var(--v1-ink-2); letter-spacing: 0.005em; flex: 1 1 auto; min-width: 0; }
.top nav { display: flex; gap: 20px; flex: none; align-items: center; }
.top nav a { font-size: 14px; color: var(--v1-ink); }
.keybtn .kb-glyphs { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: -1px; }
.keybtn .kb-glyphs svg { width: 10px; height: 10px; }
.keybtn { display: inline-flex; align-items: center; appearance: none; background: transparent; border: 1px solid var(--v1-rule-2); color: var(--v1-ink); font-size: 14px; padding: 4px 12px; border-radius: 2px; cursor: pointer; min-height: 32px; }
.keybtn[aria-expanded="true"] { background: #13232a; border-color: #3c555c; }

/* ---------- stage: the globe and the spiral ---------- */
.globewrap { display: contents; }
.stage { position: absolute; left: 0; right: 0; top: 52px; height: calc(100vh - 52px); z-index: 1; touch-action: none; }
.stage canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.stage .cv-ring { cursor: default; }
.ringkeys { position: absolute; pointer-events: none; border-radius: 50%; }
.ringkeys:focus-visible { outline: none; }
.ringfocus { position: absolute; pointer-events: none; border: 2px solid var(--v1-focus); display: none; z-index: 5; }
.ringkeys:focus-visible ~ .ringfocus { display: block; }
.tip { position: absolute; z-index: 8; pointer-events: none; background: #0c171c; border: 1px solid #2c4047; color: var(--v1-ink);
  padding: 6px 10px; font-size: 13px; line-height: 1.35; max-width: 300px; border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: none; }
.tip.on { display: block; }
.tip .t-name { font-family: var(--v1-serif); font-style: italic; font-size: 15px; }
.tip .t-sub { color: var(--v1-muted); }
.matchcount { position: absolute; z-index: 4; margin: 0; font-size: 13px; color: var(--v1-ink); font-variant-numeric: tabular-nums; pointer-events: none; }
.matchcount[hidden] { display: none; }
.nogl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 280px; z-index: 3; text-align: center; font-size: 14px; color: var(--v1-ink-2); margin: 0; }
.glabel { position: absolute; z-index: 4; pointer-events: none; font-size: 13px; color: var(--v1-muted); white-space: nowrap; line-height: 1.2; }
.glabel b { color: var(--v1-ink); font-weight: 600; }
.glabel.hover { color: var(--v1-ink); }

.relief-cap { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--v1-ink); padding-left: 10px; border-left: 2px solid var(--v1-gold); }
.relief-cap[hidden] { display: none; }
.relief-cap span { display: block; }
.relief-cap .rc-note { color: var(--v1-ink-2); }

/* ---------- lookup: sentence, answer, How sure is this? ---------- */
.lookup { position: absolute; z-index: 10; left: 40px; top: 84px; width: 560px; }
.lookup { transition: none; }
.lookup:not(.answered) { top: max(84px, calc(46vh - 150px)); }
.lookup .lc-if { font-size: 58px; line-height: 1.12; }
.lookup .lc-input, .lookup .lc-ghost, .lookup .lc-mirror { font-size: 58px; line-height: 1.12; }
.lookup.answered .lc-if, .lookup.answered .lc-input, .lookup.answered .lc-ghost, .lookup.answered .lc-mirror { font-size: 32px; line-height: 1.2; }
.lookup.answered .answer .lc-ruled { font-size: 31px; line-height: 1.2; font-weight: 500; }
.lookup .lc-input { border-bottom-width: 2px; }
.answer { margin-top: 26px; }
.howsure { margin-top: 22px; }
.howsure:has(.lc-sure-in:not([hidden])) { padding-top: 16px; border-top: 1px solid var(--v1-rule); }
.answer .lc-ruled { font-size: 31px; line-height: 1.2; }
.answer { margin-top: 22px; }
.howsure .lc-note { font-size: 14px; }
.howsure .lc-sure-title { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--v1-ink-2); font-weight: 600; }
.defline { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--v1-ink-2); max-width: 70ch; }
.defline[hidden] { display: none; }
.lookup.side .answer-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; column-gap: 28px; align-items: start; }
.lookup.side .howsure { margin-top: 26px; border-top: 0; padding-top: 0; border-left: 1px solid var(--v1-rule); padding-left: 20px; }

/* ---------- the moment: V1's own 820 ms rise (the console's short copy is hidden while it runs) ---------- */
body.v1-own-rise .lc-rise { display: none !important; }
.v1-rising .lc-large { visibility: hidden !important; }
.v1-rising .lc-glabels { opacity: 0 !important; }
.v1-rise { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 6px rgba(255, 226, 160, 0.75)); }
.v1-rise svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.v1-rise .lc-ink { fill: var(--lc-mark-ink); } .v1-rise .lc-plate { fill: var(--lc-mark-plate); } .v1-rise .lc-b1 { fill: var(--lc-mark-b1); }
.v1-rise-cap { position: fixed; z-index: 30; margin: 0; pointer-events: none; font-size: 14px; letter-spacing: 0.02em; color: var(--v1-gold); opacity: 0; white-space: nowrap; }

/* ---------- forest-loss timeline ---------- */
.lossbox { position: absolute; z-index: 8; display: none; }
.lossbox.on { display: block; }
.tl-row { display: flex; align-items: center; gap: 14px; }
.tl-buttons { display: flex; gap: 4px; flex: none; }
.tl-btn { appearance: none; width: 34px; height: 34px; border-radius: 2px; border: 1px solid var(--v1-rule-2); background: #0b161b; color: var(--v1-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tl-btn:hover { background: #12232a; }
.tl-play { width: 40px; border-color: #3b545b; }
.tl-year { flex: none; font-size: 22px; font-variant-numeric: tabular-nums; min-width: 3.1ch; color: var(--v1-ink); font-weight: 500; letter-spacing: 0.01em; }
.tl-chart { position: relative; flex: 1 1 auto; height: 34px; min-width: 120px; }
.tl-bars { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-bars rect { fill: #2b3d43; }
.tl-bars rect.past { fill: #6b4a58; }
.tl-bars rect.now { fill: var(--v1-glow); }
.tl-bars rect.future { fill: #1e2c31; }
.tl-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tl-range:focus-visible { opacity: 1; }
.tl-range { -webkit-appearance: none; appearance: none; background: transparent; }
.tl-range::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.tl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 34px; background: transparent; border: 2px solid var(--v1-focus); }
.tl-chart:focus-within { outline: 2px solid var(--v1-focus); outline-offset: 3px; }
.tl-tip { position: absolute; bottom: calc(100% + 8px); left: 0; font-size: 13px; color: var(--v1-ink); background: #0c171c; border: 1px solid #2c4047; padding: 4px 8px; white-space: nowrap; display: none; border-radius: 2px; }
.tl-tip.on { display: block; }
.tl-readout { margin: 0; flex: none; font-size: 13px; line-height: 1.25; color: var(--v1-ink-2); white-space: nowrap; }
.tl-readout[hidden] { display: none; }
.lossbox.narrow .tl-row { flex-wrap: wrap; row-gap: 6px; }
.lossbox.narrow .tl-readout { order: 9; flex-basis: 100%; }
.tl-sentence { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--v1-ink-2); max-width: 62ch; }
.tl-credit { margin: 3px 0 0; font-size: 13px; color: var(--v1-muted); }

/* ---------- key popover ---------- */
.keypanel { position: absolute; z-index: 30; left: 40px; top: 60px; width: 380px; background: #0a1418; border: 1px solid #263a40; padding: 16px 18px 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.55); border-radius: 2px; }
.keypanel[hidden] { display: none; }
.keypanel h2 { font-size: 13px; text-transform: none; letter-spacing: 0; margin: 0 0 8px; color: var(--v1-ink-2); font-weight: 600; }
.keypanel ul.kp-list { list-style: none; margin: 0; padding: 0; }
.keypanel ul.kp-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.35; padding: 3px 0; }
.keypanel .lc-legend { font-size: 13.5px; }
.keypanel .sw { width: 14px; height: 14px; display: block; border-radius: 1px; }
.keypanel .sw svg { width: 14px; height: 14px; display: block; }
.keypanel p { font-size: 13px; color: var(--v1-muted); margin: 6px 0 0; }

/* ---------- credits, below the fold ---------- */
.credits { position: relative; z-index: 2; background: #03070a; border-top: 1px solid var(--v1-rule); padding: 28px 40px 40px; font-size: 13.5px; color: var(--v1-ink-2); }
.credits h2 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--v1-ink-2); margin: 0 0 10px; font-weight: 600; }
.credits p { margin: 0 0 6px; max-width: 90ch; }
.credits a { color: var(--v1-ink); }

/* ---------- phone ---------- */
/* stacked layout: phones, and desktop windows too small for the side-by-side layout (html.stacked, set by main.js) */
html.stacked .app { height: auto; min-height: 0; overflow: visible; background: var(--v1-bg); }
html.stacked .top { position: static; height: auto; flex-wrap: wrap; padding: 12px 16px 10px; gap: 8px 16px; background: var(--v1-bg); }
html.stacked .top .disclaimer { flex-basis: 100%; font-size: 13px; }
html.stacked .top nav { gap: 16px; }
html.stacked .lookup { position: static; width: auto; padding: 18px 16px 4px; }
html.stacked .lookup .lc-if, html.stacked .lookup .lc-input, html.stacked .lookup .lc-ghost, html.stacked .lookup .lc-mirror { font-size: 24px; }
html.stacked .answer { margin-top: 18px; }
html.stacked .stage { position: relative; top: 0; height: var(--stage-h, 390px); margin-top: 8px; touch-action: pan-y; }
html.stacked .globewrap { display: block; position: relative; }
/* the forest-loss block sits directly under the globe; the layer is drawn only while its sentence is on screen */
html.stacked .lossbox { position: static; padding: 8px 16px 18px; }
html.stacked .top nav a { display: inline-block; line-height: 24px; padding: 4px 0; }
html.stacked .credits a { display: inline-block; line-height: 24px; }
html.stacked .lc-see a { display: inline-block; line-height: 24px; }
html.stacked .tl-sentence { font-size: 14px; }
html.stacked .tl-row { flex-wrap: wrap; row-gap: 8px; }
html.stacked .tl-readout { order: 9; flex-basis: 100%; }
html.stacked .keypanel { position: static; order: 0; width: auto; margin: 0 16px 8px; max-height: none; }
html.stacked .credits { padding: 24px 16px 36px; margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 359px) {
  .lookup .lc-if, .lookup .lc-input, .lookup .lc-ghost, .lookup .lc-mirror { font-size: 20px; }
}

/* phone strip after a choice: sentence, a 200 px band of the globe, the forest block, then the answer */
html.stacked .app { display: flex; flex-direction: column; }
html.stacked .top { order: 0; }
html.stacked .lookup { display: contents; }
html.stacked #lc-sentence { order: 1; padding: 18px 16px 4px; }
html.stacked .globewrap { order: 2; }
html.stacked .answer-row { order: 3; padding: 0 16px 8px; }
html.stacked .keypanel { order: 0; }
html.strip.stacked .stage { height: 200px !important; overflow: hidden; margin-top: 10px; }
html.strip.stacked .stage > * { margin-top: calc(-1 * var(--shift, 0px)); }
html.strip.stacked .stage canvas { height: var(--stage-h, 420px); }

.tl-ticks { position: absolute; left: 0; right: 0; top: calc(100% + 3px); height: 16px; font-size: 13px; line-height: 16px; color: var(--v1-muted); pointer-events: none; }
.tl-ticks[hidden] { display: none; }
.tl-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-ticks span:first-child { transform: none; margin-left: -6px; }
.tl-ticks span:nth-child(3) { transform: translateX(-100%); margin-left: 6px; }
.tl-ticks .tl-max { left: auto !important; right: 0; top: 18px; transform: none !important; margin: 0 !important; font-variant-numeric: normal; }
.lossbox:has(.tl-ticks:not([hidden])) .tl-sentence { margin-top: 42px; }

/* phone: the console's short rise is not used (its source moves when the globe strip opens); the mark appears in place */
html.stacked .lc-rise { display: none !important; }

.lossnote { position: absolute; z-index: 4; margin: 0; font-size: 13px; line-height: 1.35; color: var(--v1-muted); background: rgba(4, 8, 11, 0.85); padding: 2px 6px; pointer-events: none; }
.lossnote[hidden] { display: none; }

/* the console's own straight-line rise is never used on this page (V1 routes its own, or the mark appears in place) */
.lc-rise { display: none !important; }