/* Components — sidebar filters, product list, detail panel. */

/* Sidebar */
.filter-group { margin-bottom: 18px; }
.filter-group h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.filter-row:hover { background: var(--surface2); }
.filter-row.active { background: var(--brand); color: white; }
.filter-row .badge {
  background: var(--surface2);
  color: var(--muted);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 24px;
  text-align: center;
}
.filter-row.active .badge { background: rgba(255,255,255,0.2); color: white; }
.filter-row input[type=checkbox] { margin-right: 8px; }

/* Search bar */
#search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#list-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 8px;
}

/* Product list */
#product-list {
  overflow-y: auto;
  flex: 1;
}
.product-row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.product-row:hover { background: var(--surface2); }
.product-row.selected { background: var(--brand); color: white; }
.product-row.selected .product-meta { color: rgba(255,255,255,0.7); }
.product-row .product-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.product-row .product-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.tier-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.tier-ai_verified         { background: rgba(76,175,125,0.18); color: var(--ok); }
.tier-code_pending        { background: rgba(224,169,58,0.18); color: var(--warn); }
.tier-source_pending      { background: rgba(224,169,58,0.18); color: var(--warn); }
.tier-parser_review       { background: rgba(224,92,92,0.18);  color: var(--danger); }
.tier-needs_human_review  { background: rgba(224,92,92,0.18);  color: var(--danger); }
.tier-auto_clean_unvetted { background: rgba(194,168,106,0.18); color: var(--verify); }

/* Status badge (verified / needs-edit) + meta warn — scoped to product list rows */
.product-row .status-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.status-verified   { background: rgba(76,175,125,0.18); color: var(--ok); }
.status-needs-edit { background: rgba(224,169,58,0.18); color: var(--warn); }
.product-row.selected .status-badge { color: inherit; }
.meta-warn { color: var(--warn); }

/* List sort control */
.list-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.list-sort {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.list-sort-select {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text);
}
.list-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--muted);
}
.list-count-lbl { font-size: 11px; color: var(--muted); }

/* Detail panel */
#detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

#detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.detail-header {
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.detail-header h2 {
  font-size: 18px;
  flex: 1;
}
.detail-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
}
.detail-meta b { color: var(--text); font-weight: 500; }

.section-block { padding: 12px 18px; }
.section-block + .section-block { border-top: 1px solid var(--border); }
.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-soft);
  margin-bottom: 8px;
}
.fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fields-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.fields-table td.key {
  width: 40%;
  color: var(--muted);
  padding-right: 14px;
}
.fields-table td.value { color: var(--text); }
.fields-table tr.unclean td.key::after {
  content: '⚠';
  margin-left: 6px;
  color: var(--warn);
  font-size: 10px;
}
.fields-table td.value.boolean-yes { color: var(--ok); font-weight: 600; }
.fields-table td.value.boolean-no  { color: var(--muted); }

/* Accordion spec-detail sections (Task 14) — one section open at a time */
.accordion { border-top: 1px solid var(--border); }
.acc-section { border-bottom: 1px solid var(--border); }
.acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--surface);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-soft);
  text-align: left;
}
.acc-header:hover { background: var(--surface2); }
.acc-chevron { font-size: 9px; color: var(--muted); transition: transform 0.15s; }
.acc-section.open .acc-chevron { transform: rotate(90deg); }
.acc-name { flex: 1; }
.acc-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface2);
  padding: 1px 8px;
  border-radius: 9px;
}
.acc-body { padding: 0 18px 12px; }

/* Per-field status badge + on-demand old→new diff (Task 14) — scoped to fields table */
.fields-table td.status { width: 72px; text-align: right; white-space: nowrap; }
.fields-table .status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-changed { background: rgba(76, 175, 125, 0.18); color: var(--ok); }
.status-cleanup { background: rgba(224, 169, 58, 0.18); color: var(--warn); }
.fields-table td.key.diff-toggle {
  cursor: pointer;
  text-decoration: underline dotted var(--muted);
  text-underline-offset: 2px;
}
.fields-table td.key.diff-toggle:hover,
.fields-table tr.diff-open td.key.diff-toggle { color: var(--text); }
.fields-table tr.diff-row td { padding-top: 0; }
.diff-cell { font-size: 12px; }
.diff-old { color: var(--danger); text-decoration: line-through; }
.diff-arrow { color: var(--muted); margin: 0 6px; }
.diff-new { color: var(--ok); font-weight: 600; }

/* AI-origin chip on the validator diff (assisted onboarding, Task 5) — marks a
   value promoted from an ai_draft. Theme-aware via the shared custom props. */
.ai-origin-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--accent);
  border: 1px solid var(--accent);
  white-space: nowrap;
  cursor: help;
}

/* Verify status badge in detail header */
.verify-badge { font-weight: 600; }
.verify-badge.verified { color: var(--ok); }
.verify-badge.unverified { color: var(--warn); }

/* Auth chip + login modal */
#auth-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 4px 8px;
  border-left: 1px solid var(--border);
}
#auth-chip .auth-name { font-weight: 600; font-size: 12px; }
#auth-chip .auth-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 6px;
  border-radius: 8px;
}
.auth-action {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
.auth-action.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.auth-action:hover { filter: brightness(0.95); }

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.open { display: flex; }
.modal-panel {
  background: var(--surface);
  color: var(--text);
  padding: 24px;
  border-radius: 6px;
  min-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.modal-panel h2 { margin: 0 0 16px; font-size: 16px; }
.modal-panel form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}
.modal-panel form label span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-size: 11px;
}
.modal-panel form input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
}
.modal-panel form input:focus {
  outline: none;
  border-color: var(--brand);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.modal-actions button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}
.modal-actions button.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.error-text {
  color: var(--warn, #b00020);
  font-size: 12px;
  min-height: 14px;
}

/* Faceted filters — filters.mjs UI (Task 12) */
.facet-filters {
  padding: 10px 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.facet-search-wrap { width: 100%; }
.facet-search-input {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.facet-search-input:focus { outline: none; border-color: var(--brand); }
.facet-group { display: flex; flex-direction: column; gap: 4px; }
.facet-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.facet-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.facet-chip {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.facet-chip:hover { background: var(--border); }
.facet-chip.active { background: var(--brand); color: white; border-color: var(--brand); }

/* Round 1.1 — visually distinct filter groups (A2). Three treatments so the
   user can tell facets, the type selector, and families apart at a glance:
   facet chips (existing pills) · type chips (stronger active colour, divided
   block) · families (full-width rows with a count pill). */
.typefam {
  padding: 10px 10px 14px;
  border-top: 2px solid var(--brand-soft); /* heavier divider than facet groups */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.type-chip.active {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: white;
}
.family-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.family-row { margin: 0; }
.family-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.family-btn:hover { background: var(--surface2); }
.family-btn.active { background: var(--brand); color: white; }
.family-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.family-count {
  flex-shrink: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface2);
  padding: 0 6px;
  border-radius: 8px;
}
.family-btn.active .family-count { color: white; background: rgba(255, 255, 255, 0.2); }
.family-empty { color: var(--muted); font-size: 11px; padding: 4px 8px; }

/* Phase D — editor: editable cells, staging bar, pending chip */
td.value[data-editable="1"] {
  cursor: cell;
  position: relative;
}
td.value[data-editable="1"]:hover {
  background: var(--surface2);
  outline: 1px dashed var(--brand-soft);
  outline-offset: -1px;
}
td.value.staged {
  background: rgba(224, 169, 58, 0.15);
  color: var(--brand-cream);
  font-weight: 600;
}
.pending-badge {
  display: inline-block;
  margin-left: 6px;
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
}
.inline-edit {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--brand);
  background: var(--surface);
  color: inherit;
  font: inherit;
  border-radius: 2px;
  box-sizing: border-box;
}
.inline-edit:focus { outline: none; }

#staging-bar {
  position: fixed;
  bottom: -100px;
  left: 0;
  right: 0;
  background: var(--brand-deep);
  color: white;
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: bottom 180ms ease-out;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}
#staging-bar.visible { bottom: 0; }
.staging-info { font-size: 13px; }
.staging-info .staging-count { font-weight: 700; font-size: 15px; margin-right: 4px; }
.staging-info .staging-product { color: var(--brand-cream); }
.staging-actions { display: flex; gap: 8px; }
.staging-actions button {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.staging-actions button.primary {
  background: white;
  color: var(--brand-deep);
  border-color: white;
  font-weight: 600;
}
.staging-actions button:hover { filter: brightness(1.1); }

#pending-chip {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--warn);
  color: var(--surface);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

#submit-modal textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  background: var(--surface);
  color: inherit;
  resize: vertical;
  box-sizing: border-box;
}
#submit-modal textarea:focus {
  outline: none;
  border-color: var(--brand);
}

/* Boolean toggle cells — click to flip Yes/No */
td.value[data-editable="boolean"] {
  cursor: pointer;
}
td.value[data-editable="boolean"]:hover {
  background: var(--surface2);
  outline: 1px dashed var(--brand-soft);
  outline-offset: -1px;
}

/* Validator panel (modal overlay) — explicit tokens so it themes in dark mode */
.validator-panel {
  width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface);
  color: var(--text);
}
.validator-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.validator-head h2 { margin: 0; font-size: 16px; }
#validator-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}
.validator-empty, .validator-error {
  padding: 32px;
  text-align: center;
  color: var(--muted);
}
.validator-error { color: var(--warn); }
.validator-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--surface2);
}
.validator-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 12px;
}
.validator-card-product { font-weight: 600; font-size: 14px; }
.validator-product-link { color: var(--brand-soft); text-decoration: none; }
.validator-product-link:hover { text-decoration: underline; }
.validator-code { color: var(--muted); font-weight: normal; font-size: 12px; }
.validator-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.validator-card-reason {
  font-style: italic;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 12px;
}
.validator-diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 12px;
}
.validator-diff th {
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-size: 10px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.validator-diff td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.validator-old { color: var(--muted); }
.validator-new { color: var(--brand-soft); font-weight: 600; }
.validator-stale {
  display: inline-block;
  background: rgba(224, 169, 58, 0.2);
  color: var(--warn);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}
.validator-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.validator-comment {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 12px;
}
.validator-comment:focus { outline: none; border-color: var(--brand); }
.validator-reject, .validator-approve {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.validator-approve.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.validator-busy { opacity: 0.5; pointer-events: none; }
.validator-done {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  text-align: center;
}
.validator-done.approve {
  background: rgba(76, 175, 125, 0.15);
  color: var(--ok);
}
.validator-done.reject {
  background: rgba(224, 169, 58, 0.15);
  color: var(--warn);
}

/* Pending chip is now a button-link */
#pending-chip { cursor: pointer; }

/* Validator panel filter + status badges */
.validator-head-actions { display: flex; gap: 8px; align-items: center; }
#validator-status-filter {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 12px;
}
.validator-status {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.validator-status-approved { background: rgba(76,175,125,0.2); color: var(--ok); }
.validator-status-rejected { background: rgba(224,169,58,0.2); color: var(--warn); }
.validator-card-review {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 10px;
}

/* Toast notification */
#toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 900;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  max-width: 80vw;
}
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#toast.toast-success { border-color: var(--ok); color: var(--ok); }
#toast.toast-warn    { border-color: var(--warn); color: var(--warn); }
#toast.toast-error   { border-color: var(--warn); color: var(--warn); background: rgba(176, 0, 32, 0.15); }

/* Inline-editable product header fields (validator+) */
.product-editable {
  cursor: text;
  border-bottom: 1px dashed transparent;
}
.product-editable:hover {
  border-bottom-color: var(--brand-soft);
}
#dh-name.product-editable { display: inline-block; }
#dh-code.product-editable { display: inline-block; }

/* Product image strip + lightbox */
.image-strip {
  display: flex;
  gap: 8px;
  padding: 8px 0 0;
  overflow-x: auto;
  align-items: center;
}
.image-strip .spec-img {
  height: 80px;
  width: auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: white;
  cursor: zoom-in;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.image-strip .spec-img:hover { border-color: var(--brand-soft); }

#img-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1500;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#img-lightbox.visible { display: flex; }
#img-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

/* Admin panel */
.admin-panel {
  width: min(900px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.admin-head h2 { margin: 0; font-size: 16px; }
.admin-body { overflow-y: auto; padding: 16px 20px; flex: 1; }
.admin-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--surface2);
  border-radius: 6px;
  margin-bottom: 16px;
}
.admin-add-form input, .admin-add-form select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 12px;
}
.admin-add-form input { flex: 1 1 140px; }
.admin-add-form button {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 4px;
}
.admin-add-form .error-text { width: 100%; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th, .admin-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-size: 10px;
}
.admin-table tr.admin-inactive { opacity: 0.5; }
.admin-table .admin-role {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: inherit;
  font-size: 12px;
}
.admin-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.admin-you { color: var(--brand-soft); font-size: 11px; }
.admin-loading, .admin-error {
  text-align: center;
  color: var(--muted);
  padding: 24px;
}
.admin-error { color: var(--warn); }
#admin-btn { margin-left: 12px; font-size: 11px; padding: 4px 10px; }

/* Admin: ID column + clickable name cell */
.admin-table .admin-id {
  color: var(--muted);
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
}
.admin-table .admin-name {
  cursor: text;
  border-bottom: 1px dashed transparent;
  font-weight: 600;
}
.admin-table .admin-name:hover { border-bottom-color: var(--brand-soft); }
.admin-table .admin-name input.inline-edit { font-weight: 400; }

/* Per-product audit history (collapsible) */
.history-section { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 12px; }
.history-toggle {
  background: none; border: none; color: var(--muted); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0;
}
.history-toggle:hover { color: var(--text); }
.history-chevron { display: inline-block; transition: transform 0.15s; }
.history-body { margin-top: 8px; }
.history-table, .audit-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.history-table th, .history-table td,
.audit-table th, .audit-table td {
  padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top;
}
.history-table th, .audit-table th {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-size: 10px;
}
.hist-when { white-space: nowrap; color: var(--muted); }
.hist-action { font-family: monospace; font-size: 10px; }
.hist-old { color: var(--muted); }
.hist-new { color: var(--brand-soft); font-weight: 600; }
.history-loading, .history-error, .history-empty,
.audit-loading, .audit-error, .audit-empty {
  padding: 16px; text-align: center; color: var(--muted);
}
.history-error, .audit-error { color: var(--warn); }

/* Admin tabs + audit filters */
.admin-tabs { display: flex; gap: 4px; }
.admin-tab {
  padding: 6px 14px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--brand-soft); border-bottom-color: var(--brand); }
.audit-filters {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 12px;
  background: var(--surface2); border-radius: 6px; margin-bottom: 12px;
}
.audit-filters input, .audit-filters select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: inherit; font-size: 12px;
}
.audit-filters input[type=text] { flex: 1 1 180px; min-width: 0; }
.audit-filters button { padding: 5px 12px; font-size: 12px; border-radius: 4px; }
.audit-summary { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.audit-pagination {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  margin-top: 12px; font-size: 11px; color: var(--muted);
}
.audit-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.audit-product-link { color: var(--brand-soft); text-decoration: none; }
.audit-product-link:hover { text-decoration: underline; }
.audit-code, .audit-muted { color: var(--muted); }
.audit-ctx-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 6px; cursor: help; color: var(--muted); font-size: 11px;
}

/* Capture jump-to-row flash (matrix-capture fix A) — a transient outline pulse
   layered over the persistent .capture-filled tint, so a self-targeted capture is
   visible when it lands in a section other than the one being viewed. entry-mode's
   scrollAndFlash() adds .capture-flash then removes it after the animation. */
@keyframes capture-flash-pulse {
  0%   { outline-color: var(--brand-soft, #2563eb); }
  100% { outline-color: transparent; }
}
.capture-flash {
  outline: 2px solid var(--brand-soft, #2563eb);
  outline-offset: 1px;
  animation: capture-flash-pulse 1.2s ease-out forwards;
}

/* Direct-edit badge (Task 16) — shown in detail header for Verifier+ on header fields */
.direct-edit-badge {
  font-size: .7em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  vertical-align: middle;
}

/* ── Captured-text highlights (2026-07-09 design) ──────────────────────────
   Translucent tints over source-page renders marking text already harvested by
   capture. The page render is white in both themes, so fixed rgba colours read
   identically in light and dark mode. pointer-events pass through — selection
   and capture drags are unaffected. */
.cap-hl-layer { z-index: 2; }
/* Highlight boxes are split into two element kinds (2026-07-17, Lee): per-box
   RINGS (.cap-hl-*, box-shadow only, painted on top) and FILLS grouped per
   status (.cap-hl-fills-*) with the tint alpha on the GROUP and solid-colour
   children — so same-status boxes that overlap tint uniformly instead of
   stacking darker. The group alphas match the old rgba fills exactly. */
.cap-hl {
  border-radius: 2px;
  box-sizing: border-box;
}
.cap-hl-attested { box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.45); }
.cap-hl-pending  { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.45); }
.cap-hl-staged   { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.5); }
/* The single transient View-inspect box (AI-draft panel) — violet, ringed a
   little stronger than the persistent tints so the just-clicked region pops. */
.cap-hl-view     { box-shadow: inset 0 0 0 2px rgba(147, 51, 234, 0.6); }
.cap-hl-fills {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.cap-hl-fills-attested { opacity: 0.16; }
.cap-hl-fills-pending  { opacity: 0.15; }
.cap-hl-fills-staged   { opacity: 0.15; }
.cap-hl-fills-view     { opacity: 0.18; }
.cap-hl-fill { position: absolute; border-radius: 2px; }
.cap-hl-fill-attested { background: rgb(22, 163, 74); }
.cap-hl-fill-pending  { background: rgb(217, 119, 6); }
.cap-hl-fill-staged   { background: rgb(37, 99, 235); }
.cap-hl-fill-view     { background: rgb(147, 51, 234); }
.cap-hl-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.75em;
  color: var(--muted, #666);
  margin: 0 0 6px 0;
  user-select: none;
}
.cap-hl-chip { display: inline-flex; align-items: center; gap: 4px; }
.cap-hl-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  /* swatches carry their own solid backgrounds (the .cap-hl-* box classes are
     ring-only); the inherited .cap-hl-* ring is a harmless 10x10 border */
}
.cap-hl-swatch.cap-hl-attested { background: rgba(22, 163, 74, 0.55); }
.cap-hl-swatch.cap-hl-pending  { background: rgba(217, 119, 6, 0.55); }
.cap-hl-swatch.cap-hl-staged   { background: rgba(37, 99, 235, 0.55); }
.cap-hl-swatch.cap-hl-view     { background: rgba(147, 51, 234, 0.55); }

/* ── Entry-mode layout + matrix tables (2026-07-10 W2) ─────────────────────
   The entry two-pane split and the matrix grids previously had NO stylesheet
   rules at all (layout was inline JS; the universal reset zeroed cell padding).
   One block styles both the ENTRY grid and the READ-ONLY renderMatrix view —
   they share .matrix-table. Keep data-entry-* hooks and DOM order untouched. */
.entry-body { display: flex; gap: 16px; align-items: flex-start; }
.entry-main { flex: 1 1 60%; min-width: 0; }
.entry-side {
  flex: 0 0 34%;
  min-width: 0;
  position: sticky;
  top: 0;
  max-height: 90vh;
  overflow-y: auto;
}
@media (max-width: 900px) {
  /* Stack the form above the source pages — no more 60/34 squeeze on phones. */
  .entry-body { flex-direction: column; }
  .entry-main, .entry-side { flex: 1 1 auto; width: 100%; }
  .entry-side { position: static; max-height: none; }
}

.entry-fields { width: 100%; }
.entry-fields td.entry-field-name {
  font-weight: 600;
  overflow-wrap: anywhere;   /* long canonical names wrap instead of squeezing */
  min-width: 12ch;
}
.entry-fields td.entry-value { width: 40%; }
.entry-fields td.entry-value input { width: 100%; }

.matrix-wrap { overflow-x: auto; }
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;           /* match .fields-table */
}
.matrix-table th, .matrix-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border, #ddd);
  text-align: left;
  vertical-align: top;
}
.matrix-table thead th { border-bottom: 2px solid var(--border, #ccc); }
th.matrix-corner { width: 26%; }
th.matrix-rowlabel { font-weight: 600; overflow-wrap: anywhere; }
th.matrix-dim { font-weight: 600; color: var(--muted, #666); }
.matrix-detail { color: var(--muted, #666); font-size: 0.92em; margin-top: 2px; }
.matrix-verified { color: var(--ok, #15803d); }
.matrix-footnote {
  color: var(--muted, #666);
  font-size: 0.9em;
  font-style: italic;
  padding: 6px 8px 2px;
}

/* ── History overlay (2026-07-10) ──────────────────────────────────────────
   Fields/cells with real change history get a violet wash + a ↺ badge that
   expands the per-field log (violet ≠ capture blue ≠ suspect amber). */
.history-changed { background: rgba(124, 58, 237, 0.08); }
.history-badge {
  font-size: 0.72rem;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  border: 1px solid #7c3aed;
  cursor: pointer;
  white-space: nowrap;
}
.history-log {
  font-size: 0.82rem;
  padding: 6px 8px;
  border-left: 3px solid #7c3aed;
  background: rgba(124, 58, 237, 0.05);
  margin: 4px 0;
}
.history-log-entry { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px 0; align-items: baseline; }
.history-when { color: var(--muted, #777); white-space: nowrap; }
.history-who { color: var(--muted, #777); white-space: nowrap; }
.history-reason { font-style: italic; color: var(--muted, #777); flex-basis: 100%; padding-left: 12px; }

/* ── Pending full-spec view (2026-07-10): value-part colour semantics ──────
   qualifier = purple, value = default/bold, unit = teal, basis = brown.
   The legend chips in the options bar reuse the same classes. */
.val-part.val-qualifier { color: #7c3aed; font-weight: 600; }
.val-part.val-value { font-weight: 600; }
.val-part.val-state { font-style: italic; color: #b45309; }
.val-part.val-unit { color: #0d9488; }
.val-part.val-basis { color: #92400e; }
.v3-full-bar .val-part {
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 0.72rem;
}
.v3-row-changed { background: rgba(37, 99, 235, 0.07); }
.v3-value-change { margin-top: 2px; font-size: 0.95em; }
.v3-indepth { font-size: 0.78rem; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
td.matrix-cell.v3-cell-changed { background: rgba(37, 99, 235, 0.12); outline: 2px solid var(--accent, #2563eb); outline-offset: -1px; }
.v3-cell-was { font-size: 0.78rem; color: var(--muted, #777); font-style: italic; }

/* Entry cells: full-width controls; detail input under the state select. */
.entry-matrix-cell .entry-cell-state { width: 100%; }
.entry-matrix-cell .entry-cell-detail {
  width: 100%;
  display: block;
  margin-top: 4px;
}
.matrix-entry-toolbar {
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.matrix-batch-onlyunset { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.matrix-batch-scope { color: var(--muted, #777); }
th.matrix-batch-target { cursor: pointer; }
th.matrix-batch-target:hover { text-decoration: underline; }
th.batch-selected {
  background: rgba(37, 99, 235, 0.14);
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -1px;
}

/* At-a-glance cell state (entry data-state mirrors the select; read-only uses
   .matrix-yes/.matrix-no). Yes-cells get a quiet green wash — the exceptions
   are what an all-day operator needs to spot. */
.entry-matrix-cell[data-state="yes"],
td.matrix-cell.matrix-yes { background: rgba(22, 163, 74, 0.10); }
td.matrix-cell.matrix-yes .matrix-state { color: var(--ok, #15803d); font-weight: 600; }
td.matrix-cell.matrix-no .matrix-state { color: var(--muted, #888); }
td.matrix-cell-absent { color: var(--muted, #888); }

/* Captured-row tint — single home for the class highlight-capture applies
   (was inline JS; the class previously had no rule anywhere). */
.capture-filled { background: rgba(37, 99, 235, 0.08); }

/* Field-first capture (W4): field names are arm targets; the armed row keeps a
   visible outline until the value lands or the arm is abandoned. */
.entry-fields td.entry-field-name { cursor: pointer; }
.entry-fields td.entry-field-name:hover { text-decoration: underline; color: var(--accent, #2563eb); }
tr.capture-armed {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: -1px;
  background: rgba(37, 99, 235, 0.06);
}

/* Set-all-No document check (W5): durable amber warning above the grid; the
   suspect cells keep an amber outline until their select changes. */
.matrix-scan-warning {
  border: 1px solid #d97706;
  background: rgba(217, 119, 6, 0.10);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.matrix-scan-warning-head { font-weight: 600; margin-bottom: 4px; }
.matrix-scan-warning-list { margin: 0 0 6px 18px; padding: 0; }
.matrix-scan-warning-list li { margin: 2px 0; }
.matrix-scan-warning-list li:hover { text-decoration: underline; }
td.scan-suspect {
  outline: 2px solid #d97706;
  outline-offset: -1px;
  background: rgba(217, 119, 6, 0.12);
}

/* ── AI-draft review panel (assisted onboarding, Task 8) ────────────────────
   The human editor's roster of AI drafts for a section. Accent-tinted so it
   reads as the AI review surface, distinct from the plain entry rows below it.
   Roster lists EVERY canonical field — a not-drafted field is shown, never
   skipped ([CR-5]); there is deliberately no "accept all" control. Theme-aware
   via the shared custom props. */
.ai-draft-panel {
  border: 1px solid var(--accent, #2563eb);
  background: rgba(37, 99, 235, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.ai-draft-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ai-draft-panel-title { font-weight: 700; color: var(--accent, #2563eb); }
.ai-draft-panel-sub { color: var(--muted, #777); flex: 1; }
.ai-draft-panel-progress {
  font-weight: 600;
  color: var(--muted, #777);
  white-space: nowrap;
}
.ai-draft-panel-progress.ok { color: var(--ok, #15803d); }
.ai-draft-roster { list-style: none; margin: 0; padding: 0; }
.ai-draft-field {
  border-top: 1px solid var(--border, #ddd);
  padding: 8px 0;
}
.ai-draft-field:first-child { border-top: none; }
.ai-draft-field-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-draft-field-name { font-weight: 600; overflow-wrap: anywhere; }
.ai-draft-chosen {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--surface2, #eef);
  color: var(--muted, #555);
  white-space: nowrap;
}
.ai-draft-field.disp-accept, .ai-draft-field.disp-edit {
  background: rgba(22, 163, 74, 0.06);
}
.ai-draft-field.disp-accept .ai-draft-chosen,
.ai-draft-field.disp-edit .ai-draft-chosen {
  color: var(--ok, #15803d);
}
.ai-draft-field.disposed { opacity: 0.85; }
.ai-draft-proposal { margin: 4px 0 6px; }
.ai-draft-proposal-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ai-draft-value { font-weight: 600; overflow-wrap: anywhere; }
.ai-draft-confidence {
  font-size: 11px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--border, #ccc);
  color: var(--muted, #666);
  white-space: nowrap;
}
.ai-draft-rationale { color: var(--muted, #777); font-style: italic; margin-top: 2px; }
.ai-draft-nodraft { color: var(--muted, #999); font-style: italic; margin: 2px 0 6px; }
.ai-draft-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ── Tactile button system (2026-07-10, Lee: 3D state indication over flat
   stateless buttons). One physical metaphor everywhere: buttons are RAISED
   keys (top light, bottom edge, drop shadow); clicking presses them DOWN
   (inset shadow); latching toggles STAY pressed with an accent tint —
   aria-pressed="true" or data-on="1" is the single on-state contract.
   rgba overlays over the surface tokens keep both themes working. */
button,
.auth-action,
.pane-toggle {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.05)), var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.16), 0 3px 5px rgba(0, 0, 0, 0.08);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}
button:hover:not(:disabled),
.auth-action:hover:not(:disabled),
.pane-toggle:hover:not(:disabled) {
  filter: brightness(1.06);
  border-color: var(--accent, #2563eb);
}
button:active:not(:disabled),
.auth-action:active:not(:disabled),
.pane-toggle:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
  filter: none;
}
/* Latched ON: stays pressed, accent-tinted — state readable at a glance. */
button[aria-pressed="true"],
button[data-on="1"],
.auth-action[aria-pressed="true"],
.auth-action[data-on="1"],
.pane-toggle[aria-pressed="true"] {
  transform: translateY(2px);
  background: linear-gradient(rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.16)), var(--surface2);
  color: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}
button.primary,
.auth-action.primary {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.08)), var(--brand);
  color: white;
  border-color: var(--brand);
}
button:disabled,
.auth-action:disabled,
.pane-toggle:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
  filter: none;
}
button:focus-visible,
.auth-action:focus-visible,
.pane-toggle:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  button, .auth-action, .pane-toggle { transition: none; }
}

/* Onboarding image picker (W6): ticked thumbnails of staged images. */
.onb-img-strip { flex-basis: 100%; }
.onb-img-strip-label { font-size: 0.8em; color: var(--muted, #666); margin-bottom: 4px; }
.onb-img-row { display: flex; gap: 10px; flex-wrap: wrap; }
.onb-img-cell {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
}
.onb-img-cell img { max-height: 72px; max-width: 110px; display: block; border-radius: 3px; }
.onb-img-cell:has(input:not(:checked)) { opacity: 0.4; }

/* Live multi-drag accumulation tint (W1): one rect per accepted drag while the
   value accumulator popover is open, so earlier drags stay visible. Dashed to
   read as "in progress" vs the solid staged tint that lands on commit. */
.capture-accum-rect {
  background: rgba(37, 99, 235, 0.12);
  border: 1px dashed rgba(37, 99, 235, 0.65);
  border-radius: 2px;
  box-sizing: border-box;
}

/* ── Entry pending view (2026-08-24): ghosts of already-staged values ─────── */
.entry-pending-ghost {
  font-size: 0.78rem;
  color: var(--warn-fg, #92400e);
  background: var(--warn-bg, #fde68a);
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-cell-pending { outline: 2px dashed var(--warn-fg, #d97706); outline-offset: -2px; }
.entry-mode.hide-pending .entry-pending-ghost,
.entry-mode.hide-pending .entry-cell-pending { display: revert; }
.entry-mode.hide-pending .entry-pending-ghost { display: none; }
.entry-mode.hide-pending .entry-cell-pending { outline: none; }

/* ── Validate readable view (2026-08-24): typed value segments ────────────── */
.v3-seg-legend { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.v3-seg-chip { font-size: 0.7rem; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--border, #ddd); }
.seg-qualifier { color: #7c3aed; font-weight: 600; }
.seg-value     { font-weight: 600; }
.seg-unit      { color: #2563eb; }
.seg-basis     { color: #0f766e; }
.seg-state     { font-weight: 600; color: #15803d; }
.seg-detail    { color: #b45309; }
[data-theme="dark"] .seg-qualifier { color: #a78bfa; }
[data-theme="dark"] .seg-unit      { color: #60a5fa; }
[data-theme="dark"] .seg-basis     { color: #2dd4bf; }
[data-theme="dark"] .seg-state     { color: #4ade80; }
[data-theme="dark"] .seg-detail    { color: #fbbf24; }
.seg-changed { background: rgba(250, 204, 21, 0.35); border-radius: 3px; }
.v3-matrix-summary { font-size: 0.82rem; margin: 2px 0 4px; color: var(--muted, #666); }
.v3-matrix-all summary { font-size: 0.78rem; cursor: pointer; color: var(--accent, #2563eb); margin: 4px 0; }
.v3-drill-btn { font-size: 0.72rem; padding: 0 7px; border-radius: 8px; border: 1px solid var(--border, #ccc);
  background: transparent; cursor: pointer; }
.v3-drill-btn[aria-pressed="true"] { background: var(--surface2, #eef1ee); }
.v3-drill-panel { flex-basis: 100%; font-size: 0.75rem; padding: 4px 8px; margin-top: 3px;
  border-left: 3px solid var(--border, #ddd); display: grid; grid-template-columns: max-content 1fr; gap: 1px 10px; }
.v3-drill-line { display: contents; }
.v3-drill-k { color: var(--muted, #777); }
.v3-drill-v { font-family: ui-monospace, monospace; word-break: break-word; }
.v3-matrix-cols { columns: 2 320px; column-gap: 18px; }
.v3-matrix-cols .v3-diff-row { break-inside: avoid; }

/* ── Origin card (CR-0016 T4): the no-document entry state ─────────────────── */
.origin-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--border, #d5d9e0);
  border-radius: 8px;
  background: var(--panel-bg, #f7f8fa);
  color: var(--text, #1f2430);
  font-size: 0.9rem;
  line-height: 1.45;
}
.origin-card-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.origin-card-line {
  margin: 0.3rem 0;
  color: var(--text-muted, #5a6272);
}
.origin-card-line:first-of-type {
  color: var(--text, #1f2430);
}