/* ============================================================
   Layer B — Veeva-Blue safety console (from pv-safety-mock/app.css).
   Scoped under .console so its cool tokens + Inter never leak.
   ============================================================ */
.console {
  --blue: #0066cc; --blue-hover: #0a5bb5; --blue-tint: #e6f1fb; --blue-ink: #0c447c;
  --c-surface: #fff; --c-canvas: #f5f6f7; --sec-hdr: #eef1f4;
  --c-ink: #1f2937; --c-muted: #6b7280; --c-faint: #9aa1ab;
  --c-line: #e0e3e7; --c-line-strong: #c7ccd2;
  --p-new: #eef1f4; --p-new-t: #44484f; --p-prog: #e6f1fb; --p-prog-t: #0c447c;
  --p-ok: #eaf3de; --p-ok-t: #3b6d11; --p-err: #fcebeb; --p-err-t: #a32d2d;
  --p-attn: #faeeda; --p-attn-t: #854f0b; --ok: #2e9e58;
  --c-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --c-mono: "SF Mono", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  height: 100%; display: flex; flex-direction: column;
  background: var(--c-canvas); color: var(--c-ink);
  font-family: var(--c-font); font-size: 13px; line-height: 1.5;
}
.console .muted { color: var(--c-muted); font-weight: 500; }
.console .mono { font-family: var(--c-mono); font-size: 11.5px; color: var(--blue-ink); font-weight: 600; }

/* ---- topbar ---- */
.c-topbar { height: 44px; flex: none; background: var(--c-surface); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.c-mark { width: 22px; height: 22px; border-radius: 5px; background: var(--blue); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.c-word { font-weight: 700; font-size: 14px; letter-spacing: -0.2px; }
.c-tabs { display: flex; gap: 14px; margin-left: 8px; }
.c-tabs span { font-size: 12.5px; color: var(--c-muted); font-weight: 500; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.c-tabs span.on { color: var(--c-ink); font-weight: 600; border-bottom-color: var(--blue); }
.c-spacer { flex: 1; }
.c-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2f6fb0, #0066cc); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* ---- lifecycle chevron (stage-driven) ---- */
.c-chevron { flex: none; display: flex; padding: 9px 14px 0; background: var(--c-surface); }
.c-chevron .lc { position: relative; flex: 1; background: var(--c-surface); color: var(--c-muted); font-size: 11.5px; font-weight: 600; padding: 8px 12px 8px 22px; border: 1px solid var(--c-line); border-right: none; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); margin-right: -6px; white-space: nowrap; transition: background .3s ease, color .3s ease; }
.c-chevron .lc:first-child { padding-left: 13px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
.c-chevron .lc:last-child { border-right: 1px solid var(--c-line); }
.console[data-stage="1"] .lc[data-lc="1"],
.console[data-stage="2"] .lc[data-lc="2"],
.console[data-stage="3"] .lc[data-lc="3"],
.console[data-stage="4"] .lc[data-lc="4"] { background: var(--blue); color: #fff; border-color: var(--blue); }
/* steps already completed get the soft tint */
.console[data-stage="2"] .lc[data-lc="1"],
.console[data-stage="3"] .lc[data-lc="1"], .console[data-stage="3"] .lc[data-lc="2"],
.console[data-stage="4"] .lc[data-lc="1"], .console[data-stage="4"] .lc[data-lc="2"], .console[data-stage="4"] .lc[data-lc="3"] { background: var(--blue-tint); color: var(--blue-ink); }

/* ---- persistent case-header banner: the single fastest "real safety DB" tell.
   Versioned worldwide case identity + the reporting clock, pinned across stages. ---- */
.c-casebar { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; background: var(--c-surface); padding: 5px 14px; border-bottom: 1px solid var(--c-line); font-size: 11px; color: var(--c-muted); white-space: nowrap; }
.c-casebar .cb-k { color: var(--c-faint); font-weight: 600; }
.c-casebar .cb-code { font-family: var(--c-mono); font-size: 9px; font-weight: 600; color: var(--c-faint); background: #fff; border: 1px solid var(--c-line); border-radius: 3px; padding: 1px 5px; flex: none; }
.c-casebar .cb-id { font-family: var(--c-mono); font-size: 11px; font-weight: 600; color: var(--blue-ink); flex: none; }
.c-casebar .cb-ver { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: 3px; padding: 1px 6px; color: var(--p-prog-t); background: var(--p-prog); }
.console[data-stage="1"] .c-casebar .cb-ver { color: var(--p-new-t); background: var(--p-new); }
.c-casebar .cb-spacer { flex: 1; }
.c-casebar .cb-clock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.c-casebar .cb-clock .cdot { width: 7px; height: 7px; border-radius: 50%; background: #e0b35a; box-shadow: 0 0 0 3px rgba(224, 179, 90, .2); flex: none; }
.console[data-stage="1"] .c-casebar .cb-clock .cdot { background: var(--c-line-strong); box-shadow: none; }
.c-casebar .cb-clock b { color: var(--c-ink); font-weight: 700; }
.c-casebar .cb-owner { color: var(--c-muted); }
@media (max-width: 880px) { .c-casebar .cb-owner { display: none; } }

/* ---- crumb ---- */
.c-crumb { flex: none; background: var(--c-surface); padding: 10px 16px 12px; border-bottom: 1px solid var(--c-line); font-size: 12px; color: var(--c-muted); }
.c-crumb:empty { display: none; }
.c-crumb b { color: var(--c-ink); font-weight: 600; }
.c-crumb i { color: var(--c-faint); font-style: normal; margin: 0 5px; }

/* ---- canvas + panes ---- */
.c-canvas { position: relative; flex: 1; overflow: hidden; }
.c-canvas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(to top, var(--c-canvas), transparent); pointer-events: none; z-index: 2; }
.c-pane { position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px 66px; display: flex; flex-direction: column; gap: 13px; transition: transform .55s cubic-bezier(.4, 0, .1, 1); }
.c-pane[hidden] { display: none; }

/* ---- a widget card ---- */
.w { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(20, 30, 45, .05); overflow: hidden; }
.w-bar { display: flex; align-items: center; gap: 9px; background: var(--sec-hdr); padding: 9px 13px; border-bottom: 1px solid var(--c-line); font-size: 12px; font-weight: 700; color: var(--c-ink); }
.w-bar .e2b { font-family: var(--c-mono); font-size: 9.5px; font-weight: 600; color: var(--c-faint); background: #fff; border: 1px solid var(--c-line); border-radius: 3px; padding: 1px 5px; }
.w-body { padding: 13px 14px; }

/* ---- status pills ---- */
.pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.pill.new { background: var(--p-new); color: var(--p-new-t); }
.pill.progress { background: var(--p-prog); color: var(--p-prog-t); }
.pill.serious { background: var(--p-err); color: var(--p-err-t); }

/* ---- seriousness grid ---- */
.serious-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.crit { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--c-muted); }
.crit .box { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--c-line-strong); background: #fff; color: transparent; font-size: 11px; display: grid; place-items: center; flex: none; }
.crit.on { color: var(--c-ink); font-weight: 600; }
.crit.on .box { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- duplicate proposal ---- */
.conf { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--c-muted); }

/* ---- consequence (the human gate) ---- */
.consequence { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--c-line); }
.cons-state { font-size: 11px; font-weight: 700; color: var(--p-attn-t); background: var(--p-attn); border-radius: 10px; padding: 3px 10px; }
.cons-actions { display: flex; gap: 8px; margin-left: auto; }
.btn { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 6px 11px; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); white-space: nowrap; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.ghost { color: var(--blue-ink); }

/* ============================================================
   Stage 2: the source-to-coding TRACE (click-to-verify)
   ============================================================ */
/* source document with highlightable spans */
.src { font: inherit; color: inherit; background: #fff6da; border: 1px solid #f0e2ab; border-radius: 3px; padding: 0 3px; cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.src:hover { background: #ffe88a; border-color: #e0b94a; }
.src.lit { background: #ffe07a; border-color: #d8a52a; box-shadow: 0 0 0 3px rgba(216, 165, 42, .25); }
.src-labs { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 9px; padding-top: 10px; border-top: 1px dashed var(--c-line); font-size: 12px; }
.src-lab b { font-weight: 700; }
.src-lab i { color: var(--c-faint); font-style: normal; font-size: 11px; }

/* coded values — each links to a source region */
.code-group { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--c-faint); margin: 11px 0 6px; }
.code-group:first-child { margin-top: 0; }
.code { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 11px; margin-bottom: 6px; cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.code:hover { border-color: var(--blue); background: #fafcff; }
.code.lit { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
.code .code-pt { font-size: 12.5px; font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
.code .code-pt em { font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; color: #fff; background: var(--blue); border-radius: 3px; padding: 1px 4px; text-transform: uppercase; }
.code .code-trail { font-size: 10.5px; color: var(--c-muted); }
.code.sm { padding: 6px 11px; }
.code.sm .code-pt { font-size: 12px; font-weight: 500; }
.code .flag { font-size: 9px; font-weight: 700; color: var(--p-attn-t); background: var(--p-attn); border-radius: 9px; padding: 1px 7px; }
.code .role { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; border-radius: 3px; padding: 1px 5px; color: #fff; }
.code .role.suspect { background: var(--p-err-t); }
.code .role.conc { background: var(--c-muted); }
.code .atc { font-size: 9.5px; color: var(--c-muted); font-weight: 500; margin-left: auto; }

/* supporting terms as compact linked chips */
.code-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.chip-code { font-size: 11px; font-weight: 600; color: var(--c-ink); background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 3px 10px; cursor: pointer; font-family: inherit; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.chip-code:hover { border-color: var(--blue); }
.chip-code.lit { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }

/* two-column source <-> coded trace */
.trace-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 16px; align-items: start; }
.trace-col-h { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--c-faint); margin-bottom: 9px; }
.trace-src .src-line { margin: 0 0 8px; }
.trace-src .src-line:last-of-type { margin-bottom: 0; }
.trace-codes > *:not(.trace-col-h) { transition: opacity .4s ease, transform .4s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
/* the right column is drafted on beat 2: hidden while the source is still being read (beat 1).
   applies to every trace stage (case processing, QC, medical) since beat resets per stage. */
.console[data-beat="1"] .trace-codes > *:not(.trace-col-h) { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (max-width: 880px) { .trace-grid { grid-template-columns: 1fr; } }

/* narrative */
.narrative { font-size: 12px; line-height: 1.65; color: var(--c-ink); margin: 0; }
.open-item { font-size: 11px; color: var(--p-attn-t); background: var(--p-attn); border-radius: 6px; padding: 7px 10px; margin: 11px 0 0; line-height: 1.45; }

/* ============================================================
   Stage 1: source review — paper pages with bounding boxes
   ============================================================ */
.intake-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; align-items: start; }
/* beat 1: just the document, agent boxing findings on it. the structured read
   builds in from beat 2 so attention stays on source -> finding first. */
.console[data-stage="1"][data-beat="1"] .intake-grid { grid-template-columns: 1fr; }
.console[data-stage="1"][data-beat="1"] .reads-pane { display: none; }

.paper-tabs { display: flex; gap: 4px; margin-bottom: 0; }
.ptab { font-size: 10.5px; font-weight: 600; color: var(--c-muted); background: transparent; border: 1px solid var(--c-line); border-bottom: none; border-radius: 6px 6px 0 0; padding: 5px 11px; cursor: pointer; font-family: inherit; }
.ptab.on { color: var(--blue-ink); background: var(--blue-tint); border-color: #cfe3f7; }
.paper-stack { position: relative; }
.paper { background: #fff; border: 1px solid var(--c-line); border-radius: 0 4px 4px 4px; box-shadow: 0 1px 3px rgba(20, 30, 45, .06); padding: 14px 15px; min-height: 196px; }
.paper[hidden] { display: none; }
.paper-h { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; color: var(--c-faint); font-weight: 700; padding-bottom: 8px; margin-bottom: 11px; border-bottom: 1px solid var(--c-line); }
.paper-title { font-size: 12.5px; font-weight: 700; color: var(--c-ink); margin: 0 0 12px; line-height: 1.3; }
.paper-body { font-size: 12px; line-height: 2.1; color: var(--c-ink); margin: 0; }
.paper-dim { font-size: 10.5px; color: var(--c-faint); margin: 13px 0 0; }
.paper-fax { background: #fcfbf6; }
.fax-line { font-family: "Gloria Hallelujah", "Comic Sans MS", cursive; font-size: 11px; line-height: 2.3; color: #2b3340; margin: 0 0 5px; }
.call-turn { font-size: 11.5px; line-height: 2.05; color: var(--c-ink); margin: 0 0 8px; }
.call-turn b { color: var(--c-muted); font-weight: 700; }

/* the bounding boxes */
.bbox { position: relative; cursor: pointer; border-radius: 2px; padding: 0 2px; outline: 1.4px solid var(--bc, #b9c0c9); outline-offset: 2px; background: transparent; transition: outline-color .15s ease, background .15s ease, box-shadow .15s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bbox::after { content: attr(data-label); position: absolute; top: -1.05em; left: -2px; font-family: var(--c-font); font-size: 7.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #fff; background: var(--bc, #b9c0c9); padding: 0 4px; border-radius: 2px; line-height: 1.5; white-space: nowrap; }
.bbox.b-evt, .bbox.b-ser { --bc: #c98a2b; }
.bbox.b-id { --bc: #5b9bd5; }
.bbox.b-det { --bc: #9aa1ab; }
.bbox.b-warn { --bc: #d8636b; }
.bbox.lit { --bc: #0066cc; background: rgba(0, 102, 204, .1); box-shadow: 0 0 0 3px rgba(0, 102, 204, .14); }

/* the agent's structured read */
.reads-pane { display: flex; flex-direction: column; gap: 11px; }
.read { background: #fff; border: 1px solid var(--c-line); border-radius: 4px; box-shadow: 0 1px 2px rgba(20, 30, 45, .05); padding: 11px 12px; transition: opacity .4s ease, transform .4s ease; }
.read:not(.in) { opacity: 0; transform: translateY(10px); pointer-events: none; }
.read-h { font-size: 12px; font-weight: 700; color: var(--c-ink); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.read-h .muted { font-weight: 500; }
.read-hint { font-size: 10.5px; color: var(--c-muted); margin: 0 0 8px; }
.read-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 6px 0; border-top: 1px solid var(--c-line); }
.read-row:first-of-type { border-top: none; }
.read-row .rk { font-family: var(--c-mono); font-weight: 700; color: var(--c-muted); width: 16px; }
.read-row .rr-t { color: var(--c-muted); }
.read-row.sel { cursor: pointer; border-radius: 4px; }
.read-row.sel.lit { background: var(--blue-tint); }
.dup-mini { font-size: 11px; line-height: 1.55; color: var(--c-ink); margin: 0 0 9px; }
@media (max-width: 880px) {
  .intake-grid { grid-template-columns: 1fr; }
  .console { height: auto; }
  .c-canvas { overflow: visible; }
  .c-pane { position: static; transform: none !important; }
  .c-agent { position: static; margin: 12px 0 0; box-shadow: none; }
  .read:not(.in), .w { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Stages 3 & 4: QC checks + the medical assessment.
   Both reuse the trace-grid (source <-> right column) from stage 2,
   so click-to-verify and the auto-trace cycle work unchanged.
   ============================================================ */
/* segregation-of-duties banner (QC): entry and review are different people */
.indep { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; font-size: 11px; color: var(--c-muted); background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 11px; margin-bottom: 12px; }
.indep b { color: var(--c-ink); font-weight: 700; }
.indep .arr { color: var(--c-faint); }
.indep .indep-flag { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--p-attn-t); background: var(--p-attn); border-radius: 9px; padding: 2px 8px; white-space: nowrap; }

/* a QC check row: source-linked, with a pass/attention glyph */
.check { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 11px; margin-bottom: 6px; cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.check:hover { border-color: var(--blue); background: #fafcff; }
.check.lit { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(0, 102, 204, .12); }
.check .ck { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #fff; margin-top: 1px; }
.check .ck.ok { background: var(--ok); }
.check .ck.attn { background: #e0b35a; }
.check .ck-body { display: flex; flex-direction: column; gap: 2px; }
.check .ck-l { font-size: 12px; font-weight: 600; color: var(--c-ink); }
.check .ck-v { font-size: 10.5px; color: var(--c-muted); }

/* medical assessment, proposed-not-asserted */
.assess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.assess { background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: 4px; padding: 8px 10px; }
.assess .a-l { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: var(--c-faint); display: block; margin-bottom: 3px; }
.assess .a-v { font-size: 12px; font-weight: 600; color: var(--c-ink); }
.assess .a-v .proposed { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--p-attn-t); background: var(--p-attn); border-radius: 3px; padding: 1px 5px; margin-left: 5px; }

/* a flagged caveat the human resolves (Hy's-law range, region-specific reporting) */
.caveat { font-size: 11px; line-height: 1.5; color: var(--c-ink); background: var(--p-attn); border: 1px solid #ecd9b4; border-radius: 4px; padding: 8px 11px; margin-bottom: 7px; }
.caveat:last-child { margin-bottom: 0; }
.caveat b { font-weight: 700; }
.caveat .cav-k { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--p-attn-t); margin-right: 6px; }

/* imaging source rendered as a labelled line (no external asset) */
.src-imaging { display: inline-flex; align-items: center; gap: 6px; }
.src-imaging .img-tag { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--c-faint); background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: 3px; padding: 1px 5px; }

/* ============================================================
   Validated-system "tells": density as single high-signal artifacts
   (the things a case processor scans for), never as new forms.
   ============================================================ */
/* the six E2B event-level seriousness criteria (E.i.3.2 a-f), one column in the read pane */
.reads-pane .serious-grid { grid-template-columns: 1fr; gap: 4px; }
.crit[data-region] { cursor: pointer; border-radius: 4px; padding: 2px 5px; margin: 0 -5px; transition: background .15s ease, box-shadow .15s ease; }
.crit[data-region]:hover { background: #fafcff; }
.crit.lit { background: var(--blue-tint); box-shadow: 0 0 0 2px rgba(0, 102, 204, .12); }
.crit .src-tag { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--c-faint); background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: 3px; padding: 1px 5px; }
.ei-code { font-family: var(--c-mono); font-size: 9px; font-weight: 600; color: var(--c-faint); margin-left: auto; }

/* MedDRA hierarchy line: compresses the 5-column browser to one dense line with the version stamp */
.mdr { display: block; font-size: 10px; line-height: 1.5; color: var(--c-muted); margin-top: 3px; }
.mdr b { color: var(--c-ink); font-weight: 600; }
.mdr .soc { color: var(--blue-ink); font-weight: 600; }
.mdr .ver { font-family: var(--c-mono); font-size: 9px; color: var(--c-faint); }

/* ICSR minimum-criteria validity gate (the first thing a processor checks at book-in) */
.valgate { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10px; color: var(--c-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-line); }
.valgate .vg { display: inline-flex; align-items: center; gap: 4px; }
.valgate .vg i { width: 13px; height: 13px; border-radius: 3px; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #fff; background: var(--ok); font-style: normal; }

/* coded dechallenge / rechallenge pair (feeds causality; was prose) */
.drc { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.drc .dr { font-size: 10.5px; color: var(--c-ink); background: var(--c-canvas); border: 1px solid var(--c-line); border-radius: 4px; padding: 4px 8px; }
.drc .dr b { font-weight: 700; }
.drc .dr .v-pos { color: var(--p-ok-t); font-weight: 700; }
.drc .dr .v-na { color: var(--c-faint); font-weight: 600; }

/* E2B null-flavor token on a genuinely-unknown field (ASKU = asked but unknown) */
.nullflavor { font-family: var(--c-mono); font-size: 9.5px; font-weight: 700; color: var(--p-attn-t); background: #fff; border: 1px solid #ecd9b4; border-radius: 3px; padding: 0 5px; }

/* Part 11 e-signature + audit at sign-off, shown as a static stamp (no fake password modal) */
.esign { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--c-line); display: flex; flex-direction: column; gap: 5px; }
.esign .es-row { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--c-muted); line-height: 1.45; }
.esign .es-k { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--c-faint); flex: none; padding-top: 1px; }
.esign .es-row b { color: var(--c-ink); font-weight: 700; }

/* ---- agent voice overlay ---- */
.c-agent { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 9px; background: #14202d; color: #e8eef4; border-radius: 9px; padding: 9px 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .26); }
.c-agent .pdot { width: 8px; height: 8px; border-radius: 50%; background: #2fce7f; box-shadow: 0 0 0 3px rgba(47, 206, 127, .22); flex: none; }
.c-agent-t { font-size: 12px; font-weight: 500; line-height: 1.4; }