/* static/surfaces/engine.css — componentstijlen van de render-engine (G1).
   Gelinkt via /surface-assets/engine.css (base.html surface_css-contract,
   CSP style-src 'self'). Terminal.css blijft de laatste stylesheet en wint
   elke specificiteitsgelijkspel per bron-volgorde; dit bestand stylet
   alleen eng-*-componenten en raakt shell/nav/typografie niet. */

.eng-table-scroll { overflow-x: auto; }
.eng-table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 13px; }
.eng-table th, .eng-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.eng-table th { white-space: nowrap; }
.eng-right { text-align: right; }
.eng-empty { opacity: .7; font-style: italic; }

.eng-row.eng-red    > td:first-child { box-shadow: inset 3px 0 0 var(--t-neg); }
.eng-row.eng-amber  > td:first-child { box-shadow: inset 3px 0 0 var(--t-warn); }
.eng-row.eng-green  > td:first-child { box-shadow: inset 3px 0 0 var(--t-pos); }
.eng-emphasis > td { font-weight: 600; border-bottom-width: 2px; }

.eng-cell-red   { color: var(--t-neg); }
.eng-cell-amber { color: var(--t-warn); }
.eng-cell-green { color: var(--t-pos); }

.eng-section-row td {
  padding-top: 14px;
  border-bottom: 2px solid var(--border);
}
.eng-section-sub { opacity: .7; font-size: 12px; margin-left: 6px; }

.eng-chip {
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 9px;
  border: 1px solid currentColor;
  margin-left: 4px;
  white-space: nowrap;
}
.eng-chip-green { color: var(--t-pos); }
.eng-chip-amber { color: var(--t-warn); }
.eng-chip-red   { color: var(--t-neg); }
.eng-chip-grey  { color: var(--fg-3); }
/* Chip op blokniveau: eigen regel, geen inline-inspringing. */
.eng-chip-line { margin: 0 0 12px; }
.eng-chip-line .eng-chip { margin-left: 0; font-size: 12px; }

.eng-code {
  font-family: var(--t-mono);
  font-size: 0.92em;
  white-space: nowrap;
}
.eng-del {
  opacity: 0.55;
}

.eng-pre {
  white-space: pre-wrap;
  font-size: 11px;
  max-width: 60ch;
  margin: 4px 0 0;
}
.eng-pre-error { color: var(--t-neg); }

.eng-kpi-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.eng-kpi {
  min-width: 130px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.eng-kpi-label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.eng-kpi-value { font-size: 18px; font-variant-numeric: tabular-nums; }
.eng-kpi-green .eng-kpi-value { color: var(--t-pos); }
.eng-kpi-amber .eng-kpi-value { color: var(--t-warn); }
.eng-kpi-red   .eng-kpi-value { color: var(--t-neg); }

.eng-callout {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 4px;
  margin: 0 0 12px;
  font-size: 13px;
}
.eng-callout-ok    { border-left-color: var(--t-pos); }
.eng-callout-warn  { border-left-color: var(--t-warn); }
.eng-callout-error { border-left-color: var(--t-neg); }
.eng-callout-info  { border-left-color: var(--border); }

.eng-section { margin: 18px 0 0; }
.eng-h2 { font-size: 15px; margin: 0 0 8px; }
.eng-kicker { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }

/* G3-vocabulaire: Form / ActionRow / DetailsBlock / CardList / Img */
.eng-form { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 4px 0; }
/* Cel-extra's: meerdere actielinks in één cel staan los van elkaar (jinja-restant C,
   2026-08-27 — de Signal-catalogus draagt 3-5 links per rij; zonder ruimte lazen ze als
   één woord). */
.eng-cell-link { display: inline-block; margin: 0 .7em .15em 0; }
.eng-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.eng-field-label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.eng-form input[type="text"], .eng-form input[type="password"], .eng-form textarea, .eng-form select {
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
}
.eng-submit {
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.eng-submit:hover { border-color: currentColor; }
/* G3-restwerk 2026-08-22: FieldNote (toelichting tussen velden) en
   ActionButton (client-side knop, geen submit) binnen een Form. */
.eng-field-note { flex-basis: 100%; margin: 0; font-size: 11px; opacity: .75; }
.eng-field-note .eng-chip { margin-left: 0; }
.eng-button {
  font: inherit;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.eng-button:hover { border-color: currentColor; }
/* jinja-restant D (2026-08-27): ActionButton als cel-extra (returns
   "Kopieer ref") en de toon-wachtwoord-knop naast een password-veld
   (/login; login.js wisselt het input-type). */
.eng-cell-button { margin: 2px 4px 2px 0; }
.eng-pw-row { position: relative; display: block; }
.eng-pw-row input { width: 100%; box-sizing: border-box; padding-right: 40px; }
.eng-pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: inherit; opacity: .7; cursor: pointer;
}
.eng-pw-toggle:hover { opacity: 1; }
.eng-pw-toggle:focus-visible { outline: 2px solid var(--t-ink, currentColor); outline-offset: -2px; }

.eng-action-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; font-size: 13px; }
.eng-action-text { opacity: .7; }

.eng-details-block { margin: 10px 0; }
.eng-details-block > summary { cursor: pointer; font-size: 13px; }

.eng-card-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.eng-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.eng-card-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.eng-card-title { font-weight: 600; font-size: 14px; }
a.eng-card-title { text-decoration: none; }
a.eng-card-title:hover { text-decoration: underline; }
.eng-card-meta { font-size: 12px; opacity: .8; margin-top: 2px; }

.eng-img { max-width: 64px; max-height: 64px; display: block; }
/* G4 — rapportpagina's (report_html): kpi-subregel, backlink, paragrafen */
.eng-kpi-sub { font-size: 11px; opacity: .65; margin-top: 2px; font-variant-numeric: tabular-nums; }
.eng-backlink { font-size: 12px; margin-bottom: 4px; }
.eng-backlink a { color: inherit; opacity: .7; text-decoration: none; }
.eng-backlink a:hover { opacity: 1; text-decoration: underline; }
.eng-p { font-size: 13px; margin: 0 0 12px; }
.eng-p-heading { font-weight: 700; margin: 18px 0 4px; }
.eng-p-footnote { font-size: 11px; opacity: .65; margin: 10px 0 0; }
.eng-bullets { font-size: 13px; margin: 0 0 12px; padding-left: 20px; }

/* G3.x — upload-vocabulaire: FileField / RadioGroup / extra submit.
   Vorm overgenomen van de per-surface `.up-file*`-regels (brand_ops_*_
   upload.css), maar uitsluitend met Terminal-tokens. */
.eng-file {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
}
.eng-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.eng-file-btn {
  background: var(--accent);
  color: var(--accent-fg);
  padding: 8px 14px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.eng-file-name {
  color: var(--fg-3);
  font-size: 12px;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.eng-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-right: 10px;
  cursor: pointer;
}
.eng-submit-secondary { opacity: .8; }

/* G3.y — voortgangs-/verdelingsbalk; breedte via data-pct door de painter
   in brand_ops_util.js (CSP: geen inline style). */
.eng-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bg-3); margin: 6px 0; }
.eng-bar-seg { height: 100%; width: 0; background: var(--fg-3); }
.eng-bar-green { background: var(--t-pos); }
.eng-bar-amber { background: var(--t-warn); }
.eng-bar-red   { background: var(--t-neg); }
.eng-bar-grey  { background: var(--fg-3); }
.eng-checkbox { margin: 0 4px 0 0; vertical-align: middle; }
.eng-submit[disabled] { opacity: .6; cursor: not-allowed; }

/* Chart-blok (canon D1-D9; geometrie in shared/chart_geometry.py).
   Kleur uitsluitend via tokens — de macro kent geen hex. */
.eng-chart { margin: 8px 0 14px; overflow-x: auto; position: relative; }
.eng-chart svg { display: block; max-width: 100%; height: auto; font-variant-numeric: tabular-nums; }
.eng-chart-grid { stroke: var(--t-line2); stroke-width: 1; }
.eng-chart-zero { stroke: var(--t-ghost); stroke-width: 1; stroke-dasharray: 3 3; }
.eng-chart-tick, .eng-chart-xlabel { fill: var(--t-ink2); font-size: 11px; }
.eng-chart-endlabel { font-size: 9px; font-family: Consolas, ui-monospace, monospace; }
.eng-chart-line { fill: none !important; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.eng-chart-line-ghost { stroke: var(--t-ghost); stroke-width: 1.4; stroke-dasharray: 2 4; }
.eng-chart-line-compare { stroke-width: 1.5; }
.eng-chart-area { stroke: none; }
/* D3: gradient naar transparant, nooit boven 25% dekking. */
.eng-stop-top { stop-opacity: .18; }
.eng-stop-bottom { stop-opacity: 0; }
.eng-stop-pos { stop-color: var(--t-pos); }
.eng-stop-neg { stop-color: var(--t-neg); }
.eng-stop-ink { stop-color: var(--t-ink); }
.eng-stop-ink2 { stop-color: var(--t-ink2); }
.eng-stop-dim { stop-color: var(--t-dim); }
/* D9: stand als getal */
.eng-stand { margin: 8px 0 14px; }
.eng-stand-row { display: flex; flex-wrap: wrap; gap: 18px; }
.eng-stand-label { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.eng-stand-value { font-size: 18px; font-variant-numeric: tabular-nums; }
.eng-stand-value.eng-tone-pos { color: var(--t-pos); }
.eng-stand-value.eng-tone-neg { color: var(--t-neg); }
.eng-stand-inline { font-variant-numeric: tabular-nums; }
.eng-chart-hit { fill: transparent; stroke: none; }
.eng-chart-marker { stroke-width: 2; stroke-linecap: round; opacity: .85; }
.eng-tone-pos { stroke: var(--t-pos); fill: var(--t-pos); color: var(--t-pos); }
.eng-tone-neg { stroke: var(--t-neg); fill: var(--t-neg); color: var(--t-neg); }
.eng-tone-ink { stroke: var(--t-ink); fill: var(--t-ink); color: var(--t-ink); }
.eng-tone-ink2 { stroke: var(--t-ink2); fill: var(--t-ink2); color: var(--t-ink2); }
.eng-tone-dim { stroke: var(--t-dim); fill: var(--t-dim); color: var(--t-dim); }
.eng-tone-ghost { stroke: var(--t-ghost); fill: var(--t-ghost); color: var(--t-ghost); }
/* Klantdatakleur (2026-08-24): alleen bereikbaar via Chart(kind="bar")-
   reeksen met tone="data" (validate_chart weigert hem elders); de pagina
   herdefinieert --eng-ramp-data (bv. het brand-accent van een klant). */
.eng-tone-data { stroke: var(--eng-ramp-data, var(--t-info)); fill: var(--eng-ramp-data, var(--t-info)); color: var(--eng-ramp-data, var(--t-info)); }
.eng-chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 0; padding: 0; font-size: 11px; color: var(--t-ink2); }
.eng-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.eng-chart-swatch { display: inline-block; width: 11px; height: 9px; border-radius: 2px; background: currentColor; }
.eng-chart-swatch-marker, .eng-chart-swatch-line { height: 2px; border-radius: 1px; }
.eng-chart-note { font-size: 11px; color: var(--t-dim); margin-top: 4px; }
/* Scatter (G9): stippen met lage vuldekking + paneelrand zodat overlap
   telbaar blijft; dim-toon = visueel teruggezet punt. */
.eng-scat-axis { stroke: var(--t-line2); stroke-width: 1; }
.eng-scat-dot { fill-opacity: .55; stroke: var(--t-panel); stroke-width: 1.5; }
.eng-scat-label { fill: var(--t-ink2); font-size: 10px; font-family: Consolas, ui-monospace, monospace; }
.eng-spark { display: inline-block; vertical-align: middle; }
.eng-spark path { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.eng-spark-pos path { stroke: var(--t-pos); }
.eng-spark-neg path { stroke: var(--t-neg); }
.eng-spark-ink path { stroke: var(--t-ink2); }
/* D7-crosshair (static/surfaces/engine_chart.js, automatisch gelinkt door
   render_served zodra een pagina een lijn-/staafgrafiek draagt). */
.eng-chart-crosshair { stroke: var(--t-ghost); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.eng-chart-tip { position: absolute; pointer-events: none; font-size: 11px; line-height: 1.4; color: var(--t-ink); background: var(--t-panel); border: 1px solid var(--t-line2); border-radius: 4px; padding: 4px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px color-mix(in srgb, var(--t-ink) 12%, transparent); }
.eng-chart-tip[hidden] { display: none; }

/* G8 (2026-08-23): Checkbox als Form-veld + BusyState-blok. */
.eng-check { display: flex; align-items: center; gap: 8px; flex-direction: row; }
.eng-check .eng-field-label { margin: 0; }
.eng-busy { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--t-line2); border-radius: 6px; margin: 10px 0; }
.eng-busy[hidden] { display: none; }
.eng-busy-copy { display: flex; flex-direction: column; gap: 2px; }
.eng-busy-copy small { color: var(--t-ink2); }
.eng-spin { width: 14px; height: 14px; border: 2px solid var(--t-line2); border-top-color: var(--t-ink); border-radius: 50%; animation: eng-spin .9s linear infinite; flex: none; }
.eng-busy-bar { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg-3); min-width: 80px; }
.eng-busy-bar span { display: block; height: 100%; width: 35%; background: var(--t-ink2); animation: eng-busy-slide 1.4s ease-in-out infinite; }
@keyframes eng-spin { to { transform: rotate(360deg); } }
@keyframes eng-busy-slide { 0% { margin-left: 0; } 50% { margin-left: 65%; } 100% { margin-left: 0; } }

/* Home-golf (2026-08-24): generieke nav-primitieven. Neutrale basis —
   het redactionele register-ontwerp van /home leeft in de per-surface
   laag (static/surfaces/home.css); een andere pagina die NavList/
   SearchField adopteert krijgt hier een bruikbare, rustige default.
   Kleur uitsluitend via tokens (terminal.css levert ook de --u-*-familie). */
.eng-nav { margin: 18px 0; }
.eng-nav-eyebrow { font-family: var(--t-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--t-ink); margin: 0; display: flex; align-items: center; gap: 10px; }
.eng-nav-eyebrow-num { color: var(--accent); font-size: 12px; }
.eng-nav-desc { font-size: 12px; color: var(--t-ink2); margin: 8px 0 0; }
.eng-nav-count { display: block; margin-top: 8px; font-family: var(--t-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--t-ink2); font-variant-numeric: tabular-nums; }
.eng-nav-grid { display: grid; grid-template-columns: 1fr; min-width: 0; }
.eng-nav-row, .eng-nav-workrow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 2px; border-bottom: 1px solid var(--t-line); color: var(--t-ink); text-decoration: none; }
.eng-nav-num, .eng-nav-workcount { font-family: var(--t-mono); font-variant-numeric: tabular-nums; color: var(--t-ink2); }
.eng-nav-title, .eng-nav-worktitle { font-weight: 600; }
.eng-nav-rowdesc { font-size: 12px; color: var(--t-ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-nav-arrow { margin-left: auto; color: var(--t-ink2); }
.eng-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--t-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-ink2); white-space: nowrap; }
.eng-live-dot { width: 6px; height: 6px; flex: 0 0 6px; }
.eng-live-dot--ok { background: var(--pos); }
.eng-live-dot--att { background: var(--warn); }
.eng-range { width: 100%; max-width: 420px; accent-color: var(--t-ink); }
.eng-search { position: relative; max-width: 320px; }
.eng-search input { font: 400 14px/1.2 var(--t-sans); color: var(--t-ink); background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 0; padding: 10px 14px; width: 100%; }
.eng-search-hint { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; pointer-events: none; }
.eng-search-hint kbd { font-family: var(--t-mono); font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--t-ink2); border: 1px solid var(--t-line); padding: 2px 5px; }
.eng-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Filter-lege-staat: standaard verborgen; surface-JS toont hem. */
.eng-filter-empty { display: none; margin-top: 32px; color: var(--t-ink2); font-size: 14px; text-align: center; }
.eng-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.eng-dateline { display: block; font-family: var(--t-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-ink2); margin: 4px 0 6px; }

/* ── Rij-vocabulaire (2026-08-24): Meter / Heat / rule-left ─────────────
   Meter = aandeelbalkje ín een cel of lijstregel; breedte UITSLUITEND via
   de vaste klassen .eng-w-0..100 (CSP style-src 'self' — nooit een
   style-attribuut; het mechanisme van /partner/pce wordt hier
   motorstandaard). Kleur via de tokens --eng-ramp-N en --eng-heat-N met
   fallback op de t-tokens; een pagina herdefinieert de eng-tokens in
   haar eigen CSS voor een pagina-exacte ramp. (Grill r3 #1: een ster
   plus slash IN commentaartekst sluit het commentaar en sloopt de
   eerstvolgende regel — vandaar geen sterretjes-jokertekens hier.) */
.eng-meter { display: inline-flex; width: 96px; max-width: 100%; height: 8px; background: var(--eng-meter-track, var(--t-panel2)); overflow: hidden; vertical-align: middle; }
.eng-meter-seg { display: block; height: 100%; background: var(--eng-ramp-neutral, var(--t-dim)); }
.eng-meter-seg--own { background: var(--eng-ramp-own, var(--t-pos)); }
.eng-meter-seg--data { background: var(--eng-ramp-data, var(--t-info)); }
.eng-meter-seg--1 { background: var(--eng-ramp-1, var(--t-warn)); }
.eng-meter-seg--2 { background: var(--eng-ramp-2, var(--t-brown)); }
.eng-meter-seg--3 { background: var(--eng-ramp-3, var(--t-dim)); }
.eng-meter-seg--4, .eng-meter-seg--5, .eng-meter-seg--6,
.eng-meter-seg--neutral { background: var(--eng-ramp-neutral, var(--t-faint)); }
.eng-meter-seg--rest { background: var(--eng-ramp-rest, var(--t-ghost)); }
/* Functionele markers: identiteit nooit uit kleur alleen. */
.eng-meter-seg--mark { box-shadow: inset 0 0 0 1px var(--t-ink); }
.eng-meter-seg--hatch { background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--t-shadow, rgba(0,0,0,.35)) 3px 6px); }
/* Heat: intensiteitscel 1..5 op de --eng-heat-*-tokens. */
.eng-heat-1 { background: var(--eng-heat-1, var(--t-panel)); }
.eng-heat-2 { background: var(--eng-heat-2, var(--t-panel2)); }
.eng-heat-3 { background: var(--eng-heat-3, var(--t-ghost)); }
.eng-heat-4 { background: var(--eng-heat-4, var(--t-faint)); }
.eng-heat-5 { background: var(--eng-heat-5, var(--t-dim)); color: var(--t-ink); }
/* Kolom-scheidingslijn (bv. GBP-strook naast eurolanden). */
.eng-rule-left { border-left: 1px solid var(--t-line); }
/* Vaste breedteklassen 0-100 (gegenereerd; CSP-veilig breedtemechanisme). */
.eng-w-0 { width: 0%; }
.eng-w-1 { width: 1%; }
.eng-w-2 { width: 2%; }
.eng-w-3 { width: 3%; }
.eng-w-4 { width: 4%; }
.eng-w-5 { width: 5%; }
.eng-w-6 { width: 6%; }
.eng-w-7 { width: 7%; }
.eng-w-8 { width: 8%; }
.eng-w-9 { width: 9%; }
.eng-w-10 { width: 10%; }
.eng-w-11 { width: 11%; }
.eng-w-12 { width: 12%; }
.eng-w-13 { width: 13%; }
.eng-w-14 { width: 14%; }
.eng-w-15 { width: 15%; }
.eng-w-16 { width: 16%; }
.eng-w-17 { width: 17%; }
.eng-w-18 { width: 18%; }
.eng-w-19 { width: 19%; }
.eng-w-20 { width: 20%; }
.eng-w-21 { width: 21%; }
.eng-w-22 { width: 22%; }
.eng-w-23 { width: 23%; }
.eng-w-24 { width: 24%; }
.eng-w-25 { width: 25%; }
.eng-w-26 { width: 26%; }
.eng-w-27 { width: 27%; }
.eng-w-28 { width: 28%; }
.eng-w-29 { width: 29%; }
.eng-w-30 { width: 30%; }
.eng-w-31 { width: 31%; }
.eng-w-32 { width: 32%; }
.eng-w-33 { width: 33%; }
.eng-w-34 { width: 34%; }
.eng-w-35 { width: 35%; }
.eng-w-36 { width: 36%; }
.eng-w-37 { width: 37%; }
.eng-w-38 { width: 38%; }
.eng-w-39 { width: 39%; }
.eng-w-40 { width: 40%; }
.eng-w-41 { width: 41%; }
.eng-w-42 { width: 42%; }
.eng-w-43 { width: 43%; }
.eng-w-44 { width: 44%; }
.eng-w-45 { width: 45%; }
.eng-w-46 { width: 46%; }
.eng-w-47 { width: 47%; }
.eng-w-48 { width: 48%; }
.eng-w-49 { width: 49%; }
.eng-w-50 { width: 50%; }
.eng-w-51 { width: 51%; }
.eng-w-52 { width: 52%; }
.eng-w-53 { width: 53%; }
.eng-w-54 { width: 54%; }
.eng-w-55 { width: 55%; }
.eng-w-56 { width: 56%; }
.eng-w-57 { width: 57%; }
.eng-w-58 { width: 58%; }
.eng-w-59 { width: 59%; }
.eng-w-60 { width: 60%; }
.eng-w-61 { width: 61%; }
.eng-w-62 { width: 62%; }
.eng-w-63 { width: 63%; }
.eng-w-64 { width: 64%; }
.eng-w-65 { width: 65%; }
.eng-w-66 { width: 66%; }
.eng-w-67 { width: 67%; }
.eng-w-68 { width: 68%; }
.eng-w-69 { width: 69%; }
.eng-w-70 { width: 70%; }
.eng-w-71 { width: 71%; }
.eng-w-72 { width: 72%; }
.eng-w-73 { width: 73%; }
.eng-w-74 { width: 74%; }
.eng-w-75 { width: 75%; }
.eng-w-76 { width: 76%; }
.eng-w-77 { width: 77%; }
.eng-w-78 { width: 78%; }
.eng-w-79 { width: 79%; }
.eng-w-80 { width: 80%; }
.eng-w-81 { width: 81%; }
.eng-w-82 { width: 82%; }
.eng-w-83 { width: 83%; }
.eng-w-84 { width: 84%; }
.eng-w-85 { width: 85%; }
.eng-w-86 { width: 86%; }
.eng-w-87 { width: 87%; }
.eng-w-88 { width: 88%; }
.eng-w-89 { width: 89%; }
.eng-w-90 { width: 90%; }
.eng-w-91 { width: 91%; }
.eng-w-92 { width: 92%; }
.eng-w-93 { width: 93%; }
.eng-w-94 { width: 94%; }
.eng-w-95 { width: 95%; }
.eng-w-96 { width: 96%; }
.eng-w-97 { width: 97%; }
.eng-w-98 { width: 98%; }
.eng-w-99 { width: 99%; }
.eng-w-100 { width: 100%; }

/* Geldsignatuur (2026-08-26, eerste consument /dashboard): het valutateken
   in accent, de decimalen gedempt; het getal zelf erft kleur en gewicht.
   Tekst blijft de platte huisnotatie — dit is uitsluitend presentatie. */
.eng-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eng-money-sym { color: var(--accent); }
.eng-money-dec { color: var(--t-dim, var(--fg-3)); }

/* PillNav (2026-08-26): filter-/periodenavigatie als rij links. */
.eng-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.eng-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: inherit; text-decoration: none;
  white-space: nowrap;
}
.eng-pill:hover { border-color: currentColor; }
.eng-pill-active { border-color: currentColor; font-weight: 600; }
.eng-pill-count { font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.eng-th-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.eng-th-link:hover { border-bottom-style: solid; }
@media (max-width: 768px) {
  /* Mobiel: pillen scrollen horizontaal in één rij (geen sub-regels) met
     de K6-duimmaat van 36px als raakvlak. */
  .eng-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .eng-pill { min-height: 36px; }
}

/* Ledger-golf (jinja-restant B /products, 2026-08-27): zoekveld, verborgen
   form/knop, Dialog, kaart-thumb, inline-afbeelding. Neutrale basis; de
   pagina-skin verfijnt. */
.eng-form input[type="search"], .eng-fields input[type="search"] {
  font: inherit; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: inherit;
}
.eng-form[hidden], .eng-button[hidden] { display: none; }
/* Titelloze sectie (container met hooks/aria-label): geen lege kop in beeld. */
.eng-h2:empty { display: none; }
.eng-dialog {
  width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px));
  padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--t-panel, var(--panel)); color: inherit;
}
.eng-dialog::backdrop { background: color-mix(in srgb, var(--t-ink, black) 45%, transparent); }
.eng-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 8px; }
.eng-dialog-head .eng-h2 { margin: 0; }
.eng-dialog > :not(.eng-dialog-head) { margin-left: 20px; margin-right: 20px; }
.eng-dialog > :last-child { margin-bottom: 18px; }
.eng-card-thumb { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; float: left; margin: 0 12px 6px 0; }
.eng-card-mono { display: inline-flex; align-items: center; justify-content: center; font-family: var(--t-mono); font-weight: 600; color: var(--fg-3); }
.eng-inline-img { height: 1em; width: auto; vertical-align: -0.15em; }

/* jinja-restant E (2026-08-27): FieldGroup / rijke Checkbox / Cell.sub /
   Mount — eerste consumenten /users en de PC-cockpit. */
.eng-fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.eng-fieldset[hidden] { display: none; }
.eng-legend { font-size: 11px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; }
.eng-fieldset-sub { margin: 0 0 4px; font-size: 12px; opacity: .7; }
.eng-check-rich { align-items: flex-start; padding: 4px 0 4px 8px; margin-left: -8px; border-left: 2px solid transparent; cursor: pointer; }
.eng-check-rich input { margin-top: 3px; flex: 0 0 auto; }
.eng-check-rich:has(input:checked) { border-left-color: var(--t-info); }
.eng-check-rich:has(input:checked) .eng-check-label { font-weight: 600; }
.eng-check-rich:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.eng-check-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.eng-check-label .eng-code { font-size: 11px; margin-left: 6px; }
.eng-check-hint { font-size: 12px; opacity: .7; line-height: 1.45; }
.eng-cell-sub { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.eng-form input[readonly] { opacity: .7; }
.eng-mount:empty { min-height: 0; }
/* jinja-restant B (2026-08-27, eerste consument /inbound): velden van een
   FieldGroup staan BUITEN hun <form> (gebonden via form="…") — de veldstijl
   hangt daarom óók aan .eng-fields (de FieldGroup-wrapper; bewust NIET aan
   .eng-field: dat zou het FilterSelect op andere pagina's meekleuren —
   census 2026-08-27). */
.eng-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.eng-fields input[type="text"], .eng-fields input[type="password"], .eng-fields textarea, .eng-fields select {
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

/* Table.stack: onder 700px wordt élke rij een kaart en draagt elke cel zijn
   kolomlabel als ::before (data-col uit de kolomkop). Eén DOM voor beide
   breedtes — geen zijwaartse scroller op kerndata, geen tweede set velden. */
@media (max-width: 699px) {
  .eng-table-stack thead { display: none; }
  .eng-table-stack, .eng-table-stack tbody, .eng-table-stack tr.eng-row, .eng-table-stack td.eng-td { display: block; }
  .eng-table-stack tr.eng-row { border-top: 1px solid var(--border); padding: 8px 0; }
  .eng-table-stack tr.eng-row:first-child { border-top: 0; }
  .eng-table-stack td.eng-td { border-bottom: 0; padding: 4px 10px; min-width: 0; overflow-wrap: anywhere; }
  .eng-table-stack td.eng-td.eng-right { text-align: left; }
  .eng-table-stack td.eng-td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 2px;
  }
  .eng-table-stack td.eng-td[data-col=""]::before { content: none; }
  .eng-table-stack .eng-row.eng-red > td:first-child,
  .eng-table-stack .eng-row.eng-amber > td:first-child,
  .eng-table-stack .eng-row.eng-green > td:first-child { box-shadow: none; }
}