/* =========================================================================
   netex · pages/proof.css · /proof/ (bible §7.17, S15; copy 11 proof)
   Ink hero + index · Paper legend · Paper-2 Black Boxes · Ink demos (index + viewer) ·
   Paper open files (drafting table, opening in place) · Indigo CTA.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero ---------------------------------------------------------------------------- */
.pf-hero { overflow: hidden; isolation: isolate; }
.pf-seam { position: absolute; z-index: -1; left: 54%; bottom: -12%; width: 2px; height: 160%; background: var(--n-grad); transform-origin: 50% 100%; transform: rotate(43deg); opacity: .5; pointer-events: none; }
.pf-hero__grid { row-gap: var(--s-8); align-items: end; }
.pf-hero__h1 { font-size: var(--t-h4); font-weight: var(--w-strong); line-height: 1.25; letter-spacing: 0; max-width: 34ch; color: var(--fg); }
.pf-hero__display { margin-top: var(--s-4); font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 14ch; text-wrap: balance; }
.pf-hero__sub { margin-top: var(--s-5); color: var(--fg-2); max-width: 48ch; }
/* the index is a sheet laid over the seam: the 47° line runs behind it, never through its words */
.pf-index { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); background: var(--bg); }
.pf-index__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 88px; padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); color: var(--fg); text-decoration: none; transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech); }
.pf-index__count { font: 600 clamp(2.25rem, 1.6rem + 2vw, 3.5rem)/1 var(--f-mono); letter-spacing: -.04em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.pf-index__body { display: grid; gap: var(--s-1); }
.pf-index__title { font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.pf-index__line { font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.pf-index__arrow { width: 20px; height: 20px; transition: transform var(--dur-ui) var(--ease-mech); }
.pf-index__row:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .pf-index__row:hover { background: var(--bg-2); padding-left: var(--s-3); } .pf-index__row:hover .pf-index__arrow { transform: translateY(3px); } }
@media (min-width: 1024px) {
	.pf-hero__text { grid-column: 1 / span 7; }
	.pf-index { grid-column: 8 / -1; align-self: end; }
}

/* ---- s2 legend ---------------------------------------------------------------------------- */
.pf-legend__grid { row-gap: var(--s-6); }
.pf-legend__note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--fg-2); max-width: 40ch; }
.pf-legend__list { display: grid; margin: 0; border-bottom: var(--bw) solid var(--rule); }
.pf-legend__row { display: grid; gap: var(--s-2) var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.pf-legend__row dt { display: flex; }
.pf-legend__row dd { margin: 0; font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.5; max-width: 56ch; }
@media (min-width: 768px) { .pf-legend__row { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (min-width: 1024px) { .pf-legend__head { grid-column: 1 / span 4; } .pf-legend__list { grid-column: 6 / -1; } }

/* ---- s3 real projects: Black Box frames --------------------------------------------------------- */
.pf-anchor { position: absolute; top: calc(-1 * var(--header-h)); }
.pf-cases { display: grid; gap: var(--s-7) var(--gutter); }
.pf-case { position: relative; display: grid; gap: var(--s-4); align-content: start; padding: var(--s-4); border: var(--bw) solid var(--ink); background: var(--paper); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.pf-case__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--rule); }
.pf-case__id { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg); }
.pf-case__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pf-case__text { display: grid; gap: var(--s-3); }
.pf-case__text .nx-eyebrow { margin-bottom: 0; }
.pf-case__title { font-size: var(--t-h3); line-height: 1.1; max-width: 24ch; }
.pf-case__title a { color: inherit; text-decoration: none; }
.pf-case__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.pf-case__line { font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.5; max-width: 52ch; }
.pf-case__status { font: 500 .8125rem/1.5 var(--f-mono); color: var(--fg-2); max-width: 60ch; }
/* Field Case 01: the numbers are pending — said plainly, with how they will be verified */
.pf-case__pending { display: grid; gap: var(--s-3); padding: var(--s-4); border: var(--bw) dashed var(--fg-3); }
.pf-case__pending .pf-case__status { color: var(--fg); }
.pf-case__method { font: 400 var(--t-small)/1.55 var(--f-sans); color: var(--fg-2); max-width: 60ch; }
.pf-case__k { display: block; margin-bottom: 2px; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.pf-case__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
/* «Αυτό το site»: this very visit, measured now (engine page-xray, readout mode). A small instrument
   screen inside the paper frame; hidden without JS, because nothing is measured then. */
.wpx-readout {
	--fg: var(--paper); --fg-2: var(--paper-72); --fg-3: var(--steel); --rule: var(--rule-dark);
	display: grid;
	gap: var(--s-3);
	padding: var(--s-4);
	background: var(--ink);
	color: var(--fg);
}
html:not(.js) .wpx-readout { display: none; }
.wpx-readout__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); font: 400 .8125rem/1.45 var(--f-sans); color: var(--fg-2); }
.wpx-readout__tag { cursor: default; border-color: var(--cyan); color: var(--cyan); }
.wpx-readout__list { display: grid; margin: 0; }
.wpx-readout__row { display: grid; gap: 2px var(--s-4); padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); }
.wpx-readout__row dt { display: flex; align-items: baseline; gap: var(--s-2); font: 400 .8125rem/1.35 var(--f-sans); color: var(--fg-2); }
.wpx-readout__code { flex: none; min-width: 2.6rem; padding: 1px 5px; background: var(--cyan); color: var(--ink); font: 700 .6875rem/1.3 var(--f-mono); text-align: center; }
.wpx-readout__row dd { min-height: 2.8em; margin: 0; font: 500 .875rem/1.4 var(--f-mono); color: var(--fg); overflow-wrap: anywhere; } /* two lines kept: a reading never moves the page */
.wpx-readout:not([data-wpx-ready]) .wpx-readout__row dd { color: var(--fg-3); }
@media (min-width: 640px) { .wpx-readout__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; } }

.pf-case--next { background: transparent; border-style: dashed; }
/* the next file: the Black Box form, blank — its id and its chapters, waiting for data */
.pf-next__slot { position: relative; display: grid; align-content: center; gap: var(--s-4); padding: var(--s-5); border: var(--bw) dashed var(--fg-3); overflow: hidden; isolation: isolate; }
.pf-next__x { position: absolute; z-index: -1; left: 72%; top: 50%; width: 4px; height: 160%; background: var(--n-grad); opacity: .28; transform: translate(-50%, -50%) rotate(43deg); }
.pf-next__id { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg); }
.pf-next__form { display: grid; margin: 0; padding: 0; list-style: none; }
.pf-next__form li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: end; gap: var(--s-3); padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); }
.pf-next__k { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.pf-next__blank { height: 0; margin-bottom: .3em; border-bottom: var(--bw) dashed var(--fg-3); }
@media (min-width: 1024px) {
	.pf-cases { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.pf-case { grid-column: span 6; }
	.pf-case--next { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-6); align-items: center; }
	.pf-case--next .pf-case__head { grid-column: 1 / -1; }
	.pf-next__slot { max-height: none; }
}

/* ---- s4 demos: index + viewer ------------------------------------------------------------------- */
.pf-demos__list { border-bottom: var(--bw) solid var(--rule); }
.pf-demo { position: relative; }
.pf-demo__row { padding-right: var(--s-3); }
.pf-demo__thumb { display: block; }
.pf-demo__thumb .nx-media { width: 96px; aspect-ratio: 4 / 3; }
.pf-demo__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* «Εικόνα AI» stays on every AI-made still, even a 96 px thumbnail (static text: it sits inside a link) */
.pf-demo__thumb .nx-ailabel { left: 3px; bottom: 3px; }
.pf-demo__thumb .nx-ailabel .nx-label { min-height: 0; padding: 1px 3px; font-size: .5rem; letter-spacing: .04em; }
.nx-ailabel--static .nx-label { cursor: default; }
.pf-demo__cta { color: var(--link); }
/* the proof label, set in the row (static: the legend above explains it) */
.pf-demo__chip { grid-area: label; justify-self: start; align-self: start; min-height: 22px; cursor: inherit; }
.pf-demos__item .nx-media { height: 100%; }
.pf-demos__cap { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 2; max-width: calc(100% - 2 * var(--s-4)); padding: 3px 8px; background: var(--ink); color: var(--paper); font: 500 .75rem/1.3 var(--f-mono); }
.pf-demos__note { margin-top: var(--s-6); max-width: 60ch; font-family: var(--f-serif); font-style: italic; color: var(--fg-2); }
@media (max-width: 1023px) {
	.pf-demo__row { grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "thumb title arrow" "thumb meta arrow" "thumb label arrow" "thumb value arrow"; column-gap: var(--s-4); row-gap: var(--s-2); padding-top: var(--s-5); }
	.pf-demo__thumb { grid-area: thumb; align-self: start; }
}
@media (min-width: 1024px) {
	.pf-demos__iv { --iv-ar: 4 / 3; }
	html:not(.js) .pf-demos__item:first-child { clip-path: none; } /* no JS: the viewer shows the first still */
	.pf-demo__thumb { display: none; }
	.pf-demo__row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title label arrow" "meta meta arrow" "value value arrow"; column-gap: var(--s-4); row-gap: var(--s-1); min-height: 96px; padding-right: var(--s-4); }
	.pf-demo__chip { justify-self: end; margin-top: 3px; }
}

/* ---- s5 open files ------------------------------------------------------------------------------- */
.pf-files__honesty { row-gap: var(--s-4); margin-bottom: var(--s-7); }
.pf-files__honest { padding: var(--s-4) var(--s-5); background: var(--paper-2); font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.55; max-width: 72ch; }
.pf-files__visual { font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); max-width: 52ch; align-self: end; }
@media (min-width: 1024px) { .pf-files__honest { grid-column: 1 / span 7; } .pf-files__visual { grid-column: 9 / -1; } }
.pf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); padding: var(--s-3) 0; background: var(--bg); border-bottom: var(--bw) solid var(--rule); }
/* sticky only where it costs one thin row: on a phone the two rows of chips would eat a fifth of the screen */
@media (min-width: 768px) { .pf-filter { position: sticky; top: var(--header-h); z-index: var(--z-sticky); } }
.pf-filter.pf-filter--cases { position: static; border-bottom: 0; }
/* JS-only controls: hidden without JS (every file is open then); with JS in place from the first paint */
html:not(.js) :is(.pf-filter, .bbf__open) { display: none; }
.pf-case[hidden] { display: none; }
.pf-filter__count { margin: 0 0 0 auto; }
.pf-filelist { display: grid; gap: var(--s-7); }

/* one file: the flight-recorder frame */
.bbf { position: relative; display: grid; gap: var(--s-4) var(--gutter); padding: var(--s-4); border: var(--bw) solid var(--ink); background: var(--paper); scroll-margin-top: calc(var(--header-h) + 72px); }
.bbf[hidden] { display: none; }
.bbf__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--rule); }
.bbf__id { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.bbf__sector { font: 400 var(--t-small)/1.3 var(--f-sans); color: var(--fg-2); }
.bbf__labels { margin-left: auto; }
.bbf__summary { display: grid; gap: var(--s-3); align-content: start; }
.bbf__title { font-size: var(--t-h3); line-height: 1.1; max-width: 22ch; }
.bbf__voice { font-family: var(--f-serif); font-style: italic; font-size: 1.125rem; line-height: 1.5; max-width: 46ch; }
.bbf__gone { font-size: var(--t-small); color: var(--fg-2); max-width: 52ch; }
.bbf__k { display: block; margin-bottom: 2px; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.bbf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.bbf__perma { min-height: 40px; font-size: .8125rem; }
.js .bbf:not(.is-open) .bbf__body { display: none; }
.bbf__body { display: grid; gap: var(--s-6); padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); }
.bbf__fields { display: grid; gap: 0; margin: 0; }
.bbf__f { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.bbf__f:first-child { border-top: 0; }
.bbf__f dt { font: 600 .75rem/1.35 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg); }
.bbf__help { display: block; margin-top: var(--s-1); font: 400 var(--t-small)/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--fg-2); }
.bbf__f dd { display: grid; gap: var(--s-3); margin: 0; }
.bbf__f dd p { max-width: 64ch; line-height: 1.55; }
.bbf__f dd p + p { margin-top: 0; }
.bbf__f--incident dd p { font-family: var(--f-serif); font-size: 1.0625rem; }
.bbf__f--cost dd { position: relative; padding: var(--s-4); isolation: isolate; }
.bbf__f--cost dd::before { content: ""; position: absolute; inset: 0; z-index: -1; color: var(--molten); background: var(--hatch); opacity: .16; }
.bbf__f--cost dd::after { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--bw) solid color-mix(in srgb, var(--molten) 55%, transparent); }
.bbf__value { font: 600 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--f-mono); letter-spacing: -.02em; color: var(--molten-deep); }
.bbf__formula { font: 500 .8125rem/1.6 var(--f-mono); }
.bbf__note { font-family: var(--f-serif); font-style: italic; }
.bbf__measure { display: block; margin-top: var(--s-2); font: 500 .8125rem/1.6 var(--f-mono); color: var(--cyan-deep); }
.bbf__f--ainot dd p { font-weight: var(--w-strong); }
.bbf__f--method dd p { font: 400 .875rem/1.65 var(--f-mono); }
.bbf__src { font-size: var(--t-small); }
.bbf .bb-flow > li { font-size: var(--t-body); }
.bbf .bb-flow > li::before { background: var(--paper); }
.bbf__cta { margin: 0; }
@media (min-width: 768px) { .bbf__f { grid-template-columns: 13rem minmax(0, 1fr); } }
@media (min-width: 1024px) {
	.bbf { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--s-5); }
	.bbf__head { grid-column: 1 / -1; }
	.bbf__media { grid-column: 1 / span 6; }
	.bbf__summary { grid-column: 7 / -1; padding-top: var(--s-2); }
	.bbf--flip .bbf__media { grid-column: 7 / -1; grid-row: 2; }
	.bbf--flip .bbf__summary { grid-column: 1 / span 6; grid-row: 2; }
	.bbf__body { grid-column: 1 / -1; }
	/* opened: the drawing takes the full width, the fields follow */
	.bbf.is-open .bbf__media { grid-column: 1 / span 8; grid-row: auto; }
	.bbf.is-open .bbf__summary { grid-column: 9 / -1; grid-row: auto; }
}

.pf-files__end { margin-top: var(--s-8); row-gap: var(--s-5); align-items: end; }
.pf-files__endtitle { font-size: var(--t-h3); }
.pf-files__endtext .nx-lead { margin-top: var(--s-3); }
@media (min-width: 1024px) { .pf-files__endtext { grid-column: 1 / span 7; } .pf-files__endcta { grid-column: 8 / -1; justify-content: flex-end; } }

/* Phones: the closing section's Molten button and the header's Molten CTA share one screen. At the standard
   size the two cover 5.2–5.3 % of a 390 px screen (bible R2: ≤ 5 %); 44 px high (the touch minimum), tighter
   padding and 14 px type keep the pair under the line. Foundation request: the same for every page. */
@media (max-width: 479px) {
	.nx-cta .nx-btn--primary { min-height: 44px; padding-inline: 16px; font-size: .875rem; }
}

} /* end @layer pages */