/* =========================================================================
   netex · engine cost-meter (bible S6) · Hidden Cost Meter
   A Paper work sheet (department tabs, ≤ 4 sliders, hourly cost) beside an Ink output sheet
   (hidden cost, automatable range, people, payback, what we'd build, the formula, always visible).
   Printed by netex_cost_meter_mount(); works as a worked example without JS.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer components {

.nx-meter { container-type: inline-size; position: relative; }
.nx-meter__grid { display: grid; gap: var(--s-6); align-items: start; }
@container (min-width: 900px) {
	.nx-meter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); }
	.nx-meter__sheet { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* ---- the work sheet (inputs) --------------------------------------------- */
.nx-meter__sheet { display: grid; gap: var(--s-5); }
.nx-meter__sheet .nx-sheet__head { margin-bottom: 0; }
.nx-meter__controls { display: grid; gap: var(--s-5); }
.nx-meter__dept b { display: block; margin-top: var(--s-1); font: var(--w-h3) var(--t-h4)/1.2 var(--f-sans); }
.nx-meter__defaults { margin: 0; display: grid; gap: 0; }
.nx-meter__defaults div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
.nx-meter__defaults dt { font-size: var(--t-small); color: var(--fg); }
.nx-meter__defaults dd { margin: 0; font: 600 .875rem/1.4 var(--f-mono); white-space: nowrap; }
.nx-meter__noscript { font-size: var(--t-small); color: var(--fg-2); }
.nx-meter__source { font: 400 var(--t-micro)/1.5 var(--f-mono); color: var(--fg-2); }

/* tabs (segmented, mono) */
.nx-meter__tabs { display: flex; flex-wrap: wrap; gap: 0; border: var(--bw) solid var(--rule); }
.nx-meter__tabs button {
	flex: 1 1 auto;
	min-height: 40px;
	padding: var(--s-2) var(--s-3);
	border-right: var(--bw) solid var(--rule);
	border-bottom: var(--bw) solid var(--rule);
	margin: 0 -1px -1px 0;
	font: 500 .6875rem/1.25 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg);
	text-align: center;
}
.nx-meter__tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.nx-meter__tabs button:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .nx-meter__tabs button:not([aria-selected="true"]):hover { background: var(--bg-2); } }

/* slider rows: label + value + typed number; the 47° thumb comes from .nx-range */
.nx-meter__slider { display: grid; gap: var(--s-1); }
.nx-meter__slabel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: end; }
.nx-meter__slabel label { font-size: var(--t-small); line-height: 1.35; color: var(--fg); }
.nx-meter__num { display: inline-flex; align-items: center; gap: 4px; }
.nx-meter__num input {
	width: 6.2em;
	min-height: 36px;
	padding: 4px 8px;
	border: 0;
	border-bottom: var(--bw-2) solid var(--fg);
	background: var(--bg-2);
	font: 600 .875rem/1 var(--f-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--fg);
	-moz-appearance: textfield;
}
.nx-meter__num input::-webkit-inner-spin-button, .nx-meter__num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nx-meter__num input:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.nx-meter__num span { font: 500 .75rem/1 var(--f-mono); color: var(--fg-2); }
.nx-meter__rate { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.nx-meter__rate .nx-field { gap: var(--s-1); }
.nx-meter__tip { font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.nx-meter__tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); }
.nx-meter__prenote { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--sig); background: var(--bg-2); font-size: var(--t-small); }

/* phones: a one-line sticky readout while the sliders are on screen */
.nx-meter__bar { display: none; }
@container (max-width: 899px) {
	.nx-meter.is-live .nx-meter__bar {
		position: sticky;
		bottom: 0;
		z-index: 3;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: 0 var(--s-3);
		margin: 0 calc(-1 * var(--s-5)) calc(-1 * var(--s-5) - var(--ch-sheet) * .5);
		padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
		background: var(--ink);
		color: var(--paper);
		font: 500 .75rem/1.3 var(--f-mono);
	}
	.nx-meter__bar b { font-size: 1rem; color: var(--molten); font-weight: 600; font-variant-numeric: tabular-nums; }
}

/* ---- the output sheet (Ink) ----------------------------------------------------- */
.nx-meter__out {
	position: relative;
	display: grid;
	gap: var(--s-5);
	padding: var(--s-6) var(--s-6) calc(var(--s-6) + var(--ch-sheet) * .5);
	background: var(--ink);
	color: var(--paper);
	clip-path: var(--clip-sheet);
}
.nx-meter__labels { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.nx-meter__hidden .nx-readout__value { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); white-space: nowrap; }
.nx-meter__hidden.nx-readout--dot .nx-readout__value { letter-spacing: .01em; }
.nx-meter__rows { margin: 0; display: grid; gap: 0; }
.nx-meter__row { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); }
.nx-meter__row dt { font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-meter__row dd { margin: 0; font: 600 1.0625rem/1.35 var(--f-mono); font-variant-numeric: tabular-nums; }
.nx-meter__row dd > span[data-out] { display: inline-block; }
.nx-meter__note { display: block; margin-top: var(--s-1); font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); }
.nx-meter__row--range .nx-rangebar { gap: var(--s-2); }
.nx-meter__row--range .nx-rangebar__span { color: var(--cyan); border-color: var(--fg); }
.nx-meter__row--range .nx-rangebar__ends b { color: var(--fg); }
.nx-meter__scale { font: 500 .6875rem/1.3 var(--f-mono); color: var(--fg-2); letter-spacing: .04em; }
.nx-meter__end { display: grid; gap: 2px; }
.nx-meter__end--hi { justify-items: end; text-align: end; }
@container (min-width: 560px) {
	.nx-meter__row { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}
.nx-meter__verdict { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--paper); }
.nx-meter__verdict:empty, .nx-meter__extra:empty { display: none; }
.nx-meter__extra { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px dashed var(--rule); font-size: var(--t-small); line-height: 1.5; }
.nx-meter__extra a { color: var(--cyan); }
.nx-meter__h { max-width: none; margin-bottom: var(--s-3); font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-meter__buildlist { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-2); font-size: var(--t-body); line-height: 1.45; }
.nx-meter__buildlist li::marker { font: 500 .75rem var(--f-mono); color: var(--cyan); }
.nx-meter__funding { margin-top: var(--s-4); font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.nx-meter__funding b { color: var(--fg); font-weight: 600; }
.nx-meter__formula { padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); display: grid; gap: var(--s-2); }
.nx-meter__f { font: 400 .8125rem/1.6 var(--f-mono); color: var(--paper-72); max-width: 80ch; }
.nx-meter__f--work { color: var(--cyan); }
.nx-meter__f--work:empty { display: none; }
.nx-meter__f--note { color: var(--steel); }
.nx-meter__cta { padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.nx-meter__cta .nx-micro { text-transform: none; letter-spacing: 0; font-size: .75rem; max-width: 52ch; }

/* stamps on settle use the foundation STAMP dialect; the Molten flash on the cost */
.nx-meter [data-out].is-stamping::after { background: var(--cyan); }
.nx-meter .nx-meter__hidden .is-stamping::after { background: var(--molten); }

} /* end @layer components */