/* Theme port of prototype v3 (Phase 23): global rules scoped to .labs; the site header replaces .lab-bar. */
.labs, .labs * { box-sizing: border-box; }
.etf-site-labs-wrap > .labs { margin-block-start: 0; } /* the sprite comes first, so the flow layout's block gap would open a white seam under the header */
.labs { background: var(--stz-black); color: var(--stz-text); font-family: var(--stz-font); font-size: var(--stz-fs-body); line-height: var(--stz-lh-body); letter-spacing: var(--stz-track-body); }
/* Stazora Labs page, prototype v3 (Phase 23): global rules, acts, type, buttons, the hero (the €100 that splits) and
   the claim. Tokens from tokens.css only (SVG gradient stops excepted). Without JS everything is visible at its
   final state; start states live under html.js (hero) or a per-scene labs-<name>-on class. Only the hero holds. */
.labs { overflow-x: clip; }

.lab-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Acts: dark and light surfaces, accent lock ---- */
.labs section { --pad-x: var(--stz-space-5); position: relative; padding: var(--stz-section-y) var(--pad-x); }
.labs section > * { max-width: 68rem; margin-inline: auto; }
.labs .is-dark { background: var(--stz-black); color: var(--stz-white); color-scheme: only dark; }
.labs .is-dark a { color: var(--stz-blue-dark); }
.labs .is-light { background: var(--stz-surface); color: var(--stz-text); }
.labs .is-light a { color: var(--stz-link); }
@media (width < 48em) { .labs section { --pad-x: var(--stz-space-4); } }

/* sections whose bottom carries the next act's wave edge keep a little extra room above it */
.labs .lab-more { padding-bottom: calc(var(--stz-section-y) + var(--stz-space-4)); }

/* ---- Type rhythm ---- */
.labs h2, .labs h3 { font-weight: var(--stz-fw-semibold); text-wrap: balance; }
.labs .lab-h-sec { margin-block: 0 var(--stz-space-3); text-align: center; font-size: var(--stz-fs-display-m); line-height: var(--stz-lh-display); letter-spacing: var(--stz-track-display); }
.lab-sec__lead { margin-block: 0 var(--stz-space-9); text-align: center; text-wrap: balance; color: var(--stz-text-2); font-size: var(--stz-fs-lead); line-height: var(--stz-lh-snug); letter-spacing: var(--stz-track-lead); }
.labs h3 { margin: 0 0 var(--stz-space-3); font-size: var(--stz-fs-title-l); line-height: var(--stz-lh-title); letter-spacing: var(--stz-track-title); }
.lab-caption, .lab-card__note, .lab-disclaimer { max-width: var(--stz-measure); margin: 0; color: var(--stz-text-2); font-size: var(--stz-fs-caption); line-height: var(--stz-lh-small); letter-spacing: var(--stz-track-caption); }
.labs .is-dark .lab-disclaimer { color: var(--stz-gray-400); }
.lab-caption__prefix { margin-right: var(--stz-space-1); color: var(--stz-text); font-weight: var(--stz-fw-semibold); }
.lab-tag { display: inline-block; padding: var(--stz-space-1) var(--stz-space-3); border: 1px solid var(--stz-hairline); border-radius: var(--stz-radius-pill); color: var(--stz-text-2); font-size: var(--stz-fs-caption); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-snug); letter-spacing: var(--stz-track-small); vertical-align: middle; white-space: nowrap; }
.lab-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lab-glyph { flex: none; width: var(--stz-space-6); height: var(--stz-space-6); fill: none; stroke: var(--stz-blue-dark); stroke-linecap: round; stroke-linejoin: round; }
.lab-glyph__dot { fill: var(--stz-blue-dark); stroke: none; }
.labs .is-light .lab-glyph { stroke: var(--stz-cta); }
.labs .is-light .lab-glyph__dot { fill: var(--stz-cta); }
.labs .is-dark .lab-glyph { stroke: var(--stz-blue-dark); } /* dark tiles sit inside the light section */
.labs .is-dark .lab-glyph__dot { fill: var(--stz-blue-dark); }

/* ---- Buttons, links, press feel and focus ---- */
.labs .lab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--stz-hit); padding: 0 var(--stz-space-6); border: 1px solid var(--stz-cta); border-radius: var(--stz-radius-pill); background: var(--stz-cta); color: var(--stz-on-cta); font-weight: var(--stz-fw-regular); letter-spacing: var(--stz-track-lead); text-align: center; text-decoration: none; text-wrap: balance; } /* wraps only when it must (large text) */
.labs a.lab-btn:not(.lab-btn--outline) { color: var(--stz-on-cta); } /* beats the scoped .labs .is-light a / .is-dark a link colours */
.labs .lab-btn--outline { border-color: var(--stz-blue-dark); background: transparent; color: var(--stz-blue-dark); }
.labs .is-light .lab-btn--outline { border-color: var(--stz-link); color: var(--stz-link); }
.lab-btn, .lab-pill, .lab-doc summary { -webkit-tap-highlight-color: transparent; transition: transform var(--stz-dur-press) var(--stz-ease-press), background-color var(--stz-dur-fade) var(--stz-ease), color var(--stz-dur-fade) var(--stz-ease); }
@media (hover: hover) and (pointer: fine) {
	.labs .lab-btn:hover { background: var(--stz-cta-hover); border-color: var(--stz-cta-hover); }
	.labs .lab-btn--outline:hover { background: var(--stz-fill-on-dark); }
	.labs .is-light .lab-btn--outline:hover { background: var(--stz-tint); }
}
.lab-btn:active, .lab-pill:active { transform: scale(.97); }
.labs .lab-btn:active { background: var(--stz-cta-press); }
.labs :focus-visible { outline: 3px solid var(--stz-focus); outline-offset: 2px; border-radius: var(--stz-radius-item); }
.labs .is-dark :focus-visible { outline-color: var(--stz-white); }

/* ---- 0. Hero: pick a fund; the €100 you put in splits into what it costs and where it goes ---- */
/* z-index keeps the hero above the next section while it holds */
.lab-hero { z-index: var(--stz-z-over); display: grid; align-content: center; min-height: calc(100svh - var(--stz-bar)); isolation: isolate; }
.labs .lab-hero { padding-block: var(--stz-space-7) var(--stz-space-9); }
.lab-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 45% at 50% 55%, var(--stz-fill-on-dark), transparent 72%); pointer-events: none; }
.lab-hero__copy { display: grid; justify-items: start; gap: var(--stz-space-3); min-width: 0; }
/* one centred column (Dani, 2026-11-02): the title, then the €100 note, its legend and source; VWCE only */
.labs .lab-hero__stage { display: grid; justify-items: center; gap: var(--stz-space-6); width: 100%; max-width: 46rem; text-align: center; }
.labs .lab-hero__copy { justify-items: center; }
.labs .lab-money { width: 100%; justify-items: center; }
.labs .lab-money__stage { width: min(100%, 40rem); aspect-ratio: 2 / 1; }
.labs .lab-money__parts { justify-self: center; text-align: left; }
.labs .lab-money__src { margin-inline: auto; }
@media (width >= 80em) { .lab-hero__title { font-size: var(--stz-fs-display-l); } }
@media (height < 57em) { .labs .lab-hero { padding-block: var(--stz-space-4); } .labs .lab-hero__stage { gap: var(--stz-space-4); } .labs .lab-money__stage { width: min(100%, 32rem); } }
.lab-hero__brand { display: flex; align-items: center; gap: var(--stz-space-2); margin: 0; color: var(--stz-gray-300); font-size: var(--stz-fs-callout); font-weight: var(--stz-fw-semibold); }
.lab-hero__mark { width: .9rem; height: 1.3rem; fill: var(--stz-blue-dark); }
.lab-hero__title { margin: 0; font-size: var(--stz-fs-display-m); font-weight: var(--stz-fw-semibold); line-height: var(--stz-lh-display); letter-spacing: var(--stz-track-display); text-wrap: balance; }
.lab-money__fund { color: var(--stz-blue-dark); }
.lab-line { display: block; } /* one sentence per line, each balanced on its own */
@media (width < 24em) { .lab-hero__title { font-size: var(--stz-fs-display-s); } }
/* the picker: a search field and the funds in the lab as pills (plain links without JS) */
/* the €100: one block that splits by area (drawn on a canvas), a legend under it, the sources under that */
.lab-money { display: grid; gap: var(--stz-space-4); margin: 0; min-width: 0; }
.lab-money__stage { position: relative; display: none; aspect-ratio: 16 / 10; } /* the note (2.25 : 1) and room to split */
.js .lab-money:not(.is-off) .lab-money__stage { display: block; } /* room kept from the first paint */
.lab-money__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .lab-money:not(.is-off) .lab-money__parts { opacity: 0; } /* shown as the split lands */
.lab-money__hint { position: absolute; top: calc(100% + var(--stz-space-4)); left: 0; right: 0; color: var(--stz-gray-300); font-size: var(--stz-fs-callout); pointer-events: none; } /* where the legend lands */
.lab-money__parts { display: grid; gap: var(--stz-space-2); margin: 0; padding: 0; list-style: none; }
.lab-money__part { display: grid; grid-template-columns: var(--stz-space-4) minmax(0, 1fr); align-items: baseline; gap: var(--stz-space-3); color: var(--stz-gray-300); font-size: var(--stz-fs-callout); line-height: var(--stz-lh-snug); }
.lab-money__part b { color: var(--stz-white); font-size: var(--stz-fs-body); font-variant-numeric: tabular-nums; }
.lab-money__part i { width: var(--stz-space-3); height: var(--stz-space-3); border-radius: calc(var(--stz-space-3) / 4); background: var(--key); }
.lab-money__part[data-part="cost"] { --key: var(--stz-loss); }
.lab-money__part[data-part="top"] { --key: var(--stz-white); }
.lab-money__part[data-part="rest"] { --key: var(--stz-blue-dark); }
.lab-money__part--soon { grid-template-columns: minmax(0, 1fr); }
.lab-money__part[hidden] { display: none; }
.lab-money__src { max-width: var(--stz-measure); color: var(--stz-gray-400); font-size: var(--stz-fs-caption); line-height: var(--stz-lh-small); text-wrap: pretty; }
.lab-money__next { margin: var(--stz-space-2) 0 0; }

/* start states: hidden from the first paint, never stuck (head script, watchdog, labs-hero-off on failure) */
.js:not(.labs-hero-off) .lab-hero__copy > * { opacity: .01; transform: translateY(var(--stz-space-4)); } /* .01: counts as painted */

/* ---- 1. The claim: one sentence to judge before reading on, answered by the sum printed under it ---- */
.labs .lab-claim { text-align: center; }
.labs .lab-claim__text { margin: 0 auto var(--stz-space-6); max-width: 22ch; font-size: var(--stz-fs-display-m); line-height: var(--stz-lh-display); letter-spacing: var(--stz-track-display); text-wrap: balance; }
html:not(.js) .lab-claim__ask { display: none; }
.labs .lab-claim__ask { margin: 0 auto var(--stz-space-4); color: var(--stz-gray-300); font-size: var(--stz-fs-lead-s); }
.labs .lab-claim .lab-guess { margin-bottom: var(--stz-space-8); }
.labs .lab-claim .lab-exp1 { max-width: 34rem; }
.labs .lab-claim .lab-guess__verdict { max-width: 34rem; }
.labs .lab-claim__more { margin: var(--stz-space-6) auto 0; }
/* the experiment's pieces on black */
.labs .is-dark .lab-pill { border-color: var(--stz-line-on-dark); background: var(--stz-fill-on-dark); color: var(--stz-white); }
@media (hover: hover) and (pointer: fine) { .is-dark .lab-pill:hover { border-color: var(--stz-gray-400); } }
.labs .is-dark .lab-guess__skip { color: var(--stz-blue-dark); }
.labs .is-dark .lab-exp1 { --step-on: var(--stz-white); --step-off: var(--stz-gray-500); --loss: var(--stz-loss); }
.labs .is-dark .lab-exp1__state { color: var(--stz-gray-400); }
.labs .is-dark .lab-tag { border-color: var(--stz-line-on-dark); color: var(--stz-gray-300); }
.labs .is-dark .lab-beaker__mark { stroke: var(--stz-gray-400); }
.labs .is-dark .lab-beaker__label { fill: var(--stz-gray-400); }