:root {
  /* Verdict banner shades come from the approved canvas (RunReport, States card 4). */
  --verdict-correct-bg: #11211A;
  --verdict-correct-line: #1F3D2E;
  --verdict-wrong-bg: #221414;
  --verdict-wrong-line: #3E2220;
}

.run { padding-top: 36px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }

.run-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.run-head__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.run-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.run-head__id { font-size: 13px; color: var(--faint); }
.run-head__title { font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.run-head__sub { font-size: 15px; color: var(--muted); }
.run-head__sub .mono { color: var(--text-2); }
.run-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.run-head__back { font-size: 14px; padding-top: 6px; }

.run-verdict { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; flex-wrap: wrap; }
.run-verdict--correct { background: var(--verdict-correct-bg); border: 1px solid var(--verdict-correct-line); }
.run-verdict--wrong { background: var(--verdict-wrong-bg); border: 1px solid var(--verdict-wrong-line); }
.run-verdict__word { font-weight: 600; }
.run-verdict--correct .run-verdict__word { color: var(--reported); }
.run-verdict--wrong .run-verdict__word { color: var(--failing); }
.run-verdict__text { font-size: 14px; color: var(--text-2); }

.run-report { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.run-report__top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.run-report__conf { font-size: 12px; color: var(--faint); }
.run-report__level--high { color: var(--reported); }
.run-report__cause { display: flex; flex-direction: column; gap: 8px; }
.run-report__k { font-size: 13px; color: var(--faint); }
.run-report__root { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; max-width: 860px; }
.run-report__cat { font-size: 12px; color: var(--muted); }
.run-report__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.run-report__field { display: flex; flex-direction: column; gap: 8px; }
.run-report__v { font-size: 15px; line-height: 1.55; color: var(--text-2); }

.run-evidence { display: flex; flex-direction: column; }
.run-evidence__k { padding-bottom: 4px; }
.run-evidence__item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-inner); }
.run-evidence__finding { font-size: 14px; color: var(--text-2); line-height: 1.5; }

.run-stats { padding: 18px 22px; display: flex; gap: 20px; flex-wrap: wrap; }
.run-stat { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; }
.run-stat b { font-family: var(--font-mono); font-weight: 500; font-size: 18px; color: var(--text); }
.run-stat span { font-size: 12px; color: var(--faint); }
.run-stat .run-stat__phone { display: none; }

.run-timeline { overflow: hidden; }
.run-timeline__head, .run-main__head { border-bottom: 0; }
.run-timeline__all {
  font: 13px var(--font-sans);
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  min-height: 32px;
}
.run-timeline__all:hover { color: var(--accent-hover); }
.run-timeline__foot { padding: 14px 20px; border-top: 1px solid var(--line-inner); font-size: 13px; color: var(--faint); }

.run-row { border-top: 1px solid var(--line-inner); scroll-margin-top: 16px; }
.run-row__head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 20px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
.run-row__head::-webkit-details-marker { display: none; }
.run-row__head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.run-row__n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); min-width: 20px; }
.run-row__tool { font-family: var(--font-mono); font-size: 13px; }
.run-row__lat { display: none; font-size: 11px; color: var(--faint); margin-left: auto; }
.run-row__sum { font-size: 14px; color: var(--muted); flex: 1; min-width: 240px; }
.run-row__body { display: flex; gap: 16px; padding: 0 20px 18px 56px; }
.run-row__inner { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.run-row:target, .run-step:target { background: var(--step-current); }

.run-step__submit { font-family: var(--font-mono); color: var(--reported); }

.run-step { display: flex; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--line-inner); scroll-margin-top: 16px; }
.run-step__n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); padding-top: 3px; min-width: 20px; }
.run-step--next .run-step__n { color: var(--investigating); }
.run-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.run-step__meta { font-family: var(--font-mono); font-size: 12px; color: var(--faint); white-space: nowrap; }
.run-step__why { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.run-step--next .run-step__why { color: var(--muted); }
.run-step__call { font-family: var(--font-mono); font-size: 13px; color: var(--text); word-break: break-word; }
.run-step__sum { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.run-step__toggle {
  font: 12px var(--font-sans);
  color: var(--accent);
  cursor: pointer;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  list-style: none;
}
.run-step__toggle::-webkit-details-marker { display: none; }
.run-step__toggle:hover { color: var(--accent-hover); }
.run-step__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.run-step__hide, .run-step__more[open] .run-step__show { display: none; }
.run-step__more[open] .run-step__hide { display: inline; }
.run-step__more-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.run-step__query, .run-box { font-variant-ligatures: none; }
.run-step__query { font-size: 12px; color: var(--faint); word-break: break-word; white-space: pre-wrap; }

.run-box {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--ground);
  border: 1px solid var(--line-inner);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
}

.run-skel { height: 12px; border-radius: 4px; background: var(--raised); }
.run-skel--long { width: 60%; }
.run-skel--short { width: 38%; }

.run-stages { padding: 16px 20px; display: flex; gap: 20px; flex-wrap: wrap; }
.run-stage { display: flex; flex-direction: column; gap: 8px; font-size: 13px; flex: 1 1 160px; min-width: 0; }
.run-stage__bar { height: 3px; border-radius: 2px; background: var(--line); }
.run-stage__time { color: var(--faint); }
.run-stage__note { color: var(--muted); }
.run-stage--done .run-stage__bar { background: var(--reported); }
.run-stage--current .run-stage__bar { background: var(--investigating); }
.run-stage--current .run-stage__label { color: var(--investigating); }
.run-stage--failed .run-stage__bar { background: var(--failing); }
.run-stage--failed .run-stage__label { color: var(--failing); }
.run-stage--pending .run-stage__label { color: var(--faint); }

.run-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.run-main { flex: 999 1 560px; min-width: 0; overflow: hidden; }
.run-main__state { font-size: 12px; color: var(--faint); }
.run-aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.run-facts { padding: 18px 20px; }
.run-facts__lbl { padding-bottom: 6px; }
.run-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-top: 1px solid var(--line-inner); }
.run-fact > span:first-child { color: var(--muted); }
.run-fact > .mono { text-align: right; overflow-wrap: anywhere; }
.run-can { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.run-can__text { font-size: 14px; color: var(--muted); line-height: 1.5; }
.run-can__tools { font-size: 12.5px; line-height: 2; color: var(--text-2); }

.run-break-phone { display: none; }

.run-missing { padding: 24px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.run-missing__title { font-size: 18px; font-weight: 600; }
.run-missing__text { font-size: 14px; color: var(--muted); line-height: 1.55; }
.run-missing__actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .run { padding-top: 20px; padding-bottom: 28px; gap: 20px; }
  .run-head__title { font-size: 22px; line-height: 1.25; }
  .run-head__break { display: none; }

  .run-report { padding: 16px; gap: 12px; }
  .run-report__root { font-size: 17px; line-height: 1.35; letter-spacing: 0; }
  .run-report__cat, .run-report__symptom, .run-evidence__k, .run-evidence__finding { display: none; }
  .run-report__grid { gap: 12px; }
  .run-report__v { font-size: 14px; line-height: 1.5; color: var(--muted); }
  .run-evidence { flex-direction: row; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
  .run-evidence__item { padding: 0; border-top: 0; }
  .run-evidence .chip { font-size: 11px; border-radius: 5px; padding: 2px 6px; }

  .run-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: none; border: 0; }
  .run-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; gap: 0; }
  .run-stat--wide { display: none; }
  .run-stat b { font-size: 16px; font-weight: 400; }
  .run-stat span { font-family: var(--font-mono); color: var(--muted); }
  .run-stat .run-stat__desk { display: none; }
  .run-stat .run-stat__phone { display: inline; }

  .run-timeline__head { padding: 12px 14px; }
  .run-row__head { gap: 6px 8px; padding: 14px; align-items: center; }
  .run-row__n { min-width: 0; }
  .run-row__tool { font-size: 12px; }
  .run-row__lat { display: inline; }
  .run-row__sum { flex: 1 1 100%; min-width: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; }
  .run-row__body { padding: 0 14px 14px; }
  .run-row__body > .run-step__meta { display: none; }
  .run-timeline__foot { padding: 12px 14px; }

  .run-step { padding: 14px; gap: 10px; }

  .run-break-phone { display: flex; }
}