/* ============================================================================
   Piping QC Tool — Component Theme Rules
   Concept A · Lightened Navy variant
   ----------------------------------------------------------------------------
   Loads AFTER tokens.css.
   Selectors are intentionally generic — adapt to your existing class names.
   Section markers (▶) match the order of the README implementation checklist.
   ========================================================================= */

/* ── ▶ Base ──────────────────────────────────────────────────────────── */
html, body {
  background: var(--pc-body);
  color: var(--pc-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

::selection { background: var(--accent-soft); color: var(--pc-text); }

/* Scrollbars — subtle, light */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: var(--pc-sunken); }
::-webkit-scrollbar-thumb   { background: var(--pc-border-st); border-radius: 8px;
                              border: 2px solid var(--pc-sunken); }
::-webkit-scrollbar-thumb:hover { background: var(--pc-text-di); }

/* ── ▶ Sidebar ───────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
   §SIDEBAR — the ONLY ruleset (SPEC-2.83, copied from
   Sidebar-Shell-Reference.html). Replaces: the old generic
   .sidebar/.app-sidebar block, the SPEC-2.13 #app-sidebar .sb-* block,
   the index.html inline originals, the sb-definition-fix override block
   and the theme-dark.css #app-sidebar patches. Dark mode comes free via
   the --pc-navy* / --pc-pack-blue token rebinds.
   ════════════════════════════════════════════════════════════════════ */

/* Icon base class (sprite usage: <svg class="ico"><use href="#i-…"></use></svg>) */
svg.ico { width: 17px; height: 17px; flex-shrink: 0; display: block; }

#app-sidebar {
  width: 232px; flex-shrink: 0; height: 100%;
  background: var(--pc-navy);
  border-right: 1px solid var(--pc-navy-border);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: margin-left .2s ease;
}

.sb-brand {
  height: 48px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--pc-navy-lo);
}
.sb-brand .wordmark { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; line-height: 1; }
.sb-brand .wordmark .wordmark-mdr  { color: #fff; }
.sb-brand .wordmark .wordmark-pack { color: var(--pc-pack-blue); }

.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 0 6px; }
.sb-scroll::-webkit-scrollbar { width: 8px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }

.sb-group-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pc-navy-di); padding: 22px 14px 6px; white-space: nowrap;
}
.sb-group-label.first { padding-top: 10px; }

.sb-item {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 16px);
  margin: 1px 8px; padding: 7px 8px; border-radius: 6px;
  border: none; background: transparent; text-align: left; cursor: pointer;
  color: var(--pc-navy-mu); font: 500 13px/1.25 'Inter', sans-serif;
  position: relative; white-space: nowrap;
  transition: background .1s, color .1s;
}
.sb-item .sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-item:hover  { background: rgba(255,255,255,0.06); color: #fff; }
.sb-item.active { background: rgba(255,255,255,0.13); color: #fff; font-weight: 600; }
.sb-item.active::before {
  content: ''; position: absolute; left: -8px; top: 5px; bottom: 5px; width: 3px;
  background: var(--pc-pack-blue); border-radius: 0 2px 2px 0;
}

.sb-status { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sb-status.st-green { background: var(--success); }
.sb-status.st-amber { background: var(--warning); }
.sb-status.st-red   { background: var(--danger); box-shadow: 0 0 4px var(--danger); }

/* ── Current-job plate (the S-B card) ────────────────────────────── */
.sb-job-plate {
  margin: 16px 8px 0; padding-bottom: 8px;
  background: var(--pc-navy-lo); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; overflow: hidden;
}
.sb-job-head {
  padding: 10px 10px 9px; border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 5px;
}
.sb-job-head .scope {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--pc-pack-blue);
}
.sb-job-head .nameline { display: flex; align-items: center; gap: 7px; }
.sb-job-head .name {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-chip {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}
.sb-chip.active { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.sb-chip.closed { background: #fef3c7; color: #b45309; }
/* SPEC-2.83 D2 — documented extension: the app has an archived lifecycle the
   package lacks. Neutral/grey sibling of closed. */
.sb-chip.archived { background: rgba(255,255,255,0.10); color: var(--pc-navy-mu); }
.sb-plate-label {
  font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pc-navy-di); padding: 14px 10px 4px;
}
.sb-job-plate .sb-item.active::before { left: -8px; }  /* bar clips at plate edge by design */

.sb-footer {
  border-top: 1px solid var(--pc-navy-lo); margin-top: auto; flex-shrink: 0;
  padding: 6px 0 8px;
}

/* Plate hides entirely when no job is open (existing behaviour, JS toggles display) */
#sb-job-block { display: none; }

/* ── ▶ Toolbar / Top bar ─────────────────────────────────────────────── */
/* SPEC-2.49 3rd amendment: selector split. The canvas toolbar
   (<div id="toolbar"> with NO class) must grow to fit wrapped overflow
   controls; `.topbar` is a separate design-pack surface that may keep a
   fixed height. Earlier amendments combined them under one rule and
   created cascade ambiguity — the live CSSOM proved `height: 52px` was
   still winning on #toolbar. Splitting eliminates the ambiguity. */
/* SPEC-2.87 — Concept B condensed header: a single fixed 44px row that never
   wraps (replaces the old auto-height/flex-wrap reflow). This is the
   authoritative #toolbar rule; the inline block mirrors it. */
#toolbar {
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  height: 44px;
  padding: 0 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
}
.topbar {
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  height: 52px;
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.topbar .breadcrumb {
  font-size: var(--fs-md);
  color: var(--pc-text-mu);
}
.topbar .breadcrumb b { color: var(--pc-text); font-weight: var(--fw-semibold); }

/* SPEC-2.87 — .tb-sep is now the Concept B toolbar separator (styled in the
   inline block: 20px, --pc-border-st, margin). Keep only .sep here (legacy). */
.sep { width: 1px; height: 24px; background: var(--pc-border); }

#toolbar input[type="text"],
.topbar input[type="text"] {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  color: var(--pc-text);
  padding: 0 var(--sp-3);
  height: var(--input-h);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
}
/* SPEC-2.87 — the Dwg·Rev chip popover inputs are frameless (cohesion law);
   re-assert over the boxed #toolbar input rule above (same specificity, later). */
#toolbar .dwg-pop input[type="text"] {
  border: none; border-bottom: 1px dotted var(--pc-border-st);
  background: none; height: auto; border-radius: 0; padding: 3px 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
#toolbar .dwg-pop input[type="text"]:focus { border-bottom: 1px solid var(--accent); }

/* ── ▶ View header ───────────────────────────────────────────────────── */
.view-header,
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  background: var(--pc-body);
  gap: var(--sp-4);
}
.view-header h1, .page-header h1 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  color: var(--pc-text);
  margin: 0;
}
.view-header .sub, .page-header .sub {
  font-size: var(--fs-md);
  color: var(--pc-text-mu);
  margin-top: 2px;
}

/* ── ▶ Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--btn-h);
  padding: 0 var(--sp-3);
  background: var(--pc-sunken);              /* SPEC-2.65 (3B) — resting secondary = tinted chip (was --pc-surface) */
  border: 1px solid var(--pc-border-st);     /* SPEC-2.65 (3B) — visible edge (was --pc-border ~1.1:1 on white) */
  color: var(--pc-text);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.btn:hover { background: var(--pc-hover); border-color: var(--pc-border-st); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--pc-focus); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.primary,
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover,
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.btn.danger    { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.success   { background: var(--success); border-color: var(--success); color: #fff; }
.btn.ghost     { background: transparent; border-color: transparent; color: var(--pc-text-mu); }
.btn.ghost:hover { background: var(--pc-hover); color: var(--pc-text); }

.btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hi);
}

.btn-lg { height: var(--btn-h-lg); padding: 0 var(--sp-4); font-size: var(--fs-md); }
.btn-sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-sm); }

/* ── ▶ Forms ─────────────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="date"], select, textarea {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  color: var(--pc-text);
  font: inherit;
  font-size: var(--fs-md);
  padding: 0 var(--sp-3);
  height: var(--input-h);
  border-radius: var(--r-md);
  transition: border-color 120ms, box-shadow 120ms;
}
textarea { height: auto; padding: var(--sp-2) var(--sp-3); line-height: var(--lh-normal); }

input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--pc-focus);
}

input::placeholder, textarea::placeholder { color: var(--pc-text-di); }

label, .form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--pc-text-mu);
  margin-bottom: var(--sp-1);
}
.hint { font-size: var(--fs-xs); color: var(--pc-text-di); margin-top: 2px; }

/* ── ▶ Cards ─────────────────────────────────────────────────────────── */
.card,
.dash-card,
.job-card {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--sh-1);
}
.card-header,
.job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--pc-text); }
.card-subtitle { font-size: var(--fs-sm); color: var(--pc-text-mu); margin-top: 2px; }

/* KPI / dashboard cards */
.kpi-card { padding: var(--sp-4) var(--sp-5); }
.kpi-card .kpi-label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pc-text-di);
}
.kpi-card .kpi-value {
  font-size: 28px; font-weight: var(--fw-semibold);
  color: var(--pc-text); line-height: 1.1; margin-top: var(--sp-2);
  /* SPEC-2.66 (C4 / ruling 7B) — stays neutral --pc-text; do NOT colourise in accent.
     Accent = interactive/active only (see the .col-num/.col-id block below). */
}
.kpi-card .kpi-delta { font-size: var(--fs-sm); color: var(--pc-text-mu); margin-top: var(--sp-1); }

/* ── ▶ Tables (weld-reg, WPS, NDT, TP, calib, ITP, lines, BOM, lc, pecpr-eq) */
table.data-table,
.tbl,
table.app-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pc-surface);
  font-size: var(--fs-base);
  /* SPEC-2.63 — outer frame: 1px border + rounded corners, matching .job-card (--r-lg).
     border-collapse:separate (above) is what keeps the sticky thead working, so the
     corners are rounded via the table border + per-cell radii below — NOT overflow:hidden,
     which would break position:sticky. */
  border: 1px solid var(--pc-border);
  border-radius: var(--r-lg);
}
table.data-table thead th,
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--pc-table-header);   /* SPEC-2.63 — header band sits above the rows */
  border-bottom: 1px solid var(--pc-border);
  color: var(--pc-text);   /* SPEC-2.66 (C2) — header authority: full-strength text (was --pc-text-mu) */
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  height: 36px;
}
/* SPEC-2.63 — clip the header band's top corners to the rounded frame (sticky-safe) */
table.data-table thead th:first-child,
.tbl thead th:first-child { border-top-left-radius: var(--r-lg); }
table.data-table thead th:last-child,
.tbl thead th:last-child { border-top-right-radius: var(--r-lg); }
table.data-table tbody td,
.tbl tbody td {
  border-bottom: 1px solid var(--pc-border);   /* SPEC-2.63 — visible divider (was --pc-border-s) */
  padding: var(--sp-2) var(--sp-3);
  color: var(--pc-text);
  height: var(--row-h);
  vertical-align: middle;
}
/* SPEC-2.63 — subtle zebra striping on even rows (token-driven, light + dark) */
table.data-table tbody tr:nth-child(even) td,
.tbl tbody tr:nth-child(even) td { background: var(--pc-table-zebra); }
/* SPEC-2.63 — round the last row's bottom corners to the frame */
table.data-table tbody tr:last-child td:first-child,
.tbl tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
table.data-table tbody tr:last-child td:last-child,
.tbl tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
/* SPEC-2.63 — interactive states target td and follow the zebra rule in source order, so
   hover / selected win over the zebra tint by cascade alone (equal specificity, later wins). */
table.data-table tbody tr:hover td,
.tbl tbody tr:hover td { background: var(--pc-hover); }
table.data-table tbody tr.selected td,
.tbl tbody tr.selected td { background: var(--accent-soft); }

/* Active weld-register row — orange left stripe (the only place safety orange appears in tables).
   box-shadow renders above the cell background, so it survives the zebra tint unchanged. */
table.data-table tbody tr.row-active td:first-child,
.tbl tbody tr.row-active td:first-child {
  box-shadow: inset 3px 0 0 var(--pc-safety);
}

/* SPEC-2.86 — light-mode gridline contrast for the company .data-table family. The base rules
   above are theme-agnostic (token rebinds per theme), so the darker --pc-border-st lands under a
   light-only scope; dark .data-table stays on --pc-border. Zebra needs no edit here — the base
   rule already reads --pc-table-zebra, retuned in tokens.css (light scope only). */
html.theme-light table.data-table, html.theme-light .tbl,
html.theme-light table.app-table { border-color: var(--pc-border-st); }
html.theme-light table.data-table thead th,
html.theme-light .tbl thead th { border-bottom-color: var(--pc-border-st); }
html.theme-light table.data-table tbody td,
html.theme-light .tbl tbody td { border-bottom-color: var(--pc-border-st); }

/* Density toggle */
[data-density="tight"] table.data-table tbody td,
[data-density="tight"] .tbl tbody td { height: var(--row-h-tight); padding: var(--sp-1) var(--sp-3); }

/* ── ▶ Pills / badges ────────────────────────────────────────────────── */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: 0.85;
}
.pill.no-dot::before { display: none; }

.pill-ok,      .pill.success  { background: var(--success-soft); color: #047857; }
.pill-warn,    .pill.warning  { background: var(--warning-soft); color: #b45309; }
.pill-bad,     .pill.danger   { background: var(--danger-soft);  color: #b91c1c; }
.pill-info                    { background: var(--info-soft);    color: #0369a1; }
.pill.info                    { background: var(--accent-soft);  color: var(--accent-hi); }  /* Cohesion drift fix §3 — NCR corrective-action etc. (binding: Drift-Fix-Reference.html) */
.pill-accent,  .pill.accent   { background: var(--accent-soft);  color: var(--accent-hi); }
.pill-neutral, .pill.neutral  { background: var(--pc-sunken);    color: var(--pc-text-mu); }

/* Solid variant for emphasis (ID-style tags) */
.pill-solid     { background: var(--pc-text); color: #fff; }
.pill-solid::before { background: rgba(255,255,255,0.7); }

/* ── ▶ Modals ────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  display: grid; place-items: center; z-index: 1000;
}
.modal {
  background: var(--pc-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  width: min(640px, 92vw);
  max-height: 86vh;
  display: flex; flex-direction: column;
  border: 1px solid var(--pc-border);
}
.modal-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--pc-border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--pc-border);
  background: var(--pc-sunken);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── ▶ NDT stats / MDR cards / ITP / PECPR / Setup ───────────────────── */
.stat-tile {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.stat-tile .label { font-size: var(--fs-xs); color: var(--pc-text-di); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-tile .value { font-size: 22px; font-weight: var(--fw-semibold); color: var(--pc-text); margin-top: 2px; }

/* MDR status cards: status-tinted left border, white body */
.mdr-card           { border-left: 4px solid var(--pc-border-st); }
.mdr-card.is-ready  { border-left-color: var(--success); }
.mdr-card.is-pend   { border-left-color: var(--warning); }
.mdr-card.is-block  { border-left-color: var(--danger); }

/* ITP / PECPR meta */
.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.meta-item { background: var(--pc-sunken); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.meta-item .k { font-size: var(--fs-xs); color: var(--pc-text-di); text-transform: uppercase; letter-spacing: 0.04em; }
.meta-item .v { font-size: var(--fs-md); color: var(--pc-text); font-weight: var(--fw-medium); margin-top: 2px; }

/* Hazard / safety badges (Setup view) */
.hazard {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}

/* Signature pills (PECPR) */
.sig-pill { background: var(--pc-sunken); border: 1px dashed var(--pc-border-st);
            padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
            font-size: var(--fs-sm); color: var(--pc-text-mu); }
.sig-pill.signed { background: var(--success-soft); border-style: solid; border-color: var(--success); color: #047857; }

/* Wizard dots */
.wiz-dots { display: inline-flex; gap: var(--sp-2); }
.wiz-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pc-border); transition: background 120ms;
}
.wiz-dot.done    { background: var(--success); }
.wiz-dot.current { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ════════════════════════════════════════════════════════════════════
   §REGISTERS — SPEC-2.84 cohesion ruleset, copied from
   docs/cohesion/Cohesion-Reference.html (binding render). One visual
   language for every register grid (§A), frameless field (§B) and the
   bottom-right toast stack (§F). Values pinned in
   docs/cohesion/Registers-Forms-Cohesion-Build-Spec.md — do not retune
   here without a spec.
   ════════════════════════════════════════════════════════════════════ */

/* ── §A register grid ── */
.reg-card { background:var(--pc-surface); border:1px solid var(--pc-border); border-radius:12px;
            box-shadow:0 16px 44px rgba(20,30,55,0.10); overflow:hidden; }
.reg-toolbar { display:flex; align-items:center; gap:10px; padding:13px 16px;
               border-bottom:1px solid var(--pc-border); }
.reg-toolbar h3 { font-size:14px; font-weight:700; margin:0; flex:1; }
.reg-summary { display:flex; align-items:center; gap:14px; padding:8px 16px;
               background:var(--pc-sunken); border-bottom:1px solid var(--pc-border);
               font-size:11.5px; color:var(--pc-text-mu); }
.reg-summary b { font-weight:600; color:var(--pc-text); }
.reg-summary .bad  { color:var(--danger-text);  font-weight:600; }
.reg-summary .warn { color:var(--warning-text); font-weight:600; }  /* Cohesion drift fix — expiring/pending counts */

table.grid { width:100%; border-collapse:collapse; }
table.grid th { background:var(--pc-table-header); font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:var(--pc-text-mu);
  text-align:left; padding:7px 12px; white-space:nowrap; }
table.grid td { padding:9px 12px; font-size:12.5px; border-top:1px solid var(--pc-border); vertical-align:middle; }
/* Cohesion drift fix — zebra split into explicit variants (was one unconditional
   4n+3 rule): .zebra-pairs for registers whose rows carry a hidden tr.expand
   sibling (welders), .zebra-rows for plain-row registers (gauges, NCR). */
table.grid.zebra-pairs tbody tr:nth-child(4n+3) td { background:var(--pc-table-zebra); }
table.grid.zebra-rows  tbody tr:nth-child(even)  td { background:var(--pc-table-zebra); }
table.grid tbody tr.rowmain { cursor:pointer; }
table.grid tbody tr.rowmain:hover td { background:var(--pc-hover); }
td.id { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; }
td.dim, .dim { color:var(--pc-text-di); }
td.num { font-family:'IBM Plex Mono',monospace; font-size:12px; white-space:nowrap; }
.chip-tech { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px;
             background:var(--accent-soft); color:var(--accent-hi); }

/* §A.3 expand — rotating chevron (never ▶) */
.chev { width:26px; height:26px; border-radius:6px; border:none; background:transparent;
        color:var(--pc-text-di); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.chev svg { width:14px; height:14px; transition:transform .15s; }
tr.open .chev svg, .chev.open svg { transform:rotate(180deg); }
.chev:hover { background:var(--pc-sunken); color:var(--pc-text); }

/* §A.4 row actions — hover ⋯ menu */
.rowmenu { position:relative; display:inline-flex; }
.dots { width:26px; height:26px; border-radius:6px; border:none; background:transparent;
        color:var(--pc-text-di); font-size:15px; font-weight:700; cursor:pointer; line-height:1;
        opacity:0; transition:opacity .1s; }
/* hover-reveal: reference rows are tr.rowmain; the live registers' rows are
   tr (table registers) and *-card-header strips (card registers) */
tr.rowmain:hover .dots, tr:hover .dots,
[class*="-card-header"]:hover .dots, .rowmenu.open .dots { opacity:1; }
@media (hover:none) { .dots { opacity:1; } }   /* touch devices: always visible */
.dots:hover { background:var(--pc-sunken); color:var(--pc-text); }
.rowmenu .menu { position:absolute; right:0; top:30px; z-index:30; min-width:168px;
        background:var(--pc-surface); border:1px solid var(--pc-border); border-radius:8px;
        box-shadow:0 12px 32px rgba(20,30,55,0.16); padding:4px; display:none; }
.rowmenu.open .menu { display:block; }
/* flip above the trigger when a bottom-row menu would clip the card / scroll body */
.rowmenu.up .menu { top:auto; bottom:30px; }
.rowmenu .menu button { display:flex; width:100%; gap:8px; align-items:center; padding:7px 9px; border:none;
               background:none; border-radius:5px; font:500 12.5px 'Inter',sans-serif;
               color:var(--pc-text-mu); cursor:pointer; text-align:left; }
.rowmenu .menu button:hover { background:var(--pc-sunken); color:var(--pc-text); }
.rowmenu .menu button.danger { color:var(--danger-text); }
.rowmenu .menu button.danger:hover { background:var(--danger-soft); }
.rowmenu .menu hr { border:none; border-top:1px solid var(--pc-border); margin:4px 2px; }

tr.expand td { background:var(--pc-sunken) !important; padding:14px 16px 16px 48px; }
.xp { display:flex; gap:32px; }
.xp .fgroup { flex:1; }
.xp-actions { display:flex; gap:6px; align-items:flex-start; }

/* ── §B frameless fields — every drill-in / edit form ── */
.fgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px 28px; padding:16px; }
.fgroup label { display:block; font-size:9.5px; font-weight:700; text-transform:uppercase;
                letter-spacing:.5px; color:var(--pc-text-di); margin-bottom:3px; }
/* element-qualified selectors so the rest state out-ranks the global
   typed-input rule above (input[type="text"] etc. is 0,1,1 — bare .field
   would lose the border/background tie; same-specificity later rule wins) */
.field, input.field, select.field, textarea.field {
         display:block; width:100%; height:auto; border:1px solid transparent; border-radius:6px;
         background:transparent; padding:4px 6px; margin:0 -6px;
         font:400 12.5px/1.4 'Inter',sans-serif; color:var(--pc-text);
         text-decoration:underline dotted var(--pc-field-hint); text-underline-offset:3px;
         transition:background .1s, border-color .1s; }
.field[data-mono] { font-family:'IBM Plex Mono',monospace; font-size:12px; }
.field::placeholder { color:var(--pc-text-di); }
.field:placeholder-shown { text-decoration-color:transparent; }   /* empty = placeholder only */
.field:hover { background:var(--pc-sunken); border-color:var(--pc-border-st); text-decoration:none; }
.field:focus { outline:none; background:var(--pc-sunken); border-color:var(--accent);
               box-shadow:0 0 0 3px rgba(37,99,235,0.22); text-decoration:none; }
textarea.field { resize:none; }
/* Cohesion drift fix §4 — frameless select with embedded chevron (binding:
   Drift-Fix-Reference.html). Placed after .field:hover/:focus per reference. */
select.field { text-decoration:none; appearance:none; cursor:pointer; width:auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23647084' stroke-width='2.4' stroke-linecap='round'><path d='M6 9.5 L12 15.5 L18 9.5'/></svg>");
  background-repeat:no-repeat; background-position:right 6px center; padding-right:22px; }
select.field:hover, select.field:focus { background-color:var(--pc-sunken); }
input[type="checkbox"].chk { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; margin:0; }
.btn-quiet { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:6px; white-space:nowrap;
             border:1px solid var(--pc-border); background:var(--pc-surface);
             font:600 12px 'Inter',sans-serif; color:var(--pc-text-mu); cursor:pointer; }
.btn-quiet:hover { background:var(--pc-sunken); }

/* ── Deploy drift fix §4 — the two destructive-button tiers (binding:
      Deploy-Drift-Fix-Spec.md / Drift-Fix-Reference.html). ── */
/* Destructive tier — solid, for hard deletes and blocked/override actions */
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.danger:hover { background:var(--danger-text); border-color:var(--danger-text); }
.btn.danger:disabled { opacity:.5; cursor:not-allowed; }

/* Corrective tier — quiet, for entry points that respond to a failure */
.btn.danger-quiet { background:var(--danger-soft); border-color:transparent; color:var(--danger-text); }
.btn.danger-quiet:hover { background:var(--danger-soft); border-color:var(--danger); }
.subhead { display:flex; align-items:center; gap:8px; padding:14px 16px 4px; }
.subhead h4 { margin:0; flex:1; font-size:12px; font-weight:700; color:var(--pc-text-mu); }

/* ── Cohesion drift fix §5 — toolbar controls, one quiet skin (binding:
      Drift-Fix-Reference.html). Toolbar controls keep a visible border by
      design — §B's frameless rule governs edit surfaces only. ── */
select.select-quiet { appearance:none; border:1px solid var(--pc-border); background-color:var(--pc-surface);
  border-radius:6px; padding:5px 26px 5px 11px; font:600 12px 'Inter',sans-serif; color:var(--pc-text-mu); cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23647084' stroke-width='2.4' stroke-linecap='round'><path d='M6 9.5 L12 15.5 L18 9.5'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; }
select.select-quiet:hover { background-color:var(--pc-sunken); }
select.select-quiet:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.22); }
input.search-quiet { border:1px solid var(--pc-border); background:var(--pc-surface); border-radius:6px;
  padding:5px 11px; font:400 12px 'Inter',sans-serif; color:var(--pc-text); width:200px; }
input.search-quiet::placeholder { color:var(--pc-text-di); }
input.search-quiet:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.22); }

/* ── Cohesion drift fix §2 — sub-grid card inside a sunken row expand ── */
.inner-card { background:var(--pc-surface); border:1px solid var(--pc-border); border-radius:8px; overflow:hidden; }
.inner-card table.grid th { font-size:9px; padding:6px 10px; }
.inner-card table.grid td { padding:5px 10px; font-size:12px; border-top:1px solid var(--pc-border); }

/* ── Cohesion drift fix §2 — hover go-chevron for navigate-on-click rows
      (gauge register: whole row opens the drill-in) ── */
.go { width:14px; height:14px; color:var(--pc-text-di); opacity:0; transition:opacity .1s; vertical-align:middle; }
tr.rowmain:hover .go { opacity:1; }

/* ── Cohesion drift fix §4 — guidance hint under setup fields (not a warning) ── */
.fhint { font-size:10.5px; color:var(--pc-text-di); margin-top:2px; line-height:1.45; }

/* ── Cohesion drift fix §3 — entity highlight flash (NCR deep-link): a class
      on the <tr>, not inline styles on a div (binding §3 bullet 4) ── */
table.grid tbody tr.row-flash { box-shadow:0 0 0 2px var(--accent); }

/* ── §E blockers list — whole row is the link (no per-row Open buttons);
      mono age, hover chevron, row hover --pc-hover ── */
.mdr-blocker-row { border-radius:6px; }
.mdr-blocker-row[onclick] { cursor:pointer; }
.mdr-blocker-row[onclick]:hover { background:var(--pc-hover); }
.blk-age { font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:11px;
           color:var(--pc-text-di); margin-left:auto; padding-left:10px; white-space:nowrap; }
.blk-go { width:14px; height:14px; flex-shrink:0; color:var(--pc-text-di);
          opacity:0; transition:opacity .1s; }
.mdr-blocker-row:hover .blk-go { opacity:1; }

/* ── §F toasts — bottom-right stack (replaces the bottom-center #toast;
      SPEC-2.84 also retires the dormant fixed-position .toast ruleset
      that previously lived here) ── */
#toast-stack { position:fixed; right:16px; bottom:16px; z-index:2000; display:flex;
               flex-direction:column; gap:8px; align-items:flex-end; }
.toast { display:flex; align-items:center; gap:10px; max-width:360px; padding:10px 14px;
         background:#1a2332; color:#fff; font-size:12.5px; border-radius:8px;
         box-shadow:0 12px 32px rgba(20,30,55,0.3); }
.toast .undo { font-weight:700; color:var(--pc-pack-blue); cursor:pointer; }

/* Status bar (bottom of app) */
.status-bar {
  height: 26px;
  background: var(--pc-sunken);
  border-top: 1px solid var(--pc-border);
  padding: 0 var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-xs); color: var(--pc-text-mu);
}
.status-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.status-bar .dot.warn { background: var(--warning); }
.status-bar .dot.bad  { background: var(--danger); }

/* Weld-map side panel */
.weld-side {
  background: var(--pc-surface);
  border-left: 1px solid var(--pc-border);
  width: 320px;
  padding: var(--sp-4);
  overflow-y: auto;
}
.weld-side h3 {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pc-text-di); margin-bottom: var(--sp-2);
}

/* ── ▶ Utility ───────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--pc-border); margin: var(--sp-3) 0; }
.muted   { color: var(--pc-text-mu); }
.dim     { color: var(--pc-text-di); }
.mono    { font-family: var(--font-mono); }

/* Focus-visible polish across the app */
:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--pc-focus); border-radius: var(--r-md); }

/* ============================================================================
   === Project-specific selector extensions ===
   SPEC-2.13 — selectors below extend theme.css to also match the actual
   class/id names used in index.html (the monolith). Generic theme.css rules
   above remain authoritative; this block only widens selector lists to cover
   the monolith's `sb-*`, `view-hdr`, `modal-overlay` etc. naming.
   ========================================================================= */

/* ── Sidebar: single ruleset lives in the ▶ Sidebar section above (SPEC-2.83).
       The SPEC-2.13 #app-sidebar/.sb-* widening block and the navy
       #sidebar-left rules that lived here were deleted by the SPEC-2.83
       delete list — the canvas tool rail is a light tools surface styled
       in index.html's inline <style>. */

/* ── View header (monolith uses .view-hdr / .view-body) ───────────────── */
.view-hdr {
  display: flex;
  align-items: center;
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-3);
}
.view-hdr h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--pc-text);
  margin: 0;
}
.view-body { background: var(--pc-body); color: var(--pc-text); }

.view-tabs { border-bottom: 1px solid var(--pc-border); }
.view-tab {
  color: var(--pc-text-mu);
  font-weight: var(--fw-medium);
}
.view-tab.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* ── Modals (monolith uses .modal-overlay + .modal) ───────────────────── */
.modal-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.modal-overlay .modal {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  color: var(--pc-text);
}
.modal-overlay .modal h2 {
  color: var(--pc-text);
  border-bottom-color: var(--pc-border);
}
.modal-overlay .modal-row label { color: var(--pc-text-mu); }
.modal-overlay .modal-row input,
.modal-overlay .modal-row select {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  color: var(--pc-text);
}

/* ── Tables in the monolith (registers, ITP, BOM, LC, PECPR, MDR) ─────── */
table.itp, table.approval-tbl, table.rev-tbl, table.meta-tbl,
table.bom-table, table.lc-table, table.pecpr-eq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pc-surface);
  font-size: var(--fs-base);
  color: var(--pc-text);
}
table.itp thead th, table.approval-tbl thead th, table.rev-tbl thead th,
table.bom-table thead th, table.lc-table thead th, table.pecpr-eq-table thead th {
  background: var(--pc-sunken);
  border-bottom: 1px solid var(--pc-border);
  color: var(--pc-text-mu);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}
table.itp tbody td, table.approval-tbl tbody td, table.rev-tbl tbody td,
table.bom-table tbody td, table.lc-table tbody td, table.pecpr-eq-table tbody td {
  border-bottom: 1px solid var(--pc-border-s);
  padding: var(--sp-2) var(--sp-3);
  color: var(--pc-text);
}
table.itp tbody tr:hover, table.approval-tbl tbody tr:hover,
table.bom-table tbody tr:hover, table.lc-table tbody tr:hover,
table.pecpr-eq-table tbody tr:hover { background: var(--pc-hover); }

/* ============================================================================
   SPEC-2.64 — In-job register rounded frame + single-line grid reconstruction.
   ----------------------------------------------------------------------------
   The in-job registers are border-collapse:collapse with sticky thead headers
   and a full per-cell border:1px grid. Under collapse the table element ignores
   border-radius, so the frame can't round. We switch them to
   border-collapse:separate + border-spacing:0 (which DOES honour radius),
   rebuild the grid as right+bottom cell borders (collapse used to merge the
   doubled per-cell borders into single lines), and round the four corner cells
   to the frame radius. NO overflow:hidden anywhere — that would re-parent the
   sticky thead's scrollport and unpin it. Scroll stays on the shared .view-body.
   #itp-table (ITP matrix) is deliberately EXCLUDED. theme.css loads last, so this
   block wins source-order ties over the base #id rules and theme-dark.css.
   ========================================================================= */
#weld-reg-table, #wps-table, #lines-table, #tp-table, #calib-table,
#ndt-lines-table, table.bom-table, table.lc-table, table.pecpr-eq-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--pc-border);
  border-radius: var(--r-lg);
}
/* SPEC-2.86 — light-mode outer frame contrast. The base rule above is theme-agnostic (token
   rebinds per theme), so the darker frame is scoped to light only; dark stays on --pc-border. */
html.theme-light #weld-reg-table, html.theme-light #wps-table, html.theme-light #lines-table,
html.theme-light #tp-table, html.theme-light #calib-table, html.theme-light #ndt-lines-table,
html.theme-light table.bom-table, html.theme-light table.lc-table,
html.theme-light table.pecpr-eq-table { border-color: var(--pc-border-st); }
/* Rebuild gridlines: every cell paints only its right + bottom edge (single 1px lines). */
#weld-reg-table thead th, #wps-table thead th, #lines-table thead th,
#tp-table thead th, #calib-table thead th, #ndt-lines-table thead th,
table.bom-table thead th, table.lc-table thead th, table.pecpr-eq-table thead th,
#weld-reg-table tbody td, #wps-table tbody td, #lines-table tbody td,
#tp-table tbody td, #calib-table tbody td, #ndt-lines-table tbody td,
table.bom-table tbody td, table.lc-table tbody td, table.pecpr-eq-table tbody td {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border);
}
/* Last column / last row drop their outer edge so the table frame isn't doubled. */
#weld-reg-table thead th:last-child, #wps-table thead th:last-child,
#lines-table thead th:last-child, #tp-table thead th:last-child,
#calib-table thead th:last-child, #ndt-lines-table thead th:last-child,
table.bom-table thead th:last-child, table.lc-table thead th:last-child, table.pecpr-eq-table thead th:last-child,
#weld-reg-table tbody td:last-child, #wps-table tbody td:last-child,
#lines-table tbody td:last-child, #tp-table tbody td:last-child,
#calib-table tbody td:last-child, #ndt-lines-table tbody td:last-child,
table.bom-table tbody td:last-child, table.lc-table tbody td:last-child, table.pecpr-eq-table tbody td:last-child { border-right: none; }
#weld-reg-table tbody tr:last-child td, #wps-table tbody tr:last-child td,
#lines-table tbody tr:last-child td, #tp-table tbody tr:last-child td,
#calib-table tbody tr:last-child td, #ndt-lines-table tbody tr:last-child td,
table.bom-table tbody tr:last-child td, table.lc-table tbody tr:last-child td, table.pecpr-eq-table tbody tr:last-child td { border-bottom: none; }
/* Round the four corner cells to the frame radius (no overflow needed). */
#weld-reg-table thead th:first-child, #wps-table thead th:first-child,
#lines-table thead th:first-child, #tp-table thead th:first-child,
#calib-table thead th:first-child, #ndt-lines-table thead th:first-child,
table.bom-table thead th:first-child, table.lc-table thead th:first-child, table.pecpr-eq-table thead th:first-child { border-top-left-radius: var(--r-lg); }
#weld-reg-table thead th:last-child, #wps-table thead th:last-child,
#lines-table thead th:last-child, #tp-table thead th:last-child,
#calib-table thead th:last-child, #ndt-lines-table thead th:last-child,
table.bom-table thead th:last-child, table.lc-table thead th:last-child, table.pecpr-eq-table thead th:last-child { border-top-right-radius: var(--r-lg); }
#weld-reg-table tbody tr:last-child td:first-child, #wps-table tbody tr:last-child td:first-child,
#lines-table tbody tr:last-child td:first-child, #tp-table tbody tr:last-child td:first-child,
#calib-table tbody tr:last-child td:first-child, #ndt-lines-table tbody tr:last-child td:first-child,
table.bom-table tbody tr:last-child td:first-child, table.lc-table tbody tr:last-child td:first-child, table.pecpr-eq-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
#weld-reg-table tbody tr:last-child td:last-child, #wps-table tbody tr:last-child td:last-child,
#lines-table tbody tr:last-child td:last-child, #tp-table tbody tr:last-child td:last-child,
#calib-table tbody tr:last-child td:last-child, #ndt-lines-table tbody tr:last-child td:last-child,
table.bom-table tbody tr:last-child td:last-child, table.lc-table tbody tr:last-child td:last-child, table.pecpr-eq-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }

/* ============================================================================
   SPEC-2.65 (4A) — Tabular figures on data tables.
   ----------------------------------------------------------------------------
   Fixed-width numerals so numeric columns align and scan cleanly. Applied to
   th/td on BOTH table subsystems: the company .data-table/.tbl/.app-table family
   AND the in-job #id register tables + .bom-table/.lc-table/.pecpr-eq-table
   (same set 2.64 framed; ITP matrix excluded to mirror 2.64 scope). Inter ships
   the `tnum` feature; font-feature-settings is the older-engine fallback.
   This is 4A only — NO per-column right-align (.num class is the follow-up spec).
   ========================================================================= */
table.data-table th, table.data-table td,
.tbl th, .tbl td,
table.app-table th, table.app-table td,
#weld-reg-table th, #weld-reg-table td,
#wps-table th, #wps-table td,
#lines-table th, #lines-table td,
#tp-table th, #tp-table td,
#calib-table th, #calib-table td,
#ndt-lines-table th, #ndt-lines-table td,
table.bom-table th, table.bom-table td,
table.lc-table th, table.lc-table td,
table.pecpr-eq-table th, table.pecpr-eq-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================================
   SPEC-2.66 (C1 + C3) — Numeric right-align + identity-column anchor.
   ----------------------------------------------------------------------------
   Builds on 2.65's global tabular-nums (4A above). Two OPT-IN column classes the
   register render fns tag onto specific cells (a <td> and its matching <th>):
     .col-num — numeric data columns (counts, NPS/DN sizes, schedules, wall
                thicknesses, lengths, NDT %, pressures) right-align so digits
                share a vertical axis. Date columns are NOT tagged (they stay
                left, keeping only 4A's tabular-nums); the identity column is
                .col-id, never .col-num, even when numeric.
     .col-id  — the SINGLE identity-anchor column (weld no / line no / tag /
                item no / welder ID / WPS no) gets weight + full-strength text so
                the eye has a rail to follow. WEIGHT, not accent colour — see the
                7B note below — so the anchor never competes with the accent.
   The bare classes lose to the #id-register specificity shield (carry-forward,
   banked twice), so the th/td rules are scoped per-family to WIN. #itp-table is
   excluded everywhere — it is never tagged and these selectors never name it.
   ----------------------------------------------------------------------------
   SPEC-2.66 (C4) — Accent ruling 7B (recorded here so it doesn't erode):
   numbers STAY neutral. KPI/stat values keep --pc-text (see .kpi-card .kpi-value
   above) and are never colourised in accent. The accent token is reserved for
   INTERACTIVE / ACTIVE affordances only — buttons, links, the active tab, the
   wizard current-step dot, progress fills — where it always means "clickable" or
   "active", never decoration. .col-id deliberately anchors with weight, not
   accent, for the same reason. Do not paint static numbers/identifiers in accent.
   ========================================================================= */
.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-id  { font-weight: var(--fw-medium); color: var(--pc-text); text-align: left; }
.col-id input, .col-id select { font-weight: var(--fw-medium); color: var(--pc-text); }

/* .col-num — beat the company-family header left-align AND the #id shield (both th + td).
   The materials + welders registers carry class="data-table", so the table.data-table
   selectors below already win for them — no per-id selector is added for those two (an id
   selector would reintroduce the inline-shim string the SPEC-2.62 deletion test guards). */
table.data-table thead th.col-num, .tbl thead th.col-num, table.app-table thead th.col-num,
#weld-reg-table th.col-num, #wps-table th.col-num, #lines-table th.col-num,
#tp-table th.col-num, #calib-table th.col-num, #ndt-lines-table th.col-num,
table.bom-table th.col-num, table.lc-table th.col-num, table.pecpr-eq-table th.col-num,
table.data-table tbody td.col-num, .tbl tbody td.col-num, table.app-table tbody td.col-num,
#weld-reg-table td.col-num, #wps-table td.col-num, #lines-table td.col-num,
#tp-table td.col-num, #calib-table td.col-num, #ndt-lines-table td.col-num,
table.bom-table td.col-num, table.lc-table td.col-num, table.pecpr-eq-table td.col-num {
  text-align: right;
}

/* .col-id — same shield; weight + full-strength colour, stays left-aligned (data-table covers mat/welders) */
table.data-table thead th.col-id, .tbl thead th.col-id, table.app-table thead th.col-id,
#weld-reg-table th.col-id, #wps-table th.col-id, #lines-table th.col-id,
#tp-table th.col-id, #calib-table th.col-id, #ndt-lines-table th.col-id,
table.bom-table th.col-id, table.lc-table th.col-id, table.pecpr-eq-table th.col-id,
table.data-table tbody td.col-id, .tbl tbody td.col-id, table.app-table tbody td.col-id,
#weld-reg-table td.col-id, #wps-table td.col-id, #lines-table td.col-id,
#tp-table td.col-id, #calib-table td.col-id, #ndt-lines-table td.col-id,
table.bom-table td.col-id, table.lc-table td.col-id, table.pecpr-eq-table td.col-id {
  font-weight: var(--fw-medium);
  color: var(--pc-text);
  text-align: left;
}

/* ── Toast (monolith uses #toast) ─────────────────────────────────────── */
#toast {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 2000;
  background: var(--pc-text); color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

/* ── Wizard connector / dot polish (monolith uses .wiz-dot + .wiz-connector) */
.wiz-connector { background: var(--pc-border); }

/* ── MDR status cards (monolith uses .mdr-sc-* family) ────────────────── */
.mdr-status-grid { display: grid; gap: var(--sp-3); }
.mdr-sc-head { color: var(--pc-text-mu); }
.mdr-sc-title { color: var(--pc-text); font-weight: var(--fw-semibold); }
.mdr-sc-prog { background: var(--pc-sunken); border-radius: var(--r-sm); overflow: hidden; }
.mdr-sc-prog-bar { background: var(--accent); }

/* ── Setup view tiles ─────────────────────────────────────────────────── */
.setup-section {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.setup-section-title {
  color: var(--pc-text);
  font-weight: var(--fw-semibold);
}
.setup-summary-bar {
  background: var(--pc-sunken);
  border: 1px solid var(--pc-border);
  border-radius: var(--r-md);
  color: var(--pc-text-mu);
}

/* ── ITP meta grid (monolith uses .itp-meta-grid / .itp-meta-row) ─────── */
.itp-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.itp-meta-row {
  background: var(--pc-sunken);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

/* ── MDR meta grid (monolith uses .mdr-meta-grid / .mdr-meta-field) ───── */
.mdr-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.mdr-meta-field {
  background: var(--pc-sunken);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

/* ── Weld map side panel shim removed in SPEC-2.61 ─────────────────────────
   #wm-side-panel / #mm-side-panel and the weld-map remarks input now bind to
   --pc-surface / --pc-border / --pc-text tokens inline in index.html, and the
   drawing backdrops bind to --pc-canvas. This redundant override is therefore
   gone. The :790 table-header and :760 toolbar-select shims are untouched —
   their inline-styled markup is migrated in a later Phase A spec. */

/* ── Canvas restyling deferred (no canvas selectors in upstream theme.css,
       but anything that looks like canvas internals stays untouched).
       SPEC-2.13: canvas restyling deferred — see roadmap (separate spec). */

/* ============================================================================
   === SPEC-2.13b cleanup ===
   Surfaces flagged by the post-2.13 visual smoke walk where hardcoded
   #0f3460 / #16213e / #0d1b2e / #3a5a84 hex literals in the index.html
   inline <style> block (or in inline style="" attributes) win specificity
   against the theme override layer. Selectors prefixed with `body` for a
   class-level specificity bump; !important reserved for inline-attribute
   overrides where even `body` cannot win.
   ========================================================================= */

/* ── Sidebar wordmark colour split: folded into the single ▶ Sidebar
       ruleset above (SPEC-2.83) ─────────────────────────────────────────── */

/* ── Group 1: ISO Canvas editor panels ─────────────────────────────────── */
body #sidebar-right {
  background: var(--pc-surface);
  color: var(--pc-text);
  border-left: 1px solid var(--pc-border);
}
/* body #sidebar-left navy override deleted (SPEC-2.83) — the tool rail is a
   light tools surface; see index.html inline <style> #sidebar-left block. */
body #status-bar {
  background: var(--pc-sunken);
  color: var(--pc-text-mu);
  border-top: 1px solid var(--pc-border);
}
/* Toolbar-select !important shim removed in SPEC-2.62 — the three CAD toolbar
   selects already carry inline var(--pc-sunken)/var(--pc-border)/var(--pc-text)
   (SPEC-2.19 substituted their #0f3460), so there was no inline navy left to fight. */

/* ── Group 2: ITP cover section (inline style="" — !important required) ── */
body #itp-meta-section {
  background: var(--pc-surface) !important;  /* inline style attribute on element */
  border-bottom: 1px solid var(--pc-border) !important;
}
body #itp-meta-section input,
body #itp-meta-section input[type="date"] {
  background: var(--pc-surface);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
}

/* ── Group 3: MDR cover inputs ─────────────────────────────────────────── */
body #view-mdr .mdr-meta-field input,
body #view-mdr .mdr-meta-field input[type="date"] {
  background: var(--pc-surface);
  color: var(--pc-text);
  border: 1px solid var(--pc-border);
}

/* ── Group 4: Register table headers (Materials, Welders) ──────────────── */
/* Register table-header !important shim removed in SPEC-2.62 — the Materials and
   Welder register tables now carry .data-table; their headers resolve --pc-sunken
   bg / --pc-text-mu / --pc-border via `table.data-table thead th` above. */

/* ── Group 5: Welder Qualifications filter + stats bar ─────────────────── */
/* #cwr-filter and #cwr-stats both have inline style="" — !important required */
body #cwr-filter {
  background: var(--pc-surface) !important;
  color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important;
}
body #cwr-stats {
  background: var(--pc-sunken) !important;
  color: var(--pc-text-mu) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}

/* ── Group 6: New Job wizard NDT badge + summary bar ───────────────────── */
/* #wiz-ndt-preview (Step 3) and #wiz-summary (Step 5) both have inline
   style="background:#0a1a2e;..." — !important required to beat inline. */
body #wiz-ndt-preview {
  background: var(--pc-sunken) !important;
  color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important;
}
body #wiz-summary {
  background: var(--pc-sunken) !important;
  color: var(--pc-text-mu) !important;
}

/* ── Group 7: Jobs storage progress bar track ──────────────────────────── */
/* Track is built dynamically in renderStorageBar() with inline
   style="background:#1a2a40;..."; structural selector targets the
   120px-wide track div inside #jobs-storage-bar. !important needed
   because the colour comes from an inline style attribute. */
body #jobs-storage-bar > div > div {
  background: var(--pc-sunken) !important;
}

/* ============================================================================
   === SPEC-2.18 additions ===
   Post-audit theme cleanup: D1 banner re-tone, F41 Settings H1, Cluster I
   overflow fix, and correction of dead 2.13b status-dot class names.
   ========================================================================= */

/* ── Sidebar status dots: folded into the single ▶ Sidebar ruleset (SPEC-2.83) */

/* ── F41: Settings page H1 — inline style="color:#eee" needs !important ── */
body #view-settings h1 { color: var(--pc-text) !important; }

/* ── D1 re-tone: Jobs view company stats strip (F2) ────────────────────── */
/* #jobs-company-stats has inline style="background:#0a1628;..." */
body #jobs-company-stats {
  background: var(--pc-surface) !important;
  color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important;
}

/* ── D1 re-tone: Consumables filter select (cbrc-filter) ───────────────── */
/* Inline style="background:#0f3460;color:#ccc;border:1px solid #1a4a8a;" */
body #cbrc-filter {
  background: var(--pc-surface) !important;
  color: var(--pc-text) !important;
  border: 1px solid var(--pc-border) !important;
}

/* ── D1 re-tone: Consumables stats strip (F40) ─────────────────────────── */
/* Inline style="background:#0a1628;border-bottom:1px solid #1a4a8a;" */
body #cbrc-stats {
  background: var(--pc-surface) !important;
  color: var(--pc-text-mu) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}

/* ── D1 re-tone: Welder registry card headers (F43) ────────────────────── */
/* JS _renderWelderCard emits inline style="background:#0f3460;..." */
body .cwr-card { border-color: var(--pc-border) !important; }
body .cwr-card-header {
  background: var(--pc-sunken) !important;
  color: var(--pc-text) !important;
}
/* Card body expand area */
body [id^="cwrb-"] {
  background: var(--pc-body) !important;
  color: var(--pc-text) !important;
}

/* ── D1 re-tone: Consumables batch card headers (F39) ──────────────────── */
/* JS _renderBatchCard emits inline style="background:#0f3460;..." */
body .cbrc-card { border-color: var(--pc-border) !important; }
body .cbrc-card-header {
  background: var(--pc-sunken) !important;
  color: var(--pc-text) !important;
}
/* Card body expand area */
body [id^="cbrc-body-"] {
  background: var(--pc-body) !important;
  color: var(--pc-text) !important;
}

/* ── SPEC-2.86 (D8) — card-list register outline contrast, light only ────────
   The three card-list registers render rows as cards with INLINE borders
   (.gr-card / .ndtr-card / .cbrc-card: 1px var(--pc-border)), so the important
   flag is required to beat the inline declaration (same precedent as the
   body .cwr-card / .cbrc-card rules above).
   Container-scoped to the three register lists; dashboard/MDR cards and the
   universal --pc-border hairline do not shift. Dark mode untouched (light scope
   only; among important-flagged rules this 1,2,1 also outranks body .cbrc-card
   at 0,1,1).
   NOTE: the original group carried a 4th selector, #ncr-list .ncr-row. NCR was
   later rebuilt as a §A table.grid register (no .ncr-row card markup remains),
   so that selector matched nothing and was retired (cohesion drift-fix F4). */
html.theme-light #gr-list .gr-card,
html.theme-light #ndtr-list .ndtr-card,
html.theme-light #cbrc-list .cbrc-card { border-color: var(--pc-border-st) !important; }

/* ── SPEC-2.86 (flag-1 ruling) — inline-bordered table cells, light only ─────
   Four in-scope tables render cells with INLINE border:1px solid var(--pc-border)
   that beats every stylesheet rule: .bom-table (all th+td via its TH/TD style
   constants), #wps-table (trailing doc/pqr/menu tds), #welders-table (all data
   tds), #mat-table (4 of 11 tds). The important flag resolves those cells to
   --pc-border-st in light so gridlines aren't mixed within one table; the inline
   width/style (1px solid) is untouched. th included ONLY for .bom-table — the
   other three tables' header cells are stylesheet-bordered and already covered.
   Light scope only: dark keeps the inline var(--pc-border) resolution. */
html.theme-light .bom-table th, html.theme-light .bom-table td,
html.theme-light #wps-table td,
html.theme-light #welders-table td,
html.theme-light #mat-table td { border-color: var(--pc-border-st) !important; }

/* ── SPEC-2.62 Pass 2: gauge / NDT register card headers + status chips ──────
   These card families were built with inline navy (#0f3460 header fill, #0a1628
   chips) and never had a themed fallback (unlike .cwr-/.cbrc-card-header). The
   inline navy is deleted in the render fns; these plain class rules supply the
   token bg so light flips navy→token and dark still blends. No !important needed
   (nothing left inline to fight). */
.gr-card-header,
.ndtr-card-header { background: var(--pc-sunken); }
/* SPEC-2.66 (C5) — .reg-chip retired: all four emit sites now use the semantic .pill-* system. */

/* ── Cluster I: Page header subtitle overflow (F16) ─────────────────────── */
.page-header .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40ch;
}

/* ── Cluster I: Toolbar job-name input wider (F20) ──────────────────────── */
#tb-job { min-width: 220px; }