/* =========================================================================
   netex · engines/bb-slider.css · Black Box 47° before/after slider (bible S15, §9)
   Loaded in <head> on /proof/ and the case pages, so the frozen midpoint is final at first paint.
   The clip is pure CSS: the seam crosses mid-height at x = --v · width; for the 1200×900 grid the
   47° run from mid-height to the top edge is 0.3497 of the width (--k); 0.4664 for the square crop.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.bb { --v: .5; --k: .3497; position: relative; margin: 0; display: grid; gap: var(--s-3); }
.bb__stage {
	position: relative;
	aspect-ratio: 1200 / 900;
	overflow: hidden;
	background: var(--ink);
	outline: var(--bw) solid var(--rule);
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.bb__layer { position: absolute; inset: 0; }
.bb__layer > svg { display: block; width: 100%; height: 100%; }
.bb__layer--before { clip-path: polygon(0 0, calc((var(--v) + var(--k)) * 100%) 0, calc((var(--v) - var(--k)) * 100%) 100%, 0 100%); }
.bb.is-anim .bb__layer--before { transition: clip-path 480ms var(--ease-cut); }
.bb.is-anim .bb__seam, .bb.is-anim .bb__handle { transition: left 480ms var(--ease-cut); }

/* the seam: an N-bar at 47° */
.bb__seam {
	position: absolute;
	z-index: 2;
	left: calc(var(--v) * 100%);
	top: 50%;
	width: 5px;
	height: 137%;
	background: var(--n-grad);
	transform: translate(-50%, -50%) rotate(43deg);
	pointer-events: none;
}
.bb__handle {
	position: absolute;
	z-index: 3;
	left: calc(var(--v) * 100%);
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: var(--bw-2) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	transform: translate(-50%, -50%);
	cursor: ew-resize;
	touch-action: none;
}
.bb__grip { width: 18px; height: 12px; background:
	linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat; position: relative; }
.bb__grip::before, .bb__grip::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; }
.bb__grip::before { left: 0; transform: translateY(-50%) rotate(45deg); }
.bb__grip::after { right: 0; transform: translateY(-50%) rotate(-135deg); }
.bb__handle:focus-visible { outline: var(--bw-focus) solid var(--cyan); outline-offset: 3px; }
.bb[data-frozen] .bb__stage { cursor: default; }
.bb:not([data-frozen]) .bb__stage { cursor: ew-resize; }
.bb__tag {
	position: absolute;
	z-index: 2;
	top: 10px;
	padding: 2px 6px;
	background: var(--ink);
	color: var(--paper);
	font: 500 .6875rem/1.3 var(--f-mono);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	transition: opacity var(--dur-ui) var(--ease-mech);
	pointer-events: none;
}
.bb__tag--before { display: none; }
.bb__tag--after { right: 10px; background: var(--cyan); color: var(--ink); }

/* caption bar: label · buttons · proof labels */
.bb__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.bb__label { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.bb__btns { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.bb__btns .nx-btn--secondary[aria-pressed="true"]::after { background: var(--bg-2); }
.bb__labels { margin-left: auto; }
.bb__rm { display: none; flex-basis: 100%; font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }

/* reduced motion: the two drawings side by side (stacked on phones), no clip, no seam */
html.rm .bb__stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); aspect-ratio: auto; overflow: visible; background: none; outline: 0; }
html.rm .bb__layer { position: relative; inset: auto; aspect-ratio: 1200 / 900; outline: var(--bw) solid var(--rule); }
html.rm .bb__layer--before { clip-path: none; order: -1; }
html.rm .bb__seam, html.rm .bb__handle, html.rm .bb__tag, html.rm .bb__btns .nx-btn--secondary { display: none !important; }
html.rm .bb__rm { display: block; }
@media (max-width: 767px) { html.rm .bb__stage { grid-template-columns: 1fr; } }

/* phones: the artefact zone only (x 40–720, y 150–830 of the 1200×900 grid) in a square, set by CSS from
   the first paint (the engine never changes the layout: no shift when it wakes up). The right-hand text of
   every drawing is already in the HTML; «Μεγέθυνση σχεδίου» opens the whole drawing. */
@media (max-width: 767px) {
	.bb { --k: .4664; }
	.bb > .bb__stage { aspect-ratio: 1 / 1; }
	.bb > .bb__stage .bb__layer { overflow: hidden; }
	.bb > .bb__stage .bb__layer > svg { position: absolute; left: -5.882%; top: -22.059%; width: 176.471%; height: 132.353%; max-width: none; }
	.bb > .bb__stage .bb__seam { height: 150%; }
	html.rm .bb > .bb__stage .bb__layer { aspect-ratio: 1 / 1; }
}

/* the full drawing, on phones */
.bb__zoom { min-height: 40px; }
@media (min-width: 768px) { .bb__zoom { display: none; } }
/* JS-only controls: never shown without JS; with JS they take their place at first paint */
html:not(.js) .bb__btns { display: none; }
.bb-zoom { width: min(100vw - 2 * var(--s-3), 1200px); max-width: none; max-height: calc(100svh - 2 * var(--s-3)); padding: 0; border: var(--bw-2) solid var(--ink); background: var(--paper); color: var(--ink); overflow: hidden; }
.bb-zoom::backdrop { background: rgb(8 9 14 / .82); }
.bb-zoom__close { position: sticky; top: 0; z-index: 2; margin: var(--s-2) var(--s-2) 0 auto; display: flex; background: var(--paper-2); color: var(--ink); border-color: var(--rule-light); }
.bb-zoom__pane { overflow: auto; max-height: calc(100svh - 2 * var(--s-3) - 60px); overscroll-behavior: contain; }
.bb-zoom__stage { width: 1100px; max-width: none; --k: .3497; }
.bb-zoom__stage .bb__layer--before { clip-path: polygon(0 0, calc((var(--v) + var(--k)) * 100%) 0, calc((var(--v) - var(--k)) * 100%) 100%, 0 100%); }
html.rm .bb-zoom__stage { width: 100%; }

@media print {
	.bb__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: auto; background: none; }
	.bb__layer { position: relative; aspect-ratio: 1200 / 900; }
	.bb__layer--before { clip-path: none; order: -1; }
	.bb__seam, .bb__handle, .bb__btns, .bb__tag { display: none !important; }
}

} /* end @layer pages */