/* Phase 2 — page-level surfaces.
   Dashboard (recent runs strip, failures + flaky, catalog, activity) and the
   runs list. Each block targets the legacy class names emitted by today's
   templates, painted from v2 tokens. */


/* =========================================================================
 * Dashboard — KPI strip (24h headline tiles)
 * ========================================================================= */

.tc-c-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tc-s-3);
  margin: var(--tc-s-4) 0;
}
@media (max-width: 991px) {
  .tc-c-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tc-c-kpi {
  position: relative;
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  padding: var(--tc-s-3) var(--tc-s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  overflow: hidden;
}
[data-theme="stencil"] .tc-c-kpi { border-radius: 0; }

.tc-c-kpi .tc-t-eyebrow { margin: 0; }

.tc-c-kpi__value {
  font: 400 var(--tc-fs-28)/1.05 var(--tc-font-serif);
  letter-spacing: -0.01em;
  color: var(--tc-ink);
}
.tc-c-kpi__unit {
  font: 500 var(--tc-fs-12)/1 var(--tc-font-mono);
  color: var(--tc-ink-3);
  margin-left: 2px;
}

.tc-c-kpi__spark {
  width: 100%;
  height: 24px;
  margin-top: auto;
  display: block;
  color: var(--tc-ink-3);
}
.tc-c-kpi__spark .tc-sparkline-line { stroke: currentColor; }


/* =========================================================================
 * Dashboard — zone 1: recent run pills
 * ========================================================================= */

.tc-dashboard-zone1 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-s-2);
  padding: var(--tc-s-4) 0 var(--tc-s-3);
}

.tc-run-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-s-2);
  padding: 4px var(--tc-s-3);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  color: var(--tc-ink);
  text-decoration: none;
  font: 500 var(--tc-fs-12)/1 var(--tc-font-mono);
  transition: border-color var(--tc-dur-fast) var(--tc-ease),
              background var(--tc-dur-fast) var(--tc-ease);
}
.tc-run-pill:hover {
  border-color: var(--tc-link);
  background: var(--tc-panel-2);
  color: var(--tc-ink);
}
.tc-run-pill .text-muted, .tc-run-pill .small {
  color: var(--tc-ink-3) !important;
  font-size: var(--tc-fs-11);
}
[data-theme="stencil"] .tc-run-pill { border-radius: 0; }


/* =========================================================================
 * Dashboard — zone 2: two-column grid (failures · flaky)
 * ========================================================================= */

.tc-dashboard-zone2 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--tc-s-6);
  margin-top: var(--tc-s-6);
}
@media (max-width: 991px) {
  .tc-dashboard-zone2 { grid-template-columns: 1fr; }
}

.tc-section-label {
  font: 700 var(--tc-fs-10)/1 var(--tc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tc-ink-3);
  margin-bottom: var(--tc-s-2);
}


/* Dashboard column wrappers (used by zone 2). */
.tc-dashboard-col { display: flex; flex-direction: column; min-width: 0; }
.tc-dashboard-col--failures { gap: var(--tc-s-2); }
.tc-dashboard-col--flaky    { gap: var(--tc-s-2); }


/* History "no data" placeholder + sparkline empty placeholder. */
.tc-history-empty,
.tc-sparkline-empty {
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-3);
}

/* Bootstrap form-switch density. */
.tc-form-switch .form-check-input { width: 2em; height: 1em; margin-top: 0.2em; }
.tc-form-switch .form-check-label { margin-left: var(--tc-s-1); color: var(--tc-ink-2); }


/* =========================================================================
 * Recent failures list
 * ========================================================================= */

.tc-failure-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  background: var(--tc-panel);
  overflow: hidden;
}
[data-theme="stencil"] .tc-failure-list { border-radius: 0; }

.tc-failure-row {
  display: flex;
  align-items: center;
  gap: var(--tc-s-3);
  padding: 6px var(--tc-s-3);
  border-bottom: 1px solid var(--tc-rule);
}
.tc-failure-row:last-child { border-bottom: 0; }
.tc-failure-row:hover { background: var(--tc-panel-2); }

.tc-failure-name {
  flex: 1 1 0;
  min-width: 0;
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-mono);
  color: var(--tc-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-failure-name:hover { color: var(--tc-link); text-decoration: underline; }

.tc-failure-count, .tc-failure-time {
  white-space: nowrap;
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-3) !important;
}


/* =========================================================================
 * Flaky suspects list + ratio + branch chip
 * ========================================================================= */

.tc-flake-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-s-3);
  margin-bottom: var(--tc-s-2);
}

.tc-flake-controls {
  display: flex;
  align-items: center;
  gap: var(--tc-s-3);
  flex-wrap: wrap;
}

.tc-flake-branch-select {
  width: auto;
  min-width: 140px;
  height: 28px;
  font-size: var(--tc-fs-12);
  padding: 0 var(--tc-s-2);
}

.tc-flake-strict-toggle {
  display: flex;
  align-items: center;
  gap: var(--tc-s-1);
  font: 500 var(--tc-fs-12)/1 var(--tc-font-sans);
  color: var(--tc-ink-2);
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.tc-flake-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  background: var(--tc-panel);
  overflow: hidden;
}
[data-theme="stencil"] .tc-flake-list { border-radius: 0; }

.tc-flake-row {
  display: flex;
  align-items: center;
  gap: var(--tc-s-2);
  padding: 6px var(--tc-s-3);
  border-bottom: 1px solid var(--tc-rule);
  flex-wrap: wrap;
}
.tc-flake-row:last-child { border-bottom: 0; }
.tc-flake-row:hover { background: var(--tc-panel-2); }

.tc-flake-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-mono);
  color: var(--tc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-flake-ratio {
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-3);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-pill);
  padding: 1px 8px;
  white-space: nowrap;
  margin-left: auto;
}

.tc-flake-branches { display: inline-flex; align-items: center; }
.tc-flake-branch {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-1);
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-2);
  white-space: nowrap;
}


/* =========================================================================
 * Threshold-rule alert ribbon (zone 0)
 * ========================================================================= */

.tc-flake-alert {
  display: flex;
  align-items: center;
  gap: var(--tc-s-3);
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-warn-soft);
  border: 1px solid transparent;
  border-left: 3px solid var(--tc-warn);
  border-radius: var(--tc-r-2);
  margin-bottom: var(--tc-s-3);
  color: var(--tc-ink);
}
[data-theme="stencil"] .tc-flake-alert { border-radius: 0; }

.tc-flake-alert__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tc-warn);
  animation: tc-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.tc-flake-alert__body { flex: 1 1 auto; min-width: 0; }
.tc-flake-alert__title {
  font: 600 var(--tc-fs-13)/1.3 var(--tc-font-sans);
  color: var(--tc-ink);
  display: block;
}
.tc-flake-alert__detail {
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-2);
}
.tc-flake-alert__link {
  color: var(--tc-link);
  text-decoration: none;
  font: 500 var(--tc-fs-12)/1 var(--tc-font-mono);
  white-space: nowrap;
}
.tc-flake-alert__link:hover { text-decoration: underline; }


/* =========================================================================
 * Threshold-rule list rows
 * ========================================================================= */

.tc-flake-rules {
  margin-top: var(--tc-s-4);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  background: var(--tc-panel);
}
.tc-flake-rules__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--tc-s-2) var(--tc-s-3);
  border-bottom: 1px solid var(--tc-rule);
}
.tc-flake-rules__head h6 {
  margin: 0;
  font: 700 var(--tc-fs-10)/1 var(--tc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tc-ink-3);
}
.tc-flake-rules__head a {
  font: 500 var(--tc-fs-12)/1 var(--tc-font-mono);
  color: var(--tc-link);
  text-decoration: none;
}

.tc-rule-row {
  display: grid;
  grid-template-columns: auto 2fr 3fr 2fr 1fr;
  gap: var(--tc-s-3);
  align-items: center;
  padding: var(--tc-s-2) var(--tc-s-3);
  border-bottom: 1px solid var(--tc-rule);
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-mono);
}
.tc-rule-row:last-child { border-bottom: 0; }

.tc-rule-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tc-skip);
}
.tc-rule-row--ok       .tc-rule-led { background: var(--tc-pass); }
.tc-rule-row--warning  .tc-rule-led { background: var(--tc-warn); }
.tc-rule-row--breach   .tc-rule-led { background: var(--tc-fail); animation: tc-pulse 1.4s ease-in-out infinite; }
.tc-rule-row--silenced .tc-rule-led { background: var(--tc-ink-3); }

.tc-rule-name { font-weight: 600; color: var(--tc-ink); }
.tc-rule-bar {
  position: relative;
  height: 4px;
  background: var(--tc-rule);
  border-radius: var(--tc-r-1);
  margin-top: 4px;
  overflow: hidden;
}
.tc-rule-bar__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--tc-warn);
  transition: width var(--tc-dur-base) var(--tc-ease);
}
.tc-rule-bar__threshold {
  position: absolute; top: -2px; bottom: -2px; right: 0;
  width: 1px;
  background: var(--tc-fail);
}
.tc-rule-row--breach .tc-rule-bar__fill { background: var(--tc-fail); }
.tc-rule-row--ok     .tc-rule-bar__fill { background: var(--tc-pass); }

.tc-rule-expr code,
.tc-rule-expr b { color: var(--tc-ink); }
.tc-rule-target { color: var(--tc-ink-2); }
.tc-rule-fired { text-align: right; color: var(--tc-ink-3); white-space: nowrap; }


/* =========================================================================
 * Dashboard — zone 3: catalog rollup (donut + numbers)
 * ========================================================================= */

.tc-dashboard-zone3 { margin-top: var(--tc-s-6); }

.tc-c-catalog-rollup {
  display: flex;
  align-items: center;
  gap: var(--tc-s-4);
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  text-decoration: none;
  color: var(--tc-ink);
  transition: border-color var(--tc-dur-fast) var(--tc-ease);
}
.tc-c-catalog-rollup:hover { border-color: var(--tc-link); color: var(--tc-ink); }
[data-theme="stencil"] .tc-c-catalog-rollup { border-radius: 0; }

.tc-c-donut { width: 64px; height: 64px; flex-shrink: 0; }
.tc-c-donut__bg {
  fill: none;
  stroke: var(--tc-rule);
  stroke-width: 4;
}
.tc-c-donut__fg {
  fill: none;
  stroke: var(--tc-pass);
  stroke-width: 4;
  stroke-linecap: butt;
  pathLength: 100;
  transition: stroke-dasharray var(--tc-dur-base) var(--tc-ease);
}
.tc-c-donut__pct {
  font: 600 9px/1 var(--tc-font-mono);
  fill: var(--tc-ink);
  dominant-baseline: middle;
}

.tc-c-catalog-rollup__numbers {
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-sans);
  color: var(--tc-ink);
}
.tc-c-catalog-rollup__numbers strong { font-weight: 700; }


/* Legacy catalog strip kept for any other usage. */
.tc-catalog-strip {
  display: block;
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  color: var(--tc-ink);
  text-decoration: none;
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-sans);
  transition: border-color var(--tc-dur-fast) var(--tc-ease);
}
.tc-catalog-strip:hover { border-color: var(--tc-link); color: var(--tc-ink); }
.tc-catalog-pct { color: var(--tc-ink-3); }
[data-theme="stencil"] .tc-catalog-strip { border-radius: 0; }


/* =========================================================================
 * Dashboard — zone 4: catalog activity
 * ========================================================================= */

.tc-dashboard-zone4 { margin-top: var(--tc-s-4); }

.tc-activity-tile {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;
  gap: var(--tc-s-5);
  padding: var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  align-items: center;
}
[data-theme="stencil"] .tc-activity-tile { border-radius: 0; }
@media (max-width: 767px) {
  .tc-activity-tile { grid-template-columns: 1fr; }
}

.tc-activity-total strong {
  display: block;
  font: 400 var(--tc-fs-36)/1.05 var(--tc-font-serif);
  letter-spacing: -0.01em;
  color: var(--tc-ink);
}
.tc-activity-total-label {
  font: 700 var(--tc-fs-10)/1 var(--tc-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tc-ink-3);
}

.tc-activity-buckets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--tc-s-3);
}
.tc-activity-bucket {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tc-s-2) var(--tc-s-3);
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-1);
}
.tc-activity-bucket-label {
  font: 500 var(--tc-fs-11)/1 var(--tc-font-mono);
  color: var(--tc-ink-3);
}
.tc-activity-bucket-value strong {
  font: 600 var(--tc-fs-18)/1.1 var(--tc-font-mono);
  color: var(--tc-ink);
}
.tc-activity-bucket-value .text-muted {
  color: var(--tc-ink-3) !important;
  font-size: var(--tc-fs-11);
}
.tc-activity-bucket--stale { border-color: var(--tc-warn); }
.tc-activity-bucket-link { text-decoration: none; color: inherit; display: contents; }


/* =========================================================================
 * Zone empty state (failures + flaky + future zones)
 * ========================================================================= */

.tc-zone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: var(--tc-s-6);
  border: 1px dashed var(--tc-rule-2);
  border-radius: var(--tc-r-2);
  background: var(--tc-panel);
  color: var(--tc-ink-3);
  text-align: center;
}
[data-theme="stencil"] .tc-zone-empty { border-radius: 0; }
.tc-zone-empty__glyph {
  width: 36px;
  height: 36px;
  margin-bottom: var(--tc-s-2);
  color: var(--tc-ink-3);
  opacity: 0.7;
}
.tc-zone-empty__title {
  font: 600 var(--tc-fs-13)/1.3 var(--tc-font-sans);
  color: var(--tc-ink-2);
  margin: 0;
}
.tc-zone-empty__hint {
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-sans);
  margin: 4px 0 0;
  color: var(--tc-ink-3);
}


/* =========================================================================
 * Sparkline
 * ========================================================================= */

.tc-sparkline { display: inline-block; vertical-align: middle; }
.tc-sparkline-line {
  fill: none;
  stroke: var(--tc-ink-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================================
 * Runs list — filter row (chip-shaped fields)
 * ========================================================================= */

.tc-filter-row {
  display: flex;
  gap: var(--tc-s-3);
  align-items: end;
  padding: var(--tc-s-3) var(--tc-s-6);
  border-bottom: 1px solid var(--tc-rule);
  background: var(--tc-panel);
}
.tc-filter-field {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tc-filter-field--narrow { flex: 0 0 160px; }
.tc-filter-field .form-label {
  font: 700 var(--tc-fs-10)/1 var(--tc-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tc-ink-3);
  margin-bottom: 4px;
}
.tc-filter-field .form-control,
.tc-filter-field .form-select {
  height: 30px;
  font: 500 var(--tc-fs-13)/1 var(--tc-font-mono);
}


/* =========================================================================
 * Active filter chip strip (compare page + run list)
 * ========================================================================= */

.tc-active-filters {
  display: flex;
  align-items: center;
  gap: var(--tc-s-2);
  margin-bottom: var(--tc-s-2);
  padding: var(--tc-s-1) 0;
  flex-wrap: wrap;
}

.tc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--tc-s-2);
  border-radius: var(--tc-r-pill);
  background: var(--tc-panel-2);
  border: 1px solid var(--tc-rule);
  color: var(--tc-ink);
  font: 500 var(--tc-fs-12)/1.3 var(--tc-font-mono);
  text-decoration: none;
  white-space: nowrap;
}
.tc-filter-chip:hover { border-color: var(--tc-link); color: var(--tc-ink); }
[data-theme="stencil"] .tc-filter-chip { border-radius: 0; }

.tc-filter-chip--active {
  background: var(--tc-brand);
  color: var(--tc-brand-fg);
  border-color: transparent;
}
.tc-filter-chip--active:hover { background: var(--tc-brand-2); color: var(--tc-brand-fg); }

.tc-filter-chip--delta-regression    { background: var(--tc-fail-soft); color: var(--tc-fail); border-color: transparent; }
.tc-filter-chip--delta-fixed         { background: var(--tc-pass-soft); color: var(--tc-pass); border-color: transparent; }
.tc-filter-chip--delta-still_failing { background: var(--tc-warn-soft); color: var(--tc-warn); border-color: transparent; }
.tc-filter-chip--delta-added         { background: var(--tc-run-soft);  color: var(--tc-run);  border-color: transparent; }
.tc-filter-chip--delta-removed       { background: var(--tc-skip-soft); color: var(--tc-ink-2); border-color: transparent; }


/* =========================================================================
 * Bulk-action bar (TCD list)
 * ========================================================================= */

.tc-bulk-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--tc-s-2);
  padding: var(--tc-s-2) var(--tc-s-4);
  margin: calc(-1 * var(--tc-s-2)) calc(-1 * var(--tc-s-6)) var(--tc-s-2);
  background: var(--tc-panel);
  border-bottom: 1px solid var(--tc-rule);
  box-shadow: var(--tc-elev-1);
  font: 500 var(--tc-fs-13)/1 var(--tc-font-sans);
  color: var(--tc-ink);
}
.tc-bulk-bar[hidden] { display: none; }
.tc-bulk-bar__count { font-weight: 600; }
.tc-bulk-bar__clear { color: var(--tc-ink-3); padding: 0 var(--tc-s-1); text-decoration: none; }
.tc-bulk-bar__clear:hover { color: var(--tc-ink); }


/* =========================================================================
 * Compare page (already chip-styled above) — table row tinting
 * ========================================================================= */

.tc-compare-row--regression    > td { box-shadow: inset 3px 0 0 var(--tc-fail); }
.tc-compare-row--fixed         > td { box-shadow: inset 3px 0 0 var(--tc-pass); }
.tc-compare-row--still_failing > td { box-shadow: inset 3px 0 0 var(--tc-warn); }
.tc-compare-row--added         > td { box-shadow: inset 3px 0 0 var(--tc-run); }
.tc-compare-row--removed       > td { box-shadow: inset 3px 0 0 var(--tc-skip); }

.tc-compare-delta {
  display: inline-block;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-pill);
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  white-space: nowrap;
}
.tc-compare-delta--regression    { background: var(--tc-fail-soft); color: var(--tc-fail); }
.tc-compare-delta--fixed         { background: var(--tc-pass-soft); color: var(--tc-pass); }
.tc-compare-delta--still_failing { background: var(--tc-warn-soft); color: var(--tc-warn); }
.tc-compare-delta--still_passing,
.tc-compare-delta--changed       { color: var(--tc-ink-3); }
.tc-compare-delta--added         { background: var(--tc-run-soft);  color: var(--tc-run); }
.tc-compare-delta--removed       { background: var(--tc-skip-soft); color: var(--tc-ink-2); }


/* =========================================================================
 * Coverage list / status pills
 * ========================================================================= */

.tc-coverage-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--tc-s-6);
}
@media (max-width: 767px) {
  .tc-coverage-layout { grid-template-columns: 1fr; }
}
.tc-coverage-tag-list { list-style: none; padding: 0; margin: 0; }
.tc-coverage-tag-list li { margin-bottom: 2px; }
.tc-coverage-tag-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px var(--tc-s-3);
  border-radius: var(--tc-r-1);
  color: var(--tc-ink-2);
  text-decoration: none;
  font: 500 var(--tc-fs-13)/1 var(--tc-font-sans);
  border-left: 2px solid transparent;
}
.tc-coverage-tag-list a:hover { background: var(--tc-panel-2); color: var(--tc-ink); }
.tc-coverage-tag-list a.active {
  border-left-color: var(--tc-brand);
  background: var(--tc-panel-2);
  color: var(--tc-ink);
  font-weight: 600;
}
.tc-coverage-tag-count { color: var(--tc-ink-3); font-size: var(--tc-fs-11); }

.tc-status {
  display: inline-block;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-pill);
  font: 600 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-status--healthy   { color: var(--tc-pass); background: var(--tc-pass-soft); }
.tc-status--degraded  { color: var(--tc-warn); background: var(--tc-warn-soft); }
.tc-status--broken    { color: var(--tc-fail); background: var(--tc-fail-soft); }
.tc-status--uncovered { color: var(--tc-ink-3); border: 1px dashed var(--tc-rule-2); background: transparent; }


/* =========================================================================
 * TCD-related chips (priority, source) — tokens; full TCD port lands phase 4
 * ========================================================================= */

.tc-priority {
  display: inline-block;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-pill);
  font: 600 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tc-priority--high   { background: var(--tc-fail-soft); color: var(--tc-fail); }
.tc-priority--medium { background: var(--tc-warn-soft); color: var(--tc-warn); }
.tc-priority--low    { background: var(--tc-skip-soft); color: var(--tc-ink-2); }

.tc-source-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-1);
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  font: 500 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-2);
  white-space: nowrap;
}
.tc-source-chip .tc-mono { color: var(--tc-ink); }


/* =========================================================================
 * TCD list — suite chip strip
 * ========================================================================= */

.tc-suite-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tc-s-2);
  overflow-x: auto;
  padding: var(--tc-s-2) 0 var(--tc-s-3);
  margin-bottom: var(--tc-s-2);
  border-bottom: 1px solid var(--tc-rule);
  scrollbar-width: thin;
}

.tc-suite-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-s-2);
  padding: 4px var(--tc-s-3);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-pill);
  color: var(--tc-ink);
  font: 500 var(--tc-fs-12)/1.3 var(--tc-font-mono);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--tc-dur-fast) var(--tc-ease);
}
.tc-suite-chip:hover { border-color: var(--tc-link); color: var(--tc-ink); }
.tc-suite-chip--active {
  background: var(--tc-brand);
  border-color: transparent;
  color: var(--tc-brand-fg);
}
.tc-suite-chip--active:hover { background: var(--tc-brand-2); color: var(--tc-brand-fg); }
.tc-suite-chip__count {
  padding: 0 6px;
  border-radius: var(--tc-r-pill);
  background: rgba(0, 0, 0, 0.07);
  font: 700 var(--tc-fs-10)/1.4 var(--tc-font-mono);
  color: inherit;
}
[data-scheme="dark"] .tc-suite-chip__count { background: rgba(255, 255, 255, 0.10); }
.tc-suite-chip--active .tc-suite-chip__count { background: rgba(255, 255, 255, 0.22); }

[data-theme="stencil"] .tc-suite-chip,
[data-theme="stencil"] .tc-suite-chip__count { border-radius: 0; }


/* =========================================================================
 * TCD list — modal header tone (blocked / danger emphasis)
 * ========================================================================= */

.tc-modal-header--blocked {
  border-bottom: 1px solid var(--tc-rule);
  border-left: 3px solid var(--tc-fail);
  background: var(--tc-fail-soft);
}

.tc-modal-sample-runs summary {
  cursor: pointer;
  color: var(--tc-ink-2);
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-sans);
}


/* =========================================================================
 * Coverage page — sortable mini-line column tweaks
 * ========================================================================= */

.tc-coverage-table {
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-mono);
}
.tc-coverage-table .tc-mono { color: var(--tc-ink); }


/* =========================================================================
 * Threshold rule — metric picker (radio cards)
 *   Each card is a clickable radio with title + plain-language definition +
 *   example threshold suggestion. Selecting one paints a brand-coloured
 *   left rail and lifts the panel.
 * ========================================================================= */

.tc-c-metric-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tc-s-3);
}
@media (max-width: 767px) {
  .tc-c-metric-picker { grid-template-columns: 1fr; }
}

.tc-c-metric-card {
  display: flex;
  gap: var(--tc-s-3);
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-left: 3px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  cursor: pointer;
  transition: border-color var(--tc-dur-fast) var(--tc-ease),
              background var(--tc-dur-fast) var(--tc-ease);
}
.tc-c-metric-card:hover { border-color: var(--tc-rule-2); background: var(--tc-panel-2); }
.tc-c-metric-card.is-selected,
.tc-c-metric-card:has(input:checked) {
  border-color: var(--tc-rule-2);
  border-left-color: var(--tc-brand);
  background: var(--tc-panel);
  box-shadow: var(--tc-elev-1);
}
.tc-c-metric-card:focus-within {
  outline: none;
  box-shadow: var(--tc-focus);
}
[data-theme="stencil"] .tc-c-metric-card { border-radius: 0; }

.tc-c-metric-card input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--tc-brand);
  width: 16px;
  height: 16px;
}

.tc-c-metric-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--tc-s-1);
  min-width: 0;
}

.tc-c-metric-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tc-s-2);
}
.tc-c-metric-card__title .tc-mono {
  font: 600 var(--tc-fs-12)/1.2 var(--tc-font-mono);
  color: var(--tc-ink);
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-1);
  padding: 1px 6px;
}
[data-theme="stencil"] .tc-c-metric-card__title .tc-mono { border-radius: 0; }
.tc-c-metric-card__title-pretty {
  font: 600 var(--tc-fs-13)/1.2 var(--tc-font-sans);
  color: var(--tc-ink);
}

.tc-c-metric-card__desc {
  font: 500 var(--tc-fs-12)/1.5 var(--tc-font-sans);
  color: var(--tc-ink-2);
  margin: 0;
}
.tc-c-metric-card__desc code {
  font: 600 var(--tc-fs-11)/1.4 var(--tc-font-mono);
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-1);
  padding: 0 4px;
  color: var(--tc-ink);
}

.tc-c-metric-card__example {
  font: 500 var(--tc-fs-11)/1.45 var(--tc-font-mono);
  color: var(--tc-ink-3);
  margin: 0;
}
.tc-c-metric-card__example code {
  color: var(--tc-ink);
  background: transparent;
  padding: 0;
}


/* =========================================================================
 * Threshold rule — sentence editor preview chips
 * ========================================================================= */

.tc-c-rule-sentence {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-s-2);
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  margin: var(--tc-s-3) 0;
  font: 500 var(--tc-fs-13)/1.6 var(--tc-font-sans);
  color: var(--tc-ink-2);
}
[data-theme="stencil"] .tc-c-rule-sentence { border-radius: 0; }

.tc-c-rule-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--tc-s-2);
  border-radius: var(--tc-r-1);
  background: var(--tc-panel-2);
  border: 1px solid var(--tc-rule);
  color: var(--tc-ink);
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-mono);
  white-space: nowrap;
}
.tc-c-rule-chip--metric { background: transparent; color: var(--tc-ink); border-color: var(--tc-rule-2); }
.tc-c-rule-chip--op     { background: var(--tc-brand); color: var(--tc-brand-fg); border-color: transparent; }
.tc-c-rule-chip--value  { background: var(--tc-bg); color: var(--tc-ink); }
.tc-c-rule-chip--scope  { color: var(--tc-link); border-color: var(--tc-link); background: transparent; }


/* =========================================================================
 * Shared run — receipt header (centered, headline-style)
 * ========================================================================= */

.tc-c-share-receipt {
  margin: var(--tc-s-8) 0 var(--tc-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--tc-s-2);
}
.tc-c-share-receipt .tc-t-eyebrow { margin: 0; }
.tc-c-share-receipt__headline {
  font: 400 var(--tc-fs-36)/1.05 var(--tc-font-serif);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tc-ink);
}
.tc-c-share-receipt__sub {
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-mono);
  color: var(--tc-ink-3);
  margin: 0;
  word-break: break-all;
}


/* =========================================================================
 * Run detail — metadata strip, command toggle, JSON block, failed-preview
 * ========================================================================= */

.tc-command-toggle {
  margin-top: var(--tc-s-3);
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-sans);
  color: var(--tc-ink-2);
}
.tc-command-toggle summary {
  cursor: pointer;
  color: var(--tc-ink-2);
  padding: 4px 0;
  user-select: none;
}
.tc-command-toggle summary:hover { color: var(--tc-ink); }
.tc-command-toggle summary::marker { color: var(--tc-ink-3); }
.tc-command-toggle[open] summary { color: var(--tc-ink); }

.tc-command-pre {
  font: 500 var(--tc-fs-12)/1.45 var(--tc-font-mono);
  padding: var(--tc-s-3) var(--tc-s-4);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  margin: var(--tc-s-2) 0 0;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--tc-ink);
}
[data-theme="stencil"] .tc-command-pre { border-radius: 0; }

.tc-json-block {
  font: 500 var(--tc-fs-12)/1.45 var(--tc-font-mono);
  background: var(--tc-panel);
  border: 1px solid var(--tc-rule);
  border-radius: var(--tc-r-2);
  padding: var(--tc-s-3);
  color: var(--tc-ink);
}
[data-theme="stencil"] .tc-json-block { border-radius: 0; }
.tc-json-block dl { margin-bottom: 0; }
.tc-json-block dt { font-weight: 600; color: var(--tc-ink-3); }
.tc-json-block dd { margin: 0 0 4px var(--tc-s-4); }


/* Failed-preview subrow — emitted under each failed/errored TestCaseResult
   row by the table template override. 1-line excerpt + collapsible traceback. */
tr.tc-failed-preview > td {
  background: var(--tc-fail-soft);
  padding: var(--tc-s-2) var(--tc-s-4);
  border-top: 0;
  color: var(--tc-ink);
}
tr.tc-failed-preview[data-outcome="errored"] > td { background: var(--tc-err-soft); }

.tc-failed-preview-excerpt {
  font: 500 var(--tc-fs-12)/1.45 var(--tc-font-mono);
  color: var(--tc-fail);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
tr.tc-failed-preview[data-outcome="errored"] .tc-failed-preview-excerpt { color: var(--tc-err); }

.tc-failed-preview-details {
  margin-top: var(--tc-s-1);
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-sans);
}
.tc-failed-preview-details summary {
  cursor: pointer;
  color: var(--tc-ink-2);
  user-select: none;
  list-style-position: outside;
}
.tc-failed-preview-details summary:hover { color: var(--tc-ink); }
.tc-failed-preview-details[open] summary { color: var(--tc-ink); }
.tc-failed-preview-log {
  margin-top: var(--tc-s-2);
  max-height: 320px;
}
.tc-failed-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font: 500 var(--tc-fs-12)/1.45 var(--tc-font-mono);
}
.tc-failed-preview-list li {
  padding: 2px 0;
  display: flex;
  gap: var(--tc-s-2);
  align-items: center;
}
.tc-failed-preview-list a {
  color: var(--tc-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-failed-preview-list a:hover { color: var(--tc-fail); text-decoration: underline; }
.tc-failed-preview-empty {
  color: var(--tc-ink-3);
  font: 500 var(--tc-fs-12)/1.4 var(--tc-font-mono);
  margin: 0;
}
.tc-log-context {
  font: 500 var(--tc-fs-12)/1.45 var(--tc-font-mono);
  color: var(--tc-ink-2);
}


/* Compare page header sep + small numeric tag-count chip. */
.tc-page-header__title-sep {
  margin: 0 var(--tc-s-2);
  color: var(--tc-ink-3);
  font-weight: 400;
}
.tc-tag-count {
  margin-left: 4px;
  padding: 0 5px;
  font: 600 var(--tc-fs-10)/1.4 var(--tc-font-mono);
  color: inherit;
  background: rgba(0, 0, 0, 0.06);
  border-radius: var(--tc-r-pill);
}
[data-scheme="dark"] .tc-tag-count { background: rgba(255, 255, 255, 0.10); }


/* =========================================================================
 * Run-detail row hover-reveal "jump to TCD" affordance
 * (test path is selectable text; icon button surfaces on row hover only).
 * ========================================================================= */

.tc-c-test-path {
  user-select: text;
  color: var(--tc-ink);
  font: 500 var(--tc-fs-13)/1.4 var(--tc-font-mono);
}
.tc-c-jump-tcd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: var(--tc-s-2);
  border-radius: var(--tc-r-1);
  background: transparent;
  border: 1px solid var(--tc-rule);
  color: var(--tc-ink-3);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--tc-dur-fast) var(--tc-ease);
  vertical-align: middle;
}
tr:hover .tc-c-jump-tcd,
tr:focus-within .tc-c-jump-tcd { opacity: 1; }
.tc-c-jump-tcd:hover { color: var(--tc-link); border-color: var(--tc-link); }
.tc-c-jump-tcd:focus-visible { opacity: 1; outline: none; box-shadow: var(--tc-focus); }


/* =========================================================================
 * Keyboard help dialog + focused row + log panel
 * ========================================================================= */

.tc-keyboard-help dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--tc-s-4);
  margin: 0;
}
.tc-keyboard-help dt { font-family: var(--tc-font-mono); color: var(--tc-ink); }
.tc-keyboard-help dd { margin: 0; color: var(--tc-ink-2); }
.tc-keyboard-help kbd {
  font-family: var(--tc-font-mono);
  padding: 1px 5px;
  background: var(--tc-bg);
  border: 1px solid var(--tc-rule);
  border-bottom-width: 2px;
  border-radius: var(--tc-r-1);
  color: var(--tc-ink);
}

tr.tc-row-focused {
  background: var(--tc-run-soft);
  outline: 2px solid var(--tc-link);
  outline-offset: -2px;
}
tr.tc-row-focused .tc-row-actions { opacity: 1; }

.tc-log {
  counter-reset: tc-log-line;
  background: #0d1117;
  color: #e6edf3;
  font-family: var(--tc-font-mono);
  font-size: var(--tc-fs-13);
  line-height: 1.45;
  margin: 0;
  padding: var(--tc-s-2) 0;
  min-height: 200px;
  max-height: min(500px, 60vh);
  overflow: auto;
  border-radius: var(--tc-r-2);
  white-space: pre;
}
.tc-log .tc-log-line {
  display: block;
  padding: 0 var(--tc-s-3) 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.tc-log .tc-log-line::before {
  counter-increment: tc-log-line;
  content: counter(tc-log-line);
  display: inline-block;
  width: 4ch;
  margin-right: var(--tc-s-3);
  padding: 0 6px;
  text-align: right;
  color: #6e7681;
  border-right: 1px solid #30363d;
  user-select: none;
}
.tc-log .tc-log-line.tc-log-line--error { background: rgba(220, 38, 38, 0.15); }
.tc-log .tc-log-line.tc-log-line--error::before { color: #f85149; }