/* EXECUTION-01 — Step 7.
 *
 * Deliberately short. The workspace shell, the Gantt, the dialog system and the drawer frame all
 * come from preparation.css: .prep-modal, .prep-dialog, .prep-gantt, .prep-wbs, .prep-bar,
 * .prep-baseline, .prep-actual, .pdlg-*, .prep-drawer. A second set of those would drift from the
 * first within a wave, and the two steps would stop looking like one product.
 *
 * What is here is only what Step 7 adds: the card, the execution-status vocabulary, and the tables
 * that put PLANNED beside ACTUAL.
 */

/* ── §3 the Step 7 card ───────────────────────────────────────────────────────────────────────── */
.exec-card { display: flex; flex-direction: column; gap: 10px; }
.exec-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.exec-card__title {
  margin: 0; font-size: var(--fs-sm, 12px); font-weight: 700; letter-spacing: .04em;
  color: var(--text, #0f172a);
}
.exec-card__update { font-size: 11px; color: var(--text-muted, #64748b); }
.exec-card__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px;
}
.exec-card__fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exec-card__fact-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted, #64748b);
}
.exec-card__fact-value { font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--text, #0f172a); }
.exec-card__fact--ok .exec-card__fact-value { color: #16a34a; }
.exec-card__fact--warn .exec-card__fact-value { color: #b45309; }
.exec-card__fact--stop .exec-card__fact-value { color: #b91c1c; }
.exec-card__blocker {
  margin: 0; padding: 8px 10px; border-left: 3px solid #dc2626; background: #fef2f2;
  font-size: 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.exec-card__blocker-label {
  font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: #b91c1c;
}
.exec-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── §33 the execution status vocabulary.
   One colour per state and no more: a rainbow is a legend nobody learns. ──────────────────────── */
.exec-state {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.exec-state--todo { background: #eef1f5; color: #475569; }
.exec-state--in_progress { background: #e0f2fe; color: #0369a1; }
.exec-state--waiting { background: #fef3c7; color: #92400e; }
.exec-state--blocked { background: #fee2e2; color: #b91c1c; }
.exec-state--done { background: #dcfce7; color: #15803d; }
.exec-state--cancelled { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }

.exec-tag {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.exec-tag--added { background: #ede9fe; color: #6d28d9; }
.exec-tag--late { background: #fee2e2; color: #b91c1c; }

/* ── tabs and tables ──────────────────────────────────────────────────────────────────────────── */
.exec-pane { display: flex; flex-direction: column; gap: 20px; padding: 16px 18px; overflow: auto; }
.exec-section { display: flex; flex-direction: column; gap: 10px; }
.exec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 12px); }
.exec-table th {
  text-align: left; padding: 7px 8px; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted, #64748b);
  border-bottom: 1px solid var(--border-strong, #cbd5e1);
}
.exec-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top;
}
.exec-table__wbs { font-variant-numeric: tabular-nums; color: var(--text-muted, #64748b); }
.exec-table__sub { display: block; font-size: 11px; color: var(--text-muted, #64748b); }
.exec-table__actions { white-space: nowrap; text-align: right; }
.exec-table tr.is-late td { background: #fffbeb; }
.exec-table tr.is-blocking td { background: #fef2f2; }
.exec-table td.is-over { color: #b91c1c; font-weight: 600; }
.exec-table td.is-under { color: #0369a1; }

.exec-compare { margin: 0; font-size: var(--fs-sm, 12px); color: var(--text-muted, #64748b); }
.exec-compare strong { color: var(--text, #0f172a); }

.exec-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
}
.exec-list li {
  display: flex; justify-content: space-between; gap: 12px; font-size: 12px;
  padding: 4px 0; border-bottom: 1px solid var(--border, #e2e8f0);
}

/* ── §37 the field log ────────────────────────────────────────────────────────────────────────── */
.exec-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.exec-timeline li {
  display: grid; grid-template-columns: 96px 140px 1fr; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border, #e2e8f0); font-size: 12px; align-items: baseline;
}
.exec-timeline__time { font-variant-numeric: tabular-nums; color: var(--text-muted, #64748b); }
.exec-timeline__who { color: var(--text-muted, #64748b); }
.exec-timeline__what em { font-style: normal; color: var(--primary, #ea5a0c); font-weight: 600; }
.exec-timeline--compact li { grid-template-columns: 96px 1fr; }

/* ── §13 checklist results ────────────────────────────────────────────────────────────────────── */
.exec-checklist {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.exec-checklist__item {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 4px;
  background: var(--surface-muted, #f8fafc); border-left: 3px solid var(--border-strong, #cbd5e1);
}
.exec-checklist__item--pass { border-left-color: #16a34a; }
.exec-checklist__item--fail { border-left-color: #dc2626; background: #fef2f2; }
.exec-checklist__item--open { border-left-color: #f59e0b; }
.exec-checklist__label { font-size: 12px; font-weight: 600; }
.exec-checklist__label em { font-style: normal; font-weight: 400; color: var(--text-muted, #64748b); }
.exec-checklist__result { font-size: 11px; color: var(--text-muted, #475569); }
.exec-checklist__hint { font-size: 10px; color: #b45309; }

/* ── §16 evidence, sized so a photo is recognisable without opening it ────────────────────────── */
.exec-evidence {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.exec-evidence__item { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.exec-evidence__item img {
  width: 100%; height: 88px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border, #e2e8f0);
}
.exec-evidence__doc {
  display: grid; place-items: center; height: 88px; border-radius: 4px;
  background: var(--surface-muted, #f1f5f9); font-size: 11px; padding: 6px; text-align: center;
}
.exec-evidence figcaption { font-size: 11px; display: flex; flex-direction: column; gap: 1px; }
.exec-evidence__meta { color: var(--text-muted, #64748b); font-size: 10px; }

/* ── §51 the completion gate ──────────────────────────────────────────────────────────────────── */
.exec-blockers, .exec-warnings {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
.exec-blockers li {
  padding: 8px 10px; border-left: 3px solid #dc2626; background: #fef2f2; font-size: 12px;
}
.exec-blockers li ul { margin: 4px 0 0 14px; padding: 0; font-size: 11px; color: #7f1d1d; }
.exec-warnings li {
  padding: 6px 10px; border-left: 3px solid #f59e0b; background: #fffbeb; font-size: 12px;
}
.exec-complete__clear, .exec-complete__done {
  padding: 8px 10px; border-left: 3px solid #16a34a; background: #f0fdf4; font-size: 12px; margin: 0;
}
.exec-drawer__late {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin-top: 6px;
  border-left: 3px solid #f59e0b; background: #fffbeb; font-size: 11px;
}

/* ── §56 field use.
   The task list is the usable view on a phone; the Gantt stays a desk tool. Forcing a technician to
   drag a thirty-column chart to report 60% is how progress stops being reported. ───────────────── */
@media (max-width: 820px) {
  .exec-card__facts { grid-template-columns: repeat(2, 1fr); }
  .exec-timeline li { grid-template-columns: 1fr; gap: 2px; }
  .exec-table thead { display: none; }
  .exec-table, .exec-table tbody, .exec-table tr, .exec-table td { display: block; width: 100%; }
  .exec-table tr { border-bottom: 1px solid var(--border-strong, #cbd5e1); padding: 6px 0; }
  .exec-table td { border: 0; padding: 2px 0; }
  .exec-table__actions { text-align: left; }
  .exec-toolbar { flex-wrap: wrap; }
}

/* ── the workspace shell ──────────────────────────────────────────────────────────────────────
 *
 * .prep-panel-shell is a five-row grid built for Preparation's header / KPI / tabs / toolbar /
 * body. Step 7 emits four children — header, KPI strip, tabs, body — so its body landed in an
 * `auto` row and the whole panel collapsed into the top third of the screen with grey below it.
 *
 * Rather than padding the markup with an empty element to make somebody else's grid line up, the
 * Execution shell states its own rows. Everything inside still uses the shared classes. */
.exec-panel-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.exec-panel-shell[data-exec-state="loading"],
.exec-panel-shell:not([data-exec-state="ready"]) {
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.exec-panel-shell .prep-body { overflow: auto; min-height: 0; }

/* ── §41 the progress report document ─────────────────────────────────────────────────────────
 *
 * The letterhead, the page frame, .pp-title, .pp-h2, .pp-table and .pp-sign all come from
 * preparation.css — this adds only the few elements the progress report needs and the plan does
 * not: a reference line, an internal flag, a key/value block and running prose. */
.pp-doc-ref {
  margin: 2mm 0 6mm; font-size: 9.5pt; color: #4a4a4a; letter-spacing: .02em;
}
.pp-internal-flag {
  margin: 0 0 5mm; padding: 1.5mm 3mm; display: inline-block;
  font-size: 8.5pt; font-weight: 700; letter-spacing: .08em;
  color: #b91c1c; border: 1px solid #b91c1c;
}
.pp-kv { width: 100%; border-collapse: collapse; margin: 0 0 6mm; font-size: 9.5pt; }
.pp-kv td { padding: 1.8mm 3mm; border: 1px solid #d8d8d4; vertical-align: top; }
.pp-kv td:first-child { width: 46mm; color: #4a4a4a; background: #fafaf8; }
.pp-para { margin: 0 0 5mm; font-size: 9.5pt; line-height: 1.55; color: #2a2a2a; }
.pp-list { margin: 0 0 5mm 5mm; padding: 0; font-size: 9.5pt; line-height: 1.5; }
.pp-empty { margin: 0 0 5mm; font-size: 9.5pt; color: #6a6a6a; font-style: italic; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   OWNER UI REWORK
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── §2/§3/§4 the toolbar ─────────────────────────────────────────────────────────────────────
 *
 * Three groups on one line at a fixed height: zoom left, task filters centre, person and layers
 * right. Every control is --control-h tall, because a toolbar of assorted heights reads as
 * something assembled rather than designed. */
.exec-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.exec-toolbar__left, .exec-toolbar__mid, .exec-toolbar__right {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.exec-toolbar__mid { flex: 1 1 auto; justify-content: center; }
.exec-toolbar__right { margin-left: auto; }
.exec-toolbar__label {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted, #64748b); white-space: nowrap;
}

/* A SEGMENTED CONTROL, so the active choice is a filled segment rather than a slightly
 * different-looking pill. This is the whole of §2: the reader must not have to click to find out
 * what is already selected. */
.exec-seg {
  display: inline-flex;
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-surface, #fff);
}
.exec-seg__btn {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--border, #e2e8f0);
  background: transparent;
  font: inherit;
  font-size: var(--fs-label, 11px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-secondary, #475569);
  padding: 0 11px;
  height: var(--control-h, 30px);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.exec-seg__btn:last-child { border-right: 0; }
.exec-seg__btn:hover { background: var(--bg-page, #f1f5f9); }
.exec-seg__btn.is-active {
  background: var(--primary, #ea5a0c);
  color: #fff;
}
.exec-seg__btn:focus-visible { outline: 2px solid var(--primary, #ea5a0c); outline-offset: -2px; }

/* §3 — layer toggles. Buttons with a filled dot, not browser checkboxes. */
.exec-layers { display: inline-flex; gap: 6px; }
.exec-toggle {
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h, 30px);
  padding: 0 10px;
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-surface, #fff);
  font: inherit; font-size: var(--fs-label, 11px); font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer; white-space: nowrap;
}
.exec-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong, #cbd5e1);
}
.exec-toggle.is-on {
  border-color: var(--primary, #ea5a0c);
  background: #fff5ef;
  color: var(--primary, #ea5a0c);
}
.exec-toggle.is-on .exec-toggle__dot { background: var(--primary, #ea5a0c); }
.exec-toggle:focus-visible { outline: 2px solid var(--primary, #ea5a0c); outline-offset: 1px; }

.exec-person { display: inline-flex; align-items: center; gap: 6px; }
.exec-person select {
  height: var(--control-h, 30px);
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-surface, #fff);
  font: inherit; font-size: var(--fs-label, 12px);
  padding: 0 8px; max-width: 160px;
}

/* ── §5 WBS / timeline proportions ────────────────────────────────────────────────────────────
 *
 * The WBS pane is a fixed 410px and the timeline takes everything else. Before this the chart sat
 * in its natural width and left a field of grey to the right — compressing the schedule while
 * wasting the screen. */
.exec-gantt { display: grid; grid-template-columns: 410px minmax(0, 1fr); }
.exec-gantt .prep-wbs { width: 410px; min-width: 410px; }
.exec-gantt .prep-time { min-width: 0; }
.exec-panel-shell .prep-chart-host { min-height: 0; height: 100%; }
.exec-panel-shell .prep-body[data-exec-active-tab="progress"] {
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}

/* ── §6 EXECUTION PRIORITISES ACTUAL ──────────────────────────────────────────────────────────
 *
 * In Preparation the planned bar is the subject. Here the ACTUAL strip is: thicker, saturated, on
 * top. The planned bar becomes a pale container showing where the work was meant to sit, and the
 * baseline is the faintest thing on the row. Reversing that — a bold baseline over a thin actual —
 * would tell the reader the plan matters more than what happened, at the one step where it does
 * not. */
.exec-gantt .prep-bar {
  background: #e6e9ef !important;
  box-shadow: none;
  border: 1px solid var(--border-strong, #cbd5e1);
  opacity: .85;
}
.exec-gantt .prep-bar__fill { background: #cdd4de !important; }
.exec-gantt .prep-bar__text { color: var(--text-secondary, #475569); }
.exec-gantt .prep-baseline {
  height: 3px;
  opacity: .55;
  background: repeating-linear-gradient(90deg, #9aa0a6 0 3px, transparent 3px 6px);
}
.exec-gantt .prep-actual {
  height: 9px;
  border-radius: 3px;
  z-index: 4;
  background: var(--success-strong, #15803d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
/* Semantic treatment for the two states a lead scans for. */
.exec-gantt .prep-bar--late { border-color: #dc2626; background: #fee2e2 !important; }
.exec-gantt .prep-bar--late ~ .prep-actual, .exec-gantt .prep-actual.is-late { background: #dc2626; }
.exec-gantt [data-prep-bar-status="run"] { border-color: #0369a1; }

/* ── §1/§7 the task drawer, as an overlay ─────────────────────────────────────────────────────
 *
 * Fixed to the right edge, above the chart, with its own scroll. The Gantt keeps its dimensions
 * and its scroll position; closing puts the reader back exactly where they were. */
.exec-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(440px, 34vw, 520px);
  z-index: 140;
  background: var(--bg-surface, #fff);
  border-left: 1px solid var(--border-strong, #cbd5e1);
  box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  animation: exec-drawer-in .16s ease-out;
}
@keyframes exec-drawer-in { from { transform: translateX(16px); opacity: .4; } }

.exec-drawer__head {
  position: sticky; top: 0;
  padding: 12px 44px 10px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: var(--bg-surface, #fff);
}
.exec-drawer__ident { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exec-drawer__wbs {
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  color: var(--primary, #ea5a0c); letter-spacing: .04em;
}
.exec-drawer__title {
  margin: 4px 0 0; font-size: var(--fs-body, 14px); font-weight: 700; line-height: 1.3;
  color: var(--text, #0f172a);
}
.exec-drawer__close { position: absolute; top: 10px; right: 10px; }

/* §7 — the four things somebody opens this for, directly under the header. */
.exec-drawer__quick {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--bg-page, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.exec-drawer__body { overflow: auto; padding: 4px 16px 20px; }

.exec-dsec { padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.exec-dsec:last-child { border-bottom: 0; }
.exec-dsec__title {
  margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted, #64748b);
}
.exec-dsec__body { display: flex; flex-direction: column; gap: 8px; }
.exec-dsec__empty { margin: 0; font-size: 12px; color: var(--text-muted, #94a3b8); font-style: italic; }
.exec-dsec__flag {
  margin: 0; padding: 6px 8px; font-size: 12px;
  border-left: 3px solid #dc2626; background: #fef2f2;
}

/* §7 — read-only facts as facts, never as disabled inputs. */
.exec-facts { margin: 0; display: grid; gap: 4px; }
.exec-facts__row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px;
  font-size: 12px; align-items: baseline;
}
.exec-facts dt { margin: 0; color: var(--text-muted, #64748b); }
.exec-facts dd { margin: 0; color: var(--text, #0f172a); font-weight: 500; }

.exec-progress {
  height: 6px; border-radius: 3px; background: var(--border, #e2e8f0); overflow: hidden;
}
.exec-progress__fill { display: block; height: 100%; background: var(--success-strong, #15803d); }

/* ── §11 the timeline ─────────────────────────────────────────────────────────────────────────── */
.exec-field-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.exec-timeline__marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.exec-mark {
  font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  white-space: nowrap;
}
.exec-mark--progress { background: #e0f2fe; color: #0369a1; }
.exec-mark--photo { background: #ede9fe; color: #6d28d9; }
.exec-mark--issue { background: #fef3c7; color: #92400e; }
.exec-mark--issue.is-blocking { background: #fee2e2; color: #b91c1c; }
.exec-reports__actions { display: flex; gap: 8px; }

/* ── §14/§15 the document preview shell ───────────────────────────────────────────────────────
 *
 * Its own class rather than .prep-preview, which declares display:grid unconditionally and cannot
 * be hidden by removing .open. Toolbar fixed on top, paper scrolling below, A4 page boundaries
 * visible, and nothing from the toolbar reachable by the printer. */
.exec-preview {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  background: rgba(15, 23, 42, .55);
}
.exec-preview.open { display: grid; place-items: stretch; }
.exec-preview__shell {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, 96vw); height: min(94vh, 100%);
  margin: auto;
  background: var(--bg-page, #f1f5f9);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
}
.exec-preview__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px;
  background: var(--bg-surface, #fff);
  border-bottom: 1px solid var(--border-strong, #cbd5e1);
  flex-wrap: wrap;
}
.exec-preview__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exec-preview__title {
  font-size: var(--fs-label, 12px); font-weight: 700; letter-spacing: .05em;
  color: var(--text, #0f172a);
}
.exec-preview__ref { font-size: 11px; color: var(--text-muted, #64748b); }
.exec-preview__controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exec-preview__paper {
  overflow: auto; padding: 20px; display: flex; flex-direction: column; align-items: center;
  gap: 16px;
}
/* True A4 boundaries, so what is on screen is what comes out of the printer. */
.exec-preview__paper .pp-page {
  width: 210mm; min-height: 297mm;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18);
  padding: 14mm 14mm 12mm;
  box-sizing: border-box;
}

/* §15 — the printable page contains no modal controls, so printing hides the frame entirely. */
@media print {
  body.exec-printing > *:not(#execPreview) { display: none !important; }
  body.exec-printing .exec-preview { position: static; background: none; display: block; }
  body.exec-printing .exec-preview__bar { display: none !important; }
  body.exec-printing .exec-preview__shell {
    width: auto; height: auto; box-shadow: none; border-radius: 0; display: block;
  }
  body.exec-printing .exec-preview__paper { padding: 0; gap: 0; display: block; overflow: visible; }
  body.exec-printing .exec-preview__paper .pp-page {
    box-shadow: none; break-after: page; width: auto; min-height: auto;
  }
}

/* ── §1/§18 narrow viewport: the drawer goes full screen ──────────────────────────────────────── */
@media (max-width: 820px) {
  .exec-drawer { width: 100vw; left: 0; }
  .exec-gantt { grid-template-columns: 1fr; }
  .exec-gantt .prep-wbs { width: 100%; min-width: 0; }
  .exec-toolbar { gap: 8px; }
  .exec-toolbar__mid { justify-content: flex-start; }
  .exec-toolbar__right { margin-left: 0; }
  .exec-preview__paper .pp-page { width: 100%; min-height: 0; padding: 10mm; }
}

/* ── §5 the timeline fills the pane ───────────────────────────────────────────────────────────
 *
 * The canvas is sized to the data range, so a short project left a wide grey void to its right —
 * exactly the "large unused blank area" §5 forbids. min-width:100% makes the plot span the pane
 * whatever the range; the columns keep their own widths, so nothing is stretched or distorted. */
.exec-gantt .prep-time__canvas { min-width: 100%; }
.exec-gantt .prep-plot { min-width: 100%; }
.exec-gantt .prep-grid { min-width: 100%; }

/* ── §7 buttons inside the drawer are inline, not full-width slabs ────────────────────────────
 *
 * .btn stretches to its container in a grid/flex column. Inside a drawer section that produced a
 * pair of enormous white slabs where two small actions belonged. */
.exec-dsec .btn, .exec-drawer__late .btn, .exec-checklist__edit {
  align-self: flex-start;
  width: auto;
  flex: 0 0 auto;
}
.exec-drawer__quick .btn { flex: 0 0 auto; }
.exec-drawer__late { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
.exec-checklist__item { position: relative; padding-right: 96px; }
.exec-checklist__edit { position: absolute; top: 6px; right: 8px; }

/* §3/§18 — the file input, styled to the same height as every other control rather than left as
 * the browser's grey "Choose Files" slab. */
.pdlg-field input[type="file"] {
  font: inherit;
  font-size: var(--fs-label, 12px);
  padding: 6px 8px;
  border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: 6px;
  background: var(--bg-page, #f8fafc);
  width: 100%;
  cursor: pointer;
}
.pdlg-field input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--fs-label, 11px); font-weight: 600;
  border: 1px solid var(--border-strong, #cbd5e1);
  border-radius: 4px;
  background: var(--bg-surface, #fff);
  color: var(--text-secondary, #475569);
  padding: 4px 10px; margin-right: 10px; cursor: pointer;
}

/* §18 — a folded section reads as a real control, not as a bare <summary>. */
.pdlg-section--fold { border-top: 1px solid var(--border, #e2e8f0); padding-top: 6px; }
.pdlg-section__summary {
  cursor: pointer; list-style: none;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted, #64748b);
  padding: 6px 0;
  display: flex; align-items: center; gap: 6px;
}
.pdlg-section__summary::-webkit-details-marker { display: none; }
.pdlg-section__summary::before {
  content: '▸'; font-size: 10px; color: var(--primary, #ea5a0c);
  transition: transform .12s;
}
.pdlg-section--fold[open] > .pdlg-section__summary::before { transform: rotate(90deg); }
.pdlg-section__summary:hover { color: var(--text, #0f172a); }

/* ── the drawer must not bury the dialogs it opens ────────────────────────────────────────────
 *
 * .prep-drawer sits at 140 and .prep-dialog at 130, so every dialog opened FROM the drawer — record
 * a result, complete the task, report a problem — rendered behind it and was invisible. The buttons
 * worked; the form was simply not on screen. Dialogs are modal and always outrank a panel. */
#execWorkspace .prep-dialog { z-index: 170; }
.exec-drawer { z-index: 140; }
.exec-preview { z-index: 180; }

/* ── §9/§19 buttons that look like what they are ──────────────────────────────────────────────
 *
 * The markup across the project waves uses .btn-primary / .btn-secondary / .btn-sm / .btn-xs, and
 * the canonical system in prestec.css defines .btn--primary / .btn--outline / .btn--sm. None of the
 * single-dash names exist, so every "primary" action in this workspace rendered as a plain box —
 * including the one action §9 says must stand out on the field tab.
 *
 * Mapped here to the CANONICAL TOKENS rather than to new colours, and scoped to Execution's own
 * surfaces: Preparation's visuals are already Owner-accepted, so normalising its markup is a
 * separate decision rather than something to change underneath it.
 */
#execWorkspace .btn-primary, .exec-card .btn-primary, #execPreview .btn-primary {
  background: var(--primary); border: 1px solid var(--primary); color: var(--bg-surface);
}
#execWorkspace .btn-primary:hover, .exec-card .btn-primary:hover {
  background: var(--primary-hover);
}
#execWorkspace .btn-secondary, .exec-card .btn-secondary, #execPreview .btn-secondary {
  background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary);
}
#execWorkspace .btn-secondary:hover, .exec-card .btn-secondary:hover {
  background: var(--bg-subtle);
}
#execWorkspace .btn-sm, .exec-card .btn-sm, #execPreview .btn-sm {
  height: 32px; padding: 0 12px; font-size: 13px;
}
#execWorkspace .btn-xs, .exec-card .btn-xs {
  height: 26px; padding: 0 9px; font-size: 12px; border-radius: var(--radius-sm, 4px);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PROJECT-MATERIAL-RETURN-01 — VẬT TƯ ĐÃ XUẤT CHO DỰ ÁN
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   The lesson from PO-LINE-RECONCILIATION-01's PRB-03, applied before it could be repeated: "no
   horizontal scroll" is satisfied perfectly by a crushed column, so the widths are STATED here and
   MEASURED in the browser suite rather than left to whatever the table decides.

   `table-layout: fixed` with explicit column widths, and a min-width on the table itself so the
   four numbers of the equation cannot be squeezed into a syllable per line. Below that min-width the
   TABLE scrolls inside its own wrapper — the page never does, and the columns never collapse. */

.exec-material__wrap { overflow-x: auto; max-width: 100%; }
.exec-material {
  table-layout: fixed;
  min-width: 860px;
}
.exec-material th, .exec-material td { white-space: nowrap; }
.exec-material__c-item { width: 26%; min-width: 200px; }
.exec-material__c-doc { width: 18%; min-width: 130px; }
.exec-material__c-num { width: 9.5%; min-width: 78px; text-align: right; }
.exec-material__c-act { width: 18%; min-width: 140px; text-align: right; }

.exec-material__name {
  display: block; font-weight: 600; color: var(--text, #0f172a);
  overflow: hidden; text-overflow: ellipsis;
}
.exec-material__meta {
  display: block; font-size: 11px; color: var(--text-muted, #64748b);
  overflow: hidden; text-overflow: ellipsis; white-space: normal;
}
.exec-material td.exec-material__c-num { font-variant-numeric: tabular-nums; }
.exec-material tr[data-material-fully-returned="yes"] td { background: #f8fafc; }

.exec-material__totals { font-size: var(--fs-sm, 12px); color: var(--text-muted, #64748b); }
.exec-material__totals strong { color: var(--text, #0f172a); }

/* The returns already recorded against a line, as a sub-row of the line they belong to. */
.exec-material__sub td { background: var(--bg-subtle, #f8fafc); padding-top: 4px; }
.exec-material__list {
  list-style: none; margin: 0; padding: 0 0 0 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.exec-material__list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-secondary, #475569);
}
.exec-material__list li[data-material-return-status="VOIDED"] { opacity: .62; }
.exec-material__rcode { font-weight: 700; font-variant-numeric: tabular-nums; }

.exec-tag--done { background: #dcfce7; color: #15803d; }
.exec-tag--void { background: #f1f5f9; color: #64748b; }

/* Narrow screens: the section keeps its own scroll box, and the header stops competing with the
   totals line for one row. */
@media (max-width: 900px) {
  .exec-material { min-width: 760px; }
  .exec-material__c-item { min-width: 170px; }
  .exec-material__c-act { min-width: 120px; }
  [data-exec-material-returns] .prep-pane__head { flex-wrap: wrap; row-gap: 4px; }
}

/* The shared stacking rule, opted OUT of — deliberately.
 *
 * `@media (max-width: 820px)` above turns every `.exec-table` into a block list: `thead` is hidden
 * and each cell becomes its own row. That is right for a labour table, where each cell carries a
 * person's name and a date that read for themselves. It is wrong for this one, whose entire content
 * is the four numbers of an equation: with the header row gone, "10 Tấm / 0 Tấm / 0 Tấm / 10 Tấm"
 * becomes four unlabelled quantities and the reader has no way to tell which is which. Measured at
 * 820 on the first build: every column 0px wide, because `thead` was display:none.
 *
 * So this table keeps its columns at every width and scrolls inside its own wrapper instead. The
 * PAGE still never scrolls sideways. */
@media (max-width: 820px) {
  .exec-material { display: table; }
  .exec-material thead { display: table-header-group; }
  .exec-material tbody { display: table-row-group; }
  .exec-material tr { display: table-row; padding: 0; border-bottom: 0; }
  .exec-material th, .exec-material td { display: table-cell; padding: 7px 8px; }
  .exec-material td { border-bottom: 1px solid var(--border, #e2e8f0); }
  .exec-material__c-num { text-align: right; }
  .exec-material__c-act { text-align: right; }
}

/* The "Còn lại" cell carries a number AND, once a line is fully returned, a status tag. Measured at
 * 820 on the previous build: "0 Bộ Đã trả hết" on one nowrap line overflowed its column by a few
 * pixels — clipped, which is how a number stops being trustworthy. The HEADERS stay on one line;
 * the tag drops below the number instead. */
.exec-material td.exec-material__c-num { white-space: normal; }
.exec-material td.exec-material__c-num .exec-tag {
  display: block; margin-left: 0; margin-top: 2px; text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
 * LABOR-TIME-01 — the canonical labour table
 * ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.exec-labor__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin: 8px 0 10px;
}
.exec-labor__fact {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 10px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px; background: #f8fafc;
}
.exec-labor__fact-label { font-size: 11px; color: var(--text-muted, #64748b); }
.exec-labor__fact-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* THE WIDTHS ARE STATED, NOT LEFT TO THE TABLE — the same decision, and the same CSS shape, as
 * `.exec-material` above, and for a harder version of the same reason: this table has FIVE
 * numbers in a row and one of them is money.
 *
 * `table-layout: fixed` is the load-bearing line. Two builds measured the person column at
 * 133 / 124 / 116 px at 1366 / 1280 / 820 — each of them exactly the table width divided by the ten
 * columns — because under a fixed layout a cell's `min-width` is ignored and only `width` is read.
 * Declaring the layout here and giving every column a percentage makes the minimums real again, and
 * `min-width` stays beside each one as the floor the table's own 1160 guarantees.
 *
 * 1160 is the sum of those minimums, not a round number. Below it the TABLE scrolls inside its own
 * wrapper; the PAGE never does, and no column ever collapses. LTB-10/11/12 measure all of it. */
.exec-labor__wrap { overflow-x: auto; max-width: 100%; }
.exec-labor {
  table-layout: fixed;
  min-width: 1160px;
}
.exec-labor--mini { table-layout: auto; min-width: 0; }
.exec-labor__c-person { width: 14%; min-width: 150px; }
.exec-labor__c-day { width: 9%; min-width: 96px; }
.exec-labor__c-task { width: 15%; min-width: 170px; }
.exec-labor__c-num {
  width: 7.5%; min-width: 86px; text-align: right; font-variant-numeric: tabular-nums;
}
.exec-labor__c-total { font-weight: 600; }
.exec-labor__c-cost { width: 11%; min-width: 120px; }
.exec-labor__c-status { width: 8.5%; min-width: 96px; }
.exec-labor__c-act { width: 12.5%; min-width: 140px; text-align: right; white-space: nowrap; }
.exec-labor__no-action { font-size: 11px; color: var(--text-muted, #64748b); }

.exec-labor__breakdown { margin-top: 10px; }
.exec-labor__breakdown > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted, #475569);
  padding: 6px 0;
}
.exec-labor__breakdown-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px;
}
.exec-labor__breakdown-title {
  margin: 0 0 4px; font-size: 11px; letter-spacing: .04em; color: var(--text-muted, #64748b);
}

/* The legacy migration-192 log, visually demoted so nobody reads it as the number that counts. */
.exec-section--legacy { border-top: 1px dashed var(--border-strong, #cbd5e1); padding-top: 10px; }
.exec-labor__legacy {
  margin-top: 10px; padding: 8px 10px; font-size: 12px;
  border-left: 3px solid var(--border-strong, #cbd5e1); background: #f8fafc;
  color: var(--text-muted, #475569);
}

.exec-tag--draft { background: #f1f5f9; color: #475569; }
.exec-tag--wait { background: #fef3c7; color: #b45309; }

/* THE SHARED STACKING RULE, OPTED OUT OF — the same decision `.exec-material` made, for the same
 * reason and with the same evidence.
 *
 * `@media (max-width: 820px)` higher up turns every `.exec-table` into a block list: `thead` becomes
 * display:none and each cell becomes its own row. That is right for a table whose cells read for
 * themselves. It is wrong for this one: four of its columns are hours and one is money, and with the
 * header gone "8 / 2 / 1 / 11 / 1.320.000 đ" is five unlabelled numbers in a column about a person's
 * pay. Measured at 820 with the shared rule in force, every column reports 0px wide, which is how a
 * scroll-only responsive check passes a table that has lost its meaning.
 *
 * So this table keeps its columns at every width and scrolls inside its own wrapper. The PAGE never
 * scrolls sideways. */
@media (max-width: 820px) {
  .exec-labor { display: table; }
  .exec-labor thead { display: table-header-group; }
  .exec-labor tbody { display: table-row-group; }
  .exec-labor tr { display: table-row; padding: 0; border-bottom: 0; }
  .exec-labor th, .exec-labor td { display: table-cell; padding: 7px 8px; }
  .exec-labor td { border-bottom: 1px solid var(--border, #e2e8f0); }
  .exec-labor__c-num { text-align: right; }
  .exec-labor__c-act { text-align: right; }
  .exec-labor__facts { grid-template-columns: repeat(2, 1fr); }
}

/* The person cell carries a name AND the entry code beneath it, and the cost cell a figure AND the
 * rate beneath that. Both must be allowed to use two lines rather than clip — a clipped money figure
 * is a money figure nobody can trust. The HEADERS stay on one line. */
.exec-labor td.exec-labor__c-person,
.exec-labor td.exec-labor__c-cost,
.exec-labor td.exec-labor__c-day { white-space: normal; }
.exec-labor td .exec-table__sub { display: block; margin-top: 2px; }
.exec-labor th { white-space: nowrap; }

/* ── LABOR-TIME-01 — the Admin rate table ─────────────────────────────────────────────────────── */

.labor-rate__lead { margin: 4px 0 0; font-size: 13px; color: var(--text-muted, #475569); }
.labor-rate__notice {
  margin: 8px 0; padding: 8px 10px; font-size: 13px;
  border-left: 3px solid #0ea5e9; background: #f0f9ff; color: #075985;
}
.labor-rate__person { margin-top: 14px; }
.labor-rate__person-name {
  margin: 0 0 4px; font-size: 13px; font-weight: 600;
}
.labor-rate__table { width: 100%; border-collapse: collapse; font-size: 12px; }
.labor-rate__table th {
  text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border-strong, #cbd5e1);
  white-space: nowrap; color: var(--text-muted, #475569); font-weight: 600;
}
.labor-rate__table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border, #e2e8f0); vertical-align: top;
}
.labor-rate__c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.labor-rate__c-act { text-align: right; white-space: nowrap; }

.labor-rate__create {
  margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #f8fafc;
}
.labor-rate__create-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.labor-rate__create-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px;
}
.labor-rate__create-grid label,
.labor-rate__period-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--text-muted, #475569);
}
.labor-rate__create-grid input, .labor-rate__create-grid select,
.labor-rate__period-form input {
  padding: 6px 8px; border: 1px solid var(--border-strong, #cbd5e1); border-radius: 5px;
  font-size: 13px; background: #fff;
}
.labor-rate__create-wide { grid-column: 1 / -1; }
.labor-rate__create-hint {
  margin: 8px 0 0; font-size: 12px; color: var(--text-muted, #64748b);
}
.labor-rate__create-foot { margin-top: 8px; display: flex; justify-content: flex-end; }

.labor-rate__periods { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border, #e2e8f0); }
.labor-rate__period-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0 10px;
}
.labor-rate__period-form .labor-rate__create-wide { flex: 1 1 220px; grid-column: auto; }

/* The rate table is all numbers and dates, so it keeps its columns and scrolls inside the panel
 * rather than stacking — the same decision, and the same reason, as `.exec-labor` above. */
@media (max-width: 900px) {
  .labor-rate__person { overflow-x: auto; }
  .labor-rate__table { min-width: 720px; }
  .labor-rate__create-grid { grid-template-columns: repeat(2, 1fr); }
}