/* the research program: distributional safety as four glass towers (program.js), one column per pillar under each */

.pg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.pg-head h2 { margin: 0; }
.pg-lead { max-width: 64ch; }
.pg-one { margin: 0 0 14px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.pg-why { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dim); }

.pg { position: relative; margin: 44px 0 12vh; }
.pg-stage { position: relative; height: 480px; }
.pg-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pg-stage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(64, 96, 255, 0.10), transparent 75%); }

/* track codes pinned beside their chambers */
.pg-codes { position: absolute; inset: 0; pointer-events: none; }
.pg-codes span { position: absolute; left: 0; top: 0; padding: 2px 4px; font: 900 15px/1 var(--display); letter-spacing: .04em; color: hsl(var(--th) 95% 80%);
  pointer-events: auto; cursor: pointer; opacity: 0; transition: opacity .5s var(--ease) .6s, color .2s var(--ease); white-space: nowrap; }
.pg.lit .pg-codes span { opacity: .85; }
.pg.lit .pg-codes span.on { opacity: 1; color: #fff; text-shadow: 0 0 10px hsla(var(--th), 95%, 65%, .6); transition-delay: 0s; }
.pg.lit .pg-codes span.dim { opacity: .25; transition-delay: 0s; }

/* the readout: the key at rest, a track's headline while one is picked */
.pg-read { position: absolute; right: 0; top: 0; width: min(38%, 470px); pointer-events: none; }
.pg-read-in.in { animation: pg-in .22s var(--ease); }
@keyframes pg-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.pg-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 11px; color: var(--dim); }
.pg-key span { display: inline-flex; align-items: center; gap: 7px; }
.pg-key i { display: inline-block; width: 18px; height: 9px; border: 1px solid; border-radius: 1px; }
.pg-key .k-res { width: 12px; height: 12px; border: 0; color: var(--zip); filter: drop-shadow(0 0 4px rgba(60, 255, 230, .7)); }
.pg-key .k-res svg { width: 12px; height: 12px; fill: rgb(210, 255, 248); stroke: #fff; stroke-width: .6; }
.pg-key .k-adv { border-color: rgba(247, 118, 142, .8); background: rgba(247, 118, 142, .12); }
.pg-key .k-nul { border-color: rgba(170, 174, 188, .55); background: rgba(170, 174, 188, .06); }
.pg-key .k-pro { border: 1px dashed rgba(170, 174, 188, .6); }
.pg-sum { margin: 12px 0 0; font-size: 12px; color: var(--faint); }
.pg-sum b { color: var(--ink); font-weight: 400; }
.pg-hl { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.pg-hl-k { display: block; margin-bottom: 8px; font: 900 22px/1 var(--display); color: hsl(var(--th) 95% 80%); }
.pg-hl-k em { font: 400 12px/1 var(--mono); font-style: normal; color: var(--dim); margin-left: 8px; letter-spacing: 0; vertical-align: 3px; }

/* hover a slab: its project */
.pg-tip { position: absolute; z-index: 4; max-width: 320px; padding: 11px 13px 12px; display: grid; gap: 5px; pointer-events: none;
  background: rgba(14, 18, 34, 0.86); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pg-tip b { font: 900 17px/1.15 var(--display); color: #fff; }
.pg-tip span { font-size: 12px; line-height: 1.5; color: var(--dim); }
.pg-tip .pg-tip-v { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }
.pg-tip .pg-tip-v.v-result { color: var(--zip); }
.pg-tip .pg-tip-v.v-adverse { color: var(--no); }
.pg-tip svg, .pg-ts svg { width: 10px; height: 10px; fill: rgb(210, 255, 248); filter: drop-shadow(0 0 3px rgba(60, 255, 230, .9)); }

.pg-feet { display: none; }

/* the columns: one per pillar, its tower stands above it */
.pg-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 0 28px; margin-top: 10px; }
.pg-col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.pg-col h3 { align-self: end; }
.pg-col h3 { margin: 0; font: 900 clamp(26px, 2.3vw, 36px)/1 var(--display); color: var(--ink); }
.pg-q { margin: 10px 0 18px; font-size: 13px; line-height: 1.5; color: var(--dim); }
.pg-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; border-top: 1px solid var(--line); }
.pg-tr { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; text-align: left; padding: 14px 10px 14px 8px; border-bottom: 1px solid var(--line);
  border-radius: 0; transition: background .2s var(--ease), opacity .25s var(--ease); position: relative; }
.pg-tr::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: hsl(var(--th) 95% 72%); box-shadow: 0 0 10px hsla(var(--th), 95%, 65%, .7); opacity: 0; transition: opacity .2s var(--ease); }
.pg-tr:hover, .pg-tr.on { background: linear-gradient(90deg, hsla(var(--th), 90%, 60%, .10), transparent 85%); }
.pg-tr.on::before { opacity: 1; }
.pg-tr:focus-visible { outline: 1px solid var(--zip); outline-offset: -1px; }
.pg.has-active .pg-tr:not(.on) { opacity: .45; }
.pg-ic { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; color: hsl(var(--th) 95% 80%); }
.pg-ic svg { width: 100%; height: 100%; display: block; }
.pg-tn b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.pg-tn span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--dim); }
.pg-ts { grid-column: 2; display: flex; gap: 16px; margin-top: 6px; font-size: 11px; color: var(--faint); }
.pg-ts > span { display: inline-flex; align-items: baseline; gap: 5px; }
.pg-ts b { font: 900 17px/1 var(--display); color: var(--ink); }
.pg-ts .has b { color: rgb(190, 255, 245); }
.pg-ts svg { align-self: center; }

.pg-key-m { display: none; }

/* arrival: the columns settle in under their towers, once */
.pg-col { opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease) calc(var(--i) * .1s + .25s), translate .5s var(--ease) calc(var(--i) * .1s + .25s); }
.pg.lit .pg-col { opacity: 1; translate: 0 0; }

/* no WebGL: the flat elevation */
.pg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-flat .pg-stage { height: 380px; }
.fs rect { fill: hsla(var(--th), 90%, 70%, .12); stroke: hsl(var(--th) 90% 72%); stroke-width: 1; }
.fs.v-adverse rect { fill: rgba(247, 118, 142, .1); stroke: rgba(247, 118, 142, .8); }
.fs.v-null rect, .fs.v-not-qualified rect { fill: rgba(170, 174, 188, .05); stroke: rgba(170, 174, 188, .5); }
.fs.v-proposed rect { fill: none; stroke: rgba(170, 174, 188, .55); stroke-dasharray: 3 3; }
.fs-d { fill: rgb(210, 255, 248); filter: drop-shadow(0 0 4px rgba(60, 255, 230, .9)); }

/* track panels below: the pillar ahead of the track name, the track's icon beside its code */
.track .tr-code { display: inline-flex; align-items: center; gap: 14px; }
.track .tr-code::before { content: ""; width: 34px; height: 34px; flex: none; background: currentColor; -webkit-mask: var(--tr-ic) center / contain no-repeat; mask: var(--tr-ic) center / contain no-repeat; filter: drop-shadow(0 0 8px hsla(var(--th), 95%, 65%, .5)); }
#track-sybil { --tr-ic: url(icons/sybil.svg); } #track-influence { --tr-ic: url(icons/influence.svg); } #track-deliberation { --tr-ic: url(icons/deliberation.svg); }
#track-verification { --tr-ic: url(icons/verification.svg); } #track-recovery { --tr-ic: url(icons/recovery.svg); } #track-operations { --tr-ic: url(icons/operations.svg); } #track-wild { --tr-ic: url(icons/wild.svg); }

/* narrow: the towers stand side by side over short names, then the columns stack */
@media (max-width: 1100px) {
  .pg-head { grid-template-columns: 1fr; }
  .pg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 36px 28px; }
  .pg-col { display: block; grid-row: auto; }
}
.pg.pg-m .pg-read { display: none; }
.pg.pg-m .pg-feet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 900 12px/1 var(--display); color: var(--dim); }
.pg.pg-m .pg-codes span { font-size: 11px; padding: 2px; }
.pg.pg-m .pg-key-m { display: block; margin: 16px 0 34px; }
@media (max-width: 680px) {
  .pg { margin-top: 28px; }
  .pg-one { font-size: 16px; }
  .pg-cols { grid-template-columns: 1fr; gap: 30px; }
  .track .tr-code::before { width: 26px; height: 26px; }
  .track .tr-code { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-col, .pg-codes span { transition: none; opacity: 1; translate: none; }
  .pg-read-in.in { animation: none; }
}