/* =========================================================================
   netex · pages/scenarios-b.css (scenarios-b · the seven part-B scenario pages)
   Loaded after pages/scenario.css (owned by scenarios-a) only on: hear-that, the-tree-that-texts,
   squat-to-unlock, find-the-mistake, shade-mirror, wind-window, pollen-radar.
   Holds: the code-drawn overlays printed on the LCP posters, and the maths typesetting shared by the
   Find the Mistake poster and its engine. Running-state UI lives in assets/css/engines/{engine}.css.
   Role tokens only; raw colour only inside drawings.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- a number range never breaks after its en dash («3–8%», «+0,1–0,3»): netex_scenarios_b_nw() ---- */
.sb-nw { white-space: nowrap; }

/* ---- lineage: a long source label («δήλωση εταιρείας · Ναυτεμπορική (Rakuten Viber)») wraps inside the
   column instead of running past the screen edge on a 360 px phone ---- */
.sx-lineage__label { max-width: 100%; white-space: normal; text-align: left; }

/* ---- bridge links that wrap on a phone («Ραντεβού συνεργείου χωρίς χαμένες κλήσεις: AI Ρεσεψιόν», «Πρότυπο
   Εμπιστοσύνης AI: οι κόκκινες γραμμές μας») read left-aligned, like the one-line link beside them; the button
   base centres its label, which set a two-line link adrift in the middle of the column ---- */
.sx-bridge__links .nx-btn--text { justify-content: flex-start; text-align: left; }

/* ---- the launch strip's mono line («Χάρτης του Ηρακλείου · αλλάξτε το όριο…») wraps in even lines, never
   leaving one word alone on the last line (our metas are the longest of the sixteen pages) ---- */
.sx-launch__meta { text-wrap: balance; }

/* ---- the hero's last line clears the next section's 47° notch -------------------------------
   (.ch-tl pulls the next section up by --ch-v, ~108 px at 1440, more than the hero's tight bottom
   padding: the proof labels under the facts were being cut by the Paper-2 edge). */
.sx-hero { padding-bottom: max(var(--sec-y-tight), calc(var(--ch-v) + var(--s-6))); }

/* ---- phones: the launch strip sits under the poster instead of over most of it ----
   (a 16:9 poster is ~200 px tall at 360 px; the strip would hide the very picture it launches).
   The overlay keeps the poster's own box, so every code-drawn overlay stays registered. */
@media (max-width: 599px) {
	.sx-demo:not(.is-running):not(.is-error) .sx-stage { aspect-ratio: auto; display: grid; }
	.sx-demo:not(.is-running):not(.is-error) .sx-stage__poster { position: relative; inset: auto; aspect-ratio: var(--demo-ar, 16 / 9); }
	.sx-demo:not(.is-running):not(.is-error) .sx-stage__overlay { inset: 0 0 auto 0; aspect-ratio: var(--demo-ar, 16 / 9); }
	.sx-demo:not(.is-running):not(.is-error) .sx-launch { position: relative; inset: auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 8px; padding: 12px calc(var(--ch-sheet) + 8px) 14px 12px; background: var(--ink); }
	/* flex: none: the shared rule's flex-basis (12ch) would become a 72 px height in this column */
	.sx-demo:not(.is-running):not(.is-error) .sx-launch__meta { flex: none; max-width: 40ch; text-align: left; }
}

/* ---- maths typesetting (Find the Mistake) -------------------------------- */
.mb-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .14em; line-height: 1.12; }
.mb-num { padding: 0 .18em .06em; border-bottom: .065em solid currentColor; }
.mb-den { padding: .06em .18em 0; }
.mb-frac--s { font-size: .7em; margin: 0 .06em; }
.mb-sqrt { display: inline-grid; grid-template-columns: .62em auto; align-items: stretch; vertical-align: middle; margin-left: .06em; }
.mb-sqrt__sign {
	font-size: 0;
	color: inherit;
	background: currentColor;
	/* a stretchy radical: the tick, the descent, the long rise meeting the overbar */
	clip-path: polygon(0 60%, 26% 50%, 50% 84%, 90% 0, 100% 0, 100% 7%, 55% 100%, 45% 100%, 21% 62%, 5% 66%);
}
.mb-sqrt__rad { padding: .1em .12em 0 .06em; border-top: .065em solid currentColor; }
.mb-lim { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-style: normal; line-height: 1; margin-right: .1em; }
.mb-lim__sub { margin-top: .12em; font-size: .6em; white-space: nowrap; font-style: italic; }
.mb-word { font-family: var(--f-sans); font-style: normal; font-size: .84em; font-weight: 500; }
.mb-then { font-style: normal; margin: 0 .2em; }

/* ---- Find the Mistake · the six lines on the photo's blank whiteboard ------ */
.sb-wb { position: absolute; left: 36.2%; top: 17.1%; width: 29.7%; height: 31.8%; container-type: size; }
/* the board is split in two, as a teacher would: the problem across the top, lines 1–3 on the left,
   4–6 on the right (one tall column ran off the bottom of the board) */
.sb-wb__in {
	position: absolute;
	inset: 7% 5% 9% 6%;
	display: grid;
	grid-template-columns: max-content max-content;
	grid-template-rows: auto repeat(3, minmax(0, 1fr));
	justify-content: space-between;
	column-gap: 5%;
	align-items: center;
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 500;
	font-size: min(3.25cqw, 6.2cqh);
	line-height: 1.02;
	color: var(--indigo);
	opacity: .88;
}
.sb-wb__problem { grid-column: 1 / -1; font-size: .92em; opacity: .8; white-space: nowrap; }
.sb-wb__line { display: flex; align-items: center; gap: .45em; white-space: nowrap; min-width: 0; }
.sb-wb__line:nth-child(2) { grid-area: 2 / 1; }
.sb-wb__line:nth-child(3) { grid-area: 3 / 1; }
.sb-wb__line:nth-child(4) { grid-area: 4 / 1; }
.sb-wb__line:nth-child(5) { grid-area: 2 / 2; }
.sb-wb__line:nth-child(6) { grid-area: 3 / 2; }
.sb-wb__line:nth-child(7) { grid-area: 4 / 2; }
.sb-wb .mb-frac { line-height: 1.02; }
.sb-wb__no { font: 600 .66em/1 var(--f-mono); opacity: .55; min-width: 1em; }
.sb-wb__clock { position: absolute; right: 0; top: -4%; font-family: var(--f-mono); font-style: normal; font-weight: 600; font-size: 1.6em; line-height: 1; color: var(--molten-deep); }
.sb-wb .mb-word { font-size: .78em; }


/* ---- Hear That? · a still spectrogram band over the workshop floor -------- */
.sb-spec {
	position: absolute;
	left: 0;
	bottom: 12%;
	width: 52%;
	padding: 10px 14px 10px 3.4em;
	background: rgb(8 9 14 / .78);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
}
.sb-spec__svg { display: block; width: 100%; height: auto; aspect-ratio: 480 / 84; overflow: visible; stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: square; }
.sb-spec__k, .sb-spec__b { position: absolute; left: 12px; font: 500 .625rem/1 var(--f-mono); color: var(--paper-72); }
.sb-spec__k { top: 10px; }
.sb-spec__b { bottom: 10px; }
.sb-spec::before { content: ""; position: absolute; left: 2.9em; top: 10px; bottom: 10px; width: 1px; background: rgb(241 238 230 / .35); }
/* phones: the band rises clear of the «Εικόνα AI» chip in the bottom-left corner (it is never covered) */
@media (max-width: 599px) { .sb-spec { bottom: 21%; width: 64%; padding: 6px 10px 6px 2.9em; } .sb-spec__k { top: 6px; } .sb-spec__b { bottom: 6px; } }


/* ---- The Tree That Texts · a notification in the sky above the tree ------- */
.sb-bubble {
	position: absolute;
	left: 9%;
	top: 9%;
	max-width: 70%;
	display: grid;
	gap: 4px;
	padding: 10px 14px 12px;
	background: var(--paper);
	color: var(--ink);
	border-radius: 14px 14px 14px 3px;
	box-shadow: 4px 4px 0 var(--indigo);
}
.sb-bubble::after { content: ""; position: absolute; left: 18px; bottom: -14px; width: 14px; height: 14px; background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); }
.sb-bubble__who { font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .04em; color: var(--indigo); }
.sb-bubble__t { font-weight: 500; color: var(--steel-dark); margin-left: .4em; }
.sb-bubble__txt { font: 650 clamp(.95rem, .8rem + .6vw, 1.2rem)/1.25 var(--f-sans); letter-spacing: -.005em; }


/* ---- Wind Window · Crete in the drawing register over the meltemi sea ------ */
.sb-crete { position: absolute; left: 4%; top: 7%; width: 44%; }
.sb-crete__svg { display: block; width: 100%; height: auto; aspect-ratio: 300 / 120; overflow: visible; }
.sb-crete__land { fill: rgb(8 9 14 / .42); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: miter; }
.sb-crete__wind { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: square; }
/* phones: a little larger, still top-left, clear of the «Εικόνα AI» chip in the bottom-left corner */
@media (max-width: 599px) { .sb-crete { top: 6%; left: 4%; width: 54%; } }


/* ---- Do 20 Squats · the drawn skeleton and «0/20» on the kiosk's black screen ---- */
.sb-kiosk {
	position: absolute;
	left: 72.57%;
	top: 32.29%;
	width: 10.02%;
	height: 34.9%;
	clip-path: polygon(0 8.6%, 100% 0, 100% 97.8%, 0 100%);
	container-type: inline-size;
}
.sb-kiosk__svg { position: absolute; left: 12%; right: 12%; top: 26%; bottom: 4%; width: 76%; height: 70%; overflow: visible; }
.sb-kiosk__bone { fill: none; stroke: var(--paper); stroke-width: 3.2; stroke-linecap: square; }
.sb-kiosk__thigh { fill: none; stroke: var(--cyan); stroke-width: 3.6; stroke-linecap: square; }
.sb-kiosk__head { fill: none; stroke: var(--paper); stroke-width: 3.2; }
.sb-kiosk__depth { stroke: rgb(241 238 230 / .45); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sb-kiosk__count { position: absolute; left: 0; right: 0; top: 13%; text-align: center; font: 600 22cqw/1 var(--f-mono); letter-spacing: -.04em; color: var(--paper); }


/* ---- Shade Mirror · the 47° seam of the split (the poster's own cut: before | Copper Sunset) ---- */
.sb-shade { position: absolute; inset: 0; overflow: hidden; }
.sb-shade__seam {
	position: absolute;
	left: calc(53% - 100%);
	top: 44%;
	width: 200%;
	height: 1px;
	background: rgb(241 238 230 / .75);
	transform: rotate(-47deg);
	transform-origin: 50% 50%;
	/* the cut stays off the face: drawn only where it crosses the hair and the background */
	-webkit-mask-image: linear-gradient(90deg, #000 0 37%, transparent 41% 59%, #000 63% 100%);
	mask-image: linear-gradient(90deg, #000 0 37%, transparent 41% 59%, #000 63% 100%);
}
.sb-shade__tag {
	position: absolute;
	padding: 3px 7px;
	background: var(--ink-2);
	color: var(--paper);
	font: 600 .6875rem/1.2 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}
.sb-shade__tag--before { left: 5%; top: 31%; }
.sb-shade__tag--after { right: 4%; top: 53%; }
.sb-shade__tag--after::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; background: #B4532A; /* the shade's own colour: data, like the swatches */ vertical-align: -.05em; }
@media (max-width: 599px) { .sb-shade__tag--after { top: 47%; } }


/* ---- running demos that already say where their example data comes from, in context (Wind Window's
   forecast strip, the tree's first note in the chat): the page-level note under the stage would repeat it
   word for word, so it steps aside while the demo runs (it is back on the poster) ---- */
.sx-demo.wg-host.is-running .sx-demo__notes,
.sx-demo.ct-host.is-running .sx-demo__notes { display: none; }

}