/* Stazora Labs page, prototype v3 (Phase 23): the wave edge, the lab tiles (KID, the scenario it found, Evidence,
   Fact), two more experiments and the close. Tokens from tokens.css only (SVG gradient stops excepted). Without JS every
   visual shows its printed final figure and every KID note is open. */

/* ---- Act switches: a liquid wave edge on top of the incoming act ---- */
.labs .lab-wave { position: absolute; left: 0; right: 0; bottom: 100%; max-width: none; height: var(--stz-space-10); margin: 0 0 -1px; overflow: hidden; pointer-events: none; }
.lab-wave svg { display: block; width: 200%; height: 100%; }
.labs .is-dark .lab-wave path { fill: var(--stz-black); }

/* ---- Tiles as on the Stazora home page: square, edge to edge with 12 px white seams on a white section, one column,
   two from 56em (full or half width). Everything centred: the lab, the question, one line, the actions, then the thing
   itself in a reading-width column (lists, notes and rows inside it read left to right). ---- */
.labs .lab-grid { display: grid; gap: var(--stz-gutter); max-width: none; margin-inline: calc(var(--stz-gutter) - var(--pad-x)); }
@media (width >= 56em) { .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-tile { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: clamp(2.5rem, 1.6rem + 2.5vw, 3.75rem) clamp(1.25rem, 0.2rem + 3vw, 3rem); border-radius: var(--stz-radius-surface); background: var(--stz-surface-2); color: var(--stz-text); text-align: center; }
.lab-tile > * { align-self: center; width: 100%; max-width: 34rem; }
.lab-tile__name { display: flex; align-items: center; justify-content: center; gap: var(--stz-space-2); margin: 0 0 var(--stz-space-3); color: var(--stz-link); font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); }
.labs .is-dark .lab-tile__name { color: var(--stz-blue-dark); }
.labs .lab-tile h3 { margin: 0 0 var(--stz-space-3); font-size: var(--stz-fs-display-s); line-height: var(--stz-lh-display); letter-spacing: var(--stz-track-display-s); }
.lab-tile__sub { margin: 0 0 var(--stz-space-6); font-size: var(--stz-fs-lead-s); line-height: var(--stz-lh-snug); letter-spacing: var(--stz-track-lead); }
.lab-tile__hint { font-weight: var(--stz-fw-semibold); white-space: nowrap; }
.lab-tile__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--stz-space-3); margin: 0 0 var(--stz-space-8); }
.lab-tile .lab-caption, .lab-tile .lab-card__note { margin: var(--stz-space-6) auto 0; }
.labs-reveal-on .lab-tile { opacity: 0; transform: translateY(var(--stz-space-6)); }
.lab-tile__sub, .lab-caption, .lab-card__note, .lab-doc__note { text-wrap: pretty; }
/* a list of questions under the actions, as on the home page's tiles: one hairline above each */
.lab-list { margin: 0; padding: 0; list-style: none; text-align: left; }
.lab-list li { border-top: 1px solid var(--stz-hairline); }
.labs .lab-list a { display: flex; align-items: center; min-height: var(--stz-hit); padding: var(--stz-space-3) 0; color: var(--stz-text); font-weight: var(--stz-fw-medium); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .labs .lab-list a:hover { text-decoration: underline; } }

/* KID Lab: a paper specimen; each line is a native disclosure (open without JS) with its note under it */
.lab-doc { margin: 0; padding: var(--stz-space-5) var(--stz-space-3); border-radius: var(--stz-radius-card); text-align: left; background: var(--stz-white); box-shadow: var(--stz-shadow-raised); color: var(--stz-text); color-scheme: only light; }

.lab-doc__head { margin: 0 var(--stz-space-3) var(--stz-space-3); color: var(--stz-text-2); font-size: var(--stz-fs-caption); font-weight: var(--stz-fw-semibold); }
.lab-doc summary { position: relative; display: flex; align-items: center; gap: var(--stz-space-3); min-height: var(--stz-hit); padding: var(--stz-space-1) var(--stz-space-3); border-radius: var(--stz-radius-item); font-size: var(--stz-fs-callout); line-height: var(--stz-lh-snug); list-style: none; cursor: pointer; isolation: isolate; }
.lab-doc summary::-webkit-details-marker { display: none; }
.lab-doc summary b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-doc summary::after { content: ""; flex: none; width: var(--stz-space-2); height: var(--stz-space-2); margin: 0 var(--stz-space-1) var(--stz-space-1); border: solid var(--stz-text-2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--stz-dur-fade) var(--stz-ease); }
.lab-doc summary:not(:has(b))::after { margin-left: auto; }
.lab-doc details[open] > summary::after { transform: translateY(var(--stz-space-1)) rotate(-135deg); }
.lab-doc__mark { position: absolute; inset: 0; z-index: -1; border-radius: var(--stz-radius-item); background: var(--stz-blue-tint); transform: scaleX(0); transform-origin: left center; transition: transform var(--stz-dur) var(--stz-ease); }
.lab-doc details[open] > summary .lab-doc__mark { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .lab-doc summary:hover { background: var(--stz-tint); } }
.lab-doc__note { margin: var(--stz-space-1) var(--stz-space-3) var(--stz-space-3); padding-left: var(--stz-space-3); border-left: 2px solid var(--stz-cta); color: var(--stz-text-2); font-size: var(--stz-fs-callout); line-height: var(--stz-lh-snug); }
.lab-doc__note strong { color: var(--stz-text); font-weight: var(--stz-fw-semibold); }
.lab-doc__hair { display: block; height: 1px; margin: var(--stz-space-2) var(--stz-space-3); background: var(--stz-gray-300); } /* costs, risk, warnings */

/* Evidence Lab: guess first, then the beaker replays the sum */
.lab-guess { display: none; }
.js .lab-guess { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--stz-space-2); margin: 0 auto var(--stz-space-6); }
.lab-pill { min-height: var(--stz-hit); padding: 0 var(--stz-space-5); border: 1px solid var(--stz-hairline); border-radius: var(--stz-radius-pill); background: var(--stz-surface); color: var(--stz-text); font: inherit; font-weight: var(--stz-fw-semibold); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .lab-pill:hover { border-color: var(--stz-hairline-hover); } }
.lab-pill[aria-pressed="true"] { border-color: var(--stz-cta); background: var(--stz-cta); color: var(--stz-on-cta); }
.lab-guess__skip { min-height: var(--stz-hit); margin-left: var(--stz-space-2); padding: 0; border: 0; background: none; color: var(--stz-link); font: inherit; font-weight: var(--stz-fw-semibold); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .lab-guess__skip:hover { text-decoration: underline; } }
.lab-exp1 { display: grid; grid-template-columns: auto minmax(0, 10.5rem); grid-template-areas: "money beaker" "steps steps"; justify-content: center; align-items: end; gap: var(--stz-space-5) var(--stz-space-7); text-align: left; }
.lab-exp1__money { grid-area: money; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: var(--stz-space-2) var(--stz-space-3); margin: 0; font-size: var(--stz-fs-figure-s); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-tight); letter-spacing: var(--stz-track-figure); font-variant-numeric: tabular-nums; }
.lab-exp1__state { flex-basis: 100%; text-align: center; color: var(--stz-text-2); font-size: var(--stz-fs-callout); letter-spacing: var(--stz-track-small); } /* Start, After one year, After two years */
.lab-exp1__steps { grid-area: steps; justify-self: center; display: grid; gap: var(--stz-space-2); margin: 0; padding: 0; list-style: none; line-height: var(--stz-lh-snug); }
/* upcoming steps in the secondary text colour (5.1:1), not faded: still readable before the guess */
.lab-exp1__steps li { transition: color var(--stz-dur) var(--stz-ease); }
.labs-guess-on .lab-exp1__steps li:not(:first-child) { color: var(--step-off, var(--stz-text-2)); }
.labs-guess-on .lab-exp1__steps li.is-on { color: var(--step-on, var(--stz-text)); }
.lab-loss { white-space: nowrap; color: var(--loss, var(--stz-loss-text)); transition: color var(--stz-dur) var(--stz-ease); }
.labs-guess-on .lab-exp1__steps li:not(.is-on) .lab-loss { color: inherit; } /* red only once the sum gets there */
.lab-beaker { grid-area: beaker; width: 100%; height: auto; overflow: visible; }
.lab-beaker__glass { fill: none; stroke: var(--stz-gray-500); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lab-beaker__mark { fill: none; stroke: var(--stz-text-2); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lab-beaker__label { fill: var(--stz-text-2); font-size: calc(var(--stz-fs-caption) * 1.5); font-weight: var(--stz-fw-semibold); } /* user units: about 16 px drawn */
.lab-beaker__gap { fill: var(--stz-loss); fill-opacity: .7; } /* the €40 that is gone */
.lab-guess__verdict { min-height: calc(var(--stz-lh-body) * 1em); margin: var(--stz-space-5) auto 0; font-weight: var(--stz-fw-semibold); } /* space kept: no shift when it fills */
@media (width < 30em) {
	.lab-exp1 { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: var(--stz-space-4); } /* the beaker keeps its width: label 14 px */
	.lab-beaker__label { font-size: calc(var(--stz-fs-caption) * 1.85); } /* still about 14 px drawn */
}

/* Fact Lab on a light tile: four arcs, four ticks, a light that orbits once */
.lab-fact__dial { display: grid; justify-items: center; gap: var(--stz-space-6); }
.lab-fact__ring { position: relative; width: min(12rem, 70%); }
.lab-fact__ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-fact__track { fill: none; stroke: var(--stz-fill); stroke-width: 10; }
.lab-fact__arc { fill: none; stroke: var(--stz-cta); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lab-fact__tick { fill: none; stroke: var(--stz-text); stroke-width: 3; stroke-linecap: round; }
.lab-fact__halo { fill: var(--stz-cta); fill-opacity: .2; }
.lab-fact__light { fill: var(--stz-cta); }
.lab-fact__figure { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; color: var(--stz-text-2); font-size: var(--stz-fs-callout); text-align: center; }
.lab-fact__figure b { display: block; color: var(--stz-text); font-size: var(--stz-fs-figure-s); line-height: var(--stz-lh-tight); letter-spacing: var(--stz-track-figure); font-variant-numeric: tabular-nums; }
.lab-fact__steps { display: grid; gap: var(--stz-space-3); justify-self: center; margin: 0; padding: 0; list-style: none; text-align: left; counter-reset: s; }
.lab-fact__steps li { display: grid; grid-template-columns: var(--stz-space-6) minmax(0, 1fr); counter-increment: s; font-size: var(--stz-fs-callout); line-height: var(--stz-lh-snug); }
.lab-fact__steps li::before { content: counter(s); color: var(--stz-cta); font-weight: var(--stz-fw-semibold); }
.lab-fact__steps li { transition: color var(--stz-dur) var(--stz-ease); }
.labs-fact-on .lab-fact__steps li { color: var(--stz-text-2); }
.labs-fact-on .lab-fact__steps li.is-on { color: var(--stz-text); }
.lab-fact__when { margin: var(--stz-space-5) 0 0; color: var(--stz-text-2); font-size: var(--stz-fs-caption); }

/* Found in the KID Lab: the moderate scenario line */
.lab-scen__big { margin: 0; font-size: var(--stz-fs-figure); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-tight); letter-spacing: var(--stz-track-figure); font-variant-numeric: tabular-nums; }
.lab-tile > .lab-scen__plot { position: relative; width: calc(100% - var(--stz-space-10)); max-width: calc(34rem - var(--stz-space-10)); margin: var(--stz-space-6) var(--stz-space-2) var(--stz-space-9) var(--stz-space-8); align-self: center; } /* room for the axis labels */
.lab-scen__chart { display: block; width: 100%; height: auto; aspect-ratio: 660 / 240; overflow: visible; }
.lab-scen__grid { fill: none; stroke: var(--stz-hairline); stroke-width: 1; }
.lab-scen__ghost { fill: none; stroke: var(--stz-gray-500); stroke-width: 1.5; stroke-dasharray: 4 6; }
.lab-scen__line { fill: none; stroke: var(--stz-cta); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } /* revealed by a clip, with the area */
.lab-scen__y { position: absolute; top: var(--y); right: calc(100% + var(--stz-space-2)); transform: translateY(-50%); color: var(--stz-text-2); font-size: var(--stz-fs-caption); font-variant-numeric: tabular-nums; }
.lab-scen__x { position: absolute; top: calc(100% + var(--stz-space-2)); left: 0; right: 0; display: flex; justify-content: space-between; color: var(--stz-text-2); font-size: var(--stz-fs-caption); }
.lab-scen__head { position: absolute; left: 100%; top: 18.33%; width: 0; height: 0; }
.lab-scen__head i { position: absolute; width: var(--stz-space-3); height: var(--stz-space-3); margin: calc(-0.5 * var(--stz-space-3)); border-radius: var(--stz-radius-pill); background: var(--stz-cta); }
.lab-scen__head i::before { content: ""; position: absolute; inset: calc(-1 * var(--stz-space-2)); border-radius: inherit; background: var(--stz-cta); opacity: .2; }
.lab-scen__tag { position: absolute; right: var(--stz-space-3); bottom: var(--stz-space-3); color: var(--stz-link); font-size: var(--stz-fs-caption); font-weight: var(--stz-fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 3. Two more experiments: two half-width tiles in the same grid ---- */
.labs .lab-more > h2 { margin-bottom: var(--stz-space-8); }
.labs .lab-labs { padding-bottom: 0; }
.lab-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--stz-space-3); margin: 0 0 var(--stz-space-3); color: var(--stz-text-2); font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); }
.lab-race__rows { margin: 0; text-align: left; }
.lab-race__rows p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--stz-space-1) var(--stz-space-4); margin: var(--stz-space-6) 0 var(--stz-space-2); line-height: var(--stz-lh-snug); }
.lab-race__rows b { font-size: var(--stz-fs-title-l); font-variant-numeric: tabular-nums; letter-spacing: var(--stz-track-title); }
.lab-race__bar { display: block; width: var(--w); height: var(--stz-space-4); border-radius: var(--stz-radius-pill); background: var(--stz-cta); clip-path: inset(0 0 0 0 round var(--stz-radius-pill)); }
.lab-race__bar--b { background: var(--stz-dot-inactive); }
.lab-venn { display: block; width: 100%; max-width: 20rem; height: auto; margin: 0 auto var(--stz-space-5); overflow: visible; }
.lab-venn__a, .lab-venn__b { fill: var(--stz-gray-500); fill-opacity: .08; stroke-width: 2; }
.lab-venn__a { stroke: var(--stz-link); }
.lab-venn__b { stroke: var(--stz-dot-inactive); }
.lab-venn__lens { fill: var(--stz-cta); }
.lab-venn__label { fill: var(--stz-text-2); font-size: 14px; font-weight: var(--stz-fw-semibold); }
.lab-venn__pct { fill: var(--stz-on-cta); font-size: 24px; font-weight: var(--stz-fw-semibold); letter-spacing: var(--stz-track-figure); }
.lab-venn__sub { fill: var(--stz-on-cta); font-size: 13px; font-weight: var(--stz-fw-semibold); }
.lab-world { display: block; width: 100%; height: var(--stz-space-8); margin: var(--stz-space-2) 0 var(--stz-space-6); border-radius: var(--stz-radius-item); overflow: hidden; }
.lab-world__us { fill: var(--stz-cta); } .lab-world__c, .lab-mix__key--c { fill: var(--stz-gray-500); background: var(--stz-gray-500); } .lab-world__rest { fill: var(--stz-gray-300); }
.lab-world__c { stroke: var(--stz-surface-2); stroke-width: 1; }
.lab-conc__head { margin: 0 0 var(--stz-space-2); color: var(--stz-text-2); font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); }
.lab-conc__bar { display: block; width: var(--w); height: var(--stz-space-4); border-radius: var(--stz-radius-pill); background: var(--stz-cta); transform-origin: 0 50%; }
.lab-conc__bar--muted { background: var(--stz-gray-300); }
.lab-cost__big { margin: 0 0 var(--stz-space-2); color: var(--stz-loss-text); font-size: var(--stz-fs-figure); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-tight); letter-spacing: var(--stz-track-figure); font-variant-numeric: tabular-nums; }
.lab-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stz-space-3); margin: 0 0 var(--stz-space-2); text-align: left; }
.lab-pair__card { padding: var(--stz-space-4); border-radius: var(--stz-radius-card); background: var(--stz-white); box-shadow: var(--stz-shadow-raised); }
.lab-pair__name { margin: 0; font-size: var(--stz-fs-title-l); font-weight: var(--stz-fw-semibold); letter-spacing: var(--stz-track-title); }
.lab-pair__kind { margin: 0 0 var(--stz-space-3); color: var(--stz-link); font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); }
.lab-pair dl { display: grid; gap: var(--stz-space-2); margin: 0; }
.lab-pair dl > div { padding: var(--stz-space-2); border-radius: var(--stz-radius-item); }
.lab-pair dl > div.is-diff { background: var(--stz-blue-tint); }
.lab-pair dt { color: var(--stz-text-2); font-size: var(--stz-fs-caption); }
.lab-pair dd { margin: 0; font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-snug); }
@media (width < 30em) { .lab-pair { gap: var(--stz-space-2); } .lab-pair__card { padding: var(--stz-space-3); } .lab-pair dl > div { padding: var(--stz-space-1); } }
.lab-mix__mag, .lab-mix__key--mag { fill: var(--stz-blue-800); background: var(--stz-blue-800); }
.lab-mix__us, .lab-mix__key--us { fill: var(--stz-cta); background: var(--stz-cta); }
.lab-mix__rest, .lab-mix__key--rest { fill: var(--stz-gray-300); background: var(--stz-gray-300); }
.lab-mix__keys { display: grid; gap: var(--stz-space-2); justify-content: center; margin: 0 0 var(--stz-space-2); padding: 0; list-style: none; text-align: left; font-size: var(--stz-fs-callout); }
.lab-mix__keys li { display: flex; align-items: center; gap: var(--stz-space-3); }
.lab-mix__key { flex: none; width: var(--stz-space-3); height: var(--stz-space-3); border-radius: calc(var(--stz-space-3) / 4); }

/* ---- 4. Close: "Every drop counts." under the bench light ---- */
.labs .lab-close { padding-top: var(--stz-space-10); padding-bottom: calc(var(--stz-section-y) * 1.25); background: radial-gradient(ellipse 55% 45% at 50% 30%, var(--stz-fill-on-dark), transparent 70%), var(--stz-black); text-align: center; }
.labs .lab-close__title { margin: 0 auto var(--stz-space-8); font-size: var(--stz-fs-display-l); line-height: var(--stz-lh-display); letter-spacing: var(--stz-track-display); }
.lab-close__dot { position: relative; } /* inline: the heading's name stays "Every drop counts." */
.labs-close-on .lab-close__dot { color: transparent; }
.lab-close__drop { position: absolute; left: 50%; bottom: .1em; width: .2em; height: .2em; margin-left: -.1em; border-radius: var(--stz-radius-pill); background: var(--stz-blue-dark); transform-origin: 50% 100%; }
.lab-close__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--stz-space-3); }
@media (width < 30em) { .lab-close__links .lab-btn { width: 100%; } }
.labs .lab-disclaimer { max-width: var(--stz-measure); margin: var(--stz-space-8) auto 0; }
.lab-splash-ring { position: absolute; width: var(--stz-space-10); height: var(--stz-space-4); margin: calc(-0.5 * var(--stz-space-4)) 0 0 calc(-0.5 * var(--stz-space-10)); border: 1px solid var(--stz-blue-dark); border-radius: var(--stz-radius-pill); pointer-events: none; }
.lab-splash-drop { position: absolute; width: var(--stz-space-2); height: var(--stz-space-2); margin: calc(-0.5 * var(--stz-space-2)) 0 0 calc(-0.5 * var(--stz-space-2)); border-radius: var(--stz-radius-pill); background: var(--stz-blue-dark); pointer-events: none; }

/* ---- Accessibility preferences (apple-hig-css 7) ---- */
@media (prefers-contrast: more) {
	.lab-tile, .lab-pill { border: 1px solid var(--stz-ring); }
	.labs .is-dark .lab-pill, .labs .lab-chip, .labs .lab-pick__q { border-color: var(--stz-gray-300); }
	.labs .lab-guess__skip, .labs .lab-list a { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { .lab-doc__mark, .lab-doc summary::after { transition: none; } }
@media (width < 18em) { /* very large text: the figure, the beaker and the steps one under the other */
	.lab-exp1 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "money" "beaker" "steps"; }
}
@media (forced-colors: active) {
	.lab-tile, .lab-doc { outline: 1px solid CanvasText; }
	.lab-pill { border-color: ButtonText; }
	.lab-pill[aria-pressed="true"], .lab-chip[aria-pressed="true"] { forced-color-adjust: none; border-color: Highlight; background: Highlight; color: HighlightText; }
	.lab-chip { border-color: ButtonText; }
	.lab-money__part i { forced-color-adjust: none; outline: 1px solid CanvasText; } /* the keys keep the canvas's colours */
	.lab-money__stage { forced-color-adjust: none; border-radius: var(--stz-radius-card); background: var(--stz-black); } /* so the drawing stays legible */
	.lab-race__bar { forced-color-adjust: none; background: CanvasText; }
	.lab-race__bar--b { background: GrayText; }
	.lab-doc__mark { forced-color-adjust: none; background: Highlight; opacity: .35; }
}