/* dw/audit-engine (ported from the approved audit page mockup, v5/v6: light bar and steps, dark reactor).
   Fixed sizes: bar 58px, body 560px (desktop) / 360px reactor + fixed steps column (tablet, phone), foot 76px.
   Pills have fixed widths, so changing labels never re-wraps the bar. */
/* illustration colours (documented exception) */
.dwb-engine {
	--dwb-eng-night: #0B1118;
	--dwb-eng-deck: #0E1620;
	--dwb-eng-line: #1F2A37;
	--dwb-eng-reactor: #1A1320;
	--dwb-eng-chrome-line: #E9DDE4;
	--dwb-eng-steps-bg: #F7F2F5;
	--dwb-eng-hover: #E5C3D3;
	--dwb-eng-prog-bg: #F3E6EC;
	--dwb-eng-dot: #D5DAE1;
	--dwb-eng-hex-end: #7A1446;
	/* canvas palette (read by view.js) */
	--dwb-eng-c-rose: #F7A9CB;
	--dwb-eng-c-pink: #D02878;
	--dwb-eng-c-content: #E86AA4;
	--dwb-eng-c-blue: #8FB8FF;
	--dwb-eng-c-violet: #B59CFF;
	--dwb-eng-c-green: #3DDC97;
	--dwb-eng-c-amber: #F5B544;
	--dwb-eng-c-off: #3A4656;
	--dwb-eng-c-label-ok: #CFF7E5;
	--dwb-eng-c-label: #F3D6E3;
	--dwb-eng-c-sweep: #FFD6E8;
	--dwb-eng-c-core-end: #3A0E24;
}
/* end illustration colours */

.dwb-engine { position: relative; border: 1px solid var(--dwb-eng-line); border-radius: 24px; background: var(--dwb-eng-deck); overflow: hidden; color: var(--dwb-body); font-family: var(--dwb-font); }
.dwb-engine__bar { display: flex; flex-wrap: nowrap; gap: 10px 16px; align-items: center; justify-content: space-between; height: 58px; padding: 0 18px; background: var(--dwb-white); border-bottom: 1px solid var(--dwb-eng-chrome-line); }
.dwb-engine__brand { display: flex; align-items: center; gap: 10px; color: var(--dwb-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.dwb-engine__brand i { font-style: normal; width: 30px; height: 30px; display: grid; place-items: center; clip-path: polygon(50% 0, 94% 24%, 94% 76%, 50% 100%, 6% 76%, 6% 24%); background: linear-gradient(145deg, var(--dwb-brand), var(--dwb-eng-hex-end)); color: var(--dwb-white); font-size: 11px; font-weight: 800; }
.dwb-engine__pills { display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.dwb-engine__pill { font: 600 11px/1.2 var(--dwb-mono); letter-spacing: 0.06em; color: var(--dwb-ink); padding: 6px 10px; border-radius: var(--dwb-pill); border: 1px solid var(--dwb-border); background: var(--dwb-white); display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; }
.dwb-engine__pill > span { overflow: hidden; text-overflow: ellipsis; }
.dwb-engine__pill--state { width: 190px; }
.dwb-engine__pill--count { width: calc(17ch + 40px); }
.dwb-engine__pill b { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dwb-eng-c-amber); box-shadow: 0 0 10px var(--dwb-eng-c-amber); transition: background 0.4s, box-shadow 0.4s; }
.dwb-engine__pill b.is-pk { background: var(--dwb-brand); box-shadow: 0 0 10px var(--dwb-brand); }
.dwb-engine__pill.is-ok b { background: var(--dwb-strong); box-shadow: 0 0 8px rgba(16, 120, 56, 0.5); }

.dwb-engine__body { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); height: 560px; }
.dwb-engine__steps { list-style: none; margin: 0; padding: 16px; display: grid; gap: 10px; align-content: start; grid-template-rows: repeat(4, auto); height: 100%; overflow: hidden; background: var(--dwb-eng-steps-bg); border-right: 1px solid var(--dwb-eng-line); counter-reset: dwb-eng; }
.dwb-engine__step { position: relative; margin: 0; contain: layout; }
.dwb-engine__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; padding: 14px; border: 1px solid var(--dwb-border); border-radius: 16px; background: var(--dwb-white); color: var(--dwb-body); transition: border-color 0.3s, background 0.3s; }
.dwb-engine__card > * { margin: 0; grid-column: 2; }
.dwb-engine__card > .dwb-engine__sn { grid-column: 1; grid-row: 1 / span 2; align-self: start; font: 700 12px var(--dwb-mono); color: var(--dwb-muted); width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--dwb-border); display: grid; place-items: center; transition: all 0.3s; }
.dwb-engine__card > h3 { color: var(--dwb-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin-top: 7px; }
.dwb-engine__card > p:not(.dwb-engine__sn) { font-size: 13px; line-height: 1.55; color: var(--dwb-body); margin-top: 8px; }
/* scripted state: only the current step shows its text (the column has a fixed height, so this never moves the page) */
.dwb-js .dwb-engine__card > p:not(.dwb-engine__sn) { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; transition: opacity 0.35s; }
.dwb-js .dwb-engine__step.is-on .dwb-engine__card > p:not(.dwb-engine__sn),
.dwb-js .dwb-engine:not(.is-ready) .dwb-engine__step:first-child .dwb-engine__card > p:not(.dwb-engine__sn) { max-height: 260px; opacity: 1; margin-top: 8px; }
.dwb-engine__step.is-on .dwb-engine__card,
.dwb-js .dwb-engine:not(.is-ready) .dwb-engine__step:first-child .dwb-engine__card { background: linear-gradient(145deg, var(--dwb-brand-tint), var(--dwb-white)); border-color: var(--dwb-pink-line-3); }
.dwb-engine__step.is-on .dwb-engine__sn,
.dwb-js .dwb-engine:not(.is-ready) .dwb-engine__step:first-child .dwb-engine__sn { background: var(--dwb-brand); color: var(--dwb-white); border-color: var(--dwb-brand); box-shadow: 0 0 18px rgba(208, 40, 120, 0.6); }
.dwb-engine__step.is-done .dwb-engine__sn { color: var(--dwb-strong); border-color: var(--dwb-ok-line); }
.dwb-engine__step:hover .dwb-engine__card { border-color: var(--dwb-eng-hover); }
/* stretched selection button added by view.js (the heading stays a real H3 outside the button) */
.dwb-engine__select { position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; }
.dwb-engine__select:focus-visible { outline: 3px solid var(--dwb-brand); outline-offset: 2px; }

.dwb-engine__reactor { position: relative; min-width: 0; height: 100%; background: radial-gradient(70% 70% at 50% 55%, var(--dwb-eng-reactor), var(--dwb-eng-night) 75%); }
.dwb-engine__reactor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dwb-engine__foot { display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 10px 14px; height: 76px; padding: 0 18px; background: var(--dwb-white); border-top: 1px solid var(--dwb-eng-chrome-line); font: 600 11px var(--dwb-mono); letter-spacing: 0.06em; color: var(--dwb-muted); }
.dwb-engine__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 6px; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
.dwb-engine__stages::-webkit-scrollbar { display: none; }
.dwb-engine__stages li { flex: none; margin: 0; font: 600 10.5px var(--dwb-mono); letter-spacing: 0.04em; color: var(--dwb-muted); border: 1px solid var(--dwb-border); background: var(--dwb-white); border-radius: var(--dwb-pill); padding: 5px 10px; display: flex; gap: 6px; align-items: center; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.dwb-engine__stages li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dwb-eng-dot); }
.dwb-engine__stages li.is-now { color: var(--dwb-brand-dark); border-color: var(--dwb-pink-line-3); background: var(--dwb-brand-tint); }
.dwb-engine__stages li.is-now::before { background: var(--dwb-brand); box-shadow: 0 0 10px var(--dwb-brand); }
.dwb-engine__stages li.is-ok { color: var(--dwb-strong); }
.dwb-engine__stages li.is-ok::before { background: var(--dwb-strong); }
.dwb-engine__prog { flex: 1; height: 5px; border-radius: 5px; background: var(--dwb-eng-prog-bg); overflow: hidden; }
.dwb-engine__prog span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dwb-brand), var(--dwb-pink-on-ink)); border-radius: 5px; transition: width 0.3s linear; }
.dwb-engine__count { flex: none; min-width: 12ch; text-align: right; }

/* no script: the deck grows with its readable step list */
html:not(.dwb-js) .dwb-engine__body { height: auto; min-height: 560px; }
html:not(.dwb-js) .dwb-engine__steps { height: auto; }

@media (max-width: 960px) {
	.dwb-engine__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 360px auto; height: auto; }
	.dwb-engine__reactor { order: -1; height: 360px; }
	.dwb-engine__steps { height: 500px; border-right: 0; border-top: 1px solid var(--dwb-eng-line); }
	.dwb-engine__bar { height: 92px; flex-wrap: wrap; align-content: center; padding-block: 8px; }
	.dwb-engine__pills { flex-wrap: wrap; }
	html:not(.dwb-js) .dwb-engine__steps { height: auto; }
}
@media (max-width: 520px) {
	.dwb-engine__steps { height: 590px; }
	.dwb-engine__bar { height: 124px; }
	.dwb-engine__pill--state { width: 100%; max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
	.dwb-engine *, .dwb-engine *::before { transition: none; }
}