/* ============ Tokens — Klaim Claim-to-Cash Console palette ============
   Sourced from guides/Brand/Klaim_shadcn_Tailwind_Theme_Reference.html —
   the authoritative shadcn/Tailwind token mapping (companion to the
   Dashboard UX Brand Reference) — rather than reverse-engineered from one
   product page. Key corrections from that spec vs. the previous pass:
   --primary stays Turquoise in BOTH themes (solid fill, space-grey text —
   "never white on turquoise"); chart/data-series colors (payer, patient,
   denial, good) are identical across themes by design, so "candidate"
   (investigation flag) uses Payer Blue #4f8fd1 in both, free of collision
   now that turquoise — not payer blue — is the primary; destructive still
   splits generic Error (light) vs. console Denial (dark), confirmed by
   both sources; muted-foreground is a single tier per theme (the previous
   two-tier text-muted/text-faint split isn't in the spec and had a real
   dark-mode hierarchy bug — collapsed to one tone here). */
:root {
  /* ---- light (default) ---- */
  --bg: #f9f9fc;               /* off-white */
  --surface: #ffffff;          /* card / popover */
  --surface-2: #f2f2f8;        /* light-lavender — secondary / muted / sidebar */
  --surface-3: #e4e4f1;        /* lavender-mid — border / input */
  --border: #e4e4f1;
  --border-strong: #cac8de;
  --text: #2e2d4d;             /* space-grey */
  --text-muted: #65657a;       /* grey-mid — muted-foreground */
  --text-faint: #65657a;

  --accent: #80eee0;           /* turquoise — shadcn --primary, universal CTA fill */
  --accent-strong: #0e7c6a;    /* accent-ink — turquoise as text/icon on light surfaces */
  --accent-soft: #d0e4e1;      /* light-cyan — shadcn --accent (hover/highlight) */
  --accent-border: #a9d6cd;
  --accent-contrast: #2e2d4d;  /* space-grey — required text on turquoise fills, both themes */

  /* claim-outcome severities */
  --error: #c24a4a;
  --error-soft: #fbe3e3;
  --warning: #d98e3b;
  --warning-soft: #fbe9d5;
  --candidate: #4f8fd1;        /* chart-1 / payer — identical across themes by design */
  --candidate-soft: #dce8f7;
  --success: #1f9d6b;
  --success-soft: #d9f7ef;
  --fail: #c24a4a;
  --fail-soft: #fbe3e3;

  --sidebar-bg: #f2f2f8;       /* shadcn --sidebar — distinct from --card (secondary tone, not white) */

  --shadow: 0 1px 2px rgba(46, 45, 77, 0.05), 0 10px 28px -14px rgba(46, 45, 77, 0.16);
  --radius: 8px;
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1620;               /* treasury-bg-dark */
    --surface: #11202c;          /* treasury-panel-dark — card */
    --surface-2: #152736;        /* treasury-panel-raised — popover / secondary */
    --surface-3: #1f3a55;        /* treasury-fill-dark — muted / accent / border / input */
    --border: #1f3a55;
    --border-strong: #2c4d6e;
    --text: #e7eef4;             /* treasury-ink */
    --text-muted: #5a7185;       /* treasury-slate — muted-foreground */
    --text-faint: #5a7185;

    --accent: #80eee0;           /* turquoise stays the primary, unchanged from light */
    --accent-strong: #7df0dc;    /* mint-bright — turquoise as text/icon on dark surfaces */
    --accent-soft: rgba(128, 238, 224, 0.12);
    --accent-border: rgba(128, 238, 224, 0.35);
    --accent-contrast: #2e2d4d;  /* space-grey — never white on turquoise, even here */

    --error: #d2604a;            /* denial — claim denied/rejected, console-specific red */
    --error-soft: #4a2620;
    --warning: #d98e3b;
    --warning-soft: rgba(217, 142, 59, 0.16);
    --candidate: #4f8fd1;        /* payer — identical across themes by design */
    --candidate-soft: rgba(79, 143, 209, 0.16);
    --success: #4aa583;          /* good — recovered / validated / match */
    --success-soft: #1f4536;
    --fail: #c24a4a;             /* system-level failure, distinct from claim-denial red */
    --fail-soft: rgba(194, 74, 74, 0.16);

    --sidebar-bg: #11202c;       /* shadcn --sidebar (dark) — same as --card */

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -14px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0d1620;
  --surface: #11202c;
  --surface-2: #152736;
  --surface-3: #1f3a55;
  --border: #1f3a55;
  --border-strong: #2c4d6e;
  --text: #e7eef4;
  --text-muted: #5a7185;
  --text-faint: #5a7185;

  --accent: #80eee0;
  --accent-strong: #7df0dc;
  --accent-soft: rgba(128, 238, 224, 0.12);
  --accent-border: rgba(128, 238, 224, 0.35);
  --accent-contrast: #2e2d4d;

  --error: #d2604a;
  --error-soft: #4a2620;
  --warning: #d98e3b;
  --warning-soft: rgba(217, 142, 59, 0.16);
  --candidate: #4f8fd1;
  --candidate-soft: rgba(79, 143, 209, 0.16);
  --success: #4aa583;
  --success-soft: #1f4536;
  --fail: #c24a4a;
  --fail-soft: rgba(194, 74, 74, 0.16);

  --sidebar-bg: #11202c;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -14px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); color: var(--text); }
code, .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-family: var(--font-ui); }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ============ Shell ============ */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: #201f38; /* space-grey-deep — logomark on-dark surface */
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; }
.brand-text span { font-size: 11px; color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 7px;
  color: var(--text-muted); font-weight: 600; font-size: 13.2px;
  cursor: pointer; border: 1px solid transparent; background: none; text-align: left; width: 100%;
  transition: background .12s ease, color .12s ease;
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-item.active svg { opacity: 1; }
.nav-item .step-dot {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: none;
}
.nav-item .step-dot.done { background: var(--success); }
.nav-item .step-dot.now { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.sidebar-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.theme-toggle { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 8px; gap: 2px; align-self: flex-start; }
.theme-toggle button {
  border: none; background: none; width: 28px; height: 26px; border-radius: 6px;
  color: var(--text-faint); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.theme-toggle button svg { width: 15px; height: 15px; }
.theme-toggle button:hover { color: var(--text-muted); }
.theme-toggle button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow); }
.mock-badge {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px; color: var(--text-faint); font-weight: 600; line-height: 1.45;
}
.mock-badge .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); flex: none; margin-top: 4px; }

/* Live API health check — reuses the brand pulse-ring for "connected"
   rather than a generic status dot, per the dashboard reference's rule
   to reuse that motion for any live/real-time indicator. */
.health-row { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.health-dot.ok { background: var(--accent-strong); animation: kl-pulse-ring 2.4s ease-out infinite; }
.health-dot.down { background: var(--fail); }
@media (prefers-reduced-motion: reduce) { .health-dot.ok { animation: none; } }

.main { min-width: 0; display: flex; flex-direction: column; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; overflow-y: visible; }
}

.topbar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.topbar-crumb { font-size: 12px; color: var(--text-faint); font-weight: 600; }
.topbar-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.topbar-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.meta-chip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.meta-chip .num { color: var(--text); }
.meta-chip svg { width: 13px; height: 13px; opacity: .75; }

/* PHI mode switch. Turquoise-on-space-grey when armed: this is a console
   mode, not a claim state, so the semantic success/warning palette (reserved
   for approved/pending/denied) stays out of it. */
.phi-switch {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 5px 11px 5px 9px;
  border-radius: 99px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Full text contrast in the off state too: that is the state where patient
   identifiers are on screen, so its label is the one that must not be soft. */
.phi-switch:hover { border-color: var(--accent-border); background: var(--surface-2); }
.phi-switch:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
.phi-switch svg { width: 14px; height: 14px; flex: none; }
.phi-switch .phi-state { font-variant-numeric: tabular-nums; }
.phi-switch .phi-off-icon { display: block; }
.phi-switch .phi-on-icon { display: none; }
.phi-switch[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.phi-switch[aria-checked="true"] .phi-off-icon { display: none; }
.phi-switch[aria-checked="true"] .phi-on-icon { display: block; }
/* Hit area beyond the visual bounds, so the pill still meets 44px. */
.phi-switch::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
}
.phi-switch { position: relative; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The case editor holds the claim the operator will save, so its text is never
   rewritten — masking an editable value would save the mask. It is covered
   instead, and the cover is dismissible for whoever actually needs to edit. */
.phi-shield { position: relative; }
.phi-shield > .phi-shield-content { filter: blur(7px); pointer-events: none; user-select: none; }
.phi-shield-cover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center; border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  font-size: 12px; color: var(--text);
}
.phi-shield-cover strong { font-size: 12.5px; }
.phi-shield-cover p { margin: 0; max-width: 42ch; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
  .phi-shield > .phi-shield-content { filter: none; visibility: hidden; }
}

/* Masked values are still data an operator reads off the screen, so they keep
   full text contrast; the mono face and tracking carry the "redacted" cue
   instead of a dimmer colour, which would fail 4.5:1 on the dark palette. */
.phi-masked { color: var(--text); font-family: var(--font-mono); font-size: .94em; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .phi-switch { transition: none; }
}

.screen { padding: 26px 28px 64px; max-width: 1180px; width: 100%; }
.screen[hidden] { display: none; }
.screen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.screen-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.screen-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 13.5px; max-width: 62ch; }
.head-actions { display: flex; gap: 8px; flex: none; }

/* ============ Buttons / inputs ============ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  cursor: pointer; transition: transform .08s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
/* solid turquoise fill + space-grey text — shadcn --primary/--primary-foreground
   per the brand's shadcn theme reference ("never white on turquoise"),
   unchanged between light and dark. */
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 800; }
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 88%, var(--text));
}
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--surface); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.field .hint { font-size: 11.5px; color: var(--text-faint); font-weight: 500; }

/* Rule catalog picker (Settings). The three controls share one row on a wide
   card and wrap to full width when the grid collapses. */
.catalog-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.catalog-path { display: flex; gap: 8px; align-items: center; }
.catalog-path .btn { flex: none; white-space: nowrap; }
.catalog-status {
  margin-top: 14px; font-size: 12.5px; line-height: 1.55;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; background: var(--surface-2); color: var(--text-muted);
}
.catalog-status.is-error { border-color: var(--error); background: var(--error-soft); color: var(--error); }
.catalog-status .catalog-path-name { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); }
.catalog-status .catalog-meta { color: var(--text-faint); }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 10px; width: 100%;
}
select { font-family: var(--font-ui); font-weight: 600; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--text-faint); }

.radio-tabs { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 8px; gap: 2px; }
.radio-tabs button {
  border: none; background: none; padding: 7px 14px; border-radius: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.radio-tabs button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
/* The count a filter tab would show. Tabular figures so the tabs do not shift
   width as a rerun changes the numbers, and dimmer than the label so the tab
   still reads as its name first. */
.radio-tabs button .rt-count {
  margin-left: 6px; font-variant-numeric: tabular-nums; font-weight: 600;
  font-size: 11.3px; color: var(--text-faint);
}
.radio-tabs button.active .rt-count { color: var(--text); }

/* ============ Custom select (replaces native <select> popups, which
   render with unstyleable OS chrome — kept for domain/status filters and
   any future dropdown). The native <select> stays in the DOM as the
   source of truth (value + change events for existing JS); this is a
   purely visual combobox layered on top. ============ */
.kl-select { position: relative; display: inline-flex; }
.kl-select select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.kl-select-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 10px; cursor: pointer; white-space: nowrap;
}
.kl-select-trigger:hover { background: var(--surface-2); border-color: var(--border-strong); }
.kl-select-trigger .kl-chev { width: 13px; height: 13px; color: var(--text-faint); flex: none; transition: transform .15s ease; }
.kl-select-trigger.open .kl-chev { transform: rotate(180deg); color: var(--accent-strong); }
.kl-select-trigger.open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kl-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 100%; width: max-content; max-width: 260px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow); padding: 5px;
  opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.kl-select-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.kl-select-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  padding: 7px 9px; border-radius: 5px;
}
.kl-select-item:hover { background: var(--surface-2); color: var(--text); }
.kl-select-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.kl-select-item .kl-check { width: 13px; height: 13px; flex: none; visibility: hidden; }
.kl-select-item.active .kl-check { visibility: visible; }

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }

/* ============ Cards / panels ============ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-pad { padding: 18px 20px; }
.panel-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 0 0 12px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Pills / badges */
/* One pill, one look: every .pill draws its own bullet with ::before, in
   currentColor so it always matches the label, and centers bullet + label
   as a group. Render sites add no dot markup — a status, severity, phase,
   or version pill differs only by its modifier class. Centered on both axes
   wherever the pill lands: shrink-wrapped inline it changes nothing, but as
   a grid item or a stretched flex item the box is wider than its label, and
   without this the label hugs the left edge. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap; text-align: center;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* The pseudo-element is the only bullet a pill draws: legacy inner dot
   markup would double it, and a pill with no label yet has nothing to show. */
.pill > .pill-dot { display: none; }
.pill:empty { display: none; }
/* Standalone bullet beside plain text (connection status) — not a pill. */
.pill-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
/* rule LIFECYCLE STATUS is a real state of the rule (will it run or not) —
   the brand's success/warning palette applies: active = live in production
   (green), implemented = written but not yet turned on (amber, needs a
   decision), deprecated stays neutral/struck-through. */
.pill-active { background: var(--success-soft); color: var(--success); }
.pill-implemented { background: var(--warning-soft); color: var(--warning); }
.pill-deprecated { background: transparent; color: var(--text-faint); border: 1px solid var(--border); text-decoration: line-through; text-decoration-color: var(--border-strong); }
/* idle/no-run-yet chrome is not a rule status — kept separate so it can't
   drift in meaning when "implemented" above changes color. */
.pill-idle { background: var(--surface-3); color: var(--text-muted); }
.pill-fail { background: var(--fail-soft); color: var(--fail); }
.pill-running { background: var(--candidate-soft); color: var(--candidate); }
/* the live pill's bullet is the brand pulse ring (Section 7), in the same
   accent mint as .pulse-dot, rather than the label color. */
.pill-running::before { background: var(--accent-strong); animation: kl-pulse-ring 2.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .pill-running::before { animation: none; } }
/* rule PHASE is execution metadata, not a claim/rule outcome — the brand
   rule reserves semantic color for real states, so phases stay neutral
   and are told apart by weight, not hue. Sized up from the base .pill
   (more horizontal padding) so longer labels like "hard_validation" don't
   read as cramped. */
.pill-phase { padding: 4px 12px; }
.pill-phase-hard_validation { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.pill-phase-scrub { background: transparent; color: var(--text-muted); }
.sev-error { background: var(--error-soft); color: var(--error); }
.sev-warning { background: var(--warning-soft); color: var(--warning); }
.sev-candidate { background: var(--candidate-soft); color: var(--candidate); }
.sev-hold { background: var(--surface-3); color: var(--text-muted); }
.sev-info { background: var(--surface-3); color: var(--text-muted); }
.sev-shadow { background: transparent; color: var(--text-muted); border-style: dashed; }
.sev-ok { background: var(--success-soft); color: var(--success); }
.sev-fail { background: var(--fail-soft); color: var(--fail); }
.domain-chip { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }

/* live / in-progress indicator — reuses the brand's pulse-ring pattern
   (Section 7: "reuse the pulse-ring micro-animation rather than inventing
   a new motion pattern") instead of a generic spin loader. */
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-strong); flex: none; animation: kl-pulse-ring 2.4s ease-out infinite; }
@keyframes kl-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(125, 240, 220, .55); } 70% { box-shadow: 0 0 0 9px rgba(125, 240, 220, 0); } 100% { box-shadow: 0 0 0 0 rgba(125, 240, 220, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ============ Screen: Rules ============ */
.rules-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px;
}
.rules-toolbar input[type="text"] { max-width: 240px; }
.rules-toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.rules-toolbar .spacer { flex: 1; }
.selection-count { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.selection-count .num { color: var(--accent-strong); }

.rules-layout { display: block; }

/* Fixed viewport height with its own scrollbar — the catalog runs to 100+
   rows across 9 domains, so the page shouldn't have to grow to fit it.
   Domain headers stick to the top of the scroll area as you scroll a
   long group, same pattern as the topbar. */
.rule-table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  max-height: min(640px, calc(100vh - 320px));
  overflow-y: auto; overflow-x: hidden;
}
.rule-col-head {
  display: grid;
  grid-template-columns: 26px 34px 168px 1fr minmax(112px, auto) minmax(84px, auto) minmax(96px, auto) 64px;
  align-items: center; gap: 10px;
  padding: 8px 14px 8px 30px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint);
  position: sticky; top: 0; z-index: 2;
}
.domain-group { border-bottom: 1px solid var(--border); }
.domain-group:last-child { border-bottom: none; }
.domain-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--surface-2); cursor: pointer;
  position: sticky; top: 32px; z-index: 1;
}
.domain-head .chev { width: 12px; height: 12px; color: var(--text-faint); transition: transform .15s ease; flex: none; }
.domain-head.collapsed .chev { transform: rotate(-90deg); }
.domain-head strong { font-size: 12.5px; font-weight: 800; text-transform: capitalize; }
.domain-head .domain-sub { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.domain-head .spacer { flex: 1; }
.domain-select { font-size: 11px; color: var(--accent-strong); font-weight: 700; cursor: pointer; background: none; border: none; padding: 2px 4px; }

/* Fixed columns sized to content (checkbox / seq / id), the name column
   flexes, and phase/severity/status/version are auto-sized with a floor
   so a label like "hard_validation" or "candidate" can't overflow its
   pill — a fixed px track was clipping those before. */
.rule-row {
  display: grid;
  grid-template-columns: 26px 34px 168px 1fr minmax(112px, auto) minmax(84px, auto) minmax(96px, auto) 64px;
  align-items: center; gap: 10px;
  padding: 7px 14px 7px 30px; border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.domain-group .rule-row:first-of-type { border-top: none; }
.rule-row:hover { background: var(--surface-2); cursor: pointer; }
.rule-row.disabled-row:hover { cursor: default; }
.rule-row.disabled-row { opacity: .5; }
.rule-col-head .c { text-align: center; }
.rule-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.rule-row .rid { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.rule-row .rname { color: var(--text); }
.rule-row .rseq { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-align: right; }
.rule-row .rver { color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; text-align: right; }
.rules-collapsed-body[hidden] { display: none; }

.code-block {
  margin: 0; max-height: 480px; overflow: auto;
  background: var(--surface-3); border-radius: 6px; padding: 12px 14px;
  font-size: 11.3px; line-height: 1.6; font-family: var(--font-mono);
}
.yaml-kw { color: var(--accent-strong); }
.yaml-str { color: var(--warning); }
.yaml-com { color: var(--text-faint); }

/* ============ Side drawer (rule detail / yaml preview) ============ */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 14, 20, 0.45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(520px, 92vw);
  background: var(--surface); border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow); transform: translateX(100%);
  transition: transform .22s ease; z-index: 41;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex: none;
}
.drawer-head h3 { font-size: 15px; }
.drawer-body { padding: 18px 20px; overflow: auto; flex: 1; }

/* ============ Screen: Data source ============ */
.source-modes { display: flex; gap: 12px; margin-bottom: 16px; }
.source-card {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
  cursor: pointer; background: var(--surface); position: relative;
}
.source-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.source-card h3 { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.source-card h3 svg { width: 16px; height: 16px; color: var(--accent-strong); }
.source-card p { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.source-card .radio-dot {
  position: absolute; top: 16px; right: 16px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.source-card.selected .radio-dot { border-color: var(--accent); }
.source-card.selected .radio-dot::after {
  content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin: 2px;
}

.preset-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.preset-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--surface);
}
.preset-item:hover { border-color: var(--border-strong); }
.preset-item.selected { border-color: var(--accent); background: var(--accent-soft); }
.preset-item input { accent-color: var(--accent); }
.preset-item .p-path { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.preset-item .p-meta { margin-left: auto; font-size: 11px; color: var(--text-faint); font-weight: 600; }

.conn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.conn-form .span-2 { grid-column: 1 / -1; }
.test-conn-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.conn-status { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.conn-status .pill-dot { width: 7px; height: 7px; border-radius: 50%; }

.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .evidence-grid, .conn-form { grid-template-columns: 1fr; } }
.evidence-card { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 14px 16px; }
.evidence-card.attached { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.evidence-card .ev-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12.5px; }
.evidence-card .ev-head svg { width: 15px; height: 15px; color: var(--accent-strong); }
.evidence-card p { font-size: 11.8px; color: var(--text-muted); margin: 6px 0 10px; }
.evidence-card .ev-path { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 6px 9px; word-break: break-all; }

/* ============ Screen: Run ============ */
.run-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .run-summary-grid { grid-template-columns: repeat(2, 1fr); } }
.summary-tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 13px 15px; }
.summary-tile .st-label { font-size: 10.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.summary-tile .st-value { font-size: 15px; font-weight: 800; margin-top: 4px; font-family: var(--font-mono); }
.summary-tile .st-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.run-launch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 20px; flex-wrap: wrap; }
.run-launch-left { display: flex; flex-direction: column; gap: 3px; }
.run-launch-left strong { font-size: 13.5px; font-weight: 800; }
.run-launch-left span { font-size: 12px; color: var(--text-muted); }

.progress-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin-bottom: 20px; }
.progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.progress-stage { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.progress-bar-track { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); width: 0%; transition: width .25s ease; }
.progress-bar-fill.failed { background: var(--error); }
.progress-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.stage-track { display: flex; gap: 6px; margin-top: 14px; }
.stage-step { flex: 1; text-align: center; }
.stage-step .s-bar { height: 4px; border-radius: 99px; background: var(--surface-3); margin-bottom: 6px; }
.stage-step.done .s-bar { background: var(--success); }
.stage-step.active .s-bar { background: var(--accent); }
.stage-step span { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.stage-step.done span, .stage-step.active span { color: var(--text); }
.stage-step.failed .s-bar { background: var(--error); }
.stage-step.failed span { color: var(--error); }

/* ============ Start screen — the three ways to run the engine ============
   One card per run mode, sized so all three fit above the fold on a laptop.
   The card is the button; nothing inside it is separately clickable. */
.home-grid {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.home-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 20px; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.home-card:hover, .home-card:focus-visible {
  border-color: var(--accent-border); box-shadow: var(--shadow); transform: translateY(-2px);
  outline: none;
}
.home-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; margin-bottom: 2px;
  background: var(--accent-soft); color: var(--accent-strong);
}
.hc-icon svg { width: 20px; height: 20px; }
.hc-title { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; }
.hc-desc { font-size: 12.8px; line-height: 1.5; color: var(--text-muted); }
.hc-go {
  margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 700;
  color: var(--accent-strong);
}
.hc-go::after { content: " →"; }
.home-foot { font-size: 12.8px; color: var(--text-muted); max-width: 78ch; line-height: 1.6; }
.home-foot a { color: var(--accent-strong); font-weight: 600; }

/* ============ Tooltip — an info glyph that explains a metric on hover or focus ============ */
.tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; border-radius: 50%;
  color: var(--text-faint); cursor: help; outline: none;
}
.tip svg { width: 13px; height: 13px; }
.tip:hover, .tip:focus-visible { color: var(--accent-strong); }
.tip::after {
  content: attr(data-tip); position: absolute; left: -6px; bottom: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: 290px; padding: 8px 10px; border-radius: 8px;
  background: var(--text); color: var(--surface); box-shadow: var(--shadow);
  font-family: inherit; font-size: 11.6px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
  opacity: 0; pointer-events: none; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translateY(0); }
/* The last tile in a row sits at the content edge; grow its tooltip leftward instead. */
.summary-tile:last-child .tip::after { left: auto; right: -6px; }
.tip.tip-float::after { content: none; }
.kl-tip {
  position: fixed; z-index: 30; max-width: 380px; padding: 9px 11px; border-radius: 8px;
  background: var(--text); color: var(--surface); box-shadow: var(--shadow);
  font-size: 11.8px; font-weight: 500; line-height: 1.5; text-align: left; pointer-events: none;
}
.kl-tip-title { font-family: var(--font-mono); font-size: 10.8px; font-weight: 700; opacity: .78; margin-bottom: 4px; }
/* A value that carries the bubble itself instead of a glyph beside it: the
   dotted underline is the only thing telling a reader there is more here. */
.tip-text { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; outline-offset: 2px; }
.tip-text:hover, .tip-text:focus-visible { text-decoration-color: var(--accent); color: var(--accent-strong); }

/* ---- fired-rule chip: id + title, an info glyph, click opens the drawer ---- */
.rule-chip {
  display: inline-flex; align-items: center; margin: 0 6px 6px 0; vertical-align: top;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden;
}
.rule-chip .rc-main {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 0;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.rule-chip span.rc-main { cursor: default; }
.rule-chip button.rc-main:hover, .rule-chip button.rc-main:focus-visible { background: var(--surface-2); outline: none; }
.rule-chip .rc-id { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent-strong); }
.rule-chip .rc-name { font-size: 12.2px; font-weight: 500; }
.rule-chip .rc-info {
  width: auto; height: auto; margin: 0; padding: 0 7px; align-self: stretch; border-radius: 0;
  border-left: 1px solid var(--border); background: var(--surface-3); color: var(--text-muted);
}
.rule-chip .rc-info:hover, .rule-chip .rc-info:focus-visible { color: var(--accent-strong); background: var(--accent-soft); }
.report-artifacts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.report-artifacts .report-path { font-family: var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.report-artifacts .report-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.report-artifacts .report-files span { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-faint); }

table.history-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.history-table th { text-align: left; padding: 9px 14px; font-size: 10.8px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); border-bottom: 1px solid var(--border); font-weight: 700; }
table.history-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.history-table tr:last-child td { border-bottom: none; }
table.history-table tr:hover td { background: var(--surface-2); }
.run-id { font-family: var(--font-mono); font-size: 11.8px; color: var(--text-muted); }
.table-wrap-outer { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }

/* ============ Collapsible panels ============ */
.collapse-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; background: none; border: 0; border-radius: var(--radius);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.collapse-head:hover { background: var(--surface-2); }
.collapse-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.collapse-head .panel-title { margin: 0; }
.collapse-chevron { width: 13px; height: 13px; flex: none; color: var(--text-muted); transition: transform .16s ease; }
.collapse-head[aria-expanded="true"] .collapse-chevron { transform: rotate(90deg); color: var(--accent-strong); }
.collapse-head[aria-expanded="true"] { border-radius: var(--radius) var(--radius) 0 0; }
.collapse-sub { margin-left: auto; font-size: 11.5px; color: var(--text-faint); font-weight: 500; }
.collapse-body { padding: 14px 16px 16px; border-top: 1px solid var(--border); }

/* ============ JSON editor with syntax highlighting ============ */
.json-editor {
  position: relative; border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); overflow: hidden;
}
.json-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.json-editor.invalid { border-color: var(--error); }
.json-editor.invalid:focus-within { box-shadow: 0 0 0 3px var(--error-soft); }
.json-editor pre, .json-editor textarea {
  margin: 0; padding: 12px 14px; border: 0; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 2;
}
.json-editor pre { position: absolute; inset: 0; overflow: auto; pointer-events: none; color: var(--text); }
.json-editor textarea {
  position: relative; display: block; width: 100%; min-height: 210px; resize: vertical;
  background: transparent; color: transparent; caret-color: var(--text); overflow: auto;
  border-radius: 0;
}
.json-editor textarea:focus { outline: none; box-shadow: none; border-color: transparent; }
.json-editor textarea::selection { background: var(--accent-soft); color: transparent; }
.jt-key { color: var(--accent-strong); font-weight: 600; }
.jt-str { color: var(--success); }
.jt-num { color: var(--candidate); }
.jt-lit { color: var(--warning); font-weight: 700; }
.jt-punc { color: var(--text-faint); }
.json-editor-bar { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.json-status { font-family: var(--font-mono); font-size: 11.3px; color: var(--text-faint); }
.json-status.ok { color: var(--success); font-weight: 600; }
.json-status.bad { color: var(--error); font-weight: 700; }
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.3px; font-weight: 700; color: var(--accent-strong);
}
.btn-link:hover { text-decoration: underline; }

/* ============ Claim file upload (JSON / EDI) ============ */
.upload-zone.dragover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.upload-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.format-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; text-align: center;
  font-family: var(--font-mono); font-size: 10.8px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted);
}
.format-badge.fmt-json { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); }
.format-badge.fmt-edi { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.edi-pre {
  margin: 0; background: var(--surface-3); border-radius: 6px; padding: 12px 14px;
  font-family: var(--font-mono); font-size: 11.3px; line-height: 1.7;
  overflow: auto; max-height: 220px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.edi-seg-id { color: var(--accent-strong); font-weight: 700; }

/* ============ Full-size file viewer (uploaded claim / EDI) ============ */
.viewer-backdrop {
  position: fixed; inset: 0; background: rgba(10, 14, 20, 0.55);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 60;
}
.viewer-backdrop.open { opacity: 1; pointer-events: auto; }
.viewer-dialog {
  position: fixed; z-index: 61; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.985);
  width: min(1140px, 94vw); height: min(880px, 88vh);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.viewer-dialog.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.viewer-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.viewer-head h3 { font-size: 14px; font-family: var(--font-mono); font-weight: 700; }
.viewer-head .viewer-meta { font-family: var(--font-mono); font-size: 11.3px; color: var(--text-faint); }
.viewer-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.viewer-body { flex: 1; overflow: auto; padding: 16px 18px; background: var(--surface-3); }
.viewer-body pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  white-space: pre; tab-size: 2;
}
.viewer-body.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-modes { flex: none; }
.viewer-body.structured { background: var(--surface-2); }
.viewer-structured { padding: 2px 2px 24px; }
.viewer-note { padding: 8px 16px; border-bottom: 1px solid var(--border); flex: none;
  font-size: 11.5px; color: var(--warning); background: var(--warning-soft); }

/* ============ Claim inspector (Inspect › Claims) ============
   Master–detail: search a source on the left, read one claim on the right.
   The list is the navigation, so it keeps its own scroll and the detail
   pane scrolls independently — a 14k-claim corpus must not push the
   selected claim's header off screen while the operator reads its lines. */
.ci-modes { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 9px; gap: 2px; margin-bottom: 14px; }
.ci-mode {
  border: none; background: none; border-radius: 7px; cursor: pointer;
  padding: 7px 14px; min-height: 34px; display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  transition: background .16s ease, color .16s ease;
}
.ci-mode svg { width: 14px; height: 14px; flex: none; }
.ci-mode:hover { color: var(--text); }
.ci-mode[aria-selected="true"] { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow); }

.ci-layout {
  display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 16px;
  align-items: start; margin-top: 14px;
}
@media (max-width: 1080px) { .ci-layout { grid-template-columns: 1fr; } }

.ci-master { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ci-search-row { padding: 10px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.ci-search { position: relative; flex: 1; min-width: 0; }
.ci-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
.ci-search input { width: 100%; padding-left: 31px; }
.ci-count { padding: 7px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  font-size: 11.2px; font-weight: 700; color: var(--text-muted); display: flex; gap: 8px; align-items: center; }
.ci-count .num { font-family: var(--font-mono); color: var(--text); }
.ci-count .spacer { flex: 1; }

.ci-rows { max-height: 560px; overflow: auto; }
.ci-row {
  display: block; width: 100%; text-align: left; border: none; background: none;
  font-family: inherit; cursor: pointer; padding: 9px 12px;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.ci-row:hover { background: var(--surface-2); }
.ci-row[aria-selected="true"] { background: var(--accent-soft); border-left-color: var(--accent); }
.ci-row:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.ci-row-top { display: flex; align-items: baseline; gap: 8px; }
.ci-row-id { font-family: var(--font-mono); font-size: 12.2px; font-weight: 600; color: var(--accent-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ci-row-charge { font-family: var(--font-mono); font-size: 11.4px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.ci-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.4px; color: var(--text-muted); }
.ci-row-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-row-sub .sep { flex: none; opacity: .5; }
.ci-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ci-empty { padding: 34px 16px; text-align: center; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.ci-more { width: 100%; border: none; border-top: 1px solid var(--border); background: var(--surface-2);
  padding: 10px; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-strong); cursor: pointer; }
.ci-more:hover { background: var(--surface-3); }
.ci-more[disabled] { color: var(--text-faint); cursor: default; }

/* Skeleton rows: an index build walks the whole corpus, so the wait is real
   and a blank panel would read as an error. */
.ci-skeleton { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ci-skeleton i { display: block; height: 9px; border-radius: 4px; background: var(--surface-3); animation: ci-pulse 1.4s ease-in-out infinite; }
.ci-skeleton i + i { margin-top: 7px; width: 62%; }
@keyframes ci-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ci-skeleton i { animation: none; } }

.ci-detail { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; overflow: hidden; }
.ci-detail-head { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ci-detail-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); font-weight: 600;
  overflow-wrap: anywhere; }
.ci-detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; }
.ci-detail-title h2 { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ci-detail-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.ci-stat .k { font-size: 10.2px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.ci-stat .v { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }

.ci-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ci-tab {
  border: none; background: none; font-family: inherit; cursor: pointer;
  padding: 10px 13px; min-height: 40px; font-size: 12.4px; font-weight: 700; color: var(--text-muted);
  border-bottom: 2px solid transparent; transition: color .14s ease, border-color .14s ease;
}
.ci-tab:hover { color: var(--text); }
.ci-tab[aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.ci-tab .ci-tab-count { font-family: var(--font-mono); font-size: 10.6px; color: var(--text-faint); margin-left: 5px; }

.ci-pane { padding: 16px; max-height: 620px; overflow: auto; }
.ci-pane[hidden] { display: none; }
.ci-section + .ci-section { margin-top: 18px; }
.ci-section > h3 {
  font-size: 10.8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 9px; display: flex; align-items: center; gap: 8px;
}
.ci-section > h3::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.ci-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ci-kv > div { background: var(--surface); padding: 8px 11px; min-width: 0; }
.ci-kv dt { font-size: 10.4px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.ci-kv dd { font-family: var(--font-mono); font-size: 12.4px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.ci-kv dd.dim { color: var(--text-faint); font-weight: 400; }

.ci-party-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ci-party { border: 1px solid var(--border); border-radius: 7px; padding: 11px 12px; background: var(--surface); min-width: 0; }
.ci-party .role { font-size: 10.4px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-strong); }
.ci-party .name { font-size: 13px; font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.ci-party .name.dim { color: var(--text-faint); font-weight: 500; }
.ci-party dl { margin-top: 8px; display: grid; gap: 3px; }
.ci-party dl > div { display: flex; gap: 8px; font-size: 11.6px; }
.ci-party dt { color: var(--text-faint); flex: none; min-width: 74px; }
.ci-party dd { font-family: var(--font-mono); overflow-wrap: anywhere; min-width: 0; }

/* A service-line table is genuinely wide; it scrolls inside its own box so
   the page never scrolls sideways. */
.ci-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
.ci-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; }
.ci-table th {
  text-align: left; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 10.3px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.ci-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.ci-table tr:last-child td { border-bottom: none; }
.ci-table tbody tr:hover { background: var(--surface-2); }
.ci-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-table .code { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.ci-table .dim { color: var(--text-faint); }

.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 9px; border-radius: 20px; text-align: center;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font-family: var(--font-mono); font-size: 11.4px; font-weight: 600;
}
.ci-chip .pos { font-size: 9.6px; color: var(--text-faint); font-weight: 700; }
.ci-chip.primary { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent-strong); }

.ci-json-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ci-json-bar .spacer { flex: 1; }
.ci-json-note { font-size: 11.6px; color: var(--text-muted); line-height: 1.55; margin-bottom: 10px; }
.ci-json { margin: 0; background: var(--surface-3); border-radius: 7px; padding: 13px 15px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65; overflow: auto; max-height: 520px; }
.ci-json.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

.ci-placeholder { padding: 64px 24px; text-align: center; color: var(--text-muted); }
.ci-placeholder svg { width: 34px; height: 34px; color: var(--text-faint); opacity: .6; margin-bottom: 12px; }
.ci-placeholder strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 5px; }
.ci-placeholder p { font-size: 12.5px; line-height: 1.6; max-width: 42ch; margin: 0 auto; }

.ci-notice { border-radius: 7px; padding: 10px 13px; font-size: 12px; line-height: 1.55; margin-bottom: 14px; }
.ci-notice.warn { background: var(--warning-soft); color: var(--warning); }
.ci-notice.err { background: var(--error-soft); color: var(--error); }
.ci-notice.info { background: var(--accent-soft); color: var(--accent-strong); }
.ci-notice strong { font-weight: 800; }

.ci-runlist { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.ci-runitem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  padding: 10px 12px; cursor: pointer; font-family: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.ci-runitem:hover { background: var(--surface-2); }
.ci-runitem[aria-selected="true"] { border-color: var(--accent-border); background: var(--accent-soft); }
.ci-runitem .rsrc { font-family: var(--font-mono); font-size: 12.2px; font-weight: 600; color: var(--accent-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-runitem .rwhen { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); text-align: right; white-space: nowrap; }
.ci-runitem .rmeta { grid-column: 1 / -1; font-size: 11.4px; color: var(--text-muted); }

/* ============ Manual test cases ============ */
.manual-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 900px) { .manual-layout { grid-template-columns: 1fr; } }
.manual-rule-list { max-height: 480px; overflow: auto; padding: 4px 0 10px; }
.manual-rule-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; cursor: pointer; font-size: 12.5px;
}
.manual-rule-item:hover { background: var(--surface-2); }
.manual-rule-item.active { background: var(--accent-soft); }
.manual-rule-item .mrid { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); }
.manual-rule-item .mrcount { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* ============ Screen: Artifacts ============ */
.artifacts-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .artifacts-layout { grid-template-columns: 1fr; } }
.tree { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px; }
.tree-run { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.tree-run .tr-corpus { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-run .tr-stamp { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text-muted); }
.tree-item svg { width: 13px; height: 13px; flex: none; opacity: .8; margin-top: 2px; }
.tree-item:hover { background: var(--surface-2); }
.tree-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.tree-item .ti-text { flex: 1; min-width: 0; }
.tree-item .ti-top { display: flex; align-items: baseline; gap: 8px; }
.tree-item .ti-name { font-size: 12.3px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item.active .ti-name { font-weight: 700; }
.tree-item .ti-file { margin-top: 1px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item.active .ti-file { color: var(--accent-strong); opacity: .75; }
.tree-item .fsize { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

.artifact-view { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-height: 420px; min-width: 0; }
.artifact-view-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.artifact-view-head .avh-title { font-size: 13px; font-weight: 700; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.artifact-view-head .avh-title .avh-file { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.artifact-body { padding: 18px 22px; }
.artifact-body h2 { font-size: 15px; margin-bottom: 4px; }
.artifact-body h3 { font-size: 12.5px; margin: 18px 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.md-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.md-kv .kv-item { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; }
.md-kv .kv-item .k { font-size: 10.5px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; }
.md-kv .kv-item .v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin-top: 2px; }

table.findings-table { width: 100%; border-collapse: collapse; font-size: 12.3px; }
table.findings-table th { text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
table.findings-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
/* Numeric columns: the heading right-aligns with its digits, and tabular figures
   keep the ones/tens/hundreds stacked down the column. */
table.findings-table th.n, table.findings-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.findings-table td.n { font-family: var(--font-mono); }
/* Centered columns: a pill sits mid-column under a centered heading instead of
   hugging the left edge of a wide cell. Its label is centered by .pill itself. */
table.findings-table th.c, table.findings-table td.c { text-align: center; }

/* ============ Screen: Help hub ============ */
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.help-list li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.help-list li strong { color: var(--text); }

.help-hub { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) { .help-hub { grid-template-columns: 1fr; } }

.help-subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 70px; }
.help-subnav-item {
  display: flex; align-items: center; gap: 9px; text-align: left; width: 100%;
  padding: 9px 10px; border-radius: 7px; border: 1px solid transparent; background: none;
  color: var(--text-muted); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.help-subnav-item:hover { background: var(--surface-2); color: var(--text); }
.help-subnav-item.active { background: var(--accent-soft); color: var(--accent-strong); }

.help-content { min-width: 0; }
.help-pane[hidden] { display: none; }
.help-doc-loading { padding: 40px 0; text-align: center; color: var(--text-faint); font-size: 12.5px; font-weight: 600; }

/* Prose styling for guide docs converted from Markdown. Each guide is
   segmented into one <section class="help-section"> per H2 (JS —
   segmentHelpDoc) so a long doc reads as a set of short pages instead of
   one continuous scroll. The on-page TOC sits in a sticky right rail so
   it stays reachable while a section scrolls, and doubles as the
   section switcher (click a heading to jump straight to that page). */
.help-doc { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .help-doc { grid-template-columns: 1fr; } }

.help-toc {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto;
}
@media (max-width: 980px) { .help-toc { grid-column: 1; grid-row: 1; position: static; max-height: none; } }
.help-toc .panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-toc-progress { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.help-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; columns: 1; }
.help-toc a { display: block; font-size: 12.3px; font-weight: 600; color: var(--text-muted); text-decoration: none; padding: 6px 8px; border-radius: 6px; }
.help-toc a:hover { color: var(--text); background: var(--surface-2); }
.help-toc a.active { color: var(--accent-strong); background: var(--accent-soft); }

.help-doc-body { grid-column: 1; grid-row: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 34px; }
@media (max-width: 980px) { .help-doc-body { grid-row: 2; } }
.help-section[hidden] { display: none; }
.help-section { animation: help-section-in .18s ease; }
@media (prefers-reduced-motion: reduce) { .help-section { animation: none; } }
@keyframes help-section-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.help-section-pager { display: flex; align-items: stretch; gap: 12px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.help-section-pager .hsp-btn {
  display: flex; flex-direction: column; gap: 3px; max-width: 48%;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); cursor: pointer; text-align: left; font-family: var(--font-ui);
}
.help-section-pager .hsp-btn:hover { border-color: var(--border-strong); background: var(--accent-soft); }
.help-section-pager .hsp-btn.next { text-align: right; margin-left: auto; align-items: flex-end; }
.help-section-pager .hsp-dir { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.help-section-pager .hsp-title { font-size: 12.8px; font-weight: 700; color: var(--text); }
.help-doc-body h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 4px; scroll-margin-top: 80px; }
.help-doc-body h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; margin: 34px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.help-doc-body h1 + h2, .help-doc-body h2:first-child { border-top: none; padding-top: 0; margin-top: 8px; }
.help-doc-body h3 { font-size: 14.5px; font-weight: 700; margin: 22px 0 8px; scroll-margin-top: 80px; }
.help-doc-body h4 { font-size: 12.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 18px 0 6px; scroll-margin-top: 80px; }
.help-doc-body p { margin: 0 0 12px; font-size: 13.3px; line-height: 1.65; color: var(--text-muted); }
.help-doc-body p strong, .help-doc-body li strong { color: var(--text); }
.help-doc-body h1, .help-doc-body h2, .help-doc-body h3 { color: var(--text); }
.help-doc-body ul, .help-doc-body ol { margin: 0 0 12px; padding-left: 22px; font-size: 13.3px; line-height: 1.65; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.help-doc-body li > ul, .help-doc-body li > ol { margin: 4px 0 0; }
.help-doc-body a { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.help-doc-body a:hover { text-decoration: underline; }
.help-doc-body a.help-doc-link { cursor: pointer; }
.help-doc-body code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-3); border-radius: 4px; padding: 1px 5px; color: var(--accent-strong); }
.help-doc-body pre.code-block code { background: none; padding: 0; color: inherit; }
.help-doc-body .doc-ref { border-bottom: 1px dashed var(--border-strong); color: var(--text-muted); cursor: help; }
.help-doc-body hr { border: none; border-top: 1px solid var(--border); margin: 26px 0; }
.help-doc-body .table-wrap { overflow-x: auto; margin: 0 0 16px; }
.help-doc-body table.findings-table { font-size: 12px; }
.help-doc-body table.findings-table code { font-size: 11px; }
.help-doc-body .mermaid-wrap { background: var(--surface-2); border-radius: 8px; padding: 18px; margin: 0 0 16px; overflow-x: auto; text-align: center; }
.help-doc-body blockquote.callout {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; border-left: 3px solid var(--border-strong);
  background: var(--surface-2); font-size: 12.8px; color: var(--text-muted);
}
.help-doc-body blockquote.callout p { margin: 0; font-size: inherit; color: inherit; }
.help-doc-body blockquote.callout-tip { border-left-color: var(--accent); background: var(--accent-soft); }
.help-doc-body blockquote.callout-warn { border-left-color: var(--warning); background: var(--warning-soft); }
.help-doc-body blockquote.callout-status { border-left-color: var(--candidate); background: var(--candidate-soft); }

.json-pre { margin: 0; background: var(--surface-3); border-radius: 6px; padding: 14px 16px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65; overflow: auto; max-height: 520px; }
.jk { color: var(--accent-strong); } .js { color: var(--warning); } .jn { color: var(--candidate); }

/* ============ Screen: Logs ============ */
.log-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; }
.log-toolbar input[type="text"] { flex: 1; min-width: 180px; }
.log-stats { font-size: 11.8px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.live-toggle { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.switch { width: 30px; height: 17px; border-radius: 99px; background: var(--surface-3); position: relative; border: 1px solid var(--border-strong); flex: none; }
.switch::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--text-faint); top: 1px; left: 2px; transition: all .15s ease; }
.switch.on { background: var(--accent-soft); border-color: var(--accent); }
.switch.on::after { background: var(--accent); left: 15px; }

.level-bars { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.level-bars .lb { width: 5px; border-radius: 2px 2px 0 0; }

.log-layout { display: grid; grid-template-columns: 1fr; gap: 12px; }
.log-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: auto; max-height: 520px; }
table.log-table { width: 100%; border-collapse: collapse; font-size: 11.8px; font-family: var(--font-mono); }
table.log-table th { position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 8px 12px; font-size: 10.5px; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
table.log-table td { padding: 5px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
table.log-table tr:hover td { background: var(--surface-2); cursor: pointer; }
.lvl-INFO { color: var(--accent-strong); font-weight: 700; }
.lvl-WARN { color: var(--warning); font-weight: 700; }
.lvl-ERROR { color: var(--error); font-weight: 700; }
.lvl-DEBUG { color: var(--text-faint); font-weight: 700; }
.log-detail { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-3); padding: 14px 16px; font-family: var(--font-mono); font-size: 11.5px; white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }

/* ============ Screen: KPI ============ */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; }
.kpi-tile .k-label { font-size: 10.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.kpi-tile .k-value { font-size: 21px; font-weight: 800; font-family: var(--font-mono); margin-top: 4px; }
.kpi-tile .k-value.err { color: var(--error); }
.kpi-tile .k-value.warn { color: var(--warning); }
.kpi-tile .k-value.ok { color: var(--success); }
.kpi-tile .k-sub { font-size: 11.3px; color: var(--text-muted); margin-top: 2px; }

.latency-card { padding: 18px 20px; }
.latency-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin: 14px 0 6px; padding: 0 2px; }
.latency-chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.latency-chart .bar { width: 60%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent-strong), var(--accent)); }
.latency-chart .bar.hi { background: linear-gradient(180deg, var(--warning), color-mix(in srgb, var(--warning) 70%, var(--surface))); }
.latency-chart .bar-lbl { font-size: 10.5px; color: var(--text-faint); font-weight: 700; }
.latency-chart .bar-val { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }

.skill-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-top: 20px; }
.skill-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.skill-head .sk-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--candidate-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.skill-head .sk-icon svg { width: 18px; height: 18px; color: var(--candidate); }
.skill-head h3 { font-size: 14px; font-weight: 800; }
.skill-head p { font-size: 11.8px; color: var(--text-muted); margin: 2px 0 0; }
.skill-body { padding: 18px 20px; }

table.replica-table { width: 100%; border-collapse: collapse; font-size: 12.2px; }
table.replica-table th { text-align: left; padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
table.replica-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
table.replica-table th.n, table.replica-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
table.replica-table td.n { font-family: var(--font-mono); }
.match-ok { color: var(--success); font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.match-ok svg { width: 12px; height: 12px; }

.hist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.hist-row .h-label { width: 130px; font-family: var(--font-mono); font-size: 11.5px; flex: none; }
.hist-row .h-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hist-row .h-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.hist-row .h-val { width: 42px; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex: none; }

.interp-box { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; font-size: 12.5px; color: var(--text); margin-top: 14px; }
.interp-box strong { color: var(--accent-strong); }

/* ============ Claim-file wizard (upload → claims → rules → run → outcome) ============ */
/* `hidden` loses to a class that sets `display`, so opt these back out. */
.upload-meta[hidden], .field[hidden] { display: none; }

.wizard-steps { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.wz-step {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 158px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font: inherit; color: inherit; text-align: left;
  cursor: default; opacity: .55; transition: opacity .15s ease, border-color .15s ease;
}
.wz-step.reachable { opacity: 1; cursor: pointer; }
.wz-step.reachable:hover { border-color: var(--border-strong); }
.wz-step.active { opacity: 1; border-color: var(--accent-border); background: var(--accent-soft); }
.wz-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface);
}
.wz-step.active .wz-num { background: var(--accent); border-color: transparent; color: var(--accent-contrast); }
.wz-step.done .wz-num { background: var(--success); border-color: transparent; color: #fff; }
.wz-step.done .wz-num svg { width: 12px; height: 12px; }
.wz-label { display: flex; flex-direction: column; line-height: 1.25; font-size: 12.8px; font-weight: 800; }
.wz-label em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Pinned to the bottom of the viewport while its step is on screen, so the
   step's primary action (Choose rules / Run / See outcome) is always one
   click away no matter how long the list or findings table above it is.
   It unsticks at the end of the pane, landing in its natural position. */
.wizard-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-top: 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  position: sticky; bottom: 16px; z-index: 4; box-shadow: var(--shadow);
}
/* Masks the 16px the bar floats above the viewport edge, so a row of the
   table underneath never shows as a sliver below it. The footnote that
   follows the pane clears this by its own 30px top margin. */
.wizard-bar::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: calc(100% + 1px);
  height: 18px; background: var(--bg); pointer-events: none;
}
@media (max-height: 620px) {
  /* On a short viewport a pinned bar eats the list it belongs to; let it
     scroll away and give the rows the height back. */
  .wizard-bar { position: static; box-shadow: none; }
}
.wizard-bar .wb-text { display: flex; flex-direction: column; gap: 2px; }
.wizard-bar .wb-text strong { font-size: 13px; font-weight: 800; }
.wizard-bar .wb-text span { font-size: 12px; color: var(--text-muted); }
.wizard-bar .wb-actions { display: flex; gap: 8px; align-items: center; }

/* ---- claim selection list ---- */
.claim-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.claim-toolbar input[type="text"] { max-width: 280px; }
.claim-toolbar .spacer { flex: 1; }
/* Own scrollbar with a capped height — a claim file runs to hundreds of
   rows, and the wizard's primary action must not sit past all of them.
   Same pattern as .rule-table-wrap; the column head sticks while you scroll. */
.claim-list {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  max-height: clamp(260px, calc(100vh - 380px), 620px);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}
.claim-head, .claim-row {
  display: grid; align-items: center; gap: 12px; padding: 9px 14px;
  grid-template-columns: 18px minmax(96px, 0.9fr) minmax(110px, 1.1fr) minmax(110px, 1.2fr) 108px 44px 92px 16px;
}
.claim-head {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.claim-row { border-top: 1px solid var(--border); font-size: 12.4px; cursor: pointer; }
.claim-row:first-of-type { border-top: none; }
.claim-row:hover { background: var(--surface-2); }
.claim-row.picked { box-shadow: inset 3px 0 0 var(--accent); }
.claim-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.claim-row .cl-id { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); overflow-wrap: anywhere; }
.claim-row .cl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.claim-row .cl-dim { color: var(--text-muted); }
.claim-row .cl-num { font-family: var(--font-mono); font-size: 11.6px; text-align: right; }
.claim-row .cl-chev { width: 13px; height: 13px; color: var(--text-faint); transition: transform .15s ease; }
.claim-row.open .cl-chev { transform: rotate(90deg); color: var(--accent-strong); }
.claim-detail { padding: 4px 14px 16px 44px; border-top: 1px dashed var(--border); background: var(--surface-2); }
.claim-detail dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 12px 0 0; }
.claim-detail dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.claim-detail dd { margin: 2px 0 0; font-size: 12.3px; font-family: var(--font-mono); overflow-wrap: anywhere; }
.claim-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.code-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 7px; margin: 0 4px 4px 0; border-radius: 5px;
  background: var(--surface-3); color: var(--text-muted);
}
/* A chip that knows what its code means says so on hover — the dotted rule
   is the only thing separating it from a chip with no descriptor. */
.code-chip.tip-float { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; outline-offset: 2px; }
.code-chip.tip-float:hover, .code-chip.tip-float:focus-visible {
  color: var(--accent-strong); text-decoration-color: var(--accent);
}
.code-chip-more { background: transparent; color: var(--text-faint); font-weight: 500; padding-left: 2px; }

/* ---- outcome ---- */
.outcome-row { cursor: pointer; }
.outcome-row:hover td { background: var(--surface-2); }
.outcome-detail > td { background: var(--surface-2); padding: 0 10px 14px 10px; }
.finding-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 14px 0 2px;
}
.finding-head .panel-title { margin: 0; }
.finding-line {
  display: grid; grid-template-columns: 92px 76px 1fr; gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px solid var(--border); font-size: 12.2px;
}
.finding-line .fl-code { font-family: var(--font-mono); font-weight: 600; color: var(--accent-strong); }
.finding-line .fl-msg { color: var(--text-muted); }

.footnote { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }

/* ---------- Execution registry: the run picker shared by Artifacts, Log Viewer, and KPI ---------- */
.exec-picker-wrap { align-items: center; flex-wrap: wrap; }
.exec-picker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.exec-picker select { min-width: 300px; max-width: 44vw; font-family: var(--font-mono); font-size: 12px; }
.exec-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 26px 22px; color: var(--text-muted); font-size: 13px; background: var(--surface); margin-bottom: 16px; line-height: 1.55; }
.exec-empty strong { color: var(--text); }
.exec-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#cfOutLinks .exec-links { justify-content: center; }
.exec-kind { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-align: center; }
.tree-group { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.tree-run .tr-kind { display: block; margin-top: 5px; }
.artifact-meta { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.artifact-body .md h1, .artifact-body .md h2 { font-size: 15px; margin: 0 0 6px; }
.artifact-body .md h3 { font-size: 12.5px; margin: 18px 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.artifact-body .md h4 { font-size: 12.5px; margin: 14px 0 6px; }
.artifact-body .md p { font-size: 12.8px; margin: 0 0 10px; }
.artifact-body .md ul { margin: 0 0 12px; padding-left: 20px; font-size: 12.8px; }
.artifact-body .md li { margin: 3px 0; }
.artifact-body .md table { border-collapse: collapse; width: 100%; margin: 6px 0 16px; font-size: 12.3px; }
.artifact-body .md th { text-align: left; font-size: 10.8px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.artifact-body .md td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.8px; vertical-align: top; }
.artifact-body .md td:first-child { font-family: var(--font-ui); }
.artifact-body .md code { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.artifact-body .md pre { background: var(--surface-3); border-radius: 6px; padding: 12px 14px; font-family: var(--font-mono); font-size: 11.5px; overflow: auto; }
.artifact-body .md-table-wrap { overflow-x: auto; }
.log-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.3px; color: var(--text-muted); margin: 0 0 12px; }
.log-source .mono { color: var(--text); }
.log-paste { margin-bottom: 14px; }
.log-paste textarea { width: 100%; font-family: var(--font-mono); font-size: 11.5px; }
.log-table tbody tr.log-row { cursor: pointer; }
.log-table tbody tr.log-row.selected td { background: var(--accent-soft); }
.kpi-note { font-size: 11.5px; color: var(--text-muted); margin: 14px 0 0; }

/* ============ Field map (claim detail: source field → normalized field) ============
   One table per section of the claim; the kind tag names what the normalizer
   did, with a dot as the colour cue and the word as the meaning. */
.fm { min-width: 0; }
.fm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fm-search { position: relative; flex: 1 1 220px; min-width: 180px; max-width: 360px; }
.fm-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; }
.fm-search input { padding-left: 31px; min-height: 36px; }
.fm-kinds { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fm-kind {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 9px 3px 4px;
  border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface);
  font-family: inherit; cursor: pointer; color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  transition: background .14s ease, border-color .14s ease;
}
.fm-kind:hover { background: var(--surface-2); }
.fm-kind[aria-pressed="true"] { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text); }
.fm-kind b { font-family: var(--font-mono); font-weight: 700; }
.fm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); min-height: 32px; cursor: pointer; }
.fm-check input { width: 15px; height: 15px; accent-color: var(--accent-strong); }
.fm-check b { font-family: var(--font-mono); }
.fm-count { margin-left: auto; font-family: var(--font-mono); font-size: 11.3px; color: var(--text-faint); white-space: nowrap; }
.fm-wrap { background: var(--surface); }
.fm-table { min-width: 860px; }
.fm-table .fm-section th { text-align: left; padding: 10px 10px 6px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 11px; }
.fm-title { font-weight: 800; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.fm-base { margin-left: 10px; font-family: var(--font-mono); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-faint); }
.fm-path { font-family: var(--font-mono); font-size: 11.6px; font-weight: 600; color: var(--accent-strong); overflow-wrap: anywhere; }
.fm-path.dim, .fm-val.dim { color: var(--text-faint); font-weight: 400; }
.fm-val { font-family: var(--font-mono); font-size: 11.6px; overflow-wrap: anywhere; max-width: 260px; }
.fm-arrow { color: var(--text-faint); text-align: center; width: 24px; padding-left: 4px; padding-right: 4px; }
.fm-row.blank td { color: var(--text-faint); }
.fm-row.blank .fm-path { color: var(--text-muted); }
.fm-how { font-size: 11.3px; line-height: 1.5; min-width: 260px; width: 34%; }
.fm-table thead th:nth-child(1), .fm-table thead th:nth-child(4) { width: 16%; }
.fm-table thead th:nth-child(2), .fm-table thead th:nth-child(5) { width: 15%; }
.fm-tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 99px; text-align: center;
  background: var(--surface-3); color: var(--text); font-family: var(--font-mono); font-size: 10.6px; font-weight: 700; white-space: nowrap;
}
.fm-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.fm-tag.converted { background: var(--candidate-soft); }
.fm-tag.converted i { background: var(--candidate); }
.fm-tag.fallback { background: var(--warning-soft); }
.fm-tag.fallback i { background: var(--warning); }
.fm-tag.derived { background: var(--accent-soft); }
.fm-tag.derived i { background: var(--accent-strong); }
.fm-tag.unresolved { background: var(--error-soft); }
.fm-tag.unresolved i { background: var(--error); }
.fm-note { display: block; margin-top: 3px; color: var(--text-muted); }
.fm-empty { padding: 28px 16px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.fm-unread { margin-top: 14px; }
.fm-unread summary { cursor: pointer; font-size: 12.4px; font-weight: 700; color: var(--text-muted); padding: 8px 0; min-height: 36px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-unread summary b { font-family: var(--font-mono); }
.fm-unread summary .fm-note { display: inline; margin: 0; font-weight: 500; }
.fm-unread .ci-table-wrap { margin-top: 6px; }
.fm-unread-table { min-width: 420px; }
@media (prefers-reduced-motion: reduce) { .fm-kind { transition: none; } }

/* ============ Artifacts: sticky tree + structured report views (js/artifact-views.js) ============
   The tree stays pinned under the topbar while a long report scrolls;
   js/artifact-views.js measures the topbar into --topbar-h. Sections are
   native <details> styled like .collapse-head; tables reuse the console's
   type scale, with tabular figures on every numeric cell. */
:root { --topbar-h: 62px; }
@media (min-width: 901px) {
  .artifacts-layout .tree { position: sticky; top: calc(var(--topbar-h) + 14px); max-height: calc(100vh - var(--topbar-h) - 28px); overflow-y: auto; }
}
.tree-dl { display: flex; width: 100%; justify-content: center; margin: 4px 0 6px; }
.tree-dl[disabled] { opacity: .6; }
.artifact-view-head { flex-wrap: wrap; gap: 8px; }
.avh-actions { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
a.btn { text-decoration: none; }
.radio-tabs.radio-tabs-sm button { padding: 4px 10px; font-size: 11.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rs-head .artifact-meta { margin: 0; }
.rs-head-actions { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); }
.rs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.rs-tiles .kv-item { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.rs-tiles .k { font-size: 10.5px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rs-tiles .v { font-family: var(--font-mono); font-size: 15px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rs-tiles .v.err { color: var(--error); }
.rs-tiles .v.warn { color: var(--warning); }
.rs-tiles .v.ok { color: var(--success); }
.rs-tiles .s { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.rs-group { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 22px 0 10px; }
.rs-head + .rs-group, .rs-tiles + .rs-group { margin-top: 6px; }

details.rsec { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0 0 10px; }
details.rsec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text); border-radius: var(--radius); user-select: none; }
details.rsec > summary::-webkit-details-marker { display: none; }
details.rsec > summary:hover { background: var(--surface-2); }
details.rsec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
details.rsec[open] > summary { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--border); }
.rsec-chev { width: 13px; height: 13px; flex: none; color: var(--text-muted); transition: transform .16s ease; }
details.rsec[open] > summary .rsec-chev { transform: rotate(90deg); color: var(--accent-strong); }
.rsec-sub { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); font-weight: 500; white-space: nowrap; }
.rsec-body { padding: 12px 14px 14px; min-width: 0; }
.rsec-body .md h1, .rsec-body .md h2 { display: none; }
.rsec-body .md > :first-child { margin-top: 0; }
.rsec-body .md table { margin-bottom: 6px; }
.rs-sub { margin-top: 12px; }
.rs-sub:first-child { margin-top: 0; }
.rs-sub-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.rs-sub-title .rsec-sub { margin-left: 0; }

.rs-kv-cols { display: grid; grid-template-columns: 1fr; gap: 0 22px; }
@media (min-width: 900px) { .rs-kv-cols.two { grid-template-columns: 1fr 1fr; align-items: start; } }
table.rs-kv { width: 100%; border-collapse: collapse; font-size: 12.3px; }
table.rs-kv th { text-align: left; font-weight: 500; color: var(--text-muted); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border); width: 46%; vertical-align: top; }
table.rs-kv td { padding: 6px 0 6px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.8px; vertical-align: top; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
table.rs-kv tr:last-child th, table.rs-kv tr:last-child td { border-bottom: 0; }

.rs-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
table.rs-table { width: 100%; border-collapse: collapse; font-size: 12.2px; }
table.rs-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
table.rs-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
table.rs-table tbody tr:last-child > td { border-bottom: 0; }
table.rs-table th.n, table.rs-table td.n { text-align: right; font-family: var(--font-mono); font-size: 11.8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rs-table td.mono { font-family: var(--font-mono); font-size: 11.8px; }
table.rs-table tr.rs-row { cursor: pointer; }
table.rs-table tr.rs-row:hover > td { background: var(--surface-2); }
table.rs-table tr.rs-row[aria-expanded="true"] > td { background: var(--accent-soft); border-bottom-color: transparent; }
table.rs-table tr.rs-detail > td { background: var(--surface-2); padding: 12px 14px 14px 38px; }
table.rs-table tr.rs-detail .rs-wrap { background: var(--surface); }
.rs-th-exp, .rs-td-exp { width: 30px; padding-right: 0 !important; }
.rs-exp { width: 26px; height: 26px; border: 0; background: none; border-radius: 5px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: -4px 0; }
.rs-exp svg { width: 13px; height: 13px; transition: transform .16s ease; }
.rs-exp[aria-expanded="true"] svg { transform: rotate(90deg); color: var(--accent-strong); }
.rs-exp:hover { background: var(--surface-3); color: var(--text); }
.rs-exp:focus-visible { outline: 2px solid var(--accent); }
.rs-empty, .rs-empty-cell { color: var(--text-muted); font-size: 12.3px; margin: 0; }
.rs-nil { color: var(--text-faint); }
.rs-bool { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; line-height: 1.5; text-align: center; }
.rs-bool.yes { background: var(--accent-soft); color: var(--accent-strong); }
.rs-bool.no { background: var(--surface-3); color: var(--text-muted); }
.rs-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rs-chip { display: inline-block; font-family: var(--font-mono); font-size: 10.8px; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text-muted); white-space: nowrap; text-align: center; }
.rs-rule { font: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border: 0; border-radius: 99px; padding: 2px 8px; cursor: pointer; white-space: nowrap; line-height: 1.5; text-align: center; }
.rs-rule:hover, .rs-rule:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rs-rule.rs-rule-missing { background: var(--surface-3); color: var(--text-muted); cursor: default; }
/* A finding code the loaded pack can explain: dotted underline, and the
   shared .kl-tip bubble on hover or focus (see .tip-float). */
.rs-code { cursor: help; text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; outline-offset: 2px; }
.rs-code:hover, .rs-code:focus-visible { text-decoration-color: var(--accent); color: var(--text); }
.rs-chip-code { display: inline-flex; align-items: center; gap: 5px; background: transparent; padding: 0; }
.rs-chip-code .rs-code { background: var(--surface-3); color: var(--text-muted); border-radius: 99px; padding: 1px 7px; font-size: 10.8px; }
.rs-inline-json { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.rs-meta { color: var(--text-faint); font-size: 11px; }
.rs-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.rs-toolbar input[type="text"] { flex: 1; min-width: 160px; max-width: 340px; font-size: 12px; padding: 6px 10px; }
.rs-toolbar .rs-count { margin-left: auto; font-size: 11.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.rs-more { display: flex; justify-content: center; padding: 8px 0 0; }
.rs-more-n { color: var(--text-faint); font-weight: 500; }
.rs-hist { margin-top: 10px; }
.rs-hist .hist-row .h-label { width: 92px; font-size: 11px; }
.rs-hist .hist-row .h-val { width: 52px; }
.rs-warn { color: var(--warning); font-weight: 700; }
.rs-err { color: var(--error); font-weight: 700; }
.rs-note { font-size: 11.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.5; }
.rsec-body .rs-note:last-child, .rs-sub .rs-note:last-child { margin-bottom: 0; }
/* The plain-language line that says what a section's table is showing.
   Sits above the numbers, wider leading than .rs-note and measure-capped. */
.rs-desc { font-size: 12px; color: var(--text-muted); margin: 0 0 11px; line-height: 1.55; max-width: 88ch; }
.rs-sub .rs-desc { font-size: 11.5px; margin-bottom: 8px; }
.rsec-body > .rs-desc:last-child, .rs-sub .rs-desc:last-child { margin-bottom: 0; }
.rs-desc + .rs-note { margin-top: -4px; }
/* The claim block of an expanded record: the button that fetches identity
   sits on one line with the sentence explaining what it reads. */
.rs-claim-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rs-claim-err { color: var(--error); }
@media (prefers-reduced-motion: reduce) { .rsec-chev, .rs-exp svg { transition: none; } }

/* ============ Rule dependencies ============
   A selection that leaves out a rule another selected rule depends on is
   refused by the engine (KLM-SEL-006). The console names the gap where the
   operator is looking — a tag on the row, a count on its domain head, a chip
   line in the wizard bar — and the Run button opens a review that lists the
   missing rules pre-ticked. Tags keep body-colour text on a tinted ground:
   the tint is the cue, the words carry the meaning. */
.dep-tag {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px;
  border-radius: 999px; border: 1px solid; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; line-height: 1.5; color: var(--text); vertical-align: 1px; white-space: nowrap;
}
.dep-tag.dep-missing { border-color: var(--warning); background: var(--warning-soft); }
.dep-tag.dep-added { border-color: var(--accent-border); background: var(--accent-soft); }
.rule-row.dep-missing { box-shadow: inset 3px 0 0 var(--warning); }
.rule-row.dep-added { box-shadow: inset 3px 0 0 var(--accent); }
.domain-dep {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; color: var(--text); border: 1px solid var(--warning); background: var(--warning-soft);
}

/* The wizard bar's notice line: what is missing, as chips that open the rule
   drawer, and the same review the Run button opens. */
.wb-deps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wb-deps-icon { width: 14px; height: 14px; color: var(--warning); flex: none; }
.wb-deps-label { font-size: 12px; font-weight: 700; color: var(--text); margin-right: 2px; }
.dep-chip {
  font: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent-strong);
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer;
}
.dep-chip:hover, .dep-chip:focus-visible { background: var(--accent-soft); border-color: var(--accent-border); }
.wb-deps .btn { margin-left: 4px; }
.exec-error-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-muted); }

/* Rule drawer: what a rule sits on and what sits on it. */
.rule-chips { display: flex; flex-wrap: wrap; }
.rule-chip .rc-state {
  display: inline-flex; align-items: center; align-self: stretch; padding: 0 8px;
  border-left: 1px solid var(--border); background: var(--surface-3);
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.rule-chip.in-selection .rc-state { color: var(--accent-strong); background: var(--accent-soft); }

/* The review dialog. */
.dep-backdrop {
  position: fixed; inset: 0; background: rgba(10, 14, 20, 0.45);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 25;
}
.dep-backdrop.open { opacity: 1; pointer-events: auto; }
.dep-dialog {
  position: fixed; z-index: 26; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.985);
  width: min(720px, 94vw); max-height: min(760px, 88vh);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.dep-dialog.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .dep-backdrop, .dep-dialog { transition: none; }
  .dep-dialog { transform: translate(-50%, -50%); }
}
.dep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; flex: none; }
.dep-head h3 { font-size: 15px; }
.dep-intro { margin: 0; padding: 0 20px 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); flex: none; }
.dep-list { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dep-row {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 10px;
  padding: 10px 20px; border-top: 1px solid var(--border); background: var(--surface);
}
.dep-row:first-child { border-top: none; }
.dep-row input { accent-color: var(--accent); width: 15px; height: 15px; margin: 3px 0 0; cursor: pointer; }
.dep-row.unticked, .dep-row.orphan { background: var(--surface-2); }
.dep-row.unticked .dep-id, .dep-row.unticked .dep-name,
.dep-row.orphan .dep-id, .dep-row.orphan .dep-name { opacity: .55; }
.dep-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; }
.dep-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.dep-id { font-family: var(--font-mono); font-weight: 700; color: var(--accent-strong); }
.dep-name { font-size: 12.5px; color: var(--text); }
.dep-by { font-size: 11.5px; color: var(--text-muted); }
.dep-by b { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.dep-hint { font-size: 11.5px; font-weight: 700; color: var(--text); }
.dep-info {
  width: 28px; height: 28px; margin: -2px 0 0; border: 0; background: none; color: var(--text-faint);
  border-radius: 50%; cursor: help; display: inline-flex; align-items: center; justify-content: center;
}
.dep-info svg { width: 15px; height: 15px; }
.dep-info:hover, .dep-info:focus-visible { color: var(--accent-strong); background: var(--accent-soft); }
.dep-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; flex: none; }
.dep-summary { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.dep-summary b { color: var(--text); }
.dep-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }