:root {
  --bg: #fffcf5;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-muted: #ffffff8c;
  --surface-wash: #ffffff7a;
  --ink: #1d2a2b;
  --muted: #607072;
  --brand: #0f6c5c;
  --brand-text: #0b6e5a;
  --brand-soft: #0f6c5c14;
  --brand-soft-2: #0f6c5c17;
  --brand-soft-3: #0f6c5c24;
  --brand-soft-4: #0f6c5c0a;
  --brand-2: #d48a32;
  --danger: #9d2c2c;
  --warn: #d48a32;
  --ok: #1b7f3c;
  --blue: #1d4ed8;
  --blue-soft: #2563eb1a;
  --blue-soft-2: #2563eb0d;
  --border: #142a2b1f;
  --brand-border: #0f6c5c33;
  --shadow: 0 1px 0 rgba(20, 42, 43, 0.05);
  --font: "Segoe UI", "Helvetica Neue", sans-serif;
  --title-font-size: 28px;
  --heading-font-size: 22px;
  --subheading-font-size: 16.8px;
  --top-menu-font-size: 16px;
  --menu-font-size: 20px;
  --button-font-size: 16px;
  --small-button-font-size: 15px;
  --button-font-weight: 600;
  --console: #0b6e5a;
  --link-surface: #ffffff;
  --pale-green: #0f6c5c14;
}

* { box-sizing: border-box; }
strong, b { font-weight: 700; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 11.52px;
  line-height: normal;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  border: 4px solid var(--ink);
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  background: var(--bg);
}

.auth-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.auth-card {
  width: min(520px, calc(100vw - 48px));
  padding: 42px 38px 38px;
  margin: 40px auto 48px;
  align-self: center;
  border: 0;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(20, 42, 43, 0.04);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: flex-start;
  margin: 0;
  padding: 62px 40px 28px;
  min-height: 170px;
  background: #fffcf5f0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.topbar-brand {
  display: flex;
  align-items: flex-start;
}

.app-logo {
  width: 96px;
  height: auto;
  display: block;
}

.topbar-corner-logo {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin: 0 0 34px 8px;
  background: #ffffff;
}

.topbar-title-block {
  min-width: 0;
}

.app-dashboard-title {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: var(--title-font-size);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}

.signed-in-line {
  margin: 0;
  color: var(--ink);
  font-size: 11.52px;
}

.signed-in-line strong {
  font-weight: 700;
}

.login-topbar {
  min-height: 210px;
  padding: 72px 48px 0;
}

.login-topbar .app-logo {
  width: 116px;
  height: 116px;
  object-fit: contain;
  background: #ffffff;
}

.login-page .auth-card .page-title {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--title-font-size);
  line-height: 1.15;
  font-weight: 700;
}

.login-page label {
  color: var(--ink);
  font-size: 11.52px;
  gap: 9px;
}

.login-page input {
  min-height: 54px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #2563eb0d;
  color: var(--ink);
}

.login-page button[type="submit"] {
  min-height: 54px;
  margin-top: 2px;
  background: var(--brand);
  border-radius: 999px;
  font-size: 11.52px;
}

.login-page .app-footer {
  margin: 0 44px 292px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.console-heading {
  align-self: center;
  text-align: center;
  color: var(--console);
  font-family: Bahnschrift, "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 400;
}

.console-heading strong,
.console-username {
  display: block;
  color: var(--console);
  font-weight: 700;
}

.page-title {
  color: var(--muted);
  font-size: var(--title-font-size);
  line-height: 1.2;
  margin: 0 0 14px;
  grid-column: 1 / -1;
}

.dashboard-shell {
  padding: 0 40px 36px;
}

.page-pending .page-title,
.page-details .page-title,
.page-extractions .page-title,
.page-output .page-title {
  font-size: var(--title-font-size);
  line-height: 1.1;
  margin-bottom: 8px;
}

.page-heading-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.page-heading-row .page-title {
  margin-bottom: 0;
}

.page-back-link {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 4px 0;
  font-size: 0.92rem;
}

.page-heading-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.log-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.log-toolbar .log-filters {
  margin-bottom: 0;
}

.app-footer {
  margin: 36px 32px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: #000000;
  font-size: 11.52px;
}

.dashboard-intro-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.dashboard-intro-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--heading-font-size);
  line-height: 1.2;
  font-weight: 700;
}

.dashboard-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

.dashboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.topbar-dashboard-actions {
  padding-top: 0;
}

.topbar-actions form,
.topbar-dashboard-actions form {
  display: inline-flex;
  align-items: center;
}

.topbar-actions .button,
.topbar-actions button,
.topbar-dashboard-actions .button,
.topbar-dashboard-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: var(--top-menu-font-size);
  line-height: 1;
  font-weight: var(--button-font-weight);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(20, 42, 43, 0.12);
}

.topbar-actions .button.secondary,
.topbar-actions .help-button,
.topbar-dashboard-actions .button.secondary,
.topbar-dashboard-actions .help-button {
  background: var(--brand-2);
  color: #ffffff;
}

.topbar-actions .button.primary-action,
.topbar-actions #process-now-dashboard-button,
.topbar-dashboard-actions .button.primary-action,
.topbar-dashboard-actions #process-now-dashboard-button {
  background: var(--brand);
  color: #ffffff;
}

.topbar-actions .logout-button,
.topbar-dashboard-actions .logout-button {
  background: #fffcf5f0;
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(20, 42, 43, 0.08);
}

.dashboard-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.dashboard-tab {
  min-width: 104px;
  text-align: center;
}

.dashboard-tab[aria-selected="true"] {
  outline: 3px solid var(--blue-soft);
  outline-offset: 2px;
}

.dashboard-tab:hover {
  outline: 2px solid var(--blue-soft-2);
  outline-offset: 2px;
}

.dashboard-tab-panel {
  padding-top: 18px;
}

.workflow-page-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  perspective: 700px;
}

.workflow-page-link,
.workflow-page-link:link,
.workflow-page-link:visited {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid #d8dddf;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink) !important;
  box-shadow: 5px 5px 0 #c9ced1;
  font-family: var(--font);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  transform: rotateX(0deg) rotateY(0deg) translate(0, 0);
  transform-origin: center;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.dashboard-summary-card .workflow-page-link strong {
  color: inherit;
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  letter-spacing: 0;
  line-height: 1;
}

.workflow-page-link:hover,
.workflow-page-link:focus-visible {
  border-color: #aeb6ba;
  color: #050808 !important;
  transform: translate(-1px, -1px) rotateX(5deg);
  box-shadow: 7px 7px 0 #c1c7ca;
}

.workflow-page-link:active,
.workflow-page-link.is-active,
.workflow-page-link.is-active:link,
.workflow-page-link.is-active:visited {
  background: #FEFBF3;
  color: var(--brand) !important;
  border-color: #98a2a8;
  transform: translate(4px, 4px) rotateX(0deg) rotateY(0deg);
  box-shadow:
    1px 1px 0 #aeb6ba,
    inset 0 2px 6px rgba(20, 42, 43, 0.12);
}

.dashboard-summary-card .workflow-page-link.is-active strong {
  color: inherit;
}

.dashboard-status-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 7px;
  background: var(--brand-soft-4);
  color: var(--brand);
  font-size: 11.52px;
  font-weight: 600;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
}

/* Logs hero: title on the left, PDF splitter status pinned top-right. */
.log-hero-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.log-splitter-status {
  margin: 0;
  flex: none;
}

/* LLM spend summary opposite the Activity Dashboard heading — plain text, no box. */
.cost-summary-inline {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
  font-size: 0.85rem;
  color: var(--brand);
}

/* Right-aligned column holding the LLM spend line and, beneath it, the
   collapsible "Recent extraction costs" toggle. */
.cost-summary-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

/* Spend-vs-budget indicator dot. */
.cost-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a34a;
}
.cost-dot-ok { background: #16a34a; }
.cost-dot-warn { background: #d97706; }
.cost-dot-over { background: #dc2626; }

/* Link-style button that opens the Recent extraction costs modal. */
.cost-modal-trigger {
  margin: 0;
  padding: 4px 0;
  border: none;
  background: none;
  box-shadow: none;
  min-height: 0;
  cursor: pointer;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: right;
  line-height: 1.2;
}
.cost-modal-trigger:hover { text-decoration: underline; }

.calibration-note-status {
  min-height: 1.2em;
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.calibration-note-status.error-text {
  color: #b3261e;
  font-weight: 600;
}

/* Recent extraction costs modal. */
.cost-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  padding: 24px;
}
.cost-modal-overlay[hidden] { display: none; }
.cost-modal-shell {
  display: flex;
  flex-direction: column;
  width: min(900px, 96vw);
  max-height: min(85vh, 100%);
  background: var(--surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.cost-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted, #f3f4f6);
}
.cost-modal-title {
  font-weight: 600;
  font-size: 0.9rem;
}
.cost-modal-close {
  width: 32px;
  min-height: 0;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #1f2937);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: none;
}
.cost-modal-close:hover { background: rgba(0, 0, 0, 0.08); }
.cost-modal-body {
  padding: 12px 16px;
  overflow: auto;
}
.cost-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.cost-detail-table th,
.cost-detail-table td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--brand-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.cost-detail-table .cost-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* User Behaviour report — numeric cells, flag badges, and flagged rows. */
.history-table th.num,
.history-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.behaviour-summary-table th,
.behaviour-files-table th {
  vertical-align: bottom;
}
.behaviour-summary-table col:nth-child(1) { width: 24%; }
.behaviour-summary-table col:nth-child(2) { width: 8%; }
.behaviour-summary-table col:nth-child(3) { width: 15%; }
.behaviour-summary-table col:nth-child(4) { width: 12%; }
.behaviour-summary-table col:nth-child(5) { width: 11%; }
.behaviour-summary-table col:nth-child(6) { width: 12%; }
.behaviour-summary-table col:nth-child(7) { width: 18%; }
.behaviour-files-table col:nth-child(1) { width: 25%; }
.behaviour-files-table col:nth-child(2) { width: 12%; }
.behaviour-files-table col:nth-child(3) { width: 7%; }
.behaviour-files-table col:nth-child(4) { width: 7%; }
.behaviour-files-table col:nth-child(5) { width: 12%; }
.behaviour-files-table col:nth-child(6) { width: 9%; }
.behaviour-files-table col:nth-child(7) { width: 10%; }
.behaviour-files-table col:nth-child(8) { width: 6%; }
.behaviour-files-table col:nth-child(9) { width: 12%; }
.allocation-analytics-table {
  max-height: 320px;
  overflow: auto;
}
.table-wrap.history-table-wrap.allocation-analytics-table-fit {
  max-height: none;
  overflow: visible;
}
.allocation-analytics-table-fit .history-table {
  min-width: 0;
}
.kpi-value-bad {
  color: #dc2626;
}
.behaviour-flag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  margin-right: 4px;
  white-space: nowrap;
}
.behaviour-flag-fast {
  background: #fee2e2;
  color: #b91c1c;
}
.behaviour-flag-bulk {
  background: #fef3c7;
  color: #92400e;
}
.behaviour-flag-noedit {
  background: #e5e7eb;
  color: #374151;
}
.behaviour-row-flagged {
  background: #fef6f6;
}

.dashboard-summary-card {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-nav-card {
  justify-content: flex-end;
}

.dashboard-summary-card strong {
  display: block;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.dashboard-summary-card span {
  color: var(--muted);
}

.pending-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
}

.pending-panel-heading h3 {
  margin: 0;
}

.validation-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 14px;
}

.validation-toolbar-left {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: flex-start;
}

.validation-toolbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.autosave-status {
  font-size: 0.8rem;
}

/* Counts, submit hint, and status messages sit underneath the action buttons,
   right-aligned, never between the buttons. */
.validation-toolbar-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  text-align: right;
}

.validation-toolbar-counts {
  font-size: 0.85rem;
}

.validation-toolbar-counts strong {
  color: var(--ink);
}

.validation-toolbar-footer .validation-submit-hint,
.validation-toolbar-footer .validation-query-counts {
  max-width: 560px;
}

.validation-actions,
.validation-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Output / Query toolbar: buttons in one row along their bottom edge. A control
   that belongs to one button (Allow duplicates, Move check) sits on one line
   directly above it, so it never pushes the buttons apart. */
.validation-actions-stacked {
  align-items: flex-end;
}

.validation-actions-stacked #process-all-form,
.validation-actions-stacked #query-process-form,
.validation-actions-stacked #move-check-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.validation-actions-stacked .process-allow-duplicates,
.validation-actions-stacked #move-check-form label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Move check is wider than Move. Taken out of the flow (right edge on Move's
   right edge, reaching back over Rebalance Output) so the form is only as wide
   as its button and the button gaps stay even. padding-top keeps its space. */
.validation-actions-stacked #move-check-form {
  position: relative;
  padding-top: 38px;
}

.validation-actions-stacked #move-check-form label {
  position: absolute;
  top: 0;
  right: 0;
}

.validation-actions-stacked #move-check-form select {
  width: auto;
  height: 34px;
  padding: 0 8px;
}

.validation-actions form {
  margin: 0;
}

.button-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
}

.validation-toolbar button {
  min-height: 38px;
  padding: 0 16px;
  font-size: var(--small-button-font-size);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(20, 42, 43, 0.08);
}

.validation-save-button,
button.validation-save-button,
.button.validation-save-button,
#bulk-validate-form .button,
.validation-navigation .button:first-child,
.validation-navigation .button:nth-child(3) {
  background: var(--brand);
  color: #ffffff;
}

.validation-actions #bulk-select-visible {
  background: var(--brand-2);
  color: #ffffff;
}

.validation-actions > button:nth-child(2),
.validation-navigation .button,
.filterbar .button.ghost,
#dash-filter-clear {
  background: #fffcf5f0 !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

.validation-action-status-row {
  margin: 0 0 14px;
}

.validation-status-legend {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin: -4px 0 10px;
  color: var(--muted);
}

.validation-status-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.validation-save-button,
button.validation-save-button,
.button.validation-save-button {
  background: var(--brand);
  color: #ffffff;
}

.validation-delete-button,
button.validation-delete-button,
.button.validation-delete-button {
  background: var(--danger);
  color: #ffffff;
}

/* Save icon button — square, icon-only variant of the save button */
.validation-save-icon-btn {
  width: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.validation-save-icon-btn svg {
  flex-shrink: 0;
}

/* Output mode confidence filter label */
.output-confidence-label {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
}

.output-confidence-select {
  padding: 8px 12px;
  font-size: 0.9rem;
  min-width: 160px;
}

/* Read-only panel (Processed mode) */
.is-readonly-panel .readonly-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--surface-2, #f4f4f5);
  border: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted, #6b7280);
}

.is-readonly-panel button:not([data-allow-readonly]),
.is-readonly-panel input:not([type="search"]):not([type="date"]):not([type="checkbox"]):not([id^="output-filter"]),
.is-readonly-panel select:not([id^="output-filter"]) {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
}

/* In-app toast notifications */
.app-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
.app-toast {
  pointer-events: auto;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(20, 42, 43, 0.13);
  cursor: pointer;
  transition: opacity 0.3s;
}
.app-toast-error {
  background: rgba(157, 44, 44, 0.09);
  color: var(--danger);
  border: 1px solid rgba(157, 44, 44, 0.18);
}
.app-toast-warn {
  background: rgba(212, 138, 50, 0.10);
  color: var(--warn);
  border: 1px solid rgba(212, 138, 50, 0.2);
}
.app-toast-success {
  background: #e7f6ec;
  color: #14622f;
  border: 1px solid #9ad4ae;
}
.app-toast-fade {
  opacity: 0;
}

/* In-app confirm dialog overlay */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(20, 42, 43, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-confirm-overlay[hidden] {
  display: none;
}
.app-confirm-box {
  background: var(--surface);
  border-radius: 18px;
  padding: 28px 28px 22px;
  max-width: 420px;
  width: calc(100vw - 48px);
  box-shadow: 0 8px 32px rgba(20, 42, 43, 0.16);
  border: 1px solid var(--border);
}
.app-confirm-message {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.app-confirm-actions {
  justify-content: flex-end;
  gap: 10px;
}

.validation-table-wrap {
  overflow-x: auto;
}

.validation-review-workspace {
  --calib-left: 48%;
  display: grid;
  grid-template-columns: minmax(520px, var(--calib-left)) minmax(500px, 1fr);
  gap: 14px;
  align-items: stretch;
  /* One viewport slot for both panes. 220px clears the top bar and the
     filter/toolbar above the workspace. The rows pane scrolls inside this
     height; nothing may grow the workspace past the page. */
  height: calc(100vh - 220px);
  max-height: calc(100vh - 220px);
  min-height: 0;
  overflow: hidden;
}

.validation-review-workspace > .validation-page-preview,
.validation-review-workspace > .validation-results-panel {
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.validation-page-preview {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* A definite height. height:auto on the PDF plugin paints only the top of
     the page (the statement header) and this overflow clips the rest, so
     client marks further down the page cannot be checked. The pane fills its
     column; the plugin fills the pane. */
  min-height: 0;
  height: 100%;
}

.validation-page-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fffcf5f0;
}

.validation-page-nav .button {
  min-height: 34px;
  padding: 0 12px;
  font-size: var(--small-button-font-size);
  border-radius: 999px;
}

.validation-page-nav span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.validation-review-workspace > .validation-page-preview > object,
.validation-review-workspace > .validation-page-preview > iframe,
.validation-page-preview > object,
.validation-page-preview > iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
}

.pdf-viewer-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
}

.pdf-viewer-controls button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fffcf5;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pdf-viewer-controls button:hover {
  background: #fff6e4;
}

#pdfZoomLabel {
  min-width: 72px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.pdf-resize-handle {
  flex: 0 0 auto;
  height: 14px;
  cursor: ns-resize;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s;
}

.pdf-resize-handle:hover,
.pdf-resize-handle.is-dragging {
  background: #c8c8c8;
}

.pdf-resize-handle::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: #b0b0b0;
}

.pdf-resize-handle:hover::after,
.pdf-resize-handle.is-dragging::after {
  background: #666;
}

.validation-results-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.validation-review-workspace > .validation-results-panel > .status-key {
  flex: 0 0 auto;
}

.validation-review-workspace > .validation-results-panel > .validation-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.status-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted, #5c6562);
}

.status-key-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-key-code {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink, #1c2421);
}

.status-key-code.e { color: #d48a32; }
.status-key-code.v { color: #1b7f3c; }
.status-key-code.h { color: #1d4ed8; }
.status-key-code.qqs { color: #9a3412; }
.status-key-code.d { color: #3182ce; }
.status-key-code.y { color: #6b7280; }
.status-key-code.a { color: #14622f; }
.status-key-code.i { color: #553c9a; }

.validation-col-flags {
  width: 64px;
  text-align: center;
}

.validation-flags {
  display: inline-block;
  min-width: 28px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: var(--brand-2, #2a7d6f);
}

.validation-flags.is-rejected {
  color: #b3261e;
  letter-spacing: 0;
}

/* Output uses the same workspace as Extraction with a restrained colour difference. */
.is-output-panel .validation-page-nav,
.is-output-panel .validation-table thead th {
  background: #f3f0ff;
}

/* Rows a user has edited are highlighted light green. */
.validation-row.is-human-edited > td {
  background: #e7f6e7;
}

/* Transaction-row snippet preview: align to the top-left, not centred. */
.validation-snippet-image {
  align-self: flex-start;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top left;
  margin: 0;
}

/* Read-only cell values on the Processed page. */
.validation-readonly-value {
  display: block;
  padding: 6px 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.validation-readonly-tick {
  display: block;
  text-align: center;
  color: var(--brand-2, #2a7d6f);
  font-weight: 700;
}

.validation-table {
  table-layout: fixed;
  width: 100%;
}

.validation-table th,
.validation-table td {
  padding: 6px 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
}

.validation-table th {
  line-height: 1.2;
}

.validation-table td {
  line-height: 1.25;
}

.validation-table textarea,
.validation-table input[type="text"],
.validation-table input[type="number"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.validation-table textarea {
  min-height: 38px;
  height: 38px;
  resize: none;
  overflow: hidden;
}

.validation-table input[type="text"],
.validation-table input[type="number"] {
  height: 34px;
}

.validation-status-cell {
  text-align: center;
}

.validation-row-pending td {
  background: var(--surface);
}

.validation-row-edited td {
  background: var(--surface);
}

.validation-row-validated td {
  background: var(--surface);
}

.is-selected-row td,
.output-row.is-selected-row td {
  background: var(--brand-pale, #e8f4f8) !important;
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.status-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}

.status-icon-pending {
  background: rgba(157, 44, 44, 0.1);
  color: var(--danger);
}

.status-icon-edited {
  background: rgba(212, 138, 50, 0.12);
  color: var(--warn);
}

.status-icon-validated {
  background: rgba(27, 127, 60, 0.1);
  color: var(--ok);
}

.validation-table .validation-col-Trans_ID {
  width: 8%;
  min-width: 92px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.validation-table .validation-col-Prompt_Audit_ID {
  width: 9%;
  min-width: 112px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.validation-table .validation-col-Narrative {
  width: 33.6%;
  overflow-wrap: normal;
  word-break: normal;
}

.validation-table .validation-col-First_name {
  width: 13%;
}

.validation-table .validation-col-Surname {
  width: 14%;
}

.validation-table .validation-col-Microsite_ID {
  width: 5%;
}

.validation-table .validation-col-Filename {
  width: 8%;
}

.validation-table .validation-col-username {
  width: 5%;
}

.validation-table .validation-col-Date_Time {
  width: 8%;
}

.validation-table .validation-col-selected {
  width: 3%;
  text-align: center;
}

.validation-table th.validation-col-selected,
.validation-table td.validation-col-selected {
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}

.validation-table td.validation-col-selected input[type="checkbox"] {
  margin: 2px auto 0;
}

.dashboard-tab-panel[hidden] {
  display: none;
}

.details-table {
  table-layout: fixed;
  min-width: 2620px;
}

.details-table th,
.details-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 11px 10px;
  line-height: 1.25;
  border-bottom: 1px solid var(--border);
}

.details-table th {
  vertical-align: bottom;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.details-col-Trans_ID {
  width: 125px;
}

.details-col-Prompt_Audit_ID {
  width: 130px;
}

.details-col-Narrative {
  width: 390px;
}

.details-col-First_name {
  width: 110px;
}

.details-col-Surname {
  width: 130px;
}

.details-col-Transaction_Date {
  width: 140px;
}

.details-col-Debits,
.details-col-Credits {
  width: 90px;
}
/* Right-align the money values, but leave the Debits/Credits headers aligned
   like every other column heading. */
.details-table td.details-col-Debits,
.details-table td.details-col-Credits {
  text-align: right;
}

.details-col-Microsite_ID {
  width: 110px;
}

.details-col-Filename {
  width: 175px;
}

.details-col-username,
.details-col-Processed_By {
  width: 110px;
}

.details-col-Date_Time,
.details-col-Processed_At {
  width: 130px;
}

.details-col-Scanned_Image {
  width: 260px;
}

.details-col-_validationStatus {
  width: 110px;
  font-weight: 700;
  color: var(--ok);
}

.details-col-Bank_Statement_ID {
  width: 150px;
}

.name-field-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(240px, 1.2fr);
  gap: 12px;
}

.topbar-actions,
.button-row,
.checkbox-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.page-grid {
  display: grid;
  gap: 20px;
  padding: 0 32px 32px;
}

.settings-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.panel {
  padding: 28px;
}

.stack {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

input, textarea, select, button {
  font: inherit;
}

input, textarea, select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
}

/* User Management role dropdown: compact, content-width select using the native
   arrow (which reserves its own space, so 6px 4px padding doesn't crowd the text).
   Overrides the global select rule's width:100% + large padding. */
.user-role-select {
  width: auto;
  max-width: 100%;
  padding: 6px 4px;
  font-size: 0.85rem;
}

/* Radios and checkboxes must keep their natural size, not be stretched to
   full width / padded like text inputs by the rule above. */
input[type="radio"], input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  flex: 0 0 auto;
}

/* Settings radio groups: bordered fieldset with evenly spaced, left-aligned
   options whose radio circle is vertically centred against its label text. */
.settings-fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.settings-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
}

.radio-option > span {
  flex: 1 1 auto;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: var(--brand);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  min-height: 42px;
  box-shadow: 0 8px 18px rgba(20, 42, 43, 0.08);
}

.button.secondary { background: var(--brand-2); }
.button.primary-action { background: var(--brand); }
/* Destructive actions (Delete File). Deliberately distinct from the brand
   colours so an irreversible action never reads as a routine one. */
.button.danger { background: #b3261e; }
.button.danger:hover { background: #8f1d17; }

/* Workspace action feedback, shown in the empty space above the statement page
   navigation. Green for success, red for failure. Hidden until there is a
   message so it takes no vertical space in the normal layout. */
.workspace-message {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  line-height: 1.4;
}
.workspace-message[hidden] { display: none; }

/* Duplicate files sit under Deselect All (left column), parallel with
   View Previous Page under the action buttons (right column). */
.duplicate-file-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.duplicate-file-links-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.duplicate-file-link {
  display: inline-block;
  line-height: 1.35;
}
.duplicate-groups-open {
  margin-top: 4px;
  padding: 4px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
}

/* Duplicate pop-up — the statement pages side by side, one column per copy:
   Original / Duplicate 1 / Duplicate 2, each a live PDF pane with the browser's
   own viewer toolbar, zoom and scrollbar. Sits BELOW the shared document viewer
   (z-index 1000) so a page opened from elsewhere still stacks on top. */
.duplicate-group-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.72);
  padding: 18px;
}
.duplicate-group-overlay[hidden] { display: none; }
.duplicate-group-shell {
  display: flex;
  flex-direction: column;
  width: min(1500px, 98vw);
  height: min(94vh, 100%);
  background: var(--surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}
.duplicate-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.duplicate-group-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}
.duplicate-group-close {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 8px;
  color: var(--ink);
}
.duplicate-group-close:hover { background: rgba(0, 0, 0, 0.08); }
.duplicate-group-body {
  flex: 1;
  min-height: 0;
  padding: 12px 18px 16px;
  overflow: auto;
}
.duplicate-group-note {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.5;
}
.duplicate-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.duplicate-group-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.duplicate-group-count { margin-left: auto; }

/* The comparison itself: equal columns, scrolling sideways if a group has more
   copies than fit, so each page keeps a usable width. */
.duplicate-group-columns {
  display: flex;
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
}
.duplicate-group-column {
  flex: 1 1 0;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* The subtle per-column tints, unchanged: green Original, red duplicates. */
.duplicate-group-column.is-original {
  border-color: #9ad4ae;
  background: #f2fbf5;
}
.duplicate-group-column.is-duplicate {
  border-color: #f0a9a4;
  background: #fef7f6;
}
.duplicate-group-column.is-current {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}
.duplicate-group-column-head { display: grid; gap: 2px; }
.duplicate-group-role {
  font-weight: 700;
  font-size: 0.92rem;
}
.duplicate-group-here {
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--muted);
}
.duplicate-group-file-link {
  font-size: 0.84rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.duplicate-group-pagemeta { font-size: 0.78rem; }

/* The PDF pane. Tall by design — this is the thing being compared. */
.duplicate-group-pane {
  position: relative;
  flex: 1;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.duplicate-group-pane-object,
.duplicate-group-pane-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.duplicate-group-pane-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.duplicate-group-column-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 30px;
}
.duplicate-group-column-actions .button {
  padding: 5px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
}
.duplicate-group-hint {
  font-size: 0.76rem;
  line-height: 1.35;
}
.workspace-message.is-success {
  background: #e7f6ec;
  border-color: #9ad4ae;
  color: #14622f;
}
.workspace-message.is-error {
  background: #fdeceb;
  border-color: #f0a9a4;
  color: #8f1d17;
}
.button.ghost {
  background: #fffcf5f0;
  color: var(--ink) !important;
  border: 1px solid var(--border);
}
.button.help-button,
.help-button {
  background: var(--brand-2);
  color: #ffffff;
}
.logout-button,
button.logout-button,
.button.logout-button {
  background: #fffcf5f0;
  color: var(--ink);
  border: 1px solid var(--border);
}

a:not(.button) {
  display: inline-block;
  background: transparent;
  color: var(--blue);
  padding: 0;
  border-left: 0;
  text-decoration: none;
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
}

h4:not(:first-child) {
  margin-top: 18px;
}

h1 {
  font-size: var(--title-font-size);
}

h2 {
  font-size: var(--subheading-font-size);
}

h3 {
  font-size: var(--subheading-font-size);
}

li::before {
  content: "–";
  margin-right: 6px;
  color: var(--muted);
}

.subtitle, .muted { color: var(--muted); }
.error-banner {
  background: rgba(157, 44, 44, 0.08);
  color: var(--danger);
  border: 1px solid rgba(157, 44, 44, 0.25);
  padding: 12px 14px;
  border-radius: 12px;
}

/* Outcome colours are consistent app-wide: green = it worked, red = it failed,
   amber = it worked but you should know something. Matches the palette already
   used by .workspace-message.is-success / .is-error. */
.success-banner {
  background: #e7f6ec;
  color: #14622f;
  border: 1px solid #9ad4ae;
  padding: 12px 14px;
  border-radius: 12px;
}

.warning-banner {
  background: rgba(212, 138, 50, 0.10);
  color: var(--warn);
  padding: 12px 14px;
  border-radius: 8px;
}

.table-wrap {
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th, td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Tighter cells for the User Management table only (kept out of the global
   th/td rule so other tables are unaffected). */
#users-table th,
#users-table td {
  padding: 6px 4px;
}

/* Tighter cells + slightly larger text for the calibration Test Scan Result
   table so long surnames (e.g. on the Lloyds BPP) stay readable without overflow. */
.test-scan-table th,
.test-scan-table td {
  padding: 9px 4px;
  font-size: 13px;
}

th {
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  font-weight: 700;
}

td {
  font-size: 11.52px;
  color: var(--ink);
}

td:first-child {
  font-weight: 600;
}

td.col-charity {
  color: var(--brand);
  font-weight: 600;
}

td.col-org {
  color: var(--muted);
}

tr.row-duplicate td {
  background: rgba(212, 138, 50, 0.08);
}

.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.52px;
  font-weight: 700;
  text-transform: capitalize;
}

.badge.matched { background: #16a34a; color: #ffffff; }
.badge.discrepancy { background: #fffcf5f0; color: var(--warn); }
.badge.unmatched { background: rgba(157, 44, 44, 0.1); color: var(--danger); }
.warning { color: var(--warn); font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; }

.pending-client {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  background: var(--surface);
}

.pending-client-header,
.bpp-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.pending-client-header h4 {
  margin: 0 0 4px;
}

.pending-client-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pending-header-process {
  min-height: 34px;
  padding: 0 14px;
  font-size: var(--small-button-font-size);
}

.pending-scan-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
}

.pending-scan-summary p {
  margin: 0;
}

.pending-scan-line strong,
.pending-scan-allocated strong,
.pending-scan-current strong {
  font-weight: 700;
}

.pending-scan-allocated {
  color: #1d4ed8;
}

.pending-scan-current {
  color: #7c3aed;
}

/* Live Pending / Allocated / In Processing / Done figures on the Pending page. */
.pending-scan-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 !important;
}
.pending-figure {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--brand);
  background: var(--brand-soft-4);
}
.pending-figure strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
button.pending-figure {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: inherit;
  line-height: inherit;
  min-height: 0;
  padding: 3px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft-4);
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}
button.pending-figure:hover {
  background: var(--brand-soft-3);
  border-color: var(--brand);
}
button.pending-figure:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
button.pending-figure.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
button.pending-figure.is-active strong {
  color: #fff;
}
.pending-figure-processing {
  color: #b45309;
  border-color: #fcd9a3;
  background: #fff7ed;
}
.pending-figure-done {
  color: #15803d;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.pending-file-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}

.pending-file {
  min-width: 0;
}

.pending-file-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  margin: 4px 0 0;
}

.pending-file-bpp-label,
.pending-file-year-label {
  display: grid;
  gap: 4px;
}

.bpp-selector {
  display: grid;
  grid-template-columns: minmax(260px, 520px);
  gap: 12px;
  align-items: end;
}

.bpp-mode-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bpp-selector button {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.bpp-selected-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr);
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  align-items: start;
}

.bpp-selected-summary h3 {
  margin: 4px 0 10px;
}

.bpp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 16px;
}

.bpp-instructions-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.bpp-instructions-title {
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.bpp-instructions-preview p {
  margin: 0 0 12px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.compact-button {
  padding: 6px 12px;
  font-size: var(--small-button-font-size);
}

.bpp-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 520px);
  gap: 14px;
  align-items: start;
}

/* BPP profile-type radio group: no fieldset box, question label sits close
   above its options, each radio centred against its label text. */
.bpp-type-fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.bpp-type-fieldset legend {
  padding: 0;
  margin-bottom: 4px;
  font-weight: 600;
}

.bpp-type-fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
}

.bpp-selected-table {
  margin-top: 18px;
}

.bpp-selected-table input,
.bpp-selected-table select,
.bpp-selected-table textarea {
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 6px;
}

.bpp-selected-table textarea {
  min-width: 300px;
  width: 100%;
  resize: vertical;
}

.bpp-instructions-cell {
  min-width: 340px;
}

.bpp-action-cell {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bpp-action-cell button {
  padding: 8px 12px;
}

.sample-files-panel {
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.sample-files-panel h3 {
  margin: 0 0 10px;
}

.calibration-notes-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.calibration-notes-panel h3 {
  margin: 0 0 12px;
}

.calibration-note-add {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.calibration-note-add textarea,
.bpp-notes-table textarea {
  resize: vertical;
}

.notes-tabbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.notes-tab {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 3px 3px 0 #c9ced1;
}

.notes-tab:hover,
.notes-tab:focus-visible {
  color: #050808;
  border-color: #aeb6ba;
}

.notes-tab.is-active {
  color: var(--brand);
  border-color: #98a2a8;
  background: #FEFBF3;
  transform: translate(2px, 2px);
  box-shadow:
    1px 1px 0 #aeb6ba,
    inset 0 2px 6px rgba(20, 42, 43, 0.12);
}

.notes-tab .nav-count {
  background: #9ca3af;
}

.notes-tab.is-active .nav-count {
  background: var(--brand);
}

.notes-tab-panel[hidden] {
  display: none;
}

.bpp-notes-table table {
  table-layout: fixed;
}

.bpp-notes-table th,
.bpp-notes-table td {
  padding: 7px 8px;
  vertical-align: middle;
}

.bpp-notes-table th:first-child,
.bpp-notes-table td:first-child {
  width: 62%;
}

.bpp-notes-table th:nth-child(2),
.bpp-notes-table td:nth-child(2),
.bpp-notes-table th:nth-child(3),
.bpp-notes-table td:nth-child(3) {
  width: 10%;
}

.bpp-notes-table textarea {
  min-width: 0;
  width: 100%;
  padding: 7px 9px;
  line-height: 1.25;
}

.compact-note-textarea {
  height: auto;
  min-height: 36px;
  overflow-y: hidden;
  resize: none;
}

.note-meta-primary,
.note-meta-muted {
  display: block;
  line-height: 1.25;
}

.note-meta-primary {
  font-weight: 700;
}

.note-meta-muted {
  color: var(--muted);
  font-size: 11px;
}

.deleted-note-text {
  max-width: 620px;
  max-height: 64px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.deleted-note-row {
  opacity: 0.74;
}

.sample-file-list {
  display: grid;
  gap: 8px;
}

.sample-file-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}
.sample-file-item.is-selected {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}

/* "Viewing queue for" selector — a header filter on the Pending/Extraction tabs,
   kept separate from the operational action buttons. */
.queue-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.queue-view-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted, #f3f4f6);
  flex: 1 1 520px;
}
.queue-rebalance-form {
  display: flex;
  align-items: center;
  margin: 0;
}
.queue-view-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}
.queue-view-label select {
  min-width: 200px;
  padding: 6px 10px;
  font-size: 0.9rem;
}
.queue-view-note {
  font-size: 0.78rem;
}

/* Per-file/row "Allocated to" control — its own zone, separate from operational
   buttons (BPP/Process on Pending; edit inputs on Extraction). */
.allocation-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.allocation-control.is-busy { opacity: 0.6; pointer-events: none; }
.allocation-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}
.allocation-select { padding: 5px 8px; font-size: 0.85rem; }
/* In the Extraction table cell the control sits inline with no divider. */
.validation-col-allocated .allocation-control { margin: 0; padding: 0; border: 0; }

.sample-file-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.sample-file-actions .button,
.sample-file-actions button {
  padding: 7px 12px;
  font-size: var(--small-button-font-size);
}

.pending-client-grid,
.bpp-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}

.pending-preview {
  min-height: calc(100vh - 320px);
}

.pending-preview object,
.pending-preview iframe {
  height: calc(100vh - 320px);
  min-height: 520px;
}

.validation-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.filterbar label {
  min-width: 150px;
  gap: 6px;
}

.filterbar input,
.filterbar select {
  width: auto;
  min-width: 140px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.filterbar input[type="search"] {
  min-width: 240px;
}

.filterbar button {
  padding: 7px 12px;
  font-size: 0.9rem;
}

.help-search-panel {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-wash);
}

.help-search-field {
  flex: 0 1 320px;
  display: grid;
  gap: 6px;
}

.help-search-field label {
  min-width: 0;
}

.help-search-panel input {
  min-height: 42px;
  width: 100%;
}

.help-search-field p {
  margin: 0;
  max-width: 520px;
  line-height: 1.35;
}

.help-search-panel button {
  min-height: 42px;
}

.help-content {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.help-content p,
.help-content li {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

.help-content strong,
.help-content b {
  color: var(--ink);
  font-weight: 700;
}

.help-content h2 {
  margin-top: 26px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: var(--heading-font-size);
  font-weight: 700;
  line-height: 1.25;
}

.help-content h3 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--subheading-font-size);
  font-weight: 700;
  line-height: 1.3;
}

.help-section-match {
  padding: 8px 10px;
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background: var(--brand-soft-4);
}

.help-kb-heading {
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.help-quick-topics,
.help-section-index {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.help-quick-topics button,
.help-section-index a,
.help-category-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  text-align: center;
}

.help-quick-topics button:hover,
.help-section-index a:hover,
.help-category-card a:hover {
  border-color: #aeb6ba;
  color: #050808;
}

.help-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.help-category-card {
  min-height: 190px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}

.help-category-card h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.help-category-card ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
}

.help-category-card li {
  color: var(--ink);
}

.help-content li::before {
  content: none;
  margin-right: 0;
}

.help-category-card a {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

.help-category-card a:hover {
  color: #0f172a;
  text-decoration: underline;
}

/* ===== Help visual diagrams / infographics ===== */
.help-figure {
  margin: 6px 0 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}
.help-figure-caption {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.help-figure-caption::before {
  content: none;
}

/* Horizontal pipeline flow */
.help-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
.help-pipeline-step {
  flex: 1 1 130px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: var(--shadow);
}
.help-pipeline-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.help-pipeline-step .step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.help-pipeline-step .step-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.help-pipeline-step .step-role {
  margin-top: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blue);
}
.help-pipeline-arrow {
  align-self: center;
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.help-pipeline-arrow::before { content: none; }

/* Status flow (page-status transitions) */
.help-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.help-node {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--brand-border);
  background: var(--brand-soft);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.help-node small {
  font-weight: 600;
  font-size: 10.5px;
  color: var(--muted);
}
.help-node.is-start { border-color: #2563eb55; background: var(--blue-soft); }
.help-node.is-end { border-color: #1b7f3c55; background: #1b7f3c14; }
.help-node.is-reject { border-color: #9d2c2c55; background: #9d2c2c12; }
.help-flow-arrow {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.help-flow-arrow .glyph { font-size: 18px; color: var(--brand); line-height: 1; }
.help-flow-arrow::before { content: none; }
.help-flow-arrow .label { white-space: nowrap; }
.help-flow-break { flex-basis: 100%; height: 0; }

/* Flag / badge infographic */
.help-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.help-badge {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #ffffff;
}
.help-badge::before { content: none; }
.help-badge .chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 14px;
  color: #ffffff;
}
.help-badge .chip.e { background: #d48a32; }
.help-badge .chip.v { background: #1b7f3c; }
.help-badge .chip.h { background: #1d4ed8; }
.help-badge .chip.r { background: #9d2c2c; }
.help-badge .chip.d { background: #3182ce; }
.help-badge .chip.y { background: #6b7280; }
.help-badge .badge-body { font-size: 12.5px; line-height: 1.4; }
.help-badge .badge-title { font-weight: 700; color: var(--ink); }
.help-badge .badge-desc { color: var(--muted); }

/* Roles / access matrix */
.help-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.help-matrix th,
.help-matrix td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: center;
}
.help-matrix thead th {
  background: var(--brand-soft);
  color: var(--ink);
  font-weight: 700;
}
.help-matrix tbody th {
  text-align: left;
  background: #fbfdfc;
  font-weight: 600;
  color: var(--ink);
}
.help-matrix .yes { color: var(--ok); font-weight: 800; }
.help-matrix .no { color: #b9c0c1; font-weight: 800; }

/* Count info cards (rows vs pages) */
.help-countinfo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.help-count-card {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 9px;
  background: #ffffff;
}
.help-count-card.unit-rows { border-left-color: var(--blue); }
.help-count-card.unit-pages { border-left-color: var(--brand-2); }
.help-count-card .count-label { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.help-count-card .count-unit {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.help-count-card.unit-rows .count-unit { background: var(--blue-soft); color: var(--blue); }
.help-count-card.unit-pages .count-unit { background: #d48a3220; color: #a4661f; }
.help-count-card .count-desc { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Hierarchy (file -> page -> snippet) */
.help-hierarchy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.help-tier {
  flex: 1 1 150px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #ffffff;
  text-align: center;
}
.help-tier .tier-kind {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}
.help-tier .tier-name { margin-top: 3px; font-weight: 700; color: var(--ink); font-size: 13px; }
.help-tier .tier-note { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.help-hierarchy .help-flow-arrow .glyph { font-size: 20px; }

/* Two-column comparison */
.help-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.help-compare-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: 9px;
  background: #ffffff;
}
.help-compare-card.alt { border-top-color: var(--blue); }
.help-compare-card h4 { margin: 0 0 8px; font-size: 14px; color: var(--ink); }
.help-compare-card ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.help-compare-card li { font-size: 12.5px; color: var(--muted); }
.help-compare-card li::before { content: none; margin-right: 0; }
.help-compare-card li { list-style: disc; }

@media (max-width: 720px) {
  .help-pipeline-arrow { transform: rotate(90deg); }
}

.help-all-articles {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.help-all-articles summary {
  width: fit-content;
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}

.help-section-index {
  margin-top: 12px;
}

.help-quick-topics button.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--brand-soft-3);
}

.validation-filterbar label {
  min-width: 150px;
}

.validation-filterbar select,
.validation-filterbar input {
  width: auto;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.validation-filterbar button {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.preview-frame {
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
  background: #ffffff;
}

.preview-frame object,
.preview-frame iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}

.statement-preview-image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.notes-list {
  display: grid;
  gap: 10px;
}

.note-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: white;
}

.scan-result-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.scan-result-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.test-scan-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.scan-status-panel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 260px;
  max-width: 620px;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: var(--brand-soft-4);
}

.scan-status-panel[hidden] {
  display: none;
}

.dashboard-progress-panel {
  min-height: 58px;
  margin-left: 6px;
}

.scan-status-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 3px solid #0f6c5c33;
  border-top-color: #16a34a;
  border-radius: 50%;
  animation: scan-status-spin 0.8s linear infinite;
}

.scan-status-title {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
}

.scan-status-content {
  flex: 1;
  min-width: 0;
}

.scan-status-message {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.process-progress-track {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(150, 193, 78, 0.2);
  border-radius: 999px;
}

.process-progress-fill {
  width: 0%;
  height: 100%;
  background: #16a34a;
  border-radius: inherit;
  transition: width 0.35s ease;
}

@keyframes scan-status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── BPP Calibration layout ── */
.bpp-edit-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
  gap: 20px;
  align-items: stretch;
  min-height: calc(100vh - 210px);
}

.bpp-chat-panel {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.ai-response-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 11.52px;
  min-height: 120px;
}

.chat-history {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}

.chat-history-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  padding: 10px;
}

.chat-question {
  margin: 0 0 8px;
  font-weight: 700;
  background: var(--brand-soft);
  border-radius: 6px;
  padding: 8px;
}

.chat-answer {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}

.calib-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.calib-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.calib-grow {
  flex: 1;
  min-width: 220px;
}

.calib-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.calib-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.calib-workspace {
  --calib-left: 45%;
  display: grid;
  grid-template-columns: minmax(360px, var(--calib-left)) 10px minmax(420px, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: max(912px, calc(100vh - 170px));
  height: max(912px, calc(100vh - 170px));
}

.calib-workspace.is-resizing {
  user-select: none;
  cursor: col-resize;
}

.calib-splitter {
  align-self: stretch;
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0 3px, var(--border) 3px 7px, transparent 7px 10px);
  cursor: col-resize;
  touch-action: none;
}

.calib-splitter:hover,
.calib-splitter:focus {
  background: linear-gradient(90deg, transparent 0 3px, var(--brand) 3px 7px, transparent 7px 10px);
  outline: 0;
}

.calib-results {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding-right: 2px;
}

.calib-workspace > .preview-frame {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 912px;
}

.calib-workspace > .preview-frame object,
.calib-workspace > .preview-frame iframe {
  height: 100%;
  min-height: 0;
}

.calib-results .table-wrap {
  max-width: 100%;
  overflow: auto;
  max-height: calc(100% - 120px);
}

.calib-results table {
  table-layout: fixed;
  min-width: 760px;
}

.calib-results th,
.calib-results td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.calib-results th:nth-child(1),
.calib-results td:nth-child(1) {
  width: 40px;
}

.calib-results th:nth-child(2),
.calib-results td:nth-child(2) {
  width: 34%;
}

.calib-results th:nth-child(7),
.calib-results td:nth-child(7) {
  width: 72px;
  text-align: center;
}

.calib-chat-split {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin: 16px 0;
}

.chat-history-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.chat-history-picker button {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.chat-thread {
  display: grid;
  gap: 10px;
  min-height: 160px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.chat-message {
  max-width: 88%;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.55;
}

.chat-message p {
  margin: 0;
  white-space: pre-wrap;
}

.user-message {
  justify-self: end;
  background: var(--blue-soft-2);
  color: var(--ink);
}

.assistant-message {
  justify-self: start;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.chat-compose textarea {
  resize: vertical;
}

.chat-compose button {
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
}

.chat-submit-button {
  width: 42px;
  min-width: 42px;
  border-radius: 50%;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.chatbot-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  min-width: 128px;
  height: 58px;
  border-radius: 999px;
  padding: 0 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  font-size: 0.95rem;
}

.chatbot-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 39;
  width: min(420px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 122px));
  display: grid;
  gap: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  padding: 14px;
}

.chatbot-panel[hidden] {
  display: none;
}

.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chatbot-header h3 {
  margin: 0;
}

.chatbot-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
}

.chatbot-panel .chat-thread {
  max-height: min(360px, calc(100vh - 360px));
}

.extraction-history-panel {
  margin-bottom: 18px;
}

.history-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

#history-search-form {
  grid-template-columns:
    minmax(220px, 1.5fr)
    minmax(92px, 0.7fr)
    minmax(140px, 1fr)
    minmax(128px, 0.9fr)
    minmax(150px, 1fr)
    minmax(120px, 0.8fr)
    auto;
  gap: 10px;
}

.history-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.history-filter-actions button,
.history-filter-actions .button {
  min-height: 34px;
  height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.history-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.history-summary span {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.extraction-history-section {
  margin-top: 18px;
}

.extraction-history-section h2 {
  margin: 0 0 12px;
}

.history-table-wrap {
  max-height: min(620px, calc(100vh - 220px));
  overflow: auto;
}

.history-table {
  min-width: 980px;
  table-layout: fixed;
}

.history-table th,
.history-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.history-narrative {
  max-width: 260px;
}

/* ── History table readability ── */
/* Uniform spacing + typography across the Processed Files and Matching Extractions
   tables. Horizontal cell padding is 4px; font size/weight are forced here so the
   global th/td rules (th 13px/700, td 11.52px, td:first-child 600) do not make the
   two tables look different. */
.history-table th,
.history-table td {
  padding: 5px 4px;
  vertical-align: top;
  font-size: 0.82rem;
  font-weight: 400;
}
.history-table td:first-child {
  font-weight: 400;
}
/* DR/CR tag inside the Matching Extractions Amount cell (no separate column). */
.history-amount-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 4px;
}
.history-amount-type-cr {
  color: #1b7f3c;
}
.history-amount-type-dr {
  color: #b3261e;
}
.history-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Must be fully OPAQUE — the theme's --surface-muted is semi-transparent (#ffffff8c),
     which let scrolled rows show through the sticky header. Use a solid colour. */
  background: #eef2f1;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
}
.history-sort-btn {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}
.history-sort-btn:hover,
.history-sort-btn.is-active {
  color: var(--brand);
}
.history-sort-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
  opacity: 0.82;
  vertical-align: 0.16em;
}
.history-sort-btn.is-asc .history-sort-icon {
  transform: rotate(225deg);
}
.processed-file-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}
.processed-file-filter-trigger {
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
}
.processed-file-filter-trigger:hover,
.processed-file-filter-trigger:focus-visible,
.processed-file-filter-trigger.is-active {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, white);
}
.processed-file-filter-trigger.is-active {
  position: relative;
  box-shadow: inset 0 -2px 0 var(--brand);
}
.processed-file-filter-trigger.is-active::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.processed-file-filter-trigger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.processed-file-filter-menu {
  position: fixed;
  z-index: 40;
  width: min(300px, calc(100vw - 16px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  box-shadow: 0 12px 32px rgb(15 23 42 / 22%);
}
.processed-file-filter-menu-head,
.processed-file-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.processed-file-filter-close {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.processed-file-filter-search-label {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.processed-file-filter-search {
  width: 100%;
  margin: 3px 0 8px;
}
.processed-file-filter-select-all,
.processed-file-filter-option {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 3px;
  cursor: pointer;
}
.processed-file-filter-values {
  max-height: 220px;
  margin: 4px 0 8px;
  overflow-y: auto;
  border-block: 1px solid var(--border);
}
.processed-file-filter-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.processed-file-filter-empty {
  margin: 10px 0;
}
.processed-file-filter-actions {
  justify-content: flex-end;
}
.processed-files-pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.processed-files-pagination-row > label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.82rem;
}
.processed-files-pagination-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.processed-files-pagination-actions > label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.82rem;
}
.history-table tbody tr:nth-child(odd of .files-table-row),
.history-table tbody tr:nth-child(odd of .extractions-table-row),
.history-table tbody tr:nth-child(odd of .snapshots-table-row) {
  background: color-mix(in srgb, var(--surface-muted, #f3f4f6) 45%, transparent);
}
.history-table .files-table-row:hover,
.history-table .extractions-table-row:hover,
.history-table .snapshots-table-row:hover {
  background: color-mix(in srgb, var(--brand, #2563eb) 8%, transparent);
}

/* ── Activity Dashboard stat cards + charts ── */
.activity-stat-card {
  flex: 1 1 160px;
  min-width: 150px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted, #f3f4f6);
}
.activity-stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand, #2a7d6f);
}
.activity-stat-label {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
}
.activity-range-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.activity-custom-range {
  display: flex;
  gap: 12px;
  align-items: end;
}
.activity-custom-range[hidden] { display: none; }
.activity-tabs {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.activity-tab {
  flex: 0 1 auto;            /* width follows the label text — longer labels stay wider */
  white-space: nowrap;
  min-height: 28px;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  box-shadow: none;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}
.activity-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  font-size: 0.85rem;       /* keep size/weight identical to inactive tabs */
  font-weight: 600;
}
.activity-tab-panel[hidden] {
  display: none;
}
.activity-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
/* Single-row tab layout: keep cards top-aligned so short cards don't stretch
   into tall chart cards (removes vertical dead space), and tighten inner spacing. */
.activity-single-row {
  align-items: start;
  gap: 8px;
}
.activity-single-row .activity-card-compact,
.activity-single-row .activity-insights-panel,
.activity-single-row .activity-insight-card {
  padding: 8px 10px;
}
.activity-single-row .activity-panel-heading {
  margin-bottom: 6px;
}
.activity-single-row .activity-panel-heading h4,
.activity-single-row .activity-insight-card h4,
.activity-single-row .activity-chart-title {
  font-size: 0.84rem;
}
.activity-single-row .activity-insight-value {
  font-size: 1.1rem;
}
.activity-single-row .activity-chart-sub,
.activity-single-row .activity-insight-list li,
.activity-single-row .activity-compact-stat,
.activity-single-row .activity-leaderboard li,
.activity-single-row .muted {
  font-size: 0.78rem;
}
.activity-single-row .activity-summary-stack { gap: 6px; }
.kpi-grid-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}
.activity-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
/* Dense analytics layout: five cards per row on normal wide screens, six on very wide screens. */
.activity-charts-4up {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.activity-charts-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.activity-overview-grid,
.activity-operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.9fr);
  gap: 10px;
  align-items: stretch;
}
.activity-summary-stack {
  display: grid;
  gap: 8px;
}
.activity-insight-card {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}
.activity-overview-strip {
  align-items: stretch;
}
.activity-overview-strip .activity-chart-card,
.activity-overview-strip .activity-insight-card,
.activity-overview-strip .activity-insights-panel {
  min-height: 0;
}
.activity-overview-strip .activity-chart-head {
  margin-bottom: 4px;
}
.activity-overview-strip .activity-chart-card-primary .activity-chart-mount {
  min-height: 142px;
}
.activity-overview-strip .activity-insight-card,
.activity-overview-strip .activity-insights-panel {
  padding: 9px 10px;
}
.activity-overview-strip .activity-insight-card h4,
.activity-overview-strip .activity-panel-heading h4 {
  font-size: 0.84rem;
}
.activity-overview-strip .activity-insight-value {
  font-size: 1.12rem;
}
.activity-overview-strip .activity-insight-list {
  gap: 5px;
}
.activity-overview-strip .activity-insight-list li,
.activity-overview-strip .muted {
  font-size: 0.78rem;
  line-height: 1.25;
}
.activity-card-compact,
.activity-insights-panel {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  min-width: 0;
}
.activity-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.activity-panel-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.2;
}
.activity-insight-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-insight-list li {
  position: relative;
  padding-left: 14px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}
.activity-insight-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.activity-insight-list li.good::before { background: #1f9d63; }
.activity-insight-list li.bad::before { background: #c0392b; }
.activity-insight-list li.warn::before { background: #d4842f; }
.activity-insight-list.compact {
  gap: 6px;
}
.activity-insight-mini {
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 700;
}
.activity-insight-mini.good { color: #1f9d63; }
.activity-insight-mini.bad { color: #c0392b; }
.activity-insight-mini.flat { color: var(--muted); }
.activity-compact-stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}
.activity-compact-stat:first-of-type {
  border-top: 0;
}
.activity-compact-stat strong {
  color: var(--ink);
  text-align: right;
}
.activity-leaderboard {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-leaderboard li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  color: var(--ink);
  font-size: 0.86rem;
}
.activity-leaderboard .rank {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}
.activity-insight-card h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.activity-insight-value {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
}
.activity-insight-value.good { color: #1f9d63; }
.activity-insight-value.bad { color: #c0392b; }
.activity-insight-value.flat { color: var(--muted); }
.activity-chart-card-primary .activity-chart-mount {
  min-height: 190px;
}
@media (min-width: 1800px) {
  .activity-charts-4up { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .activity-charts-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .activity-charts-4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-grid-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .span-2,
  .span-3,
  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8 {
    grid-column: span 6;
  }
  .kpi-grid-overview,
  .activity-overview-grid,
  .activity-operations-grid,
  .activity-charts-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .activity-grid-12 {
    grid-template-columns: 1fr;
  }
  .span-2,
  .span-3,
  .span-4,
  .span-5,
  .span-6,
  .span-7,
  .span-8 {
    grid-column: span 1;
  }
  .activity-charts-4up,
  .kpi-grid-overview,
  .activity-overview-grid,
  .activity-operations-grid,
  .activity-charts-detail {
    grid-template-columns: 1fr;
  }
}
.activity-chart-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  background: var(--surface, #fff);
  min-width: 0;
}
/* User Page Activity sits in the Users row, widened after Top Performers was removed. */
.user-page-activity-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px;
}
.user-page-activity-header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.user-page-activity-title {
  margin: 0;
  font-size: 0.95rem;
}
.user-page-activity-sub {
  display: block;
  margin-top: 2px;
}
.user-page-activity-toggle {
  display: inline-flex;
  gap: 6px;
}
.user-page-activity-toggle .button {
  padding: 6px 14px;
  font-size: 0.85rem;
}
.user-page-activity-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.user-page-activity-table {
  width: auto;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.user-page-activity-table th,
.user-page-activity-table td {
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: nowrap;
}
.user-page-activity-table th:last-child,
.user-page-activity-table td:last-child {
  padding-right: 0;
}
.user-page-activity-table th.numeric,
.user-page-activity-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.user-page-activity-table tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 720px) {
  .user-page-activity-card {
    padding: 10px;
  }
}
.activity-charts-4up .activity-chart-mount { overflow: hidden; }
.activity-chart-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-charts-4up .activity-chart-title { font-size: 0.92rem; }
.activity-charts-4up .kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.activity-charts-4up .kpi-grid-compact .kpi-value { font-size: 1.05rem; }
.activity-chart-head { margin-bottom: 4px; }
.activity-chart-title {
  margin: 0;
  font-size: 0.95rem;
}
.activity-chart-sub {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
}
.activity-chart-mount {
  margin-top: 3px;
  overflow-x: auto;
  min-height: 0;
}
.activity-svg {
  max-width: 100%;
  height: auto;
}
.activity-axis-label {
  font-size: 14px;
  fill: var(--ink, #1f2937);
  font-family: var(--font);
  font-weight: 600;
}
.activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 3px;
  font-size: 0.8rem;
  line-height: 1.25;
}
.activity-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.activity-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* KPI cards (executive summary) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.kpi-grid-compact { margin-bottom: 0; gap: 10px; }
.kpi-card {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.kpi-label {
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
  line-height: 1.3;
}
.kpi-value {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 3px;
  color: var(--ink, #1f2937);
}
.kpi-delta {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-delta.good { color: #1f9d63; }
.kpi-delta.bad { color: #c0392b; }
.kpi-delta.flat { color: var(--muted, #9ca3af); font-weight: 500; }
.kpi-arrow { font-size: 0.9rem; }
.kpi-delta-note { color: var(--muted, #9ca3af); font-weight: 400; }

/* Section headings + chart toolbars */
.activity-section-title {
  margin: 22px 0 10px;
  font-size: 1.05rem;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.activity-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chart-bucket-group {
  display: inline-flex;
  gap: 4px;
}
.chart-bucket-group button {
  padding: 2px 8px;
  font-size: 0.76rem;
  min-height: 0;
  box-shadow: none;
}
.chart-bucket-group button.is-active {
  background: var(--brand, #2a7d6f);
  color: #fff !important;
  border-color: var(--brand, #2a7d6f);
}
.chart-sort-label {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-sort-label select { padding: 3px 6px; font-size: 0.8rem; }
.activity-bar-link { cursor: pointer; }
.activity-axis-link { fill: var(--brand, #2a7d6f); text-decoration: underline; }
.activity-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.activity-mini-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.activity-mini-chart-title {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Explains the Source Filename -> Page File -> Page -> Snippet relationship */
.history-relationship-note {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 70ch;
}
.history-relationship-note code {
  font-size: 0.8em;
  background: var(--surface-muted, #f3f4f6);
  padding: 1px 4px;
  border-radius: 4px;
}

/* Action button cluster (View Rows / View Prompt / View Page / View Snippet) */
.history-action-cluster {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
/* Section heading with an action on the right (Matching Extractions →
   Validate & Process Rejected). The form reuses .history-filter-actions so the
   button is the same 34px size and font as Search / Clear. */
.history-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.extraction-history-section .history-section-heading h2 {
  margin: 0;
}

.history-section-heading .button {
  font-size: 0.875rem;
  padding: 0 14px;
}

/* Matching Extractions tick column: right-hand side, sized like Extraction/Output's. */
.history-table .history-col-selected {
  width: 3%;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  white-space: nowrap;
}
.history-action-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  min-height: 0;
  box-shadow: none;
  white-space: nowrap;
}

/* Clickable E/V/H flags that expand the change log */
.validation-flags-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.validation-flags-btn .validation-flags {
  min-width: 0;
}
.validation-flags-btn .changes-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.validation-flags-btn:hover .changes-count { opacity: 1; }

/* Who/when summary inside the expanded change detail */
.changelog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 0.82rem;
}
.changelog-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Document viewer (pages + snippets) ── */
.doc-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78);
  padding: 24px;
}
.doc-viewer-overlay[hidden] { display: none; }
.doc-viewer-shell {
  display: flex;
  flex-direction: column;
  width: min(1100px, 96vw);
  height: min(90vh, 100%);
  background: var(--surface, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.doc-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted, #f3f4f6);
}
.doc-viewer-title {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-viewer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-viewer-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.doc-viewer-zoom[hidden] { display: none; }
.doc-viewer-zoom button {
  min-width: 30px;
  min-height: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink, #1f2937);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.doc-viewer-zoom #docViewerZoomLabel {
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}
.doc-viewer-download {
  min-height: 0;
  height: 28px;
  padding: 0 12px;
  font-size: 0.8rem;
  box-shadow: none;
}
.doc-viewer-close {
  width: 32px;
  min-height: 0;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink, #1f2937);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: none;
}
.doc-viewer-close:hover { background: rgba(0, 0, 0, 0.08); }
.doc-viewer-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #1f2937;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-viewer-image {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  cursor: grab;
  user-select: none;
}
.doc-viewer-image:active { cursor: grabbing; }
.doc-viewer-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.json-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand);
}

.json-pair,
.prompt-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.json-details pre,
.prompt-snapshot-grid pre {
  max-height: 280px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  font: 11px/1.45 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
}

/* ── Prompt change diff ── */
.prompt-diff-output {
  margin-top: 10px;
}
.prompt-diff-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
}
.prompt-diff-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.pill-add {
  background: rgba(15, 108, 92, 0.11);
  color: #0b6e5a;
}
.pill-remove {
  background: rgba(157, 44, 44, 0.08);
  color: var(--danger);
}
.prompt-diff-view {
  font: 11px/1.65 Consolas, "Courier New", monospace;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 420px;
  background: var(--surface);
}
.prompt-diff-line {
  padding: 0 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.prompt-diff-line.diff-add {
  background: rgba(15, 108, 92, 0.10);
  color: #0b6e5a;
}
.prompt-diff-line.diff-remove {
  background: rgba(157, 44, 44, 0.07);
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.75;
}

/* ── History page: operation labels ── */
.history-op-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.history-op-insert { background: #d1fae5; color: #065f46; }
.history-op-update { background: #fef9c3; color: #78350f; }
.history-op-delete { background: #fee2e2; color: #7f1d1d; }

/* ── Transaction snapshot (row state viewer) ── */
.tx-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.tx-snapshot-heading {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tx-snapshot-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0;
  font-size: 0.82rem;
}
.tx-snapshot-list dt {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.tx-snapshot-list dd {
  margin: 0;
  word-break: break-word;
}
.tx-snapshot-list dt.tx-changed,
.tx-snapshot-list dd.tx-changed {
  color: var(--brand);
  font-weight: 700;
}

/* ── Changes toggle button ── */
.changes-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.changes-toggle-btn:hover { opacity: 0.75; }

/* ── Expandable detail row ── */
.extraction-detail-row { display: none; }
.extraction-detail-row.is-open { display: table-row; }
.extraction-detail-row td {
  padding: 0;
  border-top: none;
}
.extraction-detail-inner {
  padding: 12px 16px 14px;
  background: var(--surface-muted);
  border-left: 3px solid var(--brand);
}

/* ── Compact change log table (inside expandable row) ── */
.changelog-compact-table {
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}
.changelog-compact-table th,
.changelog-compact-table td {
  padding: 4px 12px;
  border: 1px solid var(--border);
}
.changelog-compact-table thead th {
  background: var(--surface-muted);
  font-weight: 700;
}
.changelog-compact-table .cl-label {
  font-weight: 600;
  color: var(--ink);
}
.changelog-compact-table .cl-from {
  color: var(--danger);
}
.changelog-compact-table .cl-to {
  color: #065f46;
  font-weight: 600;
}

/* ── Snapshot expandable detail row ── */
.snapshot-detail-row { display: none; }
.snapshot-detail-row.is-open { display: table-row; }
.snapshot-detail-row td {
  padding: 0;
  border-top: none;
}

/* ── Fine-tuning notes list inside snapshot expand row ── */
.snapshot-notes-list {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
}
.snapshot-notes-list li {
  margin-bottom: 4px;
}

/* ── Snapshot full-width view row ── */
.snapshot-expand-row { display: none; }
.snapshot-expand-row.is-open { display: table-row; }
.snapshot-expand-row td {
  padding: 0;
  border-top: none;
}

/* Allow prompt text cells to wrap across multiple lines */
.changelog-prompt-table { white-space: normal; }
.prompt-cl-value {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  max-width: 420px;
}
.prompt-cl-mono {
  font: 0.78rem/1.5 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .topbar,
  .page-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
  }

  .button-row,
  .topbar-actions,
  .dashboard-actions {
    flex-wrap: wrap;
  }

  .dashboard-intro-header {
    flex-direction: column;
  }

  .dashboard-summary-card {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-page-links {
    justify-content: flex-start;
  }

  .workflow-page-link {
    flex: 1 1 130px;
  }

  .pending-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-actions,
  .page-heading-actions {
    justify-content: flex-start;
  }

  .page-heading-row,
  .log-toolbar {
    flex-direction: column;
  }

  .pending-client-grid,
  .pending-file-workspace,
  .bpp-workspace,
  .bpp-edit-workspace,
  .name-field-grid,
  .calib-chat-split,
  .history-filter-grid,
  .bpp-selector,
  .bpp-selected-summary,
  .calibration-note-add,
  .chat-history-picker,
  .chat-compose {
    grid-template-columns: 1fr;
  }

  #history-search-form {
    grid-template-columns: 1fr;
  }

  .bpp-chat-panel {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 16px;
  }

  .calib-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .calib-results,
  .calib-workspace > .preview-frame {
    width: 100%;
    min-width: 0;
  }

  .calib-workspace > .preview-frame {
    height: min(820px, 80vh);
    min-height: 620px;
  }

  .calib-results {
    max-height: 680px;
  }

  .calib-splitter {
    display: none;
  }

  .calib-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .sample-file-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .chatbot-toggle {
    right: 16px;
    bottom: 16px;
  }

  .chatbot-panel {
    right: 16px;
    bottom: 82px;
  }

  .history-filter-actions {
    justify-content: flex-start;
  }
}

/* ── Row status colours (extraction table) ── */
.validation-row-validated td {
  background: rgba(27, 127, 60, 0.045);
}
.validation-row-validated .validation-edit-input {
  background: rgba(27, 127, 60, 0.025);
  border-color: rgba(27, 127, 60, 0.22);
}

/* Selected (ticked) rows: light-yellow highlight so it is obvious which rows are ticked.
   Declared after validated so it wins over validated/edited/pending, but before the
   .validation-row-queried rule below so the stronger amber "queried" signal still shows. */
.validation-row-selected td {
  background: #fff4c2;
}
.validation-row-selected .validation-edit-input {
  background: rgba(255, 244, 194, 0.55);
  border-color: rgba(214, 174, 46, 0.35);
}

/* Submitted rows in Output table */
.output-row[data-status="submitted"] td {
  color: var(--muted);
}

/* Processed rows — muted to reinforce read-only */
.is-readonly-panel .output-row td,
.output-row[data-status="processed"] td {
  color: var(--muted);
}

/* ── Output mode toolbar differentiation ── */
.output-action-toolbar {
  background: var(--brand-soft-4);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
}

/* Submit hint text beside action buttons. The Query instructions read the
   same as Extraction's hint: same size, weight and muted colour throughout. */
.validation-submit-hint,
.validation-query-counts {
  font-size: 0.875rem;
  font-weight: 600;
}

.validation-query-counts strong {
  color: inherit;
}

/* ── Processed mode snippet/page preview ── */
.validation-page-preview #processedSnippetImage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 480px;
  object-fit: contain;
}
.validation-page-preview #processedPageObject {
  flex: 1 1 auto;
  width: 100%;
  min-height: 480px;
}
.validation-page-preview #processedPageFrame {
  width: 100%;
  height: 520px;
  min-height: 480px;
  border: 0;
  display: block;
}

/* ── Compact Date/Amount columns (shorter input boxes) ── */
.validation-table .validation-col-Transaction_Date {
  width: 96px;
}
/* Debits (money out) and Credits (money in) share one equal width — 88px reduced by 5%.
   A row's amount renders in exactly one of these columns (see amountColumnSide in the view). */
.validation-table .validation-col-Debits,
.validation-table .validation-col-Credits {
  width: 84px;
}
/* Right-align the money values, but leave the Debits/Credits headers aligned
   like every other column heading. */
.validation-table td.validation-col-Debits,
.validation-table td.validation-col-Credits {
  text-align: right;
}

/* Remove the +/- spinner buttons from the amount number inputs. */
.validation-table .validation-col-Debits input[type="number"],
.validation-table .validation-col-Credits input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  text-align: right;
}
.validation-table .validation-col-Debits input[type="number"]::-webkit-outer-spin-button,
.validation-table .validation-col-Debits input[type="number"]::-webkit-inner-spin-button,
.validation-table .validation-col-Credits input[type="number"]::-webkit-outer-spin-button,
.validation-table .validation-col-Credits input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Open query: the row is parked. Grey, visible, and not editable. */
.validation-row-owner-other {
  box-shadow: inset 4px 0 0 #d69e2e;
}
.validation-row-owner-exported td,
.validation-row-owner-processed td,
.validation-row-owner-rejected td {
  background: rgba(90, 96, 104, 0.16);
  color: #4a5562;
}
.validation-row-owner-rejected .validation-amount-value {
  text-decoration: line-through;
}
.row-state-note,
.page-owner-progress,
.export-skip-note {
  display: inline-block;
  margin-left: 8px;
  color: #4a5562;
  font-size: 12px;
}
.validation-row-queried td {
  background: rgba(90, 96, 104, 0.16);
  color: #4a5562;
}
.validation-row-queried .validation-edit-input {
  color: #4a5562;
  background: transparent;
}
.validation-row-queried .validation-flags {
  color: #b7791f;
}

/* Disabled controls do not deliver a double-click to the row, so clearing Q by
   double-clicking the greyed amount or narrative never fired. Clicks fall
   through to the row. QS rows are not disabled, so they stay editable. */
.validation-row-queried input:disabled,
.validation-row-queried textarea:disabled,
.validation-row-queried select:disabled {
  pointer-events: none;
}

/* Duplicate rows (D): the triage flagged an exact narrative/date/amount repeat
   for this microsite. Rows are kept (never removed) — the operator decides.
   Declared after the queried rule so a queried row still shows the stronger
   amber tint; a duplicate that isn't queried gets this subtle blue tint. */
.validation-row-duplicate td {
  background: rgba(49, 130, 206, 0.08);
}
.validation-row-queried.validation-row-duplicate td {
  background: rgba(90, 96, 104, 0.16);
}

/* Inherited dates (I): the row's Transaction_Date was filled from the last dated
   row on an earlier page of the same source file. Light purple marks that the
   value came from elsewhere so the reviewer can spot it and check the source via
   "View Previous Page".

   PRECEDENCE: the green edited highlight WINS. The purple only applies while the
   value is still the inherited one — once a human edits it, .is-human-edited is
   added and this rule is overridden below. The permanent "I" flag is unaffected
   either way, so an edited inherited row still reads "EI". */
.validation-row-date-inherited > td {
  background: rgba(128, 90, 213, 0.12);
}

/* Green edited beats purple inherited, whatever the class order in the markup.
   Repeated here (rather than relying on source order alone) because the server
   omits the purple class on already-edited rows while the client removes it on
   edit — this rule keeps the two paths visually identical. */
.validation-row.is-human-edited.validation-row-date-inherited > td {
  background: #e7f6e7;
}

/* Rows blocking Validate Page: a ticked row missing First name, Surname, Date or
   an amount. The row's own field TEXT turns red so the problem reads at a glance
   in the grid itself, with no extra message line inside the table. */
.validation-row-incomplete > td {
  background: rgba(229, 62, 62, 0.08);
}
.validation-row-incomplete > td:first-child {
  box-shadow: inset 3px 0 0 0 #e53e3e;
}
.validation-row-incomplete input,
.validation-row-incomplete textarea,
.validation-row-incomplete .validation-readonly-value {
  color: #c53030;
  font-weight: 600;
}

/* The specific empty field(s). An empty input shows no red text, so outline it —
   that is what tells the reviewer WHICH field to fill. */
.validation-row-incomplete .is-missing-field input,
.validation-row-incomplete .is-missing-field textarea {
  border-color: #e53e3e;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.18);
  background: rgba(229, 62, 62, 0.06);
}

/* Page-level refusal under the Validate Page button. It is an error, so it reads
   as one. */
.validation-block-message {
  margin-top: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #c53030;
  text-align: right;
}

/* "View Previous Page (View inherited date source)" link. Always rendered; the
   PDF itself is only fetched when it is clicked. */
.inherited-source-link {
  font-size: 0.85rem;
}
.inherited-source-link[aria-disabled="true"] {
  color: #a0aec0;
  pointer-events: none;
  text-decoration: none;
  cursor: default;
}

/* ── Pagination ── */
.pagination-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  font-weight: 400;
  transition: background 0.1s, border-color 0.1s;
}
.pag-btn:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-text); }
.pag-btn.is-active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.pag-btn:disabled { opacity: 0.38; cursor: default; }
.pag-btn.pag-view-all { margin-left: 4px; color: var(--brand-text); border-color: var(--brand-border); }
.pag-ellipsis { padding: 0 4px; color: var(--muted); font-size: 0.85rem; line-height: 32px; user-select: none; }
.pag-sep { display: inline-block; width: 1px; height: 20px; background: var(--border); margin: 0 6px; align-self: center; }
.pag-info { font-size: 0.82rem; margin-left: 4px; color: var(--muted); }


/* ── Accuracy Leader Board (dashboard; class names keep the old prefix) ───── */
/* .dashboard-summary-card is a flex ROW with space-between, which pushed the table
   off to the right of the heading. This card stacks instead — heading and period
   toggle first, table underneath — and shrinks to fit its own content rather than
   spanning the page: it is a compact summary, not a full-width data grid. */
.extraction-statistics-card {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
}
.extraction-statistics-header {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.extraction-statistics-header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.extraction-statistics-toggle {
  display: inline-flex;
  gap: 6px;
}
.extraction-statistics-toggle .button {
  padding: 6px 14px;
  font-size: 0.85rem;
}
/* Wide content scrolls inside its own container; the page never scrolls sideways. */
.extraction-statistics-scroll {
  overflow-x: auto;
}
/* Columns size to their content — no stretching to fill the card.
   13px floor for readability; cell padding is tight but not cramped. */
.extraction-statistics-table {
  width: auto;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.3;
}
.extraction-statistics-table th,
.extraction-statistics-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}
.extraction-statistics-table th {
  font-weight: 700;
  color: var(--muted);
}
.extraction-statistics-table th:first-child,
.extraction-statistics-table td:first-child {
  padding-left: 0;
}
.extraction-statistics-table th:last-child,
.extraction-statistics-table td:last-child {
  padding-right: 0;
}
.extraction-statistics-table th.numeric,
.extraction-statistics-table td.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 16px;
}
.extraction-statistics-table tbody tr:last-child td {
  border-bottom: none;
}

.insert-row-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-end;
  margin: 8px 0 0;
}
.insert-row-form[hidden] {
  display: none;
}
.insert-row-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.insert-row-form input,
.insert-row-form select {
  min-width: 8rem;
}
.insert-row-tick {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Help legend chip for an inserted row, matching the green edited-row tint. */
.help-badge .chip.a {
  background: #e7f6e7;
  color: #14622f;
}

/* Help legend chip for the inherited-date code, matching the purple row tint. */
.help-badge .chip.i {
  background: rgba(128, 90, 213, 0.18);
  color: #553c9a;
}

/* Who validated / submitted the rows in view. Informational provenance rather than
   a count or an outcome, so it gets its own subtle indigo — distinct from the grey
   counts above it and from the green/red outcome colours, without competing with
   them for attention. */
.output-attribution {
  color: #5a4b8a;
  font-weight: 500;
}

/* Autosave indicator under the workspace actions. Same outcome colours as the
   banners so "saved" and "failed" read the same way everywhere. */
.autosave-status.is-success { color: #14622f; font-weight: 600; }
.autosave-status.is-error { color: #c53030; font-weight: 600; }

/* Unranked rows on the Accuracy Leader Board: listed for completeness, but visibly
   not competing — their sample is too small for the rate to mean anything. */
.extraction-statistics-table tr.is-unranked td {
  opacity: 0.6;
  font-style: italic;
}
.extraction-statistics-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
}
.extraction-statistics-corrections-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #14622f;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.extraction-statistics-corrections-link:hover {
  color: var(--ink);
}

.correction-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 42, 43, 0.38);
  padding: 24px;
}
.correction-viewer-overlay[hidden] { display: none; }
.correction-viewer-shell {
  display: flex;
  flex-direction: column;
  width: min(1100px, 96vw);
  max-height: min(82vh, 100%);
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(20, 42, 43, 0.18);
  border: 1px solid var(--border);
}
.correction-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #fffcf5f0;
}
.correction-viewer-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.correction-viewer-close {
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: none;
}
.correction-viewer-close:hover { background: rgba(0, 0, 0, 0.08); }
.correction-viewer-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 16px 14px;
  overflow: hidden;
}
.correction-viewer-note { margin: 0 0 8px; }
.correction-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.correction-viewer-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.correction-viewer-toolbar label {
  display: grid;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.correction-viewer-search input,
.correction-viewer-field select {
  min-width: 180px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink);
}
.correction-viewer-search input { min-width: 240px; }
.correction-viewer-body .pagination-bar {
  margin-left: auto;
  padding: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px;
}
.correction-viewer-body .pag-btn {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 0.75rem;
  border-radius: 6px;
}
.correction-viewer-body .pag-ellipsis {
  line-height: 22px;
  font-size: 0.75rem;
  padding: 0 2px;
}
.correction-viewer-body .pag-info {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.correction-pager-pipe {
  margin: 0 7px;
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.65;
  line-height: 22px;
}
.correction-view-all {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  height: auto;
  font: inherit;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
  white-space: nowrap;
}
.correction-view-all:hover {
  color: var(--ink);
  background: none;
}
.correction-viewer-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.correction-viewer-pager-bottom {
  flex: 0 0 auto;
  margin: 8px 0 0 auto;
}
.correction-viewer-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.correction-sort-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* The global `button` rule gives every button a pill radius, a 42px min-height
     and a drop shadow; a column heading is none of those, and the leftover shadow
     read as a halo behind each heading. */
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}
.correction-sort-icon {
  display: inline-block;
  width: 0.7em;
  color: var(--muted);
  font-size: 0.75em;
}
.correction-sort-btn.is-asc .correction-sort-icon::after { content: "▲"; color: var(--ink); }
.correction-sort-btn.is-desc .correction-sort-icon::after { content: "▼"; color: var(--ink); }
.correction-sort-btn:not(.is-asc):not(.is-desc) .correction-sort-icon::after { content: "↕"; }
.correction-viewer-table th,
.correction-viewer-table td {
  text-align: left;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
  font-size: 13px;
  line-height: 1.25;
}
.correction-viewer-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  white-space: nowrap;
}
.correction-viewer-table th:last-child,
.correction-viewer-table td:last-child {
  padding-right: 0;
}
.correction-viewer-table th:nth-child(1),
.correction-viewer-table td.correction-col-row { width: 34%; }
.correction-viewer-table th:nth-child(2),
.correction-viewer-table td:nth-child(2) { width: 11%; white-space: nowrap; }
.correction-viewer-table th:nth-child(3),
.correction-viewer-table td:nth-child(3),
.correction-viewer-table th:nth-child(4),
.correction-viewer-table td:nth-child(4) { width: 13%; }
.correction-viewer-table th:nth-child(5),
.correction-viewer-table td:nth-child(5) { width: 13%; white-space: nowrap; }
.correction-viewer-table th:nth-child(6),
.correction-viewer-table td.correction-col-time { width: 16%; white-space: nowrap; }
.correction-col-row {
  white-space: normal;
  word-break: break-word;
}
.correction-row-narrative {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.25;
}
.correction-row-meta {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rows Corrected pop-up — the summary that opens it (public/js/correction-viewer.js).
   Who corrected, what drove the percentage, where it is concentrated, and a read of
   the date edits. Every row drills into the detailed list below it, so summary rows
   are styled as the controls they are. */
.correction-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The dialog body clips (the detailed list brings its own scroller), so the
     summary has to carry its own — without this the last sections are simply
     unreachable on a user with many microsites. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}
/* The opening sentence is the figure restated — one line, and in its own colour
   so it reads as the answer rather than as the first row of the tables. It is the
   one piece of prose that is NOT capped to a measure: wrapping it splits a single
   fact across two lines. */
.correction-summary-lead {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2f5d45;
}
/* Each answer is its own tinted card, hugging its table rather than stretching:
   four quiet colours so the sections separate at a glance without shouting. */
.correction-summary-block {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px 4px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}
.correction-summary-block.is-who {
  border-left-color: #14622f;
  background: rgba(20, 98, 47, 0.045);
}
.correction-summary-block.is-what {
  border-left-color: #2e568c;
  background: rgba(46, 86, 140, 0.045);
}
.correction-summary-block.is-where {
  border-left-color: #9a6a12;
  background: rgba(154, 106, 18, 0.05);
}
.correction-summary-block .correction-summary-table tr:last-child th,
.correction-summary-block .correction-summary-table tr:last-child td {
  border-bottom: none;
}
.correction-summary-heading {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* Shrink-to-fit, NOT full width. Stretching four short columns across a 1 100px
   dialog put the figures an inch from their labels and made the whole thing look
   like a report it is not; the tables take the room they need and the dialog keeps
   its white space. `max-width` still guards a long microsite/label list. */
.correction-summary-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.correction-summary-table th,
.correction-summary-table td {
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.correction-summary-table thead th {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* Column separation comes from the gap before each column after the first, so the
   table is as wide as its content plus those gaps and no wider. */
.correction-summary-table th + th,
.correction-summary-table td + td {
  padding-left: 26px;
}
.correction-summary-table .numeric {
  text-align: right;
  white-space: nowrap;
}
.correction-drill-row { cursor: pointer; }
.correction-drill-row:hover,
.correction-drill-row:focus-visible {
  background: rgba(20, 98, 47, 0.08);
  outline: none;
}
.correction-drill-row:focus-visible td:first-child { box-shadow: inset 2px 0 0 #14622f; }
.correction-summary-note {
  max-width: 82ch;
  margin: 6px 0 0;
  font-size: 0.78rem;
}
.correction-summary-actions {
  display: flex;
  justify-content: flex-start;
}
.correction-viewer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.correction-back-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: #14622f;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  cursor: pointer;
}
.correction-back-btn:hover { color: var(--ink); }
.correction-drill-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(20, 98, 47, 0.08);
  font-size: 12px;
  font-weight: 600;
}