/* Proving Ground app: the screens. Tokens live in tokens.css, type roles, the bar and the controls in base.css.
   Every font-size here is a step of the scale; every outer margin is --gutter; every colour is a token. */

body { min-height: 100dvh; --pres-h: 0px; --note-h: 0px; }
body.has-note { --note-h: 2.4rem; }
.boot { padding: var(--s-7) var(--gutter); }
.loadnote { height: var(--note-h); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0.55rem var(--gutter); background: var(--stage-2); color: var(--ash); font-size: var(--t-small); border-bottom: 1px solid var(--line); }
.arrow { display: inline-block; margin-left: 0.15em; }
[id] { scroll-margin-top: calc(var(--bar-h) + var(--s-4)); }

/* one view becoming the next: the place you chose travels with you (main.js starts the transition) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--med); animation-timing-function: var(--ease); }
::view-transition-group(pg-target), ::view-transition-group(pg-candidate) { animation-duration: var(--slow); animation-timing-function: var(--ease); }
.vt-target { view-transition-name: pg-target; }
.vt-candidate { view-transition-name: pg-candidate; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.view { min-height: calc(100dvh - var(--bar-h) - var(--pres-h) - var(--note-h)); }

/* ------------------------------------------------------------------ shared pieces of the screens */
/* test chips: Overall · Drive a rover · Land · Work in low Sun */
.tchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tchip { min-height: var(--tap); padding: 0.4em 1em; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ash);
  font-size: var(--t-small); font-weight: var(--w-medium); line-height: 1.1; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.tchip:hover { color: var(--bone); border-color: var(--bone); }
.tchip[aria-checked="true"] { background: var(--ink-wash); border-color: var(--ink); color: var(--bone); }

.plate { border-radius: 2px; background: var(--plate-bg); outline: 1px solid var(--bone-3); outline-offset: -1px; opacity: 0; transition: opacity var(--slow) var(--ease); }
.plate.is-ready { opacity: 1; }
.plate.is-missing { opacity: 1; background: repeating-linear-gradient(45deg, var(--plate-bg) 0 6px, var(--plate-bg-2) 6px 12px); }

/* maps */
.maphost { position: relative; min-height: 0; padding: var(--s-4) var(--gutter) var(--s-4) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.mapwrap { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.map { position: relative; flex: none; }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.map-earth .map-img { filter: sepia(0.3) saturate(0.7) brightness(0.62) contrast(1.25); }
.map-mars .map-img { filter: sepia(0.75) saturate(1.05) hue-rotate(-14deg) brightness(0.62) contrast(1.12); }
.map-moon .map-img { filter: brightness(0.86) contrast(1.08); }
.map-svg { position: absolute; inset: 0; overflow: visible; }
.map-pool {
  position: absolute; inset: 0; background: var(--ink); opacity: 0.3; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask: url("../data/globe/earth_pool.png") center / 100% 100% no-repeat; mask: url("../data/globe/earth_pool.png") center / 100% 100% no-repeat;
}
.map-note { font-size: var(--t-small); fill: var(--ash); font-family: var(--f-ui); font-weight: var(--w-medium); paint-order: stroke; stroke: var(--void); stroke-width: 3px; }
.map-label { font-size: var(--t-body); fill: var(--bone); font-family: var(--f-ui); font-weight: var(--w-medium); paint-order: stroke; stroke: var(--void); stroke-width: 4px; }
.pin { cursor: pointer; }
.pin-dot { fill: var(--void); stroke: var(--ink); stroke-width: 2; transition: fill var(--fast) var(--ease); }
.pin.is-on .pin-dot, .pin:hover .pin-dot { fill: var(--ink); }
.map-legend { display: flex; gap: var(--s-2) var(--s-5); font-size: var(--t-small); font-weight: var(--w-medium); line-height: var(--lh-tight); color: var(--ash); flex-wrap: wrap; flex: none; }
.lg { display: inline-flex; align-items: center; gap: 0.5em; }
.lg::before { content: ""; width: 0.8em; height: 0.8em; flex: none; }
.lg-pool::before { background: var(--ink); opacity: 0.5; }
/* the score of the whole-Earth search (layers/*.webp: one colour, alpha = score); the relief steps back under it */
.map-pool.is-score { -webkit-mask: none; mask: none; background: none; opacity: 1; mix-blend-mode: normal; }
.map-pool.is-score img, .map-pool.is-score canvas { display: block; width: 100%; height: 100%; }
.has-score > .map-img { filter: sepia(0.3) saturate(0.7) brightness(0.36) contrast(1.25); }
.lg-score::before { display: none; }
.lg-ramp { display: inline-block; width: 2.4em; height: 0.8em; background: var(--key-height); flex: none; }
.lg-known::before { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--bone); }
.lg-cand::before { border-radius: 50%; border: 1.5px solid var(--bone); }

/* ------------------------------------------------------------------ 1 Choose */
.choose-top { display: grid; grid-template-columns: minmax(24rem, 36rem) minmax(0, 1fr); gap: clamp(1.5rem, 3.4vw, 4rem); align-items: center;
  padding: var(--s-5) var(--gutter); min-height: calc(100dvh - var(--bar-h) - var(--pres-h) - var(--note-h)); }
.choose-left { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.choose-h { font-size: clamp(var(--t-5), 3.5vw, var(--t-6)); }
.choose-lead { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ash); max-width: 33em; }
.choose-go { align-self: flex-start; }
.choose-kicker { margin-bottom: calc(-1 * var(--s-2)); }
.choose-cta { display: flex; }
.choose-geo { font-size: var(--t-small); color: var(--ash); }
.choose-geo .textlink { color: var(--bone); text-decoration-color: var(--line-strong); }
.choose-geo-k { color: var(--ash); }
.hero-break { color: var(--amber); }
.choose-test { gap: var(--s-2); }

.wtabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); }
.wtab { min-height: var(--tap); padding: 0 0.1em; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ash); }
.wtab:hover { color: var(--bone); }
.wtab[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--ink); }

.mcards { display: grid; gap: var(--s-2); }
.mcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; text-align: left; padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--bone);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.mcard .plate { width: 3.25rem !important; height: 3.25rem !important; }
.mcard-plate { display: block; line-height: 0; }
.mcard:hover { border-color: var(--line-strong); background: var(--stage); }
.mcard[aria-pressed="true"] { border-color: var(--ink); background: var(--ink-wash); }
.mcard-text { display: grid; gap: 0.15rem; min-width: 0; }
.mcard-name { font-size: var(--t-body); }
.mcard-blurb { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); text-wrap: pretty; }
.mcard[aria-pressed="true"] .mcard-blurb { color: var(--bone); }
/* fewer words at first glance: only the chosen base carries its line */
.mcard:not([aria-pressed="true"]) .mcard-blurb { display: none; }

.mlist { display: grid; gap: 2px; max-height: min(19rem, 36dvh); overflow-y: auto; padding-right: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; text-align: left; padding: 0.35rem 0.5rem; background: none; border: 0;
  border-left: 2px solid transparent; cursor: pointer; color: var(--bone); border-radius: 0 var(--radius) var(--radius) 0; }
.mrow .plate { width: 2.5rem !important; height: 2.5rem !important; }
.mrow:hover { background: var(--stage); }
.mrow[aria-selected="true"] { background: var(--ink-wash); border-left-color: var(--ink); }
.mrow-text { display: grid; min-width: 0; }
.mrow-name { font-size: var(--t-body); line-height: 1.2; }
.mrow-sub { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }
/* scroll hint: the list fades out at the bottom while there is more below (site.js sets .at-end) */
.mlist:not(.at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent); }

.choose-right { min-width: 0; display: grid; align-content: center; }
.hero { display: grid; gap: var(--s-3); margin: 0; }
.hero-link { position: relative; display: block; border-radius: var(--radius); overflow: hidden; outline-offset: 3px; background: var(--void); }
.hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--slow) var(--ease); }
.hero-link:hover .hero-img { transform: scale(1.012); }
.hero-tag { position: absolute; top: var(--s-4); padding: 0.3rem 0.6rem; background: var(--scrim); border-radius: var(--radius); }
.hero-tag.is-a { left: var(--s-4); }
.hero-tag.is-b { left: calc(50% + var(--s-4)); }
.hero-tag .bodytag { color: var(--bone); }
.hero-cap { display: grid; gap: 0.2rem; }
.hero-cap-main { font-size: var(--t-body); font-weight: var(--w-medium); line-height: 1.3; color: var(--bone); }
.hero-cap-sub { font-size: var(--t-small); line-height: var(--lh-small); color: var(--smoke); }
.hero-cap-other { display: block; font-size: var(--t-body); line-height: 1.3; color: var(--ash); }
.hero-cap-other:empty { display: none; }
.hero-cap-other b { color: var(--bone); }
.hero-plates { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6); }
.hero-plate-note { font-size: var(--t-small); color: var(--ash); }

.marsbox { display: grid; gap: var(--s-4); }
.marsmap { height: min(28rem, 52dvh); display: flex; }
.marsmap .mapwrap { width: 100%; }
.marsinfo { display: grid; gap: var(--s-2); }
.marsinfo-name { font-size: var(--t-4); }
.marsinfo-why { color: var(--ash); max-width: var(--measure); text-wrap: pretty; }

/* below the fold: pairs we reviewed */
.pairs { padding: var(--s-7) var(--gutter) var(--s-8); border-top: 1px solid var(--line-strong); display: grid; gap: var(--s-5); }
.pairs-sum { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); }
.pairs-sum::-webkit-details-marker { display: none; }
.pairs-sub { color: var(--ash); font-size: var(--t-lead); }
.pairs-open { margin-left: auto; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--bone); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.55em 1em; }
.pairs[open] .pairs-open { display: none; }
.pairs-body { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
.pairs-group { display: grid; gap: var(--s-4); }
.pairs-gh { font-size: var(--t-body); font-weight: var(--w-strong); color: var(--bone); }
.pairs-gsub { font-weight: var(--w-regular); color: var(--ash); }
.pair-line.is-tag { color: var(--bone); font-weight: var(--w-medium); }
.pairs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-5); }
.pair { display: grid; gap: var(--s-3); align-content: start; justify-items: start; text-align: left; padding: var(--s-3); background: transparent; color: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.pair:hover { border-color: var(--line-strong); background: var(--stage); }
.pair-pic { width: 100%; display: block; }
.pair.is-text { padding: var(--s-4); }
.hero-img.is-stacked { aspect-ratio: 540 / 676; }
.hero-link.is-stacked .hero-tag.is-b { left: var(--s-2); top: calc(50% + var(--s-2)); }
.pair-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--plate-bg); border-radius: 2px; }
.pair-blank { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 100%; aspect-ratio: 4 / 3; }
.pair-blank-half { border-radius: 2px; background: var(--plate-bg); border-top: 3px solid var(--line-strong); }
.pair-blank-half.is-mars { border-top-color: var(--mars); }
.pair-blank-half.is-moon { border-top-color: var(--moon); }
.pair-blank-half.is-earth { border-top-color: var(--earth); }
.pair-names { display: grid; gap: 0.2rem; }
.pair-names .name-caps, .sheet-h .name-caps { display: flex; gap: 0.5em; align-items: baseline; font-size: var(--t-small); line-height: 1.3; }
.pair-names .bodytag, .sheet-h .bodytag { font-size: inherit; flex: none; }
.pair .chip, .sheet .chip { white-space: normal; text-align: left; }
.chip.is-trap { color: var(--bone); border-color: var(--bone); }
.pair-line { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); text-wrap: pretty; }
.pair-line b { color: var(--bone); font-weight: var(--w-strong); }
.pair-line.is-break { color: var(--ash); }
/* the break in a pair sheet: bone words with one amber mark beside them (a paragraph is not the break's number) */
.sheet .pair-line.is-break { color: var(--bone); border-left: 3px solid var(--amber); padding-left: var(--s-3); }
.sheet .pair-line.is-break b { color: var(--bone); }
.pairs-date { margin-top: var(--s-2); }

.sheet { width: min(84rem, 94vw); max-height: 92dvh; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--stage); color: var(--bone); }
.sheet::backdrop { background: var(--scrim-strong); }
.sheet-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); gap: var(--s-5); padding: var(--s-5); }
.sheet-x { position: absolute; top: var(--s-3); right: var(--s-3); }
.sheet-img { width: 100%; height: auto; border-radius: 2px; background: var(--plate-bg); }
.sheet-text { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-6); }
.sheet-h { display: grid; gap: 0.35rem; }
.sheet-h .name-caps { font-size: var(--t-body); }
.sheet .pair-line { font-size: var(--t-body); }
.sheet-go { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-2); }

/* ------------------------------------------------------------------ 2 Earth places */
.matches { display: grid; grid-template-columns: var(--ledger-w) minmax(0, 1fr); height: calc(100dvh - var(--bar-h) - var(--pres-h) - var(--note-h)); }
.ledger { overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-6) var(--gutter); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-4);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.ledger > * { flex: none; }
.stagecol { display: grid; grid-template-rows: minmax(17rem, 40%) minmax(0, 1fr); min-width: 0; min-height: 0; }

.for { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.for-plate .plate { width: 3.5rem !important; height: 3.5rem !important; }
.for-text { display: grid; gap: 0.15rem; justify-items: start; }
.for-name { font-size: var(--t-3); margin: 0.1rem 0 0.15rem; }
.srcswitch button { font-size: var(--t-small); }
.scope { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); max-width: var(--measure-small); }
.rule { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-left: 2px solid var(--line-strong); }
.rule-text { font-size: var(--t-small); line-height: var(--lh-small); color: var(--bone); text-wrap: pretty; }
.frame { display: grid; gap: 0.2rem; max-width: var(--measure); }
.frame-1 { font-size: var(--t-body); font-weight: var(--w-medium); line-height: 1.3; color: var(--bone); text-wrap: pretty; }
.frame-2 { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); text-wrap: pretty; }
.rule-body { display: grid; gap: var(--s-2); padding: var(--s-2) 0 var(--s-2) var(--s-4); border-left: 2px solid var(--line-strong); }
.rule-w { display: flex; flex-wrap: wrap; gap: 0.3rem var(--s-4); font-size: var(--t-small); color: var(--bone); }
.rule-w li { display: inline-flex; align-items: baseline; gap: 0.3em; }
.rule-more summary, details.more summary, .rail-toggle { cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: 0.4em; min-height: 2rem;
  font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ink); background: none; border: 0; padding: 0; font-family: inherit;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.rule-more summary::-webkit-details-marker, details.more summary::-webkit-details-marker { display: none; }
.rule-more[open] { display: grid; gap: var(--s-2); }
.rule-th { display: grid; gap: 0.15rem; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); }
.rule-th b { color: var(--bone); display: inline-block; min-width: 3.2em; }
.rule-cap { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); }

.cgroup { display: grid; gap: var(--s-2); }
.cgroup-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); }
.cgroup-h .verdict { font-size: var(--t-small); }
.cgroup-n { font-size: var(--t-small); color: var(--smoke); font-weight: var(--w-strong); }
.clist { display: grid; margin: 0 calc(-1 * var(--s-3)); }
.clist li { border-top: 1px solid var(--line); scroll-margin-top: 6.5rem; }
.clist li:last-child { border-bottom: 1px solid var(--line); }
.crow { width: 100%; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "n main score" ". lines lines" ". tags tags";
  gap: 0.3rem 0.6rem; align-items: start; text-align: left; padding: 0.7rem var(--s-3); background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; color: var(--bone);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.crow:hover { background: var(--stage); }
.crow[aria-pressed="true"] { background: var(--ink-wash); border-left-color: var(--ink); }
.crow-n { grid-area: n; font-size: var(--t-small); font-weight: var(--w-strong); color: var(--smoke); line-height: 1.6; }
.crow[aria-pressed="true"] .crow-n { color: var(--bone); }
.crow-main { grid-area: main; display: grid; gap: 1px; min-width: 0; }
.crow-name { font-size: var(--t-body); line-height: 1.25; }
.crow-sub { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); text-wrap: pretty; overflow-wrap: anywhere; }
.crow-score { grid-area: score; display: grid; justify-items: end; line-height: 1; }
.crow-num { font-size: var(--t-4); font-weight: var(--w-strong); }
.crow-of { font-size: var(--t-small); color: var(--smoke); margin-top: 0.15rem; }
.crow-lines { grid-area: lines; display: grid; gap: 0.1rem; font-size: var(--t-small); line-height: var(--lh-tight); }
.crow-good { color: var(--bone); font-weight: var(--w-medium); }
.crow-breaks { color: var(--ash); }
.crow-k { color: var(--smoke); font-weight: var(--w-regular); }
.clist li.is-newgroup { border-top: 1px solid var(--line-strong); margin-top: var(--s-3); }
.crow-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; margin-top: 0.2rem; }
.crow-tags .chip { font-size: var(--t-small); }

/* the known catalogued sites and the numbered places on the map */
.known-dot { fill: var(--bone); opacity: 0.6; }
.known-dot.is-near { fill: none; stroke: var(--bone); stroke-width: 1.5; opacity: 1; }
.nk-line { stroke: var(--bone); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.85; }
.nk-label { font-size: var(--t-small); fill: var(--bone); font-family: var(--f-ui); font-weight: var(--w-strong); paint-order: stroke; stroke: var(--void); stroke-width: 4px; }
.cpin { cursor: pointer; }
.cpin-disc { fill: var(--void); stroke: var(--bone); stroke-width: 1.5; }
.cpin-num { font: 650 16px var(--f-ui); fill: var(--bone); pointer-events: none; }
.cpin-lead { stroke: var(--bone); stroke-width: 1; opacity: 0.7; }
.cpin-foot { fill: var(--bone); }
.cpin.is-on .cpin-disc { fill: var(--ink); stroke: var(--ink); }
.cpin.is-on .cpin-num { fill: var(--on-ink); }

.detail { border-top: 1px solid var(--line); padding: var(--s-5) var(--gutter) var(--s-5) var(--s-6); display: grid; gap: var(--s-5); align-content: start; background: var(--stage);
  min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.detail:focus { outline: none; }
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id go" "verdict verdict"; gap: var(--s-4) var(--s-5); align-items: center; }
.detail-id { grid-area: id; min-width: 0; }
.detail-go { grid-area: go; }
.detail-head .detail-verdict { grid-area: verdict; }
.detail-name { font-size: var(--t-4); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.detail-sub { display: flex; flex-wrap: wrap; gap: 0.15rem var(--s-5); color: var(--ash); font-size: var(--t-small); line-height: var(--lh-tight); margin-top: 0.35rem; }
.detail-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 var(--s-4); justify-content: start; }
.detail-score { display: grid; justify-items: end; gap: 2px; padding-right: var(--s-4); border-right: 1px solid var(--line); }
.detail-score .v { font-size: var(--t-6); font-weight: var(--w-strong); line-height: 1; color: var(--bone); }
.crow-alt { color: var(--ash); }
.detail-score .k { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); white-space: nowrap; }
.detail-vcol { display: grid; gap: 0.4rem; justify-items: start; align-content: center; }
.detail-reason { font-size: var(--t-small); line-height: 1.3; color: var(--ash); max-width: 34rem; text-wrap: pretty; }
.detail-flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.detail-flags .sample-mark { margin-left: 0; }
.detail-label { font-size: var(--t-body); line-height: 1.4; color: var(--bone); max-width: 46rem; text-wrap: pretty; border-left: 2px solid var(--ink); padding-left: var(--s-3); }

/* the measures: scored for this test, then shown but not scored */
.dimgroups { display: grid; gap: var(--s-4); }
.dimgroup { display: grid; gap: var(--s-3); }
.dimgroup-h { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ash); line-height: var(--lh-tight); }
details.dimgroup > summary { cursor: pointer; list-style: none; display: inline-flex; gap: 0.5em; align-items: center; min-height: 2rem; }
details.dimgroup > summary::-webkit-details-marker { display: none; }
details.dimgroup > summary::before { content: "+"; color: var(--ink); font-weight: var(--w-strong); width: 0.8em; }
details.dimgroup[open] > summary::before { content: "\2212"; }
.dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--s-4) var(--s-5); align-items: start; }
.dim { display: grid; gap: 0.3rem; align-content: start; min-width: 0; border-radius: 2px; }
.dim[role="button"] { cursor: pointer; }
.dim-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); min-width: 0; }
.dim-name { font-size: var(--t-small); font-weight: var(--w-strong); line-height: var(--lh-tight); }
.dim-w { font-size: var(--t-small); font-weight: var(--w-strong); color: var(--ash); border: 1px solid var(--line-strong); border-radius: 2px; padding: 0 0.35em; line-height: 1.3; }
.dim-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.dim-num { display: inline-flex; gap: 0.4em; align-items: baseline; font-size: var(--t-body); font-weight: var(--w-strong); line-height: 1; color: var(--bone); }
.dim-flag { font-size: var(--t-small); font-weight: var(--w-medium); color: var(--amber); border: 1px solid currentColor; border-radius: 2px; padding: 0 0.35em; line-height: 1.3; white-space: nowrap; margin-left: auto; }
.dim-of { font-weight: var(--w-regular); color: var(--ash); font-size: var(--t-small); }
.dim.is-empty .dim-num { color: var(--smoke); font-weight: var(--w-regular); }
.dim.is-broken .dim-num, .dim.is-broken .dim-num .dim-of { color: var(--amber); }
.dim-flag.is-quiet { color: var(--smoke); }
.dim.is-low .mbar.is-broken .mbar-fill { background: var(--smoke); }
.dim-vals { display: grid; gap: 0.1rem; font-size: var(--t-small); line-height: 1.35; color: var(--ash); }
.dim-pair b { color: var(--bone); font-weight: var(--w-strong); }
.dim-unit { color: var(--smoke); overflow-wrap: anywhere; }
.dim-how { color: var(--smoke); }
.dim-vals.is-none { color: var(--smoke); }
.dim-side { white-space: nowrap; }
.dim-note { display: none; font-size: var(--t-small); line-height: 1.35; color: var(--ash); text-wrap: pretty; }
.dim.is-open .dim-note { display: block; }

.detail-foot { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-4) var(--s-6); }
.breaks-h { font-size: var(--t-body); font-weight: var(--w-strong); line-height: 1.25; margin-bottom: var(--s-2); }
.breaks .breaks-h { color: var(--bone); }
.breaks li { position: relative; padding-left: 1.2rem; font-size: var(--t-body); line-height: 1.38; max-width: var(--measure); margin-bottom: 0.2rem; text-wrap: pretty; }
.breaks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 2px; background: var(--amber); }
.breaks li.breaks-none { color: var(--ash); }
.breaks li.breaks-none::before { background: var(--smoke); }
.nearest p { font-size: var(--t-body); line-height: 1.38; max-width: var(--measure); text-wrap: pretty; }
details.more { grid-column: 1 / -1; }
details.more ul { margin-top: var(--s-2); display: grid; gap: 0.3rem; }
details.more li { position: relative; padding-left: 1.2rem; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); max-width: 52rem; text-wrap: pretty; }
details.more li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 0.6rem; height: 1.5px; background: var(--smoke); }

/* ------------------------------------------------------------------ 3 Same Sun */
.twins { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; height: calc(100dvh - var(--bar-h) - var(--pres-h) - var(--note-h)); }
.twins-head { display: flex; align-items: center; gap: var(--s-3) var(--s-6); flex-wrap: wrap; padding: 0.35rem var(--gutter); background: var(--stage); border-bottom: 1px solid var(--line); min-height: 3.25rem; }
.twins-test { display: grid; line-height: var(--lh-tight); }
.twins-test b { font-size: var(--t-body); }
.twins-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.twins-tools .seg label { min-height: 2.5rem; }
.twins-tools .btn { min-height: 2.5rem; }
.cswitch { display: flex; align-items: center; gap: var(--s-2); }
.cswitch-n { display: grid; justify-items: center; min-width: 7.5rem; line-height: var(--lh-tight); }
.cswitch-n b { font-size: var(--t-body); font-weight: var(--w-strong); }
.twins-stage { position: relative; min-height: 0; overflow: hidden; background: var(--void); }
.twins-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.twins-canvas:active { cursor: grabbing; }
.twins-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.twins-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.is-wipe .twins-seam { display: none; }
.twin-label { position: absolute; top: var(--s-4); max-width: min(44%, 38rem); display: grid; gap: 0.3rem; pointer-events: none; text-shadow: 0 0 14px var(--scrim-strong), 0 0 3px var(--scrim-strong); }
.twin-label > * { pointer-events: auto; }
.twin-label.is-a { left: var(--gutter); }
.twin-label.is-b { left: calc(50% + var(--gutter)); }
.is-wipe .twin-label.is-b { left: auto; right: var(--gutter); justify-items: end; text-align: right; }
.is-wipe .twin-label.is-b .readouts { justify-content: flex-end; }
.twin-name { font-size: var(--t-3); line-height: 1.05; margin-top: 0.1rem; }
.twin-sub { color: var(--ash); font-size: var(--t-small); line-height: var(--lh-tight); }
.twin-stats { margin-top: var(--s-1); }
.twin-stats dd { font-size: var(--t-lead); }
.ruler-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ruler-l { position: absolute; left: 0; top: 0; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--ash); white-space: nowrap; will-change: transform; text-shadow: 0 0 6px var(--scrim-strong); }
.twins-status { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); color: var(--ash); font-size: var(--t-body); text-align: center; max-width: var(--measure); pointer-events: none; }
.twins-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 62%, var(--shade) 100%); }
.twins-stage > :not(canvas) { z-index: 1; }

/* the key to a colour overlay sits on the seam: it is one scale for both terrains */
.twins-legend { position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%); width: 17rem; display: grid; gap: 0.3rem; padding: 0.6rem 0.9rem 0.55rem; background: var(--void); border-radius: var(--radius); }
.is-wipe .twins-legend { left: var(--gutter); transform: none; }
.lg-title { font-size: var(--t-small); color: var(--bone); font-weight: var(--w-strong); line-height: var(--lh-tight); }
.lg-bar { height: 0.6rem; border-radius: 1px; }
.lg-slope { background: var(--key-slope); }
.lg-height { background: var(--key-height); }
.lg-ticks { display: flex; justify-content: space-between; font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }

.wipe-handle { position: absolute; top: 0; bottom: 0; width: 34px; margin-left: -17px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
.wipe-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 16px; width: 2px; background: var(--ink); }
.wipe-grip { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--scrim); }
.wipe-grip::before, .wipe-grip::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid var(--on-ink); border-width: 2px 0 0 2px; }
.wipe-grip::before { left: 8px; transform: translateY(-50%) rotate(-45deg); }
.wipe-grip::after { right: 8px; transform: translateY(-50%) rotate(135deg); }

/* the Sun bar under the canvas: touch screens only */
.sunbar { display: none; }

/* the caption rail: one line under each terrain. Left: what makes the pair fair. Right: the verdict and where it breaks. */
.rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--void); }
.rail-half { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--gutter); min-width: 0; min-height: 3rem; }
.rail-half.is-b { border-left: 1px solid var(--line); }
.rail-line { display: flex; flex-wrap: wrap; gap: 0.1rem var(--s-5); font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }
.rail-line b { color: var(--bone); font-weight: var(--w-strong); }
.rail-line .is-amber, .rail-line .is-amber b { color: var(--bone); text-decoration: underline; text-underline-offset: 0.2em; }
.rail-score { font-size: var(--t-lead); font-weight: var(--w-strong); line-height: 1; }
.rail-score .unit { font-size: var(--t-small); }
.rail-breaks { font-size: var(--t-small); color: var(--amber); }
.rail-breaks b { font-weight: var(--w-medium); }
.rail-reason { font-size: var(--t-small); line-height: 1.3; color: var(--ash); }
.rail-toggle { flex: none; }
.rail-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rail-more-col { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-3) var(--gutter); min-width: 0; }
.rail-more-col + .rail-more-col { border-left: 1px solid var(--line); }
.rail-label { font-size: var(--t-small); line-height: var(--lh-small); color: var(--bone); max-width: var(--measure-small); text-wrap: pretty; }
.twin-verdict { display: flex; flex-wrap: wrap; gap: 0.35rem var(--s-4); align-items: center; min-width: 0; }
.twin-verdict .verdict { font-size: var(--t-body); }
.twin-verdict .sample-mark { margin-left: 0; }
.twin-breaks { display: grid; gap: 0.1rem; }
.twin-breaks li { position: relative; padding-left: 1.2rem; font-size: var(--t-small); color: var(--amber); line-height: 1.35; text-wrap: pretty; }
.twin-breaks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6rem; height: 2px; background: var(--amber); }
.twin-src { font-size: var(--t-micro); color: var(--smoke); line-height: 1.35; text-wrap: pretty; }
.dstrip { overflow: visible; }
.ds-track { fill: var(--bone-2); }
.ds-fill { fill: var(--bone); }
.ds-fill.is-broken { fill: var(--smoke); }
.ds-empty { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 3; }

/* When to go (Moon Bases I and II) */
.when { border-top: 1px solid var(--line); background: var(--stage); padding: var(--s-2) var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-6); }
.when-h { font-size: var(--t-small); font-weight: var(--w-strong); color: var(--bone); }
.when-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); align-items: center; }
.when-head { display: grid; gap: var(--s-2); justify-items: start; }
.when-cell { display: grid; gap: 0.1rem; }
.when-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); }
.when-cell b { font-size: var(--t-lead); line-height: 1.1; }
.when-rule { grid-column: 1 / -1; }
@media (min-width: 901px) { .when-rule { display: none; } }
.when-sub { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }

/* the dock: an instrument panel. A quiet label over each instrument, hairlines between groups. */
.dock { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0 var(--gutter); border-top: 1px solid var(--line); background: var(--stage); }
.ctl { display: grid; gap: 0.45rem; align-content: end; padding: 0.7rem 0.9rem 0.8rem; border-left: 1px solid var(--line); }
.ctl:first-child { padding-left: 0; border-left: 0; }
.ctl-sun { grid-template-columns: auto minmax(9.5rem, 10.5rem) auto; column-gap: var(--s-4); align-items: center; align-content: center; }
.ctl-sunside { display: grid; gap: 0.15rem; }
.ctl-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.ctl-quick { display: grid; gap: 0.35rem; }
.ctl-quick .btn { justify-content: flex-start; }
.ctl-val { font-weight: var(--w-strong); font-size: var(--t-body); line-height: var(--lh-tight); }
.ctl-end { margin-left: auto; border-left: 0; padding-right: 0; }
.dial { cursor: grab; touch-action: none; overflow: visible; border-radius: 50%; width: 4.75rem; height: 4.75rem; }
.dial-ring { fill: var(--void); stroke: var(--line-strong); stroke-width: 1.5; }
.dial-tick { stroke: var(--smoke); stroke-width: 1.2; }
.dial-n { font: 650 22px var(--f-ui); fill: var(--ash); }   /* units of the dial's 100-unit box: on the 4.75rem dial the letter is drawn at about 17 px */
.dial-tile { fill: none; stroke: var(--bone); stroke-width: 1.4; }
.dial-ray { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2 3; }
.dial-sun { fill: var(--ink); stroke: var(--void); stroke-width: 2; }

.is-fallback .twins-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: end; justify-items: center; padding: 0 0 var(--s-7); }
.fallback-plate { height: min(calc(100% - 15.5rem), 36rem); min-height: 11rem; width: auto; aspect-ratio: 1; }
.is-fallback .twins-status { position: absolute; top: auto; bottom: var(--s-3); left: var(--gutter); right: var(--gutter); transform: none; text-align: left; font-size: var(--t-small); color: var(--ash); max-width: none; }

/* ------------------------------------------------------------------ How we know */
.checks { padding: var(--s-6) var(--gutter) var(--s-8); display: grid; gap: var(--s-7); max-width: 84rem; }
.chk-head { display: grid; gap: var(--s-3); }
.chk-head .h1 { max-width: 22em; }
.chk-sec { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.chk-h { font-size: var(--t-3); }
.chk-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-5); align-items: start; }
.chk-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--stage); }
.chk-card.is-blind { border-color: var(--line-strong); }
.chk-card-h { font-size: var(--t-body); font-weight: var(--w-medium); line-height: 1.3; }
.chk-result { font-size: var(--t-lead); font-weight: var(--w-strong); line-height: 1.2; color: var(--bone); }
.chk-plain { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ash); text-wrap: pretty; }
.chk-lines { display: grid; gap: 0.35rem; margin-top: var(--s-2); }
.chk-lines li { padding-left: 0.9rem; position: relative; }
.chk-lines li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.45rem; height: 1.5px; background: var(--smoke); }
.chk-bars { display: grid; gap: 0.45rem; margin-top: var(--s-3); }
.chk-bar, .chk-axis { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr) 2.5rem; gap: var(--s-3); align-items: center; }
.chk-bar-name { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }
.chk-bar-track { position: relative; height: 0.8rem; background: var(--bone-2); border-radius: 1px; }
.chk-bar-track::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--smoke); }
.chk-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ash); border-radius: 1px; }
.chk-bar-v { font-size: var(--t-small); font-weight: var(--w-strong); text-align: right; }
.chk-bar.is-ours .chk-bar-name, .chk-bar.is-ours .chk-bar-v { color: var(--bone); font-weight: var(--w-strong); }
.chk-bar.is-ours .chk-bar-fill { background: var(--ink); }
.chk-bar.is-chance .chk-bar-fill { background: transparent; border: 1px dashed var(--smoke); }
.chk-axis { font-size: var(--t-small); color: var(--smoke); }
.chk-axis-ticks { display: flex; justify-content: space-between; }
.chk-list { display: grid; gap: 0.4rem; }
.chk-list li { position: relative; padding-left: 1.2rem; max-width: 48rem; line-height: 1.42; text-wrap: pretty; }
.chk-list li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.6rem; height: 1.5px; background: var(--ash); }
.chk-list.is-failed li::before { background: var(--bone); height: 2px; }
.chk-list.is-weights { color: var(--ash); }
.chk-rule { border-collapse: collapse; width: 100%; max-width: 60rem; }
.chk-rule thead th { white-space: nowrap; }
.chk-rule th, .chk-rule td { text-align: left; vertical-align: top; padding: 0.55rem var(--s-4) 0.55rem 0; border-top: 1px solid var(--line-strong); line-height: 1.35; }
.chk-rule thead th { border-top: 0; color: var(--ash); font-weight: var(--w-medium); }
.chk-rule tbody th { font-weight: var(--w-strong); width: 30%; }
.chk-rule td { color: var(--ash); }
.chk-rule td.num { color: var(--bone); font-weight: var(--w-strong); white-space: nowrap; }
@media (max-width: 640px) {
  /* the rule table as two stacked blocks on a phone, each value with its own label */
  .chk-rule thead { display: none; }
  .chk-rule, .chk-rule tbody, .chk-rule tr, .chk-rule th, .chk-rule td { display: block; width: auto; }
  .chk-rule tr { border-top: 1px solid var(--line-strong); padding: 0.6rem 0; }
  .chk-rule th, .chk-rule td { border-top: 0; padding: 0.1rem 0; white-space: normal; }
  .chk-rule tbody th { width: auto; }
  .chk-rule td[data-k]::before { content: attr(data-k) ": "; color: var(--ash); font-weight: var(--w-regular); }
}
.never { display: grid; gap: var(--s-3); }
.never div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-4); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.never dt { font-weight: var(--w-strong); color: var(--amber); line-height: 1.3; }
.never dd { color: var(--bone); line-height: 1.42; max-width: var(--measure); text-wrap: pretty; }
.chk-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: var(--s-3) var(--s-6); }
.chk-gloss div { display: grid; gap: 0.15rem; border-top: 1px solid var(--line); padding-top: var(--s-2); }
.chk-gloss dt { font-weight: var(--w-strong); }
.chk-gloss dd { color: var(--ash); line-height: 1.4; text-wrap: pretty; }
.chk-funnel { font-size: var(--t-lead); line-height: 1.35; max-width: 40rem; }
.chk-credit { color: var(--bone); }
.sources { border-collapse: collapse; width: 100%; }
.sources th, .sources td { text-align: left; vertical-align: top; padding: 0.6rem 0; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: var(--lh-small); }
.sources th { width: 14rem; padding-right: var(--s-4); font-weight: var(--w-strong); }
.sources .credit { display: block; color: var(--smoke); margin-top: 0.15rem; }
.chk-sci { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.chk-sci > summary { cursor: pointer; font-weight: var(--w-medium); color: var(--ink); min-height: var(--tap); display: flex; align-items: center; }
.chk-sci-body { display: grid; gap: var(--s-3); color: var(--ash); max-width: 52rem; }
.chk-quiz { margin-top: calc(-1 * var(--s-4)); }

/* ------------------------------------------------------------------ quiz (off the nav) */
.quiz { padding: var(--s-6) var(--gutter) var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
.quiz:not(.is-revealed) { grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr); grid-template-areas: "head grid" "foot grid"; grid-template-rows: auto 1fr; column-gap: clamp(1.75rem, 4vw, 4.5rem); }
.quiz:not(.is-revealed) .quiz-head { grid-area: head; }
.quiz:not(.is-revealed) .quiz-grid { grid-area: grid; justify-self: end; align-self: start; align-content: start; width: 100%; }
.quiz:not(.is-revealed) .quiz-foot { grid-area: foot; align-self: start; display: grid; justify-items: start; gap: var(--s-3); }
.quiz:not(.is-revealed) .lead { font-size: var(--t-body); line-height: var(--lh-body); }
.quiz-head { display: grid; gap: var(--s-3); }
.quiz-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); max-width: calc((100dvh - var(--bar-h) - var(--pres-h) - 11.5rem) * 2.0); }
.qcell { display: grid; gap: var(--s-3); align-content: start; }
.qplate .plate { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.qbtns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.qtruth { display: grid; gap: 0.15rem; min-height: 4.75rem; align-content: start; }
.qname { font-size: var(--t-lead); line-height: 1.15; }
.qcoord { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--ash); }
.qmark { font-size: var(--t-small); font-weight: var(--w-strong); color: var(--ash); }
.qhand { margin-top: 0.15rem; }
.is-wrong .qmark { color: var(--ash); text-decoration: line-through; }
.is-right .qmark { color: var(--bone); }
.quiz-ink { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.quiz-foot { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.quiz.is-revealed .quiz-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-4); max-width: none; }
.quiz.is-revealed .quiz-head .lead { display: none; }
.quiz.is-revealed .qname { font-size: var(--t-body); }
.quiz.is-revealed .qhand { font-size: var(--t-body); }
.punch { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4) clamp(1.75rem, 4vw, 4.5rem); align-items: end; width: 100%; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.punch-line { font-size: var(--t-8); align-self: center; }
.punch-body { display: grid; gap: var(--s-3); }
.punch-body .lead { font-size: var(--t-body); line-height: var(--lh-body); }
.punch-score { font-size: var(--t-lead); font-weight: var(--w-strong); }
.punch .btn { justify-self: start; }

/* ------------------------------------------------------------------ presenter strip (P) */
.presenter { position: fixed; left: 0; right: 0; bottom: 0; height: var(--pres-h); z-index: 30; background: var(--stage); border-top: 1px solid var(--line-strong); padding: 0 var(--gutter); display: grid; gap: 0.2rem; align-content: center; }
.beats { display: flex; gap: clamp(0.5rem, 1.6vw, 1.5rem); overflow-x: auto; scrollbar-width: none; }
.beats button { display: inline-flex; gap: 0.5em; align-items: center; min-height: 2.25rem; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ash); font-size: var(--t-small); font-weight: var(--w-medium); white-space: nowrap; }
.beats button:hover { color: var(--bone); }
.beats kbd { font: 650 var(--t-small) var(--f-ui); font-variant-numeric: tabular-nums lining-nums; min-width: 1.7em; height: 1.7em; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--bone); }
.beats .is-on button { color: var(--bone); }
.beats .is-on kbd { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.cue { font-size: var(--t-small); line-height: var(--lh-tight); color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-presenter { --pres-h: 4.25rem; padding-bottom: var(--pres-h); }
.is-present:not(.show-cues) body.has-presenter { --pres-h: 3rem; }

/* ------------------------------------------------------------------ presenter mode (?present=1)
   Type is already larger (base.css scales the rem). Here: drop the chrome a juror does not need and give
   the room to the thing each beat is about. D brings the dock and every "details" back. */
.is-present .fine, .is-present .crow-sub, .is-present .detail-reason, .is-present .hero-cap-sub { display: none; }
.is-present .dock, .is-present .rail-toggle, .is-present .rail-more, .is-present details.more { display: none; }
.is-present.show-dock .dock { display: flex; }
.is-present.show-dock .rail-toggle { display: inline-flex; }
.is-present.show-dock .rail-more { display: grid; }
.is-present.show-dock .rail-more[hidden] { display: none !important; }
.is-present.show-dock details.more, .is-present.show-dock .detail-reason, .is-present.show-dock .fine, .is-present.show-dock .crow-sub { display: block; }
.is-present .rail-reason { display: none; }
.is-present.show-dock .rail-reason { display: inline; }
.is-present .checks .fine { display: block; }
.is-present .matches .stagecol { grid-template-rows: minmax(14rem, 36%) minmax(0, 1fr); }
/* projector: the Earth places column keeps three rows of the list in view (QA minor 9). The second framing
   sentence and the "Known analog" chip go (the switch above says which list it is); the test chips get smaller. */
.is-present .matches { --ledger-w: clamp(22rem, 32vw, 32rem); }
.is-present .ledger { gap: var(--s-3); }
/* each row's verdict too: the detail beside it shows the chosen place's verdict large, the framing line counts them */
.is-present .frame-2, .is-present .crow-tags .chip:not(.is-ink), .is-present .crow-tags .verdict { display: none; }
.is-present .crow-tags:not(:has(.chip.is-ink)) { display: none; }
.is-present .tchips { gap: 0.4rem; }
.is-present .tchip { font-size: var(--t-small); padding: 0.25em 0.8em; min-height: 2.25rem; }
/* the place's sub-line is hidden here, so "of 100" sits beside the number instead of holding a blank line */
.is-present .crow-score { display: flex; align-items: baseline; gap: 0.3em; }
.is-present .crow-of { margin-top: 0; }
.is-present .cue { display: none; }
.is-present.show-cues .cue { display: block; }
.is-present .quiz { padding-top: var(--s-5); gap: var(--s-4); }
.is-present .quiz.is-revealed .qcoord { display: none; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1500px) {
  .punch-line { font-size: var(--t-7); }
}
@media (max-width: 1180px) {
  .chk-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chk-card.is-blind { grid-column: 1 / -1; }
  .punch { grid-template-columns: minmax(0, 1fr); }
  .sheet-in { grid-template-columns: minmax(0, 1fr); }
  .sheet-text { padding-top: 0; }
  /* one column: the Close button sits above the picture, not on it */
  .sheet-x { position: static; justify-self: end; margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0 0; }
}
@media (max-width: 1000px) {
  .choose-top { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; }
}
/* phone and small tablet: one column, the page scrolls */
@media (max-width: 900px) {
  :root { --t-6: 2.333rem; --t-7: 2.333rem; --t-8: 2.8rem; --t-9: 2.8rem; --t-5: 1.944rem; }
  .choose-top { padding-top: var(--s-4); gap: var(--s-6); }
  .hero-tag { top: var(--s-2); padding: 0.2rem 0.45rem; }
  .hero-tag.is-a { left: var(--s-2); }
  .hero-tag.is-b { left: calc(50% + var(--s-2)); }
  .hero-tag .bodytag { font-size: var(--t-small); letter-spacing: 0.02em; }
  .marsmap { height: 52vw; min-height: 12rem; }
  .pairs { padding: var(--s-6) var(--gutter) var(--s-7); }
  .sheet-in { padding: var(--s-4); }

  .matches { display: block; height: auto; }
  .ledger { border-right: 0; overflow: visible; padding: var(--s-4) var(--gutter); }
  .stagecol { display: block; }
  .maphost { padding: var(--s-3) var(--gutter); height: auto; }
  .matches .mapwrap { height: 50vw; flex: none; }
  .detail { padding: var(--s-5) var(--gutter); max-height: none; overflow: visible; scroll-margin-top: var(--bar-h); }
  .detail-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "verdict" "go"; }
  .detail-go { justify-self: start; }
  .detail-vcol { min-width: 0; }
  .detail-vcol .verdict { white-space: normal; }
  .detail-score .k { white-space: normal; text-align: right; max-width: 7rem; }
  .twins-ridge { font-size: var(--t-small); min-height: 2.25rem; padding: 0.3em 0.8em; }
  .detail-foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .crow-num { font-size: var(--t-3); }

  .twins { height: auto; display: block; }
  .twins-head { gap: var(--s-2) var(--s-4); }
  .twins-ridge { margin-left: 0; }
  .twins-tools { display: none; }
  .twins-stage { height: min(55svh, 34rem); min-height: 16rem; }
  .when { grid-template-columns: minmax(0, 1fr); }
  .twins-canvas { touch-action: pan-y; }
  .twins-seam { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .twin-sub, .twin-stats { display: none; }
  .twin-name { font-size: var(--t-body); }
  .twin-label { max-width: 92%; gap: 2px; top: 0.5rem; }
  .twin-label.is-a { left: var(--gutter); }
  .twin-label.is-b { top: calc(50% + 0.5rem); left: var(--gutter); }
  .is-wipe .twin-label.is-b { top: 0.5rem; }
  .twin-label .bodytag { font-size: var(--t-small); }
  .cswitch-n { min-width: 0; }
  .cswitch-n .label { display: none; }
  .twins-legend { width: min(17rem, 80%); }
  .sunbar { display: flex; position: sticky; bottom: 0; z-index: 6; align-items: center; gap: var(--s-3); padding: 0.4rem var(--gutter); background: var(--stage); border-top: 1px solid var(--line); }
  .sunbar-range { flex: 1; display: grid; min-width: 0; }
  .sunbar .ctl-val { min-width: 3.2em; text-align: right; }
  .rail, .rail-more { grid-template-columns: minmax(0, 1fr); }
  .rail-half.is-b, .rail-more-col + .rail-more-col { border-left: 0; border-top: 1px solid var(--line); }
  .rail-half { flex-wrap: wrap; }
  .ctl { border-left: 0; padding: 0.7rem 1.1rem 0.7rem 0; }
  .ctl-sun { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .ctl-quick { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .ctl-end { margin-left: 0; }

  .chk-cards { grid-template-columns: minmax(0, 1fr); }
  .chk-bar, .chk-axis { grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr) 2.2rem; gap: var(--s-2); }
  .never div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sources th { width: 8rem; }

  .quiz:not(.is-revealed) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "grid" "foot"; }
  .quiz-grid, .quiz.is-revealed .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); min-width: 0; max-width: none; }
  .qtruth { min-height: 0; }
  .presenter { display: none; }
  .is-fallback .twins-stage { grid-template-columns: 1fr; padding: 0; height: auto; display: block; }
  .is-fallback .fallback-plate { width: 100%; height: auto; max-width: none; margin-top: 7.5rem; }
  .is-fallback .twin-label, .is-fallback .twins-status { position: static; max-width: none; padding: 0.5rem var(--gutter); }
}
/* a touch screen wider than a phone also gets the Sun bar and the scrolling canvas */
@media (pointer: coarse) and (min-width: 901px) {
  .twins-canvas { touch-action: pan-y; }
}
/* on a touch screen the names over the 3D view let a drag through to the terrain (they hold no links) */
@media (pointer: coarse), (max-width: 900px) {
  .twin-label, .twin-label > * { pointer-events: none; }
}
/* a phone on its side: the 3D fills the screen; the bar and the head row step aside */
@media (max-height: 500px) and (orientation: landscape) {
  body[data-route="twins"] .bar { display: none; }
  .twins { display: flex; flex-direction: column; height: auto; }
  .twins-stage { order: -2; height: 100svh; min-height: 0; }
  .sunbar { order: -1; }
  .twins-seam { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .twin-label.is-b { top: 0.5rem; left: calc(50% + var(--gutter)); }
}
.sheet-in.is-text { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
/* the two-way switch of Earth places: each half wraps its own words */
.srcswitch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
.srcswitch button { white-space: normal; text-align: center; line-height: 1.2; }
.pair-img { aspect-ratio: auto; }

/* ------------------------------------------------------------------ fix round (results/app_pass/fix/B)
   chips that carry long status labels wrap instead of pushing the page sideways */
.detail-flags .chip, .crow-tags .chip { white-space: normal; max-width: 100%; text-align: left; }
/* a place that is not fully measured: its number is greyed, so a 79 below a 66 does not read as a sorting bug */
.clist li.is-partial .crow-num, .clist li.is-partial .crow-of { color: var(--smoke); font-weight: var(--w-regular); }
.when-cell .label { white-space: normal; }
@media (max-width: 900px) {
  /* one Sun control on a phone: the bar under the 3D view (preset and height); the dock keeps only the sweep */
  .dock .ctl-dial, .dock .ctl-sunside, .dock .dock-low { display: none; }
  .dock .ctl-sun { grid-template-columns: auto; width: auto; }
  /* a tapped row opens its detail right under it */
  .clist .detail { border-top: 1px solid var(--line); padding: var(--s-4) var(--s-3) var(--s-5); margin: 0; scroll-margin-top: var(--bar-h); }
  .clist .detail .detail-id { display: none; }        /* the row right above already names the place */
  .crow[aria-expanded="true"] { background: var(--ink-wash); }
  .stagecol > .detail[hidden] { display: none !important; }
}
@media (max-width: 720px) {
  /* the start page is the chooser: its button is always in view */
  .choose-cta { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--void); border-top: 1px solid var(--line); }
  .choose-cta .choose-go { flex: 1; }
  .choose-kicker { margin-bottom: 0; }          /* the one line that says what this is (cold juror, qa1 minor 11) */
  .pairs { padding: var(--s-5) var(--gutter) var(--s-6); }
  .pairs-sum .h2 { font-size: var(--t-3); }
  .pairs-sub { font-size: var(--t-body); }
}

/* finds pass: the audited ridge line in the light measure of Moon Base I (one number for the ridge's low Sun) */
.dim-ref { font-size: var(--t-small); line-height: 1.35; color: var(--ash); margin-top: 0.15rem; }
.dim-ref .k { color: var(--smoke); }

/* ---- 15 Nov, team: "clear, good spacing, not too much text" on Try any site. CSS only; nothing is removed from the data. ---- */
.crow-lines { display: none; }                 /* a list row is: number, name, score, verdict. The reasons are in the detail on the right. */
.crow { padding-block: var(--s-4); row-gap: var(--s-2); }
.dim-ref { display: none; }                    /* the long reference sentence under a measure */
.dims { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5) var(--s-6); }
.dim { gap: 0.45rem; }
.dimgroups { gap: var(--s-5); }
.detail { gap: var(--s-6); }
.crow { grid-template-areas: "n main score" ". tags tags"; }