/* greenroom.html: the data layers (#data-layers) and the question network (#ai-question), drawn by gr-layers.js.
   Both are scroll figures (scroll-progress.js, DESIGN.md sections 1 and 7). Every moving part reads --p, which is the
   helper's --sp (0 as the figure enters the window, 1 when it is centred), or the step the reader points at, or 1.
   1 is the finished figure, so reduced motion, no helper and no JavaScript all show it whole.
   Only opacity, transform and stroke-dashoffset follow the scroll. Three strokes, one node, bone only for the lit path. */
.gl { --p: var(--sp, 1); --gl-ease: cubic-bezier(0.22, 1, 0.36, 1); }
/* the network plays once (gr-layers.js sets --np from 0 to 1, then drops the class); until then it waits at 0 */
.gl.gl-play { --p: var(--np, 0); }
/* a pointed step shows the network at one moment of that run: the question, the search at its widest, the evidence */
.gl[data-at="1"] { --p: 0.1; }
.gl[data-at="2"] { --p: 0.4; }
.gl[data-at="3"] { --p: 0.81; }
.gl[data-at="4"], .gl.gl-full { --p: 1; }
.gl-canvas { width: 100%; min-width: 0; }
.gl-canvas svg { display: block; overflow: visible; max-width: 100%; height: auto; }

/* how a part follows --p: it starts at --a and takes --w of it (fade: opacity, draw: a line drawing itself, rise: a
   slab lifting off the one below it). An unset --p is 1, so each of these is its finished state by default. */
.gl .gl-fade { opacity: calc(var(--o, 1) * var(--dim, 1) * clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.05), 1)); }
.gl .gl-draw { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.06), 1)); }
.gl .gl-rise { --t: clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.14), 1); transform: translateY(calc((1 - var(--t)) * var(--from, 0px))); opacity: clamp(0, calc(var(--t) * 3), 1); }
/* people the search passed through: bright as the pulse arrives, then fading back to their resting tone from --d on */
.gl .gl-seen { opacity: calc(var(--o, 1) * var(--dim, 1) * clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.05), 1) * (1 + var(--b, 1) * (1 - clamp(0, (var(--p) - var(--d, 0.5)) / var(--dw, 0.1), 1)))); }
/* the pulse: a ring that grows from the last ring to this one while it arrives; opacity rises, then falls back to nothing */
.gl .gl-pulse { fill: none; stroke: var(--text-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none;
  --t: clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.1), 1);
  transform: scale(calc(var(--s0, 0.5) + (1 - var(--s0, 0.5)) * var(--t)));
  opacity: calc(0.55 * min(var(--t), 1 - var(--t)) * 2); }
/* pointing at a step puts the figure at that moment; the change is eased for a moment, then back to following the scroll */
.gl.gl-tween :is(.gl-fade, .gl-draw, .gl-rise) { transition: opacity 320ms var(--gl-ease), stroke-dashoffset 640ms var(--gl-ease), transform 640ms var(--gl-ease); }
.gl[data-at="3"] .gl-dim, .gl[data-at="4"] .gl-dim { --dim: 0.45; }
.gl[data-at="4"] .gl-alt { --dim: 0.4; }

/* the three strokes */
.gl-rest { fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; --o: 0.6; opacity: var(--o); }
.gl-use { fill: none; stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.gl-lit-line { fill: none; stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--a, 0)) / var(--w, 0.06), 1)); }
/* the one node: 7px, hollow at rest, filled when lit */
.gl-node { fill: var(--bg); stroke: var(--text-2); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.gl-node.gl-lit { fill: var(--text); stroke: var(--text); }
.gl-quiet { stroke: var(--text-3); opacity: 0.7; }
.gl-who { stroke: var(--text-2); }

/* text: Geist 14px (12px on phones), mono for numbers only */
.gl-t { font: 400 14px var(--sans); fill: var(--text-2); }
.gl svg.phone .gl-t { font-size: 12px; }
.gl-t3 { fill: var(--text-3); }
.gl-name { fill: var(--text); font-weight: 500; }
.gl-litt { fill: var(--text); }
.gl-role { fill: var(--text-2); }
.gl-rel { fill: var(--text-3); }
.gl-hoptext { fill: var(--text-3); }
.gl-num { font-family: var(--mono); letter-spacing: -0.02em; }
.gl-halo { stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.gl-fig { font: 400 13px var(--mono); fill: var(--text-3); }

/* ---------- the data layers ---------- */
.gl-face { stroke: var(--text-2); stroke-width: 1; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke 320ms var(--gl-ease), stroke-opacity 320ms var(--gl-ease); }
.gl-top { fill: #1e1e1d; }
.gl-front { fill: #141414; }
.gl-side { fill: #181817; }
.gl-slab { cursor: pointer; outline: none; }
.gl-slab.is-on .gl-top { stroke: var(--text); stroke-opacity: 1; }
.gl-slab.is-on .gl-front, .gl-slab.is-on .gl-side { stroke: var(--text-2); stroke-opacity: 0.9; }
.gl-slab.is-kb .gl-top { stroke-width: 1.5; }
.gl-slab.is-on .gl-node { stroke: var(--text-2); }
.gl-slab.is-on .gl-node.gl-lit { stroke: var(--text); }
.gl-slab.is-on .gl-cr { stroke: var(--text-2); }
.gl-slab.is-on .gl-now .gl-cr { stroke: var(--text); }
.gl-slab.is-on .gl-rest { stroke: var(--text-2); --o: 0.9; }
.gl-slab.is-on .gl-path { stroke: var(--text); stroke-width: 2; --o: 1; }
.gl-slab.is-on .gl-tick.gl-use, .gl-slab.is-on .gl-s-ring { stroke: var(--text); }
.gl-slab.is-on .gl-mpage.gl-now .gl-top { stroke: var(--text); stroke-opacity: 1; }
.gl-slab.is-on .gl-mpage:not(.gl-now) .gl-top { stroke: var(--text-2); stroke-opacity: 0.8; }
.gl-slab.is-on .gl-t3 { fill: var(--text-2); }
.gl-slab.is-on .gl-when-now { fill: var(--text); }
/* momentum: credits over time on thin sheets fanned back in time; the earlier the sheet, the quieter, lighter and fewer */
.gl-mpage:not(.gl-now) .gl-face { stroke-opacity: 0.4; }
.gl-cr { fill: none; stroke: var(--text-2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gl-mpage[data-j="0"] .gl-cr { stroke: var(--text-3); --o: 0.7; }
.gl-mpage[data-j="1"] .gl-cr { stroke-width: 1.25; }
.gl-mpage.gl-now .gl-cr { stroke-width: 1.75; fill: var(--bg); }
.gl-guide { stroke: var(--text-3); stroke-width: 1; fill: none; stroke-dasharray: 2 4; opacity: 0.5; vector-effect: non-scaling-stroke; }
.gl-when-now { fill: var(--text-2); }
/* intent: a ring of time left on each live intent, run down by the scroll */
.gl-ring-all { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; --o: 0.9; }
.gl-ring-left { stroke-dasharray: 1 1; }
.gl-run { stroke-dashoffset: calc(var(--off) * clamp(0, (var(--p) - var(--a, 0) - 0.04) / 0.1, 1)); }
.gl-tick { fill: none; vector-effect: non-scaling-stroke; }
/* labels: dim at rest, brighter when their layer is the one shown */
.gl-lab .gl-t { fill: var(--text-3); }
.gl-lab .gl-name { fill: var(--text-2); font-weight: 500; font-size: 15px; }
.gl-lab.is-on .gl-t { fill: var(--text-2); }
.gl-lab.is-on .gl-name, .gl-lab.is-on .gl-fig { fill: var(--text); }
.gl-lab .gl-lead { fill: none; stroke: var(--text-3); stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; transition: stroke 320ms var(--gl-ease), opacity 320ms var(--gl-ease); }
.gl-lab.is-on .gl-lead { stroke: var(--text); opacity: 1; }
.gl-key { cursor: pointer; }
/* the intent ping: a ring scales out and fades, twice, then stops (about 0.9s, started once when the figure is whole) */
.gl-ping { fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.gl-ping.gl-s-ping { stroke: var(--text); stroke-width: 1.25; }
.gl-ping-static { display: none; fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: var(--po); }
.gl-ping-static.gl-s-ping { stroke: var(--text); }
@keyframes gl-ping { from { transform: scale(1); opacity: var(--po); } to { transform: scale(4.5); opacity: 0; } }
.gl-ping-in .gl-ping, .gl-ping-again .gl-ping { animation: gl-ping 380ms var(--gl-ease) var(--pd, 0ms) 2 forwards; }

/* ---------- the network ---------- */
.gl-hop { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; --o: 0.35; }
/* the crowd stays faint, so the three evidence paths (Warm Stone 1.25px, Bone 2px) stand clear of it */
.gl-edge { fill: none; stroke: var(--text-3); stroke-width: 1; vector-effect: non-scaling-stroke; --o: 0.14; }
.gl-edge.gl-named { --o: 0.3; }
.gl-faint { --o: 0.45; }
.gl-namednode { stroke: var(--text-2); }
/* the introduction: Ash, 1px, dashed, no glow; a solid stroke inside a mask reveals it, so the dashes never collapse */
.gl-intro { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.gl-reveal { fill: none; stroke: #fff; stroke-width: 10; }

.gl-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--split-gap, 48px); border-top: 1px solid var(--line); }
.gl-steps > li { transition: opacity 280ms var(--gl-ease); }
.gl-step { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2em 1fr; width: 100%; min-height: 44px; padding: 20px 0 8px; cursor: pointer; }
.gl-step .gl-n { grid-row: span 2; font: 400 14px/1.5 var(--mono); color: var(--text-3); }
.gl-step .gl-sn { font: 500 15px/1.45 var(--sans); color: var(--text); }
.gl-step .gl-sd { margin-top: 4px; font: 400 14px/1.5 var(--sans); color: var(--text-2); }
.gl-step:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; border-radius: 2px; }
/* at rest every step is in full tone; pointing at one lights it and eases the others to 0.6, never hidden */
.gl.gl-ready[data-at] .gl-steps > li:nth-child(n) { opacity: 0.6; }
.gl.gl-ready[data-at] .gl-steps > li:nth-child(n):has(.is-on) { opacity: 1; }

@media (max-width: 900px) {
  .gl-steps { grid-template-columns: 1fr; }
  .gl-steps > li + li { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-tween :is(.gl-fade, .gl-draw, .gl-rise), .gl-steps > li, .gl-face, .gl-lab .gl-lead { transition: none !important; }
  .gl-ping { display: none; }
  .gl-ping-static { display: inline; }
}