/* =========================================================================
   netex · engines/qc-conveyor.css · inspector vs camera (simulation), drawing register
   Line art 1.5px in --line-art; machine sight in cyan; leaks (escaped defects) in Molten.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.nx-qc { display: grid; gap: var(--s-4); container-type: inline-size; }
.nx-qc__modes { justify-self: start; }
.nx-qc__modes > * { min-height: 44px; padding-inline: var(--s-4); font: 500 .8125rem/1.25 var(--f-sans); text-align: left; }
.nx-qc__desc p { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--fg); max-width: 56ch; }
.nx-qc__stage { position: relative; overflow: hidden; background: var(--ink); border: var(--bw) solid var(--rule); }
.nx-qc__svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--silver); stroke-width: 1.5; stroke-linecap: square; }
.nx-qc__ctl { position: absolute; right: 8px; bottom: 8px; z-index: 2; }
.nx-qc.is-narrow .nx-qc__ctl { position: static; display: flex; justify-content: flex-end; padding: 0 6px 6px; }
.nx-qc.is-narrow .qc-boxlabel { font-size: 17px; }
.nx-qc.is-narrow .qc-check { font-size: 15px; }
.nx-qc__labels .nx-tipwrap { max-width: 100%; }
.nx-qc__labels .nx-label { white-space: normal; text-align: left; }
.nx-qc__ctl .nx-iconbtn { --bg-2: var(--ink-2); --fg: var(--paper); --rule: var(--rule-dark); color: var(--paper); }

.qc-belt path { stroke: var(--steel); }
.qc-cam path { stroke: var(--paper); }
.qc-cone { fill: color-mix(in srgb, var(--cyan) 9%, transparent); stroke: var(--cyan) !important; stroke-dasharray: 3 5; opacity: 0; transition: opacity var(--dur-ui) var(--ease-mech); }
.nx-qc__svg.is-ai .qc-cone, .nx-qc[data-mode="ai"] .nx-qc__still .qc-cone { opacity: 1; }
.qc-eye { stroke: var(--paper); opacity: 0; transition: opacity var(--dur-ui) var(--ease-mech); }
.qc-eye circle { fill: var(--paper); stroke: none; }
.nx-qc__svg.is-live:not(.is-ai) .qc-eye { opacity: .8; }
.nx-qc__svg.is-live .qc-cam path:not(.qc-cone) { opacity: .9; }
.nx-qc__svg.is-live:not(.is-ai) .qc-cam { opacity: .35; }

.qc-bottle path { stroke: var(--silver); }
.qc-fill { stroke: none !important; fill: color-mix(in srgb, var(--silver) 16%, transparent); }
.qc-cap { fill: var(--steel); }
.qc-crack { display: none; stroke: var(--molten) !important; stroke-width: 2; }
.qc-label { fill: color-mix(in srgb, var(--paper) 8%, transparent); }
.qc-dot { display: none; fill: var(--molten); stroke: none; }
.qc-box { display: none; }
.qc-box rect { fill: none; stroke: var(--cyan); stroke-width: 2; }
.qc-boxlabel { fill: var(--cyan); stroke: none; font: 600 12px/1 var(--f-mono); letter-spacing: .02em; }
.qc-check { fill: var(--paper); stroke: none; font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: 0; }

/* defect looks (visible on the bottle in both modes; the box only when the camera sees it) */
.qc-bottle.is-cap .qc-crack { display: block; }
.qc-bottle.is-nolabel .qc-label { display: none; }
.qc-bottle.is-skew .qc-label { transform: rotate(-9deg); transform-origin: 26px 193px; }
.qc-bottle.is-fill .qc-fill { transform: translateY(34px); }
.qc-bottle.is-particle .qc-dot { display: block; }
.qc-bottle.is-date .qc-label { stroke: var(--molten) !important; stroke-dasharray: 3 3; }
.nx-qc__svg.is-ai .qc-bottle.is-bad.is-past .qc-box { display: block; }
.nx-qc__svg.is-ai .qc-bottle.is-false.is-past .qc-box { display: block; }
.qc-bottle.is-false .qc-box rect { stroke-dasharray: 6 5; }
.nx-qc__svg:not(.is-ai) .qc-bottle.is-past .qc-check { opacity: 1; }
.nx-qc__svg:not(.is-ai) .qc-bottle.is-bad.is-past .qc-glass { stroke: var(--molten); }

/* static still (no JS / reduced motion before the engine) */
.nx-qc__still .qc-bottle path { fill: none; stroke: var(--silver); }
.nx-qc__still .qc-box { display: block; fill: none; stroke: var(--cyan); stroke-width: 2; }
.nx-qc__still .qc-bottle.is-bad path:first-child { stroke: var(--molten); }

/* the whole clip as 600 cells */
.nx-qc__stripwrap { padding: var(--s-3); background: var(--ink); border: var(--bw) solid var(--rule); }
.nx-qc__strip { display: block; width: 100%; height: auto; }
.qc-cell { fill: color-mix(in srgb, var(--paper) 5%, transparent); }
.qc-cell.is-passed { fill: none; stroke: color-mix(in srgb, var(--paper) 22%, transparent); stroke-width: .8; }
.qc-cell.is-seen { fill: color-mix(in srgb, var(--paper) 30%, transparent); }
.qc-cell.is-checked { fill: var(--paper); }
.qc-cell.is-escaped { fill: var(--molten); }
.qc-cell.is-caught { fill: var(--cyan); stroke: var(--paper); stroke-width: 1.2; }
.qc-cell.is-false { fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 2 1.5; }

/* counters */
.nx-qc__counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--gutter); margin: 0; }
@container (min-width: 700px) { .nx-qc__counters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-qc__count { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: var(--bw) solid var(--rule); }
.nx-qc__count dt { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.nx-qc__count dd { margin: 0; font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.nx-qc__count.is-caught dd { color: var(--sig); }
.nx-qc__count.is-escaped dd { color: var(--leak); }
.nx-qc__count.is-escaped.is-zero dd { color: var(--fg); }
.nx-qc__result { font-size: 1.0625rem; line-height: 1.45; font-weight: 500; }
.nx-qc__result-alt { display: none; }
.nx-qc__honest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.nx-qc__threshold { font: 500 .75rem/1.3 var(--f-mono); color: var(--fg-2); }
.nx-qc__explain { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--sig); background: var(--bg-2); font-size: .9375rem; line-height: 1.55; max-width: 72ch; }

html:not(.js) .nx-qc__modes, html:not(.js) .nx-qc__honest { display: none; }
html:not(.js) .nx-qc__result-alt { display: block; }

} /* end @layer pages */