/*
 * View styles — test explorer (Explorer artboard).
 * Scoped under .v-explorer. Shared primitives come from /ui/components.css.
 */

.v-explorer > .view-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.v-explorer .page-header {
  margin-bottom: 0;
}

.v-explorer .page-header__meta {
  margin-bottom: 0;
}

.v-explorer .page-header__title {
  margin-top: 6px;
}

.v-explorer .card {
  border-radius: var(--r-2);
  overflow: hidden;
}

.v-explorer .card__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-0);
}

.v-explorer .card__title {
  font-size: 0.9375rem;
}

.v-explorer .chip {
  padding: 3px 8px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}

.v-explorer__head-link {
  font-size: var(--fz-sm);
  white-space: nowrap;
}

.v-explorer__arrow-link {
  font-size: var(--fz-sm);
  font-weight: var(--fw-medium);
}

.v-explorer__sand-tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--sand-soft);
  color: var(--sand-ink);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
  white-space: nowrap;
}

/* --------------------------------------------------------------- coverage */

.v-explorer__coverage {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line-0);
  border-radius: var(--r-2);
}

.v-explorer__coverage-main {
  flex: 2 1 320px;
  min-width: 0;
  padding: var(--sp-5) var(--sp-6);
  border-right: 1px solid var(--line-0);
}

.v-explorer__label,
.v-explorer__kpis dt {
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.v-explorer__coverage-value {
  margin-top: 6px;
  font-size: var(--fz-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
}

.v-explorer__coverage-value .u-mono {
  font-weight: var(--fw-medium);
}

.v-explorer__coverage-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  margin-top: 14px;
}

.v-explorer__coverage-bar .is-pass {
  flex: 110 1 0;
  background: var(--signal);
}

.v-explorer__coverage-bar .is-fail {
  flex: 3 1 0;
  background: var(--bad);
}

.v-explorer__coverage-bar .is-flaky {
  flex: 2 1 0;
  background: var(--sand);
}

.v-explorer__coverage-note {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.v-explorer__kpis {
  display: flex;
  flex: 4 1 520px;
  flex-wrap: wrap;
  margin: 0;
}

.v-explorer__kpis > div {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border-right: 1px solid var(--line-0);
}

.v-explorer__kpis > div:last-child {
  border-right: 0;
}

.v-explorer__kpis dd {
  margin: 6px 0 0;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: var(--fz-3xl);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ suites + health */

.v-explorer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.v-explorer__suites-card {
  flex: 3 1 420px;
}

.v-explorer__health {
  flex: 2 1 300px;
}

.v-explorer__suites {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-explorer__suites li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px var(--sp-5);
  border-bottom: 1px solid var(--line-0);
}

.v-explorer__suite-name {
  color: var(--text-0);
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
}

.v-explorer__suite-count {
  margin-top: 2px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.v-explorer__suite-track {
  height: 6px;
  background: var(--sand-soft);
}

.v-explorer__suite-fill {
  display: block;
  height: 100%;
  background: var(--signal);
}

.v-explorer__suite-fill--checkout { width: 95.2%; }
.v-explorer__suite-fill--auth { width: 96.8%; }
.v-explorer__suite-fill--account { width: 95.8%; }
.v-explorer__suite-fill--cart { width: 94.4%; }

.v-explorer__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.v-explorer__health-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--sp-5);
}

.v-explorer__ring-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.v-explorer__ring {
  flex: none;
  width: 80px;
  height: 80px;
}

.v-explorer__ring-track,
.v-explorer__ring-value {
  fill: none;
  stroke-width: 8;
}

.v-explorer__ring-track {
  stroke: var(--sand-soft);
}

.v-explorer__ring-value {
  stroke: var(--signal);
  stroke-dasharray: 193.8 201;
}

.v-explorer__ring-number {
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 1.625rem;
}

.v-explorer__ring-label {
  color: var(--text-2);
  font-size: var(--fz-xs);
}

.v-explorer__health-defs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-0);
  font-size: var(--fz-sm);
}

.v-explorer__health-defs dt {
  color: var(--text-1);
}

.v-explorer__health-defs dd {
  margin: 0;
  color: var(--text-0);
  font-family: var(--font-mono);
}

.v-explorer__health-note {
  padding: 10px var(--sp-3);
  border-radius: var(--r-2);
  background: var(--paper-2);
  color: var(--text-2);
  font-size: var(--fz-xs);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- flaky */

.v-explorer__flaky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-explorer__flaky li {
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--line-0);
}

.v-explorer__flaky li:last-child {
  border-right: 0;
}

.v-explorer__flaky-name {
  margin-top: var(--sp-2);
  color: var(--text-0);
  font-size: var(--fz-md);
  font-weight: var(--fw-medium);
}

.v-explorer__flaky-meta {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fz-xs);
}

/* --------------------------------------------------------- suite detail */

.v-explorer__detail .card__head {
  align-items: flex-start;
}

.v-explorer__detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: 0;
  font-size: var(--fz-xs);
}

.v-explorer__detail-stats dt {
  color: var(--text-2);
}

.v-explorer__detail-stats dd {
  margin: 0;
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.v-explorer__tests {
  min-width: 720px;
}

.v-explorer .table thead th {
  padding: 10px var(--sp-3);
  border-bottom: 0;
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: var(--fz-xs);
  letter-spacing: 0;
}

.v-explorer .table tbody td {
  padding: var(--sp-3);
  border-top: 1px solid var(--line-0);
  border-bottom: 0;
  color: var(--text-1);
}

.v-explorer .v-explorer__tests th:first-child,
.v-explorer .v-explorer__tests td:first-child {
  padding-left: var(--sp-5);
}

.v-explorer .v-explorer__tests th:last-child,
.v-explorer .v-explorer__tests td:last-child {
  padding-right: var(--sp-5);
  text-align: right;
}

.v-explorer__test-name {
  display: block;
  color: var(--text-0);
  font-weight: var(--fw-medium);
}

.v-explorer__test-file {
  display: block;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--fz-2xs);
}

.v-explorer .table td.v-explorer__mono {
  color: var(--text-0);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .v-explorer > .view-main,
  .v-explorer__row {
    gap: var(--sp-4);
  }

  .v-explorer__coverage-main {
    flex-basis: 100%;
    padding: var(--sp-4);
    border-right: 0;
    border-bottom: 1px solid var(--line-0);
  }

  .v-explorer__kpis {
    flex-basis: 100%;
  }

  .v-explorer__kpis > div {
    flex: 1 1 50%;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line-0);
  }

  .v-explorer__kpis > div:nth-child(2n) {
    border-right: 0;
  }

  .v-explorer__kpis > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .v-explorer__kpis dd {
    font-size: var(--fz-2xl);
  }

  .v-explorer .card__head,
  .v-explorer__suites li,
  .v-explorer__foot,
  .v-explorer__health-body,
  .v-explorer__flaky li {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  .v-explorer__suites li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .v-explorer__suite-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .v-explorer__flaky li {
    border-right: 0;
    border-bottom: 1px solid var(--line-0);
  }

  .v-explorer__flaky li:last-child {
    border-bottom: 0;
  }

  .v-explorer__detail-stats {
    gap: var(--sp-4);
  }
}