/*
 * Layout pieces shared by every board (design/tcoq/boards/*.dc.html: the <helmet> styles plus the repeated inline
 * styles), expressed in tokens. Markup: templates/components/{AppHeader,PageHeader,Card,FilterBar,KpiTile,DataTable}.
 * Board value → token used here: #f8fafc → --surface-app, #e2e8f0 → --border-subtle, #f1f5f9 → --divider,
 * #64748b → --text-muted, #334155 → --text-body, #0f172a → --text-strong, 10px radius → --radius-lg.
 */

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins over a component's display (a Tag, a flex row…): controllers toggle it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-strong); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-strong); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
::selection { background: var(--prodigy); color: var(--dark-matter); }

.tn { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.spacer { flex-grow: 1; }
.q { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ---- AppHeader ---------------------------------------------------------------------------------------------- */
.app-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--space-6);
  padding: 14px var(--space-8);
  background: var(--surface-header); color: var(--text-on-dark);
}
.app-header__logo { display: block; height: 22px; width: auto; }
.app-header__product { font-size: 15px; font-weight: var(--fw-semibold); padding-left: var(--space-5); border-left: 1px solid var(--border-inverse); }
.app-header__meta { font-size: 13px; color: var(--text-on-dark-muted); }
.app-header__help { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-on-dark-muted); text-decoration: none; }
.app-header__help:hover { color: var(--text-on-dark); }

.app-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  padding: 0 var(--space-8);
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
}
.app-nav__link {
  display: inline-block; padding: 14px 12px 12px;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.app-nav__link:hover { color: var(--text-strong); text-decoration: none; }
.app-nav__link[aria-current="page"] { color: var(--text-strong); border-bottom-color: var(--prodigy); }

/* ---- Page and PageHeader ------------------------------------------------------------------------------------ */
.page { max-width: 1440px; margin: 0 auto; padding: var(--space-6) var(--space-8) 56px; display: flex; flex-direction: column; gap: var(--space-5); }
.page--narrow { max-width: 1120px; }

.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px var(--space-6); }
.page-header__titles { display: flex; flex-direction: column; gap: var(--space-1); flex-grow: 1; }
.page-header__title { font-size: 28px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.page-header__actions { display: contents; } /* tags and buttons sit in the header row itself, 24px apart, as on the boards */

/* ---- Rows of cards ------------------------------------------------------------------------------------------ */
.row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: stretch; }
.row--top { align-items: flex-start; }
.row > .col-wide { flex: 2 1 640px; }
.row > .col-side { flex: 1 1 340px; }
.row > .col-half { flex: 1 1 520px; }
.row > .col-main { flex: 999 1 760px; min-width: 0; }

/* ---- Card --------------------------------------------------------------------------------------------------- */
.card {
  min-width: 0; display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card--section { padding: var(--space-6); gap: var(--space-4); }
.card--flush { padding: 0; overflow: hidden; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.card__titles { flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.card__title { font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: var(--leading-snug); }
.card--section .card__title { font-size: var(--text-lg); }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.breadcrumb__current { color: var(--text-strong); font-weight: var(--fw-medium); }
.breadcrumb__sep { color: var(--text-subtle); }

/* ---- FilterBar ---------------------------------------------------------------------------------------------- */
.filter-bar { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px var(--space-4); padding: var(--space-4) var(--space-5); }
.filter-bar__group { display: flex; flex-direction: column; gap: 6px; }
.filter-bar__label { font-size: 13px; font-weight: var(--fw-medium); color: var(--text-strong); }
.filter-bar__switch { padding-bottom: 6px; }
.filter-bar__toggles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); min-height: 32px; }
.filter-bar__reset { margin-left: auto; padding-bottom: 2px; }

/* Field widths from the boards (Select/Input `width` prop). */
.w-72 { width: 72px; } .w-96 { width: 96px; } .w-130 { width: 130px; } .w-140 { width: 140px; } .w-150 { width: 150px; }
.w-160 { width: 160px; } .w-170 { width: 170px; } .w-180 { width: 180px; } .w-190 { width: 190px; }
.w-200 { width: 200px; } .w-220 { width: 220px; } .w-240 { width: 240px; } .w-260 { width: 260px; }

/* ---- KpiTile ------------------------------------------------------------------------------------------------ */
.kpi-strip { display: grid; align-content: start; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
/* The strip loads as a Turbo Frame: keep its height while it loads, so the charts below don't jump (Lighthouse CLS). */
.kpi-strip--six { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } /* the six sub-bucket KPIs (D-132), one row at 1440 px */
.kpi { gap: var(--space-2); padding: var(--space-4); }
/* Maturity (D-137): the north star card spans two columns beside the three activity tiles; one column on narrow screens. */
.maturity-top { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .maturity-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .north-star { grid-column: 1 / -1; } }
@media (max-width: 640px) { .maturity-top { grid-template-columns: minmax(0, 1fr); } }
.north-star__value { font-size: 40px; }
.north-star__bar { display: block; width: 100%; height: 12px; border-radius: var(--radius-sm); overflow: hidden; }
.north-star__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-body); }
.north-star__legend li { display: inline-flex; align-items: center; gap: 6px; }
.north-star__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
/* Proactive kinds in the prevention and process-control colours, reactive kinds in the product-check and failure colours. */
.north-star__part--planned { fill: var(--bucket-p); background: var(--bucket-p); }
.north-star__part--process { fill: var(--split-a); background: var(--split-a); }
.north-star__part--product { fill: var(--split-b); background: var(--split-b); }
.north-star__part--reactive { fill: var(--bucket-none); background: var(--bucket-none); }
.north-star__part--failure { fill: var(--bucket-if); background: var(--bucket-if); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kpi__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; color: var(--text-body); }
.kpi__figure { display: flex; align-items: baseline; gap: var(--space-2); }
.kpi__value { font-size: 26px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.kpi__sub { font-size: 13px; color: var(--text-muted); }
.kpi__spark { display: block; width: 100%; height: 28px; }
.kpi__bench { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi__bench-bar { display: block; width: 100%; height: 14px; overflow: visible; }
.kpi__bench-track { fill: var(--track); }
.kpi__bench-marker { fill: var(--marker); }
.kpi__bench-text { font-size: var(--text-xs); }
.kpi__bench-text--above { color: var(--text-bad); }
.kpi__bench-text--below { color: var(--text-good); }

/* Bucket and series fills for SVG/HTML marks drawn outside Highcharts. */
.fill-bucket-p { fill: var(--bucket-p); background: var(--bucket-p); }
.fill-bucket-a { fill: var(--bucket-a); background: var(--bucket-a); }
.fill-bucket-if { fill: var(--bucket-if); background: var(--bucket-if); }
.fill-bucket-ef { fill: var(--bucket-ef); background: var(--bucket-ef); }
.fill-bucket-none { fill: var(--bucket-none); background: var(--bucket-none); }
.fill-total { fill: var(--chart-total); background: var(--chart-total); }
.fill-copq { fill: var(--chart-copq); background: var(--chart-copq); }

/* ---- Chart containers and legends --------------------------------------------------------------------------- */
.chart { position: relative; width: 100%; min-height: 280px; }
.chart--sm { min-height: 230px; }
.chart__summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chart[aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s; }

/* ---- Loading placeholders (D-146): mock tiles, gauges and charts with a soft shimmer while data loads ----------- */
/* The shimmer: a lighter band moving over the placeholder's fill. */
.skeleton, .chart[aria-busy="true"]:empty::before {
    background: linear-gradient(90deg, var(--track) 30%, color-mix(in srgb, var(--track) 45%, var(--surface-card)) 50%, var(--track) 70%) 0 0 / 300% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton { display: block; border-radius: var(--radius-sm); }
.skeleton--label { width: 55%; height: 12px; }
.skeleton--value { width: 45%; height: 24px; }
.skeleton--spark { width: 100%; height: 22px; }
.skeleton--meter { width: 100%; height: 6px; }
.skeleton--title { width: 22%; height: 16px; }
.skeleton--line { width: 40%; height: 12px; }
.skeleton--wide { width: 70%; }
.skeleton-tile { justify-content: space-between; min-height: 132px; }
.skeleton-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
/* A chart before its first data: a mock bar chart in the canvas (no chart there yet, so :empty). */
.chart[aria-busy="true"]:empty { opacity: 1; }
.chart[aria-busy="true"]:empty::before {
    content: ""; position: absolute; inset: var(--space-5) var(--space-3) var(--space-6) var(--space-6);
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'><rect x='2' y='28' width='6' height='22' rx='1'/><rect x='10' y='20' width='6' height='30' rx='1'/><rect x='18' y='24' width='6' height='26' rx='1'/><rect x='26' y='14' width='6' height='36' rx='1'/><rect x='34' y='30' width='6' height='20' rx='1'/><rect x='42' y='18' width='6' height='32' rx='1'/><rect x='50' y='10' width='6' height='40' rx='1'/><rect x='58' y='22' width='6' height='28' rx='1'/><rect x='66' y='16' width='6' height='34' rx='1'/><rect x='74' y='26' width='6' height='24' rx='1'/><rect x='82' y='12' width='6' height='38' rx='1'/><rect x='90' y='20' width='6' height='30' rx='1'/></svg>") 0 0 / 100% 100% no-repeat;
}
/* Reloading (a filter changed): the drawn chart dims, and a band moves over it. */
.chart[aria-busy="true"]:not(:empty)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 35%, color-mix(in srgb, var(--surface-card) 60%, transparent) 50%, transparent 65%) 0 0 / 300% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
/* KPI tiles and gauges in a frame that is loading new figures: their values turn into placeholder bars. */
turbo-frame[aria-busy="true"] :is(.kpi__value, .kpi__sub, .gauge__value, .gauge__hint) {
    color: transparent; border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--track) 30%, color-mix(in srgb, var(--track) 45%, var(--surface-card)) 50%, var(--track) 70%) 0 0 / 300% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
turbo-frame[aria-busy="true"] :is(.kpi__spark, .kpi__bench, .kpi .aq-tag, .gauge__meter) { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) {
    .skeleton, .chart[aria-busy="true"]:empty::before, .chart[aria-busy="true"]:not(:empty)::after, turbo-frame[aria-busy="true"] :is(.kpi__value, .kpi__sub, .gauge__value, .gauge__hint) { animation: none; }
}

/* Dashboard (board 3): drill breadcrumb links, the custom range inputs, the expand dialog. */
.breadcrumb__link { padding: 0; border: 0; background: none; font: inherit; color: var(--text-link); cursor: pointer; }
.breadcrumb__link:hover { color: var(--text-strong); text-decoration: underline; }
.filter-bar__custom { display: flex; gap: 12px; }
.filter-bar__custom[hidden] { display: none; }
.chart-dialog { width: min(1200px, calc(100vw - 64px)); max-height: calc(100vh - 64px); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); }
.chart-dialog::backdrop { background: var(--overlay-scrim); }
.chart-dialog__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
/* The data table under a chart, from its export menu (every chart, D-160) or the expanded copy. */
.highcharts-data-table { overflow-x: auto; max-width: 100%; }
.highcharts-data-table table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); margin-top: var(--space-4); color: var(--text-body); }
.highcharts-data-table th,
.highcharts-data-table td { padding: 6px 10px; border-bottom: 1px solid var(--divider); text-align: left; white-space: nowrap; }
.highcharts-data-table thead th { color: var(--text-strong); font-weight: 600; }
.highcharts-data-table caption { display: none; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-body); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); flex: none; }

/* ---- DataTable ---------------------------------------------------------------------------------------------- */
.data-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.card--flush > .data-table-wrap { border: 0; border-radius: 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; white-space: nowrap;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
  padding: 10px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-subtle);
}
.data-table td { padding: var(--space-2) 10px; border-bottom: 1px solid var(--divider); color: var(--text-strong); vertical-align: middle; }
.data-table--top td { vertical-align: top; padding: 10px; }
.data-table--plain th { background: transparent; padding: var(--space-2) 10px; }
.data-table tr.data-table__row--selected td { background: var(--surface-selected); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .muted { color: var(--text-muted); }
.data-table .aq-status { white-space: nowrap; } /* a status badge never wraps inside a cell */
.data-table__sub { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- Styleguide (/_styleguide) ------------------------------------------------------------------------------ */
.sg-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sg-item + .sg-item { border-top: 1px solid var(--divider); padding-top: var(--space-5); }
.sg-live { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); min-width: 0; }
.sg-live--stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sg-ref { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sg-ref__img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--white); }
.sg-ref__missing { padding: var(--space-4); border: 1px dashed var(--border-default); border-radius: var(--radius-md); font-size: 13px; color: var(--text-muted); }
.sg-name { font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch code { white-space: nowrap; }
.sg-swatch { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-body); }
.sg-swatch .swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.sg-theme { display: inline-flex; gap: var(--space-2); }

/* ---- Forms (board 1) ---------------------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); align-items: start; }
.form-grid--three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Settings (D-162): the data source as two option cards, the connection in groups, greyed out while the demo is shown. */
.source-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.source-switch__option { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--space-4); text-align: left; font: inherit; color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; }
.source-switch__option:hover { border-color: var(--border-strong); }
.source-switch__option[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
.source-switch__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }
.source-switch__text { font-size: var(--text-xs); color: var(--text-muted); }
.connection__group { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--divider); }
.connection__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.connection__title { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.connection__link { font-size: 13px; }
.card--inactive .card__head, .card--inactive [inert] { opacity: 0.45; filter: grayscale(1); }
.card__inactive-note { margin: 0; font-size: 13px; color: var(--text-body); }
.tenant-field { display: flex; align-items: flex-end; gap: var(--space-2); }
.tenant-field > .aq-field { flex-grow: 1; }
.tenant-field__suffix { font-size: var(--text-sm); color: var(--text-muted); padding-bottom: 30px; } /* level with the input, above the hint */
.input-unit { display: inline-flex; align-items: center; gap: var(--space-2); }
.input-unit__label { font-size: var(--text-sm); color: var(--text-muted); }
/* A wrapping row: buttons, tags, a chart's own controls, the Product quality scope switch. */
.button-row, .tag-row, .pq-controls, .pq-scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.form-feedback { font-size: 13px; color: var(--text-muted); }
/* Settings revenue grid (board 1): annual rows, or month rows when "Enter monthly figures" is on (no JS needed). */
.revenue-grid__monthly { display: none; }
.revenue-grid:has(input[name="monthly"]:checked) .revenue-grid__monthly { display: table-row-group; }
.revenue-grid:has(input[name="monthly"]:checked) .revenue-grid__annual { display: none; }
.revenue-grid__year { font-weight: var(--fw-semibold); color: var(--text-strong); white-space: nowrap; }
.revenue-grid__total { font-weight: var(--fw-semibold); color: var(--text-strong); }
.aq-input[readonly] { background: var(--surface-subtle); color: var(--text-body); }

/* ---- Notice (boards 1–2: invalid token, IP-blocked, price changed) ------------------------------------------- */
.notice { display: flex; flex-direction: column; gap: var(--space-1); padding: 12px 14px; border: 1px solid; border-radius: var(--radius-md); font-size: 13px; color: var(--text-body); }
.notice__title { font-weight: var(--fw-semibold); }
.notice--danger { border-color: var(--status-danger-bg); background: color-mix(in srgb, var(--status-danger-bg) 40%, var(--surface-card)); }
.notice--danger .notice__title { color: var(--status-danger-fg); }
.notice--warning { border-color: var(--status-warning-bg); background: color-mix(in srgb, var(--status-warning-bg) 40%, var(--surface-card)); }
.notice--warning .notice__title { color: var(--status-warning-fg); }
.notice--info { border-color: var(--status-info-bg); background: color-mix(in srgb, var(--status-info-bg) 40%, var(--surface-card)); }
.notice--info .notice__title { color: var(--status-info-fg); }
.notice--success { border-color: var(--status-success-bg); background: color-mix(in srgb, var(--status-success-bg) 40%, var(--surface-card)); }
.notice--success .notice__title { color: var(--status-success-fg); }
.app-banner { padding: var(--space-3) var(--space-8) 0; max-width: 1440px; margin: 0 auto; }

/* ---- Evidence box (board 1: "EUR detected …") ---------------------------------------------------------------- */
.evidence { display: flex; flex-direction: column; gap: 2px; padding: 14px var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-subtle); }
.evidence__title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.evidence__text { font-size: 13px; color: var(--text-body); }

/* ---- Board 2: plant card, grid ------------------------------------------------------------------------------ */

.card--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px var(--space-6); }
.card__titles--wide { flex: 1 1 380px; }
.card--section.card--row { padding: var(--space-5); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px var(--space-6); }
/* The single plant's name only matters without a plant split ("No plant split" has value 0; D-117). */
.plant-form:not(:has(select[name="plant_list"] option[value="0"]:checked)) .plant-form__name { display: none; }
/* Numbers always right-aligned in inputs, so digits line up (every numeric input has an inputmode). */
.aq-input[inputmode="decimal"], .aq-input[inputmode="numeric"] { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); }
.form-feedback--error { color: var(--status-danger-fg); }

.job-progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: var(--radius-xs); background: var(--track); overflow: hidden; }
.job-progress::-webkit-progress-bar { background: var(--track); }
.job-progress::-webkit-progress-value { background: var(--prodigy-700); }
.job-progress::-moz-progress-bar { background: var(--prodigy-700); }
/* A job started from a header button (Re-run AI): the bar sits under the button while it runs. */
.job-status { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 12px; padding: var(--space-2) 12px; border-radius: var(--radius-md); background: var(--dark-matter); color: var(--white); }
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: 13px; font-weight: var(--fw-medium); }
.bulk-bar .aq-select, .bulk-bar .aq-input { background: var(--slate-800); color: var(--white); border-color: var(--border-inverse); }

.data-table--grid { min-width: 1360px; }
.cell-set { min-width: 200px; }
.cell-stack > span { display: block; } /* a value with its sub-line underneath */
.cell-set__name { display: block; font-weight: var(--fw-medium); color: var(--text-link); }
.cell-ai { max-width: 240px; }
.cell-fields { max-width: 240px; }
.cell-fields .tag-row { gap: var(--space-1); }
/* Sub-buckets (D-134): one select per split of the row's bucket, stacked. */
.cell-split { min-width: 180px; }
.split-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.field-picker { position: relative; display: inline-block; margin-top: var(--space-1); }
.field-picker > summary { list-style: none; }
.field-picker > summary::-webkit-details-marker { display: none; }
.field-picker__panel { position: absolute; z-index: var(--z-overlay); left: 0; top: calc(100% + 4px); min-width: 240px; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ---- Set activity (board 4) ------------------------------------------------------------------------------------- */
.set-table .data-table { min-width: 900px; }
.set-row td { padding-top: 6px; padding-bottom: 6px; }
.set-row--unclassified { opacity: 0.55; }
.set-row__link { display: flex; align-items: center; gap: var(--space-2); color: var(--text-strong); text-decoration: none; min-width: 220px; }
.set-row__link:hover .set-row__title { text-decoration: underline; }
.set-row__bar { display: inline-block; flex: none; width: 4px; height: 32px; border-radius: 1px; }
.set-row__title { font-weight: var(--fw-medium); }
.set-row__cost { font-weight: var(--fw-medium); color: var(--text-strong); }
.set-row__trend { font-weight: var(--fw-medium); white-space: nowrap; }
.set-row__trend.is-good { color: var(--text-good); }
.set-row__trend.is-bad { color: var(--text-bad); }
.set-row__trend.is-flat { color: var(--text-muted); }
.set-table__empty { padding: var(--space-5); }
.sparkline { display: block; width: 120px; height: 30px; }
/* A sparkline with its 3-month total beside it (Process activity, D-120). */
.spark-cell { display: inline-flex; align-items: center; gap: var(--space-3); }
.spark-cell__total { min-width: 4.5em; text-align: right; }
.sparkline--records polyline { stroke: var(--text-muted); }
.sparkline--cost polyline { stroke: var(--chart-total); }
.sparkline--none polyline { stroke: var(--bucket-none); }
.sparkline__trend { stroke: var(--chart-trend); }
.set-detail { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.set-detail__chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* The set detail as a centred modal (D-148, was a side panel): figures on top, the two charts side by side below. */
.set-modal { width: min(1200px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); overflow-y: auto; }
.set-modal::backdrop { background: var(--overlay-scrim); }
.set-detail__charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 1023px) {
    .set-modal { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
    .set-detail__charts { grid-template-columns: minmax(0, 1fr); }
}
.set-detail__head { display: flex; align-items: flex-start; gap: var(--space-2); }
.set-detail__titles { flex-grow: 1; gap: 2px; }
.set-detail__section { display: flex; flex-direction: column; gap: 6px; }
.set-detail__heading { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.stat__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.stat__value { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.stat__value--bad { color: var(--text-bad); }

/* ---- Analytics (board 5) ------------------------------------------------------------------------------------ */
.page-note { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.chart--flow { min-height: 360px; }
.chart-drill-node { cursor: pointer; } /* the Sankey's "Other sets (n)" node opens those sets (D-121) */
.chart--heatmap { min-height: 200px; }
.legend__end { margin-left: auto; }
.swatch--cost-up { background: var(--chart-copq); border-radius: 0; }
.swatch--cost-down { background: var(--chart-cost-down); border-radius: 0; }
/* The heatmap's year pager (D-125): ‹ Nov 2025 – Oct 2026 ›. */
.pager { display: inline-flex; align-items: center; gap: var(--space-1); }
.pager__label { min-width: 150px; text-align: center; font-size: 13px; color: var(--text-strong); }
.heat-legend { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.heat-legend__ramp { display: inline-flex; gap: 2px; }
.heat-legend__step { display: inline-block; width: 22px; height: 10px; }
.heat-1 { background: var(--heat-1); }
.heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); }
.heat-4 { background: var(--heat-4); }
.heat-5 { background: var(--heat-5); }
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.gauge { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.gauge__label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.gauge__value { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.gauge__meter { display: block; width: 100%; height: 6px; }
.gauge__track { fill: var(--track); }
.gauge__fill--good { fill: var(--meter-good); }
.gauge__fill--warn { fill: var(--meter-warn); }
.gauge__hint { font-size: var(--text-xs); color: var(--text-subtle); }
.issue-list { display: flex; flex-direction: column; }
.issue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 10px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.issue__text { flex: 1 1 320px; color: var(--text-strong); }
.issue--more { color: var(--text-muted); }

/* ---- MultiSelect (templates/components/MultiSelect.html.twig; decisions D-087) ------------------------------- */
.multi-select { position: relative; }
.multi-select__trigger { display: flex; align-items: center; list-style: none; position: relative; }
.multi-select__trigger::-webkit-details-marker { display: none; }
.multi-select__trigger:focus, .multi-select__trigger:focus-visible { outline: none; border-color: var(--border-default); box-shadow: none; } /* as .aq-select (D-128) */
.multi-select__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; }
.multi-select__panel {
  position: absolute; z-index: var(--z-overlay); top: calc(100% + 4px); left: 0; min-width: 100%;
  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.multi-select__panel .aq-check { white-space: nowrap; }

/* Board 3: the Top 10 drivers under the Pareto, and the comparison line under Record activity (D-088). */
.driver-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.driver-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 5px 0; border-top: 1px solid var(--divider); font-size: var(--text-xs); }
.driver-row__n { width: 16px; flex: none; color: var(--text-muted); }
.driver-row__name { flex-grow: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-strong); }
.driver-row__value { flex: none; color: var(--text-strong); }
.chart__footnote { font-size: var(--text-xs); }

/* AI confidence as a Harvey ball (templates/components/ConfidenceBall.html.twig; D-093). */
.harvey { display: inline-flex; align-items: center; flex: none; cursor: help; }
.harvey__ring { fill: none; stroke: var(--bucket-p); stroke-width: 1.5; }
.harvey__fill { fill: var(--bucket-p); }

/* Board 2: a group header row per set group (D-093) and the cost-field picker's Close button. */
.data-table .group-row td { background: var(--surface-subtle); border-bottom: 1px solid var(--border-subtle); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.group-row__name { font-weight: var(--fw-semibold); color: var(--text-strong); }
.group-row__count { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.field-picker__actions { display: flex; justify-content: flex-end; padding-top: var(--space-1); border-top: 1px solid var(--divider); }

/* ---- Help (D-115): the help icon of every KPI and chart, and the side drawer it opens --------------------------- */
.card__title-row { display: flex; align-items: center; gap: var(--space-1); }
.help-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-muted); }
.help-button:hover { color: var(--text-strong); background: var(--surface-app); }
/* ---- Diagnose panel (D-143): one modal with three lanes, what it is, the widget and the expert view -------------- */
.diagnose { width: min(1440px, calc(100vw - 48px)); height: calc(100vh - 48px); height: calc(100dvh - 48px); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); overflow: hidden; }
.diagnose::backdrop { background: var(--overlay-scrim); }
.diagnose[open] { display: flex; flex-direction: column; }
.diagnose__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.diagnose__head > div { min-width: 0; }
.diagnose__eyebrow { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.diagnose__title { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--text-strong); overflow-wrap: anywhere; }
.diagnose__title:focus, .diagnose__title:focus-visible { outline: none; }
.diagnose__lanes { --diagnose-help: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: var(--diagnose-help) minmax(0, 1.3fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); transition: grid-template-columns 0.2s ease; }
/* The frame's lanes (what it is, the expert view) take their places around the widget's own lane: placement, not
   markup. While they load, the loading text stands where the expert view will be. */
.diagnose__lanes > turbo-frame { display: contents; }
.diagnose .diagnose__lane--help { grid-column: 1; grid-row: 1; }
.diagnose .diagnose__lane--subject { grid-column: 2; grid-row: 1; }
.diagnose .diagnose__lane--expert, .diagnose .diagnose__loading { grid-column: 3; grid-row: 1; }
.diagnose__lane { min-width: 0; min-height: 0; overflow-y: auto; padding: var(--space-5); border-left: 1px solid var(--divider); }
.diagnose__lane--help { border-left: 0; }
.diagnose__lane--subject { background: var(--surface-app); }
.diagnose__lane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.diagnose__lane-head .diagnose__lane-title { margin: 0; }
.diagnose__lane-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.diagnose__collapse { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.diagnose__collapse svg { transition: transform 0.2s ease; }
.diagnose__loading { margin: 0; padding: var(--space-5); border-left: 1px solid var(--divider); }
/* "What it is" folded into a rail (D-181): the toggle, then the lane's title running down. */
.diagnose--help-collapsed .diagnose__lanes { --diagnose-help: 48px; }
.diagnose--help-collapsed .diagnose__lane--help { overflow: hidden; padding: var(--space-3) var(--space-2); }
.diagnose--help-collapsed .diagnose__lane--help .diagnose__lane-head { flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: var(--space-3); margin: 0; }
.diagnose--help-collapsed .diagnose__lane--help .diagnose__lane-title { writing-mode: vertical-rl; white-space: nowrap; }
.diagnose--help-collapsed .diagnose__collapse { margin: 0; }
.diagnose--help-collapsed .diagnose__collapse svg { transform: rotate(180deg); }
.diagnose--help-collapsed .diagnose__lane-body { display: none; }
/* The copied widget fills its lane, whatever its place in the page's grid. */
.diagnose__copy { width: 100%; max-width: none; margin: 0; flex: none; }
.diagnose__lanes--page { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin-top: var(--space-4); }
.diagnose__lanes--page .diagnose__lane--expert { border-left: 1px solid var(--divider); }
.diagnose__lanes--page .diagnose__lane { overflow: visible; }
@media (max-width: 1279px) {
    .diagnose { width: calc(100vw - 32px); height: calc(100vh - 32px); height: calc(100dvh - 32px); }
    .diagnose__lanes { --diagnose-help: minmax(0, 0.9fr); }
    .diagnose__lane, .diagnose__loading { padding: var(--space-4); }
}
/* Narrow screens: one column that scrolls as a whole; "What it is" folds to its title bar above the widget. */
@media (max-width: 1023px) {
    .diagnose { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
    .diagnose__head { padding: var(--space-3) var(--space-4); }
    .diagnose__lanes, .diagnose__lanes--page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
    .diagnose__lane { min-height: auto; }
    .diagnose .diagnose__lane--help, .diagnose .diagnose__lane--subject, .diagnose .diagnose__lane--expert, .diagnose .diagnose__loading { grid-column: 1; grid-row: auto; }
    .diagnose .diagnose__lane--help { order: 1; }
    .diagnose .diagnose__lane--subject { order: 2; }
    .diagnose .diagnose__lane--expert, .diagnose .diagnose__loading { order: 3; }
    .diagnose__lane, .diagnose__loading, .diagnose__lanes--page .diagnose__lane--expert { overflow: visible; border-left: 0; border-top: 1px solid var(--divider); }
    .diagnose__lane--help { border-top: 0; }
    .diagnose__collapse svg { transform: rotate(90deg); }
    .diagnose--help-collapsed .diagnose__lane--help { padding: var(--space-3) var(--space-4); }
    .diagnose--help-collapsed .diagnose__lane--help .diagnose__lane-head { flex-direction: row; align-items: center; justify-content: space-between; }
    .diagnose--help-collapsed .diagnose__lane--help .diagnose__lane-title { writing-mode: horizontal-tb; }
    .diagnose--help-collapsed .diagnose__collapse svg { transform: rotate(-90deg); }
}
@media (max-width: 639px) {
    .diagnose__lane, .diagnose__loading { padding: var(--space-3) var(--space-4); }
    .diagnose__title { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
    .diagnose__lanes, .diagnose__collapse svg { transition: none; }
}

/* ---- Expert view (D-142): the right lane of the diagnose panel ------------------------------------------------- */
.expert__header { margin-bottom: var(--space-4); }
.expert__verdict { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); }
.expert__headline { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
.expert__list, .expert__plain { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.expert__plain { padding-left: var(--space-4); list-style: disc; }
.expert__plain li { margin-bottom: var(--space-1); }
.expert__item { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.expert__dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--text-muted); }
.expert__item--good .expert__dot { background: var(--status-success); }
.expert__item--watch .expert__dot { background: var(--status-warning); }
.expert__item--bad .expert__dot { background: var(--status-danger); }
.expert__computed { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-app); }
.expert__computed summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-strong); }
.expert__computed ul { margin-top: var(--space-2); }
.expert__source { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.expert__status { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.expert__spinner { width: 14px; height: 14px; border: 2px solid var(--border-subtle); border-top-color: var(--text-muted); border-radius: 50%; animation: expert-spin 0.8s linear infinite; }
turbo-frame#expert-reading:not([aria-busy]) > .expert__status { display: none; }
turbo-frame#expert-reading[aria-busy="true"] > .expert__reading { opacity: 0.55; }
@keyframes expert-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .expert__spinner { animation: none; } }
/* A card's Expand action, icon only (D-141). */
.icon-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-button:hover { color: var(--text-strong); background: var(--surface-muted); }
.help-drawer { position: fixed; inset: 0 0 0 auto; width: min(460px, 100vw); height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg); }
.help-drawer::backdrop { background: var(--overlay-scrim); }
.help-drawer__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); }
.help-drawer__label { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.help-drawer[open] { display: flex; flex-direction: column; }
.help-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }
.help { display: flex; flex-direction: column; gap: var(--space-5); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.help__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--text-strong); }
.help__heading { margin-bottom: var(--space-1); font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.help__section p { margin: 0 0 var(--space-2); }
/* Process activity (D-151): the signal and unclassified counts and the sparkline months, above the table. */
.set-table__counts { align-items: center; margin-bottom: var(--space-3); }
/* The ingest banner (D-152): data still coming in, with progress and "Update figures". */
.ingest-banner .notice__text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.ingest-banner__title { font-weight: var(--fw-semibold); color: var(--text-strong); }
.ingest-banner__actions { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.ingest-banner .job-progress { width: 160px; }
.ingest-banner__eta { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* Product quality (D-157) */
.kpi-strip--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpi-strip--five { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.pq-sync { margin: 0; }
.pq-read { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.pq-header { margin: 0 0 var(--space-2); font-size: 13px; font-weight: var(--fw-medium); color: var(--text-strong); }
.pq-search .aq-input { width: 200px; }
.chart--pq-heatmap, .chart--pq-profile { min-height: 180px; }
.pq-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-body); }
.pq-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pq-swatch { width: 10px; height: 10px; border-radius: 2px; }
.pq-swatch--not_capable, .pq-cell--not_capable { background: var(--pq-not-capable); }
.pq-swatch--marginal, .pq-cell--marginal { background: var(--pq-marginal); }
.pq-swatch--capable, .pq-cell--capable { background: var(--pq-capable); }
.pq-swatch--highly_capable, .pq-cell--highly_capable { background: var(--pq-highly-capable); }
.pq-swatch--few { background: var(--pq-few); }
.pq-swatch--unspecified { background: var(--pq-unspecified); }
.pq-cell { color: var(--text-strong); text-align: center; }
.pq-cell--not_capable, .pq-cell--highly_capable { color: var(--surface-card); }
.pq-grid { margin-top: var(--space-3); max-height: 420px; overflow: auto; }
.pq-grid .data-table td, .pq-grid .data-table th { padding: 4px 6px; font-size: var(--text-xs); white-space: nowrap; }
/* The stage flow navigator (D-163): stage cards of equal height, the "where caught" bar, the set list. */
.pq-nav { gap: var(--space-5); }
.pq-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); align-items: stretch; }
.pq-flow__arrow { align-self: center; font-size: 20px; color: var(--text-muted); }
.pq-flow__card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px var(--space-4); text-align: left; font: inherit; color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
button.pq-flow__card { cursor: pointer; }
button.pq-flow__card:hover { border-color: var(--border-strong); }
.pq-flow__card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 0.5px var(--accent); }
.pq-flow__card--empty { border-style: dashed; background: var(--surface-subtle); }
.pq-flow__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.pq-flow__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pq-flow__share { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.pq-flow__summary { font-size: var(--text-xs); color: var(--text-body); }
.pq-flow__label { margin-top: 2px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pq-flow__top { display: flex; flex-direction: column; gap: 2px; }
.pq-flow__row { display: flex; justify-content: space-between; gap: var(--space-2); min-height: 18px; font-size: var(--text-xs); color: var(--text-body); }
.pq-flow__set { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-flow__more { margin-top: auto; padding-top: 4px; font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-link); }
.pq-flow__chip { align-self: flex-start; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); background: var(--status-warning-bg); color: var(--status-warning-fg); }
.pq-flow__card--raw_material .pq-flow__name::before, .pq-flow__card--intermediate .pq-flow__name::before, .pq-flow__card--final_product .pq-flow__name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px; }
.pq-flow__card--raw_material .pq-flow__name::before { background: var(--stage-raw-material); }
.pq-flow__card--intermediate .pq-flow__name::before { background: var(--stage-intermediate); }
.pq-flow__card--final_product .pq-flow__name::before { background: var(--stage-final-product); }
@media (max-width: 900px) {
    .pq-flow { grid-template-columns: minmax(0, 1fr); }
    .pq-flow__arrow { display: none; }
}
.pq-caught { display: flex; flex-direction: column; gap: 6px; }
.pq-caught__title, .pq-sets__title { margin: 0; font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-strong); }
.pq-caught__bar { display: flex; gap: 2px; height: 22px; }
.pq-caught__seg { flex: 1 1 0; min-width: 2px; overflow: hidden; padding: 0 4px; font-size: 11px; line-height: 22px; white-space: nowrap; text-overflow: clip; color: var(--surface-card); border-radius: 2px; }
.pq-caught__seg--raw_material { background: var(--stage-raw-material); }
.pq-caught__seg--intermediate { background: var(--stage-intermediate); }
.pq-caught__seg--final_product { background: var(--stage-final-product); }
.pq-caught__seg--other { opacity: 0.6; }
.pq-caught__seg--dim { opacity: 0.3; }
.pq-caught__seg--other.pq-caught__seg--dim { opacity: 0.18; }
.pq-caught__caption { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 11px; color: var(--text-muted); }
.pq-sets { display: flex; flex-direction: column; gap: var(--space-2); }
.pq-sets__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.pq-sets__search { width: 240px; }
.pq-sets__table { table-layout: fixed; }
.pq-sets__table th:first-child { width: 40%; }
.pq-sets__sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 2px; }
.pq-sets__row { cursor: pointer; }
.pq-sets__row:hover { background: var(--surface-subtle); }
.pq-sets__row[aria-current="true"] { background: var(--surface-selected); }
.pq-sets__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-sets__bar { display: inline-block; height: 6px; margin-right: 6px; border-radius: 1px; background: var(--border-strong); vertical-align: middle; }
.pq-sets__bad { color: var(--status-danger); font-weight: var(--fw-medium); }
.pq-sets__foot { display: flex; align-items: center; gap: var(--space-3); }
.pq-sets__foot .q { margin: 0; }
/* The deep dive (D-163): context line, then the scope of the seven charts. */
.pq-deep { display: flex; flex-direction: column; gap: var(--space-5); }
.pq-deep__context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); }
.pq-deep__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pq-deep__name { font-size: 15px; font-weight: var(--fw-medium); color: var(--text-strong); }
.pq-deep__chip { padding: 1px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--surface-card); }
.pq-deep__chip--raw_material { background: var(--stage-raw-material); }
.pq-deep__chip--intermediate { background: var(--stage-intermediate); }
.pq-deep__chip--final_product { background: var(--stage-final-product); }
.pq-deep__figures { font-size: 13px; color: var(--text-body); }
.pq-scope__label { font-size: 13px; color: var(--text-muted); margin-right: var(--space-1); }
.pq-scope__option { padding: 4px 12px; font: inherit; font-size: 13px; color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; }
.pq-scope__option:hover { border-color: var(--border-strong); }
.pq-scope__option[aria-pressed="true"] { color: var(--text-strong); background: var(--surface-selected); border-color: var(--accent); }

/* Phones (D-162): a 16px page gutter and tighter section cards, so forms and tables keep their width. */
@media (max-width: 640px) {
    .page { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-4); }
    .card--section, .card--section.card--row { padding: var(--space-4); }
    .inline-form { gap: var(--space-3); }
    .inline-form > .aq-field, .plant-form__name > .aq-field { width: 100%; }
    .tenant-field__suffix { padding-bottom: 28px; }
    .page-actions > * { flex: 1 1 auto; }
}