/*
 * karate-max enterprise traceability report (Track-2, K-RTM / D75) — the scorecard + RTM grid + glossary
 * overlay, layered on coverage.css design tokens (reused; same .k-coverage-ext scope + [data-theme]).
 * Self-contained, file://-openable: no Tailwind, no CDN. Alpine.js does the reactive rendering.
 */
[x-cloak] { display: none !important; }

/* header + glossary button */
.k-coverage-ext .k-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.k-coverage-ext .k-gloss-btn {
  flex: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--k-border);
  background: var(--k-card-bg); color: var(--k-fg);
}
.k-coverage-ext .k-gloss-btn:hover { border-color: var(--k-faint); }
.k-coverage-ext .k-info { cursor: pointer; color: var(--k-faint); margin-left: 4px; font-style: normal; }
.k-coverage-ext .k-info:hover { color: var(--k-fg); }
.k-coverage-ext .k-head-actions { display: flex; gap: 10px; align-items: center; flex: none; }
/* Matrix / Tree view toggle (a segmented control) */
.k-coverage-ext .k-viewtoggle { display: inline-flex; border: 1px solid var(--k-border); border-radius: 8px; overflow: hidden; }
.k-coverage-ext .k-viewtoggle button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 7px 14px;
  border: 0; background: var(--k-card-bg); color: var(--k-muted); border-right: 1px solid var(--k-border);
}
.k-coverage-ext .k-viewtoggle button:last-child { border-right: 0; }
.k-coverage-ext .k-viewtoggle button.k-on { background: var(--k-tag-bg); color: var(--k-fg-strong); }
/* CSV export button (in the filter toolbar) */
.k-coverage-ext .k-csv-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 12px;
  border-radius: 8px; border: 1px solid var(--k-border); background: var(--k-card-bg); color: var(--k-fg);
}
.k-coverage-ext .k-csv-btn:hover { border-color: var(--k-faint); }
/* deep-link to a covering test's source (T2) */
.k-coverage-ext a.k-testlink { font-size: 12px; color: var(--k-link, #2563eb); text-decoration: none; }
.k-coverage-ext a.k-testlink:hover { text-decoration: underline; }
/* the epic → feature → leaf hierarchy tree */
.k-coverage-ext .k-tree { margin: 6px 0 12px; }
.k-coverage-ext .k-tree-row { display: flex; gap: 7px; align-items: baseline; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--k-border); }
.k-coverage-ext .k-tree-row.k-clickable { cursor: pointer; }
.k-coverage-ext .k-tree-row.k-clickable:hover { background: var(--k-card-bg); }
.k-coverage-ext .k-tree-row .k-caret-leaf { color: var(--k-faint); }
.k-coverage-ext .k-tree-row .k-reqid { font-weight: 700; color: var(--k-fg-strong); }
.k-coverage-ext .k-tree-row .k-path { color: var(--k-fg-strong); }
.k-coverage-ext .k-tree-type { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--k-faint); }

/* confidence-to-ship scorecard */
.k-coverage-ext .k-scorecard {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch;
  border: 1px solid var(--k-border); border-left-width: 5px; border-radius: 12px;
  padding: 16px 20px; margin: 6px 0 20px; background: var(--k-card-bg);
}
.k-coverage-ext .k-sc-ready { border-left-color: var(--k-bar-fill); }
.k-coverage-ext .k-sc-conditional { border-left-color: #f59e0b; }
.k-coverage-ext .k-sc-block { border-left-color: #ef4444; }
.k-coverage-ext .k-verdict { flex: 1 1 220px; }
.k-coverage-ext .k-verdict-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--k-muted); }
.k-coverage-ext .k-verdict-val { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 2px 0; }
.k-coverage-ext .k-sc-ready .k-verdict-val { color: var(--k-ok-fg); }
.k-coverage-ext .k-sc-conditional .k-verdict-val { color: var(--k-warn-fg); }
.k-coverage-ext .k-sc-block .k-verdict-val { color: var(--k-no-fg); }
.k-coverage-ext .k-verdict-sub { font-size: 13px; color: var(--k-muted); }
.k-coverage-ext .k-verdict-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--k-link, #2563eb); text-decoration: none; }
.k-coverage-ext .k-verdict-link:hover { text-decoration: underline; }
.k-coverage-ext .k-riskcards { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.k-coverage-ext .k-riskcard {
  min-width: 78px; text-align: center; border-radius: 10px; padding: 8px 12px;
  border: 1px solid var(--k-border);
}
.k-coverage-ext .k-riskcard .k-num { font-size: 22px; font-weight: 700; }
.k-coverage-ext .k-riskcard .k-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--k-muted); }
.k-coverage-ext .k-riskcard.k-no { background: var(--k-no-bg); border-color: transparent; }
.k-coverage-ext .k-riskcard.k-warn { background: var(--k-warn-bg); border-color: transparent; }
.k-coverage-ext .k-riskcard.k-ok { background: var(--k-ok-bg); border-color: transparent; }

/* unified 3-source coverage strip */
.k-coverage-ext .k-srcstrip { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.k-coverage-ext .k-srcstrip .k-card { flex: 1 1 180px; }
.k-coverage-ext .k-srcstrip .k-unit { color: var(--k-muted); text-transform: none; }

/* the two differentiator panels: risk heatmap + eval independence */
.k-coverage-ext .k-panels { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.k-coverage-ext .k-panel { flex: 1 1 320px; border: 1px solid var(--k-border); border-radius: 12px; padding: 14px 16px; background: var(--k-card-bg); }
.k-coverage-ext .k-panel-h { display: flex; align-items: center; gap: 4px; }
.k-coverage-ext .k-panel h2 { margin: 0; font-size: 14px; }
.k-coverage-ext .k-panel .k-sub { margin: 2px 0 12px; }

/* heatmap */
.k-coverage-ext table.k-heat { width: 100%; border-collapse: separate; border-spacing: 4px; }
.k-coverage-ext .k-heat th { color: var(--k-muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em; padding: 2px 4px; border: 0; text-align: center; }
.k-coverage-ext .k-heat tbody th { text-align: right; }
/* The coloured badge lives on an inner .k-badge (fixed height, rounded), NOT the <td>: a uniform grid
   where colour is spent only on populated cells and 0-count cells recede to faint neutral. */
/* The cell reuses coverage.css risk classes (k-ok/k-no/k-warn/k-tag), so the GENERIC coverage.css
   rules for those classes leak onto this td. Two leaks, both reset here so only the .k-badge styles:
   (1) `.k-ok/.k-no/.k-warn { background }` would paint the td and bleed through a semi-transparent
   (empty) badge → `background: none`; (2) `.k-tag` is a PILL (`display:inline-block; margin; padding`)
   — LOW risk maps to k-tag, so without `display: table-cell; margin: 0` those LOW-row cells collapse
   out of the table (missing cells + stray spacing). */
.k-coverage-ext .k-heat td.k-cell { display: table-cell; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
.k-coverage-ext .k-heat td.k-cell .k-badge {
  display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 8px; text-align: center; font-weight: 700; font-size: 14px;
}
.k-coverage-ext .k-heat td.k-cell.k-ok .k-badge { background: var(--k-ok-bg); color: var(--k-ok-fg); }
.k-coverage-ext .k-heat td.k-cell.k-warn .k-badge { background: var(--k-warn-bg); color: var(--k-warn-fg); }
.k-coverage-ext .k-heat td.k-cell.k-no .k-badge { background: var(--k-no-bg); color: var(--k-no-fg); }
.k-coverage-ext .k-heat td.k-cell.k-tag .k-badge { background: var(--k-tag-bg); color: var(--k-tag-fg); }
/* 0-count cell: uniform size (fixed height on the flex badge — independent of content/padding), but
   recede to faint NEUTRAL so strong risk colour is spent only on cells that hold a real requirement. */
.k-coverage-ext .k-heat td.k-cell.k-cell-empty .k-badge { background: var(--k-border); opacity: .4; }
.k-coverage-ext .k-heat td.k-cell:hover .k-badge { outline: 2px solid var(--k-faint); }

/* eval-independence breakdown + trust gaps */
.k-coverage-ext .k-provbars { display: flex; gap: 8px; flex-wrap: wrap; }
.k-coverage-ext .k-provbar {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--k-border); border-radius: 8px; padding: 5px 9px;
}
.k-coverage-ext .k-provbar.k-on { border-color: var(--k-faint); background: var(--k-tag-bg); }
.k-coverage-ext .k-provbar .k-provn { font-weight: 700; font-size: 14px; }
.k-coverage-ext .k-trustgap { margin-top: 12px; border-top: 1px dashed var(--k-border); padding-top: 10px; }
.k-coverage-ext .k-trustgap .k-tg-head { font-size: 12.5px; font-weight: 700; color: var(--k-no-fg); margin-bottom: 4px; }

/* blockers */
.k-coverage-ext .k-blockers { margin: 0 0 18px; }
.k-coverage-ext .k-blockers .k-line { margin: 5px 0; }

/* filter toolbar (mirrors coverage-report.css) */
.k-coverage-ext .k-toolbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--k-card-bg); border: 1px solid var(--k-border); border-radius: 10px;
  padding: 10px 12px; margin: 10px 0 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.k-coverage-ext .k-toolbar input, .k-coverage-ext .k-toolbar select {
  font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--k-border);
  border-radius: 8px; background: var(--k-card-bg); color: var(--k-fg);
}
.k-coverage-ext .k-toolbar input[type=search] { flex: 1 1 240px; min-width: 160px; }
.k-coverage-ext .k-count { color: var(--k-muted); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* RTM rows + drill-down */
.k-coverage-ext tbody.k-itembody { border: 0; }
.k-coverage-ext tr.k-row { cursor: pointer; }
.k-coverage-ext tr.k-row:hover td { background: var(--k-card-bg); }
.k-coverage-ext .k-caret { display: inline-block; width: 12px; color: var(--k-faint); transition: transform .12s; }
.k-coverage-ext .k-caret.k-open { transform: rotate(90deg); }
.k-coverage-ext .k-name .k-reqid { font-weight: 700; color: var(--k-fg-strong); margin-right: 6px; }
.k-coverage-ext .k-name .k-path { color: var(--k-fg-strong); }
.k-coverage-ext .k-name .k-parent { color: var(--k-faint); font-size: 11px; margin-left: 8px; }
.k-coverage-ext tr.k-drill > td { background: var(--k-card-bg); padding: 8px 14px 14px 32px; }
.k-coverage-ext .k-drill h4 { margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--k-muted); }
.k-coverage-ext .k-prose { font-size: 13px; color: var(--k-fg); margin: 4px 0 8px; }
.k-coverage-ext .k-line { font-size: 12.5px; color: var(--k-fg); margin: 3px 0; display: flex; gap: 7px; align-items: baseline; }
.k-coverage-ext .k-empty { color: var(--k-faint); padding: 28px; text-align: center; font-size: 13px; }
.k-coverage-ext code { font-size: 12px; background: var(--k-tag-bg); color: var(--k-tag-fg); padding: 1px 5px; border-radius: 4px; }

/* criticality / provenance / posture chips */
.k-coverage-ext .k-crit { font-size: 11px; padding: 1px 7px; border-radius: 4px; font-weight: 600; }
.k-coverage-ext .k-crit-high { background: var(--k-no-bg); color: var(--k-no-fg); }
.k-coverage-ext .k-crit-med { background: var(--k-warn-bg); color: var(--k-warn-fg); }
.k-coverage-ext .k-crit-low { background: var(--k-tag-bg); color: var(--k-tag-fg); }
.k-coverage-ext .k-prov { font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.k-coverage-ext .k-prov.k-ok { background: var(--k-ok-bg); color: var(--k-ok-fg); }
.k-coverage-ext .k-prov.k-warn { background: var(--k-warn-bg); color: var(--k-warn-fg); }
.k-coverage-ext .k-prov.k-tag { background: var(--k-tag-bg); color: var(--k-tag-fg); }
.k-coverage-ext .k-posture { font-size: 11px; color: var(--k-muted); }

/* glossary overlay */
.k-coverage-ext .k-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px;
}
.k-coverage-ext .k-modal {
  background: var(--k-card-bg); color: var(--k-fg); border: 1px solid var(--k-border);
  border-radius: 14px; width: 100%; max-width: 680px; max-height: 84vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.k-coverage-ext .k-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--k-border); position: sticky; top: 0; background: var(--k-card-bg);
}
.k-coverage-ext .k-modal-head h2 { margin: 0; }
.k-coverage-ext .k-x { font-size: 24px; line-height: 1; cursor: pointer; border: 0; background: none; color: var(--k-muted); }
.k-coverage-ext .k-x:hover { color: var(--k-fg); }
.k-coverage-ext .k-modal-body { padding: 8px 20px 20px; }
.k-coverage-ext .k-gloss-group { padding: 12px 12px; border-radius: 10px; margin: 10px 0; }
.k-coverage-ext .k-gloss-group h3 { margin: 0 0 2px; font-size: 14px; }
.k-coverage-ext .k-gloss-group .k-sub { margin: 0 0 10px; }
.k-coverage-ext .k-gloss-term { display: flex; gap: 10px; align-items: baseline; margin: 7px 0; font-size: 13px; }
.k-coverage-ext .k-gloss-term .k-pill, .k-coverage-ext .k-gloss-term .k-crit { flex: none; min-width: 92px; text-align: center; }
.k-coverage-ext .k-gloss-hi { outline: 2px solid var(--k-bar-fill); transition: outline-color .3s; }

/* attested evidence (D96, MODEL §2b) — @ai machine claims from harness sessions on criterion rows */
.k-coverage-ext .k-ai {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--k-tag-bg); color: var(--k-tag-fg); border: 1px dashed var(--k-border);
  text-transform: none; letter-spacing: 0;
}
.k-coverage-ext .k-evidence { margin: 4px 0 8px 26px; display: flex; flex-direction: column; gap: 6px; }
.k-coverage-ext .k-ev { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.k-coverage-ext .k-ev-shot {
  width: 96px; max-height: 60px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--k-border); display: block;
}
.k-coverage-ext .k-ev-shot:hover { outline: 2px solid var(--k-bar-fill); }
.k-coverage-ext .k-ev-shotless { font-size: 16px; }
.k-coverage-ext .k-ev-note { color: var(--k-fg); }

/* T4: sortable matrix columns (click a header; 2nd click flips, 3rd resets to authored order) */
.k-coverage-ext table th.k-sortable { cursor: pointer; user-select: none; }
.k-coverage-ext table th.k-sortable:hover { color: var(--k-fg-strong); }
.k-coverage-ext .k-sort { margin-left: 3px; font-size: 10px; color: var(--k-fg-strong); }

/* T1: the bidirectional requirement × test cross-grid */
.k-coverage-ext .k-grid-wrap { overflow-x: auto; margin: 6px 0 12px; }
.k-coverage-ext table.k-grid { border-collapse: collapse; width: auto; min-width: 60%; }
.k-coverage-ext .k-grid th, .k-coverage-ext .k-grid td { border: 1px solid var(--k-border); padding: 4px 8px; }
.k-coverage-ext .k-grid th.k-grid-req {
  text-align: left; white-space: nowrap; position: sticky; left: 0; z-index: 1;
  background: var(--k-card-bg); font-weight: 400;
}
.k-coverage-ext .k-grid thead th.k-grid-req { font-weight: 600; }
.k-coverage-ext .k-grid th.k-grid-req .k-reqid { font-weight: 700; color: var(--k-fg-strong); }
.k-coverage-ext .k-grid th.k-grid-req .k-path { color: var(--k-muted); }
.k-coverage-ext .k-grid th.k-grid-test { vertical-align: bottom; padding: 8px 4px 6px; }
.k-coverage-ext .k-grid-test-lbl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  max-height: 150px; overflow: hidden; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--k-muted); margin: 0 auto;
}
.k-coverage-ext .k-grid-test-lbl a { color: var(--k-link, #2563eb); text-decoration: none; }
.k-coverage-ext .k-grid-test-lbl a:hover { text-decoration: underline; }
.k-coverage-ext td.k-grid-cell { text-align: center; font-weight: 700; font-size: 12px; min-width: 28px; }
.k-coverage-ext td.k-grid-cell.k-ok { background: var(--k-ok-bg); color: var(--k-ok-fg); }
.k-coverage-ext td.k-grid-cell.k-no { background: var(--k-no-bg); color: var(--k-no-fg); }
.k-coverage-ext td.k-grid-cell.k-warn { background: var(--k-warn-bg); color: var(--k-warn-fg); }
/* oracle-only (D194) — indigo pill, distinct from COVERED green */
.k-coverage-ext .k-pill.k-sim,
.k-coverage-ext .k-heat td.k-cell.k-sim .k-badge,
.k-coverage-ext td.k-grid-cell.k-sim { background: var(--k-sim-bg); color: var(--k-sim-fg); }

/* T2: the gaps & drift worklist (rides the k-blockers panel styling) */
.k-coverage-ext .k-gaps .k-gap-group { margin: 8px 0 0; }
.k-coverage-ext .k-gaps h4 { margin: 8px 0 4px; font-size: 12.5px; color: var(--k-fg-strong); }