/* =========================================================================
   netex · engines/page-xray.css · «X-ray this page» (bible S18; copy 11 web-apps s2)
   Loaded in <head> by the templates that mount it (netex_web_proof_use_css), so the text-first
   panel and the switch are final at first paint; the engine skips its own injection then.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- the switch (hero) --------------------------------------------------- */
.wpx { display: grid; gap: var(--s-2); justify-items: start; }
.wpx-switch {
	gap: var(--s-4);
	min-height: 56px;
	padding: var(--s-2) var(--s-5) var(--s-2) var(--s-3);
	border: var(--bw-2) solid var(--fg);
	background: var(--bg);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--dur-ui) var(--ease-mech), color var(--dur-ui) var(--ease-mech);
}
.wpx-switch .nx-switch__track { width: 52px; height: 28px; }
.wpx-switch .nx-switch__thumb { width: 19px; height: 19px; }
.wpx-switch[aria-checked="true"] .nx-switch__thumb { transform: translateX(24px); }
.wpx-switch__text { display: grid; gap: 2px; }
.wpx-switch__label { font: var(--w-strong) 1.0625rem/1.15 var(--f-sans); color: var(--fg); }
.wpx-switch__state { font: 500 var(--t-micro)/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.wpx-switch[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); --fg: var(--paper); --fg-2: var(--paper-72); --bg: var(--ink); --sig: var(--cyan); --focus: var(--cyan); }
@media (hover: hover) { .wpx-switch:hover { background: var(--bg-2); } .wpx-switch[aria-checked="true"]:hover { background: var(--ink-2); } }
.wpx-switch:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: var(--focus-offset); }
.wpx-switch:disabled { cursor: progress; }
.no-js .wpx-switch, html:not(.js) .wpx-switch { display: none; }
.wpx-micro { margin-top: 0; }

/* ---- the panel: a ruled section without JS ----------------------------------- */
.wpx-panel {
	--bg: var(--paper-2); --bg-2: var(--paper); --fg: var(--ink); --fg-2: var(--steel-dark); --fg-3: var(--steel-dark);
	--rule: var(--rule-light); --link: var(--cyan-deep); --focus: var(--indigo); --sig: var(--cyan-deep);
	background: var(--bg);
	color: var(--fg);
	color-scheme: light;
}
.wpx-panel__in { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; padding-block: var(--sec-y-tight); }
.wpx-panel__head { display: flex; align-items: flex-start; gap: var(--s-4); }
.wpx-panel__kicker { margin-bottom: var(--s-2); }
.wpx-panel__heading { flex: 1; min-width: 0; }
.wpx-panel__title { font-size: var(--t-h3); font-weight: var(--w-h3); line-height: 1.1; max-width: 22ch; }
.wpx-panel__close { flex: none; margin-left: auto; }
.wpx-panel__intro { margin-top: var(--s-3); font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); max-width: 52ch; }
.wpx-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.wpx-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.wpx-row__code {
	align-self: start;
	justify-self: start;
	padding: 3px 6px;
	background: var(--ink);
	color: var(--paper);
	font: 600 .6875rem/1.2 var(--f-mono);
	letter-spacing: .04em;
}
.wpx-row__body { display: grid; gap: var(--s-1); min-width: 0; }
.wpx-row__label { font: var(--w-strong) .9375rem/1.3 var(--f-sans); }
.wpx-row__value { font: 500 .8125rem/1.45 var(--f-mono); color: var(--fg); overflow-wrap: anywhere; }
.wpx-row__value.is-pending { color: var(--fg-2); }
.no-js .wpx-row__value.is-pending, html:not(.js) .wpx-row__value.is-pending { display: none; }
/* without JS nothing is measured in the browser: the list still says what the X-ray reads and shows the
   server's own facts, but never claims a live reading */
html:not(.js) .wpx-panel__intro, html:not(.js) .wpx-row__src--live { display: none; }
html:not(.js) .wpx-panel__in { padding-bottom: calc(var(--sec-y-tight) + var(--ch-v)); } /* the next section's 47° notch overlaps */
.wpx-row__why { font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); }
.wpx-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); }
.wpx-row__src { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); border: var(--bw) solid var(--fg-3); padding: 1px 5px; }
.wpx-row__jump { min-height: 36px; }
.wpx-panel__disc { margin-top: var(--s-4); font: 400 var(--t-small)/1.5 var(--f-sans); color: var(--fg-2); }
@media (min-width: 1024px) {
	.no-js .wpx-list, html:not(.js) .wpx-list { columns: 2; column-gap: var(--s-8); }
	.no-js .wpx-row, html:not(.js) .wpx-row { break-inside: avoid; }
}

/* ---- with JS: the side panel the switch opens (bottom sheet on phones) ------------ */
.js .wpx-panel {
	position: fixed;
	z-index: calc(var(--z-header) - 1);
	right: 0;
	bottom: 0;
	left: 0;
	max-height: min(58vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: var(--bw-2) solid var(--ink);
	box-shadow: 0 -10px 0 rgb(8 9 14 / .08);
	visibility: hidden;
	transform: translateY(102%);
	transition: transform var(--dur-cut) var(--ease-cut), visibility 0s linear var(--dur-cut);
}
.js .wpx-panel.is-open { visibility: visible; transform: none; transition-delay: 0s; }
.js .wpx-panel__in { width: auto; padding: var(--s-5) var(--margin) var(--s-6); }
.js .wpx-panel__title { font-size: var(--t-h4); }
.js .wpx-list { columns: auto; }
@media (min-width: 900px) {
	.js .wpx-panel {
		top: 0;
		padding-top: var(--header-h);
		left: auto;
		width: min(420px, 36vw);
		max-height: none;
		border-top: 0;
		border-left: var(--bw-2) solid var(--ink);
		box-shadow: -10px 0 0 rgb(8 9 14 / .08);
		transform: translateX(102%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}
html.rm .wpx-panel { transition: none; }

@media print { .wpx-panel, .wpx-layer, .wpx-scan, .wpx { display: none !important; } }

/* ---- the scan line: one 2px N-gradient line at 47°, once ----------------------- */
.wpx-scan { position: fixed; inset: 0; z-index: var(--z-cut-edge); pointer-events: none; overflow: hidden; }
.wpx-scan > i { position: absolute; left: 0; top: 0; height: 2px; background: var(--n-grad); transform-origin: 50% 50%; will-change: transform; }

/* ---- pins ------------------------------------------------------------------------------ */
.wpx-layer { position: absolute; left: 0; top: 0; width: 100%; z-index: var(--z-stage-ui); pointer-events: none; overflow: hidden; contain: layout style; }
.wpx-pin {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: stretch;
	max-width: min(78vw, 360px);
	border: var(--bw) solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	font: 500 .75rem/1 var(--f-mono);
	white-space: nowrap;
}
.wpx-pin::after {
	/* the hairline leader: a short 47° tick down to the element's corner */
	content: "";
	position: absolute;
	left: 6px;
	top: 100%;
	width: 1px;
	height: 12px;
	background: var(--ink);
	transform: skewX(-43deg);
	transform-origin: 0 0;
}
.wpx-pin.is-dark { border-color: var(--cyan); }
.wpx-pin.is-dark::after { background: var(--cyan); }
.wpx-pin__c { padding: 5px 6px; background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: .04em; }
.wpx-pin.is-dark .wpx-pin__c { background: var(--cyan); color: var(--ink); }
.wpx-pin__v { padding: 5px 7px; overflow: hidden; text-overflow: ellipsis; }
.wpx-pin.is-in { animation: wpx-stamp var(--dur-stamp) var(--ease-stamp) both; }
.wpx-pin.is-flash { animation: wpx-flash 720ms steps(6, jump-none) both; }
@keyframes wpx-stamp { from { opacity: 0; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes wpx-flash { 0%, 34%, 68% { background: var(--molten); } 17%, 51%, 100% { background: var(--paper); } }
html.rm .wpx-pin { animation: none !important; }

/* the measured elements, outlined while the X-ray is on */
.wpx-target { outline: 1px dashed var(--wpx-c, var(--indigo)); outline-offset: 4px; }

} /* end @layer pages */