/* =========================================================================
   netex · engines/leak-finder.css · the leak finder (/marketing/performance/ s2, bible S18)
   Five narrowing bands (sqrt scale, so late steps stay visible), a thin Molten bar per rate-step for the
   value of one point, the widest named the biggest leak. Server-rendered for the example values, so the
   page is complete without JS; the engine only repaints. Molten stays a hairline (≤ 5 %).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.lf { display: grid; gap: var(--s-7) var(--gutter); align-items: start; }
@media (min-width: 1024px) {
	.lf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.lf__inputs { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
	.lf__board { grid-column: 5 / -1; }
}

/* ---- inputs: number field (the keyboard path) mirrored by a slider ------------------------------ */
.lf__inputs { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--bw-2) solid var(--fg); min-width: 0; }
.lf__demo { margin: 0; }
.lf-in { gap: var(--s-1); }
.lf-in .nx-field__label { font: 500 var(--t-small)/1.35 var(--f-sans); color: var(--fg); }
.lf-in__row { display: grid; grid-template-columns: 7.25rem 1.25rem minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.lf-in__num .nx-input { min-height: 44px; padding: .5em 12px; font: 600 1rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.lf-in__unit { font: 600 .875rem/1 var(--f-mono); color: var(--fg-2); }
.lf-in__range { min-width: 0; }
.lf__reset { justify-self: start; }

/* ---- the board ---------------------------------------------------------------------------------- */
.lf__board { container-type: inline-size; display: grid; gap: var(--s-5); min-width: 0; }
.lf__funnel { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.lf-step { --w: 100%; --lk: 0%; display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.lf-step__label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.lf-step__label b { font: 600 1.125rem/1 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--fg); font-variant-numeric: tabular-nums; }
.lf-step__bar { display: block; width: var(--w); height: 26px; background: var(--fg); clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%); transition: width 360ms var(--ease-mech), height 360ms var(--ease-mech); }
.lf-step:first-child .lf-step__bar { background: var(--line-art); opacity: .55; }
.lf-step:last-child .lf-step__bar { background: var(--sig); }
.lf-step__drop { margin: 0; font: 500 .75rem/1.4 var(--f-mono); color: var(--fg-2); }
.lf-step__leak { display: grid; gap: 6px; margin: 0; font: 500 .75rem/1.4 var(--f-mono); color: var(--fg-2); }
.lf-step__leakbar { display: block; width: var(--lk); height: 4px; background: var(--leak); transition: width 360ms var(--ease-mech); }
.lf-step.is-big .lf-step__leakbar { height: 8px; }
.lf-step.is-big .lf-step__leak { color: var(--fg); font-weight: 600; }
html.rm .lf-step__bar, html.rm .lf-step__leakbar { transition: none; }

/* Wide board: the funnel runs left to right as narrowing bands, centred on one axis. */
@container (min-width: 640px) {
	.lf__funnel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
	.lf-step { grid-template-rows: 2.6rem 168px auto auto; padding: 0 var(--s-3); border-left: var(--bw) solid var(--rule); }
	.lf-step:first-child { padding-left: 0; border-left: 0; }
	.lf-step__label { flex-direction: column; justify-content: start; align-items: start; }
	/* The brand's cut on every band (bottom-right, 47°: 10 px across, 10.72 px down; capped on the thinnest bands). */
	.lf-step__bar { align-self: center; width: 100%; height: var(--w); clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(10.72px, 50%)), calc(100% - min(10px, 46.6%)) 100%, 0 100%); }
	.lf-step__drop { min-height: 2.8em; }
}

/* ---- the verdict, the totals, the fix ------------------------------------------------------------- */
/* The verdict and the fix carry a short 47° slash (Molten = the leak, Cyan = the fix) instead of a coloured
   side border (bible §1.4). A vertical bar skewed by -43° rises left to right at exactly 47°. */
.lf__headline { position: relative; margin: 0; padding-left: 1.5em; font: var(--w-h3) var(--t-h4)/1.3 var(--f-sans); color: var(--fg); max-width: 46ch; }
.lf__headline::before, .lf__fixresult::before { content: ""; position: absolute; left: .45em; top: .18em; width: 3px; height: 1em; background: var(--leak); transform: skewX(-43deg); transform-origin: 50% 100%; }
.lf__why { margin: 0; max-width: 52ch; color: var(--fg-2); }
.lf__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 0; border-top: var(--bw) solid var(--rule); }
.lf__out > div { display: grid; grid-template-rows: 1fr auto; gap: var(--s-1); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--rule); }
.lf__out dt { align-self: end; } /* a two-line label (CPA) keeps every value on one baseline */
.lf__out dt { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.lf__out dd { margin: 0; font: 600 1.375rem/1.1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
@container (min-width: 640px) { .lf__out { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lf__example { margin: 0; font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); }
.lf__fix { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.lf__fix > .nx-switch { justify-self: start; }
.lf__fixbox { display: grid; gap: var(--s-4); }
.lf__fixbox[hidden] { display: none; }
.lf__fixrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.lf__fixl { min-width: 9rem; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.lf__fixrow .nx-seg > button { min-height: 44px; }
.lf__fixresult { position: relative; margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) 2.6em; background: var(--bg-2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ch-ui) * var(--nx-tan)), calc(100% - var(--ch-ui)) 100%, 0 100%); font: 500 1rem/1.5 var(--f-sans); color: var(--fg); max-width: 60ch; }
.lf__fixresult::before { left: 1.1em; top: calc(var(--s-3) + .25em); background: var(--sig); }
.lf__fixresult:empty { display: none; }
.lf__honest { margin: 0; font-size: var(--t-small); color: var(--fg-2); max-width: 56ch; }
.lf__formula { border-top: var(--bw) solid var(--rule); padding-top: var(--s-3); }
.lf__formula summary { cursor: pointer; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); min-height: 32px; display: flex; align-items: center; }
.lf__formula p { margin-top: var(--s-2); font: 500 .8125rem/1.6 var(--f-mono); color: var(--fg); max-width: 72ch; }
.lf__cta { margin: 0; }

} /* end @layer pages */