/* ──────────────────────────────────────────────────────────────────────
     Records view (Cluster 4)
     Header + 6-cell metrics row + 2-column body (records table | detail
     rail) + canonical coverage panel below. Demo data only — no list
     endpoint yet; demo state is clearly badged.
     ────────────────────────────────────────────────────────────────────── */

  .records-view { padding: 24px; }

  .records-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
  }
  .records-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  .records-page-title h2 {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    color: var(--on-surface);
  }
  .records-page-title-badge {
    font-size: 8px;
    background: rgba(78, 222, 163, 0.10);
    color: var(--secondary);
    border: 1px solid rgba(78, 222, 163, 0.20);
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
  }
  .records-page-subtitle {
    font-size: 12px;
    color: var(--slate-500);
  }

  .records-metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }
  .records-metric {
    background: var(--surface-container-low);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 2px solid var(--outline-variant);
    border-radius: 4px;
    padding: 14px 16px;
  }
  .records-metric-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
    margin-bottom: 4px;
  }
  .records-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .records-metric-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--on-surface);
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .records-metric-glyph {
    font-size: 18px;
    opacity: 0.30;
  }
  .records-metric.accept   { border-left-color: var(--secondary); }
  .records-metric.accept .records-metric-value,
  .records-metric.accept .records-metric-glyph   { color: var(--secondary); }
  .records-metric.escalate { border-left-color: #fcd34d; }
  .records-metric.escalate .records-metric-value,
  .records-metric.escalate .records-metric-glyph { color: #fcd34d; }
  .records-metric.reject   { border-left-color: var(--error); }
  .records-metric.reject .records-metric-value,
  .records-metric.reject .records-metric-glyph   { color: var(--error); }
  .records-metric.clarify  { border-left-color: #c084fc; }
  .records-metric.clarify .records-metric-value,
  .records-metric.clarify .records-metric-glyph  { color: #c084fc; }
  .records-metric.gap {
    background: rgba(255, 180, 171, 0.06);
    border: 1px solid rgba(255, 180, 171, 0.20);
    border-left: 1px solid rgba(255, 180, 171, 0.20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .records-metric.gap .records-metric-label { color: var(--error); margin-bottom: 4px; }
  .records-metric.gap .records-metric-value { color: var(--error); }

  .records-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .records-table-card {
    background: var(--surface-container-low);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-overlay-light);
  }
  .records-table-toolbar {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .records-toolbar-left {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .records-search {
    width: 240px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    color: var(--slate-200);
    font-size: 11px;
    font-family: inherit;
  }
  .records-toolbar-btn {
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    color: var(--slate-400);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  .records-toolbar-btn:hover { color: var(--on-surface); }
  .records-toolbar-icon-btn {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    color: var(--slate-400);
    cursor: pointer;
    font-family: inherit;
  }
  .records-toolbar-icon-btn:hover { background: rgba(255,255,255,0.05); }

  .records-table-scroll {
    max-height: 480px;
    overflow-y: auto;
  }
  .records-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: left;
  }
  .records-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-container-low);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 10px 12px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
  }
  .records-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: background 0.10s;
    border-left: 2px solid transparent;
  }
  .records-table tbody tr:hover { background: rgba(255,255,255,0.03); }
  .records-table tbody tr.selected {
    background: rgba(173,198,255,0.05);
    border-left-color: var(--secondary);
  }
  .records-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
  }
  .records-table .col-mono         { font-family: var(--font-mono); color: var(--slate-300); }
  .records-table .col-mono-primary { font-family: var(--font-mono); color: var(--primary); }
  .records-table .col-meta         { color: var(--slate-400); }
  .records-table .col-reason       { font-family: var(--font-mono); color: var(--slate-500); text-transform: uppercase; }
  .records-table .col-time         { color: var(--slate-500); }
  .records-table .col-integrity    { text-align: center; color: var(--secondary); }

  .records-outcome-badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid;
    background: transparent;
    white-space: nowrap;
  }
  .records-outcome-badge.accept   { background: rgba(78, 222, 163, 0.10); color: var(--secondary); border-color: rgba(78, 222, 163, 0.20); }
  .records-outcome-badge.escalate { background: rgba(252, 211, 77, 0.10); color: #fcd34d; border-color: rgba(252, 211, 77, 0.20); }
  .records-outcome-badge.reject   { background: rgba(255, 180, 171, 0.10); color: var(--error); border-color: rgba(255, 180, 171, 0.20); }
  .records-outcome-badge.clarify  { background: rgba(192, 132, 252, 0.10); color: #c084fc; border-color: rgba(192, 132, 252, 0.20); }

  .records-detail {
    background: var(--surface-container-high);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-height) + 16px);
    box-shadow: var(--shadow-overlay-light);
  }
  .records-detail-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .records-detail-id {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--on-surface);
  }
  .records-detail-subtitle {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
    font-weight: 700;
    margin-top: 2px;
  }
  .records-detail-close {
    background: transparent;
    border: 0;
    color: var(--slate-500);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
  .records-detail-close:hover { color: var(--on-surface); }
  .records-detail-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-height: calc(100vh - var(--header-height) - var(--footer-height) - 140px);
    overflow-y: auto;
  }
  .records-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .records-detail-cell-key {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-500);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .records-detail-cell-val {
    font-size: 11px;
    color: var(--on-surface);
    font-family: var(--font-mono);
  }
  .records-detail-cell-text { font-family: inherit; font-size: 11px; color: var(--on-surface); }
  .records-detail-section-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
    font-weight: 700;
    margin-bottom: 12px;
  }

  .records-authority-path {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 4px;
  }
  .records-authority-path::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(255,255,255,0.10);
  }
  .records-authority-node {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  .records-authority-node-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 1;
    box-shadow: 0 0 0 4px var(--surface-container-high);
  }
  .records-authority-node.agent      .records-authority-node-dot { background: var(--primary); color: var(--on-primary); }
  .records-authority-node.grant      .records-authority-node-dot { background: rgba(52,211,153,0.20); border: 1px solid rgba(52,211,153,0.50); color: var(--chain-grant); }
  .records-authority-node.profile    .records-authority-node-dot { background: rgba(192,132,252,0.20); border: 1px solid rgba(192,132,252,0.50); color: var(--chain-profile); }
  .records-authority-node.surface    .records-authority-node-dot { background: rgba(96,165,250,0.20); border: 1px solid rgba(96,165,250,0.50); color: var(--chain-surface); }
  .records-authority-node.process    .records-authority-node-dot,
  .records-authority-node.capability .records-authority-node-dot,
  .records-authority-node.bs         .records-authority-node-dot { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: var(--slate-400); }
  .records-authority-node.bs         .records-authority-node-dot { background: rgba(78,222,163,0.10); border-color: rgba(78,222,163,0.30); color: var(--secondary); }
  .records-authority-node-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .records-authority-node-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-500);
    font-weight: 700;
  }
  .records-authority-node-id { font-family: var(--font-mono); font-size: 11px; }
  .records-authority-node.agent   .records-authority-node-id { color: var(--primary); }
  .records-authority-node.grant   .records-authority-node-id { color: var(--chain-grant); }
  .records-authority-node.profile .records-authority-node-id { color: var(--chain-profile); }
  .records-authority-node.surface .records-authority-node-id { color: var(--chain-surface); }
  .records-authority-node.process .records-authority-node-id,
  .records-authority-node.capability .records-authority-node-id,
  .records-authority-node.bs .records-authority-node-id {
    color: var(--on-surface);
    font-family: inherit;
  }

  .records-evidence {
    background: var(--surface-container);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 14px;
  }
  .records-evidence-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 11px;
    align-items: center;
  }
  .records-evidence-row:last-child { border-bottom: 0; }
  .records-evidence-key { color: var(--slate-400); }
  .records-evidence-val { font-family: var(--font-mono); color: var(--on-surface); }
  .records-evidence-pass {
    color: var(--secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.06em;
    margin-left: 8px;
  }
  .records-evidence-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .records-coverage-limit {
    background: rgba(173, 198, 255, 0.04);
    border-left: 2px solid rgba(173, 198, 255, 0.30);
    padding: 12px 14px;
    border-radius: 0 4px 4px 0;
  }
  .records-coverage-limit-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .records-coverage-limit-text {
    font-size: 11px;
    color: var(--slate-400);
    font-style: italic;
    line-height: 1.5;
  }

  .records-resources-title {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--slate-500);
    font-weight: 700;
    margin-bottom: 4px;
  }
  /* D26e — full envelope detail block, lazy-loaded from
     /explorer/envelopes/{id} on row selection. The Raw JSON viewer
     scrolls internally so the rail height stays bounded; values use
     the existing mono-font convention. */
  .records-envelope-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .records-envelope-detail-section { display: flex; flex-direction: column; gap: 2px; }
  .records-envelope-detail-row {
    display: flex;
    gap: 8px;
    padding: 2px 0;
    font-size: 11px;
    font-family: var(--font-mono);
    line-height: 1.4;
  }
  .records-envelope-detail-key {
    color: var(--slate-500);
    min-width: 150px;
    flex-shrink: 0;
    text-transform: lowercase;
  }
  .records-envelope-detail-val {
    color: var(--on-surface);
    word-break: break-all;
  }
  .records-envelope-detail-json {
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--on-surface);
    margin: 0;
  }
  .records-resource-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-400);
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 8px;
    transition: border-color 0.12s, color 0.12s;
  }
  .records-resource-action:last-child { margin-bottom: 0; }
  .records-resource-action:hover:not(:disabled) {
    border-color: rgba(173, 198, 255, 0.30);
    color: var(--primary);
  }
  .records-resource-action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
  .records-resource-action-glyph { color: var(--slate-500); font-size: 12px; }

  /* ──────────────────────────────────────────────────────────────────────
     D29g — Records audit-events section + FailModePolicy enforced renderer.

     Surfaces FAIL_MODE_POLICY_ENFORCED audit events emitted by D29f in
     the Records detail rail. The renderer card carries three mutually
     exclusive delta states:

       .failmode-enforcement-delta.is-changed       — outcome differs
       .failmode-enforcement-delta.is-same-outcome  — outcome equal, reason differs
       .failmode-enforcement-delta.is-identical     — both equal

     Read-only by construction: no buttons, no links to mutating
     endpoints. All colours come from existing design tokens; no raw
     hex values introduced.
     ────────────────────────────────────────────────────────────────── */
  .records-audit-events-section { margin-top: var(--space-3, 12px); }

  .failmode-enforcement-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  .failmode-enforcement-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-3, 12px);
    background: var(--surface-container-low);
    border: var(--border-hairline);
    border-radius: var(--radius-panel);
  }

  .failmode-enforcement-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .failmode-enforcement-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    color: var(--on-surface);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: var(--border-hairline);
  }

  .audit-event-badge-generic {
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
  }

  .failmode-enforcement-primary,
  .failmode-enforcement-context {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .failmode-enforcement-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--on-surface-variant);
    margin: var(--space-1, 4px) 0 2px;
  }

  .failmode-enforcement-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2, 8px);
    padding: 2px 0;
    font-size: 11px;
  }
  .failmode-enforcement-kv-key {
    color: var(--on-surface-variant);
    text-transform: none;
    font-weight: 600;
    flex-shrink: 0;
  }
  .failmode-enforcement-kv-value {
    color: var(--on-surface);
    text-align: right;
    word-break: break-word;
  }

  .failmode-enforcement-code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface);
  }

  .failmode-enforcement-delta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    border-left: 2px solid var(--outline-variant);
  }
  .failmode-enforcement-delta.is-changed {
    border-left-color: var(--primary);
  }
  .failmode-enforcement-delta.is-same-outcome {
    border-left-color: var(--outline);
  }
  .failmode-enforcement-delta.is-identical {
    border-left-color: var(--outline-variant);
  }

  .failmode-enforcement-delta-lead {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--on-surface);
  }
  .failmode-enforcement-delta-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .failmode-enforcement-delta-pair {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2, 8px);
    font-size: 11px;
  }
  .failmode-enforcement-delta-label {
    color: var(--on-surface-variant);
    font-weight: 600;
  }

  .failmode-enforcement-tension {
    margin: 0;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }

  /* ──────────────────────────────────────────────────────────────────
     D29l — FailModePolicy trigger / dry-run cards + authority note.

     Adds rich rendering for FAIL_MODE_POLICY_TRIGGER_FIRED and
     FAIL_MODE_POLICY_DRY_RUN_DECISION, plus an authority-resolution
     note that surfaces when trigger_condition is
     authority_resolution_failure. The trigger / dry-run cards reuse
     the existing .failmode-enforcement-* row chrome; only the outer
     wrapper and the authority-note block need new selectors.

     All colours come from existing design tokens; no raw hex /
     rgba values introduced.
     ────────────────────────────────────────────────────────────── */
  .failmode-trigger-card,
  .failmode-dryrun-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-3, 12px);
    background: var(--surface-container-low);
    border: var(--border-hairline);
    border-radius: var(--radius-panel);
  }

  .failmode-trigger-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .failmode-authority-note {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    border-left: 2px solid var(--outline-variant);
  }
  .failmode-authority-note-lead {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--on-surface);
  }
  .failmode-authority-cause {
    margin: 0;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }

  .failmode-trigger-rule-status {
    margin: 0;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }

  .records-coverage-section {
    margin-top: 24px;
  }
  .records-coverage-section .section-title {
    margin-bottom: 8px;
  }

  /* ──────────────────────────────────────────────────────────────────
     D30g — Runtime Evidence Search panel.

     Sits between the Records grid and the Governance Coverage panel.
     Calls the production /v1/evidence/audit-events endpoint and
     renders each result through the existing audit-event renderer
     namespace. The block is intentionally placed AFTER the D29g
     slice (which terminates at .records-coverage-section) so the
     D29g token-only slice test stays scoped to D29g/D29l selectors.

     All colours come from existing design tokens; no raw hex / rgba
     values are introduced here.
     ────────────────────────────────────────────────────────────── */
  .runtime-evidence-search {
    margin-top: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    background: var(--surface-container-low);
    border: var(--border-hairline);
    border-radius: var(--radius-panel);
  }

  .runtime-evidence-search-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
  }
  .runtime-evidence-search-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--on-surface);
  }
  .runtime-evidence-search-subtitle {
    margin: 0;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }

  .runtime-evidence-search-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }
  .runtime-evidence-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2, 8px);
  }
  .runtime-evidence-search-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
  }
  .runtime-evidence-search-field label {
    color: var(--on-surface-variant);
    font-weight: 600;
  }
  .runtime-evidence-search-field input,
  .runtime-evidence-search-field select {
    background: var(--surface-container);
    color: var(--on-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-tight);
    padding: 4px 8px;
    font: inherit;
    font-size: 12px;
  }

  .runtime-evidence-search-actions {
    display: flex;
    gap: var(--space-2, 8px);
  }
  .runtime-evidence-search-submit,
  .runtime-evidence-search-clear {
    padding: 6px 12px;
    border: var(--border-hairline);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    color: var(--on-surface);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  .runtime-evidence-search-submit {
    background: var(--surface-container);
    border-color: var(--outline);
  }

  .runtime-evidence-search-state {
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
    padding: var(--space-2, 8px) 0;
  }
  .runtime-evidence-search-state-error {
    color: var(--on-surface);
    border-left: 2px solid var(--primary);
    padding-left: var(--space-2, 8px);
  }

  .runtime-evidence-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }
  .runtime-evidence-search-result-card {
    display: flex;
    flex-direction: column;
  }

  /* D30k — Load more affordance for cursor-paginated evidence search.
     Sits under the results container and is shown only when the
     latest first-page response carries a next_cursor. The wrapper's
     `hidden` attribute is the source of truth; the CSS rule reasserts
     display: none so a future selector can't accidentally re-show
     the affordance. */
  .runtime-evidence-search-more {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
  }
  .runtime-evidence-search-more[hidden] {
    display: none;
  }
  .runtime-evidence-search-more-btn {
    padding: 6px 12px;
    border: var(--border-hairline);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    color: var(--on-surface);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  .runtime-evidence-search-more-btn:disabled {
    cursor: default;
    opacity: 0.6;
  }
  .runtime-evidence-search-more-state {
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }
  .runtime-evidence-search-more-state-error {
    color: var(--on-surface);
    border-left: 2px solid var(--primary);
    padding-left: var(--space-2, 8px);
  }

  @media (max-width: 1100px) {
    .runtime-evidence-search-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 720px) {
    .runtime-evidence-search-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ──────────────────────────────────────────────────────────────────
     D30h — Runtime Evidence Integrity + Packet panels.

     Sits inside the Records detail rail. The Verify integrity /
     View evidence packet buttons live in the existing resources
     block; this block styles the two panels they populate.

     Placed outside the D29g and D30g scoped CSS slices: between the
     D30g responsive @media rules and the records-metrics @media
     rule. Token-only — no raw hex / rgba.
     ────────────────────────────────────────────────────────────── */
  .runtime-evidence-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }
  .runtime-evidence-action-button {
    font: inherit;
    font-size: 12px;
  }

  .runtime-evidence-integrity-panel,
  .runtime-evidence-packet-panel {
    margin-top: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }
  .runtime-evidence-integrity-panel:empty,
  .runtime-evidence-packet-panel:empty {
    display: none;
  }

  .runtime-evidence-integrity-status {
    margin: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    border-left: 2px solid var(--outline-variant);
    font-size: 12px;
    font-weight: 600;
    color: var(--on-surface);
  }
  .runtime-evidence-integrity-status.is-valid {
    border-left-color: var(--outline);
  }
  .runtime-evidence-integrity-status.is-invalid {
    border-left-color: var(--primary);
  }

  .runtime-evidence-integrity-kv-list,
  .runtime-evidence-packet-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .runtime-evidence-integrity-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2, 8px);
    padding: 2px 0;
    font-size: 11px;
  }
  .runtime-evidence-integrity-kv-key {
    color: var(--on-surface-variant);
    font-weight: 600;
    flex-shrink: 0;
  }
  .runtime-evidence-integrity-kv-value {
    color: var(--on-surface);
    text-align: right;
    word-break: break-word;
  }
  .runtime-evidence-packet-mono {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface);
  }

  .runtime-evidence-packet-state {
    margin: 0;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
  }
  .runtime-evidence-packet-error {
    margin: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-tight);
    background: var(--surface-container);
    border-left: 2px solid var(--primary);
    font-size: 11px;
    color: var(--on-surface);
  }

  .runtime-evidence-packet-actions {
    display: flex;
    gap: var(--space-2, 8px);
  }

  .runtime-evidence-packet-json {
    margin: 0;
    padding: var(--space-3, 12px);
    background: var(--surface-container);
    border: var(--border-hairline);
    border-radius: var(--radius-tight);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--on-surface);
    overflow: auto;
    max-height: 360px;
    white-space: pre;
  }

  @media (max-width: 1280px) {
    .records-metrics { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1100px) {
    .records-grid { grid-template-columns: 1fr; }
    .records-detail { position: static; }
    .records-detail-body { max-height: none; }
  }
  @media (max-width: 720px) {
    .records-metrics { grid-template-columns: repeat(2, 1fr); }
  }

  /* ──────────────────────────────────────────────────────────────────
     D27j-ui-theme-5 — Records light-mode overrides.
     Activated only when :root carries data-theme="light"; dark mode
     is the default and every dark base rule above is preserved.
     Retones the records shell, summary metrics, table card / toolbar,
     table itself (header / rows / hover / selected / col-* tints),
     outcome badges, detail card, evidence rows, envelope detail, and
     authority-node dot variants. No new markup, no new behaviour.
     ────────────────────────────────────────────────────────────── */

  /* Page header + summary metrics. */
  :root[data-theme="light"] .records-page-title h2 {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-page-title-badge {
    background: var(--primary-container);
    color: var(--on-primary-container);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-page-subtitle {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-metric {
    background: var(--surface-container-lowest);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-metric-label {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-metric-value {
    color: var(--on-surface);
  }
  /* Status-tinted metric variants. .accept and .reject already use
     tokens that flip per theme; .escalate / .clarify / .gap use raw
     dark-mode hex (#fcd34d, #c084fc) that need light-bg equivalents. */
  :root[data-theme="light"] .records-metric.escalate                            { border-left-color: #b35a0e; }
  :root[data-theme="light"] .records-metric.escalate .records-metric-value,
  :root[data-theme="light"] .records-metric.escalate .records-metric-glyph      { color: #b35a0e; }
  :root[data-theme="light"] .records-metric.clarify                             { border-left-color: #6b21a8; }
  :root[data-theme="light"] .records-metric.clarify  .records-metric-value,
  :root[data-theme="light"] .records-metric.clarify  .records-metric-glyph      { color: #6b21a8; }

  /* Table card + toolbar. */
  :root[data-theme="light"] .records-table-card {
    background: var(--surface-container-lowest);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-table-toolbar {
    border-bottom-color: var(--outline-variant);
    background: var(--surface-container-low);
  }
  :root[data-theme="light"] .records-search,
  :root[data-theme="light"] .records-toolbar-btn,
  :root[data-theme="light"] .records-toolbar-icon-btn {
    background: var(--surface-container-lowest);
    border-color: var(--outline-variant);
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-toolbar-btn:hover,
  :root[data-theme="light"] .records-toolbar-icon-btn:hover {
    background: var(--surface-container);
    color: var(--on-surface);
  }

  /* Table — header, rows, hover, selected, column tints. */
  :root[data-theme="light"] .records-table thead th {
    background: var(--surface-container-low);
    border-bottom-color: var(--outline-variant);
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-table tbody tr {
    border-bottom-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-table tbody tr:hover {
    background: var(--surface-container-low);
  }
  :root[data-theme="light"] .records-table tbody tr.selected {
    background: var(--primary-container);
    border-left-color: var(--secondary);
  }
  :root[data-theme="light"] .records-table .col-mono         { color: var(--on-surface); }
  :root[data-theme="light"] .records-table .col-mono-primary { color: var(--primary); }
  :root[data-theme="light"] .records-table .col-meta         { color: var(--on-surface-variant); }
  :root[data-theme="light"] .records-table .col-reason       { color: var(--on-surface-variant); }
  :root[data-theme="light"] .records-table .col-time         { color: var(--on-surface-variant); }
  :root[data-theme="light"] .records-table .col-integrity    { color: var(--secondary); }

  /* Outcome badges — desaturated tints for light backgrounds. */
  :root[data-theme="light"] .records-outcome-badge.accept   { background: rgba(31, 122, 79, 0.10);  color: var(--secondary); border-color: rgba(31, 122, 79, 0.40); }
  :root[data-theme="light"] .records-outcome-badge.escalate { background: rgba(179, 90, 14, 0.10);  color: #b35a0e;          border-color: rgba(179, 90, 14, 0.40); }
  :root[data-theme="light"] .records-outcome-badge.reject   { background: rgba(179, 38, 30, 0.10);  color: var(--error);     border-color: rgba(179, 38, 30, 0.40); }
  :root[data-theme="light"] .records-outcome-badge.clarify  { background: rgba(107, 33, 168, 0.10); color: #6b21a8;          border-color: rgba(107, 33, 168, 0.40); }

  /* Detail card. */
  :root[data-theme="light"] .records-detail {
    background: var(--surface-container-lowest);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-detail-header {
    background: var(--surface-container-low);
    border-bottom-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-detail-id {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-detail-subtitle {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-detail-close {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-detail-close:hover {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-detail-grid {
    border-bottom-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-detail-cell-key {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-detail-cell-val,
  :root[data-theme="light"] .records-detail-cell-text {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-detail-section-label {
    color: var(--on-surface-variant);
  }

  /* Authority path / nodes — alpha-tinted backgrounds need light-bg
     replacements; the .agent dot already reads from --primary so it
     flips automatically. */
  :root[data-theme="light"] .records-authority-node.grant   .records-authority-node-dot {
    background: rgba(21, 128, 61, 0.12); border-color: rgba(21, 128, 61, 0.45); color: var(--chain-grant);
  }
  :root[data-theme="light"] .records-authority-node.profile .records-authority-node-dot {
    background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.45); color: var(--chain-profile);
  }
  :root[data-theme="light"] .records-authority-node.surface .records-authority-node-dot {
    background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.45); color: var(--chain-surface);
  }
  :root[data-theme="light"] .records-authority-node.process    .records-authority-node-dot,
  :root[data-theme="light"] .records-authority-node.capability .records-authority-node-dot {
    background: rgba(15, 23, 42, 0.04); border-color: var(--outline-variant); color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-authority-node.bs .records-authority-node-dot {
    background: rgba(31, 122, 79, 0.10); border-color: rgba(31, 122, 79, 0.40); color: var(--secondary);
  }

  /* Evidence rows + coverage limit. */
  :root[data-theme="light"] .records-evidence-row {
    border-bottom-color: var(--outline-variant);
  }
  :root[data-theme="light"] .records-evidence-key {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-evidence-val {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-evidence-note {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-coverage-limit-label {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-coverage-limit-text {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-resources-title {
    color: var(--on-surface-variant);
  }

  /* Envelope detail (lazy-loaded) — keys, values, JSON viewer. */
  :root[data-theme="light"] .records-envelope-detail-key {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-envelope-detail-val {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-envelope-detail-json {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
    color: var(--on-surface);
  }
  :root[data-theme="light"] .records-resource-action {
    background: var(--surface-container-lowest);
    border-color: var(--outline-variant);
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .records-resource-action:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
  }
  :root[data-theme="light"] .records-resource-action-glyph {
    color: var(--on-surface-variant);
  }

  /* D29g — light-mode overrides for the FailModePolicy enforced
     renderer in the Records detail rail. Mirrors the dark-mode
     defaults above by re-binding the same token vars; the renderer
     itself uses tokens exclusively, so most rules simply assert
     the light-mode token cascade hits the right elements. */
  :root[data-theme="light"] .failmode-enforcement-card {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .failmode-enforcement-badge {
    background: var(--surface-container);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .audit-event-badge-generic {
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .failmode-enforcement-kv-key,
  :root[data-theme="light"] .failmode-enforcement-section-label,
  :root[data-theme="light"] .failmode-enforcement-delta-label {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .failmode-enforcement-kv-value,
  :root[data-theme="light"] .failmode-enforcement-code,
  :root[data-theme="light"] .failmode-enforcement-delta-lead {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .failmode-enforcement-delta {
    background: var(--surface-container);
    border-left-color: var(--outline-variant);
  }
  :root[data-theme="light"] .failmode-enforcement-delta.is-changed {
    border-left-color: var(--primary);
  }
  :root[data-theme="light"] .failmode-enforcement-delta.is-same-outcome {
    border-left-color: var(--outline);
  }
  :root[data-theme="light"] .failmode-enforcement-tension {
    color: var(--on-surface-variant);
  }

  /* D29l — light-mode overrides for the trigger / dry-run cards and
     the authority-resolution note. Mirrors the dark-mode defaults by
     re-binding the same token vars on the new selectors. */
  :root[data-theme="light"] .failmode-trigger-card,
  :root[data-theme="light"] .failmode-dryrun-card {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .failmode-authority-note {
    background: var(--surface-container);
    border-left-color: var(--outline-variant);
  }
  :root[data-theme="light"] .failmode-authority-note-lead {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .failmode-authority-cause,
  :root[data-theme="light"] .failmode-trigger-rule-status {
    color: var(--on-surface-variant);
  }

  /* D30g — light-mode overrides for the Runtime Evidence Search
     panel. Mirrors the dark-mode defaults by re-binding the same
     token vars on the new selectors. */
  :root[data-theme="light"] .runtime-evidence-search {
    background: var(--surface-container-low);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .runtime-evidence-search-title,
  :root[data-theme="light"] .runtime-evidence-search-submit,
  :root[data-theme="light"] .runtime-evidence-search-clear {
    color: var(--on-surface);
  }
  :root[data-theme="light"] .runtime-evidence-search-subtitle,
  :root[data-theme="light"] .runtime-evidence-search-field label,
  :root[data-theme="light"] .runtime-evidence-search-state {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .runtime-evidence-search-field input,
  :root[data-theme="light"] .runtime-evidence-search-field select,
  :root[data-theme="light"] .runtime-evidence-search-submit,
  :root[data-theme="light"] .runtime-evidence-search-clear {
    background: var(--surface-container);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .runtime-evidence-search-state-error {
    border-left-color: var(--primary);
    color: var(--on-surface);
  }
  /* D30k light-mode overrides for the Load more affordance. */
  :root[data-theme="light"] .runtime-evidence-search-more-btn {
    background: var(--surface-container);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }
  :root[data-theme="light"] .runtime-evidence-search-more-state {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .runtime-evidence-search-more-state-error {
    border-left-color: var(--primary);
    color: var(--on-surface);
  }

  /* D30h — light-mode overrides for the Runtime Evidence Integrity
     and Packet panels. Mirrors the dark-mode defaults by re-binding
     the same token vars on the new selectors. */
  :root[data-theme="light"] .runtime-evidence-integrity-status,
  :root[data-theme="light"] .runtime-evidence-packet-error,
  :root[data-theme="light"] .runtime-evidence-packet-json {
    background: var(--surface-container);
    border-color: var(--outline-variant);
    color: var(--on-surface);
  }
  :root[data-theme="light"] .runtime-evidence-integrity-status.is-valid {
    border-left-color: var(--outline);
  }
  :root[data-theme="light"] .runtime-evidence-integrity-status.is-invalid,
  :root[data-theme="light"] .runtime-evidence-packet-error {
    border-left-color: var(--primary);
  }
  :root[data-theme="light"] .runtime-evidence-integrity-kv-key,
  :root[data-theme="light"] .runtime-evidence-packet-state {
    color: var(--on-surface-variant);
  }
  :root[data-theme="light"] .runtime-evidence-integrity-kv-value,
  :root[data-theme="light"] .runtime-evidence-packet-mono {
    color: var(--on-surface);
  }

  /* end-of-theme-5-records-light-block */