/* =========================================================================
   netex · pages/single-nx_work.css · the Black Box case page (bible S15)
   Hero (Ink) · sticky flight-recorder strip · one field per chapter · closing (Ink).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- hero: the file -------------------------------------------------------------------- */
.bbc-hero { overflow: hidden; }
.bbc-hero__stencil {
	/* the file id, stencilled on the box */
	position: absolute;
	right: calc(var(--margin) - .06em);
	bottom: calc(var(--s-6) - .12em);
	font: 700 clamp(5rem, 2rem + 16vw, 17rem)/.8 var(--f-mono);
	letter-spacing: -.06em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--rule-dark);
	pointer-events: none;
	user-select: none;
}
@media (max-width: 767px) { .bbc-hero__stencil { display: none; } }
.bbc-hero__frame { position: relative; max-width: 62rem; padding: var(--s-5) 0 var(--s-2); }
.bbc-hero__frame::before {
	/* the flight-recorder frame: four 12px corners, thin rule */
	content: "";
	position: absolute;
	inset: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
	background:
		linear-gradient(var(--fg-3), var(--fg-3)) 0 0 / 12px 1px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 0 0 / 1px 12px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 100% 0 / 12px 1px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 100% 0 / 1px 12px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 0 100% / 12px 1px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 0 100% / 1px 12px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 100% 100% / 12px 1px no-repeat,
		linear-gradient(var(--fg-3), var(--fg-3)) 100% 100% / 1px 12px no-repeat;
	pointer-events: none;
}
@media (max-width: 767px) { .bbc-hero__frame::before { inset: calc(-1 * var(--s-2)); } }
.bbc-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.bbc-hero__id { font: 600 .75rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--cyan); }
.bbc-hero__title { font-size: var(--t-h2); font-weight: var(--w-display); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); max-width: 22ch; }
.bbc-hero__lead { margin-top: var(--s-5); color: var(--fg-2); }
.bbc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
/* phones: the long label wraps to two lines; with the header CTA that would pass the 5 % Molten budget,
   so the hero's button takes the secondary ring there (the closing section keeps the Molten action) */
@media (max-width: 767px) {
	.bbc-hero__actions .nx-btn--primary { --btn-fill: var(--fg); --btn-fg: var(--fg); }
	.bbc-hero__actions .nx-btn--primary::before { clip-path: var(--clip-ui-ring); }
	.bbc-hero__actions .nx-btn--primary::after { display: none; }
}

/* ---- the strip ---------------------------------------------------------------------------- */
/* The strip closes the Ink hero; the first chapter starts BELOW it (no pull-up under the strip), and its
   47° notch shows the Ink of the wrapper — the same Ink as the hero above. Later chapters overlap the
   previous chapter as usual, so the wrapper's Ink shows nowhere else. */
.bbc { position: relative; background: var(--ink); }
.bbc-strip + .bbc-ch.ch-tl { margin-top: 0; }
.bbc-strip {
	position: sticky;
	top: var(--header-h);
	z-index: var(--z-sticky);
	background: var(--ink);
	color: var(--paper);
	border-block: var(--bw) solid var(--rule-dark);
	--fg: var(--paper); --fg-2: var(--paper-72); --focus: var(--cyan);
}
.bbc-strip__list {
	display: flex;
	gap: clamp(var(--s-3), 1.6vw, var(--s-6));
	justify-content: space-between;
	width: min(100% - 2 * var(--margin), var(--max));
	margin: 0 auto;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.bbc-strip__list::-webkit-scrollbar { display: none; }
.bbc-strip__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--s-2);
	min-height: 44px;
	padding: var(--s-3) 0;
	color: var(--fg-2);
	font: 500 .75rem/1.2 var(--f-mono);
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}
.bbc-strip__t { color: var(--cyan); font-variant-numeric: tabular-nums; }
/* Eight chapters must fit one row from 1280 px (the EL labels ran 14 px past the edge at 1440 and the
   last one was cut): the micro size and no tracking keep every label whole; narrower screens scroll. */
@media (min-width: 1024px) { .bbc-strip__link { font-size: var(--t-micro); letter-spacing: 0; } }
.bbc-strip__link[aria-current] { color: var(--paper); }
.bbc-strip__link[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--n-grad); clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.bbc-strip__link:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .bbc-strip__link:hover { color: var(--paper); } }

/* ---- chapters ---------------------------------------------------------------------------- */
.bbc-ch { scroll-margin-top: calc(var(--header-h) + 52px); }
.bbc-ch__grid { row-gap: var(--s-5); }
.bbc-ch__stamp { font-size: .75rem; color: var(--sig); letter-spacing: .04em; margin-bottom: var(--s-2); }
.f-indigo .bbc-ch__stamp { color: var(--fg-2); } /* cyan on indigo is display-size only (4.47:1) */
.bbc-ch__title { font-size: var(--t-h2); max-width: 14ch; }
.bbc-ch__body { max-width: none; }
.bbc-ch__body > * + * { margin-top: var(--s-5); }
.bbc-ch__body p { font-family: var(--f-serif); font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 56ch; }
.bbc-ch__body h3 { margin-top: var(--s-7); font-size: var(--t-h4); font-weight: var(--w-h3); }
@media (min-width: 1024px) {
	.bbc-ch__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 64px); align-self: start; }
	.bbc-ch__body { grid-column: 5 / -1; }
}

/* the client's words */
.bb-voice { margin: 0; padding: 0; }
.bb-voice p { font-family: var(--f-serif) !important; font-style: italic; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem) !important; line-height: 1.35 !important; max-width: 30ch !important; color: var(--fg); }

/* source lines */
.bb-src { font-family: var(--f-sans) !important; font-size: var(--t-small) !important; }
.bb-src--inline { display: block; margin-top: var(--s-2); }
.bbc-ch__body p.bb-src { margin-top: var(--s-3); }

/* hidden cost: the figure on the −47° hatch */
.bb-stat { position: relative; display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-5); color: var(--fg); isolation: isolate; max-width: 40rem; }
.bb-stat::before { content: ""; position: absolute; inset: 0; z-index: -1; color: var(--molten); background: var(--hatch); opacity: .28; }
.bb-stat::after { content: ""; position: absolute; inset: 0; z-index: -1; border: var(--bw) solid color-mix(in srgb, var(--molten) 60%, transparent); }
.bb-stat__n { font: 600 var(--t-readout)/1 var(--f-mono); letter-spacing: -.03em; color: var(--leak); font-variant-numeric: tabular-nums; }
.bbc-ch__body .bb-stat__t { font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.5; color: var(--fg-2); margin: 0; }

/* intervention: the flow, drawn (no numbering: nodes and 47° connectors) */
.bb-flow { position: relative; display: grid; gap: var(--s-4); margin: 0; padding: 0 0 0 var(--s-7); list-style: none; }
.bb-flow::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 1.5px; background: var(--line-art); }
.bb-flow > li { position: relative; font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.55; max-width: 60ch; }
.bb-flow > li::before { content: ""; position: absolute; left: calc(-1 * var(--s-7) + 4px); top: .35em; width: 16px; height: 16px; background: var(--bg); border: 1.5px solid var(--line-art); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%); }
.bb-flow > li:last-child::before { background: var(--sig); border-color: var(--sig); }
.bb-lineage { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.bb-lineage > li { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.5; }
.bb-lineage > li:last-child { font-weight: var(--w-strong); }

/* result (Ink): the slider, the targets, this visit */
.bbc-ch--result .bbc-ch__body { display: grid; gap: var(--s-6); }
.bbc-ch--result .bbc-ch__body > * + * { margin-top: 0; }
.bbc-slider { max-width: 1000px; }
.bbc-targets__table caption { color: var(--fg-2); }
.bbc-targets__table th[scope="row"] { font: var(--w-strong) .9375rem/1.35 var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--fg); }
.bbc-targets__t { font-family: var(--f-mono); white-space: nowrap; color: var(--cyan); }
.bbc-targets__table td { font-size: var(--t-small); color: var(--fg-2); }
/* Phones: the stacked table keeps its caption on one line (a block caption inside a block table would
   shrink to its longest word) and drops the «Μέτρηση» tag over each metric name, which is the row head. */
@media (max-width: 767px) {
	.bbc-targets__table caption { display: block; width: 100%; }
	.bbc-targets__table th[scope="row"]::before { content: none; }
}
.bbc-live { display: grid; gap: var(--s-4); padding: var(--s-5); border: var(--bw) solid var(--rule); }
.bbc-live__intro { font-family: var(--f-sans) !important; font-size: var(--t-small) !important; color: var(--fg-2); }
.bbc-live__list { display: grid; gap: 0; margin: 0; }
.bbc-live__row { display: grid; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.bbc-live__row dt { font: 400 var(--t-small)/1.4 var(--f-sans); color: var(--fg-2); }
.bbc-live__code { display: inline-block; margin-right: var(--s-2); padding: 1px 5px; background: var(--cyan); color: var(--ink); font: 700 .6875rem/1.3 var(--f-mono); }
.bbc-live__row dd { min-height: 2.8em; margin: 0; font: 500 .9375rem/1.4 var(--f-mono); color: var(--fg); } /* two lines kept: a reading never moves the page */
html:not(.js) .bbc-print { display: none; }
.no-js .bbc-live, html:not(.js) .bbc-live { display: none; }
@media (min-width: 640px) { .bbc-live__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: baseline; } }

/* «Τι δεν έκανε το AI» on Indigo: the sentence is the point */
.bbc-ch--ai-not .bbc-ch__body p { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); line-height: 1.35; max-width: 34ch; color: var(--fg); }

/* method note: mono */
.bbc-ch--method .bbc-ch__body p { font-family: var(--f-mono); font-size: .875rem; line-height: 1.65; max-width: 72ch; color: var(--fg-2); }
.bbc-ch--method .bbc-ch__body p:first-child { color: var(--fg); }

/* ---- closing ------------------------------------------------------------------------------------- */
.bbc-close__grid { row-gap: var(--s-8); }
.bbc-close__gone { --flar: 50; --volm: 40; font-size: var(--t-h2); max-width: 20ch; }
.bbc-close__actions { margin-top: var(--s-7); }
.bbc-nav ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.bbc-nav__link { display: grid; gap: var(--s-1); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); color: var(--fg); text-decoration: none; }
.bbc-nav__k { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.bbc-nav__t { font: var(--w-strong) var(--t-body)/1.35 var(--f-sans); }
@media (hover: hover) { .bbc-nav__link:hover .bbc-nav__t { text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 1024px) { .bbc-close__text { grid-column: 1 / span 7; } .bbc-nav { grid-column: 9 / -1; align-self: end; } }

/* ---- print: the file on paper ------------------------------------------------------------------- */
@media print {
	.bbc-strip, .bbc-print, .wpx, .bbc-live, .nx-header, #nx-footer { display: none !important; }
	.bbc-ch { clip-path: none !important; margin-top: 0 !important; padding-block: 12mm !important; background: #fff !important; color: #000 !important; }
	.bbc-ch__head { position: static !important; }
}

/* Phones: the closing Molten button and the header's Molten CTA share one screen. At the standard size the
   two cover 5.4 % of a 390 px screen (bible R2: ≤ 5 %); 44 px high (the touch minimum), tighter padding
   and 14 px type keep the pair at ≈ 4.8 %. */
@media (max-width: 479px) {
	.bbc-close__actions .nx-btn--primary { min-height: 44px; padding-inline: 16px; font-size: .875rem; }
}

} /* end @layer pages */