/* Slingshot — Phase 1 visual foundation.
   See docs/ux_rethink.md §5 (visual language) and docs/ux_phase_1_plan.md §C.
   The `tc-` / `--tc-` prefixes are a legacy CSS namespace, kept to avoid a
   project-wide refactor; they are not user-visible. */

/* ── Section 1: Design tokens ──────────────────────────────────────────── */
:root {
  /* Base palette */
  --tc-color-bg: #F7F6F4;
  --tc-color-surface: #FFFFFF;
  --tc-color-border: #E5E3E0;
  --tc-color-text-primary: #1A1A1A;
  --tc-color-text-secondary: #6B6B6B;
  --tc-color-text-muted: #9B9B9B;
  --tc-color-accent: #2563EB;
  --tc-color-accent-hover: #1D4ED8;

  /* Left rail (dark, contrasting) */
  --tc-color-rail-bg: #1A1A1A;
  --tc-color-rail-text: #E5E3E0;
  --tc-color-rail-text-muted: #9B9B9B;
  --tc-color-rail-active: #2563EB;
  --tc-color-rail-hover: #2A2A2A;

  /* TC outcomes */
  --tc-outcome-passed: #16A34A;
  --tc-outcome-failed: #DC2626;
  --tc-outcome-errored: #D97706;
  --tc-outcome-skipped: #94A3B8;
  --tc-outcome-aborted: #374151;
  --tc-outcome-xfailed: #0D9488;
  --tc-outcome-xpassed: #7C3AED;
  --tc-outcome-running: #2563EB;
  /* Run-only outcomes */
  --tc-outcome-interrupted: #D97706;
  --tc-outcome-internal_error: #DC2626;
  --tc-outcome-usage_error: #DC2626;
  --tc-outcome-no_tests_collected: #94A3B8;

  /* Type */
  --tc-font-size-base: 14px;
  --tc-font-size-sm: 12px;
  --tc-font-size-mono: 13px;
  --tc-line-height-base: 1.45;

  /* Bootstrap 5 token overrides */
  --bs-body-bg: var(--tc-color-bg);
  --bs-body-color: var(--tc-color-text-primary);
  --bs-border-color: var(--tc-color-border);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.45;
  --bs-table-cell-padding-y: 4px;
  --bs-table-cell-padding-x: 8px;
  --bs-table-hover-bg: rgba(37, 99, 235, 0.04);
  --bs-link-color: var(--tc-color-accent);
  --bs-link-hover-color: var(--tc-color-accent-hover);
}

/* ── Section 2: Layout shell ───────────────────────────────────────────── */
body.tc-layout {
  display: grid;
  grid-template-rows: 40px 1fr;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  min-height: 100vh;
  margin: 0;
}

.tc-topbar  { grid-area: topbar; }
.tc-sidebar { grid-area: sidebar; }
.tc-main    { grid-area: main; overflow-y: auto; }

.tc-content {
  padding: 16px 24px;
}

.tc-footer {
  padding: 24px;
  margin-top: 32px;
  border-top: 1px solid var(--tc-color-border);
}

/* ── Section 3: Left rail ──────────────────────────────────────────────── */
.tc-sidebar {
  background: var(--tc-color-rail-bg);
  color: var(--tc-color-rail-text);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tc-nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-color-rail-text-muted);
  padding: 12px 16px 4px;
}

.tc-sidebar .tc-nav-link {
  display: block;
  padding: 6px 16px;
  color: var(--tc-color-rail-text);
  text-decoration: none;
  font-size: var(--tc-font-size-base);
  border-left: 2px solid transparent;
  transition: background 100ms ease, border-color 100ms ease;
}

.tc-sidebar .tc-nav-link:hover {
  background: var(--tc-color-rail-hover);
  color: #fff;
}

.tc-sidebar .tc-nav-link.active {
  background: var(--tc-color-rail-hover);
  border-left-color: var(--tc-color-rail-active);
  color: #fff;
}

/* ── Section 4: Top bar ────────────────────────────────────────────────── */
.tc-topbar {
  background: var(--tc-color-surface);
  border-bottom: 1px solid var(--tc-color-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.tc-topbar-tenant {
  font-size: var(--tc-font-size-base);
  color: var(--tc-color-text-primary);
}

.tc-topbar-spacer { flex: 1; }

/* ── Section 5: Outcome pill ───────────────────────────────────────────── */
.outcome-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--tc-font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.outcome-pill--passed   { background-color: var(--tc-outcome-passed); }
.outcome-pill--failed   { background-color: var(--tc-outcome-failed); }
.outcome-pill--errored  { background-color: var(--tc-outcome-errored); }
.outcome-pill--aborted  { background-color: var(--tc-outcome-aborted); }
.outcome-pill--xfailed  { background-color: var(--tc-outcome-xfailed); }
.outcome-pill--xpassed  { background-color: var(--tc-outcome-xpassed); }

.outcome-pill--skipped {
  background-color: transparent;
  color: var(--tc-outcome-skipped);
  border: 1px solid var(--tc-outcome-skipped);
}

.outcome-pill--running {
  background-color: transparent;
  color: var(--tc-outcome-running);
  border: 1px solid var(--tc-outcome-running);
  animation: tc-pulse 1.5s ease-in-out infinite;
}

.outcome-pill--interrupted        { background-color: var(--tc-outcome-interrupted); }
.outcome-pill--internal_error     { background-color: var(--tc-outcome-internal_error); }
.outcome-pill--usage_error        { background-color: var(--tc-outcome-usage_error); }
.outcome-pill--no_tests_collected {
  background-color: var(--tc-outcome-no_tests_collected);
  color: var(--tc-color-text-primary);
}

@keyframes tc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Section 6: Dashboard zone 1 run pill ──────────────────────────────── */
.tc-run-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 6px;
  color: var(--tc-color-text-primary);
  transition: border-color 100ms ease;
}

.tc-run-pill:hover {
  border-color: var(--tc-color-accent);
  color: var(--tc-color-text-primary);
}

/* ── Section 7: htmx swap fade-in ──────────────────────────────────────── */
.htmx-settling .table-container {
  animation: tc-fadein 150ms ease-in;
}

@keyframes tc-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dropdown buttons in dense tables — keep the actions column readable. */
.table .btn-sm {
  padding: 2px 6px;
}

/* ── Section 8: Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.tc-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  .tc-sidebar { display: none; }
}

/* ── Section 9: Phase 2 — Run-list row outcome left border ─────────────── */
/* Applied to <tr> via RunTable.row_attrs.class. Bootstrap collapses the
   left border on the first <td> inside the row, so paint it on the cells. */
tr[class*="tc-row-outcome--"] > td:first-child {
  border-left-style: solid;
  border-left-width: 3px;
}
tr.tc-row-outcome--passed             > td:first-child { border-left-color: var(--tc-outcome-passed); }
tr.tc-row-outcome--failed             > td:first-child { border-left-color: var(--tc-outcome-failed); }
tr.tc-row-outcome--errored            > td:first-child { border-left-color: var(--tc-outcome-errored); }
tr.tc-row-outcome--skipped            > td:first-child { border-left-color: var(--tc-outcome-skipped); }
tr.tc-row-outcome--aborted            > td:first-child { border-left-color: var(--tc-outcome-aborted); }
tr.tc-row-outcome--xfailed            > td:first-child { border-left-color: var(--tc-outcome-xfailed); }
tr.tc-row-outcome--xpassed            > td:first-child { border-left-color: var(--tc-outcome-xpassed); }
tr.tc-row-outcome--running            > td:first-child { border-left-color: var(--tc-outcome-running); }
tr.tc-row-outcome--interrupted        > td:first-child { border-left-color: var(--tc-outcome-interrupted); }
tr.tc-row-outcome--internal_error     > td:first-child { border-left-color: var(--tc-outcome-internal_error); }
tr.tc-row-outcome--usage_error        > td:first-child { border-left-color: var(--tc-outcome-usage_error); }
tr.tc-row-outcome--no_tests_collected > td:first-child { border-left-color: var(--tc-outcome-no_tests_collected); }

/* Expander button used to swap in the per-run failed-preview sub-row. */
.tc-row-expander {
  background: none;
  border: 0;
  padding: 0 4px;
  color: var(--tc-color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.tc-row-expander:hover { color: var(--tc-color-accent); }

/* Sub-row injected by hx-swap='afterend' when expanding a failed run. */
tr.tc-failed-preview > td {
  background: var(--tc-color-bg);
  padding: 8px 16px;
  border-top: 0;
}
.tc-failed-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--tc-font-size-sm);
}
.tc-failed-preview-list li {
  padding: 2px 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.tc-failed-preview-list a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--tc-color-text-primary);
  text-decoration: none;
}
.tc-failed-preview-list a:hover { color: var(--tc-color-accent); text-decoration: underline; }
.tc-failed-preview-empty {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
  margin: 0;
}

/* ── Section 10: Phase 2 — TCD chip ────────────────────────────────────── */
.tc-chip {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--tc-font-size-sm);
  font-weight: 500;
  color: var(--tc-color-text-primary);
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.tc-chip:hover {
  border-color: var(--tc-color-accent);
  color: var(--tc-color-accent);
}

/* ── Section 11: Phase 2 — Compact metadata strip (TC result detail) ───── */
.tc-metadata-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 4px;
  font-size: var(--tc-font-size-sm);
  margin-bottom: 12px;
}
.tc-metadata-strip .tc-metadata-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: var(--tc-color-text-primary);
}
.tc-metadata-strip .tc-metadata-label {
  color: var(--tc-color-text-muted);
  margin-right: 4px;
}
.tc-metadata-strip .tc-metadata-value {
  color: var(--tc-color-text-primary);
}

/* Breadcrumb (used on TC result detail). */
.tc-breadcrumb {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  margin: 0 0 8px 0;
}
.tc-breadcrumb a {
  color: var(--tc-color-accent);
  text-decoration: none;
}
.tc-breadcrumb a:hover { text-decoration: underline; }
.tc-breadcrumb-sep {
  margin: 0 6px;
  color: var(--tc-color-text-muted);
}

/* ── Section 12: Phase 2 — Log component ───────────────────────────────── */
.tc-log {
  counter-reset: tc-log-line;
  background: #0d1117;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--tc-font-size-mono);
  line-height: 1.45;
  margin: 0;
  padding: 8px 0;
  min-height: 200px;
  max-height: min(500px, 60vh);
  overflow: auto;
  border-radius: 4px;
  white-space: pre;
}
.tc-log .tc-log-line {
  display: block;
  padding: 0 12px 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: 12px;
  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;
}

@media (max-width: 767px) {
  .tc-log { height: 320px; }
}

/* ── Section 13: Phase 2 — 10-dot history strip ────────────────────────── */
.tc-history {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tc-color-border);
  border: 1px solid transparent;
}
.tc-dot--passed             { background: var(--tc-outcome-passed); }
.tc-dot--failed             { background: var(--tc-outcome-failed); }
.tc-dot--errored            { background: var(--tc-outcome-errored); }
.tc-dot--skipped            { background: var(--tc-outcome-skipped); }
.tc-dot--aborted            { background: var(--tc-outcome-aborted); }
.tc-dot--xfailed            { background: var(--tc-outcome-xfailed); }
.tc-dot--xpassed            { background: var(--tc-outcome-xpassed); }
.tc-dot--running            { background: var(--tc-outcome-running); }
.tc-dot--current {
  box-shadow: 0 0 0 2px var(--tc-color-bg), 0 0 0 3px var(--tc-color-accent);
}
.tc-history-empty {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
}

/* Renders structured JSON cards (custom_output, fixtures, notes). */
.tc-json-block {
  font-size: var(--tc-font-size-sm);
}
.tc-json-block dl { margin-bottom: 0; }
.tc-json-block dt {
  font-weight: 600;
  color: var(--tc-color-text-secondary);
}
.tc-json-block dd { margin-left: 20px; margin-bottom: 4px; }

/* ── Section 14: Phase 2.5 — Bootstrap form-control density override ──── */
:root {
  --bs-form-control-padding-y: 4px;
  --bs-form-control-padding-x: 8px;
  --bs-form-control-font-size: var(--tc-font-size-base);
}

.form-control, .form-select {
  height: 32px;
  padding: 4px 8px;
  font-size: var(--tc-font-size-base);
}

.form-label {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  margin-bottom: 2px;
  font-weight: 500;
}

/* Kill the doubled green-check "valid" affordance Bootstrap injects */
.form-control { background-image: none !important; padding-right: 8px !important; }

/* Keep only the chevron for selects — remove the green check */
.was-validated .form-select:valid,
.form-select.is-valid {
  background-image: var(--bs-form-select-bg-img) !important;
}

/* ── Section 15: Phase 2.5 — Page header component ─────────────────────── */
.tc-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--tc-color-border);
  min-height: 64px;
  gap: 16px;
}

.tc-page-header__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tc-page-header__title {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.tc-page-header__title .tc-mono {
  font-family: var(--bs-font-monospace);
  font-weight: 600;
}

.tc-page-header__subtitle {
  font-size: 13px;
  color: var(--tc-color-text-secondary);
}

/* Override the existing tc-breadcrumb (Phase 2 had it bigger) */
.tc-page-header .tc-breadcrumb {
  font-size: 11px;
  color: var(--tc-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.tc-page-header .tc-breadcrumb a { color: inherit; text-decoration: none; }
.tc-page-header .tc-breadcrumb a:hover { color: var(--tc-color-text-primary); }

.tc-breadcrumb__sep { margin: 0 6px; opacity: 0.5; }

.tc-page-header__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Adjust .tc-content so it doesn't double-pad below the page header */
.tc-content { padding: 16px 24px; }

/* ── Section 16: Phase 2.5 — Rail header (replaces top bar) ─────────────── */
.tc-rail-header {
  padding: 12px 16px;
  font-size: var(--tc-font-size-mono);
  font-family: var(--bs-font-monospace);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

/* ── Section 17: Phase 2.5 — Layout without top bar ────────────────────── */
/* Override Section 2 layout to drop topbar row */
body.tc-layout {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 220px 1fr;
  grid-template-areas: "sidebar main";
  min-height: 100vh;
  margin: 0;
}

/* ── Section 18: Phase 2.5 — Empty state ───────────────────────────────── */
.tc-empty-state {
  padding: 24px;
  border: 1px dashed var(--tc-color-border);
  border-radius: 6px;
  background: var(--tc-color-surface);
}

.tc-empty-state code {
  font-size: var(--tc-font-size-mono);
  padding: 1px 4px;
  background: var(--tc-color-bg);
  border-radius: 3px;
}

/* ── Section 19: Phase 2.5 — Dense filter row ───────────────────────────── */
.tc-filter-row {
  display: flex;
  gap: 8px;
  align-items: end;
  padding: 12px 24px;
  border-bottom: 1px solid var(--tc-color-border);
}

.tc-filter-field {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tc-filter-field--narrow { flex: 0 0 140px; }

/* ── Section 20: Phase 2.5 — Hover-reveal row actions ──────────────────── */
.tc-row-actions {
  display: inline-flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 100ms ease;
}

tr:hover .tc-row-actions,
tr:focus-within .tc-row-actions { opacity: 1; }

.tc-row-action {
  color: var(--tc-color-text-secondary);
  text-decoration: none;
  padding: 0 4px;
  font-size: 14px;
}

.tc-row-action:hover { color: var(--tc-color-text-primary); }
.tc-row-action--danger:hover { color: var(--tc-outcome-failed); }

.tc-count-link { color: var(--tc-color-accent); text-decoration: none; }
.tc-count-link:hover { text-decoration: underline; }

/* ── Section 21: Phase 2.5 — Metadata strip extras ─────────────────────── */
.tc-meta-item { display: inline-flex; align-items: center; gap: 6px; }

.tc-meta-label {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.tc-command-toggle { margin-top: 12px; font-size: var(--tc-font-size-sm); }
.tc-command-toggle summary { cursor: pointer; color: var(--tc-color-text-secondary); }

.tc-command-pre {
  font-size: var(--tc-font-size-mono);
  padding: 8px;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 4px;
  margin-top: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Section 22: Phase 2.5 — Log height fix ─────────────────────────────── */
/* Override Section 12: tc-log height */

/* ── Section 23: Phase 2.5 — Log context in failed preview ─────────────── */
.tc-log-context {
  font-family: var(--bs-font-monospace);
  font-size: var(--tc-font-size-sm);
}

/* Expander font-size bump */
.tc-row-expander { font-size: 14px; color: var(--tc-color-text-primary); }

/* ── Section 24: Phase 2.5 — Row-click navigation ──────────────────────── */
tr[data-href] { cursor: pointer; }

/* ── Section 25: Phase 3 — Dashboard zones 2 / 3 ───────────────────────── */
.tc-dashboard-zone1 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 12px;
}

.tc-dashboard-zone2 {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 24px;
  margin-top: 24px;
}

@media (max-width: 991px) {
  .tc-dashboard-zone2 { grid-template-columns: 1fr; }
}

.tc-dashboard-zone3 {
  margin-top: 24px;
}

.tc-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-color-text-muted);
  margin-bottom: 8px;
}

/* Failure list */
.tc-failure-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tc-failure-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tc-color-border);
  flex-wrap: wrap;
}

.tc-failure-row:last-child { border-bottom: 0; }

.tc-failure-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-primary);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-failure-name:hover { color: var(--tc-color-accent); text-decoration: underline; }

.tc-failure-count,
.tc-failure-time {
  white-space: nowrap;
  font-size: var(--tc-font-size-sm);
}

/* Flaky list */
.tc-flake-header {
  /* Cluster the section label with its controls on the left rather than
     pushing controls to the right edge — on a wide column the
     justify-content: space-between layout left a huge gap and stranded
     "Strict (same commit)" against the viewport edge. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.tc-flake-strict-toggle {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

.tc-flake-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tc-flake-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tc-color-border);
  flex-wrap: wrap;
}

.tc-flake-row:last-child { border-bottom: 0; }

.tc-flake-name {
  /* Don't flex-grow — natural width keeps the row's content (name → dots →
     ratio) clustered on the left of a wide column instead of stretching the
     name out and pinning the dots/ratio to the far right edge. Still allows
     shrinking + ellipsis for very long names. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-primary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-flake-ratio {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  border: 1px solid var(--tc-color-border);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}

/* Catalog health strip (zone 3) */
.tc-catalog-strip {
  display: block;
  padding: 10px 14px;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 6px;
  color: var(--tc-color-text-primary);
  text-decoration: none;
  font-size: var(--tc-font-size-base);
  transition: border-color 100ms ease;
}

.tc-catalog-strip:hover {
  border-color: var(--tc-color-accent);
  color: var(--tc-color-text-primary);
}

.tc-catalog-pct {
  color: var(--tc-color-text-muted);
}

/* ── Section 26: Phase 3 — Sparkline component ──────────────────────────── */
.tc-sparkline {
  display: inline-block;
  vertical-align: middle;
}

.tc-sparkline-line {
  fill: none;
  stroke: var(--tc-color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Section 27: Phase 3 — Coverage layout ──────────────────────────────── */
.tc-coverage-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
}

@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 10px;
  border-radius: 4px;
  color: var(--tc-color-text-primary);
  text-decoration: none;
  font-size: var(--tc-font-size-base);
  border-left: 2px solid transparent;
  transition: background 100ms ease;
}

.tc-coverage-tag-list a:hover {
  background: rgba(37, 99, 235, 0.06);
  color: var(--tc-color-accent);
}

.tc-coverage-tag-list a.active {
  border-left-color: var(--tc-color-accent);
  background: rgba(37, 99, 235, 0.06);
  color: var(--tc-color-accent);
  font-weight: 500;
}

.tc-coverage-tag-count {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
}

/* ── Section 28: Phase 3 — Coverage table + status pill ─────────────────── */
.tc-coverage-table th,
.tc-coverage-table td {
  vertical-align: middle;
}

.tc-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--tc-font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}

.tc-status--healthy {
  color: var(--tc-outcome-passed);
  background: rgba(22, 163, 74, 0.08);
}

.tc-status--degraded {
  color: var(--tc-outcome-errored);
  background: rgba(217, 119, 6, 0.08);
}

.tc-status--broken {
  color: var(--tc-outcome-failed);
  background: rgba(220, 38, 38, 0.08);
}

.tc-status--uncovered {
  color: var(--tc-color-text-muted);
  border: 1px dashed var(--tc-color-border);
  background: transparent;
}

/* ── Section 29: Chip widget ─────────────────────────────────────────────── */
.tc-chip-widget {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 2px 4px; border: 1px solid var(--tc-color-border); border-radius: 4px;
  background: var(--tc-color-surface); min-height: 32px;
}
.tc-chip-widget:focus-within { border-color: var(--tc-color-accent); }
.tc-chip-widget__chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px;
  font-size: var(--tc-font-size-sm); background: rgba(37, 99, 235, 0.08);
  color: var(--tc-color-accent); border-radius: 12px;
  font-family: var(--bs-font-monospace);
}
.tc-chip-widget__chip-remove { background: none; border: 0; color: var(--tc-color-accent);
  cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; }
.tc-chip-widget__chip-remove:hover { color: var(--tc-outcome-failed); }
.tc-chip-widget__chip--dup { animation: tc-chip-dup-flash 200ms ease; }
.tc-chip-widget input { flex: 1 1 60px; min-width: 60px; border: 0; outline: none;
  padding: 4px; height: auto; background: transparent; }
@keyframes tc-chip-dup-flash {
  0%, 100% { background: rgba(37, 99, 235, 0.08); }
  50%      { background: rgba(220, 38, 38, 0.18); }
}

/* ── Section 30: Char counter + bulk bar ─────────────────────────────────── */
.tc-char-counter { color: var(--tc-color-text-muted); }
.tc-char-counter--warn { color: var(--tc-outcome-errored); }
.tc-char-counter--over { color: var(--tc-outcome-failed); font-weight: 500; }

.tc-bulk-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: -8px -24px 8px;
  background: var(--tc-color-surface);
  border-bottom: 1px solid var(--tc-color-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.tc-bulk-bar[hidden] { display: none; }
.tc-bulk-bar__count { font-weight: 500; }
.tc-bulk-bar__clear { color: var(--tc-color-text-secondary); padding: 0 4px; }

/* ── Section 31: Keyboard help + focused row + rail-footer ───────────────── */
.tc-keyboard-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.tc-keyboard-help dt { font-family: var(--bs-font-monospace); }
.tc-keyboard-help dd { margin: 0; color: var(--tc-color-text-secondary); }
.tc-keyboard-help kbd {
  font-family: var(--bs-font-monospace); padding: 1px 5px;
  background: var(--tc-color-bg); border: 1px solid var(--tc-color-border);
  border-bottom-width: 2px; border-radius: 3px;
}

tr.tc-row-focused {
  background: rgba(37, 99, 235, 0.06);
  outline: 2px solid var(--tc-color-accent); outline-offset: -2px;
}
tr.tc-row-focused .tc-row-actions { opacity: 1; }

.tc-rail-footer {
  margin-top: auto;
  padding: 12px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.tc-rail-help {
  background: none;
  border: none;
  color: var(--tc-color-rail-text-muted);
  font-family: var(--bs-font-monospace);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
  opacity: 0.6;
}
.tc-rail-help:hover { color: var(--tc-color-rail-text); opacity: 1; }

/* ── Section 32: Progress bar + redesigned modal header ──────────────────── */
#tc-progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--tc-color-accent);
  width: 0%; z-index: 9999; opacity: 0;
  pointer-events: none; transform-origin: left center;
}
#tc-progress-bar[data-state="loading"] { opacity: 1; width: 80%; transition: width 6s cubic-bezier(0.1, 0.7, 0.1, 0.95); }
#tc-progress-bar[data-state="done"]    { opacity: 0; width: 100%; transition: width 200ms ease, opacity 400ms ease 200ms; }
#tc-progress-bar[data-state="error"]   { opacity: 1; width: 100%; background: var(--tc-outcome-failed); transition: width 200ms ease; }

.tc-modal-header--blocked {
  border-left: 3px solid var(--tc-outcome-failed);
  background: var(--tc-color-surface);
}
.tc-modal-sample-runs summary { cursor: pointer; }

/* ── Section 33: Zone empty state ────────────────────────────────────────── */
.tc-zone-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 140px; padding: 24px;
  border: 1px dashed var(--tc-color-border); border-radius: 6px;
  color: var(--tc-color-text-muted); text-align: center;
}
.tc-zone-empty__glyph { width: 36px; height: 36px; margin-bottom: 8px; opacity: 0.7; }
.tc-zone-empty__title { font-size: var(--tc-font-size-base); color: var(--tc-color-text-secondary); margin: 0; }
.tc-zone-empty__hint  { font-size: var(--tc-font-size-sm); margin: 4px 0 0; }

/* ── Section 34: Status filter chip strip ────────────────────────────────── */
.tc-active-filters { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 0; }
.tc-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  background: rgba(37, 99, 235, 0.08); color: var(--tc-color-accent);
  font-size: var(--tc-font-size-sm); text-decoration: none;
}
.tc-filter-chip:hover { background: rgba(37, 99, 235, 0.14); color: var(--tc-color-accent); }
.tc-status--link { text-decoration: none; cursor: pointer; }
.tc-status--link:hover { filter: brightness(0.92); }

/* ── Section 35: 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: 4px; }

/* ── Section 36: Flaky panel branch controls ─────────────────────────────── */
.tc-flake-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tc-flake-branch-select {
  width: auto; min-width: 120px; font-size: var(--tc-font-size-sm);
}
.tc-flake-branches { display: inline-flex; align-items: center; }
.tc-flake-branch {
  display: inline-flex; align-items: center;
  padding: 1px 6px; border-radius: 8px;
  background: var(--tc-color-bg);
  border: 1px solid var(--tc-color-border);
  font-size: 11px; color: var(--tc-color-text-secondary);
  white-space: nowrap;
}

/* ── Section 37: Run comparison ──────────────────────────────────────────── */
.tc-page-header__title-sep {
  margin: 0 8px; color: var(--tc-color-text-muted); font-weight: 400;
}
.tc-compare-chips { flex-wrap: wrap; }
.tc-filter-chip--active {
  background: var(--tc-color-accent); color: #fff;
}
.tc-filter-chip--active:hover { background: var(--tc-color-accent-hover); color: #fff; }
.tc-filter-chip--delta-regression    { background: rgba(220, 38, 38, 0.10); color: var(--tc-outcome-failed); }
.tc-filter-chip--delta-fixed         { background: rgba(22, 163, 74, 0.10); color: var(--tc-outcome-passed); }
.tc-filter-chip--delta-still_failing { background: rgba(217, 119, 6, 0.10); color: var(--tc-outcome-errored); }
.tc-filter-chip--delta-added         { background: rgba(13, 148, 136, 0.10); color: var(--tc-outcome-xfailed); }
.tc-filter-chip--delta-removed       { background: rgba(55, 65, 81, 0.10);  color: var(--tc-outcome-aborted); }

.tc-compare-table { table-layout: auto; }
.tc-compare-th-name    { width: 50%; }
.tc-compare-th-outcome { width: 15%; }
.tc-compare-th-delta   { width: 20%; }
.tc-compare-name { max-width: 0; }

.tc-compare-row--regression    > td { box-shadow: inset 3px 0 0 var(--tc-outcome-failed); }
.tc-compare-row--fixed         > td { box-shadow: inset 3px 0 0 var(--tc-outcome-passed); }
.tc-compare-row--still_failing > td { box-shadow: inset 3px 0 0 var(--tc-outcome-errored); }
.tc-compare-row--added         > td { box-shadow: inset 3px 0 0 var(--tc-outcome-xfailed); }
.tc-compare-row--removed       > td { box-shadow: inset 3px 0 0 var(--tc-outcome-aborted); }

.tc-compare-delta {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: var(--tc-font-size-sm); font-weight: 500; white-space: nowrap;
}
.tc-compare-delta--regression    { background: rgba(220, 38, 38, 0.10); color: var(--tc-outcome-failed); }
.tc-compare-delta--fixed         { background: rgba(22, 163, 74, 0.10); color: var(--tc-outcome-passed); }
.tc-compare-delta--still_failing { background: rgba(217, 119, 6, 0.10); color: var(--tc-outcome-errored); }
.tc-compare-delta--still_passing { color: var(--tc-color-text-muted); }
.tc-compare-delta--added         { background: rgba(13, 148, 136, 0.10); color: var(--tc-outcome-xfailed); }
.tc-compare-delta--removed       { background: rgba(55, 65, 81, 0.10); color: var(--tc-outcome-aborted); }
.tc-compare-delta--changed       { color: var(--tc-color-text-secondary); }

/* ── Section 40: Tag chip-widget suggestion dropdown ─────────────────────── */
.tc-chip-widget { position: relative; }  /* anchor for suggestion dropdown */
.tc-chip-widget__suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 1050;
  margin: 2px 0 0;
  padding: 2px 0;
  list-style: none;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  max-height: 240px;
  overflow-y: auto;
  font-size: var(--tc-font-size-base);
}
.tc-chip-widget__suggestions[hidden] { display: none; }
.tc-chip-widget__suggestion {
  padding: 4px 12px;
  cursor: pointer;
  font-family: var(--bs-font-monospace);
  color: var(--tc-color-text-primary);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tc-chip-widget__suggestion:hover,
.tc-chip-widget__suggestion.is-active {
  background: rgba(37, 99, 235, 0.10);
  color: var(--tc-color-accent);
}

/* ── Section 39: Source chip + priority pill (TCD provenance) ────────────── */
.tc-source-chip {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 8px;
  background: var(--tc-color-bg);
  border: 1px solid var(--tc-color-border);
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  white-space: nowrap;
}
.tc-source-chip .tc-mono { color: var(--tc-color-text-primary); }

.tc-priority {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: var(--tc-font-size-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.tc-priority--high   { background: rgba(220, 38, 38, 0.10); color: var(--tc-outcome-failed); }
.tc-priority--medium { background: rgba(217, 119, 6, 0.10); color: var(--tc-outcome-errored); }
.tc-priority--low    { background: rgba(148, 163, 184, 0.15); color: var(--tc-color-text-secondary); }

/* ── Section 38: Catalog activity tile ───────────────────────────────────── */
.tc-dashboard-zone4 { margin-top: 16px; }
.tc-activity-tile {
  display: flex; gap: 24px; align-items: center;
  padding: 12px 16px;
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 6px;
}
.tc-activity-total {
  flex: 0 0 auto; padding-right: 16px;
  border-right: 1px solid var(--tc-color-border);
  display: flex; flex-direction: column; gap: 2px;
}
.tc-activity-total strong { font-size: 22px; font-weight: 600; line-height: 1.1; }
.tc-activity-total-label {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tc-activity-buckets {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 24px; flex: 1; flex-wrap: wrap;
}
.tc-activity-bucket {
  display: flex; flex-direction: column; gap: 2px;
}
.tc-activity-bucket-label {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.tc-activity-bucket-value strong { font-size: 16px; font-weight: 600; }
.tc-activity-bucket--stale { margin-left: auto; }
.tc-activity-bucket-link {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--tc-color-text-primary);
  padding: 4px 8px; border-radius: 4px;
  transition: background 100ms ease;
}
.tc-activity-bucket-link:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--tc-color-text-primary);
}
.tc-activity-bucket-link:hover .tc-activity-bucket-value strong { color: var(--tc-outcome-failed); }

/* P0-2: test artifact attachments on the tcresult detail page */
.tc-artifact-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.tc-artifact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 6px;
  background: var(--tc-color-surface, #fff);
  border: 1px solid var(--tc-color-border, #E5E3E0);
}
.tc-artifact-thumb {
  display: block; width: 100%; height: 120px;
  object-fit: cover; border-radius: 4px; background: #f3f3f1;
}
.tc-artifact-icon {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 120px;
  font-size: 36px; text-decoration: none;
  background: #f3f3f1; border-radius: 4px;
}
.tc-artifact-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--tc-font-size-sm, 12px);
}
.tc-artifact-name {
  font-family: var(--bs-font-monospace);
  word-break: break-all; line-height: 1.2;
}
.tc-artifact-size, .tc-artifact-label {
  color: var(--tc-color-text-secondary, #666);
}

/* ── Section: Flake threshold alerts (P0-3-followup) ─────────────────── */
.tc-flake-alert {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFBF1 100%);
  border: 1px solid #F59E0B;
  border-radius: 4px;
  color: #92400E;
  font-size: 13px;
}
.tc-flake-alert__pulse {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #F97316;
  margin-left: 2px;
}
.tc-flake-alert__pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid #F97316;
  opacity: 0.5;
  animation: tc-flake-pulse 1.6s ease-out infinite;
}
@keyframes tc-flake-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.tc-flake-alert__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tc-flake-alert__title { font-weight: 600; }
.tc-flake-alert__detail {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: #92400E;
  opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-flake-alert__link {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  text-decoration: none;
  color: #92400E;
  border: 1px solid #F59E0B;
  padding: 3px 7px;
  border-radius: 3px;
}
.tc-flake-alert__link:hover { background: rgba(245, 158, 11, 0.10); color: #92400E; }

.tc-flake-rules {
  margin-top: 12px;
  border-top: 1px solid var(--tc-color-border);
  background: #FAFAF8;
  border-radius: 0 0 4px 4px;
  margin-left: -8px; margin-right: -8px;
  padding: 0 8px;
}
.tc-flake-rules__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 6px;
}
.tc-flake-rules__head h6 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--tc-color-text-secondary);
}
.tc-flake-rules__head a {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  text-decoration: none;
  color: var(--tc-color-accent);
}
.tc-rule-row {
  display: grid;
  grid-template-columns: 14px 1.4fr 2fr 1fr 1fr;
  gap: 10px; align-items: center;
  padding: 6px;
  border-top: 1px dashed var(--tc-color-border);
  font-size: 12px;
}
.tc-rule-led {
  width: 8px; height: 8px; border-radius: 50%;
  margin-left: 3px;
}
.tc-rule-row--armed .tc-rule-led {
  background: var(--tc-outcome-passed);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}
.tc-rule-row--firing .tc-rule-led {
  background: #F97316;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
}
.tc-rule-row--silenced .tc-rule-led {
  background: var(--tc-color-text-muted);
}
.tc-rule-name { font-weight: 500; font-size: 12px; }
.tc-rule-bar {
  position: relative;
  height: 4px;
  background: var(--tc-color-border);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}
.tc-rule-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--tc-color-accent);
}
.tc-rule-row--firing .tc-rule-bar__fill { background: #F97316; }
.tc-rule-bar__threshold {
  position: absolute; top: -2px; bottom: -2px;
  left: 100%;
  width: 1px;
  background: var(--tc-color-text-primary);
}
.tc-rule-expr {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--tc-color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-rule-expr code { background: transparent; padding: 0; }
.tc-rule-expr b { color: var(--tc-color-text-primary); font-weight: 600; }
.tc-rule-target {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--tc-color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-rule-fired {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  color: var(--tc-color-text-muted);
  text-align: right;
}
.tc-rule-row--firing .tc-rule-fired { color: #92400E; font-weight: 500; }

/* ── Section: TCD suite chip strip (P0-9) ─────────────────────────────── */
.tc-suite-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--tc-color-border);
  margin-bottom: 8px;
}
.tc-suite-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--tc-color-border);
  border-radius: 999px;
  background: var(--tc-color-surface);
  color: var(--tc-color-text-secondary);
  text-decoration: none;
  font-size: var(--tc-font-size-sm);
  font-weight: 500;
  line-height: 1.2;
}
.tc-suite-chip:hover {
  background: var(--tc-color-bg);
  color: var(--tc-color-text-primary);
}
.tc-suite-chip--active {
  background: var(--tc-color-text-primary);
  color: var(--tc-color-surface);
  border-color: var(--tc-color-text-primary);
}
.tc-suite-chip--active:hover {
  background: var(--tc-color-text-primary);
  color: var(--tc-color-surface);
}
.tc-suite-chip__count {
  font-family: var(--bs-font-monospace);
  font-size: 11px;
  opacity: 0.7;
}

/* ── Section: Global search (P0-8) ────────────────────────────────────── */
.tc-search {
  position: relative;
  width: 360px;
}
.tc-search__input {
  width: 100%;
  background: var(--tc-color-bg);
  border: 1px solid var(--tc-color-border);
  font-size: var(--tc-font-size-base);
}
.tc-search__input:focus {
  background: var(--tc-color-surface);
  outline: 2px solid rgba(37, 99, 235, 0.18);
  border-color: var(--tc-color-accent);
}
.tc-search__results {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 480px;
  z-index: 1050;
}
.tc-search-dropdown {
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  max-height: 540px;
  overflow-y: auto;
}
.tc-search-empty {
  padding: 16px;
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
}
.tc-search-empty code {
  background: var(--tc-color-bg);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 11px;
}
.tc-search-group {
  padding: 4px 0;
  border-top: 1px solid var(--tc-color-border);
}
.tc-search-group:first-child { border-top: 0; }
.tc-search-group__label {
  padding: 6px 12px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--tc-color-text-secondary);
}
.tc-search-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 12px;
  text-decoration: none;
  color: var(--tc-color-text-primary);
  border-left: 2px solid transparent;
}
.tc-search-item:hover,
.tc-search-item:focus {
  background: var(--bs-table-hover-bg, rgba(37,99,235,0.04));
  border-left-color: var(--tc-color-accent);
  color: var(--tc-color-text-primary);
}
.tc-search-item__primary {
  font-size: var(--tc-font-size-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-search-item__meta {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
}

/* ── Section 14: FEAT-1 — Flaky-test quarantine ────────────────────────── */

/* Inline "quarantined" badge (run-detail test name + flaky-suspect row). */
.tc-quarantine-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tc-outcome-errored);
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Quarantine list — status pills. */
.tc-quarantine-status {
  display: inline-block;
  padding: 1px 8px;
  font-size: var(--tc-font-size-sm);
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
}
.tc-quarantine-status--active {
  color: #fff;
  background: var(--tc-outcome-errored);
}
.tc-quarantine-status--released {
  color: var(--tc-color-text-secondary);
  background: transparent;
  border: 1px solid var(--tc-color-border);
}
.tc-quarantine-status--expired {
  color: var(--tc-color-text-secondary);
  background: var(--tc-color-bg);
  border: 1px dashed var(--tc-color-border);
}

/* Flaky-suspects panel — quarantine action button + badge. */
.tc-flake-quarantine-btn {
  padding: 0 8px;
  font-size: var(--tc-font-size-sm);
  line-height: 1.6;
  white-space: nowrap;
}
.tc-flake-quarantined {
  margin-left: 0;
}

/* Dashboard quarantine zone. */
.tc-dashboard-zone-quarantine {
  margin-top: 16px;
}
.tc-dashboard-zone-quarantine--empty {
  margin-top: 0;
}
.tc-quarantine-tile {
  background: var(--tc-color-surface);
  border: 1px solid var(--tc-color-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.tc-quarantine-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tc-quarantine-chips {
  display: flex;
  gap: 12px;
}
.tc-quarantine-tile__manage {
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.tc-quarantine-tile__manage:hover { text-decoration: underline; }
.tc-quarantine-tile__hint {
  margin: 10px 0 0;
  font-size: var(--tc-font-size-sm);
  color: var(--tc-color-text-muted);
}

/* Stat chip (active / still-failing counts). */
.tc-c-stat-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  border: 1px solid var(--tc-color-border);
  border-radius: 6px;
  text-decoration: none;
  background: var(--tc-color-bg);
  transition: border-color 100ms ease;
}
.tc-c-stat-chip:hover { border-color: var(--tc-color-accent); }
.tc-c-stat-chip__value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tc-color-text-primary);
}
.tc-c-stat-chip__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tc-color-text-muted);
}
.tc-c-stat-chip--alert {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.04);
}
.tc-c-stat-chip--alert .tc-c-stat-chip__value { color: var(--tc-outcome-failed); }

/* Still-failing drill-down list. */
.tc-quarantine-still-failing {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--tc-color-border);
}
.tc-quarantine-still-failing__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--tc-color-border);
  font-size: var(--tc-font-size-sm);
}
.tc-quarantine-still-failing__row:last-child { border-bottom: 0; }
.tc-quarantine-still-failing__row .tc-mono {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-quarantine-still-failing__run {
  color: var(--tc-color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.tc-quarantine-still-failing__run:hover { color: var(--tc-color-accent); }

/* Quarantine quick-pick (modal). */
.tc-quarantine-quickpick { white-space: nowrap; }