/* ─────────────────────────────────────────────────────────────────────────────
   Results, runs, failures and dashboard.

   Everything here composes from the design system's tokens — no hex values, no
   px font sizes, no off-grid spacing. Light and dark both come free because the
   tokens carry the theme.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Outcome colour map ──────────────────────────────────────────────────────
   One place that says what "passed", "failed" and "flaky" look like, so a bar,
   a chart column, a dot and a legend swatch can never drift apart. */
.qp-outcome-pass   { --qp-outcome: var(--qp-pass); --qp-outcome-bg: var(--qp-pass-bg); }
.qp-outcome-fail   { --qp-outcome: var(--qp-fail); --qp-outcome-bg: var(--qp-fail-bg); }
.qp-outcome-flaky  { --qp-outcome: var(--qp-warn); --qp-outcome-bg: var(--qp-warn-bg); }
.qp-outcome-skip   { --qp-outcome: var(--qp-neutral); --qp-outcome-bg: var(--qp-neutral-bg); }
.qp-outcome-run    { --qp-outcome: var(--qp-info); --qp-outcome-bg: var(--qp-info-bg); }

/* ── Pass / fail / flaky mini-bar ───────────────────────────────────────────── */
.qp-ratio {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    min-width: 0;
}

.qp-ratio__track {
    display: flex;
    flex: 1 1 auto;
    min-width: 48px;
    max-width: 120px;
    height: 6px;
    border-radius: var(--qp-radius-full);
    overflow: hidden;
    background: var(--qp-surface-sunken);
}

.qp-ratio__seg {
    height: 100%;
    background: var(--qp-outcome);
    transition: width var(--qp-duration-base) var(--qp-ease);
}

.qp-ratio__label {
    flex: 0 0 auto;
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.qp-ratio--lg .qp-ratio__track { height: 10px; max-width: none; }

/* Identifiers and timestamps must never wrap mid-token — "QP-000017" split over two lines is unreadable. */
.qp-nowrap { white-space: nowrap; }

/* ── Summary band on the run page ───────────────────────────────────────────── */
.qp-summary {
    display: grid;
    /* Narrow enough that the five counters stay on one row in a split or narrowed layout. */
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: var(--qp-space-1);
    padding: var(--qp-space-4) var(--qp-space-5);
    background: var(--qp-surface);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
}

.qp-summary__cell {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-1);
    padding: var(--qp-space-2) var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
}

.qp-summary__value {
    font-size: var(--qp-text-2xl);
    font-weight: var(--qp-weight-semibold);
    letter-spacing: var(--qp-tracking-tight);
    font-variant-numeric: tabular-nums;
    color: var(--qp-outcome, var(--qp-text-strong));
    line-height: var(--qp-leading-tight);
}

.qp-summary__label {
    display: flex;
    align-items: center;
    gap: var(--qp-space-2);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-summary__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-outcome, var(--qp-neutral));
    flex: 0 0 auto;
}

/* A zero count should not shout in a status colour. */
.qp-summary__cell[data-empty="true"] .qp-summary__value { color: var(--qp-text-faint); }
.qp-summary__cell[data-empty="true"] .qp-summary__dot { background: var(--qp-border-strong); }

/* ── Trend chart ────────────────────────────────────────────────────────────── */
.qp-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.qp-chart__col {
    transition: opacity var(--qp-duration-fast) var(--qp-ease);
}

.qp-chart:hover .qp-chart__col { opacity: 0.55; }
.qp-chart__col:hover { opacity: 1 !important; }

.qp-chart__grid { stroke: var(--qp-border-subtle); stroke-width: 1; }
.qp-chart__axis { fill: var(--qp-text-faint); font-size: 10px; }

.qp-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qp-space-4);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-legend__item { display: inline-flex; align-items: center; gap: var(--qp-space-2); }

.qp-legend__swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--qp-outcome, var(--qp-neutral));
}

/* Screen-reader table behind every chart. */
.qp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Sparkline ──────────────────────────────────────────────────────────────── */
.qp-spark { display: block; height: 28px; width: 100%; overflow: visible; }
.qp-spark__line { fill: none; stroke: var(--qp-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.qp-spark__area { fill: var(--qp-accent); opacity: 0.09; }
.qp-spark__dot { fill: var(--qp-outcome, var(--qp-accent)); }

/* ── Step timeline ──────────────────────────────────────────────────────────── */
.qp-steps { display: flex; flex-direction: column; }

.qp-step {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: start;
    gap: var(--qp-space-3);
    padding: var(--qp-space-2) var(--qp-space-1);
    border-radius: var(--qp-radius-sm);
    position: relative;
}

/* The connecting rail, drawn between the status glyphs rather than around them. */
.qp-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 26px;
    bottom: -4px;
    width: 1px;
    background: var(--qp-border);
}

.qp-step__glyph {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-outcome-bg, var(--qp-surface-sunken));
    color: var(--qp-outcome, var(--qp-text-muted));
    flex: 0 0 auto;
    z-index: 1;
}

.qp-step__body { min-width: 0; display: flex; flex-direction: column; gap: var(--qp-space-1); }

.qp-step__title {
    font-size: var(--qp-text-sm);
    color: var(--qp-text);
    overflow-wrap: anywhere;
}

.qp-step__type {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-3xs);
    color: var(--qp-text-faint);
    text-transform: uppercase;
    letter-spacing: var(--qp-tracking-caps);
}

.qp-step__duration {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.qp-step--failed { background: var(--qp-fail-bg); }
.qp-step--skipped .qp-step__title { color: var(--qp-text-faint); }

.qp-step__error {
    margin-top: var(--qp-space-1);
    padding: var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    background: var(--qp-surface);
    border: 1px solid var(--qp-fail-border);
    font-size: var(--qp-text-sm);
    color: var(--qp-text);
    line-height: var(--qp-leading-relaxed);
}

/* ── Attempt switcher ───────────────────────────────────────────────────────── */
.qp-attempts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qp-space-2);
    padding: var(--qp-space-1);
    background: var(--qp-surface-sunken);
    border-radius: var(--qp-radius-md);
}

.qp-attempt {
    display: inline-flex;
    align-items: center;
    gap: var(--qp-space-2);
    padding: var(--qp-space-2) var(--qp-space-3);
    border: 0;
    border-radius: var(--qp-radius-sm);
    background: transparent;
    color: var(--qp-text-muted);
    font: inherit;
    font-size: var(--qp-text-xs);
    cursor: pointer;
    transition: background var(--qp-duration-fast) var(--qp-ease), color var(--qp-duration-fast) var(--qp-ease);
}

.qp-attempt:hover { background: var(--qp-surface-hover); color: var(--qp-text); }

.qp-attempt[aria-pressed="true"] {
    background: var(--qp-surface);
    color: var(--qp-text-strong);
    box-shadow: var(--qp-shadow-1);
}

.qp-attempt__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-outcome, var(--qp-neutral));
}

/* ── Screenshot thumbnail + lightbox ────────────────────────────────────────── */
.qp-shot {
    display: block;
    padding: 0;
    border: 1px solid var(--qp-border);
    border-radius: var(--qp-radius-md);
    background: var(--qp-surface-sunken);
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
    max-width: 260px;
    transition: border-color var(--qp-duration-fast) var(--qp-ease);
}

.qp-shot:hover { border-color: var(--qp-accent-border); }
.qp-shot img { display: block; width: 100%; height: auto; }

/* Only the open state gets a display value: a bare `display: grid` would override the user agent's
   `display: none` for a closed <dialog> and leak the toolbar onto the page. */
.qp-lightbox[open] {
    display: grid;
    place-items: center;
}

.qp-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--qp-z-dialog);
    padding: var(--qp-space-8);
    background: var(--qp-scrim);
    border: 0;
}

.qp-lightbox__img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius: var(--qp-radius-lg);
    box-shadow: var(--qp-shadow-3);
    background: var(--qp-surface);
}

.qp-lightbox__bar {
    position: absolute;
    top: var(--qp-space-4);
    right: var(--qp-space-4);
    display: flex;
    gap: var(--qp-space-2);
}

/* ── Artifacts ──────────────────────────────────────────────────────────────── */
.qp-artifact-group + .qp-artifact-group { margin-top: var(--qp-space-6); }

.qp-artifact {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-3) var(--qp-space-4);
    border-radius: var(--qp-radius-sm);
}

.qp-artifact + .qp-artifact { border-top: 1px solid var(--qp-border-subtle); }
.qp-artifact:hover { background: var(--qp-surface-hover); }

.qp-artifact__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--qp-radius-sm);
    background: var(--qp-surface-sunken);
    color: var(--qp-text-muted);
    flex: 0 0 auto;
}

.qp-artifact__name {
    font-size: var(--qp-text-sm);
    color: var(--qp-text);
    overflow-wrap: anywhere;
}

.qp-artifact__meta {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    font-variant-numeric: tabular-nums;
}

.qp-artifact__player {
    width: 100%;
    max-width: 640px;
    border-radius: var(--qp-radius-md);
    background: var(--qp-ink-950);
}

.qp-logview {
    margin: 0;
    max-height: 420px;
    overflow: auto;
    padding: var(--qp-space-4);
    border-radius: var(--qp-radius-md);
    background: var(--qp-code-bg);
    border: 1px solid var(--qp-border-subtle);
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-xs);
    line-height: var(--qp-leading-relaxed);
    color: var(--qp-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ── Failure clusters ───────────────────────────────────────────────────────── */
.qp-cluster {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-3);
    padding: var(--qp-space-5);
    background: var(--qp-surface);
    border: 1px solid var(--qp-border-subtle);
    border-radius: var(--qp-radius-lg);
    transition: border-color var(--qp-duration-fast) var(--qp-ease);
}

.qp-cluster:hover { border-color: var(--qp-border); }
.qp-cluster[data-selected="true"] { border-color: var(--qp-accent-border); background: var(--qp-accent-subtle); }

.qp-cluster__error {
    font-size: var(--qp-text-md);
    color: var(--qp-text-strong);
    line-height: var(--qp-leading-snug);
    overflow-wrap: anywhere;
}

.qp-cluster__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qp-space-2) var(--qp-space-4);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-cluster__tests {
    display: flex;
    flex-wrap: wrap;
    gap: var(--qp-space-2);
}

.qp-cluster__test {
    display: inline-flex;
    align-items: baseline;
    gap: var(--qp-space-2);
    padding: var(--qp-space-1) var(--qp-space-3);
    border-radius: var(--qp-radius-full);
    background: var(--qp-surface-sunken);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
    max-width: 320px;
}

.qp-cluster__test code {
    font-family: var(--qp-font-mono);
    font-size: var(--qp-text-3xs);
    color: var(--qp-text-faint);
}

/* Bulk action bar, appears only when something is selected. */
.qp-bulkbar {
    position: sticky;
    bottom: var(--qp-space-4);
    z-index: var(--qp-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-3) var(--qp-space-4);
    border-radius: var(--qp-radius-lg);
    background: var(--qp-surface-overlay);
    border: 1px solid var(--qp-border);
    box-shadow: var(--qp-shadow-3);
}

/* ── Flake-rate bars ────────────────────────────────────────────────────────── */
.qp-flake {
    display: grid;
    grid-template-columns: 1fr 72px;
    align-items: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-3) 0;
}

.qp-flake + .qp-flake { border-top: 1px solid var(--qp-border-subtle); }

.qp-flake__name { font-size: var(--qp-text-sm); color: var(--qp-text); }

.qp-flake__sub {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    font-variant-numeric: tabular-nums;
}

.qp-flake__bar {
    height: 5px;
    margin-top: var(--qp-space-2);
    border-radius: var(--qp-radius-full);
    background: var(--qp-surface-sunken);
    overflow: hidden;
}

.qp-flake__fill { height: 100%; background: var(--qp-warn); border-radius: inherit; }

.qp-flake__rate {
    text-align: right;
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--qp-warn);
}

/* ── Needs attention ────────────────────────────────────────────────────────── */
.qp-attention { display: grid; gap: var(--qp-space-1); }

.qp-attention__row {
    display: flex;
    align-items: center;
    gap: var(--qp-space-3);
    padding: var(--qp-space-3);
    border-radius: var(--qp-radius-sm);
    color: inherit;
    text-decoration: none;
    transition: background var(--qp-duration-fast) var(--qp-ease);
}

.qp-attention__row:hover { background: var(--qp-surface-hover); }

.qp-attention__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--qp-radius-sm);
    background: var(--qp-outcome-bg, var(--qp-surface-sunken));
    color: var(--qp-outcome, var(--qp-text-muted));
    flex: 0 0 auto;
}

.qp-attention__text { flex: 1 1 auto; min-width: 0; font-size: var(--qp-text-sm); color: var(--qp-text); }

.qp-attention__count {
    font-size: var(--qp-text-md);
    font-weight: var(--qp-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--qp-text-strong);
}

/* ── Run detail header meta ─────────────────────────────────────────────────── */
.qp-runmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qp-space-2) var(--qp-space-5);
    font-size: var(--qp-text-xs);
    color: var(--qp-text-muted);
}

.qp-runmeta__item { display: inline-flex; align-items: center; gap: var(--qp-space-2); }
.qp-runmeta__item code { font-family: var(--qp-font-mono); font-size: var(--qp-text-3xs); }

/* ── Test / step split view ─────────────────────────────────────────────────── */
.qp-resultsplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--qp-space-5);
    align-items: start;
}

@media (min-width: 1100px) {
    .qp-resultsplit { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
    .qp-resultsplit__aside { position: sticky; top: calc(var(--qp-topbar-height) + var(--qp-space-4)); }
}

.qp-resultlist { display: flex; flex-direction: column; }

.qp-resultrow {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--qp-space-3);
    width: 100%;
    padding: var(--qp-space-3);
    border: 0;
    border-radius: var(--qp-radius-sm);
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background var(--qp-duration-fast) var(--qp-ease);
}

.qp-resultrow + .qp-resultrow { border-top: 1px solid var(--qp-border-subtle); }
.qp-resultrow:hover { background: var(--qp-surface-hover); }
.qp-resultrow[aria-current="true"] { background: var(--qp-surface-selected); }

.qp-resultrow__glyph {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-outcome-bg, var(--qp-surface-sunken));
    color: var(--qp-outcome, var(--qp-text-muted));
}

.qp-resultrow__name { font-size: var(--qp-text-sm); color: var(--qp-text); }

.qp-resultrow__sub {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    overflow-wrap: anywhere;
}

.qp-resultrow__time {
    font-size: var(--qp-text-xs);
    color: var(--qp-text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Live pulse for a running run ───────────────────────────────────────────── */
.qp-pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--qp-radius-full);
    background: var(--qp-info);
    animation: qp-pulse 1.6s var(--qp-ease) infinite;
}

@keyframes qp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
    .qp-pulse { animation: none; }
    .qp-ratio__seg, .qp-chart__col, .qp-attempt, .qp-attention__row, .qp-resultrow { transition: none; }
}

/* ── Narrow screens ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .qp-summary { grid-template-columns: repeat(2, 1fr); }
    .qp-flake { grid-template-columns: 1fr 56px; }
    .qp-runmeta { gap: var(--qp-space-2) var(--qp-space-4); }
}