.list-toolbar, .context-bar, .tabs, .report-cuts, .sticky-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.list-toolbar {
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}
.list-toolbar label { display: grid; gap: var(--space-xs); color: var(--text-tertiary); font-size: 12px; }
.filter-pills {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.filter-pills a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
}
.filter-pills a.active {
  background: var(--module-accent);
  border-color: var(--module-accent);
  color: var(--text-primary);
}
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: inherit;
}
.export-menu {
  position: relative;
}
.export-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--space-xs));
  right: 0;
  min-width: 144px;
  display: none;
  padding: var(--space-xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.export-menu:focus-within .export-options,
.export-menu:hover .export-options {
  display: grid;
}
.export-options button,
.export-options a {
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
  padding: var(--space-sm);
}
.export-options button:hover,
.export-options a:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.context-bar {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-sm));
  z-index: 20;
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
}
.context-bar span, .tabs a, .report-cuts a, .segmented button, .segmented a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.tabs {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-lg));
  z-index: 10;
  padding: var(--space-sm);
  background: var(--bg-void);
}
.tabs a:first-child, .report-cuts a:first-child, .segmented button:first-child, .segmented a.active {
  background: var(--module-accent);
  border-color: var(--module-accent);
  color: var(--text-primary);
}
.pagination, .record-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.pagination {
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.pagination-status {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.pagination-pages a, .pagination-gap {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
}
.pagination-pages a {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
}
.pagination-pages a:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pagination-pages a.active {
  background: var(--module-accent);
  border-color: var(--module-accent);
  color: var(--text-primary);
  font-weight: 600;
}
.pagination-pages a.disabled {
  opacity: .45;
  pointer-events: none;
}
.pagination-gap { color: var(--text-tertiary); }
.pagination-jump {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.pagination-jump label {
  color: var(--text-tertiary);
  font-size: 13px;
  white-space: nowrap;
}
.pagination-jump .pager-jump-input { width: 84px; min-height: 44px; }
.record-stepper a, .record-stepper span {
  min-height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
}
.record-stepper a.disabled {
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 720px) {
  .pagination { justify-content: center; }
  .pagination-pages, .pagination-jump { justify-content: center; width: 100%; }
}
.detail-actions {
  display: grid;
  justify-items: end;
  gap: var(--space-sm);
}
.metric-rail { display: grid; gap: var(--space-lg); }
.metric-rail div { display: grid; gap: var(--space-xs); }
.scope-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.scope-ladder span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.sticky-detail-scope {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-sm));
  z-index: 15;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
}
.floating-stat {
  position: fixed;
  right: var(--space-xl);
  bottom: calc(var(--space-xl) + var(--space-5xl));
  z-index: 45;
  display: grid;
  gap: var(--space-xs);
  min-width: 212px;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--module-accent);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}
.floating-stat span {
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
}
.funding-spine {
  display: grid;
  gap: var(--space-md);
}
.spine-bar {
  display: flex;
  overflow: hidden;
  min-height: 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
}
.spine-segment {
  flex: 0 0 var(--segment-width);
  min-width: 0;
}
.spine-segment.disbursed { background: var(--status-active); }
.spine-segment.committed { background: var(--status-pending); }
.spine-segment.available { background: var(--module-accent); }
.spine-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--text-secondary);
}
.spine-legend b {
  color: var(--text-primary);
}
.quick-add-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-md);
  align-items: end;
  margin-bottom: var(--space-lg);
}
.quick-add-form label {
  display: grid;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 12px;
}
.validation-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--status-pending);
  font-size: 12px;
}
.milestone-ladder {
  counter-reset: milestone;
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
  list-style: none;
}
.milestone-ladder li {
  counter-increment: milestone;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.milestone-ladder li::before {
  content: counter(milestone);
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--module-accent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.milestone-ladder small {
  grid-column: 2 / -1;
  color: var(--text-tertiary);
}
.module-kpi { --module-accent: var(--module-dashboard); }
.module-kpi-agreements { --module-accent: var(--module-agreements); }
.module-kpi-contracts { --module-accent: var(--module-contracts); }
.module-kpi-financial { --module-accent: var(--module-financial); }
.module-kpi-soe { --module-accent: var(--module-soe); }
.module-kpi .kpi-card {
  border-left: 4px solid var(--module-accent);
}
.source-bars {
  display: grid;
  gap: var(--space-md);
}
.source-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, auto);
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.source-row progress, .source-row small {
  grid-column: 1 / -1;
}
.source-row small {
  color: var(--text-tertiary);
}
.source-row:hover {
  border-color: var(--module-accent);
  background: var(--bg-elevated);
}
.status-breakdown {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
}
.status-breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.category-rollup {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
}
.category-rollup div {
  display: grid;
  gap: var(--space-xs);
  min-height: 104px;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.category-rollup span, .category-rollup small {
  color: var(--text-tertiary);
}
.workflow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.workflow-steps span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.workflow-steps span.active {
  border-color: var(--module-accent);
  background: var(--module-accent);
  color: var(--text-primary);
}
.asset-toolbar {
  align-items: flex-end;
}
.asset-filter {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.asset-filter label {
  display: grid;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 12px;
}
.asset-category-pills {
  margin-bottom: var(--space-lg);
}
.asset-category-pills span {
  margin-left: var(--space-xs);
  color: inherit;
  font-family: var(--font-mono);
}
.cell-sub {
  margin-top: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 12px;
}
.asset-grid input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--module-accent);
}
.asset-action-bar .head-actions {
  margin-left: auto;
}
.rollup-bars {
  display: grid;
  gap: var(--space-md);
}
.rollup-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.rollup-row progress, .rollup-row small {
  grid-column: 1 / -1;
}
.rollup-row small {
  color: var(--text-tertiary);
}
.asset-chart {
  width: 100%;
  min-height: 180px;
  margin-bottom: var(--space-lg);
}
.actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.actions form {
  margin: 0;
}
.line-action-form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.line-action-form input {
  width: min(150px, 100%);
  min-height: 36px;
}
.line-action-form input[type="number"] {
  width: 118px;
}
.asset-drawer {
  position: fixed;
  z-index: 75;
  top: calc(var(--topbar-height) + var(--space-md));
  right: var(--space-md);
  bottom: var(--space-md);
  width: min(420px, calc(100vw - var(--space-2xl)));
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(100% + var(--space-2xl)));
  transition: transform .16s ease;
  overflow: auto;
}
.asset-drawer-open .asset-drawer {
  transform: translateX(0);
}
.asset-drawer form {
  display: grid;
  gap: var(--space-md);
}
.asset-drawer label {
  display: grid;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 12px;
}
.drawer-calc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.drawer-calc span {
  color: var(--text-tertiary);
}
.period-switcher {
  display: inline-flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.period-switcher a {
  min-height: 32px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.period-switcher a.active {
  border-color: var(--module-accent);
  background: var(--module-accent);
  color: var(--text-primary);
}
.hero-metric {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
  padding: var(--space-xl);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--module-accent);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.hero-metric span, .hero-metric small {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 12px;
}
.hero-metric strong {
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 1;
}
.saved-cuts {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-sm));
  z-index: 18;
  padding: var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  backdrop-filter: blur(18px);
}
.me-filter-bar {
  position: static;
}
.me-matrix th,
.me-matrix td {
  min-width: 112px;
}
.me-matrix th:first-child,
.me-matrix td:first-child {
  min-width: 220px;
}
.variance-cell {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-sm);
  font-family: var(--font-mono);
}
.variance-cell.positive {
  color: var(--status-active);
  background: color-mix(in srgb, var(--status-active) 12%, transparent);
}
.variance-cell.negative {
  color: var(--status-urgent);
  background: color-mix(in srgb, var(--status-urgent) 12%, transparent);
}
.variance-cell.neutral {
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.gender-flag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-sm);
  color: var(--module-accent);
  background: color-mix(in srgb, var(--module-accent) 12%, transparent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-doughnut {
  width: min(220px, 60vw);
  aspect-ratio: 1;
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-pill);
  background: conic-gradient(var(--module-accent), var(--status-active), var(--status-pending), var(--status-urgent), var(--module-accent));
  box-shadow: inset 0 0 0 36px var(--bg-card);
}
.gps-map-preview,
.gps-map-large {
  display: grid;
  place-items: center;
  gap: var(--space-sm);
  min-height: 220px;
  margin-bottom: var(--space-lg);
  padding: var(--space-xl);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px),
    var(--bg-surface);
  background-size: 36px 36px;
  text-align: center;
}
.gps-map-large {
  min-height: 360px;
}
.gps-marker-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.gps-marker-grid span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-sm);
  background: var(--module-accent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
}
progress {
  width: 100%;
  height: 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
}
progress::-webkit-progress-bar { background: var(--bg-surface); border-radius: var(--radius-pill); }
progress::-webkit-progress-value { background: var(--module-accent); border-radius: var(--radius-pill); }
.timeline-list { list-style: none; display: grid; gap: var(--space-sm); padding: 0; margin: 0; }
.timeline-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.launcher-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.reference-groups {
  display: grid;
  gap: var(--space-lg);
}
.reference-groups h3 {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-size: 13px;
}
.provider-type-summary {
  margin-bottom: var(--space-md);
}
.launcher-grid a {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.launcher-grid a:hover { color: var(--text-primary); border-color: var(--module-accent); }
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.dossier-grid div {
  display: grid;
  gap: var(--space-xs);
  min-height: 84px;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.dossier-grid span {
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
}
.dossier-grid strong {
  overflow-wrap: anywhere;
}
.dossier-grid strong.mono { font-family: var(--font-mono); }

/* Relationship links — the heart of the detail pattern. Every FK / related
   record renders as a `rel-link` that opens that entity's own detail view. */
.rel-link {
  color: var(--module-accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.rel-link:hover { color: var(--text-primary); text-decoration: underline; }
.data-table .rel-link { font-weight: 500; }

/* Parent / sibling relationship chips (the "Linked records" panel). */
.rel-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.rel-link-grid a {
  min-width: 0;
  min-height: 56px;
  display: grid;
  gap: var(--space-xs);
  align-content: center;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--module-accent);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.rel-link-grid a:hover { background: var(--bg-elevated); }
.rel-link-grid .rel-link-label {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.ledger-editor input { width: 100%; min-width: 140px; }
.account-tree .account-header td {
  color: var(--text-primary);
  font-weight: 700;
  background: var(--bg-surface);
}
.tree-indent {
  display: inline-block;
}
.tree-indent.level-2 { padding-left: var(--space-lg); }
.tree-indent.level-3 { padding-left: var(--space-2xl); }
.tree-indent.level-4 { padding-left: var(--space-3xl); }
.sticky-action-bar {
  position: sticky;
  bottom: var(--space-lg);
  z-index: 30;
  justify-content: space-between;
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-glass);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}
[data-ledger-balance].balanced {
  color: var(--status-active);
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.permission-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.permission-search {
  margin-bottom: var(--space-lg);
}
.permission-search label,
.integration-card label {
  display: grid;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: 12px;
}
.permission-groups {
  display: grid;
  gap: var(--space-lg);
}
.permission-group {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.permission-group h3 {
  color: var(--text-secondary);
  font-size: 13px;
}
.permission-group label {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, auto) minmax(160px, auto);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.permission-group small {
  display: block;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.integration-card form {
  display: grid;
  gap: var(--space-md);
}
.command-dialog {
  width: min(640px, calc(100vw - 32px));
  margin: auto;
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
.command-dialog::backdrop { background: var(--bg-glass); }
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}
.dialog-head button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 24px;
}
.command-dialog input { width: calc(100% - 32px); margin: var(--space-lg); }
.command-results { display: grid; padding: 0 var(--space-lg) var(--space-lg); }
.command-results a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-secondary);
}
.command-results kbd {
  min-width: 48px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}
.command-results a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.document-shell {
  display: grid;
  gap: var(--space-xl);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-xl);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.document-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-default);
}
.document-head h1 {
  margin: 0;
}
.document-stamp {
  min-width: 160px;
  text-align: right;
}
.document-actions {
  display: flex;
  justify-content: flex-end;
}
.document-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.document-grid div,
.signature-grid div {
  min-height: 88px;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.document-grid span,
.signature-grid span {
  color: var(--text-tertiary);
  font-size: 12px;
  text-transform: uppercase;
}
.document-section {
  display: grid;
  gap: var(--space-md);
}
.signature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
/* Signed approval blocks on a finalized certificate (DG chain). The name reads
   as the actual sign-off; role + date recede via the shared span style above. */
.signature-grid .signed { justify-content: start; }
.signature-grid .sig-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
}
@media (max-width: 700px) {
  .source-row { grid-template-columns: 1fr; }
  .dossier-grid { grid-template-columns: 1fr; }
  .document-head { display: grid; }
  .document-stamp { text-align: left; }
  .document-grid, .signature-grid { grid-template-columns: 1fr; }
  .category-rollup { grid-template-columns: 1fr; }
  .quick-add-form { grid-template-columns: 1fr; }
  .floating-stat { position: sticky; right: auto; bottom: var(--space-lg); }
  .permission-grid, .launcher-grid { grid-template-columns: 1fr; }
  .sticky-action-bar { bottom: calc(var(--space-5xl) + var(--space-sm)); }
  .asset-filter, .asset-toolbar { align-items: stretch; }
  .asset-filter > * { width: 100%; }
  .rollup-row { grid-template-columns: 1fr; }
  .permission-group label { grid-template-columns: 1fr; }
  .asset-drawer {
    top: calc(var(--topbar-height) + var(--space-sm));
    right: var(--space-sm);
    bottom: calc(var(--space-5xl) + var(--space-sm));
    width: calc(100vw - var(--space-lg));
  }
}

/* Payment-progress flow (issue 136) — certificate to voucher to posting stepper.
   Mobile-first: vertical stack with a connecting spine; horizontal at ≥640px.
   State is carried by a visible word + shape, never colour alone. */
.payment-flow .pf-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}
.pf-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: start;
}
.pf-node {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border-default);
  color: var(--text-tertiary);
  background: var(--bg-surface);
}
.pf-done .pf-node { background: var(--status-active); border-color: var(--status-active); color: var(--text-inverse); }
.pf-current .pf-node { border-color: var(--module-accent, var(--color-primary)); color: var(--module-accent, var(--color-primary)); box-shadow: 0 0 0 3px var(--status-pending-ghost); }
.pf-body { display: grid; gap: 2px; min-width: 0; }
.pf-label { font-weight: 600; color: var(--text-primary); text-decoration: none; }
a.pf-label:hover { text-decoration: underline; }
.pf-hint { font-size: 12px; color: var(--text-secondary); }
.pf-state-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.pf-current .pf-state-label { color: var(--module-accent, var(--color-primary)); }
.pf-done .pf-state-label { color: var(--status-active); }
.pf-settle { margin-top: var(--space-lg); }
/* connecting spine (vertical on mobile) */
.pf-stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  width: 1.5px;
  height: calc(100% + var(--space-md) - 28px);
  background: var(--border-default);
}
.pf-done:not(:last-child)::before { background: var(--status-active); }
@media (min-width: 640px) {
  .payment-flow .pf-track { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-lg); }
  .pf-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: start; gap: var(--space-xs); }
  .pf-stage:not(:last-child)::before {
    left: 28px;
    top: 13px;
    width: calc(100% + var(--space-lg) - 28px);
    height: 1.5px;
  }
}